diff --git a/marketing-ui/admin-ui/public/favicon.ico b/marketing-ui/admin-ui/public/favicon.ico
new file mode 100644
index 0000000..5a7de08
Binary files /dev/null and b/marketing-ui/admin-ui/public/favicon.ico differ
diff --git a/marketing-ui/admin-ui/public/logo.gif b/marketing-ui/admin-ui/public/logo.gif
new file mode 100644
index 0000000..fdbd32c
Binary files /dev/null and b/marketing-ui/admin-ui/public/logo.gif differ
diff --git a/marketing-ui/admin-ui/src/App.vue b/marketing-ui/admin-ui/src/App.vue
new file mode 100644
index 0000000..7407d97
--- /dev/null
+++ b/marketing-ui/admin-ui/src/App.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { isDark } from '@/utils/is'
+import { useAppStore } from '@/store/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import routerSearch from '@/components/RouterSearch/index.vue'
+
+defineOptions({ name: 'APP' })
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('app')
+const appStore = useAppStore()
+const currentSize = computed(() => appStore.getCurrentSize)
+const greyMode = computed(() => appStore.getGreyMode)
+const { wsCache } = useCache()
+
+// 根据浏览器当前主题设置系统主题色
+const setDefaultTheme = () => {
+  let isDarkTheme = wsCache.get(CACHE_KEY.IS_DARK)
+  if (isDarkTheme === null) {
+    isDarkTheme = isDark()
+  }
+  appStore.setIsDark(isDarkTheme)
+}
+setDefaultTheme()
+</script>
+<template>
+  <ConfigGlobal :size="currentSize">
+    <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
+    <routerSearch />
+  </ConfigGlobal>
+</template>
+<style lang="scss">
+$prefix-cls: #{$namespace}-app;
+
+.size {
+  width: 100%;
+  height: 100%;
+}
+
+html,
+body {
+  @extend .size;
+
+  padding: 0 !important;
+  margin: 0;
+  overflow: hidden;
+
+  #app {
+    @extend .size;
+  }
+}
+
+.#{$prefix-cls}-grey-mode {
+  filter: grayscale(100%);
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/api/domesticsms/record/index.ts b/marketing-ui/admin-ui/src/api/domesticsms/record/index.ts
new file mode 100644
index 0000000..23375ba
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/domesticsms/record/index.ts
@@ -0,0 +1,59 @@
+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 短信记录信息 */
+export interface Record {
+          id: number; // 主键 雪花算法
+          mobile?: string; // 手机号
+          nationcode?: string; // 国际电话区号如 86
+          appId: string; // 调用服务方
+          recordType: number; // 0-验证码 1-短信通知 2-推广短信
+          templateId?: number; // 模版编号
+          templateParam?: string; // 模版参数
+          attime: string; // 指定发送时间
+          sendStatus?: number; // -1：待发送 / 0：已发送  /1  : 发送失败
+          senderIp: string; // 发送IP
+  }
+
+// 短信记录 API
+export const RecordApi = {
+  // 查询短信记录分页
+  getRecordPage: async (params: any) => {
+    return await request.get({ url: `/sms/record/page`, params })
+  },
+
+  // 查询短信记录详情
+  getRecord: async (id: number) => {
+    return await request.get({ url: `/sms/record/get?id=` + id })
+  },
+
+  // 新增短信记录
+  createRecord: async (data: Record) => {
+    return await request.post({ url: `/sms/record/create`, data })
+  },
+
+  // 修改短信记录
+  updateRecord: async (data: Record) => {
+    return await request.put({ url: `/sms/record/update`, data })
+  },
+
+  // 删除短信记录
+  deleteRecord: async (id: number) => {
+    return await request.delete({ url: `/sms/record/delete?id=` + id })
+  },
+
+  /** 批量删除短信记录 */
+  deleteRecordList: async (ids: number[]) => {
+    return await request.delete({ url: `/sms/record/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出短信记录 Excel
+  exportRecord: async (params) => {
+    return await request.download({ url: `/sms/record/export-excel`, params })
+  },
+
+  // 根据任务ID列表查询各任务的发送记录计数
+  countByTaskIds: async (taskIds: number[]) => {
+    return await request.get({ url: `/sms/record/count-by-task?taskIds=${taskIds.join(',')}` })
+  }
+}
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/api/domesticsms/sendtask/index.ts b/marketing-ui/admin-ui/src/api/domesticsms/sendtask/index.ts
new file mode 100644
index 0000000..6fab7cf
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/domesticsms/sendtask/index.ts
@@ -0,0 +1,84 @@
+import request from '@/config/axios'
+
+/** 短信任务信息 */
+export interface SmsTask {
+          id: number; // 任务编号
+          appId?: number; // 应用编号
+          taskName?: string; // 任务名称
+          signId?: number; // 签名编号
+          signName?: string; // 签名名称
+          templateId?: number; // 模版编号
+          templateName?: string; // 模版名称
+          templateContent?: string; // 模版内容
+          totalCount?: number; // 手机总数量
+          successCount?: number; // 发送成功数量
+          failCount?: number; // 发送失败数量
+          sendStatus?: number; // 发送状态：0-待发送 1-发送中 2-已完成 3-已取消
+          international?: number; // 短信区域：0-国内短信 1-国际/港澳台短信
+          attime: string; // 指定发送时间
+          remark: string; // 备注信息
+  }
+
+// 短信任务 API
+export const SmsTaskApi = {
+  // 查询短信任务分页
+  getSmsTaskPage: async (params: any) => {
+    return await request.get({ url: `/record/sms-task/page`, params })
+  },
+
+  // 查询短信任务详情
+  getSmsTask: async (id: number) => {
+    return await request.get({ url: `/record/sms-task/get?id=` + id })
+  },
+
+  // 新增短信任务
+  createSmsTask: async (data: Partial<SmsTask>) => {
+    return await request.post({ url: `/record/sms-task/create`, data })
+  },
+  
+  // 通过文件创建短信任务
+  createSmsTaskByFile: async (formData: FormData) => {
+    return await request.post({
+      url: `/record/sms-task/create-by-file`,
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+  },
+
+  // 修改短信任务
+  updateSmsTask: async (data: SmsTask) => {
+    return await request.put({ url: `/record/sms-task/update`, data })
+  },
+
+  // 删除短信任务
+  deleteSmsTask: async (id: number) => {
+    return await request.delete({ url: `/record/sms-task/delete?id=` + id })
+  },
+
+  /** 批量删除短信任务 */
+  deleteSmsTaskList: async (ids: number[]) => {
+    return await request.delete({ url: `/record/sms-task/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出短信任务 Excel
+  exportSmsTask: async (params) => {
+    return await request.download({ url: `/record/sms-task/export-excel`, params })
+  },
+
+  // 暂停短信任务
+  pauseSmsTask: async (id: number) => {
+    return await request.put({ url: `/record/sms-task/pause?id=` + id })
+  },
+
+  // 恢复短信任务
+  resumeSmsTask: async (id: number) => {
+    return await request.put({ url: `/record/sms-task/resume?id=` + id })
+  },
+
+  // 终止短信任务
+  terminateSmsTask: async (id: number) => {
+    return await request.put({ url: `/record/sms-task/terminate?id=` + id })
+  }
+}
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/api/domesticsms/sendtask/index2.ts b/marketing-ui/admin-ui/src/api/domesticsms/sendtask/index2.ts
new file mode 100644
index 0000000..c2e5d54
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/domesticsms/sendtask/index2.ts
@@ -0,0 +1,126 @@
+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 短信发送任务信息 */
+export interface SendTask {
+  id?: number; // 主键ID
+  taskName: string; // 任务名称
+  signName: string; // 短信签名
+  templateId: number; // 短信模板ID
+  content: string; // 短信内容
+  receiveType: string; // 接收方式：0-手动输入，1-文件导入，2-选择联系人
+  mobiles: string; // 手动输入的手机号，多个用逗号分隔
+  file?: File; // 导入的文件
+  contactIds: string[]; // 联系人ID列表
+  isTiming: boolean; // 是否定时发送
+  sendTime?: string; // 发送时间
+  sendCount?: number; // 发送数量
+  successCount?: number; // 成功数量
+  failCount?: number; // 失败数量
+  sendStatus?: number; // 发送状态：0-待发送，1-发送中，2-发送完成，3-发送失败
+  remark: string; // 备注说明
+  createTime?: string; // 创建时间
+}
+
+/** 短信签名信息 */
+export interface SignInfo {
+  id: number;
+  signName: string;
+}
+
+/** 短信模板信息 */
+export interface TemplateInfo {
+  id: number;
+  templateName: string;
+  templateContent: string;
+}
+
+// 短信发送任务 API
+export const SendTaskApi = {
+  
+  // 查询短信发送任务分页
+  getSendTaskPage: async (params: any) => {
+    return await request.get({ url: `/domesticsms/send-task/page`, params })
+  },
+
+  // 查询短信发送任务列表
+  getSendTaskList: async (params: any) => {
+    return await request.get({ url: `/domesticsms/send-task/list`, params })
+  },
+
+  // 查询短信发送任务详情
+  getSendTask: async (id: number) => {
+    return await request.get({ url: `/domesticsms/send-task/get?id=${id}` })
+  },
+
+  // 新增短信发送任务
+  createSendTask: async (data: SendTask) => {
+    return await request.post({ url: `/domesticsms/send-task/create`, data })
+  },
+
+  // 修改短信发送任务
+  updateSendTask: async (data: SendTask) => {
+    return await request.put({ url: `/domesticsms/send-task/update`, data })
+  },
+
+  // 删除短信发送任务
+  deleteSendTask: async (id: number) => {
+    return await request.delete({ url: `/domesticsms/send-task/delete?id=${id}` })
+  },
+
+  /** 批量删除短信发送任务 */
+  deleteSendTaskList: async (ids: number[]) => {
+    return await request.delete({ url: `/domesticsms/send-task/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出短信发送任务 Excel
+  exportSendTask: async (params: any) => {
+    return await request.download({ url: `/domesticsms/send-task/export-excel`, params })
+  },
+
+  // 发送短信任务
+  sendTask: async (id: number) => {
+    return await request.post({ url: `/domesticsms/send-task/send?id=${id}` })
+  },
+
+  // 取消短信任务
+  cancelTask: async (id: number) => {
+    return await request.post({ url: `/domesticsms/send-task/cancel?id=${id}` })
+  },
+
+  // 获取短信签名列表
+  getSignList: async () => {
+    return await request.get({ url: `/domesticsms/sign-info/list` })
+  },
+
+  // 获取短信模板列表
+  getTemplateList: async () => {
+    return await request.get({ url: `/domesticsms/template-info/list` })
+  },
+
+  // 导入手机号文件
+  importMobiles: async (file: File) => {
+    const formData = new FormData()
+    formData.append('file', file)
+    return await request.post({
+      url: `/domesticsms/send-task/import-mobiles`,
+      data: formData,
+      headers: { 'Content-Type': 'multipart/form-data' }
+    })
+  },
+
+  // 验证手机号格式
+  validateMobiles: async (mobiles: string[]) => {
+    return await request.post({ url: `/domesticsms/send-task/validate-mobiles`, data: { mobiles } })
+  },
+
+  // 获取任务发送统计
+  getTaskStatistics: async (id: number) => {
+    return await request.get({ url: `/domesticsms/send-task/statistics?id=${id}` })
+  },
+
+  // 重发失败的短信
+  resendFailedSms: async (id: number) => {
+    return await request.post({ url: `/domesticsms/send-task/resend-failed?id=${id}` })
+  }
+}
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/api/domesticsms/signinfo/index.ts b/marketing-ui/admin-ui/src/api/domesticsms/signinfo/index.ts
new file mode 100644
index 0000000..276bd69
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/domesticsms/signinfo/index.ts
@@ -0,0 +1,57 @@
+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 短信签名信息信息 */
+export interface SignInfo {
+          id: number; // 主键ID
+          signName?: string; // 签名名称
+          tenantId?: number; // 租户ID
+          tenantUserName?: string; // 租户名称
+          signType?: number; // 签名类型：0-企业，1-APP，2-商标，3-政府/事业单位/其他企业
+          bindingAccountIds: number[]; // 绑定的账号ID集合
+          international?: number; // 短信区域：0-国内短信 1-国际/港澳台短信
+          remark: string; // 备注说明
+  }
+
+// 短信签名信息 API
+export const SignInfoApi = {
+  
+  // 查询短信签名信息分页
+  getSignInfoPage: async (params: any) => {
+    return await request.get({ url: `/smschannel/sign-info/page`, params })
+  },
+
+  getSignInfolist: async (params: any) => {
+    return await request.get({ url: `/smschannel/sign-info/list`, params })
+  },
+
+  // 查询短信签名信息详情
+  getSignInfo: async (id: number) => {
+    return await request.get({ url: `/smschannel/sign-info/get?id=` + id })
+  },
+
+  // 新增短信签名信息
+  createSignInfo: async (data: SignInfo) => {
+    return await request.post({ url: `/smschannel/sign-info/create`, data })
+  },
+
+  // 修改短信签名信息
+  updateSignInfo: async (data: SignInfo) => {
+    return await request.put({ url: `/smschannel/sign-info/update`, data })
+  },
+
+  // 删除短信签名信息
+  deleteSignInfo: async (id: number) => {
+    return await request.delete({ url: `/smschannel/sign-info/delete?id=` + id })
+  },
+
+  /** 批量删除短信签名信息 */
+  deleteSignInfoList: async (ids: number[]) => {
+    return await request.delete({ url: `/smschannel/sign-info/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出短信签名信息 Excel
+  exportSignInfo: async (params) => {
+    return await request.download({ url: `/smschannel/sign-info/export-excel`, params })
+  }
+}
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/api/domesticsms/templateinfo/index.ts b/marketing-ui/admin-ui/src/api/domesticsms/templateinfo/index.ts
new file mode 100644
index 0000000..f9aa133
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/domesticsms/templateinfo/index.ts
@@ -0,0 +1,52 @@
+import request from '@/config/axios'
+
+/** 短信模板信息信息 */
+export interface TemplateInfo {
+          id: number; // 模板ID
+          templateName?: string; // 模板名称
+          content?: string; // 模板内容
+          signId?: number; // 签名ID
+          signName?: string; // 签名名称
+          international?: number; // 短信区域：0-国内短信 1-国际/港澳台短信
+          templateType?: number; // 模板类型
+          switchOpen?: number; // 启用开关：1-开启 0-关闭
+          remark: string; // 备注
+  }
+
+// 短信模板信息 API
+export const TemplateInfoApi = {
+  // 查询短信模板信息分页
+  getTemplateInfoPage: async (params: any) => {
+    return await request.get({ url: `/smschannel/template-info/page`, params })
+  },
+
+  // 查询短信模板信息详情
+  getTemplateInfo: async (id: number) => {
+    return await request.get({ url: `/smschannel/template-info/get?id=` + id })
+  },
+
+  // 新增短信模板信息
+  createTemplateInfo: async (data: TemplateInfo) => {
+    return await request.post({ url: `/smschannel/template-info/create`, data })
+  },
+
+  // 修改短信模板信息
+  updateTemplateInfo: async (data: TemplateInfo) => {
+    return await request.put({ url: `/smschannel/template-info/update`, data })
+  },
+
+  // 删除短信模板信息
+  deleteTemplateInfo: async (id: number) => {
+    return await request.delete({ url: `/smschannel/template-info/delete?id=` + id })
+  },
+
+  /** 批量删除短信模板信息 */
+  deleteTemplateInfoList: async (ids: number[]) => {
+    return await request.delete({ url: `/smschannel/template-info/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出短信模板信息 Excel
+  exportTemplateInfo: async (params) => {
+    return await request.download({ url: `/smschannel/template-info/export-excel`, params })
+  }
+}
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/api/domesticsms/templateinfo/templatebindinginfo/index.ts b/marketing-ui/admin-ui/src/api/domesticsms/templateinfo/templatebindinginfo/index.ts
new file mode 100644
index 0000000..ce6b3e8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/domesticsms/templateinfo/templatebindinginfo/index.ts
@@ -0,0 +1,56 @@
+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 短信模板渠道绑定信息 */
+export interface TemplateBindingInfo {
+          id: number; // 绑定ID
+          templateId?: number; // 模板ID
+          templateCode?: string; // 三方模板编码
+          templateContent?: string; // 三方模板内容
+          channelId?: number; // 渠道ID
+          status?: number; // 审核状态：0-待提交 1-待审核 2-审核成功 3-审核失败
+          auditRemark: string; // 审核备注
+  }
+
+// 短信模板渠道绑定 API
+export const TemplateBindingInfoApi = {
+  // 查询短信模板渠道绑定分页
+  getTemplateBindingInfoPage: async (params: any) => {
+    return await request.get({ url: `/sms/template-binding-info/page`, params })
+  },
+
+  // 查询短信模板渠道绑定详情
+  getTemplateBindingInfo: async (id: number) => {
+    return await request.get({ url: `/sms/template-binding-info/get?id=` + id })
+  },
+
+  // 新增短信模板渠道绑定
+  createTemplateBindingInfo: async (data: TemplateBindingInfo) => {
+    return await request.post({ url: `/sms/template-binding-info/create`, data })
+  },
+
+  // 修改短信模板渠道绑定
+  updateTemplateBindingInfo: async (data: TemplateBindingInfo) => {
+    return await request.put({ url: `/sms/template-binding-info/update`, data })
+  },
+
+  // 手工绑定
+  handBind: async (data: TemplateBindingInfo) => {
+    return await request.put({ url: `/sms/template-binding-info/handBind`, data })
+  },
+
+  // 删除短信模板渠道绑定
+  deleteTemplateBindingInfo: async (id: number) => {
+    return await request.delete({ url: `/sms/template-binding-info/delete?id=` + id })
+  },
+
+  /** 批量删除短信模板渠道绑定 */
+  deleteTemplateBindingInfoList: async (ids: number[]) => {
+    return await request.delete({ url: `/sms/template-binding-info/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出短信模板渠道绑定 Excel
+  exportTemplateBindingInfo: async (params) => {
+    return await request.download({ url: `/sms/template-binding-info/export-excel`, params })
+  }
+}
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/api/infra/apiAccessLog/index.ts b/marketing-ui/admin-ui/src/api/infra/apiAccessLog/index.ts
new file mode 100644
index 0000000..4fa50e1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/apiAccessLog/index.ts
@@ -0,0 +1,34 @@
+import request from '@/config/axios'
+
+export interface ApiAccessLogVO {
+  id: number
+  traceId: string
+  userId: number
+  userType: number
+  applicationName: string
+  requestMethod: string
+  requestParams: string
+  responseBody: string
+  requestUrl: string
+  userIp: string
+  userAgent: string
+  operateModule: string
+  operateName: string
+  operateType: number
+  beginTime: Date
+  endTime: Date
+  duration: number
+  resultCode: number
+  resultMsg: string
+  createTime: Date
+}
+
+// 查询列表API 访问日志
+export const getApiAccessLogPage = (params: PageParam) => {
+  return request.get({ url: '/infra/api-access-log/page', params })
+}
+
+// 导出API 访问日志
+export const exportApiAccessLog = (params) => {
+  return request.download({ url: '/infra/api-access-log/export-excel', params })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/apiErrorLog/index.ts b/marketing-ui/admin-ui/src/api/infra/apiErrorLog/index.ts
new file mode 100644
index 0000000..59ee214
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/apiErrorLog/index.ts
@@ -0,0 +1,48 @@
+import request from '@/config/axios'
+
+export interface ApiErrorLogVO {
+  id: number
+  traceId: string
+  userId: number
+  userType: number
+  applicationName: string
+  requestMethod: string
+  requestParams: string
+  requestUrl: string
+  userIp: string
+  userAgent: string
+  exceptionTime: Date
+  exceptionName: string
+  exceptionMessage: string
+  exceptionRootCauseMessage: string
+  exceptionStackTrace: string
+  exceptionClassName: string
+  exceptionFileName: string
+  exceptionMethodName: string
+  exceptionLineNumber: number
+  processUserId: number
+  processStatus: number
+  processTime: Date
+  resultCode: number
+  createTime: Date
+}
+
+// 查询列表API 访问日志
+export const getApiErrorLogPage = (params: PageParam) => {
+  return request.get({ url: '/infra/api-error-log/page', params })
+}
+
+// 更新 API 错误日志的处理状态
+export const updateApiErrorLogPage = (id: number, processStatus: number) => {
+  return request.put({
+    url: '/infra/api-error-log/update-status?id=' + id + '&processStatus=' + processStatus
+  })
+}
+
+// 导出API 访问日志
+export const exportApiErrorLog = (params) => {
+  return request.download({
+    url: '/infra/api-error-log/export-excel',
+    params
+  })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/codegen/index.ts b/marketing-ui/admin-ui/src/api/infra/codegen/index.ts
new file mode 100644
index 0000000..441ca83
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/codegen/index.ts
@@ -0,0 +1,122 @@
+import request from '@/config/axios'
+
+export type CodegenTableVO = {
+  id: number
+  tableId: number
+  isParentMenuIdValid: boolean
+  dataSourceConfigId: number
+  scene: number
+  tableName: string
+  tableComment: string
+  remark: string
+  moduleName: string
+  businessName: string
+  className: string
+  classComment: string
+  author: string
+  createTime: Date
+  updateTime: Date
+  templateType: number
+  parentMenuId: number
+}
+
+export type CodegenColumnVO = {
+  id: number
+  tableId: number
+  columnName: string
+  dataType: string
+  columnComment: string
+  nullable: number
+  primaryKey: number
+  ordinalPosition: number
+  javaType: string
+  javaField: string
+  dictType: string
+  example: string
+  createOperation: number
+  updateOperation: number
+  listOperation: number
+  listOperationCondition: string
+  listOperationResult: number
+  htmlType: string
+}
+
+export type DatabaseTableVO = {
+  name: string
+  comment: string
+}
+
+export type CodegenDetailVO = {
+  table: CodegenTableVO
+  columns: CodegenColumnVO[]
+}
+
+export type CodegenPreviewVO = {
+  filePath: string
+  code: string
+}
+
+export type CodegenUpdateReqVO = {
+  table: CodegenTableVO | any
+  columns: CodegenColumnVO[]
+}
+
+export type CodegenCreateListReqVO = {
+  dataSourceConfigId: number
+  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 })
+}
+
+// 查询详情代码生成表定义
+export const getCodegenTable = (id: number) => {
+  return request.get({ url: '/infra/codegen/detail?tableId=' + id })
+}
+
+// 新增代码生成表定义
+export const createCodegenTable = (data: CodegenCreateListReqVO) => {
+  return request.post({ url: '/infra/codegen/create', data })
+}
+
+// 修改代码生成表定义
+export const updateCodegenTable = (data: CodegenUpdateReqVO) => {
+  return request.put({ url: '/infra/codegen/update', data })
+}
+
+// 基于数据库的表结构，同步数据库的表和字段定义
+export const syncCodegenFromDB = (id: number) => {
+  return request.put({ url: '/infra/codegen/sync-from-db?tableId=' + id })
+}
+
+// 预览生成代码
+export const previewCodegen = (id: number) => {
+  return request.get({ url: '/infra/codegen/preview?tableId=' + id })
+}
+
+// 下载生成代码
+export const downloadCodegen = (id: number) => {
+  return request.download({ url: '/infra/codegen/download?tableId=' + id })
+}
+
+// 获得表定义
+export const getSchemaTableList = (params) => {
+  return request.get({ url: '/infra/codegen/db/table/list', params })
+}
+
+// 基于数据库的表结构，创建代码生成器的表定义
+export const createCodegenList = (data) => {
+  return request.post({ url: '/infra/codegen/create-list', data })
+}
+
+// 删除代码生成表定义
+export const deleteCodegenTable = (id: number) => {
+  return request.delete({ url: '/infra/codegen/delete?tableId=' + id })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/config/index.ts b/marketing-ui/admin-ui/src/api/infra/config/index.ts
new file mode 100644
index 0000000..5ef59f3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/config/index.ts
@@ -0,0 +1,48 @@
+import request from '@/config/axios'
+
+export interface ConfigVO {
+  id: number | undefined
+  category: string
+  name: string
+  key: string
+  value: string
+  type: number
+  visible: boolean
+  remark: string
+  createTime: Date
+}
+
+// 查询参数列表
+export const getConfigPage = (params: PageParam) => {
+  return request.get({ url: '/infra/config/page', params })
+}
+
+// 查询参数详情
+export const getConfig = (id: number) => {
+  return request.get({ url: '/infra/config/get?id=' + id })
+}
+
+// 根据参数键名查询参数值
+export const getConfigKey = (configKey: string) => {
+  return request.get({ url: '/infra/config/get-value-by-key?key=' + configKey })
+}
+
+// 新增参数
+export const createConfig = (data: ConfigVO) => {
+  return request.post({ url: '/infra/config/create', data })
+}
+
+// 修改参数
+export const updateConfig = (data: ConfigVO) => {
+  return request.put({ url: '/infra/config/update', data })
+}
+
+// 删除参数
+export const deleteConfig = (id: number) => {
+  return request.delete({ url: '/infra/config/delete?id=' + id })
+}
+
+// 导出参数
+export const exportConfig = (params) => {
+  return request.download({ url: '/infra/config/export', params })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/dataSourceConfig/index.ts b/marketing-ui/admin-ui/src/api/infra/dataSourceConfig/index.ts
new file mode 100644
index 0000000..b413f34
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/dataSourceConfig/index.ts
@@ -0,0 +1,35 @@
+import request from '@/config/axios'
+
+export interface DataSourceConfigVO {
+  id: number | undefined
+  name: string
+  url: string
+  username: string
+  password: string
+  createTime?: Date
+}
+
+// 新增数据源配置
+export const createDataSourceConfig = (data: DataSourceConfigVO) => {
+  return request.post({ url: '/infra/data-source-config/create', data })
+}
+
+// 修改数据源配置
+export const updateDataSourceConfig = (data: DataSourceConfigVO) => {
+  return request.put({ url: '/infra/data-source-config/update', data })
+}
+
+// 删除数据源配置
+export const deleteDataSourceConfig = (id: number) => {
+  return request.delete({ url: '/infra/data-source-config/delete?id=' + id })
+}
+
+// 查询数据源配置详情
+export const getDataSourceConfig = (id: number) => {
+  return request.get({ url: '/infra/data-source-config/get?id=' + id })
+}
+
+// 查询数据源配置列表
+export const getDataSourceConfigList = () => {
+  return request.get({ url: '/infra/data-source-config/list' })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/demo/demo01/index.ts b/marketing-ui/admin-ui/src/api/infra/demo/demo01/index.ts
new file mode 100644
index 0000000..e34a05d
--- /dev/null
+++ b/marketing-ui/admin-ui/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 })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/demo/demo02/index.ts b/marketing-ui/admin-ui/src/api/infra/demo/demo02/index.ts
new file mode 100644
index 0000000..736a123
--- /dev/null
+++ b/marketing-ui/admin-ui/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 () => {
+  return await request.get({ url: `/infra/demo02-category/list` })
+}
+
+// 查询示例分类详情
+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 })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/demo/demo03/erp/index.ts b/marketing-ui/admin-ui/src/api/infra/demo/demo03/erp/index.ts
new file mode 100644
index 0000000..a2ab539
--- /dev/null
+++ b/marketing-ui/admin-ui/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 })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/demo/demo03/inner/index.ts b/marketing-ui/admin-ui/src/api/infra/demo/demo03/inner/index.ts
new file mode 100644
index 0000000..e366307
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/demo/demo03/inner/index.ts
@@ -0,0 +1,57 @@
+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
+  })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/demo/demo03/normal/index.ts b/marketing-ui/admin-ui/src/api/infra/demo/demo03/normal/index.ts
new file mode 100644
index 0000000..e366307
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/demo/demo03/normal/index.ts
@@ -0,0 +1,57 @@
+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
+  })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/file/index.ts b/marketing-ui/admin-ui/src/api/infra/file/index.ts
new file mode 100644
index 0000000..0e1b2e7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/file/index.ts
@@ -0,0 +1,45 @@
+import request from '@/config/axios'
+
+export interface FilePageReqVO extends PageParam {
+  path?: string
+  type?: string
+  createTime?: Date[]
+}
+
+// 文件预签名地址 Response VO
+export interface FilePresignedUrlRespVO {
+  // 文件配置编号
+  configId: number
+  // 文件上传 URL
+  uploadUrl: string
+  // 文件 URL
+  url: string
+}
+
+// 查询文件列表
+export const getFilePage = (params: FilePageReqVO) => {
+  return request.get({ url: '/infra/file/page', params })
+}
+
+// 删除文件
+export const deleteFile = (id: number) => {
+  return request.delete({ url: '/infra/file/delete?id=' + id })
+}
+
+// 获取文件预签名地址
+export const getFilePresignedUrl = (path: string) => {
+  return request.get<FilePresignedUrlRespVO>({
+    url: '/infra/file/presigned-url',
+    params: { path }
+  })
+}
+
+// 创建文件
+export const createFile = (data: any) => {
+  return request.post({ url: '/infra/file/create', data })
+}
+
+// 上传文件
+export const updateFile = (data: any) => {
+  return request.upload({ url: '/infra/file/upload', data })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/fileConfig/index.ts b/marketing-ui/admin-ui/src/api/infra/fileConfig/index.ts
new file mode 100644
index 0000000..ba40054
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/fileConfig/index.ts
@@ -0,0 +1,61 @@
+import request from '@/config/axios'
+
+export interface FileClientConfig {
+  basePath: string
+  host?: string
+  port?: number
+  username?: string
+  password?: string
+  mode?: string
+  endpoint?: string
+  bucket?: string
+  accessKey?: string
+  accessSecret?: string
+  domain: string
+}
+
+export interface FileConfigVO {
+  id: number
+  name: string
+  storage?: number
+  master: boolean
+  visible: boolean
+  config: FileClientConfig
+  remark: string
+  createTime: Date
+}
+
+// 查询文件配置列表
+export const getFileConfigPage = (params: PageParam) => {
+  return request.get({ url: '/infra/file-config/page', params })
+}
+
+// 查询文件配置详情
+export const getFileConfig = (id: number) => {
+  return request.get({ url: '/infra/file-config/get?id=' + id })
+}
+
+// 更新文件配置为主配置
+export const updateFileConfigMaster = (id: number) => {
+  return request.put({ url: '/infra/file-config/update-master?id=' + id })
+}
+
+// 新增文件配置
+export const createFileConfig = (data: FileConfigVO) => {
+  return request.post({ url: '/infra/file-config/create', data })
+}
+
+// 修改文件配置
+export const updateFileConfig = (data: FileConfigVO) => {
+  return request.put({ url: '/infra/file-config/update', data })
+}
+
+// 删除文件配置
+export const deleteFileConfig = (id: number) => {
+  return request.delete({ url: '/infra/file-config/delete?id=' + id })
+}
+
+// 测试文件配置
+export const testFileConfig = (id: number) => {
+  return request.get({ url: '/infra/file-config/test?id=' + id })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/job/index.ts b/marketing-ui/admin-ui/src/api/infra/job/index.ts
new file mode 100644
index 0000000..033b2cb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/job/index.ts
@@ -0,0 +1,63 @@
+import request from '@/config/axios'
+
+export interface JobVO {
+  id: number
+  name: string
+  status: number
+  handlerName: string
+  handlerParam: string
+  cronExpression: string
+  retryCount: number
+  retryInterval: number
+  monitorTimeout: number
+  createTime: Date
+}
+
+// 任务列表
+export const getJobPage = (params: PageParam) => {
+  return request.get({ url: '/infra/job/page', params })
+}
+
+// 任务详情
+export const getJob = (id: number) => {
+  return request.get({ url: '/infra/job/get?id=' + id })
+}
+
+// 新增任务
+export const createJob = (data: JobVO) => {
+  return request.post({ url: '/infra/job/create', data })
+}
+
+// 修改定时任务调度
+export const updateJob = (data: JobVO) => {
+  return request.put({ url: '/infra/job/update', data })
+}
+
+// 删除定时任务调度
+export const deleteJob = (id: number) => {
+  return request.delete({ url: '/infra/job/delete?id=' + id })
+}
+
+// 导出定时任务调度
+export const exportJob = (params) => {
+  return request.download({ url: '/infra/job/export-excel', params })
+}
+
+// 任务状态修改
+export const updateJobStatus = (id: number, status: number) => {
+  const params = {
+    id,
+    status
+  }
+  return request.put({ url: '/infra/job/update-status', params })
+}
+
+// 定时任务立即执行一次
+export const runJob = (id: number) => {
+  return request.put({ url: '/infra/job/trigger?id=' + id })
+}
+
+// 获得定时任务的下 n 次执行时间
+export const getJobNextTimes = (id: number) => {
+  return request.get({ url: '/infra/job/get_next_times?id=' + id })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/jobLog/index.ts b/marketing-ui/admin-ui/src/api/infra/jobLog/index.ts
new file mode 100644
index 0000000..ed54761
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/jobLog/index.ts
@@ -0,0 +1,34 @@
+import request from '@/config/axios'
+
+export interface JobLogVO {
+  id: number
+  jobId: number
+  handlerName: string
+  handlerParam: string
+  cronExpression: string
+  executeIndex: string
+  beginTime: Date
+  endTime: Date
+  duration: string
+  status: number
+  createTime: string
+  result: string
+}
+
+// 任务日志列表
+export const getJobLogPage = (params: PageParam) => {
+  return request.get({ url: '/infra/job-log/page', params })
+}
+
+// 任务日志详情
+export const getJobLog = (id: number) => {
+  return request.get({ url: '/infra/job-log/get?id=' + id })
+}
+
+// 导出定时任务日志
+export const exportJobLog = (params) => {
+  return request.download({
+    url: '/infra/job-log/export-excel',
+    params
+  })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/redis/index.ts b/marketing-ui/admin-ui/src/api/infra/redis/index.ts
new file mode 100644
index 0000000..f27be77
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/redis/index.ts
@@ -0,0 +1,8 @@
+import request from '@/config/axios'
+
+/**
+ * 获取redis 监控信息
+ */
+export const getCache = () => {
+  return request.get({ url: '/infra/redis/get-monitor-info' })
+}
diff --git a/marketing-ui/admin-ui/src/api/infra/redis/types.ts b/marketing-ui/admin-ui/src/api/infra/redis/types.ts
new file mode 100644
index 0000000..548bfe9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/infra/redis/types.ts
@@ -0,0 +1,176 @@
+export interface RedisMonitorInfoVO {
+  info: RedisInfoVO
+  dbSize: number
+  commandStats: RedisCommandStatsVO[]
+}
+
+export interface RedisInfoVO {
+  io_threaded_reads_processed: string
+  tracking_clients: string
+  uptime_in_seconds: string
+  cluster_connections: string
+  current_cow_size: string
+  maxmemory_human: string
+  aof_last_cow_size: string
+  master_replid2: string
+  mem_replication_backlog: string
+  aof_rewrite_scheduled: string
+  total_net_input_bytes: string
+  rss_overhead_ratio: string
+  hz: string
+  current_cow_size_age: string
+  redis_build_id: string
+  errorstat_BUSYGROUP: string
+  aof_last_bgrewrite_status: string
+  multiplexing_api: string
+  client_recent_max_output_buffer: string
+  allocator_resident: string
+  mem_fragmentation_bytes: string
+  aof_current_size: string
+  repl_backlog_first_byte_offset: string
+  tracking_total_prefixes: string
+  redis_mode: string
+  redis_git_dirty: string
+  aof_delayed_fsync: string
+  allocator_rss_bytes: string
+  repl_backlog_histlen: string
+  io_threads_active: string
+  rss_overhead_bytes: string
+  total_system_memory: string
+  loading: string
+  evicted_keys: string
+  maxclients: string
+  cluster_enabled: string
+  redis_version: string
+  repl_backlog_active: string
+  mem_aof_buffer: string
+  allocator_frag_bytes: string
+  io_threaded_writes_processed: string
+  instantaneous_ops_per_sec: string
+  used_memory_human: string
+  total_error_replies: string
+  role: string
+  maxmemory: string
+  used_memory_lua: string
+  rdb_current_bgsave_time_sec: string
+  used_memory_startup: string
+  used_cpu_sys_main_thread: string
+  lazyfree_pending_objects: string
+  aof_pending_bio_fsync: string
+  used_memory_dataset_perc: string
+  allocator_frag_ratio: string
+  arch_bits: string
+  used_cpu_user_main_thread: string
+  mem_clients_normal: string
+  expired_time_cap_reached_count: string
+  unexpected_error_replies: string
+  mem_fragmentation_ratio: string
+  aof_last_rewrite_time_sec: string
+  master_replid: string
+  aof_rewrite_in_progress: string
+  lru_clock: string
+  maxmemory_policy: string
+  run_id: string
+  latest_fork_usec: string
+  tracking_total_items: string
+  total_commands_processed: string
+  expired_keys: string
+  errorstat_ERR: string
+  used_memory: string
+  module_fork_in_progress: string
+  errorstat_WRONGPASS: string
+  aof_buffer_length: string
+  dump_payload_sanitizations: string
+  mem_clients_slaves: string
+  keyspace_misses: string
+  server_time_usec: string
+  executable: string
+  lazyfreed_objects: string
+  db0: string
+  used_memory_peak_human: string
+  keyspace_hits: string
+  rdb_last_cow_size: string
+  aof_pending_rewrite: string
+  used_memory_overhead: string
+  active_defrag_hits: string
+  tcp_port: string
+  uptime_in_days: string
+  used_memory_peak_perc: string
+  current_save_keys_processed: string
+  blocked_clients: string
+  total_reads_processed: string
+  expire_cycle_cpu_milliseconds: string
+  sync_partial_err: string
+  used_memory_scripts_human: string
+  aof_current_rewrite_time_sec: string
+  aof_enabled: string
+  process_supervised: string
+  master_repl_offset: string
+  used_memory_dataset: string
+  used_cpu_user: string
+  rdb_last_bgsave_status: string
+  tracking_total_keys: string
+  atomicvar_api: string
+  allocator_rss_ratio: string
+  client_recent_max_input_buffer: string
+  clients_in_timeout_table: string
+  aof_last_write_status: string
+  mem_allocator: string
+  used_memory_scripts: string
+  used_memory_peak: string
+  process_id: string
+  master_failover_state: string
+  errorstat_NOAUTH: string
+  used_cpu_sys: string
+  repl_backlog_size: string
+  connected_slaves: string
+  current_save_keys_total: string
+  gcc_version: string
+  total_system_memory_human: string
+  sync_full: string
+  connected_clients: string
+  module_fork_last_cow_size: string
+  total_writes_processed: string
+  allocator_active: string
+  total_net_output_bytes: string
+  pubsub_channels: string
+  current_fork_perc: string
+  active_defrag_key_hits: string
+  rdb_changes_since_last_save: string
+  instantaneous_input_kbps: string
+  used_memory_rss_human: string
+  configured_hz: string
+  expired_stale_perc: string
+  active_defrag_misses: string
+  used_cpu_sys_children: string
+  number_of_cached_scripts: string
+  sync_partial_ok: string
+  used_memory_lua_human: string
+  rdb_last_save_time: string
+  pubsub_patterns: string
+  slave_expires_tracked_keys: string
+  redis_git_sha1: string
+  used_memory_rss: string
+  rdb_last_bgsave_time_sec: string
+  os: string
+  mem_not_counted_for_evict: string
+  active_defrag_running: string
+  rejected_connections: string
+  aof_rewrite_buffer_length: string
+  total_forks: string
+  active_defrag_key_misses: string
+  allocator_allocated: string
+  aof_base_size: string
+  instantaneous_output_kbps: string
+  second_repl_offset: string
+  rdb_bgsave_in_progress: string
+  used_cpu_user_children: string
+  total_connections_received: string
+  migrate_cached_sockets: string
+}
+
+export interface RedisCommandStatsVO {
+  command: string
+  calls: number
+  usec: number
+}
diff --git a/marketing-ui/admin-ui/src/api/login/index.ts b/marketing-ui/admin-ui/src/api/login/index.ts
new file mode 100644
index 0000000..fd12064
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/login/index.ts
@@ -0,0 +1,76 @@
+import request from '@/config/axios'
+import type { RegisterVO, UserLoginVO } from './types'
+
+export interface SmsCodeVO {
+  mobile: string
+  scene: number
+}
+
+export interface SmsLoginVO {
+  mobile: string
+  code: string
+}
+
+// 登录
+export const login = (data: UserLoginVO) => {
+  return request.post({ url: '/system/auth/login', data })
+}
+
+// 注册
+export const register = (data: RegisterVO) => {
+  return request.post({ url: '/system/auth/register', data })
+}
+
+// 登出
+export const loginOut = () => {
+  return request.post({ url: '/system/auth/logout' })
+}
+
+// 获取用户权限信息
+export const getInfo = () => {
+  return request.get({ url: '/system/auth/get-permission-info' })
+}
+
+//获取登录验证码
+export const sendSmsCode = (data: SmsCodeVO) => {
+  return request.post({ url: '/system/auth/send-sms-code', data })
+}
+
+// 短信验证码登录
+export const smsLogin = (data: SmsLoginVO) => {
+  return request.post({ url: '/system/auth/sms-login', data })
+}
+
+// 社交快捷登录，使用 code 授权码
+export function socialLogin(type: string, code: string, state: string) {
+  return request.post({
+    url: '/system/auth/social-login',
+    data: {
+      type,
+      code,
+      state
+    }
+  })
+}
+
+// 社交授权的跳转
+export const socialAuthRedirect = (type: number, redirectUri: string) => {
+  return request.get({
+    url: '/system/auth/social-auth-redirect?type=' + type + '&redirectUri=' + redirectUri
+  })
+}
+// 获取验证图片以及 token
+export const getCode = (data: any) => {
+  debugger
+  return request.postOriginal({ url: 'system/captcha/get', data })
+}
+
+// 滑动或者点选验证
+export const reqCheck = (data: any) => {
+  return request.postOriginal({ url: 'system/captcha/check', data })
+}
+
+// 通过短信重置密码
+export const smsResetPassword = (data: any) => {
+  return request.post({ url: '/system/auth/reset-password', data })
+}
diff --git a/marketing-ui/admin-ui/src/api/login/oauth2/index.ts b/marketing-ui/admin-ui/src/api/login/oauth2/index.ts
new file mode 100644
index 0000000..f4a67fb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/login/oauth2/index.ts
@@ -0,0 +1,41 @@
+import request from '@/config/axios'
+
+// 获得授权信息
+export const getAuthorize = (clientId: string) => {
+  return request.get({ url: '/system/oauth2/authorize?clientId=' + clientId })
+}
+
+// 发起授权
+export const authorize = (
+  responseType: string,
+  clientId: string,
+  redirectUri: string,
+  state: string,
+  autoApprove: boolean,
+  checkedScopes: string[],
+  uncheckedScopes: string[]
+) => {
+  // 构建 scopes
+  const scopes = {}
+  for (const scope of checkedScopes) {
+    scopes[scope] = true
+  }
+  for (const scope of uncheckedScopes) {
+    scopes[scope] = false
+  }
+  // 发起请求
+  return request.post({
+    url: '/system/oauth2/authorize',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    params: {
+      response_type: responseType,
+      client_id: clientId,
+      redirect_uri: redirectUri,
+      state: state,
+      auto_approve: autoApprove,
+      scope: JSON.stringify(scopes)
+    }
+  })
+}
diff --git a/marketing-ui/admin-ui/src/api/login/types.ts b/marketing-ui/admin-ui/src/api/login/types.ts
new file mode 100644
index 0000000..b5790e6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/login/types.ts
@@ -0,0 +1,38 @@
+export type UserLoginVO = {
+  username: string
+  password: string
+  captchaVerification: string
+  socialType?: string
+  socialCode?: string
+  socialState?: string
+}
+
+export type TokenType = {
+  id: number // 编号
+  accessToken: string // 访问令牌
+  refreshToken: string // 刷新令牌
+  userId: number // 用户编号
+  userType: number //用户类型
+  clientId: string //客户端编号
+  expiresTime: number //过期时间
+}
+
+export type UserVO = {
+  id: number
+  username: string
+  nickname: string
+  deptId: number
+  email: string
+  mobile: string
+  sex: number
+  avatar: string
+  loginIp: string
+  loginDate: string
+}
+
+export type RegisterVO = {
+  tenantName: string
+  username: string
+  password: string
+  captchaVerification: string
+}
diff --git a/marketing-ui/admin-ui/src/api/smschannel/channelaccount/index.ts b/marketing-ui/admin-ui/src/api/smschannel/channelaccount/index.ts
new file mode 100644
index 0000000..95e387f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/smschannel/channelaccount/index.ts
@@ -0,0 +1,59 @@
+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 短信渠道账号信息 */
+export interface ChannelAccount {
+          id: number; // 主键ID
+          channelId?: number; // 逻辑关联渠道ID
+          channelCode?: string; // 渠道标识
+          accountName?: string; // 账号名称
+          appKey?: string; // API密钥
+          appSecret?: string; // API密钥
+          md5Value: string; // 关键字段MD5值（算法：MD5(channel_id|account_name|app_key|app_secret)）
+          supportSmsType?: string; // 支持的短信类型[0:验证码,1:短信通知,2:推广短信,3:国际/港澳台消息]
+          extParams: string; // 扩展参数
+          remark: string; // 备注
+  }
+
+// 短信渠道账号 API
+export const ChannelAccountApi = {
+  // 查询短信渠道账号分页
+  getChannelAccountPage: async (params: any) => {
+    return await request.get({ url: `/smschannel/channel-account/page`, params })
+  },
+
+  // 查询短信渠道账号列表
+  getChannelAccountList: async (params: any) => {
+    return await request.get({ url: `/smschannel/channel-account/list`, params })
+  },
+
+  // 查询短信渠道账号详情
+  getChannelAccount: async (id: number) => {
+    return await request.get({ url: `/smschannel/channel-account/get?id=` + id })
+  },
+
+  // 新增短信渠道账号
+  createChannelAccount: async (data: ChannelAccount) => {
+    return await request.post({ url: `/smschannel/channel-account/create`, data })
+  },
+
+  // 修改短信渠道账号
+  updateChannelAccount: async (data: ChannelAccount) => {
+    return await request.put({ url: `/smschannel/channel-account/update`, data })
+  },
+
+  // 删除短信渠道账号
+  deleteChannelAccount: async (id: number) => {
+    return await request.delete({ url: `/smschannel/channel-account/delete?id=` + id })
+  },
+
+  /** 批量删除短信渠道账号 */
+  deleteChannelAccountList: async (ids: number[]) => {
+    return await request.delete({ url: `/smschannel/channel-account/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出短信渠道账号 Excel
+  exportChannelAccount: async (params) => {
+    return await request.download({ url: `/smschannel/channel-account/export-excel`, params })
+  }
+}
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/api/smschannel/smschannelinfo/index.ts b/marketing-ui/admin-ui/src/api/smschannel/smschannelinfo/index.ts
new file mode 100644
index 0000000..2c9310c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/smschannel/smschannelinfo/index.ts
@@ -0,0 +1,60 @@
+import request from '@/config/axios'
+import type {Dayjs} from 'dayjs';
+
+/** 短信渠道配置表（含扩展属性字段）信息 */
+export interface SmsChannelInfo {
+  id: number; // 渠道ID
+  channelName?: string; // 渠道名称
+  channelCode?: string; // 渠道标识（如：aliyun/tencent等）
+  domainUrl?: string; // 请求地址
+  label: string; // 渠道标签（逗号分隔）
+  supportApplyTemplate?: boolean; // 是否支持申请模板（1-支持 0-不支持）
+  supportApplySign?: boolean; // 是否支持申请签名（1-支持 0-不支持）
+  supportBatchSend?: boolean; // 是否支持批量发送（1-支持 0-不支持）
+  supportInternational?: boolean; // 是否支持国际短信（1-支持 0-不支持）
+  supportQueryTemplate?: boolean; // 是否支持查询模板信息（1-支持 0-不支持）
+  supportReply?: boolean; // 是否支持上行回复（1-支持 0-不支持）
+  channelProperties: string; // 渠道扩展属性（JSON格式配置/动态参数）
+}
+
+// 短信渠道配置表（含扩展属性字段） API
+export const SmsChannelInfoApi = {
+  // 查询短信渠道配置表（含扩展属性字段）分页
+  getSmsChannelInfoPage: async (params: any) => {
+    return await request.get({url: `/smschannel/sms-channel-info/page`, params})
+  },
+
+  getSmsChannelInfoList: async (params: any) => {
+    return await request.get({url: `/smschannel/sms-channel-info/list`, params})
+  },
+
+  // 查询短信渠道配置表（含扩展属性字段）详情
+  getSmsChannelInfo: async (id: number) => {
+    return await request.get({url: `/smschannel/sms-channel-info/get?id=` + id})
+  },
+
+  // 新增短信渠道配置表（含扩展属性字段）
+  createSmsChannelInfo: async (data: SmsChannelInfo) => {
+    return await request.post({url: `/smschannel/sms-channel-info/create`, data})
+  },
+
+  // 修改短信渠道配置表（含扩展属性字段）
+  updateSmsChannelInfo: async (data: SmsChannelInfo) => {
+    return await request.put({url: `/smschannel/sms-channel-info/update`, data})
+  },
+
+  // 删除短信渠道配置表（含扩展属性字段）
+  deleteSmsChannelInfo: async (id: number) => {
+    return await request.delete({url: `/smschannel/sms-channel-info/delete?id=` + id})
+  },
+
+  /** 批量删除短信渠道配置表（含扩展属性字段） */
+  deleteSmsChannelInfoList: async (ids: number[]) => {
+    return await request.delete({url: `/smschannel/sms-channel-info/delete-list?ids=${ids.join(',')}`})
+  },
+
+  // 导出短信渠道配置表（含扩展属性字段） Excel
+  exportSmsChannelInfo: async (params) => {
+    return await request.download({url: `/smschannel/sms-channel-info/export-excel`, params})
+  }
+}
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/api/system/area/index.ts b/marketing-ui/admin-ui/src/api/system/area/index.ts
new file mode 100644
index 0000000..e91a499
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/area/index.ts
@@ -0,0 +1,11 @@
+import request from '@/config/axios'
+
+// 获得地区树
+export const getAreaTree = async () => {
+  return await request.get({ url: '/system/area/tree' })
+}
+
+// 获得 IP 对应的地区名
+export const getAreaByIp = async (ip: string) => {
+  return await request.get({ url: '/system/area/get-by-ip?ip=' + ip })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/client/index.ts b/marketing-ui/admin-ui/src/api/system/client/index.ts
new file mode 100644
index 0000000..e639e14
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/client/index.ts
@@ -0,0 +1,52 @@
+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 系统客户端信息 */
+export interface Client {
+          id: number; // 主键ID
+          clientKey: string; // 客户端KEY
+          clientSecret: string; // 客户端密钥
+          grantType: string; // 授权类型
+          deviceType: string; // 设备类型
+          accessTimeout: number; // Token访问超时时间（秒）
+          refreshTimeout: number; // Token刷新超时时间（秒）
+          status: string; // 状态（0 正常 1 停用）
+  }
+
+// 系统客户端 API
+export const ClientApi = {
+  // 查询系统客户端分页
+  getClientPage: async (params: any) => {
+    return await request.get({ url: `/system/client/page`, params })
+  },
+
+  // 查询系统客户端详情
+  getClient: async (id: number) => {
+    return await request.get({ url: `/system/client/get?id=` + id })
+  },
+
+  // 新增系统客户端
+  createClient: async (data: Client) => {
+    return await request.post({ url: `/system/client/create`, data })
+  },
+
+  // 修改系统客户端
+  updateClient: async (data: Client) => {
+    return await request.put({ url: `/system/client/update`, data })
+  },
+
+  // 删除系统客户端
+  deleteClient: async (id: number) => {
+    return await request.delete({ url: `/system/client/delete?id=` + id })
+  },
+
+  /** 批量删除系统客户端 */
+  deleteClientList: async (ids: number[]) => {
+    return await request.delete({ url: `/system/client/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出系统客户端 Excel
+  exportClient: async (params) => {
+    return await request.download({ url: `/system/client/export-excel`, params })
+  }
+}
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/api/system/dept/index.ts b/marketing-ui/admin-ui/src/api/system/dept/index.ts
new file mode 100644
index 0000000..04d5c88
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/dept/index.ts
@@ -0,0 +1,43 @@
+import request from '@/config/axios'
+
+export interface DeptVO {
+  id?: number
+  name: string
+  parentId: number
+  status: number
+  sort: number
+  leaderUserId: number
+  phone: string
+  email: string
+  createTime: Date
+}
+
+// 查询部门（精简)列表
+export const getSimpleDeptList = async (): Promise<DeptVO[]> => {
+  return await request.get({ url: '/system/dept/simple-list' })
+}
+
+// 查询部门列表
+export const getDeptPage = async (params: PageParam) => {
+  return await request.get({ url: '/system/dept/list', params })
+}
+
+// 查询部门详情
+export const getDept = async (id: number) => {
+  return await request.get({ url: '/system/dept/get?id=' + id })
+}
+
+// 新增部门
+export const createDept = async (data: DeptVO) => {
+  return await request.post({ url: '/system/dept/create', data: data })
+}
+
+// 修改部门
+export const updateDept = async (params: DeptVO) => {
+  return await request.put({ url: '/system/dept/update', data: params })
+}
+
+// 删除部门
+export const deleteDept = async (id: number) => {
+  return await request.delete({ url: '/system/dept/delete?id=' + id })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/dict/dict.data.ts b/marketing-ui/admin-ui/src/api/system/dict/dict.data.ts
new file mode 100644
index 0000000..f428648
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/dict/dict.data.ts
@@ -0,0 +1,49 @@
+import request from '@/config/axios'
+
+export type DictDataVO = {
+  id: number | undefined
+  sort: number | undefined
+  label: string
+  value: string
+  dictType: string
+  status: number
+  colorType: string
+  cssClass: string
+  remark: string
+  createTime: Date
+}
+
+// 查询字典数据（精简)列表
+export const getSimpleDictDataList = () => {
+  return request.get({ url: '/system/dict-data/simple-list' })
+}
+
+// 查询字典数据列表
+export const getDictDataPage = (params: PageParam) => {
+  return request.get({ url: '/system/dict-data/page', params })
+}
+
+// 查询字典数据详情
+export const getDictData = (id: number) => {
+  return request.get({ url: '/system/dict-data/get?id=' + id })
+}
+
+// 新增字典数据
+export const createDictData = (data: DictDataVO) => {
+  return request.post({ url: '/system/dict-data/create', data })
+}
+
+// 修改字典数据
+export const updateDictData = (data: DictDataVO) => {
+  return request.put({ url: '/system/dict-data/update', data })
+}
+
+// 删除字典数据
+export const deleteDictData = (id: number) => {
+  return request.delete({ url: '/system/dict-data/delete?id=' + id })
+}
+
+// 导出字典类型数据
+export const exportDictData = (params) => {
+  return request.download({ url: '/system/dict-data/export', params })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/dict/dict.type.ts b/marketing-ui/admin-ui/src/api/system/dict/dict.type.ts
new file mode 100644
index 0000000..eaa5fb6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/dict/dict.type.ts
@@ -0,0 +1,44 @@
+import request from '@/config/axios'
+
+export type DictTypeVO = {
+  id: number | undefined
+  name: string
+  type: string
+  status: number
+  remark: string
+  createTime: Date
+}
+
+// 查询字典（精简)列表
+export const getSimpleDictTypeList = () => {
+  return request.get({ url: '/system/dict-type/list-all-simple' })
+}
+
+// 查询字典列表
+export const getDictTypePage = (params: PageParam) => {
+  return request.get({ url: '/system/dict-type/page', params })
+}
+
+// 查询字典详情
+export const getDictType = (id: number) => {
+  return request.get({ url: '/system/dict-type/get?id=' + id })
+}
+
+// 新增字典
+export const createDictType = (data: DictTypeVO) => {
+  return request.post({ url: '/system/dict-type/create', data })
+}
+
+// 修改字典
+export const updateDictType = (data: DictTypeVO) => {
+  return request.put({ url: '/system/dict-type/update', data })
+}
+
+// 删除字典
+export const deleteDictType = (id: number) => {
+  return request.delete({ url: '/system/dict-type/delete?id=' + id })
+}
+// 导出字典类型
+export const exportDictType = (params) => {
+  return request.download({ url: '/system/dict-type/export', params })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/loginLog/index.ts b/marketing-ui/admin-ui/src/api/system/loginLog/index.ts
new file mode 100644
index 0000000..7296f25
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/loginLog/index.ts
@@ -0,0 +1,25 @@
+import request from '@/config/axios'
+
+export interface LoginLogVO {
+  id: number
+  logType: number
+  traceId: number
+  userId: number
+  userType: number
+  username: string
+  result: number
+  status: number
+  userIp: string
+  userAgent: string
+  createTime: Date
+}
+
+// 查询登录日志列表
+export const getLoginLogPage = (params: PageParam) => {
+  return request.get({ url: '/system/login-log/page', params })
+}
+
+// 导出登录日志
+export const exportLoginLog = (params) => {
+  return request.download({ url: '/system/login-log/export', params })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/menu/index.ts b/marketing-ui/admin-ui/src/api/system/menu/index.ts
new file mode 100644
index 0000000..5a80668
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/menu/index.ts
@@ -0,0 +1,49 @@
+import request from '@/config/axios'
+
+export interface MenuVO {
+  id: number
+  name: string
+  permission: string
+  type: number
+  sort: number
+  parentId: number
+  path: string
+  icon: string
+  component: string
+  componentName?: string
+  status: number
+  visible: boolean
+  keepAlive: boolean
+  alwaysShow?: boolean
+  createTime: Date
+}
+
+// 查询菜单（精简）列表
+export const getSimpleMenusList = () => {
+  return request.get({ url: '/system/menu/simple-list' })
+}
+
+// 查询菜单列表
+export const getMenuList = (params) => {
+  return request.get({ url: '/system/menu/list', params })
+}
+
+// 获取菜单详情
+export const getMenu = (id: number) => {
+  return request.get({ url: '/system/menu/get?id=' + id })
+}
+
+// 新增菜单
+export const createMenu = (data: MenuVO) => {
+  return request.post({ url: '/system/menu/create', data })
+}
+
+// 修改菜单
+export const updateMenu = (data: MenuVO) => {
+  return request.put({ url: '/system/menu/update', data })
+}
+
+// 删除菜单
+export const deleteMenu = (id: number) => {
+  return request.delete({ url: '/system/menu/delete?id=' + id })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/notice/index.ts b/marketing-ui/admin-ui/src/api/system/notice/index.ts
new file mode 100644
index 0000000..f643469
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/notice/index.ts
@@ -0,0 +1,42 @@
+import request from '@/config/axios'
+
+export interface NoticeVO {
+  id: number | undefined
+  title: string
+  type: number
+  content: string
+  status: number
+  remark: string
+  creator: string
+  createTime: Date
+}
+
+// 查询公告列表
+export const getNoticePage = (params: PageParam) => {
+  return request.get({ url: '/system/notice/page', params })
+}
+
+// 查询公告详情
+export const getNotice = (id: number) => {
+  return request.get({ url: '/system/notice/get?id=' + id })
+}
+
+// 新增公告
+export const createNotice = (data: NoticeVO) => {
+  return request.post({ url: '/system/notice/create', data })
+}
+
+// 修改公告
+export const updateNotice = (data: NoticeVO) => {
+  return request.put({ url: '/system/notice/update', data })
+}
+
+// 删除公告
+export const deleteNotice = (id: number) => {
+  return request.delete({ url: '/system/notice/delete?id=' + id })
+}
+
+// 推送公告
+export const pushNotice = (id: number) => {
+  return request.post({ url: '/system/notice/push?id=' + id })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/oauth2/client.ts b/marketing-ui/admin-ui/src/api/system/oauth2/client.ts
new file mode 100644
index 0000000..6f71aca
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/oauth2/client.ts
@@ -0,0 +1,47 @@
+import request from '@/config/axios'
+
+export interface OAuth2ClientVO {
+  id: number
+  clientId: string
+  secret: string
+  name: string
+  logo: string
+  description: string
+  status: number
+  accessTokenValiditySeconds: number
+  refreshTokenValiditySeconds: number
+  redirectUris: string[]
+  autoApprove: boolean
+  authorizedGrantTypes: string[]
+  scopes: string[]
+  authorities: string[]
+  resourceIds: string[]
+  additionalInformation: string
+  isAdditionalInformationJson: boolean
+  createTime: Date
+}
+
+// 查询 OAuth2 客户端的列表
+export const getOAuth2ClientPage = (params: PageParam) => {
+  return request.get({ url: '/system/oauth2-client/page', params })
+}
+
+// 查询 OAuth2 客户端的详情
+export const getOAuth2Client = (id: number) => {
+  return request.get({ url: '/system/oauth2-client/get?id=' + id })
+}
+
+// 新增 OAuth2 客户端
+export const createOAuth2Client = (data: OAuth2ClientVO) => {
+  return request.post({ url: '/system/oauth2-client/create', data })
+}
+
+// 修改 OAuth2 客户端
+export const updateOAuth2Client = (data: OAuth2ClientVO) => {
+  return request.put({ url: '/system/oauth2-client/update', data })
+}
+
+// 删除 OAuth2
+export const deleteOAuth2Client = (id: number) => {
+  return request.delete({ url: '/system/oauth2-client/delete?id=' + id })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/oauth2/token.ts b/marketing-ui/admin-ui/src/api/system/oauth2/token.ts
new file mode 100644
index 0000000..ac89ae8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/oauth2/token.ts
@@ -0,0 +1,22 @@
+import request from '@/config/axios'
+
+export interface OAuth2TokenVO {
+  id: number
+  accessToken: string
+  refreshToken: string
+  userId: number
+  userType: number
+  clientId: string
+  createTime: Date
+  expiresTime: Date
+}
+
+// 查询 token列表
+export const getAccessTokenPage = (params: PageParam) => {
+  return request.get({ url: '/system/oauth2-token/page', params })
+}
+
+// 删除 token
+export const deleteAccessToken = (accessToken: string) => {
+  return request.delete({ url: '/system/oauth2-token/delete?accessToken=' + accessToken })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/operatelog/index.ts b/marketing-ui/admin-ui/src/api/system/operatelog/index.ts
new file mode 100644
index 0000000..cdb713e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/operatelog/index.ts
@@ -0,0 +1,30 @@
+import request from '@/config/axios'
+
+export type OperateLogVO = {
+  id: number
+  traceId: string
+  userType: number
+  userId: number
+  userName: string
+  type: string
+  subType: string
+  bizId: number
+  action: string
+  extra: string
+  requestMethod: string
+  requestUrl: string
+  userIp: string
+  userAgent: string
+  creator: string
+  creatorName: string
+  createTime: Date
+}
+
+// 查询操作日志列表
+export const getOperateLogPage = (params: PageParam) => {
+  return request.get({ url: '/system/operate-log/page', params })
+}
+// 导出操作日志
+export const exportOperateLog = (params: any) => {
+  return request.download({ url: '/system/operate-log/export', params })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/permission/index.ts b/marketing-ui/admin-ui/src/api/system/permission/index.ts
new file mode 100644
index 0000000..b3c7696
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/permission/index.ts
@@ -0,0 +1,42 @@
+import request from '@/config/axios'
+
+export interface PermissionAssignUserRoleReqVO {
+  userId: number
+  roleIds: number[]
+}
+
+export interface PermissionAssignRoleMenuReqVO {
+  roleId: number
+  menuIds: number[]
+}
+
+export interface PermissionAssignRoleDataScopeReqVO {
+  roleId: number
+  dataScope: number
+  dataScopeDeptIds: number[]
+}
+
+// 查询角色拥有的菜单权限
+export const getRoleMenuList = async (roleId: number) => {
+  return await request.get({ url: '/system/permission/list-role-menus?roleId=' + roleId })
+}
+
+// 赋予角色菜单权限
+export const assignRoleMenu = async (data: PermissionAssignRoleMenuReqVO) => {
+  return await request.post({ url: '/system/permission/assign-role-menu', data })
+}
+
+// 赋予角色数据权限
+export const assignRoleDataScope = async (data: PermissionAssignRoleDataScopeReqVO) => {
+  return await request.post({ url: '/system/permission/assign-role-data-scope', data })
+}
+
+// 查询用户拥有的角色数组
+export const getUserRoleList = async (userId: number) => {
+  return await request.get({ url: '/system/permission/list-user-roles?userId=' + userId })
+}
+
+// 赋予用户角色
+export const assignUserRole = async (data: PermissionAssignUserRoleReqVO) => {
+  return await request.post({ url: '/system/permission/assign-user-role', data })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/post/index.ts b/marketing-ui/admin-ui/src/api/system/post/index.ts
new file mode 100644
index 0000000..0e6f2ca
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/post/index.ts
@@ -0,0 +1,46 @@
+import request from '@/config/axios'
+
+export interface PostVO {
+  id?: number
+  name: string
+  code: string
+  sort: number
+  status: number
+  remark: string
+  createTime?: Date
+}
+
+// 查询岗位列表
+export const getPostPage = async (params: PageParam) => {
+  return await request.get({ url: '/system/post/page', params })
+}
+
+// 获取岗位精简信息列表
+export const getSimplePostList = async (): Promise<PostVO[]> => {
+  return await request.get({ url: '/system/post/simple-list' })
+}
+
+// 查询岗位详情
+export const getPost = async (id: number) => {
+  return await request.get({ url: '/system/post/get?id=' + id })
+}
+
+// 新增岗位
+export const createPost = async (data: PostVO) => {
+  return await request.post({ url: '/system/post/create', data })
+}
+
+// 修改岗位
+export const updatePost = async (data: PostVO) => {
+  return await request.put({ url: '/system/post/update', data })
+}
+
+// 删除岗位
+export const deletePost = async (id: number) => {
+  return await request.delete({ url: '/system/post/delete?id=' + id })
+}
+
+// 导出岗位
+export const exportPost = async (params) => {
+  return await request.download({ url: '/system/post/export', params })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/role/index.ts b/marketing-ui/admin-ui/src/api/system/role/index.ts
new file mode 100644
index 0000000..3325dde
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/role/index.ts
@@ -0,0 +1,61 @@
+import request from '@/config/axios'
+
+export interface RoleVO {
+  id: number
+  name: string
+  code: string
+  sort: number
+  status: number
+  type: number
+  dataScope: number
+  dataScopeDeptIds: number[]
+  createTime: Date
+}
+
+export interface UpdateStatusReqVO {
+  id: number
+  status: number
+}
+
+// 查询角色列表
+export const getRolePage = async (params: PageParam) => {
+  return await request.get({ url: '/system/role/page', params })
+}
+
+// 查询角色（精简)列表
+export const getSimpleRoleList = async (): Promise<RoleVO[]> => {
+  return await request.get({ url: '/system/role/simple-list' })
+}
+
+// 查询角色详情
+export const getRole = async (id: number) => {
+  return await request.get({ url: '/system/role/get?id=' + id })
+}
+
+// 新增角色
+export const createRole = async (data: RoleVO) => {
+  return await request.post({ url: '/system/role/create', data })
+}
+
+// 修改角色
+export const updateRole = async (data: RoleVO) => {
+  return await request.put({ url: '/system/role/update', data })
+}
+
+// 修改角色状态
+export const updateRoleStatus = async (data: UpdateStatusReqVO) => {
+  return await request.put({ url: '/system/role/update-status', data })
+}
+
+// 删除角色
+export const deleteRole = async (id: number) => {
+  return await request.delete({ url: '/system/role/delete?id=' + id })
+}
+
+// 导出角色
+export const exportRole = (params) => {
+  return request.download({
+    url: '/system/role/export-excel',
+    params
+  })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/social/client/index.ts b/marketing-ui/admin-ui/src/api/system/social/client/index.ts
new file mode 100644
index 0000000..bf13ab4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/social/client/index.ts
@@ -0,0 +1,37 @@
+import request from '@/config/axios'
+
+export interface SocialClientVO {
+  id: number
+  name: string
+  socialType: number
+  userType: number
+  clientId: string
+  clientSecret: string
+  agentId: string
+  status: number
+}
+
+// 查询社交客户端列表
+export const getSocialClientPage = async (params) => {
+  return await request.get({ url: `/system/social-client/page`, params })
+}
+
+// 查询社交客户端详情
+export const getSocialClient = async (id: number) => {
+  return await request.get({ url: `/system/social-client/get?id=` + id })
+}
+
+// 新增社交客户端
+export const createSocialClient = async (data: SocialClientVO) => {
+  return await request.post({ url: `/system/social-client/create`, data })
+}
+
+// 修改社交客户端
+export const updateSocialClient = async (data: SocialClientVO) => {
+  return await request.put({ url: `/system/social-client/update`, data })
+}
+
+// 删除社交客户端
+export const deleteSocialClient = async (id: number) => {
+  return await request.delete({ url: `/system/social-client/delete?id=` + id })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/social/user/index.ts b/marketing-ui/admin-ui/src/api/system/social/user/index.ts
new file mode 100644
index 0000000..f11231b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/social/user/index.ts
@@ -0,0 +1,24 @@
+import request from '@/config/axios'
+
+export interface SocialUserVO {
+  id: number
+  type: number
+  openid: string
+  token: string
+  rawTokenInfo: string
+  nickname: string
+  avatar: string
+  rawUserInfo: string
+  code: string
+  state: string
+}
+
+// 查询社交用户列表
+export const getSocialUserPage = async (params) => {
+  return await request.get({ url: `/system/social-user/page`, params })
+}
+
+// 查询社交用户详情
+export const getSocialUser = async (id: number) => {
+  return await request.get({ url: `/system/social-user/get?id=` + id })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/user/index.ts b/marketing-ui/admin-ui/src/api/system/user/index.ts
new file mode 100644
index 0000000..715d4c7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/user/index.ts
@@ -0,0 +1,76 @@
+import request from '@/config/axios'
+
+export interface UserVO {
+  id: number
+  username: string
+  nickname: string
+  deptId: number
+  postIds: string[]
+  email: string
+  mobile: string
+  sex: number
+  avatar: string
+  loginIp: string
+  status: number
+  remark: string
+  loginDate: Date
+  createTime: Date
+}
+
+// 查询用户管理列表
+export const getUserPage = (params: PageParam) => {
+  return request.get({ url: '/system/user/page', params })
+}
+
+// 查询用户详情
+export const getUser = (id: number) => {
+  return request.get({ url: '/system/user/get?id=' + id })
+}
+
+// 新增用户
+export const createUser = (data: UserVO) => {
+  return request.post({ url: '/system/user/create', data })
+}
+
+// 修改用户
+export const updateUser = (data: UserVO) => {
+  return request.put({ url: '/system/user/update', data })
+}
+
+// 删除用户
+export const deleteUser = (id: number) => {
+  return request.delete({ url: '/system/user/delete?id=' + id })
+}
+
+// 导出用户
+export const exportUser = (params: any) => {
+  return request.download({ url: '/system/user/export', params })
+}
+
+// 下载用户导入模板
+export const importUserTemplate = () => {
+  return request.download({ url: '/system/user/get-import-template' })
+}
+
+// 用户密码重置
+export const resetUserPassword = (id: number, password: string) => {
+  const data = {
+    id,
+    password
+  }
+  return request.put({ url: '/system/user/update-password', data: data })
+}
+
+// 用户状态修改
+export const updateUserStatus = (id: number, status: number) => {
+  const data = {
+    id,
+    status
+  }
+  return request.put({ url: '/system/user/update-status', data: data })
+}
+
+// 获取用户精简信息列表
+export const getSimpleUserList = (): Promise<UserVO[]> => {
+  return request.get({ url: '/system/user/simple-list' })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/user/profile.ts b/marketing-ui/admin-ui/src/api/system/user/profile.ts
new file mode 100644
index 0000000..1e80e85
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/user/profile.ts
@@ -0,0 +1,65 @@
+import request from '@/config/axios'
+
+export interface ProfileVO {
+  id: number
+  username: string
+  nickname: string
+  dept: {
+    id: number
+    name: string
+  }
+  roles: {
+    id: number
+    name: string
+  }[]
+  posts: {
+    id: number
+    name: string
+  }[]
+  socialUsers: {
+    type: number
+    openid: string
+  }[]
+  email: string
+  mobile: string
+  sex: number
+  avatar: string
+  status: number
+  remark: string
+  loginIp: string
+  loginDate: Date
+  createTime: Date
+}
+
+export interface UserProfileUpdateReqVO {
+  nickname: string
+  email: string
+  mobile: string
+  sex: number
+}
+
+// 查询用户个人信息
+export const getUserProfile = () => {
+  return request.get({ url: '/system/user/profile/get' })
+}
+
+// 修改用户个人信息
+export const updateUserProfile = (data: UserProfileUpdateReqVO) => {
+  return request.put({ url: '/system/user/profile/update', data })
+}
+
+// 用户密码重置
+export const updateUserPassword = (oldPassword: string, newPassword: string) => {
+  return request.put({
+    url: '/system/user/profile/update-password',
+    data: {
+      oldPassword: oldPassword,
+      newPassword: newPassword
+    }
+  })
+}
+
+// 用户头像上传
+export const uploadAvatar = (data) => {
+  return request.upload({ url: '/system/user/profile/update-avatar', data: data })
+}
diff --git a/marketing-ui/admin-ui/src/api/system/user/socialUser.ts b/marketing-ui/admin-ui/src/api/system/user/socialUser.ts
new file mode 100644
index 0000000..79f4d40
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/system/user/socialUser.ts
@@ -0,0 +1,31 @@
+import request from '@/config/axios'
+
+// 社交绑定，使用 code 授权码
+export const socialBind = (type, code, state) => {
+  return request.post({
+    url: '/system/social-user/bind',
+    data: {
+      type,
+      code,
+      state
+    }
+  })
+}
+
+// 取消社交绑定
+export const socialUnbind = (type, openid) => {
+  return request.delete({
+    url: '/system/social-user/unbind',
+    data: {
+      type,
+      openid
+    }
+  })
+}
+
+// 社交授权的跳转
+export const socialAuthRedirect = (type, redirectUri) => {
+  return request.get({
+    url: '/system/auth/social-auth-redirect?type=' + type + '&redirectUri=' + redirectUri
+  })
+}
diff --git a/marketing-ui/admin-ui/src/api/tenant/SmsAppinfo/index.ts b/marketing-ui/admin-ui/src/api/tenant/SmsAppinfo/index.ts
new file mode 100644
index 0000000..fd96b79
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/tenant/SmsAppinfo/index.ts
@@ -0,0 +1,50 @@
+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 租户应用信息 */
+export interface SmsAppinfo {
+          id: number; // 应用编号
+          appKey?: string; // 应用密钥Key
+          appName?: string; // 应用名称
+          appSecret?: string; // 应用密钥Secret
+          status: number; // 状态：0-有效 / 1-无效
+          remark: string; // 备注信息
+  }
+
+// 租户应用 API
+export const SmsAppinfoApi = {
+  // 查询租户应用分页
+  getSmsAppinfoPage: async (params: any) => {
+    return await request.get({ url: `/tenant/sms-appinfo/page`, params })
+  },
+
+  // 查询租户应用详情
+  getSmsAppinfo: async (id: number) => {
+    return await request.get({ url: `/tenant/sms-appinfo/get?id=` + id })
+  },
+
+  // 新增租户应用
+  createSmsAppinfo: async (data: SmsAppinfo) => {
+    return await request.post({ url: `/tenant/sms-appinfo/create`, data })
+  },
+
+  // 修改租户应用
+  updateSmsAppinfo: async (data: SmsAppinfo) => {
+    return await request.put({ url: `/tenant/sms-appinfo/update`, data })
+  },
+
+  // 删除租户应用
+  deleteSmsAppinfo: async (id: number) => {
+    return await request.delete({ url: `/tenant/sms-appinfo/delete?id=` + id })
+  },
+
+  /** 批量删除租户应用 */
+  deleteSmsAppinfoList: async (ids: number[]) => {
+    return await request.delete({ url: `/tenant/sms-appinfo/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出租户应用 Excel
+  exportSmsAppinfo: async (params) => {
+    return await request.download({ url: `/tenant/sms-appinfo/export-excel`, params })
+  }
+}
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/api/tenant/index.ts b/marketing-ui/admin-ui/src/api/tenant/index.ts
new file mode 100644
index 0000000..8455d0d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/api/tenant/index.ts
@@ -0,0 +1,51 @@
+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 租户信息 */
+export interface Tenant {
+          id: number; // 租户编号
+          tenantUserName?: string; // 租户用户名
+          password?: string; // 密码
+          email: string; // 邮箱
+          mobile: string; // 手机号
+          nationcode: string; // 手机国家编码
+  }
+
+// 租户 API
+export const TenantApi = {
+  // 查询租户分页
+  getTenantPage: async (params: any) => {
+    return await request.get({ url: `/sms/tenant/page`, params })
+  },
+
+  // 查询租户详情
+  getTenant: async (id: number) => {
+    return await request.get({ url: `/sms/tenant/get?id=` + id })
+  },
+
+  // 新增租户
+  createTenant: async (data: Tenant) => {
+    return await request.post({ url: `/sms/tenant/create`, data })
+  },
+
+  // 修改租户
+  updateTenant: async (data: Tenant) => {
+    return await request.put({ url: `/sms/tenant/update`, data })
+  },
+
+  // 删除租户
+  deleteTenant: async (id: number) => {
+    return await request.delete({ url: `/sms/tenant/delete?id=` + id })
+  },
+
+  /** 批量删除租户 */
+  deleteTenantList: async (ids: number[]) => {
+    return await request.delete({ url: `/sms/tenant/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出租户 Excel
+  exportTenant: async (params) => {
+    return await request.download({ url: `/sms/tenant/export-excel`, params })
+  }
+
+}
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/ai/copy-style2.svg b/marketing-ui/admin-ui/src/assets/ai/copy-style2.svg
new file mode 100644
index 0000000..2d56a87
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/ai/copy-style2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715606039621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4256" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M878.250667 981.333333H375.338667a104.661333 104.661333 0 0 1-104.661334-104.661333V375.338667a104.661333 104.661333 0 0 1 104.661334-104.661334h502.912a104.661333 104.661333 0 0 1 104.661333 104.661334v502.912C981.333333 934.485333 934.485333 981.333333 878.250667 981.333333zM375.338667 364.373333a10.666667 10.666667 0 0 0-10.922667 10.965334v502.912c0 6.229333 4.693333 10.922667 10.922667 10.922666h502.912a10.666667 10.666667 0 0 0 10.922666-10.922666V375.338667a10.666667 10.666667 0 0 0-10.922666-10.922667H375.338667z" fill="#ffffff" p-id="4257"></path><path d="M192.597333 753.322667H147.328A104.661333 104.661333 0 0 1 42.666667 648.661333V147.328A104.661333 104.661333 0 0 1 147.328 42.666667H650.24a104.661333 104.661333 0 0 1 104.618667 104.661333v49.962667c0 26.538667-20.309333 46.848-46.848 46.848a46.037333 46.037333 0 0 1-46.848-46.848V147.328a10.666667 10.666667 0 0 0-10.922667-10.965333H147.328a10.666667 10.666667 0 0 0-10.965333 10.965333V650.24c0 6.229333 4.693333 10.922667 10.965333 10.922667h45.269333c26.538667 0 46.848 20.309333 46.848 46.848 0 26.538667-21.845333 45.312-46.848 45.312z" fill="#ffffff" p-id="4258"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/ai/copy.svg b/marketing-ui/admin-ui/src/assets/ai/copy.svg
new file mode 100644
index 0000000..f51f8d8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/ai/copy.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715352878351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1499" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M624.5 786.3c92.9 0 168.2-75.3 168.2-168.2V309c0-92.4-75.3-168.2-168.2-168.2H303.6c-92.4 0-168.2 75.3-168.2 168.2v309.1c0 92.4 75.3 168.2 168.2 168.2h320.9zM178.2 618.1V309c0-69.4 56.1-125.5 125.5-125.5h320.9c69.4 0 125.5 56.1 125.5 125.5v309.1c0 69.4-56.1 125.5-125.5 125.5h-321c-69.4 0-125.4-56.1-125.4-125.5z" p-id="1500" fill="#8a8a8a"></path><path d="M849.8 295.1v361.5c0 102.7-83.6 186.3-186.3 186.3H279.1v42.7h384.4c126.3 0 229.1-102.8 229.1-229.1V295.1h-42.8zM307.9 361.8h312.3c11.8 0 21.4-9.6 21.4-21.4 0-11.8-9.6-21.4-21.4-21.4H307.9c-11.8 0-21.4 9.6-21.4 21.4 0 11.9 9.6 21.4 21.4 21.4zM307.9 484.6h312.3c11.8 0 21.4-9.6 21.4-21.4 0-11.8-9.6-21.4-21.4-21.4H307.9c-11.8 0-21.4 9.6-21.4 21.4 0 11.9 9.6 21.4 21.4 21.4z" p-id="1501" fill="#8a8a8a"></path><path d="M620.2 607.4c11.8 0 21.4-9.6 21.4-21.4 0-11.8-9.6-21.4-21.4-21.4H307.9c-11.8 0-21.4 9.6-21.4 21.4 0 11.8 9.6 21.4 21.4 21.4h312.3z" p-id="1502" fill="#8a8a8a"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/ai/dall2.jpg b/marketing-ui/admin-ui/src/assets/ai/dall2.jpg
new file mode 100644
index 0000000..c07374d
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/ai/dall2.jpg differ
diff --git a/marketing-ui/admin-ui/src/assets/ai/dall3.jpg b/marketing-ui/admin-ui/src/assets/ai/dall3.jpg
new file mode 100644
index 0000000..7f45803
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/ai/dall3.jpg differ
diff --git a/marketing-ui/admin-ui/src/assets/ai/delete.svg b/marketing-ui/admin-ui/src/assets/ai/delete.svg
new file mode 100644
index 0000000..d2ee18e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/ai/delete.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715354120346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3256" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.1 263.7H118.9c-9.1 0-16.4-7.3-16.4-16.4s7.3-16.4 16.4-16.4H907c9.1 0 16.4 7.3 16.4 16.4s-7.3 16.4-16.3 16.4z" fill="#8a8a8a" p-id="3257"></path><path d="M772.5 928.3H257.4c-27.7 0-50.2-22.5-50.2-50.2V247.2c0-9.1 7.3-16.4 16.4-16.4H801c12.1 0 21.9 9.8 21.9 21.9v625.2c0 27.8-22.6 50.4-50.4 50.4zM240 263.7v614.4c0 9.6 7.8 17.4 17.4 17.4h515.2c9.7 0 17.5-7.9 17.5-17.5V263.7H240zM657.4 131.1H368.6c-9.1 0-16.4-7.3-16.4-16.4s7.3-16.4 16.4-16.4h288.7c9.1 0 16.4 7.3 16.4 16.4s-7.3 16.4-16.3 16.4z" fill="#8a8a8a" p-id="3258"></path><path d="M416 754.5c-9.1 0-16.4-7.3-16.4-16.4V517.8c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4V738c0.1 9.1-7.3 16.5-16.4 16.5z" fill="#8a8a8a" p-id="3259"></path><path d="M416 465.2c-9.1 0-16.4-7.3-16.4-16.4v-59.4c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4v59.4c0.1 9.1-7.3 16.4-16.4 16.4zM604.9 754.5c-9.1 0-16.4-7.3-16.4-16.4v-67.2c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4V738c0 9.1-7.3 16.5-16.4 16.5z" fill="#8a8a8a" opacity=".4" p-id="3260"></path><path d="M604.9 619.1c-9.1 0-16.4-7.3-16.4-16.4V389.4c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4v213.3c0 9.1-7.3 16.4-16.4 16.4z" fill="#8a8a8a" p-id="3261"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/ai/gpt.svg b/marketing-ui/admin-ui/src/assets/ai/gpt.svg
new file mode 100644
index 0000000..603e2e9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/ai/gpt.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716345268026" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5622" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M956.408445 419.226665a250.670939 250.670939 0 0 0-22.425219-209.609236A263.163526 263.163526 0 0 0 652.490412 85.715535 259.784384 259.784384 0 0 0 457.728923 0.008192a261.422756 261.422756 0 0 0-249.44216 178.582564 258.453206 258.453206 0 0 0-172.848261 123.901894c-57.03583 96.868753-44.031251 219.132275 32.153053 302.279661a250.670939 250.670939 0 0 0 22.32282 209.609237 263.163526 263.163526 0 0 0 281.595213 123.901893A259.067596 259.067596 0 0 0 566.271077 1023.990784a260.60357 260.60357 0 0 0 249.339762-178.889759 258.453206 258.453206 0 0 0 172.848261-123.901893c57.445423-96.868753 44.13365-218.82508-32.050655-302.074865zM566.578272 957.124721c-45.362429 0-89.496079-15.666934-124.516283-44.543243 1.638372-0.921584 4.198329-2.150363 6.143895-3.481541l206.537289-117.757998a32.35785 32.35785 0 0 0 16.895713-29.081105V474.82892l87.243317 49.97035c1.023983 0.307195 1.638372 1.228779 1.638372 2.252762v238.075953c0 105.8798-86.936122 191.689541-193.942303 191.996736zM148.588578 781.102113a189.846373 189.846373 0 0 1-23.346803-128.612213c1.535974 1.023983 4.09593 2.559956 6.143895 3.48154L337.922959 773.729439c10.444622 6.143896 23.346803 6.143896 34.098621 0l252.30931-143.664758v99.531108c0 1.023983-0.307195 1.945567-1.331177 2.559956l-208.892449 118.986778a196.297463 196.297463 0 0 1-265.518686-70.04041zM94.112704 335.97688c22.630015-39.013737 58.367008-68.81163 101.16948-84.171369V494.591784c0 11.7758 6.45109 22.93721 16.793315 28.978707l252.30931 143.767156L377.141493 716.796006a3.174346 3.174346 0 0 1-2.867152 0.307195l-208.892448-118.986777A190.870355 190.870355 0 0 1 94.215102 335.874482z m717.607001 164.861198L559.410394 357.070922 646.653711 307.20297a3.174346 3.174346 0 0 1 2.969549-0.307195l208.892449 118.986777a190.358364 190.358364 0 0 1 70.961994 262.139544 194.556693 194.556693 0 0 1-101.16948 84.171369V529.407192a31.538664 31.538664 0 0 0-16.588518-28.671513z m87.03852-129.329002c-1.74077-1.023983-4.300727-2.559956-6.246294-3.48154l-206.639687-117.757999a34.09862 34.09862 0 0 0-33.996222 0L399.566711 393.934295v-99.531108c0-1.023983 0.307195-1.945567 1.331178-2.559956l208.892449-119.089176a195.990268 195.990268 0 0 1 265.518686 70.450003c22.732414 38.706542 31.129071 84.171369 23.346803 128.305018zM352.258716 548.862861l-87.243317-49.560757a2.457558 2.457558 0 0 1-1.638372-2.252762V258.870991c0-105.8798 87.243317-191.996736 194.556692-191.689541a194.556693 194.556693 0 0 1 124.209089 44.543243c-1.638372 0.921584-4.198329 2.252762-6.143896 3.48154l-206.639687 117.757999a31.948257 31.948257 0 0 0-16.793315 29.081105l-0.307194 286.715126z m47.307995-100.759887L512 384.001664l112.535687 63.998912v127.997824l-112.228492 63.998912-112.535687-63.998912-0.307195-127.997824z" p-id="5623" fill="#707070"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/ai/qingxi.jpg b/marketing-ui/admin-ui/src/assets/ai/qingxi.jpg
new file mode 100644
index 0000000..d76b815
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/ai/qingxi.jpg differ
diff --git a/marketing-ui/admin-ui/src/assets/ai/ziran.jpg b/marketing-ui/admin-ui/src/assets/ai/ziran.jpg
new file mode 100644
index 0000000..6290724
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/ai/ziran.jpg differ
diff --git a/marketing-ui/admin-ui/src/assets/audio/response.mp3 b/marketing-ui/admin-ui/src/assets/audio/response.mp3
new file mode 100644
index 0000000..51ea86a
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/audio/response.mp3 differ
diff --git a/marketing-ui/admin-ui/src/assets/imgs/avatar.gif b/marketing-ui/admin-ui/src/assets/imgs/avatar.gif
new file mode 100644
index 0000000..fdbd32c
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/imgs/avatar.gif differ
diff --git a/marketing-ui/admin-ui/src/assets/imgs/avatar.jpg b/marketing-ui/admin-ui/src/assets/imgs/avatar.jpg
new file mode 100644
index 0000000..d46a70a
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/imgs/avatar.jpg differ
diff --git a/marketing-ui/admin-ui/src/assets/imgs/diy/app-nav-bar-mp.png b/marketing-ui/admin-ui/src/assets/imgs/diy/app-nav-bar-mp.png
new file mode 100644
index 0000000..c982804
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/imgs/diy/app-nav-bar-mp.png differ
diff --git a/marketing-ui/admin-ui/src/assets/imgs/diy/statusBar.png b/marketing-ui/admin-ui/src/assets/imgs/diy/statusBar.png
new file mode 100644
index 0000000..b85562e
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/imgs/diy/statusBar.png differ
diff --git a/marketing-ui/admin-ui/src/assets/imgs/iot/device.png b/marketing-ui/admin-ui/src/assets/imgs/iot/device.png
new file mode 100644
index 0000000..79339cd
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/imgs/iot/device.png differ
diff --git a/marketing-ui/admin-ui/src/assets/imgs/logo.png b/marketing-ui/admin-ui/src/assets/imgs/logo.png
new file mode 100644
index 0000000..7e1043f
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/imgs/logo.png differ
diff --git a/marketing-ui/admin-ui/src/assets/imgs/profile.jpg b/marketing-ui/admin-ui/src/assets/imgs/profile.jpg
new file mode 100644
index 0000000..e4bcf87
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/imgs/profile.jpg differ
diff --git a/marketing-ui/admin-ui/src/assets/imgs/wechat.png b/marketing-ui/admin-ui/src/assets/imgs/wechat.png
new file mode 100644
index 0000000..6afc5e4
Binary files /dev/null and b/marketing-ui/admin-ui/src/assets/imgs/wechat.png differ
diff --git a/marketing-ui/admin-ui/src/assets/map/json/china.json b/marketing-ui/admin-ui/src/assets/map/json/china.json
new file mode 100644
index 0000000..bbc0a83
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/map/json/china.json
@@ -0,0 +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
+}
diff --git a/marketing-ui/admin-ui/src/assets/svgs/403.svg b/marketing-ui/admin-ui/src/assets/svgs/403.svg
new file mode 100644
index 0000000..4500596
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/403.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" enable-background="new 0 0 800 800"><style>.st26{fill:#fff}</style><g id="图层_11"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="401.773" y1="162.104" x2="401.773" y2="717.596"><stop offset="0" stop-color="#F4F2FB"/><stop offset="1" stop-color="#E1EEF5"/></linearGradient><path d="M485.03 203.46c-38.37 30.29-120.74 33.81-181.17-2.22s-172-31.38-202.22 34.87 37.19 131.33 12.78 178.98S8.66 530.13 64.45 611.49s126.6 60.62 169.22 52.45c84.17-16.13 189.79 115.67 308.62 16.13 68.47-57.35 170.44 42.09 210.17-81.36 32.78-101.86-85.67-139.5-49.97-208.03 37.96-72.88 30.67-159.24-10.46-201.06-38.31-38.96-140.75-38.46-207 13.84z" style="fill:url(#SVGID_1_)"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="494.782" y1="599.604" x2="494.782" y2="428.659"><stop offset=".34" stop-color="#B0B9E1"/><stop offset=".866" stop-color="#EAF0F8"/></linearGradient><path d="M406.65 428.66h216.44l-22.53 49.03s59.19 57.87-14.13 121.91c-134.28-44.17-221.74-37.1-219.98-38.87 1.77-1.76 40.2-132.07 40.2-132.07z" style="fill:url(#SVGID_2_)"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="116.855" y1="542.49" x2="116.855" y2="405.316"><stop offset=".227" stop-color="#B7ACE0"/><stop offset=".789" stop-color="#E8E7FA"/></linearGradient><path d="M117.64 405.56s-.22-.57-.52.04c-2.7 5.49-27.15 64.96-29.09 110.86 0 0-4.08 26.37 30.11 26.02 28.54-.29 27.78-24.6 27.68-32.79-.39-33.22-28.18-104.13-28.18-104.13z" style="fill:url(#SVGID_3_)"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="116.857" y1="420.547" x2="116.857" y2="571.681"><stop offset="0" stop-color="#ECF1FB"/><stop offset=".818" stop-color="#AFB0E7"/></linearGradient><path d="M116.86 571.68c-.55 0-1-.45-1-1V421.55c0-.55.45-1 1-1s1 .45 1 1v149.13c0 .55-.45 1-1 1z" style="fill:url(#SVGID_4_)"/><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="617.984" y1="450.968" x2="617.984" y2="362.644"><stop offset=".227" stop-color="#CCD4F4"/><stop offset=".789" stop-color="#ECF1FB"/></linearGradient><path d="M618.49 362.8s-.14-.37-.33.03c-1.74 3.53-17.48 41.83-18.73 71.38 0 0-2.63 16.98 19.39 16.76 18.38-.18 17.89-15.84 17.82-21.11-.25-21.4-18.15-67.06-18.15-67.06z" style="fill:url(#SVGID_5_)"/><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="617.985" y1="372.451" x2="617.985" y2="469.764"><stop offset="0" stop-color="#ECF1FB"/><stop offset="1" stop-color="#A6A8E2"/></linearGradient><path d="M617.99 469.76c-.36 0-.64-.29-.64-.64V373.1c0-.36.29-.64.64-.64s.64.29.64.64v96.02c0 .36-.29.64-.64.64z" style="fill:url(#SVGID_6_)"/><linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="463.902" y1="88.362" x2="429.148" y2="148.558"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><circle cx="446.52" cy="118.46" r="34.75" style="fill:url(#SVGID_7_)"/><linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="421.565" y1="118.828" x2="421.565" y2="176.282"><stop offset="0" stop-color="#F9FAFE"/><stop offset="1" stop-color="#E5EDF7"/></linearGradient><path d="M466.3 137.41h-34.57c-2.23-10.61-11.65-18.58-22.93-18.58s-20.69 7.97-22.93 18.58h-9.05c-10.73 0-19.44 8.7-19.44 19.44 0 10.73 8.7 19.44 19.44 19.44h89.47c10.73 0 19.44-8.7 19.44-19.44.01-10.74-8.69-19.44-19.43-19.44z" style="fill:url(#SVGID_8_)"/><g><linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="688.586" y1="540.208" x2="688.586" y2="512.38"><stop offset=".227" stop-color="#AFB0E7"/><stop offset="1" stop-color="#ECF1FB"/></linearGradient><circle cx="688.59" cy="526.29" r="13.91" style="fill:url(#SVGID_9_)"/><linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="688.635" y1="515.894" x2="688.635" y2="560.69"><stop offset="0" stop-color="#DDE1F6"/><stop offset=".818" stop-color="#A6A8E2"/></linearGradient><path d="M688.64 560.69c-.24 0-.43-.19-.43-.43v-43.94c0-.24.19-.43.43-.43s.43.19.43.43v43.94a.44.44 0 01-.43.43z" style="fill:url(#SVGID_10_)"/></g><g><linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="2622.045" y1="266.481" x2="2451.058" y2="562.64" gradientTransform="matrix(-1 0 0 1 2941.346 0)"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M248.82 393.99c0-24.52-.03-49.03.01-73.54.02-14.37 4.24-18.36 17.97-20.53 41.87-6.61 82.03-18.72 117.91-42.29 10.38-6.82 18.3-7.59 29.06-.47 34.85 23.06 73.26 37.11 114.55 42.8 13.12 1.81 16.84 5.88 16.85 19.25.04 45.72-.4 91.44.18 137.15.34 26.77-8.17 49.99-24.02 70.73-31.46 41.17-74.88 63.76-122.21 80.03-2.5.86-5.83.67-8.36-.23-38.47-13.74-74.58-31.84-104.15-61.09-22.97-22.73-37.84-49.56-37.79-83.22.03-22.87.01-45.73 0-68.59z" style="fill:url(#SVGID_11_)"/><linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="2625.25" y1="279.944" x2="2462.749" y2="561.403" gradientTransform="matrix(-1 0 0 1 2941.346 0)"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M247.94 401.44c0-23.21-.03-46.42.01-69.63.02-13.61 4.06-17.38 17.23-19.43 40.15-6.26 78.67-17.72 113.07-40.04 9.95-6.46 17.55-7.18 27.86-.44 33.42 21.83 70.25 35.14 109.84 40.52 12.58 1.71 16.14 5.56 16.15 18.22.03 43.28-.38 86.57.18 129.84.33 25.34-7.83 47.33-23.03 66.96-30.17 38.98-71.81 60.36-117.19 75.77-2.4.81-5.59.64-8.01-.22-36.89-13.01-71.52-30.14-99.87-57.84-22.03-21.52-36.28-46.91-36.23-78.78.02-21.65-.01-43.29-.01-64.93z" style="fill:url(#SVGID_12_)"/><linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="361.421" y1="346.477" x2="449.513" y2="499.057"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M411.59 435.75c23.18-5.61 40.41-26.11 40.41-50.49 0-28.68-23.85-52.01-53.17-52.01s-53.17 23.33-53.17 52.01c0 24.38 17.24 44.88 40.41 50.49v85.2h25.52v-36.38h32.67v-24.96h-32.67v-23.86zm-40.41-50.49c0-14.91 12.41-27.05 27.65-27.05s27.65 12.14 27.65 27.05-12.41 27.05-27.65 27.05-27.65-12.14-27.65-27.05z" style="fill:url(#SVGID_13_)"/><path class="st26" d="M407.67 439.03c21.8-5.39 38.01-25.1 38.01-48.54 0-27.58-22.43-50.01-50.01-50.01s-50.01 22.43-50.01 50.01c0 23.44 16.21 43.15 38.01 48.54v81.92h24v-34.98h30.73v-24h-30.73v-22.94zm-38.01-48.55c0-14.34 11.67-26.01 26.01-26.01s26.01 11.67 26.01 26.01-11.67 26.01-26.01 26.01-26.01-11.67-26.01-26.01z"/><linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="484.836" y1="475.674" x2="565.754" y2="615.828"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><circle cx="525.3" cy="545.75" r="80.9" style="fill:url(#SVGID_14_)"/><linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="482.787" y1="483.323" x2="559.605" y2="616.376"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#C6D5F4"/></linearGradient><circle cx="521.2" cy="549.85" r="76.81" style="fill:url(#SVGID_15_)"/><path class="st26" d="M538.5 547.62l23.01-23.01c4.44-4.44 4.44-11.63 0-16.06-4.44-4.44-11.63-4.44-16.06 0l-23.01 23.01-23.01-23.01c-4.44-4.44-11.63-4.44-16.06 0-4.44 4.44-4.44 11.63 0 16.06l23.01 23.01-23.01 23.01c-4.44 4.44-4.44 11.63 0 16.06 2.22 2.22 5.13 3.33 8.03 3.33 2.91 0 5.81-1.11 8.03-3.33l23.01-23.01 23.01 23.01c2.22 2.22 5.13 3.33 8.03 3.33s5.81-1.11 8.03-3.33c4.44-4.44 4.44-11.63 0-16.06l-23.01-23.01z"/></g><g><linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="232.569" y1="558.709" x2="232.569" y2="484.191"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M224.88 484.54s-18.08-2.5-23.95 5.81-8.02 29.58-8.02 29.58l13.61-.72-1.15 24.78 25.11 14.72 35.77-19.24-5.44-22.45 11.43-2.98s-3.4-32.58-19.31-27.77c-8.17.87-10.74.73-10.74.73s-2.15 6.85-9.53 6.27c-7.38-.59-7.78-8.73-7.78-8.73z" style="fill:url(#SVGID_16_)"/><linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="233.602" y1="471.483" x2="233.602" y2="495.089"><stop offset="0" stop-color="#F4AE98"/><stop offset="1" stop-color="#FAD1BB"/></linearGradient><path d="M226.69 474.3l-3.76 16.76c-.18.79.23 1.59.98 1.89 1.94.79 5.83 2.13 9.82 2.13 4.15 0 8.06-2.27 9.86-3.48.62-.42.88-1.19.64-1.9l-5.75-17.09a1.643 1.643 0 00-1.86-1.1l-8.61 1.53c-.65.11-1.18.61-1.32 1.26z" style="fill:url(#SVGID_17_)"/><linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="-816.068" y1="920.854" x2="-804.529" y2="839.612" gradientTransform="rotate(-8.082 -2795.015 -6505.71)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M204.24 487.44c5.26-1.75 12.4-.58 12.69 11.22s-11.28 30.62-7.13 37.16c4.2 6.63 13.17 16.05 18.89 21.41-1.33 6.3-4.91 11.61-4.91 11.61s-21.05-9.71-30.21-19.44c-9.17-9.73-4.54-32.03-.3-47.9 3.19-11.95 10.97-14.06 10.97-14.06z" style="fill:url(#SVGID_18_)"/><linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-6575.898" y1="102.823" x2="-6564.359" y2="21.581" gradientTransform="scale(-1 1) rotate(-8.082 -118.103 -44396.273)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M259.39 487.44c-5.26-1.75-12.4-.58-12.69 11.22s11.28 30.62 7.13 37.16c-4.2 6.63-13.17 16.05-18.89 21.41 1.33 6.3 4.91 11.61 4.91 11.61s21.05-9.71 30.21-19.44c9.17-9.73 4.54-32.03.3-47.9-3.19-11.95-10.97-14.06-10.97-14.06z" style="fill:url(#SVGID_19_)"/><linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="232.569" y1="531.798" x2="232.569" y2="579.152"><stop offset="0" stop-color="#275C89"/><stop offset="1" stop-color="#013F7C"/></linearGradient><path d="M206.79 579.15h51.1c2.31 0 4.38-1.75 5.19-4.4l10.3-33.89c1.34-4.4-1.33-9.07-5.19-9.07h-71.23c-3.82 0-6.48 4.6-5.21 8.98l9.84 33.89c.77 2.69 2.86 4.49 5.2 4.49z" style="fill:url(#SVGID_20_)"/><path class="st26" d="M204.75 594.74s-.79-1.74-1.4-1.93c-.61-.19-9.35-.54-12.53-1.36-3.19-.83-12.38-2.14-16.32 1.59-3.43 3.25-4.56 10.84.66 15.2 1.96 1.7 3.89 2.2 11.14 1.86 7.26-.34 17.78-.26 20.09-3.63-.07-5.55-1.64-11.73-1.64-11.73z"/><linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="-5720.751" y1="599.589" x2="-5703.986" y2="599.589" gradientTransform="matrix(-1 0 0 1 -5504.059 0)"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M212.86 592.81s-8.44 1.9-11.45 1.62-.49 11.87-.49 11.87 8.05.56 15.18-1.51c2.4-9.3-3.24-11.98-3.24-11.98z" style="fill:url(#SVGID_21_)"/><linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="209.839" y1="581.112" x2="296.322" y2="581.112"><stop offset="0" stop-color="#18264B"/><stop offset=".652" stop-color="#2D3C65"/></linearGradient><path d="M209.84 592.37l4.39 13.64s94.25-12.41 80.78-43c-11.27-25.57-85.17 29.36-85.17 29.36z" style="fill:url(#SVGID_22_)"/><linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="190.339" y1="591.445" x2="190.339" y2="609.24"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M203.66 593.42s3.45 1.35 3.89 6.17c.44 4.82-.99 8.05-8.33 8.94s-9.21.56-13.81.67-11.29.56-12.27-8.2c-.99-8.75 7.96-10.98 17.24-8.75 2.92.56 13.28 1.17 13.28 1.17z" style="fill:url(#SVGID_23_)"/><g><path class="st26" d="M263.56 594.74s.79-1.74 1.4-1.93c.61-.19 9.35-.54 12.53-1.36 3.19-.83 11.75-2.2 16.08 1.49 4.01 3.42 4.27 11-.29 15.18-1.96 1.7-4.02 2.32-11.28 1.98-7.26-.34-17.78-.26-20.09-3.63.09-5.55 1.65-11.73 1.65-11.73z"/><linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="251.623" y1="599.589" x2="268.387" y2="599.589"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M255.45 592.81s8.44 1.9 11.45 1.62.49 11.87.49 11.87-8.05.56-15.18-1.51c-2.4-9.3 3.24-11.98 3.24-11.98z" style="fill:url(#SVGID_24_)"/><linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="171.993" y1="581.112" x2="258.476" y2="581.112"><stop offset="0" stop-color="#445677"/><stop offset="1" stop-color="#293861"/></linearGradient><path d="M258.48 592.37L254.09 606s-94.25-12.41-80.78-43c11.26-25.56 85.17 29.37 85.17 29.37z" style="fill:url(#SVGID_25_)"/><linearGradient id="SVGID_26_" gradientUnits="userSpaceOnUse" x1="277.976" y1="591.445" x2="277.976" y2="609.24"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M264.66 593.42s-3.45 1.35-3.89 6.17.99 8.05 8.33 8.94c7.34.89 9.21.56 13.81.67s11.29.56 12.27-8.2c.99-8.75-7.96-10.98-17.24-8.75-2.92.56-13.28 1.17-13.28 1.17z" style="fill:url(#SVGID_26_)"/></g><linearGradient id="SVGID_27_" gradientUnits="userSpaceOnUse" x1="249.053" y1="466.067" x2="218.202" y2="466.067"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M248.39 467.6c.56-.8.91-2.84.46-3.44-.83-.67-1.61-.28-2.21.3.14-4.88-.31-8.94-.41-9.97-.3-2.99-3.35-8.48-13.3-8.48-9.95 0-11.88 7.18-11.88 7.18s-.65 5.08-.46 11.24c-.59-.57-1.37-.93-2.18-.27-.46.6-.1 2.64.46 3.44.56.8.91 2.69 1.02 3.74.1.99-.62 3.65 2 3.31 1.56 6.25 7.89 11.47 11.82 11.47 4.3 0 10.01-5.26 11.63-11.48 2.68.37 1.95-2.31 2.04-3.31.09-1.04.45-2.93 1.01-3.73z" style="fill:url(#SVGID_27_)"/><linearGradient id="SVGID_28_" gradientUnits="userSpaceOnUse" x1="213.957" y1="454.142" x2="249.774" y2="454.142"><stop offset="0" stop-color="#4F5C7C"/><stop offset="1" stop-color="#274168"/></linearGradient><path d="M240.1 443.88s-1.94-6.12-9.39-4.65c-7.44 1.46-7.95 4.98-10.87 5.12-4.99.23-8.97 6.45-2.58 13.03 2.85 2.93.44 4.19 1.79 6.78s1.34 5.12 1.34 5.12 2.38-7.6.81-10.84c-.81-1.67 2.77-2.13 7.24-1.73s11.51-1.08 12.06-4.12c1.32 6.23 2.64 6.88 4.31 7.83 1.68.95 1.78 8.48 1.78 8.48s.3-5.53 1.47-6.78c.96-2.04 2.85-10.07.72-12.02s-.32-8.19-8.68-6.22z" style="fill:url(#SVGID_28_)"/></g></g></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/404.svg b/marketing-ui/admin-ui/src/assets/svgs/404.svg
new file mode 100644
index 0000000..5244d8d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/404.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" enable-background="new 0 0 800 800"><style>.st49{fill:#d4e4fe}</style><g id="图层_5"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="401.193" y1="159.763" x2="401.193" y2="715.254"><stop offset="0" stop-color="#F4F2FB"/><stop offset="1" stop-color="#E1EEF5"/></linearGradient><path d="M484.45 201.12c-38.37 30.29-120.74 33.81-181.17-2.22s-172-31.38-202.22 34.87 37.19 131.33 12.78 178.98S8.08 527.79 63.87 609.15s126.6 60.62 169.22 52.45c84.17-16.13 189.79 115.67 308.62 16.13 68.47-57.35 170.44 42.09 210.17-81.36 32.78-101.86-85.67-139.5-49.97-208.03 37.96-72.88 30.67-159.24-10.46-201.06-38.31-38.96-140.75-38.46-207 13.84z" style="fill:url(#SVGID_1_)"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="484.537" y1="604.68" x2="484.537" y2="493.367"><stop offset=".34" stop-color="#B0B9E1"/><stop offset=".866" stop-color="#EAF0F8"/></linearGradient><path d="M285.1 583.44c1.77-1.63 77.74-90.07 77.74-90.07h321.13l-99.5 111.31-299.37-21.24z" style="fill:url(#SVGID_2_)"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="616.023" y1="627.266" x2="657.332" y2="555.716"><stop offset="0" stop-color="#B0B9E1"/><stop offset=".866" stop-color="#EAF0F8"/></linearGradient><path d="M604.49 620.61L659.43 556.93 633.22 624.12z" style="fill:url(#SVGID_3_)"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="116.275" y1="540.149" x2="116.275" y2="402.974"><stop offset=".003" stop-color="#9A9ADB"/><stop offset=".789" stop-color="#CECDF1"/></linearGradient><path d="M117.06 403.22s-.22-.57-.52.04c-2.7 5.49-27.15 64.96-29.09 110.86 0 0-4.08 26.37 30.11 26.02 28.54-.29 27.78-24.6 27.68-32.79-.39-33.22-28.18-104.13-28.18-104.13z" style="fill:url(#SVGID_4_)"/><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="116.277" y1="418.206" x2="116.277" y2="569.34"><stop offset="0" stop-color="#ECF1FB"/><stop offset=".818" stop-color="#AFB0E7"/></linearGradient><path d="M116.28 569.34c-.55 0-1-.45-1-1V419.21c0-.55.45-1 1-1s1 .45 1 1v149.13c0 .55-.45 1-1 1z" style="fill:url(#SVGID_5_)"/><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="617.404" y1="448.627" x2="617.404" y2="360.303"><stop offset=".227" stop-color="#CCD4F4"/><stop offset=".789" stop-color="#ECF1FB"/></linearGradient><path d="M617.91 360.46s-.14-.37-.33.03c-1.74 3.53-17.48 41.83-18.73 71.38 0 0-2.63 16.98 19.39 16.76 18.38-.18 17.89-15.84 17.82-21.11-.25-21.4-18.15-67.06-18.15-67.06z" style="fill:url(#SVGID_6_)"/><linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="617.405" y1="370.11" x2="617.405" y2="467.422"><stop offset="0" stop-color="#ECF1FB"/><stop offset="1" stop-color="#A6A8E2"/></linearGradient><path d="M617.41 467.42c-.36 0-.64-.29-.64-.64v-96.02c0-.36.29-.64.64-.64.36 0 .64.29.64.64v96.02c0 .35-.29.64-.64.64z" style="fill:url(#SVGID_7_)"/><linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="463.322" y1="86.02" x2="428.568" y2="146.217"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><circle cx="445.95" cy="116.12" r="34.75" style="fill:url(#SVGID_8_)"/><linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="420.985" y1="116.487" x2="420.985" y2="173.941"><stop offset="0" stop-color="#F9FAFE"/><stop offset="1" stop-color="#E5EDF7"/></linearGradient><path d="M465.72 135.07h-34.57c-2.23-10.61-11.65-18.58-22.93-18.58s-20.69 7.97-22.93 18.58h-9.05c-10.73 0-19.44 8.7-19.44 19.44 0 10.73 8.7 19.44 19.44 19.44h89.47c10.73 0 19.44-8.7 19.44-19.44.01-10.74-8.69-19.44-19.43-19.44z" style="fill:url(#SVGID_9_)"/><g><linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="688.006" y1="537.867" x2="688.006" y2="510.039"><stop offset=".227" stop-color="#AFB0E7"/><stop offset="1" stop-color="#ECF1FB"/></linearGradient><circle cx="688.01" cy="523.95" r="13.91" style="fill:url(#SVGID_10_)"/><linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="688.056" y1="513.553" x2="688.056" y2="558.349"><stop offset="0" stop-color="#DDE1F6"/><stop offset=".818" stop-color="#A6A8E2"/></linearGradient><path d="M688.06 558.35c-.24 0-.43-.19-.43-.43v-43.94c0-.24.19-.43.43-.43s.43.19.43.43v43.94a.44.44 0 01-.43.43z" style="fill:url(#SVGID_11_)"/></g><g><linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="2879.853" y1="308.382" x2="2737.462" y2="450.774" gradientTransform="matrix(-1 0 0 1 3207.18 0)"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M270.73 392.79l91.4-73.3c7.43 11.92 20.65 19.87 35.7 19.87 16.43 0 30.69-9.48 37.6-23.26l92.11 76.85 10.83-12.98-98.5-82.19c0-.16.01-.31.01-.47 0-23.18-18.86-42.04-42.05-42.04-23.18 0-42.04 18.86-42.04 42.04 0 1.8.13 3.58.35 5.32l-95.98 76.97 10.57 13.19zm101.96-95.48c0-13.86 11.28-25.14 25.14-25.14s25.14 11.28 25.14 25.14-11.28 25.14-25.14 25.14-25.14-11.27-25.14-25.14z" style="fill:url(#SVGID_12_)"/><linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="2814.247" y1="259.815" x2="2814.247" y2="392.836" gradientTransform="matrix(-1 0 0 1 3207.18 0)"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#C6D5F4"/></linearGradient><path d="M268.75 392.68l88.31-70.82c7.18 11.51 19.95 19.2 34.49 19.2 15.88 0 29.65-9.16 36.33-22.47l88.99 74.25 10.46-12.54-95.17-79.41c0-.15.01-.3.01-.46 0-22.4-18.22-40.62-40.62-40.62s-40.62 18.22-40.62 40.62c0 1.74.12 3.46.34 5.14l-92.73 74.37 10.21 12.74zm98.51-92.24c0-13.4 10.9-24.29 24.29-24.29 13.4 0 24.29 10.9 24.29 24.29 0 13.4-10.9 24.29-24.29 24.29-13.4 0-24.29-10.9-24.29-24.29z" style="fill:url(#SVGID_13_)"/><linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="2966.463" y1="329.794" x2="2654.707" y2="641.55" gradientTransform="matrix(-1 0 0 1 3203.43 0)"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M230.6 619.91h326.35c17.89 0 32.39-14.5 32.39-32.39V388.31c0-21.39-17.34-38.72-38.72-38.72H230.6c-17.89 0-32.39 14.5-32.39 32.39v205.54c-.01 17.88 14.5 32.39 32.39 32.39z" style="fill:url(#SVGID_14_)"/><linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="2716.773" y1="319.563" x2="2914.293" y2="661.678" gradientTransform="matrix(-1 0 0 1 3203.43 0)"><stop offset="0" stop-color="#EBF2FA"/><stop offset=".525" stop-color="#FDFEFF"/></linearGradient><path d="M223.6 619.91h328.59c14.03 0 25.4-11.37 25.4-25.4V386.73c0-14.03-11.37-25.4-25.4-25.4H223.6c-14.03 0-25.4 11.37-25.4 25.4v207.78c0 14.03 11.38 25.4 25.4 25.4z" style="fill:url(#SVGID_15_)"/><linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="2815.495" y1="361.334" x2="2815.495" y2="425.526" gradientTransform="matrix(-1 0 0 1 3203.43 0)"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M198.24 425.53h379.39v-38.79c0-14.03-11.37-25.4-25.4-25.4H223.64c-14.03 0-25.4 11.37-25.4 25.4v38.79z" style="fill:url(#SVGID_16_)"/><linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="276.445" y1="488.742" x2="350.685" y2="531.604"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M328.82 457.46H307.7c-1.27 0-2.46.59-3.24 1.59L261.91 514c-.56.72-.86 1.6-.86 2.51v23.15c0 2.26 1.83 4.09 4.09 4.09h41.34c2.26 0 4.09 1.83 4.09 4.09v13.46c0 2.26 1.83 4.09 4.09 4.09h14.14c2.26 0 4.09-1.83 4.09-4.09v-13.46c0-2.26 1.83-4.09 4.09-4.09s4.09-1.83 4.09-4.09V525.5c0-2.26-1.83-4.09-4.09-4.09s-4.09-1.83-4.09-4.09v-55.77a4.059 4.059 0 00-4.07-4.09zm-39.3 57.35l13.74-17.74c2.39-3.08 7.33-1.4 7.33 2.51v17.74c0 2.26-1.83 4.09-4.09 4.09h-13.74c-3.41 0-5.33-3.91-3.24-6.6z" style="fill:url(#SVGID_17_)"/><linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="455.095" y1="488.742" x2="529.335" y2="531.604"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M511.56 517.32v-55.77c0-2.26-1.83-4.09-4.09-4.09h-21.12c-1.27 0-2.46.59-3.24 1.59L440.56 514c-.56.72-.86 1.6-.86 2.51v23.15c0 2.26 1.83 4.09 4.09 4.09h41.34c2.26 0 4.09 1.83 4.09 4.09v13.46c0 2.26 1.83 4.09 4.09 4.09h14.14c2.26 0 4.09-1.83 4.09-4.09v-13.46c0-2.26 1.83-4.09 4.09-4.09s4.09-1.83 4.09-4.09V525.5c0-2.26-1.83-4.09-4.09-4.09-2.24 0-4.07-1.83-4.07-4.09zm-43.39-2.51l13.74-17.74c2.39-3.08 7.33-1.4 7.33 2.51v17.74c0 2.26-1.83 4.09-4.09 4.09H471.4c-3.4 0-5.32-3.91-3.23-6.6z" style="fill:url(#SVGID_18_)"/><linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="339.488" y1="482.174" x2="441.31" y2="540.961"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M356.4 566.16h68c2.26 0 4.09-1.83 4.09-4.09v-101c0-2.26-1.83-4.09-4.09-4.09h-68c-2.26 0-4.09 1.83-4.09 4.09v101c0 2.26 1.83 4.09 4.09 4.09zm49.76-82.76v56.34c0 2.26-1.83 4.09-4.09 4.09h-23.34c-2.26 0-4.09-1.83-4.09-4.09V483.4c0-2.26 1.83-4.09 4.09-4.09h23.34c2.26 0 4.09 1.83 4.09 4.09z" style="fill:url(#SVGID_19_)"/></g><g><linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="871.514" y1="4485.232" x2="872.065" y2="4498.77" gradientTransform="rotate(2.333 95904.663 -3670.234)"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M605.95 610.6s3.25 4.88 10.55 1.06c3.91 2.72 8.92 4.97 12.39 5.88 3.47.91 3.68 5.4 3.12 6.61-4.66-.47-18.14.64-27.3-2.94.72-7.53 1.24-10.61 1.24-10.61z" style="fill:url(#SVGID_20_)"/><path class="st49" d="M604.06 623.84l.43-3.23s10.54 2.63 28.38 1.03c.17 1.66.35 2.48.35 2.48s-13.56 2.02-29.16-.28z"/><linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="-1427.263" y1="-235.579" x2="-1409.896" y2="-215.318" gradientTransform="rotate(40.6 -1575.457 2818.52)"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M520.47 596.12s-.05 5.81 7.27 7.94c1.95 5-3.73 11.79 5.37 12.42 3.34.23 1.75 5.12.73 5.63-10.95 4.01-14.63-10.12-19.62-18.98 4.32-5.09 6.25-7.01 6.25-7.01z" style="fill:url(#SVGID_21_)"/><linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="-3772.01" y1="604.486" x2="-3772.01" y2="502.198" gradientTransform="matrix(-1 0 0 1 -3222.68 0)"><stop offset="0" stop-color="#445677"/><stop offset="1" stop-color="#293861"/></linearGradient><path d="M569.3 502.2s-14.44-.26-17.67 18.85c-3.23 19.11 1.57 23.66-5.38 37.29-3.62 7.1-27.15 41.12-27.15 41.12l6.83 5.03s37.94-34.72 43.52-48.71 9.83-28.83 10.13-41.46c.28-12.62-10.28-12.12-10.28-12.12z" style="fill:url(#SVGID_22_)"/><linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="-3839.642" y1="559.801" x2="-3786.238" y2="559.801" gradientTransform="matrix(-1 0 0 1 -3222.68 0)"><stop offset="0" stop-color="#445677"/><stop offset="1" stop-color="#293861"/></linearGradient><path d="M572.72 506.19s14.87 3.53 15.75 3.98c.44.23 2.89 7.07 5.24 13.95 5.04 6.87 23.02 32.28 23.21 45.51.29 20.13-.96 43.67-.96 43.67l-9.24.11s-3.5-38.9-5.85-42.31c-.42-.61-1.29-1.95-2.42-3.74-5.14-6.22-16.5-16.65-28.16-27.07-16.45-14.66 2.43-34.1 2.43-34.1z" style="fill:url(#SVGID_23_)"/><linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="5317.908" y1="132.095" x2="5317.908" y2="56.817" gradientTransform="rotate(26.086 2112.504 -9908.036)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M603.14 448.91s-10.69-8.37-16.99-4.36c-6.3 4-14.27 18.91-14.27 18.91l8.85 4.38-23.8 39.67 40.69 21.83 14.6-42.28 11.79.69s7.96-25.24-3.62-27.43c-5.45-2.3-7.04-3.34-7.04-3.34s-3.49 4.27-7.99 1.18-2.22-9.25-2.22-9.25z" style="fill:url(#SVGID_24_)"/><linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="5161.945" y1="1134.369" x2="5171.26" y2="1068.78" gradientTransform="rotate(18.006 4848.87 -13687.47)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M589.15 443.6c3.88.61 8.04 4.05 4.56 12.85-3.48 8.8-16.66 18.5-16.06 24.82.6 6.4 3.37 16.58 5.33 22.6-2.8 4.17-6.72 6.78-6.72 6.78s-10.33-14.75-13.12-25.23 7.07-25.25 14.69-35.41c5.73-7.67 11.32-6.41 11.32-6.41z" style="fill:url(#SVGID_25_)"/><linearGradient id="SVGID_26_" gradientUnits="userSpaceOnUse" x1="-8924.659" y1="-865.525" x2="-8915.544" y2="-929.706" gradientTransform="scale(-1 1) rotate(-34.172 -2504.53 -13720.806)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M624.12 463.5c-2.79-3.19-7.68-4.9-11.53 3.69s-2.35 26.64-7.02 29.97c-4.72 3.37-13.34 7.07-18.62 8.96-1.12 5.12-.49 10.33-.49 10.33s16.36.44 25.19-3.42c8.83-3.86 12.82-21.97 15.06-35.2 1.69-9.97-2.59-14.33-2.59-14.33z" style="fill:url(#SVGID_26_)"/><linearGradient id="SVGID_27_" gradientUnits="userSpaceOnUse" x1="-3813.896" y1="480.898" x2="-3841.811" y2="423.883" gradientTransform="matrix(-1 0 0 1 -3222.68 0)"><stop offset="0" stop-color="#4F5C7C"/><stop offset="1" stop-color="#274168"/></linearGradient><path d="M590.9 439.68c.43-4.69 4.5-7.9 9.3-7.17.4-1.31 4.44-2.98 5.38-4.6 3.5-6.03 9.26-7 14-3.56 9.79 2.79 8.01 12.2 4.75 21.55 2.8 5.61 1.52 12.41-.06 15.18 4.75 5.07 2.09 11.58-1.39 16.52-.4.56-.82 1.06-1.25 1.52-.21 5.85-8.34 7.86-11.32 4.89-3.17-3.16-3.57-4.49-9.32-1.76-5.75 2.73-11.24-1.54-11.3-7.34-.06-5.8-4.28-4.1-6.12-5.63-3.33-2.77-1.15-5.93-1.15-5.93s-4.85-.26-6.01-7.38c-1.33-16.99 11.95-17.08 14.49-16.29z" style="fill:url(#SVGID_27_)"/><path class="st49" d="M515.38 601.24s4.92 12.03 5.91 13.61 5.9 9.27 14.26 5.05c-.04 1.49-.11 2.43-.11 2.43s-9.42 6.26-15.33-4.62c-5.91-10.88-6.75-14.63-6.75-14.63l2.02-1.84z"/></g></g></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/500.svg b/marketing-ui/admin-ui/src/assets/svgs/500.svg
new file mode 100644
index 0000000..9c02092
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/500.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" enable-background="new 0 0 800 800"><style>.st26{fill:#fff}</style><g id="图层_16"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="402.832" y1="159.843" x2="402.832" y2="715.335"><stop offset="0" stop-color="#F4F2FB"/><stop offset="1" stop-color="#E1EEF5"/></linearGradient><path d="M486.09 201.2c-38.37 30.29-120.74 33.81-181.17-2.22s-172-31.38-202.22 34.87 37.19 131.33 12.78 178.98S9.72 527.87 65.5 609.23s126.6 60.62 169.22 52.45c84.17-16.13 189.79 115.67 308.62 16.13 68.47-57.35 170.44 42.09 210.17-81.36 32.78-101.86-85.67-139.5-49.97-208.03 37.96-72.88 30.67-159.24-10.46-201.06-38.3-38.96-140.75-38.46-206.99 13.84z" style="fill:url(#SVGID_1_)"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="117.913" y1="540.229" x2="117.913" y2="403.055"><stop offset=".227" stop-color="#B7ACE0"/><stop offset=".789" stop-color="#E8E7FA"/></linearGradient><path d="M118.7 403.3s-.22-.57-.52.04c-2.7 5.49-27.15 64.96-29.09 110.86 0 0-4.08 26.37 30.11 26.02 28.54-.29 27.78-24.6 27.68-32.79-.39-33.22-28.18-104.13-28.18-104.13z" style="fill:url(#SVGID_2_)"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="117.915" y1="418.287" x2="117.915" y2="569.42"><stop offset="0" stop-color="#ECF1FB"/><stop offset=".818" stop-color="#AFB0E7"/></linearGradient><path d="M117.92 569.42c-.55 0-1-.45-1-1V419.29c0-.55.45-1 1-1s1 .45 1 1v149.13c0 .55-.45 1-1 1z" style="fill:url(#SVGID_3_)"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="619.042" y1="448.707" x2="619.042" y2="360.383"><stop offset=".227" stop-color="#CCD4F4"/><stop offset=".789" stop-color="#ECF1FB"/></linearGradient><path d="M619.55 360.54s-.14-.37-.33.03c-1.74 3.53-17.48 41.83-18.73 71.38 0 0-2.63 16.98 19.39 16.76 18.38-.18 17.89-15.84 17.82-21.11-.26-21.4-18.15-67.06-18.15-67.06z" style="fill:url(#SVGID_4_)"/><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="619.043" y1="370.19" x2="619.043" y2="467.503"><stop offset="0" stop-color="#ECF1FB"/><stop offset="1" stop-color="#A6A8E2"/></linearGradient><path d="M619.04 467.5c-.36 0-.64-.29-.64-.64v-96.02c0-.36.29-.64.64-.64s.64.29.64.64v96.02c.01.35-.28.64-.64.64z" style="fill:url(#SVGID_5_)"/><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="464.96" y1="86.101" x2="430.206" y2="146.297"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><circle cx="447.58" cy="116.2" r="34.75" style="fill:url(#SVGID_6_)"/><linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="422.623" y1="116.567" x2="422.623" y2="174.021"><stop offset="0" stop-color="#F9FAFE"/><stop offset="1" stop-color="#E5EDF7"/></linearGradient><path d="M467.36 135.15h-34.57c-2.23-10.61-11.65-18.58-22.93-18.58s-20.69 7.97-22.93 18.58h-9.05c-10.73 0-19.44 8.7-19.44 19.44 0 10.73 8.7 19.44 19.44 19.44h89.47c10.73 0 19.44-8.7 19.44-19.44.01-10.74-8.7-19.44-19.43-19.44z" style="fill:url(#SVGID_7_)"/><linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="689.644" y1="537.948" x2="689.644" y2="510.119"><stop offset=".227" stop-color="#AFB0E7"/><stop offset="1" stop-color="#ECF1FB"/></linearGradient><circle cx="689.64" cy="524.03" r="13.91" style="fill:url(#SVGID_8_)"/><linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="689.694" y1="513.633" x2="689.694" y2="558.429"><stop offset="0" stop-color="#DDE1F6"/><stop offset=".818" stop-color="#A6A8E2"/></linearGradient><path d="M689.69 558.43c-.24 0-.43-.19-.43-.43v-43.94c0-.24.19-.43.43-.43s.43.19.43.43V558c0 .24-.19.43-.43.43z" style="fill:url(#SVGID_9_)"/><linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="289.384" y1="477.19" x2="289.384" y2="411.226"><stop offset="0" stop-color="#B0B9E1"/><stop offset="1" stop-color="#E7EFF7"/></linearGradient><path d="M202.07 451.28L270.1 411.23 376.7 411.23 315.15 477.19 237.41 476.01z" style="fill:url(#SVGID_10_)"/><linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="454.145" y1="502.809" x2="454.145" y2="420.65"><stop offset="0" stop-color="#B0B9E1"/><stop offset="1" stop-color="#E7EFF7"/></linearGradient><path d="M386.71 479.55L431.76 420.65 521.58 420.65 423.81 502.81 394.37 495.15z" style="fill:url(#SVGID_11_)"/><linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="589.016" y1="472.132" x2="589.016" y2="397.68"><stop offset="0" stop-color="#B0B9E1"/><stop offset="1" stop-color="#E7EFF7"/></linearGradient><path d="M501.26 458.64l64.79-60.96h110.72l-48.99 66.61a19.243 19.243 0 01-17.85 7.7l-108.67-13.35z" style="fill:url(#SVGID_12_)"/><linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="314.267" y1="607.349" x2="314.267" y2="497.361"><stop offset="0" stop-color="#B0B9E1"/><stop offset="1" stop-color="#E7EFF7"/></linearGradient><path d="M212.23 592.77L303.67 497.36 416.3 497.36 297.04 607.35 247.57 604.7z" style="fill:url(#SVGID_13_)"/><g><linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="515.604" y1="312.867" x2="613.092" y2="481.721"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M564.35 296.53c-41.79 0-75.67 33.6-75.67 75.05v51.43c0 41.45 33.88 75.05 75.67 75.05s75.67-33.6 75.67-75.05v-51.43c-.01-41.45-33.88-75.05-75.67-75.05zm23.82 137.83c0 13.05-10.67 23.63-23.82 23.63-13.16 0-23.82-10.58-23.82-23.63v-74.13c0-13.05 10.67-23.63 23.82-23.63 13.16 0 23.82 10.58 23.82 23.63v74.13z" style="fill:url(#SVGID_14_)"/><linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="513.839" y1="321.619" x2="606.64" y2="482.355"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M560.24 305.91c-39.52 0-71.56 32.04-71.56 71.56v49.03c0 39.52 32.04 71.56 71.56 71.56s71.56-32.04 71.56-71.56v-49.03c0-39.52-32.04-71.56-71.56-71.56zm22.53 131.41c0 12.44-10.09 22.53-22.53 22.53-12.44 0-22.53-10.09-22.53-22.53v-70.67c0-12.44 10.09-22.53 22.53-22.53 12.44 0 22.53 10.09 22.53 22.53v70.67z" style="fill:url(#SVGID_15_)"/><linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="217.031" y1="307.363" x2="316.583" y2="479.793"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M333.72 412.6c-5.55-58.15-65.99-54.01-90.14-49.98l2.26-15.28 71.49 5.88 8.98-5.88V307.2h-109l-9.09 7.47-14.81 92.41h43.6c22.73-19.99 38.77-11.37 45.38 0 6.34 10.92 7.27 43.26-19.71 43.87-23.34.53-23.13-19.92-23.13-19.92l-41.55.58-8.06 7.52s6.18 59.41 69.73 59.41 77.3-50.09 74.05-85.94z" style="fill:url(#SVGID_16_)"/><linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="212.735" y1="311.982" x2="309.699" y2="479.928"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M324.26 415.94c-5.19-55.89-61.65-51.92-84.21-48.04l2.11-14.69h75.17v-38.58H208.14l-14.95 96h40.73c21.23-19.21 36.22-10.93 42.39 0 5.92 10.49 6.79 46.38-18.41 46.97-21.8.51-24.41-19.14-24.41-19.14l-43.54.66s5.78 59.41 65.14 59.41 72.2-48.14 69.17-82.59z" style="fill:url(#SVGID_17_)"/><linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="368.459" y1="304.731" x2="452.448" y2="450.205"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M387.26 461.26s-54.09-36.72-56.49-83.83c-2.29-45.03 25.47-81.27 76.27-81.27 55.29 0 78.12 47.95 78.12 73.99 0 26.04-10.63 63.25-55.73 93.35-23.53 0-42.17-2.24-42.17-2.24z" style="fill:url(#SVGID_18_)"/><linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="366.623" y1="312.428" x2="445.175" y2="448.483"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M384.76 461.29s-51.7-34.94-53.99-79.77c-2.19-42.85 24.35-77.34 72.9-77.34 52.85 0 73.47 45.54 73.47 70.32 0 24.78-12.03 58.72-55.14 87.36-22.49.01-37.24-.57-37.24-.57z" style="fill:url(#SVGID_19_)"/><linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="400.418" y1="454.748" x2="417.994" y2="485.191"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M414.59 486.78h-16.64c-.85 0-1.64-.44-2.08-1.17l-11.39-18.8c-.7-1.15-.33-2.64.82-3.34 1.15-.69 2.64-.33 3.34.82l10.68 17.62h13.84l10.6-19.05c.65-1.17 2.13-1.6 3.31-.94 1.17.65 1.6 2.13.94 3.31l-11.29 20.3c-.44.77-1.25 1.25-2.13 1.25z" style="fill:url(#SVGID_20_)"/><linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="397.841" y1="454.748" x2="415.417" y2="485.191"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M412.01 486.78h-16.64c-.85 0-1.64-.44-2.08-1.17l-11.39-18.8c-.7-1.15-.33-2.64.82-3.34 1.15-.69 2.64-.33 3.34.82l10.68 17.62h13.84l10.6-19.05c.65-1.17 2.13-1.6 3.31-.94 1.17.65 1.6 2.13.94 3.31l-11.29 20.3c-.43.77-1.25 1.25-2.13 1.25z" style="fill:url(#SVGID_21_)"/><linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="395.626" y1="441.888" x2="415.816" y2="476.856"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M429.22 468.35h-47.66c-2.76 0-5-2.24-5-5V452.9h57.65v10.45c0 2.76-2.23 5-4.99 5z" style="fill:url(#SVGID_22_)"/><linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="395.022" y1="445.756" x2="412.776" y2="476.507"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M425.57 468.35h-44.01c-2.76 0-5-2.24-5-5v-6.93h54.01v6.93c0 2.76-2.24 5-5 5z" style="fill:url(#SVGID_23_)"/><linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="396.171" y1="472.261" x2="416.697" y2="507.813"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M418.79 505.46h-25.7c-4.09 0-7.4-3.31-7.4-7.4v-19.75h40.5v19.75c0 4.09-3.31 7.4-7.4 7.4z" style="fill:url(#SVGID_24_)"/><linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="395.099" y1="476.159" x2="413.018" y2="507.195"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M414.04 505.46h-20.95c-4.09 0-7.4-3.31-7.4-7.4v-16.47h35.75v16.47c0 4.09-3.31 7.4-7.4 7.4z" style="fill:url(#SVGID_25_)"/><linearGradient id="SVGID_26_" gradientUnits="userSpaceOnUse" x1="370.752" y1="345.042" x2="439.366" y2="413.656"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M404.4 311.4s-17.23 79.51 1.33 135.9c47.84-62.43-1.33-135.9-1.33-135.9z" style="fill:url(#SVGID_26_)"/><linearGradient id="SVGID_27_" gradientUnits="userSpaceOnUse" x1="352.936" y1="350.49" x2="415.513" y2="413.067"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M386.43 316.99s-15.24 26.94-16.34 62.72c-.75 24.43 11.93 66.85 11.93 66.85s-20.76-36.07-20.76-70.23 25.17-59.34 25.17-59.34z" style="fill:url(#SVGID_27_)"/><linearGradient id="SVGID_28_" gradientUnits="userSpaceOnUse" x1="389.798" y1="347.846" x2="456.792" y2="414.84"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M420.65 316.99s34.1 22.12 34.1 60.99-29.68 68.58-29.68 68.58 23.5-42.18 23.5-70.9c0-14.24-13.98-48.76-27.92-58.67z" style="fill:url(#SVGID_28_)"/><path class="st26" d="M386.43 316.99s-62.13 47.12-4.42 129.57c-7.06-15.6-36.21-73.62 4.42-129.57zM420.65 316.99s62.13 47.12 4.42 129.57c7.07-15.6 36.22-73.62-4.42-129.57zM404.4 311.4s-35.48 79.66 1.33 135.9c32.24-57.5-1.33-135.9-1.33-135.9z"/></g><g><linearGradient id="SVGID_29_" gradientUnits="userSpaceOnUse" x1="234.692" y1="561.708" x2="234.692" y2="486.088"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M226.89 486.45s-18.35-2.54-24.31 5.89c-5.96 8.43-8.14 30.01-8.14 30.01l13.81-.73-1.16 25.14 25.48 14.94 36.3-19.52-5.52-22.78 11.6-3.03s-3.46-33.06-19.59-28.18c-8.29.89-10.9.74-10.9.74s-2.18 6.95-9.67 6.36c-7.49-.58-7.9-8.84-7.9-8.84z" style="fill:url(#SVGID_29_)"/><linearGradient id="SVGID_30_" gradientUnits="userSpaceOnUse" x1="235.741" y1="473.191" x2="235.741" y2="497.147"><stop offset="0" stop-color="#F4AE98"/><stop offset="1" stop-color="#FAD1BB"/></linearGradient><path d="M228.72 476.05l-3.81 17.01c-.18.8.24 1.61 1 1.92 1.97.8 5.91 2.17 9.97 2.17 4.21 0 8.18-2.3 10-3.53.63-.42.89-1.21.65-1.93l-5.83-17.35a1.681 1.681 0 00-1.89-1.12l-8.74 1.55c-.67.11-1.2.62-1.35 1.28z" style="fill:url(#SVGID_30_)"/><linearGradient id="SVGID_31_" gradientUnits="userSpaceOnUse" x1="-1535.437" y1="750.954" x2="-1523.728" y2="668.51" gradientTransform="rotate(-8.082 -1929.216 -11692.611)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M205.94 489.39c5.34-1.77 12.58-.59 12.88 11.39.29 11.98-11.45 31.07-7.24 37.71 4.26 6.73 13.37 16.29 19.17 21.73-1.35 6.4-4.99 11.78-4.99 11.78s-21.36-9.86-30.66-19.73c-9.3-9.87-4.61-32.5-.3-48.61 3.24-12.13 11.14-14.27 11.14-14.27z" style="fill:url(#SVGID_31_)"/><linearGradient id="SVGID_32_" gradientUnits="userSpaceOnUse" x1="-5585.118" y1="175.804" x2="-5573.409" y2="93.36" gradientTransform="scale(-1 1) rotate(-8.082 -118.041 -37329.02)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M261.91 489.39c-5.34-1.77-12.58-.59-12.88 11.39-.29 11.98 11.45 31.07 7.24 37.71-4.26 6.73-13.37 16.29-19.17 21.73 1.35 6.4 4.99 11.78 4.99 11.78s21.36-9.86 30.66-19.73c9.3-9.87 4.61-32.5.3-48.61-3.24-12.13-11.14-14.27-11.14-14.27z" style="fill:url(#SVGID_32_)"/><linearGradient id="SVGID_33_" gradientUnits="userSpaceOnUse" x1="234.692" y1="534.399" x2="234.692" y2="582.454"><stop offset="0" stop-color="#275C89"/><stop offset="1" stop-color="#013F7C"/></linearGradient><path d="M208.53 582.45h51.85c2.35 0 4.45-1.78 5.26-4.46l10.45-34.39c1.36-4.46-1.35-9.21-5.26-9.21h-72.29c-3.87 0-6.58 4.67-5.29 9.11l9.98 34.39c.8 2.74 2.92 4.56 5.3 4.56z" style="fill:url(#SVGID_33_)"/><path class="st26" d="M206.46 598.27s-.8-1.76-1.42-1.95c-.62-.19-9.49-.54-12.72-1.38s-12.56-2.17-16.56 1.61c-3.48 3.3-4.63 11 .67 15.43 1.99 1.73 3.94 2.23 11.31 1.89s18.04-.27 20.38-3.68c-.07-5.65-1.66-11.92-1.66-11.92z"/><linearGradient id="SVGID_34_" gradientUnits="userSpaceOnUse" x1="-3991.106" y1="603.193" x2="-3974.093" y2="603.193" gradientTransform="matrix(-1 0 0 1 -3772.525 0)"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M214.69 596.31s-8.56 1.92-11.62 1.64c-3.06-.28-.5 12.05-.5 12.05s8.17.57 15.4-1.53c2.45-9.44-3.28-12.16-3.28-12.16z" style="fill:url(#SVGID_34_)"/><linearGradient id="SVGID_35_" gradientUnits="userSpaceOnUse" x1="211.625" y1="584.443" x2="299.388" y2="584.443"><stop offset="0" stop-color="#18264B"/><stop offset=".652" stop-color="#2D3C65"/></linearGradient><path d="M211.63 595.87l4.45 13.84s95.64-12.6 81.97-43.63c-11.43-25.96-86.42 29.79-86.42 29.79z" style="fill:url(#SVGID_35_)"/><linearGradient id="SVGID_36_" gradientUnits="userSpaceOnUse" x1="191.837" y1="594.929" x2="191.837" y2="612.987"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M205.35 596.94s3.5 1.37 3.95 6.26c.44 4.89-1 8.17-8.45 9.07-7.45.91-9.34.57-14.01.68-4.67.11-11.45.57-12.46-8.32-1-8.88 8.08-11.15 17.5-8.88 2.96.56 13.47 1.19 13.47 1.19z" style="fill:url(#SVGID_36_)"/><g><path class="st26" d="M266.14 598.27s.8-1.76 1.42-1.95c.62-.19 9.49-.54 12.72-1.38 3.23-.84 11.93-2.24 16.32 1.51 4.07 3.48 4.34 11.16-.3 15.4-1.99 1.73-4.08 2.35-11.44 2.01s-18.04-.27-20.38-3.68c.08-5.64 1.66-11.91 1.66-11.91z"/><linearGradient id="SVGID_37_" gradientUnits="userSpaceOnUse" x1="254.028" y1="603.193" x2="271.04" y2="603.193"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M257.92 596.31s8.56 1.92 11.62 1.64c3.06-.28.5 12.05.5 12.05s-8.17.57-15.4-1.53c-2.45-9.44 3.28-12.16 3.28-12.16z" style="fill:url(#SVGID_37_)"/><linearGradient id="SVGID_38_" gradientUnits="userSpaceOnUse" x1="173.22" y1="584.443" x2="260.983" y2="584.443"><stop offset="0" stop-color="#445677"/><stop offset="1" stop-color="#293861"/></linearGradient><path d="M260.98 595.87l-4.45 13.84s-95.64-12.6-81.97-43.63c11.43-25.96 86.42 29.79 86.42 29.79z" style="fill:url(#SVGID_38_)"/><linearGradient id="SVGID_39_" gradientUnits="userSpaceOnUse" x1="280.771" y1="594.929" x2="280.771" y2="612.987"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M267.26 596.94s-3.5 1.37-3.95 6.26 1 8.17 8.45 9.07 9.34.57 14.01.68 11.45.57 12.46-8.32c1-8.88-8.08-11.15-17.5-8.88-2.96.56-13.47 1.19-13.47 1.19z" style="fill:url(#SVGID_39_)"/></g><linearGradient id="SVGID_40_" gradientUnits="userSpaceOnUse" x1="251.42" y1="467.696" x2="220.113" y2="467.696"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M250.74 469.25c.57-.81.93-2.88.46-3.49-.84-.68-1.63-.29-2.24.3.14-4.96-.31-9.07-.42-10.12-.31-3.04-3.4-8.6-13.5-8.6s-12.05 7.29-12.05 7.29-.66 5.15-.46 11.41c-.6-.58-1.39-.95-2.22-.28-.46.61-.1 2.68.46 3.49.57.81.93 2.73 1.03 3.79.1 1.01-.63 3.7 2.03 3.36 1.59 6.35 8.01 11.64 11.99 11.64 4.36 0 10.16-5.33 11.8-11.65 2.71.37 1.98-2.34 2.07-3.35.13-1.06.49-2.98 1.05-3.79z" style="fill:url(#SVGID_40_)"/><linearGradient id="SVGID_41_" gradientUnits="userSpaceOnUse" x1="215.804" y1="455.594" x2="252.152" y2="455.594"><stop offset="0" stop-color="#4F5C7C"/><stop offset="1" stop-color="#274168"/></linearGradient><path d="M242.34 445.19s-1.97-6.21-9.53-4.72c-7.55 1.48-8.06 5.06-11.03 5.19-5.06.24-9.11 6.54-2.61 13.22 2.89 2.97.45 4.25 1.82 6.88s1.36 5.19 1.36 5.19 2.41-7.71.82-11c-.82-1.7 2.82-2.16 7.35-1.75s11.68-1.1 12.24-4.18c1.34 6.32 2.68 6.98 4.38 7.94 1.7.96 1.8 8.6 1.8 8.6s.3-5.62 1.49-6.88c.98-2.07 2.89-10.22.73-12.19s-.34-8.31-8.82-6.3z" style="fill:url(#SVGID_41_)"/></g><linearGradient id="SVGID_42_" gradientUnits="userSpaceOnUse" x1="509.948" y1="612.061" x2="509.948" y2="547.57"><stop offset="0" stop-color="#B0B9E1"/><stop offset="1" stop-color="#E7EFF7"/></linearGradient><path d="M452.67 596.16L498.32 547.57 567.22 547.57 506.27 612.06z" style="fill:url(#SVGID_42_)"/><linearGradient id="SVGID_43_" gradientUnits="userSpaceOnUse" x1="461.835" y1="563.724" x2="495.632" y2="622.263"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><circle cx="478.73" cy="592.99" r="33.79" style="fill:url(#SVGID_43_)"/><linearGradient id="SVGID_44_" gradientUnits="userSpaceOnUse" x1="455.798" y1="564.313" x2="489.595" y2="622.851"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><circle cx="472.7" cy="593.58" r="33.79" style="fill:url(#SVGID_44_)"/><linearGradient id="SVGID_45_" gradientUnits="userSpaceOnUse" x1="479.001" y1="231.35" x2="503.267" y2="273.38"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><circle cx="491.13" cy="252.36" r="24.26" style="fill:url(#SVGID_45_)"/><linearGradient id="SVGID_46_" gradientUnits="userSpaceOnUse" x1="474.666" y1="231.772" x2="498.933" y2="273.803"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><circle cx="486.8" cy="252.79" r="24.26" style="fill:url(#SVGID_46_)"/></g></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/add-user.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/add-user.svg
new file mode 100644
index 0000000..bc7bdbf
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/add-user.svg
@@ -0,0 +1 @@
+<svg t="1731390087280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4297" width="200" height="200"><path d="M639.9 541.7c76.4-44.2 127.9-126.8 127.9-221.5C767.7 179 653.2 64.5 512 64.5S256.3 179 256.3 320.2c0 89.6 46.1 168.4 115.8 214.1C193.5 593 64.5 761.2 64.5 959.5h63.9c0-211.5 172.1-383.6 383.6-383.6 44.9 0 87.8 8.1 127.9 22.4v-56.6zM320.2 320.2c0-105.8 86-191.8 191.8-191.8s191.8 86 191.8 191.8S617.7 512 512 512s-191.8-86-191.8-191.8zM831.6 767.7V639.9h-63.9v127.8H639.9v63.9h127.8v127.9h63.9V831.6h127.9v-63.9z" fill="#5f6266" p-id="4298"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/approve.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/approve.svg
new file mode 100644
index 0000000..06aa09d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/approve.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724316565416" class="icon" viewBox="0 0 1300 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1339" xmlns:xlink="http://www.w3.org/1999/xlink" width="253.90625" height="200"><path d="M784.058182 99.258182l10.938182 18.385454-21.294546-2.56-14.196363 16.058182-4.072728-21.061818-19.781818-8.494545 18.734546-10.472728 2.094545-21.294545 15.709091 14.545454 20.945454-4.654545-9.076363 19.549091zM1067.287273 642.443636l-18.501818 10.821819 2.56-21.294546-16.058182-14.196364 21.061818-4.072727 8.494545-19.665454 10.472728 18.734545 21.294545 1.978182-14.661818 15.709091 4.770909 20.945454-19.432727-8.96z" fill="#13C463" p-id="1340"></path><path d="M1067.287273 642.443636l-18.501818 10.821819 2.56-21.294546-16.058182-14.196364 21.061818-4.072727 8.494545-19.665454 10.472728 18.734545 21.294545 1.978182-14.661818 15.709091 4.770909 20.945454-19.432727-8.96zM571.927273 100.072727l-17.454546-12.567272 20.596364-6.167273 6.516364-20.48 12.218181 17.570909 21.410909-0.116364-12.916363 17.105455 6.749091 20.363636-20.247273-6.981818-17.338182 12.683636 0.465455-21.410909zM991.418182 784.407273l-21.178182 3.490909 10.123636-18.967273-9.774545-18.967273 21.061818 3.723637 15.127273-15.243637 2.909091 21.294546 19.2 9.658182-19.316364 9.309091-3.258182 21.178181-14.894545-15.476363zM427.985455 156.741818L407.272727 151.505455l16.872728-13.265455-1.396364-21.410909 17.803636 11.985454 20.014546-7.912727-5.934546 20.596364 13.730909 16.523636-21.410909 0.814546-11.52 18.152727-7.447272-20.247273zM854.225455 896.465455l-20.712728-5.352728 16.872728-13.265454-1.396364-21.294546 17.803636 11.869091 20.014546-7.912727-5.934546 20.712727 13.730909 16.523637-21.527272 0.814545-11.403637 18.036364-7.447272-20.130909zM562.501818 923.694545l10.821818 18.385455-21.294545-2.56-14.196364 16.058182-4.072727-21.061818-19.665455-8.494546 18.734546-10.356363 1.978182-21.41091 15.709091 14.661819 20.945454-4.770909-8.96 19.54909zM242.734545 420.770909l-18.385454 10.938182 2.56-21.294546-16.058182-14.196363 21.061818-4.189091 8.494546-19.665455 10.356363 18.734546 21.410909 2.094545-14.545454 15.709091 4.654545 20.945455-19.549091-9.076364z" fill="#13C463" p-id="1341"></path><path d="M242.734545 420.770909l-18.385454 10.938182 2.56-21.294546-16.058182-14.196363 21.061818-4.189091 8.494546-19.665455 10.356363 18.734546 21.410909 2.094545-14.545454 15.709091 4.654545 20.945455-19.549091-9.076364zM700.858182 943.941818l-17.454546-12.450909 20.48-6.283636 6.516364-20.48 12.334545 17.687272 21.41091-0.116363-12.916364 17.105454 6.632727 20.363637-20.247273-7.098182-17.221818 12.683636 0.465455-21.410909zM303.592727 278.807273l-21.178182 3.490909 10.123637-18.967273-9.890909-18.967273 21.178182 3.723637 15.010909-15.243637 2.909091 21.294546 19.2 9.541818-19.316364 9.425455-3.258182 21.178181-14.778182-15.476363z" fill="#13C463" p-id="1342"></path><path d="M407.272727 90.647273a486.632727 486.632727 0 0 1 504.552728 11.636363l25.018181-14.429091A512 512 0 0 0 139.636364 546.909091l25.018181-14.429091A486.981818 486.981818 0 0 1 407.272727 90.647273zM893.323636 933.352727a486.749091 486.749091 0 0 1-504.669091-11.636363l-24.901818 14.429091A512 512 0 0 0 1161.192727 477.090909l-24.901818 13.963636a486.981818 486.981818 0 0 1-242.967273 442.298182z" fill="#13C463" p-id="1343"></path><path d="M814.545455 795.927273a327.447273 327.447273 0 0 1-258.21091 29.556363l-29.78909 17.105455A353.163636 353.163636 0 0 0 998.865455 570.181818l-29.789091 17.105455A326.865455 326.865455 0 0 1 814.545455 795.927273zM486.865455 228.072727A327.447273 327.447273 0 0 1 744.727273 198.516364l29.789091-17.105455A353.163636 353.163636 0 0 0 302.545455 453.818182l29.78909-17.105455A326.865455 326.865455 0 0 1 486.865455 228.072727zM1288.378182 374.690909a53.294545 53.294545 0 0 1-14.429091 11.636364L229.469091 989.090909a53.876364 53.876364 0 0 1-73.425455-19.665454L7.214545 710.632727a53.527273 53.527273 0 0 1 19.781819-73.309091L1071.476364 34.909091a53.876364 53.876364 0 0 1 73.425454 19.665454l148.829091 258.327273a53.061818 53.061818 0 0 1 5.352727 40.727273 55.272727 55.272727 0 0 1-10.705454 21.061818zM32.232727 665.716364A28.043636 28.043636 0 0 0 29.323636 698.181818l148.829091 257.978182a28.392727 28.392727 0 0 0 38.516364 10.356364l1044.48-601.949091a28.16 28.16 0 0 0 10.356364-38.516364L1122.676364 67.84a28.276364 28.276364 0 0 0-38.4-10.356364L39.68 659.432727a27.810909 27.810909 0 0 0-7.447273 6.283637z" fill="#13C463" p-id="1344"></path><path d="M356.770909 569.250909l22.341818 38.749091-15.476363 8.727273L349.090909 592.64l-153.483636 88.785455 14.778182 25.483636-15.476364 8.96-23.272727-39.912727L256 627.2c-6.283636-4.887273-11.636364-8.843636-16.174545-11.636364L256 602.647273c3.956364 3.141818 9.774545 8.261818 17.338182 15.127272z m-17.338182 199.447273l-49.221818 28.392727 7.563636 13.149091-15.476363 8.96-62.138182-107.52 64.814545-37.469091-12.8-22.574545 15.941819-9.192728 12.8 22.109091 65.396363-37.701818 61.672728 106.821818-15.476364 8.96-7.214546-12.450909-49.92 28.858182 26.065455 45.032727-16.058182 9.192728z m-46.545454-79.825455L244.363636 717.265455l14.778182 25.6 49.221818-28.509091zM267.636364 756.945455l14.778181 25.6 49.221819-28.509091-14.778182-25.483637z m106.938181-80.523637l-14.778181-25.483636-49.92 28.741818 14.778181 25.483636zM346.996364 744.727273l49.803636-28.741818-14.661818-25.483637-49.92 28.741818zM505.832727 609.978182c-4.654545 6.283636-10.123636 13.265455-16.523636 21.061818l35.84 62.021818a18.967273 18.967273 0 0 1-6.749091 29.672727l-19.316364 11.636364-12.450909-13.847273a170.123636 170.123636 0 0 0 17.803637-8.727272 8.494545 8.494545 0 0 0 2.909091-13.614546L477.090909 645.352727l-9.890909 10.472728-10.007273 10.24-12.683636-13.149091c9.309091-8.261818 17.221818-15.941818 23.272727-23.272728l-31.301818-54.341818-25.018182 14.545455-8.843636-15.36 25.018182-14.429091-23.272728-41.076364 15.476364-8.96 23.272727 41.076364L465.454545 538.763636l8.843637 15.36-22.109091 12.567273 28.509091 49.221818c5.469091-6.516364 10.938182-13.498182 16.407273-21.061818z m9.076364-45.730909L572.043636 663.272727a207.825455 207.825455 0 0 0 23.272728-27.461818l11.636363 13.149091a365.381818 365.381818 0 0 1-41.774545 45.498182l-12.567273-12.567273a11.636364 11.636364 0 0 0 1.745455-13.963636L453.818182 493.963636l15.709091-9.076363 36.887272 63.883636 31.301819-18.152727 8.96 15.592727z m129.745454 83.316363a20.596364 20.596364 0 0 1-31.418181-9.774545l-103.098182-178.618182 15.709091-9.192727 38.632727 67.025454a200.261818 200.261818 0 0 0 28.043636-41.076363l16.872728 7.68a303.243636 303.243636 0 0 1-35.723637 49.338182l53.410909 93.090909a9.192727 9.192727 0 0 0 13.963637 4.072727l10.821818-6.283636a14.312727 14.312727 0 0 0 8.029091-11.636364 103.447273 103.447273 0 0 0-15.243637-39.098182l17.338182-3.84c12.567273 25.134545 18.036364 41.658182 16.290909 49.803636A28.392727 28.392727 0 0 1 663.272727 636.741818zM860.276364 521.774545c-7.563636 4.421818-20.829091 11.636364-39.912728 22.574546a179.432727 179.432727 0 0 1-37.352727 16.174545 58.181818 58.181818 0 0 1-33.047273-1.978181 14.312727 14.312727 0 0 0-11.636363-0.581819c-5.352727 3.025455-8.261818 18.385455-8.727273 45.847273l-18.269091-3.956364c1.047273-25.483636 5.003636-42.821818 11.636364-52.014545l-38.865455-67.374545-31.534545 18.152727-8.378182-14.661818 46.545454-26.647273 47.825455 82.850909a55.505455 55.505455 0 0 1 8.494545 1.861818 59.694545 59.694545 0 0 0 25.367273 4.072727 101.701818 101.701818 0 0 0 33.512727-11.636363L849.454545 508.509091l31.418182-18.734546c11.636364-7.214545 19.898182-12.334545 24.087273-15.127272l5.469091 18.152727zM676.072727 413.207273L671.185455 430.545455a279.272727 279.272727 0 0 0-58.181819-13.265455l4.887273-16.64a307.781818 307.781818 0 0 1 58.181818 12.567273zM754.967273 372.363636a261.818182 261.818182 0 0 0 20.247272-38.516363l-98.443636 56.785454-7.796364-13.498182 119.97091-69.46909 6.632727 11.636363a281.134545 281.134545 0 0 1-25.949091 54.807273l5.236364 0.930909L818.734545 349.090909l57.25091 99.025455a18.385455 18.385455 0 0 1-8.843637 27.927272l-18.385454 10.589091-11.636364-11.636363 17.92-9.425455a7.796364 7.796364 0 0 0 3.607273-11.636364L849.454545 437.410909l-37.236363 21.527273 21.992727 38.050909-14.894545 8.610909-21.992728-38.167273L760.203636 488.727273l22.458182 38.749091-15.127273 8.727272L699.461818 418.909091l55.389091-32a306.269091 306.269091 0 0 0-39.330909-1.047273l4.305455-15.127273c13.265455-0.232727 24.901818 0.465455 35.141818 1.629091z m15.825454 49.454546l-11.636363-20.014546-37.003637 21.410909 11.636364 20.014546z m-29.44 34.909091l11.636364 19.549091 37.003636-21.410909-11.636363-19.549091z m81.454546-64.814546l-11.636364-19.898182-37.236364 21.527273 11.636364 19.898182z m-29.556364 34.909091l11.636364 19.432727 37.236363-21.527272-11.636363-19.432728zM1086.370909 391.214545l-19.898182 11.636364-10.589091 6.167273-10.938181 6.050909a186.181818 186.181818 0 0 1-38.749091 16.989091 60.16 60.16 0 0 1-33.978182-1.978182 14.312727 14.312727 0 0 0-11.636364 0c-5.585455 3.258182-8.610909 18.734545-8.96 46.545455l-18.036363-3.723637c0.814545-26.181818 4.770909-43.752727 11.636363-52.945454l-38.865454-67.141819-31.883637 18.385455-8.727272-15.010909 47.243636-27.345455 47.941818 83.2h4.189091a32.465455 32.465455 0 0 1 4.538182 1.163637 71.68 71.68 0 0 0 26.298182 3.490909 112.872727 112.872727 0 0 0 34.210909-13.265455c16.523636-9.192727 31.767273-17.803636 46.545454-25.949091l14.545455-8.727272 14.196363-8.727273c11.636364-6.865455 18.618182-11.636364 22.574546-14.196364l5.352727 18.385455zM896 286.021818l-4.770909 18.385455a296.378182 296.378182 0 0 0-58.181818-14.661818l4.770909-16.872728a311.156364 311.156364 0 0 1 58.181818 13.149091zM1031.098182 384l-12.334546-13.149091c11.636364-5.934545 21.76-11.636364 30.138182-15.941818a9.658182 9.658182 0 0 0 4.189091-14.661818l-54.341818-94.138182-83.781818 48.290909-9.076364-15.709091 83.781818-48.407273-20.712727-35.84 16.174545-9.425454 20.712728 36.072727 32.814545-18.967273 8.610909 15.243637-32.349091 18.850909 56.552728 97.978182a20.247273 20.247273 0 0 1-8.843637 31.185454z m-23.272727-59.345455L1000.727273 340.48a405.876364 405.876364 0 0 0-58.181818-25.6l7.796363-15.127273a393.890909 393.890909 0 0 1 57.716364 24.436364z" fill="#13C463" p-id="1345"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/auditor.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/auditor.svg
new file mode 100644
index 0000000..66d2c2c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/auditor.svg
@@ -0,0 +1 @@
+<svg t="1729561718271" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8640" width="200" height="200"><path d="M908.5952 920.4224H164.7616a31.0784 31.0784 0 0 1-30.976-30.976c0-17.0496 13.9264-30.976 30.976-30.976h743.8336c17.0496 0 31.0272 13.9264 31.0272 30.976a31.0784 31.0784 0 0 1-31.0272 30.976z m0-123.9552H164.7616a31.0784 31.0784 0 0 1-30.976-30.976v-154.9824c0-51.1488 41.8304-92.9792 92.9792-92.9792h198.3488c-6.1952-37.1712-24.7808-72.8064-51.1488-103.8336a216.576 216.576 0 0 1-54.2208-144.128c0-58.88 23.2448-114.688 66.6112-156.4672C429.7728 71.168 485.5296 51.0976 545.9968 52.6848c111.5648 4.608 206.08 100.6592 207.616 212.2752 1.536 55.808-20.1216 110.0288-57.344 151.8592-26.3168 27.904-41.8304 61.952-48.0256 100.7104h198.3488c51.2 0 93.0304 41.8304 93.0304 92.9792v154.9824a31.0784 31.0784 0 0 1-31.0272 30.976z m-712.8064-61.952H877.568v-124.0064a31.0784 31.0784 0 0 0-31.0272-30.976h-232.448a31.0784 31.0784 0 0 1-30.976-31.0272c0-65.024 23.2448-127.0784 66.6624-173.568 27.8528-29.3888 41.8304-68.1472 41.8304-108.4416-1.536-80.5888-68.1984-148.7872-148.7872-151.8592a150.528 150.528 0 0 0-113.152 43.3664 153.6 153.6 0 0 0-48.0256 111.616c0 37.1712 13.9776 74.3424 38.7584 102.2464 44.9536 51.1488 69.7344 113.152 69.7344 176.64a31.0784 31.0784 0 0 1-30.976 31.0272h-232.448a31.0784 31.0784 0 0 0-30.976 30.976v123.9552z" fill="#fff" p-id="8641"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/cancel.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/cancel.svg
new file mode 100644
index 0000000..ab9b155
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/cancel.svg
@@ -0,0 +1 @@
+<svg t="1729178183592" class="icon" viewBox="0 0 1300 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4332" width="200" height="200"><path d="M784.074702 99.196443l10.927871 18.473304-21.302843-2.56935-14.180213 16.066571-4.130475-21.042655-19.676671-8.521137 18.733492-10.440019 2.016452-21.335366 15.708814 14.603017 20.945085-4.683373-9.041512 19.449008zM1067.22363 642.402668l-18.440781 10.92787 2.56935-21.302842-16.099094-14.180213 21.042655-4.130475 8.521137-19.676671 10.440019 18.733492 21.367889 2.016452-14.603017 15.708814 4.683373 20.945085-19.481531-9.041512z" fill="#8a8a8a" p-id="4333"></path><path d="M1067.22363 642.402668l-18.440781 10.92787 2.56935-21.302842-16.099094-14.180213 21.042655-4.130475 8.521137-19.676671 10.440019 18.733492 21.367889 2.016452-14.603017 15.708814 4.683373 20.945085-19.481531-9.041512zM571.924408 100.009528l-17.400031-12.488994 20.52228-6.211974 6.504685-20.457234 12.261331 17.595172 21.432936-0.09757-12.944323 17.074798 6.732349 20.359663-20.262093-7.02506-17.269938 12.716659 0.422804-21.46546zM991.444053 784.43246l-21.172749 3.480006 10.114785-18.928632-9.822074-19.026203 21.107702 3.772717 15.090868-15.253486 2.927109 21.237796 19.156296 9.626933-19.318914 9.366746-3.219819 21.205273-14.863204-15.48115zM428.008258 156.795426l-20.749945-5.333841 16.879657-13.237034-1.365983-21.400413 17.822836 11.936097 19.936859-7.870669-5.88674 20.619851 13.692361 16.521899-21.432936 0.813086-11.513292 18.083024-7.382817-20.132zM854.260251 896.475655l-20.749945-5.333841 16.879657-13.237034-1.365983-21.400413 17.822836 11.96862 19.936859-7.903192-5.854217 20.619851 13.659838 16.554423-21.432936 0.780562-11.513292 18.115547-7.382817-20.164523zM562.460092 923.665237l10.895347 18.440782-21.302843-2.569351-14.180212 16.099095-4.130475-21.042655-19.676672-8.521137 18.733493-10.440019 2.016452-21.36789 15.708814 14.603018 20.945085-4.683373-9.008989 19.48153zM242.787359 420.788058l-18.473305 10.895347 2.569351-21.302843-16.066572-14.180213 21.042656-4.130474 8.521137-19.676672 10.440019 18.733492 21.335366 2.016453-14.603018 15.708813 4.683374 20.945085-19.449008-9.008988z" fill="#8a8a8a" p-id="4334"></path><path d="M242.787359 420.788058l-18.473305 10.895347 2.569351-21.302843-16.066572-14.180213 21.042656-4.130474 8.521137-19.676672 10.440019 18.733492 21.335366 2.016453-14.603018 15.708813 4.683374 20.945085-19.449008-9.008988zM700.814737 943.959854l-17.400032-12.521518 20.522281-6.211974 6.504685-20.42471 12.26133 17.595172 21.432937-0.130094-12.944323 17.107321 6.732349 20.359663-20.262093-7.025059-17.269938 12.684135 0.422804-21.432936zM303.541115 278.823313l-21.140226 3.480006 10.114785-18.928633-9.854597-19.058726 21.107702 3.772717 15.090868-15.220962 2.927109 21.237796 19.156296 9.626933-19.28639 9.366746-3.252342 21.172749-14.863205-15.448626z" fill="#8a8a8a" p-id="4335"></path><path d="M407.648595 90.642782a486.713038 486.713038 0 0 1 504.568397 11.578339l25.010513-14.407877A512.081309 512.081309 0 0 0 139.850723 547.401747l24.977989-14.407877a486.778085 486.778085 0 0 1 242.819883-442.351088zM893.28836 933.422265a486.810608 486.810608 0 0 1-504.568398-11.610863l-25.010513 14.407877a512.081309 512.081309 0 0 0 797.5394-459.621026l-24.97799 14.505447a486.843132 486.843132 0 0 1-242.982499 442.318565z" fill="#8a8a8a" p-id="4336"></path><path d="M814.061299 795.880705a326.665269 326.665269 0 0 1-258.170939 29.563792l-29.791456 17.172368a353.236906 353.236906 0 0 0 472.793013-272.448721l-29.693886 17.172367a326.762839 326.762839 0 0 1-155.136732 208.540194zM486.875655 228.119295a326.795363 326.795363 0 0 1 258.170939-29.563792l29.791456-17.172368a353.236906 353.236906 0 0 0-472.793013 272.448721l29.82398-17.172367a326.762839 326.762839 0 0 1 155.006638-208.540194zM1288.350389 374.73489a53.923837 53.923837 0 0 1-14.34283 12.001143L229.420232 988.712085A53.793743 53.793743 0 0 1 156.112434 968.937843l-148.924757-258.235985a53.76122 53.76122 0 0 1 19.741718-73.437891L1071.516722 35.352962A53.826266 53.826266 0 0 1 1144.82452 55.062157l148.827187 258.268508a53.793743 53.793743 0 0 1-5.398888 61.404225zM32.19819 665.754486a28.360426 28.360426 0 0 0-5.626553 10.73273 28.067715 28.067715 0 0 0 2.699444 21.432936L178.195839 956.188661a28.165285 28.165285 0 0 0 38.442687 10.342449l1044.587328-601.976052a28.132762 28.132762 0 0 0 10.440019-38.442687l-148.924758-258.268509a28.197808 28.197808 0 0 0-38.442687-10.342449L39.711101 659.444942a28.230332 28.230332 0 0 0-7.512911 6.309544z" fill="#8a8a8a" p-id="4337"></path><path d="M498.941845 597.390249l-138.322121 79.877529 38.637827 66.933207q8.000762 13.854979 21.595554 5.98431l114.254788-65.957504a21.172749 21.172749 0 0 0 9.952167-11.123011q2.634397-9.757027-16.91218-47.321582l18.440781-4.130474q20.489757 43.22363 18.148071 56.167953a36.166047 36.166047 0 0 1-16.261712 19.514054l-123.068636 71.031158q-25.17313 14.603017-40.394092-11.77348L317.103383 639.020232l16.066571-9.269176 18.570875 32.133143 122.027886-70.47826-33.596697-58.249452-150.160648 86.707448-9.041511-15.611243 166.454883-96.106718zM691.903319 563.663459c-3.935334 3.837764-9.757027 9.399269-17.497602 16.619469l23.319295 40.394093-15.611244 9.008988-21.237795-36.816516q-31.027346 27.709957-64.754137 54.314118l-12.814229-13.39965 9.171605-7.382818 9.236653-7.122629-79.714912-138.126982-17.627696 10.179832-8.781324-15.155915L601.683341 414.836271l6.960013 12.06619 86.34969-49.858408 8.488614 14.733111q28.197808 65.82741 30.506972 123.39387a274.660314 274.660314 0 0 0 69.339939 27.612387l-3.642623 18.440781a322.177037 322.177037 0 0 1-65.534699-26.40902 220.899095 220.899095 0 0 1-15.38358 72.819946l-18.14807-6.179451a215.272542 215.272542 0 0 0 15.448626-77.340702 312.940384 312.940384 0 0 1-89.374369-86.739971l-8.748801 5.138701-7.2202-12.488995-17.172368 9.919644 71.876767 124.499667q10.570113-10.017215 17.465079-16.61947z m-134.32174-56.948515l40.166428-23.189202-19.969382-34.702493-40.166429 23.189201z m28.067714 48.785135l40.166429-23.189201-19.514055-33.921931-40.166428 23.189201z m48.557472-8.813847l-40.166428 23.189201 21.888264 37.922312q13.334604-10.92787 35.775766-30.767159z m7.2202-117.832365A289.848753 289.848753 0 0 0 715.515325 503.365031a330.437986 330.437986 0 0 0-26.441544-101.92841zM812.760362 400.460918l-4.813467 17.95293a280.482007 280.482007 0 0 0-56.167953-12.781706l5.073654-17.530125a291.637542 291.637542 0 0 1 55.907766 12.358901z m24.360045 28.78323a925.063745 925.063745 0 0 1 10.017214 101.895887l-18.440781 2.016452a812.792886 812.792886 0 0 0-8.878895-101.375512z m-45.923075-86.25212l-4.813467 18.017977a290.922026 290.922026 0 0 0-58.542163-11.513292l5.073655-17.497602a308.972527 308.972527 0 0 1 58.281975 10.992917z m48.459902-17.562649l-9.334223 13.724885A298.792695 298.792695 0 0 0 783.814515 315.477211l9.757027-14.180212a437.635191 437.635191 0 0 1 46.085692 24.13238zM834.355916 269.944418l16.521899-9.529363 35.157821 60.916373 48.199714-27.840051L1003.282579 413.047483q12.716659 22.115928-8.228426 34.214642l-26.018739 15.058345-13.237034-13.009369 25.238177-13.952549c6.992536-4.065428 8.45609-9.561887 4.423186-16.554423l-12.716659-22.018358-80.527997 46.475973L919.762427 491.1037l-16.066572 9.269176-81.926505-141.899698 47.744387-27.579864z m107.750103 73.763125l-14.830682-25.660981-80.56052 46.508496 14.830681 25.726028z m-72.592282 60.330952l14.700587 25.433317 80.560521-46.508496-14.700587-25.433318z m45.532793-166.064603a222.720407 222.720407 0 0 1-2.406733 56.13543l-16.456853 0.878132a242.722312 242.722312 0 0 0 2.081499-55.647578z" fill="#8a8a8a" p-id="4338"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/child-process.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/child-process.svg
new file mode 100644
index 0000000..249723f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/child-process.svg
@@ -0,0 +1 @@
+<svg t="1740116949537" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1153" width="200" height="200"><path d="M440.32 296.96h283.30496v145.92h66.56V230.4H440.32V17.92H17.92v424.96H440.32V296.96zM373.76 376.32H84.48v-291.84H373.76v291.84zM586.24 588.8v143.36512H298.66496V586.24h-66.56v212.48512H586.24V1013.76H1008.64v-424.96h-422.4z m355.84 358.4h-289.28v-291.84H942.08v291.84z" p-id="1154" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/condition.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/condition.svg
new file mode 100644
index 0000000..41ea85d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/condition.svg
@@ -0,0 +1 @@
+<svg t="1729585232424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1602" width="200" height="200"><path d="M925.5 898.9H804.9c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4h34.5V572.2c0-19-15.4-34.4-34.5-34.4H529.2V727h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4H443.1c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4h34.5V537.8H219.1c-19 0-34.5 15.4-34.5 34.4V727h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4H98.5c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4H133V555c0-38 30.9-68.8 68.9-68.8h275.7V297.1h-34.5c-19 0-34.5-15.4-34.5-34.4V159.5c0-19 15.4-34.4 34.5-34.4h120.6c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4h-34.5v189.2h292.9c38.1 0 68.9 30.8 68.9 68.8v172h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 18.8-15.4 34.2-34.5 34.2z m0 0" p-id="1603" fill="#fff"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/copy.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/copy.svg
new file mode 100644
index 0000000..8ff3bba
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/copy.svg
@@ -0,0 +1 @@
+<svg t="1729649333541" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1644" width="200" height="200"><path d="M647.888 893.84L491.904 571.52l393.888-393.888-237.904 716.208zM872.32 123.232L459.872 535.68 134.96 380.88 872.32 123.232z m90.72-68.32a23.968 23.968 0 0 0-24.784-5.568L64.08 354.816a23.984 23.984 0 0 0-2.4 44.32l381.392 181.728 187.36 387.088a24.048 24.048 0 0 0 23.152 13.504 24.032 24.032 0 0 0 21.232-16.4L968.96 79.552c2.88-8.672 0.592-18.24-5.92-24.64z" fill="#fff" p-id="1645"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/delay.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/delay.svg
new file mode 100644
index 0000000..cbc31df
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/delay.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735905505218" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4277" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M561.778 454.929h198.117c0.549 0 0.994 0.444 0.994 1.001v97.553a0.998 0.998 0 0 1-0.994 1.001H463.224a1.005 1.005 0 0 1-1.002-1V207.04c0-0.552 0.444-1 1.002-1h97.552c0.553 0 1.002 0.455 1.002 1v247.89zM512 952.706c-247.424 0-448-200.576-448-448 0-247.423 200.576-448 448-448s448 200.577 448 448c0 247.424-200.576 448-448 448z m0-99.555c192.44 0 348.444-156.004 348.444-348.445 0-192.44-156.003-348.444-348.444-348.444-192.44 0-348.444 156.004-348.444 348.444 0 192.441 156.003 348.445 348.444 348.445z" fill="#3296FA" p-id="4278"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/finish.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/finish.svg
new file mode 100644
index 0000000..674c6df
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/finish.svg
@@ -0,0 +1 @@
+<svg t="1730189225011" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2651" id="mx_n_1730189225011" width="200" height="200"><path d="M793.889347 200.380242c27.648573 20.615681 42.196018 32.710677 63.781037 56.119312 25.313864 27.453234 43.242957 48.52047 64.502857 86.507991 44.537416 79.580127 53.527718 136.949077 53.517684 212.063821 0 64.933675-15.452562 130.459388-40.138263 187.311893-22.076044 50.841799-61.545336 104.359483-101.886297 138.933914-45.506755 39.001681-81.214423 60.462941-137.605337 81.826531-55.699867 21.102023-114.070267 28.641326-181.379458 27.791064-68.274516-0.862973-129.364283-11.040029-180.533878-31.80489-46.159002-18.731189-98.338744-46.827973-141.596418-87.541551-43.946046-41.361142-70.369064-75.958317-93.88139-127.198155-26.157437-57.004361-40.094111-129.065922-39.680686-191.781288 0-36.980719 4.033895-70.902234 12.252873-105.241856 8.532726-35.651474 20.069131-69.572989 38.13135-102.35257 18.856956-34.221214 36.754607-62.067803 58.869452-88.973149 23.248751-28.285434 39.2104-46.417894 64.295476-63.475987 18.297696-12.442861 36.879036-9.295353 47.199252-2.306612 4.403836 2.982273 8.919391 6.577992 12.933218 12.933217 9.572307 15.156208-0.334486 29.769212-6.69038 38.465836-7.148625 9.781026-23.130343 26.023643-38.738775 43.218205-38.192895 42.075603-55.133918 65.965228-74.986303 106.965794-30.772668 63.552249-37.495827 115.718611-38.131349 166.573791-0.668971 53.517684 9.995096 99.647251 27.427813 140.483919 33.916163 80.572211 94.807915 144.44289 175.270414 178.615938 41.108271 17.845472 113.812713 37.319888 181.960793 38.13135 56.193568 0.668971 125.919751-11.321666 166.574459-28.096784 45.935566-18.954626 97.223569-56.862539 127.10383-94.324918 23.013273-28.852721 52.179742-70.910931 64.413884-105.694749 14.863868-42.260239 24.806784-87.661297 24.559934-132.458943 0-54.414105-11.53373-108.417461-36.918505-156.856317-20.16747-38.483228-46.480777-74.607665-84.66899-108.048189-13.377414-11.714352-23.822728-20.067124-38.808348-31.619586-10.191774-7.857065-36.059546-25.027545-28.923632-47.326356 4.970455-15.53217 18.303717-25.294464 31.887843-27.205046 19.456354-2.736092 28.565733 2.427027 43.705885 12.041479l6.179955 4.322891zM510.755379 531.65738c-8.696624-0.668971-10.034566-0.446204-20.738102-6.689711-11.031333-6.434832-17.839451-21.183637-16.514219-35.175166V92.220334c0-18.178619 0.386665-22.815926 8.988295-31.685813 5.351768-5.519011 10.963097-11.381873 26.08987-11.539751 16.055305-0.167243 21.407073 3.846584 27.929542 9.700081 9.70677 8.711341 10.703537 17.56049 10.377078 33.525483v397.5715c-0.509756 15.273947 0.326458 22.967114-11.380535 33.502739-3.884046 3.495374-8.027653 7.693167-20.96087 8.362138l-3.791059 0.000669z m4.453341 0.573308" p-id="2652" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/parallel.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/parallel.svg
new file mode 100644
index 0000000..ba0ac67
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/parallel.svg
@@ -0,0 +1 @@
+<svg t="1729585239190" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1755" width="200" height="200"><path d="M901.489435 536.822664v-0.931601l-1.001722-198.240726c-0.100172-19.162936-9.21584-37.474409-25.043042-50.246361-14.024104-11.349507-32.265456-17.60025-51.348255-17.610268l-618.062295-0.18031c-19.142902 0-37.424323 6.280795-51.478478 17.690405-15.827203 12.842072-24.902802 31.2437-24.892785 50.486775v196.798247A114.987635 114.987635 0 1 0 195.295664 536.922836V338.782282c1.15198-1.252152 4.808264-3.596181 10.768509-3.596181l276.725622 0.090155v199.753326a114.987635 114.987635 0 1 0 65.612772 1.412428V335.326342l275.693849 0.080138c6.01033 0 9.626546 2.344029 10.768508 3.596181l1.001722 195.70637a114.987635 114.987635 0 1 0 65.592737 2.113633zM214.979496 645.910158a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m354.689623 0a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m295.507904 56.437001a56.437001 56.437001 0 1 1 56.437001-56.437001 56.507122 56.507122 0 0 1-56.457035 56.437001z" p-id="1756" fill='#fff'></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/reject.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/reject.svg
new file mode 100644
index 0000000..21fd5f6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/reject.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724316570161" class="icon" viewBox="0 0 1185 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1505" xmlns:xlink="http://www.w3.org/1999/xlink" width="231.4453125" height="200"><path d="M414.276535 230.004913l-2.443086-31.647244 26.446614 17.351559 29.437984-11.852598-8.143622 30.31685 20.423559 24.221229-31.623055 1.475527-16.722646 26.801386-11.239811-29.760504-30.663559-7.522772zM581.664252 176.902047l13.884472-28.542992 14.206993 28.220473 31.42148 4.321763-22.350614 22.092599 5.684409 31.123149-28.180157-14.513385-27.897953 14.819779 5.28126-31.066709-22.76989-21.689448zM896.507969 672.735748l17.754708 26.398236-31.494047-2.064126-19.560819 24.705008-7.95011-30.502299-29.575055-11.02211 26.744945-16.771024 1.104629-31.526299 24.414741 20.197795 30.268472-8.619338zM777.030551 801.961323l2.112504 31.647244-26.446614-17.682142-29.413795 11.546205 8.466141-30.308787-20.092976-24.221229 31.606929-1.153008 17.045166-26.793323 10.86085 29.704063 30.647433 7.837229zM609.312252 853.451591l-14.198929 28.518803-14.110236-28.542992-31.405355-4.636221 22.673134-22.084535-5.36189-31.12315 27.833449 14.835906 28.188221-14.803654-5.28126 31.066709 22.76989 22.060346zM298.435528 354.828094l-17.448315-26.390173 31.485984 2.394709 19.875275-24.753386 7.611465 30.865134 29.583118 11.288189-27.011024 16.779087-1.419086 31.526299-24.084158-20.504189-30.518425 8.280693zM962.56 91.53915a43.636913 43.636913 0 0 1 59.375874 15.601889l138.627024 236.753638c12.175118 20.447748 5.12 47.208819-15.609953 59.375874L229.13411 938.185575a43.636913 43.636913 0 0 1-59.375874-15.60189L31.12315 685.773606a43.636913 43.636913 0 0 1 15.601889-59.319433z m25.672567 24.108346a13.594205 13.594205 0 0 0-10.441575 1.548095L61.625449 652.054173a13.586142 13.586142 0 0 0-4.853921 18.83515l138.643149 236.793953a13.586142 13.586142 0 0 0 18.843213 4.837795l915.818834-534.915024a13.957039 13.957039 0 0 0 5.160315-18.778708l-138.602834-236.78589a13.594205 13.594205 0 0 0-8.401638-6.393953z" fill="#F5222D" p-id="1506"></path><path d="M395.981606 172.338394c123.670173-72.349228 271.11811-69.462677 388.394331-5.12l29.623433-17.335433a414.574866 414.574866 0 0 0-112.107842-47.071748 429.991307 429.991307 0 0 0-162.009701-10.498016 412.792945 412.792945 0 0 0-158.80063 54.707401 417.856504 417.856504 0 0 0-125.363402 111.922394A426.282331 426.282331 0 0 0 185.206929 405.004094a417.348535 417.348535 0 0 0-13.529701 120.977134l29.623433-17.335433c1.386835-133.958551 70.688252-263.958173 194.672882-336.307401z m397.666772 679.484472c-123.670173 72.365354-271.110047 69.462677-388.394331 5.128063l-29.623433 17.335433a414.679685 414.679685 0 0 0 112.075591 47.087874 429.991307 429.991307 0 0 0 162.009701 10.498016 412.744567 412.744567 0 0 0 158.808692-54.707402 423.145827 423.145827 0 0 0 209.105638-378.976756l-29.623433 17.335434c-1.072378 133.974677-70.712441 263.95011-194.350362 336.307401h-0.008063z" fill="#F5222D" p-id="1507"></path><path d="M478.377323 313.110173a226.271748 226.271748 0 0 1 109.979212-31.219905l45.668788-26.761071c-58.634079-9.13537-118.316346 2.314079-170.612914 32.735748a258.693039 258.693039 0 0 0-111.91433 132.71685l45.67685-26.761071a230.359685 230.359685 0 0 1 81.097575-80.589606l0.104819-0.120945z m232.568945 397.674835a226.328189 226.328189 0 0 1-109.979213 31.227968l-45.668787 26.753008c58.634079 9.13537 118.316346-2.314079 170.612913-32.735748a258.709165 258.709165 0 0 0 111.914331-132.71685l-45.676851 26.761071a225.215496 225.215496 0 0 1-81.097574 80.597669l-0.104819 0.112882zM188.57726 706.938961l-10.062614-17.424126 109.938897-63.471874 9.578835 16.585574 17.093543-9.869102-18.770645-32.509984-63.689575 36.767244c-4.047622-3.918614-7.804976-7.337323-11.272063-10.24l-16.859717 13.747401c3.249386 2.144756 6.595528 4.458835 9.869103 7.038993l-62.173733 35.896441 19.254426 33.348535 17.093543-9.869102zM317.44 781.142677l-19.060913-33.017953 32.679307-18.867401 4.741039 8.216189 17.093543-9.869103-48.474708-83.959937-49.772851 28.736504-7.933984-13.747401-17.432189 10.062614 7.933984 13.747402-49.264882 28.446236 48.764977 84.459842 17.093543-9.869102-5.031307-8.708032 32.171339-18.585196 19.060913 33.017952 17.432189-10.062614z m-12.505701-97.126803l-32.679307 18.867402-8.321008-14.41663 32.679307-18.867402 8.321008 14.41663z m-50.111496 28.930016l-32.171338 18.577134-8.321008-14.41663 32.171338-18.577134 8.321008 14.41663z m16.932284 29.325102l-32.171339 18.577134-8.127496-14.077984 32.171339-18.577134 8.127496 14.077984z m50.111496-28.930016l-32.679307 18.867402-8.127496-14.077984 32.679307-18.867402 8.127496 14.077984z m95.828661 7.684032c11.062425-6.38589 13.368441-15.537386 6.692284-27.099717l-25.05978-43.411149c3.55578-4.289512 7.014803-8.740283 10.48189-13.199118l-9.482079-16.424315c-3.467087 4.458835-6.92611 8.917669-10.48189 13.199118l-17.803086-30.832882 14.755275-8.51452-9.780409-16.932283-14.747213 8.522582-16.738771-28.994519-17.093544 9.869102 16.738772 28.99452-16.924221 9.772346 9.772347 16.924221 16.932283-9.772347 20.891213 36.202835a299.927181 299.927181 0 0 1-16.690394 15.214866l13.868347 14.344063a572.617575 572.617575 0 0 0 12.497638-12.804031l19.157669 33.179212c2.322142 4.031496 1.475528 7.200252-2.20926 9.328882-3.85411 2.225386-8.167811 4.039559-12.578268 5.692472l13.55389 14.964914 14.247307-8.224252z m111.390236-65.205417c6.369764-3.676724 10.15937-8.329071 11.151118-13.586142 1.225575-5.619906-3.201008-18.706142-13.182992-39.089386l-18.827086 4.160504c7.627591 14.368252 11.368819 23.164976 11.570393 26.615937 0.112882 3.289701-0.959496 5.692472-3.467086 7.143811l-6.539087 3.77348c-3.354205 1.935118-6.095622 1.064315-8.224252-2.628535l-38.702362-67.027654c8.933795-10.07874 17.762772-21.874898 26.390173-35.573921l-18.383622-8.603213a168.443969 168.443969 0 0 1-17.972409 26.914268l-26.801386-46.426709-17.254803 9.965859 77.686929 134.571338c6.966425 12.070299 16.077606 15.077795 27.478677 8.498394l15.077795-8.708031z m-78.501291 45.547842c13.626457-12.779843 25.285543-25.100094 34.783748-37.291339l-12.473449-14.247307a157.808882 157.808882 0 0 1-14.706897 17.875654l-38.412095-66.535811 20.617071-11.900976-9.869102-17.093544-20.617071 11.900977-27.18841-47.087874-17.254803 9.965858 72.94589 126.363212c2.999433 5.192567 2.418898 9.99811-1.564221 14.311811l13.739339 13.739339z m201.663496-113.978457l-65.21348-112.946393c0.137071-7.901732-0.16126-15.771213-0.886929-23.624567l53.78822-31.050583-9.869102-17.093543-144.795213 83.597102 9.869102 17.093543 71.05915-41.024504c1.894803 37.331654-9.45789 76.517795-33.848441 117.856756l20.367118 8.570961c14.860094-26.898142 25.05978-53.344756 30.445859-79.243087l50.990362 88.313953 18.093354-10.449638z m28.728441-76.017889l5.716661-21.850709c-21.157291-7.224441-45.330142-12.707276-72.349228-16.54526l-5.603779 19.318929c29.163843 4.837795 53.385071 11.191433 72.244409 19.07704z m18.738394-105.33493l5.265134-19.13348c-12.739528-4.25726-27.414173-7.627591-43.612725-10.127118l-5.410268 18.101417c17.674079 2.74948 32.380976 6.555213 43.757859 11.159181z m88.934803 67.74526l-15.76315-27.317417 21.786205-12.578268 15.674457 27.148095 16.085669-9.288567-15.674457-27.148095 22.455433-12.965291 4.063748 7.038992c2.031874 3.523528 1.249764 6.426205-2.435023 8.554835l-11.852599 6.176252 12.175118 12.183181 12.570205-7.256693c11.393008-6.579402 13.997354-15.230992 7.998488-25.616126l-42.862866-74.244032-33.848441 19.544693-0.532157-0.145133a202.445606 202.445606 0 0 0 18.738393-38.750741L790.173228 306.87748l-92.676031 53.506016 8.321008 14.41663 31.679496-18.286866-3.85411 13.836094c8.401638-0.16126 16.125984 0.08063 23.261732 0.427339l-37.202646 21.479811 52.538457 90.998929 16.424315-9.482079z m-25.35811-117.856756c-6.724535-0.806299-14.126362-1.233638-21.947465-1.628724l33.517858-19.351181c-3.305827 7.047055-7.143811 13.948976-11.570393 20.979905z m47.571653 16.996788l-22.455433 12.965291-6.095622-10.56252 22.455433-12.965291 6.095622 10.56252z m-38.541102 22.253858l-21.786205 12.578268-6.095622-10.56252 21.786205-12.578268 6.095622 10.56252z m-24.253481 137.570772c-0.330583-19.915591 1.112693-30.582929 4.458835-32.518048 1.846425-1.064315 4.628157-0.886929 8.627402 0.604725 8.304882 2.797858 16.400126 3.265512 24.269606 1.402961 8.006551-2.386646 17.464441-6.506835 28.462362-12.626646 10.812472-6.031118 20.96378-11.66715 30.187843-16.988725l38.379842-22.157102-5.781165-19.673701c-4.329827 2.942992-10.675402 7.055118-19.028662 12.320252-8.708031 5.031307-16.996787 10.038425-25.374236 14.876221-13.07011 7.546961-24.398614 13.868346-34.211275 19.302803-10.07874 5.378016-18.230425 8.296819-24.543748 8.587087-5.28126 0.145134-11.070488-0.983685-17.440252-3.120378l-2.902678-0.774048-36.767244-63.681511-38.379842 22.157102 9.288567 16.085669 22.116787-12.771779 26.511118 45.91874c-4.571717 7.555024-7.014803 20.359055-7.651779 38.605606l19.778519 4.450772z m38.476599-112.938331l-21.786205 12.578268-6.095622-10.56252 21.786205-12.578268 6.095622 10.56252z m38.541102-22.253858l-22.455433 12.965291-6.095622-10.56252 22.455433-12.957228 6.095622 10.56252z m172.241638-43.798173c12.062236-6.966425 14.610142-16.488819 7.740472-28.381733l-39.863433-69.051464 23.302048-13.449071-9.869103-17.093543-23.302047 13.44907-14.513386-25.132346-17.424126 10.062614 14.513386 25.132347-62.681701 36.186708 9.869103 17.093544 62.6817-36.186709 37.34778 64.689386c2.515654 4.354016 1.523906 8.062992-2.838173 10.578645-6.692283 3.870236-14.190866 7.522772-21.955528 11.110804l13.529701 14.537574 23.463307-13.545826z m-130.942992-43.725607l5.386079-20.092976c-12.900787-4.168567-27.389984-7.200252-43.65304-9.433701l-5.321575 18.27074c17.682142 2.74948 32.219717 6.643906 43.596599 11.255937z m80.702488 27.148095l8.466142-17.851465c-10.756031-5.853732-24.825953-12.038047-41.846929-18.302992l-8.740284 16.22274c16.883906 6.789039 30.808693 13.497449 42.121071 19.931717z m-31.219905 99.577952c-0.354772-20.350992 1.064315-31.445669 4.418519-33.380787 2.007685-1.161071 5.128063-1.177197 9.119244 0.32252a42.951559 42.951559 0 0 0 24.938835 1.007874c8.175874-2.483402 18.141732-6.893858 29.639559-13.303937 11.320441-6.321386 21.810394-12.150929 31.365039-17.657953l35.525544-20.520315-5.966614-20.012346c-3.999244 2.74948-10.006173 6.668094-17.859528 11.651023-7.95011 4.805543-15.722835 9.522394-23.439118 13.973166a2406.72252 2406.72252 0 0 1-35.719055 20.181669c-10.586709 5.66022-19.165732 8.603213-25.712882 9.256315-5.28126 0.145134-11.401071-0.790173-17.940158-2.822047l-3.080063-0.685355-36.767244-63.681512-39.041008 22.544126 9.482079 16.424315 22.455433-12.965291 26.511118 45.91874c-4.57978 7.555024-7.256693 20.72189-7.700157 39.299024l19.770457 4.450771z" fill="#F5222D" p-id="1508"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/running.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/running.svg
new file mode 100644
index 0000000..5908c13
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/running.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724304256588" class="icon" viewBox="0 0 1300 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1272" xmlns:xlink="http://www.w3.org/1999/xlink" width="253.90625" height="200"><path d="M784.058182 99.258182l10.938182 18.385454-21.294546-2.56-14.196363 16.058182-4.072728-21.061818-19.781818-8.494545 18.734546-10.472728 2.094545-21.294545 15.709091 14.545454 20.945454-4.654545-9.076363 19.549091zM1067.287273 642.443636l-18.501818 10.821819 2.56-21.294546-16.058182-14.196364 21.061818-4.072727 8.494545-19.665454 10.472728 18.734545 21.294545 1.978182-14.661818 15.709091 4.770909 20.945454-19.432727-8.96z" fill="#2196F3" p-id="1273"></path><path d="M1067.287273 642.443636l-18.501818 10.821819 2.56-21.294546-16.058182-14.196364 21.061818-4.072727 8.494545-19.665454 10.472728 18.734545 21.294545 1.978182-14.661818 15.709091 4.770909 20.945454-19.432727-8.96zM571.927273 100.072727l-17.454546-12.567272 20.596364-6.167273 6.516364-20.48 12.218181 17.570909 21.410909-0.116364-12.916363 17.105455 6.749091 20.363636-20.247273-6.981818-17.338182 12.683636 0.465455-21.410909zM991.418182 784.407273l-21.178182 3.490909 10.123636-18.967273-9.774545-18.967273 21.061818 3.723637 15.127273-15.243637 2.909091 21.294546 19.2 9.658182-19.316364 9.309091-3.258182 21.178181-14.894545-15.476363zM427.985455 156.741818L407.272727 151.505455l16.872728-13.265455-1.396364-21.410909 17.803636 11.985454 20.014546-7.912727-5.934546 20.596364 13.730909 16.523636-21.410909 0.814546-11.52 18.152727-7.447272-20.247273zM854.225455 896.465455l-20.712728-5.352728 16.872728-13.265454-1.396364-21.294546 17.803636 11.869091 20.014546-7.912727-5.934546 20.712727 13.730909 16.523637-21.527272 0.814545-11.403637 18.036364-7.447272-20.130909zM562.501818 923.694545l10.821818 18.385455-21.294545-2.56-14.196364 16.058182-4.072727-21.061818-19.665455-8.494546 18.734546-10.356363 1.978182-21.41091 15.709091 14.661819 20.945454-4.770909-8.96 19.54909zM242.734545 420.770909l-18.385454 10.938182 2.56-21.294546-16.058182-14.196363 21.061818-4.189091 8.494546-19.665455 10.356363 18.734546 21.410909 2.094545-14.545454 15.709091 4.654545 20.945455-19.549091-9.076364z" fill="#2196F3" p-id="1274"></path><path d="M242.734545 420.770909l-18.385454 10.938182 2.56-21.294546-16.058182-14.196363 21.061818-4.189091 8.494546-19.665455 10.356363 18.734546 21.410909 2.094545-14.545454 15.709091 4.654545 20.945455-19.549091-9.076364zM700.858182 943.941818l-17.454546-12.450909 20.48-6.283636 6.516364-20.48 12.334545 17.687272 21.41091-0.116363-12.916364 17.105454 6.632727 20.363637-20.247273-7.098182-17.221818 12.683636 0.465455-21.410909zM303.592727 278.807273l-21.178182 3.490909 10.123637-18.967273-9.890909-18.967273 21.178182 3.723637 15.010909-15.243637 2.909091 21.294546 19.2 9.541818-19.316364 9.425455-3.258182 21.178181-14.778182-15.476363z" fill="#2196F3" p-id="1275"></path><path d="M407.272727 90.647273a486.632727 486.632727 0 0 1 504.552728 11.636363l25.018181-14.429091A512 512 0 0 0 139.636364 546.909091l25.018181-14.429091A486.981818 486.981818 0 0 1 407.272727 90.647273zM893.323636 933.352727a486.749091 486.749091 0 0 1-504.669091-11.636363l-24.901818 14.429091A512 512 0 0 0 1161.192727 477.090909l-24.901818 13.963636a486.981818 486.981818 0 0 1-242.967273 442.298182z" fill="#2196F3" p-id="1276"></path><path d="M814.545455 795.927273a327.447273 327.447273 0 0 1-258.21091 29.556363l-29.78909 17.105455A353.163636 353.163636 0 0 0 998.865455 570.181818l-29.789091 17.105455A326.865455 326.865455 0 0 1 814.545455 795.927273zM486.865455 228.072727A327.447273 327.447273 0 0 1 744.727273 198.516364l29.789091-17.105455A353.163636 353.163636 0 0 0 302.545455 453.818182l29.78909-17.105455A326.865455 326.865455 0 0 1 486.865455 228.072727zM1288.378182 374.690909a53.294545 53.294545 0 0 1-14.429091 11.636364L229.469091 989.090909a53.876364 53.876364 0 0 1-73.425455-19.665454L7.214545 710.632727a53.527273 53.527273 0 0 1 19.781819-73.309091L1071.476364 34.909091a53.876364 53.876364 0 0 1 73.425454 19.665454l148.829091 258.327273a53.061818 53.061818 0 0 1 5.352727 40.727273 55.272727 55.272727 0 0 1-10.705454 21.061818zM32.232727 665.716364A28.043636 28.043636 0 0 0 29.323636 698.181818l148.829091 257.978182a28.392727 28.392727 0 0 0 38.516364 10.356364l1044.48-601.949091a28.16 28.16 0 0 0 10.356364-38.516364L1122.676364 67.84a28.276364 28.276364 0 0 0-38.4-10.356364L39.68 659.432727a27.810909 27.810909 0 0 0-7.447273 6.283637z" fill="#2196F3" p-id="1277"></path><path d="M477.090909 500.945455l22.109091 38.283636-15.36 8.843636-13.963636-24.436363-151.272728 87.621818 14.545455 25.134545-15.243636 8.843637-23.272728-39.330909L377.949091 558.545455c-6.050909-4.887273-11.636364-8.843636-15.825455-11.636364l14.894546-12.450909c3.956364 3.141818 9.658182 8.145455 17.105454 14.894545zM459.869091 698.181818l-48.407273 28.043637 7.447273 12.334545-15.36 8.843636-61.207273-106.007272L406.225455 605.090909l-12.683637-21.876364 15.709091-9.076363 12.683636 21.876363L486.4 558.545455l60.509091 104.727272-15.36 8.843637-7.098182-12.218182-49.105454 28.392727L501.294545 733.090909l-15.70909 9.076364z m-45.381818-78.661818l-48.523637 27.461818 14.545455 25.134546 48.523636-28.043637zM388.538182 686.545455l14.545454 25.134545 48.523637-28.043636-14.545455-25.134546z m105.425454-79.476364L479.418182 581.818182 430.545455 609.861818l14.545454 25.134546z m-26.647272 67.490909l49.221818-28.392727-14.545455-25.134546-49.105454 28.392728zM624.058182 541.090909c-4.654545 6.167273-10.123636 13.149091-16.290909 20.829091l34.909091 61.207273a18.734545 18.734545 0 0 1-6.632728 29.207272l-18.734545 10.938182-11.636364-13.614545a174.545455 174.545455 0 0 0 17.454546-8.610909 8.378182 8.378182 0 0 0 2.327272-12.683637l-30.021818-52.363636-9.774545 10.24-9.890909 10.123636-12.450909-12.916363c9.076364-8.145455 16.872727-15.709091 23.272727-22.574546l-30.836364-53.527272-24.785454 14.196363-8.727273-15.010909L546.909091 492.218182l-23.272727-40.378182 15.36-8.843636 23.272727 40.378181 21.643636-12.450909 8.727273 15.127273-21.643636 12.450909L599.156364 546.909091c5.352727-6.4 10.821818-13.381818 16.290909-20.712727z m8.843636-45.032727L689.221818 593.454545a193.745455 193.745455 0 0 0 22.574546-27.112727l11.636363 13.032727a363.985455 363.985455 0 0 1-41.192727 44.8l-12.334545-12.450909a10.821818 10.821818 0 0 0 1.62909-13.730909l-98.90909-171.403636 15.476363-8.96 36.305455 62.952727 30.836363-17.803636 8.029091 15.476363z m128 81.454545a20.130909 20.130909 0 0 1-30.836363-9.541818L628.363636 392.378182l15.36-8.378182 38.050909 66.094545A206.08 206.08 0 0 0 709.818182 409.018182l16.64 7.563636a297.890909 297.890909 0 0 1-34.909091 48.64l52.712727 91.112727a8.843636 8.843636 0 0 0 13.614546 4.072728l10.821818-6.167273a14.429091 14.429091 0 0 0 7.912727-11.636364 102.981818 102.981818 0 0 0-15.010909-38.516363l17.105455-3.723637c12.334545 24.669091 17.687273 41.076364 16.058181 48.989091a28.16 28.16 0 0 1-15.127272 18.152728zM805.236364 288.116364l16.174545-9.309091 23.272727 39.330909 78.429091-45.265455 59.345455 102.749091-16.64 9.076364-7.912727-13.847273L896 407.272727l42.938182 74.472728-16.174546 9.30909-42.938181-74.472727-62.603637 36.072727 8.029091 13.73091-15.825454 9.192727L749.730909 372.363636l78.196364-45.265454z m2.676363 149.061818l62.603637-36.072727-33.745455-58.181819-62.487273 36.072728z m78.778182-45.381818l62.72-36.189091-33.745454-58.181818-62.72 36.072727z" fill="#2196F3" p-id="1278"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/simple-process-bg.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/simple-process-bg.svg
new file mode 100644
index 0000000..eb23ab5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/simple-process-bg.svg
@@ -0,0 +1 @@
+<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#FAFAFA" d="M0 0h22v22H0z"/><circle fill="#919BAE" cx="1" cy="1" r="1"/></g></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/starter.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/starter.svg
new file mode 100644
index 0000000..c12c712
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/starter.svg
@@ -0,0 +1 @@
+<svg t="1729561814171" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1359" width="200" height="200"><path d="M674.496 603.456c120.256 0 218.176 90.752 221.44 203.84l0.064 5.888v125.888c0 11.52-9.92 20.928-22.144 20.928h-44.352a21.568 21.568 0 0 1-22.144-20.928v-125.888c0-67.712-56.512-123.264-128-125.76l-4.928-0.064H349.568c-71.488 0-130.176 53.504-132.864 121.152l-0.064 4.672v125.888c0 11.52-9.92 20.928-22.144 20.928h-44.352A21.568 21.568 0 0 1 128 939.072v-125.888c0-113.92 95.872-206.528 215.36-209.664l6.208-0.064h324.928zM497.216 128c122.368 0 221.568 93.888 221.568 209.728s-99.2 209.792-221.568 209.792c-122.304 0-221.44-93.952-221.44-209.728C275.712 221.952 374.848 128 497.152 128z m0 83.904c-73.408 0-132.864 56.32-132.864 125.888 0 69.504 59.52 125.824 132.864 125.824 73.408 0 132.928-56.32 132.928-125.824 0-69.504-59.52-125.888-132.928-125.888z" fill="#fff" p-id="1360"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/bpm/transactor.svg b/marketing-ui/admin-ui/src/assets/svgs/bpm/transactor.svg
new file mode 100644
index 0000000..a9547a7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/bpm/transactor.svg
@@ -0,0 +1 @@
+<svg t="1739406626368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1300" width="200" height="200"><path d="M803.221 925.573H224.356c-68.568 0-124.352-55.784-124.352-124.353V222.356c0-68.568 55.784-124.352 124.352-124.352h355.311v64H224.356c-33.278 0-60.352 27.074-60.352 60.352V801.22c0 33.278 27.074 60.353 60.352 60.353H803.22c33.278 0 60.353-27.074 60.353-60.353V448.208h64V801.22c0 68.569-55.784 124.353-124.352 124.353z" fill="#ffffff" p-id="1301"></path><path d="M300.357 756.916l35.024-195.867L770.117 84.404c10.05-11.02 25.015-18.052 41.058-19.293 16.017-1.247 31.987 3.379 43.841 12.667l83.662 65.549c21.643 16.956 24.254 45.964 5.942 66.038l-437.613 479.8-206.65 67.751z m104.994-170.751l-13.14 73.487 69.671-22.842 415.465-455.517-59.909-46.939-412.087 451.811z" fill="#ffffff" p-id="1302"></path><path d="M732.25 220.897l41.144-49.023 81.151 68.11-41.145 49.023z" fill="#ffffff" p-id="1303"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/icon.svg b/marketing-ui/admin-ui/src/assets/svgs/icon.svg
new file mode 100644
index 0000000..7024bec
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/icon.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.147.062a13 13 0 014.94.945c1.55.63 2.907 1.526 4.069 2.688a13.148 13.148 0 012.761 4.069c.678 1.55 1.017 3.245 1.017 5.086v102.3c0 3.681-1.187 6.733-3.56 9.155-2.373 2.422-5.352 3.633-8.937 3.633H12.992c-3.875 0-7-1.26-9.373-3.779-2.373-2.518-3.56-5.667-3.56-9.445V12.704c0-3.39 1.163-6.345 3.488-8.863C5.872 1.32 8.972.062 12.847.062h102.3zM81.434 109.047c1.744 0 3.003-.412 3.778-1.235.775-.824 1.163-1.914 1.163-3.27 0-1.26-.388-2.325-1.163-3.197-.775-.872-2.034-1.307-3.778-1.307H72.57c.097-.194.145-.485.145-.872V27.09h9.01c1.743 0 2.954-.436 3.633-1.308.678-.872 1.017-1.938 1.017-3.197 0-1.26-.34-2.325-1.017-3.197-.679-.872-1.89-1.308-3.633-1.308H46.268c-1.743 0-2.954.436-3.632 1.308-.678.872-1.018 1.938-1.018 3.197 0 1.26.34 2.325 1.018 3.197.678.872 1.889 1.308 3.632 1.308h8.138v72.075c0 .193.024.339.073.436.048.096.072.242.072.436H46.56c-1.744 0-3.003.435-3.778 1.307-.775.872-1.163 1.938-1.163 3.197 0 1.356.388 2.446 1.163 3.27.775.823 2.034 1.235 3.778 1.235h34.875z"/></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/iot/card-fill.svg b/marketing-ui/admin-ui/src/assets/svgs/iot/card-fill.svg
new file mode 100644
index 0000000..4c74ecd
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/iot/card-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" class="design-iconfont" viewBox="0 0 12 12"><path fill="url(#a)" fill-rule="evenodd" d="M1 0a1 1 0 0 0-1 1v3.538a1 1 0 0 0 1 1h3.538a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1Zm0 6.462a1 1 0 0 0-1 1V11a1 1 0 0 0 1 1h3.538a1 1 0 0 0 1-1V7.462a1 1 0 0 0-1-1H1ZM6.462 1a1 1 0 0 1 1-1H11a1 1 0 0 1 1 1v3.538a1 1 0 0 1-1 1H7.462a1 1 0 0 1-1-1V1Zm1 5.462a1 1 0 0 0-1 1V11a1 1 0 0 0 1 1H11a1 1 0 0 0 1-1V7.462a1 1 0 0 0-1-1H7.462Z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="0" x2="12" y1="0" y2="12" gradientUnits="userSpaceOnUse"><stop stop-color="#1B3149"/><stop offset="1" stop-color="#717D8A"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/iot/cube.svg b/marketing-ui/admin-ui/src/assets/svgs/iot/cube.svg
new file mode 100644
index 0000000..200ac1b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/iot/cube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 12 12"><g clip-path="url(#a)"><path fill="url(#b)" fill-rule="evenodd" d="M6.958.42C6.444.216 5.61.216 5.098.42L1.15 1.975c-.77.304-.77.797 0 1.1l3.947 1.558c.514.202 1.347.202 1.86 0l3.948-1.557c.77-.304.77-.797 0-1.1L6.958.418ZM4.715 11.788a.857.857 0 0 0 .3.056c.383 0 .671-.295.671-.7V6.404c0-.49-.364-1.007-.817-1.177L1.09 3.805a.808.808 0 0 0-.284-.056c-.353 0-.581.275-.581.7V9.19c0 .508.33 1.014.763 1.177l3.726 1.422Zm2.229-.024h-.02l.073.003c.074.004.154.009.227-.019L11 10.367c.45-.168.83-.686.83-1.177V4.45c0-.413-.29-.7-.673-.7a.965.965 0 0 0-.317.055l-3.72 1.422c-.44.165-.75.67-.75 1.177v4.74c0 .42.218.621.575.621Z" clip-rule="evenodd"/></g><defs><linearGradient id="b" x1=".226" x2="11.803" y1=".267" y2="11.871" gradientUnits="userSpaceOnUse"><stop stop-color="#1B3149"/><stop offset="1" stop-color="#717D8A"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h12v12H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/login-bg.svg b/marketing-ui/admin-ui/src/assets/svgs/login-bg.svg
new file mode 100644
index 0000000..bbe06c1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/login-bg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="5760" height="3040"><image width="5760" height="3040" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFoAAAAvgAQMAAAC1QKagAAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUsNEr///91v/yPAAAA AWJLR0QB/wIt3gAAAAd0SU1FB+YBBQYyN1c3BnEAAAhjSURBVHja7cExAQAAAMKg9U9tDB+gAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAACAtwFzzwABY3VrRQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMS0wNVQwNjo1 MDo1MyswMDowMCfNlVoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDEtMDVUMDY6NTA6NTQrMDA6 MDCTNxNoAAAAAElFTkSuQmCC"/></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/login-box-bg.svg b/marketing-ui/admin-ui/src/assets/svgs/login-box-bg.svg
new file mode 100644
index 0000000..ab10040
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/login-box-bg.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 700 700" xml:space="preserve" enable-background="new 0 0 700 700"><style>.st0{fill:#e5e6eb}.st1{fill:#fff}.st2{fill:#84a9ff}.st3{fill:#050f64}.st4{fill:#155bcd}.st5{fill:#ffbd00}.st6{fill:#ff654f}.st9{fill:#f5bdc8}.st10{fill:#ea8096}.st11{opacity:0}.st13{fill:#dca000}</style><path class="st0" d="M101.8 176.7c21.4-19.8 48.8-33.2 77.8-37.2 92.4-12.6 158.2 78.1 240.3 104.9 40.8 13.3 85.4 12.6 125.4 28 68.5 26.2 131.4 117.8 101 191.6-23.7 57.5-79.6 71.8-134.6 54-33.5-10.9-64.1-29.4-97.6-40.5-38.1-12.6-78.7-15.1-118.9-16.7s-80.6-2.4-119.6-12-77-28.9-101.2-60.9C40.8 343.4 48 260.8 73.1 213.7c7.4-13.9 17.2-26.3 28.7-37z"/><path class="st1" d="M82 257.1c5.7-23.2 18.9-44.7 37.3-60.4l1.7-1.5 1.8-1.4 1.8-1.4 1.8-1.3c.6-.4 1.2-.9 1.8-1.3l1.9-1.3c.6-.4 1.2-.9 1.9-1.3l1.9-1.2c5.1-3.2 10.5-6 16.1-8.4 11.1-4.7 23-7.8 35.1-9 12.1-1.1 24.3-.5 36.1 1.5 5.9 1 11.8 2.4 17.6 4 .7.2 1.5.4 2.2.6l2.2.7 2.2.7 2.1.7 2.1.7 2.1.8 2.1.8 2.1.8c5.6 2.2 11.1 4.6 16.5 7.2 5.4 2.6 10.7 5.4 15.9 8.3 10.4 5.9 20.6 12.2 30.5 18.8-10.4-5.9-20.7-11.8-31.4-17.2-5.3-2.7-10.7-5.3-16.1-7.7-5.4-2.4-10.9-4.7-16.5-6.7l-2.1-.8-2.1-.7-2.1-.7-2.1-.7-2.1-.7-2.1-.6-2.1-.6-2.1-.6c-5.7-1.5-11.5-2.8-17.3-3.7-11.6-1.9-23.5-2.5-35.2-1.3-11.7 1.1-23.2 4-34.1 8.5-5.4 2.2-10.7 4.9-15.8 7.9l-1.9 1.1c-.6.4-1.2.8-1.9 1.2l-1.8 1.2c-.6.4-1.2.8-1.8 1.3l-1.8 1.3-1.8 1.3-1.8 1.3-1.7 1.4c-18.2 15.2-32 35.7-39.1 58.4z"/><path class="st2" d="M183.1 543.2c-.3 1.2-.5 1.8-.5 1.8-.7-.5-1.4-.9-2.1-1.4-120.8-82.8-72.6-232.2-72.6-232.2 115.7 67.3 80.1 213.8 75.2 231.8z"/><path class="st3" d="M183.1 543.2c-.3 1.2-.5 1.8-.5 1.8-.7-.5-1.4-.9-2.1-1.4-10.1-29.9-20.1-59.8-29.8-89.8-5-15.5-10-31.1-14.8-46.7l-3.6-11.7-3.5-11.7c-1.2-3.9-2.2-7.8-3.4-11.8-.6-2-1.1-3.9-1.6-5.9l-1.6-5.9 1.6 5.9c.5 2 1.1 3.9 1.7 5.9 1.2 3.9 2.3 7.8 3.5 11.7l3.6 11.7 3.7 11.7c5 15.5 10.2 31 15.4 46.5 10.4 30 20.8 59.9 31.4 89.7zM137.9 384.9c-.1 0-.2 0-.4-.1-.3-.1-.4-.5-.2-.8 3.7-7.2 6-15.3 6.7-23.4 0-.3.3-.5.6-.5s.5.3.5.6c-.7 8.2-3.1 16.5-6.9 23.8 0 .3-.2.4-.3.4zM154 430.5h-.3c-.3-.1-.4-.5-.3-.7 3.4-8.3 7.6-16.4 12.3-24.1.2-.3.5-.3.8-.2.3.2.3.5.2.8-4.7 7.6-8.8 15.6-12.2 23.9-.1.1-.3.3-.5.3zM137.4 440.3h-.3c-9.5-3.9-18.3-9.3-26.1-16.1-.2-.2-.3-.6-.1-.8.2-.2.6-.3.8-.1 7.7 6.7 16.3 12 25.7 15.9.3.1.4.5.3.7 0 .2-.1.3-.3.4zM125.9 390.5c-.2.1-.4.1-.6-.1l-19.2-15c-.2-.2-.3-.6-.1-.8.2-.2.6-.3.8-.1l19.2 15c.2.2.3.6.1.8 0 .1-.1.2-.2.2zM170.7 478.4h-.3c-.3-.1-.4-.5-.3-.7l10.1-23.5c.1-.3.5-.4.7-.3.3.1.4.5.3.7l-10.1 23.5c0 .1-.2.3-.4.3zM151.6 481.6h-.3l-24.3-10c-.3-.1-.4-.5-.3-.7.1-.3.5-.4.7-.3l24.3 10c.3.1.4.5.3.7-.1.1-.3.3-.4.3z"/><path class="st4" d="M182.3 543.2c.3 1.2.4 1.9.4 1.9-.8-.1-1.7-.2-2.5-.3C35 525 11 369.8 11 369.8c133.5 8.2 167.5 155.1 171.3 173.4z"/><path class="st1" d="M182.3 543.2c.3 1.2.4 1.9.4 1.9-.8-.1-1.7-.2-2.5-.3-22.5-22.1-44.8-44.4-66.9-66.8-11.5-11.6-22.9-23.3-34.2-35.1l-8.5-8.8-8.4-8.9c-2.8-3-5.5-6-8.3-9-1.4-1.5-2.7-3-4.1-4.6l-4-4.6 4.1 4.5c1.4 1.5 2.7 3 4.1 4.5 2.8 3 5.6 6 8.4 8.9l8.5 8.8 8.6 8.7c11.5 11.6 23 23.1 34.7 34.6 22.5 22.2 45.2 44.3 68.1 66.2zM70.7 422.1c-.1.1-.2.1-.3.1-.3 0-.6-.3-.6-.6.1-8.1-1.5-16.4-4.5-23.9-.1-.3 0-.6.3-.7.3-.1.6 0 .7.3 3 7.7 4.6 16.1 4.6 24.4 0 .1-.1.3-.2.4zM105.6 455.5c-.1.1-.2.1-.3.1-.3 0-.6-.2-.6-.5-.7-9-.6-18.1.2-27 0-.3.3-.5.6-.5s.5.3.5.6c-.8 8.9-.9 17.9-.2 26.8.1.2 0 .4-.2.5zM95.2 471.7c-.1.1-.2.1-.3.1-10.3.8-20.5-.1-30.5-2.7-.3-.1-.5-.4-.4-.7.1-.3.4-.5.7-.4 9.9 2.5 20 3.4 30.1 2.6.3 0 .6.2.6.5 0 .4-.1.5-.2.6zM62.6 432.4c-.1.1-.3.2-.5.2l-23.9-4.8c-.3-.1-.5-.4-.4-.7.1-.3.4-.5.7-.4l23.9 4.8c.3.1.5.4.4.7-.1.1-.1.2-.2.2zM142.1 490.8c-.1.1-.2.1-.3.1-.3 0-.6-.2-.6-.5l-1.5-25.5c0-.3.2-.6.5-.6s.6.2.6.5l1.5 25.5c0 .2-.1.4-.2.5zM126.4 502.3c-.1.1-.2.1-.3.1l-26.2 2c-.3 0-.6-.2-.6-.5s.2-.6.5-.6l26.2-2c.3 0 .6.2.6.5 0 .2-.1.4-.2.5z"/><g><path class="st5" d="M259.6 503.3c1.2.5 1.8.7 1.8.7-.5.7-1.1 1.3-1.7 1.9C164 616.8 20.9 552.3 20.9 552.3c79.7-107.4 221.4-55.9 238.7-49z"/><path class="st1" d="M259.6 503.3c1.2.5 1.8.7 1.8.7-.5.7-1.1 1.3-1.7 1.9-30.8 6.8-61.6 13.3-92.5 19.7-16 3.3-32 6.5-48 9.6l-12 2.3-12 2.2c-4 .7-8 1.4-12.1 2-2 .4-4 .6-6 .9l-6.1.9 6-1c2-.3 4-.6 6-1 4-.7 8-1.4 12-2.2l12-2.3 12-2.4c16-3.3 31.9-6.7 47.9-10.2 31-6.9 61.9-13.9 92.7-21.1zM97.3 530.8c0 .1 0 .2-.1.3-.2.3-.5.3-.8.2-6.8-4.5-14.6-7.7-22.5-9.3-.3-.1-.5-.4-.4-.7.1-.3.4-.5.7-.4 8.1 1.6 16 4.9 22.9 9.5.1 0 .1.2.2.4zM144.3 519.7c0 .1 0 .2-.1.3-.2.3-.5.4-.8.2-7.9-4.3-15.5-9.4-22.5-14.9-.2-.2-.3-.6-.1-.8.2-.2.6-.3.8-.1 7 5.5 14.6 10.5 22.4 14.8.2.1.3.3.3.5zM152.2 537.3c0 .1 0 .2-.1.3-4.9 9-11.3 17.2-18.8 24.1-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8 7.5-6.9 13.7-14.9 18.6-23.8.2-.3.5-.4.8-.2.2.1.3.3.3.4zM101.5 543.2c.1.2 0 .4-.1.6l-17 17.5c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8l17-17.5c.2-.2.6-.2.8 0 .1 0 .1.1.1.2zM193.8 508.4c0 .1 0 .2-.1.3-.2.3-.5.4-.8.2l-22.2-12.7c-.3-.2-.4-.5-.2-.8.2-.3.5-.4.8-.2l22.2 12.7c.2.2.3.3.3.5zM194.9 527.8c0 .1 0 .2-.1.3l-12.7 23.1c-.2.3-.5.4-.8.2-.3-.2-.4-.5-.2-.8l12.7-23.1c.2-.3.5-.4.8-.2.1.2.3.3.3.5z"/></g><g><path class="st2" d="M608.8 430.3c-1 .2-2.4-.3-4.4-1.4-3.2-1.9-8.3-4.9-10.2-6.1 3 6.3 5.8 12.7 8.3 19.2 4.5-1 7.9-.1 10.1 1.4 2.2 1.5 3.3 3.6 3.3 4.6-.1 2-1.8 2.4-4.9.3-1.6-1.1-3.7-2.6-5.5-3.9-1.3-.9-2.3-1.7-2.8-2 .8 2 1.5 4 2.2 6h.2c1.3.2 3.1 3.1 3.9 4.1 1.7 2.3 3 4.9 3.2 7.8.1 1.2-.1 2.6-1.2 3.2-1.2.6-2.6-.3-3.5-1.3-2.5-2.8-4-6.5-4.1-10.2 0-1-.1-3.3 1.2-3.5-.8-2-1.5-3.9-2.3-5.9-.1.6-.4 1.9-.7 3.4-.5 2.1-1.1 4.7-1.7 6.4-1.1 3.5-2.7 4.1-4 2.8-.7-.7-1.1-2.7-.3-5.2.8-2.4 2.6-5.3 6.6-7.7-2.7-6.4-5.6-12.7-8.8-18.9-.1.8-.3 2.2-.5 3.7-.3 2.6-.9 5.7-1.4 7.8-.5 2.1-1.2 3.4-2 4-.8.6-1.7.4-2.5-.3-.9-.7-1.6-3.1-.9-6.2.6-2.9 2.6-6.5 7-9.6-3.5-6.6-7.2-13.1-11.2-19.4v.3c0 1 0 2.5-.1 4.1-.1 1.6-.2 3.4-.3 5-.1 1.7-.4 3.3-.5 4.6-.8 5.3-3 6.6-5.2 5-1.2-.8-2.1-3.7-1.7-7.4.2-1.9.9-4 2.2-6.2 1.1-2 2.8-4.2 5.2-6.3-3.8-5.8-7.8-11.5-12-17 .1 1.2.2 2.8.2 4.6.1 1.8.1 3.9.1 5.8v2.8c0 .9-.1 1.8-.1 2.5-.4 6.1-2.8 7.8-5.5 6.2-.7-.4-1.4-1.4-1.9-2.8s-.8-3.3-.7-5.4c.1-2.2.7-4.6 1.9-7.3 1.1-2.4 2.8-5 5.2-7.6-4.2-5.4-8.5-10.5-13.1-15.5l2-1.8c4.5 5.2 8.8 10.5 12.9 16 3.1-1.6 6.1-2.5 8.8-2.7 3-.3 5.6.1 7.8.9s4 1.9 5.3 3.1c1.2 1.2 2 2.4 2.2 3.3.7 3.5-2 4.7-8 2.5-3.1-1.2-7.3-2.8-10.7-4.2-1.7-.6-3.3-1.2-4.4-1.6 4.1 5.6 8 11.5 11.6 17.4 2.9-1.2 5.6-1.7 8-1.8 2.6 0 4.8.5 6.7 1.4 3.8 1.7 5.8 4.5 6 6 .3 3.1-2 4-7.1 1.6-2.6-1.3-6.1-3-9-4.4-1.4-.7-2.8-1.3-3.7-1.8-.1 0-.1-.1-.2-.1 3.9 6.4 7.5 13 10.8 19.8 5.1-1.6 9.2-.9 12 .7 2.8 1.6 4.3 4 4.4 5.2-.7 1.1-1.2 1.8-2.2 2z"/></g><g><path class="st2" d="M552.1 373.7c-.5 1.1-.8 1.7-.8 1.7l-1.8-1.8c-105.3-101.8-32.8-241.1-32.8-241.1 102.7 85.7 43.2 224.2 35.4 241.2z"/><path class="st1" d="M552.1 373.7c-.5 1.1-.8 1.7-.8 1.7l-1.8-1.8c-5-31.1-9.8-62.3-14.4-93.5-2.4-16.1-4.7-32.3-6.8-48.5l-1.6-12.1-1.5-12.2c-.5-4.1-.9-8.1-1.4-12.2-.2-2-.4-4.1-.6-6.1l-.5-6.1.6 6.1c.2 2 .4 4.1.7 6.1.5 4 1 8.1 1.5 12.1l1.6 12.1 1.7 12.1c2.4 16.1 4.9 32.3 7.5 48.4 5.1 31.4 10.3 62.7 15.8 93.9zM533.9 210c-.1 0-.2 0-.3-.1-.3-.2-.3-.5-.1-.8 4.9-6.5 8.5-14.1 10.6-21.9.1-.3.4-.5.7-.4.3.1.5.4.4.7-2.1 8-5.8 15.7-10.7 22.3-.3.1-.5.2-.6.2zM542.2 257.6c-.1 0-.2 0-.3-.1-.3-.2-.3-.5-.2-.8 4.8-7.6 10.2-14.9 16.2-21.7.2-.2.6-.3.8-.1.2.2.3.6.1.8-5.9 6.7-11.3 13.9-16.1 21.5-.1.3-.3.4-.5.4zM524.2 264.5c-.1 0-.2 0-.3-.1-8.7-5.4-16.5-12.2-23-20.2-.2-.2-.2-.6.1-.8.2-.2.6-.2.8.1 6.4 7.9 14.1 14.6 22.7 19.9.3.2.3.5.2.8-.2.2-.4.3-.5.3zM521.2 213.5c-.2 0-.4 0-.5-.2l-16.5-18c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l16.5 18c.2.2.2.6 0 .8-.1.2-.2.2-.3.2zM550.7 307.7c-.1 0-.2 0-.3-.1-.3-.2-.3-.5-.2-.8l13.9-21.5c.2-.3.5-.3.8-.2.3.2.3.5.2.8l-13.9 21.5c-.1.2-.3.3-.5.3zM531.2 307.6c-.1 0-.2 0-.3-.1l-22.3-13.9c-.3-.2-.3-.5-.2-.8.2-.3.5-.3.8-.2l22.3 13.9c.3.2.3.5.2.8-.1.2-.3.3-.5.3z"/><g><path class="st4" d="M526.6 382.8c-1 .7-1.6 1-1.6 1-.2-.8-.4-1.6-.6-2.5-35-142.2 100.5-221.5 100.5-221.5 41.5 127.2-82.7 212.8-98.3 223z"/><path class="st3" d="M526.6 382.8c-1 .7-1.6 1-1.6 1-.2-.8-.4-1.6-.6-2.5 12.3-29 24.8-58 37.5-86.8 6.6-14.9 13.3-29.8 20-44.7l5.1-11.1 5.2-11.1c1.7-3.7 3.6-7.3 5.3-11 .9-1.8 1.8-3.6 2.7-5.5l2.8-5.4-2.7 5.5c-.9 1.8-1.8 3.6-2.7 5.5-1.7 3.7-3.5 7.4-5.2 11.1l-5.1 11.1-5 11.2c-6.6 14.9-13 29.9-19.4 44.9-12.2 29.2-24.3 58.5-36.3 87.8zM598.2 234.5c-.1-.1-.2-.2-.2-.3-.1-.3 0-.6.3-.7 7.6-2.9 14.7-7.4 20.6-13 .2-.2.6-.2.8 0 .2.2.2.6 0 .8-6 5.7-13.3 10.2-21 13.2-.1.1-.3.1-.5 0zM580 279.3c-.1-.1-.2-.1-.2-.2-.1-.3 0-.6.3-.8 8.1-3.9 16.6-7.2 25.2-9.7.3-.1.6.1.7.4.1.3-.1.6-.4.7-8.6 2.5-17 5.8-25 9.7-.3 0-.5 0-.6-.1zM561 275.5c-.1-.1-.2-.1-.2-.3-4.5-9.3-7.4-19.1-8.7-29.3 0-.3.2-.6.5-.6s.6.2.6.5c1.3 10.1 4.2 19.8 8.6 29 .1.3 0 .6-.3.8-.1 0-.3 0-.5-.1zM585.6 230.8c-.2-.1-.3-.2-.4-.4l-4.4-24c-.1-.3.1-.6.5-.7.3-.1.6.1.7.5l4.4 24c.1.3-.1.6-.5.7-.1-.1-.2-.1-.3-.1zM560.5 326.2c-.1-.1-.2-.1-.2-.2-.1-.3 0-.6.3-.8l23.2-10.8c.3-.1.6 0 .8.3.1.3 0 .6-.3.8l-23.2 10.8c-.2 0-.4 0-.6-.1zM544.1 315.8c-.1-.1-.2-.1-.2-.2l-11.5-23.7c-.1-.3 0-.6.3-.8.3-.1.6 0 .8.3l11.5 23.7c.1.3 0 .6-.3.8-.2 0-.5 0-.6-.1z"/></g><g><path class="st5" d="M482.2 415.1c-1.2 0-1.9-.1-1.9-.1l.9-2.4C532.4 275.4 689 286.2 689 286.2c-37.4 128.5-188.2 129.3-206.8 128.9z"/><path class="st1" d="M482.2 415.1c-1.2 0-1.9-.1-1.9-.1l.9-2.4c26.5-17 53.2-33.9 79.9-50.6 13.9-8.6 27.8-17.2 41.7-25.6l10.5-6.3 10.5-6.2c3.5-2.1 7.1-4.1 10.6-6.1 1.8-1 3.6-2 5.3-3l5.4-2.9-5.3 3c-1.8 1-3.6 2-5.3 3-3.5 2.1-7 4.1-10.5 6.2l-10.5 6.4-10.4 6.4c-13.8 8.6-27.6 17.4-41.4 26.2-26.6 17.2-53.1 34.5-79.5 52zM624.9 333c0-.1-.1-.2 0-.4.1-.3.4-.5.7-.4 7.9 1.8 16.3 2.2 24.3.9.3 0 .6.2.7.5 0 .3-.2.6-.5.7-8.2 1.3-16.7 1-24.8-.9l-.4-.4zM584.6 359.7c0-.1-.1-.2 0-.3 0-.3.3-.5.6-.5 8.9 1.3 17.8 3.4 26.3 6.2.3.1.5.4.4.7-.1.3-.4.5-.7.4-8.5-2.7-17.3-4.8-26.1-6.1-.3-.1-.4-.3-.5-.4zM571.1 345.9c-.1-.1-.1-.2-.1-.3 1.5-10.2 4.6-20 9.3-29.2.1-.3.5-.4.8-.2.3.1.4.5.2.8-4.6 9.1-7.7 18.7-9.2 28.8 0 .3-.3.5-.6.5-.2-.2-.4-.3-.4-.4zM616.6 322.8c-.1-.2-.1-.4-.1-.6l9.9-22.3c.1-.3.5-.4.8-.3.3.1.4.5.3.8l-9.9 22.3c-.1.3-.5.4-.8.3l-.2-.2zM542.1 387.4c0-.1-.1-.2 0-.3.1-.3.3-.5.7-.5l25.2 4.2c.3.1.5.3.5.7-.1.3-.3.5-.7.5l-25.2-4.2c-.3-.1-.4-.2-.5-.4zM534.4 369.6c0-.1-.1-.2 0-.3l3.9-26c0-.3.3-.5.6-.5s.5.3.5.6l-3.9 26c0 .3-.3.5-.6.5s-.4-.2-.5-.3z"/></g></g><g><path class="st2" d="M445 229c-.1 1 .4 2.4 1.6 4.3 2.1 3.1 5.4 8 6.6 9.9-6.4-2.7-13-5.1-19.6-7.3.8-4.5-.3-7.9-1.9-10-1.6-2.2-3.7-3.1-4.8-3-2 .2-2.3 1.9 0 4.9 1.1 1.5 2.8 3.5 4.2 5.3 1 1.2 1.8 2.2 2.2 2.7-2-.7-4.1-1.3-6.1-1.9v-.2c-.3-1.3-3.3-3-4.3-3.7-2.4-1.6-5.1-2.7-7.9-2.8-1.2 0-2.6.3-3.1 1.4-.5 1.2.5 2.6 1.5 3.4 2.9 2.4 6.7 3.6 10.4 3.5 1 0 3.3 0 3.5-1.4 2 .7 4 1.3 6 2-.6.2-1.9.5-3.4.9-2.1.6-4.6 1.4-6.3 2-3.4 1.3-4 2.9-2.6 4.2.7.6 2.8 1 5.2 0 2.4-.9 5.2-2.9 7.3-7 6.6 2.3 13 4.9 19.3 7.7-.8.1-2.2.4-3.7.7-2.5.5-5.6 1.2-7.7 1.8-2.1.6-3.3 1.4-3.9 2.2-.5.8-.4 1.7.4 2.5s3.2 1.4 6.2.5c2.9-.8 6.3-2.9 9.3-7.5 6.8 3.1 13.5 6.5 20 10.2h-.3c-1 .1-2.5.2-4.1.4-1.6.2-3.3.4-5 .6-1.7.2-3.3.5-4.6.8-5.2 1.1-6.4 3.3-4.7 5.5.9 1.1 3.8 1.9 7.5 1.3 1.9-.3 4-1.1 6.1-2.5 2-1.3 4-3 6-5.5 6 3.4 11.9 7.1 17.7 11.1h-4.6c-1.8 0-3.9.1-5.8.2-1 .1-1.9.1-2.8.2-.9.1-1.7.2-2.5.3-6.1.8-7.6 3.2-5.9 5.8.4.7 1.5 1.3 2.9 1.7 1.5.4 3.3.7 5.5.4 2.2-.3 4.6-.9 7.2-2.3 2.3-1.2 4.8-3 7.3-5.6 5.6 3.9 11 8 16.2 12.3l1.7-2.1c-5.4-4.2-11-8.2-16.7-12 1.4-3.2 2.1-6.2 2.2-8.9.1-3-.4-5.6-1.3-7.7-.9-2.1-2.1-3.9-3.4-5.1-1.3-1.2-2.5-1.9-3.4-2-3.5-.5-4.6 2.2-2 8.1 1.4 3 3.2 7.1 4.8 10.5.7 1.7 1.4 3.2 1.9 4.3-5.9-3.8-11.9-7.4-18-10.7 1-3 1.4-5.7 1.3-8.1-.1-2.6-.8-4.8-1.7-6.6-1.9-3.7-4.8-5.5-6.3-5.6-3.1-.2-3.9 2.3-1.2 7.2 1.4 2.5 3.3 5.9 4.9 8.8.8 1.4 1.5 2.7 2 3.6 0 .1.1.1.1.2-6.6-3.5-13.4-6.8-20.3-9.7 1.3-5.2.4-9.2-1.3-11.9-1.8-2.8-4.2-4.1-5.4-4.1-1.6.3-2.3.8-2.4 1.8z"/></g><g><path class="st2" d="M100.2 255.8c1-.1 2.4.5 4.3 1.8 3 2.2 7.8 5.7 9.6 7-2.4-6.5-4.6-13.2-6.4-19.9-4.6.6-7.9-.6-9.9-2.3-2.1-1.7-3-3.9-2.8-4.9.3-2 2-2.2 4.9.2 1.5 1.2 3.4 3 5.1 4.4 1.2 1 2.2 1.9 2.6 2.3-.6-2.1-1.1-4.1-1.6-6.2h-.2c-1.3-.3-2.8-3.4-3.5-4.5-1.5-2.4-2.5-5.2-2.5-8 0-1.2.4-2.6 1.5-3 1.3-.5 2.6.6 3.4 1.6 2.3 3 3.3 6.8 3.1 10.5-.1 1-.2 3.3-1.5 3.4.6 2 1.2 4.1 1.8 6.1.2-.6.6-1.9 1-3.4.7-2.1 1.6-4.5 2.3-6.2 1.4-3.4 3.1-3.9 4.3-2.4.6.7.8 2.8-.2 5.2-1 2.4-3.1 5-7.3 7 2 6.6 4.4 13.2 6.9 19.6.2-.8.5-2.2.8-3.7.6-2.5 1.4-5.6 2.1-7.6.7-2.1 1.5-3.3 2.4-3.8.9-.5 1.7-.3 2.5.5s1.2 3.3.3 6.2c-.9 2.8-3.2 6.2-7.8 8.9 2.8 6.9 5.9 13.8 9.3 20.4v-.3c.1-1 .3-2.4.5-4s.5-3.3.8-5c.3-1.7.7-3.3 1-4.6 1.3-5.2 3.6-6.3 5.7-4.5 1.1.9 1.8 3.9 1 7.5-.4 1.8-1.3 3.9-2.8 6-1.3 1.9-3.2 3.9-5.8 5.8 3.2 6.2 6.6 12.2 10.3 18.1 0-1.2.1-2.8.2-4.6.1-1.8.3-3.9.5-5.8.1-1 .2-1.9.3-2.8.1-.9.3-1.7.4-2.5 1-6 3.5-7.5 6.1-5.6.6.5 1.2 1.5 1.6 3 .3 1.5.5 3.3.2 5.5s-1.1 4.5-2.6 7.1c-1.3 2.3-3.2 4.7-5.9 7 3.6 5.7 7.5 11.3 11.6 16.7l-2.2 1.6c-4-5.6-7.8-11.3-11.3-17.2-3.3 1.3-6.3 1.9-9 1.9-3 0-5.6-.6-7.7-1.6-2.1-1-3.8-2.3-4.9-3.6-1.1-1.3-1.8-2.6-1.8-3.4-.3-3.5 2.4-4.5 8.2-1.7 2.9 1.5 7 3.5 10.3 5.2 1.7.8 3.1 1.5 4.2 2-3.6-6-6.9-12.2-9.9-18.5-3 .9-5.7 1.2-8.1 1-2.6-.2-4.7-1-6.5-2-3.6-2-5.3-5-5.4-6.6 0-3.1 2.4-3.8 7.2-.9 2.4 1.5 5.8 3.5 8.6 5.2 1.4.9 2.6 1.6 3.5 2.1.1 0 .1.1.2.1-3.3-6.8-6.2-13.7-8.8-20.7-5.3 1.1-9.2 0-11.9-1.8-2.7-1.9-3.9-4.4-3.8-5.6-.1-.9.5-1.6 1.5-1.7z"/></g><g><path class="st4" d="M106.8 558.3c0 13.1 8.1 23.7 18.2 23.7h455c10.1 0 18.2-10.6 18.2-23.7H106.8z"/><path class="st2" d="M155.4 290.9H549.6V538.5H155.4z"/><path class="st3" d="M556.6 264.8h-408c-7.6 0-13.8 6.2-13.8 13.8V540c0 7.6 6.2 13.8 13.8 13.8h408c7.6 0 13.8-6.2 13.8-13.8V278.6c0-7.7-6.2-13.8-13.8-13.8z"/><path class="st1" d="M155.4 285.5H549.6V533.1H155.4z"/><path class="st0" d="M295.7 558.3L196.6 558.3 196.9 553.9 197.3 548.4 294.9 548.4zM508.6 558.3L409.4 558.3 409.8 553.9 410.2 548.4 507.8 548.4z"/></g><g><path class="st0" d="M188 451.7H222.4V455.59999999999997H188zM235 451.7H269.4V455.59999999999997H235zM328.6 451.7H353.5V455.59999999999997H328.6zM374.8 451.7H413.5V455.59999999999997H374.8zM342.3 465.1H359.90000000000003V469H342.3zM342.3 475.3H359.90000000000003V479.2H342.3zM342.3 485.6H359.90000000000003V489.5H342.3zM342.3 495.8H359.90000000000003V499.7H342.3z"/><path class="st6" d="M209.7 465.1H222.39999999999998V469H209.7z"/><path class="st2" d="M209.7 475.3H222.39999999999998V479.2H209.7z"/><path class="st4" d="M209.7 485.6H222.39999999999998V489.5H209.7z"/><path class="st5" d="M209.7 495.8H222.39999999999998V499.7H209.7z"/><path class="st0" d="M399.7 465.1H417.3V469H399.7zM399.7 475.3H417.3V479.2H399.7zM399.7 485.6H417.3V489.5H399.7zM399.7 495.8H417.3V499.7H399.7zM234.6 465.1H252.2V469H234.6zM234.6 475.3H260.7V479.2H234.6zM234.6 485.6H267.5V489.5H234.6zM234.6 495.8H249.7V499.7H234.6zM180.4 314.6H306V321.5H180.4z"/><path class="st4" d="M180.4 340.4H198.20000000000002V347.9H180.4zM216.1 340.4H233.9V347.9H216.1zM251.8 340.4H269.6V347.9H251.8zM287.5 340.4H305.3V347.9H287.5zM323.3 340.4H341.1V347.9H323.3zM359 340.4H376.8V347.9H359zM394.7 340.4H412.5V347.9H394.7z"/><g><path class="st0" d="M180.4 355.7H430.20000000000005V358H180.4z"/></g><g><path class="st0" d="M427.7 446.2H181v-90.4h-2v92.5h250.7v-92.5h-2v90.4z"/><path class="st0" d="M405.1 355.7H407.1V447.2H405.1zM382.4 355.7H384.5V447.2H382.4zM359.8 355.7H361.8V447.2H359.8zM337.2 355.7H339.2V447.2H337.2zM314.6 355.7H316.6V447.2H314.6zM292 355.7H294V447.2H292zM269.4 355.7H271.4V447.2H269.4zM246.8 355.7H248.8V447.2H246.8zM224.2 355.7H226.2V447.2H224.2zM201.6 355.7H203.7V447.2H201.6z"/><path class="st0" d="M179 355.7H429.7V357.7H179zM180 378.4H428.7V380.4H180zM180 401H428.7V403H180zM180 423.6H428.7V425.6H180z"/><g><path class="st2" d="M203.6 396.2H219.79999999999998V446.3H203.6zM248.8 385.8H265V446.3H248.8zM294.1 410.5H310.3V446.3H294.1zM339.3 373.7H355.5V446.29999999999995H339.3zM384.5 393.3H400.7V446.3H384.5z"/></g><g><path class="st6" d="M201.6 396.2H217.79999999999998V446.3H201.6zM246.8 385.8H263V446.3H246.8zM292 410.5H308.2V446.3H292zM337.2 373.7H353.4V446.29999999999995H337.2zM382.5 393.3H398.7V446.3H382.5z"/></g></g><g><path class="st0" d="M179 471.1H429.7V473.20000000000005H179z"/></g><g><path class="st0" d="M179 481.3H429.7V483.40000000000003H179z"/></g><g><path class="st0" d="M179 491.6H429.7V493.70000000000005H179z"/></g><g><path class="st0" d="M179 501.8H429.7V503.90000000000003H179z"/></g><g><path class="st6" d="M473.5 352.4c.9-5.5 5.4-9.8 10.9-10.6l-.2-5.1-.5-12.6c-14.7 1.2-26.4 12.7-27.9 27.2l12.6.8 5.1.3z"/><path class="st5" d="M491.1 366.7c-1.5.6-3.1.9-4.8.9-2.9 0-5.6-.9-7.7-2.5l-3.5 3.8-8.5 9.2c5.3 4.5 12.2 7.2 19.7 7.2 4.7 0 9.1-1 13-2.9l-5.9-11.1-2.3-4.6zM516.3 361.3l-12.4-2.1c-1.2 4.6-4 8.4-7.9 10.9l5.9 11.1 2.7 5.2c8.8-5.1 15.3-13.8 17.5-24.1l-5.8-1z"/><path class="st6" d="M468.2 354.9l-12.6-.8-5.9-.4v.9c0 10.1 4.1 19.3 10.7 25.9l4-4.3 8.5-9.2c-2.8-3.2-4.6-7.4-4.7-12.1z"/><path class="st4" d="M495.9 339.3l-2.4 4.6c3.5 2.3 5.7 6.3 5.7 10.8v.8l5.1.9 12.4 2.1c.2-1.3.2-2.5.2-3.8 0-11.3-6.1-21.2-15.2-26.5l-5.8 11.1zM487 336.6c2.3.1 4.4.6 6.4 1.4l5.8-11.2 2.7-5.2c-4.7-2.3-10-3.5-15.7-3.5l.2 5.9.6 12.6z"/></g><g><path class="st0" d="M446.7 407.2H525.1V411.09999999999997H446.7zM446.7 441.5H450.59999999999997V445.4H446.7zM454.4 441.5H525.1V445.4H454.4z"/><path class="st4" d="M446.7 456.1H450.59999999999997V460H446.7z"/><path class="st0" d="M454.4 456.1H525.1V460H454.4z"/><path d="M446.7 470.8H450.59999999999997V474.7H446.7z" style="fill:#6292ff"/><path class="st0" d="M454.4 470.8H525.1V474.7H454.4z"/><path d="M446.7 485.4H450.59999999999997V489.29999999999995H446.7z" style="fill:#da5544"/><path class="st0" d="M454.4 485.4H525.1V489.29999999999995H454.4z"/><path class="st5" d="M446.7 500H450.59999999999997V503.9H446.7z"/><path class="st0" d="M454.4 500H525.1V503.9H454.4zM446.7 417.7H525.1V430.7H446.7z"/></g></g><g><path class="st3" d="M522.8 556.7c.3-.3.7-.5 1.1-.6.4-.1.8-.1 1.3-.1 1-.1 2-.3 2.9-.8.5-.3.9-.6 1.4-.8l2.9.1c.4.4.7 1 .8 1.6.1.5.1 1.1.1 1.6v.6h-10.8v-.6c0-.4 0-.8.3-1z"/><path class="st9" d="M532.7 551.2L532.4 554.5 529.4 554.4 529.2 551.4z"/><path class="st3" d="M494 555.5c.3-.3.7-.4 1.1-.5.4 0 .8 0 1.3.1 1 .1 2.1-.1 3-.5.5-.2 1-.5 1.5-.6l2.9.4c.4.5.5 1.1.6 1.7.1.5 0 1.1-.1 1.6l-.1.6-10.7-1.2.1-.6c0-.4.1-.8.4-1z"/><path class="st4" d="M535.3 503.7c.6-11.4.5-27.5-2.6-36.6 0-.2-23.9 2-23.9 2l-5.6 22.9c-2 8.1-2.9 16.3-2.8 24.6l.3 34.4 4 .3 7.5-45.5c2.8-5.4 5.8-11.6 8.1-17.7l8.7 63.4 4-.2c0-.1 2.3-47.6 2.3-47.6z"/><path class="st9" d="M504.5 551.2L503.8 554.4 500.9 554 501 551z"/><path class="st10" d="M481.6 394.3c.7-.3 1.6 0 1.9.7 2 4 4.2 7.8 6.6 11.5 2.4 3.7 5 7.2 7.8 10.5s5.8 6.4 9.1 9.1c1.6 1.4 3.3 2.7 5 3.9.4.3.9.6 1.3.9l1.3.9c.9.6 1.8 1.1 2.7 1.7.3.2.5.4.8.6.2.2.4.5.6.7.3.5.6 1.1.7 1.8.3 1.3.1 2.7-.7 4-.8 1.3-2 2.1-3.3 2.3-.7.1-1.4.1-2.1 0-.3-.1-.7-.2-1-.3l-.9-.6c-.9-.7-1.8-1.5-2.7-2.3l-1.3-1.2c-.4-.4-.9-.8-1.3-1.2-1.7-1.6-3.4-3.4-4.9-5.1-3.1-3.5-6-7.3-8.5-11.2-2.5-3.9-4.7-8-6.6-12.2-1.9-4.2-3.6-8.4-5.1-12.7-.5-.7-.1-1.5.6-1.8z"/><path class="st2" d="M500.2 434.6l9.4 7.3c2.8 2.2 6.8 1.9 9-.9s1.8-7.2-1.1-9.4l-9.4-7.3-7.9 10.3z"/><path class="st2" d="M521.8 428.5c-9-.1-16 7.9-14.8 16.8l1.8 23.7c10 3.6 17.5 1.6 23.9-2l1.1-25.2c.7-7.1-4.9-13.2-12-13.3z"/><path class="st1" d="M531.8 433.5l-.2.2c1 1.4 1.7 3 2 4.7h.3c-.3-1.7-1-3.4-2.1-4.9zm-9.9 37.3v.3c2.2-.2 4.4-.8 6.6-1.7l-.1-.2c-2.1.8-4.2 1.3-6.5 1.6zm5.1-41.3c-1.6-.8-3.4-1.2-5.2-1.2h-.2c-4.3 0-8.5 1.9-11.3 5.2-1.7 1.9-2.8 4.2-3.3 6.6l.3.1c1.5-6.6 7.4-11.6 14.5-11.5 1.9 0 3.6.5 5.2 1.2v-.4zM508.6 466c-.1 0-.2.1-.3.1l.2 3 .2.1c2.2.8 4.5 1.4 6.6 1.7v-.3c-2.1-.3-4.2-.8-6.5-1.7l-.2-2.9zm-1.8-20.6l.9 12h.3l-.9-12h-.3z"/><path class="st3" d="M524 412.1s6.2 1.5 4.7 8.4c-1 4.6-4.4 7-9.2 7.8l4.5-16.2z"/><path class="st9" d="M517.5 423.7l.5 7.1c2 1.2 4 1.1 5.9-.3l-.5-7.1-5.9.3z"/><path class="st10" d="M517.6 424.6l.1 2.2c.9.5 1.9.7 3 .7h.2c1-.1 2-.5 2.7-1.2l-.1-2.1-5.9.4z"/><path class="st9" d="M514.6 415.4l.4 5.3.1 1.2c.3 2.9 2.7 5.1 5.6 5.1.3 0 .6 0 .9-.1.1 0 .2-.1.3-.1h.1c.4-.2.8-.4 1.1-.8.7-.8 1.1-1.6 1.5-2.5.3-.7.6-1.5.8-2.2.2-.9.4-1.8.2-2.8l-.4-4.6-9-.7-1.6 2.2z"/><path class="st3" d="M523.9 414s-10.3.6-8.2 9.7c0 0-3.2-6.5.1-10.9 3.6-4.8 8.5-3.2 10.2-.9 1.7 2.3 3 6.1-1.8 8.9-.1-.1 1.5-3.5-.3-6.8z"/><path class="st9" d="M523.7 419.5c.1 1.2 1.1 2.1 2.3 2 1.2-.1 2.1-1.1 2-2.3-.1-1.2-1.1-2.1-2.3-2-1.2.1-2.1 1.1-2 2.3z"/><g><path class="st3" d="M503.8 450.8l-7.4-8c4.5-4.2 6.9-9.8 6.9-15.9h10.9c0 9.1-3.8 17.8-10.4 23.9z"/><path class="st4" d="M514.2 427h-10.9c0-12-9.7-21.7-21.7-21.7-2.6 0-5.1.4-7.5 1.3l-3.8-10.2c3.6-1.3 7.4-2 11.3-2 18-.1 32.6 14.6 32.6 32.6z"/><path class="st2" d="M481.6 459.6c-18 0-32.6-14.6-32.6-32.6 0-13.6 8.6-25.9 21.4-30.6l3.8 10.2c-8.5 3.1-14.2 11.3-14.2 20.4 0 12 9.7 21.7 21.7 21.7 5.5 0 10.8-2.1 14.8-5.8l7.4 8c-6.1 5.6-14 8.7-22.3 8.7z"/></g><g><path class="st9" d="M471.1 455.3c0-.8.5-1.5 1.3-1.5 4.4-.5 8.8-1.1 13.1-2.1 4.3-.9 8.5-2.1 12.6-3.5 4.1-1.5 8-3.2 11.8-5.2 1.9-1 3.7-2.1 5.5-3.3.4-.3.9-.6 1.3-.9l1.3-.9c.8-.6 1.7-1.2 2.5-1.9.3-.2.6-.4.8-.5l.9-.3c.6-.1 1.3-.1 1.9 0 1.3.2 2.6.9 3.5 2.1.9 1.2 1.2 2.6 1 3.9-.1.7-.4 1.3-.8 1.9-.2.3-.4.6-.7.8-.3.3-.6.5-.9.7-1 .6-2.1 1.2-3.1 1.7l-1.6.8c-.5.3-1.1.5-1.6.8-2.1 1-4.3 2-6.5 2.8-4.4 1.7-9 3-13.5 3.9-4.6.9-9.2 1.5-13.7 1.9-4.6.3-9.1.4-13.7.3-.8 0-1.4-.7-1.4-1.5z"/><path class="st2" d="M515.5 452.5l10.1-6.2c3.1-1.9 4.3-5.7 2.4-8.8-1.9-3.1-6.1-4.2-9.1-2.3l-10.1 6.2 6.7 11.1z"/><path class="st1" d="M529.1 439.4c-.1-.7-.4-1.4-.8-2-.9-1.5-2.5-2.7-4.3-3.1-.3-.1-.6-.1-.9-.2v.3c2 .3 3.9 1.4 4.9 3.2 1.4 2.3 1.1 5-.5 7l.2.1c1.3-1.5 1.8-3.4 1.4-5.3zm-3.3 7.1s.1 0 .1-.1l-.3-.1-3 1.8.2.2 3-1.8zm-4.2 2.6l-.2-.2-2.9 1.7.2.2 2.9-1.7zm-4.4 2.6l-.2-.2-1.5.9-5.2-8.5-.2.1 5.3 8.8 1.8-1.1zm.2-15.9l-7.4 4.5.1.2 7.4-4.5-.1-.2z"/></g></g><g><path class="st10" d="M234.4 464c0-.8-.5-1.5-1.3-1.6-2.3-.3-4.6-.6-6.9-1-2.3-.4-4.5-.8-6.7-1.3s-4.3-1.2-6.2-2c-1.9-.8-3.7-1.9-5.3-3.1-3.2-2.5-5.7-6-8-9.7-.3-.5-.6-.9-.9-1.4l-.8-1.4c-.6-1-1.1-2-1.7-3-1.1-2-2.2-4-3.2-6.1-1.4-2.6-4.7-3.5-7.2-2s-3.3 4.8-1.7 7.3c1.4 1.9 2.7 3.9 4.1 5.8.7 1 1.4 1.9 2.2 2.9l1.1 1.4c.4.5.8.9 1.1 1.4 1.6 1.9 3.2 3.7 5 5.5 1.8 1.8 3.9 3.4 6.1 4.8 2.3 1.3 4.7 2.3 7.2 3 2.5.7 4.9 1.1 7.3 1.3 2.4.2 4.8.4 7.1.4 2.4.1 4.7.1 7 .1 1 0 1.7-.6 1.7-1.3z"/><path class="st3" d="M190.5 450.4l-6.3-10c-1.9-3-1.3-7 1.8-8.9 3-1.9 7.3-1.1 9.2 2l6.3 10-11 6.9z"/><path class="st9" d="M181.4 505.2L189.7 554.4 192.6 553.9 193.4 504.8z"/><path class="st4" d="M194.2 504.7l-13.6.5c-3.7-9-6.9-28.9-3.1-38.1l15.2 3.4 1.5 34.2z"/><circle transform="rotate(-16.739 184.847 470.406)" class="st4" cx="184.8" cy="470.4" r="7.9"/><g class="st11"><path class="st4" d="M184.8 470.4L184.8 470.4 184.8 470.4 184.8 470.3z"/></g><path class="st9" d="M165.9 503.2L161.1 553.4 164.1 553.6 177.6 505.8z"/><path class="st4" d="M180.4 462.7c-3.2-1-6.5.2-8.5 2.7-.1.2-.3.4-.4.6-5.7 8.3-7.5 27.6-6.3 37l13.2 3 7.3-33.4c1.3-4.2-1.1-8.6-5.3-9.9z"/><path class="st2" d="M180.4 497.1l-1.9 8.9-2.2-.5v.3l2.4.5 2-9.1-.3-.1zm-11.9-25.8c-1.3 3.5-2.4 7.8-3.1 12.8v.3h.3c.6-4.6 1.7-9.1 3.1-12.9l-.3-.2zm-3.9 23.7h.3c0-2.2.2-4.5.4-6.8h-.3c-.3 2.3-.4 4.6-.4 6.8zm.6 8c-.2-1.3-.3-2.8-.3-4.4h-.3c.1 1.6.2 3.1.3 4.4v.2l8 1.8.1-.2-7.8-1.8zm18.6-21.8l-1.7 7.9h.3l1.7-7.9h-.3z"/><path class="st3" d="M170.4 556.6c-.2-.4-.6-.6-1-.7-.4-.1-.8-.1-1.2-.2-1-.2-2-.6-2.8-1.2-.4-.3-.8-.7-1.3-.9l-2.9-.3c-.4.4-.8.9-1 1.5-.2.5-.2 1.1-.3 1.6l-.1.6 10.7 1.2.1-.6c.1-.3 0-.7-.2-1zM199.5 555.1c-.3-.3-.7-.4-1.2-.4-.4 0-.8.1-1.3.1-1 .1-2.1 0-3-.4l-1.5-.6-2.9.5c-.3.5-.5 1.1-.5 1.7 0 .5 0 1.1.1 1.6l.1.6 10.7-1.6-.1-.6c0-.3-.1-.6-.4-.9zM182 428.8c9 .1 15.8 8.2 14.4 17.1l-3.6 24c-6.5 2.3-15.6 1.5-23.1-.7v-27.4c-.5-7.1 5.2-13.1 12.3-13z"/><path class="st1" d="M169.4 457.4v10.4h.3v-10.4h-.3zm12.6-28.8h-.1c-.4 0-.8 0-1.2.1v.3c.4 0 .8-.1 1.3-.1 2.1 0 4 .5 5.8 1.2l.1-.2c-1.8-.9-3.8-1.3-5.9-1.3zm11.3 5.3c-.8-.9-1.7-1.8-2.7-2.5l-.2.2c3.7 2.7 6.1 7.1 6.1 11.9 0 .8-.1 1.6-.2 2.4l-.8 5.3.3.1.8-5.3c.7-4.4-.5-8.8-3.3-12.1zm-.6 36c-5.9 2.1-13.9 1.6-20.9-.1v.3c4 1 8.1 1.5 11.8 1.5 3.5 0 6.6-.5 9.2-1.4l.1-.1 2.1-13.8h-.3l-2 13.6zm-16.9-39.5l-.1-.3c-1.1.6-2.1 1.4-2.9 2.3-2.4 2.5-3.6 5.9-3.3 9.3v6.4h.3v-6.4c-.4-4.7 2.1-9 6-11.3z"/><g><path class="st9" d="M186.2 424.7l-.4 7.3c-2.1 1.1-4 1-5.9-.4l.4-7.3 5.9.4z"/><path class="st10" d="M186.1 426.9v.8c-.9.5-2 .7-3.1.7h-.2c-1-.1-1.9-.5-2.6-1.2l.1-2.1 5.8 1.8z"/><path class="st9" d="M189.3 416.4l-.5 5.2-.1 1.2c-.3 2.9-2.8 5.1-5.7 5-.3 0-.6-.1-.9-.1-.1 0-.2-.1-.3-.1h-.1c-.4-.2-.8-.5-1.1-.8-.6-.8-1-1.6-1.4-2.5-.3-.8-.6-1.5-.8-2.3-.2-.9-.3-1.8-.2-2.8l.2-3.6 9.3-1.5 1.6 2.3z"/><path class="st3" d="M189 424.6s0-3.1-.1-4.6c-.1-1.4-.4-2.8-1.5-2.6-2.1.4-2.9-1.4-2.9-1.4-.6 0-1.2.1-1.9.3-3.1.8-3.6 0-4-.5-.8 2.4-.5 5.5-.5 5.8 0 .1.1.3.1.4.2.8.5 1.5.8 2.3.3.7.6 1.4 1 2v.5c-2.2-.4-4.9-2.8-5.6-4.7-2.3-7.2 1.6-11.5 7.1-12.6 4.8-.9 7.4 3.5 8.4 7.5.8 2.3-.3 7-.9 7.6z"/><path class="st9" d="M180.2 420.3c-.1 1.2-1.1 2.1-2.3 2-1.2-.1-2.1-1.1-2-2.3.1-1.2 1.1-2.1 2.3-2 1.2.1 2 1.1 2 2.3z"/></g><g><path transform="rotate(-180 274.437 454.01)" class="st2" d="M269 446.1H279.8V462H269z"/><path transform="rotate(-180 260.511 447.387)" class="st2" d="M255.1 432.8H265.9V461.90000000000003H255.1z"/><path transform="rotate(-180 246.585 443.424)" class="st4" d="M241.2 424.9H252V461.9H241.2z"/><path transform="rotate(-180 232.659 439.712)" class="st4" d="M227.2 417.5H238V461.9H227.2z"/><path transform="rotate(-180 218.732 441.217)" class="st4" d="M213.3 420.5H224.10000000000002V461.9H213.3z"/><path transform="rotate(-180 204.806 443.424)" class="st2" d="M199.4 424.9H210.20000000000002V461.9H199.4z"/><path transform="rotate(-180 190.88 447.387)" class="st4" d="M185.5 432.8H196.3V461.90000000000003H185.5z"/><g><path transform="rotate(-180 232.659 462.663)" class="st3" d="M183.1 461.9H282.3V463.4H183.1z"/></g></g><g><path class="st9" d="M227.5 461.9c-.1-.8-.7-1.4-1.5-1.4h-6.9c-2.3-.1-4.6-.2-6.8-.4s-4.4-.6-6.4-1.1c-2-.6-3.9-1.3-5.7-2.4-3.5-2.1-6.5-5.1-9.3-8.5-.4-.4-.7-.8-1.1-1.3l-1-1.3c-.7-.9-1.4-1.8-2-2.7-1.4-1.8-2.7-3.7-4-5.6-1.7-2.3-5.1-2.8-7.4-.9-2.3 1.8-2.6 5.3-.6 7.5 1.6 1.7 3.2 3.4 4.9 5.2.8.9 1.7 1.7 2.5 2.6l1.3 1.3c.4.4.9.8 1.3 1.2 1.8 1.7 3.7 3.3 5.8 4.8 2.1 1.5 4.3 2.8 6.7 3.9 2.4 1 5 1.7 7.5 2 2.5.3 5 .4 7.4.3 2.4-.1 4.8-.3 7.1-.6s4.7-.6 7-.9c.7-.3 1.2-1 1.2-1.7z"/><path class="st3" d="M181.9 454.2l-7.7-9c-2.3-2.7-2.2-6.7.5-9.1 2.7-2.3 7.1-2.1 9.4.7l7.7 9-9.9 8.4z"/><path class="st1" d="M179.6 434.3c-1.2-.1-2.3.1-3.4.6l.1.2c2.6-1.2 5.9-.6 7.8 1.7l.7.8.2-.2-.7-.8c-1.1-1.3-2.8-2.2-4.7-2.3zm12.2 11.6l-8.1 6.8.2.2 8.3-7-4.4-5.2-.2.2 4.2 5zm-18-9.1c-1.8 2.1-1.9 5.2-.4 7.7l.2-.1c-1.4-2.3-1.4-5.3.3-7.4l-.1-.2zm7.4 17l.2-.2-3.7-4.4-.2.2 3.7 4.4z"/></g></g><g><path class="st3" d="M630.9 587.7H74.2c-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9H631c1.6 0 2.9 1.3 2.9 2.9-.1 1.6-1.4 2.9-3 2.9z"/></g><g><path transform="rotate(-40.957 194.403 297.627)" class="st2" d="M179.5 288.7H209.2V306.4H179.5z"/><path transform="rotate(-40.957 148.955 337.083)" class="st4" d="M103.6 323.8H194.2V350.40000000000003H103.6z"/><path class="st4" d="M294.2 300.4c28.1-24.4 31.2-67.2 6.7-95.3-24.4-28.1-67.2-31.2-95.3-6.7-25.9 22.5-30.5 60.4-12.1 88.2 1.6 2.4 3.4 4.8 5.4 7.1 2 2.3 4.1 4.4 6.2 6.3 25 22.1 63.3 22.9 89.1.4zm-76.9-88.6c20.7-18 52.3-15.8 70.3 5s15.8 52.3-5 70.3-52.3 15.8-70.3-5-15.8-52.3 5-70.3z"/><g style="opacity:.5"><path class="st2" d="M212.3 282.1c-18-20.8-15.8-52.3 5-70.3 20.7-18 52.3-15.8 70.3 5s15.8 52.3-5 70.3c-20.7 17.9-52.3 15.7-70.3-5z"/></g><g><path class="st1" d="M263.6 217c.2-.4.4-.7.8-1 1-.8 2.5-.5 3.2.5l20.8 28.3c.8 1 .5 2.5-.5 3.2-1 .8-2.5.5-3.2-.5l-20.8-28.3c-.5-.6-.6-1.5-.3-2.2zM252.5 225.2c.2-.4.4-.7.8-1 1-.8 2.5-.5 3.2.5l20.8 28.3c.8 1 .5 2.5-.5 3.2-1 .8-2.5.5-3.2-.5l-20.8-28.3c-.5-.6-.6-1.5-.3-2.2z"/></g></g><g><path class="st3" d="M410 551.8l-12.9 6.5c-.2-.4-.3-.9-.2-1.4.1-.6.5-1 .9-1.3.5-.3 1-.6 1.5-.8 1.2-.7 2.2-1.6 3-2.8.4-.6.7-1.2 1.2-1.8l3.6-1.7c.7.3 1.4.8 1.9 1.4.4.5.7 1.2 1 1.9zM422.6 556.4l-14.4 1.9c-.1-.5 0-1 .2-1.4.3-.5.8-.8 1.3-1 .5-.2 1.1-.2 1.7-.3 1.4-.2 2.6-.8 3.7-1.6.6-.4 1.1-.9 1.7-1.3l3.9-.4c.6.5 1.1 1.2 1.3 2 .4.7.5 1.4.6 2.1zM416.5 508.6L416.5 508.6 416.5 508.6z"/><g class="st11"><path class="st3" d="M414.6 478.3L414.6 478.3 414.6 478.3 414.6 478.3z"/></g><path class="st3" d="M416.5 508.6L416.5 508.6 416.5 508.6zM416.5 508.6L416.5 508.6 416.5 508.6z"/><path class="st2" d="M384.1 510.1l18.8 40.3 4.7-1.9-12-37.6 9.7-15.3 11 57.2 5.1-.3.1-73.2c.1-.7-30.9-2.6-30.9-2.6l-6.8 30.4c-.1 1.1 0 2 .3 3zm32.4-1.5z"/><g class="st11"><path class="st3" d="M416.5 508.6L416.5 508.6 416.5 508.6z"/></g><path class="st10" d="M352.8 484.7c1.5-1.5 3-2.8 4.5-4.2.4-.3.7-.7 1.1-1 .4-.4.7-.7 1.1-1l1-1.1.5-.5.5-.5c2.7-2.9 5.1-6 7.3-9.3 1-1.7 2.1-3.3 3.1-5l.7-1.3c.1-.2.2-.4.4-.6l.3-.7 1.3-2.6c.1-.2.2-.4.3-.7l.3-.7.6-1.3.6-1.3.3-.7.2-.3.1-.3 1.1-2.7c.4-.9.7-1.8 1.1-2.8.4-1.2 1.4-2 2.6-2.4 1.2-.4 2.6-.4 3.9.2 1.3.6 2.3 1.6 2.8 2.7.5 1.2.5 2.5-.1 3.7-.5.9-1 1.8-1.6 2.8l-1.6 2.7-.2.3-.2.3-.4.7-.9 1.3-.9 1.3-.4.7c-.1.2-.3.4-.5.7l-1.8 2.6-.5.6c-.2.2-.3.4-.5.6l-1 1.3c-1.3 1.7-2.7 3.3-4.1 4.9-2.9 3.1-6 6.1-9.2 8.7l-.6.5-.6.5-1.3.9c-.4.3-.8.6-1.3.9-.4.3-.8.6-1.3.9-1.7 1.2-3.4 2.3-5 3.4-.5.4-1.3.3-1.9-.3-.3-.6-.3-1.4.2-1.9z"/><path class="st4" d="M383.8 465.5l5.6-12.2c1.7-3.7.4-8-3.3-9.7-3.7-1.7-8.4-.1-10 3.6l-5.6 12.2 13.3 6.1z"/><g><path class="st4" d="M389.8 435.7c-7.7 1.9-12.2 9.9-9.6 17.5l11.9 36.1c13.9 1.7 20.3-2.7 29.7-9.7l-12.4-33.5c-3-7.9-11.4-12.4-19.6-10.4z"/></g><g><path class="st1" d="M403.3 438.2c1.4 1 2.7 2.2 3.8 3.7l.3-.3c-1.1-1.4-2.4-2.7-3.8-3.7l-.3.3zm16 43.1l.2.3c.8-.6 1.5-1.1 2.3-1.7l.2-.2-3.2-8.7-.4.1 3.1 8.5c-.6.5-1.4 1.1-2.2 1.7zm-27.6 8.3h.3c2.7.3 5.1.5 7.3.4l-.1-.4c-2.2.1-4.5 0-7.2-.3l-7-21.2-.4.1 7.1 21.4zm20.6-3.7c-1 .5-1.9 1-3 1.4l.2.4c1.1-.5 2.1-1 3.1-1.5l-.3-.3zm2.1-26l.4-.2-3-8-.4.2 3 8zm-32.6-.2l.4-.1-2.1-6.5c-2.3-6.8 1.2-14.1 7.6-16.8.3-.1.6-.3 1-.4l-.2-.4-.9.3c-6.8 2.8-10.3 10.4-7.9 17.4l2.1 6.5z"/></g><g><path class="st4" d="M353.2 491.4c8.2 7.9 20.6 10.6 31.7 6l-11.3-26.9-20.4 20.9z"/><path class="st3" d="M373.6 470.4l29.2-1.4c-.2-3.3-.9-6.7-2.3-9.9-2.7-6.4-7.4-11.3-13.1-14.4l-13.8 25.7zM362.2 443.5l11.3 26.9 13.9-25.7c-7.4-4-16.7-4.8-25.2-1.2z"/><path class="st3" d="M373.6 470.4l11.3 26.9c11.6-4.9 18.4-16.4 17.8-28.3l-29.1 1.4z"/><path class="st4" d="M346.7 481.8c1.6 3.7 3.8 7 6.6 9.6l20.4-21-29-3.4c-.7 4.9-.1 9.9 2 14.8z"/></g><g><path class="st9" d="M371.3 467.3c.5-.6 1.3-.7 1.9-.3 1.8 1.2 3.7 2.4 5.6 3.4.9.5 1.9 1 2.9 1.4 1 .4 1.9.8 2.9 1.1 1 .3 1.9.5 2.8.5h1.2c.4 0 .8-.1 1.1-.2.3-.1.6-.3.9-.4.3-.2.5-.4.8-.6.2-.2.5-.5.7-.8.2-.3.4-.6.6-1 .4-.7.7-1.6 1-2.5.3-.9.5-1.8.7-2.8.4-2 .6-4 .7-6.1.1-2.1.2-4.2.2-6.4 0-2.1-.1-4.3-.2-6.5 0-1.4.5-2.6 1.5-3.6.9-.9 2.2-1.5 3.7-1.5 1.4 0 2.7.6 3.7 1.6.9 1 1.4 2.3 1.3 3.7-.2 2.3-.4 4.6-.8 6.8-.3 2.3-.7 4.6-1.1 6.9-.5 2.3-1 4.6-1.8 7-.4 1.2-.8 2.3-1.4 3.5-.6 1.2-1.2 2.3-2 3.4-.4.6-.9 1.1-1.4 1.6-.5.5-1.1 1-1.7 1.4-.6.4-1.3.8-2.1 1.1-.7.3-1.5.5-2.2.6-.7.1-1.5.1-2.2.1h-.6l-.5-.1c-.3-.1-.7-.1-1-.2-1.3-.3-2.5-.7-3.6-1.2s-2.2-1.1-3.2-1.7c-1-.6-2-1.3-2.9-2-1.9-1.4-3.6-2.8-5.3-4.3-.6-.5-.7-1.3-.2-1.9z"/><path class="st4" d="M406.8 461.8l.4-13.4c.1-4.1-2.8-7.6-6.8-7.7-4.1-.1-7.7 3.2-7.9 7.2l-.4 13.4 14.7.5z"/><path class="st1" d="M392.2 449.3h.4V448c0-.5.1-.9.2-1.4l-.4-.1c-.1.5-.2 1-.2 1.5v1.3zm11.3 12.8l3.7.1.1-4.1-.4-.1-.1 3.8-3.3-.1v.4zm3.7-11.4l-.2 4.9h.4l.2-5-.4.1zm-12.7-7.9l.4.1c1.5-1.4 3.4-2.2 5.5-2.2 1.7.1 3.3.7 4.4 1.8l.2-.3c-1.3-1.2-2.9-1.8-4.6-1.9-1.1 0-2.2.2-3.3.6-1 .5-1.9 1.1-2.6 1.9zm-2.6 15.2l.4.1.1-3.4h-.4l-.1 3.3zm4.5 3.9l3.4.1v-.4l-3.3-.1-.1.4z"/></g><g><path class="st9" d="M383 434.5l4.8 8.4c2.5.2 4.3-.9 5.5-3.1l-4.8-8.4-5.5 3.1z"/><path class="st10" d="M383 434.5l2.2 3.8c.5-.1.9-.2 1.4-.4.1-.1.3-.1.4-.2 1.5-.9 2.5-2.4 2.8-4l-1.3-2.3-5.5 3.1z"/><path class="st9" d="M377.6 430.8l2.1 3.5.9 1.4c1.2 1.9 3.7 2.7 5.7 1.7.7-.3 1.3-.8 1.7-1.3.1-.1.2-.3.3-.4.1-.1.1-.2.2-.3.5-.9.8-1.8.7-2.9-.1-.9-.2-1.8-.3-2.8-.1-.6-.2-1.1-.3-1.7-.5-2.5-2.3-4.6-4.7-5.3-2.1-.6-4-.1-5.6 1.6-1.7 1.8-2 4.4-.7 6.5z"/><path class="st3" d="M385.7 429.1h-.8s0-3.2-.8-3.9c-1.2-1-4.5.3-5.9 1.4-.4.4-.7.7-.7 1.3.1 1.2.5 3.5 1.7 5.5 0 0-5-5.2-4.5-9.4.3-2.8.8-4.8 4.3-4.8 5.5 0 9.6 2.7 11.2 8.4l-3.5.2-1 1.3z"/><g><path class="st9" d="M385.9 429.5c.6 1 2 1.3 3.1.7s1.6-2 1-3c-.6-1-2-1.3-3.1-.7-1.2.6-1.6 2-1 3z"/></g></g></g><g><path class="st5" d="M305 499.7H375.1V558.3H305z"/><path class="st13" d="M281.2 499.7H305V558.3H281.2z"/><path class="st13" d="M305 499.7L295.6 517.6 269.4 517.6 281.2 499.7zM386 519.6L316 524.1 305 499.7 375.1 504.2z"/><path class="st5" d="M386 519.6L316 519.6 305 499.7 375.1 499.7zM305 499.7L299.7 519.7 269.4 517.6 295.6 517.6z"/></g><g><path class="st0" d="M38.9 241.8c3.5-18.6 10.8-36.5 20.7-52.7 5-8.1 10.7-15.8 17.1-22.9 3.2-3.6 6.5-7 10-10.3 3.5-3.3 7.1-6.4 10.8-9.4 15-11.9 32.3-20.9 50.6-26.7 9.2-2.9 18.6-4.9 28.1-6.1 2.4-.3 4.8-.5 7.1-.8l3.6-.3c1.2-.1 2.4-.1 3.6-.2 4.8-.2 9.6-.2 14.4 0 4.8.2 9.6.7 14.3 1.3 4.8.6 9.5 1.5 14.2 2.5 2.3.5 4.7 1.1 7 1.7l3.5 1c1.2.3 2.3.7 3.4 1.1.6.2 1.1.4 1.7.5l1.7.6c1.1.4 2.3.8 3.4 1.2 1.1.4 2.2.8 3.4 1.3l3.3 1.4c.6.2 1.1.5 1.7.7l1.6.7 3.3 1.5 3.2 1.6 1.6.8 1.6.8 3.2 1.7 3.1 1.7 1.6.9 1.5.9 3.1 1.8c4.1 2.4 8.1 4.9 12.1 7.5 4 2.6 7.9 5.2 11.9 7.9 7.8 5.3 15.6 10.7 23.5 15.9 3.9 2.6 7.9 5.1 11.9 7.6 4 2.4 8.1 4.8 12.2 7.1 2 1.2 4.1 2.2 6.2 3.3 1 .6 2.1 1 3.2 1.6 1.1.5 2.1 1.1 3.2 1.5 2.1 1 4.3 2 6.5 2.8 1.1.4 2.2.9 3.3 1.3l3.3 1.2 3.3 1.2c1.1.4 2.2.8 3.4 1.1l3.4 1c.6.2 1.1.3 1.7.5l1.7.4c1.1.3 2.3.6 3.4.8l3.5.7c.6.1 1.2.2 1.7.3l1.7.3 3.5.5c-9.4-.8-18.8-2.7-27.8-5.6-9-2.9-17.8-6.7-26.3-11-4.3-2.1-8.4-4.4-12.5-6.8-4.1-2.4-8.2-4.8-12.2-7.3s-8-5.1-12-7.6l-11.9-7.7c-4-2.6-7.9-5.1-11.9-7.6s-8-4.9-12.1-7.3l-3.1-1.7-1.5-.9-1.5-.8-3.1-1.7-3.1-1.6-1.6-.8-1.6-.8-3.2-1.5-3.2-1.4-1.6-.7c-.5-.2-1.1-.4-1.6-.7-17.2-7.2-35.7-11.2-54.3-11.9-18.6-.8-37.4 1.5-55.2 6.9-4.5 1.3-8.9 2.9-13.2 4.6-4.3 1.7-8.6 3.7-12.7 5.8-8.3 4.2-16.2 9.2-23.7 14.8-7.4 5.7-14.4 11.9-20.8 18.8-6.4 6.8-12.2 14.2-17.4 22-10.6 15.9-18.3 33.3-22.9 51.7z"/></g><g><path class="st0" d="M658 370.2c6.5 13.9 10.3 29.1 11.5 44.5 1.1 15.4-.4 31.1-4.6 46.1-4.2 14.9-11.2 29.1-20.3 41.6-9.1 12.5-20.3 23.5-33.2 31.9 11.9-9.7 22.3-21 30.7-33.6 8.4-12.6 14.9-26.4 19-41 4.1-14.5 5.9-29.7 5.3-44.9-.4-15.1-3.3-30.2-8.4-44.6z"/></g><g><path class="st1" d="M639.8 422.2c.4 9.5-.9 19.2-3.6 28.3-1.4 4.6-3.1 9.1-5.2 13.4-2.1 4.3-4.6 8.5-7.3 12.4-2.8 3.9-5.9 7.6-9.2 11.1-3.4 3.4-7 6.6-10.9 9.4-7.7 5.7-16.4 10.1-25.5 12.9 8.8-3.5 17.1-8.3 24.6-14.1 3.7-2.9 7.2-6.1 10.5-9.5 3.3-3.4 6.3-7 9-10.9 2.7-3.8 5.1-7.9 7.3-12.1 2.1-4.2 3.9-8.6 5.4-13.1 2.9-8.8 4.5-18.2 4.9-27.8z"/></g></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/member_balance.svg b/marketing-ui/admin-ui/src/assets/svgs/member_balance.svg
new file mode 100644
index 0000000..5395b23
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/member_balance.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1693028338187" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22985" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M983.8 312.7C958 251.7 921 197 874 150c-47-47-101.8-83.9-162.7-109.7C648.2 13.5 581.1 0 512 0S375.8 13.5 312.7 40.2C251.7 66 197 102.9 150 150c-47 47-83.9 101.8-109.7 162.7C13.5 375.8 0 442.9 0 512s13.5 136.2 40.2 199.3C66 772.3 102.9 827 150 874c47 47 101.8 83.9 162.7 109.7 63.1 26.7 130.2 40.2 199.3 40.2s136.2-13.5 199.3-40.2C772.3 958 827 921 874 874c47-47 83.9-101.8 109.7-162.7 26.7-63.1 40.2-130.2 40.2-199.3s-13.4-136.2-40.1-199.3z m-55.3 375.2c-22.8 53.8-55.4 102.2-96.9 143.7s-89.9 74.1-143.7 96.9C632.2 952.1 573 964 512 964s-120.2-11.9-175.9-35.5c-53.8-22.8-102.2-55.4-143.7-96.9s-74.1-89.9-96.9-143.7C71.9 632.2 60 573 60 512s11.9-120.2 35.5-175.9c22.8-53.8 55.4-102.2 96.9-143.7s89.9-74.1 143.7-96.9C391.8 71.9 451 60 512 60s120.2 11.9 175.9 35.5c53.8 22.8 102.2 55.4 143.7 96.9s74.1 89.9 96.9 143.7C952.1 391.8 964 451 964 512s-11.9 120.2-35.5 175.9z" fill="#000000" p-id="22986"></path><path d="M706 469.1H574.7l84.2-180.6c7-15 0.4-32.9-14.5-39.9-15-7-32.9-0.4-39.9 14.5L512 461.5l-92.5-198.3c-7-15-24.9-21.5-39.9-14.5s-21.5 24.9-14.5 39.9l84.2 180.6H318c-16.5 0-30 13.5-30 30s13.5 30 30 30h164v64h-92.5c-20.6 0-37.5 13.5-37.5 30s16.9 30 37.5 30H482v95c0 16.5 13.5 30 30 30s30-13.5 30-30v-95h92.5c20.6 0 37.5-13.5 37.5-30s-16.9-30-37.5-30H542v-64h164c16.5 0 30-13.5 30-30 0-16.6-13.5-30.1-30-30.1z" fill="#000000" p-id="22987"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/member_expenditure_balance.svg b/marketing-ui/admin-ui/src/assets/svgs/member_expenditure_balance.svg
new file mode 100644
index 0000000..02d498c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/member_expenditure_balance.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1693028553383" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28918" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M510.72 962.56C262.4 960 61.44 757.76 64 509.44 66.56 263.68 264.96 65.28 510.72 62.72c17.92 0 34.56 14.08 34.56 32s-14.08 34.56-32 34.56h-2.56C299.52 130.56 128 300.8 128 512s171.52 382.72 382.72 382.72S893.44 723.2 893.44 512c0-17.92 16.64-33.28 34.56-32 17.92 0 32 15.36 32 32 0 248.32-200.96 450.56-449.28 450.56z" fill="#000000" p-id="28919"></path><path d="M645.12 480H375.04c-17.92 0-34.56-14.08-34.56-32s14.08-34.56 32-34.56h272.64c17.92 0 33.28 16.64 32 34.56 0 17.92-14.08 32-32 32z m0 130.56H375.04c-17.92 0-33.28-16.64-32-34.56 0-17.92 15.36-32 32-32h270.08c17.92 0 33.28 16.64 32 34.56 0 16.64-14.08 32-32 32z" fill="#000000" p-id="28920"></path><path d="M510.72 746.24c-17.92 0-33.28-15.36-33.28-33.28V441.6c0-17.92 16.64-33.28 34.56-32 17.92 0 32 15.36 32 32v270.08c0 19.2-15.36 34.56-33.28 34.56z" fill="#000000" p-id="28921"></path><path d="M510.72 458.24c-8.96 0-17.92-3.84-24.32-10.24l-111.36-111.36c-14.08-12.8-15.36-33.28-2.56-47.36s33.28-15.36 47.36-2.56l2.56 2.56 111.36 111.36c12.8 12.8 12.8 34.56 0 47.36-6.4 6.4-15.36 10.24-23.04 10.24z" fill="#000000" p-id="28922"></path><path d="M510.72 458.24c-8.96 0-17.92-3.84-24.32-10.24-12.8-12.8-12.8-34.56 0-47.36l111.36-111.36c14.08-12.8 35.84-10.24 47.36 2.56 11.52 12.8 11.52 32 0 44.8L533.76 448c-6.4 6.4-15.36 10.24-23.04 10.24zM925.44 241.92c17.92 0 33.28-15.36 33.28-33.28 0-8.96-3.84-17.92-10.24-24.32l-111.36-111.36c-12.8-14.08-33.28-14.08-47.36-1.28s-14.08 33.28-1.28 47.36l1.28 1.28 111.36 111.36c7.68 6.4 15.36 10.24 24.32 10.24z" fill="#000000" p-id="28923"></path><path d="M815.36 353.28c8.96 0 17.92-3.84 24.32-10.24l111.36-111.36c12.8-14.08 10.24-35.84-2.56-47.36-12.8-11.52-32-11.52-44.8 0l-111.36 111.36c-12.8 12.8-12.8 34.56 0 47.36 5.12 6.4 14.08 10.24 23.04 10.24z" fill="#000000" p-id="28924"></path><path d="M920.32 241.92c17.92 0 34.56-14.08 34.56-32s-14.08-34.56-32-34.56H695.04c-17.92 0-33.28 16.64-32 34.56 0 17.92 15.36 32 32 32h225.28z" fill="#000000" p-id="28925"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/member_level.svg b/marketing-ui/admin-ui/src/assets/svgs/member_level.svg
new file mode 100644
index 0000000..cbcc686
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/member_level.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1693027700643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8876" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M936.96 385.877333l-203.434667-204.8-18.090667-7.68L308.565333 173.397333l-18.090667 7.68L87.04 385.877333c-9.728 9.898667-9.898667 25.941333-0.170667 35.84l406.869333 421.034667c4.778667 4.949333 11.434667 7.850667 18.432 7.850667 6.997333 0 13.653333-2.901333 18.432-7.850667l406.869333-421.034667C946.858667 411.648 946.688 395.776 936.96 385.877333zM868.522667 389.632l-141.994667 0-163.84-165.034667 141.994667 0L868.522667 389.632zM319.317333 224.768l143.018667 0-163.84 165.034667L155.477333 389.802667 319.317333 224.768zM176.469333 440.832l132.608 0 18.090667-7.509333 185.173333-186.538667 185.173333 186.538667 18.090667 7.509333 131.584 0L512 787.968 176.469333 440.832z" p-id="8877" fill="#000000"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/member_point.svg b/marketing-ui/admin-ui/src/assets/svgs/member_point.svg
new file mode 100644
index 0000000..b849ddb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/member_point.svg
@@ -0,0 +1 @@
+<svg t="1693027780777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10083" width="128" height="128"><path d="M509.091764 501.653351c241.775532 0 424.086741-78.085426 424.086741-181.63992 0-103.543238-182.311209-181.628664-424.086741-181.628664S84.993766 216.471217 84.993766 320.014454C84.993766 423.568948 267.316232 501.653351 509.091764 501.653351zM509.091764 184.220698c222.908836 0 378.251833 71.561849 378.251833 135.793756S732.001623 455.818443 509.091764 455.818443c-222.920092 0-378.26309-71.573105-378.26309-135.803989S286.171672 184.220698 509.091764 184.220698z" fill="#000000" p-id="10084"></path><path d="M509.083577 694.061522c241.1155 0 422.937568-77.598332 422.937568-180.482561 0-27.169803-13.127995-52.453652-36.241412-75.131141-0.148379-0.153496-0.26606-0.320295-0.418532-0.468674-0.170892-0.166799-0.285502-0.345877-0.456395-0.51063l-0.11461 0.125867c-3.717671-3.40761-8.576329-5.608741-14.017248-5.608741-11.542894 0-20.898982 9.356089-20.898982 20.898982 0 6.110161 2.721994 11.481496 6.901177 15.302521l-0.082888 0.091074c13.948687 14.024411 21.809725 31.154557 21.809725 45.300742 0 64.785515-155.813718 136.966465-379.419426 136.966465-223.595474 0-379.410216-72.180949-379.410216-136.966465 0-16.139585 4.53734-29.952172 22.323425-45.670156 0.213871-0.204661 0.429789-0.381693 0.635473-0.594541 0.137123-0.118704 0.240477-0.233314 0.378623-0.354064l-0.084934-0.080841c3.416819-3.719718 5.623068-8.588609 5.623068-14.037714 0-11.542894-9.356089-20.898982-20.898982-20.898982-5.770424 0-10.993378 2.340301-14.773472 6.119371l-0.122797-0.118704c-23.408129 22.797215-36.594453 48.27754-36.594453 75.635631C86.158289 616.462167 267.979334 694.061522 509.083577 694.061522z" fill="#000000" p-id="10085"></path><path d="M895.577119 629.529787c-0.168846-0.164752-0.282433-0.342808-0.453325-0.50756l-0.11461 0.124843c-3.717671-3.40761-8.577353-5.608741-14.018272-5.608741-11.540847 0-20.897959 9.356089-20.897959 20.898982 0 6.110161 2.720971 11.482519 6.901177 15.302521l-0.083911 0.091074c13.94971 14.024411 21.810748 31.154557 21.810748 45.300742 0 64.787562-155.813718 136.966465-379.419426 136.966465-223.595474 0-379.410216-72.179926-379.410216-136.966465 0-16.139585 4.53734-29.952172 22.321378-45.670156 0.213871-0.202615 0.429789-0.381693 0.635473-0.594541 0.137123-0.118704 0.240477-0.233314 0.378623-0.354064l-0.084934-0.080841c3.416819-3.719718 5.623068-8.588609 5.623068-14.037714 0-11.542894-9.356089-20.898982-20.897959-20.898982-5.770424 0-10.993378 2.340301-14.773472 6.119371l-0.122797-0.118704c-23.410176 22.797215-36.594453 48.278563-36.594453 75.635631 0 102.884228 181.821045 180.482561 422.926312 180.482561 241.114476 0 422.935522-77.598332 422.935522-180.482561 0-27.166733-13.125949-52.452629-36.235272-75.127048C895.851365 629.847012 895.730615 629.681236 895.577119 629.529787z" fill="#000000" p-id="10086"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/member_recharge_balance.svg b/marketing-ui/admin-ui/src/assets/svgs/member_recharge_balance.svg
new file mode 100644
index 0000000..7519bb2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/member_recharge_balance.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1693028440322" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25843" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 750.509317c-19.080745 0-31.801242-12.720497-31.801242-31.801242L480.198758 432.496894c0-19.080745 12.720497-31.801242 31.801242-31.801242s31.801242 12.720497 31.801242 31.801242l0 286.21118C537.440994 737.78882 524.720497 750.509317 512 750.509317z" fill="#000000" p-id="25844"></path><path d="M651.925466 534.26087 365.714286 534.26087c-19.080745 0-31.801242-12.720497-31.801242-31.801242 0-19.080745 12.720497-31.801242 31.801242-31.801242l286.21118 0c19.080745 0 31.801242 12.720497 31.801242 31.801242C683.726708 521.540373 671.006211 534.26087 651.925466 534.26087z" fill="#000000" p-id="25845"></path><path d="M651.925466 648.745342 365.714286 648.745342c-19.080745 0-31.801242-12.720497-31.801242-31.801242 0-19.080745 12.720497-31.801242 31.801242-31.801242l286.21118 0c19.080745 0 31.801242 12.720497 31.801242 31.801242C683.726708 636.024845 671.006211 648.745342 651.925466 648.745342z" fill="#000000" p-id="25846"></path><path d="M512 464.298137c-6.360248 0-19.080745 0-25.440994-6.360248L352.993789 324.372671c-12.720497-12.720497-12.720497-31.801242 0-44.521739 12.720497-12.720497 31.801242-12.720497 44.521739 0l133.565217 133.565217c12.720497 12.720497 12.720497 31.801242 0 44.521739C524.720497 464.298137 518.360248 464.298137 512 464.298137z" fill="#000000" p-id="25847"></path><path d="M512 464.298137c-6.360248 0-19.080745 0-25.440994-6.360248-12.720497-12.720497-12.720497-31.801242 0-44.521739l133.565217-133.565217c12.720497-12.720497 31.801242-12.720497 44.521739 0 12.720497 12.720497 12.720497 31.801242 0 44.521739L531.080745 457.937888C524.720497 464.298137 518.360248 464.298137 512 464.298137z" fill="#000000" p-id="25848"></path><path d="M512 1017.639752c-279.850932 0-508.819876-228.968944-508.819876-508.819876s228.968944-508.819876 508.819876-508.819876 508.819876 228.968944 508.819876 508.819876c0 25.440994 0 50.881988-6.360248 82.68323 0 19.080745-19.080745 31.801242-38.161491 25.440994-19.080745 0-31.801242-19.080745-25.440994-38.161491 6.360248-25.440994 6.360248-44.521739 6.360248-69.962733 0-248.049689-197.167702-445.217391-445.217391-445.217391S66.782609 267.130435 66.782609 515.180124s197.167702 445.217391 445.217391 445.217391c25.440994 0 57.242236 0 82.68323-6.360248 19.080745-6.360248 31.801242 6.360248 38.161491 25.440994 6.360248 19.080745-6.360248 31.801242-25.440994 38.161491C575.602484 1017.639752 543.801242 1017.639752 512 1017.639752z" fill="#000000" p-id="25849"></path><path d="M989.018634 864.993789l-318.012422 0c-19.080745 0-31.801242-12.720497-31.801242-31.801242s12.720497-31.801242 31.801242-31.801242l318.012422 0c19.080745 0 31.801242 12.720497 31.801242 31.801242S1001.73913 864.993789 989.018634 864.993789z" fill="#000000" p-id="25850"></path><path d="M830.012422 1024c-19.080745 0-31.801242-12.720497-31.801242-31.801242l0-318.012422c0-19.080745 12.720497-31.801242 31.801242-31.801242s31.801242 12.720497 31.801242 31.801242l0 318.012422C861.813665 1004.919255 842.732919 1024 830.012422 1024z" fill="#000000" p-id="25851"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/message.svg b/marketing-ui/admin-ui/src/assets/svgs/message.svg
new file mode 100644
index 0000000..14ca817
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/message.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 20.967v59.59c0 11.59 8.537 20.966 19.075 20.966h28.613l1 26.477L76.8 101.523h32.125c10.538 0 19.075-9.377 19.075-20.966v-59.59C128 9.377 119.463 0 108.925 0h-89.85C8.538 0 0 9.377 0 20.967zm82.325 33.1c0-5.524 4.013-9.935 9.037-9.935 5.026 0 9.038 4.41 9.038 9.934 0 5.524-4.025 9.934-9.038 9.934-5.024 0-9.037-4.41-9.037-9.934zm-27.613 0c0-5.524 4.013-9.935 9.038-9.935s9.037 4.41 9.037 9.934c0 5.524-4.025 9.934-9.037 9.934-5.025 0-9.038-4.41-9.038-9.934zm-27.1 0c0-5.524 4.013-9.935 9.038-9.935s9.038 4.41 9.038 9.934c0 5.524-4.026 9.934-9.05 9.934-5.013 0-9.025-4.41-9.025-9.934z"/></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/money.svg b/marketing-ui/admin-ui/src/assets/svgs/money.svg
new file mode 100644
index 0000000..c1580de
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/money.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.122 127.892v-28.68H7.513V87.274h46.609v-12.4H7.513v-12.86h38.003L.099 0h22.6l32.556 45.07c3.617 5.144 6.44 9.611 8.487 13.385 1.788-3.05 4.89-7.779 9.301-14.186L103.93 0h24.01L82.385 62.013h38.34v12.862h-46.41v12.4h46.41v11.937h-46.41v28.68H54.123z"/></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_app.svg b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_app.svg
new file mode 100644
index 0000000..ebf1188
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_app.svg
@@ -0,0 +1 @@
+<svg t="1627279997305" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11904" width="40" height="40"><path d="M938.7008 669.525333L938.7008 249.412267c0-90.555733-73.5232-164.078933-164.1472-164.078933L249.378133 85.333333c-90.555733 0-164.078933 73.48906699-164.078933 164.078933l0 525.2096c0 90.555733 73.454933 164.078933 164.07893301 164.078933l525.20959999 0c80.725333 0 147.8656-58.368 161.553067-135.099733-43.52-18.8416-232.106667-100.283733-330.376533-147.182933-74.786133 90.589867-153.088 144.930133-271.121067 144.930133s-196.81279999-72.704-187.357867-161.655467c6.2464-58.402133 46.2848-153.9072 220.296533-137.5232 91.682133 8.6016 133.666133 25.736533 208.418133 50.414933 19.3536-35.4304 35.4304-74.513067 47.616-116.0192L292.0448 436.565333l0-32.8704 164.0448 0 0-58.9824L256 344.712533l1e-8-36.181333 200.12373299 0L456.123733 223.3344c0 0 1.809067-13.312 16.520533-13.31200001l82.056533 1e-8 0 98.474667 213.333333 0 0 36.181333-213.333333 1e-8 0 58.98239999 174.045867 0c-16.00853301 65.1264-40.277333 124.962133-70.690133 177.220267C708.608 599.176533 938.7008 669.525333 938.7008 669.525333L938.7008 669.525333 938.7008 669.525333 938.7008 669.525333zM321.57013299 744.994133c-124.7232 0-144.452267-78.7456-137.83039999-111.65013299 6.5536-32.733867 42.666667-75.502933 112.0256-75.50293301 79.6672 0 151.04 20.445867 236.714667 62.088533C472.302933 698.333867 398.370133 744.994133 321.57013299 744.994133L321.57013299 744.994133 321.57013299 744.994133zM321.57013299 744.994133" fill="#1296db" p-id="11905"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_bar.svg b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_bar.svg
new file mode 100644
index 0000000..eb1e1e8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_bar.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279586085" class="icon" viewBox="0 0 1036 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6737" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.46875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M27.587124 336.619083h69.148134a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916A13.978733 13.978733 0 0 0 96.735258 0.011183H27.587124a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m165.880969 0h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-27.584701a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m138.109886 322.629167h-110.525185a27.771084 27.771084 0 0 0-27.584701 28.14385v111.829867a27.771084 27.771084 0 0 0 27.584701 28.14385h110.525185a27.957467 27.957467 0 0 0 27.584701-28.14385v-111.829867a27.957467 27.957467 0 0 0-27.584701-28.14385z m484.596091-322.629167h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-27.5847a13.978733 13.978733 0 0 0-13.978734 13.978733v308.650434a13.978733 13.978733 0 0 0 13.978734 13.978733z m-469.871825 0H428.68358a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916A13.978733 13.978733 0 0 0 428.68358 0.011183h-83.126867a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m594.189361 0h69.148134a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-69.148135a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m-412.279444 126.181367H66.91396A67.470687 67.470687 0 0 0 0.002423 530.830286v425.139878a67.470687 67.470687 0 0 0 66.911537 68.029836h418.802853a67.470687 67.470687 0 0 0 66.911537-68.029836V487.775787a24.788954 24.788954 0 0 0-24.416188-24.975337z m-58.337914 433.899885a42.681733 42.681733 0 0 1-42.495349 43.054498H125.438257a42.681733 42.681733 0 0 1-42.495349-43.054498V590.100115a42.681733 42.681733 0 0 1 42.495349-43.054498h301.940642a42.681733 42.681733 0 0 1 42.495349 43.054498z m525.22761-433.899885a41.749817 41.749817 0 0 0-41.377051 42.122583v55.914934a41.377051 41.377051 0 1 0 82.940485 0v-55.914934a41.749817 41.749817 0 0 0-41.563434-42.122583z m0 223.659734a41.749817 41.749817 0 0 0-41.377051 42.122584V894.65012a45.477479 45.477479 0 0 1-45.291096 45.850246h-159.730327a43.240882 43.240882 0 0 0-43.613649 37.276622A41.9362 41.9362 0 0 0 745.534871 1024h233.538039a57.778765 57.778765 0 0 0 57.405999-58.337914V729.3283a41.749817 41.749817 0 0 0-41.377051-41.9362zM732.488053 322.64035V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-82.940485a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733h82.940485a13.978733 13.978733 0 0 0 13.79235-13.978733zM532.126208 0.011183c-11.36937 0-20.688525 6.337026-20.688526 13.978733v308.650434c0 7.828091 9.319156 13.978733 20.688526 13.978733s20.688525-6.337026 20.688525-13.978733V13.989916c0-7.641708-9.319156-13.978733-20.688525-13.978733z" p-id="6738" fill="#1977FD"></path><path d="M745.534871 462.80045a41.749817 41.749817 0 0 0-41.377051 42.122583v252.549117a41.377051 41.377051 0 1 0 82.940485 0V504.923033A41.749817 41.749817 0 0 0 745.534871 462.80045" p-id="6739" fill="#1977FD"></path></svg>
diff --git a/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_pc.svg b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_pc.svg
new file mode 100644
index 0000000..2a75277
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_pc.svg
@@ -0,0 +1 @@
+<svg t="1627279878333" class="icon" viewBox="0 0 1285 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8535" width="40" height="40"><path d="M1141.76 855.04h-286.72c0 40.96 30.72 71.68 71.68 71.68h107.52c20.48 0 35.84 15.36 35.84 35.84s-15.36 35.84-35.84 35.84h-783.36c-20.48 0-35.84-15.36-35.84-35.84s15.36-35.84 35.84-35.84h107.52c40.96 0 71.68-30.72 71.68-71.68h-286.72c-76.8 0-143.36-61.44-143.36-143.36v-568.32c0-76.8 61.44-143.36 143.36-143.36h993.28c76.8 0 143.36 61.44 143.36 143.36v568.32c5.12 76.8-56.32 143.36-138.24 143.36z m71.68-711.68c0-40.96-30.72-71.68-71.68-71.68h-993.28c-40.96 0-71.68 30.72-71.68 71.68v568.32c0 40.96 30.72 71.68 71.68 71.68h993.28c40.96 0 71.68-30.72 71.68-71.68v-568.32z m-143.36 568.32h-855.04c-40.96 0-71.68-30.72-71.68-71.68v-424.96c0-40.96 30.72-71.68 71.68-71.68h855.04c40.96 0 71.68 30.72 71.68 71.68v424.96c0 40.96-30.72 71.68-71.68 71.68z" p-id="8536" fill="#1977FD"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_qr.svg b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_qr.svg
new file mode 100644
index 0000000..4833750
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_qr.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279238245" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4112" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#1977FD" p-id="4113"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_wap.svg b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_wap.svg
new file mode 100644
index 0000000..87075db
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/alipay_wap.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645964864184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8460" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><defs><style type="text/css"></style></defs><path d="M768.3 0 255.7 0c-70.8 0-128.1 57.4-128.1 128.1l0 767.8c0 70.8 57.4 128.1 128.1 128.1L512 1024l256.3 0c70.8 0 128.1-57.4 128.1-128.1L896.4 128.1C896.4 57.3 839 0 768.3 0zM383.9 96.1c0-17.7 14.3-32 32-32l192.2 0c17.7 0 32 14.3 32 32l0 0c0 17.7-14.3 32-32 32L415.9 128.1C398.2 128.1 383.9 113.8 383.9 96.1L383.9 96.1zM512 959.9 512 959.9 512 959.9c-35.4 0-64.1-28.8-64.1-64.1 0-35.4 28.7-64.1 64.1-64.1l0 0 0 0c35.4 0 64.1 28.7 64.1 64.1C576.1 931.1 547.4 959.9 512 959.9zM832.3 755.6c0 6.7-5.4 12.2-12.2 12.2L203.9 767.8c-6.7 0-12.2-5.4-12.2-12.2L191.7 204.3c0-6.7 5.4-12.2 12.2-12.2l616.3 0c6.7 0 12.2 5.4 12.2 12.2L832.4 755.6z" p-id="8461" fill="#1977FD"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/pay/icon/mock.svg b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/mock.svg
new file mode 100644
index 0000000..27b09ea
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/mock.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676209854312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3033" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M173.077333 362.666667l91.114667-214.677334a65.6 65.6 0 0 1 86.016-34.773333c11.584 4.906667 24.96 10.282667 40.896 16.448 8.277333 3.2 16.789333 6.464 27.904 10.666667 28.202667 10.709333 39.296 14.933333 46.144 17.642666l51.477333-51.669333c28.181333-28.16 74.112-27.946667 102.570667 0.533333l195.925333 195.925334c16.426667 16.426667 23.445333 38.634667 21.056 59.904H896a42.666667 42.666667 0 0 1 42.666667 42.666666v490.666667a42.666667 42.666667 0 0 1-42.666667 42.666667H128a42.666667 42.666667 0 0 1-42.666667-42.666667V405.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h45.077333z m48.96 0h39.104l169.194667-169.770667-27.328-10.389333c-11.2-4.245333-19.818667-7.530667-28.224-10.794667a1459.2 1459.2 0 0 1-42.197333-17.002667 20.522667 20.522667 0 0 0-26.901334 10.88L222.037333 362.666667z m108.842667 0h454.954667a23.509333 23.509333 0 0 0-5.290667-25.322667l-195.925333-195.925333a23.36 23.36 0 0 0-33.024-0.213334L330.88 362.666667zM128 405.333333v490.666667h768V405.333333H128z m597.333333 320a85.333333 85.333333 0 1 1 0-170.666666 85.333333 85.333333 0 0 1 0 170.666666z m0-42.666666a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z" fill="#4296d5" p-id="3034"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_app.svg b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_app.svg
new file mode 100644
index 0000000..ad40b2a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_app.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279375144" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4399" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#04C361" p-id="4400"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_bar.svg b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_bar.svg
new file mode 100644
index 0000000..11292e6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_bar.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279586085" class="icon" viewBox="0 0 1036 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6737" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.46875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2&quot;) format(&quot;woff2&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff&quot;) format(&quot;woff&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf&quot;) format(&quot;truetype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont&quot;) format(&quot;svg&quot;); }</style></defs><path d="M27.587124 336.619083h69.148134a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916A13.978733 13.978733 0 0 0 96.735258 0.011183H27.587124a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m165.880969 0h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-27.584701a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m138.109886 322.629167h-110.525185a27.771084 27.771084 0 0 0-27.584701 28.14385v111.829867a27.771084 27.771084 0 0 0 27.584701 28.14385h110.525185a27.957467 27.957467 0 0 0 27.584701-28.14385v-111.829867a27.957467 27.957467 0 0 0-27.584701-28.14385z m484.596091-322.629167h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-27.5847a13.978733 13.978733 0 0 0-13.978734 13.978733v308.650434a13.978733 13.978733 0 0 0 13.978734 13.978733z m-469.871825 0H428.68358a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916A13.978733 13.978733 0 0 0 428.68358 0.011183h-83.126867a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m594.189361 0h69.148134a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-69.148135a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m-412.279444 126.181367H66.91396A67.470687 67.470687 0 0 0 0.002423 530.830286v425.139878a67.470687 67.470687 0 0 0 66.911537 68.029836h418.802853a67.470687 67.470687 0 0 0 66.911537-68.029836V487.775787a24.788954 24.788954 0 0 0-24.416188-24.975337z m-58.337914 433.899885a42.681733 42.681733 0 0 1-42.495349 43.054498H125.438257a42.681733 42.681733 0 0 1-42.495349-43.054498V590.100115a42.681733 42.681733 0 0 1 42.495349-43.054498h301.940642a42.681733 42.681733 0 0 1 42.495349 43.054498z m525.22761-433.899885a41.749817 41.749817 0 0 0-41.377051 42.122583v55.914934a41.377051 41.377051 0 1 0 82.940485 0v-55.914934a41.749817 41.749817 0 0 0-41.563434-42.122583z m0 223.659734a41.749817 41.749817 0 0 0-41.377051 42.122584V894.65012a45.477479 45.477479 0 0 1-45.291096 45.850246h-159.730327a43.240882 43.240882 0 0 0-43.613649 37.276622A41.9362 41.9362 0 0 0 745.534871 1024h233.538039a57.778765 57.778765 0 0 0 57.405999-58.337914V729.3283a41.749817 41.749817 0 0 0-41.377051-41.9362zM732.488053 322.64035V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-82.940485a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733h82.940485a13.978733 13.978733 0 0 0 13.79235-13.978733zM532.126208 0.011183c-11.36937 0-20.688525 6.337026-20.688526 13.978733v308.650434c0 7.828091 9.319156 13.978733 20.688526 13.978733s20.688525-6.337026 20.688525-13.978733V13.989916c0-7.641708-9.319156-13.978733-20.688525-13.978733z" p-id="6738" fill="#04C361"/><path d="M745.534871 462.80045a41.749817 41.749817 0 0 0-41.377051 42.122583v252.549117a41.377051 41.377051 0 1 0 82.940485 0V504.923033A41.749817 41.749817 0 0 0 745.534871 462.80045" p-id="6739" fill="#04C361"/></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_lite.svg b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_lite.svg
new file mode 100644
index 0000000..0c925cf
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_lite.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676209433089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2990" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M608.6 290.3c67.1 0 121.7 50.5 121.7 112.9 0 19.4-5.6 38.4-15.7 55.5-15.3 25-39.8 43.5-69.4 52.3-7.9 2.3-13.9 3.2-19.4 3.2-13 0-23.1-10.2-23.1-23.1 0-13 10.2-23.1 23.1-23.1 0.9 0 2.8 0 5.1-0.9 19.9-5.6 35.6-17.1 44.4-32.4 6-9.7 8.8-20.4 8.8-31.5 0-36.6-33.8-66.6-75-66.6-14.4 0-28.2 3.7-40.7 10.6-21.8 12.5-34.7 33.3-34.7 56v193.9c0 39.3-21.8 75.4-57.9 95.8-19.4 11.1-41.2 16.7-63.4 16.7-67.1 0-121.7-50.5-121.7-112.9 0-19.4 5.6-38.4 15.7-55.5 15.3-25 39.8-43.5 69.4-52.3 8.3-2.3 13.9-3.2 19.4-3.2 13 0 23.1 10.2 23.1 23.1 0 13-10.2 23.1-23.1 23.1-0.9 0-2.8 0-5.1 0.9-19.9 6-35.6 17.6-44.4 32.4-6 9.7-8.8 20.4-8.8 31.5 0 36.6 33.8 66.6 75.4 66.6 14.4 0 28.2-3.7 40.7-10.6 21.8-12.5 34.7-33.3 34.7-56V403.3c0-39.3 21.8-75.4 57.9-95.8 19-11.6 40.7-17.2 63-17.2zM510.8 929c231.1 0 418.4-187.3 418.4-418.4S741.9 92.1 510.8 92.1 92.4 279.5 92.4 510.6 279.7 929 510.8 929z m0 22C267.5 951 70.3 753.8 70.3 510.6S267.5 70.1 510.8 70.1s440.5 197.2 440.5 440.5S754.1 951 510.8 951z" p-id="2991" fill="#58bf6b"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_native.svg b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_native.svg
new file mode 100644
index 0000000..bf3ba2b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_native.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279375144" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4399" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2&quot;) format(&quot;woff2&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff&quot;) format(&quot;woff&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf&quot;) format(&quot;truetype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont&quot;) format(&quot;svg&quot;); }</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#04C361" p-id="4400"/></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_pub.svg b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_pub.svg
new file mode 100644
index 0000000..3a6d15b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/pay/icon/wx_pub.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279797174" class="icon" viewBox="0 0 1260 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7665" xmlns:xlink="http://www.w3.org/1999/xlink" width="49.21875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M797.14798 481.753a269.194 269.194 0 0 0 102.892-211.929C900.03998 120.99 779.02998 0 630.15698 0 481.28298 0 360.27398 120.99 360.27398 269.824c0 85.878 40.33 162.462 102.912 211.929A450.974 450.974 0 0 0 309.84198 582.774c-85.543 85.524-132.608 199.208-132.608 320.236 0 25.01 0 51.712 0.197 76.367a44.898 44.898 0 0 0 44.82 44.623h816.01a44.8 44.8 0 0 0 44.82-44.623V903.01c0-121.009-47.066-234.732-132.609-320.236a451.072 451.072 0 0 0-153.344-101.021z" p-id="7666" fill="#04C361"></path><path d="M1186.18898 580.391A378.644 378.644 0 0 0 1061.81198 473.03a223.783 223.783 0 0 0 64.237-157.657c0-49.742-15.872-96.67-45.746-136.074A225.34 225.34 0 0 0 964.70998 99.9a37.297 37.297 0 0 0-46.14 25.718c-5.592 19.89 5.79 40.724 25.6 46.356 63.114 18.196 107.363 77.135 107.363 143.4a148.913 148.913 0 0 1-81.23 133.06 38.065 38.065 0 0 0-20.363 36.608c1.32 15.203 11.58 28.16 25.975 32.65 125.479 39.601 209.703 155.038 209.703 287.173v63.074c0 20.638 16.62 37.534 37.16 37.711h0.196a37.396 37.396 0 0 0 37.337-37.336V805.06c-0.197-81.644-25.777-159.35-74.142-224.69z m-901.77-62.503a36.982 36.982 0 0 0 25.955-32.65 37.455 37.455 0 0 0-20.362-36.628 148.913 148.913 0 0 1-81.231-133.06c0-66.245 44.071-125.184 107.382-143.4a37.612 37.612 0 0 0 25.58-46.356 37.376 37.376 0 0 0-46.139-25.718 225.32 225.32 0 0 0-115.593 79.4 223.252 223.252 0 0 0-45.746 136.074c0 60.258 23.533 116.381 64.237 157.676A380.475 380.475 0 0 0 74.14498 580.569 373.839 373.839 0 0 0 0.00198 805.258v63.232c0 20.657 16.798 37.356 37.356 37.356h0.197a37.317 37.317 0 0 0 37.14-37.73V805.06c0-132.332 84.401-247.769 209.723-287.173z" p-id="7667" fill="#04C361"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/peoples.svg b/marketing-ui/admin-ui/src/assets/svgs/peoples.svg
new file mode 100644
index 0000000..aab852e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/peoples.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M95.648 118.762c0 5.035-3.563 9.121-7.979 9.121H7.98c-4.416 0-7.979-4.086-7.979-9.121C0 100.519 15.408 83.47 31.152 76.75c-9.099-6.43-15.216-17.863-15.216-30.987v-9.128c0-20.16 14.293-36.518 31.893-36.518s31.894 16.358 31.894 36.518v9.122c0 13.137-6.123 24.556-15.216 30.993 15.738 6.726 31.141 23.769 31.141 42.012z"/><path d="M106.032 118.252h15.867c3.376 0 6.101-3.125 6.101-6.972 0-13.957-11.787-26.984-23.819-32.123 6.955-4.919 11.638-13.66 11.638-23.704v-6.985c0-15.416-10.928-27.926-24.39-27.926-1.674 0-3.306.193-4.89.561 1.936 4.713 3.018 9.974 3.018 15.526v9.121c0 13.137-3.056 23.111-11.066 30.993 14.842 4.41 27.312 23.42 27.541 41.509z"/></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/send.svg b/marketing-ui/admin-ui/src/assets/svgs/send.svg
new file mode 100644
index 0000000..6fbc984
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/send.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724297262365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1396" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M707.91 103c16.28 0 29.522 13.007 29.897 29.195l0.009 0.706v111.878a29.96 29.96 0 0 1-0.898 7.3l171.177-0.001c16.28 0 29.522 13.007 29.897 29.195l0.008 0.706v637.12c0 16.278-13.01 29.518-29.2 29.893l-0.705 0.008H270.884c-16.28 0-29.522-13.007-29.897-29.195l-0.008-0.706V787.274c0-16.514 13.389-29.9 29.905-29.9 16.28 0 29.522 13.007 29.897 29.194l0.008 0.706v101.924h577.4V311.88h-577.4v88.787c0 16.278-13.009 29.518-29.2 29.893l-0.705 0.008c-16.28 0-29.522-13.008-29.897-29.195l-0.008-0.706V281.979c0-16.278 13.009-29.518 29.2-29.893l0.705-0.008h408.019a29.916 29.916 0 0 1-0.89-6.593l-0.008-0.706v-81.978H132.808v407.113h385.787L408.223 456.982c-11.36-11.624-11.329-30.143-0.066-41.729l0.554-0.555c11.625-11.358 30.147-11.327 41.734-0.066l0.555 0.554 161.028 164.762c11.244 11.504 11.344 29.793 0.362 41.42l-0.55 0.565-161.027 161.849c-11.648 11.707-30.583 11.757-42.292 0.11-11.524-11.461-11.754-29.979-0.657-41.723l0.546-0.563 111.319-111.89H102.905c-16.28 0-29.522-13.007-29.897-29.195l-0.008-0.705V132.9c0-16.278 13.01-29.518 29.2-29.893l0.705-0.008H707.91z" p-id="1397"></path></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/assets/svgs/shopping.svg b/marketing-ui/admin-ui/src/assets/svgs/shopping.svg
new file mode 100644
index 0000000..f395bc7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/assets/svgs/shopping.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M42.913 101.36c1.642 0 3.198.332 4.667.996a12.28 12.28 0 013.89 2.772c1.123 1.184 1.987 2.582 2.592 4.193.605 1.612.908 3.318.908 5.118 0 1.8-.303 3.507-.908 5.118-.605 1.611-1.469 3.01-2.593 4.194a13.3 13.3 0 01-3.889 2.843 10.582 10.582 0 01-4.667 1.066c-1.729 0-3.306-.355-4.732-1.066a13.604 13.604 0 01-3.825-2.843c-1.123-1.185-1.988-2.583-2.593-4.194a14.437 14.437 0 01-.907-5.118c0-1.8.302-3.506.907-5.118.605-1.61 1.47-3.009 2.593-4.193a12.515 12.515 0 013.825-2.772c1.426-.664 3.003-.996 4.732-.996zm53.932.285c1.643 0 3.22.331 4.733.995a11.386 11.386 0 013.889 2.772c1.08 1.185 1.945 2.583 2.593 4.194.648 1.61.972 3.317.972 5.118 0 1.8-.324 3.506-.972 5.117-.648 1.611-1.513 3.01-2.593 4.194a12.253 12.253 0 01-3.89 2.843 11 11 0 01-4.732 1.066 10.58 10.58 0 01-4.667-1.066 12.478 12.478 0 01-3.824-2.843c-1.08-1.185-1.945-2.583-2.593-4.194a13.581 13.581 0 01-.973-5.117c0-1.801.325-3.507.973-5.118.648-1.611 1.512-3.01 2.593-4.194a11.559 11.559 0 013.824-2.772 11.212 11.212 0 014.667-.995zm21.781-80.747c2.42 0 4.3.355 5.64 1.066 1.34.71 2.29 1.587 2.852 2.63a6.427 6.427 0 01.778 3.34c-.044 1.185-.195 2.204-.454 3.057-.26.853-.8 2.606-1.62 5.26a589.268 589.268 0 01-2.788 8.743 1236.373 1236.373 0 00-3.047 9.453c-.994 3.128-1.75 5.592-2.269 7.393-1.123 3.79-2.55 6.42-4.278 7.89-1.728 1.469-3.846 2.203-6.352 2.203H39.023l1.945 12.795h65.342c4.148 0 6.223 1.943 6.223 5.828 0 1.896-.41 3.53-1.232 4.905-.821 1.374-2.442 2.061-4.862 2.061H38.505c-1.729 0-3.176-.426-4.343-1.28-1.167-.852-2.14-1.966-2.917-3.34a21.277 21.277 0 01-1.88-4.478 44.128 44.128 0 01-1.102-4.55c-.087-.568-.324-1.942-.713-4.122-.39-2.18-.865-4.904-1.426-8.174l-1.88-10.947c-.692-4.027-1.383-8.079-2.075-12.154-1.642-9.572-3.5-20.234-5.574-31.986H6.87c-1.296 0-2.377-.356-3.24-1.067a9.024 9.024 0 01-2.14-2.558 10.416 10.416 0 01-1.167-3.2C.108 8.53 0 7.488 0 6.54c0-1.896.583-3.46 1.75-4.69C2.917.615 4.494 0 6.482 0h13.095c1.728 0 3.111.284 4.148.853 1.037.569 1.858 1.28 2.463 2.132a8.548 8.548 0 011.297 2.701c.26.948.475 1.754.648 2.417.173.758.346 1.825.519 3.199.173 1.374.345 2.772.518 4.193.26 1.706.519 3.507.778 5.403h88.678z"/></svg>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/components/AppLinkInput/AppLinkSelectDialog.vue b/marketing-ui/admin-ui/src/components/AppLinkInput/AppLinkSelectDialog.vue
new file mode 100644
index 0000000..63f1966
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/AppLinkInput/AppLinkSelectDialog.vue
@@ -0,0 +1,207 @@
+<template>
+  <Dialog v-model="dialogVisible" title="选择链接" width="65%">
+    <div class="h-500px flex gap-8px">
+      <!-- 左侧分组列表 -->
+      <el-scrollbar wrap-class="h-full" ref="groupScrollbar" view-class="flex flex-col">
+        <el-button
+          v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
+          :key="groupIndex"
+          :class="[
+            'm-r-16px m-l-0px! justify-start! w-90px',
+            { active: activeGroup === group.name }
+          ]"
+          ref="groupBtnRefs"
+          :text="activeGroup !== group.name"
+          :type="activeGroup === group.name ? 'primary' : 'default'"
+          @click="handleGroupSelected(group.name)"
+        >
+          {{ group.name }}
+        </el-button>
+      </el-scrollbar>
+      <!-- 右侧链接列表 -->
+      <el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
+        <div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
+          <!-- 分组标题 -->
+          <div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
+          <!-- 链接列表 -->
+          <el-tooltip
+            v-for="(appLink, appLinkIndex) in group.links"
+            :key="appLinkIndex"
+            :content="appLink.path"
+            placement="bottom"
+            :show-after="300"
+          >
+            <el-button
+              class="m-b-8px m-r-8px m-l-0px!"
+              :type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
+              @click="handleAppLinkSelected(appLink)"
+            >
+              {{ appLink.name }}
+            </el-button>
+          </el-tooltip>
+        </div>
+      </el-scrollbar>
+    </div>
+    <!-- 底部对话框操作按钮 -->
+    <template #footer>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+  <Dialog v-model="detailSelectDialog.visible" title="" width="50%">
+    <el-form class="min-h-200px">
+      <el-form-item
+        label="选择分类"
+        v-if="detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST"
+      >
+        <ProductCategorySelect
+          v-model="detailSelectDialog.id"
+          :parent-id="0"
+          @update:model-value="handleProductCategorySelected"
+        />
+      </el-form-item>
+    </el-form>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM, AppLink } from './data'
+import { ButtonInstance, ScrollbarInstance } from 'element-plus'
+import { split } from 'lodash-es'
+import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
+import { getUrlNumberValue } from '@/utils'
+
+// APP 链接选择弹框
+defineOptions({ name: 'AppLinkSelectDialog' })
+// 选中的分组，默认选中第一个
+const activeGroup = ref(APP_LINK_GROUP_LIST[0].name)
+// 选中的 APP 链接
+const activeAppLink = ref({} as AppLink)
+
+/** 打开弹窗 */
+const dialogVisible = ref(false)
+const open = (link: string) => {
+  activeAppLink.value.path = link
+  dialogVisible.value = true
+
+  // 滚动到当前的链接
+  const group = APP_LINK_GROUP_LIST.find((group) =>
+    group.links.some((linkItem) => {
+      const sameLink = isSameLink(linkItem.path, link)
+      if (sameLink) {
+        activeAppLink.value = { ...linkItem, path: link }
+      }
+      return sameLink
+    })
+  )
+  if (group) {
+    // 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
+    nextTick(() => handleGroupSelected(group.name))
+  }
+}
+defineExpose({ open })
+
+// 处理 APP 链接选中
+const handleAppLinkSelected = (appLink: AppLink) => {
+  if (!isSameLink(appLink.path, activeAppLink.value.path)) {
+    activeAppLink.value = appLink
+  }
+  switch (appLink.type) {
+    case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST:
+      detailSelectDialog.value.visible = true
+      detailSelectDialog.value.type = appLink.type
+      // 返显
+      detailSelectDialog.value.id =
+        getUrlNumberValue('id', 'http://127.0.0.1' + activeAppLink.value.path) || undefined
+      break
+    default:
+      break
+  }
+}
+
+// 处理绑定值更新
+const emit = defineEmits<{
+  change: [link: string]
+  appLinkChange: [appLink: AppLink]
+}>()
+const handleSubmit = () => {
+  dialogVisible.value = false
+  emit('change', activeAppLink.value.path)
+  emit('appLinkChange', activeAppLink.value)
+}
+
+// 分组标题引用列表
+const groupTitleRefs = ref<HTMLInputElement[]>([])
+/**
+ * 处理右侧链接列表滚动
+ * @param scrollTop 滚动条的位置
+ */
+const handleScroll = ({ scrollTop }: { scrollTop: number }) => {
+  const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
+    // 获取标题的位置信息
+    const { offsetHeight, offsetTop } = titleEl
+    // 判断标题是否在可视范围内
+    return scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight
+  })
+  // 只需处理一次
+  if (titleEl && activeGroup.value !== titleEl.textContent) {
+    activeGroup.value = titleEl.textContent || ''
+    // 同步左侧的滚动条位置
+    scrollToGroupBtn(activeGroup.value)
+  }
+}
+
+// 右侧滚动条
+const linkScrollbar = ref<ScrollbarInstance>()
+// 处理分组选中
+const handleGroupSelected = (group: string) => {
+  activeGroup.value = group
+  const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
+  if (titleRef) {
+    // 滚动分组标题
+    linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
+  }
+}
+
+// 分组滚动条
+const groupScrollbar = ref<ScrollbarInstance>()
+// 分组引用列表
+const groupBtnRefs = ref<ButtonInstance[]>([])
+// 自动滚动分组按钮，确保分组按钮保持在可视区域内
+const scrollToGroupBtn = (group: string) => {
+  const groupBtn = groupBtnRefs.value
+    .map((btn: ButtonInstance) => btn['ref'])
+    .find((ref: Node) => ref.textContent === group)
+  if (groupBtn) {
+    groupScrollbar.value?.setScrollTop(groupBtn.offsetTop)
+  }
+}
+
+// 是否为相同的链接（不比较参数，只比较链接）
+const isSameLink = (link1: string, link2: string) => {
+  return split(link1, '?', 1)[0] === split(link2, '?', 1)[0]
+}
+
+// 详情选择对话框
+const detailSelectDialog = ref<{
+  visible: boolean
+  id?: number
+  type?: APP_LINK_TYPE_ENUM
+}>({
+  visible: false,
+  id: undefined,
+  type: undefined
+})
+// 处理详情选择
+const handleProductCategorySelected = (id: number) => {
+  const url = new URL(activeAppLink.value.path, 'http://127.0.0.1')
+  // 修改 id 参数
+  url.searchParams.set('id', `${id}`)
+  // 排除域名
+  activeAppLink.value.path = `${url.pathname}${url.search}`
+  // 关闭对话框
+  detailSelectDialog.value.visible = false
+  // 重置 id
+  detailSelectDialog.value.id = undefined
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/AppLinkInput/data.ts b/marketing-ui/admin-ui/src/components/AppLinkInput/data.ts
new file mode 100644
index 0000000..c9e3678
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/AppLinkInput/data.ts
@@ -0,0 +1,236 @@
+// APP 链接分组
+export interface AppLinkGroup {
+  // 分组名称
+  name: string
+  // 链接列表
+  links: AppLink[]
+}
+
+// APP 链接
+export interface AppLink {
+  // 链接名称
+  name: string
+  // 链接地址
+  path: string
+  // 链接的类型
+  type?: APP_LINK_TYPE_ENUM
+}
+
+// APP 链接类型（需要特殊处理，例如商品详情）
+export const enum APP_LINK_TYPE_ENUM {
+  // 拼团活动
+  ACTIVITY_COMBINATION,
+  // 秒杀活动
+  ACTIVITY_SECKILL,
+  // 积分商城活动
+  ACTIVITY_POINT,
+  // 文章详情
+  ARTICLE_DETAIL,
+  // 优惠券详情
+  COUPON_DETAIL,
+  // 自定义页面详情
+  DIY_PAGE_DETAIL,
+  // 品类列表
+  PRODUCT_CATEGORY_LIST,
+  // 商品列表
+  PRODUCT_LIST,
+  // 商品详情
+  PRODUCT_DETAIL_NORMAL,
+  // 拼团商品详情
+  PRODUCT_DETAIL_COMBINATION,
+  // 秒杀商品详情
+  PRODUCT_DETAIL_SECKILL
+}
+
+// APP 链接列表（做一下持久化？）
+export const APP_LINK_GROUP_LIST = [
+  {
+    name: '商城',
+    links: [
+      {
+        name: '首页',
+        path: '/pages/index/index'
+      },
+      {
+        name: '商品分类',
+        path: '/pages/index/category',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST
+      },
+      {
+        name: '购物车',
+        path: '/pages/index/cart'
+      },
+      {
+        name: '个人中心',
+        path: '/pages/index/user'
+      },
+      {
+        name: '商品搜索',
+        path: '/pages/index/search'
+      },
+      {
+        name: '自定义页面',
+        path: '/pages/index/page',
+        type: APP_LINK_TYPE_ENUM.DIY_PAGE_DETAIL
+      },
+      {
+        name: '客服',
+        path: '/pages/chat/index'
+      },
+      {
+        name: '系统设置',
+        path: '/pages/public/setting'
+      },
+      {
+        name: '常见问题',
+        path: '/pages/public/faq'
+      }
+    ]
+  },
+  {
+    name: '商品',
+    links: [
+      {
+        name: '商品列表',
+        path: '/pages/goods/list',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_LIST
+      },
+      {
+        name: '商品详情',
+        path: '/pages/goods/index',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_DETAIL_NORMAL
+      },
+      {
+        name: '拼团商品详情',
+        path: '/pages/goods/groupon',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_DETAIL_COMBINATION
+      },
+      {
+        name: '秒杀商品详情',
+        path: '/pages/goods/seckill',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_DETAIL_SECKILL
+      }
+    ]
+  },
+  {
+    name: '营销活动',
+    links: [
+      {
+        name: '拼团订单',
+        path: '/pages/activity/groupon/order'
+      },
+      {
+        name: '营销商品',
+        path: '/pages/activity/index'
+      },
+      {
+        name: '拼团活动',
+        path: '/pages/activity/groupon/list',
+        type: APP_LINK_TYPE_ENUM.ACTIVITY_COMBINATION
+      },
+      {
+        name: '秒杀活动',
+        path: '/pages/activity/seckill/list',
+        type: APP_LINK_TYPE_ENUM.ACTIVITY_SECKILL
+      },
+      {
+        name: '积分商城活动',
+        path: '/pages/activity/point/list',
+        type: APP_LINK_TYPE_ENUM.ACTIVITY_POINT
+      },
+      {
+        name: '签到中心',
+        path: '/pages/app/sign'
+      },
+      {
+        name: '优惠券中心',
+        path: '/pages/coupon/list'
+      },
+      {
+        name: '优惠券详情',
+        path: '/pages/coupon/detail',
+        type: APP_LINK_TYPE_ENUM.COUPON_DETAIL
+      },
+      {
+        name: '文章详情',
+        path: '/pages/public/richtext',
+        type: APP_LINK_TYPE_ENUM.ARTICLE_DETAIL
+      }
+    ]
+  },
+  {
+    name: '分销商城',
+    links: [
+      {
+        name: '分销中心',
+        path: '/pages/commission/index'
+      },
+      {
+        name: '推广商品',
+        path: '/pages/commission/goods'
+      },
+      {
+        name: '分销订单',
+        path: '/pages/commission/order'
+      },
+      {
+        name: '我的团队',
+        path: '/pages/commission/team'
+      }
+    ]
+  },
+  {
+    name: '支付',
+    links: [
+      {
+        name: '充值余额',
+        path: '/pages/pay/recharge'
+      },
+      {
+        name: '充值记录',
+        path: '/pages/pay/recharge-log'
+      }
+    ]
+  },
+  {
+    name: '用户中心',
+    links: [
+      {
+        name: '用户信息',
+        path: '/pages/user/info'
+      },
+      {
+        name: '用户订单',
+        path: '/pages/order/list'
+      },
+      {
+        name: '售后订单',
+        path: '/pages/order/aftersale/list'
+      },
+      {
+        name: '商品收藏',
+        path: '/pages/user/goods-collect'
+      },
+      {
+        name: '浏览记录',
+        path: '/pages/user/goods-log'
+      },
+      {
+        name: '地址管理',
+        path: '/pages/user/address/list'
+      },
+      {
+        name: '用户佣金',
+        path: '/pages/user/wallet/commission'
+      },
+      {
+        name: '用户余额',
+        path: '/pages/user/wallet/money'
+      },
+      {
+        name: '用户积分',
+        path: '/pages/user/wallet/score'
+      }
+    ]
+  }
+] as AppLinkGroup[]
diff --git a/marketing-ui/admin-ui/src/components/AppLinkInput/index.vue b/marketing-ui/admin-ui/src/components/AppLinkInput/index.vue
new file mode 100644
index 0000000..ff71382
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/AppLinkInput/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-input v-model="appLink" placeholder="输入或选择链接">
+    <template #append>
+      <el-button @click="handleOpenDialog">选择</el-button>
+    </template>
+  </el-input>
+  <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+
+// APP 链接输入框
+defineOptions({ name: 'AppLinkInput' })
+// 定义属性
+const props = defineProps({
+  // 当前选中的链接
+  modelValue: propTypes.string.def('')
+})
+// 当前的链接
+const appLink = ref('')
+// 选择对话框
+const dialogRef = ref()
+// 处理打开对话框
+const handleOpenDialog = () => dialogRef.value?.open(appLink.value)
+// 处理 APP 链接选中
+const handleLinkSelected = (link: string) => (appLink.value = link)
+
+// getter
+watch(
+  () => props.modelValue,
+  () => (appLink.value = props.modelValue),
+  { immediate: true }
+)
+
+// setter
+const emit = defineEmits<{
+  'update:modelValue': [link: string]
+}>()
+watch(
+  () => appLink.value,
+  () => emit('update:modelValue', appLink.value)
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/Backtop/index.ts b/marketing-ui/admin-ui/src/components/Backtop/index.ts
new file mode 100644
index 0000000..96de88d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Backtop/index.ts
@@ -0,0 +1,3 @@
+import Backtop from './src/Backtop.vue'
+
+export { Backtop }
diff --git a/marketing-ui/admin-ui/src/components/Backtop/src/Backtop.vue b/marketing-ui/admin-ui/src/components/Backtop/src/Backtop.vue
new file mode 100644
index 0000000..5d79f51
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Backtop/src/Backtop.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { ElBacktop } from 'element-plus'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'BackTop' })
+
+const { getPrefixCls, variables } = useDesign()
+
+const prefixCls = getPrefixCls('backtop')
+</script>
+
+<template>
+  <ElBacktop
+    :class="`${prefixCls}-backtop`"
+    :target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"
+  />
+</template>
diff --git a/marketing-ui/admin-ui/src/components/Card/index.ts b/marketing-ui/admin-ui/src/components/Card/index.ts
new file mode 100644
index 0000000..f4c0d86
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Card/index.ts
@@ -0,0 +1,3 @@
+import CardTitle from './src/CardTitle.vue'
+
+export { CardTitle }
diff --git a/marketing-ui/admin-ui/src/components/Card/src/CardTitle.vue b/marketing-ui/admin-ui/src/components/Card/src/CardTitle.vue
new file mode 100644
index 0000000..76a8356
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Card/src/CardTitle.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+defineComponent({
+  name: 'CardTitle'
+})
+
+defineProps({
+  title: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <span class="card-title">{{ title }}</span>
+</template>
+
+<style scoped lang="scss">
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+
+  &::before {
+    position: relative;
+    top: 8px;
+    left: -5px;
+    display: inline-block;
+    width: 3px;
+    height: 14px;
+    //background-color: #105cfb;
+    background: var(--el-color-primary);
+    border-radius: 5px;
+    content: '';
+    transform: translateY(-50%);
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/ColorInput/index.vue b/marketing-ui/admin-ui/src/components/ColorInput/index.vue
new file mode 100644
index 0000000..63ff73c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/ColorInput/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <el-input v-model="color">
+    <template #prepend>
+      <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 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/marketing-ui/admin-ui/src/components/ConfigGlobal/index.ts b/marketing-ui/admin-ui/src/components/ConfigGlobal/index.ts
new file mode 100644
index 0000000..dda2462
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/ConfigGlobal/index.ts
@@ -0,0 +1,3 @@
+import ConfigGlobal from './src/ConfigGlobal.vue'
+
+export { ConfigGlobal }
diff --git a/marketing-ui/admin-ui/src/components/ConfigGlobal/src/ConfigGlobal.vue b/marketing-ui/admin-ui/src/components/ConfigGlobal/src/ConfigGlobal.vue
new file mode 100644
index 0000000..af543df
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/ConfigGlobal/src/ConfigGlobal.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { provide, computed, watch, onMounted } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+import { ComponentSize, ElConfigProvider } from 'element-plus'
+import { useLocaleStore } from '@/store/modules/locale'
+import { useWindowSize } from '@vueuse/core'
+import { useAppStore } from '@/store/modules/app'
+import { setCssVar } from '@/utils'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { variables } = useDesign()
+
+const appStore = useAppStore()
+
+const props = defineProps({
+  size: propTypes.oneOf<ComponentSize>(['default', 'small', 'large']).def('default')
+})
+
+provide('configGlobal', props)
+
+// 初始化所有主题色
+onMounted(() => {
+  appStore.setCssVarTheme()
+})
+
+const { width } = useWindowSize()
+
+// 监听窗口变化
+watch(
+  () => width.value,
+  (width: number) => {
+    if (width < 768) {
+      !appStore.getMobile ? appStore.setMobile(true) : undefined
+      setCssVar('--left-menu-min-width', '0')
+      appStore.setCollapse(true)
+      appStore.getLayout !== 'classic' ? appStore.setLayout('classic') : undefined
+    } else {
+      appStore.getMobile ? appStore.setMobile(false) : undefined
+      setCssVar('--left-menu-min-width', '64px')
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+// 多语言相关
+const localeStore = useLocaleStore()
+
+const currentLocale = computed(() => localeStore.currentLocale)
+</script>
+
+<template>
+  <ElConfigProvider
+    :namespace="variables.elNamespace"
+    :locale="currentLocale.elLocale"
+    :message="{ max: 5 }"
+    :size="size"
+  >
+    <slot></slot>
+  </ElConfigProvider>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/ContentDetailWrap/index.ts b/marketing-ui/admin-ui/src/components/ContentDetailWrap/index.ts
new file mode 100644
index 0000000..1871cac
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/ContentDetailWrap/index.ts
@@ -0,0 +1,3 @@
+import ContentDetailWrap from './src/ContentDetailWrap.vue'
+
+export { ContentDetailWrap }
diff --git a/marketing-ui/admin-ui/src/components/ContentDetailWrap/src/ContentDetailWrap.vue b/marketing-ui/admin-ui/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
new file mode 100644
index 0000000..a9eacc0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'ContentDetailWrap' })
+
+const { t } = useI18n()
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('content-detail-wrap')
+
+defineProps({
+  title: propTypes.string.def(''),
+  message: propTypes.string.def('')
+})
+const emit = defineEmits(['back'])
+const offset = ref(85)
+const contentDetailWrap = ref()
+onMounted(() => {
+  offset.value = contentDetailWrap.value.getBoundingClientRect().top
+})
+</script>
+
+<template>
+  <div ref="contentDetailWrap" :class="[`${prefixCls}-container`]">
+    <Sticky :offset="offset">
+      <div
+        :class="[
+          `${prefixCls}-header`,
+          'flex b-b-1 h-50px items-center text-center bg-white pr-10px'
+        ]"
+      >
+        <div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']">
+          <ElButton @click="emit('back')">
+            <Icon class="mr-5px" icon="ep:arrow-left" />
+            {{ t('common.back') }}
+          </ElButton>
+        </div>
+        <div :class="[`${prefixCls}-header__title`, 'flex flex-1  justify-center']">
+          <slot name="title">
+            <label class="text-16px font-700">{{ title }}</label>
+          </slot>
+        </div>
+        <div :class="[`${prefixCls}-header__right`, 'flex  pl-10px pr-10px']">
+          <slot name="right"></slot>
+        </div>
+      </div>
+    </Sticky>
+    <div style="padding: var(--app-content-padding)">
+      <ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never">
+        <div>
+          <slot></slot>
+        </div>
+      </ElCard>
+    </div>
+  </div>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/ContentWrap/index.ts b/marketing-ui/admin-ui/src/components/ContentWrap/index.ts
new file mode 100644
index 0000000..8c22cc8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/ContentWrap/index.ts
@@ -0,0 +1,3 @@
+import ContentWrap from './src/ContentWrap.vue'
+
+export { ContentWrap }
diff --git a/marketing-ui/admin-ui/src/components/ContentWrap/src/ContentWrap.vue b/marketing-ui/admin-ui/src/components/ContentWrap/src/ContentWrap.vue
new file mode 100644
index 0000000..e603596
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/ContentWrap/src/ContentWrap.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'ContentWrap' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('content-wrap')
+
+defineProps({
+  title: propTypes.string.def(''),
+  message: propTypes.string.def(''),
+  bodyStyle: propTypes.object.def({ padding: '10px' })
+})
+</script>
+
+<template>
+  <ElCard :body-style="bodyStyle" :class="[prefixCls, 'mb-15px']" shadow="never">
+    <template v-if="title" #header>
+      <div class="flex items-center">
+        <span class="text-16px font-700">{{ title }}</span>
+        <ElTooltip v-if="message" effect="dark" placement="right">
+          <template #content>
+            <div class="max-w-200px">{{ message }}</div>
+          </template>
+          <Icon :size="14" class="ml-5px" icon="ep:question-filled" />
+        </ElTooltip>
+        <div class="flex flex-grow pl-20px">
+          <slot name="header"></slot>
+        </div>
+      </div>
+    </template>
+    <slot></slot>
+  </ElCard>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/CountTo/index.ts b/marketing-ui/admin-ui/src/components/CountTo/index.ts
new file mode 100644
index 0000000..2119f02
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/CountTo/index.ts
@@ -0,0 +1,3 @@
+import CountTo from './src/CountTo.vue'
+
+export { CountTo }
diff --git a/marketing-ui/admin-ui/src/components/CountTo/src/CountTo.vue b/marketing-ui/admin-ui/src/components/CountTo/src/CountTo.vue
new file mode 100644
index 0000000..7a19bec
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/CountTo/src/CountTo.vue
@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { isNumber } from '@/utils/is'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'CountTo' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('count-to')
+
+const props = defineProps({
+  startVal: propTypes.number.def(0), // 开始播放值
+  endVal: propTypes.number.def(2021), // 最终值
+  duration: propTypes.number.def(3000), // 动画时长
+  autoplay: propTypes.bool.def(true), // 是否自动播放动画, 默认播放
+  decimals: propTypes.number.validate((value: number) => value >= 0).def(0), // 显示的小数位数, 默认不显示小数
+  decimal: propTypes.string.def('.'), // 小数分隔符号, 默认为点
+  separator: propTypes.string.def(','), // 数字每三位的分隔符, 默认为逗号
+  prefix: propTypes.string.def(''), // 前缀, 数值前面显示的内容
+  suffix: propTypes.string.def(''), // 后缀, 数值后面显示的内容
+  useEasing: propTypes.bool.def(true), // 是否使用缓动效果, 默认启用
+  easingFn: {
+    type: Function as PropType<(t: number, b: number, c: number, d: number) => number>,
+    default(t: number, b: number, c: number, d: number) {
+      return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
+    } // 缓动函数
+  }
+})
+
+const emit = defineEmits(['mounted', 'callback'])
+
+const formatNumber = (num: number | string) => {
+  const { decimals, decimal, separator, suffix, prefix } = props
+  num = Number(num).toFixed(decimals)
+  num += ''
+  const x = num.split('.')
+  let x1 = x[0]
+  const x2 = x.length > 1 ? decimal + x[1] : ''
+  const rgx = /(\d+)(\d{3})/
+  if (separator && !isNumber(separator)) {
+    while (rgx.test(x1)) {
+      x1 = x1.replace(rgx, '$1' + separator + '$2')
+    }
+  }
+  return prefix + x1 + x2 + suffix
+}
+
+const state = reactive<{
+  localStartVal: number
+  printVal: number | null
+  displayValue: string
+  paused: boolean
+  localDuration: number | null
+  startTime: number | null
+  timestamp: number | null
+  rAF: any
+  remaining: number | null
+}>({
+  localStartVal: props.startVal,
+  displayValue: formatNumber(props.startVal),
+  printVal: null,
+  paused: false,
+  localDuration: props.duration,
+  startTime: null,
+  timestamp: null,
+  remaining: null,
+  rAF: null
+})
+
+const displayValue = toRef(state, 'displayValue')
+
+onMounted(() => {
+  if (props.autoplay) {
+    start()
+  }
+  emit('mounted')
+})
+
+const getCountDown = computed(() => {
+  return props.startVal > props.endVal
+})
+
+watch([() => props.startVal, () => props.endVal], () => {
+  if (props.autoplay) {
+    start()
+  }
+})
+
+const start = () => {
+  const { startVal, duration } = props
+  state.localStartVal = startVal
+  state.startTime = null
+  state.localDuration = duration
+  state.paused = false
+  state.rAF = requestAnimationFrame(count)
+}
+
+const pauseResume = () => {
+  if (state.paused) {
+    resume()
+    state.paused = false
+  } else {
+    pause()
+    state.paused = true
+  }
+}
+
+const pause = () => {
+  cancelAnimationFrame(state.rAF)
+}
+
+const resume = () => {
+  state.startTime = null
+  state.localDuration = +(state.remaining as number)
+  state.localStartVal = +(state.printVal as number)
+  requestAnimationFrame(count)
+}
+
+const reset = () => {
+  state.startTime = null
+  cancelAnimationFrame(state.rAF)
+  state.displayValue = formatNumber(props.startVal)
+}
+
+const count = (timestamp: number) => {
+  const { useEasing, easingFn, endVal } = props
+  if (!state.startTime) state.startTime = timestamp
+  state.timestamp = timestamp
+  const progress = timestamp - state.startTime
+  state.remaining = (state.localDuration as number) - progress
+  if (useEasing) {
+    if (unref(getCountDown)) {
+      state.printVal =
+        state.localStartVal -
+        easingFn(progress, 0, state.localStartVal - endVal, state.localDuration as number)
+    } else {
+      state.printVal = easingFn(
+        progress,
+        state.localStartVal,
+        endVal - state.localStartVal,
+        state.localDuration as number
+      )
+    }
+  } else {
+    if (unref(getCountDown)) {
+      state.printVal =
+        state.localStartVal -
+        (state.localStartVal - endVal) * (progress / (state.localDuration as number))
+    } else {
+      state.printVal =
+        state.localStartVal +
+        (endVal - state.localStartVal) * (progress / (state.localDuration as number))
+    }
+  }
+  if (unref(getCountDown)) {
+    state.printVal = state.printVal < endVal ? endVal : state.printVal
+  } else {
+    state.printVal = state.printVal > endVal ? endVal : state.printVal
+  }
+  state.displayValue = formatNumber(state.printVal!)
+  if (progress < (state.localDuration as number)) {
+    state.rAF = requestAnimationFrame(count)
+  } else {
+    emit('callback')
+  }
+}
+
+defineExpose({
+  pauseResume,
+  reset,
+  start,
+  pause
+})
+</script>
+
+<template>
+  <span :class="prefixCls">
+    {{ displayValue }}
+  </span>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/Crontab/index.ts b/marketing-ui/admin-ui/src/components/Crontab/index.ts
new file mode 100644
index 0000000..6beeef8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Crontab/index.ts
@@ -0,0 +1,2 @@
+import Crontab from './src/Crontab.vue'
+export { Crontab }
diff --git a/marketing-ui/admin-ui/src/components/Crontab/src/Crontab.vue b/marketing-ui/admin-ui/src/components/Crontab/src/Crontab.vue
new file mode 100644
index 0000000..0914bb7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Crontab/src/Crontab.vue
@@ -0,0 +1,1015 @@
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+import { PropType } from 'vue'
+
+defineOptions({ name: 'Crontab' })
+
+interface shortcutsType {
+  text: string
+  value: string
+}
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '* * * * * ?'
+  },
+  shortcuts: { type: Array as PropType<shortcutsType[]>, default: () => [] }
+})
+const defaultValue = ref('')
+const dialogVisible = ref(false)
+const getYear = () => {
+  let v: number[] = []
+  let y = new Date().getFullYear()
+  for (let i = 0; i < 11; i++) {
+    v.push(y + i)
+  }
+  return v
+}
+const cronValue = reactive({
+  second: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2
+    },
+    loop: {
+      start: 0,
+      end: 1
+    },
+    appoint: [] as string[]
+  },
+  minute: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2
+    },
+    loop: {
+      start: 0,
+      end: 1
+    },
+    appoint: [] as string[]
+  },
+  hour: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2
+    },
+    loop: {
+      start: 0,
+      end: 1
+    },
+    appoint: [] as string[]
+  },
+  day: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2
+    },
+    loop: {
+      start: 1,
+      end: 1
+    },
+    appoint: [] as string[]
+  },
+  month: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2
+    },
+    loop: {
+      start: 1,
+      end: 1
+    },
+    appoint: [] as string[]
+  },
+  week: {
+    type: '5',
+    range: {
+      start: '2',
+      end: '3'
+    },
+    loop: {
+      start: 0,
+      end: '2'
+    },
+    last: '2',
+    appoint: [] as string[]
+  },
+  year: {
+    type: '-1',
+    range: {
+      start: getYear()[0],
+      end: getYear()[1]
+    },
+    loop: {
+      start: getYear()[0],
+      end: 1
+    },
+    appoint: [] as string[]
+  }
+})
+const data = reactive({
+  second: ['0', '5', '15', '20', '25', '30', '35', '40', '45', '50', '55', '59'],
+  minute: ['0', '5', '15', '20', '25', '30', '35', '40', '45', '50', '55', '59'],
+  hour: [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23'
+  ],
+  day: [
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+    '24',
+    '25',
+    '26',
+    '27',
+    '28',
+    '29',
+    '30',
+    '31'
+  ],
+  month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+  week: [
+    {
+      value: '1',
+      label: '周日'
+    },
+    {
+      value: '2',
+      label: '周一'
+    },
+    {
+      value: '3',
+      label: '周二'
+    },
+    {
+      value: '4',
+      label: '周三'
+    },
+    {
+      value: '5',
+      label: '周四'
+    },
+    {
+      value: '6',
+      label: '周五'
+    },
+    {
+      value: '7',
+      label: '周六'
+    }
+  ],
+  year: getYear()
+})
+
+const value_second = computed(() => {
+  let v = cronValue.second
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else {
+    return '*'
+  }
+})
+const value_minute = computed(() => {
+  let v = cronValue.minute
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else {
+    return '*'
+  }
+})
+const value_hour = computed(() => {
+  let v = cronValue.hour
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else {
+    return '*'
+  }
+})
+const value_day = computed(() => {
+  let v = cronValue.day
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else if (v.type == '4') {
+    return 'L'
+  } else if (v.type == '5') {
+    return '?'
+  } else {
+    return '*'
+  }
+})
+const value_month = computed(() => {
+  let v = cronValue.month
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else {
+    return '*'
+  }
+})
+const value_week = computed(() => {
+  let v = cronValue.week
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.end + '#' + v.loop.start
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else if (v.type == '4') {
+    return v.last + 'L'
+  } else if (v.type == '5') {
+    return '?'
+  } else {
+    return '*'
+  }
+})
+const value_year = computed(() => {
+  let v = cronValue.year
+  if (v.type == '-1') {
+    return ''
+  } else if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : ''
+  } else {
+    return ''
+  }
+})
+watch(
+  () => cronValue.week.type,
+  (val) => {
+    if (val != '5') {
+      cronValue.day.type = '5'
+    }
+  }
+)
+watch(
+  () => cronValue.day.type,
+  (val) => {
+    if (val != '5') {
+      cronValue.week.type = '5'
+    }
+  }
+)
+watch(
+  () => props.modelValue,
+  () => {
+    defaultValue.value = props.modelValue
+  }
+)
+onMounted(() => {
+  defaultValue.value = props.modelValue
+})
+const emit = defineEmits(['update:modelValue'])
+const select = ref()
+watch(
+  () => select.value,
+  () => {
+    if (select.value == 'custom') {
+      open()
+    } else {
+      defaultValue.value = select.value
+      emit('update:modelValue', defaultValue.value)
+    }
+  }
+)
+const open = () => {
+  set()
+  dialogVisible.value = true
+}
+const set = () => {
+  defaultValue.value = props.modelValue
+  let arr = (props.modelValue || '* * * * * ?').split(' ')
+  //简单检查
+  if (arr.length < 6) {
+    ElMessage.warning('cron表达式错误，已转换为默认表达式')
+    arr = '* * * * * ?'.split(' ')
+  }
+
+  //秒
+  if (arr[0] == '*') {
+    cronValue.second.type = '0'
+  } else if (arr[0].includes('-')) {
+    cronValue.second.type = '1'
+    cronValue.second.range.start = Number(arr[0].split('-')[0])
+    cronValue.second.range.end = Number(arr[0].split('-')[1])
+  } else if (arr[0].includes('/')) {
+    cronValue.second.type = '2'
+    cronValue.second.loop.start = Number(arr[0].split('/')[0])
+    cronValue.second.loop.end = Number(arr[0].split('/')[1])
+  } else {
+    cronValue.second.type = '3'
+    cronValue.second.appoint = arr[0].split(',')
+  }
+  //分
+  if (arr[1] == '*') {
+    cronValue.minute.type = '0'
+  } else if (arr[1].includes('-')) {
+    cronValue.minute.type = '1'
+    cronValue.minute.range.start = Number(arr[1].split('-')[0])
+    cronValue.minute.range.end = Number(arr[1].split('-')[1])
+  } else if (arr[1].includes('/')) {
+    cronValue.minute.type = '2'
+    cronValue.minute.loop.start = Number(arr[1].split('/')[0])
+    cronValue.minute.loop.end = Number(arr[1].split('/')[1])
+  } else {
+    cronValue.minute.type = '3'
+    cronValue.minute.appoint = arr[1].split(',')
+  }
+  //小时
+  if (arr[2] == '*') {
+    cronValue.hour.type = '0'
+  } else if (arr[2].includes('-')) {
+    cronValue.hour.type = '1'
+    cronValue.hour.range.start = Number(arr[2].split('-')[0])
+    cronValue.hour.range.end = Number(arr[2].split('-')[1])
+  } else if (arr[2].includes('/')) {
+    cronValue.hour.type = '2'
+    cronValue.hour.loop.start = Number(arr[2].split('/')[0])
+    cronValue.hour.loop.end = Number(arr[2].split('/')[1])
+  } else {
+    cronValue.hour.type = '3'
+    cronValue.hour.appoint = arr[2].split(',')
+  }
+  //日
+  if (arr[3] == '*') {
+    cronValue.day.type = '0'
+  } else if (arr[3] == 'L') {
+    cronValue.day.type = '4'
+  } else if (arr[3] == '?') {
+    cronValue.day.type = '5'
+  } else if (arr[3].includes('-')) {
+    cronValue.day.type = '1'
+    cronValue.day.range.start = Number(arr[3].split('-')[0])
+    cronValue.day.range.end = Number(arr[3].split('-')[1])
+  } else if (arr[3].includes('/')) {
+    cronValue.day.type = '2'
+    cronValue.day.loop.start = Number(arr[3].split('/')[0])
+    cronValue.day.loop.end = Number(arr[3].split('/')[1])
+  } else {
+    cronValue.day.type = '3'
+    cronValue.day.appoint = arr[3].split(',')
+  }
+  //月
+  if (arr[4] == '*') {
+    cronValue.month.type = '0'
+  } else if (arr[4].includes('-')) {
+    cronValue.month.type = '1'
+    cronValue.month.range.start = Number(arr[4].split('-')[0])
+    cronValue.month.range.end = Number(arr[4].split('-')[1])
+  } else if (arr[4].includes('/')) {
+    cronValue.month.type = '2'
+    cronValue.month.loop.start = Number(arr[4].split('/')[0])
+    cronValue.month.loop.end = Number(arr[4].split('/')[1])
+  } else {
+    cronValue.month.type = '3'
+    cronValue.month.appoint = arr[4].split(',')
+  }
+  //周
+  if (arr[5] == '*') {
+    cronValue.week.type = '0'
+  } else if (arr[5] == '?') {
+    cronValue.week.type = '5'
+  } else if (arr[5].includes('-')) {
+    cronValue.week.type = '1'
+    cronValue.week.range.start = arr[5].split('-')[0]
+    cronValue.week.range.end = arr[5].split('-')[1]
+  } else if (arr[5].includes('#')) {
+    cronValue.week.type = '2'
+    cronValue.week.loop.start = Number(arr[5].split('#')[1])
+    cronValue.week.loop.end = arr[5].split('#')[0]
+  } else if (arr[5].includes('L')) {
+    cronValue.week.type = '4'
+    cronValue.week.last = arr[5].split('L')[0]
+  } else {
+    cronValue.week.type = '3'
+    cronValue.week.appoint = arr[5].split(',')
+  }
+  //年
+  if (!arr[6]) {
+    cronValue.year.type = '-1'
+  } else if (arr[6] == '*') {
+    cronValue.year.type = '0'
+  } else if (arr[6].includes('-')) {
+    cronValue.year.type = '1'
+    cronValue.year.range.start = Number(arr[6].split('-')[0])
+    cronValue.year.range.end = Number(arr[6].split('-')[1])
+  } else if (arr[6].includes('/')) {
+    cronValue.year.type = '2'
+    cronValue.year.loop.start = Number(arr[6].split('/')[1])
+    cronValue.year.loop.end = Number(arr[6].split('/')[0])
+  } else {
+    cronValue.year.type = '3'
+    cronValue.year.appoint = arr[6].split(',')
+  }
+}
+const submit = () => {
+  let year = value_year.value ? ' ' + value_year.value : ''
+  defaultValue.value =
+    value_second.value +
+    ' ' +
+    value_minute.value +
+    ' ' +
+    value_hour.value +
+    ' ' +
+    value_day.value +
+    ' ' +
+    value_month.value +
+    ' ' +
+    value_week.value +
+    year
+  emit('update:modelValue', defaultValue.value)
+  dialogVisible.value = false
+}
+
+const inputChange = () => {
+  emit('update:modelValue', defaultValue.value)
+}
+</script>
+<template>
+  <el-input v-model="defaultValue" class="input-with-select" v-bind="$attrs" @input="inputChange">
+    <template #append>
+      <el-select v-model="select" placeholder="生成器" style="width: 115px">
+        <el-option label="每分钟" value="0 * * * * ?" />
+        <el-option label="每小时" value="0 0 * * * ?" />
+        <el-option label="每天零点" value="0 0 0 * * ?" />
+        <el-option label="每月一号零点" value="0 0 0 1 * ?" />
+        <el-option label="每月最后一天零点" value="0 0 0 L * ?" />
+        <el-option label="每周星期日零点" value="0 0 0 ? * 1" />
+        <el-option
+          v-for="(item, index) in shortcuts"
+          :key="index"
+          :label="item.text"
+          :value="item.value"
+        />
+        <el-option label="自定义" value="custom" />
+      </el-select>
+    </template>
+  </el-input>
+
+  <el-dialog
+    v-model="dialogVisible"
+    :width="580"
+    append-to-body
+    destroy-on-close
+    title="cron规则生成器"
+  >
+    <div class="sc-cron">
+      <el-tabs>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>秒</h2>
+              <h4>{{ value_second }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.second.type">
+                <el-radio-button value="0">任意值</el-radio-button>
+                <el-radio-button value="1">范围</el-radio-button>
+                <el-radio-button value="2">间隔</el-radio-button>
+                <el-radio-button value="3">指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="cronValue.second.type == '1'" label="范围">
+              <el-input-number
+                v-model="cronValue.second.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number
+                v-model="cronValue.second.range.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item v-if="cronValue.second.type == '2'" label="间隔">
+              <el-input-number
+                v-model="cronValue.second.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              秒开始，每
+              <el-input-number
+                v-model="cronValue.second.loop.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              秒执行一次
+            </el-form-item>
+            <el-form-item v-if="cronValue.second.type == '3'" label="指定">
+              <el-select v-model="cronValue.second.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.second"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>分钟</h2>
+              <h4>{{ value_minute }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.minute.type">
+                <el-radio-button value="0">任意值</el-radio-button>
+                <el-radio-button value="1">范围</el-radio-button>
+                <el-radio-button value="2">间隔</el-radio-button>
+                <el-radio-button value="3">指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="cronValue.minute.type == '1'" label="范围">
+              <el-input-number
+                v-model="cronValue.minute.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number
+                v-model="cronValue.minute.range.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item v-if="cronValue.minute.type == '2'" label="间隔">
+              <el-input-number
+                v-model="cronValue.minute.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              分钟开始，每
+              <el-input-number
+                v-model="cronValue.minute.loop.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              分钟执行一次
+            </el-form-item>
+            <el-form-item v-if="cronValue.minute.type == '3'" label="指定">
+              <el-select v-model="cronValue.minute.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.minute"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>小时</h2>
+              <h4>{{ value_hour }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.hour.type">
+                <el-radio-button value="0">任意值</el-radio-button>
+                <el-radio-button value="1">范围</el-radio-button>
+                <el-radio-button value="2">间隔</el-radio-button>
+                <el-radio-button value="3">指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="cronValue.hour.type == '1'" label="范围">
+              <el-input-number
+                v-model="cronValue.hour.range.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number
+                v-model="cronValue.hour.range.end"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item v-if="cronValue.hour.type == '2'" label="间隔">
+              <el-input-number
+                v-model="cronValue.hour.loop.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              小时开始，每
+              <el-input-number
+                v-model="cronValue.hour.loop.end"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              小时执行一次
+            </el-form-item>
+            <el-form-item v-if="cronValue.hour.type == '3'" label="指定">
+              <el-select v-model="cronValue.hour.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.hour"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>日</h2>
+              <h4>{{ value_day }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.day.type">
+                <el-radio-button value="0">任意值</el-radio-button>
+                <el-radio-button value="1">范围</el-radio-button>
+                <el-radio-button value="2">间隔</el-radio-button>
+                <el-radio-button value="3">指定</el-radio-button>
+                <el-radio-button value="4">本月最后一天</el-radio-button>
+                <el-radio-button value="5">不指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="cronValue.day.type == '1'" label="范围">
+              <el-input-number
+                v-model="cronValue.day.range.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number
+                v-model="cronValue.day.range.end"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item v-if="cronValue.day.type == '2'" label="间隔">
+              <el-input-number
+                v-model="cronValue.day.loop.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              号开始，每
+              <el-input-number
+                v-model="cronValue.day.loop.end"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              天执行一次
+            </el-form-item>
+            <el-form-item v-if="cronValue.day.type == '3'" label="指定">
+              <el-select v-model="cronValue.day.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.day"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>月</h2>
+              <h4>{{ value_month }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.month.type">
+                <el-radio-button value="0">任意值</el-radio-button>
+                <el-radio-button value="1">范围</el-radio-button>
+                <el-radio-button value="2">间隔</el-radio-button>
+                <el-radio-button value="3">指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="cronValue.month.type == '1'" label="范围">
+              <el-input-number
+                v-model="cronValue.month.range.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number
+                v-model="cronValue.month.range.end"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item v-if="cronValue.month.type == '2'" label="间隔">
+              <el-input-number
+                v-model="cronValue.month.loop.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              月开始，每
+              <el-input-number
+                v-model="cronValue.month.loop.end"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              月执行一次
+            </el-form-item>
+            <el-form-item v-if="cronValue.month.type == '3'" label="指定">
+              <el-select v-model="cronValue.month.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.month"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>周</h2>
+              <h4>{{ value_week }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form>
+              <el-form-item label="类型">
+                <el-radio-group v-model="cronValue.week.type">
+                  <el-radio-button value="0">任意值</el-radio-button>
+                  <el-radio-button value="1">范围</el-radio-button>
+                  <el-radio-button value="2">间隔</el-radio-button>
+                  <el-radio-button value="3">指定</el-radio-button>
+                  <el-radio-button value="4">本月最后一周</el-radio-button>
+                  <el-radio-button value="5">不指定</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item v-if="cronValue.week.type == '1'" label="范围">
+                <el-select v-model="cronValue.week.range.start">
+                  <el-option
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+                <span style="padding: 0 15px">-</span>
+                <el-select v-model="cronValue.week.range.end">
+                  <el-option
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item v-if="cronValue.week.type == '2'" label="间隔">
+                第
+                <el-input-number
+                  v-model="cronValue.week.loop.start"
+                  :max="4"
+                  :min="1"
+                  controls-position="right"
+                />
+                周的星期
+                <el-select v-model="cronValue.week.loop.end">
+                  <el-option
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+                执行一次
+              </el-form-item>
+              <el-form-item v-if="cronValue.week.type == '3'" label="指定">
+                <el-select v-model="cronValue.week.appoint" multiple style="width: 100%">
+                  <el-option
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item v-if="cronValue.week.type == '4'" label="最后一周">
+                <el-select v-model="cronValue.week.last">
+                  <el-option
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>年</h2>
+              <h4>{{ value_year }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.year.type">
+                <el-radio-button value="-1">忽略</el-radio-button>
+                <el-radio-button value="0">任意值</el-radio-button>
+                <el-radio-button value="1">范围</el-radio-button>
+                <el-radio-button value="2">间隔</el-radio-button>
+                <el-radio-button value="3">指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="cronValue.year.type == '1'" label="范围">
+              <el-input-number v-model="cronValue.year.range.start" controls-position="right" />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number v-model="cronValue.year.range.end" controls-position="right" />
+            </el-form-item>
+            <el-form-item v-if="cronValue.year.type == '2'" label="间隔">
+              <el-input-number v-model="cronValue.year.loop.start" controls-position="right" />
+              年开始，每
+              <el-input-number
+                v-model="cronValue.year.loop.end"
+                :min="1"
+                controls-position="right"
+              />
+              年执行一次
+            </el-form-item>
+            <el-form-item v-if="cronValue.year.type == '3'" label="指定">
+              <el-select v-model="cronValue.year.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.year"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <template #footer>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="submit()">确 认</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.sc-cron:deep(.el-tabs__item) {
+  height: auto;
+  padding: 0 7px;
+  line-height: 1;
+  vertical-align: bottom;
+}
+
+.sc-cron-num {
+  width: 100%;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.sc-cron-num h2 {
+  margin-bottom: 15px;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.sc-cron-num h4 {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 15px;
+  font-size: 12px;
+  line-height: 30px;
+  background: var(--el-color-primary-light-9);
+  border-radius: 4px;
+}
+
+.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {
+  color: #fff;
+  background: var(--el-color-primary);
+}
+
+[data-theme='dark'] .sc-cron-num h4 {
+  background: var(--el-color-white);
+}
+
+.input-with-select .el-input-group__prepend {
+  background-color: var(--el-fill-color-blank);
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Cropper/index.ts b/marketing-ui/admin-ui/src/components/Cropper/index.ts
new file mode 100644
index 0000000..8fcc618
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Cropper/index.ts
@@ -0,0 +1,4 @@
+import CropperImage from './src/Cropper.vue'
+import CropperAvatar from './src/CropperAvatar.vue'
+
+export { CropperImage, CropperAvatar }
diff --git a/marketing-ui/admin-ui/src/components/Cropper/src/CopperModal.vue b/marketing-ui/admin-ui/src/components/Cropper/src/CopperModal.vue
new file mode 100644
index 0000000..27052b8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Cropper/src/CopperModal.vue
@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <Dialog
+      v-model="dialogVisible"
+      :canFullscreen="false"
+      :title="t('cropper.modalTitle')"
+      maxHeight="380px"
+      width="800px"
+    >
+      <div :class="prefixCls">
+        <div :class="`${prefixCls}-left`">
+          <div :class="`${prefixCls}-cropper`">
+            <CropperImage
+              v-if="src"
+              :circled="circled"
+              :src="src"
+              height="300px"
+              @cropend="handleCropend"
+              @ready="handleReady"
+            />
+          </div>
+
+          <div :class="`${prefixCls}-toolbar`">
+            <el-upload :beforeUpload="handleBeforeUpload" :fileList="[]" accept="image/*">
+              <el-tooltip :content="t('cropper.selectImage')" placement="bottom">
+                <XButton preIcon="ant-design:upload-outlined" type="primary" />
+              </el-tooltip>
+            </el-upload>
+            <el-space>
+              <el-tooltip :content="t('cropper.btn_reset')" placement="bottom">
+                <XButton
+                  :disabled="!src"
+                  preIcon="ant-design:reload-outlined"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('reset')"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_rotate_left')" placement="bottom">
+                <XButton
+                  :disabled="!src"
+                  preIcon="ant-design:rotate-left-outlined"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('rotate', -45)"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_rotate_right')" placement="bottom">
+                <XButton
+                  :disabled="!src"
+                  preIcon="ant-design:rotate-right-outlined"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('rotate', 45)"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_scale_x')" placement="bottom">
+                <XButton
+                  :disabled="!src"
+                  preIcon="vaadin:arrows-long-h"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('scaleX')"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_scale_y')" placement="bottom">
+                <XButton
+                  :disabled="!src"
+                  preIcon="vaadin:arrows-long-v"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('scaleY')"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_zoom_in')" placement="bottom">
+                <XButton
+                  :disabled="!src"
+                  preIcon="ant-design:zoom-in-outlined"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('zoom', 0.1)"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_zoom_out')" placement="bottom">
+                <XButton
+                  :disabled="!src"
+                  preIcon="ant-design:zoom-out-outlined"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('zoom', -0.1)"
+                />
+              </el-tooltip>
+            </el-space>
+          </div>
+        </div>
+        <div :class="`${prefixCls}-right`">
+          <div :class="`${prefixCls}-preview`">
+            <img v-if="previewSource" :alt="t('cropper.preview')" :src="previewSource" />
+          </div>
+          <template v-if="previewSource">
+            <div :class="`${prefixCls}-group`">
+              <el-avatar :src="previewSource" size="large" />
+              <el-avatar :size="48" :src="previewSource" />
+              <el-avatar :size="64" :src="previewSource" />
+              <el-avatar :size="80" :src="previewSource" />
+            </div>
+          </template>
+        </div>
+      </div>
+      <template #footer>
+        <el-button type="primary" @click="handleOk">{{ t('cropper.okText') }}</el-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useDesign } from '@/hooks/web/useDesign'
+import { dataURLtoBlob } from '@/utils/filt'
+import { useI18n } from 'vue-i18n'
+import type { CropendResult, Cropper } from './types'
+import { propTypes } from '@/utils/propTypes'
+import { CropperImage } from '@/components/Cropper'
+
+defineOptions({ name: 'CopperModal' })
+
+const props = defineProps({
+  srcValue: propTypes.string.def(''),
+  circled: propTypes.bool.def(true)
+})
+const emit = defineEmits(['uploadSuccess'])
+const { t } = useI18n()
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('cropper-am')
+
+const src = ref(props.srcValue)
+const previewSource = ref('')
+const cropper = ref<Cropper>()
+const dialogVisible = ref(false)
+let filename = ''
+let scaleX = 1
+let scaleY = 1
+
+// Block upload
+function handleBeforeUpload(file: File) {
+  const reader = new FileReader()
+  reader.readAsDataURL(file)
+  src.value = ''
+  previewSource.value = ''
+  reader.onload = function (e) {
+    src.value = (e.target?.result as string) ?? ''
+    filename = file.name
+  }
+  return false
+}
+
+function handleCropend({ imgBase64 }: CropendResult) {
+  previewSource.value = imgBase64
+}
+
+function handleReady(cropperInstance: Cropper) {
+  cropper.value = cropperInstance
+}
+
+function handlerToolbar(event: string, arg?: number) {
+  if (event === 'scaleX') {
+    scaleX = arg = scaleX === -1 ? 1 : -1
+  }
+  if (event === 'scaleY') {
+    scaleY = arg = scaleY === -1 ? 1 : -1
+  }
+  cropper?.value?.[event]?.(arg)
+}
+
+async function handleOk() {
+  const blob = dataURLtoBlob(previewSource.value)
+  emit('uploadSuccess', { source: previewSource.value, data: blob, filename: filename })
+}
+
+function openModal() {
+  dialogVisible.value = true
+}
+
+function closeModal() {
+  dialogVisible.value = false
+}
+
+defineExpose({ openModal, closeModal })
+</script>
+<style lang="scss">
+$prefix-cls: #{$namespace}-cropper-am;
+
+.#{$prefix-cls} {
+  display: flex;
+
+  &-left,
+  &-right {
+    height: 340px;
+  }
+
+  &-left {
+    width: 55%;
+  }
+
+  &-right {
+    width: 45%;
+  }
+
+  &-cropper {
+    height: 300px;
+    background: #eee;
+    background-image: linear-gradient(
+        45deg,
+        rgb(0 0 0 / 25%) 25%,
+        transparent 0,
+        transparent 75%,
+        rgb(0 0 0 / 25%) 0
+      ),
+      linear-gradient(
+        45deg,
+        rgb(0 0 0 / 25%) 25%,
+        transparent 0,
+        transparent 75%,
+        rgb(0 0 0 / 25%) 0
+      );
+    background-position:
+      0 0,
+      12px 12px;
+    background-size: 24px 24px;
+  }
+
+  &-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+  }
+
+  &-preview {
+    width: 220px;
+    height: 220px;
+    margin: 0 auto;
+    overflow: hidden;
+    border: 1px solid;
+    border-radius: 50%;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-group {
+    display: flex;
+    padding-top: 8px;
+    margin-top: 8px;
+    border-top: 1px solid;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Cropper/src/Cropper.vue b/marketing-ui/admin-ui/src/components/Cropper/src/Cropper.vue
new file mode 100644
index 0000000..871aed8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Cropper/src/Cropper.vue
@@ -0,0 +1,183 @@
+<template>
+  <div :class="getClass" :style="getWrapperStyle">
+    <img
+      v-show="isReady"
+      ref="imgElRef"
+      :alt="alt"
+      :crossorigin="crossorigin"
+      :src="src"
+      :style="getImageStyle"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { CSSProperties, PropType } from 'vue'
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
+import { useDesign } from '@/hooks/web/useDesign'
+import { propTypes } from '@/utils/propTypes'
+import { useDebounceFn } from '@vueuse/core'
+
+defineOptions({ name: 'Cropper' })
+
+type Options = Cropper.Options
+
+const defaultOptions: Options = {
+  aspectRatio: 1,
+  zoomable: true,
+  zoomOnTouch: true,
+  zoomOnWheel: true,
+  cropBoxMovable: true,
+  cropBoxResizable: true,
+  toggleDragModeOnDblclick: true,
+  autoCrop: true,
+  background: true,
+  highlight: true,
+  center: true,
+  responsive: true,
+  restore: true,
+  checkCrossOrigin: true,
+  checkOrientation: true,
+  scalable: true,
+  modal: true,
+  guides: true,
+  movable: true,
+  rotatable: true
+}
+
+const props = defineProps({
+  src: propTypes.string.def(''),
+  alt: propTypes.string.def(''),
+  circled: propTypes.bool.def(false),
+  realTimePreview: propTypes.bool.def(true),
+  height: propTypes.string.def('360px'),
+  crossorigin: {
+    type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,
+    default: undefined
+  },
+  imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
+  options: { type: Object as PropType<Options>, default: () => ({}) }
+})
+
+const emit = defineEmits(['cropend', 'ready', 'cropendError'])
+const attrs = useAttrs()
+const imgElRef = ref<ElRef<HTMLImageElement>>()
+const cropper = ref<Nullable<Cropper>>()
+const isReady = ref(false)
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('cropper-image')
+const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80)
+
+const getImageStyle = computed((): CSSProperties => {
+  return {
+    height: props.height,
+    maxWidth: '100%',
+    ...props.imageStyle
+  }
+})
+
+const getClass = computed(() => {
+  return [
+    prefixCls,
+    attrs.class,
+    {
+      [`${prefixCls}--circled`]: props.circled
+    }
+  ]
+})
+const getWrapperStyle = computed((): CSSProperties => {
+  return { height: `${props.height}`.replace(/px/, '') + 'px' }
+})
+
+onMounted(init)
+
+onUnmounted(() => {
+  cropper.value?.destroy()
+})
+
+async function init() {
+  const imgEl = unref(imgElRef)
+  if (!imgEl) {
+    return
+  }
+  cropper.value = new Cropper(imgEl, {
+    ...defaultOptions,
+    ready: () => {
+      isReady.value = true
+      realTimeCroppered()
+      emit('ready', cropper.value)
+    },
+    crop() {
+      debounceRealTimeCroppered()
+    },
+    zoom() {
+      debounceRealTimeCroppered()
+    },
+    cropmove() {
+      debounceRealTimeCroppered()
+    },
+    ...props.options
+  })
+}
+
+// Real-time display preview
+function realTimeCroppered() {
+  props.realTimePreview && croppered()
+}
+
+// event: return base64 and width and height information after cropping
+function croppered() {
+  if (!cropper.value) {
+    return
+  }
+  let imgInfo = cropper.value.getData()
+  const canvas = props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas()
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return
+    }
+    let fileReader: FileReader = new FileReader()
+    fileReader.readAsDataURL(blob)
+    fileReader.onloadend = (e) => {
+      emit('cropend', {
+        imgBase64: e.target?.result ?? '',
+        imgInfo
+      })
+    }
+    fileReader.onerror = () => {
+      emit('cropendError')
+    }
+  }, 'image/png')
+}
+
+// Get a circular picture canvas
+function getRoundedCanvas() {
+  const sourceCanvas = cropper.value!.getCroppedCanvas()
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')!
+  const width = sourceCanvas.width
+  const height = sourceCanvas.height
+  canvas.width = width
+  canvas.height = height
+  context.imageSmoothingEnabled = true
+  context.drawImage(sourceCanvas, 0, 0, width, height)
+  context.globalCompositeOperation = 'destination-in'
+  context.beginPath()
+  context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true)
+  context.fill()
+  return canvas
+}
+</script>
+<style lang="scss">
+$prefix-cls: #{$namespace}-cropper-image;
+
+.#{$prefix-cls} {
+  &--circled {
+    .cropper-view-box,
+    .cropper-face {
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Cropper/src/CropperAvatar.vue b/marketing-ui/admin-ui/src/components/Cropper/src/CropperAvatar.vue
new file mode 100644
index 0000000..9464c2a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Cropper/src/CropperAvatar.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="user-info-head" @click="open()">
+    <el-avatar v-if="sourceValue" :src="sourceValue" alt="avatar" class="img-circle img-lg" />
+    <el-avatar v-if="!sourceValue" :src="avatar" alt="avatar" class="img-circle img-lg" />
+    <el-button v-if="showBtn" :class="`${prefixCls}-upload-btn`" @click="open()">
+      {{ btnText ? btnText : t('cropper.selectImage') }}
+    </el-button>
+    <CopperModal
+      ref="cropperModelRef"
+      :srcValue="sourceValue"
+      @upload-success="handleUploadSuccess"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { useDesign } from '@/hooks/web/useDesign'
+
+import { propTypes } from '@/utils/propTypes'
+import { useI18n } from 'vue-i18n'
+import CopperModal from './CopperModal.vue'
+import avatar from '@/assets/imgs/avatar.gif'
+
+defineOptions({ name: 'CropperAvatar' })
+
+const props = defineProps({
+  width: propTypes.string.def('200px'),
+  value: propTypes.string.def(''),
+  showBtn: propTypes.bool.def(true),
+  btnText: propTypes.string.def('')
+})
+
+const emit = defineEmits(['update:value', 'change'])
+const sourceValue = ref(props.value)
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('cropper-avatar')
+const message = useMessage()
+const { t } = useI18n()
+
+const cropperModelRef = ref()
+
+watchEffect(() => {
+  sourceValue.value = props.value
+})
+
+watch(
+  () => sourceValue.value,
+  (v: string) => {
+    emit('update:value', v)
+  }
+)
+
+function handleUploadSuccess({ source, data, filename }) {
+  sourceValue.value = source
+  emit('change', { source, data, filename })
+  message.success(t('cropper.uploadSuccess'))
+}
+
+function open() {
+  cropperModelRef.value.openModal()
+}
+
+function close() {
+  cropperModelRef.value.closeModal()
+}
+
+defineExpose({
+  open,
+  close
+})
+</script>
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}--cropper-avatar;
+
+.#{$prefix-cls} {
+  display: inline-block;
+  text-align: center;
+
+  &-image-wrapper {
+    overflow: hidden;
+    cursor: pointer;
+    border: 1px solid;
+    border-radius: 50%;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  &-image-mask {
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    cursor: pointer;
+    background: rgb(0 0 0 / 40%);
+    border: inherit;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.4s;
+
+    ::v-deep(svg) {
+      margin: auto;
+    }
+  }
+
+  &-image-mask:hover {
+    opacity: 40;
+  }
+
+  &-upload-btn {
+    margin: 10px auto;
+  }
+}
+
+.user-info-head {
+  position: relative;
+  display: inline-block;
+}
+
+.img-circle {
+  border-radius: 50%;
+}
+
+.img-lg {
+  width: 120px;
+  height: 120px;
+}
+
+.user-info-head:hover::after {
+  position: absolute;
+  inset: 0;
+  font-size: 24px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  line-height: 110px;
+  color: #eee;
+  cursor: pointer;
+  background: rgb(0 0 0 / 50%);
+  border-radius: 50%;
+  content: '+';
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Cropper/src/types.ts b/marketing-ui/admin-ui/src/components/Cropper/src/types.ts
new file mode 100644
index 0000000..bcad3b4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Cropper/src/types.ts
@@ -0,0 +1,8 @@
+import type Cropper from 'cropperjs'
+
+export interface CropendResult {
+  imgBase64: string
+  imgInfo: Cropper.Data
+}
+
+export type { Cropper }
diff --git a/marketing-ui/admin-ui/src/components/DeptSelectForm/index.vue b/marketing-ui/admin-ui/src/components/DeptSelectForm/index.vue
new file mode 100644
index 0000000..140f495
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DeptSelectForm/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <Dialog v-model="dialogVisible" title="部门选择" width="600">
+    <el-row v-loading="formLoading">
+      <el-col :span="24">
+        <ContentWrap class="h-1/1">
+          <el-tree
+            ref="treeRef"
+            :data="deptTree"
+            :props="defaultProps"
+            show-checkbox
+            :check-strictly="checkStrictly"
+            check-on-click-node
+            default-expand-all
+            highlight-current
+            node-key="id"
+            @check="handleCheck"
+          />
+        </ContentWrap>
+      </el-col>
+    </el-row>
+    <template #footer>
+      <el-button
+        :disabled="formLoading || !selectedDeptIds?.length"
+        type="primary"
+        @click="submitForm"
+      >
+        确 定
+      </el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as DeptApi from '@/api/system/dept'
+
+defineOptions({ name: 'DeptSelectForm' })
+
+const emit = defineEmits<{
+  confirm: [deptList: any[]]
+}>()
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const props = defineProps({
+  // 是否严格的遵循父子不互相关联
+  checkStrictly: {
+    type: Boolean,
+    default: false
+  },
+  // 是否支持多选
+  multiple: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const treeRef = ref()
+const deptTree = ref<Tree[]>([]) // 部门树形结构
+const selectedDeptIds = ref<number[]>([]) // 选中的部门 ID 列表
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+
+/** 打开弹窗 */
+const open = async (selectedList?: DeptApi.DeptVO[]) => {
+  resetForm()
+  formLoading.value = true
+  try {
+    // 加载部门列表
+    const deptData = await DeptApi.getSimpleDeptList()
+    deptTree.value = handleTree(deptData)
+  } finally {
+    formLoading.value = false
+  }
+  dialogVisible.value = true
+  // 设置已选择的部门
+  if (selectedList?.length) {
+    await nextTick()
+    const selectedIds = selectedList
+      .map((dept) => dept.id)
+      .filter((id): id is number => id !== undefined)
+    selectedDeptIds.value = selectedIds
+    treeRef.value?.setCheckedKeys(selectedIds)
+  }
+}
+
+/** 处理选中状态变化 */
+const handleCheck = (data: any, checked: any) => {
+  selectedDeptIds.value = treeRef.value.getCheckedKeys()
+  if (!props.multiple && selectedDeptIds.value.length > 1) {
+    // 单选模式下，只保留最后选择的节点
+    const lastSelectedId = selectedDeptIds.value[selectedDeptIds.value.length - 1]
+    selectedDeptIds.value = [lastSelectedId]
+    treeRef.value.setCheckedKeys([lastSelectedId])
+  }
+}
+
+/** 提交选择 */
+const submitForm = async () => {
+  try {
+    // 获取选中的完整部门数据
+    const checkedNodes = treeRef.value.getCheckedNodes()
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    emit('confirm', checkedNodes)
+  } finally {
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  deptTree.value = []
+  selectedDeptIds.value = []
+  if (treeRef.value) {
+    treeRef.value.setCheckedKeys([])
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/marketing-ui/admin-ui/src/components/Descriptions/index.ts b/marketing-ui/admin-ui/src/components/Descriptions/index.ts
new file mode 100644
index 0000000..243bc39
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Descriptions/index.ts
@@ -0,0 +1,4 @@
+import Descriptions from './src/Descriptions.vue'
+import DescriptionsItemLabel from './src/DescriptionsItemLabel.vue'
+
+export { Descriptions, DescriptionsItemLabel }
diff --git a/marketing-ui/admin-ui/src/components/Descriptions/src/Descriptions.vue b/marketing-ui/admin-ui/src/components/Descriptions/src/Descriptions.vue
new file mode 100644
index 0000000..184d95c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Descriptions/src/Descriptions.vue
@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import dayjs from 'dayjs'
+import { useDesign } from '@/hooks/web/useDesign'
+import { propTypes } from '@/utils/propTypes'
+import { useAppStore } from '@/store/modules/app'
+import { DescriptionsSchema } from '@/types/descriptions'
+
+defineOptions({ name: 'Descriptions' })
+
+const appStore = useAppStore()
+
+const mobile = computed(() => appStore.getMobile)
+
+const attrs = useAttrs()
+
+const slots = useSlots()
+
+const props = defineProps({
+  title: propTypes.string.def(''),
+  message: propTypes.string.def(''),
+  collapse: propTypes.bool.def(true),
+  columns: propTypes.number.def(1),
+  schema: {
+    type: Array as PropType<DescriptionsSchema[]>,
+    default: () => []
+  },
+  data: {
+    type: Object as PropType<any>,
+    default: () => ({})
+  }
+})
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('descriptions')
+
+const getBindValue = computed(() => {
+  const delArr: string[] = ['title', 'message', 'collapse', 'schema', 'data', 'class']
+  const obj = { ...attrs, ...props }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+})
+
+const getBindItemValue = (item: DescriptionsSchema) => {
+  const delArr: string[] = ['field']
+  const obj = { ...item }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+}
+
+// 折叠
+const show = ref(true)
+
+const toggleClick = () => {
+  if (props.collapse) {
+    show.value = !unref(show)
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      prefixCls,
+      'bg-[var(--el-color-white)] dark:bg-[var(--el-bg-color)] dark:border-[var(--el-border-color)] dark:border-1px'
+    ]"
+  >
+    <div
+      v-if="title"
+      :class="[
+        `${prefixCls}-header`,
+        'h-50px flex justify-between items-center b-b-1 border-solid border-[var(--el-border-color)] px-10px cursor-pointer dark:border-[var(--el-border-color)]'
+      ]"
+      @click="toggleClick"
+    >
+      <div :class="[`${prefixCls}-header__title`, 'relative font-18px font-bold ml-10px']">
+        <div class="flex items-center">
+          {{ title }}
+          <ElTooltip v-if="message" :content="message" placement="right">
+            <Icon class="ml-5px" icon="ep:warning" />
+          </ElTooltip>
+        </div>
+      </div>
+      <Icon v-if="collapse" :icon="show ? 'ep:arrow-down' : 'ep:arrow-up'" />
+    </div>
+
+    <ElCollapseTransition>
+      <div v-show="show" :class="[`${prefixCls}-content`, 'p-10px']">
+        <ElDescriptions
+          :column="props.columns"
+          :direction="mobile ? 'vertical' : 'horizontal'"
+          border
+          v-bind="getBindValue"
+        >
+          <template v-if="slots['extra']" #extra>
+            <slot name="extra"></slot>
+          </template>
+          <ElDescriptionsItem
+            v-for="item in schema"
+            :key="item.field"
+            min-width="80"
+            v-bind="getBindItemValue(item)"
+          >
+            <template #label>
+              <slot
+                :name="`${item.field}-label`"
+                :row="{
+                  label: item.label
+                }"
+                >{{ item.label }}
+              </slot>
+            </template>
+
+            <template #default>
+              <slot v-if="item.dateFormat">
+                {{
+                  data[item.field] !== null ? dayjs(data[item.field]).format(item.dateFormat) : ''
+                }}
+              </slot>
+              <slot v-else-if="item.dictType">
+                <DictTag :type="item.dictType" :value="data[item.field] + ''" />
+              </slot>
+              <slot v-else :name="item.field" :row="data">
+                {{
+                    item.mappedField ? data[item.mappedField] : data[item.field]
+                }}
+              </slot>
+            </template>
+          </ElDescriptionsItem>
+        </ElDescriptions>
+      </div>
+    </ElCollapseTransition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-descriptions;
+
+.#{$prefix-cls}-header {
+  &__title {
+    &::after {
+      position: absolute;
+      top: 3px;
+      left: -10px;
+      width: 4px;
+      height: 70%;
+      background: var(--el-color-primary);
+      content: '';
+    }
+  }
+}
+
+.#{$prefix-cls}-content {
+  :deep(.#{$elNamespace}-descriptions__cell) {
+    width: 0;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Descriptions/src/DescriptionsItemLabel.vue b/marketing-ui/admin-ui/src/components/Descriptions/src/DescriptionsItemLabel.vue
new file mode 100644
index 0000000..4efb2fb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Descriptions/src/DescriptionsItemLabel.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const { label } = defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: String,
+    required: false
+  }
+})
+</script>
+
+<template>
+  <div class="cell-item">
+    <Icon :icon="icon" v-if="icon" style="vertical-align: middle" :size="18" />
+    {{ label }}
+  </div>
+</template>
+
+<style scoped lang="scss">
+.cell-item {
+  display: inline;
+}
+
+.cell-item::after {
+  content: ':';
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Dialog/index.ts b/marketing-ui/admin-ui/src/components/Dialog/index.ts
new file mode 100644
index 0000000..1655dad
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Dialog/index.ts
@@ -0,0 +1,3 @@
+import Dialog from './src/Dialog.vue'
+
+export { Dialog }
diff --git a/marketing-ui/admin-ui/src/components/Dialog/src/Dialog.vue b/marketing-ui/admin-ui/src/components/Dialog/src/Dialog.vue
new file mode 100644
index 0000000..9bf5b7a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Dialog/src/Dialog.vue
@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { isNumber } from '@/utils/is'
+defineOptions({ name: 'Dialog' })
+
+const slots = useSlots()
+
+const props = defineProps({
+  modelValue: propTypes.bool.def(false),
+  title: propTypes.string.def('Dialog'),
+  fullscreen: propTypes.bool.def(true),
+  width: propTypes.oneOfType([String, Number]).def('40%'),
+  scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
+  maxHeight: propTypes.oneOfType([String, Number]).def('400px')
+})
+
+const getBindValue = computed(() => {
+  const delArr: string[] = ['fullscreen', 'title', 'maxHeight', 'appendToBody']
+  const attrs = useAttrs()
+  const obj = { ...attrs, ...props }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+})
+
+const isFullscreen = ref(false)
+
+const toggleFull = () => {
+  isFullscreen.value = !unref(isFullscreen)
+}
+
+const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)
+
+watch(
+  () => isFullscreen.value,
+  async (val: boolean) => {
+    await nextTick()
+    if (val) {
+      const windowHeight = document.documentElement.offsetHeight
+      dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px`
+    } else {
+      dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+const dialogStyle = computed(() => {
+  return {
+    height: unref(dialogHeight)
+  }
+})
+</script>
+
+<template>
+  <ElDialog
+    v-bind="getBindValue"
+    :close-on-click-modal="true"
+    :fullscreen="isFullscreen"
+    :width="width"
+    destroy-on-close
+    lock-scroll
+    draggable
+    class="com-dialog"
+    :show-close="false"
+    @close="$emit('update:modelValue', false)"
+  >
+    <template #header="{ close }">
+      <div class="relative h-54px flex items-center justify-between pl-15px pr-15px">
+        <slot name="title">
+          {{ title }}
+        </slot>
+        <div
+          class="absolute right-15px top-[50%] h-54px flex translate-y-[-50%] items-center justify-between"
+        >
+          <Icon
+            v-if="fullscreen"
+            class="is-hover mr-10px cursor-pointer"
+            :icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'"
+            color="var(--el-color-info)"
+            hover-color="var(--el-color-primary)"
+            @click="toggleFull"
+          />
+          <Icon
+            class="is-hover cursor-pointer"
+            icon="ep:close"
+            hover-color="var(--el-color-primary)"
+            color="var(--el-color-info)"
+            @click="close"
+          />
+        </div>
+      </div>
+    </template>
+
+    <ElScrollbar v-if="scroll" :style="dialogStyle">
+      <slot></slot>
+    </ElScrollbar>
+    <slot v-else></slot>
+    <template v-if="slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+  </ElDialog>
+</template>
+
+<style lang="scss">
+.com-dialog {
+  .#{$elNamespace}-overlay-dialog {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .#{$elNamespace}-dialog {
+    margin: 0 !important;
+
+    &__header {
+      height: 54px;
+      padding: 0;
+      margin-right: 0 !important;
+      border-bottom: 1px solid var(--el-border-color);
+    }
+
+    &__body {
+      padding: 15px !important;
+    }
+
+    &__footer {
+      border-top: 1px solid var(--el-border-color);
+    }
+
+    &__headerbtn {
+      top: 0;
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DictTag/index.ts b/marketing-ui/admin-ui/src/components/DictTag/index.ts
new file mode 100644
index 0000000..4db2742
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DictTag/index.ts
@@ -0,0 +1,3 @@
+import DictTag from './src/DictTag.vue'
+
+export { DictTag }
diff --git a/marketing-ui/admin-ui/src/components/DictTag/src/DictTag.vue b/marketing-ui/admin-ui/src/components/DictTag/src/DictTag.vue
new file mode 100644
index 0000000..6414eaa
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DictTag/src/DictTag.vue
@@ -0,0 +1,90 @@
+<script lang="tsx">
+import { computed, defineComponent, PropType } from 'vue'
+import { isHexColor } from '@/utils/color'
+import { ElTag } from 'element-plus'
+import { DictDataType, getDictOptions } from '@/utils/dict'
+import { isArray, isBoolean, isNumber, isString } from '@/utils/is'
+
+export default defineComponent({
+  name: 'DictTag',
+  props: {
+    type: {
+      type: String as PropType<string>,
+      required: true
+    },
+    value: {
+      type: [String, Number, Boolean, Array],
+      required: true
+    },
+    // 字符串分隔符 只有当 props.value 传入值为字符串时有效
+    separator: {
+      type: String as PropType<string>,
+      default: ','
+    },
+    // 每个 tag 之间的间隔，默认为 5px，参考的 el-row 的 gutter
+    gutter: {
+      type: String as PropType<string>,
+      default: '5px'
+    }
+  },
+  setup(props) {
+    const valueArr: any = computed(() => {
+      // 1. 是 Number 类型和 Boolean 类型的情况
+      if (isNumber(props.value) || isBoolean(props.value)) {
+        return [String(props.value)]
+      }
+      // 2. 是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）
+      else if (isString(props.value)) {
+        return props.value.split(props.separator)
+      }
+      // 3. 数组
+      else if (isArray(props.value)) {
+        return props.value.map(String)
+      }
+      return []
+    })
+    const renderDictTag = () => {
+      if (!props.type) {
+        return null
+      }
+      // 解决自定义字典标签值为零时标签不渲染的问题
+      if (props.value === undefined || props.value === null || props.value === '') {
+        return null
+      }
+      const dictOptions = getDictOptions(props.type)
+
+      return (
+        <div
+          class="dict-tag"
+          style={{
+            display: 'inline-flex',
+            gap: props.gutter,
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}
+        >
+          {dictOptions.map((dict: DictDataType) => {
+            if (valueArr.value.includes(dict.value)) {
+              if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
+                dict.colorType = ''
+              }
+              return (
+                // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
+                <ElTag
+                  style={dict?.cssClass ? 'color: #fff' : ''}
+                  type={dict?.colorType || null}
+                  color={dict?.cssClass && isHexColor(dict?.cssClass) ? dict?.cssClass : ''}
+                  disableTransitions={true}
+                >
+                  {dict?.label}
+                </ElTag>
+              )
+            }
+          })}
+        </div>
+      )
+    }
+    return () => renderDictTag()
+  }
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/ComponentContainer.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/ComponentContainer.vue
new file mode 100644
index 0000000..4856722
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/ComponentContainer.vue
@@ -0,0 +1,239 @@
+<template>
+  <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, DiyComponent } from '@/components/DiyEditor/util'
+import { propTypes } from '@/utils/propTypes'
+import { object } from 'vue-types'
+
+/**
+ * 组件容器：目前在中间部分
+ * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
+ */
+defineOptions({ name: 'ComponentContainer' })
+
+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(() => {
+  let componentStyle = props.component.property.style
+  if (!componentStyle) {
+    return {}
+  }
+  return {
+    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:
+      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">
+$active-border-width: 2px;
+$hover-border-width: 1px;
+$name-position: -85px;
+$toolbar-position: -55px;
+
+/* 组件 */
+.component {
+  position: relative;
+  cursor: move;
+
+  .component-wrap {
+    position: absolute;
+    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 rgb(24 144 255 / 30%);
+
+      .component-name {
+        top: $hover-border-width;
+
+        /* 防止加了边框之后，位置移动 */
+        left: $name-position - $hover-border-width;
+      }
+    }
+
+    /* 左侧：组件名称 */
+    .component-name {
+      position: absolute;
+      top: $active-border-width;
+      left: $name-position;
+      display: block;
+      width: 80px;
+      height: 25px;
+      font-size: 12px;
+      color: #6a6a6a;
+      line-height: 25px;
+      text-align: center;
+      background: #fff;
+      box-shadow:
+        0 0 4px #00000014,
+        0 2px 6px #0000000f,
+        0 4px 8px 2px #0000000a;
+
+      /* 右侧小三角 */
+      &::after {
+        position: absolute;
+        top: 7.5px;
+        right: -10px;
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+        border-left-color: #fff;
+        content: ' ';
+      }
+    }
+
+    /* 右侧：组件操作工具栏 */
+    .component-toolbar {
+      position: absolute;
+      top: 0;
+      right: $toolbar-position;
+      display: none;
+
+      /* 左侧小三角 */
+      &::before {
+        position: absolute;
+        top: 10px;
+        left: -10px;
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+        border-right-color: #2d8cf0;
+        content: ' ';
+      }
+    }
+  }
+
+  /* 组件选中时 */
+  &.active {
+    margin-bottom: 4px;
+
+    .component-wrap {
+      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 {
+        top: 0 !important;
+
+        /* 防止加了边框之后，位置移动 */
+        left: $name-position - $active-border-width !important;
+        color: #fff;
+        background: var(--el-color-primary);
+
+        &::after {
+          border-left-color: var(--el-color-primary);
+        }
+      }
+
+      .component-toolbar {
+        display: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/ComponentContainerProperty.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/ComponentContainerProperty.vue
new file mode 100644
index 0000000..5d18785
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/ComponentContainerProperty.vue
@@ -0,0 +1,168 @@
+<template>
+  <el-tabs stretch>
+    <!-- 每个组件的自定义内容 -->
+    <el-tab-pane label="内容" v-if="$slots.default">
+      <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 value="color">纯色</el-radio>
+              <el-radio value="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" default-expand-all>
+            <template #default="{ node, data }">
+              <el-form-item
+                :label="data.label"
+                :prop="data.prop"
+                :label-width="node.level === 1 ? '80px' : '62px'"
+                class="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>
+          <slot name="style" :style="formData"></slot>
+        </el-form>
+      </el-card>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { ComponentStyle } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
+
+/**
+ * 组件容器属性：目前右边部分
+ * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
+ */
+defineOptions({ name: 'ComponentContainer' })
+
+const props = defineProps<{ modelValue: ComponentStyle }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(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">
+:deep(.el-slider__runway) {
+  margin-right: 16px;
+}
+
+:deep(.el-input-number) {
+  width: 50px;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/ComponentLibrary.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/ComponentLibrary.vue
new file mode 100644
index 0000000..fdb0b1d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/ComponentLibrary.vue
@@ -0,0 +1,211 @@
+<template>
+  <el-aside class="editor-left" width="261px">
+    <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"
+            item-key="index"
+            :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[]>([])
+
+// 监听 list 属性，按照 DiyComponentLibrary 的 name 分组
+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>) => {
+  const instance = cloneDeep(component)
+  instance.uid = new Date().getTime()
+  return instance
+}
+</script>
+
+<style scoped lang="scss">
+.editor-left {
+  z-index: 1;
+  flex-shrink: 0;
+  user-select: none;
+  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) {
+    height: 32px;
+    padding: 0 24px;
+    line-height: 32px;
+    background-color: var(--el-bg-color-page);
+    border-bottom: none;
+  }
+
+  .component-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .component {
+    display: flex;
+    width: 86px;
+    height: 86px;
+    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;
+
+    .el-icon {
+      margin-bottom: 4px;
+      color: gray;
+    }
+  }
+
+  .component.active,
+  .component:hover {
+    color: var(--el-color-white);
+    background: var(--el-color-primary);
+
+    .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 {
+    display: flex;
+    width: 100%;
+    height: 40px;
+
+    /* 条纹背景 */
+    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;
+    justify-content: center;
+    align-items: center;
+
+    span {
+      display: inline-block;
+      width: 140px;
+      height: 25px;
+      font-size: 12px;
+      line-height: 25px;
+      color: #fff;
+      text-align: center;
+      background: #5487df;
+    }
+
+    /* 拖拽时隐藏组件 */
+    .component {
+      display: none;
+    }
+
+    /* 拖拽时显示占位提示 */
+    .drag-placement {
+      display: block;
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Carousel/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Carousel/config.ts
new file mode 100644
index 0000000..3e74a51
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Carousel/config.ts
@@ -0,0 +1,50 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 轮播图属性 */
+export interface CarouselProperty {
+  // 类型：默认 | 卡片
+  type: 'default' | 'card'
+  // 指示器样式：点 | 数字
+  indicator: 'dot' | 'number'
+  // 是否自动播放
+  autoplay: boolean
+  // 播放间隔
+  interval: number
+  // 轮播内容
+  items: CarouselItemProperty[]
+  // 组件样式
+  style: ComponentStyle
+}
+// 轮播内容属性
+export interface CarouselItemProperty {
+  // 类型：图片 | 视频
+  type: 'img' | 'video'
+  // 图片链接
+  imgUrl: string
+  // 视频链接
+  videoUrl: string
+  // 跳转链接
+  url: string
+}
+
+// 定义组件
+export const component = {
+  id: 'Carousel',
+  name: '轮播图',
+  icon: 'system-uicons:carousel',
+  property: {
+    type: 'default',
+    indicator: 'dot',
+    autoplay: false,
+    interval: 3,
+    items: [
+      { 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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Carousel/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Carousel/index.vue
new file mode 100644
index 0000000..360b4a4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Carousel/index.vue
@@ -0,0 +1,43 @@
+<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-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 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>
+</template>
+<script setup lang="ts">
+import { CarouselProperty } from './config'
+
+/** 轮播图 */
+defineOptions({ name: 'Carousel' })
+
+defineProps<{ property: CarouselProperty }>()
+
+const currentIndex = ref(0)
+const handleIndexChange = (index: number) => {
+  currentIndex.value = index + 1
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Carousel/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Carousel/property.vue
new file mode 100644
index 0000000..06cfda4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Carousel/property.vue
@@ -0,0 +1,106 @@
+<template>
+  <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 value="default">
+                <Icon icon="system-uicons:carousel" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="卡片" placement="bottom">
+              <el-radio-button value="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 value="dot">小圆点</el-radio>
+            <el-radio value="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">
+        <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
+          <template #default="{ element }">
+            <el-form-item label="类型" prop="type" class="m-b-8px!" label-width="40px">
+              <el-radio-group v-model="element.type">
+                <el-radio value="img">图片</el-radio>
+                <el-radio value="video">视频</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              label="图片"
+              class="m-b-8px!"
+              label-width="40px"
+              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="40px">
+                <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="40px">
+                <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="40px">
+              <AppLinkInput v-model="element.url" />
+            </el-form-item>
+          </template>
+        </Draggable>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { CarouselProperty } from './config'
+import { useVModel } from '@vueuse/core'
+
+// 轮播图属性面板
+defineOptions({ name: 'CarouselProperty' })
+
+const props = defineProps<{ modelValue: CarouselProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/component.tsx b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/component.tsx
new file mode 100644
index 0000000..689690b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/component.tsx
@@ -0,0 +1,73 @@
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from '@/utils/constants'
+import { floatToFixed2 } from '@/utils'
+import { formatDate } from '@/utils/formatTime'
+import { object } from 'vue-types'
+
+// 优惠值
+export const CouponDiscount = defineComponent({
+  name: 'CouponDiscount',
+  props: {
+    coupon: object<CouponTemplateApi.CouponTemplateVO>()
+  },
+  setup(props) {
+    const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
+    // 折扣
+    let value = coupon.discountPercent + ''
+    let suffix = ' 折'
+    // 满减
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      value = floatToFixed2(coupon.discountPrice)
+      suffix = ' 元'
+    }
+    return () => (
+      <div>
+        <span class={'text-20px font-bold'}>{value}</span>
+        <span>{suffix}</span>
+      </div>
+    )
+  }
+})
+
+// 优惠描述
+export const CouponDiscountDesc = defineComponent({
+  name: 'CouponDiscountDesc',
+  props: {
+    coupon: object<CouponTemplateApi.CouponTemplateVO>()
+  },
+  setup(props) {
+    const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
+    // 使用条件
+    const useCondition = coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : ''
+    // 优惠描述
+    const discountDesc =
+      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+        ? `减${floatToFixed2(coupon.discountPrice)}元`
+        : `打${coupon.discountPercent}折`
+    return () => (
+      <div>
+        <span>{useCondition}</span>
+        <span>{discountDesc}</span>
+      </div>
+    )
+  }
+})
+
+// 有效期
+export const CouponValidTerm = defineComponent({
+  name: 'CouponValidTerm',
+  props: {
+    coupon: object<CouponTemplateApi.CouponTemplateVO>()
+  },
+  setup(props) {
+    const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
+    const text =
+      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
+        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
+            coupon.validEndTime,
+            'YYYY-MM-DD'
+          )}`
+        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`
+    return () => <div>{text}</div>
+  }
+})
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/config.ts
new file mode 100644
index 0000000..304533d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/config.ts
@@ -0,0 +1,47 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 商品卡片属性 */
+export interface CouponCardProperty {
+  // 列数
+  columns: number
+  // 背景图
+  bgImg: string
+  // 文字颜色
+  textColor: string
+  // 按钮样式
+  button: {
+    // 颜色
+    color: string
+    // 背景颜色
+    bgColor: string
+  }
+  // 间距
+  space: number
+  // 优惠券编号列表
+  couponIds: number[]
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'CouponCard',
+  name: '优惠券',
+  icon: 'ep:ticket',
+  property: {
+    columns: 1,
+    bgImg: '',
+    textColor: '#E9B461',
+    button: {
+      color: '#434343',
+      bgColor: ''
+    },
+    space: 0,
+    couponIds: [],
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<CouponCardProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/index.vue
new file mode 100644
index 0000000..3e2302a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/index.vue
@@ -0,0 +1,142 @@
+<template>
+  <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
+    <div
+      class="flex flex-row text-12px"
+      :style="{
+        gap: `${property.space}px`,
+        width: scrollbarWidth
+      }"
+    >
+      <div
+        class="box-content"
+        :style="{
+          background: property.bgImg
+            ? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
+            : '#fff',
+          width: `${couponWidth}px`,
+          color: property.textColor
+        }"
+        v-for="(coupon, index) in couponList"
+        :key="index"
+      >
+        <!-- 布局1：1列-->
+        <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
+          <div class="flex flex-col justify-evenly gap-4px">
+            <!-- 优惠值 -->
+            <CouponDiscount :coupon="coupon" />
+            <!-- 优惠描述 -->
+            <CouponDiscountDesc :coupon="coupon" />
+            <!-- 有效期 -->
+            <CouponValidTerm :coupon="coupon" />
+          </div>
+          <div class="flex flex-col justify-evenly">
+            <div
+              class="rounded-20px p-x-8px p-y-2px"
+              :style="{
+                color: property.button.color,
+                background: property.button.bgColor
+              }"
+            >
+              立即领取
+            </div>
+          </div>
+        </div>
+        <!-- 布局2：2列-->
+        <div
+          v-else-if="property.columns === 2"
+          class="m-l-16px flex flex-row justify-between p-8px"
+        >
+          <div class="flex flex-col justify-evenly gap-4px">
+            <!-- 优惠值 -->
+            <CouponDiscount :coupon="coupon" />
+            <div>{{ coupon.name }}</div>
+          </div>
+          <div class="flex flex-col">
+            <div
+              class="h-full w-20px rounded-20px p-x-2px p-y-8px text-center"
+              :style="{
+                color: property.button.color,
+                background: property.button.bgColor
+              }"
+            >
+              立即领取
+            </div>
+          </div>
+        </div>
+        <!-- 布局3：3列-->
+        <div v-else class="flex flex-col items-center justify-around gap-4px p-4px">
+          <!-- 优惠值 -->
+          <CouponDiscount :coupon="coupon" />
+          <div>{{ coupon.name }}</div>
+          <div
+            class="rounded-20px p-x-8px p-y-2px"
+            :style="{
+              color: property.button.color,
+              background: property.button.bgColor
+            }"
+          >
+            立即领取
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+<script setup lang="ts">
+import { CouponCardProperty } from './config'
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { CouponDiscount } from './component'
+import {
+  CouponDiscountDesc,
+  CouponValidTerm
+} from '@/components/DiyEditor/components/mobile/CouponCard/component'
+
+/** 商品卡片 */
+defineOptions({ name: 'CouponCard' })
+// 定义属性
+const props = defineProps<{ property: CouponCardProperty }>()
+// 商品列表
+const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
+watch(
+  () => props.property.couponIds,
+  async () => {
+    if (props.property.couponIds?.length > 0) {
+      couponList.value = await CouponTemplateApi.getCouponTemplateList(props.property.couponIds)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 手机宽度
+const phoneWidth = ref(375)
+// 容器
+const containerRef = ref()
+// 滚动条宽度
+const scrollbarWidth = ref('100%')
+// 优惠券的宽度
+const couponWidth = ref(375)
+// 计算布局参数
+watch(
+  () => [props.property, phoneWidth, couponList.value.length],
+  () => {
+    // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
+    couponWidth.value =
+      (phoneWidth.value * 0.95 - props.property.space * (props.property.columns - 1)) /
+      props.property.columns
+    // 显示滚动条
+    scrollbarWidth.value = `${
+      couponWidth.value * couponList.value.length +
+      props.property.space * (couponList.value.length - 1)
+    }px`
+  },
+  { immediate: true, deep: true }
+)
+onMounted(() => {
+  // 提取手机宽度
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/property.vue
new file mode 100644
index 0000000..604afe9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/CouponCard/property.vue
@@ -0,0 +1,119 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form label-width="80px" :model="formData">
+      <el-card header="优惠券列表" class="property-group" shadow="never">
+        <div
+          v-for="(coupon, index) in couponList"
+          :key="index"
+          class="flex items-center justify-between"
+        >
+          <el-text size="large" truncated>{{ coupon.name }}</el-text>
+          <el-text type="info" truncated>
+            <span v-if="coupon.usePrice > 0">满{{ floatToFixed2(coupon.usePrice) }}元，</span>
+            <span v-if="coupon.discountType === PromotionDiscountTypeEnum.PRICE.type">
+              减{{ floatToFixed2(coupon.discountPrice) }}元
+            </span>
+            <span v-else> 打{{ coupon.discountPercent }}折 </span>
+          </el-text>
+        </div>
+        <el-form-item label-width="0">
+          <el-button @click="handleAddCoupon" type="primary" plain class="m-t-8px w-full">
+            <Icon icon="ep:plus" class="mr-5px" /> 添加
+          </el-button>
+        </el-form-item>
+      </el-card>
+      <el-card header="优惠券样式" class="property-group" shadow="never">
+        <el-form-item label="列数" prop="type">
+          <el-radio-group v-model="formData.columns">
+            <el-tooltip class="item" content="一列" placement="bottom">
+              <el-radio-button :value="1">
+                <Icon icon="fluent:text-column-one-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="二列" placement="bottom">
+              <el-radio-button :value="2">
+                <Icon icon="fluent:text-column-two-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="三列" placement="bottom">
+              <el-radio-button :value="3">
+                <Icon icon="fluent:text-column-three-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="背景图片" prop="bgImg">
+          <UploadImg v-model="formData.bgImg" height="80px" width="100%" class="min-w-160px" />
+        </el-form-item>
+        <el-form-item label="文字颜色" prop="textColor">
+          <ColorInput v-model="formData.textColor" />
+        </el-form-item>
+        <el-form-item label="按钮背景" prop="button.bgColor">
+          <ColorInput v-model="formData.button.bgColor" />
+        </el-form-item>
+        <el-form-item label="按钮文字" prop="button.color">
+          <ColorInput v-model="formData.button.color" />
+        </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>
+  <!-- 优惠券选择 -->
+  <CouponSelect
+    ref="couponSelectDialog"
+    v-model:multiple-selection="couponList"
+    :take-type="CouponTemplateTakeTypeEnum.USER.type"
+    @change="handleCouponSelect"
+  />
+</template>
+
+<script setup lang="ts">
+import { CouponCardProperty } from './config'
+import { useVModel } from '@vueuse/core'
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { floatToFixed2 } from '@/utils'
+import { CouponTemplateTakeTypeEnum, PromotionDiscountTypeEnum } from '@/utils/constants'
+import CouponSelect from '@/views/mall/promotion/coupon/components/CouponSelect.vue'
+
+// 优惠券卡片属性面板
+defineOptions({ name: 'CouponCardProperty' })
+
+const props = defineProps<{ modelValue: CouponCardProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+
+// 优惠券列表
+const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
+const couponSelectDialog = ref()
+// 添加优惠券
+const handleAddCoupon = () => {
+  couponSelectDialog.value.open()
+}
+const handleCouponSelect = () => {
+  formData.value.couponIds = couponList.value.map((coupon) => coupon.id)
+}
+
+watch(
+  () => formData.value.couponIds,
+  async () => {
+    if (formData.value.couponIds?.length > 0) {
+      couponList.value = await CouponTemplateApi.getCouponTemplateList(formData.value.couponIds)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Divider/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Divider/config.ts
new file mode 100644
index 0000000..9b55360
--- /dev/null
+++ b/marketing-ui/admin-ui/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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Divider/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Divider/index.vue
new file mode 100644
index 0000000..f778504
--- /dev/null
+++ b/marketing-ui/admin-ui/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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Divider/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Divider/property.vue
new file mode 100644
index 0000000..dc2a4da
--- /dev/null
+++ b/marketing-ui/admin-ui/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 :value="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 value="none">
+              <Icon icon="tabler:box-padding" />
+            </el-radio-button>
+          </el-tooltip>
+          <el-tooltip content="左右留边" placement="top">
+            <el-radio-button value="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 { useVModel } from '@vueuse/core'
+// 导航栏属性面板
+defineOptions({ name: 'DividerProperty' })
+const props = defineProps<{ modelValue: DividerProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts
new file mode 100644
index 0000000..fcf129f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts
@@ -0,0 +1,36 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+// 悬浮按钮属性
+export interface FloatingActionButtonProperty {
+  // 展开方向
+  direction: 'horizontal' | 'vertical'
+  // 是否显示文字
+  showText: boolean
+  // 按钮列表
+  list: FloatingActionButtonItemProperty[]
+}
+
+// 悬浮按钮项属性
+export interface FloatingActionButtonItemProperty {
+  // 图片地址
+  imgUrl: string
+  // 跳转连接
+  url: string
+  // 文字
+  text: string
+  // 文字颜色
+  textColor: string
+}
+
+// 定义组件
+export const component = {
+  id: 'FloatingActionButton',
+  name: '悬浮按钮',
+  icon: 'tabler:float-right',
+  position: 'fixed',
+  property: {
+    direction: 'vertical',
+    showText: true,
+    list: [{ textColor: '#fff' }]
+  }
+} as DiyComponent<FloatingActionButtonProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue
new file mode 100644
index 0000000..c2b9926
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <div
+    :class="[
+      'absolute bottom-32px right-[calc(50%-375px/2+32px)] flex z-12 gap-12px items-center',
+      {
+        'flex-row': property.direction === 'horizontal',
+        'flex-col': property.direction === 'vertical'
+      }
+    ]"
+  >
+    <template v-if="expanded">
+      <div
+        v-for="(item, index) in property.list"
+        :key="index"
+        class="flex flex-col items-center"
+        @click="handleActive(index)"
+      >
+        <el-image :src="item.imgUrl" fit="contain" class="h-27px w-27px">
+          <template #error>
+            <div class="h-full w-full flex items-center justify-center">
+              <Icon icon="ep:picture" :color="item.textColor" />
+            </div>
+          </template>
+        </el-image>
+        <span v-if="property.showText" class="mt-4px text-12px" :style="{ color: item.textColor }">
+          {{ item.text }}
+        </span>
+      </div>
+    </template>
+    <!-- todo: @owen 使用APP主题色 -->
+    <el-button type="primary" size="large" circle @click="handleToggleFab">
+      <Icon icon="ep:plus" :class="['fab-icon', { active: expanded }]" />
+    </el-button>
+  </div>
+  <!-- 模态背景：展开时显示，点击后折叠 -->
+  <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
+</template>
+<script setup lang="ts">
+import { FloatingActionButtonProperty } from './config'
+
+/** 悬浮按钮 */
+defineOptions({ name: 'FloatingActionButton' })
+// 定义属性
+defineProps<{ property: FloatingActionButtonProperty }>()
+
+// 是否展开
+const expanded = ref(false)
+// 处理展开/折叠
+const handleToggleFab = () => {
+  expanded.value = !expanded.value
+}
+</script>
+
+<style scoped lang="scss">
+/* 模态背景 */
+.modal-bg {
+  position: absolute;
+  left: calc(50% - 375px / 2);
+  top: 0;
+  z-index: 11;
+  width: 375px;
+  height: 100%;
+  background-color: rgba(#000000, 0.4);
+}
+
+.fab-icon {
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+
+  &.active {
+    transform: rotate(135deg);
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/FloatingActionButton/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/FloatingActionButton/property.vue
new file mode 100644
index 0000000..6eeb217
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/FloatingActionButton/property.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-form label-width="80px" :model="formData">
+    <el-card header="按钮配置" class="property-group" shadow="never">
+      <el-form-item label="展开方向" prop="direction">
+        <el-radio-group v-model="formData.direction">
+          <el-radio value="vertical">垂直</el-radio>
+          <el-radio value="horizontal">水平</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="显示文字" prop="showText">
+        <el-switch v-model="formData.showText" />
+      </el-form-item>
+    </el-card>
+    <el-card header="按钮列表" class="property-group" shadow="never">
+      <Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
+        <template #default="{ element, index }">
+          <el-form-item label="图标" :prop="`list[${index}].imgUrl`">
+            <UploadImg v-model="element.imgUrl" height="56px" width="56px" />
+          </el-form-item>
+          <el-form-item label="文字" :prop="`list[${index}].text`">
+            <InputWithColor v-model="element.text" v-model:color="element.textColor" />
+          </el-form-item>
+          <el-form-item label="跳转链接" :prop="`list[${index}].url`">
+            <AppLinkInput v-model="element.url" />
+          </el-form-item>
+        </template>
+      </Draggable>
+    </el-card>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { FloatingActionButtonProperty } from './config'
+import { useVModel } from '@vueuse/core'
+
+// 悬浮按钮属性面板
+defineOptions({ name: 'FloatingActionButtonProperty' })
+
+const props = defineProps<{ modelValue: FloatingActionButtonProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/components/HotZoneEditDialog/controller.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/components/HotZoneEditDialog/controller.ts
new file mode 100644
index 0000000..a7bd762
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/components/HotZoneEditDialog/controller.ts
@@ -0,0 +1,143 @@
+import { HotZoneItemProperty } from '@/components/DiyEditor/components/mobile/HotZone/config'
+import { StyleValue } from 'vue'
+
+// 热区的最小宽高
+export const HOT_ZONE_MIN_SIZE = 100
+
+// 控制的类型
+export enum CONTROL_TYPE_ENUM {
+  LEFT,
+  TOP,
+  WIDTH,
+  HEIGHT
+}
+
+// 定义热区的控制点
+export interface ControlDot {
+  position: string
+  types: CONTROL_TYPE_ENUM[]
+  style: StyleValue
+}
+
+// 热区的8个控制点
+export const CONTROL_DOT_LIST = [
+  {
+    position: '左上角',
+    types: [
+      CONTROL_TYPE_ENUM.LEFT,
+      CONTROL_TYPE_ENUM.TOP,
+      CONTROL_TYPE_ENUM.WIDTH,
+      CONTROL_TYPE_ENUM.HEIGHT
+    ],
+    style: { left: '-5px', top: '-5px', cursor: 'nwse-resize' }
+  },
+  {
+    position: '上方中间',
+    types: [CONTROL_TYPE_ENUM.TOP, CONTROL_TYPE_ENUM.HEIGHT],
+    style: { left: '50%', top: '-5px', cursor: 'n-resize', transform: 'translateX(-50%)' }
+  },
+  {
+    position: '右上角',
+    types: [CONTROL_TYPE_ENUM.TOP, CONTROL_TYPE_ENUM.WIDTH, CONTROL_TYPE_ENUM.HEIGHT],
+    style: { right: '-5px', top: '-5px', cursor: 'nesw-resize' }
+  },
+  {
+    position: '右侧中间',
+    types: [CONTROL_TYPE_ENUM.WIDTH],
+    style: { right: '-5px', top: '50%', cursor: 'e-resize', transform: 'translateX(-50%)' }
+  },
+  {
+    position: '右下角',
+    types: [CONTROL_TYPE_ENUM.WIDTH, CONTROL_TYPE_ENUM.HEIGHT],
+    style: { right: '-5px', bottom: '-5px', cursor: 'nwse-resize' }
+  },
+  {
+    position: '下方中间',
+    types: [CONTROL_TYPE_ENUM.HEIGHT],
+    style: { left: '50%', bottom: '-5px', cursor: 's-resize', transform: 'translateX(-50%)' }
+  },
+  {
+    position: '左下角',
+    types: [CONTROL_TYPE_ENUM.LEFT, CONTROL_TYPE_ENUM.WIDTH, CONTROL_TYPE_ENUM.HEIGHT],
+    style: { left: '-5px', bottom: '-5px', cursor: 'nesw-resize' }
+  },
+  {
+    position: '左侧中间',
+    types: [CONTROL_TYPE_ENUM.LEFT, CONTROL_TYPE_ENUM.WIDTH],
+    style: { left: '-5px', top: '50%', cursor: 'w-resize', transform: 'translateX(-50%)' }
+  }
+] as ControlDot[]
+
+//region 热区的缩放
+// 热区的缩放比例
+export const HOT_ZONE_SCALE_RATE = 2
+// 缩小：缩回适合手机屏幕的大小
+export const zoomOut = (list?: HotZoneItemProperty[]) => {
+  return (
+    list?.map((hotZone) => ({
+      ...hotZone,
+      left: (hotZone.left /= HOT_ZONE_SCALE_RATE),
+      top: (hotZone.top /= HOT_ZONE_SCALE_RATE),
+      width: (hotZone.width /= HOT_ZONE_SCALE_RATE),
+      height: (hotZone.height /= HOT_ZONE_SCALE_RATE)
+    })) || []
+  )
+}
+// 放大：作用是为了方便在电脑屏幕上编辑
+export const zoomIn = (list?: HotZoneItemProperty[]) => {
+  return (
+    list?.map((hotZone) => ({
+      ...hotZone,
+      left: (hotZone.left *= HOT_ZONE_SCALE_RATE),
+      top: (hotZone.top *= HOT_ZONE_SCALE_RATE),
+      width: (hotZone.width *= HOT_ZONE_SCALE_RATE),
+      height: (hotZone.height *= HOT_ZONE_SCALE_RATE)
+    })) || []
+  )
+}
+//endregion
+
+/**
+ * 封装热区拖拽
+ *
+ * 注：为什么不使用vueuse的useDraggable。在本场景下，其使用方式比较复杂
+ * @param hotZone 热区
+ * @param downEvent 鼠标按下事件
+ * @param callback 回调函数
+ */
+export const useDraggable = (
+  hotZone: HotZoneItemProperty,
+  downEvent: MouseEvent,
+  callback: (
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+    moveWidth: number,
+    moveHeight: number
+  ) => void
+) => {
+  // 阻止事件冒泡
+  downEvent.stopPropagation()
+
+  // 移动前的鼠标坐标
+  const { clientX: startX, clientY: startY } = downEvent
+  // 移动前的热区坐标、大小
+  const { left, top, width, height } = hotZone
+
+  // 监听鼠标移动
+  document.onmousemove = (e) => {
+    // 移动宽度
+    const moveWidth = e.clientX - startX
+    // 移动高度
+    const moveHeight = e.clientY - startY
+    // 移动回调
+    callback(left, top, width, height, moveWidth, moveHeight)
+  }
+
+  // 松开鼠标后，结束拖拽
+  document.onmouseup = () => {
+    document.onmousemove = null
+    document.onmouseup = null
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/components/HotZoneEditDialog/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/components/HotZoneEditDialog/index.vue
new file mode 100644
index 0000000..3925057
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/components/HotZoneEditDialog/index.vue
@@ -0,0 +1,236 @@
+<template>
+  <Dialog v-model="dialogVisible" title="设置热区" width="780" @close="handleClose">
+    <div ref="container" class="relative h-full w-750px">
+      <el-image :src="imgUrl" class="pointer-events-none h-full w-750px select-none" />
+      <div
+        v-for="(item, hotZoneIndex) in formData"
+        :key="hotZoneIndex"
+        class="hot-zone"
+        :style="{
+          width: `${item.width}px`,
+          height: `${item.height}px`,
+          top: `${item.top}px`,
+          left: `${item.left}px`
+        }"
+        @mousedown="handleMove(item, $event)"
+        @dblclick="handleShowAppLinkDialog(item)"
+      >
+        <span class="pointer-events-none select-none">{{ item.name || '双击选择链接' }}</span>
+        <Icon icon="ep:close" class="delete" :size="14" @click="handleRemove(item)" />
+
+        <!-- 8个控制点 -->
+        <span
+          class="ctrl-dot"
+          v-for="(dot, dotIndex) in CONTROL_DOT_LIST"
+          :key="dotIndex"
+          :style="dot.style"
+          @mousedown="handleResize(item, dot, $event)"
+        ></span>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="handleAdd" type="primary" plain>
+        <Icon icon="ep:plus" class="mr-5px" />
+        添加热区
+      </el-button>
+      <el-button @click="handleSubmit" type="primary" plain>
+        <Icon icon="ep:check" class="mr-5px" />
+        确定
+      </el-button>
+    </template>
+  </Dialog>
+  <AppLinkSelectDialog ref="appLinkDialogRef" @app-link-change="handleAppLinkChange" />
+</template>
+
+<script setup lang="ts">
+import { HotZoneItemProperty } from '@/components/DiyEditor/components/mobile/HotZone/config'
+import { array, string } from 'vue-types'
+import {
+  CONTROL_DOT_LIST,
+  CONTROL_TYPE_ENUM,
+  ControlDot,
+  HOT_ZONE_MIN_SIZE,
+  useDraggable,
+  zoomIn,
+  zoomOut
+} from './controller'
+import { AppLink } from '@/components/AppLinkInput/data'
+import { remove } from 'lodash-es'
+
+/** 热区编辑对话框 */
+defineOptions({ name: 'HotZoneEditDialog' })
+
+// 定义属性
+const props = defineProps({
+  modelValue: array<HotZoneItemProperty>(),
+  imgUrl: string().def('')
+})
+const emit = defineEmits(['update:modelValue'])
+const formData = ref<HotZoneItemProperty[]>([])
+
+// 弹窗的是否显示
+const dialogVisible = ref(false)
+// 打开弹窗
+const open = () => {
+  // 放大
+  formData.value = zoomIn(props.modelValue)
+  dialogVisible.value = true
+}
+// 提供 open 方法，用于打开弹窗
+defineExpose({ open })
+
+// 热区容器
+const container = ref<HTMLDivElement>()
+
+// 增加热区
+const handleAdd = () => {
+  formData.value.push({
+    width: HOT_ZONE_MIN_SIZE,
+    height: HOT_ZONE_MIN_SIZE,
+    top: 0,
+    left: 0
+  } as HotZoneItemProperty)
+}
+// 删除热区
+const handleRemove = (hotZone: HotZoneItemProperty) => {
+  remove(formData.value, hotZone)
+}
+
+// 移动热区
+const handleMove = (item: HotZoneItemProperty, e: MouseEvent) => {
+  useDraggable(item, e, (left, top, _, __, moveWidth, moveHeight) => {
+    setLeft(item, left + moveWidth)
+    setTop(item, top + moveHeight)
+  })
+}
+
+// 调整热区大小、位置
+const handleResize = (item: HotZoneItemProperty, ctrlDot: ControlDot, e: MouseEvent) => {
+  useDraggable(item, e, (left, top, width, height, moveWidth, moveHeight) => {
+    ctrlDot.types.forEach((type) => {
+      switch (type) {
+        case CONTROL_TYPE_ENUM.LEFT:
+          setLeft(item, left + moveWidth)
+          break
+        case CONTROL_TYPE_ENUM.TOP:
+          setTop(item, top + moveHeight)
+          break
+        case CONTROL_TYPE_ENUM.WIDTH:
+          {
+            // 上移时，高度为减少
+            const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.LEFT) ? -1 : 1
+            setWidth(item, width + moveWidth * direction)
+          }
+          break
+        case CONTROL_TYPE_ENUM.HEIGHT:
+          {
+            // 左移时，宽度为减少
+            const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.TOP) ? -1 : 1
+            setHeight(item, height + moveHeight * direction)
+          }
+          break
+      }
+    })
+  })
+}
+
+// 设置X轴坐标
+const setLeft = (item: HotZoneItemProperty, left: number) => {
+  // 不能超出容器
+  if (left >= 0 && left <= container.value!.offsetWidth - item.width) {
+    item.left = left
+  }
+}
+// 设置Y轴坐标
+const setTop = (item: HotZoneItemProperty, top: number) => {
+  // 不能超出容器
+  if (top >= 0 && top <= container.value!.offsetHeight - item.height) {
+    item.top = top
+  }
+}
+// 设置宽度
+const setWidth = (item: HotZoneItemProperty, width: number) => {
+  // 不能小于最小宽度 && 不能超出容器右边
+  if (width >= HOT_ZONE_MIN_SIZE && item.left + width <= container.value!.offsetWidth) {
+    item.width = width
+  }
+}
+// 设置高度
+const setHeight = (item: HotZoneItemProperty, height: number) => {
+  // 不能小于最小高度 && 不能超出容器底部
+  if (height >= HOT_ZONE_MIN_SIZE && item.top + height <= container.value!.offsetHeight) {
+    item.height = height
+  }
+}
+
+// 处理对话框关闭
+const handleSubmit = () => {
+  // 会自动触发handleClose
+  dialogVisible.value = false
+}
+
+// 处理对话框关闭
+const handleClose = () => {
+  // 缩小
+  const list = zoomOut(formData.value)
+  emit('update:modelValue', list)
+}
+
+const activeHotZone = ref<HotZoneItemProperty>()
+const appLinkDialogRef = ref()
+const handleShowAppLinkDialog = (hotZone: HotZoneItemProperty) => {
+  activeHotZone.value = hotZone
+  appLinkDialogRef.value.open(hotZone.url)
+}
+const handleAppLinkChange = (appLink: AppLink) => {
+  if (!appLink || !activeHotZone.value) return
+  activeHotZone.value.name = appLink.name
+  activeHotZone.value.url = appLink.path
+}
+</script>
+
+<style scoped lang="scss">
+.hot-zone {
+  position: absolute;
+  background: var(--el-color-primary-light-7);
+  opacity: 0.8;
+  border: 1px solid var(--el-color-primary);
+  color: var(--el-color-primary);
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: move;
+  z-index: 10;
+
+  /* 控制点 */
+  .ctrl-dot {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: inherit;
+    background-color: #fff;
+    z-index: 11;
+  }
+
+  .delete {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 2px 2px 6px 6px;
+    background-color: var(--el-color-primary);
+    border-radius: 0 0 0 80%;
+    cursor: pointer;
+    color: #fff;
+    text-align: right;
+  }
+
+  &:hover {
+    .delete {
+      display: block;
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/config.ts
new file mode 100644
index 0000000..80ed855
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/config.ts
@@ -0,0 +1,43 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 热区属性 */
+export interface HotZoneProperty {
+  // 图片地址
+  imgUrl: string
+  // 导航菜单列表
+  list: HotZoneItemProperty[]
+  // 组件样式
+  style: ComponentStyle
+}
+
+/** 热区项目属性 */
+export interface HotZoneItemProperty {
+  // 链接的名称
+  name: string
+  // 链接
+  url: string
+  // 宽
+  width: number
+  // 高
+  height: number
+  // 上
+  top: number
+  // 左
+  left: number
+}
+
+// 定义组件
+export const component = {
+  id: 'HotZone',
+  name: '热区',
+  icon: 'tabler:hand-click',
+  property: {
+    imgUrl: '',
+    list: [] as HotZoneItemProperty[],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<HotZoneProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/index.vue
new file mode 100644
index 0000000..3a9b842
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="relative h-full min-h-30px w-full">
+    <el-image :src="property.imgUrl" class="pointer-events-none h-full w-full select-none" />
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="hot-zone"
+      :style="{
+        width: `${item.width}px`,
+        height: `${item.height}px`,
+        top: `${item.top}px`,
+        left: `${item.left}px`
+      }"
+    >
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { HotZoneProperty } from './config'
+
+/** 热区 */
+defineOptions({ name: 'HotZone' })
+const props = defineProps<{ property: HotZoneProperty }>()
+</script>
+
+<style scoped lang="scss">
+.hot-zone {
+  position: absolute;
+  background: var(--el-color-primary-light-7);
+  opacity: 0.8;
+  border: 1px solid var(--el-color-primary);
+  color: var(--el-color-primary);
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: move;
+  z-index: 10;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/property.vue
new file mode 100644
index 0000000..65892f8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/HotZone/property.vue
@@ -0,0 +1,63 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <el-form label-width="80px" :model="formData" class="m-t-8px">
+      <el-form-item label="上传图片" prop="imgUrl">
+        <UploadImg v-model="formData.imgUrl" height="50px" width="auto" class="min-w-80px">
+          <template #tip>
+            <el-text type="info" size="small"> 推荐宽度 750</el-text>
+          </template>
+        </UploadImg>
+      </el-form-item>
+    </el-form>
+
+    <el-button type="primary" plain class="w-full" @click="handleOpenEditDialog">
+      设置热区
+    </el-button>
+  </ComponentContainerProperty>
+  <!-- 热区编辑对话框 -->
+  <HotZoneEditDialog ref="editDialogRef" v-model="formData.list" :img-url="formData.imgUrl" />
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { HotZoneProperty } from '@/components/DiyEditor/components/mobile/HotZone/config'
+import HotZoneEditDialog from './components/HotZoneEditDialog/index.vue'
+
+/** 热区属性面板 */
+defineOptions({ name: 'HotZoneProperty' })
+
+const props = defineProps<{ modelValue: HotZoneProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+
+// 热区编辑对话框
+const editDialogRef = ref()
+// 打开热区编辑对话框
+const handleOpenEditDialog = () => {
+  editDialogRef.value.open()
+}
+</script>
+
+<style scoped lang="scss">
+.hot-zone {
+  position: absolute;
+  background: #409effbf;
+  border: 1px solid var(--el-color-primary);
+  color: #fff;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: move;
+
+  /* 控制点 */
+  .ctrl-dot {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: #fff;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ImageBar/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ImageBar/config.ts
new file mode 100644
index 0000000..68edf72
--- /dev/null
+++ b/marketing-ui/admin-ui/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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ImageBar/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ImageBar/index.vue
new file mode 100644
index 0000000..d9685b5
--- /dev/null
+++ b/marketing-ui/admin-ui/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 {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ImageBar/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ImageBar/property.vue
new file mode 100644
index 0000000..fe08756
--- /dev/null
+++ b/marketing-ui/admin-ui/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">
+        <AppLinkInput v-model="formData.url" />
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { ImageBarProperty } from './config'
+import { useVModel } from '@vueuse/core'
+
+// 图片展示属性面板
+defineOptions({ name: 'ImageBarProperty' })
+
+const props = defineProps<{ modelValue: ImageBarProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MagicCube/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MagicCube/config.ts
new file mode 100644
index 0000000..5e10ab5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MagicCube/config.ts
@@ -0,0 +1,49 @@
+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: 'bi:columns',
+  property: {
+    borderRadiusTop: 0,
+    borderRadiusBottom: 0,
+    space: 0,
+    list: [],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<MagicCubeProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MagicCube/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MagicCube/index.vue
new file mode 100644
index 0000000..48fb6c7
--- /dev/null
+++ b/marketing-ui/admin-ui/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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MagicCube/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MagicCube/property.vue
new file mode 100644
index 0000000..dee3117
--- /dev/null
+++ b/marketing-ui/admin-ui/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`">
+            <AppLinkInput v-model="hotArea.url" />
+          </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 { useVModel } from '@vueuse/core'
+import { MagicCubeProperty } from '@/components/DiyEditor/components/mobile/MagicCube/config'
+
+/** 广告魔方属性面板 */
+defineOptions({ name: 'MagicCubeProperty' })
+
+const props = defineProps<{ modelValue: MagicCubeProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+
+// 选中的热区
+const selectedHotAreaIndex = ref(-1)
+const handleHotAreaSelected = (_: any, index: number) => {
+  selectedHotAreaIndex.value = index
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuGrid/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuGrid/config.ts
new file mode 100644
index 0000000..9f91ceb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuGrid/config.ts
@@ -0,0 +1,79 @@
+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: 'bi:grid-3x3-gap',
+  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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuGrid/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuGrid/index.vue
new file mode 100644
index 0000000..1c5ef1d
--- /dev/null
+++ b/marketing-ui/admin-ui/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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuGrid/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuGrid/property.vue
new file mode 100644
index 0000000..e05988e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuGrid/property.vue
@@ -0,0 +1,65 @@
+<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 :value="3">3个</el-radio>
+          <el-radio :value="4">4个</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-card header="菜单设置" class="property-group" shadow="never">
+        <Draggable v-model="formData.list" :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY">
+          <template #default="{ element }">
+            <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">
+              <AppLinkInput 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>
+          </template>
+        </Draggable>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import {
+  EMPTY_MENU_GRID_ITEM_PROPERTY,
+  MenuGridProperty
+} from '@/components/DiyEditor/components/mobile/MenuGrid/config'
+
+/** 宫格导航属性面板 */
+defineOptions({ name: 'MenuGridProperty' })
+
+const props = defineProps<{ modelValue: MenuGridProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuList/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuList/config.ts
new file mode 100644
index 0000000..f96fd0a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuList/config.ts
@@ -0,0 +1,48 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+import { cloneDeep } from 'lodash-es'
+
+/** 列表导航属性 */
+export interface MenuListProperty {
+  // 导航菜单列表
+  list: MenuListItemProperty[]
+  // 组件样式
+  style: ComponentStyle
+}
+
+/** 列表导航项目属性 */
+export interface MenuListItemProperty {
+  // 图标链接
+  iconUrl: string
+  // 标题
+  title: string
+  // 标题颜色
+  titleColor: string
+  // 副标题
+  subtitle: string
+  // 副标题颜色
+  subtitleColor: string
+  // 链接
+  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: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<MenuListProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuList/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuList/index.vue
new file mode 100644
index 0000000..9a56fd9
--- /dev/null
+++ b/marketing-ui/admin-ui/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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuList/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuList/property.vue
new file mode 100644
index 0000000..b665b32
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuList/property.vue
@@ -0,0 +1,45 @@
+<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">
+      <Draggable v-model="formData.list" :empty-item="EMPTY_MENU_LIST_ITEM_PROPERTY">
+        <template #default="{ element }">
+          <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">
+            <AppLinkInput v-model="element.url" />
+          </el-form-item>
+        </template>
+      </Draggable>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import {
+  EMPTY_MENU_LIST_ITEM_PROPERTY,
+  MenuListProperty
+} from '@/components/DiyEditor/components/mobile/MenuList/config'
+
+/** 列表导航属性面板 */
+defineOptions({ name: 'MenuListProperty' })
+
+const props = defineProps<{ modelValue: MenuListProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuSwiper/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuSwiper/config.ts
new file mode 100644
index 0000000..fe5f4e8
--- /dev/null
+++ b/marketing-ui/admin-ui/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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue
new file mode 100644
index 0000000..f8e2bbc
--- /dev/null
+++ b/marketing-ui/admin-ui/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-12px"
+            :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 = 42
+// 垂直间距：一行上下的间距
+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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuSwiper/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuSwiper/property.vue
new file mode 100644
index 0000000..3dd3f7c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/MenuSwiper/property.vue
@@ -0,0 +1,76 @@
+<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 value="iconText">图标+文字</el-radio>
+          <el-radio value="icon">仅图标</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="行数" prop="row">
+        <el-radio-group v-model="formData.row">
+          <el-radio :value="1">1行</el-radio>
+          <el-radio :value="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 :value="3">3列</el-radio>
+          <el-radio :value="4">4列</el-radio>
+          <el-radio :value="5">5列</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-card header="菜单设置" class="property-group" shadow="never">
+        <Draggable v-model="formData.list" :empty-item="cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)">
+          <template #default="{ element }">
+            <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">
+              <AppLinkInput 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>
+          </template>
+        </Draggable>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+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 = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue
new file mode 100644
index 0000000..ea0e7ca
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="h-40px flex items-center justify-center">
+    <MagicCubeEditor
+      v-model="cellList"
+      :cols="cellCount"
+      :cube-size="38"
+      :rows="1"
+      class="m-b-16px"
+      @hot-area-selected="handleHotAreaSelected"
+    />
+    <img v-if="isMp" alt="" class="h-30px w-76px" src="@/assets/imgs/diy/app-nav-bar-mp.png" />
+  </div>
+  <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
+    <template v-if="selectedHotAreaIndex === cellIndex">
+      <el-form-item :prop="`cell[${cellIndex}].type`" label="类型">
+        <el-radio-group v-model="cell.type">
+          <el-radio value="text">文字</el-radio>
+          <el-radio value="image">图片</el-radio>
+          <el-radio value="search">搜索框</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <!-- 1. 文字 -->
+      <template v-if="cell.type === 'text'">
+        <el-form-item :prop="`cell[${cellIndex}].text`" label="内容">
+          <el-input v-model="cell!.text" maxlength="10" show-word-limit />
+        </el-form-item>
+        <el-form-item :prop="`cell[${cellIndex}].text`" label="颜色">
+          <ColorInput v-model="cell!.textColor" />
+        </el-form-item>
+        <el-form-item :prop="`cell[${cellIndex}].url`" label="链接">
+          <AppLinkInput v-model="cell.url" />
+        </el-form-item>
+      </template>
+      <!-- 2. 图片 -->
+      <template v-else-if="cell.type === 'image'">
+        <el-form-item :prop="`cell[${cellIndex}].imgUrl`" label="图片">
+          <UploadImg v-model="cell.imgUrl" :limit="1" height="56px" width="56px">
+            <template #tip>建议尺寸 56*56</template>
+          </UploadImg>
+        </el-form-item>
+        <el-form-item :prop="`cell[${cellIndex}].url`" label="链接">
+          <AppLinkInput v-model="cell.url" />
+        </el-form-item>
+      </template>
+      <!-- 3. 搜索框 -->
+      <template v-else>
+        <el-form-item :prop="`cell[${cellIndex}].placeholder`" label="提示文字">
+          <el-input v-model="cell.placeholder" maxlength="10" show-word-limit />
+        </el-form-item>
+        <el-form-item :prop="`cell[${cellIndex}].borderRadius`" label="圆角">
+          <el-slider
+            v-model="cell.borderRadius"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
+      </template>
+    </template>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { NavigationBarCellProperty } from '../config'
+import { useVModel } from '@vueuse/core'
+// 导航栏属性面板
+defineOptions({ name: 'NavigationBarCellProperty' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: NavigationBarCellProperty[]
+    isMp: boolean
+  }>(),
+  {
+    modelValue: () => [],
+    isMp: true
+  }
+)
+const emit = defineEmits(['update:modelValue'])
+const cellList = useVModel(props, 'modelValue', emit)
+
+// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
+const cellCount = computed(() => (props.isMp ? 6 : 8))
+
+// 选中的热区
+const selectedHotAreaIndex = ref(0)
+const handleHotAreaSelected = (cellValue: NavigationBarCellProperty, index: number) => {
+  selectedHotAreaIndex.value = index
+  if (!cellValue.type) {
+    cellValue.type = 'text'
+    cellValue.textColor = '#111111'
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
new file mode 100644
index 0000000..36612a3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
@@ -0,0 +1,82 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 顶部导航栏属性 */
+export interface NavigationBarProperty {
+  // 背景类型
+  bgType: 'color' | 'img'
+  // 背景颜色
+  bgColor: string
+  // 图片链接
+  bgImg: string
+  // 样式类型：默认 | 沉浸式
+  styleType: 'normal' | 'inner'
+  // 常驻显示
+  alwaysShow: boolean
+  // 小程序单元格列表
+  mpCells: NavigationBarCellProperty[]
+  // 其它平台单元格列表
+  otherCells: NavigationBarCellProperty[]
+  // 本地变量
+  _local: {
+    // 预览顶部导航（小程序）
+    previewMp: boolean
+    // 预览顶部导航（非小程序）
+    previewOther: boolean
+  }
+}
+
+/** 顶部导航栏 - 单元格 属性 */
+export interface NavigationBarCellProperty {
+  // 类型：文字 | 图片 | 搜索框
+  type: 'text' | 'image' | 'search'
+  // 宽度
+  width: number
+  // 高度
+  height: number
+  // 顶部位置
+  top: number
+  // 左侧位置
+  left: number
+  // 文字内容
+  text: string
+  // 文字颜色
+  textColor: string
+  // 图片地址
+  imgUrl: string
+  // 图片链接
+  url: string
+  // 搜索框：提示文字
+  placeholder: string
+  // 搜索框：边框圆角半径
+  borderRadius: number
+}
+
+// 定义组件
+export const component = {
+  id: 'NavigationBar',
+  name: '顶部导航栏',
+  icon: 'tabler:layout-navbar',
+  property: {
+    bgType: 'color',
+    bgColor: '#fff',
+    bgImg: '',
+    styleType: 'normal',
+    alwaysShow: true,
+    mpCells: [
+      {
+        type: 'text',
+        textColor: '#111111'
+      }
+    ],
+    otherCells: [
+      {
+        type: 'text',
+        textColor: '#111111'
+      }
+    ],
+    _local: {
+      previewMp: true,
+      previewOther: false
+    }
+  }
+} as DiyComponent<NavigationBarProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
new file mode 100644
index 0000000..c5a92b3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="navigation-bar" :style="bgStyle">
+    <div class="h-full w-full flex items-center">
+      <div v-for="(cell, cellIndex) in cellList" :key="cellIndex" :style="getCellStyle(cell)">
+        <span v-if="cell.type === 'text'">{{ cell.text }}</span>
+        <img v-else-if="cell.type === 'image'" :src="cell.imgUrl" alt="" class="h-full w-full" />
+        <SearchBar v-else :property="getSearchProp(cell)" />
+      </div>
+    </div>
+    <img
+      v-if="property._local?.previewMp"
+      src="@/assets/imgs/diy/app-nav-bar-mp.png"
+      alt=""
+      class="h-30px w-86px"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { NavigationBarCellProperty, NavigationBarProperty } from './config'
+import SearchBar from '@/components/DiyEditor/components/mobile/SearchBar/index.vue'
+import { StyleValue } from 'vue'
+import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
+
+/** 页面顶部导航栏 */
+defineOptions({ name: 'NavigationBar' })
+
+const props = defineProps<{ property: NavigationBarProperty }>()
+
+// 背景
+const bgStyle = computed(() => {
+  const background =
+    props.property.bgType === 'img' && props.property.bgImg
+      ? `url(${props.property.bgImg}) no-repeat top center / 100% 100%`
+      : props.property.bgColor
+  return { background }
+})
+// 单元格列表
+const cellList = computed(() =>
+  props.property._local?.previewMp ? props.property.mpCells : props.property.otherCells
+)
+// 单元格宽度
+const cellWidth = computed(() => {
+  return props.property._local?.previewMp ? (375 - 80 - 86) / 6 : (375 - 90) / 8
+})
+// 获得单元格样式
+const getCellStyle = (cell: NavigationBarCellProperty) => {
+  return {
+    width: cell.width * cellWidth.value + (cell.width - 1) * 10 + 'px',
+    left: cell.left * cellWidth.value + (cell.left + 1) * 10 + 'px',
+    position: 'absolute'
+  } as StyleValue
+}
+// 获得搜索框属性
+const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
+  return {
+    height: 30,
+    showScan: false,
+    placeholder: cell.placeholder,
+    borderRadius: cell.borderRadius
+  } as SearchProperty
+})
+</script>
+<style lang="scss" scoped>
+.navigation-bar {
+  display: flex;
+  height: 50px;
+  background: #fff;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 6px;
+
+  /* 左边 */
+  .left {
+    margin-left: 8px;
+  }
+
+  .center {
+    font-size: 14px;
+    line-height: 35px;
+    color: #333;
+    text-align: center;
+    flex: 1;
+  }
+
+  /* 右边 */
+  .right {
+    margin-right: 8px;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/property.vue
new file mode 100644
index 0000000..17534cf
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NavigationBar/property.vue
@@ -0,0 +1,86 @@
+<template>
+  <el-form label-width="80px" :model="formData" :rules="rules">
+    <el-form-item label="样式" prop="styleType">
+      <el-radio-group v-model="formData!.styleType">
+        <el-radio value="normal">标准</el-radio>
+        <el-tooltip
+          content="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件"
+          placement="top"
+        >
+          <el-radio value="inner">沉浸式</el-radio>
+        </el-tooltip>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="常驻显示" prop="alwaysShow" v-if="formData.styleType === 'inner'">
+      <el-radio-group v-model="formData!.alwaysShow">
+        <el-radio :value="false">关闭</el-radio>
+        <el-tooltip content="常驻显示关闭后,头部小组件将在页面滑动时淡入" placement="top">
+          <el-radio :value="true">开启</el-radio>
+        </el-tooltip>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="背景类型" prop="bgType">
+      <el-radio-group v-model="formData.bgType">
+        <el-radio value="color">纯色</el-radio>
+        <el-radio value="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" width="56px" height="56px" />
+    </el-form-item>
+    <el-card class="property-group" shadow="never">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span>内容（小程序）</span>
+          <el-form-item prop="_local.previewMp" class="m-b-0!">
+            <el-checkbox
+              v-model="formData._local.previewMp"
+              @change="formData._local.previewOther = !formData._local.previewMp"
+              >预览</el-checkbox
+            >
+          </el-form-item>
+        </div>
+      </template>
+      <NavigationBarCellProperty v-model="formData.mpCells" is-mp />
+    </el-card>
+    <el-card class="property-group" shadow="never">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span>内容（非小程序）</span>
+          <el-form-item prop="_local.previewOther" class="m-b-0!">
+            <el-checkbox
+              v-model="formData._local.previewOther"
+              @change="formData._local.previewMp = !formData._local.previewOther"
+              >预览</el-checkbox
+            >
+          </el-form-item>
+        </div>
+      </template>
+      <NavigationBarCellProperty v-model="formData.otherCells" :is-mp="false" />
+    </el-card>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { NavigationBarProperty } from './config'
+import { useVModel } from '@vueuse/core'
+import NavigationBarCellProperty from '@/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue'
+// 导航栏属性面板
+defineOptions({ name: 'NavigationBarProperty' })
+// 表单校验
+const rules = {
+  name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }]
+}
+
+const props = defineProps<{ modelValue: NavigationBarProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+if (!formData.value._local) {
+  formData.value._local = { previewMp: true, previewOther: false }
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NoticeBar/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NoticeBar/config.ts
new file mode 100644
index 0000000..b6b0860
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NoticeBar/config.ts
@@ -0,0 +1,46 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 公告栏属性 */
+export interface NoticeBarProperty {
+  // 图标地址
+  iconUrl: string
+  // 公告内容列表
+  contents: NoticeContentProperty[]
+  // 背景颜色
+  backgroundColor: string
+  // 文字颜色
+  textColor: string
+  // 组件样式
+  style: ComponentStyle
+}
+
+/** 内容属性 */
+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',
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<NoticeBarProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NoticeBar/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
new file mode 100644
index 0000000..fce1afb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="flex items-center p-y-4px 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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NoticeBar/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NoticeBar/property.vue
new file mode 100644
index 0000000..99d04b0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/NoticeBar/property.vue
@@ -0,0 +1,46 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <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-card header="公告内容" class="property-group" shadow="never">
+        <Draggable v-model="formData.contents">
+          <template #default="{ element }">
+            <el-form-item label="公告" prop="text" label-width="40px">
+              <el-input v-model="element.text" placeholder="请输入公告" />
+            </el-form-item>
+            <el-form-item label="链接" prop="url" label-width="40px">
+              <AppLinkInput v-model="element.url" />
+            </el-form-item>
+          </template>
+        </Draggable>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { NoticeBarProperty } from './config'
+import { useVModel } from '@vueuse/core'
+// 通知栏属性面板
+defineOptions({ name: 'NoticeBarProperty' })
+// 表单校验
+const rules = {
+  content: [{ required: true, message: '请输入公告', trigger: 'blur' }]
+}
+
+const props = defineProps<{ modelValue: NoticeBarProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PageConfig/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PageConfig/config.ts
new file mode 100644
index 0000000..f8e45e4
--- /dev/null
+++ b/marketing-ui/admin-ui/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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PageConfig/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PageConfig/property.vue
new file mode 100644
index 0000000..d8f51d2
--- /dev/null
+++ b/marketing-ui/admin-ui/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 { useVModel } from '@vueuse/core'
+// 导航栏属性面板
+defineOptions({ name: 'PageConfigProperty' })
+// 表单校验
+const rules = {}
+
+const props = defineProps<{ modelValue: PageConfigProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Popover/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Popover/config.ts
new file mode 100644
index 0000000..e814090
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Popover/config.ts
@@ -0,0 +1,26 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 弹窗广告属性 */
+export interface PopoverProperty {
+  list: PopoverItemProperty[]
+}
+
+export interface PopoverItemProperty {
+  // 图片地址
+  imgUrl: string
+  // 跳转连接
+  url: string
+  // 显示类型：仅显示一次、每次启动都会显示
+  showType: 'once' | 'always'
+}
+
+// 定义组件
+export const component = {
+  id: 'Popover',
+  name: '弹窗广告',
+  icon: 'carbon:popup',
+  position: 'fixed',
+  property: {
+    list: [{ showType: 'once' }]
+  }
+} as DiyComponent<PopoverProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Popover/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Popover/index.vue
new file mode 100644
index 0000000..347599b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Popover/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div
+    v-for="(item, index) in property.list"
+    :key="index"
+    class="absolute bottom-50% right-50% h-454px w-292px border-1px border-gray border-rounded-4px border-solid bg-white p-1px"
+    :style="{
+      zIndex: 100 + index + (activeIndex === index ? 100 : 0),
+      marginRight: `${-146 - index * 20}px`,
+      marginBottom: `${-227 - index * 20}px`
+    }"
+    @click="handleActive(index)"
+  >
+    <el-image :src="item.imgUrl" fit="contain" class="h-full w-full">
+      <template #error>
+        <div class="h-full w-full flex items-center justify-center">
+          <Icon icon="ep:picture" />
+        </div>
+      </template>
+    </el-image>
+    <div class="absolute right-1 top-1 text-12px">{{ index + 1 }}</div>
+  </div>
+</template>
+<script setup lang="ts">
+import { PopoverProperty } from './config'
+
+/** 弹窗广告 */
+defineOptions({ name: 'Popover' })
+// 定义属性
+defineProps<{ property: PopoverProperty }>()
+
+// 处理选中
+const activeIndex = ref(0)
+const handleActive = (index: number) => {
+  activeIndex.value = index
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Popover/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Popover/property.vue
new file mode 100644
index 0000000..21be46e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/Popover/property.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-form label-width="80px" :model="formData">
+    <Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
+      <template #default="{ element, index }">
+        <el-form-item label="图片" :prop="`list[${index}].imgUrl`">
+          <UploadImg v-model="element.imgUrl" height="56px" width="56px" />
+        </el-form-item>
+        <el-form-item label="跳转链接" :prop="`list[${index}].url`">
+          <AppLinkInput v-model="element.url" />
+        </el-form-item>
+        <el-form-item label="显示次数" :prop="`list[${index}].showType`">
+          <el-radio-group v-model="element.showType">
+            <el-tooltip content="只显示一次，下次打开时不显示" placement="bottom">
+              <el-radio value="once">一次</el-radio>
+            </el-tooltip>
+            <el-tooltip content="每次打开时都会显示" placement="bottom">
+              <el-radio value="always">不限</el-radio>
+            </el-tooltip>
+          </el-radio-group>
+        </el-form-item>
+      </template>
+    </Draggable>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { PopoverProperty } from './config'
+import { useVModel } from '@vueuse/core'
+
+// 弹窗广告属性面板
+defineOptions({ name: 'PopoverProperty' })
+
+const props = defineProps<{ modelValue: PopoverProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductCard/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductCard/config.ts
new file mode 100644
index 0000000..735b6ba
--- /dev/null
+++ b/marketing-ui/admin-ui/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: 'fluent:text-column-two-left-24-filled',
+  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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductCard/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductCard/index.vue
new file mode 100644
index 0000000..25f8cb8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductCard/index.vue
@@ -0,0 +1,167 @@
+<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 }"
+          >
+            ￥{{ fenToYuan(spu.price as any) }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            class="ml-4px text-10px line-through"
+            :style="{ color: property.fields.marketPrice.color }"
+            >￥{{ fenToYuan(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'
+import { fenToYuan } from '../../../../../utils'
+
+/** 商品卡片 */
+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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductCard/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductCard/property.vue
new file mode 100644
index 0000000..91846e6
--- /dev/null
+++ b/marketing-ui/admin-ui/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 value="oneColBigImg">
+                <Icon icon="fluent:text-column-one-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="单列小图" placement="bottom">
+              <el-radio-button value="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 value="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 value="text">文字</el-radio-button>
+            <el-radio-button value="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 { useVModel } from '@vueuse/core'
+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 = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductList/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductList/config.ts
new file mode 100644
index 0000000..1f16832
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductList/config.ts
@@ -0,0 +1,64 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 商品栏属性 */
+export interface ProductListProperty {
+  // 布局类型：双列 | 三列 | 水平滑动
+  layoutType: 'twoCol' | 'threeCol' | 'horizSwiper'
+  // 商品字段
+  fields: {
+    // 商品名称
+    name: ProductListFieldProperty
+    // 商品价格
+    price: ProductListFieldProperty
+  }
+  // 角标
+  badge: {
+    // 是否显示
+    show: boolean
+    // 角标图片
+    imgUrl: string
+  }
+  // 上圆角
+  borderRadiusTop: number
+  // 下圆角
+  borderRadiusBottom: number
+  // 间距
+  space: number
+  // 商品编号列表
+  spuIds: number[]
+  // 组件样式
+  style: ComponentStyle
+}
+// 商品字段
+export interface ProductListFieldProperty {
+  // 是否显示
+  show: boolean
+  // 颜色
+  color: string
+}
+
+// 定义组件
+export const component = {
+  id: 'ProductList',
+  name: '商品栏',
+  icon: 'fluent:text-column-two-24-filled',
+  property: {
+    layoutType: 'twoCol',
+    fields: {
+      name: { show: true, color: '#000' },
+      price: { show: true, color: '#ff3000' }
+    },
+    badge: { show: false, imgUrl: '' },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    spuIds: [],
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<ProductListProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductList/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductList/index.vue
new file mode 100644
index 0000000..a51fc07
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductList/index.vue
@@ -0,0 +1,132 @@
+<template>
+  <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
+    <!-- 商品网格 -->
+    <div
+      class="grid overflow-x-auto"
+      :style="{
+        gridGap: `${property.space}px`,
+        gridTemplateColumns,
+        width: scrollbarWidth
+      }"
+    >
+      <!-- 商品 -->
+      <div
+        class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+        :style="{
+          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>
+        <!-- 商品封面图 -->
+        <el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
+        <div
+          :class="[
+            'flex flex-col gap-8px p-8px box-border',
+            {
+              'w-[calc(100%-64px)]': columns === 2,
+              'w-full': columns === 3
+            }
+          ]"
+        >
+          <!-- 商品名称 -->
+          <div
+            v-if="property.fields.name.show"
+            class="truncate text-12px"
+            :style="{ color: property.fields.name.color }"
+          >
+            {{ spu.name }}
+          </div>
+          <div>
+            <!-- 商品价格 -->
+            <span
+              v-if="property.fields.price.show"
+              class="text-12px"
+              :style="{ color: property.fields.price.color }"
+            >
+              ￥{{ fenToYuan(spu.price) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+<script setup lang="ts">
+import { ProductListProperty } from './config'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import { fenToYuan } from '@/utils'
+
+/** 商品栏 */
+defineOptions({ name: 'ProductList' })
+// 定义属性
+const props = defineProps<{ property: ProductListProperty }>()
+// 商品列表
+const spuList = ref<ProductSpuApi.Spu[]>([])
+watch(
+  () => props.property.spuIds,
+  async () => {
+    spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+// 手机宽度
+const phoneWidth = ref(375)
+// 容器
+const containerRef = ref()
+// 商品的列数
+const columns = ref(2)
+// 滚动条宽度
+const scrollbarWidth = ref('100%')
+// 商品图大小
+const imageSize = ref('0')
+// 商品网络列数
+const gridTemplateColumns = ref('')
+// 计算布局参数
+watch(
+  () => [props.property, phoneWidth, spuList.value.length],
+  () => {
+    // 计算列数
+    columns.value = props.property.layoutType === 'twoCol' ? 2 : 3
+    // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
+    const productWidth =
+      (phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
+    // 商品图布局：2列时，左右布局 3列时，上下布局
+    imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
+    // 根据布局类型，计算行数、列数
+    if (props.property.layoutType === 'horizSwiper') {
+      // 单行显示
+      gridTemplateColumns.value = `repeat(auto-fill, ${productWidth}px)`
+      // 显示滚动条
+      scrollbarWidth.value = `${
+        productWidth * spuList.value.length + props.property.space * (spuList.value.length - 1)
+      }px`
+    } else {
+      // 指定列数
+      gridTemplateColumns.value = `repeat(${columns.value}, auto)`
+      // 不滚动
+      scrollbarWidth.value = '100%'
+    }
+  },
+  { immediate: true, deep: true }
+)
+onMounted(() => {
+  // 提取手机宽度
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductList/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductList/property.vue
new file mode 100644
index 0000000..d7a5a7c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/ProductList/property.vue
@@ -0,0 +1,99 @@
+<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 value="twoCol">
+                <Icon icon="fluent:text-column-two-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="三列" placement="bottom">
+              <el-radio-button value="threeCol">
+                <Icon icon="fluent:text-column-three-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="水平滑动" placement="bottom">
+              <el-radio-button value="horizSwiper">
+                <Icon icon="system-uicons:carousel" />
+              </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.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-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="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 { ProductListProperty } from './config'
+import { useVModel } from '@vueuse/core'
+import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
+
+// 商品栏属性面板
+defineOptions({ name: 'ProductListProperty' })
+
+const props = defineProps<{ modelValue: ProductListProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts
new file mode 100644
index 0000000..c6270c2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts
@@ -0,0 +1,25 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 营销文章属性 */
+export interface PromotionArticleProperty {
+  // 文章编号
+  id: number
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionArticle',
+  name: '营销文章',
+  icon: 'ph:article-medium',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<PromotionArticleProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue
new file mode 100644
index 0000000..e003b08
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="min-h-30px" v-html="article?.content"></div>
+</template>
+<script setup lang="ts">
+import { PromotionArticleProperty } from './config'
+import * as ArticleApi from '@/api/mall/promotion/article/index'
+
+/** 营销文章 */
+defineOptions({ name: 'PromotionArticle' })
+// 定义属性
+const props = defineProps<{ property: PromotionArticleProperty }>()
+// 商品列表
+const article = ref<ArticleApi.ArticleVO>()
+watch(
+  () => props.property.id,
+  async () => {
+    if (props.property.id) {
+      article.value = await ArticleApi.getArticle(props.property.id)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionArticle/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionArticle/property.vue
new file mode 100644
index 0000000..10c5840
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionArticle/property.vue
@@ -0,0 +1,56 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form label-width="40px" :model="formData">
+      <el-form-item label="文章" prop="id">
+        <el-select
+          v-model="formData.id"
+          placeholder="请选择文章"
+          class="w-full"
+          filterable
+          remote
+          :remote-method="queryArticleList"
+          :loading="loading"
+        >
+          <el-option
+            v-for="article in articles"
+            :key="article.id"
+            :label="article.title"
+            :value="article.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { PromotionArticleProperty } from './config'
+import { useVModel } from '@vueuse/core'
+import * as ArticleApi from '@/api/mall/promotion/article/index'
+
+// 营销文章属性面板
+defineOptions({ name: 'PromotionArticleProperty' })
+
+const props = defineProps<{ modelValue: PromotionArticleProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+// 文章列表
+const articles = ref<ArticleApi.ArticleVO>([])
+
+// 加载中
+const loading = ref(false)
+// 查询文章列表
+const queryArticleList = async (title?: string) => {
+  loading.value = true
+  const { list } = await ArticleApi.getArticlePage({ title, pageSize: 10 })
+  articles.value = list
+  loading.value = false
+}
+
+// 初始化
+onMounted(() => {
+  queryArticleList()
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
new file mode 100644
index 0000000..f4fdf6e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
@@ -0,0 +1,96 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 拼团属性 */
+export interface PromotionCombinationProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'
+  // 商品字段
+  fields: {
+    // 商品名称
+    name: PromotionCombinationFieldProperty
+    // 商品简介
+    introduction: PromotionCombinationFieldProperty
+    // 商品价格
+    price: PromotionCombinationFieldProperty
+    // 市场价
+    marketPrice: PromotionCombinationFieldProperty
+    // 商品销量
+    salesCount: PromotionCombinationFieldProperty
+    // 商品库存
+    stock: PromotionCombinationFieldProperty
+  }
+  // 角标
+  badge: {
+    // 是否显示
+    show: boolean
+    // 角标图片
+    imgUrl: string
+  }
+  // 按钮
+  btnBuy: {
+    // 类型：文字 | 图片
+    type: 'text' | 'img'
+    // 文字
+    text: string
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string
+    // 图片按钮：图片地址
+    imgUrl: string
+  }
+  // 上圆角
+  borderRadiusTop: number
+  // 下圆角
+  borderRadiusBottom: number
+  // 间距
+  space: number
+  // 拼团活动编号
+  activityIds: number[]
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 商品字段
+export interface PromotionCombinationFieldProperty {
+  // 是否显示
+  show: boolean
+  // 颜色
+  color: string
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionCombination',
+  name: '拼团',
+  icon: 'mdi:account-group',
+  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: '去拼团',
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: ''
+    },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<PromotionCombinationProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
new file mode 100644
index 0000000..d41bf1c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
@@ -0,0 +1,201 @@
+<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 }"
+          >
+            ￥{{ fenToYuan(spu.price || Infinity) }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            class="ml-4px text-10px line-through"
+            :style="{ color: property.fields.marketPrice.color }"
+            >￥{{ fenToYuan(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 { PromotionCombinationProperty } from './config'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
+import { fenToYuan } from '@/utils'
+
+/** 拼团卡片 */
+defineOptions({ name: 'PromotionCombination' })
+// 定义属性
+const props = defineProps<{ property: PromotionCombinationProperty }>()
+// 商品列表
+const spuList = ref<ProductSpuApi.Spu[]>([])
+const spuIdList = ref<number[]>([])
+const combinationActivityList = ref<CombinationActivityApi.CombinationActivityVO[]>([])
+
+watch(
+  () => props.property.activityIds,
+  async () => {
+    try {
+      // 新添加的拼团组件，是没有活动ID的
+      const activityIds = props.property.activityIds
+      // 检查活动ID的有效性
+      if (Array.isArray(activityIds) && activityIds.length > 0) {
+        // 获取拼团活动详情列表
+        combinationActivityList.value =
+          await CombinationActivityApi.getCombinationActivityListByIds(activityIds)
+
+        // 获取拼团活动的 SPU 详情列表
+        spuList.value = []
+        spuIdList.value = combinationActivityList.value
+          .map((activity) => activity.spuId)
+          .filter((spuId): spuId is number => typeof spuId === 'number')
+        if (spuIdList.value.length > 0) {
+          spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value)
+        }
+
+        // 更新 SPU 的最低价格
+        combinationActivityList.value.forEach((activity) => {
+          // 匹配spuId
+          const spu = spuList.value.find((spu) => spu.id === activity.spuId)
+          if (spu) {
+            // 赋值活动价格，哪个最便宜就赋值哪个
+            spu.price = Math.min(activity.combinationPrice || Infinity, spu.price || Infinity)
+          }
+        })
+      }
+    } catch (error) {
+      console.error('获取拼团活动细节或 SPU 细节时出错:', error)
+    }
+  },
+  {
+    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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
new file mode 100644
index 0000000..b796e6a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
@@ -0,0 +1,164 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form label-width="80px" :model="formData">
+      <el-card header="拼团活动" class="property-group" shadow="never">
+        <CombinationShowcase v-model="formData.activityIds" />
+      </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 value="oneColBigImg">
+                <Icon icon="fluent:text-column-one-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="单列小图" placement="bottom">
+              <el-radio-button value="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 value="twoCol">
+                <Icon icon="fluent:text-column-two-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <!--<el-tooltip class="item" content="三列" placement="bottom">
+              <el-radio-button value="threeCol">
+                <Icon icon="fluent:text-column-three-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 value="text">文字</el-radio-button>
+            <el-radio-button value="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 { PromotionCombinationProperty } from './config'
+import { useVModel } from '@vueuse/core'
+import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
+import { CommonStatusEnum } from '@/utils/constants'
+import CombinationShowcase from '@/views/mall/promotion/combination/components/CombinationShowcase.vue'
+
+// 拼团属性面板
+defineOptions({ name: 'PromotionCombinationProperty' })
+
+const props = defineProps<{ modelValue: PromotionCombinationProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+// 活动列表
+const activityList = ref<CombinationActivityApi.CombinationActivityVO[]>([])
+onMounted(async () => {
+  const { list } = await CombinationActivityApi.getCombinationActivityPage({
+    status: CommonStatusEnum.ENABLE
+  })
+  activityList.value = list
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts
new file mode 100644
index 0000000..75aa0ff
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts
@@ -0,0 +1,96 @@
+import {ComponentStyle, DiyComponent} from '@/components/DiyEditor/util'
+
+/** 积分商城属性 */
+export interface PromotionPointProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'
+  // 商品字段
+  fields: {
+    // 商品名称
+    name: PromotionPointFieldProperty
+    // 商品简介
+    introduction: PromotionPointFieldProperty
+    // 商品价格
+    price: PromotionPointFieldProperty
+    // 市场价
+    marketPrice: PromotionPointFieldProperty
+    // 商品销量
+    salesCount: PromotionPointFieldProperty
+    // 商品库存
+    stock: PromotionPointFieldProperty
+  }
+  // 角标
+  badge: {
+    // 是否显示
+    show: boolean
+    // 角标图片
+    imgUrl: string
+  }
+  // 按钮
+  btnBuy: {
+    // 类型：文字 | 图片
+    type: 'text' | 'img'
+    // 文字
+    text: string
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string
+    // 图片按钮：图片地址
+    imgUrl: string
+  }
+  // 上圆角
+  borderRadiusTop: number
+  // 下圆角
+  borderRadiusBottom: number
+  // 间距
+  space: number
+  // 秒杀活动编号
+  activityIds: number[]
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 商品字段
+export interface PromotionPointFieldProperty {
+  // 是否显示
+  show: boolean
+  // 颜色
+  color: string
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionPoint',
+  name: '积分商城',
+  icon: 'ep:present',
+  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: '立即兑换',
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: ''
+    },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<PromotionPointProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionPoint/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionPoint/index.vue
new file mode 100644
index 0000000..4acd93f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionPoint/index.vue
@@ -0,0 +1,202 @@
+<template>
+  <div ref="containerRef" :class="`box-content min-h-30px w-full flex flex-row flex-wrap`">
+    <div
+      v-for="(spu, index) in spuList"
+      :key="index"
+      :style="{
+        ...calculateSpace(index),
+        ...calculateWidth(),
+        borderTopLeftRadius: `${property.borderRadiusTop}px`,
+        borderTopRightRadius: `${property.borderRadiusTop}px`,
+        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+        borderBottomRightRadius: `${property.borderRadiusBottom}px`
+      }"
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+    >
+      <!-- 角标 -->
+      <div v-if="property.badge.show" class="absolute left-0 top-0 z-1 items-center justify-center">
+        <el-image :src="property.badge.imgUrl" class="h-26px w-38px" fit="cover" />
+      </div>
+      <!-- 商品封面图 -->
+      <div
+        :class="[
+          'h-140px',
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-140px': property.layoutType === 'oneColSmallImg'
+          }
+        ]"
+      >
+        <el-image :src="spu.picUrl" class="h-full w-full" fit="cover" />
+      </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"
+          :style="{ color: property.fields.introduction.color }"
+          class="truncate text-12px"
+        >
+          {{ spu.introduction }}
+        </div>
+        <div>
+          <!-- 积分 -->
+          <span
+            v-if="property.fields.price.show"
+            :style="{ color: property.fields.price.color }"
+            class="text-16px"
+          >
+            {{ spu.point }}积分
+            {{ !spu.pointPrice || spu.pointPrice === 0 ? '' : `+${fenToYuan(spu.pointPrice)}元` }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            :style="{ color: property.fields.marketPrice.color }"
+            class="ml-4px text-10px line-through"
+          >
+            ￥{{ fenToYuan(spu.marketPrice) }}
+          </span>
+        </div>
+        <div class="text-12px">
+          <!-- 销量 -->
+          <span
+            v-if="property.fields.salesCount.show"
+            :style="{ color: property.fields.salesCount.color }"
+          >
+            已兑{{ (spu.pointTotalStock || 0) - (spu.pointStock || 0) }}件
+          </span>
+          <!-- 库存 -->
+          <span v-if="property.fields.stock.show" :style="{ color: property.fields.stock.color }">
+            库存{{ spu.pointTotalStock || 0 }}
+          </span>
+        </div>
+      </div>
+      <!-- 购买按钮 -->
+      <div class="absolute bottom-8px right-8px">
+        <!-- 文字按钮 -->
+        <span
+          v-if="property.btnBuy.type === 'text'"
+          :style="{
+            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`
+          }"
+          class="rounded-full p-x-12px p-y-4px text-12px text-white"
+        >
+          {{ property.btnBuy.text }}
+        </span>
+        <!-- 图片按钮 -->
+        <el-image
+          v-else
+          :src="property.btnBuy.imgUrl"
+          class="h-28px w-28px rounded-full"
+          fit="cover"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { PromotionPointProperty } from './config'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import { PointActivityApi, PointActivityVO, SpuExtension0 } from '@/api/mall/promotion/point'
+import { fenToYuan } from '@/utils'
+
+/** 积分商城卡片 */
+defineOptions({ name: 'PromotionPoint' })
+// 定义属性
+const props = defineProps<{ property: PromotionPointProperty }>()
+// 商品列表
+const spuList = ref<SpuExtension0[]>([])
+const spuIdList = ref<number[]>([])
+const pointActivityList = ref<PointActivityVO[]>([])
+
+watch(
+  () => props.property.activityIds,
+  async () => {
+    try {
+      // 新添加的积分商城组件，是没有活动ID的
+      const activityIds = props.property.activityIds
+      // 检查活动ID的有效性
+      if (Array.isArray(activityIds) && activityIds.length > 0) {
+        // 获取积分商城活动详情列表
+        pointActivityList.value = await PointActivityApi.getPointActivityListByIds(activityIds)
+
+        // 获取积分商城活动的 SPU 详情列表
+        spuList.value = []
+        spuIdList.value = pointActivityList.value.map((activity) => activity.spuId)
+        if (spuIdList.value.length > 0) {
+          spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value)
+        }
+
+        // 更新 SPU 的最低兑换积分和所需兑换金额
+        pointActivityList.value.forEach((activity) => {
+          // 匹配spuId
+          const spu = spuList.value.find((spu) => spu.id === activity.spuId)
+          if (spu) {
+            spu.pointStock = activity.stock
+            spu.pointTotalStock = activity.totalStock
+            spu.point = activity.point
+            spu.pointPrice = activity.price
+          }
+        })
+      }
+    } catch (error) {
+      console.error('获取积分商城活动细节或 SPU 细节时出错:', error)
+    }
+  },
+  {
+    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 lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionPoint/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionPoint/property.vue
new file mode 100644
index 0000000..ea20776
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionPoint/property.vue
@@ -0,0 +1,154 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form :model="formData" label-width="80px">
+      <el-card class="property-group" header="积分商城活动" shadow="never">
+        <PointShowcase v-model="formData.activityIds" />
+      </el-card>
+      <el-card class="property-group" header="商品样式" 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 value="oneColBigImg">
+                <Icon icon="fluent:text-column-one-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="单列小图" placement="bottom">
+              <el-radio-button value="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 value="twoCol">
+                <Icon icon="fluent:text-column-two-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <!--<el-tooltip class="item" content="三列" placement="bottom">
+              <el-radio-button value="threeCol">
+                <Icon icon="fluent:text-column-three-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 class="property-group" header="角标" shadow="never">
+        <el-form-item label="角标" prop="badge.show">
+          <el-switch v-model="formData.badge.show" />
+        </el-form-item>
+        <el-form-item v-if="formData.badge.show" label="角标" prop="badge.imgUrl">
+          <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
+            <template #tip> 建议尺寸：36 * 22</template>
+          </UploadImg>
+        </el-form-item>
+      </el-card>
+      <el-card class="property-group" header="按钮" shadow="never">
+        <el-form-item label="按钮类型" prop="btnBuy.type">
+          <el-radio-group v-model="formData.btnBuy.type">
+            <el-radio-button value="text">文字</el-radio-button>
+            <el-radio-button value="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 class="property-group" header="商品样式" shadow="never">
+        <el-form-item label="上圆角" prop="borderRadiusTop">
+          <el-slider
+            v-model="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
+        <el-form-item label="下圆角" prop="borderRadiusBottom">
+          <el-slider
+            v-model="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
+        <el-form-item label="间隔" prop="space">
+          <el-slider
+            v-model="formData.space"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script lang="ts" setup>
+import { PromotionPointProperty } from './config'
+import { useVModel } from '@vueuse/core'
+import PointShowcase from '@/views/mall/promotion/point/components/PointShowcase.vue'
+
+// 秒杀属性面板
+defineOptions({ name: 'PromotionPointProperty' })
+
+const props = defineProps<{ modelValue: PromotionPointProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts
new file mode 100644
index 0000000..022be92
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts
@@ -0,0 +1,96 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 秒杀属性 */
+export interface PromotionSeckillProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'
+  // 商品字段
+  fields: {
+    // 商品名称
+    name: PromotionSeckillFieldProperty
+    // 商品简介
+    introduction: PromotionSeckillFieldProperty
+    // 商品价格
+    price: PromotionSeckillFieldProperty
+    // 市场价
+    marketPrice: PromotionSeckillFieldProperty
+    // 商品销量
+    salesCount: PromotionSeckillFieldProperty
+    // 商品库存
+    stock: PromotionSeckillFieldProperty
+  }
+  // 角标
+  badge: {
+    // 是否显示
+    show: boolean
+    // 角标图片
+    imgUrl: string
+  }
+  // 按钮
+  btnBuy: {
+    // 类型：文字 | 图片
+    type: 'text' | 'img'
+    // 文字
+    text: string
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string
+    // 图片按钮：图片地址
+    imgUrl: string
+  }
+  // 上圆角
+  borderRadiusTop: number
+  // 下圆角
+  borderRadiusBottom: number
+  // 间距
+  space: number
+  // 秒杀活动编号
+  activityIds: number[]
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 商品字段
+export interface PromotionSeckillFieldProperty {
+  // 是否显示
+  show: boolean
+  // 颜色
+  color: string
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionSeckill',
+  name: '秒杀',
+  icon: 'mdi:calendar-time',
+  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: '立即秒杀',
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: ''
+    },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<PromotionSeckillProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
new file mode 100644
index 0000000..3d34a3d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
@@ -0,0 +1,201 @@
+<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 }"
+          >
+            ￥{{ fenToYuan(spu.price || Infinity) }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            class="ml-4px text-10px line-through"
+            :style="{ color: property.fields.marketPrice.color }"
+            >￥{{ fenToYuan(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 { PromotionSeckillProperty } from './config'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
+import { fenToYuan } from '@/utils'
+
+/** 秒杀卡片 */
+defineOptions({ name: 'PromotionSeckill' })
+// 定义属性
+const props = defineProps<{ property: PromotionSeckillProperty }>()
+// 商品列表
+const spuList = ref<ProductSpuApi.Spu[]>([])
+const spuIdList = ref<number[]>([])
+const seckillActivityList = ref<SeckillActivityApi.SeckillActivityVO[]>([])
+
+watch(
+  () => props.property.activityIds,
+  async () => {
+    try {
+      // 新添加的秒杀组件，是没有活动ID的
+      const activityIds = props.property.activityIds
+      // 检查活动ID的有效性
+      if (Array.isArray(activityIds) && activityIds.length > 0) {
+        // 获取秒杀活动详情列表
+        seckillActivityList.value =
+          await SeckillActivityApi.getSeckillActivityListByIds(activityIds)
+
+        // 获取秒杀活动的 SPU 详情列表
+        spuList.value = []
+        spuIdList.value = seckillActivityList.value
+          .map((activity) => activity.spuId)
+          .filter((spuId): spuId is number => typeof spuId === 'number')
+        if (spuIdList.value.length > 0) {
+          spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value)
+        }
+
+        // 更新 SPU 的最低价格
+        seckillActivityList.value.forEach((activity) => {
+          // 匹配spuId
+          const spu = spuList.value.find((spu) => spu.id === activity.spuId)
+          if (spu) {
+            // 赋值活动价格，哪个最便宜就赋值哪个
+            spu.price = Math.min(activity.seckillPrice || Infinity, spu.price || Infinity)
+          }
+        })
+      }
+    } catch (error) {
+      console.error('获取秒杀活动细节或 SPU 细节时出错:', error)
+    }
+  },
+  {
+    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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionSeckill/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionSeckill/property.vue
new file mode 100644
index 0000000..594c10b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/PromotionSeckill/property.vue
@@ -0,0 +1,164 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form label-width="80px" :model="formData">
+      <el-card header="秒杀活动" class="property-group" shadow="never">
+        <SeckillShowcase v-model="formData.activityIds" />
+      </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 value="oneColBigImg">
+                <Icon icon="fluent:text-column-one-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="单列小图" placement="bottom">
+              <el-radio-button value="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 value="twoCol">
+                <Icon icon="fluent:text-column-two-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <!--<el-tooltip class="item" content="三列" placement="bottom">
+              <el-radio-button value="threeCol">
+                <Icon icon="fluent:text-column-three-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 value="text">文字</el-radio-button>
+            <el-radio-button value="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 { PromotionSeckillProperty } from './config'
+import { useVModel } from '@vueuse/core'
+import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
+import { CommonStatusEnum } from '@/utils/constants'
+import SeckillShowcase from '@/views/mall/promotion/seckill/components/SeckillShowcase.vue'
+
+// 秒杀属性面板
+defineOptions({ name: 'PromotionSeckillProperty' })
+
+const props = defineProps<{ modelValue: PromotionSeckillProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+// 活动列表
+const activityList = ref<SeckillActivityApi.SeckillActivityVO[]>([])
+onMounted(async () => {
+  const { list } = await SeckillActivityApi.getSeckillActivityPage({
+    status: CommonStatusEnum.ENABLE
+  })
+  activityList.value = list
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/SearchBar/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/SearchBar/config.ts
new file mode 100644
index 0000000..ef47b27
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/SearchBar/config.ts
@@ -0,0 +1,43 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 搜索框属性 */
+export interface SearchProperty {
+  height: number // 搜索栏高度
+  showScan: boolean // 显示扫一扫
+  borderRadius: number // 框体样式
+  placeholder: string // 占位文字
+  placeholderPosition: PlaceholderPosition // 占位文字位置
+  backgroundColor: string // 框体颜色
+  textColor: string // 字体颜色
+  hotKeywords: string[] // 热词
+  style: ComponentStyle
+}
+
+// 文字位置
+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(238, 238, 238)',
+    textColor: 'rgb(150, 151, 153)',
+    hotKeywords: [],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      paddingTop: 8,
+      paddingRight: 8,
+      paddingBottom: 8,
+      paddingLeft: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<SearchProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/SearchBar/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/SearchBar/index.vue
new file mode 100644
index 0000000..9de261a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/SearchBar/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div
+    class="search-bar"
+    :style="{
+      color: property.textColor
+    }"
+  >
+    <!-- 搜索框 -->
+    <div
+      class="inner"
+      :style="{
+        height: `${property.height}px`,
+        background: property.backgroundColor,
+        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 {
+  /* 搜索框 */
+  .inner {
+    position: relative;
+    display: flex;
+    min-height: 28px;
+    font-size: 14px;
+    align-items: center;
+
+    .placeholder {
+      display: flex;
+      width: 100%;
+      padding: 0 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .right {
+      position: absolute;
+      right: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/SearchBar/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/SearchBar/property.vue
new file mode 100644
index 0000000..48441d0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/SearchBar/property.vue
@@ -0,0 +1,73 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <el-form label-width="80px" :model="formData" class="m-t-8px">
+      <el-card header="搜索热词" class="property-group" shadow="never">
+        <Draggable v-model="formData.hotKeywords" :empty-item="''">
+          <template #default="{ index }">
+            <el-input v-model="formData.hotKeywords[index]" placeholder="请输入热词" />
+          </template>
+        </Draggable>
+      </el-card>
+      <el-card header="搜索样式" class="property-group" shadow="never">
+        <el-form-item label="框体样式">
+          <el-radio-group v-model="formData!.borderRadius">
+            <el-tooltip content="方形" placement="top">
+              <el-radio-button :value="0">
+                <Icon icon="tabler:input-search" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip content="圆形" placement="top">
+              <el-radio-button :value="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 value="left">
+                <Icon icon="ant-design:align-left-outlined" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip content="居中" placement="top">
+              <el-radio-button value="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-card>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
+
+/** 搜索框属性面板 */
+defineOptions({ name: 'SearchProperty' })
+
+const props = defineProps<{ modelValue: SearchProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TabBar/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TabBar/config.ts
new file mode 100644
index 0000000..88d706f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TabBar/config.ts
@@ -0,0 +1,97 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 底部导航菜单属性 */
+export interface TabBarProperty {
+  // 选项列表
+  items: TabBarItemProperty[]
+  // 主题
+  theme: string
+  // 样式
+  style: TabBarStyle
+}
+
+// 选项属性
+export interface TabBarItemProperty {
+  // 标签文字
+  text: string
+  // 链接
+  url: string
+  // 默认图标链接
+  iconUrl: string
+  // 选中的图标链接
+  activeIconUrl: string
+}
+
+// 样式
+export interface TabBarStyle {
+  // 背景类型
+  bgType: 'color' | 'img'
+  // 背景颜色
+  bgColor: string
+  // 图片链接
+  bgImg: string
+  // 默认颜色
+  color: string
+  // 选中的颜色
+  activeColor: string
+}
+
+// 定义组件
+export const component = {
+  id: 'TabBar',
+  name: '底部导航',
+  icon: 'fluent:table-bottom-row-16-filled',
+  property: {
+    theme: 'red',
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      color: '#282828',
+      activeColor: '#fc4141'
+    },
+    items: [
+      {
+        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'
+      },
+      {
+        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'
+      },
+      {
+        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'
+      },
+      {
+        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'
+      }
+    ]
+  }
+} 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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TabBar/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TabBar/index.vue
new file mode 100644
index 0000000..44ba43c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TabBar/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="tab-bar">
+    <div
+      class="tab-bar-bg"
+      :style="{
+        background:
+          property.style.bgType === 'color'
+            ? property.style.bgColor
+            : `url(${property.style.bgImg})`,
+        backgroundSize: '100% 100%',
+        backgroundRepeat: 'no-repeat'
+      }"
+    >
+      <div v-for="(item, index) in property.items" :key="index" class="tab-bar-item">
+        <el-image :src="index === 0 ? item.activeIconUrl : item.iconUrl">
+          <template #error>
+            <div class="h-full w-full flex items-center justify-center">
+              <Icon icon="ep:picture" />
+            </div>
+          </template>
+        </el-image>
+        <span :style="{ color: index === 0 ? property.style.activeColor : property.style.color }">
+          {{ item.text }}
+        </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 {
+  z-index: 2;
+  width: 100%;
+
+  .tab-bar-bg {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    padding: 8px 0;
+
+    .tab-bar-item {
+      display: flex;
+      width: 100%;
+      font-size: 12px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      :deep(img),
+      .el-icon {
+        width: 26px;
+        height: 26px;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TabBar/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TabBar/property.vue
new file mode 100644
index 0000000..e435012
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TabBar/property.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="tab-bar">
+    <!-- 表单 -->
+    <el-form :model="formData" label-width="80px">
+      <el-form-item label="主题" prop="theme">
+        <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.bgType">
+          <el-radio-button value="color">纯色</el-radio-button>
+          <el-radio-button value="img">图片</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <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.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>
+
+      <el-text tag="p">图标设置</el-text>
+      <el-text type="info" size="small"> 拖动左上角的小圆点可对其排序, 图标建议尺寸 44*44 </el-text>
+      <Draggable v-model="formData.items" :limit="5">
+        <template #default="{ element }">
+          <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 prop="text" label="文字" label-width="48px" class="m-b-8px!">
+            <el-input v-model="element.text" placeholder="请输入文字" />
+          </el-form-item>
+          <el-form-item prop="url" label="链接" label-width="48px" class="m-b-0!">
+            <AppLinkInput v-model="element.url" />
+          </el-form-item>
+        </template>
+      </Draggable>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TabBarProperty, component, THEME_LIST } from './config'
+import { useVModel } from '@vueuse/core'
+// 底部导航栏
+defineOptions({ name: 'TabBarProperty' })
+
+const props = defineProps<{ modelValue: TabBarProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+
+// 将数据库的值更新到右侧属性栏
+component.property.items = formData.value.items
+
+// 要的主题
+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/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TitleBar/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TitleBar/config.ts
new file mode 100644
index 0000000..0c104c9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TitleBar/config.ts
@@ -0,0 +1,67 @@
+import {ComponentStyle, DiyComponent} from '@/components/DiyEditor/util'
+
+/** 标题栏属性 */
+export interface TitleBarProperty {
+  // 偏移
+  marginLeft: number
+  // 显示位置
+  textAlign: 'left' | 'center'
+  // 主标题
+  title: string
+  // 副标题
+  description: string
+  // 标题大小
+  titleSize: number
+  // 描述大小
+  descriptionSize: number
+  // 标题粗细
+  titleWeight: number
+  // 描述粗细
+  descriptionWeight: number
+  // 标题颜色
+  titleColor: string
+  // 描述颜色
+  descriptionColor: string
+  // 查看更多
+  more: {
+    // 是否显示查看更多
+    show: false
+    // 样式选择
+    type: 'text' | 'icon' | 'all'
+    // 自定义文字
+    text: string
+    // 链接
+    url: string
+  }
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'TitleBar',
+  name: '标题栏',
+  icon: 'material-symbols:line-start',
+  property: {
+    title: '主标题',
+    description: '副标题',
+    titleSize: 16,
+    descriptionSize: 12,
+    titleWeight: 400,
+    textAlign: 'left',
+    descriptionWeight: 200,
+    titleColor: 'rgba(50, 50, 51, 10)',
+    descriptionColor: 'rgba(150, 151, 153, 10)',
+    more: {
+      //查看更多
+      show: false,
+      type: 'icon',
+      text: '查看更多',
+      url: ''
+    },
+    style: {
+      bgType: 'color',
+      bgColor: '#fff'
+    } as ComponentStyle
+  }
+} as DiyComponent<TitleBarProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TitleBar/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TitleBar/index.vue
new file mode 100644
index 0000000..7b90729
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TitleBar/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    :style="{
+      background:
+        property.style.bgType === 'color' ? property.style.bgColor : `url(${property.style.bgImg})`,
+      backgroundSize: '100% 100%',
+      backgroundRepeat: 'no-repeat'
+    }"
+    class="title-bar"
+  >
+    <!-- 内容 -->
+    <div>
+      <!-- 标题 -->
+      <div
+        v-if="property.title"
+        :style="{
+          fontSize: `${property.titleSize}px`,
+          fontWeight: property.titleWeight,
+          color: property.titleColor,
+          textAlign: property.textAlign
+        }"
+      >
+        {{ property.title }}
+      </div>
+      <!-- 副标题 -->
+      <div
+        v-if="property.description"
+        :style="{
+          fontSize: `${property.descriptionSize}px`,
+          fontWeight: property.descriptionWeight,
+          color: property.descriptionColor,
+          textAlign: property.textAlign
+        }"
+        class="m-t-8px"
+      >
+        {{ property.description }}
+      </div>
+    </div>
+    <!-- 更多 -->
+    <div
+      v-show="property.more.show"
+      :style="{
+        color: property.descriptionColor
+      }"
+      class="more"
+    >
+      <span v-if="property.more.type !== 'icon'"> {{ property.more.text }} </span>
+      <Icon v-if="property.more.type !== 'text'" icon="ep:arrow-right" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { TitleBarProperty } from './config'
+
+/** 标题栏 */
+defineOptions({ name: 'TitleBar' })
+
+defineProps<{ property: TitleBarProperty }>()
+</script>
+<style lang="scss" scoped>
+.title-bar {
+  position: relative;
+  width: 100%;
+  min-height: 20px;
+  box-sizing: border-box;
+
+  /* 更多 */
+  .more {
+    position: absolute;
+    top: 0;
+    right: 8px;
+    bottom: 0;
+    display: flex;
+    margin: auto;
+    font-size: 10px;
+    color: #969799;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TitleBar/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TitleBar/property.vue
new file mode 100644
index 0000000..b31b1e2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/TitleBar/property.vue
@@ -0,0 +1,116 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form :model="formData" :rules="rules" label-width="85px">
+      <el-card class="property-group" header="风格" shadow="never">
+        <el-form-item label="标题位置" prop="textAlign">
+          <el-radio-group v-model="formData!.textAlign">
+            <el-tooltip content="居左" placement="top">
+              <el-radio-button value="left">
+                <Icon icon="ant-design:align-left-outlined" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip content="居中" placement="top">
+              <el-radio-button value="center">
+                <Icon icon="ant-design:align-center-outlined" />
+              </el-radio-button>
+            </el-tooltip>
+          </el-radio-group>
+        </el-form-item>
+      </el-card>
+      <el-card class="property-group" header="主标题" shadow="never">
+        <el-form-item label="文字" label-width="40px" prop="title">
+          <InputWithColor
+            v-model="formData.title"
+            v-model:color="formData.titleColor"
+            maxlength="20"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item label="大小" label-width="40px" prop="titleSize">
+          <el-slider
+            v-model="formData.titleSize"
+            :max="60"
+            :min="10"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
+        <el-form-item label="粗细" label-width="40px" prop="titleWeight">
+          <el-slider
+            v-model="formData.titleWeight"
+            :max="900"
+            :min="100"
+            :step="100"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
+      </el-card>
+      <el-card class="property-group" header="副标题" shadow="never">
+        <el-form-item label="文字" label-width="40px" prop="description">
+          <InputWithColor
+            v-model="formData.description"
+            v-model:color="formData.descriptionColor"
+            maxlength="50"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item label="大小" label-width="40px" prop="descriptionSize">
+          <el-slider
+            v-model="formData.descriptionSize"
+            :max="60"
+            :min="10"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
+        <el-form-item label="粗细" label-width="40px" prop="descriptionWeight">
+          <el-slider
+            v-model="formData.descriptionWeight"
+            :max="900"
+            :min="100"
+            :step="100"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
+      </el-card>
+      <el-card class="property-group" header="查看更多" shadow="never">
+        <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 value="text">文字</el-radio>
+              <el-radio value="icon">图标</el-radio>
+              <el-radio value="all">文字+图标</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-show="formData.more.type !== 'icon'" label="更多文字" prop="more.text">
+            <el-input v-model="formData.more.text" />
+          </el-form-item>
+          <el-form-item label="跳转链接" prop="more.url">
+            <AppLinkInput v-model="formData.more.url" />
+          </el-form-item>
+        </template>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+<script lang="ts" setup>
+import { TitleBarProperty } from './config'
+import { useVModel } from '@vueuse/core'
+// 导航栏属性面板
+defineOptions({ name: 'TitleBarProperty' })
+
+const props = defineProps<{ modelValue: TitleBarProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+
+// 表单校验
+const rules = {}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCard/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCard/config.ts
new file mode 100644
index 0000000..7b33776
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCard/config.ts
@@ -0,0 +1,21 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 用户卡片属性 */
+export interface UserCardProperty {
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'UserCard',
+  name: '用户卡片',
+  icon: 'mdi:user-card-details',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<UserCardProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCard/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCard/index.vue
new file mode 100644
index 0000000..c61ea64
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCard/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex items-center justify-between p-x-18px p-y-24px">
+      <div class="flex flex-1 items-center gap-16px">
+        <el-avatar :size="60">
+          <Icon icon="ep:avatar" :size="60" />
+        </el-avatar>
+        <span class="text-18px font-bold">勇哥Java实战</span>
+      </div>
+      <Icon icon="tdesign:qrcode" :size="20" />
+    </div>
+    <div
+      class="flex items-center justify-between justify-between bg-white p-x-20px p-y-8px text-12px"
+    >
+      <span class="color-#ff690d">点击绑定手机号</span>
+      <span class="rounded-26px bg-#ff6100 p-x-8px p-y-5px color-white">去绑定</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { UserCardProperty } from './config'
+
+/** 用户卡片 */
+defineOptions({ name: 'UserCard' })
+// 定义属性
+defineProps<{ property: UserCardProperty }>()
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCard/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCard/property.vue
new file mode 100644
index 0000000..50ecb55
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCard/property.vue
@@ -0,0 +1,17 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<script setup lang="ts">
+import { UserCardProperty } from './config'
+import { useVModel } from '@vueuse/core'
+
+// 用户卡片属性面板
+defineOptions({ name: 'UserCardProperty' })
+
+const props = defineProps<{ modelValue: UserCardProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCoupon/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCoupon/config.ts
new file mode 100644
index 0000000..92eba9b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCoupon/config.ts
@@ -0,0 +1,23 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 用户卡券属性 */
+export interface UserCouponProperty {
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'UserCoupon',
+  name: '用户卡券',
+  icon: 'ep:ticket',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<UserCouponProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCoupon/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCoupon/index.vue
new file mode 100644
index 0000000..27ad310
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCoupon/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <el-image
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
+  />
+</template>
+<script setup lang="ts">
+import { UserCouponProperty } from './config'
+
+/** 用户卡券 */
+defineOptions({ name: 'UserCoupon' })
+// 定义属性
+defineProps<{ property: UserCouponProperty }>()
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCoupon/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCoupon/property.vue
new file mode 100644
index 0000000..221cc90
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserCoupon/property.vue
@@ -0,0 +1,17 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<script setup lang="ts">
+import { UserCouponProperty } from './config'
+import { useVModel } from '@vueuse/core'
+
+// 用户卡券属性面板
+defineOptions({ name: 'UserCouponProperty' })
+
+const props = defineProps<{ modelValue: UserCouponProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserOrder/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserOrder/config.ts
new file mode 100644
index 0000000..f9c5a6d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserOrder/config.ts
@@ -0,0 +1,23 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 用户订单属性 */
+export interface UserOrderProperty {
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'UserOrder',
+  name: '用户订单',
+  icon: 'ep:list',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<UserOrderProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserOrder/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserOrder/index.vue
new file mode 100644
index 0000000..450ae54
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserOrder/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <el-image src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png" />
+</template>
+<script setup lang="ts">
+import { UserOrderProperty } from './config'
+
+/** 用户订单 */
+defineOptions({ name: 'UserOrder' })
+// 定义属性
+defineProps<{ property: UserOrderProperty }>()
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserOrder/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserOrder/property.vue
new file mode 100644
index 0000000..d315db6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserOrder/property.vue
@@ -0,0 +1,17 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<script setup lang="ts">
+import { UserOrderProperty } from './config'
+import { useVModel } from '@vueuse/core'
+
+// 用户订单属性面板
+defineOptions({ name: 'UserOrderProperty' })
+
+const props = defineProps<{ modelValue: UserOrderProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserWallet/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserWallet/config.ts
new file mode 100644
index 0000000..4e0955f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserWallet/config.ts
@@ -0,0 +1,23 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 用户资产属性 */
+export interface UserWalletProperty {
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'UserWallet',
+  name: '用户资产',
+  icon: 'ep:wallet-filled',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<UserWalletProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserWallet/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserWallet/index.vue
new file mode 100644
index 0000000..0efc937
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserWallet/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <el-image
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
+  />
+</template>
+<script setup lang="ts">
+import { UserWalletProperty } from './config'
+
+/** 用户资产 */
+defineOptions({ name: 'UserWallet' })
+// 定义属性
+defineProps<{ property: UserWalletProperty }>()
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserWallet/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserWallet/property.vue
new file mode 100644
index 0000000..e0ac83e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/UserWallet/property.vue
@@ -0,0 +1,17 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<script setup lang="ts">
+import { UserWalletProperty } from './config'
+import { useVModel } from '@vueuse/core'
+
+// 用户资产属性面板
+defineOptions({ name: 'UserWalletProperty' })
+
+const props = defineProps<{ modelValue: UserWalletProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/VideoPlayer/config.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/VideoPlayer/config.ts
new file mode 100644
index 0000000..02f0374
--- /dev/null
+++ b/marketing-ui/admin-ui/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 VideoPlayerStyle
+  }
+} as DiyComponent<VideoPlayerProperty>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
new file mode 100644
index 0000000..fa9a914
--- /dev/null
+++ b/marketing-ui/admin-ui/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 {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/VideoPlayer/property.vue b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/VideoPlayer/property.vue
new file mode 100644
index 0000000..1c3deec
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/VideoPlayer/property.vue
@@ -0,0 +1,55 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <template #style>
+      <el-form-item label="高度" prop="height">
+        <el-slider
+          v-model="formData.style.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 { useVModel } from '@vueuse/core'
+
+// 视频播放属性面板
+defineOptions({ name: 'VideoPlayerProperty' })
+
+const props = defineProps<{ modelValue: VideoPlayerProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/index.ts b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/index.ts
new file mode 100644
index 0000000..5dfbc6b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/components/mobile/index.ts
@@ -0,0 +1,61 @@
+/*
+ * 组件注册
+ *
+ * 组件规范：
+ * 1. 每个子目录就是一个独立的组件，每个目录包括以下三个文件：
+ * 2. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
+ * 3. index2.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/marketing-ui/admin-ui/src/components/DiyEditor/index.vue b/marketing-ui/admin-ui/src/components/DiyEditor/index.vue
new file mode 100644
index 0000000..27d3fc1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/index.vue
@@ -0,0 +1,599 @@
+<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 :size="24" icon="system-uicons:reset-alt" />
+          </el-button>
+        </el-tooltip>
+        <el-tooltip v-if="previewUrl" content="预览">
+          <el-button @click="handlePreview">
+            <Icon :size="24" icon="ep:view" />
+          </el-button>
+        </el-tooltip>
+        <el-tooltip content="保存">
+          <el-button @click="handleSave">
+            <Icon :size="24" icon="ep:check" />
+          </el-button>
+        </el-tooltip>
+      </el-button-group>
+    </el-header>
+
+    <!-- 中心区域 -->
+    <el-container class="editor-container">
+      <!-- 左侧：组件库（ComponentLibrary） -->
+      <ComponentLibrary v-if="libs && libs.length > 0" ref="componentLibrary" :list="libs" />
+      <!-- 中心：设计区域（ComponentContainer） -->
+      <div class="editor-center page-prop-area" @click="handlePageSelected">
+        <!-- 手机顶部 -->
+        <div class="editor-design-top">
+          <!-- 手机顶部状态栏 -->
+          <img alt="" class="status-bar" src="@/assets/imgs/diy/statusBar.png" />
+          <!-- 手机顶部导航栏 -->
+          <ComponentContainer
+            v-if="showNavigationBar"
+            :active="selectedComponent?.id === navigationBarComponent.id"
+            :component="navigationBarComponent"
+            :show-toolbar="false"
+            class="cursor-pointer!"
+            @click="handleNavigationBarSelected"
+          />
+        </div>
+        <!-- 绝对定位的组件：例如 弹窗、浮动按钮等 -->
+        <div
+          v-for="(component, index) in pageComponents"
+          :key="index"
+          @click="handleComponentSelected(component, index)"
+        >
+          <component
+            :is="component.id"
+            v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
+            :property="component.property"
+          />
+        </div>
+        <!-- 手机页面编辑区域 -->
+        <el-scrollbar
+          :view-style="{
+            backgroundColor: pageConfigComponent.property.backgroundColor,
+            backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
+          }"
+          height="100%"
+          view-class="phone-container"
+          wrap-class="editor-design-center page-prop-area"
+        >
+          <draggable
+            v-model="pageComponents"
+            :animation="200"
+            :force-fallback="true"
+            class="page-prop-area drag-area"
+            filter=".component-toolbar"
+            ghost-class="draggable-ghost"
+            group="component"
+            item-key="index"
+            @change="handleComponentChange"
+          >
+            <template #item="{ element, index }">
+              <ComponentContainer
+                v-if="!element.position || element.position === 'center'"
+                :active="selectedComponentIndex === index"
+                :can-move-down="index < pageComponents.length - 1"
+                :can-move-up="index > 0"
+                :component="element"
+                @click="handleComponentSelected(element, index)"
+                @copy="handleCopyComponent(index)"
+                @delete="handleDeleteComponent(index)"
+                @move="(direction) => handleMoveComponent(index, direction)"
+              />
+            </template>
+          </draggable>
+        </el-scrollbar>
+        <!-- 手机底部导航 -->
+        <div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
+          <ComponentContainer
+            :active="selectedComponent?.id === tabBarComponent.id"
+            :component="tabBarComponent"
+            :show-toolbar="false"
+            @click="handleTabBarSelected"
+          />
+        </div>
+        <!-- 固定布局的组件 操作按钮区 -->
+        <div class="fixed-component-action-group">
+          <el-tag
+            v-if="showPageConfig"
+            :effect="selectedComponent?.uid === pageConfigComponent.uid ? 'dark' : 'plain'"
+            :type="selectedComponent?.uid === pageConfigComponent.uid ? 'primary' : 'info'"
+            size="large"
+            @click="handleComponentSelected(pageConfigComponent)"
+          >
+            <Icon :icon="pageConfigComponent.icon" :size="12" />
+            <span>{{ pageConfigComponent.name }}</span>
+          </el-tag>
+          <template v-for="(component, index) in pageComponents" :key="index">
+            <el-tag
+              v-if="component.position === 'fixed'"
+              :effect="selectedComponent?.uid === component.uid ? 'dark' : 'plain'"
+              :type="selectedComponent?.uid === component.uid ? 'primary' : 'info'"
+              closable
+              size="large"
+              @click="handleComponentSelected(component)"
+              @close="handleDeleteComponent(index)"
+            >
+              <Icon :icon="component.icon" :size="12" />
+              <span>{{ component.name }}</span>
+            </el-tag>
+          </template>
+        </div>
+      </div>
+      <!-- 右侧：属性面板（ComponentContainerProperty） -->
+      <el-aside v-if="selectedComponent?.property" class="editor-right" width="350px">
+        <el-card
+          body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
+          class="h-full"
+          shadow="never"
+        >
+          <!-- 组件名称 -->
+          <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'"
+              :key="selectedComponent?.uid || selectedComponent?.id"
+              v-model="selectedComponent.property"
+            />
+          </el-scrollbar>
+        </el-card>
+      </el-aside>
+    </el-container>
+  </el-container>
+
+  <!-- 预览弹框 -->
+  <Dialog v-model="previewDialogVisible" title="预览" width="700">
+    <div class="flex justify-around">
+      <IFrame
+        :src="previewUrl"
+        class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!"
+      />
+      <div class="flex flex-col">
+        <el-text>手机扫码预览</el-text>
+        <Qrcode :text="previewUrl" logo="/logo.gif" />
+      </div>
+    </div>
+  </Dialog>
+</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 { 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 { isEmpty, isString } from '@/utils/is'
+import { DiyComponent, DiyComponentLibrary, PageConfig } from '@/components/DiyEditor/util'
+import { componentConfigs } from '@/components/DiyEditor/components/mobile'
+import { array, oneOfType } from 'vue-types'
+import { propTypes } from '@/utils/propTypes'
+
+/** 页面装修详情页 */
+defineOptions({ name: 'DiyPageDetail' })
+
+// 左侧组件库
+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>>()
+// 选中的组件索引
+const selectedComponentIndex = ref<number>(-1)
+// 组件列表
+const pageComponents = ref<DiyComponent<any>[]>([])
+// 定义属性
+const props = defineProps({
+  // 页面配置，支持Json字符串
+  modelValue: oneOfType<string | PageConfig>([String, Object]).isRequired,
+  // 标题
+  title: propTypes.string.def(''),
+  // 组件库
+  libs: array<DiyComponentLibrary>(),
+  // 是否显示顶部导航栏
+  showNavigationBar: propTypes.bool.def(true),
+  // 是否显示底部导航菜单
+  showTabBar: propTypes.bool.def(false),
+  // 是否显示页面配置
+  showPageConfig: propTypes.bool.def(true),
+  // 预览地址：提供了预览地址，才会显示预览按钮
+  previewUrl: propTypes.string.def('')
+})
+
+// 监听传入的页面配置
+// 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
+watch(
+  () => props.modelValue,
+  () => {
+    const modelValue =
+      isString(props.modelValue) && !isEmpty(props.modelValue)
+        ? (JSON.parse(props.modelValue) as PageConfig)
+        : props.modelValue
+    pageConfigComponent.value.property =
+      (typeof modelValue !== 'string' && modelValue?.page) || PAGE_CONFIG_COMPONENT.property
+    navigationBarComponent.value.property =
+      (typeof modelValue !== 'string' && modelValue?.navigationBar) ||
+      NAVIGATION_BAR_COMPONENT.property
+    tabBarComponent.value.property =
+      (typeof modelValue !== 'string' && modelValue?.tabBar) || TAB_BAR_COMPONENT.property
+    // 查找对应的页面组件
+    pageComponents.value = ((typeof modelValue !== 'string' && modelValue?.components) || []).map(
+      (item) => {
+        const component = componentConfigs[item.id]
+        return { ...component, property: item.property }
+      }
+    )
+  },
+  {
+    immediate: true
+  }
+)
+
+/** 选择组件修改其属性后更新它的配置 */
+watch(
+  selectedComponent,
+  (val: any) => {
+    if (!val || selectedComponentIndex.value === -1) {
+      return
+    }
+    pageComponents.value[selectedComponentIndex.value] = selectedComponent.value!
+  },
+  { deep: true }
+)
+
+// 保存
+const handleSave = () => {
+  // 发送保存通知
+  emits('save')
+}
+// 监听配置修改
+const pageConfigChange = () => {
+  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
+  if (!props.showTabBar) {
+    delete pageConfig.tabBar
+  }
+  // 发送数据更新通知
+  const modelValue = isString(props.modelValue) ? JSON.stringify(pageConfig) : pageConfig
+  emits('update:modelValue', modelValue)
+}
+watch(
+  () => [
+    pageConfigComponent.value.property,
+    navigationBarComponent.value.property,
+    tabBarComponent.value.property,
+    pageComponents.value
+  ],
+  () => {
+    pageConfigChange()
+  },
+  { deep: true }
+)
+// 处理页面选中：显示属性表单
+const handlePageSelected = (event: any) => {
+  if (!props.showPageConfig) return
+
+  // 配置了样式 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])
+  component.uid = new Date().getTime()
+  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 reload = inject<() => void>('reload')
+// 重置
+const handleReset = () => {
+  if (reload) reload()
+  emits('reset')
+}
+
+// 预览
+const previewDialogVisible = ref(false)
+const handlePreview = () => {
+  previewDialogVisible.value = true
+  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>
+/* 手机宽度 */
+$phone-width: 375px;
+$toolbar-height: 42px;
+
+/* 根节点样式 */
+.editor {
+  display: flex;
+  height: 100%;
+  margin: calc(0px - var(--app-content-padding));
+  flex-direction: column;
+
+  /* 顶部：工具栏 */
+  .editor-header {
+    display: flex;
+    height: $toolbar-height;
+    padding: 0;
+    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) {
+      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) -
+        $toolbar-height
+    );
+
+    /* 右侧属性面板 */
+    .editor-right {
+      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 {
+          padding: 8px 32px;
+          background: var(--el-bg-color-page);
+          border: none;
+        }
+
+        .el-card__body {
+          border: none;
+        }
+      }
+    }
+
+    /* 中心区域 */
+    .editor-center {
+      position: relative;
+      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;
+
+      /* 手机顶部 */
+      .editor-design-top {
+        display: flex;
+        width: $phone-width;
+        margin: 0 auto;
+        flex-direction: column;
+
+        /* 手机顶部状态栏 */
+        .status-bar {
+          width: $phone-width;
+          height: 20px;
+          background-color: #fff;
+        }
+      }
+
+      /* 手机底部导航 */
+      .editor-design-bottom {
+        width: $phone-width;
+        margin: 0 auto;
+      }
+
+      /* 手机页面编辑区域 */
+      :deep(.editor-design-center) {
+        width: 100%;
+
+        /* 主体内容 */
+        .phone-container {
+          position: relative;
+          width: $phone-width;
+          height: 100%;
+          margin: 0 auto;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+
+          .drag-area {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      /* 固定布局的组件 操作按钮区 */
+      .fixed-component-action-group {
+        position: absolute;
+        top: 0;
+        right: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        :deep(.el-tag) {
+          box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+          border: none;
+
+          .el-tag__content {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+
+            .el-icon {
+              margin-right: 4px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/DiyEditor/util.ts b/marketing-ui/admin-ui/src/components/DiyEditor/util.ts
new file mode 100644
index 0000000..b6febb9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DiyEditor/util.ts
@@ -0,0 +1,125 @@
+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> {
+  // 用于区分同一种组件的不同实例
+  uid?: number
+  // 组件唯一标识
+  id: string
+  // 组件名称
+  name: string
+  // 组件图标
+  icon: string
+  /*
+   组件位置：
+   top: 固定于手机顶部，例如 顶部的导航栏
+   bottom: 固定于手机底部，例如 底部的菜单导航栏
+   center: 位于手机中心，每个组件占一行，顺序向下排列
+   空：同center
+   fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
+  */
+  position?: 'top' | 'bottom' | 'center' | '' | 'fixed'
+  // 组件属性
+  property: T
+}
+
+// 页面装修组件库
+export interface DiyComponentLibrary {
+  // 组件库名称
+  name: string
+  // 是否展开
+  extended: boolean
+  // 组件列表
+  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 {
+  // 页面属性
+  page: PageConfigProperty
+  // 顶部导航栏属性
+  navigationBar: NavigationBarProperty
+  // 底部导航菜单属性
+  tabBar?: TabBarProperty
+  // 页面组件列表
+  components: PageComponent[]
+}
+// 页面组件，只保留组件ID，组件属性
+export interface PageComponent extends Pick<DiyComponent<any>, 'id' | 'property'> {}
+
+// 页面组件库
+export const PAGE_LIBS = [
+  {
+    name: '基础组件',
+    extended: true,
+    components: [
+      'SearchBar',
+      'NoticeBar',
+      'MenuSwiper',
+      'MenuGrid',
+      'MenuList',
+      'Popover',
+      'FloatingActionButton'
+    ]
+  },
+  {
+    name: '图文组件',
+    extended: true,
+    components: [
+      'ImageBar',
+      'Carousel',
+      'TitleBar',
+      'VideoPlayer',
+      'Divider',
+      'MagicCube',
+      'HotZone'
+    ]
+  },
+  { name: '商品组件', extended: true, components: ['ProductCard', 'ProductList'] },
+  {
+    name: '用户组件',
+    extended: true,
+    components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon']
+  },
+  {
+    name: '营销组件',
+    extended: true,
+    components: [
+      'PromotionCombination',
+      'PromotionSeckill',
+      'PromotionPoint',
+      'CouponCard',
+      'PromotionArticle'
+    ]
+  }
+] as DiyComponentLibrary[]
diff --git a/marketing-ui/admin-ui/src/components/DocAlert/index.vue b/marketing-ui/admin-ui/src/components/DocAlert/index.vue
new file mode 100644
index 0000000..0073266
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/DocAlert/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <el-alert v-if="getEnable()" type="success" show-icon>
+    <template #title>
+      <div @click="goToUrl">{{ '【' + title + '】文档地址：' + url }}</div>
+    </template>
+  </el-alert>
+</template>
+<script setup lang="tsx">
+import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'DocAlert' })
+
+const props = defineProps({
+  title: propTypes.string,
+  url: propTypes.string
+})
+
+/** 跳转 URL 链接 */
+const goToUrl = () => {
+  window.open(props.url)
+}
+
+/** 是否开启 */
+const getEnable = () => {
+  return import.meta.env.VITE_APP_DOCALERT_ENABLE !== 'false'
+}
+</script>
+<style scoped>
+.el-alert--success.is-light {
+  margin-bottom: 10px;
+  cursor: pointer;
+  border: 1px solid green;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Draggable/index.vue b/marketing-ui/admin-ui/src/components/Draggable/index.vue
new file mode 100644
index 0000000..bd153a4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Draggable/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <el-text type="info" size="small"> 拖动左上角的小圆点可对其排序 </el-text>
+  <VueDraggable
+    :list="formData"
+    :force-fallback="true"
+    :animation="200"
+    handle=".drag-icon"
+    class="m-t-8px"
+    item-key="index"
+  >
+    <template #item="{ element, index }">
+      <div
+        class="mb-4px flex flex-col gap-4px border border-gray-2 border-rounded rounded border-solid p-8px"
+      >
+        <!-- 操作按钮区 -->
+        <div
+          class="m--8px m-b-4px flex flex-row items-center justify-between p-8px"
+          style="background-color: var(--app-content-bg-color)"
+        >
+          <el-tooltip content="拖动排序">
+            <Icon
+              icon="ic:round-drag-indicator"
+              class="drag-icon cursor-move"
+              style="color: #8a909c"
+            />
+          </el-tooltip>
+          <el-tooltip content="删除">
+            <Icon
+              icon="ep:delete"
+              class="cursor-pointer text-red-5"
+              v-if="formData.length > 1"
+              @click="handleDelete(index)"
+            />
+          </el-tooltip>
+        </div>
+        <!-- 内容区 -->
+        <slot :element="element" :index="index"></slot>
+      </div>
+    </template>
+  </VueDraggable>
+  <el-tooltip :disabled="limit < 1" :content="`最多添加${limit}个`">
+    <el-button
+      type="primary"
+      plain
+      class="m-t-4px w-full"
+      :disabled="limit > 0 && formData.length >= limit"
+      @click="handleAdd"
+    >
+      <Icon icon="ep:plus" /><span>添加</span>
+    </el-button>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+// 拖拽组件
+import VueDraggable from 'vuedraggable'
+import { useVModel } from '@vueuse/core'
+import { any, array } from 'vue-types'
+import { propTypes } from '@/utils/propTypes'
+import { cloneDeep } from 'lodash-es'
+
+// 拖拽组件封装
+defineOptions({ name: 'Draggable' })
+
+// 定义属性
+const props = defineProps({
+  // 绑定值
+  modelValue: array<any>().isRequired,
+  // 空的元素：点击添加按钮时，创建元素并添加到列表；默认为空对象
+  emptyItem: any<unknown>().def({}),
+  // 数量限制：默认为0，表示不限制
+  limit: propTypes.number.def(0)
+})
+// 定义事件
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+
+// 处理添加
+const handleAdd = () => formData.value.push(cloneDeep(props.emptyItem || {}))
+// 处理删除
+const handleDelete = (index: number) => formData.value.splice(index, 1)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/marketing-ui/admin-ui/src/components/Echart/index.ts b/marketing-ui/admin-ui/src/components/Echart/index.ts
new file mode 100644
index 0000000..4822092
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Echart/index.ts
@@ -0,0 +1,3 @@
+import Echart from './src/Echart.vue'
+
+export { Echart }
diff --git a/marketing-ui/admin-ui/src/components/Echart/src/Echart.vue b/marketing-ui/admin-ui/src/components/Echart/src/Echart.vue
new file mode 100644
index 0000000..bf22b86
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Echart/src/Echart.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { EChartsOption } from 'echarts'
+import echarts from '@/plugins/echarts'
+import { debounce } from 'lodash-es'
+import 'echarts-wordcloud'
+import { propTypes } from '@/utils/propTypes'
+import { PropType } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+import { isString } from '@/utils/is'
+import { useDesign } from '@/hooks/web/useDesign'
+
+import 'echarts/lib/component/markPoint'
+import 'echarts/lib/component/markLine'
+import 'echarts/lib/component/markArea'
+
+defineOptions({ name: 'EChart' })
+
+const { getPrefixCls, variables } = useDesign()
+
+const prefixCls = getPrefixCls('echart')
+
+const appStore = useAppStore()
+
+const props = defineProps({
+  options: {
+    type: Object as PropType<EChartsOption>,
+    required: true
+  },
+  width: propTypes.oneOfType([Number, String]).def(''),
+  height: propTypes.oneOfType([Number, String]).def('500px')
+})
+
+const isDark = computed(() => appStore.getIsDark)
+
+const theme = computed(() => {
+  const echartTheme: boolean | string = unref(isDark) ? true : 'auto'
+
+  return echartTheme
+})
+
+const options = computed(() => {
+  return Object.assign(props.options, {
+    darkMode: unref(theme)
+  })
+})
+
+const elRef = ref<ElRef>()
+
+let echartRef: Nullable<echarts.ECharts> = null
+
+const contentEl = ref<Element>()
+
+const styles = computed(() => {
+  const width = isString(props.width) ? props.width : `${props.width}px`
+  const height = isString(props.height) ? props.height : `${props.height}px`
+
+  return {
+    width,
+    height
+  }
+})
+
+const initChart = () => {
+  if (unref(elRef) && props.options) {
+    echartRef = echarts.init(unref(elRef) as HTMLElement)
+    echartRef?.setOption(unref(options))
+  }
+}
+
+watch(
+  () => options.value,
+  (options) => {
+    if (echartRef) {
+      echartRef?.setOption(options)
+    }
+  },
+  {
+    deep: true
+  }
+)
+
+const resizeHandler = debounce(() => {
+  if (echartRef) {
+    echartRef.resize()
+  }
+}, 100)
+
+const contentResizeHandler = async (e: TransitionEvent) => {
+  if (e.propertyName === 'width') {
+    resizeHandler()
+  }
+}
+
+onMounted(() => {
+  initChart()
+
+  window.addEventListener('resize', resizeHandler)
+
+  contentEl.value = document.getElementsByClassName(`${variables.namespace}-layout-content`)[0]
+  unref(contentEl) &&
+    (unref(contentEl) as Element).addEventListener('transitionend', contentResizeHandler)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resizeHandler)
+  unref(contentEl) &&
+    (unref(contentEl) as Element).removeEventListener('transitionend', contentResizeHandler)
+})
+
+onActivated(() => {
+  if (echartRef) {
+    echartRef.resize()
+  }
+})
+</script>
+
+<template>
+  <div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles"></div>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/Editor/index.ts b/marketing-ui/admin-ui/src/components/Editor/index.ts
new file mode 100644
index 0000000..3fbf0a9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Editor/index.ts
@@ -0,0 +1,8 @@
+import Editor from './src/Editor.vue'
+import { IDomEditor } from '@wangeditor/editor'
+
+export interface EditorExpose {
+  getEditorRef: () => Promise<IDomEditor>
+}
+
+export { Editor }
diff --git a/marketing-ui/admin-ui/src/components/Editor/src/Editor.vue b/marketing-ui/admin-ui/src/components/Editor/src/Editor.vue
new file mode 100644
index 0000000..81f24e2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Editor/src/Editor.vue
@@ -0,0 +1,241 @@
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { i18nChangeLanguage, IDomEditor, IEditorConfig } from '@wangeditor/editor'
+import { propTypes } from '@/utils/propTypes'
+import { isNumber } from '@/utils/is'
+import { ElMessage } from 'element-plus'
+import { useLocaleStore } from '@/store/modules/locale'
+import { getRefreshToken } from '@/utils/auth'
+import { getUploadUrl } from '@/components/UploadFile/src/useUpload'
+
+defineOptions({ name: 'Editor' })
+
+type InsertFnType = (url: string, alt: string, href: string) => void
+
+const localeStore = useLocaleStore()
+
+const currentLocale = computed(() => localeStore.getCurrentLocale)
+
+i18nChangeLanguage(unref(currentLocale).lang)
+
+const props = defineProps({
+  editorId: propTypes.string.def('wangeEditor-1'),
+  height: propTypes.oneOfType([Number, String]).def('500px'),
+  editorConfig: {
+    type: Object as PropType<Partial<IEditorConfig>>,
+    default: () => undefined
+  },
+  readonly: propTypes.bool.def(false),
+  modelValue: propTypes.string.def('')
+})
+
+const emit = defineEmits(['change', 'update:modelValue'])
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef<IDomEditor>()
+
+const valueHtml = ref('')
+
+watch(
+  () => props.modelValue,
+  (val: string) => {
+    if (val === unref(valueHtml)) return
+    valueHtml.value = val
+  },
+  {
+    immediate: true
+  }
+)
+
+// 监听
+watch(
+  () => valueHtml.value,
+  (val: string) => {
+    emit('update:modelValue', val)
+  }
+)
+
+const handleCreated = (editor: IDomEditor) => {
+  editorRef.value = editor
+}
+
+// 编辑器配置
+const editorConfig = computed((): IEditorConfig => {
+  return Object.assign(
+    {
+      placeholder: '请输入内容...',
+      readOnly: props.readonly,
+      customAlert: (s: string, t: string) => {
+        switch (t) {
+          case 'success':
+            ElMessage.success(s)
+            break
+          case 'info':
+            ElMessage.info(s)
+            break
+          case 'warning':
+            ElMessage.warning(s)
+            break
+          case 'error':
+            ElMessage.error(s)
+            break
+          default:
+            ElMessage.info(s)
+            break
+        }
+      },
+      autoFocus: false,
+      scroll: true,
+      MENU_CONF: {
+        ['uploadImage']: {
+          server: getUploadUrl(),
+          // 单个文件的最大体积限制，默认为 2M
+          maxFileSize: 5 * 1024 * 1024,
+          // 最多可上传几个文件，默认为 100
+          maxNumberOfFiles: 10,
+          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+          allowedFileTypes: ['image/*'],
+
+          // 自定义增加 http  header
+          headers: {
+            Accept: '*',
+            Authorization: 'Bearer ' + getRefreshToken() // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：Editor 无法方便的刷新访问令牌
+          },
+
+          // 超时时间，默认为 10 秒
+          timeout: 15 * 1000, // 15 秒
+
+          // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
+          fieldName: 'file',
+
+          // 上传之前触发
+          onBeforeUpload(file: File) {
+            // console.log(file)
+            return file
+          },
+          // 上传进度的回调函数
+          onProgress(progress: number) {
+            // progress 是 0-100 的数字
+            console.log('progress', progress)
+          },
+          onSuccess(file: File, res: any) {
+            console.log('onSuccess', file, res)
+          },
+          onFailed(file: File, res: any) {
+            alert(res.message)
+            console.log('onFailed', file, res)
+          },
+          onError(file: File, err: any, res: any) {
+            alert(err.message)
+            console.error('onError', file, err, res)
+          },
+          // 自定义插入图片
+          customInsert(res: any, insertFn: InsertFnType) {
+            insertFn(res.data, 'image', res.data)
+          }
+        },
+        ['uploadVideo']: {
+          server: getUploadUrl(),
+          // 单个文件的最大体积限制，默认为 10M
+          maxFileSize: 10 * 1024 * 1024,
+          // 最多可上传几个文件，默认为 100
+          maxNumberOfFiles: 10,
+          // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
+          allowedFileTypes: ['video/*'],
+
+          // 自定义增加 http  header
+          headers: {
+            Accept: '*',
+            Authorization: 'Bearer ' + getRefreshToken() // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：Editor 无法方便的刷新访问令牌
+          },
+
+          // 超时时间，默认为 30 秒
+          timeout: 15 * 1000, // 15 秒
+
+          // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
+          fieldName: 'file',
+
+          // 上传之前触发
+          onBeforeUpload(file: File) {
+            // console.log(file)
+            return file
+          },
+          // 上传进度的回调函数
+          onProgress(progress: number) {
+            // progress 是 0-100 的数字
+            console.log('progress', progress)
+          },
+          onSuccess(file: File, res: any) {
+            console.log('onSuccess', file, res)
+          },
+          onFailed(file: File, res: any) {
+            alert(res.message)
+            console.log('onFailed', file, res)
+          },
+          onError(file: File, err: any, res: any) {
+            alert(err.message)
+            console.error('onError', file, err, res)
+          },
+          // 自定义插入图片
+          customInsert(res: any, insertFn: InsertFnType) {
+            insertFn(res.data, 'mp4', res.data)
+          }
+        }
+      },
+      uploadImgShowBase64: true
+    },
+    props.editorConfig || {}
+  )
+})
+
+const editorStyle = computed(() => {
+  return {
+    height: isNumber(props.height) ? `${props.height}px` : props.height
+  }
+})
+
+// 回调函数
+const handleChange = (editor: IDomEditor) => {
+  emit('change', editor)
+}
+
+// 组件销毁时，及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = unref(editorRef.value)
+
+  // 销毁，并移除 editor
+  editor?.destroy()
+})
+
+const getEditorRef = async (): Promise<IDomEditor> => {
+  await nextTick()
+  return unref(editorRef.value) as IDomEditor
+}
+
+defineExpose({
+  getEditorRef
+})
+</script>
+
+<template>
+  <div class="border-1 border-solid border-[var(--tags-view-border-color)] z-10">
+    <!-- 工具栏 -->
+    <Toolbar
+      :editor="editorRef"
+      :editorId="editorId"
+      class="border-0 b-b-1 border-solid border-[var(--tags-view-border-color)]"
+    />
+    <!-- 编辑器 -->
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :editorId="editorId"
+      :style="editorStyle"
+      @on-change="handleChange"
+      @on-created="handleCreated"
+    />
+  </div>
+</template>
+
+<style src="@wangeditor/editor/dist/css/style.css"></style>
diff --git a/marketing-ui/admin-ui/src/components/Error/index.ts b/marketing-ui/admin-ui/src/components/Error/index.ts
new file mode 100644
index 0000000..a52c6f9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Error/index.ts
@@ -0,0 +1,3 @@
+import Error from './src/Error.vue'
+
+export { Error }
diff --git a/marketing-ui/admin-ui/src/components/Error/src/Error.vue b/marketing-ui/admin-ui/src/components/Error/src/Error.vue
new file mode 100644
index 0000000..3fd7a17
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Error/src/Error.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import pageError from '@/assets/svgs/404.svg'
+import networkError from '@/assets/svgs/500.svg'
+import noPermission from '@/assets/svgs/403.svg'
+import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'Error' })
+
+interface ErrorMap {
+  url: string
+  message: string
+  buttonText: string
+}
+
+const { t } = useI18n()
+
+const errorMap: {
+  [key: string]: ErrorMap
+} = {
+  '404': {
+    url: pageError,
+    message: t('error.pageError'),
+    buttonText: t('error.returnToHome')
+  },
+  '500': {
+    url: networkError,
+    message: t('error.networkError'),
+    buttonText: t('error.returnToHome')
+  },
+  '403': {
+    url: noPermission,
+    message: t('error.noPermission'),
+    buttonText: t('error.returnToHome')
+  }
+}
+
+const props = defineProps({
+  type: propTypes.string.validate((v: string) => ['404', '500', '403'].includes(v)).def('404')
+})
+
+const emit = defineEmits(['errorClick'])
+
+const btnClick = () => {
+  emit('errorClick', props.type)
+}
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <div class="text-center">
+      <img :src="errorMap[type].url" alt="" width="350" />
+      <div class="text-14px text-[var(--el-color-info)]">{{ errorMap[type].message }}</div>
+      <div class="mt-20px">
+        <ElButton type="primary" @click="btnClick">{{ errorMap[type].buttonText }}</ElButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/Form/index.ts b/marketing-ui/admin-ui/src/components/Form/index.ts
new file mode 100644
index 0000000..484c7a2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Form/index.ts
@@ -0,0 +1,15 @@
+import Form from './src/Form.vue'
+import { ElForm } from 'element-plus'
+import { FormSchema, FormSetPropsType } from '@/types/form'
+
+export interface FormExpose {
+  setValues: (data: Recordable) => void
+  setProps: (props: Recordable) => void
+  delSchema: (field: string) => void
+  addSchema: (formSchema: FormSchema, index?: number) => void
+  setSchema: (schemaProps: FormSetPropsType[]) => void
+  formModel: Recordable
+  getElFormRef: () => ComponentRef<typeof ElForm>
+}
+
+export { Form }
diff --git a/marketing-ui/admin-ui/src/components/Form/src/Form.vue b/marketing-ui/admin-ui/src/components/Form/src/Form.vue
new file mode 100644
index 0000000..3acc10a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Form/src/Form.vue
@@ -0,0 +1,307 @@
+<script lang="tsx">
+import { computed, defineComponent, onMounted, PropType, ref, unref, watch } from 'vue'
+import { ElCol, ElForm, ElFormItem, ElRow, ElTooltip } from 'element-plus'
+import { componentMap } from './componentMap'
+import { propTypes } from '@/utils/propTypes'
+import { getSlot } from '@/utils/tsxHelper'
+import {
+  initModel,
+  setComponentProps,
+  setFormItemSlots,
+  setGridProp,
+  setItemComponentSlots,
+  setTextPlaceholder
+} from './helper'
+import { useRenderSelect } from './components/useRenderSelect'
+import { useRenderRadio } from './components/useRenderRadio'
+import { useRenderCheckbox } from './components/useRenderCheckbox'
+import { useDesign } from '@/hooks/web/useDesign'
+import { findIndex } from '@/utils'
+import { set } from 'lodash-es'
+import { FormProps } from './types'
+import { Icon } from '@/components/Icon'
+import { FormSchema, FormSetPropsType } from '@/types/form'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('form')
+
+export default defineComponent({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: 'Form',
+  props: {
+    // 生成Form的布局结构数组
+    schema: {
+      type: Array as PropType<FormSchema[]>,
+      default: () => []
+    },
+    // 是否需要栅格布局
+    // update by 芋艿：将 true 改成 false，因为项目更常用这种方式
+    isCol: propTypes.bool.def(false),
+    // 表单数据对象
+    model: {
+      type: Object as PropType<Recordable>,
+      default: () => ({})
+    },
+    // 是否自动设置placeholder
+    autoSetPlaceholder: propTypes.bool.def(true),
+    // 是否自定义内容
+    isCustom: propTypes.bool.def(false),
+    // 表单label宽度
+    labelWidth: propTypes.oneOfType([String, Number]).def('auto'),
+    // 是否 loading 数据中 add by 芋艿
+    vLoading: propTypes.bool.def(false)
+  },
+  emits: ['register'],
+  setup(props, { slots, expose, emit }) {
+    // element form 实例
+    const elFormRef = ref<ComponentRef<typeof ElForm>>()
+
+    // useForm传入的props
+    const outsideProps = ref<FormProps>({})
+
+    const mergeProps = ref<FormProps>({})
+
+    const getProps = computed(() => {
+      const propsObj = { ...props }
+      Object.assign(propsObj, unref(mergeProps))
+      return propsObj
+    })
+
+    // 表单数据
+    const formModel = ref<Recordable>({})
+
+    onMounted(() => {
+      emit('register', unref(elFormRef)?.$parent, unref(elFormRef))
+    })
+
+    // 对表单赋值
+    const setValues = (data: Recordable = {}) => {
+      formModel.value = Object.assign(unref(formModel), data)
+    }
+
+    const setProps = (props: FormProps = {}) => {
+      mergeProps.value = Object.assign(unref(mergeProps), props)
+      outsideProps.value = props
+    }
+
+    const delSchema = (field: string) => {
+      const { schema } = unref(getProps)
+
+      const index = findIndex(schema, (v: FormSchema) => v.field === field)
+      if (index > -1) {
+        schema.splice(index, 1)
+      }
+    }
+
+    const addSchema = (formSchema: FormSchema, index?: number) => {
+      const { schema } = unref(getProps)
+      if (index !== void 0) {
+        schema.splice(index, 0, formSchema)
+        return
+      }
+      schema.push(formSchema)
+    }
+
+    const setSchema = (schemaProps: FormSetPropsType[]) => {
+      const { schema } = unref(getProps)
+      for (const v of schema) {
+        for (const item of schemaProps) {
+          if (v.field === item.field) {
+            set(v, item.path, item.value)
+          }
+        }
+      }
+    }
+
+    const getElFormRef = (): ComponentRef<typeof ElForm> => {
+      return unref(elFormRef) as ComponentRef<typeof ElForm>
+    }
+
+    expose({
+      setValues,
+      formModel,
+      setProps,
+      delSchema,
+      addSchema,
+      setSchema,
+      getElFormRef
+    })
+
+    // 监听表单结构化数组，重新生成formModel
+    watch(
+      () => unref(getProps).schema,
+      (schema = []) => {
+        formModel.value = initModel(schema, unref(formModel))
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+
+    // 渲染包裹标签，是否使用栅格布局
+    const renderWrap = () => {
+      const { isCol } = unref(getProps)
+      const content = isCol ? (
+        <ElRow gutter={20}>{renderFormItemWrap()}</ElRow>
+      ) : (
+        renderFormItemWrap()
+      )
+      return content
+    }
+
+    // 是否要渲染el-col
+    const renderFormItemWrap = () => {
+      // hidden属性表示隐藏，不做渲染
+      const { schema = [], isCol } = unref(getProps)
+
+      return schema
+        .filter((v) => !v.hidden)
+        .map((item) => {
+          // 如果是 Divider 组件，需要自己占用一行
+          const isDivider = item.component === 'Divider'
+          const Com = componentMap['Divider'] as ReturnType<typeof defineComponent>
+          return isDivider ? (
+            <Com {...{ contentPosition: 'left', ...item.componentProps }}>{item?.label}</Com>
+          ) : isCol ? (
+            // 如果需要栅格，需要包裹 ElCol
+            <ElCol {...setGridProp(item.colProps)}>{renderFormItem(item)}</ElCol>
+          ) : (
+            renderFormItem(item)
+          )
+        })
+    }
+
+    // 渲染formItem
+    const renderFormItem = (item: FormSchema) => {
+      // 单独给只有options属性的组件做判断
+      const notRenderOptions = ['SelectV2', 'Cascader', 'Transfer']
+      const slotsMap: Recordable = {
+        ...setItemComponentSlots(slots, item?.componentProps?.slots, item.field)
+      }
+      if (
+        item?.component !== 'SelectV2' &&
+        item?.component !== 'Cascader' &&
+        item?.componentProps?.options
+      ) {
+        slotsMap.default = () => renderOptions(item)
+      }
+
+      const formItemSlots: Recordable = setFormItemSlots(slots, item.field)
+      // 如果有 labelMessage，自动使用插槽渲染
+      if (item?.labelMessage) {
+        formItemSlots.label = () => {
+          return (
+            <>
+              <span>{item.label}</span>
+              <ElTooltip placement="right" raw-content>
+                {{
+                  content: () => <span v-dompurify-html={item.labelMessage}></span>,
+                  default: () => (
+                    <Icon
+                      icon="ep:warning"
+                      size={16}
+                      color="var(--el-color-primary)"
+                      class="relative top-1px ml-2px"
+                    ></Icon>
+                  )
+                }}
+              </ElTooltip>
+            </>
+          )
+        }
+      }
+      return (
+        <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
+          {{
+            ...formItemSlots,
+            default: () => {
+              const Com = componentMap[item.component as string] as ReturnType<
+                typeof defineComponent
+              >
+
+              const { autoSetPlaceholder } = unref(getProps)
+
+              return slots[item.field] ? (
+                getSlot(slots, item.field, formModel.value)
+              ) : (
+                <Com
+                  vModel={formModel.value[item.field]}
+                  {...(autoSetPlaceholder && setTextPlaceholder(item))}
+                  {...setComponentProps(item)}
+                  style={item.componentProps?.style}
+                  {...(notRenderOptions.includes(item?.component as string) &&
+                  item?.componentProps?.options
+                    ? { options: item?.componentProps?.options || [] }
+                    : {})}
+                >
+                  {{ ...slotsMap }}
+                </Com>
+              )
+            }
+          }}
+        </ElFormItem>
+      )
+    }
+
+    // 渲染options
+    const renderOptions = (item: FormSchema) => {
+      switch (item.component) {
+        case 'Select':
+        case 'SelectV2':
+          const { renderSelectOptions } = useRenderSelect(slots)
+          return renderSelectOptions(item)
+        case 'Radio':
+        case 'RadioButton':
+          const { renderRadioOptions } = useRenderRadio()
+          return renderRadioOptions(item)
+        case 'Checkbox':
+        case 'CheckboxButton':
+          const { renderCheckboxOptions } = useRenderCheckbox()
+          return renderCheckboxOptions(item)
+        default:
+          break
+      }
+    }
+
+    // 过滤传入Form组件的属性
+    const getFormBindValue = () => {
+      // 避免在标签上出现多余的属性
+      const delKeys = ['schema', 'isCol', 'autoSetPlaceholder', 'isCustom', 'model']
+      const props = { ...unref(getProps) }
+      for (const key in props) {
+        if (delKeys.indexOf(key) !== -1) {
+          delete props[key]
+        }
+      }
+      return props
+    }
+
+    return () => (
+      <ElForm
+        ref={elFormRef}
+        {...getFormBindValue()}
+        model={props.isCustom ? props.model : formModel}
+        class={prefixCls}
+        v-loading={props.vLoading}
+      >
+        {{
+          // 如果需要自定义，就什么都不渲染，而是提供默认插槽
+          default: () => {
+            const { isCustom } = unref(getProps)
+            return isCustom ? getSlot(slots, 'default') : renderWrap()
+          }
+        }}
+      </ElForm>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.#{$elNamespace}-form.#{$namespace}-form .#{$elNamespace}-row {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Form/src/componentMap.ts b/marketing-ui/admin-ui/src/components/Form/src/componentMap.ts
new file mode 100644
index 0000000..5af9b40
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Form/src/componentMap.ts
@@ -0,0 +1,55 @@
+import type { Component } from 'vue'
+import {
+  ElCascader,
+  ElCheckboxGroup,
+  ElColorPicker,
+  ElDatePicker,
+  ElInput,
+  ElInputNumber,
+  ElRadioGroup,
+  ElRate,
+  ElSelect,
+  ElSelectV2,
+  ElTreeSelect,
+  ElSlider,
+  ElSwitch,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTransfer,
+  ElAutocomplete,
+  ElDivider
+} from 'element-plus'
+import { InputPassword } from '@/components/InputPassword'
+import { Editor } from '@/components/Editor'
+import { UploadImg, UploadImgs, UploadFile } from '@/components/UploadFile'
+import { ComponentName } from '@/types/components'
+
+const componentMap: Recordable<Component, ComponentName> = {
+  Radio: ElRadioGroup,
+  Checkbox: ElCheckboxGroup,
+  CheckboxButton: ElCheckboxGroup,
+  Input: ElInput,
+  Autocomplete: ElAutocomplete,
+  InputNumber: ElInputNumber,
+  Select: ElSelect,
+  Cascader: ElCascader,
+  Switch: ElSwitch,
+  Slider: ElSlider,
+  TimePicker: ElTimePicker,
+  DatePicker: ElDatePicker,
+  Rate: ElRate,
+  ColorPicker: ElColorPicker,
+  Transfer: ElTransfer,
+  Divider: ElDivider,
+  TimeSelect: ElTimeSelect,
+  SelectV2: ElSelectV2,
+  TreeSelect: ElTreeSelect,
+  RadioButton: ElRadioGroup,
+  InputPassword: InputPassword,
+  Editor: Editor,
+  UploadImg: UploadImg,
+  UploadImgs: UploadImgs,
+  UploadFile: UploadFile
+}
+
+export { componentMap }
diff --git a/marketing-ui/admin-ui/src/components/Form/src/components/useRenderCheckbox.tsx b/marketing-ui/admin-ui/src/components/Form/src/components/useRenderCheckbox.tsx
new file mode 100644
index 0000000..e151839
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Form/src/components/useRenderCheckbox.tsx
@@ -0,0 +1,26 @@
+import { FormSchema } from '@/types/form'
+import { ElCheckbox, ElCheckboxButton } from 'element-plus'
+import { defineComponent } from 'vue'
+
+export const useRenderCheckbox = () => {
+  const renderCheckboxOptions = (item: FormSchema) => {
+    // 如果有别名，就取别名
+    const labelAlias = item?.componentProps?.optionsAlias?.labelField
+    const valueAlias = item?.componentProps?.optionsAlias?.valueField
+    const Com = (item.component === 'Checkbox' ? ElCheckbox : ElCheckboxButton) as ReturnType<
+      typeof defineComponent
+    >
+    return item?.componentProps?.options?.map((option) => {
+      const { ...other } = option
+      return (
+        <Com {...other} label={option[valueAlias || 'value']}>
+          {option[labelAlias || 'label']}
+        </Com>
+      )
+    })
+  }
+
+  return {
+    renderCheckboxOptions
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/Form/src/components/useRenderRadio.tsx b/marketing-ui/admin-ui/src/components/Form/src/components/useRenderRadio.tsx
new file mode 100644
index 0000000..d1005ca
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Form/src/components/useRenderRadio.tsx
@@ -0,0 +1,26 @@
+import { FormSchema } from '@/types/form'
+import { ElRadio, ElRadioButton } from 'element-plus'
+import { defineComponent } from 'vue'
+
+export const useRenderRadio = () => {
+  const renderRadioOptions = (item: FormSchema) => {
+    // 如果有别名，就取别名
+    const labelAlias = item?.componentProps?.optionsAlias?.labelField
+    const valueAlias = item?.componentProps?.optionsAlias?.valueField
+    const Com = (item.component === 'Radio' ? ElRadio : ElRadioButton) as ReturnType<
+      typeof defineComponent
+    >
+    return item?.componentProps?.options?.map((option) => {
+      const { ...other } = option
+      return (
+        <Com {...other} label={option[valueAlias || 'value']}>
+          {option[labelAlias || 'label']}
+        </Com>
+      )
+    })
+  }
+
+  return {
+    renderRadioOptions
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/Form/src/components/useRenderSelect.tsx b/marketing-ui/admin-ui/src/components/Form/src/components/useRenderSelect.tsx
new file mode 100644
index 0000000..59b72e6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Form/src/components/useRenderSelect.tsx
@@ -0,0 +1,57 @@
+import { FormSchema } from '@/types/form'
+import { ComponentOptions } from '@/types/components'
+import { ElOption, ElOptionGroup } from 'element-plus'
+import { getSlot } from '@/utils/tsxHelper'
+import { Slots } from 'vue'
+
+export const useRenderSelect = (slots: Slots) => {
+  // 渲染 select options
+  const renderSelectOptions = (item: FormSchema) => {
+    // 如果有别名，就取别名
+    const labelAlias = item?.componentProps?.optionsAlias?.labelField
+    return item?.componentProps?.options?.map((option) => {
+      if (option?.options?.length) {
+        return (
+          <ElOptionGroup label={option[labelAlias || 'label']}>
+            {() => {
+              return option?.options?.map((v) => {
+                return renderSelectOptionItem(item, v)
+              })
+            }}
+          </ElOptionGroup>
+        )
+      } else {
+        return renderSelectOptionItem(item, option)
+      }
+    })
+  }
+
+  // 渲染 select option item
+  const renderSelectOptionItem = (item: FormSchema, option: ComponentOptions) => {
+    // 如果有别名，就取别名
+    const labelAlias = item?.componentProps?.optionsAlias?.labelField
+    const valueAlias = item?.componentProps?.optionsAlias?.valueField
+
+    const { label, value, ...other } = option
+
+    return (
+      <ElOption
+        {...other}
+        label={labelAlias ? option[labelAlias] : label}
+        value={valueAlias ? option[valueAlias] : value}
+      >
+        {{
+          default: () =>
+            // option 插槽名规则，{field}-option
+            item?.componentProps?.optionsSlot
+              ? getSlot(slots, `${item.field}-option`, { item: option })
+              : undefined
+        }}
+      </ElOption>
+    )
+  }
+
+  return {
+    renderSelectOptions
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/Form/src/helper.ts b/marketing-ui/admin-ui/src/components/Form/src/helper.ts
new file mode 100644
index 0000000..cdfc8ca
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Form/src/helper.ts
@@ -0,0 +1,148 @@
+import type { Slots } from 'vue'
+import { getSlot } from '@/utils/tsxHelper'
+import { PlaceholderModel } from './types'
+import { FormSchema } from '@/types/form'
+import { ColProps } from '@/types/components'
+
+/**
+ *
+ * @param schema 对应组件数据
+ * @returns 返回提示信息对象
+ * @description 用于自动设置placeholder
+ */
+export const setTextPlaceholder = (schema: FormSchema): PlaceholderModel => {
+  const { t } = useI18n()
+  const textMap = ['Input', 'Autocomplete', 'InputNumber', 'InputPassword']
+  const selectMap = ['Select', 'SelectV2', 'TimePicker', 'DatePicker', 'TimeSelect', 'TimeSelect']
+  if (textMap.includes(schema?.component as string)) {
+    return {
+      placeholder: t('common.inputText') + schema.label
+    }
+  }
+  if (selectMap.includes(schema?.component as string)) {
+    // 一些范围选择器
+    const twoTextMap = ['datetimerange', 'daterange', 'monthrange', 'datetimerange', 'daterange']
+    if (
+      twoTextMap.includes(
+        (schema?.componentProps?.type || schema?.componentProps?.isRange) as string
+      )
+    ) {
+      return {
+        startPlaceholder: t('common.startTimeText'),
+        endPlaceholder: t('common.endTimeText'),
+        rangeSeparator: '-'
+      }
+    } else {
+      return {
+        placeholder: t('common.selectText') + schema.label
+      }
+    }
+  }
+  return {}
+}
+
+/**
+ *
+ * @param col 内置栅格
+ * @returns 返回栅格属性
+ * @description 合并传入进来的栅格属性
+ */
+export const setGridProp = (col: ColProps = {}): ColProps => {
+  const colProps: ColProps = {
+    // 如果有span，代表用户优先级更高，所以不需要默认栅格
+    ...(col.span
+      ? {}
+      : {
+          xs: 24,
+          sm: 12,
+          md: 12,
+          lg: 12,
+          xl: 12
+        }),
+    ...col
+  }
+  return colProps
+}
+
+/**
+ *
+ * @param item 传入的组件属性
+ * @returns 默认添加 clearable 属性
+ */
+export const setComponentProps = (item: FormSchema): Recordable => {
+  const notNeedClearable = ['ColorPicker']
+  const componentProps: Recordable = notNeedClearable.includes(item.component as string)
+    ? { ...item.componentProps }
+    : {
+        clearable: true,
+        ...item.componentProps
+      }
+  // 需要删除额外的属性
+  delete componentProps?.slots
+  return componentProps
+}
+
+/**
+ *
+ * @param slots 插槽
+ * @param slotsProps 插槽属性
+ * @param field 字段名
+ */
+export const setItemComponentSlots = (
+  slots: Slots,
+  slotsProps: Recordable = {},
+  field: string
+): Recordable => {
+  const slotObj: Recordable = {}
+  for (const key in slotsProps) {
+    if (slotsProps[key]) {
+      // 由于组件有可能重复，需要有一个唯一的前缀
+      slotObj[key] = (data: Recordable) => {
+        return getSlot(slots, `${field}-${key}`, data)
+      }
+    }
+  }
+  return slotObj
+}
+
+/**
+ *
+ * @param schema Form表单结构化数组
+ * @param formModel FormModel
+ * @returns FormModel
+ * @description 生成对应的formModel
+ */
+export const initModel = (schema: FormSchema[], formModel: Recordable) => {
+  const model: Recordable = { ...formModel }
+  schema.map((v) => {
+    // 如果是hidden，就删除对应的值
+    if (v.hidden) {
+      delete model[v.field]
+    } else if (v.component && v.component !== 'Divider') {
+      const hasField = Reflect.has(model, v.field)
+      // 如果先前已经有值存在，则不进行重新赋值，而是采用现有的值
+      model[v.field] = hasField ? model[v.field] : v.value !== void 0 ? v.value : ''
+    }
+  })
+  return model
+}
+
+/**
+ * @param slots 插槽
+ * @param field 字段名
+ * @returns 返回FormIiem插槽
+ */
+export const setFormItemSlots = (slots: Slots, field: string): Recordable => {
+  const slotObj: Recordable = {}
+  if (slots[`${field}-error`]) {
+    slotObj['error'] = (data: Recordable) => {
+      return getSlot(slots, `${field}-error`, data)
+    }
+  }
+  if (slots[`${field}-label`]) {
+    slotObj['label'] = (data: Recordable) => {
+      return getSlot(slots, `${field}-label`, data)
+    }
+  }
+  return slotObj
+}
diff --git a/marketing-ui/admin-ui/src/components/Form/src/types.ts b/marketing-ui/admin-ui/src/components/Form/src/types.ts
new file mode 100644
index 0000000..dcd01e7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Form/src/types.ts
@@ -0,0 +1,17 @@
+import { FormSchema } from '@/types/form'
+
+export interface PlaceholderModel {
+  placeholder?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  rangeSeparator?: string
+}
+
+export type FormProps = {
+  schema?: FormSchema[]
+  isCol?: boolean
+  model?: Recordable
+  autoSetPlaceholder?: boolean
+  isCustom?: boolean
+  labelWidth?: string | number
+} & Recordable
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/index.ts b/marketing-ui/admin-ui/src/components/FormCreate/index.ts
new file mode 100644
index 0000000..9d32778
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/index.ts
@@ -0,0 +1,4 @@
+import { useFormCreateDesigner } from './src/useFormCreateDesigner'
+import { useApiSelect } from './src/components/useApiSelect'
+
+export { useFormCreateDesigner, useApiSelect }
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/components/DictSelect.vue b/marketing-ui/admin-ui/src/components/FormCreate/src/components/DictSelect.vue
new file mode 100644
index 0000000..204746d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/components/DictSelect.vue
@@ -0,0 +1,59 @@
+<!-- 数据字典 Select 选择器 -->
+<template>
+  <el-select v-if="selectType === 'select'" class="w-1/1" v-bind="attrs">
+    <el-option
+      v-for="(dict, index) in getDictOptions"
+      :key="index"
+      :label="dict.label"
+      :value="dict.value"
+    />
+  </el-select>
+  <el-radio-group v-if="selectType === 'radio'" class="w-1/1" v-bind="attrs">
+    <el-radio v-for="(dict, index) in getDictOptions" :key="index" :value="dict.value">
+      {{ dict.label }}
+    </el-radio>
+  </el-radio-group>
+  <el-checkbox-group v-if="selectType === 'checkbox'" class="w-1/1" v-bind="attrs">
+    <el-checkbox
+      v-for="(dict, index) in getDictOptions"
+      :key="index"
+      :label="dict.label"
+      :value="dict.value"
+    />
+  </el-checkbox-group>
+</template>
+
+<script lang="ts" setup>
+import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+
+defineOptions({ name: 'DictSelect' })
+
+const attrs = useAttrs()
+
+// 接受父组件参数
+interface Props {
+  dictType: string // 字典类型
+  valueType?: 'str' | 'int' | 'bool' // 字典值类型
+  selectType?: 'select' | 'radio' | 'checkbox' // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
+  formCreateInject?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  valueType: 'str',
+  selectType: 'select'
+})
+
+// 获得字典配置
+const getDictOptions = computed(() => {
+  switch (props.valueType) {
+    case 'str':
+      return getStrDictOptions(props.dictType)
+    case 'int':
+      return getIntDictOptions(props.dictType)
+    case 'bool':
+      return getBoolDictOptions(props.dictType)
+    default:
+      return []
+  }
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/components/useApiSelect.tsx b/marketing-ui/admin-ui/src/components/FormCreate/src/components/useApiSelect.tsx
new file mode 100644
index 0000000..8ff95fb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/components/useApiSelect.tsx
@@ -0,0 +1,247 @@
+import request from '@/config/axios'
+import { isEmpty } from '@/utils/is'
+import { ApiSelectProps } from '@/components/FormCreate/src/type'
+import { jsonParse } from '@/utils'
+
+export const useApiSelect = (option: ApiSelectProps) => {
+  return defineComponent({
+    name: option.name,
+    props: {
+      // 选项标签
+      labelField: {
+        type: String,
+        default: () => option.labelField ?? 'label'
+      },
+      // 选项的值
+      valueField: {
+        type: String,
+        default: () => option.valueField ?? 'value'
+      },
+      // api 接口
+      url: {
+        type: String,
+        default: () => option.url ?? ''
+      },
+      // 请求类型
+      method: {
+        type: String,
+        default: 'GET'
+      },
+      // 选项解析函数
+      parseFunc: {
+        type: String,
+        default: ''
+      },
+      // 请求参数
+      data: {
+        type: String,
+        default: ''
+      },
+      // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
+      selectType: {
+        type: String,
+        default: 'select'
+      },
+      // 是否多选
+      multiple: {
+        type: Boolean,
+        default: false
+      },
+      // 是否远程搜索
+      remote: {
+        type: Boolean,
+        default: false
+      },
+      // 远程搜索时携带的参数
+      remoteField: {
+        type: String,
+        default: 'label'
+      }
+    },
+    setup(props) {
+      const attrs = useAttrs()
+      const options = ref<any[]>([]) // 下拉数据
+      const loading = ref(false) // 是否正在从远程获取数据
+      const queryParam = ref<any>() // 当前输入的值
+      const getOptions = async () => {
+        options.value = []
+        // 接口选择器
+        if (isEmpty(props.url)) {
+          return
+        }
+        switch (props.method) {
+          case 'GET':
+            let url: string = props.url
+            if (props.remote) {
+              url = `${url}?${props.remoteField}=${queryParam.value}`
+            }
+            parseOptions(await request.get({ url: url }))
+            break
+          case 'POST':
+            const data: any = jsonParse(props.data)
+            if (props.remote) {
+              data[props.remoteField] = queryParam.value
+            }
+            parseOptions(await request.post({ url: props.url, data: data }))
+            break
+        }
+      }
+
+      function parseOptions(data: any) {
+        //  情况一：如果有自定义解析函数优先使用自定义解析
+        if (!isEmpty(props.parseFunc)) {
+          options.value = parseFunc()?.(data)
+          return
+        }
+        // 情况二：返回的直接是一个列表
+        if (Array.isArray(data)) {
+          parseOptions0(data)
+          return
+        }
+        // 情况二：返回的是分页数据,尝试读取 list
+        data = data.list
+        if (!!data && Array.isArray(data)) {
+          parseOptions0(data)
+          return
+        }
+        // 情况三：不是 yudao-vue-pro 标准返回
+        console.warn(
+          `接口[${props.url}] 返回结果不是 yudao-vue-pro 标准返回建议采用自定义解析函数处理`
+        )
+      }
+
+      function parseOptions0(data: any[]) {
+        if (Array.isArray(data)) {
+          options.value = data.map((item: any) => ({
+            label: parseExpression(item, props.labelField),
+            value: parseExpression(item, props.valueField)
+          }))
+          return
+        }
+        console.warn(`接口[${props.url}] 返回结果不是一个数组`)
+      }
+
+      function parseFunc() {
+        let parse: any = null
+        if (!!props.parseFunc) {
+          // 解析字符串函数
+          parse = new Function(`return ${props.parseFunc}`)()
+        }
+        return parse
+      }
+
+      function parseExpression(data: any, template: string) {
+        // 检测是否使用了表达式
+        if (template.indexOf('${') === -1) {
+          return data[template]
+        }
+        // 正则表达式匹配模板字符串中的 ${...}
+        const pattern = /\$\{([^}]*)}/g
+        // 使用replace函数配合正则表达式和回调函数来进行替换
+        return template.replace(pattern, (_, expr) => {
+          // expr 是匹配到的 ${} 内的表达式（这里是属性名），从 data 中获取对应的值
+          const result = data[expr.trim()] // 去除前后空白，以防用户输入带空格的属性名
+          if (!result) {
+            console.warn(
+              `接口选择器选项模版[${template}][${expr.trim()}] 解析值失败结果为[${result}], 请检查属性名称是否存在于接口返回值中,存在则忽略此条！！！`
+            )
+          }
+          return result
+        })
+      }
+
+      const remoteMethod = async (query: any) => {
+        if (!query) {
+          return
+        }
+        loading.value = true
+        try {
+          queryParam.value = query
+          await getOptions()
+        } finally {
+          loading.value = false
+        }
+      }
+
+      onMounted(async () => {
+        await getOptions()
+      })
+
+      const buildSelect = () => {
+        if (props.multiple) {
+          // fix：多写此步是为了解决 multiple 属性问题
+          return (
+            <el-select
+              class="w-1/1"
+              multiple
+              loading={loading.value}
+              {...attrs}
+              remote={props.remote}
+              {...(props.remote && { remoteMethod: remoteMethod })}
+            >
+              {options.value.map((item, index) => (
+                <el-option key={index} label={item.label} value={item.value} />
+              ))}
+            </el-select>
+          )
+        }
+        return (
+          <el-select
+            class="w-1/1"
+            loading={loading.value}
+            {...attrs}
+            remote={props.remote}
+            {...(props.remote && { remoteMethod: remoteMethod })}
+          >
+            {options.value.map((item, index) => (
+              <el-option key={index} label={item.label} value={item.value} />
+            ))}
+          </el-select>
+        )
+      }
+      const buildCheckbox = () => {
+        if (isEmpty(options.value)) {
+          options.value = [
+            { label: '选项1', value: '选项1' },
+            { label: '选项2', value: '选项2' }
+          ]
+        }
+        return (
+          <el-checkbox-group class="w-1/1" {...attrs}>
+            {options.value.map((item, index) => (
+              <el-checkbox key={index} label={item.label} value={item.value} />
+            ))}
+          </el-checkbox-group>
+        )
+      }
+      const buildRadio = () => {
+        if (isEmpty(options.value)) {
+          options.value = [
+            { label: '选项1', value: '选项1' },
+            { label: '选项2', value: '选项2' }
+          ]
+        }
+        return (
+          <el-radio-group class="w-1/1" {...attrs}>
+            {options.value.map((item, index) => (
+              <el-radio key={index} value={item.value}>
+                {item.label}
+              </el-radio>
+            ))}
+          </el-radio-group>
+        )
+      }
+      return () => (
+        <>
+          {props.selectType === 'select'
+            ? buildSelect()
+            : props.selectType === 'radio'
+              ? buildRadio()
+              : props.selectType === 'checkbox'
+                ? buildCheckbox()
+                : buildSelect()}
+        </>
+      )
+    }
+  })
+}
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/config/index.ts b/marketing-ui/admin-ui/src/components/FormCreate/src/config/index.ts
new file mode 100644
index 0000000..b1e2dde
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/config/index.ts
@@ -0,0 +1,15 @@
+import { useUploadFileRule } from './useUploadFileRule'
+import { useUploadImgRule } from './useUploadImgRule'
+import { useUploadImgsRule } from './useUploadImgsRule'
+import { useDictSelectRule } from './useDictSelectRule'
+import { useEditorRule } from './useEditorRule'
+import { useSelectRule } from './useSelectRule'
+
+export {
+  useUploadFileRule,
+  useUploadImgRule,
+  useUploadImgsRule,
+  useDictSelectRule,
+  useEditorRule,
+  useSelectRule
+}
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/config/selectRule.ts b/marketing-ui/admin-ui/src/components/FormCreate/src/config/selectRule.ts
new file mode 100644
index 0000000..a6f3841
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/config/selectRule.ts
@@ -0,0 +1,181 @@
+const selectRule = [
+  {
+    type: 'select',
+    field: 'selectType',
+    title: '选择器类型',
+    value: 'select',
+    options: [
+      { label: '下拉框', value: 'select' },
+      { label: '单选框', value: 'radio' },
+      { label: '多选框', value: 'checkbox' }
+    ],
+    // 参考 https://www.form-create.com/v3/guide/control 组件联动，单选框和多选框不需要多选属性
+    control: [
+      {
+        value: 'select',
+        condition: '==',
+        method: 'hidden',
+        rule: [
+          'multiple',
+          'clearable',
+          'collapseTags',
+          'multipleLimit',
+          'allowCreate',
+          'filterable',
+          'noMatchText',
+          'remote',
+          'remoteMethod',
+          'reserveKeyword',
+          'defaultFirstOption',
+          'automaticDropdown'
+        ]
+      }
+    ]
+  },
+  {
+    type: 'switch',
+    field: 'filterable',
+    title: '是否可搜索'
+  },
+  { type: 'switch', field: 'multiple', title: '是否多选' },
+  {
+    type: 'switch',
+    field: 'disabled',
+    title: '是否禁用'
+  },
+  { type: 'switch', field: 'clearable', title: '是否可以清空选项' },
+  {
+    type: 'switch',
+    field: 'collapseTags',
+    title: '多选时是否将选中值按文字的形式展示'
+  },
+  {
+    type: 'inputNumber',
+    field: 'multipleLimit',
+    title: '多选时用户最多可以选择的项目数，为 0 则不限制',
+    props: { min: 0 }
+  },
+  {
+    type: 'input',
+    field: 'autocomplete',
+    title: 'autocomplete 属性'
+  },
+  { type: 'input', field: 'placeholder', title: '占位符' },
+  { type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目' },
+  {
+    type: 'input',
+    field: 'noMatchText',
+    title: '搜索条件无匹配时显示的文字'
+  },
+  { type: 'input', field: 'noDataText', title: '选项为空时显示的文字' },
+  {
+    type: 'switch',
+    field: 'reserveKeyword',
+    title: '多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词'
+  },
+  {
+    type: 'switch',
+    field: 'defaultFirstOption',
+    title: '在输入框按下回车，选择第一个匹配项'
+  },
+  {
+    type: 'switch',
+    field: 'popperAppendToBody',
+    title: '是否将弹出框插入至 body 元素',
+    value: true
+  },
+  {
+    type: 'switch',
+    field: 'automaticDropdown',
+    title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单'
+  }
+]
+
+const apiSelectRule = [
+  {
+    type: 'input',
+    field: 'url',
+    title: 'url 地址',
+    props: {
+      placeholder: '/system/user/simple-list'
+    }
+  },
+  {
+    type: 'select',
+    field: 'method',
+    title: '请求类型',
+    value: 'GET',
+    options: [
+      { label: 'GET', value: 'GET' },
+      { label: 'POST', value: 'POST' }
+    ],
+    control: [
+      {
+        value: 'GET',
+        condition: '!=',
+        method: 'hidden',
+        rule: [
+          {
+            type: 'input',
+            field: 'data',
+            title: '请求参数 JSON 格式',
+            props: {
+              autosize: true,
+              type: 'textarea',
+              placeholder: '{"type": 1}'
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    type: 'input',
+    field: 'labelField',
+    title: 'label 属性',
+    info: '可以使用 el 表达式：${属性}，来实现复杂数据组合。如：${nickname}-${id}',
+    props: {
+      placeholder: 'nickname'
+    }
+  },
+  {
+    type: 'input',
+    field: 'valueField',
+    title: 'value 属性',
+    info: '可以使用 el 表达式：${属性}，来实现复杂数据组合。如：${nickname}-${id}',
+    props: {
+      placeholder: 'id'
+    }
+  },
+  {
+    type: 'input',
+    field: 'parseFunc',
+    title: '选项解析函数',
+    info: `data 为接口返回值,需要写一个匿名函数解析返回值为选择器 options 列表
+    (data: any)=>{ label: string; value: any }[]`,
+    props: {
+      autosize: true,
+      rows: { minRows: 2, maxRows: 6 },
+      type: 'textarea',
+      placeholder: `
+        function (data) {
+            console.log(data)
+            return data.list.map(item=> ({label: item.nickname,value: item.id}))
+        }`
+    }
+  },
+  {
+    type: 'switch',
+    field: 'remote',
+    info: '是否可搜索',
+    title: '其中的选项是否从服务器远程加载'
+  },
+  {
+    type: 'input',
+    field: 'remoteField',
+    title: '请求参数',
+    info: '远程请求时请求携带的参数名称，如：name'
+  }
+]
+
+export { selectRule, apiSelectRule }
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/config/useDictSelectRule.ts b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useDictSelectRule.ts
new file mode 100644
index 0000000..f232f48
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useDictSelectRule.ts
@@ -0,0 +1,64 @@
+import { generateUUID } from '@/utils'
+import * as DictDataApi from '@/api/system/dict/dict.type'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+import { selectRule } from '@/components/FormCreate/src/config/selectRule'
+import { cloneDeep } from 'lodash-es'
+
+/**
+ * 字典选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule
+ */
+export const useDictSelectRule = () => {
+  const label = '字典选择器'
+  const name = 'DictSelect'
+  const rules = cloneDeep(selectRule)
+  const dictOptions = ref<{ label: string; value: string }[]>([]) // 字典类型下拉数据
+  onMounted(async () => {
+    const data = await DictDataApi.getSimpleDictTypeList()
+    if (!data || data.length === 0) {
+      return
+    }
+    dictOptions.value =
+      data?.map((item: DictDataApi.DictTypeVO) => ({
+        label: item.name,
+        value: item.type
+      })) ?? []
+  })
+  return {
+    icon: 'icon-doc-text',
+    label,
+    name,
+    rule() {
+      return {
+        type: name,
+        field: generateUUID(),
+        title: label,
+        info: '',
+        $required: false
+      }
+    },
+    props(_, { t }) {
+      return localeProps(t, name + '.props', [
+        makeRequiredRule(),
+        {
+          type: 'select',
+          field: 'dictType',
+          title: '字典类型',
+          value: '',
+          options: dictOptions.value
+        },
+        {
+          type: 'select',
+          field: 'valueType',
+          title: '字典值类型',
+          value: 'str',
+          options: [
+            { label: '数字', value: 'int' },
+            { label: '字符串', value: 'str' },
+            { label: '布尔值', value: 'bool' }
+          ]
+        },
+        ...rules
+      ])
+    }
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/config/useEditorRule.ts b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useEditorRule.ts
new file mode 100644
index 0000000..ac6d9ac
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useEditorRule.ts
@@ -0,0 +1,32 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+
+export const useEditorRule = () => {
+  const label = '富文本'
+  const name = 'Editor'
+  return {
+    icon: 'icon-editor',
+    label,
+    name,
+    rule() {
+      return {
+        type: name,
+        field: generateUUID(),
+        title: label,
+        info: '',
+        $required: false
+      }
+    },
+    props(_, { t }) {
+      return localeProps(t, name + '.props', [
+        makeRequiredRule(),
+        {
+          type: 'input',
+          field: 'height',
+          title: '高度'
+        },
+        { type: 'switch', field: 'readonly', title: '是否只读' }
+      ])
+    }
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/config/useSelectRule.ts b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useSelectRule.ts
new file mode 100644
index 0000000..ff21a22
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useSelectRule.ts
@@ -0,0 +1,36 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+import { selectRule } from '@/components/FormCreate/src/config/selectRule'
+import { SelectRuleOption } from '@/components/FormCreate/src/type'
+import { cloneDeep } from 'lodash-es'
+
+/**
+ * 通用选择器规则 hook
+ *
+ * @param option 规则配置
+ */
+export const useSelectRule = (option: SelectRuleOption) => {
+  const label = option.label
+  const name = option.name
+  const rules = cloneDeep(selectRule)
+  return {
+    icon: option.icon,
+    label,
+    name,
+    rule() {
+      return {
+        type: name,
+        field: generateUUID(),
+        title: label,
+        info: '',
+        $required: false
+      }
+    },
+    props(_, { t }) {
+      if (!option.props) {
+        option.props = []
+      }
+      return localeProps(t, name + '.props', [makeRequiredRule(), ...option.props, ...rules])
+    }
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/config/useUploadFileRule.ts b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useUploadFileRule.ts
new file mode 100644
index 0000000..a1ea85e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useUploadFileRule.ts
@@ -0,0 +1,80 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+
+export const useUploadFileRule = () => {
+  const label = '文件上传'
+  const name = 'UploadFile'
+  return {
+    icon: 'icon-upload',
+    label,
+    name,
+    rule() {
+      return {
+        type: name,
+        field: generateUUID(),
+        title: label,
+        info: '',
+        $required: false
+      }
+    },
+    props(_, { t }) {
+      return localeProps(t, name + '.props', [
+        makeRequiredRule(),
+        {
+          type: 'select',
+          field: 'fileType',
+          title: '文件类型',
+          value: ['doc', 'xls', 'ppt', 'txt', 'pdf'],
+          options: [
+            { label: 'doc', value: 'doc' },
+            { label: 'xls', value: 'xls' },
+            { label: 'ppt', value: 'ppt' },
+            { label: 'txt', value: 'txt' },
+            { label: 'pdf', value: 'pdf' }
+          ],
+          props: {
+            multiple: true
+          }
+        },
+        {
+          type: 'switch',
+          field: 'autoUpload',
+          title: '是否在选取文件后立即进行上传',
+          value: true
+        },
+        {
+          type: 'switch',
+          field: 'drag',
+          title: '拖拽上传',
+          value: false
+        },
+        {
+          type: 'switch',
+          field: 'isShowTip',
+          title: '是否显示提示',
+          value: true
+        },
+        {
+          type: 'inputNumber',
+          field: 'fileSize',
+          title: '大小限制(MB)',
+          value: 5,
+          props: { min: 0 }
+        },
+        {
+          type: 'inputNumber',
+          field: 'limit',
+          title: '数量限制',
+          value: 5,
+          props: { min: 0 }
+        },
+        {
+          type: 'switch',
+          field: 'disabled',
+          title: '是否禁用',
+          value: false
+        }
+      ])
+    }
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/config/useUploadImgRule.ts b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useUploadImgRule.ts
new file mode 100644
index 0000000..546cf9d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useUploadImgRule.ts
@@ -0,0 +1,89 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+
+export const useUploadImgRule = () => {
+  const label = '单图上传'
+  const name = 'UploadImg'
+  return {
+    icon: 'icon-upload',
+    label,
+    name,
+    rule() {
+      return {
+        type: name,
+        field: generateUUID(),
+        title: label,
+        info: '',
+        $required: false
+      }
+    },
+    props(_, { t }) {
+      return localeProps(t, name + '.props', [
+        makeRequiredRule(),
+        {
+          type: 'switch',
+          field: 'drag',
+          title: '拖拽上传',
+          value: false
+        },
+        {
+          type: 'select',
+          field: 'fileType',
+          title: '图片类型限制',
+          value: ['image/jpeg', 'image/png', 'image/gif'],
+          options: [
+            { label: 'image/apng', value: 'image/apng' },
+            { label: 'image/bmp', value: 'image/bmp' },
+            { label: 'image/gif', value: 'image/gif' },
+            { label: 'image/jpeg', value: 'image/jpeg' },
+            { label: 'image/pjpeg', value: 'image/pjpeg' },
+            { label: 'image/svg+xml', value: 'image/svg+xml' },
+            { label: 'image/tiff', value: 'image/tiff' },
+            { label: 'image/webp', value: 'image/webp' },
+            { label: 'image/x-icon', value: 'image/x-icon' }
+          ],
+          props: {
+            multiple: true
+          }
+        },
+        {
+          type: 'inputNumber',
+          field: 'fileSize',
+          title: '大小限制(MB)',
+          value: 5,
+          props: { min: 0 }
+        },
+        {
+          type: 'input',
+          field: 'height',
+          title: '组件高度',
+          value: '150px'
+        },
+        {
+          type: 'input',
+          field: 'width',
+          title: '组件宽度',
+          value: '150px'
+        },
+        {
+          type: 'input',
+          field: 'borderradius',
+          title: '组件边框圆角',
+          value: '8px'
+        },
+        {
+          type: 'switch',
+          field: 'disabled',
+          title: '是否显示删除按钮',
+          value: true
+        },
+        {
+          type: 'switch',
+          field: 'showBtnText',
+          title: '是否显示按钮文字',
+          value: true
+        }
+      ])
+    }
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/config/useUploadImgsRule.ts b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useUploadImgsRule.ts
new file mode 100644
index 0000000..0bf2378
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/config/useUploadImgsRule.ts
@@ -0,0 +1,84 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+
+export const useUploadImgsRule = () => {
+  const label = '多图上传'
+  const name = 'UploadImgs'
+  return {
+    icon: 'icon-upload',
+    label,
+    name,
+    rule() {
+      return {
+        type: name,
+        field: generateUUID(),
+        title: label,
+        info: '',
+        $required: false
+      }
+    },
+    props(_, { t }) {
+      return localeProps(t, name + '.props', [
+        makeRequiredRule(),
+        {
+          type: 'switch',
+          field: 'drag',
+          title: '拖拽上传',
+          value: false
+        },
+        {
+          type: 'select',
+          field: 'fileType',
+          title: '图片类型限制',
+          value: ['image/jpeg', 'image/png', 'image/gif'],
+          options: [
+            { label: 'image/apng', value: 'image/apng' },
+            { label: 'image/bmp', value: 'image/bmp' },
+            { label: 'image/gif', value: 'image/gif' },
+            { label: 'image/jpeg', value: 'image/jpeg' },
+            { label: 'image/pjpeg', value: 'image/pjpeg' },
+            { label: 'image/svg+xml', value: 'image/svg+xml' },
+            { label: 'image/tiff', value: 'image/tiff' },
+            { label: 'image/webp', value: 'image/webp' },
+            { label: 'image/x-icon', value: 'image/x-icon' }
+          ],
+          props: {
+            multiple: true
+          }
+        },
+        {
+          type: 'inputNumber',
+          field: 'fileSize',
+          title: '大小限制(MB)',
+          value: 5,
+          props: { min: 0 }
+        },
+        {
+          type: 'inputNumber',
+          field: 'limit',
+          title: '数量限制',
+          value: 5,
+          props: { min: 0 }
+        },
+        {
+          type: 'input',
+          field: 'height',
+          title: '组件高度',
+          value: '150px'
+        },
+        {
+          type: 'input',
+          field: 'width',
+          title: '组件宽度',
+          value: '150px'
+        },
+        {
+          type: 'input',
+          field: 'borderradius',
+          title: '组件边框圆角',
+          value: '8px'
+        }
+      ])
+    }
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/type/index.ts b/marketing-ui/admin-ui/src/components/FormCreate/src/type/index.ts
new file mode 100644
index 0000000..42dccc7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/type/index.ts
@@ -0,0 +1,50 @@
+import { Rule } from '@form-create/element-ui' //左侧拖拽按钮
+
+// 左侧拖拽按钮
+export interface MenuItem {
+  label: string
+  name: string
+  icon: string
+}
+
+// 左侧拖拽按钮分类
+export interface Menu {
+  title: string
+  name: string
+  list: MenuItem[]
+}
+
+export interface MenuList extends Array<Menu> {}
+
+// 拖拽组件的规则
+export interface DragRule {
+  icon: string
+  name: string
+  label: string
+  children?: string
+  inside?: true
+  drag?: true | String
+  dragBtn?: false
+  mask?: false
+
+  rule(): Rule
+
+  props(v: any, v1: any): Rule[]
+}
+
+// 通用下拉组件 Props 类型
+export interface ApiSelectProps {
+  name: string // 组件名称
+  labelField?: string // 选项标签
+  valueField?: string // 选项的值
+  url?: string // url 接口
+  isDict?: boolean // 是否字典选择器
+}
+
+// 选择组件规则配置类型
+export interface SelectRuleOption {
+  label: string // label 名称
+  name: string // 组件名称
+  icon: string // 组件图标
+  props?: any[] // 组件规则
+}
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/useFormCreateDesigner.ts b/marketing-ui/admin-ui/src/components/FormCreate/src/useFormCreateDesigner.ts
new file mode 100644
index 0000000..53fee78
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/useFormCreateDesigner.ts
@@ -0,0 +1,100 @@
+import {
+  useDictSelectRule,
+  useEditorRule,
+  useSelectRule,
+  useUploadFileRule,
+  useUploadImgRule,
+  useUploadImgsRule
+} from './config'
+import { Ref } from 'vue'
+import { Menu } from '@/components/FormCreate/src/type'
+import { apiSelectRule } from '@/components/FormCreate/src/config/selectRule'
+
+/**
+ * 表单设计器增强 hook
+ * 新增
+ * - 文件上传
+ * - 单图上传
+ * - 多图上传
+ * - 字典选择器
+ * - 用户选择器
+ * - 部门选择器
+ * - 富文本
+ */
+export const useFormCreateDesigner = async (designer: Ref) => {
+  const editorRule = useEditorRule()
+  const uploadFileRule = useUploadFileRule()
+  const uploadImgRule = useUploadImgRule()
+  const uploadImgsRule = useUploadImgsRule()
+
+  /**
+   * 构建表单组件
+   */
+  const buildFormComponents = () => {
+    // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
+    designer.value?.removeMenuItem('upload')
+    // 移除自带的富文本组件规则，使用 editorRule 替代
+    designer.value?.removeMenuItem('fc-editor')
+    const components = [editorRule, uploadFileRule, uploadImgRule, uploadImgsRule]
+    components.forEach((component) => {
+      // 插入组件规则
+      designer.value?.addComponent(component)
+      // 插入拖拽按钮到 `main` 分类下
+      designer.value?.appendMenuItem('main', {
+        icon: component.icon,
+        name: component.name,
+        label: component.label
+      })
+    })
+  }
+
+  const userSelectRule = useSelectRule({
+    name: 'UserSelect',
+    label: '用户选择器',
+    icon: 'icon-user-o'
+  })
+  const deptSelectRule = useSelectRule({
+    name: 'DeptSelect',
+    label: '部门选择器',
+    icon: 'icon-address-card-o'
+  })
+  const dictSelectRule = useDictSelectRule()
+  const apiSelectRule0 = useSelectRule({
+    name: 'ApiSelect',
+    label: '接口选择器',
+    icon: 'icon-server',
+    props: [...apiSelectRule]
+  })
+
+  /**
+   * 构建系统字段菜单
+   */
+  const buildSystemMenu = () => {
+    // 移除自带的下拉选择器组件，使用 currencySelectRule 替代
+    // designer.value?.removeMenuItem('select')
+    // designer.value?.removeMenuItem('radio')
+    // designer.value?.removeMenuItem('checkbox')
+    const components = [userSelectRule, deptSelectRule, dictSelectRule, apiSelectRule0]
+    const menu: Menu = {
+      name: 'system',
+      title: '系统字段',
+      list: components.map((component) => {
+        // 插入组件规则
+        designer.value?.addComponent(component)
+        // 插入拖拽按钮到 `system` 分类下
+        return {
+          icon: component.icon,
+          name: component.name,
+          label: component.label
+        }
+      })
+    }
+    designer.value?.addMenu(menu)
+  }
+
+  onMounted(async () => {
+    await nextTick()
+    buildFormComponents()
+    buildSystemMenu()
+  })
+}
diff --git a/marketing-ui/admin-ui/src/components/FormCreate/src/utils/index.ts b/marketing-ui/admin-ui/src/components/FormCreate/src/utils/index.ts
new file mode 100644
index 0000000..a2b3e67
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/FormCreate/src/utils/index.ts
@@ -0,0 +1,61 @@
+export function makeRequiredRule() {
+  return {
+    type: 'Required',
+    field: 'formCreate$required',
+    title: '是否必填'
+  }
+}
+
+export const localeProps = (t, prefix, rules) => {
+  return rules.map((rule) => {
+    if (rule.field === 'formCreate$required') {
+      rule.title = t('props.required') || rule.title
+    } else if (rule.field && rule.field !== '_optionType') {
+      rule.title = t('components.' + prefix + '.' + rule.field) || rule.title
+    }
+    return rule
+  })
+}
+
+/**
+ * 解析表单组件的  field, title 等字段（递归，如果组件包含子组件）
+ * 
+ * @param rule  组件的生成规则 https://www.form-create.com/v3/guide/rule
+ * @param fields 解析后表单组件字段
+ * @param parentTitle  如果是子表单，子表单的标题，默认为空
+ */
+export const parseFormFields = (
+  rule: Record<string, any>,
+  fields: Array<Record<string, any>> = [],
+  parentTitle: string = ''
+) => {
+  const { type, field, $required, title: tempTitle, children } = rule
+  if (field && tempTitle) {
+    let title = tempTitle
+    if (parentTitle) {
+      title = `${parentTitle}.${tempTitle}`
+    }
+    let required = false
+    if ($required) {
+      required = true
+    }
+    fields.push({
+      field,
+      title,
+      type,
+      required
+    })
+    // TODO 子表单 需要处理子表单字段
+    // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
+    //   // 解析子表单的字段
+    //   rule.props.rule.forEach((item) => {
+    //     parseFields(item, fieldsPermission, title)
+    //   })
+    // }
+  }
+  if (children && Array.isArray(children)) {
+    children.forEach((rule) => {
+      parseFormFields(rule, fields)
+    })
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/Highlight/index.ts b/marketing-ui/admin-ui/src/components/Highlight/index.ts
new file mode 100644
index 0000000..3e2d9ed
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Highlight/index.ts
@@ -0,0 +1,3 @@
+import Highlight from './src/Highlight.vue'
+
+export { Highlight }
diff --git a/marketing-ui/admin-ui/src/components/Highlight/src/Highlight.vue b/marketing-ui/admin-ui/src/components/Highlight/src/Highlight.vue
new file mode 100644
index 0000000..ef923a9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Highlight/src/Highlight.vue
@@ -0,0 +1,65 @@
+<script lang="tsx">
+import { defineComponent, PropType, computed, h, unref } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+export default defineComponent({
+  name: 'Highlight',
+  props: {
+    tag: propTypes.string.def('span'),
+    keys: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    color: propTypes.string.def('var(--el-color-primary)')
+  },
+  emits: ['click'],
+  setup(props, { emit, slots }) {
+    const keyNodes = computed(() => {
+      return props.keys.map((key) => {
+        return h(
+          'span',
+          {
+            onClick: () => {
+              emit('click', key)
+            },
+            style: {
+              color: props.color,
+              cursor: 'pointer'
+            }
+          },
+          key
+        )
+      })
+    })
+
+    const parseText = (text: string) => {
+      props.keys.forEach((key, index) => {
+        const regexp = new RegExp(key, 'g')
+        text = text.replace(regexp, `{{${index}}}`)
+      })
+      return text.split(/{{|}}/)
+    }
+
+    const renderText = () => {
+      if (!slots?.default) return null
+      const node = slots?.default()[0].children
+
+      if (!node) {
+        return slots?.default()[0]
+      }
+
+      const textArray = parseText(node as string)
+      const regexp = /^[0-9]*$/
+      const nodes = textArray.map((t) => {
+        if (regexp.test(t)) {
+          return unref(keyNodes)[t] || t
+        }
+        return t
+      })
+      return h(props.tag, nodes)
+    }
+
+    return () => renderText()
+  }
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/IFrame/index.ts b/marketing-ui/admin-ui/src/components/IFrame/index.ts
new file mode 100644
index 0000000..9f8cf24
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/IFrame/index.ts
@@ -0,0 +1,3 @@
+import IFrame from './src/IFrame.vue'
+
+export { IFrame }
diff --git a/marketing-ui/admin-ui/src/components/IFrame/src/IFrame.vue b/marketing-ui/admin-ui/src/components/IFrame/src/IFrame.vue
new file mode 100644
index 0000000..64ffc0e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/IFrame/src/IFrame.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'IFrame' })
+
+const props = defineProps({
+  src: propTypes.string.def('')
+})
+const loading = ref(true)
+const frameRef = ref<HTMLElement | null>(null)
+const init = () => {
+  nextTick(() => {
+    loading.value = true
+    if (!frameRef.value) return
+    frameRef.value.onload = () => {
+      loading.value = false
+    }
+  })
+}
+onMounted(() => {
+  init()
+})
+watch(
+  () => props.src,
+  () => {
+    init()
+  }
+)
+</script>
+<template>
+  <div
+    v-loading="loading"
+    class="w-full h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-2px)]"
+  >
+    <iframe
+      ref="frameRef"
+      :src="props.src"
+      frameborder="0"
+      scrolling="auto"
+      height="100%"
+      width="100%"
+      allowfullscreen="true"
+      webkitallowfullscreen="true"
+      mozallowfullscreen="true"
+    ></iframe>
+  </div>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/Icon/index.ts b/marketing-ui/admin-ui/src/components/Icon/index.ts
new file mode 100644
index 0000000..33d1de3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Icon/index.ts
@@ -0,0 +1,4 @@
+import Icon from './src/Icon.vue'
+import IconSelect from './src/IconSelect.vue'
+
+export { Icon, IconSelect }
diff --git a/marketing-ui/admin-ui/src/components/Icon/src/Icon.vue b/marketing-ui/admin-ui/src/components/Icon/src/Icon.vue
new file mode 100644
index 0000000..7e2ec94
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Icon/src/Icon.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import Iconify from '@purge-icons/generated'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'Icon' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('icon')
+
+const props = defineProps({
+  // icon name
+  icon: propTypes.string,
+  // icon color
+  color: propTypes.string,
+  // icon size
+  size: propTypes.number.def(16),
+  // icon svg class
+  svgClass: propTypes.string.def('')
+})
+
+const elRef = ref<ElRef>(null)
+
+const isLocal = computed(() => props.icon?.startsWith('svg-icon:'))
+
+const symbolId = computed(() => {
+  return unref(isLocal) ? `#icon-${props.icon.split('svg-icon:')[1]}` : props.icon
+})
+
+const getIconifyStyle = computed(() => {
+  const { color, size } = props
+  return {
+    fontSize: `${size}px`,
+    height: '1em',
+    color
+  }
+})
+
+const getSvgClass = computed(() => {
+  const { svgClass } = props
+  return `iconify ${svgClass}`
+})
+
+const updateIcon = async (icon: string) => {
+  if (unref(isLocal)) return
+
+  const el = unref(elRef)
+  if (!el) return
+
+  await nextTick()
+
+  if (!icon) return
+
+  const svg = Iconify.renderSVG(icon, {})
+  if (svg) {
+    el.textContent = ''
+    el.appendChild(svg)
+  } else {
+    const span = document.createElement('span')
+    span.className = 'iconify'
+    span.dataset.icon = icon
+    el.textContent = ''
+    el.appendChild(span)
+  }
+}
+
+watch(
+  () => props.icon,
+  (icon: string) => {
+    updateIcon(icon)
+  }
+)
+</script>
+
+<template>
+  <ElIcon :class="prefixCls" :color="color" :size="size">
+    <svg v-if="isLocal" :class="getSvgClass">
+      <use :xlink:href="symbolId" />
+    </svg>
+
+    <span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle">
+      <span :class="getSvgClass" :data-icon="symbolId"></span>
+    </span>
+  </ElIcon>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/Icon/src/IconSelect.vue b/marketing-ui/admin-ui/src/components/Icon/src/IconSelect.vue
new file mode 100644
index 0000000..76cc6d5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Icon/src/IconSelect.vue
@@ -0,0 +1,239 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import { IconJson } from '@/components/Icon/src/data'
+
+defineOptions({ name: 'IconSelect' })
+
+type ParameterCSSProperties = (item?: string) => CSSProperties | undefined
+
+const props = defineProps({
+  modelValue: {
+    require: false,
+    type: String
+  },
+  clearable: {
+    require: false,
+    type: Boolean
+  }
+})
+const emit = defineEmits<{ (e: 'update:modelValue', v: string) }>()
+
+const visible = ref(false)
+const inputValue = toRef(props, 'modelValue')
+const iconList = ref(IconJson)
+const icon = ref('add-location')
+const currentActiveType = ref('ep:')
+// 深拷贝图标数据，前端做搜索
+const copyIconList = cloneDeep(iconList.value)
+
+const pageSize = ref(96)
+const currentPage = ref(1)
+
+// 搜索条件
+const filterValue = ref('')
+
+const tabsList = [
+  {
+    label: 'Element Plus',
+    name: 'ep:'
+  },
+  {
+    label: 'Font Awesome 4',
+    name: 'fa:'
+  },
+  {
+    label: 'Font Awesome 5 Solid',
+    name: 'fa-solid:'
+  }
+]
+
+const pageList = computed(() => {
+  if (currentPage.value === 1) {
+    return copyIconList[currentActiveType.value]
+      ?.filter((v) => v.includes(filterValue.value))
+      .slice(currentPage.value - 1, pageSize.value)
+  } else {
+    return copyIconList[currentActiveType.value]
+      ?.filter((v) => v.includes(filterValue.value))
+      .slice(
+        pageSize.value * (currentPage.value - 1),
+        pageSize.value * (currentPage.value - 1) + pageSize.value
+      )
+  }
+})
+const iconCount = computed(() => {
+  return copyIconList[currentActiveType.value] == undefined
+    ? 0
+    : copyIconList[currentActiveType.value].length
+})
+
+const iconItemStyle = computed((): ParameterCSSProperties => {
+  return (item) => {
+    if (inputValue.value === currentActiveType.value + item) {
+      return {
+        borderColor: 'var(--el-color-primary)',
+        color: 'var(--el-color-primary)'
+      }
+    }
+  }
+})
+
+function handleClick({ props }) {
+  currentPage.value = 1
+  currentActiveType.value = props.name
+  emit('update:modelValue', currentActiveType.value + iconList.value[currentActiveType.value][0])
+  icon.value = iconList.value[currentActiveType.value][0]
+}
+
+function onChangeIcon(item) {
+  icon.value = item
+  emit('update:modelValue', currentActiveType.value + item)
+  visible.value = false
+}
+
+function onCurrentChange(page) {
+  currentPage.value = page
+}
+
+function clearIcon() {
+  icon.value = ''
+  emit('update:modelValue', '')
+  visible.value = false
+}
+
+watch(
+  () => {
+    return props.modelValue
+  },
+  () => {
+    if (props.modelValue && props.modelValue.indexOf(':') >= 0) {
+      currentActiveType.value = props.modelValue.substring(0, props.modelValue.indexOf(':') + 1)
+      icon.value = props.modelValue.substring(props.modelValue.indexOf(':') + 1)
+    }
+  }
+)
+watch(
+  () => {
+    return filterValue.value
+  },
+  () => {
+    currentPage.value = 1
+  }
+)
+</script>
+
+<template>
+  <div class="selector">
+    <ElInput v-model="inputValue" @click="visible = !visible" :clearable="props.clearable" @clear="clearIcon">
+      <template #append>
+        <ElPopover
+          :popper-options="{
+            placement: 'auto'
+          }"
+          :visible="visible"
+          :width="355"
+          popper-class="pure-popper"
+          trigger="click"
+        >
+          <template #reference>
+            <div
+              class="h-32px w-40px flex cursor-pointer items-center justify-center"
+              @click="visible = !visible"
+            >
+              <Icon :icon="currentActiveType + icon" />
+            </div>
+          </template>
+
+          <ElInput v-model="filterValue" class="p-2" clearable placeholder="搜索图标" />
+          <ElDivider border-style="dashed" />
+
+          <ElTabs v-model="currentActiveType" @tab-click="handleClick">
+            <ElTabPane
+              v-for="(pane, index) in tabsList"
+              :key="index"
+              :label="pane.label"
+              :name="pane.name"
+            >
+              <ElDivider border-style="dashed" class="tab-divider" />
+              <ElScrollbar height="220px">
+                <ul class="ml-2 flex flex-wrap">
+                  <li
+                    v-for="(item, key) in pageList"
+                    :key="key"
+                    :style="iconItemStyle(item)"
+                    :title="item"
+                    class="icon-item mr-2 mt-1 w-1/10 flex cursor-pointer items-center justify-center border border-solid p-2"
+                    @click="onChangeIcon(item)"
+                  >
+                    <Icon :icon="currentActiveType + item" />
+                  </li>
+                </ul>
+              </ElScrollbar>
+            </ElTabPane>
+          </ElTabs>
+          <ElDivider border-style="dashed" />
+
+          <ElPagination
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="iconCount"
+            background
+            class="h-10 flex items-center justify-center"
+            layout="prev, pager, next"
+            size="small"
+            @current-change="onCurrentChange"
+          />
+        </ElPopover>
+      </template>
+    </ElInput>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-divider--horizontal {
+  margin: 1px auto !important;
+}
+
+.tab-divider.el-divider--horizontal {
+  margin: 0 !important;
+}
+
+.icon-item {
+  &:hover {
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+    transform: scaleX(1.05);
+    transition: all 0.4s;
+  }
+}
+
+:deep(.el-tabs__nav-next) {
+  font-size: 15px;
+  line-height: 32px;
+  box-shadow: -5px 0 5px -6px #ccc;
+}
+
+:deep(.el-tabs__nav-prev) {
+  font-size: 15px;
+  line-height: 32px;
+  box-shadow: 5px 0 5px -6px #ccc;
+}
+
+:deep(.el-input-group__append) {
+  padding: 0;
+}
+
+:deep(.el-tabs__item) {
+  height: 30px;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 30px;
+}
+
+:deep(.el-tabs__header),
+:deep(.el-tabs__nav-wrap) {
+  position: static;
+  margin: 0;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Icon/src/data.ts b/marketing-ui/admin-ui/src/components/Icon/src/data.ts
new file mode 100644
index 0000000..2a4ed5a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Icon/src/data.ts
@@ -0,0 +1,1961 @@
+export const IconJson = {
+  'ep:': [
+    'add-location',
+    'aim',
+    'alarm-clock',
+    'apple',
+    'arrow-down',
+    'arrow-down-bold',
+    'arrow-left',
+    'arrow-left-bold',
+    'arrow-right',
+    'arrow-right-bold',
+    'arrow-up',
+    'arrow-up-bold',
+    'avatar',
+    'back',
+    'baseball',
+    'basketball',
+    'bell',
+    'bell-filled',
+    'bicycle',
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+    'bowl',
+    'box',
+    'briefcase',
+    'brush',
+    'brush-filled',
+    'burger',
+    'calendar',
+    'camera',
+    'camera-filled',
+    'caret-bottom',
+    'caret-left',
+    'caret-right',
+    'caret-top',
+    'cellphone',
+    'chat-dot-round',
+    'chat-dot-square',
+    'chat-line-round',
+    'chat-line-square',
+    'chat-round',
+    'chat-square',
+    'check',
+    'checked',
+    'cherry',
+    'chicken',
+    'circle-check',
+    'circle-check-filled',
+    'circle-close',
+    'circle-close-filled',
+    'circle-plus',
+    'circle-plus-filled',
+    'clock',
+    'close',
+    'close-bold',
+    'cloudy',
+    'coffee',
+    'coffee-cup',
+    'coin',
+    'cold-drink',
+    'collection',
+    'collection-tag',
+    'comment',
+    'compass',
+    'connection',
+    'coordinate',
+    'copy-document',
+    'cpu',
+    'credit-card',
+    'crop',
+    'd-arrow-left',
+    'd-arrow-right',
+    'd-caret',
+    'data-analysis',
+    'data-board',
+    'data-line',
+    'delete',
+    'delete-filled',
+    'delete-location',
+    'dessert',
+    'discount',
+    'dish',
+    'dish-dot',
+    'document',
+    'document-add',
+    'document-checked',
+    'document-copy',
+    'document-delete',
+    'document-remove',
+    'download',
+    'drizzling',
+    'edit',
+    'edit-pen',
+    'eleme',
+    'eleme-filled',
+    'expand',
+    'failed',
+    'female',
+    'files',
+    'film',
+    'filter',
+    'finished',
+    'first-aid-kit',
+    'flag',
+    'fold',
+    'folder',
+    'folder-add',
+    'folder-checked',
+    'folder-delete',
+    'folder-opened',
+    'folder-remove',
+    'food',
+    'football',
+    'fork-spoon',
+    'fries',
+    'full-screen',
+    'goblet',
+    'goblet-full',
+    'goblet-square',
+    'goblet-square-full',
+    'goods',
+    'goods-filled',
+    'grape',
+    'grid',
+    'guide',
+    'headset',
+    'help',
+    'help-filled',
+    'histogram',
+    'home-filled',
+    'hot-water',
+    'house',
+    'ice-cream',
+    'ice-cream-round',
+    'ice-cream-square',
+    'ice-drink',
+    'ice-tea',
+    'info-filled',
+    'iphone',
+    'key',
+    'knife-fork',
+    'lightning',
+    'link',
+    'list',
+    'loading',
+    'location',
+    'location-filled',
+    'location-information',
+    'lock',
+    'lollipop',
+    'magic-stick',
+    'magnet',
+    'male',
+    'management',
+    'map-location',
+    'medal',
+    'menu',
+    'message',
+    'message-box',
+    'mic',
+    'microphone',
+    'milk-tea',
+    'minus',
+    'money',
+    'monitor',
+    'moon',
+    'moon-night',
+    'more',
+    'more-filled',
+    'mostly-cloudy',
+    'mouse',
+    'mug',
+    'mute',
+    'mute-notification',
+    'no-smoking',
+    'notebook',
+    'notification',
+    'odometer',
+    'office-building',
+    'open',
+    'operation',
+    'opportunity',
+    'orange',
+    'paperclip',
+    'partly-cloudy',
+    'pear',
+    'phone',
+    'phone-filled',
+    'picture',
+    'picture-filled',
+    'picture-rounded',
+    'pie-chart',
+    'place',
+    'platform',
+    'plus',
+    'pointer',
+    'position',
+    'postcard',
+    'pouring',
+    'present',
+    'price-tag',
+    'printer',
+    'promotion',
+    'question-filled',
+    'rank',
+    'reading',
+    'reading-lamp',
+    'refresh',
+    'refresh-left',
+    'refresh-right',
+    'refrigerator',
+    'remove',
+    'remove-filled',
+    'right',
+    'scale-to-original',
+    'school',
+    'scissor',
+    'search',
+    'select',
+    'sell',
+    'semi-select',
+    'service',
+    'set-up',
+    'setting',
+    'share',
+    'ship',
+    'shop',
+    'shopping-bag',
+    'shopping-cart',
+    'shopping-cart-full',
+    'smoking',
+    'soccer',
+    'sold-out',
+    'sort',
+    'sort-down',
+    'sort-up',
+    'stamp',
+    'star',
+    'star-filled',
+    'stopwatch',
+    'success-filled',
+    'sugar',
+    'suitcase',
+    'sunny',
+    'sunrise',
+    'sunset',
+    'switch',
+    'switch-button',
+    'takeaway-box',
+    'ticket',
+    'tickets',
+    'timer',
+    'toilet-paper',
+    'tools',
+    'top',
+    'top-left',
+    'top-right',
+    'trend-charts',
+    'trophy',
+    'turn-off',
+    'umbrella',
+    'unlock',
+    'upload',
+    'upload-filled',
+    'user',
+    'user-filled',
+    'van',
+    'video-camera',
+    'video-camera-filled',
+    'video-pause',
+    'video-play',
+    'view',
+    'wallet',
+    'wallet-filled',
+    'warning',
+    'warning-filled',
+    'watch',
+    'watermelon',
+    'wind-power',
+    'zoom-in',
+    'zoom-out'
+  ],
+  'fa:': [
+    '500px',
+    'address-book',
+    'address-book-o',
+    'address-card',
+    'address-card-o',
+    'adjust',
+    'adn',
+    'align-center',
+    'align-justify',
+    'align-left',
+    'amazon',
+    'ambulance',
+    'american-sign-language-interpreting',
+    'anchor',
+    'android',
+    'angellist',
+    'angle-double-left',
+    'angle-double-up',
+    'angle-down',
+    'angle-left',
+    'angle-up',
+    'apple',
+    'archive',
+    'area-chart',
+    'arrow-circle-left',
+    'arrow-circle-o-left',
+    'arrow-circle-o-up',
+    'arrow-circle-up',
+    'arrow-left',
+    'arrow-up',
+    'arrows',
+    'arrows-alt',
+    'arrows-h',
+    'arrows-v',
+    'assistive-listening-systems',
+    'asterisk',
+    'at',
+    'audio-description',
+    'automobile',
+    'backward',
+    'balance-scale',
+    'ban',
+    'bandcamp',
+    'bank',
+    'bar-chart',
+    'barcode',
+    'bars',
+    'bath',
+    'battery',
+    'battery-0',
+    'battery-1',
+    'battery-2',
+    'battery-3',
+    'bed',
+    'beer',
+    'behance',
+    'behance-square',
+    'bell',
+    'bell-o',
+    'bell-slash',
+    'bell-slash-o',
+    'bicycle',
+    'binoculars',
+    'birthday-cake',
+    'bitbucket',
+    'bitbucket-square',
+    'bitcoin',
+    'black-tie',
+    'blind',
+    'bluetooth',
+    'bluetooth-b',
+    'bold',
+    'bolt',
+    'bomb',
+    'book',
+    'bookmark',
+    'bookmark-o',
+    'braille',
+    'briefcase',
+    'bug',
+    'building',
+    'building-o',
+    'bullhorn',
+    'bullseye',
+    'bus',
+    'buysellads',
+    'cab',
+    'calculator',
+    'calendar',
+    'calendar-check-o',
+    'calendar-minus-o',
+    'calendar-o',
+    'calendar-plus-o',
+    'calendar-times-o',
+    'camera',
+    'camera-retro',
+    'caret-down',
+    'caret-left',
+    'caret-square-o-left',
+    'caret-square-o-up',
+    'caret-up',
+    'cart-arrow-down',
+    'cart-plus',
+    'cc',
+    'cc-amex',
+    'cc-diners-club',
+    'cc-discover',
+    'cc-jcb',
+    'cc-mastercard',
+    'cc-paypal',
+    'cc-stripe',
+    'cc-visa',
+    'certificate',
+    'chain',
+    'chain-broken',
+    'check',
+    'check-circle',
+    'check-circle-o',
+    'check-square',
+    'check-square-o',
+    'chevron-circle-left',
+    'chevron-circle-up',
+    'chevron-down',
+    'chevron-left',
+    'chevron-up',
+    'child',
+    'chrome',
+    'circle',
+    'circle-o',
+    'circle-o-notch',
+    'circle-thin',
+    'clipboard',
+    'clock-o',
+    'clone',
+    'close',
+    'cloud',
+    'cloud-download',
+    'cloud-upload',
+    'cny',
+    'code',
+    'code-fork',
+    'codepen',
+    'codiepie',
+    'coffee',
+    'cog',
+    'cogs',
+    'columns',
+    'comment',
+    'comment-o',
+    'commenting',
+    'commenting-o',
+    'comments',
+    'comments-o',
+    'compass',
+    'compress',
+    'connectdevelop',
+    'contao',
+    'copy',
+    'copyright',
+    'creative-commons',
+    'credit-card',
+    'credit-card-alt',
+    'crop',
+    'crosshairs',
+    'css3',
+    'cube',
+    'cubes',
+    'cut',
+    'cutlery',
+    'dashboard',
+    'dashcube',
+    'database',
+    'deaf',
+    'dedent',
+    'delicious',
+    'desktop',
+    'deviantart',
+    'diamond',
+    'digg',
+    'dollar',
+    'dot-circle-o',
+    'download',
+    'dribbble',
+    'drivers-license',
+    'drivers-license-o',
+    'dropbox',
+    'drupal',
+    'edge',
+    'edit',
+    'eercast',
+    'eject',
+    'ellipsis-h',
+    'ellipsis-v',
+    'empire',
+    'envelope',
+    'envelope-o',
+    'envelope-open',
+    'envelope-open-o',
+    'envelope-square',
+    'envira',
+    'eraser',
+    'etsy',
+    'eur',
+    'exchange',
+    'exclamation',
+    'exclamation-circle',
+    'exclamation-triangle',
+    'expand',
+    'expeditedssl',
+    'external-link',
+    'external-link-square',
+    'eye',
+    'eye-slash',
+    'eyedropper',
+    'fa',
+    'facebook',
+    'facebook-official',
+    'facebook-square',
+    'fast-backward',
+    'fax',
+    'feed',
+    'female',
+    'fighter-jet',
+    'file',
+    'file-archive-o',
+    'file-audio-o',
+    'file-code-o',
+    'file-excel-o',
+    'file-image-o',
+    'file-movie-o',
+    'file-o',
+    'file-pdf-o',
+    'file-powerpoint-o',
+    'file-text',
+    'file-text-o',
+    'file-word-o',
+    'film',
+    'filter',
+    'fire',
+    'fire-extinguisher',
+    'firefox',
+    'first-order',
+    'flag',
+    'flag-checkered',
+    'flag-o',
+    'flask',
+    'flickr',
+    'floppy-o',
+    'folder',
+    'folder-o',
+    'folder-open',
+    'folder-open-o',
+    'font',
+    'fonticons',
+    'fort-awesome',
+    'forumbee',
+    'foursquare',
+    'free-code-camp',
+    'frown-o',
+    'futbol-o',
+    'gamepad',
+    'gavel',
+    'gbp',
+    'genderless',
+    'get-pocket',
+    'gg',
+    'gg-circle',
+    'gift',
+    'git',
+    'git-square',
+    'github',
+    'github-alt',
+    'github-square',
+    'gitlab',
+    'gittip',
+    'glass',
+    'glide',
+    'glide-g',
+    'globe',
+    'google',
+    'google-plus',
+    'google-plus-circle',
+    'google-plus-square',
+    'google-wallet',
+    'graduation-cap',
+    'grav',
+    'group',
+    'h-square',
+    'hacker-news',
+    'hand-grab-o',
+    'hand-lizard-o',
+    'hand-o-left',
+    'hand-o-up',
+    'hand-paper-o',
+    'hand-peace-o',
+    'hand-pointer-o',
+    'hand-scissors-o',
+    'hand-spock-o',
+    'handshake-o',
+    'hashtag',
+    'hdd-o',
+    'header',
+    'headphones',
+    'heart',
+    'heart-o',
+    'heartbeat',
+    'history',
+    'home',
+    'hospital-o',
+    'hourglass',
+    'hourglass-1',
+    'hourglass-2',
+    'hourglass-3',
+    'hourglass-o',
+    'houzz',
+    'html5',
+    'i-cursor',
+    'id-badge',
+    'ils',
+    'image',
+    'imdb',
+    'inbox',
+    'indent',
+    'industry',
+    'info',
+    'info-circle',
+    'inr',
+    'instagram',
+    'internet-explorer',
+    'intersex',
+    'ioxhost',
+    'italic',
+    'joomla',
+    'jsfiddle',
+    'key',
+    'keyboard-o',
+    'krw',
+    'language',
+    'laptop',
+    'lastfm',
+    'lastfm-square',
+    'leaf',
+    'leanpub',
+    'lemon-o',
+    'level-up',
+    'life-bouy',
+    'lightbulb-o',
+    'line-chart',
+    'linkedin',
+    'linkedin-square',
+    'linode',
+    'linux',
+    'list',
+    'list-alt',
+    'list-ol',
+    'list-ul',
+    'location-arrow',
+    'lock',
+    'long-arrow-left',
+    'long-arrow-up',
+    'low-vision',
+    'magic',
+    'magnet',
+    'mail-forward',
+    'mail-reply',
+    'mail-reply-all',
+    'male',
+    'map',
+    'map-marker',
+    'map-o',
+    'map-pin',
+    'map-signs',
+    'mars',
+    'mars-double',
+    'mars-stroke',
+    'mars-stroke-h',
+    'mars-stroke-v',
+    'maxcdn',
+    'meanpath',
+    'medium',
+    'medkit',
+    'meetup',
+    'meh-o',
+    'mercury',
+    'microchip',
+    'microphone',
+    'microphone-slash',
+    'minus',
+    'minus-circle',
+    'minus-square',
+    'minus-square-o',
+    'mixcloud',
+    'mobile',
+    'modx',
+    'money',
+    'moon-o',
+    'motorcycle',
+    'mouse-pointer',
+    'music',
+    'neuter',
+    'newspaper-o',
+    'object-group',
+    'object-ungroup',
+    'odnoklassniki',
+    'odnoklassniki-square',
+    'opencart',
+    'openid',
+    'opera',
+    'optin-monster',
+    'pagelines',
+    'paint-brush',
+    'paper-plane',
+    'paper-plane-o',
+    'paperclip',
+    'paragraph',
+    'pause',
+    'pause-circle',
+    'pause-circle-o',
+    'paw',
+    'paypal',
+    'pencil',
+    'pencil-square',
+    'percent',
+    'phone',
+    'phone-square',
+    'pie-chart',
+    'pied-piper',
+    'pied-piper-alt',
+    'pied-piper-pp',
+    'pinterest',
+    'pinterest-p',
+    'pinterest-square',
+    'plane',
+    'play',
+    'play-circle',
+    'play-circle-o',
+    'plug',
+    'plus',
+    'plus-circle',
+    'plus-square',
+    'plus-square-o',
+    'podcast',
+    'power-off',
+    'print',
+    'product-hunt',
+    'puzzle-piece',
+    'qq',
+    'qrcode',
+    'question',
+    'question-circle',
+    'question-circle-o',
+    'quora',
+    'quote-left',
+    'quote-right',
+    'ra',
+    'random',
+    'ravelry',
+    'recycle',
+    'reddit',
+    'reddit-alien',
+    'reddit-square',
+    'refresh',
+    'registered',
+    'renren',
+    'repeat',
+    'retweet',
+    'road',
+    'rocket',
+    'rotate-left',
+    'rouble',
+    'rss-square',
+    'safari',
+    'scribd',
+    'search',
+    'search-minus',
+    'search-plus',
+    'sellsy',
+    'server',
+    'share-alt',
+    'share-alt-square',
+    'share-square',
+    'share-square-o',
+    'shield',
+    'ship',
+    'shirtsinbulk',
+    'shopping-bag',
+    'shopping-basket',
+    'shopping-cart',
+    'shower',
+    'sign-in',
+    'sign-language',
+    'sign-out',
+    'signal',
+    'simplybuilt',
+    'sitemap',
+    'skyatlas',
+    'skype',
+    'slack',
+    'sliders',
+    'slideshare',
+    'smile-o',
+    'snapchat',
+    'snapchat-ghost',
+    'snapchat-square',
+    'snowflake-o',
+    'sort',
+    'sort-alpha-asc',
+    'sort-alpha-desc',
+    'sort-amount-asc',
+    'sort-amount-desc',
+    'sort-asc',
+    'sort-numeric-asc',
+    'sort-numeric-desc',
+    'soundcloud',
+    'space-shuttle',
+    'spinner',
+    'spoon',
+    'spotify',
+    'square',
+    'square-o',
+    'stack-exchange',
+    'stack-overflow',
+    'star',
+    'star-half',
+    'star-half-empty',
+    'star-o',
+    'steam',
+    'steam-square',
+    'step-backward',
+    'stethoscope',
+    'sticky-note',
+    'sticky-note-o',
+    'stop',
+    'stop-circle',
+    'stop-circle-o',
+    'street-view',
+    'strikethrough',
+    'stumbleupon',
+    'stumbleupon-circle',
+    'subscript',
+    'subway',
+    'suitcase',
+    'sun-o',
+    'superpowers',
+    'superscript',
+    'table',
+    'tablet',
+    'tag',
+    'tags',
+    'tasks',
+    'telegram',
+    'television',
+    'tencent-weibo',
+    'terminal',
+    'text-height',
+    'text-width',
+    'th',
+    'th-large',
+    'th-list',
+    'themeisle',
+    'thermometer',
+    'thermometer-0',
+    'thermometer-1',
+    'thermometer-2',
+    'thermometer-3',
+    'thumb-tack',
+    'thumbs-down',
+    'thumbs-o-up',
+    'thumbs-up',
+    'ticket',
+    'times-circle',
+    'times-circle-o',
+    'times-rectangle',
+    'times-rectangle-o',
+    'tint',
+    'toggle-off',
+    'toggle-on',
+    'trademark',
+    'train',
+    'transgender-alt',
+    'trash',
+    'trash-o',
+    'tree',
+    'trello',
+    'tripadvisor',
+    'trophy',
+    'truck',
+    'try',
+    'tty',
+    'tumblr',
+    'tumblr-square',
+    'twitch',
+    'twitter',
+    'twitter-square',
+    'umbrella',
+    'underline',
+    'universal-access',
+    'unlock',
+    'unlock-alt',
+    'upload',
+    'usb',
+    'user',
+    'user-circle',
+    'user-circle-o',
+    'user-md',
+    'user-o',
+    'user-plus',
+    'user-secret',
+    'user-times',
+    'venus',
+    'venus-double',
+    'venus-mars',
+    'viacoin',
+    'viadeo',
+    'viadeo-square',
+    'video-camera',
+    'vimeo',
+    'vimeo-square',
+    'vine',
+    'vk',
+    'volume-control-phone',
+    'volume-down',
+    'volume-off',
+    'volume-up',
+    'wechat',
+    'weibo',
+    'whatsapp',
+    'wheelchair',
+    'wheelchair-alt',
+    'wifi',
+    'wikipedia-w',
+    'window-maximize',
+    'window-minimize',
+    'window-restore',
+    'windows',
+    'wordpress',
+    'wpbeginner',
+    'wpexplorer',
+    'wpforms',
+    'wrench',
+    'xing',
+    'xing-square',
+    'y-combinator',
+    'yahoo',
+    'yelp',
+    'yoast',
+    'youtube',
+    'youtube-play',
+    'youtube-square'
+  ],
+  'fa-solid:': [
+    'abacus',
+    'ad',
+    'address-book',
+    'address-card',
+    'adjust',
+    'air-freshener',
+    'align-center',
+    'align-justify',
+    'align-left',
+    'align-right',
+    'allergies',
+    'ambulance',
+    'american-sign-language-interpreting',
+    'anchor',
+    'angle-double-down',
+    'angle-double-left',
+    'angle-double-right',
+    'angle-double-up',
+    'angle-down',
+    'angle-left',
+    'angle-right',
+    'angle-up',
+    'angry',
+    'ankh',
+    'apple-alt',
+    'archive',
+    'archway',
+    'arrow-alt-circle-down',
+    'arrow-alt-circle-left',
+    'arrow-alt-circle-right',
+    'arrow-alt-circle-up',
+    'arrow-circle-down',
+    'arrow-circle-left',
+    'arrow-circle-right',
+    'arrow-circle-up',
+    'arrow-down',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'arrows-alt',
+    'arrows-alt-h',
+    'arrows-alt-v',
+    'assistive-listening-systems',
+    'asterisk',
+    'at',
+    'atlas',
+    'atom',
+    'audio-description',
+    'award',
+    'baby',
+    'baby-carriage',
+    'backspace',
+    'backward',
+    'bacon',
+    'bacteria',
+    'bacterium',
+    'bahai',
+    'balance-scale',
+    'balance-scale-left',
+    'balance-scale-right',
+    'ban',
+    'band-aid',
+    'barcode',
+    'bars',
+    'baseball-ball',
+    'basketball-ball',
+    'bath',
+    'battery-empty',
+    'battery-full',
+    'battery-half',
+    'battery-quarter',
+    'battery-three-quarters',
+    'bed',
+    'beer',
+    'bell',
+    'bell-slash',
+    'bezier-curve',
+    'bible',
+    'bicycle',
+    'biking',
+    'binoculars',
+    'biohazard',
+    'birthday-cake',
+    'blender',
+    'blender-phone',
+    'blind',
+    'blog',
+    'bold',
+    'bolt',
+    'bomb',
+    'bone',
+    'bong',
+    'book',
+    'book-dead',
+    'book-medical',
+    'book-open',
+    'book-reader',
+    'bookmark',
+    'border-all',
+    'border-none',
+    'border-style',
+    'bowling-ball',
+    'box',
+    'box-open',
+    'box-tissue',
+    'boxes',
+    'braille',
+    'brain',
+    'bread-slice',
+    'briefcase',
+    'briefcase-medical',
+    'broadcast-tower',
+    'broom',
+    'brush',
+    'bug',
+    'building',
+    'bullhorn',
+    'bullseye',
+    'burn',
+    'bus',
+    'bus-alt',
+    'business-time',
+    'calculator',
+    'calculator-alt',
+    'calendar',
+    'calendar-alt',
+    'calendar-check',
+    'calendar-day',
+    'calendar-minus',
+    'calendar-plus',
+    'calendar-times',
+    'calendar-week',
+    'camera',
+    'camera-retro',
+    'campground',
+    'candy-cane',
+    'cannabis',
+    'capsules',
+    'car',
+    'car-alt',
+    'car-battery',
+    'car-crash',
+    'car-side',
+    'caravan',
+    'caret-down',
+    'caret-left',
+    'caret-right',
+    'caret-square-down',
+    'caret-square-left',
+    'caret-square-right',
+    'caret-square-up',
+    'caret-up',
+    'carrot',
+    'cart-arrow-down',
+    'cart-plus',
+    'cash-register',
+    'cat',
+    'certificate',
+    'chair',
+    'chalkboard',
+    'chalkboard-teacher',
+    'charging-station',
+    'chart-area',
+    'chart-bar',
+    'chart-line',
+    'chart-pie',
+    'check',
+    'check-circle',
+    'check-double',
+    'check-square',
+    'cheese',
+    'chess',
+    'chess-bishop',
+    'chess-board',
+    'chess-king',
+    'chess-knight',
+    'chess-pawn',
+    'chess-queen',
+    'chess-rook',
+    'chevron-circle-down',
+    'chevron-circle-left',
+    'chevron-circle-right',
+    'chevron-circle-up',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'child',
+    'church',
+    'circle',
+    'circle-notch',
+    'city',
+    'clinic-medical',
+    'clipboard',
+    'clipboard-check',
+    'clipboard-list',
+    'clock',
+    'clone',
+    'closed-captioning',
+    'cloud',
+    'cloud-download-alt',
+    'cloud-meatball',
+    'cloud-moon',
+    'cloud-moon-rain',
+    'cloud-rain',
+    'cloud-showers-heavy',
+    'cloud-sun',
+    'cloud-sun-rain',
+    'cloud-upload-alt',
+    'cocktail',
+    'code',
+    'code-branch',
+    'coffee',
+    'cog',
+    'cogs',
+    'coins',
+    'columns',
+    'comment',
+    'comment-alt',
+    'comment-dollar',
+    'comment-dots',
+    'comment-medical',
+    'comment-slash',
+    'comments',
+    'comments-dollar',
+    'compact-disc',
+    'compass',
+    'compress',
+    'compress-alt',
+    'compress-arrows-alt',
+    'concierge-bell',
+    'cookie',
+    'cookie-bite',
+    'copy',
+    'copyright',
+    'couch',
+    'credit-card',
+    'crop',
+    'crop-alt',
+    'cross',
+    'crosshairs',
+    'crow',
+    'crown',
+    'crutch',
+    'cube',
+    'cubes',
+    'cut',
+    'database',
+    'deaf',
+    'democrat',
+    'desktop',
+    'dharmachakra',
+    'diagnoses',
+    'dice',
+    'dice-d20',
+    'dice-d6',
+    'dice-five',
+    'dice-four',
+    'dice-one',
+    'dice-six',
+    'dice-three',
+    'dice-two',
+    'digital-tachograph',
+    'directions',
+    'disease',
+    'divide',
+    'dizzy',
+    'dna',
+    'dog',
+    'dollar-sign',
+    'dolly',
+    'dolly-flatbed',
+    'donate',
+    'door-closed',
+    'door-open',
+    'dot-circle',
+    'dove',
+    'download',
+    'drafting-compass',
+    'dragon',
+    'draw-polygon',
+    'drum',
+    'drum-steelpan',
+    'drumstick-bite',
+    'dumbbell',
+    'dumpster',
+    'dumpster-fire',
+    'dungeon',
+    'edit',
+    'egg',
+    'eject',
+    'ellipsis-h',
+    'ellipsis-v',
+    'empty-set',
+    'envelope',
+    'envelope-open',
+    'envelope-open-text',
+    'envelope-square',
+    'equals',
+    'eraser',
+    'ethernet',
+    'euro-sign',
+    'exchange-alt',
+    'exclamation',
+    'exclamation-circle',
+    'exclamation-triangle',
+    'expand',
+    'expand-alt',
+    'expand-arrows-alt',
+    'external-link-alt',
+    'external-link-square-alt',
+    'eye',
+    'eye-dropper',
+    'eye-slash',
+    'fan',
+    'fast-backward',
+    'fast-forward',
+    'faucet',
+    'fax',
+    'feather',
+    'feather-alt',
+    'female',
+    'fighter-jet',
+    'file',
+    'file-alt',
+    'file-archive',
+    'file-audio',
+    'file-code',
+    'file-contract',
+    'file-csv',
+    'file-download',
+    'file-excel',
+    'file-export',
+    'file-image',
+    'file-import',
+    'file-invoice',
+    'file-invoice-dollar',
+    'file-medical',
+    'file-medical-alt',
+    'file-pdf',
+    'file-powerpoint',
+    'file-prescription',
+    'file-signature',
+    'file-upload',
+    'file-video',
+    'file-word',
+    'fill',
+    'fill-drip',
+    'film',
+    'filter',
+    'fingerprint',
+    'fire',
+    'fire-alt',
+    'fire-extinguisher',
+    'first-aid',
+    'fish',
+    'fist-raised',
+    'flag',
+    'flag-checkered',
+    'flag-usa',
+    'flask',
+    'flushed',
+    'folder',
+    'folder-minus',
+    'folder-open',
+    'folder-plus',
+    'font',
+    'football-ball',
+    'forward',
+    'frog',
+    'frown',
+    'frown-open',
+    'function',
+    'funnel-dollar',
+    'futbol',
+    'gamepad',
+    'gas-pump',
+    'gavel',
+    'gem',
+    'genderless',
+    'ghost',
+    'gift',
+    'gifts',
+    'glass-cheers',
+    'glass-martini',
+    'glass-martini-alt',
+    'glass-whiskey',
+    'glasses',
+    'globe',
+    'globe-africa',
+    'globe-americas',
+    'globe-asia',
+    'globe-europe',
+    'golf-ball',
+    'gopuram',
+    'graduation-cap',
+    'greater-than',
+    'greater-than-equal',
+    'grimace',
+    'grin',
+    'grin-alt',
+    'grin-beam',
+    'grin-beam-sweat',
+    'grin-hearts',
+    'grin-squint',
+    'grin-squint-tears',
+    'grin-stars',
+    'grin-tears',
+    'grin-tongue',
+    'grin-tongue-squint',
+    'grin-tongue-wink',
+    'grin-wink',
+    'grip-horizontal',
+    'grip-lines',
+    'grip-lines-vertical',
+    'grip-vertical',
+    'guitar',
+    'h-square',
+    'hamburger',
+    'hammer',
+    'hamsa',
+    'hand-holding',
+    'hand-holding-heart',
+    'hand-holding-medical',
+    'hand-holding-usd',
+    'hand-holding-water',
+    'hand-lizard',
+    'hand-middle-finger',
+    'hand-paper',
+    'hand-peace',
+    'hand-point-down',
+    'hand-point-left',
+    'hand-point-right',
+    'hand-point-up',
+    'hand-pointer',
+    'hand-rock',
+    'hand-scissors',
+    'hand-sparkles',
+    'hand-spock',
+    'hands',
+    'hands-helping',
+    'hands-wash',
+    'handshake',
+    'handshake-alt-slash',
+    'handshake-slash',
+    'hanukiah',
+    'hard-hat',
+    'hashtag',
+    'hat-cowboy',
+    'hat-cowboy-side',
+    'hat-wizard',
+    'hdd',
+    'head-side-cough',
+    'head-side-cough-slash',
+    'head-side-mask',
+    'head-side-virus',
+    'heading',
+    'headphones',
+    'headphones-alt',
+    'headset',
+    'heart',
+    'heart-broken',
+    'heartbeat',
+    'helicopter',
+    'highlighter',
+    'hiking',
+    'hippo',
+    'history',
+    'hockey-puck',
+    'holly-berry',
+    'home',
+    'horse',
+    'horse-head',
+    'hospital',
+    'hospital-alt',
+    'hospital-symbol',
+    'hospital-user',
+    'hot-tub',
+    'hotdog',
+    'hotel',
+    'hourglass',
+    'hourglass-end',
+    'hourglass-half',
+    'hourglass-start',
+    'house-damage',
+    'house-user',
+    'hryvnia',
+    'i-cursor',
+    'ice-cream',
+    'icicles',
+    'icons',
+    'id-badge',
+    'id-card',
+    'id-card-alt',
+    'igloo',
+    'image',
+    'images',
+    'inbox',
+    'indent',
+    'industry',
+    'infinity',
+    'info',
+    'info-circle',
+    'integral',
+    'intersection',
+    'italic',
+    'jedi',
+    'joint',
+    'journal-whills',
+    'kaaba',
+    'key',
+    'keyboard',
+    'khanda',
+    'kiss',
+    'kiss-beam',
+    'kiss-wink-heart',
+    'kiwi-bird',
+    'lambda',
+    'landmark',
+    'language',
+    'laptop',
+    'laptop-code',
+    'laptop-house',
+    'laptop-medical',
+    'laugh',
+    'laugh-beam',
+    'laugh-squint',
+    'laugh-wink',
+    'layer-group',
+    'leaf',
+    'lemon',
+    'less-than',
+    'less-than-equal',
+    'level-down-alt',
+    'level-up-alt',
+    'life-ring',
+    'lightbulb',
+    'link',
+    'lira-sign',
+    'list',
+    'list-alt',
+    'list-ol',
+    'list-ul',
+    'location-arrow',
+    'lock',
+    'lock-open',
+    'long-arrow-alt-down',
+    'long-arrow-alt-left',
+    'long-arrow-alt-right',
+    'long-arrow-alt-up',
+    'low-vision',
+    'luggage-cart',
+    'lungs',
+    'lungs-virus',
+    'magic',
+    'magnet',
+    'mail-bulk',
+    'male',
+    'map',
+    'map-marked',
+    'map-marked-alt',
+    'map-marker',
+    'map-marker-alt',
+    'map-pin',
+    'map-signs',
+    'marker',
+    'mars',
+    'mars-double',
+    'mars-stroke',
+    'mars-stroke-h',
+    'mars-stroke-v',
+    'mask',
+    'medal',
+    'medkit',
+    'meh',
+    'meh-blank',
+    'meh-rolling-eyes',
+    'memory',
+    'menorah',
+    'mercury',
+    'meteor',
+    'microchip',
+    'microphone',
+    'microphone-alt',
+    'microphone-alt-slash',
+    'microphone-slash',
+    'microscope',
+    'minus',
+    'minus-circle',
+    'minus-square',
+    'mitten',
+    'mobile',
+    'mobile-alt',
+    'money-bill',
+    'money-bill-alt',
+    'money-bill-wave',
+    'money-bill-wave-alt',
+    'money-check',
+    'money-check-alt',
+    'monument',
+    'moon',
+    'mortar-pestle',
+    'mosque',
+    'motorcycle',
+    'mountain',
+    'mouse',
+    'mouse-pointer',
+    'mug-hot',
+    'music',
+    'network-wired',
+    'neuter',
+    'newspaper',
+    'not-equal',
+    'notes-medical',
+    'object-group',
+    'object-ungroup',
+    'oil-can',
+    'om',
+    'omega',
+    'otter',
+    'outdent',
+    'pager',
+    'paint-brush',
+    'paint-roller',
+    'palette',
+    'pallet',
+    'paper-plane',
+    'paperclip',
+    'parachute-box',
+    'paragraph',
+    'parking',
+    'passport',
+    'pastafarianism',
+    'paste',
+    'pause',
+    'pause-circle',
+    'paw',
+    'peace',
+    'pen',
+    'pen-alt',
+    'pen-fancy',
+    'pen-nib',
+    'pen-square',
+    'pencil-alt',
+    'pencil-ruler',
+    'people-arrows',
+    'people-carry',
+    'pepper-hot',
+    'percent',
+    'percentage',
+    'person-booth',
+    'phone',
+    'phone-alt',
+    'phone-slash',
+    'phone-square',
+    'phone-square-alt',
+    'phone-volume',
+    'photo-video',
+    'pi',
+    'piggy-bank',
+    'pills',
+    'pizza-slice',
+    'place-of-worship',
+    'plane',
+    'plane-arrival',
+    'plane-departure',
+    'plane-slash',
+    'play',
+    'play-circle',
+    'plug',
+    'plus',
+    'plus-circle',
+    'plus-square',
+    'podcast',
+    'poll',
+    'poll-h',
+    'poo',
+    'poo-storm',
+    'poop',
+    'portrait',
+    'pound-sign',
+    'power-off',
+    'pray',
+    'praying-hands',
+    'prescription',
+    'prescription-bottle',
+    'prescription-bottle-alt',
+    'print',
+    'procedures',
+    'project-diagram',
+    'pump-medical',
+    'pump-soap',
+    'puzzle-piece',
+    'qrcode',
+    'question',
+    'question-circle',
+    'quidditch',
+    'quote-left',
+    'quote-right',
+    'quran',
+    'radiation',
+    'radiation-alt',
+    'rainbow',
+    'random',
+    'receipt',
+    'record-vinyl',
+    'recycle',
+    'redo',
+    'redo-alt',
+    'registered',
+    'remove-format',
+    'reply',
+    'reply-all',
+    'republican',
+    'restroom',
+    'retweet',
+    'ribbon',
+    'ring',
+    'road',
+    'robot',
+    'rocket',
+    'route',
+    'rss',
+    'rss-square',
+    'ruble-sign',
+    'ruler',
+    'ruler-combined',
+    'ruler-horizontal',
+    'ruler-vertical',
+    'running',
+    'rupee-sign',
+    'sad-cry',
+    'sad-tear',
+    'satellite',
+    'satellite-dish',
+    'save',
+    'school',
+    'screwdriver',
+    'scroll',
+    'sd-card',
+    'search',
+    'search-dollar',
+    'search-location',
+    'search-minus',
+    'search-plus',
+    'seedling',
+    'server',
+    'shapes',
+    'share',
+    'share-alt',
+    'share-alt-square',
+    'share-square',
+    'shekel-sign',
+    'shield-alt',
+    'shield-virus',
+    'ship',
+    'shipping-fast',
+    'shoe-prints',
+    'shopping-bag',
+    'shopping-basket',
+    'shopping-cart',
+    'shower',
+    'shuttle-van',
+    'sigma',
+    'sign',
+    'sign-in-alt',
+    'sign-language',
+    'sign-out-alt',
+    'signal',
+    'signal-alt',
+    'signal-alt-slash',
+    'signal-slash',
+    'signature',
+    'sim-card',
+    'sink',
+    'sitemap',
+    'skating',
+    'skiing',
+    'skiing-nordic',
+    'skull',
+    'skull-crossbones',
+    'slash',
+    'sleigh',
+    'sliders-h',
+    'smile',
+    'smile-beam',
+    'smile-wink',
+    'smog',
+    'smoking',
+    'smoking-ban',
+    'sms',
+    'snowboarding',
+    'snowflake',
+    'snowman',
+    'snowplow',
+    'soap',
+    'socks',
+    'solar-panel',
+    'sort',
+    'sort-alpha-down',
+    'sort-alpha-down-alt',
+    'sort-alpha-up',
+    'sort-alpha-up-alt',
+    'sort-amount-down',
+    'sort-amount-down-alt',
+    'sort-amount-up',
+    'sort-amount-up-alt',
+    'sort-down',
+    'sort-numeric-down',
+    'sort-numeric-down-alt',
+    'sort-numeric-up',
+    'sort-numeric-up-alt',
+    'sort-up',
+    'spa',
+    'space-shuttle',
+    'spell-check',
+    'spider',
+    'spinner',
+    'splotch',
+    'spray-can',
+    'square',
+    'square-full',
+    'square-root',
+    'square-root-alt',
+    'stamp',
+    'star',
+    'star-and-crescent',
+    'star-half',
+    'star-half-alt',
+    'star-of-david',
+    'star-of-life',
+    'step-backward',
+    'step-forward',
+    'stethoscope',
+    'sticky-note',
+    'stop',
+    'stop-circle',
+    'stopwatch',
+    'stopwatch-20',
+    'store',
+    'store-alt',
+    'store-alt-slash',
+    'store-slash',
+    'stream',
+    'street-view',
+    'strikethrough',
+    'stroopwafel',
+    'subscript',
+    'subway',
+    'suitcase',
+    'suitcase-rolling',
+    'sun',
+    'superscript',
+    'surprise',
+    'swatchbook',
+    'swimmer',
+    'swimming-pool',
+    'synagogue',
+    'sync',
+    'sync-alt',
+    'syringe',
+    'table',
+    'table-tennis',
+    'tablet',
+    'tablet-alt',
+    'tablets',
+    'tachometer-alt',
+    'tag',
+    'tags',
+    'tally',
+    'tape',
+    'tasks',
+    'taxi',
+    'teeth',
+    'teeth-open',
+    'temperature-high',
+    'temperature-low',
+    'tenge',
+    'terminal',
+    'text-height',
+    'text-width',
+    'th',
+    'th-large',
+    'th-list',
+    'theater-masks',
+    'thermometer',
+    'thermometer-empty',
+    'thermometer-full',
+    'thermometer-half',
+    'thermometer-quarter',
+    'thermometer-three-quarters',
+    'theta',
+    'thumbs-down',
+    'thumbs-up',
+    'thumbtack',
+    'ticket-alt',
+    'tilde',
+    'times',
+    'times-circle',
+    'tint',
+    'tint-slash',
+    'tired',
+    'toggle-off',
+    'toggle-on',
+    'toilet',
+    'toilet-paper',
+    'toilet-paper-slash',
+    'toolbox',
+    'tools',
+    'tooth',
+    'torah',
+    'torii-gate',
+    'tractor',
+    'trademark',
+    'traffic-light',
+    'trailer',
+    'train',
+    'tram',
+    'transgender',
+    'transgender-alt',
+    'trash',
+    'trash-alt',
+    'trash-restore',
+    'trash-restore-alt',
+    'tree',
+    'trophy',
+    'truck',
+    'truck-loading',
+    'truck-monster',
+    'truck-moving',
+    'truck-pickup',
+    'tshirt',
+    'tty',
+    'tv',
+    'umbrella',
+    'umbrella-beach',
+    'underline',
+    'undo',
+    'undo-alt',
+    'union',
+    'universal-access',
+    'university',
+    'unlink',
+    'unlock',
+    'unlock-alt',
+    'upload',
+    'user',
+    'user-alt',
+    'user-alt-slash',
+    'user-astronaut',
+    'user-check',
+    'user-circle',
+    'user-clock',
+    'user-cog',
+    'user-edit',
+    'user-friends',
+    'user-graduate',
+    'user-injured',
+    'user-lock',
+    'user-md',
+    'user-minus',
+    'user-ninja',
+    'user-nurse',
+    'user-plus',
+    'user-secret',
+    'user-shield',
+    'user-slash',
+    'user-tag',
+    'user-tie',
+    'user-times',
+    'users',
+    'users-cog',
+    'users-slash',
+    'utensil-spoon',
+    'utensils',
+    'value-absolute',
+    'vector-square',
+    'venus',
+    'venus-double',
+    'venus-mars',
+    'vest',
+    'vest-patches',
+    'vial',
+    'vials',
+    'video',
+    'video-slash',
+    'vihara',
+    'virus',
+    'virus-slash',
+    'viruses',
+    'voicemail',
+    'volleyball-ball',
+    'volume',
+    'volume-down',
+    'volume-mute',
+    'volume-off',
+    'volume-slash',
+    'volume-up',
+    'vote-yea',
+    'vr-cardboard',
+    'walking',
+    'wallet',
+    'warehouse',
+    'water',
+    'wave-square',
+    'weight',
+    'weight-hanging',
+    'wheelchair',
+    'wifi',
+    'wifi-slash',
+    'wind',
+    'window-close',
+    'window-maximize',
+    'window-minimize',
+    'window-restore',
+    'wine-bottle',
+    'wine-glass',
+    'wine-glass-alt',
+    'won-sign',
+    'wrench',
+    'x-ray',
+    'yen-sign',
+    'yin-yang'
+  ]
+}
diff --git a/marketing-ui/admin-ui/src/components/ImageViewer/index.ts b/marketing-ui/admin-ui/src/components/ImageViewer/index.ts
new file mode 100644
index 0000000..35764d6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/ImageViewer/index.ts
@@ -0,0 +1,33 @@
+import ImageViewer from './src/ImageViewer.vue'
+import { isClient } from '@/utils/is'
+import { createVNode, render, VNode } from 'vue'
+import { ImageViewerProps } from './src/types'
+
+let instance: Nullable<VNode> = null
+
+export function createImageViewer(options: ImageViewerProps) {
+  if (!isClient) return
+  const {
+    urlList,
+    initialIndex = 0,
+    infinite = true,
+    hideOnClickModal = false,
+    teleported = false,
+    zIndex = 2000,
+    show = true
+  } = options
+
+  const propsData: Partial<ImageViewerProps> = {}
+  const container = document.createElement('div')
+  propsData.urlList = urlList
+  propsData.initialIndex = initialIndex
+  propsData.infinite = infinite
+  propsData.hideOnClickModal = hideOnClickModal
+  propsData.teleported = teleported
+  propsData.zIndex = zIndex
+  propsData.show = show
+
+  document.body.appendChild(container)
+  instance = createVNode(ImageViewer, propsData)
+  render(instance, container)
+}
diff --git a/marketing-ui/admin-ui/src/components/ImageViewer/src/ImageViewer.vue b/marketing-ui/admin-ui/src/components/ImageViewer/src/ImageViewer.vue
new file mode 100644
index 0000000..c84d06b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/ImageViewer/src/ImageViewer.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'ImageViewer' })
+
+const props = defineProps({
+  urlList: {
+    type: Array as PropType<string[]>,
+    default: (): string[] => []
+  },
+  zIndex: propTypes.number.def(200),
+  initialIndex: propTypes.number.def(0),
+  infinite: propTypes.bool.def(true),
+  hideOnClickModal: propTypes.bool.def(false),
+  teleported: propTypes.bool.def(false),
+  show: propTypes.bool.def(false)
+})
+
+const getBindValue = computed(() => {
+  const propsData: Recordable = { ...props }
+  delete propsData.show
+  return propsData
+})
+
+const show = ref(props.show)
+
+const close = () => {
+  show.value = false
+}
+</script>
+
+<template>
+  <ElImageViewer v-if="show" v-bind="getBindValue" @close="close" />
+</template>
diff --git a/marketing-ui/admin-ui/src/components/ImageViewer/src/types.ts b/marketing-ui/admin-ui/src/components/ImageViewer/src/types.ts
new file mode 100644
index 0000000..2fff4c0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/ImageViewer/src/types.ts
@@ -0,0 +1,9 @@
+export interface ImageViewerProps {
+  urlList?: string[]
+  zIndex?: number
+  initialIndex?: number
+  infinite?: boolean
+  hideOnClickModal?: boolean
+  teleported?: boolean
+  show?: boolean
+}
diff --git a/marketing-ui/admin-ui/src/components/Infotip/index.ts b/marketing-ui/admin-ui/src/components/Infotip/index.ts
new file mode 100644
index 0000000..413fa5f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Infotip/index.ts
@@ -0,0 +1,3 @@
+import Infotip from './src/Infotip.vue'
+
+export { Infotip }
diff --git a/marketing-ui/admin-ui/src/components/Infotip/src/Infotip.vue b/marketing-ui/admin-ui/src/components/Infotip/src/Infotip.vue
new file mode 100644
index 0000000..0afd692
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Infotip/src/Infotip.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { useDesign } from '@/hooks/web/useDesign'
+import { propTypes } from '@/utils/propTypes'
+import { TipSchema } from '@/types/infoTip'
+
+defineOptions({ name: 'InfoTip' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('infotip')
+
+defineProps({
+  title: propTypes.string.def(''),
+  schema: {
+    type: Array as PropType<Array<string | TipSchema>>,
+    required: true,
+    default: () => []
+  },
+  showIndex: propTypes.bool.def(true),
+  highlightColor: propTypes.string.def('var(--el-color-primary)')
+})
+
+const emit = defineEmits(['click'])
+
+const keyClick = (key: string) => {
+  emit('click', key)
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      prefixCls,
+      'p-20px mb-20px border-1px border-solid border-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)]'
+    ]"
+  >
+    <div v-if="title" :class="[`${prefixCls}__header`, 'flex items-center']">
+      <Icon :size="22" color="var(--el-color-primary)" icon="ep:warning-filled" />
+      <span :class="[`${prefixCls}__title`, 'pl-5px text-16px font-bold']">{{ title }}</span>
+    </div>
+    <div :class="`${prefixCls}__content`">
+      <p v-for="(item, $index) in schema" :key="$index" class="mt-15px text-14px">
+        <Highlight
+          :color="highlightColor"
+          :keys="typeof item === 'string' ? [] : item.keys"
+          @click="keyClick"
+        >
+          {{ showIndex ? `${$index + 1}、` : '' }}{{ typeof item === 'string' ? item : item.label }}
+        </Highlight>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/InputPassword/index.ts b/marketing-ui/admin-ui/src/components/InputPassword/index.ts
new file mode 100644
index 0000000..1dcc38e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/InputPassword/index.ts
@@ -0,0 +1,3 @@
+import InputPassword from './src/InputPassword.vue'
+
+export { InputPassword }
diff --git a/marketing-ui/admin-ui/src/components/InputPassword/src/InputPassword.vue b/marketing-ui/admin-ui/src/components/InputPassword/src/InputPassword.vue
new file mode 100644
index 0000000..b8c93e7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/InputPassword/src/InputPassword.vue
@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { useConfigGlobal } from '@/hooks/web/useConfigGlobal'
+import type { ZxcvbnResult } from '@zxcvbn-ts/core'
+import { zxcvbn } from '@zxcvbn-ts/core'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'InputPassword' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('input-password')
+
+const props = defineProps({
+  // 是否显示密码强度
+  strength: propTypes.bool.def(false),
+  modelValue: propTypes.string.def('')
+})
+
+watch(
+  () => props.modelValue,
+  (val: string) => {
+    if (val === unref(valueRef)) return
+    valueRef.value = val
+  }
+)
+
+const { configGlobal } = useConfigGlobal()
+
+const emit = defineEmits(['update:modelValue'])
+
+// 设置input的type属性
+const textType = ref<'password' | 'text'>('password')
+
+const changeTextType = () => {
+  textType.value = unref(textType) === 'text' ? 'password' : 'text'
+}
+
+// 输入框的值
+const valueRef = ref(props.modelValue)
+
+// 监听
+watch(
+  () => valueRef.value,
+  (val: string) => {
+    emit('update:modelValue', val)
+  }
+)
+
+// 获取密码强度
+const getPasswordStrength = computed(() => {
+  const value = unref(valueRef)
+  const zxcvbnRef = zxcvbn(unref(valueRef)) as ZxcvbnResult
+  return value ? zxcvbnRef.score : -1
+})
+
+const getIconName = computed(() => (unref(textType) === 'password' ? 'ep:hide' : 'ep:view'))
+</script>
+
+<template>
+  <div :class="[prefixCls, `${prefixCls}--${configGlobal?.size}`]">
+    <ElInput v-model="valueRef" :type="textType" v-bind="$attrs">
+      <template #suffix>
+        <Icon :icon="getIconName" class="el-input__icon cursor-pointer" @click="changeTextType" />
+      </template>
+    </ElInput>
+    <div
+      v-if="strength"
+      :class="`${prefixCls}__bar`"
+      class="relative mb-6px ml-auto mr-auto mt-10px h-6px"
+    >
+      <div :class="`${prefixCls}__bar--fill`" :data-score="getPasswordStrength"></div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-input-password;
+
+.#{$prefix-cls} {
+  :deep(.#{$elNamespace}-input__clear) {
+    margin-left: 5px;
+  }
+
+  &__bar {
+    background-color: var(--el-text-color-disabled);
+    border-radius: var(--el-border-radius-base);
+
+    &::before,
+    &::after {
+      position: absolute;
+      z-index: 10;
+      display: block;
+      width: 20%;
+      height: inherit;
+      background-color: transparent;
+      border-color: var(--el-color-white);
+      border-style: solid;
+      border-width: 0 5px;
+      content: '';
+    }
+
+    &::before {
+      left: 20%;
+    }
+
+    &::after {
+      right: 20%;
+    }
+
+    &--fill {
+      position: absolute;
+      width: 0;
+      height: inherit;
+      background-color: transparent;
+      border-radius: inherit;
+      transition:
+        width 0.5s ease-in-out,
+        background 0.25s;
+
+      &[data-score='0'] {
+        width: 20%;
+        background-color: var(--el-color-danger);
+      }
+
+      &[data-score='1'] {
+        width: 40%;
+        background-color: var(--el-color-danger);
+      }
+
+      &[data-score='2'] {
+        width: 60%;
+        background-color: var(--el-color-warning);
+      }
+
+      &[data-score='3'] {
+        width: 80%;
+        background-color: var(--el-color-success);
+      }
+
+      &[data-score='4'] {
+        width: 100%;
+        background-color: var(--el-color-success);
+      }
+    }
+  }
+
+  &--mini > &__bar {
+    border-radius: var(--el-border-radius-small);
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/InputWithColor/index.vue b/marketing-ui/admin-ui/src/components/InputWithColor/index.vue
new file mode 100644
index 0000000..1311a55
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/InputWithColor/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <el-input v-model="modelValue" v-bind="$attrs">
+    <template #append>
+      <el-color-picker v-model="color" :predefine="PREDEFINE_COLORS" />
+    </template>
+  </el-input>
+</template>
+
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { PREDEFINE_COLORS } from '@/utils/color'
+import { useVModels } from '@vueuse/core'
+
+/**
+ * 带颜色选择器输入框
+ */
+defineOptions({ name: 'InputWithColor' })
+
+const props = defineProps({
+  modelValue: propTypes.string.def('').isRequired,
+  color: propTypes.string.def('').isRequired
+})
+const emit = defineEmits(['update:modelValue', 'update:color'])
+const { modelValue, color } = useVModels(props, emit)
+</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>
diff --git a/marketing-ui/admin-ui/src/components/MagicCubeEditor/index.vue b/marketing-ui/admin-ui/src/components/MagicCubeEditor/index.vue
new file mode 100644
index 0000000..9b9a43c
--- /dev/null
+++ b/marketing-ui/admin-ui/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(0)
+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/marketing-ui/admin-ui/src/components/MagicCubeEditor/util.ts b/marketing-ui/admin-ui/src/components/MagicCubeEditor/util.ts
new file mode 100644
index 0000000..e7c6465
--- /dev/null
+++ b/marketing-ui/admin-ui/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/marketing-ui/admin-ui/src/components/MarkdownView/index.vue b/marketing-ui/admin-ui/src/components/MarkdownView/index.vue
new file mode 100644
index 0000000..74764d5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/MarkdownView/index.vue
@@ -0,0 +1,204 @@
+<template>
+  <div ref="contentRef" class="markdown-view" v-html="renderedMarkdown"></div>
+</template>
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import MarkdownIt from 'markdown-it'
+import 'highlight.js/styles/vs2015.min.css'
+import hljs from 'highlight.js'
+
+// 定义组件属性
+const props = defineProps({
+  content: {
+    type: String,
+    required: true
+  }
+})
+
+const message = useMessage() // 消息弹窗
+const { copy } = useClipboard() // 初始化 copy 到粘贴板
+const contentRef = ref()
+
+const md = new MarkdownIt({
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        const copyHtml = `<div id="copy" data-copy='${str}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`
+        return `<pre style="position: relative;">${copyHtml}<code class="hljs">${hljs.highlight(lang, str, true).value}</code></pre>`
+      } catch (__) {}
+    }
+    return ``
+  }
+})
+
+/** 渲染 markdown */
+const renderedMarkdown = computed(() => {
+  return md.render(props.content)
+})
+
+/** 初始化 **/
+onMounted(async () => {
+  // 添加 copy 监听
+  contentRef.value.addEventListener('click', (e: any) => {
+    if (e.target.id === 'copy') {
+      copy(e.target?.dataset?.copy)
+      message.success('复制成功!')
+    }
+  })
+})
+</script>
+
+<style lang="scss">
+.markdown-view {
+  font-family: PingFang SC;
+  font-size: 0.95rem;
+  font-weight: 400;
+  line-height: 1.6rem;
+  letter-spacing: 0em;
+  text-align: left;
+  color: #3b3e55;
+  max-width: 100%;
+
+  pre {
+    position: relative;
+  }
+
+  pre code.hljs {
+    width: auto;
+  }
+
+  code.hljs {
+    border-radius: 6px;
+    padding-top: 20px;
+    width: auto;
+    @media screen and (min-width: 1536px) {
+      width: 960px;
+    }
+
+    @media screen and (max-width: 1536px) and (min-width: 1024px) {
+      width: calc(100vw - 400px - 64px - 32px * 2);
+    }
+
+    @media screen and (max-width: 1024px) and (min-width: 768px) {
+      width: calc(100vw - 32px * 2);
+    }
+
+    @media screen and (max-width: 768px) {
+      width: calc(100vw - 16px * 2);
+    }
+  }
+
+  p,
+  code.hljs {
+    margin-bottom: 16px;
+  }
+
+  p {
+    //margin-bottom: 1rem !important;
+    margin: 0;
+    margin-bottom: 3px;
+  }
+
+  /* 标题通用格式 */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--color-G900);
+    margin: 24px 0 8px;
+    font-weight: 600;
+  }
+
+  h1 {
+    font-size: 22px;
+    line-height: 32px;
+  }
+
+  h2 {
+    font-size: 20px;
+    line-height: 30px;
+  }
+
+  h3 {
+    font-size: 18px;
+    line-height: 28px;
+  }
+
+  h4 {
+    font-size: 16px;
+    line-height: 26px;
+  }
+
+  h5 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  h6 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  /* 列表（有序，无序） */
+  ul,
+  ol {
+    margin: 0 0 8px 0;
+    padding: 0;
+    font-size: 16px;
+    line-height: 24px;
+    color: #3b3e55; // var(--color-CG600);
+  }
+
+  li {
+    margin: 4px 0 0 20px;
+    margin-bottom: 1rem;
+  }
+
+  ol > li {
+    list-style-type: decimal;
+    margin-bottom: 1rem;
+    // 表达式,修复有序列表序号展示不全的问题
+    // &:nth-child(n + 10) {
+    //     margin-left: 30px;
+    // }
+
+    // &:nth-child(n + 100) {
+    //     margin-left: 30px;
+    // }
+  }
+
+  ul > li {
+    list-style-type: disc;
+    font-size: 16px;
+    line-height: 24px;
+    margin-right: 11px;
+    margin-bottom: 1rem;
+    color: #3b3e55; // var(--color-G900);
+  }
+
+  ol ul,
+  ol ul > li,
+  ul ul,
+  ul ul li {
+    // list-style: circle;
+    font-size: 16px;
+    list-style: none;
+    margin-left: 6px;
+    margin-bottom: 1rem;
+  }
+
+  ul ul ul,
+  ul ul ul li,
+  ol ol,
+  ol ol > li,
+  ol ul ul,
+  ol ul ul > li,
+  ul ol,
+  ul ol > li {
+    list-style: square;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/OperateLogV2/index.ts b/marketing-ui/admin-ui/src/components/OperateLogV2/index.ts
new file mode 100644
index 0000000..f69c222
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/OperateLogV2/index.ts
@@ -0,0 +1,3 @@
+import OperateLogV2 from './src/OperateLogV2.vue'
+
+export { OperateLogV2 }
diff --git a/marketing-ui/admin-ui/src/components/OperateLogV2/src/OperateLogV2.vue b/marketing-ui/admin-ui/src/components/OperateLogV2/src/OperateLogV2.vue
new file mode 100644
index 0000000..6acc1cc
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/OperateLogV2/src/OperateLogV2.vue
@@ -0,0 +1,105 @@
+<!-- 某个记录的操作日志列表，目前主要用于 CRM 客户、商机等详情界面 -->
+<template>
+  <div class="pt-20px">
+    <el-timeline>
+      <el-timeline-item
+        v-for="(log, index) in logList"
+        :key="index"
+        :timestamp="formatDate(log.createTime)"
+        placement="top"
+      >
+        <div class="el-timeline-right-content">
+          <el-tag class="mr-10px" type="success">{{ log.userName }}</el-tag>
+          {{ log.action }}
+        </div>
+        <template #dot>
+          <span :style="{ backgroundColor: getUserTypeColor(log.userType) }" class="dot-node-style">
+            {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
+          </span>
+        </template>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { OperateLogVO } from '@/api/system/operatelog'
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
+import { ElTag } from 'element-plus'
+
+defineOptions({ name: 'OperateLogV2' })
+
+interface Props {
+  logList: OperateLogVO[] // 操作日志列表
+}
+
+withDefaults(defineProps<Props>(), {
+  logList: () => []
+})
+
+/** 获得 userType 颜色 */
+const getUserTypeColor = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type)
+  switch (dict?.colorType) {
+    case 'success':
+      return '#67C23A'
+    case 'info':
+      return '#909399'
+    case 'warning':
+      return '#E6A23C'
+    case 'danger':
+      return '#F56C6C'
+  }
+  return '#409EFF'
+}
+</script>
+
+<style lang="scss" scoped>
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0 0 110px;
+
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+
+  .el-timeline-right-content {
+    display: flex;
+    align-items: center;
+    min-height: 30px;
+    padding: 10px;
+    background-color: #fff;
+
+    &::before {
+      position: absolute;
+      top: 10px;
+      left: 13px; /* 将伪元素水平居中 */
+      border-color: transparent #fff transparent transparent; /* 尖角颜色，左侧朝向 */
+      border-style: solid;
+      border-width: 8px; /* 调整尖角大小 */
+      content: ''; /* 必须设置 content 属性 */
+    }
+  }
+}
+
+.dot-node-style {
+  position: absolute;
+  left: -5px;
+  display: flex;
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
+  color: #fff;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Pagination/index.vue b/marketing-ui/admin-ui/src/components/Pagination/index.vue
new file mode 100644
index 0000000..6bb00b3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Pagination/index.vue
@@ -0,0 +1,87 @@
+<!-- 基于 ruoyi-vue3 的 Pagination 重构，核心是简化无用的属性，并使用 ts 重写 -->
+<template>
+  <el-pagination
+    v-show="total > 0"
+    v-model:current-page="currentPage"
+    v-model:page-size="pageSize"
+    :background="true"
+    :page-sizes="[10, 20, 30, 50, 100]"
+    :pager-count="pagerCount"
+    :total="total"
+    :small="isSmall"
+    class="float-right mb-15px mt-15px"
+    layout="total, sizes, prev, pager, next, jumper"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  />
+</template>
+<script lang="ts" setup>
+import { computed, watchEffect } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+
+defineOptions({ name: 'Pagination' })
+
+// 此处解决了当全局size为small的时候分页组件样式太大的问题
+const appStore = useAppStore()
+const layoutCurrentSize = computed(() => appStore.currentSize)
+const isSmall = ref<boolean>(layoutCurrentSize.value === 'small')
+watchEffect(() => {
+  isSmall.value = layoutCurrentSize.value === 'small'
+})
+
+const props = defineProps({
+  // 总条目数
+  total: {
+    required: true,
+    type: Number
+  },
+  // 当前页数：pageNo
+  page: {
+    type: Number,
+    default: 1
+  },
+  // 每页显示条目个数：pageSize
+  limit: {
+    type: Number,
+    default: 20
+  },
+  // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
+  // 移动端页码按钮的数量端默认值 5
+  pagerCount: {
+    type: Number,
+    default: document.body.clientWidth < 992 ? 5 : 7
+  }
+})
+
+const emit = defineEmits(['update:page', 'update:limit', 'pagination'])
+const currentPage = computed({
+  get() {
+    return props.page
+  },
+  set(val) {
+    // 触发 update:page 事件，更新 limit 属性，从而更新 pageNo
+    emit('update:page', val)
+  }
+})
+const pageSize = computed({
+  get() {
+    return props.limit
+  },
+  set(val) {
+    // 触发 update:limit 事件，更新 limit 属性，从而更新 pageSize
+    emit('update:limit', val)
+  }
+})
+const handleSizeChange = (val) => {
+  // 如果修改后超过最大页面，强制跳转到第 1 页
+  if (currentPage.value * val > props.total) {
+    currentPage.value = 1
+  }
+  // 触发 pagination 事件，重新加载列表
+  emit('pagination', { page: currentPage.value, limit: val })
+}
+const handleCurrentChange = (val) => {
+  // 触发 pagination 事件，重新加载列表
+  emit('pagination', { page: val, limit: pageSize.value })
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/components/Qrcode/index.ts b/marketing-ui/admin-ui/src/components/Qrcode/index.ts
new file mode 100644
index 0000000..ce46161
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Qrcode/index.ts
@@ -0,0 +1,3 @@
+import Qrcode from './src/Qrcode.vue'
+
+export { Qrcode }
diff --git a/marketing-ui/admin-ui/src/components/Qrcode/src/Qrcode.vue b/marketing-ui/admin-ui/src/components/Qrcode/src/Qrcode.vue
new file mode 100644
index 0000000..f0ce7b7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Qrcode/src/Qrcode.vue
@@ -0,0 +1,253 @@
+<script lang="ts" setup>
+import { computed, nextTick, PropType, ref, unref, watch } from 'vue'
+import QRCode, { QRCodeRenderersOptions } from 'qrcode'
+import { cloneDeep } from 'lodash-es'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+import { isString } from '@/utils/is'
+import { QrcodeLogo } from '@/types/qrcode'
+
+defineOptions({ name: 'Qrcode' })
+
+const props = defineProps({
+  // img 或者 canvas,img不支持logo嵌套
+  tag: propTypes.string.validate((v: string) => ['canvas', 'img'].includes(v)).def('canvas'),
+  // 二维码内容
+  text: {
+    type: [String, Array] as PropType<string | Recordable[]>,
+    default: null
+  },
+  // qrcode.js配置项
+  options: {
+    type: Object as PropType<QRCodeRenderersOptions>,
+    default: () => ({})
+  },
+  // 宽度
+  width: propTypes.number.def(200),
+  // logo
+  logo: {
+    type: [String, Object] as PropType<Partial<QrcodeLogo> | string>,
+    default: ''
+  },
+  // 是否过期
+  disabled: propTypes.bool.def(false),
+  // 过期提示内容
+  disabledText: propTypes.string.def('')
+})
+
+const emit = defineEmits(['done', 'click', 'disabled-click'])
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('qrcode')
+
+const { toCanvas, toDataURL } = QRCode
+
+const loading = ref(true)
+
+const wrapRef = ref<Nullable<HTMLCanvasElement | HTMLImageElement>>(null)
+
+const renderText = computed(() => String(props.text))
+
+const wrapStyle = computed(() => {
+  return {
+    width: props.width + 'px',
+    height: props.width + 'px'
+  }
+})
+
+const initQrcode = async () => {
+  await nextTick()
+  const options = cloneDeep(props.options || {})
+  if (props.tag === 'canvas') {
+    // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
+    options.errorCorrectionLevel =
+      options.errorCorrectionLevel || getErrorCorrectionLevel(unref(renderText))
+    const _width: number = await getOriginWidth(unref(renderText), options)
+    options.scale = props.width === 0 ? undefined : (props.width / _width) * 4
+    const canvasRef: HTMLCanvasElement | any = await toCanvas(
+      unref(wrapRef) as HTMLCanvasElement,
+      unref(renderText),
+      options
+    )
+    if (props.logo) {
+      const url = await createLogoCode(canvasRef)
+      emit('done', url)
+      loading.value = false
+    } else {
+      emit('done', canvasRef.toDataURL())
+      loading.value = false
+    }
+  } else {
+    const url = await toDataURL(renderText.value, {
+      errorCorrectionLevel: 'H',
+      width: props.width,
+      ...options
+    })
+    ;(unref(wrapRef) as HTMLImageElement).src = url
+    emit('done', url)
+    loading.value = false
+  }
+}
+
+watch(
+  () => renderText.value,
+  (val) => {
+    if (!val) return
+    initQrcode()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const createLogoCode = (canvasRef: HTMLCanvasElement) => {
+  const canvasWidth = canvasRef.width
+  const logoOptions: QrcodeLogo = Object.assign(
+    {
+      logoSize: 0.15,
+      bgColor: '#ffffff',
+      borderSize: 0.05,
+      crossOrigin: 'anonymous',
+      borderRadius: 8,
+      logoRadius: 0
+    },
+    isString(props.logo) ? {} : props.logo
+  )
+  const {
+    logoSize = 0.15,
+    bgColor = '#ffffff',
+    borderSize = 0.05,
+    crossOrigin = 'anonymous',
+    borderRadius = 8,
+    logoRadius = 0
+  } = logoOptions
+  const logoSrc = isString(props.logo) ? props.logo : props.logo.src
+  const logoWidth = canvasWidth * logoSize
+  const logoXY = (canvasWidth * (1 - logoSize)) / 2
+  const logoBgWidth = canvasWidth * (logoSize + borderSize)
+  const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2
+
+  const ctx = canvasRef.getContext('2d')
+  if (!ctx) return
+
+  // logo 底色
+  canvasRoundRect(ctx)(logoBgXY, logoBgXY, logoBgWidth, logoBgWidth, borderRadius)
+  ctx.fillStyle = bgColor
+  ctx.fill()
+
+  // logo
+  const image = new Image()
+  if (crossOrigin || logoRadius) {
+    image.setAttribute('crossOrigin', crossOrigin)
+  }
+  ;(image as any).src = logoSrc
+
+  // 使用image绘制可以避免某些跨域情况
+  const drawLogoWithImage = (image: HTMLImageElement) => {
+    ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth)
+  }
+
+  // 使用canvas绘制以获得更多的功能
+  const drawLogoWithCanvas = (image: HTMLImageElement) => {
+    const canvasImage = document.createElement('canvas')
+    canvasImage.width = logoXY + logoWidth
+    canvasImage.height = logoXY + logoWidth
+    const imageCanvas = canvasImage.getContext('2d')
+    if (!imageCanvas || !ctx) return
+    imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth)
+
+    canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius)
+    if (!ctx) return
+    const fillStyle = ctx.createPattern(canvasImage, 'no-repeat')
+    if (fillStyle) {
+      ctx.fillStyle = fillStyle
+      ctx.fill()
+    }
+  }
+
+  // 将 logo绘制到 canvas上
+  return new Promise((resolve: any) => {
+    image.onload = () => {
+      logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image)
+      resolve(canvasRef.toDataURL())
+    }
+  })
+}
+
+// 得到原QrCode的大小，以便缩放得到正确的QrCode大小
+const getOriginWidth = async (content: string, options: QRCodeRenderersOptions) => {
+  const _canvas = document.createElement('canvas')
+  await toCanvas(_canvas, content, options)
+  return _canvas.width
+}
+
+// 对于内容少的QrCode，增大容错率
+const getErrorCorrectionLevel = (content: string) => {
+  if (content.length > 36) {
+    return 'M'
+  } else if (content.length > 16) {
+    return 'Q'
+  } else {
+    return 'H'
+  }
+}
+
+// copy来的方法，用于绘制圆角
+const canvasRoundRect = (ctx: CanvasRenderingContext2D) => {
+  return (x: number, y: number, w: number, h: number, r: number) => {
+    const minSize = Math.min(w, h)
+    if (r > minSize / 2) {
+      r = minSize / 2
+    }
+    ctx.beginPath()
+    ctx.moveTo(x + r, y)
+    ctx.arcTo(x + w, y, x + w, y + h, r)
+    ctx.arcTo(x + w, y + h, x, y + h, r)
+    ctx.arcTo(x, y + h, x, y, r)
+    ctx.arcTo(x, y, x + w, y, r)
+    ctx.closePath()
+    return ctx
+  }
+}
+
+const clickCode = () => {
+  emit('click')
+}
+
+const disabledClick = () => {
+  emit('disabled-click')
+}
+</script>
+
+<template>
+  <div v-loading="loading" :class="[prefixCls, 'relative inline-block']" :style="wrapStyle">
+    <component :is="tag" ref="wrapRef" @click="clickCode" />
+    <div
+      v-if="disabled"
+      :class="`${prefixCls}--disabled`"
+      class="absolute left-0 top-0 h-full w-full flex items-center justify-center"
+      @click="disabledClick"
+    >
+      <div class="absolute left-[50%] top-[50%] font-bold">
+        <Icon :size="30" color="var(--el-color-primary)" icon="ep:refresh-right" />
+        <div>{{ disabledText }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-qrcode;
+
+.#{$prefix-cls} {
+  &--disabled {
+    background: rgb(255 255 255 / 95%);
+
+    & > div {
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/RouterSearch/index.vue b/marketing-ui/admin-ui/src/components/RouterSearch/index.vue
new file mode 100644
index 0000000..42a4174
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/RouterSearch/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <ElDialog v-if="isModal" v-model="showSearch" :show-close="false" title="菜单搜索">
+    <el-select
+      filterable
+      :reserve-keyword="false"
+      remote
+      placeholder="请输入菜单内容"
+      :remote-method="remoteMethod"
+      style="width: 100%"
+      @change="handleChange"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </ElDialog>
+  <div v-else class="custom-hover" @click.stop="showTopSearch = !showTopSearch">
+    <Icon icon="ep:search" />
+    <el-select
+      @click.stop
+      filterable
+      :reserve-keyword="false"
+      remote
+      placeholder="请输入菜单内容"
+      :remote-method="remoteMethod"
+      class="overflow-hidden transition-all-600"
+      :class="showTopSearch ? '!w-220px ml2' : '!w-0'"
+      @change="handleChange"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  isModal: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const router = useRouter() // 路由对象
+const showSearch = ref(false) // 是否显示弹框
+const showTopSearch = ref(false) // 是否显示顶部搜索框
+const value: Ref = ref('') // 用户输入的值
+
+const routers = router.getRoutes() // 路由对象
+const options = computed(() => {
+  // 提示选项
+  if (!value.value) {
+    return []
+  }
+  const list = routers.filter((item: any) => {
+    if (item.meta.title?.indexOf(value.value) > -1 || item.path.indexOf(value.value) > -1) {
+      return true
+    }
+  })
+  return list.map((item) => {
+    return {
+      label: `${item.meta.title}${item.path}`,
+      value: item.path
+    }
+  })
+})
+
+function remoteMethod(data) {
+  // 这里可以执行相应的操作（例如打开搜索框等）
+  value.value = data
+}
+
+function handleChange(path) {
+  router.push({ path })
+  hiddenSearch()
+  hiddenTopSearch()
+}
+
+function hiddenSearch() {
+  showSearch.value = false
+}
+
+function hiddenTopSearch() {
+  showTopSearch.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', listenKey)
+  window.addEventListener('click', hiddenTopSearch)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', listenKey)
+  window.removeEventListener('click', hiddenTopSearch)
+})
+
+// 监听 ctrl + k
+function listenKey(event) {
+  if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+    // 阻止触发浏览器默认事件
+    event.preventDefault()
+    showSearch.value = !showSearch.value
+    // 这里可以执行相应的操作（例如打开搜索框等）
+  }
+}
+
+defineExpose({
+  openSearch: () => {
+    showSearch.value = true
+  }
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/Search/index.ts b/marketing-ui/admin-ui/src/components/Search/index.ts
new file mode 100644
index 0000000..fcc6f16
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Search/index.ts
@@ -0,0 +1,3 @@
+import Search from './src/Search.vue'
+
+export { Search }
diff --git a/marketing-ui/admin-ui/src/components/Search/src/Search.vue b/marketing-ui/admin-ui/src/components/Search/src/Search.vue
new file mode 100644
index 0000000..3218a63
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Search/src/Search.vue
@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+import { useForm } from '@/hooks/web/useForm'
+import { findIndex } from '@/utils'
+import { cloneDeep } from 'lodash-es'
+import { FormSchema } from '@/types/form'
+
+defineOptions({ name: 'Search' })
+
+const { t } = useI18n()
+
+const props = defineProps({
+  // 生成Form的布局结构数组
+  schema: {
+    type: Array as PropType<FormSchema[]>,
+    default: () => []
+  },
+  // 是否需要栅格布局
+  isCol: propTypes.bool.def(false),
+  // 表单label宽度
+  labelWidth: propTypes.oneOfType([String, Number]).def('auto'),
+  // 操作按钮风格位置
+  layout: propTypes.string.validate((v: string) => ['inline', 'bottom'].includes(v)).def('inline'),
+  // 底部按钮的对齐方式
+  buttomPosition: propTypes.string
+    .validate((v: string) => ['left', 'center', 'right'].includes(v))
+    .def('center'),
+  showSearch: propTypes.bool.def(true),
+  showReset: propTypes.bool.def(true),
+  // 是否显示伸缩
+  expand: propTypes.bool.def(false),
+  // 伸缩的界限字段
+  expandField: propTypes.string.def(''),
+  inline: propTypes.bool.def(true),
+  model: {
+    type: Object as PropType<Recordable>,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['search', 'reset'])
+
+const visible = ref(true)
+
+const newSchema = computed(() => {
+  let schema: FormSchema[] = cloneDeep(props.schema)
+  if (props.expand && props.expandField && !unref(visible)) {
+    const index = findIndex(schema, (v: FormSchema) => v.field === props.expandField)
+    if (index > -1) {
+      const length = schema.length
+      schema.splice(index + 1, length)
+    }
+  }
+  if (props.layout === 'inline') {
+    schema = schema.concat([
+      {
+        field: 'action',
+        formItemProps: {
+          labelWidth: '0px'
+        }
+      }
+    ])
+  }
+  return schema
+})
+
+const { register, elFormRef, methods } = useForm({
+  model: props.model || {}
+})
+
+const search = async () => {
+  await unref(elFormRef)?.validate(async (isValid) => {
+    if (isValid) {
+      const { getFormData } = methods
+      const model = await getFormData()
+      emit('search', model)
+    }
+  })
+}
+
+const reset = async () => {
+  unref(elFormRef)?.resetFields()
+  const { getFormData } = methods
+  const model = await getFormData()
+  emit('reset', model)
+}
+
+const bottonButtonStyle = computed(() => {
+  return {
+    textAlign: props.buttomPosition as unknown as 'left' | 'center' | 'right'
+  }
+})
+
+const setVisible = () => {
+  unref(elFormRef)?.resetFields()
+  visible.value = !unref(visible)
+}
+</script>
+
+<template>
+  <!-- update by 芋艿：class="-mb-15px" 用于降低和 ContentWrap 组件的底部距离，避免空隙过大 -->
+  <Form
+    :inline="inline"
+    :is-col="isCol"
+    :is-custom="false"
+    :label-width="labelWidth"
+    :schema="newSchema"
+    class="-mb-15px"
+    hide-required-asterisk
+    @register="register"
+  >
+    <template #action>
+      <div v-if="layout === 'inline'">
+        <!-- update by 芋艿：去除搜索的 type="primary"，颜色变淡一点 -->
+        <ElButton v-if="showSearch" @click="search">
+          <Icon class="mr-5px" icon="ep:search" />
+          {{ t('common.query') }}
+        </ElButton>
+        <!-- update by 芋艿：将 icon="ep:refresh-right" 修改成 icon="ep:refresh"，和 ruoyi-vue 搜索保持一致  -->
+        <ElButton v-if="showReset" @click="reset">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          {{ t('common.reset') }}
+        </ElButton>
+        <ElButton v-if="expand" text @click="setVisible">
+          {{ t(visible ? 'common.shrink' : 'common.expand') }}
+          <Icon :icon="visible ? 'ep:arrow-up' : 'ep:arrow-down'" />
+        </ElButton>
+        <!-- add by 芋艿：补充在搜索后的按钮 -->
+        <slot name="actionMore"></slot>
+      </div>
+    </template>
+    <template v-for="name in Object.keys($slots)" :key="name" #[name]>
+      <slot :name="name"></slot>
+    </template>
+  </Form>
+
+  <template v-if="layout === 'bottom'">
+    <div :style="bottonButtonStyle">
+      <ElButton v-if="showSearch" type="primary" @click="search">
+        <Icon class="mr-5px" icon="ep:search" />
+        {{ t('common.query') }}
+      </ElButton>
+      <ElButton v-if="showReset" @click="reset">
+        <Icon class="mr-5px" icon="ep:refresh-right" />
+        {{ t('common.reset') }}
+      </ElButton>
+      <ElButton v-if="expand" text @click="setVisible">
+        {{ t(visible ? 'common.shrink' : 'common.expand') }}
+        <Icon :icon="visible ? 'ep:arrow-up' : 'ep:arrow-down'" />
+      </ElButton>
+      <!-- add by 芋艿：补充在搜索后的按钮 -->
+      <slot name="actionMore"></slot>
+    </div>
+  </template>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/ShortcutDateRangePicker/index.vue b/marketing-ui/admin-ui/src/components/ShortcutDateRangePicker/index.vue
new file mode 100644
index 0000000..78c5130
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/ShortcutDateRangePicker/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="flex flex-row items-center gap-2">
+    <el-radio-group v-model="shortcutDays" @change="handleShortcutDaysChange">
+      <el-radio-button :value="1">昨天</el-radio-button>
+      <el-radio-button :value="7">最近7天</el-radio-button>
+      <el-radio-button :value="30">最近30天</el-radio-button>
+    </el-radio-group>
+    <el-date-picker
+      v-model="times"
+      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')]"
+      :shortcuts="shortcuts"
+      class="!w-240px"
+      @change="emitDateRangePicker"
+    />
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import dayjs from 'dayjs'
+import * as DateUtil from '@/utils/formatTime'
+
+/** 快捷日期范围选择组件 */
+defineOptions({ name: 'ShortcutDateRangePicker' })
+
+const shortcutDays = ref(7) // 日期快捷天数（单选按钮组）, 默认7天
+const times = ref<[string, string]>(['', '']) // 时间范围参数
+defineExpose({ times }) // 暴露时间范围参数
+/** 日期快捷选择 */
+const shortcuts = [
+  {
+    text: '昨天',
+    value: () => DateUtil.getDayRange(new Date(), -1)
+  },
+  {
+    text: '最近7天',
+    value: () => DateUtil.getLast7Days()
+  },
+  {
+    text: '本月',
+    value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')]
+  },
+  {
+    text: '最近30天',
+    value: () => DateUtil.getLast30Days()
+  },
+  {
+    text: '最近1年',
+    value: () => DateUtil.getLast1Year()
+  }
+]
+
+/** 设置时间范围 */
+function setTimes() {
+  const beginDate = dayjs().subtract(shortcutDays.value, 'd')
+  const yesterday = dayjs().subtract(1, 'd')
+  times.value = DateUtil.getDateRange(beginDate, yesterday)
+}
+
+/** 快捷日期单选按钮选中 */
+const handleShortcutDaysChange = async () => {
+  // 设置时间范围
+  setTimes()
+  // 发送时间范围选中事件
+  await emitDateRangePicker()
+}
+
+/** 触发事件：时间范围选中 */
+const emits = defineEmits<{
+  (e: 'change', times: [dayjs.ConfigType, dayjs.ConfigType]): void
+}>()
+/** 触发时间范围选中事件 */
+const emitDateRangePicker = async () => {
+  emits('change', times.value)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  handleShortcutDaysChange()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
new file mode 100644
index 0000000..439ea98
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="node-handler-wrapper">
+    <div class="node-handler">
+      <el-popover
+        trigger="hover"
+        v-model:visible="popoverShow"
+        placement="right-start"
+        width="auto"
+        v-if="!readonly"
+      >
+        <div class="handler-item-wrapper">
+          <div class="handler-item" @click="addNode(NodeType.USER_TASK_NODE)">
+            <div class="approve handler-item-icon">
+              <span class="iconfont icon-approve icon-size"></span>
+            </div>
+            <div class="handler-item-text">审批人</div>
+          </div>
+          <div class="handler-item" @click="addNode(NodeType.TRANSACTOR_NODE)">
+            <div class="transactor handler-item-icon">
+              <span class="iconfont icon-transactor icon-size"></span>
+            </div>
+            <div class="handler-item-text">办理人</div>
+          </div>
+          <div class="handler-item" @click="addNode(NodeType.COPY_TASK_NODE)">
+            <div class="handler-item-icon copy">
+              <span class="iconfont icon-size icon-copy"></span>
+            </div>
+            <div class="handler-item-text">抄送</div>
+          </div>
+          <div class="handler-item" @click="addNode(NodeType.CONDITION_BRANCH_NODE)">
+            <div class="handler-item-icon condition">
+              <span class="iconfont icon-size icon-exclusive"></span>
+            </div>
+            <div class="handler-item-text">条件分支</div>
+          </div>
+          <div class="handler-item" @click="addNode(NodeType.PARALLEL_BRANCH_NODE)">
+            <div class="handler-item-icon parallel">
+              <span class="iconfont icon-size icon-parallel"></span>
+            </div>
+            <div class="handler-item-text">并行分支</div>
+          </div>
+          <div class="handler-item" @click="addNode(NodeType.INCLUSIVE_BRANCH_NODE)">
+            <div class="handler-item-icon inclusive">
+              <span class="iconfont icon-size icon-inclusive"></span>
+            </div>
+            <div class="handler-item-text">包容分支</div>
+          </div>
+          <div class="handler-item" @click="addNode(NodeType.DELAY_TIMER_NODE)">
+            <div class="handler-item-icon delay">
+              <span class="iconfont icon-size icon-delay"></span>
+            </div>
+            <div class="handler-item-text">延迟器</div>
+          </div>
+          <div class="handler-item" @click="addNode(NodeType.ROUTER_BRANCH_NODE)">
+            <div class="handler-item-icon router">
+              <span class="iconfont icon-size icon-router"></span>
+            </div>
+            <div class="handler-item-text">路由分支</div>
+          </div>
+          <div class="handler-item" @click="addNode(NodeType.TRIGGER_NODE)">
+            <div class="handler-item-icon trigger">
+              <span class="iconfont icon-size icon-trigger"></span>
+            </div>
+            <div class="handler-item-text">触发器</div>
+          </div>
+          <div class="handler-item" @click="addNode(NodeType.CHILD_PROCESS_NODE)">
+            <div class="handler-item-icon child-process">
+              <span class="iconfont icon-size icon-child-process"></span>
+            </div>
+            <div class="handler-item-text">子流程</div>
+          </div>
+        </div>
+        <template #reference>
+          <div class="add-icon"><Icon icon="ep:plus" /></div>
+        </template>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ApproveMethodType,
+  AssignEmptyHandlerType,
+  AssignStartUserHandlerType,
+  ConditionType,
+  NODE_DEFAULT_NAME,
+  NodeType,
+  RejectHandlerType,
+  SimpleFlowNode,
+  DEFAULT_CONDITION_GROUP_VALUE
+} from './consts'
+import { generateUUID } from '@/utils'
+import { cloneDeep } from 'lodash-es'
+
+defineOptions({
+  name: 'NodeHandler'
+})
+
+const message = useMessage() // 消息弹窗
+
+const popoverShow = ref(false)
+const props = defineProps({
+  childNode: {
+    type: Object as () => SimpleFlowNode,
+    default: null
+  },
+  currentNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const emits = defineEmits(['update:childNode'])
+
+const readonly = inject<Boolean>('readonly') // 是否只读
+
+const addNode = (type: number) => {
+  // 校验：条件分支、包容分支后面，不允许直接添加并行分支
+  if (
+    type === NodeType.PARALLEL_BRANCH_NODE &&
+    [NodeType.CONDITION_BRANCH_NODE, NodeType.INCLUSIVE_BRANCH_NODE].includes(
+      props.currentNode?.type
+    )
+  ) {
+    message.error('条件分支、包容分支后面，不允许直接添加并行分支')
+    return
+  }
+
+  popoverShow.value = false
+  if (type === NodeType.USER_TASK_NODE || type === NodeType.TRANSACTOR_NODE) {
+    const id = 'Activity_' + generateUUID()
+    const data: SimpleFlowNode = {
+      id: id,
+      name: NODE_DEFAULT_NAME.get(type) as string,
+      showText: '',
+      type: type,
+      approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
+      // 超时处理
+      rejectHandler: {
+        type: RejectHandlerType.FINISH_PROCESS
+      },
+      timeoutHandler: {
+        enable: false
+      },
+      assignEmptyHandler: {
+        type: AssignEmptyHandlerType.APPROVE
+      },
+      assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
+      childNode: props.childNode,
+      taskCreateListener: {
+        enable: false
+      },
+      taskAssignListener: {
+        enable: false
+      },
+      taskCompleteListener: {
+        enable: false
+      }
+    }
+    emits('update:childNode', data)
+  }
+  if (type === NodeType.COPY_TASK_NODE) {
+    const data: SimpleFlowNode = {
+      id: 'Activity_' + generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
+      showText: '',
+      type: NodeType.COPY_TASK_NODE,
+      childNode: props.childNode
+    }
+    emits('update:childNode', data)
+  }
+  if (type === NodeType.CONDITION_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '条件分支',
+      type: NodeType.CONDITION_BRANCH_NODE,
+      id: 'GateWay_' + generateUUID(),
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: 'Flow_' + generateUUID(),
+          name: '条件1',
+          showText: '',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: false,
+            conditionType: ConditionType.RULE,
+            conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE)
+          }
+        },
+        {
+          id: 'Flow_' + generateUUID(),
+          name: '其它情况',
+          showText: '未满足其它条件时，将进入此分支',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: true
+          }
+        }
+      ]
+    }
+    emits('update:childNode', data)
+  }
+  if (type === NodeType.PARALLEL_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '并行分支',
+      type: NodeType.PARALLEL_BRANCH_NODE,
+      id: 'GateWay_' + generateUUID(),
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: 'Flow_' + generateUUID(),
+          name: '并行1',
+          showText: '无需配置条件同时执行',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined
+        },
+        {
+          id: 'Flow_' + generateUUID(),
+          name: '并行2',
+          showText: '无需配置条件同时执行',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined
+        }
+      ]
+    }
+    emits('update:childNode', data)
+  }
+  if (type === NodeType.INCLUSIVE_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '包容分支',
+      type: NodeType.INCLUSIVE_BRANCH_NODE,
+      id: 'GateWay_' + generateUUID(),
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: 'Flow_' + generateUUID(),
+          name: '包容条件1',
+          showText: '',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: false,
+            conditionType: ConditionType.RULE,
+            conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE)
+          }
+        },
+        {
+          id: 'Flow_' + generateUUID(),
+          name: '其它情况',
+          showText: '未满足其它条件时，将进入此分支',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: true
+          }
+        }
+      ]
+    }
+    emits('update:childNode', data)
+  }
+  if (type === NodeType.DELAY_TIMER_NODE) {
+    const data: SimpleFlowNode = {
+      id: 'Activity_' + generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.DELAY_TIMER_NODE) as string,
+      showText: '',
+      type: NodeType.DELAY_TIMER_NODE,
+      childNode: props.childNode
+    }
+    emits('update:childNode', data)
+  }
+  if (type === NodeType.ROUTER_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      id: 'GateWay_' + generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.ROUTER_BRANCH_NODE) as string,
+      showText: '',
+      type: NodeType.ROUTER_BRANCH_NODE,
+      childNode: props.childNode
+    }
+    emits('update:childNode', data)
+  }
+  if (type === NodeType.TRIGGER_NODE) {
+    const data: SimpleFlowNode = {
+      id: 'Activity_' + generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.TRIGGER_NODE) as string,
+      showText: '',
+      type: NodeType.TRIGGER_NODE,
+      childNode: props.childNode
+    }
+    emits('update:childNode', data)
+  }
+  if (type === NodeType.CHILD_PROCESS_NODE) {
+    const data: SimpleFlowNode = {
+      id: 'Activity_' + generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.CHILD_PROCESS_NODE) as string,
+      showText: '',
+      type: NodeType.CHILD_PROCESS_NODE,
+      childNode: props.childNode,
+      childProcessSetting: {
+        calledProcessDefinitionKey: '',
+        calledProcessDefinitionName: '',
+        async: false,
+        skipStartUserNode: false,
+        startUserSetting: {
+          type: 1
+        },
+        timeoutSetting: {
+          enable: false
+        },
+        multiInstanceSetting: {
+          enable: false
+        }
+      }
+    }
+    emits('update:childNode', data)
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
new file mode 100644
index 0000000..dddeda6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -0,0 +1,150 @@
+<template>
+  <!-- 发起人节点 -->
+  <StartUserNode
+    v-if="currentNode && currentNode.type === NodeType.START_USER_NODE"
+    :flow-node="currentNode"
+  />
+  <!-- 审批节点 -->
+  <UserTaskNode
+    v-if="
+      currentNode &&
+      (currentNode.type === NodeType.USER_TASK_NODE ||
+        currentNode.type === NodeType.TRANSACTOR_NODE)
+    "
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  />
+  <!-- 抄送节点 -->
+  <CopyTaskNode
+    v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 条件节点 -->
+  <ExclusiveNode
+    v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  />
+  <!-- 并行节点 -->
+  <ParallelNode
+    v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  />
+  <!-- 包容分支节点 -->
+  <InclusiveNode
+    v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  />
+  <!-- 延迟器节点 -->
+  <DelayTimerNode
+    v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 路由分支节点 -->
+  <RouterNode
+    v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 触发器节点 -->
+  <TriggerNode
+    v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 子流程节点 -->
+  <ChildProcessNode
+    v-if="currentNode && currentNode.type === NodeType.CHILD_PROCESS_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 递归显示孩子节点  -->
+  <ProcessNodeTree
+    v-if="currentNode && currentNode.childNode"
+    v-model:flow-node="currentNode.childNode"
+    :parent-node="currentNode"
+    @find:recursive-find-parent-node="recursiveFindParentNode"
+  />
+
+  <!-- 结束节点 -->
+  <EndEventNode
+    v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE"
+    :flow-node="currentNode"
+  />
+</template>
+<script setup lang="ts">
+import StartUserNode from './nodes/StartUserNode.vue'
+import EndEventNode from './nodes/EndEventNode.vue'
+import UserTaskNode from './nodes/UserTaskNode.vue'
+import CopyTaskNode from './nodes/CopyTaskNode.vue'
+import ExclusiveNode from './nodes/ExclusiveNode.vue'
+import ParallelNode from './nodes/ParallelNode.vue'
+import InclusiveNode from './nodes/InclusiveNode.vue'
+import DelayTimerNode from './nodes/DelayTimerNode.vue'
+import RouterNode from './nodes/RouterNode.vue'
+import TriggerNode from './nodes/TriggerNode.vue'
+import ChildProcessNode from './nodes/ChildProcessNode.vue'
+import { SimpleFlowNode, NodeType } from './consts'
+import { useWatchNode } from './node'
+defineOptions({
+  name: 'ProcessNodeTree'
+})
+const props = defineProps({
+  parentNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null
+  },
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null
+  }
+})
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+  'find:recursiveFindParentNode': [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number
+  ]
+}>()
+
+const currentNode = useWatchNode(props)
+
+// 用于删除节点
+const handleModelValueUpdate = (updateValue) => {
+  emits('update:flowNode', updateValue)
+}
+
+const findFromParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
+  emits('find:recursiveFindParentNode', nodeList, props.parentNode, nodeType)
+}
+
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  findNode: SimpleFlowNode,
+  nodeType: number
+) => {
+  if (!findNode) {
+    return
+  }
+  if (findNode.type === NodeType.START_USER_NODE) {
+    nodeList.push(findNode)
+    return
+  }
+
+  if (findNode.type === nodeType) {
+    nodeList.push(findNode)
+  }
+  emits('find:recursiveFindParentNode', nodeList, props.parentNode, nodeType)
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
new file mode 100644
index 0000000..7823c2f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -0,0 +1,208 @@
+<template>
+  <div v-loading="loading" class="overflow-auto">
+    <SimpleProcessModel
+      ref="simpleProcessModelRef"
+      v-if="processNodeTree"
+      :flow-node="processNodeTree"
+      :readonly="false"
+      @save="saveSimpleFlowModel"
+    />
+    <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
+      <div class="mb-2">以下节点内容不完善，请修改后保存</div>
+      <div
+        class="mb-3 b-rounded-1 bg-gray-100 p-2 line-height-normal"
+        v-for="(item, index) in errorNodes"
+        :key="index"
+      >
+        {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+      </div>
+      <template #footer>
+        <el-button type="primary" @click="errorDialogVisible = false">知道了</el-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SimpleProcessModel from './SimpleProcessModel.vue'
+import { SimpleFlowNode, NodeType, NodeId, NODE_DEFAULT_TEXT } from './consts'
+import { getModel } from '@/api/bpm/model'
+import { getForm, FormVO } from '@/api/bpm/form'
+import { handleTree } from '@/utils/tree'
+import * as RoleApi from '@/api/system/role'
+import * as DeptApi from '@/api/system/dept'
+import * as PostApi from '@/api/system/post'
+import * as UserApi from '@/api/system/user'
+import * as UserGroupApi from '@/api/bpm/userGroup'
+import { BpmModelFormType } from '@/utils/constants'
+
+defineOptions({
+  name: 'SimpleProcessDesigner'
+})
+
+const emits = defineEmits(['success']) // 保存成功事件
+
+const props = defineProps({
+  modelId: {
+    type: String,
+    required: false
+  },
+  modelKey: {
+    type: String,
+    required: false
+  },
+  modelName: {
+    type: String,
+    required: false
+  },
+  // 可发起流程的人员编号
+  startUserIds: {
+    type: Array,
+    required: false
+  },
+  // 可发起流程的部门编号
+  startDeptIds: {
+    type: Array,
+    required: false
+  }
+})
+
+const processData = inject('processData') as Ref
+const loading = ref(false)
+const formFields = ref<string[]>([])
+const formType = ref(20)
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
+const deptTreeOptions = ref()
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+
+provide('formFields', formFields)
+provide('formType', formType)
+provide('roleList', roleOptions)
+provide('postList', postOptions)
+provide('userList', userOptions)
+provide('deptList', deptOptions)
+provide('userGroupList', userGroupOptions)
+provide('deptTree', deptTreeOptions)
+provide('startUserIds', props.startUserIds)
+provide('startDeptIds', props.startDeptIds)
+provide('tasks', [])
+provide('processInstance', {})
+const message = useMessage() // 国际化
+const processNodeTree = ref<SimpleFlowNode | undefined>()
+provide('processNodeTree', processNodeTree)
+const errorDialogVisible = ref(false)
+let errorNodes: SimpleFlowNode[] = []
+
+// 添加更新模型的方法
+const updateModel = () => {
+  if (!processNodeTree.value) {
+    processNodeTree.value = {
+      name: '发起人',
+      type: NodeType.START_USER_NODE,
+      id: NodeId.START_USER_NODE_ID,
+      childNode: {
+        id: NodeId.END_EVENT_NODE_ID,
+        name: '结束',
+        type: NodeType.END_EVENT_NODE
+      }
+    }
+    // 初始化时也触发一次保存
+    saveSimpleFlowModel(processNodeTree.value)
+  }
+}
+
+const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
+  if (!simpleModelNode) {
+    return
+  }
+
+  try {
+    processData.value = simpleModelNode
+    emits('success', simpleModelNode)
+  } catch (error) {
+    console.error('保存失败:', error)
+  }
+}
+
+// 校验节点设置。 暂时以 showText 为空 未节点错误配置
+const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
+  if (node) {
+    const { type, showText, conditionNodes } = node
+    if (type == NodeType.END_EVENT_NODE) {
+      return
+    }
+    if (type == NodeType.START_USER_NODE) {
+      // 发起人节点暂时不用校验，直接校验孩子节点
+      validateNode(node.childNode, errorNodes)
+    }
+
+    if (
+      type === NodeType.USER_TASK_NODE ||
+      type === NodeType.COPY_TASK_NODE ||
+      type === NodeType.CONDITION_NODE
+    ) {
+      if (!showText) {
+        errorNodes.push(node)
+      }
+      validateNode(node.childNode, errorNodes)
+    }
+
+    if (
+      type == NodeType.CONDITION_BRANCH_NODE ||
+      type == NodeType.PARALLEL_BRANCH_NODE ||
+      type == NodeType.INCLUSIVE_BRANCH_NODE
+    ) {
+      // 分支节点
+      // 1. 先校验各个分支
+      conditionNodes?.forEach((item) => {
+        validateNode(item, errorNodes)
+      })
+      // 2. 校验孩子节点
+      validateNode(node.childNode, errorNodes)
+    }
+  }
+}
+
+onMounted(async () => {
+  try {
+    loading.value = true
+    // 获取表单字段
+    if (props.modelId) {
+      const bpmnModel = await getModel(props.modelId)
+      if (bpmnModel) {
+        formType.value = bpmnModel.formType
+        if (formType.value === BpmModelFormType.NORMAL && bpmnModel.formId) {
+          const bpmnForm = (await getForm(bpmnModel.formId)) as unknown as FormVO
+          formFields.value = bpmnForm?.fields
+        }
+      }
+    }
+    // 获得角色列表
+    roleOptions.value = await RoleApi.getSimpleRoleList()
+    // 获得岗位列表
+    postOptions.value = await PostApi.getSimplePostList()
+    // 获得用户列表
+    userOptions.value = await UserApi.getSimpleUserList()
+    // 获得部门列表
+    deptOptions.value = await DeptApi.getSimpleDeptList()
+    deptTreeOptions.value = handleTree(deptOptions.value as DeptApi.DeptVO[], 'id')
+    // 获取用户组列表
+    userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+    // 加载流程数据
+    if (processData.value) {
+      processNodeTree.value = processData?.value
+    } else {
+      updateModel()
+    }
+  } finally {
+    loading.value = false
+  }
+})
+
+const simpleProcessModelRef = ref()
+
+defineExpose({})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
new file mode 100644
index 0000000..a8a0ac6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="simple-process-model-container position-relative">
+    <div class="position-absolute top-0px right-0px bg-#fff z-index-button-group">
+      <el-row type="flex" justify="end">
+        <el-button-group key="scale-control" size="default">
+          <el-button v-if="!readonly" size="default" @click="exportJson">
+            <Icon icon="ep:download" /> 导出
+          </el-button>
+          <el-button v-if="!readonly" size="default" @click="importJson">
+            <Icon icon="ep:upload" />导入
+          </el-button>
+          <!-- 用于打开本地文件-->
+          <input
+            v-if="!readonly"
+            type="file"
+            id="files"
+            ref="refFile"
+            style="display: none"
+            accept=".json"
+            @change="importLocalFile"
+          />
+          <el-button size="default" :icon="ScaleToOriginal" @click="processReZoom()" />
+          <el-button size="default" :plain="true" :icon="ZoomOut" @click="zoomOut()" />
+          <el-button size="default" class="w-80px"> {{ scaleValue }}% </el-button>
+          <el-button size="default" :plain="true" :icon="ZoomIn" @click="zoomIn()" />
+          <el-button size="default" @click="resetPosition">重置</el-button>
+        </el-button-group>
+      </el-row>
+    </div>
+    <div
+      class="simple-process-model"
+      :style="`transform: translate(${currentX}px, ${currentY}px) scale(${scaleValue / 100});`"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @mouseup="stopDrag"
+      @mouseleave="stopDrag"
+      @mouseenter="setGrabCursor"
+    >
+      <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
+    </div>
+  </div>
+  <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
+    <div class="mb-2">以下节点内容不完善，请修改后保存</div>
+    <div
+      class="mb-3 b-rounded-1 bg-gray-100 p-2 line-height-normal"
+      v-for="(item, index) in errorNodes"
+      :key="index"
+    >
+      {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+    </div>
+    <template #footer>
+      <el-button type="primary" @click="errorDialogVisible = false">知道了</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import ProcessNodeTree from './ProcessNodeTree.vue'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
+import { useWatchNode } from './node'
+import { ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue'
+import { isString } from '@/utils/is'
+import download from '@/utils/download'
+
+defineOptions({
+  name: 'SimpleProcessModel'
+})
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  },
+  readonly: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+})
+
+const emits = defineEmits<{
+  save: [node: SimpleFlowNode | undefined]
+}>()
+
+const processNodeTree = useWatchNode(props)
+
+provide('readonly', props.readonly)
+
+// TODO 可优化：拖拽有点卡顿
+/** 拖拽、放大缩小等操作 */
+let scaleValue = ref(100)
+const MAX_SCALE_VALUE = 200
+const MIN_SCALE_VALUE = 50
+const isDragging = ref(false)
+const startX = ref(0)
+const startY = ref(0)
+const currentX = ref(0)
+const currentY = ref(0)
+const initialX = ref(0)
+const initialY = ref(0)
+
+const setGrabCursor = () => {
+  document.body.style.cursor = 'grab'
+}
+
+const resetCursor = () => {
+  document.body.style.cursor = 'default'
+}
+
+const startDrag = (e: MouseEvent) => {
+  isDragging.value = true
+  startX.value = e.clientX - currentX.value
+  startY.value = e.clientY - currentY.value
+  setGrabCursor() // 设置小手光标
+}
+
+const onDrag = (e: MouseEvent) => {
+  if (!isDragging.value) return
+  e.preventDefault() // 禁用文本选择
+
+  // 使用 requestAnimationFrame 优化性能
+  requestAnimationFrame(() => {
+    currentX.value = e.clientX - startX.value
+    currentY.value = e.clientY - startY.value
+  })
+}
+
+const stopDrag = () => {
+  isDragging.value = false
+  resetCursor() // 重置光标
+}
+
+const zoomIn = () => {
+  if (scaleValue.value == MAX_SCALE_VALUE) {
+    return
+  }
+  scaleValue.value += 10
+}
+
+const zoomOut = () => {
+  if (scaleValue.value == MIN_SCALE_VALUE) {
+    return
+  }
+  scaleValue.value -= 10
+}
+
+const processReZoom = () => {
+  scaleValue.value = 100
+}
+
+const resetPosition = () => {
+  currentX.value = initialX.value
+  currentY.value = initialY.value
+}
+
+/** 校验节点设置 */
+const errorDialogVisible = ref(false)
+let errorNodes: SimpleFlowNode[] = []
+
+const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
+  if (node) {
+    const { type, showText, conditionNodes } = node
+    if (type == NodeType.END_EVENT_NODE) {
+      return
+    }
+    if (type == NodeType.START_USER_NODE) {
+      // 发起人节点暂时不用校验，直接校验孩子节点
+      validateNode(node.childNode, errorNodes)
+    }
+
+    if (
+      type === NodeType.USER_TASK_NODE ||
+      type === NodeType.COPY_TASK_NODE ||
+      type === NodeType.CONDITION_NODE
+    ) {
+      if (!showText) {
+        errorNodes.push(node)
+      }
+      validateNode(node.childNode, errorNodes)
+    }
+
+    if (
+      type == NodeType.CONDITION_BRANCH_NODE ||
+      type == NodeType.PARALLEL_BRANCH_NODE ||
+      type == NodeType.INCLUSIVE_BRANCH_NODE
+    ) {
+      // 分支节点
+      // 1. 先校验各个分支
+      conditionNodes?.forEach((item) => {
+        validateNode(item, errorNodes)
+      })
+      // 2. 校验孩子节点
+      validateNode(node.childNode, errorNodes)
+    }
+  }
+}
+
+/** 获取当前流程数据 */
+const getCurrentFlowData = async () => {
+  try {
+    errorNodes = []
+    validateNode(processNodeTree.value, errorNodes)
+    if (errorNodes.length > 0) {
+      errorDialogVisible.value = true
+      return undefined
+    }
+    return processNodeTree.value
+  } catch (error) {
+    console.error('获取流程数据失败:', error)
+    return undefined
+  }
+}
+
+defineExpose({
+  getCurrentFlowData
+})
+
+/** 导出 JSON */
+const exportJson = () => {
+  download.json(new Blob([JSON.stringify(processNodeTree.value)]), 'model.json')
+}
+
+/** 导入 JSON */
+const refFile = ref()
+const importJson = () => {
+  refFile.value.click()
+}
+const importLocalFile = () => {
+  const file = refFile.value.files[0]
+  const reader = new FileReader()
+  reader.readAsText(file)
+  reader.onload = function () {
+    if (isString(this.result)) {
+      processNodeTree.value = JSON.parse(this.result)
+      emits('save', processNodeTree.value)
+    }
+  }
+}
+
+// 在组件初始化时记录初始位置
+onMounted(() => {
+  initialX.value = currentX.value
+  initialY.value = currentY.value
+})
+</script>
+
+<style lang="scss" scoped>
+.simple-process-model-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  user-select: none; // 禁用文本选择
+}
+
+.simple-process-model {
+  position: relative; // 确保相对定位
+  min-width: 100%; // 确保宽度为100%
+  min-height: 100%; // 确保高度为100%
+}
+
+.z-index-button-group {
+  z-index: 10;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
new file mode 100644
index 0000000..26cd43f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
@@ -0,0 +1,47 @@
+<template>
+  <SimpleProcessModel :flow-node="simpleModel" :readonly="true" />
+</template>
+
+<script setup lang="ts">
+import { useWatchNode } from './node'
+import { SimpleFlowNode } from './consts'
+
+defineOptions({
+  name: 'SimpleProcessViewer'
+})
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  },
+  // 流程任务
+  tasks: {
+    type: Array,
+    default: () => [] as any[]
+  },
+  // 流程实例
+  processInstance: {
+    type: Object,
+    default: () => undefined
+  }
+})
+const approveTasks = ref<any[]>(props.tasks)
+const currentProcessInstance = ref(props.processInstance)
+const simpleModel = useWatchNode(props)
+watch(
+  () => props.tasks,
+  (newValue) => {
+    approveTasks.value = newValue
+  }
+)
+watch(
+  () => props.processInstance,
+  (newValue) => {
+    currentProcessInstance.value = newValue
+  }
+)
+
+provide('tasks', approveTasks)
+provide('processInstance', currentProcessInstance)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/consts.ts b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/consts.ts
new file mode 100644
index 0000000..8cdc996
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -0,0 +1,900 @@
+// @ts-ignore
+import { DictDataVO } from '@/api/system/dict/types'
+import { TaskStatusEnum } from '@/api/bpm/task'
+/**
+ * 节点类型
+ */
+export enum NodeType {
+  /**
+   * 结束节点
+   */
+  END_EVENT_NODE = 1,
+  /**
+   * 发起人节点
+   */
+  START_USER_NODE = 10,
+  /**
+   * 审批人节点
+   */
+  USER_TASK_NODE = 11,
+
+  /**
+   * 抄送人节点
+   */
+  COPY_TASK_NODE = 12,
+
+  /**
+   * 办理人节点
+   */
+  TRANSACTOR_NODE = 13,
+
+  /**
+   * 延迟器节点
+   */
+  DELAY_TIMER_NODE = 14,
+
+  /**
+   * 触发器节点
+   */
+  TRIGGER_NODE = 15,
+
+  /**
+   * 子流程节点
+   */
+  CHILD_PROCESS_NODE = 20,
+
+  /**
+   * 条件节点
+   */
+  CONDITION_NODE = 50,
+  /**
+   * 条件分支节点 (对应排他网关)
+   */
+  CONDITION_BRANCH_NODE = 51,
+  /**
+   * 并行分支节点 (对应并行网关)
+   */
+  PARALLEL_BRANCH_NODE = 52,
+
+  /**
+   * 包容分支节点 (对应包容网关)
+   */
+  INCLUSIVE_BRANCH_NODE = 53,
+  /**
+   * 路由分支节点
+   */
+  ROUTER_BRANCH_NODE = 54
+}
+
+export enum NodeId {
+  /**
+   * 发起人节点 Id
+   */
+  START_USER_NODE_ID = 'StartUserNode',
+
+  /**
+   * 发起人节点 Id
+   */
+  END_EVENT_NODE_ID = 'EndEvent'
+}
+
+/**
+ *  节点结构定义
+ */
+export interface SimpleFlowNode {
+  id: string
+  type: NodeType
+  name: string
+  showText?: string
+  // 孩子节点
+  childNode?: SimpleFlowNode
+  // 条件节点
+  conditionNodes?: SimpleFlowNode[]
+  // 审批类型
+  approveType?: ApproveType
+  // 候选人策略
+  candidateStrategy?: number
+  // 候选人参数
+  candidateParam?: string
+  // 多人审批方式
+  approveMethod?: ApproveMethodType
+  //通过比例
+  approveRatio?: number
+  // 审批按钮设置
+  buttonsSetting?: any[]
+  // 表单权限
+  fieldsPermission?: Array<Record<string, any>>
+  // 审批任务超时处理
+  timeoutHandler?: TimeoutHandler
+  // 审批任务拒绝处理
+  rejectHandler?: RejectHandler
+  // 审批人为空的处理
+  assignEmptyHandler?: AssignEmptyHandler
+  // 审批节点的审批人与发起人相同时，对应的处理类型
+  assignStartUserHandlerType?: number
+  // 创建任务监听器
+  taskCreateListener?: ListenerHandler
+  // 创建任务监听器
+  taskAssignListener?: ListenerHandler
+  // 创建任务监听器
+  taskCompleteListener?: ListenerHandler
+  // 条件设置
+  conditionSetting?: ConditionSetting
+  // 活动的状态，用于前端节点状态展示
+  activityStatus?: TaskStatusEnum
+  // 延迟设置
+  delaySetting?: DelaySetting
+  // 路由分支
+  routerGroups?: RouterSetting[]
+  defaultFlowId?: string
+  // 签名
+  signEnable?: boolean
+  // 审批意见
+  reasonRequire?: boolean
+  // 触发器设置
+  triggerSetting?: TriggerSetting
+  // 子流程
+  childProcessSetting?: ChildProcessSetting
+}
+// 候选人策略枚举 （ 用于审批节点。抄送节点 )
+export enum CandidateStrategy {
+  /**
+   * 指定角色
+   */
+  ROLE = 10,
+  /**
+   * 部门成员
+   */
+  DEPT_MEMBER = 20,
+  /**
+   * 部门的负责人
+   */
+  DEPT_LEADER = 21,
+  /**
+   * 连续多级部门的负责人
+   */
+  MULTI_LEVEL_DEPT_LEADER = 23,
+  /**
+   * 指定岗位
+   */
+  POST = 22,
+  /**
+   * 指定用户
+   */
+  USER = 30,
+  /**
+   * 审批人自选
+   */
+  APPROVE_USER_SELECT = 34,
+  /**
+   * 发起人自选
+   */
+  START_USER_SELECT = 35,
+  /**
+   * 发起人自己
+   */
+  START_USER = 36,
+  /**
+   * 发起人部门负责人
+   */
+  START_USER_DEPT_LEADER = 37,
+  /**
+   * 发起人连续多级部门的负责人
+   */
+  START_USER_MULTI_LEVEL_DEPT_LEADER = 38,
+  /**
+   * 指定用户组
+   */
+  USER_GROUP = 40,
+  /**
+   * 表单内用户字段
+   */
+  FORM_USER = 50,
+  /**
+   * 表单内部门负责人
+   */
+  FORM_DEPT_LEADER = 51,
+  /**
+   * 流程表达式
+   */
+  EXPRESSION = 60
+}
+
+// 多人审批方式类型枚举 （ 用于审批节点 ）
+export enum ApproveMethodType {
+  /**
+   * 随机挑选一人审批
+   */
+  RANDOM_SELECT_ONE_APPROVE = 1,
+
+  /**
+   * 多人会签(按通过比例)
+   */
+  APPROVE_BY_RATIO = 2,
+
+  /**
+   * 多人或签(通过只需一人，拒绝只需一人)
+   */
+  ANY_APPROVE = 3,
+  /**
+   * 多人依次审批
+   */
+  SEQUENTIAL_APPROVE = 4
+}
+
+/**
+ * 审批拒绝结构定义
+ */
+export type RejectHandler = {
+  // 审批拒绝类型
+  type: RejectHandlerType
+  // 退回节点 Id
+  returnNodeId?: string
+}
+
+/**
+ * 审批超时结构定义
+ */
+export type TimeoutHandler = {
+  // 是否开启超时处理
+  enable: boolean
+  // 超时执行的动作
+  type?: number
+  // 超时时间设置
+  timeDuration?: string
+  // 执行动作是自动提醒, 最大提醒次数
+  maxRemindCount?: number
+}
+
+/**
+ * 审批人为空的结构定义
+ */
+export type AssignEmptyHandler = {
+  // 审批人为空的处理类型
+  type: AssignEmptyHandlerType
+  // 指定用户的编号数组
+  userIds?: number[]
+}
+
+/**
+ * 监听器的结构定义
+ */
+export type ListenerHandler = {
+  enable: boolean
+  path?: string
+  header?: HttpRequestParam[]
+  body?: HttpRequestParam[]
+}
+export type HttpRequestParam = {
+  key: string
+  type: number
+  value: string
+}
+export enum BpmHttpRequestParamTypeEnum {
+  /**
+   * 固定值
+   */
+  FIXED_VALUE = 1,
+  /**
+   * 表单
+   */
+  FROM_FORM = 2
+}
+export const BPM_HTTP_REQUEST_PARAM_TYPES = [
+  {
+    value: 1,
+    label: '固定值'
+  },
+  {
+    value: 2,
+    label: '表单'
+  }
+]
+
+// 审批拒绝类型枚举
+export enum RejectHandlerType {
+  /**
+   * 结束流程
+   */
+  FINISH_PROCESS = 1,
+  /**
+   * 驳回到指定节点
+   */
+  RETURN_USER_TASK = 2
+}
+// 用户任务超时处理类型枚举
+export enum TimeoutHandlerType {
+  /**
+   * 自动提醒
+   */
+  REMINDER = 1,
+  /**
+   * 自动同意
+   */
+  APPROVE = 2,
+  /**
+   * 自动拒绝
+   */
+  REJECT = 3
+}
+// 用户任务的审批人为空时，处理类型枚举
+export enum AssignEmptyHandlerType {
+  /**
+   * 自动通过
+   */
+  APPROVE = 1,
+  /**
+   * 自动拒绝
+   */
+  REJECT = 2,
+  /**
+   * 指定人员审批
+   */
+  ASSIGN_USER,
+  /**
+   * 转交给流程管理员
+   */
+  ASSIGN_ADMIN = 4
+}
+// 用户任务的审批人与发起人相同时，处理类型枚举
+export enum AssignStartUserHandlerType {
+  /**
+   * 由发起人对自己审批
+   */
+  START_USER_AUDIT = 1,
+  /**
+   * 自动跳过【参考飞书】：1）如果当前节点还有其他审批人，则交由其他审批人进行审批；2）如果当前节点没有其他审批人，则该节点自动通过
+   */
+  SKIP = 2,
+  /**
+   * 转交给部门负责人审批
+   */
+  ASSIGN_DEPT_LEADER = 3
+}
+
+// 用户任务的审批类型。 【参考飞书】
+export enum ApproveType {
+  /**
+   * 人工审批
+   */
+  USER = 1,
+  /**
+   * 自动通过
+   */
+  AUTO_APPROVE = 2,
+  /**
+   * 自动拒绝
+   */
+  AUTO_REJECT = 3
+}
+
+// 时间单位枚举
+export enum TimeUnitType {
+  /**
+   * 分钟
+   */
+  MINUTE = 1,
+  /**
+   * 小时
+   */
+  HOUR = 2,
+  /**
+   * 天
+   */
+  DAY = 3
+}
+
+/**
+ * 条件节点设置结构定义，用于条件节点
+ */
+export type ConditionSetting = {
+  // 条件类型
+  conditionType?: ConditionType
+  // 条件表达式
+  conditionExpression?: string
+  // 条件组
+  conditionGroups?: ConditionGroup
+  // 是否默认的条件
+  defaultFlow?: boolean
+}
+
+// 条件配置类型 （ 用于条件节点配置 ）
+export enum ConditionType {
+  /**
+   * 条件表达式
+   */
+  EXPRESSION = 1,
+
+  /**
+   * 条件规则
+   */
+  RULE = 2
+}
+/**
+ * 表单权限的枚举
+ */
+export enum FieldPermissionType {
+  /**
+   * 只读
+   */
+  READ = '1',
+  /**
+   * 编辑
+   */
+  WRITE = '2',
+  /**
+   * 隐藏
+   */
+  NONE = '3'
+}
+/**
+ * 操作按钮权限结构定义
+ */
+export type ButtonSetting = {
+  id: OperationButtonType
+  displayName: string
+  enable: boolean
+}
+
+// 操作按钮类型枚举 (用于审批节点)
+export enum OperationButtonType {
+  /**
+   * 通过
+   */
+  APPROVE = 1,
+  /**
+   * 拒绝
+   */
+  REJECT = 2,
+  /**
+   * 转办
+   */
+  TRANSFER = 3,
+  /**
+   * 委派
+   */
+  DELEGATE = 4,
+  /**
+   * 加签
+   */
+  ADD_SIGN = 5,
+  /**
+   * 退回
+   */
+  RETURN = 6,
+  /**
+   * 抄送
+   */
+  COPY = 7
+}
+
+/**
+ * 条件规则结构定义
+ */
+export type ConditionRule = {
+  opCode: string
+  leftSide: string
+  rightSide: string
+}
+
+/**
+ * 条件组结构定义
+ */
+export type ConditionGroup = {
+  // 条件组的逻辑关系是否为且
+  and: boolean
+  // 条件数组
+  conditions: Condition[]
+}
+/**
+ * 条件组默认值
+ */
+export const DEFAULT_CONDITION_GROUP_VALUE = {
+  and: true,
+  conditions: [
+    {
+      and: true,
+      rules: [
+        {
+          opCode: '==',
+          leftSide: '',
+          rightSide: ''
+        }
+      ]
+    }
+  ]
+}
+
+/**
+ * 条件结构定义
+ */
+export type Condition = {
+  // 条件规则的逻辑关系是否为且
+  and: boolean
+  rules: ConditionRule[]
+}
+
+export const NODE_DEFAULT_TEXT = new Map<number, string>()
+NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人')
+NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人')
+NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件')
+NODE_DEFAULT_TEXT.set(NodeType.START_USER_NODE, '请设置发起人')
+NODE_DEFAULT_TEXT.set(NodeType.DELAY_TIMER_NODE, '请设置延迟器')
+NODE_DEFAULT_TEXT.set(NodeType.ROUTER_BRANCH_NODE, '请设置路由节点')
+NODE_DEFAULT_TEXT.set(NodeType.TRIGGER_NODE, '请设置触发器')
+NODE_DEFAULT_TEXT.set(NodeType.TRANSACTOR_NODE, '请设置办理人')
+NODE_DEFAULT_TEXT.set(NodeType.CHILD_PROCESS_NODE, '请设置子流程')
+
+export const NODE_DEFAULT_NAME = new Map<number, string>()
+NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
+NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
+NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
+NODE_DEFAULT_NAME.set(NodeType.START_USER_NODE, '发起人')
+NODE_DEFAULT_NAME.set(NodeType.DELAY_TIMER_NODE, '延迟器')
+NODE_DEFAULT_NAME.set(NodeType.ROUTER_BRANCH_NODE, '路由分支')
+NODE_DEFAULT_NAME.set(NodeType.TRIGGER_NODE, '触发器')
+NODE_DEFAULT_NAME.set(NodeType.TRANSACTOR_NODE, '办理人')
+NODE_DEFAULT_NAME.set(NodeType.CHILD_PROCESS_NODE, '子流程')
+
+// 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
+export const CANDIDATE_STRATEGY: DictDataVO[] = [
+  { label: '指定成员', value: CandidateStrategy.USER },
+  { label: '指定角色', value: CandidateStrategy.ROLE },
+  { label: '指定岗位', value: CandidateStrategy.POST },
+  { label: '部门成员', value: CandidateStrategy.DEPT_MEMBER },
+  { label: '部门负责人', value: CandidateStrategy.DEPT_LEADER },
+  { label: '连续多级部门负责人', value: CandidateStrategy.MULTI_LEVEL_DEPT_LEADER },
+  { label: '发起人自选', value: CandidateStrategy.START_USER_SELECT },
+  { label: '审批人自选', value: CandidateStrategy.APPROVE_USER_SELECT },
+  { label: '发起人本人', value: CandidateStrategy.START_USER },
+  { label: '发起人部门负责人', value: CandidateStrategy.START_USER_DEPT_LEADER },
+  { label: '发起人连续部门负责人', value: CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER },
+  { label: '用户组', value: CandidateStrategy.USER_GROUP },
+  { label: '表单内用户字段', value: CandidateStrategy.FORM_USER },
+  { label: '表单内部门负责人', value: CandidateStrategy.FORM_DEPT_LEADER },
+  { label: '流程表达式', value: CandidateStrategy.EXPRESSION }
+]
+// 审批节点 的审批类型
+export const APPROVE_TYPE: DictDataVO[] = [
+  { label: '人工审批', value: ApproveType.USER },
+  { label: '自动通过', value: ApproveType.AUTO_APPROVE },
+  { label: '自动拒绝', value: ApproveType.AUTO_REJECT }
+]
+
+export const APPROVE_METHODS: DictDataVO[] = [
+  { label: '按顺序依次审批', value: ApproveMethodType.SEQUENTIAL_APPROVE },
+  { label: '会签（可同时审批，至少 % 人必须审批通过）', value: ApproveMethodType.APPROVE_BY_RATIO },
+  { label: '或签(可同时审批，有一人通过即可)', value: ApproveMethodType.ANY_APPROVE },
+  { label: '随机挑选一人审批', value: ApproveMethodType.RANDOM_SELECT_ONE_APPROVE }
+]
+
+export const CONDITION_CONFIG_TYPES: DictDataVO[] = [
+  { label: '条件规则', value: ConditionType.RULE },
+  { label: '条件表达式', value: ConditionType.EXPRESSION }
+]
+
+// 时间单位类型
+export const TIME_UNIT_TYPES: DictDataVO[] = [
+  { label: '分钟', value: TimeUnitType.MINUTE },
+  { label: '小时', value: TimeUnitType.HOUR },
+  { label: '天', value: TimeUnitType.DAY }
+]
+// 超时处理执行动作类型
+export const TIMEOUT_HANDLER_TYPES: DictDataVO[] = [
+  { label: '自动提醒', value: 1 },
+  { label: '自动同意', value: 2 },
+  { label: '自动拒绝', value: 3 }
+]
+export const REJECT_HANDLER_TYPES: DictDataVO[] = [
+  { label: '终止流程', value: RejectHandlerType.FINISH_PROCESS },
+  { label: '驳回到指定节点', value: RejectHandlerType.RETURN_USER_TASK }
+  // { label: '结束任务', value: RejectHandlerType.FINISH_TASK }
+]
+export const ASSIGN_EMPTY_HANDLER_TYPES: DictDataVO[] = [
+  { label: '自动通过', value: 1 },
+  { label: '自动拒绝', value: 2 },
+  { label: '指定成员审批', value: 3 },
+  { label: '转交给流程管理员', value: 4 }
+]
+export const ASSIGN_START_USER_HANDLER_TYPES: DictDataVO[] = [
+  { label: '由发起人对自己审批', value: 1 },
+  { label: '自动跳过', value: 2 },
+  { label: '转交给部门负责人审批', value: 3 }
+]
+
+// 比较运算符
+export const COMPARISON_OPERATORS: DictDataVO = [
+  {
+    value: '==',
+    label: '等于'
+  },
+  {
+    value: '!=',
+    label: '不等于'
+  },
+  {
+    value: '>',
+    label: '大于'
+  },
+  {
+    value: '>=',
+    label: '大于等于'
+  },
+  {
+    value: '<',
+    label: '小于'
+  },
+  {
+    value: '<=',
+    label: '小于等于'
+  }
+]
+// 审批操作按钮名称
+export const OPERATION_BUTTON_NAME = new Map<number, string>()
+OPERATION_BUTTON_NAME.set(OperationButtonType.APPROVE, '通过')
+OPERATION_BUTTON_NAME.set(OperationButtonType.REJECT, '拒绝')
+OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办')
+OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派')
+OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签')
+OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '退回')
+OPERATION_BUTTON_NAME.set(OperationButtonType.COPY, '抄送')
+
+// 默认的按钮权限设置
+export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '通过', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: true },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: true },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: true },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: true },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: true }
+]
+
+// 办理人默认的按钮权限设置
+export const TRANSACTOR_DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '办理', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: false },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: false }
+]
+
+// 发起人的按钮权限。暂时定死，不可以编辑
+export const START_USER_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '提交', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: false },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: false }
+]
+
+export const MULTI_LEVEL_DEPT: DictDataVO = [
+  { label: '第 1 级部门', value: 1 },
+  { label: '第 2 级部门', value: 2 },
+  { label: '第 3 级部门', value: 3 },
+  { label: '第 4 级部门', value: 4 },
+  { label: '第 5 级部门', value: 5 },
+  { label: '第 6 级部门', value: 6 },
+  { label: '第 7 级部门', value: 7 },
+  { label: '第 8 级部门', value: 8 },
+  { label: '第 9 级部门', value: 9 },
+  { label: '第 10 级部门', value: 10 },
+  { label: '第 11 级部门', value: 11 },
+  { label: '第 12 级部门', value: 12 },
+  { label: '第 13 级部门', value: 13 },
+  { label: '第 14 级部门', value: 14 },
+  { label: '第 15 级部门', value: 15 }
+]
+
+/**
+ * 流程实例的变量枚举
+ */
+export enum ProcessVariableEnum {
+  /**
+   * 发起用户 ID
+   */
+  START_USER_ID = 'PROCESS_START_USER_ID',
+  /**
+   * 发起时间
+   */
+  START_TIME = 'PROCESS_START_TIME',
+  /**
+   * 流程定义名称
+   */
+  PROCESS_DEFINITION_NAME = 'PROCESS_DEFINITION_NAME'
+}
+
+/**
+ * 延迟设置
+ */
+export type DelaySetting = {
+  // 延迟类型
+  delayType: number
+  // 延迟时间表达式
+  delayTime: string
+}
+/**
+ * 延迟类型
+ */
+export enum DelayTypeEnum {
+  /**
+   * 固定时长
+   */
+  FIXED_TIME_DURATION = 1,
+  /**
+   * 固定日期时间
+   */
+  FIXED_DATE_TIME = 2
+}
+export const DELAY_TYPE = [
+  { label: '固定时长', value: DelayTypeEnum.FIXED_TIME_DURATION },
+  { label: '固定日期', value: DelayTypeEnum.FIXED_DATE_TIME }
+]
+
+/**
+ * 路由分支结构定义
+ */
+export type RouterSetting = {
+  nodeId: string
+  conditionType: ConditionType
+  conditionExpression: string
+  conditionGroups: ConditionGroup
+}
+
+// ==================== 触发器相关定义 ====================
+/**
+ * 触发器节点结构定义
+ */
+export type TriggerSetting = {
+  type: TriggerTypeEnum
+  httpRequestSetting?: HttpRequestTriggerSetting
+  formSettings?: FormTriggerSetting[]
+}
+
+/**
+ * 触发器类型枚举
+ */
+export enum TriggerTypeEnum {
+  /**
+   * 发送 HTTP 请求触发器
+   */
+  HTTP_REQUEST = 1,
+  /**
+   * 接收 HTTP 回调请求触发器
+   */
+  HTTP_CALLBACK = 2,
+  /**
+   * 表单数据更新触发器
+   */
+  FORM_UPDATE = 10,
+  /**
+   * 表单数据删除触发器
+   */
+  FORM_DELETE = 11
+}
+
+/**
+ * HTTP 请求触发器结构定义
+ */
+export type HttpRequestTriggerSetting = {
+  // 请求 URL
+  url: string
+  // 请求头参数设置
+  header?: HttpRequestParam[]
+  // 请求体参数设置
+  body?: HttpRequestParam[]
+  // 请求响应设置
+  response?: Record<string, string>[]
+}
+
+/**
+ * 流程表单触发器配置结构定义
+ */
+export type FormTriggerSetting = {
+  // 条件类型
+  conditionType?: ConditionType
+  // 条件表达式
+  conditionExpression?: string
+  // 条件组
+  conditionGroups?: ConditionGroup
+  // 更新表单字段配置
+  updateFormFields?: Record<string, any>
+  // 删除表单字段配置
+  deleteFields?: string[]
+}
+
+export const TRIGGER_TYPES: DictDataVO[] = [
+  { label: '发送 HTTP 请求', value: TriggerTypeEnum.HTTP_REQUEST },
+  { label: '接收 HTTP 回调', value: TriggerTypeEnum.HTTP_CALLBACK },
+  { label: '修改表单数据', value: TriggerTypeEnum.FORM_UPDATE },
+  { label: '删除表单数据', value: TriggerTypeEnum.FORM_DELETE }
+]
+
+/**
+ * 子流程节点结构定义
+ */
+export type ChildProcessSetting = {
+  calledProcessDefinitionKey: string
+  calledProcessDefinitionName: string
+  async: boolean
+  inVariables?: IOParameter[]
+  outVariables?: IOParameter[]
+  skipStartUserNode: boolean
+  startUserSetting: StartUserSetting
+  timeoutSetting: TimeoutSetting
+  multiInstanceSetting: MultiInstanceSetting
+}
+export type IOParameter = {
+  source: string
+  target: string
+}
+export type StartUserSetting = {
+  type: ChildProcessStartUserTypeEnum
+  formField?: string
+  emptyType?: ChildProcessStartUserEmptyTypeEnum
+}
+export type TimeoutSetting = {
+  enable: boolean
+  type?: DelayTypeEnum
+  timeExpression?: string
+}
+export type MultiInstanceSetting = {
+  enable: boolean
+  sequential?: boolean
+  approveRatio?: number
+  sourceType?: ChildProcessMultiInstanceSourceTypeEnum
+  source?: string
+}
+export enum ChildProcessStartUserTypeEnum {
+  /**
+   * 同主流程发起人
+   */
+  MAIN_PROCESS_START_USER = 1,
+  /**
+   * 表单
+   */
+  FROM_FORM = 2
+}
+export const CHILD_PROCESS_START_USER_TYPE = [
+  { label: '同主流程发起人', value: ChildProcessStartUserTypeEnum.MAIN_PROCESS_START_USER },
+  { label: '表单', value: ChildProcessStartUserTypeEnum.FROM_FORM }
+]
+export enum ChildProcessStartUserEmptyTypeEnum {
+  /**
+   * 同主流程发起人
+   */
+  MAIN_PROCESS_START_USER = 1,
+  /**
+   * 子流程管理员
+   */
+  CHILD_PROCESS_ADMIN = 2,
+  /**
+   * 主流程管理员
+   */
+  MAIN_PROCESS_ADMIN = 3
+}
+export const CHILD_PROCESS_START_USER_EMPTY_TYPE = [
+  { label: '同主流程发起人', value: ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_START_USER },
+  { label: '子流程管理员', value: ChildProcessStartUserEmptyTypeEnum.CHILD_PROCESS_ADMIN },
+  { label: '主流程管理员', value: ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_ADMIN }
+]
+export enum ChildProcessMultiInstanceSourceTypeEnum {
+  /**
+   * 固定数量
+   */
+  FIXED_QUANTITY = 1,
+  /**
+   * 数字表单
+   */
+  NUMBER_FORM = 2,
+  /**
+   * 多选表单
+   */
+  MULTIPLE_FORM = 3
+}
+export const CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE = [
+  { label: '固定数量', value: ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY },
+  { label: '数字表单', value: ChildProcessMultiInstanceSourceTypeEnum.NUMBER_FORM },
+  { label: '多选表单', value: ChildProcessMultiInstanceSourceTypeEnum.MULTIPLE_FORM }
+]
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/index.ts b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/index.ts
new file mode 100644
index 0000000..88de07f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/index.ts
@@ -0,0 +1,5 @@
+import SimpleProcessDesigner from './SimpleProcessDesigner.vue'
+import SimpleProcessViewer from './SimpleProcessViewer.vue'
+import '../theme/simple-process-designer.scss'
+
+export { SimpleProcessDesigner, SimpleProcessViewer}
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/node.ts b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/node.ts
new file mode 100644
index 0000000..5b754bf
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -0,0 +1,616 @@
+import { TaskStatusEnum } from '@/api/bpm/task'
+import * as RoleApi from '@/api/system/role'
+import * as DeptApi from '@/api/system/dept'
+import * as PostApi from '@/api/system/post'
+import * as UserApi from '@/api/system/user'
+import * as UserGroupApi from '@/api/bpm/userGroup'
+import {
+  SimpleFlowNode,
+  CandidateStrategy,
+  NodeType,
+  ApproveMethodType,
+  RejectHandlerType,
+  NODE_DEFAULT_NAME,
+  AssignStartUserHandlerType,
+  AssignEmptyHandlerType,
+  FieldPermissionType,
+  HttpRequestParam,
+  ProcessVariableEnum,
+  ConditionType,
+  ConditionGroup,
+  COMPARISON_OPERATORS
+} from './consts'
+import { parseFormFields } from '@/components/FormCreate/src/utils'
+
+export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
+  const node = ref<SimpleFlowNode>(props.flowNode)
+  watch(
+    () => props.flowNode,
+    (newValue) => {
+      node.value = newValue
+    }
+  )
+  return node
+}
+
+// 解析 formCreate 所有表单字段, 并返回
+const parseFormCreateFields = (formFields?: string[]) => {
+  const result: Array<Record<string, any>> = []
+  if (formFields) {
+    formFields.forEach((fieldStr: string) => {
+      parseFormFields(JSON.parse(fieldStr), result)
+    })
+  }
+  return result
+}
+
+/**
+ * @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
+ */
+export function useFormFieldsPermission(defaultPermission: FieldPermissionType) {
+  // 字段权限配置. 需要有 field, title,  permissioin 属性
+  const fieldsPermissionConfig = ref<Array<Record<string, any>>>([])
+
+  const formType = inject<Ref<number | undefined>>('formType', ref()) // 表单类型
+
+  const formFields = inject<Ref<string[]>>('formFields', ref([])) // 流程表单字段
+
+  const getNodeConfigFormFields = (nodeFormFields?: Array<Record<string, string>>) => {
+    nodeFormFields = toRaw(nodeFormFields)
+    if (!nodeFormFields || nodeFormFields.length === 0) {
+      fieldsPermissionConfig.value = getDefaultFieldsPermission(unref(formFields))
+    } else {
+      fieldsPermissionConfig.value = mergeFieldsPermission(nodeFormFields, unref(formFields))
+    }
+  }
+  // 合并已经设置的表单字段权限，当前流程表单字段 (可能新增，或删除了字段)
+  const mergeFieldsPermission = (
+    formFieldsPermisson: Array<Record<string, string>>,
+    formFields?: string[]
+  ) => {
+    let mergedFieldsPermission: Array<Record<string, any>> = []
+    if (formFields) {
+      mergedFieldsPermission = parseFormCreateFields(formFields).map((item) => {
+        const found = formFieldsPermisson.find(
+          (fieldPermission) => fieldPermission.field == item.field
+        )
+        return {
+          field: item.field,
+          title: item.title,
+          permission: found ? found.permission : defaultPermission
+        }
+      })
+    }
+    return mergedFieldsPermission
+  }
+
+  // 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
+  const getDefaultFieldsPermission = (formFields?: string[]) => {
+    let defaultFieldsPermission: Array<Record<string, any>> = []
+    if (formFields) {
+      defaultFieldsPermission = parseFormCreateFields(formFields).map((item) => {
+        return {
+          field: item.field,
+          title: item.title,
+          permission: defaultPermission
+        }
+      })
+    }
+    return defaultFieldsPermission
+  }
+
+  // 获取表单的所有字段，作为下拉框选项
+  const formFieldOptions = parseFormCreateFields(unref(formFields))
+
+  return {
+    formType,
+    fieldsPermissionConfig,
+    formFieldOptions,
+    getNodeConfigFormFields
+  }
+}
+
+/**
+ * @description 获取流程表单的字段
+ */
+export function useFormFields() {
+  const formFields = inject<Ref<string[]>>('formFields', ref([])) // 流程表单字段
+  return parseFormCreateFields(unref(formFields))
+}
+
+// TODO @芋艿：后续需要把各种类似 useFormFieldsPermission 的逻辑，抽成一个通用方法。
+/**
+ * @description 获取流程表单的字段和发起人字段
+ */
+export function useFormFieldsAndStartUser() {
+  const injectFormFields = inject<Ref<string[]>>('formFields', ref([])) // 流程表单字段
+  const formFields = parseFormCreateFields(unref(injectFormFields))
+  // 添加发起人
+  formFields.unshift({
+    field: ProcessVariableEnum.START_USER_ID,
+    title: '发起人',
+    required: true
+  })
+  return formFields
+}
+
+export type UserTaskFormType = {
+  candidateStrategy: CandidateStrategy
+  approveMethod: ApproveMethodType
+  roleIds?: number[] // 角色
+  deptIds?: number[] // 部门
+  deptLevel?: number // 部门层级
+  userIds?: number[] // 用户
+  userGroups?: number[] // 用户组
+  postIds?: number[] // 岗位
+  expression?: string // 流程表达式
+  formUser?: string // 表单内用户字段
+  formDept?: string // 表单内部门字段
+  approveRatio?: number
+  rejectHandlerType?: RejectHandlerType
+  returnNodeId?: string
+  timeoutHandlerEnable?: boolean
+  timeoutHandlerType?: number
+  assignEmptyHandlerType?: AssignEmptyHandlerType
+  assignEmptyHandlerUserIds?: number[]
+  assignStartUserHandlerType?: AssignStartUserHandlerType
+  timeDuration?: number
+  maxRemindCount?: number
+  buttonsSetting: any[]
+  taskCreateListenerEnable?: boolean
+  taskCreateListenerPath?: string
+  taskCreateListener?: {
+    header: HttpRequestParam[]
+    body: HttpRequestParam[]
+  }
+  taskAssignListenerEnable?: boolean
+  taskAssignListenerPath?: string
+  taskAssignListener?: {
+    header: HttpRequestParam[]
+    body: HttpRequestParam[]
+  }
+  taskCompleteListenerEnable?: boolean
+  taskCompleteListenerPath?: string
+  taskCompleteListener?: {
+    header: HttpRequestParam[]
+    body: HttpRequestParam[]
+  }
+  signEnable: boolean
+  reasonRequire: boolean
+}
+
+export type CopyTaskFormType = {
+  candidateStrategy: CandidateStrategy
+  roleIds?: number[] // 角色
+  deptIds?: number[] // 部门
+  deptLevel?: number // 部门层级
+  userIds?: number[] // 用户
+  userGroups?: number[] // 用户组
+  postIds?: number[] // 岗位
+  formUser?: string // 表单内用户字段
+  formDept?: string // 表单内部门字段
+  expression?: string // 流程表达式
+}
+
+/**
+ * @description 节点表单数据。 用于审批节点、抄送节点
+ */
+export function useNodeForm(nodeType: NodeType) {
+  const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList', ref([])) // 角色列表
+  const postOptions = inject<Ref<PostApi.PostVO[]>>('postList', ref([])) // 岗位列表
+  const userOptions = inject<Ref<UserApi.UserVO[]>>('userList', ref([])) // 用户列表
+  const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList', ref([])) // 部门列表
+  const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList', ref([])) // 用户组列表
+  const deptTreeOptions = inject('deptTree', ref()) // 部门树
+  const formFields = inject<Ref<string[]>>('formFields', ref([])) // 流程表单字段
+  const configForm = ref<UserTaskFormType | CopyTaskFormType>()
+  if (nodeType === NodeType.USER_TASK_NODE || nodeType === NodeType.TRANSACTOR_NODE) {
+    configForm.value = {
+      candidateStrategy: CandidateStrategy.USER,
+      approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
+      approveRatio: 100,
+      rejectHandlerType: RejectHandlerType.FINISH_PROCESS,
+      assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
+      returnNodeId: '',
+      timeoutHandlerEnable: false,
+      timeoutHandlerType: 1,
+      timeDuration: 6, // 默认 6小时
+      maxRemindCount: 1, // 默认 提醒 1次
+      buttonsSetting: []
+    }
+  } else {
+    configForm.value = {
+      candidateStrategy: CandidateStrategy.USER
+    }
+  }
+
+  const getShowText = (): string => {
+    let showText = ''
+    // 指定成员
+    if (configForm.value?.candidateStrategy === CandidateStrategy.USER) {
+      if (configForm.value?.userIds!.length > 0) {
+        const candidateNames: string[] = []
+        userOptions?.value.forEach((item) => {
+          if (configForm.value?.userIds!.includes(item.id)) {
+            candidateNames.push(item.nickname)
+          }
+        })
+        showText = `指定成员：${candidateNames.join(',')}`
+      }
+    }
+    // 指定角色
+    if (configForm.value?.candidateStrategy === CandidateStrategy.ROLE) {
+      if (configForm.value.roleIds!.length > 0) {
+        const candidateNames: string[] = []
+        roleOptions?.value.forEach((item) => {
+          if (configForm.value?.roleIds!.includes(item.id)) {
+            candidateNames.push(item.name)
+          }
+        })
+        showText = `指定角色：${candidateNames.join(',')}`
+      }
+    }
+    // 指定部门
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
+      configForm.value?.candidateStrategy === CandidateStrategy.DEPT_LEADER ||
+      configForm.value?.candidateStrategy === CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+    ) {
+      if (configForm.value?.deptIds!.length > 0) {
+        const candidateNames: string[] = []
+        deptOptions?.value.forEach((item) => {
+          if (configForm.value?.deptIds!.includes(item.id!)) {
+            candidateNames.push(item.name)
+          }
+        })
+        if (configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
+          showText = `部门成员：${candidateNames.join(',')}`
+        } else if (configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER) {
+          showText = `部门的负责人：${candidateNames.join(',')}`
+        } else {
+          showText = `多级部门的负责人：${candidateNames.join(',')}`
+        }
+      }
+    }
+
+    // 指定岗位
+    if (configForm.value?.candidateStrategy === CandidateStrategy.POST) {
+      if (configForm.value.postIds!.length > 0) {
+        const candidateNames: string[] = []
+        postOptions?.value.forEach((item) => {
+          if (configForm.value?.postIds!.includes(item.id!)) {
+            candidateNames.push(item.name)
+          }
+        })
+        showText = `指定岗位: ${candidateNames.join(',')}`
+      }
+    }
+    // 指定用户组
+    if (configForm.value?.candidateStrategy === CandidateStrategy.USER_GROUP) {
+      if (configForm.value?.userGroups!.length > 0) {
+        const candidateNames: string[] = []
+        userGroupOptions?.value.forEach((item) => {
+          if (configForm.value?.userGroups!.includes(item.id)) {
+            candidateNames.push(item.name)
+          }
+        })
+        showText = `指定用户组: ${candidateNames.join(',')}`
+      }
+    }
+
+    // 表单内用户字段
+    if (configForm.value?.candidateStrategy === CandidateStrategy.FORM_USER) {
+      const formFieldOptions = parseFormCreateFields(unref(formFields))
+      const item = formFieldOptions.find((item) => item.field === configForm.value?.formUser)
+      showText = `表单用户：${item?.title}`
+    }
+
+    // 表单内部门负责人
+    if (configForm.value?.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER) {
+      showText = `表单内部门负责人`
+    }
+
+    // 审批人自选
+    if (configForm.value?.candidateStrategy === CandidateStrategy.APPROVE_USER_SELECT) {
+      showText = `审批人自选`
+    }
+
+    // 发起人自选
+    if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
+      showText = `发起人自选`
+    }
+    // 发起人自己
+    if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER) {
+      showText = `发起人自己`
+    }
+    // 发起人的部门负责人
+    if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER_DEPT_LEADER) {
+      showText = `发起人的部门负责人`
+    }
+    // 发起人的部门负责人
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+    ) {
+      showText = `发起人连续部门负责人`
+    }
+    // 流程表达式
+    if (configForm.value?.candidateStrategy === CandidateStrategy.EXPRESSION) {
+      showText = `流程表达式：${configForm.value.expression}`
+    }
+    return showText
+  }
+
+  /**
+   *  处理候选人参数的赋值
+   */
+  const handleCandidateParam = () => {
+    let candidateParam: undefined | string = undefined
+    if (!configForm.value) {
+      return candidateParam
+    }
+    switch (configForm.value.candidateStrategy) {
+      case CandidateStrategy.USER:
+        candidateParam = configForm.value.userIds!.join(',')
+        break
+      case CandidateStrategy.ROLE:
+        candidateParam = configForm.value.roleIds!.join(',')
+        break
+      case CandidateStrategy.POST:
+        candidateParam = configForm.value.postIds!.join(',')
+        break
+      case CandidateStrategy.USER_GROUP:
+        candidateParam = configForm.value.userGroups!.join(',')
+        break
+      case CandidateStrategy.FORM_USER:
+        candidateParam = configForm.value.formUser!
+        break
+      case CandidateStrategy.EXPRESSION:
+        candidateParam = configForm.value.expression!
+        break
+      case CandidateStrategy.DEPT_MEMBER:
+      case CandidateStrategy.DEPT_LEADER:
+        candidateParam = configForm.value.deptIds!.join(',')
+        break
+      // 发起人部门负责人
+      case CandidateStrategy.START_USER_DEPT_LEADER:
+      case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER:
+        candidateParam = configForm.value.deptLevel + ''
+        break
+      // 指定连续多级部门的负责人
+      case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
+        const deptIds = configForm.value.deptIds!.join(',')
+        candidateParam = deptIds.concat('|' + configForm.value.deptLevel + '')
+        break
+      }
+      // 表单内部门的负责人
+      case CandidateStrategy.FORM_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为表单内部门字段。 右边为部门层级
+        const deptFieldOnForm = configForm.value.formDept!
+        candidateParam = deptFieldOnForm.concat('|' + configForm.value.deptLevel + '')
+        break
+      }
+      default:
+        break
+    }
+    return candidateParam
+  }
+  /**
+   *  解析候选人参数
+   */
+  const parseCandidateParam = (
+    candidateStrategy: CandidateStrategy,
+    candidateParam: string | undefined
+  ) => {
+    if (!configForm.value || !candidateParam) {
+      return
+    }
+    switch (candidateStrategy) {
+      case CandidateStrategy.USER: {
+        configForm.value.userIds = candidateParam.split(',').map((item) => +item)
+        break
+      }
+      case CandidateStrategy.ROLE:
+        configForm.value.roleIds = candidateParam.split(',').map((item) => +item)
+        break
+      case CandidateStrategy.POST:
+        configForm.value.postIds = candidateParam.split(',').map((item) => +item)
+        break
+      case CandidateStrategy.USER_GROUP:
+        configForm.value.userGroups = candidateParam.split(',').map((item) => +item)
+        break
+      case CandidateStrategy.FORM_USER:
+        configForm.value.formUser = candidateParam
+        break
+      case CandidateStrategy.EXPRESSION:
+        configForm.value.expression = candidateParam
+        break
+      case CandidateStrategy.DEPT_MEMBER:
+      case CandidateStrategy.DEPT_LEADER:
+        configForm.value.deptIds = candidateParam.split(',').map((item) => +item)
+        break
+      // 发起人部门负责人
+      case CandidateStrategy.START_USER_DEPT_LEADER:
+      case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER:
+        configForm.value.deptLevel = +candidateParam
+        break
+      // 指定连续多级部门的负责人
+      case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
+        const paramArray = candidateParam.split('|')
+        configForm.value.deptIds = paramArray[0].split(',').map((item) => +item)
+        configForm.value.deptLevel = +paramArray[1]
+        break
+      }
+      // 表单内的部门负责人
+      case CandidateStrategy.FORM_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为表单内的部门字段。 右边为部门层级
+        const paramArray = candidateParam.split('|')
+        configForm.value.formDept = paramArray[0]
+        configForm.value.deptLevel = +paramArray[1]
+        break
+      }
+      default:
+        break
+    }
+  }
+  return {
+    configForm,
+    roleOptions,
+    postOptions,
+    userOptions,
+    userGroupOptions,
+    deptTreeOptions,
+    handleCandidateParam,
+    parseCandidateParam,
+    getShowText
+  }
+}
+
+/**
+ * @description 抽屉配置
+ */
+export function useDrawer() {
+  // 抽屉配置是否可见
+  const settingVisible = ref(false)
+  // 关闭配置抽屉
+  const closeDrawer = () => {
+    settingVisible.value = false
+  }
+  // 打开配置抽屉
+  const openDrawer = () => {
+    settingVisible.value = true
+  }
+  return {
+    settingVisible,
+    closeDrawer,
+    openDrawer
+  }
+}
+
+/**
+ * @description 节点名称配置
+ */
+export function useNodeName(nodeType: NodeType) {
+  // 节点名称
+  const nodeName = ref<string>()
+  // 节点名称输入框
+  const showInput = ref(false)
+  // 点击节点名称编辑图标
+  const clickIcon = () => {
+    showInput.value = true
+  }
+  // 节点名称输入框失去焦点
+  const blurEvent = () => {
+    showInput.value = false
+    nodeName.value = nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string)
+  }
+  return {
+    nodeName,
+    showInput,
+    clickIcon,
+    blurEvent
+  }
+}
+
+export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
+  // 显示节点名称输入框
+  const showInput = ref(false)
+  // 节点名称输入框失去焦点
+  const blurEvent = () => {
+    showInput.value = false
+    node.value.name = node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string)
+  }
+  // 点击节点标题进行输入
+  const clickTitle = () => {
+    showInput.value = true
+  }
+  return {
+    showInput,
+    clickTitle,
+    blurEvent
+  }
+}
+
+/**
+ * @description 根据节点任务状态，获取节点任务状态样式
+ */
+export function useTaskStatusClass(taskStatus: TaskStatusEnum | undefined): string {
+  if (!taskStatus) {
+    return ''
+  }
+  if (taskStatus === TaskStatusEnum.APPROVE) {
+    return 'status-pass'
+  }
+  if (taskStatus === TaskStatusEnum.RUNNING) {
+    return 'status-running'
+  }
+  if (taskStatus === TaskStatusEnum.REJECT) {
+    return 'status-reject'
+  }
+  if (taskStatus === TaskStatusEnum.CANCEL) {
+    return 'status-cancel'
+  }
+  return ''
+}
+
+/** 条件组件文字展示 */
+export function getConditionShowText(
+  conditionType: ConditionType | undefined,
+  conditionExpression: string | undefined,
+  conditionGroups: ConditionGroup | undefined,
+  fieldOptions: Array<Record<string, any>>
+) {
+  let showText = ''
+  if (conditionType === ConditionType.EXPRESSION) {
+    if (conditionExpression) {
+      showText = `表达式：${conditionExpression}`
+    }
+  }
+  if (conditionType === ConditionType.RULE) {
+    // 条件组是否为与关系
+    const groupAnd = conditionGroups?.and
+    let warningMessage: undefined | string = undefined
+    const conditionGroup = conditionGroups?.conditions.map((item) => {
+      return (
+        '(' +
+        item.rules
+          .map((rule) => {
+            if (rule.leftSide && rule.rightSide) {
+              return (
+                getFormFieldTitle(fieldOptions, rule.leftSide) +
+                ' ' +
+                getOpName(rule.opCode) +
+                ' ' +
+                rule.rightSide
+              )
+            } else {
+              // 有一条规则不完善。提示错误
+              warningMessage = '请完善条件规则'
+              return ''
+            }
+          })
+          .join(item.and ? ' 且 ' : ' 或 ') +
+        ' ) '
+      )
+    })
+    if (warningMessage) {
+      showText = ''
+    } else {
+      showText = conditionGroup!.join(groupAnd ? ' 且 ' : ' 或 ')
+    }
+  }
+  return showText
+}
+
+/** 获取表单字段名称*/
+const getFormFieldTitle = (fieldOptions: Array<Record<string, any>>, field: string) => {
+  const item = fieldOptions.find((item) => item.field === field)
+  return item?.title
+}
+
+/** 获取操作符名称 */
+const getOpName = (opCode: string): string => {
+  const opName = COMPARISON_OPERATORS.find((item: any) => item.value === opCode)
+  return opName?.label
+}
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/ChildProcessNodeConfig.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/ChildProcessNodeConfig.vue
new file mode 100644
index 0000000..7ec382f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/ChildProcessNodeConfig.vue
@@ -0,0 +1,610 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <el-tabs type="border-card" v-model="activeTabName">
+      <el-tab-pane label="子流程" name="child">
+        <div>
+          <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
+            <el-form-item label="是否异步" prop="async">
+              <el-switch v-model="configForm.async" active-text="异步" inactive-text="不异步" />
+            </el-form-item>
+            <el-form-item label="选择子流程" prop="calledProcessDefinitionKey">
+              <el-select
+                v-model="configForm.calledProcessDefinitionKey"
+                clearable
+                @change="handleCalledElementChange"
+              >
+                <el-option
+                  v-for="(item, index) in childProcessOptions"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.key"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="是否自动跳过子流程发起节点" prop="skipStartUserNode">
+              <el-switch
+                v-model="configForm.skipStartUserNode"
+                active-text="跳过"
+                inactive-text="不跳过"
+              />
+            </el-form-item>
+            <el-form-item label="主→子变量传递" prop="inVariables">
+              <div class="flex pt-2" v-for="(item, index) in configForm.inVariables" :key="index">
+                <div class="mr-2">
+                  <el-form-item
+                    :prop="`inVariables.${index}.source`"
+                    :rules="{
+                      required: true,
+                      message: '变量不能为空',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-select class="w-200px!" v-model="item.source">
+                      <el-option
+                        v-for="(field, fIdx) in formFieldOptions"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="mr-2">
+                  <el-form-item
+                    :prop="`inVariables.${index}.target`"
+                    :rules="{
+                      required: true,
+                      message: '变量不能为空',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-select class="w-200px!" v-model="item.target">
+                      <el-option
+                        v-for="(field, fIdx) in childFormFieldOptions"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="mr-1 flex items-center">
+                  <Icon
+                    icon="ep:delete"
+                    :size="18"
+                    @click="deleteVariable(index, configForm.inVariables)"
+                  />
+                </div>
+              </div>
+              <el-button type="primary" text @click="addVariable(configForm.inVariables)">
+                <Icon icon="ep:plus" class="mr-5px" />添加一行
+              </el-button>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.async === false"
+              label="子→主变量传递"
+              prop="outVariables"
+            >
+              <div class="flex pt-2" v-for="(item, index) in configForm.outVariables" :key="index">
+                <div class="mr-2">
+                  <el-form-item
+                    :prop="`outVariables.${index}.source`"
+                    :rules="{
+                      required: true,
+                      message: '变量不能为空',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-select class="w-200px!" v-model="item.source">
+                      <el-option
+                        v-for="(field, fIdx) in childFormFieldOptions"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="mr-2">
+                  <el-form-item
+                    :prop="`outVariables.${index}.target`"
+                    :rules="{
+                      required: true,
+                      message: '变量不能为空',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-select class="w-200px!" v-model="item.target">
+                      <el-option
+                        v-for="(field, fIdx) in formFieldOptions"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="mr-1 flex items-center">
+                  <Icon
+                    icon="ep:delete"
+                    :size="18"
+                    @click="deleteVariable(index, configForm.outVariables)"
+                  />
+                </div>
+              </div>
+              <el-button type="primary" text @click="addVariable(configForm.outVariables)">
+                <Icon icon="ep:plus" class="mr-5px" />添加一行
+              </el-button>
+            </el-form-item>
+            <el-form-item label="子流程发起人" prop="startUserType">
+              <el-radio-group v-model="configForm.startUserType">
+                <el-radio
+                  v-for="item in CHILD_PROCESS_START_USER_TYPE"
+                  :key="item.value"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.startUserType === ChildProcessStartUserTypeEnum.FROM_FORM"
+              label="当子流程发起人为空时"
+              prop="startUserType"
+            >
+              <el-radio-group v-model="configForm.startUserEmptyType">
+                <el-radio
+                  v-for="item in CHILD_PROCESS_START_USER_EMPTY_TYPE"
+                  :key="item.value"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.startUserType === 2"
+              label="发起人表单"
+              prop="startUserFormField"
+            >
+              <el-select class="w-200px!" v-model="configForm.startUserFormField">
+                <el-option
+                  v-for="(field, fIdx) in formFieldOptions"
+                  :key="fIdx"
+                  :label="field.title"
+                  :value="field.field"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-divider content-position="left">超时设置</el-divider>
+            <el-form-item label="启用开关" prop="timeoutEnable">
+              <el-switch
+                v-model="configForm.timeoutEnable"
+                active-text="开启"
+                inactive-text="关闭"
+              />
+            </el-form-item>
+            <div v-if="configForm.timeoutEnable">
+              <el-form-item prop="timeoutType">
+                <el-radio-group v-model="configForm.timeoutType">
+                  <el-radio-button
+                    v-for="item in DELAY_TYPE"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item v-if="configForm.timeoutType === DelayTypeEnum.FIXED_TIME_DURATION">
+                <el-form-item prop="timeDuration">
+                  <el-input-number
+                    class="mr-2"
+                    :style="{ width: '100px' }"
+                    v-model="configForm.timeDuration"
+                    :min="1"
+                    controls-position="right"
+                  />
+                </el-form-item>
+                <el-select v-model="configForm.timeUnit" class="mr-2" :style="{ width: '100px' }">
+                  <el-option
+                    v-for="item in TIME_UNIT_TYPES"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+                <el-text>后进入下一节点</el-text>
+              </el-form-item>
+              <el-form-item
+                v-if="configForm.timeoutType === DelayTypeEnum.FIXED_DATE_TIME"
+                prop="dateTime"
+              >
+                <el-date-picker
+                  class="mr-2"
+                  v-model="configForm.dateTime"
+                  type="datetime"
+                  placeholder="请选择日期和时间"
+                  value-format="YYYY-MM-DDTHH:mm:ss"
+                />
+                <el-text>后进入下一节点</el-text>
+              </el-form-item>
+            </div>
+
+            <el-divider content-position="left">多实例设置</el-divider>
+            <el-form-item label="启用开关" prop="multiInstanceEnable">
+              <el-switch
+                v-model="configForm.multiInstanceEnable"
+                active-text="开启"
+                inactive-text="关闭"
+              />
+            </el-form-item>
+            <div v-if="configForm.multiInstanceEnable">
+              <el-form-item prop="sequential">
+                <el-switch
+                  v-model="configForm.sequential"
+                  active-text="串行"
+                  inactive-text="并行"
+                />
+              </el-form-item>
+              <el-form-item prop="approveRatio">
+                <el-text>完成比例(%)</el-text>
+                <el-input-number
+                  class="ml-10px"
+                  v-model="configForm.approveRatio"
+                  :min="10"
+                  :max="100"
+                  :step="10"
+                />
+              </el-form-item>
+              <el-form-item prop="multiInstanceSourceType">
+                <el-text>多实例来源</el-text>
+                <el-select
+                  class="ml-10px w-200px!"
+                  v-model="configForm.multiInstanceSourceType"
+                  @change="handleMultiInstanceSourceTypeChange"
+                >
+                  <el-option
+                    v-for="item in CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item v-if="configForm.multiInstanceSourceType === ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY">
+                <el-input-number v-model="configForm.multiInstanceSource" :min="1" />
+              </el-form-item>
+              <el-form-item v-if="configForm.multiInstanceSourceType === ChildProcessMultiInstanceSourceTypeEnum.NUMBER_FORM">
+                <el-select class="w-200px!" v-model="configForm.multiInstanceSource">
+                  <el-option
+                    v-for="(field, fIdx) in digitalFormFieldOptions"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item v-if="configForm.multiInstanceSourceType === ChildProcessMultiInstanceSourceTypeEnum.MULTIPLE_FORM">
+                <el-select class="w-200px!" v-model="configForm.multiInstanceSource">
+                  <el-option
+                    v-for="(field, fIdx) in multiFormFieldOptions"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                  />
+                </el-select>
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import { getModelList } from '@/api/bpm/model'
+import { getForm } from '@/api/bpm/form'
+import {
+  SimpleFlowNode,
+  NodeType,
+  TIME_UNIT_TYPES,
+  TimeUnitType,
+  DelayTypeEnum,
+  DELAY_TYPE,
+  IOParameter,
+  ChildProcessStartUserTypeEnum,
+  CHILD_PROCESS_START_USER_TYPE,
+  ChildProcessStartUserEmptyTypeEnum,
+  CHILD_PROCESS_START_USER_EMPTY_TYPE,
+  CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE,
+  ChildProcessMultiInstanceSourceTypeEnum
+} from '../consts'
+import { useWatchNode, useDrawer, useNodeName, useFormFieldsAndStartUser } from '../node'
+import { parseFormFields } from '@/components/FormCreate/src/utils'
+import { convertTimeUnit } from '../utils'
+defineOptions({
+  name: 'ChildProcessNodeConfig'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 当前节点
+const currentNode = useWatchNode(props)
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.CHILD_PROCESS_NODE)
+// 激活的 Tab 标签页
+const activeTabName = ref('child')
+// 子流程表单配置
+const formRef = ref() // 表单 Ref
+// 表单校验规则
+const formRules = reactive({
+  async: [{ required: true, message: '是否异步不能为空', trigger: 'change' }],
+  calledProcessDefinitionKey: [{ required: true, message: '子流程不能为空', trigger: 'change' }],
+  skipStartUserNode: [
+    { required: true, message: '是否自动跳过子流程发起节点不能为空', trigger: 'change' }
+  ],
+  startUserType: [{ required: true, message: '子流程发起人不能为空', trigger: 'change' }],
+  startUserEmptyType: [
+    { required: true, message: '当子流程发起人为空时不能为空', trigger: 'change' }
+  ],
+  startUserFormField: [{ required: true, message: '发起人表单不能为空', trigger: 'change' }],
+  timeoutEnable: [{ required: true, message: '超时设置是否开启不能为空', trigger: 'change' }],
+  timeoutType: [{ required: true, message: '超时设置时间不能为空', trigger: 'change' }],
+  timeDuration: [{ required: true, message: '超时设置时间不能为空', trigger: 'change' }],
+  dateTime: [{ required: true, message: '超时设置时间不能为空', trigger: 'change' }],
+  multiInstanceEnable: [{ required: true, message: '多实例设置不能为空', trigger: 'change' }]
+})
+type ChildProcessFormType = {
+  async: boolean
+  calledProcessDefinitionKey: string
+  skipStartUserNode: boolean
+  inVariables?: IOParameter[]
+  outVariables?: IOParameter[]
+  startUserType: ChildProcessStartUserTypeEnum
+  startUserEmptyType: ChildProcessStartUserEmptyTypeEnum
+  startUserFormField: string
+  timeoutEnable: boolean
+  timeoutType: DelayTypeEnum
+  timeDuration: number
+  timeUnit: TimeUnitType
+  dateTime: string
+  multiInstanceEnable: boolean
+  sequential: boolean
+  approveRatio: number
+  multiInstanceSourceType: ChildProcessMultiInstanceSourceTypeEnum
+  multiInstanceSource: string
+}
+const configForm = ref<ChildProcessFormType>({
+  async: false,
+  calledProcessDefinitionKey: '',
+  skipStartUserNode: false,
+  inVariables: [],
+  outVariables: [],
+  startUserType: ChildProcessStartUserTypeEnum.MAIN_PROCESS_START_USER,
+  startUserEmptyType: ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_START_USER,
+  startUserFormField: '',
+  timeoutEnable: false,
+  timeoutType: DelayTypeEnum.FIXED_TIME_DURATION,
+  timeDuration: 1,
+  timeUnit: TimeUnitType.HOUR,
+  dateTime: '',
+  multiInstanceEnable: false,
+  sequential: false,
+  approveRatio: 100,
+  multiInstanceSourceType: ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY,
+  multiInstanceSource: ''
+})
+const childProcessOptions = ref()
+const formFieldOptions = useFormFieldsAndStartUser()
+const digitalFormFieldOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'inputNumber')
+})
+const multiFormFieldOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'select' || item.type === 'checkbox')
+})
+const childFormFieldOptions = ref()
+
+// 保存配置
+const saveConfig = async () => {
+  activeTabName.value = 'child'
+  if (!formRef) return false
+  const valid = await formRef.value.validate()
+  if (!valid) return false
+  const childInfo = childProcessOptions.value.find(
+    (option: any) => option.key === configForm.value.calledProcessDefinitionKey
+  )
+  currentNode.value.name = nodeName.value!
+  if (currentNode.value.childProcessSetting) {
+    // 1. 是否异步
+    currentNode.value.childProcessSetting.async = configForm.value.async
+    // 2. 调用流程
+    currentNode.value.childProcessSetting.calledProcessDefinitionKey = childInfo.key
+    currentNode.value.childProcessSetting.calledProcessDefinitionName = childInfo.name
+    // 3. 是否跳过发起人
+    currentNode.value.childProcessSetting.skipStartUserNode = configForm.value.skipStartUserNode
+    // 4. 主->子变量
+    currentNode.value.childProcessSetting.inVariables = configForm.value.inVariables
+    // 5. 子->主变量
+    currentNode.value.childProcessSetting.outVariables = configForm.value.outVariables
+    // 6. 发起人设置
+    currentNode.value.childProcessSetting.startUserSetting.type = configForm.value.startUserType
+    currentNode.value.childProcessSetting.startUserSetting.emptyType =
+      configForm.value.startUserEmptyType
+    currentNode.value.childProcessSetting.startUserSetting.formField =
+      configForm.value.startUserFormField
+    // 7. 超时设置
+    currentNode.value.childProcessSetting.timeoutSetting = {
+      enable: configForm.value.timeoutEnable
+    }
+    if (configForm.value.timeoutEnable) {
+      currentNode.value.childProcessSetting.timeoutSetting.type = configForm.value.timeoutType
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_TIME_DURATION) {
+        currentNode.value.childProcessSetting.timeoutSetting.timeExpression = getIsoTimeDuration()
+      }
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_DATE_TIME) {
+        currentNode.value.childProcessSetting.timeoutSetting.timeExpression =
+          configForm.value.dateTime
+      }
+    }
+    // 8. 多实例设置
+    currentNode.value.childProcessSetting.multiInstanceSetting = {
+      enable: configForm.value.multiInstanceEnable
+    }
+    if (configForm.value.multiInstanceEnable) {
+      currentNode.value.childProcessSetting.multiInstanceSetting.sequential =
+        configForm.value.sequential
+      currentNode.value.childProcessSetting.multiInstanceSetting.approveRatio =
+        configForm.value.approveRatio
+      currentNode.value.childProcessSetting.multiInstanceSetting.sourceType =
+        configForm.value.multiInstanceSourceType
+      currentNode.value.childProcessSetting.multiInstanceSetting.source =
+        configForm.value.multiInstanceSource
+    }
+  }
+
+  currentNode.value.showText = `调用子流程：${childInfo.name}`
+  settingVisible.value = false
+  return true
+}
+// 显示子流程节点配置， 由父组件传过来
+const showChildProcessNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name
+  if (node.childProcessSetting) {
+    // 1. 是否异步
+    configForm.value.async = node.childProcessSetting.async
+    // 2. 调用流程
+    configForm.value.calledProcessDefinitionKey =
+      node.childProcessSetting?.calledProcessDefinitionKey
+    // 3. 是否跳过发起人
+    configForm.value.skipStartUserNode = node.childProcessSetting.skipStartUserNode
+    // 4. 主->子变量
+    configForm.value.inVariables = node.childProcessSetting.inVariables
+    // 5. 子->主变量
+    configForm.value.outVariables = node.childProcessSetting.outVariables
+    // 6. 发起人设置
+    configForm.value.startUserType = node.childProcessSetting.startUserSetting.type
+    configForm.value.startUserEmptyType = node.childProcessSetting.startUserSetting.emptyType ?? ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_START_USER
+    configForm.value.startUserFormField = node.childProcessSetting.startUserSetting.formField ?? ''
+    // 7. 超时设置
+    configForm.value.timeoutEnable = node.childProcessSetting.timeoutSetting.enable ?? false
+    if (configForm.value.timeoutEnable) {
+      configForm.value.timeoutType =
+        node.childProcessSetting.timeoutSetting.type ?? DelayTypeEnum.FIXED_TIME_DURATION
+      // 固定时长
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_TIME_DURATION) {
+        const strTimeDuration = node.childProcessSetting.timeoutSetting.timeExpression ?? ''
+        let parseTime = strTimeDuration.slice(2, strTimeDuration.length - 1)
+        let parseTimeUnit = strTimeDuration.slice(strTimeDuration.length - 1)
+        configForm.value.timeDuration = parseInt(parseTime)
+        configForm.value.timeUnit = convertTimeUnit(parseTimeUnit)
+      }
+      // 固定日期时间
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_DATE_TIME) {
+        configForm.value.dateTime = node.childProcessSetting.timeoutSetting.timeExpression ?? ''
+      }
+    }
+    // 8. 多实例设置
+    configForm.value.multiInstanceEnable =
+      node.childProcessSetting.multiInstanceSetting.enable ?? false
+    if (configForm.value.multiInstanceEnable) {
+      configForm.value.sequential =
+        node.childProcessSetting.multiInstanceSetting.sequential ?? false
+      configForm.value.approveRatio =
+        node.childProcessSetting.multiInstanceSetting.approveRatio ?? 100
+      configForm.value.multiInstanceSourceType =
+        node.childProcessSetting.multiInstanceSetting.sourceType ??
+        ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY
+      configForm.value.multiInstanceSource =
+        node.childProcessSetting.multiInstanceSetting.source ?? ''
+    }
+  }
+  loadFormInfo()
+}
+
+defineExpose({ openDrawer, showChildProcessNodeConfig }) // 暴露方法给父组件
+
+const addVariable = (arr?: IOParameter[]) => {
+  arr?.push({
+    source: '',
+    target: ''
+  })
+}
+const deleteVariable = (index: number, arr?: IOParameter[]) => {
+  arr?.splice(index, 1)
+}
+const handleCalledElementChange = () => {
+  configForm.value.inVariables = []
+  configForm.value.outVariables = []
+  loadFormInfo()
+}
+const loadFormInfo = async () => {
+  const childInfo = childProcessOptions.value.find(
+    (option) => option.key === configForm.value.calledProcessDefinitionKey
+  )
+  const formInfo = await getForm(childInfo.formId)
+  childFormFieldOptions.value = []
+  if (formInfo.fields) {
+    formInfo.fields.forEach((fieldStr: string) => {
+      parseFormFields(JSON.parse(fieldStr), childFormFieldOptions.value)
+    })
+  }
+}
+const getIsoTimeDuration = () => {
+  let strTimeDuration = 'PT'
+  if (configForm.value.timeUnit === TimeUnitType.MINUTE) {
+    strTimeDuration += configForm.value.timeDuration + 'M'
+  }
+  if (configForm.value.timeUnit === TimeUnitType.HOUR) {
+    strTimeDuration += configForm.value.timeDuration + 'H'
+  }
+  if (configForm.value.timeUnit === TimeUnitType.DAY) {
+    strTimeDuration += configForm.value.timeDuration + 'D'
+  }
+  return strTimeDuration
+}
+const handleMultiInstanceSourceTypeChange = () => {
+  configForm.value.multiInstanceSource = ''
+}
+
+onMounted(async () => {
+  childProcessOptions.value = await getModelList(undefined)
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
new file mode 100644
index 0000000..9020d65
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -0,0 +1,222 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="588"
+    :before-close="handleClose"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="currentNode.name"
+          :placeholder="currentNode.name"
+        />
+        <div v-else class="node-name"
+          >{{ currentNode.name }}
+          <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"
+        /></div>
+
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <div>
+      <div class="mb-3 font-size-16px" v-if="currentNode.conditionSetting?.defaultFlow"
+        >未满足其它条件时，将进入此分支（该分支不可编辑和删除）</div
+      >
+      <div v-else>
+        <Condition ref="conditionRef" v-model="condition" />
+      </div>
+    </div>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, ConditionType } from '../consts'
+import { getDefaultConditionNodeName } from '../utils'
+import { useFormFieldsAndStartUser, getConditionShowText } from '../node'
+import Condition from './components/Condition.vue'
+import { cloneDeep } from 'lodash-es'
+
+defineOptions({
+  name: 'ConditionNodeConfig'
+})
+const props = defineProps({
+  conditionNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  },
+  nodeIndex: {
+    type: Number,
+    required: true
+  }
+})
+const settingVisible = ref(false)
+const currentNode = ref<SimpleFlowNode>(props.conditionNode)
+const condition = ref<any>({
+  conditionType: ConditionType.RULE, // 设置默认值
+  conditionExpression: '',
+  conditionGroups: {
+    and: true,
+    conditions: [
+      {
+        and: true,
+        rules: [
+          {
+            opCode: '==',
+            leftSide: '',
+            rightSide: ''
+          }
+        ]
+      }
+    ]
+  }
+})
+const open = () => {
+  // 如果有已存在的配置则使用，否则使用默认值
+  if (currentNode.value.conditionSetting) {
+    condition.value = cloneDeep(currentNode.value.conditionSetting)
+  } else {
+    // 重置为默认值
+    condition.value = {
+      conditionType: ConditionType.RULE,
+      conditionExpression: '',
+      conditionGroups: {
+        and: true,
+        conditions: [
+          {
+            and: true,
+            rules: [
+              {
+                opCode: '==',
+                leftSide: '',
+                rightSide: ''
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+  settingVisible.value = true
+}
+
+watch(
+  () => props.conditionNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
+// 显示名称输入框
+const showInput = ref(false)
+
+const clickIcon = () => {
+  showInput.value = true
+}
+// 输入框失去焦点
+const blurEvent = () => {
+  showInput.value = false
+  currentNode.value.name =
+    currentNode.value.name ||
+    getDefaultConditionNodeName(props.nodeIndex, currentNode.value?.conditionSetting?.defaultFlow)
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+// 关闭
+const closeDrawer = () => {
+  settingVisible.value = false
+}
+
+const handleClose = async (done: (cancel?: boolean) => void) => {
+  const isSuccess = await saveConfig()
+  if (!isSuccess) {
+    done(true) // 传入 true 阻止关闭
+  } else {
+    done()
+  }
+}
+
+/** 保存配置 */
+const fieldOptions = useFormFieldsAndStartUser() // 流程表单字段和发起人字段
+const conditionRef = ref()
+const saveConfig = async () => {
+  if (!currentNode.value.conditionSetting?.defaultFlow) {
+    // 校验表单
+    const valid = await conditionRef.value.validate()
+    if (!valid) return false
+    const showText = getConditionShowText(
+      condition.value?.conditionType,
+      condition.value?.conditionExpression,
+      condition.value.conditionGroups,
+      fieldOptions
+    )
+    if (!showText) {
+      return false
+    }
+    currentNode.value.showText = showText
+    // 使用 cloneDeep 进行深拷贝
+    currentNode.value.conditionSetting = cloneDeep({
+      ...currentNode.value.conditionSetting,
+      conditionType: condition.value?.conditionType,
+      conditionExpression:
+        condition.value?.conditionType === ConditionType.EXPRESSION
+          ? condition.value?.conditionExpression
+          : undefined,
+      conditionGroups:
+        condition.value?.conditionType === ConditionType.RULE
+          ? condition.value?.conditionGroups
+          : undefined
+    })
+  }
+  settingVisible.value = false
+  return true
+}
+</script>
+
+<style lang="scss" scoped>
+.condition-group-tool {
+  display: flex;
+  justify-content: space-between;
+  width: 500px;
+  margin-bottom: 20px;
+}
+
+.condition-group {
+  position: relative;
+
+  &:hover {
+    border-color: #0089ff;
+
+    .condition-group-delete {
+      opacity: 1;
+    }
+  }
+
+  .condition-group-delete {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+
+::v-deep(.el-card__header) {
+  padding: 8px var(--el-card-padding);
+  border-bottom: 1px solid var(--el-card-border-color);
+  box-sizing: border-box;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
new file mode 100644
index 0000000..aec32da
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -0,0 +1,392 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <el-tabs type="border-card" v-model="activeTabName">
+      <el-tab-pane label="抄送人" name="user">
+        <div>
+          <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
+            <el-form-item label="抄送人设置" prop="candidateStrategy">
+              <el-radio-group
+                v-model="configForm.candidateStrategy"
+                @change="changeCandidateStrategy"
+              >
+                <el-radio
+                  v-for="(dict, index) in copyUserStrategies"
+                  :key="index"
+                  :value="dict.value"
+                  :label="dict.value"
+                >
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <el-form-item
+              v-if="configForm.candidateStrategy == CandidateStrategy.ROLE"
+              label="指定角色"
+              prop="roleIds"
+            >
+              <el-select v-model="configForm.roleIds" clearable multiple style="width: 100%">
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
+                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+              "
+              label="指定部门"
+              prop="deptIds"
+              span="24"
+            >
+              <el-tree-select
+                ref="treeRef"
+                v-model="configForm.deptIds"
+                :data="deptTreeOptions"
+                :props="defaultProps"
+                empty-text="加载中，请稍后"
+                multiple
+                node-key="id"
+                style="width: 100%"
+                show-checkbox
+              />
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy == CandidateStrategy.POST"
+              label="指定岗位"
+              prop="postIds"
+              span="24"
+            >
+              <el-select v-model="configForm.postIds" clearable multiple style="width: 100%">
+                <el-option
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id!"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy == CandidateStrategy.USER"
+              label="指定用户"
+              prop="userIds"
+              span="24"
+            >
+              <el-select v-model="configForm.userIds" clearable multiple style="width: 100%">
+                <el-option
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER_GROUP"
+              label="指定用户组"
+              prop="userGroups"
+            >
+              <el-select v-model="configForm.userGroups" clearable multiple style="width: 100%">
+                <el-option
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.FORM_USER"
+              label="表单内用户字段"
+              prop="formUser"
+            >
+              <el-select v-model="configForm.formUser" clearable style="width: 100%">
+                <el-option
+                  v-for="(item, idx) in userFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER"
+              label="表单内部门字段"
+              prop="formDept"
+            >
+              <el-select v-model="configForm.formDept" clearable style="width: 100%">
+                <el-option
+                  v-for="(item, idx) in deptFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy ==
+                  CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER
+              "
+              :label="deptLevelLabel!"
+              prop="deptLevel"
+              span="24"
+            >
+              <el-select v-model="configForm.deptLevel" clearable>
+                <el-option
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
+              label="流程表达式"
+              prop="expression"
+            >
+              <el-input
+                type="textarea"
+                v-model="configForm.expression"
+                clearable
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
+        <div class="field-setting-pane">
+          <div class="field-setting-desc">字段权限</div>
+          <div class="field-permit-title">
+            <div class="setting-title-label first-title"> 字段名称 </div>
+            <div class="other-titles">
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('READ')">
+                只读
+              </span>
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('WRITE')">
+                可编辑
+              </span>
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('NONE')">
+                隐藏
+              </span>
+            </div>
+          </div>
+          <div
+            class="field-setting-item"
+            v-for="(item, index) in fieldsPermissionConfig"
+            :key="index"
+          >
+            <div class="field-setting-item-label"> {{ item.title }} </div>
+            <el-radio-group class="field-setting-item-group" v-model="item.permission">
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.READ"
+                  size="large"
+                  :label="FieldPermissionType.WRITE"
+                  ><span></span
+                ></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.WRITE"
+                  size="large"
+                  :label="FieldPermissionType.WRITE"
+                  disabled
+                  ><span></span
+                ></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.NONE"
+                  size="large"
+                  :label="FieldPermissionType.NONE"
+                  ><span></span
+                ></el-radio>
+              </div>
+            </el-radio-group>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import {
+  SimpleFlowNode,
+  CandidateStrategy,
+  NodeType,
+  CANDIDATE_STRATEGY,
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT
+} from '../consts'
+import {
+  useWatchNode,
+  useDrawer,
+  useNodeName,
+  useFormFieldsPermission,
+  useNodeForm,
+  CopyTaskFormType
+} from '../node'
+import { defaultProps } from '@/utils/tree'
+defineOptions({
+  name: 'CopyTaskNodeConfig'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源'
+  if (configForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) {
+    label = label + '(指定部门向上)'
+  } else {
+    label = label + '(发起人部门向上)'
+  }
+  return label
+})
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 当前节点
+const currentNode = useWatchNode(props)
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_TASK_NODE)
+// 激活的 Tab 标签页
+const activeTabName = ref('user')
+// 表单字段权限配置
+const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } =
+  useFormFieldsPermission(FieldPermissionType.READ)
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect')
+})
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect')
+})
+// 抄送人表单配置
+const formRef = ref() // 表单 Ref
+// 表单校验规则
+const formRules = reactive({
+  candidateStrategy: [{ required: true, message: '抄送人设置不能为空', trigger: 'change' }],
+  userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+  userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
+  postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  formUser: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
+  formDept: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }],
+  expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }]
+})
+
+const {
+  configForm: tempConfigForm,
+  roleOptions,
+  postOptions,
+  userOptions,
+  userGroupOptions,
+  deptTreeOptions,
+  getShowText,
+  handleCandidateParam,
+  parseCandidateParam
+} = useNodeForm(NodeType.COPY_TASK_NODE)
+const configForm = tempConfigForm as Ref<CopyTaskFormType>
+// 抄送人策略， 去掉发起人自选 和 发起人自己
+const copyUserStrategies = computed(() => {
+  return CANDIDATE_STRATEGY.filter((item) => item.value !== CandidateStrategy.START_USER)
+})
+// 改变抄送人设置策略
+const changeCandidateStrategy = () => {
+  configForm.value.userIds = []
+  configForm.value.deptIds = []
+  configForm.value.roleIds = []
+  configForm.value.postIds = []
+  configForm.value.userGroups = []
+  configForm.value.deptLevel = 1
+  configForm.value.formUser = ''
+}
+// 保存配置
+const saveConfig = async () => {
+  activeTabName.value = 'user'
+  if (!formRef) return false
+  const valid = await formRef.value.validate()
+  if (!valid) return false
+  const showText = getShowText()
+  if (!showText) return false
+  currentNode.value.name = nodeName.value!
+  currentNode.value.candidateParam = handleCandidateParam()
+  currentNode.value.candidateStrategy = configForm.value.candidateStrategy
+  currentNode.value.showText = showText
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value
+  settingVisible.value = false
+  return true
+}
+// 显示抄送节点配置， 由父组件传过来
+const showCopyTaskNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name
+  // 抄送人设置
+  configForm.value.candidateStrategy = node.candidateStrategy!
+  parseCandidateParam(node.candidateStrategy!, node?.candidateParam)
+  // 表单字段权限
+  getNodeConfigFormFields(node.fieldsPermission)
+}
+
+/** 批量更新权限 */
+const updatePermission = (type: string) => {
+  fieldsPermissionConfig.value.forEach((field) => {
+    field.permission =
+      type === 'READ'
+        ? FieldPermissionType.READ
+        : type === 'WRITE'
+          ? FieldPermissionType.WRITE
+          : FieldPermissionType.NONE
+  })
+}
+
+defineExpose({ openDrawer, showCopyTaskNodeConfig }) // 暴露方法给父组件
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/DelayTimerNodeConfig.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/DelayTimerNodeConfig.vue
new file mode 100644
index 0000000..741796d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/DelayTimerNodeConfig.vue
@@ -0,0 +1,190 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <div>
+      <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
+        <el-form-item label="延迟时间" prop="delayType">
+          <el-radio-group v-model="configForm.delayType">
+            <el-radio-button
+              v-for="item in DELAY_TYPE"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="configForm.delayType === DelayTypeEnum.FIXED_TIME_DURATION">
+          <el-form-item prop="timeDuration">
+            <el-input-number
+              class="mr-2"
+              :style="{ width: '100px' }"
+              v-model="configForm.timeDuration"
+              :min="1"
+              controls-position="right"
+            />
+          </el-form-item>
+          <el-select v-model="configForm.timeUnit" class="mr-2" :style="{ width: '100px' }">
+            <el-option
+              v-for="item in TIME_UNIT_TYPES"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-text>后进入下一节点</el-text>
+        </el-form-item>
+        <el-form-item v-if="configForm.delayType === DelayTypeEnum.FIXED_DATE_TIME" prop="dateTime">
+          <el-date-picker
+            class="mr-2"
+            v-model="configForm.dateTime"
+            type="datetime"
+            placeholder="请选择日期和时间"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+          />
+          <el-text>后进入下一节点</el-text>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import {
+  SimpleFlowNode,
+  NodeType,
+  TIME_UNIT_TYPES,
+  TimeUnitType,
+  DelayTypeEnum,
+  DELAY_TYPE
+} from '../consts'
+import { useWatchNode, useDrawer, useNodeName } from '../node'
+import { convertTimeUnit } from '../utils'
+defineOptions({
+  name: 'DelayTimerNodeConfig'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 当前节点
+const currentNode = useWatchNode(props)
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.DELAY_TIMER_NODE)
+// 抄送人表单配置
+const formRef = ref() // 表单 Ref
+// 表单校验规则
+const formRules = reactive({
+  delayType: [{ required: true, message: '延迟时间不能为空', trigger: 'change' }],
+  timeDuration: [{ required: true, message: '延迟时间不能为空', trigger: 'change' }],
+  dateTime: [{ required: true, message: '延迟时间不能为空', trigger: 'change' }]
+})
+// 配置表单数据
+const configForm = ref({
+  delayType: DelayTypeEnum.FIXED_TIME_DURATION,
+  timeDuration: 1,
+  timeUnit: TimeUnitType.HOUR,
+  dateTime: ''
+})
+// 保存配置
+const saveConfig = async () => {
+  if (!formRef) return false
+  const valid = await formRef.value.validate()
+  if (!valid) return false
+  const showText = getShowText()
+  if (!showText) return false
+  currentNode.value.name = nodeName.value!
+  currentNode.value.showText = showText
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: getIsoTimeDuration()
+    }
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: configForm.value.dateTime
+    }
+  }
+  settingVisible.value = false
+  return true
+}
+const getShowText = (): string => {
+  let showText = ''
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    showText = `延迟${configForm.value.timeDuration}${TIME_UNIT_TYPES.find((item) => item.value === configForm.value.timeUnit).label}`
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    showText = `延迟至${configForm.value.dateTime.replace('T', ' ')}`
+  }
+  return showText
+}
+const getIsoTimeDuration = () => {
+  let strTimeDuration = 'PT'
+  if (configForm.value.timeUnit === TimeUnitType.MINUTE) {
+    strTimeDuration += configForm.value.timeDuration + 'M'
+  }
+  if (configForm.value.timeUnit === TimeUnitType.HOUR) {
+    strTimeDuration += configForm.value.timeDuration + 'H'
+  }
+  if (configForm.value.timeUnit === TimeUnitType.DAY) {
+    strTimeDuration += configForm.value.timeDuration + 'D'
+  }
+  return strTimeDuration
+}
+// 显示延迟器节点配置， 由父组件传过来
+const showDelayTimerNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name
+  if (node.delaySetting) {
+    configForm.value.delayType = node.delaySetting.delayType
+    // 固定时长
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+      const strTimeDuration = node.delaySetting.delayTime
+      let parseTime = strTimeDuration.slice(2, strTimeDuration.length - 1)
+      let parseTimeUnit = strTimeDuration.slice(strTimeDuration.length - 1)
+      configForm.value.timeDuration = parseInt(parseTime)
+      configForm.value.timeUnit = convertTimeUnit(parseTimeUnit)
+    }
+    // 固定日期时间
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+      configForm.value.dateTime = node.delaySetting.delayTime
+    }
+  }
+}
+
+defineExpose({ openDrawer, showDelayTimerNodeConfig }) // 暴露方法给父组件
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/RouterNodeConfig.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/RouterNodeConfig.vue
new file mode 100644
index 0000000..4cf6a84
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/RouterNodeConfig.vue
@@ -0,0 +1,201 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="630"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <div>
+      <el-form label-position="top">
+        <el-card class="mb-15px" v-for="(item, index) in routerGroups" :key="index">
+          <template #header>
+            <div class="flex flex-items-center">
+              <el-text size="large">路由{{ index + 1 }}</el-text>
+              <el-select class="ml-15px" v-model="item.nodeId" style="width: 180px">
+                <el-option
+                  v-for="node in nodeOptions"
+                  :key="node.value"
+                  :label="node.label"
+                  :value="node.value"
+                />
+              </el-select>
+              <el-button class="mla" type="danger" link @click="deleteRouterGroup(index)">
+                删除
+              </el-button>
+            </div>
+          </template>
+          <Condition
+            :ref="($event) => (conditionRef[index] = $event)"
+            v-model="routerGroups[index]"
+          />
+        </el-card>
+      </el-form>
+
+      <el-button class="w-1/1" type="primary" :icon="Plus" @click="addRouterGroup">
+        新增路由分支
+      </el-button>
+    </div>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { SimpleFlowNode, NodeType, ConditionType, RouterSetting } from '../consts'
+import { useWatchNode, useDrawer, useNodeName } from '../node'
+import Condition from './components/Condition.vue'
+
+defineOptions({
+  name: 'RouterNodeConfig'
+})
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree')
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 当前节点
+const currentNode = useWatchNode(props)
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.ROUTER_BRANCH_NODE)
+const routerGroups = ref<RouterSetting[]>([])
+const nodeOptions = ref<any>([])
+const conditionRef = ref([])
+
+/** 保存配置 */
+const saveConfig = async () => {
+  // 校验表单
+  let valid = true
+  for (const item of conditionRef.value) {
+    if (item && !(await item.validate())) {
+      valid = false
+    }
+  }
+  if (!valid) return false
+  const showText = getShowText()
+  if (!showText) return false
+  currentNode.value.name = nodeName.value!
+  currentNode.value.showText = showText
+  currentNode.value.routerGroups = routerGroups.value
+  settingVisible.value = false
+  return true
+}
+// 显示路由分支节点配置， 由父组件传过来
+const showRouteNodeConfig = (node: SimpleFlowNode) => {
+  getRouterNode(processNodeTree?.value)
+  routerGroups.value = []
+  nodeName.value = node.name
+  if (node.routerGroups) {
+    routerGroups.value = node.routerGroups
+  }
+}
+
+const getShowText = () => {
+  if (!routerGroups.value || !Array.isArray(routerGroups.value) || routerGroups.value.length <= 0) {
+    message.warning('请配置路由！')
+    return ''
+  }
+  for (const route of routerGroups.value) {
+    if (!route.nodeId || !route.conditionType) {
+      message.warning('请完善路由配置项！')
+      return ''
+    }
+    if (route.conditionType === ConditionType.EXPRESSION && !route.conditionExpression) {
+      message.warning('请完善路由配置项！')
+      return ''
+    }
+    if (route.conditionType === ConditionType.RULE) {
+      for (const condition of route.conditionGroups.conditions) {
+        for (const rule of condition.rules) {
+          if (!rule.leftSide || !rule.rightSide) {
+            message.warning('请完善路由配置项！')
+            return ''
+          }
+        }
+      }
+    }
+  }
+  return `${routerGroups.value.length}条路由分支`
+}
+
+const addRouterGroup = () => {
+  routerGroups.value.push({
+    nodeId: '',
+    conditionType: ConditionType.RULE,
+    conditionExpression: '',
+    conditionGroups: {
+      and: true,
+      conditions: [
+        {
+          and: true,
+          rules: [
+            {
+              opCode: '==',
+              leftSide: '',
+              rightSide: ''
+            }
+          ]
+        }
+      ]
+    }
+  })
+}
+
+const deleteRouterGroup = (index: number) => {
+  routerGroups.value.splice(index, 1)
+}
+
+// 递归获取所有节点
+const getRouterNode = (node) => {
+  // TODO 最好还需要满足以下要求
+  // 并行分支、包容分支内部节点不能跳转到外部节点
+  // 条件分支节点可以向上跳转到外部节点
+  while (true) {
+    if (!node) break
+    if (node.type !== NodeType.ROUTER_BRANCH_NODE && node.type !== NodeType.CONDITION_NODE) {
+      nodeOptions.value.push({
+        label: node.name,
+        value: node.id
+      })
+    }
+    if (!node.childNode || node.type === NodeType.END_EVENT_NODE) {
+      break
+    }
+    if (node.conditionNodes && node.conditionNodes.length) {
+      node.conditionNodes.forEach((item) => {
+        getRouterNode(item)
+      })
+    }
+    node = node.childNode
+  }
+}
+
+defineExpose({ openDrawer, showRouteNodeConfig }) // 暴露方法给父组件
+</script>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue
new file mode 100644
index 0000000..9975d9b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue
@@ -0,0 +1,224 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <el-tabs type="border-card" v-model="activeTabName">
+      <el-tab-pane label="权限" name="user">
+        <el-text
+          v-if="
+            (!startUserIds || startUserIds.length === 0) &&
+            (!startDeptIds || startDeptIds.length === 0)
+          "
+        >
+          全部成员可以发起流程
+        </el-text>
+        <div v-else-if="startUserIds && startUserIds.length > 0">
+          <el-text v-if="startUserIds.length == 1">
+            {{ getUserNicknames(startUserIds) }} 可发起流程
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="getUserNicknames(startUserIds)"
+            >
+              {{ getUserNicknames(startUserIds.slice(0, 2)) }} 等
+              {{ startUserIds.length }} 人可发起流程
+            </el-tooltip>
+          </el-text>
+        </div>
+        <div v-else-if="startDeptIds && startDeptIds.length > 0">
+          <el-text v-if="startDeptIds.length == 1">
+            {{ getDeptNames(startDeptIds) }} 可发起流程
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="getDeptNames(startDeptIds)"
+            >
+              {{ getDeptNames(startDeptIds.slice(0, 2)) }} 等
+              {{ startDeptIds.length }} 个部门可发起流程
+            </el-tooltip>
+          </el-text>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
+        <div class="field-setting-pane">
+          <div class="field-setting-desc">字段权限</div>
+          <div class="field-permit-title">
+            <div class="setting-title-label first-title"> 字段名称 </div>
+            <div class="other-titles">
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('READ')">
+                只读
+              </span>
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('WRITE')">
+                可编辑
+              </span>
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('NONE')">
+                隐藏
+              </span>
+            </div>
+          </div>
+          <div
+            class="field-setting-item"
+            v-for="(item, index) in fieldsPermissionConfig"
+            :key="index"
+          >
+            <div class="field-setting-item-label"> {{ item.title }} </div>
+            <el-radio-group class="field-setting-item-group" v-model="item.permission">
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.READ"
+                  size="large"
+                  :label="FieldPermissionType.READ"
+                  ><span></span
+                ></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.WRITE"
+                  size="large"
+                  :label="FieldPermissionType.WRITE"
+                  ><span></span
+                ></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.NONE"
+                  size="large"
+                  :label="FieldPermissionType.NONE"
+                  ><span></span
+                ></el-radio>
+              </div>
+            </el-radio-group>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, FieldPermissionType, START_USER_BUTTON_SETTING } from '../consts'
+import { useWatchNode, useDrawer, useNodeName, useFormFieldsPermission } from '../node'
+import * as UserApi from '@/api/system/user'
+import * as DeptApi from '@/api/system/dept'
+defineOptions({
+  name: 'StartUserNodeConfig'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 可发起流程的用户编号
+const startUserIds = inject<Ref<any[]>>('startUserIds')
+// 可发起流程的部门编号
+const startDeptIds = inject<Ref<any[]>>('startDeptIds')
+// 用户列表
+const userOptions = inject<Ref<UserApi.UserVO[]>>('userList')
+// 部门列表
+const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList')
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 当前节点
+const currentNode = useWatchNode(props)
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_TASK_NODE)
+// 激活的 Tab 标签页
+const activeTabName = ref('user')
+// 表单字段权限配置
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
+  FieldPermissionType.WRITE
+)
+const getUserNicknames = (userIds: number[]): string => {
+  if (!userIds || userIds.length === 0) {
+    return ''
+  }
+  const nicknames: string[] = []
+  userIds.forEach((userId) => {
+    const found = userOptions?.value.find((item) => item.id === userId)
+    if (found && found.nickname) {
+      nicknames.push(found.nickname)
+    }
+  })
+  return nicknames.join(',')
+}
+const getDeptNames = (deptIds: number[]): string => {
+  if (!deptIds || deptIds.length === 0) {
+    return ''
+  }
+  const deptNames: string[] = []
+  deptIds.forEach((deptId) => {
+    const found = deptOptions?.value.find((item) => item.id === deptId)
+    if (found && found.name) {
+      deptNames.push(found.name)
+    }
+  })
+  return deptNames.join(',')
+}
+// 保存配置
+const saveConfig = async () => {
+  activeTabName.value = 'user'
+  currentNode.value.name = nodeName.value!
+  currentNode.value.showText = '已设置'
+  // 设置表单权限
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value
+  // 设置发起人的按钮权限
+  currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING
+  settingVisible.value = false
+  return true
+}
+// 显示发起人节点配置， 由父组件传过来
+const showStartUserNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name
+  // 表单字段权限
+  getNodeConfigFormFields(node.fieldsPermission)
+}
+
+/** 批量更新权限 */
+const updatePermission = (type: string) => {
+  fieldsPermissionConfig.value.forEach((field) => {
+    field.permission =
+      type === 'READ'
+        ? FieldPermissionType.READ
+        : type === 'WRITE'
+          ? FieldPermissionType.WRITE
+          : FieldPermissionType.NONE
+  })
+}
+defineExpose({ openDrawer, showStartUserNodeConfig }) // 暴露方法给父组件
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue
new file mode 100644
index 0000000..2baac8d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue
@@ -0,0 +1,525 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="630"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <div>
+      <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
+        <el-form-item label="触发器类型" prop="type">
+          <el-select v-model="configForm.type" @change="changeTriggerType">
+            <el-option
+              v-for="(item, index) in TRIGGER_TYPES"
+              :key="index"
+              :value="item.value"
+              :label="item.label"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- HTTP 请求触发器 -->
+        <div
+          v-if="
+            [TriggerTypeEnum.HTTP_REQUEST, TriggerTypeEnum.HTTP_CALLBACK].includes(
+              configForm.type
+            ) && configForm.httpRequestSetting
+          "
+        >
+          <HttpRequestSetting
+            v-model:setting="configForm.httpRequestSetting"
+            :responseEnable="configForm.type === TriggerTypeEnum.HTTP_REQUEST"
+            :formItemPrefix="'httpRequestSetting'"
+          />
+        </div>
+
+        <!-- 表单数据修改触发器 -->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_UPDATE">
+          <div v-for="(formSetting, index) in configForm.formSettings" :key="index">
+            <el-card class="w-580px mt-4">
+              <template #header>
+                <div class="flex items-center justify-between">
+                  <div>修改表单设置 {{ index + 1 }}</div>
+                  <el-button
+                    type="primary"
+                    plain
+                    circle
+                    v-if="configForm.formSettings!.length > 1"
+                    @click="deleteFormSetting(index)"
+                  >
+                    <Icon icon="ep:close" />
+                  </el-button>
+                </div>
+              </template>
+
+              <!-- 条件设置 -->
+              <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              />
+              <div class="cursor-pointer" v-if="formSetting.conditionType">
+                <el-tag
+                  type="success"
+                  effect="light"
+                  closable
+                  @close="deleteFormSettingCondition(formSetting)"
+                  @click="openFormSettingCondition(index, formSetting)"
+                >
+                  {{ showConditionText(formSetting) }}
+                </el-tag>
+              </div>
+              <el-button
+                v-else
+                type="primary"
+                text
+                @click="addFormSettingCondition(index, formSetting)"
+              >
+                <Icon icon="ep:link" class="mr-5px" />添加条件
+              </el-button>
+              <el-divider content-position="left">修改表单字段设置</el-divider>
+              <!-- 表单字段修改设置 -->
+              <div
+                class="flex items-center"
+                v-for="key in Object.keys(formSetting.updateFormFields || {})"
+                :key="key"
+              >
+                <div class="mr-2 flex items-center">
+                  <el-form-item>
+                    <el-select
+                      class="w-160px!"
+                      :model-value="key"
+                      @update:model-value="(newKey) => updateFormFieldKey(formSetting, key, newKey)"
+                      placeholder="请选择表单字段"
+                      :disabled="key !== ''"
+                    >
+                      <el-option
+                        v-for="(field, fIdx) in optionalUpdateFormFields"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                        :disabled="field.disabled"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="mx-2"><el-form-item>的值设置为</el-form-item></div>
+                <div class="mr-2">
+                  <el-form-item
+                    :prop="`formSettings.${index}.updateFormFields.${key}`"
+                    :rules="{
+                      required: true,
+                      message: '值不能为空',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-input
+                      class="w-160px"
+                      v-model="formSetting.updateFormFields![key]"
+                      placeholder="请输入"
+                      :disabled="!key"
+                    />
+                  </el-form-item>
+                </div>
+                <div class="mr-1 pt-1 cursor-pointer">
+                  <el-form-item>
+                    <Icon
+                      icon="ep:delete"
+                      :size="18"
+                      @click="deleteFormFieldSetting(formSetting, key)"
+                    />
+                  </el-form-item>
+                </div>
+              </div>
+
+              <!-- 添加表单字段按钮 -->
+              <el-button type="primary" text @click="addFormFieldSetting(formSetting)">
+                <Icon icon="ep:memo" class="mr-5px" />添加修改字段
+              </el-button>
+            </el-card>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <el-button class="mt-6" type="primary" text @click="addFormSetting">
+            <Icon icon="ep:setting" class="mr-5px" />添加设置
+          </el-button>
+        </div>
+
+        <!-- 表单数据删除触发器 -->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_DELETE">
+          <div v-for="(formSetting, index) in configForm.formSettings" :key="index">
+            <el-card class="w-580px mt-4">
+              <template #header>
+                <div class="flex items-center justify-between">
+                  <div>删除表单设置 {{ index + 1 }}</div>
+                  <el-button
+                    type="primary"
+                    plain
+                    circle
+                    v-if="configForm.formSettings!.length > 1"
+                    @click="deleteFormSetting(index)"
+                  >
+                    <Icon icon="ep:close" />
+                  </el-button>
+                </div>
+              </template>
+
+              <!-- 条件设置 -->
+              <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              />
+              <div class="cursor-pointer" v-if="formSetting.conditionType">
+                <el-tag
+                  type="warning"
+                  effect="light"
+                  closable
+                  @close="deleteFormSettingCondition(formSetting)"
+                  @click="openFormSettingCondition(index, formSetting)"
+                >
+                  {{ showConditionText(formSetting) }}
+                </el-tag>
+              </div>
+              <el-button
+                v-else
+                type="primary"
+                text
+                @click="addFormSettingCondition(index, formSetting)"
+              >
+                <Icon icon="ep:link" class="mr-5px" />添加条件
+              </el-button>
+
+              <el-divider content-position="left">删除表单字段设置</el-divider>
+              <!-- 表单字段删除设置 -->
+              <div class="flex flex-wrap gap-2">
+                <el-select
+                  v-model="formSetting.deleteFields"
+                  multiple
+                  placeholder="请选择要删除的字段"
+                  class="w-full"
+                >
+                  <el-option
+                    v-for="field in formFields"
+                    :key="field.field"
+                    :label="field.title"
+                    :value="field.field"
+                  />
+                </el-select>
+              </div>
+            </el-card>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <el-button class="mt-6" type="primary" text @click="addFormSetting">
+            <Icon icon="ep:setting" class="mr-5px" />添加设置
+          </el-button>
+        </div>
+      </el-form>
+    </div>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import {
+  SimpleFlowNode,
+  NodeType,
+  TriggerSetting,
+  TRIGGER_TYPES,
+  TriggerTypeEnum,
+  FormTriggerSetting,
+  DEFAULT_CONDITION_GROUP_VALUE
+} from '../consts'
+import { useWatchNode, useDrawer, useNodeName, useFormFields, getConditionShowText } from '../node'
+import HttpRequestSetting from './components/HttpRequestSetting.vue'
+import ConditionDialog from './components/ConditionDialog.vue'
+import { cloneDeep } from 'lodash-es'
+const { proxy } = getCurrentInstance() as any
+
+defineOptions({
+  name: 'TriggerNodeConfig'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const message = useMessage() // 消息弹窗
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 当前节点
+const currentNode = useWatchNode(props)
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.TRIGGER_NODE)
+// 触发器表单配置
+const formRef = ref() // 表单 Ref
+// 表单校验规则
+const formRules = reactive({
+  type: [{ required: true, message: '触发器类型不能为空', trigger: 'change' }],
+  'httpRequestSetting.url': [{ required: true, message: '请求地址不能为空', trigger: 'blur' }]
+})
+// 触发器配置表单数据
+const configForm = ref<TriggerSetting>({
+  type: TriggerTypeEnum.HTTP_REQUEST,
+  httpRequestSetting: {
+    url: '',
+    header: [],
+    body: [],
+    response: []
+  },
+  formSettings: [
+    {
+      conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      updateFormFields: {},
+      deleteFields: []
+    }
+  ]
+})
+// 流程表单字段
+const formFields = useFormFields()
+
+// 可选的修改的表单字段
+const optionalUpdateFormFields = computed(() => {
+  return formFields.map((field) => ({
+    title: field.title,
+    field: field.field,
+    disabled: false
+  }))
+})
+
+let originalSetting: TriggerSetting | undefined
+
+/** 触发器类型改变了 */
+const changeTriggerType = () => {
+  if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
+    configForm.value.httpRequestSetting =
+      originalSetting?.type === TriggerTypeEnum.HTTP_REQUEST && originalSetting.httpRequestSetting
+        ? originalSetting.httpRequestSetting
+        : {
+            url: '',
+            header: [],
+            body: [],
+            response: []
+          }
+    configForm.value.formSettings = undefined
+    return
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.HTTP_CALLBACK) {
+    configForm.value.httpRequestSetting =
+      originalSetting?.type === TriggerTypeEnum.HTTP_CALLBACK && originalSetting.httpRequestSetting
+        ? originalSetting.httpRequestSetting
+        : {
+            url: '',
+            header: [],
+            body: [],
+            response: []
+          }
+    configForm.value.formSettings = undefined
+    return
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_UPDATE && originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+              updateFormFields: {},
+              deleteFields: []
+            }
+          ]
+    configForm.value.httpRequestSetting = undefined
+    return
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_DELETE && originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+              updateFormFields: undefined,
+              deleteFields: []
+            }
+          ]
+    configForm.value.httpRequestSetting = undefined
+    return
+  }
+}
+
+/** 添加新的修改表单设置 */
+const addFormSetting = () => {
+  configForm.value.formSettings!.push({
+    conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+    updateFormFields: {},
+    deleteFields: []
+  })
+}
+
+/** 删除修改表单设置 */
+const deleteFormSetting = (index: number) => {
+  configForm.value.formSettings!.splice(index, 1)
+}
+
+/** 添加条件配置 */
+const addFormSettingCondition = (index: number, formSetting: FormTriggerSetting) => {
+  const conditionDialog = proxy.$refs[`condition-${index}`][0]
+  conditionDialog.open(formSetting)
+}
+/** 删除条件配置 */
+const deleteFormSettingCondition = (formSetting: FormTriggerSetting) => {
+  formSetting.conditionType = undefined
+}
+/** 打开条件配置弹窗 */
+const openFormSettingCondition = (index: number, formSetting: FormTriggerSetting) => {
+  const conditionDialog = proxy.$refs[`condition-${index}`][0]
+  conditionDialog.open(formSetting)
+}
+/** 处理条件配置保存 */
+const handleConditionUpdate = (index: number, condition: any) => {
+  configForm.value.formSettings![index].conditionType = condition.conditionType
+  configForm.value.formSettings![index].conditionExpression = condition.conditionExpression
+  configForm.value.formSettings![index].conditionGroups = condition.conditionGroups
+}
+/** 条件配置展示 */
+const showConditionText = (formSetting: FormTriggerSetting) => {
+  return getConditionShowText(
+    formSetting.conditionType,
+    formSetting.conditionExpression,
+    formSetting.conditionGroups,
+    formFields
+  )
+}
+
+/** 添加修改字段设置项 */
+const addFormFieldSetting = (formSetting: FormTriggerSetting) => {
+  if (!formSetting) return
+  if (!formSetting.updateFormFields) {
+    formSetting.updateFormFields = {}
+  }
+  formSetting.updateFormFields[''] = undefined
+}
+/** 更新字段 KEY */
+const updateFormFieldKey = (formSetting: FormTriggerSetting, oldKey: string, newKey: string) => {
+  if (!formSetting?.updateFormFields) return
+  const value = formSetting.updateFormFields[oldKey]
+  delete formSetting.updateFormFields[oldKey]
+  formSetting.updateFormFields[newKey] = value
+}
+
+/** 删除修改字段设置项 */
+const deleteFormFieldSetting = (formSetting: FormTriggerSetting, key: string) => {
+  if (!formSetting?.updateFormFields) return
+  delete formSetting.updateFormFields[key]
+}
+
+/** 保存配置 */
+const saveConfig = async () => {
+  if (!formRef) return false
+  const valid = await formRef.value.validate()
+  if (!valid) return false
+  const showText = getShowText()
+  if (!showText) return false
+  currentNode.value.name = nodeName.value!
+  currentNode.value.showText = showText
+  if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
+    configForm.value.formSettings = undefined
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+    configForm.value.httpRequestSetting = undefined
+    // 清理删除字段相关的数据
+    configForm.value.formSettings?.forEach((setting) => {
+      setting.deleteFields = undefined
+    })
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    configForm.value.httpRequestSetting = undefined
+    // 清理修改字段相关的数据
+    configForm.value.formSettings?.forEach((setting) => {
+      setting.updateFormFields = undefined
+    })
+  }
+  currentNode.value.triggerSetting = configForm.value
+  settingVisible.value = false
+  return true
+}
+
+/** 获取节点展示内容 */
+const getShowText = (): string => {
+  let showText = ''
+  if (
+    configForm.value.type === TriggerTypeEnum.HTTP_REQUEST ||
+    configForm.value.type === TriggerTypeEnum.HTTP_CALLBACK
+  ) {
+    showText = `${configForm.value.httpRequestSetting?.url}`
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+    for (const [index, setting] of configForm.value.formSettings!.entries()) {
+      if (!setting.updateFormFields || Object.keys(setting.updateFormFields).length === 0) {
+        message.warning(`请添加表单设置${index + 1}的修改字段`)
+        return ''
+      }
+    }
+    showText = '修改表单数据'
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    for (const [index, setting] of configForm.value.formSettings!.entries()) {
+      if (!setting.deleteFields || setting.deleteFields.length === 0) {
+        message.warning(`请选择表单设置${index + 1}要删除的字段`)
+        return ''
+      }
+    }
+    showText = '删除表单数据'
+  }
+  return showText
+}
+
+/** 显示触发器节点配置， 由父组件传过来 */
+const showTriggerNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name
+  originalSetting = node.triggerSetting ? JSON.parse(JSON.stringify(node.triggerSetting)) : {}
+  if (node.triggerSetting) {
+    configForm.value = {
+      type: node.triggerSetting.type,
+      httpRequestSetting: node.triggerSetting.httpRequestSetting || {
+        url: '',
+        header: [],
+        body: [],
+        response: []
+      },
+      formSettings: node.triggerSetting.formSettings || [
+        {
+          conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          updateFormFields: {},
+          deleteFields: []
+        }
+      ]
+    }
+  }
+}
+
+defineExpose({ openDrawer, showTriggerNodeConfig }) // 暴露方法给父组件
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
new file mode 100644
index 0000000..433864b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -0,0 +1,1058 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="580"
+    :before-close="saveConfig"
+    class="justify-start"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <div v-if="currentNode.type === NodeType.USER_TASK_NODE" class="flex flex-items-center mb-3">
+      <span class="font-size-16px mr-3">审批类型 :</span>
+      <el-radio-group v-model="approveType">
+        <el-radio
+          v-for="(item, index) in APPROVE_TYPE"
+          :key="index"
+          :value="item.value"
+          :label="item.value"
+        >
+          {{ item.label }}
+        </el-radio>
+      </el-radio-group>
+    </div>
+    <el-tabs type="border-card" v-model="activeTabName" v-if="approveType === ApproveType.USER">
+      <el-tab-pane :label="`${nodeTypeName}人`" name="user">
+        <div>
+          <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
+            <el-form-item :label="`${nodeTypeName}人设置`" prop="candidateStrategy">
+              <el-radio-group
+                v-model="configForm.candidateStrategy"
+                @change="changeCandidateStrategy"
+              >
+                <el-row>
+                  <el-col v-for="(dict, index) in CANDIDATE_STRATEGY" :key="index" :span="8">
+                    <el-radio :value="dict.value" :label="dict.value">
+                      {{ dict.label }}
+                    </el-radio>
+                  </el-col>
+                </el-row>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy == CandidateStrategy.ROLE"
+              label="指定角色"
+              prop="roleIds"
+            >
+              <el-select
+                filterable
+                v-model="configForm.roleIds"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
+                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+              "
+              label="指定部门"
+              prop="deptIds"
+              span="24"
+            >
+              <el-tree-select
+                ref="treeRef"
+                v-model="configForm.deptIds"
+                :data="deptTreeOptions"
+                :props="defaultProps"
+                empty-text="加载中，请稍后"
+                multiple
+                node-key="id"
+                :check-strictly="true"
+                style="width: 100%"
+                show-checkbox
+              />
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy == CandidateStrategy.POST"
+              label="指定岗位"
+              prop="postIds"
+              span="24"
+            >
+              <el-select
+                filterable
+                v-model="configForm.postIds"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id!"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy == CandidateStrategy.USER"
+              label="指定用户"
+              prop="userIds"
+              span="24"
+            >
+              <el-select
+                filterable
+                v-model="configForm.userIds"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER_GROUP"
+              label="指定用户组"
+              prop="userGroups"
+            >
+              <el-select
+                filterable
+                v-model="configForm.userGroups"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.FORM_USER"
+              label="表单内用户字段"
+              prop="formUser"
+            >
+              <el-select filterable v-model="configForm.formUser" clearable style="width: 100%">
+                <el-option
+                  v-for="(item, idx) in userFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER"
+              label="表单内部门字段"
+              prop="formDept"
+            >
+              <el-select filterable v-model="configForm.formDept" clearable style="width: 100%">
+                <el-option
+                  v-for="(item, idx) in deptFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy ==
+                  CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER
+              "
+              :label="deptLevelLabel!"
+              prop="deptLevel"
+              span="24"
+            >
+              <el-select filterable v-model="configForm.deptLevel" clearable>
+                <el-option
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <!-- TODO @jason：后续要支持选择已经存好的表达式 -->
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
+              label="流程表达式"
+              prop="expression"
+            >
+              <el-input
+                type="textarea"
+                v-model="configForm.expression"
+                clearable
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item :label="`多人${nodeTypeName}方式`" prop="approveMethod">
+              <el-radio-group v-model="configForm.approveMethod" @change="approveMethodChanged">
+                <div class="flex-col">
+                  <div
+                    v-for="(item, index) in APPROVE_METHODS"
+                    :key="index"
+                    class="flex items-center"
+                  >
+                    <el-radio :value="item.value" :label="item.value">
+                      {{ item.label }}
+                    </el-radio>
+                    <el-form-item prop="approveRatio">
+                      <el-input-number
+                        v-model="configForm.approveRatio"
+                        :min="10"
+                        :max="100"
+                        :step="10"
+                        size="small"
+                        v-if="
+                          item.value === ApproveMethodType.APPROVE_BY_RATIO &&
+                          configForm.approveMethod === ApproveMethodType.APPROVE_BY_RATIO
+                        "
+                      />
+                    </el-form-item>
+                  </div>
+                </div>
+              </el-radio-group>
+            </el-form-item>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <el-divider content-position="left">审批人拒绝时</el-divider>
+              <el-form-item prop="rejectHandlerType">
+                <el-radio-group v-model="configForm.rejectHandlerType">
+                  <div class="flex-col">
+                    <div v-for="(item, index) in REJECT_HANDLER_TYPES" :key="index">
+                      <el-radio :key="item.value" :value="item.value" :label="item.label" />
+                    </div>
+                  </div>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item
+                v-if="configForm.rejectHandlerType == RejectHandlerType.RETURN_USER_TASK"
+                label="驳回节点"
+                prop="returnNodeId"
+              >
+                <el-select
+                  filterable
+                  v-model="configForm.returnNodeId"
+                  clearable
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item in returnTaskList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </div>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <el-divider content-position="left">审批人超时未处理时</el-divider>
+              <el-form-item label="启用开关" prop="timeoutHandlerEnable">
+                <el-switch
+                  v-model="configForm.timeoutHandlerEnable"
+                  active-text="开启"
+                  inactive-text="关闭"
+                  @change="timeoutHandlerChange"
+                />
+              </el-form-item>
+              <el-form-item
+                label="执行动作"
+                prop="timeoutHandlerType"
+                v-if="configForm.timeoutHandlerEnable"
+              >
+                <el-radio-group
+                  v-model="configForm.timeoutHandlerType"
+                  @change="timeoutHandlerTypeChanged"
+                >
+                  <el-radio-button
+                    v-for="item in TIMEOUT_HANDLER_TYPES"
+                    :key="item.value"
+                    :value="item.value"
+                    :label="item.label"
+                  />
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="超时时间设置" v-if="configForm.timeoutHandlerEnable">
+                <span class="mr-2">当超过</span>
+                <el-form-item prop="timeDuration">
+                  <el-input-number
+                    class="mr-2"
+                    :style="{ width: '100px' }"
+                    v-model="configForm.timeDuration"
+                    :min="1"
+                    controls-position="right"
+                  />
+                </el-form-item>
+                <el-select
+                  filterable
+                  v-model="timeUnit"
+                  class="mr-2"
+                  :style="{ width: '100px' }"
+                  @change="timeUnitChange"
+                >
+                  <el-option
+                    v-for="item in TIME_UNIT_TYPES"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+                未处理
+              </el-form-item>
+              <el-form-item
+                label="最大提醒次数"
+                prop="maxRemindCount"
+                v-if="configForm.timeoutHandlerEnable && configForm.timeoutHandlerType === 1"
+              >
+                <el-input-number v-model="configForm.maxRemindCount" :min="1" :max="10" />
+              </el-form-item>
+            </div>
+
+            <el-divider content-position="left">{{ nodeTypeName }}人为空时</el-divider>
+            <el-form-item prop="assignEmptyHandlerType">
+              <el-radio-group v-model="configForm.assignEmptyHandlerType">
+                <div class="flex-col">
+                  <div v-for="(item, index) in ASSIGN_EMPTY_HANDLER_TYPES" :key="index">
+                    <el-radio :key="item.value" :value="item.value" :label="item.label" />
+                  </div>
+                </div>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.assignEmptyHandlerType == AssignEmptyHandlerType.ASSIGN_USER"
+              label="指定用户"
+              prop="assignEmptyHandlerUserIds"
+              span="24"
+            >
+              <el-select
+                filterable
+                v-model="configForm.assignEmptyHandlerUserIds"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <el-divider content-position="left">审批人与提交人为同一人时</el-divider>
+              <el-form-item prop="assignStartUserHandlerType">
+                <el-radio-group v-model="configForm.assignStartUserHandlerType">
+                  <div class="flex-col">
+                    <div v-for="(item, index) in ASSIGN_START_USER_HANDLER_TYPES" :key="index">
+                      <el-radio :key="item.value" :value="item.value" :label="item.label" />
+                    </div>
+                  </div>
+                </el-radio-group>
+              </el-form-item>
+            </div>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <el-divider content-position="left">是否需要签名</el-divider>
+              <el-form-item prop="signEnable">
+                <el-switch v-model="configForm.signEnable" active-text="是" inactive-text="否" />
+              </el-form-item>
+            </div>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <el-divider content-position="left">审批意见</el-divider>
+              <el-form-item prop="reasonRequire">
+                <el-switch
+                  v-model="configForm.reasonRequire"
+                  active-text="必填"
+                  inactive-text="非必填"
+                />
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane
+        label="操作按钮设置"
+        v-if="currentNode.type === NodeType.USER_TASK_NODE"
+        name="buttons"
+      >
+        <div class="button-setting-pane">
+          <div class="button-setting-desc">操作按钮</div>
+          <div class="button-setting-title">
+            <div class="button-title-label">操作按钮</div>
+            <div class="pl-4 button-title-label">显示名称</div>
+            <div class="button-title-label">启用</div>
+          </div>
+          <div class="button-setting-item" v-for="(item, index) in buttonsSetting" :key="index">
+            <div class="button-setting-item-label"> {{ OPERATION_BUTTON_NAME.get(item.id) }} </div>
+            <div class="button-setting-item-label">
+              <input
+                type="text"
+                class="editable-title-input"
+                @blur="btnDisplayNameBlurEvent(index)"
+                v-mountedFocus
+                v-model="item.displayName"
+                :placeholder="item.displayName"
+                v-if="btnDisplayNameEdit[index]"
+              />
+              <el-button v-else text @click="changeBtnDisplayName(index)"
+                >{{ item.displayName }} &nbsp;<Icon icon="ep:edit"
+              /></el-button>
+            </div>
+            <div class="button-setting-item-label">
+              <el-switch v-model="item.enable" />
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
+        <div class="field-setting-pane">
+          <div class="field-setting-desc">字段权限</div>
+          <div class="field-permit-title">
+            <div class="setting-title-label first-title"> 字段名称 </div>
+            <div class="other-titles">
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('READ')">
+                只读
+              </span>
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('WRITE')">
+                可编辑
+              </span>
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('NONE')">
+                隐藏
+              </span>
+            </div>
+          </div>
+          <div
+            class="field-setting-item"
+            v-for="(item, index) in fieldsPermissionConfig"
+            :key="index"
+          >
+            <div class="field-setting-item-label"> {{ item.title }} </div>
+            <el-radio-group class="field-setting-item-group" v-model="item.permission">
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.READ"
+                  size="large"
+                  :label="FieldPermissionType.READ"
+                  ><span></span
+                ></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.WRITE"
+                  size="large"
+                  :label="FieldPermissionType.WRITE"
+                  ><span></span
+                ></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.NONE"
+                  size="large"
+                  :label="FieldPermissionType.NONE"
+                  ><span></span
+                ></el-radio>
+              </div>
+            </el-radio-group>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="监听器" name="listener">
+        <UserTaskListener
+          ref="userTaskListenerRef"
+          v-model="configForm"
+          :form-field-options="formFieldOptions"
+        />
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import {
+  SimpleFlowNode,
+  APPROVE_TYPE,
+  ApproveType,
+  APPROVE_METHODS,
+  CandidateStrategy,
+  NodeType,
+  ApproveMethodType,
+  TimeUnitType,
+  RejectHandlerType,
+  TIMEOUT_HANDLER_TYPES,
+  TIME_UNIT_TYPES,
+  REJECT_HANDLER_TYPES,
+  DEFAULT_BUTTON_SETTING,
+  OPERATION_BUTTON_NAME,
+  ButtonSetting,
+  MULTI_LEVEL_DEPT,
+  CANDIDATE_STRATEGY,
+  ASSIGN_START_USER_HANDLER_TYPES,
+  TimeoutHandlerType,
+  ASSIGN_EMPTY_HANDLER_TYPES,
+  AssignEmptyHandlerType,
+  FieldPermissionType,
+  ProcessVariableEnum,
+  TRANSACTOR_DEFAULT_BUTTON_SETTING
+} from '../consts'
+
+import {
+  useWatchNode,
+  useNodeName,
+  useFormFieldsPermission,
+  useNodeForm,
+  UserTaskFormType,
+  useDrawer
+} from '../node'
+import { defaultProps } from '@/utils/tree'
+import { cloneDeep } from 'lodash-es'
+import { convertTimeUnit, getApproveTypeText } from '../utils'
+import UserTaskListener from './components/UserTaskListener.vue'
+defineOptions({
+  name: 'UserTaskNodeConfig'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const emits = defineEmits<{
+  'find:returnTaskNodes': [nodeList: SimpleFlowNode[]]
+}>()
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源'
+  if (configForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) {
+    label = label + '(指定部门向上)'
+  } else if (configForm.value.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER) {
+    label = label + '(表单内部门向上)'
+  } else {
+    label = label + '(发起人部门向上)'
+  }
+  return label
+})
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 节点名称配置
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.USER_TASK_NODE)
+// 激活的 Tab 标签页
+const activeTabName = ref('user')
+// 表单字段权限设置
+const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } =
+  useFormFieldsPermission(FieldPermissionType.READ)
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  // 固定添加发起人 ID 字段
+  formFieldOptions.unshift({
+    field: ProcessVariableEnum.START_USER_ID,
+    title: '发起人',
+    type: 'UserSelect',
+    required: true
+  })
+  return formFieldOptions.filter((item) => item.type === 'UserSelect')
+})
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect')
+})
+// 操作按钮设置
+const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } =
+  useButtonsSetting()
+const approveType = ref(ApproveType.USER)
+// 审批人表单设置
+const formRef = ref() // 表单 Ref
+// 表单校验规则
+const formRules = reactive({
+  candidateStrategy: [{ required: true, message: '审批人设置不能为空', trigger: 'change' }],
+  userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+  userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
+  formUser: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
+  formDept: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }],
+  postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }],
+  approveMethod: [{ required: true, message: '多人审批方式不能为空', trigger: 'change' }],
+  approveRatio: [{ required: true, message: '通过比例不能为空', trigger: 'blur' }],
+  returnNodeId: [{ required: true, message: '驳回节点不能为空', trigger: 'change' }],
+  timeoutHandlerEnable: [{ required: true }],
+  timeoutHandlerType: [{ required: true }],
+  timeDuration: [{ required: true, message: '超时时间不能为空', trigger: 'blur' }],
+  maxRemindCount: [{ required: true, message: '提醒次数不能为空', trigger: 'blur' }],
+  assignEmptyHandlerType: [{ required: true }],
+  assignEmptyHandlerUserIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  assignStartUserHandlerType: [{ required: true }]
+})
+
+const {
+  configForm: tempConfigForm,
+  roleOptions,
+  postOptions,
+  userOptions,
+  userGroupOptions,
+  deptTreeOptions,
+  handleCandidateParam,
+  parseCandidateParam,
+  getShowText
+} = useNodeForm(currentNode.value.type)
+const configForm = tempConfigForm as Ref<UserTaskFormType>
+
+// 改变审批人设置策略
+const changeCandidateStrategy = () => {
+  configForm.value.userIds = []
+  configForm.value.deptIds = []
+  configForm.value.roleIds = []
+  configForm.value.postIds = []
+  configForm.value.userGroups = []
+  configForm.value.deptLevel = 1
+  configForm.value.formUser = ''
+  configForm.value.formDept = ''
+  configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE
+}
+
+// 审批方式改变
+const approveMethodChanged = () => {
+  configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
+  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    configForm.value.approveRatio = 100
+  }
+  formRef.value.clearValidate('approveRatio')
+}
+// 审批拒绝 可退回的节点
+const returnTaskList = ref<SimpleFlowNode[]>([])
+// 审批人超时未处理设置
+const {
+  timeoutHandlerChange,
+  cTimeoutType,
+  timeoutHandlerTypeChanged,
+  timeUnit,
+  timeUnitChange,
+  isoTimeDuration,
+  cTimeoutMaxRemindCount
+} = useTimeoutHandler()
+
+const userTaskListenerRef = ref()
+
+/** 节点类型名称 */
+const nodeTypeName = computed(() => {
+  return currentNode.value.type === NodeType.TRANSACTOR_NODE ? '办理' : '审批'
+})
+
+/** 保存配置 */
+const saveConfig = async () => {
+  // activeTabName.value = 'user'
+  // 设置审批节点名称
+  currentNode.value.name = nodeName.value!
+  // 设置审批类型
+  currentNode.value.approveType = approveType.value
+  // 如果不是人工审批。返回
+  if (approveType.value !== ApproveType.USER) {
+    currentNode.value.showText = getApproveTypeText(approveType.value)
+    settingVisible.value = false
+    return true
+  }
+
+  if (!formRef) return false
+  if (!userTaskListenerRef) return false
+  const valid = (await formRef.value.validate()) && (await userTaskListenerRef.value.validate())
+  if (!valid) return false
+  const showText = getShowText()
+  if (!showText) return false
+
+  currentNode.value.candidateStrategy = configForm.value.candidateStrategy
+  // 处理 candidateParam 参数
+  currentNode.value.candidateParam = handleCandidateParam()
+  // 设置审批方式
+  currentNode.value.approveMethod = configForm.value.approveMethod
+  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    currentNode.value.approveRatio = configForm.value.approveRatio
+  }
+  // 设置拒绝处理
+  currentNode.value.rejectHandler = {
+    type: configForm.value.rejectHandlerType!,
+    returnNodeId: configForm.value.returnNodeId
+  }
+  // 设置超时处理
+  currentNode.value.timeoutHandler = {
+    enable: configForm.value.timeoutHandlerEnable!,
+    type: cTimeoutType.value,
+    timeDuration: isoTimeDuration.value,
+    maxRemindCount: cTimeoutMaxRemindCount.value
+  }
+  // 设置审批人为空时
+  currentNode.value.assignEmptyHandler = {
+    type: configForm.value.assignEmptyHandlerType!,
+    userIds:
+      configForm.value.assignEmptyHandlerType === AssignEmptyHandlerType.ASSIGN_USER
+        ? configForm.value.assignEmptyHandlerUserIds
+        : undefined
+  }
+  // 设置审批人与发起人相同时
+  currentNode.value.assignStartUserHandlerType = configForm.value.assignStartUserHandlerType
+  // 设置表单权限
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value
+  // 设置按钮权限
+  currentNode.value.buttonsSetting = buttonsSetting.value
+  // 创建任务监听器
+  currentNode.value.taskCreateListener = {
+    enable: configForm.value.taskCreateListenerEnable ?? false,
+    path: configForm.value.taskCreateListenerPath,
+    header: configForm.value.taskCreateListener?.header,
+    body: configForm.value.taskCreateListener?.body
+  }
+  // 指派任务监听器
+  currentNode.value.taskAssignListener = {
+    enable: configForm.value.taskAssignListenerEnable ?? false,
+    path: configForm.value.taskAssignListenerPath,
+    header: configForm.value.taskAssignListener?.header,
+    body: configForm.value.taskAssignListener?.body
+  }
+  // 完成任务监听器
+  currentNode.value.taskCompleteListener = {
+    enable: configForm.value.taskCompleteListenerEnable ?? false,
+    path: configForm.value.taskCompleteListenerPath,
+    header: configForm.value.taskCompleteListener?.header,
+    body: configForm.value.taskCompleteListener?.body
+  }
+  // 签名
+  currentNode.value.signEnable = configForm.value.signEnable
+  // 审批意见
+  currentNode.value.reasonRequire = configForm.value.reasonRequire
+
+  currentNode.value.showText = showText
+  settingVisible.value = false
+  return true
+}
+
+/** 显示审批节点配置， 由父组件传过来 */
+const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name
+  // 1 审批类型
+  approveType.value = node.approveType ? node.approveType : ApproveType.USER
+  // 如果审批类型不是人工审批返回
+  if (approveType.value !== ApproveType.USER) {
+    return
+  }
+
+  //2.1 审批人设置
+  configForm.value.candidateStrategy = node.candidateStrategy!
+  // 解析候选人参数
+  parseCandidateParam(node.candidateStrategy!, node?.candidateParam)
+  // 2.2 设置审批方式
+  configForm.value.approveMethod = node.approveMethod!
+  if (node.approveMethod == ApproveMethodType.APPROVE_BY_RATIO) {
+    configForm.value.approveRatio = node.approveRatio!
+  }
+  // 2.3 设置审批拒绝处理
+  configForm.value.rejectHandlerType = node.rejectHandler?.type
+  configForm.value.returnNodeId = node.rejectHandler?.returnNodeId
+  const matchNodeList = []
+  emits('find:returnTaskNodes', matchNodeList)
+  returnTaskList.value = matchNodeList
+  // 2.4 设置审批超时处理
+  configForm.value.timeoutHandlerEnable = node.timeoutHandler?.enable
+  if (node.timeoutHandler?.enable && node.timeoutHandler?.timeDuration) {
+    const strTimeDuration = node.timeoutHandler.timeDuration
+    let parseTime = strTimeDuration.slice(2, strTimeDuration.length - 1)
+    let parseTimeUnit = strTimeDuration.slice(strTimeDuration.length - 1)
+    configForm.value.timeDuration = parseInt(parseTime)
+    timeUnit.value = convertTimeUnit(parseTimeUnit)
+  }
+  configForm.value.timeoutHandlerType = node.timeoutHandler?.type
+  configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount
+  // 2.5 设置审批人为空时
+  configForm.value.assignEmptyHandlerType = node.assignEmptyHandler?.type
+  configForm.value.assignEmptyHandlerUserIds = node.assignEmptyHandler?.userIds
+  // 2.6 设置用户任务的审批人与发起人相同时
+  configForm.value.assignStartUserHandlerType = node.assignStartUserHandlerType
+  // 3. 操作按钮设置
+  buttonsSetting.value =
+    cloneDeep(node.buttonsSetting) ||
+    (node.type === NodeType.TRANSACTOR_NODE
+      ? TRANSACTOR_DEFAULT_BUTTON_SETTING
+      : DEFAULT_BUTTON_SETTING)
+  // 4. 表单字段权限配置
+  getNodeConfigFormFields(node.fieldsPermission)
+  // 5. 监听器
+  // 5.1 创建任务
+  configForm.value.taskCreateListenerEnable = node.taskCreateListener?.enable
+  configForm.value.taskCreateListenerPath = node.taskCreateListener?.path
+  configForm.value.taskCreateListener = {
+    header: node.taskCreateListener?.header ?? [],
+    body: node.taskCreateListener?.body ?? []
+  }
+  // 5.2 指派任务
+  configForm.value.taskAssignListenerEnable = node.taskAssignListener?.enable
+  configForm.value.taskAssignListenerPath = node.taskAssignListener?.path
+  configForm.value.taskAssignListener = {
+    header: node.taskAssignListener?.header ?? [],
+    body: node.taskAssignListener?.body ?? []
+  }
+  // 5.3 完成任务
+  configForm.value.taskCompleteListenerEnable = node.taskCompleteListener?.enable
+  configForm.value.taskCompleteListenerPath = node.taskCompleteListener?.path
+  configForm.value.taskCompleteListener = {
+    header: node.taskCompleteListener?.header ?? [],
+    body: node.taskCompleteListener?.body ?? []
+  }
+  // 6. 签名
+  configForm.value.signEnable = node?.signEnable ?? false
+  // 7. 审批意见
+  configForm.value.reasonRequire = node?.reasonRequire ?? false
+}
+
+defineExpose({ openDrawer, showUserTaskNodeConfig }) // 暴露方法给父组件
+
+/** 操作按钮设置 */
+function useButtonsSetting() {
+  const buttonsSetting = ref<ButtonSetting[]>()
+  // 操作按钮显示名称可编辑
+  const btnDisplayNameEdit = ref<boolean[]>([])
+  const changeBtnDisplayName = (index: number) => {
+    btnDisplayNameEdit.value[index] = true
+  }
+  const btnDisplayNameBlurEvent = (index: number) => {
+    btnDisplayNameEdit.value[index] = false
+    const buttonItem = buttonsSetting.value![index]
+    buttonItem.displayName = buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)!
+  }
+  return {
+    buttonsSetting,
+    btnDisplayNameEdit,
+    changeBtnDisplayName,
+    btnDisplayNameBlurEvent
+  }
+}
+
+/** 审批人超时未处理配置 */
+function useTimeoutHandler() {
+  // 时间单位
+  const timeUnit = ref(TimeUnitType.HOUR)
+
+  // 超时开关改变
+  const timeoutHandlerChange = () => {
+    if (configForm.value.timeoutHandlerEnable) {
+      timeUnit.value = 2
+      configForm.value.timeDuration = 6
+      configForm.value.timeoutHandlerType = 1
+      configForm.value.maxRemindCount = 1
+    }
+  }
+  // 超时执行的动作
+  const cTimeoutType = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined
+    }
+    return configForm.value.timeoutHandlerType
+  })
+
+  // 超时处理动作改变
+  const timeoutHandlerTypeChanged = () => {
+    if (configForm.value.timeoutHandlerType === TimeoutHandlerType.REMINDER) {
+      configForm.value.maxRemindCount = 1 // 超时提醒次数，默认为1
+    }
+  }
+
+  // 时间单位改变
+  const timeUnitChange = () => {
+    // 分钟，默认是 60 分钟
+    if (timeUnit.value === TimeUnitType.MINUTE) {
+      configForm.value.timeDuration = 60
+    }
+    // 小时，默认是 6 个小时
+    if (timeUnit.value === TimeUnitType.HOUR) {
+      configForm.value.timeDuration = 6
+    }
+    // 天， 默认 1天
+    if (timeUnit.value === TimeUnitType.DAY) {
+      configForm.value.timeDuration = 1
+    }
+  }
+  // 超时时间的 ISO 表示
+  const isoTimeDuration = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined
+    }
+    let strTimeDuration = 'PT'
+    if (timeUnit.value === TimeUnitType.MINUTE) {
+      strTimeDuration += configForm.value.timeDuration + 'M'
+    }
+    if (timeUnit.value === TimeUnitType.HOUR) {
+      strTimeDuration += configForm.value.timeDuration + 'H'
+    }
+    if (timeUnit.value === TimeUnitType.DAY) {
+      strTimeDuration += configForm.value.timeDuration + 'D'
+    }
+    return strTimeDuration
+  })
+
+  // 超时最大提醒次数
+  const cTimeoutMaxRemindCount = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined
+    }
+    if (configForm.value.timeoutHandlerType !== TimeoutHandlerType.REMINDER) {
+      return undefined
+    }
+    return configForm.value.maxRemindCount
+  })
+
+  return {
+    timeoutHandlerChange,
+    cTimeoutType,
+    timeoutHandlerTypeChanged,
+    timeUnit,
+    timeUnitChange,
+    isoTimeDuration,
+    cTimeoutMaxRemindCount
+  }
+}
+
+/** 批量更新权限 */
+const updatePermission = (type: string) => {
+  fieldsPermissionConfig.value.forEach((field) => {
+    field.permission =
+      type === 'READ'
+        ? FieldPermissionType.READ
+        : type === 'WRITE'
+          ? FieldPermissionType.WRITE
+          : FieldPermissionType.NONE
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.button-setting-pane {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+
+  .button-setting-desc {
+    padding-right: 8px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .button-setting-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 45px;
+    padding-left: 12px;
+    background-color: #f8fafc0a;
+    border: 1px solid #1f38581a;
+
+    & > :first-child {
+      width: 100px !important;
+      text-align: left !important;
+    }
+
+    & > :last-child {
+      text-align: center !important;
+    }
+
+    .button-title-label {
+      width: 150px;
+      font-size: 13px;
+      font-weight: 700;
+      color: #000;
+      text-align: left;
+    }
+  }
+
+  .button-setting-item {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    height: 38px;
+    padding-left: 12px;
+    border: 1px solid #1f38581a;
+    border-top: 0;
+
+    & > :first-child {
+      width: 100px !important;
+    }
+
+    & > :last-child {
+      text-align: center !important;
+    }
+
+    .button-setting-item-label {
+      width: 150px;
+      overflow: hidden;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .editable-title-input {
+      height: 24px;
+      max-width: 130px;
+      margin-left: 4px;
+      line-height: 24px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      transition: all 0.3s;
+
+      &:focus {
+        border-color: #40a9ff;
+        outline: 0;
+        box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+      }
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/Condition.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/Condition.vue
new file mode 100644
index 0000000..7ef092d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/Condition.vue
@@ -0,0 +1,277 @@
+<template>
+  <el-form ref="formRef" :model="condition" :rules="formRules" label-position="top">
+    <el-form-item label="配置方式" prop="conditionType">
+      <el-radio-group v-model="condition.conditionType" @change="changeConditionType">
+        <el-radio
+          v-for="(dict, indexConditionType) in conditionConfigTypes"
+          :key="indexConditionType"
+          :value="dict.value"
+          :label="dict.value"
+        >
+          {{ dict.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      v-if="condition.conditionType === ConditionType.RULE && condition.conditionGroups"
+      label="条件规则"
+    >
+      <div class="condition-group-tool">
+        <div class="flex items-center">
+          <div class="mr-4">条件组关系</div>
+          <el-switch
+            v-model="condition.conditionGroups.and"
+            inline-prompt
+            active-text="且"
+            inactive-text="或"
+          />
+        </div>
+      </div>
+      <el-space direction="vertical" :spacer="condition.conditionGroups.and ? '且' : '或'">
+        <el-card
+          class="condition-group"
+          style="width: 530px"
+          v-for="(equation, cIdx) in condition.conditionGroups.conditions"
+          :key="cIdx"
+        >
+          <div
+            class="condition-group-delete"
+            v-if="condition.conditionGroups.conditions.length > 1"
+          >
+            <Icon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              :size="18"
+              @click="deleteConditionGroup(condition.conditionGroups.conditions, cIdx)"
+            />
+          </div>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <div>条件组</div>
+              <div class="flex">
+                <div class="mr-4">规则关系</div>
+                <el-switch
+                  v-model="equation.and"
+                  inline-prompt
+                  active-text="且"
+                  inactive-text="或"
+                />
+              </div>
+            </div>
+          </template>
+
+          <div class="flex pt-2" v-for="(rule, rIdx) in equation.rules" :key="rIdx">
+            <div class="mr-2">
+              <el-form-item
+                :prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.leftSide`"
+                :rules="{
+                  required: true,
+                  message: '左值不能为空',
+                  trigger: 'change'
+                }"
+              >
+                <el-select style="width: 160px" v-model="rule.leftSide" clearable>
+                  <el-option
+                    v-for="(field, fIdx) in fieldOptions"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                    :disabled="!field.required"
+                  >
+                    <el-tooltip
+                      content="表单字段非必填时不能作为流程分支条件"
+                      effect="dark"
+                      placement="right-start"
+                      v-if="!field.required"
+                    >
+                      <span>{{ field.title }}</span>
+                    </el-tooltip>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="mr-2">
+              <el-select v-model="rule.opCode" style="width: 100px">
+                <el-option
+                  v-for="operator in COMPARISON_OPERATORS"
+                  :key="operator.value"
+                  :label="operator.label"
+                  :value="operator.value"
+                />
+              </el-select>
+            </div>
+            <div class="mr-2">
+              <el-form-item
+                :prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.rightSide`"
+                :rules="{
+                  required: true,
+                  message: '右值不能为空',
+                  trigger: 'blur'
+                }"
+              >
+                <el-input v-model="rule.rightSide" style="width: 160px" />
+              </el-form-item>
+            </div>
+            <div class="mr-1 flex items-center" v-if="equation.rules.length > 1">
+              <Icon icon="ep:delete" :size="18" @click="deleteConditionRule(equation, rIdx)" />
+            </div>
+            <div class="flex items-center">
+              <Icon icon="ep:plus" :size="18" @click="addConditionRule(equation, rIdx)" />
+            </div>
+          </div>
+        </el-card>
+      </el-space>
+      <div title="添加条件组" class="mt-4 cursor-pointer">
+        <Icon
+          color="#0089ff"
+          icon="ep:plus"
+          :size="24"
+          @click="addConditionGroup(condition.conditionGroups?.conditions)"
+        />
+      </div>
+    </el-form-item>
+    <el-form-item
+      v-if="condition.conditionType === ConditionType.EXPRESSION"
+      label="条件表达式"
+      prop="conditionExpression"
+    >
+      <el-input
+        type="textarea"
+        v-model="condition.conditionExpression"
+        clearable
+        style="width: 100%"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import {
+  COMPARISON_OPERATORS,
+  CONDITION_CONFIG_TYPES,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE
+} from '../../consts'
+import { BpmModelFormType } from '@/utils/constants'
+import { useFormFieldsAndStartUser } from '../../node'
+import { cloneDeep } from 'lodash-es'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+const condition = computed({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue)
+  }
+})
+const formType = inject<Ref<number>>('formType') // 表单类型
+const conditionConfigTypes = computed(() => {
+  return CONDITION_CONFIG_TYPES.filter((item) => {
+    // 业务表单暂时去掉条件规则选项
+    if (formType?.value === BpmModelFormType.CUSTOM && item.value === ConditionType.RULE) {
+      return false
+    } else {
+      return true
+    }
+  })
+})
+
+/** 条件规则可选择的表单字段 */
+const fieldOptions = useFormFieldsAndStartUser()
+
+// 表单校验规则
+const formRules = reactive({
+  conditionType: [{ required: true, message: '配置方式不能为空', trigger: 'blur' }],
+  conditionExpression: [{ required: true, message: '条件表达式不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 切换条件配置方式 */
+const changeConditionType = () => {
+  if (condition.value.conditionType === ConditionType.RULE) {
+    if (!condition.value.conditionGroups) {
+      condition.value.conditionGroups = cloneDeep(DEFAULT_CONDITION_GROUP_VALUE)
+    }
+  }
+}
+const deleteConditionGroup = (conditions, index) => {
+  conditions.splice(index, 1)
+}
+
+const deleteConditionRule = (condition, index) => {
+  condition.rules.splice(index, 1)
+}
+
+const addConditionRule = (condition, index) => {
+  const rule = {
+    opCode: '==',
+    leftSide: '',
+    rightSide: ''
+  }
+  condition.rules.splice(index + 1, 0, rule)
+}
+
+const addConditionGroup = (conditions) => {
+  const condition = {
+    and: true,
+    rules: [
+      {
+        opCode: '==',
+        leftSide: '',
+        rightSide: ''
+      }
+    ]
+  }
+  conditions.push(condition)
+}
+
+const validate = async () => {
+  if (!formRef) return false
+  return await formRef.value.validate()
+}
+
+defineExpose({ validate })
+</script>
+
+<style lang="scss" scoped>
+.condition-group-tool {
+  display: flex;
+  justify-content: space-between;
+  width: 500px;
+  margin-bottom: 20px;
+}
+
+.condition-group {
+  position: relative;
+
+  &:hover {
+    border-color: #0089ff;
+
+    .condition-group-delete {
+      opacity: 1;
+    }
+  }
+
+  .condition-group-delete {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+
+::v-deep(.el-card__header) {
+  padding: 8px var(--el-card-padding);
+  border-bottom: 1px solid var(--el-card-border-color);
+  box-sizing: border-box;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue
new file mode 100644
index 0000000..79816c6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue
@@ -0,0 +1,309 @@
+<!-- TODO @jason：有可能，它里面套 Condition 么？  -->
+<!-- TODO 怕影响其它节点功能，后面看看如何如何复用 Condtion -->
+<template>
+  <Dialog v-model="dialogVisible" title="条件配置" width="600px" :fullscreen="false">
+    <div class="h-410px">
+      <el-scrollbar wrap-class="h-full">
+        <el-form ref="formRef" :model="condition" :rules="formRules" label-position="top">
+          <el-form-item label="配置方式" prop="conditionType">
+            <el-radio-group v-model="condition.conditionType" @change="changeConditionType">
+              <el-radio
+                v-for="(dict, indexConditionType) in conditionConfigTypes"
+                :key="indexConditionType"
+                :value="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            v-if="condition.conditionType === ConditionType.RULE && condition.conditionGroups"
+            label="条件规则"
+          >
+            <div class="condition-group-tool">
+              <div class="flex items-center">
+                <div class="mr-4">条件组关系</div>
+                <el-switch
+                  v-model="condition.conditionGroups.and"
+                  inline-prompt
+                  active-text="且"
+                  inactive-text="或"
+                />
+              </div>
+            </div>
+            <el-space direction="vertical" :spacer="condition.conditionGroups.and ? '且' : '或'">
+              <el-card
+                class="condition-group"
+                style="width: 530px"
+                v-for="(equation, cIdx) in condition.conditionGroups.conditions"
+                :key="cIdx"
+              >
+                <div
+                  class="condition-group-delete"
+                  v-if="condition.conditionGroups.conditions.length > 1"
+                >
+                  <Icon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteConditionGroup(condition.conditionGroups.conditions, cIdx)"
+                  />
+                </div>
+                <template #header>
+                  <div class="flex items-center justify-between">
+                    <div>条件组</div>
+                    <div class="flex">
+                      <div class="mr-4">规则关系</div>
+                      <el-switch
+                        v-model="equation.and"
+                        inline-prompt
+                        active-text="且"
+                        inactive-text="或"
+                      />
+                    </div>
+                  </div>
+                </template>
+
+                <div class="flex pt-2" v-for="(rule, rIdx) in equation.rules" :key="rIdx">
+                  <div class="mr-2">
+                    <el-form-item
+                      :prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.leftSide`"
+                      :rules="{
+                        required: true,
+                        message: '左值不能为空',
+                        trigger: 'change'
+                      }"
+                    >
+                      <el-select style="width: 160px" v-model="rule.leftSide">
+                        <el-option
+                          v-for="(field, fIdx) in fieldOptions"
+                          :key="fIdx"
+                          :label="field.title"
+                          :value="field.field"
+                          :disabled="!field.required"
+                        />
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                  <div class="mr-2">
+                    <el-select v-model="rule.opCode" style="width: 100px">
+                      <el-option
+                        v-for="operator in COMPARISON_OPERATORS"
+                        :key="operator.value"
+                        :label="operator.label"
+                        :value="operator.value"
+                      />
+                    </el-select>
+                  </div>
+                  <div class="mr-2">
+                    <el-form-item
+                      :prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.rightSide`"
+                      :rules="{
+                        required: true,
+                        message: '右值不能为空',
+                        trigger: 'blur'
+                      }"
+                    >
+                      <el-input v-model="rule.rightSide" style="width: 160px" />
+                    </el-form-item>
+                  </div>
+                  <div
+                    class="cursor-pointer mr-1 flex items-center"
+                    v-if="equation.rules.length > 1"
+                  >
+                    <Icon
+                      icon="ep:delete"
+                      :size="18"
+                      @click="deleteConditionRule(equation, rIdx)"
+                    />
+                  </div>
+                  <div class="cursor-pointer flex items-center">
+                    <Icon icon="ep:plus" :size="18" @click="addConditionRule(equation, rIdx)" />
+                  </div>
+                </div>
+              </el-card>
+            </el-space>
+            <div title="添加条件组" class="mt-4 cursor-pointer">
+              <Icon
+                color="#0089ff"
+                icon="ep:plus"
+                :size="24"
+                @click="addConditionGroup(condition.conditionGroups?.conditions)"
+              />
+            </div>
+          </el-form-item>
+          <el-form-item
+            v-if="condition.conditionType === ConditionType.EXPRESSION"
+            label="条件表达式"
+            prop="conditionExpression"
+          >
+            <el-input
+              type="textarea"
+              v-model="condition.conditionExpression"
+              clearable
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+    </div>
+    <template #footer>
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import {
+  COMPARISON_OPERATORS,
+  CONDITION_CONFIG_TYPES,
+  ConditionType,
+  ConditionGroup,
+  DEFAULT_CONDITION_GROUP_VALUE
+} from '../../consts'
+import { BpmModelFormType } from '@/utils/constants'
+import { useFormFieldsAndStartUser } from '../../node'
+import { cloneDeep } from 'lodash-es'
+defineOptions({
+  name: 'ConditionDialog'
+})
+
+const condition = ref<{
+  conditionType: ConditionType
+  conditionExpression?: string
+  conditionGroups?: ConditionGroup
+}>({
+  conditionType: ConditionType.RULE,
+  conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE)
+})
+
+const emit = defineEmits<{
+  updateCondition: [condition: object]
+}>()
+const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+
+const formType = inject<Ref<number>>('formType') // 表单类型
+const conditionConfigTypes = computed(() => {
+  return CONDITION_CONFIG_TYPES.filter((item) => {
+    // 业务表单暂时去掉条件规则选项
+    if (formType?.value === BpmModelFormType.CUSTOM && item.value === ConditionType.RULE) {
+      return false
+    } else {
+      return true
+    }
+  })
+})
+
+/** 条件规则可选择的表单字段 */
+const fieldOptions = useFormFieldsAndStartUser()
+
+// 表单校验规则
+const formRules = reactive({
+  conditionType: [{ required: true, message: '配置方式不能为空', trigger: 'blur' }],
+  conditionExpression: [{ required: true, message: '条件表达式不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 切换条件配置方式 */
+const changeConditionType = () => {
+  if (condition.value.conditionType === ConditionType.RULE) {
+    if (!condition.value.conditionGroups) {
+      condition.value.conditionGroups = cloneDeep(DEFAULT_CONDITION_GROUP_VALUE)
+    }
+  }
+}
+const deleteConditionGroup = (conditions, index) => {
+  conditions.splice(index, 1)
+}
+
+const deleteConditionRule = (condition, index) => {
+  condition.rules.splice(index, 1)
+}
+
+const addConditionRule = (condition, index) => {
+  const rule = {
+    opCode: '==',
+    leftSide: '',
+    rightSide: ''
+  }
+  condition.rules.splice(index + 1, 0, rule)
+}
+
+const addConditionGroup = (conditions) => {
+  const condition = {
+    and: true,
+    rules: [
+      {
+        opCode: '==',
+        leftSide: '',
+        rightSide: ''
+      }
+    ]
+  }
+  conditions.push(condition)
+}
+
+/** 保存条件设置 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) {
+    message.warning('请完善条件规则')
+    return
+  }
+  dialogVisible.value = false
+  // 设置完的条件传递给父组件
+  emit('updateCondition', condition.value)
+}
+
+const open = (conditionObj: any | undefined) => {
+  if (conditionObj) {
+    condition.value.conditionType = conditionObj.conditionType
+    condition.value.conditionExpression = conditionObj.conditionExpression
+    condition.value.conditionGroups = conditionObj.conditionGroups
+  }
+  dialogVisible.value = true
+}
+
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped>
+.condition-group-tool {
+  display: flex;
+  justify-content: space-between;
+  width: 500px;
+  margin-bottom: 20px;
+}
+
+.condition-group {
+  position: relative;
+
+  &:hover {
+    border-color: #0089ff;
+
+    .condition-group-delete {
+      opacity: 1;
+    }
+  }
+
+  .condition-group-delete {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+
+::v-deep(.el-card__header) {
+  padding: 8px var(--el-card-padding);
+  border-bottom: 1px solid var(--el-card-border-color);
+  box-sizing: border-box;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestParamSetting.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestParamSetting.vue
new file mode 100644
index 0000000..9a0a9fe
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestParamSetting.vue
@@ -0,0 +1,188 @@
+<template>
+  <el-form-item label-position="top" label="请求头">
+    <div class="flex pt-2" v-for="(item, index) in props.header" :key="index">
+      <div class="mr-2">
+        <el-form-item
+          :prop="`${bind}.header.${index}.key`"
+          :rules="{
+            required: true,
+            message: '参数名不能为空',
+            trigger: 'blur'
+          }"
+        >
+          <el-input class="w-160px" v-model="item.key" />
+        </el-form-item>
+      </div>
+      <div class="mr-2">
+        <el-select class="w-100px!" v-model="item.type">
+          <el-option
+            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+            :key="types.value"
+            :label="types.label"
+            :value="types.value"
+          />
+        </el-select>
+      </div>
+      <div class="mr-2">
+        <el-form-item
+          :prop="`${bind}.header.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'blur'
+          }"
+        >
+          <el-input
+            v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
+            class="w-160px"
+            v-model="item.value"
+          />
+        </el-form-item>
+        <el-form-item
+          :prop="`${bind}.header.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'change'
+          }"
+        >
+          <el-select
+            v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
+            class="w-160px!"
+            v-model="item.value"
+          >
+            <el-option
+              v-for="(field, fIdx) in formFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+              :disabled="!field.required"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="mr-1 flex items-center">
+        <Icon icon="ep:delete" :size="18" @click="deleteHttpRequestParam(props.header, index)" />
+      </div>
+    </div>
+    <el-button type="primary" text @click="addHttpRequestParam(props.header)">
+      <Icon icon="ep:plus" class="mr-5px" />添加一行
+    </el-button>
+  </el-form-item>
+  <el-form-item label-position="top" label="请求体">
+    <div class="flex pt-2" v-for="(item, index) in props.body" :key="index">
+      <div class="mr-2">
+        <el-form-item
+          :prop="`${bind}.body.${index}.key`"
+          :rules="{
+            required: true,
+            message: '参数名不能为空',
+            trigger: 'blur'
+          }"
+        >
+          <el-input class="w-160px" v-model="item.key" />
+        </el-form-item>
+      </div>
+      <div class="mr-2">
+        <el-select class="w-100px!" v-model="item.type">
+          <el-option
+            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+            :key="types.value"
+            :label="types.label"
+            :value="types.value"
+          />
+        </el-select>
+      </div>
+      <div class="mr-2">
+        <el-form-item
+          :prop="`${bind}.body.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'blur'
+          }"
+        >
+          <el-input
+            v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
+            class="w-160px"
+            v-model="item.value"
+          />
+        </el-form-item>
+        <el-form-item
+          :prop="`${bind}.body.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'change'
+          }"
+        >
+          <el-select
+            v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
+            class="w-160px!"
+            v-model="item.value"
+          >
+            <el-option
+              v-for="(field, fIdx) in formFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+              :disabled="!field.required"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="mr-1 flex items-center">
+        <Icon icon="ep:delete" :size="18" @click="deleteHttpRequestParam(props.body, index)" />
+      </div>
+    </div>
+    <el-button type="primary" text @click="addHttpRequestParam(props.body)">
+      <Icon icon="ep:plus" class="mr-5px" />添加一行
+    </el-button>
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import {
+  HttpRequestParam,
+  BPM_HTTP_REQUEST_PARAM_TYPES,
+  BpmHttpRequestParamTypeEnum
+} from '../../consts'
+import { useFormFieldsAndStartUser } from '../../node'
+defineOptions({
+  name: 'HttpRequestParamSetting'
+})
+
+const props = defineProps({
+  header: {
+    type: Array as () => HttpRequestParam[],
+    required: false,
+    default: () => []
+  },
+  body: {
+    type: Array as () => HttpRequestParam[],
+    required: false,
+    default: () => []
+  },
+  bind: {
+    type: String,
+    required: true
+  }
+})
+
+// 流程表单字段，发起人字段
+const formFieldOptions = useFormFieldsAndStartUser()
+/** 添加请求配置项 */
+const addHttpRequestParam = (arr: HttpRequestParam[]) => {
+  arr.push({
+    key: '',
+    type: BpmHttpRequestParamTypeEnum.FIXED_VALUE,
+    value: ''
+  })
+}
+
+/** 删除请求配置项 */
+const deleteHttpRequestParam = (arr: HttpRequestParam[], index: number) => {
+  arr.splice(index, 1)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue
new file mode 100644
index 0000000..13efe39
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue
@@ -0,0 +1,127 @@
+<template>
+  <el-form-item>
+    <el-alert
+      title="仅支持 POST 请求，以请求体方式接收参数"
+      type="warning"
+      show-icon
+      :closable="false"
+    />
+  </el-form-item>
+  <!-- 请求地址-->
+  <el-form-item
+    label-position="top"
+    label="请求地址"
+    :prop="`${formItemPrefix}.url`"
+    :rules="{
+      required: true,
+      message: '请求地址不能为空',
+      trigger: 'blur'
+    }"
+  >
+    <el-input v-model="setting.url" />
+  </el-form-item>
+  <!-- 请求头，请求体设置-->
+  <HttpRequestParamSetting :header="setting.header" :body="setting.body" :bind="formItemPrefix" />
+  <!-- 返回值设置-->
+  <div v-if="responseEnable">
+    <el-form-item label="返回值" label-position="top">
+      <el-alert
+        title="通过请求返回值, 可以修改流程表单的值"
+        type="warning"
+        show-icon
+        :closable="false"
+      />
+    </el-form-item>
+    <el-form-item>
+      <div class="flex pt-2" v-for="(item, index) in setting.response" :key="index">
+        <div class="mr-2">
+          <el-form-item
+            :prop="`${formItemPrefix}.response.${index}.key`"
+            :rules="{
+              required: true,
+              message: '表单字段不能为空',
+              trigger: 'blur'
+            }"
+          >
+            <el-select class="w-160px!" v-model="item.key" placeholder="请选择表单字段">
+              <el-option
+                v-for="(field, fIdx) in formFields"
+                :key="fIdx"
+                :label="field.title"
+                :value="field.field"
+                :disabled="!field.required"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+        <div class="mr-2">
+          <el-form-item
+            :prop="`${formItemPrefix}.response.${index}.value`"
+            :rules="{
+              required: true,
+              message: '请求返回字段不能为空',
+              trigger: 'blur'
+            }"
+          >
+            <el-input class="w-160px" v-model="item.value" placeholder="请求返回字段" />
+          </el-form-item>
+        </div>
+        <div class="mr-1 pt-1 cursor-pointer">
+          <Icon
+            icon="ep:delete"
+            :size="18"
+            @click="deleteHttpResponseSetting(setting.response!, index)"
+          />
+        </div>
+      </div>
+      <el-button type="primary" text @click="addHttpResponseSetting(setting.response!)">
+        <Icon icon="ep:plus" class="mr-5px" />添加一行
+      </el-button>
+    </el-form-item>
+  </div>
+</template>
+<script setup lang="ts">
+import HttpRequestParamSetting from './HttpRequestParamSetting.vue'
+import { useFormFields } from '../../node'
+
+const props = defineProps({
+  setting: {
+    type: Object,
+    required: true
+  },
+  responseEnable: {
+    type: Boolean,
+    required: true
+  },
+  formItemPrefix: {
+    type: String,
+    required: true
+  }
+})
+const { setting } = toRefs(props)
+const emits = defineEmits(['update:setting'])
+watch(
+  () => setting,
+  (val) => {
+    emits('update:setting', val)
+  }
+)
+
+/** 流程表单字段 */
+const formFields = useFormFields()
+
+/** 添加 HTTP 请求返回值设置项 */
+const addHttpResponseSetting = (responseSetting: Record<string, string>[]) => {
+  responseSetting.push({
+    key: '',
+    value: ''
+  })
+}
+
+/** 删除 HTTP 请求返回值设置项 */
+const deleteHttpResponseSetting = (responseSetting: Record<string, string>[], index: number) => {
+  responseSetting.splice(index, 1)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/UserTaskListener.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/UserTaskListener.vue
new file mode 100644
index 0000000..728f568
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes-config/components/UserTaskListener.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-form ref="listenerFormRef" :model="configForm" label-position="top">
+    <div v-for="(listener, listenerIdx) in taskListener" :key="listenerIdx">
+      <el-divider content-position="left">
+        <el-text tag="b" size="large">{{ listener.name }}</el-text>
+      </el-divider>
+      <el-form-item>
+        <el-switch
+          v-model="configForm[`task${listener.type}ListenerEnable`]"
+          active-text="开启"
+          inactive-text="关闭"
+        />
+      </el-form-item>
+      <div v-if="configForm[`task${listener.type}ListenerEnable`]">
+        <el-form-item>
+          <el-alert
+            title="仅支持 POST 请求，以请求体方式接收参数"
+            type="warning"
+            show-icon
+            :closable="false"
+          />
+        </el-form-item>
+        <el-form-item
+          label="请求地址"
+          :prop="`task${listener.type}ListenerPath`"
+          :rules="{
+            required: true,
+            message: '请求地址不能为空',
+            trigger: 'blur'
+          }"
+        >
+          <el-input v-model="configForm[`task${listener.type}ListenerPath`]" />
+        </el-form-item>
+        <HttpRequestParamSetting
+          :header="configForm[`task${listener.type}Listener`].header"
+          :body="configForm[`task${listener.type}Listener`].body"
+          :bind="`task${listener.type}Listener`"
+        />
+      </div>
+    </div>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import HttpRequestParamSetting from './HttpRequestParamSetting.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  formFieldOptions: {
+    type: Object,
+    required: true
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+const listenerFormRef = ref()
+const configForm = computed({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue)
+  }
+})
+const taskListener = ref([
+  {
+    name: '创建任务',
+    type: 'Create'
+  },
+  {
+    name: '指派任务执行人员',
+    type: 'Assign'
+  },
+  {
+    name: '完成任务',
+    type: 'Complete'
+  }
+])
+
+const validate = async () => {
+  if (!listenerFormRef) return false
+  return await listenerFormRef.value.validate()
+}
+
+defineExpose({ validate })
+</script>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/ChildProcessNode.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/ChildProcessNode.vue
new file mode 100644
index 0000000..0b36244
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/ChildProcessNode.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
+      >
+        <div class="node-title-container">
+          <div
+            :class="`node-title-icon ${currentNode.childProcessSetting?.async === true ? 'async-child-process' : 'child-process'}`"
+          >
+            <span
+              :class="`iconfont ${currentNode.childProcessSetting?.async === true ? 'icon-async-child-process' : 'icon-child-process'}`"
+            >
+            </span>
+          </div>
+          <input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.CHILD_PROCESS_NODE) }}
+          </div>
+          <Icon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon"
+            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          /></div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <ChildProcessNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import NodeHandler from '../NodeHandler.vue'
+import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
+import ChildProcessNodeConfig from '../nodes-config/ChildProcessNodeConfig.vue'
+
+defineOptions({
+  name: 'ChildProcessNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+}>()
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.CHILD_PROCESS_NODE)
+const nodeSetting = ref()
+
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
+  nodeSetting.value.showChildProcessNodeConfig(currentNode.value)
+  nodeSetting.value.openDrawer()
+}
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode)
+}
+</script>
+
+<style scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
new file mode 100644
index 0000000..8b97ee5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
+          <input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.COPY_TASK_NODE) }}
+          </div>
+          <Icon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon"
+            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          /></div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <CopyTaskNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import NodeHandler from '../NodeHandler.vue'
+import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
+import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue'
+defineOptions({
+  name: 'CopyTaskNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+}>()
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.COPY_TASK_NODE)
+
+const nodeSetting = ref()
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
+  nodeSetting.value.showCopyTaskNodeConfig(currentNode.value)
+  nodeSetting.value.openDrawer()
+}
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/DelayTimerNode.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/DelayTimerNode.vue
new file mode 100644
index 0000000..ad6795a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/DelayTimerNode.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon delay-node"><span class="iconfont icon-delay"></span></div>
+          <input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.DELAY_TIMER_NODE) }}
+          </div>
+          <Icon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon"
+            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          /></div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <DelayTimerNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import NodeHandler from '../NodeHandler.vue'
+import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
+import DelayTimerNodeConfig from '../nodes-config/DelayTimerNodeConfig.vue'
+defineOptions({
+  name: 'DelayTimerNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+}>()
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.DELAY_TIMER_NODE)
+
+const nodeSetting = ref()
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
+  nodeSetting.value.showDelayTimerNodeConfig(currentNode.value)
+  nodeSetting.value.openDrawer()
+}
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
new file mode 100644
index 0000000..0af0310
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="end-node-wrapper">
+    <div class="end-node-box cursor-pointer" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" @click="nodeClick">
+      <span class="node-fixed-name" title="结束">结束</span>
+    </div>
+  </div>
+  <el-dialog title="审批信息" v-model="dialogVisible" width="1000px" append-to-body>
+      <el-row>
+        <el-table
+          :data="processInstanceInfos"
+          size="small"
+          border
+          header-cell-class-name="table-header-gray"
+        >
+          <el-table-column
+            label="序号"
+            header-align="center"
+            align="center"
+            type="index"
+            width="50"
+          />
+          <el-table-column
+            label="发起人"
+            prop="assigneeUser.nickname"
+            min-width="100"
+            align="center"
+          />
+          <el-table-column label="部门" min-width="100" align="center">
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="开始时间"
+            prop="createTime"
+            min-width="140"
+          />
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="结束时间"
+            prop="endTime"
+            min-width="140"
+          />
+          <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+         
+          <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+            <template #default="scope">
+              {{ formatPast2(scope.row.durationInMillis) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode } from '../consts'
+import { useWatchNode, useTaskStatusClass } from '../node'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+defineOptions({
+  name: 'EndEventNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null
+  }
+})
+// 监控节点变化
+const currentNode = useWatchNode(props)
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+const processInstance = inject<Ref<any>>('processInstance', ref({}))
+// 审批信息的弹窗显示，用于只读模式
+const dialogVisible = ref(false) // 弹窗可见性
+const processInstanceInfos = ref<any[]>([]) // 流程的审批信息
+
+const nodeClick = () => {
+  if (readonly) { 
+    if(processInstance && processInstance.value){
+      processInstanceInfos.value = [
+      {
+        assigneeUser: processInstance.value.startUser,
+        createTime: processInstance.value.startTime,
+        endTime: processInstance.value.endTime,
+        status: processInstance.value.status,
+        durationInMillis: processInstance.value.durationInMillis
+      }
+    ]
+      dialogVisible.value = true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
new file mode 100644
index 0000000..09b32ed
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-exclusive icon-size condition"></span>
+      </div>
+      <el-button v-else class="branch-node-add" color="#67c23a" @click="addCondition" plain
+        >添加条件</el-button
+      >
+
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index == 0">
+          <div class="branch-line-first-top"> </div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 == currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`
+              ]"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="!readonly && showInputs[index]">
+                  <input
+                    type="text"
+                    class="input-max-width editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-mountedFocus
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div>
+                <div class="branch-priority"> 优先级{{ index + 1 }} </div>
+              </div>
+              <div class="branch-node-content" @click="conditionNodeConfig(item.id)">
+                <div class="branch-node-text" :title="item.showText" v-if="item.showText">
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="!readonly && index + 1 !== currentNode.conditionNodes?.length"
+              >
+                <div class="toolbar-icon">
+                  <Icon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+              <div
+                class="branch-node-move move-node-left"
+                v-if="index != 0 && index + 1 !== currentNode.conditionNodes?.length"
+                @click="moveNode(index, -1)"
+              >
+                <Icon icon="ep:arrow-left" />
+              </div>
+
+              <div
+                class="branch-node-move move-node-right"
+                v-if="currentNode.conditionNodes && index < currentNode.conditionNodes.length - 2"
+                @click="moveNode(index, 1)"
+              >
+                <Icon icon="ep:arrow-right" />
+              </div>
+            </div>
+            <NodeHandler v-model:child-node="item.childNode" :current-node="item" />
+          </div>
+        </div>
+        <ConditionNodeConfig :node-index="index" :condition-node="item" :ref="item.id" />
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @find:recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import NodeHandler from '../NodeHandler.vue'
+import ProcessNodeTree from '../ProcessNodeTree.vue'
+import {
+  SimpleFlowNode,
+  NodeType,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT
+} from '../consts'
+import { getDefaultConditionNodeName } from '../utils'
+import { useTaskStatusClass } from '../node'
+import { generateUUID } from '@/utils'
+import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue'
+import { cloneDeep } from 'lodash-es'
+const { proxy } = getCurrentInstance() as any
+defineOptions({
+  name: 'ExclusiveNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: number]
+  'find:recursiveFindParentNode': [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number
+  ]
+}>()
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
+
+const showInputs = ref<boolean[]>([])
+// 失去焦点
+const blurEvent = (index: number) => {
+  showInputs.value[index] = false
+  const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultConditionNodeName(index, conditionNode.conditionSetting?.defaultFlow)
+}
+
+// 点击条件名称
+const clickEvent = (index: number) => {
+  showInputs.value[index] = true
+}
+
+const conditionNodeConfig = (nodeId: string) => {
+  if (readonly) {
+    return
+  }
+  const conditionNode = proxy.$refs[nodeId][0]
+  conditionNode.open()
+}
+
+// 新增条件
+const addCondition = () => {
+  const conditionNodes = currentNode.value.conditionNodes
+  if (conditionNodes) {
+    const len = conditionNodes.length
+    let lastIndex = len - 1
+    const conditionData: SimpleFlowNode = {
+      id: 'Flow_' + generateUUID(),
+      name: '条件' + len,
+      showText: '',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE)
+      }
+    }
+    conditionNodes.splice(lastIndex, 0, conditionData)
+  }
+}
+
+// 删除条件
+const deleteCondition = (index: number) => {
+  const conditionNodes = currentNode.value.conditionNodes
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1)
+    if (conditionNodes.length == 1) {
+      const childNode = currentNode.value.childNode
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode)
+    }
+  }
+}
+
+// 移动节点
+const moveNode = (index: number, to: number) => {
+  // -1 ：向左  1： 向右
+  if (currentNode.value.conditionNodes) {
+    currentNode.value.conditionNodes[index] = currentNode.value.conditionNodes.splice(
+      index + to,
+      1,
+      currentNode.value.conditionNodes[index]
+    )[0]
+  }
+}
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number
+) => {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node)
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.EXCLUSIVE_NODE) 继续查找
+  emits('find:parentNode', nodeList, nodeType)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
new file mode 100644
index 0000000..51c44d4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-inclusive icon-size inclusive"></span>
+      </div>
+      <el-button v-else class="branch-node-add" color="#345da2" @click="addCondition" plain
+        >添加条件</el-button
+      >
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index == 0">
+          <div class="branch-line-first-top"> </div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 == currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`
+              ]"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="!readonly && showInputs[index]">
+                  <input
+                    type="text"
+                    class="editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-mountedFocus
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div>
+              </div>
+              <div class="branch-node-content" @click="conditionNodeConfig(item.id)">
+                <div class="branch-node-text" :title="item.showText" v-if="item.showText">
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="!readonly && index + 1 !== currentNode.conditionNodes?.length"
+              >
+                <div class="toolbar-icon">
+                  <Icon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+              <div
+                class="branch-node-move move-node-left"
+                v-if="!readonly && index != 0 && index + 1 !== currentNode.conditionNodes?.length"
+                @click="moveNode(index, -1)"
+              >
+                <Icon icon="ep:arrow-left" />
+              </div>
+
+              <div
+                class="branch-node-move move-node-right"
+                v-if="
+                  !readonly &&
+                  currentNode.conditionNodes &&
+                  index < currentNode.conditionNodes.length - 2
+                "
+                @click="moveNode(index, 1)"
+              >
+                <Icon icon="ep:arrow-right" />
+              </div>
+            </div>
+            <NodeHandler v-model:child-node="item.childNode" :current-node="item" />
+          </div>
+        </div>
+        <ConditionNodeConfig :node-index="index" :condition-node="item" :ref="item.id" />
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @find:recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import NodeHandler from '../NodeHandler.vue'
+import ProcessNodeTree from '../ProcessNodeTree.vue'
+import {
+  SimpleFlowNode,
+  NodeType,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT
+} from '../consts'
+import { useTaskStatusClass } from '../node'
+import { getDefaultInclusiveConditionNodeName } from '../utils'
+import { generateUUID } from '@/utils'
+import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue'
+import { cloneDeep } from 'lodash-es'
+const { proxy } = getCurrentInstance() as any
+defineOptions({
+  name: 'InclusiveNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: number]
+  'find:recursiveFindParentNode': [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number
+  ]
+}>()
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
+
+const showInputs = ref<boolean[]>([])
+// 失去焦点
+const blurEvent = (index: number) => {
+  showInputs.value[index] = false
+  const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultInclusiveConditionNodeName(index, conditionNode.conditionSetting?.defaultFlow)
+}
+
+// 点击条件名称
+const clickEvent = (index: number) => {
+  showInputs.value[index] = true
+}
+
+const conditionNodeConfig = (nodeId: string) => {
+  if (readonly) {
+    return
+  }
+  const conditionNode = proxy.$refs[nodeId][0]
+  conditionNode.open()
+}
+
+// 新增条件
+const addCondition = () => {
+  const conditionNodes = currentNode.value.conditionNodes
+  if (conditionNodes) {
+    const len = conditionNodes.length
+    let lastIndex = len - 1
+    const conditionData: SimpleFlowNode = {
+      id: 'Flow_' + generateUUID(),
+      name: '包容条件' + len,
+      showText: '',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE)
+      }
+    }
+    conditionNodes.splice(lastIndex, 0, conditionData)
+  }
+}
+
+// 删除条件
+const deleteCondition = (index: number) => {
+  const conditionNodes = currentNode.value.conditionNodes
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1)
+    if (conditionNodes.length == 1) {
+      const childNode = currentNode.value.childNode
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode)
+    }
+  }
+}
+
+// 移动节点
+const moveNode = (index: number, to: number) => {
+  // -1 ：向左  1： 向右
+  if (currentNode.value.conditionNodes) {
+    currentNode.value.conditionNodes[index] = currentNode.value.conditionNodes.splice(
+      index + to,
+      1,
+      currentNode.value.conditionNodes[index]
+    )[0]
+  }
+}
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number
+) => {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node)
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.INCLUSIVE_BRANCH_NODE) 继续查找
+  emits('find:parentNode', nodeList, nodeType)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
new file mode 100644
index 0000000..7aa6793
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-parallel icon-size parallel"></span>
+      </div>
+      <el-button v-else class="branch-node-add" color="#626aef" @click="addCondition" plain
+        >添加分支</el-button
+      >
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index == 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 == currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div class="node-box" :class="`${useTaskStatusClass(item.activityStatus)}`">
+              <div class="branch-node-title-container">
+                <div v-if="showInputs[index]">
+                  <input
+                    type="text"
+                    class="input-max-width editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-mountedFocus
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div>
+                <div class="branch-priority">无优先级</div>
+              </div>
+              <div class="branch-node-content" @click="conditionNodeConfig(item.id)">
+                <div class="branch-node-text" :title="item.showText" v-if="item.showText">
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div v-if="!readonly" class="node-toolbar">
+                <div class="toolbar-icon">
+                  <Icon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+            </div>
+            <NodeHandler v-model:child-node="item.childNode" :current-node="item" />
+          </div>
+        </div>
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @find:recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import NodeHandler from '../NodeHandler.vue'
+import ProcessNodeTree from '../ProcessNodeTree.vue'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { useTaskStatusClass } from '../node'
+import { generateUUID } from '@/utils'
+const { proxy } = getCurrentInstance() as any
+defineOptions({
+  name: 'ParallelNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: number]
+  'find:recursiveFindParentNode': [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number
+  ]
+}>()
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
+
+const showInputs = ref<boolean[]>([])
+// 失去焦点
+const blurEvent = (index: number) => {
+  showInputs.value[index] = false
+  const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode
+  conditionNode.name = conditionNode.name || `并行${index + 1}`
+}
+
+// 点击条件名称
+const clickEvent = (index: number) => {
+  showInputs.value[index] = true
+}
+
+const conditionNodeConfig = (nodeId: string) => {
+  const conditionNode = proxy.$refs[nodeId][0]
+  conditionNode.open()
+}
+
+// 新增条件
+const addCondition = () => {
+  const conditionNodes = currentNode.value.conditionNodes
+  if (conditionNodes) {
+    const len = conditionNodes.length
+    let lastIndex = len - 1
+    const conditionData: SimpleFlowNode = {
+      id: 'Flow_' + generateUUID(),
+      name: '并行' + len,
+      showText: '无需配置条件同时执行',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: []
+    }
+    conditionNodes.splice(lastIndex, 0, conditionData)
+  }
+}
+
+// 删除条件
+const deleteCondition = (index: number) => {
+  const conditionNodes = currentNode.value.conditionNodes
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1)
+    if (conditionNodes.length == 1) {
+      const childNode = currentNode.value.childNode
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode)
+    }
+  }
+}
+
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number
+) => {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node)
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点并行节点（NodeType.PARALLEL_NODE) 继续查找
+  emits('find:parentNode', nodeList, nodeType)
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/RouterNode.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/RouterNode.vue
new file mode 100644
index 0000000..3997c09
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/RouterNode.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon router-node">
+            <span class="iconfont icon-router"></span>
+          </div>
+          <input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.ROUTER_BRANCH_NODE) }}
+          </div>
+          <Icon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon"
+            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          /></div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <RouterNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
+  </div>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import NodeHandler from '../NodeHandler.vue'
+import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
+import RouterNodeConfig from '../nodes-config/RouterNodeConfig.vue'
+
+defineOptions({
+  name: 'RouterNode'
+})
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+}>()
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.ROUTER_BRANCH_NODE)
+
+const nodeSetting = ref()
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
+  nodeSetting.value.showRouteNodeConfig(currentNode.value)
+  nodeSetting.value.openDrawer()
+}
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
new file mode 100644
index 0000000..4abe38f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon start-user"
+            ><span class="iconfont icon-start-user"></span
+          ></div>
+          <input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="nodeClick">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.START_USER_NODE) }}
+          </div>
+          <Icon icon="ep:arrow-right-bold" v-if="!readonly" />
+        </div>
+      </div>
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+  </div>
+  <StartUserNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
+  <!-- 审批记录 -->
+  <el-dialog
+    :title="dialogTitle || '审批记录'"
+    v-model="dialogVisible"
+    width="1000px"
+    append-to-body
+  >
+    <el-row>
+      <el-table :data="selectTasks" size="small" border header-cell-class-name="table-header-gray">
+        <el-table-column
+          label="序号"
+          header-align="center"
+          align="center"
+          type="index"
+          width="50"
+        />
+        <el-table-column label="审批人" min-width="100" align="center">
+          <template #default="scope">
+            {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="部门" min-width="100" align="center">
+          <template #default="scope">
+            {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="开始时间"
+          prop="createTime"
+          min-width="140"
+        />
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="结束时间"
+          prop="endTime"
+          min-width="140"
+        />
+        <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="审批建议" prop="reason" min-width="120" />
+        <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+          <template #default="scope">
+            {{ formatPast2(scope.row.durationInMillis) }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import NodeHandler from '../NodeHandler.vue'
+import { useWatchNode, useNodeName2, useTaskStatusClass } from '../node'
+import { SimpleFlowNode, NODE_DEFAULT_TEXT, NodeType } from '../consts'
+import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+defineOptions({
+  name: 'StartEventNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null
+  }
+})
+const readonly = inject<Boolean>('readonly') // 是否只读
+const tasks = inject<Ref<any[]>>('tasks', ref([]))
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+}>()
+// 监控节点变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
+
+const nodeSetting = ref()
+//
+const nodeClick = () => {
+  if (readonly) {
+    // 只读模式，弹窗显示任务信息
+    if (tasks && tasks.value) {
+      dialogTitle.value = currentNode.value.name
+      selectTasks.value = tasks.value.filter(
+        (item: any) => item?.taskDefinitionKey === currentNode.value.id
+      )
+      dialogVisible.value = true
+    }
+  } else {
+    // 编辑模式，打开节点配置、把当前节点传递给配置组件
+    nodeSetting.value.showStartUserNodeConfig(currentNode.value)
+    nodeSetting.value.openDrawer()
+  }
+}
+
+// 任务的弹窗显示，用于只读模式
+const dialogVisible = ref(false) // 弹窗可见性
+const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题
+const selectTasks = ref<any[] | undefined>([]) // 选中的任务数组
+</script>
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/TriggerNode.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/TriggerNode.vue
new file mode 100644
index 0000000..00f1c82
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/TriggerNode.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon trigger-node">
+            <span class="iconfont icon-trigger"></span>
+          </div>
+          <input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.TRIGGER_NODE) }}
+          </div>
+          <Icon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon"
+            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          /></div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <TriggerNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
+  </div>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import NodeHandler from '../NodeHandler.vue'
+import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
+import TriggerNodeConfig from '../nodes-config/TriggerNodeConfig.vue'
+
+defineOptions({
+  name: 'TriggerNode'
+})
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+}>()
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.TRIGGER_NODE)
+
+const nodeSetting = ref()
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
+  nodeSetting.value.showTriggerNodeConfig(currentNode.value)
+  nodeSetting.value.openDrawer()
+}
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
new file mode 100644
index 0000000..ae1af6c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
+      >
+        <div class="node-title-container">
+          <div
+            :class="`node-title-icon ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'transactor-task' : 'user-task'}`"
+          >
+            <span
+              :class="`iconfont ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'icon-transactor' : 'icon-approve'}`"
+            >
+            </span>
+          </div>
+          <input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="nodeClick">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(currentNode.type) }}
+          </div>
+          <Icon icon="ep:arrow-right-bold" v-if="!readonly" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon"
+            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          /></div>
+        </div>
+      </div>
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+  </div>
+  <UserTaskNodeConfig
+    v-if="currentNode"
+    ref="nodeSetting"
+    :flow-node="currentNode"
+    @find:return-task-nodes="findReturnTaskNodes"
+  />
+  <!-- 审批记录 -->
+  <el-dialog
+    :title="dialogTitle || '审批记录'"
+    v-model="dialogVisible"
+    width="1000px"
+    append-to-body
+  >
+    <el-row>
+      <el-table :data="selectTasks" size="small" border header-cell-class-name="table-header-gray">
+        <el-table-column
+          label="序号"
+          header-align="center"
+          align="center"
+          type="index"
+          width="50"
+        />
+        <el-table-column label="审批人" min-width="100" align="center">
+          <template #default="scope">
+            {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="部门" min-width="100" align="center">
+          <template #default="scope">
+            {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="开始时间"
+          prop="createTime"
+          min-width="140"
+        />
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="结束时间"
+          prop="endTime"
+          min-width="140"
+        />
+        <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="审批建议" prop="reason" min-width="120" />
+        <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+          <template #default="scope">
+            {{ formatPast2(scope.row.durationInMillis) }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { useWatchNode, useNodeName2, useTaskStatusClass } from '../node'
+import NodeHandler from '../NodeHandler.vue'
+import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+defineOptions({
+  name: 'UserTaskNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: NodeType]
+}>()
+
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+const tasks = inject<Ref<any[]>>('tasks', ref([]))
+// 监控节点变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
+const nodeSetting = ref()
+
+const nodeClick = () => {
+  if (readonly) {
+    if (tasks && tasks.value) {
+      dialogTitle.value = currentNode.value.name
+      // 只读模式，弹窗显示任务信息
+      selectTasks.value = tasks.value.filter(
+        (item: any) => item?.taskDefinitionKey === currentNode.value.id
+      )
+      dialogVisible.value = true
+    }
+  } else {
+    // 编辑模式，打开节点配置、把当前节点传递给配置组件
+    nodeSetting.value.showUserTaskNodeConfig(currentNode.value)
+    nodeSetting.value.openDrawer()
+  }
+}
+
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode)
+}
+// 查找可以驳回用户节点
+const findReturnTaskNodes = (
+  matchNodeList: SimpleFlowNode[] // 匹配的节点
+) => {
+  // 从父节点查找
+  emits('find:parentNode', matchNodeList, NodeType.USER_TASK_NODE)
+}
+
+// 任务的弹窗显示，用于只读模式
+const dialogVisible = ref(false) // 弹窗可见性
+const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题
+const selectTasks = ref<any[] | undefined>([]) // 选中的任务数组
+</script>
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/utils.ts b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/utils.ts
new file mode 100644
index 0000000..8e715b4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/src/utils.ts
@@ -0,0 +1,41 @@
+import { TimeUnitType, ApproveType, APPROVE_TYPE } from './consts'
+
+// 获取条件节点默认的名称
+export const getDefaultConditionNodeName = (index: number, defaultFlow: boolean | undefined): string => {
+  if (defaultFlow) {
+    return '其它情况'
+  }
+  return '条件' + (index + 1)
+}
+
+// 获取包容分支条件节点默认的名称
+export const getDefaultInclusiveConditionNodeName = (index: number, defaultFlow: boolean | undefined): string => {
+  if (defaultFlow) {
+    return '其它情况'
+  }
+  return '包容条件' + (index + 1)
+}
+
+export const convertTimeUnit = (strTimeUnit: string) => {
+  if (strTimeUnit === 'M') {
+    return TimeUnitType.MINUTE
+  }
+  if (strTimeUnit === 'H') {
+    return TimeUnitType.HOUR
+  }
+  if (strTimeUnit === 'D') {
+    return TimeUnitType.DAY
+  }
+  return TimeUnitType.HOUR
+}
+
+export const getApproveTypeText = (approveType: ApproveType): string => {
+  let approveTypeText = ''
+  APPROVE_TYPE.forEach((item) => {
+    if (item.value === approveType) {
+      approveTypeText = item.label
+      return
+    }
+  })
+  return approveTypeText
+}
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf
new file mode 100644
index 0000000..06f4e31
Binary files /dev/null and b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf differ
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/iconfont.woff b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/iconfont.woff
new file mode 100644
index 0000000..0724e75
Binary files /dev/null and b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/iconfont.woff differ
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2 b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2
new file mode 100644
index 0000000..c904bb6
Binary files /dev/null and b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2 differ
diff --git a/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
new file mode 100644
index 0000000..d0adbdb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -0,0 +1,826 @@
+// 配置节点头部
+.config-header {
+  display: flex;
+  flex-direction: column;
+
+  .node-name {
+    display: flex;
+    height: 24px;
+    line-height: 24px;
+    font-size: 16px;
+    cursor: pointer;
+    align-items: center;
+  }
+
+  .divide-line {
+    width: 100%;
+    height: 1px;
+    margin-top: 16px;
+    background: #eee;
+  }
+
+  .config-editable-input {
+    height: 24px;
+    max-width: 510px;
+    font-size: 16px;
+    line-height: 24px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:focus {
+      border-color: #40a9ff;
+      outline: 0;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    }
+  }
+}
+
+// 表单字段权限
+.field-setting-pane {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+
+  .field-setting-desc {
+    padding-right: 8px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .field-permit-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 45px;
+    padding-left: 12px;
+    line-height: 45px;
+    background-color: #f8fafc0a;
+    border: 1px solid #1f38581a;
+
+    .first-title {
+      text-align: left !important;
+    }
+
+    .other-titles {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .setting-title-label {
+      display: inline-block;
+      width: 110px;
+      padding: 5px 0;
+      font-size: 13px;
+      font-weight: 700;
+      color: #000;
+      text-align: center;
+    }
+  }
+
+  .field-setting-item {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    height: 38px;
+    padding-left: 12px;
+    border: 1px solid #1f38581a;
+    border-top: 0;
+
+    .field-setting-item-label {
+      display: inline-block;
+      width: 110px;
+      min-height: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: text;
+    }
+
+    .field-setting-item-group {
+      display: flex;
+      justify-content: space-between;
+
+      .item-radio-wrap {
+        display: inline-block;
+        width: 110px;
+        text-align: center;
+      }
+    }
+  }
+}
+
+// 节点连线气泡卡片样式
+.handler-item-wrapper {
+  width: 320px;
+  display: flex;
+  flex-wrap: wrap;
+  cursor: pointer;
+
+  .handler-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 12px;
+  }
+
+  .handler-item-icon {
+    width: 50px;
+    height: 50px;
+    background: #fff;
+    border: 1px solid #e2e2e2;
+    border-radius: 50%;
+    user-select: none;
+    text-align: center;
+
+    &:hover {
+      background: #e2e2e2;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    .icon-size {
+      font-size: 25px;
+      line-height: 50px;
+    }
+  }
+
+  .approve {
+    color: #ff943e;
+  }
+
+  .copy {
+    color: #3296fa;
+  }
+
+  .condition {
+    color: #67c23a;
+  }
+
+  .parallel {
+    color: #626aef;
+  }
+
+  .inclusive {
+    color: #345da2;
+  }
+
+  .delay {
+    color: #e47470;
+  }
+
+  .trigger {
+    color: #3373d2;
+  }
+
+  .router {
+    color: #ca3a31
+  }
+
+  .transactor {
+    color: #330099;
+  }
+
+  .child-process {
+    color: #996633;
+  }
+
+  .async-child-process {
+    color: #006666;
+  }
+
+  .handler-item-text {
+    margin-top: 4px;
+    width: 80px;
+    text-align: center;
+    font-size: 13px;
+  }
+}
+// Simple 流程模型样式
+.simple-process-model-container {
+  height: 100%;
+  padding-top: 32px;
+  background-color: #fafafa;
+  overflow-x: auto;
+  width: 100%;
+
+  .simple-process-model {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transform-origin: 50% 0 0;
+    min-width: fit-content;
+    transform: scale(1);
+    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    background: url(@/assets/svgs/bpm/simple-process-bg.svg) 0 0 repeat;
+    // 节点容器 定义节点宽度
+    .node-container {
+      width: 200px;
+    }
+    // 节点
+    .node-box {
+      position: relative;
+      display: flex;
+      min-height: 70px;
+      padding: 5px 10px 8px;
+      cursor: pointer;
+      background-color: #fff;
+      flex-direction: column;
+      border: 2px solid transparent;
+      border-radius: 8px;
+      box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
+      transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &.status-pass {
+        background-color: #a9da90;
+        border-color: #67c23a;
+      }
+
+      &.status-pass:hover {
+        border-color: #67c23a;
+      }
+
+      &.status-running {
+        background-color: #e7f0fe;
+        border-color: #5a9cf8;
+      }
+
+      &.status-running:hover {
+        border-color: #5a9cf8;
+      }
+
+      &.status-reject {
+        background-color: #f6e5e5;
+        border-color: #e47470;
+      }
+
+      &.status-reject:hover {
+        border-color: #e47470;
+      }
+
+      &:hover {
+        border-color: #0089ff;
+
+        .node-toolbar {
+          opacity: 1;
+        }
+
+        .branch-node-move {
+          display: flex;
+        }
+      }
+
+      // 普通节点标题
+      .node-title-container {
+        display: flex;
+        padding: 4px;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+        align-items: center;
+
+        .node-title-icon {
+          display: flex;
+          align-items: center;
+
+          &.user-task {
+            color: #ff943e;
+          }
+
+          &.copy-task {
+            color: #3296fa;
+          }
+
+          &.start-user {
+            color: #676565;
+          }
+
+          &.delay-node {
+            color: #e47470;
+          }
+
+          &.trigger-node {
+            color: #3373d2;
+          }
+
+          &.router-node {
+            color: #ca3a31
+          }
+
+          &.transactor-task {
+            color: #330099;
+          }
+
+          &.child-process {
+            color: #996633;
+          }
+
+          &.async-child-process {
+            color: #006666;
+          }
+        }
+
+        .node-title {
+          margin-left: 4px;
+          overflow: hidden;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 18px;
+          color: #1f1f1f;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #f60;
+          }
+        }
+      }
+
+      // 条件节点标题
+      .branch-node-title-container {
+        display: flex;
+        padding: 4px 0;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+        align-items: center;
+        justify-content: space-between;
+
+        .input-max-width {
+          max-width: 115px !important;
+        }
+
+        .branch-title {
+          overflow: hidden;
+          font-size: 13px;
+          font-weight: 600;
+          color: #f60;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #000;
+          }
+        }
+
+        .branch-priority {
+          min-width: 50px;
+          font-size: 12px;
+        }
+      }
+
+      .node-content {
+        display: flex;
+        min-height: 32px;
+        padding: 4px 8px;
+        margin-top: 4px;
+        line-height: 32px;
+        justify-content: space-between;
+        align-items: center;
+        color: #111f2c;
+        background: rgb(0 0 0 / 3%);
+        border-radius: 4px;
+
+        .node-text {
+          display: -webkit-box;
+          overflow: hidden;
+          font-size: 14px;
+          line-height: 24px;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      //条件节点内容
+      .branch-node-content {
+        display: flex;
+        min-height: 32px;
+        padding: 4px 0;
+        margin-top: 4px;
+        line-height: 32px;
+        align-items: center;
+        color: #111f2c;
+        border-radius: 4px;
+
+        .branch-node-text {
+          overflow: hidden;
+          font-size: 12px;
+          line-height: 24px;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      // 节点操作 ：删除
+      .node-toolbar {
+        position: absolute;
+        top: -20px;
+        right: 0;
+        display: flex;
+        opacity: 0;
+
+        .toolbar-icon {
+          text-align: center;
+          vertical-align: middle;
+        }
+      }
+
+      // 条件节点左右移动
+      .branch-node-move {
+        position: absolute;
+        display: none;
+        width: 10px;
+        height: 100%;
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .move-node-left {
+        top: 0;
+        left: -2px;
+        background: rgb(126 134 142 / 8%);
+        border-bottom-left-radius: 8px;
+        border-top-left-radius: 8px;
+      }
+
+      .move-node-right {
+        top: 0;
+        right: -2px;
+        background: rgb(126 134 142 / 8%);
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+      }
+    }
+
+    .node-config-error {
+      border-color: #ff5219 !important;
+    }
+    // 普通节点包装
+    .node-wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    // 节点连线处理
+    .node-handler-wrapper {
+      position: relative;
+      display: flex;
+      height: 70px;
+      align-items: center;
+      user-select: none;
+      justify-content: center;
+      flex-direction: column;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        z-index: 0;
+        width: 2px;
+        height: 100%;
+        margin: auto;
+        background-color: #dedede;
+        content: '';
+      }
+
+      .node-handler {
+        .add-icon {
+          position: relative;
+          top: -5px;
+          display: flex;
+          width: 25px;
+          height: 25px;
+          color: #fff;
+          cursor: pointer;
+          background-color: #0089ff;
+          border-radius: 50%;
+          align-items: center;
+          justify-content: center;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      }
+
+      .node-handler-arrow {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        display: flex;
+        transform: translateX(-50%);
+      }
+    }
+
+    // 条件节点包装
+    .branch-node-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin-top: 16px;
+
+      .branch-node-container {
+        position: relative;
+        display: flex;
+        min-width: fit-content;
+
+        &::before {
+          position: absolute;
+          left: 50%;
+          width: 4px;
+          height: 100%;
+          background-color: #fafafa;
+          content: '';
+          transform: translate(-50%);
+        }
+
+        .branch-node-add {
+          position: absolute;
+          top: -18px;
+          left: 50%;
+          z-index: 1;
+          height: 36px;
+          padding: 0 10px;
+          font-size: 12px;
+          line-height: 36px;
+          border: 2px solid #dedede;
+          border-radius: 18px;
+          transform: translateX(-50%);
+          transform-origin: center center;
+        }
+
+        .branch-node-readonly {
+          position: absolute;
+          top: -18px;
+          left: 50%;
+          z-index: 1;
+          display: flex;
+          width: 36px;
+          height: 36px;
+          background-color: #fff;
+          border: 2px solid #dedede;
+          border-radius: 50%;
+          transform: translateX(-50%);
+          align-items: center;
+          justify-content: center;
+          transform-origin: center center;
+
+          &.status-pass {
+            background-color: #e9f4e2;
+            border-color: #6bb63c;
+          }
+
+          &.status-pass:hover {
+            border-color: #6bb63c;
+          }
+
+          .icon-size {
+            font-size: 22px;
+            &.condition {
+              color: #67c23a;
+            }
+            &.parallel {
+              color: #626aef;
+            }
+            &.inclusive {
+              color: #345da2;
+            }
+          }
+        }
+
+        .branch-node-item {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          min-width: 280px;
+          padding: 40px 40px 0;
+          background: transparent;
+          border-top: 2px solid #dedede;
+          border-bottom: 2px solid #dedede;
+          flex-shrink: 0;
+
+          &::before {
+            position: absolute;
+            width: 2px;
+            height: 100%;
+            margin: auto;
+            inset: 0;
+            background-color: #dedede;
+            content: '';
+          }
+        }
+        // 覆盖条件节点第一个节点左上角的线
+        .branch-line-first-top {
+          position: absolute;
+          top: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+        // 覆盖条件节点第一个节点左下角的线
+        .branch-line-first-bottom {
+          position: absolute;
+          bottom: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+        // 覆盖条件节点最后一个节点右上角的线
+        .branch-line-last-top {
+          position: absolute;
+          top: -5px;
+          right: -1px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+        // 覆盖条件节点最后一个节点右下角的线
+        .branch-line-last-bottom {
+          position: absolute;
+          right: -1px;
+          bottom: -5px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+      }
+    }
+
+    .node-fixed-name {
+      display: inline-block;
+      width: auto;
+      padding: 0 4px;
+      overflow: hidden;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    // 开始节点包装
+    .start-node-wrapper {
+      position: relative;
+      margin-top: 16px;
+
+      .start-node-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .start-node-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 90px;
+          height: 36px;
+          padding: 3px 4px;
+          color: #212121;
+          cursor: pointer;
+          background: #fafafa;
+          border-radius: 30px;
+          box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    // 结束节点包装
+    .end-node-wrapper {
+      margin-bottom: 16px;
+
+      .end-node-box {
+        display: flex;
+        width: 80px;
+        height: 36px;
+        color: #212121;
+        border: 2px solid #fafafa;
+        border-radius: 30px;
+        box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+
+        &.status-pass {
+          background-color: #a9da90;
+          border-color: #6bb63c;
+        }
+
+        &.status-pass:hover {
+          border-color: #6bb63c;
+        }
+
+        &.status-reject {
+          background-color: #f6e5e5;
+          border-color: #e47470;
+        }
+
+        &.status-reject:hover {
+          border-color: #e47470;
+        }
+
+        &.status-cancel {
+          background-color: #eaeaeb;
+          border-color: #919398;
+        }
+
+        &.status-cancel:hover {
+          border-color: #919398;
+        }
+      }
+    }
+
+    // 可编辑的 title 输入框
+    .editable-title-input {
+      height: 20px;
+      max-width: 145px;
+      margin-left: 4px;
+      font-size: 12px;
+      line-height: 20px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      transition: all 0.3s;
+
+      &:focus {
+        border-color: #40a9ff;
+        outline: 0;
+        box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+      }
+    }
+  }
+}
+
+// iconfont 样式
+@font-face {
+  font-family: "iconfont"; /* Project id 4495938 */
+  src: url('iconfont.woff2?t=1737639517142') format('woff2'),
+       url('iconfont.woff?t=1737639517142') format('woff'),
+       url('iconfont.ttf?t=1737639517142') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-trigger:before {
+  content: "\e6d3";
+}
+
+.icon-router:before {
+  content: "\e6b2";
+}
+
+.icon-delay:before {
+  content: "\e600";
+}
+
+.icon-start-user:before {
+  content: "\e679";
+}
+
+.icon-inclusive:before {
+  content: "\e602";
+}
+
+.icon-copy:before {
+  content: "\e7eb";
+}
+
+.icon-transactor:before {
+  content: "\e61c";
+}
+
+.icon-exclusive:before {
+  content: "\e717";
+}
+
+.icon-approve:before {
+  content: "\e715";
+}
+
+.icon-parallel:before {
+  content: "\e688";
+}
+
+.icon-async-child-process:before {
+  content: "\e6f2";
+}
+
+.icon-child-process:before {
+  content: "\e6c1";
+}
diff --git a/marketing-ui/admin-ui/src/components/Sticky/index.ts b/marketing-ui/admin-ui/src/components/Sticky/index.ts
new file mode 100644
index 0000000..5e1de45
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Sticky/index.ts
@@ -0,0 +1,3 @@
+import Sticky from './src/Sticky.vue'
+
+export { Sticky }
diff --git a/marketing-ui/admin-ui/src/components/Sticky/src/Sticky.vue b/marketing-ui/admin-ui/src/components/Sticky/src/Sticky.vue
new file mode 100644
index 0000000..28ecbcb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Sticky/src/Sticky.vue
@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { isClient, useEventListener, useWindowSize } from '@vueuse/core'
+import type { CSSProperties } from 'vue'
+
+defineOptions({ name: 'Sticky' })
+
+const props = defineProps({
+  // 距离顶部或者底部的距离(单位px)
+  offset: propTypes.number.def(0),
+  // 设置元素的堆叠顺序
+  zIndex: propTypes.number.def(999),
+  // 设置指定的class
+  className: propTypes.string.def(''),
+  // 定位方式，默认为(top)，表示距离顶部位置，可以设置为top或者bottom
+  position: {
+    type: String,
+    validator: function (value: string) {
+      return ['top', 'bottom'].indexOf(value) !== -1
+    },
+    default: 'top'
+  }
+})
+const width = ref('auto' as string)
+const height = ref('auto' as string)
+const isSticky = ref(false)
+const refSticky = shallowRef<HTMLElement>()
+const scrollContainer = shallowRef<HTMLElement | Window>()
+const { height: windowHeight } = useWindowSize()
+onMounted(() => {
+  height.value = refSticky.value?.getBoundingClientRect().height + 'px'
+
+  scrollContainer.value = getScrollContainer(refSticky.value!, true)
+  useEventListener(scrollContainer, 'scroll', handleScroll)
+  useEventListener('resize', handleResize)
+  handleScroll()
+})
+onActivated(() => {
+  handleScroll()
+})
+
+const camelize = (str: string): string => {
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+}
+
+const getStyle = (element: HTMLElement, styleName: keyof CSSProperties): string => {
+  if (!isClient || !element || !styleName) return ''
+
+  let key = camelize(styleName)
+  if (key === 'float') key = 'cssFloat'
+  try {
+    const style = element.style[styleName]
+    if (style) return style
+    const computed = document.defaultView?.getComputedStyle(element, '')
+    return computed ? computed[styleName] : ''
+  } catch {
+    return element.style[styleName]
+  }
+}
+const isScroll = (el: HTMLElement, isVertical?: boolean): boolean => {
+  if (!isClient) return false
+  const key = (
+    {
+      undefined: 'overflow',
+      true: 'overflow-y',
+      false: 'overflow-x'
+    } as const
+  )[String(isVertical)]!
+  const overflow = getStyle(el, key)
+  return ['scroll', 'auto', 'overlay'].some((s) => overflow.includes(s))
+}
+
+const getScrollContainer = (
+  el: HTMLElement,
+  isVertical: boolean
+): Window | HTMLElement | undefined => {
+  if (!isClient) return
+  let parent = el
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent)) return window
+    if (isScroll(parent, isVertical)) return parent
+    parent = parent.parentNode as HTMLElement
+  }
+  return parent
+}
+
+const handleScroll = () => {
+  width.value = refSticky.value!.getBoundingClientRect().width! + 'px'
+  if (props.position === 'top') {
+    const offsetTop = refSticky.value?.getBoundingClientRect().top
+    if (offsetTop !== undefined && offsetTop < props.offset) {
+      sticky()
+      return
+    }
+    reset()
+  } else {
+    const offsetBottom = refSticky.value?.getBoundingClientRect().bottom
+
+    if (offsetBottom !== undefined && offsetBottom > windowHeight.value - props.offset) {
+      sticky()
+      return
+    }
+    reset()
+  }
+}
+const handleResize = () => {
+  if (isSticky.value && refSticky.value) {
+    width.value = refSticky.value.getBoundingClientRect().width + 'px'
+  }
+}
+const sticky = () => {
+  if (isSticky.value) {
+    return
+  }
+  isSticky.value = true
+}
+const reset = () => {
+  if (!isSticky.value) {
+    return
+  }
+  width.value = 'auto'
+  isSticky.value = false
+}
+</script>
+<template>
+  <div ref="refSticky" :style="{ height: height, zIndex: zIndex }">
+    <div
+      :class="className"
+      :style="{
+        top: position === 'top' ? offset + 'px' : '',
+        bottom: position !== 'top' ? offset + 'px' : '',
+        zIndex: zIndex,
+        position: isSticky ? 'fixed' : 'static',
+        width: width,
+        height: height
+      }"
+    >
+      <slot>
+        <div>sticky</div>
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/SummaryCard/index.vue b/marketing-ui/admin-ui/src/components/SummaryCard/index.vue
new file mode 100644
index 0000000..52da6da
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/SummaryCard/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4">
+    <div
+      class="h-12 w-12 flex flex-shrink-0 items-center justify-center rounded-1"
+      :class="`${iconColor} ${iconBgColor}`"
+    >
+      <Icon :icon="icon" class="!text-6" />
+    </div>
+    <div class="flex flex-col gap-1">
+      <div class="flex items-center gap-1 text-gray-500">
+        <span class="text-3.5">{{ title }}</span>
+        <el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
+          <Icon icon="ep:warning" class="item-center flex !text-3" />
+        </el-tooltip>
+      </div>
+      <div class="flex flex-row items-baseline gap-2">
+        <div class="text-7">
+          <CountTo :prefix="prefix" :end-val="value" :decimals="decimals" />
+        </div>
+        <span
+          v-if="percent != undefined"
+          :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'"
+        >
+          <span class="text-sm">{{ Math.abs(toNumber(percent)) }}%</span>
+          <Icon
+            :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'"
+            class="ml-0.5 !text-3"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { toNumber } from 'lodash-es'
+
+/** 统计卡片 */
+defineOptions({ name: 'SummaryCard' })
+
+defineProps({
+  title: propTypes.string.def(''),
+  tooltip: propTypes.string.def(''),
+  icon: propTypes.string.def(''),
+  iconColor: propTypes.string.def(''),
+  iconBgColor: propTypes.string.def(''),
+  prefix: propTypes.string.def(''),
+  value: propTypes.number.def(0),
+  decimals: propTypes.number.def(0),
+  percent: propTypes.oneOfType([Number, String]).def(undefined)
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/Table/index.ts b/marketing-ui/admin-ui/src/components/Table/index.ts
new file mode 100644
index 0000000..9f89317
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Table/index.ts
@@ -0,0 +1,13 @@
+import Table from './src/Table.vue'
+import { ElTable } from 'element-plus'
+import { TableSetPropsType } from '@/types/table'
+import TableSelectForm from './src/TableSelectForm.vue'
+
+export interface TableExpose {
+  setProps: (props: Recordable) => void
+  setColumn: (columnProps: TableSetPropsType[]) => void
+  selections: Recordable[]
+  elTableRef: ComponentRef<typeof ElTable>
+}
+
+export { Table, TableSelectForm }
diff --git a/marketing-ui/admin-ui/src/components/Table/src/Table.vue b/marketing-ui/admin-ui/src/components/Table/src/Table.vue
new file mode 100644
index 0000000..e9e50af
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Table/src/Table.vue
@@ -0,0 +1,311 @@
+<script lang="tsx">
+import { ElTable, ElTableColumn, ElPagination } from 'element-plus'
+import { defineComponent, PropType, ref, computed, unref, watch, onMounted } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+import { setIndex } from './helper'
+import { getSlot } from '@/utils/tsxHelper'
+import type { TableProps } from './types'
+import { set } from 'lodash-es'
+import { Pagination, TableColumn, TableSetPropsType, TableSlotDefault } from '@/types/table'
+
+export default defineComponent({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: 'Table',
+  props: {
+    pageSize: propTypes.number.def(10),
+    currentPage: propTypes.number.def(1),
+    // 是否多选
+    selection: propTypes.bool.def(false),
+    // 是否所有的超出隐藏，优先级低于schema中的showOverflowTooltip,
+    showOverflowTooltip: propTypes.bool.def(true),
+    // 表头
+    columns: {
+      type: Array as PropType<TableColumn[]>,
+      default: () => []
+    },
+    // 展开行
+    expand: propTypes.bool.def(false),
+    // 是否展示分页
+    pagination: {
+      type: Object as PropType<Pagination>,
+      default: (): Pagination | undefined => undefined
+    },
+    // 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
+    reserveSelection: propTypes.bool.def(false),
+    // 加载状态
+    loading: propTypes.bool.def(false),
+    // 是否叠加索引
+    reserveIndex: propTypes.bool.def(false),
+    // 对齐方式
+    align: propTypes.string
+      .validate((v: string) => ['left', 'center', 'right'].includes(v))
+      .def('center'),
+    // 表头对齐方式
+    headerAlign: propTypes.string
+      .validate((v: string) => ['left', 'center', 'right'].includes(v))
+      .def('center'),
+    data: {
+      type: Array as PropType<Recordable[]>,
+      default: () => []
+    }
+  },
+  emits: ['update:pageSize', 'update:currentPage', 'register'],
+  setup(props, { attrs, slots, emit, expose }) {
+    const elTableRef = ref<ComponentRef<typeof ElTable>>()
+
+    // 注册
+    onMounted(() => {
+      const tableRef = unref(elTableRef)
+      emit('register', tableRef?.$parent, elTableRef.value)
+    })
+
+    const pageSizeRef = ref(props.pageSize)
+
+    const currentPageRef = ref(props.currentPage)
+
+    // useTable传入的props
+    const outsideProps = ref<TableProps>({})
+
+    const mergeProps = ref<TableProps>({})
+
+    const getProps = computed(() => {
+      const propsObj = { ...props }
+      Object.assign(propsObj, unref(mergeProps))
+      return propsObj
+    })
+
+    const setProps = (props: TableProps = {}) => {
+      mergeProps.value = Object.assign(unref(mergeProps), props)
+      outsideProps.value = props
+    }
+
+    const setColumn = (columnProps: TableSetPropsType[], columnsChildren?: TableColumn[]) => {
+      const { columns } = unref(getProps)
+      for (const v of columnsChildren || columns) {
+        for (const item of columnProps) {
+          if (v.field === item.field) {
+            set(v, item.path, item.value)
+          } else if (v.children?.length) {
+            setColumn(columnProps, v.children)
+          }
+        }
+      }
+    }
+
+    const selections = ref<Recordable[]>([])
+
+    const selectionChange = (selection: Recordable[]) => {
+      selections.value = selection
+    }
+
+    expose({
+      setProps,
+      setColumn,
+      selections
+    })
+
+    const pagination = computed(() => {
+      // update by 芋艿：保持和 Pagination 组件的逻辑一致
+      return Object.assign(
+        {
+          small: false,
+          background: true,
+          pagerCount: document.body.clientWidth < 992 ? 5 : 7,
+          layout: 'total, sizes, prev, pager, next, jumper',
+          pageSizes: [10, 20, 30, 50, 100],
+          disabled: false,
+          hideOnSinglePage: false,
+          total: 10
+        },
+        unref(getProps).pagination
+      )
+    })
+
+    watch(
+      () => unref(getProps).pageSize,
+      (val: number) => {
+        pageSizeRef.value = val
+      }
+    )
+
+    watch(
+      () => unref(getProps).currentPage,
+      (val: number) => {
+        currentPageRef.value = val
+      }
+    )
+
+    watch(
+      () => pageSizeRef.value,
+      (val: number) => {
+        emit('update:pageSize', val)
+      }
+    )
+
+    watch(
+      () => currentPageRef.value,
+      (val: number) => {
+        emit('update:currentPage', val)
+      }
+    )
+
+    const getBindValue = computed(() => {
+      const bindValue: Recordable = { ...attrs, ...props }
+      delete bindValue.columns
+      delete bindValue.data
+      return bindValue
+    })
+
+    const renderTableSelection = () => {
+      const { selection, reserveSelection, align, headerAlign } = unref(getProps)
+      // 渲染多选
+      return selection ? (
+        <ElTableColumn
+          type="selection"
+          reserveSelection={reserveSelection}
+          align={align}
+          headerAlign={headerAlign}
+          width="50"
+        ></ElTableColumn>
+      ) : undefined
+    }
+
+    const renderTableExpand = () => {
+      const { align, headerAlign, expand } = unref(getProps)
+      // 渲染展开行
+      return expand ? (
+        <ElTableColumn type="expand" align={align} headerAlign={headerAlign}>
+          {{
+            // @ts-ignore
+            default: (data: TableSlotDefault) => getSlot(slots, 'expand', data)
+          }}
+        </ElTableColumn>
+      ) : undefined
+    }
+
+    const rnderTreeTableColumn = (columnsChildren: TableColumn[]) => {
+      const { align, headerAlign, showOverflowTooltip } = unref(getProps)
+      return columnsChildren.map((v) => {
+        const props = { ...v }
+        if (props.children) delete props.children
+        return (
+          <ElTableColumn
+            showOverflowTooltip={showOverflowTooltip}
+            align={align}
+            headerAlign={headerAlign}
+            {...props}
+            prop={v.field}
+          >
+            {{
+              default: (data: TableSlotDefault) =>
+                v.children && v.children.length
+                  ? rnderTableColumn(v.children)
+                  : // @ts-ignore
+                    getSlot(slots, v.field, data) ||
+                    v?.formatter?.(data.row, data.column, data.row[v.field], data.$index) ||
+                    data.row[v.field],
+              // @ts-ignore
+              header: getSlot(slots, `${v.field}-header`)
+            }}
+          </ElTableColumn>
+        )
+      })
+    }
+
+    const rnderTableColumn = (columnsChildren?: TableColumn[]) => {
+      const {
+        columns,
+        reserveIndex,
+        pageSize,
+        currentPage,
+        align,
+        headerAlign,
+        showOverflowTooltip
+      } = unref(getProps)
+      return [...[renderTableExpand()], ...[renderTableSelection()]].concat(
+        (columnsChildren || columns).map((v) => {
+          // 自定生成序号
+          if (v.type === 'index') {
+            return (
+              <ElTableColumn
+                type="index"
+                index={
+                  v.index
+                    ? v.index
+                    : (index) => setIndex(reserveIndex, index, pageSize, currentPage)
+                }
+                align={v.align || align}
+                headerAlign={v.headerAlign || headerAlign}
+                label={v.label}
+                width="65px"
+              ></ElTableColumn>
+            )
+          } else {
+            const props = { ...v }
+            if (props.children) delete props.children
+            return (
+              <ElTableColumn
+                showOverflowTooltip={showOverflowTooltip}
+                align={align}
+                headerAlign={headerAlign}
+                {...props}
+                prop={v.field}
+              >
+                {{
+                  default: (data: TableSlotDefault) =>
+                    v.children && v.children.length
+                      ? rnderTreeTableColumn(v.children)
+                      : // @ts-ignore
+                        getSlot(slots, v.field, data) ||
+                        v?.formatter?.(data.row, data.column, data.row[v.field], data.$index) ||
+                        data.row[v.field],
+                  // @ts-ignore
+                  header: () => getSlot(slots, `${v.field}-header`) || v.label
+                }}
+              </ElTableColumn>
+            )
+          }
+        })
+      )
+    }
+
+    return () => (
+      <div v-loading={unref(getProps).loading}>
+        <ElTable
+          // @ts-ignore
+          ref={elTableRef}
+          data={unref(getProps).data}
+          onSelection-change={selectionChange}
+          {...unref(getBindValue)}
+        >
+          {{
+            default: () => rnderTableColumn(),
+            // @ts-ignore
+            append: () => getSlot(slots, 'append')
+          }}
+        </ElTable>
+        {unref(getProps).pagination ? (
+          // update by 芋艿：保持和 Pagination 组件一致
+          <ElPagination
+            v-model:pageSize={pageSizeRef.value}
+            v-model:currentPage={currentPageRef.value}
+            class="float-right mb-15px mt-15px"
+            {...unref(pagination)}
+          ></ElPagination>
+        ) : undefined}
+      </div>
+    )
+  }
+})
+</script>
+<style lang="scss" scoped>
+:deep(.el-button.is-text) {
+  padding: 8px 4px;
+  margin-left: 0;
+}
+
+:deep(.el-button.is-link) {
+  padding: 8px 4px;
+  margin-left: 0;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Table/src/TableSelectForm.vue b/marketing-ui/admin-ui/src/components/Table/src/TableSelectForm.vue
new file mode 100644
index 0000000..5378a1b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Table/src/TableSelectForm.vue
@@ -0,0 +1,92 @@
+<!-- 列表选择通用组件，参考 ProductList 组件使用 -->
+<!-- TODO 芋艿：可能会移除 -->
+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" :scroll="true" :title="title" width="60%">
+    <el-table
+      ref="multipleTableRef"
+      v-loading="loading"
+      :data="list"
+      :show-overflow-tooltip="true"
+      :stripe="true"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <slot></slot>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+    <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 { ElTable } from 'element-plus'
+
+defineOptions({ name: 'TableSelectForm' })
+withDefaults(
+  defineProps<{
+    modelValue: any[]
+    title: string
+  }>(),
+  { modelValue: () => [], title: '选择' }
+)
+const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const loading = ref(false) // 列表的加载中
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10
+})
+// 确认选择时的触发事件
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: number[]): void
+}>()
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref<any[]>([])
+const handleSelectionChange = (val: any[]) => {
+  multipleSelection.value = val
+}
+/** 触发 */
+const submitForm = () => {
+  formLoading.value = true
+  try {
+    emits('update:modelValue', multipleSelection.value) // 返回选择的原始数据由使用方处理
+  } finally {
+    formLoading.value = false
+    // 关闭弹窗
+    dialogVisible.value = false
+  }
+}
+
+const getList = async (getListFunc: Function) => {
+  loading.value = true
+  try {
+    const data = await getListFunc(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 打开弹窗 */
+const open = async (getListFunc: Function) => {
+  dialogVisible.value = true
+  await nextTick()
+  if (multipleSelection.value.length > 0) {
+    multipleTableRef.value!.clearSelection()
+  }
+  await getList(getListFunc)
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/marketing-ui/admin-ui/src/components/Table/src/helper.ts b/marketing-ui/admin-ui/src/components/Table/src/helper.ts
new file mode 100644
index 0000000..d8b34a8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Table/src/helper.ts
@@ -0,0 +1,8 @@
+export const setIndex = (reserveIndex: boolean, index: number, size: number, current: number) => {
+  const newIndex = index + 1
+  if (reserveIndex) {
+    return size * (current - 1) + newIndex
+  } else {
+    return newIndex
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/Table/src/types.ts b/marketing-ui/admin-ui/src/components/Table/src/types.ts
new file mode 100644
index 0000000..1c7ff76
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Table/src/types.ts
@@ -0,0 +1,26 @@
+import { Pagination, TableColumn } from '@/types/table'
+
+export type TableProps = {
+  pageSize?: number
+  currentPage?: number
+  // 是否多选
+  selection?: boolean
+  // 是否所有的超出隐藏，优先级低于schema中的showOverflowTooltip,
+  showOverflowTooltip?: boolean
+  // 表头
+  columns?: TableColumn[]
+  // 是否展示分页
+  pagination?: Pagination | undefined
+  // 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
+  reserveSelection?: boolean
+  // 加载状态
+  loading?: boolean
+  // 是否叠加索引
+  reserveIndex?: boolean
+  // 对齐方式
+  align?: 'left' | 'center' | 'right'
+  // 表头对齐方式
+  headerAlign?: 'left' | 'center' | 'right'
+  data?: Recordable
+  expand?: boolean
+} & Recordable
diff --git a/marketing-ui/admin-ui/src/components/Tinyflow/Tinyflow.vue b/marketing-ui/admin-ui/src/components/Tinyflow/Tinyflow.vue
new file mode 100644
index 0000000..6c4f21c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Tinyflow/Tinyflow.vue
@@ -0,0 +1,63 @@
+<template>
+  <div ref="divRef" :class="['tinyflow', className]" :style="style" style="height: 100%"> </div>
+</template>
+
+<script setup lang="ts">
+import { Item, Tinyflow as TinyflowNative } from './ui'
+import './ui/index.css'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps<{
+  className?: string
+  style?: Record<string, string>
+  data?: Record<string, any>
+  provider?: {
+    llm?: () => Item[] | Promise<Item[]>
+    knowledge?: () => Item[] | Promise<Item[]>
+    internal?: () => Item[] | Promise<Item[]>
+  }
+}>()
+
+const divRef = ref<HTMLDivElement | null>(null)
+let tinyflow: TinyflowNative | null = null
+// 定义默认的 provider 方法
+const defaultProvider = {
+  llm: () => [] as Item[],
+  knowledge: () => [] as Item[],
+  internal: () => [] as Item[]
+}
+
+onMounted(() => {
+  if (divRef.value) {
+    // 合并默认 provider 和传入的 props.provider
+    const mergedProvider = {
+      ...defaultProvider,
+      ...props.provider
+    }
+    tinyflow = new TinyflowNative({
+      element: divRef.value as Element,
+      data: props.data || {},
+      provider: mergedProvider
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (tinyflow) {
+    tinyflow.destroy()
+    tinyflow = null
+  }
+})
+
+const getData = () => {
+  if (tinyflow) {
+    return tinyflow.getData()
+  }
+  console.warn('Tinyflow instance is not initialized')
+  return null
+}
+
+defineExpose({
+  getData
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.css b/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.css
new file mode 100644
index 0000000..8fa10c2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.css
@@ -0,0 +1 @@
+.svelte-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgb(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.svelte-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgb(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.svelte-flow__background{background-color:var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.svelte-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.svelte-flow__pane{z-index:1}.svelte-flow__pane.draggable{cursor:grab}.svelte-flow__pane.dragging{cursor:grabbing}.svelte-flow__pane.selection{cursor:pointer}.svelte-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.svelte-flow__renderer{z-index:4}.svelte-flow__selection{z-index:6}.svelte-flow__nodesselection-rect:focus,.svelte-flow__nodesselection-rect:focus-visible{outline:none}.svelte-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.svelte-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.svelte-flow .svelte-flow__edges{position:absolute}.svelte-flow .svelte-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.svelte-flow__edge{pointer-events:visibleStroke}.svelte-flow__edge.selectable{cursor:pointer}.svelte-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.svelte-flow__edge.animated path.svelte-flow__edge-interaction{stroke-dasharray:none;animation:none}.svelte-flow__edge.inactive{pointer-events:none}.svelte-flow__edge.selected,.svelte-flow__edge:focus,.svelte-flow__edge:focus-visible{outline:none}.svelte-flow__edge.selected .svelte-flow__edge-path,.svelte-flow__edge.selectable:focus .svelte-flow__edge-path,.svelte-flow__edge.selectable:focus-visible .svelte-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.svelte-flow__edge-textwrapper{pointer-events:all}.svelte-flow__edge .svelte-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.svelte-flow__connection{pointer-events:none}.svelte-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.svelte-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.svelte-flow__nodes{pointer-events:none;transform-origin:0 0}.svelte-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.svelte-flow__node.selectable{cursor:pointer}.svelte-flow__node.draggable{cursor:grab;pointer-events:all}.svelte-flow__node.draggable.dragging{cursor:grabbing}.svelte-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.svelte-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.svelte-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.svelte-flow__handle.connectingfrom{pointer-events:all}.svelte-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.svelte-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.svelte-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.svelte-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.svelte-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.svelte-flow__edgeupdater{cursor:move;pointer-events:all}.svelte-flow__panel{position:absolute;z-index:5;margin:15px}.svelte-flow__panel.top{top:0}.svelte-flow__panel.bottom{bottom:0}.svelte-flow__panel.left{left:0}.svelte-flow__panel.right{right:0}.svelte-flow__panel.center{left:50%;transform:translate(-50%)}.svelte-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.svelte-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.svelte-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.svelte-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.svelte-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.svelte-flow__minimap-svg{display:block}.svelte-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.svelte-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.svelte-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.svelte-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.svelte-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.svelte-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.svelte-flow__controls.horizontal{flex-direction:row}.svelte-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.svelte-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.svelte-flow__edge.updating .svelte-flow__edge-path{stroke:#777}.svelte-flow__edge-text{font-size:10px}.svelte-flow__node.selectable:focus,.svelte-flow__node.selectable:focus-visible{outline:none}.svelte-flow__node-input,.svelte-flow__node-default,.svelte-flow__node-output,.svelte-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.svelte-flow__node-input.selectable:hover,.svelte-flow__node-default.selectable:hover,.svelte-flow__node-output.selectable:hover,.svelte-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.svelte-flow__node-input.selectable.selected,.svelte-flow__node-input.selectable:focus,.svelte-flow__node-input.selectable:focus-visible,.svelte-flow__node-default.selectable.selected,.svelte-flow__node-default.selectable:focus,.svelte-flow__node-default.selectable:focus-visible,.svelte-flow__node-output.selectable.selected,.svelte-flow__node-output.selectable:focus,.svelte-flow__node-output.selectable:focus-visible,.svelte-flow__node-group.selectable.selected,.svelte-flow__node-group.selectable:focus,.svelte-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.svelte-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.svelte-flow__nodesselection-rect,.svelte-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.svelte-flow__nodesselection-rect:focus,.svelte-flow__nodesselection-rect:focus-visible,.svelte-flow__selection:focus,.svelte-flow__selection:focus-visible{outline:none}.svelte-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.svelte-flow__controls-button:disabled{pointer-events:none}.svelte-flow__controls-button:disabled svg{fill-opacity:.4}.svelte-flow__controls-button:last-child{border-bottom:none}.svelte-flow__resize-control{position:absolute}.svelte-flow__resize-control.left,.svelte-flow__resize-control.right{cursor:ew-resize}.svelte-flow__resize-control.top,.svelte-flow__resize-control.bottom{cursor:ns-resize}.svelte-flow__resize-control.top.left,.svelte-flow__resize-control.bottom.right{cursor:nwse-resize}.svelte-flow__resize-control.bottom.left,.svelte-flow__resize-control.top.right{cursor:nesw-resize}.svelte-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));transform:translate(-50%,-50%)}.svelte-flow__resize-control.handle.left{left:0;top:50%}.svelte-flow__resize-control.handle.right{left:100%;top:50%}.svelte-flow__resize-control.handle.top{left:50%;top:0}.svelte-flow__resize-control.handle.bottom{left:50%;top:100%}.svelte-flow__resize-control.handle.top.left,.svelte-flow__resize-control.handle.bottom.left{left:0}.svelte-flow__resize-control.handle.top.right,.svelte-flow__resize-control.handle.bottom.right{left:100%}.svelte-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.svelte-flow__resize-control.line.left,.svelte-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.svelte-flow__resize-control.line.left{left:0;border-left-width:1px}.svelte-flow__resize-control.line.right{left:100%;border-right-width:1px}.svelte-flow__resize-control.line.top,.svelte-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.svelte-flow__resize-control.line.top{top:0;border-top-width:1px}.svelte-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.svelte-flow__edge-label{text-align:center;position:absolute;padding:2px;font-size:10px;cursor:pointer;color:var(--xy-edge-label-color, var(--xy-edge-label-color-default));background:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.svelte-flow__nodes,.svelte-flow__edgelabel-renderer{z-index:0}:root,:root .tf-theme-light{--tf-primary-color: #2563EB;--xy-node-boxshadow-selected: 0 0 0 1px var(--tf-primary-color);--xy-handle-background-color: var(--tf-primary-color)}.tf-btn{display:flex;align-items:center;justify-content:center;gap:2px;background:#fff;border:1px solid #ccc;cursor:pointer;border-radius:5px;padding:5px;margin:0;height:fit-content;width:fit-content}.tf-btn svg{fill:currentColor;width:16px;height:16px}.tf-btn:hover{border:1px solid var(--tf-primary-color)}.tf-input,.tf-textarea{display:flex;border-radius:5px;border:1px solid #ccc;padding:5px 10px;box-sizing:border-box;resize:vertical;outline:none}.tf-input::placeholder,.tf-textarea::placeholder{color:#ccc}.tf-input:focus,.tf-textarea:focus{border-color:var(--tf-primary-color);box-shadow:0 0 5px #51cbee33}.tf-input[disabled],.tf-textarea[disabled]{background-color:#f0f0f0;cursor:not-allowed;color:#aaa}.tf-select-input{display:flex;border:1px solid #ccc;padding:3px 10px;border-radius:5px;font-size:14px;justify-content:space-between;align-items:center;cursor:pointer;background:#fff;height:27px}.tf-select-input:focus{border-color:var(--tf-primary-color);box-shadow:0 0 5px #51cbee33}.tf-select-input-value{height:21px;min-width:10px;font-size:12px;display:flex;align-items:center}.tf-select-input-arrow{display:block;width:16px;height:16px;color:#666}.tf-select-input-placeholder{color:#ccc}.tf-select-content{display:flex;flex-direction:column;background:#fff;margin-top:5px;border:1px solid #ccc;border-radius:5px;padding:5px;width:max-content;min-width:100%;z-index:9999;box-sizing:border-box}.tf-select-content-item{display:flex;align-items:center;padding:5px 10px;border:none;background:#fff;border-radius:5px;cursor:pointer;line-height:100%;gap:2px}.tf-select-content-item span{width:16px;display:flex}.tf-select-content-item svg{width:16px;height:16px;margin:auto}.tf-select-content-item:hover{background:#f0f0f0}.tf-select-content-children{padding-left:14px}.tf-checkbox{width:14px;height:14px}.tf-tabs{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px;border-radius:5px;border:none;background:#f4f4f5}.tf-tabs .tf-tabs-item{flex-grow:1;padding:5px 10px;cursor:pointer;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#808088}.tf-tabs .tf-tabs-item.active{background:#fff;color:#333;font-weight:500;box-shadow:0 0 5px #00000026}h3.tf-heading{font-weight:700;font-size:14px;margin-top:2px;margin-bottom:3px;color:#333}.tf-collapse{border:none;border-radius:5px}.tf-collapse-item-title{display:flex;align-items:center;cursor:pointer;font-size:14px}.tf-collapse-item-title-icon{display:flex;width:26px;height:26px;color:#2563eb;background:#cedafb;border-radius:5px;padding:3px;justify-content:center;align-items:center;margin-right:10px}.tf-collapse-item-title-icon svg{width:22px;height:22px;color:#3474ff}.tf-collapse-item-title-arrow{display:block;width:16px;height:16px;margin-left:auto}.tf-collapse-item-description{font-size:12px;margin:10px 0;color:#999}.svelte-flow__nodes .svelte-flow__node{border:3px solid transparent;border-radius:5px;box-sizing:border-box}.svelte-flow__nodes .svelte-flow__node .svelte-flow__handle{width:16px;height:16px;background:transparent;display:flex;justify-content:center;align-items:center;border:none}.svelte-flow__nodes .svelte-flow__node .svelte-flow__handle:after{content:" ";background:#2563eb;width:8px;height:8px;border-radius:100%;transition:width .1s,height .1s}.svelte-flow__nodes .svelte-flow__node .svelte-flow__handle:hover:after{width:16px;height:16px}.svelte-flow__nodes .svelte-flow__node div.loop_handle_wrapper:after{content:"循环体";background:#2563eb;width:100px;height:20px;border-radius:0;display:flex;color:#fff;justify-content:center;align-items:center}.svelte-flow__nodes .svelte-flow__node div.loop_handle_wrapper:hover:after{width:100px;height:20px}.svelte-flow__nodes .svelte-flow__node:after{content:" ";position:absolute;border-radius:5px;top:-2px;left:-2px;border:1px solid #ccc;height:calc(100% + 2px);width:calc(100% + 2px)}.svelte-flow__nodes .svelte-flow__node:hover{border:3px solid #bacaef7d}.svelte-flow__nodes .svelte-flow__node.selectable.selected{border:3px solid #bacaef7d;box-shadow:var(--xy-node-boxshadow-selected)}.svelte-flow__nodes .svelte-flow__node:hover:after{display:none}.svelte-flow__nodes .svelte-flow__node.selectable.selected:after{display:none}.tf-node-wrapper{border-radius:5px;min-width:300px;background:#fff}.tf-node-wrapper-title{height:30px;background:#eff1f5;color:#bcbcbc;font-size:12px;display:flex;align-items:center;padding-left:5px;border-bottom:1px solid #ccc;font-weight:300;letter-spacing:1px}.tf-node-wrapper-body{padding:10px}.svelte-flow__attribution a{display:none}.tf-toolbar{position:absolute;top:10px;left:10px;z-index:9999;display:flex;gap:5px;transition:transform .5s ease,opacity .5s ease;transform:translate(-220px)}.tf-toolbar.show{transform:translate(0)}.tf-toolbar-container{background:#fff;border:1px solid #eee;border-radius:5px;box-shadow:0 0 5px #0000001a;padding:10px;width:180px}.tf-toolbar-container-header{display:flex}.tf-toolbar-container-body{display:flex;margin-top:20px}.tf-toolbar-container-body .tf-toolbar-container-base,.tf-toolbar-container-body .tf-toolbar-container-tools{display:flex;flex-direction:column;gap:4px;flex-grow:1}.tf-toolbar-container-body .tf-toolbar-container-base .tf-btn,.tf-toolbar-container-body .tf-toolbar-container-tools .tf-btn{border:none;width:100%;justify-content:flex-start;height:40px;gap:10px;cursor:grabbing;border-radius:5px}.tf-toolbar-container-body .tf-toolbar-container-base .tf-btn svg,.tf-toolbar-container-body .tf-toolbar-container-tools .tf-btn svg{width:20px;height:20px;fill:#2563eb}.tf-toolbar-container-body .tf-toolbar-container-base .tf-btn:hover,.tf-toolbar-container-body .tf-toolbar-container-tools .tf-btn:hover{background:#f1f1f1}.tinyflow-logo:after{content:"Tinyflow.ai";font-size:145px;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:800;color:#03153b54;text-shadow:1px 3px 6px #cedafb,0 0 0 #000,1px 3px 6px #fff;opacity:.1}
diff --git a/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.d.ts b/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.d.ts
new file mode 100644
index 0000000..38a3132
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.d.ts
@@ -0,0 +1,41 @@
+import { Edge } from '@xyflow/svelte';
+import { Node as Node_2 } from '@xyflow/svelte';
+import { useSvelteFlow } from '@xyflow/svelte';
+import { Viewport } from '@xyflow/svelte';
+
+export declare type Item = {
+    value: number | string;
+    label: string;
+    children?: Item[];
+};
+
+export declare class Tinyflow {
+    private options;
+    private rootEl;
+    private svelteFlowInstance;
+    constructor(options: TinyflowOptions);
+    private _init;
+    private _setOptions;
+    getOptions(): TinyflowOptions;
+    getData(): {
+        nodes: Node_2[];
+        edges: Edge[];
+        viewport: Viewport;
+    };
+    setData(data: TinyflowData): void;
+    destroy(): void;
+}
+
+export declare type TinyflowData = Partial<ReturnType<ReturnType<typeof useSvelteFlow>['toObject']>>;
+
+export declare type TinyflowOptions = {
+    element: string | Element;
+    data?: TinyflowData;
+    provider?: {
+        llm?: () => Item[] | Promise<Item[]>;
+        knowledge?: () => Item[] | Promise<Item[]>;
+        internal?: () => Item[] | Promise<Item[]>;
+    };
+};
+
+export { }
diff --git a/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.js b/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.js
new file mode 100644
index 0000000..80e77b5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.js
@@ -0,0 +1,16984 @@
+var tf = Object.defineProperty;
+var Pa = (e) => {
+  throw TypeError(e);
+};
+var nf = (e, t, n) => t in e ? tf(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var wt = (e, t, n) => nf(e, typeof t != "symbol" ? t + "" : t, n), Ji = (e, t, n) => t.has(e) || Pa("Cannot " + n);
+var it = (e, t, n) => (Ji(e, t, "read from private field"), n ? n.call(e) : t.get(e)), rr = (e, t, n) => t.has(e) ? Pa("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), Gr = (e, t, n, r) => (Ji(e, t, "write to private field"), r ? r.call(e, n) : t.set(e, n), n), Na = (e, t, n) => (Ji(e, t, "access private method"), n);
+const rf = "5";
+var Ll;
+typeof window < "u" && ((Ll = window.__svelte ?? (window.__svelte = {})).v ?? (Ll.v = /* @__PURE__ */ new Set())).add(rf);
+let Br = !1, of = !1;
+function sf() {
+  Br = !0;
+}
+sf();
+const Os = 1, Is = 2, Ol = 4, af = 8, lf = 16, uf = 1, cf = 2, Il = 4, df = 8, ff = 16, zl = 1, gf = 2, zs = "[", Rs = "[!", Bs = "]", _r = {}, Pt = Symbol(), Rl = "http://www.w3.org/2000/svg", Ma = !1, nn = 2, Bl = 4, Si = 8, Ys = 16, On = 32, Yr = 64, ti = 128, qt = 256, ni = 512, mt = 1024, In = 2048, gr = 4096, Mn = 8192, Pi = 16384, hf = 32768, Zr = 65536, vf = 1 << 17, pf = 1 << 19, Yl = 1 << 20, Wn = Symbol("$state"), Zs = Symbol("legacy props"), mf = Symbol("");
+var Co = Array.isArray, yf = Array.prototype.indexOf, Xs = Array.from, ri = Object.keys, so = Object.defineProperty, Tn = Object.getOwnPropertyDescriptor, Zl = Object.getOwnPropertyDescriptors, wf = Object.prototype, _f = Array.prototype, Fs = Object.getPrototypeOf;
+function Ur(e) {
+  return typeof e == "function";
+}
+const dt = () => {
+};
+function xf(e) {
+  return e();
+}
+function ao(e) {
+  for (var t = 0; t < e.length; t++)
+    e[t]();
+}
+const bf = typeof requestIdleCallback > "u" ? (e) => setTimeout(e, 1) : requestIdleCallback;
+let lo = [], uo = [];
+function Xl() {
+  var e = lo;
+  lo = [], ao(e);
+}
+function Fl() {
+  var e = uo;
+  uo = [], ao(e);
+}
+function ko(e) {
+  lo.length === 0 && queueMicrotask(Xl), lo.push(e);
+}
+function Cf(e) {
+  uo.length === 0 && bf(Fl), uo.push(e);
+}
+function Ta() {
+  lo.length > 0 && Xl(), uo.length > 0 && Fl();
+}
+function Wl(e) {
+  return e === this.v;
+}
+function Ws(e, t) {
+  return e != e ? t == t : e !== t || e !== null && typeof e == "object" || typeof e == "function";
+}
+function Ks(e) {
+  return !Ws(e, this.v);
+}
+function kf(e) {
+  throw new Error("https://svelte.dev/e/effect_in_teardown");
+}
+function $f() {
+  throw new Error("https://svelte.dev/e/effect_in_unowned_derived");
+}
+function Ef(e) {
+  throw new Error("https://svelte.dev/e/effect_orphan");
+}
+function Sf() {
+  throw new Error("https://svelte.dev/e/effect_update_depth_exceeded");
+}
+function Pf() {
+  throw new Error("https://svelte.dev/e/hydration_failed");
+}
+function Nf(e) {
+  throw new Error("https://svelte.dev/e/props_invalid_value");
+}
+function Mf() {
+  throw new Error("https://svelte.dev/e/state_descriptors_fixed");
+}
+function Tf() {
+  throw new Error("https://svelte.dev/e/state_prototype_fixed");
+}
+function Hf() {
+  throw new Error("https://svelte.dev/e/state_unsafe_local_read");
+}
+function Vf() {
+  throw new Error("https://svelte.dev/e/state_unsafe_mutation");
+}
+function Mt(e, t) {
+  var n = {
+    f: 0,
+    // TODO ideally we could skip this altogether, but it causes type errors
+    v: e,
+    reactions: null,
+    equals: Wl,
+    rv: 0,
+    wv: 0
+  };
+  return n;
+}
+function Un(e) {
+  return /* @__PURE__ */ Kl(Mt(e));
+}
+// @__NO_SIDE_EFFECTS__
+function $o(e, t = !1) {
+  var r;
+  const n = Mt(e);
+  return t || (n.equals = Ks), Br && Ze !== null && Ze.l !== null && ((r = Ze.l).s ?? (r.s = [])).push(n), n;
+}
+function re(e, t = !1) {
+  return /* @__PURE__ */ Kl(/* @__PURE__ */ $o(e, t));
+}
+// @__NO_SIDE_EFFECTS__
+function Kl(e) {
+  return je !== null && !en && je.f & nn && (vn === null ? Lf([e]) : vn.push(e)), e;
+}
+function U(e, t) {
+  return je !== null && !en && Di() && je.f & (nn | Ys) && // If the source was created locally within the current derived, then
+  // we allow the mutation.
+  (vn === null || !vn.includes(e)) && Vf(), gs(e, t);
+}
+function gs(e, t) {
+  return e.equals(t) || (e.v, e.v = t, e.wv = tu(), ql(e, In), Di() && qe !== null && qe.f & mt && !(qe.f & (On | Yr)) && (En === null ? Of([e]) : En.push(e))), t;
+}
+function Ha(e, t = 1) {
+  var n = h(e), r = t === 1 ? n++ : n--;
+  return U(e, n), r;
+}
+function ql(e, t) {
+  var n = e.reactions;
+  if (n !== null)
+    for (var r = Di(), o = n.length, i = 0; i < o; i++) {
+      var s = n[i], a = s.f;
+      a & In || !r && s === qe || (rn(s, t), a & (mt | qt) && (a & nn ? ql(
+        /** @type {Derived} */
+        s,
+        gr
+      ) : Hi(
+        /** @type {Effect} */
+        s
+      )));
+    }
+}
+// @__NO_SIDE_EFFECTS__
+function Me(e) {
+  var t = nn | In, n = je !== null && je.f & nn ? (
+    /** @type {Derived} */
+    je
+  ) : null;
+  return qe === null || n !== null && n.f & qt ? t |= qt : qe.f |= Yl, {
+    ctx: Ze,
+    deps: null,
+    effects: null,
+    equals: Wl,
+    f: t,
+    fn: e,
+    reactions: null,
+    rv: 0,
+    v: (
+      /** @type {V} */
+      null
+    ),
+    wv: 0,
+    parent: n ?? qe
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function pe(e) {
+  const t = /* @__PURE__ */ Me(e);
+  return t.equals = Ks, t;
+}
+function Gl(e) {
+  var t = e.effects;
+  if (t !== null) {
+    e.effects = null;
+    for (var n = 0; n < t.length; n += 1)
+      Gt(
+        /** @type {Effect} */
+        t[n]
+      );
+  }
+}
+function Df(e) {
+  for (var t = e.parent; t !== null; ) {
+    if (!(t.f & nn))
+      return (
+        /** @type {Effect} */
+        t
+      );
+    t = t.parent;
+  }
+  return null;
+}
+function Af(e) {
+  var t, n = qe;
+  Jn(Df(e));
+  try {
+    Gl(e), t = ru(e);
+  } finally {
+    Jn(n);
+  }
+  return t;
+}
+function Ul(e) {
+  var t = Af(e), n = (Xn || e.f & qt) && e.deps !== null ? gr : mt;
+  rn(e, n), e.equals(t) || (e.v = t, e.wv = tu());
+}
+function Ni(e) {
+  console.warn("https://svelte.dev/e/hydration_mismatch");
+}
+let Pe = !1;
+function It(e) {
+  Pe = e;
+}
+let De;
+function Ct(e) {
+  if (e === null)
+    throw Ni(), _r;
+  return De = e;
+}
+function yn() {
+  return Ct(
+    /** @type {TemplateNode} */
+    /* @__PURE__ */ xn(De)
+  );
+}
+function Z(e) {
+  if (Pe) {
+    if (/* @__PURE__ */ xn(De) !== null)
+      throw Ni(), _r;
+    De = e;
+  }
+}
+function Se(e = 1) {
+  if (Pe) {
+    for (var t = e, n = De; t--; )
+      n = /** @type {TemplateNode} */
+      /* @__PURE__ */ xn(n);
+    De = n;
+  }
+}
+function hs() {
+  for (var e = 0, t = De; ; ) {
+    if (t.nodeType === 8) {
+      var n = (
+        /** @type {Comment} */
+        t.data
+      );
+      if (n === Bs) {
+        if (e === 0) return t;
+        e -= 1;
+      } else (n === zs || n === Rs) && (e += 1);
+    }
+    var r = (
+      /** @type {TemplateNode} */
+      /* @__PURE__ */ xn(t)
+    );
+    t.remove(), t = r;
+  }
+}
+function Tt(e, t = null, n) {
+  if (typeof e != "object" || e === null || Wn in e)
+    return e;
+  const r = Fs(e);
+  if (r !== wf && r !== _f)
+    return e;
+  var o = /* @__PURE__ */ new Map(), i = Co(e), s = Mt(0);
+  i && o.set("length", Mt(
+    /** @type {any[]} */
+    e.length
+  ));
+  var a;
+  return new Proxy(
+    /** @type {any} */
+    e,
+    {
+      defineProperty(l, u, c) {
+        (!("value" in c) || c.configurable === !1 || c.enumerable === !1 || c.writable === !1) && Mf();
+        var f = o.get(u);
+        return f === void 0 ? (f = Mt(c.value), o.set(u, f)) : U(f, Tt(c.value, a)), !0;
+      },
+      deleteProperty(l, u) {
+        var c = o.get(u);
+        if (c === void 0)
+          u in l && o.set(u, Mt(Pt));
+        else {
+          if (i && typeof u == "string") {
+            var f = (
+              /** @type {Source<number>} */
+              o.get("length")
+            ), d = Number(u);
+            Number.isInteger(d) && d < f.v && U(f, d);
+          }
+          U(c, Pt), Va(s);
+        }
+        return !0;
+      },
+      get(l, u, c) {
+        var p;
+        if (u === Wn)
+          return e;
+        var f = o.get(u), d = u in l;
+        if (f === void 0 && (!d || (p = Tn(l, u)) != null && p.writable) && (f = Mt(Tt(d ? l[u] : Pt, a)), o.set(u, f)), f !== void 0) {
+          var g = h(f);
+          return g === Pt ? void 0 : g;
+        }
+        return Reflect.get(l, u, c);
+      },
+      getOwnPropertyDescriptor(l, u) {
+        var c = Reflect.getOwnPropertyDescriptor(l, u);
+        if (c && "value" in c) {
+          var f = o.get(u);
+          f && (c.value = h(f));
+        } else if (c === void 0) {
+          var d = o.get(u), g = d == null ? void 0 : d.v;
+          if (d !== void 0 && g !== Pt)
+            return {
+              enumerable: !0,
+              configurable: !0,
+              value: g,
+              writable: !0
+            };
+        }
+        return c;
+      },
+      has(l, u) {
+        var g;
+        if (u === Wn)
+          return !0;
+        var c = o.get(u), f = c !== void 0 && c.v !== Pt || Reflect.has(l, u);
+        if (c !== void 0 || qe !== null && (!f || (g = Tn(l, u)) != null && g.writable)) {
+          c === void 0 && (c = Mt(f ? Tt(l[u], a) : Pt), o.set(u, c));
+          var d = h(c);
+          if (d === Pt)
+            return !1;
+        }
+        return f;
+      },
+      set(l, u, c, f) {
+        var _;
+        var d = o.get(u), g = u in l;
+        if (i && u === "length")
+          for (var p = c; p < /** @type {Source<number>} */
+          d.v; p += 1) {
+            var x = o.get(p + "");
+            x !== void 0 ? U(x, Pt) : p in l && (x = Mt(Pt), o.set(p + "", x));
+          }
+        d === void 0 ? (!g || (_ = Tn(l, u)) != null && _.writable) && (d = Mt(void 0), U(d, Tt(c, a)), o.set(u, d)) : (g = d.v !== Pt, U(d, Tt(c, a)));
+        var C = Reflect.getOwnPropertyDescriptor(l, u);
+        if (C != null && C.set && C.set.call(f, c), !g) {
+          if (i && typeof u == "string") {
+            var $ = (
+              /** @type {Source<number>} */
+              o.get("length")
+            ), m = Number(u);
+            Number.isInteger(m) && m >= $.v && U($, m + 1);
+          }
+          Va(s);
+        }
+        return !0;
+      },
+      ownKeys(l) {
+        h(s);
+        var u = Reflect.ownKeys(l).filter((d) => {
+          var g = o.get(d);
+          return g === void 0 || g.v !== Pt;
+        });
+        for (var [c, f] of o)
+          f.v !== Pt && !(c in l) && u.push(c);
+        return u;
+      },
+      setPrototypeOf() {
+        Tf();
+      }
+    }
+  );
+}
+function Va(e, t = 1) {
+  U(e, e.v + t);
+}
+var Nt, jl, Jl, Ql;
+function vs() {
+  if (Nt === void 0) {
+    Nt = window, jl = /Firefox/.test(navigator.userAgent);
+    var e = Element.prototype, t = Node.prototype;
+    Jl = Tn(t, "firstChild").get, Ql = Tn(t, "nextSibling").get, e.__click = void 0, e.__className = void 0, e.__attributes = null, e.__styles = null, e.__e = void 0, Text.prototype.__t = void 0;
+  }
+}
+function Vn(e = "") {
+  return document.createTextNode(e);
+}
+// @__NO_SIDE_EFFECTS__
+function bt(e) {
+  return Jl.call(e);
+}
+// @__NO_SIDE_EFFECTS__
+function xn(e) {
+  return Ql.call(e);
+}
+function X(e, t) {
+  if (!Pe)
+    return /* @__PURE__ */ bt(e);
+  var n = (
+    /** @type {TemplateNode} */
+    /* @__PURE__ */ bt(De)
+  );
+  if (n === null)
+    n = De.appendChild(Vn());
+  else if (t && n.nodeType !== 3) {
+    var r = Vn();
+    return n == null || n.before(r), Ct(r), r;
+  }
+  return Ct(n), n;
+}
+function be(e, t) {
+  if (!Pe) {
+    var n = (
+      /** @type {DocumentFragment} */
+      /* @__PURE__ */ bt(
+        /** @type {Node} */
+        e
+      )
+    );
+    return n instanceof Comment && n.data === "" ? /* @__PURE__ */ xn(n) : n;
+  }
+  return De;
+}
+function z(e, t = 1, n = !1) {
+  let r = Pe ? De : e;
+  for (var o; t--; )
+    o = r, r = /** @type {TemplateNode} */
+    /* @__PURE__ */ xn(r);
+  if (!Pe)
+    return r;
+  var i = r == null ? void 0 : r.nodeType;
+  if (n && i !== 3) {
+    var s = Vn();
+    return r === null ? o == null || o.after(s) : r.before(s), Ct(s), s;
+  }
+  return Ct(r), /** @type {TemplateNode} */
+  r;
+}
+function qs(e) {
+  e.textContent = "";
+}
+let qo = !1, oi = !1, ii = null, ir = !1, Gs = !1;
+function Da(e) {
+  Gs = e;
+}
+let oo = [];
+let je = null, en = !1;
+function jn(e) {
+  je = e;
+}
+let qe = null;
+function Jn(e) {
+  qe = e;
+}
+let vn = null;
+function Lf(e) {
+  vn = e;
+}
+let _t = null, Lt = 0, En = null;
+function Of(e) {
+  En = e;
+}
+let eu = 1, si = 0, Xn = !1;
+function tu() {
+  return ++eu;
+}
+function Xr(e) {
+  var f;
+  var t = e.f;
+  if (t & In)
+    return !0;
+  if (t & gr) {
+    var n = e.deps, r = (t & qt) !== 0;
+    if (n !== null) {
+      var o, i, s = (t & ni) !== 0, a = r && qe !== null && !Xn, l = n.length;
+      if (s || a) {
+        var u = (
+          /** @type {Derived} */
+          e
+        ), c = u.parent;
+        for (o = 0; o < l; o++)
+          i = n[o], (s || !((f = i == null ? void 0 : i.reactions) != null && f.includes(u))) && (i.reactions ?? (i.reactions = [])).push(u);
+        s && (u.f ^= ni), a && c !== null && !(c.f & qt) && (u.f ^= qt);
+      }
+      for (o = 0; o < l; o++)
+        if (i = n[o], Xr(
+          /** @type {Derived} */
+          i
+        ) && Ul(
+          /** @type {Derived} */
+          i
+        ), i.wv > e.wv)
+          return !0;
+    }
+    (!r || qe !== null && !Xn) && rn(e, mt);
+  }
+  return !1;
+}
+function If(e, t) {
+  for (var n = t; n !== null; ) {
+    if (n.f & ti)
+      try {
+        n.fn(e);
+        return;
+      } catch {
+        n.f ^= ti;
+      }
+    n = n.parent;
+  }
+  throw qo = !1, e;
+}
+function zf(e) {
+  return (e.f & Pi) === 0 && (e.parent === null || (e.parent.f & ti) === 0);
+}
+function Mi(e, t, n, r) {
+  if (qo) {
+    if (n === null && (qo = !1), zf(t))
+      throw e;
+    return;
+  }
+  n !== null && (qo = !0);
+  {
+    If(e, t);
+    return;
+  }
+}
+function nu(e, t, n = !0) {
+  var r = e.reactions;
+  if (r !== null)
+    for (var o = 0; o < r.length; o++) {
+      var i = r[o];
+      i.f & nn ? nu(
+        /** @type {Derived} */
+        i,
+        t,
+        !1
+      ) : t === i && (n ? rn(i, In) : i.f & mt && rn(i, gr), Hi(
+        /** @type {Effect} */
+        i
+      ));
+    }
+}
+function ru(e) {
+  var g;
+  var t = _t, n = Lt, r = En, o = je, i = Xn, s = vn, a = Ze, l = en, u = e.f;
+  _t = /** @type {null | Value[]} */
+  null, Lt = 0, En = null, Xn = (u & qt) !== 0 && (en || !ir || je === null), je = u & (On | Yr) ? null : e, vn = null, Aa(e.ctx), en = !1, si++;
+  try {
+    var c = (
+      /** @type {Function} */
+      (0, e.fn)()
+    ), f = e.deps;
+    if (_t !== null) {
+      var d;
+      if (ai(e, Lt), f !== null && Lt > 0)
+        for (f.length = Lt + _t.length, d = 0; d < _t.length; d++)
+          f[Lt + d] = _t[d];
+      else
+        e.deps = f = _t;
+      if (!Xn)
+        for (d = Lt; d < f.length; d++)
+          ((g = f[d]).reactions ?? (g.reactions = [])).push(e);
+    } else f !== null && Lt < f.length && (ai(e, Lt), f.length = Lt);
+    if (Di() && En !== null && !en && f !== null && !(e.f & (nn | gr | In)))
+      for (d = 0; d < /** @type {Source[]} */
+      En.length; d++)
+        nu(
+          En[d],
+          /** @type {Effect} */
+          e
+        );
+    return o !== null && si++, c;
+  } finally {
+    _t = t, Lt = n, En = r, je = o, Xn = i, vn = s, Aa(a), en = l;
+  }
+}
+function Rf(e, t) {
+  let n = t.reactions;
+  if (n !== null) {
+    var r = yf.call(n, e);
+    if (r !== -1) {
+      var o = n.length - 1;
+      o === 0 ? n = t.reactions = null : (n[r] = n[o], n.pop());
+    }
+  }
+  n === null && t.f & nn && // Destroying a child effect while updating a parent effect can cause a dependency to appear
+  // to be unused, when in fact it is used by the currently-updating parent. Checking `new_deps`
+  // allows us to skip the expensive work of disconnecting and immediately reconnecting it
+  (_t === null || !_t.includes(t)) && (rn(t, gr), t.f & (qt | ni) || (t.f ^= ni), Gl(
+    /** @type {Derived} **/
+    t
+  ), ai(
+    /** @type {Derived} **/
+    t,
+    0
+  ));
+}
+function ai(e, t) {
+  var n = e.deps;
+  if (n !== null)
+    for (var r = t; r < n.length; r++)
+      Rf(e, n[r]);
+}
+function Ti(e) {
+  var t = e.f;
+  if (!(t & Pi)) {
+    rn(e, mt);
+    var n = qe, r = Ze, o = ir;
+    qe = e, ir = !0;
+    try {
+      t & Ys ? Gf(e) : lu(e), au(e);
+      var i = ru(e);
+      e.teardown = typeof i == "function" ? i : null, e.wv = eu;
+      var s = e.deps, a;
+      Ma && of && e.f & In;
+    } catch (l) {
+      Mi(l, e, n, r || e.ctx);
+    } finally {
+      ir = o, qe = n;
+    }
+  }
+}
+function Bf() {
+  try {
+    Sf();
+  } catch (e) {
+    if (ii !== null)
+      Mi(e, ii, null);
+    else
+      throw e;
+  }
+}
+function ou() {
+  var e = ir;
+  try {
+    var t = 0;
+    for (ir = !0; oo.length > 0; ) {
+      t++ > 1e3 && Bf();
+      var n = oo, r = n.length;
+      oo = [];
+      for (var o = 0; o < r; o++) {
+        var i = n[o];
+        i.f & mt || (i.f ^= mt);
+        var s = Zf(i);
+        Yf(s);
+      }
+    }
+  } finally {
+    oi = !1, ir = e, ii = null;
+  }
+}
+function Yf(e) {
+  var t = e.length;
+  if (t !== 0)
+    for (var n = 0; n < t; n++) {
+      var r = e[n];
+      if (!(r.f & (Pi | Mn)))
+        try {
+          Xr(r) && (Ti(r), r.deps === null && r.first === null && r.nodes_start === null && (r.teardown === null ? uu(r) : r.fn = null));
+        } catch (o) {
+          Mi(o, r, null, r.ctx);
+        }
+    }
+}
+function Hi(e) {
+  oi || (oi = !0, queueMicrotask(ou));
+  for (var t = ii = e; t.parent !== null; ) {
+    t = t.parent;
+    var n = t.f;
+    if (n & (Yr | On)) {
+      if (!(n & mt)) return;
+      t.f ^= mt;
+    }
+  }
+  oo.push(t);
+}
+function Zf(e) {
+  for (var t = [], n = e.first; n !== null; ) {
+    var r = n.f, o = (r & On) !== 0, i = o && (r & mt) !== 0;
+    if (!i && !(r & Mn)) {
+      if (r & Bl)
+        t.push(n);
+      else if (o)
+        n.f ^= mt;
+      else {
+        var s = je;
+        try {
+          je = n, Xr(n) && Ti(n);
+        } catch (u) {
+          Mi(u, n, null, n.ctx);
+        } finally {
+          je = s;
+        }
+      }
+      var a = n.first;
+      if (a !== null) {
+        n = a;
+        continue;
+      }
+    }
+    var l = n.parent;
+    for (n = n.next; n === null && l !== null; )
+      n = l.next, l = l.parent;
+  }
+  return t;
+}
+function y(e) {
+  var t;
+  for (Ta(); oo.length > 0; )
+    oi = !0, ou(), Ta();
+  return (
+    /** @type {T} */
+    t
+  );
+}
+function h(e) {
+  var t = e.f, n = (t & nn) !== 0;
+  if (je !== null && !en) {
+    vn !== null && vn.includes(e) && Hf();
+    var r = je.deps;
+    e.rv < si && (e.rv = si, _t === null && r !== null && r[Lt] === e ? Lt++ : _t === null ? _t = [e] : (!Xn || !_t.includes(e)) && _t.push(e));
+  } else if (n && /** @type {Derived} */
+  e.deps === null && /** @type {Derived} */
+  e.effects === null) {
+    var o = (
+      /** @type {Derived} */
+      e
+    ), i = o.parent;
+    i !== null && !(i.f & qt) && (o.f ^= qt);
+  }
+  return n && (o = /** @type {Derived} */
+  e, Xr(o) && Ul(o)), e.v;
+}
+function wn(e) {
+  var t = en;
+  try {
+    return en = !0, e();
+  } finally {
+    en = t;
+  }
+}
+const Xf = -7169;
+function rn(e, t) {
+  e.f = e.f & Xf | t;
+}
+function j(e) {
+  if (!(typeof e != "object" || !e || e instanceof EventTarget)) {
+    if (Wn in e)
+      ps(e);
+    else if (!Array.isArray(e))
+      for (let t in e) {
+        const n = e[t];
+        typeof n == "object" && n && Wn in n && ps(n);
+      }
+  }
+}
+function ps(e, t = /* @__PURE__ */ new Set()) {
+  if (typeof e == "object" && e !== null && // We don't want to traverse DOM elements
+  !(e instanceof EventTarget) && !t.has(e)) {
+    t.add(e), e instanceof Date && e.getTime();
+    for (let r in e)
+      try {
+        ps(e[r], t);
+      } catch {
+      }
+    const n = Fs(e);
+    if (n !== Object.prototype && n !== Array.prototype && n !== Map.prototype && n !== Set.prototype && n !== Date.prototype) {
+      const r = Zl(n);
+      for (let o in r) {
+        const i = r[o].get;
+        if (i)
+          try {
+            i.call(e);
+          } catch {
+          }
+      }
+    }
+  }
+}
+function iu(e) {
+  qe === null && je === null && Ef(), je !== null && je.f & qt && qe === null && $f(), Gs && kf();
+}
+function Ff(e, t) {
+  var n = t.last;
+  n === null ? t.last = t.first = e : (n.next = e, e.prev = n, t.last = e);
+}
+function hr(e, t, n, r = !0) {
+  var o = (e & Yr) !== 0, i = qe, s = {
+    ctx: Ze,
+    deps: null,
+    nodes_start: null,
+    nodes_end: null,
+    f: e | In,
+    first: null,
+    fn: t,
+    last: null,
+    next: null,
+    parent: o ? null : i,
+    prev: null,
+    teardown: null,
+    transitions: null,
+    wv: 0
+  };
+  if (n)
+    try {
+      Ti(s), s.f |= hf;
+    } catch (u) {
+      throw Gt(s), u;
+    }
+  else t !== null && Hi(s);
+  var a = n && s.deps === null && s.first === null && s.nodes_start === null && s.teardown === null && (s.f & (Yl | ti)) === 0;
+  if (!a && !o && r && (i !== null && Ff(s, i), je !== null && je.f & nn)) {
+    var l = (
+      /** @type {Derived} */
+      je
+    );
+    (l.effects ?? (l.effects = [])).push(s);
+  }
+  return s;
+}
+function su(e) {
+  const t = hr(Si, null, !1);
+  return rn(t, mt), t.teardown = e, t;
+}
+function Nr(e) {
+  iu();
+  var t = qe !== null && (qe.f & On) !== 0 && Ze !== null && !Ze.m;
+  if (t) {
+    var n = (
+      /** @type {ComponentContext} */
+      Ze
+    );
+    (n.e ?? (n.e = [])).push({
+      fn: e,
+      effect: qe,
+      reaction: je
+    });
+  } else {
+    var r = Ot(e);
+    return r;
+  }
+}
+function Wf(e) {
+  return iu(), Fr(e);
+}
+function Kf(e) {
+  const t = hr(Yr, e, !0);
+  return () => {
+    Gt(t);
+  };
+}
+function qf(e) {
+  const t = hr(Yr, e, !0);
+  return (n = {}) => new Promise((r) => {
+    n.outro ? Mr(t, () => {
+      Gt(t), r(void 0);
+    }) : (Gt(t), r(void 0));
+  });
+}
+function Ot(e) {
+  return hr(Bl, e, !1);
+}
+function he(e, t) {
+  var n = (
+    /** @type {ComponentContextLegacy} */
+    Ze
+  ), r = { effect: null, ran: !1 };
+  n.l.r1.push(r), r.effect = Fr(() => {
+    e(), !r.ran && (r.ran = !0, U(n.l.r2, !0), wn(t));
+  });
+}
+function gt() {
+  var e = (
+    /** @type {ComponentContextLegacy} */
+    Ze
+  );
+  Fr(() => {
+    if (h(e.l.r2)) {
+      for (var t of e.l.r1) {
+        var n = t.effect;
+        n.f & mt && rn(n, gr), Xr(n) && Ti(n), t.ran = !1;
+      }
+      e.l.r2.v = !1;
+    }
+  });
+}
+function Fr(e) {
+  return hr(Si, e, !0);
+}
+function Ee(e, t = [], n = Me) {
+  const r = t.map(n);
+  return vr(() => e(...r.map(h)));
+}
+function vr(e, t = 0) {
+  return hr(Si | Ys | t, e, !0);
+}
+function Dn(e, t = !0) {
+  return hr(Si | On, e, !0, t);
+}
+function au(e) {
+  var t = e.teardown;
+  if (t !== null) {
+    const n = Gs, r = je;
+    Da(!0), jn(null);
+    try {
+      t.call(null);
+    } finally {
+      Da(n), jn(r);
+    }
+  }
+}
+function lu(e, t = !1) {
+  var n = e.first;
+  for (e.first = e.last = null; n !== null; ) {
+    var r = n.next;
+    Gt(n, t), n = r;
+  }
+}
+function Gf(e) {
+  for (var t = e.first; t !== null; ) {
+    var n = t.next;
+    t.f & On || Gt(t), t = n;
+  }
+}
+function Gt(e, t = !0) {
+  var n = !1;
+  if ((t || e.f & pf) && e.nodes_start !== null) {
+    for (var r = e.nodes_start, o = e.nodes_end; r !== null; ) {
+      var i = r === o ? null : (
+        /** @type {TemplateNode} */
+        /* @__PURE__ */ xn(r)
+      );
+      r.remove(), r = i;
+    }
+    n = !0;
+  }
+  lu(e, t && !n), ai(e, 0), rn(e, Pi);
+  var s = e.transitions;
+  if (s !== null)
+    for (const l of s)
+      l.stop();
+  au(e);
+  var a = e.parent;
+  a !== null && a.first !== null && uu(e), e.next = e.prev = e.teardown = e.ctx = e.deps = e.fn = e.nodes_start = e.nodes_end = null;
+}
+function uu(e) {
+  var t = e.parent, n = e.prev, r = e.next;
+  n !== null && (n.next = r), r !== null && (r.prev = n), t !== null && (t.first === e && (t.first = r), t.last === e && (t.last = n));
+}
+function Mr(e, t) {
+  var n = [];
+  Us(e, n, !0), cu(n, () => {
+    Gt(e), t && t();
+  });
+}
+function cu(e, t) {
+  var n = e.length;
+  if (n > 0) {
+    var r = () => --n || t();
+    for (var o of e)
+      o.out(r);
+  } else
+    t();
+}
+function Us(e, t, n) {
+  if (!(e.f & Mn)) {
+    if (e.f ^= Mn, e.transitions !== null)
+      for (const s of e.transitions)
+        (s.is_global || n) && t.push(s);
+    for (var r = e.first; r !== null; ) {
+      var o = r.next, i = (r.f & Zr) !== 0 || (r.f & On) !== 0;
+      Us(r, t, i ? n : !1), r = o;
+    }
+  }
+}
+function co(e) {
+  du(e, !0);
+}
+function du(e, t) {
+  if (e.f & Mn) {
+    e.f ^= Mn, e.f & mt || (e.f ^= mt), Xr(e) && (rn(e, In), Hi(e));
+    for (var n = e.first; n !== null; ) {
+      var r = n.next, o = (n.f & Zr) !== 0 || (n.f & On) !== 0;
+      du(n, o ? t : !1), n = r;
+    }
+    if (e.transitions !== null)
+      for (const i of e.transitions)
+        (i.is_global || t) && i.in();
+  }
+}
+function Vi(e) {
+  throw new Error("https://svelte.dev/e/lifecycle_outside_component");
+}
+let Ze = null;
+function Aa(e) {
+  Ze = e;
+}
+function ar(e) {
+  return (
+    /** @type {T} */
+    js().get(e)
+  );
+}
+function Tr(e, t) {
+  return js().set(e, t), t;
+}
+function Uf(e) {
+  return js().has(e);
+}
+function de(e, t = !1, n) {
+  Ze = {
+    p: Ze,
+    c: null,
+    e: null,
+    m: !1,
+    s: e,
+    x: null,
+    l: null
+  }, Br && !t && (Ze.l = {
+    s: null,
+    u: null,
+    r1: [],
+    r2: Mt(!1)
+  });
+}
+function fe(e) {
+  const t = Ze;
+  if (t !== null) {
+    e !== void 0 && (t.x = e);
+    const s = t.e;
+    if (s !== null) {
+      var n = qe, r = je;
+      t.e = null;
+      try {
+        for (var o = 0; o < s.length; o++) {
+          var i = s[o];
+          Jn(i.effect), jn(i.reaction), Ot(i.fn);
+        }
+      } finally {
+        Jn(n), jn(r);
+      }
+    }
+    Ze = t.p, t.m = !0;
+  }
+  return e || /** @type {T} */
+  {};
+}
+function Di() {
+  return !Br || Ze !== null && Ze.l === null;
+}
+function js(e) {
+  return Ze === null && Vi(), Ze.c ?? (Ze.c = new Map(jf(Ze) || void 0));
+}
+function jf(e) {
+  let t = e.p;
+  for (; t !== null; ) {
+    const n = t.c;
+    if (n !== null)
+      return n;
+    t = t.p;
+  }
+  return null;
+}
+function Jf(e) {
+  return e.endsWith("capture") && e !== "gotpointercapture" && e !== "lostpointercapture";
+}
+const Qf = [
+  "beforeinput",
+  "click",
+  "change",
+  "dblclick",
+  "contextmenu",
+  "focusin",
+  "focusout",
+  "input",
+  "keydown",
+  "keyup",
+  "mousedown",
+  "mousemove",
+  "mouseout",
+  "mouseover",
+  "mouseup",
+  "pointerdown",
+  "pointermove",
+  "pointerout",
+  "pointerover",
+  "pointerup",
+  "touchend",
+  "touchmove",
+  "touchstart"
+];
+function e1(e) {
+  return Qf.includes(e);
+}
+const t1 = {
+  // no `class: 'className'` because we handle that separately
+  formnovalidate: "formNoValidate",
+  ismap: "isMap",
+  nomodule: "noModule",
+  playsinline: "playsInline",
+  readonly: "readOnly",
+  defaultvalue: "defaultValue",
+  defaultchecked: "defaultChecked",
+  srcobject: "srcObject",
+  novalidate: "noValidate",
+  allowfullscreen: "allowFullscreen",
+  disablepictureinpicture: "disablePictureInPicture",
+  disableremoteplayback: "disableRemotePlayback"
+};
+function n1(e) {
+  return e = e.toLowerCase(), t1[e] ?? e;
+}
+const r1 = ["touchstart", "touchmove"];
+function o1(e) {
+  return r1.includes(e);
+}
+const i1 = (
+  /** @type {const} */
+  ["textarea", "script", "style", "title"]
+);
+function s1(e) {
+  return i1.includes(
+    /** @type {RAW_TEXT_ELEMENTS[number]} */
+    e
+  );
+}
+function a1(e, t) {
+  if (t) {
+    const n = document.body;
+    e.autofocus = !0, ko(() => {
+      document.activeElement === n && e.focus();
+    });
+  }
+}
+function l1(e) {
+  Pe && /* @__PURE__ */ bt(e) !== null && qs(e);
+}
+let La = !1;
+function u1() {
+  La || (La = !0, document.addEventListener(
+    "reset",
+    (e) => {
+      Promise.resolve().then(() => {
+        var t;
+        if (!e.defaultPrevented)
+          for (
+            const n of
+            /**@type {HTMLFormElement} */
+            e.target.elements
+          )
+            (t = n.__on_r) == null || t.call(n);
+      });
+    },
+    // In the capture phase to guarantee we get noticed of it (no possiblity of stopPropagation)
+    { capture: !0 }
+  ));
+}
+function c1(e) {
+  var t = je, n = qe;
+  jn(null), Jn(null);
+  try {
+    return e();
+  } finally {
+    jn(t), Jn(n);
+  }
+}
+const fu = /* @__PURE__ */ new Set(), ms = /* @__PURE__ */ new Set();
+function gu(e, t, n, r = {}) {
+  function o(i) {
+    if (r.capture || eo.call(t, i), !i.cancelBubble)
+      return c1(() => n == null ? void 0 : n.call(this, i));
+  }
+  return e.startsWith("pointer") || e.startsWith("touch") || e === "wheel" ? ko(() => {
+    t.addEventListener(e, o, r);
+  }) : t.addEventListener(e, o, r), o;
+}
+function Ye(e, t, n, r, o) {
+  var i = { capture: r, passive: o }, s = gu(e, t, n, i);
+  (t === document.body || t === window || t === document) && su(() => {
+    t.removeEventListener(e, s, i);
+  });
+}
+function Ai(e) {
+  for (var t = 0; t < e.length; t++)
+    fu.add(e[t]);
+  for (var n of ms)
+    n(e);
+}
+function eo(e) {
+  var m;
+  var t = this, n = (
+    /** @type {Node} */
+    t.ownerDocument
+  ), r = e.type, o = ((m = e.composedPath) == null ? void 0 : m.call(e)) || [], i = (
+    /** @type {null | Element} */
+    o[0] || e.target
+  ), s = 0, a = e.__root;
+  if (a) {
+    var l = o.indexOf(a);
+    if (l !== -1 && (t === document || t === /** @type {any} */
+    window)) {
+      e.__root = t;
+      return;
+    }
+    var u = o.indexOf(t);
+    if (u === -1)
+      return;
+    l <= u && (s = l);
+  }
+  if (i = /** @type {Element} */
+  o[s] || e.target, i !== t) {
+    so(e, "currentTarget", {
+      configurable: !0,
+      get() {
+        return i || n;
+      }
+    });
+    var c = je, f = qe;
+    jn(null), Jn(null);
+    try {
+      for (var d, g = []; i !== null; ) {
+        var p = i.assignedSlot || i.parentNode || /** @type {any} */
+        i.host || null;
+        try {
+          var x = i["__" + r];
+          if (x !== void 0 && (!/** @type {any} */
+          i.disabled || // DOM could've been updated already by the time this is reached, so we check this as well
+          // -> the target could not have been disabled because it emits the event in the first place
+          e.target === i))
+            if (Co(x)) {
+              var [C, ...$] = x;
+              C.apply(i, [e, ...$]);
+            } else
+              x.call(i, e);
+        } catch (_) {
+          d ? g.push(_) : d = _;
+        }
+        if (e.cancelBubble || p === t || p === null)
+          break;
+        i = p;
+      }
+      if (d) {
+        for (let _ of g)
+          queueMicrotask(() => {
+            throw _;
+          });
+        throw d;
+      }
+    } finally {
+      e.__root = t, delete e.currentTarget, jn(c), Jn(f);
+    }
+  }
+}
+function Js(e) {
+  var t = document.createElement("template");
+  return t.innerHTML = e, t.content;
+}
+function Vt(e, t) {
+  var n = (
+    /** @type {Effect} */
+    qe
+  );
+  n.nodes_start === null && (n.nodes_start = e, n.nodes_end = t);
+}
+// @__NO_SIDE_EFFECTS__
+function ne(e, t) {
+  var n = (t & zl) !== 0, r = (t & gf) !== 0, o, i = !e.startsWith("<!>");
+  return () => {
+    if (Pe)
+      return Vt(De, null), De;
+    o === void 0 && (o = Js(i ? e : "<!>" + e), n || (o = /** @type {Node} */
+    /* @__PURE__ */ bt(o)));
+    var s = (
+      /** @type {TemplateNode} */
+      r || jl ? document.importNode(o, !0) : o.cloneNode(!0)
+    );
+    if (n) {
+      var a = (
+        /** @type {TemplateNode} */
+        /* @__PURE__ */ bt(s)
+      ), l = (
+        /** @type {TemplateNode} */
+        s.lastChild
+      );
+      Vt(a, l);
+    } else
+      Vt(s, s);
+    return s;
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function _e(e, t, n = "svg") {
+  var r = !e.startsWith("<!>"), o = (t & zl) !== 0, i = `<${n}>${r ? e : "<!>" + e}</${n}>`, s;
+  return () => {
+    if (Pe)
+      return Vt(De, null), De;
+    if (!s) {
+      var a = (
+        /** @type {DocumentFragment} */
+        Js(i)
+      ), l = (
+        /** @type {Element} */
+        /* @__PURE__ */ bt(a)
+      );
+      if (o)
+        for (s = document.createDocumentFragment(); /* @__PURE__ */ bt(l); )
+          s.appendChild(
+            /** @type {Node} */
+            /* @__PURE__ */ bt(l)
+          );
+      else
+        s = /** @type {Element} */
+        /* @__PURE__ */ bt(l);
+    }
+    var u = (
+      /** @type {TemplateNode} */
+      s.cloneNode(!0)
+    );
+    if (o) {
+      var c = (
+        /** @type {TemplateNode} */
+        /* @__PURE__ */ bt(u)
+      ), f = (
+        /** @type {TemplateNode} */
+        u.lastChild
+      );
+      Vt(c, f);
+    } else
+      Vt(u, u);
+    return u;
+  };
+}
+function Ie(e = "") {
+  if (!Pe) {
+    var t = Vn(e + "");
+    return Vt(t, t), t;
+  }
+  var n = De;
+  return n.nodeType !== 3 && (n.before(n = Vn()), Ct(n)), Vt(n, n), n;
+}
+function et() {
+  if (Pe)
+    return Vt(De, null), De;
+  var e = document.createDocumentFragment(), t = document.createComment(""), n = Vn();
+  return e.append(t, n), Vt(t, n), e;
+}
+function L(e, t) {
+  if (Pe) {
+    qe.nodes_end = De, yn();
+    return;
+  }
+  e !== null && e.before(
+    /** @type {Node} */
+    t
+  );
+}
+function Rt(e, t) {
+  var n = t == null ? "" : typeof t == "object" ? t + "" : t;
+  n !== (e.__t ?? (e.__t = e.nodeValue)) && (e.__t = n, e.nodeValue = n + "");
+}
+function hu(e, t) {
+  return vu(e, t);
+}
+function d1(e, t) {
+  vs(), t.intro = t.intro ?? !1;
+  const n = t.target, r = Pe, o = De;
+  try {
+    for (var i = (
+      /** @type {TemplateNode} */
+      /* @__PURE__ */ bt(n)
+    ); i && (i.nodeType !== 8 || /** @type {Comment} */
+    i.data !== zs); )
+      i = /** @type {TemplateNode} */
+      /* @__PURE__ */ xn(i);
+    if (!i)
+      throw _r;
+    It(!0), Ct(
+      /** @type {Comment} */
+      i
+    ), yn();
+    const s = vu(e, { ...t, anchor: i });
+    if (De === null || De.nodeType !== 8 || /** @type {Comment} */
+    De.data !== Bs)
+      throw Ni(), _r;
+    return It(!1), /**  @type {Exports} */
+    s;
+  } catch (s) {
+    if (s === _r)
+      return t.recover === !1 && Pf(), vs(), qs(n), It(!1), hu(e, t);
+    throw s;
+  } finally {
+    It(r), Ct(o);
+  }
+}
+const mr = /* @__PURE__ */ new Map();
+function vu(e, { target: t, anchor: n, props: r = {}, events: o, context: i, intro: s = !0 }) {
+  vs();
+  var a = /* @__PURE__ */ new Set(), l = (f) => {
+    for (var d = 0; d < f.length; d++) {
+      var g = f[d];
+      if (!a.has(g)) {
+        a.add(g);
+        var p = o1(g);
+        t.addEventListener(g, eo, { passive: p });
+        var x = mr.get(g);
+        x === void 0 ? (document.addEventListener(g, eo, { passive: p }), mr.set(g, 1)) : mr.set(g, x + 1);
+      }
+    }
+  };
+  l(Xs(fu)), ms.add(l);
+  var u = void 0, c = qf(() => {
+    var f = n ?? t.appendChild(Vn());
+    return Dn(() => {
+      if (i) {
+        de({});
+        var d = (
+          /** @type {ComponentContext} */
+          Ze
+        );
+        d.c = i;
+      }
+      o && (r.$$events = o), Pe && Vt(
+        /** @type {TemplateNode} */
+        f,
+        null
+      ), u = e(f, r) || {}, Pe && (qe.nodes_end = De), i && fe();
+    }), () => {
+      var p;
+      for (var d of a) {
+        t.removeEventListener(d, eo);
+        var g = (
+          /** @type {number} */
+          mr.get(d)
+        );
+        --g === 0 ? (document.removeEventListener(d, eo), mr.delete(d)) : mr.set(d, g);
+      }
+      ms.delete(l), f !== n && ((p = f.parentNode) == null || p.removeChild(f));
+    };
+  });
+  return ys.set(u, c), u;
+}
+let ys = /* @__PURE__ */ new WeakMap();
+function f1(e, t) {
+  const n = ys.get(e);
+  return n ? (ys.delete(e), n(t)) : Promise.resolve();
+}
+function ke(e, t, [n, r] = [0, 0]) {
+  Pe && n === 0 && yn();
+  var o = e, i = null, s = null, a = Pt, l = n > 0 ? Zr : 0, u = !1;
+  const c = (d, g = !0) => {
+    u = !0, f(g, d);
+  }, f = (d, g) => {
+    if (a === (a = d)) return;
+    let p = !1;
+    if (Pe && r !== -1) {
+      if (n === 0) {
+        const C = (
+          /** @type {Comment} */
+          o.data
+        );
+        C === zs ? r = 0 : C === Rs ? r = 1 / 0 : (r = parseInt(C.substring(1)), r !== r && (r = a ? 1 / 0 : -1));
+      }
+      const x = r > n;
+      !!a === x && (o = hs(), Ct(o), It(!1), p = !0, r = -1);
+    }
+    a ? (i ? co(i) : g && (i = Dn(() => g(o))), s && Mr(s, () => {
+      s = null;
+    })) : (s ? co(s) : g && (s = Dn(() => g(o, [n + 1, r]))), i && Mr(i, () => {
+      i = null;
+    })), p && It(!0);
+  };
+  vr(() => {
+    u = !1, t(c), u || f(null, null);
+  }, l), Pe && (o = De);
+}
+function Li(e, t) {
+  return t;
+}
+function g1(e, t, n, r) {
+  for (var o = [], i = t.length, s = 0; s < i; s++)
+    Us(t[s].e, o, !0);
+  var a = i > 0 && o.length === 0 && n !== null;
+  if (a) {
+    var l = (
+      /** @type {Element} */
+      /** @type {Element} */
+      n.parentNode
+    );
+    qs(l), l.append(
+      /** @type {Element} */
+      n
+    ), r.clear(), Bn(e, t[0].prev, t[i - 1].next);
+  }
+  cu(o, () => {
+    for (var u = 0; u < i; u++) {
+      var c = t[u];
+      a || (r.delete(c.k), Bn(e, c.prev, c.next)), Gt(c.e, !a);
+    }
+  });
+}
+function Yt(e, t, n, r, o, i = null) {
+  var s = e, a = { flags: t, items: /* @__PURE__ */ new Map(), first: null }, l = (t & Ol) !== 0;
+  if (l) {
+    var u = (
+      /** @type {Element} */
+      e
+    );
+    s = Pe ? Ct(
+      /** @type {Comment | Text} */
+      /* @__PURE__ */ bt(u)
+    ) : u.appendChild(Vn());
+  }
+  Pe && yn();
+  var c = null, f = !1, d = /* @__PURE__ */ pe(() => {
+    var g = n();
+    return Co(g) ? g : g == null ? [] : Xs(g);
+  });
+  vr(() => {
+    var g = h(d), p = g.length;
+    if (f && p === 0)
+      return;
+    f = p === 0;
+    let x = !1;
+    if (Pe) {
+      var C = (
+        /** @type {Comment} */
+        s.data === Rs
+      );
+      C !== (p === 0) && (s = hs(), Ct(s), It(!1), x = !0);
+    }
+    if (Pe) {
+      for (var $ = null, m, _ = 0; _ < p; _++) {
+        if (De.nodeType === 8 && /** @type {Comment} */
+        De.data === Bs) {
+          s = /** @type {Comment} */
+          De, x = !0, It(!1);
+          break;
+        }
+        var v = g[_], b = r(v, _);
+        m = pu(
+          De,
+          a,
+          $,
+          null,
+          v,
+          b,
+          _,
+          o,
+          t,
+          n
+        ), a.items.set(b, m), $ = m;
+      }
+      p > 0 && Ct(hs());
+    }
+    Pe || h1(g, a, s, o, t, r, n), i !== null && (p === 0 ? c ? co(c) : c = Dn(() => i(s)) : c !== null && Mr(c, () => {
+      c = null;
+    })), x && It(!0), h(d);
+  }), Pe && (s = De);
+}
+function h1(e, t, n, r, o, i, s) {
+  var S, T, k, P;
+  var a = (o & af) !== 0, l = (o & (Os | Is)) !== 0, u = e.length, c = t.items, f = t.first, d = f, g, p = null, x, C = [], $ = [], m, _, v, b;
+  if (a)
+    for (b = 0; b < u; b += 1)
+      m = e[b], _ = i(m, b), v = c.get(_), v !== void 0 && ((S = v.a) == null || S.measure(), (x ?? (x = /* @__PURE__ */ new Set())).add(v));
+  for (b = 0; b < u; b += 1) {
+    if (m = e[b], _ = i(m, b), v = c.get(_), v === void 0) {
+      var N = d ? (
+        /** @type {TemplateNode} */
+        d.e.nodes_start
+      ) : n;
+      p = pu(
+        N,
+        t,
+        p,
+        p === null ? t.first : p.next,
+        m,
+        _,
+        b,
+        r,
+        o,
+        s
+      ), c.set(_, p), C = [], $ = [], d = p.next;
+      continue;
+    }
+    if (l && v1(v, m, b, o), v.e.f & Mn && (co(v.e), a && ((T = v.a) == null || T.unfix(), (x ?? (x = /* @__PURE__ */ new Set())).delete(v))), v !== d) {
+      if (g !== void 0 && g.has(v)) {
+        if (C.length < $.length) {
+          var E = $[0], M;
+          p = E.prev;
+          var D = C[0], V = C[C.length - 1];
+          for (M = 0; M < C.length; M += 1)
+            Oa(C[M], E, n);
+          for (M = 0; M < $.length; M += 1)
+            g.delete($[M]);
+          Bn(t, D.prev, V.next), Bn(t, p, D), Bn(t, V, E), d = E, p = V, b -= 1, C = [], $ = [];
+        } else
+          g.delete(v), Oa(v, d, n), Bn(t, v.prev, v.next), Bn(t, v, p === null ? t.first : p.next), Bn(t, p, v), p = v;
+        continue;
+      }
+      for (C = [], $ = []; d !== null && d.k !== _; )
+        d.e.f & Mn || (g ?? (g = /* @__PURE__ */ new Set())).add(d), $.push(d), d = d.next;
+      if (d === null)
+        continue;
+      v = d;
+    }
+    C.push(v), p = v, d = v.next;
+  }
+  if (d !== null || g !== void 0) {
+    for (var A = g === void 0 ? [] : Xs(g); d !== null; )
+      d.e.f & Mn || A.push(d), d = d.next;
+    var O = A.length;
+    if (O > 0) {
+      var R = o & Ol && u === 0 ? n : null;
+      if (a) {
+        for (b = 0; b < O; b += 1)
+          (k = A[b].a) == null || k.measure();
+        for (b = 0; b < O; b += 1)
+          (P = A[b].a) == null || P.fix();
+      }
+      g1(t, A, R, c);
+    }
+  }
+  a && ko(() => {
+    var H;
+    if (x !== void 0)
+      for (v of x)
+        (H = v.a) == null || H.apply();
+  }), qe.first = t.first && t.first.e, qe.last = p && p.e;
+}
+function v1(e, t, n, r) {
+  r & Os && gs(e.v, t), r & Is ? gs(
+    /** @type {Value<number>} */
+    e.i,
+    n
+  ) : e.i = n;
+}
+function pu(e, t, n, r, o, i, s, a, l, u) {
+  var c = (l & Os) !== 0, f = (l & lf) === 0, d = c ? f ? /* @__PURE__ */ $o(o) : Mt(o) : o, g = l & Is ? Mt(s) : s, p = {
+    i: g,
+    v: d,
+    k: i,
+    a: null,
+    // @ts-expect-error
+    e: null,
+    prev: n,
+    next: r
+  };
+  try {
+    return p.e = Dn(() => a(e, d, g, u), Pe), p.e.prev = n && n.e, p.e.next = r && r.e, n === null ? t.first = p : (n.next = p, n.e.next = p.e), r !== null && (r.prev = p, r.e.prev = p.e), p;
+  } finally {
+  }
+}
+function Oa(e, t, n) {
+  for (var r = e.next ? (
+    /** @type {TemplateNode} */
+    e.next.e.nodes_start
+  ) : n, o = t ? (
+    /** @type {TemplateNode} */
+    t.e.nodes_start
+  ) : n, i = (
+    /** @type {TemplateNode} */
+    e.e.nodes_start
+  ); i !== r; ) {
+    var s = (
+      /** @type {TemplateNode} */
+      /* @__PURE__ */ xn(i)
+    );
+    o.before(i), i = s;
+  }
+}
+function Bn(e, t, n) {
+  t === null ? e.first = n : (t.next = n, t.e.next = n && n.e), n !== null && (n.prev = t, n.e.prev = t && t.e);
+}
+function mu(e, t, n, r, o) {
+  var i = e, s = "", a;
+  vr(() => {
+    if (s === (s = t() ?? "")) {
+      Pe && yn();
+      return;
+    }
+    a !== void 0 && (Gt(a), a = void 0), s !== "" && (a = Dn(() => {
+      if (Pe) {
+        De.data;
+        for (var l = yn(), u = l; l !== null && (l.nodeType !== 8 || /** @type {Comment} */
+        l.data !== ""); )
+          u = l, l = /** @type {TemplateNode} */
+          /* @__PURE__ */ xn(l);
+        if (l === null)
+          throw Ni(), _r;
+        Vt(De, u), i = Ct(l);
+        return;
+      }
+      var c = s + "", f = Js(c);
+      Vt(
+        /** @type {TemplateNode} */
+        /* @__PURE__ */ bt(f),
+        /** @type {TemplateNode} */
+        f.lastChild
+      ), i.before(f);
+    }));
+  });
+}
+function pt(e, t, n, r, o) {
+  var a;
+  Pe && yn();
+  var i = (a = t.$$slots) == null ? void 0 : a[n], s = !1;
+  i === !0 && (i = t[n === "default" ? "children" : n], s = !0), i === void 0 || i(e, s ? () => r : r);
+}
+function p1(e) {
+  const t = {};
+  e.children && (t.default = !0);
+  for (const n in e.$$slots)
+    t[n] = !0;
+  return t;
+}
+function lr(e, t, ...n) {
+  var r = e, o = dt, i;
+  vr(() => {
+    o !== (o = t()) && (i && (Gt(i), i = null), i = Dn(() => (
+      /** @type {SnippetFn} */
+      o(r, ...n)
+    )));
+  }, Zr), Pe && (r = De);
+}
+function yu(e, t, n) {
+  Pe && yn();
+  var r = e, o, i;
+  vr(() => {
+    o !== (o = t()) && (i && (Mr(i), i = null), o && (i = Dn(() => n(r, o))));
+  }, Zr), Pe && (r = De);
+}
+function m1(e, t, n, r, o, i) {
+  let s = Pe;
+  Pe && yn();
+  var a, l, u = null;
+  Pe && De.nodeType === 1 && (u = /** @type {Element} */
+  De, yn());
+  var c = (
+    /** @type {TemplateNode} */
+    Pe ? De : e
+  ), f;
+  vr(() => {
+    const d = t() || null;
+    var g = d === "svg" ? Rl : null;
+    d !== a && (f && (d === null ? Mr(f, () => {
+      f = null, l = null;
+    }) : d === l ? co(f) : Gt(f)), d && d !== l && (f = Dn(() => {
+      if (u = Pe ? (
+        /** @type {Element} */
+        u
+      ) : g ? document.createElementNS(g, d) : document.createElement(d), Vt(u, u), r) {
+        Pe && s1(d) && u.append(document.createComment(""));
+        var p = (
+          /** @type {TemplateNode} */
+          Pe ? /* @__PURE__ */ bt(u) : u.appendChild(Vn())
+        );
+        Pe && (p === null ? It(!1) : Ct(p)), r(u, p);
+      }
+      qe.nodes_end = u, c.before(u);
+    })), a = d, a && (l = a));
+  }, Zr), s && (It(!0), Ct(c));
+}
+function Je(e, t) {
+  ko(() => {
+    var n = e.getRootNode(), r = (
+      /** @type {ShadowRoot} */
+      n.host ? (
+        /** @type {ShadowRoot} */
+        n
+      ) : (
+        /** @type {Document} */
+        n.head ?? /** @type {Document} */
+        n.ownerDocument.head
+      )
+    );
+    if (!r.querySelector("#" + t.hash)) {
+      const o = document.createElement("style");
+      o.id = t.hash, o.textContent = t.code, r.appendChild(o);
+    }
+  });
+}
+function vt(e, t, n) {
+  Ot(() => {
+    var r = wn(() => t(e, n == null ? void 0 : n()) || {});
+    if (n && (r != null && r.update)) {
+      var o = !1, i = (
+        /** @type {any} */
+        {}
+      );
+      Fr(() => {
+        var s = n();
+        j(s), o && Ws(i, s) && (i = s, r.update(s));
+      }), o = !0;
+    }
+    if (r != null && r.destroy)
+      return () => (
+        /** @type {Function} */
+        r.destroy()
+      );
+  });
+}
+function wu(e) {
+  var t, n, r = "";
+  if (typeof e == "string" || typeof e == "number") r += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (n = wu(e[t])) && (r && (r += " "), r += n);
+  } else for (n in e) e[n] && (r && (r += " "), r += n);
+  return r;
+}
+function y1() {
+  for (var e, t, n = 0, r = "", o = arguments.length; n < o; n++) (e = arguments[n]) && (t = wu(e)) && (r && (r += " "), r += t);
+  return r;
+}
+function bn(e) {
+  return typeof e == "object" ? y1(e) : e ?? "";
+}
+const Ia = [...` 	
+\r\f \v\uFEFF`];
+function w1(e, t, n) {
+  var r = e == null ? "" : "" + e;
+  if (t && (r = r ? r + " " + t : t), n) {
+    for (var o in n)
+      if (n[o])
+        r = r ? r + " " + o : o;
+      else if (r.length)
+        for (var i = o.length, s = 0; (s = r.indexOf(o, s)) >= 0; ) {
+          var a = s + i;
+          (s === 0 || Ia.includes(r[s - 1])) && (a === r.length || Ia.includes(r[a])) ? r = (s === 0 ? "" : r.substring(0, s)) + r.substring(a + 1) : s = a;
+        }
+  }
+  return r === "" ? null : r;
+}
+function kt(e, t, n, r, o, i) {
+  var s = e.__className;
+  if (Pe || s !== n) {
+    var a = w1(n, r, i);
+    (!Pe || a !== e.getAttribute("class")) && (a == null ? e.removeAttribute("class") : t ? e.className = a : e.setAttribute("class", a)), e.__className = n;
+  } else if (i)
+    for (var l in i) {
+      var u = !!i[l];
+      (o == null || u !== !!o[l]) && e.classList.toggle(l, u);
+    }
+  return i;
+}
+const jr = Symbol("class");
+function io(e) {
+  if (Pe) {
+    var t = !1, n = () => {
+      if (!t) {
+        if (t = !0, e.hasAttribute("value")) {
+          var r = e.value;
+          ce(e, "value", null), e.value = r;
+        }
+        if (e.hasAttribute("checked")) {
+          var o = e.checked;
+          ce(e, "checked", null), e.checked = o;
+        }
+      }
+    };
+    e.__on_r = n, Cf(n), u1();
+  }
+}
+function Qi(e, t) {
+  var n = e.__attributes ?? (e.__attributes = {});
+  n.value === (n.value = // treat null and undefined the same for the initial value
+  t ?? void 0) || // @ts-expect-error
+  // `progress` elements always need their value set when it's `0`
+  e.value === t && (t !== 0 || e.nodeName !== "PROGRESS") || (e.value = t ?? "");
+}
+function _1(e, t) {
+  t ? e.hasAttribute("selected") || e.setAttribute("selected", "") : e.removeAttribute("selected");
+}
+function ce(e, t, n, r) {
+  var o = e.__attributes ?? (e.__attributes = {});
+  Pe && (o[t] = e.getAttribute(t), t === "src" || t === "srcset" || t === "href" && e.nodeName === "LINK") || o[t] !== (o[t] = n) && (t === "style" && "__styles" in e && (e.__styles = {}), t === "loading" && (e[mf] = n), n == null ? e.removeAttribute(t) : typeof n != "string" && _u(e).includes(t) ? e[t] = n : e.setAttribute(t, n));
+}
+function on(e, t, n, r, o = !1, i = !1, s = !1) {
+  let a = Pe && i;
+  a && It(!1);
+  var l = t || {}, u = e.tagName === "OPTION";
+  for (var c in t)
+    c in n || (n[c] = null);
+  n.class ? n.class = bn(n.class) : (r || n[jr]) && (n.class = null);
+  var f = _u(e), d = (
+    /** @type {Record<string, unknown>} **/
+    e.__attributes ?? (e.__attributes = {})
+  );
+  for (const _ in n) {
+    let v = n[_];
+    if (u && _ === "value" && v == null) {
+      e.value = e.__value = "", l[_] = v;
+      continue;
+    }
+    if (_ === "class") {
+      var g = e.namespaceURI === "http://www.w3.org/1999/xhtml";
+      kt(e, g, v, r, t == null ? void 0 : t[jr], n[jr]), l[_] = v, l[jr] = n[jr];
+      continue;
+    }
+    var p = l[_];
+    if (v !== p) {
+      l[_] = v;
+      var x = _[0] + _[1];
+      if (x !== "$$") {
+        if (x === "on") {
+          const b = {}, N = "$$" + _;
+          let E = _.slice(2);
+          var C = e1(E);
+          if (Jf(E) && (E = E.slice(0, -7), b.capture = !0), !C && p) {
+            if (v != null) continue;
+            e.removeEventListener(E, l[N], b), l[N] = null;
+          }
+          if (v != null)
+            if (C)
+              e[`__${E}`] = v, Ai([E]);
+            else {
+              let M = function(D) {
+                l[_].call(this, D);
+              };
+              l[N] = gu(E, e, M, b);
+            }
+          else C && (e[`__${E}`] = void 0);
+        } else if (_ === "style" && v != null)
+          e.style.cssText = v + "";
+        else if (_ === "autofocus")
+          a1(
+            /** @type {HTMLElement} */
+            e,
+            !!v
+          );
+        else if (!i && (_ === "__value" || _ === "value" && v != null))
+          e.value = e.__value = v;
+        else if (_ === "selected" && u)
+          _1(
+            /** @type {HTMLOptionElement} */
+            e,
+            v
+          );
+        else {
+          var $ = _;
+          o || ($ = n1($));
+          var m = $ === "defaultValue" || $ === "defaultChecked";
+          if (v == null && !i && !m)
+            if (d[_] = null, $ === "value" || $ === "checked") {
+              let b = (
+                /** @type {HTMLInputElement} */
+                e
+              );
+              const N = t === void 0;
+              if ($ === "value") {
+                let E = b.defaultValue;
+                b.removeAttribute($), b.defaultValue = E, b.value = b.__value = N ? E : null;
+              } else {
+                let E = b.defaultChecked;
+                b.removeAttribute($), b.defaultChecked = E, b.checked = N ? E : !1;
+              }
+            } else
+              e.removeAttribute(_);
+          else m || f.includes($) && (i || typeof v != "string") ? e[$] = v : typeof v != "function" && ce(e, $, v);
+        }
+        _ === "style" && "__styles" in e && (e.__styles = {});
+      }
+    }
+  }
+  return a && It(!0), l;
+}
+var za = /* @__PURE__ */ new Map();
+function _u(e) {
+  var t = za.get(e.nodeName);
+  if (t) return t;
+  za.set(e.nodeName, t = []);
+  for (var n, r = e, o = Element.prototype; o !== r; ) {
+    n = Zl(r);
+    for (var i in n)
+      n[i].set && t.push(i);
+    r = Fs(r);
+  }
+  return t;
+}
+function st(e, t, n, r) {
+  var o = e.__styles ?? (e.__styles = {});
+  o[t] !== n && (o[t] = n, n == null ? e.style.removeProperty(t) : e.style.setProperty(t, n, ""));
+}
+var Zn, Pr, bo, $i, xu;
+const Ei = class Ei {
+  /** @param {ResizeObserverOptions} options */
+  constructor(t) {
+    rr(this, $i);
+    /** */
+    rr(this, Zn, /* @__PURE__ */ new WeakMap());
+    /** @type {ResizeObserver | undefined} */
+    rr(this, Pr);
+    /** @type {ResizeObserverOptions} */
+    rr(this, bo);
+    Gr(this, bo, t);
+  }
+  /**
+   * @param {Element} element
+   * @param {(entry: ResizeObserverEntry) => any} listener
+   */
+  observe(t, n) {
+    var r = it(this, Zn).get(t) || /* @__PURE__ */ new Set();
+    return r.add(n), it(this, Zn).set(t, r), Na(this, $i, xu).call(this).observe(t, it(this, bo)), () => {
+      var o = it(this, Zn).get(t);
+      o.delete(n), o.size === 0 && (it(this, Zn).delete(t), it(this, Pr).unobserve(t));
+    };
+  }
+};
+Zn = new WeakMap(), Pr = new WeakMap(), bo = new WeakMap(), $i = new WeakSet(), xu = function() {
+  return it(this, Pr) ?? Gr(this, Pr, new ResizeObserver(
+    /** @param {any} entries */
+    (t) => {
+      for (var n of t) {
+        Ei.entries.set(n.target, n);
+        for (var r of it(this, Zn).get(n.target) || [])
+          r(n);
+      }
+    }
+  ));
+}, /** @static */
+wt(Ei, "entries", /* @__PURE__ */ new WeakMap());
+let ws = Ei;
+var x1 = /* @__PURE__ */ new ws({
+  box: "border-box"
+});
+function Ra(e, t, n) {
+  var r = x1.observe(e, () => n(e[t]));
+  Ot(() => (wn(() => n(e[t])), r));
+}
+function Ba(e, t) {
+  return e === t || (e == null ? void 0 : e[Wn]) === t;
+}
+function An(e = {}, t, n, r) {
+  return Ot(() => {
+    var o, i;
+    return Fr(() => {
+      o = i, i = [], wn(() => {
+        e !== n(...i) && (t(e, ...i), o && Ba(n(...o), e) && t(null, ...o));
+      });
+    }), () => {
+      ko(() => {
+        i && Ba(n(...i), e) && t(null, ...i);
+      });
+    };
+  }), e;
+}
+function es(e) {
+  return function(...t) {
+    var n = (
+      /** @type {Event} */
+      t[0]
+    );
+    return n.stopPropagation(), e == null ? void 0 : e.apply(this, t);
+  };
+}
+function He(e = !1) {
+  const t = (
+    /** @type {ComponentContextLegacy} */
+    Ze
+  ), n = t.l.u;
+  if (!n) return;
+  let r = () => j(t.s);
+  if (e) {
+    let o = 0, i = (
+      /** @type {Record<string, any>} */
+      {}
+    );
+    const s = /* @__PURE__ */ Me(() => {
+      let a = !1;
+      const l = t.s;
+      for (const u in l)
+        l[u] !== i[u] && (i[u] = l[u], a = !0);
+      return a && o++, o;
+    });
+    r = () => h(s);
+  }
+  n.b.length && Wf(() => {
+    Ya(t, r), ao(n.b);
+  }), Nr(() => {
+    const o = wn(() => n.m.map(xf));
+    return () => {
+      for (const i of o)
+        typeof i == "function" && i();
+    };
+  }), n.a.length && Nr(() => {
+    Ya(t, r), ao(n.a);
+  });
+}
+function Ya(e, t) {
+  if (e.l.s)
+    for (const n of e.l.s) h(n);
+  t();
+}
+function Ve(e, t) {
+  var i;
+  var n = (
+    /** @type {Record<string, Function[] | Function>} */
+    (i = e.$$events) == null ? void 0 : i[t.type]
+  ), r = Co(n) ? n.slice() : n == null ? [] : [n];
+  for (var o of r)
+    o.call(this, t);
+}
+function un(e) {
+  Ze === null && Vi(), Br && Ze.l !== null ? C1(Ze).m.push(e) : Nr(() => {
+    const t = wn(e);
+    if (typeof t == "function") return (
+      /** @type {() => void} */
+      t
+    );
+  });
+}
+function Qs(e) {
+  Ze === null && Vi(), un(() => () => wn(e));
+}
+function b1(e, t, { bubbles: n = !1, cancelable: r = !1 } = {}) {
+  return new CustomEvent(e, { detail: t, bubbles: n, cancelable: r });
+}
+function Oi() {
+  const e = Ze;
+  return e === null && Vi(), (t, n, r) => {
+    var i;
+    const o = (
+      /** @type {Record<string, Function | Function[]>} */
+      (i = e.s.$$events) == null ? void 0 : i[
+        /** @type {any} */
+        t
+      ]
+    );
+    if (o) {
+      const s = Co(o) ? o.slice() : [o], a = b1(
+        /** @type {string} */
+        t,
+        n,
+        r
+      );
+      for (const l of s)
+        l.call(e.x, a);
+      return !a.defaultPrevented;
+    }
+    return !0;
+  };
+}
+function C1(e) {
+  var t = (
+    /** @type {ComponentContextLegacy} */
+    e.l
+  );
+  return t.u ?? (t.u = { a: [], b: [], m: [] });
+}
+function ea(e, t, n) {
+  if (e == null)
+    return t(void 0), n && n(void 0), dt;
+  const r = wn(
+    () => e.subscribe(
+      t,
+      // @ts-expect-error
+      n
+    )
+  );
+  return r.unsubscribe ? () => r.unsubscribe() : r;
+}
+const yr = [];
+function Ft(e, t) {
+  return {
+    subscribe: we(e, t).subscribe
+  };
+}
+function we(e, t = dt) {
+  let n = null;
+  const r = /* @__PURE__ */ new Set();
+  function o(a) {
+    if (Ws(e, a) && (e = a, n)) {
+      const l = !yr.length;
+      for (const u of r)
+        u[1](), yr.push(u, e);
+      if (l) {
+        for (let u = 0; u < yr.length; u += 2)
+          yr[u][0](yr[u + 1]);
+        yr.length = 0;
+      }
+    }
+  }
+  function i(a) {
+    o(a(
+      /** @type {T} */
+      e
+    ));
+  }
+  function s(a, l = dt) {
+    const u = [a, l];
+    return r.add(u), r.size === 1 && (n = t(o, i) || dt), a(
+      /** @type {T} */
+      e
+    ), () => {
+      r.delete(u), r.size === 0 && n && (n(), n = null);
+    };
+  }
+  return { set: o, update: i, subscribe: s };
+}
+function Kn(e, t, n) {
+  const r = !Array.isArray(e), o = r ? [e] : e;
+  if (!o.every(Boolean))
+    throw new Error("derived() expects stores as input, got a falsy value");
+  const i = t.length < 2;
+  return Ft(n, (s, a) => {
+    let l = !1;
+    const u = [];
+    let c = 0, f = dt;
+    const d = () => {
+      if (c)
+        return;
+      f();
+      const p = t(r ? u[0] : u, s, a);
+      i ? s(p) : f = typeof p == "function" ? p : dt;
+    }, g = o.map(
+      (p, x) => ea(
+        p,
+        (C) => {
+          u[x] = C, c &= ~(1 << x), l && d();
+        },
+        () => {
+          c |= 1 << x;
+        }
+      )
+    );
+    return l = !0, d(), function() {
+      ao(g), f(), l = !1;
+    };
+  });
+}
+function q(e) {
+  let t;
+  return ea(e, (n) => t = n)(), t;
+}
+let Bo = !1, _s = Symbol();
+function Q(e, t, n) {
+  const r = n[t] ?? (n[t] = {
+    store: null,
+    source: /* @__PURE__ */ $o(void 0),
+    unsubscribe: dt
+  });
+  if (r.store !== e && !(_s in n))
+    if (r.unsubscribe(), r.store = e ?? null, e == null)
+      r.source.v = void 0, r.unsubscribe = dt;
+    else {
+      var o = !0;
+      r.unsubscribe = ea(e, (i) => {
+        o ? r.source.v = i : U(r.source, i);
+      }), o = !1;
+    }
+  return e && _s in n ? q(e) : h(r.source);
+}
+function k1(e, t, n) {
+  let r = n[t];
+  return r && r.store !== e && (r.unsubscribe(), r.unsubscribe = dt), e;
+}
+function li(e, t) {
+  return e.set(t), t;
+}
+function tt() {
+  const e = {};
+  function t() {
+    su(() => {
+      for (var n in e)
+        e[n].unsubscribe();
+      so(e, _s, {
+        enumerable: !1,
+        value: !0
+      });
+    });
+  }
+  return [e, t];
+}
+function $1(e) {
+  var t = Bo;
+  try {
+    return Bo = !1, [e(), Bo];
+  } finally {
+    Bo = t;
+  }
+}
+const E1 = {
+  get(e, t) {
+    if (!e.exclude.includes(t))
+      return e.props[t];
+  },
+  set(e, t) {
+    return !1;
+  },
+  getOwnPropertyDescriptor(e, t) {
+    if (!e.exclude.includes(t) && t in e.props)
+      return {
+        enumerable: !0,
+        configurable: !0,
+        value: e.props[t]
+      };
+  },
+  has(e, t) {
+    return e.exclude.includes(t) ? !1 : t in e.props;
+  },
+  ownKeys(e) {
+    return Reflect.ownKeys(e.props).filter((t) => !e.exclude.includes(t));
+  }
+};
+// @__NO_SIDE_EFFECTS__
+function yt(e, t, n) {
+  return new Proxy(
+    { props: e, exclude: t },
+    E1
+  );
+}
+const S1 = {
+  get(e, t) {
+    if (!e.exclude.includes(t))
+      return h(e.version), t in e.special ? e.special[t]() : e.props[t];
+  },
+  set(e, t, n) {
+    return t in e.special || (e.special[t] = w(
+      {
+        get [t]() {
+          return e.props[t];
+        }
+      },
+      /** @type {string} */
+      t,
+      Il
+    )), e.special[t](n), Ha(e.version), !0;
+  },
+  getOwnPropertyDescriptor(e, t) {
+    if (!e.exclude.includes(t) && t in e.props)
+      return {
+        enumerable: !0,
+        configurable: !0,
+        value: e.props[t]
+      };
+  },
+  deleteProperty(e, t) {
+    return e.exclude.includes(t) || (e.exclude.push(t), Ha(e.version)), !0;
+  },
+  has(e, t) {
+    return e.exclude.includes(t) ? !1 : t in e.props;
+  },
+  ownKeys(e) {
+    return Reflect.ownKeys(e.props).filter((t) => !e.exclude.includes(t));
+  }
+};
+function nt(e, t) {
+  return new Proxy({ props: e, exclude: t, special: {}, version: Mt(0) }, S1);
+}
+const P1 = {
+  get(e, t) {
+    let n = e.props.length;
+    for (; n--; ) {
+      let r = e.props[n];
+      if (Ur(r) && (r = r()), typeof r == "object" && r !== null && t in r) return r[t];
+    }
+  },
+  set(e, t, n) {
+    let r = e.props.length;
+    for (; r--; ) {
+      let o = e.props[r];
+      Ur(o) && (o = o());
+      const i = Tn(o, t);
+      if (i && i.set)
+        return i.set(n), !0;
+    }
+    return !1;
+  },
+  getOwnPropertyDescriptor(e, t) {
+    let n = e.props.length;
+    for (; n--; ) {
+      let r = e.props[n];
+      if (Ur(r) && (r = r()), typeof r == "object" && r !== null && t in r) {
+        const o = Tn(r, t);
+        return o && !o.configurable && (o.configurable = !0), o;
+      }
+    }
+  },
+  has(e, t) {
+    if (t === Wn || t === Zs) return !1;
+    for (let n of e.props)
+      if (Ur(n) && (n = n()), n != null && t in n) return !0;
+    return !1;
+  },
+  ownKeys(e) {
+    const t = [];
+    for (let n of e.props) {
+      Ur(n) && (n = n());
+      for (const r in n)
+        t.includes(r) || t.push(r);
+    }
+    return t;
+  }
+};
+function ut(...e) {
+  return new Proxy({ props: e }, P1);
+}
+function w(e, t, n, r) {
+  var N;
+  var o = (n & uf) !== 0, i = !Br || (n & cf) !== 0, s = (n & df) !== 0, a = (n & ff) !== 0, l = !1, u;
+  s ? [u, l] = $1(() => (
+    /** @type {V} */
+    e[t]
+  )) : u = /** @type {V} */
+  e[t];
+  var c = Wn in e || Zs in e, f = s && (((N = Tn(e, t)) == null ? void 0 : N.set) ?? (c && t in e && ((E) => e[t] = E))) || void 0, d = (
+    /** @type {V} */
+    r
+  ), g = !0, p = !1, x = () => (p = !0, g && (g = !1, a ? d = wn(
+    /** @type {() => V} */
+    r
+  ) : d = /** @type {V} */
+  r), d);
+  u === void 0 && r !== void 0 && (f && i && Nf(), u = x(), f && f(u));
+  var C;
+  if (i)
+    C = () => {
+      var E = (
+        /** @type {V} */
+        e[t]
+      );
+      return E === void 0 ? x() : (g = !0, p = !1, E);
+    };
+  else {
+    var $ = (o ? Me : pe)(
+      () => (
+        /** @type {V} */
+        e[t]
+      )
+    );
+    $.f |= vf, C = () => {
+      var E = h($);
+      return E !== void 0 && (d = /** @type {V} */
+      void 0), E === void 0 ? d : E;
+    };
+  }
+  if (!(n & Il))
+    return C;
+  if (f) {
+    var m = e.$$legacy;
+    return function(E, M) {
+      return arguments.length > 0 ? ((!i || !M || m || l) && f(M ? C() : E), E) : C();
+    };
+  }
+  var _ = !1, v = /* @__PURE__ */ $o(u), b = /* @__PURE__ */ Me(() => {
+    var E = C(), M = h(v);
+    return _ ? (_ = !1, M) : v.v = E;
+  });
+  return o || (b.equals = Ks), function(E, M) {
+    if (arguments.length > 0) {
+      const D = M ? h(b) : i && s ? Tt(E) : E;
+      return b.equals(D) || (_ = !0, U(v, D), p && d !== void 0 && (d = D), wn(() => h(b))), E;
+    }
+    return h(b);
+  };
+}
+function N1(e) {
+  return new M1(e);
+}
+var Sn, Wt;
+class M1 {
+  /**
+   * @param {ComponentConstructorOptions & {
+   *  component: any;
+   * }} options
+   */
+  constructor(t) {
+    /** @type {any} */
+    rr(this, Sn);
+    /** @type {Record<string, any>} */
+    rr(this, Wt);
+    var i;
+    var n = /* @__PURE__ */ new Map(), r = (s, a) => {
+      var l = /* @__PURE__ */ $o(a);
+      return n.set(s, l), l;
+    };
+    const o = new Proxy(
+      { ...t.props || {}, $$events: {} },
+      {
+        get(s, a) {
+          return h(n.get(a) ?? r(a, Reflect.get(s, a)));
+        },
+        has(s, a) {
+          return a === Zs ? !0 : (h(n.get(a) ?? r(a, Reflect.get(s, a))), Reflect.has(s, a));
+        },
+        set(s, a, l) {
+          return U(n.get(a) ?? r(a, l), l), Reflect.set(s, a, l);
+        }
+      }
+    );
+    Gr(this, Wt, (t.hydrate ? d1 : hu)(t.component, {
+      target: t.target,
+      anchor: t.anchor,
+      props: o,
+      context: t.context,
+      intro: t.intro ?? !1,
+      recover: t.recover
+    })), (!((i = t == null ? void 0 : t.props) != null && i.$$host) || t.sync === !1) && y(), Gr(this, Sn, o.$$events);
+    for (const s of Object.keys(it(this, Wt)))
+      s === "$set" || s === "$destroy" || s === "$on" || so(this, s, {
+        get() {
+          return it(this, Wt)[s];
+        },
+        /** @param {any} value */
+        set(a) {
+          it(this, Wt)[s] = a;
+        },
+        enumerable: !0
+      });
+    it(this, Wt).$set = /** @param {Record<string, any>} next */
+    (s) => {
+      Object.assign(o, s);
+    }, it(this, Wt).$destroy = () => {
+      f1(it(this, Wt));
+    };
+  }
+  /** @param {Record<string, any>} props */
+  $set(t) {
+    it(this, Wt).$set(t);
+  }
+  /**
+   * @param {string} event
+   * @param {(...args: any[]) => any} callback
+   * @returns {any}
+   */
+  $on(t, n) {
+    it(this, Sn)[t] = it(this, Sn)[t] || [];
+    const r = (...o) => n.call(this, ...o);
+    return it(this, Sn)[t].push(r), () => {
+      it(this, Sn)[t] = it(this, Sn)[t].filter(
+        /** @param {any} fn */
+        (o) => o !== r
+      );
+    };
+  }
+  $destroy() {
+    it(this, Wt).$destroy();
+  }
+}
+Sn = new WeakMap(), Wt = new WeakMap();
+let bu;
+typeof HTMLElement == "function" && (bu = class extends HTMLElement {
+  /**
+   * @param {*} $$componentCtor
+   * @param {*} $$slots
+   * @param {*} use_shadow_dom
+   */
+  constructor(t, n, r) {
+    super();
+    /** The Svelte component constructor */
+    wt(this, "$$ctor");
+    /** Slots */
+    wt(this, "$$s");
+    /** @type {any} The Svelte component instance */
+    wt(this, "$$c");
+    /** Whether or not the custom element is connected */
+    wt(this, "$$cn", !1);
+    /** @type {Record<string, any>} Component props data */
+    wt(this, "$$d", {});
+    /** `true` if currently in the process of reflecting component props back to attributes */
+    wt(this, "$$r", !1);
+    /** @type {Record<string, CustomElementPropDefinition>} Props definition (name, reflected, type etc) */
+    wt(this, "$$p_d", {});
+    /** @type {Record<string, EventListenerOrEventListenerObject[]>} Event listeners */
+    wt(this, "$$l", {});
+    /** @type {Map<EventListenerOrEventListenerObject, Function>} Event listener unsubscribe functions */
+    wt(this, "$$l_u", /* @__PURE__ */ new Map());
+    /** @type {any} The managed render effect for reflecting attributes */
+    wt(this, "$$me");
+    this.$$ctor = t, this.$$s = n, r && this.attachShadow({ mode: "open" });
+  }
+  /**
+   * @param {string} type
+   * @param {EventListenerOrEventListenerObject} listener
+   * @param {boolean | AddEventListenerOptions} [options]
+   */
+  addEventListener(t, n, r) {
+    if (this.$$l[t] = this.$$l[t] || [], this.$$l[t].push(n), this.$$c) {
+      const o = this.$$c.$on(t, n);
+      this.$$l_u.set(n, o);
+    }
+    super.addEventListener(t, n, r);
+  }
+  /**
+   * @param {string} type
+   * @param {EventListenerOrEventListenerObject} listener
+   * @param {boolean | AddEventListenerOptions} [options]
+   */
+  removeEventListener(t, n, r) {
+    if (super.removeEventListener(t, n, r), this.$$c) {
+      const o = this.$$l_u.get(n);
+      o && (o(), this.$$l_u.delete(n));
+    }
+  }
+  async connectedCallback() {
+    if (this.$$cn = !0, !this.$$c) {
+      let t = function(o) {
+        return (i) => {
+          const s = document.createElement("slot");
+          o !== "default" && (s.name = o), L(i, s);
+        };
+      };
+      if (await Promise.resolve(), !this.$$cn || this.$$c)
+        return;
+      const n = {}, r = T1(this);
+      for (const o of this.$$s)
+        o in r && (o === "default" && !this.$$d.children ? (this.$$d.children = t(o), n.default = !0) : n[o] = t(o));
+      for (const o of this.attributes) {
+        const i = this.$$g_p(o.name);
+        i in this.$$d || (this.$$d[i] = Go(i, o.value, this.$$p_d, "toProp"));
+      }
+      for (const o in this.$$p_d)
+        !(o in this.$$d) && this[o] !== void 0 && (this.$$d[o] = this[o], delete this[o]);
+      this.$$c = N1({
+        component: this.$$ctor,
+        target: this.shadowRoot || this,
+        props: {
+          ...this.$$d,
+          $$slots: n,
+          $$host: this
+        }
+      }), this.$$me = Kf(() => {
+        Fr(() => {
+          var o;
+          this.$$r = !0;
+          for (const i of ri(this.$$c)) {
+            if (!((o = this.$$p_d[i]) != null && o.reflect)) continue;
+            this.$$d[i] = this.$$c[i];
+            const s = Go(
+              i,
+              this.$$d[i],
+              this.$$p_d,
+              "toAttribute"
+            );
+            s == null ? this.removeAttribute(this.$$p_d[i].attribute || i) : this.setAttribute(this.$$p_d[i].attribute || i, s);
+          }
+          this.$$r = !1;
+        });
+      });
+      for (const o in this.$$l)
+        for (const i of this.$$l[o]) {
+          const s = this.$$c.$on(o, i);
+          this.$$l_u.set(i, s);
+        }
+      this.$$l = {};
+    }
+  }
+  // We don't need this when working within Svelte code, but for compatibility of people using this outside of Svelte
+  // and setting attributes through setAttribute etc, this is helpful
+  /**
+   * @param {string} attr
+   * @param {string} _oldValue
+   * @param {string} newValue
+   */
+  attributeChangedCallback(t, n, r) {
+    var o;
+    this.$$r || (t = this.$$g_p(t), this.$$d[t] = Go(t, r, this.$$p_d, "toProp"), (o = this.$$c) == null || o.$set({ [t]: this.$$d[t] }));
+  }
+  disconnectedCallback() {
+    this.$$cn = !1, Promise.resolve().then(() => {
+      !this.$$cn && this.$$c && (this.$$c.$destroy(), this.$$me(), this.$$c = void 0);
+    });
+  }
+  /**
+   * @param {string} attribute_name
+   */
+  $$g_p(t) {
+    return ri(this.$$p_d).find(
+      (n) => this.$$p_d[n].attribute === t || !this.$$p_d[n].attribute && n.toLowerCase() === t
+    ) || t;
+  }
+});
+function Go(e, t, n, r) {
+  var i;
+  const o = (i = n[e]) == null ? void 0 : i.type;
+  if (t = o === "Boolean" && typeof t != "boolean" ? t != null : t, !r || !n[e])
+    return t;
+  if (r === "toAttribute")
+    switch (o) {
+      case "Object":
+      case "Array":
+        return t == null ? null : JSON.stringify(t);
+      case "Boolean":
+        return t ? "" : null;
+      case "Number":
+        return t ?? null;
+      default:
+        return t;
+    }
+  else
+    switch (o) {
+      case "Object":
+      case "Array":
+        return t && JSON.parse(t);
+      case "Boolean":
+        return t;
+      // conversion already handled above
+      case "Number":
+        return t != null ? +t : t;
+      default:
+        return t;
+    }
+}
+function T1(e) {
+  const t = {};
+  return e.childNodes.forEach((n) => {
+    t[
+      /** @type {Element} node */
+      n.slot || "default"
+    ] = !0;
+  }), t;
+}
+function ae(e, t, n, r, o, i) {
+  let s = class extends bu {
+    constructor() {
+      super(e, n, o), this.$$p_d = t;
+    }
+    static get observedAttributes() {
+      return ri(t).map(
+        (a) => (t[a].attribute || a).toLowerCase()
+      );
+    }
+  };
+  return ri(t).forEach((a) => {
+    so(s.prototype, a, {
+      get() {
+        return this.$$c && a in this.$$c ? this.$$c[a] : this.$$d[a];
+      },
+      set(l) {
+        var f;
+        l = Go(a, l, t), this.$$d[a] = l;
+        var u = this.$$c;
+        if (u) {
+          var c = (f = Tn(u, a)) == null ? void 0 : f.get;
+          c ? u[a] = l : u.$set({ [a]: l });
+        }
+      }
+    });
+  }), r.forEach((a) => {
+    so(s.prototype, a, {
+      get() {
+        var l;
+        return (l = this.$$c) == null ? void 0 : l[a];
+      }
+    });
+  }), e.element = /** @type {any} */
+  s, s;
+}
+function Et(e) {
+  if (typeof e == "string" || typeof e == "number") return "" + e;
+  let t = "";
+  if (Array.isArray(e))
+    for (let n = 0, r; n < e.length; n++)
+      (r = Et(e[n])) !== "" && (t += (t && " ") + r);
+  else
+    for (let n in e)
+      e[n] && (t += (t && " ") + n);
+  return t;
+}
+var H1 = { value: () => {
+} };
+function Ii() {
+  for (var e = 0, t = arguments.length, n = {}, r; e < t; ++e) {
+    if (!(r = arguments[e] + "") || r in n || /[\s.]/.test(r)) throw new Error("illegal type: " + r);
+    n[r] = [];
+  }
+  return new Uo(n);
+}
+function Uo(e) {
+  this._ = e;
+}
+function V1(e, t) {
+  return e.trim().split(/^|\s+/).map(function(n) {
+    var r = "", o = n.indexOf(".");
+    if (o >= 0 && (r = n.slice(o + 1), n = n.slice(0, o)), n && !t.hasOwnProperty(n)) throw new Error("unknown type: " + n);
+    return { type: n, name: r };
+  });
+}
+Uo.prototype = Ii.prototype = {
+  constructor: Uo,
+  on: function(e, t) {
+    var n = this._, r = V1(e + "", n), o, i = -1, s = r.length;
+    if (arguments.length < 2) {
+      for (; ++i < s; ) if ((o = (e = r[i]).type) && (o = D1(n[o], e.name))) return o;
+      return;
+    }
+    if (t != null && typeof t != "function") throw new Error("invalid callback: " + t);
+    for (; ++i < s; )
+      if (o = (e = r[i]).type) n[o] = Za(n[o], e.name, t);
+      else if (t == null) for (o in n) n[o] = Za(n[o], e.name, null);
+    return this;
+  },
+  copy: function() {
+    var e = {}, t = this._;
+    for (var n in t) e[n] = t[n].slice();
+    return new Uo(e);
+  },
+  call: function(e, t) {
+    if ((o = arguments.length - 2) > 0) for (var n = new Array(o), r = 0, o, i; r < o; ++r) n[r] = arguments[r + 2];
+    if (!this._.hasOwnProperty(e)) throw new Error("unknown type: " + e);
+    for (i = this._[e], r = 0, o = i.length; r < o; ++r) i[r].value.apply(t, n);
+  },
+  apply: function(e, t, n) {
+    if (!this._.hasOwnProperty(e)) throw new Error("unknown type: " + e);
+    for (var r = this._[e], o = 0, i = r.length; o < i; ++o) r[o].value.apply(t, n);
+  }
+};
+function D1(e, t) {
+  for (var n = 0, r = e.length, o; n < r; ++n)
+    if ((o = e[n]).name === t)
+      return o.value;
+}
+function Za(e, t, n) {
+  for (var r = 0, o = e.length; r < o; ++r)
+    if (e[r].name === t) {
+      e[r] = H1, e = e.slice(0, r).concat(e.slice(r + 1));
+      break;
+    }
+  return n != null && e.push({ name: t, value: n }), e;
+}
+var xs = "http://www.w3.org/1999/xhtml";
+const Xa = {
+  svg: "http://www.w3.org/2000/svg",
+  xhtml: xs,
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace",
+  xmlns: "http://www.w3.org/2000/xmlns/"
+};
+function zi(e) {
+  var t = e += "", n = t.indexOf(":");
+  return n >= 0 && (t = e.slice(0, n)) !== "xmlns" && (e = e.slice(n + 1)), Xa.hasOwnProperty(t) ? { space: Xa[t], local: e } : e;
+}
+function A1(e) {
+  return function() {
+    var t = this.ownerDocument, n = this.namespaceURI;
+    return n === xs && t.documentElement.namespaceURI === xs ? t.createElement(e) : t.createElementNS(n, e);
+  };
+}
+function L1(e) {
+  return function() {
+    return this.ownerDocument.createElementNS(e.space, e.local);
+  };
+}
+function Cu(e) {
+  var t = zi(e);
+  return (t.local ? L1 : A1)(t);
+}
+function O1() {
+}
+function ta(e) {
+  return e == null ? O1 : function() {
+    return this.querySelector(e);
+  };
+}
+function I1(e) {
+  typeof e != "function" && (e = ta(e));
+  for (var t = this._groups, n = t.length, r = new Array(n), o = 0; o < n; ++o)
+    for (var i = t[o], s = i.length, a = r[o] = new Array(s), l, u, c = 0; c < s; ++c)
+      (l = i[c]) && (u = e.call(l, l.__data__, c, i)) && ("__data__" in l && (u.__data__ = l.__data__), a[c] = u);
+  return new Zt(r, this._parents);
+}
+function z1(e) {
+  return e == null ? [] : Array.isArray(e) ? e : Array.from(e);
+}
+function R1() {
+  return [];
+}
+function ku(e) {
+  return e == null ? R1 : function() {
+    return this.querySelectorAll(e);
+  };
+}
+function B1(e) {
+  return function() {
+    return z1(e.apply(this, arguments));
+  };
+}
+function Y1(e) {
+  typeof e == "function" ? e = B1(e) : e = ku(e);
+  for (var t = this._groups, n = t.length, r = [], o = [], i = 0; i < n; ++i)
+    for (var s = t[i], a = s.length, l, u = 0; u < a; ++u)
+      (l = s[u]) && (r.push(e.call(l, l.__data__, u, s)), o.push(l));
+  return new Zt(r, o);
+}
+function $u(e) {
+  return function() {
+    return this.matches(e);
+  };
+}
+function Eu(e) {
+  return function(t) {
+    return t.matches(e);
+  };
+}
+var Z1 = Array.prototype.find;
+function X1(e) {
+  return function() {
+    return Z1.call(this.children, e);
+  };
+}
+function F1() {
+  return this.firstElementChild;
+}
+function W1(e) {
+  return this.select(e == null ? F1 : X1(typeof e == "function" ? e : Eu(e)));
+}
+var K1 = Array.prototype.filter;
+function q1() {
+  return Array.from(this.children);
+}
+function G1(e) {
+  return function() {
+    return K1.call(this.children, e);
+  };
+}
+function U1(e) {
+  return this.selectAll(e == null ? q1 : G1(typeof e == "function" ? e : Eu(e)));
+}
+function j1(e) {
+  typeof e != "function" && (e = $u(e));
+  for (var t = this._groups, n = t.length, r = new Array(n), o = 0; o < n; ++o)
+    for (var i = t[o], s = i.length, a = r[o] = [], l, u = 0; u < s; ++u)
+      (l = i[u]) && e.call(l, l.__data__, u, i) && a.push(l);
+  return new Zt(r, this._parents);
+}
+function Su(e) {
+  return new Array(e.length);
+}
+function J1() {
+  return new Zt(this._enter || this._groups.map(Su), this._parents);
+}
+function ui(e, t) {
+  this.ownerDocument = e.ownerDocument, this.namespaceURI = e.namespaceURI, this._next = null, this._parent = e, this.__data__ = t;
+}
+ui.prototype = {
+  constructor: ui,
+  appendChild: function(e) {
+    return this._parent.insertBefore(e, this._next);
+  },
+  insertBefore: function(e, t) {
+    return this._parent.insertBefore(e, t);
+  },
+  querySelector: function(e) {
+    return this._parent.querySelector(e);
+  },
+  querySelectorAll: function(e) {
+    return this._parent.querySelectorAll(e);
+  }
+};
+function Q1(e) {
+  return function() {
+    return e;
+  };
+}
+function eg(e, t, n, r, o, i) {
+  for (var s = 0, a, l = t.length, u = i.length; s < u; ++s)
+    (a = t[s]) ? (a.__data__ = i[s], r[s] = a) : n[s] = new ui(e, i[s]);
+  for (; s < l; ++s)
+    (a = t[s]) && (o[s] = a);
+}
+function tg(e, t, n, r, o, i, s) {
+  var a, l, u = /* @__PURE__ */ new Map(), c = t.length, f = i.length, d = new Array(c), g;
+  for (a = 0; a < c; ++a)
+    (l = t[a]) && (d[a] = g = s.call(l, l.__data__, a, t) + "", u.has(g) ? o[a] = l : u.set(g, l));
+  for (a = 0; a < f; ++a)
+    g = s.call(e, i[a], a, i) + "", (l = u.get(g)) ? (r[a] = l, l.__data__ = i[a], u.delete(g)) : n[a] = new ui(e, i[a]);
+  for (a = 0; a < c; ++a)
+    (l = t[a]) && u.get(d[a]) === l && (o[a] = l);
+}
+function ng(e) {
+  return e.__data__;
+}
+function rg(e, t) {
+  if (!arguments.length) return Array.from(this, ng);
+  var n = t ? tg : eg, r = this._parents, o = this._groups;
+  typeof e != "function" && (e = Q1(e));
+  for (var i = o.length, s = new Array(i), a = new Array(i), l = new Array(i), u = 0; u < i; ++u) {
+    var c = r[u], f = o[u], d = f.length, g = og(e.call(c, c && c.__data__, u, r)), p = g.length, x = a[u] = new Array(p), C = s[u] = new Array(p), $ = l[u] = new Array(d);
+    n(c, f, x, C, $, g, t);
+    for (var m = 0, _ = 0, v, b; m < p; ++m)
+      if (v = x[m]) {
+        for (m >= _ && (_ = m + 1); !(b = C[_]) && ++_ < p; ) ;
+        v._next = b || null;
+      }
+  }
+  return s = new Zt(s, r), s._enter = a, s._exit = l, s;
+}
+function og(e) {
+  return typeof e == "object" && "length" in e ? e : Array.from(e);
+}
+function ig() {
+  return new Zt(this._exit || this._groups.map(Su), this._parents);
+}
+function sg(e, t, n) {
+  var r = this.enter(), o = this, i = this.exit();
+  return typeof e == "function" ? (r = e(r), r && (r = r.selection())) : r = r.append(e + ""), t != null && (o = t(o), o && (o = o.selection())), n == null ? i.remove() : n(i), r && o ? r.merge(o).order() : o;
+}
+function ag(e) {
+  for (var t = e.selection ? e.selection() : e, n = this._groups, r = t._groups, o = n.length, i = r.length, s = Math.min(o, i), a = new Array(o), l = 0; l < s; ++l)
+    for (var u = n[l], c = r[l], f = u.length, d = a[l] = new Array(f), g, p = 0; p < f; ++p)
+      (g = u[p] || c[p]) && (d[p] = g);
+  for (; l < o; ++l)
+    a[l] = n[l];
+  return new Zt(a, this._parents);
+}
+function lg() {
+  for (var e = this._groups, t = -1, n = e.length; ++t < n; )
+    for (var r = e[t], o = r.length - 1, i = r[o], s; --o >= 0; )
+      (s = r[o]) && (i && s.compareDocumentPosition(i) ^ 4 && i.parentNode.insertBefore(s, i), i = s);
+  return this;
+}
+function ug(e) {
+  e || (e = cg);
+  function t(f, d) {
+    return f && d ? e(f.__data__, d.__data__) : !f - !d;
+  }
+  for (var n = this._groups, r = n.length, o = new Array(r), i = 0; i < r; ++i) {
+    for (var s = n[i], a = s.length, l = o[i] = new Array(a), u, c = 0; c < a; ++c)
+      (u = s[c]) && (l[c] = u);
+    l.sort(t);
+  }
+  return new Zt(o, this._parents).order();
+}
+function cg(e, t) {
+  return e < t ? -1 : e > t ? 1 : e >= t ? 0 : NaN;
+}
+function dg() {
+  var e = arguments[0];
+  return arguments[0] = this, e.apply(null, arguments), this;
+}
+function fg() {
+  return Array.from(this);
+}
+function gg() {
+  for (var e = this._groups, t = 0, n = e.length; t < n; ++t)
+    for (var r = e[t], o = 0, i = r.length; o < i; ++o) {
+      var s = r[o];
+      if (s) return s;
+    }
+  return null;
+}
+function hg() {
+  let e = 0;
+  for (const t of this) ++e;
+  return e;
+}
+function vg() {
+  return !this.node();
+}
+function pg(e) {
+  for (var t = this._groups, n = 0, r = t.length; n < r; ++n)
+    for (var o = t[n], i = 0, s = o.length, a; i < s; ++i)
+      (a = o[i]) && e.call(a, a.__data__, i, o);
+  return this;
+}
+function mg(e) {
+  return function() {
+    this.removeAttribute(e);
+  };
+}
+function yg(e) {
+  return function() {
+    this.removeAttributeNS(e.space, e.local);
+  };
+}
+function wg(e, t) {
+  return function() {
+    this.setAttribute(e, t);
+  };
+}
+function _g(e, t) {
+  return function() {
+    this.setAttributeNS(e.space, e.local, t);
+  };
+}
+function xg(e, t) {
+  return function() {
+    var n = t.apply(this, arguments);
+    n == null ? this.removeAttribute(e) : this.setAttribute(e, n);
+  };
+}
+function bg(e, t) {
+  return function() {
+    var n = t.apply(this, arguments);
+    n == null ? this.removeAttributeNS(e.space, e.local) : this.setAttributeNS(e.space, e.local, n);
+  };
+}
+function Cg(e, t) {
+  var n = zi(e);
+  if (arguments.length < 2) {
+    var r = this.node();
+    return n.local ? r.getAttributeNS(n.space, n.local) : r.getAttribute(n);
+  }
+  return this.each((t == null ? n.local ? yg : mg : typeof t == "function" ? n.local ? bg : xg : n.local ? _g : wg)(n, t));
+}
+function Pu(e) {
+  return e.ownerDocument && e.ownerDocument.defaultView || e.document && e || e.defaultView;
+}
+function kg(e) {
+  return function() {
+    this.style.removeProperty(e);
+  };
+}
+function $g(e, t, n) {
+  return function() {
+    this.style.setProperty(e, t, n);
+  };
+}
+function Eg(e, t, n) {
+  return function() {
+    var r = t.apply(this, arguments);
+    r == null ? this.style.removeProperty(e) : this.style.setProperty(e, r, n);
+  };
+}
+function Sg(e, t, n) {
+  return arguments.length > 1 ? this.each((t == null ? kg : typeof t == "function" ? Eg : $g)(e, t, n ?? "")) : Hr(this.node(), e);
+}
+function Hr(e, t) {
+  return e.style.getPropertyValue(t) || Pu(e).getComputedStyle(e, null).getPropertyValue(t);
+}
+function Pg(e) {
+  return function() {
+    delete this[e];
+  };
+}
+function Ng(e, t) {
+  return function() {
+    this[e] = t;
+  };
+}
+function Mg(e, t) {
+  return function() {
+    var n = t.apply(this, arguments);
+    n == null ? delete this[e] : this[e] = n;
+  };
+}
+function Tg(e, t) {
+  return arguments.length > 1 ? this.each((t == null ? Pg : typeof t == "function" ? Mg : Ng)(e, t)) : this.node()[e];
+}
+function Nu(e) {
+  return e.trim().split(/^|\s+/);
+}
+function na(e) {
+  return e.classList || new Mu(e);
+}
+function Mu(e) {
+  this._node = e, this._names = Nu(e.getAttribute("class") || "");
+}
+Mu.prototype = {
+  add: function(e) {
+    var t = this._names.indexOf(e);
+    t < 0 && (this._names.push(e), this._node.setAttribute("class", this._names.join(" ")));
+  },
+  remove: function(e) {
+    var t = this._names.indexOf(e);
+    t >= 0 && (this._names.splice(t, 1), this._node.setAttribute("class", this._names.join(" ")));
+  },
+  contains: function(e) {
+    return this._names.indexOf(e) >= 0;
+  }
+};
+function Tu(e, t) {
+  for (var n = na(e), r = -1, o = t.length; ++r < o; ) n.add(t[r]);
+}
+function Hu(e, t) {
+  for (var n = na(e), r = -1, o = t.length; ++r < o; ) n.remove(t[r]);
+}
+function Hg(e) {
+  return function() {
+    Tu(this, e);
+  };
+}
+function Vg(e) {
+  return function() {
+    Hu(this, e);
+  };
+}
+function Dg(e, t) {
+  return function() {
+    (t.apply(this, arguments) ? Tu : Hu)(this, e);
+  };
+}
+function Ag(e, t) {
+  var n = Nu(e + "");
+  if (arguments.length < 2) {
+    for (var r = na(this.node()), o = -1, i = n.length; ++o < i; ) if (!r.contains(n[o])) return !1;
+    return !0;
+  }
+  return this.each((typeof t == "function" ? Dg : t ? Hg : Vg)(n, t));
+}
+function Lg() {
+  this.textContent = "";
+}
+function Og(e) {
+  return function() {
+    this.textContent = e;
+  };
+}
+function Ig(e) {
+  return function() {
+    var t = e.apply(this, arguments);
+    this.textContent = t ?? "";
+  };
+}
+function zg(e) {
+  return arguments.length ? this.each(e == null ? Lg : (typeof e == "function" ? Ig : Og)(e)) : this.node().textContent;
+}
+function Rg() {
+  this.innerHTML = "";
+}
+function Bg(e) {
+  return function() {
+    this.innerHTML = e;
+  };
+}
+function Yg(e) {
+  return function() {
+    var t = e.apply(this, arguments);
+    this.innerHTML = t ?? "";
+  };
+}
+function Zg(e) {
+  return arguments.length ? this.each(e == null ? Rg : (typeof e == "function" ? Yg : Bg)(e)) : this.node().innerHTML;
+}
+function Xg() {
+  this.nextSibling && this.parentNode.appendChild(this);
+}
+function Fg() {
+  return this.each(Xg);
+}
+function Wg() {
+  this.previousSibling && this.parentNode.insertBefore(this, this.parentNode.firstChild);
+}
+function Kg() {
+  return this.each(Wg);
+}
+function qg(e) {
+  var t = typeof e == "function" ? e : Cu(e);
+  return this.select(function() {
+    return this.appendChild(t.apply(this, arguments));
+  });
+}
+function Gg() {
+  return null;
+}
+function Ug(e, t) {
+  var n = typeof e == "function" ? e : Cu(e), r = t == null ? Gg : typeof t == "function" ? t : ta(t);
+  return this.select(function() {
+    return this.insertBefore(n.apply(this, arguments), r.apply(this, arguments) || null);
+  });
+}
+function jg() {
+  var e = this.parentNode;
+  e && e.removeChild(this);
+}
+function Jg() {
+  return this.each(jg);
+}
+function Qg() {
+  var e = this.cloneNode(!1), t = this.parentNode;
+  return t ? t.insertBefore(e, this.nextSibling) : e;
+}
+function eh() {
+  var e = this.cloneNode(!0), t = this.parentNode;
+  return t ? t.insertBefore(e, this.nextSibling) : e;
+}
+function th(e) {
+  return this.select(e ? eh : Qg);
+}
+function nh(e) {
+  return arguments.length ? this.property("__data__", e) : this.node().__data__;
+}
+function rh(e) {
+  return function(t) {
+    e.call(this, t, this.__data__);
+  };
+}
+function oh(e) {
+  return e.trim().split(/^|\s+/).map(function(t) {
+    var n = "", r = t.indexOf(".");
+    return r >= 0 && (n = t.slice(r + 1), t = t.slice(0, r)), { type: t, name: n };
+  });
+}
+function ih(e) {
+  return function() {
+    var t = this.__on;
+    if (t) {
+      for (var n = 0, r = -1, o = t.length, i; n < o; ++n)
+        i = t[n], (!e.type || i.type === e.type) && i.name === e.name ? this.removeEventListener(i.type, i.listener, i.options) : t[++r] = i;
+      ++r ? t.length = r : delete this.__on;
+    }
+  };
+}
+function sh(e, t, n) {
+  return function() {
+    var r = this.__on, o, i = rh(t);
+    if (r) {
+      for (var s = 0, a = r.length; s < a; ++s)
+        if ((o = r[s]).type === e.type && o.name === e.name) {
+          this.removeEventListener(o.type, o.listener, o.options), this.addEventListener(o.type, o.listener = i, o.options = n), o.value = t;
+          return;
+        }
+    }
+    this.addEventListener(e.type, i, n), o = { type: e.type, name: e.name, value: t, listener: i, options: n }, r ? r.push(o) : this.__on = [o];
+  };
+}
+function ah(e, t, n) {
+  var r = oh(e + ""), o, i = r.length, s;
+  if (arguments.length < 2) {
+    var a = this.node().__on;
+    if (a) {
+      for (var l = 0, u = a.length, c; l < u; ++l)
+        for (o = 0, c = a[l]; o < i; ++o)
+          if ((s = r[o]).type === c.type && s.name === c.name)
+            return c.value;
+    }
+    return;
+  }
+  for (a = t ? sh : ih, o = 0; o < i; ++o) this.each(a(r[o], t, n));
+  return this;
+}
+function Vu(e, t, n) {
+  var r = Pu(e), o = r.CustomEvent;
+  typeof o == "function" ? o = new o(t, n) : (o = r.document.createEvent("Event"), n ? (o.initEvent(t, n.bubbles, n.cancelable), o.detail = n.detail) : o.initEvent(t, !1, !1)), e.dispatchEvent(o);
+}
+function lh(e, t) {
+  return function() {
+    return Vu(this, e, t);
+  };
+}
+function uh(e, t) {
+  return function() {
+    return Vu(this, e, t.apply(this, arguments));
+  };
+}
+function ch(e, t) {
+  return this.each((typeof t == "function" ? uh : lh)(e, t));
+}
+function* dh() {
+  for (var e = this._groups, t = 0, n = e.length; t < n; ++t)
+    for (var r = e[t], o = 0, i = r.length, s; o < i; ++o)
+      (s = r[o]) && (yield s);
+}
+var Du = [null];
+function Zt(e, t) {
+  this._groups = e, this._parents = t;
+}
+function Eo() {
+  return new Zt([[document.documentElement]], Du);
+}
+function fh() {
+  return this;
+}
+Zt.prototype = Eo.prototype = {
+  constructor: Zt,
+  select: I1,
+  selectAll: Y1,
+  selectChild: W1,
+  selectChildren: U1,
+  filter: j1,
+  data: rg,
+  enter: J1,
+  exit: ig,
+  join: sg,
+  merge: ag,
+  selection: fh,
+  order: lg,
+  sort: ug,
+  call: dg,
+  nodes: fg,
+  node: gg,
+  size: hg,
+  empty: vg,
+  each: pg,
+  attr: Cg,
+  style: Sg,
+  property: Tg,
+  classed: Ag,
+  text: zg,
+  html: Zg,
+  raise: Fg,
+  lower: Kg,
+  append: qg,
+  insert: Ug,
+  remove: Jg,
+  clone: th,
+  datum: nh,
+  on: ah,
+  dispatch: ch,
+  [Symbol.iterator]: dh
+};
+function Kt(e) {
+  return typeof e == "string" ? new Zt([[document.querySelector(e)]], [document.documentElement]) : new Zt([[e]], Du);
+}
+function gh(e) {
+  let t;
+  for (; t = e.sourceEvent; ) e = t;
+  return e;
+}
+function Qt(e, t) {
+  if (e = gh(e), t === void 0 && (t = e.currentTarget), t) {
+    var n = t.ownerSVGElement || t;
+    if (n.createSVGPoint) {
+      var r = n.createSVGPoint();
+      return r.x = e.clientX, r.y = e.clientY, r = r.matrixTransform(t.getScreenCTM().inverse()), [r.x, r.y];
+    }
+    if (t.getBoundingClientRect) {
+      var o = t.getBoundingClientRect();
+      return [e.clientX - o.left - t.clientLeft, e.clientY - o.top - t.clientTop];
+    }
+  }
+  return [e.pageX, e.pageY];
+}
+const hh = { passive: !1 }, fo = { capture: !0, passive: !1 };
+function ts(e) {
+  e.stopImmediatePropagation();
+}
+function xr(e) {
+  e.preventDefault(), e.stopImmediatePropagation();
+}
+function Au(e) {
+  var t = e.document.documentElement, n = Kt(e).on("dragstart.drag", xr, fo);
+  "onselectstart" in t ? n.on("selectstart.drag", xr, fo) : (t.__noselect = t.style.MozUserSelect, t.style.MozUserSelect = "none");
+}
+function Lu(e, t) {
+  var n = e.document.documentElement, r = Kt(e).on("dragstart.drag", null);
+  t && (r.on("click.drag", xr, fo), setTimeout(function() {
+    r.on("click.drag", null);
+  }, 0)), "onselectstart" in n ? r.on("selectstart.drag", null) : (n.style.MozUserSelect = n.__noselect, delete n.__noselect);
+}
+const Yo = (e) => () => e;
+function bs(e, {
+  sourceEvent: t,
+  subject: n,
+  target: r,
+  identifier: o,
+  active: i,
+  x: s,
+  y: a,
+  dx: l,
+  dy: u,
+  dispatch: c
+}) {
+  Object.defineProperties(this, {
+    type: { value: e, enumerable: !0, configurable: !0 },
+    sourceEvent: { value: t, enumerable: !0, configurable: !0 },
+    subject: { value: n, enumerable: !0, configurable: !0 },
+    target: { value: r, enumerable: !0, configurable: !0 },
+    identifier: { value: o, enumerable: !0, configurable: !0 },
+    active: { value: i, enumerable: !0, configurable: !0 },
+    x: { value: s, enumerable: !0, configurable: !0 },
+    y: { value: a, enumerable: !0, configurable: !0 },
+    dx: { value: l, enumerable: !0, configurable: !0 },
+    dy: { value: u, enumerable: !0, configurable: !0 },
+    _: { value: c }
+  });
+}
+bs.prototype.on = function() {
+  var e = this._.on.apply(this._, arguments);
+  return e === this._ ? this : e;
+};
+function vh(e) {
+  return !e.ctrlKey && !e.button;
+}
+function ph() {
+  return this.parentNode;
+}
+function mh(e, t) {
+  return t ?? { x: e.x, y: e.y };
+}
+function yh() {
+  return navigator.maxTouchPoints || "ontouchstart" in this;
+}
+function wh() {
+  var e = vh, t = ph, n = mh, r = yh, o = {}, i = Ii("start", "drag", "end"), s = 0, a, l, u, c, f = 0;
+  function d(v) {
+    v.on("mousedown.drag", g).filter(r).on("touchstart.drag", C).on("touchmove.drag", $, hh).on("touchend.drag touchcancel.drag", m).style("touch-action", "none").style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
+  }
+  function g(v, b) {
+    if (!(c || !e.call(this, v, b))) {
+      var N = _(this, t.call(this, v, b), v, b, "mouse");
+      N && (Kt(v.view).on("mousemove.drag", p, fo).on("mouseup.drag", x, fo), Au(v.view), ts(v), u = !1, a = v.clientX, l = v.clientY, N("start", v));
+    }
+  }
+  function p(v) {
+    if (xr(v), !u) {
+      var b = v.clientX - a, N = v.clientY - l;
+      u = b * b + N * N > f;
+    }
+    o.mouse("drag", v);
+  }
+  function x(v) {
+    Kt(v.view).on("mousemove.drag mouseup.drag", null), Lu(v.view, u), xr(v), o.mouse("end", v);
+  }
+  function C(v, b) {
+    if (e.call(this, v, b)) {
+      var N = v.changedTouches, E = t.call(this, v, b), M = N.length, D, V;
+      for (D = 0; D < M; ++D)
+        (V = _(this, E, v, b, N[D].identifier, N[D])) && (ts(v), V("start", v, N[D]));
+    }
+  }
+  function $(v) {
+    var b = v.changedTouches, N = b.length, E, M;
+    for (E = 0; E < N; ++E)
+      (M = o[b[E].identifier]) && (xr(v), M("drag", v, b[E]));
+  }
+  function m(v) {
+    var b = v.changedTouches, N = b.length, E, M;
+    for (c && clearTimeout(c), c = setTimeout(function() {
+      c = null;
+    }, 500), E = 0; E < N; ++E)
+      (M = o[b[E].identifier]) && (ts(v), M("end", v, b[E]));
+  }
+  function _(v, b, N, E, M, D) {
+    var V = i.copy(), A = Qt(D || N, b), O, R, S;
+    if ((S = n.call(v, new bs("beforestart", {
+      sourceEvent: N,
+      target: d,
+      identifier: M,
+      active: s,
+      x: A[0],
+      y: A[1],
+      dx: 0,
+      dy: 0,
+      dispatch: V
+    }), E)) != null)
+      return O = S.x - A[0] || 0, R = S.y - A[1] || 0, function T(k, P, H) {
+        var I = A, B;
+        switch (k) {
+          case "start":
+            o[M] = T, B = s++;
+            break;
+          case "end":
+            delete o[M], --s;
+          // falls through
+          case "drag":
+            A = Qt(H || P, b), B = s;
+            break;
+        }
+        V.call(
+          k,
+          v,
+          new bs(k, {
+            sourceEvent: P,
+            subject: S,
+            target: d,
+            identifier: M,
+            active: B,
+            x: A[0] + O,
+            y: A[1] + R,
+            dx: A[0] - I[0],
+            dy: A[1] - I[1],
+            dispatch: V
+          }),
+          E
+        );
+      };
+  }
+  return d.filter = function(v) {
+    return arguments.length ? (e = typeof v == "function" ? v : Yo(!!v), d) : e;
+  }, d.container = function(v) {
+    return arguments.length ? (t = typeof v == "function" ? v : Yo(v), d) : t;
+  }, d.subject = function(v) {
+    return arguments.length ? (n = typeof v == "function" ? v : Yo(v), d) : n;
+  }, d.touchable = function(v) {
+    return arguments.length ? (r = typeof v == "function" ? v : Yo(!!v), d) : r;
+  }, d.on = function() {
+    var v = i.on.apply(i, arguments);
+    return v === i ? d : v;
+  }, d.clickDistance = function(v) {
+    return arguments.length ? (f = (v = +v) * v, d) : Math.sqrt(f);
+  }, d;
+}
+function ra(e, t, n) {
+  e.prototype = t.prototype = n, n.constructor = e;
+}
+function Ou(e, t) {
+  var n = Object.create(e.prototype);
+  for (var r in t) n[r] = t[r];
+  return n;
+}
+function So() {
+}
+var go = 0.7, ci = 1 / go, br = "\\s*([+-]?\\d+)\\s*", ho = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*", pn = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*", _h = /^#([0-9a-f]{3,8})$/, xh = new RegExp(`^rgb\\(${br},${br},${br}\\)$`), bh = new RegExp(`^rgb\\(${pn},${pn},${pn}\\)$`), Ch = new RegExp(`^rgba\\(${br},${br},${br},${ho}\\)$`), kh = new RegExp(`^rgba\\(${pn},${pn},${pn},${ho}\\)$`), $h = new RegExp(`^hsl\\(${ho},${pn},${pn}\\)$`), Eh = new RegExp(`^hsla\\(${ho},${pn},${pn},${ho}\\)$`), Fa = {
+  aliceblue: 15792383,
+  antiquewhite: 16444375,
+  aqua: 65535,
+  aquamarine: 8388564,
+  azure: 15794175,
+  beige: 16119260,
+  bisque: 16770244,
+  black: 0,
+  blanchedalmond: 16772045,
+  blue: 255,
+  blueviolet: 9055202,
+  brown: 10824234,
+  burlywood: 14596231,
+  cadetblue: 6266528,
+  chartreuse: 8388352,
+  chocolate: 13789470,
+  coral: 16744272,
+  cornflowerblue: 6591981,
+  cornsilk: 16775388,
+  crimson: 14423100,
+  cyan: 65535,
+  darkblue: 139,
+  darkcyan: 35723,
+  darkgoldenrod: 12092939,
+  darkgray: 11119017,
+  darkgreen: 25600,
+  darkgrey: 11119017,
+  darkkhaki: 12433259,
+  darkmagenta: 9109643,
+  darkolivegreen: 5597999,
+  darkorange: 16747520,
+  darkorchid: 10040012,
+  darkred: 9109504,
+  darksalmon: 15308410,
+  darkseagreen: 9419919,
+  darkslateblue: 4734347,
+  darkslategray: 3100495,
+  darkslategrey: 3100495,
+  darkturquoise: 52945,
+  darkviolet: 9699539,
+  deeppink: 16716947,
+  deepskyblue: 49151,
+  dimgray: 6908265,
+  dimgrey: 6908265,
+  dodgerblue: 2003199,
+  firebrick: 11674146,
+  floralwhite: 16775920,
+  forestgreen: 2263842,
+  fuchsia: 16711935,
+  gainsboro: 14474460,
+  ghostwhite: 16316671,
+  gold: 16766720,
+  goldenrod: 14329120,
+  gray: 8421504,
+  green: 32768,
+  greenyellow: 11403055,
+  grey: 8421504,
+  honeydew: 15794160,
+  hotpink: 16738740,
+  indianred: 13458524,
+  indigo: 4915330,
+  ivory: 16777200,
+  khaki: 15787660,
+  lavender: 15132410,
+  lavenderblush: 16773365,
+  lawngreen: 8190976,
+  lemonchiffon: 16775885,
+  lightblue: 11393254,
+  lightcoral: 15761536,
+  lightcyan: 14745599,
+  lightgoldenrodyellow: 16448210,
+  lightgray: 13882323,
+  lightgreen: 9498256,
+  lightgrey: 13882323,
+  lightpink: 16758465,
+  lightsalmon: 16752762,
+  lightseagreen: 2142890,
+  lightskyblue: 8900346,
+  lightslategray: 7833753,
+  lightslategrey: 7833753,
+  lightsteelblue: 11584734,
+  lightyellow: 16777184,
+  lime: 65280,
+  limegreen: 3329330,
+  linen: 16445670,
+  magenta: 16711935,
+  maroon: 8388608,
+  mediumaquamarine: 6737322,
+  mediumblue: 205,
+  mediumorchid: 12211667,
+  mediumpurple: 9662683,
+  mediumseagreen: 3978097,
+  mediumslateblue: 8087790,
+  mediumspringgreen: 64154,
+  mediumturquoise: 4772300,
+  mediumvioletred: 13047173,
+  midnightblue: 1644912,
+  mintcream: 16121850,
+  mistyrose: 16770273,
+  moccasin: 16770229,
+  navajowhite: 16768685,
+  navy: 128,
+  oldlace: 16643558,
+  olive: 8421376,
+  olivedrab: 7048739,
+  orange: 16753920,
+  orangered: 16729344,
+  orchid: 14315734,
+  palegoldenrod: 15657130,
+  palegreen: 10025880,
+  paleturquoise: 11529966,
+  palevioletred: 14381203,
+  papayawhip: 16773077,
+  peachpuff: 16767673,
+  peru: 13468991,
+  pink: 16761035,
+  plum: 14524637,
+  powderblue: 11591910,
+  purple: 8388736,
+  rebeccapurple: 6697881,
+  red: 16711680,
+  rosybrown: 12357519,
+  royalblue: 4286945,
+  saddlebrown: 9127187,
+  salmon: 16416882,
+  sandybrown: 16032864,
+  seagreen: 3050327,
+  seashell: 16774638,
+  sienna: 10506797,
+  silver: 12632256,
+  skyblue: 8900331,
+  slateblue: 6970061,
+  slategray: 7372944,
+  slategrey: 7372944,
+  snow: 16775930,
+  springgreen: 65407,
+  steelblue: 4620980,
+  tan: 13808780,
+  teal: 32896,
+  thistle: 14204888,
+  tomato: 16737095,
+  turquoise: 4251856,
+  violet: 15631086,
+  wheat: 16113331,
+  white: 16777215,
+  whitesmoke: 16119285,
+  yellow: 16776960,
+  yellowgreen: 10145074
+};
+ra(So, vo, {
+  copy(e) {
+    return Object.assign(new this.constructor(), this, e);
+  },
+  displayable() {
+    return this.rgb().displayable();
+  },
+  hex: Wa,
+  // Deprecated! Use color.formatHex.
+  formatHex: Wa,
+  formatHex8: Sh,
+  formatHsl: Ph,
+  formatRgb: Ka,
+  toString: Ka
+});
+function Wa() {
+  return this.rgb().formatHex();
+}
+function Sh() {
+  return this.rgb().formatHex8();
+}
+function Ph() {
+  return Iu(this).formatHsl();
+}
+function Ka() {
+  return this.rgb().formatRgb();
+}
+function vo(e) {
+  var t, n;
+  return e = (e + "").trim().toLowerCase(), (t = _h.exec(e)) ? (n = t[1].length, t = parseInt(t[1], 16), n === 6 ? qa(t) : n === 3 ? new Ht(t >> 8 & 15 | t >> 4 & 240, t >> 4 & 15 | t & 240, (t & 15) << 4 | t & 15, 1) : n === 8 ? Zo(t >> 24 & 255, t >> 16 & 255, t >> 8 & 255, (t & 255) / 255) : n === 4 ? Zo(t >> 12 & 15 | t >> 8 & 240, t >> 8 & 15 | t >> 4 & 240, t >> 4 & 15 | t & 240, ((t & 15) << 4 | t & 15) / 255) : null) : (t = xh.exec(e)) ? new Ht(t[1], t[2], t[3], 1) : (t = bh.exec(e)) ? new Ht(t[1] * 255 / 100, t[2] * 255 / 100, t[3] * 255 / 100, 1) : (t = Ch.exec(e)) ? Zo(t[1], t[2], t[3], t[4]) : (t = kh.exec(e)) ? Zo(t[1] * 255 / 100, t[2] * 255 / 100, t[3] * 255 / 100, t[4]) : (t = $h.exec(e)) ? ja(t[1], t[2] / 100, t[3] / 100, 1) : (t = Eh.exec(e)) ? ja(t[1], t[2] / 100, t[3] / 100, t[4]) : Fa.hasOwnProperty(e) ? qa(Fa[e]) : e === "transparent" ? new Ht(NaN, NaN, NaN, 0) : null;
+}
+function qa(e) {
+  return new Ht(e >> 16 & 255, e >> 8 & 255, e & 255, 1);
+}
+function Zo(e, t, n, r) {
+  return r <= 0 && (e = t = n = NaN), new Ht(e, t, n, r);
+}
+function Nh(e) {
+  return e instanceof So || (e = vo(e)), e ? (e = e.rgb(), new Ht(e.r, e.g, e.b, e.opacity)) : new Ht();
+}
+function Cs(e, t, n, r) {
+  return arguments.length === 1 ? Nh(e) : new Ht(e, t, n, r ?? 1);
+}
+function Ht(e, t, n, r) {
+  this.r = +e, this.g = +t, this.b = +n, this.opacity = +r;
+}
+ra(Ht, Cs, Ou(So, {
+  brighter(e) {
+    return e = e == null ? ci : Math.pow(ci, e), new Ht(this.r * e, this.g * e, this.b * e, this.opacity);
+  },
+  darker(e) {
+    return e = e == null ? go : Math.pow(go, e), new Ht(this.r * e, this.g * e, this.b * e, this.opacity);
+  },
+  rgb() {
+    return this;
+  },
+  clamp() {
+    return new Ht(sr(this.r), sr(this.g), sr(this.b), di(this.opacity));
+  },
+  displayable() {
+    return -0.5 <= this.r && this.r < 255.5 && -0.5 <= this.g && this.g < 255.5 && -0.5 <= this.b && this.b < 255.5 && 0 <= this.opacity && this.opacity <= 1;
+  },
+  hex: Ga,
+  // Deprecated! Use color.formatHex.
+  formatHex: Ga,
+  formatHex8: Mh,
+  formatRgb: Ua,
+  toString: Ua
+}));
+function Ga() {
+  return `#${or(this.r)}${or(this.g)}${or(this.b)}`;
+}
+function Mh() {
+  return `#${or(this.r)}${or(this.g)}${or(this.b)}${or((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
+}
+function Ua() {
+  const e = di(this.opacity);
+  return `${e === 1 ? "rgb(" : "rgba("}${sr(this.r)}, ${sr(this.g)}, ${sr(this.b)}${e === 1 ? ")" : `, ${e})`}`;
+}
+function di(e) {
+  return isNaN(e) ? 1 : Math.max(0, Math.min(1, e));
+}
+function sr(e) {
+  return Math.max(0, Math.min(255, Math.round(e) || 0));
+}
+function or(e) {
+  return e = sr(e), (e < 16 ? "0" : "") + e.toString(16);
+}
+function ja(e, t, n, r) {
+  return r <= 0 ? e = t = n = NaN : n <= 0 || n >= 1 ? e = t = NaN : t <= 0 && (e = NaN), new tn(e, t, n, r);
+}
+function Iu(e) {
+  if (e instanceof tn) return new tn(e.h, e.s, e.l, e.opacity);
+  if (e instanceof So || (e = vo(e)), !e) return new tn();
+  if (e instanceof tn) return e;
+  e = e.rgb();
+  var t = e.r / 255, n = e.g / 255, r = e.b / 255, o = Math.min(t, n, r), i = Math.max(t, n, r), s = NaN, a = i - o, l = (i + o) / 2;
+  return a ? (t === i ? s = (n - r) / a + (n < r) * 6 : n === i ? s = (r - t) / a + 2 : s = (t - n) / a + 4, a /= l < 0.5 ? i + o : 2 - i - o, s *= 60) : a = l > 0 && l < 1 ? 0 : s, new tn(s, a, l, e.opacity);
+}
+function Th(e, t, n, r) {
+  return arguments.length === 1 ? Iu(e) : new tn(e, t, n, r ?? 1);
+}
+function tn(e, t, n, r) {
+  this.h = +e, this.s = +t, this.l = +n, this.opacity = +r;
+}
+ra(tn, Th, Ou(So, {
+  brighter(e) {
+    return e = e == null ? ci : Math.pow(ci, e), new tn(this.h, this.s, this.l * e, this.opacity);
+  },
+  darker(e) {
+    return e = e == null ? go : Math.pow(go, e), new tn(this.h, this.s, this.l * e, this.opacity);
+  },
+  rgb() {
+    var e = this.h % 360 + (this.h < 0) * 360, t = isNaN(e) || isNaN(this.s) ? 0 : this.s, n = this.l, r = n + (n < 0.5 ? n : 1 - n) * t, o = 2 * n - r;
+    return new Ht(
+      ns(e >= 240 ? e - 240 : e + 120, o, r),
+      ns(e, o, r),
+      ns(e < 120 ? e + 240 : e - 120, o, r),
+      this.opacity
+    );
+  },
+  clamp() {
+    return new tn(Ja(this.h), Xo(this.s), Xo(this.l), di(this.opacity));
+  },
+  displayable() {
+    return (0 <= this.s && this.s <= 1 || isNaN(this.s)) && 0 <= this.l && this.l <= 1 && 0 <= this.opacity && this.opacity <= 1;
+  },
+  formatHsl() {
+    const e = di(this.opacity);
+    return `${e === 1 ? "hsl(" : "hsla("}${Ja(this.h)}, ${Xo(this.s) * 100}%, ${Xo(this.l) * 100}%${e === 1 ? ")" : `, ${e})`}`;
+  }
+}));
+function Ja(e) {
+  return e = (e || 0) % 360, e < 0 ? e + 360 : e;
+}
+function Xo(e) {
+  return Math.max(0, Math.min(1, e || 0));
+}
+function ns(e, t, n) {
+  return (e < 60 ? t + (n - t) * e / 60 : e < 180 ? n : e < 240 ? t + (n - t) * (240 - e) / 60 : t) * 255;
+}
+const zu = (e) => () => e;
+function Hh(e, t) {
+  return function(n) {
+    return e + n * t;
+  };
+}
+function Vh(e, t, n) {
+  return e = Math.pow(e, n), t = Math.pow(t, n) - e, n = 1 / n, function(r) {
+    return Math.pow(e + r * t, n);
+  };
+}
+function Dh(e) {
+  return (e = +e) == 1 ? Ru : function(t, n) {
+    return n - t ? Vh(t, n, e) : zu(isNaN(t) ? n : t);
+  };
+}
+function Ru(e, t) {
+  var n = t - e;
+  return n ? Hh(e, n) : zu(isNaN(e) ? t : e);
+}
+const Qa = function e(t) {
+  var n = Dh(t);
+  function r(o, i) {
+    var s = n((o = Cs(o)).r, (i = Cs(i)).r), a = n(o.g, i.g), l = n(o.b, i.b), u = Ru(o.opacity, i.opacity);
+    return function(c) {
+      return o.r = s(c), o.g = a(c), o.b = l(c), o.opacity = u(c), o + "";
+    };
+  }
+  return r.gamma = e, r;
+}(1);
+function Yn(e, t) {
+  return e = +e, t = +t, function(n) {
+    return e * (1 - n) + t * n;
+  };
+}
+var ks = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g, rs = new RegExp(ks.source, "g");
+function Ah(e) {
+  return function() {
+    return e;
+  };
+}
+function Lh(e) {
+  return function(t) {
+    return e(t) + "";
+  };
+}
+function Oh(e, t) {
+  var n = ks.lastIndex = rs.lastIndex = 0, r, o, i, s = -1, a = [], l = [];
+  for (e = e + "", t = t + ""; (r = ks.exec(e)) && (o = rs.exec(t)); )
+    (i = o.index) > n && (i = t.slice(n, i), a[s] ? a[s] += i : a[++s] = i), (r = r[0]) === (o = o[0]) ? a[s] ? a[s] += o : a[++s] = o : (a[++s] = null, l.push({ i: s, x: Yn(r, o) })), n = rs.lastIndex;
+  return n < t.length && (i = t.slice(n), a[s] ? a[s] += i : a[++s] = i), a.length < 2 ? l[0] ? Lh(l[0].x) : Ah(t) : (t = l.length, function(u) {
+    for (var c = 0, f; c < t; ++c) a[(f = l[c]).i] = f.x(u);
+    return a.join("");
+  });
+}
+var el = 180 / Math.PI, $s = {
+  translateX: 0,
+  translateY: 0,
+  rotate: 0,
+  skewX: 0,
+  scaleX: 1,
+  scaleY: 1
+};
+function Bu(e, t, n, r, o, i) {
+  var s, a, l;
+  return (s = Math.sqrt(e * e + t * t)) && (e /= s, t /= s), (l = e * n + t * r) && (n -= e * l, r -= t * l), (a = Math.sqrt(n * n + r * r)) && (n /= a, r /= a, l /= a), e * r < t * n && (e = -e, t = -t, l = -l, s = -s), {
+    translateX: o,
+    translateY: i,
+    rotate: Math.atan2(t, e) * el,
+    skewX: Math.atan(l) * el,
+    scaleX: s,
+    scaleY: a
+  };
+}
+var Fo;
+function Ih(e) {
+  const t = new (typeof DOMMatrix == "function" ? DOMMatrix : WebKitCSSMatrix)(e + "");
+  return t.isIdentity ? $s : Bu(t.a, t.b, t.c, t.d, t.e, t.f);
+}
+function zh(e) {
+  return e == null || (Fo || (Fo = document.createElementNS("http://www.w3.org/2000/svg", "g")), Fo.setAttribute("transform", e), !(e = Fo.transform.baseVal.consolidate())) ? $s : (e = e.matrix, Bu(e.a, e.b, e.c, e.d, e.e, e.f));
+}
+function Yu(e, t, n, r) {
+  function o(u) {
+    return u.length ? u.pop() + " " : "";
+  }
+  function i(u, c, f, d, g, p) {
+    if (u !== f || c !== d) {
+      var x = g.push("translate(", null, t, null, n);
+      p.push({ i: x - 4, x: Yn(u, f) }, { i: x - 2, x: Yn(c, d) });
+    } else (f || d) && g.push("translate(" + f + t + d + n);
+  }
+  function s(u, c, f, d) {
+    u !== c ? (u - c > 180 ? c += 360 : c - u > 180 && (u += 360), d.push({ i: f.push(o(f) + "rotate(", null, r) - 2, x: Yn(u, c) })) : c && f.push(o(f) + "rotate(" + c + r);
+  }
+  function a(u, c, f, d) {
+    u !== c ? d.push({ i: f.push(o(f) + "skewX(", null, r) - 2, x: Yn(u, c) }) : c && f.push(o(f) + "skewX(" + c + r);
+  }
+  function l(u, c, f, d, g, p) {
+    if (u !== f || c !== d) {
+      var x = g.push(o(g) + "scale(", null, ",", null, ")");
+      p.push({ i: x - 4, x: Yn(u, f) }, { i: x - 2, x: Yn(c, d) });
+    } else (f !== 1 || d !== 1) && g.push(o(g) + "scale(" + f + "," + d + ")");
+  }
+  return function(u, c) {
+    var f = [], d = [];
+    return u = e(u), c = e(c), i(u.translateX, u.translateY, c.translateX, c.translateY, f, d), s(u.rotate, c.rotate, f, d), a(u.skewX, c.skewX, f, d), l(u.scaleX, u.scaleY, c.scaleX, c.scaleY, f, d), u = c = null, function(g) {
+      for (var p = -1, x = d.length, C; ++p < x; ) f[(C = d[p]).i] = C.x(g);
+      return f.join("");
+    };
+  };
+}
+var Rh = Yu(Ih, "px, ", "px)", "deg)"), Bh = Yu(zh, ", ", ")", ")"), Yh = 1e-12;
+function tl(e) {
+  return ((e = Math.exp(e)) + 1 / e) / 2;
+}
+function Zh(e) {
+  return ((e = Math.exp(e)) - 1 / e) / 2;
+}
+function Xh(e) {
+  return ((e = Math.exp(2 * e)) - 1) / (e + 1);
+}
+const Fh = function e(t, n, r) {
+  function o(i, s) {
+    var a = i[0], l = i[1], u = i[2], c = s[0], f = s[1], d = s[2], g = c - a, p = f - l, x = g * g + p * p, C, $;
+    if (x < Yh)
+      $ = Math.log(d / u) / t, C = function(E) {
+        return [
+          a + E * g,
+          l + E * p,
+          u * Math.exp(t * E * $)
+        ];
+      };
+    else {
+      var m = Math.sqrt(x), _ = (d * d - u * u + r * x) / (2 * u * n * m), v = (d * d - u * u - r * x) / (2 * d * n * m), b = Math.log(Math.sqrt(_ * _ + 1) - _), N = Math.log(Math.sqrt(v * v + 1) - v);
+      $ = (N - b) / t, C = function(E) {
+        var M = E * $, D = tl(b), V = u / (n * m) * (D * Xh(t * M + b) - Zh(b));
+        return [
+          a + V * g,
+          l + V * p,
+          u * D / tl(t * M + b)
+        ];
+      };
+    }
+    return C.duration = $ * 1e3 * t / Math.SQRT2, C;
+  }
+  return o.rho = function(i) {
+    var s = Math.max(1e-3, +i), a = s * s, l = a * a;
+    return e(s, a, l);
+  }, o;
+}(Math.SQRT2, 2, 4);
+var Vr = 0, to = 0, Jr = 0, Zu = 1e3, fi, no, gi = 0, ur = 0, Ri = 0, po = typeof performance == "object" && performance.now ? performance : Date, Xu = typeof window == "object" && window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : function(e) {
+  setTimeout(e, 17);
+};
+function oa() {
+  return ur || (Xu(Wh), ur = po.now() + Ri);
+}
+function Wh() {
+  ur = 0;
+}
+function hi() {
+  this._call = this._time = this._next = null;
+}
+hi.prototype = Fu.prototype = {
+  constructor: hi,
+  restart: function(e, t, n) {
+    if (typeof e != "function") throw new TypeError("callback is not a function");
+    n = (n == null ? oa() : +n) + (t == null ? 0 : +t), !this._next && no !== this && (no ? no._next = this : fi = this, no = this), this._call = e, this._time = n, Es();
+  },
+  stop: function() {
+    this._call && (this._call = null, this._time = 1 / 0, Es());
+  }
+};
+function Fu(e, t, n) {
+  var r = new hi();
+  return r.restart(e, t, n), r;
+}
+function Kh() {
+  oa(), ++Vr;
+  for (var e = fi, t; e; )
+    (t = ur - e._time) >= 0 && e._call.call(void 0, t), e = e._next;
+  --Vr;
+}
+function nl() {
+  ur = (gi = po.now()) + Ri, Vr = to = 0;
+  try {
+    Kh();
+  } finally {
+    Vr = 0, Gh(), ur = 0;
+  }
+}
+function qh() {
+  var e = po.now(), t = e - gi;
+  t > Zu && (Ri -= t, gi = e);
+}
+function Gh() {
+  for (var e, t = fi, n, r = 1 / 0; t; )
+    t._call ? (r > t._time && (r = t._time), e = t, t = t._next) : (n = t._next, t._next = null, t = e ? e._next = n : fi = n);
+  no = e, Es(r);
+}
+function Es(e) {
+  if (!Vr) {
+    to && (to = clearTimeout(to));
+    var t = e - ur;
+    t > 24 ? (e < 1 / 0 && (to = setTimeout(nl, e - po.now() - Ri)), Jr && (Jr = clearInterval(Jr))) : (Jr || (gi = po.now(), Jr = setInterval(qh, Zu)), Vr = 1, Xu(nl));
+  }
+}
+function rl(e, t, n) {
+  var r = new hi();
+  return t = t == null ? 0 : +t, r.restart((o) => {
+    r.stop(), e(o + t);
+  }, t, n), r;
+}
+var Uh = Ii("start", "end", "cancel", "interrupt"), jh = [], Wu = 0, ol = 1, Ss = 2, jo = 3, il = 4, Ps = 5, Jo = 6;
+function Bi(e, t, n, r, o, i) {
+  var s = e.__transition;
+  if (!s) e.__transition = {};
+  else if (n in s) return;
+  Jh(e, n, {
+    name: t,
+    index: r,
+    // For context during callback.
+    group: o,
+    // For context during callback.
+    on: Uh,
+    tween: jh,
+    time: i.time,
+    delay: i.delay,
+    duration: i.duration,
+    ease: i.ease,
+    timer: null,
+    state: Wu
+  });
+}
+function ia(e, t) {
+  var n = cn(e, t);
+  if (n.state > Wu) throw new Error("too late; already scheduled");
+  return n;
+}
+function Cn(e, t) {
+  var n = cn(e, t);
+  if (n.state > jo) throw new Error("too late; already running");
+  return n;
+}
+function cn(e, t) {
+  var n = e.__transition;
+  if (!n || !(n = n[t])) throw new Error("transition not found");
+  return n;
+}
+function Jh(e, t, n) {
+  var r = e.__transition, o;
+  r[t] = n, n.timer = Fu(i, 0, n.time);
+  function i(u) {
+    n.state = ol, n.timer.restart(s, n.delay, n.time), n.delay <= u && s(u - n.delay);
+  }
+  function s(u) {
+    var c, f, d, g;
+    if (n.state !== ol) return l();
+    for (c in r)
+      if (g = r[c], g.name === n.name) {
+        if (g.state === jo) return rl(s);
+        g.state === il ? (g.state = Jo, g.timer.stop(), g.on.call("interrupt", e, e.__data__, g.index, g.group), delete r[c]) : +c < t && (g.state = Jo, g.timer.stop(), g.on.call("cancel", e, e.__data__, g.index, g.group), delete r[c]);
+      }
+    if (rl(function() {
+      n.state === jo && (n.state = il, n.timer.restart(a, n.delay, n.time), a(u));
+    }), n.state = Ss, n.on.call("start", e, e.__data__, n.index, n.group), n.state === Ss) {
+      for (n.state = jo, o = new Array(d = n.tween.length), c = 0, f = -1; c < d; ++c)
+        (g = n.tween[c].value.call(e, e.__data__, n.index, n.group)) && (o[++f] = g);
+      o.length = f + 1;
+    }
+  }
+  function a(u) {
+    for (var c = u < n.duration ? n.ease.call(null, u / n.duration) : (n.timer.restart(l), n.state = Ps, 1), f = -1, d = o.length; ++f < d; )
+      o[f].call(e, c);
+    n.state === Ps && (n.on.call("end", e, e.__data__, n.index, n.group), l());
+  }
+  function l() {
+    n.state = Jo, n.timer.stop(), delete r[t];
+    for (var u in r) return;
+    delete e.__transition;
+  }
+}
+function Qo(e, t) {
+  var n = e.__transition, r, o, i = !0, s;
+  if (n) {
+    t = t == null ? null : t + "";
+    for (s in n) {
+      if ((r = n[s]).name !== t) {
+        i = !1;
+        continue;
+      }
+      o = r.state > Ss && r.state < Ps, r.state = Jo, r.timer.stop(), r.on.call(o ? "interrupt" : "cancel", e, e.__data__, r.index, r.group), delete n[s];
+    }
+    i && delete e.__transition;
+  }
+}
+function Qh(e) {
+  return this.each(function() {
+    Qo(this, e);
+  });
+}
+function ev(e, t) {
+  var n, r;
+  return function() {
+    var o = Cn(this, e), i = o.tween;
+    if (i !== n) {
+      r = n = i;
+      for (var s = 0, a = r.length; s < a; ++s)
+        if (r[s].name === t) {
+          r = r.slice(), r.splice(s, 1);
+          break;
+        }
+    }
+    o.tween = r;
+  };
+}
+function tv(e, t, n) {
+  var r, o;
+  if (typeof n != "function") throw new Error();
+  return function() {
+    var i = Cn(this, e), s = i.tween;
+    if (s !== r) {
+      o = (r = s).slice();
+      for (var a = { name: t, value: n }, l = 0, u = o.length; l < u; ++l)
+        if (o[l].name === t) {
+          o[l] = a;
+          break;
+        }
+      l === u && o.push(a);
+    }
+    i.tween = o;
+  };
+}
+function nv(e, t) {
+  var n = this._id;
+  if (e += "", arguments.length < 2) {
+    for (var r = cn(this.node(), n).tween, o = 0, i = r.length, s; o < i; ++o)
+      if ((s = r[o]).name === e)
+        return s.value;
+    return null;
+  }
+  return this.each((t == null ? ev : tv)(n, e, t));
+}
+function sa(e, t, n) {
+  var r = e._id;
+  return e.each(function() {
+    var o = Cn(this, r);
+    (o.value || (o.value = {}))[t] = n.apply(this, arguments);
+  }), function(o) {
+    return cn(o, r).value[t];
+  };
+}
+function Ku(e, t) {
+  var n;
+  return (typeof t == "number" ? Yn : t instanceof vo ? Qa : (n = vo(t)) ? (t = n, Qa) : Oh)(e, t);
+}
+function rv(e) {
+  return function() {
+    this.removeAttribute(e);
+  };
+}
+function ov(e) {
+  return function() {
+    this.removeAttributeNS(e.space, e.local);
+  };
+}
+function iv(e, t, n) {
+  var r, o = n + "", i;
+  return function() {
+    var s = this.getAttribute(e);
+    return s === o ? null : s === r ? i : i = t(r = s, n);
+  };
+}
+function sv(e, t, n) {
+  var r, o = n + "", i;
+  return function() {
+    var s = this.getAttributeNS(e.space, e.local);
+    return s === o ? null : s === r ? i : i = t(r = s, n);
+  };
+}
+function av(e, t, n) {
+  var r, o, i;
+  return function() {
+    var s, a = n(this), l;
+    return a == null ? void this.removeAttribute(e) : (s = this.getAttribute(e), l = a + "", s === l ? null : s === r && l === o ? i : (o = l, i = t(r = s, a)));
+  };
+}
+function lv(e, t, n) {
+  var r, o, i;
+  return function() {
+    var s, a = n(this), l;
+    return a == null ? void this.removeAttributeNS(e.space, e.local) : (s = this.getAttributeNS(e.space, e.local), l = a + "", s === l ? null : s === r && l === o ? i : (o = l, i = t(r = s, a)));
+  };
+}
+function uv(e, t) {
+  var n = zi(e), r = n === "transform" ? Bh : Ku;
+  return this.attrTween(e, typeof t == "function" ? (n.local ? lv : av)(n, r, sa(this, "attr." + e, t)) : t == null ? (n.local ? ov : rv)(n) : (n.local ? sv : iv)(n, r, t));
+}
+function cv(e, t) {
+  return function(n) {
+    this.setAttribute(e, t.call(this, n));
+  };
+}
+function dv(e, t) {
+  return function(n) {
+    this.setAttributeNS(e.space, e.local, t.call(this, n));
+  };
+}
+function fv(e, t) {
+  var n, r;
+  function o() {
+    var i = t.apply(this, arguments);
+    return i !== r && (n = (r = i) && dv(e, i)), n;
+  }
+  return o._value = t, o;
+}
+function gv(e, t) {
+  var n, r;
+  function o() {
+    var i = t.apply(this, arguments);
+    return i !== r && (n = (r = i) && cv(e, i)), n;
+  }
+  return o._value = t, o;
+}
+function hv(e, t) {
+  var n = "attr." + e;
+  if (arguments.length < 2) return (n = this.tween(n)) && n._value;
+  if (t == null) return this.tween(n, null);
+  if (typeof t != "function") throw new Error();
+  var r = zi(e);
+  return this.tween(n, (r.local ? fv : gv)(r, t));
+}
+function vv(e, t) {
+  return function() {
+    ia(this, e).delay = +t.apply(this, arguments);
+  };
+}
+function pv(e, t) {
+  return t = +t, function() {
+    ia(this, e).delay = t;
+  };
+}
+function mv(e) {
+  var t = this._id;
+  return arguments.length ? this.each((typeof e == "function" ? vv : pv)(t, e)) : cn(this.node(), t).delay;
+}
+function yv(e, t) {
+  return function() {
+    Cn(this, e).duration = +t.apply(this, arguments);
+  };
+}
+function wv(e, t) {
+  return t = +t, function() {
+    Cn(this, e).duration = t;
+  };
+}
+function _v(e) {
+  var t = this._id;
+  return arguments.length ? this.each((typeof e == "function" ? yv : wv)(t, e)) : cn(this.node(), t).duration;
+}
+function xv(e, t) {
+  if (typeof t != "function") throw new Error();
+  return function() {
+    Cn(this, e).ease = t;
+  };
+}
+function bv(e) {
+  var t = this._id;
+  return arguments.length ? this.each(xv(t, e)) : cn(this.node(), t).ease;
+}
+function Cv(e, t) {
+  return function() {
+    var n = t.apply(this, arguments);
+    if (typeof n != "function") throw new Error();
+    Cn(this, e).ease = n;
+  };
+}
+function kv(e) {
+  if (typeof e != "function") throw new Error();
+  return this.each(Cv(this._id, e));
+}
+function $v(e) {
+  typeof e != "function" && (e = $u(e));
+  for (var t = this._groups, n = t.length, r = new Array(n), o = 0; o < n; ++o)
+    for (var i = t[o], s = i.length, a = r[o] = [], l, u = 0; u < s; ++u)
+      (l = i[u]) && e.call(l, l.__data__, u, i) && a.push(l);
+  return new Ln(r, this._parents, this._name, this._id);
+}
+function Ev(e) {
+  if (e._id !== this._id) throw new Error();
+  for (var t = this._groups, n = e._groups, r = t.length, o = n.length, i = Math.min(r, o), s = new Array(r), a = 0; a < i; ++a)
+    for (var l = t[a], u = n[a], c = l.length, f = s[a] = new Array(c), d, g = 0; g < c; ++g)
+      (d = l[g] || u[g]) && (f[g] = d);
+  for (; a < r; ++a)
+    s[a] = t[a];
+  return new Ln(s, this._parents, this._name, this._id);
+}
+function Sv(e) {
+  return (e + "").trim().split(/^|\s+/).every(function(t) {
+    var n = t.indexOf(".");
+    return n >= 0 && (t = t.slice(0, n)), !t || t === "start";
+  });
+}
+function Pv(e, t, n) {
+  var r, o, i = Sv(t) ? ia : Cn;
+  return function() {
+    var s = i(this, e), a = s.on;
+    a !== r && (o = (r = a).copy()).on(t, n), s.on = o;
+  };
+}
+function Nv(e, t) {
+  var n = this._id;
+  return arguments.length < 2 ? cn(this.node(), n).on.on(e) : this.each(Pv(n, e, t));
+}
+function Mv(e) {
+  return function() {
+    var t = this.parentNode;
+    for (var n in this.__transition) if (+n !== e) return;
+    t && t.removeChild(this);
+  };
+}
+function Tv() {
+  return this.on("end.remove", Mv(this._id));
+}
+function Hv(e) {
+  var t = this._name, n = this._id;
+  typeof e != "function" && (e = ta(e));
+  for (var r = this._groups, o = r.length, i = new Array(o), s = 0; s < o; ++s)
+    for (var a = r[s], l = a.length, u = i[s] = new Array(l), c, f, d = 0; d < l; ++d)
+      (c = a[d]) && (f = e.call(c, c.__data__, d, a)) && ("__data__" in c && (f.__data__ = c.__data__), u[d] = f, Bi(u[d], t, n, d, u, cn(c, n)));
+  return new Ln(i, this._parents, t, n);
+}
+function Vv(e) {
+  var t = this._name, n = this._id;
+  typeof e != "function" && (e = ku(e));
+  for (var r = this._groups, o = r.length, i = [], s = [], a = 0; a < o; ++a)
+    for (var l = r[a], u = l.length, c, f = 0; f < u; ++f)
+      if (c = l[f]) {
+        for (var d = e.call(c, c.__data__, f, l), g, p = cn(c, n), x = 0, C = d.length; x < C; ++x)
+          (g = d[x]) && Bi(g, t, n, x, d, p);
+        i.push(d), s.push(c);
+      }
+  return new Ln(i, s, t, n);
+}
+var Dv = Eo.prototype.constructor;
+function Av() {
+  return new Dv(this._groups, this._parents);
+}
+function Lv(e, t) {
+  var n, r, o;
+  return function() {
+    var i = Hr(this, e), s = (this.style.removeProperty(e), Hr(this, e));
+    return i === s ? null : i === n && s === r ? o : o = t(n = i, r = s);
+  };
+}
+function qu(e) {
+  return function() {
+    this.style.removeProperty(e);
+  };
+}
+function Ov(e, t, n) {
+  var r, o = n + "", i;
+  return function() {
+    var s = Hr(this, e);
+    return s === o ? null : s === r ? i : i = t(r = s, n);
+  };
+}
+function Iv(e, t, n) {
+  var r, o, i;
+  return function() {
+    var s = Hr(this, e), a = n(this), l = a + "";
+    return a == null && (l = a = (this.style.removeProperty(e), Hr(this, e))), s === l ? null : s === r && l === o ? i : (o = l, i = t(r = s, a));
+  };
+}
+function zv(e, t) {
+  var n, r, o, i = "style." + t, s = "end." + i, a;
+  return function() {
+    var l = Cn(this, e), u = l.on, c = l.value[i] == null ? a || (a = qu(t)) : void 0;
+    (u !== n || o !== c) && (r = (n = u).copy()).on(s, o = c), l.on = r;
+  };
+}
+function Rv(e, t, n) {
+  var r = (e += "") == "transform" ? Rh : Ku;
+  return t == null ? this.styleTween(e, Lv(e, r)).on("end.style." + e, qu(e)) : typeof t == "function" ? this.styleTween(e, Iv(e, r, sa(this, "style." + e, t))).each(zv(this._id, e)) : this.styleTween(e, Ov(e, r, t), n).on("end.style." + e, null);
+}
+function Bv(e, t, n) {
+  return function(r) {
+    this.style.setProperty(e, t.call(this, r), n);
+  };
+}
+function Yv(e, t, n) {
+  var r, o;
+  function i() {
+    var s = t.apply(this, arguments);
+    return s !== o && (r = (o = s) && Bv(e, s, n)), r;
+  }
+  return i._value = t, i;
+}
+function Zv(e, t, n) {
+  var r = "style." + (e += "");
+  if (arguments.length < 2) return (r = this.tween(r)) && r._value;
+  if (t == null) return this.tween(r, null);
+  if (typeof t != "function") throw new Error();
+  return this.tween(r, Yv(e, t, n ?? ""));
+}
+function Xv(e) {
+  return function() {
+    this.textContent = e;
+  };
+}
+function Fv(e) {
+  return function() {
+    var t = e(this);
+    this.textContent = t ?? "";
+  };
+}
+function Wv(e) {
+  return this.tween("text", typeof e == "function" ? Fv(sa(this, "text", e)) : Xv(e == null ? "" : e + ""));
+}
+function Kv(e) {
+  return function(t) {
+    this.textContent = e.call(this, t);
+  };
+}
+function qv(e) {
+  var t, n;
+  function r() {
+    var o = e.apply(this, arguments);
+    return o !== n && (t = (n = o) && Kv(o)), t;
+  }
+  return r._value = e, r;
+}
+function Gv(e) {
+  var t = "text";
+  if (arguments.length < 1) return (t = this.tween(t)) && t._value;
+  if (e == null) return this.tween(t, null);
+  if (typeof e != "function") throw new Error();
+  return this.tween(t, qv(e));
+}
+function Uv() {
+  for (var e = this._name, t = this._id, n = Gu(), r = this._groups, o = r.length, i = 0; i < o; ++i)
+    for (var s = r[i], a = s.length, l, u = 0; u < a; ++u)
+      if (l = s[u]) {
+        var c = cn(l, t);
+        Bi(l, e, n, u, s, {
+          time: c.time + c.delay + c.duration,
+          delay: 0,
+          duration: c.duration,
+          ease: c.ease
+        });
+      }
+  return new Ln(r, this._parents, e, n);
+}
+function jv() {
+  var e, t, n = this, r = n._id, o = n.size();
+  return new Promise(function(i, s) {
+    var a = { value: s }, l = { value: function() {
+      --o === 0 && i();
+    } };
+    n.each(function() {
+      var u = Cn(this, r), c = u.on;
+      c !== e && (t = (e = c).copy(), t._.cancel.push(a), t._.interrupt.push(a), t._.end.push(l)), u.on = t;
+    }), o === 0 && i();
+  });
+}
+var Jv = 0;
+function Ln(e, t, n, r) {
+  this._groups = e, this._parents = t, this._name = n, this._id = r;
+}
+function Gu() {
+  return ++Jv;
+}
+var $n = Eo.prototype;
+Ln.prototype = {
+  constructor: Ln,
+  select: Hv,
+  selectAll: Vv,
+  selectChild: $n.selectChild,
+  selectChildren: $n.selectChildren,
+  filter: $v,
+  merge: Ev,
+  selection: Av,
+  transition: Uv,
+  call: $n.call,
+  nodes: $n.nodes,
+  node: $n.node,
+  size: $n.size,
+  empty: $n.empty,
+  each: $n.each,
+  on: Nv,
+  attr: uv,
+  attrTween: hv,
+  style: Rv,
+  styleTween: Zv,
+  text: Wv,
+  textTween: Gv,
+  remove: Tv,
+  tween: nv,
+  delay: mv,
+  duration: _v,
+  ease: bv,
+  easeVarying: kv,
+  end: jv,
+  [Symbol.iterator]: $n[Symbol.iterator]
+};
+function Qv(e) {
+  return ((e *= 2) <= 1 ? e * e * e : (e -= 2) * e * e + 2) / 2;
+}
+var e0 = {
+  time: null,
+  // Set on use.
+  delay: 0,
+  duration: 250,
+  ease: Qv
+};
+function t0(e, t) {
+  for (var n; !(n = e.__transition) || !(n = n[t]); )
+    if (!(e = e.parentNode))
+      throw new Error(`transition ${t} not found`);
+  return n;
+}
+function n0(e) {
+  var t, n;
+  e instanceof Ln ? (t = e._id, e = e._name) : (t = Gu(), (n = e0).time = oa(), e = e == null ? null : e + "");
+  for (var r = this._groups, o = r.length, i = 0; i < o; ++i)
+    for (var s = r[i], a = s.length, l, u = 0; u < a; ++u)
+      (l = s[u]) && Bi(l, e, t, u, s, n || t0(l, t));
+  return new Ln(r, this._parents, e, t);
+}
+Eo.prototype.interrupt = Qh;
+Eo.prototype.transition = n0;
+const Wo = (e) => () => e;
+function r0(e, {
+  sourceEvent: t,
+  target: n,
+  transform: r,
+  dispatch: o
+}) {
+  Object.defineProperties(this, {
+    type: { value: e, enumerable: !0, configurable: !0 },
+    sourceEvent: { value: t, enumerable: !0, configurable: !0 },
+    target: { value: n, enumerable: !0, configurable: !0 },
+    transform: { value: r, enumerable: !0, configurable: !0 },
+    _: { value: o }
+  });
+}
+function Pn(e, t, n) {
+  this.k = e, this.x = t, this.y = n;
+}
+Pn.prototype = {
+  constructor: Pn,
+  scale: function(e) {
+    return e === 1 ? this : new Pn(this.k * e, this.x, this.y);
+  },
+  translate: function(e, t) {
+    return e === 0 & t === 0 ? this : new Pn(this.k, this.x + this.k * e, this.y + this.k * t);
+  },
+  apply: function(e) {
+    return [e[0] * this.k + this.x, e[1] * this.k + this.y];
+  },
+  applyX: function(e) {
+    return e * this.k + this.x;
+  },
+  applyY: function(e) {
+    return e * this.k + this.y;
+  },
+  invert: function(e) {
+    return [(e[0] - this.x) / this.k, (e[1] - this.y) / this.k];
+  },
+  invertX: function(e) {
+    return (e - this.x) / this.k;
+  },
+  invertY: function(e) {
+    return (e - this.y) / this.k;
+  },
+  rescaleX: function(e) {
+    return e.copy().domain(e.range().map(this.invertX, this).map(e.invert, e));
+  },
+  rescaleY: function(e) {
+    return e.copy().domain(e.range().map(this.invertY, this).map(e.invert, e));
+  },
+  toString: function() {
+    return "translate(" + this.x + "," + this.y + ") scale(" + this.k + ")";
+  }
+};
+var Yi = new Pn(1, 0, 0);
+Uu.prototype = Pn.prototype;
+function Uu(e) {
+  for (; !e.__zoom; ) if (!(e = e.parentNode)) return Yi;
+  return e.__zoom;
+}
+function os(e) {
+  e.stopImmediatePropagation();
+}
+function Qr(e) {
+  e.preventDefault(), e.stopImmediatePropagation();
+}
+function o0(e) {
+  return (!e.ctrlKey || e.type === "wheel") && !e.button;
+}
+function i0() {
+  var e = this;
+  return e instanceof SVGElement ? (e = e.ownerSVGElement || e, e.hasAttribute("viewBox") ? (e = e.viewBox.baseVal, [[e.x, e.y], [e.x + e.width, e.y + e.height]]) : [[0, 0], [e.width.baseVal.value, e.height.baseVal.value]]) : [[0, 0], [e.clientWidth, e.clientHeight]];
+}
+function sl() {
+  return this.__zoom || Yi;
+}
+function s0(e) {
+  return -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 2e-3) * (e.ctrlKey ? 10 : 1);
+}
+function a0() {
+  return navigator.maxTouchPoints || "ontouchstart" in this;
+}
+function l0(e, t, n) {
+  var r = e.invertX(t[0][0]) - n[0][0], o = e.invertX(t[1][0]) - n[1][0], i = e.invertY(t[0][1]) - n[0][1], s = e.invertY(t[1][1]) - n[1][1];
+  return e.translate(
+    o > r ? (r + o) / 2 : Math.min(0, r) || Math.max(0, o),
+    s > i ? (i + s) / 2 : Math.min(0, i) || Math.max(0, s)
+  );
+}
+function ju() {
+  var e = o0, t = i0, n = l0, r = s0, o = a0, i = [0, 1 / 0], s = [[-1 / 0, -1 / 0], [1 / 0, 1 / 0]], a = 250, l = Fh, u = Ii("start", "zoom", "end"), c, f, d, g = 500, p = 150, x = 0, C = 10;
+  function $(S) {
+    S.property("__zoom", sl).on("wheel.zoom", M, { passive: !1 }).on("mousedown.zoom", D).on("dblclick.zoom", V).filter(o).on("touchstart.zoom", A).on("touchmove.zoom", O).on("touchend.zoom touchcancel.zoom", R).style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
+  }
+  $.transform = function(S, T, k, P) {
+    var H = S.selection ? S.selection() : S;
+    H.property("__zoom", sl), S !== H ? b(S, T, k, P) : H.interrupt().each(function() {
+      N(this, arguments).event(P).start().zoom(null, typeof T == "function" ? T.apply(this, arguments) : T).end();
+    });
+  }, $.scaleBy = function(S, T, k, P) {
+    $.scaleTo(S, function() {
+      var H = this.__zoom.k, I = typeof T == "function" ? T.apply(this, arguments) : T;
+      return H * I;
+    }, k, P);
+  }, $.scaleTo = function(S, T, k, P) {
+    $.transform(S, function() {
+      var H = t.apply(this, arguments), I = this.__zoom, B = k == null ? v(H) : typeof k == "function" ? k.apply(this, arguments) : k, F = I.invert(B), K = typeof T == "function" ? T.apply(this, arguments) : T;
+      return n(_(m(I, K), B, F), H, s);
+    }, k, P);
+  }, $.translateBy = function(S, T, k, P) {
+    $.transform(S, function() {
+      return n(this.__zoom.translate(
+        typeof T == "function" ? T.apply(this, arguments) : T,
+        typeof k == "function" ? k.apply(this, arguments) : k
+      ), t.apply(this, arguments), s);
+    }, null, P);
+  }, $.translateTo = function(S, T, k, P, H) {
+    $.transform(S, function() {
+      var I = t.apply(this, arguments), B = this.__zoom, F = P == null ? v(I) : typeof P == "function" ? P.apply(this, arguments) : P;
+      return n(Yi.translate(F[0], F[1]).scale(B.k).translate(
+        typeof T == "function" ? -T.apply(this, arguments) : -T,
+        typeof k == "function" ? -k.apply(this, arguments) : -k
+      ), I, s);
+    }, P, H);
+  };
+  function m(S, T) {
+    return T = Math.max(i[0], Math.min(i[1], T)), T === S.k ? S : new Pn(T, S.x, S.y);
+  }
+  function _(S, T, k) {
+    var P = T[0] - k[0] * S.k, H = T[1] - k[1] * S.k;
+    return P === S.x && H === S.y ? S : new Pn(S.k, P, H);
+  }
+  function v(S) {
+    return [(+S[0][0] + +S[1][0]) / 2, (+S[0][1] + +S[1][1]) / 2];
+  }
+  function b(S, T, k, P) {
+    S.on("start.zoom", function() {
+      N(this, arguments).event(P).start();
+    }).on("interrupt.zoom end.zoom", function() {
+      N(this, arguments).event(P).end();
+    }).tween("zoom", function() {
+      var H = this, I = arguments, B = N(H, I).event(P), F = t.apply(H, I), K = k == null ? v(F) : typeof k == "function" ? k.apply(H, I) : k, ie = Math.max(F[1][0] - F[0][0], F[1][1] - F[0][1]), ee = H.__zoom, W = typeof T == "function" ? T.apply(H, I) : T, ue = l(ee.invert(K).concat(ie / ee.k), W.invert(K).concat(ie / W.k));
+      return function(me) {
+        if (me === 1) me = W;
+        else {
+          var Ce = ue(me), ge = ie / Ce[2];
+          me = new Pn(ge, K[0] - Ce[0] * ge, K[1] - Ce[1] * ge);
+        }
+        B.zoom(null, me);
+      };
+    });
+  }
+  function N(S, T, k) {
+    return !k && S.__zooming || new E(S, T);
+  }
+  function E(S, T) {
+    this.that = S, this.args = T, this.active = 0, this.sourceEvent = null, this.extent = t.apply(S, T), this.taps = 0;
+  }
+  E.prototype = {
+    event: function(S) {
+      return S && (this.sourceEvent = S), this;
+    },
+    start: function() {
+      return ++this.active === 1 && (this.that.__zooming = this, this.emit("start")), this;
+    },
+    zoom: function(S, T) {
+      return this.mouse && S !== "mouse" && (this.mouse[1] = T.invert(this.mouse[0])), this.touch0 && S !== "touch" && (this.touch0[1] = T.invert(this.touch0[0])), this.touch1 && S !== "touch" && (this.touch1[1] = T.invert(this.touch1[0])), this.that.__zoom = T, this.emit("zoom"), this;
+    },
+    end: function() {
+      return --this.active === 0 && (delete this.that.__zooming, this.emit("end")), this;
+    },
+    emit: function(S) {
+      var T = Kt(this.that).datum();
+      u.call(
+        S,
+        this.that,
+        new r0(S, {
+          sourceEvent: this.sourceEvent,
+          target: $,
+          transform: this.that.__zoom,
+          dispatch: u
+        }),
+        T
+      );
+    }
+  };
+  function M(S, ...T) {
+    if (!e.apply(this, arguments)) return;
+    var k = N(this, T).event(S), P = this.__zoom, H = Math.max(i[0], Math.min(i[1], P.k * Math.pow(2, r.apply(this, arguments)))), I = Qt(S);
+    if (k.wheel)
+      (k.mouse[0][0] !== I[0] || k.mouse[0][1] !== I[1]) && (k.mouse[1] = P.invert(k.mouse[0] = I)), clearTimeout(k.wheel);
+    else {
+      if (P.k === H) return;
+      k.mouse = [I, P.invert(I)], Qo(this), k.start();
+    }
+    Qr(S), k.wheel = setTimeout(B, p), k.zoom("mouse", n(_(m(P, H), k.mouse[0], k.mouse[1]), k.extent, s));
+    function B() {
+      k.wheel = null, k.end();
+    }
+  }
+  function D(S, ...T) {
+    if (d || !e.apply(this, arguments)) return;
+    var k = S.currentTarget, P = N(this, T, !0).event(S), H = Kt(S.view).on("mousemove.zoom", K, !0).on("mouseup.zoom", ie, !0), I = Qt(S, k), B = S.clientX, F = S.clientY;
+    Au(S.view), os(S), P.mouse = [I, this.__zoom.invert(I)], Qo(this), P.start();
+    function K(ee) {
+      if (Qr(ee), !P.moved) {
+        var W = ee.clientX - B, ue = ee.clientY - F;
+        P.moved = W * W + ue * ue > x;
+      }
+      P.event(ee).zoom("mouse", n(_(P.that.__zoom, P.mouse[0] = Qt(ee, k), P.mouse[1]), P.extent, s));
+    }
+    function ie(ee) {
+      H.on("mousemove.zoom mouseup.zoom", null), Lu(ee.view, P.moved), Qr(ee), P.event(ee).end();
+    }
+  }
+  function V(S, ...T) {
+    if (e.apply(this, arguments)) {
+      var k = this.__zoom, P = Qt(S.changedTouches ? S.changedTouches[0] : S, this), H = k.invert(P), I = k.k * (S.shiftKey ? 0.5 : 2), B = n(_(m(k, I), P, H), t.apply(this, T), s);
+      Qr(S), a > 0 ? Kt(this).transition().duration(a).call(b, B, P, S) : Kt(this).call($.transform, B, P, S);
+    }
+  }
+  function A(S, ...T) {
+    if (e.apply(this, arguments)) {
+      var k = S.touches, P = k.length, H = N(this, T, S.changedTouches.length === P).event(S), I, B, F, K;
+      for (os(S), B = 0; B < P; ++B)
+        F = k[B], K = Qt(F, this), K = [K, this.__zoom.invert(K), F.identifier], H.touch0 ? !H.touch1 && H.touch0[2] !== K[2] && (H.touch1 = K, H.taps = 0) : (H.touch0 = K, I = !0, H.taps = 1 + !!c);
+      c && (c = clearTimeout(c)), I && (H.taps < 2 && (f = K[0], c = setTimeout(function() {
+        c = null;
+      }, g)), Qo(this), H.start());
+    }
+  }
+  function O(S, ...T) {
+    if (this.__zooming) {
+      var k = N(this, T).event(S), P = S.changedTouches, H = P.length, I, B, F, K;
+      for (Qr(S), I = 0; I < H; ++I)
+        B = P[I], F = Qt(B, this), k.touch0 && k.touch0[2] === B.identifier ? k.touch0[0] = F : k.touch1 && k.touch1[2] === B.identifier && (k.touch1[0] = F);
+      if (B = k.that.__zoom, k.touch1) {
+        var ie = k.touch0[0], ee = k.touch0[1], W = k.touch1[0], ue = k.touch1[1], me = (me = W[0] - ie[0]) * me + (me = W[1] - ie[1]) * me, Ce = (Ce = ue[0] - ee[0]) * Ce + (Ce = ue[1] - ee[1]) * Ce;
+        B = m(B, Math.sqrt(me / Ce)), F = [(ie[0] + W[0]) / 2, (ie[1] + W[1]) / 2], K = [(ee[0] + ue[0]) / 2, (ee[1] + ue[1]) / 2];
+      } else if (k.touch0) F = k.touch0[0], K = k.touch0[1];
+      else return;
+      k.zoom("touch", n(_(B, F, K), k.extent, s));
+    }
+  }
+  function R(S, ...T) {
+    if (this.__zooming) {
+      var k = N(this, T).event(S), P = S.changedTouches, H = P.length, I, B;
+      for (os(S), d && clearTimeout(d), d = setTimeout(function() {
+        d = null;
+      }, g), I = 0; I < H; ++I)
+        B = P[I], k.touch0 && k.touch0[2] === B.identifier ? delete k.touch0 : k.touch1 && k.touch1[2] === B.identifier && delete k.touch1;
+      if (k.touch1 && !k.touch0 && (k.touch0 = k.touch1, delete k.touch1), k.touch0) k.touch0[1] = this.__zoom.invert(k.touch0[0]);
+      else if (k.end(), k.taps === 2 && (B = Qt(B, this), Math.hypot(f[0] - B[0], f[1] - B[1]) < C)) {
+        var F = Kt(this).on("dblclick.zoom");
+        F && F.apply(this, arguments);
+      }
+    }
+  }
+  return $.wheelDelta = function(S) {
+    return arguments.length ? (r = typeof S == "function" ? S : Wo(+S), $) : r;
+  }, $.filter = function(S) {
+    return arguments.length ? (e = typeof S == "function" ? S : Wo(!!S), $) : e;
+  }, $.touchable = function(S) {
+    return arguments.length ? (o = typeof S == "function" ? S : Wo(!!S), $) : o;
+  }, $.extent = function(S) {
+    return arguments.length ? (t = typeof S == "function" ? S : Wo([[+S[0][0], +S[0][1]], [+S[1][0], +S[1][1]]]), $) : t;
+  }, $.scaleExtent = function(S) {
+    return arguments.length ? (i[0] = +S[0], i[1] = +S[1], $) : [i[0], i[1]];
+  }, $.translateExtent = function(S) {
+    return arguments.length ? (s[0][0] = +S[0][0], s[1][0] = +S[1][0], s[0][1] = +S[0][1], s[1][1] = +S[1][1], $) : [[s[0][0], s[0][1]], [s[1][0], s[1][1]]];
+  }, $.constrain = function(S) {
+    return arguments.length ? (n = S, $) : n;
+  }, $.duration = function(S) {
+    return arguments.length ? (a = +S, $) : a;
+  }, $.interpolate = function(S) {
+    return arguments.length ? (l = S, $) : l;
+  }, $.on = function() {
+    var S = u.on.apply(u, arguments);
+    return S === u ? $ : S;
+  }, $.clickDistance = function(S) {
+    return arguments.length ? (x = (S = +S) * S, $) : Math.sqrt(x);
+  }, $.tapDistance = function(S) {
+    return arguments.length ? (C = +S, $) : C;
+  }, $;
+}
+const Dr = {
+  error001: () => "[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001",
+  error002: () => "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.",
+  error003: (e) => `Node type "${e}" not found. Using fallback type "default".`,
+  error004: () => "The React Flow parent container needs a width and a height to render the graph.",
+  error005: () => "Only child nodes can use a parent extent.",
+  error006: () => "Can't create edge. An edge needs a source and a target.",
+  error007: (e) => `The old edge with id=${e} does not exist.`,
+  error009: (e) => `Marker type "${e}" doesn't exist.`,
+  error008: (e, { id: t, sourceHandle: n, targetHandle: r }) => `Couldn't create edge for ${e} handle id: "${e === "source" ? n : r}", edge id: ${t}.`,
+  error010: () => "Handle: No node id found. Make sure to only use a Handle inside a custom Node.",
+  error011: (e) => `Edge type "${e}" not found. Using fallback type "default".`,
+  error012: (e) => `Node with id "${e}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,
+  error013: (e = "react") => `It seems that you haven't loaded the styles. Please import '@xyflow/${e}/dist/style.css' or base.css to make sure everything is working properly.`,
+  error014: () => "useNodeConnections: No node ID found. Call useNodeConnections inside a custom Node or provide a node ID.",
+  error015: () => "It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs."
+}, vi = [
+  [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+  [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]
+];
+var cr;
+(function(e) {
+  e.Strict = "strict", e.Loose = "loose";
+})(cr || (cr = {}));
+var qn;
+(function(e) {
+  e.Free = "free", e.Vertical = "vertical", e.Horizontal = "horizontal";
+})(qn || (qn = {}));
+var pi;
+(function(e) {
+  e.Partial = "partial", e.Full = "full";
+})(pi || (pi = {}));
+const Ns = {
+  inProgress: !1,
+  isValid: null,
+  from: null,
+  fromHandle: null,
+  fromPosition: null,
+  fromNode: null,
+  to: null,
+  toHandle: null,
+  toPosition: null,
+  toNode: null
+};
+var Cr;
+(function(e) {
+  e.Bezier = "default", e.Straight = "straight", e.Step = "step", e.SmoothStep = "smoothstep", e.SimpleBezier = "simplebezier";
+})(Cr || (Cr = {}));
+var mo;
+(function(e) {
+  e.Arrow = "arrow", e.ArrowClosed = "arrowclosed";
+})(mo || (mo = {}));
+var $e;
+(function(e) {
+  e.Left = "left", e.Top = "top", e.Right = "right", e.Bottom = "bottom";
+})($e || ($e = {}));
+const al = {
+  [$e.Left]: $e.Right,
+  [$e.Right]: $e.Left,
+  [$e.Top]: $e.Bottom,
+  [$e.Bottom]: $e.Top
+};
+function u0(e, t) {
+  if (!e && !t)
+    return !0;
+  if (!e || !t || e.size !== t.size)
+    return !1;
+  if (!e.size && !t.size)
+    return !0;
+  for (const n of e.keys())
+    if (!t.has(n))
+      return !1;
+  return !0;
+}
+function ll(e, t, n) {
+  if (!n)
+    return;
+  const r = [];
+  e.forEach((o, i) => {
+    t != null && t.has(i) || r.push(o);
+  }), r.length && n(r);
+}
+function c0(e) {
+  return e === null ? null : e ? "valid" : "invalid";
+}
+const d0 = (e) => "id" in e && "source" in e && "target" in e, f0 = (e) => "id" in e && "position" in e && !("source" in e) && !("target" in e), aa = (e) => "id" in e && "internals" in e && !("source" in e) && !("target" in e), Po = (e, t = [0, 0]) => {
+  const { width: n, height: r } = tr(e), o = e.origin ?? t, i = n * o[0], s = r * o[1];
+  return {
+    x: e.position.x - i,
+    y: e.position.y - s
+  };
+}, g0 = (e, t = { nodeOrigin: [0, 0], nodeLookup: void 0 }) => {
+  if (e.length === 0)
+    return { x: 0, y: 0, width: 0, height: 0 };
+  const n = e.reduce((r, o) => {
+    const i = typeof o == "string";
+    let s = !t.nodeLookup && !i ? o : void 0;
+    t.nodeLookup && (s = i ? t.nodeLookup.get(o) : aa(o) ? o : t.nodeLookup.get(o.id));
+    const a = s ? mi(s, t.nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };
+    return Zi(r, a);
+  }, { x: 1 / 0, y: 1 / 0, x2: -1 / 0, y2: -1 / 0 });
+  return Xi(n);
+}, No = (e, t = {}) => {
+  if (e.size === 0)
+    return { x: 0, y: 0, width: 0, height: 0 };
+  let n = { x: 1 / 0, y: 1 / 0, x2: -1 / 0, y2: -1 / 0 };
+  return e.forEach((r) => {
+    if (t.filter === void 0 || t.filter(r)) {
+      const o = mi(r);
+      n = Zi(n, o);
+    }
+  }), Xi(n);
+}, Ju = (e, t, [n, r, o] = [0, 0, 1], i = !1, s = !1) => {
+  const a = {
+    ...Mo(t, [n, r, o]),
+    width: t.width / o,
+    height: t.height / o
+  }, l = [];
+  for (const u of e.values()) {
+    const { measured: c, selectable: f = !0, hidden: d = !1 } = u;
+    if (s && !f || d)
+      continue;
+    const g = c.width ?? u.width ?? u.initialWidth ?? null, p = c.height ?? u.height ?? u.initialHeight ?? null, x = yo(a, Lr(u)), C = (g ?? 0) * (p ?? 0), $ = i && x > 0;
+    (!u.internals.handleBounds || $ || x >= C || u.dragging) && l.push(u);
+  }
+  return l;
+}, Ms = (e, t) => {
+  const n = /* @__PURE__ */ new Set();
+  return e.forEach((r) => {
+    n.add(r.id);
+  }), t.filter((r) => n.has(r.source) || n.has(r.target));
+};
+function ul(e, t) {
+  const n = /* @__PURE__ */ new Map(), r = t != null && t.nodes ? new Set(t.nodes.map((o) => o.id)) : null;
+  return e.forEach((o) => {
+    o.measured.width && o.measured.height && ((t == null ? void 0 : t.includeHiddenNodes) || !o.hidden) && (!r || r.has(o.id)) && n.set(o.id, o);
+  }), n;
+}
+async function cl({ nodes: e, width: t, height: n, panZoom: r, minZoom: o, maxZoom: i }, s) {
+  if (e.size === 0)
+    return Promise.resolve(!1);
+  const a = No(e), l = ua(a, t, n, (s == null ? void 0 : s.minZoom) ?? o, (s == null ? void 0 : s.maxZoom) ?? i, (s == null ? void 0 : s.padding) ?? 0.1);
+  return await r.setViewport(l, { duration: s == null ? void 0 : s.duration }), Promise.resolve(!0);
+}
+function h0({ nodeId: e, nextPosition: t, nodeLookup: n, nodeOrigin: r = [0, 0], nodeExtent: o, onError: i }) {
+  const s = n.get(e), a = s.parentId ? n.get(s.parentId) : void 0, { x: l, y: u } = a ? a.internals.positionAbsolute : { x: 0, y: 0 }, c = s.origin ?? r;
+  let f = o;
+  if (s.extent === "parent" && !s.expandParent)
+    if (!a)
+      i == null || i("005", Dr.error005());
+    else {
+      const g = a.measured.width, p = a.measured.height;
+      g && p && (f = [
+        [l, u],
+        [l + g, u + p]
+      ]);
+    }
+  else a && Or(s.extent) && (f = [
+    [s.extent[0][0] + l, s.extent[0][1] + u],
+    [s.extent[1][0] + l, s.extent[1][1] + u]
+  ]);
+  const d = Or(f) ? dr(t, f, s.measured) : t;
+  return (s.measured.width === void 0 || s.measured.height === void 0) && (i == null || i("015", Dr.error015())), {
+    position: {
+      x: d.x - l + (s.measured.width ?? 0) * c[0],
+      y: d.y - u + (s.measured.height ?? 0) * c[1]
+    },
+    positionAbsolute: d
+  };
+}
+async function Qu({ nodesToRemove: e = [], edgesToRemove: t = [], nodes: n, edges: r, onBeforeDelete: o }) {
+  const i = new Set(e.map((d) => d.id)), s = [];
+  for (const d of n) {
+    if (d.deletable === !1)
+      continue;
+    const g = i.has(d.id), p = !g && d.parentId && s.find((x) => x.id === d.parentId);
+    (g || p) && s.push(d);
+  }
+  const a = new Set(t.map((d) => d.id)), l = r.filter((d) => d.deletable !== !1), c = Ms(s, l);
+  for (const d of l)
+    a.has(d.id) && !c.find((p) => p.id === d.id) && c.push(d);
+  if (!o)
+    return {
+      edges: c,
+      nodes: s
+    };
+  const f = await o({
+    nodes: s,
+    edges: c
+  });
+  return typeof f == "boolean" ? f ? { edges: c, nodes: s } : { edges: [], nodes: [] } : f;
+}
+const Ar = (e, t = 0, n = 1) => Math.min(Math.max(e, t), n), dr = (e = { x: 0, y: 0 }, t, n) => ({
+  x: Ar(e.x, t[0][0], t[1][0] - ((n == null ? void 0 : n.width) ?? 0)),
+  y: Ar(e.y, t[0][1], t[1][1] - ((n == null ? void 0 : n.height) ?? 0))
+});
+function ec(e, t, n) {
+  const { width: r, height: o } = tr(n), { x: i, y: s } = n.internals.positionAbsolute;
+  return dr(e, [
+    [i, s],
+    [i + r, s + o]
+  ], t);
+}
+const dl = (e, t, n) => e < t ? Ar(Math.abs(e - t), 1, t) / t : e > n ? -Ar(Math.abs(e - n), 1, t) / t : 0, tc = (e, t, n = 15, r = 40) => {
+  const o = dl(e.x, r, t.width - r) * n, i = dl(e.y, r, t.height - r) * n;
+  return [o, i];
+}, Zi = (e, t) => ({
+  x: Math.min(e.x, t.x),
+  y: Math.min(e.y, t.y),
+  x2: Math.max(e.x2, t.x2),
+  y2: Math.max(e.y2, t.y2)
+}), Ts = ({ x: e, y: t, width: n, height: r }) => ({
+  x: e,
+  y: t,
+  x2: e + n,
+  y2: t + r
+}), Xi = ({ x: e, y: t, x2: n, y2: r }) => ({
+  x: e,
+  y: t,
+  width: n - e,
+  height: r - t
+}), Lr = (e, t = [0, 0]) => {
+  var o, i;
+  const { x: n, y: r } = aa(e) ? e.internals.positionAbsolute : Po(e, t);
+  return {
+    x: n,
+    y: r,
+    width: ((o = e.measured) == null ? void 0 : o.width) ?? e.width ?? e.initialWidth ?? 0,
+    height: ((i = e.measured) == null ? void 0 : i.height) ?? e.height ?? e.initialHeight ?? 0
+  };
+}, mi = (e, t = [0, 0]) => {
+  var o, i;
+  const { x: n, y: r } = aa(e) ? e.internals.positionAbsolute : Po(e, t);
+  return {
+    x: n,
+    y: r,
+    x2: n + (((o = e.measured) == null ? void 0 : o.width) ?? e.width ?? e.initialWidth ?? 0),
+    y2: r + (((i = e.measured) == null ? void 0 : i.height) ?? e.height ?? e.initialHeight ?? 0)
+  };
+}, nc = (e, t) => Xi(Zi(Ts(e), Ts(t))), yo = (e, t) => {
+  const n = Math.max(0, Math.min(e.x + e.width, t.x + t.width) - Math.max(e.x, t.x)), r = Math.max(0, Math.min(e.y + e.height, t.y + t.height) - Math.max(e.y, t.y));
+  return Math.ceil(n * r);
+}, fl = (e) => Nn(e.width) && Nn(e.height) && Nn(e.x) && Nn(e.y), Nn = (e) => !isNaN(e) && isFinite(e), v0 = (e, t) => {
+}, la = (e, t = [1, 1]) => ({
+  x: t[0] * Math.round(e.x / t[0]),
+  y: t[1] * Math.round(e.y / t[1])
+}), Mo = ({ x: e, y: t }, [n, r, o], i = !1, s = [1, 1]) => {
+  const a = {
+    x: (e - n) / o,
+    y: (t - r) / o
+  };
+  return i ? la(a, s) : a;
+}, rc = ({ x: e, y: t }, [n, r, o]) => ({
+  x: e * o + n,
+  y: t * o + r
+}), ua = (e, t, n, r, o, i) => {
+  const s = t / (e.width * (1 + i)), a = n / (e.height * (1 + i)), l = Math.min(s, a), u = Ar(l, r, o), c = e.x + e.width / 2, f = e.y + e.height / 2, d = t / 2 - c * u, g = n / 2 - f * u;
+  return { x: d, y: g, zoom: u };
+}, yi = () => {
+  var e;
+  return typeof navigator < "u" && ((e = navigator == null ? void 0 : navigator.userAgent) == null ? void 0 : e.indexOf("Mac")) >= 0;
+};
+function Or(e) {
+  return e !== void 0 && e !== "parent";
+}
+function tr(e) {
+  var t, n;
+  return {
+    width: ((t = e.measured) == null ? void 0 : t.width) ?? e.width ?? e.initialWidth ?? 0,
+    height: ((n = e.measured) == null ? void 0 : n.height) ?? e.height ?? e.initialHeight ?? 0
+  };
+}
+function oc(e) {
+  var t, n;
+  return (((t = e.measured) == null ? void 0 : t.width) ?? e.width ?? e.initialWidth) !== void 0 && (((n = e.measured) == null ? void 0 : n.height) ?? e.height ?? e.initialHeight) !== void 0;
+}
+function p0(e, t = { width: 0, height: 0 }, n, r, o) {
+  const i = { ...e }, s = r.get(n);
+  if (s) {
+    const a = s.origin || o;
+    i.x += s.internals.positionAbsolute.x - (t.width ?? 0) * a[0], i.y += s.internals.positionAbsolute.y - (t.height ?? 0) * a[1];
+  }
+  return i;
+}
+function is(e, { snapGrid: t = [0, 0], snapToGrid: n = !1, transform: r, containerBounds: o }) {
+  const { x: i, y: s } = Hn(e), a = Mo({ x: i - ((o == null ? void 0 : o.left) ?? 0), y: s - ((o == null ? void 0 : o.top) ?? 0) }, r), { x: l, y: u } = n ? la(a, t) : a;
+  return {
+    xSnapped: l,
+    ySnapped: u,
+    ...a
+  };
+}
+const ca = (e) => ({
+  width: e.offsetWidth,
+  height: e.offsetHeight
+}), m0 = (e) => {
+  var t;
+  return ((t = e == null ? void 0 : e.getRootNode) == null ? void 0 : t.call(e)) || (window == null ? void 0 : window.document);
+}, y0 = ["INPUT", "SELECT", "TEXTAREA"];
+function w0(e) {
+  var r, o;
+  const t = ((o = (r = e.composedPath) == null ? void 0 : r.call(e)) == null ? void 0 : o[0]) || e.target;
+  return (t == null ? void 0 : t.nodeType) !== 1 ? !1 : y0.includes(t.nodeName) || t.hasAttribute("contenteditable") || !!t.closest(".nokey");
+}
+const ic = (e) => "clientX" in e, Hn = (e, t) => {
+  var i, s;
+  const n = ic(e), r = n ? e.clientX : (i = e.touches) == null ? void 0 : i[0].clientX, o = n ? e.clientY : (s = e.touches) == null ? void 0 : s[0].clientY;
+  return {
+    x: r - ((t == null ? void 0 : t.left) ?? 0),
+    y: o - ((t == null ? void 0 : t.top) ?? 0)
+  };
+}, gl = (e, t, n, r, o) => {
+  const i = t.querySelectorAll(`.${e}`);
+  return !i || !i.length ? null : Array.from(i).map((s) => {
+    const a = s.getBoundingClientRect();
+    return {
+      id: s.getAttribute("data-handleid"),
+      type: e,
+      nodeId: o,
+      position: s.getAttribute("data-handlepos"),
+      x: (a.left - n.left) / r,
+      y: (a.top - n.top) / r,
+      ...ca(s)
+    };
+  });
+};
+function _0({ sourceX: e, sourceY: t, targetX: n, targetY: r, sourceControlX: o, sourceControlY: i, targetControlX: s, targetControlY: a }) {
+  const l = e * 0.125 + o * 0.375 + s * 0.375 + n * 0.125, u = t * 0.125 + i * 0.375 + a * 0.375 + r * 0.125, c = Math.abs(l - e), f = Math.abs(u - t);
+  return [l, u, c, f];
+}
+function Ko(e, t) {
+  return e >= 0 ? 0.5 * e : t * 25 * Math.sqrt(-e);
+}
+function hl({ pos: e, x1: t, y1: n, x2: r, y2: o, c: i }) {
+  switch (e) {
+    case $e.Left:
+      return [t - Ko(t - r, i), n];
+    case $e.Right:
+      return [t + Ko(r - t, i), n];
+    case $e.Top:
+      return [t, n - Ko(n - o, i)];
+    case $e.Bottom:
+      return [t, n + Ko(o - n, i)];
+  }
+}
+function sc({ sourceX: e, sourceY: t, sourcePosition: n = $e.Bottom, targetX: r, targetY: o, targetPosition: i = $e.Top, curvature: s = 0.25 }) {
+  const [a, l] = hl({
+    pos: n,
+    x1: e,
+    y1: t,
+    x2: r,
+    y2: o,
+    c: s
+  }), [u, c] = hl({
+    pos: i,
+    x1: r,
+    y1: o,
+    x2: e,
+    y2: t,
+    c: s
+  }), [f, d, g, p] = _0({
+    sourceX: e,
+    sourceY: t,
+    targetX: r,
+    targetY: o,
+    sourceControlX: a,
+    sourceControlY: l,
+    targetControlX: u,
+    targetControlY: c
+  });
+  return [
+    `M${e},${t} C${a},${l} ${u},${c} ${r},${o}`,
+    f,
+    d,
+    g,
+    p
+  ];
+}
+function ac({ sourceX: e, sourceY: t, targetX: n, targetY: r }) {
+  const o = Math.abs(n - e) / 2, i = n < e ? n + o : n - o, s = Math.abs(r - t) / 2, a = r < t ? r + s : r - s;
+  return [i, a, o, s];
+}
+function x0({ sourceNode: e, targetNode: t, selected: n = !1, zIndex: r = 0, elevateOnSelect: o = !1 }) {
+  if (!o)
+    return r;
+  const i = n || t.selected || e.selected, s = Math.max(e.internals.z || 0, t.internals.z || 0, 1e3);
+  return r + (i ? s : 0);
+}
+function b0({ sourceNode: e, targetNode: t, width: n, height: r, transform: o }) {
+  const i = Zi(mi(e), mi(t));
+  i.x === i.x2 && (i.x2 += 1), i.y === i.y2 && (i.y2 += 1);
+  const s = {
+    x: -o[0] / o[2],
+    y: -o[1] / o[2],
+    width: n / o[2],
+    height: r / o[2]
+  };
+  return yo(s, Xi(i)) > 0;
+}
+const C0 = ({ source: e, sourceHandle: t, target: n, targetHandle: r }) => `xy-edge__${e}${t || ""}-${n}${r || ""}`, k0 = (e, t) => t.some((n) => n.source === e.source && n.target === e.target && (n.sourceHandle === e.sourceHandle || !n.sourceHandle && !e.sourceHandle) && (n.targetHandle === e.targetHandle || !n.targetHandle && !e.targetHandle)), $0 = (e, t) => {
+  if (!e.source || !e.target)
+    return t;
+  let n;
+  return d0(e) ? n = { ...e } : n = {
+    ...e,
+    id: C0(e)
+  }, k0(n, t) ? t : (n.sourceHandle === null && delete n.sourceHandle, n.targetHandle === null && delete n.targetHandle, t.concat(n));
+};
+function Hs({ sourceX: e, sourceY: t, targetX: n, targetY: r }) {
+  const [o, i, s, a] = ac({
+    sourceX: e,
+    sourceY: t,
+    targetX: n,
+    targetY: r
+  });
+  return [`M ${e},${t}L ${n},${r}`, o, i, s, a];
+}
+const vl = {
+  [$e.Left]: { x: -1, y: 0 },
+  [$e.Right]: { x: 1, y: 0 },
+  [$e.Top]: { x: 0, y: -1 },
+  [$e.Bottom]: { x: 0, y: 1 }
+}, E0 = ({ source: e, sourcePosition: t = $e.Bottom, target: n }) => t === $e.Left || t === $e.Right ? e.x < n.x ? { x: 1, y: 0 } : { x: -1, y: 0 } : e.y < n.y ? { x: 0, y: 1 } : { x: 0, y: -1 }, pl = (e, t) => Math.sqrt(Math.pow(t.x - e.x, 2) + Math.pow(t.y - e.y, 2));
+function S0({ source: e, sourcePosition: t = $e.Bottom, target: n, targetPosition: r = $e.Top, center: o, offset: i }) {
+  const s = vl[t], a = vl[r], l = { x: e.x + s.x * i, y: e.y + s.y * i }, u = { x: n.x + a.x * i, y: n.y + a.y * i }, c = E0({
+    source: l,
+    sourcePosition: t,
+    target: u
+  }), f = c.x !== 0 ? "x" : "y", d = c[f];
+  let g = [], p, x;
+  const C = { x: 0, y: 0 }, $ = { x: 0, y: 0 }, [m, _, v, b] = ac({
+    sourceX: e.x,
+    sourceY: e.y,
+    targetX: n.x,
+    targetY: n.y
+  });
+  if (s[f] * a[f] === -1) {
+    p = o.x ?? m, x = o.y ?? _;
+    const E = [
+      { x: p, y: l.y },
+      { x: p, y: u.y }
+    ], M = [
+      { x: l.x, y: x },
+      { x: u.x, y: x }
+    ];
+    s[f] === d ? g = f === "x" ? E : M : g = f === "x" ? M : E;
+  } else {
+    const E = [{ x: l.x, y: u.y }], M = [{ x: u.x, y: l.y }];
+    if (f === "x" ? g = s.x === d ? M : E : g = s.y === d ? E : M, t === r) {
+      const R = Math.abs(e[f] - n[f]);
+      if (R <= i) {
+        const S = Math.min(i - 1, i - R);
+        s[f] === d ? C[f] = (l[f] > e[f] ? -1 : 1) * S : $[f] = (u[f] > n[f] ? -1 : 1) * S;
+      }
+    }
+    if (t !== r) {
+      const R = f === "x" ? "y" : "x", S = s[f] === a[R], T = l[R] > u[R], k = l[R] < u[R];
+      (s[f] === 1 && (!S && T || S && k) || s[f] !== 1 && (!S && k || S && T)) && (g = f === "x" ? E : M);
+    }
+    const D = { x: l.x + C.x, y: l.y + C.y }, V = { x: u.x + $.x, y: u.y + $.y }, A = Math.max(Math.abs(D.x - g[0].x), Math.abs(V.x - g[0].x)), O = Math.max(Math.abs(D.y - g[0].y), Math.abs(V.y - g[0].y));
+    A >= O ? (p = (D.x + V.x) / 2, x = g[0].y) : (p = g[0].x, x = (D.y + V.y) / 2);
+  }
+  return [[
+    e,
+    { x: l.x + C.x, y: l.y + C.y },
+    ...g,
+    { x: u.x + $.x, y: u.y + $.y },
+    n
+  ], p, x, v, b];
+}
+function P0(e, t, n, r) {
+  const o = Math.min(pl(e, t) / 2, pl(t, n) / 2, r), { x: i, y: s } = t;
+  if (e.x === i && i === n.x || e.y === s && s === n.y)
+    return `L${i} ${s}`;
+  if (e.y === s) {
+    const u = e.x < n.x ? -1 : 1, c = e.y < n.y ? 1 : -1;
+    return `L ${i + o * u},${s}Q ${i},${s} ${i},${s + o * c}`;
+  }
+  const a = e.x < n.x ? 1 : -1, l = e.y < n.y ? -1 : 1;
+  return `L ${i},${s + o * l}Q ${i},${s} ${i + o * a},${s}`;
+}
+function wi({ sourceX: e, sourceY: t, sourcePosition: n = $e.Bottom, targetX: r, targetY: o, targetPosition: i = $e.Top, borderRadius: s = 5, centerX: a, centerY: l, offset: u = 20 }) {
+  const [c, f, d, g, p] = S0({
+    source: { x: e, y: t },
+    sourcePosition: n,
+    target: { x: r, y: o },
+    targetPosition: i,
+    center: { x: a, y: l },
+    offset: u
+  });
+  return [c.reduce((C, $, m) => {
+    let _ = "";
+    return m > 0 && m < c.length - 1 ? _ = P0(c[m - 1], $, c[m + 1], s) : _ = `${m === 0 ? "M" : "L"}${$.x} ${$.y}`, C += _, C;
+  }, ""), f, d, g, p];
+}
+function ml(e) {
+  var t;
+  return e && !!(e.internals.handleBounds || (t = e.handles) != null && t.length) && !!(e.measured.width || e.width || e.initialWidth);
+}
+function N0(e) {
+  var f;
+  const { sourceNode: t, targetNode: n } = e;
+  if (!ml(t) || !ml(n))
+    return null;
+  const r = t.internals.handleBounds || yl(t.handles), o = n.internals.handleBounds || yl(n.handles), i = wl((r == null ? void 0 : r.source) ?? [], e.sourceHandle), s = wl(
+    // when connection type is loose we can define all handles as sources and connect source -> source
+    e.connectionMode === cr.Strict ? (o == null ? void 0 : o.target) ?? [] : ((o == null ? void 0 : o.target) ?? []).concat((o == null ? void 0 : o.source) ?? []),
+    e.targetHandle
+  );
+  if (!i || !s)
+    return (f = e.onError) == null || f.call(e, "008", Dr.error008(i ? "target" : "source", {
+      id: e.id,
+      sourceHandle: e.sourceHandle,
+      targetHandle: e.targetHandle
+    })), null;
+  const a = (i == null ? void 0 : i.position) || $e.Bottom, l = (s == null ? void 0 : s.position) || $e.Top, u = wo(t, i, a), c = wo(n, s, l);
+  return {
+    sourceX: u.x,
+    sourceY: u.y,
+    targetX: c.x,
+    targetY: c.y,
+    sourcePosition: a,
+    targetPosition: l
+  };
+}
+function yl(e) {
+  if (!e)
+    return null;
+  const t = [], n = [];
+  for (const r of e)
+    r.width = r.width ?? 1, r.height = r.height ?? 1, r.type === "source" ? t.push(r) : r.type === "target" && n.push(r);
+  return {
+    source: t,
+    target: n
+  };
+}
+function wo(e, t, n = $e.Left, r = !1) {
+  const o = ((t == null ? void 0 : t.x) ?? 0) + e.internals.positionAbsolute.x, i = ((t == null ? void 0 : t.y) ?? 0) + e.internals.positionAbsolute.y, { width: s, height: a } = t ?? tr(e);
+  if (r)
+    return { x: o + s / 2, y: i + a / 2 };
+  switch ((t == null ? void 0 : t.position) ?? n) {
+    case $e.Top:
+      return { x: o + s / 2, y: i };
+    case $e.Right:
+      return { x: o + s, y: i + a / 2 };
+    case $e.Bottom:
+      return { x: o + s / 2, y: i + a };
+    case $e.Left:
+      return { x: o, y: i + a / 2 };
+  }
+}
+function wl(e, t) {
+  return e && (t ? e.find((n) => n.id === t) : e[0]) || null;
+}
+function Vs(e, t) {
+  return e ? typeof e == "string" ? e : `${t ? `${t}__` : ""}${Object.keys(e).sort().map((r) => `${r}=${e[r]}`).join("&")}` : "";
+}
+function M0(e, { id: t, defaultColor: n, defaultMarkerStart: r, defaultMarkerEnd: o }) {
+  const i = /* @__PURE__ */ new Set();
+  return e.reduce((s, a) => ([a.markerStart || r, a.markerEnd || o].forEach((l) => {
+    if (l && typeof l == "object") {
+      const u = Vs(l, t);
+      i.has(u) || (s.push({ id: u, color: l.color || n, ...l }), i.add(u));
+    }
+  }), s), []).sort((s, a) => s.id.localeCompare(a.id));
+}
+function T0(e, t, n, r, o) {
+  let i = 0.5;
+  o === "start" ? i = 0 : o === "end" && (i = 1);
+  let s = [
+    (e.x + e.width * i) * t.zoom + t.x,
+    e.y * t.zoom + t.y - r
+  ], a = [-100 * i, -100];
+  switch (n) {
+    case $e.Right:
+      s = [
+        (e.x + e.width) * t.zoom + t.x + r,
+        (e.y + e.height * i) * t.zoom + t.y
+      ], a = [0, -100 * i];
+      break;
+    case $e.Bottom:
+      s[1] = (e.y + e.height) * t.zoom + t.y + r, a[1] = 0;
+      break;
+    case $e.Left:
+      s = [
+        e.x * t.zoom + t.x - r,
+        (e.y + e.height * i) * t.zoom + t.y
+      ], a = [-100, -100 * i];
+      break;
+  }
+  return `translate(${s[0]}px, ${s[1]}px) translate(${a[0]}%, ${a[1]}%)`;
+}
+const da = {
+  nodeOrigin: [0, 0],
+  nodeExtent: vi,
+  elevateNodesOnSelect: !0,
+  defaults: {}
+}, H0 = {
+  ...da,
+  checkEquality: !0
+};
+function fa(e, t) {
+  const n = { ...e };
+  for (const r in t)
+    t[r] !== void 0 && (n[r] = t[r]);
+  return n;
+}
+function V0(e, t, n) {
+  const r = fa(da, n);
+  for (const o of e.values())
+    if (o.parentId)
+      ga(o, e, t, r);
+    else {
+      const i = Po(o, r.nodeOrigin), s = Or(o.extent) ? o.extent : r.nodeExtent, a = dr(i, s, tr(o));
+      o.internals.positionAbsolute = a;
+    }
+}
+function lc(e, t, n, r) {
+  var a, l;
+  const o = fa(H0, r), i = new Map(t), s = o != null && o.elevateNodesOnSelect ? 1e3 : 0;
+  t.clear(), n.clear();
+  for (const u of e) {
+    let c = i.get(u.id);
+    if (o.checkEquality && u === (c == null ? void 0 : c.internals.userNode))
+      t.set(u.id, c);
+    else {
+      const f = Po(u, o.nodeOrigin), d = Or(u.extent) ? u.extent : o.nodeExtent, g = dr(f, d, tr(u));
+      c = {
+        ...o.defaults,
+        ...u,
+        measured: {
+          width: (a = u.measured) == null ? void 0 : a.width,
+          height: (l = u.measured) == null ? void 0 : l.height
+        },
+        internals: {
+          positionAbsolute: g,
+          // if user re-initializes the node or removes `measured` for whatever reason, we reset the handleBounds so that the node gets re-measured
+          handleBounds: u.measured ? c == null ? void 0 : c.internals.handleBounds : void 0,
+          z: uc(u, s),
+          userNode: u
+        }
+      }, t.set(u.id, c);
+    }
+    u.parentId && ga(c, t, n, r);
+  }
+}
+function D0(e, t) {
+  if (!e.parentId)
+    return;
+  const n = t.get(e.parentId);
+  n ? n.set(e.id, e) : t.set(e.parentId, /* @__PURE__ */ new Map([[e.id, e]]));
+}
+function ga(e, t, n, r) {
+  const { elevateNodesOnSelect: o, nodeOrigin: i, nodeExtent: s } = fa(da, r), a = e.parentId, l = t.get(a);
+  if (!l) {
+    console.warn(`Parent node ${a} not found. Please make sure that parent nodes are in front of their child nodes in the nodes array.`);
+    return;
+  }
+  D0(e, n);
+  const u = o ? 1e3 : 0, { x: c, y: f, z: d } = A0(e, l, i, s, u), { positionAbsolute: g } = e.internals, p = c !== g.x || f !== g.y;
+  (p || d !== e.internals.z) && t.set(e.id, {
+    ...e,
+    internals: {
+      ...e.internals,
+      positionAbsolute: p ? { x: c, y: f } : g,
+      z: d
+    }
+  });
+}
+function uc(e, t) {
+  return (Nn(e.zIndex) ? e.zIndex : 0) + (e.selected ? t : 0);
+}
+function A0(e, t, n, r, o) {
+  const { x: i, y: s } = t.internals.positionAbsolute, a = tr(e), l = Po(e, n), u = Or(e.extent) ? dr(l, e.extent, a) : l;
+  let c = dr({ x: i + u.x, y: s + u.y }, r, a);
+  e.extent === "parent" && (c = ec(c, a, t));
+  const f = uc(e, o), d = t.internals.z ?? 0;
+  return {
+    x: c.x,
+    y: c.y,
+    z: d > f ? d : f
+  };
+}
+function L0(e, t, n, r = [0, 0]) {
+  var s;
+  const o = [], i = /* @__PURE__ */ new Map();
+  for (const a of e) {
+    const l = t.get(a.parentId);
+    if (!l)
+      continue;
+    const u = ((s = i.get(a.parentId)) == null ? void 0 : s.expandedRect) ?? Lr(l), c = nc(u, a.rect);
+    i.set(a.parentId, { expandedRect: c, parent: l });
+  }
+  return i.size > 0 && i.forEach(({ expandedRect: a, parent: l }, u) => {
+    var _;
+    const c = l.internals.positionAbsolute, f = tr(l), d = l.origin ?? r, g = a.x < c.x ? Math.round(Math.abs(c.x - a.x)) : 0, p = a.y < c.y ? Math.round(Math.abs(c.y - a.y)) : 0, x = Math.max(f.width, Math.round(a.width)), C = Math.max(f.height, Math.round(a.height)), $ = (x - f.width) * d[0], m = (C - f.height) * d[1];
+    (g > 0 || p > 0 || $ || m) && (o.push({
+      id: u,
+      type: "position",
+      position: {
+        x: l.position.x - g + $,
+        y: l.position.y - p + m
+      }
+    }), (_ = n.get(u)) == null || _.forEach((v) => {
+      e.some((b) => b.id === v.id) || o.push({
+        id: v.id,
+        type: "position",
+        position: {
+          x: v.position.x + g,
+          y: v.position.y + p
+        }
+      });
+    })), (f.width < a.width || f.height < a.height || g || p) && o.push({
+      id: u,
+      type: "dimensions",
+      setAttributes: !0,
+      dimensions: {
+        width: x + (g ? d[0] * g - $ : 0),
+        height: C + (p ? d[1] * p - m : 0)
+      }
+    });
+  }), o;
+}
+function O0(e, t, n, r, o, i) {
+  const s = r == null ? void 0 : r.querySelector(".xyflow__viewport");
+  let a = !1;
+  if (!s)
+    return { changes: [], updatedInternals: a };
+  const l = [], u = window.getComputedStyle(s), { m22: c } = new window.DOMMatrixReadOnly(u.transform), f = [];
+  for (const d of e.values()) {
+    const g = t.get(d.id);
+    if (!g)
+      continue;
+    if (g.hidden) {
+      t.set(g.id, {
+        ...g,
+        internals: {
+          ...g.internals,
+          handleBounds: void 0
+        }
+      }), a = !0;
+      continue;
+    }
+    const p = ca(d.nodeElement), x = g.measured.width !== p.width || g.measured.height !== p.height;
+    if (!!(p.width && p.height && (x || !g.internals.handleBounds || d.force))) {
+      const $ = d.nodeElement.getBoundingClientRect(), m = Or(g.extent) ? g.extent : i;
+      let { positionAbsolute: _ } = g.internals;
+      g.parentId && g.extent === "parent" ? _ = ec(_, p, t.get(g.parentId)) : m && (_ = dr(_, m, p));
+      const v = {
+        ...g,
+        measured: p,
+        internals: {
+          ...g.internals,
+          positionAbsolute: _,
+          handleBounds: {
+            source: gl("source", d.nodeElement, $, c, g.id),
+            target: gl("target", d.nodeElement, $, c, g.id)
+          }
+        }
+      };
+      t.set(g.id, v), g.parentId && ga(v, t, n, { nodeOrigin: o }), a = !0, x && (l.push({
+        id: g.id,
+        type: "dimensions",
+        dimensions: p
+      }), g.expandParent && g.parentId && f.push({
+        id: g.id,
+        parentId: g.parentId,
+        rect: Lr(v, o)
+      }));
+    }
+  }
+  if (f.length > 0) {
+    const d = L0(f, t, n, o);
+    l.push(...d);
+  }
+  return { changes: l, updatedInternals: a };
+}
+async function I0({ delta: e, panZoom: t, transform: n, translateExtent: r, width: o, height: i }) {
+  if (!t || !e.x && !e.y)
+    return Promise.resolve(!1);
+  const s = await t.setViewportConstrained({
+    x: n[0] + e.x,
+    y: n[1] + e.y,
+    zoom: n[2]
+  }, [
+    [0, 0],
+    [o, i]
+  ], r), a = !!s && (s.x !== n[0] || s.y !== n[1] || s.k !== n[2]);
+  return Promise.resolve(a);
+}
+function _l(e, t, n, r, o, i) {
+  let s = o;
+  const a = r.get(s) || /* @__PURE__ */ new Map();
+  r.set(s, a.set(n, t)), s = `${o}-${e}`;
+  const l = r.get(s) || /* @__PURE__ */ new Map();
+  if (r.set(s, l.set(n, t)), i) {
+    s = `${o}-${e}-${i}`;
+    const u = r.get(s) || /* @__PURE__ */ new Map();
+    r.set(s, u.set(n, t));
+  }
+}
+function cc(e, t, n) {
+  e.clear(), t.clear();
+  for (const r of n) {
+    const { source: o, target: i, sourceHandle: s = null, targetHandle: a = null } = r, l = { edgeId: r.id, source: o, target: i, sourceHandle: s, targetHandle: a }, u = `${o}-${s}--${i}-${a}`, c = `${i}-${a}--${o}-${s}`;
+    _l("source", l, c, e, o, s), _l("target", l, u, e, i, a), t.set(r.id, r);
+  }
+}
+function z0(e, t) {
+  if (e === null || t === null)
+    return !1;
+  const n = Array.isArray(e) ? e : [e], r = Array.isArray(t) ? t : [t];
+  if (n.length !== r.length)
+    return !1;
+  for (let o = 0; o < n.length; o++)
+    if (n[o].id !== r[o].id || n[o].type !== r[o].type || !Object.is(n[o].data, r[o].data))
+      return !1;
+  return !0;
+}
+function dc(e, t) {
+  if (!e.parentId)
+    return !1;
+  const n = t.get(e.parentId);
+  return n ? n.selected ? !0 : dc(n, t) : !1;
+}
+function xl(e, t, n) {
+  var o;
+  let r = e;
+  do {
+    if ((o = r == null ? void 0 : r.matches) != null && o.call(r, t))
+      return !0;
+    if (r === n)
+      return !1;
+    r = r == null ? void 0 : r.parentElement;
+  } while (r);
+  return !1;
+}
+function R0(e, t, n, r) {
+  const o = /* @__PURE__ */ new Map();
+  for (const [i, s] of e)
+    if ((s.selected || s.id === r) && (!s.parentId || !dc(s, e)) && (s.draggable || t && typeof s.draggable > "u")) {
+      const a = e.get(i);
+      a && o.set(i, {
+        id: i,
+        position: a.position || { x: 0, y: 0 },
+        distance: {
+          x: n.x - a.internals.positionAbsolute.x,
+          y: n.y - a.internals.positionAbsolute.y
+        },
+        extent: a.extent,
+        parentId: a.parentId,
+        origin: a.origin,
+        expandParent: a.expandParent,
+        internals: {
+          positionAbsolute: a.internals.positionAbsolute || { x: 0, y: 0 }
+        },
+        measured: {
+          width: a.measured.width ?? 0,
+          height: a.measured.height ?? 0
+        }
+      });
+    }
+  return o;
+}
+function ss({ nodeId: e, dragItems: t, nodeLookup: n, dragging: r = !0 }) {
+  var s, a, l;
+  const o = [];
+  for (const [u, c] of t) {
+    const f = (s = n.get(u)) == null ? void 0 : s.internals.userNode;
+    f && o.push({
+      ...f,
+      position: c.position,
+      dragging: r
+    });
+  }
+  if (!e)
+    return [o[0], o];
+  const i = (a = n.get(e)) == null ? void 0 : a.internals.userNode;
+  return [
+    i ? {
+      ...i,
+      position: ((l = t.get(e)) == null ? void 0 : l.position) || i.position,
+      dragging: r
+    } : o[0],
+    o
+  ];
+}
+function B0({ onNodeMouseDown: e, getStoreItems: t, onDragStart: n, onDrag: r, onDragStop: o }) {
+  let i = { x: null, y: null }, s = 0, a = /* @__PURE__ */ new Map(), l = !1, u = { x: 0, y: 0 }, c = null, f = !1, d = null, g = !1;
+  function p({ noDragClassName: C, handleSelector: $, domNode: m, isSelectable: _, nodeId: v, nodeClickDistance: b = 0 }) {
+    d = Kt(m);
+    function N({ x: V, y: A }, O) {
+      const { nodeLookup: R, nodeExtent: S, snapGrid: T, snapToGrid: k, nodeOrigin: P, onNodeDrag: H, onSelectionDrag: I, onError: B, updateNodePositions: F } = t();
+      i = { x: V, y: A };
+      let K = !1, ie = { x: 0, y: 0, x2: 0, y2: 0 };
+      if (a.size > 1 && S) {
+        const ee = No(a);
+        ie = Ts(ee);
+      }
+      for (const [ee, W] of a) {
+        if (!R.has(ee))
+          continue;
+        let ue = { x: V - W.distance.x, y: A - W.distance.y };
+        k && (ue = la(ue, T));
+        let me = [
+          [S[0][0], S[0][1]],
+          [S[1][0], S[1][1]]
+        ];
+        if (a.size > 1 && S && !W.extent) {
+          const { positionAbsolute: ze } = W.internals, G = ze.x - ie.x + S[0][0], se = ze.x + W.measured.width - ie.x2 + S[1][0], Te = ze.y - ie.y + S[0][1], Ae = ze.y + W.measured.height - ie.y2 + S[1][1];
+          me = [
+            [G, Te],
+            [se, Ae]
+          ];
+        }
+        const { position: Ce, positionAbsolute: ge } = h0({
+          nodeId: ee,
+          nextPosition: ue,
+          nodeLookup: R,
+          nodeExtent: me,
+          nodeOrigin: P,
+          onError: B
+        });
+        K = K || W.position.x !== Ce.x || W.position.y !== Ce.y, W.position = Ce, W.internals.positionAbsolute = ge;
+      }
+      if (K && (F(a, !0), O && (r || H || !v && I))) {
+        const [ee, W] = ss({
+          nodeId: v,
+          dragItems: a,
+          nodeLookup: R
+        });
+        r == null || r(O, a, ee, W), H == null || H(O, ee, W), v || I == null || I(O, W);
+      }
+    }
+    async function E() {
+      if (!c)
+        return;
+      const { transform: V, panBy: A, autoPanSpeed: O, autoPanOnNodeDrag: R } = t();
+      if (!R) {
+        l = !1, cancelAnimationFrame(s);
+        return;
+      }
+      const [S, T] = tc(u, c, O);
+      (S !== 0 || T !== 0) && (i.x = (i.x ?? 0) - S / V[2], i.y = (i.y ?? 0) - T / V[2], await A({ x: S, y: T }) && N(i, null)), s = requestAnimationFrame(E);
+    }
+    function M(V) {
+      var K;
+      const { nodeLookup: A, multiSelectionActive: O, nodesDraggable: R, transform: S, snapGrid: T, snapToGrid: k, selectNodesOnDrag: P, onNodeDragStart: H, onSelectionDragStart: I, unselectNodesAndEdges: B } = t();
+      f = !0, (!P || !_) && !O && v && ((K = A.get(v)) != null && K.selected || B()), _ && P && v && (e == null || e(v));
+      const F = is(V.sourceEvent, { transform: S, snapGrid: T, snapToGrid: k, containerBounds: c });
+      if (i = F, a = R0(A, R, F, v), a.size > 0 && (n || H || !v && I)) {
+        const [ie, ee] = ss({
+          nodeId: v,
+          dragItems: a,
+          nodeLookup: A
+        });
+        n == null || n(V.sourceEvent, a, ie, ee), H == null || H(V.sourceEvent, ie, ee), v || I == null || I(V.sourceEvent, ee);
+      }
+    }
+    const D = wh().clickDistance(b).on("start", (V) => {
+      const { domNode: A, nodeDragThreshold: O, transform: R, snapGrid: S, snapToGrid: T } = t();
+      c = (A == null ? void 0 : A.getBoundingClientRect()) || null, g = !1, O === 0 && M(V), i = is(V.sourceEvent, { transform: R, snapGrid: S, snapToGrid: T, containerBounds: c }), u = Hn(V.sourceEvent, c);
+    }).on("drag", (V) => {
+      const { autoPanOnNodeDrag: A, transform: O, snapGrid: R, snapToGrid: S, nodeDragThreshold: T, nodeLookup: k } = t(), P = is(V.sourceEvent, { transform: O, snapGrid: R, snapToGrid: S, containerBounds: c });
+      if ((V.sourceEvent.type === "touchmove" && V.sourceEvent.touches.length > 1 || // if user deletes a node while dragging, we need to abort the drag to prevent errors
+      v && !k.has(v)) && (g = !0), !g) {
+        if (!l && A && f && (l = !0, E()), !f) {
+          const H = P.xSnapped - (i.x ?? 0), I = P.ySnapped - (i.y ?? 0);
+          Math.sqrt(H * H + I * I) > T && M(V);
+        }
+        (i.x !== P.xSnapped || i.y !== P.ySnapped) && a && f && (u = Hn(V.sourceEvent, c), N(P, V.sourceEvent));
+      }
+    }).on("end", (V) => {
+      if (!(!f || g) && (l = !1, f = !1, cancelAnimationFrame(s), a.size > 0)) {
+        const { nodeLookup: A, updateNodePositions: O, onNodeDragStop: R, onSelectionDragStop: S } = t();
+        if (O(a, !1), o || R || !v && S) {
+          const [T, k] = ss({
+            nodeId: v,
+            dragItems: a,
+            nodeLookup: A,
+            dragging: !1
+          });
+          o == null || o(V.sourceEvent, a, T, k), R == null || R(V.sourceEvent, T, k), v || S == null || S(V.sourceEvent, k);
+        }
+      }
+    }).filter((V) => {
+      const A = V.target;
+      return !V.button && (!C || !xl(A, `.${C}`, m)) && (!$ || xl(A, $, m));
+    });
+    d.call(D);
+  }
+  function x() {
+    d == null || d.on(".drag", null);
+  }
+  return {
+    update: p,
+    destroy: x
+  };
+}
+function Y0(e, t, n) {
+  const r = [], o = {
+    x: e.x - n,
+    y: e.y - n,
+    width: n * 2,
+    height: n * 2
+  };
+  for (const i of t.values())
+    yo(o, Lr(i)) > 0 && r.push(i);
+  return r;
+}
+const Z0 = 250;
+function X0(e, t, n, r) {
+  var a, l;
+  let o = [], i = 1 / 0;
+  const s = Y0(e, n, t + Z0);
+  for (const u of s) {
+    const c = [...((a = u.internals.handleBounds) == null ? void 0 : a.source) ?? [], ...((l = u.internals.handleBounds) == null ? void 0 : l.target) ?? []];
+    for (const f of c) {
+      if (r.nodeId === f.nodeId && r.type === f.type && r.id === f.id)
+        continue;
+      const { x: d, y: g } = wo(u, f, f.position, !0), p = Math.sqrt(Math.pow(d - e.x, 2) + Math.pow(g - e.y, 2));
+      p > t || (p < i ? (o = [{ ...f, x: d, y: g }], i = p) : p === i && o.push({ ...f, x: d, y: g }));
+    }
+  }
+  if (!o.length)
+    return null;
+  if (o.length > 1) {
+    const u = r.type === "source" ? "target" : "source";
+    return o.find((c) => c.type === u) ?? o[0];
+  }
+  return o[0];
+}
+function fc(e, t, n, r, o, i = !1) {
+  var u, c, f;
+  const s = r.get(e);
+  if (!s)
+    return null;
+  const a = o === "strict" ? (u = s.internals.handleBounds) == null ? void 0 : u[t] : [...((c = s.internals.handleBounds) == null ? void 0 : c.source) ?? [], ...((f = s.internals.handleBounds) == null ? void 0 : f.target) ?? []], l = (n ? a == null ? void 0 : a.find((d) => d.id === n) : a == null ? void 0 : a[0]) ?? null;
+  return l && i ? { ...l, ...wo(s, l, l.position, !0) } : l;
+}
+function gc(e, t) {
+  return e || (t != null && t.classList.contains("target") ? "target" : t != null && t.classList.contains("source") ? "source" : null);
+}
+function F0(e, t) {
+  let n = null;
+  return t ? n = !0 : e && !t && (n = !1), n;
+}
+const hc = () => !0;
+function W0(e, { connectionMode: t, connectionRadius: n, handleId: r, nodeId: o, edgeUpdaterType: i, isTarget: s, domNode: a, nodeLookup: l, lib: u, autoPanOnConnect: c, flowId: f, panBy: d, cancelConnection: g, onConnectStart: p, onConnect: x, onConnectEnd: C, isValidConnection: $ = hc, onReconnectEnd: m, updateConnection: _, getTransform: v, getFromHandle: b, autoPanSpeed: N }) {
+  const E = m0(e.target);
+  let M = 0, D;
+  const { x: V, y: A } = Hn(e), O = E == null ? void 0 : E.elementFromPoint(V, A), R = gc(i, O), S = a == null ? void 0 : a.getBoundingClientRect();
+  if (!S || !R)
+    return;
+  const T = fc(o, R, r, l, t);
+  if (!T)
+    return;
+  let k = Hn(e, S), P = !1, H = null, I = !1, B = null;
+  function F() {
+    if (!c || !S)
+      return;
+    const [ge, ze] = tc(k, S, N);
+    d({ x: ge, y: ze }), M = requestAnimationFrame(F);
+  }
+  const K = {
+    ...T,
+    nodeId: o,
+    type: R,
+    position: T.position
+  }, ie = l.get(o), W = {
+    inProgress: !0,
+    isValid: null,
+    from: wo(ie, K, $e.Left, !0),
+    fromHandle: K,
+    fromPosition: K.position,
+    fromNode: ie,
+    to: k,
+    toHandle: null,
+    toPosition: al[K.position],
+    toNode: null
+  };
+  _(W);
+  let ue = W;
+  p == null || p(e, { nodeId: o, handleId: r, handleType: R });
+  function me(ge) {
+    if (!b() || !K) {
+      Ce(ge);
+      return;
+    }
+    const ze = v();
+    k = Hn(ge, S), D = X0(Mo(k, ze, !1, [1, 1]), n, l, K), P || (F(), P = !0);
+    const G = vc(ge, {
+      handle: D,
+      connectionMode: t,
+      fromNodeId: o,
+      fromHandleId: r,
+      fromType: s ? "target" : "source",
+      isValidConnection: $,
+      doc: E,
+      lib: u,
+      flowId: f,
+      nodeLookup: l
+    });
+    B = G.handleDomNode, H = G.connection, I = F0(!!D, G.isValid);
+    const se = {
+      // from stays the same
+      ...ue,
+      isValid: I,
+      to: D && I ? rc({ x: D.x, y: D.y }, ze) : k,
+      toHandle: G.toHandle,
+      toPosition: I && G.toHandle ? G.toHandle.position : al[K.position],
+      toNode: G.toHandle ? l.get(G.toHandle.nodeId) : null
+    };
+    I && D && ue.toHandle && se.toHandle && ue.toHandle.type === se.toHandle.type && ue.toHandle.nodeId === se.toHandle.nodeId && ue.toHandle.id === se.toHandle.id && ue.to.x === se.to.x && ue.to.y === se.to.y || (_(se), ue = se);
+  }
+  function Ce(ge) {
+    (D || B) && H && I && (x == null || x(H));
+    const { inProgress: ze, ...G } = ue, se = {
+      ...G,
+      toPosition: ue.toHandle ? ue.toPosition : null
+    };
+    C == null || C(ge, se), i && (m == null || m(ge, se)), g(), cancelAnimationFrame(M), P = !1, I = !1, H = null, B = null, E.removeEventListener("mousemove", me), E.removeEventListener("mouseup", Ce), E.removeEventListener("touchmove", me), E.removeEventListener("touchend", Ce);
+  }
+  E.addEventListener("mousemove", me), E.addEventListener("mouseup", Ce), E.addEventListener("touchmove", me), E.addEventListener("touchend", Ce);
+}
+function vc(e, { handle: t, connectionMode: n, fromNodeId: r, fromHandleId: o, fromType: i, doc: s, lib: a, flowId: l, isValidConnection: u = hc, nodeLookup: c }) {
+  const f = i === "target", d = t ? s.querySelector(`.${a}-flow__handle[data-id="${l}-${t == null ? void 0 : t.nodeId}-${t == null ? void 0 : t.id}-${t == null ? void 0 : t.type}"]`) : null, { x: g, y: p } = Hn(e), x = s.elementFromPoint(g, p), C = x != null && x.classList.contains(`${a}-flow__handle`) ? x : d, $ = {
+    handleDomNode: C,
+    isValid: !1,
+    connection: null,
+    toHandle: null
+  };
+  if (C) {
+    const m = gc(void 0, C), _ = C.getAttribute("data-nodeid"), v = C.getAttribute("data-handleid"), b = C.classList.contains("connectable"), N = C.classList.contains("connectableend");
+    if (!_ || !m)
+      return $;
+    const E = {
+      source: f ? _ : r,
+      sourceHandle: f ? v : o,
+      target: f ? r : _,
+      targetHandle: f ? o : v
+    };
+    $.connection = E;
+    const D = b && N && (n === cr.Strict ? f && m === "source" || !f && m === "target" : _ !== r || v !== o);
+    $.isValid = D && u(E), $.toHandle = fc(_, m, v, c, n, !1);
+  }
+  return $;
+}
+const K0 = {
+  onPointerDown: W0,
+  isValid: vc
+};
+function q0({ domNode: e, panZoom: t, getTransform: n, getViewScale: r }) {
+  const o = Kt(e);
+  function i({ translateExtent: a, width: l, height: u, zoomStep: c = 10, pannable: f = !0, zoomable: d = !0, inversePan: g = !1 }) {
+    const p = (_) => {
+      const v = n();
+      if (_.sourceEvent.type !== "wheel" || !t)
+        return;
+      const b = -_.sourceEvent.deltaY * (_.sourceEvent.deltaMode === 1 ? 0.05 : _.sourceEvent.deltaMode ? 1 : 2e-3) * c, N = v[2] * Math.pow(2, b);
+      t.scaleTo(N);
+    };
+    let x = [0, 0];
+    const C = (_) => {
+      (_.sourceEvent.type === "mousedown" || _.sourceEvent.type === "touchstart") && (x = [
+        _.sourceEvent.clientX ?? _.sourceEvent.touches[0].clientX,
+        _.sourceEvent.clientY ?? _.sourceEvent.touches[0].clientY
+      ]);
+    }, $ = (_) => {
+      const v = n();
+      if (_.sourceEvent.type !== "mousemove" && _.sourceEvent.type !== "touchmove" || !t)
+        return;
+      const b = [
+        _.sourceEvent.clientX ?? _.sourceEvent.touches[0].clientX,
+        _.sourceEvent.clientY ?? _.sourceEvent.touches[0].clientY
+      ], N = [b[0] - x[0], b[1] - x[1]];
+      x = b;
+      const E = r() * Math.max(v[2], Math.log(v[2])) * (g ? -1 : 1), M = {
+        x: v[0] - N[0] * E,
+        y: v[1] - N[1] * E
+      }, D = [
+        [0, 0],
+        [l, u]
+      ];
+      t.setViewportConstrained({
+        x: M.x,
+        y: M.y,
+        zoom: v[2]
+      }, D, a);
+    }, m = ju().on("start", C).on("zoom", f ? $ : null).on("zoom.wheel", d ? p : null);
+    o.call(m, {});
+  }
+  function s() {
+    o.on("zoom", null);
+  }
+  return {
+    update: i,
+    destroy: s,
+    pointer: Qt
+  };
+}
+const G0 = (e, t) => e.x !== t.x || e.y !== t.y || e.zoom !== t.k, Fi = (e) => ({
+  x: e.x,
+  y: e.y,
+  zoom: e.k
+}), as = ({ x: e, y: t, zoom: n }) => Yi.translate(e, t).scale(n), wr = (e, t) => e.target.closest(`.${t}`), pc = (e, t) => t === 2 && Array.isArray(e) && e.includes(2), ls = (e, t = 0, n = () => {
+}) => {
+  const r = typeof t == "number" && t > 0;
+  return r || n(), r ? e.transition().duration(t).on("end", n) : e;
+}, mc = (e) => {
+  const t = e.ctrlKey && yi() ? 10 : 1;
+  return -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 2e-3) * t;
+};
+function U0({ zoomPanValues: e, noWheelClassName: t, d3Selection: n, d3Zoom: r, panOnScrollMode: o, panOnScrollSpeed: i, zoomOnPinch: s, onPanZoomStart: a, onPanZoom: l, onPanZoomEnd: u }) {
+  return (c) => {
+    if (wr(c, t))
+      return !1;
+    c.preventDefault(), c.stopImmediatePropagation();
+    const f = n.property("__zoom").k || 1;
+    if (c.ctrlKey && s) {
+      const C = Qt(c), $ = mc(c), m = f * Math.pow(2, $);
+      r.scaleTo(n, m, C, c);
+      return;
+    }
+    const d = c.deltaMode === 1 ? 20 : 1;
+    let g = o === qn.Vertical ? 0 : c.deltaX * d, p = o === qn.Horizontal ? 0 : c.deltaY * d;
+    !yi() && c.shiftKey && o !== qn.Vertical && (g = c.deltaY * d, p = 0), r.translateBy(
+      n,
+      -(g / f) * i,
+      -(p / f) * i,
+      // @ts-ignore
+      { internal: !0 }
+    );
+    const x = Fi(n.property("__zoom"));
+    clearTimeout(e.panScrollTimeout), e.isPanScrolling || (e.isPanScrolling = !0, a == null || a(c, x)), e.isPanScrolling && (l == null || l(c, x), e.panScrollTimeout = setTimeout(() => {
+      u == null || u(c, x), e.isPanScrolling = !1;
+    }, 150));
+  };
+}
+function j0({ noWheelClassName: e, preventScrolling: t, d3ZoomHandler: n }) {
+  return function(r, o) {
+    if (!t && r.type === "wheel" && !r.ctrlKey || wr(r, e))
+      return null;
+    r.preventDefault(), n.call(this, r, o);
+  };
+}
+function J0({ zoomPanValues: e, onDraggingChange: t, onPanZoomStart: n }) {
+  return (r) => {
+    var i, s, a;
+    if ((i = r.sourceEvent) != null && i.internal)
+      return;
+    const o = Fi(r.transform);
+    e.mouseButton = ((s = r.sourceEvent) == null ? void 0 : s.button) || 0, e.isZoomingOrPanning = !0, e.prevViewport = o, ((a = r.sourceEvent) == null ? void 0 : a.type) === "mousedown" && t(!0), n && (n == null || n(r.sourceEvent, o));
+  };
+}
+function Q0({ zoomPanValues: e, panOnDrag: t, onPaneContextMenu: n, onTransformChange: r, onPanZoom: o }) {
+  return (i) => {
+    var s, a;
+    e.usedRightMouseButton = !!(n && pc(t, e.mouseButton ?? 0)), (s = i.sourceEvent) != null && s.sync || r([i.transform.x, i.transform.y, i.transform.k]), o && !((a = i.sourceEvent) != null && a.internal) && (o == null || o(i.sourceEvent, Fi(i.transform)));
+  };
+}
+function e2({ zoomPanValues: e, panOnDrag: t, panOnScroll: n, onDraggingChange: r, onPanZoomEnd: o, onPaneContextMenu: i }) {
+  return (s) => {
+    var a;
+    if (!((a = s.sourceEvent) != null && a.internal) && (e.isZoomingOrPanning = !1, i && pc(t, e.mouseButton ?? 0) && !e.usedRightMouseButton && s.sourceEvent && i(s.sourceEvent), e.usedRightMouseButton = !1, r(!1), o && G0(e.prevViewport, s.transform))) {
+      const l = Fi(s.transform);
+      e.prevViewport = l, clearTimeout(e.timerId), e.timerId = setTimeout(
+        () => {
+          o == null || o(s.sourceEvent, l);
+        },
+        // we need a setTimeout for panOnScroll to supress multiple end events fired during scroll
+        n ? 150 : 0
+      );
+    }
+  };
+}
+function t2({ zoomActivationKeyPressed: e, zoomOnScroll: t, zoomOnPinch: n, panOnDrag: r, panOnScroll: o, zoomOnDoubleClick: i, userSelectionActive: s, noWheelClassName: a, noPanClassName: l, lib: u }) {
+  return (c) => {
+    var p;
+    const f = e || t, d = n && c.ctrlKey;
+    if (c.button === 1 && c.type === "mousedown" && (wr(c, `${u}-flow__node`) || wr(c, `${u}-flow__edge`)))
+      return !0;
+    if (!r && !f && !o && !i && !n || s || wr(c, a) && c.type === "wheel" || wr(c, l) && (c.type !== "wheel" || o && c.type === "wheel" && !e) || !n && c.ctrlKey && c.type === "wheel")
+      return !1;
+    if (!n && c.type === "touchstart" && ((p = c.touches) == null ? void 0 : p.length) > 1)
+      return c.preventDefault(), !1;
+    if (!f && !o && !d && c.type === "wheel" || !r && (c.type === "mousedown" || c.type === "touchstart") || Array.isArray(r) && !r.includes(c.button) && c.type === "mousedown")
+      return !1;
+    const g = Array.isArray(r) && r.includes(c.button) || !c.button || c.button <= 1;
+    return (!c.ctrlKey || c.type === "wheel") && g;
+  };
+}
+function n2({ domNode: e, minZoom: t, maxZoom: n, paneClickDistance: r, translateExtent: o, viewport: i, onPanZoom: s, onPanZoomStart: a, onPanZoomEnd: l, onDraggingChange: u }) {
+  const c = {
+    isZoomingOrPanning: !1,
+    usedRightMouseButton: !1,
+    prevViewport: { x: 0, y: 0, zoom: 0 },
+    mouseButton: 0,
+    timerId: void 0,
+    panScrollTimeout: void 0,
+    isPanScrolling: !1
+  }, f = e.getBoundingClientRect(), d = ju().clickDistance(!Nn(r) || r < 0 ? 0 : r).scaleExtent([t, n]).translateExtent(o), g = Kt(e).call(d);
+  _({
+    x: i.x,
+    y: i.y,
+    zoom: Ar(i.zoom, t, n)
+  }, [
+    [0, 0],
+    [f.width, f.height]
+  ], o);
+  const p = g.on("wheel.zoom"), x = g.on("dblclick.zoom");
+  d.wheelDelta(mc);
+  function C(O, R) {
+    return g ? new Promise((S) => {
+      d == null || d.transform(ls(g, R == null ? void 0 : R.duration, () => S(!0)), O);
+    }) : Promise.resolve(!1);
+  }
+  function $({ noWheelClassName: O, noPanClassName: R, onPaneContextMenu: S, userSelectionActive: T, panOnScroll: k, panOnDrag: P, panOnScrollMode: H, panOnScrollSpeed: I, preventScrolling: B, zoomOnPinch: F, zoomOnScroll: K, zoomOnDoubleClick: ie, zoomActivationKeyPressed: ee, lib: W, onTransformChange: ue }) {
+    T && !c.isZoomingOrPanning && m();
+    const Ce = k && !ee && !T ? U0({
+      zoomPanValues: c,
+      noWheelClassName: O,
+      d3Selection: g,
+      d3Zoom: d,
+      panOnScrollMode: H,
+      panOnScrollSpeed: I,
+      zoomOnPinch: F,
+      onPanZoomStart: a,
+      onPanZoom: s,
+      onPanZoomEnd: l
+    }) : j0({
+      noWheelClassName: O,
+      preventScrolling: B,
+      d3ZoomHandler: p
+    });
+    if (g.on("wheel.zoom", Ce, { passive: !1 }), !T) {
+      const ze = J0({
+        zoomPanValues: c,
+        onDraggingChange: u,
+        onPanZoomStart: a
+      });
+      d.on("start", ze);
+      const G = Q0({
+        zoomPanValues: c,
+        panOnDrag: P,
+        onPaneContextMenu: !!S,
+        onPanZoom: s,
+        onTransformChange: ue
+      });
+      d.on("zoom", G);
+      const se = e2({
+        zoomPanValues: c,
+        panOnDrag: P,
+        panOnScroll: k,
+        onPaneContextMenu: S,
+        onPanZoomEnd: l,
+        onDraggingChange: u
+      });
+      d.on("end", se);
+    }
+    const ge = t2({
+      zoomActivationKeyPressed: ee,
+      panOnDrag: P,
+      zoomOnScroll: K,
+      panOnScroll: k,
+      zoomOnDoubleClick: ie,
+      zoomOnPinch: F,
+      userSelectionActive: T,
+      noPanClassName: R,
+      noWheelClassName: O,
+      lib: W
+    });
+    d.filter(ge), ie ? g.on("dblclick.zoom", x) : g.on("dblclick.zoom", null);
+  }
+  function m() {
+    d.on("zoom", null);
+  }
+  async function _(O, R, S) {
+    const T = as(O), k = d == null ? void 0 : d.constrain()(T, R, S);
+    return k && await C(k), new Promise((P) => P(k));
+  }
+  async function v(O, R) {
+    const S = as(O);
+    return await C(S, R), new Promise((T) => T(S));
+  }
+  function b(O) {
+    if (g) {
+      const R = as(O), S = g.property("__zoom");
+      (S.k !== O.zoom || S.x !== O.x || S.y !== O.y) && (d == null || d.transform(g, R, null, { sync: !0 }));
+    }
+  }
+  function N() {
+    const O = g ? Uu(g.node()) : { x: 0, y: 0, k: 1 };
+    return { x: O.x, y: O.y, zoom: O.k };
+  }
+  function E(O, R) {
+    return g ? new Promise((S) => {
+      d == null || d.scaleTo(ls(g, R == null ? void 0 : R.duration, () => S(!0)), O);
+    }) : Promise.resolve(!1);
+  }
+  function M(O, R) {
+    return g ? new Promise((S) => {
+      d == null || d.scaleBy(ls(g, R == null ? void 0 : R.duration, () => S(!0)), O);
+    }) : Promise.resolve(!1);
+  }
+  function D(O) {
+    d == null || d.scaleExtent(O);
+  }
+  function V(O) {
+    d == null || d.translateExtent(O);
+  }
+  function A(O) {
+    const R = !Nn(O) || O < 0 ? 0 : O;
+    d == null || d.clickDistance(R);
+  }
+  return {
+    update: $,
+    destroy: m,
+    setViewport: v,
+    setViewportConstrained: _,
+    getViewport: N,
+    scaleTo: E,
+    scaleBy: M,
+    setScaleExtent: D,
+    setTranslateExtent: V,
+    syncViewport: b,
+    setClickDistance: A
+  };
+}
+var bl;
+(function(e) {
+  e.Line = "line", e.Handle = "handle";
+})(bl || (bl = {}));
+var r2 = /* @__PURE__ */ ne('<div role="button" tabindex="-1"><!></div>');
+function Qn(e, t) {
+  de(t, !1);
+  const [n, r] = tt(), o = () => Q(ie, "$connectable", n), i = () => Q(Ce, "$connectionRadius", n), s = () => Q(ue, "$domNode", n), a = () => Q(me, "$nodeLookup", n), l = () => Q(W, "$connectionMode", n), u = () => Q(G, "$lib", n), c = () => Q(Fe, "$autoPanOnConnect", n), f = () => Q(Oe, "$flowId", n), d = () => Q(ze, "$isValidConnectionStore", n), g = () => Q(Te, "$onedgecreate", n), p = () => Q(oe, "$onConnectAction", n), x = () => Q(ve, "$onConnectStartAction", n), C = () => Q(xe, "$onConnectEndAction", n), $ = () => Q(ge, "$viewport", n), m = () => Q(ct, "$connection", n), _ = () => Q(Le, "$edges", n), v = () => Q(Qe, "$connectionLookup", n), b = re(), N = re(), E = re(), M = re(), D = re(), V = re(), A = re(), O = re();
+  let R = w(t, "id", 12, void 0), S = w(t, "type", 12, "source"), T = w(t, "position", 28, () => $e.Top), k = w(t, "style", 12, void 0), P = w(t, "isValidConnection", 12, void 0), H = w(t, "onconnect", 12, void 0), I = w(t, "ondisconnect", 12, void 0), B = w(t, "isConnectable", 12, void 0), F = w(t, "class", 12, void 0);
+  const K = ar("svelteflow__node_id"), ie = ar("svelteflow__node_connectable"), ee = Ue(), {
+    connectionMode: W,
+    domNode: ue,
+    nodeLookup: me,
+    connectionRadius: Ce,
+    viewport: ge,
+    isValidConnection: ze,
+    lib: G,
+    addEdge: se,
+    onedgecreate: Te,
+    panBy: Ae,
+    cancelConnection: Xe,
+    updateConnection: te,
+    autoPanOnConnect: Fe,
+    edges: Le,
+    connectionLookup: Qe,
+    onconnect: oe,
+    onconnectstart: ve,
+    onconnectend: xe,
+    flowId: Oe,
+    connection: ct
+  } = ee;
+  function lt(Ne) {
+    const rt = ic(Ne);
+    (rt && Ne.button === 0 || !rt) && K0.onPointerDown(Ne, {
+      handleId: h(E),
+      nodeId: K,
+      isTarget: h(b),
+      connectionRadius: i(),
+      domNode: s(),
+      nodeLookup: a(),
+      connectionMode: l(),
+      lib: u(),
+      autoPanOnConnect: c(),
+      flowId: f(),
+      isValidConnection: P() ?? d(),
+      updateConnection: te,
+      cancelConnection: Xe,
+      panBy: Ae,
+      onConnect: (ye) => {
+        var at;
+        const ot = g() ? g()(ye) : ye;
+        ot && (se(ot), (at = p()) == null || at(ye));
+      },
+      onConnectStart: (ye, ot) => {
+        var at;
+        (at = x()) == null || at(ye, {
+          nodeId: ot.nodeId,
+          handleId: ot.handleId,
+          handleType: ot.handleType
+        });
+      },
+      onConnectEnd: (ye, ot) => {
+        var at;
+        (at = C()) == null || at(ye, ot);
+      },
+      getTransform: () => [
+        $().x,
+        $().y,
+        $().zoom
+      ],
+      getFromHandle: () => m().fromHandle
+    });
+  }
+  let J = re(null), Re = re();
+  he(() => j(S()), () => {
+    U(b, S() === "target");
+  }), he(
+    () => (j(B()), o()),
+    () => {
+      U(N, B() !== void 0 ? B() : o());
+    }
+  ), he(() => j(R()), () => {
+    U(E, R() || null);
+  }), he(
+    () => (j(H()), j(I()), _(), v(), j(S()), j(R())),
+    () => {
+      (H() || I()) && (_(), U(Re, v().get(`${K}-${S()}${R() ? `-${R()}` : ""}`)));
+    }
+  ), he(
+    () => (h(J), h(Re), j(I()), j(H())),
+    () => {
+      if (h(J) && !u0(h(Re), h(J))) {
+        const Ne = h(Re) ?? /* @__PURE__ */ new Map();
+        ll(h(J), Ne, I()), ll(Ne, h(J), H());
+      }
+      U(J, h(Re) ?? /* @__PURE__ */ new Map());
+    }
+  ), he(() => m(), () => {
+    U(M, !!m().fromHandle);
+  }), he(
+    () => (m(), j(S()), h(E)),
+    () => {
+      var Ne, rt, ye;
+      U(D, ((Ne = m().fromHandle) == null ? void 0 : Ne.nodeId) === K && ((rt = m().fromHandle) == null ? void 0 : rt.type) === S() && ((ye = m().fromHandle) == null ? void 0 : ye.id) === h(E));
+    }
+  ), he(
+    () => (m(), j(S()), h(E)),
+    () => {
+      var Ne, rt, ye;
+      U(V, ((Ne = m().toHandle) == null ? void 0 : Ne.nodeId) === K && ((rt = m().toHandle) == null ? void 0 : rt.type) === S() && ((ye = m().toHandle) == null ? void 0 : ye.id) === h(E));
+    }
+  ), he(
+    () => (l(), m(), j(S()), h(E)),
+    () => {
+      var Ne, rt, ye;
+      U(A, l() === cr.Strict ? ((Ne = m().fromHandle) == null ? void 0 : Ne.type) !== S() : K !== ((rt = m().fromHandle) == null ? void 0 : rt.nodeId) || h(E) !== ((ye = m().fromHandle) == null ? void 0 : ye.id));
+    }
+  ), he(() => (h(V), m()), () => {
+    U(O, h(V) && m().isValid);
+  }), gt(), He();
+  var le = r2();
+  ce(le, "data-nodeid", K);
+  let fn;
+  var Ut = X(le);
+  pt(Ut, t, "default", {}), Z(le), Ee(
+    (Ne) => {
+      ce(le, "data-handleid", h(E)), ce(le, "data-handlepos", T()), ce(le, "data-id", `${f() ?? ""}-${K ?? ""}-${R() || ""}-${S() ?? ""}`), fn = kt(le, 1, bn(Ne), null, fn, {
+        valid: h(O),
+        connectingto: h(V),
+        connectingfrom: h(D),
+        source: !h(b),
+        target: h(b),
+        connectablestart: h(N),
+        connectableend: h(N),
+        connectable: h(N),
+        connectionindicator: h(N) && (!h(M) || h(A))
+      }), ce(le, "style", k());
+    },
+    [
+      () => Et([
+        "svelte-flow__handle",
+        `svelte-flow__handle-${T()}`,
+        "nodrag",
+        "nopan",
+        T(),
+        F()
+      ])
+    ],
+    pe
+  ), Ye("mousedown", le, lt), Ye("touchstart", le, lt), L(e, le);
+  var gn = fe({
+    get id() {
+      return R();
+    },
+    set id(Ne) {
+      R(Ne), y();
+    },
+    get type() {
+      return S();
+    },
+    set type(Ne) {
+      S(Ne), y();
+    },
+    get position() {
+      return T();
+    },
+    set position(Ne) {
+      T(Ne), y();
+    },
+    get style() {
+      return k();
+    },
+    set style(Ne) {
+      k(Ne), y();
+    },
+    get isValidConnection() {
+      return P();
+    },
+    set isValidConnection(Ne) {
+      P(Ne), y();
+    },
+    get onconnect() {
+      return H();
+    },
+    set onconnect(Ne) {
+      H(Ne), y();
+    },
+    get ondisconnect() {
+      return I();
+    },
+    set ondisconnect(Ne) {
+      I(Ne), y();
+    },
+    get isConnectable() {
+      return B();
+    },
+    set isConnectable(Ne) {
+      B(Ne), y();
+    },
+    get class() {
+      return F();
+    },
+    set class(Ne) {
+      F(Ne), y();
+    }
+  });
+  return r(), gn;
+}
+ae(
+  Qn,
+  {
+    id: {},
+    type: {},
+    position: {},
+    style: {},
+    isValidConnection: {},
+    onconnect: {},
+    ondisconnect: {},
+    isConnectable: {},
+    class: {}
+  },
+  ["default"],
+  [],
+  !0
+);
+var o2 = /* @__PURE__ */ ne("<!> <!>", 1);
+function _i(e, t) {
+  const n = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]);
+  nt(n, ["data", "targetPosition", "sourcePosition"]), de(t, !1);
+  let r = w(t, "data", 28, () => ({ label: "Node" })), o = w(t, "targetPosition", 12, void 0), i = w(t, "sourcePosition", 12, void 0);
+  He();
+  var s = o2(), a = be(s);
+  const l = /* @__PURE__ */ pe(() => o() ?? $e.Top);
+  Qn(a, {
+    type: "target",
+    get position() {
+      return h(l);
+    }
+  });
+  var u = z(a), c = z(u);
+  const f = /* @__PURE__ */ pe(() => i() ?? $e.Bottom);
+  return Qn(c, {
+    type: "source",
+    get position() {
+      return h(f);
+    }
+  }), Ee(() => {
+    var d;
+    return Rt(u, ` ${((d = r()) == null ? void 0 : d.label) ?? ""} `);
+  }), L(e, s), fe({
+    get data() {
+      return r();
+    },
+    set data(d) {
+      r(d), y();
+    },
+    get targetPosition() {
+      return o();
+    },
+    set targetPosition(d) {
+      o(d), y();
+    },
+    get sourcePosition() {
+      return i();
+    },
+    set sourcePosition(d) {
+      i(d), y();
+    }
+  });
+}
+ae(
+  _i,
+  {
+    data: {},
+    targetPosition: {},
+    sourcePosition: {}
+  },
+  [],
+  [],
+  !0
+);
+var i2 = /* @__PURE__ */ ne(" <!>", 1);
+function yc(e, t) {
+  const n = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]);
+  nt(n, ["data", "sourcePosition"]), de(t, !1);
+  let r = w(t, "data", 28, () => ({ label: "Node" })), o = w(t, "sourcePosition", 12, void 0);
+  He(), Se();
+  var i = i2(), s = be(i), a = z(s);
+  const l = /* @__PURE__ */ pe(() => o() ?? $e.Bottom);
+  return Qn(a, {
+    type: "source",
+    get position() {
+      return h(l);
+    }
+  }), Ee(() => {
+    var u;
+    return Rt(s, `${((u = r()) == null ? void 0 : u.label) ?? ""} `);
+  }), L(e, i), fe({
+    get data() {
+      return r();
+    },
+    set data(u) {
+      r(u), y();
+    },
+    get sourcePosition() {
+      return o();
+    },
+    set sourcePosition(u) {
+      o(u), y();
+    }
+  });
+}
+ae(yc, { data: {}, sourcePosition: {} }, [], [], !0);
+var s2 = /* @__PURE__ */ ne(" <!>", 1);
+function wc(e, t) {
+  const n = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]);
+  nt(n, ["data", "targetPosition"]), de(t, !1);
+  let r = w(t, "data", 28, () => ({ label: "Node" })), o = w(t, "targetPosition", 12, void 0);
+  He(), Se();
+  var i = s2(), s = be(i), a = z(s);
+  const l = /* @__PURE__ */ pe(() => o() ?? $e.Top);
+  return Qn(a, {
+    type: "target",
+    get position() {
+      return h(l);
+    }
+  }), Ee(() => {
+    var u;
+    return Rt(s, `${((u = r()) == null ? void 0 : u.label) ?? ""} `);
+  }), L(e, i), fe({
+    get data() {
+      return r();
+    },
+    set data(u) {
+      r(u), y();
+    },
+    get targetPosition() {
+      return o();
+    },
+    set targetPosition(u) {
+      o(u), y();
+    }
+  });
+}
+ae(wc, { data: {}, targetPosition: {} }, [], [], !0);
+function _c(e, t) {
+  const n = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]);
+  nt(n, []);
+}
+ae(_c, {}, [], [], !0);
+function Cl(e, t, n) {
+  if (!t)
+    return;
+  const r = n ? t.querySelector(n) : t;
+  r && r.appendChild(e);
+}
+function kr(e, { target: t, domNode: n }) {
+  return Cl(e, n, t), {
+    async update({ target: r, domNode: o }) {
+      Cl(e, o, r);
+    },
+    destroy() {
+      e.parentNode && e.parentNode.removeChild(e);
+    }
+  };
+}
+var a2 = /* @__PURE__ */ ne("<div><!></div>");
+function xc(e, t) {
+  de(t, !1);
+  const [n, r] = tt(), o = () => Q(i, "$domNode", n), { domNode: i } = Ue();
+  He();
+  var s = a2(), a = X(s);
+  pt(a, t, "default", {}), Z(s), vt(s, (l, u) => kr == null ? void 0 : kr(l, u), () => ({
+    target: ".svelte-flow__edgelabel-renderer",
+    domNode: o()
+  })), L(e, s), fe(), r();
+}
+ae(xc, {}, ["default"], [], !0);
+function bc() {
+  const { edgeLookup: e, selectionRect: t, selectionRectMode: n, multiselectionKeyPressed: r, addSelectedEdges: o, unselectNodesAndEdges: i, elementsSelectable: s } = Ue();
+  return (a) => {
+    const l = q(e).get(a);
+    if (!l) {
+      console.warn("012", Dr.error012(a));
+      return;
+    }
+    (l.selectable || q(s) && typeof l.selectable > "u") && (t.set(null), n.set(null), l.selected ? l.selected && q(r) && i({ nodes: [], edges: [l] }) : o([a]));
+  };
+}
+var l2 = /* @__PURE__ */ ne('<div class="svelte-flow__edge-label" role="button" tabindex="-1"><!></div>');
+function Cc(e, t) {
+  de(t, !1);
+  let n = w(t, "style", 12, void 0), r = w(t, "x", 12, void 0), o = w(t, "y", 12, void 0);
+  const i = bc(), s = ar("svelteflow__edge_id");
+  return He(), xc(e, {
+    children: (a, l) => {
+      var u = l2(), c = X(u);
+      pt(c, t, "default", {}), Z(u), Ee(() => {
+        ce(u, "style", "pointer-events: all;" + n()), st(u, "transform", `translate(-50%, -50%) translate(${r() ?? ""}px,${o() ?? ""}px)`);
+      }), Ye("keyup", u, () => {
+      }), Ye("click", u, () => {
+        s && i(s);
+      }), L(a, u);
+    },
+    $$slots: { default: !0 }
+  }), fe({
+    get style() {
+      return n();
+    },
+    set style(a) {
+      n(a), y();
+    },
+    get x() {
+      return r();
+    },
+    set x(a) {
+      r(a), y();
+    },
+    get y() {
+      return o();
+    },
+    set y(a) {
+      o(a), y();
+    }
+  });
+}
+ae(Cc, { style: {}, x: {}, y: {} }, ["default"], [], !0);
+var u2 = /* @__PURE__ */ _e('<path fill="none" class="svelte-flow__edge-interaction"></path>'), c2 = /* @__PURE__ */ _e('<path fill="none"></path><!><!>', 1);
+function To(e, t) {
+  de(t, !1);
+  let n = w(t, "id", 12, void 0), r = w(t, "path", 12), o = w(t, "label", 12, void 0), i = w(t, "labelX", 12, void 0), s = w(t, "labelY", 12, void 0), a = w(t, "labelStyle", 12, void 0), l = w(t, "markerStart", 12, void 0), u = w(t, "markerEnd", 12, void 0), c = w(t, "style", 12, void 0), f = w(t, "interactionWidth", 12, 20), d = w(t, "class", 12, void 0), g = f() === void 0 ? 20 : f();
+  He();
+  var p = c2(), x = be(p), C = z(x);
+  {
+    var $ = (v) => {
+      var b = u2();
+      ce(b, "stroke-opacity", 0), ce(b, "stroke-width", g), Ee(() => ce(b, "d", r())), L(v, b);
+    };
+    ke(C, (v) => {
+      g && v($);
+    });
+  }
+  var m = z(C);
+  {
+    var _ = (v) => {
+      Cc(v, {
+        get x() {
+          return i();
+        },
+        get y() {
+          return s();
+        },
+        get style() {
+          return a();
+        },
+        children: (b, N) => {
+          Se();
+          var E = Ie();
+          Ee(() => Rt(E, o())), L(b, E);
+        },
+        $$slots: { default: !0 }
+      });
+    };
+    ke(m, (v) => {
+      o() && v(_);
+    });
+  }
+  return Ee(
+    (v) => {
+      ce(x, "id", n()), ce(x, "d", r()), kt(x, 0, bn(v)), ce(x, "marker-start", l()), ce(x, "marker-end", u()), ce(x, "style", c());
+    },
+    [
+      () => Et(["svelte-flow__edge-path", d()])
+    ],
+    pe
+  ), L(e, p), fe({
+    get id() {
+      return n();
+    },
+    set id(v) {
+      n(v), y();
+    },
+    get path() {
+      return r();
+    },
+    set path(v) {
+      r(v), y();
+    },
+    get label() {
+      return o();
+    },
+    set label(v) {
+      o(v), y();
+    },
+    get labelX() {
+      return i();
+    },
+    set labelX(v) {
+      i(v), y();
+    },
+    get labelY() {
+      return s();
+    },
+    set labelY(v) {
+      s(v), y();
+    },
+    get labelStyle() {
+      return a();
+    },
+    set labelStyle(v) {
+      a(v), y();
+    },
+    get markerStart() {
+      return l();
+    },
+    set markerStart(v) {
+      l(v), y();
+    },
+    get markerEnd() {
+      return u();
+    },
+    set markerEnd(v) {
+      u(v), y();
+    },
+    get style() {
+      return c();
+    },
+    set style(v) {
+      c(v), y();
+    },
+    get interactionWidth() {
+      return f();
+    },
+    set interactionWidth(v) {
+      f(v), y();
+    },
+    get class() {
+      return d();
+    },
+    set class(v) {
+      d(v), y();
+    }
+  });
+}
+ae(
+  To,
+  {
+    id: {},
+    path: {},
+    label: {},
+    labelX: {},
+    labelY: {},
+    labelStyle: {},
+    markerStart: {},
+    markerEnd: {},
+    style: {},
+    interactionWidth: {},
+    class: {}
+  },
+  [],
+  [],
+  !0
+);
+function xi(e, t) {
+  const n = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]);
+  nt(n, [
+    "label",
+    "labelStyle",
+    "style",
+    "markerStart",
+    "markerEnd",
+    "interactionWidth",
+    "sourceX",
+    "sourceY",
+    "sourcePosition",
+    "targetX",
+    "targetY",
+    "targetPosition"
+  ]), de(t, !1);
+  const r = re(), o = re(), i = re();
+  let s = w(t, "label", 12, void 0), a = w(t, "labelStyle", 12, void 0), l = w(t, "style", 12, void 0), u = w(t, "markerStart", 12, void 0), c = w(t, "markerEnd", 12, void 0), f = w(t, "interactionWidth", 12, void 0), d = w(t, "sourceX", 12), g = w(t, "sourceY", 12), p = w(t, "sourcePosition", 12), x = w(t, "targetX", 12), C = w(t, "targetY", 12), $ = w(t, "targetPosition", 12);
+  return he(
+    () => (h(r), h(o), h(i), j(d()), j(g()), j(x()), j(C()), j(p()), j($())),
+    () => {
+      ((m) => (U(r, m[0]), U(o, m[1]), U(i, m[2])))(sc({
+        sourceX: d(),
+        sourceY: g(),
+        targetX: x(),
+        targetY: C(),
+        sourcePosition: p(),
+        targetPosition: $()
+      }));
+    }
+  ), gt(), He(), To(e, {
+    get path() {
+      return h(r);
+    },
+    get labelX() {
+      return h(o);
+    },
+    get labelY() {
+      return h(i);
+    },
+    get label() {
+      return s();
+    },
+    get labelStyle() {
+      return a();
+    },
+    get markerStart() {
+      return u();
+    },
+    get markerEnd() {
+      return c();
+    },
+    get interactionWidth() {
+      return f();
+    },
+    get style() {
+      return l();
+    }
+  }), fe({
+    get label() {
+      return s();
+    },
+    set label(m) {
+      s(m), y();
+    },
+    get labelStyle() {
+      return a();
+    },
+    set labelStyle(m) {
+      a(m), y();
+    },
+    get style() {
+      return l();
+    },
+    set style(m) {
+      l(m), y();
+    },
+    get markerStart() {
+      return u();
+    },
+    set markerStart(m) {
+      u(m), y();
+    },
+    get markerEnd() {
+      return c();
+    },
+    set markerEnd(m) {
+      c(m), y();
+    },
+    get interactionWidth() {
+      return f();
+    },
+    set interactionWidth(m) {
+      f(m), y();
+    },
+    get sourceX() {
+      return d();
+    },
+    set sourceX(m) {
+      d(m), y();
+    },
+    get sourceY() {
+      return g();
+    },
+    set sourceY(m) {
+      g(m), y();
+    },
+    get sourcePosition() {
+      return p();
+    },
+    set sourcePosition(m) {
+      p(m), y();
+    },
+    get targetX() {
+      return x();
+    },
+    set targetX(m) {
+      x(m), y();
+    },
+    get targetY() {
+      return C();
+    },
+    set targetY(m) {
+      C(m), y();
+    },
+    get targetPosition() {
+      return $();
+    },
+    set targetPosition(m) {
+      $(m), y();
+    }
+  });
+}
+ae(
+  xi,
+  {
+    label: {},
+    labelStyle: {},
+    style: {},
+    markerStart: {},
+    markerEnd: {},
+    interactionWidth: {},
+    sourceX: {},
+    sourceY: {},
+    sourcePosition: {},
+    targetX: {},
+    targetY: {},
+    targetPosition: {}
+  },
+  [],
+  [],
+  !0
+);
+function kc(e, t) {
+  const n = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]);
+  nt(n, [
+    "label",
+    "labelStyle",
+    "style",
+    "markerStart",
+    "markerEnd",
+    "interactionWidth",
+    "sourceX",
+    "sourceY",
+    "sourcePosition",
+    "targetX",
+    "targetY",
+    "targetPosition"
+  ]), de(t, !1);
+  const r = re(), o = re(), i = re();
+  let s = w(t, "label", 12, void 0), a = w(t, "labelStyle", 12, void 0), l = w(t, "style", 12, void 0), u = w(t, "markerStart", 12, void 0), c = w(t, "markerEnd", 12, void 0), f = w(t, "interactionWidth", 12, void 0), d = w(t, "sourceX", 12), g = w(t, "sourceY", 12), p = w(t, "sourcePosition", 12), x = w(t, "targetX", 12), C = w(t, "targetY", 12), $ = w(t, "targetPosition", 12);
+  return he(
+    () => (h(r), h(o), h(i), j(d()), j(g()), j(x()), j(C()), j(p()), j($())),
+    () => {
+      ((m) => (U(r, m[0]), U(o, m[1]), U(i, m[2])))(wi({
+        sourceX: d(),
+        sourceY: g(),
+        targetX: x(),
+        targetY: C(),
+        sourcePosition: p(),
+        targetPosition: $()
+      }));
+    }
+  ), gt(), He(), To(e, {
+    get path() {
+      return h(r);
+    },
+    get labelX() {
+      return h(o);
+    },
+    get labelY() {
+      return h(i);
+    },
+    get label() {
+      return s();
+    },
+    get labelStyle() {
+      return a();
+    },
+    get markerStart() {
+      return u();
+    },
+    get markerEnd() {
+      return c();
+    },
+    get interactionWidth() {
+      return f();
+    },
+    get style() {
+      return l();
+    }
+  }), fe({
+    get label() {
+      return s();
+    },
+    set label(m) {
+      s(m), y();
+    },
+    get labelStyle() {
+      return a();
+    },
+    set labelStyle(m) {
+      a(m), y();
+    },
+    get style() {
+      return l();
+    },
+    set style(m) {
+      l(m), y();
+    },
+    get markerStart() {
+      return u();
+    },
+    set markerStart(m) {
+      u(m), y();
+    },
+    get markerEnd() {
+      return c();
+    },
+    set markerEnd(m) {
+      c(m), y();
+    },
+    get interactionWidth() {
+      return f();
+    },
+    set interactionWidth(m) {
+      f(m), y();
+    },
+    get sourceX() {
+      return d();
+    },
+    set sourceX(m) {
+      d(m), y();
+    },
+    get sourceY() {
+      return g();
+    },
+    set sourceY(m) {
+      g(m), y();
+    },
+    get sourcePosition() {
+      return p();
+    },
+    set sourcePosition(m) {
+      p(m), y();
+    },
+    get targetX() {
+      return x();
+    },
+    set targetX(m) {
+      x(m), y();
+    },
+    get targetY() {
+      return C();
+    },
+    set targetY(m) {
+      C(m), y();
+    },
+    get targetPosition() {
+      return $();
+    },
+    set targetPosition(m) {
+      $(m), y();
+    }
+  });
+}
+ae(
+  kc,
+  {
+    label: {},
+    labelStyle: {},
+    style: {},
+    markerStart: {},
+    markerEnd: {},
+    interactionWidth: {},
+    sourceX: {},
+    sourceY: {},
+    sourcePosition: {},
+    targetX: {},
+    targetY: {},
+    targetPosition: {}
+  },
+  [],
+  [],
+  !0
+);
+function $c(e, t) {
+  const n = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]);
+  nt(n, [
+    "label",
+    "labelStyle",
+    "style",
+    "markerStart",
+    "markerEnd",
+    "interactionWidth",
+    "sourceX",
+    "sourceY",
+    "targetX",
+    "targetY"
+  ]), de(t, !1);
+  const r = re(), o = re(), i = re();
+  let s = w(t, "label", 12, void 0), a = w(t, "labelStyle", 12, void 0), l = w(t, "style", 12, void 0), u = w(t, "markerStart", 12, void 0), c = w(t, "markerEnd", 12, void 0), f = w(t, "interactionWidth", 12, void 0), d = w(t, "sourceX", 12), g = w(t, "sourceY", 12), p = w(t, "targetX", 12), x = w(t, "targetY", 12);
+  return he(
+    () => (h(r), h(o), h(i), j(d()), j(g()), j(p()), j(x())),
+    () => {
+      ((C) => (U(r, C[0]), U(o, C[1]), U(i, C[2])))(Hs({
+        sourceX: d(),
+        sourceY: g(),
+        targetX: p(),
+        targetY: x()
+      }));
+    }
+  ), gt(), He(), To(e, {
+    get path() {
+      return h(r);
+    },
+    get labelX() {
+      return h(o);
+    },
+    get labelY() {
+      return h(i);
+    },
+    get label() {
+      return s();
+    },
+    get labelStyle() {
+      return a();
+    },
+    get markerStart() {
+      return u();
+    },
+    get markerEnd() {
+      return c();
+    },
+    get interactionWidth() {
+      return f();
+    },
+    get style() {
+      return l();
+    }
+  }), fe({
+    get label() {
+      return s();
+    },
+    set label(C) {
+      s(C), y();
+    },
+    get labelStyle() {
+      return a();
+    },
+    set labelStyle(C) {
+      a(C), y();
+    },
+    get style() {
+      return l();
+    },
+    set style(C) {
+      l(C), y();
+    },
+    get markerStart() {
+      return u();
+    },
+    set markerStart(C) {
+      u(C), y();
+    },
+    get markerEnd() {
+      return c();
+    },
+    set markerEnd(C) {
+      c(C), y();
+    },
+    get interactionWidth() {
+      return f();
+    },
+    set interactionWidth(C) {
+      f(C), y();
+    },
+    get sourceX() {
+      return d();
+    },
+    set sourceX(C) {
+      d(C), y();
+    },
+    get sourceY() {
+      return g();
+    },
+    set sourceY(C) {
+      g(C), y();
+    },
+    get targetX() {
+      return p();
+    },
+    set targetX(C) {
+      p(C), y();
+    },
+    get targetY() {
+      return x();
+    },
+    set targetY(C) {
+      x(C), y();
+    }
+  });
+}
+ae(
+  $c,
+  {
+    label: {},
+    labelStyle: {},
+    style: {},
+    markerStart: {},
+    markerEnd: {},
+    interactionWidth: {},
+    sourceX: {},
+    sourceY: {},
+    targetX: {},
+    targetY: {}
+  },
+  [],
+  [],
+  !0
+);
+function Ec(e, t) {
+  const n = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]);
+  nt(n, [
+    "label",
+    "labelStyle",
+    "style",
+    "markerStart",
+    "markerEnd",
+    "interactionWidth",
+    "sourceX",
+    "sourceY",
+    "sourcePosition",
+    "targetX",
+    "targetY",
+    "targetPosition"
+  ]), de(t, !1);
+  const r = re(), o = re(), i = re();
+  let s = w(t, "label", 12, void 0), a = w(t, "labelStyle", 12, void 0), l = w(t, "style", 12, void 0), u = w(t, "markerStart", 12, void 0), c = w(t, "markerEnd", 12, void 0), f = w(t, "interactionWidth", 12, void 0), d = w(t, "sourceX", 12), g = w(t, "sourceY", 12), p = w(t, "sourcePosition", 12), x = w(t, "targetX", 12), C = w(t, "targetY", 12), $ = w(t, "targetPosition", 12);
+  return he(
+    () => (h(r), h(o), h(i), j(d()), j(g()), j(x()), j(C()), j(p()), j($())),
+    () => {
+      ((m) => (U(r, m[0]), U(o, m[1]), U(i, m[2])))(wi({
+        sourceX: d(),
+        sourceY: g(),
+        targetX: x(),
+        targetY: C(),
+        sourcePosition: p(),
+        targetPosition: $(),
+        borderRadius: 0
+      }));
+    }
+  ), gt(), He(), To(e, {
+    get path() {
+      return h(r);
+    },
+    get labelX() {
+      return h(o);
+    },
+    get labelY() {
+      return h(i);
+    },
+    get label() {
+      return s();
+    },
+    get labelStyle() {
+      return a();
+    },
+    get markerStart() {
+      return u();
+    },
+    get markerEnd() {
+      return c();
+    },
+    get interactionWidth() {
+      return f();
+    },
+    get style() {
+      return l();
+    }
+  }), fe({
+    get label() {
+      return s();
+    },
+    set label(m) {
+      s(m), y();
+    },
+    get labelStyle() {
+      return a();
+    },
+    set labelStyle(m) {
+      a(m), y();
+    },
+    get style() {
+      return l();
+    },
+    set style(m) {
+      l(m), y();
+    },
+    get markerStart() {
+      return u();
+    },
+    set markerStart(m) {
+      u(m), y();
+    },
+    get markerEnd() {
+      return c();
+    },
+    set markerEnd(m) {
+      c(m), y();
+    },
+    get interactionWidth() {
+      return f();
+    },
+    set interactionWidth(m) {
+      f(m), y();
+    },
+    get sourceX() {
+      return d();
+    },
+    set sourceX(m) {
+      d(m), y();
+    },
+    get sourceY() {
+      return g();
+    },
+    set sourceY(m) {
+      g(m), y();
+    },
+    get sourcePosition() {
+      return p();
+    },
+    set sourcePosition(m) {
+      p(m), y();
+    },
+    get targetX() {
+      return x();
+    },
+    set targetX(m) {
+      x(m), y();
+    },
+    get targetY() {
+      return C();
+    },
+    set targetY(m) {
+      C(m), y();
+    },
+    get targetPosition() {
+      return $();
+    },
+    set targetPosition(m) {
+      $(m), y();
+    }
+  });
+}
+ae(
+  Ec,
+  {
+    label: {},
+    labelStyle: {},
+    style: {},
+    markerStart: {},
+    markerEnd: {},
+    interactionWidth: {},
+    sourceX: {},
+    sourceY: {},
+    sourcePosition: {},
+    targetX: {},
+    targetY: {},
+    targetPosition: {}
+  },
+  [],
+  [],
+  !0
+);
+function d2(e, t) {
+  const n = e.set, r = t.set, o = q(e), i = q(t);
+  let a = o.length === 0 && i.length > 0 ? i : o;
+  e.set(a);
+  const l = (u) => {
+    const c = n(u);
+    return a = c, r(a), c;
+  };
+  e.set = t.set = l, e.update = t.update = (u) => l(u(a));
+}
+function f2(e, t) {
+  const n = e.set, r = t.set;
+  let o = q(t);
+  e.set(o);
+  const i = (s) => {
+    n(s), r(s), o = s;
+  };
+  e.set = t.set = i, e.update = t.update = (s) => i(s(o));
+}
+const g2 = (e, t, n) => {
+  if (!n)
+    return;
+  const r = q(e), o = t.set, i = n.set;
+  let s = n ? q(n) : { x: 0, y: 0, zoom: 1 };
+  t.set(s), t.set = (a) => (o(a), i(a), s = a, a), n.set = (a) => (r == null || r.syncViewport(a), o(a), i(a), s = a, a), t.update = (a) => {
+    t.set(a(s));
+  }, n.update = (a) => {
+    n.set(a(s));
+  };
+}, h2 = (e, t, n, r = [0, 0], o = vi) => {
+  const { subscribe: i, set: s, update: a } = we([]);
+  let l = e, u = {}, c = !0;
+  const f = (x) => (lc(x, t, n, {
+    elevateNodesOnSelect: c,
+    nodeOrigin: r,
+    nodeExtent: o,
+    defaults: u,
+    checkEquality: !1
+  }), l = x, s(l), l), d = (x) => f(x(l)), g = (x) => {
+    u = x;
+  }, p = (x) => {
+    c = x.elevateNodesOnSelect ?? c;
+  };
+  return f(l), {
+    subscribe: i,
+    set: f,
+    update: d,
+    setDefaultOptions: g,
+    setOptions: p
+  };
+}, v2 = (e, t, n, r) => {
+  const { subscribe: o, set: i, update: s } = we([]);
+  let a = e, l = {};
+  const u = (d) => {
+    const g = l ? d.map((p) => ({ ...l, ...p })) : d;
+    cc(t, n, g), a = g, i(a);
+  }, c = (d) => u(d(a)), f = (d) => {
+    l = d;
+  };
+  return u(a), {
+    subscribe: o,
+    set: u,
+    update: c,
+    setDefaultOptions: f
+  };
+}, Sc = {
+  input: yc,
+  output: wc,
+  default: _i,
+  group: _c
+}, Pc = {
+  straight: $c,
+  smoothstep: kc,
+  default: xi,
+  step: Ec
+}, p2 = ({ nodes: e = [], edges: t = [], width: n, height: r, fitView: o, nodeOrigin: i, nodeExtent: s }) => {
+  const a = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), f = i ?? [0, 0], d = s ?? vi;
+  lc(e, a, l, {
+    nodeExtent: d,
+    nodeOrigin: f,
+    elevateNodesOnSelect: !1,
+    checkEquality: !1
+  }), cc(u, c, t);
+  let g = { x: 0, y: 0, zoom: 1 };
+  if (o && n && r) {
+    const p = No(a, {
+      filter: (x) => !!((x.width || x.initialWidth) && (x.height || x.initialHeight))
+    });
+    g = ua(p, n, r, 0.5, 2, 0.1);
+  }
+  return {
+    flowId: we(null),
+    nodes: h2(e, a, l, f, d),
+    nodeLookup: Ft(a),
+    parentLookup: Ft(l),
+    edgeLookup: Ft(c),
+    visibleNodes: Ft([]),
+    edges: v2(t, u, c),
+    visibleEdges: Ft([]),
+    connectionLookup: Ft(u),
+    height: we(500),
+    width: we(500),
+    minZoom: we(0.5),
+    maxZoom: we(2),
+    nodeOrigin: we(f),
+    nodeDragThreshold: we(1),
+    nodeExtent: we(d),
+    translateExtent: we(vi),
+    autoPanOnNodeDrag: we(!0),
+    autoPanOnConnect: we(!0),
+    fitViewOnInit: we(!1),
+    fitViewOnInitDone: we(!1),
+    fitViewOptions: we(void 0),
+    panZoom: we(null),
+    snapGrid: we(null),
+    dragging: we(!1),
+    selectionRect: we(null),
+    selectionKeyPressed: we(!1),
+    multiselectionKeyPressed: we(!1),
+    deleteKeyPressed: we(!1),
+    panActivationKeyPressed: we(!1),
+    zoomActivationKeyPressed: we(!1),
+    selectionRectMode: we(null),
+    selectionMode: we(pi.Partial),
+    nodeTypes: we(Sc),
+    edgeTypes: we(Pc),
+    viewport: we(g),
+    connectionMode: we(cr.Strict),
+    domNode: we(null),
+    connection: Ft(Ns),
+    connectionLineType: we(Cr.Bezier),
+    connectionRadius: we(20),
+    isValidConnection: we(() => !0),
+    nodesDraggable: we(!0),
+    nodesConnectable: we(!0),
+    elementsSelectable: we(!0),
+    selectNodesOnDrag: we(!0),
+    markers: Ft([]),
+    defaultMarkerColor: we("#b1b1b7"),
+    lib: Ft("svelte"),
+    onlyRenderVisibleElements: we(!1),
+    onerror: we(v0),
+    ondelete: we(void 0),
+    onedgecreate: we(void 0),
+    onconnect: we(void 0),
+    onconnectstart: we(void 0),
+    onconnectend: we(void 0),
+    onbeforedelete: we(void 0),
+    nodesInitialized: we(!1),
+    edgesInitialized: we(!1),
+    viewportInitialized: we(!1),
+    initialized: Ft(!1)
+  };
+};
+function m2(e) {
+  const t = Kn([
+    e.edges,
+    e.nodes,
+    e.nodeLookup,
+    e.onlyRenderVisibleElements,
+    e.viewport,
+    e.width,
+    e.height
+  ], ([n, , r, o, i, s, a]) => o && s && a ? n.filter((u) => {
+    const c = r.get(u.source), f = r.get(u.target);
+    return c && f && b0({
+      sourceNode: c,
+      targetNode: f,
+      width: s,
+      height: a,
+      transform: [i.x, i.y, i.zoom]
+    });
+  }) : n);
+  return Kn([t, e.nodes, e.nodeLookup, e.connectionMode, e.onerror], ([n, , r, o, i]) => n.reduce((a, l) => {
+    const u = r.get(l.source), c = r.get(l.target);
+    if (!u || !c)
+      return a;
+    const f = N0({
+      id: l.id,
+      sourceNode: u,
+      targetNode: c,
+      sourceHandle: l.sourceHandle || null,
+      targetHandle: l.targetHandle || null,
+      connectionMode: o,
+      onError: i
+    });
+    return f && a.push({
+      ...l,
+      zIndex: x0({
+        selected: l.selected,
+        zIndex: l.zIndex,
+        sourceNode: u,
+        targetNode: c,
+        elevateOnSelect: !1
+      }),
+      ...f
+    }), a;
+  }, []));
+}
+function y2(e) {
+  return Kn([
+    e.nodeLookup,
+    e.onlyRenderVisibleElements,
+    e.width,
+    e.height,
+    e.viewport,
+    e.nodes
+  ], ([t, n, r, o, i]) => {
+    const s = [i.x, i.y, i.zoom];
+    return n ? Ju(t, { x: 0, y: 0, width: r, height: o }, s, !0) : Array.from(t.values());
+  });
+}
+const Wi = Symbol();
+function Nc({ nodes: e, edges: t, width: n, height: r, fitView: o, nodeOrigin: i, nodeExtent: s }) {
+  const a = p2({
+    nodes: e,
+    edges: t,
+    width: n,
+    height: r,
+    fitView: o,
+    nodeOrigin: i,
+    nodeExtent: s
+  });
+  function l(k) {
+    a.nodeTypes.set({
+      ...Sc,
+      ...k
+    });
+  }
+  function u(k) {
+    a.edgeTypes.set({
+      ...Pc,
+      ...k
+    });
+  }
+  function c(k) {
+    const P = q(a.edges);
+    a.edges.set($0(k, P));
+  }
+  const f = (k, P = !1) => {
+    var I;
+    const H = q(a.nodeLookup);
+    for (const [B, F] of k) {
+      const K = (I = H.get(B)) == null ? void 0 : I.internals.userNode;
+      K && (K.position = F.position, K.dragging = P);
+    }
+    a.nodes.update((B) => B);
+  };
+  function d(k) {
+    var F, K, ie;
+    const P = q(a.nodeLookup), H = q(a.parentLookup), { changes: I, updatedInternals: B } = O0(k, P, q(a.parentLookup), q(a.domNode), q(a.nodeOrigin));
+    if (B) {
+      if (V0(P, H, { nodeOrigin: i, nodeExtent: s }), !q(a.fitViewOnInitDone) && q(a.fitViewOnInit)) {
+        const ee = q(a.fitViewOptions), W = p({
+          ...ee,
+          nodes: ee == null ? void 0 : ee.nodes
+        });
+        a.fitViewOnInitDone.set(W);
+      }
+      for (const ee of I) {
+        const W = (F = P.get(ee.id)) == null ? void 0 : F.internals.userNode;
+        if (W)
+          switch (ee.type) {
+            case "dimensions": {
+              const ue = { ...W.measured, ...ee.dimensions };
+              ee.setAttributes && (W.width = ((K = ee.dimensions) == null ? void 0 : K.width) ?? W.width, W.height = ((ie = ee.dimensions) == null ? void 0 : ie.height) ?? W.height), W.measured = ue;
+              break;
+            }
+            case "position":
+              W.position = ee.position ?? W.position;
+              break;
+          }
+      }
+      a.nodes.update((ee) => ee), q(a.nodesInitialized) || a.nodesInitialized.set(!0);
+    }
+  }
+  function g(k) {
+    const P = q(a.panZoom), H = q(a.domNode);
+    if (!P || !H)
+      return Promise.resolve(!1);
+    const { width: I, height: B } = ca(H), F = ul(q(a.nodeLookup), k);
+    return cl({
+      nodes: F,
+      width: I,
+      height: B,
+      minZoom: q(a.minZoom),
+      maxZoom: q(a.maxZoom),
+      panZoom: P
+    }, k);
+  }
+  function p(k) {
+    const P = q(a.panZoom);
+    if (!P)
+      return !1;
+    const H = ul(q(a.nodeLookup), k);
+    return cl({
+      nodes: H,
+      width: q(a.width),
+      height: q(a.height),
+      minZoom: q(a.minZoom),
+      maxZoom: q(a.maxZoom),
+      panZoom: P
+    }, k), H.size > 0;
+  }
+  function x(k, P) {
+    const H = q(a.panZoom);
+    return H ? H.scaleBy(k, P) : Promise.resolve(!1);
+  }
+  function C(k) {
+    return x(1.2, k);
+  }
+  function $(k) {
+    return x(1 / 1.2, k);
+  }
+  function m(k) {
+    const P = q(a.panZoom);
+    P && (P.setScaleExtent([k, q(a.maxZoom)]), a.minZoom.set(k));
+  }
+  function _(k) {
+    const P = q(a.panZoom);
+    P && (P.setScaleExtent([q(a.minZoom), k]), a.maxZoom.set(k));
+  }
+  function v(k) {
+    const P = q(a.panZoom);
+    P && (P.setTranslateExtent(k), a.translateExtent.set(k));
+  }
+  function b(k) {
+    let P = !1;
+    return k.forEach((H) => {
+      H.selected && (H.selected = !1, P = !0);
+    }), P;
+  }
+  function N(k) {
+    var P;
+    (P = q(a.panZoom)) == null || P.setClickDistance(k);
+  }
+  function E(k) {
+    b((k == null ? void 0 : k.nodes) || q(a.nodes)) && a.nodes.set(q(a.nodes)), b((k == null ? void 0 : k.edges) || q(a.edges)) && a.edges.set(q(a.edges));
+  }
+  a.deleteKeyPressed.subscribe(async (k) => {
+    var P;
+    if (k) {
+      const H = q(a.nodes), I = q(a.edges), B = H.filter((ee) => ee.selected), F = I.filter((ee) => ee.selected), { nodes: K, edges: ie } = await Qu({
+        nodesToRemove: B,
+        edgesToRemove: F,
+        nodes: H,
+        edges: I,
+        onBeforeDelete: q(a.onbeforedelete)
+      });
+      (K.length || ie.length) && (a.nodes.update((ee) => ee.filter((W) => !K.some((ue) => ue.id === W.id))), a.edges.update((ee) => ee.filter((W) => !ie.some((ue) => ue.id === W.id))), (P = q(a.ondelete)) == null || P({
+        nodes: K,
+        edges: ie
+      }));
+    }
+  });
+  function M(k) {
+    const P = q(a.multiselectionKeyPressed);
+    a.nodes.update((H) => H.map((I) => {
+      const B = k.includes(I.id), F = P && I.selected || B;
+      return I.selected = F, I;
+    })), P || a.edges.update((H) => H.map((I) => (I.selected = !1, I)));
+  }
+  function D(k) {
+    const P = q(a.multiselectionKeyPressed);
+    a.edges.update((H) => H.map((I) => {
+      const B = k.includes(I.id), F = P && I.selected || B;
+      return I.selected = F, I;
+    })), P || a.nodes.update((H) => H.map((I) => (I.selected = !1, I)));
+  }
+  function V(k) {
+    var H;
+    const P = (H = q(a.nodes)) == null ? void 0 : H.find((I) => I.id === k);
+    if (!P) {
+      console.warn("012", Dr.error012(k));
+      return;
+    }
+    a.selectionRect.set(null), a.selectionRectMode.set(null), P.selected ? P.selected && q(a.multiselectionKeyPressed) && E({ nodes: [P], edges: [] }) : M([k]);
+  }
+  function A(k) {
+    const P = q(a.viewport);
+    return I0({
+      delta: k,
+      panZoom: q(a.panZoom),
+      transform: [P.x, P.y, P.zoom],
+      translateExtent: q(a.translateExtent),
+      width: q(a.width),
+      height: q(a.height)
+    });
+  }
+  const O = we(Ns), R = (k) => {
+    O.set({ ...k });
+  };
+  function S() {
+    O.set(Ns);
+  }
+  function T() {
+    a.fitViewOnInitDone.set(!1), a.selectionRect.set(null), a.selectionRectMode.set(null), a.snapGrid.set(null), a.isValidConnection.set(() => !0), E(), S();
+  }
+  return {
+    // state
+    ...a,
+    // derived state
+    visibleEdges: m2(a),
+    visibleNodes: y2(a),
+    connection: Kn([O, a.viewport], ([k, P]) => k.inProgress ? {
+      ...k,
+      to: Mo(k.to, [P.x, P.y, P.zoom])
+    } : { ...k }),
+    markers: Kn([a.edges, a.defaultMarkerColor, a.flowId], ([k, P, H]) => M0(k, { defaultColor: P, id: H })),
+    initialized: (() => {
+      let k = !1;
+      const P = q(a.nodes).length, H = q(a.edges).length;
+      return Kn([a.nodesInitialized, a.edgesInitialized, a.viewportInitialized], ([I, B, F]) => k || (P === 0 ? k = F : H === 0 ? k = F && I : k = F && I && B, k));
+    })(),
+    // actions
+    syncNodeStores: (k) => d2(a.nodes, k),
+    syncEdgeStores: (k) => f2(a.edges, k),
+    syncViewport: (k) => g2(a.panZoom, a.viewport, k),
+    setNodeTypes: l,
+    setEdgeTypes: u,
+    addEdge: c,
+    updateNodePositions: f,
+    updateNodeInternals: d,
+    zoomIn: C,
+    zoomOut: $,
+    fitView: (k) => g(k),
+    setMinZoom: m,
+    setMaxZoom: _,
+    setTranslateExtent: v,
+    setPaneClickDistance: N,
+    unselectNodesAndEdges: E,
+    addSelectedNodes: M,
+    addSelectedEdges: D,
+    handleNodeSelection: V,
+    panBy: A,
+    updateConnection: R,
+    cancelConnection: S,
+    reset: T
+  };
+}
+function Ue() {
+  const e = ar(Wi);
+  if (!e)
+    throw new Error("In order to use useStore you need to wrap your component in a <SvelteFlowProvider />");
+  return e.getStore();
+}
+function w2({ nodes: e, edges: t, width: n, height: r, fitView: o, nodeOrigin: i, nodeExtent: s }) {
+  const a = Nc({ nodes: e, edges: t, width: n, height: r, fitView: o, nodeOrigin: i, nodeExtent: s });
+  return Tr(Wi, {
+    getStore: () => a
+  }), a;
+}
+function us(e, t) {
+  const { panZoom: n, minZoom: r, maxZoom: o, initialViewport: i, viewport: s, dragging: a, translateExtent: l, paneClickDistance: u } = t, c = n2({
+    domNode: e,
+    minZoom: r,
+    maxZoom: o,
+    translateExtent: l,
+    viewport: i,
+    paneClickDistance: u,
+    onDraggingChange: a.set
+  }), f = c.getViewport();
+  return s.set(f), n.set(c), c.update(t), {
+    update(d) {
+      c.update(d);
+    }
+  };
+}
+var _2 = /* @__PURE__ */ ne('<div class="svelte-flow__zoom svelte-4xkw84"><!></div>');
+const x2 = {
+  hash: "svelte-4xkw84",
+  code: ".svelte-flow__zoom.svelte-4xkw84 {width:100%;height:100%;position:absolute;top:0;left:0;z-index:4;}"
+};
+function Mc(e, t) {
+  de(t, !1), Je(e, x2);
+  const [n, r] = tt(), o = () => Q(H, "$panActivationKeyPressed", n), i = () => Q(R, "$minZoom", n), s = () => Q(S, "$maxZoom", n), a = () => Q(I, "$zoomActivationKeyPressed", n), l = () => Q(O, "$selectionRect", n), u = () => Q(k, "$translateExtent", n), c = () => Q(P, "$lib", n), f = re(), d = re(), g = re();
+  let p = w(t, "initialViewport", 12, void 0), x = w(t, "onMoveStart", 12, void 0), C = w(t, "onMove", 12, void 0), $ = w(t, "onMoveEnd", 12, void 0), m = w(t, "panOnScrollMode", 12), _ = w(t, "preventScrolling", 12), v = w(t, "zoomOnScroll", 12), b = w(t, "zoomOnDoubleClick", 12), N = w(t, "zoomOnPinch", 12), E = w(t, "panOnDrag", 12), M = w(t, "panOnScroll", 12), D = w(t, "paneClickDistance", 12);
+  const {
+    viewport: V,
+    panZoom: A,
+    selectionRect: O,
+    minZoom: R,
+    maxZoom: S,
+    dragging: T,
+    translateExtent: k,
+    lib: P,
+    panActivationKeyPressed: H,
+    zoomActivationKeyPressed: I,
+    viewportInitialized: B
+  } = Ue(), F = (W) => V.set({
+    x: W[0],
+    y: W[1],
+    zoom: W[2]
+  });
+  un(() => {
+    li(B, !0);
+  }), he(() => j(p()), () => {
+    U(f, p() || { x: 0, y: 0, zoom: 1 });
+  }), he(
+    () => (o(), j(E())),
+    () => {
+      U(d, o() || E());
+    }
+  ), he(
+    () => (o(), j(M())),
+    () => {
+      U(g, o() || M());
+    }
+  ), gt(), He();
+  var K = _2(), ie = X(K);
+  pt(ie, t, "default", {}), Z(K), vt(K, (W, ue) => us == null ? void 0 : us(W, ue), () => ({
+    viewport: V,
+    minZoom: i(),
+    maxZoom: s(),
+    initialViewport: h(f),
+    dragging: T,
+    panZoom: A,
+    onPanZoomStart: x(),
+    onPanZoom: C(),
+    onPanZoomEnd: $(),
+    zoomOnScroll: v(),
+    zoomOnDoubleClick: b(),
+    zoomOnPinch: N(),
+    panOnScroll: h(g),
+    panOnDrag: h(d),
+    panOnScrollSpeed: 0.5,
+    panOnScrollMode: m() || qn.Free,
+    zoomActivationKeyPressed: a(),
+    preventScrolling: typeof _() == "boolean" ? _() : !0,
+    noPanClassName: "nopan",
+    noWheelClassName: "nowheel",
+    userSelectionActive: !!l(),
+    translateExtent: u(),
+    lib: c(),
+    paneClickDistance: D(),
+    onTransformChange: F
+  })), L(e, K);
+  var ee = fe({
+    get initialViewport() {
+      return p();
+    },
+    set initialViewport(W) {
+      p(W), y();
+    },
+    get onMoveStart() {
+      return x();
+    },
+    set onMoveStart(W) {
+      x(W), y();
+    },
+    get onMove() {
+      return C();
+    },
+    set onMove(W) {
+      C(W), y();
+    },
+    get onMoveEnd() {
+      return $();
+    },
+    set onMoveEnd(W) {
+      $(W), y();
+    },
+    get panOnScrollMode() {
+      return m();
+    },
+    set panOnScrollMode(W) {
+      m(W), y();
+    },
+    get preventScrolling() {
+      return _();
+    },
+    set preventScrolling(W) {
+      _(W), y();
+    },
+    get zoomOnScroll() {
+      return v();
+    },
+    set zoomOnScroll(W) {
+      v(W), y();
+    },
+    get zoomOnDoubleClick() {
+      return b();
+    },
+    set zoomOnDoubleClick(W) {
+      b(W), y();
+    },
+    get zoomOnPinch() {
+      return N();
+    },
+    set zoomOnPinch(W) {
+      N(W), y();
+    },
+    get panOnDrag() {
+      return E();
+    },
+    set panOnDrag(W) {
+      E(W), y();
+    },
+    get panOnScroll() {
+      return M();
+    },
+    set panOnScroll(W) {
+      M(W), y();
+    },
+    get paneClickDistance() {
+      return D();
+    },
+    set paneClickDistance(W) {
+      D(W), y();
+    }
+  });
+  return r(), ee;
+}
+ae(
+  Mc,
+  {
+    initialViewport: {},
+    onMoveStart: {},
+    onMove: {},
+    onMoveEnd: {},
+    panOnScrollMode: {},
+    preventScrolling: {},
+    zoomOnScroll: {},
+    zoomOnDoubleClick: {},
+    zoomOnPinch: {},
+    panOnDrag: {},
+    panOnScroll: {},
+    paneClickDistance: {}
+  },
+  ["default"],
+  [],
+  !0
+);
+function kl(e, t) {
+  return (n) => {
+    n.target === t && (e == null || e(n));
+  };
+}
+function $l(e) {
+  return (t) => {
+    const n = e.includes(t.id);
+    return t.selected !== n && (t.selected = n), t;
+  };
+}
+var b2 = /* @__PURE__ */ ne("<div><!></div>");
+const C2 = {
+  hash: "svelte-1esy7hx",
+  code: ".svelte-flow__pane.svelte-1esy7hx {position:absolute;top:0;left:0;width:100%;height:100%;}"
+};
+function Tc(e, t) {
+  de(t, !1), Je(e, C2);
+  const [n, r] = tt(), o = () => Q(S, "$panActivationKeyPressed", n), i = () => Q(O, "$selectionKeyPressed", n), s = () => Q(V, "$selectionRect", n), a = () => Q(D, "$elementsSelectable", n), l = () => Q(A, "$selectionRectMode", n), u = () => Q(N, "$edges", n), c = () => Q(b, "$nodeLookup", n), f = () => Q(E, "$viewport", n), d = () => Q(R, "$selectionMode", n), g = () => Q(M, "$dragging", n), p = re(), x = re(), C = re();
+  let $ = w(t, "panOnDrag", 12, void 0), m = w(t, "selectionOnDrag", 12, void 0);
+  const _ = Oi(), {
+    nodes: v,
+    nodeLookup: b,
+    edges: N,
+    viewport: E,
+    dragging: M,
+    elementsSelectable: D,
+    selectionRect: V,
+    selectionRectMode: A,
+    selectionKeyPressed: O,
+    selectionMode: R,
+    panActivationKeyPressed: S,
+    unselectNodesAndEdges: T
+  } = Ue();
+  let k = re(), P = null, H = [], I = !1;
+  function B(G) {
+    if (I) {
+      I = !1;
+      return;
+    }
+    _("paneclick", { event: G }), T(), A.set(null);
+  }
+  function F(G) {
+    var Ae, Xe;
+    if (P = h(k).getBoundingClientRect(), !D || !h(x) || G.button !== 0 || G.target !== h(k) || !P)
+      return;
+    (Xe = (Ae = G.target) == null ? void 0 : Ae.setPointerCapture) == null || Xe.call(Ae, G.pointerId);
+    const { x: se, y: Te } = Hn(G, P);
+    T(), V.set({
+      width: 0,
+      height: 0,
+      startX: se,
+      startY: Te,
+      x: se,
+      y: Te
+    });
+  }
+  function K(G) {
+    if (!h(x) || !P || !s())
+      return;
+    I = !0;
+    const se = Hn(G, P), Te = s().startX ?? 0, Ae = s().startY ?? 0, Xe = {
+      ...s(),
+      x: se.x < Te ? se.x : Te,
+      y: se.y < Ae ? se.y : Ae,
+      width: Math.abs(se.x - Te),
+      height: Math.abs(se.y - Ae)
+    }, te = H.map((oe) => oe.id), Fe = Ms(H, u()).map((oe) => oe.id);
+    H = Ju(
+      c(),
+      Xe,
+      [
+        f().x,
+        f().y,
+        f().zoom
+      ],
+      d() === pi.Partial,
+      !0
+    );
+    const Le = Ms(H, u()).map((oe) => oe.id), Qe = H.map((oe) => oe.id);
+    (te.length !== Qe.length || Qe.some((oe) => !te.includes(oe))) && v.update((oe) => oe.map($l(Qe))), (Fe.length !== Le.length || Le.some((oe) => !Fe.includes(oe))) && N.update((oe) => oe.map($l(Le))), A.set("user"), V.set(Xe);
+  }
+  function ie(G) {
+    var se, Te;
+    G.button === 0 && ((Te = (se = G.target) == null ? void 0 : se.releasePointerCapture) == null || Te.call(se, G.pointerId), !h(x) && l() === "user" && G.target === h(k) && (B == null || B(G)), V.set(null), H.length > 0 && li(A, "nodes"), i() && (I = !1));
+  }
+  const ee = (G) => {
+    var se;
+    if (Array.isArray(h(p)) && ((se = h(p)) != null && se.includes(2))) {
+      G.preventDefault();
+      return;
+    }
+    _("panecontextmenu", { event: G });
+  };
+  he(
+    () => (o(), j($())),
+    () => {
+      U(p, o() || $());
+    }
+  ), he(
+    () => (i(), s(), j(m()), h(p)),
+    () => {
+      U(x, i() || s() || m() && h(p) !== !0);
+    }
+  ), he(
+    () => (a(), h(x), l()),
+    () => {
+      U(C, a() && (h(x) || l() === "user"));
+    }
+  ), gt(), He();
+  var W = b2(), ue = /* @__PURE__ */ Me(() => h(C) ? void 0 : kl(B, h(k))), me = /* @__PURE__ */ Me(() => kl(ee, h(k)));
+  let Ce;
+  var ge = X(W);
+  pt(ge, t, "default", {}), Z(W), An(W, (G) => U(k, G), () => h(k)), Ee(
+    (G) => Ce = kt(W, 1, "svelte-flow__pane svelte-1esy7hx", null, Ce, {
+      draggable: G,
+      dragging: g(),
+      selection: h(x)
+    }),
+    [
+      () => $() === !0 || Array.isArray($()) && $().includes(0)
+    ],
+    pe
+  ), Ye("click", W, function(...G) {
+    var se;
+    (se = h(ue)) == null || se.apply(this, G);
+  }), Ye("pointerdown", W, function(...G) {
+    var se;
+    (se = h(C) ? F : void 0) == null || se.apply(this, G);
+  }), Ye("pointermove", W, function(...G) {
+    var se;
+    (se = h(C) ? K : void 0) == null || se.apply(this, G);
+  }), Ye("pointerup", W, function(...G) {
+    var se;
+    (se = h(C) ? ie : void 0) == null || se.apply(this, G);
+  }), Ye("contextmenu", W, function(...G) {
+    var se;
+    (se = h(me)) == null || se.apply(this, G);
+  }), L(e, W);
+  var ze = fe({
+    get panOnDrag() {
+      return $();
+    },
+    set panOnDrag(G) {
+      $(G), y();
+    },
+    get selectionOnDrag() {
+      return m();
+    },
+    set selectionOnDrag(G) {
+      m(G), y();
+    }
+  });
+  return r(), ze;
+}
+ae(Tc, { panOnDrag: {}, selectionOnDrag: {} }, ["default"], [], !0);
+var k2 = /* @__PURE__ */ ne('<div class="svelte-flow__viewport xyflow__viewport svelte-1floaup"><!></div>');
+const $2 = {
+  hash: "svelte-1floaup",
+  code: ".svelte-flow__viewport.svelte-1floaup {width:100%;height:100%;position:absolute;top:0;left:0;}"
+};
+function Hc(e, t) {
+  de(t, !1), Je(e, $2);
+  const [n, r] = tt(), o = () => Q(i, "$viewport", n), { viewport: i } = Ue();
+  He();
+  var s = k2(), a = X(s);
+  pt(a, t, "default", {}), Z(s), Ee(() => ce(s, "style", `transform: translate(${o().x ?? ""}px, ${o().y ?? ""}px) scale(${o().zoom ?? ""})`)), L(e, s), fe(), r();
+}
+ae(Hc, {}, ["default"], [], !0);
+function $r(e, t) {
+  const { store: n, onDrag: r, onDragStart: o, onDragStop: i, onNodeMouseDown: s } = t, a = B0({
+    onDrag: r,
+    onDragStart: o,
+    onDragStop: i,
+    onNodeMouseDown: s,
+    getStoreItems: () => {
+      const u = q(n.snapGrid), c = q(n.viewport);
+      return {
+        nodes: q(n.nodes),
+        nodeLookup: q(n.nodeLookup),
+        edges: q(n.edges),
+        nodeExtent: q(n.nodeExtent),
+        snapGrid: u || [0, 0],
+        snapToGrid: !!u,
+        nodeOrigin: q(n.nodeOrigin),
+        multiSelectionActive: q(n.multiselectionKeyPressed),
+        domNode: q(n.domNode),
+        transform: [c.x, c.y, c.zoom],
+        autoPanOnNodeDrag: q(n.autoPanOnNodeDrag),
+        nodesDraggable: q(n.nodesDraggable),
+        selectNodesOnDrag: q(n.selectNodesOnDrag),
+        nodeDragThreshold: q(n.nodeDragThreshold),
+        unselectNodesAndEdges: n.unselectNodesAndEdges,
+        updateNodePositions: n.updateNodePositions,
+        panBy: n.panBy
+      };
+    }
+  });
+  function l(u, c) {
+    if (c.disabled) {
+      a.destroy();
+      return;
+    }
+    a.update({
+      domNode: u,
+      noDragClassName: c.noDragClass,
+      handleSelector: c.handleSelector,
+      nodeId: c.nodeId,
+      isSelectable: c.isSelectable,
+      nodeClickDistance: c.nodeClickDistance
+    });
+  }
+  return l(e, t), {
+    update(u) {
+      l(e, u);
+    },
+    destroy() {
+      a.destroy();
+    }
+  };
+}
+function E2({ width: e, height: t, initialWidth: n, initialHeight: r, measuredWidth: o, measuredHeight: i }) {
+  if (o === void 0 && i === void 0) {
+    const s = e ?? n, a = t ?? r;
+    return {
+      width: s ? `width:${s}px;` : "",
+      height: a ? `height:${a}px;` : ""
+    };
+  }
+  return {
+    width: e ? `width:${e}px;` : "",
+    height: t ? `height:${t}px;` : ""
+  };
+}
+var S2 = /* @__PURE__ */ ne("<div><!></div>");
+function Vc(e, t) {
+  de(t, !1);
+  const [n, r] = tt(), o = () => Q(me, "$nodeTypes", n), i = () => Q(se, "$elementsSelectable", n), s = () => Q(Te, "$nodesDraggable", n), a = () => Q(Fe, "$connectableStore", n), l = re(void 0, !0), u = re(void 0, !0), c = re(void 0, !0), f = re(void 0, !0);
+  let d = w(t, "node", 13), g = w(t, "id", 13), p = w(t, "data", 29, () => ({})), x = w(t, "selected", 13, !1), C = w(t, "draggable", 13, void 0), $ = w(t, "selectable", 13, void 0), m = w(t, "connectable", 13, !0), _ = w(t, "deletable", 13, !0), v = w(t, "hidden", 13, !1), b = w(t, "dragging", 13, !1), N = w(t, "resizeObserver", 13, null), E = w(t, "style", 13, void 0), M = w(t, "type", 13, "default"), D = w(t, "isParent", 13, !1), V = w(t, "positionX", 13), A = w(t, "positionY", 13), O = w(t, "sourcePosition", 13, void 0), R = w(t, "targetPosition", 13, void 0), S = w(t, "zIndex", 13), T = w(t, "measuredWidth", 13, void 0), k = w(t, "measuredHeight", 13, void 0), P = w(t, "initialWidth", 13, void 0), H = w(t, "initialHeight", 13, void 0), I = w(t, "width", 13, void 0), B = w(t, "height", 13, void 0), F = w(t, "dragHandle", 13, void 0), K = w(t, "initialized", 13, !1), ie = w(t, "parentId", 13, void 0), ee = w(t, "nodeClickDistance", 13, void 0), W = w(t, "class", 13, "");
+  const ue = Ue(), {
+    nodeTypes: me,
+    nodeDragThreshold: Ce,
+    selectNodesOnDrag: ge,
+    handleNodeSelection: ze,
+    updateNodeInternals: G,
+    elementsSelectable: se,
+    nodesDraggable: Te
+  } = ue;
+  let Ae = re(void 0, !0), Xe = re(null, !0);
+  const te = Oi(), Fe = we(m());
+  let Le = re(void 0, !0), Qe = re(void 0, !0), oe = re(void 0, !0);
+  Tr("svelteflow__node_id", g()), Tr("svelteflow__node_connectable", Fe), Qs(() => {
+    var J;
+    h(Xe) && ((J = N()) == null || J.unobserve(h(Xe)));
+  });
+  function ve(J) {
+    $() && (!q(ge) || !C() || q(Ce) > 0) && ze(g()), te("nodeclick", { node: d().internals.userNode, event: J });
+  }
+  he(() => j(M()), () => {
+    U(l, M() || "default");
+  }), he(() => (o(), h(l)), () => {
+    U(u, !!o()[h(l)]);
+  }), he(
+    () => (o(), h(l), _i),
+    () => {
+      U(c, o()[h(l)] || _i);
+    }
+  ), he(
+    () => (h(u), j(M())),
+    () => {
+      h(u) || console.warn("003", Dr.error003(M()));
+    }
+  ), he(
+    () => (j(I()), j(B()), j(P()), j(H()), j(T()), j(k())),
+    () => {
+      U(f, E2({
+        width: I(),
+        height: B(),
+        initialWidth: P(),
+        initialHeight: H(),
+        measuredWidth: T(),
+        measuredHeight: k()
+      }));
+    }
+  ), he(() => j(m()), () => {
+    Fe.set(!!m());
+  }), he(
+    () => (h(Le), h(l), h(Qe), j(O()), h(oe), j(R()), j(g()), h(Ae)),
+    () => {
+      (h(Le) && h(l) !== h(Le) || h(Qe) && O() !== h(Qe) || h(oe) && R() !== h(oe)) && requestAnimationFrame(() => G(/* @__PURE__ */ new Map([
+        [
+          g(),
+          {
+            id: g(),
+            nodeElement: h(Ae),
+            force: !0
+          }
+        ]
+      ]))), U(Le, h(l)), U(Qe, O()), U(oe, R());
+    }
+  ), he(
+    () => (j(N()), h(Ae), h(Xe), j(K())),
+    () => {
+      N() && (h(Ae) !== h(Xe) || !K()) && (h(Xe) && N().unobserve(h(Xe)), h(Ae) && N().observe(h(Ae)), U(Xe, h(Ae)));
+    }
+  ), gt(), He(!0);
+  var xe = et(), Oe = be(xe);
+  {
+    var ct = (J) => {
+      var Re = S2();
+      let le;
+      var fn = X(Re);
+      const Ut = /* @__PURE__ */ pe(() => x() ?? !1), gn = /* @__PURE__ */ pe(() => $() ?? i() ?? !0), Ne = /* @__PURE__ */ pe(() => _() ?? !0), rt = /* @__PURE__ */ pe(() => C() ?? s() ?? !0);
+      yu(fn, () => h(c), (ye, ot) => {
+        ot(ye, {
+          get data() {
+            return p();
+          },
+          get id() {
+            return g();
+          },
+          get selected() {
+            return h(Ut);
+          },
+          get selectable() {
+            return h(gn);
+          },
+          get deletable() {
+            return h(Ne);
+          },
+          get sourcePosition() {
+            return O();
+          },
+          get targetPosition() {
+            return R();
+          },
+          get zIndex() {
+            return S();
+          },
+          get dragging() {
+            return b();
+          },
+          get draggable() {
+            return h(rt);
+          },
+          get dragHandle() {
+            return F();
+          },
+          get parentId() {
+            return ie();
+          },
+          get type() {
+            return h(l);
+          },
+          get isConnectable() {
+            return a();
+          },
+          get positionAbsoluteX() {
+            return V();
+          },
+          get positionAbsoluteY() {
+            return A();
+          },
+          get width() {
+            return I();
+          },
+          get height() {
+            return B();
+          }
+        });
+      }), Z(Re), vt(Re, (ye, ot) => $r == null ? void 0 : $r(ye, ot), () => ({
+        nodeId: g(),
+        isSelectable: $(),
+        disabled: !1,
+        handleSelector: F(),
+        noDragClass: "nodrag",
+        nodeClickDistance: ee(),
+        onNodeMouseDown: ze,
+        onDrag: (ye, ot, at, Xt) => {
+          te("nodedrag", { event: ye, targetNode: at, nodes: Xt });
+        },
+        onDragStart: (ye, ot, at, Xt) => {
+          te("nodedragstart", { event: ye, targetNode: at, nodes: Xt });
+        },
+        onDragStop: (ye, ot, at, Xt) => {
+          te("nodedragstop", { event: ye, targetNode: at, nodes: Xt });
+        },
+        store: ue
+      })), An(Re, (ye) => U(Ae, ye), () => h(Ae)), Ot(() => Ye("click", Re, ve)), Ot(() => Ye("mouseenter", Re, (ye) => te("nodemouseenter", { node: d(), event: ye }))), Ot(() => Ye("mouseleave", Re, (ye) => te("nodemouseleave", { node: d(), event: ye }))), Ot(() => Ye("mousemove", Re, (ye) => te("nodemousemove", { node: d(), event: ye }))), Ot(() => Ye("contextmenu", Re, (ye) => te("nodecontextmenu", { node: d(), event: ye }))), Ee(
+        (ye) => {
+          ce(Re, "data-id", g()), le = kt(Re, 1, bn(ye), null, le, {
+            dragging: b(),
+            selected: x(),
+            draggable: C(),
+            connectable: m(),
+            selectable: $(),
+            nopan: C(),
+            parent: D()
+          }), ce(Re, "style", `${E() ?? ""};${h(f).width ?? ""}${h(f).height ?? ""}`), st(Re, "z-index", S()), st(Re, "transform", `translate(${V() ?? ""}px, ${A() ?? ""}px)`), st(Re, "visibility", K() ? "visible" : "hidden");
+        },
+        [
+          () => Et([
+            "svelte-flow__node",
+            `svelte-flow__node-${h(l)}`,
+            W()
+          ])
+        ],
+        pe
+      ), L(J, Re);
+    };
+    ke(Oe, (J) => {
+      v() || J(ct);
+    });
+  }
+  L(e, xe);
+  var lt = fe({
+    get node() {
+      return d();
+    },
+    set node(J) {
+      d(J), y();
+    },
+    get id() {
+      return g();
+    },
+    set id(J) {
+      g(J), y();
+    },
+    get data() {
+      return p();
+    },
+    set data(J) {
+      p(J), y();
+    },
+    get selected() {
+      return x();
+    },
+    set selected(J) {
+      x(J), y();
+    },
+    get draggable() {
+      return C();
+    },
+    set draggable(J) {
+      C(J), y();
+    },
+    get selectable() {
+      return $();
+    },
+    set selectable(J) {
+      $(J), y();
+    },
+    get connectable() {
+      return m();
+    },
+    set connectable(J) {
+      m(J), y();
+    },
+    get deletable() {
+      return _();
+    },
+    set deletable(J) {
+      _(J), y();
+    },
+    get hidden() {
+      return v();
+    },
+    set hidden(J) {
+      v(J), y();
+    },
+    get dragging() {
+      return b();
+    },
+    set dragging(J) {
+      b(J), y();
+    },
+    get resizeObserver() {
+      return N();
+    },
+    set resizeObserver(J) {
+      N(J), y();
+    },
+    get style() {
+      return E();
+    },
+    set style(J) {
+      E(J), y();
+    },
+    get type() {
+      return M();
+    },
+    set type(J) {
+      M(J), y();
+    },
+    get isParent() {
+      return D();
+    },
+    set isParent(J) {
+      D(J), y();
+    },
+    get positionX() {
+      return V();
+    },
+    set positionX(J) {
+      V(J), y();
+    },
+    get positionY() {
+      return A();
+    },
+    set positionY(J) {
+      A(J), y();
+    },
+    get sourcePosition() {
+      return O();
+    },
+    set sourcePosition(J) {
+      O(J), y();
+    },
+    get targetPosition() {
+      return R();
+    },
+    set targetPosition(J) {
+      R(J), y();
+    },
+    get zIndex() {
+      return S();
+    },
+    set zIndex(J) {
+      S(J), y();
+    },
+    get measuredWidth() {
+      return T();
+    },
+    set measuredWidth(J) {
+      T(J), y();
+    },
+    get measuredHeight() {
+      return k();
+    },
+    set measuredHeight(J) {
+      k(J), y();
+    },
+    get initialWidth() {
+      return P();
+    },
+    set initialWidth(J) {
+      P(J), y();
+    },
+    get initialHeight() {
+      return H();
+    },
+    set initialHeight(J) {
+      H(J), y();
+    },
+    get width() {
+      return I();
+    },
+    set width(J) {
+      I(J), y();
+    },
+    get height() {
+      return B();
+    },
+    set height(J) {
+      B(J), y();
+    },
+    get dragHandle() {
+      return F();
+    },
+    set dragHandle(J) {
+      F(J), y();
+    },
+    get initialized() {
+      return K();
+    },
+    set initialized(J) {
+      K(J), y();
+    },
+    get parentId() {
+      return ie();
+    },
+    set parentId(J) {
+      ie(J), y();
+    },
+    get nodeClickDistance() {
+      return ee();
+    },
+    set nodeClickDistance(J) {
+      ee(J), y();
+    },
+    get class() {
+      return W();
+    },
+    set class(J) {
+      W(J), y();
+    }
+  });
+  return r(), lt;
+}
+ae(
+  Vc,
+  {
+    node: {},
+    id: {},
+    data: {},
+    selected: {},
+    draggable: {},
+    selectable: {},
+    connectable: {},
+    deletable: {},
+    hidden: {},
+    dragging: {},
+    resizeObserver: {},
+    style: {},
+    type: {},
+    isParent: {},
+    positionX: {},
+    positionY: {},
+    sourcePosition: {},
+    targetPosition: {},
+    zIndex: {},
+    measuredWidth: {},
+    measuredHeight: {},
+    initialWidth: {},
+    initialHeight: {},
+    width: {},
+    height: {},
+    dragHandle: {},
+    initialized: {},
+    parentId: {},
+    nodeClickDistance: {},
+    class: {}
+  },
+  [],
+  [],
+  !0
+);
+var P2 = /* @__PURE__ */ ne('<div class="svelte-flow__nodes svelte-tf4uy4"></div>');
+const N2 = {
+  hash: "svelte-tf4uy4",
+  code: ".svelte-flow__nodes.svelte-tf4uy4 {width:100%;height:100%;position:absolute;left:0;top:0;}"
+};
+function Dc(e, t) {
+  de(t, !1), Je(e, N2);
+  const [n, r] = tt(), o = () => Q(c, "$visibleNodes", n), i = () => Q(f, "$nodesDraggable", n), s = () => Q(g, "$elementsSelectable", n), a = () => Q(d, "$nodesConnectable", n), l = () => Q(x, "$parentLookup", n);
+  let u = w(t, "nodeClickDistance", 12, 0);
+  const {
+    visibleNodes: c,
+    nodesDraggable: f,
+    nodesConnectable: d,
+    elementsSelectable: g,
+    updateNodeInternals: p,
+    parentLookup: x
+  } = Ue(), C = typeof ResizeObserver > "u" ? null : new ResizeObserver((_) => {
+    const v = /* @__PURE__ */ new Map();
+    _.forEach((b) => {
+      const N = b.target.getAttribute("data-id");
+      v.set(N, { id: N, nodeElement: b.target, force: !0 });
+    }), p(v);
+  });
+  Qs(() => {
+    C == null || C.disconnect();
+  }), He();
+  var $ = P2();
+  Yt($, 5, o, (_) => _.id, (_, v) => {
+    const b = /* @__PURE__ */ pe(() => !!h(v).selected), N = /* @__PURE__ */ pe(() => !!h(v).hidden), E = /* @__PURE__ */ pe(() => !!(h(v).draggable || i() && typeof h(v).draggable > "u")), M = /* @__PURE__ */ pe(() => !!(h(v).selectable || s() && typeof h(v).selectable > "u")), D = /* @__PURE__ */ pe(() => !!(h(v).connectable || a() && typeof h(v).connectable > "u")), V = /* @__PURE__ */ pe(() => h(v).deletable ?? !0), A = /* @__PURE__ */ pe(() => l().has(h(v).id)), O = /* @__PURE__ */ pe(() => h(v).type ?? "default"), R = /* @__PURE__ */ pe(() => h(v).internals.z ?? 0), S = /* @__PURE__ */ pe(() => oc(h(v)));
+    Vc(_, {
+      get node() {
+        return h(v);
+      },
+      get id() {
+        return h(v).id;
+      },
+      get data() {
+        return h(v).data;
+      },
+      get selected() {
+        return h(b);
+      },
+      get hidden() {
+        return h(N);
+      },
+      get draggable() {
+        return h(E);
+      },
+      get selectable() {
+        return h(M);
+      },
+      get connectable() {
+        return h(D);
+      },
+      get deletable() {
+        return h(V);
+      },
+      get positionX() {
+        return h(v).internals.positionAbsolute.x;
+      },
+      get positionY() {
+        return h(v).internals.positionAbsolute.y;
+      },
+      get isParent() {
+        return h(A);
+      },
+      get style() {
+        return h(v).style;
+      },
+      get class() {
+        return h(v).class;
+      },
+      get type() {
+        return h(O);
+      },
+      get sourcePosition() {
+        return h(v).sourcePosition;
+      },
+      get targetPosition() {
+        return h(v).targetPosition;
+      },
+      get dragging() {
+        return h(v).dragging;
+      },
+      get zIndex() {
+        return h(R);
+      },
+      get dragHandle() {
+        return h(v).dragHandle;
+      },
+      get initialized() {
+        return h(S);
+      },
+      get width() {
+        return h(v).width;
+      },
+      get height() {
+        return h(v).height;
+      },
+      get initialWidth() {
+        return h(v).initialWidth;
+      },
+      get initialHeight() {
+        return h(v).initialHeight;
+      },
+      get measuredWidth() {
+        return h(v).measured.width;
+      },
+      get measuredHeight() {
+        return h(v).measured.height;
+      },
+      get parentId() {
+        return h(v).parentId;
+      },
+      resizeObserver: C,
+      get nodeClickDistance() {
+        return u();
+      },
+      $$events: {
+        nodeclick(T) {
+          Ve.call(this, t, T);
+        },
+        nodemouseenter(T) {
+          Ve.call(this, t, T);
+        },
+        nodemousemove(T) {
+          Ve.call(this, t, T);
+        },
+        nodemouseleave(T) {
+          Ve.call(this, t, T);
+        },
+        nodedrag(T) {
+          Ve.call(this, t, T);
+        },
+        nodedragstart(T) {
+          Ve.call(this, t, T);
+        },
+        nodedragstop(T) {
+          Ve.call(this, t, T);
+        },
+        nodecontextmenu(T) {
+          Ve.call(this, t, T);
+        }
+      }
+    });
+  }), Z($), L(e, $);
+  var m = fe({
+    get nodeClickDistance() {
+      return u();
+    },
+    set nodeClickDistance(_) {
+      u(_), y();
+    }
+  });
+  return r(), m;
+}
+ae(Dc, { nodeClickDistance: {} }, [], [], !0);
+var M2 = /* @__PURE__ */ _e('<svg><g role="img"><!></g></svg>');
+function Ac(e, t) {
+  de(t, !1);
+  const [n, r] = tt(), o = () => Q(W, "$edgeTypes", n), i = () => Q(ue, "$flowId", n), s = () => Q(me, "$elementsSelectable", n), a = () => Q(ee, "$edgeLookup", n), l = re(void 0, !0), u = re(void 0, !0), c = re(void 0, !0), f = re(void 0, !0), d = re(void 0, !0);
+  let g = w(t, "id", 13), p = w(t, "type", 13, "default"), x = w(t, "source", 13, ""), C = w(t, "target", 13, ""), $ = w(t, "data", 29, () => ({})), m = w(t, "style", 13, void 0), _ = w(t, "zIndex", 13, void 0), v = w(t, "animated", 13, !1), b = w(t, "selected", 13, !1), N = w(t, "selectable", 13, void 0), E = w(t, "deletable", 13, void 0), M = w(t, "hidden", 13, !1), D = w(t, "label", 13, void 0), V = w(t, "labelStyle", 13, void 0), A = w(t, "markerStart", 13, void 0), O = w(t, "markerEnd", 13, void 0), R = w(t, "sourceHandle", 13, void 0), S = w(t, "targetHandle", 13, void 0), T = w(t, "sourceX", 13), k = w(t, "sourceY", 13), P = w(t, "targetX", 13), H = w(t, "targetY", 13), I = w(t, "sourcePosition", 13), B = w(t, "targetPosition", 13), F = w(t, "ariaLabel", 13, void 0), K = w(t, "interactionWidth", 13, void 0), ie = w(t, "class", 13, "");
+  Tr("svelteflow__edge_id", g());
+  const {
+    edgeLookup: ee,
+    edgeTypes: W,
+    flowId: ue,
+    elementsSelectable: me
+  } = Ue(), Ce = Oi(), ge = bc();
+  function ze(te) {
+    const Fe = a().get(g());
+    Fe && (ge(g()), Ce("edgeclick", { event: te, edge: Fe }));
+  }
+  function G(te, Fe) {
+    const Le = a().get(g());
+    Le && Ce(Fe, { event: te, edge: Le });
+  }
+  he(() => j(p()), () => {
+    U(l, p() || "default");
+  }), he(
+    () => (o(), h(l), xi),
+    () => {
+      U(u, o()[h(l)] || xi);
+    }
+  ), he(
+    () => (j(A()), i()),
+    () => {
+      U(c, A() ? `url('#${Vs(A(), i())}')` : void 0);
+    }
+  ), he(
+    () => (j(O()), i()),
+    () => {
+      U(f, O() ? `url('#${Vs(O(), i())}')` : void 0);
+    }
+  ), he(
+    () => (j(N()), s()),
+    () => {
+      U(d, N() ?? s());
+    }
+  ), gt(), He(!0);
+  var se = et(), Te = be(se);
+  {
+    var Ae = (te) => {
+      var Fe = M2(), Le = X(Fe);
+      let Qe;
+      var oe = X(Le);
+      const ve = /* @__PURE__ */ pe(() => E() ?? !0);
+      yu(oe, () => h(u), (xe, Oe) => {
+        Oe(xe, {
+          get id() {
+            return g();
+          },
+          get source() {
+            return x();
+          },
+          get target() {
+            return C();
+          },
+          get sourceX() {
+            return T();
+          },
+          get sourceY() {
+            return k();
+          },
+          get targetX() {
+            return P();
+          },
+          get targetY() {
+            return H();
+          },
+          get sourcePosition() {
+            return I();
+          },
+          get targetPosition() {
+            return B();
+          },
+          get animated() {
+            return v();
+          },
+          get selected() {
+            return b();
+          },
+          get label() {
+            return D();
+          },
+          get labelStyle() {
+            return V();
+          },
+          get data() {
+            return $();
+          },
+          get style() {
+            return m();
+          },
+          get interactionWidth() {
+            return K();
+          },
+          get selectable() {
+            return h(d);
+          },
+          get deletable() {
+            return h(ve);
+          },
+          get type() {
+            return h(l);
+          },
+          get sourceHandleId() {
+            return R();
+          },
+          get targetHandleId() {
+            return S();
+          },
+          get markerStart() {
+            return h(c);
+          },
+          get markerEnd() {
+            return h(f);
+          }
+        });
+      }), Z(Le), Z(Fe), Ee(
+        (xe) => {
+          st(Fe, "z-index", _()), Qe = kt(Le, 0, bn(xe), null, Qe, {
+            animated: v(),
+            selected: b(),
+            selectable: h(d)
+          }), ce(Le, "data-id", g()), ce(Le, "aria-label", F() === null ? void 0 : F() ? F() : `Edge from ${x()} to ${C()}`);
+        },
+        [
+          () => Et(["svelte-flow__edge", ie()])
+        ],
+        pe
+      ), Ye("click", Le, ze), Ye("contextmenu", Le, (xe) => {
+        G(xe, "edgecontextmenu");
+      }), Ye("mouseenter", Le, (xe) => {
+        G(xe, "edgemouseenter");
+      }), Ye("mouseleave", Le, (xe) => {
+        G(xe, "edgemouseleave");
+      }), L(te, Fe);
+    };
+    ke(Te, (te) => {
+      M() || te(Ae);
+    });
+  }
+  L(e, se);
+  var Xe = fe({
+    get id() {
+      return g();
+    },
+    set id(te) {
+      g(te), y();
+    },
+    get type() {
+      return p();
+    },
+    set type(te) {
+      p(te), y();
+    },
+    get source() {
+      return x();
+    },
+    set source(te) {
+      x(te), y();
+    },
+    get target() {
+      return C();
+    },
+    set target(te) {
+      C(te), y();
+    },
+    get data() {
+      return $();
+    },
+    set data(te) {
+      $(te), y();
+    },
+    get style() {
+      return m();
+    },
+    set style(te) {
+      m(te), y();
+    },
+    get zIndex() {
+      return _();
+    },
+    set zIndex(te) {
+      _(te), y();
+    },
+    get animated() {
+      return v();
+    },
+    set animated(te) {
+      v(te), y();
+    },
+    get selected() {
+      return b();
+    },
+    set selected(te) {
+      b(te), y();
+    },
+    get selectable() {
+      return N();
+    },
+    set selectable(te) {
+      N(te), y();
+    },
+    get deletable() {
+      return E();
+    },
+    set deletable(te) {
+      E(te), y();
+    },
+    get hidden() {
+      return M();
+    },
+    set hidden(te) {
+      M(te), y();
+    },
+    get label() {
+      return D();
+    },
+    set label(te) {
+      D(te), y();
+    },
+    get labelStyle() {
+      return V();
+    },
+    set labelStyle(te) {
+      V(te), y();
+    },
+    get markerStart() {
+      return A();
+    },
+    set markerStart(te) {
+      A(te), y();
+    },
+    get markerEnd() {
+      return O();
+    },
+    set markerEnd(te) {
+      O(te), y();
+    },
+    get sourceHandle() {
+      return R();
+    },
+    set sourceHandle(te) {
+      R(te), y();
+    },
+    get targetHandle() {
+      return S();
+    },
+    set targetHandle(te) {
+      S(te), y();
+    },
+    get sourceX() {
+      return T();
+    },
+    set sourceX(te) {
+      T(te), y();
+    },
+    get sourceY() {
+      return k();
+    },
+    set sourceY(te) {
+      k(te), y();
+    },
+    get targetX() {
+      return P();
+    },
+    set targetX(te) {
+      P(te), y();
+    },
+    get targetY() {
+      return H();
+    },
+    set targetY(te) {
+      H(te), y();
+    },
+    get sourcePosition() {
+      return I();
+    },
+    set sourcePosition(te) {
+      I(te), y();
+    },
+    get targetPosition() {
+      return B();
+    },
+    set targetPosition(te) {
+      B(te), y();
+    },
+    get ariaLabel() {
+      return F();
+    },
+    set ariaLabel(te) {
+      F(te), y();
+    },
+    get interactionWidth() {
+      return K();
+    },
+    set interactionWidth(te) {
+      K(te), y();
+    },
+    get class() {
+      return ie();
+    },
+    set class(te) {
+      ie(te), y();
+    }
+  });
+  return r(), Xe;
+}
+ae(
+  Ac,
+  {
+    id: {},
+    type: {},
+    source: {},
+    target: {},
+    data: {},
+    style: {},
+    zIndex: {},
+    animated: {},
+    selected: {},
+    selectable: {},
+    deletable: {},
+    hidden: {},
+    label: {},
+    labelStyle: {},
+    markerStart: {},
+    markerEnd: {},
+    sourceHandle: {},
+    targetHandle: {},
+    sourceX: {},
+    sourceY: {},
+    targetX: {},
+    targetY: {},
+    sourcePosition: {},
+    targetPosition: {},
+    ariaLabel: {},
+    interactionWidth: {},
+    class: {}
+  },
+  [],
+  [],
+  !0
+);
+function Lc(e, t) {
+  de(t, !1);
+  let n = w(t, "onMount", 12, void 0), r = w(t, "onDestroy", 12, void 0);
+  return un(() => {
+    var o;
+    return (o = n()) == null || o(), r();
+  }), He(), fe({
+    get onMount() {
+      return n();
+    },
+    set onMount(o) {
+      n(o), y();
+    },
+    get onDestroy() {
+      return r();
+    },
+    set onDestroy(o) {
+      r(o), y();
+    }
+  });
+}
+ae(Lc, { onMount: {}, onDestroy: {} }, [], [], !0);
+var T2 = /* @__PURE__ */ _e("<defs></defs>");
+function Oc(e, t) {
+  de(t, !1);
+  const [n, r] = tt(), o = () => Q(i, "$markers", n), { markers: i } = Ue();
+  He();
+  var s = T2();
+  Yt(s, 5, o, (a) => a.id, (a, l) => {
+    Ic(a, ut(() => h(l)));
+  }), Z(s), L(e, s), fe(), r();
+}
+ae(Oc, {}, [], [], !0);
+var H2 = /* @__PURE__ */ _e('<polyline stroke-linecap="round" stroke-linejoin="round" fill="none" points="-5,-4 0,0 -5,4"></polyline>'), V2 = /* @__PURE__ */ _e('<polyline stroke-linecap="round" stroke-linejoin="round" points="-5,-4 0,0 -5,4 -5,-4"></polyline>'), D2 = /* @__PURE__ */ _e('<marker class="svelte-flow__arrowhead" viewBox="-10 -10 20 20" refX="0" refY="0"><!></marker>');
+function Ic(e, t) {
+  de(t, !1);
+  let n = w(t, "id", 12), r = w(t, "type", 12), o = w(t, "width", 12, 12.5), i = w(t, "height", 12, 12.5), s = w(t, "markerUnits", 12, "strokeWidth"), a = w(t, "orient", 12, "auto-start-reverse"), l = w(t, "color", 12, void 0), u = w(t, "strokeWidth", 12, void 0);
+  He();
+  var c = D2(), f = X(c);
+  {
+    var d = (p) => {
+      var x = H2();
+      Ee(() => {
+        ce(x, "stroke", l()), ce(x, "stroke-width", u());
+      }), L(p, x);
+    }, g = (p, x) => {
+      {
+        var C = ($) => {
+          var m = V2();
+          Ee(() => {
+            ce(m, "stroke", l()), ce(m, "stroke-width", u()), ce(m, "fill", l());
+          }), L($, m);
+        };
+        ke(
+          p,
+          ($) => {
+            r() === mo.ArrowClosed && $(C);
+          },
+          x
+        );
+      }
+    };
+    ke(f, (p) => {
+      r() === mo.Arrow ? p(d) : p(g, !1);
+    });
+  }
+  return Z(c), Ee(() => {
+    ce(c, "id", n()), ce(c, "markerWidth", `${o()}`), ce(c, "markerHeight", `${i()}`), ce(c, "markerUnits", s()), ce(c, "orient", a());
+  }), L(e, c), fe({
+    get id() {
+      return n();
+    },
+    set id(p) {
+      n(p), y();
+    },
+    get type() {
+      return r();
+    },
+    set type(p) {
+      r(p), y();
+    },
+    get width() {
+      return o();
+    },
+    set width(p) {
+      o(p), y();
+    },
+    get height() {
+      return i();
+    },
+    set height(p) {
+      i(p), y();
+    },
+    get markerUnits() {
+      return s();
+    },
+    set markerUnits(p) {
+      s(p), y();
+    },
+    get orient() {
+      return a();
+    },
+    set orient(p) {
+      a(p), y();
+    },
+    get color() {
+      return l();
+    },
+    set color(p) {
+      l(p), y();
+    },
+    get strokeWidth() {
+      return u();
+    },
+    set strokeWidth(p) {
+      u(p), y();
+    }
+  });
+}
+ae(
+  Ic,
+  {
+    id: {},
+    type: {},
+    width: {},
+    height: {},
+    markerUnits: {},
+    orient: {},
+    color: {},
+    strokeWidth: {}
+  },
+  [],
+  [],
+  !0
+);
+var A2 = /* @__PURE__ */ ne('<div class="svelte-flow__edges"><svg class="svelte-flow__marker"><!></svg> <!> <!></div>');
+function zc(e, t) {
+  de(t, !1);
+  const [n, r] = tt(), o = () => Q(a, "$visibleEdges", n), i = () => Q(c, "$elementsSelectable", n);
+  let s = w(t, "defaultEdgeOptions", 12);
+  const {
+    visibleEdges: a,
+    edgesInitialized: l,
+    edges: { setDefaultOptions: u },
+    elementsSelectable: c
+  } = Ue();
+  un(() => {
+    s() && u(s());
+  }), He();
+  var f = A2(), d = X(f), g = X(d);
+  Oc(g, {}), Z(d);
+  var p = z(d, 2);
+  Yt(p, 1, o, (m) => m.id, (m, _) => {
+    const v = /* @__PURE__ */ pe(() => h(_).selectable ?? i()), b = /* @__PURE__ */ pe(() => h(_).type || "default");
+    Ac(m, {
+      get id() {
+        return h(_).id;
+      },
+      get source() {
+        return h(_).source;
+      },
+      get target() {
+        return h(_).target;
+      },
+      get data() {
+        return h(_).data;
+      },
+      get style() {
+        return h(_).style;
+      },
+      get animated() {
+        return h(_).animated;
+      },
+      get selected() {
+        return h(_).selected;
+      },
+      get selectable() {
+        return h(v);
+      },
+      get deletable() {
+        return h(_).deletable;
+      },
+      get hidden() {
+        return h(_).hidden;
+      },
+      get label() {
+        return h(_).label;
+      },
+      get labelStyle() {
+        return h(_).labelStyle;
+      },
+      get markerStart() {
+        return h(_).markerStart;
+      },
+      get markerEnd() {
+        return h(_).markerEnd;
+      },
+      get sourceHandle() {
+        return h(_).sourceHandle;
+      },
+      get targetHandle() {
+        return h(_).targetHandle;
+      },
+      get sourceX() {
+        return h(_).sourceX;
+      },
+      get sourceY() {
+        return h(_).sourceY;
+      },
+      get targetX() {
+        return h(_).targetX;
+      },
+      get targetY() {
+        return h(_).targetY;
+      },
+      get sourcePosition() {
+        return h(_).sourcePosition;
+      },
+      get targetPosition() {
+        return h(_).targetPosition;
+      },
+      get ariaLabel() {
+        return h(_).ariaLabel;
+      },
+      get interactionWidth() {
+        return h(_).interactionWidth;
+      },
+      get class() {
+        return h(_).class;
+      },
+      get type() {
+        return h(b);
+      },
+      get zIndex() {
+        return h(_).zIndex;
+      },
+      $$events: {
+        edgeclick(N) {
+          Ve.call(this, t, N);
+        },
+        edgecontextmenu(N) {
+          Ve.call(this, t, N);
+        },
+        edgemouseenter(N) {
+          Ve.call(this, t, N);
+        },
+        edgemouseleave(N) {
+          Ve.call(this, t, N);
+        }
+      }
+    });
+  });
+  var x = z(p, 2);
+  {
+    var C = (m) => {
+      Lc(m, {
+        onMount: () => {
+          li(l, !0);
+        },
+        onDestroy: () => {
+          li(l, !1);
+        }
+      });
+    };
+    ke(x, (m) => {
+      o().length > 0 && m(C);
+    });
+  }
+  Z(f), L(e, f);
+  var $ = fe({
+    get defaultEdgeOptions() {
+      return s();
+    },
+    set defaultEdgeOptions(m) {
+      s(m), y();
+    }
+  });
+  return r(), $;
+}
+ae(zc, { defaultEdgeOptions: {} }, [], [], !0);
+var L2 = /* @__PURE__ */ ne('<div class="svelte-flow__selection svelte-1iugwpu"></div>');
+const O2 = {
+  hash: "svelte-1iugwpu",
+  code: ".svelte-flow__selection.svelte-1iugwpu {position:absolute;top:0;left:0;}"
+};
+function ha(e, t) {
+  de(t, !1), Je(e, O2);
+  let n = w(t, "x", 12, 0), r = w(t, "y", 12, 0), o = w(t, "width", 12, 0), i = w(t, "height", 12, 0), s = w(t, "isVisible", 12, !0);
+  var a = et(), l = be(a);
+  {
+    var u = (c) => {
+      var f = L2();
+      Ee(() => {
+        st(f, "width", typeof o() == "string" ? o() : `${o()}px`), st(f, "height", typeof i() == "string" ? i() : `${i()}px`), st(f, "transform", `translate(${n()}px, ${r()}px)`);
+      }), L(c, f);
+    };
+    ke(l, (c) => {
+      s() && c(u);
+    });
+  }
+  return L(e, a), fe({
+    get x() {
+      return n();
+    },
+    set x(c) {
+      n(c), y();
+    },
+    get y() {
+      return r();
+    },
+    set y(c) {
+      r(c), y();
+    },
+    get width() {
+      return o();
+    },
+    set width(c) {
+      o(c), y();
+    },
+    get height() {
+      return i();
+    },
+    set height(c) {
+      i(c), y();
+    },
+    get isVisible() {
+      return s();
+    },
+    set isVisible(c) {
+      s(c), y();
+    }
+  });
+}
+ae(
+  ha,
+  {
+    x: {},
+    y: {},
+    width: {},
+    height: {},
+    isVisible: {}
+  },
+  [],
+  [],
+  !0
+);
+function Rc(e, t) {
+  de(t, !1);
+  const [n, r] = tt(), o = () => Q(s, "$selectionRect", n), i = () => Q(a, "$selectionRectMode", n), { selectionRect: s, selectionRectMode: a } = Ue();
+  He();
+  const l = /* @__PURE__ */ pe(() => !!(o() && i() === "user")), u = /* @__PURE__ */ pe(() => {
+    var g;
+    return (g = o()) == null ? void 0 : g.width;
+  }), c = /* @__PURE__ */ pe(() => {
+    var g;
+    return (g = o()) == null ? void 0 : g.height;
+  }), f = /* @__PURE__ */ pe(() => {
+    var g;
+    return (g = o()) == null ? void 0 : g.x;
+  }), d = /* @__PURE__ */ pe(() => {
+    var g;
+    return (g = o()) == null ? void 0 : g.y;
+  });
+  ha(e, {
+    get isVisible() {
+      return h(l);
+    },
+    get width() {
+      return h(u);
+    },
+    get height() {
+      return h(c);
+    },
+    get x() {
+      return h(f);
+    },
+    get y() {
+      return h(d);
+    }
+  }), fe(), r();
+}
+ae(Rc, {}, [], [], !0);
+var I2 = /* @__PURE__ */ ne('<div class="selection-wrapper nopan svelte-5pxri" role="button" tabindex="-1"><!></div>');
+const z2 = {
+  hash: "svelte-5pxri",
+  code: ".selection-wrapper.svelte-5pxri {position:absolute;top:0;left:0;z-index:7;pointer-events:all;}"
+};
+function Bc(e, t) {
+  de(t, !1), Je(e, z2);
+  const [n, r] = tt(), o = () => Q(l, "$selectionRectMode", n), i = () => Q(c, "$nodeLookup", n), s = () => Q(u, "$nodes", n), a = Ue(), { selectionRectMode: l, nodes: u, nodeLookup: c } = a, f = Oi();
+  let d = re(null);
+  function g(m) {
+    const _ = s().filter((v) => v.selected);
+    f("selectioncontextmenu", { nodes: _, event: m });
+  }
+  function p(m) {
+    const _ = s().filter((v) => v.selected);
+    f("selectionclick", { nodes: _, event: m });
+  }
+  he(
+    () => (o(), i(), s()),
+    () => {
+      o() === "nodes" && (U(d, No(i(), { filter: (m) => !!m.selected })), s());
+    }
+  ), gt(), He();
+  var x = et(), C = be(x);
+  {
+    var $ = (m) => {
+      var _ = I2(), v = X(_);
+      ha(v, { width: "100%", height: "100%", x: 0, y: 0 }), Z(_), vt(_, (b, N) => $r == null ? void 0 : $r(b, N), () => ({
+        disabled: !1,
+        store: a,
+        onDrag: (b, N, E, M) => {
+          f("nodedrag", { event: b, targetNode: null, nodes: M });
+        },
+        onDragStart: (b, N, E, M) => {
+          f("nodedragstart", { event: b, targetNode: null, nodes: M });
+        },
+        onDragStop: (b, N, E, M) => {
+          f("nodedragstop", { event: b, targetNode: null, nodes: M });
+        }
+      })), Ot(() => Ye("contextmenu", _, g)), Ot(() => Ye("click", _, p)), Ot(() => Ye("keyup", _, () => {
+      })), Ee(() => ce(_, "style", `width: ${h(d).width ?? ""}px; height: ${h(d).height ?? ""}px; transform: translate(${h(d).x ?? ""}px, ${h(d).y ?? ""}px)`)), L(m, _);
+    };
+    ke(C, (m) => {
+      o() === "nodes" && h(d) && Nn(h(d).x) && Nn(h(d).y) && m($);
+    });
+  }
+  L(e, x), fe(), r();
+}
+ae(Bc, {}, [], [], !0);
+function We(e, t) {
+  let { enabled: n = !0, trigger: r, type: o = "keydown" } = t;
+  function i(s) {
+    const a = Array.isArray(r) ? r : [r], l = {
+      alt: s.altKey,
+      ctrl: s.ctrlKey,
+      shift: s.shiftKey,
+      meta: s.metaKey
+    };
+    for (const u of a) {
+      const c = {
+        modifier: [],
+        preventDefault: !1,
+        enabled: !0,
+        ...u
+      }, { modifier: f, key: d, callback: g, preventDefault: p, enabled: x } = c;
+      if (x) {
+        if (f.length && !(Array.isArray(f) ? f : [f]).map(
+          (m) => typeof m == "string" ? [m] : m
+        ).some(
+          (m) => m.every((_) => l[_])
+        ))
+          continue;
+        if (s.key === d) {
+          p && s.preventDefault();
+          const C = {
+            node: e,
+            trigger: c,
+            originalEvent: s
+          };
+          e.dispatchEvent(new CustomEvent("shortcut", { detail: C })), g == null || g(C);
+        }
+      }
+    }
+  }
+  return n && e.addEventListener(o, i), {
+    update: (s) => {
+      const { enabled: a = !0, type: l = "keydown" } = s;
+      n && (!a || o !== l) ? e.removeEventListener(o, i) : !n && a && e.addEventListener(l, i), n = a, o = l, r = s.trigger;
+    },
+    destroy: () => {
+      e.removeEventListener(o, i);
+    }
+  };
+}
+function Yc(e, t) {
+  de(t, !1);
+  let n = w(t, "selectionKey", 12, "Shift"), r = w(t, "multiSelectionKey", 28, () => yi() ? "Meta" : "Control"), o = w(t, "deleteKey", 12, "Backspace"), i = w(t, "panActivationKey", 12, " "), s = w(t, "zoomActivationKey", 28, () => yi() ? "Meta" : "Control");
+  const {
+    selectionKeyPressed: a,
+    multiselectionKeyPressed: l,
+    deleteKeyPressed: u,
+    panActivationKeyPressed: c,
+    zoomActivationKeyPressed: f,
+    selectionRect: d
+  } = Ue();
+  function g(m) {
+    return m !== null && typeof m == "object";
+  }
+  function p(m) {
+    return g(m) ? m.modifier || [] : [];
+  }
+  function x(m) {
+    return m == null ? "" : g(m) ? m.key : m;
+  }
+  function C(m, _) {
+    return (Array.isArray(m) ? m : [m]).map((b) => {
+      const N = x(b);
+      return {
+        key: N,
+        modifier: p(b),
+        enabled: N !== null,
+        callback: _
+      };
+    });
+  }
+  function $() {
+    d.set(null), a.set(!1), l.set(!1), u.set(!1), c.set(!1), f.set(!1);
+  }
+  return He(), Ye("blur", Nt, $), Ye("contextmenu", Nt, $), vt(Nt, (m, _) => We == null ? void 0 : We(m, _), () => ({
+    trigger: C(n(), () => a.set(!0)),
+    type: "keydown"
+  })), vt(Nt, (m, _) => We == null ? void 0 : We(m, _), () => ({
+    trigger: C(n(), () => a.set(!1)),
+    type: "keyup"
+  })), vt(Nt, (m, _) => We == null ? void 0 : We(m, _), () => ({
+    trigger: C(r(), () => l.set(!0)),
+    type: "keydown"
+  })), vt(Nt, (m, _) => We == null ? void 0 : We(m, _), () => ({
+    trigger: C(r(), () => l.set(!1)),
+    type: "keyup"
+  })), vt(Nt, (m, _) => We == null ? void 0 : We(m, _), () => ({
+    trigger: C(o(), (m) => {
+      !(m.originalEvent.ctrlKey || m.originalEvent.metaKey || m.originalEvent.shiftKey) && !w0(m.originalEvent) && u.set(!0);
+    }),
+    type: "keydown"
+  })), vt(Nt, (m, _) => We == null ? void 0 : We(m, _), () => ({
+    trigger: C(o(), () => u.set(!1)),
+    type: "keyup"
+  })), vt(Nt, (m, _) => We == null ? void 0 : We(m, _), () => ({
+    trigger: C(i(), () => c.set(!0)),
+    type: "keydown"
+  })), vt(Nt, (m, _) => We == null ? void 0 : We(m, _), () => ({
+    trigger: C(i(), () => c.set(!1)),
+    type: "keyup"
+  })), vt(Nt, (m, _) => We == null ? void 0 : We(m, _), () => ({
+    trigger: C(s(), () => f.set(!0)),
+    type: "keydown"
+  })), vt(Nt, (m, _) => We == null ? void 0 : We(m, _), () => ({
+    trigger: C(s(), () => f.set(!1)),
+    type: "keyup"
+  })), fe({
+    get selectionKey() {
+      return n();
+    },
+    set selectionKey(m) {
+      n(m), y();
+    },
+    get multiSelectionKey() {
+      return r();
+    },
+    set multiSelectionKey(m) {
+      r(m), y();
+    },
+    get deleteKey() {
+      return o();
+    },
+    set deleteKey(m) {
+      o(m), y();
+    },
+    get panActivationKey() {
+      return i();
+    },
+    set panActivationKey(m) {
+      i(m), y();
+    },
+    get zoomActivationKey() {
+      return s();
+    },
+    set zoomActivationKey(m) {
+      s(m), y();
+    }
+  });
+}
+ae(
+  Yc,
+  {
+    selectionKey: {},
+    multiSelectionKey: {},
+    deleteKey: {},
+    panActivationKey: {},
+    zoomActivationKey: {}
+  },
+  [],
+  [],
+  !0
+);
+var R2 = /* @__PURE__ */ _e('<path fill="none" class="svelte-flow__connection-path"></path>'), B2 = /* @__PURE__ */ _e('<svg class="svelte-flow__connectionline"><g><!><!></g></svg>');
+function Zc(e, t) {
+  de(t, !1);
+  const [n, r] = tt(), o = () => Q(g, "$connection", n), i = () => Q(p, "$connectionLineType", n), s = () => Q(f, "$width", n), a = () => Q(d, "$height", n);
+  let l = w(t, "containerStyle", 12, ""), u = w(t, "style", 12, ""), c = w(t, "isCustomComponent", 12, !1);
+  const {
+    width: f,
+    height: d,
+    connection: g,
+    connectionLineType: p
+  } = Ue();
+  let x = re(null);
+  he(
+    () => (o(), j(c()), i(), h(x), Hs),
+    () => {
+      if (o().inProgress && !c()) {
+        const { from: v, to: b, fromPosition: N, toPosition: E } = o(), M = {
+          sourceX: v.x,
+          sourceY: v.y,
+          sourcePosition: N,
+          targetX: b.x,
+          targetY: b.y,
+          targetPosition: E
+        };
+        switch (i()) {
+          case Cr.Bezier:
+            ((D) => U(x, D[0]))(sc(M));
+            break;
+          case Cr.Step:
+            ((D) => U(x, D[0]))(wi({ ...M, borderRadius: 0 }));
+            break;
+          case Cr.SmoothStep:
+            ((D) => U(x, D[0]))(wi(M));
+            break;
+          default:
+            ((D) => U(x, D[0]))(Hs(M));
+        }
+      }
+    }
+  ), gt(), He();
+  var C = et(), $ = be(C);
+  {
+    var m = (v) => {
+      var b = B2(), N = X(b), E = X(N);
+      pt(E, t, "connectionLine", {});
+      var M = z(E);
+      {
+        var D = (V) => {
+          var A = R2();
+          Ee(() => {
+            ce(A, "d", h(x)), ce(A, "style", u());
+          }), L(V, A);
+        };
+        ke(M, (V) => {
+          c() || V(D);
+        });
+      }
+      Z(N), Z(b), Ee(
+        (V) => {
+          ce(b, "width", s()), ce(b, "height", a()), ce(b, "style", l()), kt(N, 0, bn(V));
+        },
+        [
+          () => Et([
+            "svelte-flow__connection",
+            c0(o().isValid)
+          ])
+        ],
+        pe
+      ), L(v, b);
+    };
+    ke($, (v) => {
+      o().inProgress && v(m);
+    });
+  }
+  L(e, C);
+  var _ = fe({
+    get containerStyle() {
+      return l();
+    },
+    set containerStyle(v) {
+      l(v), y();
+    },
+    get style() {
+      return u();
+    },
+    set style(v) {
+      u(v), y();
+    },
+    get isCustomComponent() {
+      return c();
+    },
+    set isCustomComponent(v) {
+      c(v), y();
+    }
+  });
+  return r(), _;
+}
+ae(
+  Zc,
+  {
+    containerStyle: {},
+    style: {},
+    isCustomComponent: {}
+  },
+  ["connectionLine"],
+  [],
+  !0
+);
+var Y2 = /* @__PURE__ */ ne("<div><!></div>");
+function Ho(e, t) {
+  const n = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]), r = nt(n, ["position", "style", "class"]);
+  de(t, !1);
+  const [o, i] = tt(), s = () => Q(f, "$selectionRectMode", o), a = re();
+  let l = w(t, "position", 12, "top-right"), u = w(t, "style", 12, void 0), c = w(t, "class", 12, void 0);
+  const { selectionRectMode: f } = Ue();
+  he(() => j(l()), () => {
+    U(a, `${l()}`.split("-"));
+  }), gt(), He();
+  var d = Y2();
+  let g;
+  var p = X(d);
+  pt(p, t, "default", {}), Z(d), Ee(
+    (C) => {
+      g = on(d, g, {
+        class: C,
+        style: u(),
+        ...r
+      }), st(d, "pointer-events", s() ? "none" : "");
+    },
+    [
+      () => Et([
+        "svelte-flow__panel",
+        c(),
+        ...h(a)
+      ])
+    ],
+    pe
+  ), L(e, d);
+  var x = fe({
+    get position() {
+      return l();
+    },
+    set position(C) {
+      l(C), y();
+    },
+    get style() {
+      return u();
+    },
+    set style(C) {
+      u(C), y();
+    },
+    get class() {
+      return c();
+    },
+    set class(C) {
+      c(C), y();
+    }
+  });
+  return i(), x;
+}
+ae(Ho, { position: {}, style: {}, class: {} }, ["default"], [], !0);
+var Z2 = /* @__PURE__ */ ne('<a href="https://svelteflow.dev" target="_blank" rel="noopener noreferrer" aria-label="Svelte Flow attribution">Svelte Flow</a>');
+function Xc(e, t) {
+  de(t, !1);
+  let n = w(t, "proOptions", 12, void 0), r = w(t, "position", 12, "bottom-right");
+  He();
+  var o = et(), i = be(o);
+  {
+    var s = (a) => {
+      Ho(a, {
+        get position() {
+          return r();
+        },
+        class: "svelte-flow__attribution",
+        "data-message": "Feel free to remove the attribution or check out how you could support us: https://svelteflow.dev/support-us",
+        children: (l, u) => {
+          var c = Z2();
+          L(l, c);
+        },
+        $$slots: { default: !0 }
+      });
+    };
+    ke(i, (a) => {
+      var l;
+      (l = n()) != null && l.hideAttribution || a(s);
+    });
+  }
+  return L(e, o), fe({
+    get proOptions() {
+      return n();
+    },
+    set proOptions(a) {
+      n(a), y();
+    },
+    get position() {
+      return r();
+    },
+    set position(a) {
+      r(a), y();
+    }
+  });
+}
+ae(Xc, { proOptions: {}, position: {} }, [], [], !0);
+function El(e, { nodeTypes: t, edgeTypes: n, minZoom: r, maxZoom: o, translateExtent: i, paneClickDistance: s }) {
+  t !== void 0 && e.setNodeTypes(t), n !== void 0 && e.setEdgeTypes(n), r !== void 0 && e.setMinZoom(r), o !== void 0 && e.setMaxZoom(o), i !== void 0 && e.setTranslateExtent(i), s !== void 0 && e.setPaneClickDistance(s);
+}
+const X2 = (e) => Object.keys(e);
+function Sl(e, t) {
+  X2(t).forEach((n) => {
+    const r = t[n];
+    r !== void 0 && e[n].set(r);
+  });
+}
+function F2() {
+  return typeof window > "u" || !window.matchMedia ? null : window.matchMedia("(prefers-color-scheme: dark)");
+}
+function W2(e = "light") {
+  return Ft("light", (n) => {
+    if (e !== "system") {
+      n(e);
+      return;
+    }
+    const r = F2(), o = () => n(r != null && r.matches ? "dark" : "light");
+    return n(r != null && r.matches ? "dark" : "light"), r == null || r.addEventListener("change", o), () => {
+      r == null || r.removeEventListener("change", o);
+    };
+  });
+}
+var K2 = /* @__PURE__ */ ne('<!> <!> <div class="svelte-flow__edgelabel-renderer"></div> <div class="svelte-flow__viewport-portal"></div> <!> <!>', 1), q2 = /* @__PURE__ */ ne("<!> <!>", 1), G2 = /* @__PURE__ */ ne("<div><!> <!> <!> <!></div>");
+const U2 = {
+  hash: "svelte-12wlba6",
+  code: ".svelte-flow.svelte-12wlba6 {width:100%;height:100%;overflow:hidden;position:relative;z-index:0;background-color:var(--background-color, var(--background-color-default));}:root {--background-color-default: #fff;--background-pattern-color-default: #ddd;--minimap-mask-color-default: rgb(240, 240, 240, 0.6);--minimap-mask-stroke-color-default: none;--minimap-mask-stroke-width-default: 1;--controls-button-background-color-default: #fefefe;--controls-button-background-color-hover-default: #f4f4f4;--controls-button-color-default: inherit;--controls-button-color-hover-default: inherit;--controls-button-border-color-default: #eee;}"
+};
+function Fc(e, t) {
+  const n = p1(t), r = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]), o = nt(r, [
+    "id",
+    "nodes",
+    "edges",
+    "fitView",
+    "fitViewOptions",
+    "minZoom",
+    "maxZoom",
+    "initialViewport",
+    "viewport",
+    "nodeTypes",
+    "edgeTypes",
+    "selectionKey",
+    "selectionMode",
+    "panActivationKey",
+    "multiSelectionKey",
+    "zoomActivationKey",
+    "nodesDraggable",
+    "nodesConnectable",
+    "nodeDragThreshold",
+    "elementsSelectable",
+    "snapGrid",
+    "deleteKey",
+    "connectionRadius",
+    "connectionLineType",
+    "connectionMode",
+    "connectionLineStyle",
+    "connectionLineContainerStyle",
+    "onMoveStart",
+    "onMove",
+    "onMoveEnd",
+    "isValidConnection",
+    "translateExtent",
+    "nodeExtent",
+    "onlyRenderVisibleElements",
+    "panOnScrollMode",
+    "preventScrolling",
+    "zoomOnScroll",
+    "zoomOnDoubleClick",
+    "zoomOnPinch",
+    "panOnScroll",
+    "panOnDrag",
+    "selectionOnDrag",
+    "autoPanOnConnect",
+    "autoPanOnNodeDrag",
+    "onerror",
+    "ondelete",
+    "onedgecreate",
+    "attributionPosition",
+    "proOptions",
+    "defaultEdgeOptions",
+    "width",
+    "height",
+    "colorMode",
+    "onconnect",
+    "onconnectstart",
+    "onconnectend",
+    "onbeforedelete",
+    "oninit",
+    "nodeOrigin",
+    "paneClickDistance",
+    "nodeClickDistance",
+    "defaultMarkerColor",
+    "style",
+    "class"
+  ]);
+  de(t, !1), Je(e, U2);
+  const [i, s] = tt(), a = () => Q(_(), "$viewport", i), l = () => Q(ji, "$initialized", i), u = () => Q(h(c), "$colorModeClass", i), c = re();
+  let f = w(t, "id", 12, "1"), d = w(t, "nodes", 12), g = w(t, "edges", 12), p = w(t, "fitView", 12, void 0), x = w(t, "fitViewOptions", 12, void 0), C = w(t, "minZoom", 12, void 0), $ = w(t, "maxZoom", 12, void 0), m = w(t, "initialViewport", 12, void 0), _ = w(t, "viewport", 12, void 0), v = w(t, "nodeTypes", 12, void 0), b = w(t, "edgeTypes", 12, void 0), N = w(t, "selectionKey", 12, void 0), E = w(t, "selectionMode", 12, void 0), M = w(t, "panActivationKey", 12, void 0), D = w(t, "multiSelectionKey", 12, void 0), V = w(t, "zoomActivationKey", 12, void 0), A = w(t, "nodesDraggable", 12, void 0), O = w(t, "nodesConnectable", 12, void 0), R = w(t, "nodeDragThreshold", 12, void 0), S = w(t, "elementsSelectable", 12, void 0), T = w(t, "snapGrid", 12, void 0), k = w(t, "deleteKey", 12, void 0), P = w(t, "connectionRadius", 12, void 0), H = w(t, "connectionLineType", 12, void 0), I = w(t, "connectionMode", 28, () => cr.Strict), B = w(t, "connectionLineStyle", 12, ""), F = w(t, "connectionLineContainerStyle", 12, ""), K = w(t, "onMoveStart", 12, void 0), ie = w(t, "onMove", 12, void 0), ee = w(t, "onMoveEnd", 12, void 0), W = w(t, "isValidConnection", 12, void 0), ue = w(t, "translateExtent", 12, void 0), me = w(t, "nodeExtent", 12, void 0), Ce = w(t, "onlyRenderVisibleElements", 12, void 0), ge = w(t, "panOnScrollMode", 28, () => qn.Free), ze = w(t, "preventScrolling", 12, !0), G = w(t, "zoomOnScroll", 12, !0), se = w(t, "zoomOnDoubleClick", 12, !0), Te = w(t, "zoomOnPinch", 12, !0), Ae = w(t, "panOnScroll", 12, !1), Xe = w(t, "panOnDrag", 12, !0), te = w(t, "selectionOnDrag", 12, void 0), Fe = w(t, "autoPanOnConnect", 12, !0), Le = w(t, "autoPanOnNodeDrag", 12, !0), Qe = w(t, "onerror", 12, void 0), oe = w(t, "ondelete", 12, void 0), ve = w(t, "onedgecreate", 12, void 0), xe = w(t, "attributionPosition", 12, void 0), Oe = w(t, "proOptions", 12, void 0), ct = w(t, "defaultEdgeOptions", 12, void 0), lt = w(t, "width", 12, void 0), J = w(t, "height", 12, void 0), Re = w(t, "colorMode", 12, "light"), le = w(t, "onconnect", 12, void 0), fn = w(t, "onconnectstart", 12, void 0), Ut = w(t, "onconnectend", 12, void 0), gn = w(t, "onbeforedelete", 12, void 0), Ne = w(t, "oninit", 12, void 0), rt = w(t, "nodeOrigin", 12, void 0), ye = w(t, "paneClickDistance", 12, 0), ot = w(t, "nodeClickDistance", 12, 0), at = w(t, "defaultMarkerColor", 12, "#b1b1b7"), Xt = w(t, "style", 12, void 0), Kr = w(t, "class", 12, void 0), At = re(), St = re(), hn = re();
+  const jt = a() || m(), ft = Uf(Wi) ? Ue() : w2({
+    nodes: q(d()),
+    edges: q(g()),
+    width: lt(),
+    height: J(),
+    fitView: p(),
+    nodeOrigin: rt(),
+    nodeExtent: me()
+  });
+  un(() => (ft.width.set(h(St)), ft.height.set(h(hn)), ft.domNode.set(h(At)), ft.syncNodeStores(d()), ft.syncEdgeStores(g()), ft.syncViewport(_()), p() !== void 0 && ft.fitViewOnInit.set(p()), x() && ft.fitViewOptions.set(x()), El(ft, {
+    nodeTypes: v(),
+    edgeTypes: b(),
+    minZoom: C(),
+    maxZoom: $(),
+    translateExtent: ue(),
+    paneClickDistance: ye()
+  }), () => {
+    ft.reset();
+  }));
+  const { initialized: ji } = ft;
+  let nr = re(!1);
+  he(
+    () => (h(St), h(hn)),
+    () => {
+      h(St) !== void 0 && h(hn) !== void 0 && (ft.width.set(h(St)), ft.height.set(h(hn)));
+    }
+  ), he(
+    () => (h(nr), l(), j(Ne())),
+    () => {
+      var Y;
+      !h(nr) && l() && ((Y = Ne()) == null || Y(), U(nr, !0));
+    }
+  ), he(
+    () => (j(f()), j(H()), j(P()), j(E()), j(T()), j(at()), j(A()), j(O()), j(S()), j(Ce()), j(W()), j(Fe()), j(Le()), j(Qe()), j(oe()), j(ve()), j(I()), j(R()), j(le()), j(fn()), j(Ut()), j(gn()), j(rt()), Sl),
+    () => {
+      const Y = {
+        flowId: f(),
+        connectionLineType: H(),
+        connectionRadius: P(),
+        selectionMode: E(),
+        snapGrid: T(),
+        defaultMarkerColor: at(),
+        nodesDraggable: A(),
+        nodesConnectable: O(),
+        elementsSelectable: S(),
+        onlyRenderVisibleElements: Ce(),
+        isValidConnection: W(),
+        autoPanOnConnect: Fe(),
+        autoPanOnNodeDrag: Le(),
+        onerror: Qe(),
+        ondelete: oe(),
+        onedgecreate: ve(),
+        connectionMode: I(),
+        nodeDragThreshold: R(),
+        onconnect: le(),
+        onconnectstart: fn(),
+        onconnectend: Ut(),
+        onbeforedelete: gn(),
+        nodeOrigin: rt()
+      };
+      Sl(ft, Y);
+    }
+  ), he(
+    () => (j(v()), j(b()), j(C()), j($()), j(ue()), j(ye())),
+    () => {
+      El(ft, {
+        nodeTypes: v(),
+        edgeTypes: b(),
+        minZoom: C(),
+        maxZoom: $(),
+        translateExtent: ue(),
+        paneClickDistance: ye()
+      });
+    }
+  ), he(
+    () => j(Re()),
+    () => {
+      k1(U(c, W2(Re())), "$colorModeClass", i);
+    }
+  ), gt(), He();
+  var Jt = G2();
+  let Io;
+  var zo = X(Jt);
+  Yc(zo, {
+    get selectionKey() {
+      return N();
+    },
+    get deleteKey() {
+      return k();
+    },
+    get panActivationKey() {
+      return M();
+    },
+    get multiSelectionKey() {
+      return D();
+    },
+    get zoomActivationKey() {
+      return V();
+    }
+  });
+  var Ro = z(zo, 2);
+  const Rd = /* @__PURE__ */ pe(() => ge() === void 0 ? qn.Free : ge()), Bd = /* @__PURE__ */ pe(() => ze() === void 0 ? !0 : ze()), Yd = /* @__PURE__ */ pe(() => G() === void 0 ? !0 : G()), Zd = /* @__PURE__ */ pe(() => se() === void 0 ? !0 : se()), Xd = /* @__PURE__ */ pe(() => Te() === void 0 ? !0 : Te()), Fd = /* @__PURE__ */ pe(() => Ae() === void 0 ? !1 : Ae()), Wd = /* @__PURE__ */ pe(() => Xe() === void 0 ? !0 : Xe()), Kd = /* @__PURE__ */ pe(() => ye() === void 0 ? 0 : ye());
+  Mc(Ro, {
+    initialViewport: jt,
+    get onMoveStart() {
+      return K();
+    },
+    get onMove() {
+      return ie();
+    },
+    get onMoveEnd() {
+      return ee();
+    },
+    get panOnScrollMode() {
+      return h(Rd);
+    },
+    get preventScrolling() {
+      return h(Bd);
+    },
+    get zoomOnScroll() {
+      return h(Yd);
+    },
+    get zoomOnDoubleClick() {
+      return h(Zd);
+    },
+    get zoomOnPinch() {
+      return h(Xd);
+    },
+    get panOnScroll() {
+      return h(Fd);
+    },
+    get panOnDrag() {
+      return h(Wd);
+    },
+    get paneClickDistance() {
+      return h(Kd);
+    },
+    children: (Y, gw) => {
+      const Ud = /* @__PURE__ */ pe(() => Xe() === void 0 ? !0 : Xe());
+      Tc(Y, {
+        get panOnDrag() {
+          return h(Ud);
+        },
+        get selectionOnDrag() {
+          return te();
+        },
+        $$events: {
+          paneclick(qr) {
+            Ve.call(this, t, qr);
+          },
+          panecontextmenu(qr) {
+            Ve.call(this, t, qr);
+          }
+        },
+        children: (qr, hw) => {
+          var xa = q2(), ba = be(xa);
+          Hc(ba, {
+            children: (Jd, vw) => {
+              var Ca = K2(), ka = be(Ca);
+              zc(ka, {
+                get defaultEdgeOptions() {
+                  return ct();
+                },
+                $$events: {
+                  edgeclick(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  edgecontextmenu(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  edgemouseenter(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  edgemouseleave(Be) {
+                    Ve.call(this, t, Be);
+                  }
+                }
+              });
+              var $a = z(ka, 2);
+              Zc($a, {
+                get containerStyle() {
+                  return F();
+                },
+                get style() {
+                  return B();
+                },
+                isCustomComponent: n.connectionLine,
+                $$slots: {
+                  connectionLine: (Be, pw) => {
+                    var Sa = et(), ef = be(Sa);
+                    pt(ef, t, "connectionLine", {}), L(Be, Sa);
+                  }
+                }
+              });
+              var Ea = z($a, 6);
+              Dc(Ea, {
+                get nodeClickDistance() {
+                  return ot();
+                },
+                $$events: {
+                  nodeclick(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  nodemouseenter(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  nodemousemove(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  nodemouseleave(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  nodedragstart(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  nodedrag(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  nodedragstop(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  nodecontextmenu(Be) {
+                    Ve.call(this, t, Be);
+                  }
+                }
+              });
+              var Qd = z(Ea, 2);
+              Bc(Qd, {
+                $$events: {
+                  selectionclick(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  selectioncontextmenu(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  nodedragstart(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  nodedrag(Be) {
+                    Ve.call(this, t, Be);
+                  },
+                  nodedragstop(Be) {
+                    Ve.call(this, t, Be);
+                  }
+                }
+              }), L(Jd, Ca);
+            },
+            $$slots: { default: !0 }
+          });
+          var jd = z(ba, 2);
+          Rc(jd, {}), L(qr, xa);
+        },
+        $$slots: { default: !0 }
+      });
+    },
+    $$slots: { default: !0 }
+  });
+  var _a = z(Ro, 2);
+  Xc(_a, {
+    get proOptions() {
+      return Oe();
+    },
+    get position() {
+      return xe();
+    }
+  });
+  var qd = z(_a, 2);
+  pt(qd, t, "default", {}), Z(Jt), An(Jt, (Y) => U(At, Y), () => h(At)), Ee(
+    (Y) => Io = on(
+      Jt,
+      Io,
+      {
+        style: Xt(),
+        class: Y,
+        "data-testid": "svelte-flow__wrapper",
+        ...o,
+        role: "application"
+      },
+      "svelte-12wlba6"
+    ),
+    [
+      () => Et([
+        "svelte-flow",
+        Kr(),
+        u()
+      ])
+    ],
+    pe
+  ), Ra(Jt, "clientWidth", (Y) => U(St, Y)), Ra(Jt, "clientHeight", (Y) => U(hn, Y)), Ye("dragover", Jt, function(Y) {
+    Ve.call(this, t, Y);
+  }), Ye("drop", Jt, function(Y) {
+    Ve.call(this, t, Y);
+  }), L(e, Jt);
+  var Gd = fe({
+    get id() {
+      return f();
+    },
+    set id(Y) {
+      f(Y), y();
+    },
+    get nodes() {
+      return d();
+    },
+    set nodes(Y) {
+      d(Y), y();
+    },
+    get edges() {
+      return g();
+    },
+    set edges(Y) {
+      g(Y), y();
+    },
+    get fitView() {
+      return p();
+    },
+    set fitView(Y) {
+      p(Y), y();
+    },
+    get fitViewOptions() {
+      return x();
+    },
+    set fitViewOptions(Y) {
+      x(Y), y();
+    },
+    get minZoom() {
+      return C();
+    },
+    set minZoom(Y) {
+      C(Y), y();
+    },
+    get maxZoom() {
+      return $();
+    },
+    set maxZoom(Y) {
+      $(Y), y();
+    },
+    get initialViewport() {
+      return m();
+    },
+    set initialViewport(Y) {
+      m(Y), y();
+    },
+    get viewport() {
+      return _();
+    },
+    set viewport(Y) {
+      _(Y), y();
+    },
+    get nodeTypes() {
+      return v();
+    },
+    set nodeTypes(Y) {
+      v(Y), y();
+    },
+    get edgeTypes() {
+      return b();
+    },
+    set edgeTypes(Y) {
+      b(Y), y();
+    },
+    get selectionKey() {
+      return N();
+    },
+    set selectionKey(Y) {
+      N(Y), y();
+    },
+    get selectionMode() {
+      return E();
+    },
+    set selectionMode(Y) {
+      E(Y), y();
+    },
+    get panActivationKey() {
+      return M();
+    },
+    set panActivationKey(Y) {
+      M(Y), y();
+    },
+    get multiSelectionKey() {
+      return D();
+    },
+    set multiSelectionKey(Y) {
+      D(Y), y();
+    },
+    get zoomActivationKey() {
+      return V();
+    },
+    set zoomActivationKey(Y) {
+      V(Y), y();
+    },
+    get nodesDraggable() {
+      return A();
+    },
+    set nodesDraggable(Y) {
+      A(Y), y();
+    },
+    get nodesConnectable() {
+      return O();
+    },
+    set nodesConnectable(Y) {
+      O(Y), y();
+    },
+    get nodeDragThreshold() {
+      return R();
+    },
+    set nodeDragThreshold(Y) {
+      R(Y), y();
+    },
+    get elementsSelectable() {
+      return S();
+    },
+    set elementsSelectable(Y) {
+      S(Y), y();
+    },
+    get snapGrid() {
+      return T();
+    },
+    set snapGrid(Y) {
+      T(Y), y();
+    },
+    get deleteKey() {
+      return k();
+    },
+    set deleteKey(Y) {
+      k(Y), y();
+    },
+    get connectionRadius() {
+      return P();
+    },
+    set connectionRadius(Y) {
+      P(Y), y();
+    },
+    get connectionLineType() {
+      return H();
+    },
+    set connectionLineType(Y) {
+      H(Y), y();
+    },
+    get connectionMode() {
+      return I();
+    },
+    set connectionMode(Y) {
+      I(Y), y();
+    },
+    get connectionLineStyle() {
+      return B();
+    },
+    set connectionLineStyle(Y) {
+      B(Y), y();
+    },
+    get connectionLineContainerStyle() {
+      return F();
+    },
+    set connectionLineContainerStyle(Y) {
+      F(Y), y();
+    },
+    get onMoveStart() {
+      return K();
+    },
+    set onMoveStart(Y) {
+      K(Y), y();
+    },
+    get onMove() {
+      return ie();
+    },
+    set onMove(Y) {
+      ie(Y), y();
+    },
+    get onMoveEnd() {
+      return ee();
+    },
+    set onMoveEnd(Y) {
+      ee(Y), y();
+    },
+    get isValidConnection() {
+      return W();
+    },
+    set isValidConnection(Y) {
+      W(Y), y();
+    },
+    get translateExtent() {
+      return ue();
+    },
+    set translateExtent(Y) {
+      ue(Y), y();
+    },
+    get nodeExtent() {
+      return me();
+    },
+    set nodeExtent(Y) {
+      me(Y), y();
+    },
+    get onlyRenderVisibleElements() {
+      return Ce();
+    },
+    set onlyRenderVisibleElements(Y) {
+      Ce(Y), y();
+    },
+    get panOnScrollMode() {
+      return ge();
+    },
+    set panOnScrollMode(Y) {
+      ge(Y), y();
+    },
+    get preventScrolling() {
+      return ze();
+    },
+    set preventScrolling(Y) {
+      ze(Y), y();
+    },
+    get zoomOnScroll() {
+      return G();
+    },
+    set zoomOnScroll(Y) {
+      G(Y), y();
+    },
+    get zoomOnDoubleClick() {
+      return se();
+    },
+    set zoomOnDoubleClick(Y) {
+      se(Y), y();
+    },
+    get zoomOnPinch() {
+      return Te();
+    },
+    set zoomOnPinch(Y) {
+      Te(Y), y();
+    },
+    get panOnScroll() {
+      return Ae();
+    },
+    set panOnScroll(Y) {
+      Ae(Y), y();
+    },
+    get panOnDrag() {
+      return Xe();
+    },
+    set panOnDrag(Y) {
+      Xe(Y), y();
+    },
+    get selectionOnDrag() {
+      return te();
+    },
+    set selectionOnDrag(Y) {
+      te(Y), y();
+    },
+    get autoPanOnConnect() {
+      return Fe();
+    },
+    set autoPanOnConnect(Y) {
+      Fe(Y), y();
+    },
+    get autoPanOnNodeDrag() {
+      return Le();
+    },
+    set autoPanOnNodeDrag(Y) {
+      Le(Y), y();
+    },
+    get onerror() {
+      return Qe();
+    },
+    set onerror(Y) {
+      Qe(Y), y();
+    },
+    get ondelete() {
+      return oe();
+    },
+    set ondelete(Y) {
+      oe(Y), y();
+    },
+    get onedgecreate() {
+      return ve();
+    },
+    set onedgecreate(Y) {
+      ve(Y), y();
+    },
+    get attributionPosition() {
+      return xe();
+    },
+    set attributionPosition(Y) {
+      xe(Y), y();
+    },
+    get proOptions() {
+      return Oe();
+    },
+    set proOptions(Y) {
+      Oe(Y), y();
+    },
+    get defaultEdgeOptions() {
+      return ct();
+    },
+    set defaultEdgeOptions(Y) {
+      ct(Y), y();
+    },
+    get width() {
+      return lt();
+    },
+    set width(Y) {
+      lt(Y), y();
+    },
+    get height() {
+      return J();
+    },
+    set height(Y) {
+      J(Y), y();
+    },
+    get colorMode() {
+      return Re();
+    },
+    set colorMode(Y) {
+      Re(Y), y();
+    },
+    get onconnect() {
+      return le();
+    },
+    set onconnect(Y) {
+      le(Y), y();
+    },
+    get onconnectstart() {
+      return fn();
+    },
+    set onconnectstart(Y) {
+      fn(Y), y();
+    },
+    get onconnectend() {
+      return Ut();
+    },
+    set onconnectend(Y) {
+      Ut(Y), y();
+    },
+    get onbeforedelete() {
+      return gn();
+    },
+    set onbeforedelete(Y) {
+      gn(Y), y();
+    },
+    get oninit() {
+      return Ne();
+    },
+    set oninit(Y) {
+      Ne(Y), y();
+    },
+    get nodeOrigin() {
+      return rt();
+    },
+    set nodeOrigin(Y) {
+      rt(Y), y();
+    },
+    get paneClickDistance() {
+      return ye();
+    },
+    set paneClickDistance(Y) {
+      ye(Y), y();
+    },
+    get nodeClickDistance() {
+      return ot();
+    },
+    set nodeClickDistance(Y) {
+      ot(Y), y();
+    },
+    get defaultMarkerColor() {
+      return at();
+    },
+    set defaultMarkerColor(Y) {
+      at(Y), y();
+    },
+    get style() {
+      return Xt();
+    },
+    set style(Y) {
+      Xt(Y), y();
+    },
+    get class() {
+      return Kr();
+    },
+    set class(Y) {
+      Kr(Y), y();
+    }
+  });
+  return s(), Gd;
+}
+ae(
+  Fc,
+  {
+    id: {},
+    nodes: {},
+    edges: {},
+    fitView: {},
+    fitViewOptions: {},
+    minZoom: {},
+    maxZoom: {},
+    initialViewport: {},
+    viewport: {},
+    nodeTypes: {},
+    edgeTypes: {},
+    selectionKey: {},
+    selectionMode: {},
+    panActivationKey: {},
+    multiSelectionKey: {},
+    zoomActivationKey: {},
+    nodesDraggable: {},
+    nodesConnectable: {},
+    nodeDragThreshold: {},
+    elementsSelectable: {},
+    snapGrid: {},
+    deleteKey: {},
+    connectionRadius: {},
+    connectionLineType: {},
+    connectionMode: {},
+    connectionLineStyle: {},
+    connectionLineContainerStyle: {},
+    onMoveStart: {},
+    onMove: {},
+    onMoveEnd: {},
+    isValidConnection: {},
+    translateExtent: {},
+    nodeExtent: {},
+    onlyRenderVisibleElements: {},
+    panOnScrollMode: {},
+    preventScrolling: {},
+    zoomOnScroll: {},
+    zoomOnDoubleClick: {},
+    zoomOnPinch: {},
+    panOnScroll: {},
+    panOnDrag: {},
+    selectionOnDrag: {},
+    autoPanOnConnect: {},
+    autoPanOnNodeDrag: {},
+    onerror: {},
+    ondelete: {},
+    onedgecreate: {},
+    attributionPosition: {},
+    proOptions: {},
+    defaultEdgeOptions: {},
+    width: {},
+    height: {},
+    colorMode: {},
+    onconnect: {},
+    onconnectstart: {},
+    onconnectend: {},
+    onbeforedelete: {},
+    oninit: {},
+    nodeOrigin: {},
+    paneClickDistance: {},
+    nodeClickDistance: {},
+    defaultMarkerColor: {},
+    style: {},
+    class: {}
+  },
+  ["connectionLine", "default"],
+  [],
+  !0
+);
+function Wc(e, t) {
+  de(t, !1);
+  let n = w(t, "initialNodes", 12, void 0), r = w(t, "initialEdges", 12, void 0), o = w(t, "initialWidth", 12, void 0), i = w(t, "initialHeight", 12, void 0), s = w(t, "fitView", 12, void 0), a = w(t, "nodeOrigin", 12, void 0);
+  const l = Nc({
+    nodes: n(),
+    edges: r(),
+    width: o(),
+    height: i(),
+    nodeOrigin: a(),
+    fitView: s()
+  });
+  Tr(Wi, { getStore: () => l }), Qs(() => {
+    l.reset();
+  }), He();
+  var u = et(), c = be(u);
+  return pt(c, t, "default", {}), L(e, u), fe({
+    get initialNodes() {
+      return n();
+    },
+    set initialNodes(f) {
+      n(f), y();
+    },
+    get initialEdges() {
+      return r();
+    },
+    set initialEdges(f) {
+      r(f), y();
+    },
+    get initialWidth() {
+      return o();
+    },
+    set initialWidth(f) {
+      o(f), y();
+    },
+    get initialHeight() {
+      return i();
+    },
+    set initialHeight(f) {
+      i(f), y();
+    },
+    get fitView() {
+      return s();
+    },
+    set fitView(f) {
+      s(f), y();
+    },
+    get nodeOrigin() {
+      return a();
+    },
+    set nodeOrigin(f) {
+      a(f), y();
+    }
+  });
+}
+ae(
+  Wc,
+  {
+    initialNodes: {},
+    initialEdges: {},
+    initialWidth: {},
+    initialHeight: {},
+    fitView: {},
+    nodeOrigin: {}
+  },
+  ["default"],
+  [],
+  !0
+);
+var j2 = /* @__PURE__ */ ne("<button><!></button>");
+function ro(e, t) {
+  const n = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]), r = nt(n, [
+    "class",
+    "bgColor",
+    "bgColorHover",
+    "color",
+    "colorHover",
+    "borderColor"
+  ]);
+  de(t, !1);
+  let o = w(t, "class", 12, void 0), i = w(t, "bgColor", 12, void 0), s = w(t, "bgColorHover", 12, void 0), a = w(t, "color", 12, void 0), l = w(t, "colorHover", 12, void 0), u = w(t, "borderColor", 12, void 0);
+  He();
+  var c = j2();
+  let f;
+  var d = X(c);
+  return pt(d, t, "default", { class: "button-svg" }), Z(c), Ee(
+    (g) => {
+      f = on(c, f, { type: "button", class: g, ...r }), st(c, "--xy-controls-button-background-color-props", i()), st(c, "--xy-controls-button-background-color-hover-props", s()), st(c, "--xy-controls-button-color-props", a()), st(c, "--xy-controls-button-color-hover-props", l()), st(c, "--xy-controls-button-border-color-props", u());
+    },
+    [
+      () => Et([
+        "svelte-flow__controls-button",
+        o()
+      ])
+    ],
+    pe
+  ), Ye("click", c, function(g) {
+    Ve.call(this, t, g);
+  }), L(e, c), fe({
+    get class() {
+      return o();
+    },
+    set class(g) {
+      o(g), y();
+    },
+    get bgColor() {
+      return i();
+    },
+    set bgColor(g) {
+      i(g), y();
+    },
+    get bgColorHover() {
+      return s();
+    },
+    set bgColorHover(g) {
+      s(g), y();
+    },
+    get color() {
+      return a();
+    },
+    set color(g) {
+      a(g), y();
+    },
+    get colorHover() {
+      return l();
+    },
+    set colorHover(g) {
+      l(g), y();
+    },
+    get borderColor() {
+      return u();
+    },
+    set borderColor(g) {
+      u(g), y();
+    }
+  });
+}
+ae(
+  ro,
+  {
+    class: {},
+    bgColor: {},
+    bgColorHover: {},
+    color: {},
+    colorHover: {},
+    borderColor: {}
+  },
+  ["default"],
+  [],
+  !0
+);
+var J2 = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"></path></svg>');
+function Kc(e) {
+  var t = J2();
+  L(e, t);
+}
+ae(Kc, {}, [], [], !0);
+var Q2 = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5"><path d="M0 0h32v4.2H0z"></path></svg>');
+function qc(e) {
+  var t = Q2();
+  L(e, t);
+}
+ae(qc, {}, [], [], !0);
+var ep = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30"><path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"></path></svg>');
+function Gc(e) {
+  var t = ep();
+  L(e, t);
+}
+ae(Gc, {}, [], [], !0);
+var tp = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32"><path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z"></path></svg>');
+function Uc(e) {
+  var t = tp();
+  L(e, t);
+}
+ae(Uc, {}, [], [], !0);
+var np = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32"><path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"></path></svg>');
+function jc(e) {
+  var t = np();
+  L(e, t);
+}
+ae(jc, {}, [], [], !0);
+var rp = /* @__PURE__ */ ne("<!> <!>", 1), op = /* @__PURE__ */ ne("<!> <!> <!> <!> <!> <!>", 1);
+function Jc(e, t) {
+  de(t, !1);
+  const [n, r] = tt(), o = () => Q(H, "$nodesDraggable", n), i = () => Q(I, "$nodesConnectable", n), s = () => Q(B, "$elementsSelectable", n), a = () => Q(T, "$viewport", n), l = () => Q(k, "$minZoom", n), u = () => Q(P, "$maxZoom", n), c = re(), f = re(), d = re(), g = re();
+  let p = w(t, "position", 12, "bottom-left"), x = w(t, "showZoom", 12, !0), C = w(t, "showFitView", 12, !0), $ = w(t, "showLock", 12, !0), m = w(t, "buttonBgColor", 12, void 0), _ = w(t, "buttonBgColorHover", 12, void 0), v = w(t, "buttonColor", 12, void 0), b = w(t, "buttonColorHover", 12, void 0), N = w(t, "buttonBorderColor", 12, void 0), E = w(t, "ariaLabel", 12, void 0), M = w(t, "style", 12, void 0), D = w(t, "orientation", 12, "vertical"), V = w(t, "fitViewOptions", 12, void 0), A = w(t, "class", 12, "");
+  const {
+    zoomIn: O,
+    zoomOut: R,
+    fitView: S,
+    viewport: T,
+    minZoom: k,
+    maxZoom: P,
+    nodesDraggable: H,
+    nodesConnectable: I,
+    elementsSelectable: B
+  } = Ue(), F = {
+    bgColor: m(),
+    bgColorHover: _(),
+    color: v(),
+    colorHover: b(),
+    borderColor: N()
+  }, K = () => {
+    O();
+  }, ie = () => {
+    R();
+  }, ee = () => {
+    S(V());
+  }, W = () => {
+    U(c, !h(c)), H.set(h(c)), I.set(h(c)), B.set(h(c));
+  };
+  he(
+    () => (o(), i(), s()),
+    () => {
+      U(c, o() || i() || s());
+    }
+  ), he(() => (a(), l()), () => {
+    U(f, a().zoom <= l());
+  }), he(() => (a(), u()), () => {
+    U(d, a().zoom >= u());
+  }), he(() => j(D()), () => {
+    U(g, D() === "horizontal" ? "horizontal" : "vertical");
+  }), gt(), He();
+  const ue = /* @__PURE__ */ pe(() => Et([
+    "svelte-flow__controls",
+    h(g),
+    A()
+  ])), me = /* @__PURE__ */ pe(() => E() ?? "Svelte Flow controls");
+  Ho(e, {
+    get class() {
+      return h(ue);
+    },
+    get position() {
+      return p();
+    },
+    "data-testid": "svelte-flow__controls",
+    get "aria-label"() {
+      return h(me);
+    },
+    get style() {
+      return M();
+    },
+    children: (ge, ze) => {
+      var G = op(), se = be(G);
+      pt(se, t, "before", {});
+      var Te = z(se, 2);
+      {
+        var Ae = (ve) => {
+          var xe = rp(), Oe = be(xe);
+          ro(Oe, ut(
+            {
+              class: "svelte-flow__controls-zoomin",
+              title: "zoom in",
+              "aria-label": "zoom in",
+              get disabled() {
+                return h(d);
+              }
+            },
+            F,
+            {
+              $$events: { click: K },
+              children: (lt, J) => {
+                Kc(lt);
+              },
+              $$slots: { default: !0 }
+            }
+          ));
+          var ct = z(Oe, 2);
+          ro(ct, ut(
+            {
+              class: "svelte-flow__controls-zoomout",
+              title: "zoom out",
+              "aria-label": "zoom out",
+              get disabled() {
+                return h(f);
+              }
+            },
+            F,
+            {
+              $$events: { click: ie },
+              children: (lt, J) => {
+                qc(lt);
+              },
+              $$slots: { default: !0 }
+            }
+          )), L(ve, xe);
+        };
+        ke(Te, (ve) => {
+          x() && ve(Ae);
+        });
+      }
+      var Xe = z(Te, 2);
+      {
+        var te = (ve) => {
+          ro(ve, ut(
+            {
+              class: "svelte-flow__controls-fitview",
+              title: "fit view",
+              "aria-label": "fit view"
+            },
+            F,
+            {
+              $$events: { click: ee },
+              children: (xe, Oe) => {
+                Gc(xe);
+              },
+              $$slots: { default: !0 }
+            }
+          ));
+        };
+        ke(Xe, (ve) => {
+          C() && ve(te);
+        });
+      }
+      var Fe = z(Xe, 2);
+      {
+        var Le = (ve) => {
+          ro(ve, ut(
+            {
+              class: "svelte-flow__controls-interactive",
+              title: "toggle interactivity",
+              "aria-label": "toggle interactivity"
+            },
+            F,
+            {
+              $$events: { click: W },
+              children: (xe, Oe) => {
+                var ct = et(), lt = be(ct);
+                {
+                  var J = (le) => {
+                    jc(le);
+                  }, Re = (le) => {
+                    Uc(le);
+                  };
+                  ke(lt, (le) => {
+                    h(c) ? le(J) : le(Re, !1);
+                  });
+                }
+                L(xe, ct);
+              },
+              $$slots: { default: !0 }
+            }
+          ));
+        };
+        ke(Fe, (ve) => {
+          $() && ve(Le);
+        });
+      }
+      var Qe = z(Fe, 2);
+      pt(Qe, t, "default", {});
+      var oe = z(Qe, 2);
+      pt(oe, t, "after", {}), L(ge, G);
+    },
+    $$slots: { default: !0 }
+  });
+  var Ce = fe({
+    get position() {
+      return p();
+    },
+    set position(ge) {
+      p(ge), y();
+    },
+    get showZoom() {
+      return x();
+    },
+    set showZoom(ge) {
+      x(ge), y();
+    },
+    get showFitView() {
+      return C();
+    },
+    set showFitView(ge) {
+      C(ge), y();
+    },
+    get showLock() {
+      return $();
+    },
+    set showLock(ge) {
+      $(ge), y();
+    },
+    get buttonBgColor() {
+      return m();
+    },
+    set buttonBgColor(ge) {
+      m(ge), y();
+    },
+    get buttonBgColorHover() {
+      return _();
+    },
+    set buttonBgColorHover(ge) {
+      _(ge), y();
+    },
+    get buttonColor() {
+      return v();
+    },
+    set buttonColor(ge) {
+      v(ge), y();
+    },
+    get buttonColorHover() {
+      return b();
+    },
+    set buttonColorHover(ge) {
+      b(ge), y();
+    },
+    get buttonBorderColor() {
+      return N();
+    },
+    set buttonBorderColor(ge) {
+      N(ge), y();
+    },
+    get ariaLabel() {
+      return E();
+    },
+    set ariaLabel(ge) {
+      E(ge), y();
+    },
+    get style() {
+      return M();
+    },
+    set style(ge) {
+      M(ge), y();
+    },
+    get orientation() {
+      return D();
+    },
+    set orientation(ge) {
+      D(ge), y();
+    },
+    get fitViewOptions() {
+      return V();
+    },
+    set fitViewOptions(ge) {
+      V(ge), y();
+    },
+    get class() {
+      return A();
+    },
+    set class(ge) {
+      A(ge), y();
+    }
+  });
+  return r(), Ce;
+}
+ae(
+  Jc,
+  {
+    position: {},
+    showZoom: {},
+    showFitView: {},
+    showLock: {},
+    buttonBgColor: {},
+    buttonBgColorHover: {},
+    buttonColor: {},
+    buttonColorHover: {},
+    buttonBorderColor: {},
+    ariaLabel: {},
+    style: {},
+    orientation: {},
+    fitViewOptions: {},
+    class: {}
+  },
+  ["before", "default", "after"],
+  [],
+  !0
+);
+var Gn;
+(function(e) {
+  e.Lines = "lines", e.Dots = "dots", e.Cross = "cross";
+})(Gn || (Gn = {}));
+var ip = /* @__PURE__ */ _e("<circle></circle>");
+function Qc(e, t) {
+  de(t, !1);
+  let n = w(t, "radius", 12, 5), r = w(t, "class", 12, "");
+  He();
+  var o = ip();
+  return Ee(
+    (i) => {
+      ce(o, "cx", n()), ce(o, "cy", n()), ce(o, "r", n()), kt(o, 0, bn(i));
+    },
+    [
+      () => Et([
+        "svelte-flow__background-pattern",
+        "dots",
+        r()
+      ])
+    ],
+    pe
+  ), L(e, o), fe({
+    get radius() {
+      return n();
+    },
+    set radius(i) {
+      n(i), y();
+    },
+    get class() {
+      return r();
+    },
+    set class(i) {
+      r(i), y();
+    }
+  });
+}
+ae(Qc, { radius: {}, class: {} }, [], [], !0);
+var sp = /* @__PURE__ */ _e("<path></path>");
+function ed(e, t) {
+  de(t, !1);
+  let n = w(t, "lineWidth", 12, 1), r = w(t, "dimensions", 12), o = w(t, "variant", 12, void 0), i = w(t, "class", 12, "");
+  He();
+  var s = sp();
+  return Ee(
+    (a) => {
+      ce(s, "stroke-width", n()), ce(s, "d", `M${r()[0] / 2} 0 V${r()[1]} M0 ${r()[1] / 2} H${r()[0]}`), kt(s, 0, bn(a));
+    },
+    [
+      () => Et([
+        "svelte-flow__background-pattern",
+        o(),
+        i()
+      ])
+    ],
+    pe
+  ), L(e, s), fe({
+    get lineWidth() {
+      return n();
+    },
+    set lineWidth(a) {
+      n(a), y();
+    },
+    get dimensions() {
+      return r();
+    },
+    set dimensions(a) {
+      r(a), y();
+    },
+    get variant() {
+      return o();
+    },
+    set variant(a) {
+      o(a), y();
+    },
+    get class() {
+      return i();
+    },
+    set class(a) {
+      i(a), y();
+    }
+  });
+}
+ae(
+  ed,
+  {
+    lineWidth: {},
+    dimensions: {},
+    variant: {},
+    class: {}
+  },
+  [],
+  [],
+  !0
+);
+const ap = {
+  [Gn.Dots]: 1,
+  [Gn.Lines]: 1,
+  [Gn.Cross]: 6
+};
+var lp = /* @__PURE__ */ _e('<svg data-testid="svelte-flow__background"><pattern patternUnits="userSpaceOnUse"><!></pattern><rect x="0" y="0" width="100%" height="100%"></rect></svg>');
+const up = {
+  hash: "svelte-1r7pe8d",
+  code: ".svelte-flow__background.svelte-1r7pe8d {position:absolute;width:100%;height:100%;top:0;left:0;}"
+};
+function td(e, t) {
+  de(t, !1), Je(e, up);
+  const [n, r] = tt(), o = () => Q(b, "$flowId", n), i = () => Q(v, "$viewport", n), s = re(), a = re(), l = re(), u = re(), c = re();
+  let f = w(t, "id", 12, void 0), d = w(t, "variant", 28, () => Gn.Dots), g = w(t, "gap", 12, 20), p = w(t, "size", 12, 1), x = w(t, "lineWidth", 12, 1), C = w(t, "bgColor", 12, void 0), $ = w(t, "patternColor", 12, void 0), m = w(t, "patternClass", 12, void 0), _ = w(t, "class", 12, "");
+  const { viewport: v, flowId: b } = Ue(), N = p() || ap[d()], E = d() === Gn.Dots, M = d() === Gn.Cross, D = Array.isArray(g()) ? g() : [g(), g()];
+  he(
+    () => (o(), j(f())),
+    () => {
+      U(s, `background-pattern-${o()}-${f() ? f() : ""}`);
+    }
+  ), he(() => i(), () => {
+    U(a, [
+      D[0] * i().zoom || 1,
+      D[1] * i().zoom || 1
+    ]);
+  }), he(() => i(), () => {
+    U(l, N * i().zoom);
+  }), he(() => (h(l), h(a)), () => {
+    U(u, M ? [h(l), h(l)] : h(a));
+  }), he(
+    () => (h(l), h(u)),
+    () => {
+      U(c, E ? [
+        h(l) / 2,
+        h(l) / 2
+      ] : [
+        h(u)[0] / 2,
+        h(u)[1] / 2
+      ]);
+    }
+  ), gt(), He();
+  var V = lp(), A = X(V), O = X(A);
+  {
+    var R = (P) => {
+      const H = /* @__PURE__ */ pe(() => h(l) / 2);
+      Qc(P, {
+        get radius() {
+          return h(H);
+        },
+        get class() {
+          return m();
+        }
+      });
+    }, S = (P) => {
+      ed(P, {
+        get dimensions() {
+          return h(u);
+        },
+        get variant() {
+          return d();
+        },
+        get lineWidth() {
+          return x();
+        },
+        get class() {
+          return m();
+        }
+      });
+    };
+    ke(O, (P) => {
+      E ? P(R) : P(S, !1);
+    });
+  }
+  Z(A);
+  var T = z(A);
+  Z(V), Ee(
+    (P) => {
+      kt(V, 0, bn(P), "svelte-1r7pe8d"), st(V, "--xy-background-color-props", C()), st(V, "--xy-background-pattern-color-props", $()), ce(A, "id", h(s)), ce(A, "x", i().x % h(a)[0]), ce(A, "y", i().y % h(a)[1]), ce(A, "width", h(a)[0]), ce(A, "height", h(a)[1]), ce(A, "patternTransform", `translate(-${h(c)[0]},-${h(c)[1]})`), ce(T, "fill", `url(#${h(s)})`);
+    },
+    [
+      () => Et(["svelte-flow__background", _()])
+    ],
+    pe
+  ), L(e, V);
+  var k = fe({
+    get id() {
+      return f();
+    },
+    set id(P) {
+      f(P), y();
+    },
+    get variant() {
+      return d();
+    },
+    set variant(P) {
+      d(P), y();
+    },
+    get gap() {
+      return g();
+    },
+    set gap(P) {
+      g(P), y();
+    },
+    get size() {
+      return p();
+    },
+    set size(P) {
+      p(P), y();
+    },
+    get lineWidth() {
+      return x();
+    },
+    set lineWidth(P) {
+      x(P), y();
+    },
+    get bgColor() {
+      return C();
+    },
+    set bgColor(P) {
+      C(P), y();
+    },
+    get patternColor() {
+      return $();
+    },
+    set patternColor(P) {
+      $(P), y();
+    },
+    get patternClass() {
+      return m();
+    },
+    set patternClass(P) {
+      m(P), y();
+    },
+    get class() {
+      return _();
+    },
+    set class(P) {
+      _(P), y();
+    }
+  });
+  return r(), k;
+}
+ae(
+  td,
+  {
+    id: {},
+    variant: {},
+    gap: {},
+    size: {},
+    lineWidth: {},
+    bgColor: {},
+    patternColor: {},
+    patternClass: {},
+    class: {}
+  },
+  [],
+  [],
+  !0
+);
+var cp = /* @__PURE__ */ _e("<rect></rect>");
+function nd(e, t) {
+  de(t, !1);
+  let n = w(t, "x", 12), r = w(t, "y", 12), o = w(t, "width", 12, 0), i = w(t, "height", 12, 0), s = w(t, "borderRadius", 12, 5), a = w(t, "color", 12, void 0), l = w(t, "shapeRendering", 12), u = w(t, "strokeColor", 12, void 0), c = w(t, "strokeWidth", 12, 2), f = w(t, "selected", 12, !1), d = w(t, "class", 12, "");
+  He();
+  var g = cp();
+  let p;
+  return Ee(
+    (x) => {
+      p = kt(g, 0, bn(x), null, p, { selected: f() }), ce(g, "x", n()), ce(g, "y", r()), ce(g, "rx", s()), ce(g, "ry", s()), ce(g, "width", o()), ce(g, "height", i()), ce(g, "style", `${a() ? `fill: ${a()};` : ""}${u() ? `stroke: ${u()};` : ""}${c() ? `stroke-width: ${c()};` : ""}`), ce(g, "shape-rendering", l());
+    },
+    [
+      () => Et(["svelte-flow__minimap-node", d()])
+    ],
+    pe
+  ), L(e, g), fe({
+    get x() {
+      return n();
+    },
+    set x(x) {
+      n(x), y();
+    },
+    get y() {
+      return r();
+    },
+    set y(x) {
+      r(x), y();
+    },
+    get width() {
+      return o();
+    },
+    set width(x) {
+      o(x), y();
+    },
+    get height() {
+      return i();
+    },
+    set height(x) {
+      i(x), y();
+    },
+    get borderRadius() {
+      return s();
+    },
+    set borderRadius(x) {
+      s(x), y();
+    },
+    get color() {
+      return a();
+    },
+    set color(x) {
+      a(x), y();
+    },
+    get shapeRendering() {
+      return l();
+    },
+    set shapeRendering(x) {
+      l(x), y();
+    },
+    get strokeColor() {
+      return u();
+    },
+    set strokeColor(x) {
+      u(x), y();
+    },
+    get strokeWidth() {
+      return c();
+    },
+    set strokeWidth(x) {
+      c(x), y();
+    },
+    get selected() {
+      return f();
+    },
+    set selected(x) {
+      f(x), y();
+    },
+    get class() {
+      return d();
+    },
+    set class(x) {
+      d(x), y();
+    }
+  });
+}
+ae(
+  nd,
+  {
+    x: {},
+    y: {},
+    width: {},
+    height: {},
+    borderRadius: {},
+    color: {},
+    shapeRendering: {},
+    strokeColor: {},
+    strokeWidth: {},
+    selected: {},
+    class: {}
+  },
+  [],
+  [],
+  !0
+);
+function cs(e, t) {
+  const n = q0({
+    domNode: e,
+    panZoom: t.panZoom,
+    getTransform: () => {
+      const o = q(t.viewport);
+      return [o.x, o.y, o.zoom];
+    },
+    getViewScale: t.getViewScale
+  });
+  function r(o) {
+    n.update({
+      translateExtent: o.translateExtent,
+      width: o.width,
+      height: o.height,
+      inversePan: o.inversePan,
+      zoomStep: o.zoomStep,
+      pannable: o.pannable,
+      zoomable: o.zoomable
+    });
+  }
+  return {
+    update: r,
+    destroy() {
+      n.destroy();
+    }
+  };
+}
+const ds = (e) => e instanceof Function ? e : () => e;
+var dp = /* @__PURE__ */ _e("<title> </title>"), fp = /* @__PURE__ */ _e('<svg class="svelte-flow__minimap-svg" role="img"><!><!><path class="svelte-flow__minimap-mask" fill-rule="evenodd" pointer-events="none"></path></svg>');
+function rd(e, t) {
+  de(t, !1);
+  const [n, r] = tt(), o = () => Q(Xe, "$flowId", n), i = () => Q(se, "$viewport", n), s = () => Q(Te, "$containerWidth", n), a = () => Q(Ae, "$containerHeight", n), l = () => Q(G, "$nodeLookup", n), u = () => Q(ze, "$nodes", n), c = () => Q(te, "$panZoom", n), f = () => Q(Fe, "$translateExtent", n), d = re(), g = re(), p = re(), x = re(), C = re(), $ = re(), m = re(), _ = re(), v = re(), b = re(), N = re(), E = re(), M = re();
+  let D = w(t, "position", 12, "bottom-right"), V = w(t, "ariaLabel", 12, "Mini map"), A = w(t, "nodeStrokeColor", 12, "transparent"), O = w(t, "nodeColor", 12, void 0), R = w(t, "nodeClass", 12, ""), S = w(t, "nodeBorderRadius", 12, 5), T = w(t, "nodeStrokeWidth", 12, 2), k = w(t, "bgColor", 12, void 0), P = w(t, "maskColor", 12, void 0), H = w(t, "maskStrokeColor", 12, void 0), I = w(t, "maskStrokeWidth", 12, void 0), B = w(t, "width", 12, void 0), F = w(t, "height", 12, void 0), K = w(t, "pannable", 12, !0), ie = w(t, "zoomable", 12, !0), ee = w(t, "inversePan", 12, void 0), W = w(t, "zoomStep", 12, void 0), ue = w(t, "style", 12, ""), me = w(t, "class", 12, "");
+  const Ce = 200, ge = 150, {
+    nodes: ze,
+    nodeLookup: G,
+    viewport: se,
+    width: Te,
+    height: Ae,
+    flowId: Xe,
+    panZoom: te,
+    translateExtent: Fe
+  } = Ue(), Le = O() === void 0 ? void 0 : ds(O()), Qe = ds(A()), oe = ds(R()), ve = (
+    // @ts-expect-error - TS doesn't know about chrome
+    typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision"
+  ), xe = `svelte-flow__minimap-desc-${o()}`;
+  let Oe = re(h(d));
+  const ct = () => h($);
+  he(
+    () => (i(), s(), a()),
+    () => {
+      U(d, {
+        x: -i().x / i().zoom,
+        y: -i().y / i().zoom,
+        width: s() / i().zoom,
+        height: a() / i().zoom
+      });
+    }
+  ), he(
+    () => (l(), h(d), u()),
+    () => {
+      U(Oe, l().size > 0 ? nc(No(l()), h(d)) : h(d)), u();
+    }
+  ), he(() => j(B()), () => {
+    U(g, B() ?? Ce);
+  }), he(() => j(F()), () => {
+    U(p, F() ?? ge);
+  }), he(
+    () => (h(Oe), h(g)),
+    () => {
+      U(x, h(Oe).width / h(g));
+    }
+  ), he(
+    () => (h(Oe), h(p)),
+    () => {
+      U(C, h(Oe).height / h(p));
+    }
+  ), he(
+    () => (h(x), h(C)),
+    () => {
+      U($, Math.max(h(x), h(C)));
+    }
+  ), he(() => (h($), h(g)), () => {
+    U(m, h($) * h(g));
+  }), he(
+    () => (h($), h(p)),
+    () => {
+      U(_, h($) * h(p));
+    }
+  ), he(() => h($), () => {
+    U(v, 5 * h($));
+  }), he(
+    () => (h(Oe), h(m), h(v)),
+    () => {
+      U(b, h(Oe).x - (h(m) - h(Oe).width) / 2 - h(v));
+    }
+  ), he(
+    () => (h(Oe), h(_), h(v)),
+    () => {
+      U(N, h(Oe).y - (h(_) - h(Oe).height) / 2 - h(v));
+    }
+  ), he(() => (h(m), h(v)), () => {
+    U(E, h(m) + h(v) * 2);
+  }), he(() => (h(_), h(v)), () => {
+    U(M, h(_) + h(v) * 2);
+  }), gt(), He();
+  const lt = /* @__PURE__ */ pe(() => ue() + (k() ? `;--xy-minimap-background-color-props:${k()}` : "")), J = /* @__PURE__ */ pe(() => Et(["svelte-flow__minimap", me()]));
+  Ho(e, {
+    get position() {
+      return D();
+    },
+    get style() {
+      return h(lt);
+    },
+    get class() {
+      return h(J);
+    },
+    "data-testid": "svelte-flow__minimap",
+    children: (le, fn) => {
+      var Ut = et(), gn = be(Ut);
+      {
+        var Ne = (rt) => {
+          var ye = fp();
+          ce(ye, "aria-labelledby", xe);
+          var ot = X(ye);
+          {
+            var at = (At) => {
+              var St = dp();
+              ce(St, "id", xe);
+              var hn = X(St, !0);
+              Z(St), Ee(() => Rt(hn, V())), L(At, St);
+            };
+            ke(ot, (At) => {
+              V() && At(at);
+            });
+          }
+          var Xt = z(ot);
+          Yt(Xt, 1, u, (At) => At.id, (At, St) => {
+            var hn = et();
+            const jt = /* @__PURE__ */ pe(() => l().get(h(St).id));
+            var ft = be(hn);
+            {
+              var ji = (nr) => {
+                const Jt = /* @__PURE__ */ pe(() => tr(h(jt))), Io = /* @__PURE__ */ pe(() => Le == null ? void 0 : Le(h(jt))), zo = /* @__PURE__ */ pe(() => Qe(h(jt))), Ro = /* @__PURE__ */ pe(() => oe(h(jt)));
+                nd(nr, ut(
+                  {
+                    get x() {
+                      return h(jt).internals.positionAbsolute.x;
+                    },
+                    get y() {
+                      return h(jt).internals.positionAbsolute.y;
+                    }
+                  },
+                  () => h(Jt),
+                  {
+                    get selected() {
+                      return h(jt).selected;
+                    },
+                    get color() {
+                      return h(Io);
+                    },
+                    get borderRadius() {
+                      return S();
+                    },
+                    get strokeColor() {
+                      return h(zo);
+                    },
+                    get strokeWidth() {
+                      return T();
+                    },
+                    shapeRendering: ve,
+                    get class() {
+                      return h(Ro);
+                    }
+                  }
+                ));
+              };
+              ke(ft, (nr) => {
+                h(jt) && oc(h(jt)) && nr(ji);
+              });
+            }
+            L(At, hn);
+          });
+          var Kr = z(Xt);
+          Z(ye), vt(ye, (At, St) => cs == null ? void 0 : cs(At, St), () => ({
+            panZoom: c(),
+            viewport: se,
+            getViewScale: ct,
+            translateExtent: f(),
+            width: s(),
+            height: a(),
+            inversePan: ee(),
+            zoomStep: W(),
+            pannable: K(),
+            zoomable: ie()
+          })), Ee(() => {
+            ce(ye, "width", h(g)), ce(ye, "height", h(p)), ce(ye, "viewBox", `${h(b) ?? ""} ${h(N) ?? ""} ${h(E) ?? ""} ${h(M) ?? ""}`), st(ye, "--xy-minimap-mask-background-color-props", P()), st(ye, "--xy-minimap-mask-stroke-color-props", H()), st(ye, "--xy-minimap-mask-stroke-width-props", I() ? I() * h($) : void 0), ce(Kr, "d", `M${h(b) - h(v)},${h(N) - h(v)}h${h(E) + h(v) * 2}v${h(M) + h(v) * 2}h${-h(E) - h(v) * 2}z
+      M${h(d).x ?? ""},${h(d).y ?? ""}h${h(d).width ?? ""}v${h(d).height ?? ""}h${-h(d).width}z`);
+          }), L(rt, ye);
+        };
+        ke(gn, (rt) => {
+          c() && rt(Ne);
+        });
+      }
+      L(le, Ut);
+    },
+    $$slots: { default: !0 }
+  });
+  var Re = fe({
+    get position() {
+      return D();
+    },
+    set position(le) {
+      D(le), y();
+    },
+    get ariaLabel() {
+      return V();
+    },
+    set ariaLabel(le) {
+      V(le), y();
+    },
+    get nodeStrokeColor() {
+      return A();
+    },
+    set nodeStrokeColor(le) {
+      A(le), y();
+    },
+    get nodeColor() {
+      return O();
+    },
+    set nodeColor(le) {
+      O(le), y();
+    },
+    get nodeClass() {
+      return R();
+    },
+    set nodeClass(le) {
+      R(le), y();
+    },
+    get nodeBorderRadius() {
+      return S();
+    },
+    set nodeBorderRadius(le) {
+      S(le), y();
+    },
+    get nodeStrokeWidth() {
+      return T();
+    },
+    set nodeStrokeWidth(le) {
+      T(le), y();
+    },
+    get bgColor() {
+      return k();
+    },
+    set bgColor(le) {
+      k(le), y();
+    },
+    get maskColor() {
+      return P();
+    },
+    set maskColor(le) {
+      P(le), y();
+    },
+    get maskStrokeColor() {
+      return H();
+    },
+    set maskStrokeColor(le) {
+      H(le), y();
+    },
+    get maskStrokeWidth() {
+      return I();
+    },
+    set maskStrokeWidth(le) {
+      I(le), y();
+    },
+    get width() {
+      return B();
+    },
+    set width(le) {
+      B(le), y();
+    },
+    get height() {
+      return F();
+    },
+    set height(le) {
+      F(le), y();
+    },
+    get pannable() {
+      return K();
+    },
+    set pannable(le) {
+      K(le), y();
+    },
+    get zoomable() {
+      return ie();
+    },
+    set zoomable(le) {
+      ie(le), y();
+    },
+    get inversePan() {
+      return ee();
+    },
+    set inversePan(le) {
+      ee(le), y();
+    },
+    get zoomStep() {
+      return W();
+    },
+    set zoomStep(le) {
+      W(le), y();
+    },
+    get style() {
+      return ue();
+    },
+    set style(le) {
+      ue(le), y();
+    },
+    get class() {
+      return me();
+    },
+    set class(le) {
+      me(le), y();
+    }
+  });
+  return r(), Re;
+}
+ae(
+  rd,
+  {
+    position: {},
+    ariaLabel: {},
+    nodeStrokeColor: {},
+    nodeColor: {},
+    nodeClass: {},
+    nodeBorderRadius: {},
+    nodeStrokeWidth: {},
+    bgColor: {},
+    maskColor: {},
+    maskStrokeColor: {},
+    maskStrokeWidth: {},
+    width: {},
+    height: {},
+    pannable: {},
+    zoomable: {},
+    inversePan: {},
+    zoomStep: {},
+    style: {},
+    class: {}
+  },
+  [],
+  [],
+  !0
+);
+const Pl = (e) => f0(e);
+function Dt() {
+  const { zoomIn: e, zoomOut: t, fitView: n, onbeforedelete: r, snapGrid: o, viewport: i, width: s, height: a, minZoom: l, maxZoom: u, panZoom: c, nodes: f, edges: d, domNode: g, nodeLookup: p, nodeOrigin: x, edgeLookup: C, connectionLookup: $ } = Ue(), m = (b) => {
+    var V, A;
+    const N = q(p), E = Pl(b) ? b : N.get(b.id), M = E.parentId ? p0(E.position, E.measured, E.parentId, N, q(x)) : E.position, D = {
+      ...E,
+      position: M,
+      width: ((V = E.measured) == null ? void 0 : V.width) ?? E.width,
+      height: ((A = E.measured) == null ? void 0 : A.height) ?? E.height
+    };
+    return Lr(D);
+  }, _ = (b, N, E = { replace: !1 }) => {
+    var V;
+    const M = (V = q(p).get(b)) == null ? void 0 : V.internals.userNode;
+    if (!M)
+      return;
+    const D = typeof N == "function" ? N(M) : N;
+    E.replace ? f.update((A) => A.map((O) => O.id === b ? Pl(D) ? D : { ...O, ...D } : O)) : (Object.assign(M, D), f.update((A) => A));
+  }, v = (b) => q(p).get(b);
+  return {
+    zoomIn: e,
+    zoomOut: t,
+    getInternalNode: v,
+    getNode: (b) => {
+      var N;
+      return (N = v(b)) == null ? void 0 : N.internals.userNode;
+    },
+    getNodes: (b) => b === void 0 ? q(f) : Nl(q(p), b),
+    getEdge: (b) => q(C).get(b),
+    getEdges: (b) => b === void 0 ? q(d) : Nl(q(C), b),
+    setZoom: (b, N) => {
+      const E = q(c);
+      return E ? E.scaleTo(b, { duration: N == null ? void 0 : N.duration }) : Promise.resolve(!1);
+    },
+    getZoom: () => q(i).zoom,
+    setViewport: async (b, N) => {
+      const E = q(i), M = q(c);
+      return M ? (await M.setViewport({
+        x: b.x ?? E.x,
+        y: b.y ?? E.y,
+        zoom: b.zoom ?? E.zoom
+      }, { duration: N == null ? void 0 : N.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
+    },
+    getViewport: () => q(i),
+    setCenter: async (b, N, E) => {
+      const M = typeof (E == null ? void 0 : E.zoom) < "u" ? E.zoom : q(u), D = q(c);
+      return D ? (await D.setViewport({
+        x: q(s) / 2 - b * M,
+        y: q(a) / 2 - N * M,
+        zoom: M
+      }, { duration: E == null ? void 0 : E.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
+    },
+    fitView: n,
+    fitBounds: async (b, N) => {
+      const E = q(c);
+      if (!E)
+        return Promise.resolve(!1);
+      const M = ua(b, q(s), q(a), q(l), q(u), (N == null ? void 0 : N.padding) ?? 0.1);
+      return await E.setViewport(M, { duration: N == null ? void 0 : N.duration }), Promise.resolve(!0);
+    },
+    getIntersectingNodes: (b, N = !0, E) => {
+      const M = fl(b), D = M ? b : m(b);
+      return D ? (E || q(f)).filter((V) => {
+        const A = q(p).get(V.id);
+        if (!A || !M && V.id === b.id)
+          return !1;
+        const O = Lr(A), R = yo(O, D);
+        return N && R > 0 || R >= D.width * D.height;
+      }) : [];
+    },
+    isNodeIntersecting: (b, N, E = !0) => {
+      const D = fl(b) ? b : m(b);
+      if (!D)
+        return !1;
+      const V = yo(D, N);
+      return E && V > 0 || V >= D.width * D.height;
+    },
+    deleteElements: async ({ nodes: b = [], edges: N = [] }) => {
+      const { nodes: E, edges: M } = await Qu({
+        nodesToRemove: b,
+        edgesToRemove: N,
+        nodes: q(f),
+        edges: q(d),
+        onBeforeDelete: q(r)
+      });
+      return E && f.update((D) => D.filter((V) => !E.some(({ id: A }) => A === V.id))), M && d.update((D) => D.filter((V) => !M.some(({ id: A }) => A === V.id))), {
+        deletedNodes: E,
+        deletedEdges: M
+      };
+    },
+    screenToFlowPosition: (b, N = { snapToGrid: !0 }) => {
+      const E = q(g);
+      if (!E)
+        return b;
+      const M = N.snapToGrid ? q(o) : !1, { x: D, y: V, zoom: A } = q(i), { x: O, y: R } = E.getBoundingClientRect(), S = {
+        x: b.x - O,
+        y: b.y - R
+      };
+      return Mo(S, [D, V, A], M !== null, M || [1, 1]);
+    },
+    /**
+     *
+     * @param position
+     * @returns
+     */
+    flowToScreenPosition: (b) => {
+      const N = q(g);
+      if (!N)
+        return b;
+      const { x: E, y: M, zoom: D } = q(i), { x: V, y: A } = N.getBoundingClientRect(), O = rc(b, [E, M, D]);
+      return {
+        x: O.x + V,
+        y: O.y + A
+      };
+    },
+    toObject: () => ({
+      nodes: q(f).map((b) => ({
+        ...b,
+        // we want to make sure that changes to the nodes object that gets returned by toObject
+        // do not affect the nodes object
+        position: { ...b.position },
+        data: { ...b.data }
+      })),
+      edges: q(d).map((b) => ({ ...b })),
+      viewport: { ...q(i) }
+    }),
+    updateNode: _,
+    updateNodeData: (b, N, E) => {
+      var V;
+      const M = (V = q(p).get(b)) == null ? void 0 : V.internals.userNode;
+      if (!M)
+        return;
+      const D = typeof N == "function" ? N(M) : N;
+      M.data = E != null && E.replace ? D : { ...M.data, ...D }, f.update((A) => A);
+    },
+    getNodesBounds: (b) => {
+      const N = q(p), E = q(x);
+      return g0(b, { nodeLookup: N, nodeOrigin: E });
+    },
+    getHandleConnections: ({ type: b, id: N, nodeId: E }) => {
+      var M;
+      return Array.from(((M = q($).get(`${E}-${b}-${N ?? null}`)) == null ? void 0 : M.values()) ?? []);
+    },
+    viewport: i
+  };
+}
+function Nl(e, t) {
+  var r;
+  const n = [];
+  for (const o of t) {
+    const i = e.get(o);
+    if (i) {
+      const s = "internals" in i ? (r = i.internals) == null ? void 0 : r.userNode : i;
+      n.push(s);
+    }
+  }
+  return n;
+}
+var gp = /* @__PURE__ */ ne('<div class="svelte-flow__node-toolbar"><!></div>');
+function od(e, t) {
+  de(t, !1);
+  const [n, r] = tt(), o = () => Q(_, "$nodes", n), i = () => Q(m, "$nodeLookup", n), s = () => Q($, "$viewport", n), a = () => Q(C, "$domNode", n), l = re(), u = re(), c = re();
+  let f = w(t, "nodeId", 12, void 0), d = w(t, "position", 12, void 0), g = w(t, "align", 12, void 0), p = w(t, "offset", 12, void 0), x = w(t, "isVisible", 12, void 0);
+  const { domNode: C, viewport: $, nodeLookup: m, nodes: _ } = Ue(), { getNodesBounds: v } = Dt(), b = ar("svelteflow__node_id");
+  let N = re(), E = re([]), M = p() !== void 0 ? p() : 10, D = d() !== void 0 ? d() : $e.Top, V = g() !== void 0 ? g() : "center";
+  he(
+    () => (o(), j(f()), i()),
+    () => {
+      o();
+      const T = Array.isArray(f()) ? f() : [f() || b];
+      U(E, T.reduce(
+        (k, P) => {
+          const H = i().get(P);
+          return H && k.push(H), k;
+        },
+        []
+      ));
+    }
+  ), he(
+    () => (h(E), s()),
+    () => {
+      const T = v(h(E));
+      T && U(N, T0(T, s(), D, M, V));
+    }
+  ), he(() => h(E), () => {
+    U(l, h(E).length === 0 ? 1 : Math.max(...h(E).map((T) => (T.internals.z || 5) + 1)));
+  }), he(() => o(), () => {
+    U(u, o().filter((T) => T.selected).length);
+  }), he(
+    () => (j(x()), h(E), h(u)),
+    () => {
+      U(c, typeof x() == "boolean" ? x() : h(E).length === 1 && h(E)[0].selected && h(u) === 1);
+    }
+  ), gt(), He();
+  var A = et(), O = be(A);
+  {
+    var R = (T) => {
+      var k = gp(), P = X(k);
+      pt(P, t, "default", {}), Z(k), vt(k, (H, I) => kr == null ? void 0 : kr(H, I), () => ({ domNode: a() })), Ee(
+        (H) => {
+          ce(k, "data-id", H), st(k, "position", "absolute"), st(k, "transform", h(N)), st(k, "z-index", h(l));
+        },
+        [
+          () => h(E).reduce((H, I) => `${H}${I.id} `, "").trim()
+        ],
+        pe
+      ), L(T, k);
+    };
+    ke(O, (T) => {
+      a() && h(c) && h(E) && T(R);
+    });
+  }
+  L(e, A);
+  var S = fe({
+    get nodeId() {
+      return f();
+    },
+    set nodeId(T) {
+      f(T), y();
+    },
+    get position() {
+      return d();
+    },
+    set position(T) {
+      d(T), y();
+    },
+    get align() {
+      return g();
+    },
+    set align(T) {
+      g(T), y();
+    },
+    get offset() {
+      return p();
+    },
+    set offset(T) {
+      p(T), y();
+    },
+    get isVisible() {
+      return x();
+    },
+    set isVisible(T) {
+      x(T), y();
+    }
+  });
+  return r(), S;
+}
+ae(
+  od,
+  {
+    nodeId: {},
+    position: {},
+    align: {},
+    offset: {},
+    isVisible: {}
+  },
+  ["default"],
+  [],
+  !0
+);
+function pr(e) {
+  const { nodes: t, nodeLookup: n } = Ue();
+  let r = [], o = !0;
+  return Kn([t, n], ([, i], s) => {
+    var c;
+    const a = [], l = Array.isArray(e), u = l ? e : [e];
+    for (const f of u) {
+      const d = (c = i.get(f)) == null ? void 0 : c.internals.userNode;
+      d && a.push({
+        id: d.id,
+        type: d.type,
+        data: d.data
+      });
+    }
+    (!z0(a, r) || o) && (r = a, s(l ? a : a[0] ?? null), o = !1);
+  });
+}
+const Ml = "tinyflow-component";
+class yw {
+  constructor(t) {
+    wt(this, "options");
+    wt(this, "rootEl");
+    wt(this, "svelteFlowInstance");
+    if (typeof t.element != "string" && !(t.element instanceof Element))
+      throw new Error("element must be a string or Element");
+    this._setOptions(t), this._init();
+  }
+  _init() {
+    if (typeof this.options.element == "string") {
+      if (this.rootEl = document.querySelector(this.options.element), !this.rootEl)
+        throw new Error(
+          `element not found by document.querySelector('${this.options.element}')`
+        );
+    } else if (this.options.element instanceof Element)
+      this.rootEl = this.options.element;
+    else
+      throw new Error("element must be a string or Element");
+    const t = document.createElement(Ml);
+    t.style.display = "block", t.style.width = "100%", t.style.height = "100%", t.classList.add("tf-theme-light"), t.options = this.options, t.onInit = (n) => {
+      this.svelteFlowInstance = n;
+    }, this.rootEl.appendChild(t);
+  }
+  _setOptions(t) {
+    this.options = {
+      ...t
+    };
+  }
+  getOptions() {
+    return this.options;
+  }
+  getData() {
+    return this.svelteFlowInstance.toObject();
+  }
+  setData(t) {
+    this.options.data = t;
+    const n = document.createElement(Ml);
+    n.style.display = "block", n.style.width = "100%", n.style.height = "100%", n.classList.add("tf-theme-light"), n.options = this.options, n.onInit = (r) => {
+      this.svelteFlowInstance = r;
+    }, this.destroy(), this.rootEl.appendChild(n);
+  }
+  destroy() {
+    for (; this.rootEl.firstChild; )
+      this.rootEl.removeChild(this.rootEl.firstChild);
+  }
+}
+const hp = () => {
+  const e = we([]), t = we([]), n = we({ x: 250, y: 100, zoom: 1 });
+  return {
+    nodes: e,
+    edges: t,
+    viewport: n,
+    init: (r, o) => {
+      e.set(r), t.set(o);
+    },
+    addNode: (r) => {
+      e.update((o) => [...o, r]);
+    },
+    removeNode: (r) => {
+      e.update((o) => o.filter((i) => i.id !== r));
+    },
+    updateNode: (r, o) => {
+      e.update((i) => i.map((s) => s.id === r ? o : s));
+    },
+    updateNodeData: (r, o) => {
+      e.update(
+        (i) => i.map((s) => s.id === r ? { ...s, data: { ...s.data, ...o } } : s)
+      );
+    },
+    selectNodeOnly: (r) => {
+      e.update(
+        (o) => o.map(
+          (i) => i.id === r ? { ...i, selected: !0 } : { ...i, selected: !1 }
+        )
+      );
+    },
+    addEdge: (r) => {
+      t.update((o) => [...o, r]);
+    },
+    removeEdge: (r) => {
+      t.update((o) => o.filter((i) => i.id !== r));
+    },
+    updateEdge: (r, o) => {
+      t.update((i) => i.map((s) => s.id === r ? o : s));
+    },
+    updateEdgeData: (r, o) => {
+      t.update((i) => i.map((s) => s.id === r ? { ...s, data: o } : s));
+    }
+  };
+}, ei = hp();
+var vp = /* @__PURE__ */ ne("<button><!></button>");
+function Ke(e, t) {
+  de(t, !0);
+  const n = w(t, "children", 7), r = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "children"
+  ]);
+  var o = vp();
+  let i;
+  var s = X(o);
+  return lr(s, () => n() ?? dt), Z(o), Ee(() => i = on(o, i, {
+    type: "button",
+    ...r,
+    class: `tf-btn nopan nodrag ${t.class ?? ""}`
+  })), L(e, o), fe({
+    get children() {
+      return n();
+    },
+    set children(a) {
+      n(a), y();
+    }
+  });
+}
+ae(Ke, { children: {} }, [], [], !0);
+var pp = /* @__PURE__ */ ne("<input>");
+function id(e, t) {
+  de(t, !0);
+  const n = /* @__PURE__ */ yt(t, ["$$slots", "$$events", "$$legacy", "$$host"]);
+  var r = pp();
+  io(r);
+  let o;
+  Ee(() => o = on(r, o, {
+    type: "checkbox",
+    ...n,
+    class: `tf-checkbox nopan nodrag ${t.class ?? ""}`
+  })), L(e, r), fe();
+}
+ae(id, {}, [], [], !0);
+var mp = /* @__PURE__ */ ne("<input>");
+function xt(e, t) {
+  de(t, !0);
+  const n = /* @__PURE__ */ yt(t, ["$$slots", "$$events", "$$legacy", "$$host"]);
+  var r = mp();
+  io(r);
+  let o;
+  Ee(() => o = on(r, o, {
+    type: "text",
+    ...n,
+    class: `tf-input  nopan nodrag ${t.class ?? ""}`
+  })), L(e, r), fe();
+}
+ae(xt, {}, [], [], !0);
+var yp = /* @__PURE__ */ ne("<textarea></textarea>");
+function $t(e, t) {
+  de(t, !0);
+  const n = /* @__PURE__ */ yt(t, ["$$slots", "$$events", "$$legacy", "$$host"]);
+  var r = yp();
+  l1(r);
+  let o;
+  Ee(() => o = on(r, o, {
+    ...n,
+    class: `tf-textarea nodrag ${t.class ?? ""}`
+  })), L(e, r), fe();
+}
+ae($t, {}, [], [], !0);
+var wp = /* @__PURE__ */ ne('<div role="button"><!></div>'), _p = /* @__PURE__ */ ne("<div></div>");
+function sd(e, t) {
+  const n = nt(t, [
+    "children",
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host"
+  ]), r = nt(n, ["items", "onChange", "activeIndex"]);
+  de(t, !1);
+  let o = w(t, "items", 28, () => []), i = w(t, "onChange", 12, () => {
+  }), s = w(t, "activeIndex", 12, 0);
+  function a(c, f) {
+    var d;
+    s(f), (d = i()) == null || d(c, f);
+  }
+  He();
+  var l = _p();
+  let u;
+  return Yt(l, 5, o, Li, (c, f, d) => {
+    var g = wp();
+    ce(g, "tabindex", d), g.__click = () => a(h(f), d), g.__keydown = ($) => {
+      ($.key === "Enter" || $.key === " ") && ($.preventDefault(), a(h(f), d));
+    };
+    var p = X(g);
+    {
+      var x = ($) => {
+        var m = Ie();
+        Ee(() => Rt(m, h(f).label)), L($, m);
+      }, C = ($) => {
+        var m = et(), _ = be(m);
+        lr(_, () => h(f).label ?? dt), L($, m);
+      };
+      ke(p, ($) => {
+        typeof h(f).label == "string" ? $(x) : $(C, !1);
+      });
+    }
+    Z(g), Ee(() => kt(g, 1, `tf-tabs-item ${(d === s() ? "active" : "") ?? ""}`)), L(c, g);
+  }), Z(l), Ee(() => u = on(l, u, {
+    ...r,
+    class: `tf-tabs ${r.class ?? ""}`
+  })), L(e, l), fe({
+    get items() {
+      return o();
+    },
+    set items(c) {
+      o(c), y();
+    },
+    get onChange() {
+      return i();
+    },
+    set onChange(c) {
+      i(c), y();
+    },
+    get activeIndex() {
+      return s();
+    },
+    set activeIndex(c) {
+      s(c), y();
+    }
+  });
+}
+Ai(["click", "keydown"]);
+ae(sd, { items: {}, onChange: {}, activeIndex: {} }, [], [], !0);
+var xp = (e, t, n) => t(h(n)), bp = (e, t, n) => {
+  (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t(h(n)));
+}, Cp = /* @__PURE__ */ ne('<span class="tf-collapse-item-title-icon"><!></span>'), kp = /* @__PURE__ */ ne('<div class="tf-collapse-item-description"><!></div>'), $p = /* @__PURE__ */ ne('<div class="tf-collapse-item-content"><!></div>'), Ep = /* @__PURE__ */ ne('<div class="tf-collapse-item"><div class="tf-collapse-item-title" role="button"><!> <!> <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></span></div> <!> <!></div>'), Sp = /* @__PURE__ */ ne("<div></div>");
+const Pp = {
+  hash: "svelte-1jfktzw",
+  code: `\r
+    /* 定义旋转的 CSS 类 */.rotate-90.svelte-1jfktzw {transform:rotate(90deg);transition:transform 0.3s ease;}`
+};
+function ad(e, t) {
+  de(t, !0), Je(e, Pp);
+  let n = w(t, "items", 7), r = w(t, "onChange", 7), o = w(t, "activeKeys", 31, () => Tt([]));
+  function i(a) {
+    var l;
+    o().includes(a.key) ? o(o().filter((u) => u !== a.key)) : (o().push(a.key), o(o())), (l = r()) == null || l(a, o());
+  }
+  var s = Sp();
+  return Yt(s, 21, n, Li, (a, l, u) => {
+    var c = Ep(), f = X(c);
+    ce(f, "tabindex", u), f.__click = [xp, i, l], f.__keydown = [bp, i, l];
+    var d = X(f);
+    {
+      var g = (v) => {
+        var b = Cp(), N = X(b);
+        Fn(N, {
+          get target() {
+            return h(l).icon;
+          }
+        }), Z(b), L(v, b);
+      };
+      ke(d, (v) => {
+        h(l).icon && v(g);
+      });
+    }
+    var p = z(d, 2);
+    Fn(p, {
+      get target() {
+        return h(l).title;
+      }
+    });
+    var x = z(p, 2);
+    Z(f);
+    var C = z(f, 2);
+    {
+      var $ = (v) => {
+        var b = kp(), N = X(b);
+        Fn(N, {
+          get target() {
+            return h(l).description;
+          }
+        }), Z(b), L(v, b);
+      };
+      ke(C, (v) => {
+        h(l).description && v($);
+      });
+    }
+    var m = z(C, 2);
+    {
+      var _ = (v) => {
+        var b = $p(), N = X(b);
+        Fn(N, {
+          get target() {
+            return h(l).content;
+          }
+        }), Z(b), L(v, b);
+      };
+      ke(m, (v) => {
+        o().includes(h(l).key) && v(_);
+      });
+    }
+    Z(c), Ee((v) => kt(x, 1, `tf-collapse-item-title-arrow ${v ?? ""}`, "svelte-1jfktzw"), [
+      () => o().includes(h(l).key) ? "rotate-90" : ""
+    ]), L(a, c);
+  }), Z(s), Ee(() => {
+    ce(s, "style", t.style), kt(s, 1, `tf-collapse ${t.class ?? ""}`, "svelte-1jfktzw");
+  }), L(e, s), fe({
+    get items() {
+      return n();
+    },
+    set items(a) {
+      n(a), y();
+    },
+    get onChange() {
+      return r();
+    },
+    set onChange(a) {
+      r(a), y();
+    },
+    get activeKeys() {
+      return o();
+    },
+    set activeKeys(a = []) {
+      o(a), y();
+    }
+  });
+}
+Ai(["click", "keydown"]);
+ae(ad, { items: {}, onChange: {}, activeKeys: {} }, [], [], !0);
+function Fn(e, t) {
+  de(t, !0);
+  let n = w(t, "target", 7);
+  typeof n() > "u" && n("undefined");
+  var r = et(), o = be(r);
+  {
+    var i = (a) => {
+      var l = et(), u = be(l);
+      lr(u, () => n() ?? dt), L(a, l);
+    }, s = (a) => {
+      var l = et(), u = be(l);
+      mu(u, n), L(a, l);
+    };
+    ke(o, (a) => {
+      typeof n() == "function" ? a(i) : a(s, !1);
+    });
+  }
+  return L(e, r), fe({
+    get target() {
+      return n();
+    },
+    set target(a) {
+      n(a), y();
+    }
+  });
+}
+ae(Fn, { target: {} }, [], [], !0);
+var Np = (e, t, n) => t(h(n)), Mp = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 14L8 10H16L12 14Z"></path></svg>'), Tp = /* @__PURE__ */ ne('<div class="tf-select-content-children"><!></div>'), Hp = /* @__PURE__ */ ne('<button class="tf-select-content-item"><span><!></span> <!></button> <!>', 1), Vp = /* @__PURE__ */ ne('<div class="tf-select-content nopan nodrag"><!></div>'), Dp = /* @__PURE__ */ ne("<!> <!>", 1), Ap = /* @__PURE__ */ ne('<div class="tf-select-input-placeholder"> </div>'), Lp = /* @__PURE__ */ ne('<button><div class="tf-select-input-value"></div> <div class="tf-select-input-arrow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg></div></button>'), Op = /* @__PURE__ */ ne("<div><!></div>");
+function sn(e, t) {
+  de(t, !0);
+  const n = (_, v = dt) => {
+    var b = et(), N = be(b);
+    Yt(N, 19, v, (E, M) => `${M}_${E.value}`, (E, M) => {
+      var D = Hp(), V = be(D);
+      V.__click = [Np, x, M];
+      var A = X(V), O = X(A);
+      {
+        var R = (P) => {
+          var H = Mp();
+          L(P, H);
+        };
+        ke(O, (P) => {
+          h(M).children && h(M).children.length > 0 && P(R);
+        });
+      }
+      Z(A);
+      var S = z(A, 2);
+      Fn(S, {
+        get target() {
+          return h(M).label;
+        }
+      }), Z(V);
+      var T = z(V, 2);
+      {
+        var k = (P) => {
+          var H = Tp(), I = X(H);
+          n(I, () => h(M).children), Z(H), L(P, H);
+        };
+        ke(T, (P) => {
+          h(M).children && h(M).children.length > 0 && (l() || c().includes(h(M).value)) && P(k);
+        });
+      }
+      L(E, D);
+    }), L(_, b);
+  };
+  let r = w(t, "items", 7), o = w(t, "onExpand", 7), i = w(t, "onSelect", 7), s = w(t, "value", 23, () => []), a = w(t, "defaultValue", 23, () => []), l = w(t, "expandAll", 7, !0), u = w(t, "multiple", 7, !1), c = w(t, "expandValue", 23, () => []), f = w(t, "placeholder", 7), d = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "items",
+    "onExpand",
+    "onSelect",
+    "value",
+    "defaultValue",
+    "expandAll",
+    "multiple",
+    "expandValue",
+    "placeholder"
+  ]), g = /* @__PURE__ */ Me(() => {
+    const _ = [], v = (b) => {
+      for (let N of b)
+        s().length > 0 ? s().includes(N.value) && _.push(N) : a().includes(N.value) && _.push(N), N.children && N.children.length > 0 && v(N.children);
+    };
+    return v(r()), _;
+  }), p;
+  function x(_) {
+    var v, b;
+    if (_.children && _.children.length > 0) {
+      (v = o()) == null || v(_);
+      return;
+    } else
+      p == null || p.hide(), (b = i()) == null || b(_);
+  }
+  var C = Op();
+  let $;
+  var m = X(C);
+  return An(
+    Lo(m, {
+      floating: (v) => {
+        var b = Vp(), N = X(b);
+        n(N, r), Z(b), L(v, b);
+      },
+      children: (v, b) => {
+        var N = Lp();
+        let E;
+        var M = X(N);
+        Yt(
+          M,
+          23,
+          () => h(g),
+          (D, V) => `${V}_${D.value}`,
+          (D, V, A) => {
+            var O = et(), R = be(O);
+            {
+              var S = (k) => {
+                var P = et(), H = be(P);
+                {
+                  var I = (B) => {
+                    Fn(B, {
+                      get target() {
+                        return h(V).label;
+                      }
+                    });
+                  };
+                  ke(H, (B) => {
+                    h(A) === 0 && B(I);
+                  });
+                }
+                L(k, P);
+              }, T = (k) => {
+                var P = Dp(), H = be(P);
+                Fn(H, {
+                  get target() {
+                    return h(V).label;
+                  }
+                });
+                var I = z(H, 2);
+                {
+                  var B = (F) => {
+                    var K = Ie(",");
+                    L(F, K);
+                  };
+                  ke(I, (F) => {
+                    h(A) < h(g).length - 1 && F(B);
+                  });
+                }
+                L(k, P);
+              };
+              ke(R, (k) => {
+                u() ? k(T, !1) : k(S);
+              });
+            }
+            L(D, O);
+          },
+          (D) => {
+            var V = Ap(), A = X(V, !0);
+            Z(V), Ee(() => Rt(A, f())), L(D, V);
+          }
+        ), Z(M), Se(2), Z(N), Ee(() => E = on(N, E, {
+          class: "tf-select-input nopan nodrag",
+          ...d
+        })), L(v, N);
+      },
+      $$slots: { floating: !0, default: !0 }
+    }),
+    (v) => p = v,
+    () => p
+  ), Z(C), Ee(() => $ = on(C, $, {
+    ...d,
+    class: `tf-select ${d.class ?? ""}`
+  })), L(e, C), fe({
+    get items() {
+      return r();
+    },
+    set items(_) {
+      r(_), y();
+    },
+    get onExpand() {
+      return o();
+    },
+    set onExpand(_) {
+      o(_), y();
+    },
+    get onSelect() {
+      return i();
+    },
+    set onSelect(_) {
+      i(_), y();
+    },
+    get value() {
+      return s();
+    },
+    set value(_ = []) {
+      s(_), y();
+    },
+    get defaultValue() {
+      return a();
+    },
+    set defaultValue(_ = []) {
+      a(_), y();
+    },
+    get expandAll() {
+      return l();
+    },
+    set expandAll(_ = !0) {
+      l(_), y();
+    },
+    get multiple() {
+      return u();
+    },
+    set multiple(_ = !1) {
+      u(_), y();
+    },
+    get expandValue() {
+      return c();
+    },
+    set expandValue(_ = []) {
+      c(_), y();
+    },
+    get placeholder() {
+      return f();
+    },
+    set placeholder(_) {
+      f(_), y();
+    }
+  });
+}
+Ai(["click"]);
+ae(
+  sn,
+  {
+    items: {},
+    onExpand: {},
+    onSelect: {},
+    value: {},
+    defaultValue: {},
+    expandAll: {},
+    multiple: {},
+    expandValue: {},
+    placeholder: {}
+  },
+  [],
+  [],
+  !0
+);
+const _o = Math.min, Er = Math.max, bi = Math.round, mn = (e) => ({
+  x: e,
+  y: e
+}), Ip = {
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
+}, zp = {
+  start: "end",
+  end: "start"
+};
+function Ds(e, t, n) {
+  return Er(e, _o(t, n));
+}
+function Vo(e, t) {
+  return typeof e == "function" ? e(t) : e;
+}
+function fr(e) {
+  return e.split("-")[0];
+}
+function Do(e) {
+  return e.split("-")[1];
+}
+function ld(e) {
+  return e === "x" ? "y" : "x";
+}
+function va(e) {
+  return e === "y" ? "height" : "width";
+}
+function Ir(e) {
+  return ["top", "bottom"].includes(fr(e)) ? "y" : "x";
+}
+function pa(e) {
+  return ld(Ir(e));
+}
+function Rp(e, t, n) {
+  n === void 0 && (n = !1);
+  const r = Do(e), o = pa(e), i = va(o);
+  let s = o === "x" ? r === (n ? "end" : "start") ? "right" : "left" : r === "start" ? "bottom" : "top";
+  return t.reference[i] > t.floating[i] && (s = Ci(s)), [s, Ci(s)];
+}
+function Bp(e) {
+  const t = Ci(e);
+  return [As(e), t, As(t)];
+}
+function As(e) {
+  return e.replace(/start|end/g, (t) => zp[t]);
+}
+function Yp(e, t, n) {
+  const r = ["left", "right"], o = ["right", "left"], i = ["top", "bottom"], s = ["bottom", "top"];
+  switch (e) {
+    case "top":
+    case "bottom":
+      return n ? t ? o : r : t ? r : o;
+    case "left":
+    case "right":
+      return t ? i : s;
+    default:
+      return [];
+  }
+}
+function Zp(e, t, n, r) {
+  const o = Do(e);
+  let i = Yp(fr(e), n === "start", r);
+  return o && (i = i.map((s) => s + "-" + o), t && (i = i.concat(i.map(As)))), i;
+}
+function Ci(e) {
+  return e.replace(/left|right|bottom|top/g, (t) => Ip[t]);
+}
+function Xp(e) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...e
+  };
+}
+function ud(e) {
+  return typeof e != "number" ? Xp(e) : {
+    top: e,
+    right: e,
+    bottom: e,
+    left: e
+  };
+}
+function ki(e) {
+  const {
+    x: t,
+    y: n,
+    width: r,
+    height: o
+  } = e;
+  return {
+    width: r,
+    height: o,
+    top: n,
+    left: t,
+    right: t + r,
+    bottom: n + o,
+    x: t,
+    y: n
+  };
+}
+function Tl(e, t, n) {
+  let {
+    reference: r,
+    floating: o
+  } = e;
+  const i = Ir(t), s = pa(t), a = va(s), l = fr(t), u = i === "y", c = r.x + r.width / 2 - o.width / 2, f = r.y + r.height / 2 - o.height / 2, d = r[a] / 2 - o[a] / 2;
+  let g;
+  switch (l) {
+    case "top":
+      g = {
+        x: c,
+        y: r.y - o.height
+      };
+      break;
+    case "bottom":
+      g = {
+        x: c,
+        y: r.y + r.height
+      };
+      break;
+    case "right":
+      g = {
+        x: r.x + r.width,
+        y: f
+      };
+      break;
+    case "left":
+      g = {
+        x: r.x - o.width,
+        y: f
+      };
+      break;
+    default:
+      g = {
+        x: r.x,
+        y: r.y
+      };
+  }
+  switch (Do(t)) {
+    case "start":
+      g[s] -= d * (n && u ? -1 : 1);
+      break;
+    case "end":
+      g[s] += d * (n && u ? -1 : 1);
+      break;
+  }
+  return g;
+}
+const Fp = async (e, t, n) => {
+  const {
+    placement: r = "bottom",
+    strategy: o = "absolute",
+    middleware: i = [],
+    platform: s
+  } = n, a = i.filter(Boolean), l = await (s.isRTL == null ? void 0 : s.isRTL(t));
+  let u = await s.getElementRects({
+    reference: e,
+    floating: t,
+    strategy: o
+  }), {
+    x: c,
+    y: f
+  } = Tl(u, r, l), d = r, g = {}, p = 0;
+  for (let x = 0; x < a.length; x++) {
+    const {
+      name: C,
+      fn: $
+    } = a[x], {
+      x: m,
+      y: _,
+      data: v,
+      reset: b
+    } = await $({
+      x: c,
+      y: f,
+      initialPlacement: r,
+      placement: d,
+      strategy: o,
+      middlewareData: g,
+      rects: u,
+      platform: s,
+      elements: {
+        reference: e,
+        floating: t
+      }
+    });
+    c = m ?? c, f = _ ?? f, g = {
+      ...g,
+      [C]: {
+        ...g[C],
+        ...v
+      }
+    }, b && p <= 50 && (p++, typeof b == "object" && (b.placement && (d = b.placement), b.rects && (u = b.rects === !0 ? await s.getElementRects({
+      reference: e,
+      floating: t,
+      strategy: o
+    }) : b.rects), {
+      x: c,
+      y: f
+    } = Tl(u, d, l)), x = -1);
+  }
+  return {
+    x: c,
+    y: f,
+    placement: d,
+    strategy: o,
+    middlewareData: g
+  };
+};
+async function cd(e, t) {
+  var n;
+  t === void 0 && (t = {});
+  const {
+    x: r,
+    y: o,
+    platform: i,
+    rects: s,
+    elements: a,
+    strategy: l
+  } = e, {
+    boundary: u = "clippingAncestors",
+    rootBoundary: c = "viewport",
+    elementContext: f = "floating",
+    altBoundary: d = !1,
+    padding: g = 0
+  } = Vo(t, e), p = ud(g), C = a[d ? f === "floating" ? "reference" : "floating" : f], $ = ki(await i.getClippingRect({
+    element: (n = await (i.isElement == null ? void 0 : i.isElement(C))) == null || n ? C : C.contextElement || await (i.getDocumentElement == null ? void 0 : i.getDocumentElement(a.floating)),
+    boundary: u,
+    rootBoundary: c,
+    strategy: l
+  })), m = f === "floating" ? {
+    x: r,
+    y: o,
+    width: s.floating.width,
+    height: s.floating.height
+  } : s.reference, _ = await (i.getOffsetParent == null ? void 0 : i.getOffsetParent(a.floating)), v = await (i.isElement == null ? void 0 : i.isElement(_)) ? await (i.getScale == null ? void 0 : i.getScale(_)) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  }, b = ki(i.convertOffsetParentRelativeRectToViewportRelativeRect ? await i.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements: a,
+    rect: m,
+    offsetParent: _,
+    strategy: l
+  }) : m);
+  return {
+    top: ($.top - b.top + p.top) / v.y,
+    bottom: (b.bottom - $.bottom + p.bottom) / v.y,
+    left: ($.left - b.left + p.left) / v.x,
+    right: (b.right - $.right + p.right) / v.x
+  };
+}
+const Wp = (e) => ({
+  name: "arrow",
+  options: e,
+  async fn(t) {
+    const {
+      x: n,
+      y: r,
+      placement: o,
+      rects: i,
+      platform: s,
+      elements: a,
+      middlewareData: l
+    } = t, {
+      element: u,
+      padding: c = 0
+    } = Vo(e, t) || {};
+    if (u == null)
+      return {};
+    const f = ud(c), d = {
+      x: n,
+      y: r
+    }, g = pa(o), p = va(g), x = await s.getDimensions(u), C = g === "y", $ = C ? "top" : "left", m = C ? "bottom" : "right", _ = C ? "clientHeight" : "clientWidth", v = i.reference[p] + i.reference[g] - d[g] - i.floating[p], b = d[g] - i.reference[g], N = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(u));
+    let E = N ? N[_] : 0;
+    (!E || !await (s.isElement == null ? void 0 : s.isElement(N))) && (E = a.floating[_] || i.floating[p]);
+    const M = v / 2 - b / 2, D = E / 2 - x[p] / 2 - 1, V = _o(f[$], D), A = _o(f[m], D), O = V, R = E - x[p] - A, S = E / 2 - x[p] / 2 + M, T = Ds(O, S, R), k = !l.arrow && Do(o) != null && S !== T && i.reference[p] / 2 - (S < O ? V : A) - x[p] / 2 < 0, P = k ? S < O ? S - O : S - R : 0;
+    return {
+      [g]: d[g] + P,
+      data: {
+        [g]: T,
+        centerOffset: S - T - P,
+        ...k && {
+          alignmentOffset: P
+        }
+      },
+      reset: k
+    };
+  }
+}), Kp = function(e) {
+  return e === void 0 && (e = {}), {
+    name: "flip",
+    options: e,
+    async fn(t) {
+      var n, r;
+      const {
+        placement: o,
+        middlewareData: i,
+        rects: s,
+        initialPlacement: a,
+        platform: l,
+        elements: u
+      } = t, {
+        mainAxis: c = !0,
+        crossAxis: f = !0,
+        fallbackPlacements: d,
+        fallbackStrategy: g = "bestFit",
+        fallbackAxisSideDirection: p = "none",
+        flipAlignment: x = !0,
+        ...C
+      } = Vo(e, t);
+      if ((n = i.arrow) != null && n.alignmentOffset)
+        return {};
+      const $ = fr(o), m = Ir(a), _ = fr(a) === a, v = await (l.isRTL == null ? void 0 : l.isRTL(u.floating)), b = d || (_ || !x ? [Ci(a)] : Bp(a)), N = p !== "none";
+      !d && N && b.push(...Zp(a, x, p, v));
+      const E = [a, ...b], M = await cd(t, C), D = [];
+      let V = ((r = i.flip) == null ? void 0 : r.overflows) || [];
+      if (c && D.push(M[$]), f) {
+        const S = Rp(o, s, v);
+        D.push(M[S[0]], M[S[1]]);
+      }
+      if (V = [...V, {
+        placement: o,
+        overflows: D
+      }], !D.every((S) => S <= 0)) {
+        var A, O;
+        const S = (((A = i.flip) == null ? void 0 : A.index) || 0) + 1, T = E[S];
+        if (T)
+          return {
+            data: {
+              index: S,
+              overflows: V
+            },
+            reset: {
+              placement: T
+            }
+          };
+        let k = (O = V.filter((P) => P.overflows[0] <= 0).sort((P, H) => P.overflows[1] - H.overflows[1])[0]) == null ? void 0 : O.placement;
+        if (!k)
+          switch (g) {
+            case "bestFit": {
+              var R;
+              const P = (R = V.filter((H) => {
+                if (N) {
+                  const I = Ir(H.placement);
+                  return I === m || // Create a bias to the `y` side axis due to horizontal
+                  // reading directions favoring greater width.
+                  I === "y";
+                }
+                return !0;
+              }).map((H) => [H.placement, H.overflows.filter((I) => I > 0).reduce((I, B) => I + B, 0)]).sort((H, I) => H[1] - I[1])[0]) == null ? void 0 : R[0];
+              P && (k = P);
+              break;
+            }
+            case "initialPlacement":
+              k = a;
+              break;
+          }
+        if (o !== k)
+          return {
+            reset: {
+              placement: k
+            }
+          };
+      }
+      return {};
+    }
+  };
+};
+async function qp(e, t) {
+  const {
+    placement: n,
+    platform: r,
+    elements: o
+  } = e, i = await (r.isRTL == null ? void 0 : r.isRTL(o.floating)), s = fr(n), a = Do(n), l = Ir(n) === "y", u = ["left", "top"].includes(s) ? -1 : 1, c = i && l ? -1 : 1, f = Vo(t, e);
+  let {
+    mainAxis: d,
+    crossAxis: g,
+    alignmentAxis: p
+  } = typeof f == "number" ? {
+    mainAxis: f,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: f.mainAxis || 0,
+    crossAxis: f.crossAxis || 0,
+    alignmentAxis: f.alignmentAxis
+  };
+  return a && typeof p == "number" && (g = a === "end" ? p * -1 : p), l ? {
+    x: g * c,
+    y: d * u
+  } : {
+    x: d * u,
+    y: g * c
+  };
+}
+const Gp = function(e) {
+  return e === void 0 && (e = 0), {
+    name: "offset",
+    options: e,
+    async fn(t) {
+      var n, r;
+      const {
+        x: o,
+        y: i,
+        placement: s,
+        middlewareData: a
+      } = t, l = await qp(t, e);
+      return s === ((n = a.offset) == null ? void 0 : n.placement) && (r = a.arrow) != null && r.alignmentOffset ? {} : {
+        x: o + l.x,
+        y: i + l.y,
+        data: {
+          ...l,
+          placement: s
+        }
+      };
+    }
+  };
+}, Up = function(e) {
+  return e === void 0 && (e = {}), {
+    name: "shift",
+    options: e,
+    async fn(t) {
+      const {
+        x: n,
+        y: r,
+        placement: o
+      } = t, {
+        mainAxis: i = !0,
+        crossAxis: s = !1,
+        limiter: a = {
+          fn: (C) => {
+            let {
+              x: $,
+              y: m
+            } = C;
+            return {
+              x: $,
+              y: m
+            };
+          }
+        },
+        ...l
+      } = Vo(e, t), u = {
+        x: n,
+        y: r
+      }, c = await cd(t, l), f = Ir(fr(o)), d = ld(f);
+      let g = u[d], p = u[f];
+      if (i) {
+        const C = d === "y" ? "top" : "left", $ = d === "y" ? "bottom" : "right", m = g + c[C], _ = g - c[$];
+        g = Ds(m, g, _);
+      }
+      if (s) {
+        const C = f === "y" ? "top" : "left", $ = f === "y" ? "bottom" : "right", m = p + c[C], _ = p - c[$];
+        p = Ds(m, p, _);
+      }
+      const x = a.fn({
+        ...t,
+        [d]: g,
+        [f]: p
+      });
+      return {
+        ...x,
+        data: {
+          x: x.x - n,
+          y: x.y - r,
+          enabled: {
+            [d]: i,
+            [f]: s
+          }
+        }
+      };
+    }
+  };
+};
+function Ki() {
+  return typeof window < "u";
+}
+function Wr(e) {
+  return dd(e) ? (e.nodeName || "").toLowerCase() : "#document";
+}
+function Bt(e) {
+  var t;
+  return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
+}
+function zn(e) {
+  var t;
+  return (t = (dd(e) ? e.ownerDocument : e.document) || window.document) == null ? void 0 : t.documentElement;
+}
+function dd(e) {
+  return Ki() ? e instanceof Node || e instanceof Bt(e).Node : !1;
+}
+function an(e) {
+  return Ki() ? e instanceof Element || e instanceof Bt(e).Element : !1;
+}
+function _n(e) {
+  return Ki() ? e instanceof HTMLElement || e instanceof Bt(e).HTMLElement : !1;
+}
+function Hl(e) {
+  return !Ki() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof Bt(e).ShadowRoot;
+}
+function Ao(e) {
+  const {
+    overflow: t,
+    overflowX: n,
+    overflowY: r,
+    display: o
+  } = ln(e);
+  return /auto|scroll|overlay|hidden|clip/.test(t + r + n) && !["inline", "contents"].includes(o);
+}
+function jp(e) {
+  return ["table", "td", "th"].includes(Wr(e));
+}
+function qi(e) {
+  return [":popover-open", ":modal"].some((t) => {
+    try {
+      return e.matches(t);
+    } catch {
+      return !1;
+    }
+  });
+}
+function ma(e) {
+  const t = ya(), n = an(e) ? ln(e) : e;
+  return ["transform", "translate", "scale", "rotate", "perspective"].some((r) => n[r] ? n[r] !== "none" : !1) || (n.containerType ? n.containerType !== "normal" : !1) || !t && (n.backdropFilter ? n.backdropFilter !== "none" : !1) || !t && (n.filter ? n.filter !== "none" : !1) || ["transform", "translate", "scale", "rotate", "perspective", "filter"].some((r) => (n.willChange || "").includes(r)) || ["paint", "layout", "strict", "content"].some((r) => (n.contain || "").includes(r));
+}
+function Jp(e) {
+  let t = er(e);
+  for (; _n(t) && !zr(t); ) {
+    if (ma(t))
+      return t;
+    if (qi(t))
+      return null;
+    t = er(t);
+  }
+  return null;
+}
+function ya() {
+  return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
+}
+function zr(e) {
+  return ["html", "body", "#document"].includes(Wr(e));
+}
+function ln(e) {
+  return Bt(e).getComputedStyle(e);
+}
+function Gi(e) {
+  return an(e) ? {
+    scrollLeft: e.scrollLeft,
+    scrollTop: e.scrollTop
+  } : {
+    scrollLeft: e.scrollX,
+    scrollTop: e.scrollY
+  };
+}
+function er(e) {
+  if (Wr(e) === "html")
+    return e;
+  const t = (
+    // Step into the shadow DOM of the parent of a slotted node.
+    e.assignedSlot || // DOM Element detected.
+    e.parentNode || // ShadowRoot detected.
+    Hl(e) && e.host || // Fallback.
+    zn(e)
+  );
+  return Hl(t) ? t.host : t;
+}
+function fd(e) {
+  const t = er(e);
+  return zr(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : _n(t) && Ao(t) ? t : fd(t);
+}
+function gd(e, t, n) {
+  var r;
+  t === void 0 && (t = []);
+  const o = fd(e), i = o === ((r = e.ownerDocument) == null ? void 0 : r.body), s = Bt(o);
+  return i ? (Ls(s), t.concat(s, s.visualViewport || [], Ao(o) ? o : [], [])) : t.concat(o, gd(o, []));
+}
+function Ls(e) {
+  return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null;
+}
+function hd(e) {
+  const t = ln(e);
+  let n = parseFloat(t.width) || 0, r = parseFloat(t.height) || 0;
+  const o = _n(e), i = o ? e.offsetWidth : n, s = o ? e.offsetHeight : r, a = bi(n) !== i || bi(r) !== s;
+  return a && (n = i, r = s), {
+    width: n,
+    height: r,
+    $: a
+  };
+}
+function vd(e) {
+  return an(e) ? e : e.contextElement;
+}
+function Sr(e) {
+  const t = vd(e);
+  if (!_n(t))
+    return mn(1);
+  const n = t.getBoundingClientRect(), {
+    width: r,
+    height: o,
+    $: i
+  } = hd(t);
+  let s = (i ? bi(n.width) : n.width) / r, a = (i ? bi(n.height) : n.height) / o;
+  return (!s || !Number.isFinite(s)) && (s = 1), (!a || !Number.isFinite(a)) && (a = 1), {
+    x: s,
+    y: a
+  };
+}
+const Qp = /* @__PURE__ */ mn(0);
+function pd(e) {
+  const t = Bt(e);
+  return !ya() || !t.visualViewport ? Qp : {
+    x: t.visualViewport.offsetLeft,
+    y: t.visualViewport.offsetTop
+  };
+}
+function em(e, t, n) {
+  return t === void 0 && (t = !1), !n || t && n !== Bt(e) ? !1 : t;
+}
+function xo(e, t, n, r) {
+  t === void 0 && (t = !1), n === void 0 && (n = !1);
+  const o = e.getBoundingClientRect(), i = vd(e);
+  let s = mn(1);
+  t && (r ? an(r) && (s = Sr(r)) : s = Sr(e));
+  const a = em(i, n, r) ? pd(i) : mn(0);
+  let l = (o.left + a.x) / s.x, u = (o.top + a.y) / s.y, c = o.width / s.x, f = o.height / s.y;
+  if (i) {
+    const d = Bt(i), g = r && an(r) ? Bt(r) : r;
+    let p = d, x = Ls(p);
+    for (; x && r && g !== p; ) {
+      const C = Sr(x), $ = x.getBoundingClientRect(), m = ln(x), _ = $.left + (x.clientLeft + parseFloat(m.paddingLeft)) * C.x, v = $.top + (x.clientTop + parseFloat(m.paddingTop)) * C.y;
+      l *= C.x, u *= C.y, c *= C.x, f *= C.y, l += _, u += v, p = Bt(x), x = Ls(p);
+    }
+  }
+  return ki({
+    width: c,
+    height: f,
+    x: l,
+    y: u
+  });
+}
+function wa(e, t) {
+  const n = Gi(e).scrollLeft;
+  return t ? t.left + n : xo(zn(e)).left + n;
+}
+function md(e, t, n) {
+  n === void 0 && (n = !1);
+  const r = e.getBoundingClientRect(), o = r.left + t.scrollLeft - (n ? 0 : (
+    // RTL <body> scrollbar.
+    wa(e, r)
+  )), i = r.top + t.scrollTop;
+  return {
+    x: o,
+    y: i
+  };
+}
+function tm(e) {
+  let {
+    elements: t,
+    rect: n,
+    offsetParent: r,
+    strategy: o
+  } = e;
+  const i = o === "fixed", s = zn(r), a = t ? qi(t.floating) : !1;
+  if (r === s || a && i)
+    return n;
+  let l = {
+    scrollLeft: 0,
+    scrollTop: 0
+  }, u = mn(1);
+  const c = mn(0), f = _n(r);
+  if ((f || !f && !i) && ((Wr(r) !== "body" || Ao(s)) && (l = Gi(r)), _n(r))) {
+    const g = xo(r);
+    u = Sr(r), c.x = g.x + r.clientLeft, c.y = g.y + r.clientTop;
+  }
+  const d = s && !f && !i ? md(s, l, !0) : mn(0);
+  return {
+    width: n.width * u.x,
+    height: n.height * u.y,
+    x: n.x * u.x - l.scrollLeft * u.x + c.x + d.x,
+    y: n.y * u.y - l.scrollTop * u.y + c.y + d.y
+  };
+}
+function nm(e) {
+  return Array.from(e.getClientRects());
+}
+function rm(e) {
+  const t = zn(e), n = Gi(e), r = e.ownerDocument.body, o = Er(t.scrollWidth, t.clientWidth, r.scrollWidth, r.clientWidth), i = Er(t.scrollHeight, t.clientHeight, r.scrollHeight, r.clientHeight);
+  let s = -n.scrollLeft + wa(e);
+  const a = -n.scrollTop;
+  return ln(r).direction === "rtl" && (s += Er(t.clientWidth, r.clientWidth) - o), {
+    width: o,
+    height: i,
+    x: s,
+    y: a
+  };
+}
+function om(e, t) {
+  const n = Bt(e), r = zn(e), o = n.visualViewport;
+  let i = r.clientWidth, s = r.clientHeight, a = 0, l = 0;
+  if (o) {
+    i = o.width, s = o.height;
+    const u = ya();
+    (!u || u && t === "fixed") && (a = o.offsetLeft, l = o.offsetTop);
+  }
+  return {
+    width: i,
+    height: s,
+    x: a,
+    y: l
+  };
+}
+function im(e, t) {
+  const n = xo(e, !0, t === "fixed"), r = n.top + e.clientTop, o = n.left + e.clientLeft, i = _n(e) ? Sr(e) : mn(1), s = e.clientWidth * i.x, a = e.clientHeight * i.y, l = o * i.x, u = r * i.y;
+  return {
+    width: s,
+    height: a,
+    x: l,
+    y: u
+  };
+}
+function Vl(e, t, n) {
+  let r;
+  if (t === "viewport")
+    r = om(e, n);
+  else if (t === "document")
+    r = rm(zn(e));
+  else if (an(t))
+    r = im(t, n);
+  else {
+    const o = pd(e);
+    r = {
+      x: t.x - o.x,
+      y: t.y - o.y,
+      width: t.width,
+      height: t.height
+    };
+  }
+  return ki(r);
+}
+function yd(e, t) {
+  const n = er(e);
+  return n === t || !an(n) || zr(n) ? !1 : ln(n).position === "fixed" || yd(n, t);
+}
+function sm(e, t) {
+  const n = t.get(e);
+  if (n)
+    return n;
+  let r = gd(e, []).filter((a) => an(a) && Wr(a) !== "body"), o = null;
+  const i = ln(e).position === "fixed";
+  let s = i ? er(e) : e;
+  for (; an(s) && !zr(s); ) {
+    const a = ln(s), l = ma(s);
+    !l && a.position === "fixed" && (o = null), (i ? !l && !o : !l && a.position === "static" && !!o && ["absolute", "fixed"].includes(o.position) || Ao(s) && !l && yd(e, s)) ? r = r.filter((c) => c !== s) : o = a, s = er(s);
+  }
+  return t.set(e, r), r;
+}
+function am(e) {
+  let {
+    element: t,
+    boundary: n,
+    rootBoundary: r,
+    strategy: o
+  } = e;
+  const s = [...n === "clippingAncestors" ? qi(t) ? [] : sm(t, this._c) : [].concat(n), r], a = s[0], l = s.reduce((u, c) => {
+    const f = Vl(t, c, o);
+    return u.top = Er(f.top, u.top), u.right = _o(f.right, u.right), u.bottom = _o(f.bottom, u.bottom), u.left = Er(f.left, u.left), u;
+  }, Vl(t, a, o));
+  return {
+    width: l.right - l.left,
+    height: l.bottom - l.top,
+    x: l.left,
+    y: l.top
+  };
+}
+function lm(e) {
+  const {
+    width: t,
+    height: n
+  } = hd(e);
+  return {
+    width: t,
+    height: n
+  };
+}
+function um(e, t, n) {
+  const r = _n(t), o = zn(t), i = n === "fixed", s = xo(e, !0, i, t);
+  let a = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const l = mn(0);
+  if (r || !r && !i)
+    if ((Wr(t) !== "body" || Ao(o)) && (a = Gi(t)), r) {
+      const d = xo(t, !0, i, t);
+      l.x = d.x + t.clientLeft, l.y = d.y + t.clientTop;
+    } else o && (l.x = wa(o));
+  const u = o && !r && !i ? md(o, a) : mn(0), c = s.left + a.scrollLeft - l.x - u.x, f = s.top + a.scrollTop - l.y - u.y;
+  return {
+    x: c,
+    y: f,
+    width: s.width,
+    height: s.height
+  };
+}
+function fs(e) {
+  return ln(e).position === "static";
+}
+function Dl(e, t) {
+  if (!_n(e) || ln(e).position === "fixed")
+    return null;
+  if (t)
+    return t(e);
+  let n = e.offsetParent;
+  return zn(e) === n && (n = n.ownerDocument.body), n;
+}
+function wd(e, t) {
+  const n = Bt(e);
+  if (qi(e))
+    return n;
+  if (!_n(e)) {
+    let o = er(e);
+    for (; o && !zr(o); ) {
+      if (an(o) && !fs(o))
+        return o;
+      o = er(o);
+    }
+    return n;
+  }
+  let r = Dl(e, t);
+  for (; r && jp(r) && fs(r); )
+    r = Dl(r, t);
+  return r && zr(r) && fs(r) && !ma(r) ? n : r || Jp(e) || n;
+}
+const cm = async function(e) {
+  const t = this.getOffsetParent || wd, n = this.getDimensions, r = await n(e.floating);
+  return {
+    reference: um(e.reference, await t(e.floating), e.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      width: r.width,
+      height: r.height
+    }
+  };
+};
+function dm(e) {
+  return ln(e).direction === "rtl";
+}
+const fm = {
+  convertOffsetParentRelativeRectToViewportRelativeRect: tm,
+  getDocumentElement: zn,
+  getClippingRect: am,
+  getOffsetParent: wd,
+  getElementRects: cm,
+  getClientRects: nm,
+  getDimensions: lm,
+  getScale: Sr,
+  isElement: an,
+  isRTL: dm
+}, gm = Gp, hm = Up, vm = Kp, pm = Wp, mm = (e, t, n) => {
+  const r = /* @__PURE__ */ new Map(), o = {
+    platform: fm,
+    ...n
+  }, i = {
+    ...o.platform,
+    _c: r
+  };
+  return Fp(e, t, {
+    ...o,
+    platform: i
+  });
+}, ym = ({
+  trigger: e,
+  triggerEvent: t,
+  floatContent: n,
+  placement: r = "bottom",
+  offsetOptions: o,
+  flipOptions: i,
+  shiftOptions: s,
+  interactive: a,
+  showArrow: l
+}) => {
+  if (typeof e == "string") {
+    const $ = document.querySelector(e);
+    if ($)
+      e = $;
+    else
+      throw new Error("element not found by document.querySelector('" + e + "')");
+  }
+  let u;
+  if (typeof n == "string") {
+    const $ = document.querySelector(n);
+    if ($)
+      u = $;
+    else
+      throw new Error("element not found by document.querySelector('" + n + "')");
+  } else
+    u = n;
+  let c;
+  l && (c = document.createElement("div"), c.style.position = "absolute", c.style.backgroundColor = "#222", c.style.width = "8px", c.style.height = "8px", c.style.transform = "rotate(45deg)", c.style.display = "none", u.firstElementChild.before(c));
+  function f() {
+    mm(e, u, {
+      placement: r,
+      middleware: [
+        gm(o),
+        // 手动偏移配置
+        vm(i),
+        //自动翻转
+        hm(s),
+        //自动偏移（使得浮动元素能够进入视野）
+        ...l ? [pm({ element: c })] : []
+      ]
+    }).then(({ x: $, y: m, placement: _, middlewareData: v }) => {
+      if (Object.assign(u.style, {
+        left: `${$}px`,
+        top: `${m}px`
+      }), l) {
+        const { x: b, y: N } = v.arrow, E = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right"
+        }[_.split("-")[0]];
+        Object.assign(c.style, {
+          zIndex: -1,
+          left: b != null ? `${b}px` : "",
+          top: N != null ? `${N}px` : "",
+          right: "",
+          bottom: "",
+          [E]: "2px"
+        });
+      }
+    });
+  }
+  let d = !1;
+  function g() {
+    u.style.display = "block", u.style.visibility = "block", u.style.position = "absolute", l && (c.style.display = "block"), d = !0, f();
+  }
+  function p() {
+    u.style.display = "none", l && (c.style.display = "none"), d = !1;
+  }
+  function x($) {
+    $.stopPropagation(), d ? p() : g();
+  }
+  function C($) {
+    u.contains($.target) || p();
+  }
+  return (!t || t.length == 0) && (t = ["click"]), t.forEach(($) => {
+    e.addEventListener($, x);
+  }), document.addEventListener("click", C), {
+    destroy() {
+      t.forEach(($) => {
+        e.removeEventListener($, x);
+      }), document.removeEventListener("click", C);
+    },
+    hide() {
+      p();
+    },
+    isVisible() {
+      return d;
+    }
+  };
+};
+var wm = /* @__PURE__ */ ne('<div style="position: relative"><div><!></div> <div style="display: none; width: 100%;z-index: 9999"><!></div></div>');
+function Lo(e, t) {
+  de(t, !0);
+  const n = w(t, "children", 7), r = w(t, "floating", 7), o = w(t, "placement", 7, "bottom");
+  let i, s, a;
+  un(() => (a = ym({
+    trigger: i,
+    floatContent: s,
+    interactive: !0,
+    placement: o()
+  }), () => {
+    a.destroy();
+  }));
+  function l() {
+    a.hide();
+  }
+  var u = wm(), c = X(u), f = X(c);
+  lr(f, n), Z(c), An(c, (p) => i = p, () => i);
+  var d = z(c, 2), g = X(d);
+  return lr(g, r), Z(d), An(d, (p) => s = p, () => s), Z(u), L(e, u), fe({
+    hide: l,
+    get children() {
+      return n();
+    },
+    set children(p) {
+      n(p), y();
+    },
+    get floating() {
+      return r();
+    },
+    set floating(p) {
+      r(p), y();
+    },
+    get placement() {
+      return o();
+    },
+    set placement(p = "bottom") {
+      o(p), y();
+    }
+  });
+}
+ae(Lo, { children: {}, floating: {}, placement: {} }, [], ["hide"], !0);
+function Ge(e, t) {
+  de(t, !0);
+  const n = w(t, "children", 7), r = w(t, "level", 7, 1), o = w(t, "mt", 7), i = w(t, "mb", 7);
+  var s = et(), a = be(s);
+  return m1(a, () => `h${r()}`, !1, (l, u) => {
+    let c;
+    Ee(() => c = on(
+      l,
+      c,
+      {
+        class: "tf-heading",
+        style: `margin-top:${o() || "0"};margin-bottom:${i() || "0"}`
+      },
+      void 0,
+      l.namespaceURI === Rl,
+      l.nodeName.includes("-")
+    ));
+    var f = et(), d = be(f);
+    lr(d, () => n() ?? dt), L(u, f);
+  }), L(e, s), fe({
+    get children() {
+      return n();
+    },
+    set children(l) {
+      n(l), y();
+    },
+    get level() {
+      return r();
+    },
+    set level(l = 1) {
+      r(l), y();
+    },
+    get mt() {
+      return o();
+    },
+    set mt(l) {
+      o(l), y();
+    },
+    get mb() {
+      return i();
+    },
+    set mb(l) {
+      i(l), y();
+    }
+  });
+}
+ae(Ge, { children: {}, level: {}, mt: {}, mb: {} }, [], [], !0);
+var _m = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="svelte-1rvn4a8"><path d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z" class="svelte-1rvn4a8"></path></svg>');
+const xm = {
+  hash: "svelte-1rvn4a8",
+  code: ".input-btn-more {border:1px solid transparent;padding:3px;&:hover {background:#eee;border:1px solid transparent;}}"
+};
+function Ui(e, t) {
+  de(t, !0), Je(e, xm);
+  const n = /* @__PURE__ */ yt(t, ["$$slots", "$$events", "$$legacy", "$$host"]);
+  Ke(e, ut(() => n, {
+    get class() {
+      return `input-btn-more ${t.class ?? ""}`;
+    },
+    children: (r, o) => {
+      var i = _m();
+      L(r, i);
+    },
+    $$slots: { default: !0 }
+  })), fe();
+}
+ae(Ui, {}, [], [], !0);
+const bm = () => {
+  const e = Ue();
+  return {
+    deleteNode: (n) => {
+      e.nodes.update((r) => r.filter((o) => o.id !== n)), e.edges.update(
+        (r) => r.filter((o) => o.source !== n && o.target !== n)
+      );
+    }
+  };
+}, Rr = (e = 16) => {
+  const t = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", n = new Uint8Array(e);
+  return crypto.getRandomValues(n), Array.from(n, (r) => t[r % t.length]).join("");
+}, Cm = () => {
+  const { nodes: e, nodeLookup: t } = Ue();
+  return {
+    copyNode: (r) => {
+      var s;
+      const i = (s = q(t).get(r)) == null ? void 0 : s.internals.userNode;
+      if (i) {
+        const a = Rr(), l = {
+          ...i,
+          id: a,
+          position: {
+            x: i.position.x + 50,
+            y: i.position.y + 50
+          }
+        };
+        e.update((u) => [...u, l]), e.update(
+          (u) => u.map(
+            (c) => c.id === a ? { ...c, selected: !0 } : { ...c, selected: !1 }
+          )
+        );
+      }
+    }
+  };
+};
+var km = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 18.3915V5.60846L18.2264 12L8 18.3915ZM6 3.80421V20.1957C6 20.9812 6.86395 21.46 7.53 21.0437L20.6432 12.848C21.2699 12.4563 21.2699 11.5436 20.6432 11.152L7.53 2.95621C6.86395 2.53993 6 3.01878 6 3.80421Z"></path></svg>'), $m = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"></path></svg>'), Em = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z"></path></svg>'), Sm = /* @__PURE__ */ ne('<div class="tf-node-toolbar svelte-44dmwv"><!> <!> <!></div>'), Pm = /* @__PURE__ */ ne('<!> <div class="tf-node-wrapper"><div class="tf-node-wrapper-title">TinyFlow.ai</div> <div class="tf-node-wrapper-body"><!></div></div> <!> <!> <!>', 1);
+const Nm = {
+  hash: "svelte-44dmwv",
+  code: ".tf-node-toolbar.svelte-44dmwv {display:flex;gap:5px;padding:5px;border-radius:5px;background:#fff;border:1px solid #eee;box-shadow:0 0 5px rgba(0, 0, 0, 0.1);}.tf-node-toolbar-item {border:1px solid transparent;}"
+};
+function dn(e, t) {
+  de(t, !0), Je(e, Nm);
+  const n = w(t, "data", 7), r = w(t, "id", 7, ""), o = w(t, "icon", 7), i = w(t, "handle", 7), s = w(t, "children", 7), a = w(t, "allowExecute", 7, !0), l = w(t, "allowCopy", 7, !0), u = w(t, "allowDelete", 7, !0), c = w(t, "showSourceHandle", 7, !0), f = w(t, "showTargetHandle", 7, !0);
+  let d = n().expand ? ["key"] : [];
+  const { updateNodeData: g } = Dt(), p = [
+    {
+      key: "key",
+      icon: o(),
+      title: n().title,
+      description: n().description,
+      content: s()
+    }
+  ], { deleteNode: x } = bm(), { copyNode: C } = Cm();
+  var $ = Pm(), m = be($);
+  {
+    var _ = (O) => {
+      od(O, {
+        get position() {
+          return $e.Top;
+        },
+        align: "end",
+        children: (R, S) => {
+          var T = Sm(), k = X(T);
+          {
+            var P = (K) => {
+              Ke(K, {
+                class: "tf-node-toolbar-item",
+                children: (ie, ee) => {
+                  var W = km();
+                  L(ie, W);
+                },
+                $$slots: { default: !0 }
+              });
+            };
+            ke(k, (K) => {
+              a() && K(P);
+            });
+          }
+          var H = z(k, 2);
+          {
+            var I = (K) => {
+              Ke(K, {
+                class: "tf-node-toolbar-item",
+                onclick: () => {
+                  C(r());
+                },
+                children: (ie, ee) => {
+                  var W = $m();
+                  L(ie, W);
+                },
+                $$slots: { default: !0 }
+              });
+            };
+            ke(H, (K) => {
+              l() && K(I);
+            });
+          }
+          var B = z(H, 2);
+          {
+            var F = (K) => {
+              Ke(K, {
+                class: "tf-node-toolbar-item",
+                onclick: () => {
+                  x(r());
+                },
+                children: (ie, ee) => {
+                  var W = Em();
+                  L(ie, W);
+                },
+                $$slots: { default: !0 }
+              });
+            };
+            ke(B, (K) => {
+              u() && K(F);
+            });
+          }
+          Z(T), L(R, T);
+        },
+        $$slots: { default: !0 }
+      });
+    };
+    ke(m, (O) => {
+      (a() || l() || u()) && O(_);
+    });
+  }
+  var v = z(m, 2), b = z(X(v), 2), N = X(b);
+  ad(N, {
+    items: p,
+    activeKeys: d,
+    onChange: (O, R) => {
+      g(r(), { expand: R == null ? void 0 : R.includes("key") });
+    }
+  }), Z(b), Z(v);
+  var E = z(v, 2);
+  {
+    var M = (O) => {
+      Qn(O, {
+        type: "target",
+        get position() {
+          return $e.Left;
+        },
+        style: " left: -12px;top: 20px"
+      });
+    };
+    ke(E, (O) => {
+      f() && O(M);
+    });
+  }
+  var D = z(E, 2);
+  {
+    var V = (O) => {
+      Qn(O, {
+        type: "source",
+        get position() {
+          return $e.Right;
+        },
+        style: "right: -12px;top: 20px"
+      });
+    };
+    ke(D, (O) => {
+      c() && O(V);
+    });
+  }
+  var A = z(D, 2);
+  return lr(A, () => i() ?? dt), L(e, $), fe({
+    get data() {
+      return n();
+    },
+    set data(O) {
+      n(O), y();
+    },
+    get id() {
+      return r();
+    },
+    set id(O = "") {
+      r(O), y();
+    },
+    get icon() {
+      return o();
+    },
+    set icon(O) {
+      o(O), y();
+    },
+    get handle() {
+      return i();
+    },
+    set handle(O) {
+      i(O), y();
+    },
+    get children() {
+      return s();
+    },
+    set children(O) {
+      s(O), y();
+    },
+    get allowExecute() {
+      return a();
+    },
+    set allowExecute(O = !0) {
+      a(O), y();
+    },
+    get allowCopy() {
+      return l();
+    },
+    set allowCopy(O = !0) {
+      l(O), y();
+    },
+    get allowDelete() {
+      return u();
+    },
+    set allowDelete(O = !0) {
+      u(O), y();
+    },
+    get showSourceHandle() {
+      return c();
+    },
+    set showSourceHandle(O = !0) {
+      c(O), y();
+    },
+    get showTargetHandle() {
+      return f();
+    },
+    set showTargetHandle(O = !0) {
+      f(O), y();
+    }
+  });
+}
+ae(
+  dn,
+  {
+    data: {},
+    id: {},
+    icon: {},
+    handle: {},
+    children: {},
+    allowExecute: {},
+    allowCopy: {},
+    allowDelete: {},
+    showSourceHandle: {},
+    showTargetHandle: {}
+  },
+  [],
+  [],
+  !0
+);
+function ht() {
+  return ar("svelteflow__node_id");
+}
+const _d = [
+  {
+    value: "String",
+    label: "String"
+  },
+  {
+    value: "Number",
+    label: "Number"
+  },
+  {
+    value: "Boolean",
+    label: "Boolean"
+  },
+  {
+    value: "File",
+    label: "File"
+  },
+  {
+    value: "Object",
+    label: "Object"
+  },
+  {
+    value: "Array",
+    label: "Array"
+  }
+], Mm = [
+  {
+    value: "ref",
+    label: "引用"
+  },
+  {
+    value: "input",
+    label: "固定值"
+  }
+];
+var Tm = /* @__PURE__ */ ne('<div class="input-more-setting svelte-laou7w"><div class="input-more-item svelte-laou7w">参数类型： <!></div> <div class="input-more-item svelte-laou7w">默认值： <!></div> <div class="input-more-item svelte-laou7w">参数描述： <!></div> <div class="input-more-item svelte-laou7w"><!></div></div>'), Hm = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z"></path></svg>'), Vm = /* @__PURE__ */ ne('<div class="input-item svelte-laou7w"><!></div> <div class="input-item svelte-laou7w"><!></div> <div class="input-item svelte-laou7w"><!></div>', 1);
+const Dm = {
+  hash: "svelte-laou7w",
+  code: ".input-item.svelte-laou7w {display:flex;align-items:center;}.input-more-setting.svelte-laou7w {display:flex;flex-direction:column;gap:10px;padding:10px;background:#fff;border:1px solid #ddd;border-radius:5px;width:200px;box-shadow:0 0 10px 2px rgba(0, 0, 0, 0.1);}.input-more-setting.svelte-laou7w .input-more-item:where(.svelte-laou7w) {display:flex;flex-direction:column;gap:3px;font-size:12px;color:#666;}"
+};
+function xd(e, t) {
+  de(t, !0), Je(e, Dm);
+  const [n, r] = tt(), o = () => Q(h(l), "$node", n), i = w(t, "parameter", 7), s = w(t, "index", 7);
+  let a = ht(), l = /* @__PURE__ */ Me(() => pr(a)), u = /* @__PURE__ */ Me(() => {
+    var M, D;
+    return {
+      ...i(),
+      ...(D = (M = o()) == null ? void 0 : M.data) == null ? void 0 : D.parameters[s()]
+    };
+  });
+  const { updateNodeData: c } = Dt(), f = (M) => {
+    const D = M.target.value;
+    c(a, (V) => {
+      let A = V.data.parameters;
+      return A[s()].name = D, { parameters: A };
+    });
+  }, d = (M) => {
+    const D = M.target.checked;
+    c(a, (V) => {
+      let A = V.data.parameters;
+      return A[s()].required = D, { parameters: A };
+    });
+  }, g = (M) => {
+    const D = M.value;
+    D && c(a, (V) => {
+      let A = V.data.parameters;
+      return A[s()].dataType = D, { parameters: A };
+    });
+  };
+  let p;
+  const x = () => {
+    c(a, (M) => {
+      let D = M.data.parameters;
+      return D.splice(s(), 1), { parameters: [...D] };
+    }), p == null || p.hide();
+  };
+  var C = Vm(), $ = be(C), m = X($);
+  xt(m, {
+    style: "width: 100%;",
+    get value() {
+      return h(u).name;
+    },
+    placeholder: "请输入参数名称",
+    oninput: f
+  }), Z($);
+  var _ = z($, 2), v = X(_);
+  id(v, {
+    get checked() {
+      return h(u).required;
+    },
+    onchange: d
+  }), Z(_);
+  var b = z(_, 2), N = X(b);
+  An(
+    Lo(N, {
+      placement: "bottom",
+      floating: (D) => {
+        var V = Tm(), A = X(V), O = z(X(A));
+        const R = /* @__PURE__ */ Me(() => h(u).dataType ? [h(u).dataType] : ["String"]);
+        sn(O, {
+          items: _d,
+          style: "width: 100%",
+          onSelect: g,
+          get value() {
+            return h(R);
+          }
+        }), Z(A);
+        var S = z(A, 2), T = z(X(S));
+        $t(T, { rows: 1, style: "width: 100%;" }), Z(S);
+        var k = z(S, 2), P = z(X(k));
+        $t(P, { rows: 3, style: "width: 100%;" }), Z(k);
+        var H = z(k, 2), I = X(H);
+        Ke(I, {
+          onclick: x,
+          children: (B, F) => {
+            Se();
+            var K = Ie("删除");
+            L(B, K);
+          },
+          $$slots: { default: !0 }
+        }), Z(H), Z(V), L(D, V);
+      },
+      children: (D, V) => {
+        Ke(D, {
+          class: "input-btn-more",
+          children: (A, O) => {
+            var R = Hm();
+            L(A, R);
+          },
+          $$slots: { default: !0 }
+        });
+      },
+      $$slots: { floating: !0, default: !0 }
+    }),
+    (D) => p = D,
+    () => p
+  ), Z(b), L(e, C);
+  var E = fe({
+    get parameter() {
+      return i();
+    },
+    set parameter(M) {
+      i(M), y();
+    },
+    get index() {
+      return s();
+    },
+    set index(M) {
+      s(M), y();
+    }
+  });
+  return r(), E;
+}
+ae(xd, { parameter: {}, index: {} }, [], [], !0);
+var Am = /* @__PURE__ */ ne('<div class="input-header svelte-3n0wca">参数名称</div> <div class="input-header svelte-3n0wca">必填</div> <div class="input-header svelte-3n0wca"></div>', 1), Lm = /* @__PURE__ */ ne('<div class="none-params svelte-3n0wca">无输入参数</div>'), Om = /* @__PURE__ */ ne('<div class="input-container svelte-3n0wca"><!> <!></div>');
+const Im = {
+  hash: "svelte-3n0wca",
+  code: `.input-container.svelte-3n0wca {display:grid;grid-template-columns:80% 10% 10%;row-gap:5px;column-gap:3px;}.input-container.svelte-3n0wca .none-params:where(.svelte-3n0wca) {font-size:12px;background:#f8f8f8;height:40px;display:flex;justify-content:center;align-items:center;border-radius:5px;width:calc(100% - 5px);grid-column:1 / -1;
+  /* 从第一列开始到最后一列结束 */}.input-container.svelte-3n0wca .input-header:where(.svelte-3n0wca) {font-size:12px;color:#666;}`
+};
+function bd(e, t) {
+  de(t, !0), Je(e, Im);
+  const [n, r] = tt(), o = () => Q(h(s), "$node", n);
+  let i = ht(), s = /* @__PURE__ */ Me(() => pr(i)), a = /* @__PURE__ */ Me(() => {
+    var d, g;
+    return [...((g = (d = o()) == null ? void 0 : d.data) == null ? void 0 : g.parameters) || []];
+  });
+  var l = Om(), u = X(l);
+  {
+    var c = (d) => {
+      var g = Am();
+      Se(4), L(d, g);
+    };
+    ke(u, (d) => {
+      h(a).length !== 0 && d(c);
+    });
+  }
+  var f = z(u, 2);
+  Yt(
+    f,
+    19,
+    () => h(a),
+    (d) => d.id,
+    (d, g, p) => {
+      xd(d, {
+        get parameter() {
+          return h(g);
+        },
+        get index() {
+          return h(p);
+        }
+      });
+    },
+    (d) => {
+      var g = Lm();
+      L(d, g);
+    }
+  ), Z(l), L(e, l), fe(), r();
+}
+ae(bd, {}, [], [], !0);
+const Cd = (e) => {
+  !e || e.length == 0 || e.forEach((t) => {
+    t.id || (t.id = Rr()), Cd(t.children);
+  });
+}, kn = () => {
+  const { updateNodeData: e } = Dt();
+  return {
+    addParameter: (t, n = "parameters", r) => {
+      Cd(r == null ? void 0 : r.children);
+      const o = {
+        ...r,
+        id: Rr()
+      };
+      e(t, (i) => {
+        let s = i.data[n];
+        return s ? s.push(o) : s = [o], {
+          [n]: [...s]
+        };
+      });
+    }
+  };
+};
+var zm = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path></svg>'), Rm = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), Bm = /* @__PURE__ */ ne('<div class="heading svelte-r5g35l"><!> <!></div> <!>', 1);
+const Ym = {
+  hash: "svelte-r5g35l",
+  code: ".heading.svelte-r5g35l {display:flex;margin-bottom:10px;}.input-btn-more {border:1px solid transparent;padding:3px;}.input-btn-more:hover {background:#eee;border:1px solid transparent;}"
+};
+function kd(e, t) {
+  de(t, !0), Je(e, Ym);
+  const n = w(t, "data", 7), r = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "data"
+  ]), o = ht(), { addParameter: i } = kn();
+  return dn(e, ut(() => r, {
+    get data() {
+      return n();
+    },
+    allowExecute: !1,
+    showTargetHandle: !1,
+    icon: (a) => {
+      var l = zm();
+      L(a, l);
+    },
+    children: (a, l) => {
+      var u = Bm(), c = be(u), f = X(c);
+      Ge(f, {
+        level: 3,
+        children: (p, x) => {
+          Se();
+          var C = Ie("输入参数");
+          L(p, C);
+        },
+        $$slots: { default: !0 }
+      });
+      var d = z(f, 2);
+      Ke(d, {
+        class: "input-btn-more",
+        style: "margin-left: auto",
+        onclick: () => {
+          i(o);
+        },
+        children: (p, x) => {
+          var C = Rm();
+          L(p, C);
+        },
+        $$slots: { default: !0 }
+      }), Z(c);
+      var g = z(c, 2);
+      bd(g, {}), L(a, u);
+    },
+    $$slots: { icon: !0, default: !0 }
+  })), fe({
+    get data() {
+      return n();
+    },
+    set data(s) {
+      n(s), y();
+    }
+  });
+}
+ae(kd, { data: {} }, [], [], !0);
+const $d = (e, t, n) => {
+  for (let r of n)
+    r.target === t && r.source && (e.push(r.source), $d(e, r.source, n));
+}, Al = (e, t) => {
+  if (e.type === "startNode") {
+    const n = e.data.parameters, r = [];
+    if (n)
+      for (const o of n)
+        r.push({
+          label: o.name + (t ? ` (Array<${o.dataType || "String"}>)` : ` (${o.dataType || "String"})`),
+          value: e.id + "." + o.name
+        });
+    return {
+      label: e.data.title,
+      value: e.id,
+      children: r
+    };
+  } else {
+    if (e.type === "loopNode" && t)
+      return {
+        label: e.data.title,
+        value: e.id,
+        children: [
+          {
+            label: "loopItem",
+            value: e.id + ".loop"
+          },
+          {
+            label: "index (Number)",
+            value: e.id + ".index"
+          }
+        ]
+      };
+    {
+      const n = e.data.outputDefs;
+      if (n) {
+        const r = (o, i) => !o || o.length === 0 ? [] : o.map((s) => ({
+          label: s.name + (t ? ` (Array<${s.dataType || "String"}>)` : ` (${s.dataType || "String"})`),
+          // label: param.name ,
+          value: i + "." + s.name,
+          children: r(s.children, i + "." + s.name)
+        }));
+        return {
+          label: e.data.title,
+          value: e.id,
+          children: r(n, e.id)
+        };
+      }
+    }
+  }
+}, Zm = (e = !1) => {
+  const t = ht(), n = pr(t), { nodes: r, edges: o } = Ue();
+  return Kn([n, r, o], ([i, s, a]) => {
+    const l = [];
+    if (e) {
+      for (let u of s)
+        if (u.parentId === i.id) {
+          const c = Al(u, u.parentId === i.id);
+          c && l.push(c);
+        }
+    } else {
+      const u = [];
+      $d(u, t, a);
+      for (let c of s)
+        if (u.includes(c.id)) {
+          const f = Al(c, c.parentId === i.id);
+          f && l.push(f);
+        }
+    }
+    return l;
+  });
+};
+var Xm = /* @__PURE__ */ ne('<div class="input-more-setting svelte-laou7w"><div class="input-more-item svelte-laou7w">数据来源： <!></div> <div class="input-more-item svelte-laou7w">默认值： <!></div> <div class="input-more-item svelte-laou7w">参数描述： <!></div> <div class="input-more-item svelte-laou7w"><!></div></div>'), Fm = /* @__PURE__ */ ne('<div class="input-item svelte-laou7w"><!></div> <div class="input-item svelte-laou7w"><!></div> <div class="input-item svelte-laou7w"><!></div>', 1);
+const Wm = {
+  hash: "svelte-laou7w",
+  code: ".input-item.svelte-laou7w {display:flex;align-items:center;}.input-more-setting.svelte-laou7w {display:flex;flex-direction:column;gap:10px;padding:10px;background:#fff;border:1px solid #ddd;border-radius:5px;width:200px;box-shadow:0 0 10px 2px rgba(0, 0, 0, 0.1);}.input-more-setting.svelte-laou7w .input-more-item:where(.svelte-laou7w) {display:flex;flex-direction:column;gap:3px;font-size:12px;color:#666;}"
+};
+function Ed(e, t) {
+  de(t, !0), Je(e, Wm);
+  const [n, r] = tt(), o = () => Q(h(c), "$node", n), i = () => Q(v, "$selectItems", n), s = w(t, "parameter", 7), a = w(t, "index", 7), l = w(t, "dataKeyName", 7);
+  let u = ht(), c = /* @__PURE__ */ Me(() => pr(u)), f = /* @__PURE__ */ Me(() => {
+    var T;
+    return {
+      ...s(),
+      ...(T = o()) == null ? void 0 : T.data[l()][a()]
+    };
+  });
+  const { updateNodeData: d } = Dt(), g = (T, k) => {
+    d(u, (P) => {
+      let H = P.data[l()];
+      return H[a()] = { ...H[a()], [T]: k }, { [l()]: H };
+    });
+  }, p = (T) => {
+    const k = T.target.value;
+    g("name", k);
+  }, x = (T) => {
+    const k = T.target.value;
+    g("value", k);
+  }, C = (T) => {
+    const k = T.value;
+    g("ref", k);
+  }, $ = (T) => {
+    const k = T.value;
+    g("refType", k);
+  };
+  let m;
+  const _ = () => {
+    d(u, (T) => {
+      let k = T.data[l()];
+      return k.splice(a(), 1), { [l()]: [...k] };
+    }), m == null || m.hide();
+  }, v = Zm();
+  var b = Fm(), N = be(b), E = X(N);
+  xt(E, {
+    style: "width: 100%;",
+    get value() {
+      return h(f).name;
+    },
+    placeholder: "请输入参数名称",
+    oninput: p
+  }), Z(N);
+  var M = z(N, 2), D = X(M);
+  {
+    var V = (T) => {
+      xt(T, {
+        get value() {
+          return h(f).value;
+        },
+        placeholder: "请输入参数值",
+        oninput: x
+      });
+    }, A = (T) => {
+      const k = /* @__PURE__ */ Me(() => [h(f).ref]);
+      sn(T, {
+        get items() {
+          return i();
+        },
+        style: "width: 100%",
+        defaultValue: ["ref"],
+        get value() {
+          return h(k);
+        },
+        expandAll: !0,
+        onSelect: C
+      });
+    };
+    ke(D, (T) => {
+      h(f).refType === "input" ? T(V) : T(A, !1);
+    });
+  }
+  Z(M);
+  var O = z(M, 2), R = X(O);
+  An(
+    Lo(R, {
+      placement: "bottom",
+      floating: (k) => {
+        var P = Xm(), H = X(P), I = z(X(H));
+        const B = /* @__PURE__ */ Me(() => h(f).refType ? [h(f).refType] : []);
+        sn(I, {
+          items: Mm,
+          style: "width: 100%",
+          defaultValue: ["ref"],
+          get value() {
+            return h(B);
+          },
+          onSelect: $
+        }), Z(H);
+        var F = z(H, 2), K = z(X(F));
+        $t(K, {
+          rows: 1,
+          style: "width: 100%;",
+          onchange: (me) => {
+            const Ce = me.target.value;
+            g("defaultValue", Ce);
+          }
+        }), Z(F);
+        var ie = z(F, 2), ee = z(X(ie));
+        $t(ee, {
+          rows: 3,
+          style: "width: 100%;",
+          onchange: (me) => {
+            const Ce = me.target.value;
+            g("description", Ce);
+          }
+        }), Z(ie);
+        var W = z(ie, 2), ue = X(W);
+        Ke(ue, {
+          onclick: _,
+          children: (me, Ce) => {
+            Se();
+            var ge = Ie("删除");
+            L(me, ge);
+          },
+          $$slots: { default: !0 }
+        }), Z(W), Z(P), L(k, P);
+      },
+      children: (k, P) => {
+        Ui(k, {});
+      },
+      $$slots: { floating: !0, default: !0 }
+    }),
+    (k) => m = k,
+    () => m
+  ), Z(O), L(e, b);
+  var S = fe({
+    get parameter() {
+      return s();
+    },
+    set parameter(T) {
+      s(T), y();
+    },
+    get index() {
+      return a();
+    },
+    set index(T) {
+      a(T), y();
+    },
+    get dataKeyName() {
+      return l();
+    },
+    set dataKeyName(T) {
+      l(T), y();
+    }
+  });
+  return r(), S;
+}
+ae(Ed, { parameter: {}, index: {}, dataKeyName: {} }, [], [], !0);
+var Km = /* @__PURE__ */ ne('<div class="input-header svelte-1sm1mgi">参数名称</div> <div class="input-header svelte-1sm1mgi">参数值</div> <div class="input-header svelte-1sm1mgi"></div>', 1), qm = /* @__PURE__ */ ne('<div class="none-params svelte-1sm1mgi"> </div>'), Gm = /* @__PURE__ */ ne('<div class="input-container svelte-1sm1mgi"><!> <!></div>');
+const Um = {
+  hash: "svelte-1sm1mgi",
+  code: `.input-container.svelte-1sm1mgi {display:grid;grid-template-columns:40% 50% 10%;row-gap:5px;column-gap:3px;}.input-container.svelte-1sm1mgi .none-params:where(.svelte-1sm1mgi) {font-size:12px;background:#f8f8f8;height:40px;display:flex;justify-content:center;align-items:center;border-radius:5px;width:calc(100% - 5px);grid-column:1 / -1;
+  /* 从第一列开始到最后一列结束 */}.input-container.svelte-1sm1mgi .input-header:where(.svelte-1sm1mgi) {font-size:12px;color:#666;}`
+};
+function zt(e, t) {
+  de(t, !0), Je(e, Um);
+  const [n, r] = tt(), o = () => Q(h(l), "$node", n), i = w(t, "noneParameterText", 7, "无输入参数"), s = w(t, "dataKeyName", 7, "parameters");
+  let a = ht(), l = /* @__PURE__ */ Me(() => pr(a)), u = /* @__PURE__ */ Me(() => {
+    var x;
+    return [...((x = o()) == null ? void 0 : x.data[s()]) || []];
+  });
+  var c = Gm(), f = X(c);
+  {
+    var d = (x) => {
+      var C = Km();
+      Se(4), L(x, C);
+    };
+    ke(f, (x) => {
+      h(u).length !== 0 && x(d);
+    });
+  }
+  var g = z(f, 2);
+  Yt(
+    g,
+    19,
+    () => h(u),
+    (x) => x.id,
+    (x, C, $) => {
+      Ed(x, {
+        get parameter() {
+          return h(C);
+        },
+        get index() {
+          return h($);
+        },
+        get dataKeyName() {
+          return s();
+        }
+      });
+    },
+    (x) => {
+      var C = qm(), $ = X(C, !0);
+      Z(C), Ee(() => Rt($, i())), L(x, C);
+    }
+  ), Z(c), L(e, c);
+  var p = fe({
+    get noneParameterText() {
+      return i();
+    },
+    set noneParameterText(x = "无输入参数") {
+      i(x), y();
+    },
+    get dataKeyName() {
+      return s();
+    },
+    set dataKeyName(x = "parameters") {
+      s(x), y();
+    }
+  });
+  return r(), p;
+}
+ae(zt, { noneParameterText: {}, dataKeyName: {} }, [], [], !0);
+var jm = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 5.1438V16.0002H18.3391L6 5.1438ZM4 2.932C4 2.07155 5.01456 1.61285 5.66056 2.18123L21.6501 16.2494C22.3423 16.8584 21.9116 18.0002 20.9896 18.0002H6V22H4V2.932Z"></path></svg>'), Jm = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), Qm = /* @__PURE__ */ ne('<div class="heading svelte-11h445j"><!> <!></div> <!>', 1);
+const ey = {
+  hash: "svelte-11h445j",
+  code: ".heading.svelte-11h445j {display:flex;margin-bottom:10px;}"
+};
+function Sd(e, t) {
+  de(t, !0), Je(e, ey);
+  const n = w(t, "data", 7), r = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "data"
+  ]), o = ht(), { addParameter: i } = kn();
+  return dn(e, ut(
+    {
+      get data() {
+        return n();
+      }
+    },
+    () => r,
+    {
+      allowExecute: !1,
+      showSourceHandle: !1,
+      icon: (a) => {
+        var l = jm();
+        L(a, l);
+      },
+      children: (a, l) => {
+        var u = Qm(), c = be(u), f = X(c);
+        Ge(f, {
+          level: 3,
+          children: (p, x) => {
+            Se();
+            var C = Ie("输出参数");
+            L(p, C);
+          },
+          $$slots: { default: !0 }
+        });
+        var d = z(f, 2);
+        Ke(d, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            i(o, "outputDefs");
+          },
+          children: (p, x) => {
+            var C = Jm();
+            L(p, C);
+          },
+          $$slots: { default: !0 }
+        }), Z(c);
+        var g = z(c, 2);
+        zt(g, {
+          noneParameterText: "无输出参数",
+          dataKeyName: "outputDefs"
+        }), L(a, u);
+      },
+      $$slots: { icon: !0, default: !0 }
+    }
+  )), fe({
+    get data() {
+      return n();
+    },
+    set data(s) {
+      n(s), y();
+    }
+  });
+}
+ae(Sd, { data: {} }, [], [], !0);
+const Oo = () => ar("tinyflow_options");
+var ty = /* @__PURE__ */ _e('<svg style="transform: scaleY(-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 8V16C13 17.6569 11.6569 19 10 19H7.82929C7.41746 20.1652 6.30622 21 5 21C3.34315 21 2 19.6569 2 18C2 16.3431 3.34315 15 5 15C6.30622 15 7.41746 15.8348 7.82929 17H10C10.5523 17 11 16.5523 11 16V8C11 6.34315 12.3431 5 14 5H17V2L22 6L17 10V7H14C13.4477 7 13 7.44772 13 8ZM5 19C5.55228 19 6 18.5523 6 18C6 17.4477 5.55228 17 5 17C4.44772 17 4 17.4477 4 18C4 18.5523 4.44772 19 5 19Z"></path></svg>'), ny = /* @__PURE__ */ ne('<div class="input-more-item svelte-1cfeest"><!></div>'), ry = /* @__PURE__ */ ne('<div class="input-more-setting svelte-1cfeest"><div class="input-more-item svelte-1cfeest">默认值： <!></div> <div class="input-more-item svelte-1cfeest">参数描述： <!></div> <!></div>'), oy = /* @__PURE__ */ ne('<div class="input-item svelte-1cfeest"><!> <!></div> <div class="input-item svelte-1cfeest"><!> <!></div> <div class="input-item svelte-1cfeest"><!></div>', 1);
+const iy = {
+  hash: "svelte-1cfeest",
+  code: ".input-item.svelte-1cfeest {display:flex;align-items:center;gap:2px;}.input-more-setting.svelte-1cfeest {display:flex;flex-direction:column;gap:10px;padding:10px;background:#fff;border:1px solid #ddd;border-radius:5px;width:200px;box-shadow:0 0 10px 2px rgba(0, 0, 0, 0.1);}.input-more-setting.svelte-1cfeest .input-more-item:where(.svelte-1cfeest) {display:flex;flex-direction:column;gap:3px;font-size:12px;color:#666;}"
+};
+function Pd(e, t) {
+  de(t, !0), Je(e, iy);
+  const [n, r] = tt(), o = () => Q(h(u), "$node", n), i = w(t, "parameter", 7), s = w(t, "position", 7), a = w(t, "dataKeyName", 7);
+  let l = ht(), u = /* @__PURE__ */ Me(() => pr(l)), c = /* @__PURE__ */ Me(() => {
+    var I;
+    let P = (I = o()) == null ? void 0 : I.data[a()], H;
+    if (P && s().length > 0) {
+      let B = P;
+      for (let F = 0; F < s().length; F++) {
+        const K = s()[F];
+        F == s().length - 1 ? H = B[K] : B = B[K].children;
+      }
+    }
+    return { ...i(), ...H };
+  });
+  const { updateNodeData: f } = Dt(), d = (P, H) => {
+    f(l, (I) => {
+      const B = I.data[a()];
+      if (B && s().length > 0) {
+        let F = B;
+        for (let K = 0; K < s().length; K++) {
+          const ie = s()[K];
+          K == s().length - 1 ? F[ie] = { ...F[ie], [P]: H } : F = B[ie].children;
+        }
+      }
+      return { [a()]: B };
+    });
+  }, g = (P) => {
+    const H = P.target.value;
+    d("name", H);
+  }, p = (P) => {
+    const H = P.value;
+    d("dataType", H);
+  };
+  let x;
+  const C = () => {
+    f(l, (P) => {
+      let H = P.data[a()];
+      if (H && s().length > 0) {
+        let I = H;
+        for (let B = 0; B < s().length; B++) {
+          const F = s()[B];
+          B == s().length - 1 ? I.splice(F, 1) : I = I[F].children;
+        }
+      }
+      return { [a()]: [...H] };
+    }), x == null || x.hide();
+  }, $ = () => {
+    f(l, (P) => {
+      let H = P.data[a()];
+      if (H && s().length > 0) {
+        let I = H;
+        for (let B = 0; B < s().length; B++) {
+          const F = s()[B];
+          B == s().length - 1 ? I[F].children ? I[F].children.push({
+            id: Rr(),
+            name: "newParam",
+            dataType: "String"
+          }) : I[F].children = [
+            {
+              id: Rr(),
+              name: "newParam",
+              dataType: "String"
+            }
+          ] : I = I[F].children;
+        }
+      }
+      return { [a()]: [...H] };
+    });
+  };
+  var m = oy(), _ = be(m), v = X(_);
+  {
+    var b = (P) => {
+      var H = et(), I = be(H);
+      Yt(I, 17, s, Li, (B, F) => {
+        Se();
+        var K = Ie(" ");
+        L(B, K);
+      }), L(P, H);
+    };
+    ke(v, (P) => {
+      s().length > 1 && P(b);
+    });
+  }
+  var N = z(v, 2);
+  const E = /* @__PURE__ */ Me(() => h(c).nameDisabled === !0);
+  xt(N, {
+    style: "width: 100%;",
+    get value() {
+      return h(c).name;
+    },
+    placeholder: "请输入参数名称",
+    oninput: g,
+    get disabled() {
+      return h(E);
+    }
+  }), Z(_);
+  var M = z(_, 2), D = X(M);
+  const V = /* @__PURE__ */ Me(() => h(c).dataType ? [h(c).dataType] : []), A = /* @__PURE__ */ Me(() => h(c).dataTypeDisabled === !0);
+  sn(D, {
+    items: _d,
+    style: "width: 100%",
+    defaultValue: ["String"],
+    get value() {
+      return h(V);
+    },
+    get disabled() {
+      return h(A);
+    },
+    onSelect: p
+  });
+  var O = z(D, 2);
+  {
+    var R = (P) => {
+      Ke(P, {
+        class: "input-btn-more",
+        style: "margin-left: auto",
+        onclick: $,
+        children: (H, I) => {
+          var B = ty();
+          L(H, B);
+        },
+        $$slots: { default: !0 }
+      });
+    };
+    ke(O, (P) => {
+      (h(c).dataType === "Object" || h(c).dataType === "Array") && h(c).addChildDisabled !== !0 && P(R);
+    });
+  }
+  Z(M);
+  var S = z(M, 2), T = X(S);
+  An(
+    Lo(T, {
+      placement: "bottom",
+      floating: (H) => {
+        var I = ry(), B = X(I), F = z(X(B));
+        $t(F, {
+          rows: 1,
+          style: "width: 100%;",
+          onchange: (ue) => {
+            const me = ue.target.value;
+            d("defaultValue", me);
+          }
+        }), Z(B);
+        var K = z(B, 2), ie = z(X(K));
+        $t(ie, {
+          rows: 3,
+          style: "width: 100%;",
+          onchange: (ue) => {
+            const me = ue.target.value;
+            d("description", me);
+          }
+        }), Z(K);
+        var ee = z(K, 2);
+        {
+          var W = (ue) => {
+            var me = ny(), Ce = X(me);
+            Ke(Ce, {
+              onclick: C,
+              children: (ge, ze) => {
+                Se();
+                var G = Ie("删除");
+                L(ge, G);
+              },
+              $$slots: { default: !0 }
+            }), Z(me), L(ue, me);
+          };
+          ke(ee, (ue) => {
+            h(c).deleteDisabled !== !0 && ue(W);
+          });
+        }
+        Z(I), L(H, I);
+      },
+      children: (H, I) => {
+        Ui(H, {});
+      },
+      $$slots: { floating: !0, default: !0 }
+    }),
+    (H) => x = H,
+    () => x
+  ), Z(S), L(e, m);
+  var k = fe({
+    get parameter() {
+      return i();
+    },
+    set parameter(P) {
+      i(P), y();
+    },
+    get position() {
+      return s();
+    },
+    set position(P) {
+      s(P), y();
+    },
+    get dataKeyName() {
+      return a();
+    },
+    set dataKeyName(P) {
+      a(P), y();
+    }
+  });
+  return r(), k;
+}
+ae(Pd, { parameter: {}, position: {}, dataKeyName: {} }, [], [], !0);
+var sy = /* @__PURE__ */ ne("<!> <!>", 1), ay = /* @__PURE__ */ ne('<div class="none-params svelte-1sm1mgi"> </div>'), ly = /* @__PURE__ */ ne('<div class="input-header svelte-1sm1mgi">参数名称</div> <div class="input-header svelte-1sm1mgi">参数类型</div> <div class="input-header svelte-1sm1mgi"></div>', 1), uy = /* @__PURE__ */ ne('<div class="input-container svelte-1sm1mgi"><!> <!></div>');
+const cy = {
+  hash: "svelte-1sm1mgi",
+  code: `.input-container.svelte-1sm1mgi {display:grid;grid-template-columns:40% 50% 10%;row-gap:5px;column-gap:3px;}.input-container.svelte-1sm1mgi .none-params:where(.svelte-1sm1mgi) {font-size:12px;background:#f8f8f8;height:40px;display:flex;justify-content:center;align-items:center;border-radius:5px;width:calc(100% - 5px);grid-column:1 / -1;
+  /* 从第一列开始到最后一列结束 */}.input-container.svelte-1sm1mgi .input-header:where(.svelte-1sm1mgi) {font-size:12px;color:#666;}`
+};
+function Rn(e, t) {
+  de(t, !0), Je(e, cy);
+  const [n, r] = tt(), o = () => Q(h(u), "$node", n), i = (C, $ = dt, m = dt) => {
+    var _ = et(), v = be(_);
+    Yt(
+      v,
+      19,
+      $,
+      (b) => `${b.id}_${b.children ? b.children.length : 0}`,
+      (b, N, E) => {
+        var M = sy(), D = be(M);
+        const V = /* @__PURE__ */ Me(() => [...m(), h(E)]);
+        Pd(D, {
+          get parameter() {
+            return h(N);
+          },
+          get position() {
+            return h(V);
+          },
+          get dataKeyName() {
+            return a();
+          }
+        });
+        var A = z(D, 2);
+        {
+          var O = (R) => {
+            var S = /* @__PURE__ */ pe(() => [...m(), h(E)]);
+            i(R, () => h(N).children, () => h(S));
+          };
+          ke(A, (R) => {
+            h(N).children && R(O);
+          });
+        }
+        L(b, M);
+      },
+      (b) => {
+        var N = et(), E = be(N);
+        {
+          var M = (D) => {
+            var V = ay(), A = X(V, !0);
+            Z(V), Ee(() => Rt(A, s())), L(D, V);
+          };
+          ke(E, (D) => {
+            m().length === 0 && D(M);
+          });
+        }
+        L(b, N);
+      }
+    ), L(C, _);
+  }, s = w(t, "noneParameterText", 7, "无输出参数"), a = w(t, "dataKeyName", 7, "outputDefs");
+  let l = ht(), u = /* @__PURE__ */ Me(() => pr(l)), c = /* @__PURE__ */ Me(() => {
+    var C;
+    return [...((C = o()) == null ? void 0 : C.data[a()]) || []];
+  });
+  var f = uy(), d = X(f);
+  {
+    var g = (C) => {
+      var $ = ly();
+      Se(4), L(C, $);
+    };
+    ke(d, (C) => {
+      h(c).length !== 0 && C(g);
+    });
+  }
+  var p = z(d, 2);
+  i(p, () => h(c) || [], () => []), Z(f), L(e, f);
+  var x = fe({
+    get noneParameterText() {
+      return s();
+    },
+    set noneParameterText(C = "无输出参数") {
+      s(C), y();
+    },
+    get dataKeyName() {
+      return a();
+    },
+    set dataKeyName(C = "outputDefs") {
+      a(C), y();
+    }
+  });
+  return r(), x;
+}
+ae(Rn, { noneParameterText: {}, dataKeyName: {} }, [], [], !0);
+var dy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.7134 7.12811L20.4668 7.69379C20.2864 8.10792 19.7136 8.10792 19.5331 7.69379L19.2866 7.12811C18.8471 6.11947 18.0555 5.31641 17.0677 4.87708L16.308 4.53922C15.8973 4.35653 15.8973 3.75881 16.308 3.57612L17.0252 3.25714C18.0384 2.80651 18.8442 1.97373 19.2761 0.930828L19.5293 0.319534C19.7058 -0.106511 20.2942 -0.106511 20.4706 0.319534L20.7238 0.930828C21.1558 1.97373 21.9616 2.80651 22.9748 3.25714L23.6919 3.57612C24.1027 3.75881 24.1027 4.35653 23.6919 4.53922L22.9323 4.87708C21.9445 5.31641 21.1529 6.11947 20.7134 7.12811ZM9 2C13.0675 2 16.426 5.03562 16.9337 8.96494L19.1842 12.5037C19.3324 12.7367 19.3025 13.0847 18.9593 13.2317L17 14.071V17C17 18.1046 16.1046 19 15 19H13.001L13 22H4L4.00025 18.3061C4.00033 17.1252 3.56351 16.0087 2.7555 15.0011C1.65707 13.6313 1 11.8924 1 10C1 5.58172 4.58172 2 9 2ZM9 4C5.68629 4 3 6.68629 3 10C3 11.3849 3.46818 12.6929 4.31578 13.7499C5.40965 15.114 6.00036 16.6672 6.00025 18.3063L6.00013 20H11.0007L11.0017 17H15V12.7519L16.5497 12.0881L15.0072 9.66262L14.9501 9.22118C14.5665 6.25141 12.0243 4 9 4ZM19.4893 16.9929L21.1535 18.1024C22.32 16.3562 23 14.2576 23 12.0001C23 11.317 22.9378 10.6486 22.8186 10L20.8756 10.5C20.9574 10.9878 21 11.489 21 12.0001C21 13.8471 20.4436 15.5642 19.4893 16.9929Z"></path></svg>'), fy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), gy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), hy = /* @__PURE__ */ ne('<div class="heading svelte-wn2kra"><!> <!></div> <!> <!> <div class="setting-title svelte-wn2kra">模型</div> <div class="setting-item svelte-wn2kra"><!> <!></div> <div class="setting-title svelte-wn2kra">采样参数</div> <div class="setting-item svelte-wn2kra"><div class="slider-container svelte-wn2kra"><label class="svelte-wn2kra"> </label> <input type="range" min="0" max="1" step="0.1" class="svelte-wn2kra"></div></div> <div class="setting-item svelte-wn2kra"><div class="slider-container svelte-wn2kra"><label class="svelte-wn2kra"> </label> <input type="range" min="0" max="1" step="0.1" class="svelte-wn2kra"></div></div> <div class="setting-item svelte-wn2kra"><div class="slider-container svelte-wn2kra"><label class="svelte-wn2kra"> </label> <input type="range" min="0" max="100" step="1" class="svelte-wn2kra"></div></div> <div class="setting-title svelte-wn2kra">系统提示词</div> <div class="setting-item svelte-wn2kra"><!></div> <div class="setting-title svelte-wn2kra">用户提示词</div> <div class="setting-item svelte-wn2kra"><!></div> <div class="heading svelte-wn2kra"><!> <!></div> <!>', 1);
+const vy = {
+  hash: "svelte-wn2kra",
+  code: `.heading.svelte-wn2kra {display:flex;margin-bottom:10px;}.setting-title.svelte-wn2kra {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-wn2kra {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}\r
+    /* 新增样式 */.slider-container.svelte-wn2kra {width:100%;display:flex;flex-direction:column;gap:4px;}.slider-container.svelte-wn2kra label:where(.svelte-wn2kra) {font-size:12px;color:#666;display:flex;justify-content:space-between;align-items:center;}input[type="range"].svelte-wn2kra {width:100%;height:4px;background:#ddd;border-radius:2px;outline:none;-webkit-appearance:none;}input[type="range"].svelte-wn2kra::-webkit-slider-thumb {-webkit-appearance:none;width:14px;height:14px;background:#007bff;border-radius:50%;cursor:pointer;}`
+};
+function Nd(e, t) {
+  de(t, !0), Je(e, vy);
+  const n = w(t, "data", 7), r = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "data"
+  ]), o = ht(), { addParameter: i } = kn(), s = Oo();
+  let a = Un(Tt([]));
+  un(async () => {
+    var c, f;
+    const u = await ((f = (c = s.provider) == null ? void 0 : c.llm) == null ? void 0 : f.call(c));
+    h(a).push(...u || []);
+  });
+  const { updateNodeData: l } = Dt();
+  return dn(e, ut(
+    {
+      get data() {
+        return n();
+      }
+    },
+    () => r,
+    {
+      icon: (c) => {
+        var f = dy();
+        L(c, f);
+      },
+      children: (c, f) => {
+        var d = hy(), g = be(d), p = X(g);
+        Ge(p, {
+          level: 3,
+          children: (G, se) => {
+            Se();
+            var Te = Ie("输入参数");
+            L(G, Te);
+          },
+          $$slots: { default: !0 }
+        });
+        var x = z(p, 2);
+        Ke(x, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            i(o);
+          },
+          children: (G, se) => {
+            var Te = fy();
+            L(G, Te);
+          },
+          $$slots: { default: !0 }
+        }), Z(g);
+        var C = z(g, 2);
+        zt(C, {});
+        var $ = z(C, 2);
+        Ge($, {
+          level: 3,
+          mt: "10px",
+          children: (G, se) => {
+            Se();
+            var Te = Ie("模型设置");
+            L(G, Te);
+          },
+          $$slots: { default: !0 }
+        });
+        var m = z($, 4), _ = X(m);
+        const v = /* @__PURE__ */ Me(() => n().llmId ? [n().llmId] : []);
+        sn(_, {
+          get items() {
+            return h(a);
+          },
+          style: "width: 100%",
+          placeholder: "请选择模型",
+          onSelect: (G) => {
+            const se = G.value;
+            l(o, () => ({ llmId: se }));
+          },
+          get value() {
+            return h(v);
+          }
+        });
+        var b = z(_, 2);
+        Ui(b, {}), Z(m);
+        var N = z(m, 4), E = X(N), M = X(E), D = X(M);
+        Z(M);
+        var V = z(M, 2);
+        io(V), Z(E), Z(N);
+        var A = z(N, 2), O = X(A), R = X(O), S = X(R);
+        Z(R);
+        var T = z(R, 2);
+        io(T), Z(O), Z(A);
+        var k = z(A, 2), P = X(k), H = X(P), I = X(H);
+        Z(H);
+        var B = z(H, 2);
+        io(B), Z(P), Z(k);
+        var F = z(k, 4), K = X(F);
+        const ie = /* @__PURE__ */ Me(() => n().systemPrompt || "");
+        $t(K, {
+          rows: 5,
+          placeholder: "请输入系统提示词",
+          style: "width: 100%",
+          get value() {
+            return h(ie);
+          },
+          oninput: (G) => {
+            l(o, { systemPrompt: G.target.value });
+          }
+        }), Z(F);
+        var ee = z(F, 4), W = X(ee);
+        const ue = /* @__PURE__ */ Me(() => n().userPrompt || "");
+        $t(W, {
+          rows: 5,
+          placeholder: "请输入用户提示词",
+          style: "width: 100%",
+          get value() {
+            return h(ue);
+          },
+          oninput: (G) => {
+            l(o, { userPrompt: G.target.value });
+          }
+        }), Z(ee);
+        var me = z(ee, 2), Ce = X(me);
+        Ge(Ce, {
+          level: 3,
+          mt: "10px",
+          children: (G, se) => {
+            Se();
+            var Te = Ie("输出参数");
+            L(G, Te);
+          },
+          $$slots: { default: !0 }
+        });
+        var ge = z(Ce, 2);
+        Ke(ge, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            i(o, "outputDefs");
+          },
+          children: (G, se) => {
+            var Te = gy();
+            L(G, Te);
+          },
+          $$slots: { default: !0 }
+        }), Z(me);
+        var ze = z(me, 2);
+        Rn(ze, {}), Ee(() => {
+          Rt(D, `Temperature: ${n().temperature ?? 0.5}`), Qi(V, n().temperature ?? 0.5), Rt(S, `Top P: ${n().topP ?? 0.9}`), Qi(T, n().topP ?? 0.9), Rt(I, `Top K: ${n().topK ?? 50}`), Qi(B, n().topK ?? 50);
+        }), Ye("mousedown", V, es(function(G) {
+          Ve.call(this, t, G);
+        })), Ye("input", V, (G) => l(o, { temperature: parseFloat(G.target.value) })), Ye("mousedown", T, es(function(G) {
+          Ve.call(this, t, G);
+        })), Ye("input", T, (G) => l(o, { topP: parseFloat(G.target.value) })), Ye("mousedown", B, es(function(G) {
+          Ve.call(this, t, G);
+        })), Ye("input", B, (G) => l(o, { topK: parseInt(G.target.value) })), L(c, d);
+      },
+      $$slots: { icon: !0, default: !0 }
+    }
+  )), fe({
+    get data() {
+      return n();
+    },
+    set data(u) {
+      n(u), y();
+    }
+  });
+}
+ae(Nd, { data: {} }, [], [], !0);
+var py = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12L15.9289 19.0711L14.5147 17.6569L20.1716 12L14.5147 6.34317L15.9289 4.92896L23 12ZM3.82843 12L9.48528 17.6569L8.07107 19.0711L1 12L8.07107 4.92896L9.48528 6.34317L3.82843 12Z"></path></svg>'), my = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), yy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), wy = /* @__PURE__ */ ne('<div class="heading svelte-15t2v24"><!> <!></div> <!> <!> <div class="setting-title svelte-15t2v24">执行引擎</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">执行代码</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="heading svelte-15t2v24"><!> <!></div> <!>', 1);
+const _y = {
+  hash: "svelte-15t2v24",
+  code: ".heading.svelte-15t2v24 {display:flex;margin-bottom:10px;}.setting-title.svelte-15t2v24 {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-15t2v24 {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}"
+};
+function Md(e, t) {
+  de(t, !0), Je(e, _y);
+  const n = w(t, "data", 7), r = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "data"
+  ]), o = ht(), { addParameter: i } = kn(), { updateNodeData: s } = Dt(), a = [
+    { label: "QLExpress", value: "qlexpress" },
+    { label: "Groovy", value: "groovy" },
+    { label: "JavaScript", value: "js" }
+  ];
+  return dn(e, ut(
+    {
+      get data() {
+        return n();
+      }
+    },
+    () => r,
+    {
+      icon: (u) => {
+        var c = py();
+        L(u, c);
+      },
+      children: (u, c) => {
+        var f = wy(), d = be(f), g = X(d);
+        Ge(g, {
+          level: 3,
+          children: (A, O) => {
+            Se();
+            var R = Ie("输入参数");
+            L(A, R);
+          },
+          $$slots: { default: !0 }
+        });
+        var p = z(g, 2);
+        Ke(p, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            i(o);
+          },
+          children: (A, O) => {
+            var R = my();
+            L(A, R);
+          },
+          $$slots: { default: !0 }
+        }), Z(d);
+        var x = z(d, 2);
+        zt(x, {});
+        var C = z(x, 2);
+        Ge(C, {
+          level: 3,
+          mt: "10px",
+          children: (A, O) => {
+            Se();
+            var R = Ie("代码");
+            L(A, R);
+          },
+          $$slots: { default: !0 }
+        });
+        var $ = z(C, 4), m = X($);
+        const _ = /* @__PURE__ */ Me(() => n().engine ? [n().engine] : ["qlexpress"]);
+        sn(m, {
+          items: a,
+          style: "width: 100%",
+          placeholder: "请选择执行引擎",
+          onSelect: (A) => {
+            const O = A.value;
+            s(o, () => ({ engine: O }));
+          },
+          get value() {
+            return h(_);
+          }
+        }), Z($);
+        var v = z($, 4), b = X(v);
+        const N = /* @__PURE__ */ Me(() => n().code || "");
+        $t(b, {
+          rows: 10,
+          placeholder: "请输入执行代码，注：输出内容需添加到_result中，如：_result.put(key, value)",
+          style: "width: 100%",
+          onchange: (A) => {
+            s(o, () => ({ code: A.target.value }));
+          },
+          get value() {
+            return h(N);
+          }
+        }), Z(v);
+        var E = z(v, 2), M = X(E);
+        Ge(M, {
+          level: 3,
+          mt: "10px",
+          children: (A, O) => {
+            Se();
+            var R = Ie("输出参数");
+            L(A, R);
+          },
+          $$slots: { default: !0 }
+        });
+        var D = z(M, 2);
+        Ke(D, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            i(o, "outputDefs");
+          },
+          children: (A, O) => {
+            var R = yy();
+            L(A, R);
+          },
+          $$slots: { default: !0 }
+        }), Z(E);
+        var V = z(E, 2);
+        Rn(V, {}), L(u, f);
+      },
+      $$slots: { icon: !0, default: !0 }
+    }
+  )), fe({
+    get data() {
+      return n();
+    },
+    set data(l) {
+      n(l), y();
+    }
+  });
+}
+ae(Md, { data: {} }, [], [], !0);
+var xy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4ZM4 5V19H20V5H4ZM7 8H17V11H15V10H13V14H14.5V16H9.5V14H11V10H9V11H7V8Z"></path></svg>'), by = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), Cy = /* @__PURE__ */ ne('<div class="heading svelte-15t2v24"><!> <!></div> <!> <!> <div class="setting-title svelte-15t2v24">执行代码</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="heading svelte-15t2v24"><!></div> <!>', 1);
+const ky = {
+  hash: "svelte-15t2v24",
+  code: ".heading.svelte-15t2v24 {display:flex;margin-bottom:10px;}.setting-title.svelte-15t2v24 {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-15t2v24 {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}"
+};
+function Td(e, t) {
+  de(t, !0), Je(e, ky);
+  const n = w(t, "data", 7), r = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "data"
+  ]), o = ht(), { addParameter: i } = kn(), { updateNodeData: s } = Dt();
+  return Nr(() => {
+    (!n().outputDefs || n().outputDefs.length === 0) && i(o, "outputDefs", {
+      name: "output",
+      dataType: "String",
+      dataTypeDisabled: !0,
+      deleteDisabled: !0
+    });
+  }), dn(e, ut(
+    {
+      get data() {
+        return n();
+      }
+    },
+    () => r,
+    {
+      icon: (l) => {
+        var u = xy();
+        L(l, u);
+      },
+      children: (l, u) => {
+        var c = Cy(), f = be(c), d = X(f);
+        Ge(d, {
+          level: 3,
+          children: (N, E) => {
+            Se();
+            var M = Ie("输入参数");
+            L(N, M);
+          },
+          $$slots: { default: !0 }
+        });
+        var g = z(d, 2);
+        Ke(g, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            i(o);
+          },
+          children: (N, E) => {
+            var M = by();
+            L(N, M);
+          },
+          $$slots: { default: !0 }
+        }), Z(f);
+        var p = z(f, 2);
+        zt(p, {});
+        var x = z(p, 2);
+        Ge(x, {
+          level: 3,
+          mt: "10px",
+          children: (N, E) => {
+            Se();
+            var M = Ie("代码");
+            L(N, M);
+          },
+          $$slots: { default: !0 }
+        });
+        var C = z(x, 4), $ = X(C);
+        const m = /* @__PURE__ */ Me(() => n().template || "");
+        $t($, {
+          rows: 10,
+          placeholder: "请输入执行代码",
+          style: "width: 100%",
+          onchange: (N) => {
+            s(o, () => ({ template: N.target.value }));
+          },
+          get value() {
+            return h(m);
+          }
+        }), Z(C);
+        var _ = z(C, 2), v = X(_);
+        Ge(v, {
+          level: 3,
+          mt: "10px",
+          children: (N, E) => {
+            Se();
+            var M = Ie("输出参数");
+            L(N, M);
+          },
+          $$slots: { default: !0 }
+        }), Z(_);
+        var b = z(_, 2);
+        Rn(b, {}), L(l, c);
+      },
+      $$slots: { icon: !0, default: !0 }
+    }
+  )), fe({
+    get data() {
+      return n();
+    },
+    set data(a) {
+      n(a), y();
+    }
+  });
+}
+ae(Td, { data: {} }, [], [], !0);
+var $y = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.23509 6.45329C4.85101 7.89148 4 9.84636 4 12C4 16.4183 7.58172 20 12 20C13.0808 20 14.1116 19.7857 15.0521 19.3972C15.1671 18.6467 14.9148 17.9266 14.8116 17.6746C14.582 17.115 13.8241 16.1582 12.5589 14.8308C12.2212 14.4758 12.2429 14.2035 12.3636 13.3943L12.3775 13.3029C12.4595 12.7486 12.5971 12.4209 14.4622 12.1248C15.4097 11.9746 15.6589 12.3533 16.0043 12.8777C16.0425 12.9358 16.0807 12.9928 16.1198 13.0499C16.4479 13.5297 16.691 13.6394 17.0582 13.8064C17.2227 13.881 17.428 13.9751 17.7031 14.1314C18.3551 14.504 18.3551 14.9247 18.3551 15.8472V15.9518C18.3551 16.3434 18.3168 16.6872 18.2566 16.9859C19.3478 15.6185 20 13.8854 20 12C20 8.70089 18.003 5.8682 15.1519 4.64482C14.5987 5.01813 13.8398 5.54726 13.575 5.91C13.4396 6.09538 13.2482 7.04166 12.6257 7.11976C12.4626 7.14023 12.2438 7.12589 12.012 7.11097C11.3905 7.07058 10.5402 7.01606 10.268 7.75495C10.0952 8.2232 10.0648 9.49445 10.6239 10.1543C10.7134 10.2597 10.7307 10.4547 10.6699 10.6735C10.59 10.9608 10.4286 11.1356 10.3783 11.1717C10.2819 11.1163 10.0896 10.8931 9.95938 10.7412C9.64554 10.3765 9.25405 9.92233 8.74797 9.78176C8.56395 9.73083 8.36166 9.68867 8.16548 9.64736C7.6164 9.53227 6.99443 9.40134 6.84992 9.09302C6.74442 8.8672 6.74488 8.55621 6.74529 8.22764C6.74529 7.8112 6.74529 7.34029 6.54129 6.88256C6.46246 6.70541 6.35689 6.56446 6.23509 6.45329ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z"></path></svg>'), Ey = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), Sy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), Py = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), Ny = /* @__PURE__ */ ne('<div class="heading svelte-1vtcqdz" style="padding-top: 10px"><!> <!></div> <!>', 1), My = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), Ty = /* @__PURE__ */ ne('<div class="heading svelte-1vtcqdz" style="padding-top: 10px"><!> <!></div> <!>', 1), Hy = /* @__PURE__ */ ne('<div style="width: 100%"><!></div>'), Vy = /* @__PURE__ */ ne('<div style="width: 100%"><!></div>'), Dy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), Ay = /* @__PURE__ */ ne('<div style="display: flex;gap: 2px;width: 100%;padding: 10px 0"><div><!></div> <div style="width: 100%"><!></div></div> <div class="heading svelte-1vtcqdz"><!> <!></div> <!> <div class="heading svelte-1vtcqdz" style="padding-top: 10px"><!> <!></div> <!> <!> <div class="radio-group svelte-1vtcqdz"><label class="svelte-1vtcqdz"><!>none</label> <label class="svelte-1vtcqdz"><!>form-data</label> <label class="svelte-1vtcqdz"><!>x-www-form-urlencoded</label> <label class="svelte-1vtcqdz"><!>json</label> <label class="svelte-1vtcqdz"><!>raw</label></div> <!> <!> <!> <!> <div class="heading svelte-1vtcqdz"><!> <!></div> <!>', 1);
+const Ly = {
+  hash: "svelte-1vtcqdz",
+  code: ".heading.svelte-1vtcqdz {display:flex;margin-bottom:10px;}.radio-group.svelte-1vtcqdz {display:flex;margin:10px 0;}.radio-group.svelte-1vtcqdz label:where(.svelte-1vtcqdz) {display:flex;font-size:14px;}"
+};
+function Hd(e, t) {
+  de(t, !0), Je(e, Ly);
+  const n = w(t, "data", 7), r = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "data"
+  ]), o = [
+    { value: "get", label: "GET" },
+    { value: "post", label: "POST" },
+    { value: "put", label: "PUT" },
+    { value: "delete", label: "DELETE" },
+    { value: "head", label: "HEAD" },
+    { value: "patch", label: "PATCH" }
+  ], i = ht(), { addParameter: s } = kn(), { updateNodeData: a } = Dt();
+  return dn(e, ut(
+    {
+      get data() {
+        return n();
+      }
+    },
+    () => r,
+    {
+      icon: (u) => {
+        var c = $y();
+        L(u, c);
+      },
+      children: (u, c) => {
+        var f = Ay(), d = be(f), g = X(d), p = X(g);
+        const x = /* @__PURE__ */ Me(() => n().method ? [n().method] : ["get"]);
+        sn(p, {
+          items: o,
+          style: "width: 100%",
+          placeholder: "请选择请求方式",
+          onSelect: (oe) => {
+            const ve = oe.value;
+            a(i, () => ({ method: ve }));
+          },
+          get value() {
+            return h(x);
+          }
+        }), Z(g);
+        var C = z(g, 2), $ = X(C);
+        const m = /* @__PURE__ */ Me(() => n().url || "");
+        xt($, {
+          placeholder: "请输入url",
+          style: "width: 100%",
+          onchange: (oe) => {
+            a(i, () => ({ url: oe.target.value }));
+          },
+          get value() {
+            return h(m);
+          }
+        }), Z(C), Z(d);
+        var _ = z(d, 2), v = X(_);
+        Ge(v, {
+          level: 3,
+          children: (oe, ve) => {
+            Se();
+            var xe = Ie("Http 头信息");
+            L(oe, xe);
+          },
+          $$slots: { default: !0 }
+        });
+        var b = z(v, 2);
+        Ke(b, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            s(i, "headers");
+          },
+          children: (oe, ve) => {
+            var xe = Ey();
+            L(oe, xe);
+          },
+          $$slots: { default: !0 }
+        }), Z(_);
+        var N = z(_, 2);
+        zt(N, { dataKeyName: "headers" });
+        var E = z(N, 2), M = X(E);
+        Ge(M, {
+          level: 3,
+          children: (oe, ve) => {
+            Se();
+            var xe = Ie("参数");
+            L(oe, xe);
+          },
+          $$slots: { default: !0 }
+        });
+        var D = z(M, 2);
+        Ke(D, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            s(i, "urlParameters");
+          },
+          children: (oe, ve) => {
+            var xe = Sy();
+            L(oe, xe);
+          },
+          $$slots: { default: !0 }
+        }), Z(E);
+        var V = z(E, 2);
+        zt(V, { dataKeyName: "urlParameters" });
+        var A = z(V, 2);
+        Ge(A, {
+          level: 3,
+          mt: "10px",
+          children: (oe, ve) => {
+            Se();
+            var xe = Ie("Body");
+            L(oe, xe);
+          },
+          $$slots: { default: !0 }
+        });
+        var O = z(A, 2), R = X(O), S = X(R);
+        const T = /* @__PURE__ */ Me(() => !n().bodyType);
+        xt(S, {
+          type: "radio",
+          name: "bodyType",
+          value: "",
+          get checked() {
+            return h(T);
+          },
+          onchange: (oe) => {
+            var ve;
+            (ve = oe.target) != null && ve.checked && a(i, { bodyType: "" });
+          }
+        }), Se(), Z(R);
+        var k = z(R, 2), P = X(k);
+        const H = /* @__PURE__ */ Me(() => n().bodyType === "form-data");
+        xt(P, {
+          type: "radio",
+          name: "bodyType",
+          value: "form-data",
+          get checked() {
+            return h(H);
+          },
+          onchange: (oe) => {
+            var ve;
+            (ve = oe.target) != null && ve.checked && a(i, { bodyType: "form-data" });
+          }
+        }), Se(), Z(k);
+        var I = z(k, 2), B = X(I);
+        const F = /* @__PURE__ */ Me(() => n().bodyType === "x-www-form-urlencoded");
+        xt(B, {
+          type: "radio",
+          name: "bodyType",
+          value: "x-www-form-urlencoded",
+          get checked() {
+            return h(F);
+          },
+          onchange: (oe) => {
+            var ve;
+            (ve = oe.target) != null && ve.checked && a(i, { bodyType: "x-www-form-urlencoded" });
+          }
+        }), Se(), Z(I);
+        var K = z(I, 2), ie = X(K);
+        const ee = /* @__PURE__ */ Me(() => n().bodyType === "json");
+        xt(ie, {
+          type: "radio",
+          name: "bodyType",
+          value: "json",
+          get checked() {
+            return h(ee);
+          },
+          onchange: (oe) => {
+            var ve;
+            (ve = oe.target) != null && ve.checked && a(i, { bodyType: "json" });
+          }
+        }), Se(), Z(K);
+        var W = z(K, 2), ue = X(W);
+        const me = /* @__PURE__ */ Me(() => n().bodyType === "raw");
+        xt(ue, {
+          type: "radio",
+          name: "bodyType",
+          value: "raw",
+          get checked() {
+            return h(me);
+          },
+          onchange: (oe) => {
+            var ve;
+            (ve = oe.target) != null && ve.checked && a(i, { bodyType: "raw" });
+          }
+        }), Se(), Z(W), Z(O);
+        var Ce = z(O, 2);
+        {
+          var ge = (oe) => {
+            var ve = Ny(), xe = be(ve), Oe = X(xe);
+            Ge(Oe, {
+              level: 3,
+              children: (J, Re) => {
+                Se();
+                var le = Ie("参数");
+                L(J, le);
+              },
+              $$slots: { default: !0 }
+            });
+            var ct = z(Oe, 2);
+            Ke(ct, {
+              class: "input-btn-more",
+              style: "margin-left: auto",
+              onclick: () => {
+                s(i, "fromData");
+              },
+              children: (J, Re) => {
+                var le = Py();
+                L(J, le);
+              },
+              $$slots: { default: !0 }
+            }), Z(xe);
+            var lt = z(xe, 2);
+            zt(lt, { dataKeyName: "fromData" }), L(oe, ve);
+          };
+          ke(Ce, (oe) => {
+            n().bodyType === "form-data" && oe(ge);
+          });
+        }
+        var ze = z(Ce, 2);
+        {
+          var G = (oe) => {
+            var ve = Ty(), xe = be(ve), Oe = X(xe);
+            Ge(Oe, {
+              level: 3,
+              children: (J, Re) => {
+                Se();
+                var le = Ie("参数");
+                L(J, le);
+              },
+              $$slots: { default: !0 }
+            });
+            var ct = z(Oe, 2);
+            Ke(ct, {
+              class: "input-btn-more",
+              style: "margin-left: auto",
+              onclick: () => {
+                s(i, "fromUrlencoded");
+              },
+              children: (J, Re) => {
+                var le = My();
+                L(J, le);
+              },
+              $$slots: { default: !0 }
+            }), Z(xe);
+            var lt = z(xe, 2);
+            zt(lt, { dataKeyName: "fromUrlencoded" }), L(oe, ve);
+          };
+          ke(ze, (oe) => {
+            n().bodyType === "x-www-form-urlencoded" && oe(G);
+          });
+        }
+        var se = z(ze, 2);
+        {
+          var Te = (oe) => {
+            var ve = Hy(), xe = X(ve);
+            $t(xe, {
+              rows: "5",
+              style: "width: 100%",
+              placeholder: "请输入 json 信息",
+              get value() {
+                return n().bodyJson;
+              },
+              oninput: (Oe) => {
+                a(i, { bodyJson: Oe.target.value });
+              }
+            }), Z(ve), L(oe, ve);
+          };
+          ke(se, (oe) => {
+            n().bodyType === "json" && oe(Te);
+          });
+        }
+        var Ae = z(se, 2);
+        {
+          var Xe = (oe) => {
+            var ve = Vy(), xe = X(ve);
+            $t(xe, {
+              rows: "5",
+              style: "width: 100%",
+              placeholder: "请输入请求信息",
+              get value() {
+                return n().bodyRaw;
+              },
+              oninput: (Oe) => {
+                a(i, { bodyRaw: Oe.target.value });
+              }
+            }), Z(ve), L(oe, ve);
+          };
+          ke(Ae, (oe) => {
+            n().bodyType === "raw" && oe(Xe);
+          });
+        }
+        var te = z(Ae, 2), Fe = X(te);
+        Ge(Fe, {
+          level: 3,
+          mt: "10px",
+          children: (oe, ve) => {
+            Se();
+            var xe = Ie("输出参数");
+            L(oe, xe);
+          },
+          $$slots: { default: !0 }
+        });
+        var Le = z(Fe, 2);
+        Ke(Le, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            s(i, "outputDefs");
+          },
+          children: (oe, ve) => {
+            var xe = Dy();
+            L(oe, xe);
+          },
+          $$slots: { default: !0 }
+        }), Z(te);
+        var Qe = z(te, 2);
+        Rn(Qe, {}), L(u, f);
+      },
+      $$slots: { icon: !0, default: !0 }
+    }
+  )), fe({
+    get data() {
+      return n();
+    },
+    set data(l) {
+      n(l), y();
+    }
+  });
+}
+ae(Hd, { data: {} }, [], [], !0);
+var Oy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 5C13.567 5 12 6.567 12 8.5C12 10.433 13.567 12 15.5 12C17.433 12 19 10.433 19 8.5C19 6.567 17.433 5 15.5 5ZM10 8.5C10 5.46243 12.4624 3 15.5 3C18.5376 3 21 5.46243 21 8.5C21 9.6575 20.6424 10.7315 20.0317 11.6175L22.7071 14.2929L21.2929 15.7071L18.6175 13.0317C17.7315 13.6424 16.6575 14 15.5 14C12.4624 14 10 11.5376 10 8.5ZM3 4H8V6H3V4ZM3 11H8V13H3V11ZM21 18V20H3V18H21Z"></path></svg>'), Iy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), zy = /* @__PURE__ */ ne('<div class="heading svelte-15t2v24"><!> <!></div> <!> <!> <div class="setting-title svelte-15t2v24">知识库</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">获取数据量</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="heading svelte-15t2v24"><!></div> <!>', 1);
+const Ry = {
+  hash: "svelte-15t2v24",
+  code: ".heading.svelte-15t2v24 {display:flex;margin-bottom:10px;}.setting-title.svelte-15t2v24 {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-15t2v24 {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}"
+};
+function Vd(e, t) {
+  de(t, !0), Je(e, Ry);
+  const n = w(t, "data", 7), r = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "data"
+  ]), o = ht(), { addParameter: i } = kn(), s = Oo();
+  let a = Un(Tt([]));
+  un(async () => {
+    var c, f;
+    const u = await ((f = (c = s.provider) == null ? void 0 : c.knowledge) == null ? void 0 : f.call(c));
+    h(a).push(...u || []);
+  });
+  const { updateNodeData: l } = Dt();
+  return Nr(() => {
+    (!n().outputDefs || n().outputDefs.length === 0) && i(o, "outputDefs", {
+      name: "documents",
+      dataType: "Array",
+      nameDisabled: !0,
+      dataTypeDisabled: !0,
+      addChildDisabled: !0,
+      children: [
+        {
+          name: "title",
+          dataType: "String",
+          nameDisabled: !0,
+          dataTypeDisabled: !0
+        },
+        {
+          name: "content",
+          dataType: "String",
+          nameDisabled: !0,
+          dataTypeDisabled: !0
+        },
+        {
+          name: "documentId",
+          dataType: "Number",
+          nameDisabled: !0,
+          dataTypeDisabled: !0
+        },
+        {
+          name: "knowledgeId",
+          dataType: "Number",
+          nameDisabled: !0,
+          dataTypeDisabled: !0
+        }
+      ]
+    });
+  }), dn(e, ut(
+    {
+      get data() {
+        return n();
+      }
+    },
+    () => r,
+    {
+      icon: (c) => {
+        var f = Oy();
+        L(c, f);
+      },
+      children: (c, f) => {
+        var d = zy(), g = be(d), p = X(g);
+        Ge(p, {
+          level: 3,
+          children: (V, A) => {
+            Se();
+            var O = Ie("输入参数");
+            L(V, O);
+          },
+          $$slots: { default: !0 }
+        });
+        var x = z(p, 2);
+        Ke(x, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            i(o);
+          },
+          children: (V, A) => {
+            var O = Iy();
+            L(V, O);
+          },
+          $$slots: { default: !0 }
+        }), Z(g);
+        var C = z(g, 2);
+        zt(C, {});
+        var $ = z(C, 2);
+        Ge($, {
+          level: 3,
+          mt: "10px",
+          children: (V, A) => {
+            Se();
+            var O = Ie("知识库设置");
+            L(V, O);
+          },
+          $$slots: { default: !0 }
+        });
+        var m = z($, 4), _ = X(m);
+        const v = /* @__PURE__ */ Me(() => n().knowledgeId ? [n().knowledgeId] : []);
+        sn(_, {
+          get items() {
+            return h(a);
+          },
+          style: "width: 100%",
+          placeholder: "请选择知识库",
+          onSelect: (V) => {
+            const A = V.value;
+            l(o, () => ({ knowledgeId: A }));
+          },
+          get value() {
+            return h(v);
+          }
+        }), Z(m);
+        var b = z(m, 4), N = X(b);
+        xt(N, { placeholder: "搜索的数据条数", style: "width: 100%" }), Z(b);
+        var E = z(b, 2), M = X(E);
+        Ge(M, {
+          level: 3,
+          mt: "10px",
+          children: (V, A) => {
+            Se();
+            var O = Ie("输出参数");
+            L(V, O);
+          },
+          $$slots: { default: !0 }
+        }), Z(E);
+        var D = z(E, 2);
+        Rn(D, {}), L(c, d);
+      },
+      $$slots: { icon: !0, default: !0 }
+    }
+  )), fe({
+    get data() {
+      return n();
+    },
+    set data(u) {
+      n(u), y();
+    }
+  });
+}
+ae(Vd, { data: {} }, [], [], !0);
+var By = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>'), Yy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), Zy = /* @__PURE__ */ ne('<div class="heading svelte-15t2v24"><!> <!></div> <!> <!> <div class="setting-title svelte-15t2v24">API 服务商</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">API Key</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">关键字</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">数据量</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">其他参数</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="heading svelte-15t2v24"><!></div> <!>', 1);
+const Xy = {
+  hash: "svelte-15t2v24",
+  code: ".heading.svelte-15t2v24 {display:flex;margin-bottom:10px;}.setting-title.svelte-15t2v24 {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-15t2v24 {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}"
+};
+function Dd(e, t) {
+  de(t, !0), Je(e, Xy);
+  const n = w(t, "data", 7), r = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "data"
+  ]), o = ht(), { addParameter: i } = kn(), s = Oo();
+  let a = Un(Tt([]));
+  un(async () => {
+    var c;
+    const u = await ((c = s.provider) == null ? void 0 : c.knowledge());
+    h(a).push(...u || []);
+  });
+  const { updateNodeData: l } = Dt();
+  return Nr(() => {
+    (!n().outputDefs || n().outputDefs.length === 0) && i(o, "outputDefs", {
+      name: "documents",
+      dataType: "Array",
+      nameDisabled: !0,
+      dataTypeDisabled: !0,
+      addChildDisabled: !0,
+      children: [
+        {
+          name: "title",
+          dataType: "String",
+          nameDisabled: !0,
+          dataTypeDisabled: !0
+        },
+        {
+          name: "content",
+          dataType: "String",
+          nameDisabled: !0,
+          dataTypeDisabled: !0
+        },
+        {
+          name: "documentId",
+          dataType: "Number",
+          nameDisabled: !0,
+          dataTypeDisabled: !0
+        },
+        {
+          name: "knowledgeId",
+          dataType: "Number",
+          nameDisabled: !0,
+          dataTypeDisabled: !0
+        }
+      ]
+    });
+  }), dn(e, ut(
+    {
+      get data() {
+        return n();
+      }
+    },
+    () => r,
+    {
+      icon: (c) => {
+        var f = By();
+        L(c, f);
+      },
+      children: (c, f) => {
+        var d = Zy(), g = be(d), p = X(g);
+        Ge(p, {
+          level: 3,
+          children: (k, P) => {
+            Se();
+            var H = Ie("输入参数");
+            L(k, H);
+          },
+          $$slots: { default: !0 }
+        });
+        var x = z(p, 2);
+        Ke(x, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            i(o);
+          },
+          children: (k, P) => {
+            var H = Yy();
+            L(k, H);
+          },
+          $$slots: { default: !0 }
+        }), Z(g);
+        var C = z(g, 2);
+        zt(C, {});
+        var $ = z(C, 2);
+        Ge($, {
+          level: 3,
+          mt: "10px",
+          children: (k, P) => {
+            Se();
+            var H = Ie("搜索引擎设置");
+            L(k, H);
+          },
+          $$slots: { default: !0 }
+        });
+        var m = z($, 4), _ = X(m);
+        const v = /* @__PURE__ */ Me(() => n().knowledgeId ? [n().knowledgeId] : []);
+        sn(_, {
+          get items() {
+            return h(a);
+          },
+          style: "width: 100%",
+          placeholder: "请选择 API 服务商",
+          onSelect: (k) => {
+            const P = k.value;
+            l(o, () => ({ knowledgeId: P }));
+          },
+          get value() {
+            return h(v);
+          }
+        }), Z(m);
+        var b = z(m, 4), N = X(b);
+        xt(N, {
+          placeholder: "请输入 API Key",
+          style: "width: 100%"
+        }), Z(b);
+        var E = z(b, 4), M = X(E);
+        xt(M, { placeholder: "请输入关键字", style: "width: 100%" }), Z(E);
+        var D = z(E, 4), V = X(D);
+        xt(V, { placeholder: "搜索的数据条数", style: "width: 100%" }), Z(D);
+        var A = z(D, 4), O = X(A);
+        $t(O, {
+          rows: 3,
+          placeholder: "请输入其他参数（Property 格式）",
+          style: "width: 100%"
+        }), Z(A);
+        var R = z(A, 2), S = X(R);
+        Ge(S, {
+          level: 3,
+          mt: "10px",
+          children: (k, P) => {
+            Se();
+            var H = Ie("输出参数");
+            L(k, H);
+          },
+          $$slots: { default: !0 }
+        }), Z(R);
+        var T = z(R, 2);
+        Rn(T, {}), L(c, d);
+      },
+      $$slots: { icon: !0, default: !0 }
+    }
+  )), fe({
+    get data() {
+      return n();
+    },
+    set data(u) {
+      n(u), y();
+    }
+  });
+}
+ae(Dd, { data: {} }, [], [], !0);
+var Fy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path></svg>'), Wy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), Ky = /* @__PURE__ */ ne('<div class="heading svelte-md8tgj"><!> <!></div> <!> <div class="heading svelte-md8tgj"><!></div> <!>', 1);
+const qy = {
+  hash: "svelte-md8tgj",
+  code: ".heading.svelte-md8tgj {display:flex;margin-bottom:10px;}.loop_handle_wrapper ::after {content:'循环体';width:100px;height:20px;background:#000;color:#fff;display:flex;justify-content:center;align-items:center;}"
+};
+function Ad(e, t) {
+  de(t, !0), Je(e, qy);
+  const n = w(t, "data", 7), r = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "data"
+  ]), o = ht(), { addParameter: i } = kn(), s = Oo();
+  let a = Un(Tt([]));
+  return un(async () => {
+    var u;
+    const l = await ((u = s.provider) == null ? void 0 : u.knowledge());
+    h(a).push(...l || []);
+  }), dn(e, ut(
+    {
+      get data() {
+        return n();
+      }
+    },
+    () => r,
+    {
+      icon: (c) => {
+        var f = Fy();
+        L(c, f);
+      },
+      handle: (c) => {
+        Qn(c, {
+          type: "source",
+          get position() {
+            return $e.Bottom;
+          },
+          id: "loop_handle",
+          style: "bottom: -12px;width: 100px",
+          class: "loop_handle_wrapper"
+        });
+      },
+      children: (c, f) => {
+        var d = Ky(), g = be(d), p = X(g);
+        Ge(p, {
+          level: 3,
+          children: (v, b) => {
+            Se();
+            var N = Ie("循环变量");
+            L(v, N);
+          },
+          $$slots: { default: !0 }
+        });
+        var x = z(p, 2);
+        Ke(x, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            i(o);
+          },
+          children: (v, b) => {
+            var N = Wy();
+            L(v, N);
+          },
+          $$slots: { default: !0 }
+        }), Z(g);
+        var C = z(g, 2);
+        zt(C, {});
+        var $ = z(C, 2), m = X($);
+        Ge(m, {
+          level: 3,
+          mt: "10px",
+          children: (v, b) => {
+            Se();
+            var N = Ie("输出参数");
+            L(v, N);
+          },
+          $$slots: { default: !0 }
+        }), Z($);
+        var _ = z($, 2);
+        Rn(_, {}), L(c, d);
+      },
+      $$slots: { icon: !0, handle: !0, default: !0 }
+    }
+  )), fe({
+    get data() {
+      return n();
+    },
+    set data(l) {
+      n(l), y();
+    }
+  });
+}
+ae(Ad, { data: {} }, [], [], !0);
+var Gy = /* @__PURE__ */ _e('<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" p-id="2577" width="200" height="200"><path d="M312.096 408.576l67.84 67.84 45.312-45.216a32 32 0 0 1 45.248 45.248l-45.28 45.248 90.496 90.496 45.28-45.216a32 32 0 0 1 45.248 45.248l-45.248 45.248 67.904 67.872-90.528 90.528a224.064 224.064 0 0 1-292.544 21.024L176.32 906.368a32 32 0 0 1-45.248-45.248l69.504-69.472a224.064 224.064 0 0 1 21.024-292.576l90.496-90.496z m0 90.496L266.848 544.32a160 160 0 0 0-4.8 221.28l4.8 4.992a160 160 0 0 0 221.248 4.8l5.024-4.8 45.248-45.248-226.272-226.24z m610.272-384a32 32 0 0 1 0 45.248l-69.44 69.504a224.064 224.064 0 0 1-21.056 292.544l-90.528 90.528-316.8-316.8 90.56-90.496a224.064 224.064 0 0 1 292.544-21.024l69.44-69.504a32 32 0 0 1 45.28 0zM565.344 246.08l-5.024 4.8-45.248 45.248 226.272 226.272 45.248-45.248a160 160 0 0 0 4.8-221.28l-4.8-4.992a160 160 0 0 0-221.248-4.8z" p-id="2578"></path></svg>'), Uy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), jy = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'), Jy = /* @__PURE__ */ ne('<div class="heading svelte-15t2v24"><!> <!></div> <!> <!> <div class="setting-title svelte-15t2v24">选择内部接口</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="heading svelte-15t2v24"><!> <!></div> <!>', 1);
+const Qy = {
+  hash: "svelte-15t2v24",
+  code: ".heading.svelte-15t2v24 {display:flex;margin-bottom:10px;}.setting-title.svelte-15t2v24 {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-15t2v24 {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}"
+};
+function Ld(e, t) {
+  de(t, !0), Je(e, Qy);
+  const n = w(t, "data", 7), r = /* @__PURE__ */ yt(t, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "$$host",
+    "data"
+  ]), o = ht(), { addParameter: i } = kn(), { updateNodeData: s } = Dt(), a = Oo();
+  let l = Un(Tt([]));
+  return un(async () => {
+    var c, f;
+    const u = await ((f = (c = a.provider) == null ? void 0 : c.internal) == null ? void 0 : f.call(c));
+    h(l).push(...u || []);
+  }), dn(e, ut(
+    {
+      get data() {
+        return n();
+      }
+    },
+    () => r,
+    {
+      icon: (c) => {
+        var f = Gy();
+        L(c, f);
+      },
+      children: (c, f) => {
+        var d = Jy(), g = be(d), p = X(g);
+        Ge(p, {
+          level: 3,
+          children: (D, V) => {
+            Se();
+            var A = Ie("输入参数");
+            L(D, A);
+          },
+          $$slots: { default: !0 }
+        });
+        var x = z(p, 2);
+        Ke(x, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            i(o);
+          },
+          children: (D, V) => {
+            var A = Uy();
+            L(D, A);
+          },
+          $$slots: { default: !0 }
+        }), Z(g);
+        var C = z(g, 2);
+        zt(C, {});
+        var $ = z(C, 2);
+        Ge($, {
+          level: 3,
+          mt: "10px",
+          children: (D, V) => {
+            Se();
+            var A = Ie("接口");
+            L(D, A);
+          },
+          $$slots: { default: !0 }
+        });
+        var m = z($, 4), _ = X(m);
+        const v = /* @__PURE__ */ Me(() => n().method ? [n().method] : [""]);
+        sn(_, {
+          get items() {
+            return h(l);
+          },
+          style: "width: 100%",
+          placeholder: "请选择内部接口",
+          onSelect: (D) => {
+            const V = D.value;
+            s(o, () => ({ method: V }));
+          },
+          get value() {
+            return h(v);
+          }
+        }), Z(m);
+        var b = z(m, 2), N = X(b);
+        Ge(N, {
+          level: 3,
+          mt: "10px",
+          children: (D, V) => {
+            Se();
+            var A = Ie("输出参数");
+            L(D, A);
+          },
+          $$slots: { default: !0 }
+        });
+        var E = z(N, 2);
+        Ke(E, {
+          class: "input-btn-more",
+          style: "margin-left: auto",
+          onclick: () => {
+            i(o, "outputDefs");
+          },
+          children: (D, V) => {
+            var A = jy();
+            L(D, A);
+          },
+          $$slots: { default: !0 }
+        }), Z(b);
+        var M = z(b, 2);
+        Rn(M, {}), L(c, d);
+      },
+      $$slots: { icon: !0, default: !0 }
+    }
+  )), fe({
+    get data() {
+      return n();
+    },
+    set data(u) {
+      n(u), y();
+    }
+  });
+}
+ae(Ld, { data: {} }, [], [], !0);
+const ew = {
+  startNode: kd,
+  codeNode: Md,
+  llmNode: Nd,
+  templateNode: Td,
+  httpNode: Hd,
+  knowledgeNode: Vd,
+  searchEngineNode: Dd,
+  loopNode: Ad,
+  internalNode: Ld,
+  endNode: Sd
+};
+var tw = /* @__PURE__ */ ne("<!> ", 1);
+function Od(e, t) {
+  de(t, !0);
+  const n = w(t, "icon", 7), r = w(t, "title", 7), o = w(t, "type", 7), i = w(t, "description", 7), s = w(t, "extra", 7);
+  return Ke(e, {
+    draggable: !0,
+    ondragstart: (l) => {
+      if (!l.dataTransfer)
+        return null;
+      const u = {
+        type: o(),
+        data: {
+          title: r(),
+          description: i(),
+          systemPrompt: "",
+          userPrompt: "",
+          ...s()
+        }
+      };
+      l.dataTransfer.setData("application/tinyflow", JSON.stringify(u)), l.dataTransfer.effectAllowed = "move";
+    },
+    children: (l, u) => {
+      var c = tw(), f = be(c);
+      mu(f, n);
+      var d = z(f);
+      Ee(() => Rt(d, ` ${r() ?? ""}`)), L(l, c);
+    },
+    $$slots: { default: !0 }
+  }), fe({
+    get icon() {
+      return n();
+    },
+    set icon(l) {
+      n(l), y();
+    },
+    get title() {
+      return r();
+    },
+    set title(l) {
+      r(l), y();
+    },
+    get type() {
+      return o();
+    },
+    set type(l) {
+      o(l), y();
+    },
+    get description() {
+      return i();
+    },
+    set description(l) {
+      i(l), y();
+    },
+    get extra() {
+      return s();
+    },
+    set extra(l) {
+      s(l), y();
+    }
+  });
+}
+ae(
+  Od,
+  {
+    icon: {},
+    title: {},
+    type: {},
+    description: {},
+    extra: {}
+  },
+  [],
+  [],
+  !0
+);
+var nw = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"></path></svg>'), rw = /* @__PURE__ */ _e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.1642 12L12.9571 5.79291L11.5429 7.20712L16.3358 12L11.5429 16.7929L12.9571 18.2071L19.1642 12ZM13.5143 12L7.30722 5.79291L5.89301 7.20712L10.6859 12L5.89301 16.7929L7.30722 18.2071L13.5143 12Z"></path></svg>'), ow = /* @__PURE__ */ ne('<div><div class="tf-toolbar-container "><div class="tf-toolbar-container-header"><!></div> <div class="tf-toolbar-container-body"><div class="tf-toolbar-container-base"></div> <div class="tf-toolbar-container-tools"><!></div></div></div> <!></div>');
+function Id(e) {
+  let t = Un("base"), n = Un("show");
+  const r = [
+    {
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path></svg>',
+      title: "开始节点",
+      type: "startNode",
+      description: "开始定义输入参数"
+    },
+    {
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path></svg>',
+      title: "循环",
+      type: "loopNode",
+      description: "用于循环执行任务"
+    },
+    {
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.7134 7.12811L20.4668 7.69379C20.2864 8.10792 19.7136 8.10792 19.5331 7.69379L19.2866 7.12811C18.8471 6.11947 18.0555 5.31641 17.0677 4.87708L16.308 4.53922C15.8973 4.35653 15.8973 3.75881 16.308 3.57612L17.0252 3.25714C18.0384 2.80651 18.8442 1.97373 19.2761 0.930828L19.5293 0.319534C19.7058 -0.106511 20.2942 -0.106511 20.4706 0.319534L20.7238 0.930828C21.1558 1.97373 21.9616 2.80651 22.9748 3.25714L23.6919 3.57612C24.1027 3.75881 24.1027 4.35653 23.6919 4.53922L22.9323 4.87708C21.9445 5.31641 21.1529 6.11947 20.7134 7.12811ZM9 2C13.0675 2 16.426 5.03562 16.9337 8.96494L19.1842 12.5037C19.3324 12.7367 19.3025 13.0847 18.9593 13.2317L17 14.071V17C17 18.1046 16.1046 19 15 19H13.001L13 22H4L4.00025 18.3061C4.00033 17.1252 3.56351 16.0087 2.7555 15.0011C1.65707 13.6313 1 11.8924 1 10C1 5.58172 4.58172 2 9 2ZM9 4C5.68629 4 3 6.68629 3 10C3 11.3849 3.46818 12.6929 4.31578 13.7499C5.40965 15.114 6.00036 16.6672 6.00025 18.3063L6.00013 20H11.0007L11.0017 17H15V12.7519L16.5497 12.0881L15.0072 9.66262L14.9501 9.22118C14.5665 6.25141 12.0243 4 9 4ZM19.4893 16.9929L21.1535 18.1024C22.32 16.3562 23 14.2576 23 12.0001C23 11.317 22.9378 10.6486 22.8186 10L20.8756 10.5C20.9574 10.9878 21 11.489 21 12.0001C21 13.8471 20.4436 15.5642 19.4893 16.9929Z"></path></svg>',
+      title: "大模型",
+      type: "llmNode",
+      description: "使用大模型处理问题"
+    },
+    {
+      // icon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4.7134 7.12811L4.46682 7.69379C4.28637 8.10792 3.71357 8.10792 3.53312 7.69379L3.28656 7.12811C2.84706 6.11947 2.05545 5.31641 1.06767 4.87708L0.308047 4.53922C-0.102682 4.35653 -0.102682 3.75881 0.308047 3.57612L1.0252 3.25714C2.03838 2.80651 2.84417 1.97373 3.27612 0.930828L3.52932 0.319534C3.70578 -0.106511 4.29417 -0.106511 4.47063 0.319534L4.72382 0.930828C5.15577 1.97373 5.96158 2.80651 6.9748 3.25714L7.69188 3.57612C8.10271 3.75881 8.10271 4.35653 7.69188 4.53922L6.93228 4.87708C5.94451 5.31641 5.15288 6.11947 4.7134 7.12811ZM6.33421 15.8154C6.51032 15.233 6.7072 14.6562 6.93912 14.0327C8.99484 8.50636 12.4197 5.08172 18.0129 4.21479C17.5 5.35838 17.0151 6.15301 16.5858 6.58237C16.2521 6.91603 15.9185 7.24993 15.5848 7.58407L14.1721 8.99878L15.6279 10.4535C14.4976 12.5384 12.2652 14.1979 9.75193 14.512C8.43544 14.6766 7.29345 15.1188 6.33421 15.8154ZM18 9.99658L17 8.99728C17.3331 8.66372 17.6662 8.33039 18.0027 7.99391C19.0018 6.99303 20.0009 4.99392 21 1.99658C6.31105 1.99658 4.08854 15.422 3.06361 21.6132C3.0419 21.7443 3.02074 21.8722 3 21.9966H4.99824C5.66421 18.6635 7.33146 16.8301 10 16.4966C14 15.9966 17 12.9966 18 9.99658Z"></path></svg>',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 5C13.567 5 12 6.567 12 8.5C12 10.433 13.567 12 15.5 12C17.433 12 19 10.433 19 8.5C19 6.567 17.433 5 15.5 5ZM10 8.5C10 5.46243 12.4624 3 15.5 3C18.5376 3 21 5.46243 21 8.5C21 9.6575 20.6424 10.7315 20.0317 11.6175L22.7071 14.2929L21.2929 15.7071L18.6175 13.0317C17.7315 13.6424 16.6575 14 15.5 14C12.4624 14 10 11.5376 10 8.5ZM3 4H8V6H3V4ZM3 11H8V13H3V11ZM21 18V20H3V18H21Z"></path></svg>',
+      title: "知识库",
+      type: "knowledgeNode",
+      description: "通过知识库获取内容"
+    },
+    {
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
+      title: "搜索引擎",
+      type: "searchEngineNode",
+      description: "通过搜索引擎搜索内容"
+    },
+    {
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.23509 6.45329C4.85101 7.89148 4 9.84636 4 12C4 16.4183 7.58172 20 12 20C13.0808 20 14.1116 19.7857 15.0521 19.3972C15.1671 18.6467 14.9148 17.9266 14.8116 17.6746C14.582 17.115 13.8241 16.1582 12.5589 14.8308C12.2212 14.4758 12.2429 14.2035 12.3636 13.3943L12.3775 13.3029C12.4595 12.7486 12.5971 12.4209 14.4622 12.1248C15.4097 11.9746 15.6589 12.3533 16.0043 12.8777C16.0425 12.9358 16.0807 12.9928 16.1198 13.0499C16.4479 13.5297 16.691 13.6394 17.0582 13.8064C17.2227 13.881 17.428 13.9751 17.7031 14.1314C18.3551 14.504 18.3551 14.9247 18.3551 15.8472V15.9518C18.3551 16.3434 18.3168 16.6872 18.2566 16.9859C19.3478 15.6185 20 13.8854 20 12C20 8.70089 18.003 5.8682 15.1519 4.64482C14.5987 5.01813 13.8398 5.54726 13.575 5.91C13.4396 6.09538 13.2482 7.04166 12.6257 7.11976C12.4626 7.14023 12.2438 7.12589 12.012 7.11097C11.3905 7.07058 10.5402 7.01606 10.268 7.75495C10.0952 8.2232 10.0648 9.49445 10.6239 10.1543C10.7134 10.2597 10.7307 10.4547 10.6699 10.6735C10.59 10.9608 10.4286 11.1356 10.3783 11.1717C10.2819 11.1163 10.0896 10.8931 9.95938 10.7412C9.64554 10.3765 9.25405 9.92233 8.74797 9.78176C8.56395 9.73083 8.36166 9.68867 8.16548 9.64736C7.6164 9.53227 6.99443 9.40134 6.84992 9.09302C6.74442 8.8672 6.74488 8.55621 6.74529 8.22764C6.74529 7.8112 6.74529 7.34029 6.54129 6.88256C6.46246 6.70541 6.35689 6.56446 6.23509 6.45329ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z"></path></svg>',
+      title: "Http 请求",
+      type: "httpNode",
+      description: "通过 HTTP 请求获取数据"
+    },
+    {
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12L15.9289 19.0711L14.5147 17.6569L20.1716 12L14.5147 6.34317L15.9289 4.92896L23 12ZM3.82843 12L9.48528 17.6569L8.07107 19.0711L1 12L8.07107 4.92896L9.48528 6.34317L3.82843 12Z"></path></svg>',
+      title: "动态代码",
+      type: "codeNode",
+      description: "动态执行代码"
+    },
+    {
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4ZM4 5V19H20V5H4ZM7 8H17V11H15V10H13V14H14.5V16H9.5V14H11V10H9V11H7V8Z"></path></svg>',
+      title: "内容模板",
+      type: "templateNode",
+      description: "通过模板引擎生成内容"
+    },
+    {
+      icon: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" p-id="2577" width="200" height="200"><path d="M312.096 408.576l67.84 67.84 45.312-45.216a32 32 0 0 1 45.248 45.248l-45.28 45.248 90.496 90.496 45.28-45.216a32 32 0 0 1 45.248 45.248l-45.248 45.248 67.904 67.872-90.528 90.528a224.064 224.064 0 0 1-292.544 21.024L176.32 906.368a32 32 0 0 1-45.248-45.248l69.504-69.472a224.064 224.064 0 0 1 21.024-292.576l90.496-90.496z m0 90.496L266.848 544.32a160 160 0 0 0-4.8 221.28l4.8 4.992a160 160 0 0 0 221.248 4.8l5.024-4.8 45.248-45.248-226.272-226.24z m610.272-384a32 32 0 0 1 0 45.248l-69.44 69.504a224.064 224.064 0 0 1-21.056 292.544l-90.528 90.528-316.8-316.8 90.56-90.496a224.064 224.064 0 0 1 292.544-21.024l69.44-69.504a32 32 0 0 1 45.28 0zM565.344 246.08l-5.024 4.8-45.248 45.248 226.272 226.272 45.248-45.248a160 160 0 0 0 4.8-221.28l-4.8-4.992a160 160 0 0 0-221.248-4.8z" p-id="2578"></path></svg>',
+      title: "内部接口",
+      type: "internalNode",
+      description: "执行内部提供接口"
+    },
+    {
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 5.1438V16.0002H18.3391L6 5.1438ZM4 2.932C4 2.07155 5.01456 1.61285 5.66056 2.18123L21.6501 16.2494C22.3423 16.8584 21.9116 18.0002 20.9896 18.0002H6V22H4V2.932Z"></path></svg>',
+      title: "结束节点",
+      type: "endNode",
+      description: "结束定义输出参数"
+    }
+  ], o = [
+    {
+      label: "基础节点",
+      value: "base"
+    },
+    {
+      label: "业务工具",
+      value: "tools"
+    }
+  ];
+  var i = ow(), s = X(i), a = X(s), l = X(a);
+  sd(l, {
+    style: "width: 100%",
+    items: o,
+    onChange: (p) => {
+      U(t, Tt(p.value.toString()));
+    }
+  }), Z(a);
+  var u = z(a, 2), c = X(u);
+  Yt(c, 21, () => r, Li, (p, x) => {
+    Od(p, ut(() => h(x)));
+  }), Z(c);
+  var f = z(c, 2), d = X(f);
+  Ke(d, {
+    children: (p, x) => {
+      Se();
+      var C = Ie("测试业务按钮");
+      L(p, C);
+    },
+    $$slots: { default: !0 }
+  }), Z(f), Z(u), Z(s);
+  var g = z(s, 2);
+  Ke(g, {
+    onclick: () => {
+      U(n, Tt(h(n) ? "" : "show"));
+    },
+    children: (p, x) => {
+      var C = et(), $ = be(C);
+      {
+        var m = (v) => {
+          var b = nw();
+          L(v, b);
+        }, _ = (v) => {
+          var b = rw();
+          L(v, b);
+        };
+        ke($, (v) => {
+          h(n) === "show" ? v(m) : v(_, !1);
+        });
+      }
+      L(p, C);
+    },
+    $$slots: { default: !0 }
+  }), Z(i), Ee(() => {
+    kt(i, 1, `tf-toolbar ${h(n) ?? ""}`), ce(c, "style", `display: ${(h(t) === "base" ? "flex" : "none") ?? ""}`), ce(f, "style", `display: ${(h(t) !== "base" ? "flex" : "none") ?? ""}`);
+  }), L(e, i);
+}
+ae(Id, {}, [], [], !0);
+const iw = () => {
+  const { nodeLookup: e } = Ue();
+  return {
+    getNode: (n) => {
+      var o;
+      return (o = q(e).get(n)) == null ? void 0 : o.internals.userNode;
+    }
+  };
+}, sw = () => {
+  const { nodes: e } = Ue();
+  return {
+    ensureParentInNodesBefore: (n, r) => {
+      e.update((o) => {
+        let i = -1;
+        for (let l = 0; l < o.length; l++)
+          if (o[l].id === n) {
+            i = l;
+            break;
+          }
+        if (i <= 0)
+          return o;
+        let s = -1;
+        for (let l = 0; l < i; l++)
+          if (o[l].parentId === n || o[l].id === r) {
+            s = l;
+            break;
+          }
+        if (s == -1)
+          return o;
+        const a = o[i];
+        for (let l = i; l > s; l--)
+          o[l] = o[l - 1];
+        return o[s] = a, o;
+      });
+    }
+  };
+}, aw = () => {
+  const { edges: e } = Ue();
+  return {
+    getEdgesByTarget: (n) => q(e).filter((o) => o.target === n)
+  };
+};
+var lw = /* @__PURE__ */ ne('<div class="panel-content svelte-1oe15vw"><div>边属性设置</div> <div class="setting-title svelte-1oe15vw">边条件设置</div> <div class="setting-item"><!></div></div>'), uw = /* @__PURE__ */ ne("<!> <!> <!> <!>", 1), cw = /* @__PURE__ */ ne('<div style="position: relative; height: 100%; width: 100%"><!> <!></div>');
+const dw = {
+  hash: "svelte-1oe15vw",
+  code: ".panel-content.svelte-1oe15vw {padding:10px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);width:200px;border:1px solid #efefef;}.setting-title.svelte-1oe15vw {margin:10px 0;font-size:12px;color:#999;}"
+};
+function zd(e, t) {
+  de(t, !0), Je(e, dw);
+  const n = w(t, "onInit", 7), r = Dt();
+  n()(r);
+  let o = Un(!1);
+  const i = (_) => {
+    _.preventDefault(), _.dataTransfer && (_.dataTransfer.dropEffect = "move");
+  }, s = (_) => {
+    var M;
+    _.preventDefault();
+    const v = r.screenToFlowPosition({
+      x: _.clientX - 250,
+      y: _.clientY - 100
+    }), b = (M = _.dataTransfer) == null ? void 0 : M.getData("application/tinyflow"), N = b ? JSON.parse(b) : {}, E = {
+      id: `node_${Rr()}`,
+      position: v,
+      data: {},
+      ...N
+    };
+    ei.addNode(E), ei.selectNodeOnly(E.id);
+  }, { getNode: a } = iw(), l = (_) => {
+    const v = a(_.source), b = a(_.target);
+    if (_.sourceHandle === "loop_handle" || v.parentId) {
+      const N = r.getEdges();
+      for (let E of N)
+        if (E.target === _.target) {
+          const M = a(E.source);
+          if (_.sourceHandle === "loop_handle" && M.parentId !== v.id || v.parentId && M.parentId !== v.parentId)
+            return !1;
+        }
+    }
+    return !(!v.parentId && b.parentId && b.parentId !== v.id);
+  }, { ensureParentInNodesBefore: u } = sw(), c = (_, v) => {
+    if (!v.isValid)
+      return;
+    const b = v.toNode;
+    if (b.parentId)
+      return;
+    const N = v.fromNode, E = v.fromHandle, M = { position: { ...b.position } };
+    if (E.id === "loop_handle" ? M.parentId = N.id : N.parentId && (M.parentId = N.parentId), M.parentId) {
+      const D = a(M.parentId);
+      M.position = {
+        x: b.position.x - D.position.x,
+        y: b.position.y - D.position.y
+      }, u(M.parentId, b.id), r.updateNode(b.id, M);
+    }
+  }, { getEdgesByTarget: f } = aw(), d = (_) => {
+    _.edges.forEach((b) => {
+      const N = a(b.target);
+      if (N.parentId) {
+        const E = f(b.target), M = a(N.parentId);
+        if (E.length === 0)
+          r.updateNode(N.id, {
+            parentId: void 0,
+            position: {
+              x: N.position.x + M.position.x,
+              y: N.position.y + M.position.y
+            }
+          });
+        else {
+          let D = !1;
+          for (let V = 0; V < E.length; V++) {
+            const A = E[V], O = a(A.source);
+            if (O.parentId || O.type === "loopNode") {
+              D = !0;
+              break;
+            }
+          }
+          D || r.updateNode(N.id, {
+            parentId: void 0,
+            position: {
+              x: N.position.x + M.position.x,
+              y: N.position.y + M.position.y
+            }
+          });
+        }
+      }
+    });
+  }, g = (_, v) => {
+    console.log("onconnectstart: ", _, v);
+  }, p = (_) => {
+    console.log("onconnect: ", _);
+  };
+  var x = cw(), C = X(x);
+  Id(C);
+  var $ = z(C, 2);
+  const m = /* @__PURE__ */ Me(() => ({
+    // animated: true,
+    // label: 'edge label',
+    markerEnd: {
+      type: mo.ArrowClosed,
+      // color: 'red',
+      width: 20,
+      height: 20
+    }
+  }));
+  return Fc($, ut({ nodeTypes: ew }, ei, {
+    class: "tinyflow-logo",
+    isValidConnection: l,
+    onconnectend: c,
+    onconnectstart: g,
+    onconnect: p,
+    connectionRadius: 50,
+    ondelete: d,
+    onclick: (_) => {
+      const v = _.target;
+      v.classList.contains("svelte-flow__edge-interaction") || v.classList.contains("panel-content") || v.closest(".panel-content") || U(o, !1);
+    },
+    get defaultEdgeOptions() {
+      return h(m);
+    },
+    $$events: {
+      drop: s,
+      dragover: i,
+      edgeclick: () => {
+        U(o, !0);
+      }
+    },
+    children: (_, v) => {
+      var b = uw(), N = be(b);
+      td(N, {});
+      var E = z(N, 2);
+      Jc(E, {});
+      var M = z(E, 2);
+      rd(M, {});
+      var D = z(M, 2);
+      {
+        var V = (A) => {
+          Ho(A, {
+            children: (O, R) => {
+              var S = lw(), T = z(X(S), 4), k = X(T);
+              $t(k, {
+                rows: 3,
+                placeholder: "请输入边条件",
+                style: "width: 100%",
+                oninput: (P) => {
+                }
+              }), Z(T), Z(S), L(O, S);
+            },
+            $$slots: { default: !0 }
+          });
+        };
+        ke(D, (A) => {
+          h(o) && A(V);
+        });
+      }
+      L(_, b);
+    },
+    $$slots: { default: !0 }
+  })), Z(x), L(e, x), fe({
+    get onInit() {
+      return n();
+    },
+    set onInit(_) {
+      n(_), y();
+    }
+  });
+}
+ae(zd, { onInit: {} }, [], [], !0);
+function fw(e, t) {
+  de(t, !0);
+  const n = w(t, "options", 7), r = w(t, "onInit", 7), { data: o } = n();
+  return ei.init((o == null ? void 0 : o.nodes) || [], (o == null ? void 0 : o.edges) || []), Tr("tinyflow_options", n()), Wc(e, {
+    fitView: !0,
+    children: (i, s) => {
+      zd(i, {
+        get onInit() {
+          return r();
+        }
+      });
+    },
+    $$slots: { default: !0 }
+  }), fe({
+    get options() {
+      return n();
+    },
+    set options(i) {
+      n(i), y();
+    },
+    get onInit() {
+      return r();
+    },
+    set onInit(i) {
+      r(i), y();
+    }
+  });
+}
+customElements.define("tinyflow-component", ae(fw, { options: {}, onInit: {} }, [], [], !1));
+export {
+  yw as Tinyflow
+};
+//# sourceMappingURL=index.js.map
diff --git a/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.umd.js b/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.umd.js
new file mode 100644
index 0000000..baf0ad5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Tinyflow/ui/index.umd.js
@@ -0,0 +1,9 @@
+(function(We,Je){typeof exports=="object"&&typeof module<"u"?Je(exports):typeof define=="function"&&define.amd?define(["exports"],Je):(We=typeof globalThis<"u"?globalThis:We||self,Je(We.Tinyflow={}))})(this,function(We){"use strict";var fw=Object.defineProperty;var Rd=We=>{throw TypeError(We)};var gw=(We,Je,ot)=>Je in We?fw(We,Je,{enumerable:!0,configurable:!0,writable:!0,value:ot}):We[Je]=ot;var Nt=(We,Je,ot)=>gw(We,typeof Je!="symbol"?Je+"":Je,ot),ba=(We,Je,ot)=>Je.has(We)||Rd("Cannot "+ot);var ut=(We,Je,ot)=>(ba(We,Je,"read from private field"),ot?ot.call(We):Je.get(We)),wr=(We,Je,ot)=>Je.has(We)?Rd("Cannot add the same private member more than once"):Je instanceof WeakSet?Je.add(We):Je.set(We,ot),zo=(We,Je,ot,Ro)=>(ba(We,Je,"write to private field"),Ro?Ro.call(We,ot):Je.set(We,ot),ot),Bd=(We,Je,ot)=>(ba(We,Je,"access private method"),ot);var Md,or,qr,Lo,Gi,Yd,Zn,jt;const Je="5";typeof window<"u"&&((Md=window.__svelte??(window.__svelte={})).v??(Md.v=new Set)).add(Je);let ot=!1,Ro=!1;function Zd(){ot=!0}Zd();const es=1,ts=2,Ca=4,Xd=8,Fd=16,Wd=1,Kd=2,ka=4,qd=8,Gd=16,$a=1,Ud=2,ns="[",rs="[!",os="]",_r={},Tt=Symbol(),Ea="http://www.w3.org/2000/svg",Sa=!1,Qt=2,Pa=4,Bo=8,is=16,Pn=32,xr=64,Yo=128,Kt=256,Zo=512,yt=1024,Nn=2048,ir=4096,Tn=8192,Xo=16384,jd=32768,br=65536,Jd=1<<17,Qd=1<<19,Na=1<<20,Xn=Symbol("$state"),ss=Symbol("legacy props"),ef=Symbol("");var Gr=Array.isArray,tf=Array.prototype.indexOf,as=Array.from,Fo=Object.keys,Ur=Object.defineProperty,Mn=Object.getOwnPropertyDescriptor,Ta=Object.getOwnPropertyDescriptors,nf=Object.prototype,rf=Array.prototype,ls=Object.getPrototypeOf;function jr(e){return typeof e=="function"}const gt=()=>{};function of(e){return e()}function Jr(e){for(var t=0;t<e.length;t++)e[t]()}const sf=typeof requestIdleCallback>"u"?e=>setTimeout(e,1):requestIdleCallback;let Qr=[],eo=[];function Ma(){var e=Qr;Qr=[],Jr(e)}function Ha(){var e=eo;eo=[],Jr(e)}function to(e){Qr.length===0&&queueMicrotask(Ma),Qr.push(e)}function af(e){eo.length===0&&sf(Ha),eo.push(e)}function Va(){Qr.length>0&&Ma(),eo.length>0&&Ha()}function Da(e){return e===this.v}function us(e,t){return e!=e?t==t:e!==t||e!==null&&typeof e=="object"||typeof e=="function"}function cs(e){return!us(e,this.v)}function lf(e){throw new Error("https://svelte.dev/e/effect_in_teardown")}function uf(){throw new Error("https://svelte.dev/e/effect_in_unowned_derived")}function cf(e){throw new Error("https://svelte.dev/e/effect_orphan")}function df(){throw new Error("https://svelte.dev/e/effect_update_depth_exceeded")}function ff(){throw new Error("https://svelte.dev/e/hydration_failed")}function gf(e){throw new Error("https://svelte.dev/e/props_invalid_value")}function hf(){throw new Error("https://svelte.dev/e/state_descriptors_fixed")}function vf(){throw new Error("https://svelte.dev/e/state_prototype_fixed")}function pf(){throw new Error("https://svelte.dev/e/state_unsafe_local_read")}function mf(){throw new Error("https://svelte.dev/e/state_unsafe_mutation")}function Mt(e,t){var n={f:0,v:e,reactions:null,equals:Da,rv:0,wv:0};return n}function Fn(e){return Aa(Mt(e))}function no(e,t=!1){var r;const n=Mt(e);return t||(n.equals=cs),ot&&Ye!==null&&Ye.l!==null&&((r=Ye.l).s??(r.s=[])).push(n),n}function re(e,t=!1){return Aa(no(e,t))}function Aa(e){return Qe!==null&&!en&&Qe.f&Qt&&(mn===null?_f([e]):mn.push(e)),e}function U(e,t){return Qe!==null&&!en&&ni()&&Qe.f&(Qt|is)&&(mn===null||!mn.includes(e))&&mf(),ds(e,t)}function ds(e,t){return e.equals(t)||(e.v,e.v=t,e.wv=Wa(),Oa(e,Nn),ni()&&Ke!==null&&Ke.f&yt&&!(Ke.f&(Pn|xr))&&(Vn===null?xf([e]):Vn.push(e))),t}function La(e,t=1){var n=h(e),r=t===1?n++:n--;return U(e,n),r}function Oa(e,t){var n=e.reactions;if(n!==null)for(var r=ni(),o=n.length,i=0;i<o;i++){var s=n[i],a=s.f;a&Nn||!r&&s===Ke||(tn(s,t),a&(yt|Kt)&&(a&Qt?Oa(s,ir):ei(s)))}}function Ne(e){var t=Qt|Nn,n=Qe!==null&&Qe.f&Qt?Qe:null;return Ke===null||n!==null&&n.f&Kt?t|=Kt:Ke.f|=Na,{ctx:Ye,deps:null,effects:null,equals:Da,f:t,fn:e,reactions:null,rv:0,v:null,wv:0,parent:n??Ke}}function ve(e){const t=Ne(e);return t.equals=cs,t}function Ia(e){var t=e.effects;if(t!==null){e.effects=null;for(var n=0;n<t.length;n+=1)qt(t[n])}}function yf(e){for(var t=e.parent;t!==null;){if(!(t.f&Qt))return t;t=t.parent}return null}function wf(e){var t,n=Ke;Kn(yf(e));try{Ia(e),t=qa(e)}finally{Kn(n)}return t}function za(e){var t=wf(e),n=(qn||e.f&Kt)&&e.deps!==null?ir:yt;tn(e,n),e.equals(t)||(e.v=t,e.wv=Wa())}function Wo(e){console.warn("https://svelte.dev/e/hydration_mismatch")}let Se=!1;function It(e){Se=e}let Ve;function bt(e){if(e===null)throw Wo(),_r;return Ve=e}function vn(){return bt(pn(Ve))}function Z(e){if(Se){if(pn(Ve)!==null)throw Wo(),_r;Ve=e}}function Pe(e=1){if(Se){for(var t=e,n=Ve;t--;)n=pn(n);Ve=n}}function fs(){for(var e=0,t=Ve;;){if(t.nodeType===8){var n=t.data;if(n===os){if(e===0)return t;e-=1}else(n===ns||n===rs)&&(e+=1)}var r=pn(t);t.remove(),t=r}}function Ht(e,t=null,n){if(typeof e!="object"||e===null||Xn in e)return e;const r=ls(e);if(r!==nf&&r!==rf)return e;var o=new Map,i=Gr(e),s=Mt(0);i&&o.set("length",Mt(e.length));var a;return new Proxy(e,{defineProperty(l,u,c){(!("value"in c)||c.configurable===!1||c.enumerable===!1||c.writable===!1)&&hf();var f=o.get(u);return f===void 0?(f=Mt(c.value),o.set(u,f)):U(f,Ht(c.value,a)),!0},deleteProperty(l,u){var c=o.get(u);if(c===void 0)u in l&&o.set(u,Mt(Tt));else{if(i&&typeof u=="string"){var f=o.get("length"),d=Number(u);Number.isInteger(d)&&d<f.v&&U(f,d)}U(c,Tt),Ra(s)}return!0},get(l,u,c){var p;if(u===Xn)return e;var f=o.get(u),d=u in l;if(f===void 0&&(!d||(p=Mn(l,u))!=null&&p.writable)&&(f=Mt(Ht(d?l[u]:Tt,a)),o.set(u,f)),f!==void 0){var g=h(f);return g===Tt?void 0:g}return Reflect.get(l,u,c)},getOwnPropertyDescriptor(l,u){var c=Reflect.getOwnPropertyDescriptor(l,u);if(c&&"value"in c){var f=o.get(u);f&&(c.value=h(f))}else if(c===void 0){var d=o.get(u),g=d==null?void 0:d.v;if(d!==void 0&&g!==Tt)return{enumerable:!0,configurable:!0,value:g,writable:!0}}return c},has(l,u){var g;if(u===Xn)return!0;var c=o.get(u),f=c!==void 0&&c.v!==Tt||Reflect.has(l,u);if(c!==void 0||Ke!==null&&(!f||(g=Mn(l,u))!=null&&g.writable)){c===void 0&&(c=Mt(f?Ht(l[u],a):Tt),o.set(u,c));var d=h(c);if(d===Tt)return!1}return f},set(l,u,c,f){var _;var d=o.get(u),g=u in l;if(i&&u==="length")for(var p=c;p<d.v;p+=1){var x=o.get(p+"");x!==void 0?U(x,Tt):p in l&&(x=Mt(Tt),o.set(p+"",x))}d===void 0?(!g||(_=Mn(l,u))!=null&&_.writable)&&(d=Mt(void 0),U(d,Ht(c,a)),o.set(u,d)):(g=d.v!==Tt,U(d,Ht(c,a)));var C=Reflect.getOwnPropertyDescriptor(l,u);if(C!=null&&C.set&&C.set.call(f,c),!g){if(i&&typeof u=="string"){var $=o.get("length"),m=Number(u);Number.isInteger(m)&&m>=$.v&&U($,m+1)}Ra(s)}return!0},ownKeys(l){h(s);var u=Reflect.ownKeys(l).filter(d=>{var g=o.get(d);return g===void 0||g.v!==Tt});for(var[c,f]of o)f.v!==Tt&&!(c in l)&&u.push(c);return u},setPrototypeOf(){vf()}})}function Ra(e,t=1){U(e,e.v+t)}var Vt,Ba,Ya,Za;function gs(){if(Vt===void 0){Vt=window,Ba=/Firefox/.test(navigator.userAgent);var e=Element.prototype,t=Node.prototype;Ya=Mn(t,"firstChild").get,Za=Mn(t,"nextSibling").get,e.__click=void 0,e.__className=void 0,e.__attributes=null,e.__styles=null,e.__e=void 0,Text.prototype.__t=void 0}}function Hn(e=""){return document.createTextNode(e)}function Ct(e){return Ya.call(e)}function pn(e){return Za.call(e)}function X(e,t){if(!Se)return Ct(e);var n=Ct(Ve);if(n===null)n=Ve.appendChild(Hn());else if(t&&n.nodeType!==3){var r=Hn();return n==null||n.before(r),bt(r),r}return bt(n),n}function xe(e,t){if(!Se){var n=Ct(e);return n instanceof Comment&&n.data===""?pn(n):n}return Ve}function z(e,t=1,n=!1){let r=Se?Ve:e;for(var o;t--;)o=r,r=pn(r);if(!Se)return r;var i=r==null?void 0:r.nodeType;if(n&&i!==3){var s=Hn();return r===null?o==null||o.after(s):r.before(s),bt(s),s}return bt(r),r}function hs(e){e.textContent=""}let Ko=!1,qo=!1,Go=null,sr=!1,vs=!1;function Xa(e){vs=e}let ro=[],hw=[],Qe=null,en=!1;function Wn(e){Qe=e}let Ke=null;function Kn(e){Ke=e}let mn=null;function _f(e){mn=e}let kt=null,zt=0,Vn=null;function xf(e){Vn=e}let Fa=1,Uo=0,qn=!1;function Wa(){return++Fa}function Cr(e){var f;var t=e.f;if(t&Nn)return!0;if(t&ir){var n=e.deps,r=(t&Kt)!==0;if(n!==null){var o,i,s=(t&Zo)!==0,a=r&&Ke!==null&&!qn,l=n.length;if(s||a){var u=e,c=u.parent;for(o=0;o<l;o++)i=n[o],(s||!((f=i==null?void 0:i.reactions)!=null&&f.includes(u)))&&(i.reactions??(i.reactions=[])).push(u);s&&(u.f^=Zo),a&&c!==null&&!(c.f&Kt)&&(u.f^=Kt)}for(o=0;o<l;o++)if(i=n[o],Cr(i)&&za(i),i.wv>e.wv)return!0}(!r||Ke!==null&&!qn)&&tn(e,yt)}return!1}function bf(e,t){for(var n=t;n!==null;){if(n.f&Yo)try{n.fn(e);return}catch{n.f^=Yo}n=n.parent}throw Ko=!1,e}function Cf(e){return(e.f&Xo)===0&&(e.parent===null||(e.parent.f&Yo)===0)}function jo(e,t,n,r){if(Ko){if(n===null&&(Ko=!1),Cf(t))throw e;return}n!==null&&(Ko=!0);{bf(e,t);return}}function Ka(e,t,n=!0){var r=e.reactions;if(r!==null)for(var o=0;o<r.length;o++){var i=r[o];i.f&Qt?Ka(i,t,!1):t===i&&(n?tn(i,Nn):i.f&yt&&tn(i,ir),ei(i))}}function qa(e){var g;var t=kt,n=zt,r=Vn,o=Qe,i=qn,s=mn,a=Ye,l=en,u=e.f;kt=null,zt=0,Vn=null,qn=(u&Kt)!==0&&(en||!sr||Qe===null),Qe=u&(Pn|xr)?null:e,mn=null,rl(e.ctx),en=!1,Uo++;try{var c=(0,e.fn)(),f=e.deps;if(kt!==null){var d;if(Jo(e,zt),f!==null&&zt>0)for(f.length=zt+kt.length,d=0;d<kt.length;d++)f[zt+d]=kt[d];else e.deps=f=kt;if(!qn)for(d=zt;d<f.length;d++)((g=f[d]).reactions??(g.reactions=[])).push(e)}else f!==null&&zt<f.length&&(Jo(e,zt),f.length=zt);if(ni()&&Vn!==null&&!en&&f!==null&&!(e.f&(Qt|ir|Nn)))for(d=0;d<Vn.length;d++)Ka(Vn[d],e);return o!==null&&Uo++,c}finally{kt=t,zt=n,Vn=r,Qe=o,qn=i,mn=s,rl(a),en=l}}function kf(e,t){let n=t.reactions;if(n!==null){var r=tf.call(n,e);if(r!==-1){var o=n.length-1;o===0?n=t.reactions=null:(n[r]=n[o],n.pop())}}n===null&&t.f&Qt&&(kt===null||!kt.includes(t))&&(tn(t,ir),t.f&(Kt|Zo)||(t.f^=Zo),Ia(t),Jo(t,0))}function Jo(e,t){var n=e.deps;if(n!==null)for(var r=t;r<n.length;r++)kf(e,n[r])}function Qo(e){var t=e.f;if(!(t&Xo)){tn(e,yt);var n=Ke,r=Ye,o=sr;Ke=e,sr=!0;try{t&is?Vf(e):Qa(e),Ja(e);var i=qa(e);e.teardown=typeof i=="function"?i:null,e.wv=Fa;var s=e.deps,a;Sa&&Ro&&e.f&Nn}catch(l){jo(l,e,n,r||e.ctx)}finally{sr=o,Ke=n}}}function $f(){try{df()}catch(e){if(Go!==null)jo(e,Go,null);else throw e}}function Ga(){var e=sr;try{var t=0;for(sr=!0;ro.length>0;){t++>1e3&&$f();var n=ro,r=n.length;ro=[];for(var o=0;o<r;o++){var i=n[o];i.f&yt||(i.f^=yt);var s=Sf(i);Ef(s)}}}finally{qo=!1,sr=e,Go=null}}function Ef(e){var t=e.length;if(t!==0)for(var n=0;n<t;n++){var r=e[n];if(!(r.f&(Xo|Tn)))try{Cr(r)&&(Qo(r),r.deps===null&&r.first===null&&r.nodes_start===null&&(r.teardown===null?el(r):r.fn=null))}catch(o){jo(o,r,null,r.ctx)}}}function ei(e){qo||(qo=!0,queueMicrotask(Ga));for(var t=Go=e;t.parent!==null;){t=t.parent;var n=t.f;if(n&(xr|Pn)){if(!(n&yt))return;t.f^=yt}}ro.push(t)}function Sf(e){for(var t=[],n=e.first;n!==null;){var r=n.f,o=(r&Pn)!==0,i=o&&(r&yt)!==0;if(!i&&!(r&Tn)){if(r&Pa)t.push(n);else if(o)n.f^=yt;else{var s=Qe;try{Qe=n,Cr(n)&&Qo(n)}catch(u){jo(u,n,null,n.ctx)}finally{Qe=s}}var a=n.first;if(a!==null){n=a;continue}}var l=n.parent;for(n=n.next;n===null&&l!==null;)n=l.next,l=l.parent}return t}function y(e){var t;for(Va();ro.length>0;)qo=!0,Ga(),Va();return t}function h(e){var t=e.f,n=(t&Qt)!==0;if(Qe!==null&&!en){mn!==null&&mn.includes(e)&&pf();var r=Qe.deps;e.rv<Uo&&(e.rv=Uo,kt===null&&r!==null&&r[zt]===e?zt++:kt===null?kt=[e]:(!qn||!kt.includes(e))&&kt.push(e))}else if(n&&e.deps===null&&e.effects===null){var o=e,i=o.parent;i!==null&&!(i.f&Kt)&&(o.f^=Kt)}return n&&(o=e,Cr(o)&&za(o)),e.v}function yn(e){var t=en;try{return en=!0,e()}finally{en=t}}const Pf=-7169;function tn(e,t){e.f=e.f&Pf|t}function j(e){if(!(typeof e!="object"||!e||e instanceof EventTarget)){if(Xn in e)ps(e);else if(!Array.isArray(e))for(let t in e){const n=e[t];typeof n=="object"&&n&&Xn in n&&ps(n)}}}function ps(e,t=new Set){if(typeof e=="object"&&e!==null&&!(e instanceof EventTarget)&&!t.has(e)){t.add(e),e instanceof Date&&e.getTime();for(let r in e)try{ps(e[r],t)}catch{}const n=ls(e);if(n!==Object.prototype&&n!==Array.prototype&&n!==Map.prototype&&n!==Set.prototype&&n!==Date.prototype){const r=Ta(n);for(let o in r){const i=r[o].get;if(i)try{i.call(e)}catch{}}}}}function Ua(e){Ke===null&&Qe===null&&cf(),Qe!==null&&Qe.f&Kt&&Ke===null&&uf(),vs&&lf()}function Nf(e,t){var n=t.last;n===null?t.last=t.first=e:(n.next=e,e.prev=n,t.last=e)}function ar(e,t,n,r=!0){var o=(e&xr)!==0,i=Ke,s={ctx:Ye,deps:null,nodes_start:null,nodes_end:null,f:e|Nn,first:null,fn:t,last:null,next:null,parent:o?null:i,prev:null,teardown:null,transitions:null,wv:0};if(n)try{Qo(s),s.f|=jd}catch(u){throw qt(s),u}else t!==null&&ei(s);var a=n&&s.deps===null&&s.first===null&&s.nodes_start===null&&s.teardown===null&&(s.f&(Na|Yo))===0;if(!a&&!o&&r&&(i!==null&&Nf(s,i),Qe!==null&&Qe.f&Qt)){var l=Qe;(l.effects??(l.effects=[])).push(s)}return s}function ja(e){const t=ar(Bo,null,!1);return tn(t,yt),t.teardown=e,t}function kr(e){Ua();var t=Ke!==null&&(Ke.f&Pn)!==0&&Ye!==null&&!Ye.m;if(t){var n=Ye;(n.e??(n.e=[])).push({fn:e,effect:Ke,reaction:Qe})}else{var r=Rt(e);return r}}function Tf(e){return Ua(),$r(e)}function Mf(e){const t=ar(xr,e,!0);return()=>{qt(t)}}function Hf(e){const t=ar(xr,e,!0);return(n={})=>new Promise(r=>{n.outro?Er(t,()=>{qt(t),r(void 0)}):(qt(t),r(void 0))})}function Rt(e){return ar(Pa,e,!1)}function ge(e,t){var n=Ye,r={effect:null,ran:!1};n.l.r1.push(r),r.effect=$r(()=>{e(),!r.ran&&(r.ran=!0,U(n.l.r2,!0),yn(t))})}function vt(){var e=Ye;$r(()=>{if(h(e.l.r2)){for(var t of e.l.r1){var n=t.effect;n.f&yt&&tn(n,ir),Cr(n)&&Qo(n),t.ran=!1}e.l.r2.v=!1}})}function $r(e){return ar(Bo,e,!0)}function Ee(e,t=[],n=Ne){const r=t.map(n);return lr(()=>e(...r.map(h)))}function lr(e,t=0){return ar(Bo|is|t,e,!0)}function Dn(e,t=!0){return ar(Bo|Pn,e,!0,t)}function Ja(e){var t=e.teardown;if(t!==null){const n=vs,r=Qe;Xa(!0),Wn(null);try{t.call(null)}finally{Xa(n),Wn(r)}}}function Qa(e,t=!1){var n=e.first;for(e.first=e.last=null;n!==null;){var r=n.next;qt(n,t),n=r}}function Vf(e){for(var t=e.first;t!==null;){var n=t.next;t.f&Pn||qt(t),t=n}}function qt(e,t=!0){var n=!1;if((t||e.f&Qd)&&e.nodes_start!==null){for(var r=e.nodes_start,o=e.nodes_end;r!==null;){var i=r===o?null:pn(r);r.remove(),r=i}n=!0}Qa(e,t&&!n),Jo(e,0),tn(e,Xo);var s=e.transitions;if(s!==null)for(const l of s)l.stop();Ja(e);var a=e.parent;a!==null&&a.first!==null&&el(e),e.next=e.prev=e.teardown=e.ctx=e.deps=e.fn=e.nodes_start=e.nodes_end=null}function el(e){var t=e.parent,n=e.prev,r=e.next;n!==null&&(n.next=r),r!==null&&(r.prev=n),t!==null&&(t.first===e&&(t.first=r),t.last===e&&(t.last=n))}function Er(e,t){var n=[];ms(e,n,!0),tl(n,()=>{qt(e),t&&t()})}function tl(e,t){var n=e.length;if(n>0){var r=()=>--n||t();for(var o of e)o.out(r)}else t()}function ms(e,t,n){if(!(e.f&Tn)){if(e.f^=Tn,e.transitions!==null)for(const s of e.transitions)(s.is_global||n)&&t.push(s);for(var r=e.first;r!==null;){var o=r.next,i=(r.f&br)!==0||(r.f&Pn)!==0;ms(r,t,i?n:!1),r=o}}}function oo(e){nl(e,!0)}function nl(e,t){if(e.f&Tn){e.f^=Tn,e.f&yt||(e.f^=yt),Cr(e)&&(tn(e,Nn),ei(e));for(var n=e.first;n!==null;){var r=n.next,o=(n.f&br)!==0||(n.f&Pn)!==0;nl(n,o?t:!1),n=r}if(e.transitions!==null)for(const i of e.transitions)(i.is_global||t)&&i.in()}}function ti(e){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}let Ye=null;function rl(e){Ye=e}function ur(e){return ys().get(e)}function Sr(e,t){return ys().set(e,t),t}function Df(e){return ys().has(e)}function ue(e,t=!1,n){Ye={p:Ye,c:null,e:null,m:!1,s:e,x:null,l:null},ot&&!t&&(Ye.l={s:null,u:null,r1:[],r2:Mt(!1)})}function ce(e){const t=Ye;if(t!==null){e!==void 0&&(t.x=e);const s=t.e;if(s!==null){var n=Ke,r=Qe;t.e=null;try{for(var o=0;o<s.length;o++){var i=s[o];Kn(i.effect),Wn(i.reaction),Rt(i.fn)}}finally{Kn(n),Wn(r)}}Ye=t.p,t.m=!0}return e||{}}function ni(){return!ot||Ye!==null&&Ye.l===null}function ys(e){return Ye===null&&ti(),Ye.c??(Ye.c=new Map(Af(Ye)||void 0))}function Af(e){let t=e.p;for(;t!==null;){const n=t.c;if(n!==null)return n;t=t.p}return null}function Lf(e){return e.endsWith("capture")&&e!=="gotpointercapture"&&e!=="lostpointercapture"}const Of=["beforeinput","click","change","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"];function If(e){return Of.includes(e)}const zf={formnovalidate:"formNoValidate",ismap:"isMap",nomodule:"noModule",playsinline:"playsInline",readonly:"readOnly",defaultvalue:"defaultValue",defaultchecked:"defaultChecked",srcobject:"srcObject",novalidate:"noValidate",allowfullscreen:"allowFullscreen",disablepictureinpicture:"disablePictureInPicture",disableremoteplayback:"disableRemotePlayback"};function Rf(e){return e=e.toLowerCase(),zf[e]??e}const Bf=["touchstart","touchmove"];function Yf(e){return Bf.includes(e)}const Zf=["textarea","script","style","title"];function Xf(e){return Zf.includes(e)}function Ff(e,t){if(t){const n=document.body;e.autofocus=!0,to(()=>{document.activeElement===n&&e.focus()})}}function Wf(e){Se&&Ct(e)!==null&&hs(e)}let ol=!1;function Kf(){ol||(ol=!0,document.addEventListener("reset",e=>{Promise.resolve().then(()=>{var t;if(!e.defaultPrevented)for(const n of e.target.elements)(t=n.__on_r)==null||t.call(n)})},{capture:!0}))}function qf(e){var t=Qe,n=Ke;Wn(null),Kn(null);try{return e()}finally{Wn(t),Kn(n)}}const il=new Set,ws=new Set;function sl(e,t,n,r={}){function o(i){if(r.capture||io.call(t,i),!i.cancelBubble)return qf(()=>n==null?void 0:n.call(this,i))}return e.startsWith("pointer")||e.startsWith("touch")||e==="wheel"?to(()=>{t.addEventListener(e,o,r)}):t.addEventListener(e,o,r),o}function Ze(e,t,n,r,o){var i={capture:r,passive:o},s=sl(e,t,n,i);(t===document.body||t===window||t===document)&&ja(()=>{t.removeEventListener(e,s,i)})}function ri(e){for(var t=0;t<e.length;t++)il.add(e[t]);for(var n of ws)n(e)}function io(e){var m;var t=this,n=t.ownerDocument,r=e.type,o=((m=e.composedPath)==null?void 0:m.call(e))||[],i=o[0]||e.target,s=0,a=e.__root;if(a){var l=o.indexOf(a);if(l!==-1&&(t===document||t===window)){e.__root=t;return}var u=o.indexOf(t);if(u===-1)return;l<=u&&(s=l)}if(i=o[s]||e.target,i!==t){Ur(e,"currentTarget",{configurable:!0,get(){return i||n}});var c=Qe,f=Ke;Wn(null),Kn(null);try{for(var d,g=[];i!==null;){var p=i.assignedSlot||i.parentNode||i.host||null;try{var x=i["__"+r];if(x!==void 0&&(!i.disabled||e.target===i))if(Gr(x)){var[C,...$]=x;C.apply(i,[e,...$])}else x.call(i,e)}catch(_){d?g.push(_):d=_}if(e.cancelBubble||p===t||p===null)break;i=p}if(d){for(let _ of g)queueMicrotask(()=>{throw _});throw d}}finally{e.__root=t,delete e.currentTarget,Wn(c),Kn(f)}}}function _s(e){var t=document.createElement("template");return t.innerHTML=e,t.content}function Dt(e,t){var n=Ke;n.nodes_start===null&&(n.nodes_start=e,n.nodes_end=t)}function ne(e,t){var n=(t&$a)!==0,r=(t&Ud)!==0,o,i=!e.startsWith("<!>");return()=>{if(Se)return Dt(Ve,null),Ve;o===void 0&&(o=_s(i?e:"<!>"+e),n||(o=Ct(o)));var s=r||Ba?document.importNode(o,!0):o.cloneNode(!0);if(n){var a=Ct(s),l=s.lastChild;Dt(a,l)}else Dt(s,s);return s}}function _e(e,t,n="svg"){var r=!e.startsWith("<!>"),o=(t&$a)!==0,i=`<${n}>${r?e:"<!>"+e}</${n}>`,s;return()=>{if(Se)return Dt(Ve,null),Ve;if(!s){var a=_s(i),l=Ct(a);if(o)for(s=document.createDocumentFragment();Ct(l);)s.appendChild(Ct(l));else s=Ct(l)}var u=s.cloneNode(!0);if(o){var c=Ct(u),f=u.lastChild;Dt(c,f)}else Dt(u,u);return u}}function Ae(e=""){if(!Se){var t=Hn(e+"");return Dt(t,t),t}var n=Ve;return n.nodeType!==3&&(n.before(n=Hn()),bt(n)),Dt(n,n),n}function tt(){if(Se)return Dt(Ve,null),Ve;var e=document.createDocumentFragment(),t=document.createComment(""),n=Hn();return e.append(t,n),Dt(t,n),e}function L(e,t){if(Se){Ke.nodes_end=Ve,vn();return}e!==null&&e.before(t)}function Bt(e,t){var n=t==null?"":typeof t=="object"?t+"":t;n!==(e.__t??(e.__t=e.nodeValue))&&(e.__t=n,e.nodeValue=n+"")}function al(e,t){return ll(e,t)}function Gf(e,t){gs(),t.intro=t.intro??!1;const n=t.target,r=Se,o=Ve;try{for(var i=Ct(n);i&&(i.nodeType!==8||i.data!==ns);)i=pn(i);if(!i)throw _r;It(!0),bt(i),vn();const s=ll(e,{...t,anchor:i});if(Ve===null||Ve.nodeType!==8||Ve.data!==os)throw Wo(),_r;return It(!1),s}catch(s){if(s===_r)return t.recover===!1&&ff(),gs(),hs(n),It(!1),al(e,t);throw s}finally{It(r),bt(o)}}const Pr=new Map;function ll(e,{target:t,anchor:n,props:r={},events:o,context:i,intro:s=!0}){gs();var a=new Set,l=f=>{for(var d=0;d<f.length;d++){var g=f[d];if(!a.has(g)){a.add(g);var p=Yf(g);t.addEventListener(g,io,{passive:p});var x=Pr.get(g);x===void 0?(document.addEventListener(g,io,{passive:p}),Pr.set(g,1)):Pr.set(g,x+1)}}};l(as(il)),ws.add(l);var u=void 0,c=Hf(()=>{var f=n??t.appendChild(Hn());return Dn(()=>{if(i){ue({});var d=Ye;d.c=i}o&&(r.$$events=o),Se&&Dt(f,null),u=e(f,r)||{},Se&&(Ke.nodes_end=Ve),i&&ce()}),()=>{var p;for(var d of a){t.removeEventListener(d,io);var g=Pr.get(d);--g===0?(document.removeEventListener(d,io),Pr.delete(d)):Pr.set(d,g)}ws.delete(l),f!==n&&((p=f.parentNode)==null||p.removeChild(f))}});return xs.set(u,c),u}let xs=new WeakMap;function Uf(e,t){const n=xs.get(e);return n?(xs.delete(e),n(t)):Promise.resolve()}function ke(e,t,[n,r]=[0,0]){Se&&n===0&&vn();var o=e,i=null,s=null,a=Tt,l=n>0?br:0,u=!1;const c=(d,g=!0)=>{u=!0,f(g,d)},f=(d,g)=>{if(a===(a=d))return;let p=!1;if(Se&&r!==-1){if(n===0){const C=o.data;C===ns?r=0:C===rs?r=1/0:(r=parseInt(C.substring(1)),r!==r&&(r=a?1/0:-1))}const x=r>n;!!a===x&&(o=fs(),bt(o),It(!1),p=!0,r=-1)}a?(i?oo(i):g&&(i=Dn(()=>g(o))),s&&Er(s,()=>{s=null})):(s?oo(s):g&&(s=Dn(()=>g(o,[n+1,r]))),i&&Er(i,()=>{i=null})),p&&It(!0)};lr(()=>{u=!1,t(c),u||f(null,null)},l),Se&&(o=Ve)}function oi(e,t){return t}function jf(e,t,n,r){for(var o=[],i=t.length,s=0;s<i;s++)ms(t[s].e,o,!0);var a=i>0&&o.length===0&&n!==null;if(a){var l=n.parentNode;hs(l),l.append(n),r.clear(),Gn(e,t[0].prev,t[i-1].next)}tl(o,()=>{for(var u=0;u<i;u++){var c=t[u];a||(r.delete(c.k),Gn(e,c.prev,c.next)),qt(c.e,!a)}})}function Yt(e,t,n,r,o,i=null){var s=e,a={flags:t,items:new Map,first:null},l=(t&Ca)!==0;if(l){var u=e;s=Se?bt(Ct(u)):u.appendChild(Hn())}Se&&vn();var c=null,f=!1,d=ve(()=>{var g=n();return Gr(g)?g:g==null?[]:as(g)});lr(()=>{var g=h(d),p=g.length;if(f&&p===0)return;f=p===0;let x=!1;if(Se){var C=s.data===rs;C!==(p===0)&&(s=fs(),bt(s),It(!1),x=!0)}if(Se){for(var $=null,m,_=0;_<p;_++){if(Ve.nodeType===8&&Ve.data===os){s=Ve,x=!0,It(!1);break}var v=g[_],b=r(v,_);m=ul(Ve,a,$,null,v,b,_,o,t,n),a.items.set(b,m),$=m}p>0&&bt(fs())}Se||Jf(g,a,s,o,t,r,n),i!==null&&(p===0?c?oo(c):c=Dn(()=>i(s)):c!==null&&Er(c,()=>{c=null})),x&&It(!0),h(d)}),Se&&(s=Ve)}function Jf(e,t,n,r,o,i,s){var S,M,k,P;var a=(o&Xd)!==0,l=(o&(es|ts))!==0,u=e.length,c=t.items,f=t.first,d=f,g,p=null,x,C=[],$=[],m,_,v,b;if(a)for(b=0;b<u;b+=1)m=e[b],_=i(m,b),v=c.get(_),v!==void 0&&((S=v.a)==null||S.measure(),(x??(x=new Set)).add(v));for(b=0;b<u;b+=1){if(m=e[b],_=i(m,b),v=c.get(_),v===void 0){var N=d?d.e.nodes_start:n;p=ul(N,t,p,p===null?t.first:p.next,m,_,b,r,o,s),c.set(_,p),C=[],$=[],d=p.next;continue}if(l&&Qf(v,m,b,o),v.e.f&Tn&&(oo(v.e),a&&((M=v.a)==null||M.unfix(),(x??(x=new Set)).delete(v))),v!==d){if(g!==void 0&&g.has(v)){if(C.length<$.length){var E=$[0],T;p=E.prev;var D=C[0],V=C[C.length-1];for(T=0;T<C.length;T+=1)cl(C[T],E,n);for(T=0;T<$.length;T+=1)g.delete($[T]);Gn(t,D.prev,V.next),Gn(t,p,D),Gn(t,V,E),d=E,p=V,b-=1,C=[],$=[]}else g.delete(v),cl(v,d,n),Gn(t,v.prev,v.next),Gn(t,v,p===null?t.first:p.next),Gn(t,p,v),p=v;continue}for(C=[],$=[];d!==null&&d.k!==_;)d.e.f&Tn||(g??(g=new Set)).add(d),$.push(d),d=d.next;if(d===null)continue;v=d}C.push(v),p=v,d=v.next}if(d!==null||g!==void 0){for(var A=g===void 0?[]:as(g);d!==null;)d.e.f&Tn||A.push(d),d=d.next;var O=A.length;if(O>0){var R=o&Ca&&u===0?n:null;if(a){for(b=0;b<O;b+=1)(k=A[b].a)==null||k.measure();for(b=0;b<O;b+=1)(P=A[b].a)==null||P.fix()}jf(t,A,R,c)}}a&&to(()=>{var H;if(x!==void 0)for(v of x)(H=v.a)==null||H.apply()}),Ke.first=t.first&&t.first.e,Ke.last=p&&p.e}function Qf(e,t,n,r){r&es&&ds(e.v,t),r&ts?ds(e.i,n):e.i=n}function ul(e,t,n,r,o,i,s,a,l,u){var c=(l&es)!==0,f=(l&Fd)===0,d=c?f?no(o):Mt(o):o,g=l&ts?Mt(s):s,p={i:g,v:d,k:i,a:null,e:null,prev:n,next:r};try{return p.e=Dn(()=>a(e,d,g,u),Se),p.e.prev=n&&n.e,p.e.next=r&&r.e,n===null?t.first=p:(n.next=p,n.e.next=p.e),r!==null&&(r.prev=p,r.e.prev=p.e),p}finally{}}function cl(e,t,n){for(var r=e.next?e.next.e.nodes_start:n,o=t?t.e.nodes_start:n,i=e.e.nodes_start;i!==r;){var s=pn(i);o.before(i),i=s}}function Gn(e,t,n){t===null?e.first=n:(t.next=n,t.e.next=n&&n.e),n!==null&&(n.prev=t,n.e.prev=t&&t.e)}function dl(e,t,n,r,o){var i=e,s="",a;lr(()=>{if(s===(s=t()??"")){Se&&vn();return}a!==void 0&&(qt(a),a=void 0),s!==""&&(a=Dn(()=>{if(Se){Ve.data;for(var l=vn(),u=l;l!==null&&(l.nodeType!==8||l.data!=="");)u=l,l=pn(l);if(l===null)throw Wo(),_r;Dt(Ve,u),i=bt(l);return}var c=s+"",f=_s(c);Dt(Ct(f),f.lastChild),i.before(f)}))})}function wt(e,t,n,r,o){var a;Se&&vn();var i=(a=t.$$slots)==null?void 0:a[n],s=!1;i===!0&&(i=t[n==="default"?"children":n],s=!0),i===void 0||i(e,s?()=>r:r)}function e1(e){const t={};e.children&&(t.default=!0);for(const n in e.$$slots)t[n]=!0;return t}function cr(e,t,...n){var r=e,o=gt,i;lr(()=>{o!==(o=t())&&(i&&(qt(i),i=null),i=Dn(()=>o(r,...n)))},br),Se&&(r=Ve)}function fl(e,t,n){Se&&vn();var r=e,o,i;lr(()=>{o!==(o=t())&&(i&&(Er(i),i=null),o&&(i=Dn(()=>n(r,o))))},br),Se&&(r=Ve)}function t1(e,t,n,r,o,i){let s=Se;Se&&vn();var a,l,u=null;Se&&Ve.nodeType===1&&(u=Ve,vn());var c=Se?Ve:e,f;lr(()=>{const d=t()||null;var g=d==="svg"?Ea:null;d!==a&&(f&&(d===null?Er(f,()=>{f=null,l=null}):d===l?oo(f):qt(f)),d&&d!==l&&(f=Dn(()=>{if(u=Se?u:g?document.createElementNS(g,d):document.createElement(d),Dt(u,u),r){Se&&Xf(d)&&u.append(document.createComment(""));var p=Se?Ct(u):u.appendChild(Hn());Se&&(p===null?It(!1):bt(p)),r(u,p)}Ke.nodes_end=u,c.before(u)})),a=d,a&&(l=a))},br),s&&(It(!0),bt(c))}function et(e,t){to(()=>{var n=e.getRootNode(),r=n.host?n:n.head??n.ownerDocument.head;if(!r.querySelector("#"+t.hash)){const o=document.createElement("style");o.id=t.hash,o.textContent=t.code,r.appendChild(o)}})}function _t(e,t,n){Rt(()=>{var r=yn(()=>t(e,n==null?void 0:n())||{});if(n&&(r!=null&&r.update)){var o=!1,i={};$r(()=>{var s=n();j(s),o&&us(i,s)&&(i=s,r.update(s))}),o=!0}if(r!=null&&r.destroy)return()=>r.destroy()})}function gl(e){var t,n,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(n=gl(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function n1(){for(var e,t,n=0,r="",o=arguments.length;n<o;n++)(e=arguments[n])&&(t=gl(e))&&(r&&(r+=" "),r+=t);return r}function wn(e){return typeof e=="object"?n1(e):e??""}const hl=[...` 	
+\r\f \v\uFEFF`];function r1(e,t,n){var r=e==null?"":""+e;if(t&&(r=r?r+" "+t:t),n){for(var o in n)if(n[o])r=r?r+" "+o:o;else if(r.length)for(var i=o.length,s=0;(s=r.indexOf(o,s))>=0;){var a=s+i;(s===0||hl.includes(r[s-1]))&&(a===r.length||hl.includes(r[a]))?r=(s===0?"":r.substring(0,s))+r.substring(a+1):s=a}}return r===""?null:r}function $t(e,t,n,r,o,i){var s=e.__className;if(Se||s!==n){var a=r1(n,r,i);(!Se||a!==e.getAttribute("class"))&&(a==null?e.removeAttribute("class"):t?e.className=a:e.setAttribute("class",a)),e.__className=n}else if(i)for(var l in i){var u=!!i[l];(o==null||u!==!!o[l])&&e.classList.toggle(l,u)}return i}const so=Symbol("class");function ao(e){if(Se){var t=!1,n=()=>{if(!t){if(t=!0,e.hasAttribute("value")){var r=e.value;de(e,"value",null),e.value=r}if(e.hasAttribute("checked")){var o=e.checked;de(e,"checked",null),e.checked=o}}};e.__on_r=n,af(n),Kf()}}function bs(e,t){var n=e.__attributes??(e.__attributes={});n.value===(n.value=t??void 0)||e.value===t&&(t!==0||e.nodeName!=="PROGRESS")||(e.value=t??"")}function o1(e,t){t?e.hasAttribute("selected")||e.setAttribute("selected",""):e.removeAttribute("selected")}function de(e,t,n,r){var o=e.__attributes??(e.__attributes={});Se&&(o[t]=e.getAttribute(t),t==="src"||t==="srcset"||t==="href"&&e.nodeName==="LINK")||o[t]!==(o[t]=n)&&(t==="style"&&"__styles"in e&&(e.__styles={}),t==="loading"&&(e[ef]=n),n==null?e.removeAttribute(t):typeof n!="string"&&pl(e).includes(t)?e[t]=n:e.setAttribute(t,n))}function nn(e,t,n,r,o=!1,i=!1,s=!1){let a=Se&&i;a&&It(!1);var l=t||{},u=e.tagName==="OPTION";for(var c in t)c in n||(n[c]=null);n.class?n.class=wn(n.class):(r||n[so])&&(n.class=null);var f=pl(e),d=e.__attributes??(e.__attributes={});for(const _ in n){let v=n[_];if(u&&_==="value"&&v==null){e.value=e.__value="",l[_]=v;continue}if(_==="class"){var g=e.namespaceURI==="http://www.w3.org/1999/xhtml";$t(e,g,v,r,t==null?void 0:t[so],n[so]),l[_]=v,l[so]=n[so];continue}var p=l[_];if(v!==p){l[_]=v;var x=_[0]+_[1];if(x!=="$$"){if(x==="on"){const b={},N="$$"+_;let E=_.slice(2);var C=If(E);if(Lf(E)&&(E=E.slice(0,-7),b.capture=!0),!C&&p){if(v!=null)continue;e.removeEventListener(E,l[N],b),l[N]=null}if(v!=null)if(C)e[`__${E}`]=v,ri([E]);else{let T=function(D){l[_].call(this,D)};l[N]=sl(E,e,T,b)}else C&&(e[`__${E}`]=void 0)}else if(_==="style"&&v!=null)e.style.cssText=v+"";else if(_==="autofocus")Ff(e,!!v);else if(!i&&(_==="__value"||_==="value"&&v!=null))e.value=e.__value=v;else if(_==="selected"&&u)o1(e,v);else{var $=_;o||($=Rf($));var m=$==="defaultValue"||$==="defaultChecked";if(v==null&&!i&&!m)if(d[_]=null,$==="value"||$==="checked"){let b=e;const N=t===void 0;if($==="value"){let E=b.defaultValue;b.removeAttribute($),b.defaultValue=E,b.value=b.__value=N?E:null}else{let E=b.defaultChecked;b.removeAttribute($),b.defaultChecked=E,b.checked=N?E:!1}}else e.removeAttribute(_);else m||f.includes($)&&(i||typeof v!="string")?e[$]=v:typeof v!="function"&&de(e,$,v)}_==="style"&&"__styles"in e&&(e.__styles={})}}}return a&&It(!0),l}var vl=new Map;function pl(e){var t=vl.get(e.nodeName);if(t)return t;vl.set(e.nodeName,t=[]);for(var n,r=e,o=Element.prototype;o!==r;){n=Ta(r);for(var i in n)n[i].set&&t.push(i);r=ls(r)}return t}function at(e,t,n,r){var o=e.__styles??(e.__styles={});o[t]!==n&&(o[t]=n,n==null?e.style.removeProperty(t):e.style.setProperty(t,n,""))}const Ui=class Ui{constructor(t){wr(this,Gi);wr(this,or,new WeakMap);wr(this,qr);wr(this,Lo);zo(this,Lo,t)}observe(t,n){var r=ut(this,or).get(t)||new Set;return r.add(n),ut(this,or).set(t,r),Bd(this,Gi,Yd).call(this).observe(t,ut(this,Lo)),()=>{var o=ut(this,or).get(t);o.delete(n),o.size===0&&(ut(this,or).delete(t),ut(this,qr).unobserve(t))}}};or=new WeakMap,qr=new WeakMap,Lo=new WeakMap,Gi=new WeakSet,Yd=function(){return ut(this,qr)??zo(this,qr,new ResizeObserver(t=>{for(var n of t){Ui.entries.set(n.target,n);for(var r of ut(this,or).get(n.target)||[])r(n)}}))},Nt(Ui,"entries",new WeakMap);let Cs=Ui;var i1=new Cs({box:"border-box"});function ml(e,t,n){var r=i1.observe(e,()=>n(e[t]));Rt(()=>(yn(()=>n(e[t])),r))}function yl(e,t){return e===t||(e==null?void 0:e[Xn])===t}function An(e={},t,n,r){return Rt(()=>{var o,i;return $r(()=>{o=i,i=[],yn(()=>{e!==n(...i)&&(t(e,...i),o&&yl(n(...o),e)&&t(null,...o))})}),()=>{to(()=>{i&&yl(n(...i),e)&&t(null,...i)})}}),e}function ks(e){return function(...t){var n=t[0];return n.stopPropagation(),e==null?void 0:e.apply(this,t)}}function He(e=!1){const t=Ye,n=t.l.u;if(!n)return;let r=()=>j(t.s);if(e){let o=0,i={};const s=Ne(()=>{let a=!1;const l=t.s;for(const u in l)l[u]!==i[u]&&(i[u]=l[u],a=!0);return a&&o++,o});r=()=>h(s)}n.b.length&&Tf(()=>{wl(t,r),Jr(n.b)}),kr(()=>{const o=yn(()=>n.m.map(of));return()=>{for(const i of o)typeof i=="function"&&i()}}),n.a.length&&kr(()=>{wl(t,r),Jr(n.a)})}function wl(e,t){if(e.l.s)for(const n of e.l.s)h(n);t()}function De(e,t){var i;var n=(i=e.$$events)==null?void 0:i[t.type],r=Gr(n)?n.slice():n==null?[]:[n];for(var o of r)o.call(this,t)}function rn(e){Ye===null&&ti(),ot&&Ye.l!==null?a1(Ye).m.push(e):kr(()=>{const t=yn(e);if(typeof t=="function")return t})}function $s(e){Ye===null&&ti(),rn(()=>()=>yn(e))}function s1(e,t,{bubbles:n=!1,cancelable:r=!1}={}){return new CustomEvent(e,{detail:t,bubbles:n,cancelable:r})}function ii(){const e=Ye;return e===null&&ti(),(t,n,r)=>{var i;const o=(i=e.s.$$events)==null?void 0:i[t];if(o){const s=Gr(o)?o.slice():[o],a=s1(t,n,r);for(const l of s)l.call(e.x,a);return!a.defaultPrevented}return!0}}function a1(e){var t=e.l;return t.u??(t.u={a:[],b:[],m:[]})}function Es(e,t,n){if(e==null)return t(void 0),n&&n(void 0),gt;const r=yn(()=>e.subscribe(t,n));return r.unsubscribe?()=>r.unsubscribe():r}const Nr=[];function Gt(e,t){return{subscribe:we(e,t).subscribe}}function we(e,t=gt){let n=null;const r=new Set;function o(a){if(us(e,a)&&(e=a,n)){const l=!Nr.length;for(const u of r)u[1](),Nr.push(u,e);if(l){for(let u=0;u<Nr.length;u+=2)Nr[u][0](Nr[u+1]);Nr.length=0}}}function i(a){o(a(e))}function s(a,l=gt){const u=[a,l];return r.add(u),r.size===1&&(n=t(o,i)||gt),a(e),()=>{r.delete(u),r.size===0&&n&&(n(),n=null)}}return{set:o,update:i,subscribe:s}}function Un(e,t,n){const r=!Array.isArray(e),o=r?[e]:e;if(!o.every(Boolean))throw new Error("derived() expects stores as input, got a falsy value");const i=t.length<2;return Gt(n,(s,a)=>{let l=!1;const u=[];let c=0,f=gt;const d=()=>{if(c)return;f();const p=t(r?u[0]:u,s,a);i?s(p):f=typeof p=="function"?p:gt},g=o.map((p,x)=>Es(p,C=>{u[x]=C,c&=~(1<<x),l&&d()},()=>{c|=1<<x}));return l=!0,d(),function(){Jr(g),f(),l=!1}})}function q(e){let t;return Es(e,n=>t=n)(),t}let si=!1,Ss=Symbol();function Q(e,t,n){const r=n[t]??(n[t]={store:null,source:no(void 0),unsubscribe:gt});if(r.store!==e&&!(Ss in n))if(r.unsubscribe(),r.store=e??null,e==null)r.source.v=void 0,r.unsubscribe=gt;else{var o=!0;r.unsubscribe=Es(e,i=>{o?r.source.v=i:U(r.source,i)}),o=!1}return e&&Ss in n?q(e):h(r.source)}function l1(e,t,n){let r=n[t];return r&&r.store!==e&&(r.unsubscribe(),r.unsubscribe=gt),e}function ai(e,t){return e.set(t),t}function nt(){const e={};function t(){ja(()=>{for(var n in e)e[n].unsubscribe();Ur(e,Ss,{enumerable:!1,value:!0})})}return[e,t]}function u1(e){var t=si;try{return si=!1,[e(),si]}finally{si=t}}const c1={get(e,t){if(!e.exclude.includes(t))return e.props[t]},set(e,t){return!1},getOwnPropertyDescriptor(e,t){if(!e.exclude.includes(t)&&t in e.props)return{enumerable:!0,configurable:!0,value:e.props[t]}},has(e,t){return e.exclude.includes(t)?!1:t in e.props},ownKeys(e){return Reflect.ownKeys(e.props).filter(t=>!e.exclude.includes(t))}};function xt(e,t,n){return new Proxy({props:e,exclude:t},c1)}const d1={get(e,t){if(!e.exclude.includes(t))return h(e.version),t in e.special?e.special[t]():e.props[t]},set(e,t,n){return t in e.special||(e.special[t]=w({get[t](){return e.props[t]}},t,ka)),e.special[t](n),La(e.version),!0},getOwnPropertyDescriptor(e,t){if(!e.exclude.includes(t)&&t in e.props)return{enumerable:!0,configurable:!0,value:e.props[t]}},deleteProperty(e,t){return e.exclude.includes(t)||(e.exclude.push(t),La(e.version)),!0},has(e,t){return e.exclude.includes(t)?!1:t in e.props},ownKeys(e){return Reflect.ownKeys(e.props).filter(t=>!e.exclude.includes(t))}};function it(e,t){return new Proxy({props:e,exclude:t,special:{},version:Mt(0)},d1)}const f1={get(e,t){let n=e.props.length;for(;n--;){let r=e.props[n];if(jr(r)&&(r=r()),typeof r=="object"&&r!==null&&t in r)return r[t]}},set(e,t,n){let r=e.props.length;for(;r--;){let o=e.props[r];jr(o)&&(o=o());const i=Mn(o,t);if(i&&i.set)return i.set(n),!0}return!1},getOwnPropertyDescriptor(e,t){let n=e.props.length;for(;n--;){let r=e.props[n];if(jr(r)&&(r=r()),typeof r=="object"&&r!==null&&t in r){const o=Mn(r,t);return o&&!o.configurable&&(o.configurable=!0),o}}},has(e,t){if(t===Xn||t===ss)return!1;for(let n of e.props)if(jr(n)&&(n=n()),n!=null&&t in n)return!0;return!1},ownKeys(e){const t=[];for(let n of e.props){jr(n)&&(n=n());for(const r in n)t.includes(r)||t.push(r)}return t}};function ft(...e){return new Proxy({props:e},f1)}function w(e,t,n,r){var N;var o=(n&Wd)!==0,i=!ot||(n&Kd)!==0,s=(n&qd)!==0,a=(n&Gd)!==0,l=!1,u;s?[u,l]=u1(()=>e[t]):u=e[t];var c=Xn in e||ss in e,f=s&&(((N=Mn(e,t))==null?void 0:N.set)??(c&&t in e&&(E=>e[t]=E)))||void 0,d=r,g=!0,p=!1,x=()=>(p=!0,g&&(g=!1,a?d=yn(r):d=r),d);u===void 0&&r!==void 0&&(f&&i&&gf(),u=x(),f&&f(u));var C;if(i)C=()=>{var E=e[t];return E===void 0?x():(g=!0,p=!1,E)};else{var $=(o?Ne:ve)(()=>e[t]);$.f|=Jd,C=()=>{var E=h($);return E!==void 0&&(d=void 0),E===void 0?d:E}}if(!(n&ka))return C;if(f){var m=e.$$legacy;return function(E,T){return arguments.length>0?((!i||!T||m||l)&&f(T?C():E),E):C()}}var _=!1,v=no(u),b=Ne(()=>{var E=C(),T=h(v);return _?(_=!1,T):v.v=E});return o||(b.equals=cs),function(E,T){if(arguments.length>0){const D=T?h(b):i&&s?Ht(E):E;return b.equals(D)||(_=!0,U(v,D),p&&d!==void 0&&(d=D),yn(()=>h(b))),E}return h(b)}}function g1(e){return new h1(e)}class h1{constructor(t){wr(this,Zn);wr(this,jt);var i;var n=new Map,r=(s,a)=>{var l=no(a);return n.set(s,l),l};const o=new Proxy({...t.props||{},$$events:{}},{get(s,a){return h(n.get(a)??r(a,Reflect.get(s,a)))},has(s,a){return a===ss?!0:(h(n.get(a)??r(a,Reflect.get(s,a))),Reflect.has(s,a))},set(s,a,l){return U(n.get(a)??r(a,l),l),Reflect.set(s,a,l)}});zo(this,jt,(t.hydrate?Gf:al)(t.component,{target:t.target,anchor:t.anchor,props:o,context:t.context,intro:t.intro??!1,recover:t.recover})),(!((i=t==null?void 0:t.props)!=null&&i.$$host)||t.sync===!1)&&y(),zo(this,Zn,o.$$events);for(const s of Object.keys(ut(this,jt)))s==="$set"||s==="$destroy"||s==="$on"||Ur(this,s,{get(){return ut(this,jt)[s]},set(a){ut(this,jt)[s]=a},enumerable:!0});ut(this,jt).$set=s=>{Object.assign(o,s)},ut(this,jt).$destroy=()=>{Uf(ut(this,jt))}}$set(t){ut(this,jt).$set(t)}$on(t,n){ut(this,Zn)[t]=ut(this,Zn)[t]||[];const r=(...o)=>n.call(this,...o);return ut(this,Zn)[t].push(r),()=>{ut(this,Zn)[t]=ut(this,Zn)[t].filter(o=>o!==r)}}$destroy(){ut(this,jt).$destroy()}}Zn=new WeakMap,jt=new WeakMap;let _l;typeof HTMLElement=="function"&&(_l=class extends HTMLElement{constructor(t,n,r){super();Nt(this,"$$ctor");Nt(this,"$$s");Nt(this,"$$c");Nt(this,"$$cn",!1);Nt(this,"$$d",{});Nt(this,"$$r",!1);Nt(this,"$$p_d",{});Nt(this,"$$l",{});Nt(this,"$$l_u",new Map);Nt(this,"$$me");this.$$ctor=t,this.$$s=n,r&&this.attachShadow({mode:"open"})}addEventListener(t,n,r){if(this.$$l[t]=this.$$l[t]||[],this.$$l[t].push(n),this.$$c){const o=this.$$c.$on(t,n);this.$$l_u.set(n,o)}super.addEventListener(t,n,r)}removeEventListener(t,n,r){if(super.removeEventListener(t,n,r),this.$$c){const o=this.$$l_u.get(n);o&&(o(),this.$$l_u.delete(n))}}async connectedCallback(){if(this.$$cn=!0,!this.$$c){let t=function(o){return i=>{const s=document.createElement("slot");o!=="default"&&(s.name=o),L(i,s)}};if(await Promise.resolve(),!this.$$cn||this.$$c)return;const n={},r=v1(this);for(const o of this.$$s)o in r&&(o==="default"&&!this.$$d.children?(this.$$d.children=t(o),n.default=!0):n[o]=t(o));for(const o of this.attributes){const i=this.$$g_p(o.name);i in this.$$d||(this.$$d[i]=li(i,o.value,this.$$p_d,"toProp"))}for(const o in this.$$p_d)!(o in this.$$d)&&this[o]!==void 0&&(this.$$d[o]=this[o],delete this[o]);this.$$c=g1({component:this.$$ctor,target:this.shadowRoot||this,props:{...this.$$d,$$slots:n,$$host:this}}),this.$$me=Mf(()=>{$r(()=>{var o;this.$$r=!0;for(const i of Fo(this.$$c)){if(!((o=this.$$p_d[i])!=null&&o.reflect))continue;this.$$d[i]=this.$$c[i];const s=li(i,this.$$d[i],this.$$p_d,"toAttribute");s==null?this.removeAttribute(this.$$p_d[i].attribute||i):this.setAttribute(this.$$p_d[i].attribute||i,s)}this.$$r=!1})});for(const o in this.$$l)for(const i of this.$$l[o]){const s=this.$$c.$on(o,i);this.$$l_u.set(i,s)}this.$$l={}}}attributeChangedCallback(t,n,r){var o;this.$$r||(t=this.$$g_p(t),this.$$d[t]=li(t,r,this.$$p_d,"toProp"),(o=this.$$c)==null||o.$set({[t]:this.$$d[t]}))}disconnectedCallback(){this.$$cn=!1,Promise.resolve().then(()=>{!this.$$cn&&this.$$c&&(this.$$c.$destroy(),this.$$me(),this.$$c=void 0)})}$$g_p(t){return Fo(this.$$p_d).find(n=>this.$$p_d[n].attribute===t||!this.$$p_d[n].attribute&&n.toLowerCase()===t)||t}});function li(e,t,n,r){var i;const o=(i=n[e])==null?void 0:i.type;if(t=o==="Boolean"&&typeof t!="boolean"?t!=null:t,!r||!n[e])return t;if(r==="toAttribute")switch(o){case"Object":case"Array":return t==null?null:JSON.stringify(t);case"Boolean":return t?"":null;case"Number":return t??null;default:return t}else switch(o){case"Object":case"Array":return t&&JSON.parse(t);case"Boolean":return t;case"Number":return t!=null?+t:t;default:return t}}function v1(e){const t={};return e.childNodes.forEach(n=>{t[n.slot||"default"]=!0}),t}function ie(e,t,n,r,o,i){let s=class extends _l{constructor(){super(e,n,o),this.$$p_d=t}static get observedAttributes(){return Fo(t).map(a=>(t[a].attribute||a).toLowerCase())}};return Fo(t).forEach(a=>{Ur(s.prototype,a,{get(){return this.$$c&&a in this.$$c?this.$$c[a]:this.$$d[a]},set(l){var f;l=li(a,l,t),this.$$d[a]=l;var u=this.$$c;if(u){var c=(f=Mn(u,a))==null?void 0:f.get;c?u[a]=l:u.$set({[a]:l})}}})}),r.forEach(a=>{Ur(s.prototype,a,{get(){var l;return(l=this.$$c)==null?void 0:l[a]}})}),e.element=s,s}function Et(e){if(typeof e=="string"||typeof e=="number")return""+e;let t="";if(Array.isArray(e))for(let n=0,r;n<e.length;n++)(r=Et(e[n]))!==""&&(t+=(t&&" ")+r);else for(let n in e)e[n]&&(t+=(t&&" ")+n);return t}var p1={value:()=>{}};function ui(){for(var e=0,t=arguments.length,n={},r;e<t;++e){if(!(r=arguments[e]+"")||r in n||/[\s.]/.test(r))throw new Error("illegal type: "+r);n[r]=[]}return new ci(n)}function ci(e){this._=e}function m1(e,t){return e.trim().split(/^|\s+/).map(function(n){var r="",o=n.indexOf(".");if(o>=0&&(r=n.slice(o+1),n=n.slice(0,o)),n&&!t.hasOwnProperty(n))throw new Error("unknown type: "+n);return{type:n,name:r}})}ci.prototype=ui.prototype={constructor:ci,on:function(e,t){var n=this._,r=m1(e+"",n),o,i=-1,s=r.length;if(arguments.length<2){for(;++i<s;)if((o=(e=r[i]).type)&&(o=y1(n[o],e.name)))return o;return}if(t!=null&&typeof t!="function")throw new Error("invalid callback: "+t);for(;++i<s;)if(o=(e=r[i]).type)n[o]=xl(n[o],e.name,t);else if(t==null)for(o in n)n[o]=xl(n[o],e.name,null);return this},copy:function(){var e={},t=this._;for(var n in t)e[n]=t[n].slice();return new ci(e)},call:function(e,t){if((o=arguments.length-2)>0)for(var n=new Array(o),r=0,o,i;r<o;++r)n[r]=arguments[r+2];if(!this._.hasOwnProperty(e))throw new Error("unknown type: "+e);for(i=this._[e],r=0,o=i.length;r<o;++r)i[r].value.apply(t,n)},apply:function(e,t,n){if(!this._.hasOwnProperty(e))throw new Error("unknown type: "+e);for(var r=this._[e],o=0,i=r.length;o<i;++o)r[o].value.apply(t,n)}};function y1(e,t){for(var n=0,r=e.length,o;n<r;++n)if((o=e[n]).name===t)return o.value}function xl(e,t,n){for(var r=0,o=e.length;r<o;++r)if(e[r].name===t){e[r]=p1,e=e.slice(0,r).concat(e.slice(r+1));break}return n!=null&&e.push({name:t,value:n}),e}var Ps="http://www.w3.org/1999/xhtml";const bl={svg:"http://www.w3.org/2000/svg",xhtml:Ps,xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"};function di(e){var t=e+="",n=t.indexOf(":");return n>=0&&(t=e.slice(0,n))!=="xmlns"&&(e=e.slice(n+1)),bl.hasOwnProperty(t)?{space:bl[t],local:e}:e}function w1(e){return function(){var t=this.ownerDocument,n=this.namespaceURI;return n===Ps&&t.documentElement.namespaceURI===Ps?t.createElement(e):t.createElementNS(n,e)}}function _1(e){return function(){return this.ownerDocument.createElementNS(e.space,e.local)}}function Cl(e){var t=di(e);return(t.local?_1:w1)(t)}function x1(){}function Ns(e){return e==null?x1:function(){return this.querySelector(e)}}function b1(e){typeof e!="function"&&(e=Ns(e));for(var t=this._groups,n=t.length,r=new Array(n),o=0;o<n;++o)for(var i=t[o],s=i.length,a=r[o]=new Array(s),l,u,c=0;c<s;++c)(l=i[c])&&(u=e.call(l,l.__data__,c,i))&&("__data__"in l&&(u.__data__=l.__data__),a[c]=u);return new Zt(r,this._parents)}function C1(e){return e==null?[]:Array.isArray(e)?e:Array.from(e)}function k1(){return[]}function kl(e){return e==null?k1:function(){return this.querySelectorAll(e)}}function $1(e){return function(){return C1(e.apply(this,arguments))}}function E1(e){typeof e=="function"?e=$1(e):e=kl(e);for(var t=this._groups,n=t.length,r=[],o=[],i=0;i<n;++i)for(var s=t[i],a=s.length,l,u=0;u<a;++u)(l=s[u])&&(r.push(e.call(l,l.__data__,u,s)),o.push(l));return new Zt(r,o)}function $l(e){return function(){return this.matches(e)}}function El(e){return function(t){return t.matches(e)}}var S1=Array.prototype.find;function P1(e){return function(){return S1.call(this.children,e)}}function N1(){return this.firstElementChild}function T1(e){return this.select(e==null?N1:P1(typeof e=="function"?e:El(e)))}var M1=Array.prototype.filter;function H1(){return Array.from(this.children)}function V1(e){return function(){return M1.call(this.children,e)}}function D1(e){return this.selectAll(e==null?H1:V1(typeof e=="function"?e:El(e)))}function A1(e){typeof e!="function"&&(e=$l(e));for(var t=this._groups,n=t.length,r=new Array(n),o=0;o<n;++o)for(var i=t[o],s=i.length,a=r[o]=[],l,u=0;u<s;++u)(l=i[u])&&e.call(l,l.__data__,u,i)&&a.push(l);return new Zt(r,this._parents)}function Sl(e){return new Array(e.length)}function L1(){return new Zt(this._enter||this._groups.map(Sl),this._parents)}function fi(e,t){this.ownerDocument=e.ownerDocument,this.namespaceURI=e.namespaceURI,this._next=null,this._parent=e,this.__data__=t}fi.prototype={constructor:fi,appendChild:function(e){return this._parent.insertBefore(e,this._next)},insertBefore:function(e,t){return this._parent.insertBefore(e,t)},querySelector:function(e){return this._parent.querySelector(e)},querySelectorAll:function(e){return this._parent.querySelectorAll(e)}};function O1(e){return function(){return e}}function I1(e,t,n,r,o,i){for(var s=0,a,l=t.length,u=i.length;s<u;++s)(a=t[s])?(a.__data__=i[s],r[s]=a):n[s]=new fi(e,i[s]);for(;s<l;++s)(a=t[s])&&(o[s]=a)}function z1(e,t,n,r,o,i,s){var a,l,u=new Map,c=t.length,f=i.length,d=new Array(c),g;for(a=0;a<c;++a)(l=t[a])&&(d[a]=g=s.call(l,l.__data__,a,t)+"",u.has(g)?o[a]=l:u.set(g,l));for(a=0;a<f;++a)g=s.call(e,i[a],a,i)+"",(l=u.get(g))?(r[a]=l,l.__data__=i[a],u.delete(g)):n[a]=new fi(e,i[a]);for(a=0;a<c;++a)(l=t[a])&&u.get(d[a])===l&&(o[a]=l)}function R1(e){return e.__data__}function B1(e,t){if(!arguments.length)return Array.from(this,R1);var n=t?z1:I1,r=this._parents,o=this._groups;typeof e!="function"&&(e=O1(e));for(var i=o.length,s=new Array(i),a=new Array(i),l=new Array(i),u=0;u<i;++u){var c=r[u],f=o[u],d=f.length,g=Y1(e.call(c,c&&c.__data__,u,r)),p=g.length,x=a[u]=new Array(p),C=s[u]=new Array(p),$=l[u]=new Array(d);n(c,f,x,C,$,g,t);for(var m=0,_=0,v,b;m<p;++m)if(v=x[m]){for(m>=_&&(_=m+1);!(b=C[_])&&++_<p;);v._next=b||null}}return s=new Zt(s,r),s._enter=a,s._exit=l,s}function Y1(e){return typeof e=="object"&&"length"in e?e:Array.from(e)}function Z1(){return new Zt(this._exit||this._groups.map(Sl),this._parents)}function X1(e,t,n){var r=this.enter(),o=this,i=this.exit();return typeof e=="function"?(r=e(r),r&&(r=r.selection())):r=r.append(e+""),t!=null&&(o=t(o),o&&(o=o.selection())),n==null?i.remove():n(i),r&&o?r.merge(o).order():o}function F1(e){for(var t=e.selection?e.selection():e,n=this._groups,r=t._groups,o=n.length,i=r.length,s=Math.min(o,i),a=new Array(o),l=0;l<s;++l)for(var u=n[l],c=r[l],f=u.length,d=a[l]=new Array(f),g,p=0;p<f;++p)(g=u[p]||c[p])&&(d[p]=g);for(;l<o;++l)a[l]=n[l];return new Zt(a,this._parents)}function W1(){for(var e=this._groups,t=-1,n=e.length;++t<n;)for(var r=e[t],o=r.length-1,i=r[o],s;--o>=0;)(s=r[o])&&(i&&s.compareDocumentPosition(i)^4&&i.parentNode.insertBefore(s,i),i=s);return this}function K1(e){e||(e=q1);function t(f,d){return f&&d?e(f.__data__,d.__data__):!f-!d}for(var n=this._groups,r=n.length,o=new Array(r),i=0;i<r;++i){for(var s=n[i],a=s.length,l=o[i]=new Array(a),u,c=0;c<a;++c)(u=s[c])&&(l[c]=u);l.sort(t)}return new Zt(o,this._parents).order()}function q1(e,t){return e<t?-1:e>t?1:e>=t?0:NaN}function G1(){var e=arguments[0];return arguments[0]=this,e.apply(null,arguments),this}function U1(){return Array.from(this)}function j1(){for(var e=this._groups,t=0,n=e.length;t<n;++t)for(var r=e[t],o=0,i=r.length;o<i;++o){var s=r[o];if(s)return s}return null}function J1(){let e=0;for(const t of this)++e;return e}function Q1(){return!this.node()}function eg(e){for(var t=this._groups,n=0,r=t.length;n<r;++n)for(var o=t[n],i=0,s=o.length,a;i<s;++i)(a=o[i])&&e.call(a,a.__data__,i,o);return this}function tg(e){return function(){this.removeAttribute(e)}}function ng(e){return function(){this.removeAttributeNS(e.space,e.local)}}function rg(e,t){return function(){this.setAttribute(e,t)}}function og(e,t){return function(){this.setAttributeNS(e.space,e.local,t)}}function ig(e,t){return function(){var n=t.apply(this,arguments);n==null?this.removeAttribute(e):this.setAttribute(e,n)}}function sg(e,t){return function(){var n=t.apply(this,arguments);n==null?this.removeAttributeNS(e.space,e.local):this.setAttributeNS(e.space,e.local,n)}}function ag(e,t){var n=di(e);if(arguments.length<2){var r=this.node();return n.local?r.getAttributeNS(n.space,n.local):r.getAttribute(n)}return this.each((t==null?n.local?ng:tg:typeof t=="function"?n.local?sg:ig:n.local?og:rg)(n,t))}function Pl(e){return e.ownerDocument&&e.ownerDocument.defaultView||e.document&&e||e.defaultView}function lg(e){return function(){this.style.removeProperty(e)}}function ug(e,t,n){return function(){this.style.setProperty(e,t,n)}}function cg(e,t,n){return function(){var r=t.apply(this,arguments);r==null?this.style.removeProperty(e):this.style.setProperty(e,r,n)}}function dg(e,t,n){return arguments.length>1?this.each((t==null?lg:typeof t=="function"?cg:ug)(e,t,n??"")):Tr(this.node(),e)}function Tr(e,t){return e.style.getPropertyValue(t)||Pl(e).getComputedStyle(e,null).getPropertyValue(t)}function fg(e){return function(){delete this[e]}}function gg(e,t){return function(){this[e]=t}}function hg(e,t){return function(){var n=t.apply(this,arguments);n==null?delete this[e]:this[e]=n}}function vg(e,t){return arguments.length>1?this.each((t==null?fg:typeof t=="function"?hg:gg)(e,t)):this.node()[e]}function Nl(e){return e.trim().split(/^|\s+/)}function Ts(e){return e.classList||new Tl(e)}function Tl(e){this._node=e,this._names=Nl(e.getAttribute("class")||"")}Tl.prototype={add:function(e){var t=this._names.indexOf(e);t<0&&(this._names.push(e),this._node.setAttribute("class",this._names.join(" ")))},remove:function(e){var t=this._names.indexOf(e);t>=0&&(this._names.splice(t,1),this._node.setAttribute("class",this._names.join(" ")))},contains:function(e){return this._names.indexOf(e)>=0}};function Ml(e,t){for(var n=Ts(e),r=-1,o=t.length;++r<o;)n.add(t[r])}function Hl(e,t){for(var n=Ts(e),r=-1,o=t.length;++r<o;)n.remove(t[r])}function pg(e){return function(){Ml(this,e)}}function mg(e){return function(){Hl(this,e)}}function yg(e,t){return function(){(t.apply(this,arguments)?Ml:Hl)(this,e)}}function wg(e,t){var n=Nl(e+"");if(arguments.length<2){for(var r=Ts(this.node()),o=-1,i=n.length;++o<i;)if(!r.contains(n[o]))return!1;return!0}return this.each((typeof t=="function"?yg:t?pg:mg)(n,t))}function _g(){this.textContent=""}function xg(e){return function(){this.textContent=e}}function bg(e){return function(){var t=e.apply(this,arguments);this.textContent=t??""}}function Cg(e){return arguments.length?this.each(e==null?_g:(typeof e=="function"?bg:xg)(e)):this.node().textContent}function kg(){this.innerHTML=""}function $g(e){return function(){this.innerHTML=e}}function Eg(e){return function(){var t=e.apply(this,arguments);this.innerHTML=t??""}}function Sg(e){return arguments.length?this.each(e==null?kg:(typeof e=="function"?Eg:$g)(e)):this.node().innerHTML}function Pg(){this.nextSibling&&this.parentNode.appendChild(this)}function Ng(){return this.each(Pg)}function Tg(){this.previousSibling&&this.parentNode.insertBefore(this,this.parentNode.firstChild)}function Mg(){return this.each(Tg)}function Hg(e){var t=typeof e=="function"?e:Cl(e);return this.select(function(){return this.appendChild(t.apply(this,arguments))})}function Vg(){return null}function Dg(e,t){var n=typeof e=="function"?e:Cl(e),r=t==null?Vg:typeof t=="function"?t:Ns(t);return this.select(function(){return this.insertBefore(n.apply(this,arguments),r.apply(this,arguments)||null)})}function Ag(){var e=this.parentNode;e&&e.removeChild(this)}function Lg(){return this.each(Ag)}function Og(){var e=this.cloneNode(!1),t=this.parentNode;return t?t.insertBefore(e,this.nextSibling):e}function Ig(){var e=this.cloneNode(!0),t=this.parentNode;return t?t.insertBefore(e,this.nextSibling):e}function zg(e){return this.select(e?Ig:Og)}function Rg(e){return arguments.length?this.property("__data__",e):this.node().__data__}function Bg(e){return function(t){e.call(this,t,this.__data__)}}function Yg(e){return e.trim().split(/^|\s+/).map(function(t){var n="",r=t.indexOf(".");return r>=0&&(n=t.slice(r+1),t=t.slice(0,r)),{type:t,name:n}})}function Zg(e){return function(){var t=this.__on;if(t){for(var n=0,r=-1,o=t.length,i;n<o;++n)i=t[n],(!e.type||i.type===e.type)&&i.name===e.name?this.removeEventListener(i.type,i.listener,i.options):t[++r]=i;++r?t.length=r:delete this.__on}}}function Xg(e,t,n){return function(){var r=this.__on,o,i=Bg(t);if(r){for(var s=0,a=r.length;s<a;++s)if((o=r[s]).type===e.type&&o.name===e.name){this.removeEventListener(o.type,o.listener,o.options),this.addEventListener(o.type,o.listener=i,o.options=n),o.value=t;return}}this.addEventListener(e.type,i,n),o={type:e.type,name:e.name,value:t,listener:i,options:n},r?r.push(o):this.__on=[o]}}function Fg(e,t,n){var r=Yg(e+""),o,i=r.length,s;if(arguments.length<2){var a=this.node().__on;if(a){for(var l=0,u=a.length,c;l<u;++l)for(o=0,c=a[l];o<i;++o)if((s=r[o]).type===c.type&&s.name===c.name)return c.value}return}for(a=t?Xg:Zg,o=0;o<i;++o)this.each(a(r[o],t,n));return this}function Vl(e,t,n){var r=Pl(e),o=r.CustomEvent;typeof o=="function"?o=new o(t,n):(o=r.document.createEvent("Event"),n?(o.initEvent(t,n.bubbles,n.cancelable),o.detail=n.detail):o.initEvent(t,!1,!1)),e.dispatchEvent(o)}function Wg(e,t){return function(){return Vl(this,e,t)}}function Kg(e,t){return function(){return Vl(this,e,t.apply(this,arguments))}}function qg(e,t){return this.each((typeof t=="function"?Kg:Wg)(e,t))}function*Gg(){for(var e=this._groups,t=0,n=e.length;t<n;++t)for(var r=e[t],o=0,i=r.length,s;o<i;++o)(s=r[o])&&(yield s)}var Dl=[null];function Zt(e,t){this._groups=e,this._parents=t}function lo(){return new Zt([[document.documentElement]],Dl)}function Ug(){return this}Zt.prototype=lo.prototype={constructor:Zt,select:b1,selectAll:E1,selectChild:T1,selectChildren:D1,filter:A1,data:B1,enter:L1,exit:Z1,join:X1,merge:F1,selection:Ug,order:W1,sort:K1,call:G1,nodes:U1,node:j1,size:J1,empty:Q1,each:eg,attr:ag,style:dg,property:vg,classed:wg,text:Cg,html:Sg,raise:Ng,lower:Mg,append:Hg,insert:Dg,remove:Lg,clone:zg,datum:Rg,on:Fg,dispatch:qg,[Symbol.iterator]:Gg};function Ut(e){return typeof e=="string"?new Zt([[document.querySelector(e)]],[document.documentElement]):new Zt([[e]],Dl)}function jg(e){let t;for(;t=e.sourceEvent;)e=t;return e}function on(e,t){if(e=jg(e),t===void 0&&(t=e.currentTarget),t){var n=t.ownerSVGElement||t;if(n.createSVGPoint){var r=n.createSVGPoint();return r.x=e.clientX,r.y=e.clientY,r=r.matrixTransform(t.getScreenCTM().inverse()),[r.x,r.y]}if(t.getBoundingClientRect){var o=t.getBoundingClientRect();return[e.clientX-o.left-t.clientLeft,e.clientY-o.top-t.clientTop]}}return[e.pageX,e.pageY]}const Jg={passive:!1},uo={capture:!0,passive:!1};function Ms(e){e.stopImmediatePropagation()}function Mr(e){e.preventDefault(),e.stopImmediatePropagation()}function Al(e){var t=e.document.documentElement,n=Ut(e).on("dragstart.drag",Mr,uo);"onselectstart"in t?n.on("selectstart.drag",Mr,uo):(t.__noselect=t.style.MozUserSelect,t.style.MozUserSelect="none")}function Ll(e,t){var n=e.document.documentElement,r=Ut(e).on("dragstart.drag",null);t&&(r.on("click.drag",Mr,uo),setTimeout(function(){r.on("click.drag",null)},0)),"onselectstart"in n?r.on("selectstart.drag",null):(n.style.MozUserSelect=n.__noselect,delete n.__noselect)}const gi=e=>()=>e;function Hs(e,{sourceEvent:t,subject:n,target:r,identifier:o,active:i,x:s,y:a,dx:l,dy:u,dispatch:c}){Object.defineProperties(this,{type:{value:e,enumerable:!0,configurable:!0},sourceEvent:{value:t,enumerable:!0,configurable:!0},subject:{value:n,enumerable:!0,configurable:!0},target:{value:r,enumerable:!0,configurable:!0},identifier:{value:o,enumerable:!0,configurable:!0},active:{value:i,enumerable:!0,configurable:!0},x:{value:s,enumerable:!0,configurable:!0},y:{value:a,enumerable:!0,configurable:!0},dx:{value:l,enumerable:!0,configurable:!0},dy:{value:u,enumerable:!0,configurable:!0},_:{value:c}})}Hs.prototype.on=function(){var e=this._.on.apply(this._,arguments);return e===this._?this:e};function Qg(e){return!e.ctrlKey&&!e.button}function eh(){return this.parentNode}function th(e,t){return t??{x:e.x,y:e.y}}function nh(){return navigator.maxTouchPoints||"ontouchstart"in this}function rh(){var e=Qg,t=eh,n=th,r=nh,o={},i=ui("start","drag","end"),s=0,a,l,u,c,f=0;function d(v){v.on("mousedown.drag",g).filter(r).on("touchstart.drag",C).on("touchmove.drag",$,Jg).on("touchend.drag touchcancel.drag",m).style("touch-action","none").style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function g(v,b){if(!(c||!e.call(this,v,b))){var N=_(this,t.call(this,v,b),v,b,"mouse");N&&(Ut(v.view).on("mousemove.drag",p,uo).on("mouseup.drag",x,uo),Al(v.view),Ms(v),u=!1,a=v.clientX,l=v.clientY,N("start",v))}}function p(v){if(Mr(v),!u){var b=v.clientX-a,N=v.clientY-l;u=b*b+N*N>f}o.mouse("drag",v)}function x(v){Ut(v.view).on("mousemove.drag mouseup.drag",null),Ll(v.view,u),Mr(v),o.mouse("end",v)}function C(v,b){if(e.call(this,v,b)){var N=v.changedTouches,E=t.call(this,v,b),T=N.length,D,V;for(D=0;D<T;++D)(V=_(this,E,v,b,N[D].identifier,N[D]))&&(Ms(v),V("start",v,N[D]))}}function $(v){var b=v.changedTouches,N=b.length,E,T;for(E=0;E<N;++E)(T=o[b[E].identifier])&&(Mr(v),T("drag",v,b[E]))}function m(v){var b=v.changedTouches,N=b.length,E,T;for(c&&clearTimeout(c),c=setTimeout(function(){c=null},500),E=0;E<N;++E)(T=o[b[E].identifier])&&(Ms(v),T("end",v,b[E]))}function _(v,b,N,E,T,D){var V=i.copy(),A=on(D||N,b),O,R,S;if((S=n.call(v,new Hs("beforestart",{sourceEvent:N,target:d,identifier:T,active:s,x:A[0],y:A[1],dx:0,dy:0,dispatch:V}),E))!=null)return O=S.x-A[0]||0,R=S.y-A[1]||0,function M(k,P,H){var I=A,B;switch(k){case"start":o[T]=M,B=s++;break;case"end":delete o[T],--s;case"drag":A=on(H||P,b),B=s;break}V.call(k,v,new Hs(k,{sourceEvent:P,subject:S,target:d,identifier:T,active:B,x:A[0]+O,y:A[1]+R,dx:A[0]-I[0],dy:A[1]-I[1],dispatch:V}),E)}}return d.filter=function(v){return arguments.length?(e=typeof v=="function"?v:gi(!!v),d):e},d.container=function(v){return arguments.length?(t=typeof v=="function"?v:gi(v),d):t},d.subject=function(v){return arguments.length?(n=typeof v=="function"?v:gi(v),d):n},d.touchable=function(v){return arguments.length?(r=typeof v=="function"?v:gi(!!v),d):r},d.on=function(){var v=i.on.apply(i,arguments);return v===i?d:v},d.clickDistance=function(v){return arguments.length?(f=(v=+v)*v,d):Math.sqrt(f)},d}function Vs(e,t,n){e.prototype=t.prototype=n,n.constructor=e}function Ol(e,t){var n=Object.create(e.prototype);for(var r in t)n[r]=t[r];return n}function co(){}var fo=.7,hi=1/fo,Hr="\\s*([+-]?\\d+)\\s*",go="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",_n="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",oh=/^#([0-9a-f]{3,8})$/,ih=new RegExp(`^rgb\\(${Hr},${Hr},${Hr}\\)$`),sh=new RegExp(`^rgb\\(${_n},${_n},${_n}\\)$`),ah=new RegExp(`^rgba\\(${Hr},${Hr},${Hr},${go}\\)$`),lh=new RegExp(`^rgba\\(${_n},${_n},${_n},${go}\\)$`),uh=new RegExp(`^hsl\\(${go},${_n},${_n}\\)$`),ch=new RegExp(`^hsla\\(${go},${_n},${_n},${go}\\)$`),Il={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074};Vs(co,ho,{copy(e){return Object.assign(new this.constructor,this,e)},displayable(){return this.rgb().displayable()},hex:zl,formatHex:zl,formatHex8:dh,formatHsl:fh,formatRgb:Rl,toString:Rl});function zl(){return this.rgb().formatHex()}function dh(){return this.rgb().formatHex8()}function fh(){return Fl(this).formatHsl()}function Rl(){return this.rgb().formatRgb()}function ho(e){var t,n;return e=(e+"").trim().toLowerCase(),(t=oh.exec(e))?(n=t[1].length,t=parseInt(t[1],16),n===6?Bl(t):n===3?new At(t>>8&15|t>>4&240,t>>4&15|t&240,(t&15)<<4|t&15,1):n===8?vi(t>>24&255,t>>16&255,t>>8&255,(t&255)/255):n===4?vi(t>>12&15|t>>8&240,t>>8&15|t>>4&240,t>>4&15|t&240,((t&15)<<4|t&15)/255):null):(t=ih.exec(e))?new At(t[1],t[2],t[3],1):(t=sh.exec(e))?new At(t[1]*255/100,t[2]*255/100,t[3]*255/100,1):(t=ah.exec(e))?vi(t[1],t[2],t[3],t[4]):(t=lh.exec(e))?vi(t[1]*255/100,t[2]*255/100,t[3]*255/100,t[4]):(t=uh.exec(e))?Xl(t[1],t[2]/100,t[3]/100,1):(t=ch.exec(e))?Xl(t[1],t[2]/100,t[3]/100,t[4]):Il.hasOwnProperty(e)?Bl(Il[e]):e==="transparent"?new At(NaN,NaN,NaN,0):null}function Bl(e){return new At(e>>16&255,e>>8&255,e&255,1)}function vi(e,t,n,r){return r<=0&&(e=t=n=NaN),new At(e,t,n,r)}function gh(e){return e instanceof co||(e=ho(e)),e?(e=e.rgb(),new At(e.r,e.g,e.b,e.opacity)):new At}function Ds(e,t,n,r){return arguments.length===1?gh(e):new At(e,t,n,r??1)}function At(e,t,n,r){this.r=+e,this.g=+t,this.b=+n,this.opacity=+r}Vs(At,Ds,Ol(co,{brighter(e){return e=e==null?hi:Math.pow(hi,e),new At(this.r*e,this.g*e,this.b*e,this.opacity)},darker(e){return e=e==null?fo:Math.pow(fo,e),new At(this.r*e,this.g*e,this.b*e,this.opacity)},rgb(){return this},clamp(){return new At(dr(this.r),dr(this.g),dr(this.b),pi(this.opacity))},displayable(){return-.5<=this.r&&this.r<255.5&&-.5<=this.g&&this.g<255.5&&-.5<=this.b&&this.b<255.5&&0<=this.opacity&&this.opacity<=1},hex:Yl,formatHex:Yl,formatHex8:hh,formatRgb:Zl,toString:Zl}));function Yl(){return`#${fr(this.r)}${fr(this.g)}${fr(this.b)}`}function hh(){return`#${fr(this.r)}${fr(this.g)}${fr(this.b)}${fr((isNaN(this.opacity)?1:this.opacity)*255)}`}function Zl(){const e=pi(this.opacity);return`${e===1?"rgb(":"rgba("}${dr(this.r)}, ${dr(this.g)}, ${dr(this.b)}${e===1?")":`, ${e})`}`}function pi(e){return isNaN(e)?1:Math.max(0,Math.min(1,e))}function dr(e){return Math.max(0,Math.min(255,Math.round(e)||0))}function fr(e){return e=dr(e),(e<16?"0":"")+e.toString(16)}function Xl(e,t,n,r){return r<=0?e=t=n=NaN:n<=0||n>=1?e=t=NaN:t<=0&&(e=NaN),new sn(e,t,n,r)}function Fl(e){if(e instanceof sn)return new sn(e.h,e.s,e.l,e.opacity);if(e instanceof co||(e=ho(e)),!e)return new sn;if(e instanceof sn)return e;e=e.rgb();var t=e.r/255,n=e.g/255,r=e.b/255,o=Math.min(t,n,r),i=Math.max(t,n,r),s=NaN,a=i-o,l=(i+o)/2;return a?(t===i?s=(n-r)/a+(n<r)*6:n===i?s=(r-t)/a+2:s=(t-n)/a+4,a/=l<.5?i+o:2-i-o,s*=60):a=l>0&&l<1?0:s,new sn(s,a,l,e.opacity)}function vh(e,t,n,r){return arguments.length===1?Fl(e):new sn(e,t,n,r??1)}function sn(e,t,n,r){this.h=+e,this.s=+t,this.l=+n,this.opacity=+r}Vs(sn,vh,Ol(co,{brighter(e){return e=e==null?hi:Math.pow(hi,e),new sn(this.h,this.s,this.l*e,this.opacity)},darker(e){return e=e==null?fo:Math.pow(fo,e),new sn(this.h,this.s,this.l*e,this.opacity)},rgb(){var e=this.h%360+(this.h<0)*360,t=isNaN(e)||isNaN(this.s)?0:this.s,n=this.l,r=n+(n<.5?n:1-n)*t,o=2*n-r;return new At(As(e>=240?e-240:e+120,o,r),As(e,o,r),As(e<120?e+240:e-120,o,r),this.opacity)},clamp(){return new sn(Wl(this.h),mi(this.s),mi(this.l),pi(this.opacity))},displayable(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&0<=this.l&&this.l<=1&&0<=this.opacity&&this.opacity<=1},formatHsl(){const e=pi(this.opacity);return`${e===1?"hsl(":"hsla("}${Wl(this.h)}, ${mi(this.s)*100}%, ${mi(this.l)*100}%${e===1?")":`, ${e})`}`}}));function Wl(e){return e=(e||0)%360,e<0?e+360:e}function mi(e){return Math.max(0,Math.min(1,e||0))}function As(e,t,n){return(e<60?t+(n-t)*e/60:e<180?n:e<240?t+(n-t)*(240-e)/60:t)*255}const Kl=e=>()=>e;function ph(e,t){return function(n){return e+n*t}}function mh(e,t,n){return e=Math.pow(e,n),t=Math.pow(t,n)-e,n=1/n,function(r){return Math.pow(e+r*t,n)}}function yh(e){return(e=+e)==1?ql:function(t,n){return n-t?mh(t,n,e):Kl(isNaN(t)?n:t)}}function ql(e,t){var n=t-e;return n?ph(e,n):Kl(isNaN(e)?t:e)}const Gl=function e(t){var n=yh(t);function r(o,i){var s=n((o=Ds(o)).r,(i=Ds(i)).r),a=n(o.g,i.g),l=n(o.b,i.b),u=ql(o.opacity,i.opacity);return function(c){return o.r=s(c),o.g=a(c),o.b=l(c),o.opacity=u(c),o+""}}return r.gamma=e,r}(1);function jn(e,t){return e=+e,t=+t,function(n){return e*(1-n)+t*n}}var Ls=/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,Os=new RegExp(Ls.source,"g");function wh(e){return function(){return e}}function _h(e){return function(t){return e(t)+""}}function xh(e,t){var n=Ls.lastIndex=Os.lastIndex=0,r,o,i,s=-1,a=[],l=[];for(e=e+"",t=t+"";(r=Ls.exec(e))&&(o=Os.exec(t));)(i=o.index)>n&&(i=t.slice(n,i),a[s]?a[s]+=i:a[++s]=i),(r=r[0])===(o=o[0])?a[s]?a[s]+=o:a[++s]=o:(a[++s]=null,l.push({i:s,x:jn(r,o)})),n=Os.lastIndex;return n<t.length&&(i=t.slice(n),a[s]?a[s]+=i:a[++s]=i),a.length<2?l[0]?_h(l[0].x):wh(t):(t=l.length,function(u){for(var c=0,f;c<t;++c)a[(f=l[c]).i]=f.x(u);return a.join("")})}var Ul=180/Math.PI,Is={translateX:0,translateY:0,rotate:0,skewX:0,scaleX:1,scaleY:1};function jl(e,t,n,r,o,i){var s,a,l;return(s=Math.sqrt(e*e+t*t))&&(e/=s,t/=s),(l=e*n+t*r)&&(n-=e*l,r-=t*l),(a=Math.sqrt(n*n+r*r))&&(n/=a,r/=a,l/=a),e*r<t*n&&(e=-e,t=-t,l=-l,s=-s),{translateX:o,translateY:i,rotate:Math.atan2(t,e)*Ul,skewX:Math.atan(l)*Ul,scaleX:s,scaleY:a}}var yi;function bh(e){const t=new(typeof DOMMatrix=="function"?DOMMatrix:WebKitCSSMatrix)(e+"");return t.isIdentity?Is:jl(t.a,t.b,t.c,t.d,t.e,t.f)}function Ch(e){return e==null||(yi||(yi=document.createElementNS("http://www.w3.org/2000/svg","g")),yi.setAttribute("transform",e),!(e=yi.transform.baseVal.consolidate()))?Is:(e=e.matrix,jl(e.a,e.b,e.c,e.d,e.e,e.f))}function Jl(e,t,n,r){function o(u){return u.length?u.pop()+" ":""}function i(u,c,f,d,g,p){if(u!==f||c!==d){var x=g.push("translate(",null,t,null,n);p.push({i:x-4,x:jn(u,f)},{i:x-2,x:jn(c,d)})}else(f||d)&&g.push("translate("+f+t+d+n)}function s(u,c,f,d){u!==c?(u-c>180?c+=360:c-u>180&&(u+=360),d.push({i:f.push(o(f)+"rotate(",null,r)-2,x:jn(u,c)})):c&&f.push(o(f)+"rotate("+c+r)}function a(u,c,f,d){u!==c?d.push({i:f.push(o(f)+"skewX(",null,r)-2,x:jn(u,c)}):c&&f.push(o(f)+"skewX("+c+r)}function l(u,c,f,d,g,p){if(u!==f||c!==d){var x=g.push(o(g)+"scale(",null,",",null,")");p.push({i:x-4,x:jn(u,f)},{i:x-2,x:jn(c,d)})}else(f!==1||d!==1)&&g.push(o(g)+"scale("+f+","+d+")")}return function(u,c){var f=[],d=[];return u=e(u),c=e(c),i(u.translateX,u.translateY,c.translateX,c.translateY,f,d),s(u.rotate,c.rotate,f,d),a(u.skewX,c.skewX,f,d),l(u.scaleX,u.scaleY,c.scaleX,c.scaleY,f,d),u=c=null,function(g){for(var p=-1,x=d.length,C;++p<x;)f[(C=d[p]).i]=C.x(g);return f.join("")}}}var kh=Jl(bh,"px, ","px)","deg)"),$h=Jl(Ch,", ",")",")"),Eh=1e-12;function Ql(e){return((e=Math.exp(e))+1/e)/2}function Sh(e){return((e=Math.exp(e))-1/e)/2}function Ph(e){return((e=Math.exp(2*e))-1)/(e+1)}const Nh=function e(t,n,r){function o(i,s){var a=i[0],l=i[1],u=i[2],c=s[0],f=s[1],d=s[2],g=c-a,p=f-l,x=g*g+p*p,C,$;if(x<Eh)$=Math.log(d/u)/t,C=function(E){return[a+E*g,l+E*p,u*Math.exp(t*E*$)]};else{var m=Math.sqrt(x),_=(d*d-u*u+r*x)/(2*u*n*m),v=(d*d-u*u-r*x)/(2*d*n*m),b=Math.log(Math.sqrt(_*_+1)-_),N=Math.log(Math.sqrt(v*v+1)-v);$=(N-b)/t,C=function(E){var T=E*$,D=Ql(b),V=u/(n*m)*(D*Ph(t*T+b)-Sh(b));return[a+V*g,l+V*p,u*D/Ql(t*T+b)]}}return C.duration=$*1e3*t/Math.SQRT2,C}return o.rho=function(i){var s=Math.max(.001,+i),a=s*s,l=a*a;return e(s,a,l)},o}(Math.SQRT2,2,4);var Vr=0,vo=0,po=0,eu=1e3,wi,mo,_i=0,gr=0,xi=0,yo=typeof performance=="object"&&performance.now?performance:Date,tu=typeof window=="object"&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):function(e){setTimeout(e,17)};function zs(){return gr||(tu(Th),gr=yo.now()+xi)}function Th(){gr=0}function bi(){this._call=this._time=this._next=null}bi.prototype=nu.prototype={constructor:bi,restart:function(e,t,n){if(typeof e!="function")throw new TypeError("callback is not a function");n=(n==null?zs():+n)+(t==null?0:+t),!this._next&&mo!==this&&(mo?mo._next=this:wi=this,mo=this),this._call=e,this._time=n,Rs()},stop:function(){this._call&&(this._call=null,this._time=1/0,Rs())}};function nu(e,t,n){var r=new bi;return r.restart(e,t,n),r}function Mh(){zs(),++Vr;for(var e=wi,t;e;)(t=gr-e._time)>=0&&e._call.call(void 0,t),e=e._next;--Vr}function ru(){gr=(_i=yo.now())+xi,Vr=vo=0;try{Mh()}finally{Vr=0,Vh(),gr=0}}function Hh(){var e=yo.now(),t=e-_i;t>eu&&(xi-=t,_i=e)}function Vh(){for(var e,t=wi,n,r=1/0;t;)t._call?(r>t._time&&(r=t._time),e=t,t=t._next):(n=t._next,t._next=null,t=e?e._next=n:wi=n);mo=e,Rs(r)}function Rs(e){if(!Vr){vo&&(vo=clearTimeout(vo));var t=e-gr;t>24?(e<1/0&&(vo=setTimeout(ru,e-yo.now()-xi)),po&&(po=clearInterval(po))):(po||(_i=yo.now(),po=setInterval(Hh,eu)),Vr=1,tu(ru))}}function ou(e,t,n){var r=new bi;return t=t==null?0:+t,r.restart(o=>{r.stop(),e(o+t)},t,n),r}var Dh=ui("start","end","cancel","interrupt"),Ah=[],iu=0,su=1,Bs=2,Ci=3,au=4,Ys=5,ki=6;function $i(e,t,n,r,o,i){var s=e.__transition;if(!s)e.__transition={};else if(n in s)return;Lh(e,n,{name:t,index:r,group:o,on:Dh,tween:Ah,time:i.time,delay:i.delay,duration:i.duration,ease:i.ease,timer:null,state:iu})}function Zs(e,t){var n=an(e,t);if(n.state>iu)throw new Error("too late; already scheduled");return n}function xn(e,t){var n=an(e,t);if(n.state>Ci)throw new Error("too late; already running");return n}function an(e,t){var n=e.__transition;if(!n||!(n=n[t]))throw new Error("transition not found");return n}function Lh(e,t,n){var r=e.__transition,o;r[t]=n,n.timer=nu(i,0,n.time);function i(u){n.state=su,n.timer.restart(s,n.delay,n.time),n.delay<=u&&s(u-n.delay)}function s(u){var c,f,d,g;if(n.state!==su)return l();for(c in r)if(g=r[c],g.name===n.name){if(g.state===Ci)return ou(s);g.state===au?(g.state=ki,g.timer.stop(),g.on.call("interrupt",e,e.__data__,g.index,g.group),delete r[c]):+c<t&&(g.state=ki,g.timer.stop(),g.on.call("cancel",e,e.__data__,g.index,g.group),delete r[c])}if(ou(function(){n.state===Ci&&(n.state=au,n.timer.restart(a,n.delay,n.time),a(u))}),n.state=Bs,n.on.call("start",e,e.__data__,n.index,n.group),n.state===Bs){for(n.state=Ci,o=new Array(d=n.tween.length),c=0,f=-1;c<d;++c)(g=n.tween[c].value.call(e,e.__data__,n.index,n.group))&&(o[++f]=g);o.length=f+1}}function a(u){for(var c=u<n.duration?n.ease.call(null,u/n.duration):(n.timer.restart(l),n.state=Ys,1),f=-1,d=o.length;++f<d;)o[f].call(e,c);n.state===Ys&&(n.on.call("end",e,e.__data__,n.index,n.group),l())}function l(){n.state=ki,n.timer.stop(),delete r[t];for(var u in r)return;delete e.__transition}}function Ei(e,t){var n=e.__transition,r,o,i=!0,s;if(n){t=t==null?null:t+"";for(s in n){if((r=n[s]).name!==t){i=!1;continue}o=r.state>Bs&&r.state<Ys,r.state=ki,r.timer.stop(),r.on.call(o?"interrupt":"cancel",e,e.__data__,r.index,r.group),delete n[s]}i&&delete e.__transition}}function Oh(e){return this.each(function(){Ei(this,e)})}function Ih(e,t){var n,r;return function(){var o=xn(this,e),i=o.tween;if(i!==n){r=n=i;for(var s=0,a=r.length;s<a;++s)if(r[s].name===t){r=r.slice(),r.splice(s,1);break}}o.tween=r}}function zh(e,t,n){var r,o;if(typeof n!="function")throw new Error;return function(){var i=xn(this,e),s=i.tween;if(s!==r){o=(r=s).slice();for(var a={name:t,value:n},l=0,u=o.length;l<u;++l)if(o[l].name===t){o[l]=a;break}l===u&&o.push(a)}i.tween=o}}function Rh(e,t){var n=this._id;if(e+="",arguments.length<2){for(var r=an(this.node(),n).tween,o=0,i=r.length,s;o<i;++o)if((s=r[o]).name===e)return s.value;return null}return this.each((t==null?Ih:zh)(n,e,t))}function Xs(e,t,n){var r=e._id;return e.each(function(){var o=xn(this,r);(o.value||(o.value={}))[t]=n.apply(this,arguments)}),function(o){return an(o,r).value[t]}}function lu(e,t){var n;return(typeof t=="number"?jn:t instanceof ho?Gl:(n=ho(t))?(t=n,Gl):xh)(e,t)}function Bh(e){return function(){this.removeAttribute(e)}}function Yh(e){return function(){this.removeAttributeNS(e.space,e.local)}}function Zh(e,t,n){var r,o=n+"",i;return function(){var s=this.getAttribute(e);return s===o?null:s===r?i:i=t(r=s,n)}}function Xh(e,t,n){var r,o=n+"",i;return function(){var s=this.getAttributeNS(e.space,e.local);return s===o?null:s===r?i:i=t(r=s,n)}}function Fh(e,t,n){var r,o,i;return function(){var s,a=n(this),l;return a==null?void this.removeAttribute(e):(s=this.getAttribute(e),l=a+"",s===l?null:s===r&&l===o?i:(o=l,i=t(r=s,a)))}}function Wh(e,t,n){var r,o,i;return function(){var s,a=n(this),l;return a==null?void this.removeAttributeNS(e.space,e.local):(s=this.getAttributeNS(e.space,e.local),l=a+"",s===l?null:s===r&&l===o?i:(o=l,i=t(r=s,a)))}}function Kh(e,t){var n=di(e),r=n==="transform"?$h:lu;return this.attrTween(e,typeof t=="function"?(n.local?Wh:Fh)(n,r,Xs(this,"attr."+e,t)):t==null?(n.local?Yh:Bh)(n):(n.local?Xh:Zh)(n,r,t))}function qh(e,t){return function(n){this.setAttribute(e,t.call(this,n))}}function Gh(e,t){return function(n){this.setAttributeNS(e.space,e.local,t.call(this,n))}}function Uh(e,t){var n,r;function o(){var i=t.apply(this,arguments);return i!==r&&(n=(r=i)&&Gh(e,i)),n}return o._value=t,o}function jh(e,t){var n,r;function o(){var i=t.apply(this,arguments);return i!==r&&(n=(r=i)&&qh(e,i)),n}return o._value=t,o}function Jh(e,t){var n="attr."+e;if(arguments.length<2)return(n=this.tween(n))&&n._value;if(t==null)return this.tween(n,null);if(typeof t!="function")throw new Error;var r=di(e);return this.tween(n,(r.local?Uh:jh)(r,t))}function Qh(e,t){return function(){Zs(this,e).delay=+t.apply(this,arguments)}}function ev(e,t){return t=+t,function(){Zs(this,e).delay=t}}function tv(e){var t=this._id;return arguments.length?this.each((typeof e=="function"?Qh:ev)(t,e)):an(this.node(),t).delay}function nv(e,t){return function(){xn(this,e).duration=+t.apply(this,arguments)}}function rv(e,t){return t=+t,function(){xn(this,e).duration=t}}function ov(e){var t=this._id;return arguments.length?this.each((typeof e=="function"?nv:rv)(t,e)):an(this.node(),t).duration}function iv(e,t){if(typeof t!="function")throw new Error;return function(){xn(this,e).ease=t}}function sv(e){var t=this._id;return arguments.length?this.each(iv(t,e)):an(this.node(),t).ease}function av(e,t){return function(){var n=t.apply(this,arguments);if(typeof n!="function")throw new Error;xn(this,e).ease=n}}function lv(e){if(typeof e!="function")throw new Error;return this.each(av(this._id,e))}function uv(e){typeof e!="function"&&(e=$l(e));for(var t=this._groups,n=t.length,r=new Array(n),o=0;o<n;++o)for(var i=t[o],s=i.length,a=r[o]=[],l,u=0;u<s;++u)(l=i[u])&&e.call(l,l.__data__,u,i)&&a.push(l);return new Ln(r,this._parents,this._name,this._id)}function cv(e){if(e._id!==this._id)throw new Error;for(var t=this._groups,n=e._groups,r=t.length,o=n.length,i=Math.min(r,o),s=new Array(r),a=0;a<i;++a)for(var l=t[a],u=n[a],c=l.length,f=s[a]=new Array(c),d,g=0;g<c;++g)(d=l[g]||u[g])&&(f[g]=d);for(;a<r;++a)s[a]=t[a];return new Ln(s,this._parents,this._name,this._id)}function dv(e){return(e+"").trim().split(/^|\s+/).every(function(t){var n=t.indexOf(".");return n>=0&&(t=t.slice(0,n)),!t||t==="start"})}function fv(e,t,n){var r,o,i=dv(t)?Zs:xn;return function(){var s=i(this,e),a=s.on;a!==r&&(o=(r=a).copy()).on(t,n),s.on=o}}function gv(e,t){var n=this._id;return arguments.length<2?an(this.node(),n).on.on(e):this.each(fv(n,e,t))}function hv(e){return function(){var t=this.parentNode;for(var n in this.__transition)if(+n!==e)return;t&&t.removeChild(this)}}function vv(){return this.on("end.remove",hv(this._id))}function pv(e){var t=this._name,n=this._id;typeof e!="function"&&(e=Ns(e));for(var r=this._groups,o=r.length,i=new Array(o),s=0;s<o;++s)for(var a=r[s],l=a.length,u=i[s]=new Array(l),c,f,d=0;d<l;++d)(c=a[d])&&(f=e.call(c,c.__data__,d,a))&&("__data__"in c&&(f.__data__=c.__data__),u[d]=f,$i(u[d],t,n,d,u,an(c,n)));return new Ln(i,this._parents,t,n)}function mv(e){var t=this._name,n=this._id;typeof e!="function"&&(e=kl(e));for(var r=this._groups,o=r.length,i=[],s=[],a=0;a<o;++a)for(var l=r[a],u=l.length,c,f=0;f<u;++f)if(c=l[f]){for(var d=e.call(c,c.__data__,f,l),g,p=an(c,n),x=0,C=d.length;x<C;++x)(g=d[x])&&$i(g,t,n,x,d,p);i.push(d),s.push(c)}return new Ln(i,s,t,n)}var yv=lo.prototype.constructor;function wv(){return new yv(this._groups,this._parents)}function _v(e,t){var n,r,o;return function(){var i=Tr(this,e),s=(this.style.removeProperty(e),Tr(this,e));return i===s?null:i===n&&s===r?o:o=t(n=i,r=s)}}function uu(e){return function(){this.style.removeProperty(e)}}function xv(e,t,n){var r,o=n+"",i;return function(){var s=Tr(this,e);return s===o?null:s===r?i:i=t(r=s,n)}}function bv(e,t,n){var r,o,i;return function(){var s=Tr(this,e),a=n(this),l=a+"";return a==null&&(l=a=(this.style.removeProperty(e),Tr(this,e))),s===l?null:s===r&&l===o?i:(o=l,i=t(r=s,a))}}function Cv(e,t){var n,r,o,i="style."+t,s="end."+i,a;return function(){var l=xn(this,e),u=l.on,c=l.value[i]==null?a||(a=uu(t)):void 0;(u!==n||o!==c)&&(r=(n=u).copy()).on(s,o=c),l.on=r}}function kv(e,t,n){var r=(e+="")=="transform"?kh:lu;return t==null?this.styleTween(e,_v(e,r)).on("end.style."+e,uu(e)):typeof t=="function"?this.styleTween(e,bv(e,r,Xs(this,"style."+e,t))).each(Cv(this._id,e)):this.styleTween(e,xv(e,r,t),n).on("end.style."+e,null)}function $v(e,t,n){return function(r){this.style.setProperty(e,t.call(this,r),n)}}function Ev(e,t,n){var r,o;function i(){var s=t.apply(this,arguments);return s!==o&&(r=(o=s)&&$v(e,s,n)),r}return i._value=t,i}function Sv(e,t,n){var r="style."+(e+="");if(arguments.length<2)return(r=this.tween(r))&&r._value;if(t==null)return this.tween(r,null);if(typeof t!="function")throw new Error;return this.tween(r,Ev(e,t,n??""))}function Pv(e){return function(){this.textContent=e}}function Nv(e){return function(){var t=e(this);this.textContent=t??""}}function Tv(e){return this.tween("text",typeof e=="function"?Nv(Xs(this,"text",e)):Pv(e==null?"":e+""))}function Mv(e){return function(t){this.textContent=e.call(this,t)}}function Hv(e){var t,n;function r(){var o=e.apply(this,arguments);return o!==n&&(t=(n=o)&&Mv(o)),t}return r._value=e,r}function Vv(e){var t="text";if(arguments.length<1)return(t=this.tween(t))&&t._value;if(e==null)return this.tween(t,null);if(typeof e!="function")throw new Error;return this.tween(t,Hv(e))}function Dv(){for(var e=this._name,t=this._id,n=cu(),r=this._groups,o=r.length,i=0;i<o;++i)for(var s=r[i],a=s.length,l,u=0;u<a;++u)if(l=s[u]){var c=an(l,t);$i(l,e,n,u,s,{time:c.time+c.delay+c.duration,delay:0,duration:c.duration,ease:c.ease})}return new Ln(r,this._parents,e,n)}function Av(){var e,t,n=this,r=n._id,o=n.size();return new Promise(function(i,s){var a={value:s},l={value:function(){--o===0&&i()}};n.each(function(){var u=xn(this,r),c=u.on;c!==e&&(t=(e=c).copy(),t._.cancel.push(a),t._.interrupt.push(a),t._.end.push(l)),u.on=t}),o===0&&i()})}var Lv=0;function Ln(e,t,n,r){this._groups=e,this._parents=t,this._name=n,this._id=r}function cu(){return++Lv}var On=lo.prototype;Ln.prototype={constructor:Ln,select:pv,selectAll:mv,selectChild:On.selectChild,selectChildren:On.selectChildren,filter:uv,merge:cv,selection:wv,transition:Dv,call:On.call,nodes:On.nodes,node:On.node,size:On.size,empty:On.empty,each:On.each,on:gv,attr:Kh,attrTween:Jh,style:kv,styleTween:Sv,text:Tv,textTween:Vv,remove:vv,tween:Rh,delay:tv,duration:ov,ease:sv,easeVarying:lv,end:Av,[Symbol.iterator]:On[Symbol.iterator]};function Ov(e){return((e*=2)<=1?e*e*e:(e-=2)*e*e+2)/2}var Iv={time:null,delay:0,duration:250,ease:Ov};function zv(e,t){for(var n;!(n=e.__transition)||!(n=n[t]);)if(!(e=e.parentNode))throw new Error(`transition ${t} not found`);return n}function Rv(e){var t,n;e instanceof Ln?(t=e._id,e=e._name):(t=cu(),(n=Iv).time=zs(),e=e==null?null:e+"");for(var r=this._groups,o=r.length,i=0;i<o;++i)for(var s=r[i],a=s.length,l,u=0;u<a;++u)(l=s[u])&&$i(l,e,t,u,s,n||zv(l,t));return new Ln(r,this._parents,e,t)}lo.prototype.interrupt=Oh,lo.prototype.transition=Rv;const Si=e=>()=>e;function Bv(e,{sourceEvent:t,target:n,transform:r,dispatch:o}){Object.defineProperties(this,{type:{value:e,enumerable:!0,configurable:!0},sourceEvent:{value:t,enumerable:!0,configurable:!0},target:{value:n,enumerable:!0,configurable:!0},transform:{value:r,enumerable:!0,configurable:!0},_:{value:o}})}function In(e,t,n){this.k=e,this.x=t,this.y=n}In.prototype={constructor:In,scale:function(e){return e===1?this:new In(this.k*e,this.x,this.y)},translate:function(e,t){return e===0&t===0?this:new In(this.k,this.x+this.k*e,this.y+this.k*t)},apply:function(e){return[e[0]*this.k+this.x,e[1]*this.k+this.y]},applyX:function(e){return e*this.k+this.x},applyY:function(e){return e*this.k+this.y},invert:function(e){return[(e[0]-this.x)/this.k,(e[1]-this.y)/this.k]},invertX:function(e){return(e-this.x)/this.k},invertY:function(e){return(e-this.y)/this.k},rescaleX:function(e){return e.copy().domain(e.range().map(this.invertX,this).map(e.invert,e))},rescaleY:function(e){return e.copy().domain(e.range().map(this.invertY,this).map(e.invert,e))},toString:function(){return"translate("+this.x+","+this.y+") scale("+this.k+")"}};var Pi=new In(1,0,0);du.prototype=In.prototype;function du(e){for(;!e.__zoom;)if(!(e=e.parentNode))return Pi;return e.__zoom}function Fs(e){e.stopImmediatePropagation()}function wo(e){e.preventDefault(),e.stopImmediatePropagation()}function Yv(e){return(!e.ctrlKey||e.type==="wheel")&&!e.button}function Zv(){var e=this;return e instanceof SVGElement?(e=e.ownerSVGElement||e,e.hasAttribute("viewBox")?(e=e.viewBox.baseVal,[[e.x,e.y],[e.x+e.width,e.y+e.height]]):[[0,0],[e.width.baseVal.value,e.height.baseVal.value]]):[[0,0],[e.clientWidth,e.clientHeight]]}function fu(){return this.__zoom||Pi}function Xv(e){return-e.deltaY*(e.deltaMode===1?.05:e.deltaMode?1:.002)*(e.ctrlKey?10:1)}function Fv(){return navigator.maxTouchPoints||"ontouchstart"in this}function Wv(e,t,n){var r=e.invertX(t[0][0])-n[0][0],o=e.invertX(t[1][0])-n[1][0],i=e.invertY(t[0][1])-n[0][1],s=e.invertY(t[1][1])-n[1][1];return e.translate(o>r?(r+o)/2:Math.min(0,r)||Math.max(0,o),s>i?(i+s)/2:Math.min(0,i)||Math.max(0,s))}function gu(){var e=Yv,t=Zv,n=Wv,r=Xv,o=Fv,i=[0,1/0],s=[[-1/0,-1/0],[1/0,1/0]],a=250,l=Nh,u=ui("start","zoom","end"),c,f,d,g=500,p=150,x=0,C=10;function $(S){S.property("__zoom",fu).on("wheel.zoom",T,{passive:!1}).on("mousedown.zoom",D).on("dblclick.zoom",V).filter(o).on("touchstart.zoom",A).on("touchmove.zoom",O).on("touchend.zoom touchcancel.zoom",R).style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}$.transform=function(S,M,k,P){var H=S.selection?S.selection():S;H.property("__zoom",fu),S!==H?b(S,M,k,P):H.interrupt().each(function(){N(this,arguments).event(P).start().zoom(null,typeof M=="function"?M.apply(this,arguments):M).end()})},$.scaleBy=function(S,M,k,P){$.scaleTo(S,function(){var H=this.__zoom.k,I=typeof M=="function"?M.apply(this,arguments):M;return H*I},k,P)},$.scaleTo=function(S,M,k,P){$.transform(S,function(){var H=t.apply(this,arguments),I=this.__zoom,B=k==null?v(H):typeof k=="function"?k.apply(this,arguments):k,F=I.invert(B),K=typeof M=="function"?M.apply(this,arguments):M;return n(_(m(I,K),B,F),H,s)},k,P)},$.translateBy=function(S,M,k,P){$.transform(S,function(){return n(this.__zoom.translate(typeof M=="function"?M.apply(this,arguments):M,typeof k=="function"?k.apply(this,arguments):k),t.apply(this,arguments),s)},null,P)},$.translateTo=function(S,M,k,P,H){$.transform(S,function(){var I=t.apply(this,arguments),B=this.__zoom,F=P==null?v(I):typeof P=="function"?P.apply(this,arguments):P;return n(Pi.translate(F[0],F[1]).scale(B.k).translate(typeof M=="function"?-M.apply(this,arguments):-M,typeof k=="function"?-k.apply(this,arguments):-k),I,s)},P,H)};function m(S,M){return M=Math.max(i[0],Math.min(i[1],M)),M===S.k?S:new In(M,S.x,S.y)}function _(S,M,k){var P=M[0]-k[0]*S.k,H=M[1]-k[1]*S.k;return P===S.x&&H===S.y?S:new In(S.k,P,H)}function v(S){return[(+S[0][0]+ +S[1][0])/2,(+S[0][1]+ +S[1][1])/2]}function b(S,M,k,P){S.on("start.zoom",function(){N(this,arguments).event(P).start()}).on("interrupt.zoom end.zoom",function(){N(this,arguments).event(P).end()}).tween("zoom",function(){var H=this,I=arguments,B=N(H,I).event(P),F=t.apply(H,I),K=k==null?v(F):typeof k=="function"?k.apply(H,I):k,se=Math.max(F[1][0]-F[0][0],F[1][1]-F[0][1]),ee=H.__zoom,W=typeof M=="function"?M.apply(H,I):M,fe=l(ee.invert(K).concat(se/ee.k),W.invert(K).concat(se/W.k));return function(me){if(me===1)me=W;else{var Ce=fe(me),he=se/Ce[2];me=new In(he,K[0]-Ce[0]*he,K[1]-Ce[1]*he)}B.zoom(null,me)}})}function N(S,M,k){return!k&&S.__zooming||new E(S,M)}function E(S,M){this.that=S,this.args=M,this.active=0,this.sourceEvent=null,this.extent=t.apply(S,M),this.taps=0}E.prototype={event:function(S){return S&&(this.sourceEvent=S),this},start:function(){return++this.active===1&&(this.that.__zooming=this,this.emit("start")),this},zoom:function(S,M){return this.mouse&&S!=="mouse"&&(this.mouse[1]=M.invert(this.mouse[0])),this.touch0&&S!=="touch"&&(this.touch0[1]=M.invert(this.touch0[0])),this.touch1&&S!=="touch"&&(this.touch1[1]=M.invert(this.touch1[0])),this.that.__zoom=M,this.emit("zoom"),this},end:function(){return--this.active===0&&(delete this.that.__zooming,this.emit("end")),this},emit:function(S){var M=Ut(this.that).datum();u.call(S,this.that,new Bv(S,{sourceEvent:this.sourceEvent,target:$,transform:this.that.__zoom,dispatch:u}),M)}};function T(S,...M){if(!e.apply(this,arguments))return;var k=N(this,M).event(S),P=this.__zoom,H=Math.max(i[0],Math.min(i[1],P.k*Math.pow(2,r.apply(this,arguments)))),I=on(S);if(k.wheel)(k.mouse[0][0]!==I[0]||k.mouse[0][1]!==I[1])&&(k.mouse[1]=P.invert(k.mouse[0]=I)),clearTimeout(k.wheel);else{if(P.k===H)return;k.mouse=[I,P.invert(I)],Ei(this),k.start()}wo(S),k.wheel=setTimeout(B,p),k.zoom("mouse",n(_(m(P,H),k.mouse[0],k.mouse[1]),k.extent,s));function B(){k.wheel=null,k.end()}}function D(S,...M){if(d||!e.apply(this,arguments))return;var k=S.currentTarget,P=N(this,M,!0).event(S),H=Ut(S.view).on("mousemove.zoom",K,!0).on("mouseup.zoom",se,!0),I=on(S,k),B=S.clientX,F=S.clientY;Al(S.view),Fs(S),P.mouse=[I,this.__zoom.invert(I)],Ei(this),P.start();function K(ee){if(wo(ee),!P.moved){var W=ee.clientX-B,fe=ee.clientY-F;P.moved=W*W+fe*fe>x}P.event(ee).zoom("mouse",n(_(P.that.__zoom,P.mouse[0]=on(ee,k),P.mouse[1]),P.extent,s))}function se(ee){H.on("mousemove.zoom mouseup.zoom",null),Ll(ee.view,P.moved),wo(ee),P.event(ee).end()}}function V(S,...M){if(e.apply(this,arguments)){var k=this.__zoom,P=on(S.changedTouches?S.changedTouches[0]:S,this),H=k.invert(P),I=k.k*(S.shiftKey?.5:2),B=n(_(m(k,I),P,H),t.apply(this,M),s);wo(S),a>0?Ut(this).transition().duration(a).call(b,B,P,S):Ut(this).call($.transform,B,P,S)}}function A(S,...M){if(e.apply(this,arguments)){var k=S.touches,P=k.length,H=N(this,M,S.changedTouches.length===P).event(S),I,B,F,K;for(Fs(S),B=0;B<P;++B)F=k[B],K=on(F,this),K=[K,this.__zoom.invert(K),F.identifier],H.touch0?!H.touch1&&H.touch0[2]!==K[2]&&(H.touch1=K,H.taps=0):(H.touch0=K,I=!0,H.taps=1+!!c);c&&(c=clearTimeout(c)),I&&(H.taps<2&&(f=K[0],c=setTimeout(function(){c=null},g)),Ei(this),H.start())}}function O(S,...M){if(this.__zooming){var k=N(this,M).event(S),P=S.changedTouches,H=P.length,I,B,F,K;for(wo(S),I=0;I<H;++I)B=P[I],F=on(B,this),k.touch0&&k.touch0[2]===B.identifier?k.touch0[0]=F:k.touch1&&k.touch1[2]===B.identifier&&(k.touch1[0]=F);if(B=k.that.__zoom,k.touch1){var se=k.touch0[0],ee=k.touch0[1],W=k.touch1[0],fe=k.touch1[1],me=(me=W[0]-se[0])*me+(me=W[1]-se[1])*me,Ce=(Ce=fe[0]-ee[0])*Ce+(Ce=fe[1]-ee[1])*Ce;B=m(B,Math.sqrt(me/Ce)),F=[(se[0]+W[0])/2,(se[1]+W[1])/2],K=[(ee[0]+fe[0])/2,(ee[1]+fe[1])/2]}else if(k.touch0)F=k.touch0[0],K=k.touch0[1];else return;k.zoom("touch",n(_(B,F,K),k.extent,s))}}function R(S,...M){if(this.__zooming){var k=N(this,M).event(S),P=S.changedTouches,H=P.length,I,B;for(Fs(S),d&&clearTimeout(d),d=setTimeout(function(){d=null},g),I=0;I<H;++I)B=P[I],k.touch0&&k.touch0[2]===B.identifier?delete k.touch0:k.touch1&&k.touch1[2]===B.identifier&&delete k.touch1;if(k.touch1&&!k.touch0&&(k.touch0=k.touch1,delete k.touch1),k.touch0)k.touch0[1]=this.__zoom.invert(k.touch0[0]);else if(k.end(),k.taps===2&&(B=on(B,this),Math.hypot(f[0]-B[0],f[1]-B[1])<C)){var F=Ut(this).on("dblclick.zoom");F&&F.apply(this,arguments)}}}return $.wheelDelta=function(S){return arguments.length?(r=typeof S=="function"?S:Si(+S),$):r},$.filter=function(S){return arguments.length?(e=typeof S=="function"?S:Si(!!S),$):e},$.touchable=function(S){return arguments.length?(o=typeof S=="function"?S:Si(!!S),$):o},$.extent=function(S){return arguments.length?(t=typeof S=="function"?S:Si([[+S[0][0],+S[0][1]],[+S[1][0],+S[1][1]]]),$):t},$.scaleExtent=function(S){return arguments.length?(i[0]=+S[0],i[1]=+S[1],$):[i[0],i[1]]},$.translateExtent=function(S){return arguments.length?(s[0][0]=+S[0][0],s[1][0]=+S[1][0],s[0][1]=+S[0][1],s[1][1]=+S[1][1],$):[[s[0][0],s[0][1]],[s[1][0],s[1][1]]]},$.constrain=function(S){return arguments.length?(n=S,$):n},$.duration=function(S){return arguments.length?(a=+S,$):a},$.interpolate=function(S){return arguments.length?(l=S,$):l},$.on=function(){var S=u.on.apply(u,arguments);return S===u?$:S},$.clickDistance=function(S){return arguments.length?(x=(S=+S)*S,$):Math.sqrt(x)},$.tapDistance=function(S){return arguments.length?(C=+S,$):C},$}const Dr={error001:()=>"[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001",error002:()=>"It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.",error003:e=>`Node type "${e}" not found. Using fallback type "default".`,error004:()=>"The React Flow parent container needs a width and a height to render the graph.",error005:()=>"Only child nodes can use a parent extent.",error006:()=>"Can't create edge. An edge needs a source and a target.",error007:e=>`The old edge with id=${e} does not exist.`,error009:e=>`Marker type "${e}" doesn't exist.`,error008:(e,{id:t,sourceHandle:n,targetHandle:r})=>`Couldn't create edge for ${e} handle id: "${e==="source"?n:r}", edge id: ${t}.`,error010:()=>"Handle: No node id found. Make sure to only use a Handle inside a custom Node.",error011:e=>`Edge type "${e}" not found. Using fallback type "default".`,error012:e=>`Node with id "${e}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,error013:(e="react")=>`It seems that you haven't loaded the styles. Please import '@xyflow/${e}/dist/style.css' or base.css to make sure everything is working properly.`,error014:()=>"useNodeConnections: No node ID found. Call useNodeConnections inside a custom Node or provide a node ID.",error015:()=>"It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs."},Ni=[[Number.NEGATIVE_INFINITY,Number.NEGATIVE_INFINITY],[Number.POSITIVE_INFINITY,Number.POSITIVE_INFINITY]];var hr;(function(e){e.Strict="strict",e.Loose="loose"})(hr||(hr={}));var Jn;(function(e){e.Free="free",e.Vertical="vertical",e.Horizontal="horizontal"})(Jn||(Jn={}));var Ti;(function(e){e.Partial="partial",e.Full="full"})(Ti||(Ti={}));const Ws={inProgress:!1,isValid:null,from:null,fromHandle:null,fromPosition:null,fromNode:null,to:null,toHandle:null,toPosition:null,toNode:null};var Ar;(function(e){e.Bezier="default",e.Straight="straight",e.Step="step",e.SmoothStep="smoothstep",e.SimpleBezier="simplebezier"})(Ar||(Ar={}));var _o;(function(e){e.Arrow="arrow",e.ArrowClosed="arrowclosed"})(_o||(_o={}));var $e;(function(e){e.Left="left",e.Top="top",e.Right="right",e.Bottom="bottom"})($e||($e={}));const hu={[$e.Left]:$e.Right,[$e.Right]:$e.Left,[$e.Top]:$e.Bottom,[$e.Bottom]:$e.Top};function Kv(e,t){if(!e&&!t)return!0;if(!e||!t||e.size!==t.size)return!1;if(!e.size&&!t.size)return!0;for(const n of e.keys())if(!t.has(n))return!1;return!0}function vu(e,t,n){if(!n)return;const r=[];e.forEach((o,i)=>{t!=null&&t.has(i)||r.push(o)}),r.length&&n(r)}function qv(e){return e===null?null:e?"valid":"invalid"}const Gv=e=>"id"in e&&"source"in e&&"target"in e,Uv=e=>"id"in e&&"position"in e&&!("source"in e)&&!("target"in e),Ks=e=>"id"in e&&"internals"in e&&!("source"in e)&&!("target"in e),xo=(e,t=[0,0])=>{const{width:n,height:r}=Qn(e),o=e.origin??t,i=n*o[0],s=r*o[1];return{x:e.position.x-i,y:e.position.y-s}},jv=(e,t={nodeOrigin:[0,0],nodeLookup:void 0})=>{if(e.length===0)return{x:0,y:0,width:0,height:0};const n=e.reduce((r,o)=>{const i=typeof o=="string";let s=!t.nodeLookup&&!i?o:void 0;t.nodeLookup&&(s=i?t.nodeLookup.get(o):Ks(o)?o:t.nodeLookup.get(o.id));const a=s?Vi(s,t.nodeOrigin):{x:0,y:0,x2:0,y2:0};return Mi(r,a)},{x:1/0,y:1/0,x2:-1/0,y2:-1/0});return Hi(n)},bo=(e,t={})=>{if(e.size===0)return{x:0,y:0,width:0,height:0};let n={x:1/0,y:1/0,x2:-1/0,y2:-1/0};return e.forEach(r=>{if(t.filter===void 0||t.filter(r)){const o=Vi(r);n=Mi(n,o)}}),Hi(n)},pu=(e,t,[n,r,o]=[0,0,1],i=!1,s=!1)=>{const a={...ko(t,[n,r,o]),width:t.width/o,height:t.height/o},l=[];for(const u of e.values()){const{measured:c,selectable:f=!0,hidden:d=!1}=u;if(s&&!f||d)continue;const g=c.width??u.width??u.initialWidth??null,p=c.height??u.height??u.initialHeight??null,x=Co(a,Or(u)),C=(g??0)*(p??0),$=i&&x>0;(!u.internals.handleBounds||$||x>=C||u.dragging)&&l.push(u)}return l},qs=(e,t)=>{const n=new Set;return e.forEach(r=>{n.add(r.id)}),t.filter(r=>n.has(r.source)||n.has(r.target))};function mu(e,t){const n=new Map,r=t!=null&&t.nodes?new Set(t.nodes.map(o=>o.id)):null;return e.forEach(o=>{o.measured.width&&o.measured.height&&((t==null?void 0:t.includeHiddenNodes)||!o.hidden)&&(!r||r.has(o.id))&&n.set(o.id,o)}),n}async function yu({nodes:e,width:t,height:n,panZoom:r,minZoom:o,maxZoom:i},s){if(e.size===0)return Promise.resolve(!1);const a=bo(e),l=js(a,t,n,(s==null?void 0:s.minZoom)??o,(s==null?void 0:s.maxZoom)??i,(s==null?void 0:s.padding)??.1);return await r.setViewport(l,{duration:s==null?void 0:s.duration}),Promise.resolve(!0)}function Jv({nodeId:e,nextPosition:t,nodeLookup:n,nodeOrigin:r=[0,0],nodeExtent:o,onError:i}){const s=n.get(e),a=s.parentId?n.get(s.parentId):void 0,{x:l,y:u}=a?a.internals.positionAbsolute:{x:0,y:0},c=s.origin??r;let f=o;if(s.extent==="parent"&&!s.expandParent)if(!a)i==null||i("005",Dr.error005());else{const g=a.measured.width,p=a.measured.height;g&&p&&(f=[[l,u],[l+g,u+p]])}else a&&Ir(s.extent)&&(f=[[s.extent[0][0]+l,s.extent[0][1]+u],[s.extent[1][0]+l,s.extent[1][1]+u]]);const d=Ir(f)?vr(t,f,s.measured):t;return(s.measured.width===void 0||s.measured.height===void 0)&&(i==null||i("015",Dr.error015())),{position:{x:d.x-l+(s.measured.width??0)*c[0],y:d.y-u+(s.measured.height??0)*c[1]},positionAbsolute:d}}async function wu({nodesToRemove:e=[],edgesToRemove:t=[],nodes:n,edges:r,onBeforeDelete:o}){const i=new Set(e.map(d=>d.id)),s=[];for(const d of n){if(d.deletable===!1)continue;const g=i.has(d.id),p=!g&&d.parentId&&s.find(x=>x.id===d.parentId);(g||p)&&s.push(d)}const a=new Set(t.map(d=>d.id)),l=r.filter(d=>d.deletable!==!1),c=qs(s,l);for(const d of l)a.has(d.id)&&!c.find(p=>p.id===d.id)&&c.push(d);if(!o)return{edges:c,nodes:s};const f=await o({nodes:s,edges:c});return typeof f=="boolean"?f?{edges:c,nodes:s}:{edges:[],nodes:[]}:f}const Lr=(e,t=0,n=1)=>Math.min(Math.max(e,t),n),vr=(e={x:0,y:0},t,n)=>({x:Lr(e.x,t[0][0],t[1][0]-((n==null?void 0:n.width)??0)),y:Lr(e.y,t[0][1],t[1][1]-((n==null?void 0:n.height)??0))});function _u(e,t,n){const{width:r,height:o}=Qn(n),{x:i,y:s}=n.internals.positionAbsolute;return vr(e,[[i,s],[i+r,s+o]],t)}const xu=(e,t,n)=>e<t?Lr(Math.abs(e-t),1,t)/t:e>n?-Lr(Math.abs(e-n),1,t)/t:0,bu=(e,t,n=15,r=40)=>{const o=xu(e.x,r,t.width-r)*n,i=xu(e.y,r,t.height-r)*n;return[o,i]},Mi=(e,t)=>({x:Math.min(e.x,t.x),y:Math.min(e.y,t.y),x2:Math.max(e.x2,t.x2),y2:Math.max(e.y2,t.y2)}),Gs=({x:e,y:t,width:n,height:r})=>({x:e,y:t,x2:e+n,y2:t+r}),Hi=({x:e,y:t,x2:n,y2:r})=>({x:e,y:t,width:n-e,height:r-t}),Or=(e,t=[0,0])=>{var o,i;const{x:n,y:r}=Ks(e)?e.internals.positionAbsolute:xo(e,t);return{x:n,y:r,width:((o=e.measured)==null?void 0:o.width)??e.width??e.initialWidth??0,height:((i=e.measured)==null?void 0:i.height)??e.height??e.initialHeight??0}},Vi=(e,t=[0,0])=>{var o,i;const{x:n,y:r}=Ks(e)?e.internals.positionAbsolute:xo(e,t);return{x:n,y:r,x2:n+(((o=e.measured)==null?void 0:o.width)??e.width??e.initialWidth??0),y2:r+(((i=e.measured)==null?void 0:i.height)??e.height??e.initialHeight??0)}},Cu=(e,t)=>Hi(Mi(Gs(e),Gs(t))),Co=(e,t)=>{const n=Math.max(0,Math.min(e.x+e.width,t.x+t.width)-Math.max(e.x,t.x)),r=Math.max(0,Math.min(e.y+e.height,t.y+t.height)-Math.max(e.y,t.y));return Math.ceil(n*r)},ku=e=>zn(e.width)&&zn(e.height)&&zn(e.x)&&zn(e.y),zn=e=>!isNaN(e)&&isFinite(e),Qv=(e,t)=>{},Us=(e,t=[1,1])=>({x:t[0]*Math.round(e.x/t[0]),y:t[1]*Math.round(e.y/t[1])}),ko=({x:e,y:t},[n,r,o],i=!1,s=[1,1])=>{const a={x:(e-n)/o,y:(t-r)/o};return i?Us(a,s):a},$u=({x:e,y:t},[n,r,o])=>({x:e*o+n,y:t*o+r}),js=(e,t,n,r,o,i)=>{const s=t/(e.width*(1+i)),a=n/(e.height*(1+i)),l=Math.min(s,a),u=Lr(l,r,o),c=e.x+e.width/2,f=e.y+e.height/2,d=t/2-c*u,g=n/2-f*u;return{x:d,y:g,zoom:u}},Di=()=>{var e;return typeof navigator<"u"&&((e=navigator==null?void 0:navigator.userAgent)==null?void 0:e.indexOf("Mac"))>=0};function Ir(e){return e!==void 0&&e!=="parent"}function Qn(e){var t,n;return{width:((t=e.measured)==null?void 0:t.width)??e.width??e.initialWidth??0,height:((n=e.measured)==null?void 0:n.height)??e.height??e.initialHeight??0}}function Eu(e){var t,n;return(((t=e.measured)==null?void 0:t.width)??e.width??e.initialWidth)!==void 0&&(((n=e.measured)==null?void 0:n.height)??e.height??e.initialHeight)!==void 0}function e0(e,t={width:0,height:0},n,r,o){const i={...e},s=r.get(n);if(s){const a=s.origin||o;i.x+=s.internals.positionAbsolute.x-(t.width??0)*a[0],i.y+=s.internals.positionAbsolute.y-(t.height??0)*a[1]}return i}function Js(e,{snapGrid:t=[0,0],snapToGrid:n=!1,transform:r,containerBounds:o}){const{x:i,y:s}=Rn(e),a=ko({x:i-((o==null?void 0:o.left)??0),y:s-((o==null?void 0:o.top)??0)},r),{x:l,y:u}=n?Us(a,t):a;return{xSnapped:l,ySnapped:u,...a}}const Qs=e=>({width:e.offsetWidth,height:e.offsetHeight}),t0=e=>{var t;return((t=e==null?void 0:e.getRootNode)==null?void 0:t.call(e))||(window==null?void 0:window.document)},n0=["INPUT","SELECT","TEXTAREA"];function r0(e){var r,o;const t=((o=(r=e.composedPath)==null?void 0:r.call(e))==null?void 0:o[0])||e.target;return(t==null?void 0:t.nodeType)!==1?!1:n0.includes(t.nodeName)||t.hasAttribute("contenteditable")||!!t.closest(".nokey")}const Su=e=>"clientX"in e,Rn=(e,t)=>{var i,s;const n=Su(e),r=n?e.clientX:(i=e.touches)==null?void 0:i[0].clientX,o=n?e.clientY:(s=e.touches)==null?void 0:s[0].clientY;return{x:r-((t==null?void 0:t.left)??0),y:o-((t==null?void 0:t.top)??0)}},Pu=(e,t,n,r,o)=>{const i=t.querySelectorAll(`.${e}`);return!i||!i.length?null:Array.from(i).map(s=>{const a=s.getBoundingClientRect();return{id:s.getAttribute("data-handleid"),type:e,nodeId:o,position:s.getAttribute("data-handlepos"),x:(a.left-n.left)/r,y:(a.top-n.top)/r,...Qs(s)}})};function o0({sourceX:e,sourceY:t,targetX:n,targetY:r,sourceControlX:o,sourceControlY:i,targetControlX:s,targetControlY:a}){const l=e*.125+o*.375+s*.375+n*.125,u=t*.125+i*.375+a*.375+r*.125,c=Math.abs(l-e),f=Math.abs(u-t);return[l,u,c,f]}function Ai(e,t){return e>=0?.5*e:t*25*Math.sqrt(-e)}function Nu({pos:e,x1:t,y1:n,x2:r,y2:o,c:i}){switch(e){case $e.Left:return[t-Ai(t-r,i),n];case $e.Right:return[t+Ai(r-t,i),n];case $e.Top:return[t,n-Ai(n-o,i)];case $e.Bottom:return[t,n+Ai(o-n,i)]}}function Tu({sourceX:e,sourceY:t,sourcePosition:n=$e.Bottom,targetX:r,targetY:o,targetPosition:i=$e.Top,curvature:s=.25}){const[a,l]=Nu({pos:n,x1:e,y1:t,x2:r,y2:o,c:s}),[u,c]=Nu({pos:i,x1:r,y1:o,x2:e,y2:t,c:s}),[f,d,g,p]=o0({sourceX:e,sourceY:t,targetX:r,targetY:o,sourceControlX:a,sourceControlY:l,targetControlX:u,targetControlY:c});return[`M${e},${t} C${a},${l} ${u},${c} ${r},${o}`,f,d,g,p]}function Mu({sourceX:e,sourceY:t,targetX:n,targetY:r}){const o=Math.abs(n-e)/2,i=n<e?n+o:n-o,s=Math.abs(r-t)/2,a=r<t?r+s:r-s;return[i,a,o,s]}function i0({sourceNode:e,targetNode:t,selected:n=!1,zIndex:r=0,elevateOnSelect:o=!1}){if(!o)return r;const i=n||t.selected||e.selected,s=Math.max(e.internals.z||0,t.internals.z||0,1e3);return r+(i?s:0)}function s0({sourceNode:e,targetNode:t,width:n,height:r,transform:o}){const i=Mi(Vi(e),Vi(t));i.x===i.x2&&(i.x2+=1),i.y===i.y2&&(i.y2+=1);const s={x:-o[0]/o[2],y:-o[1]/o[2],width:n/o[2],height:r/o[2]};return Co(s,Hi(i))>0}const a0=({source:e,sourceHandle:t,target:n,targetHandle:r})=>`xy-edge__${e}${t||""}-${n}${r||""}`,l0=(e,t)=>t.some(n=>n.source===e.source&&n.target===e.target&&(n.sourceHandle===e.sourceHandle||!n.sourceHandle&&!e.sourceHandle)&&(n.targetHandle===e.targetHandle||!n.targetHandle&&!e.targetHandle)),u0=(e,t)=>{if(!e.source||!e.target)return t;let n;return Gv(e)?n={...e}:n={...e,id:a0(e)},l0(n,t)?t:(n.sourceHandle===null&&delete n.sourceHandle,n.targetHandle===null&&delete n.targetHandle,t.concat(n))};function ea({sourceX:e,sourceY:t,targetX:n,targetY:r}){const[o,i,s,a]=Mu({sourceX:e,sourceY:t,targetX:n,targetY:r});return[`M ${e},${t}L ${n},${r}`,o,i,s,a]}const Hu={[$e.Left]:{x:-1,y:0},[$e.Right]:{x:1,y:0},[$e.Top]:{x:0,y:-1},[$e.Bottom]:{x:0,y:1}},c0=({source:e,sourcePosition:t=$e.Bottom,target:n})=>t===$e.Left||t===$e.Right?e.x<n.x?{x:1,y:0}:{x:-1,y:0}:e.y<n.y?{x:0,y:1}:{x:0,y:-1},Vu=(e,t)=>Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2));function d0({source:e,sourcePosition:t=$e.Bottom,target:n,targetPosition:r=$e.Top,center:o,offset:i}){const s=Hu[t],a=Hu[r],l={x:e.x+s.x*i,y:e.y+s.y*i},u={x:n.x+a.x*i,y:n.y+a.y*i},c=c0({source:l,sourcePosition:t,target:u}),f=c.x!==0?"x":"y",d=c[f];let g=[],p,x;const C={x:0,y:0},$={x:0,y:0},[m,_,v,b]=Mu({sourceX:e.x,sourceY:e.y,targetX:n.x,targetY:n.y});if(s[f]*a[f]===-1){p=o.x??m,x=o.y??_;const E=[{x:p,y:l.y},{x:p,y:u.y}],T=[{x:l.x,y:x},{x:u.x,y:x}];s[f]===d?g=f==="x"?E:T:g=f==="x"?T:E}else{const E=[{x:l.x,y:u.y}],T=[{x:u.x,y:l.y}];if(f==="x"?g=s.x===d?T:E:g=s.y===d?E:T,t===r){const R=Math.abs(e[f]-n[f]);if(R<=i){const S=Math.min(i-1,i-R);s[f]===d?C[f]=(l[f]>e[f]?-1:1)*S:$[f]=(u[f]>n[f]?-1:1)*S}}if(t!==r){const R=f==="x"?"y":"x",S=s[f]===a[R],M=l[R]>u[R],k=l[R]<u[R];(s[f]===1&&(!S&&M||S&&k)||s[f]!==1&&(!S&&k||S&&M))&&(g=f==="x"?E:T)}const D={x:l.x+C.x,y:l.y+C.y},V={x:u.x+$.x,y:u.y+$.y},A=Math.max(Math.abs(D.x-g[0].x),Math.abs(V.x-g[0].x)),O=Math.max(Math.abs(D.y-g[0].y),Math.abs(V.y-g[0].y));A>=O?(p=(D.x+V.x)/2,x=g[0].y):(p=g[0].x,x=(D.y+V.y)/2)}return[[e,{x:l.x+C.x,y:l.y+C.y},...g,{x:u.x+$.x,y:u.y+$.y},n],p,x,v,b]}function f0(e,t,n,r){const o=Math.min(Vu(e,t)/2,Vu(t,n)/2,r),{x:i,y:s}=t;if(e.x===i&&i===n.x||e.y===s&&s===n.y)return`L${i} ${s}`;if(e.y===s){const u=e.x<n.x?-1:1,c=e.y<n.y?1:-1;return`L ${i+o*u},${s}Q ${i},${s} ${i},${s+o*c}`}const a=e.x<n.x?1:-1,l=e.y<n.y?-1:1;return`L ${i},${s+o*l}Q ${i},${s} ${i+o*a},${s}`}function Li({sourceX:e,sourceY:t,sourcePosition:n=$e.Bottom,targetX:r,targetY:o,targetPosition:i=$e.Top,borderRadius:s=5,centerX:a,centerY:l,offset:u=20}){const[c,f,d,g,p]=d0({source:{x:e,y:t},sourcePosition:n,target:{x:r,y:o},targetPosition:i,center:{x:a,y:l},offset:u});return[c.reduce((C,$,m)=>{let _="";return m>0&&m<c.length-1?_=f0(c[m-1],$,c[m+1],s):_=`${m===0?"M":"L"}${$.x} ${$.y}`,C+=_,C},""),f,d,g,p]}function Du(e){var t;return e&&!!(e.internals.handleBounds||(t=e.handles)!=null&&t.length)&&!!(e.measured.width||e.width||e.initialWidth)}function g0(e){var f;const{sourceNode:t,targetNode:n}=e;if(!Du(t)||!Du(n))return null;const r=t.internals.handleBounds||Au(t.handles),o=n.internals.handleBounds||Au(n.handles),i=Lu((r==null?void 0:r.source)??[],e.sourceHandle),s=Lu(e.connectionMode===hr.Strict?(o==null?void 0:o.target)??[]:((o==null?void 0:o.target)??[]).concat((o==null?void 0:o.source)??[]),e.targetHandle);if(!i||!s)return(f=e.onError)==null||f.call(e,"008",Dr.error008(i?"target":"source",{id:e.id,sourceHandle:e.sourceHandle,targetHandle:e.targetHandle})),null;const a=(i==null?void 0:i.position)||$e.Bottom,l=(s==null?void 0:s.position)||$e.Top,u=$o(t,i,a),c=$o(n,s,l);return{sourceX:u.x,sourceY:u.y,targetX:c.x,targetY:c.y,sourcePosition:a,targetPosition:l}}function Au(e){if(!e)return null;const t=[],n=[];for(const r of e)r.width=r.width??1,r.height=r.height??1,r.type==="source"?t.push(r):r.type==="target"&&n.push(r);return{source:t,target:n}}function $o(e,t,n=$e.Left,r=!1){const o=((t==null?void 0:t.x)??0)+e.internals.positionAbsolute.x,i=((t==null?void 0:t.y)??0)+e.internals.positionAbsolute.y,{width:s,height:a}=t??Qn(e);if(r)return{x:o+s/2,y:i+a/2};switch((t==null?void 0:t.position)??n){case $e.Top:return{x:o+s/2,y:i};case $e.Right:return{x:o+s,y:i+a/2};case $e.Bottom:return{x:o+s/2,y:i+a};case $e.Left:return{x:o,y:i+a/2}}}function Lu(e,t){return e&&(t?e.find(n=>n.id===t):e[0])||null}function ta(e,t){return e?typeof e=="string"?e:`${t?`${t}__`:""}${Object.keys(e).sort().map(r=>`${r}=${e[r]}`).join("&")}`:""}function h0(e,{id:t,defaultColor:n,defaultMarkerStart:r,defaultMarkerEnd:o}){const i=new Set;return e.reduce((s,a)=>([a.markerStart||r,a.markerEnd||o].forEach(l=>{if(l&&typeof l=="object"){const u=ta(l,t);i.has(u)||(s.push({id:u,color:l.color||n,...l}),i.add(u))}}),s),[]).sort((s,a)=>s.id.localeCompare(a.id))}function v0(e,t,n,r,o){let i=.5;o==="start"?i=0:o==="end"&&(i=1);let s=[(e.x+e.width*i)*t.zoom+t.x,e.y*t.zoom+t.y-r],a=[-100*i,-100];switch(n){case $e.Right:s=[(e.x+e.width)*t.zoom+t.x+r,(e.y+e.height*i)*t.zoom+t.y],a=[0,-100*i];break;case $e.Bottom:s[1]=(e.y+e.height)*t.zoom+t.y+r,a[1]=0;break;case $e.Left:s=[e.x*t.zoom+t.x-r,(e.y+e.height*i)*t.zoom+t.y],a=[-100,-100*i];break}return`translate(${s[0]}px, ${s[1]}px) translate(${a[0]}%, ${a[1]}%)`}const na={nodeOrigin:[0,0],nodeExtent:Ni,elevateNodesOnSelect:!0,defaults:{}},p0={...na,checkEquality:!0};function ra(e,t){const n={...e};for(const r in t)t[r]!==void 0&&(n[r]=t[r]);return n}function m0(e,t,n){const r=ra(na,n);for(const o of e.values())if(o.parentId)oa(o,e,t,r);else{const i=xo(o,r.nodeOrigin),s=Ir(o.extent)?o.extent:r.nodeExtent,a=vr(i,s,Qn(o));o.internals.positionAbsolute=a}}function Ou(e,t,n,r){var a,l;const o=ra(p0,r),i=new Map(t),s=o!=null&&o.elevateNodesOnSelect?1e3:0;t.clear(),n.clear();for(const u of e){let c=i.get(u.id);if(o.checkEquality&&u===(c==null?void 0:c.internals.userNode))t.set(u.id,c);else{const f=xo(u,o.nodeOrigin),d=Ir(u.extent)?u.extent:o.nodeExtent,g=vr(f,d,Qn(u));c={...o.defaults,...u,measured:{width:(a=u.measured)==null?void 0:a.width,height:(l=u.measured)==null?void 0:l.height},internals:{positionAbsolute:g,handleBounds:u.measured?c==null?void 0:c.internals.handleBounds:void 0,z:Iu(u,s),userNode:u}},t.set(u.id,c)}u.parentId&&oa(c,t,n,r)}}function y0(e,t){if(!e.parentId)return;const n=t.get(e.parentId);n?n.set(e.id,e):t.set(e.parentId,new Map([[e.id,e]]))}function oa(e,t,n,r){const{elevateNodesOnSelect:o,nodeOrigin:i,nodeExtent:s}=ra(na,r),a=e.parentId,l=t.get(a);if(!l){console.warn(`Parent node ${a} not found. Please make sure that parent nodes are in front of their child nodes in the nodes array.`);return}y0(e,n);const u=o?1e3:0,{x:c,y:f,z:d}=w0(e,l,i,s,u),{positionAbsolute:g}=e.internals,p=c!==g.x||f!==g.y;(p||d!==e.internals.z)&&t.set(e.id,{...e,internals:{...e.internals,positionAbsolute:p?{x:c,y:f}:g,z:d}})}function Iu(e,t){return(zn(e.zIndex)?e.zIndex:0)+(e.selected?t:0)}function w0(e,t,n,r,o){const{x:i,y:s}=t.internals.positionAbsolute,a=Qn(e),l=xo(e,n),u=Ir(e.extent)?vr(l,e.extent,a):l;let c=vr({x:i+u.x,y:s+u.y},r,a);e.extent==="parent"&&(c=_u(c,a,t));const f=Iu(e,o),d=t.internals.z??0;return{x:c.x,y:c.y,z:d>f?d:f}}function _0(e,t,n,r=[0,0]){var s;const o=[],i=new Map;for(const a of e){const l=t.get(a.parentId);if(!l)continue;const u=((s=i.get(a.parentId))==null?void 0:s.expandedRect)??Or(l),c=Cu(u,a.rect);i.set(a.parentId,{expandedRect:c,parent:l})}return i.size>0&&i.forEach(({expandedRect:a,parent:l},u)=>{var _;const c=l.internals.positionAbsolute,f=Qn(l),d=l.origin??r,g=a.x<c.x?Math.round(Math.abs(c.x-a.x)):0,p=a.y<c.y?Math.round(Math.abs(c.y-a.y)):0,x=Math.max(f.width,Math.round(a.width)),C=Math.max(f.height,Math.round(a.height)),$=(x-f.width)*d[0],m=(C-f.height)*d[1];(g>0||p>0||$||m)&&(o.push({id:u,type:"position",position:{x:l.position.x-g+$,y:l.position.y-p+m}}),(_=n.get(u))==null||_.forEach(v=>{e.some(b=>b.id===v.id)||o.push({id:v.id,type:"position",position:{x:v.position.x+g,y:v.position.y+p}})})),(f.width<a.width||f.height<a.height||g||p)&&o.push({id:u,type:"dimensions",setAttributes:!0,dimensions:{width:x+(g?d[0]*g-$:0),height:C+(p?d[1]*p-m:0)}})}),o}function x0(e,t,n,r,o,i){const s=r==null?void 0:r.querySelector(".xyflow__viewport");let a=!1;if(!s)return{changes:[],updatedInternals:a};const l=[],u=window.getComputedStyle(s),{m22:c}=new window.DOMMatrixReadOnly(u.transform),f=[];for(const d of e.values()){const g=t.get(d.id);if(!g)continue;if(g.hidden){t.set(g.id,{...g,internals:{...g.internals,handleBounds:void 0}}),a=!0;continue}const p=Qs(d.nodeElement),x=g.measured.width!==p.width||g.measured.height!==p.height;if(!!(p.width&&p.height&&(x||!g.internals.handleBounds||d.force))){const $=d.nodeElement.getBoundingClientRect(),m=Ir(g.extent)?g.extent:i;let{positionAbsolute:_}=g.internals;g.parentId&&g.extent==="parent"?_=_u(_,p,t.get(g.parentId)):m&&(_=vr(_,m,p));const v={...g,measured:p,internals:{...g.internals,positionAbsolute:_,handleBounds:{source:Pu("source",d.nodeElement,$,c,g.id),target:Pu("target",d.nodeElement,$,c,g.id)}}};t.set(g.id,v),g.parentId&&oa(v,t,n,{nodeOrigin:o}),a=!0,x&&(l.push({id:g.id,type:"dimensions",dimensions:p}),g.expandParent&&g.parentId&&f.push({id:g.id,parentId:g.parentId,rect:Or(v,o)}))}}if(f.length>0){const d=_0(f,t,n,o);l.push(...d)}return{changes:l,updatedInternals:a}}async function b0({delta:e,panZoom:t,transform:n,translateExtent:r,width:o,height:i}){if(!t||!e.x&&!e.y)return Promise.resolve(!1);const s=await t.setViewportConstrained({x:n[0]+e.x,y:n[1]+e.y,zoom:n[2]},[[0,0],[o,i]],r),a=!!s&&(s.x!==n[0]||s.y!==n[1]||s.k!==n[2]);return Promise.resolve(a)}function zu(e,t,n,r,o,i){let s=o;const a=r.get(s)||new Map;r.set(s,a.set(n,t)),s=`${o}-${e}`;const l=r.get(s)||new Map;if(r.set(s,l.set(n,t)),i){s=`${o}-${e}-${i}`;const u=r.get(s)||new Map;r.set(s,u.set(n,t))}}function Ru(e,t,n){e.clear(),t.clear();for(const r of n){const{source:o,target:i,sourceHandle:s=null,targetHandle:a=null}=r,l={edgeId:r.id,source:o,target:i,sourceHandle:s,targetHandle:a},u=`${o}-${s}--${i}-${a}`,c=`${i}-${a}--${o}-${s}`;zu("source",l,c,e,o,s),zu("target",l,u,e,i,a),t.set(r.id,r)}}function C0(e,t){if(e===null||t===null)return!1;const n=Array.isArray(e)?e:[e],r=Array.isArray(t)?t:[t];if(n.length!==r.length)return!1;for(let o=0;o<n.length;o++)if(n[o].id!==r[o].id||n[o].type!==r[o].type||!Object.is(n[o].data,r[o].data))return!1;return!0}function Bu(e,t){if(!e.parentId)return!1;const n=t.get(e.parentId);return n?n.selected?!0:Bu(n,t):!1}function Yu(e,t,n){var o;let r=e;do{if((o=r==null?void 0:r.matches)!=null&&o.call(r,t))return!0;if(r===n)return!1;r=r==null?void 0:r.parentElement}while(r);return!1}function k0(e,t,n,r){const o=new Map;for(const[i,s]of e)if((s.selected||s.id===r)&&(!s.parentId||!Bu(s,e))&&(s.draggable||t&&typeof s.draggable>"u")){const a=e.get(i);a&&o.set(i,{id:i,position:a.position||{x:0,y:0},distance:{x:n.x-a.internals.positionAbsolute.x,y:n.y-a.internals.positionAbsolute.y},extent:a.extent,parentId:a.parentId,origin:a.origin,expandParent:a.expandParent,internals:{positionAbsolute:a.internals.positionAbsolute||{x:0,y:0}},measured:{width:a.measured.width??0,height:a.measured.height??0}})}return o}function ia({nodeId:e,dragItems:t,nodeLookup:n,dragging:r=!0}){var s,a,l;const o=[];for(const[u,c]of t){const f=(s=n.get(u))==null?void 0:s.internals.userNode;f&&o.push({...f,position:c.position,dragging:r})}if(!e)return[o[0],o];const i=(a=n.get(e))==null?void 0:a.internals.userNode;return[i?{...i,position:((l=t.get(e))==null?void 0:l.position)||i.position,dragging:r}:o[0],o]}function $0({onNodeMouseDown:e,getStoreItems:t,onDragStart:n,onDrag:r,onDragStop:o}){let i={x:null,y:null},s=0,a=new Map,l=!1,u={x:0,y:0},c=null,f=!1,d=null,g=!1;function p({noDragClassName:C,handleSelector:$,domNode:m,isSelectable:_,nodeId:v,nodeClickDistance:b=0}){d=Ut(m);function N({x:V,y:A},O){const{nodeLookup:R,nodeExtent:S,snapGrid:M,snapToGrid:k,nodeOrigin:P,onNodeDrag:H,onSelectionDrag:I,onError:B,updateNodePositions:F}=t();i={x:V,y:A};let K=!1,se={x:0,y:0,x2:0,y2:0};if(a.size>1&&S){const ee=bo(a);se=Gs(ee)}for(const[ee,W]of a){if(!R.has(ee))continue;let fe={x:V-W.distance.x,y:A-W.distance.y};k&&(fe=Us(fe,M));let me=[[S[0][0],S[0][1]],[S[1][0],S[1][1]]];if(a.size>1&&S&&!W.extent){const{positionAbsolute:ze}=W.internals,G=ze.x-se.x+S[0][0],ae=ze.x+W.measured.width-se.x2+S[1][0],Me=ze.y-se.y+S[0][1],Le=ze.y+W.measured.height-se.y2+S[1][1];me=[[G,Me],[ae,Le]]}const{position:Ce,positionAbsolute:he}=Jv({nodeId:ee,nextPosition:fe,nodeLookup:R,nodeExtent:me,nodeOrigin:P,onError:B});K=K||W.position.x!==Ce.x||W.position.y!==Ce.y,W.position=Ce,W.internals.positionAbsolute=he}if(K&&(F(a,!0),O&&(r||H||!v&&I))){const[ee,W]=ia({nodeId:v,dragItems:a,nodeLookup:R});r==null||r(O,a,ee,W),H==null||H(O,ee,W),v||I==null||I(O,W)}}async function E(){if(!c)return;const{transform:V,panBy:A,autoPanSpeed:O,autoPanOnNodeDrag:R}=t();if(!R){l=!1,cancelAnimationFrame(s);return}const[S,M]=bu(u,c,O);(S!==0||M!==0)&&(i.x=(i.x??0)-S/V[2],i.y=(i.y??0)-M/V[2],await A({x:S,y:M})&&N(i,null)),s=requestAnimationFrame(E)}function T(V){var K;const{nodeLookup:A,multiSelectionActive:O,nodesDraggable:R,transform:S,snapGrid:M,snapToGrid:k,selectNodesOnDrag:P,onNodeDragStart:H,onSelectionDragStart:I,unselectNodesAndEdges:B}=t();f=!0,(!P||!_)&&!O&&v&&((K=A.get(v))!=null&&K.selected||B()),_&&P&&v&&(e==null||e(v));const F=Js(V.sourceEvent,{transform:S,snapGrid:M,snapToGrid:k,containerBounds:c});if(i=F,a=k0(A,R,F,v),a.size>0&&(n||H||!v&&I)){const[se,ee]=ia({nodeId:v,dragItems:a,nodeLookup:A});n==null||n(V.sourceEvent,a,se,ee),H==null||H(V.sourceEvent,se,ee),v||I==null||I(V.sourceEvent,ee)}}const D=rh().clickDistance(b).on("start",V=>{const{domNode:A,nodeDragThreshold:O,transform:R,snapGrid:S,snapToGrid:M}=t();c=(A==null?void 0:A.getBoundingClientRect())||null,g=!1,O===0&&T(V),i=Js(V.sourceEvent,{transform:R,snapGrid:S,snapToGrid:M,containerBounds:c}),u=Rn(V.sourceEvent,c)}).on("drag",V=>{const{autoPanOnNodeDrag:A,transform:O,snapGrid:R,snapToGrid:S,nodeDragThreshold:M,nodeLookup:k}=t(),P=Js(V.sourceEvent,{transform:O,snapGrid:R,snapToGrid:S,containerBounds:c});if((V.sourceEvent.type==="touchmove"&&V.sourceEvent.touches.length>1||v&&!k.has(v))&&(g=!0),!g){if(!l&&A&&f&&(l=!0,E()),!f){const H=P.xSnapped-(i.x??0),I=P.ySnapped-(i.y??0);Math.sqrt(H*H+I*I)>M&&T(V)}(i.x!==P.xSnapped||i.y!==P.ySnapped)&&a&&f&&(u=Rn(V.sourceEvent,c),N(P,V.sourceEvent))}}).on("end",V=>{if(!(!f||g)&&(l=!1,f=!1,cancelAnimationFrame(s),a.size>0)){const{nodeLookup:A,updateNodePositions:O,onNodeDragStop:R,onSelectionDragStop:S}=t();if(O(a,!1),o||R||!v&&S){const[M,k]=ia({nodeId:v,dragItems:a,nodeLookup:A,dragging:!1});o==null||o(V.sourceEvent,a,M,k),R==null||R(V.sourceEvent,M,k),v||S==null||S(V.sourceEvent,k)}}}).filter(V=>{const A=V.target;return!V.button&&(!C||!Yu(A,`.${C}`,m))&&(!$||Yu(A,$,m))});d.call(D)}function x(){d==null||d.on(".drag",null)}return{update:p,destroy:x}}function E0(e,t,n){const r=[],o={x:e.x-n,y:e.y-n,width:n*2,height:n*2};for(const i of t.values())Co(o,Or(i))>0&&r.push(i);return r}const S0=250;function P0(e,t,n,r){var a,l;let o=[],i=1/0;const s=E0(e,n,t+S0);for(const u of s){const c=[...((a=u.internals.handleBounds)==null?void 0:a.source)??[],...((l=u.internals.handleBounds)==null?void 0:l.target)??[]];for(const f of c){if(r.nodeId===f.nodeId&&r.type===f.type&&r.id===f.id)continue;const{x:d,y:g}=$o(u,f,f.position,!0),p=Math.sqrt(Math.pow(d-e.x,2)+Math.pow(g-e.y,2));p>t||(p<i?(o=[{...f,x:d,y:g}],i=p):p===i&&o.push({...f,x:d,y:g}))}}if(!o.length)return null;if(o.length>1){const u=r.type==="source"?"target":"source";return o.find(c=>c.type===u)??o[0]}return o[0]}function Zu(e,t,n,r,o,i=!1){var u,c,f;const s=r.get(e);if(!s)return null;const a=o==="strict"?(u=s.internals.handleBounds)==null?void 0:u[t]:[...((c=s.internals.handleBounds)==null?void 0:c.source)??[],...((f=s.internals.handleBounds)==null?void 0:f.target)??[]],l=(n?a==null?void 0:a.find(d=>d.id===n):a==null?void 0:a[0])??null;return l&&i?{...l,...$o(s,l,l.position,!0)}:l}function Xu(e,t){return e||(t!=null&&t.classList.contains("target")?"target":t!=null&&t.classList.contains("source")?"source":null)}function N0(e,t){let n=null;return t?n=!0:e&&!t&&(n=!1),n}const Fu=()=>!0;function T0(e,{connectionMode:t,connectionRadius:n,handleId:r,nodeId:o,edgeUpdaterType:i,isTarget:s,domNode:a,nodeLookup:l,lib:u,autoPanOnConnect:c,flowId:f,panBy:d,cancelConnection:g,onConnectStart:p,onConnect:x,onConnectEnd:C,isValidConnection:$=Fu,onReconnectEnd:m,updateConnection:_,getTransform:v,getFromHandle:b,autoPanSpeed:N}){const E=t0(e.target);let T=0,D;const{x:V,y:A}=Rn(e),O=E==null?void 0:E.elementFromPoint(V,A),R=Xu(i,O),S=a==null?void 0:a.getBoundingClientRect();if(!S||!R)return;const M=Zu(o,R,r,l,t);if(!M)return;let k=Rn(e,S),P=!1,H=null,I=!1,B=null;function F(){if(!c||!S)return;const[he,ze]=bu(k,S,N);d({x:he,y:ze}),T=requestAnimationFrame(F)}const K={...M,nodeId:o,type:R,position:M.position},se=l.get(o),W={inProgress:!0,isValid:null,from:$o(se,K,$e.Left,!0),fromHandle:K,fromPosition:K.position,fromNode:se,to:k,toHandle:null,toPosition:hu[K.position],toNode:null};_(W);let fe=W;p==null||p(e,{nodeId:o,handleId:r,handleType:R});function me(he){if(!b()||!K){Ce(he);return}const ze=v();k=Rn(he,S),D=P0(ko(k,ze,!1,[1,1]),n,l,K),P||(F(),P=!0);const G=Wu(he,{handle:D,connectionMode:t,fromNodeId:o,fromHandleId:r,fromType:s?"target":"source",isValidConnection:$,doc:E,lib:u,flowId:f,nodeLookup:l});B=G.handleDomNode,H=G.connection,I=N0(!!D,G.isValid);const ae={...fe,isValid:I,to:D&&I?$u({x:D.x,y:D.y},ze):k,toHandle:G.toHandle,toPosition:I&&G.toHandle?G.toHandle.position:hu[K.position],toNode:G.toHandle?l.get(G.toHandle.nodeId):null};I&&D&&fe.toHandle&&ae.toHandle&&fe.toHandle.type===ae.toHandle.type&&fe.toHandle.nodeId===ae.toHandle.nodeId&&fe.toHandle.id===ae.toHandle.id&&fe.to.x===ae.to.x&&fe.to.y===ae.to.y||(_(ae),fe=ae)}function Ce(he){(D||B)&&H&&I&&(x==null||x(H));const{inProgress:ze,...G}=fe,ae={...G,toPosition:fe.toHandle?fe.toPosition:null};C==null||C(he,ae),i&&(m==null||m(he,ae)),g(),cancelAnimationFrame(T),P=!1,I=!1,H=null,B=null,E.removeEventListener("mousemove",me),E.removeEventListener("mouseup",Ce),E.removeEventListener("touchmove",me),E.removeEventListener("touchend",Ce)}E.addEventListener("mousemove",me),E.addEventListener("mouseup",Ce),E.addEventListener("touchmove",me),E.addEventListener("touchend",Ce)}function Wu(e,{handle:t,connectionMode:n,fromNodeId:r,fromHandleId:o,fromType:i,doc:s,lib:a,flowId:l,isValidConnection:u=Fu,nodeLookup:c}){const f=i==="target",d=t?s.querySelector(`.${a}-flow__handle[data-id="${l}-${t==null?void 0:t.nodeId}-${t==null?void 0:t.id}-${t==null?void 0:t.type}"]`):null,{x:g,y:p}=Rn(e),x=s.elementFromPoint(g,p),C=x!=null&&x.classList.contains(`${a}-flow__handle`)?x:d,$={handleDomNode:C,isValid:!1,connection:null,toHandle:null};if(C){const m=Xu(void 0,C),_=C.getAttribute("data-nodeid"),v=C.getAttribute("data-handleid"),b=C.classList.contains("connectable"),N=C.classList.contains("connectableend");if(!_||!m)return $;const E={source:f?_:r,sourceHandle:f?v:o,target:f?r:_,targetHandle:f?o:v};$.connection=E;const D=b&&N&&(n===hr.Strict?f&&m==="source"||!f&&m==="target":_!==r||v!==o);$.isValid=D&&u(E),$.toHandle=Zu(_,m,v,c,n,!1)}return $}const M0={onPointerDown:T0,isValid:Wu};function H0({domNode:e,panZoom:t,getTransform:n,getViewScale:r}){const o=Ut(e);function i({translateExtent:a,width:l,height:u,zoomStep:c=10,pannable:f=!0,zoomable:d=!0,inversePan:g=!1}){const p=_=>{const v=n();if(_.sourceEvent.type!=="wheel"||!t)return;const b=-_.sourceEvent.deltaY*(_.sourceEvent.deltaMode===1?.05:_.sourceEvent.deltaMode?1:.002)*c,N=v[2]*Math.pow(2,b);t.scaleTo(N)};let x=[0,0];const C=_=>{(_.sourceEvent.type==="mousedown"||_.sourceEvent.type==="touchstart")&&(x=[_.sourceEvent.clientX??_.sourceEvent.touches[0].clientX,_.sourceEvent.clientY??_.sourceEvent.touches[0].clientY])},$=_=>{const v=n();if(_.sourceEvent.type!=="mousemove"&&_.sourceEvent.type!=="touchmove"||!t)return;const b=[_.sourceEvent.clientX??_.sourceEvent.touches[0].clientX,_.sourceEvent.clientY??_.sourceEvent.touches[0].clientY],N=[b[0]-x[0],b[1]-x[1]];x=b;const E=r()*Math.max(v[2],Math.log(v[2]))*(g?-1:1),T={x:v[0]-N[0]*E,y:v[1]-N[1]*E},D=[[0,0],[l,u]];t.setViewportConstrained({x:T.x,y:T.y,zoom:v[2]},D,a)},m=gu().on("start",C).on("zoom",f?$:null).on("zoom.wheel",d?p:null);o.call(m,{})}function s(){o.on("zoom",null)}return{update:i,destroy:s,pointer:on}}const V0=(e,t)=>e.x!==t.x||e.y!==t.y||e.zoom!==t.k,Oi=e=>({x:e.x,y:e.y,zoom:e.k}),sa=({x:e,y:t,zoom:n})=>Pi.translate(e,t).scale(n),zr=(e,t)=>e.target.closest(`.${t}`),Ku=(e,t)=>t===2&&Array.isArray(e)&&e.includes(2),aa=(e,t=0,n=()=>{})=>{const r=typeof t=="number"&&t>0;return r||n(),r?e.transition().duration(t).on("end",n):e},qu=e=>{const t=e.ctrlKey&&Di()?10:1;return-e.deltaY*(e.deltaMode===1?.05:e.deltaMode?1:.002)*t};function D0({zoomPanValues:e,noWheelClassName:t,d3Selection:n,d3Zoom:r,panOnScrollMode:o,panOnScrollSpeed:i,zoomOnPinch:s,onPanZoomStart:a,onPanZoom:l,onPanZoomEnd:u}){return c=>{if(zr(c,t))return!1;c.preventDefault(),c.stopImmediatePropagation();const f=n.property("__zoom").k||1;if(c.ctrlKey&&s){const C=on(c),$=qu(c),m=f*Math.pow(2,$);r.scaleTo(n,m,C,c);return}const d=c.deltaMode===1?20:1;let g=o===Jn.Vertical?0:c.deltaX*d,p=o===Jn.Horizontal?0:c.deltaY*d;!Di()&&c.shiftKey&&o!==Jn.Vertical&&(g=c.deltaY*d,p=0),r.translateBy(n,-(g/f)*i,-(p/f)*i,{internal:!0});const x=Oi(n.property("__zoom"));clearTimeout(e.panScrollTimeout),e.isPanScrolling||(e.isPanScrolling=!0,a==null||a(c,x)),e.isPanScrolling&&(l==null||l(c,x),e.panScrollTimeout=setTimeout(()=>{u==null||u(c,x),e.isPanScrolling=!1},150))}}function A0({noWheelClassName:e,preventScrolling:t,d3ZoomHandler:n}){return function(r,o){if(!t&&r.type==="wheel"&&!r.ctrlKey||zr(r,e))return null;r.preventDefault(),n.call(this,r,o)}}function L0({zoomPanValues:e,onDraggingChange:t,onPanZoomStart:n}){return r=>{var i,s,a;if((i=r.sourceEvent)!=null&&i.internal)return;const o=Oi(r.transform);e.mouseButton=((s=r.sourceEvent)==null?void 0:s.button)||0,e.isZoomingOrPanning=!0,e.prevViewport=o,((a=r.sourceEvent)==null?void 0:a.type)==="mousedown"&&t(!0),n&&(n==null||n(r.sourceEvent,o))}}function O0({zoomPanValues:e,panOnDrag:t,onPaneContextMenu:n,onTransformChange:r,onPanZoom:o}){return i=>{var s,a;e.usedRightMouseButton=!!(n&&Ku(t,e.mouseButton??0)),(s=i.sourceEvent)!=null&&s.sync||r([i.transform.x,i.transform.y,i.transform.k]),o&&!((a=i.sourceEvent)!=null&&a.internal)&&(o==null||o(i.sourceEvent,Oi(i.transform)))}}function I0({zoomPanValues:e,panOnDrag:t,panOnScroll:n,onDraggingChange:r,onPanZoomEnd:o,onPaneContextMenu:i}){return s=>{var a;if(!((a=s.sourceEvent)!=null&&a.internal)&&(e.isZoomingOrPanning=!1,i&&Ku(t,e.mouseButton??0)&&!e.usedRightMouseButton&&s.sourceEvent&&i(s.sourceEvent),e.usedRightMouseButton=!1,r(!1),o&&V0(e.prevViewport,s.transform))){const l=Oi(s.transform);e.prevViewport=l,clearTimeout(e.timerId),e.timerId=setTimeout(()=>{o==null||o(s.sourceEvent,l)},n?150:0)}}}function z0({zoomActivationKeyPressed:e,zoomOnScroll:t,zoomOnPinch:n,panOnDrag:r,panOnScroll:o,zoomOnDoubleClick:i,userSelectionActive:s,noWheelClassName:a,noPanClassName:l,lib:u}){return c=>{var p;const f=e||t,d=n&&c.ctrlKey;if(c.button===1&&c.type==="mousedown"&&(zr(c,`${u}-flow__node`)||zr(c,`${u}-flow__edge`)))return!0;if(!r&&!f&&!o&&!i&&!n||s||zr(c,a)&&c.type==="wheel"||zr(c,l)&&(c.type!=="wheel"||o&&c.type==="wheel"&&!e)||!n&&c.ctrlKey&&c.type==="wheel")return!1;if(!n&&c.type==="touchstart"&&((p=c.touches)==null?void 0:p.length)>1)return c.preventDefault(),!1;if(!f&&!o&&!d&&c.type==="wheel"||!r&&(c.type==="mousedown"||c.type==="touchstart")||Array.isArray(r)&&!r.includes(c.button)&&c.type==="mousedown")return!1;const g=Array.isArray(r)&&r.includes(c.button)||!c.button||c.button<=1;return(!c.ctrlKey||c.type==="wheel")&&g}}function R0({domNode:e,minZoom:t,maxZoom:n,paneClickDistance:r,translateExtent:o,viewport:i,onPanZoom:s,onPanZoomStart:a,onPanZoomEnd:l,onDraggingChange:u}){const c={isZoomingOrPanning:!1,usedRightMouseButton:!1,prevViewport:{x:0,y:0,zoom:0},mouseButton:0,timerId:void 0,panScrollTimeout:void 0,isPanScrolling:!1},f=e.getBoundingClientRect(),d=gu().clickDistance(!zn(r)||r<0?0:r).scaleExtent([t,n]).translateExtent(o),g=Ut(e).call(d);_({x:i.x,y:i.y,zoom:Lr(i.zoom,t,n)},[[0,0],[f.width,f.height]],o);const p=g.on("wheel.zoom"),x=g.on("dblclick.zoom");d.wheelDelta(qu);function C(O,R){return g?new Promise(S=>{d==null||d.transform(aa(g,R==null?void 0:R.duration,()=>S(!0)),O)}):Promise.resolve(!1)}function $({noWheelClassName:O,noPanClassName:R,onPaneContextMenu:S,userSelectionActive:M,panOnScroll:k,panOnDrag:P,panOnScrollMode:H,panOnScrollSpeed:I,preventScrolling:B,zoomOnPinch:F,zoomOnScroll:K,zoomOnDoubleClick:se,zoomActivationKeyPressed:ee,lib:W,onTransformChange:fe}){M&&!c.isZoomingOrPanning&&m();const Ce=k&&!ee&&!M?D0({zoomPanValues:c,noWheelClassName:O,d3Selection:g,d3Zoom:d,panOnScrollMode:H,panOnScrollSpeed:I,zoomOnPinch:F,onPanZoomStart:a,onPanZoom:s,onPanZoomEnd:l}):A0({noWheelClassName:O,preventScrolling:B,d3ZoomHandler:p});if(g.on("wheel.zoom",Ce,{passive:!1}),!M){const ze=L0({zoomPanValues:c,onDraggingChange:u,onPanZoomStart:a});d.on("start",ze);const G=O0({zoomPanValues:c,panOnDrag:P,onPaneContextMenu:!!S,onPanZoom:s,onTransformChange:fe});d.on("zoom",G);const ae=I0({zoomPanValues:c,panOnDrag:P,panOnScroll:k,onPaneContextMenu:S,onPanZoomEnd:l,onDraggingChange:u});d.on("end",ae)}const he=z0({zoomActivationKeyPressed:ee,panOnDrag:P,zoomOnScroll:K,panOnScroll:k,zoomOnDoubleClick:se,zoomOnPinch:F,userSelectionActive:M,noPanClassName:R,noWheelClassName:O,lib:W});d.filter(he),se?g.on("dblclick.zoom",x):g.on("dblclick.zoom",null)}function m(){d.on("zoom",null)}async function _(O,R,S){const M=sa(O),k=d==null?void 0:d.constrain()(M,R,S);return k&&await C(k),new Promise(P=>P(k))}async function v(O,R){const S=sa(O);return await C(S,R),new Promise(M=>M(S))}function b(O){if(g){const R=sa(O),S=g.property("__zoom");(S.k!==O.zoom||S.x!==O.x||S.y!==O.y)&&(d==null||d.transform(g,R,null,{sync:!0}))}}function N(){const O=g?du(g.node()):{x:0,y:0,k:1};return{x:O.x,y:O.y,zoom:O.k}}function E(O,R){return g?new Promise(S=>{d==null||d.scaleTo(aa(g,R==null?void 0:R.duration,()=>S(!0)),O)}):Promise.resolve(!1)}function T(O,R){return g?new Promise(S=>{d==null||d.scaleBy(aa(g,R==null?void 0:R.duration,()=>S(!0)),O)}):Promise.resolve(!1)}function D(O){d==null||d.scaleExtent(O)}function V(O){d==null||d.translateExtent(O)}function A(O){const R=!zn(O)||O<0?0:O;d==null||d.clickDistance(R)}return{update:$,destroy:m,setViewport:v,setViewportConstrained:_,getViewport:N,scaleTo:E,scaleBy:T,setScaleExtent:D,setTranslateExtent:V,syncViewport:b,setClickDistance:A}}var Gu;(function(e){e.Line="line",e.Handle="handle"})(Gu||(Gu={}));var B0=ne('<div role="button" tabindex="-1"><!></div>');function er(e,t){ue(t,!1);const[n,r]=nt(),o=()=>Q(se,"$connectable",n),i=()=>Q(Ce,"$connectionRadius",n),s=()=>Q(fe,"$domNode",n),a=()=>Q(me,"$nodeLookup",n),l=()=>Q(W,"$connectionMode",n),u=()=>Q(G,"$lib",n),c=()=>Q(Fe,"$autoPanOnConnect",n),f=()=>Q(Ie,"$flowId",n),d=()=>Q(ze,"$isValidConnectionStore",n),g=()=>Q(Me,"$onedgecreate",n),p=()=>Q(oe,"$onConnectAction",n),x=()=>Q(pe,"$onConnectStartAction",n),C=()=>Q(be,"$onConnectEndAction",n),$=()=>Q(he,"$viewport",n),m=()=>Q(ht,"$connection",n),_=()=>Q(Oe,"$edges",n),v=()=>Q(rt,"$connectionLookup",n),b=re(),N=re(),E=re(),T=re(),D=re(),V=re(),A=re(),O=re();let R=w(t,"id",12,void 0),S=w(t,"type",12,"source"),M=w(t,"position",28,()=>$e.Top),k=w(t,"style",12,void 0),P=w(t,"isValidConnection",12,void 0),H=w(t,"onconnect",12,void 0),I=w(t,"ondisconnect",12,void 0),B=w(t,"isConnectable",12,void 0),F=w(t,"class",12,void 0);const K=ur("svelteflow__node_id"),se=ur("svelteflow__node_connectable"),ee=Ue(),{connectionMode:W,domNode:fe,nodeLookup:me,connectionRadius:Ce,viewport:he,isValidConnection:ze,lib:G,addEdge:ae,onedgecreate:Me,panBy:Le,cancelConnection:Xe,updateConnection:te,autoPanOnConnect:Fe,edges:Oe,connectionLookup:rt,onconnect:oe,onconnectstart:pe,onconnectend:be,flowId:Ie,connection:ht}=ee;function dt(Te){const st=Su(Te);(st&&Te.button===0||!st)&&M0.onPointerDown(Te,{handleId:h(E),nodeId:K,isTarget:h(b),connectionRadius:i(),domNode:s(),nodeLookup:a(),connectionMode:l(),lib:u(),autoPanOnConnect:c(),flowId:f(),isValidConnection:P()??d(),updateConnection:te,cancelConnection:Xe,panBy:Le,onConnect:ye=>{var ct;const lt=g()?g()(ye):ye;lt&&(ae(lt),(ct=p())==null||ct(ye))},onConnectStart:(ye,lt)=>{var ct;(ct=x())==null||ct(ye,{nodeId:lt.nodeId,handleId:lt.handleId,handleType:lt.handleType})},onConnectEnd:(ye,lt)=>{var ct;(ct=C())==null||ct(ye,lt)},getTransform:()=>[$().x,$().y,$().zoom],getFromHandle:()=>m().fromHandle})}let J=re(null),Re=re();ge(()=>j(S()),()=>{U(b,S()==="target")}),ge(()=>(j(B()),o()),()=>{U(N,B()!==void 0?B():o())}),ge(()=>j(R()),()=>{U(E,R()||null)}),ge(()=>(j(H()),j(I()),_(),v(),j(S()),j(R())),()=>{(H()||I())&&(_(),U(Re,v().get(`${K}-${S()}${R()?`-${R()}`:""}`)))}),ge(()=>(h(J),h(Re),j(I()),j(H())),()=>{if(h(J)&&!Kv(h(Re),h(J))){const Te=h(Re)??new Map;vu(h(J),Te,I()),vu(Te,h(J),H())}U(J,h(Re)??new Map)}),ge(()=>m(),()=>{U(T,!!m().fromHandle)}),ge(()=>(m(),j(S()),h(E)),()=>{var Te,st,ye;U(D,((Te=m().fromHandle)==null?void 0:Te.nodeId)===K&&((st=m().fromHandle)==null?void 0:st.type)===S()&&((ye=m().fromHandle)==null?void 0:ye.id)===h(E))}),ge(()=>(m(),j(S()),h(E)),()=>{var Te,st,ye;U(V,((Te=m().toHandle)==null?void 0:Te.nodeId)===K&&((st=m().toHandle)==null?void 0:st.type)===S()&&((ye=m().toHandle)==null?void 0:ye.id)===h(E))}),ge(()=>(l(),m(),j(S()),h(E)),()=>{var Te,st,ye;U(A,l()===hr.Strict?((Te=m().fromHandle)==null?void 0:Te.type)!==S():K!==((st=m().fromHandle)==null?void 0:st.nodeId)||h(E)!==((ye=m().fromHandle)==null?void 0:ye.id))}),ge(()=>(h(V),m()),()=>{U(O,h(V)&&m().isValid)}),vt(),He();var le=B0();de(le,"data-nodeid",K);let $n;var fn=X(le);wt(fn,t,"default",{}),Z(le),Ee(Te=>{de(le,"data-handleid",h(E)),de(le,"data-handlepos",M()),de(le,"data-id",`${f()??""}-${K??""}-${R()||""}-${S()??""}`),$n=$t(le,1,wn(Te),null,$n,{valid:h(O),connectingto:h(V),connectingfrom:h(D),source:!h(b),target:h(b),connectablestart:h(N),connectableend:h(N),connectable:h(N),connectionindicator:h(N)&&(!h(T)||h(A))}),de(le,"style",k())},[()=>Et(["svelte-flow__handle",`svelte-flow__handle-${M()}`,"nodrag","nopan",M(),F()])],ve),Ze("mousedown",le,dt),Ze("touchstart",le,dt),L(e,le);var En=ce({get id(){return R()},set id(Te){R(Te),y()},get type(){return S()},set type(Te){S(Te),y()},get position(){return M()},set position(Te){M(Te),y()},get style(){return k()},set style(Te){k(Te),y()},get isValidConnection(){return P()},set isValidConnection(Te){P(Te),y()},get onconnect(){return H()},set onconnect(Te){H(Te),y()},get ondisconnect(){return I()},set ondisconnect(Te){I(Te),y()},get isConnectable(){return B()},set isConnectable(Te){B(Te),y()},get class(){return F()},set class(Te){F(Te),y()}});return r(),En}ie(er,{id:{},type:{},position:{},style:{},isValidConnection:{},onconnect:{},ondisconnect:{},isConnectable:{},class:{}},["default"],[],!0);var Y0=ne("<!> <!>",1);function Ii(e,t){const n=it(t,["children","$$slots","$$events","$$legacy","$$host"]);it(n,["data","targetPosition","sourcePosition"]),ue(t,!1);let r=w(t,"data",28,()=>({label:"Node"})),o=w(t,"targetPosition",12,void 0),i=w(t,"sourcePosition",12,void 0);He();var s=Y0(),a=xe(s);const l=ve(()=>o()??$e.Top);er(a,{type:"target",get position(){return h(l)}});var u=z(a),c=z(u);const f=ve(()=>i()??$e.Bottom);return er(c,{type:"source",get position(){return h(f)}}),Ee(()=>{var d;return Bt(u,` ${((d=r())==null?void 0:d.label)??""} `)}),L(e,s),ce({get data(){return r()},set data(d){r(d),y()},get targetPosition(){return o()},set targetPosition(d){o(d),y()},get sourcePosition(){return i()},set sourcePosition(d){i(d),y()}})}ie(Ii,{data:{},targetPosition:{},sourcePosition:{}},[],[],!0);var Z0=ne(" <!>",1);function Uu(e,t){const n=it(t,["children","$$slots","$$events","$$legacy","$$host"]);it(n,["data","sourcePosition"]),ue(t,!1);let r=w(t,"data",28,()=>({label:"Node"})),o=w(t,"sourcePosition",12,void 0);He(),Pe();var i=Z0(),s=xe(i),a=z(s);const l=ve(()=>o()??$e.Bottom);return er(a,{type:"source",get position(){return h(l)}}),Ee(()=>{var u;return Bt(s,`${((u=r())==null?void 0:u.label)??""} `)}),L(e,i),ce({get data(){return r()},set data(u){r(u),y()},get sourcePosition(){return o()},set sourcePosition(u){o(u),y()}})}ie(Uu,{data:{},sourcePosition:{}},[],[],!0);var X0=ne(" <!>",1);function ju(e,t){const n=it(t,["children","$$slots","$$events","$$legacy","$$host"]);it(n,["data","targetPosition"]),ue(t,!1);let r=w(t,"data",28,()=>({label:"Node"})),o=w(t,"targetPosition",12,void 0);He(),Pe();var i=X0(),s=xe(i),a=z(s);const l=ve(()=>o()??$e.Top);return er(a,{type:"target",get position(){return h(l)}}),Ee(()=>{var u;return Bt(s,`${((u=r())==null?void 0:u.label)??""} `)}),L(e,i),ce({get data(){return r()},set data(u){r(u),y()},get targetPosition(){return o()},set targetPosition(u){o(u),y()}})}ie(ju,{data:{},targetPosition:{}},[],[],!0);function Ju(e,t){const n=it(t,["children","$$slots","$$events","$$legacy","$$host"]);it(n,[])}ie(Ju,{},[],[],!0);function Qu(e,t,n){if(!t)return;const r=n?t.querySelector(n):t;r&&r.appendChild(e)}function Rr(e,{target:t,domNode:n}){return Qu(e,n,t),{async update({target:r,domNode:o}){Qu(e,o,r)},destroy(){e.parentNode&&e.parentNode.removeChild(e)}}}var F0=ne("<div><!></div>");function ec(e,t){ue(t,!1);const[n,r]=nt(),o=()=>Q(i,"$domNode",n),{domNode:i}=Ue();He();var s=F0(),a=X(s);wt(a,t,"default",{}),Z(s),_t(s,(l,u)=>Rr==null?void 0:Rr(l,u),()=>({target:".svelte-flow__edgelabel-renderer",domNode:o()})),L(e,s),ce(),r()}ie(ec,{},["default"],[],!0);function tc(){const{edgeLookup:e,selectionRect:t,selectionRectMode:n,multiselectionKeyPressed:r,addSelectedEdges:o,unselectNodesAndEdges:i,elementsSelectable:s}=Ue();return a=>{const l=q(e).get(a);if(!l){console.warn("012",Dr.error012(a));return}(l.selectable||q(s)&&typeof l.selectable>"u")&&(t.set(null),n.set(null),l.selected?l.selected&&q(r)&&i({nodes:[],edges:[l]}):o([a]))}}var W0=ne('<div class="svelte-flow__edge-label" role="button" tabindex="-1"><!></div>');function nc(e,t){ue(t,!1);let n=w(t,"style",12,void 0),r=w(t,"x",12,void 0),o=w(t,"y",12,void 0);const i=tc(),s=ur("svelteflow__edge_id");return He(),ec(e,{children:(a,l)=>{var u=W0(),c=X(u);wt(c,t,"default",{}),Z(u),Ee(()=>{de(u,"style","pointer-events: all;"+n()),at(u,"transform",`translate(-50%, -50%) translate(${r()??""}px,${o()??""}px)`)}),Ze("keyup",u,()=>{}),Ze("click",u,()=>{s&&i(s)}),L(a,u)},$$slots:{default:!0}}),ce({get style(){return n()},set style(a){n(a),y()},get x(){return r()},set x(a){r(a),y()},get y(){return o()},set y(a){o(a),y()}})}ie(nc,{style:{},x:{},y:{}},["default"],[],!0);var K0=_e('<path fill="none" class="svelte-flow__edge-interaction"></path>'),q0=_e('<path fill="none"></path><!><!>',1);function Eo(e,t){ue(t,!1);let n=w(t,"id",12,void 0),r=w(t,"path",12),o=w(t,"label",12,void 0),i=w(t,"labelX",12,void 0),s=w(t,"labelY",12,void 0),a=w(t,"labelStyle",12,void 0),l=w(t,"markerStart",12,void 0),u=w(t,"markerEnd",12,void 0),c=w(t,"style",12,void 0),f=w(t,"interactionWidth",12,20),d=w(t,"class",12,void 0),g=f()===void 0?20:f();He();var p=q0(),x=xe(p),C=z(x);{var $=v=>{var b=K0();de(b,"stroke-opacity",0),de(b,"stroke-width",g),Ee(()=>de(b,"d",r())),L(v,b)};ke(C,v=>{g&&v($)})}var m=z(C);{var _=v=>{nc(v,{get x(){return i()},get y(){return s()},get style(){return a()},children:(b,N)=>{Pe();var E=Ae();Ee(()=>Bt(E,o())),L(b,E)},$$slots:{default:!0}})};ke(m,v=>{o()&&v(_)})}return Ee(v=>{de(x,"id",n()),de(x,"d",r()),$t(x,0,wn(v)),de(x,"marker-start",l()),de(x,"marker-end",u()),de(x,"style",c())},[()=>Et(["svelte-flow__edge-path",d()])],ve),L(e,p),ce({get id(){return n()},set id(v){n(v),y()},get path(){return r()},set path(v){r(v),y()},get label(){return o()},set label(v){o(v),y()},get labelX(){return i()},set labelX(v){i(v),y()},get labelY(){return s()},set labelY(v){s(v),y()},get labelStyle(){return a()},set labelStyle(v){a(v),y()},get markerStart(){return l()},set markerStart(v){l(v),y()},get markerEnd(){return u()},set markerEnd(v){u(v),y()},get style(){return c()},set style(v){c(v),y()},get interactionWidth(){return f()},set interactionWidth(v){f(v),y()},get class(){return d()},set class(v){d(v),y()}})}ie(Eo,{id:{},path:{},label:{},labelX:{},labelY:{},labelStyle:{},markerStart:{},markerEnd:{},style:{},interactionWidth:{},class:{}},[],[],!0);function zi(e,t){const n=it(t,["children","$$slots","$$events","$$legacy","$$host"]);it(n,["label","labelStyle","style","markerStart","markerEnd","interactionWidth","sourceX","sourceY","sourcePosition","targetX","targetY","targetPosition"]),ue(t,!1);const r=re(),o=re(),i=re();let s=w(t,"label",12,void 0),a=w(t,"labelStyle",12,void 0),l=w(t,"style",12,void 0),u=w(t,"markerStart",12,void 0),c=w(t,"markerEnd",12,void 0),f=w(t,"interactionWidth",12,void 0),d=w(t,"sourceX",12),g=w(t,"sourceY",12),p=w(t,"sourcePosition",12),x=w(t,"targetX",12),C=w(t,"targetY",12),$=w(t,"targetPosition",12);return ge(()=>(h(r),h(o),h(i),j(d()),j(g()),j(x()),j(C()),j(p()),j($())),()=>{(m=>(U(r,m[0]),U(o,m[1]),U(i,m[2])))(Tu({sourceX:d(),sourceY:g(),targetX:x(),targetY:C(),sourcePosition:p(),targetPosition:$()}))}),vt(),He(),Eo(e,{get path(){return h(r)},get labelX(){return h(o)},get labelY(){return h(i)},get label(){return s()},get labelStyle(){return a()},get markerStart(){return u()},get markerEnd(){return c()},get interactionWidth(){return f()},get style(){return l()}}),ce({get label(){return s()},set label(m){s(m),y()},get labelStyle(){return a()},set labelStyle(m){a(m),y()},get style(){return l()},set style(m){l(m),y()},get markerStart(){return u()},set markerStart(m){u(m),y()},get markerEnd(){return c()},set markerEnd(m){c(m),y()},get interactionWidth(){return f()},set interactionWidth(m){f(m),y()},get sourceX(){return d()},set sourceX(m){d(m),y()},get sourceY(){return g()},set sourceY(m){g(m),y()},get sourcePosition(){return p()},set sourcePosition(m){p(m),y()},get targetX(){return x()},set targetX(m){x(m),y()},get targetY(){return C()},set targetY(m){C(m),y()},get targetPosition(){return $()},set targetPosition(m){$(m),y()}})}ie(zi,{label:{},labelStyle:{},style:{},markerStart:{},markerEnd:{},interactionWidth:{},sourceX:{},sourceY:{},sourcePosition:{},targetX:{},targetY:{},targetPosition:{}},[],[],!0);function rc(e,t){const n=it(t,["children","$$slots","$$events","$$legacy","$$host"]);it(n,["label","labelStyle","style","markerStart","markerEnd","interactionWidth","sourceX","sourceY","sourcePosition","targetX","targetY","targetPosition"]),ue(t,!1);const r=re(),o=re(),i=re();let s=w(t,"label",12,void 0),a=w(t,"labelStyle",12,void 0),l=w(t,"style",12,void 0),u=w(t,"markerStart",12,void 0),c=w(t,"markerEnd",12,void 0),f=w(t,"interactionWidth",12,void 0),d=w(t,"sourceX",12),g=w(t,"sourceY",12),p=w(t,"sourcePosition",12),x=w(t,"targetX",12),C=w(t,"targetY",12),$=w(t,"targetPosition",12);return ge(()=>(h(r),h(o),h(i),j(d()),j(g()),j(x()),j(C()),j(p()),j($())),()=>{(m=>(U(r,m[0]),U(o,m[1]),U(i,m[2])))(Li({sourceX:d(),sourceY:g(),targetX:x(),targetY:C(),sourcePosition:p(),targetPosition:$()}))}),vt(),He(),Eo(e,{get path(){return h(r)},get labelX(){return h(o)},get labelY(){return h(i)},get label(){return s()},get labelStyle(){return a()},get markerStart(){return u()},get markerEnd(){return c()},get interactionWidth(){return f()},get style(){return l()}}),ce({get label(){return s()},set label(m){s(m),y()},get labelStyle(){return a()},set labelStyle(m){a(m),y()},get style(){return l()},set style(m){l(m),y()},get markerStart(){return u()},set markerStart(m){u(m),y()},get markerEnd(){return c()},set markerEnd(m){c(m),y()},get interactionWidth(){return f()},set interactionWidth(m){f(m),y()},get sourceX(){return d()},set sourceX(m){d(m),y()},get sourceY(){return g()},set sourceY(m){g(m),y()},get sourcePosition(){return p()},set sourcePosition(m){p(m),y()},get targetX(){return x()},set targetX(m){x(m),y()},get targetY(){return C()},set targetY(m){C(m),y()},get targetPosition(){return $()},set targetPosition(m){$(m),y()}})}ie(rc,{label:{},labelStyle:{},style:{},markerStart:{},markerEnd:{},interactionWidth:{},sourceX:{},sourceY:{},sourcePosition:{},targetX:{},targetY:{},targetPosition:{}},[],[],!0);function oc(e,t){const n=it(t,["children","$$slots","$$events","$$legacy","$$host"]);it(n,["label","labelStyle","style","markerStart","markerEnd","interactionWidth","sourceX","sourceY","targetX","targetY"]),ue(t,!1);const r=re(),o=re(),i=re();let s=w(t,"label",12,void 0),a=w(t,"labelStyle",12,void 0),l=w(t,"style",12,void 0),u=w(t,"markerStart",12,void 0),c=w(t,"markerEnd",12,void 0),f=w(t,"interactionWidth",12,void 0),d=w(t,"sourceX",12),g=w(t,"sourceY",12),p=w(t,"targetX",12),x=w(t,"targetY",12);return ge(()=>(h(r),h(o),h(i),j(d()),j(g()),j(p()),j(x())),()=>{(C=>(U(r,C[0]),U(o,C[1]),U(i,C[2])))(ea({sourceX:d(),sourceY:g(),targetX:p(),targetY:x()}))}),vt(),He(),Eo(e,{get path(){return h(r)},get labelX(){return h(o)},get labelY(){return h(i)},get label(){return s()},get labelStyle(){return a()},get markerStart(){return u()},get markerEnd(){return c()},get interactionWidth(){return f()},get style(){return l()}}),ce({get label(){return s()},set label(C){s(C),y()},get labelStyle(){return a()},set labelStyle(C){a(C),y()},get style(){return l()},set style(C){l(C),y()},get markerStart(){return u()},set markerStart(C){u(C),y()},get markerEnd(){return c()},set markerEnd(C){c(C),y()},get interactionWidth(){return f()},set interactionWidth(C){f(C),y()},get sourceX(){return d()},set sourceX(C){d(C),y()},get sourceY(){return g()},set sourceY(C){g(C),y()},get targetX(){return p()},set targetX(C){p(C),y()},get targetY(){return x()},set targetY(C){x(C),y()}})}ie(oc,{label:{},labelStyle:{},style:{},markerStart:{},markerEnd:{},interactionWidth:{},sourceX:{},sourceY:{},targetX:{},targetY:{}},[],[],!0);function ic(e,t){const n=it(t,["children","$$slots","$$events","$$legacy","$$host"]);it(n,["label","labelStyle","style","markerStart","markerEnd","interactionWidth","sourceX","sourceY","sourcePosition","targetX","targetY","targetPosition"]),ue(t,!1);const r=re(),o=re(),i=re();let s=w(t,"label",12,void 0),a=w(t,"labelStyle",12,void 0),l=w(t,"style",12,void 0),u=w(t,"markerStart",12,void 0),c=w(t,"markerEnd",12,void 0),f=w(t,"interactionWidth",12,void 0),d=w(t,"sourceX",12),g=w(t,"sourceY",12),p=w(t,"sourcePosition",12),x=w(t,"targetX",12),C=w(t,"targetY",12),$=w(t,"targetPosition",12);return ge(()=>(h(r),h(o),h(i),j(d()),j(g()),j(x()),j(C()),j(p()),j($())),()=>{(m=>(U(r,m[0]),U(o,m[1]),U(i,m[2])))(Li({sourceX:d(),sourceY:g(),targetX:x(),targetY:C(),sourcePosition:p(),targetPosition:$(),borderRadius:0}))}),vt(),He(),Eo(e,{get path(){return h(r)},get labelX(){return h(o)},get labelY(){return h(i)},get label(){return s()},get labelStyle(){return a()},get markerStart(){return u()},get markerEnd(){return c()},get interactionWidth(){return f()},get style(){return l()}}),ce({get label(){return s()},set label(m){s(m),y()},get labelStyle(){return a()},set labelStyle(m){a(m),y()},get style(){return l()},set style(m){l(m),y()},get markerStart(){return u()},set markerStart(m){u(m),y()},get markerEnd(){return c()},set markerEnd(m){c(m),y()},get interactionWidth(){return f()},set interactionWidth(m){f(m),y()},get sourceX(){return d()},set sourceX(m){d(m),y()},get sourceY(){return g()},set sourceY(m){g(m),y()},get sourcePosition(){return p()},set sourcePosition(m){p(m),y()},get targetX(){return x()},set targetX(m){x(m),y()},get targetY(){return C()},set targetY(m){C(m),y()},get targetPosition(){return $()},set targetPosition(m){$(m),y()}})}ie(ic,{label:{},labelStyle:{},style:{},markerStart:{},markerEnd:{},interactionWidth:{},sourceX:{},sourceY:{},sourcePosition:{},targetX:{},targetY:{},targetPosition:{}},[],[],!0);function G0(e,t){const n=e.set,r=t.set,o=q(e),i=q(t);let a=o.length===0&&i.length>0?i:o;e.set(a);const l=u=>{const c=n(u);return a=c,r(a),c};e.set=t.set=l,e.update=t.update=u=>l(u(a))}function U0(e,t){const n=e.set,r=t.set;let o=q(t);e.set(o);const i=s=>{n(s),r(s),o=s};e.set=t.set=i,e.update=t.update=s=>i(s(o))}const j0=(e,t,n)=>{if(!n)return;const r=q(e),o=t.set,i=n.set;let s=n?q(n):{x:0,y:0,zoom:1};t.set(s),t.set=a=>(o(a),i(a),s=a,a),n.set=a=>(r==null||r.syncViewport(a),o(a),i(a),s=a,a),t.update=a=>{t.set(a(s))},n.update=a=>{n.set(a(s))}},J0=(e,t,n,r=[0,0],o=Ni)=>{const{subscribe:i,set:s,update:a}=we([]);let l=e,u={},c=!0;const f=x=>(Ou(x,t,n,{elevateNodesOnSelect:c,nodeOrigin:r,nodeExtent:o,defaults:u,checkEquality:!1}),l=x,s(l),l),d=x=>f(x(l)),g=x=>{u=x},p=x=>{c=x.elevateNodesOnSelect??c};return f(l),{subscribe:i,set:f,update:d,setDefaultOptions:g,setOptions:p}},Q0=(e,t,n,r)=>{const{subscribe:o,set:i,update:s}=we([]);let a=e,l={};const u=d=>{const g=l?d.map(p=>({...l,...p})):d;Ru(t,n,g),a=g,i(a)},c=d=>u(d(a)),f=d=>{l=d};return u(a),{subscribe:o,set:u,update:c,setDefaultOptions:f}},sc={input:Uu,output:ju,default:Ii,group:Ju},ac={straight:oc,smoothstep:rc,default:zi,step:ic},e2=({nodes:e=[],edges:t=[],width:n,height:r,fitView:o,nodeOrigin:i,nodeExtent:s})=>{const a=new Map,l=new Map,u=new Map,c=new Map,f=i??[0,0],d=s??Ni;Ou(e,a,l,{nodeExtent:d,nodeOrigin:f,elevateNodesOnSelect:!1,checkEquality:!1}),Ru(u,c,t);let g={x:0,y:0,zoom:1};if(o&&n&&r){const p=bo(a,{filter:x=>!!((x.width||x.initialWidth)&&(x.height||x.initialHeight))});g=js(p,n,r,.5,2,.1)}return{flowId:we(null),nodes:J0(e,a,l,f,d),nodeLookup:Gt(a),parentLookup:Gt(l),edgeLookup:Gt(c),visibleNodes:Gt([]),edges:Q0(t,u,c),visibleEdges:Gt([]),connectionLookup:Gt(u),height:we(500),width:we(500),minZoom:we(.5),maxZoom:we(2),nodeOrigin:we(f),nodeDragThreshold:we(1),nodeExtent:we(d),translateExtent:we(Ni),autoPanOnNodeDrag:we(!0),autoPanOnConnect:we(!0),fitViewOnInit:we(!1),fitViewOnInitDone:we(!1),fitViewOptions:we(void 0),panZoom:we(null),snapGrid:we(null),dragging:we(!1),selectionRect:we(null),selectionKeyPressed:we(!1),multiselectionKeyPressed:we(!1),deleteKeyPressed:we(!1),panActivationKeyPressed:we(!1),zoomActivationKeyPressed:we(!1),selectionRectMode:we(null),selectionMode:we(Ti.Partial),nodeTypes:we(sc),edgeTypes:we(ac),viewport:we(g),connectionMode:we(hr.Strict),domNode:we(null),connection:Gt(Ws),connectionLineType:we(Ar.Bezier),connectionRadius:we(20),isValidConnection:we(()=>!0),nodesDraggable:we(!0),nodesConnectable:we(!0),elementsSelectable:we(!0),selectNodesOnDrag:we(!0),markers:Gt([]),defaultMarkerColor:we("#b1b1b7"),lib:Gt("svelte"),onlyRenderVisibleElements:we(!1),onerror:we(Qv),ondelete:we(void 0),onedgecreate:we(void 0),onconnect:we(void 0),onconnectstart:we(void 0),onconnectend:we(void 0),onbeforedelete:we(void 0),nodesInitialized:we(!1),edgesInitialized:we(!1),viewportInitialized:we(!1),initialized:Gt(!1)}};function t2(e){const t=Un([e.edges,e.nodes,e.nodeLookup,e.onlyRenderVisibleElements,e.viewport,e.width,e.height],([n,,r,o,i,s,a])=>o&&s&&a?n.filter(u=>{const c=r.get(u.source),f=r.get(u.target);return c&&f&&s0({sourceNode:c,targetNode:f,width:s,height:a,transform:[i.x,i.y,i.zoom]})}):n);return Un([t,e.nodes,e.nodeLookup,e.connectionMode,e.onerror],([n,,r,o,i])=>n.reduce((a,l)=>{const u=r.get(l.source),c=r.get(l.target);if(!u||!c)return a;const f=g0({id:l.id,sourceNode:u,targetNode:c,sourceHandle:l.sourceHandle||null,targetHandle:l.targetHandle||null,connectionMode:o,onError:i});return f&&a.push({...l,zIndex:i0({selected:l.selected,zIndex:l.zIndex,sourceNode:u,targetNode:c,elevateOnSelect:!1}),...f}),a},[]))}function n2(e){return Un([e.nodeLookup,e.onlyRenderVisibleElements,e.width,e.height,e.viewport,e.nodes],([t,n,r,o,i])=>{const s=[i.x,i.y,i.zoom];return n?pu(t,{x:0,y:0,width:r,height:o},s,!0):Array.from(t.values())})}const Ri=Symbol();function lc({nodes:e,edges:t,width:n,height:r,fitView:o,nodeOrigin:i,nodeExtent:s}){const a=e2({nodes:e,edges:t,width:n,height:r,fitView:o,nodeOrigin:i,nodeExtent:s});function l(k){a.nodeTypes.set({...sc,...k})}function u(k){a.edgeTypes.set({...ac,...k})}function c(k){const P=q(a.edges);a.edges.set(u0(k,P))}const f=(k,P=!1)=>{var I;const H=q(a.nodeLookup);for(const[B,F]of k){const K=(I=H.get(B))==null?void 0:I.internals.userNode;K&&(K.position=F.position,K.dragging=P)}a.nodes.update(B=>B)};function d(k){var F,K,se;const P=q(a.nodeLookup),H=q(a.parentLookup),{changes:I,updatedInternals:B}=x0(k,P,q(a.parentLookup),q(a.domNode),q(a.nodeOrigin));if(B){if(m0(P,H,{nodeOrigin:i,nodeExtent:s}),!q(a.fitViewOnInitDone)&&q(a.fitViewOnInit)){const ee=q(a.fitViewOptions),W=p({...ee,nodes:ee==null?void 0:ee.nodes});a.fitViewOnInitDone.set(W)}for(const ee of I){const W=(F=P.get(ee.id))==null?void 0:F.internals.userNode;if(W)switch(ee.type){case"dimensions":{const fe={...W.measured,...ee.dimensions};ee.setAttributes&&(W.width=((K=ee.dimensions)==null?void 0:K.width)??W.width,W.height=((se=ee.dimensions)==null?void 0:se.height)??W.height),W.measured=fe;break}case"position":W.position=ee.position??W.position;break}}a.nodes.update(ee=>ee),q(a.nodesInitialized)||a.nodesInitialized.set(!0)}}function g(k){const P=q(a.panZoom),H=q(a.domNode);if(!P||!H)return Promise.resolve(!1);const{width:I,height:B}=Qs(H),F=mu(q(a.nodeLookup),k);return yu({nodes:F,width:I,height:B,minZoom:q(a.minZoom),maxZoom:q(a.maxZoom),panZoom:P},k)}function p(k){const P=q(a.panZoom);if(!P)return!1;const H=mu(q(a.nodeLookup),k);return yu({nodes:H,width:q(a.width),height:q(a.height),minZoom:q(a.minZoom),maxZoom:q(a.maxZoom),panZoom:P},k),H.size>0}function x(k,P){const H=q(a.panZoom);return H?H.scaleBy(k,P):Promise.resolve(!1)}function C(k){return x(1.2,k)}function $(k){return x(1/1.2,k)}function m(k){const P=q(a.panZoom);P&&(P.setScaleExtent([k,q(a.maxZoom)]),a.minZoom.set(k))}function _(k){const P=q(a.panZoom);P&&(P.setScaleExtent([q(a.minZoom),k]),a.maxZoom.set(k))}function v(k){const P=q(a.panZoom);P&&(P.setTranslateExtent(k),a.translateExtent.set(k))}function b(k){let P=!1;return k.forEach(H=>{H.selected&&(H.selected=!1,P=!0)}),P}function N(k){var P;(P=q(a.panZoom))==null||P.setClickDistance(k)}function E(k){b((k==null?void 0:k.nodes)||q(a.nodes))&&a.nodes.set(q(a.nodes)),b((k==null?void 0:k.edges)||q(a.edges))&&a.edges.set(q(a.edges))}a.deleteKeyPressed.subscribe(async k=>{var P;if(k){const H=q(a.nodes),I=q(a.edges),B=H.filter(ee=>ee.selected),F=I.filter(ee=>ee.selected),{nodes:K,edges:se}=await wu({nodesToRemove:B,edgesToRemove:F,nodes:H,edges:I,onBeforeDelete:q(a.onbeforedelete)});(K.length||se.length)&&(a.nodes.update(ee=>ee.filter(W=>!K.some(fe=>fe.id===W.id))),a.edges.update(ee=>ee.filter(W=>!se.some(fe=>fe.id===W.id))),(P=q(a.ondelete))==null||P({nodes:K,edges:se}))}});function T(k){const P=q(a.multiselectionKeyPressed);a.nodes.update(H=>H.map(I=>{const B=k.includes(I.id),F=P&&I.selected||B;return I.selected=F,I})),P||a.edges.update(H=>H.map(I=>(I.selected=!1,I)))}function D(k){const P=q(a.multiselectionKeyPressed);a.edges.update(H=>H.map(I=>{const B=k.includes(I.id),F=P&&I.selected||B;return I.selected=F,I})),P||a.nodes.update(H=>H.map(I=>(I.selected=!1,I)))}function V(k){var H;const P=(H=q(a.nodes))==null?void 0:H.find(I=>I.id===k);if(!P){console.warn("012",Dr.error012(k));return}a.selectionRect.set(null),a.selectionRectMode.set(null),P.selected?P.selected&&q(a.multiselectionKeyPressed)&&E({nodes:[P],edges:[]}):T([k])}function A(k){const P=q(a.viewport);return b0({delta:k,panZoom:q(a.panZoom),transform:[P.x,P.y,P.zoom],translateExtent:q(a.translateExtent),width:q(a.width),height:q(a.height)})}const O=we(Ws),R=k=>{O.set({...k})};function S(){O.set(Ws)}function M(){a.fitViewOnInitDone.set(!1),a.selectionRect.set(null),a.selectionRectMode.set(null),a.snapGrid.set(null),a.isValidConnection.set(()=>!0),E(),S()}return{...a,visibleEdges:t2(a),visibleNodes:n2(a),connection:Un([O,a.viewport],([k,P])=>k.inProgress?{...k,to:ko(k.to,[P.x,P.y,P.zoom])}:{...k}),markers:Un([a.edges,a.defaultMarkerColor,a.flowId],([k,P,H])=>h0(k,{defaultColor:P,id:H})),initialized:(()=>{let k=!1;const P=q(a.nodes).length,H=q(a.edges).length;return Un([a.nodesInitialized,a.edgesInitialized,a.viewportInitialized],([I,B,F])=>k||(P===0?k=F:H===0?k=F&&I:k=F&&I&&B,k))})(),syncNodeStores:k=>G0(a.nodes,k),syncEdgeStores:k=>U0(a.edges,k),syncViewport:k=>j0(a.panZoom,a.viewport,k),setNodeTypes:l,setEdgeTypes:u,addEdge:c,updateNodePositions:f,updateNodeInternals:d,zoomIn:C,zoomOut:$,fitView:k=>g(k),setMinZoom:m,setMaxZoom:_,setTranslateExtent:v,setPaneClickDistance:N,unselectNodesAndEdges:E,addSelectedNodes:T,addSelectedEdges:D,handleNodeSelection:V,panBy:A,updateConnection:R,cancelConnection:S,reset:M}}function Ue(){const e=ur(Ri);if(!e)throw new Error("In order to use useStore you need to wrap your component in a <SvelteFlowProvider />");return e.getStore()}function r2({nodes:e,edges:t,width:n,height:r,fitView:o,nodeOrigin:i,nodeExtent:s}){const a=lc({nodes:e,edges:t,width:n,height:r,fitView:o,nodeOrigin:i,nodeExtent:s});return Sr(Ri,{getStore:()=>a}),a}function la(e,t){const{panZoom:n,minZoom:r,maxZoom:o,initialViewport:i,viewport:s,dragging:a,translateExtent:l,paneClickDistance:u}=t,c=R0({domNode:e,minZoom:r,maxZoom:o,translateExtent:l,viewport:i,paneClickDistance:u,onDraggingChange:a.set}),f=c.getViewport();return s.set(f),n.set(c),c.update(t),{update(d){c.update(d)}}}var o2=ne('<div class="svelte-flow__zoom svelte-4xkw84"><!></div>');const i2={hash:"svelte-4xkw84",code:".svelte-flow__zoom.svelte-4xkw84 {width:100%;height:100%;position:absolute;top:0;left:0;z-index:4;}"};function uc(e,t){ue(t,!1),et(e,i2);const[n,r]=nt(),o=()=>Q(H,"$panActivationKeyPressed",n),i=()=>Q(R,"$minZoom",n),s=()=>Q(S,"$maxZoom",n),a=()=>Q(I,"$zoomActivationKeyPressed",n),l=()=>Q(O,"$selectionRect",n),u=()=>Q(k,"$translateExtent",n),c=()=>Q(P,"$lib",n),f=re(),d=re(),g=re();let p=w(t,"initialViewport",12,void 0),x=w(t,"onMoveStart",12,void 0),C=w(t,"onMove",12,void 0),$=w(t,"onMoveEnd",12,void 0),m=w(t,"panOnScrollMode",12),_=w(t,"preventScrolling",12),v=w(t,"zoomOnScroll",12),b=w(t,"zoomOnDoubleClick",12),N=w(t,"zoomOnPinch",12),E=w(t,"panOnDrag",12),T=w(t,"panOnScroll",12),D=w(t,"paneClickDistance",12);const{viewport:V,panZoom:A,selectionRect:O,minZoom:R,maxZoom:S,dragging:M,translateExtent:k,lib:P,panActivationKeyPressed:H,zoomActivationKeyPressed:I,viewportInitialized:B}=Ue(),F=W=>V.set({x:W[0],y:W[1],zoom:W[2]});rn(()=>{ai(B,!0)}),ge(()=>j(p()),()=>{U(f,p()||{x:0,y:0,zoom:1})}),ge(()=>(o(),j(E())),()=>{U(d,o()||E())}),ge(()=>(o(),j(T())),()=>{U(g,o()||T())}),vt(),He();var K=o2(),se=X(K);wt(se,t,"default",{}),Z(K),_t(K,(W,fe)=>la==null?void 0:la(W,fe),()=>({viewport:V,minZoom:i(),maxZoom:s(),initialViewport:h(f),dragging:M,panZoom:A,onPanZoomStart:x(),onPanZoom:C(),onPanZoomEnd:$(),zoomOnScroll:v(),zoomOnDoubleClick:b(),zoomOnPinch:N(),panOnScroll:h(g),panOnDrag:h(d),panOnScrollSpeed:.5,panOnScrollMode:m()||Jn.Free,zoomActivationKeyPressed:a(),preventScrolling:typeof _()=="boolean"?_():!0,noPanClassName:"nopan",noWheelClassName:"nowheel",userSelectionActive:!!l(),translateExtent:u(),lib:c(),paneClickDistance:D(),onTransformChange:F})),L(e,K);var ee=ce({get initialViewport(){return p()},set initialViewport(W){p(W),y()},get onMoveStart(){return x()},set onMoveStart(W){x(W),y()},get onMove(){return C()},set onMove(W){C(W),y()},get onMoveEnd(){return $()},set onMoveEnd(W){$(W),y()},get panOnScrollMode(){return m()},set panOnScrollMode(W){m(W),y()},get preventScrolling(){return _()},set preventScrolling(W){_(W),y()},get zoomOnScroll(){return v()},set zoomOnScroll(W){v(W),y()},get zoomOnDoubleClick(){return b()},set zoomOnDoubleClick(W){b(W),y()},get zoomOnPinch(){return N()},set zoomOnPinch(W){N(W),y()},get panOnDrag(){return E()},set panOnDrag(W){E(W),y()},get panOnScroll(){return T()},set panOnScroll(W){T(W),y()},get paneClickDistance(){return D()},set paneClickDistance(W){D(W),y()}});return r(),ee}ie(uc,{initialViewport:{},onMoveStart:{},onMove:{},onMoveEnd:{},panOnScrollMode:{},preventScrolling:{},zoomOnScroll:{},zoomOnDoubleClick:{},zoomOnPinch:{},panOnDrag:{},panOnScroll:{},paneClickDistance:{}},["default"],[],!0);function cc(e,t){return n=>{n.target===t&&(e==null||e(n))}}function dc(e){return t=>{const n=e.includes(t.id);return t.selected!==n&&(t.selected=n),t}}var s2=ne("<div><!></div>");const a2={hash:"svelte-1esy7hx",code:".svelte-flow__pane.svelte-1esy7hx {position:absolute;top:0;left:0;width:100%;height:100%;}"};function fc(e,t){ue(t,!1),et(e,a2);const[n,r]=nt(),o=()=>Q(S,"$panActivationKeyPressed",n),i=()=>Q(O,"$selectionKeyPressed",n),s=()=>Q(V,"$selectionRect",n),a=()=>Q(D,"$elementsSelectable",n),l=()=>Q(A,"$selectionRectMode",n),u=()=>Q(N,"$edges",n),c=()=>Q(b,"$nodeLookup",n),f=()=>Q(E,"$viewport",n),d=()=>Q(R,"$selectionMode",n),g=()=>Q(T,"$dragging",n),p=re(),x=re(),C=re();let $=w(t,"panOnDrag",12,void 0),m=w(t,"selectionOnDrag",12,void 0);const _=ii(),{nodes:v,nodeLookup:b,edges:N,viewport:E,dragging:T,elementsSelectable:D,selectionRect:V,selectionRectMode:A,selectionKeyPressed:O,selectionMode:R,panActivationKeyPressed:S,unselectNodesAndEdges:M}=Ue();let k=re(),P=null,H=[],I=!1;function B(G){if(I){I=!1;return}_("paneclick",{event:G}),M(),A.set(null)}function F(G){var Le,Xe;if(P=h(k).getBoundingClientRect(),!D||!h(x)||G.button!==0||G.target!==h(k)||!P)return;(Xe=(Le=G.target)==null?void 0:Le.setPointerCapture)==null||Xe.call(Le,G.pointerId);const{x:ae,y:Me}=Rn(G,P);M(),V.set({width:0,height:0,startX:ae,startY:Me,x:ae,y:Me})}function K(G){if(!h(x)||!P||!s())return;I=!0;const ae=Rn(G,P),Me=s().startX??0,Le=s().startY??0,Xe={...s(),x:ae.x<Me?ae.x:Me,y:ae.y<Le?ae.y:Le,width:Math.abs(ae.x-Me),height:Math.abs(ae.y-Le)},te=H.map(oe=>oe.id),Fe=qs(H,u()).map(oe=>oe.id);H=pu(c(),Xe,[f().x,f().y,f().zoom],d()===Ti.Partial,!0);const Oe=qs(H,u()).map(oe=>oe.id),rt=H.map(oe=>oe.id);(te.length!==rt.length||rt.some(oe=>!te.includes(oe)))&&v.update(oe=>oe.map(dc(rt))),(Fe.length!==Oe.length||Oe.some(oe=>!Fe.includes(oe)))&&N.update(oe=>oe.map(dc(Oe))),A.set("user"),V.set(Xe)}function se(G){var ae,Me;G.button===0&&((Me=(ae=G.target)==null?void 0:ae.releasePointerCapture)==null||Me.call(ae,G.pointerId),!h(x)&&l()==="user"&&G.target===h(k)&&(B==null||B(G)),V.set(null),H.length>0&&ai(A,"nodes"),i()&&(I=!1))}const ee=G=>{var ae;if(Array.isArray(h(p))&&((ae=h(p))!=null&&ae.includes(2))){G.preventDefault();return}_("panecontextmenu",{event:G})};ge(()=>(o(),j($())),()=>{U(p,o()||$())}),ge(()=>(i(),s(),j(m()),h(p)),()=>{U(x,i()||s()||m()&&h(p)!==!0)}),ge(()=>(a(),h(x),l()),()=>{U(C,a()&&(h(x)||l()==="user"))}),vt(),He();var W=s2(),fe=Ne(()=>h(C)?void 0:cc(B,h(k))),me=Ne(()=>cc(ee,h(k)));let Ce;var he=X(W);wt(he,t,"default",{}),Z(W),An(W,G=>U(k,G),()=>h(k)),Ee(G=>Ce=$t(W,1,"svelte-flow__pane svelte-1esy7hx",null,Ce,{draggable:G,dragging:g(),selection:h(x)}),[()=>$()===!0||Array.isArray($())&&$().includes(0)],ve),Ze("click",W,function(...G){var ae;(ae=h(fe))==null||ae.apply(this,G)}),Ze("pointerdown",W,function(...G){var ae;(ae=h(C)?F:void 0)==null||ae.apply(this,G)}),Ze("pointermove",W,function(...G){var ae;(ae=h(C)?K:void 0)==null||ae.apply(this,G)}),Ze("pointerup",W,function(...G){var ae;(ae=h(C)?se:void 0)==null||ae.apply(this,G)}),Ze("contextmenu",W,function(...G){var ae;(ae=h(me))==null||ae.apply(this,G)}),L(e,W);var ze=ce({get panOnDrag(){return $()},set panOnDrag(G){$(G),y()},get selectionOnDrag(){return m()},set selectionOnDrag(G){m(G),y()}});return r(),ze}ie(fc,{panOnDrag:{},selectionOnDrag:{}},["default"],[],!0);var l2=ne('<div class="svelte-flow__viewport xyflow__viewport svelte-1floaup"><!></div>');const u2={hash:"svelte-1floaup",code:".svelte-flow__viewport.svelte-1floaup {width:100%;height:100%;position:absolute;top:0;left:0;}"};function gc(e,t){ue(t,!1),et(e,u2);const[n,r]=nt(),o=()=>Q(i,"$viewport",n),{viewport:i}=Ue();He();var s=l2(),a=X(s);wt(a,t,"default",{}),Z(s),Ee(()=>de(s,"style",`transform: translate(${o().x??""}px, ${o().y??""}px) scale(${o().zoom??""})`)),L(e,s),ce(),r()}ie(gc,{},["default"],[],!0);function Br(e,t){const{store:n,onDrag:r,onDragStart:o,onDragStop:i,onNodeMouseDown:s}=t,a=$0({onDrag:r,onDragStart:o,onDragStop:i,onNodeMouseDown:s,getStoreItems:()=>{const u=q(n.snapGrid),c=q(n.viewport);return{nodes:q(n.nodes),nodeLookup:q(n.nodeLookup),edges:q(n.edges),nodeExtent:q(n.nodeExtent),snapGrid:u||[0,0],snapToGrid:!!u,nodeOrigin:q(n.nodeOrigin),multiSelectionActive:q(n.multiselectionKeyPressed),domNode:q(n.domNode),transform:[c.x,c.y,c.zoom],autoPanOnNodeDrag:q(n.autoPanOnNodeDrag),nodesDraggable:q(n.nodesDraggable),selectNodesOnDrag:q(n.selectNodesOnDrag),nodeDragThreshold:q(n.nodeDragThreshold),unselectNodesAndEdges:n.unselectNodesAndEdges,updateNodePositions:n.updateNodePositions,panBy:n.panBy}}});function l(u,c){if(c.disabled){a.destroy();return}a.update({domNode:u,noDragClassName:c.noDragClass,handleSelector:c.handleSelector,nodeId:c.nodeId,isSelectable:c.isSelectable,nodeClickDistance:c.nodeClickDistance})}return l(e,t),{update(u){l(e,u)},destroy(){a.destroy()}}}function c2({width:e,height:t,initialWidth:n,initialHeight:r,measuredWidth:o,measuredHeight:i}){if(o===void 0&&i===void 0){const s=e??n,a=t??r;return{width:s?`width:${s}px;`:"",height:a?`height:${a}px;`:""}}return{width:e?`width:${e}px;`:"",height:t?`height:${t}px;`:""}}var d2=ne("<div><!></div>");function hc(e,t){ue(t,!1);const[n,r]=nt(),o=()=>Q(me,"$nodeTypes",n),i=()=>Q(ae,"$elementsSelectable",n),s=()=>Q(Me,"$nodesDraggable",n),a=()=>Q(Fe,"$connectableStore",n),l=re(void 0,!0),u=re(void 0,!0),c=re(void 0,!0),f=re(void 0,!0);let d=w(t,"node",13),g=w(t,"id",13),p=w(t,"data",29,()=>({})),x=w(t,"selected",13,!1),C=w(t,"draggable",13,void 0),$=w(t,"selectable",13,void 0),m=w(t,"connectable",13,!0),_=w(t,"deletable",13,!0),v=w(t,"hidden",13,!1),b=w(t,"dragging",13,!1),N=w(t,"resizeObserver",13,null),E=w(t,"style",13,void 0),T=w(t,"type",13,"default"),D=w(t,"isParent",13,!1),V=w(t,"positionX",13),A=w(t,"positionY",13),O=w(t,"sourcePosition",13,void 0),R=w(t,"targetPosition",13,void 0),S=w(t,"zIndex",13),M=w(t,"measuredWidth",13,void 0),k=w(t,"measuredHeight",13,void 0),P=w(t,"initialWidth",13,void 0),H=w(t,"initialHeight",13,void 0),I=w(t,"width",13,void 0),B=w(t,"height",13,void 0),F=w(t,"dragHandle",13,void 0),K=w(t,"initialized",13,!1),se=w(t,"parentId",13,void 0),ee=w(t,"nodeClickDistance",13,void 0),W=w(t,"class",13,"");const fe=Ue(),{nodeTypes:me,nodeDragThreshold:Ce,selectNodesOnDrag:he,handleNodeSelection:ze,updateNodeInternals:G,elementsSelectable:ae,nodesDraggable:Me}=fe;let Le=re(void 0,!0),Xe=re(null,!0);const te=ii(),Fe=we(m());let Oe=re(void 0,!0),rt=re(void 0,!0),oe=re(void 0,!0);Sr("svelteflow__node_id",g()),Sr("svelteflow__node_connectable",Fe),$s(()=>{var J;h(Xe)&&((J=N())==null||J.unobserve(h(Xe)))});function pe(J){$()&&(!q(he)||!C()||q(Ce)>0)&&ze(g()),te("nodeclick",{node:d().internals.userNode,event:J})}ge(()=>j(T()),()=>{U(l,T()||"default")}),ge(()=>(o(),h(l)),()=>{U(u,!!o()[h(l)])}),ge(()=>(o(),h(l),Ii),()=>{U(c,o()[h(l)]||Ii)}),ge(()=>(h(u),j(T())),()=>{h(u)||console.warn("003",Dr.error003(T()))}),ge(()=>(j(I()),j(B()),j(P()),j(H()),j(M()),j(k())),()=>{U(f,c2({width:I(),height:B(),initialWidth:P(),initialHeight:H(),measuredWidth:M(),measuredHeight:k()}))}),ge(()=>j(m()),()=>{Fe.set(!!m())}),ge(()=>(h(Oe),h(l),h(rt),j(O()),h(oe),j(R()),j(g()),h(Le)),()=>{(h(Oe)&&h(l)!==h(Oe)||h(rt)&&O()!==h(rt)||h(oe)&&R()!==h(oe))&&requestAnimationFrame(()=>G(new Map([[g(),{id:g(),nodeElement:h(Le),force:!0}]]))),U(Oe,h(l)),U(rt,O()),U(oe,R())}),ge(()=>(j(N()),h(Le),h(Xe),j(K())),()=>{N()&&(h(Le)!==h(Xe)||!K())&&(h(Xe)&&N().unobserve(h(Xe)),h(Le)&&N().observe(h(Le)),U(Xe,h(Le)))}),vt(),He(!0);var be=tt(),Ie=xe(be);{var ht=J=>{var Re=d2();let le;var $n=X(Re);const fn=ve(()=>x()??!1),En=ve(()=>$()??i()??!0),Te=ve(()=>_()??!0),st=ve(()=>C()??s()??!0);fl($n,()=>h(c),(ye,lt)=>{lt(ye,{get data(){return p()},get id(){return g()},get selected(){return h(fn)},get selectable(){return h(En)},get deletable(){return h(Te)},get sourcePosition(){return O()},get targetPosition(){return R()},get zIndex(){return S()},get dragging(){return b()},get draggable(){return h(st)},get dragHandle(){return F()},get parentId(){return se()},get type(){return h(l)},get isConnectable(){return a()},get positionAbsoluteX(){return V()},get positionAbsoluteY(){return A()},get width(){return I()},get height(){return B()}})}),Z(Re),_t(Re,(ye,lt)=>Br==null?void 0:Br(ye,lt),()=>({nodeId:g(),isSelectable:$(),disabled:!1,handleSelector:F(),noDragClass:"nodrag",nodeClickDistance:ee(),onNodeMouseDown:ze,onDrag:(ye,lt,ct,Jt)=>{te("nodedrag",{event:ye,targetNode:ct,nodes:Jt})},onDragStart:(ye,lt,ct,Jt)=>{te("nodedragstart",{event:ye,targetNode:ct,nodes:Jt})},onDragStop:(ye,lt,ct,Jt)=>{te("nodedragstop",{event:ye,targetNode:ct,nodes:Jt})},store:fe})),An(Re,ye=>U(Le,ye),()=>h(Le)),Rt(()=>Ze("click",Re,pe)),Rt(()=>Ze("mouseenter",Re,ye=>te("nodemouseenter",{node:d(),event:ye}))),Rt(()=>Ze("mouseleave",Re,ye=>te("nodemouseleave",{node:d(),event:ye}))),Rt(()=>Ze("mousemove",Re,ye=>te("nodemousemove",{node:d(),event:ye}))),Rt(()=>Ze("contextmenu",Re,ye=>te("nodecontextmenu",{node:d(),event:ye}))),Ee(ye=>{de(Re,"data-id",g()),le=$t(Re,1,wn(ye),null,le,{dragging:b(),selected:x(),draggable:C(),connectable:m(),selectable:$(),nopan:C(),parent:D()}),de(Re,"style",`${E()??""};${h(f).width??""}${h(f).height??""}`),at(Re,"z-index",S()),at(Re,"transform",`translate(${V()??""}px, ${A()??""}px)`),at(Re,"visibility",K()?"visible":"hidden")},[()=>Et(["svelte-flow__node",`svelte-flow__node-${h(l)}`,W()])],ve),L(J,Re)};ke(Ie,J=>{v()||J(ht)})}L(e,be);var dt=ce({get node(){return d()},set node(J){d(J),y()},get id(){return g()},set id(J){g(J),y()},get data(){return p()},set data(J){p(J),y()},get selected(){return x()},set selected(J){x(J),y()},get draggable(){return C()},set draggable(J){C(J),y()},get selectable(){return $()},set selectable(J){$(J),y()},get connectable(){return m()},set connectable(J){m(J),y()},get deletable(){return _()},set deletable(J){_(J),y()},get hidden(){return v()},set hidden(J){v(J),y()},get dragging(){return b()},set dragging(J){b(J),y()},get resizeObserver(){return N()},set resizeObserver(J){N(J),y()},get style(){return E()},set style(J){E(J),y()},get type(){return T()},set type(J){T(J),y()},get isParent(){return D()},set isParent(J){D(J),y()},get positionX(){return V()},set positionX(J){V(J),y()},get positionY(){return A()},set positionY(J){A(J),y()},get sourcePosition(){return O()},set sourcePosition(J){O(J),y()},get targetPosition(){return R()},set targetPosition(J){R(J),y()},get zIndex(){return S()},set zIndex(J){S(J),y()},get measuredWidth(){return M()},set measuredWidth(J){M(J),y()},get measuredHeight(){return k()},set measuredHeight(J){k(J),y()},get initialWidth(){return P()},set initialWidth(J){P(J),y()},get initialHeight(){return H()},set initialHeight(J){H(J),y()},get width(){return I()},set width(J){I(J),y()},get height(){return B()},set height(J){B(J),y()},get dragHandle(){return F()},set dragHandle(J){F(J),y()},get initialized(){return K()},set initialized(J){K(J),y()},get parentId(){return se()},set parentId(J){se(J),y()},get nodeClickDistance(){return ee()},set nodeClickDistance(J){ee(J),y()},get class(){return W()},set class(J){W(J),y()}});return r(),dt}ie(hc,{node:{},id:{},data:{},selected:{},draggable:{},selectable:{},connectable:{},deletable:{},hidden:{},dragging:{},resizeObserver:{},style:{},type:{},isParent:{},positionX:{},positionY:{},sourcePosition:{},targetPosition:{},zIndex:{},measuredWidth:{},measuredHeight:{},initialWidth:{},initialHeight:{},width:{},height:{},dragHandle:{},initialized:{},parentId:{},nodeClickDistance:{},class:{}},[],[],!0);var f2=ne('<div class="svelte-flow__nodes svelte-tf4uy4"></div>');const g2={hash:"svelte-tf4uy4",code:".svelte-flow__nodes.svelte-tf4uy4 {width:100%;height:100%;position:absolute;left:0;top:0;}"};function vc(e,t){ue(t,!1),et(e,g2);const[n,r]=nt(),o=()=>Q(c,"$visibleNodes",n),i=()=>Q(f,"$nodesDraggable",n),s=()=>Q(g,"$elementsSelectable",n),a=()=>Q(d,"$nodesConnectable",n),l=()=>Q(x,"$parentLookup",n);let u=w(t,"nodeClickDistance",12,0);const{visibleNodes:c,nodesDraggable:f,nodesConnectable:d,elementsSelectable:g,updateNodeInternals:p,parentLookup:x}=Ue(),C=typeof ResizeObserver>"u"?null:new ResizeObserver(_=>{const v=new Map;_.forEach(b=>{const N=b.target.getAttribute("data-id");v.set(N,{id:N,nodeElement:b.target,force:!0})}),p(v)});$s(()=>{C==null||C.disconnect()}),He();var $=f2();Yt($,5,o,_=>_.id,(_,v)=>{const b=ve(()=>!!h(v).selected),N=ve(()=>!!h(v).hidden),E=ve(()=>!!(h(v).draggable||i()&&typeof h(v).draggable>"u")),T=ve(()=>!!(h(v).selectable||s()&&typeof h(v).selectable>"u")),D=ve(()=>!!(h(v).connectable||a()&&typeof h(v).connectable>"u")),V=ve(()=>h(v).deletable??!0),A=ve(()=>l().has(h(v).id)),O=ve(()=>h(v).type??"default"),R=ve(()=>h(v).internals.z??0),S=ve(()=>Eu(h(v)));hc(_,{get node(){return h(v)},get id(){return h(v).id},get data(){return h(v).data},get selected(){return h(b)},get hidden(){return h(N)},get draggable(){return h(E)},get selectable(){return h(T)},get connectable(){return h(D)},get deletable(){return h(V)},get positionX(){return h(v).internals.positionAbsolute.x},get positionY(){return h(v).internals.positionAbsolute.y},get isParent(){return h(A)},get style(){return h(v).style},get class(){return h(v).class},get type(){return h(O)},get sourcePosition(){return h(v).sourcePosition},get targetPosition(){return h(v).targetPosition},get dragging(){return h(v).dragging},get zIndex(){return h(R)},get dragHandle(){return h(v).dragHandle},get initialized(){return h(S)},get width(){return h(v).width},get height(){return h(v).height},get initialWidth(){return h(v).initialWidth},get initialHeight(){return h(v).initialHeight},get measuredWidth(){return h(v).measured.width},get measuredHeight(){return h(v).measured.height},get parentId(){return h(v).parentId},resizeObserver:C,get nodeClickDistance(){return u()},$$events:{nodeclick(M){De.call(this,t,M)},nodemouseenter(M){De.call(this,t,M)},nodemousemove(M){De.call(this,t,M)},nodemouseleave(M){De.call(this,t,M)},nodedrag(M){De.call(this,t,M)},nodedragstart(M){De.call(this,t,M)},nodedragstop(M){De.call(this,t,M)},nodecontextmenu(M){De.call(this,t,M)}}})}),Z($),L(e,$);var m=ce({get nodeClickDistance(){return u()},set nodeClickDistance(_){u(_),y()}});return r(),m}ie(vc,{nodeClickDistance:{}},[],[],!0);var h2=_e('<svg><g role="img"><!></g></svg>');function pc(e,t){ue(t,!1);const[n,r]=nt(),o=()=>Q(W,"$edgeTypes",n),i=()=>Q(fe,"$flowId",n),s=()=>Q(me,"$elementsSelectable",n),a=()=>Q(ee,"$edgeLookup",n),l=re(void 0,!0),u=re(void 0,!0),c=re(void 0,!0),f=re(void 0,!0),d=re(void 0,!0);let g=w(t,"id",13),p=w(t,"type",13,"default"),x=w(t,"source",13,""),C=w(t,"target",13,""),$=w(t,"data",29,()=>({})),m=w(t,"style",13,void 0),_=w(t,"zIndex",13,void 0),v=w(t,"animated",13,!1),b=w(t,"selected",13,!1),N=w(t,"selectable",13,void 0),E=w(t,"deletable",13,void 0),T=w(t,"hidden",13,!1),D=w(t,"label",13,void 0),V=w(t,"labelStyle",13,void 0),A=w(t,"markerStart",13,void 0),O=w(t,"markerEnd",13,void 0),R=w(t,"sourceHandle",13,void 0),S=w(t,"targetHandle",13,void 0),M=w(t,"sourceX",13),k=w(t,"sourceY",13),P=w(t,"targetX",13),H=w(t,"targetY",13),I=w(t,"sourcePosition",13),B=w(t,"targetPosition",13),F=w(t,"ariaLabel",13,void 0),K=w(t,"interactionWidth",13,void 0),se=w(t,"class",13,"");Sr("svelteflow__edge_id",g());const{edgeLookup:ee,edgeTypes:W,flowId:fe,elementsSelectable:me}=Ue(),Ce=ii(),he=tc();function ze(te){const Fe=a().get(g());Fe&&(he(g()),Ce("edgeclick",{event:te,edge:Fe}))}function G(te,Fe){const Oe=a().get(g());Oe&&Ce(Fe,{event:te,edge:Oe})}ge(()=>j(p()),()=>{U(l,p()||"default")}),ge(()=>(o(),h(l),zi),()=>{U(u,o()[h(l)]||zi)}),ge(()=>(j(A()),i()),()=>{U(c,A()?`url('#${ta(A(),i())}')`:void 0)}),ge(()=>(j(O()),i()),()=>{U(f,O()?`url('#${ta(O(),i())}')`:void 0)}),ge(()=>(j(N()),s()),()=>{U(d,N()??s())}),vt(),He(!0);var ae=tt(),Me=xe(ae);{var Le=te=>{var Fe=h2(),Oe=X(Fe);let rt;var oe=X(Oe);const pe=ve(()=>E()??!0);fl(oe,()=>h(u),(be,Ie)=>{Ie(be,{get id(){return g()},get source(){return x()},get target(){return C()},get sourceX(){return M()},get sourceY(){return k()},get targetX(){return P()},get targetY(){return H()},get sourcePosition(){return I()},get targetPosition(){return B()},get animated(){return v()},get selected(){return b()},get label(){return D()},get labelStyle(){return V()},get data(){return $()},get style(){return m()},get interactionWidth(){return K()},get selectable(){return h(d)},get deletable(){return h(pe)},get type(){return h(l)},get sourceHandleId(){return R()},get targetHandleId(){return S()},get markerStart(){return h(c)},get markerEnd(){return h(f)}})}),Z(Oe),Z(Fe),Ee(be=>{at(Fe,"z-index",_()),rt=$t(Oe,0,wn(be),null,rt,{animated:v(),selected:b(),selectable:h(d)}),de(Oe,"data-id",g()),de(Oe,"aria-label",F()===null?void 0:F()?F():`Edge from ${x()} to ${C()}`)},[()=>Et(["svelte-flow__edge",se()])],ve),Ze("click",Oe,ze),Ze("contextmenu",Oe,be=>{G(be,"edgecontextmenu")}),Ze("mouseenter",Oe,be=>{G(be,"edgemouseenter")}),Ze("mouseleave",Oe,be=>{G(be,"edgemouseleave")}),L(te,Fe)};ke(Me,te=>{T()||te(Le)})}L(e,ae);var Xe=ce({get id(){return g()},set id(te){g(te),y()},get type(){return p()},set type(te){p(te),y()},get source(){return x()},set source(te){x(te),y()},get target(){return C()},set target(te){C(te),y()},get data(){return $()},set data(te){$(te),y()},get style(){return m()},set style(te){m(te),y()},get zIndex(){return _()},set zIndex(te){_(te),y()},get animated(){return v()},set animated(te){v(te),y()},get selected(){return b()},set selected(te){b(te),y()},get selectable(){return N()},set selectable(te){N(te),y()},get deletable(){return E()},set deletable(te){E(te),y()},get hidden(){return T()},set hidden(te){T(te),y()},get label(){return D()},set label(te){D(te),y()},get labelStyle(){return V()},set labelStyle(te){V(te),y()},get markerStart(){return A()},set markerStart(te){A(te),y()},get markerEnd(){return O()},set markerEnd(te){O(te),y()},get sourceHandle(){return R()},set sourceHandle(te){R(te),y()},get targetHandle(){return S()},set targetHandle(te){S(te),y()},get sourceX(){return M()},set sourceX(te){M(te),y()},get sourceY(){return k()},set sourceY(te){k(te),y()},get targetX(){return P()},set targetX(te){P(te),y()},get targetY(){return H()},set targetY(te){H(te),y()},get sourcePosition(){return I()},set sourcePosition(te){I(te),y()},get targetPosition(){return B()},set targetPosition(te){B(te),y()},get ariaLabel(){return F()},set ariaLabel(te){F(te),y()},get interactionWidth(){return K()},set interactionWidth(te){K(te),y()},get class(){return se()},set class(te){se(te),y()}});return r(),Xe}ie(pc,{id:{},type:{},source:{},target:{},data:{},style:{},zIndex:{},animated:{},selected:{},selectable:{},deletable:{},hidden:{},label:{},labelStyle:{},markerStart:{},markerEnd:{},sourceHandle:{},targetHandle:{},sourceX:{},sourceY:{},targetX:{},targetY:{},sourcePosition:{},targetPosition:{},ariaLabel:{},interactionWidth:{},class:{}},[],[],!0);function mc(e,t){ue(t,!1);let n=w(t,"onMount",12,void 0),r=w(t,"onDestroy",12,void 0);return rn(()=>{var o;return(o=n())==null||o(),r()}),He(),ce({get onMount(){return n()},set onMount(o){n(o),y()},get onDestroy(){return r()},set onDestroy(o){r(o),y()}})}ie(mc,{onMount:{},onDestroy:{}},[],[],!0);var v2=_e("<defs></defs>");function yc(e,t){ue(t,!1);const[n,r]=nt(),o=()=>Q(i,"$markers",n),{markers:i}=Ue();He();var s=v2();Yt(s,5,o,a=>a.id,(a,l)=>{wc(a,ft(()=>h(l)))}),Z(s),L(e,s),ce(),r()}ie(yc,{},[],[],!0);var p2=_e('<polyline stroke-linecap="round" stroke-linejoin="round" fill="none" points="-5,-4 0,0 -5,4"></polyline>'),m2=_e('<polyline stroke-linecap="round" stroke-linejoin="round" points="-5,-4 0,0 -5,4 -5,-4"></polyline>'),y2=_e('<marker class="svelte-flow__arrowhead" viewBox="-10 -10 20 20" refX="0" refY="0"><!></marker>');function wc(e,t){ue(t,!1);let n=w(t,"id",12),r=w(t,"type",12),o=w(t,"width",12,12.5),i=w(t,"height",12,12.5),s=w(t,"markerUnits",12,"strokeWidth"),a=w(t,"orient",12,"auto-start-reverse"),l=w(t,"color",12,void 0),u=w(t,"strokeWidth",12,void 0);He();var c=y2(),f=X(c);{var d=p=>{var x=p2();Ee(()=>{de(x,"stroke",l()),de(x,"stroke-width",u())}),L(p,x)},g=(p,x)=>{{var C=$=>{var m=m2();Ee(()=>{de(m,"stroke",l()),de(m,"stroke-width",u()),de(m,"fill",l())}),L($,m)};ke(p,$=>{r()===_o.ArrowClosed&&$(C)},x)}};ke(f,p=>{r()===_o.Arrow?p(d):p(g,!1)})}return Z(c),Ee(()=>{de(c,"id",n()),de(c,"markerWidth",`${o()}`),de(c,"markerHeight",`${i()}`),de(c,"markerUnits",s()),de(c,"orient",a())}),L(e,c),ce({get id(){return n()},set id(p){n(p),y()},get type(){return r()},set type(p){r(p),y()},get width(){return o()},set width(p){o(p),y()},get height(){return i()},set height(p){i(p),y()},get markerUnits(){return s()},set markerUnits(p){s(p),y()},get orient(){return a()},set orient(p){a(p),y()},get color(){return l()},set color(p){l(p),y()},get strokeWidth(){return u()},set strokeWidth(p){u(p),y()}})}ie(wc,{id:{},type:{},width:{},height:{},markerUnits:{},orient:{},color:{},strokeWidth:{}},[],[],!0);var w2=ne('<div class="svelte-flow__edges"><svg class="svelte-flow__marker"><!></svg> <!> <!></div>');function _c(e,t){ue(t,!1);const[n,r]=nt(),o=()=>Q(a,"$visibleEdges",n),i=()=>Q(c,"$elementsSelectable",n);let s=w(t,"defaultEdgeOptions",12);const{visibleEdges:a,edgesInitialized:l,edges:{setDefaultOptions:u},elementsSelectable:c}=Ue();rn(()=>{s()&&u(s())}),He();var f=w2(),d=X(f),g=X(d);yc(g,{}),Z(d);var p=z(d,2);Yt(p,1,o,m=>m.id,(m,_)=>{const v=ve(()=>h(_).selectable??i()),b=ve(()=>h(_).type||"default");pc(m,{get id(){return h(_).id},get source(){return h(_).source},get target(){return h(_).target},get data(){return h(_).data},get style(){return h(_).style},get animated(){return h(_).animated},get selected(){return h(_).selected},get selectable(){return h(v)},get deletable(){return h(_).deletable},get hidden(){return h(_).hidden},get label(){return h(_).label},get labelStyle(){return h(_).labelStyle},get markerStart(){return h(_).markerStart},get markerEnd(){return h(_).markerEnd},get sourceHandle(){return h(_).sourceHandle},get targetHandle(){return h(_).targetHandle},get sourceX(){return h(_).sourceX},get sourceY(){return h(_).sourceY},get targetX(){return h(_).targetX},get targetY(){return h(_).targetY},get sourcePosition(){return h(_).sourcePosition},get targetPosition(){return h(_).targetPosition},get ariaLabel(){return h(_).ariaLabel},get interactionWidth(){return h(_).interactionWidth},get class(){return h(_).class},get type(){return h(b)},get zIndex(){return h(_).zIndex},$$events:{edgeclick(N){De.call(this,t,N)},edgecontextmenu(N){De.call(this,t,N)},edgemouseenter(N){De.call(this,t,N)},edgemouseleave(N){De.call(this,t,N)}}})});var x=z(p,2);{var C=m=>{mc(m,{onMount:()=>{ai(l,!0)},onDestroy:()=>{ai(l,!1)}})};ke(x,m=>{o().length>0&&m(C)})}Z(f),L(e,f);var $=ce({get defaultEdgeOptions(){return s()},set defaultEdgeOptions(m){s(m),y()}});return r(),$}ie(_c,{defaultEdgeOptions:{}},[],[],!0);var _2=ne('<div class="svelte-flow__selection svelte-1iugwpu"></div>');const x2={hash:"svelte-1iugwpu",code:".svelte-flow__selection.svelte-1iugwpu {position:absolute;top:0;left:0;}"};function ua(e,t){ue(t,!1),et(e,x2);let n=w(t,"x",12,0),r=w(t,"y",12,0),o=w(t,"width",12,0),i=w(t,"height",12,0),s=w(t,"isVisible",12,!0);var a=tt(),l=xe(a);{var u=c=>{var f=_2();Ee(()=>{at(f,"width",typeof o()=="string"?o():`${o()}px`),at(f,"height",typeof i()=="string"?i():`${i()}px`),at(f,"transform",`translate(${n()}px, ${r()}px)`)}),L(c,f)};ke(l,c=>{s()&&c(u)})}return L(e,a),ce({get x(){return n()},set x(c){n(c),y()},get y(){return r()},set y(c){r(c),y()},get width(){return o()},set width(c){o(c),y()},get height(){return i()},set height(c){i(c),y()},get isVisible(){return s()},set isVisible(c){s(c),y()}})}ie(ua,{x:{},y:{},width:{},height:{},isVisible:{}},[],[],!0);function xc(e,t){ue(t,!1);const[n,r]=nt(),o=()=>Q(s,"$selectionRect",n),i=()=>Q(a,"$selectionRectMode",n),{selectionRect:s,selectionRectMode:a}=Ue();He();const l=ve(()=>!!(o()&&i()==="user")),u=ve(()=>{var g;return(g=o())==null?void 0:g.width}),c=ve(()=>{var g;return(g=o())==null?void 0:g.height}),f=ve(()=>{var g;return(g=o())==null?void 0:g.x}),d=ve(()=>{var g;return(g=o())==null?void 0:g.y});ua(e,{get isVisible(){return h(l)},get width(){return h(u)},get height(){return h(c)},get x(){return h(f)},get y(){return h(d)}}),ce(),r()}ie(xc,{},[],[],!0);var b2=ne('<div class="selection-wrapper nopan svelte-5pxri" role="button" tabindex="-1"><!></div>');const C2={hash:"svelte-5pxri",code:".selection-wrapper.svelte-5pxri {position:absolute;top:0;left:0;z-index:7;pointer-events:all;}"};function bc(e,t){ue(t,!1),et(e,C2);const[n,r]=nt(),o=()=>Q(l,"$selectionRectMode",n),i=()=>Q(c,"$nodeLookup",n),s=()=>Q(u,"$nodes",n),a=Ue(),{selectionRectMode:l,nodes:u,nodeLookup:c}=a,f=ii();let d=re(null);function g(m){const _=s().filter(v=>v.selected);f("selectioncontextmenu",{nodes:_,event:m})}function p(m){const _=s().filter(v=>v.selected);f("selectionclick",{nodes:_,event:m})}ge(()=>(o(),i(),s()),()=>{o()==="nodes"&&(U(d,bo(i(),{filter:m=>!!m.selected})),s())}),vt(),He();var x=tt(),C=xe(x);{var $=m=>{var _=b2(),v=X(_);ua(v,{width:"100%",height:"100%",x:0,y:0}),Z(_),_t(_,(b,N)=>Br==null?void 0:Br(b,N),()=>({disabled:!1,store:a,onDrag:(b,N,E,T)=>{f("nodedrag",{event:b,targetNode:null,nodes:T})},onDragStart:(b,N,E,T)=>{f("nodedragstart",{event:b,targetNode:null,nodes:T})},onDragStop:(b,N,E,T)=>{f("nodedragstop",{event:b,targetNode:null,nodes:T})}})),Rt(()=>Ze("contextmenu",_,g)),Rt(()=>Ze("click",_,p)),Rt(()=>Ze("keyup",_,()=>{})),Ee(()=>de(_,"style",`width: ${h(d).width??""}px; height: ${h(d).height??""}px; transform: translate(${h(d).x??""}px, ${h(d).y??""}px)`)),L(m,_)};ke(C,m=>{o()==="nodes"&&h(d)&&zn(h(d).x)&&zn(h(d).y)&&m($)})}L(e,x),ce(),r()}ie(bc,{},[],[],!0);function qe(e,t){let{enabled:n=!0,trigger:r,type:o="keydown"}=t;function i(s){const a=Array.isArray(r)?r:[r],l={alt:s.altKey,ctrl:s.ctrlKey,shift:s.shiftKey,meta:s.metaKey};for(const u of a){const c={modifier:[],preventDefault:!1,enabled:!0,...u},{modifier:f,key:d,callback:g,preventDefault:p,enabled:x}=c;if(x){if(f.length&&!(Array.isArray(f)?f:[f]).map(m=>typeof m=="string"?[m]:m).some(m=>m.every(_=>l[_])))continue;if(s.key===d){p&&s.preventDefault();const C={node:e,trigger:c,originalEvent:s};e.dispatchEvent(new CustomEvent("shortcut",{detail:C})),g==null||g(C)}}}}return n&&e.addEventListener(o,i),{update:s=>{const{enabled:a=!0,type:l="keydown"}=s;n&&(!a||o!==l)?e.removeEventListener(o,i):!n&&a&&e.addEventListener(l,i),n=a,o=l,r=s.trigger},destroy:()=>{e.removeEventListener(o,i)}}}function Cc(e,t){ue(t,!1);let n=w(t,"selectionKey",12,"Shift"),r=w(t,"multiSelectionKey",28,()=>Di()?"Meta":"Control"),o=w(t,"deleteKey",12,"Backspace"),i=w(t,"panActivationKey",12," "),s=w(t,"zoomActivationKey",28,()=>Di()?"Meta":"Control");const{selectionKeyPressed:a,multiselectionKeyPressed:l,deleteKeyPressed:u,panActivationKeyPressed:c,zoomActivationKeyPressed:f,selectionRect:d}=Ue();function g(m){return m!==null&&typeof m=="object"}function p(m){return g(m)?m.modifier||[]:[]}function x(m){return m==null?"":g(m)?m.key:m}function C(m,_){return(Array.isArray(m)?m:[m]).map(b=>{const N=x(b);return{key:N,modifier:p(b),enabled:N!==null,callback:_}})}function $(){d.set(null),a.set(!1),l.set(!1),u.set(!1),c.set(!1),f.set(!1)}return He(),Ze("blur",Vt,$),Ze("contextmenu",Vt,$),_t(Vt,(m,_)=>qe==null?void 0:qe(m,_),()=>({trigger:C(n(),()=>a.set(!0)),type:"keydown"})),_t(Vt,(m,_)=>qe==null?void 0:qe(m,_),()=>({trigger:C(n(),()=>a.set(!1)),type:"keyup"})),_t(Vt,(m,_)=>qe==null?void 0:qe(m,_),()=>({trigger:C(r(),()=>l.set(!0)),type:"keydown"})),_t(Vt,(m,_)=>qe==null?void 0:qe(m,_),()=>({trigger:C(r(),()=>l.set(!1)),type:"keyup"})),_t(Vt,(m,_)=>qe==null?void 0:qe(m,_),()=>({trigger:C(o(),m=>{!(m.originalEvent.ctrlKey||m.originalEvent.metaKey||m.originalEvent.shiftKey)&&!r0(m.originalEvent)&&u.set(!0)}),type:"keydown"})),_t(Vt,(m,_)=>qe==null?void 0:qe(m,_),()=>({trigger:C(o(),()=>u.set(!1)),type:"keyup"})),_t(Vt,(m,_)=>qe==null?void 0:qe(m,_),()=>({trigger:C(i(),()=>c.set(!0)),type:"keydown"})),_t(Vt,(m,_)=>qe==null?void 0:qe(m,_),()=>({trigger:C(i(),()=>c.set(!1)),type:"keyup"})),_t(Vt,(m,_)=>qe==null?void 0:qe(m,_),()=>({trigger:C(s(),()=>f.set(!0)),type:"keydown"})),_t(Vt,(m,_)=>qe==null?void 0:qe(m,_),()=>({trigger:C(s(),()=>f.set(!1)),type:"keyup"})),ce({get selectionKey(){return n()},set selectionKey(m){n(m),y()},get multiSelectionKey(){return r()},set multiSelectionKey(m){r(m),y()},get deleteKey(){return o()},set deleteKey(m){o(m),y()},get panActivationKey(){return i()},set panActivationKey(m){i(m),y()},get zoomActivationKey(){return s()},set zoomActivationKey(m){s(m),y()}})}ie(Cc,{selectionKey:{},multiSelectionKey:{},deleteKey:{},panActivationKey:{},zoomActivationKey:{}},[],[],!0);var k2=_e('<path fill="none" class="svelte-flow__connection-path"></path>'),$2=_e('<svg class="svelte-flow__connectionline"><g><!><!></g></svg>');function kc(e,t){ue(t,!1);const[n,r]=nt(),o=()=>Q(g,"$connection",n),i=()=>Q(p,"$connectionLineType",n),s=()=>Q(f,"$width",n),a=()=>Q(d,"$height",n);let l=w(t,"containerStyle",12,""),u=w(t,"style",12,""),c=w(t,"isCustomComponent",12,!1);const{width:f,height:d,connection:g,connectionLineType:p}=Ue();let x=re(null);ge(()=>(o(),j(c()),i(),h(x),ea),()=>{if(o().inProgress&&!c()){const{from:v,to:b,fromPosition:N,toPosition:E}=o(),T={sourceX:v.x,sourceY:v.y,sourcePosition:N,targetX:b.x,targetY:b.y,targetPosition:E};switch(i()){case Ar.Bezier:(D=>U(x,D[0]))(Tu(T));break;case Ar.Step:(D=>U(x,D[0]))(Li({...T,borderRadius:0}));break;case Ar.SmoothStep:(D=>U(x,D[0]))(Li(T));break;default:(D=>U(x,D[0]))(ea(T))}}}),vt(),He();var C=tt(),$=xe(C);{var m=v=>{var b=$2(),N=X(b),E=X(N);wt(E,t,"connectionLine",{});var T=z(E);{var D=V=>{var A=k2();Ee(()=>{de(A,"d",h(x)),de(A,"style",u())}),L(V,A)};ke(T,V=>{c()||V(D)})}Z(N),Z(b),Ee(V=>{de(b,"width",s()),de(b,"height",a()),de(b,"style",l()),$t(N,0,wn(V))},[()=>Et(["svelte-flow__connection",qv(o().isValid)])],ve),L(v,b)};ke($,v=>{o().inProgress&&v(m)})}L(e,C);var _=ce({get containerStyle(){return l()},set containerStyle(v){l(v),y()},get style(){return u()},set style(v){u(v),y()},get isCustomComponent(){return c()},set isCustomComponent(v){c(v),y()}});return r(),_}ie(kc,{containerStyle:{},style:{},isCustomComponent:{}},["connectionLine"],[],!0);var E2=ne("<div><!></div>");function So(e,t){const n=it(t,["children","$$slots","$$events","$$legacy","$$host"]),r=it(n,["position","style","class"]);ue(t,!1);const[o,i]=nt(),s=()=>Q(f,"$selectionRectMode",o),a=re();let l=w(t,"position",12,"top-right"),u=w(t,"style",12,void 0),c=w(t,"class",12,void 0);const{selectionRectMode:f}=Ue();ge(()=>j(l()),()=>{U(a,`${l()}`.split("-"))}),vt(),He();var d=E2();let g;var p=X(d);wt(p,t,"default",{}),Z(d),Ee(C=>{g=nn(d,g,{class:C,style:u(),...r}),at(d,"pointer-events",s()?"none":"")},[()=>Et(["svelte-flow__panel",c(),...h(a)])],ve),L(e,d);var x=ce({get position(){return l()},set position(C){l(C),y()},get style(){return u()},set style(C){u(C),y()},get class(){return c()},set class(C){c(C),y()}});return i(),x}ie(So,{position:{},style:{},class:{}},["default"],[],!0);var S2=ne('<a href="https://svelteflow.dev" target="_blank" rel="noopener noreferrer" aria-label="Svelte Flow attribution">Svelte Flow</a>');function $c(e,t){ue(t,!1);let n=w(t,"proOptions",12,void 0),r=w(t,"position",12,"bottom-right");He();var o=tt(),i=xe(o);{var s=a=>{So(a,{get position(){return r()},class:"svelte-flow__attribution","data-message":"Feel free to remove the attribution or check out how you could support us: https://svelteflow.dev/support-us",children:(l,u)=>{var c=S2();L(l,c)},$$slots:{default:!0}})};ke(i,a=>{var l;(l=n())!=null&&l.hideAttribution||a(s)})}return L(e,o),ce({get proOptions(){return n()},set proOptions(a){n(a),y()},get position(){return r()},set position(a){r(a),y()}})}ie($c,{proOptions:{},position:{}},[],[],!0);function Ec(e,{nodeTypes:t,edgeTypes:n,minZoom:r,maxZoom:o,translateExtent:i,paneClickDistance:s}){t!==void 0&&e.setNodeTypes(t),n!==void 0&&e.setEdgeTypes(n),r!==void 0&&e.setMinZoom(r),o!==void 0&&e.setMaxZoom(o),i!==void 0&&e.setTranslateExtent(i),s!==void 0&&e.setPaneClickDistance(s)}const P2=e=>Object.keys(e);function Sc(e,t){P2(t).forEach(n=>{const r=t[n];r!==void 0&&e[n].set(r)})}function N2(){return typeof window>"u"||!window.matchMedia?null:window.matchMedia("(prefers-color-scheme: dark)")}function T2(e="light"){return Gt("light",n=>{if(e!=="system"){n(e);return}const r=N2(),o=()=>n(r!=null&&r.matches?"dark":"light");return n(r!=null&&r.matches?"dark":"light"),r==null||r.addEventListener("change",o),()=>{r==null||r.removeEventListener("change",o)}})}var M2=ne('<!> <!> <div class="svelte-flow__edgelabel-renderer"></div> <div class="svelte-flow__viewport-portal"></div> <!> <!>',1),H2=ne("<!> <!>",1),V2=ne("<div><!> <!> <!> <!></div>");const D2={hash:"svelte-12wlba6",code:".svelte-flow.svelte-12wlba6 {width:100%;height:100%;overflow:hidden;position:relative;z-index:0;background-color:var(--background-color, var(--background-color-default));}:root {--background-color-default: #fff;--background-pattern-color-default: #ddd;--minimap-mask-color-default: rgb(240, 240, 240, 0.6);--minimap-mask-stroke-color-default: none;--minimap-mask-stroke-width-default: 1;--controls-button-background-color-default: #fefefe;--controls-button-background-color-hover-default: #f4f4f4;--controls-button-color-default: inherit;--controls-button-color-hover-default: inherit;--controls-button-border-color-default: #eee;}"};function Pc(e,t){const n=e1(t),r=it(t,["children","$$slots","$$events","$$legacy","$$host"]),o=it(r,["id","nodes","edges","fitView","fitViewOptions","minZoom","maxZoom","initialViewport","viewport","nodeTypes","edgeTypes","selectionKey","selectionMode","panActivationKey","multiSelectionKey","zoomActivationKey","nodesDraggable","nodesConnectable","nodeDragThreshold","elementsSelectable","snapGrid","deleteKey","connectionRadius","connectionLineType","connectionMode","connectionLineStyle","connectionLineContainerStyle","onMoveStart","onMove","onMoveEnd","isValidConnection","translateExtent","nodeExtent","onlyRenderVisibleElements","panOnScrollMode","preventScrolling","zoomOnScroll","zoomOnDoubleClick","zoomOnPinch","panOnScroll","panOnDrag","selectionOnDrag","autoPanOnConnect","autoPanOnNodeDrag","onerror","ondelete","onedgecreate","attributionPosition","proOptions","defaultEdgeOptions","width","height","colorMode","onconnect","onconnectstart","onconnectend","onbeforedelete","oninit","nodeOrigin","paneClickDistance","nodeClickDistance","defaultMarkerColor","style","class"]);ue(t,!1),et(e,D2);const[i,s]=nt(),a=()=>Q(_(),"$viewport",i),l=()=>Q(xa,"$initialized",i),u=()=>Q(h(c),"$colorModeClass",i),c=re();let f=w(t,"id",12,"1"),d=w(t,"nodes",12),g=w(t,"edges",12),p=w(t,"fitView",12,void 0),x=w(t,"fitViewOptions",12,void 0),C=w(t,"minZoom",12,void 0),$=w(t,"maxZoom",12,void 0),m=w(t,"initialViewport",12,void 0),_=w(t,"viewport",12,void 0),v=w(t,"nodeTypes",12,void 0),b=w(t,"edgeTypes",12,void 0),N=w(t,"selectionKey",12,void 0),E=w(t,"selectionMode",12,void 0),T=w(t,"panActivationKey",12,void 0),D=w(t,"multiSelectionKey",12,void 0),V=w(t,"zoomActivationKey",12,void 0),A=w(t,"nodesDraggable",12,void 0),O=w(t,"nodesConnectable",12,void 0),R=w(t,"nodeDragThreshold",12,void 0),S=w(t,"elementsSelectable",12,void 0),M=w(t,"snapGrid",12,void 0),k=w(t,"deleteKey",12,void 0),P=w(t,"connectionRadius",12,void 0),H=w(t,"connectionLineType",12,void 0),I=w(t,"connectionMode",28,()=>hr.Strict),B=w(t,"connectionLineStyle",12,""),F=w(t,"connectionLineContainerStyle",12,""),K=w(t,"onMoveStart",12,void 0),se=w(t,"onMove",12,void 0),ee=w(t,"onMoveEnd",12,void 0),W=w(t,"isValidConnection",12,void 0),fe=w(t,"translateExtent",12,void 0),me=w(t,"nodeExtent",12,void 0),Ce=w(t,"onlyRenderVisibleElements",12,void 0),he=w(t,"panOnScrollMode",28,()=>Jn.Free),ze=w(t,"preventScrolling",12,!0),G=w(t,"zoomOnScroll",12,!0),ae=w(t,"zoomOnDoubleClick",12,!0),Me=w(t,"zoomOnPinch",12,!0),Le=w(t,"panOnScroll",12,!1),Xe=w(t,"panOnDrag",12,!0),te=w(t,"selectionOnDrag",12,void 0),Fe=w(t,"autoPanOnConnect",12,!0),Oe=w(t,"autoPanOnNodeDrag",12,!0),rt=w(t,"onerror",12,void 0),oe=w(t,"ondelete",12,void 0),pe=w(t,"onedgecreate",12,void 0),be=w(t,"attributionPosition",12,void 0),Ie=w(t,"proOptions",12,void 0),ht=w(t,"defaultEdgeOptions",12,void 0),dt=w(t,"width",12,void 0),J=w(t,"height",12,void 0),Re=w(t,"colorMode",12,"light"),le=w(t,"onconnect",12,void 0),$n=w(t,"onconnectstart",12,void 0),fn=w(t,"onconnectend",12,void 0),En=w(t,"onbeforedelete",12,void 0),Te=w(t,"oninit",12,void 0),st=w(t,"nodeOrigin",12,void 0),ye=w(t,"paneClickDistance",12,0),lt=w(t,"nodeClickDistance",12,0),ct=w(t,"defaultMarkerColor",12,"#b1b1b7"),Jt=w(t,"style",12,void 0),Oo=w(t,"class",12,void 0),Wt=re(),Ot=re(),Sn=re();const gn=a()||m(),mt=Df(Ri)?Ue():r2({nodes:q(d()),edges:q(g()),width:dt(),height:J(),fitView:p(),nodeOrigin:st(),nodeExtent:me()});rn(()=>(mt.width.set(h(Ot)),mt.height.set(h(Sn)),mt.domNode.set(h(Wt)),mt.syncNodeStores(d()),mt.syncEdgeStores(g()),mt.syncViewport(_()),p()!==void 0&&mt.fitViewOnInit.set(p()),x()&&mt.fitViewOptions.set(x()),Ec(mt,{nodeTypes:v(),edgeTypes:b(),minZoom:C(),maxZoom:$(),translateExtent:fe(),paneClickDistance:ye()}),()=>{mt.reset()}));const{initialized:xa}=mt;let yr=re(!1);ge(()=>(h(Ot),h(Sn)),()=>{h(Ot)!==void 0&&h(Sn)!==void 0&&(mt.width.set(h(Ot)),mt.height.set(h(Sn)))}),ge(()=>(h(yr),l(),j(Te())),()=>{var Y;!h(yr)&&l()&&((Y=Te())==null||Y(),U(yr,!0))}),ge(()=>(j(f()),j(H()),j(P()),j(E()),j(M()),j(ct()),j(A()),j(O()),j(S()),j(Ce()),j(W()),j(Fe()),j(Oe()),j(rt()),j(oe()),j(pe()),j(I()),j(R()),j(le()),j($n()),j(fn()),j(En()),j(st()),Sc),()=>{const Y={flowId:f(),connectionLineType:H(),connectionRadius:P(),selectionMode:E(),snapGrid:M(),defaultMarkerColor:ct(),nodesDraggable:A(),nodesConnectable:O(),elementsSelectable:S(),onlyRenderVisibleElements:Ce(),isValidConnection:W(),autoPanOnConnect:Fe(),autoPanOnNodeDrag:Oe(),onerror:rt(),ondelete:oe(),onedgecreate:pe(),connectionMode:I(),nodeDragThreshold:R(),onconnect:le(),onconnectstart:$n(),onconnectend:fn(),onbeforedelete:En(),nodeOrigin:st()};Sc(mt,Y)}),ge(()=>(j(v()),j(b()),j(C()),j($()),j(fe()),j(ye())),()=>{Ec(mt,{nodeTypes:v(),edgeTypes:b(),minZoom:C(),maxZoom:$(),translateExtent:fe(),paneClickDistance:ye()})}),ge(()=>j(Re()),()=>{l1(U(c,T2(Re())),"$colorModeClass",i)}),vt(),He();var hn=V2();let ji;var Ji=X(hn);Cc(Ji,{get selectionKey(){return N()},get deleteKey(){return k()},get panActivationKey(){return T()},get multiSelectionKey(){return D()},get zoomActivationKey(){return V()}});var Qi=z(Ji,2);const jy=ve(()=>he()===void 0?Jn.Free:he()),Jy=ve(()=>ze()===void 0?!0:ze()),Qy=ve(()=>G()===void 0?!0:G()),ew=ve(()=>ae()===void 0?!0:ae()),tw=ve(()=>Me()===void 0?!0:Me()),nw=ve(()=>Le()===void 0?!1:Le()),rw=ve(()=>Xe()===void 0?!0:Xe()),ow=ve(()=>ye()===void 0?0:ye());uc(Qi,{initialViewport:gn,get onMoveStart(){return K()},get onMove(){return se()},get onMoveEnd(){return ee()},get panOnScrollMode(){return h(jy)},get preventScrolling(){return h(Jy)},get zoomOnScroll(){return h(Qy)},get zoomOnDoubleClick(){return h(ew)},get zoomOnPinch(){return h(tw)},get panOnScroll(){return h(nw)},get panOnDrag(){return h(rw)},get paneClickDistance(){return h(ow)},children:(Y,pw)=>{const aw=ve(()=>Xe()===void 0?!0:Xe());fc(Y,{get panOnDrag(){return h(aw)},get selectionOnDrag(){return te()},$$events:{paneclick(Io){De.call(this,t,Io)},panecontextmenu(Io){De.call(this,t,Io)}},children:(Io,mw)=>{var Vd=H2(),Dd=xe(Vd);gc(Dd,{children:(uw,yw)=>{var Ad=M2(),Ld=xe(Ad);_c(Ld,{get defaultEdgeOptions(){return ht()},$$events:{edgeclick(Be){De.call(this,t,Be)},edgecontextmenu(Be){De.call(this,t,Be)},edgemouseenter(Be){De.call(this,t,Be)},edgemouseleave(Be){De.call(this,t,Be)}}});var Od=z(Ld,2);kc(Od,{get containerStyle(){return F()},get style(){return B()},isCustomComponent:n.connectionLine,$$slots:{connectionLine:(Be,ww)=>{var zd=tt(),dw=xe(zd);wt(dw,t,"connectionLine",{}),L(Be,zd)}}});var Id=z(Od,6);vc(Id,{get nodeClickDistance(){return lt()},$$events:{nodeclick(Be){De.call(this,t,Be)},nodemouseenter(Be){De.call(this,t,Be)},nodemousemove(Be){De.call(this,t,Be)},nodemouseleave(Be){De.call(this,t,Be)},nodedragstart(Be){De.call(this,t,Be)},nodedrag(Be){De.call(this,t,Be)},nodedragstop(Be){De.call(this,t,Be)},nodecontextmenu(Be){De.call(this,t,Be)}}});var cw=z(Id,2);bc(cw,{$$events:{selectionclick(Be){De.call(this,t,Be)},selectioncontextmenu(Be){De.call(this,t,Be)},nodedragstart(Be){De.call(this,t,Be)},nodedrag(Be){De.call(this,t,Be)},nodedragstop(Be){De.call(this,t,Be)}}}),L(uw,Ad)},$$slots:{default:!0}});var lw=z(Dd,2);xc(lw,{}),L(Io,Vd)},$$slots:{default:!0}})},$$slots:{default:!0}});var Hd=z(Qi,2);$c(Hd,{get proOptions(){return Ie()},get position(){return be()}});var iw=z(Hd,2);wt(iw,t,"default",{}),Z(hn),An(hn,Y=>U(Wt,Y),()=>h(Wt)),Ee(Y=>ji=nn(hn,ji,{style:Jt(),class:Y,"data-testid":"svelte-flow__wrapper",...o,role:"application"},"svelte-12wlba6"),[()=>Et(["svelte-flow",Oo(),u()])],ve),ml(hn,"clientWidth",Y=>U(Ot,Y)),ml(hn,"clientHeight",Y=>U(Sn,Y)),Ze("dragover",hn,function(Y){De.call(this,t,Y)}),Ze("drop",hn,function(Y){De.call(this,t,Y)}),L(e,hn);var sw=ce({get id(){return f()},set id(Y){f(Y),y()},get nodes(){return d()},set nodes(Y){d(Y),y()},get edges(){return g()},set edges(Y){g(Y),y()},get fitView(){return p()},set fitView(Y){p(Y),y()},get fitViewOptions(){return x()},set fitViewOptions(Y){x(Y),y()},get minZoom(){return C()},set minZoom(Y){C(Y),y()},get maxZoom(){return $()},set maxZoom(Y){$(Y),y()},get initialViewport(){return m()},set initialViewport(Y){m(Y),y()},get viewport(){return _()},set viewport(Y){_(Y),y()},get nodeTypes(){return v()},set nodeTypes(Y){v(Y),y()},get edgeTypes(){return b()},set edgeTypes(Y){b(Y),y()},get selectionKey(){return N()},set selectionKey(Y){N(Y),y()},get selectionMode(){return E()},set selectionMode(Y){E(Y),y()},get panActivationKey(){return T()},set panActivationKey(Y){T(Y),y()},get multiSelectionKey(){return D()},set multiSelectionKey(Y){D(Y),y()},get zoomActivationKey(){return V()},set zoomActivationKey(Y){V(Y),y()},get nodesDraggable(){return A()},set nodesDraggable(Y){A(Y),y()},get nodesConnectable(){return O()},set nodesConnectable(Y){O(Y),y()},get nodeDragThreshold(){return R()},set nodeDragThreshold(Y){R(Y),y()},get elementsSelectable(){return S()},set elementsSelectable(Y){S(Y),y()},get snapGrid(){return M()},set snapGrid(Y){M(Y),y()},get deleteKey(){return k()},set deleteKey(Y){k(Y),y()},get connectionRadius(){return P()},set connectionRadius(Y){P(Y),y()},get connectionLineType(){return H()},set connectionLineType(Y){H(Y),y()},get connectionMode(){return I()},set connectionMode(Y){I(Y),y()},get connectionLineStyle(){return B()},set connectionLineStyle(Y){B(Y),y()},get connectionLineContainerStyle(){return F()},set connectionLineContainerStyle(Y){F(Y),y()},get onMoveStart(){return K()},set onMoveStart(Y){K(Y),y()},get onMove(){return se()},set onMove(Y){se(Y),y()},get onMoveEnd(){return ee()},set onMoveEnd(Y){ee(Y),y()},get isValidConnection(){return W()},set isValidConnection(Y){W(Y),y()},get translateExtent(){return fe()},set translateExtent(Y){fe(Y),y()},get nodeExtent(){return me()},set nodeExtent(Y){me(Y),y()},get onlyRenderVisibleElements(){return Ce()},set onlyRenderVisibleElements(Y){Ce(Y),y()},get panOnScrollMode(){return he()},set panOnScrollMode(Y){he(Y),y()},get preventScrolling(){return ze()},set preventScrolling(Y){ze(Y),y()},get zoomOnScroll(){return G()},set zoomOnScroll(Y){G(Y),y()},get zoomOnDoubleClick(){return ae()},set zoomOnDoubleClick(Y){ae(Y),y()},get zoomOnPinch(){return Me()},set zoomOnPinch(Y){Me(Y),y()},get panOnScroll(){return Le()},set panOnScroll(Y){Le(Y),y()},get panOnDrag(){return Xe()},set panOnDrag(Y){Xe(Y),y()},get selectionOnDrag(){return te()},set selectionOnDrag(Y){te(Y),y()},get autoPanOnConnect(){return Fe()},set autoPanOnConnect(Y){Fe(Y),y()},get autoPanOnNodeDrag(){return Oe()},set autoPanOnNodeDrag(Y){Oe(Y),y()},get onerror(){return rt()},set onerror(Y){rt(Y),y()},get ondelete(){return oe()},set ondelete(Y){oe(Y),y()},get onedgecreate(){return pe()},set onedgecreate(Y){pe(Y),y()},get attributionPosition(){return be()},set attributionPosition(Y){be(Y),y()},get proOptions(){return Ie()},set proOptions(Y){Ie(Y),y()},get defaultEdgeOptions(){return ht()},set defaultEdgeOptions(Y){ht(Y),y()},get width(){return dt()},set width(Y){dt(Y),y()},get height(){return J()},set height(Y){J(Y),y()},get colorMode(){return Re()},set colorMode(Y){Re(Y),y()},get onconnect(){return le()},set onconnect(Y){le(Y),y()},get onconnectstart(){return $n()},set onconnectstart(Y){$n(Y),y()},get onconnectend(){return fn()},set onconnectend(Y){fn(Y),y()},get onbeforedelete(){return En()},set onbeforedelete(Y){En(Y),y()},get oninit(){return Te()},set oninit(Y){Te(Y),y()},get nodeOrigin(){return st()},set nodeOrigin(Y){st(Y),y()},get paneClickDistance(){return ye()},set paneClickDistance(Y){ye(Y),y()},get nodeClickDistance(){return lt()},set nodeClickDistance(Y){lt(Y),y()},get defaultMarkerColor(){return ct()},set defaultMarkerColor(Y){ct(Y),y()},get style(){return Jt()},set style(Y){Jt(Y),y()},get class(){return Oo()},set class(Y){Oo(Y),y()}});return s(),sw}ie(Pc,{id:{},nodes:{},edges:{},fitView:{},fitViewOptions:{},minZoom:{},maxZoom:{},initialViewport:{},viewport:{},nodeTypes:{},edgeTypes:{},selectionKey:{},selectionMode:{},panActivationKey:{},multiSelectionKey:{},zoomActivationKey:{},nodesDraggable:{},nodesConnectable:{},nodeDragThreshold:{},elementsSelectable:{},snapGrid:{},deleteKey:{},connectionRadius:{},connectionLineType:{},connectionMode:{},connectionLineStyle:{},connectionLineContainerStyle:{},onMoveStart:{},onMove:{},onMoveEnd:{},isValidConnection:{},translateExtent:{},nodeExtent:{},onlyRenderVisibleElements:{},panOnScrollMode:{},preventScrolling:{},zoomOnScroll:{},zoomOnDoubleClick:{},zoomOnPinch:{},panOnScroll:{},panOnDrag:{},selectionOnDrag:{},autoPanOnConnect:{},autoPanOnNodeDrag:{},onerror:{},ondelete:{},onedgecreate:{},attributionPosition:{},proOptions:{},defaultEdgeOptions:{},width:{},height:{},colorMode:{},onconnect:{},onconnectstart:{},onconnectend:{},onbeforedelete:{},oninit:{},nodeOrigin:{},paneClickDistance:{},nodeClickDistance:{},defaultMarkerColor:{},style:{},class:{}},["connectionLine","default"],[],!0);function Nc(e,t){ue(t,!1);let n=w(t,"initialNodes",12,void 0),r=w(t,"initialEdges",12,void 0),o=w(t,"initialWidth",12,void 0),i=w(t,"initialHeight",12,void 0),s=w(t,"fitView",12,void 0),a=w(t,"nodeOrigin",12,void 0);const l=lc({nodes:n(),edges:r(),width:o(),height:i(),nodeOrigin:a(),fitView:s()});Sr(Ri,{getStore:()=>l}),$s(()=>{l.reset()}),He();var u=tt(),c=xe(u);return wt(c,t,"default",{}),L(e,u),ce({get initialNodes(){return n()},set initialNodes(f){n(f),y()},get initialEdges(){return r()},set initialEdges(f){r(f),y()},get initialWidth(){return o()},set initialWidth(f){o(f),y()},get initialHeight(){return i()},set initialHeight(f){i(f),y()},get fitView(){return s()},set fitView(f){s(f),y()},get nodeOrigin(){return a()},set nodeOrigin(f){a(f),y()}})}ie(Nc,{initialNodes:{},initialEdges:{},initialWidth:{},initialHeight:{},fitView:{},nodeOrigin:{}},["default"],[],!0);var A2=ne("<button><!></button>");function Po(e,t){const n=it(t,["children","$$slots","$$events","$$legacy","$$host"]),r=it(n,["class","bgColor","bgColorHover","color","colorHover","borderColor"]);ue(t,!1);let o=w(t,"class",12,void 0),i=w(t,"bgColor",12,void 0),s=w(t,"bgColorHover",12,void 0),a=w(t,"color",12,void 0),l=w(t,"colorHover",12,void 0),u=w(t,"borderColor",12,void 0);He();var c=A2();let f;var d=X(c);return wt(d,t,"default",{class:"button-svg"}),Z(c),Ee(g=>{f=nn(c,f,{type:"button",class:g,...r}),at(c,"--xy-controls-button-background-color-props",i()),at(c,"--xy-controls-button-background-color-hover-props",s()),at(c,"--xy-controls-button-color-props",a()),at(c,"--xy-controls-button-color-hover-props",l()),at(c,"--xy-controls-button-border-color-props",u())},[()=>Et(["svelte-flow__controls-button",o()])],ve),Ze("click",c,function(g){De.call(this,t,g)}),L(e,c),ce({get class(){return o()},set class(g){o(g),y()},get bgColor(){return i()},set bgColor(g){i(g),y()},get bgColorHover(){return s()},set bgColorHover(g){s(g),y()},get color(){return a()},set color(g){a(g),y()},get colorHover(){return l()},set colorHover(g){l(g),y()},get borderColor(){return u()},set borderColor(g){u(g),y()}})}ie(Po,{class:{},bgColor:{},bgColorHover:{},color:{},colorHover:{},borderColor:{}},["default"],[],!0);var L2=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"></path></svg>');function Tc(e){var t=L2();L(e,t)}ie(Tc,{},[],[],!0);var O2=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5"><path d="M0 0h32v4.2H0z"></path></svg>');function Mc(e){var t=O2();L(e,t)}ie(Mc,{},[],[],!0);var I2=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30"><path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"></path></svg>');function Hc(e){var t=I2();L(e,t)}ie(Hc,{},[],[],!0);var z2=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32"><path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z"></path></svg>');function Vc(e){var t=z2();L(e,t)}ie(Vc,{},[],[],!0);var R2=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32"><path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"></path></svg>');function Dc(e){var t=R2();L(e,t)}ie(Dc,{},[],[],!0);var B2=ne("<!> <!>",1),Y2=ne("<!> <!> <!> <!> <!> <!>",1);function Ac(e,t){ue(t,!1);const[n,r]=nt(),o=()=>Q(H,"$nodesDraggable",n),i=()=>Q(I,"$nodesConnectable",n),s=()=>Q(B,"$elementsSelectable",n),a=()=>Q(M,"$viewport",n),l=()=>Q(k,"$minZoom",n),u=()=>Q(P,"$maxZoom",n),c=re(),f=re(),d=re(),g=re();let p=w(t,"position",12,"bottom-left"),x=w(t,"showZoom",12,!0),C=w(t,"showFitView",12,!0),$=w(t,"showLock",12,!0),m=w(t,"buttonBgColor",12,void 0),_=w(t,"buttonBgColorHover",12,void 0),v=w(t,"buttonColor",12,void 0),b=w(t,"buttonColorHover",12,void 0),N=w(t,"buttonBorderColor",12,void 0),E=w(t,"ariaLabel",12,void 0),T=w(t,"style",12,void 0),D=w(t,"orientation",12,"vertical"),V=w(t,"fitViewOptions",12,void 0),A=w(t,"class",12,"");const{zoomIn:O,zoomOut:R,fitView:S,viewport:M,minZoom:k,maxZoom:P,nodesDraggable:H,nodesConnectable:I,elementsSelectable:B}=Ue(),F={bgColor:m(),bgColorHover:_(),color:v(),colorHover:b(),borderColor:N()},K=()=>{O()},se=()=>{R()},ee=()=>{S(V())},W=()=>{U(c,!h(c)),H.set(h(c)),I.set(h(c)),B.set(h(c))};ge(()=>(o(),i(),s()),()=>{U(c,o()||i()||s())}),ge(()=>(a(),l()),()=>{U(f,a().zoom<=l())}),ge(()=>(a(),u()),()=>{U(d,a().zoom>=u())}),ge(()=>j(D()),()=>{U(g,D()==="horizontal"?"horizontal":"vertical")}),vt(),He();const fe=ve(()=>Et(["svelte-flow__controls",h(g),A()])),me=ve(()=>E()??"Svelte Flow controls");So(e,{get class(){return h(fe)},get position(){return p()},"data-testid":"svelte-flow__controls",get"aria-label"(){return h(me)},get style(){return T()},children:(he,ze)=>{var G=Y2(),ae=xe(G);wt(ae,t,"before",{});var Me=z(ae,2);{var Le=pe=>{var be=B2(),Ie=xe(be);Po(Ie,ft({class:"svelte-flow__controls-zoomin",title:"zoom in","aria-label":"zoom in",get disabled(){return h(d)}},F,{$$events:{click:K},children:(dt,J)=>{Tc(dt)},$$slots:{default:!0}}));var ht=z(Ie,2);Po(ht,ft({class:"svelte-flow__controls-zoomout",title:"zoom out","aria-label":"zoom out",get disabled(){return h(f)}},F,{$$events:{click:se},children:(dt,J)=>{Mc(dt)},$$slots:{default:!0}})),L(pe,be)};ke(Me,pe=>{x()&&pe(Le)})}var Xe=z(Me,2);{var te=pe=>{Po(pe,ft({class:"svelte-flow__controls-fitview",title:"fit view","aria-label":"fit view"},F,{$$events:{click:ee},children:(be,Ie)=>{Hc(be)},$$slots:{default:!0}}))};ke(Xe,pe=>{C()&&pe(te)})}var Fe=z(Xe,2);{var Oe=pe=>{Po(pe,ft({class:"svelte-flow__controls-interactive",title:"toggle interactivity","aria-label":"toggle interactivity"},F,{$$events:{click:W},children:(be,Ie)=>{var ht=tt(),dt=xe(ht);{var J=le=>{Dc(le)},Re=le=>{Vc(le)};ke(dt,le=>{h(c)?le(J):le(Re,!1)})}L(be,ht)},$$slots:{default:!0}}))};ke(Fe,pe=>{$()&&pe(Oe)})}var rt=z(Fe,2);wt(rt,t,"default",{});var oe=z(rt,2);wt(oe,t,"after",{}),L(he,G)},$$slots:{default:!0}});var Ce=ce({get position(){return p()},set position(he){p(he),y()},get showZoom(){return x()},set showZoom(he){x(he),y()},get showFitView(){return C()},set showFitView(he){C(he),y()},get showLock(){return $()},set showLock(he){$(he),y()},get buttonBgColor(){return m()},set buttonBgColor(he){m(he),y()},get buttonBgColorHover(){return _()},set buttonBgColorHover(he){_(he),y()},get buttonColor(){return v()},set buttonColor(he){v(he),y()},get buttonColorHover(){return b()},set buttonColorHover(he){b(he),y()},get buttonBorderColor(){return N()},set buttonBorderColor(he){N(he),y()},get ariaLabel(){return E()},set ariaLabel(he){E(he),y()},get style(){return T()},set style(he){T(he),y()},get orientation(){return D()},set orientation(he){D(he),y()},get fitViewOptions(){return V()},set fitViewOptions(he){V(he),y()},get class(){return A()},set class(he){A(he),y()}});return r(),Ce}ie(Ac,{position:{},showZoom:{},showFitView:{},showLock:{},buttonBgColor:{},buttonBgColorHover:{},buttonColor:{},buttonColorHover:{},buttonBorderColor:{},ariaLabel:{},style:{},orientation:{},fitViewOptions:{},class:{}},["before","default","after"],[],!0);var tr;(function(e){e.Lines="lines",e.Dots="dots",e.Cross="cross"})(tr||(tr={}));var Z2=_e("<circle></circle>");function Lc(e,t){ue(t,!1);let n=w(t,"radius",12,5),r=w(t,"class",12,"");He();var o=Z2();return Ee(i=>{de(o,"cx",n()),de(o,"cy",n()),de(o,"r",n()),$t(o,0,wn(i))},[()=>Et(["svelte-flow__background-pattern","dots",r()])],ve),L(e,o),ce({get radius(){return n()},set radius(i){n(i),y()},get class(){return r()},set class(i){r(i),y()}})}ie(Lc,{radius:{},class:{}},[],[],!0);var X2=_e("<path></path>");function Oc(e,t){ue(t,!1);let n=w(t,"lineWidth",12,1),r=w(t,"dimensions",12),o=w(t,"variant",12,void 0),i=w(t,"class",12,"");He();var s=X2();return Ee(a=>{de(s,"stroke-width",n()),de(s,"d",`M${r()[0]/2} 0 V${r()[1]} M0 ${r()[1]/2} H${r()[0]}`),$t(s,0,wn(a))},[()=>Et(["svelte-flow__background-pattern",o(),i()])],ve),L(e,s),ce({get lineWidth(){return n()},set lineWidth(a){n(a),y()},get dimensions(){return r()},set dimensions(a){r(a),y()},get variant(){return o()},set variant(a){o(a),y()},get class(){return i()},set class(a){i(a),y()}})}ie(Oc,{lineWidth:{},dimensions:{},variant:{},class:{}},[],[],!0);const F2={[tr.Dots]:1,[tr.Lines]:1,[tr.Cross]:6};var W2=_e('<svg data-testid="svelte-flow__background"><pattern patternUnits="userSpaceOnUse"><!></pattern><rect x="0" y="0" width="100%" height="100%"></rect></svg>');const K2={hash:"svelte-1r7pe8d",code:".svelte-flow__background.svelte-1r7pe8d {position:absolute;width:100%;height:100%;top:0;left:0;}"};function Ic(e,t){ue(t,!1),et(e,K2);const[n,r]=nt(),o=()=>Q(b,"$flowId",n),i=()=>Q(v,"$viewport",n),s=re(),a=re(),l=re(),u=re(),c=re();let f=w(t,"id",12,void 0),d=w(t,"variant",28,()=>tr.Dots),g=w(t,"gap",12,20),p=w(t,"size",12,1),x=w(t,"lineWidth",12,1),C=w(t,"bgColor",12,void 0),$=w(t,"patternColor",12,void 0),m=w(t,"patternClass",12,void 0),_=w(t,"class",12,"");const{viewport:v,flowId:b}=Ue(),N=p()||F2[d()],E=d()===tr.Dots,T=d()===tr.Cross,D=Array.isArray(g())?g():[g(),g()];ge(()=>(o(),j(f())),()=>{U(s,`background-pattern-${o()}-${f()?f():""}`)}),ge(()=>i(),()=>{U(a,[D[0]*i().zoom||1,D[1]*i().zoom||1])}),ge(()=>i(),()=>{U(l,N*i().zoom)}),ge(()=>(h(l),h(a)),()=>{U(u,T?[h(l),h(l)]:h(a))}),ge(()=>(h(l),h(u)),()=>{U(c,E?[h(l)/2,h(l)/2]:[h(u)[0]/2,h(u)[1]/2])}),vt(),He();var V=W2(),A=X(V),O=X(A);{var R=P=>{const H=ve(()=>h(l)/2);Lc(P,{get radius(){return h(H)},get class(){return m()}})},S=P=>{Oc(P,{get dimensions(){return h(u)},get variant(){return d()},get lineWidth(){return x()},get class(){return m()}})};ke(O,P=>{E?P(R):P(S,!1)})}Z(A);var M=z(A);Z(V),Ee(P=>{$t(V,0,wn(P),"svelte-1r7pe8d"),at(V,"--xy-background-color-props",C()),at(V,"--xy-background-pattern-color-props",$()),de(A,"id",h(s)),de(A,"x",i().x%h(a)[0]),de(A,"y",i().y%h(a)[1]),de(A,"width",h(a)[0]),de(A,"height",h(a)[1]),de(A,"patternTransform",`translate(-${h(c)[0]},-${h(c)[1]})`),de(M,"fill",`url(#${h(s)})`)},[()=>Et(["svelte-flow__background",_()])],ve),L(e,V);var k=ce({get id(){return f()},set id(P){f(P),y()},get variant(){return d()},set variant(P){d(P),y()},get gap(){return g()},set gap(P){g(P),y()},get size(){return p()},set size(P){p(P),y()},get lineWidth(){return x()},set lineWidth(P){x(P),y()},get bgColor(){return C()},set bgColor(P){C(P),y()},get patternColor(){return $()},set patternColor(P){$(P),y()},get patternClass(){return m()},set patternClass(P){m(P),y()},get class(){return _()},set class(P){_(P),y()}});return r(),k}ie(Ic,{id:{},variant:{},gap:{},size:{},lineWidth:{},bgColor:{},patternColor:{},patternClass:{},class:{}},[],[],!0);var q2=_e("<rect></rect>");function zc(e,t){ue(t,!1);let n=w(t,"x",12),r=w(t,"y",12),o=w(t,"width",12,0),i=w(t,"height",12,0),s=w(t,"borderRadius",12,5),a=w(t,"color",12,void 0),l=w(t,"shapeRendering",12),u=w(t,"strokeColor",12,void 0),c=w(t,"strokeWidth",12,2),f=w(t,"selected",12,!1),d=w(t,"class",12,"");He();var g=q2();let p;return Ee(x=>{p=$t(g,0,wn(x),null,p,{selected:f()}),de(g,"x",n()),de(g,"y",r()),de(g,"rx",s()),de(g,"ry",s()),de(g,"width",o()),de(g,"height",i()),de(g,"style",`${a()?`fill: ${a()};`:""}${u()?`stroke: ${u()};`:""}${c()?`stroke-width: ${c()};`:""}`),de(g,"shape-rendering",l())},[()=>Et(["svelte-flow__minimap-node",d()])],ve),L(e,g),ce({get x(){return n()},set x(x){n(x),y()},get y(){return r()},set y(x){r(x),y()},get width(){return o()},set width(x){o(x),y()},get height(){return i()},set height(x){i(x),y()},get borderRadius(){return s()},set borderRadius(x){s(x),y()},get color(){return a()},set color(x){a(x),y()},get shapeRendering(){return l()},set shapeRendering(x){l(x),y()},get strokeColor(){return u()},set strokeColor(x){u(x),y()},get strokeWidth(){return c()},set strokeWidth(x){c(x),y()},get selected(){return f()},set selected(x){f(x),y()},get class(){return d()},set class(x){d(x),y()}})}ie(zc,{x:{},y:{},width:{},height:{},borderRadius:{},color:{},shapeRendering:{},strokeColor:{},strokeWidth:{},selected:{},class:{}},[],[],!0);function ca(e,t){const n=H0({domNode:e,panZoom:t.panZoom,getTransform:()=>{const o=q(t.viewport);return[o.x,o.y,o.zoom]},getViewScale:t.getViewScale});function r(o){n.update({translateExtent:o.translateExtent,width:o.width,height:o.height,inversePan:o.inversePan,zoomStep:o.zoomStep,pannable:o.pannable,zoomable:o.zoomable})}return{update:r,destroy(){n.destroy()}}}const da=e=>e instanceof Function?e:()=>e;var G2=_e("<title> </title>"),U2=_e('<svg class="svelte-flow__minimap-svg" role="img"><!><!><path class="svelte-flow__minimap-mask" fill-rule="evenodd" pointer-events="none"></path></svg>');function Rc(e,t){ue(t,!1);const[n,r]=nt(),o=()=>Q(Xe,"$flowId",n),i=()=>Q(ae,"$viewport",n),s=()=>Q(Me,"$containerWidth",n),a=()=>Q(Le,"$containerHeight",n),l=()=>Q(G,"$nodeLookup",n),u=()=>Q(ze,"$nodes",n),c=()=>Q(te,"$panZoom",n),f=()=>Q(Fe,"$translateExtent",n),d=re(),g=re(),p=re(),x=re(),C=re(),$=re(),m=re(),_=re(),v=re(),b=re(),N=re(),E=re(),T=re();let D=w(t,"position",12,"bottom-right"),V=w(t,"ariaLabel",12,"Mini map"),A=w(t,"nodeStrokeColor",12,"transparent"),O=w(t,"nodeColor",12,void 0),R=w(t,"nodeClass",12,""),S=w(t,"nodeBorderRadius",12,5),M=w(t,"nodeStrokeWidth",12,2),k=w(t,"bgColor",12,void 0),P=w(t,"maskColor",12,void 0),H=w(t,"maskStrokeColor",12,void 0),I=w(t,"maskStrokeWidth",12,void 0),B=w(t,"width",12,void 0),F=w(t,"height",12,void 0),K=w(t,"pannable",12,!0),se=w(t,"zoomable",12,!0),ee=w(t,"inversePan",12,void 0),W=w(t,"zoomStep",12,void 0),fe=w(t,"style",12,""),me=w(t,"class",12,"");const Ce=200,he=150,{nodes:ze,nodeLookup:G,viewport:ae,width:Me,height:Le,flowId:Xe,panZoom:te,translateExtent:Fe}=Ue(),Oe=O()===void 0?void 0:da(O()),rt=da(A()),oe=da(R()),pe=typeof window>"u"||window.chrome?"crispEdges":"geometricPrecision",be=`svelte-flow__minimap-desc-${o()}`;let Ie=re(h(d));const ht=()=>h($);ge(()=>(i(),s(),a()),()=>{U(d,{x:-i().x/i().zoom,y:-i().y/i().zoom,width:s()/i().zoom,height:a()/i().zoom})}),ge(()=>(l(),h(d),u()),()=>{U(Ie,l().size>0?Cu(bo(l()),h(d)):h(d)),u()}),ge(()=>j(B()),()=>{U(g,B()??Ce)}),ge(()=>j(F()),()=>{U(p,F()??he)}),ge(()=>(h(Ie),h(g)),()=>{U(x,h(Ie).width/h(g))}),ge(()=>(h(Ie),h(p)),()=>{U(C,h(Ie).height/h(p))}),ge(()=>(h(x),h(C)),()=>{U($,Math.max(h(x),h(C)))}),ge(()=>(h($),h(g)),()=>{U(m,h($)*h(g))}),ge(()=>(h($),h(p)),()=>{U(_,h($)*h(p))}),ge(()=>h($),()=>{U(v,5*h($))}),ge(()=>(h(Ie),h(m),h(v)),()=>{U(b,h(Ie).x-(h(m)-h(Ie).width)/2-h(v))}),ge(()=>(h(Ie),h(_),h(v)),()=>{U(N,h(Ie).y-(h(_)-h(Ie).height)/2-h(v))}),ge(()=>(h(m),h(v)),()=>{U(E,h(m)+h(v)*2)}),ge(()=>(h(_),h(v)),()=>{U(T,h(_)+h(v)*2)}),vt(),He();const dt=ve(()=>fe()+(k()?`;--xy-minimap-background-color-props:${k()}`:"")),J=ve(()=>Et(["svelte-flow__minimap",me()]));So(e,{get position(){return D()},get style(){return h(dt)},get class(){return h(J)},"data-testid":"svelte-flow__minimap",children:(le,$n)=>{var fn=tt(),En=xe(fn);{var Te=st=>{var ye=U2();de(ye,"aria-labelledby",be);var lt=X(ye);{var ct=Wt=>{var Ot=G2();de(Ot,"id",be);var Sn=X(Ot,!0);Z(Ot),Ee(()=>Bt(Sn,V())),L(Wt,Ot)};ke(lt,Wt=>{V()&&Wt(ct)})}var Jt=z(lt);Yt(Jt,1,u,Wt=>Wt.id,(Wt,Ot)=>{var Sn=tt();const gn=ve(()=>l().get(h(Ot).id));var mt=xe(Sn);{var xa=yr=>{const hn=ve(()=>Qn(h(gn))),ji=ve(()=>Oe==null?void 0:Oe(h(gn))),Ji=ve(()=>rt(h(gn))),Qi=ve(()=>oe(h(gn)));zc(yr,ft({get x(){return h(gn).internals.positionAbsolute.x},get y(){return h(gn).internals.positionAbsolute.y}},()=>h(hn),{get selected(){return h(gn).selected},get color(){return h(ji)},get borderRadius(){return S()},get strokeColor(){return h(Ji)},get strokeWidth(){return M()},shapeRendering:pe,get class(){return h(Qi)}}))};ke(mt,yr=>{h(gn)&&Eu(h(gn))&&yr(xa)})}L(Wt,Sn)});var Oo=z(Jt);Z(ye),_t(ye,(Wt,Ot)=>ca==null?void 0:ca(Wt,Ot),()=>({panZoom:c(),viewport:ae,getViewScale:ht,translateExtent:f(),width:s(),height:a(),inversePan:ee(),zoomStep:W(),pannable:K(),zoomable:se()})),Ee(()=>{de(ye,"width",h(g)),de(ye,"height",h(p)),de(ye,"viewBox",`${h(b)??""} ${h(N)??""} ${h(E)??""} ${h(T)??""}`),at(ye,"--xy-minimap-mask-background-color-props",P()),at(ye,"--xy-minimap-mask-stroke-color-props",H()),at(ye,"--xy-minimap-mask-stroke-width-props",I()?I()*h($):void 0),de(Oo,"d",`M${h(b)-h(v)},${h(N)-h(v)}h${h(E)+h(v)*2}v${h(T)+h(v)*2}h${-h(E)-h(v)*2}z
+      M${h(d).x??""},${h(d).y??""}h${h(d).width??""}v${h(d).height??""}h${-h(d).width}z`)}),L(st,ye)};ke(En,st=>{c()&&st(Te)})}L(le,fn)},$$slots:{default:!0}});var Re=ce({get position(){return D()},set position(le){D(le),y()},get ariaLabel(){return V()},set ariaLabel(le){V(le),y()},get nodeStrokeColor(){return A()},set nodeStrokeColor(le){A(le),y()},get nodeColor(){return O()},set nodeColor(le){O(le),y()},get nodeClass(){return R()},set nodeClass(le){R(le),y()},get nodeBorderRadius(){return S()},set nodeBorderRadius(le){S(le),y()},get nodeStrokeWidth(){return M()},set nodeStrokeWidth(le){M(le),y()},get bgColor(){return k()},set bgColor(le){k(le),y()},get maskColor(){return P()},set maskColor(le){P(le),y()},get maskStrokeColor(){return H()},set maskStrokeColor(le){H(le),y()},get maskStrokeWidth(){return I()},set maskStrokeWidth(le){I(le),y()},get width(){return B()},set width(le){B(le),y()},get height(){return F()},set height(le){F(le),y()},get pannable(){return K()},set pannable(le){K(le),y()},get zoomable(){return se()},set zoomable(le){se(le),y()},get inversePan(){return ee()},set inversePan(le){ee(le),y()},get zoomStep(){return W()},set zoomStep(le){W(le),y()},get style(){return fe()},set style(le){fe(le),y()},get class(){return me()},set class(le){me(le),y()}});return r(),Re}ie(Rc,{position:{},ariaLabel:{},nodeStrokeColor:{},nodeColor:{},nodeClass:{},nodeBorderRadius:{},nodeStrokeWidth:{},bgColor:{},maskColor:{},maskStrokeColor:{},maskStrokeWidth:{},width:{},height:{},pannable:{},zoomable:{},inversePan:{},zoomStep:{},style:{},class:{}},[],[],!0);const Bc=e=>Uv(e);function Lt(){const{zoomIn:e,zoomOut:t,fitView:n,onbeforedelete:r,snapGrid:o,viewport:i,width:s,height:a,minZoom:l,maxZoom:u,panZoom:c,nodes:f,edges:d,domNode:g,nodeLookup:p,nodeOrigin:x,edgeLookup:C,connectionLookup:$}=Ue(),m=b=>{var V,A;const N=q(p),E=Bc(b)?b:N.get(b.id),T=E.parentId?e0(E.position,E.measured,E.parentId,N,q(x)):E.position,D={...E,position:T,width:((V=E.measured)==null?void 0:V.width)??E.width,height:((A=E.measured)==null?void 0:A.height)??E.height};return Or(D)},_=(b,N,E={replace:!1})=>{var V;const T=(V=q(p).get(b))==null?void 0:V.internals.userNode;if(!T)return;const D=typeof N=="function"?N(T):N;E.replace?f.update(A=>A.map(O=>O.id===b?Bc(D)?D:{...O,...D}:O)):(Object.assign(T,D),f.update(A=>A))},v=b=>q(p).get(b);return{zoomIn:e,zoomOut:t,getInternalNode:v,getNode:b=>{var N;return(N=v(b))==null?void 0:N.internals.userNode},getNodes:b=>b===void 0?q(f):Yc(q(p),b),getEdge:b=>q(C).get(b),getEdges:b=>b===void 0?q(d):Yc(q(C),b),setZoom:(b,N)=>{const E=q(c);return E?E.scaleTo(b,{duration:N==null?void 0:N.duration}):Promise.resolve(!1)},getZoom:()=>q(i).zoom,setViewport:async(b,N)=>{const E=q(i),T=q(c);return T?(await T.setViewport({x:b.x??E.x,y:b.y??E.y,zoom:b.zoom??E.zoom},{duration:N==null?void 0:N.duration}),Promise.resolve(!0)):Promise.resolve(!1)},getViewport:()=>q(i),setCenter:async(b,N,E)=>{const T=typeof(E==null?void 0:E.zoom)<"u"?E.zoom:q(u),D=q(c);return D?(await D.setViewport({x:q(s)/2-b*T,y:q(a)/2-N*T,zoom:T},{duration:E==null?void 0:E.duration}),Promise.resolve(!0)):Promise.resolve(!1)},fitView:n,fitBounds:async(b,N)=>{const E=q(c);if(!E)return Promise.resolve(!1);const T=js(b,q(s),q(a),q(l),q(u),(N==null?void 0:N.padding)??.1);return await E.setViewport(T,{duration:N==null?void 0:N.duration}),Promise.resolve(!0)},getIntersectingNodes:(b,N=!0,E)=>{const T=ku(b),D=T?b:m(b);return D?(E||q(f)).filter(V=>{const A=q(p).get(V.id);if(!A||!T&&V.id===b.id)return!1;const O=Or(A),R=Co(O,D);return N&&R>0||R>=D.width*D.height}):[]},isNodeIntersecting:(b,N,E=!0)=>{const D=ku(b)?b:m(b);if(!D)return!1;const V=Co(D,N);return E&&V>0||V>=D.width*D.height},deleteElements:async({nodes:b=[],edges:N=[]})=>{const{nodes:E,edges:T}=await wu({nodesToRemove:b,edgesToRemove:N,nodes:q(f),edges:q(d),onBeforeDelete:q(r)});return E&&f.update(D=>D.filter(V=>!E.some(({id:A})=>A===V.id))),T&&d.update(D=>D.filter(V=>!T.some(({id:A})=>A===V.id))),{deletedNodes:E,deletedEdges:T}},screenToFlowPosition:(b,N={snapToGrid:!0})=>{const E=q(g);if(!E)return b;const T=N.snapToGrid?q(o):!1,{x:D,y:V,zoom:A}=q(i),{x:O,y:R}=E.getBoundingClientRect(),S={x:b.x-O,y:b.y-R};return ko(S,[D,V,A],T!==null,T||[1,1])},flowToScreenPosition:b=>{const N=q(g);if(!N)return b;const{x:E,y:T,zoom:D}=q(i),{x:V,y:A}=N.getBoundingClientRect(),O=$u(b,[E,T,D]);return{x:O.x+V,y:O.y+A}},toObject:()=>({nodes:q(f).map(b=>({...b,position:{...b.position},data:{...b.data}})),edges:q(d).map(b=>({...b})),viewport:{...q(i)}}),updateNode:_,updateNodeData:(b,N,E)=>{var V;const T=(V=q(p).get(b))==null?void 0:V.internals.userNode;if(!T)return;const D=typeof N=="function"?N(T):N;T.data=E!=null&&E.replace?D:{...T.data,...D},f.update(A=>A)},getNodesBounds:b=>{const N=q(p),E=q(x);return jv(b,{nodeLookup:N,nodeOrigin:E})},getHandleConnections:({type:b,id:N,nodeId:E})=>{var T;return Array.from(((T=q($).get(`${E}-${b}-${N??null}`))==null?void 0:T.values())??[])},viewport:i}}function Yc(e,t){var r;const n=[];for(const o of t){const i=e.get(o);if(i){const s="internals"in i?(r=i.internals)==null?void 0:r.userNode:i;n.push(s)}}return n}var j2=ne('<div class="svelte-flow__node-toolbar"><!></div>');function Zc(e,t){ue(t,!1);const[n,r]=nt(),o=()=>Q(_,"$nodes",n),i=()=>Q(m,"$nodeLookup",n),s=()=>Q($,"$viewport",n),a=()=>Q(C,"$domNode",n),l=re(),u=re(),c=re();let f=w(t,"nodeId",12,void 0),d=w(t,"position",12,void 0),g=w(t,"align",12,void 0),p=w(t,"offset",12,void 0),x=w(t,"isVisible",12,void 0);const{domNode:C,viewport:$,nodeLookup:m,nodes:_}=Ue(),{getNodesBounds:v}=Lt(),b=ur("svelteflow__node_id");let N=re(),E=re([]),T=p()!==void 0?p():10,D=d()!==void 0?d():$e.Top,V=g()!==void 0?g():"center";ge(()=>(o(),j(f()),i()),()=>{o();const M=Array.isArray(f())?f():[f()||b];U(E,M.reduce((k,P)=>{const H=i().get(P);return H&&k.push(H),k},[]))}),ge(()=>(h(E),s()),()=>{const M=v(h(E));M&&U(N,v0(M,s(),D,T,V))}),ge(()=>h(E),()=>{U(l,h(E).length===0?1:Math.max(...h(E).map(M=>(M.internals.z||5)+1)))}),ge(()=>o(),()=>{U(u,o().filter(M=>M.selected).length)}),ge(()=>(j(x()),h(E),h(u)),()=>{U(c,typeof x()=="boolean"?x():h(E).length===1&&h(E)[0].selected&&h(u)===1)}),vt(),He();var A=tt(),O=xe(A);{var R=M=>{var k=j2(),P=X(k);wt(P,t,"default",{}),Z(k),_t(k,(H,I)=>Rr==null?void 0:Rr(H,I),()=>({domNode:a()})),Ee(H=>{de(k,"data-id",H),at(k,"position","absolute"),at(k,"transform",h(N)),at(k,"z-index",h(l))},[()=>h(E).reduce((H,I)=>`${H}${I.id} `,"").trim()],ve),L(M,k)};ke(O,M=>{a()&&h(c)&&h(E)&&M(R)})}L(e,A);var S=ce({get nodeId(){return f()},set nodeId(M){f(M),y()},get position(){return d()},set position(M){d(M),y()},get align(){return g()},set align(M){g(M),y()},get offset(){return p()},set offset(M){p(M),y()},get isVisible(){return x()},set isVisible(M){x(M),y()}});return r(),S}ie(Zc,{nodeId:{},position:{},align:{},offset:{},isVisible:{}},["default"],[],!0);function pr(e){const{nodes:t,nodeLookup:n}=Ue();let r=[],o=!0;return Un([t,n],([,i],s)=>{var c;const a=[],l=Array.isArray(e),u=l?e:[e];for(const f of u){const d=(c=i.get(f))==null?void 0:c.internals.userNode;d&&a.push({id:d.id,type:d.type,data:d.data})}(!C0(a,r)||o)&&(r=a,s(l?a:a[0]??null),o=!1)})}const Xc="tinyflow-component";class J2{constructor(t){Nt(this,"options");Nt(this,"rootEl");Nt(this,"svelteFlowInstance");if(typeof t.element!="string"&&!(t.element instanceof Element))throw new Error("element must be a string or Element");this._setOptions(t),this._init()}_init(){if(typeof this.options.element=="string"){if(this.rootEl=document.querySelector(this.options.element),!this.rootEl)throw new Error(`element not found by document.querySelector('${this.options.element}')`)}else if(this.options.element instanceof Element)this.rootEl=this.options.element;else throw new Error("element must be a string or Element");const t=document.createElement(Xc);t.style.display="block",t.style.width="100%",t.style.height="100%",t.classList.add("tf-theme-light"),t.options=this.options,t.onInit=n=>{this.svelteFlowInstance=n},this.rootEl.appendChild(t)}_setOptions(t){this.options={...t}}getOptions(){return this.options}getData(){return this.svelteFlowInstance.toObject()}setData(t){this.options.data=t;const n=document.createElement(Xc);n.style.display="block",n.style.width="100%",n.style.height="100%",n.classList.add("tf-theme-light"),n.options=this.options,n.onInit=r=>{this.svelteFlowInstance=r},this.destroy(),this.rootEl.appendChild(n)}destroy(){for(;this.rootEl.firstChild;)this.rootEl.removeChild(this.rootEl.firstChild)}}const Bi=(()=>{const e=we([]),t=we([]),n=we({x:250,y:100,zoom:1});return{nodes:e,edges:t,viewport:n,init:(r,o)=>{e.set(r),t.set(o)},addNode:r=>{e.update(o=>[...o,r])},removeNode:r=>{e.update(o=>o.filter(i=>i.id!==r))},updateNode:(r,o)=>{e.update(i=>i.map(s=>s.id===r?o:s))},updateNodeData:(r,o)=>{e.update(i=>i.map(s=>s.id===r?{...s,data:{...s.data,...o}}:s))},selectNodeOnly:r=>{e.update(o=>o.map(i=>i.id===r?{...i,selected:!0}:{...i,selected:!1}))},addEdge:r=>{t.update(o=>[...o,r])},removeEdge:r=>{t.update(o=>o.filter(i=>i.id!==r))},updateEdge:(r,o)=>{t.update(i=>i.map(s=>s.id===r?o:s))},updateEdgeData:(r,o)=>{t.update(i=>i.map(s=>s.id===r?{...s,data:o}:s))}}})();var Q2=ne("<button><!></button>");function Ge(e,t){ue(t,!0);const n=w(t,"children",7),r=xt(t,["$$slots","$$events","$$legacy","$$host","children"]);var o=Q2();let i;var s=X(o);return cr(s,()=>n()??gt),Z(o),Ee(()=>i=nn(o,i,{type:"button",...r,class:`tf-btn nopan nodrag ${t.class??""}`})),L(e,o),ce({get children(){return n()},set children(a){n(a),y()}})}ie(Ge,{children:{}},[],[],!0);var ep=ne("<input>");function Fc(e,t){ue(t,!0);const n=xt(t,["$$slots","$$events","$$legacy","$$host"]);var r=ep();ao(r);let o;Ee(()=>o=nn(r,o,{type:"checkbox",...n,class:`tf-checkbox nopan nodrag ${t.class??""}`})),L(e,r),ce()}ie(Fc,{},[],[],!0);var tp=ne("<input>");function St(e,t){ue(t,!0);const n=xt(t,["$$slots","$$events","$$legacy","$$host"]);var r=tp();ao(r);let o;Ee(()=>o=nn(r,o,{type:"text",...n,class:`tf-input  nopan nodrag ${t.class??""}`})),L(e,r),ce()}ie(St,{},[],[],!0);var np=ne("<textarea></textarea>");function Pt(e,t){ue(t,!0);const n=xt(t,["$$slots","$$events","$$legacy","$$host"]);var r=np();Wf(r);let o;Ee(()=>o=nn(r,o,{...n,class:`tf-textarea nodrag ${t.class??""}`})),L(e,r),ce()}ie(Pt,{},[],[],!0);var rp=ne('<div role="button"><!></div>'),op=ne("<div></div>");function Wc(e,t){const n=it(t,["children","$$slots","$$events","$$legacy","$$host"]),r=it(n,["items","onChange","activeIndex"]);ue(t,!1);let o=w(t,"items",28,()=>[]),i=w(t,"onChange",12,()=>{}),s=w(t,"activeIndex",12,0);function a(c,f){var d;s(f),(d=i())==null||d(c,f)}He();var l=op();let u;return Yt(l,5,o,oi,(c,f,d)=>{var g=rp();de(g,"tabindex",d),g.__click=()=>a(h(f),d),g.__keydown=$=>{($.key==="Enter"||$.key===" ")&&($.preventDefault(),a(h(f),d))};var p=X(g);{var x=$=>{var m=Ae();Ee(()=>Bt(m,h(f).label)),L($,m)},C=$=>{var m=tt(),_=xe(m);cr(_,()=>h(f).label??gt),L($,m)};ke(p,$=>{typeof h(f).label=="string"?$(x):$(C,!1)})}Z(g),Ee(()=>$t(g,1,`tf-tabs-item ${(d===s()?"active":"")??""}`)),L(c,g)}),Z(l),Ee(()=>u=nn(l,u,{...r,class:`tf-tabs ${r.class??""}`})),L(e,l),ce({get items(){return o()},set items(c){o(c),y()},get onChange(){return i()},set onChange(c){i(c),y()},get activeIndex(){return s()},set activeIndex(c){s(c),y()}})}ri(["click","keydown"]),ie(Wc,{items:{},onChange:{},activeIndex:{}},[],[],!0);var ip=(e,t,n)=>t(h(n)),sp=(e,t,n)=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),t(h(n)))},ap=ne('<span class="tf-collapse-item-title-icon"><!></span>'),lp=ne('<div class="tf-collapse-item-description"><!></div>'),up=ne('<div class="tf-collapse-item-content"><!></div>'),cp=ne('<div class="tf-collapse-item"><div class="tf-collapse-item-title" role="button"><!> <!> <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></span></div> <!> <!></div>'),dp=ne("<div></div>");const fp={hash:"svelte-1jfktzw",code:`\r
+    /* 定义旋转的 CSS 类 */.rotate-90.svelte-1jfktzw {transform:rotate(90deg);transition:transform 0.3s ease;}`};function Kc(e,t){ue(t,!0),et(e,fp);let n=w(t,"items",7),r=w(t,"onChange",7),o=w(t,"activeKeys",31,()=>Ht([]));function i(a){var l;o().includes(a.key)?o(o().filter(u=>u!==a.key)):(o().push(a.key),o(o())),(l=r())==null||l(a,o())}var s=dp();return Yt(s,21,n,oi,(a,l,u)=>{var c=cp(),f=X(c);de(f,"tabindex",u),f.__click=[ip,i,l],f.__keydown=[sp,i,l];var d=X(f);{var g=v=>{var b=ap(),N=X(b);nr(N,{get target(){return h(l).icon}}),Z(b),L(v,b)};ke(d,v=>{h(l).icon&&v(g)})}var p=z(d,2);nr(p,{get target(){return h(l).title}});var x=z(p,2);Z(f);var C=z(f,2);{var $=v=>{var b=lp(),N=X(b);nr(N,{get target(){return h(l).description}}),Z(b),L(v,b)};ke(C,v=>{h(l).description&&v($)})}var m=z(C,2);{var _=v=>{var b=up(),N=X(b);nr(N,{get target(){return h(l).content}}),Z(b),L(v,b)};ke(m,v=>{o().includes(h(l).key)&&v(_)})}Z(c),Ee(v=>$t(x,1,`tf-collapse-item-title-arrow ${v??""}`,"svelte-1jfktzw"),[()=>o().includes(h(l).key)?"rotate-90":""]),L(a,c)}),Z(s),Ee(()=>{de(s,"style",t.style),$t(s,1,`tf-collapse ${t.class??""}`,"svelte-1jfktzw")}),L(e,s),ce({get items(){return n()},set items(a){n(a),y()},get onChange(){return r()},set onChange(a){r(a),y()},get activeKeys(){return o()},set activeKeys(a=[]){o(a),y()}})}ri(["click","keydown"]),ie(Kc,{items:{},onChange:{},activeKeys:{}},[],[],!0);function nr(e,t){ue(t,!0);let n=w(t,"target",7);typeof n()>"u"&&n("undefined");var r=tt(),o=xe(r);{var i=a=>{var l=tt(),u=xe(l);cr(u,()=>n()??gt),L(a,l)},s=a=>{var l=tt(),u=xe(l);dl(u,n),L(a,l)};ke(o,a=>{typeof n()=="function"?a(i):a(s,!1)})}return L(e,r),ce({get target(){return n()},set target(a){n(a),y()}})}ie(nr,{target:{}},[],[],!0);var gp=(e,t,n)=>t(h(n)),hp=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 14L8 10H16L12 14Z"></path></svg>'),vp=ne('<div class="tf-select-content-children"><!></div>'),pp=ne('<button class="tf-select-content-item"><span><!></span> <!></button> <!>',1),mp=ne('<div class="tf-select-content nopan nodrag"><!></div>'),yp=ne("<!> <!>",1),wp=ne('<div class="tf-select-input-placeholder"> </div>'),_p=ne('<button><div class="tf-select-input-value"></div> <div class="tf-select-input-arrow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg></div></button>'),xp=ne("<div><!></div>");function ln(e,t){ue(t,!0);const n=(_,v=gt)=>{var b=tt(),N=xe(b);Yt(N,19,v,(E,T)=>`${T}_${E.value}`,(E,T)=>{var D=pp(),V=xe(D);V.__click=[gp,x,T];var A=X(V),O=X(A);{var R=P=>{var H=hp();L(P,H)};ke(O,P=>{h(T).children&&h(T).children.length>0&&P(R)})}Z(A);var S=z(A,2);nr(S,{get target(){return h(T).label}}),Z(V);var M=z(V,2);{var k=P=>{var H=vp(),I=X(H);n(I,()=>h(T).children),Z(H),L(P,H)};ke(M,P=>{h(T).children&&h(T).children.length>0&&(l()||c().includes(h(T).value))&&P(k)})}L(E,D)}),L(_,b)};let r=w(t,"items",7),o=w(t,"onExpand",7),i=w(t,"onSelect",7),s=w(t,"value",23,()=>[]),a=w(t,"defaultValue",23,()=>[]),l=w(t,"expandAll",7,!0),u=w(t,"multiple",7,!1),c=w(t,"expandValue",23,()=>[]),f=w(t,"placeholder",7),d=xt(t,["$$slots","$$events","$$legacy","$$host","items","onExpand","onSelect","value","defaultValue","expandAll","multiple","expandValue","placeholder"]),g=Ne(()=>{const _=[],v=b=>{for(let N of b)s().length>0?s().includes(N.value)&&_.push(N):a().includes(N.value)&&_.push(N),N.children&&N.children.length>0&&v(N.children)};return v(r()),_}),p;function x(_){var v,b;if(_.children&&_.children.length>0){(v=o())==null||v(_);return}else p==null||p.hide(),(b=i())==null||b(_)}var C=xp();let $;var m=X(C);return An(Do(m,{floating:v=>{var b=mp(),N=X(b);n(N,r),Z(b),L(v,b)},children:(v,b)=>{var N=_p();let E;var T=X(N);Yt(T,23,()=>h(g),(D,V)=>`${V}_${D.value}`,(D,V,A)=>{var O=tt(),R=xe(O);{var S=k=>{var P=tt(),H=xe(P);{var I=B=>{nr(B,{get target(){return h(V).label}})};ke(H,B=>{h(A)===0&&B(I)})}L(k,P)},M=k=>{var P=yp(),H=xe(P);nr(H,{get target(){return h(V).label}});var I=z(H,2);{var B=F=>{var K=Ae(",");L(F,K)};ke(I,F=>{h(A)<h(g).length-1&&F(B)})}L(k,P)};ke(R,k=>{u()?k(M,!1):k(S)})}L(D,O)},D=>{var V=wp(),A=X(V,!0);Z(V),Ee(()=>Bt(A,f())),L(D,V)}),Z(T),Pe(2),Z(N),Ee(()=>E=nn(N,E,{class:"tf-select-input nopan nodrag",...d})),L(v,N)},$$slots:{floating:!0,default:!0}}),v=>p=v,()=>p),Z(C),Ee(()=>$=nn(C,$,{...d,class:`tf-select ${d.class??""}`})),L(e,C),ce({get items(){return r()},set items(_){r(_),y()},get onExpand(){return o()},set onExpand(_){o(_),y()},get onSelect(){return i()},set onSelect(_){i(_),y()},get value(){return s()},set value(_=[]){s(_),y()},get defaultValue(){return a()},set defaultValue(_=[]){a(_),y()},get expandAll(){return l()},set expandAll(_=!0){l(_),y()},get multiple(){return u()},set multiple(_=!1){u(_),y()},get expandValue(){return c()},set expandValue(_=[]){c(_),y()},get placeholder(){return f()},set placeholder(_){f(_),y()}})}ri(["click"]),ie(ln,{items:{},onExpand:{},onSelect:{},value:{},defaultValue:{},expandAll:{},multiple:{},expandValue:{},placeholder:{}},[],[],!0);const No=Math.min,Yr=Math.max,Yi=Math.round,bn=e=>({x:e,y:e}),bp={left:"right",right:"left",bottom:"top",top:"bottom"},Cp={start:"end",end:"start"};function fa(e,t,n){return Yr(e,No(t,n))}function To(e,t){return typeof e=="function"?e(t):e}function mr(e){return e.split("-")[0]}function Mo(e){return e.split("-")[1]}function qc(e){return e==="x"?"y":"x"}function ga(e){return e==="y"?"height":"width"}function Zr(e){return["top","bottom"].includes(mr(e))?"y":"x"}function ha(e){return qc(Zr(e))}function kp(e,t,n){n===void 0&&(n=!1);const r=Mo(e),o=ha(e),i=ga(o);let s=o==="x"?r===(n?"end":"start")?"right":"left":r==="start"?"bottom":"top";return t.reference[i]>t.floating[i]&&(s=Zi(s)),[s,Zi(s)]}function $p(e){const t=Zi(e);return[va(e),t,va(t)]}function va(e){return e.replace(/start|end/g,t=>Cp[t])}function Ep(e,t,n){const r=["left","right"],o=["right","left"],i=["top","bottom"],s=["bottom","top"];switch(e){case"top":case"bottom":return n?t?o:r:t?r:o;case"left":case"right":return t?i:s;default:return[]}}function Sp(e,t,n,r){const o=Mo(e);let i=Ep(mr(e),n==="start",r);return o&&(i=i.map(s=>s+"-"+o),t&&(i=i.concat(i.map(va)))),i}function Zi(e){return e.replace(/left|right|bottom|top/g,t=>bp[t])}function Pp(e){return{top:0,right:0,bottom:0,left:0,...e}}function Gc(e){return typeof e!="number"?Pp(e):{top:e,right:e,bottom:e,left:e}}function Xi(e){const{x:t,y:n,width:r,height:o}=e;return{width:r,height:o,top:n,left:t,right:t+r,bottom:n+o,x:t,y:n}}function Uc(e,t,n){let{reference:r,floating:o}=e;const i=Zr(t),s=ha(t),a=ga(s),l=mr(t),u=i==="y",c=r.x+r.width/2-o.width/2,f=r.y+r.height/2-o.height/2,d=r[a]/2-o[a]/2;let g;switch(l){case"top":g={x:c,y:r.y-o.height};break;case"bottom":g={x:c,y:r.y+r.height};break;case"right":g={x:r.x+r.width,y:f};break;case"left":g={x:r.x-o.width,y:f};break;default:g={x:r.x,y:r.y}}switch(Mo(t)){case"start":g[s]-=d*(n&&u?-1:1);break;case"end":g[s]+=d*(n&&u?-1:1);break}return g}const Np=async(e,t,n)=>{const{placement:r="bottom",strategy:o="absolute",middleware:i=[],platform:s}=n,a=i.filter(Boolean),l=await(s.isRTL==null?void 0:s.isRTL(t));let u=await s.getElementRects({reference:e,floating:t,strategy:o}),{x:c,y:f}=Uc(u,r,l),d=r,g={},p=0;for(let x=0;x<a.length;x++){const{name:C,fn:$}=a[x],{x:m,y:_,data:v,reset:b}=await $({x:c,y:f,initialPlacement:r,placement:d,strategy:o,middlewareData:g,rects:u,platform:s,elements:{reference:e,floating:t}});c=m??c,f=_??f,g={...g,[C]:{...g[C],...v}},b&&p<=50&&(p++,typeof b=="object"&&(b.placement&&(d=b.placement),b.rects&&(u=b.rects===!0?await s.getElementRects({reference:e,floating:t,strategy:o}):b.rects),{x:c,y:f}=Uc(u,d,l)),x=-1)}return{x:c,y:f,placement:d,strategy:o,middlewareData:g}};async function jc(e,t){var n;t===void 0&&(t={});const{x:r,y:o,platform:i,rects:s,elements:a,strategy:l}=e,{boundary:u="clippingAncestors",rootBoundary:c="viewport",elementContext:f="floating",altBoundary:d=!1,padding:g=0}=To(t,e),p=Gc(g),C=a[d?f==="floating"?"reference":"floating":f],$=Xi(await i.getClippingRect({element:(n=await(i.isElement==null?void 0:i.isElement(C)))==null||n?C:C.contextElement||await(i.getDocumentElement==null?void 0:i.getDocumentElement(a.floating)),boundary:u,rootBoundary:c,strategy:l})),m=f==="floating"?{x:r,y:o,width:s.floating.width,height:s.floating.height}:s.reference,_=await(i.getOffsetParent==null?void 0:i.getOffsetParent(a.floating)),v=await(i.isElement==null?void 0:i.isElement(_))?await(i.getScale==null?void 0:i.getScale(_))||{x:1,y:1}:{x:1,y:1},b=Xi(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({elements:a,rect:m,offsetParent:_,strategy:l}):m);return{top:($.top-b.top+p.top)/v.y,bottom:(b.bottom-$.bottom+p.bottom)/v.y,left:($.left-b.left+p.left)/v.x,right:(b.right-$.right+p.right)/v.x}}const Tp=e=>({name:"arrow",options:e,async fn(t){const{x:n,y:r,placement:o,rects:i,platform:s,elements:a,middlewareData:l}=t,{element:u,padding:c=0}=To(e,t)||{};if(u==null)return{};const f=Gc(c),d={x:n,y:r},g=ha(o),p=ga(g),x=await s.getDimensions(u),C=g==="y",$=C?"top":"left",m=C?"bottom":"right",_=C?"clientHeight":"clientWidth",v=i.reference[p]+i.reference[g]-d[g]-i.floating[p],b=d[g]-i.reference[g],N=await(s.getOffsetParent==null?void 0:s.getOffsetParent(u));let E=N?N[_]:0;(!E||!await(s.isElement==null?void 0:s.isElement(N)))&&(E=a.floating[_]||i.floating[p]);const T=v/2-b/2,D=E/2-x[p]/2-1,V=No(f[$],D),A=No(f[m],D),O=V,R=E-x[p]-A,S=E/2-x[p]/2+T,M=fa(O,S,R),k=!l.arrow&&Mo(o)!=null&&S!==M&&i.reference[p]/2-(S<O?V:A)-x[p]/2<0,P=k?S<O?S-O:S-R:0;return{[g]:d[g]+P,data:{[g]:M,centerOffset:S-M-P,...k&&{alignmentOffset:P}},reset:k}}}),Mp=function(e){return e===void 0&&(e={}),{name:"flip",options:e,async fn(t){var n,r;const{placement:o,middlewareData:i,rects:s,initialPlacement:a,platform:l,elements:u}=t,{mainAxis:c=!0,crossAxis:f=!0,fallbackPlacements:d,fallbackStrategy:g="bestFit",fallbackAxisSideDirection:p="none",flipAlignment:x=!0,...C}=To(e,t);if((n=i.arrow)!=null&&n.alignmentOffset)return{};const $=mr(o),m=Zr(a),_=mr(a)===a,v=await(l.isRTL==null?void 0:l.isRTL(u.floating)),b=d||(_||!x?[Zi(a)]:$p(a)),N=p!=="none";!d&&N&&b.push(...Sp(a,x,p,v));const E=[a,...b],T=await jc(t,C),D=[];let V=((r=i.flip)==null?void 0:r.overflows)||[];if(c&&D.push(T[$]),f){const S=kp(o,s,v);D.push(T[S[0]],T[S[1]])}if(V=[...V,{placement:o,overflows:D}],!D.every(S=>S<=0)){var A,O;const S=(((A=i.flip)==null?void 0:A.index)||0)+1,M=E[S];if(M)return{data:{index:S,overflows:V},reset:{placement:M}};let k=(O=V.filter(P=>P.overflows[0]<=0).sort((P,H)=>P.overflows[1]-H.overflows[1])[0])==null?void 0:O.placement;if(!k)switch(g){case"bestFit":{var R;const P=(R=V.filter(H=>{if(N){const I=Zr(H.placement);return I===m||I==="y"}return!0}).map(H=>[H.placement,H.overflows.filter(I=>I>0).reduce((I,B)=>I+B,0)]).sort((H,I)=>H[1]-I[1])[0])==null?void 0:R[0];P&&(k=P);break}case"initialPlacement":k=a;break}if(o!==k)return{reset:{placement:k}}}return{}}}};async function Hp(e,t){const{placement:n,platform:r,elements:o}=e,i=await(r.isRTL==null?void 0:r.isRTL(o.floating)),s=mr(n),a=Mo(n),l=Zr(n)==="y",u=["left","top"].includes(s)?-1:1,c=i&&l?-1:1,f=To(t,e);let{mainAxis:d,crossAxis:g,alignmentAxis:p}=typeof f=="number"?{mainAxis:f,crossAxis:0,alignmentAxis:null}:{mainAxis:f.mainAxis||0,crossAxis:f.crossAxis||0,alignmentAxis:f.alignmentAxis};return a&&typeof p=="number"&&(g=a==="end"?p*-1:p),l?{x:g*c,y:d*u}:{x:d*u,y:g*c}}const Vp=function(e){return e===void 0&&(e=0),{name:"offset",options:e,async fn(t){var n,r;const{x:o,y:i,placement:s,middlewareData:a}=t,l=await Hp(t,e);return s===((n=a.offset)==null?void 0:n.placement)&&(r=a.arrow)!=null&&r.alignmentOffset?{}:{x:o+l.x,y:i+l.y,data:{...l,placement:s}}}}},Dp=function(e){return e===void 0&&(e={}),{name:"shift",options:e,async fn(t){const{x:n,y:r,placement:o}=t,{mainAxis:i=!0,crossAxis:s=!1,limiter:a={fn:C=>{let{x:$,y:m}=C;return{x:$,y:m}}},...l}=To(e,t),u={x:n,y:r},c=await jc(t,l),f=Zr(mr(o)),d=qc(f);let g=u[d],p=u[f];if(i){const C=d==="y"?"top":"left",$=d==="y"?"bottom":"right",m=g+c[C],_=g-c[$];g=fa(m,g,_)}if(s){const C=f==="y"?"top":"left",$=f==="y"?"bottom":"right",m=p+c[C],_=p-c[$];p=fa(m,p,_)}const x=a.fn({...t,[d]:g,[f]:p});return{...x,data:{x:x.x-n,y:x.y-r,enabled:{[d]:i,[f]:s}}}}}};function Fi(){return typeof window<"u"}function Xr(e){return Jc(e)?(e.nodeName||"").toLowerCase():"#document"}function Xt(e){var t;return(e==null||(t=e.ownerDocument)==null?void 0:t.defaultView)||window}function Bn(e){var t;return(t=(Jc(e)?e.ownerDocument:e.document)||window.document)==null?void 0:t.documentElement}function Jc(e){return Fi()?e instanceof Node||e instanceof Xt(e).Node:!1}function un(e){return Fi()?e instanceof Element||e instanceof Xt(e).Element:!1}function Cn(e){return Fi()?e instanceof HTMLElement||e instanceof Xt(e).HTMLElement:!1}function Qc(e){return!Fi()||typeof ShadowRoot>"u"?!1:e instanceof ShadowRoot||e instanceof Xt(e).ShadowRoot}function Ho(e){const{overflow:t,overflowX:n,overflowY:r,display:o}=cn(e);return/auto|scroll|overlay|hidden|clip/.test(t+r+n)&&!["inline","contents"].includes(o)}function Ap(e){return["table","td","th"].includes(Xr(e))}function Wi(e){return[":popover-open",":modal"].some(t=>{try{return e.matches(t)}catch{return!1}})}function pa(e){const t=ma(),n=un(e)?cn(e):e;return["transform","translate","scale","rotate","perspective"].some(r=>n[r]?n[r]!=="none":!1)||(n.containerType?n.containerType!=="normal":!1)||!t&&(n.backdropFilter?n.backdropFilter!=="none":!1)||!t&&(n.filter?n.filter!=="none":!1)||["transform","translate","scale","rotate","perspective","filter"].some(r=>(n.willChange||"").includes(r))||["paint","layout","strict","content"].some(r=>(n.contain||"").includes(r))}function Lp(e){let t=rr(e);for(;Cn(t)&&!Fr(t);){if(pa(t))return t;if(Wi(t))return null;t=rr(t)}return null}function ma(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}function Fr(e){return["html","body","#document"].includes(Xr(e))}function cn(e){return Xt(e).getComputedStyle(e)}function Ki(e){return un(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.scrollX,scrollTop:e.scrollY}}function rr(e){if(Xr(e)==="html")return e;const t=e.assignedSlot||e.parentNode||Qc(e)&&e.host||Bn(e);return Qc(t)?t.host:t}function ed(e){const t=rr(e);return Fr(t)?e.ownerDocument?e.ownerDocument.body:e.body:Cn(t)&&Ho(t)?t:ed(t)}function td(e,t,n){var r;t===void 0&&(t=[]);const o=ed(e),i=o===((r=e.ownerDocument)==null?void 0:r.body),s=Xt(o);return i?(ya(s),t.concat(s,s.visualViewport||[],Ho(o)?o:[],[])):t.concat(o,td(o,[]))}function ya(e){return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null}function nd(e){const t=cn(e);let n=parseFloat(t.width)||0,r=parseFloat(t.height)||0;const o=Cn(e),i=o?e.offsetWidth:n,s=o?e.offsetHeight:r,a=Yi(n)!==i||Yi(r)!==s;return a&&(n=i,r=s),{width:n,height:r,$:a}}function rd(e){return un(e)?e:e.contextElement}function Wr(e){const t=rd(e);if(!Cn(t))return bn(1);const n=t.getBoundingClientRect(),{width:r,height:o,$:i}=nd(t);let s=(i?Yi(n.width):n.width)/r,a=(i?Yi(n.height):n.height)/o;return(!s||!Number.isFinite(s))&&(s=1),(!a||!Number.isFinite(a))&&(a=1),{x:s,y:a}}const Op=bn(0);function od(e){const t=Xt(e);return!ma()||!t.visualViewport?Op:{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}}function Ip(e,t,n){return t===void 0&&(t=!1),!n||t&&n!==Xt(e)?!1:t}function Vo(e,t,n,r){t===void 0&&(t=!1),n===void 0&&(n=!1);const o=e.getBoundingClientRect(),i=rd(e);let s=bn(1);t&&(r?un(r)&&(s=Wr(r)):s=Wr(e));const a=Ip(i,n,r)?od(i):bn(0);let l=(o.left+a.x)/s.x,u=(o.top+a.y)/s.y,c=o.width/s.x,f=o.height/s.y;if(i){const d=Xt(i),g=r&&un(r)?Xt(r):r;let p=d,x=ya(p);for(;x&&r&&g!==p;){const C=Wr(x),$=x.getBoundingClientRect(),m=cn(x),_=$.left+(x.clientLeft+parseFloat(m.paddingLeft))*C.x,v=$.top+(x.clientTop+parseFloat(m.paddingTop))*C.y;l*=C.x,u*=C.y,c*=C.x,f*=C.y,l+=_,u+=v,p=Xt(x),x=ya(p)}}return Xi({width:c,height:f,x:l,y:u})}function wa(e,t){const n=Ki(e).scrollLeft;return t?t.left+n:Vo(Bn(e)).left+n}function id(e,t,n){n===void 0&&(n=!1);const r=e.getBoundingClientRect(),o=r.left+t.scrollLeft-(n?0:wa(e,r)),i=r.top+t.scrollTop;return{x:o,y:i}}function zp(e){let{elements:t,rect:n,offsetParent:r,strategy:o}=e;const i=o==="fixed",s=Bn(r),a=t?Wi(t.floating):!1;if(r===s||a&&i)return n;let l={scrollLeft:0,scrollTop:0},u=bn(1);const c=bn(0),f=Cn(r);if((f||!f&&!i)&&((Xr(r)!=="body"||Ho(s))&&(l=Ki(r)),Cn(r))){const g=Vo(r);u=Wr(r),c.x=g.x+r.clientLeft,c.y=g.y+r.clientTop}const d=s&&!f&&!i?id(s,l,!0):bn(0);return{width:n.width*u.x,height:n.height*u.y,x:n.x*u.x-l.scrollLeft*u.x+c.x+d.x,y:n.y*u.y-l.scrollTop*u.y+c.y+d.y}}function Rp(e){return Array.from(e.getClientRects())}function Bp(e){const t=Bn(e),n=Ki(e),r=e.ownerDocument.body,o=Yr(t.scrollWidth,t.clientWidth,r.scrollWidth,r.clientWidth),i=Yr(t.scrollHeight,t.clientHeight,r.scrollHeight,r.clientHeight);let s=-n.scrollLeft+wa(e);const a=-n.scrollTop;return cn(r).direction==="rtl"&&(s+=Yr(t.clientWidth,r.clientWidth)-o),{width:o,height:i,x:s,y:a}}function Yp(e,t){const n=Xt(e),r=Bn(e),o=n.visualViewport;let i=r.clientWidth,s=r.clientHeight,a=0,l=0;if(o){i=o.width,s=o.height;const u=ma();(!u||u&&t==="fixed")&&(a=o.offsetLeft,l=o.offsetTop)}return{width:i,height:s,x:a,y:l}}function Zp(e,t){const n=Vo(e,!0,t==="fixed"),r=n.top+e.clientTop,o=n.left+e.clientLeft,i=Cn(e)?Wr(e):bn(1),s=e.clientWidth*i.x,a=e.clientHeight*i.y,l=o*i.x,u=r*i.y;return{width:s,height:a,x:l,y:u}}function sd(e,t,n){let r;if(t==="viewport")r=Yp(e,n);else if(t==="document")r=Bp(Bn(e));else if(un(t))r=Zp(t,n);else{const o=od(e);r={x:t.x-o.x,y:t.y-o.y,width:t.width,height:t.height}}return Xi(r)}function ad(e,t){const n=rr(e);return n===t||!un(n)||Fr(n)?!1:cn(n).position==="fixed"||ad(n,t)}function Xp(e,t){const n=t.get(e);if(n)return n;let r=td(e,[]).filter(a=>un(a)&&Xr(a)!=="body"),o=null;const i=cn(e).position==="fixed";let s=i?rr(e):e;for(;un(s)&&!Fr(s);){const a=cn(s),l=pa(s);!l&&a.position==="fixed"&&(o=null),(i?!l&&!o:!l&&a.position==="static"&&!!o&&["absolute","fixed"].includes(o.position)||Ho(s)&&!l&&ad(e,s))?r=r.filter(c=>c!==s):o=a,s=rr(s)}return t.set(e,r),r}function Fp(e){let{element:t,boundary:n,rootBoundary:r,strategy:o}=e;const s=[...n==="clippingAncestors"?Wi(t)?[]:Xp(t,this._c):[].concat(n),r],a=s[0],l=s.reduce((u,c)=>{const f=sd(t,c,o);return u.top=Yr(f.top,u.top),u.right=No(f.right,u.right),u.bottom=No(f.bottom,u.bottom),u.left=Yr(f.left,u.left),u},sd(t,a,o));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}}function Wp(e){const{width:t,height:n}=nd(e);return{width:t,height:n}}function Kp(e,t,n){const r=Cn(t),o=Bn(t),i=n==="fixed",s=Vo(e,!0,i,t);let a={scrollLeft:0,scrollTop:0};const l=bn(0);if(r||!r&&!i)if((Xr(t)!=="body"||Ho(o))&&(a=Ki(t)),r){const d=Vo(t,!0,i,t);l.x=d.x+t.clientLeft,l.y=d.y+t.clientTop}else o&&(l.x=wa(o));const u=o&&!r&&!i?id(o,a):bn(0),c=s.left+a.scrollLeft-l.x-u.x,f=s.top+a.scrollTop-l.y-u.y;return{x:c,y:f,width:s.width,height:s.height}}function _a(e){return cn(e).position==="static"}function ld(e,t){if(!Cn(e)||cn(e).position==="fixed")return null;if(t)return t(e);let n=e.offsetParent;return Bn(e)===n&&(n=n.ownerDocument.body),n}function ud(e,t){const n=Xt(e);if(Wi(e))return n;if(!Cn(e)){let o=rr(e);for(;o&&!Fr(o);){if(un(o)&&!_a(o))return o;o=rr(o)}return n}let r=ld(e,t);for(;r&&Ap(r)&&_a(r);)r=ld(r,t);return r&&Fr(r)&&_a(r)&&!pa(r)?n:r||Lp(e)||n}const qp=async function(e){const t=this.getOffsetParent||ud,n=this.getDimensions,r=await n(e.floating);return{reference:Kp(e.reference,await t(e.floating),e.strategy),floating:{x:0,y:0,width:r.width,height:r.height}}};function Gp(e){return cn(e).direction==="rtl"}const Up={convertOffsetParentRelativeRectToViewportRelativeRect:zp,getDocumentElement:Bn,getClippingRect:Fp,getOffsetParent:ud,getElementRects:qp,getClientRects:Rp,getDimensions:Wp,getScale:Wr,isElement:un,isRTL:Gp},jp=Vp,Jp=Dp,Qp=Mp,em=Tp,tm=(e,t,n)=>{const r=new Map,o={platform:Up,...n},i={...o.platform,_c:r};return Np(e,t,{...o,platform:i})},nm=({trigger:e,triggerEvent:t,floatContent:n,placement:r="bottom",offsetOptions:o,flipOptions:i,shiftOptions:s,interactive:a,showArrow:l})=>{if(typeof e=="string"){const $=document.querySelector(e);if($)e=$;else throw new Error("element not found by document.querySelector('"+e+"')")}let u;if(typeof n=="string"){const $=document.querySelector(n);if($)u=$;else throw new Error("element not found by document.querySelector('"+n+"')")}else u=n;let c;l&&(c=document.createElement("div"),c.style.position="absolute",c.style.backgroundColor="#222",c.style.width="8px",c.style.height="8px",c.style.transform="rotate(45deg)",c.style.display="none",u.firstElementChild.before(c));function f(){tm(e,u,{placement:r,middleware:[jp(o),Qp(i),Jp(s),...l?[em({element:c})]:[]]}).then(({x:$,y:m,placement:_,middlewareData:v})=>{if(Object.assign(u.style,{left:`${$}px`,top:`${m}px`}),l){const{x:b,y:N}=v.arrow,E={top:"bottom",right:"left",bottom:"top",left:"right"}[_.split("-")[0]];Object.assign(c.style,{zIndex:-1,left:b!=null?`${b}px`:"",top:N!=null?`${N}px`:"",right:"",bottom:"",[E]:"2px"})}})}let d=!1;function g(){u.style.display="block",u.style.visibility="block",u.style.position="absolute",l&&(c.style.display="block"),d=!0,f()}function p(){u.style.display="none",l&&(c.style.display="none"),d=!1}function x($){$.stopPropagation(),d?p():g()}function C($){u.contains($.target)||p()}return(!t||t.length==0)&&(t=["click"]),t.forEach($=>{e.addEventListener($,x)}),document.addEventListener("click",C),{destroy(){t.forEach($=>{e.removeEventListener($,x)}),document.removeEventListener("click",C)},hide(){p()},isVisible(){return d}}};var rm=ne('<div style="position: relative"><div><!></div> <div style="display: none; width: 100%;z-index: 9999"><!></div></div>');function Do(e,t){ue(t,!0);const n=w(t,"children",7),r=w(t,"floating",7),o=w(t,"placement",7,"bottom");let i,s,a;rn(()=>(a=nm({trigger:i,floatContent:s,interactive:!0,placement:o()}),()=>{a.destroy()}));function l(){a.hide()}var u=rm(),c=X(u),f=X(c);cr(f,n),Z(c),An(c,p=>i=p,()=>i);var d=z(c,2),g=X(d);return cr(g,r),Z(d),An(d,p=>s=p,()=>s),Z(u),L(e,u),ce({hide:l,get children(){return n()},set children(p){n(p),y()},get floating(){return r()},set floating(p){r(p),y()},get placement(){return o()},set placement(p="bottom"){o(p),y()}})}ie(Do,{children:{},floating:{},placement:{}},[],["hide"],!0);function je(e,t){ue(t,!0);const n=w(t,"children",7),r=w(t,"level",7,1),o=w(t,"mt",7),i=w(t,"mb",7);var s=tt(),a=xe(s);return t1(a,()=>`h${r()}`,!1,(l,u)=>{let c;Ee(()=>c=nn(l,c,{class:"tf-heading",style:`margin-top:${o()||"0"};margin-bottom:${i()||"0"}`},void 0,l.namespaceURI===Ea,l.nodeName.includes("-")));var f=tt(),d=xe(f);cr(d,()=>n()??gt),L(u,f)}),L(e,s),ce({get children(){return n()},set children(l){n(l),y()},get level(){return r()},set level(l=1){r(l),y()},get mt(){return o()},set mt(l){o(l),y()},get mb(){return i()},set mb(l){i(l),y()}})}ie(je,{children:{},level:{},mt:{},mb:{}},[],[],!0);var om=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="svelte-1rvn4a8"><path d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z" class="svelte-1rvn4a8"></path></svg>');const im={hash:"svelte-1rvn4a8",code:".input-btn-more {border:1px solid transparent;padding:3px;&:hover {background:#eee;border:1px solid transparent;}}"};function qi(e,t){ue(t,!0),et(e,im);const n=xt(t,["$$slots","$$events","$$legacy","$$host"]);Ge(e,ft(()=>n,{get class(){return`input-btn-more ${t.class??""}`},children:(r,o)=>{var i=om();L(r,i)},$$slots:{default:!0}})),ce()}ie(qi,{},[],[],!0);const sm=()=>{const e=Ue();return{deleteNode:n=>{e.nodes.update(r=>r.filter(o=>o.id!==n)),e.edges.update(r=>r.filter(o=>o.source!==n&&o.target!==n))}}},Kr=(e=16)=>{const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",n=new Uint8Array(e);return crypto.getRandomValues(n),Array.from(n,r=>t[r%t.length]).join("")},am=()=>{const{nodes:e,nodeLookup:t}=Ue();return{copyNode:r=>{var s;const i=(s=q(t).get(r))==null?void 0:s.internals.userNode;if(i){const a=Kr(),l={...i,id:a,position:{x:i.position.x+50,y:i.position.y+50}};e.update(u=>[...u,l]),e.update(u=>u.map(c=>c.id===a?{...c,selected:!0}:{...c,selected:!1}))}}}};var lm=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 18.3915V5.60846L18.2264 12L8 18.3915ZM6 3.80421V20.1957C6 20.9812 6.86395 21.46 7.53 21.0437L20.6432 12.848C21.2699 12.4563 21.2699 11.5436 20.6432 11.152L7.53 2.95621C6.86395 2.53993 6 3.01878 6 3.80421Z"></path></svg>'),um=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"></path></svg>'),cm=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z"></path></svg>'),dm=ne('<div class="tf-node-toolbar svelte-44dmwv"><!> <!> <!></div>'),fm=ne('<!> <div class="tf-node-wrapper"><div class="tf-node-wrapper-title">TinyFlow.ai</div> <div class="tf-node-wrapper-body"><!></div></div> <!> <!> <!>',1);const gm={hash:"svelte-44dmwv",code:".tf-node-toolbar.svelte-44dmwv {display:flex;gap:5px;padding:5px;border-radius:5px;background:#fff;border:1px solid #eee;box-shadow:0 0 5px rgba(0, 0, 0, 0.1);}.tf-node-toolbar-item {border:1px solid transparent;}"};function dn(e,t){ue(t,!0),et(e,gm);const n=w(t,"data",7),r=w(t,"id",7,""),o=w(t,"icon",7),i=w(t,"handle",7),s=w(t,"children",7),a=w(t,"allowExecute",7,!0),l=w(t,"allowCopy",7,!0),u=w(t,"allowDelete",7,!0),c=w(t,"showSourceHandle",7,!0),f=w(t,"showTargetHandle",7,!0);let d=n().expand?["key"]:[];const{updateNodeData:g}=Lt(),p=[{key:"key",icon:o(),title:n().title,description:n().description,content:s()}],{deleteNode:x}=sm(),{copyNode:C}=am();var $=fm(),m=xe($);{var _=O=>{Zc(O,{get position(){return $e.Top},align:"end",children:(R,S)=>{var M=dm(),k=X(M);{var P=K=>{Ge(K,{class:"tf-node-toolbar-item",children:(se,ee)=>{var W=lm();L(se,W)},$$slots:{default:!0}})};ke(k,K=>{a()&&K(P)})}var H=z(k,2);{var I=K=>{Ge(K,{class:"tf-node-toolbar-item",onclick:()=>{C(r())},children:(se,ee)=>{var W=um();L(se,W)},$$slots:{default:!0}})};ke(H,K=>{l()&&K(I)})}var B=z(H,2);{var F=K=>{Ge(K,{class:"tf-node-toolbar-item",onclick:()=>{x(r())},children:(se,ee)=>{var W=cm();L(se,W)},$$slots:{default:!0}})};ke(B,K=>{u()&&K(F)})}Z(M),L(R,M)},$$slots:{default:!0}})};ke(m,O=>{(a()||l()||u())&&O(_)})}var v=z(m,2),b=z(X(v),2),N=X(b);Kc(N,{items:p,activeKeys:d,onChange:(O,R)=>{g(r(),{expand:R==null?void 0:R.includes("key")})}}),Z(b),Z(v);var E=z(v,2);{var T=O=>{er(O,{type:"target",get position(){return $e.Left},style:" left: -12px;top: 20px"})};ke(E,O=>{f()&&O(T)})}var D=z(E,2);{var V=O=>{er(O,{type:"source",get position(){return $e.Right},style:"right: -12px;top: 20px"})};ke(D,O=>{c()&&O(V)})}var A=z(D,2);return cr(A,()=>i()??gt),L(e,$),ce({get data(){return n()},set data(O){n(O),y()},get id(){return r()},set id(O=""){r(O),y()},get icon(){return o()},set icon(O){o(O),y()},get handle(){return i()},set handle(O){i(O),y()},get children(){return s()},set children(O){s(O),y()},get allowExecute(){return a()},set allowExecute(O=!0){a(O),y()},get allowCopy(){return l()},set allowCopy(O=!0){l(O),y()},get allowDelete(){return u()},set allowDelete(O=!0){u(O),y()},get showSourceHandle(){return c()},set showSourceHandle(O=!0){c(O),y()},get showTargetHandle(){return f()},set showTargetHandle(O=!0){f(O),y()}})}ie(dn,{data:{},id:{},icon:{},handle:{},children:{},allowExecute:{},allowCopy:{},allowDelete:{},showSourceHandle:{},showTargetHandle:{}},[],[],!0);function pt(){return ur("svelteflow__node_id")}const cd=[{value:"String",label:"String"},{value:"Number",label:"Number"},{value:"Boolean",label:"Boolean"},{value:"File",label:"File"},{value:"Object",label:"Object"},{value:"Array",label:"Array"}],hm=[{value:"ref",label:"引用"},{value:"input",label:"固定值"}];var vm=ne('<div class="input-more-setting svelte-laou7w"><div class="input-more-item svelte-laou7w">参数类型： <!></div> <div class="input-more-item svelte-laou7w">默认值： <!></div> <div class="input-more-item svelte-laou7w">参数描述： <!></div> <div class="input-more-item svelte-laou7w"><!></div></div>'),pm=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z"></path></svg>'),mm=ne('<div class="input-item svelte-laou7w"><!></div> <div class="input-item svelte-laou7w"><!></div> <div class="input-item svelte-laou7w"><!></div>',1);const ym={hash:"svelte-laou7w",code:".input-item.svelte-laou7w {display:flex;align-items:center;}.input-more-setting.svelte-laou7w {display:flex;flex-direction:column;gap:10px;padding:10px;background:#fff;border:1px solid #ddd;border-radius:5px;width:200px;box-shadow:0 0 10px 2px rgba(0, 0, 0, 0.1);}.input-more-setting.svelte-laou7w .input-more-item:where(.svelte-laou7w) {display:flex;flex-direction:column;gap:3px;font-size:12px;color:#666;}"};function dd(e,t){ue(t,!0),et(e,ym);const[n,r]=nt(),o=()=>Q(h(l),"$node",n),i=w(t,"parameter",7),s=w(t,"index",7);let a=pt(),l=Ne(()=>pr(a)),u=Ne(()=>{var T,D;return{...i(),...(D=(T=o())==null?void 0:T.data)==null?void 0:D.parameters[s()]}});const{updateNodeData:c}=Lt(),f=T=>{const D=T.target.value;c(a,V=>{let A=V.data.parameters;return A[s()].name=D,{parameters:A}})},d=T=>{const D=T.target.checked;c(a,V=>{let A=V.data.parameters;return A[s()].required=D,{parameters:A}})},g=T=>{const D=T.value;D&&c(a,V=>{let A=V.data.parameters;return A[s()].dataType=D,{parameters:A}})};let p;const x=()=>{c(a,T=>{let D=T.data.parameters;return D.splice(s(),1),{parameters:[...D]}}),p==null||p.hide()};var C=mm(),$=xe(C),m=X($);St(m,{style:"width: 100%;",get value(){return h(u).name},placeholder:"请输入参数名称",oninput:f}),Z($);var _=z($,2),v=X(_);Fc(v,{get checked(){return h(u).required},onchange:d}),Z(_);var b=z(_,2),N=X(b);An(Do(N,{placement:"bottom",floating:D=>{var V=vm(),A=X(V),O=z(X(A));const R=Ne(()=>h(u).dataType?[h(u).dataType]:["String"]);ln(O,{items:cd,style:"width: 100%",onSelect:g,get value(){return h(R)}}),Z(A);var S=z(A,2),M=z(X(S));Pt(M,{rows:1,style:"width: 100%;"}),Z(S);var k=z(S,2),P=z(X(k));Pt(P,{rows:3,style:"width: 100%;"}),Z(k);var H=z(k,2),I=X(H);Ge(I,{onclick:x,children:(B,F)=>{Pe();var K=Ae("删除");L(B,K)},$$slots:{default:!0}}),Z(H),Z(V),L(D,V)},children:(D,V)=>{Ge(D,{class:"input-btn-more",children:(A,O)=>{var R=pm();L(A,R)},$$slots:{default:!0}})},$$slots:{floating:!0,default:!0}}),D=>p=D,()=>p),Z(b),L(e,C);var E=ce({get parameter(){return i()},set parameter(T){i(T),y()},get index(){return s()},set index(T){s(T),y()}});return r(),E}ie(dd,{parameter:{},index:{}},[],[],!0);var wm=ne('<div class="input-header svelte-3n0wca">参数名称</div> <div class="input-header svelte-3n0wca">必填</div> <div class="input-header svelte-3n0wca"></div>',1),_m=ne('<div class="none-params svelte-3n0wca">无输入参数</div>'),xm=ne('<div class="input-container svelte-3n0wca"><!> <!></div>');const bm={hash:"svelte-3n0wca",code:`.input-container.svelte-3n0wca {display:grid;grid-template-columns:80% 10% 10%;row-gap:5px;column-gap:3px;}.input-container.svelte-3n0wca .none-params:where(.svelte-3n0wca) {font-size:12px;background:#f8f8f8;height:40px;display:flex;justify-content:center;align-items:center;border-radius:5px;width:calc(100% - 5px);grid-column:1 / -1;
+  /* 从第一列开始到最后一列结束 */}.input-container.svelte-3n0wca .input-header:where(.svelte-3n0wca) {font-size:12px;color:#666;}`};function fd(e,t){ue(t,!0),et(e,bm);const[n,r]=nt(),o=()=>Q(h(s),"$node",n);let i=pt(),s=Ne(()=>pr(i)),a=Ne(()=>{var d,g;return[...((g=(d=o())==null?void 0:d.data)==null?void 0:g.parameters)||[]]});var l=xm(),u=X(l);{var c=d=>{var g=wm();Pe(4),L(d,g)};ke(u,d=>{h(a).length!==0&&d(c)})}var f=z(u,2);Yt(f,19,()=>h(a),d=>d.id,(d,g,p)=>{dd(d,{get parameter(){return h(g)},get index(){return h(p)}})},d=>{var g=_m();L(d,g)}),Z(l),L(e,l),ce(),r()}ie(fd,{},[],[],!0);const gd=e=>{!e||e.length==0||e.forEach(t=>{t.id||(t.id=Kr()),gd(t.children)})},kn=()=>{const{updateNodeData:e}=Lt();return{addParameter:(t,n="parameters",r)=>{gd(r==null?void 0:r.children);const o={...r,id:Kr()};e(t,i=>{let s=i.data[n];return s?s.push(o):s=[o],{[n]:[...s]}})}}};var Cm=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path></svg>'),km=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),$m=ne('<div class="heading svelte-r5g35l"><!> <!></div> <!>',1);const Em={hash:"svelte-r5g35l",code:".heading.svelte-r5g35l {display:flex;margin-bottom:10px;}.input-btn-more {border:1px solid transparent;padding:3px;}.input-btn-more:hover {background:#eee;border:1px solid transparent;}"};function hd(e,t){ue(t,!0),et(e,Em);const n=w(t,"data",7),r=xt(t,["$$slots","$$events","$$legacy","$$host","data"]),o=pt(),{addParameter:i}=kn();return dn(e,ft(()=>r,{get data(){return n()},allowExecute:!1,showTargetHandle:!1,icon:a=>{var l=Cm();L(a,l)},children:(a,l)=>{var u=$m(),c=xe(u),f=X(c);je(f,{level:3,children:(p,x)=>{Pe();var C=Ae("输入参数");L(p,C)},$$slots:{default:!0}});var d=z(f,2);Ge(d,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o)},children:(p,x)=>{var C=km();L(p,C)},$$slots:{default:!0}}),Z(c);var g=z(c,2);fd(g,{}),L(a,u)},$$slots:{icon:!0,default:!0}})),ce({get data(){return n()},set data(s){n(s),y()}})}ie(hd,{data:{}},[],[],!0);const vd=(e,t,n)=>{for(let r of n)r.target===t&&r.source&&(e.push(r.source),vd(e,r.source,n))},pd=(e,t)=>{if(e.type==="startNode"){const n=e.data.parameters,r=[];if(n)for(const o of n)r.push({label:o.name+(t?` (Array<${o.dataType||"String"}>)`:` (${o.dataType||"String"})`),value:e.id+"."+o.name});return{label:e.data.title,value:e.id,children:r}}else{if(e.type==="loopNode"&&t)return{label:e.data.title,value:e.id,children:[{label:"loopItem",value:e.id+".loop"},{label:"index (Number)",value:e.id+".index"}]};{const n=e.data.outputDefs;if(n){const r=(o,i)=>!o||o.length===0?[]:o.map(s=>({label:s.name+(t?` (Array<${s.dataType||"String"}>)`:` (${s.dataType||"String"})`),value:i+"."+s.name,children:r(s.children,i+"."+s.name)}));return{label:e.data.title,value:e.id,children:r(n,e.id)}}}}},Sm=(e=!1)=>{const t=pt(),n=pr(t),{nodes:r,edges:o}=Ue();return Un([n,r,o],([i,s,a])=>{const l=[];if(e){for(let u of s)if(u.parentId===i.id){const c=pd(u,u.parentId===i.id);c&&l.push(c)}}else{const u=[];vd(u,t,a);for(let c of s)if(u.includes(c.id)){const f=pd(c,c.parentId===i.id);f&&l.push(f)}}return l})};var Pm=ne('<div class="input-more-setting svelte-laou7w"><div class="input-more-item svelte-laou7w">数据来源： <!></div> <div class="input-more-item svelte-laou7w">默认值： <!></div> <div class="input-more-item svelte-laou7w">参数描述： <!></div> <div class="input-more-item svelte-laou7w"><!></div></div>'),Nm=ne('<div class="input-item svelte-laou7w"><!></div> <div class="input-item svelte-laou7w"><!></div> <div class="input-item svelte-laou7w"><!></div>',1);const Tm={hash:"svelte-laou7w",code:".input-item.svelte-laou7w {display:flex;align-items:center;}.input-more-setting.svelte-laou7w {display:flex;flex-direction:column;gap:10px;padding:10px;background:#fff;border:1px solid #ddd;border-radius:5px;width:200px;box-shadow:0 0 10px 2px rgba(0, 0, 0, 0.1);}.input-more-setting.svelte-laou7w .input-more-item:where(.svelte-laou7w) {display:flex;flex-direction:column;gap:3px;font-size:12px;color:#666;}"};function md(e,t){ue(t,!0),et(e,Tm);const[n,r]=nt(),o=()=>Q(h(c),"$node",n),i=()=>Q(v,"$selectItems",n),s=w(t,"parameter",7),a=w(t,"index",7),l=w(t,"dataKeyName",7);let u=pt(),c=Ne(()=>pr(u)),f=Ne(()=>{var M;return{...s(),...(M=o())==null?void 0:M.data[l()][a()]}});const{updateNodeData:d}=Lt(),g=(M,k)=>{d(u,P=>{let H=P.data[l()];return H[a()]={...H[a()],[M]:k},{[l()]:H}})},p=M=>{const k=M.target.value;g("name",k)},x=M=>{const k=M.target.value;g("value",k)},C=M=>{const k=M.value;g("ref",k)},$=M=>{const k=M.value;g("refType",k)};let m;const _=()=>{d(u,M=>{let k=M.data[l()];return k.splice(a(),1),{[l()]:[...k]}}),m==null||m.hide()},v=Sm();var b=Nm(),N=xe(b),E=X(N);St(E,{style:"width: 100%;",get value(){return h(f).name},placeholder:"请输入参数名称",oninput:p}),Z(N);var T=z(N,2),D=X(T);{var V=M=>{St(M,{get value(){return h(f).value},placeholder:"请输入参数值",oninput:x})},A=M=>{const k=Ne(()=>[h(f).ref]);ln(M,{get items(){return i()},style:"width: 100%",defaultValue:["ref"],get value(){return h(k)},expandAll:!0,onSelect:C})};ke(D,M=>{h(f).refType==="input"?M(V):M(A,!1)})}Z(T);var O=z(T,2),R=X(O);An(Do(R,{placement:"bottom",floating:k=>{var P=Pm(),H=X(P),I=z(X(H));const B=Ne(()=>h(f).refType?[h(f).refType]:[]);ln(I,{items:hm,style:"width: 100%",defaultValue:["ref"],get value(){return h(B)},onSelect:$}),Z(H);var F=z(H,2),K=z(X(F));Pt(K,{rows:1,style:"width: 100%;",onchange:me=>{const Ce=me.target.value;g("defaultValue",Ce)}}),Z(F);var se=z(F,2),ee=z(X(se));Pt(ee,{rows:3,style:"width: 100%;",onchange:me=>{const Ce=me.target.value;g("description",Ce)}}),Z(se);var W=z(se,2),fe=X(W);Ge(fe,{onclick:_,children:(me,Ce)=>{Pe();var he=Ae("删除");L(me,he)},$$slots:{default:!0}}),Z(W),Z(P),L(k,P)},children:(k,P)=>{qi(k,{})},$$slots:{floating:!0,default:!0}}),k=>m=k,()=>m),Z(O),L(e,b);var S=ce({get parameter(){return s()},set parameter(M){s(M),y()},get index(){return a()},set index(M){a(M),y()},get dataKeyName(){return l()},set dataKeyName(M){l(M),y()}});return r(),S}ie(md,{parameter:{},index:{},dataKeyName:{}},[],[],!0);var Mm=ne('<div class="input-header svelte-1sm1mgi">参数名称</div> <div class="input-header svelte-1sm1mgi">参数值</div> <div class="input-header svelte-1sm1mgi"></div>',1),Hm=ne('<div class="none-params svelte-1sm1mgi"> </div>'),Vm=ne('<div class="input-container svelte-1sm1mgi"><!> <!></div>');const Dm={hash:"svelte-1sm1mgi",code:`.input-container.svelte-1sm1mgi {display:grid;grid-template-columns:40% 50% 10%;row-gap:5px;column-gap:3px;}.input-container.svelte-1sm1mgi .none-params:where(.svelte-1sm1mgi) {font-size:12px;background:#f8f8f8;height:40px;display:flex;justify-content:center;align-items:center;border-radius:5px;width:calc(100% - 5px);grid-column:1 / -1;
+  /* 从第一列开始到最后一列结束 */}.input-container.svelte-1sm1mgi .input-header:where(.svelte-1sm1mgi) {font-size:12px;color:#666;}`};function Ft(e,t){ue(t,!0),et(e,Dm);const[n,r]=nt(),o=()=>Q(h(l),"$node",n),i=w(t,"noneParameterText",7,"无输入参数"),s=w(t,"dataKeyName",7,"parameters");let a=pt(),l=Ne(()=>pr(a)),u=Ne(()=>{var x;return[...((x=o())==null?void 0:x.data[s()])||[]]});var c=Vm(),f=X(c);{var d=x=>{var C=Mm();Pe(4),L(x,C)};ke(f,x=>{h(u).length!==0&&x(d)})}var g=z(f,2);Yt(g,19,()=>h(u),x=>x.id,(x,C,$)=>{md(x,{get parameter(){return h(C)},get index(){return h($)},get dataKeyName(){return s()}})},x=>{var C=Hm(),$=X(C,!0);Z(C),Ee(()=>Bt($,i())),L(x,C)}),Z(c),L(e,c);var p=ce({get noneParameterText(){return i()},set noneParameterText(x="无输入参数"){i(x),y()},get dataKeyName(){return s()},set dataKeyName(x="parameters"){s(x),y()}});return r(),p}ie(Ft,{noneParameterText:{},dataKeyName:{}},[],[],!0);var Am=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 5.1438V16.0002H18.3391L6 5.1438ZM4 2.932C4 2.07155 5.01456 1.61285 5.66056 2.18123L21.6501 16.2494C22.3423 16.8584 21.9116 18.0002 20.9896 18.0002H6V22H4V2.932Z"></path></svg>'),Lm=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),Om=ne('<div class="heading svelte-11h445j"><!> <!></div> <!>',1);const Im={hash:"svelte-11h445j",code:".heading.svelte-11h445j {display:flex;margin-bottom:10px;}"};function yd(e,t){ue(t,!0),et(e,Im);const n=w(t,"data",7),r=xt(t,["$$slots","$$events","$$legacy","$$host","data"]),o=pt(),{addParameter:i}=kn();return dn(e,ft({get data(){return n()}},()=>r,{allowExecute:!1,showSourceHandle:!1,icon:a=>{var l=Am();L(a,l)},children:(a,l)=>{var u=Om(),c=xe(u),f=X(c);je(f,{level:3,children:(p,x)=>{Pe();var C=Ae("输出参数");L(p,C)},$$slots:{default:!0}});var d=z(f,2);Ge(d,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o,"outputDefs")},children:(p,x)=>{var C=Lm();L(p,C)},$$slots:{default:!0}}),Z(c);var g=z(c,2);Ft(g,{noneParameterText:"无输出参数",dataKeyName:"outputDefs"}),L(a,u)},$$slots:{icon:!0,default:!0}})),ce({get data(){return n()},set data(s){n(s),y()}})}ie(yd,{data:{}},[],[],!0);const Ao=()=>ur("tinyflow_options");var zm=_e('<svg style="transform: scaleY(-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 8V16C13 17.6569 11.6569 19 10 19H7.82929C7.41746 20.1652 6.30622 21 5 21C3.34315 21 2 19.6569 2 18C2 16.3431 3.34315 15 5 15C6.30622 15 7.41746 15.8348 7.82929 17H10C10.5523 17 11 16.5523 11 16V8C11 6.34315 12.3431 5 14 5H17V2L22 6L17 10V7H14C13.4477 7 13 7.44772 13 8ZM5 19C5.55228 19 6 18.5523 6 18C6 17.4477 5.55228 17 5 17C4.44772 17 4 17.4477 4 18C4 18.5523 4.44772 19 5 19Z"></path></svg>'),Rm=ne('<div class="input-more-item svelte-1cfeest"><!></div>'),Bm=ne('<div class="input-more-setting svelte-1cfeest"><div class="input-more-item svelte-1cfeest">默认值： <!></div> <div class="input-more-item svelte-1cfeest">参数描述： <!></div> <!></div>'),Ym=ne('<div class="input-item svelte-1cfeest"><!> <!></div> <div class="input-item svelte-1cfeest"><!> <!></div> <div class="input-item svelte-1cfeest"><!></div>',1);const Zm={hash:"svelte-1cfeest",code:".input-item.svelte-1cfeest {display:flex;align-items:center;gap:2px;}.input-more-setting.svelte-1cfeest {display:flex;flex-direction:column;gap:10px;padding:10px;background:#fff;border:1px solid #ddd;border-radius:5px;width:200px;box-shadow:0 0 10px 2px rgba(0, 0, 0, 0.1);}.input-more-setting.svelte-1cfeest .input-more-item:where(.svelte-1cfeest) {display:flex;flex-direction:column;gap:3px;font-size:12px;color:#666;}"};function wd(e,t){ue(t,!0),et(e,Zm);const[n,r]=nt(),o=()=>Q(h(u),"$node",n),i=w(t,"parameter",7),s=w(t,"position",7),a=w(t,"dataKeyName",7);let l=pt(),u=Ne(()=>pr(l)),c=Ne(()=>{var I;let P=(I=o())==null?void 0:I.data[a()],H;if(P&&s().length>0){let B=P;for(let F=0;F<s().length;F++){const K=s()[F];F==s().length-1?H=B[K]:B=B[K].children}}return{...i(),...H}});const{updateNodeData:f}=Lt(),d=(P,H)=>{f(l,I=>{const B=I.data[a()];if(B&&s().length>0){let F=B;for(let K=0;K<s().length;K++){const se=s()[K];K==s().length-1?F[se]={...F[se],[P]:H}:F=B[se].children}}return{[a()]:B}})},g=P=>{const H=P.target.value;d("name",H)},p=P=>{const H=P.value;d("dataType",H)};let x;const C=()=>{f(l,P=>{let H=P.data[a()];if(H&&s().length>0){let I=H;for(let B=0;B<s().length;B++){const F=s()[B];B==s().length-1?I.splice(F,1):I=I[F].children}}return{[a()]:[...H]}}),x==null||x.hide()},$=()=>{f(l,P=>{let H=P.data[a()];if(H&&s().length>0){let I=H;for(let B=0;B<s().length;B++){const F=s()[B];B==s().length-1?I[F].children?I[F].children.push({id:Kr(),name:"newParam",dataType:"String"}):I[F].children=[{id:Kr(),name:"newParam",dataType:"String"}]:I=I[F].children}}return{[a()]:[...H]}})};var m=Ym(),_=xe(m),v=X(_);{var b=P=>{var H=tt(),I=xe(H);Yt(I,17,s,oi,(B,F)=>{Pe();var K=Ae(" ");L(B,K)}),L(P,H)};ke(v,P=>{s().length>1&&P(b)})}var N=z(v,2);const E=Ne(()=>h(c).nameDisabled===!0);St(N,{style:"width: 100%;",get value(){return h(c).name},placeholder:"请输入参数名称",oninput:g,get disabled(){return h(E)}}),Z(_);var T=z(_,2),D=X(T);const V=Ne(()=>h(c).dataType?[h(c).dataType]:[]),A=Ne(()=>h(c).dataTypeDisabled===!0);ln(D,{items:cd,style:"width: 100%",defaultValue:["String"],get value(){return h(V)},get disabled(){return h(A)},onSelect:p});var O=z(D,2);{var R=P=>{Ge(P,{class:"input-btn-more",style:"margin-left: auto",onclick:$,children:(H,I)=>{var B=zm();L(H,B)},$$slots:{default:!0}})};ke(O,P=>{(h(c).dataType==="Object"||h(c).dataType==="Array")&&h(c).addChildDisabled!==!0&&P(R)})}Z(T);var S=z(T,2),M=X(S);An(Do(M,{placement:"bottom",floating:H=>{var I=Bm(),B=X(I),F=z(X(B));Pt(F,{rows:1,style:"width: 100%;",onchange:fe=>{const me=fe.target.value;d("defaultValue",me)}}),Z(B);var K=z(B,2),se=z(X(K));Pt(se,{rows:3,style:"width: 100%;",onchange:fe=>{const me=fe.target.value;d("description",me)}}),Z(K);var ee=z(K,2);{var W=fe=>{var me=Rm(),Ce=X(me);Ge(Ce,{onclick:C,children:(he,ze)=>{Pe();var G=Ae("删除");L(he,G)},$$slots:{default:!0}}),Z(me),L(fe,me)};ke(ee,fe=>{h(c).deleteDisabled!==!0&&fe(W)})}Z(I),L(H,I)},children:(H,I)=>{qi(H,{})},$$slots:{floating:!0,default:!0}}),H=>x=H,()=>x),Z(S),L(e,m);var k=ce({get parameter(){return i()},set parameter(P){i(P),y()},get position(){return s()},set position(P){s(P),y()},get dataKeyName(){return a()},set dataKeyName(P){a(P),y()}});return r(),k}ie(wd,{parameter:{},position:{},dataKeyName:{}},[],[],!0);var Xm=ne("<!> <!>",1),Fm=ne('<div class="none-params svelte-1sm1mgi"> </div>'),Wm=ne('<div class="input-header svelte-1sm1mgi">参数名称</div> <div class="input-header svelte-1sm1mgi">参数类型</div> <div class="input-header svelte-1sm1mgi"></div>',1),Km=ne('<div class="input-container svelte-1sm1mgi"><!> <!></div>');const qm={hash:"svelte-1sm1mgi",code:`.input-container.svelte-1sm1mgi {display:grid;grid-template-columns:40% 50% 10%;row-gap:5px;column-gap:3px;}.input-container.svelte-1sm1mgi .none-params:where(.svelte-1sm1mgi) {font-size:12px;background:#f8f8f8;height:40px;display:flex;justify-content:center;align-items:center;border-radius:5px;width:calc(100% - 5px);grid-column:1 / -1;
+  /* 从第一列开始到最后一列结束 */}.input-container.svelte-1sm1mgi .input-header:where(.svelte-1sm1mgi) {font-size:12px;color:#666;}`};function Yn(e,t){ue(t,!0),et(e,qm);const[n,r]=nt(),o=()=>Q(h(u),"$node",n),i=(C,$=gt,m=gt)=>{var _=tt(),v=xe(_);Yt(v,19,$,b=>`${b.id}_${b.children?b.children.length:0}`,(b,N,E)=>{var T=Xm(),D=xe(T);const V=Ne(()=>[...m(),h(E)]);wd(D,{get parameter(){return h(N)},get position(){return h(V)},get dataKeyName(){return a()}});var A=z(D,2);{var O=R=>{var S=ve(()=>[...m(),h(E)]);i(R,()=>h(N).children,()=>h(S))};ke(A,R=>{h(N).children&&R(O)})}L(b,T)},b=>{var N=tt(),E=xe(N);{var T=D=>{var V=Fm(),A=X(V,!0);Z(V),Ee(()=>Bt(A,s())),L(D,V)};ke(E,D=>{m().length===0&&D(T)})}L(b,N)}),L(C,_)},s=w(t,"noneParameterText",7,"无输出参数"),a=w(t,"dataKeyName",7,"outputDefs");let l=pt(),u=Ne(()=>pr(l)),c=Ne(()=>{var C;return[...((C=o())==null?void 0:C.data[a()])||[]]});var f=Km(),d=X(f);{var g=C=>{var $=Wm();Pe(4),L(C,$)};ke(d,C=>{h(c).length!==0&&C(g)})}var p=z(d,2);i(p,()=>h(c)||[],()=>[]),Z(f),L(e,f);var x=ce({get noneParameterText(){return s()},set noneParameterText(C="无输出参数"){s(C),y()},get dataKeyName(){return a()},set dataKeyName(C="outputDefs"){a(C),y()}});return r(),x}ie(Yn,{noneParameterText:{},dataKeyName:{}},[],[],!0);var Gm=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.7134 7.12811L20.4668 7.69379C20.2864 8.10792 19.7136 8.10792 19.5331 7.69379L19.2866 7.12811C18.8471 6.11947 18.0555 5.31641 17.0677 4.87708L16.308 4.53922C15.8973 4.35653 15.8973 3.75881 16.308 3.57612L17.0252 3.25714C18.0384 2.80651 18.8442 1.97373 19.2761 0.930828L19.5293 0.319534C19.7058 -0.106511 20.2942 -0.106511 20.4706 0.319534L20.7238 0.930828C21.1558 1.97373 21.9616 2.80651 22.9748 3.25714L23.6919 3.57612C24.1027 3.75881 24.1027 4.35653 23.6919 4.53922L22.9323 4.87708C21.9445 5.31641 21.1529 6.11947 20.7134 7.12811ZM9 2C13.0675 2 16.426 5.03562 16.9337 8.96494L19.1842 12.5037C19.3324 12.7367 19.3025 13.0847 18.9593 13.2317L17 14.071V17C17 18.1046 16.1046 19 15 19H13.001L13 22H4L4.00025 18.3061C4.00033 17.1252 3.56351 16.0087 2.7555 15.0011C1.65707 13.6313 1 11.8924 1 10C1 5.58172 4.58172 2 9 2ZM9 4C5.68629 4 3 6.68629 3 10C3 11.3849 3.46818 12.6929 4.31578 13.7499C5.40965 15.114 6.00036 16.6672 6.00025 18.3063L6.00013 20H11.0007L11.0017 17H15V12.7519L16.5497 12.0881L15.0072 9.66262L14.9501 9.22118C14.5665 6.25141 12.0243 4 9 4ZM19.4893 16.9929L21.1535 18.1024C22.32 16.3562 23 14.2576 23 12.0001C23 11.317 22.9378 10.6486 22.8186 10L20.8756 10.5C20.9574 10.9878 21 11.489 21 12.0001C21 13.8471 20.4436 15.5642 19.4893 16.9929Z"></path></svg>'),Um=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),jm=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),Jm=ne('<div class="heading svelte-wn2kra"><!> <!></div> <!> <!> <div class="setting-title svelte-wn2kra">模型</div> <div class="setting-item svelte-wn2kra"><!> <!></div> <div class="setting-title svelte-wn2kra">采样参数</div> <div class="setting-item svelte-wn2kra"><div class="slider-container svelte-wn2kra"><label class="svelte-wn2kra"> </label> <input type="range" min="0" max="1" step="0.1" class="svelte-wn2kra"></div></div> <div class="setting-item svelte-wn2kra"><div class="slider-container svelte-wn2kra"><label class="svelte-wn2kra"> </label> <input type="range" min="0" max="1" step="0.1" class="svelte-wn2kra"></div></div> <div class="setting-item svelte-wn2kra"><div class="slider-container svelte-wn2kra"><label class="svelte-wn2kra"> </label> <input type="range" min="0" max="100" step="1" class="svelte-wn2kra"></div></div> <div class="setting-title svelte-wn2kra">系统提示词</div> <div class="setting-item svelte-wn2kra"><!></div> <div class="setting-title svelte-wn2kra">用户提示词</div> <div class="setting-item svelte-wn2kra"><!></div> <div class="heading svelte-wn2kra"><!> <!></div> <!>',1);const Qm={hash:"svelte-wn2kra",code:`.heading.svelte-wn2kra {display:flex;margin-bottom:10px;}.setting-title.svelte-wn2kra {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-wn2kra {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}\r
+    /* 新增样式 */.slider-container.svelte-wn2kra {width:100%;display:flex;flex-direction:column;gap:4px;}.slider-container.svelte-wn2kra label:where(.svelte-wn2kra) {font-size:12px;color:#666;display:flex;justify-content:space-between;align-items:center;}input[type="range"].svelte-wn2kra {width:100%;height:4px;background:#ddd;border-radius:2px;outline:none;-webkit-appearance:none;}input[type="range"].svelte-wn2kra::-webkit-slider-thumb {-webkit-appearance:none;width:14px;height:14px;background:#007bff;border-radius:50%;cursor:pointer;}`};function _d(e,t){ue(t,!0),et(e,Qm);const n=w(t,"data",7),r=xt(t,["$$slots","$$events","$$legacy","$$host","data"]),o=pt(),{addParameter:i}=kn(),s=Ao();let a=Fn(Ht([]));rn(async()=>{var c,f;const u=await((f=(c=s.provider)==null?void 0:c.llm)==null?void 0:f.call(c));h(a).push(...u||[])});const{updateNodeData:l}=Lt();return dn(e,ft({get data(){return n()}},()=>r,{icon:c=>{var f=Gm();L(c,f)},children:(c,f)=>{var d=Jm(),g=xe(d),p=X(g);je(p,{level:3,children:(G,ae)=>{Pe();var Me=Ae("输入参数");L(G,Me)},$$slots:{default:!0}});var x=z(p,2);Ge(x,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o)},children:(G,ae)=>{var Me=Um();L(G,Me)},$$slots:{default:!0}}),Z(g);var C=z(g,2);Ft(C,{});var $=z(C,2);je($,{level:3,mt:"10px",children:(G,ae)=>{Pe();var Me=Ae("模型设置");L(G,Me)},$$slots:{default:!0}});var m=z($,4),_=X(m);const v=Ne(()=>n().llmId?[n().llmId]:[]);ln(_,{get items(){return h(a)},style:"width: 100%",placeholder:"请选择模型",onSelect:G=>{const ae=G.value;l(o,()=>({llmId:ae}))},get value(){return h(v)}});var b=z(_,2);qi(b,{}),Z(m);var N=z(m,4),E=X(N),T=X(E),D=X(T);Z(T);var V=z(T,2);ao(V),Z(E),Z(N);var A=z(N,2),O=X(A),R=X(O),S=X(R);Z(R);var M=z(R,2);ao(M),Z(O),Z(A);var k=z(A,2),P=X(k),H=X(P),I=X(H);Z(H);var B=z(H,2);ao(B),Z(P),Z(k);var F=z(k,4),K=X(F);const se=Ne(()=>n().systemPrompt||"");Pt(K,{rows:5,placeholder:"请输入系统提示词",style:"width: 100%",get value(){return h(se)},oninput:G=>{l(o,{systemPrompt:G.target.value})}}),Z(F);var ee=z(F,4),W=X(ee);const fe=Ne(()=>n().userPrompt||"");Pt(W,{rows:5,placeholder:"请输入用户提示词",style:"width: 100%",get value(){return h(fe)},oninput:G=>{l(o,{userPrompt:G.target.value})}}),Z(ee);var me=z(ee,2),Ce=X(me);je(Ce,{level:3,mt:"10px",children:(G,ae)=>{Pe();var Me=Ae("输出参数");L(G,Me)},$$slots:{default:!0}});var he=z(Ce,2);Ge(he,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o,"outputDefs")},children:(G,ae)=>{var Me=jm();L(G,Me)},$$slots:{default:!0}}),Z(me);var ze=z(me,2);Yn(ze,{}),Ee(()=>{Bt(D,`Temperature: ${n().temperature??.5}`),bs(V,n().temperature??.5),Bt(S,`Top P: ${n().topP??.9}`),bs(M,n().topP??.9),Bt(I,`Top K: ${n().topK??50}`),bs(B,n().topK??50)}),Ze("mousedown",V,ks(function(G){De.call(this,t,G)})),Ze("input",V,G=>l(o,{temperature:parseFloat(G.target.value)})),Ze("mousedown",M,ks(function(G){De.call(this,t,G)})),Ze("input",M,G=>l(o,{topP:parseFloat(G.target.value)})),Ze("mousedown",B,ks(function(G){De.call(this,t,G)})),Ze("input",B,G=>l(o,{topK:parseInt(G.target.value)})),L(c,d)},$$slots:{icon:!0,default:!0}})),ce({get data(){return n()},set data(u){n(u),y()}})}ie(_d,{data:{}},[],[],!0);var ey=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12L15.9289 19.0711L14.5147 17.6569L20.1716 12L14.5147 6.34317L15.9289 4.92896L23 12ZM3.82843 12L9.48528 17.6569L8.07107 19.0711L1 12L8.07107 4.92896L9.48528 6.34317L3.82843 12Z"></path></svg>'),ty=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),ny=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),ry=ne('<div class="heading svelte-15t2v24"><!> <!></div> <!> <!> <div class="setting-title svelte-15t2v24">执行引擎</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">执行代码</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="heading svelte-15t2v24"><!> <!></div> <!>',1);const oy={hash:"svelte-15t2v24",code:".heading.svelte-15t2v24 {display:flex;margin-bottom:10px;}.setting-title.svelte-15t2v24 {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-15t2v24 {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}"};function xd(e,t){ue(t,!0),et(e,oy);const n=w(t,"data",7),r=xt(t,["$$slots","$$events","$$legacy","$$host","data"]),o=pt(),{addParameter:i}=kn(),{updateNodeData:s}=Lt(),a=[{label:"QLExpress",value:"qlexpress"},{label:"Groovy",value:"groovy"},{label:"JavaScript",value:"js"}];return dn(e,ft({get data(){return n()}},()=>r,{icon:u=>{var c=ey();L(u,c)},children:(u,c)=>{var f=ry(),d=xe(f),g=X(d);je(g,{level:3,children:(A,O)=>{Pe();var R=Ae("输入参数");L(A,R)},$$slots:{default:!0}});var p=z(g,2);Ge(p,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o)},children:(A,O)=>{var R=ty();L(A,R)},$$slots:{default:!0}}),Z(d);var x=z(d,2);Ft(x,{});var C=z(x,2);je(C,{level:3,mt:"10px",children:(A,O)=>{Pe();var R=Ae("代码");L(A,R)},$$slots:{default:!0}});var $=z(C,4),m=X($);const _=Ne(()=>n().engine?[n().engine]:["qlexpress"]);ln(m,{items:a,style:"width: 100%",placeholder:"请选择执行引擎",onSelect:A=>{const O=A.value;s(o,()=>({engine:O}))},get value(){return h(_)}}),Z($);var v=z($,4),b=X(v);const N=Ne(()=>n().code||"");Pt(b,{rows:10,placeholder:"请输入执行代码，注：输出内容需添加到_result中，如：_result.put(key, value)",style:"width: 100%",onchange:A=>{s(o,()=>({code:A.target.value}))},get value(){return h(N)}}),Z(v);var E=z(v,2),T=X(E);je(T,{level:3,mt:"10px",children:(A,O)=>{Pe();var R=Ae("输出参数");L(A,R)},$$slots:{default:!0}});var D=z(T,2);Ge(D,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o,"outputDefs")},children:(A,O)=>{var R=ny();L(A,R)},$$slots:{default:!0}}),Z(E);var V=z(E,2);Yn(V,{}),L(u,f)},$$slots:{icon:!0,default:!0}})),ce({get data(){return n()},set data(l){n(l),y()}})}ie(xd,{data:{}},[],[],!0);var iy=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4ZM4 5V19H20V5H4ZM7 8H17V11H15V10H13V14H14.5V16H9.5V14H11V10H9V11H7V8Z"></path></svg>'),sy=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),ay=ne('<div class="heading svelte-15t2v24"><!> <!></div> <!> <!> <div class="setting-title svelte-15t2v24">执行代码</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="heading svelte-15t2v24"><!></div> <!>',1);const ly={hash:"svelte-15t2v24",code:".heading.svelte-15t2v24 {display:flex;margin-bottom:10px;}.setting-title.svelte-15t2v24 {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-15t2v24 {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}"};function bd(e,t){ue(t,!0),et(e,ly);const n=w(t,"data",7),r=xt(t,["$$slots","$$events","$$legacy","$$host","data"]),o=pt(),{addParameter:i}=kn(),{updateNodeData:s}=Lt();return kr(()=>{(!n().outputDefs||n().outputDefs.length===0)&&i(o,"outputDefs",{name:"output",dataType:"String",dataTypeDisabled:!0,deleteDisabled:!0})}),dn(e,ft({get data(){return n()}},()=>r,{icon:l=>{var u=iy();L(l,u)},children:(l,u)=>{var c=ay(),f=xe(c),d=X(f);je(d,{level:3,children:(N,E)=>{Pe();var T=Ae("输入参数");L(N,T)},$$slots:{default:!0}});var g=z(d,2);Ge(g,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o)},children:(N,E)=>{var T=sy();L(N,T)},$$slots:{default:!0}}),Z(f);var p=z(f,2);Ft(p,{});var x=z(p,2);je(x,{level:3,mt:"10px",children:(N,E)=>{Pe();var T=Ae("代码");L(N,T)},$$slots:{default:!0}});var C=z(x,4),$=X(C);const m=Ne(()=>n().template||"");Pt($,{rows:10,placeholder:"请输入执行代码",style:"width: 100%",onchange:N=>{s(o,()=>({template:N.target.value}))},get value(){return h(m)}}),Z(C);var _=z(C,2),v=X(_);je(v,{level:3,mt:"10px",children:(N,E)=>{Pe();var T=Ae("输出参数");L(N,T)},$$slots:{default:!0}}),Z(_);var b=z(_,2);Yn(b,{}),L(l,c)},$$slots:{icon:!0,default:!0}})),ce({get data(){return n()},set data(a){n(a),y()}})}ie(bd,{data:{}},[],[],!0);var uy=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.23509 6.45329C4.85101 7.89148 4 9.84636 4 12C4 16.4183 7.58172 20 12 20C13.0808 20 14.1116 19.7857 15.0521 19.3972C15.1671 18.6467 14.9148 17.9266 14.8116 17.6746C14.582 17.115 13.8241 16.1582 12.5589 14.8308C12.2212 14.4758 12.2429 14.2035 12.3636 13.3943L12.3775 13.3029C12.4595 12.7486 12.5971 12.4209 14.4622 12.1248C15.4097 11.9746 15.6589 12.3533 16.0043 12.8777C16.0425 12.9358 16.0807 12.9928 16.1198 13.0499C16.4479 13.5297 16.691 13.6394 17.0582 13.8064C17.2227 13.881 17.428 13.9751 17.7031 14.1314C18.3551 14.504 18.3551 14.9247 18.3551 15.8472V15.9518C18.3551 16.3434 18.3168 16.6872 18.2566 16.9859C19.3478 15.6185 20 13.8854 20 12C20 8.70089 18.003 5.8682 15.1519 4.64482C14.5987 5.01813 13.8398 5.54726 13.575 5.91C13.4396 6.09538 13.2482 7.04166 12.6257 7.11976C12.4626 7.14023 12.2438 7.12589 12.012 7.11097C11.3905 7.07058 10.5402 7.01606 10.268 7.75495C10.0952 8.2232 10.0648 9.49445 10.6239 10.1543C10.7134 10.2597 10.7307 10.4547 10.6699 10.6735C10.59 10.9608 10.4286 11.1356 10.3783 11.1717C10.2819 11.1163 10.0896 10.8931 9.95938 10.7412C9.64554 10.3765 9.25405 9.92233 8.74797 9.78176C8.56395 9.73083 8.36166 9.68867 8.16548 9.64736C7.6164 9.53227 6.99443 9.40134 6.84992 9.09302C6.74442 8.8672 6.74488 8.55621 6.74529 8.22764C6.74529 7.8112 6.74529 7.34029 6.54129 6.88256C6.46246 6.70541 6.35689 6.56446 6.23509 6.45329ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z"></path></svg>'),cy=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),dy=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),fy=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),gy=ne('<div class="heading svelte-1vtcqdz" style="padding-top: 10px"><!> <!></div> <!>',1),hy=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),vy=ne('<div class="heading svelte-1vtcqdz" style="padding-top: 10px"><!> <!></div> <!>',1),py=ne('<div style="width: 100%"><!></div>'),my=ne('<div style="width: 100%"><!></div>'),yy=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),wy=ne('<div style="display: flex;gap: 2px;width: 100%;padding: 10px 0"><div><!></div> <div style="width: 100%"><!></div></div> <div class="heading svelte-1vtcqdz"><!> <!></div> <!> <div class="heading svelte-1vtcqdz" style="padding-top: 10px"><!> <!></div> <!> <!> <div class="radio-group svelte-1vtcqdz"><label class="svelte-1vtcqdz"><!>none</label> <label class="svelte-1vtcqdz"><!>form-data</label> <label class="svelte-1vtcqdz"><!>x-www-form-urlencoded</label> <label class="svelte-1vtcqdz"><!>json</label> <label class="svelte-1vtcqdz"><!>raw</label></div> <!> <!> <!> <!> <div class="heading svelte-1vtcqdz"><!> <!></div> <!>',1);const _y={hash:"svelte-1vtcqdz",code:".heading.svelte-1vtcqdz {display:flex;margin-bottom:10px;}.radio-group.svelte-1vtcqdz {display:flex;margin:10px 0;}.radio-group.svelte-1vtcqdz label:where(.svelte-1vtcqdz) {display:flex;font-size:14px;}"};function Cd(e,t){ue(t,!0),et(e,_y);const n=w(t,"data",7),r=xt(t,["$$slots","$$events","$$legacy","$$host","data"]),o=[{value:"get",label:"GET"},{value:"post",label:"POST"},{value:"put",label:"PUT"},{value:"delete",label:"DELETE"},{value:"head",label:"HEAD"},{value:"patch",label:"PATCH"}],i=pt(),{addParameter:s}=kn(),{updateNodeData:a}=Lt();return dn(e,ft({get data(){return n()}},()=>r,{icon:u=>{var c=uy();L(u,c)},children:(u,c)=>{var f=wy(),d=xe(f),g=X(d),p=X(g);const x=Ne(()=>n().method?[n().method]:["get"]);ln(p,{items:o,style:"width: 100%",placeholder:"请选择请求方式",onSelect:oe=>{const pe=oe.value;a(i,()=>({method:pe}))},get value(){return h(x)}}),Z(g);var C=z(g,2),$=X(C);const m=Ne(()=>n().url||"");St($,{placeholder:"请输入url",style:"width: 100%",onchange:oe=>{a(i,()=>({url:oe.target.value}))},get value(){return h(m)}}),Z(C),Z(d);var _=z(d,2),v=X(_);je(v,{level:3,children:(oe,pe)=>{Pe();var be=Ae("Http 头信息");L(oe,be)},$$slots:{default:!0}});var b=z(v,2);Ge(b,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{s(i,"headers")},children:(oe,pe)=>{var be=cy();L(oe,be)},$$slots:{default:!0}}),Z(_);var N=z(_,2);Ft(N,{dataKeyName:"headers"});var E=z(N,2),T=X(E);je(T,{level:3,children:(oe,pe)=>{Pe();var be=Ae("参数");L(oe,be)},$$slots:{default:!0}});var D=z(T,2);Ge(D,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{s(i,"urlParameters")},children:(oe,pe)=>{var be=dy();L(oe,be)},$$slots:{default:!0}}),Z(E);var V=z(E,2);Ft(V,{dataKeyName:"urlParameters"});var A=z(V,2);je(A,{level:3,mt:"10px",children:(oe,pe)=>{Pe();var be=Ae("Body");L(oe,be)},$$slots:{default:!0}});var O=z(A,2),R=X(O),S=X(R);const M=Ne(()=>!n().bodyType);St(S,{type:"radio",name:"bodyType",value:"",get checked(){return h(M)},onchange:oe=>{var pe;(pe=oe.target)!=null&&pe.checked&&a(i,{bodyType:""})}}),Pe(),Z(R);var k=z(R,2),P=X(k);const H=Ne(()=>n().bodyType==="form-data");St(P,{type:"radio",name:"bodyType",value:"form-data",get checked(){return h(H)},onchange:oe=>{var pe;(pe=oe.target)!=null&&pe.checked&&a(i,{bodyType:"form-data"})}}),Pe(),Z(k);var I=z(k,2),B=X(I);const F=Ne(()=>n().bodyType==="x-www-form-urlencoded");St(B,{type:"radio",name:"bodyType",value:"x-www-form-urlencoded",get checked(){return h(F)},onchange:oe=>{var pe;(pe=oe.target)!=null&&pe.checked&&a(i,{bodyType:"x-www-form-urlencoded"})}}),Pe(),Z(I);var K=z(I,2),se=X(K);const ee=Ne(()=>n().bodyType==="json");St(se,{type:"radio",name:"bodyType",value:"json",get checked(){return h(ee)},onchange:oe=>{var pe;(pe=oe.target)!=null&&pe.checked&&a(i,{bodyType:"json"})}}),Pe(),Z(K);var W=z(K,2),fe=X(W);const me=Ne(()=>n().bodyType==="raw");St(fe,{type:"radio",name:"bodyType",value:"raw",get checked(){return h(me)},onchange:oe=>{var pe;(pe=oe.target)!=null&&pe.checked&&a(i,{bodyType:"raw"})}}),Pe(),Z(W),Z(O);var Ce=z(O,2);{var he=oe=>{var pe=gy(),be=xe(pe),Ie=X(be);je(Ie,{level:3,children:(J,Re)=>{Pe();var le=Ae("参数");L(J,le)},$$slots:{default:!0}});var ht=z(Ie,2);Ge(ht,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{s(i,"fromData")},children:(J,Re)=>{var le=fy();L(J,le)},$$slots:{default:!0}}),Z(be);var dt=z(be,2);Ft(dt,{dataKeyName:"fromData"}),L(oe,pe)};ke(Ce,oe=>{n().bodyType==="form-data"&&oe(he)})}var ze=z(Ce,2);{var G=oe=>{var pe=vy(),be=xe(pe),Ie=X(be);je(Ie,{level:3,children:(J,Re)=>{Pe();var le=Ae("参数");L(J,le)},$$slots:{default:!0}});var ht=z(Ie,2);Ge(ht,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{s(i,"fromUrlencoded")},children:(J,Re)=>{var le=hy();L(J,le)},$$slots:{default:!0}}),Z(be);var dt=z(be,2);Ft(dt,{dataKeyName:"fromUrlencoded"}),L(oe,pe)};ke(ze,oe=>{n().bodyType==="x-www-form-urlencoded"&&oe(G)})}var ae=z(ze,2);{var Me=oe=>{var pe=py(),be=X(pe);Pt(be,{rows:"5",style:"width: 100%",placeholder:"请输入 json 信息",get value(){return n().bodyJson},oninput:Ie=>{a(i,{bodyJson:Ie.target.value})}}),Z(pe),L(oe,pe)};ke(ae,oe=>{n().bodyType==="json"&&oe(Me)})}var Le=z(ae,2);{var Xe=oe=>{var pe=my(),be=X(pe);Pt(be,{rows:"5",style:"width: 100%",placeholder:"请输入请求信息",get value(){return n().bodyRaw},oninput:Ie=>{a(i,{bodyRaw:Ie.target.value})}}),Z(pe),L(oe,pe)};ke(Le,oe=>{n().bodyType==="raw"&&oe(Xe)})}var te=z(Le,2),Fe=X(te);je(Fe,{level:3,mt:"10px",children:(oe,pe)=>{Pe();var be=Ae("输出参数");L(oe,be)},$$slots:{default:!0}});var Oe=z(Fe,2);Ge(Oe,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{s(i,"outputDefs")},children:(oe,pe)=>{var be=yy();L(oe,be)},$$slots:{default:!0}}),Z(te);var rt=z(te,2);Yn(rt,{}),L(u,f)},$$slots:{icon:!0,default:!0}})),ce({get data(){return n()},set data(l){n(l),y()}})}ie(Cd,{data:{}},[],[],!0);var xy=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 5C13.567 5 12 6.567 12 8.5C12 10.433 13.567 12 15.5 12C17.433 12 19 10.433 19 8.5C19 6.567 17.433 5 15.5 5ZM10 8.5C10 5.46243 12.4624 3 15.5 3C18.5376 3 21 5.46243 21 8.5C21 9.6575 20.6424 10.7315 20.0317 11.6175L22.7071 14.2929L21.2929 15.7071L18.6175 13.0317C17.7315 13.6424 16.6575 14 15.5 14C12.4624 14 10 11.5376 10 8.5ZM3 4H8V6H3V4ZM3 11H8V13H3V11ZM21 18V20H3V18H21Z"></path></svg>'),by=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),Cy=ne('<div class="heading svelte-15t2v24"><!> <!></div> <!> <!> <div class="setting-title svelte-15t2v24">知识库</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">获取数据量</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="heading svelte-15t2v24"><!></div> <!>',1);const ky={hash:"svelte-15t2v24",code:".heading.svelte-15t2v24 {display:flex;margin-bottom:10px;}.setting-title.svelte-15t2v24 {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-15t2v24 {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}"};function kd(e,t){ue(t,!0),et(e,ky);const n=w(t,"data",7),r=xt(t,["$$slots","$$events","$$legacy","$$host","data"]),o=pt(),{addParameter:i}=kn(),s=Ao();let a=Fn(Ht([]));rn(async()=>{var c,f;const u=await((f=(c=s.provider)==null?void 0:c.knowledge)==null?void 0:f.call(c));h(a).push(...u||[])});const{updateNodeData:l}=Lt();return kr(()=>{(!n().outputDefs||n().outputDefs.length===0)&&i(o,"outputDefs",{name:"documents",dataType:"Array",nameDisabled:!0,dataTypeDisabled:!0,addChildDisabled:!0,children:[{name:"title",dataType:"String",nameDisabled:!0,dataTypeDisabled:!0},{name:"content",dataType:"String",nameDisabled:!0,dataTypeDisabled:!0},{name:"documentId",dataType:"Number",nameDisabled:!0,dataTypeDisabled:!0},{name:"knowledgeId",dataType:"Number",nameDisabled:!0,dataTypeDisabled:!0}]})}),dn(e,ft({get data(){return n()}},()=>r,{icon:c=>{var f=xy();L(c,f)},children:(c,f)=>{var d=Cy(),g=xe(d),p=X(g);je(p,{level:3,children:(V,A)=>{Pe();var O=Ae("输入参数");L(V,O)},$$slots:{default:!0}});var x=z(p,2);Ge(x,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o)},children:(V,A)=>{var O=by();L(V,O)},$$slots:{default:!0}}),Z(g);var C=z(g,2);Ft(C,{});var $=z(C,2);je($,{level:3,mt:"10px",children:(V,A)=>{Pe();var O=Ae("知识库设置");L(V,O)},$$slots:{default:!0}});var m=z($,4),_=X(m);const v=Ne(()=>n().knowledgeId?[n().knowledgeId]:[]);ln(_,{get items(){return h(a)},style:"width: 100%",placeholder:"请选择知识库",onSelect:V=>{const A=V.value;l(o,()=>({knowledgeId:A}))},get value(){return h(v)}}),Z(m);var b=z(m,4),N=X(b);St(N,{placeholder:"搜索的数据条数",style:"width: 100%"}),Z(b);var E=z(b,2),T=X(E);je(T,{level:3,mt:"10px",children:(V,A)=>{Pe();var O=Ae("输出参数");L(V,O)},$$slots:{default:!0}}),Z(E);var D=z(E,2);Yn(D,{}),L(c,d)},$$slots:{icon:!0,default:!0}})),ce({get data(){return n()},set data(u){n(u),y()}})}ie(kd,{data:{}},[],[],!0);var $y=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>'),Ey=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),Sy=ne('<div class="heading svelte-15t2v24"><!> <!></div> <!> <!> <div class="setting-title svelte-15t2v24">API 服务商</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">API Key</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">关键字</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">数据量</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="setting-title svelte-15t2v24">其他参数</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="heading svelte-15t2v24"><!></div> <!>',1);const Py={hash:"svelte-15t2v24",code:".heading.svelte-15t2v24 {display:flex;margin-bottom:10px;}.setting-title.svelte-15t2v24 {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-15t2v24 {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}"};function $d(e,t){ue(t,!0),et(e,Py);const n=w(t,"data",7),r=xt(t,["$$slots","$$events","$$legacy","$$host","data"]),o=pt(),{addParameter:i}=kn(),s=Ao();let a=Fn(Ht([]));rn(async()=>{var c;const u=await((c=s.provider)==null?void 0:c.knowledge());h(a).push(...u||[])});const{updateNodeData:l}=Lt();return kr(()=>{(!n().outputDefs||n().outputDefs.length===0)&&i(o,"outputDefs",{name:"documents",dataType:"Array",nameDisabled:!0,dataTypeDisabled:!0,addChildDisabled:!0,children:[{name:"title",dataType:"String",nameDisabled:!0,dataTypeDisabled:!0},{name:"content",dataType:"String",nameDisabled:!0,dataTypeDisabled:!0},{name:"documentId",dataType:"Number",nameDisabled:!0,dataTypeDisabled:!0},{name:"knowledgeId",dataType:"Number",nameDisabled:!0,dataTypeDisabled:!0}]})}),dn(e,ft({get data(){return n()}},()=>r,{icon:c=>{var f=$y();L(c,f)},children:(c,f)=>{var d=Sy(),g=xe(d),p=X(g);je(p,{level:3,children:(k,P)=>{Pe();var H=Ae("输入参数");L(k,H)},$$slots:{default:!0}});var x=z(p,2);Ge(x,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o)},children:(k,P)=>{var H=Ey();L(k,H)},$$slots:{default:!0}}),Z(g);var C=z(g,2);Ft(C,{});var $=z(C,2);je($,{level:3,mt:"10px",children:(k,P)=>{Pe();var H=Ae("搜索引擎设置");L(k,H)},$$slots:{default:!0}});var m=z($,4),_=X(m);const v=Ne(()=>n().knowledgeId?[n().knowledgeId]:[]);ln(_,{get items(){return h(a)},style:"width: 100%",placeholder:"请选择 API 服务商",onSelect:k=>{const P=k.value;l(o,()=>({knowledgeId:P}))},get value(){return h(v)}}),Z(m);var b=z(m,4),N=X(b);St(N,{placeholder:"请输入 API Key",style:"width: 100%"}),Z(b);var E=z(b,4),T=X(E);St(T,{placeholder:"请输入关键字",style:"width: 100%"}),Z(E);var D=z(E,4),V=X(D);St(V,{placeholder:"搜索的数据条数",style:"width: 100%"}),Z(D);var A=z(D,4),O=X(A);Pt(O,{rows:3,placeholder:"请输入其他参数（Property 格式）",style:"width: 100%"}),Z(A);var R=z(A,2),S=X(R);je(S,{level:3,mt:"10px",children:(k,P)=>{Pe();var H=Ae("输出参数");L(k,H)},$$slots:{default:!0}}),Z(R);var M=z(R,2);Yn(M,{}),L(c,d)},$$slots:{icon:!0,default:!0}})),ce({get data(){return n()},set data(u){n(u),y()}})}ie($d,{data:{}},[],[],!0);var Ny=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path></svg>'),Ty=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),My=ne('<div class="heading svelte-md8tgj"><!> <!></div> <!> <div class="heading svelte-md8tgj"><!></div> <!>',1);const Hy={hash:"svelte-md8tgj",code:".heading.svelte-md8tgj {display:flex;margin-bottom:10px;}.loop_handle_wrapper ::after {content:'循环体';width:100px;height:20px;background:#000;color:#fff;display:flex;justify-content:center;align-items:center;}"};function Ed(e,t){ue(t,!0),et(e,Hy);const n=w(t,"data",7),r=xt(t,["$$slots","$$events","$$legacy","$$host","data"]),o=pt(),{addParameter:i}=kn(),s=Ao();let a=Fn(Ht([]));return rn(async()=>{var u;const l=await((u=s.provider)==null?void 0:u.knowledge());h(a).push(...l||[])}),dn(e,ft({get data(){return n()}},()=>r,{icon:c=>{var f=Ny();L(c,f)},handle:c=>{er(c,{type:"source",get position(){return $e.Bottom},id:"loop_handle",style:"bottom: -12px;width: 100px",class:"loop_handle_wrapper"})},children:(c,f)=>{var d=My(),g=xe(d),p=X(g);je(p,{level:3,children:(v,b)=>{Pe();var N=Ae("循环变量");L(v,N)},$$slots:{default:!0}});var x=z(p,2);Ge(x,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o)},children:(v,b)=>{var N=Ty();L(v,N)},$$slots:{default:!0}}),Z(g);var C=z(g,2);Ft(C,{});var $=z(C,2),m=X($);je(m,{level:3,mt:"10px",children:(v,b)=>{Pe();var N=Ae("输出参数");L(v,N)},$$slots:{default:!0}}),Z($);var _=z($,2);Yn(_,{}),L(c,d)},$$slots:{icon:!0,handle:!0,default:!0}})),ce({get data(){return n()},set data(l){n(l),y()}})}ie(Ed,{data:{}},[],[],!0);var Vy=_e('<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" p-id="2577" width="200" height="200"><path d="M312.096 408.576l67.84 67.84 45.312-45.216a32 32 0 0 1 45.248 45.248l-45.28 45.248 90.496 90.496 45.28-45.216a32 32 0 0 1 45.248 45.248l-45.248 45.248 67.904 67.872-90.528 90.528a224.064 224.064 0 0 1-292.544 21.024L176.32 906.368a32 32 0 0 1-45.248-45.248l69.504-69.472a224.064 224.064 0 0 1 21.024-292.576l90.496-90.496z m0 90.496L266.848 544.32a160 160 0 0 0-4.8 221.28l4.8 4.992a160 160 0 0 0 221.248 4.8l5.024-4.8 45.248-45.248-226.272-226.24z m610.272-384a32 32 0 0 1 0 45.248l-69.44 69.504a224.064 224.064 0 0 1-21.056 292.544l-90.528 90.528-316.8-316.8 90.56-90.496a224.064 224.064 0 0 1 292.544-21.024l69.44-69.504a32 32 0 0 1 45.28 0zM565.344 246.08l-5.024 4.8-45.248 45.248 226.272 226.272 45.248-45.248a160 160 0 0 0 4.8-221.28l-4.8-4.992a160 160 0 0 0-221.248-4.8z" p-id="2578"></path></svg>'),Dy=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),Ay=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>'),Ly=ne('<div class="heading svelte-15t2v24"><!> <!></div> <!> <!> <div class="setting-title svelte-15t2v24">选择内部接口</div> <div class="setting-item svelte-15t2v24"><!></div> <div class="heading svelte-15t2v24"><!> <!></div> <!>',1);const Oy={hash:"svelte-15t2v24",code:".heading.svelte-15t2v24 {display:flex;margin-bottom:10px;}.setting-title.svelte-15t2v24 {font-size:12px;color:#999;margin-bottom:4px;margin-top:10px;}.setting-item.svelte-15t2v24 {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}"};function Sd(e,t){ue(t,!0),et(e,Oy);const n=w(t,"data",7),r=xt(t,["$$slots","$$events","$$legacy","$$host","data"]),o=pt(),{addParameter:i}=kn(),{updateNodeData:s}=Lt(),a=Ao();let l=Fn(Ht([]));return rn(async()=>{var c,f;const u=await((f=(c=a.provider)==null?void 0:c.internal)==null?void 0:f.call(c));h(l).push(...u||[])}),dn(e,ft({get data(){return n()}},()=>r,{icon:c=>{var f=Vy();L(c,f)},children:(c,f)=>{var d=Ly(),g=xe(d),p=X(g);je(p,{level:3,children:(D,V)=>{Pe();var A=Ae("输入参数");L(D,A)},$$slots:{default:!0}});var x=z(p,2);Ge(x,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o)},children:(D,V)=>{var A=Dy();L(D,A)},$$slots:{default:!0}}),Z(g);var C=z(g,2);Ft(C,{});var $=z(C,2);je($,{level:3,mt:"10px",children:(D,V)=>{Pe();var A=Ae("接口");L(D,A)},$$slots:{default:!0}});var m=z($,4),_=X(m);const v=Ne(()=>n().method?[n().method]:[""]);ln(_,{get items(){return h(l)},style:"width: 100%",placeholder:"请选择内部接口",onSelect:D=>{const V=D.value;s(o,()=>({method:V}))},get value(){return h(v)}}),Z(m);var b=z(m,2),N=X(b);je(N,{level:3,mt:"10px",children:(D,V)=>{Pe();var A=Ae("输出参数");L(D,A)},$$slots:{default:!0}});var E=z(N,2);Ge(E,{class:"input-btn-more",style:"margin-left: auto",onclick:()=>{i(o,"outputDefs")},children:(D,V)=>{var A=Ay();L(D,A)},$$slots:{default:!0}}),Z(b);var T=z(b,2);Yn(T,{}),L(c,d)},$$slots:{icon:!0,default:!0}})),ce({get data(){return n()},set data(u){n(u),y()}})}ie(Sd,{data:{}},[],[],!0);const Iy={startNode:hd,codeNode:xd,llmNode:_d,templateNode:bd,httpNode:Cd,knowledgeNode:kd,searchEngineNode:$d,loopNode:Ed,internalNode:Sd,endNode:yd};var zy=ne("<!> ",1);function Pd(e,t){ue(t,!0);const n=w(t,"icon",7),r=w(t,"title",7),o=w(t,"type",7),i=w(t,"description",7),s=w(t,"extra",7);return Ge(e,{draggable:!0,ondragstart:l=>{if(!l.dataTransfer)return null;const u={type:o(),data:{title:r(),description:i(),systemPrompt:"",userPrompt:"",...s()}};l.dataTransfer.setData("application/tinyflow",JSON.stringify(u)),l.dataTransfer.effectAllowed="move"},children:(l,u)=>{var c=zy(),f=xe(c);dl(f,n);var d=z(f);Ee(()=>Bt(d,` ${r()??""}`)),L(l,c)},$$slots:{default:!0}}),ce({get icon(){return n()},set icon(l){n(l),y()},get title(){return r()},set title(l){r(l),y()},get type(){return o()},set type(l){o(l),y()},get description(){return i()},set description(l){i(l),y()},get extra(){return s()},set extra(l){s(l),y()}})}ie(Pd,{icon:{},title:{},type:{},description:{},extra:{}},[],[],!0);var Ry=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"></path></svg>'),By=_e('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.1642 12L12.9571 5.79291L11.5429 7.20712L16.3358 12L11.5429 16.7929L12.9571 18.2071L19.1642 12ZM13.5143 12L7.30722 5.79291L5.89301 7.20712L10.6859 12L5.89301 16.7929L7.30722 18.2071L13.5143 12Z"></path></svg>'),Yy=ne('<div><div class="tf-toolbar-container "><div class="tf-toolbar-container-header"><!></div> <div class="tf-toolbar-container-body"><div class="tf-toolbar-container-base"></div> <div class="tf-toolbar-container-tools"><!></div></div></div> <!></div>');function Nd(e){let t=Fn("base"),n=Fn("show");const r=[{icon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path></svg>',title:"开始节点",type:"startNode",description:"开始定义输入参数"},{icon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path></svg>',title:"循环",type:"loopNode",description:"用于循环执行任务"},{icon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.7134 7.12811L20.4668 7.69379C20.2864 8.10792 19.7136 8.10792 19.5331 7.69379L19.2866 7.12811C18.8471 6.11947 18.0555 5.31641 17.0677 4.87708L16.308 4.53922C15.8973 4.35653 15.8973 3.75881 16.308 3.57612L17.0252 3.25714C18.0384 2.80651 18.8442 1.97373 19.2761 0.930828L19.5293 0.319534C19.7058 -0.106511 20.2942 -0.106511 20.4706 0.319534L20.7238 0.930828C21.1558 1.97373 21.9616 2.80651 22.9748 3.25714L23.6919 3.57612C24.1027 3.75881 24.1027 4.35653 23.6919 4.53922L22.9323 4.87708C21.9445 5.31641 21.1529 6.11947 20.7134 7.12811ZM9 2C13.0675 2 16.426 5.03562 16.9337 8.96494L19.1842 12.5037C19.3324 12.7367 19.3025 13.0847 18.9593 13.2317L17 14.071V17C17 18.1046 16.1046 19 15 19H13.001L13 22H4L4.00025 18.3061C4.00033 17.1252 3.56351 16.0087 2.7555 15.0011C1.65707 13.6313 1 11.8924 1 10C1 5.58172 4.58172 2 9 2ZM9 4C5.68629 4 3 6.68629 3 10C3 11.3849 3.46818 12.6929 4.31578 13.7499C5.40965 15.114 6.00036 16.6672 6.00025 18.3063L6.00013 20H11.0007L11.0017 17H15V12.7519L16.5497 12.0881L15.0072 9.66262L14.9501 9.22118C14.5665 6.25141 12.0243 4 9 4ZM19.4893 16.9929L21.1535 18.1024C22.32 16.3562 23 14.2576 23 12.0001C23 11.317 22.9378 10.6486 22.8186 10L20.8756 10.5C20.9574 10.9878 21 11.489 21 12.0001C21 13.8471 20.4436 15.5642 19.4893 16.9929Z"></path></svg>',title:"大模型",type:"llmNode",description:"使用大模型处理问题"},{icon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 5C13.567 5 12 6.567 12 8.5C12 10.433 13.567 12 15.5 12C17.433 12 19 10.433 19 8.5C19 6.567 17.433 5 15.5 5ZM10 8.5C10 5.46243 12.4624 3 15.5 3C18.5376 3 21 5.46243 21 8.5C21 9.6575 20.6424 10.7315 20.0317 11.6175L22.7071 14.2929L21.2929 15.7071L18.6175 13.0317C17.7315 13.6424 16.6575 14 15.5 14C12.4624 14 10 11.5376 10 8.5ZM3 4H8V6H3V4ZM3 11H8V13H3V11ZM21 18V20H3V18H21Z"></path></svg>',title:"知识库",type:"knowledgeNode",description:"通过知识库获取内容"},{icon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',title:"搜索引擎",type:"searchEngineNode",description:"通过搜索引擎搜索内容"},{icon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.23509 6.45329C4.85101 7.89148 4 9.84636 4 12C4 16.4183 7.58172 20 12 20C13.0808 20 14.1116 19.7857 15.0521 19.3972C15.1671 18.6467 14.9148 17.9266 14.8116 17.6746C14.582 17.115 13.8241 16.1582 12.5589 14.8308C12.2212 14.4758 12.2429 14.2035 12.3636 13.3943L12.3775 13.3029C12.4595 12.7486 12.5971 12.4209 14.4622 12.1248C15.4097 11.9746 15.6589 12.3533 16.0043 12.8777C16.0425 12.9358 16.0807 12.9928 16.1198 13.0499C16.4479 13.5297 16.691 13.6394 17.0582 13.8064C17.2227 13.881 17.428 13.9751 17.7031 14.1314C18.3551 14.504 18.3551 14.9247 18.3551 15.8472V15.9518C18.3551 16.3434 18.3168 16.6872 18.2566 16.9859C19.3478 15.6185 20 13.8854 20 12C20 8.70089 18.003 5.8682 15.1519 4.64482C14.5987 5.01813 13.8398 5.54726 13.575 5.91C13.4396 6.09538 13.2482 7.04166 12.6257 7.11976C12.4626 7.14023 12.2438 7.12589 12.012 7.11097C11.3905 7.07058 10.5402 7.01606 10.268 7.75495C10.0952 8.2232 10.0648 9.49445 10.6239 10.1543C10.7134 10.2597 10.7307 10.4547 10.6699 10.6735C10.59 10.9608 10.4286 11.1356 10.3783 11.1717C10.2819 11.1163 10.0896 10.8931 9.95938 10.7412C9.64554 10.3765 9.25405 9.92233 8.74797 9.78176C8.56395 9.73083 8.36166 9.68867 8.16548 9.64736C7.6164 9.53227 6.99443 9.40134 6.84992 9.09302C6.74442 8.8672 6.74488 8.55621 6.74529 8.22764C6.74529 7.8112 6.74529 7.34029 6.54129 6.88256C6.46246 6.70541 6.35689 6.56446 6.23509 6.45329ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z"></path></svg>',title:"Http 请求",type:"httpNode",description:"通过 HTTP 请求获取数据"},{icon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12L15.9289 19.0711L14.5147 17.6569L20.1716 12L14.5147 6.34317L15.9289 4.92896L23 12ZM3.82843 12L9.48528 17.6569L8.07107 19.0711L1 12L8.07107 4.92896L9.48528 6.34317L3.82843 12Z"></path></svg>',title:"动态代码",type:"codeNode",description:"动态执行代码"},{icon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4ZM4 5V19H20V5H4ZM7 8H17V11H15V10H13V14H14.5V16H9.5V14H11V10H9V11H7V8Z"></path></svg>',title:"内容模板",type:"templateNode",description:"通过模板引擎生成内容"},{icon:'<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" p-id="2577" width="200" height="200"><path d="M312.096 408.576l67.84 67.84 45.312-45.216a32 32 0 0 1 45.248 45.248l-45.28 45.248 90.496 90.496 45.28-45.216a32 32 0 0 1 45.248 45.248l-45.248 45.248 67.904 67.872-90.528 90.528a224.064 224.064 0 0 1-292.544 21.024L176.32 906.368a32 32 0 0 1-45.248-45.248l69.504-69.472a224.064 224.064 0 0 1 21.024-292.576l90.496-90.496z m0 90.496L266.848 544.32a160 160 0 0 0-4.8 221.28l4.8 4.992a160 160 0 0 0 221.248 4.8l5.024-4.8 45.248-45.248-226.272-226.24z m610.272-384a32 32 0 0 1 0 45.248l-69.44 69.504a224.064 224.064 0 0 1-21.056 292.544l-90.528 90.528-316.8-316.8 90.56-90.496a224.064 224.064 0 0 1 292.544-21.024l69.44-69.504a32 32 0 0 1 45.28 0zM565.344 246.08l-5.024 4.8-45.248 45.248 226.272 226.272 45.248-45.248a160 160 0 0 0 4.8-221.28l-4.8-4.992a160 160 0 0 0-221.248-4.8z" p-id="2578"></path></svg>',title:"内部接口",type:"internalNode",description:"执行内部提供接口"},{icon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 5.1438V16.0002H18.3391L6 5.1438ZM4 2.932C4 2.07155 5.01456 1.61285 5.66056 2.18123L21.6501 16.2494C22.3423 16.8584 21.9116 18.0002 20.9896 18.0002H6V22H4V2.932Z"></path></svg>',title:"结束节点",type:"endNode",description:"结束定义输出参数"}],o=[{label:"基础节点",value:"base"},{label:"业务工具",value:"tools"}];var i=Yy(),s=X(i),a=X(s),l=X(a);Wc(l,{style:"width: 100%",items:o,onChange:p=>{U(t,Ht(p.value.toString()))}}),Z(a);var u=z(a,2),c=X(u);Yt(c,21,()=>r,oi,(p,x)=>{Pd(p,ft(()=>h(x)))}),Z(c);var f=z(c,2),d=X(f);Ge(d,{children:(p,x)=>{Pe();var C=Ae("测试业务按钮");L(p,C)},$$slots:{default:!0}}),Z(f),Z(u),Z(s);var g=z(s,2);Ge(g,{onclick:()=>{U(n,Ht(h(n)?"":"show"))},children:(p,x)=>{var C=tt(),$=xe(C);{var m=v=>{var b=Ry();L(v,b)},_=v=>{var b=By();L(v,b)};ke($,v=>{h(n)==="show"?v(m):v(_,!1)})}L(p,C)},$$slots:{default:!0}}),Z(i),Ee(()=>{$t(i,1,`tf-toolbar ${h(n)??""}`),de(c,"style",`display: ${(h(t)==="base"?"flex":"none")??""}`),de(f,"style",`display: ${(h(t)!=="base"?"flex":"none")??""}`)}),L(e,i)}ie(Nd,{},[],[],!0);const Zy=()=>{const{nodeLookup:e}=Ue();return{getNode:n=>{var o;return(o=q(e).get(n))==null?void 0:o.internals.userNode}}},Xy=()=>{const{nodes:e}=Ue();return{ensureParentInNodesBefore:(n,r)=>{e.update(o=>{let i=-1;for(let l=0;l<o.length;l++)if(o[l].id===n){i=l;break}if(i<=0)return o;let s=-1;for(let l=0;l<i;l++)if(o[l].parentId===n||o[l].id===r){s=l;break}if(s==-1)return o;const a=o[i];for(let l=i;l>s;l--)o[l]=o[l-1];return o[s]=a,o})}}},Fy=()=>{const{edges:e}=Ue();return{getEdgesByTarget:n=>q(e).filter(o=>o.target===n)}};var Wy=ne('<div class="panel-content svelte-1oe15vw"><div>边属性设置</div> <div class="setting-title svelte-1oe15vw">边条件设置</div> <div class="setting-item"><!></div></div>'),Ky=ne("<!> <!> <!> <!>",1),qy=ne('<div style="position: relative; height: 100%; width: 100%"><!> <!></div>');const Gy={hash:"svelte-1oe15vw",code:".panel-content.svelte-1oe15vw {padding:10px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);width:200px;border:1px solid #efefef;}.setting-title.svelte-1oe15vw {margin:10px 0;font-size:12px;color:#999;}"};function Td(e,t){ue(t,!0),et(e,Gy);const n=w(t,"onInit",7),r=Lt();n()(r);let o=Fn(!1);const i=_=>{_.preventDefault(),_.dataTransfer&&(_.dataTransfer.dropEffect="move")},s=_=>{var T;_.preventDefault();const v=r.screenToFlowPosition({x:_.clientX-250,y:_.clientY-100}),b=(T=_.dataTransfer)==null?void 0:T.getData("application/tinyflow"),N=b?JSON.parse(b):{},E={id:`node_${Kr()}`,position:v,data:{},...N};Bi.addNode(E),Bi.selectNodeOnly(E.id)},{getNode:a}=Zy(),l=_=>{const v=a(_.source),b=a(_.target);if(_.sourceHandle==="loop_handle"||v.parentId){const N=r.getEdges();for(let E of N)if(E.target===_.target){const T=a(E.source);if(_.sourceHandle==="loop_handle"&&T.parentId!==v.id||v.parentId&&T.parentId!==v.parentId)return!1}}return!(!v.parentId&&b.parentId&&b.parentId!==v.id)},{ensureParentInNodesBefore:u}=Xy(),c=(_,v)=>{if(!v.isValid)return;const b=v.toNode;if(b.parentId)return;const N=v.fromNode,E=v.fromHandle,T={position:{...b.position}};if(E.id==="loop_handle"?T.parentId=N.id:N.parentId&&(T.parentId=N.parentId),T.parentId){const D=a(T.parentId);T.position={x:b.position.x-D.position.x,y:b.position.y-D.position.y},u(T.parentId,b.id),r.updateNode(b.id,T)}},{getEdgesByTarget:f}=Fy(),d=_=>{_.edges.forEach(b=>{const N=a(b.target);if(N.parentId){const E=f(b.target),T=a(N.parentId);if(E.length===0)r.updateNode(N.id,{parentId:void 0,position:{x:N.position.x+T.position.x,y:N.position.y+T.position.y}});else{let D=!1;for(let V=0;V<E.length;V++){const A=E[V],O=a(A.source);if(O.parentId||O.type==="loopNode"){D=!0;break}}D||r.updateNode(N.id,{parentId:void 0,position:{x:N.position.x+T.position.x,y:N.position.y+T.position.y}})}}})},g=(_,v)=>{console.log("onconnectstart: ",_,v)},p=_=>{console.log("onconnect: ",_)};var x=qy(),C=X(x);Nd(C);var $=z(C,2);const m=Ne(()=>({markerEnd:{type:_o.ArrowClosed,width:20,height:20}}));return Pc($,ft({nodeTypes:Iy},Bi,{class:"tinyflow-logo",isValidConnection:l,onconnectend:c,onconnectstart:g,onconnect:p,connectionRadius:50,ondelete:d,onclick:_=>{const v=_.target;v.classList.contains("svelte-flow__edge-interaction")||v.classList.contains("panel-content")||v.closest(".panel-content")||U(o,!1)},get defaultEdgeOptions(){return h(m)},$$events:{drop:s,dragover:i,edgeclick:()=>{U(o,!0)}},children:(_,v)=>{var b=Ky(),N=xe(b);Ic(N,{});var E=z(N,2);Ac(E,{});var T=z(E,2);Rc(T,{});var D=z(T,2);{var V=A=>{So(A,{children:(O,R)=>{var S=Wy(),M=z(X(S),4),k=X(M);Pt(k,{rows:3,placeholder:"请输入边条件",style:"width: 100%",oninput:P=>{}}),Z(M),Z(S),L(O,S)},$$slots:{default:!0}})};ke(D,A=>{h(o)&&A(V)})}L(_,b)},$$slots:{default:!0}})),Z(x),L(e,x),ce({get onInit(){return n()},set onInit(_){n(_),y()}})}ie(Td,{onInit:{}},[],[],!0);function Uy(e,t){ue(t,!0);const n=w(t,"options",7),r=w(t,"onInit",7),{data:o}=n();return Bi.init((o==null?void 0:o.nodes)||[],(o==null?void 0:o.edges)||[]),Sr("tinyflow_options",n()),Nc(e,{fitView:!0,children:(i,s)=>{Td(i,{get onInit(){return r()}})},$$slots:{default:!0}}),ce({get options(){return n()},set options(i){n(i),y()},get onInit(){return r()},set onInit(i){r(i),y()}})}customElements.define("tinyflow-component",ie(Uy,{options:{},onInit:{}},[],[],!1)),We.Tinyflow=J2,Object.defineProperty(We,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=index.umd.js.map
diff --git a/marketing-ui/admin-ui/src/components/Tooltip/index.ts b/marketing-ui/admin-ui/src/components/Tooltip/index.ts
new file mode 100644
index 0000000..ab66ddf
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Tooltip/index.ts
@@ -0,0 +1,3 @@
+import Tooltip from './src/Tooltip.vue'
+
+export { Tooltip }
diff --git a/marketing-ui/admin-ui/src/components/Tooltip/src/Tooltip.vue b/marketing-ui/admin-ui/src/components/Tooltip/src/Tooltip.vue
new file mode 100644
index 0000000..1a2e09c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Tooltip/src/Tooltip.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'Tooltip' })
+
+defineProps({
+  title: propTypes.string.def(''),
+  message: propTypes.string.def(''),
+  icon: propTypes.string.def('ep:question-filled')
+})
+</script>
+<template>
+  <span>{{ title }}</span>
+  <ElTooltip :content="message" placement="top">
+    <Icon :icon="icon" class="relative top-1px ml-1px" />
+  </ElTooltip>
+</template>
diff --git a/marketing-ui/admin-ui/src/components/UploadFile/index.ts b/marketing-ui/admin-ui/src/components/UploadFile/index.ts
new file mode 100644
index 0000000..97c1d66
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/UploadFile/index.ts
@@ -0,0 +1,5 @@
+import UploadImg from './src/UploadImg.vue'
+import UploadImgs from './src/UploadImgs.vue'
+import UploadFile from './src/UploadFile.vue'
+
+export { UploadImg, UploadImgs, UploadFile }
diff --git a/marketing-ui/admin-ui/src/components/UploadFile/src/UploadFile.vue b/marketing-ui/admin-ui/src/components/UploadFile/src/UploadFile.vue
new file mode 100644
index 0000000..9d0a904
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/UploadFile/src/UploadFile.vue
@@ -0,0 +1,230 @@
+<template>
+  <div v-if="!disabled" class="upload-file">
+    <el-upload
+      ref="uploadRef"
+      v-model:file-list="fileList"
+      :action="uploadUrl"
+      :auto-upload="autoUpload"
+      :before-upload="beforeUpload"
+      :disabled="disabled"
+      :drag="drag"
+      :http-request="httpRequest"
+      :limit="props.limit"
+      :multiple="props.limit > 1"
+      :on-error="excelUploadError"
+      :on-exceed="handleExceed"
+      :on-preview="handlePreview"
+      :on-remove="handleRemove"
+      :on-success="handleFileSuccess"
+      :show-file-list="true"
+      class="upload-file-uploader"
+      name="file"
+    >
+      <el-button type="primary">
+        <Icon icon="ep:upload-filled" />
+        选取文件
+      </el-button>
+      <template v-if="isShowTip" #tip>
+        <div style="font-size: 8px">
+          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+        </div>
+        <div style="font-size: 8px">
+          格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
+        </div>
+      </template>
+      <template #file="row">
+        <div class="flex items-center">
+          <span>{{ row.file.name }}</span>
+          <div class="ml-10px">
+            <el-link
+              :href="row.file.url"
+              :underline="false"
+              download
+              target="_blank"
+              type="primary"
+            >
+              下载
+            </el-link>
+          </div>
+          <div class="ml-10px">
+            <el-button link type="danger" @click="handleRemove(row.file)"> 删除</el-button>
+          </div>
+        </div>
+      </template>
+    </el-upload>
+  </div>
+
+  <!-- 上传操作禁用时 -->
+  <div v-if="disabled" class="upload-file">
+    <div v-for="(file, index) in fileList" :key="index" class="flex items-center file-list-item">
+      <span>{{ file.name }}</span>
+      <div class="ml-10px">
+        <el-link :href="file.url" :underline="false" download target="_blank" type="primary">
+          下载
+        </el-link>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import { isString } from '@/utils/is'
+import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { UploadFile } from 'element-plus/es/components/upload/src/upload'
+
+defineOptions({ name: 'UploadFile' })
+
+const message = useMessage() // 消息弹窗
+const emit = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
+  fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileSize: propTypes.number.def(5), // 大小限制(MB)
+  limit: propTypes.number.def(5), // 数量限制
+  autoUpload: propTypes.bool.def(true), // 自动上传
+  drag: propTypes.bool.def(false), // 拖拽上传
+  isShowTip: propTypes.bool.def(true), // 是否显示提示
+  disabled: propTypes.bool.def(false) // 是否禁用上传组件 ==> 非必传（默认为 false）
+})
+
+// ========== 上传相关 ==========
+const uploadRef = ref<UploadInstance>()
+const uploadList = ref<UploadUserFile[]>([])
+const fileList = ref<UploadUserFile[]>([])
+const uploadNumber = ref<number>(0)
+
+const { uploadUrl, httpRequest } = useUpload()
+
+// 文件上传之前判断
+const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => {
+  if (fileList.value.length >= props.limit) {
+    message.error(`上传文件数量不能超过${props.limit}个!`)
+    return false
+  }
+  let fileExtension = ''
+  if (file.name.lastIndexOf('.') > -1) {
+    fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
+  }
+  const isImg = props.fileType.some((type: string) => {
+    if (file.type.indexOf(type) > -1) return true
+    return !!(fileExtension && fileExtension.indexOf(type) > -1)
+  })
+  const isLimit = file.size < props.fileSize * 1024 * 1024
+  if (!isImg) {
+    message.error(`文件格式不正确, 请上传${props.fileType.join('/')}格式!`)
+    return false
+  }
+  if (!isLimit) {
+    message.error(`上传文件大小不能超过${props.fileSize}MB!`)
+    return false
+  }
+  message.success('正在上传文件，请稍候...')
+  uploadNumber.value++
+}
+// 处理上传的文件发生变化
+// const handleFileChange = (uploadFile: UploadFile): void => {
+//   uploadRef.value.data.path = uploadFile.name
+// }
+// 文件上传成功
+const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => {
+  message.success('上传成功')
+  // 删除自身
+  const index = fileList.value.findIndex((item) => item.response?.data === res.data)
+  fileList.value.splice(index, 1)
+  uploadList.value.push({ name: res.data, url: res.data })
+  if (uploadList.value.length == uploadNumber.value) {
+    fileList.value.push(...uploadList.value)
+    uploadList.value = []
+    uploadNumber.value = 0
+    emitUpdateModelValue()
+  }
+}
+// 文件数超出提示
+const handleExceed: UploadProps['onExceed'] = (): void => {
+  message.error(`上传文件数量不能超过${props.limit}个!`)
+}
+// 上传错误提示
+const excelUploadError: UploadProps['onError'] = (): void => {
+  message.error('导入数据失败，请您重新上传！')
+}
+// 删除上传文件
+const handleRemove = (file: UploadFile) => {
+  const index = fileList.value.map((f) => f.name).indexOf(file.name)
+  if (index > -1) {
+    fileList.value.splice(index, 1)
+    emitUpdateModelValue()
+  }
+}
+const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
+  console.log(uploadFile)
+}
+
+// 监听模型绑定值变动
+watch(
+  () => props.modelValue,
+  (val: string | string[]) => {
+    if (!val) {
+      fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
+      return
+    }
+
+    fileList.value = [] // 保障数据为空
+    // 情况1：字符串
+    if (isString(val)) {
+      fileList.value.push(
+        ...val.split(',').map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url }))
+      )
+      return
+    }
+    // 情况2：数组
+    fileList.value.push(
+      ...(val as string[]).map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url }))
+    )
+  },
+  { immediate: true, deep: true }
+)
+// 发送文件链接列表更新
+const emitUpdateModelValue = () => {
+  // 情况1：数组结果
+  let result: string | string[] = fileList.value.map((file) => file.url!)
+  // 情况2：逗号分隔的字符串
+  if (props.limit === 1 || isString(props.modelValue)) {
+    result = result.join(',')
+  }
+  emit('update:modelValue', result)
+}
+</script>
+<style lang="scss" scoped>
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+
+:deep(.upload-file-list .el-upload-list__item) {
+  position: relative;
+  margin-bottom: 10px;
+  line-height: 2;
+  border: 1px solid #e4e7ed;
+}
+
+:deep(.el-upload-list__item-file-name) {
+  max-width: 250px;
+}
+
+:deep(.upload-file-list .ele-upload-list__item-content) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+
+:deep(.ele-upload-list__item-content-action .el-link) {
+  margin-right: 10px;
+}
+
+.file-list-item {
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/UploadFile/src/UploadImg.vue b/marketing-ui/admin-ui/src/components/UploadFile/src/UploadImg.vue
new file mode 100644
index 0000000..ac0c162
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/UploadFile/src/UploadImg.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="upload-box">
+    <el-upload
+      :id="uuid"
+      :accept="fileType.join(',')"
+      :action="uploadUrl"
+      :before-upload="beforeUpload"
+      :class="['upload', drag ? 'no-border' : '']"
+      :disabled="disabled"
+      :drag="drag"
+      :http-request="httpRequest"
+      :multiple="false"
+      :on-error="uploadError"
+      :on-success="uploadSuccess"
+      :show-file-list="false"
+    >
+      <template v-if="modelValue">
+        <img :src="modelValue" class="upload-image" />
+        <div class="upload-handle" @click.stop>
+          <div v-if="!disabled" class="handle-icon" @click="editImg">
+            <Icon icon="ep:edit" />
+            <span v-if="showBtnText">{{ t('action.edit') }}</span>
+          </div>
+          <div class="handle-icon" @click="imagePreview(modelValue)">
+            <Icon icon="ep:zoom-in" />
+            <span v-if="showBtnText">{{ t('action.detail') }}</span>
+          </div>
+          <div v-if="showDelete && !disabled" class="handle-icon" @click="deleteImg">
+            <Icon icon="ep:delete" />
+            <span v-if="showBtnText">{{ t('action.del') }}</span>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="upload-empty">
+          <slot name="empty">
+            <Icon icon="ep:plus" />
+            <!-- <span>请上传图片</span> -->
+          </slot>
+        </div>
+      </template>
+    </el-upload>
+    <div class="el-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UploadProps } from 'element-plus'
+
+import { generateUUID } from '@/utils'
+import { propTypes } from '@/utils/propTypes'
+import { createImageViewer } from '@/components/ImageViewer'
+import { useUpload } from '@/components/UploadFile/src/useUpload'
+
+defineOptions({ name: 'UploadImg' })
+
+type FileTypes =
+  | 'image/apng'
+  | 'image/bmp'
+  | 'image/gif'
+  | 'image/jpeg'
+  | 'image/pjpeg'
+  | 'image/png'
+  | 'image/svg+xml'
+  | 'image/tiff'
+  | 'image/webp'
+  | 'image/x-icon'
+
+// 接受父组件参数
+const props = defineProps({
+  modelValue: propTypes.string.def(''),
+  drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false）
+  fileSize: propTypes.number.def(5), // 图片大小限制 ==> 非必传（默认为 5M）
+  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）
+  showDelete: propTypes.bool.def(true), // 是否显示删除按钮
+  showBtnText: propTypes.bool.def(true) // 是否显示按钮文字
+})
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+// 生成组件唯一id
+const uuid = ref('id-' + generateUUID())
+// 查看图片
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    zIndex: 9999999,
+    urlList: [imgUrl]
+  })
+}
+
+const emit = defineEmits(['update:modelValue'])
+
+const deleteImg = () => {
+  emit('update:modelValue', '')
+}
+
+const { uploadUrl, httpRequest } = useUpload()
+
+const editImg = () => {
+  const dom = document.querySelector(`#${uuid.value} .el-upload__input`)
+  dom && dom.dispatchEvent(new MouseEvent('click'))
+}
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
+  const imgType = props.fileType
+  if (!imgType.includes(rawFile.type as FileTypes))
+    message.notifyWarning('上传图片不符合所需的格式！')
+  if (!imgSize) message.notifyWarning(`上传图片大小不能超过 ${props.fileSize}M！`)
+  return imgType.includes(rawFile.type as FileTypes) && imgSize
+}
+
+// 图片上传成功提示
+const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
+  message.success('上传成功')
+  emit('update:modelValue', res.data)
+}
+
+// 图片上传错误提示
+const uploadError = () => {
+  message.notifyError('图片上传失败，请您重新上传！')
+}
+</script>
+<style lang="scss" scoped>
+.is-error {
+  .upload {
+    :deep(.el-upload),
+    :deep(.el-upload-dragger) {
+      border: 1px dashed var(--el-color-danger) !important;
+
+      &:hover {
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+  }
+}
+
+:deep(.disabled) {
+  .el-upload,
+  .el-upload-dragger {
+    cursor: not-allowed !important;
+    background: var(--el-disabled-bg-color);
+    border: 1px dashed var(--el-border-color-darker) !important;
+
+    &:hover {
+      border: 1px dashed var(--el-border-color-darker) !important;
+    }
+  }
+}
+
+.upload-box {
+  .no-border {
+    :deep(.el-upload) {
+      border: none !important;
+    }
+  }
+
+  :deep(.upload) {
+    .el-upload {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: v-bind(width);
+      height: v-bind(height);
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      border-radius: v-bind(borderradius);
+      transition: var(--el-transition-duration-fast);
+
+      &:hover {
+        border-color: var(--el-color-primary);
+
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+
+      .el-upload-dragger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        overflow: hidden;
+        background-color: transparent;
+        border: 1px dashed var(--el-border-color-darker);
+        border-radius: v-bind(borderradius);
+
+        &:hover {
+          border: 1px dashed var(--el-color-primary);
+        }
+      }
+
+      .el-upload-dragger.is-dragover {
+        background-color: var(--el-color-primary-light-9);
+        border: 2px dashed var(--el-color-primary) !important;
+      }
+
+      .upload-image {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      .upload-empty {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        line-height: 30px;
+        color: var(--el-color-info);
+
+        .el-icon {
+          font-size: 28px;
+          color: var(--el-text-color-secondary);
+        }
+      }
+
+      .upload-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        background: rgb(0 0 0 / 60%);
+        opacity: 0;
+        box-sizing: border-box;
+        transition: var(--el-transition-duration-fast);
+        align-items: center;
+        justify-content: center;
+
+        .handle-icon {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 0 6%;
+          color: aliceblue;
+
+          .el-icon {
+            margin-bottom: 40%;
+            font-size: 130%;
+            line-height: 130%;
+          }
+
+          span {
+            font-size: 85%;
+            line-height: 85%;
+          }
+        }
+      }
+    }
+  }
+
+  .el-upload__tip {
+    line-height: 18px;
+    text-align: center;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/UploadFile/src/UploadImgs.vue b/marketing-ui/admin-ui/src/components/UploadFile/src/UploadImgs.vue
new file mode 100644
index 0000000..59857a9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/UploadFile/src/UploadImgs.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="upload-box">
+    <el-upload
+      v-model:file-list="fileList"
+      :accept="fileType.join(',')"
+      :action="uploadUrl"
+      :before-upload="beforeUpload"
+      :class="['upload', drag ? 'no-border' : '']"
+      :disabled="disabled"
+      :drag="drag"
+      :http-request="httpRequest"
+      :limit="limit"
+      :multiple="true"
+      :on-error="uploadError"
+      :on-exceed="handleExceed"
+      :on-success="uploadSuccess"
+      list-type="picture-card"
+    >
+      <div class="upload-empty">
+        <slot name="empty">
+          <Icon icon="ep:plus" />
+          <!-- <span>请上传图片</span> -->
+        </slot>
+      </div>
+      <template #file="{ file }">
+        <img :src="file.url" class="upload-image" />
+        <div class="upload-handle" @click.stop>
+          <div class="handle-icon" @click="imagePreview(file.url!)">
+            <Icon icon="ep:zoom-in" />
+            <span>查看</span>
+          </div>
+          <div v-if="!disabled" class="handle-icon" @click="handleRemove(file)">
+            <Icon icon="ep:delete" />
+            <span>删除</span>
+          </div>
+        </div>
+      </template>
+    </el-upload>
+    <div class="el-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { UploadFile, UploadProps, UploadUserFile } from 'element-plus'
+import { ElNotification } from 'element-plus'
+import { createImageViewer } from '@/components/ImageViewer'
+
+import { propTypes } from '@/utils/propTypes'
+import { useUpload } from '@/components/UploadFile/src/useUpload'
+
+defineOptions({ name: 'UploadImgs' })
+
+const message = useMessage() // 消息弹窗
+// 查看图片
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    zIndex: 9999999,
+    urlList: [imgUrl]
+  })
+}
+
+type FileTypes =
+  | 'image/apng'
+  | 'image/bmp'
+  | 'image/gif'
+  | 'image/jpeg'
+  | 'image/pjpeg'
+  | 'image/png'
+  | 'image/svg+xml'
+  | 'image/tiff'
+  | 'image/webp'
+  | 'image/x-icon'
+
+const props = defineProps({
+  modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
+  drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false）
+  limit: propTypes.number.def(5), // 最大图片上传数 ==> 非必传（默认为 5张）
+  fileSize: propTypes.number.def(5), // 图片大小限制 ==> 非必传（默认为 5M）
+  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）
+})
+
+const { uploadUrl, httpRequest } = useUpload()
+
+const fileList = ref<UploadUserFile[]>([])
+const uploadNumber = ref<number>(0)
+const uploadList = ref<UploadUserFile[]>([])
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 上传的文件
+ * */
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
+  const imgType = props.fileType
+  if (!imgType.includes(rawFile.type as FileTypes))
+    ElNotification({
+      title: '温馨提示',
+      message: '上传图片不符合所需的格式！',
+      type: 'warning'
+    })
+  if (!imgSize)
+    ElNotification({
+      title: '温馨提示',
+      message: `上传图片大小不能超过 ${props.fileSize}M！`,
+      type: 'warning'
+    })
+  uploadNumber.value++
+  return imgType.includes(rawFile.type as FileTypes) && imgSize
+}
+
+// 图片上传成功
+interface UploadEmits {
+  (e: 'update:modelValue', value: string[]): void
+}
+
+const emit = defineEmits<UploadEmits>()
+const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
+  message.success('上传成功')
+  // 删除自身
+  const index = fileList.value.findIndex((item) => item.response?.data === res.data)
+  fileList.value.splice(index, 1)
+  uploadList.value.push({ name: res.data, url: res.data })
+  if (uploadList.value.length == uploadNumber.value) {
+    fileList.value.push(...uploadList.value)
+    uploadList.value = []
+    uploadNumber.value = 0
+    emitUpdateModelValue()
+  }
+}
+
+// 监听模型绑定值变动
+watch(
+  () => props.modelValue,
+  (val: string | string[]) => {
+    if (!val) {
+      fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
+      return
+    }
+
+    fileList.value = [] // 保障数据为空
+    fileList.value.push(
+      ...(val as string[]).map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url }))
+    )
+  },
+  { immediate: true, deep: true }
+)
+// 发送图片链接列表更新
+const emitUpdateModelValue = () => {
+  let result: string[] = fileList.value.map((file) => file.url!)
+  emit('update:modelValue', result)
+}
+// 删除图片
+const handleRemove = (uploadFile: UploadFile) => {
+  fileList.value = fileList.value.filter(
+    (item) => item.url !== uploadFile.url || item.name !== uploadFile.name
+  )
+  emit(
+    'update:modelValue',
+    fileList.value.map((file) => file.url!)
+  )
+}
+
+// 图片上传错误提示
+const uploadError = () => {
+  ElNotification({
+    title: '温馨提示',
+    message: '图片上传失败，请您重新上传！',
+    type: 'error'
+  })
+}
+
+// 文件数超出提示
+const handleExceed = () => {
+  ElNotification({
+    title: '温馨提示',
+    message: `当前最多只能上传 ${props.limit} 张图片，请移除后上传！`,
+    type: 'warning'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.is-error {
+  .upload {
+    :deep(.el-upload--picture-card),
+    :deep(.el-upload-dragger) {
+      border: 1px dashed var(--el-color-danger) !important;
+
+      &:hover {
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+  }
+}
+
+:deep(.disabled) {
+  .el-upload--picture-card,
+  .el-upload-dragger {
+    cursor: not-allowed;
+    background: var(--el-disabled-bg-color) !important;
+    border: 1px dashed var(--el-border-color-darker);
+
+    &:hover {
+      border-color: var(--el-border-color-darker) !important;
+    }
+  }
+}
+
+.upload-box {
+  .no-border {
+    :deep(.el-upload--picture-card) {
+      border: none !important;
+    }
+  }
+
+  :deep(.upload) {
+    .el-upload-dragger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      border-radius: v-bind(borderradius);
+
+      &:hover {
+        border: 1px dashed var(--el-color-primary);
+      }
+    }
+
+    .el-upload-dragger.is-dragover {
+      background-color: var(--el-color-primary-light-9);
+      border: 2px dashed var(--el-color-primary) !important;
+    }
+
+    .el-upload-list__item,
+    .el-upload--picture-card {
+      width: v-bind(width);
+      height: v-bind(height);
+      background-color: transparent;
+      border-radius: v-bind(borderradius);
+    }
+
+    .upload-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .upload-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      background: rgb(0 0 0 / 60%);
+      opacity: 0;
+      box-sizing: border-box;
+      transition: var(--el-transition-duration-fast);
+      align-items: center;
+      justify-content: center;
+
+      .handle-icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0 6%;
+        color: aliceblue;
+
+        .el-icon {
+          margin-bottom: 15%;
+          font-size: 140%;
+        }
+
+        span {
+          font-size: 100%;
+        }
+      }
+    }
+
+    .el-upload-list__item {
+      &:hover {
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+    }
+
+    .upload-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 12px;
+      line-height: 30px;
+      color: var(--el-color-info);
+
+      .el-icon {
+        font-size: 28px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+
+  .el-upload__tip {
+    line-height: 15px;
+    text-align: center;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/UploadFile/src/useUpload.ts b/marketing-ui/admin-ui/src/components/UploadFile/src/useUpload.ts
new file mode 100644
index 0000000..2981e12
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/UploadFile/src/useUpload.ts
@@ -0,0 +1,106 @@
+import * as FileApi from '@/api/infra/file'
+import CryptoJS from 'crypto-js'
+import { UploadRawFile, UploadRequestOptions } from 'element-plus/es/components/upload/src/upload'
+import axios from 'axios'
+
+/**
+ * 获得上传 URL
+ */
+export const getUploadUrl = (): string => {
+  return import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/infra/file/upload'
+}
+
+export const useUpload = () => {
+  // 后端上传地址
+  const uploadUrl = getUploadUrl()
+  // 是否使用前端直连上传
+  const isClientUpload = UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE
+  // 重写ElUpload上传方法
+  const httpRequest = async (options: UploadRequestOptions) => {
+    // 模式一：前端上传
+    if (isClientUpload) {
+      // 1.1 生成文件名称
+      const fileName = await generateFileName(options.file)
+      // 1.2 获取文件预签名地址
+      const presignedInfo = await FileApi.getFilePresignedUrl(fileName)
+      // 1.3 上传文件（不能使用 ElUpload 的 ajaxUpload 方法的原因：其使用的是 FormData 上传，Minio 不支持）
+      return axios
+        .put(presignedInfo.uploadUrl, options.file, {
+          headers: {
+            'Content-Type': options.file.type
+          }
+        })
+        .then(() => {
+          // 1.4. 记录文件信息到后端（异步）
+          createFile(presignedInfo, fileName, options.file)
+          // 通知成功，数据格式保持与后端上传的返回结果一致
+          return { data: presignedInfo.url }
+        })
+    } else {
+      // 模式二：后端上传
+      // 重写 el-upload httpRequest 文件上传成功会走成功的钩子，失败走失败的钩子
+      return new Promise((resolve, reject) => {
+        FileApi.updateFile({ file: options.file })
+          .then((res) => {
+            if (res.code === 0) {
+              resolve(res)
+            } else {
+              reject(res)
+            }
+          })
+          .catch((res) => {
+            reject(res)
+          })
+      })
+    }
+  }
+
+  return {
+    uploadUrl,
+    httpRequest
+  }
+}
+
+/**
+ * 创建文件信息
+ * @param vo 文件预签名信息
+ * @param name 文件名称
+ * @param file 文件
+ */
+function createFile(vo: FileApi.FilePresignedUrlRespVO, name: string, file: UploadRawFile) {
+  const fileVo = {
+    configId: vo.configId,
+    url: vo.url,
+    path: name,
+    name: file.name,
+    type: file.type,
+    size: file.size
+  }
+  FileApi.createFile(fileVo)
+  return fileVo
+}
+
+/**
+ * 生成文件名称（使用算法SHA256）
+ * @param file 要上传的文件
+ */
+async function generateFileName(file: UploadRawFile) {
+  // 读取文件内容
+  const data = await file.arrayBuffer()
+  const wordArray = CryptoJS.lib.WordArray.create(data)
+  // 计算SHA256
+  const sha256 = CryptoJS.SHA256(wordArray).toString()
+  // 拼接后缀
+  const ext = file.name.substring(file.name.lastIndexOf('.'))
+  return `${sha256}${ext}`
+}
+
+/**
+ * 上传类型
+ */
+enum UPLOAD_TYPE {
+  // 客户端直接上传（只支持S3服务）
+  CLIENT = 'client',
+  // 客户端发送到后端上传
+  SERVER = 'server'
+}
diff --git a/marketing-ui/admin-ui/src/components/UserSelectForm/index.vue b/marketing-ui/admin-ui/src/components/UserSelectForm/index.vue
new file mode 100644
index 0000000..5ed99f8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/UserSelectForm/index.vue
@@ -0,0 +1,171 @@
+<template>
+  <Dialog v-model="dialogVisible" title="人员选择" width="800">
+    <el-row class="gap2" v-loading="formLoading">
+      <el-col :span="6">
+        <ContentWrap class="h-1/1">
+          <el-tree
+            ref="treeRef"
+            :data="deptTree"
+            :expand-on-click-node="false"
+            :props="defaultProps"
+            default-expand-all
+            highlight-current
+            node-key="id"
+            @node-click="handleNodeClick"
+          />
+        </ContentWrap>
+      </el-col>
+      <el-col :span="17">
+        <el-transfer
+          v-model="selectedUserIdList"
+          :titles="['未选', '已选']"
+          filterable
+          filter-placeholder="搜索成员"
+          :data="transferUserList"
+          :props="{ label: 'nickname', key: 'id' }"
+        />
+      </el-col>
+    </el-row>
+    <template #footer>
+      <el-button
+        :disabled="formLoading || !selectedUserIdList?.length"
+        type="primary"
+        @click="submitForm"
+      >
+        确 定
+      </el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as DeptApi from '@/api/system/dept'
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'UserSelectForm' })
+const emit = defineEmits<{
+  confirm: [id: any, userList: any[]]
+}>()
+const { t } = useI18n() // 国际
+const message = useMessage() // 消息弹窗
+const deptTree = ref<Tree[]>([]) // 部门树形结构化
+const deptList = ref<any[]>([]) // 保存扁平化的部门列表数据
+const userList = ref<UserApi.UserVO[]>([]) // 所有用户列表
+const filteredUserList = ref<UserApi.UserVO[]>([]) // 当前部门过滤后的用户列表
+const selectedUserIdList: any = ref([]) // 选中的用户列表
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const activityId = ref()
+
+/** 计算属性：合并已选择的用户和当前部门过滤后的用户 */
+const transferUserList = computed(() => {
+  // 1.1 获取所有已选择的用户
+  const selectedUsers = userList.value.filter((user: any) =>
+    selectedUserIdList.value.includes(user.id)
+  )
+
+  // 1.2 获取当前部门过滤后的未选择用户
+  const filteredUnselectedUsers = filteredUserList.value.filter(
+    (user: any) => !selectedUserIdList.value.includes(user.id)
+  )
+
+  // 2. 合并并去重
+  return [...selectedUsers, ...filteredUnselectedUsers]
+})
+
+/** 打开弹窗 */
+const open = async (id: number, selectedList?: any[]) => {
+  activityId.value = id
+  resetForm()
+
+  // 加载部门、用户列表
+  const deptData = await DeptApi.getSimpleDeptList()
+  deptList.value = deptData // 保存扁平结构的部门数据
+  deptTree.value = handleTree(deptData) // 转换成树形结构
+  userList.value = await UserApi.getSimpleUserList()
+
+  // 初始状态下，过滤列表等于所有用户列表
+  filteredUserList.value = [...userList.value]
+  selectedUserIdList.value = selectedList?.map((item: any) => item.id) || []
+  dialogVisible.value = true
+}
+
+/** 获取指定部门及其所有子部门的ID列表 */
+const getChildDeptIds = (deptId: number, deptList: any[]): number[] => {
+  const ids = [deptId]
+  const children = deptList.filter((dept) => dept.parentId === deptId)
+  children.forEach((child) => {
+    ids.push(...getChildDeptIds(child.id, deptList))
+  })
+  return ids
+}
+
+/** 获取部门过滤后的用户列表 */
+const filterUserList = async (deptId?: number) => {
+  formLoading.value = true
+  try {
+    if (!deptId) {
+      // 如果没有选择部门，显示所有用户
+      filteredUserList.value = [...userList.value]
+      return
+    }
+
+    // 直接使用已保存的部门列表数据进行过滤
+    const deptIds = getChildDeptIds(deptId, deptList.value)
+
+    // 过滤出这些部门下的用户
+    filteredUserList.value = userList.value.filter((user) => deptIds.includes(user.deptId))
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 提交选择 */
+const submitForm = async () => {
+  try {
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 从所有用户列表中筛选出已选择的用户
+    const emitUserList = userList.value.filter((user: any) =>
+      selectedUserIdList.value.includes(user.id)
+    )
+    // 发送操作成功的事件
+    emit('confirm', activityId.value, emitUserList)
+  } finally {
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  deptTree.value = []
+  deptList.value = []
+  userList.value = []
+  filteredUserList.value = []
+  selectedUserIdList.value = []
+}
+
+/** 处理部门被点击 */
+const handleNodeClick = (row: { [key: string]: any }) => {
+  filterUserList(row.id)
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style lang="scss" scoped>
+:deep() {
+  .el-transfer {
+    display: flex;
+  }
+  .el-transfer__buttons {
+    display: flex !important;
+    flex-direction: column-reverse;
+    justify-content: center;
+    gap: 20px;
+    .el-transfer__button:nth-child(2) {
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Verifition/index.ts b/marketing-ui/admin-ui/src/components/Verifition/index.ts
new file mode 100644
index 0000000..bcfe6d9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Verifition/index.ts
@@ -0,0 +1,3 @@
+import Verify from './src/Verify.vue'
+
+export { Verify }
diff --git a/marketing-ui/admin-ui/src/components/Verifition/src/Verify.vue b/marketing-ui/admin-ui/src/components/Verifition/src/Verify.vue
new file mode 100644
index 0000000..b7b5048
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Verifition/src/Verify.vue
@@ -0,0 +1,441 @@
+<template>
+  <div v-show="showBox" :class="mode == 'pop' ? 'mask' : ''">
+    <div
+      :class="mode == 'pop' ? 'verifybox' : ''"
+      :style="{ 'max-width': parseInt(imgSize.width) + 20 + 'px' }"
+    >
+      <div v-if="mode == 'pop'" class="verifybox-top">
+        {{ t('captcha.verification') }}
+        <span class="verifybox-close" @click="closeBox">
+          <i class="iconfont icon-close"></i>
+        </span>
+      </div>
+      <div :style="{ padding: mode == 'pop' ? '10px' : '0' }" class="verifybox-bottom">
+        <!-- 验证码容器 -->
+        <component
+          :is="componentType"
+          v-if="componentType"
+          ref="instance"
+          :arith="arith"
+          :barSize="barSize"
+          :blockSize="blockSize"
+          :captchaType="captchaType"
+          :explain="explain"
+          :figure="figure"
+          :imgSize="imgSize"
+          :mode="mode"
+          :type="verifyType"
+          :vSpace="vSpace"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script type="text/babel">
+/**
+ * Verify 验证码组件
+ * @description 分发验证码使用
+ * */
+import { VerifyPoints, VerifySlide } from './Verify'
+import { computed, ref, toRefs, watchEffect } from 'vue'
+
+export default {
+  name: 'Vue3Verify',
+  components: {
+    VerifySlide,
+    VerifyPoints
+  },
+  props: {
+    captchaType: {
+      type: String,
+      required: true
+    },
+    figure: {
+      type: Number
+    },
+    arith: {
+      type: Number
+    },
+    mode: {
+      type: String,
+      default: 'pop'
+    },
+    vSpace: {
+      type: Number
+    },
+    explain: {
+      type: String
+    },
+    imgSize: {
+      type: Object,
+      default() {
+        return {
+          width: '310px',
+          height: '155px'
+        }
+      }
+    },
+    blockSize: {
+      type: Object
+    },
+    barSize: {
+      type: Object
+    }
+  },
+  setup(props) {
+    const { t } = useI18n()
+    const { captchaType, mode } = toRefs(props)
+    const clickShow = ref(false)
+    const verifyType = ref(undefined)
+    const componentType = ref(undefined)
+
+    const instance = ref({})
+
+    const showBox = computed(() => {
+      if (mode.value == 'pop') {
+        return clickShow.value
+      } else {
+        return true
+      }
+    })
+    /**
+     * refresh
+     * @description 刷新
+     * */
+    const refresh = () => {
+      if (instance.value.refresh) {
+        instance.value.refresh()
+      }
+    }
+    const closeBox = () => {
+      clickShow.value = false
+      refresh()
+    }
+    const show = () => {
+      if (mode.value == 'pop') {
+        clickShow.value = true
+      }
+    }
+    watchEffect(() => {
+      switch (captchaType.value) {
+        case 'blockPuzzle':
+          verifyType.value = '2'
+          componentType.value = 'VerifySlide'
+          break
+        case 'clickWord':
+          verifyType.value = ''
+          componentType.value = 'VerifyPoints'
+          break
+      }
+    })
+
+    return {
+      t,
+      clickShow,
+      verifyType,
+      componentType,
+      instance,
+      showBox,
+      closeBox,
+      show
+    }
+  }
+}
+</script>
+<style>
+.verifybox {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  background-color: #fff;
+  border: 1px solid #e4e7eb;
+  border-radius: 5px;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
+  box-sizing: border-box;
+}
+
+.verifybox-top {
+  height: 40px;
+  padding: 0 15px;
+  font-size: 16px;
+  line-height: 40px;
+  color: #45494c;
+  text-align: left;
+  border-bottom: 1px solid #e4e7eb;
+  box-sizing: border-box;
+}
+
+.verifybox-bottom {
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.verifybox-close {
+  position: absolute;
+  top: 13px;
+  right: 9px;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  width: 100%;
+  height: 100vh;
+  background: rgb(0 0 0 / 30%);
+
+  /* display: none; */
+  transition: all 0.5s;
+}
+
+.verify-tips {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  color: #fff;
+  text-indent: 10px;
+}
+
+.suc-bg {
+  background-color: rgb(92 184 92 / 50%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
+}
+
+.err-bg {
+  background-color: rgb(217 83 79 / 50%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
+}
+
+.tips-enter,
+.tips-leave-to {
+  bottom: -30px;
+}
+
+.tips-enter-active,
+.tips-leave-active {
+  transition: bottom 0.5s;
+}
+
+/* ---------------------------- */
+
+/* 常规验证码 */
+.verify-code {
+  margin-bottom: 5px;
+  font-size: 20px;
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid #ddd;
+}
+
+.cerify-code-panel {
+  height: 100%;
+  overflow: hidden;
+}
+
+.verify-code-area {
+  float: left;
+}
+
+.verify-input-area {
+  float: left;
+  width: 60%;
+  padding-right: 10px;
+}
+
+.verify-change-area {
+  float: left;
+  line-height: 30px;
+}
+
+.varify-input-code {
+  display: inline-block;
+  width: 100%;
+  height: 25px;
+}
+
+.verify-change-code {
+  color: #337ab7;
+  cursor: pointer;
+}
+
+.verify-btn {
+  width: 200px;
+  height: 30px;
+  margin-top: 10px;
+  color: #fff;
+  background-color: #337ab7;
+  border: none;
+  border-radius: 8px;
+}
+
+/* 滑动验证码 */
+.verify-bar-area {
+  position: relative;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-sizing: content-box;
+}
+
+.verify-bar-area .verify-move-block {
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 0 2px #888;
+  box-sizing: content-box;
+}
+
+.verify-bar-area .verify-move-block:hover {
+  color: #fff;
+  background-color: #337ab7;
+}
+
+.verify-bar-area .verify-left-bar {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  cursor: pointer;
+  background: #f0fff0;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-sizing: content-box;
+}
+
+.verify-img-panel {
+  position: relative;
+  margin: 0;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  border-radius: 3px;
+  box-sizing: content-box;
+}
+
+.verify-img-panel .verify-refresh {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  width: 25px;
+  height: 25px;
+  padding: 5px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.verify-img-panel .icon-refresh {
+  font-size: 20px;
+  color: #fff;
+}
+
+.verify-img-panel .verify-gap {
+  position: relative;
+  z-index: 2;
+  background-color: #fff;
+  border: 1px solid #fff;
+}
+
+.verify-bar-area .verify-move-block .verify-sub-block {
+  position: absolute;
+  z-index: 3;
+  text-align: center;
+
+  /* border: 1px solid #fff; */
+}
+
+.verify-bar-area .verify-move-block .verify-icon {
+  font-size: 18px;
+}
+
+.verify-bar-area .verify-msg {
+  z-index: 3;
+}
+
+/* 字体图标的css */
+
+/* @font-face {font-family: "iconfont"; */
+
+/* src: url('../fonts/iconfont.eot?t=1508229193188'); !* IE9*! */
+
+/* src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), !* IE6-IE8 *! */
+
+/* url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAaAAAsAAAAACUwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiSY21hcAAAAYAAAAB3AAABuM+qBlRnbHlmAAAB+AAAAnQAAALYnrUwT2hlYWQAAARsAAAALwAAADYPNwajaGhlYQAABJwAAAAcAAAAJAfeA4dobXR4AAAEuAAAABMAAAAYF+kAAGxvY2EAAATMAAAADgAAAA4CvAGsbWF4cAAABNwAAAAfAAAAIAEVAF1uYW1lAAAE/AAAAUUAAAJtPlT+fXBvc3QAAAZEAAAAPAAAAE3oPPXPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbwtzwv4EhhrmBoQEozAiSAwAw1A0UeJzFkcENgCAMRX8RjCGO4gTe9eQcnhzAfXC2rqG/hYsT8MmD9gdS0gJIAAaykAjIBYHppCvuD8juR6zMJ67A89Zdn/f1aNPikUn8RvYo8G20CjKim6Rf6b9m34+WWd/vBr+oW8V6q3vF5qKlYrPRp4L0Ad5nGL8AeJxFUc9rE0EYnTezu8lMsrvtbrqb3TRt0rS7bdOmdI0JbWmCtiItIv5oi14qevCk9SQVLFiQgqAF8Q9QLKIHLx48FkHo3ZNnFUXwD5C2B6dO6sFhmI83w7z3fe8RnZCjb2yX5YlLhskkmScXCIFRxYBFiyjH9Rqtoqes9/g5i8WVuJyqDNTYLPwBI+cljXrkGynDhoU+nCgnjbhGY5yst+gMEq8IBIXwsjPU67CnEPm4b0su0h309Fd67da4XBhr55KSm17POk7gOE/Shq6nKdVsC7d9j+tcGPKVboc9u/0jtB/ZIA7PXTVLBef6o/paccjnwOYm3ELJetPuDrvV3gg91wlSXWY6H5qVwRzWf2TybrYYfSdqoXOwh/Qa8RWIjBTiSI3h614/vKSNRhONOrsnQi6Xf4nQFQDTmJE1NKbhI6crHEJO/+S5QPxhYJRRyvBFBP+5T9EPpEAIVzzRQIrjmJ6jY1WTo+NXTMchuBsKuS8PRZATSMl9oTA4uNLkeIA0V1UeqOoGQh7IAxGo+7T83fn3T+voqCNPPAUazUYUI7LgKSV1Jk2oUeghYGhZ+cKOe2FjVu5ZKEY2VkE13AK1+jI4r1KLbPlZfrKiPhOXKPRj7q9sj9XJ7LFHNmrKJS3VCdhXGSdKrtmoQaWeMjQVt0KD6sGPOx0oH2fgtzoNROxtNq8F3tzYM/n+TjKSX5qf2jx941276TIr9FjXxKr8eX/6bK4yuopwo9py1sw8F9kdw4AmurRpLUM3tYx5ZnKpfHPi8dzz19vJ6MjyxYUrpqeb1uLs3eGV6vr21pSqpeWkqonAN9oUyIiXpv8XvlN5e3icY2BkYGAA4n0vN4fG89t8ZeBmYQCBa9wPPRH0/wcsDMwmQC4HAxNIFABAfAqaAHicY2BkYGBu+N/AEMPCAAJAkpEBFbABAEcMAm94nGNhYGBgfsnAwMKAigESnwEBAAAAAAAAdgCkANoBCAFsAAB4nGNgZGBgYGMIZGBlAAEmIOYCQgaG/2A+AwARSAFzAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYI1OSM1OZs1OSe/OJW1KDM9o4S9KDWtKLU4g4EBAJ79CeQ=') format('woff'), */
+
+/* url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), !* chrome, firefox, opera, Safari, Android, iOS 4.2+*! */
+
+/* url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); !* iOS 4.1- *! */
+
+/* } */
+
+.iconfont {
+  font-family: iconfont !important;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+}
+
+.icon-check::before {
+  position: absolute;
+  z-index: 9999;
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin: auto;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIEAYAAAD9yHLdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAIlFJREFUeNrt3X1cVNW6B/BnbcS3xJd7fLmSeo+op/Qmyp4BFcQEwpd8Nyc9iZppgUfE49u1tCwlNcMySCM1S81jCoaioiJvKoYgswfUo5wSJ69SZFKCKSAws+4f2/GetFFRYG3g9/2Hz2xj+O2J4Zm19trrIQIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKgjmOgAAADwOBhz83TzdPNs397qanW1ujJ2s8fNHjd7FBTkhuSG5IbculVdP1kSfeoAAPBwdFzHdXzgQN0S3RLdkpgY2SJbZMvNm9It6ZZ064cfGmQ2yGyQmZfX3KO5R3OPwkJdsi5Zl5yYKIfL4XL4mDHqs7AqGzhgBAIAoFFdI7pGdI1o1KjFlhZbWmxZv149OmXK4z3r4cPEiROfOFExKSbFVFDwqM+EEQgAgMY8y5/lz/LGjZu3bt66eev9+9Wjj1s4bAYNIkaMWHKyx3mP8x7nmzd/1GdyEP1CAQCASifrZJ3s6FjmWuZa5rprF3uLvcXeGjq0en5au3a8nJfz8k6d8lPyU/JTYmIq+wwYgQAAaIIk0WgaTaO/+IJm0SyaNWJEtf/IPMqjvJde0g/QD9APcHOrdGIhrxMAANzGmJwr58q569ZRLMVS7MSJNfajFVJIYYy/wF/gL7z0UmW/vUGNvk4AAHCHTqfT6XQrVtB4Gk/jg4KEBfmBfqAf+vSp7LdhBAIAUMPUwvH66+oj21eBSqmUStu3r+y3oYAAANQQtXDMmKE+WrlSdB4bvpwv58t/+62y34cCAgBQzeSt8lZ568SJFEiBFLh2reg8d2MD2UA28PTpyn4fCggAQDXRh+pD9aEjR1IABVDA5s20ntbTeklzf3eZF/NiXvv2Vfb7NHciAAC1nRwsB8vBvr5Wf6u/1X/nTubO3Jl7A+0tWvImb/LOyemc3zm/c/6ePZX9dmxlAgBQRfTd9N303Tw8rFusW6xbEhPZLDaLzXJyEp3rHjNoBs24dYt/wj/hn3h5mUwmk8mkKJV9GoxAAAAekz5AH6APeOYZ6znrOeu5Awc0WzgCKZACrVZ2hB1hR15++VELhw1GIAAAj0hdVdWli/ooNVX9WvnlsNUflHSk45wbuZEbg4LUwrFhw+M+LUYgAACV1CuoV1CvoCef5Kv4Kr4qIUE9qsHCcRsv4AW8YOHCqiocNtq7qAMAoFHqZoetW9MgGkSDDh+mhbSQFnbuLDrX/YWGmmJMMaaYsLCqfmZMYQEAPIBt23PLp5ZPLZ8mJ9MROkJHdDrRueyKpViKXbdO6aB0UDoEB1fXj8EUFgCAHX0v973c93KTJpbvLd9bvt+3T+uFg0/mk/nkL79UC0dISHX/PIxAAADuYuvLwQ/xQ/zQnj1sKBvKhj7/vOhc9vA4HsfjYmOd2jm1c2o3btxRdpQdZRUV1f1zMQIBALjNYDAYDAYHB9pEm2jTl19qvXBQGIVRWFKSWjgmTKipwmGDi+gAAERExJhZZ9aZdZGRNJ2m0/Tx40UnssuHfMgnPb2koKSgpGD0aIUpTGGlpTUdAwUEAOo9XbguXBf+/vu0lbbS1ldfFZ3HrgE0gAacPu0423G24+xhw5SOSkel440bouKggABAvaXjOq7j77xDetKTfv580Xns8iIv8srNlfKkPClv8OD0jukd0zv++qvoWLiIDgD1jrpnVXAwb86b8+Yffyw6jz18NV/NV+flWQZaBloGenufYqfYKXbxouhcNriIDgD1hi5Zl6xLnjyZL+AL+ILwcNF57OpLfanv1atsPpvP5vv7a61w2GAEAgB1nrpn1ejRPJNn8szoaM1ur05EREVF6ldfX0VRFEUxmUQnskejLyAAwOPT79fv1+9/7jn+E/+J/7Rjh7YLR3ExceLEhw9XTIpJMWm3cNho9IUEAHh08hB5iDykb1/+M/+Z/7x7N0VSJEU2aiQ61z30pCd9WZl1inWKdcoLL2R5ZnlmeR4/LjrWw8I1EACoM+S2clu5rasr+yv7K/vrgQO0jtbRumbNROe6G4/kkTzSYqFMyqTMgAC1cBw6JDpXZaGAAECt1zukd0jvkG7daBftol2HD1MERVBEq1aic93jdl8O9gv7hf0SGKhOVUVHi471qFBAAKDW0hfri/XFHTs6cAfuwBMS2Bw2h81p1050LruepWfp2fnzlaHKUGXopk2i4zwuFBAAqHVcw1zDXMPatrWSlayUkEBplEZp//VfonPZw86ys+zsm28qE5WJysQPPxSdp6qggABAraHuktuiRYOgBkENgg4dYt7Mm3k/9ZToXHZNpIk0MTzcWGosNZYuXy46TlXDfSAAoHnqfRxNm6qP4uPVr/37i85l11gaS2M3b1YWK4uVxa+8oh7kXHSsqoYRCABoVo+oHlE9oho2pME0mAbHxKhHNVw4IimSImNiXLJdsl2yp09XD9a9wmGDAgIAmmPry9G4f+P+jfv/4x8UT/EUP3iw6Fz3d/hwUXpRelH6Sy9FR0dHR0dbLKITVTfcSAgAGsPYhT4X+lzos2EDG8FGsBHjxolOZA9fxBfxRWlpFeYKc4V57NjckNyQ3JBbt0Tnqim4BgIAmiEvkhfJiz78kMWzeBY/Z47oPPbwpXwpX5qdbRlmGWYZ5uOjbnZYWCg6V03DFBYACKdbq1urW7tiheYLRypP5anffluRU5FTkTN4cH0tHDYYgQCAMOqeVX//O7vKrrKra9aIzmMPP86P8+NmM/fjftzP2zsrLSstK+3HH0XnEg0jEACocXJXuavcdepU1ol1Yp00fGNdP+pH/X78UUqSkqQkf38Ujt9DAQGAGqMP0YfoQ154gbbTdtq+cSMppJDCtDcTwokTLyiwvGh50fKiv79xuHG4cbjZLDqW1mjvfxwA1DluZjezm3nECMkgGSTD11+rRx0dRee6G8/gGTzj+nU+gA/gA/z81BGH0Sg6l1ZhBAIA1Ua9g9zHh/3MfmY/R0WpRzVYOE7yk/xkSYmUI+VIOSNHonA8HIxAAKDK6bvpu+m7eXhYt1i3WLckJrJZbBab5eQkOtcfKy9Xv44Zo7aQjYsTnai2cBAdAADqDn2APkAf8Mwz1gRrgjUhIYG9wF5gL7RsKTrXPQIpkAKtVlbMilnxpElKvBKvxO/eLTpWbYMRCAA8NnWqqksXddXSsWN0gk7QCWdn0bnuDao2dOJGbuTGoCCTyWQymTZsEB2rtsI1EAB4ZL2CegX1CnrySb6Kr+KrEhI0Wzhu4wW8gBcsXIjCUTWwFxYAVJral6N1axpEg2jQ4cO0kBbSws6dRee6v9BQU4wpxhQTFiY6SV2BKSwAeGge5z3Oe5xv3tzyreVby7dJSfQ2vU1v6/Wic9kVS7EUu26d0kHpoHQIDhYdp67BFBYAPFDfy30v973cpElFVkVWRdbevZovHJtpM23etk0tHCEhouPUVRiBAIBd6lSVoyMxYsRsq5SGDROdyx4ex+N4XGysUzundk7txo07yo6yo6yiQnSuugojEACwQ5L4dD6dT9+6VX2s3cJBYRRGYUlJauGYMAGFo2bUWAHps73P9j7b27Xr2bNnz549W7USfeIAYA9jslk2y+YNG9gmtoltmjBBdCJ7bA2dypVypVwZNUotHKWlonPVF1U+hfX7PW8CA9UtAnx9mQfzYB5Nmtz5Dz3IgzwKC+k1eo1ei4+naTSNpq1Zo5gUk2LKyBD9wgDUR/I5+Zx87oMP2CQ2iU2aO1d0HnvQ0EkbHruA9OK9eC/esmWD1AapDVK/+orm0ByaM2TIIz9hNEVT9IYNRfuL9hftDwmpby0iAUSQT8on5ZNLlrAZbAabsXSp6Dz28JV8JV/53XcVpypOVZzy9j694PSC0wt+/ll0rvrqkQuI15+8/uT1Jyen0smlk0snHz9Ox+gYHXN1rdp4KSnlE8onlE8YMUL9Rbl5U/QLBlCXqBfJQ0LUi+Th4aLz3N+lS+o2697e6kzFpUuiE9V3j3wNpHR26ezS2ZGR1VM4bHx8HHs59nLsdeBAj6geUT2imjUT9UIB1CVylBwlR738MulJT/qPPhKdxx6+hq/ha65ckWKlWCnW3x+FQ1sqPQJxN7gb3A29e1tbWVtZW5lMNdUQhifxJJ70zTdNujTp0qTL0KHf/PLNL9/88ttvYl42gNrJ7Te339x+GzuW5bAclhMVpU5ZOWhvU9UQCqGQa9es063TrdN9fLLKs8qzyk+dEh0Lfq/SIxBrf2t/a/+JE2u6kxjzY37Mz8ur9OXSl0tfTklRb2z6j/+o2ZcLoHZyi3aLdov285N2Sjulndu3a7ZwEBFRcTFP4Ak8YdQoFA5tq/wU1l/oL/QXLy9hiY/QETqi05U1L2te1vzgQdtFfGF5ADRMX6wv1hd7eqo9vWNjKZIiKbJRI9G57jGDZtCMW7fYUraULR01yrTNtM20LTVVdCy4v0qPINSLbrm56kW3Ll1EnwAtpaW01Ggse6PsjbI3Bg06c+bMmTNnrl0THQtApDtTza2tra2tU1LoJJ2kk9r7oMUzeSbPrKhg7syduRsMakOnPXtE54KHU+kRCF/Gl/FlGrr2cHtPHseVjisdVyYn39klFKAe6h3SO6R3SLduln9Y/mH5x8GDWi0ctr4cLJ7Fs/igIBSO2qnyU1i9qTf1zskRHfxu7G32Nnu7d2+1oCQmopBAfaL+vnfqJIVJYVJYUhLrx/qxfv/5n6Jz2cNSWApLCQlRhipDlaGbNonOA4+m8gWkM3WmzrGxooPbtYyW0bJevdQptuRk1zDXMNewtm1FxwKoDrYtgugNeoPeSExknsyTeXbsKDqXPewsO8vOvvmm8bzxvPH82rWi88DjqXQB6TK6y+guo3ftosW0mBafOyf6BO6vZ0/Hrxy/cvzq6FE3TzdPN0/tdkoDqAx1xNGiRfmI8hHlIw4epPfoPXqvWzfRueyaSBNpYni4sdRYaixdvlx0HKgaj7wMV5ZlWZZ1OsYYY+zYMfVo06aiT8genspTeeq331rmWuZa5vr5nfr01KenPv3hB9G5ACpD7T1ue5/Fx6tf+/cXncuusTSWxm7erCxWFiuLX3lFPci56FhQNR75TnS1p7Ci8Ml8Mp8cEKAeLS8XfUL2MG/mzbyfesphrMNYh7HJybZezqJzATyMrhFdI7pGNGrE5/F5fJ5tClm7hYNP49P4tB071MIxbdrtoygcdUyV3Qioy9Pl6fKef57n8Tye9/XXbCabyWY2biz6BO1aQAtowcWLFeMrxleMt+3mefGi6FgA/85gMBgMBgcH8wXzBfOFr75Sr+0ZDKJz3d/hw0VTiqYUTRk5Epuh1m1Vfie5foN+g37D0KFWV6ur1TUmRvOFxJM8yfN//9fhosNFh4s+Pif3ndx3ct/334uOBfD/fTk2bmQGZmAG2yd57bH15agwV5grzIMGYfPT+qHatiKRF8mL5EWDB1MohVLo7t339APRJNsmbb6+6rr0CxdEJ4L6SX3/fPihep/EnDmi89iDvhz1W7V1JDStMK0wrYiPV+8wHT1abSxVUiL6hO+vUyeextN4WkqKW5pbmlta166iE0H9oivVlepKly/XfOG4vSilIqcipyJn8GAUjvqp2lvaqtsvHz6sbss8ZAjNpJk088YN0Sduj20dPbvFbrFbKSm2O3tF54K6TU6UE+XE2bPJi7zIa9Ei0Xns4cf5cX7cbObP8ef4c76+aOhUv9XYbro2coAcIAd4e9Pf6G/0t7g4NovNYrOcnES/EPbwE/wEP/HTT9Z0a7o13c8ve0D2gOwBWr//BWoLW18OlsgSWeLnn9f0LtcPrR/1o34//siGsCFsiLe3cbhxuHG42Sw6FohV7SOQu9l22WTBLJgFP/88/5h/zD/W0N5ad7FtCSGRRBIlJ7uvdV/rvva//1t0LqjdbH056M/0Z/rzZ59ptnBw4sQLCqSnpaelpwcNQuGAf1fjBcRGndo6flzqLfWWeg8ZwjN4Bs+4fl30C2IPm8PmsDnt2llbWFtYW9g2bezZU3QuqF3U35tBg7Tel8P2frQ2tja2Nh46NDM4Mzgz+OxZ0blAW4QVEBtjU2NTY9O0NPIgD/Lw9eXhPJyH//qr6Fx2fUQf0Udt26pD+qQkua3cVm5bXS19oa6w9eVQf89jYrTal8O22IU5MAfmMGpUVlpWWlaa0Sg6F2iT5obM6lYNsqwWkoQENpvNZrM13HnQ1npzvXW9df2gQXjDwb+rLX05VLadJMaMUZexx8WJTgTaJnwEcjf1F9dkkhZJi6RFzz3H03k6T//lF9G57IqgCIpo1UrqJfWSeiUkuHd27+ze2d1ddCwQSx+qD9WHPvWUdaR1pHVkfLxmC0cgBVKg1cq6s+6s++TJKBxQGZobgdztzie4C9YL1gsJCepWDhru8+FBHuRRWEgZlEEZQ4ao13oyMkTHgpqh36/fr9/v4sIP8UP8UGoqnaATdEKDu0DfbujEjdzIjUFB6t52GzaIjgW1i+YLiI26aqV7d9aINWKNkpO13jBHVVTE2/A2vM2QIaZDpkOmQ+npohNB9bC1C2BJLIklpaay/qw/6+/iIjqXPczMzMy8cKHxmvGa8dr774vOA7WT5qaw7MlyynLKcsrJUQuHj496ND9fdK77a9GCXWVX2dVDh9wC3QLdAvv1E50Iqpat86U0X5ovzU9I0HrhUIWGonBAVag1BcRGnaP917/UR76+thucROe6vxYtJCYxiSUk6LiO6/jAgaITwePxOO9x3uN88+ZqB8yDB2k5LaflPXqIzmVXLMVS7Lp16vtnyRLRcaBuqDVTWPbYLlZyF+7CXZKS6EP6kD7UcJ8Pd3In95s3eQPegDcYOdK01rTWtDY5WXQseDh9L/e93PdykyZlT5Q9UfbEgQPMn/kzfw1/INhMm2nztm1KT6Wn0nPKFPWg1So6FtQNtb6A2Nj2rJLGSGOkMcnJbD6bz+Z36CA61/0VF1tft75ufX3kyCxDliHLkJQkOhH8MXWqytFRXcSxe7d6dNgw0bns4XE8jsfFxjq1c2rn1G7cuKPsKDvKKipE54K6pdZNYdmTHZEdkR1x/rxloGWgZaC3N1/FV/FVWu/r0bSp9J70nvTe3r26Ql2hrtDfX3Qi+COSxKfz6Xz61q3qY+0WDgqjMApLSlILx4QJKBxQnepMAbGxdRbk2TybZ/v42HYPFZ3r/po2pV20i3bt2yevkFfIK4YPF50IiIgY05l1Zp05MpJtYpvYpgkTRCeyy4d8yCc9vaSgpKCkYPRotXCUloqOBXVbnZnCskedeujUSX2UnKxOQXTpIjqXXXrSk76sjHVgHVgHg8H4lvEt41t794qOVd/I8+R58rxVq9gRdoQd+Z//EZ3n/s6ccdzjuMdxz8CB6R3TO6Z31PBWQFCn1LkRyN3UG/kuXWLH2XF23MdH7beQmys6l11GMpKxYUO1t3x0tO5fun/p/jVqlOhY9YW6lc5bb2m+cNz+PZZcJBfJZdAgFA4Qoc4XEBt108bLl6V8KV/K9/amxbSYFmu4r8ftQkJraA2tiYqSw+VwOXzMGNGx6ir5oHxQPvi3v6mPli0Tnccevpqv5qvz8irCK8Irwv39M6MzozOjf/pJdC6on+pNAbGxveEalDYobVDq68vf5e/ydzW8TfXtQsK2sq1s686dd/pIQJVQd1MOCGCX2WV2+eOPReexqy/1pb5Xr6qrC/39bdf6RMeC+q3eFRCbjJcyXsp46coVx2uO1xyv+fnxo/woP/rPf4rOdX+OjiyH5bCcqCh5q7xV3jpxouhEtdWdqcGf6Cf66YsvaD2tp/WSRt8PRUWUTumUPmTI72+kBRBLo2+YmmMrJBWRFZEVkX5+6tEzZ0TnsudOA6Kn6Wl6essW2ydo0blqC7dot2i3aD8/XsgLeeGOHcyduTP3Bg1E5/pjxcW8O+/Ou48YYdulWnQigH9X51dhVVbvY72P9T7Wpo3DbofdDrsTE+kYHaNj2m0YxSN5JI+0WNgNdoPdeOUVxVfxVXxt9yuAjboar08fCqZgCk5MpHW0jtY1ayY61z1ur8KzTrFOsU4ZNSrLM8szy/PQIdGxAP5IvR+B3C17QPaA7AFXr5YlliWWJQ4cSEtpKS3VboMo24iEN+PNeLPPP5ej5Cg56uWXRefSClvrYR7BI3jEgQNaLRy2DwKUSZmUGRCAwgG1AUYgD9CL9+K9eMuWDtcdrjtcj49nvsyX+Xp4iM5l1+0+D6SQQsrMmerUR2Sk6Fg1zS3NLc0trWtXpmd6pk9N1ez2/7b/X2NoDI159VVlqDJUGbppk+hYAA8DI5AHUFe7FBZamluaW5oPHkycOHENN4hSSCGFMfUP07p18gB5gDxg5kzRsWqKuktuhw7SJemSdCkhQbOFw+ZZepaenT8fhQNqI4xAKkmdEmnRgnzJl3wPHaIUSqGUvn1F57If+PYnXH/yJ//ZsxWDYlAMGl6u+ojuXLuKcYhxiDl6lFIplVK7dxedyx52lp1lZ99801hqLDWWLl8uOg/Ao3AQHaC2yc/Pz8/Pv3WrzZg2Y9qM2bFDWiOtkdZ4erIv2Zfsyz//WXS+ewNTPuUzRiVUQiVDhjhzZ+7Mr11Tz0PDI6mHZCvoUrwUL8UnJNAlukSXtLvoQRURoVxWLiuXFy0SnQTgcaCAPKIrCVcSriSUl7dp3aZ1m9a7djn80+GfDv+0dRzs3Fl0vnvYCome9KQfMqR9m/Zt2rcpKsrPzc/Nz619rXbVLUeaNqXn6Dl67sAB+p6+p+81PBIcS2Np7ObNyjZlm7JtxgzRcQCqAq6BPKbTC04vOL3g5k310fDh6lSRhhtE3b5GorbaXbNGDpAD5IDa80m4R1SPqB5RDRvy2Xw2n71rFyVREiV5e4vOZVckRVJkTIxLtku2S/b06epBzkXHAqgKGIFUEXVKqLzcucS5xLlk1y4+j8/j8/r0YSfYCXZCuz2yWQErYAV+fs6hzqHOoRZL/t78vfl7jx0TnetuBoPBYDA4ONzYd2PfjX3bt7MMlsEytL7J5OHDRa2LWhe1Hjfu+AfHPzj+QXm56EQAVQkX0avJndanTcqalDWJjWWD2WA2WPsNo9T7Ed5+2+Rh8jB5aGVTQcZks2yWzRs3MgMzMMO0aaIT2cMX8UV8UVpahbnCXGEeNOj3I1SAugUFpJp1jega0TWiUaMW+hb6FvroaJpFs2jWiBGicz0I/4J/wb9YtcrkanI1ub7+uqgc8jn5nHzugw/YJDaJTZo7V/TrYg9fypfypdnZlmGWYZZhPj625d+icwFUJ1wDqWa5IbkhuSG3bpXkleSV5I0bx2fymXym9htEsalsKpu6cKF8Wj4tn37vvZr++bJJNsmm0FDNF46VfCVf+d13FTkVORU5gwejcEB9ghFIDbNdBG6yqsmqJqt27lSPjh4tOtcDJVESJYWFKS2VlkrL6mu0pC7LDQlRO0eGh4s+7fu7dEm9sdTb29a4THQigJqEEUgNO/fiuRfPvVhWpv7hefFF2yod0bkeyI/8yG/BAvUP/OrVVf306rLcKVPUZcYffST6dO3qR/2o348/sqVsKVvq44PCAfUZVmEJoq7aslr7F/Yv7F/49dfXrl27du1a167qv/bsKTqfXYwYMU/P9lPbT20/tUWL/NT81PzUw4cf9enuNMjqQ32oz7ZtbCPbyDZqsC8HJ068oEDyl/wlfz8/Y4AxwBjw3XeiYwGIpL03aj0THR0dHR1tsbi4uLi4uEyeTJtpM23etk10rgdh8Syexc+ZI+fKuXLuJ5/cPvrQU6K6Ql2hrtDfX9op7ZR2bt9+p8+JxvAMnsEzrl+3NrY2tjYeOjQzODM4M1jDHSwBahCugWiM7X6HC/0v9L/Q/4sv1Fa2kyaJzvVA0RRN0Rs2KC6Ki+Jiu9Paar37P9MX64v1xZ6efC6fy+cePqxuX/7EE6Lj342f5Cf5yZISJjGJSc8/rzCFKezIEdG5ALQEBUSjbIXEbDabzWbbLq1TpojO9UCcOPHPPlOvDQQGqgetVneDu8Hd0Lu3tbW1tbV1SgqdpJN0smVL0XH/mO2GvzFj1O3w4+JEJwLQIs1NGYDq3Llz586d41y9VrJ3r3OKc4pzSqdOFEMxFOPmJjqfXYwYMVluP6/9vPbzOnZ0/sX5F+dfvvvOusS6xLokMZF9zj5nn7duLTrmPQIpkAKtVlbMilnxpElKvBKvxO/eLToWgJZhBFKrSJK6Cmr9evUPtW1vJQ273aKVjGQkY8OGouPc4/Z293wYH8aHBQaaRplGmUZt3Cg6FkBtgAJSKzEmvyO/I78TEcH2sX1sX3Cw6ES1FTMzMzMvXGi8ZrxmvPb++6LzANQmmMKqpfKP5B/JP3LokLOzs7Ozc6tW6tE+fUTnql1CQxWzYlbM774rOglAbYRlvLUa5+pF3r//nQ7SQTqo4RvwtGI8jafxn3yivm5LloiOA1CbYQqrjtGV6kp1pcuXkxd5kVft6fNR7W7fX6P0VHoqPW2r2e5dZgwADw8jkDpGaaw0VhovXsw38o18I6ZmeByP43Gxsc2eafZMs2emTlWPonAAVAUUkDrKJJtkk/zWW/QqvUqvaqWvRw0KozAKS0pyaufUzqndhAlH2VF2lFVUiI4FUJeggNRxSpASpAS9/ba6jHbpUtF5qh0nTjwjo6SgpKCkYPRotXCUloqOBVAXoYDUE+pWHO+8QyEUQiHiGkRVrzNnHGMdYx1jn39e3fX4xg3RiQDqMizjrWfy9+Tvyd/zzTdPlj5Z+mRpSQm1olbUSvutdu3yIi/yys2VHCVHydHX9+T0k9NPTr96VXQsgPoAq7DqOfmYfEw+Nn8+m8PmsDlhYaLzPCy+mq/mq/PyLAMtAy0Dvb3VToAXL4rOBVCfYAqrnjMNMA0wDVi9mubSXJo7b57oPA/Ul/pS36tX2Xw2n83390fhABAHIxD4HV2sLlYXGxREcRRHcZ98QgoppDx8n4/qVVSkfvX1VW8ENJlEJwKoz3ANBH4nf0f+jvwdRmN73p635/n5LIgFsaBhw8QWkuJi3p13592HDTPFm+JN8RkZol8nAMAIBB5AjpVj5dhXX2VX2BV25dNPaT2tp/U10HL29i6+TMd0TDd6tPE142vG1w4eFP16AMD/QwGBh6I7qDuoOzhtGl2my3R5w4bqKiQ8kkfySItFHfn89a9qY6roaNHnDwD3QgGBSpG7yl3lrlOn0nbaTts3bqyqXua2wiEtk5ZJy6ZONe437jfu//JL0ecLAPbhGghUSv6v+b/m/5qd3b5N+zbt22RksLFsLBvbvz+lURqlVb5FLU/lqTz122+l36TfpN8MBuMc4xzjnL17RZ8nADwYlvHCIzGtMK0wrYiPbza+2fhm47t3V48uWcJX8pV85Xff2fu+3//7kiXXP7v+2fXPevUy9jT2NPY8elT0eQHAw8MUFlQL1zDXMNewJ55o2L1h94bd27UryynLKcu5cuX0gtMLTi+4eVN0PgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAO/4PSBxbMqgmA24AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMTItMTVUMTU6NTc6MjcrMDg6MDCiEb4vAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTEyLTE1VDE1OjU3OjI3KzA4OjAw00wGkwAAAE10RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fY2sxYnphMHpqOWpqZGN4ci9jaGVjay5zdmfbTpDYAAAAAElFTkSuQmCC');
+  background-size: contain;
+  content: ' ';
+  inset: 0;
+}
+
+.icon-close::before {
+  position: absolute;
+  z-index: 9999;
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin: auto;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIEAYAAAD9yHLdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAADwRJREFUeNrt3V1sU+cZwPHndTAjwZ0mbZPKR/hKm0GqtiJJGZ9CIvMCawJoUksvOpC2XjSi4kMECaa2SO0qFEEhgFCQSqWOVWqJEGJJuyYYWCG9QCIOhQvYlgGCIFmatrVSUhzixO8ujNM1gSZOfPye857/7wYlfPg5xj5/n/fExyIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABATizsWti1sCs/v6y0rLSsdMaMZ/Y8s+eZPZMnm54LQO6kn/fp/UB6v2B6LrdRpgcwZf7e+Xvn7505MxAIBAKBrVt1ja7RNdXVaqlaqpbOmTP0z+u9eq/ee/euFEqhFH7ySeCjwEeBj+rr299of6P9jb//3fT2AMhcWVlZWVnZ3Ln6uD6uj2/eLF3SJV1VVapW1ara6dOH/nn9hf5Cf3HzpupW3aq7qSl5LHkseay+/nLt5drLtbdvm96eXPNZQJQqn1Q+qXzS73+vN+gNesObb0q7tEv7xImZ/kv6kr6kL/X3q0PqkDpUXx/aFNoU2rRz53l1Xp1X/f2mtxTAcMv1cr1cT5jQfb37evf1ujrpkR7p2bxZ1agaVZOXl/E/WCM1UnP/vv5cf64/f+utjg87Puz4cPfu1G9qbXp7neaTgChVeqD0QOmBP/5RHVPH1LHf/CbrN1EplVLZ2iqt0iqtv/51NBqNRqP37pnecgDpI42CgtTz9OTJ1PO0sjLbt6PX6/V6/Z/+1LG5Y3PH5g0bHnzX2pBkXlyPKTtadrTs6Ouvq/fV++r9LVscu6EbckNuPPGEhCUs4UWLpsanxqfGT5yIxWKxWCyRMH0/AH40GI6whCXc3Cyn5bScDoeduj11RV1RV559dkrFlIopFX19sauxq7GrbW2m7wenBEwP4JT0OY7UV6+/nrMbjkhEIitWSIVUSEVLS0ljSWNJYyhk+v4A/GQwHHtkj+xpahp8XuaImqwmq8m7di2oXlC9oHr2bNP3h1OsDUhgfWB9YP2WLdIgDdLwgx/kfICzclbOLluW35Hfkd/x5z8PPqABOGbYEcd22S7bKypyPsiDc6v9df11/XWvvWb6fnGKtQHRj+nH9GOrV5ueY/CVz4MHNCEBsm9YOHJ8xPEo6og6oo64YD/k1PaZHiDbvruD/uYb0/MMUyEVUtHWFi+Pl8fLf/Wray9ee/Haiz09pscCvGjYUpWpI44RBE8FTwVPFRRcLLxYeLEwHjc9T7ZYdwSi2lSbavvxj03P8UgsbQHj5pqlqlFK9iZ7k70u3i+NkXUB6Tvcd7jv8H//a3qOEXGyHciY6ZPjYzXw0sBLAy95YL+UIeuWsNJK75feL71/545arBarxYWFpucZUVjCEj53LvWEqK7mfSTAt9x6jmNEi2WxLL59O3ooeih6aNYs0+Nkm3VHIIO6pEu6Pv3U9Bijxsl2YBjPhiOtUAql0EP7oQxZG5C8SXmT8ibt35++5IjpeUaNpS3As0tVabpBN+iGgQE5Lsfl+KFDpudxirUBuTT90vRL0//xj/S1qkzPkzFOtsOHvHZy/FFUsSpWxfv2pZai//Y30/M4xfpLmRR/VvxZ8Wd//Wvf7b7bfbd//vPBS454xU25KTdnz+YSKbCZ55eq0h5cE2/OB3M+mPPBb3977dq1a9eu2XstLGtPog+Vvp5/X1tfW19bU5N6V72r3v3FL0zPlTHeRwKLeOV9HCPaLbtl94UL8a/jX8e/fv55vzwvfROQNEICmEc47OC7gKQREiD3CIddfBuQNEICOI9w2Mn3AUkjJED2EQ67EZAhCAkwfoTDHwjIIxASIHOEw18IyAgICTAywuFPBGSUCAkwHOHwNwKSIUICEA6kEJAxIiTwI8KB/0dAxomQwA8IBx6GgGQJIYGNCAe+DwHJMkICGxAOjAYBcQghgRcRDmSCgDiMkMALCAfGgoDkCCGBGxEOjAcByTFCAjcgHMgGAmIIIYEJhAPZREAMIyTIBcIBJxAQlyAkcALhgJMIiMsQEmQD4UAuEBCXIiQYC8KBXCIgLkdIMBqEAyYQEI8gJHgYwgGTCIjHEBKIEA64AwHxKELiT4QDbkJAPI6Q+APhgBsREEsQEjsRDrgZAbEMIbED4YAXEBBLERJvIhzwEgJiOULiDYQDXkRAfIKQuBPhgJcREJ8hJO5AOGADAuJThMQMwgGbEBCfIyS5QThgIwICESEkTiEcsBkBwXcQkuwgHPADAoKHIiRjQzjgJwQE34uQjA7hgB8REIwKIXk4wgE/IyDICCFJIRwAAcEY+TUkhAP4FgHBuPglJIQDGI6AICtsDUl+XX5dfl0ySTiA4QgIsmrwlXpYwhJubpaIRCSyYoXpuTIWlrCEz50b/Nrr2xGRiESqq6PRaDQavXfP9FiwAwGBI6w5IvEqjjiQAwQEjiIkOUY4kEMEBDlBSBxGOGAAAUFOEZIsIxwwiIDACEIyToQDLkBAYBQhyRDhgIsQELgCIRkB4YALERC4CiEZgnDAxQgIXMn3ISEc8AACAlfzXUgIBzyEgMATrA8J4YAHERB4inUhIRzwsIDpAYBMJNYm1ibWKqUeV4+rx5X3XwCdkTNyxoLtgC/xwIUnWPN5HI/i8Ge2A04gIHA168MxFCGBhxAQuJLvwjEUIYEHEBC4iu/DMRQhgYsRELgC4RgBIYELERAYRTgyREjgIgQERhCOcSIkcAECgpwiHFlGSGAQAUFOEA6HERIYQEDgKMKRY4QEOURA4AjCYRghQQ7kmR4AdhkMR1jCEm5uliNyRI54MBxhCUv43DkpkiIpunVLbspNuTl7tumxRu2W3JJbM2cGC4IFwYKFC6fGp8anxk+ciMVisVgskTA9HuzAxRSRFcOOOCISkciKFabnylj66ril8dJ46Zo1wY3BjcGNVVV6m96mt505Y3q8jKX/HyqkQipaWkoaSxpLGkMh02PBDixhYVysWaoa4bLq1lxGnqUtZBEBwZj4JRxDERLgWwQEGfFrOIYiJAABwSgRjocjJPAzAoLvRThGh5DAjwgIHopwjA0hgZ8QEHwH4cgOQgI/ICAQEcLhFEICmxEQnyMcuUFIYCMC4lOEwwxCApsQEJ8hHO5ASGADAuIThMOdCAm8jIBYjnB4AyGBFxEQSxEObyIk8BICYhnCYQdCAi8gIJYgHHYiJHAzAuJxhMMfCAnciIB4FOHwJ0ICNyEgHkM4IEJI4A4ExCMIBx6GkMAkAuJyhAOjQUhgAgFxKcKBsSAkyCUC4jKEA9lASJALBMQlCAecQEjgJAJiGOFALhASOIGAGEI4YAIhQTYRkBwjHHADQoJsICA5QjjgRoQE4xEwPYDtbAtH4kriSuIKT1BbXCy8WHixMB6fuGzisonLVq/W2/Q2ve3MGdNzZeysnJWzy5blt+e357f/5S8ljSWNJY2hkOmxbMcRiENsDcfV7Ve3X93+zTemx4IzOCJBJghIlhEO2ICQYDQISJYQDtiIkOD7EJBxIhzwA0KChyEgY0Q44EeEBP+PgGSIcACEBCkEZJQIBzAcIfE3AjICwgGMjJD4EwF5BMIBZI6Q+AsBGYJwAONHSPyBgDxAOIDsIyR2831ACAfgPEJiJ98GhHAAuUdI7OK7gBAOwDxCYgffBIRwAO5DSLzN+oAs18v1cj1hQk95T3lP+aefpr77y1+anitje2SP7Dl7NhW+1auj0Wg0Gr13z/RYQDYMvsALS1jCzc0SkYhEVqwwPVfGKqVSKltbQ++E3gm9U1V1Xp1X51V/v+mxnGL9B0p1X+++3n29ri71FeEA3GjwcR2RiESqq1MhOXfO9FwZa5VWaa2s7DnYc7Dn4O7dpsdxmrUBKX+7/O3yt3/2M5krc2Xupk2m58lYeqkqmogmomvWEA74QfpxHtwY3BjcWFXl1U9I1Iv0Ir1o69b53fO753fPm2d6HqdYG5BkXjIvmbd1q3pOPaeemzDB9Dyjlj7i2Ck7ZeeqVZzjgB+lP2o3dU5kzRqvHZGoGlWjavLyAg2BhkDDa6+Znscp1gZEzVQz1cyqKtNzjBpLVcAwnl/aOi7H5biH9kMZsi4gCzoXdC7o/OEPZZ/sk33TppmeZ0QsVQEj8vbS1owZJY0ljSWNoZDpSbLNuoAMrBtYN7DuRz8yPceIWKoCMubVpa3Q/ND80HwP7JcyZF1ARIkS9e9/mx7jkTjiAMbNa0ckgUmBSYFJ//mP6Tmyzdr3gZTGS+Ol8Rs31FK1VC2dM8f0POkjjuCTwSeDT1ZXp19JmR4LsIFr30eyQ3bIjs7O6AvRF6IvFBebHifb7DsCeUA1qAbV0Nxseg7CATjPrSfb9VP6Kf2UC/ZDDrE2IMlkMplM7t8vNVIjNffv53yAIUtVhANwnluWtvRhfVgf7u1VL6uX1csHDpi+X5xibUAu116uvVx7+3bqqz/8IWc3nD7imBecF5y3ciUnx4HcM36yPSlJSb71VrQj2hHtuHPH9P3hlDzTAzgt1hRrijW1tU3ZMWXHlB1z5qgr6oq68uyzWb+h/bJf9re0BIuCRcGitWs54gDMi8VisVgskZganxqfGj9xInWtqvJyuSE35MYTT2T79vRJfVKfPHas4+mOpzuerq01vf1Osz4gabGWWEus5dSpaV9N+2raV4mE7JJdsmvJEmmXdmnP/J3q+pK+pC/190undErn3r1FkaJIUeR3vzv9yulXTr/S12d6ewF8Kx2S4gvFF4ovfPxxX29fb19vQYE+qo/qowsWqPfUe+q9QMYrMumlKlklq2TVm29+Nxxam95up1n7U1gjKSstKy0rnTFDr9Qr9cotW1SLalEtq1enfgy4qOjhf+vOHVkn62TdJ58M3B24O3C3vv7Lg18e/PJgZ6fp7QGQufQ18/QpfUqf2rw59d3nn0/9OmPGsL+wRJbIkn/+U7+qX9WvNjUFZgVmBWbV17cXtBe0F3R1md6eXPNtQB4l/fkEiTWJNYk1P/1p+n0lvF8D8I/BHwvWokX/5CehaCgaiv7rX6nLs/f2mp4PAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtvsf2vlfs7i0WI4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMTItMTVUMTU6NTc6MjcrMDg6MDCiEb4vAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTEyLTE1VDE1OjU3OjI3KzA4OjAw00wGkwAAAE10RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fY2sxYnphMHpqOWpqZGN4ci9jbG9zZS5zdmdHkn2WAAAAAElFTkSuQmCC');
+  background-size: contain;
+  content: ' ';
+  inset: 0;
+}
+
+.icon-right::before {
+  position: absolute;
+  z-index: 9999;
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin: auto;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIEAYAAAD9yHLdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAJ4pJREFUeNrt3XtcVXW6P/Dn2VwCBxUzNbnkkXRSGzXW2huQRLyMIqKRJF7Q1CkrDS+VGp3Gy9g5YzI6qVsNfTmlqGmipQiIiJqAcnOvhaKRHidshoatpKaBogL7OX+s6Mz8flO5CfzutXne/+zXWhR8QOXZ3+93Pd8vAHuAEKW10lpp7dix0mXpsnR5/34pX8qX8r/7TpZlWZaJGl//9f6+fY3/X+PnEf2dMMYY/yJqYcbbxtvG2/7+lEM5lLN7NyyCRbBowICmfj56m96mt/PzDZGGSEPkxImWNpY2ljYVFaK/T8ZY6+MiOoCzMn1t+tr09a9/TQfpIB0sLITlsByW9+r1Sz8v5mEe5vn7Q3toD+0nT/Y77Xfa73ROTuWNyhuVNyorRX/fjLHWg0cgzUybcmrThvIoj/JUFcMwDMOeeKLFvmA8xEN8TQ2sh/Ww/rnnFFVRFfXwYdE/B8aY8zOIDuBsqDf1pt6vvdbihaPRBtgAG7y8wAQmMKWlyflyvpw/aZLonwNjzPlxAWlWiOiN3ugdH//Av7QFLGBxd4dzcA7O7dgh75H3yHvmzBH9E2GMOS+ewmomplhTrCn2qads5bZyW3lJieg8jWgADaABf/yjul5dr65fvPj7uyQ6F2NM/3gE0kxsb9vetr3do4foHP8vLMACLPj977W1mS1bwimcwsnVVXQuxpj+cQFpLt/Ct/BtmzaiY/y0adNqltYsrVmakqIVEg8P0YkYY/rFj/E2E5+zPmd9znbpAggI+PzzovP8qItwES727n23w90OdzuEhfl86fOlz5f79lmtVqvVeveu6HiMMf3gEUgzqVfqlXqluFi7qqsTnefnYCImYmJ4OOVSLuWeONF/Zv+Z/Wf6+orOxRjTD15Eb2ZSlVQlVWVkYCRGYuSoUaLz3C86QSfoRHk5lVAJlURElISWhJaE/vWvonMxxhwXj0CaGT1Lz9KzS5eCDDLI+nnaCQfiQBwYEID1WI/1J05oi+6SJDoXY8xx8RpIM7tccbnickVlZdekrkldk4gwAzMwY8gQ0bnuF2ZhFmZ5eWkd7pMn+1T4VPhUKIq2RvLll6LzMcYcB09htShE6YJ0Qbqwdi3GYRzG6bCxbxbMgll372ojqilTlEAlUAncu1d0LMaYeDyF1aKI1CfUJ9Qn5s6FuTAX5r71lt6mtiAJkiDpoYeojuqo7uOP5VQ5VU6dOVN0LMaYeDwCecCkFClFSpk+HcbBOBi3eTOa0IQm/TX20RbaQlsSE9V+aj+131tvic7DGHvwuIAIIp+Xz8vno6OpJ/Wknrt2YRAGYZCnp+hcdpsAE2DC++8rbypvKm82TtHZbKJjMcZaHhcQwYxnjWeNZ8PDaTpNp+mpqdrd9u1F52qa/fu9LF4WL8ukSTmYgzl4547oRIyxlsNrIIJZ+lr6Wvrm5GBv7I29Bw6EN+ANeOMf/xCdq2mefbbGWGOsMR48GHQx6GLQxXbtRCdijLUcfozXQVSWVpZWllZV+df51/nX7dtH8RRP8aNGwQk4ASc6dhSdzz7du9NVukpXR4zoFNMpplPM/v1Xsq9kX8m+dUt0MsZY8+ERiIMpTitOK067dMm1zrXOtS4sTLurqqJz2e04HIfjsuw623W26+yCgsD8wPzAfMfbrZgx1nRcQBxUUVxRXFHclSu1CbUJtQnh4dpd/R1V+0OHuxGNaMzLazw3RXQuxtgvx4voOtEnpU9KnxR3d88yzzLPsu3bIQ3SIG38eNG57BYEQRB04wZVUzVVP/OMukPdoe7IyxMdizFmPx6B6ETZ+LLxZePv3Qv4PODzgM/j4mg37abdGzeKzmW3YiiGYm9vHIyDcXB2tlwil8gl48aJjsUYsx+PQHROTpaT5eSEBDCDGcwrVojOYy9KoiRKamgAK1jBOmuWGq1Gq9GbN4vOxRj7eVxAnISUKWVKma++ihVYgRXr1sEm2ASbDPoZYTZu8bIJNsGmd95RUEEF//AH0bEYYz9OP79g2E9SI9VINfL996mWaql23DjaQBtog44a+RRQQEEEIxjBuHSptgml2ax9UEeFkLFWhEcgTko7z2PIECqiIiravx+DMRiD9drYt3MnEBDQ9OmKqqiK6vgnPjLWGvA7OyelKIqiKJ99pj31NHQovAavwWtVVaJzNU1cHKyCVbAqM/Ppjk93fLpj27aiEzHGeATSahjTjenG9IAAOkyH6XBWFpyEk3BSf419tISW0JJTp2wdbB1sHaKiTg86Pej0oG++EZ2LsdaIC0grozXyPfpow7SGaQ3TMjNxKS7FpTps7CMgoPPntYuICG1q6+9/Fx2LsdaEC0gr1Z/6U3/y9nZNcE1wTThwAI7CUTjauHWK3litVEEVVDFypFqlVqlVpaWiEzHWGvAaSCt1Bs/gGbxx46bfTb+bfsOHUxqlUZpej6rt2hVX4kpcefy4sYOxg7HD00+LTsRYa8AjEAYAALGxsbGxsS4u5XK5XC4nJcEe2AN7XnpJdK6muX1bex0/XnuYICNDdCLGnBEXEPZvIMokk0xLlzb2ZYhOZK/GDne8htfw2iuvKJFKpBL5wQeiczHmTPg8EPZvWZdZl1mXHT/uY/Yx+5ivX4cn4Ul4MiLih4Y/B4cZmIEZBgPchJtwc8wY33Lfct/y2trKO5V3Ku+cPCk6H2POwOF/ETDHoDUmxsVpV1u3aq9ubqJzNY3ZrE1tvf66ds1nuDPWFFxAmF0C9wTuCdwzbBj6oi/67tuHc3AOztFfYx9Npak0dft2TMZkTH7xRe5wZ8x+XEBYk5i6m7qbuptMtlG2UbZRGRlQCIVQ2KmT6Fx2i4RIiExPh0zIhMwJE7SRSeMiPGPsp3ABYb+INrXVq5d2lZWlvT72mOhcdiMgoKIi7WL0aG1EcvWq6FiMOTLuA2G/iPaOvbEjPCQEBsEgGKTDRj4EBAwOhkWwCBbl5BhvG28bb/v7i47FmCPjEQhrVn379u3bt2+HDm55bnlueWlpOAyH4TAdNvaFQiiE/u1v2Bk7Y+eICMtiy2LL4gsXRMdizJHwY7ysWVVVVVVVVd2545Ptk+2T/fHH2t3GvbZ+/WvR+e5bBVRAhbc3zaJZNCsu7lG3R90edcvLu6xcVi4rX38tOh5jjoCnsFiLaFyMDggICAgIiI6mPbSH9uivkQ/n4Tyc9/DDBjSgAbOzA/MD8wPzR44UnYsxR8BTWOwBQpTmS/Ol+StW4HE8jsfffFN0IrsZwQjGe/dgGkyDadOnK6FKqBK6a5foWIyJwFNY7IGyFlgLrAVHjnTd3nV71+03buDj+Dg+PmKEXjrcoRIqodLFBaqgCqpiYnzAB3ygpsZqtVqt1oIC0fEYe5C4gDAhrNus26zbiop8yZd86dIlqIEaqBk9Wvuoi+P/vbSCFayNBW/EiK5ZXbO6Znl6WpOsSdako0dFx2PsQXD8d3ysVZCWS8ul5aNH4yf4CX6ye7d2t00b0bmaJjnZy+Jl8bLMmJGDOZiD9fWiEzHWEriAMIciS7IkS8HB2lV6utaf8cgjonPZi+IpnuIPHHAf7j7cffjEiYX+hf6F/rW1onMx1pz4KSzmULQO8KKihjUNaxrWhIdTPuVTfkWF6Fz2wg24ATc888y9gnsF9woyM7XC2L696FyMNScuIMwhnR50etDpQWVltI7W0bqwMMqjPMrTXyMfJmIiJoaHUy7lUu6JE/1n9p/Zf6avr+hcjDUHnsJiuhBSEVIRUvHww3Xn6s7VnUtP17YcGTBAdC57USIlUuKlS7YDtgO2AxERp82nzafNFy+KzsVYU/AIhOmCtoZw/bpWQIYPh9WwGlYfOiQ6l70wARMwoXt3wzjDOMO4vDxtM0pJEp2LsabgAsJ0pXRh6cLShbdu1V6uvVx7OTqaUimVUvXXyIev4+v4epcuEA/xEJ+To62RjBghOhdj9uApLOYEELVfwCtXak9tzZ8vOpHdvu9wJ5lkkp9/Xn1ZfVl9OSVFdCzGforjN2wxdh+0TvDDh31W+KzwWXHnDtRDPdQPG/avDX8OrLHDfQbMgBkxMT6jfUb7jK6qsn5s/dj6scUiOh5j/47j/8NirAm0tYVp0+gUnaJTf/kLmtCEJldX0bnsRVtoC21JTFT7qf3Ufm+9JToPY/+MCwhzavJ5+bx8PjqaelJP6rlrFwZhEAZ5eorOZbcJMAEmvP++8qbypvLmnDnaTZtNdCzWunEBYa2C8azxrPFseDhNp+k0PTVVu6vDxr4oiIKoffu8lnkt81oWF6dtlXLnjuhYrHXip7BYq2Dpa+lr6ZuTg72xN/YeOBDegDfgjX/8Q3Quu2VABmSMHVtjrDHWGA8eDLoYdDHoYrt2omOx1okX0VmrUllaWVpZWlXlX+df51+3b5+2Z9WoUXACTsCJjh1F57NP9+50la7S1REjOsV0iukUs3//lewr2Veyb90SnYy1DjwCYa1ScVpxWnHapUuuda51rnVhYdpdVRWdy27H4Tgcl2XX2a6zXWcXFGgnJvboIToWax24gLBWrSiuKK4o7sqV2oTahNqE8HDt7uHDonPZCwfiQBwYEIBGNKIxL88Ua4o1xTaeRc9Yy+BFdMb+SZ+UPil9UtzdPcs8yzzLtm+HNEiDtPHjReeyWxAEQdCNG1RN1VT9zDPqDnWHuiMvT3Qs5lx4BMLYPykbXza+bPy9ewGfB3we8HlcHO2m3bR740bRuexWDMVQ7O2Ng3EwDs7OlkvkErlk3DjRsZhz4REIY/dBTpaT5eSEBDCDGcwrVojOYy9KoiRKamjQOvNnzVKj1Wg1evNm0bmYvnEBYcwOUqaUKWW++ipWYAVWrFsHm2ATbDLoZyQvgwwykZb7nXcUVFDBP/xBdCymT/r5i8+YA1Aj1Ug18v33qZZqqXbcONpAG2iDjhr5FFBAQdQ2b1y6VLogXZAumM3aB3VUCJlD4BEIY7+AtufWkCFUREVUtH8/BmMwBuu1sW/nTiAgoOnTtaOF6+pEJ2KOjd9xMPYLKIqiKMpnn2lPPQ0dCq/Ba/BaVZXoXE0TFwerYBWsysx8uuPTHZ/u2Lat6ETMsfEIhLFmZEw3phvTAwLoMB2mw1lZcBJOwkn9NfbRElpCS06dsnWwdbB1iIrSzqj/5hvRuZhj4QLCWAvQGvkefbRhWsO0hmmZmbgUl+JSHTb2ERDQ+fPaRUSENrX197+LjsUcAxcQxlpQf+pP/cnb2zXBNcE14cABOApH4Wjj1il6Y7VSBVVQxciRapVapVaVlopOxMTiNRDGWtAZPINn8MaNm343/W76DR9OaZRGaXv3is7VNF274kpciSuPHzd2MHYwdnj6adGJmFg8AmHsAYqNjY2NjXVxKZfL5XI5KQn2wB7Y89JLonM1ze3b2uv48drDBBkZohOxB4sLCGPCIMokk0xLlzb2ZYhOZK/GDne8htfw2iuvKJFKpBL5wQeic7EHg88DYUwg6zLrMuuy48d9zD5mH/P16/AkPAlPRkT80PDn4DADMzDDYICbcBNujhnjW+5b7lteW1t5p/JO5Z2TJ0XnYy3L4f+CMtaaaI2JcXHa1dat2qubm+hcTWM2a1Nbr7+uXfMZ7s6GCwhjDihwT+CewD3DhqEv+qLvvn04B+fgHP019tFUmkpTt2/HZEzG5Bdf5A5358IFhDEHZupu6m7qbjLZRtlG2UZlZEAhFEJhp06ic9ktEiIhMj0dMiETMidM0EYmjYvwTK+4gDCmA9rUVq9e2lVWlvb62GOic9mNgICKigwHDAcMB6KiTvmd8jvld+2a6FisabgPhDEd0N6xN3aEh4TAIBgEg3TYyIeAgMHBtmJbsa04NzfoYtDFoIt+fqJjsabhEQhjOtS3b9++fft26OCW55bnlpeWhsNwGA7TYWNfKIRC6N/+hp2xM3aOiLAstiy2LL5wQXQsdn/4MV7GdKiqqqqqqurOHZ9sn2yf7I8/1u427rX161+LznffKqACKry9aRbNollxcY+6Per2qFte3mXlsnJZ+fpr0fHYT+MpLMZ0rHExOiAgICAgIDqa9tAe2qO/Rj6ch/Nw3sMPG9CABszODswPzA/MHzlSdC7203gKizGngyjNl+ZL81eswON4HI+/+aboRHYzghGM9+7hLbyFt6ZNs+yw7LDsaBxpMUfBU1iMOSFrgbXAWnDkSNftXbd33X7jBj6Oj+PjI0bopcMdKqESKl1coBt0g27PPecDPuADNTVWq9VqtRYUiI7HNFxAGHNi1m3WbdZtRUW+5Eu+dOkS1EAN1IwerX3UxfH//VvBCtbGgjdiRNesrlldszw9rUnWJGvS0aOi47V2jv9OhDHWbKTl0nJp+ejR+Al+gp/s3q3dbdNGdC67xUAMxGzd6vW219teb7/0Ug7mYA7W14uO1dpwAWGsFZIlWZKl4GDtKj1d68945BHRuexFGZRBGamp7nXude51kyYV+hf6F/rX1orO1VrwU1iMtULanlRFRQ1rGtY0rAkPp3zKp/yKCtG57IVRGIVR0dH3Cu4V3CvIzNQKY/v2onO1FlxAGGvFTg86Pej0oLIyWkfraF1YGOVRHuXpr5EPEzERE8PDKZdyKffEif4z+8/sP9PXV3QuZ8dTWIyxHzyV+1TuU7mdOhm+NXxr+DYjA9/Bd/Adk0l0LnvRCTpBJ8rLaRgNo2FhYSX5Jfkl+ZWVonM5Gx6BMMZ+oI1Ivvnmzt07d+/cHTpUu3v4sOhc9sKBOBAHBgQYFhsWGxbv3dsnpU9KnxR3d9G5nA2PQBhjP6rxF69HqEeoR+jWrRiN0Rg9aZLoXE3z6qta535SkugkzoILCGPsPhkM0gXpgnRhzRqMwziMmzNHdKL7thAWwsKvvlImKhOVid27i47jLLiAMMbsJifLyXJyQgKchJNw8t139dLhjs/is/hsr16862/z4DUQxpjdlGnKNGVaYiJFURRFvfIKJVESJTU0iM71s76Bb+Cb3/xGdAxnwQWEMdZkarQarUZv3ky9qTf1Hj8eXoFX4BWbTXSuH0PP0rP07K9+JTqHs+ACwhhrstjY2NjYWBcX3ISbcFNUFGyCTbDJ4Li/VxbCQljIW540F8f9g2aMOSztjPY2bb7c8OWGLzccOIC7cBfueuEF0bl+ViqkQuqNG6JjOAtX0QEYY/rReJQuHaWjdFRHR+nKIINMVLerblfdLotFdBxnwQWEMfazgi4GXQy66OfXcLbhbMPZrCwYBsNgWJ8+onPdL/oT/Yn+lJ9f6l3qXepdVSU6j7PgAsIY+1HaVFWvXg0TGyY2TMzK0u4+9pjoXPYypBhSDCl//KPoHM6G10AYY/8fU3dTd1N3kwlCIARCcnO1u/orHPQcPUfPbdpkednysuXlzEzReZwNj0AYYz+Q3pbelt6OiLBdt123Xf/kEyiEQijU32OvFE/xFH/gwHc139V8VzNvnug8zsrhO0cZYy1Pm6qKi9Outm7VXt3cROeyF31Kn9Kn27bhWByLY2fM0M49qasTnctZ8RQWY62Ysaexp7Hn7NlaA+D27dpd/RUOjdmsdlO7qd2mT+fC8WC4iA7AGHvwftjL6jSchtPvvaeXvaz+7xvQHssld3In94QE9Zh6TD22eLHoWK0Nj0AYawUaO8blcrlcLt+0CcxgBvOKFaJz2YtO0Sk6VV+P5/E8np8xQ/1U/VT9dOVK0blaK/2842CM2a2HuYe5h/mhh9pvbb+1/dbt2wEBAWNjRedqmtu3tU7y2FjFT/FT/A4eFJ2oteMRCGNOSDsIysurXVy7uHZxaWm6LRxzYS7M/fZbLMdyLB8xgguHY+ERCGNOJHhn8M7gnV261I2pG1M3JjMTB+NgHBwYKDqX3QbAABhQWQn5kA/5I0dqi+Jnz4qOxf4Vj0AYcwJBY4LGBI3p3r3erd6t3i0vT7eFIwzCIOyLL7TCMWAAFw7HxiMQxnTMOMU4xTjlN78hb/Im76wsKIACKPDxEZ3LXrSEltCSU6dwGS7DZaNGaYXj6lXRudhP4050xnRIJplkGjyYjGQk4/792t327UXnshfNp/k0/8gRzxc8X/B8ISbm5LWT105eq64WnYvdH57CYkxH5PPyefl8dDQVUREVNe7tpL/CAdEQDdEffYSrcBWuGjWKC4c+8RQWYzogpUgpUsr06TAOxsG4zZvRhCY0uep0BsFsVhRFUZTXX9euHfcIXPbTuIAw5sB+6BjXaeNfY8e4dtTtO+8oqKCCf/iD6Fiseej0HQxjzgxRKpPKpLJVq+B5eB6ef+MN0YnsRUmUREkNDWAFK1hnzVJRRRU3bxadizUvHoEw5gC0xj93d4+rHlc9riYn4wf4AX4wcaLoXHabBbNg1t27WIqlWDp5ssVsMVvMn3wiOhZrGVxAGBOo38p+K/ut/NWv3ILdgt2C9+6F1+F1eH3kSNG57BYEQRB04wZVUzVVP/OMukPdoe7IyxMdi7UsLiCMCRBSEVIRUvHww3Xn6s7VnUtPh0WwCBYNGCA6V9NYrbZSW6mtNDKypK6krqTuzBnRidiDwY/xMvYABa4KXBW4qlu3ex3vdbzXMT9fr4WDTtAJOlFerl2FhXHhaJ14EZ2xB+Cp3Kdyn8rt0weDMRiDDx3CUAzFUH9/0bnstgyWwTKLpX59/fr69VFRpUqpUqpUVYmOxcTgKSzGWpAsyZIsBQdrV+np2q64jzwiOpfdhsNwGH7smMuLLi+6vDh2bHHP4p7FPb/7TnQsJhZPYTHWAqTl0nJp+ejRWsE4dky3hSMKoiBq3z6vd73e9Xo3KooLB/tnPAJhrBlJnaXOUucpU9Af/dH/ww+1uzo8YzwVUiF1wwbt/I25c7Wb3DHO/hWfic5YM5COSEekI/PmYSAGYuDGjdoZ4/rbaoS20Bbakpio9lR7qj0bGxiJROdijkl3f8EZcxyIUqlUKpW++y7+Dn+Hv0tIEJ3IXo0d42hFK1pnz1b7qf3Ufhs3is7F9IGnsBizQ2xsbGxsrItL+ZflX5Z/uXGjtrYxY4boXHb7vmOcbGQj29Sp6svqy+rLKSmiYzF94QLC2H3oYe5h7mF+6KH2Ie1D2ofs3Kn9Ao6JEZ3LbvEQD/E1NRADMRATE6N4K96Kd3a26FhMn7iAMPYT+lN/6k/e3q5GV6OrMS1NuztwoOhc9qLVtJpWX7liWGRYZFgUGWnJteRacktKROdi+sZrIIz9G7Isy7LctSscgANwoPHgpv79ReeyFyVSIiVeumTba9tr2xsRoeaquWruxYuiczHnwCMQxv6JVjgefxwICCgrS1vjePxx0bnsRTmUQznnzjUsaFjQsGDkyDMbz2w8s/Ef/xCdizkXbiRkDAACQwNDA0ONRgiBEAgpKNBt4UigBErIycFBOAgHDRzIhYO1JB6BsFZNmi3NlmYPHQprYA2s2bdP26uqXTvRuexFGZRBGamp7nXude51kyYV+hf6F/rX1orOxZwbr4GwVklaK62V1o4dC8EQDME7d2qFw8NDdC67xUAMxGzd2rZL2y5tu7z0Ug7mYA7W14uOxVoHHoGwVkUaJA2SBsXH4xScglPMZu2sboPupnJ/6Bjvp/ZT+731lug8rHXiAsJaBTlZTpaTExLADGYwr1ghOo/93wDIIBNBOIRD+IIFymRlsjL5vfdEx2Ktm+7eeTF2Pxo7xqW/Sn+V/pqUpNvCYQQjGO/dw9t4G2/HxXHhYI6ERyDMqfzQMX69/fX217dtgzRIg7Tx40XnspsJTGC6dcs21TbVNnXcuJLQktCS0EOHRMdi7J/xCIQ5hT4pfVL6pHh5tYtrF9cuLi1Nr4WD1tJaWnv9uo1sZKPhw7lwMEfGIxCma8E7g3cG7+zSpf7P9X+u//PBg9pdSRKdy26hEAqhf/sbdsbO2DkiwrLYstiy+MIF0bEY+yn8GC/TpaAxQWOCxnTvXu9W71bvlpWl3e3ZU3Quu/0efg+/Lytz6evS16VvRIR24t/XX4uOxdj94ALCdMU4xTjFOOU3v2mIbIhsiDx0CFbACljh6ys6l90ICKioyBBkCDIERUUV+xX7FftduyY6FmP24CkspgvGs8azxrPh4TSdptP01FTtbvv2onPZbR2sg3VpaW7+bv5u/hMmcMc40zNeRGcOzfhfxv8y/tczz9j62PrY+jTuiqu/wkGf0qf06bZtMBtmw+znnuPCwZwBj0CYQ9J2xZ02jU7RKTr1l7+gCU1o0t8Z4xqzWVEURVFee0275jPGmXPgEQhzKD90jMsgg7xli+4Kx/cd49SNulG3N9/UCse8edoHuXAw58IjEOYAEOW18lp57Z/+BNtgG2xbsEB0IntpI6X6esNgw2DD4Fde0U78+/BD0bkYa0n6eWfHnIrW+Ofu7hHqEeoRunUrREM0RE+aJDpX09y+jZVYiZWxsVrhaOxHYcy58RQWe6D6rey3st/KX/3K447HHY87+/djNEajHgvHXJgLc7/9FsuxHMtHjFD8FD/FjwsHa11cRAdgrUNIRUhFSMXDD9Ntuk23MzNxFa7CVUOHis5ltwEwAAZUVsJe2At7f/tb5ZJySblksYiOxZgIvAbCWpR2VKyPj+Gu4a7hbuOeTn37is5ltzAIg7AvvoBcyIXckSMVVVEV9e9/Fx2LMZF4Cou1iMDqwOrA6t698TP8DD8rLNTu6q9w0BJaQktOndIKx6BBXDgY+z88AmHNytjT2NPYMyiI2lJbapuRAQgI+MgjonPZbSWshJVHj3rEesR6xI4de/LayWsnr1VXi47FmCPhEQhrFsZ0Y7ox/be/tSXbkm3JR47otnBEQzREf/QRLIAFsCAykgsHYz+ORyDsF5E6S52lzlOmoD/6o39j34Obm+hc9qKdtJN2rlunPqE+oT7R2DFus4nOxZgj4xEIaxJZkiVZmjsX/xv/G/87OVm7q6PC0XjGuAUsYFm2TCscc+dqH+TCwdj94BEIswOiTDLJtHSpdlb30qWiE9mLkiiJkhoawApWsM6apUar0Wr05s2iczGmR1xA2E+KjY2NjY11cSmXy+VyOSkJ9sAe2PPSS6Jz2W0WzIJZd+9iKZZi6eTJFrPFbDF/8onoWIzpGRcQ9m/1MPcw9zA/9FA7j3Ye7Tw++gg34Sbc9NxzonPZLQiCIOjGDaqmaqp+5hl1h7pD3ZGXJzoWY86A10DYv+hP/ak/eXu3/7r91+2/zs7Wa+GgAiqggsuXDVcNVw1XhwzhwsFY8+OtTBgAAJhiTbGm2EcfhTbQBtpkZ+OH+CF+GBwsOpe96ASdoBPl5aSSSurQocp8Zb4yv6xMdC7GnBEXkFZO698ICKAqqqKqY8dwG27DbX36iM5lt8EwGAYrSn1ZfVl92dChZyaemXhmYkWF6FiMOTPezr2VkiRJkiRZpm/pW/r24EE4CSfhZOfOonM1zWefucx0meky89lnlZ5KT6Xnd9+JTsRYa8BrIK2MdlTskCFQDMVQfOwYrIE1sEaHhSMKoiBq3z4vi5fFyzJqVHHP4p7FXDgYe6D4KaxWQlorrZXWjh0LwRAMwTt3YjzGY7yHh+hcdkuFVEjdsEE7f4Mb/xgTiUcgTk7KlDKlzFdfRU/0RM+9e/VaOGgLbaEtiYla4Zg9W7vLhYMxkXgNxEnJyXKynJyQAItgESxasUJ0Hns1doyjFa1onT1b7af2U/tt3Cg6F2Ps//BTWE6isWPc44DHAY8D77+PC3EhLnzrLdG57PZ9x7i21ciUKepkdbI6uXGvLcaYI+E1EJ3rk9InpU+Ku7tnmWeZZ9n27ZAGaZA2frzoXHaLh3iIr6mBGIiBmJgYxVvxVryzs0XHYoz9OC4gOqUVDi8vz0TPRM/Exj2dRowQnctetJpW0+orVwyLDIsMiyIjLbmWXEtuSYnoXIyxn8drIDoTvDN4Z/DOLl3qE+sT6xMPHtTuSpLoXPaiREqkxEuXbHtte217IyLUXDVXzb14UXQuxtj946ewdELbo+o//qPukbpH6h7JzdXu6rBw5FAO5Zw717C3YW/D3rCw0+bT5tNmLhyM6RFPYTk403rTetP6J5+0dbB1sHXIyoL34D14z9dXdC57UQIlUEJODq7AFbgiOlpRFVVRb94UnYsx1nRcQByUNFIaKY0MCdEWxdPTMQRDMKRjR9G57EUZlEEZqanude517nWTJhX6F/oX+tfWis7FGPvleA3EwQSWB5YHlo8ZA92gG3TbvRuDMAiDPD1F57JbDMRAzNatbbu07dK2y0sv5WAO5mB9vehYjLHmwyMQByEfk4/Jx6ZOpcE0mAZ/8AGa0IQmV90V+MaOca3xT4d9KIyx+8YFRDDpiHREOjJvHqZgCqasXg0KKKCgfv5cZJBBJoJwCIfwBQuUycpkZfJ774mOxRhrebp7h+scEOUb8g35RmIiDINhMGzhQtGJ7GYEIxjv3cNbeAtvTZtmmWyZbJn88ceiYzHGHhwuIA9IOIVTOLm6Vv+5+s/Vf960SSscL7wgOpfdTGAC061btqm2qbap48aVhJaEloQeOiQ6FmPsweM+kBamnb/Rpk31N9XfVH+Tmoq7cBfu0l/hoLW0ltZev24jG9lo+HAuHIwx/cy168zTHZ/u+HTHtm3v/O7O7+787vBh+Aw+g89CQkTnsttCWAgLv/rKMNAw0DAwIuKU3ym/U37/8z+iYzHGxOMC0iIQ5Xw5X85PTYU5MAfmjBkjOlHTnD1re8j2kO2hkSNL8kvyS/IrK0UnYow5Di4gzcw4xTjFOGXiRPqCvqAvdu0SncduBARUVGQ4YDhgOBAVpY04rl0THYsx5nh4DaSZUSfqRJ3+8z9F57DbOlgH69LS3FLdUt1ShwzhwsEY+zlcQJqJMd2YbkwPCIBcyIXcfv1E57lvH8FH8NGWLV4DvAZ4DYiJ4a1GGGP3ix/jbSbUg3pQj759Reewj9ms9FJ6Kb1ee+3774JEJ2KM6QePQJoJlVIplXboIDrHj/q+Y1w7Y/yNNxRFURRl3rzv03PhYIzZjQtIMyEjGcnoeGsGdIpO0an6ejyP5/H8jBmWSkulpXL1atG5GGP65yI6gLN4rPyx8sfK6+qomqqpuvGdvUDfd4wbrAarwRoTY1lvWW9Zv2eP6FiMMefBI5BmUpxWnFacdukSLIElsOTMGVE5qJAKqfDaNfqKvqKvfvtby8uWly0vZ2aK/vkwxpwPF5BmRlfoCl1ZvlzMV7dawRd8wXfoUPWQekg9VFgo+ufBGHNe3EjYIhCly9Jl6fK+fRiFURgVHd1iXyoMwiDsiy9wOS7H5RERljaWNpY2FRWifwKMMefHI5AWQeT5pOeTnk8+/zy8C+/Cu7m5zf4lvv+8hgWGBYYFYWFcOBhjDxovoreQitqK2orae/d8Pvf53Ofzjz4CBAR0c6NiKqZiWcbNuBk3u7nd7+fT/r/aWqzHeqxftQpWwkpY+cILloWWhZaFNTWiv1/GWOvDU1gPWGBoYGhgqI+Py1cuX7l8NWEC7aW9tHfIELpO1+m6v3/jf4cP48P4cEUFvUPv0DvHjtF39B19l5LCmxoyxhzF/wKeYeMy/zPC/wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0xMi0xNVQxNTo1NzoyNyswODowMKIRvi8AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMTItMTVUMTU6NTc6MjcrMDg6MDDTTAaTAAAATXRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl9jazFiemEwemo5ampkY3hyL3JpZ2h0LnN2Z7O3J80AAAAASUVORK5CYII=');
+  background-size: contain;
+  content: ' ';
+  inset: 0;
+}
+
+.icon-refresh::before {
+  position: absolute;
+  z-index: 9999;
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin: auto;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIEAYAAAD9yHLdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAMQpJREFUeNrt3XlcVHX3B/Bz7rCISi6IC+ijkpZpIswMyBLgluVuKm4pqWmEuG/hUpr5uFYoiuaSFrklZvroo+jPFRURZgYVxZ1K3HIXUBSGe35/XC9PWpYL8J2B8/6H1wwGn3sb5sz93u/3fAEYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOM/QUUHYCx59F0ddPVTVdXq5YXkxeTF1O3Ll7H63jdzY3eoDfojTp1UIta1FatCm/D2/C2kxPchttwu0oVyIRMyKxShVpSS2pZuTIkQzIklyuHv+Av+IudHURBFERJkvJbKlQo+IWhEAqhsgz2YA/2d+8WPP/oMXWkjtTx4UMMwAAMuH4d2kE7aHf9OoVQCIX8/jvuxJ2489o1WkJLaMmlS+AHfuB37hwmYAImnDtnNBlNRlNGhvJDiUSfX/ZygiiIgqhMmayJWROzJgYF4Xbcjtv9/akX9aJerq7QE3pCTwcHiIEYiMnMxNpYG2ufOYNTcApOOXDAcNZw1nA2KUn0cTwrLiBMKO+z3me9z9asKa+V18prtVr5tHxaPv3mmzgaR+Nod3cYCANhYMOGyr9+9VXla9myonMXFoqmaIp+8ADDMRzDz56FTtAJOh07RgmUQAkGA17Da3jNYMjrldcrr1dKyrGxx8YeG3vvnujc7I8QdbG6WF3skCFUjapRtYkTcSSOxJHVqr3Yz0tNVb6OH280Go1G43//K/oIn3rkogOwkgzR09bT1tPW3V3jrHHWOLdoIRtkg2zw84PTcBpO+/jgGByDY2rWFJ3U0tEiWkSL8vNxDa7BNSdOkAM5kMOuXTgYB+PgnTvz1uStyVuzbx8XmOKh0+q0Oq2tLW2hLbRl9WrsgB2wQ7duhf17aAWtoBWzZpncTe4m94gI0cf9JC4g7KU0oSbUhCpW1FTTVNNUa98eTGACU9u2uAf34J6WLWEuzIW5VauKzlni6UEP+txcZYju0CGoDtWh+pYt+QH5AfkB69cfxaN4FH/9VXTMkkJ3UXdRd3HBAuWKMTy8yH8hAQENH64MeUZFiT5+FRcQ9kwaN27cuHHjSpVsbW1tbW2DgxEREbt2Vb7bvLny1dZWdE721+gz+ow+S06W+kn9pH7r1+fdyruVd2vdOi4sz0f7rvZd7bs+Pvgv/Bf+KyEBjGAEIxb5+yjNp/k0PytLE6mJ1ES+9lpybHJscuzVq6LPBxcQ9hjlJqCNTbY+W5+tb98eFsEiWNS3LxyDY3CsXTvlsb296JzsJT2aHEBdqAt12bULMzADM5YsgQ/hQ/hw0yblk25enuiYlka7XLtcu3zTJozGaIzu2LG4fz85kzM5jxxpijPFmeLmzhV9PriAlHKefp5+nn4uLtgQG2LDQYOwDJbBMh99BIfgEBxycRGdjxUvOkSH6NDVq7gEl+CSFSvMx83Hzcejo49+c/Sbo99cuiQ6nyjKPY8qVchABjJcuYJe6IVeNjbFHqQNtIE2W7YYpxmnGad16CD6vEiiA7DipfwhNG6sS9Wl6lJ/+EF6KD2UHv76K6ZgCqZMmcKFo3RDX/RF3+rVYQWsgBXjx9uQDdlQero2XZuuTV+2zOui10Wvi6+9JjpncaMP6AP6ICBAWOFQc0RQBEXUqSP6fKj4CqSEKxizvY7X8fqkSaADHejati2usVtWwqhDX+2pPbXfsIFqU22qPW1aSl5KXkre0aOi4xUV3QPdA92Df/8b/MEf/CdMEJvmwgVlem/t2qLPC1+BlDAe8R7xHvENGypXGuvWFdzsAwCAdu24cLCXshgWw2JJUqetSv2l/lL/lBT19abfot+i3+LmJjpmYaMbdINu1K0rOgf4gi/4irsCehIXECvX5OMmHzf52NVVO087TzsvJkZzSnNKcyo1FRAQMDiYCwYrUurr69HrTa4iV5GrnDihu6O7o7sze7Y6e090zJeFC3ABLnjRhYGFiICALGe2IxcQK+OT4ZPhk+HgoNPpdDrdp5/agA3YwOnTGIMxGNO3r/oJUXROVjopK+rLlIGW0BJajh1rF2gXaBd4+rRut263bndIyKN/ZX0faHbADthRrpzoGCCDDDIXEPacPL/0/NLzy8DAXKdcp1ynlBTl2alT1Z5OovMx9pcSIRESnZ1hLIyFsd9/rxunG6cbt2+fOtQqOt4zQ0BAC3jj9gIvEHgT/0lcQCyUcqVRubJypfHdd9IZ6Yx0Zu9epWnf66+LzsfYC9kFu2BXQIDmjOaM5ozJpCMd6WjKFLU1iOh4Fo+vQNjfUWdN5Z7OPZ172mBQnv3gA76XwUoUdUGqHvSgnzwZpsJUmJqQoP9C/4X+C/6A9DTkTu7kzlcg7JHg4ODg4GCNRv0kpvwhHTiAn+An+IkFzPpgrDhMhskwWa+nS3SJLhmNWq1Wq9V+9JHoWJYGwzAMwzQa5ZH4e53CA5RW+vv6+/r7tWqlD0oflD5o9271k9jjLxDGShl1nxZERFy8WHtVe1V7deNGtWmn6HiWol5Uvah6UeKHsizmUqi00J3SndKd6tRJNskm2bR8OY7H8Ti+cmXRuUobSqIkSsrJUVYW37sHw2E4DH+Gwn0QDsLBihV5SLF4YDtsh+06dbLxt/G38U9OVu6VdOmi9OpS980oerSX9tJeRGyGzbCZ6LMCUPZh2YdlH6pDWQ8fisrBfwDFRNtH20fbZ8IELItlsey0afwG9ILCIAzCHj6kntSTep49C6thNaw+fRpDMARDTp/GbtgNu506BTNgBsy4cEFpQXHrltnb7G32vnXLYaLDRIeJt24l1kqslVgrJ+d5f/3jzSadneVj8jH5WNWqmmhNtCbaxYXqUT2q5+xMy2k5La9ZU9mBsHFj/Ba/xW8bNVKuNF9/HQxgAIOdnejTaXW8wAu87t3DbMzG7IEDDSsNKw0r164t6l+rzdJmabNMJqWAeHqKPg1mg9lgNlSqpHRTvnNHVA5+Aysij88qWbhQmQY4cKDoXJaODtABOpCeDtfgGlw7cADfw/fwvf37lfN34ICbm5ubm9vZs7GxsbGxsfn5ovM+L/V1kT83f27+3Pr1bZbYLLFZ4u5OJ+kknQwMpP20n/a3aMGz7Z4RAQF99ZVyRTJunPKkLBf2r9Fu0W7RbklJwck4GSd7eIg+bOW4nZ2V475xQ1QMHsIqZMoWra+8kt8zv2d+z9hY5dnWrUXnshjhEA7h2dlwAS7Aha1boTW0htYbN5pjzDHmmPj4ow5HHY46PL3rq9IDSPRBvLiCNumBEAiBaWnKs+rXtWuhLJSFsn/oknwOz+G5Fi0wHuMxvkUL6A29oXeHDkpBrVJF9PEIh4CAo0frknRJuqS6dW1r2NawrdGnz4teYVoLZYtjSVI2cBOXgwtIIVH/4M3VzdXN1bdsUXo7iL/UFev+faX99O7d0AJaQIvY2JwbOTdybmzYkDYlbUralOxsmAJTYIronJYnJSElISXh8mXl0cqV0AAaQIOVK9VZe+nn08+nn/f1LWhZQ0BAvXuX2sISBmEQ1qVLHuVRHu3Z4z7HfY77nI4dlS1+r1172R+P+ZiP+Tzk/CQuIC9JWejXoIHyyXrnTmgGzaCZq6voXMVN3fEOHdERHRcsKN+8fPPyzdet24f7cB8+eADTYBpME53S+j0+dHfggPpVmZUzblyF7yt8X+H7Nm0gEiIhMjQUVsJKWPnOO6XmnhsCAjZtalvHto5tnQMHlL/PNm2UK9fz50XHKyz2SfZJ9knip/GW/BdUEfFM8EzwTKhXT1otrZZW79tXavbReLT3tjLdctMmnIpTceqSJYb2hvaG9jt3io7HHlfwOh0qDZWGDh2q3IT+8MPS0gKHIimSIn//HbpBN+jWurXpmuma6dqxY8/7c3QjdSN1I48ehXiIh3h3d9HHJblJbpJbjRqit7blAvKcvDt4d/DuULeueb15vXn9vn3oh37oV6uW6FxFpWC6axZmYdaCBTZbbbbabP3qq8O9D/c+3Pv330XnY89H2RDKySn/Qv6F/AsffYRDcAgOGTWqpA99USIlUuLNm+iDPujTurVyRWJ65rsHllZAZHvZXrZ3dX18qLP48RDWM1IX/pkTzAnmhF27SmrhoGRKpmSzGebDfJi/Zk2+lC/lS599drTi0YpHK/76q+h87OUk10yumVzz5k3l0YwZDdc1XNdw3fz5DjkOOQ454eFUn+pT/YkTcSgOxaGOjqLzFhalcDg5KY9271b+ntu2NZQ1lDWUVffL+RvxEA/xljMEKLvL7rI7IiRAAvxz+iIjfAzN0qn7bdBb9Ba9tWdPiWsxogMd6IigA3SADuvWaS5rLmsuN2pkGm4abhoeEqLMM+fCUVKldU/rntY9O9v4gfED4wezZtEYGkNjGjSAYAiG4KVLCz5QlCgVKtBaWktrt29X7pE0b/6P/0kgBEIgkejkKvvR9qPtR4svaMIDWCp1Ixw7WztbO9uEBOUSv0ED0bkKjT/4g/+5c8rK6o8+Ui7p9+wRHYtZFrXtunRdui5dX7oUp+N0nO7nJzpXYVGHaKVvpW+lb7t2NXxk+Mjw0bZtT/47pdCo904aNxadW5l1V7u2Mi38wgVRMfgK5AnqSmPb8bbjbcevW1dSCof6SZKaUTNqNnu27VjbsbZj3d25cLC/cyTwSOCRwLQ0U1dTV1PXgAByJmdyHjlS+e79+6LzvSz0Rm/0dnAgIxnJuHGjsrPne++p31c6SAQEwAgYASMsYEfCR+Tecm+5N1+BWBztae1p7emoKOyNvbH30KGi8xQOkwnLYTksN3CgId4Qb4hXN6Ri7MUon8hffVV5tHSp8vUZhoIsXMGQ3VbYCluPH7eYledPUFqZ1K0reoiZC8gjavtotQuo6DwvTL2nYQADGL7+uryxvLG8MSJCWY9R0saymWVA1LvoXfQuI0bIF+WL8sXZs5UmlZazb0VJo3HRuGhc3NySNidtTtr8yy+icpT6ISx9qj5VnxoUpBSOBQtE53lRdJgO0+HMTPkr+Sv5q27dlLHRMWO4cLCiR2S4bLhsuBwZSV/T1/R1y5Z0iA7RIXHrE1jxKLUFRNlfoE4dpVvr+vXKs+L767+Y1FTNVc1VzVUvrxTHFMcUxw0bRCdipVPKmJQxKWPi45V7bTodTaAJNOEZpsmy55IXlBeUF1T4TSOfV6krIGovIRu9jd5G/8MPVruAahksg2U//qg88PFR5vefOSM6FmMA/+vl9SD/Qf6D/ObN6Uf6kX785hvRuUoKzWDNYM1g8QWk1I1Rnrc/b3/e/pNPlGaHb70lOs9z2wSbYFN0tLGmsaax5rBhypPiX0iM/RVlnUlurvIoLEz3ve573fe//gpREAVRM2eKzmet8lvlt8pvJX47g1JzBaIP1AfqAz09ldlIkyeLzvO8aAWtoBWzZimFY8gQ5VkuHMy6FCxYnEbTaFp4OIRCKITy6/h52bjauNq4ij9vJb6AKF1K7e3pHt2je99/by07wdEiWkSL8vPhM/gMPgsLM7mb3E3uERGiczFWGExtTG1MbRYuhMWwGBb37as8m5cnOpe1eOj90PuhNxeQIlehZ4WeFXqql8oWsIL0n6ifyE7BKTj1wQfGTsZOxk48dsxKJmUh6+rVFEIhFNKjR8EHJ/a3bNfYrrFdwwWkyHh+6fml55eBgbARNsJG9V6B5aOVtJJWDhtmCjGFmEJWrRKdh7HioPRe+/lnyIRMyBw9WnQeS2e7yXaT7SYuIIVOnWUl1ZfqS/WjopRLZPEbr/wT8iRP8pwyxRRvijfFR0eLzsOYCKZWplamVvPm0WbaTJvV6fXsSXmd8jrldRJ/pWbxb6zPKz09PT09/aOPYCpMhalNmojO848ezaoyLTMtMy37/HPRcRizBPI5+Zx8bvBg8AEf8Ll+XXQeS1PmtzK/lfmNr0AKjU+GT4ZPRuXKysYxX3whOs8/WgSLYNGGDY9Px2WMAahNHK9fV3b6DA8XncfSZEVkRWRFcAEpNHmYh3k4derjG8dYHppBM2jGmTOaSppKmkr9+yvPin8hMGaJlJY8sbE8pPW4SmMqjak0hoewXpq+j76Pvs+bb5ILuZBLaKjoPE8VDuEQnp0tl5HLyGXeey+pflL9pPqZmaJjMWYNzKvMq8yrwsOVfTBu3BCdR7RsXbYuWye+gFj9SnQ6SSfp5FdfWXr3TzKTmcwffqjuryA6D2N/5BXsFewVXL268qh6dfm8fF4+b2+PU3EqTnV0pMk0mSaXL6+8gf9Fz7gFsAAW2NjQEBpCQ/6wFe7H8DF8fOcOfoPf4DfPsKMfAgLev4+f4+f4+cOHT36belJP6rluHfwIP8KPgweLPm/F7lG3beMS4xLjEvHrZqy2nbtOq9PqtE2bKi+4xETReZ6G3qF36J3ISNN003TT9FGjROdhpZPSPLRiRRudjc5GFxKi/N107qxcGXt5QTREQ3T58qJzsn+gBz3oc3ONi42LjYvt7UXHsdohLNpKW2nr+PGiczzVRJgIE9PSMqtnVs+sbsE5WYmm3abdpt02eLDmoOag5uD580rhmDdP+W7z5lw4rExTaApN1d5i4lnskM/TFNzz+Iw+o886dhSd508erSSXt8vb5e0DB55bfG7xucV/vhRnrCjpZutm62ZHR8MkmASTSuFQT0mlAQ1oxA9dqazuCoReo9fotYgIMIIRjOL3BP6TztAZOkdFpSxOWZyy+NAh0XFY6aIM7Q4bVmrvEZRwVJfqUl3LuQKxmgKi36Lfot/i5kaTaBJN6tFDdJ4/GQtjYeyvv+bszdmbs/fTT0XHYaWLUjgqVFCGOHhBaollYUNYVlNA5GPyMfnYuHEWO9tqNsyG2aGhyv4H2dmi47DShcpTeSrfpw8kQRIkVawoOg8rIjLIIPMQ1jPzPut91vvsK6/gT/gT/qS2fbY0O3YoC5527BCdhJVO2AybYbOWLUXnYEWMgIC4gDwzcw9zD3OPnj2VR2XLis5T4LGNcHiWFRNMBzrQubmJjsGKFgZgAAbwENYzwxbYAluoLT8syFW4ClfXrFH2MzCZRMdhpRu1ptbU+g8L+FgJxlcg/8gj3iPeI75hQ9gDe2CPj4/oPAXCIAzCHj7UJGuSNcl8s5xZBpyEk3DS7duic7Ai1hyaQ3O+AvlHmhRNiibFAq88FsEiWLR8edLmpM1Jm3/5RXQcxgAAoA/0gT7nzomOwYrYHtgDe65eFR1DZXEFRJmOaGurbLBkQTfNH93zkDZJm6RNc+eKjsPYH+FwHI7DeRJHiXcQDsJBy+mlZ3EFRF4vr5fXv/sujsSROLJaNdF5CiyGxbB427bkmsk1k2ueOSM6DmN/ZH/C/oT9idhYZT+cmzdF52FFQ+or9ZX6xsaKzlGQR3SAPwXqJnWTullgi5JdsAt2qT2EGLMsB28evHnwZlYWtISW0HLyZNF5WFHYuDE5Njk2OfbIEdFJVBZWQBBhNIyG0W3aiE6iomk0jaadOGGsaKxorLhzp+g8jP0dU7wp3hQfHU0hFEIhP/wgOg97Sf7gD/7nzklukpvkFhYmOs6TLKaA6AP1gfpADw/4Gr6Gr11dRedRKbNboqOVR8+wnwFjFsA03DTcNLxfP+XRzJm0iBbRIvEbELFn1BJaQsv9+8255lxzbrNmypWH5dw8V1lMAVFaMLRtKzrG4/LylJWfljPmyNizk2VlndL48VKUFCVFeXjQJtpEm9asocN0mA7zjpjCPdogSpmeq+5r9P77xtnG2cbZzZod/eboN0e/uXRJdMynsZhuttqftD9pfzp4EKfjdJzu5yc6D0RCJETGxRkDjYHGQMsZUmOsMDRc13Bdw3V2duViy8WWi23Y0DzLPMs8q1YtTT9NP00/Z2c5W86Ws//ccw5H42gcXb48mMEM5r/YmTAKoiCqXDlaQStohZ3d8+bCnbgTd5Ypo3S1dnB40eOjZbSMlt27Bz2hJ/QshHUTs2E2zM7MxLfxbXz7+a/kcASOwBFEspPsJDtdvy6Nk8ZJ465exbbYFtsmJSmTc6xv8oPwAuKT4ZPhk1G5cu6V3Cu5V65dwzAMwzCNRnQumANzYM4HHxhbGFsYW8TEiI7DGGOWRnhXW/N483jz+Nat8SSexJPiCwdFUzRFP3hg42TjZOO0caPoPIwxZqmE3wMhLWlJazmtSjAcwzE8Li6pflL9pPo8RswYY08jvIDAG/AGvOHtLTqGSpm2+3//JzoHY4xZOmEFJIiCKIhsbJQuoh4eok+Eit6it+itPXtE52CMMUsn7B7I/e73u9/v/uabmI7pmP7isy0KzQgYASOuXUtxTHFMcTx1SnQcxhizdMKuQPL75PfJ7+PlJfoEqCiLsihr9+5Hj3jBIGOM/QNx90BOwAk4odOJPgEFJ2KptFRaunev6ByMMWYthBUQvIk38aZeL/oEqEgiiaTkZNE5GGPMWggrIDSLZtGs+vVFn4DH9zbnex+MMfasir2AqCvPsSk2xaavvCL6BMBxOA7H09OVnkH374uOwxhj1qLYC4j5ffP75vdr1xZ94AUOwkE4ePy46BiMMWZtir2AyF3lrnLXOnVEH7iKfMmXfE+cEJ2DMcasTfHfA2kEjaDRv/4l+sALTsCv0q/Sr6dPi87BGGPWptgLCLqjO7pb0BXISlpJKy1voxbGGLN0xX8F0gbaQBvLKSDSIGmQNOj6ddE5GGPM2hR/ASEgoBo1RB+4StnA6sYN0TkYY8zaFHsBoZk0k2ZWqiT6wFXZKdkp2SnXronOwRhj1qb4r0DKQBkoU6GC6ANX3L2b1j2te1r3QtjykjHGSpniLyB2YAd2llJAeOEgY4y9qOKfhbUcl+Nye3vRBw6+4Au+3HWXMcZeVLEVkODg4ODgYI0GjGAEI6LoA+cCwhhjL6fYCkhKQEpASoCNsA2sGGOMFa5iKyB21e2q21XnT/yMMVZSFFsBUWY75eWBDnSgs4BCcggOwSELGEpjjDErVcw30YnAG7zBW/y0WepDfahP5cqiczDGmLUq/mm8RjCCMSdH9IFjOIZjeJky/k7+Tv5Ojo6i8zDGmLUp/gISBEEQdOeO6ANXPajzoM6DOlWris7BGGPWpvgLyByYA3Nu3RJ94CpyJmdydnYWnYMxxqxN8ffC2k7bafvNm6IPvOAE+Ev+kj9fgTDG2PMq/pXoC3EhLrSc5oWyXtbL+po1RedgjDFrU/xDWJWhMlS+cEH0gauwMTbGxg0bis7BGGPWpvgLyApYASsyMkQfuIrKUlkq26iR6ByMMWZtir+AAACABV2BfIqf4qdcQBhj7HkVewGR58vz5fmnT4s+8AKJkAiJzs4e8R7xHvE8G4sxxp5VsReQepH1IutF/vILRVM0RT94IPoEFJyIddI6aV3jxqJzMMaYtdAU9y9MS0tLS0sjcnF0cXRx7N4dfoPf4Ldq1USfCGm7tF3afvbsZfNl82Xz/v2i8zDGmKUTdA8EAKpAFahiMok+ASoaQSNoRIsWonMwxpi1EFZA6Cf6iX46dEj0CSjI05k6U2c/P58MnwyfDAcH0XkYY8zSCdvgCQEBwXIKiNpcMdc31zfX19dXeXb3btG5GGPMUgm7AjGajCaj6cQJ5dHdu6JPRIEBMAAGNG8uOgZjjFk6cfdAAABAlpWvhw+LPhEFMiADMt55R3QMxhizdIILCAAYwAAGCxrKmopTcaqXl8cwj2Eew+rXF52HMcYslfgCchfuwt2DB0XHeJLGXeOuce/RQ3QOxhizVMILyN2YuzF3Y+Lj6TAdpsOZmaLzFFgIC2Hh+++LjsEYY5aq2BcSPunWtlvbbm3Lz3eRXCQXydMTzsAZOGMBvakQELBKlZpv1Xyr5lubNl1Ou5x2Oe3qVdGxGGPMUgi/AinQGlpD640bRcd4krxUXiov7d1bdA7GGLM0llNAhsAQGLJ1K+hBD/rcXNFxVHScjtPxDz90n+M+x31OuXKi8zDGmKUQPoSlunLlypUrVx4+dIl0iXSJ9PeH7bAdtterJzoXxmEcxjk4SD2lnlLPS5eurLqy6sqq5GTRuRhjRcfrotdFr4uvvVa9SvUq1av4+ro2c23m2qxBg2oPqz2s9tDRMcAnwCfA5/ff1d5+ovOKImwl+tPgcByOwzduJIkkkt59V3SeglzZmI3ZI0Yoj775RvmqrmNhjFmj4ODg4OBgjSb9fPr59PP9+9NMmkkzx46VO8md5E6vvaZ0zAAgICAAkEACCQDS09PT09Pv3tVO107XTl+7Vr4qX5WvfvXVkagjUUeizp4VfVzFBUUHeJIyVFS1qu0523O25zIylHUidnaic6kohEIopEsX03DTcNPwn38WnYcx9vx0Wp1Wp61ShSIogiLWr8dZOAtnBQW93E/Ny4NBMAgGzZgBS2AJLJk2Tem4kZcn+niLisUVEJUuRZeiS1m7FgbCQBhoOesxaBftol0HD5oqmiqaKr71lug8jLFnpwxNOTnJHeWOcscDB5TZlg0aFPovagNtoM2WLXer3q16t2q3bueGnRt2btjDh6KPv7BZzk30J3mAB3ioQ0WWA1tiS2zp76+7qLuou9i2reg8jLF/pg5VyWlympy2YUORFQ7VNtgG29q3f6XtK21faTt3rujjLyoWW0CMaEQj7tsHARAAASdPis7zJEqlVEqdPVt9YYrOwxh7uvT26e3T248ZA+NhPIwPDCyu34uzcTbODg319PP08/TT60Wfh8Jm8W98NSrWqFijoq0t3sf7eN+Cbqrvxt24u2rVW7du3bp169IlZRaZ0Sg6F2Psf7wWeC3wWtCokTIpZ80a5Z6qTfFNHroCV+AKIprRjGZJUt4nNm8WfV4Ki8VegajyLuVdyrv0/feUREmUlJMjOs+fzIW5MHfqVH8nfyd/J0dH0XEYYwBBFERBZGMj15HryHW++w4WwSJYZG8vNlXJu2dq8QUkNTU1NTX19m2IhEiIXLNGdJ4n4UgciSOrVXtw6cGlB5ciIkTnYYwBZK/OXp29etgwmAyTYbL4oSNKpmRKrl1bdI7CZvEFRCVfkC/IF2bOVP5HmM2i8/yJP/iD/9ix+kB9oD7Q01N0HMZKoybUhJpQnTqwH/bD/qlTRecpkAzJkIwWO+v1RVlNAVEX6OAMnIEzVq4Uneev2dqSjnSk++67husarmu4znLWrzBW8iHa7LfZb7N/0SLlDdtyWg/halyNqy9eFJ2jsFlNASmwATbAhmnTlAcWuEAnHuIh3t29TL0y9crU+/RT0XEYKw309fX19fXDw2EkjISRljPZpkAf6AN9jh0THaOwWV0BMRqNRqPx/HnqRb2o1w8/iM7zVB7gAR4REV51vep61fXyEh2HsZJI30ffR9/nzTflU/Ip+dTs2aLzPA2GYiiG7tghOkdhs7oCorLZZ7PPZp/lXomgF3qhl41N/on8E/knfvjB+6z3We+zr7wiOhdjJYHaHZvSKI3SYmPRG73R28FBdK4/CYMwCHv40DzPPM88b8MG0XEKm9UWkKTNSZuTNv/yC8RCLMSuWCE6z9NgAAZgwOuvmx3NjmbHmJhHz5a4m2mMFSebXja9bHotXVrkK8pfEt2je3Rv3bojgUcCjwRevy46T2Gz2gKiyvsp76e8nz79FIbBMBh2+7boPE+D7bAdtuvUSZukTdIm8b0Rxl6EvpK+kr7SuHHYCTthp169ROd5GlpEi2hRfj4NoAE0YMYM0XmKSon5JKzT6XQ6XViY8mjhQtF5nioUQiFUlukG3aAbnTqZJpgmmCZs2SI6FmOWTDtBO0E74Z13oDN0hs7//S+GYRiGWXALIQICWrZM6cY7aJDoOEWlxBQQhSRpN2k3aTclJuJUnIpTLf3m9d27+Aa+gW+89ZZhpWGlYeXx46ITMWZJ1FYksqPsKDvu3w9REAVRlSqJzvU0lEiJlHjzJjbFpti0QQOlgNy4ITpXUbH6IazHyTJ8Dp/D52Fh6iWk6ER/r0IFeofeoXd27dJ/of9C/8Xrr4tOxJglaPJxk4+bfOzqKq+QV8grtm619MJRYCtsha3jx5f0wqGy3EvAF3TlkRquNVxruDo74xk8g2e8vUXneqpESITEcuWoP/Wn/u3aVS1btWzVsuvX/2743fC7IStLdDzGipNPhk+GT0blyuAADuCwZ4+yolz81tb/hCbQBJqQkGB6z/Se6b2hQx89W+K3ui1xBUTlkumS6ZKZkAB+4Ad+ISFwES7CRcttdog7cSfurFRJ6i/1l/q/+67LWZezLmfXrVPK4f37ovMxVpSUHQIrVJCvydfka9u2QQzEQIzltwRSm7xiCIZgSLt2yt9ryZtt9TQlbAjrf5RLyLt35SA5SA4KCVFvXovO9Y/+Df+GfzdsqExP3L7dI94j3iPe2Vl0LMaKglo4oAW0gBZxcbAH9sAeHx/RuZ7ZQTgIBz/7TFngfOqU6DjFrcQWEFVKcEpwSvCuXeRDPuQzZ47oPM9Hq5UeSA+kBwcOeHfw7uDdoW5d0YkYKwwFhQMAALZvt7bCoW5t/er8V+e/Oj8yUnQeUUrYLKynU/cHyI7LjsuOi4+HSTAJJvn6is71rOgQHaJDV69KraRWUqu2bQ3xhnhDfEqK6FyMPQ9lun2NGsojdfq6Vis61zPzBm/wvnPHvNC80LzQ0/MoHsWj+OuvomOJUuKvQFT7cB/uQ7MZ8zEf8/v0ocN0mA5nZorO9azQF33Rt3p16kf9qF98vO6O7o7uzttvi87F2LPwzPLM8sx64w3lnuShQ8qzVlQ4HsEszMKssLDSXjhUJfYm+tNcXn159eXVt2/XqFejXo16GRl4GA/j4S5dROd6ZsmQDMl2dpAGaZDWo0eNcjXK1Sh3+/aV3678duW35GTR8Rj7Ix3pSEfNmuFaXItrd+yA9bAe1levLjrXi1m0yLjduN24fdYs0UksRakZwnoa5ZJaXbmurmS3VqtX53yS80nOJ6Ghad3Tuqd1z84WnYiVTrpVulW6VaNGKV2zZ81Sm4uKzvW81Om5D/If5D/Ib95c+bvKzRWdy1KUmiGspylvKG8obxg2DN6Bd+Cd7dtF53k5vXs72DjYONgcPlwwZMBYMVA2UCtfXpeiS9GlrF0LX8PX8PVXX1lr4QBf8AXfy5dxOk7H6d26ceH4a6W+gKj3RjT9Nf01/bt3p320j/ZZcUuRR9OApVgpVopNStJqtVqt9qOPlG9yF2BWuLTvat/Vvuvj44AO6IAmEwyEgTCwRw/RuV6Uuq4DEiABErp0UabnXrkiOpel4jeUJ6gtFGwCbAJsAg4fVj5JubqKzlU4DhzAztgZOw8caPjU8Knh09OnRSdi1qVgNmNMdkx2zOjRSouRL75QvmtrKzrfC3u0TkzuJfeSewUHpzimOKY4lrz9OwobF5CnUHcSlCvLleXKe/cqz5YtKzrXyyr4hPVoAZQ6jz02NjY2NtbSe4cxUTxDPUM9Q319sQN2wA4LF+JknIyTPTxE5yoseAWv4JVRowyXDZcNl0vvuo7nxQXkH+hO6U7pTnXqBO/D+/B+bKzyrBV/0noC7aW9tDclheIojuLGjlUXXorOxcTyuuh10euik1N+bn5ufu6sWTgTZ+LMAQPACEYwlqCh0P7QH/rPmGEcYhxiHDJhgug41qbkvBCKmH6Yfph+WNeudJAO0sE1a5RnS04hedyOHVgOy2G5iAhesFg6KLMRy5ZVNmYbOpRepVfp1XHjcDgOx+GVK4vOV9ioA3WgDgsWmKaYppimqM0P2fPiAvKclNlNXbpIzaRmUrO1a5VnS2AhUXuHLYbFsHjtWnm+PF+eP3lyil+KX4rfuXOi47GXUy+qXlS9KHv7ivMrzq84f9Ag+YR8Qj4xcaK6YFV0vqJCsRRLsd9+a3IzuZnc1I2eSn7X3KJS6mdhPa/Hb6699x6EQRiEPXwoOlehWwyLYbH06PXRu7d0XDouHT99Wrtau1q7+v/+zzPdM90zvUMH5fslaEijhFJ7T2l3andqdw4fXsGpglMFp/Pn6RV6hV6ZP7+kFw6IhViIXbJEKRzqrEQuHC+L//BfknLp37kz6EEP+h9/BAMYwGBnJzpXcaHP6XP6/MgRuA/34f68eZlXM69mXl2z5tywc8PODSuBhdVKKAWjaVNl5feAARAMwRDcp4/yXeufDPLMtsE22DZ3rrGqsaqx6qhRypNcOAoLF5BCohSSdu0gHMIhfO1aiIZoiC5fXnSuYjcMhsGw27fpOl2n6z//jANxIA5cu9ZtkNsgt0G7d/Nsr8Klv6+/r79fq5ZskA2yoUcPvIE38Eb//gXbApQ2j4ZeqQE1oAaffGIKNAWaAr/8UnSskooLSCHzCvYK9gr28MgfnD84f/DmzTgGx+CYmjVF5xKNIimSIn//Hd3QDd3WrwdXcAXX9etzYnNic2ITEnil79/TVtVW1VZ1d1dWRnfsCCfhJJzs3BmyIAuytNoSNzvqhdy/L++V98p7+/bldRzFo5S/4IqOp5+nn6efi4s0QZogTdi0CSbDZJis14vOZZnu36fRNJpGJyRIA6QB0oC9e+EW3IJbe/aUcyjnUM4hKUntGCA6aWFTF+Zl2mXaZdo1aiStllZLqwMDyZ/8yT8wEHfhLtwVGAhzYS7MrVpVdF5Lo25zoHld87rm9Y4dk39J/iX5F24qWly4gBQxdXokhVIohcbE4GJcjIu7dhWdy2p4gRd43btHs2gWzTpxQlnwdeKE0uTu5EnpXeld6d3jx/MG5Q3KG3TypNJm+7fflP+4+Me63ee4z3GfU66c3VG7o3ZH69bNn5o/NX9q3bo4GAfj4FdfhVbQClo1boxrcA2u8fBQJmE0agSLYBEssrcXfbqtS2oqEBBQ+/bKDqQXLohOVNpwASlWiLoFugW6Bf/+NxyDY3AsIoKHHgoXJVMyJZvNYAYzmG/cgFzIhdz/fcUojMKoa9cgBEIg5M6dZ/65QECg0WAwBmOwkxO0hJbQ0slJ+blVqkAe5EFelSqQCImQyFsQF5l20A7a/fyzpq+mr6Zvv35J9ZPqJ9W3nn19Shp+4xKkYEOoltASWn7/vfKsulMbYwwAgKIpmqIfPIBsyIbsiAhTK1MrU6t580TnYgouIIJ5xHvEe8Q7O2t2aHZodixfrkw7bN9edC7GRKJpNI2mnTiBE3EiTuzVSxmiSk0VnYs9jguIRUFU2q8PGoSIiKg2dStF8/ZZ6aQDHeiIIAIiIGLpUltbW1tb2xEjEmsl1kqslZMjOh77a1xALJQ6bRPSIR3SV63CIAzCoDffFJ2LsULlB37g99tvShv1jz9WWuXExYmOxZ4NtzKxUKZrpmuma8eOYSAGYqBWq8xCGjGCDtNhOsw3DZk1y8tTvkZF5QTkBOQEvPkmFw7rxFcgVkZdX4I9sAf2mDkTT+AJPNGnD8/mYpZvz578yPzI/MghQ44EHgk8EpiWJjoRezn8hmPl9Kn6VH1qUBD1o37Ub/585dnGjUXnYqXcoz3FoQt0gS7jxxtbGFsYW8TEiI7FChcPYVk5Q2NDY0PjffuUhQo6nTrUBT7gAz7Xr4vOx0oHdUU4jIJRMGr0aDgEh+BQ/fpcOEo2vgIpodQV0TaeNp42ngMHKiu4J0zglhisUIyAETDi2jWQQQb566+VvdHnzzcajUaj8f590fFY8eACUkp4n/U+6332lVfMn5g/MX8SGoou6IIuI0YonxRdXETnYxZuFIyCUZcugR3Ygd2sWeW7le9WvtvSpUqPsgcPRMdjYvAQVimhtnwwbTBtMG2YMycnMCcwJ7BuXWXr2g8/LNjXgzEAUDok7N+PNbAG1ggJuXvz7s27N1991RhsDDYGz5/PhYMB8BUIe4JnqGeoZ6ivLzbEhtgwLAyaQlNoGhyM4RiO4WXKiM7HChfNo3k079YtfA1fw9diYmQH2UF2WLJEaYd+8qTofMyycQFhf6sJNaEmVLGiTZxNnE1c166URVmU1bcv3sE7eCcg4PGtb5lly8tT2ubv26c0m/zuO8e+jn0d+/70E19RsBfBBYS9EHUnPPov/Zf+27mzsg6lc2eaTtNpemAgeqEXetnYiM5ZOt29C8tgGSyLi4McyIGcTZtyQ3NDc0Pj4lJTU1NTU2/fFp2QlQxcQFih8snwyfDJqFw51y3XLdft7bexMTbGxq1awTgYB+NatYI5MAfm1KkjOqfVerRlK1SBKlDl1Ck6Rsfo2O7dOAJH4Ij//CdnR86OnB379vEOj6w4cAFhxUq/Rb9Fv8XNTR4gD5AH+PmhCU1o8vGBTtAJOvn6Kv9KXQhpays6b7FT95RHQsLERGgADaBBYiJshI2w8fBhjMM4jEtMVLrT3r0rOi4r3biAMIui0+q0Oq2tLV2ki3TxjTfgS/gSvmzcGDMxEzMbNYIgCIKgWrXgB/gBfqhdW5k95uqKq3AVrnJ1tZid/fSgB31urrID4W+/QTWoBtXOnwc3cAO38+dhH+yDfenpShfa8+el8lJ5qfzJk8k1k2sm1zx7Vvkhxb+jImPPgwsIK1G8gr2CvYKrVzdfMl8yX6pZU1ouLZeWu7pCb+gNve3sKIIiKKJcOZgJM2GmnZ2UJWVJWXZ2NIkm0aRy5ZQFcYjkS77kW768ci8nK0uZrXT7Ni7ABbggKwuGwlAYmpmpdJHNytL8R/MfzX+ysiAO4iDuxo26H9T9oO4Hly/HxsbGxsbm54s+L4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYKzb/D4DEm9oGCaFQAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTEyLTE1VDE1OjU3OjI3KzA4OjAwohG+LwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0xMi0xNVQxNTo1NzoyNyswODowMNNMBpMAAABPdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2NrMWJ6YTB6ajlqamRjeHIvcmVmcmVzaC5zdmejF0ikAAAAAElFTkSuQmCC');
+  background-size: contain;
+  content: ' ';
+  inset: 0;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/Verifition/src/Verify/VerifyPoints.vue b/marketing-ui/admin-ui/src/components/Verifition/src/Verify/VerifyPoints.vue
new file mode 100644
index 0000000..9d04f29
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Verifition/src/Verify/VerifyPoints.vue
@@ -0,0 +1,250 @@
+<template>
+  <div style="position: relative">
+    <div class="verify-img-out">
+      <div
+        :style="{
+          width: setSize.imgWidth,
+          height: setSize.imgHeight,
+          'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
+          'margin-bottom': vSpace + 'px'
+        }"
+        class="verify-img-panel"
+      >
+        <div v-show="showRefresh" class="verify-refresh" style="z-index: 3" @click="refresh">
+          <i class="iconfont icon-refresh"></i>
+        </div>
+        <img
+          ref="canvas"
+          :src="'data:image/png;base64,' + pointBackImgBase"
+          alt=""
+          style="display: block; width: 100%; height: 100%"
+          @click="bindingClick ? canvasClick($event) : undefined"
+        />
+
+        <div
+          v-for="(tempPoint, index) in tempPoints"
+          :key="index"
+          :style="{
+            'background-color': '#1abd6c',
+            color: '#fff',
+            'z-index': 9999,
+            width: '20px',
+            height: '20px',
+            'text-align': 'center',
+            'line-height': '20px',
+            'border-radius': '50%',
+            position: 'absolute',
+            top: parseInt(tempPoint.y - 10) + 'px',
+            left: parseInt(tempPoint.x - 10) + 'px'
+          }"
+          class="point-area"
+        >
+          {{ index + 1 }}
+        </div>
+      </div>
+    </div>
+    <!-- 'height': this.barSize.height, -->
+    <div
+      :style="{
+        width: setSize.imgWidth,
+        color: barAreaColor,
+        'border-color': barAreaBorderColor,
+        'line-height': barSize.height
+      }"
+      class="verify-bar-area"
+    >
+      <span class="verify-msg">{{ text }}</span>
+    </div>
+  </div>
+</template>
+<script setup type="text/babel">
+/**
+ * VerifyPoints
+ * @description 点选
+ * */
+import { resetSize } from './../utils/util'
+import { aesEncrypt } from './../utils/ase'
+import { getCode, reqCheck } from '@/api/login'
+import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue'
+
+const props = defineProps({
+  //弹出式pop，固定fixed
+  mode: {
+    type: String,
+    default: 'fixed'
+  },
+  captchaType: {
+    type: String
+  },
+  //间隔
+  vSpace: {
+    type: Number,
+    default: 5
+  },
+  imgSize: {
+    type: Object,
+    default() {
+      return {
+        width: '310px',
+        height: '155px'
+      }
+    }
+  },
+  barSize: {
+    type: Object,
+    default() {
+      return {
+        width: '310px',
+        height: '40px'
+      }
+    }
+  }
+})
+
+const { t } = useI18n()
+const { mode, captchaType } = toRefs(props)
+const { proxy } = getCurrentInstance()
+let secretKey = ref(''), //后端返回的ase加密秘钥
+  checkNum = ref(3), //默认需要点击的字数
+  fontPos = reactive([]), //选中的坐标信息
+  checkPosArr = reactive([]), //用户点击的坐标
+  num = ref(1), //点击的记数
+  pointBackImgBase = ref(''), //后端获取到的背景图片
+  poinTextList = reactive([]), //后端返回的点击字体顺序
+  backToken = ref(''), //后端返回的token值
+  setSize = reactive({
+    imgHeight: 0,
+    imgWidth: 0,
+    barHeight: 0,
+    barWidth: 0
+  }),
+  tempPoints = reactive([]),
+  text = ref(''),
+  barAreaColor = ref(undefined),
+  barAreaBorderColor = ref(undefined),
+  showRefresh = ref(true),
+  bindingClick = ref(true)
+
+const init = () => {
+  //加载页面
+  fontPos.splice(0, fontPos.length)
+  checkPosArr.splice(0, checkPosArr.length)
+  num.value = 1
+  getPictrue()
+  nextTick(() => {
+    let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
+    setSize.imgHeight = imgHeight
+    setSize.imgWidth = imgWidth
+    setSize.barHeight = barHeight
+    setSize.barWidth = barWidth
+    proxy.$parent.$emit('ready', proxy)
+  })
+}
+onMounted(() => {
+  // 禁止拖拽
+  init()
+  proxy.$el.onselectstart = function () {
+    return false
+  }
+})
+const canvas = ref(null)
+const canvasClick = (e) => {
+  checkPosArr.push(getMousePos(canvas, e))
+  if (num.value == checkNum.value) {
+    num.value = createPoint(getMousePos(canvas, e))
+    //按比例转换坐标值
+    let arr = pointTransfrom(checkPosArr, setSize)
+    checkPosArr.length = 0
+    checkPosArr.push(...arr)
+    //等创建坐标执行完
+    setTimeout(() => {
+      // var flag = this.comparePos(this.fontPos, this.checkPosArr);
+      //发送后端请求
+      var captchaVerification = secretKey.value
+        ? aesEncrypt(backToken.value + '---' + JSON.stringify(checkPosArr), secretKey.value)
+        : backToken.value + '---' + JSON.stringify(checkPosArr)
+      let data = {
+        captchaType: captchaType.value,
+        pointJson: secretKey.value
+          ? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)
+          : JSON.stringify(checkPosArr),
+        token: backToken.value
+      }
+      reqCheck(data).then((res) => {
+        if (res.repCode == '0000') {
+          barAreaColor.value = '#4cae4c'
+          barAreaBorderColor.value = '#5cb85c'
+          text.value = t('captcha.success')
+          bindingClick.value = false
+          if (mode.value == 'pop') {
+            setTimeout(() => {
+              proxy.$parent.clickShow = false
+              refresh()
+            }, 1500)
+          }
+          proxy.$parent.$emit('success', { captchaVerification })
+        } else {
+          proxy.$parent.$emit('error', proxy)
+          barAreaColor.value = '#d9534f'
+          barAreaBorderColor.value = '#d9534f'
+          text.value = t('captcha.fail')
+          setTimeout(() => {
+            refresh()
+          }, 700)
+        }
+      })
+    }, 400)
+  }
+  if (num.value < checkNum.value) {
+    num.value = createPoint(getMousePos(canvas, e))
+  }
+}
+//获取坐标
+const getMousePos = function (obj, e) {
+  var x = e.offsetX
+  var y = e.offsetY
+  return { x, y }
+}
+//创建坐标点
+const createPoint = function (pos) {
+  tempPoints.push(Object.assign({}, pos))
+  return num.value + 1
+}
+const refresh = async function () {
+  tempPoints.splice(0, tempPoints.length)
+  barAreaColor.value = '#000'
+  barAreaBorderColor.value = '#ddd'
+  bindingClick.value = true
+  fontPos.splice(0, fontPos.length)
+  checkPosArr.splice(0, checkPosArr.length)
+  num.value = 1
+  await getPictrue()
+  showRefresh.value = true
+}
+
+// 请求背景图片和验证图片
+const getPictrue = async () => {
+  let data = {
+    captchaType: captchaType.value
+  }
+  const res = await getCode(data)
+  if (res.repCode == '0000') {
+    pointBackImgBase.value = res.repData.originalImageBase64
+    backToken.value = res.repData.token
+    secretKey.value = res.repData.secretKey
+    poinTextList.value = res.repData.wordList
+    text.value = t('captcha.point') + '【' + poinTextList.value.join(',') + '】'
+  } else {
+    text.value = res.repMsg
+  }
+}
+//坐标转换函数
+const pointTransfrom = function (pointArr, imgSize) {
+  var newPointArr = pointArr.map((p) => {
+    let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth))
+    let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight))
+    return { x, y }
+  })
+  return newPointArr
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/components/Verifition/src/Verify/VerifySlide.vue b/marketing-ui/admin-ui/src/components/Verifition/src/Verify/VerifySlide.vue
new file mode 100644
index 0000000..f3c7bfe
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Verifition/src/Verify/VerifySlide.vue
@@ -0,0 +1,376 @@
+<template>
+  <div style="position: relative">
+    <div
+      v-if="type === '2'"
+      :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }"
+      class="verify-img-out"
+    >
+      <div :style="{ width: setSize.imgWidth, height: setSize.imgHeight }" class="verify-img-panel">
+        <img
+          :src="'data:image/png;base64,' + backImgBase"
+          alt=""
+          style="display: block; width: 100%; height: 100%"
+        />
+        <div v-show="showRefresh" class="verify-refresh" @click="refresh">
+          <i class="iconfont icon-refresh"></i>
+        </div>
+        <transition name="tips">
+          <span v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'" class="verify-tips">
+            {{ tipWords }}
+          </span>
+        </transition>
+      </div>
+    </div>
+    <!-- 公共部分 -->
+    <div
+      :style="{ width: setSize.imgWidth, height: barSize.height, 'line-height': barSize.height }"
+      class="verify-bar-area"
+    >
+      <span class="verify-msg" v-text="text"></span>
+      <div
+        :style="{
+          width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,
+          height: barSize.height,
+          'border-color': leftBarBorderColor,
+          transaction: transitionWidth
+        }"
+        class="verify-left-bar"
+      >
+        <span class="verify-msg" v-text="finishText"></span>
+        <div
+          :style="{
+            width: barSize.height,
+            height: barSize.height,
+            'background-color': moveBlockBackgroundColor,
+            left: moveBlockLeft,
+            transition: transitionLeft
+          }"
+          class="verify-move-block"
+          @mousedown="start"
+          @touchstart="start"
+        >
+          <i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }"></i>
+          <div
+            v-if="type === '2'"
+            :style="{
+              width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px',
+              height: setSize.imgHeight,
+              top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
+              'background-size': setSize.imgWidth + ' ' + setSize.imgHeight
+            }"
+            class="verify-sub-block"
+          >
+            <img
+              :src="'data:image/png;base64,' + blockBackImgBase"
+              alt=""
+              style="display: block; width: 100%; height: 100%; -webkit-user-drag: none"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup type="text/babel">
+/**
+ * VerifySlide
+ * @description 滑块
+ * */
+import { aesEncrypt } from './../utils/ase'
+import { resetSize } from './../utils/util'
+import { getCode, reqCheck } from '@/api/login'
+
+const props = defineProps({
+  captchaType: {
+    type: String
+  },
+  type: {
+    type: String,
+    default: '1'
+  },
+  //弹出式pop，固定fixed
+  mode: {
+    type: String,
+    default: 'fixed'
+  },
+  vSpace: {
+    type: Number,
+    default: 5
+  },
+  explain: {
+    type: String,
+    default: ''
+  },
+  imgSize: {
+    type: Object,
+    default() {
+      return {
+        width: '310px',
+        height: '155px'
+      }
+    }
+  },
+  blockSize: {
+    type: Object,
+    default() {
+      return {
+        width: '50px',
+        height: '50px'
+      }
+    }
+  },
+  barSize: {
+    type: Object,
+    default() {
+      return {
+        width: '310px',
+        height: '30px'
+      }
+    }
+  }
+})
+
+const { t } = useI18n()
+const { mode, captchaType, type, blockSize, explain } = toRefs(props)
+const { proxy } = getCurrentInstance()
+let secretKey = ref(''), //后端返回的ase加密秘钥
+  passFlag = ref(''), //是否通过的标识
+  backImgBase = ref(''), //验证码背景图片
+  blockBackImgBase = ref(''), //验证滑块的背景图片
+  backToken = ref(''), //后端返回的唯一token值
+  startMoveTime = ref(''), //移动开始的时间
+  endMovetime = ref(''), //移动结束的时间
+  tipWords = ref(''),
+  text = ref(''),
+  finishText = ref(''),
+  setSize = reactive({
+    imgHeight: 0,
+    imgWidth: 0,
+    barHeight: 0,
+    barWidth: 0
+  }),
+  moveBlockLeft = ref(undefined),
+  leftBarWidth = ref(undefined),
+  // 移动中样式
+  moveBlockBackgroundColor = ref(undefined),
+  leftBarBorderColor = ref('#ddd'),
+  iconColor = ref(undefined),
+  iconClass = ref('icon-right'),
+  status = ref(false), //鼠标状态
+  isEnd = ref(false), //是够验证完成
+  showRefresh = ref(true),
+  transitionLeft = ref(''),
+  transitionWidth = ref(''),
+  startLeft = ref(0)
+
+const barArea = computed(() => {
+  return proxy.$el.querySelector('.verify-bar-area')
+})
+const init = () => {
+  if (explain.value === '') {
+    text.value = t('captcha.slide')
+  } else {
+    text.value = explain.value
+  }
+  getPictrue()
+  nextTick(() => {
+    let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
+    setSize.imgHeight = imgHeight
+    setSize.imgWidth = imgWidth
+    setSize.barHeight = barHeight
+    setSize.barWidth = barWidth
+    proxy.$parent.$emit('ready', proxy)
+  })
+
+  window.removeEventListener('touchmove', function (e) {
+    move(e)
+  })
+  window.removeEventListener('mousemove', function (e) {
+    move(e)
+  })
+
+  //鼠标松开
+  window.removeEventListener('touchend', function () {
+    end()
+  })
+  window.removeEventListener('mouseup', function () {
+    end()
+  })
+
+  window.addEventListener('touchmove', function (e) {
+    move(e)
+  })
+  window.addEventListener('mousemove', function (e) {
+    move(e)
+  })
+
+  //鼠标松开
+  window.addEventListener('touchend', function () {
+    end()
+  })
+  window.addEventListener('mouseup', function () {
+    end()
+  })
+}
+watch(type, () => {
+  init()
+})
+onMounted(() => {
+  // 禁止拖拽
+  init()
+  proxy.$el.onselectstart = function () {
+    return false
+  }
+})
+//鼠标按下
+const start = (e) => {
+  e = e || window.event
+  if (!e.touches) {
+    //兼容PC端
+    var x = e.clientX
+  } else {
+    //兼容移动端
+    var x = e.touches[0].pageX
+  }
+  startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left)
+  startMoveTime.value = +new Date() //开始滑动的时间
+  if (isEnd.value == false) {
+    text.value = ''
+    moveBlockBackgroundColor.value = '#337ab7'
+    leftBarBorderColor.value = '#337AB7'
+    iconColor.value = '#fff'
+    e.stopPropagation()
+    status.value = true
+  }
+}
+//鼠标移动
+const move = (e) => {
+  e = e || window.event
+  if (status.value && isEnd.value == false) {
+    if (!e.touches) {
+      //兼容PC端
+      var x = e.clientX
+    } else {
+      //兼容移动端
+      var x = e.touches[0].pageX
+    }
+    var bar_area_left = barArea.value.getBoundingClientRect().left
+    var move_block_left = x - bar_area_left //小方块相对于父元素的left值
+    if (
+      move_block_left >=
+      barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
+    ) {
+      move_block_left =
+        barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
+    }
+    if (move_block_left <= 0) {
+      move_block_left = parseInt(parseInt(blockSize.value.width) / 2)
+    }
+    //拖动后小方块的left值
+    moveBlockLeft.value = move_block_left - startLeft.value + 'px'
+    leftBarWidth.value = move_block_left - startLeft.value + 'px'
+  }
+}
+
+//鼠标松开
+const end = () => {
+  endMovetime.value = +new Date()
+  //判断是否重合
+  if (status.value && isEnd.value == false) {
+    var moveLeftDistance = parseInt((moveBlockLeft.value || '0').replace('px', ''))
+    moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth)
+    let data = {
+      captchaType: captchaType.value,
+      pointJson: secretKey.value
+        ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), secretKey.value)
+        : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
+      token: backToken.value
+    }
+    reqCheck(data).then((res) => {
+      if (res.repCode == '0000') {
+        moveBlockBackgroundColor.value = '#5cb85c'
+        leftBarBorderColor.value = '#5cb85c'
+        iconColor.value = '#fff'
+        iconClass.value = 'icon-check'
+        showRefresh.value = false
+        isEnd.value = true
+        if (mode.value == 'pop') {
+          setTimeout(() => {
+            proxy.$parent.clickShow = false
+            refresh()
+          }, 1500)
+        }
+        passFlag.value = true
+        tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s
+            ${t('captcha.success')}`
+        var captchaVerification = secretKey.value
+          ? aesEncrypt(
+              backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
+              secretKey.value
+            )
+          : backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 })
+        setTimeout(() => {
+          tipWords.value = ''
+          proxy.$parent.closeBox()
+          proxy.$parent.$emit('success', { captchaVerification })
+        }, 1000)
+      } else {
+        moveBlockBackgroundColor.value = '#d9534f'
+        leftBarBorderColor.value = '#d9534f'
+        iconColor.value = '#fff'
+        iconClass.value = 'icon-close'
+        passFlag.value = false
+        setTimeout(function () {
+          refresh()
+        }, 1000)
+        proxy.$parent.$emit('error', proxy)
+        tipWords.value = t('captcha.fail')
+        setTimeout(() => {
+          tipWords.value = ''
+        }, 1000)
+      }
+    })
+    status.value = false
+  }
+}
+
+const refresh = async () => {
+  showRefresh.value = true
+  finishText.value = ''
+
+  transitionLeft.value = 'left .3s'
+  moveBlockLeft.value = 0
+
+  leftBarWidth.value = undefined
+  transitionWidth.value = 'width .3s'
+
+  leftBarBorderColor.value = '#ddd'
+  moveBlockBackgroundColor.value = '#fff'
+  iconColor.value = '#000'
+  iconClass.value = 'icon-right'
+  isEnd.value = false
+
+  await getPictrue()
+  setTimeout(() => {
+    transitionWidth.value = ''
+    transitionLeft.value = ''
+    text.value = explain.value
+  }, 300)
+}
+
+// 请求背景图片和验证图片
+const getPictrue = async () => {
+  let data = {
+    captchaType: captchaType.value
+  }
+  const res = await getCode(data)
+  if (res.repCode == '0000') {
+    backImgBase.value = res.repData.originalImageBase64
+    blockBackImgBase.value = res.repData.jigsawImageBase64
+    backToken.value = res.repData.token
+    secretKey.value = res.repData.secretKey
+  } else {
+    tipWords.value = res.repMsg
+  }
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/components/Verifition/src/Verify/index.ts b/marketing-ui/admin-ui/src/components/Verifition/src/Verify/index.ts
new file mode 100644
index 0000000..0daa63a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Verifition/src/Verify/index.ts
@@ -0,0 +1,4 @@
+import VerifySlide from './VerifySlide.vue'
+import VerifyPoints from './VerifyPoints.vue'
+
+export { VerifySlide, VerifyPoints }
diff --git a/marketing-ui/admin-ui/src/components/Verifition/src/utils/ase.ts b/marketing-ui/admin-ui/src/components/Verifition/src/utils/ase.ts
new file mode 100644
index 0000000..d2e6b98
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Verifition/src/utils/ase.ts
@@ -0,0 +1,14 @@
+import CryptoJS from 'crypto-js'
+/**
+ * @word 要加密的内容
+ * @keyWord String  服务器随机返回的关键字
+ *  */
+export function aesEncrypt(word, keyWord = 'XwKsGlMcdPMEhR1B') {
+  const key = CryptoJS.enc.Utf8.parse(keyWord)
+  const srcs = CryptoJS.enc.Utf8.parse(word)
+  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  })
+  return encrypted.toString()
+}
diff --git a/marketing-ui/admin-ui/src/components/Verifition/src/utils/util.ts b/marketing-ui/admin-ui/src/components/Verifition/src/utils/util.ts
new file mode 100644
index 0000000..15c1627
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/Verifition/src/utils/util.ts
@@ -0,0 +1,97 @@
+export function resetSize(vm) {
+  let img_width, img_height, bar_width, bar_height //图片的宽度、高度，移动条的宽度、高度
+  const EmployeeWindow = window as any
+  const parentWidth = vm.$el.parentNode.offsetWidth || EmployeeWindow.offsetWidth
+  const parentHeight = vm.$el.parentNode.offsetHeight || EmployeeWindow.offsetHeight
+  if (vm.imgSize.width.indexOf('%') != -1) {
+    img_width = (parseInt(vm.imgSize.width) / 100) * parentWidth + 'px'
+  } else {
+    img_width = vm.imgSize.width
+  }
+
+  if (vm.imgSize.height.indexOf('%') != -1) {
+    img_height = (parseInt(vm.imgSize.height) / 100) * parentHeight + 'px'
+  } else {
+    img_height = vm.imgSize.height
+  }
+
+  if (vm.barSize.width.indexOf('%') != -1) {
+    bar_width = (parseInt(vm.barSize.width) / 100) * parentWidth + 'px'
+  } else {
+    bar_width = vm.barSize.width
+  }
+
+  if (vm.barSize.height.indexOf('%') != -1) {
+    bar_height = (parseInt(vm.barSize.height) / 100) * parentHeight + 'px'
+  } else {
+    bar_height = vm.barSize.height
+  }
+
+  return { imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height }
+}
+
+export const _code_chars = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  'a',
+  'b',
+  'c',
+  'd',
+  'e',
+  'f',
+  'g',
+  'h',
+  'i',
+  'j',
+  'k',
+  'l',
+  'm',
+  'n',
+  'o',
+  'p',
+  'q',
+  'r',
+  's',
+  't',
+  'u',
+  'v',
+  'w',
+  'x',
+  'y',
+  'z',
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z'
+]
+export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
+export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']
diff --git a/marketing-ui/admin-ui/src/components/VerticalButtonGroup/index.vue b/marketing-ui/admin-ui/src/components/VerticalButtonGroup/index.vue
new file mode 100644
index 0000000..9c78ea2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/VerticalButtonGroup/index.vue
@@ -0,0 +1,44 @@
+<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-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-color: var(--el-button-divide-border-color);
+  border-top-right-radius: 0;
+  border-bottom-left-radius: var(--el-border-radius-base);
+  border-top-left-radius: 0;
+}
+
+.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-right: 0;
+  margin-bottom: -1px;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/XButton/index.ts b/marketing-ui/admin-ui/src/components/XButton/index.ts
new file mode 100644
index 0000000..be0f0d4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/XButton/index.ts
@@ -0,0 +1,4 @@
+import XButton from './src/XButton.vue'
+import XTextButton from './src/XTextButton.vue'
+
+export { XButton, XTextButton }
diff --git a/marketing-ui/admin-ui/src/components/XButton/src/XButton.vue b/marketing-ui/admin-ui/src/components/XButton/src/XButton.vue
new file mode 100644
index 0000000..40cba1a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/XButton/src/XButton.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'XButton' })
+
+const props = defineProps({
+  modelValue: propTypes.bool.def(false),
+  loading: propTypes.bool.def(false),
+  preIcon: propTypes.string.def(''),
+  postIcon: propTypes.string.def(''),
+  title: propTypes.string.def(''),
+  type: propTypes.oneOf(['', 'primary', 'success', 'warning', 'danger', 'info']).def(''),
+  link: propTypes.bool.def(false),
+  circle: propTypes.bool.def(false),
+  round: propTypes.bool.def(false),
+  plain: propTypes.bool.def(false),
+  onClick: { type: Function as PropType<(...args) => any>, default: null }
+})
+const getBindValue = computed(() => {
+  const delArr: string[] = ['title', 'preIcon', 'postIcon', 'onClick']
+  const attrs = useAttrs()
+  const obj = { ...attrs, ...props }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+})
+</script>
+
+<template>
+  <el-button v-bind="getBindValue" @click="onClick">
+    <Icon v-if="preIcon" :icon="preIcon" class="mr-1px" />
+    {{ title ? title : '' }}
+    <Icon v-if="postIcon" :icon="postIcon" class="mr-1px" />
+  </el-button>
+</template>
+<style lang="scss" scoped>
+:deep(.el-button.is-text) {
+  padding: 8px 4px;
+  margin-left: 0;
+}
+
+:deep(.el-button.is-link) {
+  padding: 8px 4px;
+  margin-left: 0;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/XButton/src/XTextButton.vue b/marketing-ui/admin-ui/src/components/XButton/src/XTextButton.vue
new file mode 100644
index 0000000..b1a922b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/XButton/src/XTextButton.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { PropType } from 'vue'
+
+defineOptions({ name: 'XTextButton' })
+
+const props = defineProps({
+  modelValue: propTypes.bool.def(false),
+  loading: propTypes.bool.def(false),
+  preIcon: propTypes.string.def(''),
+  postIcon: propTypes.string.def(''),
+  title: propTypes.string.def(''),
+  type: propTypes.oneOf(['', 'primary', 'success', 'warning', 'danger', 'info']).def('primary'),
+  circle: propTypes.bool.def(false),
+  round: propTypes.bool.def(false),
+  plain: propTypes.bool.def(false),
+  onClick: { type: Function as PropType<(...args) => any>, default: null }
+})
+const getBindValue = computed(() => {
+  const delArr: string[] = ['title', 'preIcon', 'postIcon', 'onClick']
+  const attrs = useAttrs()
+  const obj = { ...attrs, ...props }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+})
+</script>
+
+<template>
+  <el-button link v-bind="getBindValue" @click="onClick">
+    <Icon v-if="preIcon" :icon="preIcon" class="mr-1px" />
+    {{ title ? title : '' }}
+    <Icon v-if="postIcon" :icon="postIcon" class="mr-1px" />
+  </el-button>
+</template>
+<style lang="scss" scoped>
+:deep(.el-button.is-text) {
+  padding: 8px 4px;
+  margin-left: 0;
+}
+
+:deep(.el-button.is-link) {
+  padding: 8px 4px;
+  margin-left: 0;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
new file mode 100644
index 0000000..00e887c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -0,0 +1,655 @@
+<template>
+  <div class="my-process-designer">
+    <div class="my-process-designer__header" style="z-index: 999; display: table-row-group">
+      <slot name="control-header"></slot>
+      <template v-if="!$slots['control-header']">
+        <ElButtonGroup key="file-control">
+          <XButton preIcon="ep:folder-opened" title="打开文件" @click="refFile.click()" />
+          <el-tooltip effect="light" placement="bottom">
+            <template #content>
+              <div style="color: #409eff">
+                <!-- <el-button link @click="downloadProcessAsXml()">下载为XML文件</el-button> -->
+                <XTextButton title="下载为XML文件" @click="downloadProcessAsXml()" />
+                <br />
+
+                <!-- <el-button link @click="downloadProcessAsSvg()">下载为SVG文件</el-button> -->
+                <XTextButton title="下载为SVG文件" @click="downloadProcessAsSvg()" />
+                <br />
+
+                <!-- <el-button link @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button> -->
+                <XTextButton title="下载为BPMN文件" @click="downloadProcessAsBpmn()" />
+              </div>
+            </template>
+            <XButton title="下载文件" preIcon="ep:download" />
+          </el-tooltip>
+          <el-tooltip effect="light">
+            <XButton preIcon="ep:view" title="浏览" />
+            <template #content>
+              <!-- <el-button link @click="previewProcessXML">预览XML</el-button> -->
+              <XTextButton title="预览XML" @click="previewProcessXML" />
+              <br />
+              <!-- <el-button link @click="previewProcessJson">预览JSON</el-button> -->
+              <XTextButton title="预览JSON" @click="previewProcessJson" />
+            </template>
+          </el-tooltip>
+          <el-tooltip
+            v-if="props.simulation"
+            effect="light"
+            :content="simulationStatus ? '退出模拟' : '开启模拟'"
+          >
+            <XButton preIcon="ep:cpu" title="模拟" @click="processSimulation" />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="align-control">
+          <el-tooltip effect="light" content="向左对齐">
+            <!-- <el-button
+              class="align align-left"
+              icon="el-icon-s-data"
+              @click="elementsAlign('left')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-bottom"
+              @click="elementsAlign('left')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向右对齐">
+            <!-- <el-button
+              class="align align-right"
+              icon="el-icon-s-data"
+              @click="elementsAlign('right')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-top"
+              @click="elementsAlign('right')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向上对齐">
+            <!-- <el-button
+              class="align align-top"
+              icon="el-icon-s-data"
+              @click="elementsAlign('top')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-left"
+              @click="elementsAlign('top')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向下对齐">
+            <!-- <el-button
+              class="align align-bottom"
+              icon="el-icon-s-data"
+              @click="elementsAlign('bottom')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-right"
+              @click="elementsAlign('bottom')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="水平居中">
+            <!-- <el-button
+              class="align align-center"
+              icon="el-icon-s-data"
+              @click="elementsAlign('center')"
+            /> -->
+            <!-- class="align align-center" -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-center"
+              @click="elementsAlign('center')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="垂直居中">
+            <!-- <el-button
+              class="align align-middle"
+              icon="el-icon-s-data"
+              @click="elementsAlign('middle')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-middle"
+              @click="elementsAlign('middle')"
+            />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="scale-control">
+          <el-tooltip effect="light" content="缩小视图">
+            <!-- <el-button
+              :disabled="defaultZoom < 0.2"
+              icon="el-icon-zoom-out"
+              @click="processZoomOut()"
+            /> -->
+            <XButton
+              preIcon="ep:zoom-out"
+              @click="processZoomOut()"
+              :disabled="defaultZoom < 0.2"
+            />
+          </el-tooltip>
+          <el-button>{{ Math.floor(defaultZoom * 10 * 10) + '%' }}</el-button>
+          <el-tooltip effect="light" content="放大视图">
+            <!-- <el-button
+              :disabled="defaultZoom > 4"
+              icon="el-icon-zoom-in"
+              @click="processZoomIn()"
+            /> -->
+            <XButton preIcon="ep:zoom-in" @click="processZoomIn()" :disabled="defaultZoom > 4" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="重置视图并居中">
+            <!-- <el-button icon="el-icon-c-scale-to-original" @click="processReZoom()" /> -->
+            <XButton preIcon="ep:scale-to-original" @click="processReZoom()" />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="stack-control">
+          <el-tooltip effect="light" content="撤销">
+            <!-- <el-button :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" /> -->
+            <XButton preIcon="ep:refresh-left" @click="processUndo()" :disabled="!revocable" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="恢复">
+            <!-- <el-button
+              :disabled="!recoverable"
+              icon="el-icon-refresh-right"
+              @click="processRedo()"
+            /> -->
+            <XButton preIcon="ep:refresh-right" @click="processRedo()" :disabled="!recoverable" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="重新绘制">
+            <!-- <el-button icon="el-icon-refresh" @click="processRestart" /> -->
+            <XButton preIcon="ep:refresh" @click="processRestart()" />
+          </el-tooltip>
+        </ElButtonGroup>
+      </template>
+      <!-- 用于打开本地文件-->
+      <input
+        type="file"
+        id="files"
+        ref="refFile"
+        style="display: none"
+        accept=".xml, .bpmn"
+        @change="importLocalFile"
+      />
+    </div>
+    <div class="my-process-designer__container">
+      <div
+        class="my-process-designer__canvas"
+        ref="bpmnCanvas"
+        id="bpmnCanvas"
+        style="width: 1680px; height: 800px"
+      ></div>
+      <!-- <div id="js-properties-panel" class="panel"></div> -->
+      <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
+    </div>
+    <Dialog
+      title="预览"
+      v-model="previewModelVisible"
+      width="80%"
+      :scroll="true"
+      max-height="600px"
+    >
+      <div>
+        <pre><code v-dompurify-html="highlightedCode(previewResult)" class="hljs"></code></pre>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右侧框样式
+import { ElMessage, ElMessageBox } from 'element-plus'
+import BpmnModeler from 'bpmn-js/lib/Modeler'
+import DefaultEmptyXML from './plugins/defaultEmpty'
+// 翻译方法
+import customTranslate from './plugins/translate/customTranslate'
+import translationsCN from './plugins/translate/zh'
+// 模拟流转流程
+import tokenSimulation from 'bpmn-js-token-simulation'
+// 标签解析构建器
+// import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
+// import propertiesPanelModule from 'bpmn-js-properties-panel'
+// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
+// 标签解析 Moddle
+import camundaModdleDescriptor from './plugins/descriptor/camundaDescriptor.json'
+import activitiModdleDescriptor from './plugins/descriptor/activitiDescriptor.json'
+import flowableModdleDescriptor from './plugins/descriptor/flowableDescriptor.json'
+// 标签解析 Extension
+import camundaModdleExtension from './plugins/extension-moddle/camunda'
+import activitiModdleExtension from './plugins/extension-moddle/activiti'
+import flowableModdleExtension from './plugins/extension-moddle/flowable'
+// 引入json转换与高亮
+// import xml2js from 'xml-js'
+// import xml2js from 'fast-xml-parser'
+import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
+// 代码高亮插件
+// import hljs from 'highlight.js/lib/highlight'
+// import 'highlight.js/styles/github-gist.css'
+// hljs.registerLanguage('xml', 'highlight.js/lib/languages/xml')
+// hljs.registerLanguage('json', 'highlight.js/lib/languages/json')
+// const eventName = reactive({
+//   name: ''
+// })
+import hljs from 'highlight.js' // 导入代码高亮文件
+import 'highlight.js/styles/github.css' // 导入代码高亮样式
+
+defineOptions({ name: 'MyProcessDesigner' })
+
+const bpmnCanvas = ref()
+const refFile = ref()
+const emit = defineEmits([
+  'destroy',
+  'init-finished',
+  'save',
+  'commandStack-changed',
+  'input',
+  'change',
+  'canvas-viewbox-changed',
+  // eventName.name
+  'element-click'
+])
+
+const props = defineProps({
+  value: String, // xml 字符串
+  // valueWatch: true, // xml 字符串的 watch 状态
+  processId: String, // 流程 key 标识
+  processName: String, // 流程 name 名字
+  formId: Number, // 流程 form 表单编号
+  translations: {
+    // 自定义的翻译文件
+    type: Object,
+    default: () => {}
+  },
+  additionalModel: [Object, Array], // 自定义model
+  moddleExtension: {
+    // 自定义moddle
+    type: Object,
+    default: () => {}
+  },
+  onlyCustomizeAddi: {
+    type: Boolean,
+    default: false
+  },
+  onlyCustomizeModdle: {
+    type: Boolean,
+    default: false
+  },
+  simulation: {
+    type: Boolean,
+    default: true
+  },
+  keyboard: {
+    type: Boolean,
+    default: true
+  },
+  prefix: {
+    type: String,
+    default: 'camunda'
+  },
+  events: {
+    type: Array,
+    default: () => ['element.click']
+  },
+  headerButtonSize: {
+    type: String,
+    default: 'small',
+    validator: (value: string) => ['default', 'medium', 'small', 'mini'].indexOf(value) !== -1
+  },
+  headerButtonType: {
+    type: String,
+    default: 'primary',
+    validator: (value: string) =>
+      ['default', 'primary', 'success', 'warning', 'danger', 'info'].indexOf(value) !== -1
+  }
+})
+
+/**
+ * 代码高亮
+ */
+const highlightedCode = (code: string) => {
+  // 高亮
+  if (previewType.value === 'json') {
+    code = JSON.stringify(code, null, 2)
+  }
+  const result = hljs.highlight(code, { language: previewType.value, ignoreIllegals: true })
+  return result.value || '&nbsp;'
+}
+
+provide('configGlobal', props)
+let bpmnModeler: any = null
+const defaultZoom = ref(1)
+const previewModelVisible = ref(false)
+const simulationStatus = ref(false)
+const previewResult = ref('')
+const previewType = ref('xml')
+const recoverable = ref(false)
+const revocable = ref(false)
+const additionalModules = computed(() => {
+  console.log(props.additionalModel, 'additionalModel')
+  const Modules: any[] = []
+  // 仅保留用户自定义扩展模块
+  if (props.onlyCustomizeAddi) {
+    if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
+      return props.additionalModel || []
+    }
+    return [props.additionalModel]
+  }
+
+  // 插入用户自定义扩展模块
+  if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
+    Modules.push(...(props.additionalModel as any[]))
+  } else {
+    props.additionalModel && Modules.push(props.additionalModel)
+  }
+
+  // 翻译模块
+  const TranslateModule = {
+    translate: ['value', customTranslate(props.translations || translationsCN)]
+  }
+  Modules.push(TranslateModule)
+
+  // 模拟流转模块
+  if (props.simulation) {
+    Modules.push(tokenSimulation)
+  }
+
+  // 根据需要的流程类型设置扩展元素构建模块
+  // if (this.prefix === "bpmn") {
+  //   Modules.push(bpmnModdleExtension);
+  // }
+  console.log(props.prefix, 'props.prefix ')
+  if (props.prefix === 'camunda') {
+    Modules.push(camundaModdleExtension)
+  }
+  if (props.prefix === 'flowable') {
+    Modules.push(flowableModdleExtension)
+  }
+  if (props.prefix === 'activiti') {
+    Modules.push(activitiModdleExtension)
+  }
+
+  return Modules
+})
+const moddleExtensions = computed(() => {
+  console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle')
+  console.log(props.moddleExtension, 'props.moddleExtension')
+  console.log(props.prefix, 'props.prefix')
+  const Extensions: any = {}
+  // 仅使用用户自定义模块
+  if (props.onlyCustomizeModdle) {
+    return props.moddleExtension || null
+  }
+
+  // 插入用户自定义模块
+  if (props.moddleExtension) {
+    for (let key in props.moddleExtension) {
+      Extensions[key] = props.moddleExtension[key]
+    }
+  }
+
+  // 根据需要的 "流程类型" 设置 对应的解析文件
+  if (props.prefix === 'activiti') {
+    Extensions.activiti = activitiModdleDescriptor
+  }
+  if (props.prefix === 'flowable') {
+    Extensions.flowable = flowableModdleDescriptor
+  }
+  if (props.prefix === 'camunda') {
+    Extensions.camunda = camundaModdleDescriptor
+  }
+  return Extensions
+})
+console.log(additionalModules, 'additionalModules()')
+console.log(moddleExtensions, 'moddleExtensions()')
+const initBpmnModeler = () => {
+  if (bpmnModeler) return
+  let data = document.getElementById('bpmnCanvas')
+  console.log(data, 'data')
+  console.log(props.keyboard, 'props.keyboard')
+  console.log(additionalModules, 'additionalModules()')
+  console.log(moddleExtensions, 'moddleExtensions()')
+
+  bpmnModeler = new BpmnModeler({
+    // container: this.$refs['bpmn-canvas'],
+    // container: getCurrentInstance(),
+    // container: needClass,
+    // container: bpmnCanvas.value,
+    container: data,
+    // width: '100%',
+    // 添加控制板
+    // propertiesPanel: {
+    // parent: '#js-properties-panel'
+    // },
+    keyboard: props.keyboard ? { bindTo: document } : null,
+    // additionalModules: additionalModules.value,
+    additionalModules: additionalModules.value,
+    moddleExtensions: moddleExtensions.value
+
+    // additionalModules: [
+    // additionalModules.value
+    // propertiesPanelModule,
+    // propertiesProviderModule
+    // propertiesProviderModule
+    // ],
+    // moddleExtensions: { camunda: moddleExtensions.value }
+  })
+
+  // bpmnModeler.createDiagram()
+
+  // console.log(bpmnModeler, 'bpmnModeler111111')
+  emit('init-finished', bpmnModeler)
+  initModelListeners()
+}
+
+const initModelListeners = () => {
+  const EventBus = bpmnModeler.get('eventBus')
+  console.log(EventBus, 'EventBus')
+  // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
+  props.events.forEach((event: any) => {
+    EventBus.on(event, function (eventObj) {
+      let eventName = event.replace(/\./g, '-')
+      // eventName.name = eventName
+      let element = eventObj ? eventObj.element : null
+      console.log(eventName, 'eventName')
+      console.log(element, 'element')
+      emit('element-click', element, eventObj)
+      // emit(eventName, element, eventObj)
+    })
+  })
+  // 监听图形改变返回xml
+  EventBus.on('commandStack.changed', async (event) => {
+    try {
+      recoverable.value = bpmnModeler.get('commandStack').canRedo()
+      revocable.value = bpmnModeler.get('commandStack').canUndo()
+      let { xml } = await bpmnModeler.saveXML({ format: true })
+      emit('commandStack-changed', event)
+      emit('input', xml)
+      emit('change', xml)
+      emit('save', xml)
+    } catch (e: any) {
+      console.error(`[Process Designer Warn]: ${e.message || e}`)
+    }
+  })
+  // 监听视图缩放变化
+  bpmnModeler.on('canvas.viewbox.changed', ({ viewbox }) => {
+    emit('canvas-viewbox-changed', { viewbox })
+    const { scale } = viewbox
+    defaultZoom.value = Math.floor(scale * 100) / 100
+  })
+}
+/* 创建新的流程图 */
+const createNewDiagram = async (xml) => {
+  console.log(xml, 'xml')
+  // 将字符串转换成图显示出来
+  let newId = props.processId || `Process_${new Date().getTime()}`
+  let newName = props.processName || `业务流程_${new Date().getTime()}`
+  let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
+  try {
+    // console.log(xmlString, 'xmlString')
+    // console.log(this.bpmnModeler.importXML);
+    let { warnings } = await bpmnModeler.importXML(xmlString)
+    console.log(warnings, 'warnings')
+    if (warnings && warnings.length) {
+      warnings.forEach((warn) => console.warn(warn))
+    }
+  } catch (e: any) {
+    console.error(`[Process Designer Warn]: ${e.message || e}`)
+  }
+}
+
+// 下载流程图到本地
+const downloadProcess = async (type) => {
+  try {
+    // 按需要类型创建文件并下载
+    if (type === 'xml' || type === 'bpmn') {
+      const { err, xml } = await bpmnModeler.saveXML()
+      // 读取异常时抛出异常
+      if (err) {
+        console.error(`[Process Designer Warn ]: ${err.message || err}`)
+      }
+      let { href, filename } = setEncoded(type.toUpperCase(), xml)
+      downloadFunc(href, filename)
+    } else {
+      const { err, svg } = await bpmnModeler.saveSVG()
+      // 读取异常时抛出异常
+      if (err) {
+        return console.error(err)
+      }
+      let { href, filename } = setEncoded('SVG', svg)
+      downloadFunc(href, filename)
+    }
+  } catch (e: any) {
+    console.error(`[Process Designer Warn ]: ${e.message || e}`)
+  }
+  // 文件下载方法
+  function downloadFunc(href, filename) {
+    if (href && filename) {
+      let a = document.createElement('a')
+      a.download = filename //指定下载的文件名
+      a.href = href //  URL对象
+      a.click() // 模拟点击
+      URL.revokeObjectURL(a.href) // 释放URL 对象
+    }
+  }
+}
+
+// 根据所需类型进行转码并返回下载地址
+const setEncoded = (type, data) => {
+  const filename = 'diagram'
+  const encodedData = encodeURIComponent(data)
+  return {
+    filename: `${filename}.${type}`,
+    href: `data:application/${
+      type === 'svg' ? 'text/xml' : 'bpmn20-xml'
+    };charset=UTF-8,${encodedData}`,
+    data: data
+  }
+}
+
+// 加载本地文件
+const importLocalFile = () => {
+  const file = refFile.value.files[0]
+  const reader = new FileReader()
+  reader.readAsText(file)
+  reader.onload = function () {
+    let xmlStr = this.result
+    createNewDiagram(xmlStr)
+    emit('save', xmlStr)
+  }
+}
+/* ------------------------------------------------ refs methods ------------------------------------------------------ */
+const downloadProcessAsXml = () => {
+  downloadProcess('xml')
+}
+const downloadProcessAsBpmn = () => {
+  downloadProcess('bpmn')
+}
+const downloadProcessAsSvg = () => {
+  downloadProcess('svg')
+}
+const processSimulation = () => {
+  simulationStatus.value = !simulationStatus.value
+  console.log(bpmnModeler.get('toggleMode', 'strict'), "bpmnModeler.get('toggleMode')")
+  props.simulation && bpmnModeler.get('toggleMode', 'strict').toggleMode()
+}
+const processRedo = () => {
+  bpmnModeler.get('commandStack').redo()
+}
+const processUndo = () => {
+  bpmnModeler.get('commandStack').undo()
+}
+const processZoomIn = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100
+  if (newZoom > 4) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
+  }
+  defaultZoom.value = newZoom
+  bpmnModeler.get('canvas').zoom(defaultZoom.value)
+}
+const processZoomOut = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100
+  if (newZoom < 0.2) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
+  }
+  defaultZoom.value = newZoom
+  bpmnModeler.get('canvas').zoom(defaultZoom.value)
+}
+const processReZoom = () => {
+  defaultZoom.value = 1
+  bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
+}
+const processRestart = () => {
+  recoverable.value = false
+  revocable.value = false
+  createNewDiagram(null)
+}
+const elementsAlign = (align) => {
+  const Align = bpmnModeler.get('alignElements')
+  const Selection = bpmnModeler.get('selection')
+  const SelectedElements = Selection.get()
+  if (!SelectedElements || SelectedElements.length <= 1) {
+    ElMessage.warning('请按住 Shift 键选择多个元素对齐')
+    // alert('请按住 Ctrl 键选择多个元素对齐
+    return
+  }
+  ElMessageBox.confirm('自动对齐可能造成图形变形，是否继续？', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    Align.trigger(SelectedElements, align)
+  })
+}
+/*-----------------------------    方法结束     ---------------------------------*/
+const previewProcessXML = () => {
+  console.log(bpmnModeler.saveXML, 'bpmnModeler')
+  bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+    // console.log(xml, 'xml111111')
+    previewResult.value = xml
+    previewType.value = 'xml'
+    previewModelVisible.value = true
+  })
+}
+const previewProcessJson = () => {
+  bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+    const rootNodes = new XmlNode(XmlNodeType.Root, parseXmlString(xml))
+    previewResult.value = rootNodes.parent?.toJSON() as unknown as string
+    previewType.value = 'json'
+    previewModelVisible.value = true
+  })
+}
+
+/* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
+onMounted(() => {
+  initBpmnModeler()
+  createNewDiagram(props.value)
+})
+onBeforeUnmount(() => {
+  if (bpmnModeler) bpmnModeler.destroy()
+  emit('destroy', bpmnModeler)
+  bpmnModeler = null
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
new file mode 100644
index 0000000..34a54c8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -0,0 +1,379 @@
+<template>
+  <div class="process-viewer">
+    <div style="height: 100%" ref="processCanvas" v-show="!isLoading"> </div>
+    <!-- 自定义箭头样式，用于已完成状态下流程连线箭头 -->
+    <defs ref="customDefs">
+      <marker
+        id="sequenceflow-end-white-success"
+        viewBox="0 0 20 20"
+        refX="11"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="success-arrow"
+          d="M 1 5 L 11 10 L 1 15 Z"
+          style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1"
+        />
+      </marker>
+      <marker
+        id="conditional-flow-marker-white-success"
+        viewBox="0 0 20 20"
+        refX="-1"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="success-conditional"
+          d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
+          style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1"
+        />
+      </marker>
+    </defs>
+
+    <!-- 审批记录 -->
+    <el-dialog :title="dialogTitle || '审批记录'" v-model="dialogVisible" width="1000px">
+      <el-row>
+        <el-table
+          :data="selectTasks"
+          size="small"
+          border
+          header-cell-class-name="table-header-gray"
+        >
+          <el-table-column
+            label="序号"
+            header-align="center"
+            align="center"
+            type="index"
+            width="50"
+          />
+          <el-table-column
+            label="审批人"
+            min-width="100"
+            align="center"
+            v-if="selectActivityType === 'bpmn:UserTask'"
+          >
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="发起人"
+            prop="assigneeUser.nickname"
+            min-width="100"
+            align="center"
+            v-else
+          />
+          <el-table-column label="部门" min-width="100" align="center">
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="开始时间"
+            prop="createTime"
+            min-width="140"
+          />
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="结束时间"
+            prop="endTime"
+            min-width="140"
+          />
+          <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="审批建议"
+            prop="reason"
+            min-width="120"
+            v-if="selectActivityType === 'bpmn:UserTask'"
+          />
+          <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+            <template #default="scope">
+              {{ formatPast2(scope.row.durationInMillis) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+    </el-dialog>
+
+    <!-- Zoom：放大、缩小 -->
+    <div style="position: absolute; top: 0; left: 0; width: 100%">
+      <el-row type="flex" justify="end">
+        <el-button-group key="scale-control" size="default">
+          <el-button
+            size="default"
+            :plain="true"
+            :disabled="defaultZoom <= 0.3"
+            :icon="ZoomOut"
+            @click="processZoomOut()"
+          />
+          <el-button size="default" style="width: 90px">
+            {{ Math.floor(defaultZoom * 10 * 10) + '%' }}
+          </el-button>
+          <el-button
+            size="default"
+            :plain="true"
+            :disabled="defaultZoom >= 3.9"
+            :icon="ZoomIn"
+            @click="processZoomIn()"
+          />
+          <el-button size="default" :icon="ScaleToOriginal" @click="processReZoom()" />
+        </el-button-group>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import '../theme/index.scss'
+import BpmnViewer from 'bpmn-js/lib/Viewer'
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
+import { ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue'
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { BpmProcessInstanceStatus } from '@/utils/constants'
+
+const props = defineProps({
+  xml: {
+    type: String,
+    required: true
+  },
+  view: {
+    type: Object,
+    require: true
+  }
+})
+
+const processCanvas = ref()
+const bpmnViewer = ref<BpmnViewer | null>(null)
+const customDefs = ref()
+const defaultZoom = ref(1) // 默认缩放比例
+const isLoading = ref(false) // 是否加载中
+
+const processInstance = ref<any>({}) // 流程实例
+const tasks = ref([]) // 流程任务
+
+const dialogVisible = ref(false) // 弹窗可见性
+const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题
+const selectActivityType = ref<string | undefined>(undefined) // 选中 Task 的活动编号
+const selectTasks = ref<any[]>([]) // 选中的任务数组
+
+/** Zoom：恢复 */
+const processReZoom = () => {
+  defaultZoom.value = 1
+  bpmnViewer.value?.get('canvas').zoom('fit-viewport', 'auto')
+}
+
+/** Zoom：放大 */
+const processZoomIn = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100
+  if (newZoom > 4) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
+  }
+  defaultZoom.value = newZoom
+  bpmnViewer.value?.get('canvas').zoom(defaultZoom.value)
+}
+
+/** Zoom：缩小 */
+const processZoomOut = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100
+  if (newZoom < 0.2) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
+  }
+  defaultZoom.value = newZoom
+  bpmnViewer.value?.get('canvas').zoom(defaultZoom.value)
+}
+
+/** 流程图预览清空 */
+const clearViewer = () => {
+  if (processCanvas.value) {
+    processCanvas.value.innerHTML = ''
+  }
+  if (bpmnViewer.value) {
+    bpmnViewer.value.destroy()
+  }
+  bpmnViewer.value = null
+}
+
+/** 添加自定义箭头 */
+// TODO 芋艿：自定义箭头不生效，有点奇怪！！！！相关的 marker-end、marker-start 暂时也注释了！！！
+const addCustomDefs = () => {
+  if (!bpmnViewer.value) {
+    return
+  }
+  const canvas = bpmnViewer.value?.get('canvas')
+  const svg = canvas?._svg
+  svg.appendChild(customDefs.value)
+}
+
+/** 节点选中 */
+const onSelectElement = (element: any) => {
+  // 清空原选中
+  selectActivityType.value = undefined
+  dialogTitle.value = undefined
+  if (!element || !processInstance.value?.id) {
+    return
+  }
+
+  // UserTask 的情况
+  const activityType = element.type
+  selectActivityType.value = activityType
+  if (activityType === 'bpmn:UserTask') {
+    dialogTitle.value = element.businessObject ? element.businessObject.name : undefined
+    selectTasks.value = tasks.value.filter((item: any) => item?.taskDefinitionKey === element.id)
+    dialogVisible.value = true
+  } else if (activityType === 'bpmn:EndEvent' || activityType === 'bpmn:StartEvent') {
+    dialogTitle.value = '审批信息'
+    selectTasks.value = [
+      {
+        assigneeUser: processInstance.value.startUser,
+        createTime: processInstance.value.startTime,
+        endTime: processInstance.value.endTime,
+        status: processInstance.value.status,
+        durationInMillis: processInstance.value.durationInMillis
+      }
+    ]
+    dialogVisible.value = true
+  }
+}
+
+/** 初始化 BPMN 视图 */
+const importXML = async (xml: string) => {
+  // 清空流程图
+  clearViewer()
+
+  // 初始化流程图
+  if (xml != null && xml !== '') {
+    try {
+      bpmnViewer.value = new BpmnViewer({
+        additionalModules: [MoveCanvasModule],
+        container: processCanvas.value
+      })
+      // 增加点击事件
+      bpmnViewer.value.on('element.click', ({ element }) => {
+        onSelectElement(element)
+      })
+
+      // 初始化 BPMN 视图
+      isLoading.value = true
+      await bpmnViewer.value.importXML(xml)
+      // 自定义成功的箭头
+      addCustomDefs()
+    } catch (e) {
+      clearViewer()
+    } finally {
+      isLoading.value = false
+      // 高亮流程
+      setProcessStatus(props.view)
+    }
+  }
+}
+
+/** 高亮流程 */
+const setProcessStatus = (view: any) => {
+  // 设置相关变量
+  if (!view || !view.processInstance) {
+    return
+  }
+  processInstance.value = view.processInstance
+  tasks.value = view.tasks
+  if (isLoading.value || !bpmnViewer.value) {
+    return
+  }
+  const {
+    unfinishedTaskActivityIds,
+    finishedTaskActivityIds,
+    finishedSequenceFlowActivityIds,
+    rejectedTaskActivityIds
+  } = view
+  const canvas = bpmnViewer.value.get('canvas')
+  const elementRegistry = bpmnViewer.value.get('elementRegistry')
+
+  // 已完成节点
+  if (Array.isArray(finishedSequenceFlowActivityIds)) {
+    finishedSequenceFlowActivityIds.forEach((item: any) => {
+      if (item != null) {
+        canvas.addMarker(item, 'success')
+        const element = elementRegistry.get(item)
+        const conditionExpression = element.businessObject.conditionExpression
+        if (conditionExpression) {
+          canvas.addMarker(item, 'condition-expression')
+        }
+      }
+    })
+  }
+  if (Array.isArray(finishedTaskActivityIds)) {
+    finishedTaskActivityIds.forEach((item: any) => canvas.addMarker(item, 'success'))
+  }
+
+  // 未完成节点
+  if (Array.isArray(unfinishedTaskActivityIds)) {
+    unfinishedTaskActivityIds.forEach((item: any) => canvas.addMarker(item, 'primary'))
+  }
+
+  // 被拒绝节点
+  if (Array.isArray(rejectedTaskActivityIds)) {
+    rejectedTaskActivityIds.forEach((item: any) => {
+      if (item != null) {
+        canvas.addMarker(item, 'danger')
+      }
+    })
+  }
+
+  // 特殊：处理 end 节点的高亮。因为 end 在拒绝、取消时，被后端计算成了 finishedTaskActivityIds 里
+  if (
+    [BpmProcessInstanceStatus.CANCEL, BpmProcessInstanceStatus.REJECT].includes(
+      processInstance.value.status
+    )
+  ) {
+    const endNodes = elementRegistry.filter((element: any) => element.type === 'bpmn:EndEvent')
+    endNodes.forEach((item: any) => {
+      canvas.removeMarker(item.id, 'success')
+      if (processInstance.value.status === BpmProcessInstanceStatus.CANCEL) {
+        canvas.addMarker(item.id, 'cancel')
+      } else {
+        canvas.addMarker(item.id, 'danger')
+      }
+    })
+  }
+}
+
+watch(
+  () => props.xml,
+  (newXml) => {
+    importXML(newXml)
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.view,
+  (newView) => {
+    setProcessStatus(newView)
+  },
+  { immediate: true }
+)
+
+/** mounted：初始化 */
+onMounted(() => {
+  importXML(props.xml)
+  setProcessStatus(props.view)
+})
+
+/** unmount：销毁 */
+onBeforeUnmount(() => {
+  clearViewer()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/index.ts b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/index.ts
new file mode 100644
index 0000000..8522846
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/index.ts
@@ -0,0 +1,8 @@
+import MyProcessDesigner from './ProcessDesigner.vue'
+
+MyProcessDesigner.install = function (Vue) {
+  Vue.component(MyProcessDesigner.name, MyProcessDesigner)
+}
+
+// 流程图的设计器，可编辑
+export default MyProcessDesigner
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/index2.ts b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/index2.ts
new file mode 100644
index 0000000..ebe8ca7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/index2.ts
@@ -0,0 +1,8 @@
+import MyProcessViewer from './ProcessViewer.vue'
+
+MyProcessViewer.install = function (Vue) {
+  Vue.component(MyProcessViewer.name, MyProcessViewer)
+}
+
+// 流程图的查看器，不可编辑
+export default MyProcessViewer
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js
new file mode 100644
index 0000000..8783493
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js
@@ -0,0 +1,423 @@
+import { assign, forEach, isArray } from 'min-dash'
+
+import { is } from 'bpmn-js/lib/util/ModelUtil'
+
+import { isExpanded, isEventSubProcess } from 'bpmn-js/lib/util/DiUtil'
+
+import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil'
+
+import { getChildLanes } from 'bpmn-js/lib/features/modeling/util/LaneUtil'
+
+import { hasPrimaryModifier } from 'diagram-js/lib/util/Mouse'
+
+/**
+ * A provider for BPMN 2.0 elements context pad
+ */
+export default function ContextPadProvider(
+  config,
+  injector,
+  eventBus,
+  contextPad,
+  modeling,
+  elementFactory,
+  connect,
+  create,
+  popupMenu,
+  canvas,
+  rules,
+  translate
+) {
+  config = config || {}
+
+  contextPad.registerProvider(this)
+
+  this._contextPad = contextPad
+
+  this._modeling = modeling
+
+  this._elementFactory = elementFactory
+  this._connect = connect
+  this._create = create
+  this._popupMenu = popupMenu
+  this._canvas = canvas
+  this._rules = rules
+  this._translate = translate
+
+  if (config.autoPlace !== false) {
+    this._autoPlace = injector.get('autoPlace', false)
+  }
+
+  eventBus.on('create.end', 250, function (event) {
+    const context = event.context,
+      shape = context.shape
+
+    if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
+      return
+    }
+
+    const entries = contextPad.getEntries(shape)
+
+    if (entries.replace) {
+      entries.replace.action.click(event, shape)
+    }
+  })
+}
+
+ContextPadProvider.$inject = [
+  'config.contextPad',
+  'injector',
+  'eventBus',
+  'contextPad',
+  'modeling',
+  'elementFactory',
+  'connect',
+  'create',
+  'popupMenu',
+  'canvas',
+  'rules',
+  'translate',
+  'elementRegistry'
+]
+
+ContextPadProvider.prototype.getContextPadEntries = function (element) {
+  const contextPad = this._contextPad,
+    modeling = this._modeling,
+    elementFactory = this._elementFactory,
+    connect = this._connect,
+    create = this._create,
+    popupMenu = this._popupMenu,
+    canvas = this._canvas,
+    rules = this._rules,
+    autoPlace = this._autoPlace,
+    translate = this._translate
+
+  const actions = {}
+
+  if (element.type === 'label') {
+    return actions
+  }
+
+  const businessObject = element.businessObject
+
+  function startConnect(event, element) {
+    connect.start(event, element)
+  }
+
+  function removeElement() {
+    modeling.removeElements([element])
+  }
+
+  function getReplaceMenuPosition(element) {
+    const Y_OFFSET = 5
+
+    const diagramContainer = canvas.getContainer(),
+      pad = contextPad.getPad(element).html
+
+    const diagramRect = diagramContainer.getBoundingClientRect(),
+      padRect = pad.getBoundingClientRect()
+
+    const top = padRect.top - diagramRect.top
+    const left = padRect.left - diagramRect.left
+
+    const pos = {
+      x: left,
+      y: top + padRect.height + Y_OFFSET
+    }
+
+    return pos
+  }
+
+  /**
+   * Create an append action
+   *
+   * @param {string} type
+   * @param {string} className
+   * @param {string} [title]
+   * @param {Object} [options]
+   *
+   * @return {Object} descriptor
+   */
+  function appendAction(type, className, title, options) {
+    if (typeof title !== 'string') {
+      options = title
+      title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') })
+    }
+
+    function appendStart(event, element) {
+      const shape = elementFactory.createShape(assign({ type: type }, options))
+      create.start(event, shape, {
+        source: element
+      })
+    }
+
+    const append = autoPlace
+      ? function (event, element) {
+          const shape = elementFactory.createShape(assign({ type: type }, options))
+
+          autoPlace.append(element, shape)
+        }
+      : appendStart
+
+    return {
+      group: 'model',
+      className: className,
+      title: title,
+      action: {
+        dragstart: appendStart,
+        click: append
+      }
+    }
+  }
+
+  function splitLaneHandler(count) {
+    return function (event, element) {
+      // actual split
+      modeling.splitLane(element, count)
+
+      // refresh context pad after split to
+      // get rid of split icons
+      contextPad.open(element, true)
+    }
+  }
+
+  if (isAny(businessObject, ['bpmn:Lane', 'bpmn:Participant']) && isExpanded(businessObject)) {
+    const childLanes = getChildLanes(element)
+
+    assign(actions, {
+      'lane-insert-above': {
+        group: 'lane-insert-above',
+        className: 'bpmn-icon-lane-insert-above',
+        title: translate('Add Lane above'),
+        action: {
+          click: function (event, element) {
+            modeling.addLane(element, 'top')
+          }
+        }
+      }
+    })
+
+    if (childLanes.length < 2) {
+      if (element.height >= 120) {
+        assign(actions, {
+          'lane-divide-two': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-two',
+            title: translate('Divide into two Lanes'),
+            action: {
+              click: splitLaneHandler(2)
+            }
+          }
+        })
+      }
+
+      if (element.height >= 180) {
+        assign(actions, {
+          'lane-divide-three': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-three',
+            title: translate('Divide into three Lanes'),
+            action: {
+              click: splitLaneHandler(3)
+            }
+          }
+        })
+      }
+    }
+
+    assign(actions, {
+      'lane-insert-below': {
+        group: 'lane-insert-below',
+        className: 'bpmn-icon-lane-insert-below',
+        title: translate('Add Lane below'),
+        action: {
+          click: function (event, element) {
+            modeling.addLane(element, 'bottom')
+          }
+        }
+      }
+    })
+  }
+
+  if (is(businessObject, 'bpmn:FlowNode')) {
+    if (is(businessObject, 'bpmn:EventBasedGateway')) {
+      assign(actions, {
+        'append.receive-task': appendAction(
+          'bpmn:ReceiveTask',
+          'bpmn-icon-receive-task',
+          translate('Append ReceiveTask')
+        ),
+        'append.message-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-message',
+          translate('Append MessageIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:MessageEventDefinition' }
+        ),
+        'append.timer-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-timer',
+          translate('Append TimerIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:TimerEventDefinition' }
+        ),
+        'append.condition-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-condition',
+          translate('Append ConditionIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:ConditionalEventDefinition' }
+        ),
+        'append.signal-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-signal',
+          translate('Append SignalIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:SignalEventDefinition' }
+        )
+      })
+    } else if (
+      isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')
+    ) {
+      assign(actions, {
+        'append.compensation-activity': appendAction(
+          'bpmn:Task',
+          'bpmn-icon-task',
+          translate('Append compensation activity'),
+          {
+            isForCompensation: true
+          }
+        )
+      })
+    } else if (
+      !is(businessObject, 'bpmn:EndEvent') &&
+      !businessObject.isForCompensation &&
+      !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
+      !isEventSubProcess(businessObject)
+    ) {
+      assign(actions, {
+        'append.end-event': appendAction(
+          'bpmn:EndEvent',
+          'bpmn-icon-end-event-none',
+          translate('Append EndEvent')
+        ),
+        'append.gateway': appendAction(
+          'bpmn:ExclusiveGateway',
+          'bpmn-icon-gateway-none',
+          translate('Append Gateway')
+        ),
+        'append.append-task': appendAction(
+          'bpmn:UserTask',
+          'bpmn-icon-user-task',
+          translate('Append Task')
+        ),
+        'append.intermediate-event': appendAction(
+          'bpmn:IntermediateThrowEvent',
+          'bpmn-icon-intermediate-event-none',
+          translate('Append Intermediate/Boundary Event')
+        )
+      })
+    }
+  }
+
+  if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
+    // Replace menu entry
+    assign(actions, {
+      replace: {
+        group: 'edit',
+        className: 'bpmn-icon-screw-wrench',
+        title: '修改类型',
+        action: {
+          click: function (event, element) {
+            const position = assign(getReplaceMenuPosition(element), {
+              cursor: { x: event.x, y: event.y }
+            })
+
+            popupMenu.open(element, 'bpmn-replace', position)
+          }
+        }
+      }
+    })
+  }
+
+  if (
+    isAny(businessObject, [
+      'bpmn:FlowNode',
+      'bpmn:InteractionNode',
+      'bpmn:DataObjectReference',
+      'bpmn:DataStoreReference'
+    ])
+  ) {
+    assign(actions, {
+      'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation'),
+
+      connect: {
+        group: 'connect',
+        className: 'bpmn-icon-connection-multi',
+        title: translate(
+          'Connect using ' +
+            (businessObject.isForCompensation ? '' : 'Sequence/MessageFlow or ') +
+            'Association'
+        ),
+        action: {
+          click: startConnect,
+          dragstart: startConnect
+        }
+      }
+    })
+  }
+
+  if (isAny(businessObject, ['bpmn:DataObjectReference', 'bpmn:DataStoreReference'])) {
+    assign(actions, {
+      connect: {
+        group: 'connect',
+        className: 'bpmn-icon-connection-multi',
+        title: translate('Connect using DataInputAssociation'),
+        action: {
+          click: startConnect,
+          dragstart: startConnect
+        }
+      }
+    })
+  }
+
+  if (is(businessObject, 'bpmn:Group')) {
+    assign(actions, {
+      'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation')
+    })
+  }
+
+  // delete element entry, only show if allowed by rules
+  let deleteAllowed = rules.allowed('elements.delete', { elements: [element] })
+
+  if (isArray(deleteAllowed)) {
+    // was the element returned as a deletion candidate?
+    deleteAllowed = deleteAllowed[0] === element
+  }
+
+  if (deleteAllowed) {
+    assign(actions, {
+      delete: {
+        group: 'edit',
+        className: 'bpmn-icon-trash',
+        title: translate('Remove'),
+        action: {
+          click: removeElement
+        }
+      }
+    })
+  }
+
+  return actions
+}
+
+// helpers /////////
+
+function isEventType(eventBo, type, definition) {
+  const isType = eventBo.$instanceOf(type)
+  let isDefinition = false
+
+  const definitions = eventBo.eventDefinitions || []
+  forEach(definitions, function (def) {
+    if (def.$type === definition) {
+      isDefinition = true
+    }
+  })
+
+  return isType && isDefinition
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/index.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/index.js
new file mode 100644
index 0000000..80009ef
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/index.js
@@ -0,0 +1,6 @@
+import CustomContextPadProvider from './contentPadProvider'
+
+export default {
+  __init__: ['contextPadProvider'],
+  contextPadProvider: ['type', CustomContextPadProvider]
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/defaultEmpty.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/defaultEmpty.js
new file mode 100644
index 0000000..f3bc894
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/defaultEmpty.js
@@ -0,0 +1,24 @@
+export default (key, name, type) => {
+  if (!type) type = 'camunda'
+  const TYPE_TARGET = {
+    activiti: 'http://activiti.org/bpmn',
+    camunda: 'http://bpmn.io/schema/bpmn',
+    flowable: 'http://flowable.org/bpmn'
+  }
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn2:definitions 
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
+  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
+  xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
+  id="diagram_${key}"
+  targetNamespace="${TYPE_TARGET[type]}">
+  <bpmn2:process id="${key}" name="${name}" isExecutable="true">
+  </bpmn2:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn2:definitions>`
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json
new file mode 100644
index 0000000..94ba8f6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json
@@ -0,0 +1,1004 @@
+{
+  "name": "Activiti",
+  "uri": "http://activiti.org/bpmn",
+  "prefix": "activiti",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": ["bpmn:Definitions"],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "activiti:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "activiti:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        },
+        {
+          "name": "executionListener",
+          "isAbstract": true,
+          "type": "Expression"
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "multiinstance_type",
+      "superClass": ["Element"]
+    },
+    {
+      "name": "multiinstance_condition",
+      "superClass": ["Element"]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "multiinstance_condition",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["activiti:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "activiti:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["activiti:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "activiti:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "activiti:ServiceTaskLike",
+          "activiti:ExecutionListener",
+          "activiti:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["activiti:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["activiti:AsyncCapable", "bpmn:MultiInstanceLoopCharacteristics"]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json
new file mode 100644
index 0000000..8322561
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json
@@ -0,0 +1,1020 @@
+{
+  "name": "Camunda",
+  "uri": "http://camunda.org/schema/1.0/bpmn",
+  "prefix": "camunda",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": ["bpmn:Definitions"],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity", "bpmn:SignalEventDefinition"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "camunda:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "camunda:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "modelerTemplateVersion",
+          "isAttr": true,
+          "type": "Integer"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["camunda:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "camunda:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["camunda:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "camunda:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "camunda:ServiceTaskLike",
+          "camunda:ExecutionListener",
+          "camunda:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["camunda:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["camunda:AsyncCapable", "bpmn:MultiInstanceLoopCharacteristics"]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        },
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "eventDefinitions",
+          "type": "bpmn:TimerEventDefinition",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvents",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
new file mode 100644
index 0000000..130b594
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
@@ -0,0 +1,1483 @@
+{
+  "name": "Flowable",
+  "uri": "http://flowable.org/bpmn",
+  "prefix": "flowable",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "flowable:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formType",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formReadOnly",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "formInit",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignee",
+      "supperClass": "Element",
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "viewId",
+          "type": "Number",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementType",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "processInstanceName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "inheritBusinessKey",
+          "isAttr": true,
+          "type": "Boolean"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "inheritVariables",
+          "isAttr": true,
+          "type": "Boolean"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["flowable:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "flowable:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Button",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "code",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "isHide",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "next",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Assignee",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "condition",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "operationType",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["flowable:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "flowable:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:ServiceTaskLike",
+          "flowable:ExecutionListener",
+          "flowable:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ChildField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["flowable:AsyncCapable", "bpmn:MultiInstanceLoopCharacteristics"]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        },
+        {
+          "name": "children",
+          "type": "ChildField",
+          "isMany": true
+        },
+        {
+          "name": "extensionElements",
+          "type": "bpmn:ExtensionElements",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Condition",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:SequenceFlow"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "field",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "compare",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "logic",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "AssignStartUserHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+      {
+        "name": "value",
+        "type": "Integer",
+        "isBody": true
+      }
+      ]
+    },
+    {
+      "name": "RejectHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "RejectReturnTaskId",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "String",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "AssignEmptyHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "AssignEmptyUserIds",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "String",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "ButtonsSetting",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "flowable:id",
+          "type": "Integer",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:enable",
+          "type": "Boolean",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:displayName",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FieldsPermission",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "flowable:field",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:title",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:permission",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "BoundaryEventType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:BoundaryEvent"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "TimeoutHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:BoundaryEvent"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "ApproveType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "ApproveMethod",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "CandidateStrategy",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "CandidateParam",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "String",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "SignEnable",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Boolean",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "SkipExpression",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "skipExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ReasonRequire",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Boolean",
+          "isBody": true
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
new file mode 100644
index 0000000..56ef38a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
@@ -0,0 +1,83 @@
+'use strict'
+
+import { some } from 'min-dash'
+
+// const some = require('min-dash').some
+// const some = some
+
+const ALLOWED_TYPES = {
+  FailedJobRetryTimeCycle: [
+    'bpmn:StartEvent',
+    'bpmn:BoundaryEvent',
+    'bpmn:IntermediateCatchEvent',
+    'bpmn:Activity'
+  ],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
+}
+
+function is(element, type) {
+  return element && typeof element.$instanceOf === 'function' && element.$instanceOf(type)
+}
+
+function exists(element) {
+  return element && element.length
+}
+
+function includesType(collection, type) {
+  return (
+    exists(collection) &&
+    some(collection, function (element) {
+      return is(element, type)
+    })
+  )
+}
+
+function anyType(element, types) {
+  return some(types, function (type) {
+    return is(element, type)
+  })
+}
+
+function isAllowed(propName, propDescriptor, newElement) {
+  const name = propDescriptor.name,
+    types = ALLOWED_TYPES[name.replace(/activiti:/, '')]
+
+  return name === propName && anyType(newElement, types)
+}
+
+function ActivitiModdleExtension(eventBus) {
+  eventBus.on(
+    'property.clone',
+    function (context) {
+      const newElement = context.newElement,
+        propDescriptor = context.propertyDescriptor
+
+      this.canCloneProperty(newElement, propDescriptor)
+    },
+    this
+  )
+}
+
+ActivitiModdleExtension.$inject = ['eventBus']
+
+ActivitiModdleExtension.prototype.canCloneProperty = function (newElement, propDescriptor) {
+  if (isAllowed('activiti:FailedJobRetryTimeCycle', propDescriptor, newElement)) {
+    return (
+      includesType(newElement.eventDefinitions, 'bpmn:TimerEventDefinition') ||
+      includesType(newElement.eventDefinitions, 'bpmn:SignalEventDefinition') ||
+      is(newElement.loopCharacteristics, 'bpmn:MultiInstanceLoopCharacteristics')
+    )
+  }
+
+  if (isAllowed('activiti:Connector', propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, 'bpmn:MessageEventDefinition')
+  }
+
+  if (isAllowed('activiti:Field', propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, 'bpmn:MessageEventDefinition')
+  }
+}
+
+// module.exports = ActivitiModdleExtension;
+export default ActivitiModdleExtension
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/index.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/index.js
new file mode 100644
index 0000000..c22ca34
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/index.js
@@ -0,0 +1,11 @@
+/*
+ * @author igdianov
+ * address https://github.com/igdianov/activiti-bpmn-moddle
+ * */
+
+import activitiExtension from './activitiExtension'
+
+export default {
+  __init__: ['ActivitiModdleExtension'],
+  ActivitiModdleExtension: ['type', activitiExtension]
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js
new file mode 100644
index 0000000..b8c37a5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js
@@ -0,0 +1,151 @@
+'use strict'
+
+import { isFunction, isObject, some } from 'min-dash'
+
+// const isFunction = isFunction,
+//   isObject = isObject,
+//   some = some
+// const isFunction = require('min-dash').isFunction,
+//   isObject = require('min-dash').isObject,
+//   some = require('min-dash').some
+
+const WILDCARD = '*'
+
+function CamundaModdleExtension(eventBus) {
+  // eslint-disable-next-line @typescript-eslint/no-this-alias
+  const self = this
+
+  eventBus.on('moddleCopy.canCopyProperty', function (context) {
+    const property = context.property,
+      parent = context.parent
+
+    return self.canCopyProperty(property, parent)
+  })
+}
+
+CamundaModdleExtension.$inject = ['eventBus']
+
+/**
+ * Check wether to disallow copying property.
+ */
+CamundaModdleExtension.prototype.canCopyProperty = function (property, parent) {
+  // (1) check wether property is allowed in parent
+  if (isObject(property) && !isAllowedInParent(property, parent)) {
+    return false
+  }
+
+  // (2) check more complex scenarios
+
+  if (is(property, 'camunda:InputOutput') && !this.canHostInputOutput(parent)) {
+    return false
+  }
+
+  if (isAny(property, ['camunda:Connector', 'camunda:Field']) && !this.canHostConnector(parent)) {
+    return false
+  }
+
+  if (is(property, 'camunda:In') && !this.canHostIn(parent)) {
+    return false
+  }
+}
+
+CamundaModdleExtension.prototype.canHostInputOutput = function (parent) {
+  // allowed in camunda:Connector
+  const connector = getParent(parent, 'camunda:Connector')
+
+  if (connector) {
+    return true
+  }
+
+  // special rules inside bpmn:FlowNode
+  const flowNode = getParent(parent, 'bpmn:FlowNode')
+
+  if (!flowNode) {
+    return false
+  }
+
+  if (isAny(flowNode, ['bpmn:StartEvent', 'bpmn:Gateway', 'bpmn:BoundaryEvent'])) {
+    return false
+  }
+
+  return !(is(flowNode, 'bpmn:SubProcess') && flowNode.get('triggeredByEvent'))
+}
+
+CamundaModdleExtension.prototype.canHostConnector = function (parent) {
+  const serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike')
+
+  if (is(serviceTaskLike, 'bpmn:MessageEventDefinition')) {
+    // only allow on throw and end events
+    return getParent(parent, 'bpmn:IntermediateThrowEvent') || getParent(parent, 'bpmn:EndEvent')
+  }
+
+  return true
+}
+
+CamundaModdleExtension.prototype.canHostIn = function (parent) {
+  const callActivity = getParent(parent, 'bpmn:CallActivity')
+
+  if (callActivity) {
+    return true
+  }
+
+  const signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition')
+
+  if (signalEventDefinition) {
+    // only allow on throw and end events
+    return getParent(parent, 'bpmn:IntermediateThrowEvent') || getParent(parent, 'bpmn:EndEvent')
+  }
+
+  return true
+}
+
+// module.exports = CamundaModdleExtension;
+export default CamundaModdleExtension
+
+// helpers //////////
+
+function is(element, type) {
+  return element && isFunction(element.$instanceOf) && element.$instanceOf(type)
+}
+
+function isAny(element, types) {
+  return some(types, function (t) {
+    return is(element, t)
+  })
+}
+
+function getParent(element, type) {
+  if (!type) {
+    return element.$parent
+  }
+
+  if (is(element, type)) {
+    return element
+  }
+
+  if (!element.$parent) {
+    return
+  }
+
+  return getParent(element.$parent, type)
+}
+
+function isAllowedInParent(property, parent) {
+  // (1) find property descriptor
+  const descriptor = property.$type && property.$model.getTypeDescriptor(property.$type)
+
+  const allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn
+
+  if (!allowedIn || isWildcard(allowedIn)) {
+    return true
+  }
+
+  // (2) check wether property has parent of allowed type
+  return some(allowedIn, function (type) {
+    return getParent(parent, type)
+  })
+}
+
+function isWildcard(allowedIn) {
+  return allowedIn.indexOf(WILDCARD) !== -1
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/index.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/index.js
new file mode 100644
index 0000000..1da1bc7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/index.js
@@ -0,0 +1,8 @@
+'use strict'
+
+import extension from './extension'
+
+export default {
+  __init__: ['camundaModdleExtension'],
+  camundaModdleExtension: ['type', extension]
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/flowableExtension.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
new file mode 100644
index 0000000..3dcea67
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
@@ -0,0 +1,83 @@
+'use strict'
+
+import { some } from 'min-dash'
+
+// const some = some
+// const some = require('min-dash').some
+
+const ALLOWED_TYPES = {
+  FailedJobRetryTimeCycle: [
+    'bpmn:StartEvent',
+    'bpmn:BoundaryEvent',
+    'bpmn:IntermediateCatchEvent',
+    'bpmn:Activity'
+  ],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
+}
+
+function is(element, type) {
+  return element && typeof element.$instanceOf === 'function' && element.$instanceOf(type)
+}
+
+function exists(element) {
+  return element && element.length
+}
+
+function includesType(collection, type) {
+  return (
+    exists(collection) &&
+    some(collection, function (element) {
+      return is(element, type)
+    })
+  )
+}
+
+function anyType(element, types) {
+  return some(types, function (type) {
+    return is(element, type)
+  })
+}
+
+function isAllowed(propName, propDescriptor, newElement) {
+  const name = propDescriptor.name,
+    types = ALLOWED_TYPES[name.replace(/flowable:/, '')]
+
+  return name === propName && anyType(newElement, types)
+}
+
+function FlowableModdleExtension(eventBus) {
+  eventBus.on(
+    'property.clone',
+    function (context) {
+      const newElement = context.newElement,
+        propDescriptor = context.propertyDescriptor
+
+      this.canCloneProperty(newElement, propDescriptor)
+    },
+    this
+  )
+}
+
+FlowableModdleExtension.$inject = ['eventBus']
+
+FlowableModdleExtension.prototype.canCloneProperty = function (newElement, propDescriptor) {
+  if (isAllowed('flowable:FailedJobRetryTimeCycle', propDescriptor, newElement)) {
+    return (
+      includesType(newElement.eventDefinitions, 'bpmn:TimerEventDefinition') ||
+      includesType(newElement.eventDefinitions, 'bpmn:SignalEventDefinition') ||
+      is(newElement.loopCharacteristics, 'bpmn:MultiInstanceLoopCharacteristics')
+    )
+  }
+
+  if (isAllowed('flowable:Connector', propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, 'bpmn:MessageEventDefinition')
+  }
+
+  if (isAllowed('flowable:Field', propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, 'bpmn:MessageEventDefinition')
+  }
+}
+
+// module.exports = FlowableModdleExtension;
+export default FlowableModdleExtension
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/index.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/index.js
new file mode 100644
index 0000000..6d59b67
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/index.js
@@ -0,0 +1,10 @@
+/*
+ * @author igdianov
+ * address https://github.com/igdianov/activiti-bpmn-moddle
+ * */
+import flowableExtension from './flowableExtension'
+
+export default {
+  __init__: ['FlowableModdleExtension'],
+  FlowableModdleExtension: ['type', flowableExtension]
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js
new file mode 100644
index 0000000..788e4d1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js
@@ -0,0 +1,233 @@
+import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider'
+import { assign } from 'min-dash'
+
+export default function CustomPalette(
+  palette,
+  create,
+  elementFactory,
+  spaceTool,
+  lassoTool,
+  handTool,
+  globalConnect,
+  translate
+) {
+  PaletteProvider.call(
+    this,
+    palette,
+    create,
+    elementFactory,
+    spaceTool,
+    lassoTool,
+    handTool,
+    globalConnect,
+    translate,
+    2000
+  )
+}
+
+const F = function () {} // 核心，利用空对象作为中介；
+F.prototype = PaletteProvider.prototype // 核心，将父类的原型赋值给空对象F；
+
+// 利用中介函数重写原型链方法
+F.prototype.getPaletteEntries = function () {
+  const actions = {},
+    create = this._create,
+    elementFactory = this._elementFactory,
+    spaceTool = this._spaceTool,
+    lassoTool = this._lassoTool,
+    handTool = this._handTool,
+    globalConnect = this._globalConnect,
+    translate = this._translate
+
+  function createAction(type, group, className, title, options) {
+    function createListener(event) {
+      const shape = elementFactory.createShape(assign({ type: type }, options))
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded
+      }
+
+      create.start(event, shape)
+    }
+
+    const shortType = type.replace(/^bpmn:/, '')
+
+    return {
+      group: group,
+      className: className,
+      title: title || translate('Create {type}', { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener
+      }
+    }
+  }
+
+  function createSubprocess(event) {
+    const subProcess = elementFactory.createShape({
+      type: 'bpmn:SubProcess',
+      x: 0,
+      y: 0,
+      isExpanded: true
+    })
+
+    const startEvent = elementFactory.createShape({
+      type: 'bpmn:StartEvent',
+      x: 40,
+      y: 82,
+      parent: subProcess
+    })
+
+    create.start(event, [subProcess, startEvent], {
+      hints: {
+        autoSelect: [startEvent]
+      }
+    })
+  }
+
+  function createParticipant(event) {
+    create.start(event, elementFactory.createParticipantShape())
+  }
+
+  assign(actions, {
+    'hand-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-hand-tool',
+      title: '激活抓手工具',
+      // title: translate("Activate the hand tool"),
+      action: {
+        click: function (event) {
+          handTool.activateHand(event)
+        }
+      }
+    },
+    'lasso-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-lasso-tool',
+      title: translate('Activate the lasso tool'),
+      action: {
+        click: function (event) {
+          lassoTool.activateSelection(event)
+        }
+      }
+    },
+    'space-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-space-tool',
+      title: translate('Activate the create/remove space tool'),
+      action: {
+        click: function (event) {
+          spaceTool.activateSelection(event)
+        }
+      }
+    },
+    'global-connect-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-connection-multi',
+      title: translate('Activate the global connect tool'),
+      action: {
+        click: function (event) {
+          globalConnect.toggle(event)
+        }
+      }
+    },
+    'tool-separator': {
+      group: 'tools',
+      separator: true
+    },
+    'create.start-event': createAction(
+      'bpmn:StartEvent',
+      'event',
+      'bpmn-icon-start-event-none',
+      translate('Create StartEvent')
+    ),
+    'create.intermediate-event': createAction(
+      'bpmn:IntermediateThrowEvent',
+      'event',
+      'bpmn-icon-intermediate-event-none',
+      translate('Create Intermediate/Boundary Event')
+    ),
+    'create.end-event': createAction(
+      'bpmn:EndEvent',
+      'event',
+      'bpmn-icon-end-event-none',
+      translate('Create EndEvent')
+    ),
+    'create.exclusive-gateway': createAction(
+      'bpmn:ExclusiveGateway',
+      'gateway',
+      'bpmn-icon-gateway-none',
+      translate('Create Gateway')
+    ),
+    'create.user-task': createAction(
+      'bpmn:UserTask',
+      'activity',
+      'bpmn-icon-user-task',
+      translate('Create User Task')
+    ),
+    'create.call-activity': createAction(
+      'bpmn:CallActivity',
+      'activity',
+      'bpmn-icon-call-activity',
+      translate('Create Call Activity')
+    ),
+    'create.service-task': createAction(
+      'bpmn:ServiceTask',
+      'activity',
+      'bpmn-icon-service',
+      translate('Create Service Task')
+    ),
+    'create.data-object': createAction(
+      'bpmn:DataObjectReference',
+      'data-object',
+      'bpmn-icon-data-object',
+      translate('Create DataObjectReference')
+    ),
+    'create.data-store': createAction(
+      'bpmn:DataStoreReference',
+      'data-store',
+      'bpmn-icon-data-store',
+      translate('Create DataStoreReference')
+    ),
+    'create.subprocess-expanded': {
+      group: 'activity',
+      className: 'bpmn-icon-subprocess-expanded',
+      title: translate('Create expanded SubProcess'),
+      action: {
+        dragstart: createSubprocess,
+        click: createSubprocess
+      }
+    },
+    'create.participant-expanded': {
+      group: 'collaboration',
+      className: 'bpmn-icon-participant',
+      title: translate('Create Pool/Participant'),
+      action: {
+        dragstart: createParticipant,
+        click: createParticipant
+      }
+    },
+    'create.group': createAction(
+      'bpmn:Group',
+      'artifact',
+      'bpmn-icon-group',
+      translate('Create Group')
+    )
+  })
+
+  return actions
+}
+
+CustomPalette.$inject = [
+  'palette',
+  'create',
+  'elementFactory',
+  'spaceTool',
+  'lassoTool',
+  'handTool',
+  'globalConnect',
+  'translate'
+]
+
+CustomPalette.prototype = new F() // 核心，将 F的实例赋值给子类；
+CustomPalette.prototype.constructor = CustomPalette // 修复子类CustomPalette的构造器指向，防止原型链的混乱；
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/palette/index.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/palette/index.js
new file mode 100644
index 0000000..8e4f3ac
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/palette/index.js
@@ -0,0 +1,22 @@
+// import PaletteModule from "diagram-js/lib/features/palette";
+// import CreateModule from "diagram-js/lib/features/create";
+// import SpaceToolModule from "diagram-js/lib/features/space-tool";
+// import LassoToolModule from "diagram-js/lib/features/lasso-tool";
+// import HandToolModule from "diagram-js/lib/features/hand-tool";
+// import GlobalConnectModule from "diagram-js/lib/features/global-connect";
+// import translate from "diagram-js/lib/i18n/translate";
+//
+// import PaletteProvider from "./paletteProvider";
+//
+// export default {
+//   __depends__: [PaletteModule, CreateModule, SpaceToolModule, LassoToolModule, HandToolModule, GlobalConnectModule, translate],
+//   __init__: ["paletteProvider"],
+//   paletteProvider: ["type", PaletteProvider]
+// };
+
+import CustomPalette from './CustomPalette'
+
+export default {
+  __init__: ['paletteProvider'],
+  paletteProvider: ['type', CustomPalette]
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js
new file mode 100644
index 0000000..304875c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js
@@ -0,0 +1,219 @@
+import { assign } from 'min-dash'
+
+/**
+ * A palette provider for BPMN 2.0 elements.
+ */
+export default function PaletteProvider(
+  palette,
+  create,
+  elementFactory,
+  spaceTool,
+  lassoTool,
+  handTool,
+  globalConnect,
+  translate
+) {
+  this._palette = palette
+  this._create = create
+  this._elementFactory = elementFactory
+  this._spaceTool = spaceTool
+  this._lassoTool = lassoTool
+  this._handTool = handTool
+  this._globalConnect = globalConnect
+  this._translate = translate
+
+  palette.registerProvider(this)
+}
+
+PaletteProvider.$inject = [
+  'palette',
+  'create',
+  'elementFactory',
+  'spaceTool',
+  'lassoTool',
+  'handTool',
+  'globalConnect',
+  'translate'
+]
+
+PaletteProvider.prototype.getPaletteEntries = function () {
+  const actions = {},
+    create = this._create,
+    elementFactory = this._elementFactory,
+    spaceTool = this._spaceTool,
+    lassoTool = this._lassoTool,
+    handTool = this._handTool,
+    globalConnect = this._globalConnect,
+    translate = this._translate
+
+  function createAction(type, group, className, title, options) {
+    function createListener(event) {
+      const shape = elementFactory.createShape(assign({ type: type }, options))
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded
+      }
+
+      create.start(event, shape)
+    }
+
+    const shortType = type.replace(/^bpmn:/, '')
+
+    return {
+      group: group,
+      className: className,
+      title: title || translate('Create {type}', { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener
+      }
+    }
+  }
+
+  function createSubprocess(event) {
+    const subProcess = elementFactory.createShape({
+      type: 'bpmn:SubProcess',
+      x: 0,
+      y: 0,
+      isExpanded: true
+    })
+
+    const startEvent = elementFactory.createShape({
+      type: 'bpmn:StartEvent',
+      x: 40,
+      y: 82,
+      parent: subProcess
+    })
+
+    create.start(event, [subProcess, startEvent], {
+      hints: {
+        autoSelect: [startEvent]
+      }
+    })
+  }
+
+  function createParticipant(event) {
+    create.start(event, elementFactory.createParticipantShape())
+  }
+
+  assign(actions, {
+    'hand-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-hand-tool',
+      title: translate('Activate the hand tool'),
+      action: {
+        click: function (event) {
+          handTool.activateHand(event)
+        }
+      }
+    },
+    'lasso-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-lasso-tool',
+      title: translate('Activate the lasso tool'),
+      action: {
+        click: function (event) {
+          lassoTool.activateSelection(event)
+        }
+      }
+    },
+    'space-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-space-tool',
+      title: translate('Activate the create/remove space tool'),
+      action: {
+        click: function (event) {
+          spaceTool.activateSelection(event)
+        }
+      }
+    },
+    'global-connect-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-connection-multi',
+      title: translate('Activate the global connect tool'),
+      action: {
+        click: function (event) {
+          globalConnect.toggle(event)
+        }
+      }
+    },
+    'tool-separator': {
+      group: 'tools',
+      separator: true
+    },
+    'create.start-event': createAction(
+      'bpmn:StartEvent',
+      'event',
+      'bpmn-icon-start-event-none',
+      translate('Create StartEvent')
+    ),
+    'create.intermediate-event': createAction(
+      'bpmn:IntermediateThrowEvent',
+      'event',
+      'bpmn-icon-intermediate-event-none',
+      translate('Create Intermediate/Boundary Event')
+    ),
+    'create.end-event': createAction(
+      'bpmn:EndEvent',
+      'event',
+      'bpmn-icon-end-event-none',
+      translate('Create EndEvent')
+    ),
+    'create.exclusive-gateway': createAction(
+      'bpmn:ExclusiveGateway',
+      'gateway',
+      'bpmn-icon-gateway-none',
+      translate('Create Gateway')
+    ),
+    'create.user-task': createAction(
+      'bpmn:UserTask',
+      'activity',
+      'bpmn-icon-user-task',
+      translate('Create User Task')
+    ),
+    'create.service-task': createAction(
+      'bpmn:ServiceTask',
+      'activity',
+      'bpmn-icon-service',
+      translate('Create Service Task')
+    ),
+    'create.data-object': createAction(
+      'bpmn:DataObjectReference',
+      'data-object',
+      'bpmn-icon-data-object',
+      translate('Create DataObjectReference')
+    ),
+    'create.data-store': createAction(
+      'bpmn:DataStoreReference',
+      'data-store',
+      'bpmn-icon-data-store',
+      translate('Create DataStoreReference')
+    ),
+    'create.subprocess-expanded': {
+      group: 'activity',
+      className: 'bpmn-icon-subprocess-expanded',
+      title: translate('Create expanded SubProcess'),
+      action: {
+        dragstart: createSubprocess,
+        click: createSubprocess
+      }
+    },
+    'create.participant-expanded': {
+      group: 'collaboration',
+      className: 'bpmn-icon-participant',
+      title: translate('Create Pool/Participant'),
+      action: {
+        dragstart: createParticipant,
+        click: createParticipant
+      }
+    },
+    'create.group': createAction(
+      'bpmn:Group',
+      'artifact',
+      'bpmn-icon-group',
+      translate('Create Group')
+    )
+  })
+
+  return actions
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/translate/customTranslate.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/translate/customTranslate.js
new file mode 100644
index 0000000..c1b99e1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/translate/customTranslate.js
@@ -0,0 +1,44 @@
+// import translations from "./zh";
+//
+// export default function customTranslate(template, replacements) {
+//   replacements = replacements || {};
+//
+//   // Translate
+//   template = translations[template] || template;
+//
+//   // Replace
+//   return template.replace(/{([^}]+)}/g, function(_, key) {
+//     let str = replacements[key];
+//     if (
+//       translations[replacements[key]] !== null &&
+//       translations[replacements[key]] !== "undefined"
+//     ) {
+//       // eslint-disable-next-line no-mixed-spaces-and-tabs
+//       str = translations[replacements[key]];
+//       // eslint-disable-next-line no-mixed-spaces-and-tabs
+//     }
+//     return str || "{" + key + "}";
+//   });
+// }
+
+export default function customTranslate(translations) {
+  return function (template, replacements) {
+    replacements = replacements || {}
+    // Translate
+    template = translations[template] || template
+
+    // Replace
+    return template.replace(/{([^}]+)}/g, function (_, key) {
+      let str = replacements[key]
+      if (
+        translations[replacements[key]] !== null &&
+        translations[replacements[key]] !== undefined
+      ) {
+        // eslint-disable-next-line no-mixed-spaces-and-tabs
+        str = translations[replacements[key]]
+        // eslint-disable-next-line no-mixed-spaces-and-tabs
+      }
+      return str || '{' + key + '}'
+    })
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/translate/zh.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/translate/zh.js
new file mode 100644
index 0000000..cb92041
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/designer/plugins/translate/zh.js
@@ -0,0 +1,242 @@
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  // 添加部分
+  'Append EndEvent': '追加结束事件',
+  'Append Gateway': '追加网关',
+  'Append Task': '追加任务',
+  'Append Intermediate/Boundary Event': '追加中间抛出事件/边界事件',
+
+  'Activate the global connect tool': '激活全局连接工具',
+  'Append {type}': '添加 {type}',
+  'Add Lane above': '在上面添加道',
+  'Divide into two Lanes': '分割成两个道',
+  'Divide into three Lanes': '分割成三个道',
+  'Add Lane below': '在下面添加道',
+  'Append compensation activity': '追加补偿活动',
+  'Change type': '修改类型',
+  'Connect using Association': '使用关联连接',
+  'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
+  'Connect using DataInputAssociation': '使用数据输入关联连接',
+  Remove: '移除',
+  'Activate the hand tool': '激活抓手工具',
+  'Activate the lasso tool': '激活套索工具',
+  'Activate the create/remove space tool': '激活创建/删除空间工具',
+  'Create expanded SubProcess': '创建扩展子过程',
+  'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
+  'Create Pool/Participant': '创建池/参与者',
+  'Parallel Multi Instance': '并行多重事件',
+  'Sequential Multi Instance': '时序多重事件',
+  DataObjectReference: '数据对象参考',
+  DataStoreReference: '数据存储参考',
+  Loop: '循环',
+  'Ad-hoc': '即席',
+  'Create {type}': '创建 {type}',
+  Task: '任务',
+  'Send Task': '发送任务',
+  'Receive Task': '接收任务',
+  'User Task': '用户任务',
+  'Manual Task': '手工任务',
+  'Business Rule Task': '业务规则任务',
+  'Service Task': '服务任务',
+  'Script Task': '脚本任务',
+  'Call Activity': '调用活动',
+  'Sub Process (collapsed)': '子流程（折叠的）',
+  'Sub Process (expanded)': '子流程（展开的）',
+  'Start Event': '开始事件',
+  StartEvent: '开始事件',
+  'Intermediate Throw Event': '中间事件',
+  'End Event': '结束事件',
+  EndEvent: '结束事件',
+  'Create StartEvent': '创建开始事件',
+  'Create EndEvent': '创建结束事件',
+  'Create Task': '创建任务',
+  'Create User Task': '创建用户任务',
+  'Create Call Activity': '创建调用活动',
+  'Create Service Task': '创建服务任务',
+  'Create Gateway': '创建网关',
+  'Create DataObjectReference': '创建数据对象',
+  'Create DataStoreReference': '创建数据存储',
+  'Create Group': '创建分组',
+  'Create Intermediate/Boundary Event': '创建中间/边界事件',
+  'Message Start Event': '消息开始事件',
+  'Timer Start Event': '定时开始事件',
+  'Conditional Start Event': '条件开始事件',
+  'Signal Start Event': '信号开始事件',
+  'Error Start Event': '错误开始事件',
+  'Escalation Start Event': '升级开始事件',
+  'Compensation Start Event': '补偿开始事件',
+  'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
+  'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
+  'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
+  'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
+  'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
+  'Message Intermediate Catch Event': '消息中间捕获事件',
+  'Message Intermediate Throw Event': '消息中间抛出事件',
+  'Timer Intermediate Catch Event': '定时中间捕获事件',
+  'Escalation Intermediate Throw Event': '升级中间抛出事件',
+  'Conditional Intermediate Catch Event': '条件中间捕获事件',
+  'Link Intermediate Catch Event': '链接中间捕获事件',
+  'Link Intermediate Throw Event': '链接中间抛出事件',
+  'Compensation Intermediate Throw Event': '补偿中间抛出事件',
+  'Signal Intermediate Catch Event': '信号中间捕获事件',
+  'Signal Intermediate Throw Event': '信号中间抛出事件',
+  'Message End Event': '消息结束事件',
+  'Escalation End Event': '定时结束事件',
+  'Error End Event': '错误结束事件',
+  'Cancel End Event': '取消结束事件',
+  'Compensation End Event': '补偿结束事件',
+  'Signal End Event': '信号结束事件',
+  'Terminate End Event': '终止结束事件',
+  'Message Boundary Event': '消息边界事件',
+  'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
+  'Timer Boundary Event': '定时边界事件',
+  'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
+  'Escalation Boundary Event': '升级边界事件',
+  'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
+  'Conditional Boundary Event': '条件边界事件',
+  'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
+  'Error Boundary Event': '错误边界事件',
+  'Cancel Boundary Event': '取消边界事件',
+  'Signal Boundary Event': '信号边界事件',
+  'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
+  'Compensation Boundary Event': '补偿边界事件',
+  'Exclusive Gateway': '互斥网关',
+  'Parallel Gateway': '并行网关',
+  'Inclusive Gateway': '相容网关',
+  'Complex Gateway': '复杂网关',
+  'Event based Gateway': '事件网关',
+  Transaction: '转运',
+  'Sub Process': '子流程',
+  'Event Sub Process': '事件子流程',
+  'Collapsed Pool': '折叠池',
+  'Expanded Pool': '展开池',
+
+  // Errors
+  'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
+  'no shape type specified': '没有指定的形状类型',
+  'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
+  'out of bounds release': 'out of bounds release',
+  'more than {count} child lanes': '子道大于{count} ',
+  'element required': '元素不能为空',
+  'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
+  'no diagram to display': '没有可展示的流程图',
+  'no process or collaboration to display': '没有可展示的流程/协作',
+  'element {element} referenced by {referenced}#{property} not yet drawn':
+    '由{referenced}#{property}引用的{element}元素仍未绘制',
+  'already rendered {element}': '{element} 已被渲染',
+  'failed to import {element}': '导入{element}失败',
+  //属性面板的参数
+  Id: '编号',
+  Name: '名称',
+  General: '常规',
+  Details: '详情',
+  'Message Name': '消息名称',
+  Message: '消息',
+  Initiator: '创建者',
+  'Asynchronous Continuations': '持续异步',
+  'Asynchronous Before': '异步前',
+  'Asynchronous After': '异步后',
+  'Job Configuration': '工作配置',
+  Exclusive: '排除',
+  'Job Priority': '工作优先级',
+  'Retry Time Cycle': '重试时间周期',
+  Documentation: '文档',
+  'Element Documentation': '元素文档',
+  'History Configuration': '历史配置',
+  'History Time To Live': '历史的生存时间',
+  Forms: '表单',
+  'Form Key': '表单key',
+  'Form Fields': '表单字段',
+  'Business Key': '业务key',
+  'Form Field': '表单字段',
+  ID: '编号',
+  Type: '类型',
+  Label: '名称',
+  'Default Value': '默认值',
+  'Default Flow': '默认流转路径',
+  'Conditional Flow': '条件流转路径',
+  'Sequence Flow': '普通流转路径',
+  Validation: '校验',
+  'Add Constraint': '添加约束',
+  Config: '配置',
+  Properties: '属性',
+  'Add Property': '添加属性',
+  Value: '值',
+  Listeners: '监听器',
+  'Execution Listener': '执行监听',
+  'Event Type': '事件类型',
+  'Listener Type': '监听器类型',
+  'Java Class': 'Java类',
+  Expression: '表达式',
+  'Must provide a value': '必须提供一个值',
+  'Delegate Expression': '代理表达式',
+  Script: '脚本',
+  'Script Format': '脚本格式',
+  'Script Type': '脚本类型',
+  'Inline Script': '内联脚本',
+  'External Script': '外部脚本',
+  Resource: '资源',
+  'Field Injection': '字段注入',
+  Extensions: '扩展',
+  'Input/Output': '输入/输出',
+  'Input Parameters': '输入参数',
+  'Output Parameters': '输出参数',
+  Parameters: '参数',
+  'Output Parameter': '输出参数',
+  'Timer Definition Type': '定时器定义类型',
+  'Timer Definition': '定时器定义',
+  Date: '日期',
+  Duration: '持续',
+  Cycle: '循环',
+  Signal: '信号',
+  'Signal Name': '信号名称',
+  Escalation: '升级',
+  Error: '错误',
+  'Link Name': '链接名称',
+  Condition: '条件名称',
+  'Variable Name': '变量名称',
+  'Variable Event': '变量事件',
+  'Specify more than one variable change event as a comma separated list.':
+    '多个变量事件以逗号隔开',
+  'Wait for Completion': '等待完成',
+  'Activity Ref': '活动参考',
+  'Version Tag': '版本标签',
+  Executable: '可执行文件',
+  'External Task Configuration': '扩展任务配置',
+  'Task Priority': '任务优先级',
+  External: '外部',
+  Connector: '连接器',
+  'Must configure Connector': '必须配置连接器',
+  'Connector Id': '连接器编号',
+  Implementation: '实现方式',
+  'Field Injections': '字段注入',
+  Fields: '字段',
+  'Result Variable': '结果变量',
+  Topic: '主题',
+  'Configure Connector': '配置连接器',
+  'Input Parameter': '输入参数',
+  Assignee: '代理人',
+  'Candidate Users': '候选用户',
+  'Candidate Groups': '候选组',
+  'Due Date': '到期时间',
+  'Follow Up Date': '跟踪日期',
+  Priority: '优先级',
+  'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
+    '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
+    '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  Variables: '变量',
+  'Candidate Starter Configuration': '候选人起动器配置',
+  'Candidate Starter Groups': '候选人起动器组',
+  'This maps to the process definition key.': '这映射到流程定义键。',
+  'Candidate Starter Users': '候选人起动器的用户',
+  'Specify more than one user as a comma separated list.': '指定多个用户作为逗号分隔的列表。',
+  'Tasklist Configuration': 'Tasklist配置',
+  Startable: '启动',
+  'Specify more than one group as a comma separated list.': '指定多个组作为逗号分隔的列表。'
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/index.ts b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/index.ts
new file mode 100644
index 0000000..ce44a3c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/index.ts
@@ -0,0 +1,11 @@
+import MyProcessDesigner from './designer'
+import MyProcessPenal from './penal'
+import MyProcessViewer from './designer/index2'
+
+import './theme/index.scss'
+import 'bpmn-js/dist/assets/diagram-js.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+
+export { MyProcessDesigner, MyProcessPenal, MyProcessViewer }
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue
new file mode 100644
index 0000000..ba97d96
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="my-process-palette">
+    <div class="test-button" @click="addTask" @mousedown="addTask">测试任务</div>
+    <div class="test-container" id="palette-container">1</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { assign } from 'min-dash'
+
+defineOptions({ name: 'MyProcessPalette' })
+
+const bpmnInstances = () => (window as any).bpmnInstances
+const addTask = (event, options: any = {}) => {
+  const ElementFactory = bpmnInstances().elementFactory
+  const create = bpmnInstances().modeler.get('create')
+
+  console.log(ElementFactory, create)
+
+  const shape = ElementFactory.createShape(assign({ type: 'bpmn:UserTask' }, options))
+
+  if (options) {
+    shape.businessObject.di.isExpanded = options.isExpanded
+  }
+
+  console.log(event, 'event')
+  console.log(shape, 'shape')
+  create.start(event, shape)
+}
+</script>
+
+<style scoped lang="scss">
+.my-process-palette {
+  padding: 80px 20px 20px;
+  box-sizing: border-box;
+
+  .test-button {
+    padding: 8px 16px;
+    cursor: pointer;
+    border: 1px solid rgb(24 144 255 / 80%);
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
new file mode 100644
index 0000000..ff08dd3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -0,0 +1,258 @@
+<template>
+  <div class="process-panel__container" :style="{ width: `${width}px`, maxHeight: '600px' }">
+    <el-collapse v-model="activeTab" v-if="isReady">
+      <el-collapse-item name="base">
+        <!-- class="panel-tab__title" -->
+        <template #title>
+          <Icon icon="ep:info-filled" />
+          常规</template
+        >
+        <ElementBaseInfo
+          :id-edit-disabled="idEditDisabled"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+          :model="model"
+        />
+      </el-collapse-item>
+      <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
+        <template #title><Icon icon="ep:comment" />消息与信号</template>
+        <signal-and-massage />
+      </el-collapse-item>
+      <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
+        <template #title><Icon icon="ep:promotion" />流转条件</template>
+        <flow-condition :business-object="elementBusinessObject" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="condition" v-if="formVisible" key="form">
+        <template #title><Icon icon="ep:list" />表单</template>
+        <element-form :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="task" v-if="isTaskCollapseItemShow(elementType)" key="task">
+        <template #title
+          ><Icon icon="ep:checked" />{{ getTaskCollapseItemName(elementType) }}</template
+        >
+        <element-task :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item
+        name="multiInstance"
+        v-if="elementType.indexOf('Task') !== -1"
+        key="multiInstance"
+      >
+        <template #title><Icon icon="ep:help-filled" />多人审批方式</template>
+        <element-multi-instance
+          :id="elementId"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </el-collapse-item>
+      <el-collapse-item name="listeners" key="listeners">
+        <template #title><Icon icon="ep:bell-filled" />执行监听器</template>
+        <element-listeners :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
+        <template #title><Icon icon="ep:bell-filled" />任务监听器</template>
+        <user-task-listeners :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="extensions" key="extensions">
+        <template #title><Icon icon="ep:circle-plus-filled" />扩展属性</template>
+        <element-properties :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="other" key="other">
+        <template #title><Icon icon="ep:promotion" />其他</template>
+        <element-other-config :id="elementId" />
+      </el-collapse-item>
+      <el-collapse-item name="customConfig" key="customConfig">
+        <template #title><Icon icon="ep:tools" />自定义配置</template>
+        <element-custom-config
+          :id="elementId"
+          :type="elementType"
+          :business-object="elementBusinessObject"
+        />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script lang="ts" setup>
+import ElementBaseInfo from './base/ElementBaseInfo.vue'
+import ElementOtherConfig from './other/ElementOtherConfig.vue'
+import ElementTask from './task/ElementTask.vue'
+import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue'
+import FlowCondition from './flow-condition/FlowCondition.vue'
+import SignalAndMassage from './signal-message/SignalAndMessage.vue'
+import ElementListeners from './listeners/ElementListeners.vue'
+import ElementProperties from './properties/ElementProperties.vue'
+// import ElementForm from './form/ElementForm.vue'
+import UserTaskListeners from './listeners/UserTaskListeners.vue'
+import { getTaskCollapseItemName, isTaskCollapseItemShow } from './task/data'
+
+defineOptions({ name: 'MyPropertiesPanel' })
+
+/**
+ * 侧边栏
+ * @Author MiyueFE
+ * @Home https://github.com/miyuesc
+ * @Date 2021年3月31日18:57:51
+ */
+const props = defineProps({
+  bpmnModeler: {
+    type: Object,
+    default: () => {}
+  },
+  prefix: {
+    type: String,
+    default: 'camunda'
+  },
+  width: {
+    type: Number,
+    default: 480
+  },
+  idEditDisabled: {
+    type: Boolean,
+    default: false
+  },
+  model: Object // 流程模型的数据
+})
+
+const activeTab = ref('base')
+const elementId = ref('')
+const elementType = ref('')
+const elementBusinessObject = ref<any>({}) // 元素 businessObject 镜像，提供给需要做判断的组件使用
+const conditionFormVisible = ref(false) // 流转条件设置
+const formVisible = ref(false) // 表单配置
+const bpmnElement = ref()
+const isReady = ref(false)
+
+provide('prefix', props.prefix)
+provide('width', props.width)
+
+// 初始化 bpmnInstances
+const initBpmnInstances = () => {
+  if (!props.bpmnModeler) return false
+  try {
+    const instances = {
+      modeler: props.bpmnModeler,
+      modeling: props.bpmnModeler.get('modeling'),
+      moddle: props.bpmnModeler.get('moddle'),
+      eventBus: props.bpmnModeler.get('eventBus'),
+      bpmnFactory: props.bpmnModeler.get('bpmnFactory'),
+      elementFactory: props.bpmnModeler.get('elementFactory'),
+      elementRegistry: props.bpmnModeler.get('elementRegistry'),
+      replace: props.bpmnModeler.get('replace'),
+      selection: props.bpmnModeler.get('selection')
+    }
+
+    // 检查所有实例是否都存在
+    const allInstancesExist = Object.values(instances).every(instance => instance)
+    if (allInstancesExist) {
+      const w = window as any
+      w.bpmnInstances = instances
+      return true
+    }
+    return false
+  } catch (error) {
+    console.error('初始化 bpmnInstances 失败:', error)
+    return false
+  }
+}
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+// 监听 props.bpmnModeler 然后 initModels
+const unwatchBpmn = watch(
+  () => props.bpmnModeler,
+  async () => {
+    // 避免加载时 流程图 并未加载完成
+    if (!props.bpmnModeler) {
+      console.log('缺少props.bpmnModeler')
+      return
+    }
+
+    try {
+      // 等待 modeler 初始化完成
+      await nextTick()
+      if (initBpmnInstances()) {
+        isReady.value = true
+        await nextTick()
+        getActiveElement()
+      } else {
+        console.error('modeler 实例未完全初始化')
+      }
+    } catch (error) {
+      console.error('初始化失败:', error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+const getActiveElement = () => {
+  if (!isReady.value || !props.bpmnModeler) return
+
+  // 初始第一个选中元素 bpmn:Process
+  initFormOnChanged(null)
+  props.bpmnModeler.on('import.done', (e) => {
+    console.log(e, 'eeeee')
+    initFormOnChanged(null)
+  })
+  // 监听选择事件，修改当前激活的元素以及表单
+  props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
+    initFormOnChanged(newSelection[0] || null)
+  })
+  props.bpmnModeler.on('element.changed', ({ element }) => {
+    // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
+    if (element && element.id === elementId.value) {
+      initFormOnChanged(element)
+    }
+  })
+}
+
+// 初始化数据
+const initFormOnChanged = (element) => {
+  if (!isReady.value || !bpmnInstances()) return
+
+  let activatedElement = element
+  if (!activatedElement) {
+    activatedElement =
+      bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Process') ??
+      bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Collaboration')
+  }
+  if (!activatedElement) return
+
+  try {
+    console.log(`
+                ----------
+        select element changed:
+                  id:  ${activatedElement.id}
+                type:  ${activatedElement.businessObject.$type}
+                ----------
+                `)
+    console.log('businessObject: ', activatedElement.businessObject)
+    bpmnInstances().bpmnElement = activatedElement
+    bpmnElement.value = activatedElement
+    elementId.value = activatedElement.id
+    elementType.value = activatedElement.type.split(':')[1] || ''
+    elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
+    conditionFormVisible.value = !!(
+      elementType.value === 'SequenceFlow' &&
+      activatedElement.source &&
+      activatedElement.source.type.indexOf('StartEvent') === -1
+    )
+    formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
+  } catch (error) {
+    console.error('初始化表单数据失败:', error)
+  }
+}
+
+onBeforeUnmount(() => {
+  const w = window as any
+  w.bpmnInstances = null
+  isReady.value = false
+})
+
+watch(
+  () => elementId.value,
+  () => {
+    activeTab.value = 'base'
+  }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
new file mode 100644
index 0000000..3172338
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form label-width="90px" :model="needProps" :rules="rules">
+      <div v-if="needProps.type == 'bpmn:Process'">
+        <!-- 如果是 Process 信息的时候，使用自定义表单 -->
+        <el-form-item label="流程标识" prop="id">
+          <el-input
+            v-model="needProps.id"
+            placeholder="请输入流标标识"
+            :disabled="needProps.id !== undefined && needProps.id.length > 0"
+            @change="handleKeyUpdate"
+          />
+        </el-form-item>
+        <el-form-item label="流程名称" prop="name">
+          <el-input
+            v-model="needProps.name"
+            placeholder="请输入流程名称"
+            clearable
+            @change="handleNameUpdate"
+          />
+        </el-form-item>
+      </div>
+      <div v-else>
+        <el-form-item label="ID">
+          <el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" />
+        </el-form-item>
+        <el-form-item label="名称">
+          <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'ElementBaseInfo' })
+
+const props = defineProps({
+  businessObject: {
+    type: Object,
+    default: () => {}
+  },
+  model: {
+    type: Object,
+    default: () => {}
+  }
+})
+const needProps = ref<any>({})
+const bpmnElement = ref()
+const elementBaseInfo = ref<any>({})
+// 流程表单的下拉框的数据
+// const forms = ref([])
+// 流程模型的校验
+const rules = reactive({
+  id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
+})
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+const resetBaseInfo = () => {
+  console.log(window, 'window')
+  console.log(bpmnElement.value, 'bpmnElement')
+
+  bpmnElement.value = bpmnInstances()?.bpmnElement
+  // console.log(bpmnElement.value, 'resetBaseInfo11111111111')
+  elementBaseInfo.value = bpmnElement.value.businessObject
+  needProps.value['type'] = bpmnElement.value.businessObject.$type
+  // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
+
+  // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
+  // console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
+}
+const handleKeyUpdate = (value) => {
+  // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
+  if (!value) {
+    return
+  }
+  if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
+    console.log('key 不满足 XML NCName 规则，所以不进行赋值')
+    return
+  }
+  console.log('key 满足 XML NCName 规则，所以进行赋值')
+
+  // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
+  elementBaseInfo.value['id'] = value
+
+  setTimeout(() => {
+    updateBaseInfo('id')
+  }, 100)
+}
+const handleNameUpdate = (value) => {
+  console.log(elementBaseInfo, 'elementBaseInfo')
+  if (!value) {
+    return
+  }
+  elementBaseInfo.value['name'] = value
+
+  setTimeout(() => {
+    updateBaseInfo('name')
+  }, 100)
+}
+// const handleDescriptionUpdate=(value)=> {
+// TODO 芋艿：documentation 暂时无法修改，后续在看看
+// this.elementBaseInfo['documentation'] = value;
+// this.updateBaseInfo('documentation');
+// }
+const updateBaseInfo = (key) => {
+  console.log(key, 'key')
+  // 触发 elementBaseInfo 对应的字段
+  const attrObj = Object.create(null)
+  // console.log(attrObj, 'attrObj')
+  attrObj[key] = elementBaseInfo.value[key]
+  // console.log(attrObj, 'attrObj111')
+  // const attrObj = {
+  //   id: elementBaseInfo.value[key]
+  //   // di: { id: `${elementBaseInfo.value[key]}_di` }
+  // }
+  // console.log(elementBaseInfo, 'elementBaseInfo11111111111')
+  needProps.value = { ...elementBaseInfo.value, ...needProps.value }
+
+  if (key === 'id') {
+    // console.log('jinru')
+    console.log(window, 'window')
+    console.log(bpmnElement.value, 'bpmnElement')
+    console.log(toRaw(bpmnElement.value), 'bpmnElement')
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      id: elementBaseInfo.value[key],
+      di: { id: `${elementBaseInfo.value[key]}_di` }
+    })
+  } else {
+    console.log(attrObj, 'attrObj')
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
+  }
+}
+
+watch(
+  () => props.businessObject,
+  (val) => {
+    // console.log(val, 'val11111111111111111111')
+    if (val) {
+      // nextTick(() => {
+      resetBaseInfo()
+      // })
+    }
+  }
+)
+
+watch(
+  () => props.model?.key,
+  (val) => {
+    // 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
+    if (val) {
+      handleKeyUpdate(props.model.key)
+      handleNameUpdate(props.model.name)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+// watch(
+//   () => ({ ...props }),
+//   (oldVal, newVal) => {
+//     console.log(oldVal, 'oldVal')
+//     console.log(newVal, 'newVal')
+//     if (newVal) {
+//       needProps.value = newVal
+//     }
+//   },
+//   {
+//     immediate: true
+//   }
+// )
+// 'model.key': {
+//   immediate: false,
+//   handler: function (val) {
+//     this.handleKeyUpdate(val)
+//   }
+// }
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
new file mode 100644
index 0000000..f9cb9ac
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="panel-tab__content">
+    <component :is="customConfigComponent" v-bind="$props" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { CustomConfigMap } from './data'
+
+defineOptions({ name: 'ElementCustomConfig' })
+
+const props = defineProps({
+  id: String,
+  type: String,
+  businessObject: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+const customConfigComponent = ref<any>(null)
+
+watch(
+  () => props.businessObject,
+  () => {
+    if (props.type && props.businessObject) {
+      let val = props.type
+      if (props.businessObject.eventDefinitions) {
+        val += props.businessObject.eventDefinitions[0]?.$type.split(':')[1] || ''
+      }
+      customConfigComponent.value = CustomConfigMap[val]?.componet
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/components/BoundaryEventTimer.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/components/BoundaryEventTimer.vue
new file mode 100644
index 0000000..ca46b27
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/components/BoundaryEventTimer.vue
@@ -0,0 +1,252 @@
+<template>
+  <div>
+    <el-divider content-position="left">审批人超时未处理时</el-divider>
+    <el-form-item label="启用开关" prop="timeoutHandlerEnable">
+      <el-switch
+        v-model="timeoutHandlerEnable"
+        active-text="开启"
+        inactive-text="关闭"
+        @change="timeoutHandlerChange"
+      />
+    </el-form-item>
+    <el-form-item label="执行动作" prop="timeoutHandlerType" v-if="timeoutHandlerEnable">
+      <el-radio-group v-model="timeoutHandlerType.value" @change="onTimeoutHandlerTypeChanged">
+        <el-radio-button
+          v-for="item in TIMEOUT_HANDLER_TYPES"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+        />
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="超时时间设置" v-if="timeoutHandlerEnable">
+      <span class="mr-2">当超过</span>
+      <el-form-item prop="timeDuration">
+        <el-input-number
+          class="mr-2"
+          :style="{ width: '100px' }"
+          v-model="timeDuration"
+          :min="1"
+          controls-position="right"
+          @change="() => updateTimeModdle()"
+        />
+      </el-form-item>
+      <el-select
+        v-model="timeUnit"
+        class="mr-2"
+        :style="{ width: '100px' }"
+        @change="onTimeUnitChange"
+      >
+        <el-option
+          v-for="item in TIME_UNIT_TYPES"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      未处理
+    </el-form-item>
+    <el-form-item
+      label="最大提醒次数"
+      prop="maxRemindCount"
+      v-if="timeoutHandlerEnable && timeoutHandlerType.value === 1"
+    >
+      <el-input-number
+        v-model="maxRemindCount"
+        :min="1"
+        :max="10"
+        @change="() => updateTimeModdle()"
+      />
+    </el-form-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  TimeUnitType,
+  TIME_UNIT_TYPES,
+  TIMEOUT_HANDLER_TYPES,
+} from '@/components/SimpleProcessDesignerV2/src/consts'
+import { convertTimeUnit } from '@/components/SimpleProcessDesignerV2/src/utils'
+
+defineOptions({ name: 'ElementCustomConfig4BoundaryEventTimer' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+
+const bpmnElement = ref()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const timeoutHandlerEnable = ref(false)
+const boundaryEventType = ref()
+const timeoutHandlerType = ref({
+  value: undefined
+})
+const timeModdle = ref()
+const timeDuration = ref(6)
+const timeUnit = ref(TimeUnitType.HOUR)
+const maxRemindCount = ref(1)
+
+const elExtensionElements = ref()
+const otherExtensions = ref()
+const configExtensions = ref([])
+const eventDefinition = ref()
+
+const resetElement = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement
+  eventDefinition.value = bpmnElement.value.businessObject.eventDefinitions[0]
+
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnElement.value.businessObject?.extensionElements ??
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
+
+  // 是否开启自定义用户任务超时处理
+  boundaryEventType.value = elExtensionElements.value.values?.filter(
+    (ex) => ex.$type === `${prefix}:BoundaryEventType`
+  )?.[0]
+  if (boundaryEventType.value && boundaryEventType.value.value === 1) {
+    timeoutHandlerEnable.value = true
+    configExtensions.value.push(boundaryEventType.value)
+  }
+
+  // 执行动作
+  timeoutHandlerType.value = elExtensionElements.value.values?.filter(
+    (ex) => ex.$type === `${prefix}:TimeoutHandlerType`
+  )?.[0]
+  if (timeoutHandlerType.value) {
+    configExtensions.value.push(timeoutHandlerType.value)
+    if (eventDefinition.value.timeCycle) {
+      const timeStr = eventDefinition.value.timeCycle.body
+      const maxRemindCountStr = timeStr.split('/')[0]
+      const timeDurationStr = timeStr.split('/')[1]
+      console.log(maxRemindCountStr)
+      maxRemindCount.value = parseInt(maxRemindCountStr.slice(1))
+      timeDuration.value = parseInt(timeDurationStr.slice(2, timeDurationStr.length - 1))
+      timeUnit.value = convertTimeUnit(timeDurationStr.slice(timeDurationStr.length - 1))
+      timeModdle.value = eventDefinition.value.timeCycle
+    }
+    if (eventDefinition.value.timeDuration) {
+      const timeDurationStr = eventDefinition.value.timeDuration.body
+      timeDuration.value = parseInt(timeDurationStr.slice(2, timeDurationStr.length - 1))
+      timeUnit.value = convertTimeUnit(timeDurationStr.slice(timeDurationStr.length - 1))
+      timeModdle.value = eventDefinition.value.timeDuration
+    }
+  }
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value =
+    elExtensionElements.value.values?.filter(
+      (ex) =>
+        ex.$type !== `${prefix}:BoundaryEventType` && ex.$type !== `${prefix}:TimeoutHandlerType`
+    ) ?? []
+}
+
+const timeoutHandlerChange = (val) => {
+  timeoutHandlerEnable.value = val
+  if (val) {
+    // 启用自定义用户任务超时处理
+    // 边界事件类型 --- 超时
+    boundaryEventType.value = bpmnInstances().moddle.create(`${prefix}:BoundaryEventType`, {
+      value: 1
+    })
+    configExtensions.value.push(boundaryEventType.value)
+    // 超时处理类型
+    timeoutHandlerType.value = bpmnInstances().moddle.create(`${prefix}:TimeoutHandlerType`, {
+      value: 1
+    })
+    configExtensions.value.push(timeoutHandlerType.value)
+    // 超时时间表达式
+    timeDuration.value = 6
+    timeUnit.value = 2
+    maxRemindCount.value = 1
+    timeModdle.value = bpmnInstances().moddle.create(`bpmn:Expression`, {
+      body: 'PT6H'
+    })
+    eventDefinition.value.timeDuration = timeModdle.value
+  } else {
+    // 关闭自定义用户任务超时处理
+    configExtensions.value = []
+    delete eventDefinition.value.timeDuration
+    delete eventDefinition.value.timeCycle
+  }
+  updateElementExtensions()
+}
+
+const onTimeoutHandlerTypeChanged = () => {
+  maxRemindCount.value = 1
+  updateElementExtensions()
+  updateTimeModdle()
+}
+
+const onTimeUnitChange = () => {
+  // 分钟，默认是 60 分钟
+  if (timeUnit.value === TimeUnitType.MINUTE) {
+    timeDuration.value = 60
+  }
+  // 小时，默认是 6 个小时
+  if (timeUnit.value === TimeUnitType.HOUR) {
+    timeDuration.value = 6
+  }
+  // 天， 默认 1天
+  if (timeUnit.value === TimeUnitType.DAY) {
+    timeDuration.value = 1
+  }
+  updateTimeModdle()
+}
+
+const updateTimeModdle = () => {
+  if (maxRemindCount.value > 1) {
+    timeModdle.value.body = 'R' + maxRemindCount.value + '/' + isoTimeDuration()
+    if (!eventDefinition.value.timeCycle) {
+      delete eventDefinition.value.timeDuration
+      eventDefinition.value.timeCycle = timeModdle.value
+    }
+  } else {
+    timeModdle.value.body = isoTimeDuration()
+    if (!eventDefinition.value.timeDuration) {
+      delete eventDefinition.value.timeCycle
+      eventDefinition.value.timeDuration = timeModdle.value
+    }
+  }
+}
+
+const isoTimeDuration = () => {
+  let strTimeDuration = 'PT'
+  if (timeUnit.value === TimeUnitType.MINUTE) {
+    strTimeDuration += timeDuration.value + 'M'
+  }
+  if (timeUnit.value === TimeUnitType.HOUR) {
+    strTimeDuration += timeDuration.value + 'H'
+  }
+  if (timeUnit.value === TimeUnitType.DAY) {
+    strTimeDuration += timeDuration.value + 'D'
+  }
+  return strTimeDuration
+}
+
+const updateElementExtensions = () => {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [...otherExtensions.value, ...configExtensions.value]
+  })
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions
+  })
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetElement()
+      })
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/components/UserTaskCustomConfig.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/components/UserTaskCustomConfig.vue
new file mode 100644
index 0000000..3c748ff
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/components/UserTaskCustomConfig.vue
@@ -0,0 +1,688 @@
+<!-- UserTask 自定义配置：
+     1. 审批人与提交人为同一人时
+     2. 审批人拒绝时
+     3. 审批人为空时
+     4. 操作按钮
+     5. 字段权限
+     6. 审批类型
+     7. 是否需要签名
+-->
+<template>
+  <div>
+    <el-divider content-position="left">审批类型</el-divider>
+    <el-form-item prop="approveType">
+      <el-radio-group v-model="approveType.value">
+        <el-radio
+          v-for="(item, index) in APPROVE_TYPE"
+          :key="index"
+          :value="item.value"
+          :label="item.value"
+        >
+          {{ item.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    <el-divider content-position="left">审批人拒绝时</el-divider>
+    <el-form-item prop="rejectHandlerType">
+      <el-radio-group
+        v-model="rejectHandlerType"
+        :disabled="returnTaskList.length === 0"
+        @change="updateRejectHandlerType"
+      >
+        <div class="flex-col">
+          <div v-for="(item, index) in REJECT_HANDLER_TYPES" :key="index">
+            <el-radio :key="item.value" :value="item.value" :label="item.label" />
+          </div>
+        </div>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      v-if="rejectHandlerType == RejectHandlerType.RETURN_USER_TASK"
+      label="驳回节点"
+      prop="returnNodeId"
+    >
+      <el-select v-model="returnNodeId" clearable style="width: 100%" @change="updateReturnNodeId">
+        <el-option
+          v-for="item in returnTaskList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+    </el-form-item>
+
+    <el-divider content-position="left">审批人为空时</el-divider>
+    <el-form-item prop="assignEmptyHandlerType">
+      <el-radio-group v-model="assignEmptyHandlerType" @change="updateAssignEmptyHandlerType">
+        <div class="flex-col">
+          <div v-for="(item, index) in ASSIGN_EMPTY_HANDLER_TYPES" :key="index">
+            <el-radio :key="item.value" :value="item.value" :label="item.label" />
+          </div>
+        </div>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      v-if="assignEmptyHandlerType == AssignEmptyHandlerType.ASSIGN_USER"
+      label="指定用户"
+      prop="assignEmptyHandlerUserIds"
+      span="24"
+    >
+      <el-select
+        v-model="assignEmptyUserIds"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateAssignEmptyUserIds"
+      >
+        <el-option
+          v-for="item in userOptions"
+          :key="item.id"
+          :label="item.nickname"
+          :value="item.id"
+        />
+      </el-select>
+    </el-form-item>
+
+    <el-divider content-position="left">审批人与提交人为同一人时</el-divider>
+    <el-radio-group v-model="assignStartUserHandlerType" @change="updateAssignStartUserHandlerType">
+      <div class="flex-col">
+        <div v-for="(item, index) in ASSIGN_START_USER_HANDLER_TYPES" :key="index">
+          <el-radio :key="item.value" :value="item.value" :label="item.label" />
+        </div>
+      </div>
+    </el-radio-group>
+
+    <el-divider content-position="left">操作按钮</el-divider>
+    <div class="button-setting-pane">
+      <div class="button-setting-title">
+        <div class="button-title-label">操作按钮</div>
+        <div class="pl-4 button-title-label">显示名称</div>
+        <div class="button-title-label">启用</div>
+      </div>
+      <div class="button-setting-item" v-for="(item, index) in buttonsSettingEl" :key="index">
+        <div class="button-setting-item-label"> {{ OPERATION_BUTTON_NAME.get(item.id) }} </div>
+        <div class="button-setting-item-label">
+          <input
+            type="text"
+            class="editable-title-input"
+            @blur="btnDisplayNameBlurEvent(index)"
+            v-mountedFocus
+            v-model="item.displayName"
+            :placeholder="item.displayName"
+            v-if="btnDisplayNameEdit[index]"
+          />
+          <el-button v-else text @click="changeBtnDisplayName(index)"
+            >{{ item.displayName }} &nbsp;<Icon icon="ep:edit"
+          /></el-button>
+        </div>
+        <div class="button-setting-item-label">
+          <el-switch v-model="item.enable" />
+        </div>
+      </div>
+    </div>
+
+    <el-divider content-position="left">字段权限</el-divider>
+    <div class="field-setting-pane" v-if="formType === BpmModelFormType.NORMAL">
+      <div class="field-permit-title">
+        <div class="setting-title-label first-title"> 字段名称 </div>
+        <div class="other-titles">
+          <span class="setting-title-label cursor-pointer" @click="updatePermission('READ')"
+            >只读</span
+          >
+          <span class="setting-title-label cursor-pointer" @click="updatePermission('WRITE')"
+            >可编辑</span
+          >
+          <span class="setting-title-label cursor-pointer" @click="updatePermission('NONE')"
+            >隐藏</span
+          >
+        </div>
+      </div>
+      <div class="field-setting-item" v-for="(item, index) in fieldsPermissionEl" :key="index">
+        <div class="field-setting-item-label"> {{ item.title }} </div>
+        <el-radio-group class="field-setting-item-group" v-model="item.permission">
+          <div class="item-radio-wrap">
+            <el-radio
+              :value="FieldPermissionType.READ"
+              size="large"
+              :label="FieldPermissionType.READ"
+              @change="updateElementExtensions"
+            >
+              <span></span>
+            </el-radio>
+          </div>
+          <div class="item-radio-wrap">
+            <el-radio
+              :value="FieldPermissionType.WRITE"
+              size="large"
+              :label="FieldPermissionType.WRITE"
+              @change="updateElementExtensions"
+            >
+              <span></span>
+            </el-radio>
+          </div>
+          <div class="item-radio-wrap">
+            <el-radio
+              :value="FieldPermissionType.NONE"
+              size="large"
+              :label="FieldPermissionType.NONE"
+              @change="updateElementExtensions"
+            >
+              <span></span>
+            </el-radio>
+          </div>
+        </el-radio-group>
+      </div>
+    </div>
+
+    <el-divider content-position="left">是否需要签名</el-divider>
+    <el-form-item prop="signEnable">
+      <el-switch
+        v-model="signEnable.value"
+        active-text="是"
+        inactive-text="否"
+        @change="updateElementExtensions"
+      />
+    </el-form-item>
+
+    <el-divider content-position="left">审批意见</el-divider>
+    <el-form-item prop="reasonRequire">
+      <el-switch
+        v-model="reasonRequire.value"
+        active-text="必填"
+        inactive-text="非必填"
+        @change="updateElementExtensions"
+      />
+    </el-form-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ASSIGN_START_USER_HANDLER_TYPES,
+  RejectHandlerType,
+  REJECT_HANDLER_TYPES,
+  ASSIGN_EMPTY_HANDLER_TYPES,
+  AssignEmptyHandlerType,
+  OPERATION_BUTTON_NAME,
+  DEFAULT_BUTTON_SETTING,
+  FieldPermissionType,
+  APPROVE_TYPE,
+  ApproveType,
+  ButtonSetting
+} from '@/components/SimpleProcessDesignerV2/src/consts'
+import * as UserApi from '@/api/system/user'
+import { useFormFieldsPermission } from '@/components/SimpleProcessDesignerV2/src/node'
+import { BpmModelFormType } from '@/utils/constants'
+
+defineOptions({ name: 'ElementCustomConfig4UserTask' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+
+// 审批人与提交人为同一人时
+const assignStartUserHandlerTypeEl = ref()
+const assignStartUserHandlerType = ref()
+
+// 审批人拒绝时
+const rejectHandlerTypeEl = ref()
+const rejectHandlerType = ref()
+const returnNodeIdEl = ref()
+const returnNodeId = ref()
+const returnTaskList = ref([])
+
+// 审批人为空时
+const assignEmptyHandlerTypeEl = ref()
+const assignEmptyHandlerType = ref()
+const assignEmptyUserIdsEl = ref()
+const assignEmptyUserIds = ref()
+
+// 操作按钮
+const buttonsSettingEl = ref()
+const { btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } = useButtonsSetting()
+
+// 字段权限
+const fieldsPermissionEl = ref([])
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
+  FieldPermissionType.READ
+)
+
+// 审批类型
+const approveType = ref({ value: ApproveType.USER })
+
+// 是否需要签名
+const signEnable = ref({ value: false })
+
+// 审批意见
+const reasonRequire = ref({ value: false })
+
+const elExtensionElements = ref()
+const otherExtensions = ref()
+const bpmnElement = ref()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const resetCustomConfigList = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement
+
+  // 获取可回退的列表
+  returnTaskList.value = findAllPredecessorsExcludingStart(
+    bpmnElement.value.id,
+    bpmnInstances().modeler
+  )
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnElement.value.businessObject?.extensionElements ??
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
+
+  // 审批类型
+  approveType.value =
+    elExtensionElements.value.values?.filter((ex) => ex.$type === `${prefix}:ApproveType`)?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:ApproveType`, { value: ApproveType.USER })
+
+  // 审批人与提交人为同一人时
+  assignStartUserHandlerTypeEl.value =
+    elExtensionElements.value.values?.filter(
+      (ex) => ex.$type === `${prefix}:AssignStartUserHandlerType`
+    )?.[0] || bpmnInstances().moddle.create(`${prefix}:AssignStartUserHandlerType`, { value: 1 })
+  assignStartUserHandlerType.value = assignStartUserHandlerTypeEl.value.value
+
+  // 审批人拒绝时
+  rejectHandlerTypeEl.value =
+    elExtensionElements.value.values?.filter(
+      (ex) => ex.$type === `${prefix}:RejectHandlerType`
+    )?.[0] || bpmnInstances().moddle.create(`${prefix}:RejectHandlerType`, { value: 1 })
+  rejectHandlerType.value = rejectHandlerTypeEl.value.value
+  returnNodeIdEl.value =
+    elExtensionElements.value.values?.filter(
+      (ex) => ex.$type === `${prefix}:RejectReturnTaskId`
+    )?.[0] || bpmnInstances().moddle.create(`${prefix}:RejectReturnTaskId`, { value: '' })
+  returnNodeId.value = returnNodeIdEl.value.value
+
+  // 审批人为空时
+  assignEmptyHandlerTypeEl.value =
+    elExtensionElements.value.values?.filter(
+      (ex) => ex.$type === `${prefix}:AssignEmptyHandlerType`
+    )?.[0] || bpmnInstances().moddle.create(`${prefix}:AssignEmptyHandlerType`, { value: 1 })
+  assignEmptyHandlerType.value = assignEmptyHandlerTypeEl.value.value
+  assignEmptyUserIdsEl.value =
+    elExtensionElements.value.values?.filter(
+      (ex) => ex.$type === `${prefix}:AssignEmptyUserIds`
+    )?.[0] || bpmnInstances().moddle.create(`${prefix}:AssignEmptyUserIds`, { value: '' })
+  assignEmptyUserIds.value = assignEmptyUserIdsEl.value.value?.split(',').map((item) => {
+    // 如果数字超出了最大安全整数范围，则将其作为字符串处理
+    let num = Number(item)
+    return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER ? item : num
+  })
+
+  // 操作按钮
+  buttonsSettingEl.value = elExtensionElements.value.values?.filter(
+    (ex) => ex.$type === `${prefix}:ButtonsSetting`
+  )
+  if (buttonsSettingEl.value.length === 0) {
+    DEFAULT_BUTTON_SETTING.forEach((item) => {
+      buttonsSettingEl.value.push(
+        bpmnInstances().moddle.create(`${prefix}:ButtonsSetting`, {
+          'flowable:id': item.id,
+          'flowable:displayName': item.displayName,
+          'flowable:enable': item.enable
+        })
+      )
+    })
+  }
+
+  // 字段权限
+  if (formType.value === BpmModelFormType.NORMAL) {
+    const fieldsPermissionList = elExtensionElements.value.values?.filter(
+      (ex) => ex.$type === `${prefix}:FieldsPermission`
+    )
+    fieldsPermissionEl.value = []
+    getNodeConfigFormFields()
+    fieldsPermissionConfig.value = fieldsPermissionConfig.value
+    fieldsPermissionConfig.value.forEach((element) => {
+      element.permission =
+        fieldsPermissionList?.find((obj) => obj.field === element.field)?.permission ?? '1'
+      fieldsPermissionEl.value.push(
+        bpmnInstances().moddle.create(`${prefix}:FieldsPermission`, element)
+      )
+    })
+  }
+
+  // 是否需要签名
+  signEnable.value =
+    elExtensionElements.value.values?.filter((ex) => ex.$type === `${prefix}:SignEnable`)?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:SignEnable`, { value: false })
+
+  // 审批意见
+  reasonRequire.value =
+    elExtensionElements.value.values?.filter((ex) => ex.$type === `${prefix}:ReasonRequire`)?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:ReasonRequire`, { value: false })
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value =
+    elExtensionElements.value.values?.filter(
+      (ex) =>
+        ex.$type !== `${prefix}:AssignStartUserHandlerType` &&
+        ex.$type !== `${prefix}:RejectHandlerType` &&
+        ex.$type !== `${prefix}:RejectReturnTaskId` &&
+        ex.$type !== `${prefix}:AssignEmptyHandlerType` &&
+        ex.$type !== `${prefix}:AssignEmptyUserIds` &&
+        ex.$type !== `${prefix}:ButtonsSetting` &&
+        ex.$type !== `${prefix}:FieldsPermission` &&
+        ex.$type !== `${prefix}:ApproveType` &&
+        ex.$type !== `${prefix}:SignEnable` &&
+        ex.$type !== `${prefix}:ReasonRequire`
+    ) ?? []
+
+  // 更新元素扩展属性，避免后续报错
+  updateElementExtensions()
+}
+
+const updateAssignStartUserHandlerType = () => {
+  assignStartUserHandlerTypeEl.value.value = assignStartUserHandlerType.value
+
+  updateElementExtensions()
+}
+
+const updateRejectHandlerType = () => {
+  rejectHandlerTypeEl.value.value = rejectHandlerType.value
+
+  returnNodeId.value = returnTaskList.value[0].id
+  returnNodeIdEl.value.value = returnNodeId.value
+
+  updateElementExtensions()
+}
+
+const updateReturnNodeId = () => {
+  returnNodeIdEl.value.value = returnNodeId.value
+
+  updateElementExtensions()
+}
+
+const updateAssignEmptyHandlerType = () => {
+  assignEmptyHandlerTypeEl.value.value = assignEmptyHandlerType.value
+
+  updateElementExtensions()
+}
+
+const updateAssignEmptyUserIds = () => {
+  assignEmptyUserIdsEl.value.value = assignEmptyUserIds.value.toString()
+
+  updateElementExtensions()
+}
+
+const updateElementExtensions = () => {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...otherExtensions.value,
+      assignStartUserHandlerTypeEl.value,
+      rejectHandlerTypeEl.value,
+      returnNodeIdEl.value,
+      assignEmptyHandlerTypeEl.value,
+      assignEmptyUserIdsEl.value,
+      approveType.value,
+      ...buttonsSettingEl.value,
+      ...fieldsPermissionEl.value,
+      signEnable.value,
+      reasonRequire.value
+    ]
+  })
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions
+  })
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetCustomConfigList()
+      })
+  },
+  { immediate: true }
+)
+
+function findAllPredecessorsExcludingStart(elementId, modeler) {
+  const elementRegistry = modeler.get('elementRegistry')
+  const allConnections = elementRegistry.filter((element) => element.type === 'bpmn:SequenceFlow')
+  const predecessors = new Set() // 使用 Set 来避免重复节点
+  const visited = new Set() // 用于记录已访问的节点
+
+  // 检查是否是开始事件节点
+  function isStartEvent(element) {
+    return element.type === 'bpmn:StartEvent'
+  }
+
+  function findPredecessorsRecursively(element) {
+    // 如果该节点已经访问过，直接返回，避免循环
+    if (visited.has(element)) {
+      return
+    }
+
+    // 标记当前节点为已访问
+    visited.add(element)
+
+    // 获取与当前节点相连的所有连接
+    const incomingConnections = allConnections.filter((connection) => connection.target === element)
+
+    incomingConnections.forEach((connection) => {
+      const source = connection.source // 获取前置节点
+
+      // 只添加不是开始事件的前置节点
+      if (!isStartEvent(source)) {
+        predecessors.add(source.businessObject)
+        // 递归查找前置节点
+        findPredecessorsRecursively(source)
+      }
+    })
+  }
+
+  const targetElement = elementRegistry.get(elementId)
+  if (targetElement) {
+    findPredecessorsRecursively(targetElement)
+  }
+
+  return Array.from(predecessors) // 返回前置节点数组
+}
+
+function useButtonsSetting() {
+  const buttonsSetting = ref<ButtonSetting[]>()
+  // 操作按钮显示名称可编辑
+  const btnDisplayNameEdit = ref<boolean[]>([])
+  const changeBtnDisplayName = (index: number) => {
+    btnDisplayNameEdit.value[index] = true
+  }
+  const btnDisplayNameBlurEvent = (index: number) => {
+    btnDisplayNameEdit.value[index] = false
+    const buttonItem = buttonsSetting.value![index]
+    buttonItem.displayName = buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)!
+  }
+  return {
+    buttonsSetting,
+    btnDisplayNameEdit,
+    changeBtnDisplayName,
+    btnDisplayNameBlurEvent
+  }
+}
+
+/** 批量更新权限 */
+// TODO @lesan：这个页面，有一些 idea 红色报错，咱要不要 fix 下！
+const updatePermission = (type: string) => {
+  fieldsPermissionEl.value.forEach((field) => {
+    field.permission =
+      type === 'READ'
+        ? FieldPermissionType.READ
+        : type === 'WRITE'
+          ? FieldPermissionType.WRITE
+          : FieldPermissionType.NONE
+  })
+}
+
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+onMounted(async () => {
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+})
+</script>
+
+<style lang="scss" scoped>
+.button-setting-pane {
+  display: flex;
+  margin-top: 8px;
+  font-size: 14px;
+  flex-direction: column;
+
+  .button-setting-desc {
+    padding-right: 8px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .button-setting-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 45px;
+    padding-left: 12px;
+    background-color: #f8fafc0a;
+    border: 1px solid #1f38581a;
+
+    & > :first-child {
+      width: 100px !important;
+      text-align: left !important;
+    }
+
+    & > :last-child {
+      text-align: center !important;
+    }
+
+    .button-title-label {
+      width: 150px;
+      font-size: 13px;
+      font-weight: 700;
+      color: #000;
+      text-align: left;
+    }
+  }
+
+  .button-setting-item {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    height: 38px;
+    padding-left: 12px;
+    border: 1px solid #1f38581a;
+    border-top: 0;
+
+    & > :first-child {
+      width: 100px !important;
+    }
+
+    & > :last-child {
+      text-align: center !important;
+    }
+
+    .button-setting-item-label {
+      width: 150px;
+      overflow: hidden;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .editable-title-input {
+      height: 24px;
+      max-width: 130px;
+      margin-left: 4px;
+      line-height: 24px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      transition: all 0.3s;
+
+      &:focus {
+        border-color: #40a9ff;
+        outline: 0;
+        box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+      }
+    }
+  }
+}
+
+.field-setting-pane {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+
+  .field-setting-desc {
+    padding-right: 8px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .field-permit-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 45px;
+    padding-left: 12px;
+    line-height: 45px;
+    background-color: #f8fafc0a;
+    border: 1px solid #1f38581a;
+
+    .first-title {
+      text-align: left !important;
+    }
+
+    .other-titles {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .setting-title-label {
+      display: inline-block;
+      width: 100px;
+      padding: 5px 0;
+      font-size: 13px;
+      font-weight: 700;
+      color: #000;
+      text-align: center;
+    }
+  }
+
+  .field-setting-item {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    height: 38px;
+    padding-left: 12px;
+    border: 1px solid #1f38581a;
+    border-top: 0;
+
+    .field-setting-item-label {
+      display: inline-block;
+      width: 100px;
+      min-height: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: text;
+    }
+
+    .field-setting-item-group {
+      display: flex;
+      justify-content: space-between;
+
+      .item-radio-wrap {
+        display: inline-block;
+        width: 100px;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/data.ts b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/data.ts
new file mode 100644
index 0000000..a45355e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/custom-config/data.ts
@@ -0,0 +1,13 @@
+import UserTaskCustomConfig from './components/UserTaskCustomConfig.vue'
+import BoundaryEventTimer from './components/BoundaryEventTimer.vue'
+
+export const CustomConfigMap = {
+  UserTask: {
+    name: '用户任务',
+    componet: UserTaskCustomConfig
+  },
+  BoundaryEventTimerEventDefinition: {
+    name: '定时边界事件(非中断)',
+    componet: BoundaryEventTimer
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
new file mode 100644
index 0000000..304630d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form :model="flowConditionForm" label-width="90px" size="small">
+      <el-form-item label="流转类型">
+        <el-select v-model="flowConditionForm.type" @change="updateFlowType">
+          <el-option label="普通流转路径" value="normal" />
+          <el-option label="默认流转路径" value="default" />
+          <el-option label="条件流转路径" value="condition" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
+        <el-select v-model="flowConditionForm.conditionType">
+          <el-option label="表达式" value="expression" />
+          <el-option label="脚本" value="script" />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        label="表达式"
+        v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'"
+        key="express"
+      >
+        <el-input
+          v-model="flowConditionForm.body"
+          style="width: 192px"
+          clearable
+          @change="updateFlowCondition"
+        />
+      </el-form-item>
+      <template
+        v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'"
+      >
+        <el-form-item label="脚本语言" key="language">
+          <el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
+        </el-form-item>
+        <el-form-item label="脚本类型" key="scriptType">
+          <el-select v-model="flowConditionForm.scriptType">
+            <el-option label="内联脚本" value="inlineScript" />
+            <el-option label="外部脚本" value="externalScript" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="脚本"
+          v-if="flowConditionForm.scriptType === 'inlineScript'"
+          key="body"
+        >
+          <el-input
+            v-model="flowConditionForm.body"
+            type="textarea"
+            clearable
+            @change="updateFlowCondition"
+          />
+        </el-form-item>
+        <el-form-item
+          label="资源地址"
+          v-if="flowConditionForm.scriptType === 'externalScript'"
+          key="resource"
+        >
+          <el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
+        </el-form-item>
+      </template>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'FlowCondition' })
+
+const props = defineProps({
+  businessObject: Object,
+  type: String
+})
+const flowConditionForm = ref<any>({})
+const bpmnElement = ref()
+const bpmnElementSource = ref()
+const bpmnElementSourceRef = ref()
+const flowConditionRef = ref()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+const resetFlowCondition = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement
+  bpmnElementSource.value = bpmnElement.value.source
+  bpmnElementSourceRef.value = bpmnElement.value.businessObject.sourceRef
+  // 初始化默认type为default
+  flowConditionForm.value = { type: 'default' }
+  if (
+    bpmnElementSourceRef.value &&
+    bpmnElementSourceRef.value.default &&
+    bpmnElementSourceRef.value.default.id === bpmnElement.value.id
+  ) {
+    flowConditionForm.value = { type: 'default' }
+  } else if (!bpmnElement.value.businessObject.conditionExpression) {
+    // 普通
+    flowConditionForm.value = { type: 'normal' }
+  } else {
+    // 带条件
+    const conditionExpression = bpmnElement.value.businessObject.conditionExpression
+    flowConditionForm.value = { ...conditionExpression, type: 'condition' }
+    // resource 可直接标识 是否是外部资源脚本
+    if (flowConditionForm.value.resource) {
+      // this.$set(this.flowConditionForm, "conditionType", "script");
+      // this.$set(this.flowConditionForm, "scriptType", "externalScript");
+      flowConditionForm.value['conditionType'] = 'script'
+      flowConditionForm.value['scriptType'] = 'externalScript'
+      return
+    }
+    if (conditionExpression.language) {
+      // this.$set(this.flowConditionForm, "conditionType", "script");
+      // this.$set(this.flowConditionForm, "scriptType", "inlineScript");
+      flowConditionForm.value['conditionType'] = 'script'
+      flowConditionForm.value['scriptType'] = 'inlineScript'
+
+      return
+    }
+    // this.$set(this.flowConditionForm, "conditionType", "expression");
+    flowConditionForm.value['conditionType'] = 'expression'
+  }
+}
+const updateFlowType = (flowType) => {
+  // 正常条件类
+  if (flowType === 'condition') {
+    flowConditionRef.value = bpmnInstances().moddle.create('bpmn:FormalExpression')
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      conditionExpression: flowConditionRef.value
+    })
+    return
+  }
+  // 默认路径
+  if (flowType === 'default') {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      conditionExpression: null
+    })
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), {
+      default: toRaw(bpmnElement.value)
+    })
+    return
+  }
+  // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
+  if (
+    bpmnElementSourceRef.value.default &&
+    bpmnElementSourceRef.value.default.id === bpmnElement.value.id
+  ) {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), {
+      default: null
+    })
+  }
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    conditionExpression: null
+  })
+}
+const updateFlowCondition = () => {
+  let { conditionType, scriptType, body, resource, language } = flowConditionForm.value
+  let condition
+  if (conditionType === 'expression') {
+    condition = bpmnInstances().moddle.create('bpmn:FormalExpression', { body })
+  } else {
+    if (scriptType === 'inlineScript') {
+      condition = bpmnInstances().moddle.create('bpmn:FormalExpression', { body, language })
+      // this.$set(this.flowConditionForm, "resource", "");
+      flowConditionForm.value['resource'] = ''
+    } else {
+      // this.$set(this.flowConditionForm, "body", "");
+      flowConditionForm.value['body'] = ''
+      condition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+        resource,
+        language
+      })
+    }
+  }
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    conditionExpression: condition
+  })
+}
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+  bpmnElementSource.value = null
+  bpmnElementSourceRef.value = null
+})
+
+watch(
+  () => props.businessObject,
+  (val) => {
+    console.log(val, 'val')
+    nextTick(() => {
+      resetFlowCondition()
+    })
+  },
+  {
+    immediate: true
+  }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
new file mode 100644
index 0000000..3bb7d66
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form label-width="80px">
+      <el-form-item label="流程表单">
+        <!--        <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
+        <el-select v-model="formKey" clearable @change="updateElementFormKey">
+          <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
+        </el-select>
+      </el-form-item>
+      <!--      <el-form-item label="业务标识">-->
+      <!--        <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
+      <!--          <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
+      <!--          <el-option label="无" value="" />-->
+      <!--        </el-select>-->
+      <!--      </el-form-item>-->
+    </el-form>
+
+    <!--字段列表-->
+    <!--    <div class="element-property list-property">-->
+    <!--      <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
+    <!--      <el-table :data="fieldList" max-height="240" fit border>-->
+    <!--        <el-table-column label="序号" type="index" width="50px" />-->
+    <!--        <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
+    <!--        <el-table-column-->
+    <!--          label="字段类型"-->
+    <!--          prop="type"-->
+    <!--          min-width="80px"-->
+    <!--          :formatter="(row) => fieldType[row.type] || row.type"-->
+    <!--          show-overflow-tooltip-->
+    <!--        />-->
+    <!--        <el-table-column-->
+    <!--          label="默认值"-->
+    <!--          prop="defaultValue"-->
+    <!--          min-width="80px"-->
+    <!--          show-overflow-tooltip-->
+    <!--        />-->
+    <!--        <el-table-column label="操作" width="90px">-->
+    <!--          <template #default="scope">-->
+    <!--            <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
+    <!--              >编辑</el-button-->
+    <!--            >-->
+    <!--            <el-divider direction="vertical" />-->
+    <!--            <el-button-->
+    <!--              type="primary"-->
+    <!--              link-->
+    <!--              style="color: #ff4d4f"-->
+    <!--              @click="removeField(scope, scope.$index)"-->
+    <!--              >移除</el-button-->
+    <!--            >-->
+    <!--          </template>-->
+    <!--        </el-table-column>-->
+    <!--      </el-table>-->
+    <!--    </div>-->
+    <!--    <div class="element-drawer__button">-->
+    <!--      <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
+    <!--    </div>-->
+
+    <!--字段配置侧边栏-->
+    <!--    <el-drawer-->
+    <!--      v-model="fieldModelVisible"-->
+    <!--      title="字段配置"-->
+    <!--      :size="`${width}px`"-->
+    <!--      append-to-body-->
+    <!--      destroy-on-close-->
+    <!--    >-->
+    <!--      <el-form :model="formFieldForm" label-width="90px">-->
+    <!--        <el-form-item label="字段ID">-->
+    <!--          <el-input v-model="formFieldForm.id" clearable />-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="类型">-->
+    <!--          <el-select-->
+    <!--            v-model="formFieldForm.typeType"-->
+    <!--            placeholder="请选择字段类型"-->
+    <!--            clearable-->
+    <!--            @change="changeFieldTypeType"-->
+    <!--          >-->
+    <!--            <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
+    <!--          </el-select>-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
+    <!--          <el-input v-model="formFieldForm.type" clearable />-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="名称">-->
+    <!--          <el-input v-model="formFieldForm.label" clearable />-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
+    <!--          <el-input v-model="formFieldForm.datePattern" clearable />-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="默认值">-->
+    <!--          <el-input v-model="formFieldForm.defaultValue" clearable />-->
+    <!--        </el-form-item>-->
+    <!--      </el-form>-->
+
+    <!--      &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
+    <!--      <template v-if="formFieldForm.type === 'enum'">-->
+    <!--        <el-divider key="enum-divider" />-->
+    <!--        <p class="listener-filed__title" key="enum-title">-->
+    <!--          <span><Icon icon="ep:menu" />枚举值列表：</span>-->
+    <!--          <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
+    <!--            >添加枚举值</el-button-->
+    <!--          >-->
+    <!--        </p>-->
+    <!--        <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
+    <!--          <el-table-column label="序号" width="50px" type="index" />-->
+    <!--          <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
+    <!--          <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
+    <!--          <el-table-column label="操作" width="90px">-->
+    <!--            <template #default="scope">-->
+    <!--              <el-button-->
+    <!--                type="primary"-->
+    <!--                link-->
+    <!--                @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
+    <!--                >编辑</el-button-->
+    <!--              >-->
+    <!--              <el-divider direction="vertical" />-->
+    <!--              <el-button-->
+    <!--                type="primary"-->
+    <!--                link-->
+    <!--                style="color: #ff4d4f"-->
+    <!--                @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
+    <!--                >移除</el-button-->
+    <!--              >-->
+    <!--            </template>-->
+    <!--          </el-table-column>-->
+    <!--        </el-table>-->
+    <!--      </template>-->
+
+    <!--      &lt;!&ndash; 校验规则 &ndash;&gt;-->
+    <!--      <el-divider key="validation-divider" />-->
+    <!--      <p class="listener-filed__title" key="validation-title">-->
+    <!--        <span><Icon icon="ep:menu" />约束条件列表：</span>-->
+    <!--        <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
+    <!--          >添加约束</el-button-->
+    <!--        >-->
+    <!--      </p>-->
+    <!--      <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
+    <!--        <el-table-column label="序号" width="50px" type="index" />-->
+    <!--        <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
+    <!--        <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
+    <!--        <el-table-column label="操作" width="90px">-->
+    <!--          <template #default="scope">-->
+    <!--            <el-button-->
+    <!--              type="primary"-->
+    <!--              link-->
+    <!--              @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
+    <!--              >编辑</el-button-->
+    <!--            >-->
+    <!--            <el-divider direction="vertical" />-->
+    <!--            <el-button-->
+    <!--              type="primary"-->
+    <!--              link-->
+    <!--              style="color: #ff4d4f"-->
+    <!--              @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
+    <!--              >移除</el-button-->
+    <!--            >-->
+    <!--          </template>-->
+    <!--        </el-table-column>-->
+    <!--      </el-table>-->
+
+    <!--      &lt;!&ndash; 表单属性 &ndash;&gt;-->
+    <!--      <el-divider key="property-divider" />-->
+    <!--      <p class="listener-filed__title" key="property-title">-->
+    <!--        <span><Icon icon="ep:menu" />字段属性列表：</span>-->
+    <!--        <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
+    <!--          >添加属性</el-button-->
+    <!--        >-->
+    <!--      </p>-->
+    <!--      <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
+    <!--        <el-table-column label="序号" width="50px" type="index" />-->
+    <!--        <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
+    <!--        <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
+    <!--        <el-table-column label="操作" width="90px">-->
+    <!--          <template #default="scope">-->
+    <!--            <el-button-->
+    <!--              type="primary"-->
+    <!--              link-->
+    <!--              @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
+    <!--              >编辑</el-button-->
+    <!--            >-->
+    <!--            <el-divider direction="vertical" />-->
+    <!--            <el-button-->
+    <!--              type="primary"-->
+    <!--              link-->
+    <!--              style="color: #ff4d4f"-->
+    <!--              @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
+    <!--              >移除</el-button-->
+    <!--            >-->
+    <!--          </template>-->
+    <!--        </el-table-column>-->
+    <!--      </el-table>-->
+
+    <!--      &lt;!&ndash; 底部按钮 &ndash;&gt;-->
+    <!--      <div class="element-drawer__button">-->
+    <!--        <el-button>取 消</el-button>-->
+    <!--        <el-button type="primary" @click="saveField">保 存</el-button>-->
+    <!--      </div>-->
+    <!--    </el-drawer>-->
+
+    <!--    <el-dialog-->
+    <!--      v-model="fieldOptionModelVisible"-->
+    <!--      :title="optionModelTitle"-->
+    <!--      width="600px"-->
+    <!--      append-to-body-->
+    <!--      destroy-on-close-->
+    <!--    >-->
+    <!--      <el-form :model="fieldOptionForm" label-width="96px">-->
+    <!--        <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
+    <!--          <el-input v-model="fieldOptionForm.id" clearable />-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
+    <!--          <el-input v-model="fieldOptionForm.name" clearable />-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
+    <!--          <el-input v-model="fieldOptionForm.config" clearable />-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
+    <!--          <el-input v-model="fieldOptionForm.value" clearable />-->
+    <!--        </el-form-item>-->
+    <!--      </el-form>-->
+    <!--      <template #footer>-->
+    <!--        <el-button @click="fieldOptionModelVisible = false">取 消</el-button>-->
+    <!--        <el-button type="primary" @click="saveFieldOption">确 定</el-button>-->
+    <!--      </template>-->
+    <!--    </el-dialog>-->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import * as FormApi from '@/api/bpm/form'
+
+defineOptions({ name: 'ElementForm' })
+
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+
+const formKey = ref('')
+const businessKey = ref('')
+const optionModelTitle = ref('')
+const fieldList = ref<any[]>([])
+const formFieldForm = ref<any>({})
+const fieldType = ref({
+  long: '长整型',
+  string: '字符串',
+  boolean: '布尔类',
+  date: '日期类',
+  enum: '枚举类',
+  custom: '自定义类型'
+})
+const formFieldIndex = ref(-1) // 编辑中的字段， -1 为新增
+const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项， -1 为新增
+const fieldModelVisible = ref(false)
+const fieldOptionModelVisible = ref(false)
+const fieldOptionForm = ref<any>({}) // 当前激活的字段配置项数据
+const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
+const fieldEnumList = ref<any[]>([]) // 枚举值列表
+const fieldConstraintsList = ref<any[]>([]) // 约束条件列表
+const fieldPropertiesList = ref<any[]>([]) // 绑定属性列表
+const bpmnELement = ref()
+const elExtensionElements = ref()
+const formData = ref()
+const otherExtensions = ref()
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+const resetFormList = () => {
+  bpmnELement.value = bpmnInstances().bpmnElement
+  formKey.value = bpmnELement.value.businessObject.formKey
+  // if (formKey.value?.length > 0) {
+  //   formKey.value = parseInt(formKey.value)
+  // }
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnELement.value.businessObject.get('extensionElements') ||
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
+  // 获取元素表单配置 或者 创建新的表单配置
+  formData.value =
+    elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
+
+  // 业务标识 businessKey， 绑定在 formData 中
+  businessKey.value = formData.value.businessKey
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value = elExtensionElements.value.values.filter(
+    (ex) => ex.$type !== `${prefix}:FormData`
+  )
+
+  // 复制原始值，填充表格
+  fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
+
+  // 更新元素扩展属性，避免后续报错
+  updateElementExtensions()
+}
+const updateElementFormKey = () => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    formKey: formKey.value
+  })
+}
+const updateElementBusinessKey = () => {
+  bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
+    businessKey: businessKey.value
+  })
+}
+// 根据类型调整字段type
+const changeFieldTypeType = (type) => {
+  // this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
+  formFieldForm.value['type'] = type === 'custom' ? '' : type
+}
+
+// 打开字段详情侧边栏
+const openFieldForm = (field, index) => {
+  formFieldIndex.value = index
+  if (index !== -1) {
+    const FieldObject = formData.value.fields[index]
+    formFieldForm.value = JSON.parse(JSON.stringify(field))
+    // 设置自定义类型
+    // this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
+    formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
+    // 初始化枚举值列表
+    field.type === 'enum' &&
+      (fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
+    // 初始化约束条件列表
+    fieldConstraintsList.value = JSON.parse(
+      JSON.stringify(FieldObject?.validation?.constraints || [])
+    )
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
+  } else {
+    formFieldForm.value = {}
+    // 初始化枚举值列表
+    fieldEnumList.value = []
+    // 初始化约束条件列表
+    fieldConstraintsList.value = []
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = []
+  }
+  fieldModelVisible.value = true
+}
+// 打开字段 某个 配置项 弹窗
+const openFieldOptionForm = (option, index, type) => {
+  fieldOptionModelVisible.value = true
+  fieldOptionType.value = type
+  formFieldOptionIndex.value = index
+  if (type === 'property') {
+    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+    return (optionModelTitle.value = '属性配置')
+  }
+  if (type === 'enum') {
+    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+    return (optionModelTitle.value = '枚举值配置')
+  }
+  fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+  return (optionModelTitle.value = '约束条件配置')
+}
+
+// 保存字段 某个 配置项
+const saveFieldOption = () => {
+  if (formFieldOptionIndex.value === -1) {
+    if (fieldOptionType.value === 'property') {
+      fieldPropertiesList.value.push(fieldOptionForm.value)
+    }
+    if (fieldOptionType.value === 'constraint') {
+      fieldConstraintsList.value.push(fieldOptionForm.value)
+    }
+    if (fieldOptionType.value === 'enum') {
+      fieldEnumList.value.push(fieldOptionForm.value)
+    }
+  } else {
+    fieldOptionType.value === 'property' &&
+      fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+    fieldOptionType.value === 'constraint' &&
+      fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+    fieldOptionType.value === 'enum' &&
+      fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+  }
+  fieldOptionModelVisible.value = false
+  fieldOptionForm.value = {}
+}
+// 保存字段配置
+const saveField = () => {
+  const { id, type, label, defaultValue, datePattern } = formFieldForm.value
+  const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
+  defaultValue && (Field.defaultValue = defaultValue)
+  datePattern && (Field.datePattern = datePattern)
+  // 构建属性
+  if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
+    const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
+      return bpmnInstances().moddle.create(`${prefix}:Property`, {
+        id: fp.id,
+        value: fp.value
+      })
+    })
+    Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
+      values: fieldPropertyList
+    })
+  }
+  // 构建校验规则
+  if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
+    const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
+      return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
+        name: fc.name,
+        config: fc.config
+      })
+    })
+    Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
+      constraints: fieldConstraintList
+    })
+  }
+  // 构建枚举值
+  if (fieldEnumList.value && fieldEnumList.value.length) {
+    Field.values = fieldEnumList.value.map((fe) => {
+      return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
+    })
+  }
+  // 更新数组 与 表单配置实例
+  if (formFieldIndex.value === -1) {
+    fieldList.value.push(formFieldForm.value)
+    formData.value.fields.push(Field)
+  } else {
+    fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
+    formData.value.fields.splice(formFieldIndex.value, 1, Field)
+  }
+  updateElementExtensions()
+  fieldModelVisible.value = false
+}
+
+// 移除某个 字段的 配置项
+const removeFieldOptionItem = (option, index, type) => {
+  // console.log(option, 'option')
+  if (type === 'property') {
+    fieldPropertiesList.value.splice(index, 1)
+    return
+  }
+  if (type === 'enum') {
+    fieldEnumList.value.splice(index, 1)
+    return
+  }
+  fieldConstraintsList.value.splice(index, 1)
+}
+// 移除 字段
+const removeField = (field, index) => {
+  console.log(field, 'field')
+  fieldList.value.splice(index, 1)
+  formData.value.fields.splice(index, 1)
+  updateElementExtensions()
+}
+
+const updateElementExtensions = () => {
+  // 更新回扩展元素
+  const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
+    values: otherExtensions.value.concat(formData.value)
+  })
+  // 更新到元素上
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    extensionElements: newElExtensionElements
+  })
+}
+
+const formList = ref([]) // 流程表单的下拉框的数据
+onMounted(async () => {
+  formList.value = await FormApi.getFormSimpleList()
+})
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetFormList()
+      })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/index.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/index.js
new file mode 100644
index 0000000..7fa5617
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/index.js
@@ -0,0 +1,7 @@
+import MyPropertiesPanel from './PropertiesPanel.vue'
+
+MyPropertiesPanel.install = function (Vue) {
+  Vue.component(MyPropertiesPanel.name, MyPropertiesPanel)
+}
+
+export default MyPropertiesPanel
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
new file mode 100644
index 0000000..de5445c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -0,0 +1,448 @@
+<template>
+  <div class="panel-tab__content">
+    <el-table :data="elementListenersList" size="small" border>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column label="事件类型" min-width="100px" prop="event" />
+      <el-table-column
+        label="监听器类型"
+        min-width="100px"
+        show-overflow-tooltip
+        :formatter="(row) => listenerTypeObject[row.listenerType]"
+      />
+      <el-table-column label="操作" width="100px">
+        <template #default="scope">
+          <el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
+            >编辑</el-button
+          >
+          <el-divider direction="vertical" />
+          <el-button size="small" link style="color: #ff4d4f" @click="removeListener(scope.$index)"
+            >移除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <XButton
+        type="primary"
+        preIcon="ep:plus"
+        title="添加监听器"
+        size="small"
+        @click="openListenerForm(null)"
+      />
+      <XButton
+        type="success"
+        preIcon="ep:select"
+        title="选择监听器"
+        size="small"
+        @click="openProcessListenerDialog"
+      />
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer
+      v-model="listenerFormModelVisible"
+      title="执行监听器"
+      :size="`${width}px`"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="listenerForm" label-width="96px" ref="listenerFormRef">
+        <el-form-item
+          label="事件类型"
+          prop="event"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerForm.event">
+            <el-option label="start" value="start" />
+            <el-option label="end" value="end" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="监听器类型"
+          prop="listenerType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerForm.listenerType">
+            <el-option
+              v-for="i in Object.keys(listenerTypeObject)"
+              :key="i"
+              :label="listenerTypeObject[i]"
+              :value="i"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'classListener'"
+          label="Java类"
+          prop="class"
+          key="listener-class"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.class" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'expressionListener'"
+          label="表达式"
+          prop="expression"
+          key="listener-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.expression" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+          label="代理表达式"
+          prop="delegateExpression"
+          key="listener-delegate"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.delegateExpression" clearable />
+        </el-form-item>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <el-form-item
+            label="脚本格式"
+            prop="scriptFormat"
+            key="listener-script-format"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+          >
+            <el-input v-model="listenerForm.scriptFormat" clearable />
+          </el-form-item>
+          <el-form-item
+            label="脚本类型"
+            prop="scriptType"
+            key="listener-script-type"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+          >
+            <el-select v-model="listenerForm.scriptType">
+              <el-option label="内联脚本" value="inlineScript" />
+              <el-option label="外部脚本" value="externalScript" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'inlineScript'"
+            label="脚本内容"
+            prop="value"
+            key="listener-script"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+          >
+            <el-input v-model="listenerForm.value" clearable />
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'externalScript'"
+            label="资源地址"
+            prop="resource"
+            key="listener-resource"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+          >
+            <el-input v-model="listenerForm.resource" clearable />
+          </el-form-item>
+        </template>
+      </el-form>
+      <el-divider />
+      <p class="listener-filed__title">
+        <span><Icon icon="ep:menu" />注入字段：</span>
+        <XButton type="primary" @click="openListenerFieldForm(null)" title="添加字段" />
+      </p>
+      <el-table
+        :data="fieldsListOfListener"
+        size="small"
+        max-height="240"
+        fit
+        border
+        style="flex: none"
+      >
+        <el-table-column label="序号" width="50px" type="index" />
+        <el-table-column label="字段名称" min-width="100px" prop="name" />
+        <el-table-column
+          label="字段类型"
+          min-width="80px"
+          show-overflow-tooltip
+          :formatter="(row) => fieldTypeObject[row.fieldType]"
+        />
+        <el-table-column
+          label="字段值/表达式"
+          min-width="100px"
+          show-overflow-tooltip
+          :formatter="(row) => row.string || row.expression"
+        />
+        <el-table-column label="操作" width="130px">
+          <template #default="scope">
+            <el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
+              >编辑</el-button
+            >
+            <el-divider direction="vertical" />
+            <el-button
+              size="small"
+              link
+              style="color: #ff4d4f"
+              @click="removeListenerField(scope.$index)"
+              >移除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="element-drawer__button">
+        <el-button @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveListenerConfig">保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 注入西段 编辑/创建 部分 -->
+    <el-dialog
+      title="字段配置"
+      v-model="listenerFieldFormModelVisible"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        :model="listenerFieldForm"
+        label-width="96spx"
+        ref="listenerFieldFormRef"
+        style="height: 136px"
+      >
+        <el-form-item
+          label="字段名称："
+          prop="name"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.name" clearable />
+        </el-form-item>
+        <el-form-item
+          label="字段类型："
+          prop="fieldType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerFieldForm.fieldType">
+            <el-option
+              v-for="i in Object.keys(fieldTypeObject)"
+              :key="i"
+              :label="fieldTypeObject[i]"
+              :value="i"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'string'"
+          label="字段值："
+          prop="string"
+          key="field-string"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.string" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'expression'"
+          label="表达式："
+          prop="expression"
+          key="field-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.expression" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+
+  <!-- 选择弹窗 -->
+  <ProcessListenerDialog ref="processListenerDialogRef" @select="selectProcessListener" />
+</template>
+<script lang="ts" setup>
+import { ElMessageBox } from 'element-plus'
+import { createListenerObject, updateElementExtensions } from '../../utils'
+import {
+  initListenerType,
+  initListenerForm,
+  listenerType,
+  fieldType,
+  initListenerForm2
+} from './utilSelf'
+import ProcessListenerDialog from './ProcessListenerDialog.vue'
+
+defineOptions({ name: 'ElementListeners' })
+
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+const elementListenersList = ref<any[]>([]) // 监听器列表
+const listenerForm = ref<any>({}) // 监听器详情表单
+const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
+const fieldsListOfListener = ref<any[]>([])
+const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
+const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
+const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
+const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
+const listenerTypeObject = ref(listenerType)
+const fieldTypeObject = ref(fieldType)
+const bpmnElement = ref()
+const otherExtensionList = ref()
+const bpmnElementListeners = ref()
+const listenerFormRef = ref()
+const listenerFieldFormRef = ref()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const resetListenersList = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement
+  otherExtensionList.value = []
+  bpmnElementListeners.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type === `${prefix}:ExecutionListener`
+    ) ?? []
+  elementListenersList.value = bpmnElementListeners.value.map((listener) =>
+    initListenerType(listener)
+  )
+}
+// 打开 监听器详情 侧边栏
+const openListenerForm = (listener, index?) => {
+  // debugger
+  if (listener) {
+    listenerForm.value = initListenerForm(listener)
+    editingListenerIndex.value = index
+  } else {
+    listenerForm.value = {}
+    editingListenerIndex.value = -1 // 标记为新增
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field) => ({
+      ...field,
+      fieldType: field.string ? 'string' : 'expression'
+    }))
+  } else {
+    fieldsListOfListener.value = []
+    listenerForm.value['fields'] = []
+  }
+  // 打开侧边栏并清楚验证状态
+  listenerFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFormRef.value) {
+      listenerFormRef.value.clearValidate()
+    }
+  })
+}
+// 打开监听器字段编辑弹窗
+const openListenerFieldForm = (field, index?) => {
+  listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
+  editingListenerFieldIndex.value = field ? index : -1
+  listenerFieldFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFieldFormRef.value) {
+      listenerFieldFormRef.value.clearValidate()
+    }
+  })
+}
+// 保存监听器注入字段
+const saveListenerFiled = async () => {
+  // debugger
+  let validateStatus = await listenerFieldFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(listenerFieldForm.value)
+    listenerForm.value.fields.push(listenerFieldForm.value)
+  } else {
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+  }
+  listenerFieldFormModelVisible.value = false
+  nextTick(() => {
+    listenerFieldForm.value = {}
+  })
+}
+// 移除监听器字段
+const removeListenerField = (index) => {
+  // debugger
+  ElMessageBox.confirm('确认移除该字段吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      fieldsListOfListener.value.splice(index, 1)
+      listenerForm.value.fields.splice(index, 1)
+    })
+    .catch(() => console.info('操作取消'))
+}
+// 移除监听器
+const removeListener = (index) => {
+  debugger
+  ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      bpmnElementListeners.value.splice(index, 1)
+      elementListenersList.value.splice(index, 1)
+      updateElementExtensions(
+        bpmnElement.value,
+        otherExtensionList.value.concat(bpmnElementListeners.value)
+      )
+    })
+    .catch(() => console.info('操作取消'))
+}
+// 保存监听器配置
+const saveListenerConfig = async () => {
+  // debugger
+  let validateStatus = await listenerFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  const listenerObject = createListenerObject(listenerForm.value, false, prefix)
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.value.push(listenerObject)
+    elementListenersList.value.push(listenerForm.value)
+  } else {
+    bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
+    elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
+  }
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix}:ExecutionListener`
+    ) ?? []
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+  // 4. 隐藏侧边栏
+  listenerFormModelVisible.value = false
+  listenerForm.value = {}
+}
+
+// 打开监听器弹窗
+const processListenerDialogRef = ref()
+const openProcessListenerDialog = async () => {
+  processListenerDialogRef.value.open('execution')
+}
+const selectProcessListener = (listener) => {
+  const listenerForm = initListenerForm2(listener)
+  const listenerObject = createListenerObject(listenerForm, false, prefix)
+  bpmnElementListeners.value.push(listenerObject)
+  elementListenersList.value.push(listenerForm)
+
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix}:ExecutionListener`
+    ) ?? []
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetListenersList()
+      })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue
new file mode 100644
index 0000000..21088ab
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue
@@ -0,0 +1,85 @@
+<!-- 执行器选择 -->
+<template>
+  <Dialog title="请选择监听器" v-model="dialogVisible" width="1024px">
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table-column label="名字" align="center" prop="name" />
+        <el-table-column label="类型" align="center" prop="type">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.BPM_PROCESS_LISTENER_TYPE" :value="scope.row.type" />
+          </template>
+        </el-table-column>
+        <el-table-column label="事件" align="center" prop="event" />
+        <el-table-column label="值类型" align="center" prop="valueType">
+          <template #default="scope">
+            <dict-tag
+              :type="DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE"
+              :value="scope.row.valueType"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="值" align="center" prop="value" />
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button link type="primary" @click="select(scope.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>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { ProcessListenerApi, ProcessListenerVO } from '@/api/bpm/processListener'
+import { DICT_TYPE } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+
+/** BPM 流程 表单 */
+defineOptions({ name: 'ProcessListenerDialog' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const loading = ref(true) // 列表的加载中
+const list = ref<ProcessListenerVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  type: '',
+  status: CommonStatusEnum.ENABLE
+})
+
+/** 打开弹窗 */
+const open = async (type: string) => {
+  queryParams.pageNo = 1
+  queryParams.type = type
+  getList()
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProcessListenerApi.getProcessListenerPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const select = async (row) => {
+  dialogVisible.value = false
+  // 发送操作成功的事件
+  emit('select', row)
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
new file mode 100644
index 0000000..76e0c80
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
@@ -0,0 +1,491 @@
+<template>
+  <div class="panel-tab__content">
+    <el-table :data="elementListenersList" size="small" border>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column
+        label="事件类型"
+        min-width="80px"
+        show-overflow-tooltip
+        :formatter="(row) => listenerEventTypeObject[row.event]"
+      />
+      <el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
+      <el-table-column
+        label="监听器类型"
+        min-width="80px"
+        show-overflow-tooltip
+        :formatter="(row) => listenerTypeObject[row.listenerType]"
+      />
+      <el-table-column label="操作" width="90px">
+        <template #default="scope">
+          <el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
+            >编辑</el-button
+          >
+          <el-divider direction="vertical" />
+          <el-button
+            size="small"
+            link
+            style="color: #ff4d4f"
+            @click="removeListener(scope.row, scope.$index)"
+            >移除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <XButton
+        size="small"
+        type="primary"
+        preIcon="ep:plus"
+        title="添加监听器"
+        @click="openListenerForm(null)"
+      />
+      <XButton
+        type="success"
+        preIcon="ep:select"
+        title="选择监听器"
+        size="small"
+        @click="openProcessListenerDialog"
+      />
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer
+      v-model="listenerFormModelVisible"
+      title="任务监听器"
+      :size="`${width}px`"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef">
+        <el-form-item
+          label="事件类型"
+          prop="event"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerForm.event">
+            <el-option
+              v-for="i in Object.keys(listenerEventTypeObject)"
+              :key="i"
+              :label="listenerEventTypeObject[i]"
+              :value="i"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="监听器ID"
+          prop="id"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.id" clearable />
+        </el-form-item>
+        <el-form-item
+          label="监听器类型"
+          prop="listenerType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerForm.listenerType">
+            <el-option
+              v-for="i in Object.keys(listenerTypeObject)"
+              :key="i"
+              :label="listenerTypeObject[i]"
+              :value="i"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'classListener'"
+          label="Java类"
+          prop="class"
+          key="listener-class"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.class" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'expressionListener'"
+          label="表达式"
+          prop="expression"
+          key="listener-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.expression" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+          label="代理表达式"
+          prop="delegateExpression"
+          key="listener-delegate"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.delegateExpression" clearable />
+        </el-form-item>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <el-form-item
+            label="脚本格式"
+            prop="scriptFormat"
+            key="listener-script-format"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+          >
+            <el-input v-model="listenerForm.scriptFormat" clearable />
+          </el-form-item>
+          <el-form-item
+            label="脚本类型"
+            prop="scriptType"
+            key="listener-script-type"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+          >
+            <el-select v-model="listenerForm.scriptType">
+              <el-option label="内联脚本" value="inlineScript" />
+              <el-option label="外部脚本" value="externalScript" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'inlineScript'"
+            label="脚本内容"
+            prop="value"
+            key="listener-script"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+          >
+            <el-input v-model="listenerForm.value" clearable />
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'externalScript'"
+            label="资源地址"
+            prop="resource"
+            key="listener-resource"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+          >
+            <el-input v-model="listenerForm.resource" clearable />
+          </el-form-item>
+        </template>
+
+        <template v-if="listenerForm.event === 'timeout'">
+          <el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
+            <el-select v-model="listenerForm.eventDefinitionType">
+              <el-option label="日期" value="date" />
+              <el-option label="持续时长" value="duration" />
+              <el-option label="循环" value="cycle" />
+              <el-option label="无" value="null" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
+            label="定时器"
+            prop="eventTimeDefinitions"
+            key="eventTimeDefinitions"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
+          >
+            <el-input v-model="listenerForm.eventTimeDefinitions" clearable />
+          </el-form-item>
+        </template>
+      </el-form>
+
+      <el-divider />
+      <p class="listener-filed__title">
+        <span><Icon icon="ep:menu" />注入字段：</span>
+        <el-button size="small" type="primary" @click="openListenerFieldForm(null)"
+          >添加字段</el-button
+        >
+      </p>
+      <el-table
+        :data="fieldsListOfListener"
+        size="small"
+        max-height="240"
+        fit
+        border
+        style="flex: none"
+      >
+        <el-table-column label="序号" width="50px" type="index" />
+        <el-table-column label="字段名称" min-width="100px" prop="name" />
+        <el-table-column
+          label="字段类型"
+          min-width="80px"
+          show-overflow-tooltip
+          :formatter="(row) => fieldTypeObject[row.fieldType]"
+        />
+        <el-table-column
+          label="字段值/表达式"
+          min-width="100px"
+          show-overflow-tooltip
+          :formatter="(row) => row.string || row.expression"
+        />
+        <el-table-column label="操作" width="100px">
+          <template #default="scope">
+            <el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
+              >编辑</el-button
+            >
+            <el-divider direction="vertical" />
+            <el-button
+              size="small"
+              link
+              style="color: #ff4d4f"
+              @click="removeListenerField(scope.row, scope.$index)"
+              >移除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="element-drawer__button">
+        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 注入西段 编辑/创建 部分 -->
+    <el-dialog
+      title="字段配置"
+      v-model="listenerFieldFormModelVisible"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        :model="listenerFieldForm"
+        size="small"
+        label-width="96px"
+        ref="listenerFieldFormRef"
+        style="height: 136px"
+      >
+        <el-form-item
+          label="字段名称："
+          prop="name"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.name" clearable />
+        </el-form-item>
+        <el-form-item
+          label="字段类型："
+          prop="fieldType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerFieldForm.fieldType">
+            <el-option
+              v-for="i in Object.keys(fieldTypeObject)"
+              :key="i"
+              :label="fieldTypeObject[i]"
+              :value="i"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'string'"
+          label="字段值："
+          prop="string"
+          key="field-string"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.string" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'expression'"
+          label="表达式："
+          prop="expression"
+          key="field-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.expression" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+
+  <!-- 选择弹窗 -->
+  <ProcessListenerDialog ref="processListenerDialogRef" @select="selectProcessListener" />
+</template>
+<script lang="ts" setup>
+import { ElMessageBox } from 'element-plus'
+import { createListenerObject, updateElementExtensions } from '../../utils'
+import {
+  initListenerForm,
+  initListenerType,
+  eventType,
+  listenerType,
+  fieldType,
+  initListenerForm2
+} from './utilSelf'
+import ProcessListenerDialog from '@/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue'
+
+defineOptions({ name: 'UserTaskListeners' })
+
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+const elementListenersList = ref<any[]>([])
+const listenerEventTypeObject = ref(eventType)
+const listenerTypeObject = ref(listenerType)
+const listenerFormModelVisible = ref(false)
+const listenerForm = ref<any>({})
+const fieldTypeObject = ref(fieldType)
+const fieldsListOfListener = ref<any[]>([])
+const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
+const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
+const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
+const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
+const bpmnElement = ref()
+const bpmnElementListeners = ref()
+const otherExtensionList = ref()
+const listenerFormRef = ref()
+const listenerFieldFormRef = ref()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const resetListenersList = () => {
+  console.log(
+    bpmnInstances().bpmnElement,
+    'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement'
+  )
+  bpmnElement.value = bpmnInstances().bpmnElement
+  otherExtensionList.value = []
+  bpmnElementListeners.value =
+    bpmnElement.value.businessObject?.extensionElements?.values.filter(
+      (ex) => ex.$type === `${prefix}:TaskListener`
+    ) ?? []
+  elementListenersList.value = bpmnElementListeners.value.map((listener) =>
+    initListenerType(listener)
+  )
+}
+const openListenerForm = (listener, index?) => {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener)
+    editingListenerIndex.value = index
+  } else {
+    listenerForm.value = {}
+    editingListenerIndex.value = -1 // 标记为新增
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field) => ({
+      ...field,
+      fieldType: field.string ? 'string' : 'expression'
+    }))
+  } else {
+    fieldsListOfListener.value = []
+    listenerForm.value['fields'] = []
+  }
+  // 打开侧边栏并清楚验证状态
+  listenerFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFormRef.value) listenerFormRef.value.clearValidate()
+  })
+}
+// 移除监听器
+const removeListener = (listener, index?) => {
+  console.log(listener, 'listener')
+  ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      bpmnElementListeners.value.splice(index, 1)
+      elementListenersList.value.splice(index, 1)
+      updateElementExtensions(
+        bpmnElement.value,
+        otherExtensionList.value.concat(bpmnElementListeners.value)
+      )
+    })
+    .catch(() => console.info('操作取消'))
+}
+// 保存监听器
+const saveListenerConfig = async () => {
+  let validateStatus = await listenerFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  const listenerObject = createListenerObject(listenerForm.value, true, prefix)
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.value.push(listenerObject)
+    elementListenersList.value.push(listenerForm.value)
+  } else {
+    bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
+    elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
+  }
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix}:TaskListener`
+    ) ?? []
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+  // 4. 隐藏侧边栏
+  listenerFormModelVisible.value = false
+  listenerForm.value = {}
+}
+// 打开监听器字段编辑弹窗
+const openListenerFieldForm = (field, index?) => {
+  listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
+  editingListenerFieldIndex.value = field ? index : -1
+  listenerFieldFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate()
+  })
+}
+// 保存监听器注入字段
+const saveListenerFiled = async () => {
+  let validateStatus = await listenerFieldFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(listenerFieldForm.value)
+    listenerForm.value.fields.push(listenerFieldForm.value)
+  } else {
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+  }
+  listenerFieldFormModelVisible.value = false
+  nextTick(() => {
+    listenerFieldForm.value = {}
+  })
+}
+// 移除监听器字段
+const removeListenerField = (field, index) => {
+  console.log(field, 'field')
+  ElMessageBox.confirm('确认移除该字段吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      fieldsListOfListener.value.splice(index, 1)
+      listenerForm.value.fields.splice(index, 1)
+    })
+    .catch(() => console.info('操作取消'))
+}
+
+// 打开监听器弹窗
+const processListenerDialogRef = ref()
+const openProcessListenerDialog = async () => {
+  processListenerDialogRef.value.open('task')
+}
+const selectProcessListener = (listener) => {
+  const listenerForm = initListenerForm2(listener)
+  const listenerObject = createListenerObject(listenerForm, true, prefix)
+  bpmnElementListeners.value.push(listenerObject)
+  elementListenersList.value.push(listenerForm)
+
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix}:TaskListener`
+    ) ?? []
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetListenersList()
+      })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/template.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/template.js
new file mode 100644
index 0000000..430dc64
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/template.js
@@ -0,0 +1,178 @@
+export const template = (isTaskListener) => {
+  return `
+  <div class="panel-tab__content">
+    <el-table :data="elementListenersList" size="small" border>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column label="事件类型" min-width="100px" prop="event" />
+      <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
+      <el-table-column label="操作" width="90px">
+        <template #default="scope">
+          <el-button size="small" type="primary" link @click="openListenerForm(scope, scope.$index)">编辑</el-button>
+          <el-divider direction="vertical" />
+          <el-button size="small" type="primary" link style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <el-button size="small" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
+      <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
+        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerForm.event">
+            <el-option label="start" value="start" />
+            <el-option label="end" value="end" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerForm.listenerType">
+            <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'classListener'"
+          label="Java类"
+          prop="class"
+          key="listener-class"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.class" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'expressionListener'"
+          label="表达式"
+          prop="expression"
+          key="listener-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.expression" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+          label="代理表达式"
+          prop="delegateExpression"
+          key="listener-delegate"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.delegateExpression" clearable />
+        </el-form-item>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <el-form-item
+            label="脚本格式"
+            prop="scriptFormat"
+            key="listener-script-format"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+          >
+            <el-input v-model="listenerForm.scriptFormat" clearable />
+          </el-form-item>
+          <el-form-item
+            label="脚本类型"
+            prop="scriptType"
+            key="listener-script-type"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+          >
+            <el-select v-model="listenerForm.scriptType">
+              <el-option label="内联脚本" value="inlineScript" />
+              <el-option label="外部脚本" value="externalScript" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'inlineScript'"
+            label="脚本内容"
+            prop="value"
+            key="listener-script"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+          >
+            <el-input v-model="listenerForm.value" clearable />
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'externalScript'"
+            label="资源地址"
+            prop="resource"
+            key="listener-resource"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+          >
+            <el-input v-model="listenerForm.resource" clearable />
+          </el-form-item>
+        </template>
+        ${
+          isTaskListener
+            ? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
+              "<el-select v-model='listenerForm.eventDefinitionType'>" +
+              "<el-option label='日期' value='date' />" +
+              "<el-option label='持续时长' value='duration' />" +
+              "<el-option label='循环' value='cycle' />" +
+              "<el-option label='无' value='' />" +
+              '</el-select>' +
+              '</el-form-item>' +
+              "<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
+              "<el-input v-model='listenerForm.eventDefinitions' clearable />" +
+              '</el-form-item>'
+            : ''
+        }
+      </el-form>
+      <el-divider />
+      <p class="listener-filed__title">
+        <span><i class="el-icon-menu"></i>注入字段：</span>
+        <el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+      </p>
+      <el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
+        <el-table-column label="序号" width="50px" type="index" />
+        <el-table-column label="字段名称" min-width="100px" prop="name" />
+        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
+        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
+        <el-table-column label="操作" width="100px">
+          <template #default="scope">
+            <el-button size="small" type="primary" link @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
+            <el-divider direction="vertical" />
+            <el-button size="small" type="primary" link style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="element-drawer__button">
+        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 注入西段 编辑/创建 部分 -->
+    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
+      <el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
+        <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-input v-model="listenerFieldForm.name" clearable />
+        </el-form-item>
+        <el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerFieldForm.fieldType">
+            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'string'"
+          label="字段值："
+          prop="string"
+          key="field-string"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.string" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'expression'"
+          label="表达式："
+          prop="expression"
+          key="field-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.expression" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+  `
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts
new file mode 100644
index 0000000..b4eb1d2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts
@@ -0,0 +1,89 @@
+// 初始化表单数据
+export function initListenerForm(listener) {
+  let self = {
+    ...listener
+  }
+  if (listener.script) {
+    self = {
+      ...listener,
+      ...listener.script,
+      scriptType: listener.script.resource ? 'externalScript' : 'inlineScript'
+    }
+  }
+  if (listener.event === 'timeout' && listener.eventDefinitions) {
+    if (listener.eventDefinitions.length) {
+      let k = ''
+      for (const key in listener.eventDefinitions[0]) {
+        console.log(listener.eventDefinitions, key)
+        if (key.indexOf('time') !== -1) {
+          k = key
+          self.eventDefinitionType = key.replace('time', '').toLowerCase()
+        }
+      }
+      console.log(k)
+      self.eventTimeDefinitions = listener.eventDefinitions[0][k].body
+    }
+  }
+  return self
+}
+
+export function initListenerType(listener) {
+  let listenerType
+  if (listener.class) listenerType = 'classListener'
+  if (listener.expression) listenerType = 'expressionListener'
+  if (listener.delegateExpression) listenerType = 'delegateExpressionListener'
+  if (listener.script) listenerType = 'scriptListener'
+  return {
+    ...JSON.parse(JSON.stringify(listener)),
+    ...(listener.script ?? {}),
+    listenerType: listenerType
+  }
+}
+
+/** 将 ProcessListenerDO 转换成 initListenerForm 想同的 Form 对象 */
+export function initListenerForm2(processListener) {
+  if (processListener.valueType === 'class') {
+    return {
+      listenerType: 'classListener',
+      class: processListener.value,
+      event: processListener.event,
+      fields: []
+    }
+  } else if (processListener.valueType === 'expression') {
+    return {
+      listenerType: 'expressionListener',
+      expression: processListener.value,
+      event: processListener.event,
+      fields: []
+    }
+  } else if (processListener.valueType === 'delegateExpression') {
+    return {
+      listenerType: 'delegateExpressionListener',
+      delegateExpression: processListener.value,
+      event: processListener.event,
+      fields: []
+    }
+  }
+  throw new Error('未知的监听器类型')
+}
+
+export const listenerType = {
+  classListener: 'Java 类',
+  expressionListener: '表达式',
+  delegateExpressionListener: '代理表达式',
+  scriptListener: '脚本'
+}
+
+export const eventType = {
+  create: '创建',
+  assignment: '指派',
+  complete: '完成',
+  delete: '删除',
+  update: '更新',
+  timeout: '超时'
+}
+
+export const fieldType = {
+  string: '字符串',
+  expression: '表达式'
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
new file mode 100644
index 0000000..99ee6f8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
@@ -0,0 +1,421 @@
+<template>
+  <div class="panel-tab__content">
+    <el-radio-group
+      v-if="type === 'UserTask'"
+      v-model="approveMethod"
+      @change="onApproveMethodChange"
+    >
+      <div class="flex-col">
+        <div v-for="(item, index) in APPROVE_METHODS" :key="index">
+          <el-radio :value="item.value" :label="item.value">
+            {{ item.label }}
+          </el-radio>
+          <el-form-item prop="approveRatio">
+            <el-input-number
+              v-model="approveRatio"
+              :min="10"
+              :max="100"
+              :step="10"
+              size="small"
+              v-if="
+                item.value === ApproveMethodType.APPROVE_BY_RATIO &&
+                approveMethod === ApproveMethodType.APPROVE_BY_RATIO
+              "
+              @change="onApproveRatioChange"
+            />
+          </el-form-item>
+        </div>
+      </div>
+    </el-radio-group>
+    <div v-else>
+      除了UserTask以外节点的多实例待实现
+    </div>
+    <!-- 与Simple设计器配置合并，保留以前的代码 -->
+    <el-form label-width="90px" style="display: none">
+      <el-form-item label="快捷配置">
+        <el-button size="small" @click="changeConfig('依次审批')">依次审批</el-button>
+        <el-button size="small" @click="changeConfig('会签')">会签</el-button>
+        <el-button size="small" @click="changeConfig('或签')">或签</el-button>
+      </el-form-item>
+      <el-form-item label="会签类型">
+        <el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
+          <el-option label="并行多重事件" value="ParallelMultiInstance" />
+          <el-option label="时序多重事件" value="SequentialMultiInstance" />
+          <el-option label="无" value="Null" />
+        </el-select>
+      </el-form-item>
+      <template
+        v-if="
+          loopCharacteristics === 'ParallelMultiInstance' ||
+          loopCharacteristics === 'SequentialMultiInstance'
+        "
+      >
+        <el-form-item label="循环数量" key="loopCardinality">
+          <el-input
+            v-model="loopInstanceForm.loopCardinality"
+            clearable
+            @change="updateLoopCardinality"
+          />
+        </el-form-item>
+        <el-form-item label="集合" key="collection" v-show="false">
+          <el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
+        </el-form-item>
+        <!-- add by 芋艿：由于「元素变量」暂时用不到，所以这里 display 为 none -->
+        <el-form-item label="元素变量" key="elementVariable" style="display: none">
+          <el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
+        </el-form-item>
+        <el-form-item label="完成条件" key="completionCondition">
+          <el-input
+            v-model="loopInstanceForm.completionCondition"
+            clearable
+            @change="updateLoopCondition"
+          />
+        </el-form-item>
+        <!-- add by 芋艿：由于「异步状态」暂时用不到，所以这里 display 为 none -->
+        <el-form-item label="异步状态" key="async" style="display: none">
+          <el-checkbox
+            v-model="loopInstanceForm.asyncBefore"
+            label="异步前"
+            value="异步前"
+            @change="updateLoopAsync('asyncBefore')"
+          />
+          <el-checkbox
+            v-model="loopInstanceForm.asyncAfter"
+            label="异步后"
+            value="异步后"
+            @change="updateLoopAsync('asyncAfter')"
+          />
+          <el-checkbox
+            v-model="loopInstanceForm.exclusive"
+            v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
+            label="排除"
+            value="排除"
+            @change="updateLoopAsync('exclusive')"
+          />
+        </el-form-item>
+        <el-form-item
+          label="重试周期"
+          prop="timeCycle"
+          v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
+          key="timeCycle"
+        >
+          <el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
+        </el-form-item>
+      </template>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ApproveMethodType, APPROVE_METHODS } from '@/components/SimpleProcessDesignerV2/src/consts'
+
+defineOptions({ name: 'ElementMultiInstance' })
+
+const props = defineProps({
+  businessObject: Object,
+  type: String,
+  id: String
+})
+const prefix = inject('prefix')
+const loopCharacteristics = ref('')
+//默认配置，用来覆盖原始不存在的选项，避免报错
+const defaultLoopInstanceForm = ref({
+  completionCondition: '',
+  loopCardinality: '',
+  extensionElements: [],
+  asyncAfter: false,
+  asyncBefore: false,
+  exclusive: false
+})
+const loopInstanceForm = ref<any>({})
+const bpmnElement = ref(null)
+const multiLoopInstance = ref(null)
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const getElementLoop = (businessObject) => {
+  if (!businessObject.loopCharacteristics) {
+    loopCharacteristics.value = 'Null'
+    loopInstanceForm.value = {}
+    return
+  }
+  if (businessObject.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
+    loopCharacteristics.value = 'StandardLoop'
+    loopInstanceForm.value = {}
+    return
+  }
+  if (businessObject.loopCharacteristics.isSequential) {
+    loopCharacteristics.value = 'SequentialMultiInstance'
+  } else {
+    loopCharacteristics.value = 'ParallelMultiInstance'
+  }
+  // 合并配置
+  loopInstanceForm.value = {
+    ...defaultLoopInstanceForm.value,
+    ...businessObject.loopCharacteristics,
+    completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? '',
+    loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ''
+  }
+  // 保留当前元素 businessObject 上的 loopCharacteristics 实例
+  multiLoopInstance.value = bpmnInstances().bpmnElement.businessObject.loopCharacteristics
+  // 更新表单
+  if (
+    businessObject.loopCharacteristics.extensionElements &&
+    businessObject.loopCharacteristics.extensionElements.values &&
+    businessObject.loopCharacteristics.extensionElements.values.length
+  ) {
+    loopInstanceForm.value['timeCycle'] =
+      businessObject.loopCharacteristics.extensionElements.values[0].body
+  }
+}
+
+const changeLoopCharacteristicsType = (type) => {
+  // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
+  // 取消多实例配置
+  if (type === 'Null') {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: null
+    })
+    return
+  }
+  // 配置循环
+  if (type === 'StandardLoop') {
+    const loopCharacteristicsObject = bpmnInstances().moddle.create(
+      'bpmn:StandardLoopCharacteristics'
+    )
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: loopCharacteristicsObject
+    })
+    multiLoopInstance.value = null
+    return
+  }
+  // 时序
+  if (type === 'SequentialMultiInstance') {
+    multiLoopInstance.value = bpmnInstances().moddle.create(
+      'bpmn:MultiInstanceLoopCharacteristics',
+      { isSequential: true }
+    )
+  } else {
+    multiLoopInstance.value = bpmnInstances().moddle.create(
+      'bpmn:MultiInstanceLoopCharacteristics',
+      { collection: '${coll_userList}' }
+    )
+  }
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    loopCharacteristics: toRaw(multiLoopInstance.value)
+  })
+}
+
+// 循环基数
+const updateLoopCardinality = (cardinality) => {
+  let loopCardinality = null
+  if (cardinality && cardinality.length) {
+    loopCardinality = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+      body: cardinality
+    })
+  }
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      loopCardinality
+    }
+  )
+}
+
+// 完成条件
+const updateLoopCondition = (condition) => {
+  let completionCondition = null
+  if (condition && condition.length) {
+    completionCondition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+      body: condition
+    })
+  }
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      completionCondition
+    }
+  )
+}
+
+// 重试周期
+const updateLoopTimeCycle = (timeCycle) => {
+  const extensionElements = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      bpmnInstances().moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
+        body: timeCycle
+      })
+    ]
+  })
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      extensionElements
+    }
+  )
+}
+
+// 直接更新的基础信息
+const updateLoopBase = () => {
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      collection: loopInstanceForm.value.collection || null,
+      elementVariable: loopInstanceForm.value.elementVariable || null
+    }
+  )
+}
+
+// 各异步状态
+const updateLoopAsync = (key) => {
+  const { asyncBefore, asyncAfter } = loopInstanceForm.value
+  let asyncAttr = Object.create(null)
+  if (!asyncBefore && !asyncAfter) {
+    // this.$set(this.loopInstanceForm, "exclusive", false);
+    loopInstanceForm.value['exclusive'] = false
+    asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null }
+  } else {
+    asyncAttr[key] = loopInstanceForm.value[key]
+  }
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    asyncAttr
+  )
+}
+
+const changeConfig = (config) => {
+  if (config === '依次审批') {
+    changeLoopCharacteristicsType('SequentialMultiInstance')
+    updateLoopCardinality('1')
+    updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
+  } else if (config === '会签') {
+    changeLoopCharacteristicsType('ParallelMultiInstance')
+    updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
+  } else if (config === '或签') {
+    changeLoopCharacteristicsType('ParallelMultiInstance')
+    updateLoopCondition('${ nrOfCompletedInstances > 0 }')
+  }
+}
+
+/**
+ * -----新版本多实例-----
+ */
+const approveMethod = ref()
+const approveRatio = ref(100)
+const otherExtensions = ref()
+const getElementLoopNew = () => {
+  if (props.type === 'UserTask') {
+    const extensionElements =
+      bpmnElement.value.businessObject?.extensionElements ??
+      bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
+    approveMethod.value = extensionElements.values.filter(
+      (ex) => ex.$type === `${prefix}:ApproveMethod`
+    )?.[0]?.value
+
+    otherExtensions.value =
+      extensionElements.values.filter((ex) => ex.$type !== `${prefix}:ApproveMethod`) ?? []
+
+    if (!approveMethod.value) {
+      approveMethod.value = ApproveMethodType.SEQUENTIAL_APPROVE
+      updateLoopCharacteristics()
+    }
+  }
+}
+const onApproveMethodChange = () => {
+  approveRatio.value = 100
+  updateLoopCharacteristics()
+}
+const onApproveRatioChange = () => {
+  updateLoopCharacteristics()
+}
+const updateLoopCharacteristics = () => {
+  // 根据ApproveMethod生成multiInstanceLoopCharacteristics节点
+  if (approveMethod.value === ApproveMethodType.RANDOM_SELECT_ONE_APPROVE) {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: null
+    })
+  } else {
+    if (approveMethod.value === ApproveMethodType.APPROVE_BY_RATIO) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        { isSequential: false, collection: '${coll_userList}' }
+      )
+      multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
+        'bpmn:FormalExpression',
+        {
+          body: '${ nrOfCompletedInstances/nrOfInstances >= ' + approveRatio.value / 100 + '}'
+        }
+      )
+    }
+    if (approveMethod.value === ApproveMethodType.ANY_APPROVE) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        { isSequential: false, collection: '${coll_userList}' }
+      )
+      multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
+        'bpmn:FormalExpression',
+        {
+          body: '${ nrOfCompletedInstances > 0 }'
+        }
+      )
+    }
+    if (approveMethod.value === ApproveMethodType.SEQUENTIAL_APPROVE) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        { isSequential: true, collection: '${coll_userList}' }
+      )
+      multiLoopInstance.value.loopCardinality = bpmnInstances().moddle.create(
+        'bpmn:FormalExpression',
+        {
+          body: '1'
+        }
+      )
+      multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
+        'bpmn:FormalExpression',
+        {
+          body: '${ nrOfCompletedInstances >= nrOfInstances }'
+        }
+      )
+    }
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: toRaw(multiLoopInstance.value)
+    })
+  }
+
+  // 添加ApproveMethod到ExtensionElements
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...otherExtensions.value,
+      bpmnInstances().moddle.create(`${prefix}:ApproveMethod`, {
+        value: approveMethod.value
+      })
+    ]
+  })
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions
+  })
+}
+
+onBeforeUnmount(() => {
+  multiLoopInstance.value = null
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.id,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        bpmnElement.value = bpmnInstances().bpmnElement
+        // getElementLoop(val)
+        getElementLoopNew()
+      })
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
new file mode 100644
index 0000000..05532c6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="panel-tab__content">
+    <div class="element-property input-property">
+      <div class="element-property__label">元素文档：</div>
+      <div class="element-property__value">
+        <el-input
+          type="textarea"
+          v-model="documentation"
+          resize="vertical"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          @input="updateDocumentation"
+          @blur="updateDocumentation"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ElementOtherConfig' })
+const props = defineProps({
+  id: String
+})
+const documentation = ref('')
+const bpmnElement = ref()
+const bpmnInstances = () => (window as any).bpmnInstances
+const updateDocumentation = () => {
+  ;(bpmnElement.value && bpmnElement.value.id === props.id) ||
+    (bpmnElement.value = bpmnInstances().elementRegistry.get(props.id))
+  const documentations = bpmnInstances().bpmnFactory.create('bpmn:Documentation', {
+    text: documentation.value
+  })
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    documentation: [documentations]
+  })
+}
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.id,
+  (id) => {
+    if (id && id.length) {
+      nextTick(() => {
+        const documentations = bpmnInstances().bpmnElement.businessObject?.documentation
+        documentation.value = documentations && documentations.length ? documentations[0].text : ''
+      })
+    } else {
+      documentation.value = ''
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
new file mode 100644
index 0000000..7bf4f0e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="panel-tab__content">
+    <el-table :data="elementPropertyList" max-height="240" fit border>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
+      <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
+      <el-table-column label="操作" width="110px">
+        <template #default="scope">
+          <el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small">
+            编辑
+          </el-button>
+          <el-divider direction="vertical" />
+          <el-button
+            link
+            size="small"
+            style="color: #ff4d4f"
+            @click="removeAttributes(scope.row, scope.$index)"
+          >
+            移除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <XButton
+        type="primary"
+        preIcon="ep:plus"
+        title="添加属性"
+        @click="openAttributesForm(null, -1)"
+      />
+    </div>
+
+    <el-dialog
+      v-model="propertyFormModelVisible"
+      title="属性配置"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="propertyForm" label-width="80px" ref="attributeFormRef">
+        <el-form-item label="属性名：" prop="name">
+          <el-input v-model="propertyForm.name" clearable />
+        </el-form-item>
+        <el-form-item label="属性值：" prop="value">
+          <el-input v-model="propertyForm.value" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="propertyFormModelVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveAttribute">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElMessageBox } from 'element-plus'
+defineOptions({ name: 'ElementProperties' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+// const width = inject('width')
+
+const elementPropertyList = ref<any[]>([])
+const propertyForm = ref<any>({})
+const editingPropertyIndex = ref(-1)
+const propertyFormModelVisible = ref(false)
+const bpmnElement = ref()
+const otherExtensionList = ref()
+const bpmnElementProperties = ref()
+const bpmnElementPropertyList = ref()
+const attributeFormRef = ref()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const resetAttributesList = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement
+  otherExtensionList.value = [] // 其他扩展配置
+  bpmnElementProperties.value =
+    // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
+      if (ex.$type !== `${prefix}:Properties`) {
+        otherExtensionList.value.push(ex)
+      }
+      return ex.$type === `${prefix}:Properties`
+    }) ?? [];
+
+  // 保存所有的 扩展属性字段
+  bpmnElementPropertyList.value = bpmnElementProperties.value.reduce(
+    (pre, current) => pre.concat(current.values),
+    []
+  )
+  // 复制 显示
+  elementPropertyList.value = JSON.parse(JSON.stringify(bpmnElementPropertyList.value ?? []))
+}
+const openAttributesForm = (attr, index) => {
+  editingPropertyIndex.value = index
+  propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr))
+  propertyFormModelVisible.value = true
+  nextTick(() => {
+    if (attributeFormRef.value) attributeFormRef.value.clearValidate()
+  })
+}
+const removeAttributes = (attr, index) => {
+  console.log(attr, 'attr')
+  ElMessageBox.confirm('确认移除该属性吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      elementPropertyList.value.splice(index, 1)
+      bpmnElementPropertyList.value.splice(index, 1)
+      // 新建一个属性字段的保存列表
+      const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
+        values: bpmnElementPropertyList.value
+      })
+      updateElementExtensions(propertiesObject)
+      resetAttributesList()
+    })
+    .catch(() => console.info('操作取消'))
+}
+const saveAttribute = () => {
+  console.log(propertyForm.value, 'propertyForm.value')
+  const { name, value } = propertyForm.value
+  if (editingPropertyIndex.value !== -1) {
+    bpmnInstances().modeling.updateModdleProperties(
+      toRaw(bpmnElement.value),
+      toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
+      {
+        name,
+        value
+      }
+    )
+  } else {
+    // 新建属性字段
+    const newPropertyObject = bpmnInstances().moddle.create(`${prefix}:Property`, {
+      name,
+      value
+    })
+    // 新建一个属性字段的保存列表
+    const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
+      values: bpmnElementPropertyList.value.concat([newPropertyObject])
+    })
+    updateElementExtensions(propertiesObject)
+  }
+  propertyFormModelVisible.value = false
+  resetAttributesList()
+}
+const updateElementExtensions = (properties) => {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: otherExtensionList.value.concat([properties])
+  })
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions
+  })
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    if (val) {
+      val && val.length && resetAttributesList()
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue
new file mode 100644
index 0000000..f38f31c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="panel-tab__content">
+    <div class="panel-tab__content--title">
+      <span><Icon icon="ep:menu" style="margin-right: 8px; color: #555" />消息列表</span>
+      <XButton type="primary" title="创建新消息" preIcon="ep:plus" @click="openModel('message')" />
+    </div>
+    <el-table :data="messageList" border>
+      <el-table-column type="index" label="序号" width="60px" />
+      <el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
+      <el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
+    </el-table>
+    <div
+      class="panel-tab__content--title"
+      style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eee"
+    >
+      <span><Icon icon="ep:menu" style="margin-right: 8px; color: #555" />信号列表</span>
+      <XButton type="primary" title="创建新信号" preIcon="ep:plus" @click="openModel('signal')" />
+    </div>
+    <el-table :data="signalList" border>
+      <el-table-column type="index" label="序号" width="60px" />
+      <el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
+      <el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
+    </el-table>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="modelConfig.title"
+      :close-on-click-modal="false"
+      width="400px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="modelObjectForm" label-width="90px">
+        <el-form-item :label="modelConfig.idLabel">
+          <el-input v-model="modelObjectForm.id" clearable />
+        </el-form-item>
+        <el-form-item :label="modelConfig.nameLabel">
+          <el-input v-model="modelObjectForm.name" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addNewObject">保 存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'SignalAndMassage' })
+
+const message = useMessage()
+const signalList = ref<any[]>([])
+const messageList = ref<any[]>([])
+const dialogVisible = ref(false)
+const modelType = ref('')
+const modelObjectForm = ref<any>({})
+const rootElements = ref()
+const messageIdMap = ref()
+const signalIdMap = ref()
+const modelConfig = computed(() => {
+  if (modelType.value === 'message') {
+    return { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' }
+  } else {
+    return { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' }
+  }
+})
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const initDataList = () => {
+  console.log(window, 'window')
+  rootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
+  messageIdMap.value = {}
+  signalIdMap.value = {}
+  messageList.value = []
+  signalList.value = []
+  rootElements.value.forEach((el) => {
+    if (el.$type === 'bpmn:Message') {
+      messageIdMap.value[el.id] = true
+      messageList.value.push({ ...el })
+    }
+    if (el.$type === 'bpmn:Signal') {
+      signalIdMap.value[el.id] = true
+      signalList.value.push({ ...el })
+    }
+  })
+}
+const openModel = (type) => {
+  modelType.value = type
+  modelObjectForm.value = {}
+  dialogVisible.value = true
+}
+const addNewObject = () => {
+  if (modelType.value === 'message') {
+    if (messageIdMap.value[modelObjectForm.value.id]) {
+      message.error('该消息已存在，请修改id后重新保存')
+    }
+    const messageRef = bpmnInstances().moddle.create('bpmn:Message', modelObjectForm.value)
+    rootElements.value.push(messageRef)
+  } else {
+    if (signalIdMap.value[modelObjectForm.value.id]) {
+      message.error('该信号已存在，请修改id后重新保存')
+    }
+    const signalRef = bpmnInstances().moddle.create('bpmn:Signal', modelObjectForm.value)
+    rootElements.value.push(signalRef)
+  }
+  dialogVisible.value = false
+  initDataList()
+}
+
+onMounted(() => {
+  initDataList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
new file mode 100644
index 0000000..3a71b4c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="small" label-width="90px">
+      <!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
+      <el-form-item label="异步延续" style="display: none">
+        <el-checkbox
+          v-model="taskConfigForm.asyncBefore"
+          label="异步前"
+          value="异步前"
+          @change="changeTaskAsync"
+        />
+        <el-checkbox
+          v-model="taskConfigForm.asyncAfter"
+          label="异步后"
+          value="异步后"
+          @change="changeTaskAsync"
+        />
+        <el-checkbox
+          v-model="taskConfigForm.exclusive"
+          v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore"
+          label="排除"
+          value="排除"
+          @change="changeTaskAsync"
+        />
+      </el-form-item>
+      <component :is="witchTaskComponent" v-bind="$props" />
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { installedComponent } from './data'
+
+defineOptions({ name: 'ElementTaskConfig' })
+
+const props = defineProps({
+  id: String,
+  type: String
+})
+const taskConfigForm = ref({
+  asyncAfter: false,
+  asyncBefore: false,
+  exclusive: false
+})
+const witchTaskComponent = ref()
+
+const bpmnElement = ref()
+
+const bpmnInstances = () => (window as any).bpmnInstances
+const changeTaskAsync = () => {
+  if (!taskConfigForm.value.asyncBefore && !taskConfigForm.value.asyncAfter) {
+    taskConfigForm.value.exclusive = false
+  }
+  bpmnInstances().modeling.updateProperties(bpmnInstances().bpmnElement, {
+    ...taskConfigForm.value
+  })
+}
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement
+    taskConfigForm.value.asyncBefore = bpmnElement.value?.businessObject?.asyncBefore
+    taskConfigForm.value.asyncAfter = bpmnElement.value?.businessObject?.asyncAfter
+    taskConfigForm.value.exclusive = bpmnElement.value?.businessObject?.exclusive
+  },
+  { immediate: true }
+)
+watch(
+  () => props.type,
+  () => {
+    if (props.type) {
+      witchTaskComponent.value = installedComponent[props.type].component
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/data.ts b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/data.ts
new file mode 100644
index 0000000..805c9ac
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/data.ts
@@ -0,0 +1,36 @@
+import UserTask from './task-components/UserTask.vue'
+import ServiceTask from './task-components/ServiceTask.vue'
+import ScriptTask from './task-components/ScriptTask.vue'
+import ReceiveTask from './task-components/ReceiveTask.vue'
+import CallActivity from './task-components/CallActivity.vue'
+
+export const installedComponent = {
+  UserTask: {
+    name: '用户任务',
+    component: UserTask
+  },
+  ServiceTask: {
+    name: '服务任务',
+    component: ServiceTask
+  },
+  ScriptTask: {
+    name: '脚本任务',
+    component: ScriptTask
+  },
+  ReceiveTask: {
+    name: '接收任务',
+    component: ReceiveTask
+  },
+  CallActivity: {
+    name: '调用活动',
+    component: CallActivity
+  }
+}
+
+export const getTaskCollapseItemName = (elementType) => {
+  return installedComponent[elementType].name
+}
+
+export const isTaskCollapseItemShow = (elementType) => {
+  return installedComponent[elementType]
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue
new file mode 100644
index 0000000..6d8268b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue
@@ -0,0 +1,280 @@
+<template>
+  <div>
+    <el-form label-width="100px">
+      <el-form-item label="实例名称" prop="processInstanceName">
+        <el-input
+          v-model="formData.processInstanceName"
+          clearable
+          placeholder="请输入实例名称"
+          @change="updateCallActivityAttr('processInstanceName')"
+        />
+      </el-form-item>
+
+      <!-- TODO 需要可选择已存在的流程 -->
+      <el-form-item label="被调用流程" prop="calledElement">
+        <el-input
+          v-model="formData.calledElement"
+          clearable
+          placeholder="请输入被调用流程"
+          @change="updateCallActivityAttr('calledElement')"
+        />
+      </el-form-item>
+
+      <el-form-item label="继承变量" prop="inheritVariables">
+        <el-switch
+          v-model="formData.inheritVariables"
+          @change="updateCallActivityAttr('inheritVariables')"
+        />
+      </el-form-item>
+
+      <el-form-item label="继承业务键" prop="inheritBusinessKey">
+        <el-switch
+          v-model="formData.inheritBusinessKey"
+          @change="updateCallActivityAttr('inheritBusinessKey')"
+        />
+      </el-form-item>
+
+      <el-form-item v-if="!formData.inheritBusinessKey" label="业务键表达式" prop="businessKey">
+        <el-input
+          v-model="formData.businessKey"
+          clearable
+          placeholder="请输入业务键表达式"
+          @change="updateCallActivityAttr('businessKey')"
+        />
+      </el-form-item>
+
+      <el-divider />
+      <div>
+        <div class="flex mb-10px">
+          <el-text>输入参数</el-text>
+          <XButton
+            class="ml-auto"
+            type="primary"
+            preIcon="ep:plus"
+            title="添加参数"
+            size="small"
+            @click="openVariableForm('in', null, -1)"
+          />
+        </div>
+        <el-table :data="inVariableList" max-height="240" fit border>
+          <el-table-column label="源" prop="source" min-width="100px" show-overflow-tooltip />
+          <el-table-column label="目标" prop="target" min-width="100px" show-overflow-tooltip />
+          <el-table-column label="操作" width="110px">
+            <template #default="scope">
+              <el-button link @click="openVariableForm('in', scope.row, scope.$index)" size="small">
+                编辑
+              </el-button>
+              <el-divider direction="vertical" />
+              <el-button
+                link
+                size="small"
+                style="color: #ff4d4f"
+                @click="removeVariable('in', scope.$index)"
+              >
+                移除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <el-divider />
+      <div>
+        <div class="flex mb-10px">
+          <el-text>输出参数</el-text>
+          <XButton
+            class="ml-auto"
+            type="primary"
+            preIcon="ep:plus"
+            title="添加参数"
+            size="small"
+            @click="openVariableForm('out', null, -1)"
+          />
+        </div>
+        <el-table :data="outVariableList" max-height="240" fit border>
+          <el-table-column label="源" prop="source" min-width="100px" show-overflow-tooltip />
+          <el-table-column label="目标" prop="target" min-width="100px" show-overflow-tooltip />
+          <el-table-column label="操作" width="110px">
+            <template #default="scope">
+              <el-button
+                link
+                @click="openVariableForm('out', scope.row, scope.$index)"
+                size="small"
+              >
+                编辑
+              </el-button>
+              <el-divider direction="vertical" />
+              <el-button
+                link
+                size="small"
+                style="color: #ff4d4f"
+                @click="removeVariable('out', scope.$index)"
+              >
+                移除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-form>
+
+    <!-- 添加或修改参数 -->
+    <el-dialog
+      v-model="variableDialogVisible"
+      title="参数配置"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="varialbeFormData" label-width="80px" ref="varialbeFormRef">
+        <el-form-item label="源：" prop="source">
+          <el-input v-model="varialbeFormData.source" clearable />
+        </el-form-item>
+        <el-form-item label="目标：" prop="target">
+          <el-input v-model="varialbeFormData.target" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="variableDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveVariable">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'CallActivity' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const message = useMessage()
+
+const formData = ref({
+  processInstanceName: '',
+  calledElement: '',
+  inheritVariables: false,
+  businessKey: '',
+  inheritBusinessKey: false,
+  calledElementType: 'key'
+})
+const inVariableList = ref()
+const outVariableList = ref()
+const variableType = ref() // 参数类型
+const editingVariableIndex = ref(-1) // 编辑参数下标
+const variableDialogVisible = ref(false)
+const varialbeFormRef = ref()
+const varialbeFormData = ref({
+  source: '',
+  target: ''
+})
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+const bpmnElement = ref()
+const otherExtensionList = ref()
+
+const initCallActivity = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement
+  console.log(bpmnElement.value.businessObject, 'callActivity')
+
+  // 初始化所有配置项
+  Object.keys(formData.value).forEach((key) => {
+    formData.value[key] = bpmnElement.value.businessObject[key] ?? formData.value[key]
+  })
+
+  otherExtensionList.value = [] // 其他扩展配置
+  inVariableList.value = []
+  outVariableList.value = []
+  // 初始化输入参数
+  bpmnElement.value.businessObject?.extensionElements?.values?.forEach((ex) => {
+    if (ex.$type === `${prefix}:In`) {
+      inVariableList.value.push(ex)
+    } else if (ex.$type === `${prefix}:Out`) {
+      outVariableList.value.push(ex)
+    } else {
+      otherExtensionList.value.push(ex)
+    }
+  })
+
+  // 默认添加
+  // bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+  //   calledElementType: 'key'
+  // })
+}
+
+const updateCallActivityAttr = (attr) => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    [attr]: formData.value[attr]
+  })
+}
+
+const openVariableForm = (type, data, index) => {
+  editingVariableIndex.value = index
+  variableType.value = type
+  varialbeFormData.value = index === -1 ? {} : { ...data }
+  variableDialogVisible.value = true
+}
+
+const removeVariable = async (type, index) => {
+  try {
+    await message.delConfirm()
+    if (type === 'in') {
+      inVariableList.value.splice(index, 1)
+    }
+    if (type === 'out') {
+      outVariableList.value.splice(index, 1)
+    }
+    updateElementExtensions()
+  } catch {}
+}
+
+const saveVariable = () => {
+  if (editingVariableIndex.value === -1) {
+    if (variableType.value === 'in') {
+      inVariableList.value.push(
+        bpmnInstances().moddle.create(`${prefix}:In`, { ...varialbeFormData.value })
+      )
+    }
+    if (variableType.value === 'out') {
+      outVariableList.value.push(
+        bpmnInstances().moddle.create(`${prefix}:Out`, { ...varialbeFormData.value })
+      )
+    }
+    updateElementExtensions()
+  } else {
+    if (variableType.value === 'in') {
+      inVariableList.value[editingVariableIndex.value].source = varialbeFormData.value.source
+      inVariableList.value[editingVariableIndex.value].target = varialbeFormData.value.target
+    }
+    if (variableType.value === 'out') {
+      outVariableList.value[editingVariableIndex.value].source = varialbeFormData.value.source
+      outVariableList.value[editingVariableIndex.value].target = varialbeFormData.value.target
+    }
+  }
+  variableDialogVisible.value = false
+}
+
+const updateElementExtensions = () => {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [...inVariableList.value, ...outVariableList.value, ...otherExtensionList.value]
+  })
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions
+  })
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        initCallActivity()
+      })
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue
new file mode 100644
index 0000000..a038e69
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue
@@ -0,0 +1,70 @@
+<!-- 表达式选择 -->
+<template>
+  <Dialog title="请选择表达式" v-model="dialogVisible" width="1024px">
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table-column label="名字" align="center" prop="name" />
+        <el-table-column label="表达式" align="center" prop="expression" />
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button link type="primary" @click="select(scope.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>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { CommonStatusEnum } from '@/utils/constants'
+import { ProcessExpressionApi, ProcessExpressionVO } from '@/api/bpm/processExpression'
+
+/** BPM 流程 表单 */
+defineOptions({ name: 'ProcessExpressionDialog' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const loading = ref(true) // 列表的加载中
+const list = ref<ProcessExpressionVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  type: '',
+  status: CommonStatusEnum.ENABLE
+})
+
+/** 打开弹窗 */
+const open = (type: string) => {
+  queryParams.pageNo = 1
+  queryParams.type = type
+  getList()
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProcessExpressionApi.getProcessExpressionPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const select = async (row) => {
+  dialogVisible.value = false
+  // 发送操作成功的事件
+  emit('select', row)
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
new file mode 100644
index 0000000..83ed24e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
@@ -0,0 +1,125 @@
+<template>
+  <div style="margin-top: 16px">
+    <el-form-item label="消息实例">
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: nowrap;
+        "
+      >
+        <el-select v-model="bindMessageId" @change="updateTaskMessage">
+          <el-option
+            v-for="key in Object.keys(messageMap)"
+            :value="key"
+            :label="messageMap[key]"
+            :key="key"
+          />
+        </el-select>
+        <XButton
+          type="primary"
+          preIcon="ep:plus"
+          style="margin-left: 8px"
+          @click="openMessageModel"
+        />
+      </div>
+    </el-form-item>
+    <el-dialog
+      v-model="messageModelVisible"
+      :close-on-click-modal="false"
+      title="创建新消息"
+      width="400px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="newMessageForm" size="small" label-width="90px">
+        <el-form-item label="消息ID">
+          <el-input v-model="newMessageForm.id" clearable />
+        </el-form-item>
+        <el-form-item label="消息名称">
+          <el-input v-model="newMessageForm.name" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ReceiveTask' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+
+const message = useMessage()
+
+const bindMessageId = ref('')
+const newMessageForm = ref<any>({})
+const messageMap = ref<any>({})
+const messageModelVisible = ref(false)
+const bpmnElement = ref<any>()
+const bpmnMessageRefsMap = ref<any>()
+const bpmnRootElements = ref<any>()
+
+const bpmnInstances = () => (window as any).bpmnInstances
+const getBindMessage = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement
+  bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
+}
+const openMessageModel = () => {
+  messageModelVisible.value = true
+  newMessageForm.value = {}
+}
+const createNewMessage = () => {
+  if (messageMap.value[newMessageForm.value.id]) {
+    message.error('该消息已存在，请修改id后重新保存')
+    return
+  }
+  const newMessage = bpmnInstances().moddle.create('bpmn:Message', newMessageForm.value)
+  bpmnRootElements.value.push(newMessage)
+  messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
+  bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
+  messageModelVisible.value = false
+}
+const updateTaskMessage = (messageId) => {
+  if (messageId === '-1') {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      messageRef: null
+    })
+  } else {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      messageRef: bpmnMessageRefsMap.value[messageId]
+    })
+  }
+}
+
+onMounted(() => {
+  bpmnMessageRefsMap.value = Object.create(null)
+  bpmnRootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
+  bpmnRootElements.value
+    .filter((el) => el.$type === 'bpmn:Message')
+    .forEach((m) => {
+      bpmnMessageRefsMap.value[m.id] = m
+      messageMap.value[m.id] = m.name
+    })
+  messageMap.value['-1'] = '无'
+})
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+watch(
+  () => props.id,
+  () => {
+    // bpmnElement.value = bpmnInstances().bpmnElement
+    nextTick(() => {
+      getBindMessage()
+    })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
new file mode 100644
index 0000000..683fef3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
@@ -0,0 +1,99 @@
+<template>
+  <div style="margin-top: 16px">
+    <el-form-item label="脚本格式">
+      <el-input
+        v-model="scriptTaskForm.scriptFormat"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+    <el-form-item label="脚本类型">
+      <el-select v-model="scriptTaskForm.scriptType">
+        <el-option label="内联脚本" value="inline" />
+        <el-option label="外部资源" value="external" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
+      <el-input
+        v-model="scriptTaskForm.script"
+        type="textarea"
+        resize="vertical"
+        :autosize="{ minRows: 2, maxRows: 4 }"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+    <el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
+      <el-input
+        v-model="scriptTaskForm.resource"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+    <el-form-item label="结果变量">
+      <el-input
+        v-model="scriptTaskForm.resultVariable"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ScriptTask' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+const defaultTaskForm = ref({
+  scriptFormat: '',
+  script: '',
+  resource: '',
+  resultVariable: ''
+})
+const scriptTaskForm = ref<any>({})
+const bpmnElement = ref()
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const resetTaskForm = () => {
+  for (let key in defaultTaskForm.value) {
+    let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
+    scriptTaskForm.value[key] = value
+  }
+  scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
+}
+const updateElementTask = () => {
+  let taskAttr = Object.create(null)
+  taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
+  taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
+  if (scriptTaskForm.value.scriptType === 'inline') {
+    taskAttr.script = scriptTaskForm.value.script || null
+    taskAttr.resource = null
+  } else {
+    taskAttr.resource = scriptTaskForm.value.resource || null
+    taskAttr.script = null
+  }
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
+}
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement
+    nextTick(() => {
+      resetTaskForm()
+    })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ServiceTask.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ServiceTask.vue
new file mode 100644
index 0000000..2f9c535
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/ServiceTask.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <el-form-item label="执行类型" key="executeType">
+      <el-select v-model="serviceTaskForm.executeType">
+        <el-option label="Java类" value="class" />
+        <el-option label="表达式" value="expression" />
+        <el-option label="代理表达式" value="delegateExpression" />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'class'"
+      label="Java类"
+      prop="class"
+      key="execute-class"
+    >
+      <el-input v-model="serviceTaskForm.class" clearable @change="updateElementTask" />
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'expression'"
+      label="表达式"
+      prop="expression"
+      key="execute-expression"
+    >
+      <el-input v-model="serviceTaskForm.expression" clearable @change="updateElementTask" />
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'delegateExpression'"
+      label="代理表达式"
+      prop="delegateExpression"
+      key="execute-delegate"
+    >
+      <el-input v-model="serviceTaskForm.delegateExpression" clearable @change="updateElementTask" />
+    </el-form-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ServiceTask' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+
+const defaultTaskForm = ref({
+  executeType: '',
+  class: '',
+  expression: '',
+  delegateExpression: ''
+})
+
+const serviceTaskForm = ref<any>({})
+const bpmnElement = ref()
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const resetTaskForm = () => {
+  for (let key in defaultTaskForm.value) {
+    let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
+    serviceTaskForm.value[key] = value
+    if (value) {
+      serviceTaskForm.value.executeType = key
+    }
+  }
+}
+
+const updateElementTask = () => {
+  let taskAttr = Object.create(null);
+  const type = serviceTaskForm.value.executeType;
+  for (let key in serviceTaskForm.value) {
+    if (key !== 'executeType' && key !== type) taskAttr[key] = null;
+  }
+  taskAttr[type] = serviceTaskForm.value[type] || "";
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
+}
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement
+    nextTick(() => {
+      resetTaskForm()
+    })
+  },
+  { immediate: true }
+)
+
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
new file mode 100644
index 0000000..81088cc
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
@@ -0,0 +1,469 @@
+<template>
+  <el-form label-width="120px">
+    <el-form-item label="规则类型" prop="candidateStrategy">
+      <el-select
+        v-model="userTaskForm.candidateStrategy"
+        clearable
+        style="width: 100%"
+        @change="changeCandidateStrategy"
+      >
+        <el-option
+          v-for="(dict, index) in CANDIDATE_STRATEGY"
+          :key="index"
+          :label="dict.label"
+          :value="dict.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy == CandidateStrategy.ROLE"
+      label="指定角色"
+      prop="candidateParam"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="
+        userTaskForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
+        userTaskForm.candidateStrategy == CandidateStrategy.DEPT_LEADER ||
+        userTaskForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+      "
+      label="指定部门"
+      prop="candidateParam"
+      span="24"
+    >
+      <el-tree-select
+        ref="treeRef"
+        v-model="userTaskForm.candidateParam"
+        :data="deptTreeOptions"
+        :props="defaultProps"
+        empty-text="加载中，请稍后"
+        multiple
+        node-key="id"
+        show-checkbox
+        @change="updateElementTask"
+      />
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy == CandidateStrategy.POST"
+      label="指定岗位"
+      prop="candidateParam"
+      span="24"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option v-for="item in postOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy == CandidateStrategy.USER"
+      label="指定用户"
+      prop="candidateParam"
+      span="24"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option
+          v-for="item in userOptions"
+          :key="item.id"
+          :label="item.nickname"
+          :value="item.id"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.USER_GROUP"
+      label="指定用户组"
+      prop="candidateParam"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option
+          v-for="item in userGroupOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.FORM_USER"
+      label="表单内用户字段"
+      prop="formUser"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        style="width: 100%"
+        @change="handleFormUserChange"
+      >
+        <el-option
+          v-for="(item, idx) in userFieldOnFormOptions"
+          :key="idx"
+          :label="item.title"
+          :value="item.field"
+          :disabled="!item.required"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER"
+      label="表单内部门字段"
+      prop="formDept"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option
+          v-for="(item, idx) in deptFieldOnFormOptions"
+          :key="idx"
+          :label="item.title"
+          :value="item.field"
+          :disabled="!item.required"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="
+        userTaskForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+        userTaskForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
+        userTaskForm.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+        userTaskForm.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER
+      "
+      :label="deptLevelLabel!"
+      prop="deptLevel"
+      span="24"
+    >
+      <el-select v-model="deptLevel" clearable @change="updateElementTask">
+        <el-option
+          v-for="(item, index) in MULTI_LEVEL_DEPT"
+          :key="index"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.EXPRESSION"
+      label="流程表达式"
+      prop="candidateParam"
+    >
+      <el-input
+        type="textarea"
+        v-model="userTaskForm.candidateParam[0]"
+        clearable
+        style="width: 100%"
+        @change="updateElementTask"
+      />
+      <XButton
+        class="!w-1/1 mt-5px"
+        type="success"
+        preIcon="ep:select"
+        title="选择表达式"
+        size="small"
+        @click="openProcessExpressionDialog"
+      />
+      <!-- 选择弹窗 -->
+      <ProcessExpressionDialog ref="processExpressionDialogRef" @select="selectProcessExpression" />
+    </el-form-item>
+
+    <el-form-item label="跳过表达式" prop="skipExpression">
+      <el-input
+        type="textarea"
+        v-model="userTaskForm.skipExpression"
+        clearable
+        style="width: 100%"
+        @change="updateSkipExpression"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import {
+  CANDIDATE_STRATEGY,
+  CandidateStrategy,
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT
+} from '@/components/SimpleProcessDesignerV2/src/consts'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as RoleApi from '@/api/system/role'
+import * as DeptApi from '@/api/system/dept'
+import * as PostApi from '@/api/system/post'
+import * as UserApi from '@/api/system/user'
+import * as UserGroupApi from '@/api/bpm/userGroup'
+import ProcessExpressionDialog from './ProcessExpressionDialog.vue'
+import { ProcessExpressionVO } from '@/api/bpm/processExpression'
+import { useFormFieldsPermission } from '@/components/SimpleProcessDesignerV2/src/node'
+
+defineOptions({ name: 'UserTask' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const userTaskForm = ref({
+  candidateStrategy: undefined, // 分配规则
+  candidateParam: [], // 分配选项
+  skipExpression: '' // 跳过表达式
+})
+const bpmnElement = ref()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const deptTreeOptions = ref() // 部门树
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+
+const { formFieldOptions } = useFormFieldsPermission(FieldPermissionType.READ)
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect')
+})
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect')
+})
+
+const deptLevel = ref(1)
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源'
+  if (userTaskForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) {
+    label = label + '(指定部门向上)'
+  } else if (userTaskForm.value.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER) {
+    label = label + '(表单内部门向上)'
+  } else {
+    label = label + '(发起人部门向上)'
+  }
+  return label
+})
+
+const otherExtensions = ref()
+
+const resetTaskForm = () => {
+  const businessObject = bpmnElement.value.businessObject
+  if (!businessObject) {
+    return
+  }
+
+  const extensionElements =
+    businessObject?.extensionElements ??
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
+  userTaskForm.value.candidateStrategy = extensionElements.values?.filter(
+    (ex) => ex.$type === `${prefix}:CandidateStrategy`
+  )?.[0]?.value
+  const candidateParamStr = extensionElements.values?.filter(
+    (ex) => ex.$type === `${prefix}:CandidateParam`
+  )?.[0]?.value
+  if (candidateParamStr && candidateParamStr.length > 0) {
+    if (userTaskForm.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
+      // 特殊：流程表达式，只有一个 input 输入框
+      userTaskForm.value.candidateParam = [candidateParamStr]
+    } else if (userTaskForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) {
+      // 特殊：多级不部门负责人，需要通过'|'分割
+      userTaskForm.value.candidateParam = candidateParamStr
+        .split('|')[0]
+        .split(',')
+        .map((item) => {
+          // 如果数字超出了最大安全整数范围，则将其作为字符串处理
+          let num = Number(item)
+          return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER ? item : num
+        })
+      deptLevel.value = +candidateParamStr.split('|')[1]
+    } else if (
+      userTaskForm.value.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
+      userTaskForm.value.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+    ) {
+      userTaskForm.value.candidateParam = +candidateParamStr
+      deptLevel.value = +candidateParamStr
+    } else if (userTaskForm.value.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER) {
+      userTaskForm.value.candidateParam = candidateParamStr.split('|')[0]
+      deptLevel.value = +candidateParamStr.split('|')[1]
+    } else {
+      userTaskForm.value.candidateParam = candidateParamStr.split(',').map((item) => {
+        // 如果数字超出了最大安全整数范围，则将其作为字符串处理
+        let num = Number(item)
+        return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER ? item : num
+      })
+    }
+  } else {
+    userTaskForm.value.candidateParam = []
+  }
+
+  otherExtensions.value =
+    extensionElements.values?.filter(
+      (ex) => ex.$type !== `${prefix}:CandidateStrategy` && ex.$type !== `${prefix}:CandidateParam`
+    ) ?? []
+
+  // 跳过表达式
+  if (businessObject.skipExpression != undefined) {
+    userTaskForm.value.skipExpression = businessObject.skipExpression
+  } else {
+    userTaskForm.value.skipExpression = ''
+  }
+
+  // 改用通过extensionElements来存储数据
+  return
+  if (businessObject.candidateStrategy != undefined) {
+    userTaskForm.value.candidateStrategy = parseInt(businessObject.candidateStrategy) as any
+  } else {
+    userTaskForm.value.candidateStrategy = undefined
+  }
+  if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
+    if (userTaskForm.value.candidateStrategy === 60) {
+      // 特殊：流程表达式，只有一个 input 输入框
+      userTaskForm.value.candidateParam = [businessObject.candidateParam]
+    } else {
+      userTaskForm.value.candidateParam = businessObject.candidateParam
+        .split(',')
+        .map((item) => item)
+    }
+  } else {
+    userTaskForm.value.candidateParam = []
+  }
+}
+
+/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
+const changeCandidateStrategy = () => {
+  userTaskForm.value.candidateParam = []
+  deptLevel.value = 1
+  if (userTaskForm.value.candidateStrategy === CandidateStrategy.FORM_USER) {
+    // 特殊处理表单内用户字段，当只有发起人选项时应选中发起人
+    if (!userFieldOnFormOptions.value || userFieldOnFormOptions.value.length <= 1) {
+      userTaskForm.value.candidateStrategy = CandidateStrategy.START_USER
+    }
+  }
+  updateElementTask()
+}
+
+/** 选中某个 options 时候，更新 bpmn 图  */
+const updateElementTask = () => {
+  let candidateParam =
+    userTaskForm.value.candidateParam instanceof Array
+      ? userTaskForm.value.candidateParam.join(',')
+      : userTaskForm.value.candidateParam
+
+  // 特殊处理多级部门情况
+  if (
+    userTaskForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+    userTaskForm.value.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER
+  ) {
+    candidateParam += '|' + deptLevel.value
+  }
+  // 特殊处理发起人部门负责人、发起人连续部门负责人
+  if (
+    userTaskForm.value.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
+    userTaskForm.value.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+  ) {
+    candidateParam = deptLevel.value + ''
+  }
+
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...otherExtensions.value,
+      bpmnInstances().moddle.create(`${prefix}:CandidateStrategy`, {
+        value: userTaskForm.value.candidateStrategy
+      }),
+      bpmnInstances().moddle.create(`${prefix}:CandidateParam`, {
+        value: candidateParam
+      })
+    ]
+  })
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions
+  })
+
+  // 改用通过extensionElements来存储数据
+  return
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    candidateStrategy: userTaskForm.value.candidateStrategy,
+    candidateParam: userTaskForm.value.candidateParam.join(',')
+  })
+}
+
+const updateSkipExpression = () => {
+  if (userTaskForm.value.skipExpression && userTaskForm.value.skipExpression !== '') {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      skipExpression: userTaskForm.value.skipExpression
+    })
+  } else {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      skipExpression: null
+    })
+  }
+}
+
+// 打开监听器弹窗
+const processExpressionDialogRef = ref()
+const openProcessExpressionDialog = async () => {
+  processExpressionDialogRef.value.open()
+}
+const selectProcessExpression = (expression: ProcessExpressionVO) => {
+  userTaskForm.value.candidateParam = [expression.expression]
+  updateElementTask()
+}
+
+const handleFormUserChange = (e) => {
+  if (e === 'PROCESS_START_USER_ID') {
+    userTaskForm.value.candidateParam = []
+    userTaskForm.value.candidateStrategy = CandidateStrategy.START_USER
+  }
+  updateElementTask()
+}
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement
+    nextTick(() => {
+      resetTaskForm()
+    })
+  },
+  { immediate: true }
+)
+
+onMounted(async () => {
+  // 获得角色列表
+  roleOptions.value = await RoleApi.getSimpleRoleList()
+  // 获得部门列表
+  const deptOptions = await DeptApi.getSimpleDeptList()
+  deptTreeOptions.value = handleTree(deptOptions, 'id')
+  // 获得岗位列表
+  postOptions.value = await PostApi.getSimplePostList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 获得用户组列表
+  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+})
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/element-variables.scss b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/element-variables.scss
new file mode 100644
index 0000000..0646f8e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/element-variables.scss
@@ -0,0 +1,70 @@
+/* 改变主题色变量 */
+$--color-primary: #1890ff;
+$--color-danger: #ff4d4f;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@use '~element-ui/packages/theme-chalk/src/index';
+
+.el-table td,
+.el-table th {
+  color: #333;
+}
+.el-drawer__header {
+  padding: 16px 16px 8px 16px;
+  margin: 0;
+  line-height: 24px;
+  font-size: 18px;
+  color: #303133;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e8e8e8;
+}
+div[class^='el-drawer']:focus,
+span:focus {
+  outline: none;
+}
+.el-drawer__body {
+  box-sizing: border-box;
+  padding: 16px;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.el-dialog {
+  margin-top: 50vh !important;
+  transform: translateY(-50%);
+  overflow: hidden;
+}
+.el-dialog__wrapper {
+  overflow: hidden;
+  max-height: 100vh;
+}
+.el-dialog__header {
+  padding: 16px 16px 8px 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e8e8e8;
+}
+.el-dialog__body {
+  padding: 16px;
+  max-height: 80vh;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+.el-dialog__footer {
+  padding: 16px;
+  box-sizing: border-box;
+  border-top: 1px solid #e8e8e8;
+}
+.el-dialog__close {
+  font-weight: 600;
+}
+.el-select {
+  width: 100%;
+}
+.el-divider:not(.el-divider--horizontal) {
+  margin: 0 8px;
+}
+.el-divider.el-divider--horizontal {
+  margin: 16px 0;
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/index.scss b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/index.scss
new file mode 100644
index 0000000..2404760
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/index.scss
@@ -0,0 +1,117 @@
+@use './process-designer.scss';
+@use './process-panel.scss';
+
+$success-color: #4eb819;
+$primary-color: #409EFF;
+$danger-color: #F56C6C;
+$cancel-color: #909399;
+
+.process-viewer {
+  position: relative;
+  border: 1px solid #EFEFEF;
+  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
+
+  .success-arrow {
+    fill: $success-color;
+    stroke: $success-color;
+  }
+
+  .success-conditional {
+    fill: white;
+    stroke: $success-color;
+  }
+
+  .success.djs-connection {
+    .djs-visual path {
+      stroke: $success-color!important;
+      //marker-end: url(#sequenceflow-end-white-success)!important;
+    }
+  }
+
+  .success.djs-connection.condition-expression {
+    .djs-visual path {
+      //marker-start: url(#conditional-flow-marker-white-success)!important;
+    }
+  }
+
+  .success.djs-shape {
+    .djs-visual rect {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $success-color!important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .primary.djs-shape {
+    .djs-visual rect {
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $primary-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .danger.djs-shape {
+    .djs-visual rect {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $danger-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .cancel.djs-shape {
+    .djs-visual rect {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $cancel-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+}
+
+.process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
+  display: none;
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/process-designer.scss b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/process-designer.scss
new file mode 100644
index 0000000..bca0258
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/process-designer.scss
@@ -0,0 +1,159 @@
+@use 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
+
+// 边框被 token-simulation 样式覆盖了
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color) !important;
+  border-radius: 2px;
+}
+
+.my-process-designer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  .my-process-designer__header {
+    width: 100%;
+    min-height: 36px;
+    .el-button {
+      text-align: center;
+    }
+    .el-button-group {
+      margin: 4px;
+    }
+    .el-tooltip__popper {
+      .el-button {
+        width: 100%;
+        text-align: left;
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+      .el-button:hover {
+        background: rgba(64, 158, 255, 0.8);
+        color: #ffffff;
+      }
+    }
+    .align {
+      position: relative;
+      i {
+        &:after {
+          content: '|';
+          position: absolute;
+          // transform: rotate(90deg) translate(200%, 60%);
+          transform: rotate(180deg) translate(271%, -10%);
+        }
+      }
+    }
+    .align.align-left i {
+      transform: rotate(90deg);
+    }
+    .align.align-right i {
+      transform: rotate(-90deg);
+    }
+    .align.align-top i {
+      transform: rotate(180deg);
+    }
+    .align.align-bottom i {
+      transform: rotate(0deg);
+    }
+    .align.align-center i {
+      transform: rotate(0deg);
+      &:after {
+        // transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(0deg) translate(-0%, -5%);
+      }
+    }
+    .align.align-middle i {
+      transform: rotate(-90deg);
+      &:after {
+        // transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(0deg) translate(0, -10%);
+      }
+    }
+  }
+  .my-process-designer__container {
+    display: inline-flex;
+    width: 100%;
+    flex: 1;
+    .my-process-designer__canvas {
+      flex: 1;
+      height: 100%;
+      position: relative;
+      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
+        repeat !important;
+      div.toggle-mode {
+        display: none;
+      }
+    }
+    .my-process-designer__property-panel {
+      height: 100%;
+      overflow: scroll;
+      overflow-y: auto;
+      z-index: 10;
+      * {
+        box-sizing: border-box;
+      }
+    }
+    // svg {
+    //   width: 100%;
+    //   height: 100%;
+    //   min-height: 100%;
+    //   overflow: hidden;
+    // }
+  }
+}
+
+//侧边栏配置
+// .djs-palette .two-column .open {
+.open {
+  // .djs-palette.open {
+  .djs-palette-entries {
+    div[class^='bpmn-icon-']:before,
+    div[class*='bpmn-icon-']:before {
+      line-height: unset;
+    }
+    div.entry {
+      position: relative;
+    }
+    div.entry:hover {
+      &::after {
+        width: max-content;
+        content: attr(title);
+        vertical-align: text-bottom;
+        position: absolute;
+        right: -10px;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        transform: translateX(100%);
+        font-size: 0.5em;
+        display: inline-block;
+        text-decoration: inherit;
+        font-variant: normal;
+        text-transform: none;
+        background: #fafafa;
+        box-shadow: 0 0 6px #eeeeee;
+        border: 1px solid #cccccc;
+        box-sizing: border-box;
+        padding: 0 16px;
+        border-radius: 4px;
+        z-index: 100;
+      }
+    }
+  }
+}
+pre {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  max-height: calc(80vh - 32px);
+  overflow-y: auto;
+}
+.hljs {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.hljs * {
+  font-family: Consolas, Monaco, monospace;
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/process-panel.scss b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/process-panel.scss
new file mode 100644
index 0000000..f840cdd
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/theme/process-panel.scss
@@ -0,0 +1,107 @@
+.process-panel__container {
+  box-sizing: border-box;
+  padding: 0 8px;
+  border-left: 1px solid #eeeeee;
+  box-shadow: 0 0 8px #cccccc;
+  max-height: 100%;
+  overflow-y: scroll;
+}
+.panel-tab__title {
+  font-weight: 600;
+  padding: 0 8px;
+  font-size: 1.1em;
+  line-height: 1.2em;
+  i {
+    margin-right: 8px;
+    font-size: 1.2em;
+  }
+}
+.panel-tab__content {
+  width: 100%;
+  box-sizing: border-box;
+  border-top: 1px solid #eeeeee;
+  padding: 8px 16px;
+  .panel-tab__content--title {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    span {
+      flex: 1;
+      text-align: left;
+    }
+  }
+}
+.element-property {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  margin: 8px 0;
+  .element-property__label {
+    display: block;
+    width: 90px;
+    text-align: right;
+    overflow: hidden;
+    padding-right: 12px;
+    line-height: 32px;
+    font-size: 14px;
+    box-sizing: border-box;
+  }
+  .element-property__value {
+    flex: 1;
+    line-height: 32px;
+  }
+  .el-form-item {
+    width: 100%;
+    margin-bottom: 0;
+    padding-bottom: 18px;
+  }
+}
+.list-property {
+  flex-direction: column;
+  .element-listener-item {
+    width: 100%;
+    display: inline-grid;
+    grid-template-columns: 16px auto 32px 32px;
+    grid-column-gap: 8px;
+  }
+  .element-listener-item + .element-listener-item {
+    margin-top: 8px;
+  }
+}
+.listener-filed__title {
+  display: inline-flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0;
+  span {
+    width: 200px;
+    text-align: left;
+    font-size: 14px;
+  }
+  i {
+    margin-right: 8px;
+  }
+}
+.element-drawer__button {
+  margin-top: 8px;
+  width: 100%;
+  display: inline-flex;
+  justify-content: space-around;
+}
+.element-drawer__button > .el-button {
+  width: 100%;
+}
+
+.el-collapse-item__content {
+  padding-bottom: 0;
+}
+.el-input.is-disabled .el-input__inner {
+  color: #999999;
+}
+.el-form-item.el-form-item--mini {
+  margin-bottom: 0;
+  & + .el-form-item {
+    margin-top: 16px;
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/utils.ts b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/utils.ts
new file mode 100644
index 0000000..8996788
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/package/utils.ts
@@ -0,0 +1,78 @@
+import { toRaw } from 'vue'
+const bpmnInstances = () => (window as any)?.bpmnInstances
+// 创建监听器实例
+export function createListenerObject(options, isTask, prefix) {
+  debugger
+  const listenerObj = Object.create(null)
+  listenerObj.event = options.event
+  isTask && (listenerObj.id = options.id) // 任务监听器特有的 id 字段
+  switch (options.listenerType) {
+    case 'scriptListener':
+      listenerObj.script = createScriptObject(options, prefix)
+      break
+    case 'expressionListener':
+      listenerObj.expression = options.expression
+      break
+    case 'delegateExpressionListener':
+      listenerObj.delegateExpression = options.delegateExpression
+      break
+    default:
+      listenerObj.class = options.class
+  }
+  // 注入字段
+  if (options.fields) {
+    listenerObj.fields = options.fields.map((field) => {
+      return createFieldObject(field, prefix)
+    })
+  }
+  // 任务监听器的 定时器 设置
+  if (isTask && options.event === 'timeout' && !!options.eventDefinitionType) {
+    const timeDefinition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+      body: options.eventTimeDefinitions
+    })
+    const TimerEventDefinition = bpmnInstances().moddle.create('bpmn:TimerEventDefinition', {
+      id: `TimerEventDefinition_${uuid(8)}`,
+      [`time${options.eventDefinitionType.replace(/^\S/, (s) => s.toUpperCase())}`]: timeDefinition
+    })
+    listenerObj.eventDefinitions = [TimerEventDefinition]
+  }
+  return bpmnInstances().moddle.create(
+    `${prefix}:${isTask ? 'TaskListener' : 'ExecutionListener'}`,
+    listenerObj
+  )
+}
+
+// 创建 监听器的注入字段 实例
+export function createFieldObject(option, prefix) {
+  const { name, fieldType, string, expression } = option
+  const fieldConfig = fieldType === 'string' ? { name, string } : { name, expression }
+  return bpmnInstances().moddle.create(`${prefix}:Field`, fieldConfig)
+}
+
+// 创建脚本实例
+export function createScriptObject(options, prefix) {
+  const { scriptType, scriptFormat, value, resource } = options
+  const scriptConfig =
+    scriptType === 'inlineScript' ? { scriptFormat, value } : { scriptFormat, resource }
+  return bpmnInstances().moddle.create(`${prefix}:Script`, scriptConfig)
+}
+
+// 更新元素扩展属性
+export function updateElementExtensions(element, extensionList) {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: extensionList
+  })
+  bpmnInstances().modeling.updateProperties(toRaw(element), {
+    extensionElements: extensions
+  })
+}
+
+// 创建一个id
+export function uuid(length = 8, chars?) {
+  let result = ''
+  const charsString = chars || '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
+  for (let i = length; i > 0; --i) {
+    result += charsString[Math.floor(Math.random() * charsString.length)]
+  }
+  return result
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/highlight/index.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/highlight/index.js
new file mode 100644
index 0000000..5df38c9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/highlight/index.js
@@ -0,0 +1,5 @@
+const hljs = require('highlight.js/lib/core')
+hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'))
+hljs.registerLanguage('json', require('highlight.js/lib/languages/json'))
+
+module.exports = hljs
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/custom-renderer/CustomRenderer.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/custom-renderer/CustomRenderer.js
new file mode 100644
index 0000000..e876031
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/custom-renderer/CustomRenderer.js
@@ -0,0 +1,14 @@
+import BpmnRenderer from 'bpmn-js/lib/draw/BpmnRenderer'
+
+export default function CustomRenderer(config, eventBus, styles, pathMap, canvas, textRenderer) {
+  BpmnRenderer.call(this, config, eventBus, styles, pathMap, canvas, textRenderer, 2000)
+
+  this.handlers['label'] = function () {
+    return null
+  }
+}
+
+const F = function () {} // 核心，利用空对象作为中介；
+F.prototype = BpmnRenderer.prototype // 核心，将父类的原型赋值给空对象F；
+CustomRenderer.prototype = new F() // 核心，将 F的实例赋值给子类；
+CustomRenderer.prototype.constructor = CustomRenderer // 修复子类CustomRenderer的构造器指向，防止原型链的混乱；
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/custom-renderer/index.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/custom-renderer/index.js
new file mode 100644
index 0000000..79d8bd0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/custom-renderer/index.js
@@ -0,0 +1,6 @@
+import CustomRenderer from './CustomRenderer'
+
+export default {
+  __init__: ['customRenderer'],
+  customRenderer: ['type', CustomRenderer]
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/rules/CustomRules.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/rules/CustomRules.js
new file mode 100644
index 0000000..9fa1d14
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/rules/CustomRules.js
@@ -0,0 +1,16 @@
+import BpmnRules from 'bpmn-js/lib/features/rules/BpmnRules'
+import inherits from 'inherits'
+
+export default function CustomRules(eventBus) {
+  BpmnRules.call(this, eventBus)
+}
+
+inherits(CustomRules, BpmnRules)
+
+CustomRules.prototype.canDrop = function () {
+  return false
+}
+
+CustomRules.prototype.canMove = function () {
+  return false
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/rules/index.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/rules/index.js
new file mode 100644
index 0000000..12cf05a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/modules/rules/index.js
@@ -0,0 +1,6 @@
+import CustomRules from './CustomRules'
+
+export default {
+  __init__: ['customRules'],
+  customRules: ['type', CustomRules]
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/translations.ts b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/translations.ts
new file mode 100644
index 0000000..5f9b9a5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/translations.ts
@@ -0,0 +1,25 @@
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  'Exclusive Gateway': 'Exklusives Gateway',
+  'Parallel Gateway': 'Paralleles Gateway',
+  'Inclusive Gateway': 'Inklusives Gateway',
+  'Complex Gateway': 'Komplexes Gateway',
+  'Event based Gateway': 'Ereignis-basiertes Gateway',
+  'Message Start Event': '消息启动事件',
+  'Timer Start Event': '定时启动事件',
+  'Conditional Start Event': '条件启动事件',
+  'Signal Start Event': '信号启动事件',
+  'Error Start Event': '错误启动事件',
+  'Escalation Start Event': '升级启动事件',
+  'Compensation Start Event': '补偿启动事件',
+  'Message Start Event (non-interrupting)': '消息启动事件 (非中断)',
+  'Timer Start Event (non-interrupting)': '定时启动事件 (非中断)',
+  'Conditional Start Event (non-interrupting)': '条件启动事件 (非中断)',
+  'Signal Start Event (non-interrupting)': '信号启动事件 (非中断)',
+  'Escalation Start Event (non-interrupting)': '升级启动事件 (非中断)'
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/utils/directive/clickOutSide.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/utils/directive/clickOutSide.js
new file mode 100644
index 0000000..bb71d44
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/utils/directive/clickOutSide.js
@@ -0,0 +1,39 @@
+//outside.js
+
+const ctx = '@@clickoutsideContext'
+
+export default {
+  bind(el, binding, vnode) {
+    const ele = el
+    const documentHandler = (e) => {
+      if (!vnode.context || ele.contains(e.target)) {
+        return false
+      }
+      // 调用指令回调
+      if (binding.expression) {
+        vnode.context[el[ctx].methodName](e)
+      } else {
+        el[ctx].bindingFn(e)
+      }
+    }
+    // 将方法添加到ele
+    ele[ctx] = {
+      documentHandler,
+      methodName: binding.expression,
+      bindingFn: binding.value
+    }
+
+    setTimeout(() => {
+      document.addEventListener('touchstart', documentHandler) // 为document绑定事件
+    })
+  },
+  update(el, binding) {
+    const ele = el
+    ele[ctx].methodName = binding.expression
+    ele[ctx].bindingFn = binding.value
+  },
+  unbind(el) {
+    document.removeEventListener('touchstart', el[ctx].documentHandler) // 解绑
+    delete el[ctx]
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/utils/index.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/utils/index.js
new file mode 100644
index 0000000..7d970ec
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/utils/index.js
@@ -0,0 +1,10 @@
+export function debounce(fn, delay = 500) {
+  let timer
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+    timer = setTimeout(fn.bind(this, ...args), delay)
+  }
+}
diff --git a/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/utils/xml2json.js b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/utils/xml2json.js
new file mode 100644
index 0000000..fe1a52f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/bpmnProcessDesigner/src/utils/xml2json.js
@@ -0,0 +1,50 @@
+function xmlStr2XmlObj(xmlStr) {
+  let xmlObj = {}
+  if (document.all) {
+    const xmlDom = new window.ActiveXObject('Microsoft.XMLDOM')
+    xmlDom.loadXML(xmlStr)
+    xmlObj = xmlDom
+  } else {
+    xmlObj = new DOMParser().parseFromString(xmlStr, 'text/xml')
+  }
+  return xmlObj
+}
+
+function xml2json(xml) {
+  try {
+    let obj = {}
+    if (xml.children.length > 0) {
+      for (let i = 0; i < xml.children.length; i++) {
+        const item = xml.children.item(i)
+        const nodeName = item.nodeName
+        if (typeof obj[nodeName] == 'undefined') {
+          obj[nodeName] = xml2json(item)
+        } else {
+          if (typeof obj[nodeName].push == 'undefined') {
+            const old = obj[nodeName]
+            obj[nodeName] = []
+            obj[nodeName].push(old)
+          }
+          obj[nodeName].push(xml2json(item))
+        }
+      }
+    } else {
+      obj = xml.textContent
+    }
+    return obj
+  } catch (e) {
+    console.log(e.message)
+  }
+}
+
+function xmlObj2json(xml) {
+  const xmlObj = xmlStr2XmlObj(xml)
+  console.log(xmlObj)
+  let jsonObj = {}
+  if (xmlObj.childNodes.length > 0) {
+    jsonObj = xml2json(xmlObj)
+  }
+  return jsonObj
+}
+
+export default xmlObj2json
diff --git a/marketing-ui/admin-ui/src/components/index.ts b/marketing-ui/admin-ui/src/components/index.ts
new file mode 100644
index 0000000..4d030c3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/components/index.ts
@@ -0,0 +1,6 @@
+import type { App } from 'vue'
+import { Icon } from './Icon'
+
+export const setupGlobCom = (app: App<Element>): void => {
+  app.component('Icon', Icon)
+}
diff --git a/marketing-ui/admin-ui/src/config/axios/config.ts b/marketing-ui/admin-ui/src/config/axios/config.ts
new file mode 100644
index 0000000..8116508
--- /dev/null
+++ b/marketing-ui/admin-ui/src/config/axios/config.ts
@@ -0,0 +1,28 @@
+const config: {
+  base_url: string
+  result_code: number | string
+  default_headers: AxiosHeaders
+  request_timeout: number
+} = {
+  /**
+   * api请求基础路径
+   */
+  base_url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL,
+  /**
+   * 接口成功返回状态码
+   */
+  result_code: 200,
+
+  /**
+   * 接口请求超时时间
+   */
+  request_timeout: 30000,
+
+  /**
+   * 默认接口请求类型
+   * 可选值：application/x-www-form-urlencoded multipart/form-data
+   */
+  default_headers: 'application/json'
+}
+
+export { config }
diff --git a/marketing-ui/admin-ui/src/config/axios/errorCode.ts b/marketing-ui/admin-ui/src/config/axios/errorCode.ts
new file mode 100644
index 0000000..94d719f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/config/axios/errorCode.ts
@@ -0,0 +1,6 @@
+export default {
+  '401': '认证失败，无法访问系统资源',
+  '403': '当前操作没有权限',
+  '404': '访问资源不存在',
+  default: '系统未知错误，请反馈给管理员'
+}
diff --git a/marketing-ui/admin-ui/src/config/axios/index.ts b/marketing-ui/admin-ui/src/config/axios/index.ts
new file mode 100644
index 0000000..07719a2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/config/axios/index.ts
@@ -0,0 +1,47 @@
+import { service } from './service'
+
+import { config } from './config'
+
+const { default_headers } = config
+
+const request = (option: any) => {
+  const { headersType, headers, ...otherOption } = option
+  return service({
+    ...otherOption,
+    headers: {
+      'Content-Type': headersType || default_headers,
+      ...headers
+    }
+  })
+}
+export default {
+  get: async <T = any>(option: any) => {
+    const res = await request({ method: 'GET', ...option })
+    return res.data as unknown as T
+  },
+  post: async <T = any>(option: any) => {
+    const res = await request({ method: 'POST', ...option })
+    return res.data as unknown as T
+  },
+  postOriginal: async (option: any) => {
+    const res = await request({ method: 'POST', ...option })
+    return res
+  },
+  delete: async <T = any>(option: any) => {
+    const res = await request({ method: 'DELETE', ...option })
+    return res.data as unknown as T
+  },
+  put: async <T = any>(option: any) => {
+    const res = await request({ method: 'PUT', ...option })
+    return res.data as unknown as T
+  },
+  download: async <T = any>(option: any) => {
+    const res = await request({ method: 'GET', responseType: 'blob', ...option })
+    return res as unknown as Promise<T>
+  },
+  upload: async <T = any>(option: any) => {
+    option.headersType = 'multipart/form-data'
+    const res = await request({ method: 'POST', ...option })
+    return res as unknown as Promise<T>
+  }
+}
diff --git a/marketing-ui/admin-ui/src/config/axios/service.ts b/marketing-ui/admin-ui/src/config/axios/service.ts
new file mode 100644
index 0000000..bf234da
--- /dev/null
+++ b/marketing-ui/admin-ui/src/config/axios/service.ts
@@ -0,0 +1,219 @@
+import axios, { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
+import qs from 'qs'
+import { config } from '@/config/axios/config'
+import { getAccessToken, getRefreshToken, removeToken, setToken } from '@/utils/auth'
+import errorCode from './errorCode'
+
+import { resetRouter } from '@/router'
+import { deleteUserCache } from '@/hooks/web/useCache'
+
+const { result_code, base_url, request_timeout } = config
+
+// 需要忽略的提示。忽略后，自动 Promise.reject('error')
+const ignoreMsgs = [
+  '无效的刷新令牌', // 刷新令牌被删除时，不用提示
+  '刷新令牌已过期' // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
+]
+// 是否显示重新登录
+export const isRelogin = { show: false }
+// Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
+// 请求队列
+let requestList: any[] = []
+// 是否正在刷新中
+let isRefreshToken = false
+// 请求白名单，无须token的接口
+const whiteList: string[] = ['/login', '/refresh-token']
+
+// 创建axios实例
+const service: AxiosInstance = axios.create({
+  baseURL: base_url, // api 的 base_url
+  timeout: request_timeout, // 请求超时时间
+  withCredentials: false, // 禁用 Cookie 等信息
+  // 自定义参数序列化函数
+  paramsSerializer: (params) => {
+    return qs.stringify(params, { allowDots: true })
+  }
+})
+
+// request拦截器
+service.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    // 是否需要设置 token
+    let isToken = (config!.headers || {}).isToken === false
+    whiteList.some((v) => {
+      if (config.url && config.url.indexOf(v) > -1) {
+        return (isToken = false)
+      }
+    })
+    if (getAccessToken() && !isToken) {
+      config.headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token
+    }
+
+    const method = config.method?.toUpperCase()
+    // 防止 GET 请求缓存
+    if (method === 'GET') {
+      config.headers['Cache-Control'] = 'no-cache'
+      config.headers['Pragma'] = 'no-cache'
+    }
+    // 自定义参数序列化函数
+    else if (method === 'POST') {
+      const contentType = config.headers['Content-Type'] || config.headers['content-type']
+      if (contentType === 'application/x-www-form-urlencoded') {
+        if (config.data && typeof config.data !== 'string') {
+          config.data = qs.stringify(config.data)
+        }
+      }
+    }
+    return config
+  },
+  (error: AxiosError) => {
+    // Do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response 拦截器
+service.interceptors.response.use(
+  async (response: AxiosResponse<any>) => {
+    let { data } = response
+    const config = response.config
+    if (!data) {
+      // 返回“[HTTP]请求没有返回值”;
+      throw new Error()
+    }
+    const { t } = useI18n()
+    // 未设置状态码则默认成功状态
+    // 二进制数据则直接返回，例如说 Excel 导出
+    if (
+      response.request.responseType === 'blob' ||
+      response.request.responseType === 'arraybuffer'
+    ) {
+      // 注意：如果导出的响应为 json，说明可能失败了，不直接返回进行下载
+      if (response.data.type !== 'application/json') {
+        return response.data
+      }
+      data = await new Response(response.data).json()
+    }
+    const code = data.code || result_code
+    // 获取错误信息
+    const msg = data.msg || errorCode[code] || errorCode['default']
+    if (ignoreMsgs.indexOf(msg) !== -1) {
+      // 如果是忽略的错误码，直接返回 msg 异常
+      return Promise.reject(msg)
+    } else if (code === 401) {
+      // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
+      if (!isRefreshToken) {
+        isRefreshToken = true
+        // 1. 如果获取不到刷新令牌，则只能执行登出操作
+        if (!getRefreshToken()) {
+          return handleAuthorized()
+        }
+        // 2. 进行刷新访问令牌
+        try {
+          const refreshTokenRes = await refreshToken()
+          // 2.1 刷新成功，则回放队列的请求 + 当前请求
+          setToken((await refreshTokenRes).data.data)
+          config.headers!.Authorization = 'Bearer ' + getAccessToken()
+          requestList.forEach((cb: any) => {
+            cb()
+          })
+          requestList = []
+          return service(config)
+        } catch (e) {
+          // 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
+          // 2.2 刷新失败，只回放队列的请求
+          requestList.forEach((cb: any) => {
+            cb()
+          })
+          // 提示是否要登出。即不回放当前请求！不然会形成递归
+          return handleAuthorized()
+        } finally {
+          requestList = []
+          isRefreshToken = false
+        }
+      } else {
+        // 添加到队列，等待刷新获取到新的令牌
+        return new Promise((resolve) => {
+          requestList.push(() => {
+            config.headers!.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+            resolve(service(config))
+          })
+        })
+      }
+    } else if (code === 500) {
+      ElMessage.error(t('sys.api.errMsg500'))
+      return Promise.reject(new Error(msg))
+    } else if (code === 901) {
+      ElMessage.error({
+        offset: 300,
+        dangerouslyUseHTMLString: true,
+        message:
+          '<div>' +
+          t('sys.api.errMsg901') +
+          '</div>' +
+          '<div> &nbsp; </div>' +
+          '<div>5 分钟搭建本地环境</div>'
+      })
+      return Promise.reject(new Error(msg))
+    } else if (code !== 200) {
+      if (msg === '无效的刷新令牌') {
+        // hard coding：忽略这个提示，直接登出
+        console.log(msg)
+        return handleAuthorized()
+      } else {
+        ElNotification.error({ title: msg })
+      }
+      return Promise.reject('error')
+    } else {
+      return data
+    }
+  },
+  (error: AxiosError) => {
+    console.log('err' + error) // for debug
+    let { message } = error
+    const { t } = useI18n()
+    if (message === 'Network Error') {
+      message = t('sys.api.errorMessage')
+    } else if (message.includes('timeout')) {
+      message = t('sys.api.apiTimeoutMessage')
+    } else if (message.includes('Request failed with status code')) {
+      message = t('sys.api.apiRequestFailed') + message.substr(message.length - 3)
+    }
+    ElMessage.error(message)
+    return Promise.reject(error)
+  }
+)
+
+const refreshToken = async () => {
+  return await axios.post(base_url + '/system/auth/refresh-token?refreshToken=' + getRefreshToken())
+}
+const handleAuthorized = () => {
+  const { t } = useI18n()
+  if (!isRelogin.show) {
+    // 如果已经到登录页面则不进行弹窗提示
+    if (window.location.href.includes('login')) {
+      return
+    }
+    isRelogin.show = true
+    ElMessageBox.confirm(t('sys.api.timeoutMessage'), t('common.confirmTitle'), {
+      showCancelButton: false,
+      closeOnClickModal: false,
+      showClose: false,
+      closeOnPressEscape: false,
+      confirmButtonText: t('login.relogin'),
+      type: 'warning'
+    }).then(() => {
+      resetRouter() // 重置静态路由表
+      deleteUserCache() // 删除用户缓存
+      removeToken()
+      isRelogin.show = false
+      // 干掉token后再走一次路由让它过router.beforeEach的校验
+      window.location.href = window.location.href
+    })
+  }
+  return Promise.reject(t('sys.api.timeoutMessage'))
+}
+export { service }
diff --git a/marketing-ui/admin-ui/src/directives/index.ts b/marketing-ui/admin-ui/src/directives/index.ts
new file mode 100644
index 0000000..1b99988
--- /dev/null
+++ b/marketing-ui/admin-ui/src/directives/index.ts
@@ -0,0 +1,24 @@
+import type { App } from 'vue'
+import { hasRole } from './permission/hasRole'
+import { hasPermi } from './permission/hasPermi'
+
+/**
+ * 导出指令：v-xxx
+ * @methods hasRole 用户权限，用法: v-hasRole
+ * @methods hasPermi 按钮权限，用法: v-hasPermi
+ */
+export const setupAuth = (app: App<Element>) => {
+  hasRole(app)
+  hasPermi(app)
+}
+
+/**
+ * 导出指令：v-mountedFocus
+ */
+export const setupMountedFocus = (app: App<Element>) => {
+  app.directive('mountedFocus', {
+    mounted(el) {
+      el.focus()
+    }
+  })
+}
diff --git a/marketing-ui/admin-ui/src/directives/permission/hasPermi.ts b/marketing-ui/admin-ui/src/directives/permission/hasPermi.ts
new file mode 100644
index 0000000..90cd025
--- /dev/null
+++ b/marketing-ui/admin-ui/src/directives/permission/hasPermi.ts
@@ -0,0 +1,31 @@
+import type { App } from 'vue'
+import { useUserStore } from '@/store/modules/user'
+
+const { t } = useI18n() // 国际化
+
+/** 判断权限的指令 directive */
+export function hasPermi(app: App<Element>) {
+  app.directive('hasPermi', (el, binding) => {
+    const { value } = binding
+
+    if (value && value instanceof Array && value.length > 0) {
+      const hasPermissions = hasPermission(value)
+
+      if (!hasPermissions) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(t('permission.hasPermission'))
+    }
+  })
+}
+
+/** 判断权限的方法 function */
+const userStore = useUserStore()
+const all_permission = '*:*:*'
+export const hasPermission = (permission: string[]) => {
+  return (
+    userStore.permissions.has(all_permission) ||
+    permission.some((permission) => userStore.permissions.has(permission))
+  )
+}
diff --git a/marketing-ui/admin-ui/src/directives/permission/hasRole.ts b/marketing-ui/admin-ui/src/directives/permission/hasRole.ts
new file mode 100644
index 0000000..a512811
--- /dev/null
+++ b/marketing-ui/admin-ui/src/directives/permission/hasRole.ts
@@ -0,0 +1,28 @@
+import type { App } from 'vue'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+
+const { t } = useI18n() // 国际化
+
+export function hasRole(app: App<Element>) {
+  app.directive('hasRole', (el, binding) => {
+    const { wsCache } = useCache()
+    const { value } = binding
+    const super_admin = 'super_admin'
+    const userInfo = wsCache.get(CACHE_KEY.USER)
+    const roles = userInfo?.roles || []
+
+    if (value && value instanceof Array && value.length > 0) {
+      const roleFlag = value
+
+      const hasRole = roles.some((role: string) => {
+        return super_admin === role || roleFlag.includes(role)
+      })
+
+      if (!hasRole) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(t('permission.hasRole'))
+    }
+  })
+}
diff --git a/marketing-ui/admin-ui/src/hooks/event/useScrollTo.ts b/marketing-ui/admin-ui/src/hooks/event/useScrollTo.ts
new file mode 100644
index 0000000..92aec87
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/event/useScrollTo.ts
@@ -0,0 +1,60 @@
+export interface ScrollToParams {
+  el: HTMLElement
+  to: number
+  position: string
+  duration?: number
+  callback?: () => void
+}
+
+const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
+  t /= d / 2
+  if (t < 1) {
+    return (c / 2) * t * t + b
+  }
+  t--
+  return (-c / 2) * (t * (t - 2) - 1) + b
+}
+const move = (el: HTMLElement, position: string, amount: number) => {
+  el[position] = amount
+}
+
+export function useScrollTo({
+  el,
+  position = 'scrollLeft',
+  to,
+  duration = 500,
+  callback
+}: ScrollToParams) {
+  const isActiveRef = ref(false)
+  const start = el[position]
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+
+  function animateScroll() {
+    if (!unref(isActiveRef)) {
+      return
+    }
+    currentTime += increment
+    const val = easeInOutQuad(currentTime, start, change, duration)
+    move(el, position, val)
+    if (currentTime < duration && unref(isActiveRef)) {
+      requestAnimationFrame(animateScroll)
+    } else {
+      if (callback) {
+        callback()
+      }
+    }
+  }
+
+  function run() {
+    isActiveRef.value = true
+    animateScroll()
+  }
+
+  function stop() {
+    isActiveRef.value = false
+  }
+
+  return { start: run, stop }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useCache.ts b/marketing-ui/admin-ui/src/hooks/web/useCache.ts
new file mode 100644
index 0000000..cc1207b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useCache.ts
@@ -0,0 +1,38 @@
+/**
+ * 配置浏览器本地存储的方式，可直接存储对象数组。
+ */
+
+import WebStorageCache from 'web-storage-cache'
+
+type CacheType = 'localStorage' | 'sessionStorage'
+
+export const CACHE_KEY = {
+  // 用户相关
+  ROLE_ROUTERS: 'roleRouters',
+  USER: 'user',
+  // 系统设置
+  IS_DARK: 'isDark',
+  LANG: 'lang',
+  THEME: 'theme',
+  LAYOUT: 'layout',
+  DICT_CACHE: 'dictCache',
+  // 登录表单
+  LoginForm: 'loginForm'
+}
+
+export const useCache = (type: CacheType = 'localStorage') => {
+  const wsCache: WebStorageCache = new WebStorageCache({
+    storage: type
+  })
+
+  return {
+    wsCache
+  }
+}
+
+export const deleteUserCache = () => {
+  const { wsCache } = useCache()
+  wsCache.delete(CACHE_KEY.USER)
+  wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
+  // 注意，不要清理 LoginForm 登录表单
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useConfigGlobal.ts b/marketing-ui/admin-ui/src/hooks/web/useConfigGlobal.ts
new file mode 100644
index 0000000..afb3db3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useConfigGlobal.ts
@@ -0,0 +1,9 @@
+import { ConfigGlobalTypes } from '@/types/configGlobal'
+
+export const useConfigGlobal = () => {
+  const configGlobal = inject('configGlobal', {}) as ConfigGlobalTypes
+
+  return {
+    configGlobal
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useCrudSchemas.ts b/marketing-ui/admin-ui/src/hooks/web/useCrudSchemas.ts
new file mode 100644
index 0000000..458b57e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useCrudSchemas.ts
@@ -0,0 +1,326 @@
+import { reactive } from 'vue'
+import { AxiosPromise } from 'axios'
+import { findIndex } from '@/utils'
+import { eachTree, filter, treeMap } from '@/utils/tree'
+import { getBoolDictOptions, getDictOptions, getIntDictOptions } from '@/utils/dict'
+
+import { FormSchema } from '@/types/form'
+import { TableColumn } from '@/types/table'
+import { DescriptionsSchema } from '@/types/descriptions'
+import { ComponentOptions, ComponentProps } from '@/types/components'
+import { DictTag } from '@/components/DictTag'
+import { cloneDeep, merge } from 'lodash-es'
+
+export type CrudSchema = Omit<TableColumn, 'children'> & {
+  isSearch?: boolean // 是否在查询显示
+  search?: CrudSearchParams // 查询的详细配置
+  isTable?: boolean // 是否在列表显示
+  table?: CrudTableParams // 列表的详细配置
+  isForm?: boolean // 是否在表单显示
+  form?: CrudFormParams // 表单的详细配置
+  isDetail?: boolean // 是否在详情显示
+  detail?: CrudDescriptionsParams // 详情的详细配置
+  children?: CrudSchema[]
+  dictType?: string // 字典类型
+  dictClass?: 'string' | 'number' | 'boolean' // 字典数据类型 string | number | boolean
+}
+
+type CrudSearchParams = {
+  // 是否显示在查询项
+  show?: boolean
+  // 接口
+  api?: () => Promise<any>
+  // 搜索字段
+  field?: string
+} & Omit<FormSchema, 'field'>
+
+type CrudTableParams = {
+  // 是否显示表头
+  show?: boolean
+  // 列宽配置
+  width?: number | string
+  // 列是否固定在左侧或者右侧
+  fixed?: 'left' | 'right'
+} & Omit<FormSchema, 'field'>
+type CrudFormParams = {
+  // 是否显示表单项
+  show?: boolean
+  // 接口
+  api?: () => Promise<any>
+} & Omit<FormSchema, 'field'>
+
+type CrudDescriptionsParams = {
+  // 是否显示表单项
+  show?: boolean
+} & Omit<DescriptionsSchema, 'field'>
+
+interface AllSchemas {
+  searchSchema: FormSchema[]
+  tableColumns: TableColumn[]
+  formSchema: FormSchema[]
+  detailSchema: DescriptionsSchema[]
+}
+
+const { t } = useI18n()
+
+// 过滤所有结构
+export const useCrudSchemas = (
+  crudSchema: CrudSchema[]
+): {
+  allSchemas: AllSchemas
+} => {
+  // 所有结构数据
+  const allSchemas = reactive<AllSchemas>({
+    searchSchema: [],
+    tableColumns: [],
+    formSchema: [],
+    detailSchema: []
+  })
+
+  const searchSchema = filterSearchSchema(crudSchema, allSchemas)
+  allSchemas.searchSchema = searchSchema || []
+
+  const tableColumns = filterTableSchema(crudSchema)
+  allSchemas.tableColumns = tableColumns || []
+
+  const formSchema = filterFormSchema(crudSchema, allSchemas)
+  allSchemas.formSchema = formSchema
+
+  const detailSchema = filterDescriptionsSchema(crudSchema)
+  allSchemas.detailSchema = detailSchema
+
+  return {
+    allSchemas
+  }
+}
+
+// 过滤 Search 结构
+const filterSearchSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => {
+  const searchSchema: FormSchema[] = []
+
+  // 获取字典列表队列
+  const searchRequestTask: Array<() => Promise<void>> = []
+  eachTree(crudSchema, (schemaItem: CrudSchema) => {
+    // 判断是否显示
+    if (schemaItem?.isSearch || schemaItem.search?.show) {
+      let component = schemaItem?.search?.component || 'Input'
+      const options: ComponentOptions[] = []
+      let comonentProps: ComponentProps = {}
+      if (schemaItem.dictType) {
+        const allOptions: ComponentOptions = { label: '全部', value: '' }
+        options.push(allOptions)
+        getDictOptions(schemaItem.dictType).forEach((dict) => {
+          options.push(dict)
+        })
+        comonentProps = {
+          options: options
+        }
+        if (!schemaItem.search?.component) component = 'Select'
+      }
+
+      // updated by AKing: 解决了当使用默认的dict选项时，form中事件不能触发的问题
+      const searchSchemaItem = merge(
+        {
+          // 默认为 input
+          component,
+          ...schemaItem.search,
+          field: schemaItem.field,
+          label: schemaItem.search?.label || schemaItem.label
+        },
+        { componentProps: comonentProps }
+      )
+      if (searchSchemaItem.api) {
+        searchRequestTask.push(async () => {
+          const res = await (searchSchemaItem.api as () => AxiosPromise)()
+          if (res) {
+            const index = findIndex(allSchemas.searchSchema, (v: FormSchema) => {
+              return v.field === searchSchemaItem.field
+            })
+            if (index !== -1) {
+              allSchemas.searchSchema[index]!.componentProps!.options = filterOptions(
+                res,
+                searchSchemaItem.componentProps.optionsAlias?.labelField
+              )
+            }
+          }
+        })
+      }
+      // 删除不必要的字段
+      delete searchSchemaItem.show
+
+      searchSchema.push(searchSchemaItem)
+    }
+  })
+  for (const task of searchRequestTask) {
+    task()
+  }
+  return searchSchema
+}
+
+// 过滤 table 结构
+const filterTableSchema = (crudSchema: CrudSchema[]): TableColumn[] => {
+  const tableColumns = treeMap<CrudSchema>(crudSchema, {
+    conversion: (schema: CrudSchema) => {
+      if (schema?.isTable !== false && schema?.table?.show !== false) {
+        // add by 芋艿：增加对 dict 字典数据的支持
+        if (!schema.formatter && schema.dictType) {
+          schema.formatter = (_: Recordable, __: TableColumn, cellValue: any) => {
+            return h(DictTag, {
+              type: schema.dictType!, // ! 表示一定不为空
+              value: cellValue
+            })
+          }
+        }
+        return {
+          ...schema.table,
+          ...schema
+        }
+      }
+    }
+  })
+
+  // 第一次过滤会有 undefined 所以需要二次过滤
+  return filter<TableColumn>(tableColumns as TableColumn[], (data) => {
+    if (data.children === void 0) {
+      delete data.children
+    }
+    return !!data.field
+  })
+}
+
+// 过滤 form 结构
+const filterFormSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => {
+  const formSchema: FormSchema[] = []
+
+  // 获取字典列表队列
+  const formRequestTask: Array<() => Promise<void>> = []
+
+  eachTree(crudSchema, (schemaItem: CrudSchema) => {
+    // 判断是否显示
+    if (schemaItem?.isForm !== false && schemaItem?.form?.show !== false) {
+      let component = schemaItem?.form?.component || 'Input'
+      let defaultValue: any = ''
+      if (schemaItem.form?.value) {
+        defaultValue = schemaItem.form?.value
+      } else {
+        if (component === 'InputNumber') {
+          defaultValue = 0
+        }
+      }
+      let comonentProps: ComponentProps = {}
+      if (schemaItem.dictType) {
+        const options: ComponentOptions[] = []
+        if (schemaItem.dictClass && schemaItem.dictClass === 'number') {
+          getIntDictOptions(schemaItem.dictType).forEach((dict) => {
+            options.push(dict)
+          })
+        } else if (schemaItem.dictClass && schemaItem.dictClass === 'boolean') {
+          getBoolDictOptions(schemaItem.dictType).forEach((dict) => {
+            options.push(dict)
+          })
+        } else {
+          getDictOptions(schemaItem.dictType).forEach((dict) => {
+            options.push(dict)
+          })
+        }
+        comonentProps = {
+          options: options
+        }
+        if (!(schemaItem.form && schemaItem.form.component)) component = 'Select'
+      }
+
+      // updated by AKing: 解决了当使用默认的dict选项时，form中事件不能触发的问题
+      const formSchemaItem = merge(
+        {
+          // 默认为 input
+          component,
+          value: defaultValue,
+          ...schemaItem.form,
+          field: schemaItem.field,
+          label: schemaItem.form?.label || schemaItem.label
+        },
+        { componentProps: comonentProps }
+      )
+
+      if (formSchemaItem.api) {
+        formRequestTask.push(async () => {
+          const res = await (formSchemaItem.api as () => AxiosPromise)()
+          if (res) {
+            const index = findIndex(allSchemas.formSchema, (v: FormSchema) => {
+              return v.field === formSchemaItem.field
+            })
+            if (index !== -1) {
+              allSchemas.formSchema[index]!.componentProps!.options = filterOptions(
+                res,
+                formSchemaItem.componentProps.optionsAlias?.labelField
+              )
+            }
+          }
+        })
+      }
+
+      // 删除不必要的字段
+      delete formSchemaItem.show
+
+      formSchema.push(formSchemaItem)
+    }
+  })
+
+  for (const task of formRequestTask) {
+    task()
+  }
+  return formSchema
+}
+
+// 过滤 descriptions 结构
+const filterDescriptionsSchema = (crudSchema: CrudSchema[]): DescriptionsSchema[] => {
+  const descriptionsSchema: FormSchema[] = []
+
+  eachTree(crudSchema, (schemaItem: CrudSchema) => {
+    // 判断是否显示
+    if (schemaItem?.isDetail !== false && schemaItem.detail?.show !== false) {
+      const descriptionsSchemaItem = {
+        ...schemaItem.detail,
+        field: schemaItem.field,
+        label: schemaItem.detail?.label || schemaItem.label
+      }
+      if (schemaItem.dictType) {
+        descriptionsSchemaItem.dictType = schemaItem.dictType
+      }
+      if (schemaItem.detail?.dateFormat || schemaItem.formatter == 'formatDate') {
+        // 优先使用 detail 下的配置，如果没有默认为 YYYY-MM-DD HH:mm:ss
+        descriptionsSchemaItem.dateFormat = schemaItem?.detail?.dateFormat
+          ? schemaItem?.detail?.dateFormat
+          : 'YYYY-MM-DD HH:mm:ss'
+      }
+
+      // 删除不必要的字段
+      delete descriptionsSchemaItem.show
+
+      descriptionsSchema.push(descriptionsSchemaItem)
+    }
+  })
+
+  return descriptionsSchema
+}
+
+// 给options添加国际化
+const filterOptions = (options: Recordable, labelField?: string) => {
+  return options?.map((v: Recordable) => {
+    if (labelField) {
+      v['labelField'] = t(v.labelField)
+    } else {
+      v['label'] = t(v.label)
+    }
+    return v
+  })
+}
+
+// 将 tableColumns 指定 fields 放到最前面
+export const sortTableColumns = (tableColumns: TableColumn[], field: string) => {
+  const fieldIndex = tableColumns.findIndex((item) => item.field === field)
+  const fieldColumn = cloneDeep(tableColumns[fieldIndex])
+  tableColumns.splice(fieldIndex, 1)
+  // 添加到开头
+  tableColumns.unshift(fieldColumn)
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useDesign.ts b/marketing-ui/admin-ui/src/hooks/web/useDesign.ts
new file mode 100644
index 0000000..8ee3b38
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useDesign.ts
@@ -0,0 +1,18 @@
+import variables from '@/styles/global.module.scss'
+
+export const useDesign = () => {
+  const scssVariables = variables
+
+  /**
+   * @param scope 类名
+   * @returns 返回空间名-类名
+   */
+  const getPrefixCls = (scope: string) => {
+    return `${scssVariables.namespace}-${scope}`
+  }
+
+  return {
+    variables: scssVariables,
+    getPrefixCls
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useEmitt.ts b/marketing-ui/admin-ui/src/hooks/web/useEmitt.ts
new file mode 100644
index 0000000..d4efea7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useEmitt.ts
@@ -0,0 +1,22 @@
+import mitt from 'mitt'
+
+interface Option {
+  name: string // 事件名称
+  callback: Fn // 回调
+}
+
+const emitter = mitt()
+
+export const useEmitt = (option?: Option) => {
+  if (option) {
+    emitter.on(option.name, option.callback)
+
+    onBeforeUnmount(() => {
+      emitter.off(option.name)
+    })
+  }
+
+  return {
+    emitter
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useForm.ts b/marketing-ui/admin-ui/src/hooks/web/useForm.ts
new file mode 100644
index 0000000..53a8a94
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useForm.ts
@@ -0,0 +1,94 @@
+import type { Form, FormExpose } from '@/components/Form'
+import type { ElForm } from 'element-plus'
+import type { FormProps } from '@/components/Form/src/types'
+import { FormSchema, FormSetPropsType } from '@/types/form'
+
+export const useForm = (props?: FormProps) => {
+  // From实例
+  const formRef = ref<typeof Form & FormExpose>()
+
+  // ElForm实例
+  const elFormRef = ref<ComponentRef<typeof ElForm>>()
+
+  /**
+   * @param ref Form实例
+   * @param elRef ElForm实例
+   */
+  const register = (ref: typeof Form & FormExpose, elRef: ComponentRef<typeof ElForm>) => {
+    formRef.value = ref
+    elFormRef.value = elRef
+  }
+
+  const getForm = async () => {
+    await nextTick()
+    const form = unref(formRef)
+    if (!form) {
+      console.error('The form is not registered. Please use the register method to register')
+    }
+    return form
+  }
+
+  // 一些内置的方法
+  const methods: {
+    setProps: (props: Recordable) => void
+    setValues: (data: Recordable) => void
+    getFormData: <T = Recordable | undefined>() => Promise<T>
+    setSchema: (schemaProps: FormSetPropsType[]) => void
+    addSchema: (formSchema: FormSchema, index?: number) => void
+    delSchema: (field: string) => void
+  } = {
+    setProps: async (props: FormProps = {}) => {
+      const form = await getForm()
+      form?.setProps(props)
+      if (props.model) {
+        form?.setValues(props.model)
+      }
+    },
+
+    setValues: async (data: Recordable) => {
+      const form = await getForm()
+      form?.setValues(data)
+    },
+
+    /**
+     * @param schemaProps 需要设置的schemaProps
+     */
+    setSchema: async (schemaProps: FormSetPropsType[]) => {
+      const form = await getForm()
+      form?.setSchema(schemaProps)
+    },
+
+    /**
+     * @param formSchema 需要新增数据
+     * @param index 在哪里新增
+     */
+    addSchema: async (formSchema: FormSchema, index?: number) => {
+      const form = await getForm()
+      form?.addSchema(formSchema, index)
+    },
+
+    /**
+     * @param field 删除哪个数据
+     */
+    delSchema: async (field: string) => {
+      const form = await getForm()
+      form?.delSchema(field)
+    },
+
+    /**
+     * @returns form data
+     */
+    getFormData: async <T = Recordable>(): Promise<T> => {
+      const form = await getForm()
+      return form?.formModel as T
+    }
+  }
+
+  props && methods.setProps(props)
+
+  return {
+    register,
+    elFormRef,
+    methods
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useGuide.ts b/marketing-ui/admin-ui/src/hooks/web/useGuide.ts
new file mode 100644
index 0000000..7fd2fb0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useGuide.ts
@@ -0,0 +1,49 @@
+import { Config, driver } from 'driver.js'
+import 'driver.js/dist/driver.css'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const { t } = useI18n()
+
+const { variables } = useDesign()
+
+export const useGuide = (options?: Config) => {
+  const driverObj = driver(
+    options || {
+      showProgress: true,
+      nextBtnText: t('common.nextLabel'),
+      prevBtnText: t('common.prevLabel'),
+      doneBtnText: t('common.doneLabel'),
+      steps: [
+        {
+          element: `#${variables.namespace}-menu`,
+          popover: {
+            title: t('common.menu'),
+            description: t('common.menuDes'),
+            side: 'right'
+          }
+        },
+        {
+          element: `#${variables.namespace}-tool-header`,
+          popover: {
+            title: t('common.tool'),
+            description: t('common.toolDes'),
+            side: 'left'
+          }
+        },
+        {
+          element: `#${variables.namespace}-tags-view`,
+          popover: {
+            title: t('common.tagsView'),
+            description: t('common.tagsViewDes'),
+            side: 'bottom'
+          }
+        }
+      ]
+    }
+  )
+
+  return {
+    ...driverObj
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useI18n.ts b/marketing-ui/admin-ui/src/hooks/web/useI18n.ts
new file mode 100644
index 0000000..d1ab70f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useI18n.ts
@@ -0,0 +1,53 @@
+import { i18n } from '@/plugins/vueI18n'
+
+type I18nGlobalTranslation = {
+  (key: string): string
+  (key: string, locale: string): string
+  (key: string, locale: string, list: unknown[]): string
+  (key: string, locale: string, named: Record<string, unknown>): string
+  (key: string, list: unknown[]): string
+  (key: string, named: Record<string, unknown>): string
+}
+
+type I18nTranslationRestParameters = [string, any]
+
+const getKey = (namespace: string | undefined, key: string) => {
+  if (!namespace) {
+    return key
+  }
+  if (key.startsWith(namespace)) {
+    return key
+  }
+  return `${namespace}.${key}`
+}
+
+export const useI18n = (
+  namespace?: string
+): {
+  t: I18nGlobalTranslation
+} => {
+  const normalFn = {
+    t: (key: string) => {
+      return getKey(namespace, key)
+    }
+  }
+
+  if (!i18n) {
+    return normalFn
+  }
+
+  const { t, ...methods } = i18n.global
+
+  const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
+    if (!key) return ''
+    if (!key.includes('.') && !namespace) return key
+    //@ts-ignore
+    return t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters))
+  }
+  return {
+    ...methods,
+    t: tFn
+  }
+}
+
+export const t = (key: string) => key
diff --git a/marketing-ui/admin-ui/src/hooks/web/useIcon.ts b/marketing-ui/admin-ui/src/hooks/web/useIcon.ts
new file mode 100644
index 0000000..3500204
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useIcon.ts
@@ -0,0 +1,8 @@
+import { h } from 'vue'
+import type { VNode } from 'vue'
+import { Icon } from '@/components/Icon'
+import { IconTypes } from '@/types/icon'
+
+export const useIcon = (props: IconTypes): VNode => {
+  return h(Icon, props)
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useLocale.ts b/marketing-ui/admin-ui/src/hooks/web/useLocale.ts
new file mode 100644
index 0000000..c65070e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useLocale.ts
@@ -0,0 +1,35 @@
+import { i18n } from '@/plugins/vueI18n'
+import { useLocaleStoreWithOut } from '@/store/modules/locale'
+import { setHtmlPageLang } from '@/plugins/vueI18n/helper'
+
+const setI18nLanguage = (locale: LocaleType) => {
+  const localeStore = useLocaleStoreWithOut()
+
+  if (i18n.mode === 'legacy') {
+    i18n.global.locale = locale
+  } else {
+    ;(i18n.global.locale as any).value = locale
+  }
+  localeStore.setCurrentLocale({
+    lang: locale
+  })
+  setHtmlPageLang(locale)
+}
+
+export const useLocale = () => {
+  // Switching the language will change the locale of useI18n
+  // And submit to configuration modification
+  const changeLocale = async (locale: LocaleType) => {
+    const globalI18n = i18n.global
+
+    const langModule = await import(`../../locales/${locale}.ts`)
+
+    globalI18n.setLocaleMessage(locale, langModule.default)
+
+    setI18nLanguage(locale)
+  }
+
+  return {
+    changeLocale
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useMessage.ts b/marketing-ui/admin-ui/src/hooks/web/useMessage.ts
new file mode 100644
index 0000000..ac2b552
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useMessage.ts
@@ -0,0 +1,95 @@
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
+import { useI18n } from './useI18n'
+export const useMessage = () => {
+  const { t } = useI18n()
+  return {
+    // 消息提示
+    info(content: string) {
+      ElMessage.info(content)
+    },
+    // 错误消息
+    error(content: string) {
+      ElMessage.error(content)
+    },
+    // 成功消息
+    success(content: string) {
+      ElMessage.success(content)
+    },
+    // 警告消息
+    warning(content: string) {
+      ElMessage.warning(content)
+    },
+    // 弹出提示
+    alert(content: string) {
+      ElMessageBox.alert(content, t('common.confirmTitle'))
+    },
+    // 错误提示
+    alertError(content: string) {
+      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'error' })
+    },
+    // 成功提示
+    alertSuccess(content: string) {
+      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'success' })
+    },
+    // 警告提示
+    alertWarning(content: string) {
+      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'warning' })
+    },
+    // 通知提示
+    notify(content: string) {
+      ElNotification.info(content)
+    },
+    // 错误通知
+    notifyError(content: string) {
+      ElNotification.error(content)
+    },
+    // 成功通知
+    notifySuccess(content: string) {
+      ElNotification.success(content)
+    },
+    // 警告通知
+    notifyWarning(content: string) {
+      ElNotification.warning(content)
+    },
+    // 确认窗体
+    confirm(content: string, tip?: string) {
+      return ElMessageBox.confirm(content, tip ? tip : t('common.confirmTitle'), {
+        confirmButtonText: t('common.ok'),
+        cancelButtonText: t('common.cancel'),
+        type: 'warning'
+      })
+    },
+    // 删除窗体
+    delConfirm(content?: string, tip?: string) {
+      return ElMessageBox.confirm(
+        content ? content : t('common.delMessage'),
+        tip ? tip : t('common.confirmTitle'),
+        {
+          confirmButtonText: t('common.ok'),
+          cancelButtonText: t('common.cancel'),
+          type: 'warning'
+        }
+      )
+    },
+    // 导出窗体
+    exportConfirm(content?: string, tip?: string) {
+      return ElMessageBox.confirm(
+        content ? content : t('common.exportMessage'),
+        tip ? tip : t('common.confirmTitle'),
+        {
+          confirmButtonText: t('common.ok'),
+          cancelButtonText: t('common.cancel'),
+          type: 'warning'
+        }
+      )
+    },
+    // 提交内容
+    prompt(content: string, tip: string) {
+      return ElMessageBox.prompt(content, tip, {
+        confirmButtonText: t('common.ok'),
+        cancelButtonText: t('common.cancel'),
+        type: 'warning'
+      })
+    }
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useNProgress.ts b/marketing-ui/admin-ui/src/hooks/web/useNProgress.ts
new file mode 100644
index 0000000..6d8c0b9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useNProgress.ts
@@ -0,0 +1,33 @@
+import { useCssVar } from '@vueuse/core'
+import type { NProgressOptions } from 'nprogress'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+const primaryColor = useCssVar('--el-color-primary', document.documentElement)
+
+export const useNProgress = () => {
+  NProgress.configure({ showSpinner: false } as NProgressOptions)
+
+  const initColor = async () => {
+    await nextTick()
+    const bar = document.getElementById('nprogress')?.getElementsByClassName('bar')[0] as ElRef
+    if (bar) {
+      bar.style.background = unref(primaryColor.value)
+    }
+  }
+
+  initColor()
+
+  const start = () => {
+    NProgress.start()
+  }
+
+  const done = () => {
+    NProgress.done()
+  }
+
+  return {
+    start,
+    done
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useNetwork.ts b/marketing-ui/admin-ui/src/hooks/web/useNetwork.ts
new file mode 100644
index 0000000..66fa446
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useNetwork.ts
@@ -0,0 +1,21 @@
+import { ref, onBeforeUnmount } from 'vue'
+
+const useNetwork = () => {
+  const online = ref(true)
+
+  const updateNetwork = () => {
+    online.value = navigator.onLine
+  }
+
+  window.addEventListener('online', updateNetwork)
+  window.addEventListener('offline', updateNetwork)
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('online', updateNetwork)
+    window.removeEventListener('offline', updateNetwork)
+  })
+
+  return { online }
+}
+
+export { useNetwork }
diff --git a/marketing-ui/admin-ui/src/hooks/web/useNow.ts b/marketing-ui/admin-ui/src/hooks/web/useNow.ts
new file mode 100644
index 0000000..09d3176
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useNow.ts
@@ -0,0 +1,60 @@
+import { dateUtil } from '@/utils/dateUtil'
+import { reactive, toRefs } from 'vue'
+import { tryOnMounted, tryOnUnmounted } from '@vueuse/core'
+
+export const useNow = (immediate = true) => {
+  let timer: IntervalHandle
+
+  const state = reactive({
+    year: 0,
+    month: 0,
+    week: '',
+    day: 0,
+    hour: '',
+    minute: '',
+    second: 0,
+    meridiem: ''
+  })
+
+  const update = () => {
+    const now = dateUtil()
+
+    const h = now.format('HH')
+    const m = now.format('mm')
+    const s = now.get('s')
+
+    state.year = now.get('y')
+    state.month = now.get('M') + 1
+    state.week = '星期' + ['日', '一', '二', '三', '四', '五', '六'][now.day()]
+    state.day = now.get('date')
+    state.hour = h
+    state.minute = m
+    state.second = s
+
+    state.meridiem = now.format('A')
+  }
+
+  function start() {
+    update()
+    clearInterval(timer)
+    timer = setInterval(() => update(), 1000)
+  }
+
+  function stop() {
+    clearInterval(timer)
+  }
+
+  tryOnMounted(() => {
+    immediate && start()
+  })
+
+  tryOnUnmounted(() => {
+    stop()
+  })
+
+  return {
+    ...toRefs(state),
+    start,
+    stop
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/usePageLoading.ts b/marketing-ui/admin-ui/src/hooks/web/usePageLoading.ts
new file mode 100644
index 0000000..bb89457
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/usePageLoading.ts
@@ -0,0 +1,18 @@
+import { useAppStoreWithOut } from '@/store/modules/app'
+
+const appStore = useAppStoreWithOut()
+
+export const usePageLoading = () => {
+  const loadStart = () => {
+    appStore.setPageLoading(true)
+  }
+
+  const loadDone = () => {
+    appStore.setPageLoading(false)
+  }
+
+  return {
+    loadStart,
+    loadDone
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useTable.ts b/marketing-ui/admin-ui/src/hooks/web/useTable.ts
new file mode 100644
index 0000000..361dd67
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useTable.ts
@@ -0,0 +1,223 @@
+import download from '@/utils/download'
+import { Table, TableExpose } from '@/components/Table'
+import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
+import { computed, nextTick, reactive, ref, unref, watch } from 'vue'
+import type { TableProps } from '@/components/Table/src/types'
+
+import { TableSetPropsType } from '@/types/table'
+
+const { t } = useI18n()
+interface ResponseType<T = any> {
+  list: T[]
+  total?: number
+}
+
+interface UseTableConfig<T = any> {
+  getListApi: (option: any) => Promise<T>
+  delListApi?: (option: any) => Promise<T>
+  exportListApi?: (option: any) => Promise<T>
+  // 返回数据格式配置
+  response?: ResponseType
+  // 默认传递的参数
+  defaultParams?: Recordable
+  props?: TableProps
+}
+
+interface TableObject<T = any> {
+  pageSize: number
+  currentPage: number
+  total: number
+  tableList: T[]
+  params: any
+  loading: boolean
+  exportLoading: boolean
+  currentRow: Nullable<T>
+}
+
+export const useTable = <T = any>(config?: UseTableConfig<T>) => {
+  const tableObject = reactive<TableObject<T>>({
+    // 页数
+    pageSize: 10,
+    // 当前页
+    currentPage: 1,
+    // 总条数
+    total: 10,
+    // 表格数据
+    tableList: [],
+    // AxiosConfig 配置
+    params: {
+      ...(config?.defaultParams || {})
+    },
+    // 加载中
+    loading: true,
+    // 导出加载中
+    exportLoading: false,
+    // 当前行的数据
+    currentRow: null
+  })
+
+  const paramsObj = computed(() => {
+    return {
+      ...tableObject.params,
+      pageSize: tableObject.pageSize,
+      pageNo: tableObject.currentPage
+    }
+  })
+
+  watch(
+    () => tableObject.currentPage,
+    () => {
+      methods.getList()
+    }
+  )
+
+  watch(
+    () => tableObject.pageSize,
+    () => {
+      // 当前页不为1时，修改页数后会导致多次调用getList方法
+      if (tableObject.currentPage === 1) {
+        methods.getList()
+      } else {
+        tableObject.currentPage = 1
+        methods.getList()
+      }
+    }
+  )
+
+  // Table实例
+  const tableRef = ref<typeof Table & TableExpose>()
+
+  // ElTable实例
+  const elTableRef = ref<ComponentRef<typeof ElTable>>()
+
+  const register = (ref: typeof Table & TableExpose, elRef: ComponentRef<typeof ElTable>) => {
+    tableRef.value = ref
+    elTableRef.value = elRef
+  }
+
+  const getTable = async () => {
+    await nextTick()
+    const table = unref(tableRef)
+    if (!table) {
+      console.error('The table is not registered. Please use the register method to register')
+    }
+    return table
+  }
+
+  const delData = async (ids: string | number | string[] | number[]) => {
+    let idsLength = 1
+    if (ids instanceof Array) {
+      idsLength = ids.length
+      await Promise.all(
+        ids.map(async (id: string | number) => {
+          await (config?.delListApi && config?.delListApi(id))
+        })
+      )
+    } else {
+      await (config?.delListApi && config?.delListApi(ids))
+    }
+    ElMessage.success(t('common.delSuccess'))
+
+    // 计算出临界点
+    tableObject.currentPage =
+      tableObject.total % tableObject.pageSize === idsLength || tableObject.pageSize === 1
+        ? tableObject.currentPage > 1
+          ? tableObject.currentPage - 1
+          : tableObject.currentPage
+        : tableObject.currentPage
+    await methods.getList()
+  }
+
+  const methods = {
+    getList: async () => {
+      tableObject.loading = true
+      const res = await config?.getListApi(unref(paramsObj)).finally(() => {
+        tableObject.loading = false
+      })
+      if (res) {
+        tableObject.tableList = (res as unknown as ResponseType).list
+        tableObject.total = (res as unknown as ResponseType).total ?? 0
+      }
+    },
+    setProps: async (props: TableProps = {}) => {
+      const table = await getTable()
+      table?.setProps(props)
+    },
+    setColumn: async (columnProps: TableSetPropsType[]) => {
+      const table = await getTable()
+      table?.setColumn(columnProps)
+    },
+    getSelections: async () => {
+      const table = await getTable()
+      return (table?.selections || []) as T[]
+    },
+    // 与Search组件结合
+    setSearchParams: (data: Recordable) => {
+      tableObject.params = Object.assign(tableObject.params, {
+        pageSize: tableObject.pageSize,
+        pageNo: 1,
+        ...data
+      })
+      // 页码不等于1时更新页码重新获取数据，页码等于1时重新获取数据
+      if (tableObject.currentPage !== 1) {
+        tableObject.currentPage = 1
+      } else {
+        methods.getList()
+      }
+    },
+    // 删除数据
+    delList: async (
+      ids: string | number | string[] | number[],
+      multiple: boolean,
+      message = true
+    ) => {
+      const tableRef = await getTable()
+      if (multiple) {
+        if (!tableRef?.selections.length) {
+          ElMessage.warning(t('common.delNoData'))
+          return
+        }
+      }
+      if (message) {
+        ElMessageBox.confirm(t('common.delMessage'), t('common.confirmTitle'), {
+          confirmButtonText: t('common.ok'),
+          cancelButtonText: t('common.cancel'),
+          type: 'warning'
+        }).then(async () => {
+          await delData(ids)
+        })
+      } else {
+        await delData(ids)
+      }
+    },
+    // 导出列表
+    exportList: async (fileName: string) => {
+      tableObject.exportLoading = true
+      ElMessageBox.confirm(t('common.exportMessage'), t('common.confirmTitle'), {
+        confirmButtonText: t('common.ok'),
+        cancelButtonText: t('common.cancel'),
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await config?.exportListApi?.(unref(paramsObj) as unknown as T)
+          if (res) {
+            download.excel(res as unknown as Blob, fileName)
+          }
+        })
+        .finally(() => {
+          tableObject.exportLoading = false
+        })
+    }
+  }
+
+  config?.props && methods.setProps(config.props)
+
+  return {
+    register,
+    elTableRef,
+    tableObject,
+    methods,
+    // add by 芋艿：返回 tableMethods 属性，和 tableObject 更统一
+    tableMethods: methods
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useTagsView.ts b/marketing-ui/admin-ui/src/hooks/web/useTagsView.ts
new file mode 100644
index 0000000..31eadb0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useTagsView.ts
@@ -0,0 +1,63 @@
+import { useTagsViewStoreWithOut } from '@/store/modules/tagsView'
+import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router'
+import { computed, nextTick, unref } from 'vue'
+
+export const useTagsView = () => {
+  const tagsViewStore = useTagsViewStoreWithOut()
+
+  const { replace, currentRoute } = useRouter()
+
+  const selectedTag = computed(() => tagsViewStore.getSelectedTag)
+
+  const closeAll = (callback?: Fn) => {
+    tagsViewStore.delAllViews()
+    callback?.()
+  }
+
+  const closeLeft = (callback?: Fn) => {
+    tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+    callback?.()
+  }
+
+  const closeRight = (callback?: Fn) => {
+    tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+    callback?.()
+  }
+
+  const closeOther = (callback?: Fn) => {
+    tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+    callback?.()
+  }
+
+  const closeCurrent = (view?: RouteLocationNormalizedLoaded, callback?: Fn) => {
+    if (view?.meta?.affix) return
+    tagsViewStore.delView(view || unref(currentRoute))
+
+    callback?.()
+  }
+
+  const refreshPage = async (view?: RouteLocationNormalizedLoaded, callback?: Fn) => {
+    tagsViewStore.delCachedView()
+    const { path, query } = view || unref(currentRoute)
+    await nextTick()
+    replace({
+      path: '/redirect' + path,
+      query: query
+    })
+    callback?.()
+  }
+
+  const setTitle = (title: string, path?: string) => {
+    tagsViewStore.setTitle(title, path)
+  }
+
+  return {
+    closeAll,
+    closeLeft,
+    closeRight,
+    closeOther,
+    closeCurrent,
+    refreshPage,
+    setTitle
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useTimeAgo.ts b/marketing-ui/admin-ui/src/hooks/web/useTimeAgo.ts
new file mode 100644
index 0000000..a6da281
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useTimeAgo.ts
@@ -0,0 +1,49 @@
+import { useTimeAgo as useTimeAgoCore, UseTimeAgoMessages } from '@vueuse/core'
+import { useLocaleStoreWithOut } from '@/store/modules/locale'
+
+const TIME_AGO_MESSAGE_MAP: {
+  'zh-CN': UseTimeAgoMessages
+  en: UseTimeAgoMessages
+} = {
+  // @ts-ignore
+  'zh-CN': {
+    justNow: '刚刚',
+    past: (n) => (n.match(/\d/) ? `${n}前` : n),
+    future: (n) => (n.match(/\d/) ? `${n}后` : n),
+    month: (n, past) => (n === 1 ? (past ? '上个月' : '下个月') : `${n} 个月`),
+    year: (n, past) => (n === 1 ? (past ? '去年' : '明年') : `${n} 年`),
+    day: (n, past) => (n === 1 ? (past ? '昨天' : '明天') : `${n} 天`),
+    week: (n, past) => (n === 1 ? (past ? '上周' : '下周') : `${n} 周`),
+    hour: (n) => `${n} 小时`,
+    minute: (n) => `${n} 分钟`,
+    second: (n) => `${n} 秒`
+  },
+  // @ts-ignore
+  en: {
+    justNow: 'just now',
+    past: (n) => (n.match(/\d/) ? `${n} ago` : n),
+    future: (n) => (n.match(/\d/) ? `in ${n}` : n),
+    month: (n, past) =>
+      n === 1 ? (past ? 'last month' : 'next month') : `${n} month${n > 1 ? 's' : ''}`,
+    year: (n, past) =>
+      n === 1 ? (past ? 'last year' : 'next year') : `${n} year${n > 1 ? 's' : ''}`,
+    day: (n, past) => (n === 1 ? (past ? 'yesterday' : 'tomorrow') : `${n} day${n > 1 ? 's' : ''}`),
+    week: (n, past) =>
+      n === 1 ? (past ? 'last week' : 'next week') : `${n} week${n > 1 ? 's' : ''}`,
+    hour: (n) => `${n} hour${n > 1 ? 's' : ''}`,
+    minute: (n) => `${n} minute${n > 1 ? 's' : ''}`,
+    second: (n) => `${n} second${n > 1 ? 's' : ''}`
+  }
+}
+
+export const useTimeAgo = (time: Date | number | string) => {
+  const localeStore = useLocaleStoreWithOut()
+
+  const currentLocale = computed(() => localeStore.getCurrentLocale)
+
+  const timeAgo = useTimeAgoCore(time, {
+    messages: TIME_AGO_MESSAGE_MAP[unref(currentLocale).lang]
+  })
+
+  return timeAgo
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useTitle.ts b/marketing-ui/admin-ui/src/hooks/web/useTitle.ts
new file mode 100644
index 0000000..020a9b7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useTitle.ts
@@ -0,0 +1,24 @@
+import { watch, ref } from 'vue'
+import { isString } from '@/utils/is'
+import { useAppStoreWithOut } from '@/store/modules/app'
+
+const appStore = useAppStoreWithOut()
+
+export const useTitle = (newTitle?: string) => {
+  const { t } = useI18n()
+  const title = ref(
+    newTitle ? `${appStore.getTitle} - ${t(newTitle as string)}` : appStore.getTitle
+  )
+
+  watch(
+    title,
+    (n, o) => {
+      if (isString(n) && n !== o && document) {
+        document.title = n
+      }
+    },
+    { immediate: true }
+  )
+
+  return title
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useValidator.ts b/marketing-ui/admin-ui/src/hooks/web/useValidator.ts
new file mode 100644
index 0000000..151e35b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useValidator.ts
@@ -0,0 +1,60 @@
+import { useI18n } from '@/hooks/web/useI18n'
+import { FormItemRule } from 'element-plus'
+
+const { t } = useI18n()
+
+interface LengthRange {
+  min: number
+  max: number
+  message?: string
+}
+
+export const useValidator = () => {
+  const required = (message?: string): FormItemRule => {
+    return {
+      required: true,
+      message: message || t('common.required')
+    }
+  }
+
+  const lengthRange = (options: LengthRange): FormItemRule => {
+    const { min, max, message } = options
+
+    return {
+      min,
+      max,
+      message: message || t('common.lengthRange', { min, max })
+    }
+  }
+
+  const notSpace = (message?: string): FormItemRule => {
+    return {
+      validator: (_, val, callback) => {
+        if (val?.indexOf(' ') !== -1) {
+          callback(new Error(message || t('common.notSpace')))
+        } else {
+          callback()
+        }
+      }
+    }
+  }
+
+  const notSpecialCharacters = (message?: string): FormItemRule => {
+    return {
+      validator: (_, val, callback) => {
+        if (/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/gi.test(val)) {
+          callback(new Error(message || t('common.notSpecialCharacters')))
+        } else {
+          callback()
+        }
+      }
+    }
+  }
+
+  return {
+    required,
+    lengthRange,
+    notSpace,
+    notSpecialCharacters
+  }
+}
diff --git a/marketing-ui/admin-ui/src/hooks/web/useWatermark.ts b/marketing-ui/admin-ui/src/hooks/web/useWatermark.ts
new file mode 100644
index 0000000..4a31359
--- /dev/null
+++ b/marketing-ui/admin-ui/src/hooks/web/useWatermark.ts
@@ -0,0 +1,55 @@
+const domSymbol = Symbol('watermark-dom')
+
+export function useWatermark(appendEl: HTMLElement | null = document.body) {
+  let func: Fn = () => {}
+  const id = domSymbol.toString()
+  const clear = () => {
+    const domId = document.getElementById(id)
+    if (domId) {
+      const el = appendEl
+      el && el.removeChild(domId)
+    }
+    window.removeEventListener('resize', func)
+  }
+  const createWatermark = (str: string) => {
+    clear()
+
+    const can = document.createElement('canvas')
+    can.width = 300
+    can.height = 240
+
+    const cans = can.getContext('2d')
+    if (cans) {
+      cans.rotate((-20 * Math.PI) / 120)
+      cans.font = '15px Vedana'
+      cans.fillStyle = 'rgba(0, 0, 0, 0.15)'
+      cans.textAlign = 'left'
+      cans.textBaseline = 'middle'
+      cans.fillText(str, can.width / 20, can.height)
+    }
+
+    const div = document.createElement('div')
+    div.id = id
+    div.style.pointerEvents = 'none'
+    div.style.top = '0px'
+    div.style.left = '0px'
+    div.style.position = 'absolute'
+    div.style.zIndex = '100000000'
+    div.style.width = document.documentElement.clientWidth + 'px'
+    div.style.height = document.documentElement.clientHeight + 'px'
+    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+    const el = appendEl
+    el && el.appendChild(div)
+    return id
+  }
+
+  function setWatermark(str: string) {
+    createWatermark(str)
+    func = () => {
+      createWatermark(str)
+    }
+    window.addEventListener('resize', func)
+  }
+
+  return { setWatermark, clear }
+}
diff --git a/marketing-ui/admin-ui/src/layout/Layout.vue b/marketing-ui/admin-ui/src/layout/Layout.vue
new file mode 100644
index 0000000..d15025c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/Layout.vue
@@ -0,0 +1,75 @@
+<script lang="tsx">
+import { computed, defineComponent, unref } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+import { Backtop } from '@/components/Backtop'
+import { Setting } from '@/layout/components/Setting'
+import { useRenderLayout } from './components/useRenderLayout'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('layout')
+
+const appStore = useAppStore()
+
+// 是否是移动端
+const mobile = computed(() => appStore.getMobile)
+
+// 菜单折叠
+const collapse = computed(() => appStore.getCollapse)
+
+const layout = computed(() => appStore.getLayout)
+
+const handleClickOutside = () => {
+  appStore.setCollapse(true)
+}
+
+const renderLayout = () => {
+  switch (unref(layout)) {
+    case 'classic':
+      const { renderClassic } = useRenderLayout()
+      return renderClassic()
+    case 'topLeft':
+      const { renderTopLeft } = useRenderLayout()
+      return renderTopLeft()
+    case 'top':
+      const { renderTop } = useRenderLayout()
+      return renderTop()
+    case 'cutMenu':
+      const { renderCutMenu } = useRenderLayout()
+      return renderCutMenu()
+    default:
+      break
+  }
+}
+
+export default defineComponent({
+  name: 'Layout',
+  setup() {
+    return () => (
+      <section class={[prefixCls, `${prefixCls}__${layout.value}`, 'w-[100%] h-[100%] relative']}>
+        {mobile.value && !collapse.value ? (
+          <div
+            class="absolute left-0 top-0 z-99 h-full w-full bg-[var(--el-color-black)] opacity-30"
+            onClick={handleClickOutside}
+          ></div>
+        ) : undefined}
+
+        {renderLayout()}
+
+        <Backtop></Backtop>
+
+        <Setting></Setting>
+      </section>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-layout;
+
+.#{$prefix-cls} {
+  background-color: var(--app-content-bg-color);
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/AppView.vue b/marketing-ui/admin-ui/src/layout/components/AppView.vue
new file mode 100644
index 0000000..df720a1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/AppView.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useAppStore } from '@/store/modules/app'
+import { Footer } from '@/layout/components/Footer'
+
+defineOptions({ name: 'AppView' })
+
+const appStore = useAppStore()
+
+const layout = computed(() => appStore.getLayout)
+
+const fixedHeader = computed(() => appStore.getFixedHeader)
+
+const footer = computed(() => appStore.getFooter)
+
+const tagsViewStore = useTagsViewStore()
+
+const getCaches = computed((): string[] => {
+  return tagsViewStore.getCachedViews
+})
+
+const tagsView = computed(() => appStore.getTagsView)
+
+//region 无感刷新
+const routerAlive = ref(true)
+// 无感刷新，防止出现页面闪烁白屏
+const reload = () => {
+  routerAlive.value = false
+  nextTick(() => (routerAlive.value = true))
+}
+// 为组件后代提供刷新方法
+provide('reload', reload)
+//endregion
+</script>
+
+<template>
+  <section
+    :class="[
+      'p-[var(--app-content-padding)] w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
+      {
+        '!min-h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))] pb-0':
+          footer
+      }
+    ]"
+  >
+    <router-view v-if="routerAlive">
+      <template #default="{ Component, route }">
+        <keep-alive :include="getCaches">
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+      </template>
+    </router-view>
+  </section>
+  <Footer v-if="footer" />
+</template>
diff --git a/marketing-ui/admin-ui/src/layout/components/Breadcrumb/index.ts b/marketing-ui/admin-ui/src/layout/components/Breadcrumb/index.ts
new file mode 100644
index 0000000..93ffe70
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Breadcrumb/index.ts
@@ -0,0 +1,3 @@
+import Breadcrumb from './src/Breadcrumb.vue'
+
+export { Breadcrumb }
diff --git a/marketing-ui/admin-ui/src/layout/components/Breadcrumb/src/Breadcrumb.vue b/marketing-ui/admin-ui/src/layout/components/Breadcrumb/src/Breadcrumb.vue
new file mode 100644
index 0000000..80770a8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Breadcrumb/src/Breadcrumb.vue
@@ -0,0 +1,130 @@
+<script lang="tsx">
+import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
+import { ref, watch, computed, unref, defineComponent, TransitionGroup } from 'vue'
+import { useRouter } from 'vue-router'
+import { usePermissionStore } from '@/store/modules/permission'
+import { filterBreadcrumb } from './helper'
+import { filter, treeToList } from '@/utils/tree'
+import type { RouteLocationNormalizedLoaded, RouteMeta } from 'vue-router'
+
+import { Icon } from '@/components/Icon'
+import { useAppStore } from '@/store/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('breadcrumb')
+
+const appStore = useAppStore()
+
+// 面包屑图标
+const breadcrumbIcon = computed(() => appStore.getBreadcrumbIcon)
+
+export default defineComponent({
+  name: 'Breadcrumb',
+  setup() {
+    const { currentRoute } = useRouter()
+
+    const { t } = useI18n()
+
+    const levelList = ref<AppRouteRecordRaw[]>([])
+
+    const permissionStore = usePermissionStore()
+
+    const menuRouters = computed(() => {
+      const routers = permissionStore.getRouters
+      return filterBreadcrumb(routers)
+    })
+
+    const getBreadcrumb = () => {
+      const currentPath = currentRoute.value.matched.slice(-1)[0].path
+
+      levelList.value = filter<AppRouteRecordRaw>(unref(menuRouters), (node: AppRouteRecordRaw) => {
+        return node.path === currentPath
+      })
+    }
+
+    const renderBreadcrumb = () => {
+      const breadcrumbList = treeToList<AppRouteRecordRaw[]>(unref(levelList))
+      return breadcrumbList.map((v) => {
+        const disabled = !v.redirect || v.redirect === 'noredirect'
+        const meta = v.meta as RouteMeta
+        return (
+          <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
+            {meta?.icon && breadcrumbIcon.value ? (
+              <div class="flex items-center">
+                <Icon icon={meta.icon} class="mr-[2px]" svgClass="inline-block"></Icon>
+                {t(v?.meta?.title)}
+              </div>
+            ) : (
+              t(v?.meta?.title)
+            )}
+          </ElBreadcrumbItem>
+        )
+      })
+    }
+
+    watch(
+      () => currentRoute.value,
+      (route: RouteLocationNormalizedLoaded) => {
+        if (route.path.startsWith('/redirect/')) {
+          return
+        }
+        getBreadcrumb()
+      },
+      {
+        immediate: true
+      }
+    )
+
+    return () => (
+      <ElBreadcrumb separator="/" class={`${prefixCls} flex items-center h-full ml-[10px]`}>
+        <TransitionGroup appear enter-active-class="animate__animated animate__fadeInRight">
+          {renderBreadcrumb()}
+        </TransitionGroup>
+      </ElBreadcrumb>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$elNamespace}-breadcrumb;
+
+.#{$prefix-cls} {
+  :deep(.#{$prefix-cls}__item) {
+    display: flex;
+    .#{$prefix-cls}__inner {
+      display: flex;
+      align-items: center;
+      color: var(--top-header-text-color);
+
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+
+  :deep(.#{$prefix-cls}__item):not(:last-child) {
+    .#{$prefix-cls}__inner {
+      color: var(--top-header-text-color);
+
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+
+  :deep(.#{$prefix-cls}__item):last-child {
+    .#{$prefix-cls}__inner {
+      display: flex;
+      align-items: center;
+      color: var(--el-text-color-placeholder);
+
+      &:hover {
+        color: var(--el-text-color-placeholder);
+      }
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/Breadcrumb/src/helper.ts b/marketing-ui/admin-ui/src/layout/components/Breadcrumb/src/helper.ts
new file mode 100644
index 0000000..fb3ec19
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Breadcrumb/src/helper.ts
@@ -0,0 +1,31 @@
+import { pathResolve } from '@/utils/routerHelper'
+import type { RouteMeta } from 'vue-router'
+
+export const filterBreadcrumb = (
+  routes: AppRouteRecordRaw[],
+  parentPath = ''
+): AppRouteRecordRaw[] => {
+  const res: AppRouteRecordRaw[] = []
+
+  for (const route of routes) {
+    const meta = route?.meta as RouteMeta
+    if (meta.hidden && !meta.canTo) {
+      continue
+    }
+
+    const data: AppRouteRecordRaw =
+      !meta.alwaysShow && route.children?.length === 1
+        ? { ...route.children[0], path: pathResolve(route.path, route.children[0].path) }
+        : { ...route }
+
+    data.path = pathResolve(parentPath, data.path)
+
+    if (data.children) {
+      data.children = filterBreadcrumb(data.children, data.path)
+    }
+    if (data) {
+      res.push(data)
+    }
+  }
+  return res
+}
diff --git a/marketing-ui/admin-ui/src/layout/components/Collapse/index.ts b/marketing-ui/admin-ui/src/layout/components/Collapse/index.ts
new file mode 100644
index 0000000..73f65a3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Collapse/index.ts
@@ -0,0 +1,3 @@
+import Collapse from './src/Collapse.vue'
+
+export { Collapse }
diff --git a/marketing-ui/admin-ui/src/layout/components/Collapse/src/Collapse.vue b/marketing-ui/admin-ui/src/layout/components/Collapse/src/Collapse.vue
new file mode 100644
index 0000000..a8fc7ee
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Collapse/src/Collapse.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/store/modules/app'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'Collapse' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('collapse')
+
+defineProps({
+  color: propTypes.string.def('')
+})
+
+const appStore = useAppStore()
+
+const collapse = computed(() => appStore.getCollapse)
+
+const toggleCollapse = () => {
+  const collapsed = unref(collapse)
+  appStore.setCollapse(!collapsed)
+}
+</script>
+
+<template>
+  <div :class="prefixCls" @click="toggleCollapse">
+    <Icon
+      :color="color"
+      :icon="collapse ? 'ep:expand' : 'ep:fold'"
+      :size="18"
+      class="cursor-pointer"
+    />
+  </div>
+</template>
diff --git a/marketing-ui/admin-ui/src/layout/components/ContextMenu/index.ts b/marketing-ui/admin-ui/src/layout/components/ContextMenu/index.ts
new file mode 100644
index 0000000..2a7c1f0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/ContextMenu/index.ts
@@ -0,0 +1,10 @@
+import ContextMenu from './src/ContextMenu.vue'
+import { ElDropdown } from 'element-plus'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+export interface ContextMenuExpose {
+  elDropdownMenuRef: ComponentRef<typeof ElDropdown>
+  tagItem: RouteLocationNormalizedLoaded
+}
+
+export { ContextMenu }
diff --git a/marketing-ui/admin-ui/src/layout/components/ContextMenu/src/ContextMenu.vue b/marketing-ui/admin-ui/src/layout/components/ContextMenu/src/ContextMenu.vue
new file mode 100644
index 0000000..90eea4c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/ContextMenu/src/ContextMenu.vue
@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { PropType } from 'vue'
+
+import { useDesign } from '@/hooks/web/useDesign'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { contextMenuSchema } from '@/types/contextMenu'
+import type { ElDropdown } from 'element-plus'
+
+defineOptions({ name: 'ContextMenu' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('context-menu')
+
+const { t } = useI18n()
+
+const emit = defineEmits(['visibleChange'])
+
+const props = defineProps({
+  schema: {
+    type: Array as PropType<contextMenuSchema[]>,
+    default: () => []
+  },
+  trigger: {
+    type: String as PropType<'click' | 'hover' | 'focus' | 'contextmenu'>,
+    default: 'contextmenu'
+  },
+  tagItem: {
+    type: Object as PropType<RouteLocationNormalizedLoaded>,
+    default: () => ({})
+  }
+})
+
+const command = (item: contextMenuSchema) => {
+  item.command && item.command(item)
+}
+
+const visibleChange = (visible: boolean) => {
+  emit('visibleChange', visible, props.tagItem)
+}
+
+const elDropdownMenuRef = ref<ComponentRef<typeof ElDropdown>>()
+
+defineExpose({
+  elDropdownMenuRef,
+  tagItem: props.tagItem
+})
+</script>
+
+<template>
+  <ElDropdown
+    ref="elDropdownMenuRef"
+    :class="prefixCls"
+    :trigger="trigger"
+    placement="bottom-start"
+    popper-class="v-context-menu-popper"
+    @command="command"
+    @visible-change="visibleChange"
+  >
+    <slot></slot>
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem
+          v-for="(item, index) in schema"
+          :key="`dropdown${index}`"
+          :command="item"
+          :disabled="item.disabled"
+          :divided="item.divided"
+        >
+          <Icon :icon="item.icon" />
+          {{ t(item.label) }}
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>
diff --git a/marketing-ui/admin-ui/src/layout/components/Footer/index.ts b/marketing-ui/admin-ui/src/layout/components/Footer/index.ts
new file mode 100644
index 0000000..bd052e0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Footer/index.ts
@@ -0,0 +1,3 @@
+import Footer from './src/Footer.vue'
+
+export { Footer }
diff --git a/marketing-ui/admin-ui/src/layout/components/Footer/src/Footer.vue b/marketing-ui/admin-ui/src/layout/components/Footer/src/Footer.vue
new file mode 100644
index 0000000..98ce7e5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Footer/src/Footer.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/store/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+
+// eslint-disable-next-line vue/no-reserved-component-names
+defineOptions({ name: 'Footer' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('footer')
+
+const appStore = useAppStore()
+
+const title = computed(() => appStore.getTitle)
+
+// 添加当前年份计算属性
+const currentYear = computed(() => new Date().getFullYear())
+</script>
+
+<template>
+  <div
+    :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)] overflow-hidden"
+  >
+    <span class="text-14px">Copyright ©{{ currentYear }} {{ title }}</span>
+  </div>
+</template>
diff --git a/marketing-ui/admin-ui/src/layout/components/LocaleDropdown/index.ts b/marketing-ui/admin-ui/src/layout/components/LocaleDropdown/index.ts
new file mode 100644
index 0000000..d02e640
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/LocaleDropdown/index.ts
@@ -0,0 +1,3 @@
+import LocaleDropdown from './src/LocaleDropdown.vue'
+
+export { LocaleDropdown }
diff --git a/marketing-ui/admin-ui/src/layout/components/LocaleDropdown/src/LocaleDropdown.vue b/marketing-ui/admin-ui/src/layout/components/LocaleDropdown/src/LocaleDropdown.vue
new file mode 100644
index 0000000..95132db
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/LocaleDropdown/src/LocaleDropdown.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { useLocaleStore } from '@/store/modules/locale'
+import { useLocale } from '@/hooks/web/useLocale'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'LocaleDropdown' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('locale-dropdown')
+
+defineProps({
+  color: propTypes.string.def('')
+})
+
+const localeStore = useLocaleStore()
+
+const langMap = computed(() => localeStore.getLocaleMap)
+
+const currentLang = computed(() => localeStore.getCurrentLocale)
+
+const setLang = (lang: LocaleType) => {
+  if (lang === unref(currentLang).lang) return
+  // 需要重新加载页面让整个语言多初始化
+  window.location.reload()
+  localeStore.setCurrentLocale({
+    lang
+  })
+  const { changeLocale } = useLocale()
+  changeLocale(lang)
+}
+</script>
+
+<template>
+  <ElDropdown :class="prefixCls" trigger="click" @command="setLang">
+    <Icon
+      :class="$attrs.class"
+      :color="color"
+      :size="18"
+      class="cursor-pointer !p-0"
+      icon="ion:language-sharp"
+    />
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem v-for="item in langMap" :key="item.lang" :command="item.lang">
+          {{ item.name }}
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>
diff --git a/marketing-ui/admin-ui/src/layout/components/Logo/index.ts b/marketing-ui/admin-ui/src/layout/components/Logo/index.ts
new file mode 100644
index 0000000..1c4224c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Logo/index.ts
@@ -0,0 +1,3 @@
+import Logo from './src/Logo.vue'
+
+export { Logo }
diff --git a/marketing-ui/admin-ui/src/layout/components/Logo/src/Logo.vue b/marketing-ui/admin-ui/src/layout/components/Logo/src/Logo.vue
new file mode 100644
index 0000000..d241130
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Logo/src/Logo.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, unref, watch } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'Logo' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('logo')
+
+const appStore = useAppStore()
+
+const show = ref(true)
+
+const title = computed(() => appStore.getTitle)
+
+const layout = computed(() => appStore.getLayout)
+
+const collapse = computed(() => appStore.getCollapse)
+
+onMounted(() => {
+  if (unref(collapse)) show.value = false
+})
+
+watch(
+  () => collapse.value,
+  (collapse: boolean) => {
+    if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
+      show.value = true
+      return
+    }
+    if (!collapse) {
+      setTimeout(() => {
+        show.value = !collapse
+      }, 400)
+    } else {
+      show.value = !collapse
+    }
+  }
+)
+
+watch(
+  () => layout.value,
+  (layout) => {
+    if (layout === 'top' || layout === 'cutMenu') {
+      show.value = true
+    } else {
+      if (unref(collapse)) {
+        show.value = false
+      } else {
+        show.value = true
+      }
+    }
+  }
+)
+</script>
+
+<template>
+  <div>
+    <router-link
+      :class="[
+        prefixCls,
+        layout !== 'classic' ? `${prefixCls}__Top` : '',
+        'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative decoration-none overflow-hidden'
+      ]"
+      to="/"
+    >
+      <img
+        class="h-[calc(var(--logo-height)-10px)] w-[calc(var(--logo-height)-10px)]"
+        src="@/assets/imgs/logo.png"
+      />
+      <div
+        v-if="show"
+        :class="[
+          'ml-10px text-16px font-700',
+          {
+            'text-[var(--logo-title-text-color)]': layout === 'classic',
+            'text-[var(--top-header-text-color)]':
+              layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
+          }
+        ]"
+      >
+        {{ title }}
+      </div>
+    </router-link>
+  </div>
+</template>
diff --git a/marketing-ui/admin-ui/src/layout/components/Menu/index.ts b/marketing-ui/admin-ui/src/layout/components/Menu/index.ts
new file mode 100644
index 0000000..a6ec696
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Menu/index.ts
@@ -0,0 +1,3 @@
+import Menu from './src/Menu.vue'
+
+export { Menu }
diff --git a/marketing-ui/admin-ui/src/layout/components/Menu/src/Menu.vue b/marketing-ui/admin-ui/src/layout/components/Menu/src/Menu.vue
new file mode 100644
index 0000000..94a1da4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Menu/src/Menu.vue
@@ -0,0 +1,272 @@
+<script lang="tsx">
+import { PropType } from 'vue'
+import { ElMenu, ElScrollbar } from 'element-plus'
+import { useAppStore } from '@/store/modules/app'
+import { usePermissionStore } from '@/store/modules/permission'
+import { useRenderMenuItem } from './components/useRenderMenuItem'
+import { isUrl } from '@/utils/is'
+import { useDesign } from '@/hooks/web/useDesign'
+import { LayoutType } from '@/types/layout'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('menu')
+
+export default defineComponent({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: 'Menu',
+  props: {
+    menuSelect: {
+      type: Function as PropType<(index: string) => void>,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const appStore = useAppStore()
+
+    const layout = computed(() => appStore.getLayout)
+
+    const { push, currentRoute } = useRouter()
+
+    const permissionStore = usePermissionStore()
+
+    const menuMode = computed((): 'vertical' | 'horizontal' => {
+      // 竖
+      const vertical: LayoutType[] = ['classic', 'topLeft', 'cutMenu']
+
+      if (vertical.includes(unref(layout))) {
+        return 'vertical'
+      } else {
+        return 'horizontal'
+      }
+    })
+
+    const routers = computed(() =>
+      unref(layout) === 'cutMenu' ? permissionStore.getMenuTabRouters : permissionStore.getRouters
+    )
+
+    const collapse = computed(() => appStore.getCollapse)
+
+    const uniqueOpened = computed(() => appStore.getUniqueOpened)
+
+    const activeMenu = computed(() => {
+      const { meta, path } = unref(currentRoute)
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu as string
+      }
+      return path
+    })
+
+    const menuSelect = (index: string) => {
+      if (props.menuSelect) {
+        props.menuSelect(index)
+      }
+      // 自定义事件
+      if (isUrl(index)) {
+        window.open(index)
+      } else {
+        push(index)
+      }
+    }
+
+    const renderMenuWrap = () => {
+      if (unref(layout) === 'top') {
+        return renderMenu()
+      } else {
+        return <ElScrollbar>{renderMenu()}</ElScrollbar>
+      }
+    }
+
+    const renderMenu = () => {
+      return (
+        <ElMenu
+          defaultActive={unref(activeMenu)}
+          mode={unref(menuMode)}
+          collapse={
+            unref(layout) === 'top' || unref(layout) === 'cutMenu' ? false : unref(collapse)
+          }
+          uniqueOpened={unref(layout) === 'top' ? false : unref(uniqueOpened)}
+          backgroundColor="var(--left-menu-bg-color)"
+          textColor="var(--left-menu-text-color)"
+          activeTextColor="var(--left-menu-text-active-color)"
+          popperClass={
+            unref(menuMode) === 'vertical'
+              ? `${prefixCls}-popper--vertical`
+              : `${prefixCls}-popper--horizontal`
+          }
+          onSelect={menuSelect}
+        >
+          {{
+            default: () => {
+              const { renderMenuItem } = useRenderMenuItem(unref(menuMode))
+              return renderMenuItem(unref(routers))
+            }
+          }}
+        </ElMenu>
+      )
+    }
+
+    return () => (
+      <div
+        id={prefixCls}
+        class={[
+          `${prefixCls} ${prefixCls}__${unref(menuMode)}`,
+          'h-[100%] overflow-hidden flex-col bg-[var(--left-menu-bg-color)]',
+          {
+            'w-[var(--left-menu-min-width)]': unref(collapse) && unref(layout) !== 'cutMenu',
+            'w-[var(--left-menu-max-width)]': !unref(collapse) && unref(layout) !== 'cutMenu'
+          }
+        ]}
+      >
+        {renderMenuWrap()}
+      </div>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-menu;
+
+.#{$prefix-cls} {
+  position: relative;
+  transition: width var(--transition-time-02);
+
+  :deep(.#{$elNamespace}-menu) {
+    width: 100% !important;
+    border-right: none;
+
+    // 设置选中时子标题的颜色
+    .is-active {
+      & > .#{$elNamespace}-sub-menu__title {
+        color: var(--left-menu-text-active-color) !important;
+      }
+    }
+
+    // 设置子菜单悬停的高亮和背景色
+    .#{$elNamespace}-sub-menu__title,
+    .#{$elNamespace}-menu-item {
+      &:hover {
+        color: var(--left-menu-text-active-color) !important;
+        background-color: var(--left-menu-bg-color) !important;
+      }
+    }
+
+    // 设置选中时的高亮背景和高亮颜色
+    .#{$elNamespace}-menu-item.is-active {
+      color: var(--left-menu-text-active-color) !important;
+      background-color: var(--left-menu-bg-active-color) !important;
+
+      &:hover {
+        background-color: var(--left-menu-bg-active-color) !important;
+      }
+    }
+
+    .#{$elNamespace}-menu-item.is-active {
+      position: relative;
+    }
+
+    // 设置子菜单的背景颜色
+    .#{$elNamespace}-menu {
+      .#{$elNamespace}-sub-menu__title,
+      .#{$elNamespace}-menu-item:not(.is-active) {
+        background-color: var(--left-menu-bg-light-color) !important;
+      }
+    }
+  }
+
+  // 折叠时的最小宽度
+  :deep(.#{$elNamespace}-menu--collapse) {
+    width: var(--left-menu-min-width);
+
+    & > .is-active,
+    & > .is-active > .#{$elNamespace}-sub-menu__title {
+      position: relative;
+      background-color: var(--left-menu-collapse-bg-active-color) !important;
+    }
+  }
+
+  // 折叠动画的时候，就需要把文字给隐藏掉
+  :deep(.horizontal-collapse-transition) {
+    // transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
+    .#{$prefix-cls}__title {
+      display: none;
+    }
+  }
+
+  // 垂直菜单
+  &__vertical {
+    :deep(.#{$elNamespace}-menu--vertical) {
+      &:not(.#{$elNamespace}-menu--collapse) .#{$elNamespace}-sub-menu__title,
+      .#{$elNamespace}-menu-item {
+        padding-right: 0;
+      }
+    }
+  }
+
+  // 水平菜单
+  &__horizontal {
+    height: calc(var(--top-tool-height)) !important;
+
+    :deep(.#{$elNamespace}-menu--horizontal) {
+      height: calc(var(--top-tool-height));
+      border-bottom: none;
+      // 重新设置底部高亮颜色
+      & > .#{$elNamespace}-sub-menu.is-active {
+        .#{$elNamespace}-sub-menu__title {
+          border-bottom-color: var(--el-color-primary) !important;
+        }
+      }
+
+      .#{$elNamespace}-menu-item.is-active {
+        position: relative;
+
+        &::after {
+          display: none !important;
+        }
+      }
+
+      .#{$prefix-cls}__title {
+        /* stylelint-disable-next-line */
+        max-height: calc(var(--top-tool-height) - 2px) !important;
+        /* stylelint-disable-next-line */
+        line-height: calc(var(--top-tool-height) - 2px);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+$prefix-cls: #{$namespace}-menu-popper;
+
+.#{$prefix-cls}--vertical,
+.#{$prefix-cls}--horizontal {
+  // 设置选中时子标题的颜色
+  .is-active {
+    & > .el-sub-menu__title {
+      color: var(--left-menu-text-active-color) !important;
+    }
+  }
+
+  // 设置子菜单悬停的高亮和背景色
+  .el-sub-menu__title,
+  .el-menu-item {
+    &:hover {
+      color: var(--left-menu-text-active-color) !important;
+      background-color: var(--left-menu-bg-color) !important;
+    }
+  }
+
+  // 设置选中时的高亮背景
+  .el-menu-item.is-active {
+    position: relative;
+    background-color: var(--left-menu-bg-active-color) !important;
+
+    &:hover {
+      background-color: var(--left-menu-bg-active-color) !important;
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/Menu/src/components/useRenderMenuItem.tsx b/marketing-ui/admin-ui/src/layout/components/Menu/src/components/useRenderMenuItem.tsx
new file mode 100644
index 0000000..301313f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Menu/src/components/useRenderMenuItem.tsx
@@ -0,0 +1,50 @@
+import { ElSubMenu, ElMenuItem } from 'element-plus'
+import { hasOneShowingChild } from '../helper'
+import { isUrl } from '@/utils/is'
+import { useRenderMenuTitle } from './useRenderMenuTitle'
+import { pathResolve } from '@/utils/routerHelper'
+
+const { renderMenuTitle } = useRenderMenuTitle()
+
+export const useRenderMenuItem = () =>
+  // allRouters: AppRouteRecordRaw[] = [],
+  {
+    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
+      return routers
+        .filter((v) => !v.meta?.hidden)
+        .map((v) => {
+          const meta = v.meta ?? {}
+          const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
+          const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
+
+          if (
+            oneShowingChild &&
+            (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
+            !meta?.alwaysShow
+          ) {
+            return (
+              <ElMenuItem
+                index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
+              >
+                {{
+                  default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
+                }}
+              </ElMenuItem>
+            )
+          } else {
+            return (
+              <ElSubMenu index={fullPath}>
+                {{
+                  title: () => renderMenuTitle(meta),
+                  default: () => renderMenuItem(v.children!, fullPath)
+                }}
+              </ElSubMenu>
+            )
+          }
+        })
+    }
+
+    return {
+      renderMenuItem
+    }
+  }
diff --git a/marketing-ui/admin-ui/src/layout/components/Menu/src/components/useRenderMenuTitle.tsx b/marketing-ui/admin-ui/src/layout/components/Menu/src/components/useRenderMenuTitle.tsx
new file mode 100644
index 0000000..8941d9d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Menu/src/components/useRenderMenuTitle.tsx
@@ -0,0 +1,27 @@
+import type { RouteMeta } from 'vue-router'
+import { Icon } from '@/components/Icon'
+import { useI18n } from '@/hooks/web/useI18n'
+
+export const useRenderMenuTitle = () => {
+  const renderMenuTitle = (meta: RouteMeta) => {
+    const { t } = useI18n()
+    const { title = 'Please set title', icon } = meta
+
+    return icon ? (
+      <>
+        <Icon icon={meta.icon}></Icon>
+        <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
+          {t(title as string)}
+        </span>
+      </>
+    ) : (
+      <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
+        {t(title as string)}
+      </span>
+    )
+  }
+
+  return {
+    renderMenuTitle
+  }
+}
diff --git a/marketing-ui/admin-ui/src/layout/components/Menu/src/helper.ts b/marketing-ui/admin-ui/src/layout/components/Menu/src/helper.ts
new file mode 100644
index 0000000..c26f5f4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Menu/src/helper.ts
@@ -0,0 +1,54 @@
+import type { RouteMeta } from 'vue-router'
+import { findPath } from '@/utils/tree'
+
+type OnlyOneChildType = AppRouteRecordRaw & { noShowingChildren?: boolean }
+
+interface HasOneShowingChild {
+  oneShowingChild?: boolean
+  onlyOneChild?: OnlyOneChildType
+}
+
+export const getAllParentPath = <T = Recordable>(treeData: T[], path: string) => {
+  const menuList = findPath(treeData, (n) => n.path === path) as AppRouteRecordRaw[]
+  return (menuList || []).map((item) => item.path)
+}
+
+export const hasOneShowingChild = (
+  children: AppRouteRecordRaw[] = [],
+  parent: AppRouteRecordRaw
+): HasOneShowingChild => {
+  const onlyOneChild = ref<OnlyOneChildType>()
+
+  const showingChildren = children.filter((v) => {
+    const meta = (v.meta ?? {}) as RouteMeta
+    if (meta.hidden) {
+      return false
+    } else {
+      // Temp set(will be used if only has one showing child)
+      onlyOneChild.value = v
+      return true
+    }
+  })
+
+  // When there is only one child router, the child router is displayed by default
+  if (showingChildren.length === 1) {
+    return {
+      oneShowingChild: true,
+      onlyOneChild: unref(onlyOneChild)
+    }
+  }
+
+  // Show parent if there are no child router to display
+  if (!showingChildren.length) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    return {
+      oneShowingChild: true,
+      onlyOneChild: unref(onlyOneChild)
+    }
+  }
+
+  return {
+    oneShowingChild: false,
+    onlyOneChild: unref(onlyOneChild)
+  }
+}
diff --git a/marketing-ui/admin-ui/src/layout/components/Screenfull/index.ts b/marketing-ui/admin-ui/src/layout/components/Screenfull/index.ts
new file mode 100644
index 0000000..faec2d8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Screenfull/index.ts
@@ -0,0 +1,3 @@
+import Screenfull from './src/Screenfull.vue'
+
+export { Screenfull }
diff --git a/marketing-ui/admin-ui/src/layout/components/Screenfull/src/Screenfull.vue b/marketing-ui/admin-ui/src/layout/components/Screenfull/src/Screenfull.vue
new file mode 100644
index 0000000..4c045f2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Screenfull/src/Screenfull.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { Icon } from '@/components/Icon'
+import { useFullscreen } from '@vueuse/core'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'ScreenFull' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('screenfull')
+
+defineProps({
+  color: propTypes.string.def('')
+})
+
+const { toggle, isFullscreen } = useFullscreen()
+
+const toggleFullscreen = () => {
+  toggle()
+}
+</script>
+
+<template>
+  <div :class="prefixCls" @click="toggleFullscreen">
+    <Icon
+      :color="color"
+      :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
+      :size="18"
+    />
+  </div>
+</template>
diff --git a/marketing-ui/admin-ui/src/layout/components/Setting/index.ts b/marketing-ui/admin-ui/src/layout/components/Setting/index.ts
new file mode 100644
index 0000000..b64c9ad
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Setting/index.ts
@@ -0,0 +1,3 @@
+import Setting from './src/Setting.vue'
+
+export { Setting }
diff --git a/marketing-ui/admin-ui/src/layout/components/Setting/src/Setting.vue b/marketing-ui/admin-ui/src/layout/components/Setting/src/Setting.vue
new file mode 100644
index 0000000..2973674
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Setting/src/Setting.vue
@@ -0,0 +1,302 @@
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+import { useClipboard, useCssVar } from '@vueuse/core'
+
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { useDesign } from '@/hooks/web/useDesign'
+
+import { setCssVar, trim } from '@/utils'
+import { colorIsDark, hexToRGB, lighten } from '@/utils/color'
+import { useAppStore } from '@/store/modules/app'
+import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
+import ColorRadioPicker from './components/ColorRadioPicker.vue'
+import InterfaceDisplay from './components/InterfaceDisplay.vue'
+import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
+
+defineOptions({ name: 'Setting' })
+
+const { t } = useI18n()
+const appStore = useAppStore()
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('setting')
+const layout = computed(() => appStore.getLayout)
+const drawer = ref(false)
+
+// 主题色相关
+const systemTheme = ref(appStore.getTheme.elColorPrimary)
+
+const setSystemTheme = (color: string) => {
+  setCssVar('--el-color-primary', color)
+  appStore.setTheme({ elColorPrimary: color })
+  const leftMenuBgColor = useCssVar('--left-menu-bg-color', document.documentElement)
+  setMenuTheme(trim(unref(leftMenuBgColor)))
+}
+
+// 头部主题相关
+const headerTheme = ref(appStore.getTheme.topHeaderBgColor || '')
+
+const setHeaderTheme = (color: string) => {
+  const isDarkColor = colorIsDark(color)
+  const textColor = isDarkColor ? '#fff' : 'inherit'
+  const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6'
+  const topToolBorderColor = isDarkColor ? color : '#eee'
+  setCssVar('--top-header-bg-color', color)
+  setCssVar('--top-header-text-color', textColor)
+  setCssVar('--top-header-hover-color', textHoverColor)
+  appStore.setTheme({
+    topHeaderBgColor: color,
+    topHeaderTextColor: textColor,
+    topHeaderHoverColor: textHoverColor,
+    topToolBorderColor
+  })
+  if (unref(layout) === 'top') {
+    setMenuTheme(color)
+  }
+}
+
+// 菜单主题相关
+const menuTheme = ref(appStore.getTheme.leftMenuBgColor || '')
+
+const setMenuTheme = (color: string) => {
+  const primaryColor = useCssVar('--el-color-primary', document.documentElement)
+  const isDarkColor = colorIsDark(color)
+  const theme: Recordable = {
+    // 左侧菜单边框颜色
+    leftMenuBorderColor: isDarkColor ? 'inherit' : '#eee',
+    // 左侧菜单背景颜色
+    leftMenuBgColor: color,
+    // 左侧菜单浅色背景颜色
+    leftMenuBgLightColor: isDarkColor ? lighten(color!, 6) : color,
+    // 左侧菜单选中背景颜色
+    leftMenuBgActiveColor: isDarkColor
+      ? 'var(--el-color-primary)'
+      : hexToRGB(unref(primaryColor), 0.1),
+    // 左侧菜单收起选中背景颜色
+    leftMenuCollapseBgActiveColor: isDarkColor
+      ? 'var(--el-color-primary)'
+      : hexToRGB(unref(primaryColor), 0.1),
+    // 左侧菜单字体颜色
+    leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333',
+    // 左侧菜单选中字体颜色
+    leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
+    // logo字体颜色
+    logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
+    // logo边框颜色
+    logoBorderColor: isDarkColor ? color : '#eee'
+  }
+  appStore.setTheme(theme)
+  appStore.setCssVarTheme()
+}
+if (layout.value === 'top' && !appStore.getIsDark) {
+  headerTheme.value = '#fff'
+  setHeaderTheme('#fff')
+}
+
+// 监听layout变化，重置一些主题色
+watch(
+  () => layout.value,
+  (n) => {
+    if (n === 'top' && !appStore.getIsDark) {
+      headerTheme.value = '#fff'
+      setHeaderTheme('#fff')
+    } else {
+      setMenuTheme(unref(menuTheme))
+    }
+  }
+)
+
+// 拷贝
+const copyConfig = async () => {
+  const { copy, copied, isSupported } = useClipboard({
+    source: `
+      // 面包屑
+      breadcrumb: ${appStore.getBreadcrumb},
+      // 面包屑图标
+      breadcrumbIcon: ${appStore.getBreadcrumbIcon},
+      // 折叠图标
+      hamburger: ${appStore.getHamburger},
+      // 全屏图标
+      screenfull: ${appStore.getScreenfull},
+      // 尺寸图标
+      size: ${appStore.getSize},
+      // 多语言图标
+      locale: ${appStore.getLocale},
+      // 消息图标
+      message: ${appStore.getMessage},
+      // 标签页
+      tagsView: ${appStore.getTagsView},
+      // 标签页
+      tagsViewImmerse: ${appStore.getTagsViewImmerse},
+      // 标签页图标
+      tagsViewIcon: ${appStore.getTagsViewIcon},
+      // logo
+      logo: ${appStore.getLogo},
+      // 菜单手风琴
+      uniqueOpened: ${appStore.getUniqueOpened},
+      // 固定header
+      fixedHeader: ${appStore.getFixedHeader},
+      // 页脚
+      footer: ${appStore.getFooter},
+      // 灰色模式
+      greyMode: ${appStore.getGreyMode},
+      // layout布局
+      layout: '${appStore.getLayout}',
+      // 暗黑模式
+      isDark: ${appStore.getIsDark},
+      // 组件尺寸
+      currentSize: '${appStore.getCurrentSize}',
+      // 主题相关
+      theme: {
+        // 主题色
+        elColorPrimary: '${appStore.getTheme.elColorPrimary}',
+        // 左侧菜单边框颜色
+        leftMenuBorderColor: '${appStore.getTheme.leftMenuBorderColor}',
+        // 左侧菜单背景颜色
+        leftMenuBgColor: '${appStore.getTheme.leftMenuBgColor}',
+        // 左侧菜单浅色背景颜色
+        leftMenuBgLightColor: '${appStore.getTheme.leftMenuBgLightColor}',
+        // 左侧菜单选中背景颜色
+        leftMenuBgActiveColor: '${appStore.getTheme.leftMenuBgActiveColor}',
+        // 左侧菜单收起选中背景颜色
+        leftMenuCollapseBgActiveColor: '${appStore.getTheme.leftMenuCollapseBgActiveColor}',
+        // 左侧菜单字体颜色
+        leftMenuTextColor: '${appStore.getTheme.leftMenuTextColor}',
+        // 左侧菜单选中字体颜色
+        leftMenuTextActiveColor: '${appStore.getTheme.leftMenuTextActiveColor}',
+        // logo字体颜色
+        logoTitleTextColor: '${appStore.getTheme.logoTitleTextColor}',
+        // logo边框颜色
+        logoBorderColor: '${appStore.getTheme.logoBorderColor}',
+        // 头部背景颜色
+        topHeaderBgColor: '${appStore.getTheme.topHeaderBgColor}',
+        // 头部字体颜色
+        topHeaderTextColor: '${appStore.getTheme.topHeaderTextColor}',
+        // 头部悬停颜色
+        topHeaderHoverColor: '${appStore.getTheme.topHeaderHoverColor}',
+        // 头部边框颜色
+        topToolBorderColor: '${appStore.getTheme.topToolBorderColor}'
+      }
+    `
+  })
+  if (!isSupported) {
+    ElMessage.error(t('setting.copyFailed'))
+  } else {
+    await copy()
+    if (unref(copied)) {
+      ElMessage.success(t('setting.copySuccess'))
+    }
+  }
+}
+
+// 清空缓存
+const clear = () => {
+  const { wsCache } = useCache()
+  wsCache.delete(CACHE_KEY.LAYOUT)
+  wsCache.delete(CACHE_KEY.THEME)
+  wsCache.delete(CACHE_KEY.IS_DARK)
+  window.location.reload()
+}
+</script>
+
+<template>
+  <div
+    :class="prefixCls"
+    class="fixed right-0 top-[45%] h-40px w-40px cursor-pointer bg-[var(--el-color-primary)] text-center leading-40px"
+    @click="drawer = true"
+  >
+    <Icon color="#fff" icon="ep:setting" />
+  </div>
+
+  <ElDrawer v-model="drawer" :z-index="4000" direction="rtl" size="350px">
+    <template #header>
+      <span class="text-16px font-700">{{ t('setting.projectSetting') }}</span>
+    </template>
+
+    <div class="text-center">
+      <!-- 主题 -->
+      <ElDivider>{{ t('setting.theme') }}</ElDivider>
+      <ThemeSwitch />
+
+      <!-- 布局 -->
+      <ElDivider>{{ t('setting.layout') }}</ElDivider>
+      <LayoutRadioPicker />
+
+      <!-- 系统主题 -->
+      <ElDivider>{{ t('setting.systemTheme') }}</ElDivider>
+      <ColorRadioPicker
+        v-model="systemTheme"
+        :schema="[
+          '#409eff',
+          '#009688',
+          '#536dfe',
+          '#ff5c93',
+          '#ee4f12',
+          '#0096c7',
+          '#9c27b0',
+          '#ff9800'
+        ]"
+        @change="setSystemTheme"
+      />
+
+      <!-- 头部主题 -->
+      <ElDivider>{{ t('setting.headerTheme') }}</ElDivider>
+      <ColorRadioPicker
+        v-model="headerTheme"
+        :schema="[
+          '#fff',
+          '#151515',
+          '#5172dc',
+          '#e74c3c',
+          '#24292e',
+          '#394664',
+          '#009688',
+          '#383f45'
+        ]"
+        @change="setHeaderTheme"
+      />
+
+      <!-- 菜单主题 -->
+      <template v-if="layout !== 'top'">
+        <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
+        <ColorRadioPicker
+          v-model="menuTheme"
+          :schema="[
+            '#fff',
+            '#001529',
+            '#212121',
+            '#273352',
+            '#191b24',
+            '#383f45',
+            '#001628',
+            '#344058'
+          ]"
+          @change="setMenuTheme"
+        />
+      </template>
+    </div>
+
+    <!-- 界面显示 -->
+    <ElDivider>{{ t('setting.interfaceDisplay') }}</ElDivider>
+    <InterfaceDisplay />
+
+    <ElDivider />
+    <div>
+      <ElButton class="w-full" type="primary" @click="copyConfig">{{ t('setting.copy') }}</ElButton>
+    </div>
+    <div class="mt-5px">
+      <ElButton class="w-full" type="danger" @click="clear">
+        {{ t('setting.clearAndReset') }}
+      </ElButton>
+    </div>
+  </ElDrawer>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-setting;
+
+.#{$prefix-cls} {
+  border-radius: 6px 0 0 6px;
+  z-index: 1200;/*修正没有z-index会被表格层覆盖,值不要超过4000*/
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/Setting/src/components/ColorRadioPicker.vue b/marketing-ui/admin-ui/src/layout/components/Setting/src/components/ColorRadioPicker.vue
new file mode 100644
index 0000000..fcc5e75
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Setting/src/components/ColorRadioPicker.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'ColorRadioPicker' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('color-radio-picker')
+
+const props = defineProps({
+  schema: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  modelValue: propTypes.string.def('')
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const colorVal = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  (val: string) => {
+    if (val === unref(colorVal)) return
+    colorVal.value = val
+  }
+)
+
+// 监听
+watch(
+  () => colorVal.value,
+  (val: string) => {
+    emit('update:modelValue', val)
+    emit('change', val)
+  }
+)
+</script>
+
+<template>
+  <div :class="prefixCls" class="flex flex-wrap space-x-14px">
+    <span
+      v-for="(item, i) in schema"
+      :key="`radio-${i}`"
+      :class="{ 'is-active': colorVal === item }"
+      :style="{
+        background: item
+      }"
+      class="mb-5px h-20px w-20px cursor-pointer border-2px border-gray-300 rounded-2px border-solid text-center leading-20px"
+      @click="colorVal = item"
+    >
+      <Icon v-if="colorVal === item" :size="16" color="#fff" icon="ep:check" />
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-color-radio-picker;
+
+.#{$prefix-cls} {
+  .is-active {
+    border-color: var(--el-color-primary);
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/Setting/src/components/InterfaceDisplay.vue b/marketing-ui/admin-ui/src/layout/components/Setting/src/components/InterfaceDisplay.vue
new file mode 100644
index 0000000..3ba5c6b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Setting/src/components/InterfaceDisplay.vue
@@ -0,0 +1,236 @@
+<script lang="ts" setup>
+import { setCssVar } from '@/utils'
+
+import { useDesign } from '@/hooks/web/useDesign'
+import { useWatermark } from '@/hooks/web/useWatermark'
+import { useAppStore } from '@/store/modules/app'
+
+defineOptions({ name: 'InterfaceDisplay' })
+
+const { t } = useI18n()
+const { getPrefixCls } = useDesign()
+const { setWatermark } = useWatermark()
+const prefixCls = getPrefixCls('interface-display')
+const appStore = useAppStore()
+
+const water = ref()
+
+// 面包屑
+const breadcrumb = ref(appStore.getBreadcrumb)
+
+const breadcrumbChange = (show: boolean) => {
+  appStore.setBreadcrumb(show)
+}
+
+// 面包屑图标
+const breadcrumbIcon = ref(appStore.getBreadcrumbIcon)
+
+const breadcrumbIconChange = (show: boolean) => {
+  appStore.setBreadcrumbIcon(show)
+}
+
+// 折叠图标
+const hamburger = ref(appStore.getHamburger)
+
+const hamburgerChange = (show: boolean) => {
+  appStore.setHamburger(show)
+}
+
+// 全屏图标
+const screenfull = ref(appStore.getScreenfull)
+
+const screenfullChange = (show: boolean) => {
+  appStore.setScreenfull(show)
+}
+
+// 尺寸图标
+const size = ref(appStore.getSize)
+
+const sizeChange = (show: boolean) => {
+  appStore.setSize(show)
+}
+
+// 多语言图标
+const locale = ref(appStore.getLocale)
+
+const localeChange = (show: boolean) => {
+  appStore.setLocale(show)
+}
+
+// 消息图标
+const message = ref(appStore.getMessage)
+
+const messageChange = (show: boolean) => {
+  appStore.setMessage(show)
+}
+
+// 标签页
+const tagsView = ref(appStore.getTagsView)
+
+const tagsViewChange = (show: boolean) => {
+  // 切换标签栏显示时，同步切换标签栏的高度
+  setCssVar('--tags-view-height', show ? '35px' : '0px')
+  appStore.setTagsView(show)
+}
+
+// 标签页沉浸
+const tagsViewImmerse = ref(appStore.getTagsViewImmerse)
+
+const tagsViewImmerseChange = (immerse: boolean) => {
+  appStore.setTagsViewImmerse(immerse)
+}
+
+// 标签页图标
+const tagsViewIcon = ref(appStore.getTagsViewIcon)
+
+const tagsViewIconChange = (show: boolean) => {
+  appStore.setTagsViewIcon(show)
+}
+
+// logo
+const logo = ref(appStore.getLogo)
+
+const logoChange = (show: boolean) => {
+  appStore.setLogo(show)
+}
+
+// 菜单手风琴
+const uniqueOpened = ref(appStore.getUniqueOpened)
+
+const uniqueOpenedChange = (uniqueOpened: boolean) => {
+  appStore.setUniqueOpened(uniqueOpened)
+}
+
+// 固定头部
+const fixedHeader = ref(appStore.getFixedHeader)
+
+const fixedHeaderChange = (show: boolean) => {
+  appStore.setFixedHeader(show)
+}
+
+// 页脚
+const footer = ref(appStore.getFooter)
+
+const footerChange = (show: boolean) => {
+  appStore.setFooter(show)
+}
+
+// 灰色模式
+const greyMode = ref(appStore.getGreyMode)
+
+const greyModeChange = (show: boolean) => {
+  appStore.setGreyMode(show)
+}
+
+// 固定菜单
+const fixedMenu = ref(appStore.getFixedMenu)
+
+const fixedMenuChange = (show: boolean) => {
+  appStore.setFixedMenu(show)
+}
+
+// 设置水印
+const setWater = () => {
+  setWatermark(water.value)
+}
+
+const layout = computed(() => appStore.getLayout)
+
+watch(
+  () => layout.value,
+  (n) => {
+    if (n === 'top') {
+      appStore.setCollapse(false)
+    }
+  }
+)
+</script>
+
+<template>
+  <div :class="prefixCls">
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.breadcrumb') }}</span>
+      <ElSwitch v-model="breadcrumb" @change="breadcrumbChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.breadcrumbIcon') }}</span>
+      <ElSwitch v-model="breadcrumbIcon" @change="breadcrumbIconChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.hamburgerIcon') }}</span>
+      <ElSwitch v-model="hamburger" @change="hamburgerChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.screenfullIcon') }}</span>
+      <ElSwitch v-model="screenfull" @change="screenfullChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.sizeIcon') }}</span>
+      <ElSwitch v-model="size" @change="sizeChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.localeIcon') }}</span>
+      <ElSwitch v-model="locale" @change="localeChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.messageIcon') }}</span>
+      <ElSwitch v-model="message" @change="messageChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.tagsView') }}</span>
+      <ElSwitch v-model="tagsView" @change="tagsViewChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.tagsViewImmerse') }}</span>
+      <ElSwitch v-model="tagsViewImmerse" @change="tagsViewImmerseChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.tagsViewIcon') }}</span>
+      <ElSwitch v-model="tagsViewIcon" @change="tagsViewIconChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.logo') }}</span>
+      <ElSwitch v-model="logo" @change="logoChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.uniqueOpened') }}</span>
+      <ElSwitch v-model="uniqueOpened" @change="uniqueOpenedChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.fixedHeader') }}</span>
+      <ElSwitch v-model="fixedHeader" @change="fixedHeaderChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.footer') }}</span>
+      <ElSwitch v-model="footer" @change="footerChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.greyMode') }}</span>
+      <ElSwitch v-model="greyMode" @change="greyModeChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.fixedMenu') }}</span>
+      <ElSwitch v-model="fixedMenu" @change="fixedMenuChange" />
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('watermark.watermark') }}</span>
+      <ElInput v-model="water" class="right-1 w-20" @change="setWater()" />
+    </div>
+  </div>
+</template>
diff --git a/marketing-ui/admin-ui/src/layout/components/Setting/src/components/LayoutRadioPicker.vue b/marketing-ui/admin-ui/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
new file mode 100644
index 0000000..801686c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/store/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'LayoutRadioPicker' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('layout-radio-picker')
+
+const appStore = useAppStore()
+
+const layout = computed(() => appStore.getLayout)
+</script>
+
+<template>
+  <div :class="prefixCls" class="flex flex-wrap space-x-14px">
+    <div
+      :class="[
+        `${prefixCls}__classic`,
+        'relative w-56px h-48px cursor-pointer bg-gray-300',
+        {
+          'is-acitve': layout === 'classic'
+        }
+      ]"
+      @click="appStore.setLayout('classic')"
+    ></div>
+    <div
+      :class="[
+        `${prefixCls}__top-left`,
+        'relative w-56px h-48px cursor-pointer bg-gray-300',
+        {
+          'is-acitve': layout === 'topLeft'
+        }
+      ]"
+      @click="appStore.setLayout('topLeft')"
+    ></div>
+    <div
+      :class="[
+        `${prefixCls}__top`,
+        'relative w-56px h-48px cursor-pointer bg-gray-300',
+        {
+          'is-acitve': layout === 'top'
+        }
+      ]"
+      @click="appStore.setLayout('top')"
+    ></div>
+    <div
+      :class="[
+        `${prefixCls}__cut-menu`,
+        'relative w-56px h-48px cursor-pointer bg-gray-300',
+        {
+          'is-acitve': layout === 'cutMenu'
+        }
+      ]"
+      @click="appStore.setLayout('cutMenu')"
+    >
+      <div class="absolute left-[10%] top-0 h-full w-[33%] bg-gray-200"></div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-layout-radio-picker;
+
+.#{$prefix-cls} {
+  &__classic {
+    border: 2px solid #e5e7eb;
+    border-radius: 4px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 33%;
+      height: 100%;
+      background-color: #273352;
+      border-radius: 4px 0 0 4px;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 25%;
+      background-color: #fff;
+      border-radius: 4px 4px 0;
+      content: '';
+    }
+  }
+
+  &__top-left {
+    border: 2px solid #e5e7eb;
+    border-radius: 4px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 33%;
+      background-color: #273352;
+      border-radius: 4px 4px 0 0;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 33%;
+      height: 100%;
+      background-color: #fff;
+      border-radius: 4px 0 0 4px;
+      content: '';
+    }
+  }
+
+  &__top {
+    border: 2px solid #e5e7eb;
+    border-radius: 4px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 33%;
+      background-color: #273352;
+      border-radius: 4px 4px 0 0;
+      content: '';
+    }
+  }
+
+  &__cut-menu {
+    border: 2px solid #e5e7eb;
+    border-radius: 4px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 33%;
+      background-color: #273352;
+      border-radius: 4px 4px 0 0;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 10%;
+      height: 100%;
+      background-color: #fff;
+      border-radius: 4px 0 0 4px;
+      content: '';
+    }
+  }
+
+  .is-acitve {
+    border-color: var(--el-color-primary);
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/SizeDropdown/index.ts b/marketing-ui/admin-ui/src/layout/components/SizeDropdown/index.ts
new file mode 100644
index 0000000..516488d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/SizeDropdown/index.ts
@@ -0,0 +1,3 @@
+import SizeDropdown from './src/SizeDropdown.vue'
+
+export { SizeDropdown }
diff --git a/marketing-ui/admin-ui/src/layout/components/SizeDropdown/src/SizeDropdown.vue b/marketing-ui/admin-ui/src/layout/components/SizeDropdown/src/SizeDropdown.vue
new file mode 100644
index 0000000..3e15224
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/SizeDropdown/src/SizeDropdown.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/store/modules/app'
+
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+import { ElementPlusSize } from '@/types/elementPlus'
+
+defineOptions({ name: 'SizeDropdown' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('size-dropdown')
+
+defineProps({
+  color: propTypes.string.def('')
+})
+
+const { t } = useI18n()
+
+const appStore = useAppStore()
+
+const sizeMap = computed(() => appStore.sizeMap)
+
+const setCurrentSize = (size: ElementPlusSize) => {
+  appStore.setCurrentSize(size)
+}
+</script>
+
+<template>
+  <ElDropdown :class="prefixCls" trigger="click" @command="setCurrentSize">
+    <Icon :color="color" :size="18" class="cursor-pointer" icon="mdi:format-size" />
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem v-for="item in sizeMap" :key="item" :command="item">
+          {{ t(`size.${item}`) }}
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>
diff --git a/marketing-ui/admin-ui/src/layout/components/TabMenu/index.ts b/marketing-ui/admin-ui/src/layout/components/TabMenu/index.ts
new file mode 100644
index 0000000..b5fd71c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/TabMenu/index.ts
@@ -0,0 +1,3 @@
+import TabMenu from './src/TabMenu.vue'
+
+export { TabMenu }
diff --git a/marketing-ui/admin-ui/src/layout/components/TabMenu/src/TabMenu.vue b/marketing-ui/admin-ui/src/layout/components/TabMenu/src/TabMenu.vue
new file mode 100644
index 0000000..efad6a6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/TabMenu/src/TabMenu.vue
@@ -0,0 +1,240 @@
+<script lang="tsx">
+import { usePermissionStore } from '@/store/modules/permission'
+import { useAppStore } from '@/store/modules/app'
+
+import { ElScrollbar } from 'element-plus'
+import { Icon } from '@/components/Icon'
+import { Menu } from '@/layout/components/Menu'
+import { pathResolve } from '@/utils/routerHelper'
+import { cloneDeep } from 'lodash-es'
+import { filterMenusPath, initTabMap, tabPathMap } from './helper'
+import { useDesign } from '@/hooks/web/useDesign'
+import { isUrl } from '@/utils/is'
+
+const { getPrefixCls, variables } = useDesign()
+
+const prefixCls = getPrefixCls('tab-menu')
+
+export default defineComponent({
+  name: 'TabMenu',
+  setup() {
+    const { push, currentRoute } = useRouter()
+
+    const { t } = useI18n()
+
+    const appStore = useAppStore()
+
+    const collapse = computed(() => appStore.getCollapse)
+
+    const fixedMenu = computed(() => appStore.getFixedMenu)
+
+    const permissionStore = usePermissionStore()
+
+    const routers = computed(() => permissionStore.getRouters)
+
+    const tabRouters = computed(() => unref(routers).filter((v) => !v?.meta?.hidden))
+
+    const setCollapse = () => {
+      appStore.setCollapse(!unref(collapse))
+    }
+
+    onMounted(() => {
+      if (unref(fixedMenu)) {
+        const path = `/${unref(currentRoute).path.split('/')[1]}`
+        const children = unref(tabRouters).find(
+          (v) =>
+            (v.meta?.alwaysShow || (v?.children?.length && v?.children?.length > 1)) &&
+            v.path === path
+        )?.children
+
+        tabActive.value = path
+        if (children) {
+          permissionStore.setMenuTabRouters(
+            cloneDeep(children).map((v) => {
+              v.path = pathResolve(unref(tabActive), v.path)
+              return v
+            })
+          )
+        }
+      }
+    })
+
+    watch(
+      () => routers.value,
+      (routers: AppRouteRecordRaw[]) => {
+        initTabMap(routers)
+        filterMenusPath(routers, routers)
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+
+    const showTitle = ref(true)
+
+    watch(
+      () => collapse.value,
+      (collapse: boolean) => {
+        if (!collapse) {
+          setTimeout(() => {
+            showTitle.value = !collapse
+          }, 200)
+        } else {
+          showTitle.value = !collapse
+        }
+      }
+    )
+
+    // 是否显示菜单
+    const showMenu = ref(unref(fixedMenu) ? true : false)
+
+    // tab高亮
+    const tabActive = ref('')
+
+    // tab点击事件
+    const tabClick = (item: AppRouteRecordRaw) => {
+      if (isUrl(item.path)) {
+        window.open(item.path)
+        return
+      }
+      const newPath = item.children ? item.path : item.path.split('/')[0]
+      const oldPath = unref(tabActive)
+      tabActive.value = item.children ? item.path : item.path.split('/')[0]
+      if (item.children) {
+        if (newPath === oldPath || !unref(showMenu)) {
+          showMenu.value = unref(fixedMenu) ? true : !unref(showMenu)
+        }
+        if (unref(showMenu)) {
+          permissionStore.setMenuTabRouters(
+            cloneDeep(item.children).map((v) => {
+              v.path = pathResolve(unref(tabActive), v.path)
+              return v
+            })
+          )
+        }
+      } else {
+        push(item.path)
+        permissionStore.setMenuTabRouters([])
+        showMenu.value = false
+      }
+    }
+
+    // 设置高亮
+    const isActive = (currentPath: string) => {
+      const { path } = unref(currentRoute)
+      if (tabPathMap[currentPath].includes(path)) {
+        return true
+      }
+      return false
+    }
+
+    const mouseleave = () => {
+      if (!unref(showMenu) || unref(fixedMenu)) return
+      showMenu.value = false
+    }
+
+    return () => (
+      <div
+        id={`${variables.namespace}-menu`}
+        class={[
+          prefixCls,
+          'relative bg-[var(--left-menu-bg-color)] layout-border__right',
+          {
+            'w-[var(--tab-menu-max-width)]': !unref(collapse),
+            'w-[var(--tab-menu-min-width)]': unref(collapse)
+          }
+        ]}
+        onMouseleave={mouseleave}
+      >
+        <ElScrollbar class="!h-[calc(100%-var(--tab-menu-collapse-height))]">
+          <div>
+            {() => {
+              return unref(tabRouters).map((v) => {
+                const item = (
+                  v.meta?.alwaysShow || (v?.children?.length && v?.children?.length > 1)
+                    ? v
+                    : {
+                        ...(v?.children && v?.children[0]),
+                        path: pathResolve(v.path, (v?.children && v?.children[0])?.path as string)
+                      }
+                ) as AppRouteRecordRaw
+                return (
+                  <div
+                    class={[
+                      `${prefixCls}__item`,
+                      'text-center text-12px relative py-12px cursor-pointer',
+                      {
+                        'is-active': isActive(v.path)
+                      }
+                    ]}
+                    onClick={() => {
+                      tabClick(item)
+                    }}
+                  >
+                    <div>
+                      <Icon icon={item?.meta?.icon}></Icon>
+                    </div>
+                    {!unref(showTitle) ? undefined : (
+                      <p class="mt-5px break-words px-2px">{t(item.meta?.title)}</p>
+                    )}
+                  </div>
+                )
+              })
+            }}
+          </div>
+        </ElScrollbar>
+        <div
+          class={[
+            `${prefixCls}--collapse`,
+            'text-center h-[var(--tab-menu-collapse-height)] leading-[var(--tab-menu-collapse-height)] cursor-pointer'
+          ]}
+          onClick={setCollapse}
+        >
+          <Icon icon={unref(collapse) ? 'ep:d-arrow-right' : 'ep:d-arrow-left'}></Icon>
+        </div>
+        <Menu
+          class={[
+            '!absolute top-0 z-11',
+            {
+              '!left-[var(--tab-menu-min-width)]': unref(collapse),
+              '!left-[var(--tab-menu-max-width)]': !unref(collapse),
+              '!w-[var(--left-menu-max-width)]': unref(showMenu) || unref(fixedMenu),
+              '!w-0': !unref(showMenu) && !unref(fixedMenu)
+            }
+          ]}
+          style="transition: width var(--transition-time-02), left var(--transition-time-02);"
+        ></Menu>
+      </div>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-tab-menu;
+
+.#{$prefix-cls} {
+  transition: all var(--transition-time-02);
+
+  &__item {
+    color: var(--left-menu-text-color);
+    transition: all var(--transition-time-02);
+
+    &:hover {
+      color: var(--left-menu-text-active-color);
+      // background-color: var(--left-menu-bg-active-color);
+    }
+  }
+
+  &--collapse {
+    color: var(--left-menu-text-color);
+    background-color: var(--left-menu-bg-light-color);
+  }
+
+  .is-active {
+    color: var(--left-menu-text-active-color);
+    background-color: var(--left-menu-bg-active-color);
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/TabMenu/src/helper.ts b/marketing-ui/admin-ui/src/layout/components/TabMenu/src/helper.ts
new file mode 100644
index 0000000..cce3932
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/TabMenu/src/helper.ts
@@ -0,0 +1,51 @@
+import { getAllParentPath } from '@/layout/components/Menu/src/helper'
+import type { RouteMeta } from 'vue-router'
+import { isUrl } from '@/utils/is'
+import { cloneDeep } from 'lodash-es'
+
+export type TabMapTypes = {
+  [key: string]: string[]
+}
+
+export const tabPathMap = reactive<TabMapTypes>({})
+
+export const initTabMap = (routes: AppRouteRecordRaw[]) => {
+  for (const v of routes) {
+    const meta = (v.meta ?? {}) as RouteMeta
+    if (!meta?.hidden) {
+      tabPathMap[v.path] = []
+    }
+  }
+}
+
+export const filterMenusPath = (
+  routes: AppRouteRecordRaw[],
+  allRoutes: AppRouteRecordRaw[]
+): AppRouteRecordRaw[] => {
+  const res: AppRouteRecordRaw[] = []
+  for (const v of routes) {
+    let data: Nullable<AppRouteRecordRaw> = null
+    const meta = (v.meta ?? {}) as RouteMeta
+    if (!meta.hidden || meta.canTo) {
+      const allParentPath = getAllParentPath<AppRouteRecordRaw>(allRoutes, v.path)
+
+      const fullPath = isUrl(v.path) ? v.path : allParentPath.join('/')
+
+      data = cloneDeep(v)
+      data.path = fullPath
+      if (v.children && data) {
+        data.children = filterMenusPath(v.children, allRoutes)
+      }
+
+      if (data) {
+        res.push(data)
+      }
+
+      if (allParentPath.length && Reflect.has(tabPathMap, allParentPath[0])) {
+        tabPathMap[allParentPath[0]].push(fullPath)
+      }
+    }
+  }
+
+  return res
+}
diff --git a/marketing-ui/admin-ui/src/layout/components/TagsView/index.ts b/marketing-ui/admin-ui/src/layout/components/TagsView/index.ts
new file mode 100644
index 0000000..30e604a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/TagsView/index.ts
@@ -0,0 +1,3 @@
+import TagsView from './src/TagsView.vue'
+
+export { TagsView }
diff --git a/marketing-ui/admin-ui/src/layout/components/TagsView/src/TagsView.vue b/marketing-ui/admin-ui/src/layout/components/TagsView/src/TagsView.vue
new file mode 100644
index 0000000..af492ba
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/TagsView/src/TagsView.vue
@@ -0,0 +1,651 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref, unref, watch } from 'vue'
+import type { RouteLocationNormalizedLoaded, RouterLinkProps } from 'vue-router'
+import { useRouter } from 'vue-router'
+import { usePermissionStore } from '@/store/modules/permission'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useAppStore } from '@/store/modules/app'
+import { useI18n } from '@/hooks/web/useI18n'
+import { filterAffixTags } from './helper'
+import { ContextMenu, ContextMenuExpose } from '@/layout/components/ContextMenu'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useTemplateRefsList } from '@vueuse/core'
+import { ElScrollbar } from 'element-plus'
+import { useScrollTo } from '@/hooks/event/useScrollTo'
+import { useTagsView } from '@/hooks/web/useTagsView'
+import { cloneDeep } from 'lodash-es'
+
+defineOptions({ name: 'TagsView' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('tags-view')
+
+const { t } = useI18n()
+
+const { currentRoute, push } = useRouter()
+
+const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTagsView()
+
+const permissionStore = usePermissionStore()
+
+const routers = computed(() => permissionStore.getRouters)
+
+const tagsViewStore = useTagsViewStore()
+
+const visitedViews = computed(() => tagsViewStore.getVisitedViews)
+
+const affixTagArr = ref<RouteLocationNormalizedLoaded[]>([])
+
+const selectedTag = computed(() => tagsViewStore.getSelectedTag)
+
+const setSelectTag = tagsViewStore.setSelectedTag
+
+const appStore = useAppStore()
+
+const tagsViewImmerse = computed(() => appStore.getTagsViewImmerse)
+
+const tagsViewIcon = computed(() => appStore.getTagsViewIcon)
+
+const isDark = computed(() => appStore.getIsDark)
+
+// 初始化tag
+const initTags = () => {
+  affixTagArr.value = filterAffixTags(unref(routers))
+  for (const tag of unref(affixTagArr)) {
+    // Must have tag name
+    if (tag.name) {
+      tagsViewStore.addVisitedView(cloneDeep(tag))
+    }
+  }
+}
+
+// 新增tag
+const addTags = () => {
+  const { name } = unref(currentRoute)
+  if (name) {
+    setSelectTag(unref(currentRoute))
+    tagsViewStore.addView(unref(currentRoute))
+  }
+}
+
+// 关闭选中的tag
+const closeSelectedTag = (view: RouteLocationNormalizedLoaded) => {
+  closeCurrent(view, () => {
+    if (isActive(view)) {
+      toLastView()
+    }
+  })
+}
+
+// 去最后一个
+const toLastView = () => {
+  const visitedViews = tagsViewStore.getVisitedViews
+  const latestView = visitedViews.slice(-1)[0]
+  if (latestView) {
+    push(latestView)
+  } else {
+    if (
+      unref(currentRoute).path === permissionStore.getAddRouters[0].path ||
+      unref(currentRoute).path === permissionStore.getAddRouters[0].redirect
+    ) {
+      addTags()
+      return
+    }
+    // You can set another route
+    push(permissionStore.getAddRouters[0].path)
+  }
+}
+
+// 关闭全部
+const closeAllTags = () => {
+  closeAll(() => {
+    toLastView()
+  })
+}
+
+// 关闭其它
+const closeOthersTags = () => {
+  closeOther()
+}
+
+// 重新加载
+const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
+  refreshPage(view)
+}
+
+// 关闭左侧
+const closeLeftTags = () => {
+  closeLeft()
+}
+
+// 关闭右侧
+const closeRightTags = () => {
+  closeRight()
+}
+
+// 滚动到选中的tag
+const moveToCurrentTag = async () => {
+  await nextTick()
+  for (const v of unref(visitedViews)) {
+    if (v.fullPath === unref(currentRoute).fullPath) {
+      moveToTarget(v)
+      break
+    }
+  }
+}
+
+const tagLinksRefs = useTemplateRefsList<RouterLinkProps>()
+
+const moveToTarget = (currentTag: RouteLocationNormalizedLoaded) => {
+  const wrap$ = unref(scrollbarRef)?.wrapRef
+  let firstTag: Nullable<RouterLinkProps> = null
+  let lastTag: Nullable<RouterLinkProps> = null
+
+  const tagList = unref(tagLinksRefs)
+  // find first tag and last tag
+  if (tagList.length > 0) {
+    firstTag = tagList[0]
+    lastTag = tagList[tagList.length - 1]
+  }
+  if ((firstTag?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath) {
+    // 直接滚动到0的位置
+    const { start } = useScrollTo({
+      el: wrap$!,
+      position: 'scrollLeft',
+      to: 0,
+      duration: 500
+    })
+    start()
+  } else if ((lastTag?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath) {
+    // 滚动到最后的位置
+    const { start } = useScrollTo({
+      el: wrap$!,
+      position: 'scrollLeft',
+      to: wrap$!.scrollWidth - wrap$!.offsetWidth,
+      duration: 500
+    })
+    start()
+  } else {
+    // find preTag and nextTag
+    const currentIndex: number = tagList.findIndex(
+      (item) => (item?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath
+    )
+    const tgsRefs = document.getElementsByClassName(`${prefixCls}__item`)
+
+    const prevTag = tgsRefs[currentIndex - 1] as HTMLElement
+    const nextTag = tgsRefs[currentIndex + 1] as HTMLElement
+
+    // the tag's offsetLeft after of nextTag
+    const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + 4
+
+    // the tag's offsetLeft before of prevTag
+    const beforePrevTagOffsetLeft = prevTag.offsetLeft - 4
+
+    if (afterNextTagOffsetLeft > unref(scrollLeftNumber) + wrap$!.offsetWidth) {
+      const { start } = useScrollTo({
+        el: wrap$!,
+        position: 'scrollLeft',
+        to: afterNextTagOffsetLeft - wrap$!.offsetWidth,
+        duration: 500
+      })
+      start()
+    } else if (beforePrevTagOffsetLeft < unref(scrollLeftNumber)) {
+      const { start } = useScrollTo({
+        el: wrap$!,
+        position: 'scrollLeft',
+        to: beforePrevTagOffsetLeft,
+        duration: 500
+      })
+      start()
+    }
+  }
+}
+
+// 是否是当前tag
+const isActive = (route: RouteLocationNormalizedLoaded): boolean => {
+  return route.fullPath === unref(currentRoute).fullPath
+}
+
+// 所有右键菜单组件的元素
+const itemRefs = useTemplateRefsList<ComponentRef<typeof ContextMenu & ContextMenuExpose>>()
+
+// 右键菜单状态改变的时候
+const visibleChange = (visible: boolean, tagItem: RouteLocationNormalizedLoaded) => {
+  if (visible) {
+    for (const v of unref(itemRefs)) {
+      const elDropdownMenuRef = v.elDropdownMenuRef
+      if (tagItem.fullPath !== v.tagItem.fullPath) {
+        elDropdownMenuRef?.handleClose()
+        setSelectTag(tagItem)
+      }
+    }
+  }
+}
+
+// elscroll 实例
+const scrollbarRef = ref<ComponentRef<typeof ElScrollbar>>()
+
+// 保存滚动位置
+const scrollLeftNumber = ref(0)
+
+const scroll = ({ scrollLeft }) => {
+  scrollLeftNumber.value = scrollLeft as number
+}
+
+// 移动到某个位置
+const move = (to: number) => {
+  const wrap$ = unref(scrollbarRef)?.wrapRef
+  const { start } = useScrollTo({
+    el: wrap$!,
+    position: 'scrollLeft',
+    to: unref(scrollLeftNumber) + to,
+    duration: 500
+  })
+  start()
+}
+
+const canShowIcon = (item: RouteLocationNormalizedLoaded) => {
+  if (
+    (item?.matched?.[1]?.meta?.icon && unref(tagsViewIcon)) ||
+    (item?.meta?.affix && unref(tagsViewIcon) && item?.meta?.icon)
+  ) {
+    return true
+  }
+  return false
+}
+
+onBeforeMount(() => {
+  initTags()
+  addTags()
+})
+
+watch(
+  () => currentRoute.value,
+  () => {
+    addTags()
+    moveToCurrentTag()
+  }
+)
+</script>
+
+<template>
+  <div
+    :id="prefixCls"
+    :class="prefixCls"
+    class="relative w-full flex bg-[#fff] dark:bg-[var(--el-bg-color)]"
+  >
+    <span
+      :class="tagsViewImmerse ? '' : `${prefixCls}__tool ${prefixCls}__tool--first`"
+      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
+      @click="move(-200)"
+    >
+      <Icon
+        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
+        color="var(--el-text-color-placeholder)"
+        icon="ep:d-arrow-left"
+      />
+    </span>
+    <div class="flex-1 overflow-hidden">
+      <ElScrollbar ref="scrollbarRef" class="h-full" @scroll="scroll">
+        <div class="h-[var(--tags-view-height)] flex">
+          <ContextMenu
+            v-for="item in visitedViews"
+            :key="item.fullPath"
+            :ref="itemRefs.set"
+            :class="[
+              `${prefixCls}__item`,
+              tagsViewImmerse ? `${prefixCls}__item--immerse` : '',
+              tagsViewIcon ? `${prefixCls}__item--icon` : '',
+              tagsViewImmerse && tagsViewIcon ? `${prefixCls}__item--immerse--icon` : '',
+              item?.meta?.affix ? `${prefixCls}__item--affix` : '',
+              {
+                'is-active': isActive(item)
+              }
+            ]"
+            :schema="[
+              {
+                icon: 'ep:refresh',
+                label: t('common.reload'),
+                disabled: selectedTag?.fullPath !== item.fullPath,
+                command: () => {
+                  refreshSelectedTag(item)
+                }
+              },
+              {
+                icon: 'ep:close',
+                label: t('common.closeTab'),
+                disabled: !!visitedViews?.length && selectedTag?.meta.affix,
+                command: () => {
+                  closeSelectedTag(item)
+                }
+              },
+              {
+                divided: true,
+                icon: 'ep:d-arrow-left',
+                label: t('common.closeTheLeftTab'),
+                disabled:
+                  !!visitedViews?.length &&
+                  (item.fullPath === visitedViews[0].fullPath ||
+                    selectedTag?.fullPath !== item.fullPath),
+                command: () => {
+                  closeLeftTags()
+                }
+              },
+              {
+                icon: 'ep:d-arrow-right',
+                label: t('common.closeTheRightTab'),
+                disabled:
+                  !!visitedViews?.length &&
+                  (item.fullPath === visitedViews[visitedViews.length - 1].fullPath ||
+                    selectedTag?.fullPath !== item.fullPath),
+                command: () => {
+                  closeRightTags()
+                }
+              },
+              {
+                divided: true,
+                icon: 'ep:discount',
+                label: t('common.closeOther'),
+                disabled: selectedTag?.fullPath !== item.fullPath,
+                command: () => {
+                  closeOthersTags()
+                }
+              },
+              {
+                icon: 'ep:minus',
+                label: t('common.closeAll'),
+                command: () => {
+                  closeAllTags()
+                }
+              }
+            ]"
+            :tag-item="item"
+            @visible-change="visibleChange"
+          >
+            <div>
+              <router-link :ref="tagLinksRefs.set" v-slot="{ navigate }" :to="{ ...item }" custom>
+                <div
+                  :class="`h-full flex items-center justify-center whitespace-nowrap pl-15px ${prefixCls}__item--label`"
+                  @click="navigate"
+                >
+                  <Icon
+                    v-if="
+                      tagsViewIcon &&
+                      (item?.meta?.icon ||
+                        (item?.matched &&
+                          item.matched[0] &&
+                          item.matched[item.matched.length - 1].meta?.icon))
+                    "
+                    :icon="item?.meta?.icon || item.matched[item.matched.length - 1].meta.icon"
+                    :size="12"
+                    class="mr-5px"
+                  />
+                  {{
+                    t(item?.meta?.title as string) +
+                    (item?.meta?.titleSuffix ? ` (${item?.meta?.titleSuffix})` : '')
+                  }}
+                  <Icon
+                    :class="`${prefixCls}__item--close`"
+                    :size="12"
+                    color="#333"
+                    icon="ep:close"
+                    @click.prevent.stop="closeSelectedTag(item)"
+                  />
+                </div>
+              </router-link>
+            </div>
+          </ContextMenu>
+        </div>
+      </ElScrollbar>
+    </div>
+    <span
+      :class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
+      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
+      @click="move(200)"
+    >
+      <Icon
+        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
+        color="var(--el-text-color-placeholder)"
+        icon="ep:d-arrow-right"
+      />
+    </span>
+    <span
+      :class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
+      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
+      @click="refreshSelectedTag(selectedTag)"
+    >
+      <Icon
+        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
+        color="var(--el-text-color-placeholder)"
+        icon="ep:refresh-right"
+      />
+    </span>
+    <ContextMenu
+      :schema="[
+        {
+          icon: 'ep:refresh',
+          label: t('common.reload'),
+          command: () => {
+            refreshSelectedTag(selectedTag)
+          }
+        },
+        {
+          icon: 'ep:close',
+          label: t('common.closeTab'),
+          disabled: !!visitedViews?.length && selectedTag?.meta.affix,
+          command: () => {
+            closeSelectedTag(selectedTag!)
+          }
+        },
+        {
+          divided: true,
+          icon: 'ep:d-arrow-left',
+          label: t('common.closeTheLeftTab'),
+          disabled: !!visitedViews?.length && selectedTag?.fullPath === visitedViews[0].fullPath,
+          command: () => {
+            closeLeftTags()
+          }
+        },
+        {
+          icon: 'ep:d-arrow-right',
+          label: t('common.closeTheRightTab'),
+          disabled:
+            !!visitedViews?.length &&
+            selectedTag?.fullPath === visitedViews[visitedViews.length - 1].fullPath,
+          command: () => {
+            closeRightTags()
+          }
+        },
+        {
+          divided: true,
+          icon: 'ep:discount',
+          label: t('common.closeOther'),
+          command: () => {
+            closeOthersTags()
+          }
+        },
+        {
+          icon: 'ep:minus',
+          label: t('common.closeAll'),
+          command: () => {
+            closeAllTags()
+          }
+        }
+      ]"
+      trigger="click"
+    >
+      <span
+        :class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
+        class="block h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
+      >
+        <Icon
+          :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
+          color="var(--el-text-color-placeholder)"
+          icon="ep:menu"
+        />
+      </span>
+    </ContextMenu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-tags-view;
+
+.#{$prefix-cls} {
+  :deep(.#{$elNamespace}-scrollbar__view) {
+    height: 100%;
+  }
+
+  &__tool {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-left: 1px solid var(--el-border-color);
+      content: '';
+    }
+
+    &--first {
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-right: 1px solid var(--el-border-color);
+        border-left: none;
+        content: '';
+      }
+    }
+  }
+
+  &__item {
+    position: relative;
+    top: 3px;
+    height: calc(100% - 6px);
+    padding-right: 15px;
+    margin-left: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    border: 1px solid #d9d9d9;
+    border-radius: 2px;
+    box-sizing: border-box;
+
+    &--close {
+      position: absolute;
+      top: 50%;
+      right: 5px;
+      display: none;
+      transform: translate(0, -50%);
+    }
+
+    &:not(.#{$prefix-cls}__item--affix):hover {
+      .#{$prefix-cls}__item--close {
+        display: block;
+      }
+    }
+  }
+
+  &__item--icon {
+    padding-right: 20px;
+  }
+
+  &__item:not(.is-active) {
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+
+  &__item.is-active {
+    color: var(--el-color-white);
+    background-color: var(--el-color-primary);
+    border: 1px solid var(--el-color-primary);
+
+    .#{$prefix-cls}__item--close {
+      :deep(span) {
+        color: var(--el-color-white) !important;
+      }
+    }
+  }
+
+  &__item--immerse {
+    top: 2px;
+    height: calc(100% - 3px);
+    padding-right: 35px;
+    margin: 0 -10px;
+    border: none !important;
+    -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='68' height='34' viewBox='0 0 68 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m27,0c-7.99582,0 -11.95105,0.00205 -12,12l0,6c0,8.284 -0.48549,16.49691 -8.76949,16.49691l54.37857,-0.11145c-8.284,0 -8.60908,-8.10146 -8.60908,-16.38546l0,-6c0.11145,-12.08445 -4.38441,-12 -12,-12l-13,0z' fill='%23409eff'/%3E%3C/svg%3E")
+      12 27 15;
+
+    .#{$prefix-cls}__item--label {
+      padding-left: 35px;
+    }
+
+    .#{$prefix-cls}__item--close {
+      right: 20px;
+    }
+  }
+
+  &__item--immerse--icon {
+    padding-right: 35px;
+  }
+
+  &__item--immerse:not(.is-active) {
+    &:hover {
+      color: var(--el-color-white);
+      background-color: var(--el-color-primary);
+
+      .#{$prefix-cls}__item--close {
+        :deep(span) {
+          color: var(--el-color-white) !important;
+        }
+      }
+    }
+  }
+}
+
+.dark {
+  .#{$prefix-cls} {
+    &__tool {
+      &--first {
+        &::after {
+          display: none;
+        }
+      }
+    }
+
+    &__item {
+      border: 1px solid var(--el-border-color);
+    }
+
+    &__item:not(.is-active) {
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+
+    &__item.is-active {
+      color: var(--el-color-white);
+      background-color: var(--el-color-primary);
+      border: 1px solid var(--el-color-primary);
+
+      .#{$prefix-cls}__item--close {
+        :deep(span) {
+          color: var(--el-color-white) !important;
+        }
+      }
+    }
+
+    &__item--immerse:not(.is-active) {
+      &:hover {
+        color: var(--el-color-white);
+      }
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/TagsView/src/helper.ts b/marketing-ui/admin-ui/src/layout/components/TagsView/src/helper.ts
new file mode 100644
index 0000000..22f6a50
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/TagsView/src/helper.ts
@@ -0,0 +1,21 @@
+import type { RouteMeta, RouteLocationNormalizedLoaded } from 'vue-router'
+import { pathResolve } from '@/utils/routerHelper'
+
+export const filterAffixTags = (routes: AppRouteRecordRaw[], parentPath = '') => {
+  let tags: RouteLocationNormalizedLoaded[] = []
+  routes.forEach((route) => {
+    const meta = route.meta as RouteMeta
+    const tagPath = pathResolve(parentPath, route.path)
+    if (meta?.affix) {
+      tags.push({ ...route, path: tagPath, fullPath: tagPath } as RouteLocationNormalizedLoaded)
+    }
+    if (route.children) {
+      const tempTags: RouteLocationNormalizedLoaded[] = filterAffixTags(route.children, tagPath)
+      if (tempTags.length >= 1) {
+        tags = [...tags, ...tempTags]
+      }
+    }
+  })
+
+  return tags
+}
diff --git a/marketing-ui/admin-ui/src/layout/components/ThemeSwitch/index.ts b/marketing-ui/admin-ui/src/layout/components/ThemeSwitch/index.ts
new file mode 100644
index 0000000..823a276
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/ThemeSwitch/index.ts
@@ -0,0 +1,3 @@
+import ThemeSwitch from './src/ThemeSwitch.vue'
+
+export { ThemeSwitch }
diff --git a/marketing-ui/admin-ui/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue b/marketing-ui/admin-ui/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue
new file mode 100644
index 0000000..39a8cfd
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/store/modules/app'
+import { useIcon } from '@/hooks/web/useIcon'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'ThemeSwitch' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('theme-switch')
+
+const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })
+
+const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon', color: '#fde047' })
+
+const appStore = useAppStore()
+
+// 初始化获取是否是暗黑主题
+const isDark = ref(appStore.getIsDark)
+
+// 设置switch的背景颜色
+const blackColor = 'var(--el-color-black)'
+
+const themeChange = (val: boolean) => {
+  appStore.setIsDark(val)
+}
+</script>
+
+<template>
+  <ElSwitch
+    v-model="isDark"
+    :active-color="blackColor"
+    :active-icon="Sun"
+    :border-color="blackColor"
+    :class="prefixCls"
+    :inactive-color="blackColor"
+    :inactive-icon="CrescentMoon"
+    inline-prompt
+    @change="themeChange"
+  />
+</template>
+<style lang="scss" scoped>
+:deep(.el-switch__core .el-switch__inner .is-icon) {
+  overflow: visible;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/ToolHeader.vue b/marketing-ui/admin-ui/src/layout/components/ToolHeader.vue
new file mode 100644
index 0000000..d742503
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/ToolHeader.vue
@@ -0,0 +1,88 @@
+<script lang="tsx">
+import { defineComponent, computed } from 'vue'
+import { Collapse } from '@/layout/components/Collapse'
+import { UserInfo } from '@/layout/components/UserInfo'
+import { Screenfull } from '@/layout/components/Screenfull'
+import { Breadcrumb } from '@/layout/components/Breadcrumb'
+import { SizeDropdown } from '@/layout/components/SizeDropdown'
+import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
+import RouterSearch from '@/components/RouterSearch/index.vue'
+import { useAppStore } from '@/store/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls, variables } = useDesign()
+
+const prefixCls = getPrefixCls('tool-header')
+
+const appStore = useAppStore()
+
+// 面包屑
+const breadcrumb = computed(() => appStore.getBreadcrumb)
+
+// 折叠图标
+const hamburger = computed(() => appStore.getHamburger)
+
+// 全屏图标
+const screenfull = computed(() => appStore.getScreenfull)
+
+// 搜索图片
+const search = computed(() => appStore.search)
+
+// 尺寸图标
+const size = computed(() => appStore.getSize)
+
+// 布局
+const layout = computed(() => appStore.getLayout)
+
+// 多语言图标
+const locale = computed(() => appStore.getLocale)
+
+export default defineComponent({
+  name: 'ToolHeader',
+  setup() {
+    return () => (
+      <div
+        id={`${variables.namespace}-tool-header`}
+        class={[
+          prefixCls,
+          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
+          'dark:bg-[var(--el-bg-color)]'
+        ]}
+      >
+        {layout.value !== 'top' ? (
+          <div class="h-full flex items-center">
+            {hamburger.value && layout.value !== 'cutMenu' ? (
+              <Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
+            ) : undefined}
+            {breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
+          </div>
+        ) : undefined}
+        <div class="h-full flex items-center">
+          {screenfull.value ? (
+            <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
+          ) : undefined}
+          {search.value ? <RouterSearch isModal={false} /> : undefined}
+          {size.value ? (
+            <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
+          ) : undefined}
+          {locale.value ? (
+            <LocaleDropdown
+              class="custom-hover"
+              color="var(--top-header-text-color)"
+            ></LocaleDropdown>
+          ) : undefined}
+          <UserInfo></UserInfo>
+        </div>
+      </div>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-tool-header;
+
+.#{$prefix-cls} {
+  transition: left var(--transition-time-02);
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/UserInfo/index.ts b/marketing-ui/admin-ui/src/layout/components/UserInfo/index.ts
new file mode 100644
index 0000000..c3a34ab
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/UserInfo/index.ts
@@ -0,0 +1,3 @@
+import UserInfo from './src/UserInfo.vue'
+
+export { UserInfo }
diff --git a/marketing-ui/admin-ui/src/layout/components/UserInfo/src/UserInfo.vue b/marketing-ui/admin-ui/src/layout/components/UserInfo/src/UserInfo.vue
new file mode 100644
index 0000000..64abaea
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/UserInfo/src/UserInfo.vue
@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import { ElMessageBox } from 'element-plus'
+
+import avatarImg from '@/assets/imgs/avatar.gif'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useUserStore } from '@/store/modules/user'
+import LockDialog from './components/LockDialog.vue'
+import LockPage from './components/LockPage.vue'
+import { useLockStore } from '@/store/modules/lock'
+
+defineOptions({ name: 'UserInfo' })
+
+const { t } = useI18n()
+
+const { push, replace } = useRouter()
+
+const userStore = useUserStore()
+
+const tagsViewStore = useTagsViewStore()
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('user-info')
+
+const avatar = computed(() => userStore.user.avatar || avatarImg)
+const userName = computed(() => userStore.user.nickname ?? 'Admin')
+
+// 锁定屏幕
+const lockStore = useLockStore()
+const getIsLock = computed(() => lockStore.getLockInfo?.isLock ?? false)
+const dialogVisible = ref<boolean>(false)
+const lockScreen = () => {
+  dialogVisible.value = true
+}
+
+const loginOut = async () => {
+  try {
+    await ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
+      confirmButtonText: t('common.ok'),
+      cancelButtonText: t('common.cancel'),
+      type: 'warning'
+    })
+    await userStore.loginOut()
+    tagsViewStore.delAllViews()
+    replace('/login?redirect=/index')
+  } catch {}
+}
+const toProfile = async () => {
+  push('/user/profile')
+}
+
+// const toDocument = () => {
+//   window.open('https://doc.iocoder.cn/')
+// }
+
+</script>
+
+<template>
+  <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
+    <div class="flex items-center">
+      <ElAvatar :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" />
+      <span class="pl-[5px] text-14px text-[var(--top-header-text-color)] <lg:hidden">
+        {{ userName }}
+      </span>
+    </div>
+    <template #dropdown>
+      <ElDropdownMenu>
+
+        <ElDropdownItem>
+          <Icon icon="ep:tools" />
+          <div @click="toProfile">{{ t('common.profile') }}</div>
+        </ElDropdownItem>
+
+        <!--
+        <ElDropdownItem>
+          <Icon icon="ep:menu" />
+          <div @click="toDocument">{{ t('common.document') }}</div>
+        </ElDropdownItem>
+
+        <ElDropdownItem divided>
+          <Icon icon="ep:lock" />
+          <div @click="lockScreen">{{ t('lock.lockScreen') }}</div>
+        </ElDropdownItem>
+        -->
+
+        <ElDropdownItem divided @click="loginOut">
+          <Icon icon="ep:switch-button" />
+          <div>{{ t('common.loginOut') }}</div>
+        </ElDropdownItem>
+
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+
+  <LockDialog v-if="dialogVisible" v-model="dialogVisible" />
+
+  <teleport to="body">
+    <transition name="fade-bottom" mode="out-in">
+      <LockPage v-if="getIsLock" />
+    </transition>
+  </teleport>
+</template>
+
+<style scoped lang="scss">
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition:
+    opacity 0.25s,
+    transform 0.3s;
+}
+
+.fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/UserInfo/src/components/LockDialog.vue b/marketing-ui/admin-ui/src/layout/components/UserInfo/src/components/LockDialog.vue
new file mode 100644
index 0000000..7257be1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/UserInfo/src/components/LockDialog.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { useValidator } from '@/hooks/web/useValidator'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useLockStore } from '@/store/modules/lock'
+import avatarImg from '@/assets/imgs/avatar.gif'
+import { useUserStore } from '@/store/modules/user'
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('lock-dialog')
+
+const { required } = useValidator()
+
+const { t } = useI18n()
+
+const lockStore = useLockStore()
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean
+  }
+})
+
+const userStore = useUserStore()
+const avatar = computed(() => userStore.user.avatar || avatarImg)
+const userName = computed(() => userStore.user.nickname ?? 'Admin')
+
+const emit = defineEmits(['update:modelValue'])
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    console.log('set: ', val)
+    emit('update:modelValue', val)
+  }
+})
+
+const dialogTitle = ref(t('lock.lockScreen'))
+
+const formData = ref({
+  password: undefined
+})
+const formRules = reactive({
+  password: [required()]
+})
+
+const formRef = ref() // 表单 Ref
+const handleLock = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  dialogVisible.value = false
+  lockStore.setLockInfo({
+    ...formData.value,
+    isLock: true
+  })
+}
+</script>
+
+<template>
+  <Dialog
+    v-model="dialogVisible"
+    width="500px"
+    max-height="170px"
+    :class="prefixCls"
+    :title="dialogTitle"
+  >
+    <div class="flex flex-col items-center">
+      <img :src="avatar" alt="" class="w-70px h-70px rounded-[50%]" />
+      <span class="text-14px my-10px text-[var(--top-header-text-color)]">
+        {{ userName }}
+      </span>
+    </div>
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+      <el-form-item :label="t('lock.lockPassword')" prop="password">
+        <el-input
+          type="password"
+          v-model="formData.password"
+          :placeholder="'请输入' + t('lock.lockPassword')"
+          clearable
+          show-password
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
+    </template>
+  </Dialog>
+</template>
+
+<style lang="scss" scoped>
+:global(.v-lock-dialog) {
+  @media (max-width: 767px) {
+    max-width: calc(100vw - 16px);
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/UserInfo/src/components/LockPage.vue b/marketing-ui/admin-ui/src/layout/components/UserInfo/src/components/LockPage.vue
new file mode 100644
index 0000000..27d0a43
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/UserInfo/src/components/LockPage.vue
@@ -0,0 +1,270 @@
+<script lang="ts" setup>
+import { resetRouter } from '@/router'
+import { deleteUserCache } from '@/hooks/web/useCache'
+import { useLockStore } from '@/store/modules/lock'
+import { useNow } from '@/hooks/web/useNow'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useUserStore } from '@/store/modules/user'
+import avatarImg from '@/assets/imgs/avatar.gif'
+
+const tagsViewStore = useTagsViewStore()
+
+const { replace } = useRouter()
+
+const userStore = useUserStore()
+
+const password = ref('')
+const loading = ref(false)
+const errMsg = ref(false)
+const showDate = ref(true)
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('lock-page')
+
+const avatar = computed(() => userStore.user.avatar || avatarImg)
+const userName = computed(() => userStore.user.nickname ?? 'Admin')
+
+const lockStore = useLockStore()
+
+const { hour, month, minute, meridiem, year, day, week } = useNow(true)
+
+const { t } = useI18n()
+
+// 解锁
+async function unLock() {
+  if (!password.value) {
+    return
+  }
+  let pwd = password.value
+  try {
+    loading.value = true
+    const res = await lockStore.unLock(pwd)
+    errMsg.value = !res
+  } finally {
+    loading.value = false
+  }
+}
+
+// 返回登录
+async function goLogin() {
+  await userStore.loginOut().catch(() => {})
+  // 登出后清理
+  deleteUserCache() // 清空用户缓存
+  tagsViewStore.delAllViews()
+  // resetRouter() // 重置静态路由表
+  lockStore.resetLockInfo()
+  replace('/login')
+}
+
+function handleShowForm(show = false) {
+  showDate.value = show
+}
+</script>
+
+<template>
+  <div
+    :class="prefixCls"
+    class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center"
+  >
+    <div
+      :class="`${prefixCls}__unlock`"
+      class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
+      @click="handleShowForm(false)"
+      v-show="showDate"
+    >
+      <Icon icon="ep:lock" />
+      <span>{{ t('lock.unlock') }}</span>
+    </div>
+
+    <div class="flex w-screen h-screen justify-center items-center">
+      <div :class="`${prefixCls}__hour`" class="relative mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5">
+        <span>{{ hour }}</span>
+        <span class="meridiem absolute left-5 top-5 text-md xl:text-xl" v-show="showDate">
+          {{ meridiem }}
+        </span>
+      </div>
+      <div :class="`${prefixCls}__minute w-2/5 h-2/5 md:h-4/5 `">
+        <span> {{ minute }}</span>
+      </div>
+    </div>
+    <transition name="fade-slide">
+      <div :class="`${prefixCls}-entry`" v-show="!showDate">
+        <div :class="`${prefixCls}-entry-content`">
+          <div class="flex flex-col items-center">
+            <img :src="avatar" alt="" class="w-70px h-70px rounded-[50%]" />
+            <span class="text-14px my-10px text-[var(--logo-title-text-color)]">
+              {{ userName }}
+            </span>
+          </div>
+          <ElInput
+            type="password"
+            :placeholder="t('lock.placeholder')"
+            class="enter-x"
+            v-model="password"
+          />
+          <span :class="`text-14px ${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
+            {{ t('lock.message') }}
+          </span>
+          <div :class="`${prefixCls}-entry__footer enter-x`">
+            <ElButton
+              type="primary"
+              size="small"
+              class="mt-2 mr-2 enter-x"
+              link
+              :disabled="loading"
+              @click="handleShowForm(true)"
+            >
+              {{ t('common.back') }}
+            </ElButton>
+            <ElButton
+              type="primary"
+              size="small"
+              class="mt-2 mr-2 enter-x"
+              link
+              :disabled="loading"
+              @click="goLogin"
+            >
+              {{ t('lock.backToLogin') }}
+            </ElButton>
+            <ElButton
+              type="primary"
+              class="mt-2"
+              size="small"
+              link
+              @click="unLock()"
+              :disabled="loading"
+            >
+              {{ t('lock.entrySystem') }}
+            </ElButton>
+          </div>
+        </div>
+      </div>
+    </transition>
+
+    <div class="absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y">
+      <div class="text-5xl mb-4 enter-x" v-show="!showDate">
+        {{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
+      </div>
+      <div class="text-2xl">{{ year }}/{{ month }}/{{ day }} {{ week }}</div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: '#{$namespace}-lock-page';
+
+// Small screen / tablet
+$screen-sm: 576px;
+
+// Medium screen / desktop
+$screen-md: 768px;
+
+// Large screen / wide desktop
+$screen-lg: 992px;
+
+// Extra large screen / full hd
+$screen-xl: 1200px;
+
+// Extra extra large screen / large desktop
+$screen-2xl: 1600px;
+
+$error-color: #ed6f6f;
+
+.#{$prefix-cls} {
+  z-index: 3000;
+
+  &__unlock {
+    transform: translate(-50%, 0);
+  }
+
+  &__hour,
+  &__minute {
+    display: flex;
+    font-weight: 700;
+    color: #bababa;
+    background-color: #141313;
+    border-radius: 30px;
+    justify-content: center;
+    align-items: center;
+
+    @media screen and (max-width: $screen-md) {
+      span:not(.meridiem) {
+        font-size: 160px;
+      }
+    }
+
+    @media screen and (min-width: $screen-md) {
+      span:not(.meridiem) {
+        font-size: 160px;
+      }
+    }
+
+    @media screen and (max-width: $screen-sm) {
+      span:not(.meridiem) {
+        font-size: 90px;
+      }
+    }
+    @media screen and (min-width: $screen-lg) {
+      span:not(.meridiem) {
+        font-size: 220px;
+      }
+    }
+
+    @media screen and (min-width: $screen-xl) {
+      span:not(.meridiem) {
+        font-size: 260px;
+      }
+    }
+    @media screen and (min-width: $screen-2xl) {
+      span:not(.meridiem) {
+        font-size: 320px;
+      }
+    }
+  }
+
+  &-entry {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(8px);
+    justify-content: center;
+    align-items: center;
+
+    &-content {
+      width: 260px;
+    }
+
+    &__header {
+      text-align: center;
+
+      &-img {
+        width: 70px;
+        margin: 0 auto;
+        border-radius: 50%;
+      }
+
+      &-name {
+        margin-top: 5px;
+        font-weight: 500;
+        color: #bababa;
+      }
+    }
+
+    &__err-msg {
+      display: inline-block;
+      margin-top: 10px;
+      color: $error-color;
+    }
+
+    &__footer {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/layout/components/useRenderLayout.tsx b/marketing-ui/admin-ui/src/layout/components/useRenderLayout.tsx
new file mode 100644
index 0000000..a631aa0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/layout/components/useRenderLayout.tsx
@@ -0,0 +1,294 @@
+import { computed } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+import { Menu } from '@/layout/components/Menu'
+import { TabMenu } from '@/layout/components/TabMenu'
+import { TagsView } from '@/layout/components/TagsView'
+import { Logo } from '@/layout/components/Logo'
+import AppView from './AppView.vue'
+import ToolHeader from './ToolHeader.vue'
+import { ElScrollbar } from 'element-plus'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('layout')
+
+const appStore = useAppStore()
+
+const pageLoading = computed(() => appStore.getPageLoading)
+
+// 标签页
+const tagsView = computed(() => appStore.getTagsView)
+
+// 菜单折叠
+const collapse = computed(() => appStore.getCollapse)
+
+// logo
+const logo = computed(() => appStore.logo)
+
+// 固定头部
+const fixedHeader = computed(() => appStore.getFixedHeader)
+
+// 是否是移动端
+const mobile = computed(() => appStore.getMobile)
+
+// 固定菜单
+const fixedMenu = computed(() => appStore.getFixedMenu)
+
+export const useRenderLayout = () => {
+  const renderClassic = () => {
+    return (
+      <>
+        <div
+          class={[
+            'absolute top-0 left-0 h-full layout-border__right',
+            { '!fixed z-3000': mobile.value }
+          ]}
+        >
+          {logo.value ? (
+            <Logo
+              class={[
+                'bg-[var(--left-menu-bg-color)] relative',
+                {
+                  '!pl-0': mobile.value && collapse.value,
+                  'w-[var(--left-menu-min-width)]': appStore.getCollapse,
+                  'w-[var(--left-menu-max-width)]': !appStore.getCollapse
+                }
+              ]}
+              style="transition: all var(--transition-time-02);"
+            ></Logo>
+          ) : undefined}
+          <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
+        </div>
+        <div
+          class={[
+            `${prefixCls}-content`,
+            'absolute top-0 h-[100%]',
+            {
+              'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
+                collapse.value && !mobile.value && !mobile.value,
+              'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
+                !collapse.value && !mobile.value && !mobile.value,
+              'fixed !w-full !left-0': mobile.value
+            }
+          ]}
+          style="transition: all var(--transition-time-02);"
+        >
+          <ElScrollbar
+            v-loading={pageLoading.value}
+            class={[
+              `${prefixCls}-content-scrollbar`,
+              {
+                '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
+                  fixedHeader.value
+              }
+            ]}
+          >
+            <div
+              class={[
+                {
+                  'fixed top-0 left-0 z-10': fixedHeader.value,
+                  'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
+                    collapse.value && fixedHeader.value && !mobile.value,
+                  'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
+                    !collapse.value && fixedHeader.value && !mobile.value,
+                  '!w-full !left-0': mobile.value
+                }
+              ]}
+              style="transition: all var(--transition-time-02);"
+            >
+              <ToolHeader
+                class={[
+                  'bg-[var(--top-header-bg-color)]',
+                  {
+                    'layout-border__bottom': !tagsView.value
+                  }
+                ]}
+              ></ToolHeader>
+
+              {tagsView.value ? (
+                <TagsView class="layout-border__top layout-border__bottom"></TagsView>
+              ) : undefined}
+            </div>
+
+            <AppView></AppView>
+          </ElScrollbar>
+        </div>
+      </>
+    )
+  }
+
+  const renderTopLeft = () => {
+    return (
+      <>
+        <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom dark:bg-[var(--el-bg-color)]">
+          {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
+
+          <ToolHeader class="flex-1"></ToolHeader>
+        </div>
+        <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-full flex">
+          <Menu class="relative layout-border__right !h-full"></Menu>
+          <div
+            class={[
+              `${prefixCls}-content`,
+              'h-[100%]',
+              {
+                'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
+                  collapse.value,
+                'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
+                  !collapse.value
+              }
+            ]}
+            style="transition: all var(--transition-time-02);"
+          >
+            <ElScrollbar
+              v-loading={pageLoading.value}
+              class={[
+                `${prefixCls}-content-scrollbar`,
+                {
+                  '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
+                    fixedHeader.value && tagsView.value
+                }
+              ]}
+            >
+              {tagsView.value ? (
+                <TagsView
+                  class={[
+                    'layout-border__bottom absolute',
+                    {
+                      '!fixed top-0 left-0 z-10': fixedHeader.value,
+                      'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
+                        collapse.value && fixedHeader.value,
+                      'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[var(--logo-height)]':
+                        !collapse.value && fixedHeader.value
+                    }
+                  ]}
+                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"
+                ></TagsView>
+              ) : undefined}
+
+              <AppView></AppView>
+            </ElScrollbar>
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  const renderTop = () => {
+    return (
+      <>
+        <div
+          class={[
+            'flex items-center justify-between bg-[var(--top-header-bg-color)] relative',
+            {
+              'layout-border__bottom': !tagsView.value
+            }
+          ]}
+        >
+          {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
+          <Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu>
+          <ToolHeader></ToolHeader>
+        </div>
+        <div class={[`${prefixCls}-content`, 'w-full h-[calc(100%-var(--top-tool-height))]']}>
+          <ElScrollbar
+            v-loading={pageLoading.value}
+            class={[
+              `${prefixCls}-content-scrollbar`,
+              {
+                '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
+                  fixedHeader.value && tagsView.value
+              }
+            ]}
+          >
+            {tagsView.value ? (
+              <TagsView
+                class={[
+                  'layout-border__bottom layout-border__top relative',
+                  {
+                    '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
+                  }
+                ]}
+                style="transition: width var(--transition-time-02), left var(--transition-time-02);"
+              ></TagsView>
+            ) : undefined}
+
+            <AppView></AppView>
+          </ElScrollbar>
+        </div>
+      </>
+    )
+  }
+
+  const renderCutMenu = () => {
+    return (
+      <>
+        <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom">
+          {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
+
+          <ToolHeader class="flex-1"></ToolHeader>
+        </div>
+        <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-full flex">
+          <TabMenu></TabMenu>
+          <div
+            class={[
+              `${prefixCls}-content`,
+              'h-[100%]',
+              {
+                'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
+                  collapse.value && !fixedMenu.value,
+                'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)]':
+                  !collapse.value && !fixedMenu.value,
+                'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
+                  collapse.value && fixedMenu.value,
+                'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
+                  !collapse.value && fixedMenu.value
+              }
+            ]}
+            style="transition: all var(--transition-time-02);"
+          >
+            <ElScrollbar
+              v-loading={pageLoading.value}
+              class={[
+                `${prefixCls}-content-scrollbar`,
+                {
+                  '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
+                    fixedHeader.value && tagsView.value
+                }
+              ]}
+            >
+              {tagsView.value ? (
+                <TagsView
+                  class={[
+                    'relative layout-border__bottom',
+                    {
+                      '!fixed top-0 left-0 z-10': fixedHeader.value,
+                      'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
+                        collapse.value && fixedHeader.value && !fixedMenu.value,
+                      'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
+                        !collapse.value && fixedHeader.value && !fixedMenu.value,
+                      'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] !left-[calc(var(--tab-menu-min-width)+var(--left-menu-max-width))] mt-[var(--logo-height)]':
+                        collapse.value && fixedHeader.value && fixedMenu.value,
+                      'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] !left-[calc(var(--tab-menu-max-width)+var(--left-menu-max-width))] mt-[var(--logo-height)]':
+                        !collapse.value && fixedHeader.value && fixedMenu.value
+                    }
+                  ]}
+                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"
+                ></TagsView>
+              ) : undefined}
+
+              <AppView></AppView>
+            </ElScrollbar>
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  return {
+    renderClassic,
+    renderTopLeft,
+    renderTop,
+    renderCutMenu
+  }
+}
diff --git a/marketing-ui/admin-ui/src/locales/en.ts b/marketing-ui/admin-ui/src/locales/en.ts
new file mode 100644
index 0000000..505cfd8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/locales/en.ts
@@ -0,0 +1,460 @@
+export default {
+  common: {
+    inputText: 'Please input',
+    selectText: 'Please select',
+    startTimeText: 'Start time',
+    endTimeText: 'End time',
+    login: 'Login',
+    required: 'This is required',
+    loginOut: 'Login out',
+    document: 'Document',
+    profile: 'User Center',
+    reminder: 'Reminder',
+    loginOutMessage: 'Exit the system?',
+    back: 'Back',
+    ok: 'OK',
+    save: 'Save',
+    cancel: 'Cancel',
+    close: 'Close',
+    reload: 'Reload current',
+    success: 'Success',
+    closeTab: 'Close current',
+    closeTheLeftTab: 'Close left',
+    closeTheRightTab: 'Close right',
+    closeOther: 'Close other',
+    closeAll: 'Close all',
+    prevLabel: 'Prev',
+    nextLabel: 'Next',
+    skipLabel: 'Jump',
+    doneLabel: 'End',
+    menu: 'Menu',
+    menuDes: 'Menu bar rendered in routed structure',
+    collapse: 'Collapse',
+    collapseDes: 'Expand and zoom the menu bar',
+    tagsView: 'Tags view',
+    tagsViewDes: 'Used to record routing history',
+    tool: 'Tool',
+    toolDes: 'Used to set up custom systems',
+    query: 'Query',
+    reset: 'Reset',
+    shrink: 'Put away',
+    expand: 'Expand',
+    confirmTitle: 'System Hint',
+    exportMessage: 'Whether to confirm export data item?',
+    importMessage: 'Whether to confirm import data item?',
+    createSuccess: 'Create Success',
+    updateSuccess: 'Update Success',
+    delMessage: 'Delete the selected data?',
+    delDataMessage: 'Delete the data?',
+    delNoData: 'Please select the data to delete',
+    delSuccess: 'Deleted successfully',
+    index: 'Index',
+    status: 'Status',
+    createTime: 'Create Time',
+    updateTime: 'Update Time',
+    copy: 'Copy',
+    copySuccess: 'Copy Success',
+    copyError: 'Copy Error'
+  },
+  lock: {
+    lockScreen: 'Lock screen',
+    lock: 'Lock',
+    lockPassword: 'Lock screen password',
+    unlock: 'Click to unlock',
+    backToLogin: 'Back to login',
+    entrySystem: 'Entry the system',
+    placeholder: 'Please enter the lock screen password',
+    message: 'Lock screen password error'
+  },
+  error: {
+    noPermission: `Sorry, you don't have permission to access this page.`,
+    pageError: 'Sorry, the page you visited does not exist.',
+    networkError: 'Sorry, the server reported an error.',
+    returnToHome: 'Return to home'
+  },
+  permission: {
+    hasPermission: `Please set the operation permission label value`,
+    hasRole: `Please set the role permission tag value`
+  },
+  setting: {
+    projectSetting: 'Project setting',
+    theme: 'Theme',
+    layout: 'Layout',
+    systemTheme: 'System theme',
+    menuTheme: 'Menu theme',
+    interfaceDisplay: 'Interface display',
+    breadcrumb: 'Breadcrumb',
+    breadcrumbIcon: 'Breadcrumb icon',
+    collapseMenu: 'Collapse menu',
+    hamburgerIcon: 'Hamburger icon',
+    screenfullIcon: 'Screenfull icon',
+    sizeIcon: 'Size icon',
+    localeIcon: 'Locale icon',
+    messageIcon: 'Message icon',
+    tagsView: 'Tags view',
+    logo: 'Logo',
+    greyMode: 'Grey mode',
+    fixedHeader: 'Fixed header',
+    headerTheme: 'Header theme',
+    cutMenu: 'Cut Menu',
+    copy: 'Copy',
+    clearAndReset: 'Clear cache and reset',
+    copySuccess: 'Copy success',
+    copyFailed: 'Copy failed',
+    footer: 'Footer',
+    uniqueOpened: 'Unique opened',
+    tagsViewIcon: 'Tags view icon',
+    reExperienced: 'Please exit the login experience again',
+    fixedMenu: 'Fixed menu'
+  },
+  size: {
+    default: 'Default',
+    large: 'Large',
+    small: 'Small'
+  },
+  login: {
+    welcome: 'Welcome to the system',
+    message: 'Backstage management system',
+    tenantname: 'TenantName',
+    username: 'Username',
+    password: 'Password',
+    code: 'verification code',
+    login: 'Sign in',
+    relogin: 'Sign in again',
+    otherLogin: 'Sign in with',
+    register: 'Register',
+    checkPassword: 'Confirm password',
+    remember: 'Remember me',
+    hasUser: 'Existing account? Go to login',
+    forgetPassword: 'Forget password?',
+    tenantNamePlaceholder: 'Please Enter Tenant Name',
+    usernamePlaceholder: 'Please Enter Username',
+    passwordPlaceholder: 'Please Enter Password',
+    codePlaceholder: 'Please Enter Verification Code',
+    mobileTitle: 'Mobile sign in',
+    mobileNumber: 'Mobile Number',
+    mobileNumberPlaceholder: 'Plaease Enter Mobile Number',
+    backLogin: 'back',
+    getSmsCode: 'Get SMS Code',
+    btnMobile: 'Mobile sign in',
+    btnQRCode: 'QR code sign in',
+    qrcode: 'Scan the QR code to log in',
+    btnRegister: 'Sign up',
+    SmsSendMsg: 'code has been sent',
+    resetPassword: "Reset Password",
+    resetPasswordSuccess: "Reset Password Success",
+    invalidTenantName:"Invalid Tenant Name"
+  },
+  captcha: {
+    verification: 'Please complete security verification',
+    slide: 'Swipe right to complete verification',
+    point: 'Please click',
+    success: 'Verification succeeded',
+    fail: 'verification failed'
+  },
+  router: {
+    login: 'Login',
+    home: 'Home',
+    analysis: 'Analysis',
+    workplace: 'Workplace'
+  },
+  analysis: {
+    newUser: 'New user',
+    unreadInformation: 'Unread information',
+    transactionAmount: 'Transaction amount',
+    totalShopping: 'Total Shopping',
+    monthlySales: 'Monthly sales',
+    userAccessSource: 'User access source',
+    january: 'January',
+    february: 'February',
+    march: 'March',
+    april: 'April',
+    may: 'May',
+    june: 'June',
+    july: 'July',
+    august: 'August',
+    september: 'September',
+    october: 'October',
+    november: 'November',
+    december: 'December',
+    estimate: 'Estimate',
+    actual: 'Actual',
+    directAccess: 'Airect access',
+    mailMarketing: 'Mail marketing',
+    allianceAdvertising: 'Alliance advertising',
+    videoAdvertising: 'Video advertising',
+    searchEngines: 'Search engines',
+    weeklyUserActivity: 'Weekly user activity',
+    activeQuantity: 'Active quantity',
+    monday: 'Monday',
+    tuesday: 'Tuesday',
+    wednesday: 'Wednesday',
+    thursday: 'Thursday',
+    friday: 'Friday',
+    saturday: 'Saturday',
+    sunday: 'Sunday'
+  },
+  workplace: {
+    welcome: 'Hello',
+    happyDay: 'Wish you happy every day!',
+    toady: `It's sunny today`,
+    notice: 'Announcement',
+    project: 'Project',
+    access: 'Project access',
+    toDo: 'To do',
+    introduction: 'A serious introduction',
+    shortcutOperation: 'Quick entry',
+    operation: 'Operation',
+    index: 'Index',
+    personal: 'Personal',
+    team: 'Team',
+    quote: 'Quote',
+    contribution: 'Contribution',
+    hot: 'Hot',
+    yield: 'Yield',
+    dynamic: 'Dynamic',
+    push: 'push',
+    follow: 'Follow'
+  },
+  form: {
+    input: 'Input',
+    inputNumber: 'InputNumber',
+    default: 'Default',
+    icon: 'Icon',
+    mixed: 'Mixed',
+    textarea: 'Textarea',
+    slot: 'Slot',
+    position: 'Position',
+    autocomplete: 'Autocomplete',
+    select: 'Select',
+    selectGroup: 'Select Group',
+    selectV2: 'SelectV2',
+    cascader: 'Cascader',
+    switch: 'Switch',
+    rate: 'Rate',
+    colorPicker: 'Color Picker',
+    transfer: 'Transfer',
+    render: 'Render',
+    radio: 'Radio',
+    button: 'Button',
+    checkbox: 'Checkbox',
+    slider: 'Slider',
+    datePicker: 'Date Picker',
+    shortcuts: 'Shortcuts',
+    today: 'Today',
+    yesterday: 'Yesterday',
+    aWeekAgo: 'A week ago',
+    week: 'Week',
+    year: 'Year',
+    month: 'Month',
+    dates: 'Dates',
+    daterange: 'Date Range',
+    monthrange: 'Month Range',
+    dateTimePicker: 'DateTimePicker',
+    dateTimerange: 'Datetime Range',
+    timePicker: 'Time Picker',
+    timeSelect: 'Time Select',
+    inputPassword: 'input Password',
+    passwordStrength: 'Password Strength',
+    operate: 'operate',
+    change: 'Change',
+    restore: 'Restore',
+    disabled: 'Disabled',
+    disablement: 'Disablement',
+    delete: 'Delete',
+    add: 'Add',
+    setValue: 'Set value',
+    resetValue: 'Reset value',
+    set: 'Set',
+    subitem: 'Subitem',
+    formValidation: 'Form validation',
+    verifyReset: 'Verify reset',
+    remark: 'Remark'
+  },
+  watermark: {
+    watermark: 'Watermark'
+  },
+  table: {
+    table: 'Table',
+    index: 'Index',
+    title: 'Title',
+    author: 'Author',
+    createTime: 'Create time',
+    action: 'Action',
+    pagination: 'pagination',
+    reserveIndex: 'Reserve index',
+    restoreIndex: 'Restore index',
+    showSelections: 'Show selections',
+    hiddenSelections: 'Restore selections',
+    showExpandedRows: 'Show expanded rows',
+    hiddenExpandedRows: 'Hidden expanded rows',
+    header: 'Header'
+  },
+  action: {
+    create: 'Create',
+    add: 'Add',
+    del: 'Delete',
+    delete: 'Delete',
+    edit: 'Edit',
+    update: 'Update',
+    preview: 'Preview',
+    more: 'More',
+    sync: 'Sync',
+    save: 'Save',
+    detail: 'Detail',
+    export: 'Export',
+    import: 'Import',
+    generate: 'Generate',
+    logout: 'Login Out',
+    test: 'Test',
+    typeCreate: 'Dict Type Create',
+    typeUpdate: 'Dict Type Eidt',
+    dataCreate: 'Dict Data Create',
+    dataUpdate: 'Dict Data Eidt',
+    fileUpload: 'File Upload'
+  },
+  dialog: {
+    dialog: 'Dialog',
+    open: 'Open',
+    close: 'Close'
+  },
+  sys: {
+    api: {
+      operationFailed: 'Operation failed',
+      errorTip: 'Error Tip',
+      errorMessage: 'The operation failed, the system is abnormal!',
+      timeoutMessage: 'Login timed out, please log in again!',
+      apiTimeoutMessage: 'The interface request timed out, please refresh the page and try again!',
+      apiRequestFailed: 'The interface request failed, please try again later!',
+      networkException: 'network anomaly',
+      networkExceptionMsg:
+        'Please check if your network connection is normal! The network is abnormal',
+
+      errMsg401: 'The user does not have permission (token, user name, password error)!',
+      errMsg403: 'The user is authorized, but access is forbidden!',
+      errMsg404: 'Network request error, the resource was not found!',
+      errMsg405: 'Network request error, request method not allowed!',
+      errMsg408: 'Network request timed out!',
+      errMsg500: 'Server error, please contact the administrator!',
+      errMsg501: 'The network is not implemented!',
+      errMsg502: 'Network Error!',
+      errMsg503: 'The service is unavailable, the server is temporarily overloaded or maintained!',
+      errMsg504: 'Network timeout!',
+      errMsg505: 'The http version does not support the request!',
+      errMsg901: 'Demo mode, no write operations are possible!'
+    },
+    app: {
+      logoutTip: 'Reminder',
+      logoutMessage: 'Confirm to exit the system?',
+      menuLoading: 'Menu loading...'
+    },
+    exception: {
+      backLogin: 'Back Login',
+      backHome: 'Back Home',
+      subTitle403: "Sorry, you don't have access to this page.",
+      subTitle404: 'Sorry, the page you visited does not exist.',
+      subTitle500: 'Sorry, the server is reporting an error.',
+      noDataTitle: 'No data on the current page.',
+      networkErrorTitle: 'Network Error',
+      networkErrorSubTitle:
+        'Sorry, Your network connection has been disconnected, please check your network!'
+    },
+    lock: {
+      unlock: 'Click to unlock',
+      alert: 'Lock screen password error',
+      backToLogin: 'Back to login',
+      entry: 'Enter the system',
+      placeholder: 'Please enter the lock screen password or user password'
+    },
+    login: {
+      backSignIn: 'Back sign in',
+      mobileSignInFormTitle: 'Mobile sign in',
+      qrSignInFormTitle: 'Qr code sign in',
+      signInFormTitle: 'Sign in',
+      signUpFormTitle: 'Sign up',
+      forgetFormTitle: 'Reset password',
+
+      signInTitle: 'Backstage management system',
+      signInDesc: 'Enter your personal details and get started!',
+      policy: 'I agree to the xxx Privacy Policy',
+      scanSign: `scanning the code to complete the login`,
+
+      loginButton: 'Sign in',
+      registerButton: 'Sign up',
+      rememberMe: 'Remember me',
+      forgetPassword: 'Forget Password?',
+      otherSignIn: 'Sign in with',
+
+      // notify
+      loginSuccessTitle: 'Login successful',
+      loginSuccessDesc: 'Welcome back',
+
+      // placeholder
+      accountPlaceholder: 'Please input username',
+      passwordPlaceholder: 'Please input password',
+      smsPlaceholder: 'Please input sms code',
+      mobilePlaceholder: 'Please input mobile',
+      policyPlaceholder: 'Register after checking',
+      diffPwd: 'The two passwords are inconsistent',
+
+      userName: 'Username',
+      password: 'Password',
+      confirmPassword: 'Confirm Password',
+      email: 'Email',
+      smsCode: 'SMS code',
+      mobile: 'Mobile'
+    }
+  },
+  profile: {
+    user: {
+      title: 'Personal Information',
+      username: 'User Name',
+      nickname: 'Nick Name',
+      mobile: 'Phone Number',
+      email: 'User Mail',
+      dept: 'Department',
+      posts: 'Position',
+      roles: 'Own Role',
+      sex: 'Sex',
+      man: 'Man',
+      woman: 'Woman',
+      createTime: 'Created Date'
+    },
+    info: {
+      title: 'Basic Information',
+      basicInfo: 'Basic Information',
+      resetPwd: 'Reset Password',
+      userSocial: 'Social Information'
+    },
+    rules: {
+      nickname: 'Please Enter User Nickname',
+      mail: 'Please Input The Email Address',
+      truemail: 'Please Input The Correct Email Address',
+      phone: 'Please Enter The Phone Number',
+      truephone: 'Please Enter The Correct Phone Number'
+    },
+    password: {
+      oldPassword: 'Old PassWord',
+      newPassword: 'New Password',
+      confirmPassword: 'Confirm Password',
+      oldPwdMsg: 'Please Enter Old Password',
+      newPwdMsg: 'Please Enter New Password',
+      cfPwdMsg: 'Please Enter Confirm Password',
+      diffPwd: 'The Passwords Entered Twice No Match'
+    }
+  },
+  cropper: {
+    selectImage: 'Select Image',
+    uploadSuccess: 'Uploaded success!',
+    modalTitle: 'Avatar upload',
+    okText: 'Confirm and upload',
+    btn_reset: 'Reset',
+    btn_rotate_left: 'Counterclockwise rotation',
+    btn_rotate_right: 'Clockwise rotation',
+    btn_scale_x: 'Flip horizontal',
+    btn_scale_y: 'Flip vertical',
+    btn_zoom_in: 'Zoom in',
+    btn_zoom_out: 'Zoom out',
+    preview: 'Preivew'
+  }
+}
diff --git a/marketing-ui/admin-ui/src/locales/zh-CN.ts b/marketing-ui/admin-ui/src/locales/zh-CN.ts
new file mode 100644
index 0000000..130d565
--- /dev/null
+++ b/marketing-ui/admin-ui/src/locales/zh-CN.ts
@@ -0,0 +1,456 @@
+export default {
+  common: {
+    inputText: '请输入',
+    selectText: '请选择',
+    startTimeText: '开始时间',
+    endTimeText: '结束时间',
+    login: '登录',
+    required: '该项为必填项',
+    loginOut: '退出系统',
+    document: '项目文档',
+    profile: '个人中心',
+    reminder: '温馨提示',
+    loginOutMessage: '是否退出本系统？',
+    back: '返回',
+    ok: '确定',
+    save: '保存',
+    cancel: '取消',
+    close: '关闭',
+    reload: '重新加载',
+    success: '成功',
+    closeTab: '关闭标签页',
+    closeTheLeftTab: '关闭左侧标签页',
+    closeTheRightTab: '关闭右侧标签页',
+    closeOther: '关闭其他标签页',
+    closeAll: '关闭全部标签页',
+    prevLabel: '上一步',
+    nextLabel: '下一步',
+    skipLabel: '跳过',
+    doneLabel: '结束',
+    menu: '菜单',
+    menuDes: '以路由的结构渲染的菜单栏',
+    collapse: '展开缩收',
+    collapseDes: '展开和缩放菜单栏',
+    tagsView: '标签页',
+    tagsViewDes: '用于记录路由历史记录',
+    tool: '工具',
+    toolDes: '用于设置定制系统',
+    query: '查询',
+    reset: '重置',
+    shrink: '收起',
+    expand: '展开',
+    confirmTitle: '系统提示',
+    exportMessage: '是否确认导出数据项？',
+    importMessage: '是否确认导入数据项？',
+    createSuccess: '新增成功',
+    updateSuccess: '修改成功',
+    delMessage: '是否删除所选中数据？',
+    delDataMessage: '是否删除数据？',
+    delNoData: '请选择需要删除的数据',
+    delSuccess: '删除成功',
+    index: '序号',
+    status: '状态',
+    createTime: '创建时间',
+    updateTime: '更新时间',
+    copy: '复制',
+    copySuccess: '复制成功',
+    copyError: '复制失败'
+  },
+  lock: {
+    lockScreen: '锁定屏幕',
+    lock: '锁定',
+    lockPassword: '锁屏密码',
+    unlock: '点击解锁',
+    backToLogin: '返回登录',
+    entrySystem: '进入系统',
+    placeholder: '请输入锁屏密码',
+    message: '锁屏密码错误'
+  },
+  error: {
+    noPermission: `抱歉，您无权访问此页面。`,
+    pageError: '抱歉，您访问的页面不存在。',
+    networkError: '抱歉，服务器报告错误。',
+    returnToHome: '返回首页'
+  },
+  permission: {
+    hasPermission: `请设置操作权限标签值`,
+    hasRole: `请设置角色权限标签值`
+  },
+  setting: {
+    projectSetting: '项目配置',
+    theme: '主题',
+    layout: '布局',
+    systemTheme: '系统主题',
+    menuTheme: '菜单主题',
+    interfaceDisplay: '界面显示',
+    breadcrumb: '面包屑',
+    breadcrumbIcon: '面包屑图标',
+    collapseMenu: '折叠菜单',
+    hamburgerIcon: '折叠图标',
+    screenfullIcon: '全屏图标',
+    sizeIcon: '尺寸图标',
+    localeIcon: '多语言图标',
+    messageIcon: '消息图标',
+    tagsView: '标签页',
+    tagsViewImmerse: '标签页沉浸',
+    logo: '标志',
+    greyMode: '灰色模式',
+    fixedHeader: '固定头部',
+    headerTheme: '头部主题',
+    cutMenu: '切割菜单',
+    copy: '拷贝',
+    clearAndReset: '清除缓存并且重置',
+    copySuccess: '拷贝成功',
+    copyFailed: '拷贝失败',
+    footer: '页脚',
+    uniqueOpened: '菜单手风琴',
+    tagsViewIcon: '标签页图标',
+    reExperienced: '请重新退出登录体验',
+    fixedMenu: '固定菜单'
+  },
+  size: {
+    default: '默认',
+    large: '大',
+    small: '小'
+  },
+  login: {
+    welcome: '欢迎使用本系统',
+    message: '开箱即用的中后台管理系统',
+    tenantname: '租户名称',
+    username: '用户名',
+    password: '密码',
+    code: '验证码',
+    login: '登录',
+    relogin: '重新登录',
+    otherLogin: '其他登录方式',
+    register: '注册',
+    checkPassword: '确认密码',
+    remember: '记住我',
+    hasUser: '已有账号？去登录',
+    forgetPassword: '忘记密码?',
+    tenantNamePlaceholder: '请输入租户名称',
+    usernamePlaceholder: '请输入用户名',
+    passwordPlaceholder: '请输入密码',
+    codePlaceholder: '请输入验证码',
+    mobileTitle: '手机登录',
+    mobileNumber: '手机号码',
+    mobileNumberPlaceholder: '请输入手机号码',
+    backLogin: '返回',
+    getSmsCode: '获取验证码',
+    btnMobile: '手机登录',
+    btnQRCode: '二维码登录',
+    qrcode: '扫描二维码登录',
+    btnRegister: '注册',
+    SmsSendMsg: '验证码已发送',
+    resetPassword: "重置密码",
+    resetPasswordSuccess: "重置密码成功",
+    invalidTenantName: "无效的租户名称"
+  },
+  captcha: {
+    verification: '请完成安全验证',
+    slide: '向右滑动完成验证',
+    point: '请依次点击',
+    success: '验证成功',
+    fail: '验证失败'
+  },
+  router: {
+    login: '登录',
+    socialLogin: '社交登录',
+    home: '首页',
+    analysis: '分析页',
+    workplace: '工作台'
+  },
+  analysis: {
+    newUser: '新增用户',
+    unreadInformation: '未读消息',
+    transactionAmount: '成交金额',
+    totalShopping: '购物总量',
+    monthlySales: '每月销售额',
+    userAccessSource: '用户访问来源',
+    january: '一月',
+    february: '二月',
+    march: '三月',
+    april: '四月',
+    may: '五月',
+    june: '六月',
+    july: '七月',
+    august: '八月',
+    september: '九月',
+    october: '十月',
+    november: '十一月',
+    december: '十二月',
+    estimate: '预计',
+    actual: '实际',
+    directAccess: '直接访问',
+    mailMarketing: '邮件营销',
+    allianceAdvertising: '联盟广告',
+    videoAdvertising: '视频广告',
+    searchEngines: '搜索引擎',
+    weeklyUserActivity: '每周用户活跃量',
+    activeQuantity: '活跃量',
+    monday: '周一',
+    tuesday: '周二',
+    wednesday: '周三',
+    thursday: '周四',
+    friday: '周五',
+    saturday: '周六',
+    sunday: '周日'
+  },
+  workplace: {
+    welcome: '你好',
+    happyDay: '祝你开心每一天!',
+    toady: '今日晴',
+    notice: '通知公告',
+    project: '项目数',
+    access: '项目访问',
+    toDo: '待办',
+    introduction: '一个正经的简介',
+    shortcutOperation: '快捷入口',
+    operation: '操作',
+    index: '指数',
+    personal: '个人',
+    team: '团队',
+    quote: '引用',
+    contribution: '贡献',
+    hot: '热度',
+    yield: '产量',
+    dynamic: '动态',
+    push: '推送',
+    follow: '关注'
+  },
+  form: {
+    input: '输入框',
+    inputNumber: '数字输入框',
+    default: '默认',
+    icon: '图标',
+    mixed: '复合型',
+    textarea: '多行文本',
+    slot: '插槽',
+    position: '位置',
+    autocomplete: '自动补全',
+    select: '选择器',
+    selectGroup: '选项分组',
+    selectV2: '虚拟列表选择器',
+    cascader: '级联选择器',
+    switch: '开关',
+    rate: '评分',
+    colorPicker: '颜色选择器',
+    transfer: '穿梭框',
+    render: '渲染器',
+    radio: '单选框',
+    button: '按钮',
+    checkbox: '多选框',
+    slider: '滑块',
+    datePicker: '日期选择器',
+    shortcuts: '快捷选项',
+    today: '今天',
+    yesterday: '昨天',
+    aWeekAgo: '一周前',
+    week: '周',
+    year: '年',
+    month: '月',
+    dates: '日期',
+    daterange: '日期范围',
+    monthrange: '月份范围',
+    dateTimePicker: '日期时间选择器',
+    dateTimerange: '日期时间范围',
+    timePicker: '时间选择器',
+    timeSelect: '时间选择',
+    inputPassword: '密码输入框',
+    passwordStrength: '密码强度',
+    operate: '操作',
+    change: '更改',
+    restore: '还原',
+    disabled: '禁用',
+    disablement: '解除禁用',
+    delete: '删除',
+    add: '添加',
+    setValue: '设置值',
+    resetValue: '重置值',
+    set: '设置',
+    subitem: '子项',
+    formValidation: '表单验证',
+    verifyReset: '验证重置',
+    remark: '备注'
+  },
+  watermark: {
+    watermark: '水印'
+  },
+  table: {
+    table: '表格',
+    index: '序号',
+    title: '标题',
+    author: '作者',
+    createTime: '创建时间',
+    action: '操作',
+    pagination: '分页',
+    reserveIndex: '叠加序号',
+    restoreIndex: '还原序号',
+    showSelections: '显示多选',
+    hiddenSelections: '隐藏多选',
+    showExpandedRows: '显示展开行',
+    hiddenExpandedRows: '隐藏展开行',
+    header: '头部'
+  },
+  action: {
+    create: '新增',
+    add: '新增',
+    del: '删除',
+    delete: '删除',
+    edit: '编辑',
+    update: '编辑',
+    preview: '预览',
+    more: '更多',
+    sync: '同步',
+    save: '保存',
+    detail: '详情',
+    export: '导出',
+    import: '导入',
+    generate: '生成',
+    logout: '强制退出',
+    test: '测试',
+    typeCreate: '字典类型新增',
+    typeUpdate: '字典类型编辑',
+    dataCreate: '字典数据新增',
+    dataUpdate: '字典数据编辑'
+  },
+  dialog: {
+    dialog: '弹窗',
+    open: '打开',
+    close: '关闭'
+  },
+  sys: {
+    api: {
+      operationFailed: '操作失败',
+      errorTip: '错误提示',
+      errorMessage: '操作失败,系统异常!',
+      timeoutMessage: '登录超时,请重新登录!',
+      apiTimeoutMessage: '接口请求超时,请刷新页面重试!',
+      apiRequestFailed: '请求出错，请稍候重试',
+      networkException: '网络异常',
+      networkExceptionMsg: '网络异常，请检查您的网络连接是否正常!',
+      errMsg401: '用户没有权限（令牌、用户名、密码错误）!',
+      errMsg403: '用户得到授权，但是访问是被禁止的。!',
+      errMsg404: '网络请求错误,未找到该资源!',
+      errMsg405: '网络请求错误,请求方法未允许!',
+      errMsg408: '网络请求超时!',
+      errMsg500: '服务器错误,请联系管理员!',
+      errMsg501: '网络未实现!',
+      errMsg502: '网络错误!',
+      errMsg503: '服务不可用，服务器暂时过载或维护!',
+      errMsg504: '网络超时!',
+      errMsg505: 'http版本不支持该请求!',
+      errMsg901: '演示模式，无法进行写操作!'
+    },
+    app: {
+      logoutTip: '温馨提醒',
+      logoutMessage: '是否确认退出系统?',
+      menuLoading: '菜单加载中...'
+    },
+    exception: {
+      backLogin: '返回登录',
+      backHome: '返回首页',
+      subTitle403: '抱歉，您无权访问此页面。',
+      subTitle404: '抱歉，您访问的页面不存在。',
+      subTitle500: '抱歉，服务器报告错误。',
+      noDataTitle: '当前页无数据',
+      networkErrorTitle: '网络错误',
+      networkErrorSubTitle: '抱歉，您的网络连接已断开，请检查您的网络！'
+    },
+    lock: {
+      unlock: '点击解锁',
+      alert: '锁屏密码错误',
+      backToLogin: '返回登录',
+      entry: '进入系统',
+      placeholder: '请输入锁屏密码或者用户密码'
+    },
+    login: {
+      backSignIn: '返回',
+      signInFormTitle: '登录',
+      ssoFormTitle: '三方授权',
+      mobileSignInFormTitle: '手机登录',
+      qrSignInFormTitle: '二维码登录',
+      signUpFormTitle: '注册',
+      forgetFormTitle: '重置密码',
+      signInTitle: '开箱即用的中后台管理系统',
+      signInDesc: '输入您的个人详细信息开始使用！',
+      policy: '我同意xxx隐私政策',
+      scanSign: `扫码后点击"确认"，即可完成登录`,
+      loginButton: '登录',
+      registerButton: '注册',
+      rememberMe: '记住我',
+      forgetPassword: '忘记密码?',
+      otherSignIn: '其他登录方式',
+      // notify
+      loginSuccessTitle: '登录成功',
+      loginSuccessDesc: '欢迎回来',
+      // placeholder
+      accountPlaceholder: '请输入账号',
+      passwordPlaceholder: '请输入密码',
+      smsPlaceholder: '请输入验证码',
+      mobilePlaceholder: '请输入手机号码',
+      policyPlaceholder: '勾选后才能注册',
+      diffPwd: '两次输入密码不一致',
+      userName: '账号',
+      password: '密码',
+      confirmPassword: '确认密码',
+      email: '邮箱',
+      smsCode: '短信验证码',
+      mobile: '手机号码'
+    }
+  },
+  profile: {
+    user: {
+      title: '个人信息',
+      username: '用户名称',
+      nickname: '用户昵称',
+      mobile: '手机号码',
+      email: '用户邮箱',
+      dept: '所属部门',
+      posts: '所属岗位',
+      roles: '所属角色',
+      sex: '性别',
+      man: '男',
+      woman: '女',
+      createTime: '创建日期'
+    },
+    info: {
+      title: '基本信息',
+      basicInfo: '基本资料',
+      resetPwd: '修改密码',
+      userSocial: '社交信息'
+    },
+    rules: {
+      nickname: '请输入用户昵称',
+      mail: '请输入邮箱地址',
+      truemail: '请输入正确的邮箱地址',
+      phone: '请输入正确的手机号码',
+      truephone: '请输入正确的手机号码'
+    },
+    password: {
+      oldPassword: '旧密码',
+      newPassword: '新密码',
+      confirmPassword: '确认密码',
+      oldPwdMsg: '请输入旧密码',
+      newPwdMsg: '请输入新密码',
+      cfPwdMsg: '请输入确认密码',
+      pwdRules: '长度在 6 到 20 个字符',
+      diffPwd: '两次输入密码不一致'
+    }
+  },
+  cropper: {
+    selectImage: '选择图片',
+    uploadSuccess: '上传成功',
+    modalTitle: '头像上传',
+    okText: '确认并上传',
+    btn_reset: '重置',
+    btn_rotate_left: '逆时针旋转',
+    btn_rotate_right: '顺时针旋转',
+    btn_scale_x: '水平翻转',
+    btn_scale_y: '垂直翻转',
+    btn_zoom_in: '放大',
+    btn_zoom_out: '缩小',
+    preview: '预览'
+  },
+  'OAuth 2.0': 'OAuth 2.0' // 避免菜单名是 OAuth 2.0 时，一直 warn 报错
+}
diff --git a/marketing-ui/admin-ui/src/main.ts b/marketing-ui/admin-ui/src/main.ts
new file mode 100644
index 0000000..874f766
--- /dev/null
+++ b/marketing-ui/admin-ui/src/main.ts
@@ -0,0 +1,74 @@
+// 引入unocss css
+import '@/plugins/unocss'
+
+// 导入全局的svg图标
+import '@/plugins/svgIcon'
+
+// 初始化多语言
+import { setupI18n } from '@/plugins/vueI18n'
+
+// 引入状态管理
+import { setupStore } from '@/store'
+
+// 全局组件
+import { setupGlobCom } from '@/components'
+
+// 引入 element-plus
+import { setupElementPlus } from '@/plugins/elementPlus'
+
+// 引入 form-create
+import { setupFormCreate } from '@/plugins/formCreate'
+
+// 引入全局样式
+import '@/styles/index.scss'
+
+// 引入动画
+import '@/plugins/animate.css'
+
+// 路由
+import router, { setupRouter } from '@/router'
+
+// 指令
+import { setupAuth, setupMountedFocus } from '@/directives'
+
+import { createApp } from 'vue'
+
+import App from './App.vue'
+
+import './permission'
+
+import '@/plugins/tongji' // 百度统计
+import Logger from '@/utils/Logger'
+
+import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
+
+// 创建实例
+const setupAll = async () => {
+  const app = createApp(App)
+
+  await setupI18n(app)
+
+  setupStore(app)
+
+  setupGlobCom(app)
+
+  setupElementPlus(app)
+
+  setupFormCreate(app)
+
+  setupRouter(app)
+
+  // directives 指令
+  setupAuth(app)
+  setupMountedFocus(app)
+
+  await router.isReady()
+
+  app.use(VueDOMPurifyHTML)
+
+  app.mount('#app')
+}
+
+setupAll()
+
+Logger.prettyPrimary(`欢迎使用`, import.meta.env.VITE_APP_TITLE)
diff --git a/marketing-ui/admin-ui/src/permission.ts b/marketing-ui/admin-ui/src/permission.ts
new file mode 100644
index 0000000..b04bc3c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/permission.ts
@@ -0,0 +1,106 @@
+import router from './router'
+import type { RouteRecordRaw } from 'vue-router'
+import { isRelogin } from '@/config/axios/service'
+import { getAccessToken } from '@/utils/auth'
+import { useTitle } from '@/hooks/web/useTitle'
+import { useNProgress } from '@/hooks/web/useNProgress'
+import { usePageLoading } from '@/hooks/web/usePageLoading'
+import { useDictStoreWithOut } from '@/store/modules/dict'
+import { useUserStoreWithOut } from '@/store/modules/user'
+import { usePermissionStoreWithOut } from '@/store/modules/permission'
+
+const { start, done } = useNProgress()
+
+const { loadStart, loadDone } = usePageLoading()
+
+const parseURL = (
+  url: string | null | undefined
+): { basePath: string; paramsObject: { [key: string]: string } } => {
+  // 如果输入为 null 或 undefined，返回空字符串和空对象
+  if (url == null) {
+    return { basePath: '', paramsObject: {} }
+  }
+
+  // 找到问号 (?) 的位置，它之前是基础路径，之后是查询参数
+  const questionMarkIndex = url.indexOf('?')
+  let basePath = url
+  const paramsObject: { [key: string]: string } = {}
+
+  // 如果找到了问号，说明有查询参数
+  if (questionMarkIndex !== -1) {
+    // 获取 basePath
+    basePath = url.substring(0, questionMarkIndex)
+
+    // 从 URL 中获取查询字符串部分
+    const queryString = url.substring(questionMarkIndex + 1)
+
+    // 使用 URLSearchParams 遍历参数
+    const searchParams = new URLSearchParams(queryString)
+    searchParams.forEach((value, key) => {
+      // 封装进 paramsObject 对象
+      paramsObject[key] = value
+    })
+  }
+
+  // 返回 basePath 和 paramsObject
+  return { basePath, paramsObject }
+}
+
+// 路由不重定向白名单
+const whiteList = [
+  '/login',
+  '/social-login',
+  '/auth-redirect',
+  '/bind',
+  '/register',
+  '/oauthLogin/gitee'
+]
+
+// 路由加载前
+router.beforeEach(async (to, from, next) => {
+  start()
+  loadStart()
+  if (getAccessToken()) {
+    if (to.path === '/login') {
+      next({ path: '/' })
+    } else {
+      // 获取所有字典
+      const dictStore = useDictStoreWithOut()
+      const userStore = useUserStoreWithOut()
+      const permissionStore = usePermissionStoreWithOut()
+      if (!dictStore.getIsSetDict) {
+        await dictStore.setDictMap()
+      }
+      if (!userStore.getIsSetUser) {
+        isRelogin.show = true
+        await userStore.setUserInfoAction()
+        isRelogin.show = false
+        // 后端过滤菜单
+        await permissionStore.generateRoutes()
+        permissionStore.getAddRouters.forEach((route) => {
+          router.addRoute(route as unknown as RouteRecordRaw) // 动态添加可访问路由表
+        })
+        const redirectPath = from.query.redirect || to.path
+        // 修复跳转时不带参数的问题
+        const redirect = decodeURIComponent(redirectPath as string)
+        const { paramsObject: query } = parseURL(redirect)
+        const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect, query }
+        next(nextData)
+      } else {
+        next()
+      }
+    }
+  } else {
+    if (whiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
+      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+    }
+  }
+})
+
+router.afterEach((to) => {
+  useTitle(to?.meta?.title as string)
+  done() // 结束Progress
+  loadDone()
+})
diff --git a/marketing-ui/admin-ui/src/plugins/animate.css/index.ts b/marketing-ui/admin-ui/src/plugins/animate.css/index.ts
new file mode 100644
index 0000000..3e93451
--- /dev/null
+++ b/marketing-ui/admin-ui/src/plugins/animate.css/index.ts
@@ -0,0 +1 @@
+import 'animate.css'
diff --git a/marketing-ui/admin-ui/src/plugins/echarts/index.ts b/marketing-ui/admin-ui/src/plugins/echarts/index.ts
new file mode 100644
index 0000000..18d05aa
--- /dev/null
+++ b/marketing-ui/admin-ui/src/plugins/echarts/index.ts
@@ -0,0 +1,49 @@
+import * as echarts from 'echarts/core'
+
+import {
+  BarChart,
+  FunnelChart,
+  GaugeChart,
+  LineChart,
+  MapChart,
+  PictorialBarChart,
+  PieChart,
+  RadarChart
+} from 'echarts/charts'
+
+import {
+  AriaComponent,
+  GridComponent,
+  LegendComponent,
+  ParallelComponent,
+  PolarComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent
+} from 'echarts/components'
+
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  VisualMapComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  CanvasRenderer,
+  PictorialBarChart,
+  RadarChart,
+  GaugeChart,
+  FunnelChart
+])
+
+export default echarts
diff --git a/marketing-ui/admin-ui/src/plugins/elementPlus/index.ts b/marketing-ui/admin-ui/src/plugins/elementPlus/index.ts
new file mode 100644
index 0000000..0ae2a8b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/plugins/elementPlus/index.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+// 需要全局引入一些组件，如ElScrollbar，不然一些下拉项样式有问题
+import { ElLoading, ElScrollbar, ElButton } from 'element-plus'
+
+const plugins = [ElLoading]
+
+const components = [ElScrollbar, ElButton]
+
+export const setupElementPlus = (app: App<Element>) => {
+  plugins.forEach((plugin) => {
+    app.use(plugin)
+  })
+
+  components.forEach((component) => {
+    app.component(component.name, component)
+  })
+}
diff --git a/marketing-ui/admin-ui/src/plugins/formCreate/index.ts b/marketing-ui/admin-ui/src/plugins/formCreate/index.ts
new file mode 100644
index 0000000..07d2c51
--- /dev/null
+++ b/marketing-ui/admin-ui/src/plugins/formCreate/index.ts
@@ -0,0 +1,133 @@
+import type { App } from 'vue'
+// 👇使用 form-create 需额外全局引入 element plus 组件
+import {
+  // ElAutocomplete,
+  // ElButton,
+  // ElCascader,
+  // ElCheckbox,
+  // ElCheckboxButton,
+  // ElCheckboxGroup,
+  // ElCol,
+  // ElColorPicker,
+  // ElDatePicker,
+  // ElDialog,
+  // ElForm,
+  // ElInput,
+  // ElInputNumber,
+  // ElPopover,
+  // ElRadio,
+  // ElRadioButton,
+  // ElRadioGroup,
+  // ElRate,
+  // ElRow,
+  // ElSelect,
+  // ElSlider,
+  // ElSwitch,
+  // ElTimePicker,
+  // ElTooltip,
+  // ElTree,
+  // ElUpload,
+  // ElIcon,
+  // ElProgress,
+  // 以上会由 @form-create/element-ui/auto-import 自动引入
+  ElAlert,
+  ElTransfer,
+  ElAside,
+  ElContainer,
+  ElDivider,
+  ElHeader,
+  ElMain,
+  ElPopconfirm,
+  ElTable,
+  ElTableColumn,
+  ElTabPane,
+  ElTabs,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  ElBadge,
+  ElTag,
+  ElText,
+  ElMenu,
+  ElMenuItem,
+  ElFooter,
+  ElMessage,
+  ElCollapse,
+  ElCollapseItem,
+  ElCard,
+  // ElFormItem,
+  // ElOption
+} from 'element-plus'
+import FcDesigner from '@form-create/designer'
+import formCreate from '@form-create/element-ui'
+import install from '@form-create/element-ui/auto-import'
+
+//======================= 自定义组件 =======================
+import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
+import { useApiSelect } from '@/components/FormCreate'
+import { Editor } from '@/components/Editor'
+import DictSelect from '@/components/FormCreate/src/components/DictSelect.vue'
+
+const UserSelect = useApiSelect({
+  name: 'UserSelect',
+  labelField: 'nickname',
+  valueField: 'id',
+  url: '/system/user/simple-list'
+})
+const DeptSelect = useApiSelect({
+  name: 'DeptSelect',
+  labelField: 'name',
+  valueField: 'id',
+  url: '/system/dept/simple-list'
+})
+const ApiSelect = useApiSelect({
+  name: 'ApiSelect'
+})
+
+const components = [
+  ElAlert,
+  ElTransfer,
+  ElAside,
+  ElContainer,
+  ElDivider,
+  ElHeader,
+  ElMain,
+  ElPopconfirm,
+  ElTable,
+  ElTableColumn,
+  ElTabPane,
+  ElTabs,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  ElBadge,
+  ElTag,
+  ElText,
+  ElMenu,
+  ElMenuItem,
+  ElFooter,
+  ElMessage,
+  // ElFormItem,
+  // ElOption,
+  UploadImg,
+  UploadImgs,
+  UploadFile,
+  DictSelect,
+  UserSelect,
+  DeptSelect,
+  ApiSelect,
+  Editor,
+  ElCollapse,
+  ElCollapseItem,
+  ElCard,
+]
+
+// 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档
+export const setupFormCreate = (app: App<Element>) => {
+  components.forEach((component) => {
+    app.component(component.name, component)
+  })
+  formCreate.use(install)
+  app.use(formCreate)
+  app.use(FcDesigner)
+}
diff --git a/marketing-ui/admin-ui/src/plugins/svgIcon/index.ts b/marketing-ui/admin-ui/src/plugins/svgIcon/index.ts
new file mode 100644
index 0000000..b5b7f70
--- /dev/null
+++ b/marketing-ui/admin-ui/src/plugins/svgIcon/index.ts
@@ -0,0 +1,3 @@
+import 'virtual:svg-icons-register'
+
+import '@purge-icons/generated'
diff --git a/marketing-ui/admin-ui/src/plugins/tongji/index.ts b/marketing-ui/admin-ui/src/plugins/tongji/index.ts
new file mode 100644
index 0000000..ec261a1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/plugins/tongji/index.ts
@@ -0,0 +1,23 @@
+import router from '@/router'
+
+// 用于 router push
+window._hmt = window._hmt || []
+// HM_ID
+const HM_ID = import.meta.env.VITE_APP_BAIDU_CODE
+;(function () {
+  // 有值的时候，才开启
+  if (!HM_ID) {
+    return
+  }
+  const hm = document.createElement('script')
+  hm.src = 'https://hm.baidu.com/hm.js?' + HM_ID
+  const s = document.getElementsByTagName('script')[0]
+  s.parentNode.insertBefore(hm, s)
+})()
+
+router.afterEach(function (to) {
+  if (!HM_ID) {
+    return
+  }
+  _hmt.push(['_trackPageview', to.fullPath])
+})
diff --git a/marketing-ui/admin-ui/src/plugins/unocss/index.ts b/marketing-ui/admin-ui/src/plugins/unocss/index.ts
new file mode 100644
index 0000000..d366b5a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/plugins/unocss/index.ts
@@ -0,0 +1 @@
+import 'virtual:uno.css'
diff --git a/marketing-ui/admin-ui/src/plugins/vueI18n/helper.ts b/marketing-ui/admin-ui/src/plugins/vueI18n/helper.ts
new file mode 100644
index 0000000..da6bc8c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/plugins/vueI18n/helper.ts
@@ -0,0 +1,3 @@
+export const setHtmlPageLang = (locale: LocaleType) => {
+  document.querySelector('html')?.setAttribute('lang', locale)
+}
diff --git a/marketing-ui/admin-ui/src/plugins/vueI18n/index.ts b/marketing-ui/admin-ui/src/plugins/vueI18n/index.ts
new file mode 100644
index 0000000..f845b13
--- /dev/null
+++ b/marketing-ui/admin-ui/src/plugins/vueI18n/index.ts
@@ -0,0 +1,42 @@
+import type { App } from 'vue'
+import { createI18n } from 'vue-i18n'
+import { useLocaleStoreWithOut } from '@/store/modules/locale'
+import type { I18n, I18nOptions } from 'vue-i18n'
+import { setHtmlPageLang } from './helper'
+
+export let i18n: ReturnType<typeof createI18n>
+
+const createI18nOptions = async (): Promise<I18nOptions> => {
+  const localeStore = useLocaleStoreWithOut()
+  const locale = localeStore.getCurrentLocale
+  const localeMap = localeStore.getLocaleMap
+  const defaultLocal = await import(`../../locales/${locale.lang}.ts`)
+  const message = defaultLocal.default ?? {}
+
+  setHtmlPageLang(locale.lang)
+
+  localeStore.setCurrentLocale({
+    lang: locale.lang
+    // elLocale: elLocal
+  })
+
+  return {
+    legacy: false,
+    locale: locale.lang,
+    fallbackLocale: locale.lang,
+    messages: {
+      [locale.lang]: message
+    },
+    availableLocales: localeMap.map((v) => v.lang),
+    sync: true,
+    silentTranslationWarn: true,
+    missingWarn: false,
+    silentFallbackWarn: true
+  }
+}
+
+export const setupI18n = async (app: App<Element>) => {
+  const options = await createI18nOptions()
+  i18n = createI18n(options) as I18n
+  app.use(i18n)
+}
diff --git a/marketing-ui/admin-ui/src/router/index.ts b/marketing-ui/admin-ui/src/router/index.ts
new file mode 100644
index 0000000..b818421
--- /dev/null
+++ b/marketing-ui/admin-ui/src/router/index.ts
@@ -0,0 +1,28 @@
+import type { App } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
+import remainingRouter from './modules/remaining'
+
+// 创建路由实例
+const router = createRouter({
+  history: createWebHistory(import.meta.env.VITE_BASE_PATH), // createWebHashHistory URL带#，createWebHistory URL不带#
+  strict: true,
+  routes: remainingRouter as RouteRecordRaw[],
+  scrollBehavior: () => ({ left: 0, top: 0 })
+})
+
+export const resetRouter = (): void => {
+  const resetWhiteNameList = ['Redirect', 'Login', 'NoFind', 'Root']
+  router.getRoutes().forEach((route) => {
+    const { name } = route
+    if (name && !resetWhiteNameList.includes(name as string)) {
+      router.hasRoute(name) && router.removeRoute(name)
+    }
+  })
+}
+
+export const setupRouter = (app: App<Element>) => {
+  app.use(router)
+}
+
+export default router
diff --git a/marketing-ui/admin-ui/src/router/modules/remaining.ts b/marketing-ui/admin-ui/src/router/modules/remaining.ts
new file mode 100644
index 0000000..5d8277c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/router/modules/remaining.ts
@@ -0,0 +1,293 @@
+import { Layout } from '@/utils/routerHelper'
+
+const { t } = useI18n()
+/**
+ * redirect: noredirect        当设置 noredirect 的时候该路由在面包屑导航中不可被点击
+ * name:'router-name'          设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
+ * meta : {
+ hidden: true              当设置 true 的时候该路由不会再侧边栏出现 如404，login等页面(默认 false)
+
+ alwaysShow: true          当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式，
+ 只有一个时，会将那个子路由当做根路由显示在侧边栏，
+ 若你想不管路由下面的 children 声明的个数都显示你的根路由，
+ 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，
+ 一直显示根路由(默认 false)
+
+ title: 'title'            设置该路由在侧边栏和面包屑中展示的名字
+
+ icon: 'svg-name'          设置该路由的图标
+
+ noCache: true             如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+
+ breadcrumb: false         如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
+
+ affix: true               如果设置为true，则会一直固定在tag项中(默认 false)
+
+ noTagsView: true          如果设置为true，则不会出现在tag中(默认 false)
+
+ activeMenu: '/dashboard'  显示高亮的路由路径
+
+ followAuth: '/dashboard'  跟随哪个路由进行权限过滤
+
+ canTo: true               设置为true即使hidden为true，也依然可以进行路由跳转(默认 false)
+ }
+ **/
+const remainingRouter: AppRouteRecordRaw[] = [
+  {
+    path: '/redirect',
+    component: Layout,
+    name: 'Redirect',
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        name: 'Redirect',
+        component: () => import('@/views/Redirect/Redirect.vue'),
+        meta: {}
+      }
+    ],
+    meta: {
+      hidden: true,
+      noTagsView: true
+    }
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/index',
+    name: 'Home',
+    meta: {},
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/Home/Index.vue'),
+        name: 'Index',
+        meta: {
+          title: t('router.home'),
+          icon: 'ep:home-filled',
+          noCache: false,
+          affix: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/user',
+    component: Layout,
+    name: 'UserInfo',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'profile',
+        component: () => import('@/views/Profile/Index.vue'),
+        name: 'Profile',
+        meta: {
+          canTo: true,
+          hidden: true,
+          noTagsView: false,
+          icon: 'ep:user',
+          title: t('common.profile')
+        }
+      }
+    ]
+  },
+  {
+    path: '/dict',
+    component: Layout,
+    name: 'dict',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'type/data/:dictType',
+        component: () => import('@/views/system/dict/data/index.vue'),
+        name: 'SystemDictData',
+        meta: {
+          title: '字典数据',
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          icon: '',
+          activeMenu: '/system/dict'
+        }
+      }
+    ]
+  },
+
+  {
+    path: '/codegen',
+    component: Layout,
+    name: 'CodegenEdit',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'edit',
+        component: () => import('@/views/infra/codegen/EditTable.vue'),
+        name: 'InfraCodegenEditTable',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:edit',
+          title: '修改生成配置',
+          activeMenu: 'infra/codegen/index'
+        }
+      }
+    ]
+  },
+  {
+    path: '/job',
+    component: Layout,
+    name: 'JobL',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'job-log',
+        component: () => import('@/views/infra/job/logger/index.vue'),
+        name: 'InfraJobLog',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:edit',
+          title: '调度日志',
+          activeMenu: 'infra/job/index'
+        }
+      }
+    ]
+  },
+  {
+    path: '/login',
+    component: () => import('@/views/Login/Login.vue'),
+    name: 'Login',
+    meta: {
+      hidden: true,
+      title: t('router.login'),
+      noTagsView: true
+    }
+  },
+  {
+    path: '/sso',
+    component: () => import('@/views/Login/Login.vue'),
+    name: 'SSOLogin',
+    meta: {
+      hidden: true,
+      title: t('router.login'),
+      noTagsView: true
+    }
+  },
+  {
+    path: '/social-login',
+    component: () => import('@/views/Login/SocialLogin.vue'),
+    name: 'SocialLogin',
+    meta: {
+      hidden: true,
+      title: t('router.socialLogin'),
+      noTagsView: true
+    }
+  },
+  {
+    path: '/403',
+    component: () => import('@/views/Error/403.vue'),
+    name: 'NoAccess',
+    meta: {
+      hidden: true,
+      title: '403',
+      noTagsView: true
+    }
+  },
+  {
+    path: '/404',
+    component: () => import('@/views/Error/404.vue'),
+    name: 'NoFound',
+    meta: {
+      hidden: true,
+      title: '404',
+      noTagsView: true
+    }
+  },
+  {
+    path: '/500',
+    component: () => import('@/views/Error/500.vue'),
+    name: 'Error',
+    meta: {
+      hidden: true,
+      title: '500',
+      noTagsView: true
+    }
+  },
+  {
+    path: '/bpm',
+    component: Layout,
+    name: 'bpm',
+    meta: {
+      hidden: true
+    },
+    children: [
+    ]
+  },
+  {
+    path: '/templateinfo',
+    component: Layout,
+    name: 'templateinfo',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'templatebindinginfo',
+        component: () => import('@/views/domesticsms/templateinfo/templatebindinginfo/index.vue'),
+        name: 'templatebindinginfo',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:edit',
+          title: '渠道绑定信息',
+          activeMenu: 'domesticsms/templateinfo/index'
+        }
+      }
+    ]
+  },
+  {
+    path: '/internationaltemplateinfo',
+    component: Layout,
+    name: 'internationaltemplateinfo',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'templatebindinginfo',
+        component: () => import('@/views/internationalsms/templateinfo/templatebindinginfo/index.vue'),
+        name: 'internationaltemplatebindinginfo',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:edit',
+          title: '渠道绑定信息',
+          activeMenu: 'internationalsms/templateinfo/index'
+        }
+      }
+    ]
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/views/Error/404.vue'),
+    name: '',
+    meta: {
+      title: '404',
+      hidden: true,
+      breadcrumb: false
+    }
+  }
+  ]
+
+export default remainingRouter
diff --git a/marketing-ui/admin-ui/src/store/index.ts b/marketing-ui/admin-ui/src/store/index.ts
new file mode 100644
index 0000000..63f0045
--- /dev/null
+++ b/marketing-ui/admin-ui/src/store/index.ts
@@ -0,0 +1,12 @@
+import type { App } from 'vue'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+const store = createPinia()
+store.use(piniaPluginPersistedstate)
+
+export const setupStore = (app: App<Element>) => {
+  app.use(store)
+}
+
+export { store }
diff --git a/marketing-ui/admin-ui/src/store/modules/app.ts b/marketing-ui/admin-ui/src/store/modules/app.ts
new file mode 100644
index 0000000..be48daa
--- /dev/null
+++ b/marketing-ui/admin-ui/src/store/modules/app.ts
@@ -0,0 +1,282 @@
+import { defineStore } from 'pinia'
+import { store } from '../index'
+import { humpToUnderline, setCssVar } from '@/utils'
+import { ElMessage } from 'element-plus'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { ElementPlusSize } from '@/types/elementPlus'
+import { LayoutType } from '@/types/layout'
+import { ThemeTypes } from '@/types/theme'
+
+const { wsCache } = useCache()
+
+interface AppState {
+  breadcrumb: boolean
+  breadcrumbIcon: boolean
+  collapse: boolean
+  uniqueOpened: boolean
+  hamburger: boolean
+  screenfull: boolean
+  search: boolean
+  size: boolean
+  locale: boolean
+  message: boolean
+  tagsView: boolean
+  tagsViewImmerse: boolean
+  tagsViewIcon: boolean
+  logo: boolean
+  fixedHeader: boolean
+  greyMode: boolean
+  pageLoading: boolean
+  layout: LayoutType
+  title: string
+  userInfo: string
+  isDark: boolean
+  currentSize: ElementPlusSize
+  sizeMap: ElementPlusSize[]
+  mobile: boolean
+  footer: boolean
+  theme: ThemeTypes
+  fixedMenu: boolean
+}
+
+export const useAppStore = defineStore('app', {
+  state: (): AppState => {
+    return {
+      userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突
+      sizeMap: ['default', 'large', 'small'],
+      mobile: false, // 是否是移动端
+      title: import.meta.env.VITE_APP_TITLE, // 标题
+      pageLoading: false, // 路由跳转loading
+
+      breadcrumb: true, // 面包屑
+      breadcrumbIcon: true, // 面包屑图标
+      collapse: false, // 折叠菜单
+      uniqueOpened: true, // 是否只保持一个子菜单的展开
+      hamburger: true, // 折叠图标
+      screenfull: true, // 全屏图标
+      search: true, // 搜索图标
+      size: true, // 尺寸图标
+      locale: true, // 多语言图标
+      message: true, // 消息图标
+      tagsView: true, // 标签页
+      tagsViewImmerse: false, // 标签页沉浸
+      tagsViewIcon: true, // 是否显示标签图标
+      logo: true, // logo
+      fixedHeader: true, // 固定toolheader
+      footer: true, // 显示页脚
+      greyMode: false, // 是否开始灰色模式，用于特殊悼念日
+      fixedMenu: wsCache.get('fixedMenu') || false, // 是否固定菜单
+
+      layout: wsCache.get(CACHE_KEY.LAYOUT) || 'classic', // layout布局
+      isDark: wsCache.get(CACHE_KEY.IS_DARK) || false, // 是否是暗黑模式
+      currentSize: wsCache.get('default') || 'default', // 组件尺寸
+      theme: wsCache.get(CACHE_KEY.THEME) || {
+        // 主题色
+        elColorPrimary: '#409eff',
+        // 左侧菜单边框颜色
+        leftMenuBorderColor: 'inherit',
+        // 左侧菜单背景颜色
+        leftMenuBgColor: '#001529',
+        // 左侧菜单浅色背景颜色
+        leftMenuBgLightColor: '#0f2438',
+        // 左侧菜单选中背景颜色
+        leftMenuBgActiveColor: 'var(--el-color-primary)',
+        // 左侧菜单收起选中背景颜色
+        leftMenuCollapseBgActiveColor: 'var(--el-color-primary)',
+        // 左侧菜单字体颜色
+        leftMenuTextColor: '#bfcbd9',
+        // 左侧菜单选中字体颜色
+        leftMenuTextActiveColor: '#fff',
+        // logo字体颜色
+        logoTitleTextColor: '#fff',
+        // logo边框颜色
+        logoBorderColor: 'inherit',
+        // 头部背景颜色
+        topHeaderBgColor: '#fff',
+        // 头部字体颜色
+        topHeaderTextColor: 'inherit',
+        // 头部悬停颜色
+        topHeaderHoverColor: '#f6f6f6',
+        // 头部边框颜色
+        topToolBorderColor: '#eee'
+      }
+    }
+  },
+  getters: {
+    getBreadcrumb(): boolean {
+      return this.breadcrumb
+    },
+    getBreadcrumbIcon(): boolean {
+      return this.breadcrumbIcon
+    },
+    getCollapse(): boolean {
+      return this.collapse
+    },
+    getUniqueOpened(): boolean {
+      return this.uniqueOpened
+    },
+    getHamburger(): boolean {
+      return this.hamburger
+    },
+    getScreenfull(): boolean {
+      return this.screenfull
+    },
+    getSize(): boolean {
+      return this.size
+    },
+    getLocale(): boolean {
+      return this.locale
+    },
+    getTagsView(): boolean {
+      return this.tagsView
+    },
+    getTagsViewImmerse(): boolean {
+      return this.tagsViewImmerse
+    },
+    getTagsViewIcon(): boolean {
+      return this.tagsViewIcon
+    },
+    getLogo(): boolean {
+      return this.logo
+    },
+    getFixedHeader(): boolean {
+      return this.fixedHeader
+    },
+    getGreyMode(): boolean {
+      return this.greyMode
+    },
+    getFixedMenu(): boolean {
+      return this.fixedMenu
+    },
+    getPageLoading(): boolean {
+      return this.pageLoading
+    },
+    getLayout(): LayoutType {
+      return this.layout
+    },
+    getTitle(): string {
+      return this.title
+    },
+    getUserInfo(): string {
+      return this.userInfo
+    },
+    getIsDark(): boolean {
+      return this.isDark
+    },
+    getCurrentSize(): ElementPlusSize {
+      return this.currentSize
+    },
+    getSizeMap(): ElementPlusSize[] {
+      return this.sizeMap
+    },
+    getMobile(): boolean {
+      return this.mobile
+    },
+    getTheme(): ThemeTypes {
+      return this.theme
+    },
+    getFooter(): boolean {
+      return this.footer
+    }
+  },
+  actions: {
+    setBreadcrumb(breadcrumb: boolean) {
+      this.breadcrumb = breadcrumb
+    },
+    setBreadcrumbIcon(breadcrumbIcon: boolean) {
+      this.breadcrumbIcon = breadcrumbIcon
+    },
+    setCollapse(collapse: boolean) {
+      this.collapse = collapse
+    },
+    setUniqueOpened(uniqueOpened: boolean) {
+      this.uniqueOpened = uniqueOpened
+    },
+    setHamburger(hamburger: boolean) {
+      this.hamburger = hamburger
+    },
+    setScreenfull(screenfull: boolean) {
+      this.screenfull = screenfull
+    },
+    setSize(size: boolean) {
+      this.size = size
+    },
+    setLocale(locale: boolean) {
+      this.locale = locale
+    },
+    setMessage(message: boolean) {
+      this.message = message
+    },
+    setTagsView(tagsView: boolean) {
+      this.tagsView = tagsView
+    },
+    setTagsViewImmerse(tagsViewImmerse: boolean) {
+      this.tagsViewImmerse = tagsViewImmerse
+    },
+    setTagsViewIcon(tagsViewIcon: boolean) {
+      this.tagsViewIcon = tagsViewIcon
+    },
+    setLogo(logo: boolean) {
+      this.logo = logo
+    },
+    setFixedHeader(fixedHeader: boolean) {
+      this.fixedHeader = fixedHeader
+    },
+    setGreyMode(greyMode: boolean) {
+      this.greyMode = greyMode
+    },
+    setFixedMenu(fixedMenu: boolean) {
+      wsCache.set('fixedMenu', fixedMenu)
+      this.fixedMenu = fixedMenu
+    },
+    setPageLoading(pageLoading: boolean) {
+      this.pageLoading = pageLoading
+    },
+    setLayout(layout: LayoutType) {
+      if (this.mobile && layout !== 'classic') {
+        ElMessage.warning('移动端模式下不支持切换其他布局')
+        return
+      }
+      this.layout = layout
+      wsCache.set(CACHE_KEY.LAYOUT, this.layout)
+    },
+    setTitle(title: string) {
+      this.title = title
+    },
+    setIsDark(isDark: boolean) {
+      this.isDark = isDark
+      if (this.isDark) {
+        document.documentElement.classList.add('dark')
+        document.documentElement.classList.remove('light')
+      } else {
+        document.documentElement.classList.add('light')
+        document.documentElement.classList.remove('dark')
+      }
+      wsCache.set(CACHE_KEY.IS_DARK, this.isDark)
+    },
+    setCurrentSize(currentSize: ElementPlusSize) {
+      this.currentSize = currentSize
+      wsCache.set('currentSize', this.currentSize)
+    },
+    setMobile(mobile: boolean) {
+      this.mobile = mobile
+    },
+    setTheme(theme: ThemeTypes) {
+      this.theme = Object.assign(this.theme, theme)
+      wsCache.set(CACHE_KEY.THEME, this.theme)
+    },
+    setCssVarTheme() {
+      for (const key in this.theme) {
+        setCssVar(`--${humpToUnderline(key)}`, this.theme[key])
+      }
+    },
+    setFooter(footer: boolean) {
+      this.footer = footer
+    }
+  },
+  persist: false
+})
+
+export const useAppStoreWithOut = () => {
+  return useAppStore(store)
+}
diff --git a/marketing-ui/admin-ui/src/store/modules/dict.ts b/marketing-ui/admin-ui/src/store/modules/dict.ts
new file mode 100644
index 0000000..e239fb0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/store/modules/dict.ts
@@ -0,0 +1,104 @@
+import { defineStore } from 'pinia'
+import { store } from '../index'
+// @ts-ignore
+import { DictDataVO } from '@/api/system/dict/types'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+const { wsCache } = useCache('sessionStorage')
+import { getSimpleDictDataList } from '@/api/system/dict/dict.data'
+
+export interface DictValueType {
+  value: any
+  label: string
+  clorType?: string
+  cssClass?: string
+}
+export interface DictTypeType {
+  dictType: string
+  dictValue: DictValueType[]
+}
+export interface DictState {
+  dictMap: Map<string, any>
+  isSetDict: boolean
+}
+
+export const useDictStore = defineStore('dict', {
+  state: (): DictState => ({
+    dictMap: new Map<string, any>(),
+    isSetDict: false
+  }),
+  getters: {
+    getDictMap(): Recordable {
+      const dictMap = wsCache.get(CACHE_KEY.DICT_CACHE)
+      if (dictMap) {
+        this.dictMap = dictMap
+      }
+      return this.dictMap
+    },
+    getIsSetDict(): boolean {
+      return this.isSetDict
+    }
+  },
+  actions: {
+    async setDictMap() {
+      const dictMap = wsCache.get(CACHE_KEY.DICT_CACHE)
+      if (dictMap) {
+        this.dictMap = dictMap
+        this.isSetDict = true
+      } else {
+        const res = await getSimpleDictDataList()
+        // 设置数据
+        const dictDataMap = new Map<string, any>()
+        res.forEach((dictData: DictDataVO) => {
+          // 获得 dictType 层级
+          const enumValueObj = dictDataMap[dictData.dictType]
+          if (!enumValueObj) {
+            dictDataMap[dictData.dictType] = []
+          }
+          // 处理 dictValue 层级
+          dictDataMap[dictData.dictType].push({
+            value: dictData.value,
+            label: dictData.label,
+            colorType: dictData.colorType,
+            cssClass: dictData.cssClass
+          })
+        })
+        this.dictMap = dictDataMap
+        this.isSetDict = true
+        wsCache.set(CACHE_KEY.DICT_CACHE, dictDataMap, { exp: 60 }) // 60 秒 过期
+      }
+    },
+    getDictByType(type: string) {
+      if (!this.isSetDict) {
+        this.setDictMap()
+      }
+      return this.dictMap[type]
+    },
+    async resetDict() {
+      wsCache.delete(CACHE_KEY.DICT_CACHE)
+      const res = await getSimpleDictDataList()
+      // 设置数据
+      const dictDataMap = new Map<string, any>()
+      res.forEach((dictData: DictDataVO) => {
+        // 获得 dictType 层级
+        const enumValueObj = dictDataMap[dictData.dictType]
+        if (!enumValueObj) {
+          dictDataMap[dictData.dictType] = []
+        }
+        // 处理 dictValue 层级
+        dictDataMap[dictData.dictType].push({
+          value: dictData.value,
+          label: dictData.label,
+          colorType: dictData.colorType,
+          cssClass: dictData.cssClass
+        })
+      })
+      this.dictMap = dictDataMap
+      this.isSetDict = true
+      wsCache.set(CACHE_KEY.DICT_CACHE, dictDataMap, { exp: 60 }) // 60 秒 过期
+    }
+  }
+})
+
+export const useDictStoreWithOut = () => {
+  return useDictStore(store)
+}
diff --git a/marketing-ui/admin-ui/src/store/modules/locale.ts b/marketing-ui/admin-ui/src/store/modules/locale.ts
new file mode 100644
index 0000000..1fc772a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/store/modules/locale.ts
@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia'
+import { store } from '../index'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import en from 'element-plus/es/locale/lang/en'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { LocaleDropdownType } from '@/types/localeDropdown'
+
+const { wsCache } = useCache()
+
+const elLocaleMap = {
+  'zh-CN': zhCn,
+  en: en
+}
+interface LocaleState {
+  currentLocale: LocaleDropdownType
+  localeMap: LocaleDropdownType[]
+}
+
+export const useLocaleStore = defineStore('locales', {
+  state: (): LocaleState => {
+    return {
+      currentLocale: {
+        lang: wsCache.get(CACHE_KEY.LANG) || 'zh-CN',
+        elLocale: elLocaleMap[wsCache.get(CACHE_KEY.LANG) || 'zh-CN']
+      },
+      // 多语言
+      localeMap: [
+        {
+          lang: 'zh-CN',
+          name: '简体中文'
+        },
+        {
+          lang: 'en',
+          name: 'English'
+        }
+      ]
+    }
+  },
+  getters: {
+    getCurrentLocale(): LocaleDropdownType {
+      return this.currentLocale
+    },
+    getLocaleMap(): LocaleDropdownType[] {
+      return this.localeMap
+    }
+  },
+  actions: {
+    setCurrentLocale(localeMap: LocaleDropdownType) {
+      // this.locale = Object.assign(this.locale, localeMap)
+      this.currentLocale.lang = localeMap?.lang
+      this.currentLocale.elLocale = elLocaleMap[localeMap?.lang]
+      wsCache.set(CACHE_KEY.LANG, localeMap?.lang)
+    }
+  }
+})
+
+export const useLocaleStoreWithOut = () => {
+  return useLocaleStore(store)
+}
diff --git a/marketing-ui/admin-ui/src/store/modules/lock.ts b/marketing-ui/admin-ui/src/store/modules/lock.ts
new file mode 100644
index 0000000..68ae1d7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/store/modules/lock.ts
@@ -0,0 +1,48 @@
+import { defineStore } from 'pinia'
+import { store } from '@/store'
+
+interface lockInfo {
+  isLock?: boolean
+  password?: string
+}
+
+interface LockState {
+  lockInfo: lockInfo
+}
+
+export const useLockStore = defineStore('lock', {
+  state: (): LockState => {
+    return {
+      lockInfo: {
+        // isLock: false, // 是否锁定屏幕
+        // password: '' // 锁屏密码
+      }
+    }
+  },
+  getters: {
+    getLockInfo(): lockInfo {
+      return this.lockInfo
+    }
+  },
+  actions: {
+    setLockInfo(lockInfo: lockInfo) {
+      this.lockInfo = lockInfo
+    },
+    resetLockInfo() {
+      this.lockInfo = {}
+    },
+    unLock(password: string) {
+      if (this.lockInfo?.password === password) {
+        this.resetLockInfo()
+        return true
+      } else {
+        return false
+      }
+    }
+  },
+  persist: true
+})
+
+export const useLockStoreWithOut = () => {
+  return useLockStore(store)
+}
diff --git a/marketing-ui/admin-ui/src/store/modules/permission.ts b/marketing-ui/admin-ui/src/store/modules/permission.ts
new file mode 100644
index 0000000..2ff8111
--- /dev/null
+++ b/marketing-ui/admin-ui/src/store/modules/permission.ts
@@ -0,0 +1,71 @@
+import { defineStore } from 'pinia'
+import { store } from '@/store'
+import { cloneDeep } from 'lodash-es'
+import remainingRouter from '@/router/modules/remaining'
+import { flatMultiLevelRoutes, generateRoute } from '@/utils/routerHelper'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+
+const { wsCache } = useCache()
+
+export interface PermissionState {
+  routers: AppRouteRecordRaw[]
+  addRouters: AppRouteRecordRaw[]
+  menuTabRouters: AppRouteRecordRaw[]
+}
+
+export const usePermissionStore = defineStore('permission', {
+  state: (): PermissionState => ({
+    routers: [],
+    addRouters: [],
+    menuTabRouters: []
+  }),
+  getters: {
+    getRouters(): AppRouteRecordRaw[] {
+      return this.routers
+    },
+    getAddRouters(): AppRouteRecordRaw[] {
+      return flatMultiLevelRoutes(cloneDeep(this.addRouters))
+    },
+    getMenuTabRouters(): AppRouteRecordRaw[] {
+      return this.menuTabRouters
+    }
+  },
+  actions: {
+    async generateRoutes(): Promise<unknown> {
+      return new Promise<void>(async (resolve) => {
+        // 获得菜单列表，它在登录的时候，setUserInfoAction 方法中已经进行获取
+        let res: AppCustomRouteRecordRaw[] = []
+        const roleRouters = wsCache.get(CACHE_KEY.ROLE_ROUTERS)
+        if (roleRouters) {
+          res = roleRouters as AppCustomRouteRecordRaw[]
+        }
+        const routerMap: AppRouteRecordRaw[] = generateRoute(res)
+        // 动态路由，404一定要放到最后面
+        // preschooler：vue-router@4以后已支持静态404路由，此处可不再追加
+        this.addRouters = routerMap.concat([
+          {
+            path: '/:path(.*)*',
+            // redirect: '/404',
+            component: () => import('@/views/Error/404.vue'),
+            name: '404Page',
+            meta: {
+              hidden: true,
+              breadcrumb: false
+            }
+          }
+        ])
+        // 渲染菜单的所有路由
+        this.routers = cloneDeep(remainingRouter).concat(routerMap)
+        resolve()
+      })
+    },
+    setMenuTabRouters(routers: AppRouteRecordRaw[]): void {
+      this.menuTabRouters = routers
+    }
+  },
+  persist: false
+})
+
+export const usePermissionStoreWithOut = () => {
+  return usePermissionStore(store)
+}
diff --git a/marketing-ui/admin-ui/src/store/modules/tagsView.ts b/marketing-ui/admin-ui/src/store/modules/tagsView.ts
new file mode 100644
index 0000000..2b2d817
--- /dev/null
+++ b/marketing-ui/admin-ui/src/store/modules/tagsView.ts
@@ -0,0 +1,177 @@
+import router from '@/router'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { getRawRoute } from '@/utils/routerHelper'
+import { defineStore } from 'pinia'
+import { store } from '../index'
+import { findIndex } from '@/utils'
+import { useUserStoreWithOut } from './user'
+
+export interface TagsViewState {
+  visitedViews: RouteLocationNormalizedLoaded[]
+  cachedViews: Set<string>
+  selectedTag?: RouteLocationNormalizedLoaded
+}
+
+export const useTagsViewStore = defineStore('tagsView', {
+  state: (): TagsViewState => ({
+    visitedViews: [],
+    cachedViews: new Set(),
+    selectedTag: undefined
+  }),
+  getters: {
+    getVisitedViews(): RouteLocationNormalizedLoaded[] {
+      return this.visitedViews
+    },
+    getCachedViews(): string[] {
+      return Array.from(this.cachedViews)
+    },
+    getSelectedTag(): RouteLocationNormalizedLoaded | undefined {
+      return this.selectedTag
+    }
+  },
+  actions: {
+    // 新增缓存和tag
+    addView(view: RouteLocationNormalizedLoaded): void {
+      this.addVisitedView(view)
+      this.addCachedView()
+    },
+    // 新增tag
+    addVisitedView(view: RouteLocationNormalizedLoaded) {
+      if (this.visitedViews.some((v) => v.fullPath === view.fullPath)) return
+      if (view.meta?.noTagsView) return
+      const visitedView = Object.assign({}, view, { title: view.meta?.title || 'no-name' })
+
+      if (visitedView.meta) {
+        const titleSuffixList: string[] = []
+        this.visitedViews.forEach((v) => {
+          if (v.path === visitedView.path && v.meta?.title === visitedView.meta?.title) {
+            titleSuffixList.push(v.meta?.titleSuffix || '1')
+          }
+        })
+        if (titleSuffixList.length) {
+          let titleSuffix = 1
+          while (titleSuffixList.includes(`${titleSuffix}`)) {
+            titleSuffix += 1
+          }
+          visitedView.meta.titleSuffix = titleSuffix === 1 ? undefined : `${titleSuffix}`
+        }
+      }
+
+      this.visitedViews.push(visitedView)
+    },
+    // 新增缓存
+    addCachedView() {
+      const cacheMap: Set<string> = new Set()
+      for (const v of this.visitedViews) {
+        const item = getRawRoute(v)
+        const needCache = !item.meta?.noCache
+        if (!needCache) {
+          continue
+        }
+        const name = item.name as string
+        cacheMap.add(name)
+      }
+      if (Array.from(this.cachedViews).sort().toString() === Array.from(cacheMap).sort().toString())
+        return
+      this.cachedViews = cacheMap
+    },
+    // 删除某个
+    delView(view: RouteLocationNormalizedLoaded) {
+      this.delVisitedView(view)
+      this.delCachedView()
+    },
+    // 删除tag
+    delVisitedView(view: RouteLocationNormalizedLoaded) {
+      for (const [i, v] of this.visitedViews.entries()) {
+        if (v.fullPath === view.fullPath) {
+          this.visitedViews.splice(i, 1)
+          break
+        }
+      }
+    },
+    // 删除缓存
+    delCachedView() {
+      const route = router.currentRoute.value
+      const index = findIndex<string>(this.getCachedViews, (v) => v === route.name)
+      if (index > -1) {
+        this.cachedViews.delete(this.getCachedViews[index])
+      }
+    },
+    // 删除所有缓存和tag
+    delAllViews() {
+      this.delAllVisitedViews()
+      this.delCachedView()
+    },
+    // 删除所有tag
+    delAllVisitedViews() {
+      const userStore = useUserStoreWithOut()
+
+      // const affixTags = this.visitedViews.filter((tag) => tag.meta.affix)
+      this.visitedViews = userStore.getUser
+        ? this.visitedViews.filter((tag) => tag?.meta?.affix)
+        : []
+    },
+    // 删除其他
+    delOthersViews(view: RouteLocationNormalizedLoaded) {
+      this.delOthersVisitedViews(view)
+      this.addCachedView()
+    },
+    // 删除其他tag
+    delOthersVisitedViews(view: RouteLocationNormalizedLoaded) {
+      this.visitedViews = this.visitedViews.filter((v) => {
+        return v?.meta?.affix || v.fullPath === view.fullPath
+      })
+    },
+    // 删除左侧
+    delLeftViews(view: RouteLocationNormalizedLoaded) {
+      const index = findIndex<RouteLocationNormalizedLoaded>(
+        this.visitedViews,
+        (v) => v.fullPath === view.fullPath
+      )
+      if (index > -1) {
+        this.visitedViews = this.visitedViews.filter((v, i) => {
+          return v?.meta?.affix || v.fullPath === view.fullPath || i > index
+        })
+        this.addCachedView()
+      }
+    },
+    // 删除右侧
+    delRightViews(view: RouteLocationNormalizedLoaded) {
+      const index = findIndex<RouteLocationNormalizedLoaded>(
+        this.visitedViews,
+        (v) => v.fullPath === view.fullPath
+      )
+      if (index > -1) {
+        this.visitedViews = this.visitedViews.filter((v, i) => {
+          return v?.meta?.affix || v.fullPath === view.fullPath || i < index
+        })
+        this.addCachedView()
+      }
+    },
+    updateVisitedView(view: RouteLocationNormalizedLoaded) {
+      for (let v of this.visitedViews) {
+        if (v.fullPath === view.fullPath) {
+          v = Object.assign(v, view)
+          break
+        }
+      }
+    },
+    // 设置当前选中的 tag
+    setSelectedTag(tag: RouteLocationNormalizedLoaded) {
+      this.selectedTag = tag
+    },
+    setTitle(title: string, path?: string) {
+      for (const v of this.visitedViews) {
+        if (v.path === (path ?? this.selectedTag?.path)) {
+          v.meta.title = title
+          break
+        }
+      }
+    }
+  },
+  persist: false
+})
+
+export const useTagsViewStoreWithOut = () => {
+  return useTagsViewStore(store)
+}
diff --git a/marketing-ui/admin-ui/src/store/modules/user.ts b/marketing-ui/admin-ui/src/store/modules/user.ts
new file mode 100644
index 0000000..c3920c7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/store/modules/user.ts
@@ -0,0 +1,103 @@
+import { store } from '@/store'
+import { defineStore } from 'pinia'
+import { getAccessToken, removeToken } from '@/utils/auth'
+import { CACHE_KEY, useCache, deleteUserCache } from '@/hooks/web/useCache'
+import { getInfo, loginOut } from '@/api/login'
+
+const { wsCache } = useCache()
+
+interface UserVO {
+  id: number
+  avatar: string
+  nickname: string
+  deptId: number
+}
+
+interface UserInfoVO {
+  // USER 缓存
+  permissions: Set<string>
+  roles: string[]
+  isSetUser: boolean
+  user: UserVO
+}
+
+export const useUserStore = defineStore('admin-user', {
+  state: (): UserInfoVO => ({
+    permissions: new Set<string>(),
+    roles: [],
+    isSetUser: false,
+    user: {
+      id: 0,
+      avatar: '',
+      nickname: '',
+      deptId: 0
+    }
+  }),
+  getters: {
+    getPermissions(): Set<string> {
+      return this.permissions
+    },
+    getRoles(): string[] {
+      return this.roles
+    },
+    getIsSetUser(): boolean {
+      return this.isSetUser
+    },
+    getUser(): UserVO {
+      return this.user
+    }
+  },
+  actions: {
+    async setUserInfoAction() {
+      if (!getAccessToken()) {
+        this.resetState()
+        return null
+      }
+      let userInfo = wsCache.get(CACHE_KEY.USER)
+      if (!userInfo) {
+        userInfo = await getInfo()
+      }
+      this.permissions = new Set(userInfo.permissions)
+      this.roles = userInfo.roles
+      this.user = userInfo.user
+      this.isSetUser = true
+      wsCache.set(CACHE_KEY.USER, userInfo)
+      wsCache.set(CACHE_KEY.ROLE_ROUTERS, userInfo.menus)
+    },
+    async setUserAvatarAction(avatar: string) {
+      const userInfo = wsCache.get(CACHE_KEY.USER)
+      // NOTE: 是否需要像`setUserInfoAction`一样判断`userInfo != null`
+      this.user.avatar = avatar
+      userInfo.user.avatar = avatar
+      wsCache.set(CACHE_KEY.USER, userInfo)
+    },
+    async setUserNicknameAction(nickname: string) {
+      const userInfo = wsCache.get(CACHE_KEY.USER)
+      // NOTE: 是否需要像`setUserInfoAction`一样判断`userInfo != null`
+      this.user.nickname = nickname
+      userInfo.user.nickname = nickname
+      wsCache.set(CACHE_KEY.USER, userInfo)
+    },
+    async loginOut() {
+      await loginOut()
+      removeToken()
+      deleteUserCache() // 删除用户缓存
+      this.resetState()
+    },
+    resetState() {
+      this.permissions = new Set<string>()
+      this.roles = []
+      this.isSetUser = false
+      this.user = {
+        id: 0,
+        avatar: '',
+        nickname: '',
+        deptId: 0
+      }
+    }
+  }
+})
+
+export const useUserStoreWithOut = () => {
+  return useUserStore(store)
+}
diff --git a/marketing-ui/admin-ui/src/styles/FormCreate/fonts/fontello.woff b/marketing-ui/admin-ui/src/styles/FormCreate/fonts/fontello.woff
new file mode 100644
index 0000000..1e00f49
Binary files /dev/null and b/marketing-ui/admin-ui/src/styles/FormCreate/fonts/fontello.woff differ
diff --git a/marketing-ui/admin-ui/src/styles/FormCreate/index.scss b/marketing-ui/admin-ui/src/styles/FormCreate/index.scss
new file mode 100644
index 0000000..bb62000
--- /dev/null
+++ b/marketing-ui/admin-ui/src/styles/FormCreate/index.scss
@@ -0,0 +1,22 @@
+// 使用字体图标来源 https://fontello.com/
+
+@font-face {
+  font-family: 'fc-icon';
+  src: url('@/styles/FormCreate/fonts/fontello.woff') format('woff');
+}
+
+.icon-doc-text:before {
+  content: '\f0f6';
+}
+
+.icon-server:before {
+  content: '\f233';
+}
+
+.icon-address-card-o:before {
+  content: '\f2bc';
+}
+
+.icon-user-o:before {
+  content: '\f2c0';
+}
diff --git a/marketing-ui/admin-ui/src/styles/global.module.scss b/marketing-ui/admin-ui/src/styles/global.module.scss
new file mode 100644
index 0000000..af793f0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/styles/global.module.scss
@@ -0,0 +1,6 @@
+@use './variables.scss' as *;
+// 导出变量
+:export {
+  namespace: $namespace;
+  elNamespace: $elNamespace;
+}
diff --git a/marketing-ui/admin-ui/src/styles/index.scss b/marketing-ui/admin-ui/src/styles/index.scss
new file mode 100644
index 0000000..7607941
--- /dev/null
+++ b/marketing-ui/admin-ui/src/styles/index.scss
@@ -0,0 +1,37 @@
+@use './var.css';
+@use './FormCreate/index.scss';
+@use './theme.scss';
+@use 'element-plus/theme-chalk/dark/css-vars.css';
+
+.reset-margin [class*='el-icon'] + span {
+  margin-left: 2px !important;
+}
+
+// 解决抽屉弹出时，body宽度变化的问题
+.el-popup-parent--hidden {
+  width: 100% !important;
+}
+
+// 解决表格内容超过表格总宽度后，横向滚动条前端顶不到表格边缘的问题
+.el-scrollbar__bar {
+  display: flex;
+  justify-content: flex-start;
+}
+
+/* nprogress 适配 element-plus 的主题色 */
+#nprogress {
+  & .bar {
+    background-color: var(--el-color-primary) !important;
+  }
+
+  & .peg {
+    box-shadow:
+      0 0 10px var(--el-color-primary),
+      0 0 5px var(--el-color-primary) !important;
+  }
+
+  & .spinner-icon {
+    border-top-color: var(--el-color-primary);
+    border-left-color: var(--el-color-primary);
+  }
+}
diff --git a/marketing-ui/admin-ui/src/styles/theme.scss b/marketing-ui/admin-ui/src/styles/theme.scss
new file mode 100644
index 0000000..39b03b3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/styles/theme.scss
@@ -0,0 +1,6 @@
+// .text-color {
+//   color: var(--el-text-color-regular);
+// }
+// .dark .dark\:text-color {
+//   color: rgba(255, 255, 255, var(--dark-text-color));
+// }
diff --git a/marketing-ui/admin-ui/src/styles/var.css b/marketing-ui/admin-ui/src/styles/var.css
new file mode 100644
index 0000000..44f9405
--- /dev/null
+++ b/marketing-ui/admin-ui/src/styles/var.css
@@ -0,0 +1,74 @@
+:root {
+  --login-bg-color: #293146;
+
+  --left-menu-max-width: 200px;
+
+  --left-menu-min-width: 64px;
+
+  --left-menu-bg-color: #001529;
+
+  --left-menu-bg-light-color: #0f2438;
+
+  --left-menu-bg-active-color: var(--el-color-primary);
+
+  --left-menu-text-color: #bfcbd9;
+
+  --left-menu-text-active-color: #fff;
+
+  --left-menu-collapse-bg-active-color: var(--el-color-primary);
+  /* left menu end */
+
+  /* logo start */
+  --logo-height: 50px;
+
+  --logo-title-text-color: #fff;
+  /* logo end */
+
+  /* header start */
+  --top-header-bg-color: '#fff';
+
+  --top-header-text-color: 'inherit';
+
+  --top-header-hover-color: #f6f6f6;
+
+  --top-tool-height: var(--logo-height);
+
+  --top-tool-p-x: 0;
+
+  --tags-view-height: 35px;
+  /* header start */
+
+  /* tab menu start */
+  --tab-menu-max-width: 80px;
+
+  --tab-menu-min-width: 30px;
+
+  --tab-menu-collapse-height: 36px;
+  /* tab menu end */
+
+  --app-content-padding: 20px;
+
+  --app-content-bg-color: #f5f7f9;
+
+  --app-footer-height: 50px;
+
+  --transition-time-02: 0.2s;
+}
+
+.dark {
+  --app-content-bg-color: var(--el-bg-color);
+}
+
+html,
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+:after,
+:before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
diff --git a/marketing-ui/admin-ui/src/styles/variables.scss b/marketing-ui/admin-ui/src/styles/variables.scss
new file mode 100644
index 0000000..00b66f1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/styles/variables.scss
@@ -0,0 +1,4 @@
+// 命名空间
+$namespace: v;
+// el命名空间
+$elNamespace: el;
diff --git a/marketing-ui/admin-ui/src/types/auto-components.d.ts b/marketing-ui/admin-ui/src/types/auto-components.d.ts
new file mode 100644
index 0000000..0f4ef16
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/auto-components.d.ts
@@ -0,0 +1,179 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    AppLinkInput: typeof import('./../components/AppLinkInput/index.vue')['default']
+    AppLinkSelectDialog: typeof import('./../components/AppLinkInput/AppLinkSelectDialog.vue')['default']
+    Backtop: typeof import('./../components/Backtop/src/Backtop.vue')['default']
+    BoundaryEventTimer: typeof import('./../components/bpmnProcessDesigner/package/penal/custom-config/components/BoundaryEventTimer.vue')['default']
+    CallActivity: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue')['default']
+    CardTitle: typeof import('./../components/Card/src/CardTitle.vue')['default']
+    ChildProcessNode: typeof import('./../components/SimpleProcessDesignerV2/src/nodes/ChildProcessNode.vue')['default']
+    ChildProcessNodeConfig: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/ChildProcessNodeConfig.vue')['default']
+    ColorInput: typeof import('./../components/ColorInput/index.vue')['default']
+    ComponentContainer: typeof import('./../components/DiyEditor/components/ComponentContainer.vue')['default']
+    ComponentContainerProperty: typeof import('./../components/DiyEditor/components/ComponentContainerProperty.vue')['default']
+    ComponentLibrary: typeof import('./../components/DiyEditor/components/ComponentLibrary.vue')['default']
+    Condition: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/components/Condition.vue')['default']
+    ConditionDialog: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue')['default']
+    ConditionNodeConfig: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue')['default']
+    ConfigGlobal: typeof import('./../components/ConfigGlobal/src/ConfigGlobal.vue')['default']
+    ContentDetailWrap: typeof import('./../components/ContentDetailWrap/src/ContentDetailWrap.vue')['default']
+    ContentWrap: typeof import('./../components/ContentWrap/src/ContentWrap.vue')['default']
+    CopperModal: typeof import('./../components/Cropper/src/CopperModal.vue')['default']
+    CopyTaskNode: typeof import('./../components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue')['default']
+    CopyTaskNodeConfig: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue')['default']
+    CountTo: typeof import('./../components/CountTo/src/CountTo.vue')['default']
+    Crontab: typeof import('./../components/Crontab/src/Crontab.vue')['default']
+    Cropper: typeof import('./../components/Cropper/src/Cropper.vue')['default']
+    CropperAvatar: typeof import('./../components/Cropper/src/CropperAvatar.vue')['default']
+    DelayTimerNode: typeof import('./../components/SimpleProcessDesignerV2/src/nodes/DelayTimerNode.vue')['default']
+    DelayTimerNodeConfig: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/DelayTimerNodeConfig.vue')['default']
+    DeptSelectForm: typeof import('./../components/DeptSelectForm/index.vue')['default']
+    Descriptions: typeof import('./../components/Descriptions/src/Descriptions.vue')['default']
+    DescriptionsItemLabel: typeof import('./../components/Descriptions/src/DescriptionsItemLabel.vue')['default']
+    Dialog: typeof import('./../components/Dialog/src/Dialog.vue')['default']
+    DictSelect: typeof import('./../components/FormCreate/src/components/DictSelect.vue')['default']
+    DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
+    DiyEditor: typeof import('./../components/DiyEditor/index.vue')['default']
+    DocAlert: typeof import('./../components/DocAlert/index.vue')['default']
+    Draggable: typeof import('./../components/Draggable/index.vue')['default']
+    Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
+    Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElementBaseInfo: typeof import('./../components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue')['default']
+    ElementCustomConfig: typeof import('./../components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue')['default']
+    ElementForm: typeof import('./../components/bpmnProcessDesigner/package/penal/form/ElementForm.vue')['default']
+    ElementListeners: typeof import('./../components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue')['default']
+    ElementMultiInstance: typeof import('./../components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue')['default']
+    ElementOtherConfig: typeof import('./../components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue')['default']
+    ElementProperties: typeof import('./../components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue')['default']
+    ElementTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/ElementTask.vue')['default']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
+    ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTableV2: typeof import('element-plus/es')['ElTableV2']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
+    EndEventNode: typeof import('./../components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue')['default']
+    Error: typeof import('./../components/Error/src/Error.vue')['default']
+    ExclusiveNode: typeof import('./../components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue')['default']
+    FlowCondition: typeof import('./../components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue')['default']
+    Form: typeof import('./../components/Form/src/Form.vue')['default']
+    Highlight: typeof import('./../components/Highlight/src/Highlight.vue')['default']
+    HttpRequestParamSetting: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestParamSetting.vue')['default']
+    HttpRequestSetting: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue')['default']
+    Icon: typeof import('./../components/Icon/src/Icon.vue')['default']
+    IconSelect: typeof import('./../components/Icon/src/IconSelect.vue')['default']
+    IFrame: typeof import('./../components/IFrame/src/IFrame.vue')['default']
+    ImageViewer: typeof import('./../components/ImageViewer/src/ImageViewer.vue')['default']
+    InclusiveNode: typeof import('./../components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue')['default']
+    Infotip: typeof import('./../components/Infotip/src/Infotip.vue')['default']
+    InputPassword: typeof import('./../components/InputPassword/src/InputPassword.vue')['default']
+    InputWithColor: typeof import('./../components/InputWithColor/index.vue')['default']
+    MagicCubeEditor: typeof import('./../components/MagicCubeEditor/index.vue')['default']
+    MarkdownView: typeof import('./../components/MarkdownView/index.vue')['default']
+    NodeHandler: typeof import('./../components/SimpleProcessDesignerV2/src/NodeHandler.vue')['default']
+    OperateLogV2: typeof import('./../components/OperateLogV2/src/OperateLogV2.vue')['default']
+    Pagination: typeof import('./../components/Pagination/index.vue')['default']
+    ParallelNode: typeof import('./../components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue')['default']
+    ProcessDesigner: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue')['default']
+    ProcessExpressionDialog: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue')['default']
+    ProcessListenerDialog: typeof import('./../components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue')['default']
+    ProcessNodeTree: typeof import('./../components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue')['default']
+    ProcessPalette: typeof import('./../components/bpmnProcessDesigner/package/palette/ProcessPalette.vue')['default']
+    ProcessViewer: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessViewer.vue')['default']
+    PropertiesPanel: typeof import('./../components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue')['default']
+    Qrcode: typeof import('./../components/Qrcode/src/Qrcode.vue')['default']
+    ReceiveTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterNode: typeof import('./../components/SimpleProcessDesignerV2/src/nodes/RouterNode.vue')['default']
+    RouterNodeConfig: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/RouterNodeConfig.vue')['default']
+    RouterSearch: typeof import('./../components/RouterSearch/index.vue')['default']
+    RouterView: typeof import('vue-router')['RouterView']
+    ScriptTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue')['default']
+    Search: typeof import('./../components/Search/src/Search.vue')['default']
+    ServiceTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/ServiceTask.vue')['default']
+    ShortcutDateRangePicker: typeof import('./../components/ShortcutDateRangePicker/index.vue')['default']
+    SignalAndMessage: typeof import('./../components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue')['default']
+    SimpleProcessDesigner: typeof import('./../components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue')['default']
+    SimpleProcessModel: typeof import('./../components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue')['default']
+    SimpleProcessViewer: typeof import('./../components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue')['default']
+    StartUserNode: typeof import('./../components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue')['default']
+    StartUserNodeConfig: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue')['default']
+    Sticky: typeof import('./../components/Sticky/src/Sticky.vue')['default']
+    SummaryCard: typeof import('./../components/SummaryCard/index.vue')['default']
+    Table: typeof import('./../components/Table/src/Table.vue')['default']
+    TableSelectForm: typeof import('./../components/Table/src/TableSelectForm.vue')['default']
+    Tinyflow: typeof import('./../components/Tinyflow/Tinyflow.vue')['default']
+    Tooltip: typeof import('./../components/Tooltip/src/Tooltip.vue')['default']
+    TriggerNode: typeof import('./../components/SimpleProcessDesignerV2/src/nodes/TriggerNode.vue')['default']
+    TriggerNodeConfig: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue')['default']
+    UploadFile: typeof import('./../components/UploadFile/src/UploadFile.vue')['default']
+    UploadImg: typeof import('./../components/UploadFile/src/UploadImg.vue')['default']
+    UploadImgs: typeof import('./../components/UploadFile/src/UploadImgs.vue')['default']
+    UserSelectForm: typeof import('./../components/UserSelectForm/index.vue')['default']
+    UserTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue')['default']
+    UserTaskCustomConfig: typeof import('./../components/bpmnProcessDesigner/package/penal/custom-config/components/UserTaskCustomConfig.vue')['default']
+    UserTaskListener: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/components/UserTaskListener.vue')['default']
+    UserTaskListeners: typeof import('./../components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue')['default']
+    UserTaskNode: typeof import('./../components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue')['default']
+    UserTaskNodeConfig: typeof import('./../components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue')['default']
+    Verify: typeof import('./../components/Verifition/src/Verify.vue')['default']
+    VerifyPoints: typeof import('./../components/Verifition/src/Verify/VerifyPoints.vue')['default']
+    VerifySlide: typeof import('./../components/Verifition/src/Verify/VerifySlide.vue')['default']
+    VerticalButtonGroup: typeof import('./../components/VerticalButtonGroup/index.vue')['default']
+    XButton: typeof import('./../components/XButton/src/XButton.vue')['default']
+    XTextButton: typeof import('./../components/XButton/src/XTextButton.vue')['default']
+  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}
diff --git a/marketing-ui/admin-ui/src/types/configGlobal.d.ts b/marketing-ui/admin-ui/src/types/configGlobal.d.ts
new file mode 100644
index 0000000..f6d7b3c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/configGlobal.d.ts
@@ -0,0 +1,4 @@
+import { ElementPlusSize } from './elementPlus'
+export interface ConfigGlobalTypes {
+  size?: ElementPlusSize
+}
diff --git a/marketing-ui/admin-ui/src/types/contextMenu.d.ts b/marketing-ui/admin-ui/src/types/contextMenu.d.ts
new file mode 100644
index 0000000..0738d0e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/contextMenu.d.ts
@@ -0,0 +1,7 @@
+export type contextMenuSchema = {
+  disabled?: boolean
+  divided?: boolean
+  icon?: string
+  label: string
+  command?: (item: contextMenuSchema) => void
+}
diff --git a/marketing-ui/admin-ui/src/types/descriptions.d.ts b/marketing-ui/admin-ui/src/types/descriptions.d.ts
new file mode 100644
index 0000000..af6d68c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/descriptions.d.ts
@@ -0,0 +1,14 @@
+export interface DescriptionsSchema {
+  span?: number // 占多少分
+  field: string // 字段名
+  label?: string // label名
+  mappedField?: string // 字段映射
+  width?: string | number
+  minWidth?: string | number
+  align?: 'left' | 'center' | 'right'
+  labelAlign?: 'left' | 'center' | 'right'
+  className?: string
+  labelClassName?: string
+  dateFormat?: string // add by 星语：支持时间的格式化
+  dictType?: string // add by 星语：支持 dict 字典数据
+}
diff --git a/marketing-ui/admin-ui/src/types/elementPlus.d.ts b/marketing-ui/admin-ui/src/types/elementPlus.d.ts
new file mode 100644
index 0000000..2c6b76e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/elementPlus.d.ts
@@ -0,0 +1,3 @@
+export type ElementPlusSize = 'default' | 'small' | 'large'
+
+export type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger'
diff --git a/marketing-ui/admin-ui/src/types/form.d.ts b/marketing-ui/admin-ui/src/types/form.d.ts
new file mode 100644
index 0000000..980c8cc
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/form.d.ts
@@ -0,0 +1,44 @@
+import type { CSSProperties } from 'vue'
+import { ColProps, ComponentProps, ComponentName } from '@/types/components'
+import type { AxiosPromise } from 'axios'
+
+export type FormSetPropsType = {
+  field: string
+  path: string
+  value: any
+}
+
+export type FormValueType = string | number | string[] | number[] | boolean | undefined | null
+
+export type FormItemProps = {
+  labelWidth?: string | number
+  required?: boolean
+  rules?: Recordable
+  error?: string
+  showMessage?: boolean
+  inlineMessage?: boolean
+  style?: CSSProperties
+}
+
+export type FormSchema = {
+  // 唯一值
+  field: string
+  // 标题
+  label?: string
+  // 提示
+  labelMessage?: string
+  // col组件属性
+  colProps?: ColProps
+  // 表单组件属性，slots对应的是表单组件的插槽，规则：${field}-xxx，具体可以查看element-plus文档
+  componentProps?: { slots?: Recordable } & ComponentProps
+  // formItem组件属性
+  formItemProps?: FormItemProps
+  // 渲染的组件
+  component?: ComponentName
+  // 初始值
+  value?: FormValueType
+  // 是否隐藏
+  hidden?: boolean
+  // 远程加载下拉项
+  api?: <T = any>() => AxiosPromise<T>
+}
diff --git a/marketing-ui/admin-ui/src/types/icon.d.ts b/marketing-ui/admin-ui/src/types/icon.d.ts
new file mode 100644
index 0000000..d1ffcdb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/icon.d.ts
@@ -0,0 +1,5 @@
+export interface IconTypes {
+  size?: number
+  color?: string
+  icon: string
+}
diff --git a/marketing-ui/admin-ui/src/types/infoTip.d.ts b/marketing-ui/admin-ui/src/types/infoTip.d.ts
new file mode 100644
index 0000000..6eff083
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/infoTip.d.ts
@@ -0,0 +1,4 @@
+export interface TipSchema {
+  label: string
+  keys?: string[]
+}
diff --git a/marketing-ui/admin-ui/src/types/layout.d.ts b/marketing-ui/admin-ui/src/types/layout.d.ts
new file mode 100644
index 0000000..cad3e2a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/layout.d.ts
@@ -0,0 +1 @@
+export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'
diff --git a/marketing-ui/admin-ui/src/types/localeDropdown.d.ts b/marketing-ui/admin-ui/src/types/localeDropdown.d.ts
new file mode 100644
index 0000000..c749dce
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/localeDropdown.d.ts
@@ -0,0 +1,10 @@
+export interface Language {
+  el: Recordable
+  name: string
+}
+
+export interface LocaleDropdownType {
+  lang: LocaleType
+  name?: string
+  elLocale?: Language
+}
diff --git a/marketing-ui/admin-ui/src/types/qrcode.d.ts b/marketing-ui/admin-ui/src/types/qrcode.d.ts
new file mode 100644
index 0000000..86cdf0b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/qrcode.d.ts
@@ -0,0 +1,9 @@
+export interface QrcodeLogo {
+  src?: string
+  logoSize?: number
+  bgColor?: string
+  borderSize?: number
+  crossOrigin?: string
+  borderRadius?: number
+  logoRadius?: number
+}
diff --git a/marketing-ui/admin-ui/src/types/table.d.ts b/marketing-ui/admin-ui/src/types/table.d.ts
new file mode 100644
index 0000000..9cb4205
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/table.d.ts
@@ -0,0 +1,44 @@
+export type TableColumn = {
+  field: string
+  label?: string
+  width?: number | string
+  fixed?: 'left' | 'right'
+  children?: TableColumn[]
+} & Recordable
+
+export type VxeTableColumn = {
+  field: string
+  title?: string
+  children?: TableColumn[]
+} & Recordable
+
+export type TableSlotDefault = {
+  row: Recordable
+  column: TableColumn
+  $index: number
+} & Recordable
+
+export interface Pagination {
+  small?: boolean
+  background?: boolean
+  pageSize?: number
+  defaultPageSize?: number
+  total?: number
+  pageCount?: number
+  pagerCount?: number
+  currentPage?: number
+  defaultCurrentPage?: number
+  layout?: string
+  pageSizes?: number[]
+  popperClass?: string
+  prevText?: string
+  nextText?: string
+  disabled?: boolean
+  hideOnSinglePage?: boolean
+}
+
+export interface TableSetPropsType {
+  field: string
+  path: string
+  value: any
+}
diff --git a/marketing-ui/admin-ui/src/types/theme.d.ts b/marketing-ui/admin-ui/src/types/theme.d.ts
new file mode 100644
index 0000000..ad649b0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/types/theme.d.ts
@@ -0,0 +1,16 @@
+export type ThemeTypes = {
+  elColorPrimary?: string
+  leftMenuBorderColor?: string
+  leftMenuBgColor?: string
+  leftMenuBgLightColor?: string
+  leftMenuBgActiveColor?: string
+  leftMenuCollapseBgActiveColor?: string
+  leftMenuTextColor?: string
+  leftMenuTextActiveColor?: string
+  logoTitleTextColor?: string
+  logoBorderColor?: string
+  topHeaderBgColor?: string
+  topHeaderTextColor?: string
+  topHeaderHoverColor?: string
+  topToolBorderColor?: string
+}
diff --git a/marketing-ui/admin-ui/src/utils/Logger.ts b/marketing-ui/admin-ui/src/utils/Logger.ts
new file mode 100644
index 0000000..ca58df2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/Logger.ts
@@ -0,0 +1,100 @@
+const isArray = function (obj: any): boolean {
+  return Object.prototype.toString.call(obj) === '[object Array]'
+}
+
+const Logger = () => {}
+
+Logger.typeColor = function (type: string) {
+  let color = ''
+  switch (type) {
+    case 'primary':
+      color = '#2d8cf0'
+      break
+    case 'success':
+      color = '#19be6b'
+      break
+    case 'info':
+      color = '#909399'
+      break
+    case 'warn':
+      color = '#ff9900'
+      break
+    case 'error':
+      color = '#f03f14'
+      break
+    default:
+      color = '#35495E'
+      break
+  }
+  return color
+}
+
+Logger.print = function (type = 'default', text: any, back = false) {
+  if (typeof text === 'object') {
+    // 如果是對象則調用打印對象方式
+    isArray(text) ? console.table(text) : console.dir(text)
+    return
+  }
+  if (back) {
+    // 如果是打印帶背景圖的
+    console.log(
+      `%c ${text} `,
+      `background:${Logger.typeColor(type)}; padding: 2px; border-radius: 4px; color: #fff;`
+    )
+  } else {
+    console.log(
+      `%c ${text} `,
+      `border: 1px solid ${Logger.typeColor(type)};
+        padding: 2px; border-radius: 4px;
+        color: ${Logger.typeColor(type)};`
+    )
+  }
+}
+
+Logger.printBack = function (type = 'primary', text) {
+  this.print(type, text, true)
+}
+
+Logger.pretty = function (type = 'primary', title, text) {
+  if (typeof text === 'object') {
+    console.group('Console Group', title)
+    console.log(
+      `%c ${title}`,
+      `background:${Logger.typeColor(type)};border:1px solid ${Logger.typeColor(type)};
+        padding: 1px; border-radius: 4px; color: #fff;`
+    )
+    isArray(text) ? console.table(text) : console.dir(text)
+    console.groupEnd()
+    return
+  }
+  console.log(
+    `%c ${title} %c ${text} %c`,
+    `background:${Logger.typeColor(type)};border:1px solid ${Logger.typeColor(type)};
+      padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
+    `border:1px solid ${Logger.typeColor(type)};
+      padding: 1px; border-radius: 0 4px 4px 0; color: ${Logger.typeColor(type)};`,
+    'background:transparent'
+  )
+}
+
+Logger.prettyPrimary = function (title, ...text) {
+  text.forEach((t) => this.pretty('primary', title, t))
+}
+
+Logger.prettySuccess = function (title, ...text) {
+  text.forEach((t) => this.pretty('success', title, t))
+}
+
+Logger.prettyWarn = function (title, ...text) {
+  text.forEach((t) => this.pretty('warn', title, t))
+}
+
+Logger.prettyError = function (title, ...text) {
+  text.forEach((t) => this.pretty('error', title, t))
+}
+
+Logger.prettyInfo = function (title, ...text) {
+  text.forEach((t) => this.pretty('info', title, t))
+}
+
+export default Logger
diff --git a/marketing-ui/admin-ui/src/utils/auth.ts b/marketing-ui/admin-ui/src/utils/auth.ts
new file mode 100644
index 0000000..daeb3fa
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/auth.ts
@@ -0,0 +1,63 @@
+import { useCache, CACHE_KEY } from '@/hooks/web/useCache'
+import { TokenType } from '@/api/login/types'
+import { decrypt, encrypt } from '@/utils/jsencrypt'
+
+const { wsCache } = useCache()
+
+const AccessTokenKey = 'ACCESS_TOKEN'
+const RefreshTokenKey = 'REFRESH_TOKEN'
+
+// 获取token
+export const getAccessToken = () => {
+  // 此处与TokenKey相同，此写法解决初始化时Cookies中不存在TokenKey报错
+  const accessToken = wsCache.get(AccessTokenKey)
+  return accessToken ? accessToken : wsCache.get('ACCESS_TOKEN')
+}
+
+// 刷新token
+export const getRefreshToken = () => {
+  return wsCache.get(RefreshTokenKey)
+}
+
+// 设置token
+export const setToken = (token: TokenType) => {
+  wsCache.set(RefreshTokenKey, token.refreshToken)
+  wsCache.set(AccessTokenKey, token.accessToken)
+}
+
+// 删除token
+export const removeToken = () => {
+  wsCache.delete(AccessTokenKey)
+  wsCache.delete(RefreshTokenKey)
+}
+
+/** 格式化token（jwt格式） */
+export const formatToken = (token: string): string => {
+  return 'Bearer ' + token
+}
+// ========== 账号相关 ==========
+
+export type LoginFormType = {
+  tenantName: string
+  username: string
+  password: string
+  rememberMe: boolean
+}
+
+export const getLoginForm = () => {
+  const loginForm: LoginFormType = wsCache.get(CACHE_KEY.LoginForm)
+  if (loginForm) {
+    loginForm.password = decrypt(loginForm.password) as string
+  }
+  return loginForm
+}
+
+export const setLoginForm = (loginForm: LoginFormType) => {
+  loginForm.password = encrypt(loginForm.password) as string
+  wsCache.set(CACHE_KEY.LoginForm, loginForm, { exp: 30 * 24 * 60 * 60 })
+}
+
+export const removeLoginForm = () => {
+  wsCache.delete(CACHE_KEY.LoginForm)
+}
+
diff --git a/marketing-ui/admin-ui/src/utils/color.ts b/marketing-ui/admin-ui/src/utils/color.ts
new file mode 100644
index 0000000..13424e5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/color.ts
@@ -0,0 +1,174 @@
+/**
+ * 判断是否 十六进制颜色值.
+ * 输入形式可为 #fff000 #f00
+ *
+ * @param   String  color   十六进制颜色值
+ * @return  Boolean
+ */
+export const isHexColor = (color: string) => {
+  const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-f]{6})$/
+  return reg.test(color)
+}
+
+/**
+ * RGB 颜色值转换为 十六进制颜色值.
+ * r, g, 和 b 需要在 [0, 255] 范围内
+ *
+ * @return  String          类似#ff00ff
+ * @param r
+ * @param g
+ * @param b
+ */
+export const rgbToHex = (r: number, g: number, b: number) => {
+  // tslint:disable-next-line:no-bitwise
+  const hex = ((r << 16) | (g << 8) | b).toString(16)
+  return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex
+}
+
+/**
+ * Transform a HEX color to its RGB representation
+ * @param {string} hex The color to transform
+ * @returns The RGB representation of the passed color
+ */
+export const hexToRGB = (hex: string, opacity?: number) => {
+  let sHex = hex.toLowerCase()
+  if (isHexColor(hex)) {
+    if (sHex.length === 4) {
+      let sColorNew = '#'
+      for (let i = 1; i < 4; i += 1) {
+        sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1))
+      }
+      sHex = sColorNew
+    }
+    const sColorChange: number[] = []
+    for (let i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sHex.slice(i, i + 2)))
+    }
+    return opacity
+      ? 'RGBA(' + sColorChange.join(',') + ',' + opacity + ')'
+      : 'RGB(' + sColorChange.join(',') + ')'
+  }
+  return sHex
+}
+
+export const colorIsDark = (color: string) => {
+  if (!isHexColor(color)) return
+  const [r, g, b] = hexToRGB(color)
+    .replace(/(?:\(|\)|rgb|RGB)*/g, '')
+    .split(',')
+    .map((item) => Number(item))
+  return r * 0.299 + g * 0.578 + b * 0.114 < 192
+}
+
+/**
+ * Darkens a HEX color given the passed percentage
+ * @param {string} color The color to process
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The HEX representation of the processed color
+ */
+export const darken = (color: string, amount: number) => {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+  amount = Math.trunc((255 * amount) / 100)
+  return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
+    color.substring(2, 4),
+    amount
+  )}${subtractLight(color.substring(4, 6), amount)}`
+}
+
+/**
+ * Lightens a 6 char HEX color according to the passed percentage
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed color represented as HEX
+ */
+export const lighten = (color: string, amount: number) => {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+  amount = Math.trunc((255 * amount) / 100)
+  return `#${addLight(color.substring(0, 2), amount)}${addLight(
+    color.substring(2, 4),
+    amount
+  )}${addLight(color.substring(4, 6), amount)}`
+}
+
+/* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
+/**
+ * Sums the passed percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+const addLight = (color: string, amount: number) => {
+  const cc = parseInt(color, 16) + amount
+  const c = cc > 255 ? 255 : cc
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
+}
+
+/**
+ * Calculates luminance of an rgb color
+ * @param {number} r red
+ * @param {number} g green
+ * @param {number} b blue
+ */
+const luminanace = (r: number, g: number, b: number) => {
+  const a = [r, g, b].map((v) => {
+    v /= 255
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)
+  })
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722
+}
+
+/**
+ * Calculates contrast between two rgb colors
+ * @param {string} rgb1 rgb color 1
+ * @param {string} rgb2 rgb color 2
+ */
+const contrast = (rgb1: string[], rgb2: number[]) => {
+  return (
+    (luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) /
+    (luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05)
+  )
+}
+
+/**
+ * Determines what the best text color is (black or white) based con the contrast with the background
+ * @param hexColor - Last selected color by the user
+ */
+export const calculateBestTextColor = (hexColor: string) => {
+  const rgbColor = hexToRGB(hexColor.substring(1))
+  const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0])
+
+  return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF'
+}
+
+/**
+ * Subtracts the indicated percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+const subtractLight = (color: string, amount: number) => {
+  const cc = parseInt(color, 16) - amount
+  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'
+]
diff --git a/marketing-ui/admin-ui/src/utils/constants.ts b/marketing-ui/admin-ui/src/utils/constants.ts
new file mode 100644
index 0000000..f673bdc
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/constants.ts
@@ -0,0 +1,465 @@
+/**
+ * Created by 芋道源码
+ *
+ * 枚举类
+ */
+
+// ========== COMMON 模块 ==========
+// 全局通用状态枚举
+export const CommonStatusEnum = {
+  ENABLE: 0, // 开启
+  DISABLE: 1 // 禁用
+}
+
+// 全局用户类型枚举
+export const UserTypeEnum = {
+  MEMBER: 1, // 会员
+  ADMIN: 2 // 管理员
+}
+
+// ========== SYSTEM 模块 ==========
+/**
+ * 菜单的类型枚举
+ */
+export const SystemMenuTypeEnum = {
+  DIR: 1, // 目录
+  MENU: 2, // 菜单
+  BUTTON: 3 // 按钮
+}
+
+/**
+ * 角色的类型枚举
+ */
+export const SystemRoleTypeEnum = {
+  SYSTEM: 1, // 内置角色
+  CUSTOM: 2 // 自定义角色
+}
+
+/**
+ * 数据权限的范围枚举
+ */
+export const SystemDataScopeEnum = {
+  ALL: 1, // 全部数据权限
+  DEPT_CUSTOM: 2, // 指定部门数据权限
+  DEPT_ONLY: 3, // 部门数据权限
+  DEPT_AND_CHILD: 4, // 部门及以下数据权限
+  DEPT_SELF: 5 // 仅本人数据权限
+}
+
+/**
+ * 用户的社交平台的类型枚举
+ */
+export const SystemUserSocialTypeEnum = {
+  DINGTALK: {
+    title: '钉钉',
+    type: 20,
+    source: 'dingtalk',
+    img: 'https://s1.ax1x.com/2022/05/22/OzMDRs.png'
+  },
+  WECHAT_ENTERPRISE: {
+    title: '企业微信',
+    type: 30,
+    source: 'wechat_enterprise',
+    img: 'https://s1.ax1x.com/2022/05/22/OzMrzn.png'
+  }
+}
+
+// ========== INFRA 模块 ==========
+/**
+ * 代码生成模板类型
+ */
+export const InfraCodegenTemplateTypeEnum = {
+  CRUD: 1, // 基础 CRUD
+  TREE: 2, // 树形 CRUD
+  SUB: 3 // 主子表 CRUD
+}
+
+/**
+ * 任务状态的枚举
+ */
+export const InfraJobStatusEnum = {
+  INIT: 0, // 初始化中
+  NORMAL: 1, // 运行中
+  STOP: 2 // 暂停运行
+}
+
+/**
+ * API 异常数据的处理状态
+ */
+export const InfraApiErrorLogProcessStatusEnum = {
+  INIT: 0, // 未处理
+  DONE: 1, // 已处理
+  IGNORE: 2 // 已忽略
+}
+
+// ========== PAY 模块 ==========
+/**
+ * 支付渠道枚举
+ */
+export const PayChannelEnum = {
+  WX_PUB: {
+    code: 'wx_pub',
+    name: '微信 JSAPI 支付'
+  },
+  WX_LITE: {
+    code: 'wx_lite',
+    name: '微信小程序支付'
+  },
+  WX_APP: {
+    code: 'wx_app',
+    name: '微信 APP 支付'
+  },
+  WX_NATIVE: {
+    code: 'wx_native',
+    name: '微信 Native 支付'
+  },
+  WX_WAP: {
+    code: 'wx_wap',
+    name: '微信 WAP 网站支付'
+  },
+  WX_BAR: {
+    code: 'wx_bar',
+    name: '微信条码支付'
+  },
+  ALIPAY_PC: {
+    code: 'alipay_pc',
+    name: '支付宝 PC 网站支付'
+  },
+  ALIPAY_WAP: {
+    code: 'alipay_wap',
+    name: '支付宝 WAP 网站支付'
+  },
+  ALIPAY_APP: {
+    code: 'alipay_app',
+    name: '支付宝 APP 支付'
+  },
+  ALIPAY_QR: {
+    code: 'alipay_qr',
+    name: '支付宝扫码支付'
+  },
+  ALIPAY_BAR: {
+    code: 'alipay_bar',
+    name: '支付宝条码支付'
+  },
+  WALLET: {
+    code: 'wallet',
+    name: '钱包支付'
+  },
+  MOCK: {
+    code: 'mock',
+    name: '模拟支付'
+  }
+}
+
+/**
+ * 支付的展示模式每局
+ */
+export const PayDisplayModeEnum = {
+  URL: {
+    mode: 'url'
+  },
+  IFRAME: {
+    mode: 'iframe'
+  },
+  FORM: {
+    mode: 'form'
+  },
+  QR_CODE: {
+    mode: 'qr_code'
+  },
+  APP: {
+    mode: 'app'
+  }
+}
+
+/**
+ * 支付类型枚举
+ */
+export const PayType = {
+  WECHAT: 'WECHAT',
+  ALIPAY: 'ALIPAY',
+  MOCK: 'MOCK'
+}
+
+/**
+ * 支付订单状态枚举
+ */
+export const PayOrderStatusEnum = {
+  WAITING: {
+    status: 0,
+    name: '未支付'
+  },
+  SUCCESS: {
+    status: 10,
+    name: '已支付'
+  },
+  CLOSED: {
+    status: 20,
+    name: '未支付'
+  }
+}
+
+// ========== MALL - 商品模块 ==========
+/**
+ * 商品 SPU 状态
+ */
+export const ProductSpuStatusEnum = {
+  RECYCLE: {
+    status: -1,
+    name: '回收站'
+  },
+  DISABLE: {
+    status: 0,
+    name: '下架'
+  },
+  ENABLE: {
+    status: 1,
+    name: '上架'
+  }
+}
+
+// ========== MALL - 营销模块 ==========
+/**
+ * 优惠劵模板的有限期类型的枚举
+ */
+export const CouponTemplateValidityTypeEnum = {
+  DATE: {
+    type: 1,
+    name: '固定日期可用'
+  },
+  TERM: {
+    type: 2,
+    name: '领取之后可用'
+  }
+}
+
+/**
+ * 优惠劵模板的领取方式的枚举
+ */
+export const CouponTemplateTakeTypeEnum = {
+  USER: {
+    type: 1,
+    name: '直接领取'
+  },
+  ADMIN: {
+    type: 2,
+    name: '指定发放'
+  },
+  REGISTER: {
+    type: 3,
+    name: '新人券'
+  }
+}
+
+/**
+ * 营销的商品范围枚举
+ */
+export const PromotionProductScopeEnum = {
+  ALL: {
+    scope: 1,
+    name: '通用劵'
+  },
+  SPU: {
+    scope: 2,
+    name: '商品劵'
+  },
+  CATEGORY: {
+    scope: 3,
+    name: '品类劵'
+  }
+}
+
+/**
+ * 营销的条件类型枚举
+ */
+export const PromotionConditionTypeEnum = {
+  PRICE: {
+    type: 10,
+    name: '满 N 元'
+  },
+  COUNT: {
+    type: 20,
+    name: '满 N 件'
+  }
+}
+
+/**
+ * 优惠类型枚举
+ */
+export const PromotionDiscountTypeEnum = {
+  PRICE: {
+    type: 1,
+    name: '满减'
+  },
+  PERCENT: {
+    type: 2,
+    name: '折扣'
+  }
+}
+
+// ========== MALL - 交易模块 ==========
+/**
+ * 分销关系绑定模式枚举
+ */
+export const BrokerageBindModeEnum = {
+  ANYTIME: {
+    mode: 1,
+    name: '首次绑定'
+  },
+  REGISTER: {
+    mode: 2,
+    name: '注册绑定'
+  },
+  OVERRIDE: {
+    mode: 3,
+    name: '覆盖绑定'
+  }
+}
+/**
+ * 分佣模式枚举
+ */
+export const BrokerageEnabledConditionEnum = {
+  ALL: {
+    condition: 1,
+    name: '人人分销'
+  },
+  ADMIN: {
+    condition: 2,
+    name: '指定分销'
+  }
+}
+/**
+ * 佣金记录业务类型枚举
+ */
+export const BrokerageRecordBizTypeEnum = {
+  ORDER: {
+    type: 1,
+    name: '获得推广佣金'
+  },
+  WITHDRAW: {
+    type: 2,
+    name: '提现申请'
+  }
+}
+/**
+ * 佣金提现状态枚举
+ */
+export const BrokerageWithdrawStatusEnum = {
+  AUDITING: {
+    status: 0,
+    name: '审核中'
+  },
+  AUDIT_SUCCESS: {
+    status: 10,
+    name: '审核通过'
+  },
+  AUDIT_FAIL: {
+    status: 20,
+    name: '审核不通过'
+  },
+  WITHDRAW_SUCCESS: {
+    status: 11,
+    name: '提现成功'
+  },
+  WITHDRAW_FAIL: {
+    status: 21,
+    name: '提现失败'
+  }
+}
+/**
+ * 佣金提现类型枚举
+ */
+export const BrokerageWithdrawTypeEnum = {
+  WALLET: {
+    type: 1,
+    name: '钱包'
+  },
+  BANK: {
+    type: 2,
+    name: '银行卡'
+  },
+  WECHAT: {
+    type: 3,
+    name: '微信'
+  },
+  ALIPAY: {
+    type: 4,
+    name: '支付宝'
+  }
+}
+
+/**
+ * 配送方式枚举
+ */
+export const DeliveryTypeEnum = {
+  EXPRESS: {
+    type: 1,
+    name: '快递发货'
+  },
+  PICK_UP: {
+    type: 2,
+    name: '到店自提'
+  }
+}
+/**
+ * 交易订单 - 状态
+ */
+export const TradeOrderStatusEnum = {
+  UNPAID: {
+    status: 0,
+    name: '待支付'
+  },
+  UNDELIVERED: {
+    status: 10,
+    name: '待发货'
+  },
+  DELIVERED: {
+    status: 20,
+    name: '已发货'
+  },
+  COMPLETED: {
+    status: 30,
+    name: '已完成'
+  },
+  CANCELED: {
+    status: 40,
+    name: '已取消'
+  }
+}
+
+// ========== ERP - 企业资源计划 ==========
+
+export const ErpBizType = {
+  PURCHASE_ORDER: 10,
+  PURCHASE_IN: 11,
+  PURCHASE_RETURN: 12,
+  SALE_ORDER: 20,
+  SALE_OUT: 21,
+  SALE_RETURN: 22
+}
+
+// ========== BPM 模块 ==========
+
+export const BpmModelType = {
+  BPMN: 10, // BPMN 设计器
+  SIMPLE: 20 // 简易设计器
+}
+
+export const BpmModelFormType = {
+  NORMAL: 10, // 流程表单
+  CUSTOM: 20 // 业务表单
+}
+
+export const BpmProcessInstanceStatus = {
+  NOT_START: -1, // 未开始
+  RUNNING: 1, // 审批中
+  APPROVE: 2, // 审批通过
+  REJECT: 3, // 审批不通过
+  CANCEL: 4 // 已取消
+}
+
+export const BpmAutoApproveType = {
+  NONE: 0, // 不自动通过
+  APPROVE_ALL: 1, // 仅审批一次，后续重复的审批节点均自动通过
+  APPROVE_SEQUENT: 2, // 仅针对连续审批的节点自动通过
+}
diff --git a/marketing-ui/admin-ui/src/utils/dateUtil.ts b/marketing-ui/admin-ui/src/utils/dateUtil.ts
new file mode 100644
index 0000000..316b870
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/dateUtil.ts
@@ -0,0 +1,18 @@
+/**
+ * Independent time operation tool to facilitate subsequent switch to dayjs
+ */
+// TODO 芋艿：【锁屏】可能后面删除掉
+import dayjs from 'dayjs'
+
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
+const DATE_FORMAT = 'YYYY-MM-DD'
+
+export function formatToDateTime(date?: dayjs.ConfigType, format = DATE_TIME_FORMAT): string {
+  return dayjs(date).format(format)
+}
+
+export function formatToDate(date?: dayjs.ConfigType, format = DATE_FORMAT): string {
+  return dayjs(date).format(format)
+}
+
+export const dateUtil = dayjs
diff --git a/marketing-ui/admin-ui/src/utils/dict.ts b/marketing-ui/admin-ui/src/utils/dict.ts
new file mode 100644
index 0000000..083c1ef
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/dict.ts
@@ -0,0 +1,158 @@
+/**
+ * 数据字典工具类
+ */
+import { useDictStoreWithOut } from '@/store/modules/dict'
+import { ElementPlusInfoType } from '@/types/elementPlus'
+
+const dictStore = useDictStoreWithOut()
+
+/**
+ * 获取 dictType 对应的数据字典数组
+ *
+ * @param dictType 数据类型
+ * @returns {*|Array} 数据字典数组
+ */
+export interface DictDataType {
+  dictType: string
+  label: string
+  value: string | number | boolean
+  colorType: ElementPlusInfoType | ''
+  cssClass: string
+}
+
+export interface NumberDictDataType extends DictDataType {
+  value: number
+}
+
+export interface StringDictDataType extends DictDataType {
+  value: string
+}
+
+export const getDictOptions = (dictType: string) => {
+  return dictStore.getDictByType(dictType) || []
+}
+
+export const getIntDictOptions = (dictType: string): NumberDictDataType[] => {
+  // 获得通用的 DictDataType 列表
+  const dictOptions: DictDataType[] = getDictOptions(dictType)
+  // 转换成 number 类型的 NumberDictDataType 类型
+  // why 需要特殊转换：避免 IDEA 在 v-for="dict in getIntDictOptions(...)" 时，el-option 的 key 会告警
+  const dictOption: NumberDictDataType[] = []
+  dictOptions.forEach((dict: DictDataType) => {
+    dictOption.push({
+      ...dict,
+      value: parseInt(dict.value + '')
+    })
+  })
+  return dictOption
+}
+
+export const getStrDictOptions = (dictType: string) => {
+  // 获得通用的 DictDataType 列表
+  const dictOptions: DictDataType[] = getDictOptions(dictType)
+  // 转换成 string 类型的 StringDictDataType 类型
+  // why 需要特殊转换：避免 IDEA 在 v-for="dict in getStrDictOptions(...)" 时，el-option 的 key 会告警
+  const dictOption: StringDictDataType[] = []
+  dictOptions.forEach((dict: DictDataType) => {
+    dictOption.push({
+      ...dict,
+      value: dict.value + ''
+    })
+  })
+  return dictOption
+}
+
+export const getBoolDictOptions = (dictType: string) => {
+  const dictOption: DictDataType[] = []
+  const dictOptions: DictDataType[] = getDictOptions(dictType)
+  dictOptions.forEach((dict: DictDataType) => {
+    dictOption.push({
+      ...dict,
+      value: dict.value + '' === 'true'
+    })
+  })
+  return dictOption
+}
+
+/**
+ * 获取指定字典类型的指定值对应的字典对象
+ * @param dictType 字典类型
+ * @param value 字典值
+ * @return DictDataType 字典对象
+ */
+export const getDictObj = (dictType: string, value: any): DictDataType | undefined => {
+  const dictOptions: DictDataType[] = getDictOptions(dictType)
+  for (const dict of dictOptions) {
+    if (dict.value === value + '') {
+      return dict
+    }
+  }
+}
+
+/**
+ * 获得字典数据的文本展示
+ *
+ * @param dictType 字典类型
+ * @param value 字典数据的值
+ * @return 字典名称
+ */
+export const getDictLabel = (dictType: string, value: any): string => {
+  const dictOptions: DictDataType[] = getDictOptions(dictType)
+  const dictLabel = ref('')
+  dictOptions.forEach((dict: DictDataType) => {
+    if (dict.value === value + '') {
+      dictLabel.value = dict.label
+    }
+  })
+  return dictLabel.value
+}
+
+export enum DICT_TYPE {
+  USER_TYPE = 'user_type',
+  COMMON_STATUS = 'common_status',
+  TERMINAL = 'terminal', // 终端
+  DATE_INTERVAL = 'date_interval', // 数据间隔
+
+  // ========== SYSTEM 模块 ==========
+  SYSTEM_USER_SEX = 'system_user_sex',
+  SYSTEM_MENU_TYPE = 'system_menu_type',
+  SYSTEM_ROLE_TYPE = 'system_role_type',
+  SYSTEM_DATA_SCOPE = 'system_data_scope',
+  SYSTEM_NOTICE_TYPE = 'system_notice_type',
+  SYSTEM_LOGIN_TYPE = 'system_login_type',
+  SYSTEM_LOGIN_RESULT = 'system_login_result',
+  SYSTEM_SMS_CHANNEL_CODE = 'system_sms_channel_code',
+  SYSTEM_SMS_TEMPLATE_TYPE = 'system_sms_template_type',
+  SYSTEM_SMS_SEND_STATUS = 'system_sms_send_status',
+  SYSTEM_SMS_RECEIVE_STATUS = 'system_sms_receive_status',
+  SYSTEM_OAUTH2_GRANT_TYPE = 'system_oauth2_grant_type',
+  SYSTEM_MAIL_SEND_STATUS = 'system_mail_send_status',
+  SYSTEM_NOTIFY_TEMPLATE_TYPE = 'system_notify_template_type',
+  SYSTEM_SOCIAL_TYPE = 'system_social_type',
+
+  // ========== INFRA 模块 ==========
+  INFRA_BOOLEAN_STRING = 'infra_boolean_string',
+  INFRA_JOB_STATUS = 'infra_job_status',
+  INFRA_JOB_LOG_STATUS = 'infra_job_log_status',
+  INFRA_API_ERROR_LOG_PROCESS_STATUS = 'infra_api_error_log_process_status',
+  INFRA_CONFIG_TYPE = 'infra_config_type',
+  INFRA_CODEGEN_TEMPLATE_TYPE = 'infra_codegen_template_type',
+  INFRA_CODEGEN_FRONT_TYPE = 'infra_codegen_front_type',
+  INFRA_CODEGEN_SCENE = 'infra_codegen_scene',
+  INFRA_FILE_STORAGE = 'infra_file_storage',
+  INFRA_OPERATE_TYPE = 'infra_operate_type',
+
+  // ========== AI - 人工智能模块  ==========
+  AI_PLATFORM = 'ai_platform', // AI 平台
+  AI_MODEL_TYPE = 'ai_model_type', // AI 模型类型
+  AI_IMAGE_STATUS = 'ai_image_status', // AI 图片状态
+  AI_MUSIC_STATUS = 'ai_music_status', // AI 音乐状态
+  AI_GENERATE_MODE = 'ai_generate_mode', // AI 生成模式
+  AI_WRITE_TYPE = 'ai_write_type', // AI 写作类型
+  AI_WRITE_LENGTH = 'ai_write_length', // AI 写作长度
+  AI_WRITE_FORMAT = 'ai_write_format', // AI 写作格式
+  AI_WRITE_TONE = 'ai_write_tone', // AI 写作语气
+  AI_WRITE_LANGUAGE = 'ai_write_language', // AI 写作语言
+
+
+}
diff --git a/marketing-ui/admin-ui/src/utils/domUtils.ts b/marketing-ui/admin-ui/src/utils/domUtils.ts
new file mode 100644
index 0000000..dbc1989
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/domUtils.ts
@@ -0,0 +1,289 @@
+import { isServer } from './is'
+const ieVersion = isServer ? 0 : Number((document as any).documentMode)
+const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g
+const MOZ_HACK_REGEXP = /^moz([A-Z])/
+
+export interface ViewportOffsetResult {
+  left: number
+  top: number
+  right: number
+  bottom: number
+  rightIncludeBody: number
+  bottomIncludeBody: number
+}
+
+/* istanbul ignore next */
+const trim = function (string: string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
+}
+
+/* istanbul ignore next */
+const camelCase = function (name: string) {
+  return name
+    .replace(SPECIAL_CHARS_REGEXP, function (_, __, letter, offset) {
+      return offset ? letter.toUpperCase() : letter
+    })
+    .replace(MOZ_HACK_REGEXP, 'Moz$1')
+}
+
+/* istanbul ignore next */
+export function hasClass(el: Element, cls: string) {
+  if (!el || !cls) return false
+  if (cls.indexOf(' ') !== -1) {
+    throw new Error('className should not contain space.')
+  }
+  if (el.classList) {
+    return el.classList.contains(cls)
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
+  }
+}
+
+/* istanbul ignore next */
+export function addClass(el: Element, cls: string) {
+  if (!el) return
+  let curClass = el.className
+  const classes = (cls || '').split(' ')
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i]
+    if (!clsName) continue
+
+    if (el.classList) {
+      el.classList.add(clsName)
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass
+  }
+}
+
+/* istanbul ignore next */
+export function removeClass(el: Element, cls: string) {
+  if (!el || !cls) return
+  const classes = cls.split(' ')
+  let curClass = ' ' + el.className + ' '
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i]
+    if (!clsName) continue
+
+    if (el.classList) {
+      el.classList.remove(clsName)
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ')
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass)
+  }
+}
+
+export function getBoundingClientRect(element: Element): DOMRect | number {
+  if (!element || !element.getBoundingClientRect) {
+    return 0
+  }
+  return element.getBoundingClientRect()
+}
+
+/**
+ * 获取当前元素的left、top偏移
+ *   left：元素最左侧距离文档左侧的距离
+ *   top:元素最顶端距离文档顶端的距离
+ *   right:元素最右侧距离文档右侧的距离
+ *   bottom：元素最底端距离文档底端的距离
+ *   rightIncludeBody：元素最左侧距离文档右侧的距离
+ *   bottomIncludeBody：元素最底端距离文档最底部的距离
+ *
+ * @description:
+ */
+export function getViewportOffset(element: Element): ViewportOffsetResult {
+  const doc = document.documentElement
+
+  const docScrollLeft = doc.scrollLeft
+  const docScrollTop = doc.scrollTop
+  const docClientLeft = doc.clientLeft
+  const docClientTop = doc.clientTop
+
+  const pageXOffset = window.pageXOffset
+  const pageYOffset = window.pageYOffset
+
+  const box = getBoundingClientRect(element)
+
+  const { left: retLeft, top: rectTop, width: rectWidth, height: rectHeight } = box as DOMRect
+
+  const scrollLeft = (pageXOffset || docScrollLeft) - (docClientLeft || 0)
+  const scrollTop = (pageYOffset || docScrollTop) - (docClientTop || 0)
+  const offsetLeft = retLeft + pageXOffset
+  const offsetTop = rectTop + pageYOffset
+
+  const left = offsetLeft - scrollLeft
+  const top = offsetTop - scrollTop
+
+  const clientWidth = window.document.documentElement.clientWidth
+  const clientHeight = window.document.documentElement.clientHeight
+  return {
+    left: left,
+    top: top,
+    right: clientWidth - rectWidth - left,
+    bottom: clientHeight - rectHeight - top,
+    rightIncludeBody: clientWidth - left,
+    bottomIncludeBody: clientHeight - top
+  }
+}
+
+/* istanbul ignore next */
+export const on = function (
+  element: HTMLElement | Document | Window,
+  event: string,
+  handler: EventListenerOrEventListenerObject
+): void {
+  if (element && event && handler) {
+    element.addEventListener(event, handler, false)
+  }
+}
+
+/* istanbul ignore next */
+export const off = function (
+  element: HTMLElement | Document | Window,
+  event: string,
+  handler: any
+): void {
+  if (element && event && handler) {
+    element.removeEventListener(event, handler, false)
+  }
+}
+
+/* istanbul ignore next */
+export const once = function (el: HTMLElement, event: string, fn: EventListener): void {
+  const listener = function (this: any, ...args: unknown[]) {
+    if (fn) {
+      // @ts-ignore
+      fn.apply(this, args)
+    }
+    off(el, event, listener)
+  }
+  on(el, event, listener)
+}
+
+/* istanbul ignore next */
+export const getStyle =
+  ieVersion < 9
+    ? function (element: Element | any, styleName: string) {
+        if (isServer) return
+        if (!element || !styleName) return null
+        styleName = camelCase(styleName)
+        if (styleName === 'float') {
+          styleName = 'styleFloat'
+        }
+        try {
+          switch (styleName) {
+            case 'opacity':
+              try {
+                return element.filters.item('alpha').opacity / 100
+              } catch (e) {
+                return 1.0
+              }
+            default:
+              return element.style[styleName] || element.currentStyle
+                ? element.currentStyle[styleName]
+                : null
+          }
+        } catch (e) {
+          return element.style[styleName]
+        }
+      }
+    : function (element: Element | any, styleName: string) {
+        if (isServer) return
+        if (!element || !styleName) return null
+        styleName = camelCase(styleName)
+        if (styleName === 'float') {
+          styleName = 'cssFloat'
+        }
+        try {
+          const computed = (document as any).defaultView.getComputedStyle(element, '')
+          return element.style[styleName] || computed ? computed[styleName] : null
+        } catch (e) {
+          return element.style[styleName]
+        }
+      }
+
+/* istanbul ignore next */
+export function setStyle(element: Element | any, styleName: any, value: any) {
+  if (!element || !styleName) return
+
+  if (typeof styleName === 'object') {
+    for (const prop in styleName) {
+      if (Object.prototype.hasOwnProperty.call(styleName, prop)) {
+        setStyle(element, prop, styleName[prop])
+      }
+    }
+  } else {
+    styleName = camelCase(styleName)
+    if (styleName === 'opacity' && ieVersion < 9) {
+      element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')'
+    } else {
+      element.style[styleName] = value
+    }
+  }
+}
+
+/* istanbul ignore next */
+export const isScroll = (el: Element, vertical: any) => {
+  if (isServer) return
+
+  const determinedDirection = vertical !== null || vertical !== undefined
+  const overflow = determinedDirection
+    ? vertical
+      ? getStyle(el, 'overflow-y')
+      : getStyle(el, 'overflow-x')
+    : getStyle(el, 'overflow')
+
+  return overflow.match(/(scroll|auto)/)
+}
+
+/* istanbul ignore next */
+export const getScrollContainer = (el: Element, vertical?: any) => {
+  if (isServer) return
+
+  let parent: any = el
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent)) {
+      return window
+    }
+    if (isScroll(parent, vertical)) {
+      return parent
+    }
+    parent = parent.parentNode
+  }
+
+  return parent
+}
+
+/* istanbul ignore next */
+export const isInContainer = (el: Element, container: any) => {
+  if (isServer || !el || !container) return false
+
+  const elRect = el.getBoundingClientRect()
+  let containerRect
+
+  if ([window, document, document.documentElement, null, undefined].includes(container)) {
+    containerRect = {
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      left: 0
+    }
+  } else {
+    containerRect = container.getBoundingClientRect()
+  }
+
+  return (
+    elRect.top < containerRect.bottom &&
+    elRect.bottom > containerRect.top &&
+    elRect.right > containerRect.left &&
+    elRect.left < containerRect.right
+  )
+}
diff --git a/marketing-ui/admin-ui/src/utils/download.ts b/marketing-ui/admin-ui/src/utils/download.ts
new file mode 100644
index 0000000..32fc624
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/download.ts
@@ -0,0 +1,100 @@
+const download0 = (data: Blob, fileName: string, mineType: string) => {
+  // 创建 blob
+  const blob = new Blob([data], { type: mineType })
+  // 创建 href 超链接，点击进行下载
+  window.URL = window.URL || window.webkitURL
+  const href = URL.createObjectURL(blob)
+  const downA = document.createElement('a')
+  downA.href = href
+  downA.download = fileName
+  downA.click()
+  // 销毁超连接
+  window.URL.revokeObjectURL(href)
+}
+
+const download = {
+  // 下载 Excel 方法
+  excel: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/vnd.ms-excel')
+  },
+  // 下载 Word 方法
+  word: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/msword')
+  },
+  // 下载 Zip 方法
+  zip: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/zip')
+  },
+  // 下载 Html 方法
+  html: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'text/html')
+  },
+  // 下载 Markdown 方法
+  markdown: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'text/markdown')
+  },
+  // 下载 Json 方法
+  json: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/json')
+  },
+  // 下载图片（允许跨域）
+  image: ({
+    url,
+    canvasWidth,
+    canvasHeight,
+    drawWithImageSize = true
+  }: {
+    url: string
+    canvasWidth?: number // 指定画布宽度
+    canvasHeight?: number // 指定画布高度
+    drawWithImageSize?: boolean // 将图片绘制在画布上时带上图片的宽高值, 默认是要带上的
+  }) => {
+    const image = new Image()
+    // image.setAttribute('crossOrigin', 'anonymous')
+    image.src = url
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = canvasWidth || image.width
+      canvas.height = canvasHeight || image.height
+      const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+      ctx?.clearRect(0, 0, canvas.width, canvas.height)
+      if (drawWithImageSize) {
+        ctx.drawImage(image, 0, 0, image.width, image.height)
+      } else {
+        ctx.drawImage(image, 0, 0)
+      }
+      const url = canvas.toDataURL('image/png')
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'image.png'
+      a.click()
+    }
+  },
+  base64ToFile: (base64: any, fileName: string) => {
+    // 将base64按照 , 进行分割 将前缀  与后续内容分隔开
+    const data = base64.split(',')
+    // 利用正则表达式 从前缀中获取图片的类型信息（image/png、image/jpeg、image/webp等）
+    const type = data[0].match(/:(.*?);/)[1]
+    // 从图片的类型信息中 获取具体的文件格式后缀（png、jpeg、webp）
+    const suffix = type.split('/')[1]
+    // 使用atob()对base64数据进行解码  结果是一个文件数据流 以字符串的格式输出
+    const bstr = window.atob(data[1])
+    // 获取解码结果字符串的长度
+    let n = bstr.length
+    // 根据解码结果字符串的长度创建一个等长的整形数字数组
+    // 但在创建时 所有元素初始值都为 0
+    const u8arr = new Uint8Array(n)
+    // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
+    while (n--) {
+      // charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元
+      u8arr[n] = bstr.charCodeAt(n)
+    }
+
+    // 将File文件对象返回给方法的调用者
+    return new File([u8arr], `${fileName}.${suffix}`, {
+      type: type
+    })
+  }
+}
+
+export default download
diff --git a/marketing-ui/admin-ui/src/utils/filt.ts b/marketing-ui/admin-ui/src/utils/filt.ts
new file mode 100644
index 0000000..b1a7b2c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/filt.ts
@@ -0,0 +1,157 @@
+export const openWindow = (
+  url: string,
+  opt?: {
+    target?: '_self' | '_blank' | string
+    noopener?: boolean
+    noreferrer?: boolean
+  }
+) => {
+  const { target = '__blank', noopener = true, noreferrer = true } = opt || {}
+  const feature: string[] = []
+
+  noopener && feature.push('noopener=yes')
+  noreferrer && feature.push('noreferrer=yes')
+
+  window.open(url, target, feature.join(','))
+}
+
+/**
+ * @description: base64 to blob
+ */
+export const dataURLtoBlob = (base64Buf: string): Blob => {
+  const arr = base64Buf.split(',')
+  const typeItem = arr[0]
+  const mime = typeItem.match(/:(.*?);/)![1]
+  const bstr = window.atob(arr[1])
+  let n = bstr.length
+  const u8arr = new Uint8Array(n)
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n)
+  }
+  return new Blob([u8arr], { type: mime })
+}
+
+/**
+ * img url to base64
+ * @param url
+ */
+export const urlToBase64 = (url: string, mineType?: string): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    let canvas = document.createElement('CANVAS') as Nullable<HTMLCanvasElement>
+    const ctx = canvas!.getContext('2d')
+
+    const img = new Image()
+    img.crossOrigin = ''
+    img.onload = function () {
+      if (!canvas || !ctx) {
+        return reject()
+      }
+      canvas.height = img.height
+      canvas.width = img.width
+      ctx.drawImage(img, 0, 0)
+      const dataURL = canvas.toDataURL(mineType || 'image/png')
+      canvas = null
+      resolve(dataURL)
+    }
+    img.src = url
+  })
+}
+
+/**
+ * Download online pictures
+ * @param url
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export const downloadByOnlineUrl = (
+  url: string,
+  filename: string,
+  mime?: string,
+  bom?: BlobPart
+) => {
+  urlToBase64(url).then((base64) => {
+    downloadByBase64(base64, filename, mime, bom)
+  })
+}
+
+/**
+ * Download pictures based on base64
+ * @param buf
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export const downloadByBase64 = (buf: string, filename: string, mime?: string, bom?: BlobPart) => {
+  const base64Buf = dataURLtoBlob(buf)
+  downloadByData(base64Buf, filename, mime, bom)
+}
+
+/**
+ * Download according to the background interface file stream
+ * @param {*} data
+ * @param {*} filename
+ * @param {*} mime
+ * @param {*} bom
+ */
+export const downloadByData = (data: BlobPart, filename: string, mime?: string, bom?: BlobPart) => {
+  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data]
+  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' })
+
+  const blobURL = window.URL.createObjectURL(blob)
+  const tempLink = document.createElement('a')
+  tempLink.style.display = 'none'
+  tempLink.href = blobURL
+  tempLink.setAttribute('download', filename)
+  if (typeof tempLink.download === 'undefined') {
+    tempLink.setAttribute('target', '_blank')
+  }
+  document.body.appendChild(tempLink)
+  tempLink.click()
+  document.body.removeChild(tempLink)
+  window.URL.revokeObjectURL(blobURL)
+}
+
+/**
+ * Download file according to file address
+ * @param {*} sUrl
+ */
+export const downloadByUrl = ({
+  url,
+  target = '_blank',
+  fileName
+}: {
+  url: string
+  target?: '_self' | '_blank'
+  fileName?: string
+}): boolean => {
+  const isChrome = window.navigator.userAgent.toLowerCase().indexOf('chrome') > -1
+  const isSafari = window.navigator.userAgent.toLowerCase().indexOf('safari') > -1
+
+  if (/(iP)/g.test(window.navigator.userAgent)) {
+    console.error('Your browser does not support download!')
+    return false
+  }
+  if (isChrome || isSafari) {
+    const link = document.createElement('a')
+    link.href = url
+    link.target = target
+
+    if (link.download !== undefined) {
+      link.download = fileName || url.substring(url.lastIndexOf('/') + 1, url.length)
+    }
+
+    if (document.createEvent) {
+      const e = document.createEvent('MouseEvents')
+      e.initEvent('click', true, true)
+      link.dispatchEvent(e)
+      return true
+    }
+  }
+  if (url.indexOf('?') === -1) {
+    url += '?download'
+  }
+
+  openWindow(url, { target })
+  return true
+}
diff --git a/marketing-ui/admin-ui/src/utils/formCreate.ts b/marketing-ui/admin-ui/src/utils/formCreate.ts
new file mode 100644
index 0000000..d56e512
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/formCreate.ts
@@ -0,0 +1,58 @@
+/**
+ * 针对 https://github.com/xaboy/form-create-designer 封装的工具类
+ */
+
+// 编码表单 Conf
+export const encodeConf = (designerRef: object) => {
+  // @ts-ignore
+  return JSON.stringify(designerRef.value.getOption())
+}
+
+// 编码表单 Fields
+export const encodeFields = (designerRef: object) => {
+  // @ts-ignore
+  const rule = JSON.parse(designerRef.value.getJson())
+  const fields: string[] = []
+  rule.forEach((item) => {
+    fields.push(JSON.stringify(item))
+  })
+  return fields
+}
+
+// 解码表单 Fields
+export const decodeFields = (fields: string[]) => {
+  const rule: object[] = []
+  fields.forEach((item) => {
+    rule.push(JSON.parse(item))
+  })
+  return rule
+}
+
+// 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
+export const setConfAndFields = (designerRef: object, conf: string, fields: string) => {
+  // @ts-ignore
+  designerRef.value.setOption(JSON.parse(conf))
+  // @ts-ignore
+  designerRef.value.setRule(decodeFields(fields))
+}
+
+// 设置表单的 Conf 和 Fields，适用 form-create 场景
+export const setConfAndFields2 = (
+  detailPreview: object,
+  conf: string,
+  fields: string[],
+  value?: object
+) => {
+  if (isRef(detailPreview)) {
+    // @ts-ignore
+    detailPreview = detailPreview.value
+  }
+  // @ts-ignore
+  detailPreview.option = JSON.parse(conf)
+  // @ts-ignore
+  detailPreview.rule = decodeFields(fields)
+  if (value) {
+    // @ts-ignore
+    detailPreview.value = value
+  }
+}
diff --git a/marketing-ui/admin-ui/src/utils/formRules.ts b/marketing-ui/admin-ui/src/utils/formRules.ts
new file mode 100644
index 0000000..2989867
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/formRules.ts
@@ -0,0 +1,7 @@
+const { t } = useI18n()
+
+// 必填项
+export const required = {
+  required: true,
+  message: t('common.required')
+}
diff --git a/marketing-ui/admin-ui/src/utils/formatTime.ts b/marketing-ui/admin-ui/src/utils/formatTime.ts
new file mode 100644
index 0000000..2b08495
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/formatTime.ts
@@ -0,0 +1,356 @@
+import dayjs from 'dayjs'
+import type { TableColumnCtx } from 'element-plus'
+
+/**
+ * 日期快捷选项适用于 el-date-picker
+ */
+export const defaultShortcuts = [
+  {
+    text: '今天',
+    value: () => {
+      return new Date()
+    }
+  },
+  {
+    text: '昨天',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24)
+      return [date, date]
+    }
+  },
+  {
+    text: '最近七天',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+      return [date, new Date()]
+    }
+  },
+  {
+    text: '最近 30 天',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
+      return [date, new Date()]
+    }
+  },
+  {
+    text: '本月',
+    value: () => {
+      const date = new Date()
+      date.setDate(1) // 设置为当前月的第一天
+      return [date, new Date()]
+    }
+  },
+  {
+    text: '今年',
+    value: () => {
+      const date = new Date()
+      return [new Date(`${date.getFullYear()}-01-01`), date]
+    }
+  }
+]
+
+/**
+ * 时间日期转换
+ * @param date 当前时间，new Date() 格式
+ * @param format 需要转换的时间格式字符串
+ * @description format 字符串随意，如 `YYYY-MM、YYYY-MM-DD`
+ * @description format 季度："YYYY-MM-DD HH:mm:ss QQQQ"
+ * @description format 星期："YYYY-MM-DD HH:mm:ss WWW"
+ * @description format 几周："YYYY-MM-DD HH:mm:ss ZZZ"
+ * @description format 季度 + 星期 + 几周："YYYY-MM-DD HH:mm:ss WWW QQQQ ZZZ"
+ * @returns 返回拼接后的时间字符串
+ */
+export function formatDate(date: Date | number | string, format?: string): string {
+  // 日期不存在，则返回空
+  if (!date) {
+    return ''
+  }
+  // 日期存在，则进行格式化
+  return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
+}
+
+/**
+ * 获取当前的日期+时间
+ */
+export function getNowDateTime() {
+  return dayjs()
+}
+
+/**
+ * 获取当前日期是第几周
+ * @param dateTime 当前传入的日期值
+ * @returns 返回第几周数字值
+ */
+export function getWeek(dateTime: Date): number {
+  const temptTime = new Date(dateTime.getTime())
+  // 周几
+  const weekday = temptTime.getDay() || 7
+  // 周1+5天=周六
+  temptTime.setDate(temptTime.getDate() - weekday + 1 + 5)
+  let firstDay = new Date(temptTime.getFullYear(), 0, 1)
+  const dayOfWeek = firstDay.getDay()
+  let spendDay = 1
+  if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1
+  firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay)
+  const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000)
+  return Math.ceil(d / 7)
+}
+
+/**
+ * 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
+ * @param param 当前时间，new Date() 格式或者字符串时间格式
+ * @param format 需要转换的时间格式字符串
+ * @description param 10秒：  10 * 1000
+ * @description param 1分：   60 * 1000
+ * @description param 1小时： 60 * 60 * 1000
+ * @description param 24小时：60 * 60 * 24 * 1000
+ * @description param 3天：   60 * 60* 24 * 1000 * 3
+ * @returns 返回拼接后的时间字符串
+ */
+export function formatPast(param: string | Date, format = 'YYYY-MM-DD HH:mm:ss'): string {
+  // 传入格式处理、存储转换值
+  let t: any, s: number
+  // 获取js 时间戳
+  let time: number = new Date().getTime()
+  // 是否是对象
+  typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param)
+  // 当前时间戳 - 传入时间戳
+  time = Number.parseInt(`${time - t}`)
+  if (time < 10000) {
+    // 10秒内
+    return '刚刚'
+  } else if (time < 60000 && time >= 10000) {
+    // 超过10秒少于1分钟内
+    s = Math.floor(time / 1000)
+    return `${s}秒前`
+  } else if (time < 3600000 && time >= 60000) {
+    // 超过1分钟少于1小时
+    s = Math.floor(time / 60000)
+    return `${s}分钟前`
+  } else if (time < 86400000 && time >= 3600000) {
+    // 超过1小时少于24小时
+    s = Math.floor(time / 3600000)
+    return `${s}小时前`
+  } else if (time < 259200000 && time >= 86400000) {
+    // 超过1天少于3天内
+    s = Math.floor(time / 86400000)
+    return `${s}天前`
+  } else {
+    // 超过3天
+    const date = typeof param === 'string' || 'object' ? new Date(param) : param
+    return formatDate(date, format)
+  }
+}
+
+/**
+ * 时间问候语
+ * @param param 当前时间，new Date() 格式
+ * @description param 调用 `formatAxis(new Date())` 输出 `上午好`
+ * @returns 返回拼接后的时间字符串
+ */
+export function formatAxis(param: Date): string {
+  const hour: number = new Date(param).getHours()
+  if (hour < 6) return '凌晨好'
+  else if (hour < 9) return '早上好'
+  else if (hour < 12) return '上午好'
+  else if (hour < 14) return '中午好'
+  else if (hour < 17) return '下午好'
+  else if (hour < 19) return '傍晚好'
+  else if (hour < 22) return '晚上好'
+  else return '夜里好'
+}
+
+/**
+ * 将毫秒，转换成时间字符串。例如说，xx 分钟
+ *
+ * @param ms 毫秒
+ * @returns {string} 字符串
+ */
+export function formatPast2(ms: number): string {
+  const day = Math.floor(ms / (24 * 60 * 60 * 1000))
+  const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
+  const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
+  const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
+  if (day > 0) {
+    return day + ' 天' + hour + ' 小时 ' + minute + ' 分钟'
+  }
+  if (hour > 0) {
+    return hour + ' 小时 ' + minute + ' 分钟'
+  }
+  if (minute > 0) {
+    return minute + ' 分钟'
+  }
+  if (second > 0) {
+    return second + ' 秒'
+  } else {
+    return 0 + ' 秒'
+  }
+}
+
+/**
+ * element plus 的时间 Formatter 实现，使用 YYYY-MM-DD HH:mm:ss 格式
+ *
+ * @param row 行数据
+ * @param column 字段
+ * @param cellValue 字段值
+ */
+export function dateFormatter(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
+  return cellValue ? formatDate(cellValue) : ''
+}
+
+/**
+ * 专门处理定时时间的格式化函数，确保正确处理毫秒级时间戳
+ * 
+ * @param row 行数据
+ * @param column 字段
+ * @param cellValue 字段值
+ */
+export function attimeFormatter(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
+  if (!cellValue) {
+    return ''
+  }
+  
+  // 确保传入的是数字类型的时间戳
+  const timestamp = typeof cellValue === 'string' ? parseInt(cellValue, 10) : cellValue
+  
+  // 检查是否是毫秒级时间戳（13位数字）
+  if (Number.isInteger(timestamp) && timestamp.toString().length === 13) {
+    return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
+  }
+  
+  // 其他情况使用默认格式化
+  return formatDate(cellValue)
+}
+
+/**
+ * element plus 的时间 Formatter 实现，使用 YYYY-MM-DD 格式
+ *
+ * @param row 行数据
+ * @param column 字段
+ * @param cellValue 字段值
+ */
+export function dateFormatter2(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
+  return cellValue ? formatDate(cellValue, 'YYYY-MM-DD') : ''
+}
+
+/**
+ * 设置起始日期，时间为00:00:00
+ * @param param 传入日期
+ * @returns 带时间00:00:00的日期
+ */
+export function beginOfDay(param: Date): Date {
+  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0)
+}
+
+/**
+ * 设置结束日期，时间为23:59:59
+ * @param param 传入日期
+ * @returns 带时间23:59:59的日期
+ */
+export function endOfDay(param: Date): Date {
+  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59)
+}
+
+/**
+ * 计算两个日期间隔天数
+ * @param param1 日期1
+ * @param param2 日期2
+ */
+export function betweenDay(param1: Date, param2: Date): number {
+  param1 = convertDate(param1)
+  param2 = convertDate(param2)
+  // 计算差值
+  return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000))
+}
+
+/**
+ * 日期计算
+ * @param param1 日期
+ * @param param2 添加的时间
+ */
+export function addTime(param1: Date, param2: number): Date {
+  param1 = convertDate(param1)
+  return new Date(param1.getTime() + param2)
+}
+
+/**
+ * 日期转换
+ * @param param 日期
+ */
+export function convertDate(param: Date | string): Date {
+  if (typeof param === 'string') {
+    return new Date(param)
+  }
+  return param
+}
+
+/**
+ * 指定的两个日期, 是否为同一天
+ * @param a 日期 A
+ * @param b 日期 B
+ */
+export function isSameDay(a: dayjs.ConfigType, b: dayjs.ConfigType): boolean {
+  if (!a || !b) return false
+
+  const aa = dayjs(a)
+  const bb = dayjs(b)
+  return aa.year() == bb.year() && aa.month() == bb.month() && aa.day() == bb.day()
+}
+
+/**
+ * 获取一天的开始时间、截止时间
+ * @param date 日期
+ * @param days 天数
+ */
+export function getDayRange(
+  date: dayjs.ConfigType,
+  days: number
+): [dayjs.ConfigType, dayjs.ConfigType] {
+  const day = dayjs(date).add(days, 'd')
+  return getDateRange(day, day)
+}
+
+/**
+ * 获取最近7天的开始时间、截止时间
+ */
+export function getLast7Days(): [dayjs.ConfigType, dayjs.ConfigType] {
+  const lastWeekDay = dayjs().subtract(7, 'd')
+  const yesterday = dayjs().subtract(1, 'd')
+  return getDateRange(lastWeekDay, yesterday)
+}
+
+/**
+ * 获取最近30天的开始时间、截止时间
+ */
+export function getLast30Days(): [dayjs.ConfigType, dayjs.ConfigType] {
+  const lastMonthDay = dayjs().subtract(30, 'd')
+  const yesterday = dayjs().subtract(1, 'd')
+  return getDateRange(lastMonthDay, yesterday)
+}
+
+/**
+ * 获取最近1年的开始时间、截止时间
+ */
+export function getLast1Year(): [dayjs.ConfigType, dayjs.ConfigType] {
+  const lastYearDay = dayjs().subtract(1, 'y')
+  const yesterday = dayjs().subtract(1, 'd')
+  return getDateRange(lastYearDay, yesterday)
+}
+
+/**
+ * 获取指定日期的开始时间、截止时间
+ * @param beginDate 开始日期
+ * @param endDate 截止日期
+ */
+export function getDateRange(
+  beginDate: dayjs.ConfigType,
+  endDate: dayjs.ConfigType
+): [string, string] {
+  return [
+    dayjs(beginDate).startOf('d').format('YYYY-MM-DD HH:mm:ss'),
+    dayjs(endDate).endOf('d').format('YYYY-MM-DD HH:mm:ss')
+  ]
+}
diff --git a/marketing-ui/admin-ui/src/utils/formatter.ts b/marketing-ui/admin-ui/src/utils/formatter.ts
new file mode 100644
index 0000000..8777f32
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/formatter.ts
@@ -0,0 +1,7 @@
+import { floatToFixed2 } from '@/utils'
+
+// 格式化金额【分转元】
+// @ts-ignore
+export const fenToYuanFormat = (_, __, cellValue: any, ___) => {
+  return `￥${floatToFixed2(cellValue)}`
+}
diff --git a/marketing-ui/admin-ui/src/utils/index.ts b/marketing-ui/admin-ui/src/utils/index.ts
new file mode 100644
index 0000000..5951d58
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/index.ts
@@ -0,0 +1,553 @@
+import { toNumber } from 'lodash-es'
+
+/**
+ *
+ * @param component 需要注册的组件
+ * @param alias 组件别名
+ * @returns any
+ */
+export const withInstall = <T>(component: T, alias?: string) => {
+  const comp = component as any
+  comp.install = (app: any) => {
+    app.component(comp.name || comp.displayName, component)
+    if (alias) {
+      app.config.globalProperties[alias] = component
+    }
+  }
+  return component as T & Plugin
+}
+
+/**
+ * @param str 需要转下划线的驼峰字符串
+ * @returns 字符串下划线
+ */
+export const humpToUnderline = (str: string): string => {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
+}
+
+/**
+ * @param str 需要转驼峰的下划线字符串
+ * @returns 字符串驼峰
+ */
+export const underlineToHump = (str: string): string => {
+  if (!str) return ''
+  return str.replace(/\-(\w)/g, (_, letter: string) => {
+    return letter.toUpperCase()
+  })
+}
+
+/**
+ * 驼峰转横杠
+ */
+export const humpToDash = (str: string): string => {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
+}
+
+export const setCssVar = (prop: string, val: any, dom = document.documentElement) => {
+  dom.style.setProperty(prop, val)
+}
+
+/**
+ * 查找数组对象的某个下标
+ * @param {Array} ary 查找的数组
+ * @param {Functon} fn 判断的方法
+ */
+// eslint-disable-next-line
+export const findIndex = <T = Recordable>(ary: Array<T>, fn: Fn): number => {
+  if (ary.findIndex) {
+    return ary.findIndex(fn)
+  }
+  let index = -1
+  ary.some((item: T, i: number, ary: Array<T>) => {
+    const ret: T = fn(item, i, ary)
+    if (ret) {
+      index = i
+      return ret
+    }
+  })
+  return index
+}
+
+export const trim = (str: string) => {
+  return str.replace(/(^\s*)|(\s*$)/g, '')
+}
+
+/**
+ * @param {Date | number | string} time 需要转换的时间
+ * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
+ */
+export function formatTime(time: Date | number | string, fmt: string) {
+  if (!time) return ''
+  else {
+    const date = new Date(time)
+    const o = {
+      'M+': date.getMonth() + 1,
+      'd+': date.getDate(),
+      'H+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds(),
+      'q+': Math.floor((date.getMonth() + 3) / 3),
+      S: date.getMilliseconds()
+    }
+    if (/(y+)/.test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+    }
+    for (const k in o) {
+      if (new RegExp('(' + k + ')').test(fmt)) {
+        fmt = fmt.replace(
+          RegExp.$1,
+          RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
+        )
+      }
+    }
+    return fmt
+  }
+}
+
+/**
+ * 生成随机字符串
+ */
+export function toAnyString() {
+  const str: string = 'xxxxx-xxxxx-4xxxx-yxxxx-xxxxx'.replace(/[xy]/g, (c: string) => {
+    const r: number = (Math.random() * 16) | 0
+    const v: number = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString()
+  })
+  return str
+}
+
+/**
+ * 生成指定长度的随机字符串
+ *
+ * @param length 字符串长度
+ */
+export function generateRandomStr(length: number): string {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let result = ''
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return result
+}
+
+/**
+ * 根据支持的文件类型生成 accept 属性值
+ *
+ * @param supportedFileTypes 支持的文件类型数组，如 ['PDF', 'DOC', 'DOCX']
+ * @returns 用于文件上传组件 accept 属性的字符串
+ */
+export const generateAcceptedFileTypes = (supportedFileTypes: string[]): string => {
+  const allowedExtensions = supportedFileTypes.map((ext) => ext.toLowerCase())
+  const mimeTypes: string[] = []
+
+  // 添加常见的 MIME 类型映射
+  if (allowedExtensions.includes('txt')) {
+    mimeTypes.push('text/plain')
+  }
+  if (allowedExtensions.includes('pdf')) {
+    mimeTypes.push('application/pdf')
+  }
+  if (allowedExtensions.includes('html') || allowedExtensions.includes('htm')) {
+    mimeTypes.push('text/html')
+  }
+  if (allowedExtensions.includes('csv')) {
+    mimeTypes.push('text/csv')
+  }
+  if (allowedExtensions.includes('xlsx') || allowedExtensions.includes('xls')) {
+    mimeTypes.push('application/vnd.ms-excel')
+    mimeTypes.push('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
+  }
+  if (allowedExtensions.includes('docx') || allowedExtensions.includes('doc')) {
+    mimeTypes.push('application/msword')
+    mimeTypes.push('application/vnd.openxmlformats-officedocument.wordprocessingml.document')
+  }
+  if (allowedExtensions.includes('pptx') || allowedExtensions.includes('ppt')) {
+    mimeTypes.push('application/vnd.ms-powerpoint')
+    mimeTypes.push('application/vnd.openxmlformats-officedocument.presentationml.presentation')
+  }
+  if (allowedExtensions.includes('xml')) {
+    mimeTypes.push('application/xml')
+    mimeTypes.push('text/xml')
+  }
+  if (allowedExtensions.includes('md') || allowedExtensions.includes('markdown')) {
+    mimeTypes.push('text/markdown')
+  }
+  if (allowedExtensions.includes('epub')) {
+    mimeTypes.push('application/epub+zip')
+  }
+  if (allowedExtensions.includes('eml')) {
+    mimeTypes.push('message/rfc822')
+  }
+  if (allowedExtensions.includes('msg')) {
+    mimeTypes.push('application/vnd.ms-outlook')
+  }
+
+  // 添加文件扩展名
+  const extensions = allowedExtensions.map((ext) => `.${ext}`)
+
+  return [...mimeTypes, ...extensions].join(',')
+}
+
+/**
+ * 首字母大写
+ */
+export function firstUpperCase(str: string) {
+  return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
+}
+
+export const generateUUID = () => {
+  if (typeof crypto === 'object') {
+    if (typeof crypto.randomUUID === 'function') {
+      return crypto.randomUUID()
+    }
+    if (typeof crypto.getRandomValues === 'function' && typeof Uint8Array === 'function') {
+      const callback = (c: any) => {
+        const num = Number(c)
+        return (num ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))).toString(
+          16
+        )
+      }
+      return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, callback)
+    }
+  }
+  let timestamp = new Date().getTime()
+  let performanceNow =
+    (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    let random = Math.random() * 16
+    if (timestamp > 0) {
+      random = (timestamp + random) % 16 | 0
+      timestamp = Math.floor(timestamp / 16)
+    } else {
+      random = (performanceNow + random) % 16 | 0
+      performanceNow = Math.floor(performanceNow / 16)
+    }
+    return (c === 'x' ? random : (random & 0x3) | 0x8).toString(16)
+  })
+}
+
+/**
+ * element plus 的文件大小 Formatter 实现
+ *
+ * @param row 行数据
+ * @param column 字段
+ * @param cellValue 字段值
+ */
+// @ts-ignore
+export const fileSizeFormatter = (row, column, cellValue) => {
+  const fileSize = cellValue
+  const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  const srcSize = parseFloat(fileSize)
+  const index = Math.floor(Math.log(srcSize) / Math.log(1024))
+  const size = srcSize / Math.pow(1024, index)
+  const sizeStr = size.toFixed(2) //保留的小数位数
+  return sizeStr + ' ' + unitArr[index]
+}
+
+/**
+ * 将值复制到目标对象，且以目标对象属性为准，例：target: {a:1} source:{a:2,b:3} 结果为：{a:2}
+ * @param target 目标对象
+ * @param source 源对象
+ */
+export const copyValueToTarget = (target: any, source: any) => {
+  const newObj = Object.assign({}, target, source)
+  // 删除多余属性
+  Object.keys(newObj).forEach((key) => {
+    // 如果不是target中的属性则删除
+    if (Object.keys(target).indexOf(key) === -1) {
+      delete newObj[key]
+    }
+  })
+  // 更新目标对象值
+  Object.assign(target, newObj)
+}
+
+/**
+ * 获取链接的参数值
+ * @param key 参数键名
+ * @param urlStr 链接地址，默认为当前浏览器的地址
+ */
+export const getUrlValue = (key: string, urlStr: string = location.href): string => {
+  if (!urlStr || !key) return ''
+  const url = new URL(decodeURIComponent(urlStr))
+  return url.searchParams.get(key) ?? ''
+}
+
+/**
+ * 获取链接的参数值（值类型）
+ * @param key 参数键名
+ * @param urlStr 链接地址，默认为当前浏览器的地址
+ */
+export const getUrlNumberValue = (key: string, urlStr: string = location.href): number => {
+  return toNumber(getUrlValue(key, urlStr))
+}
+
+/**
+ * 构建排序字段
+ * @param prop 字段名称
+ * @param order 顺序
+ */
+export const buildSortingField = ({ prop, order }) => {
+  return { field: prop, order: order === 'ascending' ? 'asc' : 'desc' }
+}
+
+// ========== NumberUtils 数字方法 ==========
+
+/**
+ * 数组求和
+ *
+ * @param values 数字数组
+ * @return 求和结果，默认为 0
+ */
+export const getSumValue = (values: number[]): number => {
+  return values.reduce((prev, curr) => {
+    const value = Number(curr)
+    if (!Number.isNaN(value)) {
+      return prev + curr
+    } else {
+      return prev
+    }
+  }, 0)
+}
+
+// ========== 通用金额方法 ==========
+
+/**
+ * 将一个整数转换为分数保留两位小数
+ * @param num
+ */
+export const formatToFraction = (num: number | string | undefined): string => {
+  if (typeof num === 'undefined') return '0.00'
+  const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
+  return (parsedNumber / 100.0).toFixed(2)
+}
+
+/**
+ * 将一个数转换为 1.00 这样
+ * 数据呈现的时候使用
+ *
+ * @param num 整数
+ */
+// TODO @芋艿：看看怎么融合掉
+export const floatToFixed2 = (num: number | string | undefined): string => {
+  let str = '0.00'
+  if (typeof num === 'undefined') {
+    return str
+  }
+  const f = formatToFraction(num)
+  const decimalPart = f.toString().split('.')[1]
+  const len = decimalPart ? decimalPart.length : 0
+  switch (len) {
+    case 0:
+      str = f.toString() + '.00'
+      break
+    case 1:
+      str = f.toString() + '0'
+      break
+    case 2:
+      str = f.toString()
+      break
+  }
+  return str
+}
+
+/**
+ * 将一个分数转换为整数
+ * @param num
+ */
+// TODO @芋艿：看看怎么融合掉
+export const convertToInteger = (num: number | string | undefined): number => {
+  if (typeof num === 'undefined') return 0
+  const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
+  // TODO 分转元后还有小数则四舍五入
+  return Math.round(parsedNumber * 100)
+}
+
+/**
+ * 元转分
+ */
+export const yuanToFen = (amount: string | number): number => {
+  return convertToInteger(amount)
+}
+
+/**
+ * 分转元
+ */
+export const fenToYuan = (price: string | number): string => {
+  return formatToFraction(price)
+}
+
+/**
+ * 计算环比
+ *
+ * @param value 当前数值
+ * @param reference 对比数值
+ */
+export const calculateRelativeRate = (value?: number, reference?: number) => {
+  // 防止除0
+  if (!reference || reference == 0) return 0
+
+  return ((100 * ((value || 0) - reference)) / reference).toFixed(0)
+}
+
+// ========== ERP 专属方法 ==========
+
+const ERP_COUNT_DIGIT = 3
+const ERP_PRICE_DIGIT = 2
+
+/**
+ * 【ERP】格式化 Input 数字
+ *
+ * 例如说：库存数量
+ *
+ * @param num 数量
+ * @package digit 保留的小数位数
+ * @return 格式化后的数量
+ */
+export const erpNumberFormatter = (num: number | string | undefined, digit: number) => {
+  if (num == null) {
+    return ''
+  }
+  if (typeof num === 'string') {
+    num = parseFloat(num)
+  }
+  // 如果非 number，则直接返回空串
+  if (isNaN(num)) {
+    return ''
+  }
+  return num.toFixed(digit)
+}
+
+/**
+ * 【ERP】格式化数量，保留三位小数
+ *
+ * 例如说：库存数量
+ *
+ * @param num 数量
+ * @return 格式化后的数量
+ */
+export const erpCountInputFormatter = (num: number | string | undefined) => {
+  return erpNumberFormatter(num, ERP_COUNT_DIGIT)
+}
+
+// noinspection JSCommentMatchesSignature
+/**
+ * 【ERP】格式化数量，保留三位小数
+ *
+ * @param cellValue 数量
+ * @return 格式化后的数量
+ */
+export const erpCountTableColumnFormatter = (_, __, cellValue: any, ___) => {
+  return erpNumberFormatter(cellValue, ERP_COUNT_DIGIT)
+}
+
+/**
+ * 【ERP】格式化金额，保留二位小数
+ *
+ * 例如说：库存数量
+ *
+ * @param num 数量
+ * @return 格式化后的数量
+ */
+export const erpPriceInputFormatter = (num: number | string | undefined) => {
+  return erpNumberFormatter(num, ERP_PRICE_DIGIT)
+}
+
+// noinspection JSCommentMatchesSignature
+/**
+ * 【ERP】格式化金额，保留二位小数
+ *
+ * @param cellValue 数量
+ * @return 格式化后的数量
+ */
+export const erpPriceTableColumnFormatter = (_, __, cellValue: any, ___) => {
+  return erpNumberFormatter(cellValue, ERP_PRICE_DIGIT)
+}
+
+/**
+ * 【ERP】价格计算，四舍五入保留两位小数
+ *
+ * @param price 价格
+ * @param count 数量
+ * @return 总价格。如果有任一为空，则返回 undefined
+ */
+export const erpPriceMultiply = (price: number, count: number) => {
+  if (price == null || count == null) {
+    return undefined
+  }
+  return parseFloat((price * count).toFixed(ERP_PRICE_DIGIT))
+}
+
+/**
+ * 【ERP】百分比计算，四舍五入保留两位小数
+ *
+ * 如果 total 为 0，则返回 0
+ *
+ * @param value 当前值
+ * @param total 总值
+ */
+export const erpCalculatePercentage = (value: number, total: number) => {
+  if (total === 0) return 0
+  return ((value / total) * 100).toFixed(2)
+}
+
+/**
+ * 适配 echarts map 的地名
+ *
+ * @param areaName 地区名称
+ */
+export const areaReplace = (areaName: string) => {
+  if (!areaName) {
+    return areaName
+  }
+  return areaName
+    .replace('维吾尔自治区', '')
+    .replace('壮族自治区', '')
+    .replace('回族自治区', '')
+    .replace('自治区', '')
+    .replace('省', '')
+}
+
+/**
+ * 解析 JSON 字符串
+ *
+ * @param str
+ */
+export function jsonParse(str: string) {
+  try {
+    return JSON.parse(str)
+  } catch (e) {
+    console.warn(`str[${str}] 不是一个 JSON 字符串`)
+    return str
+  }
+}
+
+/**
+ * 截取字符串
+ *
+ * @param name
+ * @param start
+ * @param end
+ */
+
+export const sliceName = (name: string, start: number, end: number) => {
+  if (name.length > end) {
+    return name.slice(start, end)
+  }
+  return name
+}
+
+/**
+ * 截取字符串
+ *
+ * @param str 字符串
+ * @param start 开始位置
+ * @param end 结束位置
+ */
+
+export const subString = (str: string, start: number, end: number) => {
+  if (str.length > end) {
+    return str.slice(start, end)
+  }
+  return str
+}
diff --git a/marketing-ui/admin-ui/src/utils/is.ts b/marketing-ui/admin-ui/src/utils/is.ts
new file mode 100644
index 0000000..24d7191
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/is.ts
@@ -0,0 +1,118 @@
+// copy to vben-admin
+
+const toString = Object.prototype.toString
+
+export const is = (val: unknown, type: string) => {
+  return toString.call(val) === `[object ${type}]`
+}
+
+export const isDef = <T = unknown>(val?: T): val is T => {
+  return typeof val !== 'undefined'
+}
+
+export const isUnDef = <T = unknown>(val?: T): val is T => {
+  return !isDef(val)
+}
+
+export const isObject = (val: any): val is Record<any, any> => {
+  return val !== null && is(val, 'Object')
+}
+
+export const isEmpty = (val: any): boolean => {
+  if (val === null || val === undefined || typeof val === 'undefined') {
+    return true
+  }
+  if (isArray(val) || isString(val)) {
+    return val.length === 0
+  }
+
+  if (val instanceof Map || val instanceof Set) {
+    return val.size === 0
+  }
+
+  if (isObject(val)) {
+    return Object.keys(val).length === 0
+  }
+
+  return false
+}
+
+export const isDate = (val: unknown): val is Date => {
+  return is(val, 'Date')
+}
+
+export const isNull = (val: unknown): val is null => {
+  return val === null
+}
+
+export const isNullAndUnDef = (val: unknown): val is null | undefined => {
+  return isUnDef(val) && isNull(val)
+}
+
+export const isNullOrUnDef = (val: unknown): val is null | undefined => {
+  return isUnDef(val) || isNull(val)
+}
+
+export const isNumber = (val: unknown): val is number => {
+  return is(val, 'Number')
+}
+
+export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
+  return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch)
+}
+
+export const isString = (val: unknown): val is string => {
+  return is(val, 'String')
+}
+
+export const isFunction = (val: unknown): val is Function => {
+  return typeof val === 'function'
+}
+
+export const isBoolean = (val: unknown): val is boolean => {
+  return is(val, 'Boolean')
+}
+
+export const isRegExp = (val: unknown): val is RegExp => {
+  return is(val, 'RegExp')
+}
+
+export const isArray = (val: any): val is Array<any> => {
+  return val && Array.isArray(val)
+}
+
+export const isWindow = (val: any): val is Window => {
+  return typeof window !== 'undefined' && is(val, 'Window')
+}
+
+export const isElement = (val: unknown): val is Element => {
+  return isObject(val) && !!val.tagName
+}
+
+export const isMap = (val: unknown): val is Map<any, any> => {
+  return is(val, 'Map')
+}
+
+export const isServer = typeof window === 'undefined'
+
+export const isClient = !isServer
+
+export const isUrl = (path: string): boolean => {
+  // fix:修复hash路由无法跳转的问题
+  const reg =
+  /(((^https?:(?:\/\/)?)(?:[-:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%#\/.\w-_]*)?\??(?:[-\+=&%@.\w_]*)#?(?:[\w]*))?)$/
+  return reg.test(path)
+}
+
+export const isDark = (): boolean => {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+// 是否是图片链接
+export const isImgPath = (path: string): boolean => {
+  return /(https?:\/\/|data:image\/).*?\.(png|jpg|jpeg|gif|svg|webp|ico)/gi.test(path)
+}
+
+export const isEmptyVal = (val: any): boolean => {
+  return val === '' || val === null || val === undefined
+}
diff --git a/marketing-ui/admin-ui/src/utils/jsencrypt.ts b/marketing-ui/admin-ui/src/utils/jsencrypt.ts
new file mode 100644
index 0000000..374d5f6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/jsencrypt.ts
@@ -0,0 +1,31 @@
+import { JSEncrypt } from 'jsencrypt'
+
+// 密钥对生成 http://web.chacuo.net/netrsakeypair
+
+const publicKey =
+  'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
+  'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
+
+const privateKey =
+  'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
+  '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
+  'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
+  'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
+  'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
+  'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
+  'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
+  'UP8iWi1Qw0Y='
+
+// 加密
+export const encrypt = (txt: string) => {
+  const encryptor = new JSEncrypt()
+  encryptor.setPublicKey(publicKey) // 设置公钥
+  return encryptor.encrypt(txt) // 对数据进行加密
+}
+
+// 解密
+export const decrypt = (txt: string) => {
+  const encryptor = new JSEncrypt()
+  encryptor.setPrivateKey(privateKey) // 设置私钥
+  return encryptor.decrypt(txt) // 对数据进行解密
+}
diff --git a/marketing-ui/admin-ui/src/utils/permission.ts b/marketing-ui/admin-ui/src/utils/permission.ts
new file mode 100644
index 0000000..4138173
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/permission.ts
@@ -0,0 +1,36 @@
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import {hasPermission} from "@/directives/permission/hasPermi";
+
+
+const { t } = useI18n() // 国际化
+
+/**
+ * 字符权限校验
+ * @param {Array} value 校验值
+ * @returns {Boolean}
+ */
+export function checkPermi(permission: string[]) {
+  return hasPermission(permission)
+}
+
+/**
+ * 角色权限校验
+ * @param {string[]} value 校验值
+ * @returns {Boolean}
+ */
+export function checkRole(value: string[]) {
+  if (value && value instanceof Array && value.length > 0) {
+    const { wsCache } = useCache()
+    const permissionRoles = value
+    const super_admin = 'super_admin'
+    const userInfo = wsCache.get(CACHE_KEY.USER)
+    const roles = userInfo?.roles || []
+    const hasRole = roles.some((role: string) => {
+      return super_admin === role || permissionRoles.includes(role)
+    })
+    return !!hasRole
+  } else {
+    console.error(t('permission.hasRole'))
+    return false
+  }
+}
diff --git a/marketing-ui/admin-ui/src/utils/propTypes.ts b/marketing-ui/admin-ui/src/utils/propTypes.ts
new file mode 100644
index 0000000..863f55c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/propTypes.ts
@@ -0,0 +1,24 @@
+import { VueTypeValidableDef, VueTypesInterface, createTypes, toValidableType } from 'vue-types'
+import { CSSProperties } from 'vue'
+
+type PropTypes = VueTypesInterface & {
+  readonly style: VueTypeValidableDef<CSSProperties>
+}
+const newPropTypes = createTypes({
+  func: undefined,
+  bool: undefined,
+  string: undefined,
+  number: undefined,
+  object: undefined,
+  integer: undefined
+}) as PropTypes
+
+class propTypes extends newPropTypes {
+  static get style() {
+    return toValidableType('style', {
+      type: [String, Object]
+    })
+  }
+}
+
+export { propTypes }
diff --git a/marketing-ui/admin-ui/src/utils/routerHelper.ts b/marketing-ui/admin-ui/src/utils/routerHelper.ts
new file mode 100644
index 0000000..7a87bd7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/routerHelper.ts
@@ -0,0 +1,256 @@
+import type { RouteLocationNormalized, Router, RouteRecordNormalized } from 'vue-router'
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import { isUrl } from '@/utils/is'
+import { cloneDeep, omit } from 'lodash-es'
+import qs from 'qs'
+
+const modules = import.meta.glob('../views/**/*.{vue,tsx}')
+/**
+ * 注册一个异步组件
+ * @param componentPath 例:/bpm/oa/leave/detail
+ */
+export const registerComponent = (componentPath: string) => {
+  for (const item in modules) {
+    if (item.includes(componentPath)) {
+      // 使用异步组件的方式来动态加载组件
+      // @ts-ignore
+      return defineAsyncComponent(modules[item])
+    }
+  }
+}
+/* Layout */
+export const Layout = () => import('@/layout/Layout.vue')
+
+export const getParentLayout = () => {
+  return () =>
+    new Promise((resolve) => {
+      resolve({
+        name: 'ParentLayout'
+      })
+    })
+}
+
+// 按照路由中meta下的rank等级升序来排序路由
+export const ascending = (arr: any[]) => {
+  arr.forEach((v) => {
+    if (v?.meta?.rank === null) v.meta.rank = undefined
+    if (v?.meta?.rank === 0) {
+      if (v.name !== 'home' && v.path !== '/') {
+        console.warn('rank only the home page can be 0')
+      }
+    }
+  })
+  return arr.sort((a: { meta: { rank: number } }, b: { meta: { rank: number } }) => {
+    return a?.meta?.rank - b?.meta?.rank
+  })
+}
+
+export const getRawRoute = (route: RouteLocationNormalized): RouteLocationNormalized => {
+  if (!route) return route
+  const { matched, ...opt } = route
+  return {
+    ...opt,
+    matched: (matched
+      ? matched.map((item) => ({
+          meta: item.meta,
+          name: item.name,
+          path: item.path
+        }))
+      : undefined) as RouteRecordNormalized[]
+  }
+}
+
+// 后端控制路由生成
+export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecordRaw[] => {
+  const res: AppRouteRecordRaw[] = []
+  const modulesRoutesKeys = Object.keys(modules)
+  for (const route of routes) {
+    // 1. 生成 meta 菜单元数据
+    const meta = {
+      title: route.name,
+      icon: route.icon,
+      hidden: !route.visible,
+      noCache: !route.keepAlive,
+      alwaysShow:
+        route.children &&
+        route.children.length > 0 &&
+        (route.alwaysShow !== undefined ? route.alwaysShow : true)
+    } as any
+    // 特殊逻辑：如果后端配置的 MenuDO.component 包含 ?，则表示需要传递参数
+    // 此时，我们需要解析参数，并且将参数放到 meta.query 中
+    // 这样，后续在 Vue 文件中，可以通过 const { currentRoute } = useRouter() 中，通过 meta.query 获取到参数
+    if (route.component && route.component.indexOf('?') > -1) {
+      const query = route.component.split('?')[1]
+      route.component = route.component.split('?')[0]
+      meta.query = qs.parse(query)
+    }
+
+    // 2. 生成 data（AppRouteRecordRaw）
+    // 路由地址转首字母大写驼峰，作为路由名称，适配keepAlive
+    let data: AppRouteRecordRaw = {
+      path:
+        route.path.indexOf('?') > -1 && !isUrl(route.path) ? route.path.split('?')[0] : route.path, // 注意，需要排除 http 这种 url，避免它带 ? 参数被截取掉
+      name:
+        route.componentName && route.componentName.length > 0
+          ? route.componentName
+          : toCamelCase(route.path, true),
+      redirect: route.redirect,
+      meta: meta
+    }
+    //处理顶级非目录路由
+    if (!route.children && route.parentId == 0 && route.component) {
+      data.component = Layout
+      data.meta = {
+        hidden: meta.hidden,
+      }
+      data.name = toCamelCase(route.path, true) + 'Parent'
+      data.redirect = ''
+      meta.alwaysShow = true
+      const childrenData: AppRouteRecordRaw = {
+        path: '',
+        name:
+          route.componentName && route.componentName.length > 0
+            ? route.componentName
+            : toCamelCase(route.path, true),
+        redirect: route.redirect,
+        meta: meta
+      }
+      const index = route?.component
+        ? modulesRoutesKeys.findIndex((ev) => ev.includes(route.component))
+        : modulesRoutesKeys.findIndex((ev) => ev.includes(route.path))
+      childrenData.component = modules[modulesRoutesKeys[index]]
+      data.children = [childrenData]
+    } else {
+      // 目录
+      if (route.children?.length) {
+        data.component = Layout
+        data.redirect = getRedirect(route.path, route.children)
+        // 外链
+      } else if (isUrl(route.path)) {
+        data = {
+          path: '/external-link',
+          component: Layout,
+          meta: {
+            name: route.name
+          },
+          children: [data]
+        } as AppRouteRecordRaw
+        // 菜单
+      } else {
+        // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会根path保持一致）
+        const index = route?.component
+          ? modulesRoutesKeys.findIndex((ev) => ev.includes(route.component))
+          : modulesRoutesKeys.findIndex((ev) => ev.includes(route.path))
+        data.component = modules[modulesRoutesKeys[index]]
+      }
+      if (route.children) {
+        data.children = generateRoute(route.children)
+      }
+    }
+    res.push(data as AppRouteRecordRaw)
+  }
+  return res
+}
+export const getRedirect = (parentPath: string, children: AppCustomRouteRecordRaw[]) => {
+  if (!children || children.length == 0) {
+    return parentPath
+  }
+  const path = generateRoutePath(parentPath, children[0].path)
+  // 递归子节点
+  if (children[0].children) return getRedirect(path, children[0].children)
+}
+const generateRoutePath = (parentPath: string, path: string) => {
+  if (parentPath.endsWith('/')) {
+    parentPath = parentPath.slice(0, -1) // 移除默认的 /
+  }
+  if (!path.startsWith('/')) {
+    path = '/' + path
+  }
+  return parentPath + path
+}
+export const pathResolve = (parentPath: string, path: string) => {
+  if (isUrl(path)) return path
+  const childPath = path.startsWith('/') || !path ? path : `/${path}`
+  return `${parentPath}${childPath}`.replace(/\/\//g, '/')
+}
+
+// 路由降级
+export const flatMultiLevelRoutes = (routes: AppRouteRecordRaw[]) => {
+  const modules: AppRouteRecordRaw[] = cloneDeep(routes)
+  for (let index = 0; index < modules.length; index++) {
+    const route = modules[index]
+    if (!isMultipleRoute(route)) {
+      continue
+    }
+    promoteRouteLevel(route)
+  }
+  return modules
+}
+
+// 层级是否大于2
+const isMultipleRoute = (route: AppRouteRecordRaw) => {
+  if (!route || !Reflect.has(route, 'children') || !route.children?.length) {
+    return false
+  }
+
+  const children = route.children
+
+  let flag = false
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index]
+    if (child.children?.length) {
+      flag = true
+      break
+    }
+  }
+  return flag
+}
+
+// 生成二级路由
+const promoteRouteLevel = (route: AppRouteRecordRaw) => {
+  let router: Router | null = createRouter({
+    routes: [route as RouteRecordRaw],
+    history: createWebHashHistory()
+  })
+
+  const routes = router.getRoutes()
+  addToChildren(routes, route.children || [], route)
+  router = null
+
+  route.children = route.children?.map((item) => omit(item, 'children'))
+}
+
+// 添加所有子菜单
+const addToChildren = (
+  routes: RouteRecordNormalized[],
+  children: AppRouteRecordRaw[],
+  routeModule: AppRouteRecordRaw
+) => {
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index]
+    const route = routes.find((item) => item.name === child.name)
+    if (!route) {
+      continue
+    }
+    routeModule.children = routeModule.children || []
+    if (!routeModule.children.find((item) => item.name === route.name)) {
+      routeModule.children?.push(route as unknown as AppRouteRecordRaw)
+    }
+    if (child.children?.length) {
+      addToChildren(routes, child.children, routeModule)
+    }
+  }
+}
+const toCamelCase = (str: string, upperCaseFirst: boolean) => {
+  str = (str || '')
+    .replace(/-(.)/g, function (group1: string) {
+      return group1.toUpperCase()
+    })
+    .replaceAll('-', '')
+
+  if (upperCaseFirst && str) {
+    str = str.charAt(0).toUpperCase() + str.slice(1)
+  }
+
+  return str
+}
diff --git a/marketing-ui/admin-ui/src/utils/tree.ts b/marketing-ui/admin-ui/src/utils/tree.ts
new file mode 100644
index 0000000..e5db503
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/tree.ts
@@ -0,0 +1,403 @@
+interface TreeHelperConfig {
+  id: string
+  children: string
+  pid: string
+}
+
+const DEFAULT_CONFIG: TreeHelperConfig = {
+  id: 'id',
+  children: 'children',
+  pid: 'pid'
+}
+export const defaultProps = {
+  children: 'children',
+  label: 'name',
+  value: 'id',
+  isLeaf: 'leaf',
+  emitPath: false // 用于 cascader 组件：在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
+}
+
+const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config)
+
+// tree from list
+export const listToTree = <T = any>(list: any[], config: Partial<TreeHelperConfig> = {}): T[] => {
+  const conf = getConfig(config) as TreeHelperConfig
+  const nodeMap = new Map()
+  const result: T[] = []
+  const { id, children, pid } = conf
+
+  for (const node of list) {
+    node[children] = node[children] || []
+    nodeMap.set(node[id], node)
+  }
+  for (const node of list) {
+    const parent = nodeMap.get(node[pid])
+    ;(parent ? parent.children : result).push(node)
+  }
+  return result
+}
+
+export const treeToList = <T = any>(tree: any, config: Partial<TreeHelperConfig> = {}): T => {
+  config = getConfig(config)
+  const { children } = config
+  const result: any = [...tree]
+  for (let i = 0; i < result.length; i++) {
+    if (!result[i][children!]) continue
+    result.splice(i + 1, 0, ...result[i][children!])
+  }
+  return result
+}
+
+export const findNode = <T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {}
+): T | null => {
+  config = getConfig(config)
+  const { children } = config
+  const list = [...tree]
+  for (const node of list) {
+    if (func(node)) return node
+    node[children!] && list.push(...node[children!])
+  }
+  return null
+}
+
+export const findNodeAll = <T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {}
+): T[] => {
+  config = getConfig(config)
+  const { children } = config
+  const list = [...tree]
+  const result: T[] = []
+  for (const node of list) {
+    func(node) && result.push(node)
+    node[children!] && list.push(...node[children!])
+  }
+  return result
+}
+
+export const findPath = <T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {}
+): T | T[] | null => {
+  config = getConfig(config)
+  const path: T[] = []
+  const list = [...tree]
+  const visitedSet = new Set()
+  const { children } = config
+  while (list.length) {
+    const node = list[0]
+    if (visitedSet.has(node)) {
+      path.pop()
+      list.shift()
+    } else {
+      visitedSet.add(node)
+      node[children!] && list.unshift(...node[children!])
+      path.push(node)
+      if (func(node)) {
+        return path
+      }
+    }
+  }
+  return null
+}
+
+export const findPathAll = (tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}) => {
+  config = getConfig(config)
+  const path: any[] = []
+  const list = [...tree]
+  const result: any[] = []
+  const visitedSet = new Set(),
+    { children } = config
+  while (list.length) {
+    const node = list[0]
+    if (visitedSet.has(node)) {
+      path.pop()
+      list.shift()
+    } else {
+      visitedSet.add(node)
+      node[children!] && list.unshift(...node[children!])
+      path.push(node)
+      func(node) && result.push([...path])
+    }
+  }
+  return result
+}
+
+export const filter = <T = any>(
+  tree: T[],
+  func: (n: T) => boolean,
+  config: Partial<TreeHelperConfig> = {}
+): T[] => {
+  config = getConfig(config)
+  const children = config.children as string
+
+  function listFilter(list: T[]) {
+    return list
+      .map((node: any) => ({ ...node }))
+      .filter((node) => {
+        node[children] = node[children] && listFilter(node[children])
+        return func(node) || (node[children] && node[children].length)
+      })
+  }
+
+  return listFilter(tree)
+}
+
+export const forEach = <T = any>(
+  tree: T[],
+  func: (n: T) => any,
+  config: Partial<TreeHelperConfig> = {}
+): void => {
+  config = getConfig(config)
+  const list: any[] = [...tree]
+  const { children } = config
+  for (let i = 0; i < list.length; i++) {
+    // func 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
+    if (func(list[i])) {
+      return
+    }
+    children && list[i][children] && list.splice(i + 1, 0, ...list[i][children])
+  }
+}
+
+/**
+ * @description: Extract tree specified structure
+ */
+export const treeMap = <T = any>(
+  treeData: T[],
+  opt: { children?: string; conversion: Fn }
+): T[] => {
+  return treeData.map((item) => treeMapEach(item, opt))
+}
+
+/**
+ * @description: Extract tree specified structure
+ */
+export const treeMapEach = (
+  data: any,
+  { children = 'children', conversion }: { children?: string; conversion: Fn }
+) => {
+  const haveChildren = Array.isArray(data[children]) && data[children].length > 0
+  const conversionData = conversion(data) || {}
+  if (haveChildren) {
+    return {
+      ...conversionData,
+      [children]: data[children].map((i: number) =>
+        treeMapEach(i, {
+          children,
+          conversion
+        })
+      )
+    }
+  } else {
+    return {
+      ...conversionData
+    }
+  }
+}
+
+/**
+ * 递归遍历树结构
+ * @param treeDatas 树
+ * @param callBack 回调
+ * @param parentNode 父节点
+ */
+export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) => {
+  treeDatas.forEach((element) => {
+    const newNode = callBack(element, parentNode) || element
+    if (element.children) {
+      eachTree(element.children, callBack, newNode)
+    }
+  })
+}
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+export const handleTree = (data: any[], id?: string, parentId?: string, children?: string) => {
+  if (!Array.isArray(data)) {
+    console.warn('data must be an array')
+    return []
+  }
+  const config = {
+    id: id || 'id',
+    parentId: parentId || 'parentId',
+    childrenList: children || 'children'
+  }
+
+  const childrenListMap = {}
+  const nodeIds = {}
+  const tree: any[] = []
+
+  for (const d of data) {
+    const parentId = d[config.parentId]
+    if (childrenListMap[parentId] == null) {
+      childrenListMap[parentId] = []
+    }
+    nodeIds[d[config.id]] = d
+    childrenListMap[parentId].push(d)
+  }
+
+  for (const d of data) {
+    const parentId = d[config.parentId]
+    if (nodeIds[parentId] == null) {
+      tree.push(d)
+    }
+  }
+
+  for (const t of tree) {
+    adaptToChildrenList(t)
+  }
+
+  function adaptToChildrenList(o) {
+    if (childrenListMap[o[config.id]] !== null) {
+      o[config.childrenList] = childrenListMap[o[config.id]]
+    }
+    if (o[config.childrenList]) {
+      for (const c of o[config.childrenList]) {
+        adaptToChildrenList(c)
+      }
+    }
+  }
+
+  return tree
+}
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ * @param {*} rootId 根Id 默认 0
+ */
+// @ts-ignore
+export const handleTree2 = (data, id, parentId, children, rootId) => {
+  id = id || 'id'
+  parentId = parentId || 'parentId'
+  // children = children || 'children'
+  rootId =
+    rootId ||
+    Math.min(
+      ...data.map((item) => {
+        return item[parentId]
+      })
+    ) ||
+    0
+  // 对源数据深度克隆
+  const cloneData = JSON.parse(JSON.stringify(data))
+  // 循环所有项
+  const treeData = cloneData.filter((father) => {
+    const branchArr = cloneData.filter((child) => {
+      // 返回每一项的子级数组
+      return father[id] === child[parentId]
+    })
+    branchArr.length > 0 ? (father.children = branchArr) : ''
+    // 返回第一层
+    return father[parentId] === rootId
+  })
+  return treeData !== '' ? treeData : data
+}
+
+/**
+ * 校验选中的节点，是否为指定 level
+ *
+ * @param tree 要操作的树结构数据
+ * @param nodeId 需要判断在什么层级的数据
+ * @param level 检查的级别, 默认检查到二级
+ * @return true 是；false 否
+ */
+export const checkSelectedNode = (tree: any[], nodeId: any, level = 2): boolean => {
+  if (typeof tree === 'undefined' || !Array.isArray(tree) || tree.length === 0) {
+    console.warn('tree must be an array')
+    return false
+  }
+
+  // 校验是否是一级节点
+  if (tree.some((item) => item.id === nodeId)) {
+    return false
+  }
+
+  // 递归计数
+  let count = 1
+
+  // 深层次校验
+  function performAThoroughValidation(arr: any[]): boolean {
+    count += 1
+    for (const item of arr) {
+      if (item.id === nodeId) {
+        return true
+      } else if (typeof item.children !== 'undefined' && item.children.length !== 0) {
+        if (performAThoroughValidation(item.children)) {
+          return true
+        }
+      }
+    }
+    return false
+  }
+
+  for (const item of tree) {
+    count = 1
+    if (performAThoroughValidation(item.children)) {
+      // 找到后对比是否是期望的层级
+      if (count >= level) {
+        return true
+      }
+    }
+  }
+
+  return false
+}
+
+/**
+ * 获取节点的完整结构
+ * @param tree 树数据
+ * @param nodeId 节点 id
+ */
+export const treeToString = (tree: any[], nodeId) => {
+  if (typeof tree === 'undefined' || !Array.isArray(tree) || tree.length === 0) {
+    console.warn('tree must be an array')
+    return ''
+  }
+  // 校验是否是一级节点
+  const node = tree.find((item) => item.id === nodeId)
+  if (typeof node !== 'undefined') {
+    return node.name
+  }
+  let str = ''
+
+  function performAThoroughValidation(arr) {
+    if (typeof arr === 'undefined' || !Array.isArray(arr) || arr.length === 0) {
+      return false
+    }
+    for (const item of arr) {
+      if (item.id === nodeId) {
+        str += ` / ${item.name}`
+        return true
+      } else if (typeof item.children !== 'undefined' && item.children.length !== 0) {
+        str += ` / ${item.name}`
+        if (performAThoroughValidation(item.children)) {
+          return true
+        }
+      }
+    }
+    return false
+  }
+
+  for (const item of tree) {
+    str = `${item.name}`
+    if (performAThoroughValidation(item.children)) {
+      break
+    }
+  }
+  return str
+}
diff --git a/marketing-ui/admin-ui/src/utils/tsxHelper.ts b/marketing-ui/admin-ui/src/utils/tsxHelper.ts
new file mode 100644
index 0000000..6087fa3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/utils/tsxHelper.ts
@@ -0,0 +1,16 @@
+import { Slots } from 'vue'
+import { isFunction } from '@/utils/is'
+
+export const getSlot = (slots: Slots, slot = 'default', data?: Recordable) => {
+  // Reflect.has 判断一个对象是否存在某个属性
+  if (!slots || !Reflect.has(slots, slot)) {
+    return null
+  }
+  if (!isFunction(slots[slot])) {
+    console.error(`${slot} is not a function!`)
+    return null
+  }
+  const slotFn = slots[slot]
+  if (!slotFn) return null
+  return slotFn(data)
+}
diff --git a/marketing-ui/admin-ui/src/views/Error/403.vue b/marketing-ui/admin-ui/src/views/Error/403.vue
new file mode 100644
index 0000000..a3ec487
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Error/403.vue
@@ -0,0 +1,8 @@
+<template>
+  <Error type="403" @error-click="push('/')" />
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'Error403' })
+
+const { push } = useRouter()
+</script>
diff --git a/marketing-ui/admin-ui/src/views/Error/404.vue b/marketing-ui/admin-ui/src/views/Error/404.vue
new file mode 100644
index 0000000..f6a08de
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Error/404.vue
@@ -0,0 +1,7 @@
+<template>
+  <Error @error-click="push('/')" />
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'Error404' })
+const { push } = useRouter()
+</script>
diff --git a/marketing-ui/admin-ui/src/views/Error/500.vue b/marketing-ui/admin-ui/src/views/Error/500.vue
new file mode 100644
index 0000000..998487d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Error/500.vue
@@ -0,0 +1,7 @@
+<template>
+  <Error type="500" @error-click="push('/')" />
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'Error500' })
+const { push } = useRouter()
+</script>
diff --git a/marketing-ui/admin-ui/src/views/Home/Index.vue b/marketing-ui/admin-ui/src/views/Home/Index.vue
new file mode 100644
index 0000000..44f08fa
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Home/Index.vue
@@ -0,0 +1,171 @@
+<template>
+  <el-row class="mt-8px" :gutter="8" justify="space-between">
+    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="mb-8px">
+      <el-card shadow="never" class="mt-8px">
+        <el-skeleton :loading="loading" animated>
+          <el-row :gutter="20" justify="space-between">
+            <!-- 一周发送图表 -->
+            <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+              <el-card shadow="hover" class="mb-8px">
+                <el-skeleton :loading="loading" animated>
+                  <Echart :options="weeklySendOptionsData" :height="300" />
+                </el-skeleton>
+              </el-card>
+            </el-col>
+            <!-- 渠道发送饼状图 -->
+            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+              <el-card shadow="hover" class="mb-8px">
+                <el-skeleton :loading="loading" animated>
+                  <Echart :options="channelSendOptionsData" :height="280" />
+                </el-skeleton>
+              </el-card>
+            </el-col>
+            <!-- 模板发送饼状图 -->
+            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+              <el-card shadow="hover" class="mb-8px">
+                <el-skeleton :loading="loading" animated>
+                  <Echart :options="templateSendOptionsData" :height="280" />
+                </el-skeleton>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+<script lang="ts" setup>
+import { set } from 'lodash-es'
+import { EChartsOption } from 'echarts'
+import { formatTime } from '@/utils'
+
+import { useUserStore } from '@/store/modules/user'
+import { useWatermark } from '@/hooks/web/useWatermark'
+import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
+import { pieOptions, barOptions, weeklySendOptions, channelSendOptions, templateSendOptions } from './echarts-data'
+
+defineOptions({ name: 'Home' })
+
+const { t } = useI18n()
+const userStore = useUserStore()
+const { setWatermark } = useWatermark()
+const loading = ref(true)
+const avatar = userStore.getUser.avatar
+const username = userStore.getUser.nickname
+const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
+// 获取统计数
+let totalSate = reactive<WorkplaceTotal>({
+  project: 0,
+  todo: 0
+})
+
+const getCount = async () => {
+  const data = {
+    project: 40,
+    todo: 10
+  }
+  totalSate = Object.assign(totalSate, data)
+}
+
+// 短信发送统计图表
+const weeklySendOptionsData = reactive<EChartsOption>(weeklySendOptions) as EChartsOption
+const channelSendOptionsData = reactive<EChartsOption>(channelSendOptions) as EChartsOption
+const templateSendOptionsData = reactive<EChartsOption>(templateSendOptions) as EChartsOption
+
+// 获取一周发送数据
+const getWeeklySendData = async () => {
+  const data = [
+    { value: 1200, name: '周一' },
+    { value: 1900, name: '周二' },
+    { value: 3000, name: '周三' },
+    { value: 2500, name: '周四' },
+    { value: 1800, name: '周五' },
+    { value: 1600, name: '周六' },
+    { value: 900, name: '周日' }
+  ]
+  weeklySendOptionsData!.xAxis!.data = data.map(item => item.name)
+  weeklySendOptionsData!.series![0].data = data.map(item => item.value)
+}
+
+// 获取渠道发送数据
+const getChannelSendData = async () => {
+  const data = [
+    { value: 3350, name: '中国移动' },
+    { value: 3100, name: '中国联通' },
+    { value: 2340, name: '中国电信' },
+    { value: 1350, name: '其他渠道' }
+  ]
+  channelSendOptionsData!.series![0].data = data
+}
+
+// 获取模板发送数据
+const getTemplateSendData = async () => {
+  const data = [
+    { value: 4350, name: '验证码模板' },
+    { value: 2100, name: '通知模板' },
+    { value: 1340, name: '营销模板' },
+    { value: 850, name: '其他模板' }
+  ]
+  templateSendOptionsData!.series![0].data = data
+}
+
+// 用户来源
+const getUserAccessSource = async () => {
+  const data = [
+    { value: 335, name: 'analysis.directAccess' },
+    { value: 310, name: 'analysis.mailMarketing' },
+    { value: 234, name: 'analysis.allianceAdvertising' },
+    { value: 135, name: 'analysis.videoAdvertising' },
+    { value: 1548, name: 'analysis.searchEngines' }
+  ]
+  set(
+    pieOptionsData,
+    'legend.data',
+    data.map((v) => t(v.name))
+  )
+  pieOptionsData!.series![0].data = data.map((v) => {
+    return {
+      name: t(v.name),
+      value: v.value
+    }
+  })
+}
+const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
+
+// 周活跃量
+const getWeeklyUserActivity = async () => {
+  const data = [
+    { value: 13253, name: 'analysis.monday' },
+    { value: 34235, name: 'analysis.tuesday' },
+    { value: 26321, name: 'analysis.wednesday' },
+    { value: 12340, name: 'analysis.thursday' },
+    { value: 24643, name: 'analysis.friday' },
+    { value: 1322, name: 'analysis.saturday' },
+    { value: 1324, name: 'analysis.sunday' }
+  ]
+  set(
+    barOptionsData,
+    'xAxis.data',
+    data.map((v) => t(v.name))
+  )
+  set(barOptionsData, 'series', [
+    {
+      name: t('analysis.activeQuantity'),
+      data: data.map((v) => v.value),
+      type: 'bar'
+    }
+  ])
+}
+
+const getAllApi = async () => {
+  await Promise.all([
+    getCount(),
+    getWeeklySendData(),
+    getChannelSendData(),
+    getTemplateSendData()
+  ])
+  loading.value = false
+}
+
+getAllApi()
+</script>
diff --git a/marketing-ui/admin-ui/src/views/Home/Index2.vue b/marketing-ui/admin-ui/src/views/Home/Index2.vue
new file mode 100644
index 0000000..c9429ab
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Home/Index2.vue
@@ -0,0 +1,319 @@
+<template>
+  <el-row :class="prefixCls" :gutter="20" justify="space-between">
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
+          <template #default>
+            <div :class="`${prefixCls}__item flex justify-between`">
+              <div>
+                <div
+                  :class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`"
+                >
+                  <Icon :size="40" icon="svg-icon:peoples" />
+                </div>
+              </div>
+              <div class="flex flex-col justify-between">
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.newUser') }}
+                </div>
+                <CountTo
+                  :duration="2600"
+                  :end-val="102400"
+                  :start-val="0"
+                  class="text-right text-20px font-700"
+                />
+              </div>
+            </div>
+          </template>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
+          <template #default>
+            <div :class="`${prefixCls}__item flex justify-between`">
+              <div>
+                <div
+                  :class="`${prefixCls}__item--icon ${prefixCls}__item--message p-16px inline-block rounded-6px`"
+                >
+                  <Icon :size="40" icon="svg-icon:message" />
+                </div>
+              </div>
+              <div class="flex flex-col justify-between">
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.unreadInformation') }}
+                </div>
+                <CountTo
+                  :duration="2600"
+                  :end-val="81212"
+                  :start-val="0"
+                  class="text-right text-20px font-700"
+                />
+              </div>
+            </div>
+          </template>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
+          <template #default>
+            <div :class="`${prefixCls}__item flex justify-between`">
+              <div>
+                <div
+                  :class="`${prefixCls}__item--icon ${prefixCls}__item--money p-16px inline-block rounded-6px`"
+                >
+                  <Icon :size="40" icon="svg-icon:money" />
+                </div>
+              </div>
+              <div class="flex flex-col justify-between">
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.transactionAmount') }}
+                </div>
+                <CountTo
+                  :duration="2600"
+                  :end-val="9280"
+                  :start-val="0"
+                  class="text-right text-20px font-700"
+                />
+              </div>
+            </div>
+          </template>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
+          <template #default>
+            <div :class="`${prefixCls}__item flex justify-between`">
+              <div>
+                <div
+                  :class="`${prefixCls}__item--icon ${prefixCls}__item--shopping p-16px inline-block rounded-6px`"
+                >
+                  <Icon :size="40" icon="svg-icon:shopping" />
+                </div>
+              </div>
+              <div class="flex flex-col justify-between">
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.totalShopping') }}
+                </div>
+                <CountTo
+                  :duration="2600"
+                  :end-val="13600"
+                  :start-val="0"
+                  class="text-right text-20px font-700"
+                />
+              </div>
+            </div>
+          </template>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" justify="space-between">
+    <el-col :lg="10" :md="24" :sm="24" :xl="10" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="300" :options="pieOptionsData" />
+        </el-skeleton>
+      </el-card>
+    </el-col>
+    <el-col :lg="14" :md="24" :sm="24" :xl="14" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="300" :options="barOptionsData" />
+        </el-skeleton>
+      </el-card>
+    </el-col>
+    <el-col :span="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="4" animated>
+          <Echart :height="350" :options="lineOptionsData" />
+        </el-skeleton>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+<script lang="ts" setup>
+import { set } from 'lodash-es'
+import { EChartsOption } from 'echarts'
+
+import { useDesign } from '@/hooks/web/useDesign'
+import type { AnalysisTotalTypes } from './types'
+import { barOptions, lineOptions, pieOptions } from './echarts-data'
+
+defineOptions({ name: 'Home2' })
+
+const { t } = useI18n()
+const loading = ref(true)
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('panel')
+const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
+
+let totalState = reactive<AnalysisTotalTypes>({
+  users: 0,
+  messages: 0,
+  moneys: 0,
+  shoppings: 0
+})
+
+const getCount = async () => {
+  const data = {
+    users: 102400,
+    messages: 81212,
+    moneys: 9280,
+    shoppings: 13600
+  }
+  totalState = Object.assign(totalState, data)
+}
+
+// 用户来源
+const getUserAccessSource = async () => {
+  const data = [
+    { value: 335, name: 'analysis.directAccess' },
+    { value: 310, name: 'analysis.mailMarketing' },
+    { value: 234, name: 'analysis.allianceAdvertising' },
+    { value: 135, name: 'analysis.videoAdvertising' },
+    { value: 1548, name: 'analysis.searchEngines' }
+  ]
+  set(
+    pieOptionsData,
+    'legend.data',
+    data.map((v) => t(v.name))
+  )
+  set(pieOptionsData, 'series.data', data)
+}
+const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
+
+// 周活跃量
+const getWeeklyUserActivity = async () => {
+  const data = [
+    { value: 13253, name: 'analysis.monday' },
+    { value: 34235, name: 'analysis.tuesday' },
+    { value: 26321, name: 'analysis.wednesday' },
+    { value: 12340, name: 'analysis.thursday' },
+    { value: 24643, name: 'analysis.friday' },
+    { value: 1322, name: 'analysis.saturday' },
+    { value: 1324, name: 'analysis.sunday' }
+  ]
+  set(
+    barOptionsData,
+    'xAxis.data',
+    data.map((v) => t(v.name))
+  )
+  set(barOptionsData, 'series', [
+    {
+      name: t('analysis.activeQuantity'),
+      data: data.map((v) => v.value),
+      type: 'bar'
+    }
+  ])
+}
+
+const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
+
+// 每月销售总额
+const getMonthlySales = async () => {
+  const data = [
+    { estimate: 100, actual: 120, name: 'analysis.january' },
+    { estimate: 120, actual: 82, name: 'analysis.february' },
+    { estimate: 161, actual: 91, name: 'analysis.march' },
+    { estimate: 134, actual: 154, name: 'analysis.april' },
+    { estimate: 105, actual: 162, name: 'analysis.may' },
+    { estimate: 160, actual: 140, name: 'analysis.june' },
+    { estimate: 165, actual: 145, name: 'analysis.july' },
+    { estimate: 114, actual: 250, name: 'analysis.august' },
+    { estimate: 163, actual: 134, name: 'analysis.september' },
+    { estimate: 185, actual: 56, name: 'analysis.october' },
+    { estimate: 118, actual: 99, name: 'analysis.november' },
+    { estimate: 123, actual: 123, name: 'analysis.december' }
+  ]
+  set(
+    lineOptionsData,
+    'xAxis.data',
+    data.map((v) => t(v.name))
+  )
+  set(lineOptionsData, 'series', [
+    {
+      name: t('analysis.estimate'),
+      smooth: true,
+      type: 'line',
+      data: data.map((v) => v.estimate),
+      animationDuration: 2800,
+      animationEasing: 'cubicInOut'
+    },
+    {
+      name: t('analysis.actual'),
+      smooth: true,
+      type: 'line',
+      itemStyle: {},
+      data: data.map((v) => v.actual),
+      animationDuration: 2800,
+      animationEasing: 'quadraticOut'
+    }
+  ])
+}
+
+const getAllApi = async () => {
+  await Promise.all([getCount(), getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()])
+  loading.value = false
+}
+
+getAllApi()
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-panel;
+
+.#{$prefix-cls} {
+  &__item {
+    &--peoples {
+      color: #40c9c6;
+    }
+
+    &--message {
+      color: #36a3f7;
+    }
+
+    &--money {
+      color: #f4516c;
+    }
+
+    &--shopping {
+      color: #34bfa3;
+    }
+
+    &:hover {
+      :deep(.#{$namespace}-icon) {
+        color: #fff !important;
+      }
+
+      .#{$prefix-cls}__item--icon {
+        transition: all 0.38s ease-out;
+      }
+
+      .#{$prefix-cls}__item--peoples {
+        background: #40c9c6;
+      }
+
+      .#{$prefix-cls}__item--message {
+        background: #36a3f7;
+      }
+
+      .#{$prefix-cls}__item--money {
+        background: #f4516c;
+      }
+
+      .#{$prefix-cls}__item--shopping {
+        background: #34bfa3;
+      }
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/Home/echarts-data.ts b/marketing-ui/admin-ui/src/views/Home/echarts-data.ts
new file mode 100644
index 0000000..b119004
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Home/echarts-data.ts
@@ -0,0 +1,399 @@
+import { EChartsOption } from 'echarts'
+
+const { t } = useI18n()
+
+export const lineOptions: EChartsOption = {
+  title: {
+    text: t('analysis.monthlySales'),
+    left: 'center'
+  },
+  xAxis: {
+    data: [
+      t('analysis.january'),
+      t('analysis.february'),
+      t('analysis.march'),
+      t('analysis.april'),
+      t('analysis.may'),
+      t('analysis.june'),
+      t('analysis.july'),
+      t('analysis.august'),
+      t('analysis.september'),
+      t('analysis.october'),
+      t('analysis.november'),
+      t('analysis.december')
+    ],
+    boundaryGap: false,
+    axisTick: {
+      show: false
+    }
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    },
+    padding: [5, 10]
+  },
+  yAxis: {
+    axisTick: {
+      show: false
+    }
+  },
+  legend: {
+    data: [t('analysis.estimate'), t('analysis.actual')],
+    top: 50
+  },
+  series: [
+    {
+      name: t('analysis.estimate'),
+      smooth: true,
+      type: 'line',
+      data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
+      animationDuration: 2800,
+      animationEasing: 'cubicInOut'
+    },
+    {
+      name: t('analysis.actual'),
+      smooth: true,
+      type: 'line',
+      itemStyle: {},
+      data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
+      animationDuration: 2800,
+      animationEasing: 'quadraticOut'
+    }
+  ]
+}
+
+export const pieOptions: EChartsOption = {
+  title: {
+    text: t('analysis.userAccessSource'),
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    data: [
+      t('analysis.directAccess'),
+      t('analysis.mailMarketing'),
+      t('analysis.allianceAdvertising'),
+      t('analysis.videoAdvertising'),
+      t('analysis.searchEngines')
+    ]
+  },
+  series: [
+    {
+      name: t('analysis.userAccessSource'),
+      type: 'pie',
+      radius: '55%',
+      center: ['50%', '60%'],
+      data: [
+        { value: 335, name: t('analysis.directAccess') },
+        { value: 310, name: t('analysis.mailMarketing') },
+        { value: 234, name: t('analysis.allianceAdvertising') },
+        { value: 135, name: t('analysis.videoAdvertising') },
+        { value: 1548, name: t('analysis.searchEngines') }
+      ]
+    }
+  ]
+}
+
+export const barOptions: EChartsOption = {
+  title: {
+    text: t('analysis.weeklyUserActivity'),
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: 50,
+    right: 20,
+    bottom: 20
+  },
+  xAxis: {
+    type: 'category',
+    data: [
+      t('analysis.monday'),
+      t('analysis.tuesday'),
+      t('analysis.wednesday'),
+      t('analysis.thursday'),
+      t('analysis.friday'),
+      t('analysis.saturday'),
+      t('analysis.sunday')
+    ],
+    axisTick: {
+      alignWithLabel: true
+    }
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: t('analysis.activeQuantity'),
+      data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
+      type: 'bar'
+    }
+  ]
+}
+
+export const radarOption: EChartsOption = {
+  legend: {
+    data: [t('workplace.personal'), t('workplace.team')]
+  },
+  radar: {
+    // shape: 'circle',
+    indicator: [
+      { name: t('workplace.quote'), max: 65 },
+      { name: t('workplace.contribution'), max: 160 },
+      { name: t('workplace.hot'), max: 300 },
+      { name: t('workplace.yield'), max: 130 },
+      { name: t('workplace.follow'), max: 100 }
+    ]
+  },
+  series: [
+    {
+      name: `xxx${t('workplace.index')}`,
+      type: 'radar',
+      data: [
+        {
+          value: [42, 30, 20, 35, 80],
+          name: t('workplace.personal')
+        },
+        {
+          value: [50, 140, 290, 100, 90],
+          name: t('workplace.team')
+        }
+      ]
+    }
+  ]
+}
+
+// 短信发送统计相关图表配置已删除
+
+export const wordOptions = {
+  series: [
+    {
+      type: 'wordCloud',
+      gridSize: 2,
+      sizeRange: [12, 50],
+      rotationRange: [-90, 90],
+      shape: 'pentagon',
+      width: 600,
+      height: 400,
+      drawOutOfBound: true,
+      textStyle: {
+        color: function () {
+          return (
+            'rgb(' +
+            [
+              Math.round(Math.random() * 160),
+              Math.round(Math.random() * 160),
+              Math.round(Math.random() * 160)
+            ].join(',') +
+            ')'
+          )
+        }
+      },
+      emphasis: {
+        textStyle: {
+          shadowBlur: 10,
+          shadowColor: '#333'
+        }
+      },
+      data: [
+        {
+          name: 'Sam S Club',
+          value: 10000,
+          textStyle: {
+            color: 'black'
+          },
+          emphasis: {
+            textStyle: {
+              color: 'red'
+            }
+          }
+        },
+        {
+          name: 'Macys',
+          value: 6181
+        },
+        {
+          name: 'Amy Schumer',
+          value: 4386
+        },
+        {
+          name: 'Jurassic World',
+          value: 4055
+        },
+        {
+          name: 'Charter Communications',
+          value: 2467
+        },
+        {
+          name: 'Chick Fil A',
+          value: 2244
+        },
+        {
+          name: 'Planet Fitness',
+          value: 1898
+        },
+        {
+          name: 'Pitch Perfect',
+          value: 1484
+        },
+        {
+          name: 'Express',
+          value: 1112
+        },
+        {
+          name: 'Home',
+          value: 965
+        },
+        {
+          name: 'Johnny Depp',
+          value: 847
+        },
+        {
+          name: 'Lena Dunham',
+          value: 582
+        },
+        {
+          name: 'Lewis Hamilton',
+          value: 555
+        },
+        {
+          name: 'KXAN',
+          value: 550
+        },
+        {
+          name: 'Mary Ellen Mark',
+          value: 462
+        },
+        {
+          name: 'Farrah Abraham',
+          value: 366
+        },
+        {
+          name: 'Rita Ora',
+          value: 360
+        },
+        {
+          name: 'Serena Williams',
+          value: 282
+        },
+        {
+          name: 'NCAA baseball tournament',
+          value: 273
+        },
+        {
+          name: 'Point Break',
+          value: 265
+        }
+      ]
+    }
+  ]
+}
+
+// 短信发送统计相关图表配置
+
+// 一周发送图表
+export const weeklySendOptions: EChartsOption = {
+  title: {
+    text: '一周发送统计',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: 50,
+    right: 20,
+    bottom: 20
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+    axisTick: {
+      alignWithLabel: true
+    }
+  },
+  yAxis: {
+    type: 'value',
+    name: '发送次数'
+  },
+  series: [
+    {
+      name: '发送次数',
+      data: [],
+      type: 'bar'
+    }
+  ]
+}
+
+// 渠道发送饼状图
+export const channelSendOptions: EChartsOption = {
+  title: {
+    text: '按渠道发送短信',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  series: [
+    {
+      name: '发送渠道',
+      type: 'pie',
+      radius: '55%',
+      center: ['50%', '60%'],
+      data: []
+    }
+  ]
+}
+
+// 模板发送饼状图
+export const templateSendOptions: EChartsOption = {
+  title: {
+    text: '按模板发送短信',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  series: [
+    {
+      name: '模板类型',
+      type: 'pie',
+      radius: '55%',
+      center: ['50%', '60%'],
+      data: []
+    }
+  ]
+}
diff --git a/marketing-ui/admin-ui/src/views/Home/types.ts b/marketing-ui/admin-ui/src/views/Home/types.ts
new file mode 100644
index 0000000..62d3a3f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Home/types.ts
@@ -0,0 +1,54 @@
+export type WorkplaceTotal = {
+  project: number
+  todo: number
+}
+
+export type Project = {
+  name: string
+  icon: string
+  message: string
+  personal: string
+  time: Date | number | string
+}
+
+export type Notice = {
+  title: string
+  type: string
+  keys: string[]
+  date: Date | number | string
+}
+
+export type Shortcut = {
+  name: string
+  icon: string
+  url: string
+}
+
+export type RadarData = {
+  personal: number
+  team: number
+  max: number
+  name: string
+}
+export type AnalysisTotalTypes = {
+  users: number
+  messages: number
+  moneys: number
+  shoppings: number
+}
+
+export type UserAccessSource = {
+  value: number
+  name: string
+}
+
+export type WeeklyUserActivity = {
+  value: number
+  name: string
+}
+
+export type MonthlySales = {
+  name: string
+  estimate: number
+  actual: number
+}
diff --git a/marketing-ui/admin-ui/src/views/Login/Login.vue b/marketing-ui/admin-ui/src/views/Login/Login.vue
new file mode 100644
index 0000000..b2ff380
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Login/Login.vue
@@ -0,0 +1,121 @@
+<template>
+  <div
+    :class="prefixCls"
+    class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
+  >
+    <div class="relative mx-auto h-full flex">
+      <div
+        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
+      >
+        <!-- 左上角的 logo + 系统标题 -->
+        <div class="relative flex items-center text-white">
+          <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
+          <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
+        </div>
+        <!-- 左边的背景图 + 欢迎语 -->
+        <div class="h-[calc(100%-60px)] flex items-center justify-center">
+          <TransitionGroup
+            appear
+            enter-active-class="animate__animated animate__bounceInLeft"
+            tag="div"
+          >
+            <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
+            <div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
+            <div key="3" class="mt-5 text-14px font-normal text-white">
+              {{ t('login.message') }}
+            </div>
+          </TransitionGroup>
+        </div>
+      </div>
+      <div
+        class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
+      >
+        <!-- 右上角的主题、语言选择 -->
+        <div
+          class="flex items-center justify-between at-2xl:justify-end at-xl:justify-end"
+          style="color: var(--el-text-color-primary);"
+        >
+          <div class="flex items-center at-2xl:hidden at-xl:hidden">
+            <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
+            <span class="text-20px font-bold" >{{ underlineToHump(appStore.getTitle) }}</span>
+          </div>
+          <div class="flex items-center justify-end space-x-10px h-48px">
+            <ThemeSwitch />
+            <LocaleDropdown />
+          </div>
+        </div>
+        <!-- 右边的登录界面 -->
+        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
+          <div
+            class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
+          >
+            <!-- 账号登录 -->
+            <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+            <!-- 手机登录 -->
+            <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+            <!-- 二维码登录 -->
+            <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+            <!-- 注册 -->
+            <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+            <!-- 三方登录 -->
+            <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+            <!-- 忘记密码 -->
+            <ForgetPasswordForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { underlineToHump } from '@/utils'
+
+import { useDesign } from '@/hooks/web/useDesign'
+import { useAppStore } from '@/store/modules/app'
+import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
+import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
+
+import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from './components'
+
+defineOptions({ name: 'Login' })
+
+const { t } = useI18n()
+const appStore = useAppStore()
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('login')
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-login;
+
+.#{$prefix-cls} {
+  overflow: auto;
+
+  &__left {
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      background-image: url('@/assets/svgs/login-bg.svg');
+      background-position: center;
+      background-repeat: no-repeat;
+      content: '';
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.dark .login-form {
+  .el-divider__text {
+    background-color: var(--login-bg-color);
+  }
+
+  .el-card {
+    background-color: var(--login-bg-color);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/Login/SocialLogin.vue b/marketing-ui/admin-ui/src/views/Login/SocialLogin.vue
new file mode 100644
index 0000000..e0caace
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Login/SocialLogin.vue
@@ -0,0 +1,347 @@
+<template>
+  <div
+    :class="prefixCls"
+    class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
+  >
+    <div class="relative mx-auto h-full flex">
+      <div
+        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
+      >
+        <!-- 左上角的 logo + 系统标题 -->
+        <div class="relative flex items-center text-white">
+          <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
+          <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
+        </div>
+        <!-- 左边的背景图 + 欢迎语 -->
+        <div class="h-[calc(100%-60px)] flex items-center justify-center">
+          <TransitionGroup
+            appear
+            enter-active-class="animate__animated animate__bounceInLeft"
+            tag="div"
+          >
+            <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
+            <div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
+            <div key="3" class="mt-5 text-14px font-normal text-white">
+              {{ t('login.message') }}
+            </div>
+          </TransitionGroup>
+        </div>
+      </div>
+      <div
+        class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
+      >
+        <!-- 右上角的主题、语言选择 -->
+        <div
+          class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
+        >
+          <div class="flex items-center at-2xl:hidden at-xl:hidden">
+            <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
+            <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
+          </div>
+          <div class="flex items-center justify-end space-x-10px h-48px">
+            <ThemeSwitch />
+            <LocaleDropdown class="dark:text-white lt-xl:text-white" />
+          </div>
+        </div>
+        <!-- 右边的登录界面 -->
+        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
+          <div
+            class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
+          >
+            <!-- 账号登录 -->
+            <el-form
+              v-show="getShow"
+              ref="formLogin"
+              :model="loginData.loginForm"
+              :rules="LoginRules"
+              class="login-form"
+              label-position="top"
+              label-width="120px"
+              size="large"
+            >
+              <el-row style="margin-right: -10px; margin-left: -10px">
+                <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+                  <el-form-item>
+                    <LoginFormTitle style="width: 100%" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+                  <el-form-item v-if="loginData.tenantEnable" prop="tenantName">
+                    <el-input
+                      v-model="loginData.loginForm.tenantName"
+                      :placeholder="t('login.tenantNamePlaceholder')"
+                      :prefix-icon="iconHouse"
+                      link
+                      type="primary"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+                  <el-form-item prop="username">
+                    <el-input
+                      v-model="loginData.loginForm.username"
+                      :placeholder="t('login.usernamePlaceholder')"
+                      :prefix-icon="iconAvatar"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+                  <el-form-item prop="password">
+                    <el-input
+                      v-model="loginData.loginForm.password"
+                      :placeholder="t('login.passwordPlaceholder')"
+                      :prefix-icon="iconLock"
+                      show-password
+                      type="password"
+                      @keyup.enter="getCode()"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col
+                  :span="24"
+                  style="
+                    padding-right: 10px;
+                    padding-left: 10px;
+                    margin-top: -20px;
+                    margin-bottom: -20px;
+                  "
+                >
+                  <el-form-item>
+                    <el-row justify="space-between" style="width: 100%">
+                      <el-col :span="6">
+                        <el-checkbox v-model="loginData.loginForm.rememberMe">
+                          {{ t('login.remember') }}
+                        </el-checkbox>
+                      </el-col>
+                      <el-col :offset="6" :span="12">
+                        <el-link style="float: right" type="primary"
+                          >{{ t('login.forgetPassword') }}
+                        </el-link>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+                  <el-form-item>
+                    <XButton
+                      :loading="loginLoading"
+                      :title="t('login.login')"
+                      class="w-[100%]"
+                      type="primary"
+                      @click="getCode()"
+                    />
+                  </el-form-item>
+                </el-col>
+                <Verify
+                  v-if="loginData.captchaEnable === 'true'"
+                  ref="verify"
+                  :captchaType="captchaType"
+                  :imgSize="{ width: '400px', height: '200px' }"
+                  mode="pop"
+                  @success="handleLogin"
+                />
+              </el-row>
+            </el-form>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { underlineToHump } from '@/utils'
+
+import { ElLoading } from 'element-plus'
+
+import { useDesign } from '@/hooks/web/useDesign'
+import { useAppStore } from '@/store/modules/app'
+import { useIcon } from '@/hooks/web/useIcon'
+import { usePermissionStore } from '@/store/modules/permission'
+
+import * as LoginApi from '@/api/login'
+import * as authUtil from '@/utils/auth'
+import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
+import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
+import { LoginStateEnum, useFormValid, useLoginState } from './components/useLogin'
+import LoginFormTitle from './components/LoginFormTitle.vue'
+import router from '@/router'
+
+defineOptions({ name: 'SocialLogin' })
+
+const { t } = useI18n()
+const route = useRoute()
+
+const appStore = useAppStore()
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('login')
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconAvatar = useIcon({ icon: 'ep:avatar' })
+const iconLock = useIcon({ icon: 'ep:lock' })
+const formLogin = ref<any>()
+const { validForm } = useFormValid(formLogin)
+const { getLoginState } = useLoginState()
+const { push } = useRouter()
+const permissionStore = usePermissionStore()
+const loginLoading = ref(false)
+const verify = ref()
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
+
+const LoginRules = {
+  tenantName: [required],
+  username: [required],
+  password: [required]
+}
+const loginData = reactive({
+  isShowPassword: false,
+  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE !== 'false',
+  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE !== 'false',
+  loginForm: {
+    tenantName: '芋道源码',
+    username: 'admin',
+    password: 'admin123',
+    captchaVerification: '',
+    rememberMe: false
+  }
+})
+
+// 获取验证码
+const getCode = async () => {
+  // 情况一，未开启：则直接登录
+  if (!loginData.captchaEnable) {
+    await handleLogin({})
+  } else {
+    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+    // 弹出验证码
+    verify.value.show()
+  }
+}
+//获取租户ID
+const getTenantId = async () => {
+  if (loginData.tenantEnable) {
+    const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
+    authUtil.setTenantId(res)
+  }
+}
+// 记住我
+const getCookie = () => {
+  const loginForm = authUtil.getLoginForm()
+  if (loginForm) {
+    loginData.loginForm = {
+      ...loginData.loginForm,
+      username: loginForm.username ? loginForm.username : loginData.loginForm.username,
+      password: loginForm.password ? loginForm.password : loginData.loginForm.password,
+      rememberMe: loginForm.rememberMe ? true : false,
+      tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName
+    }
+  }
+}
+const loading = ref() // ElLoading.service 返回的实例
+
+// tricky: 配合LoginForm.vue中redirectUri需要对参数进行encode，需要在回调后进行decode
+function getUrlValue(key: string): string {
+  const url = new URL(decodeURIComponent(location.href))
+  return url.searchParams.get(key) ?? ''
+}
+
+// 尝试登录: 当账号已经绑定，socialLogin会直接获得token
+const tryLogin = async () => {
+  try {
+    const type = getUrlValue('type')
+    const redirect = getUrlValue('redirect')
+    const code = route?.query?.code as string
+    const state = route?.query?.state as string
+
+    const res = await LoginApi.socialLogin(type, code, state)
+    authUtil.setToken(res)
+
+    router.push({ path: redirect || '/' })
+  } catch (err) {}
+}
+
+// 登录
+const handleLogin = async (params) => {
+  loginLoading.value = true
+  try {
+    await getTenantId()
+    const data = await validForm()
+    if (!data) {
+      return
+    }
+
+    let redirect = getUrlValue('redirect')
+
+    const type = getUrlValue('type')
+    const code = route?.query?.code as string
+    const state = route?.query?.state as string
+
+    const loginDataLoginForm = { ...loginData.loginForm }
+    const res = await LoginApi.login({
+      // 账号密码登录
+      username: loginDataLoginForm.username,
+      password: loginDataLoginForm.password,
+      captchaVerification: params.captchaVerification,
+      // 社交登录
+      socialCode: code,
+      socialState: state,
+      socialType: type
+    })
+    if (!res) {
+      return
+    }
+    loading.value = ElLoading.service({
+      lock: true,
+      text: '正在加载系统中...',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+    if (loginDataLoginForm.rememberMe) {
+      authUtil.setLoginForm(loginDataLoginForm)
+    } else {
+      authUtil.removeLoginForm()
+    }
+    authUtil.setToken(res)
+    if (!redirect) {
+      redirect = '/'
+    }
+    // 判断是否为SSO登录
+    if (redirect.indexOf('sso') !== -1) {
+      window.location.href = window.location.href.replace('/login?redirect=', '')
+    } else {
+      push({ path: redirect || permissionStore.addRouters[0].path })
+    }
+  } finally {
+    loginLoading.value = false
+    loading.value.close()
+  }
+}
+
+onMounted(() => {
+  getCookie()
+  tryLogin()
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-login;
+
+.#{$prefix-cls} {
+  overflow: auto;
+
+  &__left {
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      background-image: url('@/assets/svgs/login-bg.svg');
+      background-position: center;
+      background-repeat: no-repeat;
+      content: '';
+    }
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/Login/components/ForgetPasswordForm.vue b/marketing-ui/admin-ui/src/views/Login/components/ForgetPasswordForm.vue
new file mode 100644
index 0000000..c1522f1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Login/components/ForgetPasswordForm.vue
@@ -0,0 +1,263 @@
+<template>
+  <el-form
+    v-show="getShow"
+    ref="formSmsResetPassword"
+    :model="resetPasswordData"
+    :rules="rules"
+    class="login-form"
+    label-position="top"
+    label-width="120px"
+    size="large"
+  >
+    <el-row style="margin-right: -10px; margin-left: -10px">
+      <!-- 租户名 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <LoginFormTitle style="width: 100%" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item v-if="resetPasswordData.tenantEnable === 'true'" prop="tenantName">
+          <el-input
+            v-model="resetPasswordData.tenantName"
+            :placeholder="t('login.tenantNamePlaceholder')"
+            :prefix-icon="iconHouse"
+            type="primary"
+            link
+          />
+        </el-form-item>
+      </el-col>
+      <!-- 手机号 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="mobile">
+          <el-input
+            v-model="resetPasswordData.mobile"
+            :placeholder="t('login.mobileNumberPlaceholder')"
+            :prefix-icon="iconCellphone"
+          />
+        </el-form-item>
+      </el-col>
+      <Verify
+        ref="verify"
+        :captchaType="captchaType"
+        :imgSize="{ width: '400px', height: '200px' }"
+        mode="pop"
+        @success="getSmsCode"
+      />
+      <!-- 验证码 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="code">
+          <el-row :gutter="5" justify="space-between" style="width: 100%">
+            <el-col :span="24">
+              <el-input
+                v-model="resetPasswordData.code"
+                :placeholder="t('login.codePlaceholder')"
+                :prefix-icon="iconCircleCheck"
+              >
+                <template #append>
+                  <span
+                    v-if="mobileCodeTimer <= 0"
+                    class="getMobileCode"
+                    style="cursor: pointer"
+                    @click="getCode"
+                  >
+                    {{ t('login.getSmsCode') }}
+                  </span>
+                  <span v-if="mobileCodeTimer > 0" class="getMobileCode" style="cursor: pointer">
+                    {{ mobileCodeTimer }}秒后可重新获取
+                  </span>
+                </template>
+              </el-input>
+              <!-- </el-button> -->
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="password">
+          <InputPassword
+            v-model="resetPasswordData.password"
+            :placeholder="t('login.passwordPlaceholder')"
+            style="width: 100%"
+            strength="true"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="check_password">
+          <InputPassword
+            v-model="resetPasswordData.check_password"
+            :placeholder="t('login.checkPassword')"
+            style="width: 100%"
+            strength="true"
+          />
+        </el-form-item>
+      </el-col>
+      <!-- 登录按钮 / 返回按钮 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <XButton
+            :loading="loginLoading"
+            :title="t('login.resetPassword')"
+            class="w-[100%]"
+            type="primary"
+            @click="resetPassword()"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <XButton
+            :loading="loginLoading"
+            :title="t('login.backLogin')"
+            class="w-[100%]"
+            @click="handleBackLogin()"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+import { useIcon } from '@/hooks/web/useIcon'
+
+import { sendSmsCode, smsResetPassword } from '@/api/login'
+import LoginFormTitle from './LoginFormTitle.vue'
+import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
+import { ElLoading } from 'element-plus'
+import * as authUtil from '@/utils/auth'
+import * as LoginApi from '@/api/login'
+defineOptions({ name: 'ForgetPasswordForm' })
+const verify = ref()
+
+const { t } = useI18n()
+const message = useMessage()
+const { currentRoute, push } = useRouter()
+const formSmsResetPassword = ref()
+const loginLoading = ref(false)
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconCellphone = useIcon({ icon: 'ep:cellphone' })
+const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
+const { validForm } = useFormValid(formSmsResetPassword)
+const { handleBackLogin, getLoginState, setLoginState } = useLoginState()
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+
+const validatePass2 = (rule, value, callback) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'))
+  } else if (value !== resetPasswordData.password) {
+    callback(new Error('两次输入密码不一致!'))
+  } else {
+    callback()
+  }
+}
+
+const rules = {
+  tenantName: [{ required: true, min: 2, max: 20, trigger: 'blur', message: '长度为4到16位' }],
+  mobile: [{ required: true, min: 11, max: 11, trigger: 'blur', message: '手机号长度为11位' }],
+  password: [
+    {
+      required: true,
+      min: 4,
+      max: 16,
+      validator: validatePass2,
+      trigger: 'blur',
+      message: '密码长度为4到16位'
+    }
+  ],
+  check_password: [{ required: true, validator: validatePass2, trigger: 'blur' }],
+  code: [required]
+}
+
+const resetPasswordData = reactive({
+  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
+  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
+  tenantName: '',
+  username: '',
+  password: '',
+  check_password: '',
+  mobile: '',
+  code: ''
+})
+
+const smsVO = reactive({
+  tenantName: '',
+  mobile: '',
+  captchaVerification: '',
+  scene: 23
+})
+const mobileCodeTimer = ref(0)
+const redirect = ref<string>('')
+
+// 获取验证码
+const getCode = async () => {
+  // 情况一，未开启：则直接发送验证码
+  if (resetPasswordData.captchaEnable === 'false') {
+    await getSmsCode({})
+  } else {
+    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行发送验证码
+    // 弹出验证码
+    verify.value.show()
+  }
+}
+
+const getSmsCode = async (params) => {
+  smsVO.captchaVerification = params.captchaVerification
+  smsVO.mobile = resetPasswordData.mobile
+  await sendSmsCode(smsVO).then(async () => {
+    message.success(t('login.SmsSendMsg'))
+    // 设置倒计时
+    mobileCodeTimer.value = 60
+    let msgTimer = setInterval(() => {
+      mobileCodeTimer.value = mobileCodeTimer.value - 1
+      if (mobileCodeTimer.value <= 0) {
+        clearInterval(msgTimer)
+      }
+    }, 1000)
+  })
+}
+watch(
+  () => currentRoute.value,
+  (route: RouteLocationNormalizedLoaded) => {
+    redirect.value = route?.query?.redirect as string
+  },
+  {
+    immediate: true
+  }
+)
+
+// 重置密码
+const resetPassword = async () => {
+  const data = await validForm()
+  if (!data) return
+  loginLoading.value = true
+  await smsResetPassword(resetPasswordData)
+    .then(async () => {
+      message.success(t('login.resetPasswordSuccess'))
+      setLoginState(LoginStateEnum.LOGIN)
+    })
+    .catch(() => {})
+    .finally(() => {
+      loginLoading.value = false
+      setTimeout(() => {
+        const loadingInstance = ElLoading.service()
+        loadingInstance.close()
+      }, 400)
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.anticon) {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
+
+.smsbtn {
+  margin-top: 33px;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/Login/components/LoginForm.vue b/marketing-ui/admin-ui/src/views/Login/components/LoginForm.vue
new file mode 100644
index 0000000..4b4579a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Login/components/LoginForm.vue
@@ -0,0 +1,318 @@
+<template>
+  <el-form
+    v-show="getShow"
+    ref="formLogin"
+    :model="loginData.loginForm"
+    :rules="LoginRules"
+    class="login-form"
+    label-position="top"
+    label-width="120px"
+    size="large"
+  >
+    <el-row style="margin-right: -10px; margin-left: -10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <LoginFormTitle style="width: 100%" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
+          <el-input
+            v-model="loginData.loginForm.tenantName"
+            :placeholder="t('login.tenantNamePlaceholder')"
+            :prefix-icon="iconHouse"
+            link
+            type="primary"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="username">
+          <el-input
+            v-model="loginData.loginForm.username"
+            :placeholder="t('login.usernamePlaceholder')"
+            :prefix-icon="iconAvatar"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="password">
+          <el-input
+            v-model="loginData.loginForm.password"
+            :placeholder="t('login.passwordPlaceholder')"
+            :prefix-icon="iconLock"
+            show-password
+            type="password"
+            @keyup.enter="getCode()"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col
+        :span="24"
+        style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px"
+      >
+        <el-form-item>
+          <el-row justify="space-between" style="width: 100%">
+            <el-col :span="6">
+              <el-checkbox v-model="loginData.loginForm.rememberMe">
+                {{ t('login.remember') }}
+              </el-checkbox>
+            </el-col>
+
+            <!-- 注释 by 勇 20250414 忘记密码
+            <el-col :offset="6" :span="12">
+              <el-link
+                style="float: right"
+                type="primary"
+                @click="setLoginState(LoginStateEnum.RESET_PASSWORD)"
+              >
+                {{ t('login.forgetPassword') }}
+              </el-link>
+            </el-col>
+             -->
+
+          </el-row>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <XButton
+            :loading="loginLoading"
+            :title="t('login.login')"
+            class="w-[100%]"
+            type="primary"
+            @click="getCode()"
+          />
+        </el-form-item>
+      </el-col>
+      <Verify
+        v-if="loginData.captchaEnable === 'true'"
+        ref="verify"
+        :captchaType="captchaType"
+        :imgSize="{ width: '400px', height: '200px' }"
+        mode="pop"
+        @success="handleLogin"
+      />
+
+<!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
+<!--        <el-form-item>-->
+<!--          <el-row :gutter="5" justify="space-between" style="width: 100%">-->
+<!--            <el-col :span="8">-->
+<!--              <XButton-->
+<!--                :title="t('login.btnMobile')"-->
+<!--                class="w-[100%]"-->
+<!--                @click="setLoginState(LoginStateEnum.MOBILE)"-->
+<!--              />-->
+<!--            </el-col>-->
+<!--            <el-col :span="8">-->
+<!--              <XButton-->
+<!--                :title="t('login.btnQRCode')"-->
+<!--                class="w-[100%]"-->
+<!--                @click="setLoginState(LoginStateEnum.QR_CODE)"-->
+<!--              />-->
+<!--            </el-col>-->
+<!--            <el-col :span="8">-->
+<!--              <XButton-->
+<!--                :title="t('login.btnRegister')"-->
+<!--                class="w-[100%]"-->
+<!--                @click="setLoginState(LoginStateEnum.REGISTER)"-->
+<!--              />-->
+<!--            </el-col>-->
+<!--          </el-row>-->
+<!--        </el-form-item>-->
+<!--      </el-col>-->
+
+<!--      <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>-->
+<!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
+<!--        <el-form-item>-->
+<!--          <div class="w-[100%] flex justify-between">-->
+<!--            <Icon-->
+<!--              v-for="(item, key) in socialList"-->
+<!--              :key="key"-->
+<!--              :icon="item.icon"-->
+<!--              :size="30"-->
+<!--              class="anticon cursor-pointer"-->
+<!--              color="#999"-->
+<!--              @click="doSocialLogin(item.type)"-->
+<!--            />-->
+<!--          </div>-->
+<!--        </el-form-item>-->
+<!--      </el-col>-->
+
+<!--      <el-divider content-position="center">萌新必读</el-divider>-->
+<!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
+<!--        <el-form-item>-->
+<!--          <div class="w-[100%] flex justify-between">-->
+<!--            <el-link href="https://doc.iocoder.cn/" target="_blank">📚开发指南</el-link>-->
+<!--            <el-link href="https://doc.iocoder.cn/video/" target="_blank">🔥视频教程</el-link>-->
+<!--            <el-link href="https://www.iocoder.cn/Interview/good-collection/" target="_blank">-->
+<!--              ⚡面试手册-->
+<!--            </el-link>-->
+<!--            <el-link href="http://static.yudao.iocoder.cn/mp/Aix9975.jpeg" target="_blank">-->
+<!--              🤝外包咨询-->
+<!--            </el-link>-->
+<!--          </div>-->
+<!--        </el-form-item>-->
+<!--      </el-col>-->
+
+    </el-row>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import { ElLoading } from 'element-plus'
+import LoginFormTitle from './LoginFormTitle.vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+import { useIcon } from '@/hooks/web/useIcon'
+
+import * as authUtil from '@/utils/auth'
+import { usePermissionStore } from '@/store/modules/permission'
+import * as LoginApi from '@/api/login'
+import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
+
+defineOptions({ name: 'LoginForm' })
+
+const { t } = useI18n()
+const message = useMessage()
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconAvatar = useIcon({ icon: 'ep:avatar' })
+const iconLock = useIcon({ icon: 'ep:lock' })
+const formLogin = ref()
+const { validForm } = useFormValid(formLogin)
+const { setLoginState, getLoginState } = useLoginState()
+const { currentRoute, push } = useRouter()
+const permissionStore = usePermissionStore()
+const redirect = ref<string>('')
+const loginLoading = ref(false)
+const verify = ref()
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
+
+const LoginRules = {
+  tenantName: [required],
+  username: [required],
+  password: [required]
+}
+const loginData = reactive({
+  isShowPassword: false,
+  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
+  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
+  loginForm: {
+    tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
+    username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
+    password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
+    captchaVerification: '',
+    rememberMe: true // 默认记录我。如果不需要，可手动修改
+  }
+})
+
+const socialList = [
+  { icon: 'ant-design:wechat-filled', type: 30 },
+  { icon: 'ant-design:dingtalk-circle-filled', type: 20 },
+  { icon: 'ant-design:github-filled', type: 0 },
+  { icon: 'ant-design:alipay-circle-filled', type: 0 }
+]
+
+// 获取验证码
+const getCode = async () => {
+  // 情况一，未开启：则直接登录
+  if (loginData.captchaEnable === 'false') {
+    await handleLogin({})
+  } else {
+    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+    // 弹出验证码
+    verify.value.show()
+  }
+}
+// 记住我
+const getLoginFormCache = () => {
+  const loginForm = authUtil.getLoginForm()
+  if (loginForm) {
+    loginData.loginForm = {
+      ...loginData.loginForm,
+      username: loginForm.username ? loginForm.username : loginData.loginForm.username,
+      password: loginForm.password ? loginForm.password : loginData.loginForm.password,
+      rememberMe: loginForm.rememberMe
+    }
+  }
+}
+
+const loading = ref() // ElLoading.service 返回的实例
+// 登录
+const handleLogin = async (params: any) => {
+  loginLoading.value = true
+  try {
+    const data = await validForm()
+    if (!data) {
+      return
+    }
+    const loginDataLoginForm = { ...loginData.loginForm }
+    loginDataLoginForm.captchaVerification = params.captchaVerification
+    const res = await LoginApi.login(loginDataLoginForm)
+    if (!res) {
+      return
+    }
+    loading.value = ElLoading.service({
+      lock: true,
+      text: '正在加载系统中...',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+    if (loginDataLoginForm.rememberMe) {
+      authUtil.setLoginForm(loginDataLoginForm)
+    } else {
+      authUtil.removeLoginForm()
+    }
+    authUtil.setToken(res)
+    if (!redirect.value) {
+      redirect.value = '/'
+    }
+    // 判断是否为SSO登录
+    if (redirect.value.indexOf('sso') !== -1) {
+      window.location.href = window.location.href.replace('/login?redirect=', '')
+    } else {
+      await push({ path: redirect.value || permissionStore.addRouters[0].path })
+    }
+  } finally {
+    loginLoading.value = false
+    loading.value.close()
+  }
+}
+
+// 社交登录
+watch(
+  () => currentRoute.value,
+  (route: RouteLocationNormalizedLoaded) => {
+    redirect.value = route?.query?.redirect as string
+  },
+  {
+    immediate: true
+  }
+)
+onMounted(() => {
+  getLoginFormCache()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.anticon) {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
+
+.login-code {
+  float: right;
+  width: 100%;
+  height: 38px;
+
+  img {
+    width: 100%;
+    height: auto;
+    max-width: 100px;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/Login/components/LoginFormTitle.vue b/marketing-ui/admin-ui/src/views/Login/components/LoginFormTitle.vue
new file mode 100644
index 0000000..cdf4fac
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Login/components/LoginFormTitle.vue
@@ -0,0 +1,26 @@
+<template>
+  <h2 class="enter-x mb-3 text-center text-2xl font-bold xl:text-center xl:text-3xl">
+    {{ getFormTitle }}
+  </h2>
+</template>
+<script lang="ts" setup>
+import { LoginStateEnum, useLoginState } from './useLogin'
+
+defineOptions({ name: 'LoginFormTitle' })
+
+const { t } = useI18n()
+
+const { getLoginState } = useLoginState()
+
+const getFormTitle = computed(() => {
+  const titleObj = {
+    [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
+    [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
+    [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
+    [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
+    [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
+    [LoginStateEnum.SSO]: t('sys.login.ssoFormTitle')
+  }
+  return titleObj[unref(getLoginState)]
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/Login/components/MobileForm.vue b/marketing-ui/admin-ui/src/views/Login/components/MobileForm.vue
new file mode 100644
index 0000000..fd3aa0a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Login/components/MobileForm.vue
@@ -0,0 +1,217 @@
+<template>
+  <el-form
+    v-show="getShow"
+    ref="formSmsLogin"
+    :model="loginData.loginForm"
+    :rules="rules"
+    class="login-form"
+    label-position="top"
+    label-width="120px"
+    size="large"
+  >
+    <el-row style="margin-right: -10px; margin-left: -10px">
+      <!-- 租户名 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <LoginFormTitle style="width: 100%" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
+          <el-input
+            v-model="loginData.loginForm.tenantName"
+            :placeholder="t('login.tenantNamePlaceholder')"
+            :prefix-icon="iconHouse"
+            type="primary"
+            link
+          />
+        </el-form-item>
+      </el-col>
+      <!-- 手机号 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="mobileNumber">
+          <el-input
+            v-model="loginData.loginForm.mobileNumber"
+            :placeholder="t('login.mobileNumberPlaceholder')"
+            :prefix-icon="iconCellphone"
+          />
+        </el-form-item>
+      </el-col>
+      <!-- 验证码 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="code">
+          <el-row :gutter="5" justify="space-between" style="width: 100%">
+            <el-col :span="24">
+              <el-input
+                v-model="loginData.loginForm.code"
+                :placeholder="t('login.codePlaceholder')"
+                :prefix-icon="iconCircleCheck"
+              >
+                <!-- <el-button class="w-[100%]"> -->
+                <template #append>
+                  <span
+                    v-if="mobileCodeTimer <= 0"
+                    class="getMobileCode"
+                    style="cursor: pointer"
+                    @click="getSmsCode"
+                  >
+                    {{ t('login.getSmsCode') }}
+                  </span>
+                  <span v-if="mobileCodeTimer > 0" class="getMobileCode" style="cursor: pointer">
+                    {{ mobileCodeTimer }}秒后可重新获取
+                  </span>
+                </template>
+              </el-input>
+              <!-- </el-button> -->
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-col>
+      <!-- 登录按钮 / 返回按钮 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <XButton
+            :loading="loginLoading"
+            :title="t('login.login')"
+            class="w-[100%]"
+            type="primary"
+            @click="signIn()"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <XButton
+            :loading="loginLoading"
+            :title="t('login.backLogin')"
+            class="w-[100%]"
+            @click="handleBackLogin()"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+import { useIcon } from '@/hooks/web/useIcon'
+
+import { setTenantId, setToken } from '@/utils/auth'
+import { usePermissionStore } from '@/store/modules/permission'
+import { sendSmsCode, smsLogin } from '@/api/login'
+import LoginFormTitle from './LoginFormTitle.vue'
+import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
+import { ElLoading } from 'element-plus'
+
+defineOptions({ name: 'MobileForm' })
+
+const { t } = useI18n()
+const message = useMessage()
+const permissionStore = usePermissionStore()
+const { currentRoute, push } = useRouter()
+const formSmsLogin = ref()
+const loginLoading = ref(false)
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconCellphone = useIcon({ icon: 'ep:cellphone' })
+const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
+const { validForm } = useFormValid(formSmsLogin)
+const { handleBackLogin, getLoginState } = useLoginState()
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE)
+
+const rules = {
+  tenantName: [required],
+  mobileNumber: [required],
+  code: [required]
+}
+const loginData = reactive({
+  codeImg: '',
+  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
+  token: '',
+  loading: {
+    signIn: false
+  },
+  loginForm: {
+    uuid: '',
+    tenantName: '芋道源码',
+    mobileNumber: '',
+    code: ''
+  }
+})
+const smsVO = reactive({
+  smsCode: {
+    mobile: '',
+    scene: 21
+  },
+  loginSms: {
+    mobile: '',
+    code: ''
+  }
+})
+const mobileCodeTimer = ref(0)
+const redirect = ref<string>('')
+const getSmsCode = async () => {
+  smsVO.smsCode.mobile = loginData.loginForm.mobileNumber
+  await sendSmsCode(smsVO.smsCode).then(async () => {
+    message.success(t('login.SmsSendMsg'))
+    // 设置倒计时
+    mobileCodeTimer.value = 60
+    let msgTimer = setInterval(() => {
+      mobileCodeTimer.value = mobileCodeTimer.value - 1
+      if (mobileCodeTimer.value <= 0) {
+        clearInterval(msgTimer)
+      }
+    }, 1000)
+  })
+}
+watch(
+  () => currentRoute.value,
+  (route: RouteLocationNormalizedLoaded) => {
+    redirect.value = route?.query?.redirect as string
+  },
+  {
+    immediate: true
+  }
+)
+// 登录
+const signIn = async () => {
+  const data = await validForm()
+  if (!data) return
+  ElLoading.service({
+    lock: true,
+    text: '正在加载系统中...',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+  loginLoading.value = true
+  smsVO.loginSms.mobile = loginData.loginForm.mobileNumber
+  smsVO.loginSms.code = loginData.loginForm.code
+  await smsLogin(smsVO.loginSms)
+    .then(async (res) => {
+      setToken(res)
+      if (!redirect.value) {
+        redirect.value = '/'
+      }
+      push({ path: redirect.value || permissionStore.addRouters[0].path })
+    })
+    .catch(() => {})
+    .finally(() => {
+      loginLoading.value = false
+      setTimeout(() => {
+        const loadingInstance = ElLoading.service()
+        loadingInstance.close()
+      }, 400)
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.anticon) {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
+
+.smsbtn {
+  margin-top: 33px;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/Login/components/QrCodeForm.vue b/marketing-ui/admin-ui/src/views/Login/components/QrCodeForm.vue
new file mode 100644
index 0000000..2670d00
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Login/components/QrCodeForm.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-row v-show="getShow" class="login-form" style="margin-right: -10px; margin-left: -10px">
+    <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+      <LoginFormTitle style="width: 100%" />
+    </el-col>
+    <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+      <el-card class="mb-10px text-center" shadow="hover">
+        <Qrcode :logo="logoImg" />
+      </el-card>
+    </el-col>
+    <el-divider class="enter-x">{{ t('login.qrcode') }}</el-divider>
+    <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+      <div class="mt-15px w-[100%]">
+        <XButton :title="t('login.backLogin')" class="w-[100%]" @click="handleBackLogin()" />
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script lang="ts" setup>
+import logoImg from '@/assets/imgs/logo.png'
+
+import LoginFormTitle from './LoginFormTitle.vue'
+import { LoginStateEnum, useLoginState } from './useLogin'
+
+defineOptions({ name: 'QrCodeForm' })
+
+const { t } = useI18n()
+const { handleBackLogin, getLoginState } = useLoginState()
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
+</script>
diff --git a/marketing-ui/admin-ui/src/views/Login/components/RegisterForm.vue b/marketing-ui/admin-ui/src/views/Login/components/RegisterForm.vue
new file mode 100644
index 0000000..5b3beb5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Login/components/RegisterForm.vue
@@ -0,0 +1,258 @@
+<template>
+  <el-form
+    v-show="getShow"
+    ref="formLogin"
+    :model="registerData.registerForm"
+    :rules="registerRules"
+    class="login-form"
+    label-position="top"
+    label-width="120px"
+    size="large"
+  >
+    <el-row style="margin-right: -10px; margin-left: -10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <LoginFormTitle style="width: 100%" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item v-if="registerData.tenantEnable === 'true'" prop="tenantName">
+          <el-input
+            v-model="registerData.registerForm.tenantName"
+            :placeholder="t('login.tenantname')"
+            :prefix-icon="iconHouse"
+            link
+            type="primary"
+            size="large"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="username">
+          <el-input
+            v-model="registerData.registerForm.username"
+            :placeholder="t('login.username')"
+            size="large"
+            :prefix-icon="iconAvatar"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="username">
+          <el-input
+            v-model="registerData.registerForm.nickname"
+            placeholder="昵称"
+            size="large"
+            :prefix-icon="iconAvatar"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="password">
+          <el-input
+            v-model="registerData.registerForm.password"
+            type="password"
+            auto-complete="off"
+            :placeholder="t('login.password')"
+            size="large"
+            :prefix-icon="iconLock"
+            show-password
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="confirmPassword">
+          <el-input
+            v-model="registerData.registerForm.confirmPassword"
+            type="password"
+            size="large"
+            auto-complete="off"
+            :placeholder="t('login.checkPassword')"
+            :prefix-icon="iconLock"
+            show-password
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <XButton
+            :loading="loginLoading"
+            :title="t('login.register')"
+            class="w-[100%]"
+            type="primary"
+            @click="getCode()"
+          />
+        </el-form-item>
+      </el-col>
+      <Verify
+        v-if="registerData.captchaEnable === 'true'"
+        ref="verify"
+        :captchaType="captchaType"
+        :imgSize="{ width: '400px', height: '200px' }"
+        mode="pop"
+        @success="handleRegister"
+      />
+    </el-row>
+    <XButton :title="t('login.hasUser')" class="w-[100%]" @click="handleBackLogin()" />
+  </el-form>
+</template>
+<script lang="ts" setup>
+import { ElLoading } from 'element-plus'
+import LoginFormTitle from './LoginFormTitle.vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { useIcon } from '@/hooks/web/useIcon'
+import * as authUtil from '@/utils/auth'
+import { usePermissionStore } from '@/store/modules/permission'
+import * as LoginApi from '@/api/login'
+import { LoginStateEnum, useLoginState } from './useLogin'
+
+defineOptions({ name: 'RegisterForm' })
+
+const { t } = useI18n()
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconAvatar = useIcon({ icon: 'ep:avatar' })
+const iconLock = useIcon({ icon: 'ep:lock' })
+const formLogin = ref()
+const { handleBackLogin, getLoginState } = useLoginState()
+const { currentRoute, push } = useRouter()
+const permissionStore = usePermissionStore()
+const redirect = ref<string>('')
+const loginLoading = ref(false)
+const verify = ref()
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
+
+const equalToPassword = (rule, value, callback) => {
+  if (registerData.registerForm.password !== value) {
+    callback(new Error('两次输入的密码不一致'))
+  } else {
+    callback()
+  }
+}
+
+const registerRules = {
+  tenantName: [
+    { required: true, trigger: 'blur', message: '请输入您所属的租户' },
+    { min: 2, max: 20, message: '租户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
+  ],
+  username: [
+    { required: true, trigger: 'blur', message: '请输入您的账号' },
+    { min: 4, max: 30, message: '用户账号长度必须介于 4 和 30 之间', trigger: 'blur' }
+  ],
+  nickname: [
+    { required: true, trigger: 'blur', message: '请输入您的昵称' },
+    { min: 0, max: 30, message: '昵称长度必须介于 0 和 30 之间', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入您的密码' },
+    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
+    { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, trigger: 'blur', message: '请再次输入您的密码' },
+    { required: true, validator: equalToPassword, trigger: 'blur' }
+  ]
+}
+
+const registerData = reactive({
+  isShowPassword: false,
+  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
+  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
+  registerForm: {
+    tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
+    nickname: '',
+    tenantId: 0,
+    username: '',
+    password: '',
+    confirmPassword: '',
+    captchaVerification: ''
+  }
+})
+
+// 提交注册
+const handleRegister = async (params: any) => {
+  loading.value = true
+  try {
+    if (registerData.captchaEnable) {
+      registerData.registerForm.captchaVerification = params.captchaVerification
+    }
+
+    const res = await LoginApi.register(registerData.registerForm)
+    if (!res) {
+      return
+    }
+    loading.value = ElLoading.service({
+      lock: true,
+      text: '正在加载系统中...',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+
+    authUtil.removeLoginForm()
+
+    authUtil.setToken(res)
+    if (!redirect.value) {
+      redirect.value = '/'
+    }
+    // 判断是否为SSO登录
+    if (redirect.value.indexOf('sso') !== -1) {
+      window.location.href = window.location.href.replace('/login?redirect=', '')
+    } else {
+      push({ path: redirect.value || permissionStore.addRouters[0].path })
+    }
+  } finally {
+    loginLoading.value = false
+    loading.value.close()
+  }
+}
+
+// 获取验证码
+const getCode = async () => {
+  // 情况一，未开启：则直接注册
+  if (registerData.captchaEnable === 'false') {
+    await handleRegister({})
+  } else {
+    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行注册
+    // 弹出验证码
+    verify.value.show()
+  }
+}
+
+// 根据域名，获得租户信息
+const loading = ref() // ElLoading.service 返回的实例
+
+watch(
+  () => currentRoute.value,
+  (route: RouteLocationNormalizedLoaded) => {
+    redirect.value = route?.query?.redirect as string
+  },
+  {
+    immediate: true
+  }
+)
+onMounted(() => {
+  // getCookie()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.anticon) {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
+
+.login-code {
+  float: right;
+  width: 100%;
+  height: 38px;
+
+  img {
+    width: 100%;
+    height: auto;
+    max-width: 100px;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/Login/components/SSOLogin.vue b/marketing-ui/admin-ui/src/views/Login/components/SSOLogin.vue
new file mode 100644
index 0000000..5ce34fb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Login/components/SSOLogin.vue
@@ -0,0 +1,199 @@
+<template>
+  <div v-show="ssoVisible" class="form-cont">
+    <!-- 应用名 -->
+    <LoginFormTitle style="width: 100%" />
+    <el-tabs class="form" style="float: none" value="uname">
+      <el-tab-pane :label="client.name" name="uname" />
+    </el-tabs>
+    <div>
+      <el-form :model="formData" class="login-form">
+        <!-- 授权范围的选择 -->
+        此第三方应用请求获得以下权限：
+        <el-form-item prop="scopes">
+          <el-checkbox-group v-model="formData.scopes">
+            <el-checkbox
+              v-for="scope in queryParams.scopes"
+              :key="scope"
+              :value="scope"
+              style="display: block; margin-bottom: -10px"
+            >
+              {{ formatScope(scope) }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <!-- 下方的登录按钮 -->
+        <el-form-item class="w-1/1">
+          <el-button
+            :loading="formLoading"
+            class="w-6/10"
+            type="primary"
+            @click.prevent="handleAuthorize(true)"
+          >
+            <span v-if="!formLoading">同意授权</span>
+            <span v-else>授 权 中...</span>
+          </el-button>
+          <el-button class="w-3/10" @click.prevent="handleAuthorize(false)">拒绝</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import LoginFormTitle from './LoginFormTitle.vue'
+import * as OAuth2Api from '@/api/login/oauth2'
+import { LoginStateEnum, useLoginState } from './useLogin'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+defineOptions({ name: 'SSOLogin' })
+
+const route = useRoute() // 路由
+const { currentRoute } = useRouter() // 路由
+const { getLoginState, setLoginState } = useLoginState()
+
+const client = ref({
+  // 客户端信息
+  name: '',
+  logo: ''
+})
+interface queryType {
+  responseType: string
+  clientId: string
+  redirectUri: string
+  state: string
+  scopes: string[]
+}
+const queryParams = reactive<queryType>({
+  // URL 上的 client_id、scope 等参数
+  responseType: '',
+  clientId: '',
+  redirectUri: '',
+  state: '',
+  scopes: [] // 优先从 query 参数获取；如果未传递，从后端获取
+})
+const ssoVisible = computed(() => unref(getLoginState) === LoginStateEnum.SSO) // 是否展示 SSO 登录的表单
+interface formType {
+  scopes: string[]
+}
+const formData = reactive<formType>({
+  scopes: [] // 已选中的 scope 数组
+})
+const formLoading = ref(false) // 表单是否提交中
+
+/** 初始化授权信息 */
+const init = async () => {
+  // 防止在没有登录的情况下循环弹窗
+  if (typeof route.query.client_id === 'undefined') return
+  // 解析参数
+  // 例如说【自动授权不通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read%20user.write
+  // 例如说【自动授权通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read
+  queryParams.responseType = route.query.response_type as string
+  queryParams.clientId = route.query.client_id as string
+  queryParams.redirectUri = route.query.redirect_uri as string
+  queryParams.state = route.query.state as string
+  if (route.query.scope) {
+    queryParams.scopes = (route.query.scope as string).split(' ')
+  }
+
+  // 如果有 scope 参数，先执行一次自动授权，看看是否之前都授权过了。
+  if (queryParams.scopes.length > 0) {
+    const data = await doAuthorize(true, queryParams.scopes, [])
+    if (data) {
+      location.href = data
+      return
+    }
+  }
+
+  // 获取授权页的基本信息
+  const data = await OAuth2Api.getAuthorize(queryParams.clientId)
+  client.value = data.client
+  // 解析 scope
+  let scopes
+  // 1.1 如果 params.scope 非空，则过滤下返回的 scopes
+  if (queryParams.scopes.length > 0) {
+    scopes = []
+    for (const scope of data.scopes) {
+      if (queryParams.scopes.indexOf(scope.key) >= 0) {
+        scopes.push(scope)
+      }
+    }
+    // 1.2 如果 params.scope 为空，则使用返回的 scopes 设置它
+  } else {
+    scopes = data.scopes
+    for (const scope of scopes) {
+      queryParams.scopes.push(scope.key)
+    }
+  }
+  // 生成已选中的 checkedScopes
+  for (const scope of scopes) {
+    if (scope.value) {
+      formData.scopes.push(scope.key)
+    }
+  }
+}
+
+/** 处理授权的提交 */
+const handleAuthorize = async (approved) => {
+  // 计算 checkedScopes + uncheckedScopes
+  let checkedScopes
+  let uncheckedScopes
+  if (approved) {
+    // 同意授权，按照用户的选择
+    checkedScopes = formData.scopes
+    uncheckedScopes = queryParams.scopes.filter((item) => checkedScopes.indexOf(item) === -1)
+  } else {
+    // 拒绝，则都是取消
+    checkedScopes = []
+    uncheckedScopes = queryParams.scopes
+  }
+  // 提交授权的请求
+  formLoading.value = true
+  try {
+    const data = await doAuthorize(false, checkedScopes, uncheckedScopes)
+    if (!data) {
+      return
+    }
+    location.href = data
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 调用授权 API 接口 */
+const doAuthorize = (autoApprove, checkedScopes, uncheckedScopes) => {
+  return OAuth2Api.authorize(
+    queryParams.responseType,
+    queryParams.clientId,
+    queryParams.redirectUri,
+    queryParams.state,
+    autoApprove,
+    checkedScopes,
+    uncheckedScopes
+  )
+}
+
+/** 格式化 scope 文本 */
+const formatScope = (scope) => {
+  // 格式化 scope 授权范围，方便用户理解。
+  // 这里仅仅是一个 demo，可以考虑录入到字典数据中，例如说字典类型 "system_oauth2_scope"，它的每个 scope 都是一条字典数据。
+  switch (scope) {
+    case 'user.read':
+      return '访问你的个人信息'
+    case 'user.write':
+      return '修改你的个人信息'
+    default:
+      return scope
+  }
+}
+
+/** 监听当前路由为 SSOLogin 时，进行数据的初始化 */
+watch(
+  () => currentRoute.value,
+  (route: RouteLocationNormalizedLoaded) => {
+    if (route.name === 'SSOLogin') {
+      setLoginState(LoginStateEnum.SSO)
+      init()
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/views/Login/components/index.ts b/marketing-ui/admin-ui/src/views/Login/components/index.ts
new file mode 100644
index 0000000..7c42415
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Login/components/index.ts
@@ -0,0 +1,9 @@
+import LoginForm from './LoginForm.vue'
+import MobileForm from './MobileForm.vue'
+import LoginFormTitle from './LoginFormTitle.vue'
+import RegisterForm from './RegisterForm.vue'
+import QrCodeForm from './QrCodeForm.vue'
+import SSOLoginVue from './SSOLogin.vue'
+import ForgetPasswordForm from './ForgetPasswordForm.vue'
+
+export { LoginForm, MobileForm, LoginFormTitle, RegisterForm, QrCodeForm, SSOLoginVue, ForgetPasswordForm }
diff --git a/marketing-ui/admin-ui/src/views/Login/components/useLogin.ts b/marketing-ui/admin-ui/src/views/Login/components/useLogin.ts
new file mode 100644
index 0000000..b4a02f8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Login/components/useLogin.ts
@@ -0,0 +1,42 @@
+import { Ref } from 'vue'
+
+export enum LoginStateEnum {
+  LOGIN,
+  REGISTER,
+  RESET_PASSWORD,
+  MOBILE,
+  QR_CODE,
+  SSO
+}
+
+const currentState = ref(LoginStateEnum.LOGIN)
+
+export function useLoginState() {
+  function setLoginState(state: LoginStateEnum) {
+    currentState.value = state
+  }
+  const getLoginState = computed(() => currentState.value)
+
+  function handleBackLogin() {
+    setLoginState(LoginStateEnum.LOGIN)
+  }
+
+  return {
+    setLoginState,
+    getLoginState,
+    handleBackLogin
+  }
+}
+
+export function useFormValid<T extends Object = any>(formRef: Ref<any>) {
+  async function validForm() {
+    const form = unref(formRef)
+    if (!form) return
+    const data = await form.validate()
+    return data as T
+  }
+
+  return {
+    validForm
+  }
+}
diff --git a/marketing-ui/admin-ui/src/views/Profile/Index.vue b/marketing-ui/admin-ui/src/views/Profile/Index.vue
new file mode 100644
index 0000000..e04eaf4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Profile/Index.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="flex">
+    <el-card class="user w-1/3" shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span>{{ t('profile.user.title') }}</span>
+        </div>
+      </template>
+      <ProfileUser />
+    </el-card>
+    <el-card class="user ml-3 w-2/3" shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span>{{ t('profile.info.title') }}</span>
+        </div>
+      </template>
+      <div>
+        <el-tabs v-model="activeName" class="profile-tabs" style="height: 400px" tab-position="top">
+          <el-tab-pane :label="t('profile.info.basicInfo')" name="basicInfo">
+            <BasicInfo />
+          </el-tab-pane>
+          <el-tab-pane :label="t('profile.info.resetPwd')" name="resetPwd">
+            <ResetPwd />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script lang="ts" setup>
+import { BasicInfo, ProfileUser, ResetPwd } from './components'
+
+const { t } = useI18n()
+defineOptions({ name: 'Profile' })
+const activeName = ref('basicInfo')
+</script>
+<style scoped>
+.user {
+  max-height: 960px;
+  padding: 15px 20px 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:deep(.el-card .el-card__header, .el-card .el-card__body) {
+  padding: 15px !important;
+}
+
+.profile-tabs > .el-tabs__content {
+  padding: 32px;
+  font-weight: 600;
+  color: #6b778c;
+}
+
+.el-tabs--left .el-tabs__content {
+  height: 100%;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/Profile/components/BasicInfo.vue b/marketing-ui/admin-ui/src/views/Profile/components/BasicInfo.vue
new file mode 100644
index 0000000..8dfafa6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Profile/components/BasicInfo.vue
@@ -0,0 +1,96 @@
+<template>
+  <Form ref="formRef" :labelWidth="200" :rules="rules" :schema="schema">
+    <template #sex="form">
+      <el-radio-group v-model="form['sex']">
+        <el-radio :value="1">{{ t('profile.user.man') }}</el-radio>
+        <el-radio :value="2">{{ t('profile.user.woman') }}</el-radio>
+      </el-radio-group>
+    </template>
+  </Form>
+  <div style="text-align: center">
+    <XButton :title="t('common.save')" type="primary" @click="submit()" />
+    <XButton :title="t('common.reset')" type="danger" @click="init()" />
+  </div>
+</template>
+<script lang="ts" setup>
+import type { FormRules } from 'element-plus'
+import { FormSchema } from '@/types/form'
+import type { FormExpose } from '@/components/Form'
+import {
+  getUserProfile,
+  updateUserProfile,
+  UserProfileUpdateReqVO
+} from '@/api/system/user/profile'
+import { useUserStore } from '@/store/modules/user'
+
+defineOptions({ name: 'BasicInfo' })
+
+const { t } = useI18n()
+const message = useMessage() // 消息弹窗
+const userStore = useUserStore()
+// 表单校验
+const rules = reactive<FormRules>({
+  nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
+  email: [
+    { required: true, message: t('profile.rules.mail'), trigger: 'blur' },
+    {
+      type: 'email',
+      message: t('profile.rules.truemail'),
+      trigger: ['blur', 'change']
+    }
+  ],
+  mobile: [
+    { required: true, message: t('profile.rules.phone'), trigger: 'blur' },
+    {
+      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+      message: t('profile.rules.truephone'),
+      trigger: 'blur'
+    }
+  ]
+})
+const schema = reactive<FormSchema[]>([
+  {
+    field: 'nickname',
+    label: t('profile.user.nickname'),
+    component: 'Input'
+  },
+  {
+    field: 'mobile',
+    label: t('profile.user.mobile'),
+    component: 'Input'
+  },
+  {
+    field: 'email',
+    label: t('profile.user.email'),
+    component: 'Input'
+  },
+  {
+    field: 'sex',
+    label: t('profile.user.sex'),
+    component: 'InputNumber',
+    value: 0
+  }
+])
+const formRef = ref<FormExpose>() // 表单 Ref
+const submit = () => {
+  const elForm = unref(formRef)?.getElFormRef()
+  if (!elForm) return
+  elForm.validate(async (valid) => {
+    if (valid) {
+      const data = unref(formRef)?.formModel as UserProfileUpdateReqVO
+      await updateUserProfile(data)
+      message.success(t('common.updateSuccess'))
+      const profile = await init()
+      userStore.setUserNicknameAction(profile.nickname)
+    }
+  })
+}
+const init = async () => {
+  const res = await getUserProfile()
+  unref(formRef)?.setValues(res)
+  return res
+}
+onMounted(async () => {
+  await init()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/Profile/components/ProfileUser.vue b/marketing-ui/admin-ui/src/views/Profile/components/ProfileUser.vue
new file mode 100644
index 0000000..0d469ef
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Profile/components/ProfileUser.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <div class="text-center">
+      <UserAvatar :img="userInfo?.avatar" />
+    </div>
+    <ul class="list-group list-group-striped">
+      <li class="list-group-item">
+        <Icon class="mr-5px" icon="ep:user" />
+        {{ t('profile.user.username') }}
+        <div class="pull-right">{{ userInfo?.username }}</div>
+      </li>
+      <li class="list-group-item">
+        <Icon class="mr-5px" icon="ep:phone" />
+        {{ t('profile.user.mobile') }}
+        <div class="pull-right">{{ userInfo?.mobile }}</div>
+      </li>
+      <li class="list-group-item">
+        <Icon class="mr-5px" icon="fontisto:email" />
+        {{ t('profile.user.email') }}
+        <div class="pull-right">{{ userInfo?.email }}</div>
+      </li>
+      <li class="list-group-item">
+        <Icon class="mr-5px" icon="carbon:tree-view-alt" />
+        {{ t('profile.user.dept') }}
+        <div v-if="userInfo?.dept" class="pull-right">{{ userInfo?.dept.name }}</div>
+      </li>
+      <li class="list-group-item">
+        <Icon class="mr-5px" icon="ep:suitcase" />
+        {{ t('profile.user.posts') }}
+        <div v-if="userInfo?.posts" class="pull-right">
+          {{ userInfo?.posts.map((post) => post.name).join(',') }}
+        </div>
+      </li>
+      <li class="list-group-item">
+        <Icon class="mr-5px" icon="icon-park-outline:peoples" />
+        {{ t('profile.user.roles') }}
+        <div v-if="userInfo?.roles" class="pull-right">
+          {{ userInfo?.roles.map((role) => role.name).join(',') }}
+        </div>
+      </li>
+      <li class="list-group-item">
+        <Icon class="mr-5px" icon="ep:calendar" />
+        {{ t('profile.user.createTime') }}
+        <div class="pull-right">{{ formatDate(userInfo.createTime) }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import UserAvatar from './UserAvatar.vue'
+
+import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
+
+defineOptions({ name: 'ProfileUser' })
+
+const { t } = useI18n()
+const userInfo = ref({} as ProfileVO)
+const getUserInfo = async () => {
+  const users = await getUserProfile()
+  userInfo.value = users
+}
+onMounted(async () => {
+  await getUserInfo()
+})
+</script>
+
+<style scoped>
+.text-center {
+  position: relative;
+  height: 120px;
+  text-align: center;
+}
+
+.list-group-striped > .list-group-item {
+  padding-right: 0;
+  padding-left: 0;
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
+
+.list-group {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-group-item {
+  padding: 11px 0;
+  margin-bottom: -1px;
+  font-size: 13px;
+  border-top: 1px solid #e7eaec;
+  border-bottom: 1px solid #e7eaec;
+}
+
+.pull-right {
+  float: right !important;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/Profile/components/ResetPwd.vue b/marketing-ui/admin-ui/src/views/Profile/components/ResetPwd.vue
new file mode 100644
index 0000000..477be91
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Profile/components/ResetPwd.vue
@@ -0,0 +1,73 @@
+<template>
+  <el-form ref="formRef" :model="password" :rules="rules" :label-width="200">
+    <el-form-item :label="t('profile.password.oldPassword')" prop="oldPassword">
+      <InputPassword v-model="password.oldPassword" />
+    </el-form-item>
+    <el-form-item :label="t('profile.password.newPassword')" prop="newPassword">
+      <InputPassword v-model="password.newPassword" strength />
+    </el-form-item>
+    <el-form-item :label="t('profile.password.confirmPassword')" prop="confirmPassword">
+      <InputPassword v-model="password.confirmPassword" strength />
+    </el-form-item>
+    <el-form-item>
+      <XButton :title="t('common.save')" type="primary" @click="submit(formRef)" />
+      <XButton :title="t('common.reset')" type="danger" @click="reset(formRef)" />
+    </el-form-item>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+
+import { InputPassword } from '@/components/InputPassword'
+import { updateUserPassword } from '@/api/system/user/profile'
+
+defineOptions({ name: 'ResetPwd' })
+
+const { t } = useI18n()
+const message = useMessage()
+const formRef = ref<FormInstance>()
+const password = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+
+// 表单校验
+const equalToPassword = (_rule, value, callback) => {
+  if (password.newPassword !== value) {
+    callback(new Error(t('profile.password.diffPwd')))
+  } else {
+    callback()
+  }
+}
+
+const rules = reactive<FormRules>({
+  oldPassword: [
+    { required: true, message: t('profile.password.oldPwdMsg'), trigger: 'blur' },
+    { min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur' }
+  ],
+  newPassword: [
+    { required: true, message: t('profile.password.newPwdMsg'), trigger: 'blur' },
+    { min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: t('profile.password.cfPwdMsg'), trigger: 'blur' },
+    { required: true, validator: equalToPassword, trigger: 'blur' }
+  ]
+})
+
+const submit = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate(async (valid) => {
+    if (valid) {
+      await updateUserPassword(password.oldPassword, password.newPassword)
+      message.success(t('common.updateSuccess'))
+    }
+  })
+}
+
+const reset = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/Profile/components/UserAvatar.vue b/marketing-ui/admin-ui/src/views/Profile/components/UserAvatar.vue
new file mode 100644
index 0000000..63e1e16
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Profile/components/UserAvatar.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="change-avatar">
+    <CropperAvatar
+      ref="cropperRef"
+      :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
+      :showBtn="false"
+      :value="img"
+      width="120px"
+      @change="handelUpload"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { uploadAvatar } from '@/api/system/user/profile'
+import { CropperAvatar } from '@/components/Cropper'
+import { useUserStore } from '@/store/modules/user'
+
+
+defineOptions({ name: 'UserAvatar' })
+
+defineProps({
+  img: propTypes.string.def('')
+})
+
+const userStore = useUserStore()
+
+
+const cropperRef = ref()
+const handelUpload = async ({ data }) => {
+  const res = await uploadAvatar({ avatarFile: data })
+  cropperRef.value.close()
+  userStore.setUserAvatarAction(res.data)
+}
+</script>
+
+<style lang="scss" scoped>
+.change-avatar {
+  img {
+    display: block;
+    margin-bottom: 15px;
+    border-radius: 50%;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/Profile/components/UserSocial.vue b/marketing-ui/admin-ui/src/views/Profile/components/UserSocial.vue
new file mode 100644
index 0000000..b7f955b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Profile/components/UserSocial.vue
@@ -0,0 +1,107 @@
+<template>
+  <el-table :data="socialUsers" :show-header="false">
+    <el-table-column fixed="left" title="序号" type="seq" width="60" />
+    <el-table-column align="left" label="社交平台" width="120">
+      <template #default="{ row }">
+        <img :src="row.img" alt="" class="h-5 align-middle" />
+        <p class="mr-5">{{ row.title }}</p>
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="操作">
+      <template #default="{ row }">
+        <template v-if="row.openid">
+          已绑定
+          <XTextButton class="mr-5" title="(解绑)" type="primary" @click="unbind(row)" />
+        </template>
+        <template v-else>
+          未绑定
+          <XTextButton class="mr-5" title="(绑定)" type="primary" @click="bind(row)" />
+        </template>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script lang="ts" setup>
+import { SystemUserSocialTypeEnum } from '@/utils/constants'
+import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
+import { socialAuthRedirect, socialBind, socialUnbind } from '@/api/system/user/socialUser'
+
+defineOptions({ name: 'UserSocial' })
+defineProps<{
+  activeName: string
+}>()
+const message = useMessage()
+const socialUsers = ref<any[]>([])
+const userInfo = ref<ProfileVO>()
+
+const initSocial = async () => {
+  socialUsers.value = [] // 重置避免无限增长
+  const res = await getUserProfile()
+  userInfo.value = res
+  for (const i in SystemUserSocialTypeEnum) {
+    const socialUser = { ...SystemUserSocialTypeEnum[i] }
+    socialUsers.value.push(socialUser)
+    if (userInfo.value?.socialUsers) {
+      for (const j in userInfo.value.socialUsers) {
+        if (socialUser.type === userInfo.value.socialUsers[j].type) {
+          socialUser.openid = userInfo.value.socialUsers[j].openid
+          break
+        }
+      }
+    }
+  }
+}
+const route = useRoute()
+const emit = defineEmits<{
+  (e: 'update:activeName', v: string): void
+}>()
+const bindSocial = () => {
+  // 社交绑定
+  const type = getUrlValue('type')
+  const code = route.query.code
+  const state = route.query.state
+  if (!code) {
+    return
+  }
+  socialBind(type, code, state).then(() => {
+    message.success('绑定成功')
+    emit('update:activeName', 'userSocial')
+  })
+}
+
+// 双层 encode 需要在回调后进行 decode
+function getUrlValue(key: string): string {
+  const url = new URL(decodeURIComponent(location.href))
+  return url.searchParams.get(key) ?? ''
+}
+
+const bind = (row) => {
+  // 双层 encode 解决钉钉回调 type 参数丢失的问题
+  const redirectUri = location.origin + '/user/profile?' + encodeURIComponent(`type=${row.type}`)
+  // 进行跳转
+  socialAuthRedirect(row.type, encodeURIComponent(redirectUri)).then((res) => {
+    window.location.href = res
+  })
+}
+const unbind = async (row) => {
+  const res = await socialUnbind(row.type, row.openid)
+  if (res) {
+    row.openid = undefined
+  }
+  message.success('解绑成功')
+}
+
+onMounted(async () => {
+  await initSocial()
+})
+
+watch(
+  () => route,
+  () => {
+    bindSocial()
+  },
+  {
+    immediate: true
+  }
+)
+</script>
diff --git a/marketing-ui/admin-ui/src/views/Profile/components/index.ts b/marketing-ui/admin-ui/src/views/Profile/components/index.ts
new file mode 100644
index 0000000..bb0efcd
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Profile/components/index.ts
@@ -0,0 +1,6 @@
+import BasicInfo from './BasicInfo.vue'
+import ProfileUser from './ProfileUser.vue'
+import ResetPwd from './ResetPwd.vue'
+import UserAvatarVue from './UserAvatar.vue'
+
+export { BasicInfo, ProfileUser, ResetPwd, UserAvatarVue}
diff --git a/marketing-ui/admin-ui/src/views/Redirect/Redirect.vue b/marketing-ui/admin-ui/src/views/Redirect/Redirect.vue
new file mode 100644
index 0000000..f7717ce
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/Redirect/Redirect.vue
@@ -0,0 +1,28 @@
+<template>
+  <div></div>
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'Redirect' })
+
+const { currentRoute, replace } = useRouter()
+const { params, query } = unref(currentRoute)
+const { path, _redirect_type = 'path' } = params
+
+Reflect.deleteProperty(params, '_redirect_type')
+Reflect.deleteProperty(params, 'path')
+
+const _path = Array.isArray(path) ? path.join('/') : path
+
+if (_redirect_type === 'name') {
+  replace({
+    name: _path,
+    query,
+    params
+  })
+} else {
+  replace({
+    path: _path.startsWith('/') ? _path : '/' + _path,
+    query
+  })
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/record/RecordDetail.vue b/marketing-ui/admin-ui/src/views/domesticsms/record/RecordDetail.vue
new file mode 100644
index 0000000..cc4839f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/record/RecordDetail.vue
@@ -0,0 +1,69 @@
+<template>
+  <Dialog v-model="dialogVisible" title="短信记录详情" width="1200">
+    <div class="detail-container" v-loading="detailListLoading">
+      <el-table :data="detailList" style="width: 100%" empty-text="暂无详情数据">
+        <el-table-column prop="id" label="详情ID" width="180" />
+        <el-table-column prop="sendStatus" label="发送状态" width="120">
+          <template #default="scope">
+            <el-tag v-if="scope.row.sendStatus === -1" type="warning">待发送</el-tag>
+            <el-tag v-else-if="scope.row.sendStatus === 0" type="success">已发送</el-tag>
+            <el-tag v-else-if="scope.row.sendStatus === 1" type="danger">发送失败</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="reportStatus" label="短信报告" width="120">
+          <template #default="scope">
+            <el-tag v-if="scope.row.reportStatus === 0" type="warning">待回执</el-tag>
+            <el-tag v-else-if="scope.row.reportStatus === 1" type="success">发送成功</el-tag>
+            <el-tag v-else-if="scope.row.reportStatus === 2" type="danger">发送失败</el-tag>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="channelCode" label="渠道编码" width="120" />
+        <el-table-column prop="channelAccountId" label="渠道账户ID" width="120" />
+        <el-table-column prop="msgid" label="三方短信ID" width="200" />
+        <el-table-column prop="errorMsg" label="错误信息" min-width="150" />
+        <el-table-column prop="price" label="消费金额" width="100" />
+      </el-table>
+    </div>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import request from '@/config/axios'
+
+/** 短信记录详情 */
+defineOptions({ name: 'RecordDetail' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailList = ref<any[]>([]) // 详情列表数据
+const detailListLoading = ref(false) // 详情列表加载状态
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  detailListLoading.value = true
+  try {
+    // 直接获取详情列表数据
+    const response = await request.get({
+      url: `/sms/record-detail/page`,
+      params: { recordId: id, pageNo: 1, pageSize: 100 } // 获取前100条记录
+    })
+    detailList.value = response.list || []
+  } catch (error) {
+    console.error('获取详情列表失败:', error)
+    detailList.value = []
+  } finally {
+    detailListLoading.value = false
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style scoped>
+.detail-container {
+  padding: 8px;
+}
+
+/* 移除重复的空数据提示样式 */
+</style>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/record/RecordForm.vue b/marketing-ui/admin-ui/src/views/domesticsms/record/RecordForm.vue
new file mode 100644
index 0000000..8491da1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/record/RecordForm.vue
@@ -0,0 +1,145 @@
+<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="mobile">
+        <el-input v-model="formData.mobile" placeholder="请输入手机号" />
+      </el-form-item>
+      <el-form-item label="国际电话区号" prop="nationcode">
+        <el-input v-model="formData.nationcode" placeholder="请输入国际电话区号如 86" />
+      </el-form-item>
+      <el-form-item label="应用编号" prop="appId">
+        <el-input v-model="formData.appId" placeholder="应用编号" />
+      </el-form-item>
+      <el-form-item label="短信类型" prop="recordType">
+        <el-select v-model="formData.recordType" placeholder="请选择0-验证码 1-短信通知 2-推广短信">
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="模版编号" prop="templateId">
+        <el-input v-model="formData.templateId" placeholder="请输入模版编号" />
+      </el-form-item>
+      <el-form-item label="模版参数" prop="templateParam">
+        <el-input v-model="formData.templateParam" placeholder="请输入模版参数" />
+      </el-form-item>
+      <el-form-item label="指定发送时间" prop="attime">
+        <el-date-picker
+          v-model="formData.attime"
+          type="date"
+          value-format="x"
+          placeholder="选择指定发送时间"
+        />
+      </el-form-item>
+      <el-form-item label="-1：待发送 / 0：已发送  /1  : 发送失败" prop="sendStatus">
+        <el-radio-group v-model="formData.sendStatus">
+          <el-radio value="1">请选择字典生成</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="发送IP" prop="senderIp">
+        <el-input v-model="formData.senderIp" placeholder="请输入发送IP" />
+      </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 { RecordApi, Record } from '@/api/domesticsms/record'
+
+/** 短信记录 表单 */
+defineOptions({ name: 'RecordForm' })
+
+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,
+  mobile: undefined,
+  nationcode: undefined,
+  appId: undefined,
+  recordType: undefined,
+  templateId: undefined,
+  templateParam: undefined,
+  attime: undefined,
+  sendStatus: undefined,
+  senderIp: undefined
+})
+const formRules = reactive({
+  mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
+  nationcode: [{ required: true, message: '国际电话区号如 86不能为空', trigger: 'blur' }],
+  templateId: [{ required: true, message: '模版编号不能为空', trigger: 'blur' }],
+  templateParam: [{ required: true, message: '模版参数不能为空', trigger: 'blur' }],
+  sendStatus: [{ required: true, message: '-1：待发送 / 0：已发送  /1  : 发送失败不能为空', 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 RecordApi.getRecord(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 Record
+    if (formType.value === 'create') {
+      await RecordApi.createRecord(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await RecordApi.updateRecord(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    mobile: undefined,
+    nationcode: undefined,
+    appId: undefined,
+    recordType: undefined,
+    templateId: undefined,
+    templateParam: undefined,
+    attime: undefined,
+    sendStatus: undefined,
+    senderIp: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/record/index.vue b/marketing-ui/admin-ui/src/views/domesticsms/record/index.vue
new file mode 100644
index 0000000..ae13ca3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/record/index.vue
@@ -0,0 +1,350 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <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="应用ID" prop="appId">
+        <el-input
+          v-model="queryParams.appId"
+          placeholder=""
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="任务ID" prop="taskId">
+        <el-input
+          v-model="queryParams.taskId"
+          placeholder=""
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="短信类型" prop="recordType">
+        <el-select
+          v-model="queryParams.recordType"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="验证码" value="0" />
+          <el-option label="短信通知" value="1" />
+          <el-option label="推广短信" value="2" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="发送状态" prop="sendStatus">
+        <el-select
+          v-model="queryParams.sendStatus"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="待发送" value="0" />
+          <el-option label="发送成功" value="1" />
+          <el-option label="发送失败" value="2" />
+          <el-option label="手动终止" value="3" />
+        </el-select>
+      </el-form-item>
+
+
+      <el-form-item label="模版编号" prop="templateId">
+        <el-input
+          v-model="queryParams.templateId"
+          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-220px"
+        />
+      </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="['sms:record:create']"-->
+<!--        >-->
+<!--          <Icon icon="ep:plus" class="mr-5px" /> 新增-->
+<!--        </el-button>-->
+
+<!--        <el-button-->
+<!--          type="success"-->
+<!--          plain-->
+<!--          @click="handleExport"-->
+<!--          :loading="exportLoading"-->
+<!--          v-hasPermi="['sms:record:export']"-->
+<!--        >-->
+<!--          <Icon icon="ep:download" class="mr-5px" /> 导出-->
+<!--        </el-button>-->
+
+<!--        <el-button-->
+<!--            type="danger"-->
+<!--            plain-->
+<!--            :disabled="isEmpty(checkedIds)"-->
+<!--            @click="handleDeleteBatch"-->
+<!--            v-hasPermi="['sms:record:delete']"-->
+<!--        >-->
+<!--          <Icon icon="ep:delete" class="mr-5px" /> 批量删除-->
+<!--        </el-button>-->
+
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" />
+      <el-table-column label="ID" align="center" prop="id"  width="180px"/>
+      <el-table-column label="手机号" align="center" prop="mobile"  width="120px"/>
+      <el-table-column label="appId" align="center" prop="appId" width="80px"/>
+
+<!--      <el-table-column label="短信类型" align="center" prop="recordType">-->
+<!--        <template #default="scope">-->
+<!--            {{ getTypeLabel(scope.row.recordType) }}-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+
+      <el-table-column label="内容" align="center" prop="content" width="460px" />
+
+      <el-table-column label="发送状态" align="center" prop="sendStatus">
+        <template #default="{ row }">
+          <el-tag v-if="row.sendStatus == 0" type="warning">待发送</el-tag>
+          <el-tag v-else-if="row.sendStatus == 1" type="success">发送成功</el-tag>
+          <el-tag v-else-if="row.sendStatus == 2" type="danger">发送失败</el-tag>
+          <el-tag v-else-if="row.sendStatus == 3" type="info">手动终止</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="130px"
+      />
+
+      <el-table-column label="操作" align="center" min-width="100px">
+
+        <template #default="scope">
+
+          <el-button
+            link
+            type="primary"
+            @click="openDetail( scope.row.id)"
+            v-hasPermi="['sms:record:update']"
+          >
+            详情
+          </el-button>
+
+<!--          <el-button-->
+<!--            link-->
+<!--            type="danger"-->
+<!--            @click="handleDelete(scope.row.id)"-->
+<!--            v-hasPermi="['sms:record: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <RecordForm ref="formRef" @success="getList" />
+
+  <!-- 表单弹窗：详情 -->
+  <RecordDetail ref="detailRef" />
+
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { RecordApi } from '@/api/domesticsms/record'
+import RecordForm from './RecordForm.vue'
+import RecordDetail from './RecordDetail.vue'
+
+/** 短信记录 列表 */
+defineOptions({ name: 'Record' })
+
+const detailRef = ref()
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const { query } = useRoute() // 查询参数
+
+const loading = ref(true) // 列表的加载中
+const list = ref<any[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  taskId: typeof query.taskId === 'string' ? query.taskId : undefined,
+  mobile: undefined,
+  nationcode: undefined,
+  international: 0,
+  appId: undefined,
+  recordType: undefined,
+  templateId: undefined,
+  templateParam: undefined,
+  senderIp: undefined,
+  createTime: [],
+  sendStatus: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await RecordApi.getRecordPage(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 RecordApi.deleteRecord(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除短信记录 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await RecordApi.deleteRecordList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: any[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await RecordApi.exportRecord(queryParams)
+    download.excel(data, '短信记录.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+const getTypeLabel = (type: string | number) => {
+  const typeMap: Record<string, string> = {
+    0: '验证码',
+    1: '短信通知',
+    2: '推广短信'
+  }
+  return typeMap[type] || '未知'
+}
+
+const getTypeTagType = (type: string | number) => {
+  const typeMap: Record<string, string> = {
+    0: 'success',
+    1: 'primary',
+    2: 'danger'
+  }
+  return typeMap[type] || 'info'
+}
+
+const openDetail = (id: number) => {
+  detailRef.value.open(id)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/sendtask/SendTaskForm-backup.vue b/marketing-ui/admin-ui/src/views/domesticsms/sendtask/SendTaskForm-backup.vue
new file mode 100644
index 0000000..8d89c15
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/sendtask/SendTaskForm-backup.vue
@@ -0,0 +1,435 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="title"
+    width="700px"
+    destroy-on-close
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="80px"
+    >
+      <el-form-item label="任务名称" prop="taskName">
+        <el-input
+          v-model="formData.taskName"
+          placeholder="请输入任务名称"
+          maxlength="30"
+          show-word-limit
+        />
+      </el-form-item>
+
+      <el-form-item label="短信签名" prop="signName">
+        <el-select
+          v-model="formData.signName"
+          placeholder="请选择短信签名"
+          :loading="signLoading"
+          @visible-change="handleSignVisibleChange"
+          @change="handleSignChange"
+        >
+          <el-option v-for="sign in signOptions" :key="sign.id" :label="sign.signName" :value="sign.signName" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="短信模板" prop="templateId">
+        <el-select
+          v-model="formData.templateId"
+          placeholder="请选择短信模板"
+          @change="onTemplateChange"
+        >
+          <el-option v-for="template in templateList" :key="template.id" :label="template.templateName" :value="template.id" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="短信内容" prop="content">
+        <el-input
+          v-model="formData.content"
+          placeholder="短信内容"
+          type="textarea"
+          :rows="4"
+          readonly
+        />
+      </el-form-item>
+
+      <el-form-item label="接收方式" prop="receiveType">
+        <el-radio-group v-model="formData.receiveType" @change="onReceiveTypeChange">
+          <el-radio label="0">手动输入</el-radio>
+          <el-radio label="1">文件导入</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <!-- 手动输入手机号 -->
+      <el-form-item v-if="formData.receiveType === '0'" label="手机号" prop="mobiles">
+        <el-input
+          v-model="formData.mobiles"
+          placeholder="多个手机号用英文逗号分隔，最多支持1000个"
+          type="textarea"
+          :rows="4"
+        />
+        <div class="text-xs text-gray-500 mt-2">
+          已输入 {{ mobileCount }} 个手机号
+        </div>
+      </el-form-item>
+
+      <!-- 文件导入 -->
+      <el-form-item v-if="formData.receiveType === '1'" label="文件上传" prop="file">
+        <el-upload
+          ref="uploadRef"
+          v-model:file-list="fileList"
+          accept=".xlsx,.xls,.csv"
+          :auto-upload="false"
+          :on-change="handleFileChange"
+          class="upload-demo"
+        >
+          <el-button type="primary">选择文件</el-button>
+          <template #tip>
+            <div class="el-upload__tip text-xs text-gray-500">
+              支持格式：xlsx、xls、csv，文件大小不超过5MB，最多支持10000条数据
+            </div>
+          </template>
+        </el-upload>
+        <div v-if="importResult" class="mt-2 p-2 bg-gray-50 rounded">
+          <p class="text-xs text-gray-500">导入结果：成功 {{ importResult.successCount }} 条，失败 {{ importResult.failCount }} 条</p>
+        </div>
+      </el-form-item>
+
+      <!-- 联系人选择功能已移除 -->
+
+      <el-form-item label="定时发送" prop="sendTime">
+        <el-switch
+          v-model="formData.isTiming"
+          @change="onTimingChange"
+        />
+        <el-date-picker
+          v-if="formData.isTiming"
+          v-model="formData.sendTime"
+          type="datetime"
+          placeholder="选择发送时间"
+          class="ml-4"
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="formData.remark"
+          placeholder="请输入备注信息"
+          maxlength="200"
+          show-word-limit
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { ElForm, ElMessage } from 'element-plus'
+import { SmsTaskApi, SmsTask } from '@/api/domesticsms/sendtask'
+import {SignInfoApi} from "@/api/domesticsms/signinfo";
+
+// 定义接口类型
+interface SendTaskFormData {
+  id?: number
+  taskName: string
+  signName: string
+  templateId: number
+  content: string
+  receiveType: string
+  mobiles: string
+  file?: File
+  isTiming: boolean
+  sendTime?: string
+  remark: string
+}
+
+// 短信签名信息
+interface SignInfo {
+  id: number;
+  signName: string;
+}
+
+// 短信模板信息
+interface TemplateInfo {
+  id: number;
+  templateName: string;
+  templateContent: string;
+}
+
+const emit = defineEmits(['success'])
+
+const visible = ref(false)
+const title = ref('新增短信发送任务')
+const formRef = ref<InstanceType<typeof ElForm>>()
+const uploadRef = ref()
+const fileList = ref<any[]>([])
+const importResult = ref<any>(null)
+
+
+const formData = reactive<SendTaskFormData>({
+  id: undefined,
+  taskName: '',
+  signName: '',
+  templateId: 0,
+  content: '',
+  receiveType: '0',
+  mobiles: '',
+
+  isTiming: false,
+  sendTime: undefined,
+  remark: ''
+})
+
+const signList = ref<SignInfo[]>([])
+const templateList = ref<TemplateInfo[]>([])
+
+
+// 手机号数量计算
+const mobileCount = computed(() => {
+  if (!formData.mobiles) return 0
+  return formData.mobiles.split(',').filter(mobile => mobile.trim()).length
+})
+
+// 表单验证规则
+const rules = reactive({
+  taskName: [
+    { required: true, message: '请输入任务名称', trigger: 'blur' }
+  ],
+  signName: [
+    { required: true, message: '请选择短信签名', trigger: 'change' }
+  ],
+  templateId: [
+    { required: true, message: '请选择短信模板', trigger: 'change' }
+  ],
+  content: [
+    { required: true, message: '短信内容不能为空', trigger: 'blur' }
+  ],
+  mobiles: [
+    { required: true, message: '请输入手机号', trigger: 'blur', validator: validateMobiles }
+  ]
+})
+
+// 手机号验证
+function validateMobiles(rule: any, value: string, callback: any) {
+  if (!value) {
+    callback(new Error('请输入手机号'))
+    return
+  }
+  const mobiles = value.split(',').filter(mobile => mobile.trim())
+  if (mobiles.length > 1000) {
+    callback(new Error('最多支持1000个手机号'))
+    return
+  }
+  callback()
+}
+
+// 打开表单
+const open = async (type: string, id?: number) => {
+  // 重置表单
+  resetForm()
+  
+  if (type === 'create') {
+    title.value = '新增短信发送任务'
+  } else if (type === 'update' && id) {
+    title.value = '编辑短信发送任务'
+    await loadData(id)
+  }
+  
+  // 加载基础数据
+  await loadBaseData()
+  
+  visible.value = true
+}
+
+// 加载表单数据
+const loadData = async (id: number) => {
+  try {
+    const data = await SmsTaskApi.getSmsTask(id)
+    Object.assign(formData, data)
+
+  } catch (error) {
+    ElMessage.error('获取任务详情失败')
+  }
+}
+
+// 加载基础数据
+const loadBaseData = async () => {
+  try {
+
+    fetchSignList('')
+
+    // 这里可以调用实际的API获取模板列表
+    templateList.value = [
+      { id: 1, templateName: '验证码模板', templateContent: '您的验证码是：{code}，有效期为5分钟，请尽快使用。' },
+      { id: 2, templateName: '通知模板', templateContent: '尊敬的用户，您的账户有新的通知，请及时查看。' }
+    ]
+  } catch (error) {
+    ElMessage.error('加载基础数据失败')
+  }
+}
+
+// 模板变更事件
+const onTemplateChange = async (templateId: number | undefined) => {
+  if (!templateId) return
+  try {
+    const template = templateList.value.find(t => t.id === templateId)
+    if (template) {
+      formData.content = template.templateContent
+    }
+  } catch (error) {
+    ElMessage.error('获取模板内容失败')
+  }
+}
+
+// 接收方式变更事件
+const onReceiveTypeChange = () => {
+  // 清空其他方式的数据
+  if (formData.receiveType === '0') {
+    fileList.value = []
+  } else if (formData.receiveType === '1') {
+    formData.mobiles = ''
+  }
+}
+
+// 定时发送切换事件
+const onTimingChange = () => {
+  if (!formData.isTiming) {
+    formData.sendTime = undefined
+  }
+}
+
+// 文件变更事件
+const handleFileChange = (file: any) => {
+  formData.file = file.raw
+  // 这里可以添加文件解析逻辑
+  // 模拟导入结果
+  setTimeout(() => {
+    importResult.value = {
+      successCount: 100,
+      failCount: 5
+    }
+  }, 1000)
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.id = undefined
+  formData.taskName = ''
+  formData.signName = ''
+  formData.templateId = 0
+  formData.content = ''
+  formData.receiveType = '0'
+  formData.mobiles = ''
+  formData.isTiming = false
+  formData.sendTime = undefined
+  formData.remark = ''
+  fileList.value = []
+  importResult.value = null
+  
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+
+// 取消操作
+const handleCancel = () => {
+  visible.value = false
+  resetForm()
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    
+    // 准备提交数据
+    const submitData: SmsTask = {
+      id: formData.id || 0,
+      taskName: formData.taskName,
+      signName: formData.signName,
+      templateId: formData.templateId,
+      templateContent: formData.content,
+      attime: formData.isTiming && formData.sendTime ? formData.sendTime : new Date().toISOString(),
+      remark: formData.remark,
+      // 其他需要的字段
+      totalCount: 0,
+      successCount: 0,
+      failCount: 0,
+      sendStatus: 0
+    }
+    
+    if (formData.id) {
+      await SmsTaskApi.updateSmsTask(submitData)
+    } else {
+      await SmsTaskApi.createSmsTask(submitData)
+    }
+    
+    ElMessage.success('操作成功')
+    visible.value = false
+    emit('success')
+  } catch (error) {
+    ElMessage.error('操作失败')
+  }
+}
+
+// 签名选择相关
+const signOptions = ref<Array<{ id: number, signName: string }>>([])
+const signLoading = ref(false)
+
+// 调用 signApi 的 page 接口获取签名列表
+const fetchSignList = async (signName?: string) => {
+  signLoading.value = true
+  try {
+    // 构建查询参数，包含可选的 signName
+    const params = {
+      pageNum: 1,
+      pageSize: 10, // 设置一个较大的值以获取所有可用签名
+      signName: signName || ''
+    }
+    // 使用 getSignInfoPage 接口获取签名列表
+    const res = await SignInfoApi.getSignInfoPage(params)
+    signOptions.value = res?.records || []
+  } catch (error) {
+    console.error('获取签名列表失败:', error)
+    ElMessage.error('获取签名列表失败')
+  } finally {
+    signLoading.value = false
+  }
+}
+
+// 处理签名选择框显示状态变化
+const handleSignVisibleChange = async (visible: boolean) => {
+  if (visible) {
+    // 当签名选择框显示时，获取签名列表
+    await fetchSignList()
+  }
+}
+
+// 监听签名变化，当签名变化时重新获取签名列表
+const handleSignChange = async () => {
+  await fetchSignList(formData.signName)
+}
+
+// 暴露方法
+defineExpose({
+  open
+})
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/sendtask/SmsTaskForm.vue b/marketing-ui/admin-ui/src/views/domesticsms/sendtask/SmsTaskForm.vue
new file mode 100644
index 0000000..71e9078
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/sendtask/SmsTaskForm.vue
@@ -0,0 +1,593 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="title"
+    width="700px"
+    destroy-on-close
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="80px"
+    >
+      <el-form-item label="任务名称" prop="taskName">
+        <el-input
+          v-model="formData.taskName"
+          placeholder="请输入任务名称"
+          maxlength="30"
+          show-word-limit
+        />
+      </el-form-item>
+
+      <el-form-item label="短信签名" prop="signId">
+        <el-select
+          v-model="formData.signId"
+          placeholder="请选择短信签名"
+          :loading="signLoading"
+          filterable
+          remote
+          default-first-option
+          :remote-method="handleRemoteQuery"
+          @visible-change="handleSignVisibleChange"
+          @change="handleSignChange"
+        >
+          <el-option v-for="sign in signOptions" :key="sign.id" :label="sign.signName" :value="sign.id" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="短信模板" prop="templateId">
+        <el-select
+          v-model="formData.templateId"
+          placeholder="请选择短信模板"
+          filterable
+          remote
+          :remote-method="handleTemplateRemoteQuery"
+          @change="onTemplateChange"
+        >
+          <el-option v-for="template in templateList" :key="template.id" :label="template.templateName" :value="template.id" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="接收方式" prop="receiveType">
+        <el-radio-group v-model="formData.receiveType" @change="onReceiveTypeChange">
+          <el-radio label="0">手动输入</el-radio>
+          <el-radio label="1">文件导入</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <!-- 手动输入手机号 -->
+      <el-form-item v-if="formData.receiveType === '0'" label="手机号" prop="mobiles">
+        <el-input
+          v-model="formData.mobiles"
+          placeholder="使用回车键换行，一行视为一个号码，最多可输入100个"
+          type="textarea"
+          :rows="4"
+          :disabled="formData.hasDynamicParams"
+        />
+        <div class="text-xs text-gray-500 mt-2">
+          已输入 {{ mobileCount }} 个手机号
+        </div>
+        <div v-if="formData.hasDynamicParams" class="text-xs text-red-500 mt-1">
+          当前模板包含动态参数，不支持手工输入手机号，请使用文件导入方式
+        </div>
+      </el-form-item>
+
+      <el-form-item v-if="formData.receiveType === '1'" label="文件上传" prop="file">
+        <el-upload
+          ref="uploadRef"
+          v-model:file-list="fileList"
+          accept=".xlsx,.xls"
+          :auto-upload="false"
+          :on-change="handleFileChange"
+          :on-remove="handleFileRemove"
+          class="upload-demo"
+          :limit="1"
+        >
+          <el-button type="primary">选择文件</el-button>
+          <template #tip>
+            <div class="el-upload__tip text-xs text-gray-500">
+              支持格式：xlsx、xls，文件大小不超过10MB,最多支持100000条数据
+              <a href="javascript:void(0)" @click="downloadSampleFile" class="text-blue-500 ml-2">
+                下载示例文件
+              </a>
+            </div>
+          </template>
+        </el-upload>
+      </el-form-item>
+
+      <el-form-item label="定时发送" prop="sendTime">
+        <el-switch
+          v-model="formData.isTiming"
+          @change="onTimingChange"
+        />
+        <el-date-picker
+          v-if="formData.isTiming"
+          v-model="formData.sendTime"
+          type="datetime"
+          placeholder="选择发送时间"
+          class="ml-4"
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="formData.remark"
+          placeholder="请输入备注信息"
+          maxlength="200"
+          show-word-limit
+        />
+      </el-form-item>
+
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { TemplateInfoApi } from '@/api/domesticsms/templateinfo';
+import {SignInfoApi} from "@/api/domesticsms/signinfo"
+import { SmsTaskApi } from '@/api/domesticsms/sendtask';
+import { ref, reactive, computed, watch } from 'vue'
+import { ElForm, ElMessage } from 'element-plus'
+
+// 定义接口类型
+interface SendTaskFormData {
+  id?: number
+  taskName: string
+  signName: string
+  signId?: number
+  templateId?: number
+  content: string
+  receiveType: string
+  mobiles: string
+  file?: File
+  isTiming: boolean
+  sendTime?: string
+  remark: string
+  hasDynamicParams: boolean
+}
+
+// 短信模板信息
+interface TemplateInfo {
+  id: number;
+  templateName: string;
+  templateContent: string;
+}
+
+const emit = defineEmits(['success'])
+
+const visible = ref(false)
+const title = ref('新增短信发送任务')
+const formRef = ref<InstanceType<typeof ElForm>>()
+const uploadRef = ref()
+const fileList = ref<any[]>([])
+const importResult = ref<any>(null)
+
+const formData = reactive<SendTaskFormData>({
+  id: undefined,
+  taskName: '',
+  signName: '',
+  signId: undefined,
+  templateId: undefined,
+  content: '',
+  receiveType: '0',
+  mobiles: '',
+  file: undefined,
+  isTiming: false,
+  sendTime: undefined,
+  remark: '',
+  hasDynamicParams: false
+})
+
+const templateList = ref<TemplateInfo[]>([])
+
+// 手机号数量计算
+const mobileCount = computed(() => {
+  if (!formData.mobiles) return 0
+  return formData.mobiles.split('\n').filter(mobile => mobile.trim()).length
+})
+
+// 判断模板是否包含动态参数的函数
+function checkHasDynamicParams(content: string): boolean {
+  return /\$\{[^}]+\}/g.test(content)
+}
+
+// 表单验证规则
+const rules = reactive({
+  taskName: [
+    { required: true, message: '请输入任务名称', trigger: 'blur' }
+  ],
+  signId: [
+    { required: true, message: '请选择短信签名', trigger: 'change' }
+  ],
+  templateId: [
+    { required: true, message: '请选择短信模板', trigger: 'change' }
+  ],
+  sendTime: [
+    {
+      validator: (rule: any, value: string, callback: any) => {
+        if (formData.isTiming) {
+          if (!value) {
+            callback(new Error('请选择定时发送时间'))
+            return
+          }
+          const selectedTime = new Date(value).getTime()
+          const currentTime = new Date().getTime()
+          if (selectedTime <= currentTime) {
+            callback(new Error('定时发送时间必须大于当前时间'))
+            return
+          }
+        }
+        callback()
+      },
+      trigger: ['blur', 'change']
+    }
+  ],
+  mobiles: [
+        {
+          validator: (rule: any, value: string, callback: any) => {
+            if (formData.receiveType === '0') {
+              if (!value) {
+                callback(new Error('请输入手机号'))
+                return
+              }
+              const mobiles = value.split('\n').filter(mobile => mobile.trim())
+              if (mobiles.length > 100) {
+                callback(new Error('最多支持100个手机号'))
+                return
+              }
+            }
+            callback()
+          },
+          trigger: ['blur', 'change']
+        }
+      ],
+  file: [
+    {
+      validator: (rule: any, value: File | undefined, callback: any) => {
+        if (formData.receiveType === '1') {
+          if (!value) {
+            callback(new Error('请选择上传文件'))
+            return
+          }
+          // 检查文件格式，只允许Excel文件
+          const fileName = value.name.toLowerCase();
+          if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
+            callback(new Error('仅支持Excel格式文件(.xlsx, .xls)'))
+            return
+          }
+          if (value.size > 10 * 1024 * 1024) {
+            callback(new Error('文件大小不能超过10MB'))
+            return
+          }
+        }
+        callback()
+      },
+      trigger: 'change'
+    }
+  ]
+})
+
+// 手机号验证
+function validateMobiles(rule: any, value: string, callback: any) {
+  if (!value) {
+    callback(new Error('请输入手机号'))
+    return
+  }
+  const mobiles = value.split('\n').filter(mobile => mobile.trim())
+  if (mobiles.length > 100) {
+    callback(new Error('最多支持100个手机号'))
+    return
+  }
+  callback()
+}
+
+// 打开表单
+const open = async (type: string, id?: number) => {
+  // 重置表单
+  resetForm()
+
+  title.value = '新增短信发送任务'
+
+  // 加载基础数据
+  await loadBaseData()
+
+  visible.value = true
+}
+
+// 加载模板列表
+const loadTemplateList = async (templateName?: string) => {
+  if (!formData.signId) {
+    return false;
+  }
+  try {
+    const params = {
+      pageNum: 1,
+      pageSize: 100, // 设置较大的页面大小获取足够的模板
+      signId: formData.signId,
+      templateName: templateName || ''
+    }
+    const templateData = await TemplateInfoApi.getTemplateInfoPage(params)
+    templateList.value = templateData.list || []
+  } catch (error) {
+    console.error('获取模板列表失败:', error)
+    ElMessage.error('获取模板列表失败')
+  }
+}
+
+// 处理签名变更
+const handleSignChange = async (signId: number) => {
+  // 找到对应的签名信息
+  const selectedSign = signOptions.value.find(sign => sign.id === signId)
+  if (selectedSign) {
+    formData.signName = selectedSign.signName
+  }
+  
+  // 清空之前选择的模板
+  formData.templateId = undefined
+  formData.signId = signId
+  formData.content = ''
+  
+  // 加载对应的模板列表
+  await loadTemplateList()
+}
+
+// 处理模板远程搜索
+const handleTemplateRemoteQuery = async (query: string) => {
+  await loadTemplateList(query)
+}
+
+// 加载基础数据
+const loadBaseData = async () => {
+  try {
+    // 调用 fetchSignList 获取签名列表
+    await fetchSignList('')
+  } catch (error) {
+    ElMessage.error('加载基础数据失败')
+  }
+}
+
+// 模板变更事件
+const onTemplateChange = async (templateId: number | undefined) => {
+  if (templateId === undefined || templateId === null) return
+  try {
+    // 重新加载模板列表，确保数据是最新的
+    await loadTemplateList()
+    // 从更新后的模板列表中查找当前选中的模板
+    const template = templateList.value.find(t => t.id === templateId)
+    if (template) {
+      formData.content = template.content
+    }
+    console.log('template.content', formData.content)
+    // 主动调用检查函数，确保及时更新动态参数状态
+    formData.hasDynamicParams = checkHasDynamicParams(formData.content)
+    console.log('formData.hasDynamicParams:', formData.hasDynamicParams)
+  } catch (error) {
+    ElMessage.error('获取模板内容失败')
+  }
+}
+
+// 接收方式变更事件
+const onReceiveTypeChange = () => {
+  // 清空其他方式的数据
+  if (formData.receiveType === '0') {
+    fileList.value = []
+  } else if (formData.receiveType === '1') {
+    formData.mobiles = ''
+  }
+}
+
+// 定时发送切换事件
+const onTimingChange = () => {
+  if (!formData.isTiming) {
+    formData.sendTime = undefined
+  }
+}
+
+// 导入request对象
+import request from '@/config/axios'
+import download from '@/utils/download'
+
+// 下载示例文件
+    const downloadSampleFile = async () => {
+      try {
+        // 使用request.download方法下载文件，自动处理权限验证
+        const response = await request.download({
+          url: '/record/sms-task/downloadDemo'
+        });
+        
+        // 使用download工具处理文件下载 - 直接使用response，因为download方法返回整个响应对象
+        download.excel(response, '示例.xlsx');
+      } catch (error) {
+        console.error('下载示例文件失败:', error);
+        // 不需要额外的错误提示，因为request拦截器已经会处理权限不通过等情况
+      }
+    }
+
+// 文件变更事件
+const handleFileChange = (file: any) => {
+  // 检查文件大小
+  if (file.size > 10 * 1024 * 1024) {
+    ElMessage.error('文件大小不能超过10MB')
+    fileList.value = []
+    formData.file = undefined
+    return
+  }
+  
+  // 检查文件类型
+  const fileType = file.name.substring(file.name.lastIndexOf('.'))
+  const allowedTypes = ['.xlsx', '.xls']
+  if (!allowedTypes.includes(fileType.toLowerCase())) {
+    ElMessage.error('仅支持 xlsx、xls 格式的文件')
+    fileList.value = []
+    formData.file = undefined
+    return
+  }
+  
+  formData.file = file.raw
+}
+
+
+
+// 文件移除事件
+const handleFileRemove = () => {
+  formData.file = undefined
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.id = undefined
+  formData.taskName = ''
+  formData.signName = ''
+  formData.signId = undefined
+  formData.templateId = undefined
+  formData.content = ''
+  formData.receiveType = '0'
+  formData.mobiles = ''
+  formData.file = undefined
+  formData.isTiming = false
+  formData.sendTime = undefined
+  formData.remark = ''
+  formData.hasDynamicParams = undefined
+
+  fileList.value = []
+
+  importResult.value = null
+
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+
+// 取消操作
+const handleCancel = () => {
+  visible.value = false
+  resetForm()
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+
+  try {
+    await formRef.value.validate()
+
+    // 根据接收方式选择不同的提交逻辑
+    if (formData.receiveType === '0') {
+      // 手动输入方式 - 确保符合 SmsTask 接口定义
+      // 将换行分隔的手机号转换为逗号分隔的格式
+      const formattedPhoneNumbers = formData.mobiles.split('\n')
+        .filter(mobile => mobile.trim())
+        .join(',')
+        
+      const submitData: any = {
+        id: formData.id || 0,
+        taskName: formData.taskName,
+        signName: formData.signName,
+        signId: formData.signId,
+        templateId: formData.templateId,
+        templateName: '',
+        templateContent: formData.content,
+        phoneNumbers: formattedPhoneNumbers,
+        // 只有在明确开启定时发送并设置了时间时才提交定时时间，并转换为时间戳
+        attime: formData.isTiming && formData.sendTime ? new Date(formData.sendTime).getTime() : undefined,
+        remark: formData.remark
+      }
+      
+      await SmsTaskApi.createSmsTask(submitData)
+    } else if (formData.receiveType === '1' && formData.file) {
+      // 文件导入方式
+      const formDataObj = new FormData()
+      formDataObj.append('file', formData.file)
+      formDataObj.append('appId', '1164') // 这里可能需要从全局配置中获取
+      formDataObj.append('taskName', formData.taskName)
+      formDataObj.append('signId', formData.signId?.toString() || '')
+      formDataObj.append('signName', formData.signName)
+      formDataObj.append('templateId', formData.templateId?.toString() || '')
+      formDataObj.append('templateName', '') // 这里可能需要从模板列表中获取
+      formDataObj.append('templateContent', formData.content)
+      if (formData.isTiming && formData.sendTime) {
+        // 转换为时间戳
+        const timestamp = new Date(formData.sendTime).getTime()
+        formDataObj.append('attime', timestamp.toString())
+      }
+      if (formData.remark) {
+        formDataObj.append('remark', formData.remark)
+      }
+      
+      await SmsTaskApi.createSmsTaskByFile(formDataObj)
+    }
+
+    ElMessage.success('操作成功')
+    visible.value = false
+    emit('success')
+  } catch (error) {
+    ElMessage.error('操作失败')
+    console.error('提交表单失败:', error)
+  }
+}
+
+// 签名选择相关
+const signOptions = ref<Array<{ id: number, signName: string }>>([])
+const signLoading = ref(false)
+
+// 调用 signApi 的 page 接口获取签名列表
+const fetchSignList = async (signName?: string) => {
+  signLoading.value = true
+  try {
+    // 构建查询参数，包含可选的 signName
+    const params = {
+      pageNum: 1,
+      pageSize: 10, // 设置适当的页面大小
+      signName: signName || '',
+      international: 0 // 国内短信
+    }
+    // 使用 getSignInfoPage 接口获取签名列表
+    const res = await SignInfoApi.getSignInfoPage(params)
+    signOptions.value = res.list || []
+  } catch (error) {
+    console.error('获取签名列表失败:', error)
+    ElMessage.error('获取签名列表失败')
+  } finally {
+    signLoading.value = false
+  }
+}
+
+// 处理签名选择框显示状态变化
+const handleSignVisibleChange = async (visible: boolean) => {
+  if (visible) {
+    // 当签名选择框显示时，获取签名列表
+    await fetchSignList()
+  }
+}
+
+// 处理远程搜索
+const handleRemoteQuery = async (query: string) => {
+  if (query !== undefined) {
+    await fetchSignList(query)
+  }
+}
+
+
+
+// 暴露方法
+defineExpose({
+  open
+})
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/sendtask/index.vue b/marketing-ui/admin-ui/src/views/domesticsms/sendtask/index.vue
new file mode 100644
index 0000000..af39b72
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/sendtask/index.vue
@@ -0,0 +1,387 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="应用编号" prop="appId">
+        <el-input
+          v-model="queryParams.appId"
+          placeholder="请输入应用编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="短信签名" prop="signName">
+        <el-input
+          v-model="queryParams.signName"
+          placeholder="请输入短信签名"
+          clearable
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="任务状态" prop="taskStatus">
+        <el-select
+          v-model="queryParams.taskStatus"
+          placeholder="请选择发送状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="待发送" value="0" />
+          <el-option label="发送中" value="1" />
+          <el-option label="发送完毕" value="2" />
+          <el-option label="手动终止" value="3" />
+          <el-option label="已暂停" value="4" />
+          <el-option label="已终止" value="5" />
+        </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-220px"
+        />
+      </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="['record:sms-task:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+
+<!--        <el-button-->
+<!--          type="success"-->
+<!--          plain-->
+<!--          @click="handleExport"-->
+<!--          :loading="exportLoading"-->
+<!--          v-hasPermi="['record:sms-task:export']"-->
+<!--        >-->
+<!--          <Icon icon="ep:download" class="mr-5px" /> 导出-->
+<!--        </el-button>-->
+
+<!--        <el-button-->
+<!--            type="danger"-->
+<!--            plain-->
+<!--            :disabled="isEmpty(checkedIds)"-->
+<!--            @click="handleDeleteBatch"-->
+<!--            v-hasPermi="['record:sms-task:delete']"-->
+<!--        >-->
+<!--          <Icon icon="ep:delete" class="mr-5px" /> 批量删除-->
+<!--        </el-button>-->
+
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" />
+      <el-table-column label="任务编号" align="center" prop="id" width="155"  />
+
+      <el-table-column label="任务名称" align="center" prop="taskName" />
+
+      <el-table-column label="签名" align="center" prop="signName" />
+
+      <el-table-column label="模版名称" align="center" prop="templateName" />
+
+      <el-table-column label="进度" align="center" prop="totalCount" min-width="120px">
+        <template #default="{ row }">
+          {{ getProcessedCount(row.id) }} / {{ row.totalCount }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="任务状态" align="center" prop="sendStatus">
+        <template #default="{ row }">
+          <el-tag v-if="row.taskStatus == 0" type="warning">待发送</el-tag>
+          <el-tag v-else-if="row.taskStatus == 1" type="primary">发送中</el-tag>
+          <el-tag v-else-if="row.taskStatus == 2" type="success">发送完毕</el-tag>
+          <el-tag v-else-if="row.taskStatus == 3" type="danger">手动终止</el-tag>
+          <el-tag v-else-if="row.taskStatus == 4" type="info">已暂停</el-tag>
+          <el-tag v-else-if="row.taskStatus == 5" type="danger">已终止</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="定时时间" align="center" prop="attime" :formatter="dateFormatter" width="155"/>
+
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+
+      <el-table-column label="操作" align="center" min-width="180px">
+
+        <template #default="{ row }">
+          <el-button
+            type="primary"
+            size="small"
+            link
+            @click="handleDetail(row.id)"
+            v-hasPermi="['record:sms-task:query']"
+          >
+             详情
+          </el-button>
+          <!-- 暂停：仅待发送(0)或发送中(1)可操作 -->
+          <el-button
+            v-if="row.taskStatus === 0 || row.taskStatus === 1"
+            type="warning"
+            size="small"
+            link
+            @click="handlePause(row.id)"
+            v-hasPermi="['record:sms-task:update']"
+          >
+            暂停
+          </el-button>
+          <!-- 恢复：仅已暂停(4)可操作 -->
+          <el-button
+            v-if="row.taskStatus === 4"
+            type="success"
+            size="small"
+            link
+            @click="handleResume(row.id)"
+            v-hasPermi="['record:sms-task:update']"
+          >
+            恢复
+          </el-button>
+          <!-- 终止：仅已暂停(4)可操作 -->
+          <el-button
+            v-if="row.taskStatus === 4"
+            type="danger"
+            size="small"
+            link
+            @click="handleTerminate(row.id)"
+            v-hasPermi="['record:sms-task:update']"
+          >
+            终止
+          </el-button>
+        </template>
+
+      </el-table-column>
+
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <SmsTaskForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter, attimeFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { SmsTaskApi, SmsTask } from '@/api/domesticsms/sendtask'
+import { RecordApi } from '@/api/domesticsms/record'
+import SmsTaskForm from './SmsTaskForm.vue'
+const { push } = useRouter() // 路由
+
+/** 短信任务 列表 */
+defineOptions({ name: 'SmsTask' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<SmsTask[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const recordCounts = ref<Record<string, number>>({}) // 从 sms_record 表实时查询的已处理数量
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  appId: undefined,
+  taskName: undefined,
+  signId: undefined,
+  signName: undefined,
+  templateId: undefined,
+  templateName: undefined,
+  templateContent: undefined,
+  totalCount: undefined,
+  international: 0,
+  successCount: undefined,
+  failCount: undefined,
+  taskStatus: undefined,
+  attime: [],
+  remark: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await SmsTaskApi.getSmsTaskPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+    // 从 sms_record 表实时查询已处理数量
+    await loadRecordCounts()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 从 sms_record 表实时查询各任务的已处理数量 */
+const loadRecordCounts = async () => {
+  const taskIds = list.value.map((item) => item.id).filter(Boolean)
+  if (taskIds.length === 0) return
+  try {
+    const counts = await RecordApi.countByTaskIds(taskIds)
+    const map: Record<string, number> = {}
+    for (const item of counts) {
+      const taskId = String(item.taskId)
+      map[taskId] = (map[taskId] || 0) + Number(item.count)
+    }
+    recordCounts.value = map
+  } catch (e) {
+    console.error('查询记录计数失败', e)
+  }
+}
+
+/** 获取任务已处理数量 */
+const getProcessedCount = (taskId: number) => {
+  return recordCounts.value[String(taskId)] || 0
+}
+
+/** 搜索按钮操作 */
+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 SmsTaskApi.deleteSmsTask(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除短信任务 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await SmsTaskApi.deleteSmsTaskList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: SmsTask[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await SmsTaskApi.exportSmsTask(queryParams)
+    download.excel(data, '短信任务.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 暂停任务 */
+const handlePause = async (id: number) => {
+  try {
+    await message.confirm('确认要暂停该任务的发送吗？暂停后已入队的消息也将停止发送。')
+    await SmsTaskApi.pauseSmsTask(id)
+    message.success('暂停成功')
+    await getList()
+  } catch {}
+}
+
+/** 恢复任务 */
+const handleResume = async (id: number) => {
+  try {
+    await message.confirm('确认要恢复该任务的发送吗？未发送的消息将继续发送。')
+    await SmsTaskApi.resumeSmsTask(id)
+    message.success('恢复成功')
+    await getList()
+  } catch {}
+}
+
+/** 终止任务 */
+const handleTerminate = async (id: number) => {
+  try {
+    await message.confirm('确认要终止该任务吗？已发送的记录将保留，未发送的记录将标记为"已终止"。此操作不可撤销！')
+    await SmsTaskApi.terminateSmsTask(id)
+    message.success('终止成功')
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+
+/** 详情按钮操作 此处需要调用 npm run dev 重新启动 */
+const handleDetail =  (id: number) => {
+  if (id && id > 0) {
+    push( '/domesticsms/record?taskId=' + id)
+  } else {
+    push( '/domesticsms/record')
+  }
+}
+
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/signinfo/SignInfoForm.vue b/marketing-ui/admin-ui/src/views/domesticsms/signinfo/SignInfoForm.vue
new file mode 100644
index 0000000..3981ab9
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/signinfo/SignInfoForm.vue
@@ -0,0 +1,204 @@
+<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="signName">
+        <el-input v-model="formData.signName" placeholder="请输入签名名称" :disabled="formType === 'update'"/>
+      </el-form-item>
+
+      <el-form-item label="租户" prop="tenantId" v-if="formType === 'create'">
+        <el-select v-model="formData.tenantId" filterable clearable
+                   remote
+                   :remote-method="searchTenants"
+                   placeholder="请输入租户名称搜索"
+        >
+          <el-option
+            v-for="tenant in tenantList"
+            :key="tenant.id"
+            :label="tenant.tenantUserName"
+            :value="tenant.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="租户" v-else>
+        <el-input v-model="formData.tenantUserName" disabled />
+      </el-form-item>
+
+      <el-form-item label="签名类型" prop="signType">
+        <el-select
+          v-model="formData.signType"
+          placeholder="请选择签名类型"
+          clearable
+        >
+          <el-option label="全部" value="" />
+          <el-option label="企业" :value="0" />
+          <el-option label="APP/网站" :value="1" />
+          <el-option label="商标" :value="2" />
+          <el-option label="政府/事业单位" :value="3" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="绑定渠道账号" prop="bindingAccountIds">
+        <el-select
+          v-model="formData.bindingAccountIds"
+          multiple
+          placeholder="请选择渠道账号"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in accountOptions"
+            :key="item.id"
+            :label="item.accountName"
+            :value="item.id"
+            :disabled="formType === 'update' && (formData.bindingAccountIds || []).includes(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="备注说明" prop="remark">
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入备注说明"
+          maxlength="200"
+          show-word-limit
+        />
+      </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 { SignInfoApi, SignInfo } from '@/api/domesticsms/signinfo'
+import {ChannelAccountApi} from "@/api/smschannel/channelaccount";
+import {Tenant, TenantApi} from "@/api/tenant";
+
+/** 短信签名信息 表单 */
+defineOptions({ name: 'SignInfoForm' })
+
+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,
+  signName: undefined,
+  tenantId:undefined ,
+  tenantUserName:undefined ,
+  signType: undefined,
+  bindingAccountIds: undefined,
+  international: 0,
+  remark: undefined
+})
+
+let tenantList = ref<Tenant[]>([])
+
+const tenantInfo = ref({
+  id: undefined,
+  tenantUserName: undefined
+})
+
+const formRules = reactive({
+  signName: [{ required: true, message: '签名名称不能为空', trigger: 'blur' }],
+  tenantId: [{ required: true, message: '租户不能为空', trigger: 'blur' }],
+  signType: [{ required: true, message: '签名类型：0-企业，1-APP，2-商标，3-政府/事业单位/其他企业不能为空', 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()
+
+  loadAccounts()
+
+  // 先获取租户列表数据
+  var tenantPageObj = await TenantApi.getTenantPage({
+    pageNo: 1,
+    pageSize: 10
+  })
+  tenantList.value = tenantPageObj.list
+
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await SignInfoApi.getSignInfo(id)
+    } finally {
+      formLoading.value = false
+    }
+
+    // 查询租户信息
+    tenantInfo.value = await TenantApi.getTenant(formData.value.tenantId)
+    formData.value.tenantUserName = tenantInfo.value.tenantUserName
+
+  }
+}
+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 SignInfo
+    if (formType.value === 'create') {
+      await SignInfoApi.createSignInfo(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await SignInfoApi.updateSignInfo(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    tenantId: undefined,
+    signName: undefined,
+    signType: undefined,
+    bindingAccountIds: undefined,
+    international: 0,
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+const accountOptions = ref([])
+
+// 加载账号列表
+const loadAccounts = async () => {
+  accountOptions.value =  await ChannelAccountApi.getChannelAccountList()
+  console.log(accountOptions.value)
+}
+
+
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/signinfo/index.vue b/marketing-ui/admin-ui/src/views/domesticsms/signinfo/index.vue
new file mode 100644
index 0000000..c9429bc
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/signinfo/index.vue
@@ -0,0 +1,284 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="签名名称" prop="signName">
+        <el-input
+          v-model="queryParams.signName"
+          placeholder="请输入签名名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="签名类型" prop="signType">
+        <el-select
+          v-model="queryParams.signType"
+          placeholder="请选择签名类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="企业" :value="0" />
+          <el-option label="APP/网站" :value="1" />
+          <el-option label="商标" :value="2" />
+          <el-option label="政府/事业单位" :value="3" />
+        </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-220px"-->
+<!--        />-->
+<!--      </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="['sms:sign-info:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+<!--        <el-button-->
+<!--          type="success"-->
+<!--          plain-->
+<!--          @click="handleExport"-->
+<!--          :loading="exportLoading"-->
+<!--          v-hasPermi="['sms:sign-info:export']"-->
+<!--        >-->
+<!--          <Icon icon="ep:download" class="mr-5px" /> 导出-->
+<!--        </el-button>-->
+<!--        <el-button-->
+<!--            type="danger"-->
+<!--            plain-->
+<!--            :disabled="isEmpty(checkedIds)"-->
+<!--            @click="handleDeleteBatch"-->
+<!--            v-hasPermi="['sms:sign-info:delete']"-->
+<!--        >-->
+<!--          <Icon icon="ep:delete" class="mr-5px" /> 批量删除-->
+<!--        </el-button>-->
+
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" />
+      <el-table-column label="主键ID" align="center" prop="id" width="75"/>
+      <el-table-column label="签名" align="center" prop="signName" />
+
+      <el-table-column label="签名类型" align="center" prop="signType">
+        <template #default="{ row }">
+          {{ signTypeFormatter(row.signType) }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="绑定渠道账号" align="center" prop="bindingAccountNames">
+        <template #default="{ row }">
+          <el-tag
+            v-for="name in row.bindingAccountNames"
+            :key="name"
+            size="small"
+            class="mr-5px mb-5px"
+          >
+            {{ name }} <br/>
+          </el-tag>
+          <span v-if="!row.bindingAccountNames?.length">-</span>
+        </template>
+      </el-table-column>
+
+<!--      <el-table-column-->
+<!--        label="创建时间"-->
+<!--        align="center"-->
+<!--        prop="createTime"-->
+<!--        :formatter="dateFormatter"-->
+<!--        width="180px"-->
+<!--      />-->
+
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['sms:sign-info:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['sms:sign-info: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <SignInfoForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { SignInfoApi, SignInfo } from '@/api/domesticsms/signinfo'
+import SignInfoForm from './SignInfoForm.vue'
+
+/** 短信签名信息 列表 */
+defineOptions({ name: 'SignInfo' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<SignInfo[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  signName: undefined,
+  signType: undefined,
+  bindingAccountIds: undefined,
+  international: 0,
+  remark: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await SignInfoApi.getSignInfoPage(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 SignInfoApi.deleteSignInfo(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除短信签名信息 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await SignInfoApi.deleteSignInfoList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: SignInfo[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await SignInfoApi.exportSignInfo(queryParams)
+    download.excel(data, '短信签名信息.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+enum SignType {
+  ENTERPRISE = 0,
+  APP = 1,
+  TRADEMARK = 2,
+  GOVERNMENT = 3
+}
+
+const SIGN_TYPE_OPTIONS = [
+  { value: SignType.ENTERPRISE, label: '企业' },
+  { value: SignType.APP, label: 'APP/网站' },
+  { value: SignType.TRADEMARK, label: '商标' },
+  { value: SignType.GOVERNMENT, label: '政府/事业单位' }
+]
+
+// 格式化方法改为
+const signTypeFormatter = (type: SignType) => {
+  const found = SIGN_TYPE_OPTIONS.find(opt => opt.value === type)
+  return found?.label || '未知类型'
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/TemplateInfoForm.vue b/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/TemplateInfoForm.vue
new file mode 100644
index 0000000..8e951b3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/TemplateInfoForm.vue
@@ -0,0 +1,219 @@
+<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="signId">
+        <el-select
+          v-model="formData.signId"
+          placeholder="请选择签名"
+          clearable
+          filterable
+          :loading="signLoading"
+          @visible-change="fetchSignList"
+          :disabled="formType === 'update'"
+        >
+          <el-option
+            v-for="item in signOptions"
+            :key="item.id"
+            :label="item.signName"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="模板类型" prop="templateType">
+        <el-select
+          v-model="formData.templateType"
+          placeholder="请选择模板类型"
+          clearable
+          :disabled="formType === 'update'"
+        >
+          <el-option label="验证码" :value="0"/>
+          <el-option label="短信通知" :value="1"/>
+          <el-option label="推广短信" :value="2"/>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="模板名称" prop="templateName">
+        <el-input v-model="formData.templateName" placeholder="请输入模板名称"/>
+      </el-form-item>
+
+      <el-form-item label="模板内容" prop="content">
+        <el-input
+          v-model="formData.content"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入模板内容"
+          resize="none"
+          show-word-limit
+          maxlength="200"
+        />
+        <el-alert
+          title=""
+          type="info"
+          :closable="false"
+          style="margin-top: 8px;"
+        >
+          <template #default>
+            <div style="font-size: 12px; line-height: 1.5;">
+              <p><strong>变量限制：</strong> 阿里云验证码类型仅支持1个变量,腾讯云支持多个变量；4~6位仅数字、数字+字母组合或仅字母2种类型。 </p>
+              <p><strong>变量格式：</strong> 您的验证码为 ${code}，该验证码5分钟内有效，请勿泄露于他人。</p>
+            </div>
+          </template>
+        </el-alert>
+      </el-form-item>
+
+      <el-form-item label="状态" prop="switchOpen">
+        <el-switch
+          v-model="formData.switchOpen"
+          :active-value="1"
+          :inactive-value="0"
+        />
+      </el-form-item>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入备注"
+          resize="none"
+          show-word-limit
+          maxlength="200"
+        />
+      </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 {TemplateInfoApi, TemplateInfo} from '@/api/domesticsms/templateinfo'
+import {SignInfoApi} from "@/api/domesticsms/signinfo";
+
+/** 短信模板信息 表单 */
+defineOptions({name: 'TemplateInfoForm'})
+
+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,
+  templateName: undefined,
+  content: undefined,
+  signId: undefined,
+  signName: undefined,
+  templateType: undefined,
+  international: 0,
+  switchOpen: 1, // 默认设置为 1（开启状态）
+  remark: undefined
+})
+const formRules = reactive({
+  templateName: [{required: true, message: '模板名称不能为空', trigger: 'blur'}],
+  content: [{required: true, message: '模板内容不能为空', trigger: 'blur'}],
+  signId: [{required: true, message: '签名ID不能为空', trigger: 'blur'}],
+  signName: [{required: true, message: '签名名称不能为空', trigger: 'blur'}],
+  remark: [{required: true, message: '备注不能为空', trigger: 'blur'}],
+  templateType: [{required: true, message: '模板类型不能为空', trigger: 'change'}],
+  switchOpen: [{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()
+
+  // 清空签名选项，确保每次打开弹窗都重新查询
+  signOptions.value = []
+  fetchSignList(true);
+
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await TemplateInfoApi.getTemplateInfo(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 TemplateInfo
+    if (formType.value === 'create') {
+      await TemplateInfoApi.createTemplateInfo(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await TemplateInfoApi.updateTemplateInfo(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    templateName: undefined,
+    content: undefined,
+    signId: undefined,
+    signName: undefined,
+    international: 0,
+    templateType: undefined,
+    switchOpen: 1, // 重置时也保持开启
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+// 签名选择相关
+const signOptions = ref<Array<{ id: number, signName: string }>>([])
+const signLoading = ref(false)
+
+const fetchSignList = async (visible: boolean) => {
+  if (visible && signOptions.value.length === 0) {
+    signLoading.value = true
+    try {
+      const res = await SignInfoApi.getSignInfolist({ international: formData.value.international })
+      signOptions.value = res
+    } catch (error) {
+      console.error('获取签名列表失败:', error)
+      message.error('获取签名列表失败')
+    } finally {
+      signLoading.value = false
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/index.vue b/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/index.vue
new file mode 100644
index 0000000..dbbbca0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/index.vue
@@ -0,0 +1,277 @@
+
+<template>
+  <ContentWrap>
+
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="模板名称" prop="templateName">
+        <el-input
+          v-model="queryParams.templateName"
+          placeholder="请输入模板名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="签名" prop="signName">
+        <el-input
+          v-model="queryParams.signName"
+          placeholder="请输入签名名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="模板类型" prop="templateType">
+        <el-select
+          v-model="queryParams.templateType"
+          placeholder="请选择模板类型"
+          clearable
+          class="!w-240px"
+        >
+           <el-option label="全部" value="" />
+          <el-option label="验证码" value="0" />
+          <el-option label="短信通知" value="1" />
+          <el-option label="推广短信" value="2" />
+        </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"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['smschannel:template-info:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="false"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" width="55" />
+      <el-table-column label="模板ID" align="center" prop="id" width="75px"/>
+      <el-table-column label="类型" align="center" prop="templateType" width="80px">
+
+      <template #default="scope">
+        <el-tag :type="getTypeTagType(scope.row.templateType)">
+          {{ getTypeLabel(scope.row.templateType) }}
+        </el-tag>
+      </template>
+      </el-table-column>
+      <el-table-column label="签名" align="center" prop="signName" />
+      <el-table-column label="模板名称" align="center" prop="templateName" />
+      <el-table-column label="模板内容" align="center" prop="content" width="300px" />
+
+<!--      <el-table-column label="审核状态" align="center" prop="status" />-->
+
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+<!--          <el-button-->
+<!--            link-->
+<!--            type="primary"-->
+<!--            @click="openForm('update', scope.row.id)"-->
+<!--            v-hasPermi="['smschannel:template-info:update']"-->
+<!--          >-->
+<!--            编辑-->
+<!--          </el-button>-->
+
+          <el-button
+            link
+            type="primary"
+            @click="showBindingLog(scope.row.id)"
+            v-hasPermi="['smschannel:template-info:update']"
+          >
+            绑定记录
+          </el-button>
+
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['smschannel:template-info: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <TemplateInfoForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { TemplateInfoApi, TemplateInfo } from '@/api/domesticsms/templateinfo'
+import TemplateInfoForm from './TemplateInfoForm.vue'
+
+/** 短信模板信息 列表 */
+defineOptions({ name: 'TemplateInfo' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const { push } = useRouter() // 路由
+
+const loading = ref(true) // 列表的加载中
+const list = ref<TemplateInfo[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  templateName: undefined,
+  content: undefined,
+  signId: undefined,
+  signName: undefined,
+  templateType: undefined,
+  switchOpen: undefined,
+  international: 0,
+  createTime: [],
+  remark: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await TemplateInfoApi.getTemplateInfoPage(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 TemplateInfoApi.deleteTemplateInfo(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除短信模板信息 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await TemplateInfoApi.deleteTemplateInfoList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: TemplateInfo[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await TemplateInfoApi.exportTemplateInfo(queryParams)
+    download.excel(data, '短信模板信息.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+const getTypeLabel = (type: string | number) => {
+  const typeMap: Record<string, string> = {
+    0: '验证码',
+    1: '短信通知',
+    2: '推广短信'
+  }
+  return typeMap[type] || '未知'
+}
+
+// 模板类型 tag 类型（用于颜色区分）
+const getTypeTagType = (type: string | number) => {
+  const typeMap: Record<string, string> = {
+    0: 'success',
+    1: 'primary',
+    2: 'danger'
+  }
+  return typeMap[type] || 'info'
+}
+
+const showBindingLog = (id?: number) => {
+  if (id && id > 0) {
+    push('/templateinfo/templatebindinginfo?templateId=' + id)
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/templatebindinginfo/TemplateBindingInfoForm.vue b/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/templatebindinginfo/TemplateBindingInfoForm.vue
new file mode 100644
index 0000000..9278837
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/templatebindinginfo/TemplateBindingInfoForm.vue
@@ -0,0 +1,132 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="190px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="三方模板内容" prop="templateContent">
+        <el-input
+          v-model="formData.templateContent"
+          type="textarea"
+          :rows="3"
+          placeholder=""
+          resize="none"
+          show-word-limit
+          disabled
+        />
+      </el-form-item>
+
+      <el-form-item label="三方模板编码" prop="templateCode">
+        <el-input v-model="formData.templateCode" placeholder="请输入三方模板编码" />
+      </el-form-item>
+
+<!--      <el-form-item label="审核状态" prop="status">-->
+<!--        <el-select v-model="formData.status" placeholder="请选择审核状态">-->
+<!--          <el-option label="待提交" :value="0" />-->
+<!--          <el-option label="待审核" :value="1" />-->
+<!--          <el-option label="审核成功" :value="2" />-->
+<!--          <el-option label="审核失败" :value="3" />-->
+<!--        </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 { TemplateBindingInfoApi, TemplateBindingInfo } from '@/api/domesticsms/templateinfo/templatebindinginfo'
+
+/** 短信模板渠道绑定 表单 */
+defineOptions({ name: 'TemplateBindingInfoForm' })
+
+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,
+  templateId: undefined,
+  templateCode: undefined,
+  templateContent: undefined,
+  channelId: undefined,
+  status: undefined,
+  auditRemark: undefined
+})
+const formRules = reactive({
+  templateId: [{ required: true, message: '模板ID不能为空', trigger: 'blur' }],
+  templateCode: [{ required: true, message: '三方模板编码不能为空', trigger: 'blur' }],
+  templateContent: [{ required: true, message: '三方模板内容不能为空', trigger: 'blur' }],
+  channelId: [{ required: true, message: '渠道ID不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '审核状态：0-待提交 1-待审核 2-审核成功 3-审核失败不能为空', 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 TemplateBindingInfoApi.getTemplateBindingInfo(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 TemplateBindingInfo
+    if (formType.value === 'create') {
+      await TemplateBindingInfoApi.createTemplateBindingInfo(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await TemplateBindingInfoApi.handBind(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    templateId: undefined,
+    templateCode: undefined,
+    templateContent: undefined,
+    channelId: undefined,
+    status: undefined,
+    auditRemark: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/templatebindinginfo/index.vue b/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/templatebindinginfo/index.vue
new file mode 100644
index 0000000..90fe312
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/domesticsms/templateinfo/templatebindinginfo/index.vue
@@ -0,0 +1,206 @@
+<template>
+
+  <el-alert
+    title="阿里云和腾讯云两个平台支持自动申请模版，但需要注意的是：腾讯云需要企业账号，否则会申请失败。"
+    type="success"
+    show-icon
+    :closable="false"
+  />
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="false"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" />
+      <el-table-column label="渠道编码" align="center" prop="channelCode" />
+      <el-table-column label="三方模板内容" align="center" prop="templateContent"  width="300px"/>
+      <el-table-column label="三方模板编码" align="center" prop="templateCode" />
+
+      <el-table-column label="审核状态" align="center" prop="status" width="100">
+        <template #default="{ row }">
+          <el-tag :type="statusTagType(row.status)">
+            {{ statusText(row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="三方审核备注" align="center" prop="auditRemark" />
+
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+
+      <el-table-column label="操作" align="center" min-width="120px">
+
+        <template #default="scope">
+
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['smschannel:template-info:update']"
+          >
+            手工绑定
+          </el-button>
+
+          <el-button
+            link
+            type="primary"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['smschannel:template-info:update']"
+          >
+            解除绑定
+          </el-button>
+
+        </template>
+
+
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <TemplateBindingInfoForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { TemplateBindingInfoApi, TemplateBindingInfo } from '@/api/domesticsms/templateinfo/templatebindinginfo'
+import TemplateBindingInfoForm from './TemplateBindingInfoForm.vue'
+
+/** 短信模板渠道绑定 列表 */
+defineOptions({ name: 'TemplateBindingInfo' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const { query } = useRoute() // 查询参数
+
+const loading = ref(true) // 列表的加载中
+const list = ref<TemplateBindingInfo[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 50,
+  templateId: query.templateId,
+  templateCode: undefined,
+  templateContent: undefined,
+  channelId: undefined,
+  status: undefined,
+  auditRemark: undefined,
+  createTime: []
+})
+
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await TemplateBindingInfoApi.getTemplateBindingInfoPage(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 TemplateBindingInfoApi.deleteTemplateBindingInfo(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除短信模板渠道绑定 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await TemplateBindingInfoApi.deleteTemplateBindingInfoList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: TemplateBindingInfo[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await TemplateBindingInfoApi.exportTemplateBindingInfo(queryParams)
+    download.excel(data, '短信模板渠道绑定.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+const statusMap = {
+  0: { text: '待提交', type: 'info' },
+  1: { text: '待审核', type: 'warning' },
+  2: { text: '审核成功', type: 'success' },
+  3: { text: '审核失败', type: 'danger' },
+  4: { text: '已撤销', type: 'info' }
+}
+
+const statusText = (status: number) => statusMap[status]?.text || '未知'
+const statusTagType = (status: number) => statusMap[status]?.type || ''
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/infra/apiAccessLog/ApiAccessLogDetail.vue b/marketing-ui/admin-ui/src/views/infra/apiAccessLog/ApiAccessLogDetail.vue
new file mode 100644
index 0000000..314fd26
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/apiAccessLog/ApiAccessLogDetail.vue
@@ -0,0 +1,79 @@
+<template>
+  <Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="详情" width="800">
+    <el-descriptions :column="1" border>
+      <el-descriptions-item label="日志主键" min-width="120">
+        {{ detailData.id }}
+      </el-descriptions-item>
+      <el-descriptions-item label="链路追踪">
+        {{ detailData.traceId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="应用名">
+        {{ detailData.applicationName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="用户信息">
+        {{ detailData.userId }}
+        <dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
+      </el-descriptions-item>
+      <el-descriptions-item label="用户 IP">
+        {{ detailData.userIp }}
+      </el-descriptions-item>
+      <el-descriptions-item label="用户 UA">
+        {{ detailData.userAgent }}
+      </el-descriptions-item>
+      <el-descriptions-item label="请求信息">
+        {{ detailData.requestMethod }} {{ detailData.requestUrl }}
+      </el-descriptions-item>
+      <el-descriptions-item label="请求参数">
+        {{ detailData.requestParams }}
+      </el-descriptions-item>
+      <el-descriptions-item label="请求结果">
+        {{ detailData.responseBody }}
+      </el-descriptions-item>
+      <el-descriptions-item label="请求时间">
+        {{ formatDate(detailData.beginTime) }} ~ {{ formatDate(detailData.endTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="请求耗时">{{ detailData.duration }} ms</el-descriptions-item>
+      <el-descriptions-item label="操作结果">
+        <div v-if="detailData.resultCode === 0">正常</div>
+        <div v-else-if="detailData.resultCode > 0">
+          失败 | {{ detailData.resultCode }} | {{ detailData.resultMsg }}
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item label="操作模块">
+        {{ detailData.operateModule }}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作名">
+        {{ detailData.operateName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作名">
+        <dict-tag :type="DICT_TYPE.INFRA_OPERATE_TYPE" :value="detailData.operateType" />
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as ApiAccessLog from '@/api/infra/apiAccessLog'
+
+defineOptions({ name: 'ApiAccessLogDetail' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单地加载中
+const detailData = ref({} as ApiAccessLog.ApiAccessLogVO) // 详情数据
+
+/** 打开弹窗 */
+const open = async (data: ApiAccessLog.ApiAccessLogVO) => {
+  dialogVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = data
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/apiAccessLog/index.vue b/marketing-ui/admin-ui/src/views/infra/apiAccessLog/index.vue
new file mode 100644
index 0000000..e3a6a7c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/apiAccessLog/index.vue
@@ -0,0 +1,224 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="用户编号" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入用户编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="用户类型" prop="userType">
+        <el-select
+          v-model="queryParams.userType"
+          placeholder="请选择用户类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="应用名" prop="applicationName">
+        <el-input
+          v-model="queryParams.applicationName"
+          placeholder="请输入应用名"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="请求时间" prop="beginTime">
+        <el-date-picker
+          v-model="queryParams.beginTime"
+          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 label="执行时长" prop="duration">
+        <el-input
+          v-model="queryParams.duration"
+          placeholder="请输入执行时长"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="结果码" prop="resultCode">
+        <el-input
+          v-model="queryParams.resultCode"
+          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="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:api-access-log:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="日志编号" align="center" prop="id" width="100" fix="right" />
+      <el-table-column label="用户编号" align="center" prop="userId" />
+      <el-table-column label="用户类型" align="center" prop="userType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="应用名" align="center" prop="applicationName" width="150" />
+      <el-table-column label="请求方法" align="center" prop="requestMethod" width="80" />
+      <el-table-column label="请求地址" align="center" prop="requestUrl" width="500" />
+      <el-table-column label="请求时间" align="center" prop="beginTime" width="180">
+        <template #default="scope">
+          <span>{{ formatDate(scope.row.beginTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="执行时长" align="center" prop="duration" width="180">
+        <template #default="scope"> {{ scope.row.duration }} ms </template>
+      </el-table-column>
+      <el-table-column label="操作结果" align="center" prop="status">
+        <template #default="scope">
+          {{ scope.row.resultCode === 0 ? '成功' : '失败(' + scope.row.resultMsg + ')' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作模块" align="center" prop="operateModule" width="180" />
+      <el-table-column label="操作名" align="center" prop="operateName" width="180" />
+      <el-table-column label="操作类型" align="center" prop="operateType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_OPERATE_TYPE" :value="scope.row.operateType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" width="60">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openDetail(scope.row)"
+            v-hasPermi="['infra:api-access-log:query']"
+          >
+            详细
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：详情 -->
+  <ApiAccessLogDetail ref="detailRef" />
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import download from '@/utils/download'
+import { formatDate } from '@/utils/formatTime'
+import * as ApiAccessLogApi from '@/api/infra/apiAccessLog'
+import ApiAccessLogDetail from './ApiAccessLogDetail.vue'
+
+defineOptions({ name: 'InfraApiAccessLog' })
+
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: null,
+  userType: null,
+  applicationName: null,
+  requestUrl: null,
+  duration: null,
+  resultCode: null,
+  beginTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ApiAccessLogApi.getApiAccessLogPage(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 = (data: ApiAccessLogApi.ApiAccessLogVO) => {
+  detailRef.value.open(data)
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ApiAccessLogApi.exportApiAccessLog(queryParams)
+    download.excel(data, 'API 访问日志.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/apiErrorLog/ApiErrorLogDetail.vue b/marketing-ui/admin-ui/src/views/infra/apiErrorLog/ApiErrorLogDetail.vue
new file mode 100644
index 0000000..41153a2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/apiErrorLog/ApiErrorLogDetail.vue
@@ -0,0 +1,81 @@
+<template>
+  <Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="详情" width="800">
+    <el-descriptions :column="1" border>
+      <el-descriptions-item label="日志主键" min-width="120">
+        {{ detailData.id }}
+      </el-descriptions-item>
+      <el-descriptions-item label="链路追踪">
+        {{ detailData.traceId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="应用名">
+        {{ detailData.applicationName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="用户编号">
+        {{ detailData.userId }}
+        <dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
+      </el-descriptions-item>
+      <el-descriptions-item label="用户 IP">
+        {{ detailData.userIp }}
+      </el-descriptions-item>
+      <el-descriptions-item label="用户 UA">
+        {{ detailData.userAgent }}
+      </el-descriptions-item>
+      <el-descriptions-item label="请求信息">
+        {{ detailData.requestMethod }} {{ detailData.requestUrl }}
+      </el-descriptions-item>
+      <el-descriptions-item label="请求参数">
+        {{ detailData.requestParams }}
+      </el-descriptions-item>
+      <el-descriptions-item label="异常时间">
+        {{ formatDate(detailData.exceptionTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="异常名">
+        {{ detailData.exceptionName }}
+      </el-descriptions-item>
+      <el-descriptions-item v-if="detailData.exceptionStackTrace" label="异常堆栈">
+        <el-input
+          v-model="detailData.exceptionStackTrace"
+          :autosize="{ maxRows: 20 }"
+          :readonly="true"
+          type="textarea"
+        />
+      </el-descriptions-item>
+      <el-descriptions-item label="处理状态">
+        <dict-tag
+          :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS"
+          :value="detailData.processStatus"
+        />
+      </el-descriptions-item>
+      <el-descriptions-item v-if="detailData.processUserId" label="处理人">
+        {{ detailData.processUserId }}
+      </el-descriptions-item>
+      <el-descriptions-item v-if="detailData.processTime" label="处理时间">
+        {{ formatDate(detailData.processTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as ApiErrorLog from '@/api/infra/apiErrorLog'
+
+defineOptions({ name: 'ApiErrorLogDetail' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({} as ApiErrorLog.ApiErrorLogVO) // 详情数据
+
+/** 打开弹窗 */
+const open = async (data: ApiErrorLog.ApiErrorLogVO) => {
+  dialogVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = data
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/apiErrorLog/index.vue b/marketing-ui/admin-ui/src/views/infra/apiErrorLog/index.vue
new file mode 100644
index 0000000..a199a67
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/apiErrorLog/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="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入用户编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="用户类型" prop="userType">
+        <el-select
+          v-model="queryParams.userType"
+          placeholder="请选择用户类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="应用名" prop="applicationName">
+        <el-input
+          v-model="queryParams.applicationName"
+          placeholder="请输入应用名"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="异常时间" prop="exceptionTime">
+        <el-date-picker
+          v-model="queryParams.exceptionTime"
+          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 label="处理状态" prop="processStatus">
+        <el-select
+          v-model="queryParams.processStatus"
+          placeholder="请选择处理状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS)"
+            :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>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:api-error-log:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="日志编号" align="center" prop="id" />
+      <el-table-column label="用户编号" align="center" prop="userId" />
+      <el-table-column label="用户类型" align="center" prop="userType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="应用名" align="center" prop="applicationName" width="200" />
+      <el-table-column label="请求方法" align="center" prop="requestMethod" width="80" />
+      <el-table-column label="请求地址" align="center" prop="requestUrl" width="180" />
+      <el-table-column
+        label="异常发生时间"
+        align="center"
+        prop="exceptionTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="异常名" align="center" prop="exceptionName" width="180" />
+      <el-table-column label="处理状态" align="center" prop="processStatus">
+        <template #default="scope">
+          <dict-tag
+            :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS"
+            :value="scope.row.processStatus"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="200">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openDetail(scope.row)"
+            v-hasPermi="['infra:api-error-log:query']"
+          >
+            详细
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
+            @click="handleProcess(scope.row.id, InfraApiErrorLogProcessStatusEnum.DONE)"
+            v-hasPermi="['infra:api-error-log:update-status']"
+          >
+            已处理
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
+            @click="handleProcess(scope.row.id, InfraApiErrorLogProcessStatusEnum.IGNORE)"
+            v-hasPermi="['infra:api-error-log:update-status']"
+          >
+            已忽略
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：详情 -->
+  <ApiErrorLogDetail ref="detailRef" />
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
+import ApiErrorLogDetail from './ApiErrorLogDetail.vue'
+import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
+
+defineOptions({ name: 'InfraApiErrorLog' })
+
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: null,
+  userType: null,
+  applicationName: null,
+  requestUrl: null,
+  processStatus: null,
+  exceptionTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ApiErrorLogApi.getApiErrorLogPage(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 = (data: ApiErrorLogApi.ApiErrorLogVO) => {
+  detailRef.value.open(data)
+}
+
+/** 处理已处理 / 已忽略的操作 **/
+const handleProcess = async (id: number, processStatus: number) => {
+  try {
+    // 操作的二次确认
+    const type = processStatus === InfraApiErrorLogProcessStatusEnum.DONE ? '已处理' : '已忽略'
+    await message.confirm('确认标记为' + type + '?')
+    // 执行操作
+    await ApiErrorLogApi.updateApiErrorLogPage(id, processStatus)
+    await message.success(type)
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ApiErrorLogApi.exportApiErrorLog(queryParams)
+    download.excel(data, '异常日志.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/build/index.vue b/marketing-ui/admin-ui/src/views/infra/build/index.vue
new file mode 100644
index 0000000..260b8b7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/build/index.vue
@@ -0,0 +1,184 @@
+<template>
+  <ContentWrap :body-style="{ padding: '0px' }" class="!mb-0">
+    <!-- 表单设计器 -->
+    <div
+      class="h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-2px)]"
+    >
+      <fc-designer class="my-designer" ref="designer" :config="designerConfig">
+        <template #handle>
+          <el-button size="small" type="primary" plain @click="showJson">生成JSON</el-button>
+          <el-button size="small" type="success" plain @click="showOption">生成Options</el-button>
+          <el-button size="small" type="danger" plain @click="showTemplate">生成组件</el-button>
+        </template>
+      </fc-designer>
+    </div>
+  </ContentWrap>
+
+  <!-- 弹窗：表单预览 -->
+  <Dialog v-model="dialogVisible" :title="dialogTitle" max-height="600">
+    <div v-if="dialogVisible" ref="editor">
+      <el-button style="float: right" @click="copy(formData)">
+        {{ t('common.copy') }}
+      </el-button>
+      <el-scrollbar height="580">
+        <div>
+          <pre><code v-dompurify-html="highlightedCode(formData)" class="hljs"></code></pre>
+        </div>
+      </el-scrollbar>
+    </div>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { useFormCreateDesigner } from '@/components/FormCreate'
+import { useClipboard } from '@vueuse/core'
+import { isString } from '@/utils/is'
+
+import hljs from 'highlight.js' // 导入代码高亮文件
+import 'highlight.js/styles/github.css' // 导入代码高亮样式
+import xml from 'highlight.js/lib/languages/java'
+import json from 'highlight.js/lib/languages/json'
+import formCreate from '@form-create/element-ui'
+
+defineOptions({ name: 'InfraBuild' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息
+
+// 表单设计器配置
+const designerConfig = ref({
+  switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
+  autoActive: true, // 是否自动选中拖入的组件
+  useTemplate: false, // 是否生成vue2语法的模板组件
+  formOptions: {
+    form: {
+      labelWidth: '100px' // 设置默认的 label 宽度为 100px
+    }
+  }, // 定义表单配置默认值
+  fieldReadonly: false, // 配置field是否可以编辑
+  hiddenDragMenu: false, // 隐藏拖拽操作按钮
+  hiddenDragBtn: false, // 隐藏拖拽按钮
+  hiddenMenu: [], // 隐藏部分菜单
+  hiddenItem: [], // 隐藏部分组件
+  hiddenItemConfig: {}, // 隐藏组件的部分配置项
+  disabledItemConfig: {}, // 禁用组件的部分配置项
+  showSaveBtn: false, // 是否显示保存按钮
+  showConfig: true, // 是否显示右侧的配置界面
+  showBaseForm: true, // 是否显示组件的基础配置表单
+  showControl: true, // 是否显示组件联动
+  showPropsForm: true, // 是否显示组件的属性配置表单
+  showEventForm: true, // 是否显示组件的事件配置表单
+  showValidateForm: true, // 是否显示组件的验证配置表单
+  showFormConfig: true, // 是否显示表单配置
+  showInputData: true, // 是否显示录入按钮
+  showDevice: true, // 是否显示多端适配选项
+  appendConfigData: [] // 定义渲染规则所需的formData
+})
+const designer = ref() // 表单设计器
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formType = ref(-1) // 表单的类型：0 - 生成 JSON；1 - 生成 Options；2 - 生成组件
+const formData = ref('') // 表单数据
+useFormCreateDesigner(designer) // 表单设计器增强
+
+/** 打开弹窗 */
+const openModel = (title: string) => {
+  dialogVisible.value = true
+  dialogTitle.value = title
+}
+
+/** 生成 JSON */
+const showJson = () => {
+  openModel('生成 JSON')
+  formType.value = 0
+  formData.value = designer.value.getRule()
+}
+
+/** 生成 Options */
+const showOption = () => {
+  openModel('生成 Options')
+  formType.value = 1
+  formData.value = designer.value.getOption()
+}
+
+/** 生成组件 */
+const showTemplate = () => {
+  openModel('生成组件')
+  formType.value = 2
+  formData.value = makeTemplate()
+}
+
+const makeTemplate = () => {
+  const rule = designer.value.getRule()
+  const opt = designer.value.getOption()
+  return `<template>
+    <form-create
+      v-model:api="fApi"
+      :rule="rule"
+      :option="option"
+      @submit="onSubmit"
+    ></form-create>
+  </template>
+  <script setup lang=ts>
+    const faps = ref(null)
+    const rule = ref('')
+    const option = ref('')
+    const init = () => {
+      rule.value = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}')
+      option.value = formCreate.parseJson('${JSON.stringify(opt)}')
+    }
+    const onSubmit = (formData) => {
+      //todo 提交表单
+    }
+    init()
+  <\/script>`
+}
+
+/** 复制 **/
+const copy = async (text: string) => {
+  const textToCopy = JSON.stringify(text, null, 2)
+  const { copy, copied, isSupported } = useClipboard({ source: textToCopy })
+  if (!isSupported) {
+    message.error(t('common.copyError'))
+  } else {
+    await copy()
+    if (unref(copied)) {
+      message.success(t('common.copySuccess'))
+    }
+  }
+}
+
+/**
+ * 代码高亮
+ */
+const highlightedCode = (code: string) => {
+  // 处理语言和代码
+  let language = 'json'
+  if (formType.value === 2) {
+    language = 'xml'
+  }
+  // debugger
+  if (!isString(code)) {
+    code = JSON.stringify(code, null, 2)
+  }
+  // 高亮
+  const result = hljs.highlight(code, { language: language, ignoreIllegals: true })
+  return result.value || '&nbsp;'
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  // 注册代码高亮的各种语言
+  hljs.registerLanguage('xml', xml)
+  hljs.registerLanguage('json', json)
+})
+</script>
+
+<style>
+.my-designer {
+  ._fc-l,
+  ._fc-m,
+  ._fc-r {
+    border-top: none;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/infra/codegen/EditTable.vue b/marketing-ui/admin-ui/src/views/infra/codegen/EditTable.vue
new file mode 100644
index 0000000..f8473e3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/codegen/EditTable.vue
@@ -0,0 +1,87 @@
+<template>
+  <ContentWrap v-loading="formLoading">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基本信息" name="basicInfo">
+        <basic-info-form ref="basicInfoRef" :table="formData.table" />
+      </el-tab-pane>
+      <el-tab-pane label="字段信息" name="colum">
+        <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"
+          :columns="formData.columns"
+        />
+      </el-tab-pane>
+    </el-tabs>
+    <el-form>
+      <el-form-item style="float: right">
+        <el-button :loading="formLoading" type="primary" @click="submitForm">保存</el-button>
+        <el-button @click="close">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { BasicInfoForm, ColumInfoForm, GenerateInfoForm } from './components'
+import * as CodegenApi from '@/api/infra/codegen'
+
+defineOptions({ name: 'InfraCodegenEditTable' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const { push, currentRoute } = useRouter() // 路由
+const { query } = useRoute() // 查询参数
+const { delView } = useTagsViewStore() // 视图操作
+
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const activeName = ref('colum') // Tag 激活的窗口
+const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
+const columInfoRef = ref<ComponentRef<typeof ColumInfoForm>>()
+const generateInfoRef = ref<ComponentRef<typeof GenerateInfoForm>>()
+const formData = ref<CodegenApi.CodegenUpdateReqVO>({
+  table: {},
+  columns: []
+})
+
+/** 获得详情 */
+const getDetail = async () => {
+  const id = query.id as unknown as number
+  if (!id) {
+    return
+  }
+  formLoading.value = true
+  try {
+    formData.value = await CodegenApi.getCodegenTable(id)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 提交按钮 */
+const submitForm = async () => {
+  // 参数校验
+  if (!unref(formData)) return
+  await unref(basicInfoRef)?.validate()
+  await unref(generateInfoRef)?.validate()
+  try {
+    // 提交请求
+    await CodegenApi.updateCodegenTable(formData.value)
+    message.success(t('common.updateSuccess'))
+    close()
+  } catch {}
+}
+
+/** 关闭按钮 */
+const close = () => {
+  delView(unref(currentRoute))
+  push('/infra/codegen')
+}
+
+/** 初始化 */
+onMounted(() => {
+  getDetail()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/codegen/ImportTable.vue b/marketing-ui/admin-ui/src/views/infra/codegen/ImportTable.vue
new file mode 100644
index 0000000..6cd4610
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/codegen/ImportTable.vue
@@ -0,0 +1,151 @@
+<template>
+  <Dialog v-model="dialogVisible" title="导入表" width="800px">
+    <!-- 搜索栏 -->
+    <el-form ref="queryFormRef" :inline="true" :model="queryParams" label-width="68px">
+      <el-form-item label="数据源" prop="dataSourceConfigId">
+        <el-select
+          v-model="queryParams.dataSourceConfigId"
+          class="!w-240px"
+          placeholder="请选择数据源"
+        >
+          <el-option
+            v-for="config in dataSourceConfigList"
+            :key="config.id"
+            :label="config.name"
+            :value="config.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="表名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          class="!w-240px"
+          clearable
+          placeholder="请输入表名称"
+          @keyup.enter="getList"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="comment">
+        <el-input
+          v-model="queryParams.comment"
+          class="!w-240px"
+          clearable
+          placeholder="请输入表描述"
+          @keyup.enter="getList"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getList">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-row>
+      <el-table
+        ref="tableRef"
+        v-loading="dbTableLoading"
+        :data="dbTableList"
+        height="260px"
+        @row-click="handleRowClick"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column :show-overflow-tooltip="true" label="表名称" prop="name" />
+        <el-table-column :show-overflow-tooltip="true" label="表描述" prop="comment" />
+      </el-table>
+    </el-row>
+    <!-- 操作 -->
+    <template #footer>
+      <el-button :disabled="tableList.length === 0" type="primary" @click="handleImportTable">
+        导入
+      </el-button>
+      <el-button @click="close">关闭</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as CodegenApi from '@/api/infra/codegen'
+import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
+import { ElTable } from 'element-plus'
+
+defineOptions({ name: 'InfraCodegenImportTable' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dbTableLoading = ref(true) // 数据源的加载中
+const dbTableList = ref<CodegenApi.DatabaseTableVO[]>([]) // 表的列表
+const queryParams = reactive({
+  name: undefined,
+  comment: undefined,
+  dataSourceConfigId: 0
+})
+const queryFormRef = ref() // 搜索的表单
+const dataSourceConfigList = ref<DataSourceConfigApi.DataSourceConfigVO[]>([]) // 数据源列表
+
+/** 查询表数据 */
+const getList = async () => {
+  dbTableLoading.value = true
+  try {
+    dbTableList.value = await CodegenApi.getSchemaTableList(queryParams)
+  } finally {
+    dbTableLoading.value = false
+  }
+}
+
+/** 重置操作 */
+const resetQuery = async () => {
+  queryParams.name = undefined
+  queryParams.comment = undefined
+  queryParams.dataSourceConfigId = dataSourceConfigList.value[0].id as number
+  await getList()
+}
+
+/** 打开弹窗 */
+const open = async () => {
+  // 加载数据源的列表
+  dataSourceConfigList.value = await DataSourceConfigApi.getDataSourceConfigList()
+  queryParams.dataSourceConfigId = dataSourceConfigList.value[0].id as number
+  dialogVisible.value = true
+  // 加载表的列表
+  await getList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 关闭弹窗 */
+const close = () => {
+  dialogVisible.value = false
+  tableList.value = []
+}
+
+const tableRef = ref<typeof ElTable>() // 表格的 Ref
+const tableList = ref<string[]>([]) // 选中的表名
+
+/** 处理某一行的点击 */
+const handleRowClick = (row) => {
+  unref(tableRef)?.toggleRowSelection(row)
+}
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection) => {
+  tableList.value = selection.map((item) => item.name)
+}
+
+/** 导入按钮操作 */
+const handleImportTable = async () => {
+  await CodegenApi.createCodegenList({
+    dataSourceConfigId: queryParams.dataSourceConfigId,
+    tableNames: tableList.value
+  })
+  message.success('导入成功')
+  emit('success')
+  close()
+}
+const emit = defineEmits(['success'])
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/codegen/PreviewCode.vue b/marketing-ui/admin-ui/src/views/infra/codegen/PreviewCode.vue
new file mode 100644
index 0000000..b6a307d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/codegen/PreviewCode.vue
@@ -0,0 +1,222 @@
+<template>
+  <Dialog
+    v-model="dialogVisible"
+    align-center
+    class="app-infra-codegen-preview-container"
+    title="代码预览"
+    width="80%"
+  >
+    <div class="flex">
+      <!-- 代码目录树 -->
+      <el-card
+        v-loading="loading"
+        :gutter="12"
+        class="w-1/3"
+        element-loading-text="生成文件目录中..."
+        shadow="hover"
+      >
+        <el-scrollbar height="calc(100vh - 88px - 40px)">
+          <el-tree
+            ref="treeRef"
+            :data="preview.fileTree"
+            :expand-on-click-node="false"
+            default-expand-all
+            highlight-current
+            node-key="id"
+            @node-click="handleNodeClick"
+          />
+        </el-scrollbar>
+      </el-card>
+      <!-- 代码 -->
+      <el-card
+        v-loading="loading"
+        :gutter="12"
+        class="ml-3 w-2/3"
+        element-loading-text="加载代码中..."
+        shadow="hover"
+      >
+        <el-tabs v-model="preview.activeName">
+          <el-tab-pane
+            v-for="item in previewCodegen"
+            :key="item.filePath"
+            :label="item.filePath.substring(item.filePath.lastIndexOf('/') + 1)"
+            :name="item.filePath"
+          >
+            <el-button class="float-right" text type="primary" @click="copy(item.code)">
+              {{ t('common.copy') }}
+            </el-button>
+            <el-scrollbar height="600px">
+              <pre><code v-dompurify-html="highlightedCode(item)" class="hljs"></code></pre>
+            </el-scrollbar>
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { useClipboard } from '@vueuse/core'
+import { handleTree2 } from '@/utils/tree'
+import * as CodegenApi from '@/api/infra/codegen'
+
+import hljs from 'highlight.js' // 导入代码高亮文件
+import 'highlight.js/styles/github.css' // 导入代码高亮样式
+import java from 'highlight.js/lib/languages/java'
+import xml from 'highlight.js/lib/languages/java'
+import javascript from 'highlight.js/lib/languages/javascript'
+import sql from 'highlight.js/lib/languages/sql'
+import typescript from 'highlight.js/lib/languages/typescript'
+
+defineOptions({ name: 'InfraCodegenPreviewCode' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const loading = ref(false) // 加载中的状态
+const preview = reactive({
+  fileTree: [], // 文件树
+  activeName: '' // 激活的文件名
+})
+const previewCodegen = ref<CodegenApi.CodegenPreviewVO[]>()
+
+/** 点击文件 */
+const handleNodeClick = async (data, node) => {
+  if (node && !node.isLeaf) {
+    return false
+  }
+  preview.activeName = data.id
+}
+
+/** 生成 files 目录 **/
+interface filesType {
+  id: string
+  label: string
+  parentId: string
+}
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  try {
+    loading.value = true
+    // 生成代码
+    const data = await CodegenApi.previewCodegen(id)
+    previewCodegen.value = data
+    // 处理文件
+    let file = handleFiles(data)
+    preview.fileTree = handleTree2(file, 'id', 'parentId', 'children', '/')
+    // 点击首个文件
+    preview.activeName = data[0].filePath
+  } finally {
+    loading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 处理文件 */
+const handleFiles = (datas: CodegenApi.CodegenPreviewVO[]) => {
+  let exists = {} // key：file 的 id；value：true
+  let files: filesType[] = []
+  // 遍历每个元素
+  for (const data of datas) {
+    let paths = data.filePath.split('/')
+    let fullPath = '' // 从头开始的路径，用于生成 id
+    // 特殊处理 java 文件
+    if (paths[paths.length - 1].indexOf('.java') >= 0) {
+      let newPaths: string[] = []
+      for (let i = 0; i < paths.length; i++) {
+        let path = paths[i]
+        if (path !== 'java') {
+          newPaths.push(path)
+          continue
+        }
+        newPaths.push(path)
+        // 特殊处理中间的 package，进行合并
+        let tmp = ''
+        while (i < paths.length) {
+          path = paths[i + 1]
+          if (
+            path === 'controller' ||
+            path === 'convert' ||
+            path === 'dal' ||
+            path === 'enums' ||
+            path === 'service' ||
+            path === 'vo' || // 下面三个，主要是兜底。可能考虑到有人改了包结构
+            path === 'mysql' ||
+            path === 'dataobject'
+          ) {
+            break
+          }
+          tmp = tmp ? tmp + '.' + path : path
+          i++
+        }
+        if (tmp) {
+          newPaths.push(tmp)
+        }
+      }
+      paths = newPaths
+    }
+    // 遍历每个 path， 拼接成树
+    for (let i = 0; i < paths.length; i++) {
+      // 已经添加到 files 中，则跳过
+      let oldFullPath = fullPath
+      // 下面的 replaceAll 的原因，是因为上面包处理了，导致和 tabs 不匹配，所以 replaceAll 下
+      fullPath = fullPath.length === 0 ? paths[i] : fullPath.replaceAll('.', '/') + '/' + paths[i]
+      if (exists[fullPath]) {
+        continue
+      }
+      // 添加到 files 中
+      exists[fullPath] = true
+      files.push({
+        id: fullPath,
+        label: paths[i],
+        parentId: oldFullPath || '/' // "/" 为根节点
+      })
+    }
+  }
+  return files
+}
+
+/** 复制 **/
+const copy = async (text: string) => {
+  const { copy, copied, isSupported } = useClipboard({ source: text })
+  if (!isSupported) {
+    message.error(t('common.copyError'))
+    return
+  }
+  await copy()
+  if (unref(copied)) {
+    message.success(t('common.copySuccess'))
+  }
+}
+
+/**
+ * 代码高亮
+ */
+const highlightedCode = (item) => {
+  const language = item.filePath.substring(item.filePath.lastIndexOf('.') + 1)
+  const result = hljs.highlight(language, item.code || '', true)
+  return result.value || '&nbsp;'
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  // 注册代码高亮的各种语言
+  hljs.registerLanguage('java', java)
+  hljs.registerLanguage('xml', xml)
+  hljs.registerLanguage('html', xml)
+  hljs.registerLanguage('vue', xml)
+  hljs.registerLanguage('javascript', javascript)
+  hljs.registerLanguage('sql', sql)
+  hljs.registerLanguage('typescript', typescript)
+})
+</script>
+<style lang="scss">
+.app-infra-codegen-preview-container {
+  .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
+    display: inline-block;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/infra/codegen/components/BasicInfoForm.vue b/marketing-ui/admin-ui/src/views/infra/codegen/components/BasicInfoForm.vue
new file mode 100644
index 0000000..1859300
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/codegen/components/BasicInfoForm.vue
@@ -0,0 +1,87 @@
+<template>
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="表名称" prop="tableName">
+          <el-input v-model="formData.tableName" placeholder="请输入仓库名称" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="表描述" prop="tableComment">
+          <el-input v-model="formData.tableComment" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item prop="className">
+          <template #label>
+            <span>
+              实体类名称
+              <el-tooltip
+                content="默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。"
+                placement="top"
+              >
+                <Icon class="" icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.className" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="作者" prop="author">
+          <el-input v-model="formData.author" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" :rows="3" type="textarea" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import * as CodegenApi from '@/api/infra/codegen'
+import { PropType } from 'vue'
+
+defineOptions({ name: 'InfraCodegenBasicInfoForm' })
+
+const props = defineProps({
+  table: {
+    type: Object as PropType<Nullable<CodegenApi.CodegenTableVO>>,
+    default: () => null
+  }
+})
+
+const formRef = ref()
+const formData = ref({
+  tableName: '',
+  tableComment: '',
+  className: '',
+  author: '',
+  remark: ''
+})
+const rules = reactive({
+  tableName: [required],
+  tableComment: [required],
+  className: [required],
+  author: [required]
+})
+
+/** 监听 table 属性，复制给 formData 属性 */
+watch(
+  () => props.table,
+  (table) => {
+    if (!table) return
+    formData.value = table
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+defineExpose({
+  validate: async () => unref(formRef)?.validate()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/codegen/components/ColumInfoForm.vue b/marketing-ui/admin-ui/src/views/infra/codegen/components/ColumInfoForm.vue
new file mode 100644
index 0000000..f526022
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/codegen/components/ColumInfoForm.vue
@@ -0,0 +1,153 @@
+<template>
+  <el-table ref="dragTable" :data="formData" :max-height="tableHeight" row-key="columnId">
+    <el-table-column
+      :show-overflow-tooltip="true"
+      label="字段列名"
+      min-width="10%"
+      prop="columnName"
+    />
+    <el-table-column label="字段描述" min-width="10%">
+      <template #default="scope">
+        <el-input v-model="scope.row.columnComment" />
+      </template>
+    </el-table-column>
+    <el-table-column
+      :show-overflow-tooltip="true"
+      label="物理类型"
+      min-width="10%"
+      prop="dataType"
+    />
+    <el-table-column label="Java类型" min-width="11%">
+      <template #default="scope">
+        <el-select v-model="scope.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>
+      </template>
+    </el-table-column>
+    <el-table-column label="java属性" min-width="10%">
+      <template #default="scope">
+        <el-input v-model="scope.row.javaField" />
+      </template>
+    </el-table-column>
+    <el-table-column label="插入" min-width="4%">
+      <template #default="scope">
+        <el-checkbox v-model="scope.row.createOperation" false-value="false" true-value="true" />
+      </template>
+    </el-table-column>
+    <el-table-column label="编辑" min-width="4%">
+      <template #default="scope">
+        <el-checkbox v-model="scope.row.updateOperation" false-value="false" true-value="true" />
+      </template>
+    </el-table-column>
+    <el-table-column label="列表" min-width="4%">
+      <template #default="scope">
+        <el-checkbox
+          v-model="scope.row.listOperationResult"
+          false-value="false"
+          true-value="true"
+        />
+      </template>
+    </el-table-column>
+    <el-table-column label="查询" min-width="4%">
+      <template #default="scope">
+        <el-checkbox v-model="scope.row.listOperation" false-value="false" true-value="true" />
+      </template>
+    </el-table-column>
+    <el-table-column label="查询方式" min-width="10%">
+      <template #default="scope">
+        <el-select v-model="scope.row.listOperationCondition">
+          <el-option label="=" value="=" />
+          <el-option label="!=" value="!=" />
+          <el-option label=">" value=">" />
+          <el-option label=">=" value=">=" />
+          <el-option label="<" value="<>" />
+          <el-option label="<=" value="<=" />
+          <el-option label="LIKE" value="LIKE" />
+          <el-option label="BETWEEN" value="BETWEEN" />
+        </el-select>
+      </template>
+    </el-table-column>
+    <el-table-column label="允许空" min-width="5%">
+      <template #default="scope">
+        <el-checkbox v-model="scope.row.nullable" false-value="false" true-value="true" />
+      </template>
+    </el-table-column>
+    <el-table-column label="显示类型" min-width="12%">
+      <template #default="scope">
+        <el-select v-model="scope.row.htmlType">
+          <el-option label="文本框" value="input" />
+          <el-option label="文本域" value="textarea" />
+          <el-option label="下拉框" value="select" />
+          <el-option label="单选框" value="radio" />
+          <el-option label="复选框" value="checkbox" />
+          <el-option label="日期控件" value="datetime" />
+          <el-option label="图片上传" value="imageUpload" />
+          <el-option label="文件上传" value="fileUpload" />
+          <el-option label="富文本控件" value="editor" />
+        </el-select>
+      </template>
+    </el-table-column>
+    <el-table-column label="字典类型" min-width="12%">
+      <template #default="scope">
+        <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="dict in dictOptions"
+            :key="dict.id"
+            :label="dict.name"
+            :value="dict.type"
+          />
+        </el-select>
+      </template>
+    </el-table-column>
+    <el-table-column label="示例" min-width="10%">
+      <template #default="scope">
+        <el-input v-model="scope.row.example" />
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import * as CodegenApi from '@/api/infra/codegen'
+import * as DictDataApi from '@/api/system/dict/dict.type'
+
+defineOptions({ name: 'InfraCodegenColumInfoForm' })
+
+const props = defineProps({
+  columns: {
+    type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>,
+    default: () => null
+  }
+})
+
+const formData = ref<CodegenApi.CodegenColumnVO[]>([])
+const tableHeight = document.documentElement.scrollHeight - 350 + 'px'
+
+/** 查询字典下拉列表 */
+const dictOptions = ref<DictDataApi.DictTypeVO[]>()
+const getDictOptions = async () => {
+  dictOptions.value = await DictDataApi.getSimpleDictTypeList()
+}
+
+watch(
+  () => props.columns,
+  (columns) => {
+    if (!columns) return
+    formData.value = columns
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+onMounted(async () => {
+  await getDictOptions()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/codegen/components/GenerateInfoForm.vue b/marketing-ui/admin-ui/src/views/infra/codegen/components/GenerateInfoForm.vue
new file mode 100644
index 0000000..aaf176f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/codegen/components/GenerateInfoForm.vue
@@ -0,0 +1,385 @@
+<template>
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="生成模板" prop="templateType">
+          <el-select v-model="formData.templateType">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)"
+              :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="frontType">
+          <el-select v-model="formData.frontType">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE)"
+              :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="scene">
+          <el-select v-model="formData.scene">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              上级菜单
+              <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-tree-select
+            v-model="formData.parentMenuId"
+            :data="menus"
+            :props="menuTreeProps"
+            check-strictly
+            node-key="id"
+            placeholder="请选择系统菜单"
+          />
+        </el-form-item>
+      </el-col>
+
+      <!--      <el-col :span="12">-->
+      <!--        <el-form-item prop="packageName">-->
+      <!--          <span slot="label">-->
+      <!--            生成包路径-->
+      <!--            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">-->
+      <!--              <i class="el-icon-question"></i>-->
+      <!--            </el-tooltip>-->
+      <!--          </span>-->
+      <!--          <el-input v-model="formData.packageName" />-->
+      <!--        </el-form-item>-->
+      <!--      </el-col>-->
+
+      <el-col :span="12">
+        <el-form-item prop="moduleName">
+          <template #label>
+            <span>
+              模块名
+              <el-tooltip
+                content="模块名，即一级目录，例如 system、infra、tool 等等"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.moduleName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="businessName">
+          <template #label>
+            <span>
+              业务名
+              <el-tooltip
+                content="业务名，即二级目录，例如 user、permission、dict 等等"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.businessName" />
+        </el-form-item>
+      </el-col>
+
+      <!--      <el-col :span="12">-->
+      <!--        <el-form-item prop="businessPackage">-->
+      <!--          <span slot="label">-->
+      <!--            业务包-->
+      <!--            <el-tooltip content="业务包，自定义二级目录。例如说，我们希望将 dictType 和 dictData 归类成 dict 业务" placement="top">-->
+      <!--              <i class="el-icon-question"></i>-->
+      <!--            </el-tooltip>-->
+      <!--          </span>-->
+      <!--          <el-input v-model="formData.businessPackage" />-->
+      <!--        </el-form-item>-->
+      <!--      </el-col>-->
+
+      <el-col :span="12">
+        <el-form-item prop="className">
+          <template #label>
+            <span>
+              类名称
+              <el-tooltip
+                content="类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.className" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="classComment">
+          <template #label>
+            <span>
+              类描述
+              <el-tooltip content="用作类描述，例如 用户" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.classComment" />
+        </el-form-item>
+      </el-col>
+
+      <el-col v-if="formData.genType === '1'" :span="24">
+        <el-form-item prop="genPath">
+          <template #label>
+            <span>
+              自定义路径
+              <el-tooltip
+                content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.genPath">
+            <template #append>
+              <el-dropdown>
+                <el-button type="primary">
+                  最近路径快速选择
+                  <i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="formData.genPath = '/'">
+                      恢复默认的生成基础路径
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <!-- 树表信息 -->
+    <el-row v-if="formData.templateType == 2">
+      <el-col :span="24">
+        <h4 class="form-header">树表信息</h4>
+      </el-col>
+      <el-col :span="12">
+        <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.treeParentColumnId" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in props.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item prop="treeNameColumnId">
+          <template #label>
+            <span>
+              树名称字段
+              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.treeNameColumnId" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in props.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <!-- 主表信息 -->
+    <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 prop="masterTableId">
+          <template #label>
+            <span>
+              关联的主表
+              <el-tooltip content="关联主表（父表）的表名， 如：system_user" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.masterTableId" placeholder="请选择">
+            <el-option
+              v-for="(table0, index) in tables"
+              :key="index"
+              :label="table0.tableName + '：' + table0.tableComment"
+              :value="table0.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item prop="subJoinColumnId">
+          <template #label>
+            <span>
+              子表关联的字段
+              <el-tooltip content="子表关联的字段， 如：user_id" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.subJoinColumnId" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in props.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :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 :value="true">一对多</el-radio>
+            <el-radio :value="false">一对一</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { handleTree } from '@/utils/tree'
+import * as CodegenApi from '@/api/infra/codegen'
+import * as MenuApi from '@/api/system/menu'
+import { PropType } from 'vue'
+
+defineOptions({ name: 'InfraCodegenGenerateInfoForm' })
+
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+  table: {
+    type: Object as PropType<Nullable<CodegenApi.CodegenTableVO>>,
+    default: () => null
+  },
+  columns: {
+    type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>,
+    default: () => null
+  }
+})
+
+const formRef = ref()
+const formData = ref({
+  templateType: null,
+  frontType: null,
+  scene: null,
+  moduleName: '',
+  businessName: '',
+  className: '',
+  classComment: '',
+  parentMenuId: null,
+  genPath: '',
+  genType: '',
+  masterTableId: undefined,
+  subJoinColumnId: undefined,
+  subJoinMany: undefined,
+  treeParentColumnId: undefined,
+  treeNameColumnId: undefined
+})
+
+const rules = reactive({
+  templateType: [required],
+  frontType: [required],
+  scene: [required],
+  moduleName: [required],
+  businessName: [required],
+  businessPackage: [required],
+  className: [required],
+  classComment: [required],
+  masterTableId: [required],
+  subJoinColumnId: [required],
+  subJoinMany: [required],
+  treeParentColumnId: [required],
+  treeNameColumnId: [required]
+})
+
+const tables = ref([]) // 表定义列表
+const menus = ref<any[]>([])
+const menuTreeProps = {
+  label: 'name'
+}
+
+watch(
+  () => props.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,
+    immediate: true
+  }
+)
+
+onMounted(async () => {
+  try {
+    // 加载菜单
+    const resp = await MenuApi.getSimpleMenusList()
+    menus.value = handleTree(resp)
+  } catch {}
+})
+
+defineExpose({
+  validate: async () => unref(formRef)?.validate()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/codegen/components/index.ts b/marketing-ui/admin-ui/src/views/infra/codegen/components/index.ts
new file mode 100644
index 0000000..1634a76
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/codegen/components/index.ts
@@ -0,0 +1,4 @@
+import BasicInfoForm from './BasicInfoForm.vue'
+import ColumInfoForm from './ColumInfoForm.vue'
+import GenerateInfoForm from './GenerateInfoForm.vue'
+export { BasicInfoForm, ColumInfoForm, GenerateInfoForm }
diff --git a/marketing-ui/admin-ui/src/views/infra/codegen/index.vue b/marketing-ui/admin-ui/src/views/infra/codegen/index.vue
new file mode 100644
index 0000000..a25b956
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/codegen/index.vue
@@ -0,0 +1,254 @@
+<template>
+
+  <!-- 搜索 -->
+  <ContentWrap>
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="表名称" prop="tableName">
+        <el-input
+          v-model="queryParams.tableName"
+          class="!w-240px"
+          clearable
+          placeholder="请输入表名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input
+          v-model="queryParams.tableComment"
+          class="!w-240px"
+          clearable
+          placeholder="请输入表描述"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item>
+        <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="['infra:codegen:create']" type="primary" @click="openImportTable()">
+          <Icon class="mr-5px" icon="ep:zoom-in" />
+          导入
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column align="center" label="数据源">
+        <template #default="scope">
+          {{
+            dataSourceConfigList.find((config) => config.id === scope.row.dataSourceConfigId)?.name
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="表名称" prop="tableName" width="200" />
+      <el-table-column
+        :show-overflow-tooltip="true"
+        align="center"
+        label="表描述"
+        prop="tableComment"
+        width="200"
+      />
+      <el-table-column align="center" label="实体" prop="className" width="200" />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180"
+      />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="更新时间"
+        prop="createTime"
+        width="180"
+      />
+      <el-table-column align="center" fixed="right" label="操作" width="300px">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['infra:codegen:preview']"
+            link
+            type="primary"
+            @click="handlePreview(scope.row)"
+          >
+            预览
+          </el-button>
+          <el-button
+            v-hasPermi="['infra:codegen:update']"
+            link
+            type="primary"
+            @click="handleUpdate(scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-hasPermi="['infra:codegen:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+          <el-button
+            v-hasPermi="['infra:codegen:update']"
+            link
+            type="primary"
+            @click="handleSyncDB(scope.row)"
+          >
+            同步
+          </el-button>
+          <el-button
+            v-hasPermi="['infra:codegen:download']"
+            link
+            type="primary"
+            @click="handleGenTable(scope.row)"
+          >
+            生成代码
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 弹窗：导入表 -->
+  <ImportTable ref="importRef" @success="getList" />
+  <!-- 弹窗：预览代码 -->
+  <PreviewCode ref="previewRef" />
+</template>
+<script lang="ts" setup>
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as CodegenApi from '@/api/infra/codegen'
+import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
+import ImportTable from './ImportTable.vue'
+import PreviewCode from './PreviewCode.vue'
+
+defineOptions({ name: 'InfraCodegen' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由跳转
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  tableName: undefined,
+  tableComment: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const dataSourceConfigList = ref<DataSourceConfigApi.DataSourceConfigVO[]>([]) // 数据源列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CodegenApi.getCodegenTablePage(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 importRef = ref()
+const openImportTable = () => {
+  importRef.value.open()
+}
+
+/** 编辑操作 */
+const handleUpdate = (id: number) => {
+  push('/codegen/edit?id=' + id)
+}
+
+/** 预览操作 */
+const previewRef = ref()
+const handlePreview = (row: CodegenApi.CodegenTableVO) => {
+  previewRef.value.open(row.id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await CodegenApi.deleteCodegenTable(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 同步操作  */
+const handleSyncDB = async (row: CodegenApi.CodegenTableVO) => {
+  // 基于 DB 同步
+  const tableName = row.tableName
+  try {
+    await message.confirm('确认要强制同步' + tableName + '表结构吗?', t('common.reminder'))
+    await CodegenApi.syncCodegenFromDB(row.id)
+    message.success('同步成功')
+  } catch {}
+}
+
+/** 生成代码操作 */
+const handleGenTable = async (row: CodegenApi.CodegenTableVO) => {
+  const res = await CodegenApi.downloadCodegen(row.id)
+  download.zip(res, 'codegen-' + row.className + '.zip')
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 加载数据源列表
+  dataSourceConfigList.value = await DataSourceConfigApi.getDataSourceConfigList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/config/ConfigForm.vue b/marketing-ui/admin-ui/src/views/infra/config/ConfigForm.vue
new file mode 100644
index 0000000..4f7333a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/config/ConfigForm.vue
@@ -0,0 +1,131 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="参数分类" prop="category">
+        <el-input v-model="formData.category" placeholder="请输入参数分类" />
+      </el-form-item>
+      <el-form-item label="参数名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入参数名称" />
+      </el-form-item>
+      <el-form-item label="参数键名" prop="key">
+        <el-input v-model="formData.key" placeholder="请输入参数键名" />
+      </el-form-item>
+      <el-form-item label="参数键值" prop="value">
+        <el-input v-model="formData.value" placeholder="请输入参数键值" />
+      </el-form-item>
+      <el-form-item label="是否可见" prop="visible">
+        <el-radio-group v-model="formData.visible">
+          <el-radio
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value as string"
+            :value="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="请输入内容" type="textarea" />
+      </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 { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
+import * as ConfigApi from '@/api/infra/config'
+
+defineOptions({ name: 'InfraConfigForm' })
+
+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,
+  category: '',
+  name: '',
+  key: '',
+  value: '',
+  visible: true,
+  remark: ''
+})
+const formRules = reactive({
+  category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
+  key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
+  value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
+  visible: [{ 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 ConfigApi.getConfig(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 ConfigApi.ConfigVO
+    if (formType.value === 'create') {
+      await ConfigApi.createConfig(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ConfigApi.updateConfig(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    category: '',
+    name: '',
+    key: '',
+    value: '',
+    visible: true,
+    remark: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/config/index.vue b/marketing-ui/admin-ui/src/views/infra/config/index.vue
new file mode 100644
index 0000000..36833a5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/config/index.vue
@@ -0,0 +1,227 @@
+<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="key">
+        <el-input
+          v-model="queryParams.key"
+          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 getIntDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
+            :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:config:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:config:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="参数主键" align="center" prop="id" />
+      <el-table-column label="参数分类" align="center" prop="category" />
+      <el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />
+      <el-table-column label="参数键名" align="center" prop="key" :show-overflow-tooltip="true" />
+      <el-table-column label="参数键值" align="center" prop="value" />
+      <el-table-column label="是否可见" align="center" prop="visible">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.visible" />
+        </template>
+      </el-table-column>
+      <el-table-column label="系统内置" align="center" prop="type">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_CONFIG_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:config:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra: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"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ConfigForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as ConfigApi from '@/api/infra/config'
+import ConfigForm from './ConfigForm.vue'
+
+defineOptions({ name: 'InfraConfig' })
+
+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: undefined,
+  key: undefined,
+  type: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ConfigApi.getConfigPage(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 ConfigApi.deleteConfig(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ConfigApi.exportConfig(queryParams)
+    download.excel(data, '参数配置.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/dataSourceConfig/DataSourceConfigForm.vue b/marketing-ui/admin-ui/src/views/infra/dataSourceConfig/DataSourceConfigForm.vue
new file mode 100644
index 0000000..e2a4eaa
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/dataSourceConfig/DataSourceConfigForm.vue
@@ -0,0 +1,111 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+    >
+      <el-form-item label="数据源名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入参数名称" />
+      </el-form-item>
+      <el-form-item label="数据源连接" prop="url">
+        <el-input v-model="formData.url" placeholder="请输入数据源连接" />
+      </el-form-item>
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="formData.username" placeholder="请输入用户名" />
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input v-model="formData.password" placeholder="请输入密码" />
+      </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 DataSourceConfigApi from '@/api/infra/dataSourceConfig'
+
+defineOptions({ name: 'InfraDataSourceConfigForm' })
+
+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<DataSourceConfigApi.DataSourceConfigVO>({
+  id: undefined,
+  name: '',
+  url: '',
+  username: '',
+  password: ''
+})
+const formRules = reactive({
+  name: [{ required: true, message: '数据源名称不能为空', trigger: 'blur' }],
+  url: [{ required: true, message: '数据源连接不能为空', trigger: 'blur' }],
+  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
+  password: [{ 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 DataSourceConfigApi.getDataSourceConfig(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 DataSourceConfigApi.DataSourceConfigVO
+    if (formType.value === 'create') {
+      await DataSourceConfigApi.createDataSourceConfig(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DataSourceConfigApi.updateDataSourceConfig(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    url: '',
+    username: '',
+    password: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/dataSourceConfig/index.vue b/marketing-ui/admin-ui/src/views/infra/dataSourceConfig/index.vue
new file mode 100644
index 0000000..92bd301
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/dataSourceConfig/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form class="-mb-15px" :inline="true">
+      <el-form-item>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['infra:data-source-config:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="主键编号" align="center" prop="id" />
+      <el-table-column label="数据源名称" align="center" prop="name" />
+      <el-table-column label="数据源连接" align="center" prop="url" :show-overflow-tooltip="true" />
+      <el-table-column label="用户名" align="center" prop="username" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:data-source-config:update']"
+            :disabled="scope.row.id === 0"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:data-source-config:delete']"
+            :disabled="scope.row.id === 0"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DataSourceConfigForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import { dateFormatter } from '@/utils/formatTime'
+import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
+import DataSourceConfigForm from './DataSourceConfigForm.vue'
+
+defineOptions({ name: 'InfraDataSourceConfig' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await DataSourceConfigApi.getDataSourceConfigList()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DataSourceConfigApi.deleteDataSourceConfig(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo01/Demo01ContactForm.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo01/Demo01ContactForm.vue
new file mode 100644
index 0000000..f317fe7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/demo/demo01/Demo01ContactForm.vue
@@ -0,0 +1,126 @@
+<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"
+            :value="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-item label="头像" prop="avatar">
+        <UploadImg v-model="formData.avatar" />
+      </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 Demo01ContactApi from '@/api/infra/demo/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,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined,
+  avatar: 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 Demo01ContactApi.getDemo01Contact(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 Demo01ContactApi.Demo01ContactVO
+    if (formType.value === 'create') {
+      await Demo01ContactApi.createDemo01Contact(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await Demo01ContactApi.updateDemo01Contact(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,
+    avatar: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo01/index.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo01/index.vue
new file mode 100644
index 0000000..8a42ca8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/demo/demo01/index.vue
@@ -0,0 +1,213 @@
+<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:demo01-contact:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:demo01-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="编号" 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="avatar" />
+      <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-contact:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo01-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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <Demo01ContactForm 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 Demo01ContactApi from '@/api/infra/demo/demo01'
+import Demo01ContactForm from './Demo01ContactForm.vue'
+
+defineOptions({ name: 'Demo01Contact' })
+
+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,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await Demo01ContactApi.getDemo01ContactPage(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 Demo01ContactApi.deleteDemo01Contact(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await Demo01ContactApi.exportDemo01Contact(queryParams)
+    download.excel(data, '示例联系人.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo02/Demo02CategoryForm.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo02/Demo02CategoryForm.vue
new file mode 100644
index 0000000..f4c5f8e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/demo/demo02/Demo02CategoryForm.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="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>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as Demo02CategoryApi from '@/api/infra/demo/demo02'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+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 demo02CategoryTree = 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 Demo02CategoryApi.getDemo02Category(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  await getDemo02CategoryTree()
+}
+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 Demo02CategoryApi.Demo02CategoryVO
+    if (formType.value === 'create') {
+      await Demo02CategoryApi.createDemo02Category(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await Demo02CategoryApi.updateDemo02Category(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()
+}
+
+/** 获得示例分类树 */
+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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo02/index.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo02/index.vue
new file mode 100644
index 0000000..6094943
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/demo/demo02/index.vue
@@ -0,0 +1,206 @@
+<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="['infra:demo02-category:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          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"
+      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)"
+            v-hasPermi="['infra:demo02-category:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo02-category: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <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 Demo02CategoryApi from '@/api/infra/demo/demo02'
+import Demo02CategoryForm from './Demo02CategoryForm.vue'
+
+defineOptions({ name: 'Demo02Category' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  name: null,
+  parentId: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await Demo02CategoryApi.getDemo02CategoryList(queryParams)
+    list.value = handleTree(data, 'id', 'parentId')
+  } 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 Demo02CategoryApi.deleteDemo02Category(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
new file mode 100644
index 0000000..b73f423
--- /dev/null
+++ b/marketing-ui/admin-ui/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"
+            :value="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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue
new file mode 100644
index 0000000..9d3888d
--- /dev/null
+++ b/marketing-ui/admin-ui/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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue
new file mode 100644
index 0000000..3dce77e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue
@@ -0,0 +1,130 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-button
+      v-hasPermi="['infra:demo03-student:create']"
+      plain
+      type="primary"
+      @click="openForm('create')"
+    >
+      <Icon class="mr-5px" icon="ep:plus" />
+      新增
+    </el-button>
+    <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" />
+      <el-table-column align="center" label="分数" prop="score" />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180px"
+      />
+      <el-table-column align="center" label="操作">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['infra:demo03-student:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-hasPermi="['infra:demo03-student:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+  <!-- 表单弹窗：添加/修改 -->
+  <Demo03CourseForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+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?: number // 学生编号（主表的关联字段）
+}>()
+const loading = ref(false) // 列表的加载中
+const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  studentId: undefined as unknown
+})
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val: number) => {
+    if (!val) {
+      return
+    }
+    queryParams.studentId = val
+    handleQuery()
+  },
+  { immediate: true, deep: true }
+)
+
+/** 查询列表 */
+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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue
new file mode 100644
index 0000000..5687294
--- /dev/null
+++ b/marketing-ui/admin-ui/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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue
new file mode 100644
index 0000000..635f321
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue
@@ -0,0 +1,130 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-button
+      v-hasPermi="['infra:demo03-student:create']"
+      plain
+      type="primary"
+      @click="openForm('create')"
+    >
+      <Icon class="mr-5px" icon="ep:plus" />
+      新增
+    </el-button>
+    <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" />
+      <el-table-column align="center" label="班主任" prop="teacher" />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180px"
+      />
+      <el-table-column align="center" label="操作">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['infra:demo03-student:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-hasPermi="['infra:demo03-student:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+  <!-- 表单弹窗：添加/修改 -->
+  <Demo03GradeForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+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?: number // 学生编号（主表的关联字段）
+}>()
+const loading = ref(false) // 列表的加载中
+const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  studentId: undefined as unknown
+})
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val: number) => {
+    if (!val) {
+      return
+    }
+    queryParams.studentId = val
+    handleQuery()
+  },
+  { immediate: true, deep: true }
+)
+
+/** 查询列表 */
+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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/index.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/index.vue
new file mode 100644
index 0000000..78c6276
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/demo/demo03/erp/index.vue
@@ -0,0 +1,247 @@
+<template>
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          class="!w-240px"
+          clearable
+          placeholder="请输入名字"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="queryParams.sex" class="!w-240px" clearable 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="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item>
+        <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="['infra:demo03-student:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+        <el-button
+          v-hasPermi="['infra:demo03-student:export']"
+          :loading="exportLoading"
+          plain
+          type="success"
+          @click="handleExport"
+        >
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :show-overflow-tooltip="true"
+      :stripe="true"
+      highlight-current-row
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column align="center" label="编号" prop="id" />
+      <el-table-column align="center" label="名字" prop="name" />
+      <el-table-column align="center" label="性别" prop="sex">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="出生日期"
+        prop="birthday"
+        width="180px"
+      />
+      <el-table-column align="center" label="简介" prop="description" />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180px"
+      />
+      <el-table-column align="center" label="操作">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['infra:demo03-student:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-hasPermi="['infra:demo03-student:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @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 lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } 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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
new file mode 100644
index 0000000..8621593
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/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"
+            :value="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/inner'
+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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue
new file mode 100644
index 0000000..77da45f
--- /dev/null
+++ b/marketing-ui/admin-ui/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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue
new file mode 100644
index 0000000..965b473
--- /dev/null
+++ b/marketing-ui/admin-ui/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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue
new file mode 100644
index 0000000..e14bac4
--- /dev/null
+++ b/marketing-ui/admin-ui/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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue
new file mode 100644
index 0000000..e631384
--- /dev/null
+++ b/marketing-ui/admin-ui/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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/index.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/index.vue
new file mode 100644
index 0000000..4b40def
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/demo/demo03/inner/index.vue
@@ -0,0 +1,228 @@
+<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">
+      <!-- 子表的列表 -->
+      <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="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" />
+</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/inner'
+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
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
new file mode 100644
index 0000000..42613c4
--- /dev/null
+++ b/marketing-ui/admin-ui/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"
+            :value="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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue
new file mode 100644
index 0000000..f439c3f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/demo/demo03/normal/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/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' }],
+  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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue
new file mode 100644
index 0000000..c711954
--- /dev/null
+++ b/marketing-ui/admin-ui/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>
diff --git a/marketing-ui/admin-ui/src/views/infra/demo/demo03/normal/index.vue b/marketing-ui/admin-ui/src/views/infra/demo/demo03/normal/index.vue
new file mode 100644
index 0000000..481673f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/demo/demo03/normal/index.vue
@@ -0,0 +1,213 @@
+<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">
+      <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" />
+</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/normal'
+import Demo03StudentForm from './Demo03StudentForm.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
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/druid/index.vue b/marketing-ui/admin-ui/src/views/infra/druid/index.vue
new file mode 100644
index 0000000..64dafa2
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/druid/index.vue
@@ -0,0 +1,26 @@
+<template>
+
+  <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
+    <IFrame v-if="!loading" v-loading="loading" :src="url" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as ConfigApi from '@/api/infra/config'
+
+defineOptions({ name: 'InfraDruid' })
+
+const loading = ref(true) // 是否加载中
+const url = ref(import.meta.env.VITE_BASE_URL + '/druid/index.html')
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await ConfigApi.getConfigKey('url.druid')
+    if (data && data.length > 0) {
+      url.value = data
+    }
+  } finally {
+    loading.value = false
+  }
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/file/FileForm.vue b/marketing-ui/admin-ui/src/views/infra/file/FileForm.vue
new file mode 100644
index 0000000..1de1e25
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/file/FileForm.vue
@@ -0,0 +1,99 @@
+<template>
+  <Dialog v-model="dialogVisible" title="上传文件">
+    <el-upload
+      ref="uploadRef"
+      v-model:file-list="fileList"
+      :action="uploadUrl"
+      :auto-upload="false"
+      :data="data"
+      :disabled="formLoading"
+      :limit="1"
+      :on-change="handleFileChange"
+      :on-error="submitFormError"
+      :on-exceed="handleExceed"
+      :on-success="submitFormSuccess"
+      :http-request="httpRequest"
+      accept=".jpg, .png, .gif"
+      drag
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em></div>
+      <template #tip>
+        <div class="el-upload__tip" style="color: red">
+          提示：仅允许导入 jpg、png、gif 格式文件！
+        </div>
+      </template>
+    </el-upload>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitFileForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { useUpload } from '@/components/UploadFile/src/useUpload'
+
+defineOptions({ name: 'InfraFileForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const fileList = ref([]) // 文件列表
+const data = ref({ path: '' })
+const uploadRef = ref()
+
+const { uploadUrl, httpRequest } = useUpload()
+
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 处理上传的文件发生变化 */
+const handleFileChange = (file) => {
+  data.value.path = file.name
+}
+
+/** 提交表单 */
+const submitFileForm = () => {
+  if (fileList.value.length == 0) {
+    message.error('请上传文件')
+    return
+  }
+  unref(uploadRef)?.submit()
+}
+
+/** 文件上传成功处理 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitFormSuccess = () => {
+  // 清理
+  dialogVisible.value = false
+  formLoading.value = false
+  unref(uploadRef)?.clearFiles()
+  // 提示成功，并刷新
+  message.success(t('common.createSuccess'))
+  emit('success')
+}
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+  message.error('上传失败，请您重新上传！')
+  formLoading.value = false
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  // 重置上传状态和文件
+  formLoading.value = false
+  uploadRef.value?.clearFiles()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+  message.error('最多只能上传一个文件！')
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/file/index.vue b/marketing-ui/admin-ui/src/views/infra/file/index.vue
new file mode 100644
index 0000000..d4e08a6
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/file/index.vue
@@ -0,0 +1,202 @@
+<template>
+
+  <!-- 搜索 -->
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="文件路径" prop="path">
+        <el-input
+          v-model="queryParams.path"
+          placeholder="请输入文件路径"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="文件类型" prop="type" width="80">
+        <el-input
+          v-model="queryParams.type"
+          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">
+          <Icon icon="ep:upload" class="mr-5px" /> 上传文件
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="文件名" align="center" prop="name" :show-overflow-tooltip="true" />
+      <el-table-column label="文件路径" align="center" prop="path" :show-overflow-tooltip="true" />
+      <el-table-column label="URL" align="center" prop="url" :show-overflow-tooltip="true" />
+      <el-table-column
+        label="文件大小"
+        align="center"
+        prop="size"
+        width="120"
+        :formatter="fileSizeFormatter"
+      />
+      <el-table-column label="文件类型" align="center" prop="type" width="180px" />
+      <el-table-column label="文件内容" align="center" prop="url" width="110px">
+        <template #default="{ row }">
+          <el-image
+            v-if="row.type.includes('image')"
+            class="h-80px w-80px"
+            lazy
+            :src="row.url"
+            :preview-src-list="[row.url]"
+            preview-teleported
+            fit="cover"
+          />
+          <el-link
+            v-else-if="row.type.includes('pdf')"
+            type="primary"
+            :href="row.url"
+            :underline="false"
+            target="_blank"
+            >预览</el-link
+          >
+          <el-link v-else type="primary" download :href="row.url" :underline="false" target="_blank"
+            >下载</el-link
+          >
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="上传时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button link type="primary" @click="copyToClipboard(scope.row.url)">
+            复制链接
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:file: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <FileForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import { fileSizeFormatter } from '@/utils'
+import { dateFormatter } from '@/utils/formatTime'
+import * as FileApi from '@/api/infra/file'
+import FileForm from './FileForm.vue'
+
+defineOptions({ name: 'InfraFile' })
+
+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: undefined,
+  type: undefined,
+  path: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await FileApi.getFilePage(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 = () => {
+  formRef.value.open()
+}
+
+/** 复制到剪贴板方法 */
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text).then(() => {
+    message.success('复制成功')
+  })
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await FileApi.deleteFile(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/fileConfig/FileConfigForm.vue b/marketing-ui/admin-ui/src/views/infra/fileConfig/FileConfigForm.vue
new file mode 100644
index 0000000..88e0bd5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/fileConfig/FileConfigForm.vue
@@ -0,0 +1,196 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+    >
+      <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="storage">
+        <el-select
+          v-model="formData.storage"
+          :disabled="formData.id !== undefined"
+          placeholder="请选择存储器"
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- DB -->
+      <!-- Local / FTP / SFTP -->
+      <el-form-item
+        v-if="formData.storage >= 10 && formData.storage <= 12"
+        label="基础路径"
+        prop="config.basePath"
+      >
+        <el-input v-model="formData.config.basePath" placeholder="请输入基础路径" />
+      </el-form-item>
+      <el-form-item
+        v-if="formData.storage >= 11 && formData.storage <= 12"
+        label="主机地址"
+        prop="config.host"
+      >
+        <el-input v-model="formData.config.host" placeholder="请输入主机地址" />
+      </el-form-item>
+      <el-form-item
+        v-if="formData.storage >= 11 && formData.storage <= 12"
+        label="主机端口"
+        prop="config.port"
+      >
+        <el-input-number v-model="formData.config.port" :min="0" placeholder="请输入主机端口" />
+      </el-form-item>
+      <el-form-item
+        v-if="formData.storage >= 11 && formData.storage <= 12"
+        label="用户名"
+        prop="config.username"
+      >
+        <el-input v-model="formData.config.username" placeholder="请输入密码" />
+      </el-form-item>
+      <el-form-item
+        v-if="formData.storage >= 11 && formData.storage <= 12"
+        label="密码"
+        prop="config.password"
+      >
+        <el-input v-model="formData.config.password" placeholder="请输入密码" />
+      </el-form-item>
+      <el-form-item v-if="formData.storage === 11" label="连接模式" prop="config.mode">
+        <el-radio-group v-model="formData.config.mode">
+          <el-radio key="Active" value="Active">主动模式</el-radio>
+          <el-radio key="Passive" value="Passive">被动模式</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <!-- S3 -->
+      <el-form-item v-if="formData.storage === 20" label="节点地址" prop="config.endpoint">
+        <el-input v-model="formData.config.endpoint" placeholder="请输入节点地址" />
+      </el-form-item>
+      <el-form-item v-if="formData.storage === 20" label="存储 bucket" prop="config.bucket">
+        <el-input v-model="formData.config.bucket" placeholder="请输入 bucket" />
+      </el-form-item>
+      <el-form-item v-if="formData.storage === 20" label="accessKey" prop="config.accessKey">
+        <el-input v-model="formData.config.accessKey" placeholder="请输入 accessKey" />
+      </el-form-item>
+      <el-form-item v-if="formData.storage === 20" label="accessSecret" prop="config.accessSecret">
+        <el-input v-model="formData.config.accessSecret" placeholder="请输入 accessSecret" />
+      </el-form-item>
+      <!-- 通用 -->
+      <el-form-item v-if="formData.storage === 20" label="自定义域名">
+        <!-- 无需参数校验，所以去掉 prop -->
+        <el-input v-model="formData.config.domain" placeholder="请输入自定义域名" />
+      </el-form-item>
+      <el-form-item v-else-if="formData.storage" label="自定义域名" prop="config.domain">
+        <el-input v-model="formData.config.domain" placeholder="请输入自定义域名" />
+      </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 { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import * as FileConfigApi from '@/api/infra/fileConfig'
+import { FormRules } from 'element-plus'
+
+defineOptions({ name: 'InfraFileConfigForm' })
+
+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: '',
+  storage: 0,
+  remark: '',
+  config: {} as FileConfigApi.FileClientConfig
+})
+const formRules = reactive<FormRules>({
+  name: [{ required: true, message: '配置名不能为空', trigger: 'blur' }],
+  storage: [{ required: true, message: '存储器不能为空', trigger: 'change' }],
+  config: {
+    basePath: [{ required: true, message: '基础路径不能为空', trigger: 'blur' }],
+    host: [{ required: true, message: '主机地址不能为空', trigger: 'blur' }],
+    port: [{ required: true, message: '主机端口不能为空', trigger: 'blur' }],
+    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
+    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
+    mode: [{ required: true, message: '连接模式不能为空', trigger: 'change' }],
+    endpoint: [{ required: true, message: '节点地址不能为空', trigger: 'blur' }],
+    bucket: [{ required: true, message: '存储 bucket 不能为空', trigger: 'blur' }],
+    accessKey: [{ required: true, message: 'accessKey 不能为空', trigger: 'blur' }],
+    accessSecret: [{ required: true, message: 'accessSecret 不能为空', trigger: 'blur' }],
+    domain: [{ required: true, message: '自定义域名不能为空', trigger: 'blur' }]
+  } as FormRules
+})
+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 FileConfigApi.getFileConfig(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 FileConfigApi.FileConfigVO
+    if (formType.value === 'create') {
+      await FileConfigApi.createFileConfig(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await FileConfigApi.updateFileConfig(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    storage: undefined!,
+    remark: '',
+    config: {} as FileConfigApi.FileClientConfig
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/fileConfig/index.vue b/marketing-ui/admin-ui/src/views/infra/fileConfig/index.vue
new file mode 100644
index 0000000..7146b09
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/fileConfig/index.vue
@@ -0,0 +1,217 @@
+<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="storage">
+        <el-select
+          v-model="queryParams.storage"
+          placeholder="请选择存储器"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_FILE_STORAGE)"
+            :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:file-config:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="配置名" align="center" prop="name" />
+      <el-table-column label="存储器" align="center" prop="storage">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_FILE_STORAGE" :value="scope.row.storage" />
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="主配置" align="center" prop="primary">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center" width="240px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:file-config:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            :disabled="scope.row.master"
+            @click="handleMaster(scope.row.id)"
+            v-hasPermi="['infra:file-config:update']"
+          >
+            主配置
+          </el-button>
+          <el-button link type="primary" @click="handleTest(scope.row.id)"> 测试 </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:file-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"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <FileConfigForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import * as FileConfigApi from '@/api/infra/fileConfig'
+import FileConfigForm from './FileConfigForm.vue'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+
+defineOptions({ name: 'InfraFileConfig' })
+
+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: undefined,
+  storage: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await FileConfigApi.getFileConfigPage(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 FileConfigApi.deleteFileConfig(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 主配置按钮操作 */
+const handleMaster = async (id) => {
+  try {
+    await message.confirm('是否确认修改配置编号为"' + id + '"的数据项为主配置?')
+    await FileConfigApi.updateFileConfigMaster(id)
+    message.success(t('common.updateSuccess'))
+    await getList()
+  } catch {}
+}
+
+/** 测试按钮操作 */
+const handleTest = async (id) => {
+  try {
+    const response = await FileConfigApi.testFileConfig(id)
+    await message.confirm('是否要访问该文件？', '测试上传成功')
+    window.open(response, '_blank')
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/job/JobDetail.vue b/marketing-ui/admin-ui/src/views/infra/job/JobDetail.vue
new file mode 100644
index 0000000..584c89b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/job/JobDetail.vue
@@ -0,0 +1,73 @@
+<template>
+  <Dialog v-model="dialogVisible" title="任务详细" width="700px">
+    <el-descriptions :column="1" border>
+      <el-descriptions-item label="任务编号" min-width="60">
+        {{ detailData.id }}
+      </el-descriptions-item>
+      <el-descriptions-item label="任务名称">
+        {{ detailData.name }}
+      </el-descriptions-item>
+      <el-descriptions-item label="任务状态">
+        <dict-tag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="detailData.status" />
+      </el-descriptions-item>
+      <el-descriptions-item label="处理器的名字">
+        {{ detailData.handlerName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="处理器的参数">
+        {{ detailData.handlerParam }}
+      </el-descriptions-item>
+      <el-descriptions-item label="Cron 表达式">
+        {{ detailData.cronExpression }}
+      </el-descriptions-item>
+      <el-descriptions-item label="重试次数">
+        {{ detailData.retryCount }}
+      </el-descriptions-item>
+      <el-descriptions-item label="重试间隔">
+        {{ detailData.retryInterval + ' 毫秒' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="监控超时时间">
+        {{ detailData.monitorTimeout > 0 ? detailData.monitorTimeout + ' 毫秒' : '未开启' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="后续执行时间">
+        <el-timeline>
+          <el-timeline-item
+            v-for="(nextTime, index) in nextTimes"
+            :key="index"
+            :timestamp="formatDate(nextTime)"
+          >
+            第 {{ index + 1 }} 次
+          </el-timeline-item>
+        </el-timeline>
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as JobApi from '@/api/infra/job'
+
+defineOptions({ name: 'InfraJobDetail' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({} as JobApi.JobVO) // 详情数据
+const nextTimes = ref([]) // 下一轮执行时间的数组
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  // 查看，设置数据
+  if (id) {
+    detailLoading.value = true
+    try {
+      detailData.value = await JobApi.getJob(id)
+      // 获取下一次执行时间
+      nextTimes.value = await JobApi.getJobNextTimes(id)
+    } finally {
+      detailLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/job/JobForm.vue b/marketing-ui/admin-ui/src/views/infra/job/JobForm.vue
new file mode 100644
index 0000000..79f85e7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/job/JobForm.vue
@@ -0,0 +1,137 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="任务名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入任务名称" />
+      </el-form-item>
+      <el-form-item label="处理器的名字" prop="handlerName">
+        <el-input
+          :readonly="formData.id !== undefined"
+          v-model="formData.handlerName"
+          placeholder="请输入处理器的名字"
+        />
+      </el-form-item>
+      <el-form-item label="处理器的参数" prop="handlerParam">
+        <el-input v-model="formData.handlerParam" placeholder="请输入处理器的参数" />
+      </el-form-item>
+      <el-form-item label="CRON 表达式" prop="cronExpression">
+        <crontab v-model="formData.cronExpression" />
+      </el-form-item>
+      <el-form-item label="重试次数" prop="retryCount">
+        <el-input
+          v-model="formData.retryCount"
+          placeholder="请输入重试次数。设置为 0 时，不进行重试"
+        />
+      </el-form-item>
+      <el-form-item label="重试间隔" prop="retryInterval">
+        <el-input
+          v-model="formData.retryInterval"
+          placeholder="请输入重试间隔，单位：毫秒。设置为 0 时，无需间隔"
+        />
+      </el-form-item>
+      <el-form-item label="监控超时时间" prop="monitorTimeout">
+        <el-input v-model="formData.monitorTimeout" placeholder="请输入监控超时时间，单位：毫秒" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as JobApi from '@/api/infra/job'
+
+defineOptions({ name: 'JobForm' })
+
+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: '',
+  handlerName: '',
+  handlerParam: '',
+  cronExpression: '',
+  retryCount: undefined,
+  retryInterval: undefined,
+  monitorTimeout: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
+  handlerName: [{ required: true, message: '处理器的名字不能为空', trigger: 'blur' }],
+  cronExpression: [{ required: true, message: 'CRON 表达式不能为空', trigger: 'blur' }],
+  retryCount: [{ required: true, message: '重试次数不能为空', trigger: 'blur' }],
+  retryInterval: [{ 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 JobApi.getJob(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 JobApi.JobVO
+    if (formType.value === 'create') {
+      await JobApi.createJob(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await JobApi.updateJob(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    handlerName: '',
+    handlerParam: '',
+    cronExpression: '',
+    retryCount: undefined,
+    retryInterval: undefined,
+    monitorTimeout: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/job/index.vue b/marketing-ui/admin-ui/src/views/infra/job/index.vue
new file mode 100644
index 0000000..7a61857
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/job/index.vue
@@ -0,0 +1,300 @@
+<template>
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="100px"
+    >
+      <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="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择任务状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_JOB_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="处理器的名字" prop="handlerName">
+        <el-input
+          v-model="queryParams.handlerName"
+          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="['infra:job:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:job:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button type="info" plain @click="handleJobLog()" v-hasPermi="['infra:job:query']">
+          <Icon icon="ep:zoom-in" class="mr-5px" /> 执行日志
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="任务编号" align="center" prop="id" />
+      <el-table-column label="任务名称" align="center" prop="name" />
+      <el-table-column label="任务状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="处理器的名字" align="center" prop="handlerName" />
+      <el-table-column label="处理器的参数" align="center" prop="handlerParam" />
+      <el-table-column label="CRON 表达式" align="center" prop="cronExpression" />
+      <el-table-column label="操作" align="center" width="200">
+        <template #default="scope">
+          <el-button
+            type="primary"
+            link
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:job:update']"
+          >
+            修改
+          </el-button>
+          <el-button
+            type="primary"
+            link
+            @click="handleChangeStatus(scope.row)"
+            v-hasPermi="['infra:job:update']"
+          >
+            {{ scope.row.status === InfraJobStatusEnum.STOP ? '开启' : '暂停' }}
+          </el-button>
+          <el-button
+            type="danger"
+            link
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:job:delete']"
+          >
+            删除
+          </el-button>
+          <el-dropdown
+            @command="(command) => handleCommand(command, scope.row)"
+            v-hasPermi="['infra:job:trigger', 'infra:job:query']"
+          >
+            <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="handleRun" v-if="checkPermi(['infra:job:trigger'])">
+                  执行一次
+                </el-dropdown-item>
+                <el-dropdown-item command="openDetail" v-if="checkPermi(['infra:job:query'])">
+                  任务详细
+                </el-dropdown-item>
+                <el-dropdown-item command="handleJobLog" v-if="checkPermi(['infra:job:query'])">
+                  调度日志
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <JobForm ref="formRef" @success="getList" />
+  <!-- 表单弹窗：查看 -->
+  <JobDetail ref="detailRef" />
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { checkPermi } from '@/utils/permission'
+import JobForm from './JobForm.vue'
+import JobDetail from './JobDetail.vue'
+import download from '@/utils/download'
+import * as JobApi from '@/api/infra/job'
+import { InfraJobStatusEnum } from '@/utils/constants'
+
+defineOptions({ name: 'InfraJob' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const { push } = useRouter() // 路由
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  status: undefined,
+  handlerName: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await JobApi.getJobPage(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 handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await JobApi.exportJob(queryParams)
+    download.excel(data, '定时任务.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 修改状态操作 */
+const handleChangeStatus = async (row: JobApi.JobVO) => {
+  try {
+    // 修改状态的二次确认
+    const text = row.status === InfraJobStatusEnum.STOP ? '开启' : '关闭'
+    await message.confirm(
+      '确认要' + text + '定时任务编号为"' + row.id + '"的数据项?',
+      t('common.reminder')
+    )
+    const status =
+      row.status === InfraJobStatusEnum.STOP ? InfraJobStatusEnum.NORMAL : InfraJobStatusEnum.STOP
+    await JobApi.updateJobStatus(row.id, status)
+    message.success(text + '成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await JobApi.deleteJob(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** '更多'操作按钮 */
+const handleCommand = (command, row) => {
+  switch (command) {
+    case 'handleRun':
+      handleRun(row)
+      break
+    case 'openDetail':
+      openDetail(row.id)
+      break
+    case 'handleJobLog':
+      handleJobLog(row?.id)
+      break
+    default:
+      break
+  }
+}
+
+/** 执行一次 */
+const handleRun = async (row: JobApi.JobVO) => {
+  try {
+    // 二次确认
+    await message.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder'))
+    // 提交执行
+    await JobApi.runJob(row.id)
+    message.success('执行成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 查看操作 */
+const detailRef = ref()
+const openDetail = (id: number) => {
+  detailRef.value.open(id)
+}
+
+/** 跳转执行日志 */
+const handleJobLog = (id?: number) => {
+  if (id && id > 0) {
+    push('/job/job-log?id=' + id)
+  } else {
+    push('/job/job-log')
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/job/logger/JobLogDetail.vue b/marketing-ui/admin-ui/src/views/infra/job/logger/JobLogDetail.vue
new file mode 100644
index 0000000..7216f52
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/job/logger/JobLogDetail.vue
@@ -0,0 +1,59 @@
+<template>
+  <Dialog v-model="dialogVisible" title="任务详细" width="700px">
+    <el-descriptions :column="1" border>
+      <el-descriptions-item label="日志编号" min-width="60">
+        {{ detailData.id }}
+      </el-descriptions-item>
+      <el-descriptions-item label="任务编号">
+        {{ detailData.jobId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="处理器的名字">
+        {{ detailData.handlerName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="处理器的参数">
+        {{ detailData.handlerParam }}
+      </el-descriptions-item>
+      <el-descriptions-item label="第几次执行">
+        {{ detailData.executeIndex }}
+      </el-descriptions-item>
+      <el-descriptions-item label="执行时间">
+        {{ formatDate(detailData.beginTime) + ' ~ ' + formatDate(detailData.endTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="执行时长">
+        {{ detailData.duration + ' 毫秒' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="任务状态">
+        <dict-tag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="detailData.status" />
+      </el-descriptions-item>
+      <el-descriptions-item label="执行结果">
+        {{ detailData.result }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as JobLogApi from '@/api/infra/jobLog'
+
+defineOptions({ name: 'JobLogDetail' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({} as JobLogApi.JobLogVO) // 详情数据
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  // 查看，设置数据
+  if (id) {
+    detailLoading.value = true
+    try {
+      detailData.value = await JobLogApi.getJobLog(id)
+    } finally {
+      detailLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/job/logger/index.vue b/marketing-ui/admin-ui/src/views/infra/job/logger/index.vue
new file mode 100644
index 0000000..dcd6d71
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/job/logger/index.vue
@@ -0,0 +1,197 @@
+<template>
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="120px"
+    >
+      <el-form-item label="处理器的名字" prop="handlerName">
+        <el-input
+          v-model="queryParams.handlerName"
+          placeholder="请输入处理器的名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="开始执行时间" prop="beginTime">
+        <el-date-picker
+          v-model="queryParams.beginTime"
+          type="date"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          placeholder="选择开始执行时间"
+          clearable
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="结束执行时间" prop="endTime">
+        <el-date-picker
+          v-model="queryParams.endTime"
+          type="date"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          placeholder="选择结束执行时间"
+          clearable
+          :default-time="new Date('1 23:59:59')"
+          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 getIntDictOptions(DICT_TYPE.INFRA_JOB_LOG_STATUS)"
+            :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>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:job:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="日志编号" align="center" prop="id" />
+      <el-table-column label="任务编号" align="center" prop="jobId" />
+      <el-table-column label="处理器的名字" align="center" prop="handlerName" />
+      <el-table-column label="处理器的参数" align="center" prop="handlerParam" />
+      <el-table-column label="第几次执行" align="center" prop="executeIndex" />
+      <el-table-column label="执行时间" align="center" width="170s">
+        <template #default="scope">
+          <span>{{ formatDate(scope.row.beginTime) + ' ~ ' + formatDate(scope.row.endTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="执行时长" align="center" prop="duration">
+        <template #default="scope">
+          <span>{{ scope.row.duration + ' 毫秒' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="任务状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            type="primary"
+            link
+            @click="openDetail(scope.row.id)"
+            v-hasPermi="['infra:job:query']"
+          >
+            详细
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：查看 -->
+  <JobLogDetail ref="detailRef" />
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import download from '@/utils/download'
+import JobLogDetail from './JobLogDetail.vue'
+import * as JobLogApi from '@/api/infra/jobLog'
+
+defineOptions({ name: 'InfraJobLog' })
+
+const message = useMessage() // 消息弹窗
+const { query } = useRoute() // 查询参数
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  jobId: query.id,
+  handlerName: undefined,
+  beginTime: undefined,
+  endTime: undefined,
+  status: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await JobLogApi.getJobLogPage(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 = (rowId?: number) => {
+  detailRef.value.open(rowId)
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await JobLogApi.exportJobLog(queryParams)
+    download.excel(data, '定时任务执行日志.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/redis/index.vue b/marketing-ui/admin-ui/src/views/infra/redis/index.vue
new file mode 100644
index 0000000..5378f02
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/redis/index.vue
@@ -0,0 +1,267 @@
+<template>
+
+  <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
+    <el-row>
+      <!-- 基本信息 -->
+      <el-col :span="24" class="card-box" shadow="hover">
+        <el-card>
+          <el-descriptions title="基本信息" :column="6" border>
+            <el-descriptions-item label="Redis版本 :">
+              {{ cache?.info?.redis_version }}
+            </el-descriptions-item>
+            <el-descriptions-item label="运行模式 :">
+              {{ cache?.info?.redis_mode == 'standalone' ? '单机' : '集群' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="端口 :">
+              {{ cache?.info?.tcp_port }}
+            </el-descriptions-item>
+            <el-descriptions-item label="客户端数 :">
+              {{ cache?.info?.connected_clients }}
+            </el-descriptions-item>
+            <el-descriptions-item label="运行时间(天) :">
+              {{ cache?.info?.uptime_in_days }}
+            </el-descriptions-item>
+            <el-descriptions-item label="使用内存 :">
+              {{ cache?.info?.used_memory_human }}
+            </el-descriptions-item>
+            <el-descriptions-item label="使用CPU :">
+              {{ cache?.info ? parseFloat(cache?.info?.used_cpu_user_children).toFixed(2) : '' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="内存配置 :">
+              {{ cache?.info?.maxmemory_human }}
+            </el-descriptions-item>
+            <el-descriptions-item label="AOF是否开启 :">
+              {{ cache?.info?.aof_enabled == '0' ? '否' : '是' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="RDB是否成功 :">
+              {{ cache?.info?.rdb_last_bgsave_status }}
+            </el-descriptions-item>
+            <el-descriptions-item label="Key数量 :">
+              {{ cache?.dbSize }}
+            </el-descriptions-item>
+            <el-descriptions-item label="网络入口/出口 :">
+              {{ cache?.info?.instantaneous_input_kbps }}kps/
+              {{ cache?.info?.instantaneous_output_kbps }}kps
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-col>
+      <!-- 命令统计 -->
+      <el-col :span="12" class="mt-3">
+        <el-card :gutter="12" shadow="hover">
+          <Echart :options="commandStatsRefChika" :height="420" />
+        </el-card>
+      </el-col>
+      <!-- 内存使用量统计 -->
+      <el-col :span="12" class="mt-3">
+        <el-card class="ml-3" :gutter="12" shadow="hover">
+          <Echart :options="usedmemoryEchartChika" :height="420" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-scrollbar>
+</template>
+<script lang="ts" setup>
+import * as RedisApi from '@/api/infra/redis'
+import { RedisMonitorInfoVO } from '@/api/infra/redis/types'
+const cache = ref<RedisMonitorInfoVO>()
+
+// 基本信息
+const readRedisInfo = async () => {
+  const data = await RedisApi.getCache()
+  cache.value = data
+}
+
+// 内存使用情况
+const usedmemoryEchartChika = reactive<any>({
+  title: {
+    // 仪表盘标题。
+    text: '内存使用情况',
+    left: 'center',
+    show: true, // 是否显示标题,默认 true。
+    offsetCenter: [0, '20%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
+    color: 'yellow', // 文字的颜色,默认 #333。
+    fontSize: 20 // 文字的字体大小,默认 15。
+  },
+  toolbox: {
+    show: false,
+    feature: {
+      restore: { show: true },
+      saveAsImage: { show: true }
+    }
+  },
+  series: [
+    {
+      name: '峰值',
+      type: 'gauge',
+      min: 0,
+      max: 50,
+      splitNumber: 10,
+      //这是指针的颜色
+      color: '#F5C74E',
+      radius: '85%',
+      center: ['50%', '50%'],
+      startAngle: 225,
+      endAngle: -45,
+      axisLine: {
+        // 坐标轴线
+        lineStyle: {
+          // 属性lineStyle控制线条样式
+          color: [
+            [0.2, '#7FFF00'],
+            [0.8, '#00FFFF'],
+            [1, '#FF0000']
+          ],
+          //width: 6 外框的大小（环的宽度）
+          width: 10
+        }
+      },
+      axisTick: {
+        // 坐标轴小标记
+        //里面的线长是5（短线）
+        length: 5, // 属性length控制线长
+        lineStyle: {
+          // 属性lineStyle控制线条样式
+          color: '#76D9D7'
+        }
+      },
+      splitLine: {
+        // 分隔线
+        length: 20, // 属性length控制线长
+        lineStyle: {
+          // 属性lineStyle（详见lineStyle）控制线条样式
+          color: '#76D9D7'
+        }
+      },
+      axisLabel: {
+        color: '#76D9D7',
+        distance: 15,
+        fontSize: 15
+      },
+      pointer: {
+        // 指针的大小
+        width: 7,
+        show: true
+      },
+      detail: {
+        textStyle: {
+          fontWeight: 'normal',
+          // 里面文字下的数值大小（50）
+          fontSize: 15,
+          color: '#FFFFFF'
+        },
+        valueAnimation: true
+      },
+      progress: {
+        show: true
+      }
+    }
+  ]
+})
+
+// 指令使用情况
+const commandStatsRefChika = reactive({
+  title: {
+    text: '命令统计',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)'
+  },
+  legend: {
+    type: 'scroll',
+    orient: 'vertical',
+    right: 30,
+    top: 10,
+    bottom: 20,
+    data: [] as any[],
+    textStyle: {
+      color: '#a1a1a1'
+    }
+  },
+  series: [
+    {
+      name: '命令',
+      type: 'pie',
+      radius: [20, 120],
+      center: ['40%', '60%'],
+      data: [] as any[],
+      roseType: 'radius',
+      label: {
+        show: true
+      },
+      emphasis: {
+        label: {
+          show: true
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }
+  ]
+})
+
+/** 加载数据 */
+const getSummary = () => {
+  // 初始化命令图表
+  initCommandStatsChart()
+  usedMemoryInstance()
+}
+
+/** 命令使用情况 */
+const initCommandStatsChart = async () => {
+  usedmemoryEchartChika.series[0].data = []
+  // 发起请求
+  try {
+    const data = await RedisApi.getCache()
+    cache.value = data
+    // 处理数据
+    const commandStats = [] as any[]
+    const nameList = [] as string[]
+    data.commandStats.forEach((row) => {
+      commandStats.push({
+        name: row.command,
+        value: row.calls
+      })
+      nameList.push(row.command)
+    })
+    commandStatsRefChika.legend.data = nameList
+    commandStatsRefChika.series[0].data = commandStats
+  } catch {}
+}
+const usedMemoryInstance = async () => {
+  try {
+    const data = await RedisApi.getCache()
+    cache.value = data
+    // 仪表盘详情，用于显示数据。
+    usedmemoryEchartChika.series[0].detail = {
+      show: true, // 是否显示详情,默认 true。
+      offsetCenter: [0, '50%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
+      color: 'auto', // 文字的颜色,默认 auto。
+      fontSize: 30, // 文字的字体大小,默认 15。
+      formatter: cache.value!.info.used_memory_human // 格式化函数或者字符串
+    }
+
+    usedmemoryEchartChika.series[0].data[0] = {
+      value: cache.value!.info.used_memory_human,
+      name: '内存消耗'
+    }
+    console.log(cache.value!.info)
+    usedmemoryEchartChika.tooltip = {
+      formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
+    }
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  // 读取 redis 信息
+  readRedisInfo()
+  // 加载数据
+  getSummary()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/server/index.vue b/marketing-ui/admin-ui/src/views/infra/server/index.vue
new file mode 100644
index 0000000..5af4258
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/server/index.vue
@@ -0,0 +1,28 @@
+<template>
+
+  <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </ContentWrap>
+
+</template>
+<script lang="ts" setup>
+import * as ConfigApi from '@/api/infra/config'
+
+defineOptions({ name: 'InfraAdminServer' })
+
+const loading = ref(true) // 是否加载中
+const src = ref(import.meta.env.VITE_BASE_URL + '/admin/applications')
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    // 友情提示：如果访问出现 404 问题：
+    const data = await ConfigApi.getConfigKey('url.spring-boot-admin')
+    if (data && data.length > 0) {
+      src.value = data
+    }
+  } finally {
+    loading.value = false
+  }
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/skywalking/index.vue b/marketing-ui/admin-ui/src/views/infra/skywalking/index.vue
new file mode 100644
index 0000000..285fe7d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/skywalking/index.vue
@@ -0,0 +1,26 @@
+<template>
+
+  <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as ConfigApi from '@/api/infra/config'
+
+defineOptions({ name: 'InfraSkyWalking' })
+
+const loading = ref(true) // 是否加载中
+const src = ref('http://skywalking.shop.iocoder.cn')
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await ConfigApi.getConfigKey('url.skywalking')
+    if (data && data.length > 0) {
+      src.value = data
+    }
+  } finally {
+    loading.value = false
+  }
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/swagger/index.vue b/marketing-ui/admin-ui/src/views/infra/swagger/index.vue
new file mode 100644
index 0000000..7ea00c4
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/swagger/index.vue
@@ -0,0 +1,27 @@
+<template>
+
+  <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as ConfigApi from '@/api/infra/config'
+
+defineOptions({ name: 'InfraSwagger' })
+
+const loading = ref(true) // 是否加载中
+const src = ref(import.meta.env.VITE_BASE_URL + '/doc.html') // Knife4j UI
+// const src = ref(import.meta.env.VITE_BASE_URL + '/swagger-ui') // Swagger UI
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await ConfigApi.getConfigKey('url.swagger')
+    if (data && data.length > 0) {
+      src.value = data
+    }
+  } finally {
+    loading.value = false
+  }
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/infra/webSocket/index.vue b/marketing-ui/admin-ui/src/views/infra/webSocket/index.vue
new file mode 100644
index 0000000..aacf0ba
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/infra/webSocket/index.vue
@@ -0,0 +1,184 @@
+<template>
+
+  <div class="flex">
+    <!-- 左侧：建立连接、发送消息 -->
+    <el-card :gutter="12" class="w-1/2" shadow="always">
+      <template #header>
+        <div class="card-header">
+          <span>连接</span>
+        </div>
+      </template>
+      <div class="flex items-center">
+        <span class="mr-4 text-lg font-medium"> 连接状态: </span>
+        <el-tag :color="getTagColor">{{ status }}</el-tag>
+      </div>
+      <hr class="my-4" />
+      <div class="flex">
+        <el-input v-model="server" disabled>
+          <template #prepend>服务地址</template>
+        </el-input>
+        <el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggleConnectStatus">
+          {{ getIsOpen ? '关闭连接' : '开启连接' }}
+        </el-button>
+      </div>
+      <p class="mt-4 text-lg font-medium">消息输入框</p>
+      <hr class="my-4" />
+      <el-input
+        v-model="sendText"
+        :autosize="{ minRows: 2, maxRows: 4 }"
+        :disabled="!getIsOpen"
+        clearable
+        placeholder="请输入你要发送的消息"
+        type="textarea"
+      />
+      <el-select v-model="sendUserId" class="mt-4" placeholder="请选择发送人">
+        <el-option key="" label="所有人" value="" />
+        <el-option
+          v-for="user in userList"
+          :key="user.id"
+          :label="user.nickname"
+          :value="user.id"
+        />
+      </el-select>
+      <el-button :disabled="!getIsOpen" block class="ml-2 mt-4" type="primary" @click="handlerSend">
+        发送
+      </el-button>
+    </el-card>
+    <!-- 右侧：消息记录 -->
+    <el-card :gutter="12" class="w-1/2" shadow="always">
+      <template #header>
+        <div class="card-header">
+          <span>消息记录</span>
+        </div>
+      </template>
+      <div class="max-h-80 overflow-auto">
+        <ul>
+          <li v-for="msg in messageReverseList" :key="msg.time" class="mt-2">
+            <div class="flex items-center">
+              <span class="text-primary mr-2 font-medium">收到消息:</span>
+              <span>{{ formatDate(msg.time) }}</span>
+            </div>
+            <div>
+              {{ msg.text }}
+            </div>
+          </li>
+        </ul>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import { useWebSocket } from '@vueuse/core'
+import { getRefreshToken } from '@/utils/auth'
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'InfraWebSocket' })
+
+const message = useMessage() // 消息弹窗
+
+const server = ref(
+  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
+    '?token=' +
+    getRefreshToken() // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
+) // WebSocket 服务地址
+const getIsOpen = computed(() => status.value === 'OPEN') // WebSocket 连接是否打开
+const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')) // WebSocket 连接的展示颜色
+
+/** 发起 WebSocket 连接 */
+const { status, data, send, close, open } = useWebSocket(server.value, {
+  autoReconnect: true,
+  heartbeat: true
+})
+
+/** 监听接收到的数据 */
+const messageList = ref([] as { time: number; text: string }[]) // 消息列表
+const messageReverseList = computed(() => messageList.value.slice().reverse())
+watchEffect(() => {
+  if (!data.value) {
+    return
+  }
+  try {
+    // 1. 收到心跳
+    if (data.value === 'pong') {
+      // state.recordList.push({
+      //   text: '【心跳】',
+      //   time: new Date().getTime()
+      // })
+      return
+    }
+
+    // 2.1 解析 type 消息类型
+    const jsonMessage = JSON.parse(data.value)
+    const type = jsonMessage.type
+    const content = JSON.parse(jsonMessage.content)
+    if (!type) {
+      message.error('未知的消息类型：' + data.value)
+      return
+    }
+    // 2.2 消息类型：demo-message-receive
+    if (type === 'demo-message-receive') {
+      const single = content.single
+      if (single) {
+        messageList.value.push({
+          text: `【单发】用户编号(${content.fromUserId})：${content.text}`,
+          time: new Date().getTime()
+        })
+      } else {
+        messageList.value.push({
+          text: `【群发】用户编号(${content.fromUserId})：${content.text}`,
+          time: new Date().getTime()
+        })
+      }
+      return
+    }
+    // 2.3 消息类型：notice-push
+    if (type === 'notice-push') {
+      messageList.value.push({
+        text: `【系统通知】：${content.title}`,
+        time: new Date().getTime()
+      })
+      return
+    }
+    message.error('未处理消息：' + data.value)
+  } catch (error) {
+    message.error('处理消息发生异常：' + data.value)
+    console.error(error)
+  }
+})
+
+/** 发送消息 */
+const sendText = ref('') // 发送内容
+const sendUserId = ref('') // 发送人
+const handlerSend = () => {
+  // 1.1 先 JSON 化 message 消息内容
+  const messageContent = JSON.stringify({
+    text: sendText.value,
+    toUserId: sendUserId.value
+  })
+  // 1.2 再 JSON 化整个消息
+  const jsonMessage = JSON.stringify({
+    type: 'demo-message-send',
+    content: messageContent
+  })
+  // 2. 最后发送消息
+  send(jsonMessage)
+  sendText.value = ''
+}
+
+/** 切换 websocket 连接状态 */
+const toggleConnectStatus = () => {
+  if (getIsOpen.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+/** 初始化 **/
+const userList = ref<any[]>([]) // 用户列表
+onMounted(async () => {
+  // 获取用户列表
+  userList.value = await UserApi.getSimpleUserList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/internationalsms/record/RecordDetail.vue b/marketing-ui/admin-ui/src/views/internationalsms/record/RecordDetail.vue
new file mode 100644
index 0000000..cf64120
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/internationalsms/record/RecordDetail.vue
@@ -0,0 +1,69 @@
+<template>
+  <Dialog v-model="dialogVisible" title="短信记录详情" width="1200">
+    <div class="detail-container" v-loading="detailListLoading">
+      <el-table :data="detailList" style="width: 100%" empty-text="暂无详情数据">
+        <el-table-column prop="id" label="详情ID" width="180" />
+        <el-table-column prop="sendStatus" label="发送状态" width="120">
+          <template #default="scope">
+            <el-tag v-if="scope.row.sendStatus === -1" type="warning">待发送</el-tag>
+            <el-tag v-else-if="scope.row.sendStatus === 0" type="success">已发送</el-tag>
+            <el-tag v-else-if="scope.row.sendStatus === 1" type="danger">发送失败</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="reportStatus" label="短信报告" width="120">
+          <template #default="scope">
+            <el-tag v-if="scope.row.reportStatus === 0" type="warning">待回执</el-tag>
+            <el-tag v-else-if="scope.row.reportStatus === 1" type="success">发送成功</el-tag>
+            <el-tag v-else-if="scope.row.reportStatus === 2" type="danger">发送失败</el-tag>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="channelCode" label="渠道编码" width="120" />
+        <el-table-column prop="channelAccountId" label="渠道账户ID" width="120" />
+        <el-table-column prop="msgid" label="三方短信ID" width="200" />
+        <el-table-column prop="errorMsg" label="错误信息" min-width="150" />
+        <el-table-column prop="price" label="消费金额" width="100" />
+      </el-table>
+    </div>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import request from '@/config/axios'
+
+/** 短信记录详情 */
+defineOptions({ name: 'RecordDetail' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailList = ref<any[]>([]) // 详情列表数据
+const detailListLoading = ref(false) // 详情列表加载状态
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  detailListLoading.value = true
+  try {
+    // 直接获取详情列表数据
+    const response = await request.get({
+      url: `/sms/record-detail/page`,
+      params: { recordId: id, pageNo: 1, pageSize: 100 } // 获取前100条记录
+    })
+    detailList.value = response.list || []
+  } catch (error) {
+    console.error('获取详情列表失败:', error)
+    detailList.value = []
+  } finally {
+    detailListLoading.value = false
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style scoped>
+.detail-container {
+  padding: 8px;
+}
+
+/* 移除重复的空数据提示样式 */
+</style>
diff --git a/marketing-ui/admin-ui/src/views/internationalsms/record/RecordForm.vue b/marketing-ui/admin-ui/src/views/internationalsms/record/RecordForm.vue
new file mode 100644
index 0000000..cb86edd
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/internationalsms/record/RecordForm.vue
@@ -0,0 +1,145 @@
+<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="mobile">
+        <el-input v-model="formData.mobile" placeholder="请输入手机号" />
+      </el-form-item>
+      <el-form-item label="国际电话区号" prop="nationcode">
+        <el-input v-model="formData.nationcode" placeholder="请输入国际电话区号如 86" />
+      </el-form-item>
+      <el-form-item label="应用编号" prop="appId">
+        <el-input v-model="formData.appId" placeholder="应用编号" />
+      </el-form-item>
+      <el-form-item label="短信类型" prop="recordType">
+        <el-select v-model="formData.recordType" placeholder="请选择0-验证码 1-短信通知 2-推广短信">
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="模版编号" prop="templateId">
+        <el-input v-model="formData.templateId" placeholder="请输入模版编号" />
+      </el-form-item>
+      <el-form-item label="模版参数" prop="templateParam">
+        <el-input v-model="formData.templateParam" placeholder="请输入模版参数" />
+      </el-form-item>
+      <el-form-item label="指定发送时间" prop="attime">
+        <el-date-picker
+          v-model="formData.attime"
+          type="date"
+          value-format="x"
+          placeholder="选择指定发送时间"
+        />
+      </el-form-item>
+      <el-form-item label="-1：待发送 / 0：已发送  /1  : 发送失败" prop="sendStatus">
+        <el-radio-group v-model="formData.sendStatus">
+          <el-radio value="1">请选择字典生成</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="发送IP" prop="senderIp">
+        <el-input v-model="formData.senderIp" placeholder="请输入发送IP" />
+      </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 { RecordApi, Record } from '@/api/domesticsms/record'
+
+/** 短信记录 表单 */
+defineOptions({ name: 'RecordForm' })
+
+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,
+  mobile: undefined,
+  nationcode: undefined,
+  appId: undefined,
+  recordType: undefined,
+  templateId: undefined,
+  templateParam: undefined,
+  attime: undefined,
+  sendStatus: undefined,
+  senderIp: undefined
+})
+const formRules = reactive({
+  mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
+  nationcode: [{ required: true, message: '国际电话区号如 86不能为空', trigger: 'blur' }],
+  templateId: [{ required: true, message: '模版编号不能为空', trigger: 'blur' }],
+  templateParam: [{ required: true, message: '模版参数不能为空', trigger: 'blur' }],
+  sendStatus: [{ required: true, message: '-1：待发送 / 0：已发送  /1  : 发送失败不能为空', 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 RecordApi.getRecord(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 Record
+    if (formType.value === 'create') {
+      await RecordApi.createRecord(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await RecordApi.updateRecord(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    mobile: undefined,
+    nationcode: undefined,
+    appId: undefined,
+    recordType: undefined,
+    templateId: undefined,
+    templateParam: undefined,
+    attime: undefined,
+    sendStatus: undefined,
+    senderIp: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/internationalsms/record/index.vue b/marketing-ui/admin-ui/src/views/internationalsms/record/index.vue
new file mode 100644
index 0000000..79d245b
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/internationalsms/record/index.vue
@@ -0,0 +1,306 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <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="应用ID" prop="appId">
+        <el-input
+          v-model="queryParams.appId"
+          placeholder=""
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="任务ID" prop="taskId">
+        <el-input
+          v-model="queryParams.taskId"
+          placeholder=""
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="短信类型" prop="recordType">
+        <el-select
+          v-model="queryParams.recordType"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="验证码" value="0" />
+          <el-option label="短信通知" value="1" />
+          <el-option label="推广短信" value="2" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="发送状态" prop="sendStatus">
+        <el-select
+          v-model="queryParams.sendStatus"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="待发送" value="0" />
+          <el-option label="发送成功" value="1" />
+          <el-option label="发送失败" value="2" />
+          <el-option label="手动终止" value="3" />
+        </el-select>
+      </el-form-item>
+
+
+      <el-form-item label="模版编号" prop="templateId">
+        <el-input
+          v-model="queryParams.templateId"
+          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-220px"
+        />
+      </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
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" />
+      <el-table-column label="ID" align="center" prop="id"  width="180px"/>
+      <el-table-column label="手机号" align="center" prop="mobile"  width="120px"/>
+      <el-table-column label="国际区号" align="center" prop="nationcode"  width="100px"/>
+      <el-table-column label="appId" align="center" prop="appId" width="80px"/>
+
+      <el-table-column label="内容" align="center" prop="content" width="460px" />
+
+      <el-table-column label="发送状态" align="center" prop="sendStatus">
+        <template #default="{ row }">
+          <el-tag v-if="row.sendStatus == 0" type="warning">待发送</el-tag>
+          <el-tag v-else-if="row.sendStatus == 1" type="success">发送成功</el-tag>
+          <el-tag v-else-if="row.sendStatus == 2" type="danger">发送失败</el-tag>
+          <el-tag v-else-if="row.sendStatus == 3" type="info">手动终止</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="130px"
+      />
+
+      <el-table-column label="操作" align="center" min-width="100px">
+
+        <template #default="scope">
+
+          <el-button
+            link
+            type="primary"
+            @click="openDetail(scope.row.id)"
+            v-hasPermi="['sms:record:update']"
+          >
+            详情
+          </el-button>
+
+        </template>
+
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <RecordForm ref="formRef" @success="getList" />
+
+  <!-- 表单弹窗：详情 -->
+  <RecordDetail ref="detailRef" />
+
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { RecordApi } from '@/api/domesticsms/record'
+import RecordForm from './RecordForm.vue'
+import RecordDetail from './RecordDetail.vue'
+
+/** 短信记录 列表 */
+defineOptions({ name: 'Record' })
+
+const detailRef = ref()
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const { query } = useRoute() // 查询参数
+
+const loading = ref(true) // 列表的加载中
+const list = ref<any[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  taskId: typeof query.taskId === 'string' ? query.taskId : undefined,
+  mobile: undefined,
+  nationcode: undefined,
+  international: 1,
+  appId: undefined,
+  recordType: undefined,
+  templateId: undefined,
+  templateParam: undefined,
+  senderIp: undefined,
+  createTime: [],
+  sendStatus: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await RecordApi.getRecordPage(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 RecordApi.deleteRecord(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除短信记录 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await RecordApi.deleteRecordList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: any[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await RecordApi.exportRecord(queryParams)
+    download.excel(data, '短信记录.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+const getTypeLabel = (type: string | number) => {
+  const typeMap: Record<string, string> = {
+    0: '验证码',
+    1: '短信通知',
+    2: '推广短信'
+  }
+  return typeMap[type] || '未知'
+}
+
+const getTypeTagType = (type: string | number) => {
+  const typeMap: Record<string, string> = {
+    0: 'success',
+    1: 'primary',
+    2: 'danger'
+  }
+  return typeMap[type] || 'info'
+}
+
+const openDetail = (id: number) => {
+  detailRef.value.open(id)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/internationalsms/sendtask/SmsTaskForm.vue b/marketing-ui/admin-ui/src/views/internationalsms/sendtask/SmsTaskForm.vue
new file mode 100644
index 0000000..9154f13
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/internationalsms/sendtask/SmsTaskForm.vue
@@ -0,0 +1,593 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="title"
+    width="700px"
+    destroy-on-close
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="80px"
+    >
+      <el-form-item label="任务名称" prop="taskName">
+        <el-input
+          v-model="formData.taskName"
+          placeholder="请输入任务名称"
+          maxlength="30"
+          show-word-limit
+        />
+      </el-form-item>
+
+      <el-form-item label="短信签名" prop="signId">
+        <el-select
+          v-model="formData.signId"
+          placeholder="请选择短信签名"
+          :loading="signLoading"
+          filterable
+          remote
+          default-first-option
+          :remote-method="handleRemoteQuery"
+          @visible-change="handleSignVisibleChange"
+          @change="handleSignChange"
+        >
+          <el-option v-for="sign in signOptions" :key="sign.id" :label="sign.signName" :value="sign.id" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="短信模板" prop="templateId">
+        <el-select
+          v-model="formData.templateId"
+          placeholder="请选择短信模板"
+          filterable
+          remote
+          :remote-method="handleTemplateRemoteQuery"
+          @change="onTemplateChange"
+        >
+          <el-option v-for="template in templateList" :key="template.id" :label="template.templateName" :value="template.id" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="接收方式" prop="receiveType">
+        <el-radio-group v-model="formData.receiveType" @change="onReceiveTypeChange">
+          <el-radio label="0">手动输入</el-radio>
+          <el-radio label="1">文件导入</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <!-- 手动输入手机号 -->
+      <el-form-item v-if="formData.receiveType === '0'" label="手机号" prop="mobiles">
+        <el-input
+          v-model="formData.mobiles"
+          placeholder="使用回车键换行，一行视为一个号码，最多可输入100个"
+          type="textarea"
+          :rows="4"
+          :disabled="formData.hasDynamicParams"
+        />
+        <div class="text-xs text-gray-500 mt-2">
+          已输入 {{ mobileCount }} 个手机号
+        </div>
+        <div v-if="formData.hasDynamicParams" class="text-xs text-red-500 mt-1">
+          当前模板包含动态参数，不支持手工输入手机号，请使用文件导入方式
+        </div>
+      </el-form-item>
+
+      <el-form-item v-if="formData.receiveType === '1'" label="文件上传" prop="file">
+        <el-upload
+          ref="uploadRef"
+          v-model:file-list="fileList"
+          accept=".xlsx,.xls"
+          :auto-upload="false"
+          :on-change="handleFileChange"
+          :on-remove="handleFileRemove"
+          class="upload-demo"
+          :limit="1"
+        >
+          <el-button type="primary">选择文件</el-button>
+          <template #tip>
+            <div class="el-upload__tip text-xs text-gray-500">
+              支持格式：xlsx、xls，文件大小不超过10MB,最多支持100000条数据
+              <a href="javascript:void(0)" @click="downloadSampleFile" class="text-blue-500 ml-2">
+                下载示例文件
+              </a>
+            </div>
+          </template>
+        </el-upload>
+      </el-form-item>
+
+      <el-form-item label="定时发送" prop="sendTime">
+        <el-switch
+          v-model="formData.isTiming"
+          @change="onTimingChange"
+        />
+        <el-date-picker
+          v-if="formData.isTiming"
+          v-model="formData.sendTime"
+          type="datetime"
+          placeholder="选择发送时间"
+          class="ml-4"
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="formData.remark"
+          placeholder="请输入备注信息"
+          maxlength="200"
+          show-word-limit
+        />
+      </el-form-item>
+
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { TemplateInfoApi } from '@/api/domesticsms/templateinfo';
+import {SignInfoApi} from "@/api/domesticsms/signinfo"
+import { SmsTaskApi } from '@/api/domesticsms/sendtask';
+import { ref, reactive, computed, watch } from 'vue'
+import { ElForm, ElMessage } from 'element-plus'
+
+// 定义接口类型
+interface SendTaskFormData {
+  id?: number
+  taskName: string
+  signName: string
+  signId?: number
+  templateId?: number
+  content: string
+  receiveType: string
+  mobiles: string
+  file?: File
+  isTiming: boolean
+  sendTime?: string
+  remark: string
+  hasDynamicParams: boolean
+}
+
+// 短信模板信息
+interface TemplateInfo {
+  id: number;
+  templateName: string;
+  templateContent: string;
+}
+
+const emit = defineEmits(['success'])
+
+const visible = ref(false)
+const title = ref('新增短信发送任务')
+const formRef = ref<InstanceType<typeof ElForm>>()
+const uploadRef = ref()
+const fileList = ref<any[]>([])
+const importResult = ref<any>(null)
+
+const formData = reactive<SendTaskFormData>({
+  id: undefined,
+  taskName: '',
+  signName: '',
+  signId: undefined,
+  templateId: undefined,
+  content: '',
+  receiveType: '0',
+  mobiles: '',
+  file: undefined,
+  isTiming: false,
+  sendTime: undefined,
+  remark: '',
+  hasDynamicParams: false
+})
+
+const templateList = ref<TemplateInfo[]>([])
+
+// 手机号数量计算
+const mobileCount = computed(() => {
+  if (!formData.mobiles) return 0
+  return formData.mobiles.split('\n').filter(mobile => mobile.trim()).length
+})
+
+// 判断模板是否包含动态参数的函数
+function checkHasDynamicParams(content: string): boolean {
+  return /\$\{[^}]+\}/g.test(content)
+}
+
+// 表单验证规则
+const rules = reactive({
+  taskName: [
+    { required: true, message: '请输入任务名称', trigger: 'blur' }
+  ],
+  signId: [
+    { required: true, message: '请选择短信签名', trigger: 'change' }
+  ],
+  templateId: [
+    { required: true, message: '请选择短信模板', trigger: 'change' }
+  ],
+  sendTime: [
+    {
+      validator: (rule: any, value: string, callback: any) => {
+        if (formData.isTiming) {
+          if (!value) {
+            callback(new Error('请选择定时发送时间'))
+            return
+          }
+          const selectedTime = new Date(value).getTime()
+          const currentTime = new Date().getTime()
+          if (selectedTime <= currentTime) {
+            callback(new Error('定时发送时间必须大于当前时间'))
+            return
+          }
+        }
+        callback()
+      },
+      trigger: ['blur', 'change']
+    }
+  ],
+  mobiles: [
+        {
+          validator: (rule: any, value: string, callback: any) => {
+            if (formData.receiveType === '0') {
+              if (!value) {
+                callback(new Error('请输入手机号'))
+                return
+              }
+              const mobiles = value.split('\n').filter(mobile => mobile.trim())
+              if (mobiles.length > 100) {
+                callback(new Error('最多支持100个手机号'))
+                return
+              }
+            }
+            callback()
+          },
+          trigger: ['blur', 'change']
+        }
+      ],
+  file: [
+    {
+      validator: (rule: any, value: File | undefined, callback: any) => {
+        if (formData.receiveType === '1') {
+          if (!value) {
+            callback(new Error('请选择上传文件'))
+            return
+          }
+          // 检查文件格式，只允许Excel文件
+          const fileName = value.name.toLowerCase();
+          if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
+            callback(new Error('仅支持Excel格式文件(.xlsx, .xls)'))
+            return
+          }
+          if (value.size > 10 * 1024 * 1024) {
+            callback(new Error('文件大小不能超过10MB'))
+            return
+          }
+        }
+        callback()
+      },
+      trigger: 'change'
+    }
+  ]
+})
+
+// 手机号验证
+function validateMobiles(rule: any, value: string, callback: any) {
+  if (!value) {
+    callback(new Error('请输入手机号'))
+    return
+  }
+  const mobiles = value.split('\n').filter(mobile => mobile.trim())
+  if (mobiles.length > 100) {
+    callback(new Error('最多支持100个手机号'))
+    return
+  }
+  callback()
+}
+
+// 打开表单
+const open = async (type: string, id?: number) => {
+  // 重置表单
+  resetForm()
+
+  title.value = '新增短信发送任务'
+
+  // 加载基础数据
+  await loadBaseData()
+
+  visible.value = true
+}
+
+// 加载模板列表
+const loadTemplateList = async (templateName?: string) => {
+  if (!formData.signId) {
+    return false;
+  }
+  try {
+    const params = {
+      pageNum: 1,
+      pageSize: 100, // 设置较大的页面大小获取足够的模板
+      signId: formData.signId,
+      templateName: templateName || ''
+    }
+    const templateData = await TemplateInfoApi.getTemplateInfoPage(params)
+    templateList.value = templateData.list || []
+  } catch (error) {
+    console.error('获取模板列表失败:', error)
+    ElMessage.error('获取模板列表失败')
+  }
+}
+
+// 处理签名变更
+const handleSignChange = async (signId: number) => {
+  // 找到对应的签名信息
+  const selectedSign = signOptions.value.find(sign => sign.id === signId)
+  if (selectedSign) {
+    formData.signName = selectedSign.signName
+  }
+
+  // 清空之前选择的模板
+  formData.templateId = undefined
+  formData.signId = signId
+  formData.content = ''
+
+  // 加载对应的模板列表
+  await loadTemplateList()
+}
+
+// 处理模板远程搜索
+const handleTemplateRemoteQuery = async (query: string) => {
+  await loadTemplateList(query)
+}
+
+// 加载基础数据
+const loadBaseData = async () => {
+  try {
+    // 调用 fetchSignList 获取签名列表
+    await fetchSignList('')
+  } catch (error) {
+    ElMessage.error('加载基础数据失败')
+  }
+}
+
+// 模板变更事件
+const onTemplateChange = async (templateId: number | undefined) => {
+  if (templateId === undefined || templateId === null) return
+  try {
+    // 重新加载模板列表，确保数据是最新的
+    await loadTemplateList()
+    // 从更新后的模板列表中查找当前选中的模板
+    const template = templateList.value.find(t => t.id === templateId)
+    if (template) {
+      formData.content = template.content
+    }
+    console.log('template.content', formData.content)
+    // 主动调用检查函数，确保及时更新动态参数状态
+    formData.hasDynamicParams = checkHasDynamicParams(formData.content)
+    console.log('formData.hasDynamicParams:', formData.hasDynamicParams)
+  } catch (error) {
+    ElMessage.error('获取模板内容失败')
+  }
+}
+
+// 接收方式变更事件
+const onReceiveTypeChange = () => {
+  // 清空其他方式的数据
+  if (formData.receiveType === '0') {
+    fileList.value = []
+  } else if (formData.receiveType === '1') {
+    formData.mobiles = ''
+  }
+}
+
+// 定时发送切换事件
+const onTimingChange = () => {
+  if (!formData.isTiming) {
+    formData.sendTime = undefined
+  }
+}
+
+// 导入request对象
+import request from '@/config/axios'
+import download from '@/utils/download'
+
+// 下载示例文件
+    const downloadSampleFile = async () => {
+      try {
+        // 使用request.download方法下载文件，自动处理权限验证
+        const response = await request.download({
+          url: '/record/sms-task/downloadDemo'
+        });
+
+        // 使用download工具处理文件下载 - 直接使用response，因为download方法返回整个响应对象
+        download.excel(response, '示例.xlsx');
+      } catch (error) {
+        console.error('下载示例文件失败:', error);
+        // 不需要额外的错误提示，因为request拦截器已经会处理权限不通过等情况
+      }
+    }
+
+// 文件变更事件
+const handleFileChange = (file: any) => {
+  // 检查文件大小
+  if (file.size > 10 * 1024 * 1024) {
+    ElMessage.error('文件大小不能超过10MB')
+    fileList.value = []
+    formData.file = undefined
+    return
+  }
+
+  // 检查文件类型
+  const fileType = file.name.substring(file.name.lastIndexOf('.'))
+  const allowedTypes = ['.xlsx', '.xls']
+  if (!allowedTypes.includes(fileType.toLowerCase())) {
+    ElMessage.error('仅支持 xlsx、xls 格式的文件')
+    fileList.value = []
+    formData.file = undefined
+    return
+  }
+
+  formData.file = file.raw
+}
+
+
+
+// 文件移除事件
+const handleFileRemove = () => {
+  formData.file = undefined
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.id = undefined
+  formData.taskName = ''
+  formData.signName = ''
+  formData.signId = undefined
+  formData.templateId = undefined
+  formData.content = ''
+  formData.receiveType = '0'
+  formData.mobiles = ''
+  formData.file = undefined
+  formData.isTiming = false
+  formData.sendTime = undefined
+  formData.remark = ''
+  formData.hasDynamicParams = undefined
+
+  fileList.value = []
+
+  importResult.value = null
+
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+
+// 取消操作
+const handleCancel = () => {
+  visible.value = false
+  resetForm()
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+
+  try {
+    await formRef.value.validate()
+
+    // 根据接收方式选择不同的提交逻辑
+    if (formData.receiveType === '0') {
+      // 手动输入方式 - 确保符合 SmsTask 接口定义
+      // 将换行分隔的手机号转换为逗号分隔的格式
+      const formattedPhoneNumbers = formData.mobiles.split('\n')
+        .filter(mobile => mobile.trim())
+        .join(',')
+
+      const submitData: any = {
+        id: formData.id || 0,
+        taskName: formData.taskName,
+        signName: formData.signName,
+        signId: formData.signId,
+        templateId: formData.templateId,
+        templateName: '',
+        templateContent: formData.content,
+        phoneNumbers: formattedPhoneNumbers,
+        // 只有在明确开启定时发送并设置了时间时才提交定时时间，并转换为时间戳
+        attime: formData.isTiming && formData.sendTime ? new Date(formData.sendTime).getTime() : undefined,
+        remark: formData.remark
+      }
+
+      await SmsTaskApi.createSmsTask(submitData)
+    } else if (formData.receiveType === '1' && formData.file) {
+      // 文件导入方式
+      const formDataObj = new FormData()
+      formDataObj.append('file', formData.file)
+      formDataObj.append('appId', '1164') // 这里可能需要从全局配置中获取
+      formDataObj.append('taskName', formData.taskName)
+      formDataObj.append('signId', formData.signId?.toString() || '')
+      formDataObj.append('signName', formData.signName)
+      formDataObj.append('templateId', formData.templateId?.toString() || '')
+      formDataObj.append('templateName', '') // 这里可能需要从模板列表中获取
+      formDataObj.append('templateContent', formData.content)
+      if (formData.isTiming && formData.sendTime) {
+        // 转换为时间戳
+        const timestamp = new Date(formData.sendTime).getTime()
+        formDataObj.append('attime', timestamp.toString())
+      }
+      if (formData.remark) {
+        formDataObj.append('remark', formData.remark)
+      }
+
+      await SmsTaskApi.createSmsTaskByFile(formDataObj)
+    }
+
+    ElMessage.success('操作成功')
+    visible.value = false
+    emit('success')
+  } catch (error) {
+    ElMessage.error('操作失败')
+    console.error('提交表单失败:', error)
+  }
+}
+
+// 签名选择相关
+const signOptions = ref<Array<{ id: number, signName: string }>>([])
+const signLoading = ref(false)
+
+// 调用 signApi 的 page 接口获取签名列表
+const fetchSignList = async (signName?: string) => {
+  signLoading.value = true
+  try {
+    // 构建查询参数，包含可选的 signName
+    const params = {
+      pageNum: 1,
+      pageSize: 10, // 设置适当的页面大小
+      signName: signName || '',
+      international: 1 // 国际短信
+    }
+    // 使用 getSignInfoPage 接口获取签名列表
+    const res = await SignInfoApi.getSignInfoPage(params)
+    signOptions.value = res.list || []
+  } catch (error) {
+    console.error('获取签名列表失败:', error)
+    ElMessage.error('获取签名列表失败')
+  } finally {
+    signLoading.value = false
+  }
+}
+
+// 处理签名选择框显示状态变化
+const handleSignVisibleChange = async (visible: boolean) => {
+  if (visible) {
+    // 当签名选择框显示时，获取签名列表
+    await fetchSignList()
+  }
+}
+
+// 处理远程搜索
+const handleRemoteQuery = async (query: string) => {
+  if (query !== undefined) {
+    await fetchSignList(query)
+  }
+}
+
+
+
+// 暴露方法
+defineExpose({
+  open
+})
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/internationalsms/sendtask/index.vue b/marketing-ui/admin-ui/src/views/internationalsms/sendtask/index.vue
new file mode 100644
index 0000000..7673f75
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/internationalsms/sendtask/index.vue
@@ -0,0 +1,367 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="应用编号" prop="appId">
+        <el-input
+          v-model="queryParams.appId"
+          placeholder="请输入应用编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="短信签名" prop="signName">
+        <el-input
+          v-model="queryParams.signName"
+          placeholder="请输入短信签名"
+          clearable
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="任务状态" prop="taskStatus">
+        <el-select
+          v-model="queryParams.taskStatus"
+          placeholder="请选择发送状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="待发送" value="0" />
+          <el-option label="发送中" value="1" />
+          <el-option label="发送完毕" value="2" />
+          <el-option label="手动终止" value="3" />
+          <el-option label="已暂停" value="4" />
+          <el-option label="已终止" value="5" />
+        </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-220px"
+        />
+      </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="['record:sms-task:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" />
+      <el-table-column label="任务编号" align="center" prop="id" width="155"  />
+
+      <el-table-column label="任务名称" align="center" prop="taskName" />
+
+      <el-table-column label="签名" align="center" prop="signName" />
+
+      <el-table-column label="模版名称" align="center" prop="templateName" />
+
+      <el-table-column label="进度" align="center" prop="totalCount" min-width="120px">
+        <template #default="{ row }">
+          {{ getProcessedCount(row.id) }} / {{ row.totalCount }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="任务状态" align="center" prop="sendStatus">
+        <template #default="{ row }">
+          <el-tag v-if="row.taskStatus == 0" type="warning">待发送</el-tag>
+          <el-tag v-else-if="row.taskStatus == 1" type="primary">发送中</el-tag>
+          <el-tag v-else-if="row.taskStatus == 2" type="success">发送完毕</el-tag>
+          <el-tag v-else-if="row.taskStatus == 3" type="danger">手动终止</el-tag>
+          <el-tag v-else-if="row.taskStatus == 4" type="info">已暂停</el-tag>
+          <el-tag v-else-if="row.taskStatus == 5" type="danger">已终止</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="定时时间" align="center" prop="attime" :formatter="dateFormatter" width="155"/>
+
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+
+      <el-table-column label="操作" align="center" min-width="180px">
+
+        <template #default="{ row }">
+          <el-button
+            type="primary"
+            size="small"
+            link
+            @click="handleDetail(row.id)"
+            v-hasPermi="['record:sms-task:query']"
+          >
+             详情
+          </el-button>
+          <!-- 暂停：仅待发送(0)或发送中(1)可操作 -->
+          <el-button
+            v-if="row.taskStatus === 0 || row.taskStatus === 1"
+            type="warning"
+            size="small"
+            link
+            @click="handlePause(row.id)"
+            v-hasPermi="['record:sms-task:update']"
+          >
+            暂停
+          </el-button>
+          <!-- 恢复：仅已暂停(4)可操作 -->
+          <el-button
+            v-if="row.taskStatus === 4"
+            type="success"
+            size="small"
+            link
+            @click="handleResume(row.id)"
+            v-hasPermi="['record:sms-task:update']"
+          >
+            恢复
+          </el-button>
+          <!-- 终止：仅已暂停(4)可操作 -->
+          <el-button
+            v-if="row.taskStatus === 4"
+            type="danger"
+            size="small"
+            link
+            @click="handleTerminate(row.id)"
+            v-hasPermi="['record:sms-task:update']"
+          >
+            终止
+          </el-button>
+        </template>
+
+      </el-table-column>
+
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <SmsTaskForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter, attimeFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { SmsTaskApi, SmsTask } from '@/api/domesticsms/sendtask'
+import { RecordApi } from '@/api/domesticsms/record'
+import SmsTaskForm from './SmsTaskForm.vue'
+const { push } = useRouter() // 路由
+
+/** 短信任务 列表 */
+defineOptions({ name: 'SmsTask' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<SmsTask[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const recordCounts = ref<Record<string, number>>({}) // 从 sms_record 表实时查询的已处理数量
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  appId: undefined,
+  taskName: undefined,
+  signId: undefined,
+  signName: undefined,
+  templateId: undefined,
+  templateName: undefined,
+  templateContent: undefined,
+  totalCount: undefined,
+  international: 1,
+  successCount: undefined,
+  failCount: undefined,
+  taskStatus: undefined,
+  attime: [],
+  remark: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await SmsTaskApi.getSmsTaskPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+    // 从 sms_record 表实时查询已处理数量
+    await loadRecordCounts()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 从 sms_record 表实时查询各任务的已处理数量 */
+const loadRecordCounts = async () => {
+  const taskIds = list.value.map((item) => item.id).filter(Boolean)
+  if (taskIds.length === 0) return
+  try {
+    const counts = await RecordApi.countByTaskIds(taskIds)
+    const map: Record<string, number> = {}
+    for (const item of counts) {
+      const taskId = String(item.taskId)
+      map[taskId] = (map[taskId] || 0) + Number(item.count)
+    }
+    recordCounts.value = map
+  } catch (e) {
+    console.error('查询记录计数失败', e)
+  }
+}
+
+/** 获取任务已处理数量 */
+const getProcessedCount = (taskId: number) => {
+  return recordCounts.value[String(taskId)] || 0
+}
+
+/** 搜索按钮操作 */
+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 SmsTaskApi.deleteSmsTask(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除短信任务 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await SmsTaskApi.deleteSmsTaskList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: SmsTask[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await SmsTaskApi.exportSmsTask(queryParams)
+    download.excel(data, '短信任务.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 暂停任务 */
+const handlePause = async (id: number) => {
+  try {
+    await message.confirm('确认要暂停该任务的发送吗？暂停后已入队的消息也将停止发送。')
+    await SmsTaskApi.pauseSmsTask(id)
+    message.success('暂停成功')
+    await getList()
+  } catch {}
+}
+
+/** 恢复任务 */
+const handleResume = async (id: number) => {
+  try {
+    await message.confirm('确认要恢复该任务的发送吗？未发送的消息将继续发送。')
+    await SmsTaskApi.resumeSmsTask(id)
+    message.success('恢复成功')
+    await getList()
+  } catch {}
+}
+
+/** 终止任务 */
+const handleTerminate = async (id: number) => {
+  try {
+    await message.confirm('确认要终止该任务吗？已发送的记录将保留，未发送的记录将标记为"已终止"。此操作不可撤销！')
+    await SmsTaskApi.terminateSmsTask(id)
+    message.success('终止成功')
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+
+/** 详情按钮操作 此处需要调用 npm run dev 重新启动 */
+const handleDetail =  (id: number) => {
+  if (id && id > 0) {
+    push( '/internationalsms/record?taskId=' + id)
+  } else {
+    push( '/internationalsms/record')
+  }
+}
+
+</script>
diff --git a/marketing-ui/admin-ui/src/views/internationalsms/signinfo/SignInfoForm.vue b/marketing-ui/admin-ui/src/views/internationalsms/signinfo/SignInfoForm.vue
new file mode 100644
index 0000000..c242a83
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/internationalsms/signinfo/SignInfoForm.vue
@@ -0,0 +1,204 @@
+<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="signName">
+        <el-input v-model="formData.signName" placeholder="请输入签名名称" :disabled="formType === 'update'"/>
+      </el-form-item>
+
+      <el-form-item label="租户" prop="tenantId" v-if="formType === 'create'">
+        <el-select v-model="formData.tenantId" filterable clearable
+                   remote
+                   :remote-method="searchTenants"
+                   placeholder="请输入租户名称搜索"
+        >
+          <el-option
+            v-for="tenant in tenantList"
+            :key="tenant.id"
+            :label="tenant.tenantUserName"
+            :value="tenant.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="租户" v-else>
+        <el-input v-model="formData.tenantUserName" disabled />
+      </el-form-item>
+
+      <el-form-item label="签名类型" prop="signType">
+        <el-select
+          v-model="formData.signType"
+          placeholder="请选择签名类型"
+          clearable
+        >
+          <el-option label="全部" value="" />
+          <el-option label="企业" :value="0" />
+          <el-option label="APP/网站" :value="1" />
+          <el-option label="商标" :value="2" />
+          <el-option label="政府/事业单位" :value="3" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="绑定渠道账号" prop="bindingAccountIds">
+        <el-select
+          v-model="formData.bindingAccountIds"
+          multiple
+          placeholder="请选择渠道账号"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in accountOptions"
+            :key="item.id"
+            :label="item.accountName"
+            :value="item.id"
+            :disabled="formType === 'update' && (formData.bindingAccountIds || []).includes(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="备注说明" prop="remark">
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入备注说明"
+          maxlength="200"
+          show-word-limit
+        />
+      </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 { SignInfoApi, SignInfo } from '@/api/domesticsms/signinfo'
+import {ChannelAccountApi} from "@/api/smschannel/channelaccount";
+import {Tenant, TenantApi} from "@/api/tenant";
+
+/** 短信签名信息 表单 */
+defineOptions({ name: 'SignInfoForm' })
+
+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,
+  signName: undefined,
+  tenantId:undefined ,
+  tenantUserName:undefined ,
+  signType: undefined,
+  bindingAccountIds: undefined,
+  international: 1,
+  remark: undefined
+})
+
+let tenantList = ref<Tenant[]>([])
+
+const tenantInfo = ref({
+  id: undefined,
+  tenantUserName: undefined
+})
+
+const formRules = reactive({
+  signName: [{ required: true, message: '签名名称不能为空', trigger: 'blur' }],
+  tenantId: [{ required: true, message: '租户不能为空', trigger: 'blur' }],
+  signType: [{ required: true, message: '签名类型：0-企业，1-APP，2-商标，3-政府/事业单位/其他企业不能为空', 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()
+
+  loadAccounts()
+
+  // 先获取租户列表数据
+  var tenantPageObj = await TenantApi.getTenantPage({
+    pageNo: 1,
+    pageSize: 10
+  })
+  tenantList.value = tenantPageObj.list
+
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await SignInfoApi.getSignInfo(id)
+    } finally {
+      formLoading.value = false
+    }
+
+    // 查询租户信息
+    tenantInfo.value = await TenantApi.getTenant(formData.value.tenantId)
+    formData.value.tenantUserName = tenantInfo.value.tenantUserName
+
+  }
+}
+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 SignInfo
+    if (formType.value === 'create') {
+      await SignInfoApi.createSignInfo(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await SignInfoApi.updateSignInfo(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    tenantId: undefined,
+    signName: undefined,
+    signType: undefined,
+    bindingAccountIds: undefined,
+    international: 1,
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+const accountOptions = ref([])
+
+// 加载账号列表
+const loadAccounts = async () => {
+  accountOptions.value =  await ChannelAccountApi.getChannelAccountList()
+  console.log(accountOptions.value)
+}
+
+
+</script>
diff --git a/marketing-ui/admin-ui/src/views/internationalsms/signinfo/index.vue b/marketing-ui/admin-ui/src/views/internationalsms/signinfo/index.vue
new file mode 100644
index 0000000..4e8fe75
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/internationalsms/signinfo/index.vue
@@ -0,0 +1,246 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="签名名称" prop="signName">
+        <el-input
+          v-model="queryParams.signName"
+          placeholder="请输入签名名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="签名类型" prop="signType">
+        <el-select
+          v-model="queryParams.signType"
+          placeholder="请选择签名类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="企业" :value="0" />
+          <el-option label="APP/网站" :value="1" />
+          <el-option label="商标" :value="2" />
+          <el-option label="政府/事业单位" :value="3" />
+        </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"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['sms:sign-info:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" />
+      <el-table-column label="主键ID" align="center" prop="id" width="75"/>
+      <el-table-column label="签名" align="center" prop="signName" />
+
+      <el-table-column label="签名类型" align="center" prop="signType">
+        <template #default="{ row }">
+          {{ signTypeFormatter(row.signType) }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="绑定渠道账号" align="center" prop="bindingAccountNames">
+        <template #default="{ row }">
+          <el-tag
+            v-for="name in row.bindingAccountNames"
+            :key="name"
+            size="small"
+            class="mr-5px mb-5px"
+          >
+            {{ name }} <br/>
+          </el-tag>
+          <span v-if="!row.bindingAccountNames?.length">-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['sms:sign-info:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['sms:sign-info: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <SignInfoForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { SignInfoApi, SignInfo } from '@/api/domesticsms/signinfo'
+import SignInfoForm from './SignInfoForm.vue'
+
+/** 短信签名信息 列表 */
+defineOptions({ name: 'SignInfo' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<SignInfo[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  signName: undefined,
+  signType: undefined,
+  bindingAccountIds: undefined,
+  international: 1,
+  remark: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await SignInfoApi.getSignInfoPage(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 SignInfoApi.deleteSignInfo(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除短信签名信息 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await SignInfoApi.deleteSignInfoList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: SignInfo[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await SignInfoApi.exportSignInfo(queryParams)
+    download.excel(data, '短信签名信息.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+enum SignType {
+  ENTERPRISE = 0,
+  APP = 1,
+  TRADEMARK = 2,
+  GOVERNMENT = 3
+}
+
+const SIGN_TYPE_OPTIONS = [
+  { value: SignType.ENTERPRISE, label: '企业' },
+  { value: SignType.APP, label: 'APP/网站' },
+  { value: SignType.TRADEMARK, label: '商标' },
+  { value: SignType.GOVERNMENT, label: '政府/事业单位' }
+]
+
+// 格式化方法改为
+const signTypeFormatter = (type: SignType) => {
+  const found = SIGN_TYPE_OPTIONS.find(opt => opt.value === type)
+  return found?.label || '未知类型'
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/TemplateInfoForm.vue b/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/TemplateInfoForm.vue
new file mode 100644
index 0000000..89610da
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/TemplateInfoForm.vue
@@ -0,0 +1,219 @@
+<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="signId">
+        <el-select
+          v-model="formData.signId"
+          placeholder="请选择签名"
+          clearable
+          filterable
+          :loading="signLoading"
+          @visible-change="fetchSignList"
+          :disabled="formType === 'update'"
+        >
+          <el-option
+            v-for="item in signOptions"
+            :key="item.id"
+            :label="item.signName"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="模板类型" prop="templateType">
+        <el-select
+          v-model="formData.templateType"
+          placeholder="请选择模板类型"
+          clearable
+          :disabled="formType === 'update'"
+        >
+          <el-option label="验证码" :value="0"/>
+          <el-option label="短信通知" :value="1"/>
+          <el-option label="推广短信" :value="2"/>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="模板名称" prop="templateName">
+        <el-input v-model="formData.templateName" placeholder="请输入模板名称"/>
+      </el-form-item>
+
+      <el-form-item label="模板内容" prop="content">
+        <el-input
+          v-model="formData.content"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入模板内容"
+          resize="none"
+          show-word-limit
+          maxlength="200"
+        />
+        <el-alert
+          title=""
+          type="info"
+          :closable="false"
+          style="margin-top: 8px;"
+        >
+          <template #default>
+            <div style="font-size: 12px; line-height: 1.5;">
+              <p><strong>变量限制：</strong> 阿里云验证码类型仅支持1个变量,腾讯云支持多个变量；4~6位仅数字、数字+字母组合或仅字母2种类型。 </p>
+              <p><strong>变量格式：</strong> 您的验证码为 ${code}，该验证码5分钟内有效，请勿泄露于他人。</p>
+            </div>
+          </template>
+        </el-alert>
+      </el-form-item>
+
+      <el-form-item label="状态" prop="switchOpen">
+        <el-switch
+          v-model="formData.switchOpen"
+          :active-value="1"
+          :inactive-value="0"
+        />
+      </el-form-item>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入备注"
+          resize="none"
+          show-word-limit
+          maxlength="200"
+        />
+      </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 {TemplateInfoApi, TemplateInfo} from '@/api/domesticsms/templateinfo'
+import {SignInfoApi} from "@/api/domesticsms/signinfo";
+
+/** 短信模板信息 表单 */
+defineOptions({name: 'TemplateInfoForm'})
+
+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,
+  templateName: undefined,
+  content: undefined,
+  signId: undefined,
+  signName: undefined,
+  templateType: undefined,
+  international: 1,
+  switchOpen: 1, // 默认设置为 1（开启状态）
+  remark: undefined
+})
+const formRules = reactive({
+  templateName: [{required: true, message: '模板名称不能为空', trigger: 'blur'}],
+  content: [{required: true, message: '模板内容不能为空', trigger: 'blur'}],
+  signId: [{required: true, message: '签名ID不能为空', trigger: 'blur'}],
+  signName: [{required: true, message: '签名名称不能为空', trigger: 'blur'}],
+  remark: [{required: true, message: '备注不能为空', trigger: 'blur'}],
+  templateType: [{required: true, message: '模板类型不能为空', trigger: 'change'}],
+  switchOpen: [{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()
+
+  // 清空签名选项，确保每次打开弹窗都重新查询
+  signOptions.value = []
+  fetchSignList(true);
+
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await TemplateInfoApi.getTemplateInfo(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 TemplateInfo
+    if (formType.value === 'create') {
+      await TemplateInfoApi.createTemplateInfo(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await TemplateInfoApi.updateTemplateInfo(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    templateName: undefined,
+    content: undefined,
+    signId: undefined,
+    signName: undefined,
+    international: 1,
+    templateType: undefined,
+    switchOpen: 1, // 重置时也保持开启
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+// 签名选择相关
+const signOptions = ref<Array<{ id: number, signName: string }>>([])
+const signLoading = ref(false)
+
+const fetchSignList = async (visible: boolean) => {
+  if (visible && signOptions.value.length === 0) {
+    signLoading.value = true
+    try {
+      const res = await SignInfoApi.getSignInfolist({ international: formData.value.international })
+      signOptions.value = res
+    } catch (error) {
+      console.error('获取签名列表失败:', error)
+      message.error('获取签名列表失败')
+    } finally {
+      signLoading.value = false
+    }
+  }
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/index.vue b/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/index.vue
new file mode 100644
index 0000000..1fd12a0
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/index.vue
@@ -0,0 +1,277 @@
+
+<template>
+  <ContentWrap>
+
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="模板名称" prop="templateName">
+        <el-input
+          v-model="queryParams.templateName"
+          placeholder="请输入模板名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="签名" prop="signName">
+        <el-input
+          v-model="queryParams.signName"
+          placeholder="请输入签名名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="模板类型" prop="templateType">
+        <el-select
+          v-model="queryParams.templateType"
+          placeholder="请选择模板类型"
+          clearable
+          class="!w-240px"
+        >
+           <el-option label="全部" value="" />
+          <el-option label="验证码" value="0" />
+          <el-option label="短信通知" value="1" />
+          <el-option label="推广短信" value="2" />
+        </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"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['smschannel:template-info:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="false"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" width="55" />
+      <el-table-column label="模板ID" align="center" prop="id" width="75px"/>
+      <el-table-column label="类型" align="center" prop="templateType" width="80px">
+
+      <template #default="scope">
+        <el-tag :type="getTypeTagType(scope.row.templateType)">
+          {{ getTypeLabel(scope.row.templateType) }}
+        </el-tag>
+      </template>
+      </el-table-column>
+      <el-table-column label="签名" align="center" prop="signName" />
+      <el-table-column label="模板名称" align="center" prop="templateName" />
+      <el-table-column label="模板内容" align="center" prop="content" width="300px" />
+
+<!--      <el-table-column label="审核状态" align="center" prop="status" />-->
+
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+<!--          <el-button-->
+<!--            link-->
+<!--            type="primary"-->
+<!--            @click="openForm('update', scope.row.id)"-->
+<!--            v-hasPermi="['smschannel:template-info:update']"-->
+<!--          >-->
+<!--            编辑-->
+<!--          </el-button>-->
+
+          <el-button
+            link
+            type="primary"
+            @click="showBindingLog(scope.row.id)"
+            v-hasPermi="['smschannel:template-info:update']"
+          >
+            绑定记录
+          </el-button>
+
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['smschannel:template-info: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <TemplateInfoForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { TemplateInfoApi, TemplateInfo } from '@/api/domesticsms/templateinfo'
+import TemplateInfoForm from './TemplateInfoForm.vue'
+
+/** 短信模板信息 列表 */
+defineOptions({ name: 'TemplateInfo' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const { push } = useRouter() // 路由
+
+const loading = ref(true) // 列表的加载中
+const list = ref<TemplateInfo[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  templateName: undefined,
+  content: undefined,
+  signId: undefined,
+  signName: undefined,
+  templateType: undefined,
+  switchOpen: undefined,
+  international: 1,
+  createTime: [],
+  remark: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await TemplateInfoApi.getTemplateInfoPage(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 TemplateInfoApi.deleteTemplateInfo(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除短信模板信息 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await TemplateInfoApi.deleteTemplateInfoList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: TemplateInfo[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await TemplateInfoApi.exportTemplateInfo(queryParams)
+    download.excel(data, '短信模板信息.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+const getTypeLabel = (type: string | number) => {
+  const typeMap: Record<string, string> = {
+    0: '验证码',
+    1: '短信通知',
+    2: '推广短信'
+  }
+  return typeMap[type] || '未知'
+}
+
+// 模板类型 tag 类型（用于颜色区分）
+const getTypeTagType = (type: string | number) => {
+  const typeMap: Record<string, string> = {
+    0: 'success',
+    1: 'primary',
+    2: 'danger'
+  }
+  return typeMap[type] || 'info'
+}
+
+const showBindingLog = (id?: number) => {
+  if (id && id > 0) {
+    push('/templateinfo/templatebindinginfo?templateId=' + id)
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/templatebindinginfo/TemplateBindingInfoForm.vue b/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/templatebindinginfo/TemplateBindingInfoForm.vue
new file mode 100644
index 0000000..f0c1c76
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/templatebindinginfo/TemplateBindingInfoForm.vue
@@ -0,0 +1,123 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="190px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="三方模板内容" prop="templateContent">
+        <el-input
+          v-model="formData.templateContent"
+          type="textarea"
+          :rows="3"
+          placeholder=""
+          resize="none"
+          show-word-limit
+          disabled
+        />
+      </el-form-item>
+
+      <el-form-item label="三方模板编码" prop="templateCode">
+        <el-input v-model="formData.templateCode" 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 { TemplateBindingInfoApi, TemplateBindingInfo } from '@/api/domesticsms/templateinfo/templatebindinginfo'
+
+/** 短信模板渠道绑定 表单 */
+defineOptions({ name: 'TemplateBindingInfoForm' })
+
+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,
+  templateId: undefined,
+  templateCode: undefined,
+  templateContent: undefined,
+  channelId: undefined,
+  status: undefined,
+  auditRemark: undefined
+})
+const formRules = reactive({
+  templateId: [{ required: true, message: '模板ID不能为空', trigger: 'blur' }],
+  templateCode: [{ required: true, message: '三方模板编码不能为空', trigger: 'blur' }],
+  templateContent: [{ required: true, message: '三方模板内容不能为空', trigger: 'blur' }],
+  channelId: [{ required: true, message: '渠道ID不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '审核状态：0-待提交 1-待审核 2-审核成功 3-审核失败不能为空', 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 TemplateBindingInfoApi.getTemplateBindingInfo(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 TemplateBindingInfo
+    if (formType.value === 'create') {
+      await TemplateBindingInfoApi.createTemplateBindingInfo(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await TemplateBindingInfoApi.handBind(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    templateId: undefined,
+    templateCode: undefined,
+    templateContent: undefined,
+    channelId: undefined,
+    status: undefined,
+    auditRemark: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/templatebindinginfo/index.vue b/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/templatebindinginfo/index.vue
new file mode 100644
index 0000000..d265a28
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/internationalsms/templateinfo/templatebindinginfo/index.vue
@@ -0,0 +1,206 @@
+<template>
+
+  <el-alert
+    title="阿里云和腾讯云两个平台支持自动申请模版，但需要注意的是：腾讯云需要企业账号，否则会申请失败。"
+    type="success"
+    show-icon
+    :closable="false"
+  />
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="false"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" />
+      <el-table-column label="渠道编码" align="center" prop="channelCode" />
+      <el-table-column label="三方模板内容" align="center" prop="templateContent"  width="300px"/>
+      <el-table-column label="三方模板编码" align="center" prop="templateCode" />
+
+      <el-table-column label="审核状态" align="center" prop="status" width="100">
+        <template #default="{ row }">
+          <el-tag :type="statusTagType(row.status)">
+            {{ statusText(row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="三方审核备注" align="center" prop="auditRemark" />
+
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+
+      <el-table-column label="操作" align="center" min-width="120px">
+
+        <template #default="scope">
+
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['smschannel:template-info:update']"
+          >
+            手工绑定
+          </el-button>
+
+          <el-button
+            link
+            type="primary"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['smschannel:template-info:update']"
+          >
+            解除绑定
+          </el-button>
+
+        </template>
+
+
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <TemplateBindingInfoForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { TemplateBindingInfoApi, TemplateBindingInfo } from '@/api/domesticsms/templateinfo/templatebindinginfo'
+import TemplateBindingInfoForm from './TemplateBindingInfoForm.vue'
+
+/** 短信模板渠道绑定 列表 */
+defineOptions({ name: 'TemplateBindingInfo' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const { query } = useRoute() // 查询参数
+
+const loading = ref(true) // 列表的加载中
+const list = ref<TemplateBindingInfo[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 50,
+  templateId: query.templateId,
+  templateCode: undefined,
+  templateContent: undefined,
+  channelId: undefined,
+  status: undefined,
+  auditRemark: undefined,
+  createTime: []
+})
+
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await TemplateBindingInfoApi.getTemplateBindingInfoPage(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 TemplateBindingInfoApi.deleteTemplateBindingInfo(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除短信模板渠道绑定 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await TemplateBindingInfoApi.deleteTemplateBindingInfoList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: TemplateBindingInfo[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await TemplateBindingInfoApi.exportTemplateBindingInfo(queryParams)
+    download.excel(data, '短信模板渠道绑定.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+const statusMap = {
+  0: { text: '待提交', type: 'info' },
+  1: { text: '待审核', type: 'warning' },
+  2: { text: '审核成功', type: 'success' },
+  3: { text: '审核失败', type: 'danger' },
+  4: { text: '已撤销', type: 'info' }
+}
+
+const statusText = (status: number) => statusMap[status]?.text || '未知'
+const statusTagType = (status: number) => statusMap[status]?.type || ''
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/smschannel/channelaccount/ChannelAccountForm.vue b/marketing-ui/admin-ui/src/views/smschannel/channelaccount/ChannelAccountForm.vue
new file mode 100644
index 0000000..6da9a68
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/smschannel/channelaccount/ChannelAccountForm.vue
@@ -0,0 +1,278 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="800px">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="账号名称" prop="accountName">
+        <el-input v-model="formData.accountName" placeholder="请输入账号名称"/>
+      </el-form-item>
+
+      <el-form-item label="渠道" prop="channelId">
+        <el-select
+          v-model="formData.channelId"
+          placeholder="请选择渠道"
+          filterable
+          clearable
+          :disabled="formType === 'update'"
+          @change="handleChannelChange"
+        >
+          <el-option
+            v-for="item in channelOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="支持类型" prop="supportSmsType">
+        <el-select v-model="formData.supportSmsType" placeholder="" multiple>
+          <el-option label="验证码" :value="0"/>
+          <el-option label="短信通知" :value="1"/>
+          <el-option label="推广短信" :value="2"/>
+          <el-option label="国际短信" :value="3"/>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="appKey" prop="appKey">
+        <el-input v-model="formData.appKey" placeholder="请输入appKey"/>
+      </el-form-item>
+
+      <el-form-item label="appSecret" prop="appSecret">
+        <el-input v-model="formData.appSecret" placeholder="请输入appSecret"/>
+      </el-form-item>
+
+      <el-form-item label="扩展参数" prop="extParams" v-if="propertyFields.length > 0">
+        <el-table :data="propertyFields" border style="width: 100%">
+          <el-table-column prop="key" label="参数名" width="180"/>
+          <el-table-column prop="inputValue" label="参数值">
+            <template #default="{row}">
+              <el-input
+                v-model="row.inputValue"
+                placeholder="请输入参数值"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="value" label="说明" width="250">
+            <template #default="{row}">
+              <span class="param-description">{{ row.value || '-' }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="4"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </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 {ChannelAccountApi, ChannelAccount} from '@/api/smschannel/channelaccount'
+import {SmsChannelInfoApi} from "@/api/smschannel/smschannelinfo";
+
+/** 短信渠道账号 表单 */
+defineOptions({name: 'ChannelAccountForm'})
+
+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,
+  channelId: undefined,
+  channelCode: undefined,
+  accountName: undefined,
+  appKey: undefined,
+  appSecret: undefined,
+  supportSmsType: undefined,
+  extParams: undefined,
+  remark: undefined
+})
+const formRules = reactive({
+  channelId: [{required: true, message: '逻辑关联渠道ID不能为空', trigger: 'blur'}],
+  channelCode: [{required: true, message: '渠道标识不能为空', trigger: 'blur'}],
+  accountName: [{required: true, message: '账号名称不能为空', trigger: 'blur'}],
+  appKey: [{required: true, message: 'appKey不能为空', trigger: 'blur'}],
+  appSecret: [{required: true, message: 'appSecret不能为空', trigger: 'blur'}],
+  supportSmsType: [{required: true, message: '支持的短信类型', trigger: 'change'}]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+
+  try {
+    const res = await SmsChannelInfoApi.getSmsChannelInfoList({})
+    channelOptions.value = res.map(item => ({
+      id: item.id,
+      name: item.channelName,
+      channelCode: item.channelCode,
+      channelProperties: item.channelProperties
+    }))
+  } catch (error) {
+    console.error('获取渠道列表失败:', error)
+  }
+
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ChannelAccountApi.getChannelAccount(id)
+
+      // 查找当前渠道的配置
+      const currentChannel = channelOptions.value.find(
+        item => item.id === formData.value.channelId
+      )
+
+      if (currentChannel) {
+        // 解析渠道属性配置
+        parseChannelProperties(currentChannel.channelProperties)
+
+        // 如果已有扩展参数，则覆盖默认值
+        if (formData.value.extParams) {
+          try {
+            const extParams = JSON.parse(formData.value.extParams)
+            propertyFields.value = propertyFields.value.map(item => ({
+              ...item,
+              inputValue: extParams[item.key] || '' // 设置用户输入的值
+            }))
+          } catch (e) {
+            console.error('解析扩展参数失败:', e)
+          }
+        }
+      }
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({open}) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+
+  // 将表格中的动态参数转换为JSON字符串
+  if (propertyFields.value.length > 0) {
+    const extParamsObj = propertyFields.value.reduce((acc, item) => {
+      if (item.key && item.inputValue !== undefined && item.inputValue !== '') {
+        acc[item.key] = item.inputValue
+      }
+      return acc
+    }, {} as Record<string, string>)
+
+    formData.value.extParams = Object.keys(extParamsObj).length > 0
+      ? JSON.stringify(extParamsObj)
+      : undefined
+  } else {
+    formData.value.extParams = undefined
+  }
+
+  try {
+    const data = formData.value as unknown as ChannelAccount
+    if (formType.value === 'create') {
+      await ChannelAccountApi.createChannelAccount(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ChannelAccountApi.updateChannelAccount(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    channelId: undefined,
+    channelCode: undefined,
+    accountName: undefined,
+    appKey: undefined,
+    appSecret: undefined,
+    supportSmsType: undefined,
+    extParams: undefined,
+    remark: undefined
+  }
+  propertyFields.value = [] // 清空扩展参数
+  formRef.value?.resetFields()
+}
+
+const channelOptions = ref<Array<{ id: number, name: string, channelCode: string, channelProperties: string }>>([]) // 渠道下拉选项
+// 扩展参数字段
+const propertyFields = ref<Array<{ key: string, value: string, inputValue: string }>>([])
+
+/** 渠道选择变化事件 */
+const handleChannelChange = (channelId: number) => {
+  // 清空之前的扩展参数
+  propertyFields.value = []
+
+  if (!channelId) return
+
+  // 查找选中的渠道
+  const selectedChannel = channelOptions.value.find(item => item.id === channelId)
+  if (selectedChannel) {
+    // 设置渠道编码
+    formData.value.channelCode = selectedChannel.channelCode
+    // 解析渠道属性
+    parseChannelProperties(selectedChannel.channelProperties)
+  }
+}
+
+/** 解析渠道属性配置 */
+const parseChannelProperties = (channelProperties: string) => {
+  if (!channelProperties) return
+
+  try {
+    const properties = JSON.parse(channelProperties)
+    propertyFields.value = Object.entries(properties).map(([key, value]) => {
+      return {
+        key,
+        value: String(value), // 作为说明字段显示
+        inputValue: '' // 用户输入的值，初始为空
+      }
+    })
+  } catch (e) {
+    console.error('解析渠道属性失败:', e)
+    propertyFields.value = []
+  }
+}
+</script>
+
+<style scoped>
+.param-description {
+  color: #666;
+  font-size: 12px;
+}
+</style>
+
diff --git a/marketing-ui/admin-ui/src/views/smschannel/channelaccount/index.vue b/marketing-ui/admin-ui/src/views/smschannel/channelaccount/index.vue
new file mode 100644
index 0000000..89136d1
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/smschannel/channelaccount/index.vue
@@ -0,0 +1,188 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="渠道ID" prop="channelId">
+        <el-input
+          v-model="queryParams.channelId"
+          placeholder=""
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="渠道标识" prop="channelCode">
+        <el-input
+          v-model="queryParams.channelCode"
+          placeholder=""
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="账号名称" prop="accountName">
+        <el-input
+          v-model="queryParams.accountName"
+          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="['smschannel:channel-account:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        
+      </el-form-item>
+
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" width="55" />
+      <el-table-column label="ID" align="center" prop="id" width="65"  />
+      <el-table-column label="渠道标识" align="left" prop="channelCode" width="95"/>
+      <el-table-column label="账号名称" align="left" prop="accountName" />
+      <el-table-column label="appKey" align="left" prop="appKey" />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['smschannel:channel-account:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['smschannel:channel-account: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ChannelAccountForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import download from '@/utils/download'
+import { ChannelAccountApi, ChannelAccount } from '@/api/smschannel/channelaccount'
+import { SmsChannelInfoApi, SmsChannelInfo } from '@/api/smschannel/smschannelinfo'
+import ChannelAccountForm from './ChannelAccountForm.vue'
+
+/** 短信渠道账号 列表 */
+defineOptions({ name: 'ChannelAccount' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ChannelAccount[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  channelId: undefined,
+  channelCode: undefined,
+  accountName: undefined,
+  appKey: undefined,
+  appSecret: undefined,
+  extParams: undefined,
+  remark: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ChannelAccountApi.getChannelAccountPage(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 ChannelAccountApi.deleteChannelAccount(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: ChannelAccount[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/smschannel/smschannelinfo/SmsChannelInfoForm.vue b/marketing-ui/admin-ui/src/views/smschannel/smschannelinfo/SmsChannelInfoForm.vue
new file mode 100644
index 0000000..f42f035
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/smschannel/smschannelinfo/SmsChannelInfoForm.vue
@@ -0,0 +1,320 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="800px"> <!-- 增加弹窗宽度 -->
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="200px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="渠道名称" prop="channelName">
+        <el-input v-model="formData.channelName" placeholder="请输入渠道名称"/>
+      </el-form-item>
+      <el-form-item label="渠道标识" prop="channelCode">
+        <el-input v-model="formData.channelCode" placeholder="请输入渠道标识"/>
+      </el-form-item>
+      <el-form-item label="请求地址" prop="domainUrl">
+        <el-input v-model="formData.domainUrl" placeholder="请输入请求地址"/>
+      </el-form-item>
+
+      <!-- 第一组是否选项 -->
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="是否支持申请模板" prop="supportApplyTemplate">
+            <el-select v-model="formData.supportApplyTemplate" style="width: 100%">
+              <el-option :value="1" label="是"/>
+              <el-option :value="0" label="否"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="是否支持申请签名" prop="supportApplySign">
+            <el-select v-model="formData.supportApplySign" style="width: 100%">
+              <el-option :value="1" label="是"/>
+              <el-option :value="0" label="否"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第二组是否选项 -->
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="是否支持批量发送" prop="supportBatchSend">
+            <el-select v-model="formData.supportBatchSend" style="width: 100%">
+              <el-option :value="1" label="是"/>
+              <el-option :value="0" label="否"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="是否支持国际短信" prop="supportInternational">
+            <el-select v-model="formData.supportInternational" style="width: 100%">
+              <el-option :value="1" label="是"/>
+              <el-option :value="0" label="否"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第三组是否选项 -->
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="是否支持查询模板信息" prop="supportQueryTemplate">
+            <el-select v-model="formData.supportQueryTemplate" style="width: 100%">
+              <el-option :value="1" label="是"/>
+              <el-option :value="0" label="否"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="是否支持上行回复" prop="supportReply">
+            <el-select v-model="formData.supportReply" style="width: 100%">
+              <el-option :value="1" label="是"/>
+              <el-option :value="0" label="否"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item label="标签" prop="label">
+        <el-input v-model="formData.label" placeholder="请输入标签"/>
+      </el-form-item>
+
+      <el-form-item label="渠道扩展属性" prop="channelProperties">
+        <div class="properties-container">
+          <div class="flex justify-between items-center mb-2">
+            <el-button
+              type="primary"
+              size="small"
+              @click="addProperty"
+              icon="el-icon-plus"
+            >
+              新增属性
+            </el-button>
+          </div>
+
+          <el-table
+            :data="propertiesList"
+            border
+            size="small"
+            class="property-table"
+            empty-text="暂无属性配置"
+          >
+            <el-table-column label="参数Key" width="220">
+              <template #default="{ row }">
+                <el-input
+                  v-model="row.key"
+                  placeholder="比如appId"
+                  clearable
+                />
+              </template>
+            </el-table-column>
+
+            <el-table-column label="参数说明" width="200">
+              <template #default="{ row }">
+                <el-input
+                  v-model="row.desc"
+                  placeholder="参数用途说明"
+                  clearable
+                />
+              </template>
+            </el-table-column>
+
+            <el-table-column label="操作" width="80" align="center">
+              <template #default="{   $index }">
+              <el-button
+                type="danger"
+                size="small"
+                plain
+                @click="removeProperty($index)"
+              >
+                删除
+              </el-button>
+
+              </template>
+            </el-table-column>
+
+          </el-table>
+        </div>
+      </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 {getBoolDictOptions, DICT_TYPE} from '@/utils/dict'
+import {SmsChannelInfoApi, SmsChannelInfo} from '@/api/smschannel/smschannelinfo'
+
+/** 短信渠道配置表（含扩展属性字段） 表单 */
+defineOptions({name: 'SmsChannelInfoForm'})
+
+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,
+  channelName: undefined,
+  channelCode: undefined,
+  domainUrl: undefined,
+  label: undefined,
+  supportApplyTemplate: undefined,
+  supportApplySign: undefined,
+  supportBatchSend: undefined,
+  supportInternational: undefined,
+  supportQueryTemplate: undefined,
+  supportReply: undefined,
+  channelProperties: undefined
+})
+const formRules = reactive({
+  channelName: [{required: true, message: '渠道名称不能为空', trigger: 'blur'}],
+  channelCode: [{required: true, message: '渠道标识不能为空', trigger: 'blur'}],
+  domainUrl: [{required: true, message: '请求地址不能为空', trigger: 'blur'}],
+  supportApplyTemplate: [{required: true, message: '是否支持申请模板不能为空', trigger: 'blur'}],
+  supportApplySign: [{required: true, message: '是否支持申请签名不能为空', trigger: 'change'}],
+  supportBatchSend: [{required: true, message: '是否支持批量发送不能为空', trigger: 'blur'}],
+  supportInternational: [{required: true, message: '是否支持国际短信不能为空', trigger: 'blur'}],
+  supportQueryTemplate: [{
+    required: true,
+    message: '是否支持查询模板信息（1-支持 0-不支持）不能为空',
+    trigger: 'blur'
+  }],
+  supportReply: [{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 SmsChannelInfoApi.getSmsChannelInfo(id)
+
+      if (formData.value.channelProperties) {
+        try {
+          const props = JSON.parse(formData.value.channelProperties)
+          propertiesList.value = Object.keys(props).map(key => ({
+            key,
+            desc: props[key]
+          }))
+        } catch (e) {
+          propertiesList.value = []
+        }
+      } else {
+        propertiesList.value = []
+      }
+    } 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 SmsChannelInfo
+    if (formType.value === 'create') {
+      await SmsChannelInfoApi.createSmsChannelInfo(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await SmsChannelInfoApi.updateSmsChannelInfo(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    channelName: undefined,
+    channelCode: undefined,
+    domainUrl: undefined,
+    label: undefined,
+    supportApplyTemplate: undefined,
+    supportApplySign: undefined,
+    supportBatchSend: undefined,
+    supportInternational: undefined,
+    supportQueryTemplate: undefined,
+    supportReply: undefined,
+    channelProperties: undefined
+  }
+  propertiesList.value = []  // 清空属性列表
+  formRef.value?.resetFields()
+}
+
+const propertiesList = ref<Array<{ key: string, desc: string }>>([])
+
+// 新增属性
+const addProperty = () => {
+  propertiesList.value.push({key: '', desc: ''})
+}
+
+// 删除属性
+const removeProperty = (index: number) => {
+  console.log("当前index：" + index)
+  propertiesList.value.splice(index, 1);  // 直接修改原数组
+}
+
+// 监听propertiesList变化，更新formData.channelProperties
+watch(propertiesList, (newVal) => {
+  const propertiesObj: Record<string, string> = {}
+  newVal.forEach(item => {
+    if (item.key) {
+      propertiesObj[item.key] = item.desc
+    }
+  })
+  formData.value.channelProperties = JSON.stringify(propertiesObj)
+}, {deep: true})
+
+</script>
+
+<style scoped>
+.properties-container {
+  width: 100%;
+}
+
+.property-table {
+  width: 100%;
+  margin-top: 8px;
+}
+
+.property-table :deep(.el-table__cell) {
+  padding: 8px 0;
+}
+
+.property-table :deep(.el-input__inner) {
+  border: none !important;
+  padding-left: 10px;
+}
+
+.property-table :deep(.el-input__inner:focus) {
+  border: 1px solid #409eff !important;
+}
+</style>
diff --git a/marketing-ui/admin-ui/src/views/smschannel/smschannelinfo/index.vue b/marketing-ui/admin-ui/src/views/smschannel/smschannelinfo/index.vue
new file mode 100644
index 0000000..0f8ed46
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/smschannel/smschannelinfo/index.vue
@@ -0,0 +1,250 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+
+      <el-form-item label="渠道名称" prop="channelName">
+        <el-input
+          v-model="queryParams.channelName"
+          placeholder="请输入渠道名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="渠道标识" prop="channelCode">
+        <el-input
+          v-model="queryParams.channelCode"
+          placeholder="请输入渠道标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="请求地址" prop="domainUrl">
+        <el-input
+          v-model="queryParams.domainUrl"
+          placeholder="请输入请求地址"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="标签" prop="label">
+        <el-input
+          v-model="queryParams.label"
+          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-220px"
+        />
+      </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="['t:sms-channel-info:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+
+        <el-button
+            type="danger"
+            plain
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-hasPermi="['t:sms-channel-info:delete']"
+        >
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="false"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" />
+      <el-table-column label="渠道ID" align="center" prop="id" width="75" />
+      <el-table-column label="渠道名称" align="center" prop="channelName" />
+      <el-table-column label="渠道标识" align="center" prop="channelCode" />
+      <el-table-column label="请求地址" align="left" prop="domainUrl"  width="250px"/>
+      <el-table-column label="标签" align="center" prop="label">
+        <template #default="{ row }">
+          <el-tag>{{ row.label }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['t:sms-channel-info:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['t:sms-channel-info: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <SmsChannelInfoForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { SmsChannelInfoApi, SmsChannelInfo } from '@/api/smschannel/smschannelinfo'
+import SmsChannelInfoForm from './SmsChannelInfoForm.vue'
+import {DICT_TYPE} from "@/utils/dict";
+
+/** 短信渠道配置表（含扩展属性字段） 列表 */
+defineOptions({ name: 'SmsChannelInfo' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<SmsChannelInfo[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  channelName: undefined,
+  channelCode: undefined,
+  domainUrl: undefined,
+  label: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await SmsChannelInfoApi.getSmsChannelInfoPage(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 SmsChannelInfoApi.deleteSmsChannelInfo(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除短信渠道配置表（含扩展属性字段） */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await SmsChannelInfoApi.deleteSmsChannelInfoList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: SmsChannelInfo[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await SmsChannelInfoApi.exportSmsChannelInfo(queryParams)
+    download.excel(data, '短信渠道配置表（含扩展属性字段）.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/system/area/AreaForm.vue b/marketing-ui/admin-ui/src/views/system/area/AreaForm.vue
new file mode 100644
index 0000000..47dfd1d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/area/AreaForm.vue
@@ -0,0 +1,72 @@
+<template>
+  <Dialog v-model="dialogVisible" title="IP 查询">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="IP" prop="ip">
+        <el-input v-model="formData.ip" placeholder="请输入 IP 地址" />
+      </el-form-item>
+      <el-form-item label="地址" prop="result">
+        <el-input v-model="formData.result" placeholder="展示查询 IP 结果" readonly />
+      </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 AreaApi from '@/api/system/area'
+
+defineOptions({ name: 'SystemAreaForm' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
+const formData = ref({
+  ip: '',
+  result: undefined
+})
+const formRules = reactive({
+  ip: [{ required: true, message: 'IP 地址不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    formData.value.result = await AreaApi.getAreaByIp(formData.value.ip!.trim())
+    message.success('查询成功')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    ip: '',
+    result: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/area/index.vue b/marketing-ui/admin-ui/src/views/system/area/index.vue
new file mode 100644
index 0000000..fb3c27f
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/area/index.vue
@@ -0,0 +1,78 @@
+<template>
+
+  <!-- 操作栏 -->
+  <ContentWrap>
+    <el-button type="primary" plain @click="openForm()">
+      <Icon icon="ep:plus" class="mr-5px" /> IP 查询
+    </el-button>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <div style="width: 100%; height: 700px">
+      <!-- AutoResizer 自动调节大小 -->
+      <el-auto-resizer>
+        <template #default="{ height, width }">
+          <!-- Virtualized Table 虚拟化表格：高性能，解决表格在大数据量下的卡顿问题 -->
+          <el-table-v2
+            v-loading="loading"
+            :columns="columns"
+            :data="list"
+            :width="width"
+            :height="height"
+            expand-column-key="id"
+          />
+        </template>
+      </el-auto-resizer>
+    </div>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <AreaForm ref="formRef" />
+</template>
+<script setup lang="tsx">
+import { Column } from 'element-plus'
+import AreaForm from './AreaForm.vue'
+import * as AreaApi from '@/api/system/area'
+
+defineOptions({ name: 'SystemArea' })
+
+// 表格的 column 字段
+const columns: Column[] = [
+  {
+    dataKey: 'id', // 需要渲染当前列的数据字段
+    title: '编号', // 显示在单元格表头的文本
+    width: 400, // 当前列的宽度，必须设置
+    fixed: true, // 是否固定列
+    key: 'id' // 树形展开对应的 key
+  },
+  {
+    dataKey: 'name',
+    title: '地名',
+    width: 200
+  }
+]
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 表格的数据
+
+/** 获得数据列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await AreaApi.getAreaTree()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = () => {
+  formRef.value.open()
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/client/ClientForm.vue b/marketing-ui/admin-ui/src/views/system/client/ClientForm.vue
new file mode 100644
index 0000000..b153146
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/client/ClientForm.vue
@@ -0,0 +1,127 @@
+<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="客户端KEY" prop="clientKey">
+        <el-input v-model="formData.clientKey" placeholder="请输入客户端KEY" />
+      </el-form-item>
+      <el-form-item label="客户端密钥" prop="clientSecret">
+        <el-input v-model="formData.clientSecret" placeholder="请输入客户端密钥" />
+      </el-form-item>
+      <el-form-item label="授权类型" prop="grantType">
+        <el-select v-model="formData.grantType" placeholder="请选择授权类型">
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备类型" prop="deviceType">
+        <el-select v-model="formData.deviceType" placeholder="请选择设备类型">
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Token访问超时时间（秒）" prop="accessTimeout">
+        <el-input v-model="formData.accessTimeout" placeholder="请输入Token访问超时时间（秒）" />
+      </el-form-item>
+      <el-form-item label="Token刷新超时时间（秒）" prop="refreshTimeout">
+        <el-input v-model="formData.refreshTimeout" placeholder="请输入Token刷新超时时间（秒）" />
+      </el-form-item>
+      <el-form-item label="状态（0 正常 1 停用）" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio value="1">请选择字典生成</el-radio>
+        </el-radio-group>
+      </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 { ClientApi, Client } from '@/api/system/client'
+
+/** 系统客户端 表单 */
+defineOptions({ name: 'ClientForm' })
+
+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,
+  clientKey: undefined,
+  clientSecret: undefined,
+  grantType: undefined,
+  deviceType: undefined,
+  accessTimeout: undefined,
+  refreshTimeout: undefined,
+  status: undefined
+})
+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 ClientApi.getClient(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 Client
+    if (formType.value === 'create') {
+      await ClientApi.createClient(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ClientApi.updateClient(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    clientKey: undefined,
+    clientSecret: undefined,
+    grantType: undefined,
+    deviceType: undefined,
+    accessTimeout: undefined,
+    refreshTimeout: undefined,
+    status: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/system/client/index.vue b/marketing-ui/admin-ui/src/views/system/client/index.vue
new file mode 100644
index 0000000..c5e5351
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/client/index.vue
@@ -0,0 +1,290 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="客户端KEY" prop="clientKey">
+        <el-input
+          v-model="queryParams.clientKey"
+          placeholder="请输入客户端KEY"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="客户端密钥" prop="clientSecret">
+        <el-input
+          v-model="queryParams.clientSecret"
+          placeholder="请输入客户端密钥"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="授权类型" prop="grantType">
+        <el-select
+          v-model="queryParams.grantType"
+          placeholder="请选择授权类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备类型" prop="deviceType">
+        <el-select
+          v-model="queryParams.deviceType"
+          placeholder="请选择设备类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Token访问超时时间（秒）" prop="accessTimeout">
+        <el-input
+          v-model="queryParams.accessTimeout"
+          placeholder="请输入Token访问超时时间（秒）"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="Token刷新超时时间（秒）" prop="refreshTimeout">
+        <el-input
+          v-model="queryParams.refreshTimeout"
+          placeholder="请输入Token刷新超时时间（秒）"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="状态（0 正常 1 停用）" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择状态（0 正常 1 停用）"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="请选择字典生成" 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-220px"
+        />
+      </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="['system:client:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:client:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button
+            type="danger"
+            plain
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-hasPermi="['system:client:delete']"
+        >
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" width="55" />
+      <el-table-column label="主键ID" align="center" prop="id" />
+      <el-table-column label="客户端KEY" align="center" prop="clientKey" />
+      <el-table-column label="客户端密钥" align="center" prop="clientSecret" />
+      <el-table-column label="授权类型" align="center" prop="grantType" />
+      <el-table-column label="设备类型" align="center" prop="deviceType" />
+      <el-table-column label="Token访问超时时间（秒）" align="center" prop="accessTimeout" />
+      <el-table-column label="Token刷新超时时间（秒）" align="center" prop="refreshTimeout" />
+      <el-table-column label="状态（0 正常 1 停用）" align="center" prop="status" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['system:client:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['system:client: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ClientForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { ClientApi, Client } from '@/api/system/client'
+import ClientForm from './ClientForm.vue'
+
+/** 系统客户端 列表 */
+defineOptions({ name: 'SystemClient' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<Client[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  clientKey: undefined,
+  clientSecret: undefined,
+  grantType: undefined,
+  deviceType: undefined,
+  accessTimeout: undefined,
+  refreshTimeout: undefined,
+  status: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ClientApi.getClientPage(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 ClientApi.deleteClient(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除系统客户端 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await ClientApi.deleteClientList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: Client[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ClientApi.exportClient(queryParams)
+    download.excel(data, '系统客户端.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/system/dept/DeptForm.vue b/marketing-ui/admin-ui/src/views/system/dept/DeptForm.vue
new file mode 100644
index 0000000..c759ef3
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/dept/DeptForm.vue
@@ -0,0 +1,174 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="上级部门" prop="parentId">
+        <el-tree-select
+          v-model="formData.parentId"
+          :data="deptTree"
+          :props="defaultProps"
+          check-strictly
+          default-expand-all
+          placeholder="请选择上级部门"
+          value-key="deptId"
+        />
+      </el-form-item>
+      <el-form-item label="部门名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入部门名称" />
+      </el-form-item>
+      <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="leaderUserId">
+        <el-select v-model="formData.leaderUserId" 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="phone">
+        <el-input v-model="formData.phone" maxlength="11" placeholder="请输入联系电话" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model="formData.email" maxlength="50" placeholder="请输入邮箱" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="formData.status" clearable placeholder="请选择状态">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as DeptApi from '@/api/system/dept'
+import * as UserApi from '@/api/system/user'
+import { CommonStatusEnum } from '@/utils/constants'
+import { FormRules } from 'element-plus'
+
+defineOptions({ name: 'SystemDeptForm' })
+
+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,
+  title: '',
+  parentId: undefined,
+  name: undefined,
+  sort: undefined,
+  leaderUserId: undefined,
+  phone: undefined,
+  email: undefined,
+  status: CommonStatusEnum.ENABLE
+})
+const formRules = reactive<FormRules>({
+  parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
+  email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
+  phone: [
+    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+  ],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const deptTree = ref() // 树形结构
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
+
+/** 打开弹窗 */
+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 DeptApi.getDept(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  // 获得用户列表
+  userList.value = await UserApi.getSimpleUserList()
+  // 获得部门树
+  await getTree()
+}
+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 DeptApi.DeptVO
+    if (formType.value === 'create') {
+      await DeptApi.createDept(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DeptApi.updateDept(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    title: '',
+    parentId: undefined,
+    name: undefined,
+    sort: undefined,
+    leaderUserId: undefined,
+    phone: undefined,
+    email: undefined,
+    status: CommonStatusEnum.ENABLE
+  }
+  formRef.value?.resetFields()
+}
+
+/** 获得部门树 */
+const getTree = async () => {
+  deptTree.value = []
+  const data = await DeptApi.getSimpleDeptList()
+  let dept: Tree = { id: 0, name: '顶级部门', children: [] }
+  dept.children = handleTree(data)
+  deptTree.value.push(dept)
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/dept/index.vue b/marketing-ui/admin-ui/src/views/system/dept/index.vue
new file mode 100644
index 0000000..5e47846
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/dept/index.vue
@@ -0,0 +1,190 @@
+<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="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择部门状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :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>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['system:dept:create']"
+        >
+          <Icon icon="ep:plus" 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"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      v-if="refreshTable"
+    >
+      <el-table-column prop="name" label="部门名称" />
+      <el-table-column prop="leader" label="负责人">
+        <template #default="scope">
+          {{ userList.find((user) => user.id === scope.row.leaderUserId)?.nickname }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" />
+      <el-table-column prop="status" label="状态">
+        <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="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['system:dept:update']"
+          >
+            修改
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['system:dept:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DeptForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { handleTree } from '@/utils/tree'
+import * as DeptApi from '@/api/system/dept'
+import DeptForm from './DeptForm.vue'
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'SystemDept' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref() // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 100,
+  name: undefined,
+  status: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const isExpandAll = ref(true) // 是否展开，默认全部展开
+const refreshTable = ref(true) // 重新渲染表格状态
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
+
+/** 查询部门列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DeptApi.getDeptPage(queryParams)
+    list.value = handleTree(data)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 展开/折叠操作 */
+const toggleExpandAll = () => {
+  refreshTable.value = false
+  isExpandAll.value = !isExpandAll.value
+  nextTick(() => {
+    refreshTable.value = true
+  })
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.pageNo = 1
+  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 DeptApi.deleteDept(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 获取用户列表
+  userList.value = await UserApi.getSimpleUserList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/dict/DictTypeForm.vue b/marketing-ui/admin-ui/src/views/system/dict/DictTypeForm.vue
new file mode 100644
index 0000000..b9159b5
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/dict/DictTypeForm.vue
@@ -0,0 +1,124 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="字典名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入字典名称" />
+      </el-form-item>
+      <el-form-item label="字典类型" prop="type">
+        <el-input
+          v-model="formData.type"
+          :disabled="typeof formData.id !== 'undefined'"
+          placeholder="请输入参数名称"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :value="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="请输入内容" type="textarea" />
+      </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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as DictTypeApi from '@/api/system/dict/dict.type'
+import { CommonStatusEnum } from '@/utils/constants'
+
+defineOptions({ name: 'SystemDictTypeForm' })
+
+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: '',
+  type: '',
+  status: CommonStatusEnum.ENABLE,
+  remark: ''
+})
+const formRules = reactive({
+  name: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
+})
+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 DictTypeApi.getDictType(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 DictTypeApi.DictTypeVO
+    if (formType.value === 'create') {
+      await DictTypeApi.createDictType(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DictTypeApi.updateDictType(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    type: '',
+    name: '',
+    status: CommonStatusEnum.ENABLE,
+    remark: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/dict/data/DictDataForm.vue b/marketing-ui/admin-ui/src/views/system/dict/data/DictDataForm.vue
new file mode 100644
index 0000000..bab18db
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/dict/data/DictDataForm.vue
@@ -0,0 +1,183 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="字典类型" prop="type">
+        <el-input
+          v-model="formData.dictType"
+          :disabled="typeof formData.id !== 'undefined'"
+          placeholder="请输入参数名称"
+        />
+      </el-form-item>
+      <el-form-item label="数据标签" prop="label">
+        <el-input v-model="formData.label" placeholder="请输入数据标签" />
+      </el-form-item>
+      <el-form-item label="数据键值" prop="value">
+        <el-input v-model="formData.value" placeholder="请输入数据键值" />
+      </el-form-item>
+      <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-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="颜色类型" prop="colorType">
+        <el-select v-model="formData.colorType">
+          <el-option
+            v-for="item in colorTypeOptions"
+            :key="item.value"
+            :label="item.label + '(' + item.value + ')'"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="CSS Class" prop="cssClass">
+        <el-input v-model="formData.cssClass" placeholder="请输入 CSS Class" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" />
+      </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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as DictDataApi from '@/api/system/dict/dict.data'
+import { CommonStatusEnum } from '@/utils/constants'
+
+defineOptions({ name: 'SystemDictDataForm' })
+
+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,
+  sort: undefined,
+  label: '',
+  value: '',
+  dictType: '',
+  status: CommonStatusEnum.ENABLE,
+  colorType: '',
+  cssClass: '',
+  remark: ''
+})
+const formRules = reactive({
+  label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+  value: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+
+// 数据标签回显样式
+const colorTypeOptions = readonly([
+  {
+    value: 'default',
+    label: '默认'
+  },
+  {
+    value: 'primary',
+    label: '主要'
+  },
+  {
+    value: 'success',
+    label: '成功'
+  },
+  {
+    value: 'info',
+    label: '信息'
+  },
+  {
+    value: 'warning',
+    label: '警告'
+  },
+  {
+    value: 'danger',
+    label: '危险'
+  }
+])
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, dictType?: string) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  if (dictType) {
+    formData.value.dictType = dictType
+  }
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await DictDataApi.getDictData(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 DictDataApi.DictDataVO
+    if (formType.value === 'create') {
+      await DictDataApi.createDictData(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DictDataApi.updateDictData(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    sort: undefined,
+    label: '',
+    value: '',
+    dictType: '',
+    status: CommonStatusEnum.ENABLE,
+    colorType: '',
+    cssClass: '',
+    remark: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/dict/data/index.vue b/marketing-ui/admin-ui/src/views/system/dict/data/index.vue
new file mode 100644
index 0000000..2811f06
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/dict/data/index.vue
@@ -0,0 +1,210 @@
+<template>
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="字典名称" prop="dictType">
+        <el-select v-model="queryParams.dictType" class="!w-240px">
+          <el-option
+            v-for="item in dictTypeList"
+            :key="item.type"
+            :label="item.name"
+            :value="item.type"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="字典标签" prop="label">
+        <el-input
+          v-model="queryParams.label"
+          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 getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :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>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['system:dict:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:dict:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="字典编码" align="center" prop="id" />
+      <el-table-column label="字典标签" align="center" prop="label" />
+      <el-table-column label="字典键值" align="center" prop="value" />
+      <el-table-column label="字典排序" align="center" prop="sort" />
+      <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="colorType" />
+      <el-table-column label="CSS Class" align="center" prop="cssClass" />
+      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['system:dict:update']"
+          >
+            修改
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['system:dict: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DictDataForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as DictDataApi from '@/api/system/dict/dict.data'
+import * as DictTypeApi from '@/api/system/dict/dict.type'
+import DictDataForm from './DictDataForm.vue'
+
+defineOptions({ name: 'SystemDictData' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const route = useRoute() // 路由
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  label: '',
+  status: undefined,
+  dictType: route.params.dictType
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+const dictTypeList = ref<DictTypeApi.DictTypeVO[]>() // 字典类型的列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DictDataApi.getDictDataPage(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, queryParams.dictType)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DictDataApi.deleteDictData(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await DictDataApi.exportDictData(queryParams)
+    download.excel(data, '字典数据.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 查询字典（精简)列表
+  dictTypeList.value = await DictTypeApi.getSimpleDictTypeList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/dict/index.vue b/marketing-ui/admin-ui/src/views/system/dict/index.vue
new file mode 100644
index 0000000..acc737c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/dict/index.vue
@@ -0,0 +1,231 @@
+<template>
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="字典名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          class="!w-240px"
+          clearable
+          placeholder="请输入字典名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="字典类型" prop="type">
+        <el-input
+          v-model="queryParams.type"
+          class="!w-240px"
+          clearable
+          placeholder="请输入字典类型"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          class="!w-240px"
+          clearable
+          placeholder="请选择字典状态"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :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"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item>
+        <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="['system:dict:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+        <el-button
+          v-hasPermi="['system:dict:export']"
+          :loading="exportLoading"
+          plain
+          type="success"
+          @click="handleExport"
+        >
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column align="center" label="字典编号" prop="id" />
+      <el-table-column align="center" label="字典名称" prop="name" show-overflow-tooltip />
+      <el-table-column align="center" label="字典类型" prop="type" width="300" />
+      <el-table-column align="center" label="状态" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="备注" prop="remark" />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180"
+      />
+      <el-table-column align="center" label="操作">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['system:dict:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            修改
+          </el-button>
+          <router-link :to="'/dict/type/data/' + scope.row.type">
+            <el-button link type="primary">数据</el-button>
+          </router-link>
+          <el-button
+            v-hasPermi="['system:dict:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DictTypeForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as DictTypeApi from '@/api/system/dict/dict.type'
+import DictTypeForm from './DictTypeForm.vue'
+import download from '@/utils/download'
+
+defineOptions({ name: 'SystemDictType' })
+
+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: '',
+  type: '',
+  status: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询字典类型列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DictTypeApi.getDictTypePage(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 DictTypeApi.deleteDictType(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await DictTypeApi.exportDictType(queryParams)
+    download.excel(data, '字典类型.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/loginlog/LoginLogDetail.vue b/marketing-ui/admin-ui/src/views/system/loginlog/LoginLogDetail.vue
new file mode 100644
index 0000000..ff49453
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/loginlog/LoginLogDetail.vue
@@ -0,0 +1,51 @@
+<template>
+  <Dialog v-model="dialogVisible" title="详情" width="800">
+    <el-descriptions :column="1" border>
+      <el-descriptions-item label="日志编号" min-width="120">
+        {{ detailData.id }}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作类型">
+        <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="detailData.logType" />
+      </el-descriptions-item>
+      <el-descriptions-item label="用户名称">
+        {{ detailData.username }}
+      </el-descriptions-item>
+      <el-descriptions-item label="登录地址">
+        {{ detailData.userIp }}
+      </el-descriptions-item>
+      <el-descriptions-item label="浏览器">
+        {{ detailData.userAgent }}
+      </el-descriptions-item>
+      <el-descriptions-item label="登陆结果">
+        <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="detailData.result" />
+      </el-descriptions-item>
+      <el-descriptions-item label="登录日期">
+        {{ formatDate(detailData.createTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as LoginLogApi from '@/api/system/loginLog'
+
+defineOptions({ name: 'SystemLoginLogDetail' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({} as LoginLogApi.LoginLogVO) // 详情数据
+
+/** 打开弹窗 */
+const open = async (data: LoginLogApi.LoginLogVO) => {
+  dialogVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = data
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/loginlog/index.vue b/marketing-ui/admin-ui/src/views/system/loginlog/index.vue
new file mode 100644
index 0000000..3cb1897
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/loginlog/index.vue
@@ -0,0 +1,179 @@
+<template>
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <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="userIp">
+        <el-input
+          v-model="queryParams.userIp"
+          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="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:login-log:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="日志编号" align="center" prop="id" />
+      <el-table-column label="操作类型" align="center" prop="logType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="用户名称" align="center" prop="username" width="180" />
+      <el-table-column label="登录地址" align="center" prop="userIp" width="180" />
+      <el-table-column label="浏览器" align="center" prop="userAgent" />
+      <el-table-column label="登陆结果" align="center" prop="result">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="scope.row.result" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="登录日期"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openDetail(scope.row)"
+            v-hasPermi="['system:login-log:query']"
+          >
+            详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：详情 -->
+  <LoginLogDetail ref="detailRef" />
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as LoginLogApi from '@/api/system/loginLog'
+import LoginLogDetail from './LoginLogDetail.vue'
+
+defineOptions({ name: 'SystemLoginLog' })
+
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  username: undefined,
+  userIp: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await LoginLogApi.getLoginLogPage(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 = (data: LoginLogApi.LoginLogVO) => {
+  detailRef.value.open(data)
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await LoginLogApi.exportLoginLog(queryParams)
+    download.excel(data, '登录日志.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/menu/MenuForm.vue b/marketing-ui/admin-ui/src/views/system/menu/MenuForm.vue
new file mode 100644
index 0000000..ddc3d3e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/menu/MenuForm.vue
@@ -0,0 +1,257 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+    >
+      <el-form-item label="上级菜单">
+        <el-tree-select
+          v-model="formData.parentId"
+          :data="menuTree"
+          :default-expanded-keys="[0]"
+          :props="defaultProps"
+          check-strictly
+          node-key="id"
+        />
+      </el-form-item>
+      <el-form-item label="菜单名称" prop="name">
+        <el-input v-model="formData.name" clearable placeholder="请输入菜单名称" />
+      </el-form-item>
+      <el-form-item label="菜单类型" prop="type">
+        <el-radio-group v-model="formData.type">
+          <el-radio-button
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
+            :key="dict.label"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.type !== 3" label="菜单图标">
+        <IconSelect v-model="formData.icon" clearable />
+      </el-form-item>
+      <el-form-item v-if="formData.type !== 3" label="路由地址" prop="path">
+        <template #label>
+          <Tooltip
+            message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
+            title="路由地址"
+          />
+        </template>
+        <el-input v-model="formData.path" clearable placeholder="请输入路由地址" />
+      </el-form-item>
+      <el-form-item v-if="formData.type === 2" label="组件地址" prop="component">
+        <el-input v-model="formData.component" clearable placeholder="例如说：system/user/index" />
+      </el-form-item>
+      <el-form-item v-if="formData.type === 2" label="组件名字" prop="componentName">
+        <el-input v-model="formData.componentName" clearable placeholder="例如说：SystemUser" />
+      </el-form-item>
+      <el-form-item v-if="formData.type !== 1" label="权限标识" prop="permission">
+        <template #label>
+          <Tooltip
+            message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
+            title="权限标识"
+          />
+        </template>
+        <el-input v-model="formData.permission" clearable placeholder="请输入权限标识" />
+      </el-form-item>
+      <el-form-item label="显示排序" prop="sort">
+        <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
+      </el-form-item>
+      <el-form-item label="菜单状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.label"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.type !== 3" label="显示状态" prop="visible">
+        <template #label>
+          <Tooltip message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问" title="显示状态" />
+        </template>
+        <el-radio-group v-model="formData.visible">
+          <el-radio key="true" :value="true" border>显示</el-radio>
+          <el-radio key="false" :value="false" border>隐藏</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.type !== 3" label="总是显示" prop="alwaysShow">
+        <template #label>
+          <Tooltip
+            message="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单"
+            title="总是显示"
+          />
+        </template>
+        <el-radio-group v-model="formData.alwaysShow">
+          <el-radio key="true" :value="true" border>总是</el-radio>
+          <el-radio key="false" :value="false" border>不是</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.type === 2" label="缓存状态" prop="keepAlive">
+        <template #label>
+          <Tooltip
+            message="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段"
+            title="缓存状态"
+          />
+        </template>
+        <el-radio-group v-model="formData.keepAlive">
+          <el-radio key="true" :value="true" border>缓存</el-radio>
+          <el-radio key="false" :value="false" border>不缓存</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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as MenuApi from '@/api/system/menu'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { CommonStatusEnum, SystemMenuTypeEnum } from '@/utils/constants'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'SystemMenuForm' })
+
+const { wsCache } = useCache()
+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: '',
+  permission: '',
+  type: SystemMenuTypeEnum.DIR,
+  sort: Number(undefined),
+  parentId: 0,
+  path: '',
+  icon: '',
+  component: '',
+  componentName: '',
+  status: CommonStatusEnum.ENABLE,
+  visible: true,
+  keepAlive: true,
+  alwaysShow: true
+})
+const formRules = reactive({
+  name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '菜单类型不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
+  path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, parentId?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  if (parentId) {
+    formData.value.parentId = parentId
+  }
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await MenuApi.getMenu(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  // 获得菜单列表
+  await getTree()
+}
+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 {
+    if (
+      formData.value.type === SystemMenuTypeEnum.DIR ||
+      formData.value.type === SystemMenuTypeEnum.MENU
+    ) {
+      if (!isExternal(formData.value.path)) {
+        if (formData.value.parentId === 0 && formData.value.path.charAt(0) !== '/') {
+          message.error('路径必须以 / 开头')
+          return
+        } else if (formData.value.parentId !== 0 && formData.value.path.charAt(0) === '/') {
+          message.error('路径不能以 / 开头')
+          return
+        }
+      }
+    }
+    const data = formData.value as unknown as MenuApi.MenuVO
+    if (formType.value === 'create') {
+      await MenuApi.createMenu(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await MenuApi.updateMenu(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+    // 清空，从而触发刷新
+    wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
+  }
+}
+
+/** 获取下拉框[上级菜单]的数据  */
+const menuTree = ref<Tree[]>([]) // 树形结构
+const getTree = async () => {
+  menuTree.value = []
+  const res = await MenuApi.getSimpleMenusList()
+  let menu: Tree = { id: 0, name: '主类目', children: [] }
+  menu.children = handleTree(res)
+  menuTree.value.push(menu)
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    permission: '',
+    type: SystemMenuTypeEnum.DIR,
+    sort: Number(undefined),
+    parentId: 0,
+    path: '',
+    icon: '',
+    component: '',
+    componentName: '',
+    status: CommonStatusEnum.ENABLE,
+    visible: true,
+    keepAlive: true,
+    alwaysShow: true
+  }
+  formRef.value?.resetFields()
+}
+
+/** 判断 path 是不是外部的 HTTP 等链接 */
+const isExternal = (path: string) => {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/menu/index.vue b/marketing-ui/admin-ui/src/views/system/menu/index.vue
new file mode 100644
index 0000000..d0b3471
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/menu/index.vue
@@ -0,0 +1,316 @@
+<template>
+
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="菜单名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          class="!w-240px"
+          clearable
+          placeholder="请输入菜单名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          class="!w-240px"
+          clearable
+          placeholder="请选择菜单状态"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <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="['system:menu:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+        <el-button plain type="danger" @click="toggleExpandAll">
+          <Icon class="mr-5px" icon="ep:sort" />
+          展开/折叠
+        </el-button>
+        <el-button plain @click="refreshMenu">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          刷新菜单缓存
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-auto-resizer>
+      <template #default="{ width }">
+        <el-table-v2
+          v-model:expanded-row-keys="expandedRowKeys"
+          :columns="columns"
+          :data="list"
+          :expand-column-key="columns[0].key"
+          :height="1000"
+          :width="width"
+          fixed
+          row-key="id"
+        />
+      </template>
+    </el-auto-resizer>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <MenuForm ref="formRef" @success="getList" />
+</template>
+<script lang="tsx" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { handleTree } from '@/utils/tree'
+import * as MenuApi from '@/api/system/menu'
+import { MenuVO } from '@/api/system/menu'
+import MenuForm from './MenuForm.vue'
+import DictTag from '@/components/DictTag/src/DictTag.vue'
+import { Icon } from '@/components/Icon'
+import { ElButton, TableV2FixedDir } from 'element-plus'
+import { checkPermi } from '@/utils/permission'
+import { CommonStatusEnum } from '@/utils/constants'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+
+defineOptions({ name: 'SystemMenu' })
+
+// 虚拟列表表格
+const columns = [
+  {
+    key: 'name',
+    title: '菜单名称',
+    dataKey: 'name',
+    width: 250,
+    fixed: TableV2FixedDir.LEFT
+  },
+  {
+    key: 'icon',
+    title: '图标',
+    dataKey: 'icon',
+    width: 100,
+    align: 'center',
+    cellRenderer: ({ cellData: icon }) => <Icon icon={icon} />
+  },
+  {
+    key: 'sort',
+    title: '排序',
+    dataKey: 'sort',
+    width: 60
+  },
+  {
+    key: 'permission',
+    title: '权限标识',
+    dataKey: 'permission',
+    width: 300
+  },
+  {
+    key: 'component',
+    title: '组件路径',
+    dataKey: 'component',
+    width: 500
+  },
+  {
+    key: 'componentName',
+    title: '组件名称',
+    dataKey: 'componentName',
+    width: 200
+  },
+  {
+    key: 'status',
+    title: '状态',
+    dataKey: 'status',
+    width: 60,
+    fixed: TableV2FixedDir.RIGHT,
+    cellRenderer: ({ rowData }) => {
+      // 检查权限
+      if (!checkPermi(['system:menu:update'])) {
+        return <DictTag type={DICT_TYPE.COMMON_STATUS} value={rowData.status} />
+      }
+
+      // 如果有权限，渲染 ElSwitch
+      return (
+        <ElSwitch
+          v-model={rowData.status}
+          active-value={CommonStatusEnum.ENABLE}
+          inactive-value={CommonStatusEnum.DISABLE}
+          loading={menuStatusUpdating[rowData.id]}
+          class="ml-4px"
+          onChange={(val) => handleStatusChanged(rowData, val)}
+        />
+      )
+    }
+  },
+  {
+    key: 'operations',
+    title: '操作',
+    align: 'center',
+    width: 160,
+    fixed: TableV2FixedDir.RIGHT,
+    cellRenderer: ({ rowData }) => {
+      // 定义按钮列表
+      const buttons = []
+
+      // 检查权限并添加按钮
+      if (checkPermi(['system:menu:update'])) {
+        buttons.push(
+          <ElButton key="edit" link type="primary" onClick={() => openForm('update', rowData.id)}>
+            修改
+          </ElButton>
+        )
+      }
+      if (checkPermi(['system:menu:create'])) {
+        buttons.push(
+          <ElButton
+            key="create"
+            link
+            type="primary"
+            onClick={() => openForm('create', undefined, rowData.id)}
+          >
+            新增
+          </ElButton>
+        )
+      }
+      if (checkPermi(['system:menu:delete'])) {
+        buttons.push(
+          <ElButton key="delete" link type="danger" onClick={() => handleDelete(rowData.id)}>
+            删除
+          </ElButton>
+        )
+      }
+      // 如果没有权限，返回 null
+      if (buttons.length === 0) {
+        return null
+      }
+      // 渲染按钮列表
+      return <>{buttons}</>
+    }
+  }
+]
+
+const { wsCache } = useCache()
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const list = ref<any[]>([]) // 列表的数据
+const queryParams = reactive({
+  name: undefined,
+  status: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const isExpandAll = ref(false) // 是否展开，默认全部折叠
+const refreshTable = ref(true) // 重新渲染表格状态
+
+// 添加展开行控制
+const expandedRowKeys = ref<number[]>([])
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await MenuApi.getMenuList(queryParams)
+    list.value = handleTree(data)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number, parentId?: number) => {
+  formRef.value.open(type, id, parentId)
+}
+
+/** 展开/折叠操作 */
+const toggleExpandAll = () => {
+  if (!isExpandAll.value) {
+    // 展开所有
+    expandedRowKeys.value = list.value.map((item) => item.id)
+  } else {
+    // 折叠所有
+    expandedRowKeys.value = []
+  }
+  isExpandAll.value = !isExpandAll.value
+}
+
+/** 刷新菜单缓存按钮操作 */
+const refreshMenu = async () => {
+  try {
+    await message.confirm('即将更新缓存刷新浏览器！', '刷新菜单缓存')
+    // 清空，从而触发刷新
+    wsCache.delete(CACHE_KEY.USER)
+    wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
+    // 刷新浏览器
+    location.reload()
+  } catch {}
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await MenuApi.deleteMenu(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 开启/关闭菜单的状态 */
+const menuStatusUpdating = ref({}) // 菜单状态更新中的 menu 映射。key：菜单编号，value：是否更新中
+const handleStatusChanged = async (menu: MenuVO, val: number) => {
+  // 1. 标记 menu.id 更新中
+  menuStatusUpdating.value[menu.id] = true
+  try {
+    // 2. 发起更新状态
+    menu.status = val
+    await MenuApi.updateMenu(menu)
+  } finally {
+    // 3. 标记 menu.id 更新完成
+    menuStatusUpdating.value[menu.id] = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/notice/NoticeForm.vue b/marketing-ui/admin-ui/src/views/system/notice/NoticeForm.vue
new file mode 100644
index 0000000..5c18d80
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/notice/NoticeForm.vue
@@ -0,0 +1,132 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="800">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="公告标题" prop="title">
+        <el-input v-model="formData.title" placeholder="请输入公告标题" />
+      </el-form-item>
+      <el-form-item label="公告内容" prop="content">
+        <Editor v-model="formData.content" height="150px" />
+      </el-form-item>
+      <el-form-item label="公告类型" prop="type">
+        <el-select v-model="formData.type" clearable placeholder="请选择公告类型">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_NOTICE_TYPE)"
+            :key="parseInt(dict.value as any)"
+            :label="dict.label"
+            :value="parseInt(dict.value as any)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="formData.status" clearable placeholder="请选择状态">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="parseInt(dict.value as any)"
+            :label="dict.label"
+            :value="parseInt(dict.value as any)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输备注" type="textarea" />
+      </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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as NoticeApi from '@/api/system/notice'
+
+defineOptions({ name: 'SystemNoticeForm' })
+
+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,
+  title: '',
+  type: undefined,
+  content: '',
+  status: CommonStatusEnum.ENABLE,
+  remark: ''
+})
+const formRules = reactive({
+  title: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '公告类型不能为空', trigger: 'change' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
+  content: [{ 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 NoticeApi.getNotice(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 NoticeApi.NoticeVO
+    if (formType.value === 'create') {
+      await NoticeApi.createNotice(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await NoticeApi.updateNotice(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    title: '',
+    type: undefined,
+    content: '',
+    status: CommonStatusEnum.ENABLE,
+    remark: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/notice/index.vue b/marketing-ui/admin-ui/src/views/system/notice/index.vue
new file mode 100644
index 0000000..f482f91
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/notice/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="title">
+        <el-input
+          v-model="queryParams.title"
+          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 getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :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>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['system:notice:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="公告编号" align="center" prop="id" />
+      <el-table-column label="公告标题" align="center" prop="title" />
+      <el-table-column label="公告类型" align="center" prop="type">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_NOTICE_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <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="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['system:notice:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['system:notice:delete']"
+          >
+            删除
+          </el-button>
+          <el-button link @click="handlePush(scope.row.id)" v-hasPermi="['system:notice:update']">
+            推送
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <NoticeForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as NoticeApi from '@/api/system/notice'
+import NoticeForm from './NoticeForm.vue'
+
+defineOptions({ name: 'SystemNotice' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  title: '',
+  type: undefined,
+  status: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询公告列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await NoticeApi.getNoticePage(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 NoticeApi.deleteNotice(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 推送按钮操作 */
+const handlePush = async (id: number) => {
+  try {
+    // 推送的二次确认
+    await message.confirm('是否推送所选中通知？')
+    // 发起推送
+    await NoticeApi.pushNotice(id)
+    message.success(t('推送成功'))
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/operatelog/OperateLogDetail.vue b/marketing-ui/admin-ui/src/views/system/operatelog/OperateLogDetail.vue
new file mode 100644
index 0000000..150edc8
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/operatelog/OperateLogDetail.vue
@@ -0,0 +1,68 @@
+<template>
+  <Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="详情" width="800">
+    <el-descriptions :column="1" border>
+      <el-descriptions-item label="日志主键" min-width="120">
+        {{ detailData.id }}
+      </el-descriptions-item>
+      <el-descriptions-item label="链路追踪" v-if="detailData.traceId">
+        {{ detailData.traceId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作人编号">
+        {{ detailData.userId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作人名字">
+        {{ detailData.userName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作人 IP">
+        {{ detailData.userIp }}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作人 UA">
+        {{ detailData.userAgent }}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作模块">
+        {{ detailData.type }}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作名">
+        {{ detailData.subType }}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作内容">
+        {{ detailData.action }}
+      </el-descriptions-item>
+      <el-descriptions-item v-if="detailData.extra" label="操作拓展参数">
+        {{ detailData.extra }}
+      </el-descriptions-item>
+      <el-descriptions-item label="请求 URL">
+        {{ detailData.requestMethod }} {{ detailData.requestUrl }}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作时间">
+        {{ formatDate(detailData.createTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="业务编号">
+        {{ detailData.bizId }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import * as OperateLogApi from '@/api/system/operatelog'
+
+defineOptions({ name: 'SystemOperateLogDetail' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({} as OperateLogApi.OperateLogVO) // 详情数据
+
+/** 打开弹窗 */
+const open = async (data: OperateLogApi.OperateLogVO) => {
+  dialogVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = data
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/operatelog/index.vue b/marketing-ui/admin-ui/src/views/system/operatelog/index.vue
new file mode 100644
index 0000000..508fd56
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/operatelog/index.vue
@@ -0,0 +1,212 @@
+<template>
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="操作人" prop="userId">
+        <el-select
+          v-model="queryParams.userId"
+          clearable
+          filterable
+          placeholder="请输入操作人员"
+          class="!w-240px"
+        >
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作模块" prop="type">
+        <el-input
+          v-model="queryParams.type"
+          placeholder="请输入操作模块"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="操作名" prop="subType">
+        <el-input
+          v-model="queryParams.subType"
+          placeholder="请输入操作名"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="操作内容" prop="action">
+        <el-input
+          v-model="queryParams.action"
+          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 label="业务编号" prop="bizId">
+        <el-input
+          v-model="queryParams.bizId"
+          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="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:operate-log:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="日志编号" align="center" prop="id" width="100" />
+      <el-table-column label="操作人" align="center" prop="userName" width="120" />
+      <el-table-column label="操作模块" align="center" prop="type" width="120" />
+      <el-table-column label="操作名" align="center" prop="subType" width="160" />
+      <el-table-column label="操作内容" align="center" prop="action" />
+      <el-table-column
+        label="操作时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="业务编号" align="center" prop="bizId" width="120" />
+      <el-table-column label="操作 IP" align="center" prop="userIp" width="120" />
+      <el-table-column label="操作" align="center" fixed="right" width="60">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openDetail(scope.row)"
+            v-hasPermi="['system:operate-log:query']"
+          >
+            详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：详情 -->
+  <OperateLogDetail ref="detailRef" />
+</template>
+<script lang="ts" setup>
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as OperateLogApi from '@/api/system/operatelog'
+import OperateLogDetail from './OperateLogDetail.vue'
+import * as UserApi from '@/api/system/user'
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
+
+defineOptions({ name: 'SystemOperateLog' })
+
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: undefined,
+  type: undefined,
+  subType: undefined,
+  action: undefined,
+  createTime: [],
+  bizId: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await OperateLogApi.getOperateLogPage(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 = (data: OperateLogApi.OperateLogVO) => {
+  detailRef.value.open(data)
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await OperateLogApi.exportOperateLog(queryParams)
+    download.excel(data, '操作日志.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 获得用户列表
+  userList.value = await UserApi.getSimpleUserList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/post/PostForm.vue b/marketing-ui/admin-ui/src/views/system/post/PostForm.vue
new file mode 100644
index 0000000..1894e0c
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/post/PostForm.vue
@@ -0,0 +1,125 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="800">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="岗位标题" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入岗位标题" />
+      </el-form-item>
+      <el-form-item label="岗位编码" prop="code">
+        <el-input v-model="formData.code" 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-select v-model="formData.status" clearable placeholder="请选择状态">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输备注" type="textarea" />
+      </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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as PostApi from '@/api/system/post'
+
+defineOptions({ name: 'SystemPostForm' })
+
+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: '',
+  code: '',
+  sort: 0,
+  status: CommonStatusEnum.ENABLE,
+  remark: ''
+})
+const formRules = reactive({
+  name: [{ required: true, message: '岗位标题不能为空', trigger: 'blur' }],
+  code: [{ required: true, message: '岗位编码不能为空', trigger: 'change' }],
+  status: [{ required: true, message: '岗位状态不能为空', trigger: 'change' }],
+  remark: [{ required: false, 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 PostApi.getPost(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 PostApi.PostVO
+    if (formType.value === 'create') {
+      await PostApi.createPost(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await PostApi.updatePost(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    code: '',
+    sort: undefined,
+    status: CommonStatusEnum.ENABLE,
+    remark: ''
+  } as any
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/post/index.vue b/marketing-ui/admin-ui/src/views/system/post/index.vue
new file mode 100644
index 0000000..ee0f0e7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/post/index.vue
@@ -0,0 +1,203 @@
+<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
+          class="!w-240px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="岗位编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入岗位编码"
+          clearable
+          class="!w-240px"
+          @keyup.enter="handleQuery"
+        />
+      </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 getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :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>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['system:post:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:post:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="岗位编号" align="center" prop="id" />
+      <el-table-column label="岗位名称" align="center" prop="name" />
+      <el-table-column label="岗位编码" align="center" prop="code" />
+      <el-table-column label="岗位顺序" align="center" prop="sort" />
+      <el-table-column label="岗位备注" align="center" prop="remark" />
+      <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="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['system:post:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['system:post: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <PostForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as PostApi from '@/api/system/post'
+import PostForm from './PostForm.vue'
+
+defineOptions({ name: 'SystemPost' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  code: '',
+  name: '',
+  status: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询岗位列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await PostApi.getPostPage(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 PostApi.deletePost(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await PostApi.exportPost(queryParams)
+    download.excel(data, '岗位列表.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/role/RoleAssignMenuForm.vue b/marketing-ui/admin-ui/src/views/system/role/RoleAssignMenuForm.vue
new file mode 100644
index 0000000..7c81ef7
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/role/RoleAssignMenuForm.vue
@@ -0,0 +1,153 @@
+<template>
+  <Dialog v-model="dialogVisible" title="菜单权限">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
+      <el-form-item label="角色名称">
+        <el-tag>{{ formData.name }}</el-tag>
+      </el-form-item>
+      <el-form-item label="角色标识">
+        <el-tag>{{ formData.code }}</el-tag>
+      </el-form-item>
+      <el-form-item label="菜单权限">
+        <el-card class="w-full h-400px !overflow-y-scroll" shadow="never">
+          <template #header>
+            全选/全不选:
+            <el-switch
+              v-model="treeNodeAll"
+              active-text="是"
+              inactive-text="否"
+              inline-prompt
+              @change="handleCheckedTreeNodeAll"
+            />
+            全部展开/折叠:
+            <el-switch
+              v-model="menuExpand"
+              active-text="展开"
+              inactive-text="折叠"
+              inline-prompt
+              @change="handleCheckedTreeExpand"
+            />
+          </template>
+          <el-tree
+            ref="treeRef"
+            :data="menuOptions"
+            :props="defaultProps"
+            empty-text="加载中，请稍候"
+            node-key="id"
+            show-checkbox
+          />
+        </el-card>
+      </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 { defaultProps, handleTree } from '@/utils/tree'
+import * as RoleApi from '@/api/system/role'
+import * as MenuApi from '@/api/system/menu'
+import * as PermissionApi from '@/api/system/permission'
+
+defineOptions({ name: 'SystemRoleAssignMenuForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = reactive({
+  id: undefined,
+  name: '',
+  code: '',
+  menuIds: []
+})
+const formRef = ref() // 表单 Ref
+const menuOptions = ref<any[]>([]) // 菜单树形结构
+const menuExpand = ref(false) // 展开/折叠
+const treeRef = ref() // 菜单树组件 Ref
+const treeNodeAll = ref(false) // 全选/全不选
+
+/** 打开弹窗 */
+const open = async (row: RoleApi.RoleVO) => {
+  dialogVisible.value = true
+  resetForm()
+  // 加载 Menu 列表。注意，必须放在前面，不然下面 setChecked 没数据节点
+  menuOptions.value = handleTree(await MenuApi.getSimpleMenusList())
+  // 设置数据
+  formData.id = row.id
+  formData.name = row.name
+  formData.code = row.code
+  formLoading.value = true
+  try {
+    formData.value.menuIds = await PermissionApi.getRoleMenuList(row.id)
+    // 设置选中
+    formData.value.menuIds.forEach((menuId: number) => {
+      treeRef.value.setChecked(menuId, true, false)
+    })
+  } 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 = {
+      roleId: formData.id,
+      menuIds: [
+        ...(treeRef.value.getCheckedKeys(false) as unknown as Array<number>), // 获得当前选中节点
+        ...(treeRef.value.getHalfCheckedKeys() as unknown as Array<number>) // 获得半选中的父节点
+      ]
+    }
+    await PermissionApi.assignRoleMenu(data)
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  // 重置选项
+  treeNodeAll.value = false
+  menuExpand.value = false
+  // 重置表单
+  formData.value = {
+    id: undefined,
+    name: '',
+    code: '',
+    menuIds: []
+  }
+  treeRef.value?.setCheckedNodes([])
+  formRef.value?.resetFields()
+}
+
+/** 全选/全不选 */
+const handleCheckedTreeNodeAll = () => {
+  treeRef.value.setCheckedNodes(treeNodeAll.value ? menuOptions.value : [])
+}
+
+/** 展开/折叠全部 */
+const handleCheckedTreeExpand = () => {
+  const nodes = treeRef.value?.store.nodesMap
+  for (let node in nodes) {
+    if (nodes[node].expanded === menuExpand.value) {
+      continue
+    }
+    nodes[node].expanded = menuExpand.value
+  }
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/role/RoleDataPermissionForm.vue b/marketing-ui/admin-ui/src/views/system/role/RoleDataPermissionForm.vue
new file mode 100644
index 0000000..1243435
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/role/RoleDataPermissionForm.vue
@@ -0,0 +1,169 @@
+<template>
+  <Dialog v-model="dialogVisible" title="数据权限" width="800">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
+      <el-form-item label="角色名称">
+        <el-tag>{{ formData.name }}</el-tag>
+      </el-form-item>
+      <el-form-item label="角色标识">
+        <el-tag>{{ formData.code }}</el-tag>
+      </el-form-item>
+      <el-form-item label="权限范围">
+        <el-select v-model="formData.dataScope">
+          <el-option
+            v-for="item in getIntDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE)"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-form-item
+      v-if="formData.dataScope === SystemDataScopeEnum.DEPT_CUSTOM"
+      label="部门范围"
+      label-width="80px"
+    >
+      <el-card class="w-full h-400px !overflow-y-scroll" shadow="never">
+        <template #header>
+          全选/全不选:
+          <el-switch
+            v-model="treeNodeAll"
+            active-text="是"
+            inactive-text="否"
+            inline-prompt
+            @change="handleCheckedTreeNodeAll()"
+          />
+          全部展开/折叠:
+          <el-switch
+            v-model="deptExpand"
+            active-text="展开"
+            inactive-text="折叠"
+            inline-prompt
+            @change="handleCheckedTreeExpand"
+          />
+          父子联动(选中父节点，自动选择子节点):
+          <el-switch v-model="checkStrictly" active-text="是" inactive-text="否" inline-prompt />
+        </template>
+        <el-tree
+          ref="treeRef"
+          :check-strictly="!checkStrictly"
+          :data="deptOptions"
+          :props="defaultProps"
+          default-expand-all
+          empty-text="加载中，请稍后"
+          node-key="id"
+          show-checkbox
+        />
+      </el-card>
+    </el-form-item>
+    <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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { defaultProps, handleTree } from '@/utils/tree'
+import { SystemDataScopeEnum } from '@/utils/constants'
+import * as RoleApi from '@/api/system/role'
+import * as DeptApi from '@/api/system/dept'
+import * as PermissionApi from '@/api/system/permission'
+
+defineOptions({ name: 'SystemRoleDataPermissionForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = reactive({
+  id: undefined,
+  name: '',
+  code: '',
+  dataScope: undefined,
+  dataScopeDeptIds: []
+})
+const formRef = ref() // 表单 Ref
+const deptOptions = ref<any[]>([]) // 部门树形结构
+const deptExpand = ref(true) // 展开/折叠
+const treeRef = ref() // 菜单树组件 Ref
+const treeNodeAll = ref(false) // 全选/全不选
+const checkStrictly = ref(true) // 是否严格模式，即父子不关联
+
+/** 打开弹窗 */
+const open = async (row: RoleApi.RoleVO) => {
+  dialogVisible.value = true
+  resetForm()
+  // 加载 Dept 列表。注意，必须放在前面，不然下面 setChecked 没数据节点
+  deptOptions.value = handleTree(await DeptApi.getSimpleDeptList())
+  // 设置数据
+  formData.id = row.id
+  formData.name = row.name
+  formData.code = row.code
+  formData.dataScope = row.dataScope
+  await nextTick()
+  // 需要在 DOM 渲染完成后，再设置选中状态
+  row.dataScopeDeptIds?.forEach((deptId: number): void => {
+    treeRef.value.setChecked(deptId, true, false)
+  })
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  formLoading.value = true
+  try {
+    const data = {
+      roleId: formData.id,
+      dataScope: formData.dataScope,
+      dataScopeDeptIds:
+        formData.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM
+          ? []
+          : treeRef.value.getCheckedKeys(false)
+    }
+    await PermissionApi.assignRoleDataScope(data)
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  // 重置选项
+  treeNodeAll.value = false
+  deptExpand.value = true
+  checkStrictly.value = true
+  // 重置表单
+  formData.value = {
+    id: undefined,
+    name: '',
+    code: '',
+    dataScope: undefined,
+    dataScopeDeptIds: []
+  }
+  treeRef.value?.setCheckedNodes([])
+  formRef.value?.resetFields()
+}
+
+/** 全选/全不选 */
+const handleCheckedTreeNodeAll = () => {
+  treeRef.value.setCheckedNodes(treeNodeAll.value ? deptOptions.value : [])
+}
+
+/** 展开/折叠全部 */
+const handleCheckedTreeExpand = () => {
+  const nodes = treeRef.value?.store.nodesMap
+  for (let node in nodes) {
+    if (nodes[node].expanded === deptExpand.value) {
+      continue
+    }
+    nodes[node].expanded = deptExpand.value
+  }
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/role/RoleForm.vue b/marketing-ui/admin-ui/src/views/system/role/RoleForm.vue
new file mode 100644
index 0000000..161b757
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/role/RoleForm.vue
@@ -0,0 +1,126 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="角色名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入角色名称" />
+      </el-form-item>
+      <el-form-item label="角色标识" prop="code">
+        <el-input v-model="formData.code" 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-select v-model="formData.status" clearable placeholder="请选择状态">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输备注" type="textarea" />
+      </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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as RoleApi from '@/api/system/role'
+
+defineOptions({ name: 'SystemRoleForm' })
+
+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: '',
+  code: '',
+  sort: undefined,
+  status: CommonStatusEnum.ENABLE,
+  remark: ''
+})
+const formRules = reactive({
+  name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+  code: [{ required: true, message: '角色标识不能为空', trigger: 'change' }],
+  sort: [{ required: true, message: '显示顺序不能为空', trigger: 'change' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
+  remark: [{ required: false, 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 RoleApi.getRole(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    code: '',
+    sort: undefined,
+    status: CommonStatusEnum.ENABLE,
+    remark: ''
+  }
+  formRef.value?.resetFields()
+}
+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 RoleApi.RoleVO
+    if (formType.value === 'create') {
+      await RoleApi.createRole(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await RoleApi.updateRole(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/role/index.vue b/marketing-ui/admin-ui/src/views/system/role/index.vue
new file mode 100644
index 0000000..ddc2d1e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/role/index.vue
@@ -0,0 +1,267 @@
+<template>
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="角色名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          class="!w-240px"
+          clearable
+          placeholder="请输入角色名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="角色标识" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          class="!w-240px"
+          clearable
+          placeholder="请输入角色标识"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :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"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item>
+        <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="['system:role:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+        <el-button
+          v-hasPermi="['system:role:export']"
+          :loading="exportLoading"
+          plain
+          type="success"
+          @click="handleExport"
+        >
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column align="center" label="角色编号" prop="id" />
+      <el-table-column align="center" label="角色名称" prop="name" />
+      <el-table-column label="角色类型" align="center" prop="type">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_ROLE_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="角色标识" prop="code" />
+      <el-table-column align="center" label="显示顺序" prop="sort" />
+      <el-table-column align="center" label="备注" prop="remark" />
+      <el-table-column align="center" label="状态" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180"
+      />
+      <el-table-column :width="300" align="center" label="操作">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['system:role:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-hasPermi="['system:permission:assign-role-menu']"
+            link
+            preIcon="ep:basketball"
+            title="菜单权限"
+            type="primary"
+            @click="openAssignMenuForm(scope.row)"
+          >
+            菜单权限
+          </el-button>
+          <el-button
+            v-hasPermi="['system:permission:assign-role-data-scope']"
+            link
+            preIcon="ep:coin"
+            title="数据权限"
+            type="primary"
+            @click="openDataPermissionForm(scope.row)"
+          >
+            数据权限
+          </el-button>
+          <el-button
+            v-hasPermi="['system:role:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <RoleForm ref="formRef" @success="getList" />
+  <!-- 表单弹窗：菜单权限 -->
+  <RoleAssignMenuForm ref="assignMenuFormRef" @success="getList" />
+  <!-- 表单弹窗：数据权限 -->
+  <RoleDataPermissionForm ref="dataPermissionFormRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as RoleApi from '@/api/system/role'
+import RoleForm from './RoleForm.vue'
+import RoleAssignMenuForm from './RoleAssignMenuForm.vue'
+import RoleDataPermissionForm from './RoleDataPermissionForm.vue'
+
+defineOptions({ name: 'SystemRole' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  code: '',
+  name: '',
+  status: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询角色列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await RoleApi.getRolePage(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 dataPermissionFormRef = ref()
+const openDataPermissionForm = async (row: RoleApi.RoleVO) => {
+  dataPermissionFormRef.value.open(row)
+}
+
+/** 菜单权限操作 */
+const assignMenuFormRef = ref()
+const openAssignMenuForm = async (row: RoleApi.RoleVO) => {
+  assignMenuFormRef.value.open(row)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await RoleApi.deleteRole(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await RoleApi.exportRole(queryParams)
+    download.excel(data, '角色列表.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/user/DeptTree.vue b/marketing-ui/admin-ui/src/views/system/user/DeptTree.vue
new file mode 100644
index 0000000..ab8ba06
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/user/DeptTree.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称">
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+  </div>
+  <div class="head-container">
+    <el-tree
+      ref="treeRef"
+      :data="deptList"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :props="defaultProps"
+      default-expand-all
+      highlight-current
+      node-key="id"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElTree } from 'element-plus'
+import * as DeptApi from '@/api/system/dept'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'SystemUserDeptTree' })
+
+const deptName = ref('')
+const deptList = ref<Tree[]>([]) // 树形结构
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+/** 获得部门树 */
+const getTree = async () => {
+  const res = await DeptApi.getSimpleDeptList()
+  deptList.value = []
+  deptList.value.push(...handleTree(res))
+}
+
+/** 基于名字过滤 */
+const filterNode = (name: string, data: Tree) => {
+  if (!name) return true
+  return data.name.includes(name)
+}
+
+/** 处理部门被点击 */
+const handleNodeClick = async (row: { [key: string]: any }) => {
+  emits('node-click', row)
+}
+const emits = defineEmits(['node-click'])
+
+/** 监听deptName */
+watch(deptName, (val) => {
+  treeRef.value!.filter(val)
+})
+
+/** 初始化 */
+onMounted(async () => {
+  await getTree()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/user/UserAssignRoleForm.vue b/marketing-ui/admin-ui/src/views/system/user/UserAssignRoleForm.vue
new file mode 100644
index 0000000..67a5ddb
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/user/UserAssignRoleForm.vue
@@ -0,0 +1,96 @@
+<template>
+  <Dialog v-model="dialogVisible" title="分配角色">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
+      <el-form-item label="用户名称">
+        <el-input v-model="formData.username" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="用户昵称">
+        <el-input v-model="formData.nickname" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="角色">
+        <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
+          <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </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 PermissionApi from '@/api/system/permission'
+import * as UserApi from '@/api/system/user'
+import * as RoleApi from '@/api/system/role'
+
+defineOptions({ name: 'SystemUserAssignRoleForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: -1,
+  nickname: '',
+  username: '',
+  roleIds: []
+})
+const formRef = ref() // 表单 Ref
+const roleList = ref([] as RoleApi.RoleVO[]) // 角色的列表
+
+/** 打开弹窗 */
+const open = async (row: UserApi.UserVO) => {
+  dialogVisible.value = true
+  resetForm()
+  // 设置数据
+  formData.value.id = row.id
+  formData.value.username = row.username
+  formData.value.nickname = row.nickname
+  // 获得角色拥有的菜单集合
+  formLoading.value = true
+  try {
+    formData.value.roleIds = await PermissionApi.getUserRoleList(row.id)
+  } finally {
+    formLoading.value = false
+  }
+  // 获得角色列表
+  roleList.value = await RoleApi.getSimpleRoleList()
+}
+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 {
+    await PermissionApi.assignUserRole({
+      userId: formData.value.id,
+      roleIds: formData.value.roleIds
+    })
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success', true)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: -1,
+    nickname: '',
+    username: '',
+    roleIds: []
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/user/UserForm.vue b/marketing-ui/admin-ui/src/views/system/user/UserForm.vue
new file mode 100644
index 0000000..630688a
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/user/UserForm.vue
@@ -0,0 +1,219 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="用户昵称" prop="nickname">
+            <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="归属部门" prop="deptId">
+            <el-tree-select
+              v-model="formData.deptId"
+              :data="deptList"
+              :props="defaultProps"
+              check-strictly
+              node-key="id"
+              placeholder="请选择归属部门"
+            />
+          </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" maxlength="11" placeholder="请输入手机号码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="formData.email" maxlength="50" placeholder="请输入邮箱" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
+            <el-input v-model="formData.username" placeholder="请输入用户名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
+            <el-input
+              v-model="formData.password"
+              placeholder="请输入用户密码"
+              show-password
+              type="password"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="用户性别">
+            <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-col>
+        <el-col :span="12">
+          <el-form-item label="岗位">
+            <el-select v-model="formData.postIds" multiple placeholder="请选择">
+              <el-option
+                v-for="item in postList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id!"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注">
+            <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as PostApi from '@/api/system/post'
+import * as DeptApi from '@/api/system/dept'
+import * as UserApi from '@/api/system/user'
+import { FormRules } from 'element-plus'
+
+defineOptions({ name: 'SystemUserForm' })
+
+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({
+  nickname: '',
+  deptId: '',
+  mobile: '',
+  email: '',
+  id: undefined,
+  username: '',
+  password: '',
+  sex: undefined,
+  postIds: [],
+  remark: '',
+  status: CommonStatusEnum.ENABLE,
+  roleIds: []
+})
+const formRules = reactive<FormRules>({
+  username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
+  nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
+  password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
+  email: [
+    {
+      type: 'email',
+      message: '请输入正确的邮箱地址',
+      trigger: ['blur', 'change']
+    }
+  ],
+  mobile: [
+    {
+      pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
+      message: '请输入正确的手机号码',
+      trigger: 'blur'
+    }
+  ]
+})
+const formRef = ref() // 表单 Ref
+const deptList = ref<Tree[]>([]) // 树形结构
+const postList = ref([] as PostApi.PostVO[]) // 岗位列表
+
+/** 打开弹窗 */
+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 UserApi.getUser(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  // 加载部门树
+  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
+  // 加载岗位列表
+  postList.value = await PostApi.getSimplePostList()
+}
+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 UserApi.UserVO
+    if (formType.value === 'create') {
+      await UserApi.createUser(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await UserApi.updateUser(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    nickname: '',
+    deptId: '',
+    mobile: '',
+    email: '',
+    id: undefined,
+    username: '',
+    password: '',
+    sex: undefined,
+    postIds: [],
+    remark: '',
+    status: CommonStatusEnum.ENABLE,
+    roleIds: []
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/user/UserImportForm.vue b/marketing-ui/admin-ui/src/views/system/user/UserImportForm.vue
new file mode 100644
index 0000000..260531d
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/user/UserImportForm.vue
@@ -0,0 +1,138 @@
+<template>
+  <Dialog v-model="dialogVisible" title="用户导入" width="400">
+    <el-upload
+      ref="uploadRef"
+      v-model:file-list="fileList"
+      :action="importUrl + '?updateSupport=' + updateSupport"
+      :auto-upload="false"
+      :disabled="formLoading"
+      :headers="uploadHeaders"
+      :limit="1"
+      :on-error="submitFormError"
+      :on-exceed="handleExceed"
+      :on-success="submitFormSuccess"
+      accept=".xlsx, .xls"
+      drag
+    >
+      <Icon icon="ep:upload" />
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <template #tip>
+        <div class="el-upload__tip text-center">
+          <div class="el-upload__tip">
+            <el-checkbox v-model="updateSupport" />
+            是否更新已经存在的用户数据
+          </div>
+          <span>仅允许导入 xls、xlsx 格式文件。</span>
+          <el-link
+            :underline="false"
+            style="font-size: 12px; vertical-align: baseline"
+            type="primary"
+            @click="importTemplate"
+          >
+            下载模板
+          </el-link>
+        </div>
+      </template>
+    </el-upload>
+    <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'
+import { getAccessToken } from '@/utils/auth'
+import download from '@/utils/download'
+
+defineOptions({ name: 'SystemUserImportForm' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const uploadRef = ref()
+const importUrl =
+  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/user/import'
+const uploadHeaders = ref() // 上传 Header 头
+const fileList = ref([]) // 文件列表
+const updateSupport = ref(0) // 是否更新已经存在的用户数据
+
+/** 打开弹窗 */
+const open = () => {
+  dialogVisible.value = true
+  updateSupport.value = 0
+  fileList.value = []
+  resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  if (fileList.value.length == 0) {
+    message.error('请上传文件')
+    return
+  }
+  // 提交请求
+  uploadHeaders.value = {
+    Authorization: 'Bearer ' + getAccessToken(),
+    'tenant-id': getTenantId()
+  }
+  formLoading.value = true
+  uploadRef.value!.submit()
+}
+
+/** 文件上传成功 */
+const emits = defineEmits(['success'])
+const submitFormSuccess = (response: any) => {
+  if (response.code !== 0) {
+    message.error(response.msg)
+    formLoading.value = false
+    return
+  }
+  // 拼接提示语
+  const data = response.data
+  let text = '上传成功数量：' + data.createUsernames.length + ';'
+  for (let username of data.createUsernames) {
+    text += '< ' + username + ' >'
+  }
+  text += '更新成功数量：' + data.updateUsernames.length + ';'
+  for (const username of data.updateUsernames) {
+    text += '< ' + username + ' >'
+  }
+  text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
+  for (const username in data.failureUsernames) {
+    text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
+  }
+  message.alert(text)
+  formLoading.value = false
+  dialogVisible.value = false
+  // 发送操作成功的事件
+  emits('success')
+}
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+  message.error('上传失败，请您重新上传！')
+  formLoading.value = false
+}
+
+/** 重置表单 */
+const resetForm = async (): Promise<void> => {
+  // 重置上传状态和文件
+  formLoading.value = false
+  await nextTick()
+  uploadRef.value?.clearFiles()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+  message.error('最多只能上传一个文件！')
+}
+
+/** 下载模板操作 */
+const importTemplate = async () => {
+  const res = await UserApi.importUserTemplate()
+  download.excel(res, '用户导入模版.xls')
+}
+</script>
diff --git a/marketing-ui/admin-ui/src/views/system/user/index.vue b/marketing-ui/admin-ui/src/views/system/user/index.vue
new file mode 100644
index 0000000..3c0f666
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/system/user/index.vue
@@ -0,0 +1,360 @@
+<template>
+
+  <el-row :gutter="20">
+    <!-- 左侧部门树 -->
+    <el-col :span="4" :xs="24">
+      <ContentWrap class="h-1/1">
+        <DeptTree @node-click="handleDeptNodeClick" />
+      </ContentWrap>
+    </el-col>
+    <el-col :span="20" :xs="24">
+      <!-- 搜索 -->
+      <ContentWrap>
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="68px"
+        >
+          <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="mobile">
+            <el-input
+              v-model="queryParams.mobile"
+              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 getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :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="datetimerange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+            <el-button
+              type="primary"
+              plain
+              @click="openForm('create')"
+              v-hasPermi="['system:user:create']"
+            >
+              <Icon icon="ep:plus" /> 新增
+            </el-button>
+            <el-button
+              type="warning"
+              plain
+              @click="handleImport"
+              v-hasPermi="['system:user:import']"
+            >
+              <Icon icon="ep:upload" /> 导入
+            </el-button>
+            <el-button
+              type="success"
+              plain
+              @click="handleExport"
+              :loading="exportLoading"
+              v-hasPermi="['system:user:export']"
+            >
+              <Icon icon="ep:download" />导出
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
+      <ContentWrap>
+        <el-table v-loading="loading" :data="list">
+          <el-table-column label="用户编号" align="center" key="id" prop="id" />
+          <el-table-column
+            label="用户名称"
+            align="center"
+            prop="username"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="用户昵称"
+            align="center"
+            prop="nickname"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="部门"
+            align="center"
+            key="deptName"
+            prop="deptName"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
+          <el-table-column label="状态" key="status">
+            <template #default="scope">
+              <el-switch
+                v-model="scope.row.status"
+                :active-value="0"
+                :inactive-value="1"
+                @change="handleStatusChange(scope.row)"
+                :disabled="!checkPermi(['system:user:update'])"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="创建时间"
+            align="center"
+            prop="createTime"
+            :formatter="dateFormatter"
+            width="180"
+          />
+          <el-table-column label="操作" align="center" width="160">
+            <template #default="scope">
+              <div class="flex items-center justify-center">
+                <el-button
+                  type="primary"
+                  link
+                  @click="openForm('update', scope.row.id)"
+                  v-hasPermi="['system:user:update']"
+                >
+                  <Icon icon="ep:edit" />修改
+                </el-button>
+                <el-dropdown
+                  @command="(command) => handleCommand(command, scope.row)"
+                  v-hasPermi="[
+                    'system:user:delete',
+                    'system:user:update-password',
+                    'system:permission:assign-user-role'
+                  ]"
+                >
+                  <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item
+                        command="handleDelete"
+                        v-if="checkPermi(['system:user:delete'])"
+                      >
+                        <Icon icon="ep:delete" />删除
+                      </el-dropdown-item>
+                      <el-dropdown-item
+                        command="handleResetPwd"
+                        v-if="checkPermi(['system:user:update-password'])"
+                      >
+                        <Icon icon="ep:key" />重置密码
+                      </el-dropdown-item>
+                      <el-dropdown-item
+                        command="handleRole"
+                        v-if="checkPermi(['system:permission:assign-user-role'])"
+                      >
+                        <Icon icon="ep:circle-check" />分配角色
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </ContentWrap>
+    </el-col>
+  </el-row>
+
+  <!-- 添加或修改用户对话框 -->
+  <UserForm ref="formRef" @success="getList" />
+  <!-- 用户导入对话框 -->
+  <UserImportForm ref="importFormRef" @success="getList" />
+  <!-- 分配角色 -->
+  <UserAssignRoleForm ref="assignRoleFormRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { checkPermi } from '@/utils/permission'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as UserApi from '@/api/system/user'
+import UserForm from './UserForm.vue'
+import UserImportForm from './UserImportForm.vue'
+import UserAssignRoleForm from './UserAssignRoleForm.vue'
+import DeptTree from './DeptTree.vue'
+
+defineOptions({ name: 'SystemUser' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  username: undefined,
+  mobile: undefined,
+  status: undefined,
+  deptId: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await UserApi.getUserPage(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 handleDeptNodeClick = async (row) => {
+  queryParams.deptId = row.id
+  await getList()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 用户导入 */
+const importFormRef = ref()
+const handleImport = () => {
+  importFormRef.value.open()
+}
+
+/** 修改用户状态 */
+const handleStatusChange = async (row: UserApi.UserVO) => {
+  try {
+    // 修改状态的二次确认
+    const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
+    await message.confirm('确认要"' + text + '""' + row.username + '"用户吗?')
+    // 发起修改状态
+    await UserApi.updateUserStatus(row.id, row.status)
+    // 刷新列表
+    await getList()
+  } catch {
+    // 取消后，进行恢复按钮
+    row.status =
+      row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
+  }
+}
+
+/** 导出按钮操作 */
+const exportLoading = ref(false)
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await UserApi.exportUser(queryParams)
+    download.excel(data, '用户数据.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 操作分发 */
+const handleCommand = (command: string, row: UserApi.UserVO) => {
+  switch (command) {
+    case 'handleDelete':
+      handleDelete(row.id)
+      break
+    case 'handleResetPwd':
+      handleResetPwd(row)
+      break
+    case 'handleRole':
+      handleRole(row)
+      break
+    default:
+      break
+  }
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await UserApi.deleteUser(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 重置密码 */
+const handleResetPwd = async (row: UserApi.UserVO) => {
+  try {
+    // 重置的二次确认
+    const result = await message.prompt(
+      '请输入"' + row.username + '"的新密码',
+      t('common.reminder')
+    )
+    const password = result.value
+    // 发起重置
+    await UserApi.resetUserPassword(row.id, password)
+    message.success('修改成功，新密码是：' + password)
+  } catch {}
+}
+
+/** 分配角色 */
+const assignRoleFormRef = ref()
+const handleRole = (row: UserApi.UserVO) => {
+  assignRoleFormRef.value.open(row)
+}
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/marketing-ui/admin-ui/src/views/tenant/SmsAppinfo/SmsAppinfoForm.vue b/marketing-ui/admin-ui/src/views/tenant/SmsAppinfo/SmsAppinfoForm.vue
new file mode 100644
index 0000000..c30eb72
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/tenant/SmsAppinfo/SmsAppinfoForm.vue
@@ -0,0 +1,214 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+
+      <!--属性/事件	类型	触发时机	用途-->
+      <!--remote	属性	初始化时设置	开启远程搜索模式-->
+      <!--remote-method	属性	输入内容时自动触发	执行搜索逻辑，获取数据-->
+      <!--loading	属性	手动控制	显示加载状态，提升用户体验-->
+      <!--change	事件	选择选项时触发	处理选择变化后的逻辑-->
+      <el-form-item label="租户" prop="tenantId" v-if="formType === 'create'">
+        <el-select v-model="formData.tenantId" filterable clearable
+                   remote
+                   :remote-method="searchTenants"
+                   placeholder="请输入租户名称搜索"
+        >
+          <el-option
+            v-for="tenant in tenantList"
+            :key="tenant.id"
+            :label="tenant.tenantUserName"
+            :value="tenant.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="租户" v-else>
+        <el-input v-model="formData.tenantUserName" disabled />
+      </el-form-item>
+
+      <el-form-item label="应用名" prop="appName">
+        <el-input v-model="formData.appName" placeholder="请输入应用名称" />
+      </el-form-item>
+
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="formData.status"
+          placeholder=""
+          clearable
+        >
+          <el-option label="有效" :value="0" />
+          <el-option label="无效" :value="1" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          :rows="3"
+          placeholder=""
+          resize="none"
+          show-word-limit
+        />
+      </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 { SmsAppinfoApi, SmsAppinfo } from '@/api/tenant/SmsAppinfo'
+import {Tenant, TenantApi} from "@/api/tenant";
+import { computed } from 'vue';
+
+/** 租户应用 表单 */
+defineOptions({ name: 'SmsAppinfoForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+let tenantList = ref<Tenant[]>([])
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  tenantId: undefined,
+  tenantUserName: undefined,
+  appName: undefined,
+  status: undefined,
+  remark: undefined
+})
+
+const tenantInfo = ref({
+  id: undefined,
+  tenantUserName: undefined
+})
+
+
+const formRules = reactive({
+  appName: [{ required: true, message: '应用名称不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
+  tenantId: [{ required: true, message: '租户不能为空', trigger: 'blur', validator: (rule, value, callback) => {
+    // 在编辑模式下，租户字段不是必填的
+    if (formType.value === 'update') {
+      callback()
+    } else {
+      // 在新增模式下，正常验证
+      if (!value) {
+        callback(new Error('租户不能为空'))
+      } else {
+        callback()
+      }
+    }
+  }}]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  
+  // 先获取租户列表数据
+  var tenantPageObj = await TenantApi.getTenantPage({
+    pageNo: 1,
+    pageSize: 10
+  })
+  tenantList.value = tenantPageObj.list
+
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await SmsAppinfoApi.getSmsAppinfo(id);
+    } finally {
+      formLoading.value = false
+    }
+
+    // 查询租户信息
+    tenantInfo.value = await TenantApi.getTenant(formData.value.tenantId)
+    formData.value.tenantUserName = tenantInfo.value.tenantUserName
+  }
+}
+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 SmsAppinfo
+    if (formType.value === 'create') {
+      await SmsAppinfoApi.createSmsAppinfo(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await SmsAppinfoApi.updateSmsAppinfo(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    tenantId: undefined,
+    tenantUserName : undefined,
+    appName: undefined,
+    status: undefined,
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+
+const lastSearchQuery = ref('')
+const tenantSearchLoading = ref(false)
+
+const searchTenants = async (query?: string) => {
+  if (query !== undefined) {
+    lastSearchQuery.value = query;
+  }
+
+  tenantSearchLoading.value = true;
+  try {
+    const params = {
+      pageNo: 1,
+      pageSize: 20,
+      tenantUserName: lastSearchQuery.value || undefined
+    };
+
+    const tenantPageObj = await TenantApi.getTenantPage(params);
+    tenantList.value = tenantPageObj.list;
+  } catch (error) {
+    console.error('搜索租户失败:', error);
+    message.error('搜索租户失败，请重试');
+  } finally {
+    tenantSearchLoading.value = false;
+  }
+}
+
+</script>
+
diff --git a/marketing-ui/admin-ui/src/views/tenant/SmsAppinfo/index.vue b/marketing-ui/admin-ui/src/views/tenant/SmsAppinfo/index.vue
new file mode 100644
index 0000000..c3c96ae
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/tenant/SmsAppinfo/index.vue
@@ -0,0 +1,234 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="密钥Key" prop="appKey">
+        <el-input
+          v-model="queryParams.appKey"
+          placeholder="请输入应用密钥Key"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="应用名称" prop="appName">
+        <el-input
+          v-model="queryParams.appName"
+          placeholder="请输入应用名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="请选择" value="" />
+          <el-option label="正常" value="0" />
+          <el-option label="禁用" value="1" />
+        </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"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['tenant:sms-appinfo:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection"  />
+      <el-table-column label="编号" align="center" prop="id" width="55"/>
+      <el-table-column label="应用名称" align="center" prop="appName"/>
+      <el-table-column label="租户ID" align="center" prop="tenantId" />
+      <el-table-column label="密钥Key" align="center" prop="appKey" />
+      <el-table-column label="密钥Secret" align="center" prop="appSecret" />
+      <el-table-column label="状态" align="center" prop="status" >
+        <template #default="scope">
+          <span :class="{
+            'text-green-500': scope.row.status === 0,
+            'text-gray-500': scope.row.status === 1
+          }">
+            {{ scope.row.status === 0 ? '正常' : '禁用' }}
+          </span>
+        </template>
+      </el-table-column>
+<!--      <el-table-column label="备注信息" align="center" prop="remark" />-->
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="140px"
+      />
+
+      <el-table-column label="操作" align="center" min-width="90px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['tenant:sms-appinfo:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['tenant:sms-appinfo: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <SmsAppinfoForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { SmsAppinfoApi, SmsAppinfo } from '@/api/tenant/SmsAppinfo'
+import SmsAppinfoForm from './SmsAppinfoForm.vue'
+
+/** 租户应用 列表 */
+defineOptions({ name: 'SmsAppinfo' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<SmsAppinfo[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  appKey: undefined,
+  appName: undefined,
+  appSecret: undefined,
+  status: undefined,
+  remark: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await SmsAppinfoApi.getSmsAppinfoPage(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 SmsAppinfoApi.deleteSmsAppinfo(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除租户应用 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await SmsAppinfoApi.deleteSmsAppinfoList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: SmsAppinfo[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await SmsAppinfoApi.exportSmsAppinfo(queryParams)
+    download.excel(data, '租户应用.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/tenant/TenantForm.vue b/marketing-ui/admin-ui/src/views/tenant/TenantForm.vue
new file mode 100644
index 0000000..cb39c7e
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/tenant/TenantForm.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="tenantUserName">
+        <el-input
+          v-model="formData.tenantUserName"
+          placeholder="请输入租户用户名"
+          :disabled="formType === 'update'"
+        />
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input
+          v-model="formData.password"
+          placeholder="请输入密码"
+          type="password"
+          clearable
+        />
+        <div v-if="formType === 'update'" class="text-xs text-gray-500 mt-1">
+          编辑时如不填写密码则不修改
+        </div>
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model="formData.email" placeholder="请输入邮箱" />
+      </el-form-item>
+      <el-form-item label="手机号" prop="mobile">
+        <el-input v-model="formData.mobile" 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 { TenantApi, Tenant } from '@/api/tenant'
+
+/** 租户 表单 */
+defineOptions({ name: 'TenantForm' })
+
+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,
+  tenantUserName: undefined,
+  password: undefined,
+  email: undefined,
+  mobile: undefined,
+  nationcode: '86'
+})
+const formRules = reactive({
+  tenantUserName: [{ required: true, message: '租户用户名不能为空', trigger: 'blur' }],
+  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
+  email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+// 动态校验规则
+const getFormRules = () => {
+  if (formType.value === 'create') {
+    return {
+      tenantUserName: [{ required: true, message: '租户用户名不能为空', trigger: 'blur' }],
+      password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
+      email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]
+    }
+  } else {
+    return {
+      tenantUserName: [{ required: true, message: '租户用户名不能为空', trigger: 'blur' }],
+      email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]
+    }
+  }
+}
+
+/** 打开弹窗 */
+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 data = await TenantApi.getTenant(id)
+      formData.value = {
+        ...data,
+        password: undefined // 编辑时不返回密码
+      }
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 根据表单类型设置不同的校验规则
+  const rules = getFormRules()
+  Object.assign(formRules, rules)
+
+  // 校验表单
+  await formRef.value.validate()
+
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as Tenant
+    if (formType.value === 'create') {
+      await TenantApi.createTenant(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await TenantApi.updateTenant(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    tenantUserName: undefined,
+    password: undefined,
+    email: undefined,
+    mobile: undefined,
+    nationcode: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/src/views/tenant/index.vue b/marketing-ui/admin-ui/src/views/tenant/index.vue
new file mode 100644
index 0000000..9ab1f55
--- /dev/null
+++ b/marketing-ui/admin-ui/src/views/tenant/index.vue
@@ -0,0 +1,242 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="用户名" prop="tenantUserName">
+        <el-input
+          v-model="queryParams.tenantUserName"
+          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 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="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-220px"
+        />
+      </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="['sms:tenant:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+
+      </el-form-item>
+
+    </el-form>
+
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" width="55" />
+
+      <el-table-column label="租户编号" align="center" prop="id" />
+
+      <el-table-column label="用户名" align="center" prop="tenantUserName" />
+
+      <el-table-column label="邮箱" align="center" prop="email" />
+
+      <el-table-column label="手机号" align="center" prop="mobile" />
+<!--      <el-table-column label="手机国家编码" align="center" prop="nationcode" />-->
+
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['sms:tenant:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['sms:tenant: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>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <TenantForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { TenantApi, Tenant } from '@/api/tenant'
+import TenantForm from './TenantForm.vue'
+
+/** 租户 列表 */
+defineOptions({ name: 'SmsTenant' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<Tenant[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  tenantUserName: undefined,
+  password: undefined,
+  email: undefined,
+  mobile: undefined,
+  nationcode: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await TenantApi.getTenantPage(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 TenantApi.deleteTenant(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除租户 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await TenantApi.deleteTenantList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: Tenant[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await TenantApi.exportTenant(queryParams)
+    download.excel(data, '租户.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/marketing-ui/admin-ui/types/custom-types.d.ts b/marketing-ui/admin-ui/types/custom-types.d.ts
new file mode 100644
index 0000000..3ef553c
--- /dev/null
+++ b/marketing-ui/admin-ui/types/custom-types.d.ts
@@ -0,0 +1,27 @@
+import { SlateDescendant } from '@wangeditor/editor'
+
+declare module 'slate' {
+  interface CustomTypes {
+    // 扩展 text
+    Text: {
+      text: string
+      bold?: boolean
+      italic?: boolean
+      code?: boolean
+      through?: boolean
+      underline?: boolean
+      sup?: boolean
+      sub?: boolean
+      color?: string
+      bgColor?: string
+      fontSize?: string
+      fontFamily?: string
+    }
+
+    // 扩展 Element 的 type 属性
+    Element: {
+      type: string
+      children: SlateDescendant[]
+    }
+  }
+}
diff --git a/marketing-ui/admin-ui/types/env.d.ts b/marketing-ui/admin-ui/types/env.d.ts
new file mode 100644
index 0000000..124dd56
--- /dev/null
+++ b/marketing-ui/admin-ui/types/env.d.ts
@@ -0,0 +1,35 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string
+  readonly VITE_PORT: number
+  readonly VITE_OPEN: string
+  readonly VITE_DEV: string
+  readonly VITE_APP_CAPTCHA_ENABLE: string
+  readonly VITE_APP_TENANT_ENABLE: string
+  readonly VITE_APP_DEFAULT_LOGIN_TENANT: string
+  readonly VITE_APP_DEFAULT_LOGIN_USERNAME: string
+  readonly VITE_APP_DEFAULT_LOGIN_PASSWORD: string
+  readonly VITE_APP_DOCALERT_ENABLE: string
+  readonly VITE_BASE_URL: string
+  readonly VITE_API_URL: string
+  readonly VITE_BASE_PATH: string
+  readonly VITE_DROP_DEBUGGER: string
+  readonly VITE_DROP_CONSOLE: string
+  readonly VITE_SOURCEMAP: string
+  readonly VITE_OUT_DIR: string
+  readonly VITE_GOVIEW_URL: string
+}
+
+declare global {
+  interface ImportMeta {
+    readonly env: ImportMetaEnv
+  }
+}
diff --git a/marketing-ui/admin-ui/types/global.d.ts b/marketing-ui/admin-ui/types/global.d.ts
new file mode 100644
index 0000000..eebe9bb
--- /dev/null
+++ b/marketing-ui/admin-ui/types/global.d.ts
@@ -0,0 +1,58 @@
+export {}
+declare global {
+  interface Fn<T = any> {
+    (...arg: T[]): T
+  }
+
+  type Nullable<T> = T | null
+
+  type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>
+
+  type Recordable<T = any, K = string> = Record<K extends null | undefined ? string : K, T>
+
+  type ComponentRef<T> = InstanceType<T>
+
+  type LocaleType = 'zh-CN' | 'en'
+
+  declare type TimeoutHandle = ReturnType<typeof setTimeout>
+  declare type IntervalHandle = ReturnType<typeof setInterval>
+
+  type AxiosHeaders =
+    | 'application/json'
+    | 'application/x-www-form-urlencoded'
+    | 'multipart/form-data'
+
+  type AxiosMethod = 'get' | 'post' | 'delete' | 'put' | 'GET' | 'POST' | 'DELETE' | 'PUT'
+
+  type AxiosResponseType = 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'
+
+  interface AxiosConfig {
+    params?: any
+    data?: any
+    url?: string
+    method?: AxiosMethod
+    headersType?: string
+    responseType?: AxiosResponseType
+  }
+
+  interface IResponse<T = any> {
+    code: string
+    data: T extends any ? T : T & any
+  }
+
+  interface PageParam {
+    pageSize?: number
+    pageNo?: number
+  }
+
+  interface Tree {
+    id: number
+    name: string
+    children?: Tree[] | any[]
+  }
+  // 分页数据公共返回
+  interface PageResult<T> {
+    list: T // 数据
+    total: number // 总量
+  }
+}
diff --git a/marketing-ui/admin-ui/types/router.d.ts b/marketing-ui/admin-ui/types/router.d.ts
new file mode 100644
index 0000000..03e91f1
--- /dev/null
+++ b/marketing-ui/admin-ui/types/router.d.ts
@@ -0,0 +1,84 @@
+import type { RouteRecordRaw } from 'vue-router'
+import { defineComponent } from 'vue'
+
+/**
+* redirect: noredirect        当设置 noredirect 的时候该路由在面包屑导航中不可被点击
+* name:'router-name'          设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
+* meta : {
+    hidden: true              当设置 true 的时候该路由不会再侧边栏出现 如404，login等页面(默认 false)
+
+    alwaysShow: true          当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式，
+                              只有一个时，会将那个子路由当做根路由显示在侧边栏，
+                              若你想不管路由下面的 children 声明的个数都显示你的根路由，
+                              你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，
+                              一直显示根路由(默认 false)
+
+    title: 'title'            设置该路由在侧边栏和面包屑中展示的名字
+
+    titleSuffix: '2'          当 path 和 title 重复时的后缀或备注
+
+    icon: 'svg-name'          设置该路由的图标
+
+    noCache: true             如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+
+    breadcrumb: false         如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
+
+    affix: true               如果设置为true，则会一直固定在tag项中(默认 false)
+
+    noTagsView: true          如果设置为true，则不会出现在tag中(默认 false)
+
+    activeMenu: '/home'  显示高亮的路由路径
+
+    followAuth: '/home'  跟随哪个路由进行权限过滤
+
+    canTo: true               设置为true即使hidden为true，也依然可以进行路由跳转(默认 false)
+  }
+**/
+declare module 'vue-router' {
+  interface RouteMeta extends Record<string | number | symbol, unknown> {
+    hidden?: boolean
+    alwaysShow?: boolean
+    title?: string
+    titleSuffix?: string
+    icon?: string
+    noCache?: boolean
+    breadcrumb?: boolean
+    affix?: boolean
+    activeMenu?: string
+    noTagsView?: boolean
+    followAuth?: string
+    canTo?: boolean
+  }
+}
+
+type Component<T = any> =
+  | ReturnType<typeof defineComponent>
+  | (() => Promise<typeof import('*.vue')>)
+  | (() => Promise<T>)
+
+declare global {
+  interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+    name: string
+    meta: RouteMeta
+    component?: Component | string
+    children?: AppRouteRecordRaw[]
+    props?: Recordable
+    fullPath?: string
+    keepAlive?: boolean
+  }
+
+  interface AppCustomRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+    icon: any
+    name: string
+    meta: RouteMeta
+    component: string
+    componentName?: string
+    path: string
+    redirect: string
+    children?: AppCustomRouteRecordRaw[]
+    keepAlive?: boolean
+    visible?: boolean
+    parentId?: number
+    alwaysShow?: boolean
+  }
+}