diff --git a/src/api/infra/demo/demo01/index.ts b/src/api/infra/demo/demo01/index.ts
index 1a4b01ca765acc2b85f249b1b5cc7ebd24ff573f..e34a05d1055137cb04f832727cc0a63ff7f05870 100644
--- a/src/api/infra/demo/demo01/index.ts
+++ b/src/api/infra/demo/demo01/index.ts
@@ -37,4 +37,4 @@ export const deleteDemo01Contact = async (id: number) => {
 // 导出示例联系人 Excel
 export const exportDemo01Contact = async (params) => {
   return await request.download({ url: `/infra/demo01-contact/export-excel`, params })
-}
\ No newline at end of file
+}
diff --git a/src/api/infra/demo/demo02/index.ts b/src/api/infra/demo/demo02/index.ts
index 21e45c908453a7dcedbc9ed9f98b7f3e6f5843f7..30e168634f0de8cd780b51adaa301b5a7b1a7a3c 100644
--- a/src/api/infra/demo/demo02/index.ts
+++ b/src/api/infra/demo/demo02/index.ts
@@ -34,4 +34,4 @@ export const deleteDemo02Category = async (id: number) => {
 // 导出示例分类 Excel
 export const exportDemo02Category = async (params) => {
   return await request.download({ url: `/infra/demo02-category/export-excel`, params })
-}
\ No newline at end of file
+}
diff --git a/src/api/infra/demo/demo03/erp/index.ts b/src/api/infra/demo/demo03/erp/index.ts
index d408b6300e9c672dcce32c0fea5ad8e6ef6cbe11..a2ab5398187da4dbc16b93fafa569e9e50e75a7f 100644
--- a/src/api/infra/demo/demo03/erp/index.ts
+++ b/src/api/infra/demo/demo03/erp/index.ts
@@ -88,4 +88,4 @@ export const deleteDemo03Grade = async (id: number) => {
 // 获得学生班级
 export const getDemo03Grade = async (id: number) => {
   return await request.get({ url: `/infra/demo03-student/demo03-grade/get?id=` + id })
-}
\ No newline at end of file
+}
diff --git a/src/api/infra/demo/demo03/inner/index.ts b/src/api/infra/demo/demo03/inner/index.ts
index f15ee1dcf8e0a6225919ed9e4943e6e28ba3e4f9..e3663078f2dd4b33d426402f232363b26c157fd8 100644
--- a/src/api/infra/demo/demo03/inner/index.ts
+++ b/src/api/infra/demo/demo03/inner/index.ts
@@ -42,12 +42,16 @@ export const exportDemo03Student = async (params) => {
 
 // 获得学生课程列表
 export const getDemo03CourseListByStudentId = async (studentId) => {
-  return await request.get({ url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId })
+  return await request.get({
+    url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId
+  })
 }
 
 // ==================== 子表（学生班级） ====================
 
 // 获得学生班级
 export const getDemo03GradeByStudentId = async (studentId) => {
-  return await request.get({ url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId })
-}
\ No newline at end of file
+  return await request.get({
+    url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId
+  })
+}
diff --git a/src/api/infra/demo/demo03/normal/index.ts b/src/api/infra/demo/demo03/normal/index.ts
index f15ee1dcf8e0a6225919ed9e4943e6e28ba3e4f9..e3663078f2dd4b33d426402f232363b26c157fd8 100644
--- a/src/api/infra/demo/demo03/normal/index.ts
+++ b/src/api/infra/demo/demo03/normal/index.ts
@@ -42,12 +42,16 @@ export const exportDemo03Student = async (params) => {
 
 // 获得学生课程列表
 export const getDemo03CourseListByStudentId = async (studentId) => {
-  return await request.get({ url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId })
+  return await request.get({
+    url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId
+  })
 }
 
 // ==================== 子表（学生班级） ====================
 
 // 获得学生班级
 export const getDemo03GradeByStudentId = async (studentId) => {
-  return await request.get({ url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId })
-}
\ No newline at end of file
+  return await request.get({
+    url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId
+  })
+}
diff --git a/src/api/mall/promotion/article/index.ts b/src/api/mall/promotion/article/index.ts
index 824958ad20dd4eb54c19b005ee888b17295f2867..9184c7af90594094baac5b7fc040feafa10daea1 100644
--- a/src/api/mall/promotion/article/index.ts
+++ b/src/api/mall/promotion/article/index.ts
@@ -17,7 +17,7 @@ export interface ArticleVO {
 }
 
 // 查询文章管理列表
-export const getArticlePage = async (params) => {
+export const getArticlePage = async (params: any) => {
   return await request.get({ url: `/promotion/article/page`, params })
 }
 
diff --git a/src/components/AppLinkInput/AppLinkSelectDialog.vue b/src/components/AppLinkInput/AppLinkSelectDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a536ac139d479f32fbc8a16d3997dfd3c52631f1
--- /dev/null
+++ b/src/components/AppLinkInput/AppLinkSelectDialog.vue
@@ -0,0 +1,198 @@
+<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"
+          >
+            <el-button
+              class="m-b-8px m-r-8px m-l-0px!"
+              :type="isSameLink(appLink.path, activeAppLink) ? '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 } 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('')
+
+/** 打开弹窗 */
+const dialogVisible = ref(false)
+const open = (link: string) => {
+  activeAppLink.value = link
+  dialogVisible.value = true
+
+  // 滚动到当前的链接
+  const group = APP_LINK_GROUP_LIST.find((group) =>
+    group.links.some((linkItem) => isSameLink(linkItem.path, link))
+  )
+  if (group) {
+    // 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
+    nextTick(() => handleGroupSelected(group.name))
+  }
+}
+defineExpose({ open })
+
+// 处理 APP 链接选中
+const handleAppLinkSelected = (appLink: any) => {
+  if (!isSameLink(appLink.path, activeAppLink.value)) {
+    activeAppLink.value = appLink.path
+  }
+  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) || undefined
+      break
+    default:
+      break
+  }
+}
+
+// 处理绑定值更新
+const emit = defineEmits<{
+  change: [link: string]
+}>()
+const handleSubmit = () => {
+  dialogVisible.value = false
+  emit('change', activeAppLink.value)
+}
+
+// 分组标题引用列表
+const groupTitleRefs = ref<HTMLInputElement[]>([])
+/**
+ * 处理右侧链接列表滚动
+ * @param scrollTop 滚动条的位置
+ */
+const handleScroll = ({ scrollTop }: { scrollTop: number }) => {
+  const titleEl = groupTitleRefs.value.find((titleEl) => {
+    // 获取标题的位置信息
+    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) => 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) => btn['ref'])
+    .find((ref) => 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, 'http://127.0.0.1')
+  // 修改 id 参数
+  url.searchParams.set('id', `${id}`)
+  // 排除域名
+  activeAppLink.value = `${url.pathname}${url.search}`
+  // 关闭对话框
+  detailSelectDialog.value.visible = false
+  // 重置 id
+  detailSelectDialog.value.id = undefined
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/AppLinkInput/data.ts b/src/components/AppLinkInput/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fd7780f11a4b2dc35307d23d364d2bd26309eef5
--- /dev/null
+++ b/src/components/AppLinkInput/data.ts
@@ -0,0 +1,246 @@
+// APP 链接类型（需要特殊处理，例如商品详情）
+export const enum APP_LINK_TYPE_ENUM {
+  // 拼团活动
+  ACTIVITY_COMBINATION,
+  // 秒杀活动
+  ACTIVITY_SECKILL,
+  // 文章详情
+  ARTICLE_DETAIL,
+  // 优惠券详情
+  COUPON_DETAIL,
+  // 自定义页面详情
+  DIY_PAGE_DETAIL,
+  // 品类列表
+  PRODUCT_CATEGORY_LIST,
+  // 商品列表
+  PRODUCT_LIST,
+  // 商品详情
+  PRODUCT_DETAIL_NORMAL,
+  // 拼团商品详情
+  PRODUCT_DETAIL_COMBINATION,
+  // 积分商品详情
+  PRODUCT_DETAIL_POINT,
+  // 秒杀商品详情
+  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/feedback'
+      },
+      {
+        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: '积分商品详情',
+        path: '/pages/goods/score',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_DETAIL_POINT
+      }
+    ]
+  },
+  {
+    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/app/sign'
+      },
+      {
+        name: '积分商城',
+        path: '/pages/app/score-shop'
+      },
+      {
+        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/apply'
+      },
+      {
+        name: '推广商品',
+        path: '/pages/commission/goods'
+      },
+      {
+        name: '分销订单',
+        path: '/pages/commission/order'
+      },
+      {
+        name: '分享记录',
+        path: '/pages/commission/share-log'
+      },
+      {
+        name: '我的团队',
+        path: '/pages/commission/team'
+      }
+    ]
+  },
+  {
+    name: '支付',
+    links: [
+      {
+        name: '充值余额',
+        path: '/pages/pay/recharge'
+      },
+      {
+        name: '充值记录',
+        path: '/pages/pay/recharge-log'
+      },
+      {
+        name: '申请提现',
+        path: '/pages/pay/withdraw'
+      },
+      {
+        name: '提现记录',
+        path: '/pages/pay/withdraw-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/invoice/list'
+      },
+      {
+        name: '用户佣金',
+        path: '/pages/user/wallet/commission'
+      },
+      {
+        name: '用户余额',
+        path: '/pages/user/wallet/money'
+      },
+      {
+        name: '用户积分',
+        path: '/pages/user/wallet/score'
+      }
+    ]
+  }
+]
diff --git a/src/components/AppLinkInput/index.vue b/src/components/AppLinkInput/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a01386b9430adb55c3568fe04b9ed13e2145c739
--- /dev/null
+++ b/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,
+  () => emit('update:modelValue', appLink.value)
+)
+</script>
diff --git a/src/components/DiyEditor/components/ComponentContainerProperty.vue b/src/components/DiyEditor/components/ComponentContainerProperty.vue
index d6540354ad48bb7a0fecad8cc54242d8269b9b10..a8187898f0dcc6b866570dd3fc6b2ef252998e46 100644
--- a/src/components/DiyEditor/components/ComponentContainerProperty.vue
+++ b/src/components/DiyEditor/components/ComponentContainerProperty.vue
@@ -1,6 +1,6 @@
 <template>
   <el-tabs stretch>
-    <el-tab-pane label="内容">
+    <el-tab-pane label="内容" v-if="$slots.default">
       <slot></slot>
     </el-tab-pane>
     <el-tab-pane label="样式" lazy>
diff --git a/src/components/DiyEditor/components/mobile/Carousel/property.vue b/src/components/DiyEditor/components/mobile/Carousel/property.vue
index 700e00051f30d05b4291865d37d1fa723966659d..972ba5079147ebc5a710a86b4cbfc1ab7169ae62 100644
--- a/src/components/DiyEditor/components/mobile/Carousel/property.vue
+++ b/src/components/DiyEditor/components/mobile/Carousel/property.vue
@@ -103,7 +103,7 @@
                   </el-form-item>
                 </template>
                 <el-form-item label="链接" class="m-b-8px!" label-width="50px">
-                  <el-input placeholder="链接" v-model="element.url" />
+                  <AppLinkInput v-model="element.url" />
                 </el-form-item>
               </div>
             </template>
diff --git a/src/components/DiyEditor/components/mobile/ImageBar/property.vue b/src/components/DiyEditor/components/mobile/ImageBar/property.vue
index 58af1bc8ee0b957e6ab0dc8562a2484e9d04d961..d8163615008441a9f1222d205d15541d29c6027a 100644
--- a/src/components/DiyEditor/components/mobile/ImageBar/property.vue
+++ b/src/components/DiyEditor/components/mobile/ImageBar/property.vue
@@ -13,7 +13,7 @@
         </UploadImg>
       </el-form-item>
       <el-form-item label="链接" prop="url">
-        <el-input placeholder="链接" v-model="formData.url" />
+        <AppLinkInput v-model="formData.url" />
       </el-form-item>
     </el-form>
   </ComponentContainerProperty>
diff --git a/src/components/DiyEditor/components/mobile/MagicCube/property.vue b/src/components/DiyEditor/components/mobile/MagicCube/property.vue
index 57c0af798c3c0c1a914fbb826af085734d0a4402..fe938e5b4ad1784e55c7792e3c84090b836864a2 100644
--- a/src/components/DiyEditor/components/mobile/MagicCube/property.vue
+++ b/src/components/DiyEditor/components/mobile/MagicCube/property.vue
@@ -17,7 +17,7 @@
             <UploadImg v-model="hotArea.imgUrl" height="80px" width="80px" />
           </el-form-item>
           <el-form-item label="链接" :prop="`list[${index}].url`">
-            <el-input v-model="hotArea.url" placeholder="请输入链接" />
+            <AppLinkInput v-model="hotArea.url" />
           </el-form-item>
         </template>
       </template>
diff --git a/src/components/DiyEditor/components/mobile/MenuGrid/property.vue b/src/components/DiyEditor/components/mobile/MenuGrid/property.vue
index e09dd31831c594b7af0b36b05f8399165905186f..b92e2099b113da1d7c728811c011bb087c09d3e6 100644
--- a/src/components/DiyEditor/components/mobile/MenuGrid/property.vue
+++ b/src/components/DiyEditor/components/mobile/MenuGrid/property.vue
@@ -38,7 +38,7 @@
                 <InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
               </el-form-item>
               <el-form-item label="链接" prop="url">
-                <el-input v-model="element.url" />
+                <AppLinkInput v-model="element.url" />
               </el-form-item>
               <el-form-item label="显示角标" prop="badge.show">
                 <el-switch v-model="element.badge.show" />
diff --git a/src/components/DiyEditor/components/mobile/MenuList/property.vue b/src/components/DiyEditor/components/mobile/MenuList/property.vue
index 270ca2613271ce0951215cc919815b36951ec370..0ed6035cb72a8365abce179744434b597f5bc084 100644
--- a/src/components/DiyEditor/components/mobile/MenuList/property.vue
+++ b/src/components/DiyEditor/components/mobile/MenuList/property.vue
@@ -31,7 +31,7 @@
                 <InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
               </el-form-item>
               <el-form-item label="链接" prop="url">
-                <el-input v-model="element.url" />
+                <AppLinkInput v-model="element.url" />
               </el-form-item>
             </div>
           </template>
diff --git a/src/components/DiyEditor/components/mobile/MenuSwiper/property.vue b/src/components/DiyEditor/components/mobile/MenuSwiper/property.vue
index 2175d57e777ab510bd7a17a975b09d61d43e9ce3..31e158cefb8d79d2e7485da1f580e486747711c2 100644
--- a/src/components/DiyEditor/components/mobile/MenuSwiper/property.vue
+++ b/src/components/DiyEditor/components/mobile/MenuSwiper/property.vue
@@ -48,7 +48,7 @@
                 <InputWithColor v-model="element.title" v-model:color="element.titleColor" />
               </el-form-item>
               <el-form-item label="链接" prop="url">
-                <el-input v-model="element.url" />
+                <AppLinkInput v-model="element.url" />
               </el-form-item>
               <el-form-item label="显示角标" prop="badge.show">
                 <el-switch v-model="element.badge.show" />
diff --git a/src/components/DiyEditor/components/mobile/NoticeBar/property.vue b/src/components/DiyEditor/components/mobile/NoticeBar/property.vue
index 11e7f4b76d2d33ea30f649b66d11d329f00535de..a3eefebe2f12ec46309921806d7866731c7e6ab1 100644
--- a/src/components/DiyEditor/components/mobile/NoticeBar/property.vue
+++ b/src/components/DiyEditor/components/mobile/NoticeBar/property.vue
@@ -35,7 +35,7 @@
             </div>
             <div class="w-full flex flex-col gap-8px">
               <el-input v-model="element.text" placeholder="请输入公告" />
-              <el-input v-model="element.url" placeholder="请输入链接" />
+              <AppLinkInput v-model="element.url" />
             </div>
           </div>
         </template>
diff --git a/src/components/DiyEditor/components/mobile/ProductList/config.ts b/src/components/DiyEditor/components/mobile/ProductList/config.ts
index 436de405e591800d5cf50f4cd42c3a7816ec09b1..1f1683234bc88d27a44e47787a064ea1662cca48 100644
--- a/src/components/DiyEditor/components/mobile/ProductList/config.ts
+++ b/src/components/DiyEditor/components/mobile/ProductList/config.ts
@@ -1,6 +1,6 @@
 import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
 
-/** 商品卡片属性 */
+/** 商品栏属性 */
 export interface ProductListProperty {
   // 布局类型：双列 | 三列 | 水平滑动
   layoutType: 'twoCol' | 'threeCol' | 'horizSwiper'
diff --git a/src/components/DiyEditor/components/mobile/ProductList/index.vue b/src/components/DiyEditor/components/mobile/ProductList/index.vue
index 8a35628ed35a2207d43d524ea7578edef6ae7ed8..3ba636779544eb5de76fd58f996f1393d01d9f36 100644
--- a/src/components/DiyEditor/components/mobile/ProductList/index.vue
+++ b/src/components/DiyEditor/components/mobile/ProductList/index.vue
@@ -66,7 +66,7 @@
 import { ProductListProperty } from './config'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 
-/** 商品卡片 */
+/** 商品栏 */
 defineOptions({ name: 'ProductList' })
 // 定义属性
 const props = defineProps<{ property: ProductListProperty }>()
diff --git a/src/components/DiyEditor/components/mobile/ProductList/property.vue b/src/components/DiyEditor/components/mobile/ProductList/property.vue
index 872affc386153fa55b0ada92f6fea118ea712193..e9cf7c0104f444822a6443710d1731c864b7913b 100644
--- a/src/components/DiyEditor/components/mobile/ProductList/property.vue
+++ b/src/components/DiyEditor/components/mobile/ProductList/property.vue
@@ -88,7 +88,7 @@ import { ProductListProperty } from './config'
 import { usePropertyForm } from '@/components/DiyEditor/util'
 import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
 
-// 商品卡片属性面板
+// 商品栏属性面板
 defineOptions({ name: 'ProductListProperty' })
 
 const props = defineProps<{ modelValue: ProductListProperty }>()
diff --git a/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts b/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6270c2ad279a8431801972f20b5ebde442b5255
--- /dev/null
+++ b/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/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue b/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cca3635dcd2340d50c697473badf9df2f9aaa59a
--- /dev/null
+++ b/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/src/components/DiyEditor/components/mobile/PromotionArticle/property.vue b/src/components/DiyEditor/components/mobile/PromotionArticle/property.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c3bcb21bcb084720e901a8d8006055890c410a58
--- /dev/null
+++ b/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 { usePropertyForm } from '@/components/DiyEditor/util'
+import * as ArticleApi from '@/api/mall/promotion/article/index'
+
+// 营销文章属性面板
+defineOptions({ name: 'PromotionArticleProperty' })
+
+const props = defineProps<{ modelValue: PromotionArticleProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(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/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts b/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3ec2a75b62984326aef2b28bccbc9e3ed2661b52
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
@@ -0,0 +1,64 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 拼团属性 */
+export interface PromotionCombinationProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneCol' | 'threeCol'
+  // 商品字段
+  fields: {
+    // 商品名称
+    name: PromotionCombinationFieldProperty
+    // 商品价格
+    price: PromotionCombinationFieldProperty
+  }
+  // 角标
+  badge: {
+    // 是否显示
+    show: boolean
+    // 角标图片
+    imgUrl: string
+  }
+  // 上圆角
+  borderRadiusTop: number
+  // 下圆角
+  borderRadiusBottom: number
+  // 间距
+  space: number
+  // 拼团活动编号
+  activityId: number
+  // 组件样式
+  style: ComponentStyle
+}
+// 商品字段
+export interface PromotionCombinationFieldProperty {
+  // 是否显示
+  show: boolean
+  // 颜色
+  color: string
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionCombination',
+  name: '拼团',
+  icon: 'mdi:account-group',
+  property: {
+    activityId: undefined,
+    layoutType: 'oneCol',
+    fields: {
+      name: { show: true, color: '#000' },
+      price: { show: true, color: '#ff3000' }
+    },
+    badge: { show: false, 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/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue b/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe6f3a83b96c8a019a6c0a30a42d81916f197ffa
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
@@ -0,0 +1,125 @@
+<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 }"
+            >
+              ￥{{ spu.price }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-scrollbar>
+</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'
+
+/** 拼团 */
+defineOptions({ name: 'PromotionCombination' })
+// 定义属性
+const props = defineProps<{ property: PromotionCombinationProperty }>()
+// 商品列表
+const spuList = ref<ProductSpuApi.Spu[]>([])
+watch(
+  () => props.property.activityId,
+  async () => {
+    if (!props.property.activityId) return
+    const activity = await CombinationActivityApi.getCombinationActivity(props.property.activityId)
+    if (!activity?.spuId) return
+    spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
+  },
+  {
+    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 === 'oneCol' ? 1 : 3
+    // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
+    const productWidth =
+      (phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
+    // 商品图布局：2列时，左右布局 3列时，上下布局
+    imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
+    // 指定列数
+    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/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue b/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ec09dc452af20c99f0c20bc54efaf4c1105776a0
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
@@ -0,0 +1,112 @@
+<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="activityId">
+          <el-select v-model="formData.activityId">
+            <el-option
+              v-for="activity in activityList"
+              :key="activity.id"
+              :label="activity.name"
+              :value="activity.id"
+            />
+          </el-select>
+        </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.layoutType">
+            <el-tooltip class="item" content="单列" placement="bottom">
+              <el-radio-button label="oneCol">
+                <Icon icon="fluent:text-column-one-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="三列" placement="bottom">
+              <el-radio-button label="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.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 { PromotionCombinationProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
+import { CommonStatusEnum } from '@/utils/constants'
+
+// 拼团属性面板
+defineOptions({ name: 'PromotionCombinationProperty' })
+
+const props = defineProps<{ modelValue: PromotionCombinationProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(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/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts b/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..800398beebf3208f0737739cd1f98018d80a9a7e
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts
@@ -0,0 +1,64 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 秒杀属性 */
+export interface PromotionSeckillProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneCol' | 'threeCol'
+  // 商品字段
+  fields: {
+    // 商品名称
+    name: PromotionSeckillFieldProperty
+    // 商品价格
+    price: PromotionSeckillFieldProperty
+  }
+  // 角标
+  badge: {
+    // 是否显示
+    show: boolean
+    // 角标图片
+    imgUrl: string
+  }
+  // 上圆角
+  borderRadiusTop: number
+  // 下圆角
+  borderRadiusBottom: number
+  // 间距
+  space: number
+  // 秒杀活动编号
+  activityId: number
+  // 组件样式
+  style: ComponentStyle
+}
+// 商品字段
+export interface PromotionSeckillFieldProperty {
+  // 是否显示
+  show: boolean
+  // 颜色
+  color: string
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionSeckill',
+  name: '秒杀',
+  icon: 'mdi:calendar-time',
+  property: {
+    activityId: undefined,
+    layoutType: 'oneCol',
+    fields: {
+      name: { show: true, color: '#000' },
+      price: { show: true, color: '#ff3000' }
+    },
+    badge: { show: false, 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/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue b/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1b4113b69b866b1eaaf231f52c803d06ae222d81
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
@@ -0,0 +1,125 @@
+<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 }"
+            >
+              ￥{{ spu.price }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-scrollbar>
+</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'
+
+/** 秒杀 */
+defineOptions({ name: 'PromotionSeckill' })
+// 定义属性
+const props = defineProps<{ property: PromotionSeckillProperty }>()
+// 商品列表
+const spuList = ref<ProductSpuApi.Spu[]>([])
+watch(
+  () => props.property.activityId,
+  async () => {
+    if (!props.property.activityId) return
+    const activity = await SeckillActivityApi.getSeckillActivity(props.property.activityId)
+    if (!activity?.spuId) return
+    spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
+  },
+  {
+    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 === 'oneCol' ? 1 : 3
+    // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
+    const productWidth =
+      (phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
+    // 商品图布局：2列时，左右布局 3列时，上下布局
+    imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
+    // 指定列数
+    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/src/components/DiyEditor/components/mobile/PromotionSeckill/property.vue b/src/components/DiyEditor/components/mobile/PromotionSeckill/property.vue
new file mode 100644
index 0000000000000000000000000000000000000000..87537822147e5981d313fbf25607109f0960abbf
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PromotionSeckill/property.vue
@@ -0,0 +1,112 @@
+<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="activityId">
+          <el-select v-model="formData.activityId">
+            <el-option
+              v-for="activity in activityList"
+              :key="activity.id"
+              :label="activity.name"
+              :value="activity.id"
+            />
+          </el-select>
+        </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.layoutType">
+            <el-tooltip class="item" content="单列" placement="bottom">
+              <el-radio-button label="oneCol">
+                <Icon icon="fluent:text-column-one-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="三列" placement="bottom">
+              <el-radio-button label="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.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 { PromotionSeckillProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
+import { CommonStatusEnum } from '@/utils/constants'
+
+// 秒杀属性面板
+defineOptions({ name: 'PromotionSeckillProperty' })
+
+const props = defineProps<{ modelValue: PromotionSeckillProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(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/src/components/DiyEditor/components/mobile/TabBar/property.vue b/src/components/DiyEditor/components/mobile/TabBar/property.vue
index eefdf54ad7295210f7a5cb5b6c2fe1b16f09f324..a7634a5b666723ea507b21a5792f6bd628ba272f 100644
--- a/src/components/DiyEditor/components/mobile/TabBar/property.vue
+++ b/src/components/DiyEditor/components/mobile/TabBar/property.vue
@@ -88,7 +88,7 @@
                 <el-input v-model="element.text" placeholder="请输入文字" />
               </el-form-item>
               <el-form-item prop="url" label-width="0" class="m-b-0!">
-                <el-input v-model="element.url" placeholder="请选择链接" />
+                <AppLinkInput v-model="element.url" />
               </el-form-item>
             </div>
           </div>
diff --git a/src/components/DiyEditor/components/mobile/TitleBar/property.vue b/src/components/DiyEditor/components/mobile/TitleBar/property.vue
index 3e4dac2da9301e4e68c60bf438028d7e5feb7e97..941e6d92a3a4e80db80e832d45ab75f2e9f30922 100644
--- a/src/components/DiyEditor/components/mobile/TitleBar/property.vue
+++ b/src/components/DiyEditor/components/mobile/TitleBar/property.vue
@@ -92,7 +92,7 @@
           <el-input v-model="formData.more.text" />
         </el-form-item>
         <el-form-item label="跳转链接" prop="more.url">
-          <el-input v-model="formData.more.url" placeholder="请输入跳转链接" />
+          <AppLinkInput v-model="formData.more.url" />
         </el-form-item>
       </template>
     </el-form>
diff --git a/src/components/DiyEditor/components/mobile/UserCard/config.ts b/src/components/DiyEditor/components/mobile/UserCard/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b337761b040531c14d300eca9fbd9bb3d82aa05
--- /dev/null
+++ b/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/src/components/DiyEditor/components/mobile/UserCard/index.vue b/src/components/DiyEditor/components/mobile/UserCard/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..14b447c62118f5f5689e6e7e8f9ce07896e34193
--- /dev/null
+++ b/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">芋道源码</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/src/components/DiyEditor/components/mobile/UserCard/property.vue b/src/components/DiyEditor/components/mobile/UserCard/property.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43dfad2ce64fa13056d8f8621ec49302fee956f6
--- /dev/null
+++ b/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 { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 用户卡片属性面板
+defineOptions({ name: 'UserCardProperty' })
+
+const props = defineProps<{ modelValue: UserCardProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/UserCoupon/config.ts b/src/components/DiyEditor/components/mobile/UserCoupon/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..92eba9b6ead298b2ea54e30dcbfae1dc192f626d
--- /dev/null
+++ b/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/src/components/DiyEditor/components/mobile/UserCoupon/index.vue b/src/components/DiyEditor/components/mobile/UserCoupon/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..27ad310a506f4003431e8c12a1384a787a0809a2
--- /dev/null
+++ b/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/src/components/DiyEditor/components/mobile/UserCoupon/property.vue b/src/components/DiyEditor/components/mobile/UserCoupon/property.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f902e04ee281429a0d1eb8acf109db9c6c145529
--- /dev/null
+++ b/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 { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 用户卡券属性面板
+defineOptions({ name: 'UserCouponProperty' })
+
+const props = defineProps<{ modelValue: UserCouponProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/UserOrder/config.ts b/src/components/DiyEditor/components/mobile/UserOrder/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f9c5a6db7399b9d5ad109c6e880e14603bf0c570
--- /dev/null
+++ b/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/src/components/DiyEditor/components/mobile/UserOrder/index.vue b/src/components/DiyEditor/components/mobile/UserOrder/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..450ae5489b1f011a7a79e9da4b94279b6a6b0ef7
--- /dev/null
+++ b/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/src/components/DiyEditor/components/mobile/UserOrder/property.vue b/src/components/DiyEditor/components/mobile/UserOrder/property.vue
new file mode 100644
index 0000000000000000000000000000000000000000..42df74104bf66a65e77a8e8e6c46e1c5462bd428
--- /dev/null
+++ b/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 { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 用户订单属性面板
+defineOptions({ name: 'UserOrderProperty' })
+
+const props = defineProps<{ modelValue: UserOrderProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/UserWallet/config.ts b/src/components/DiyEditor/components/mobile/UserWallet/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4e0955f5e624b19ae6aba307b222ca5795b1d3a9
--- /dev/null
+++ b/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/src/components/DiyEditor/components/mobile/UserWallet/index.vue b/src/components/DiyEditor/components/mobile/UserWallet/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0efc9371a03b694a3bd8652845e95fd7c3e659ca
--- /dev/null
+++ b/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/src/components/DiyEditor/components/mobile/UserWallet/property.vue b/src/components/DiyEditor/components/mobile/UserWallet/property.vue
new file mode 100644
index 0000000000000000000000000000000000000000..549367e35824605f637d278323f30e9aebb39952
--- /dev/null
+++ b/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 { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 用户资产属性面板
+defineOptions({ name: 'UserWalletProperty' })
+
+const props = defineProps<{ modelValue: UserWalletProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
index a8d0e0951399bcb881685561e120aa31b8432e8d..606e53a26c8293d99306e374d8e66de8343ec246 100644
--- a/src/components/DiyEditor/util.ts
+++ b/src/components/DiyEditor/util.ts
@@ -109,13 +109,19 @@ export const PAGE_LIBS = [
   },
   { name: '商品组件', extended: true, components: ['ProductCard', 'ProductList'] },
   {
-    name: '会员组件',
+    name: '用户组件',
     extended: true,
     components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon']
   },
   {
     name: '营销组件',
     extended: true,
-    components: ['CombinationCard', 'SeckillCard', 'PointCard', 'CouponCard']
+    components: [
+      'PromotionCombination',
+      'PromotionSeckill',
+      'PromotionPoint',
+      'CouponCard',
+      'PromotionArticle'
+    ]
   }
 ] as DiyComponentLibrary[]
diff --git a/src/components/RouterSearch/index.vue b/src/components/RouterSearch/index.vue
index 2499dafe6ad59ac0f3d12cb3936c345c5da944d9..e9310b8fd3008b363b91c60de5d0cad6c4e5faa4 100644
--- a/src/components/RouterSearch/index.vue
+++ b/src/components/RouterSearch/index.vue
@@ -29,7 +29,12 @@
       :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-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
     </el-select>
   </div>
 </template>
@@ -73,7 +78,7 @@ function remoteMethod(data) {
 
 function handleChange(path) {
   router.push({ path })
-  hiddenTopSearch();
+  hiddenTopSearch()
 }
 
 function hiddenTopSearch() {
diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
index 8eae6855b0f21c09b13de9bcfee00dde4f168420..0b8d00d57e586c219c725108579469a4ee9f5266 100644
--- a/src/layout/components/ToolHeader.vue
+++ b/src/layout/components/ToolHeader.vue
@@ -65,7 +65,7 @@ export default defineComponent({
           {screenfull.value ? (
             <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
           ) : undefined}
-          {search.value ? (<RouterSearch isModal={false} />) : undefined}
+          {search.value ? <RouterSearch isModal={false} /> : undefined}
           {size.value ? (
             <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
           ) : undefined}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 10f57567c096d3116df6e3a7ae317721cef66fd5..6ee53e716f2563398b623b11115d45b64fdc94b2 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,5 @@
+import { toNumber } from 'lodash-es'
+
 /**
  *
  * @param component 需要注册的组件
@@ -263,3 +265,23 @@ export const calculateRelativeRate = (value?: number, reference?: number) => {
 
   return ((100 * ((value || 0) - reference)) / reference).toFixed(0)
 }
+
+/**
+ * 获取链接的参数值
+ * @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))
+}
diff --git a/src/views/crm/businessStatusType/index.vue b/src/views/crm/businessStatusType/index.vue
index 7b2725f39eacc00ef807b6fa5f5b48283b1b4ce1..3f7389be3a76affebbf11961ed3d36df540b1d56 100644
--- a/src/views/crm/businessStatusType/index.vue
+++ b/src/views/crm/businessStatusType/index.vue
@@ -95,7 +95,7 @@ const list = ref([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
-  pageSize: 10,
+  pageSize: 10
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
diff --git a/src/views/crm/config/customerLimitConfig/CustomerLimitConfigForm.vue b/src/views/crm/config/customerLimitConfig/CustomerLimitConfigForm.vue
index e7dee69fa1cfab6acbebb295680c0da57bf43742..da37e556e7fef862ad56dbcb639ad82c77aae7cf 100644
--- a/src/views/crm/config/customerLimitConfig/CustomerLimitConfigForm.vue
+++ b/src/views/crm/config/customerLimitConfig/CustomerLimitConfigForm.vue
@@ -12,9 +12,9 @@
           v-model="formData.userIds"
           :data="userTree"
           :props="defaultProps"
-          check-on-click-node
           multiple
           filterable
+          check-on-click-node
           node-key="id"
           placeholder="请选择规则适用人群"
         />
@@ -25,8 +25,8 @@
           :data="deptTree"
           :props="defaultProps"
           multiple
-          check-strictly
           filterable
+          check-strictly
           node-key="id"
           placeholder="请选择规则适用部门"
         />
diff --git a/src/views/infra/codegen/EditTable.vue b/src/views/infra/codegen/EditTable.vue
index c94e0da61e87a743df1f0e2cdd1da7fbe4fb9dc7..f8473e365bb2283310796196173e80323653cf50 100644
--- a/src/views/infra/codegen/EditTable.vue
+++ b/src/views/infra/codegen/EditTable.vue
@@ -8,7 +8,11 @@
         <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" />
+        <generate-info-form
+          ref="generateInfoRef"
+          :table="formData.table"
+          :columns="formData.columns"
+        />
       </el-tab-pane>
     </el-tabs>
     <el-form>
diff --git a/src/views/infra/demo/demo01/Demo01ContactForm.vue b/src/views/infra/demo/demo01/Demo01ContactForm.vue
index 0452a3c0bddff11ebb8d0194250173a638ce9570..5d28112a2ec9671e82245fa2f47217c34421ad8a 100644
--- a/src/views/infra/demo/demo01/Demo01ContactForm.vue
+++ b/src/views/infra/demo/demo01/Demo01ContactForm.vue
@@ -123,4 +123,4 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo02/Demo02CategoryForm.vue b/src/views/infra/demo/demo02/Demo02CategoryForm.vue
index 9002d5ee1ba73a6b65ead9358a23effb0c8f1523..f4c5f8e22263f00c9c3e95d3b440c1dbcc3053c7 100644
--- a/src/views/infra/demo/demo02/Demo02CategoryForm.vue
+++ b/src/views/infra/demo/demo02/Demo02CategoryForm.vue
@@ -111,4 +111,4 @@ const getDemo02CategoryTree = async () => {
   root.children = handleTree(data, 'id', 'parentId')
   demo02CategoryTree.value.push(root)
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue b/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
index 29f1370dc2fee35ac015afb35265b4f6b5e32213..758c7e5db0e9df2edaaeda2f8849dfc1fb9b25e7 100644
--- a/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
+++ b/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
@@ -118,4 +118,4 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue b/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue
index de1c06def723ae8c4ab5467e3dfa4961021afc76..9d3888d83c836e90e7fc569eafa7976c0da8a499 100644
--- a/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue
+++ b/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue
@@ -96,4 +96,4 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue b/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue
index 7e06ee64ddf84fb9300b242f3a48de9393f63025..9d5e27053172f9f3b14d8209d2f86e02ef901bb5 100644
--- a/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue
+++ b/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue
@@ -11,7 +11,7 @@
     </el-button>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="编号" align="center" prop="id" />
-       <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="名字" align="center" prop="name" />
       <el-table-column label="分数" align="center" prop="score" />
       <el-table-column
         label="创建时间"
@@ -49,8 +49,8 @@
       @pagination="getList"
     />
   </ContentWrap>
-    <!-- 表单弹窗：添加/修改 -->
-    <Demo03CourseForm ref="formRef" @success="getList" />
+  <!-- 表单弹窗：添加/修改 -->
+  <Demo03CourseForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
@@ -123,4 +123,4 @@ const handleDelete = async (id: number) => {
     await getList()
   } catch {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue b/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue
index abba0032d7327238996c94505330ca0f6948cd3a..56872949627c7829211c93a43ad9784e58d3ecaa 100644
--- a/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue
+++ b/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue
@@ -96,4 +96,4 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue b/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue
index b12f1889ac058234d6429aeb49d1e93aece5c758..e57cb3a4934f183502284eeccdcca1d0e45f2673 100644
--- a/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue
+++ b/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue
@@ -11,7 +11,7 @@
     </el-button>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="编号" align="center" prop="id" />
-       <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="名字" align="center" prop="name" />
       <el-table-column label="班主任" align="center" prop="teacher" />
       <el-table-column
         label="创建时间"
@@ -49,8 +49,8 @@
       @pagination="getList"
     />
   </ContentWrap>
-    <!-- 表单弹窗：添加/修改 -->
-    <Demo03GradeForm ref="formRef" @success="getList" />
+  <!-- 表单弹窗：添加/修改 -->
+  <Demo03GradeForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
@@ -123,4 +123,4 @@ const handleDelete = async (id: number) => {
     await getList()
   } catch {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue b/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
index fe9327b95b148805b6160ebcca40c91a4d489c87..98c1b7bf1394a4431454c19c3292742e00ada6b9 100644
--- a/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
+++ b/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
@@ -150,4 +150,4 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue b/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue
index 870575135a68ee51671e486a27494fbf909f079c..77da45ffa990482ad7189355b90454245301e281 100644
--- a/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue
+++ b/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue
@@ -9,7 +9,7 @@
   >
     <el-table :data="formData" class="-mt-10px">
       <el-table-column label="序号" type="index" width="100" />
-       <el-table-column label="名字" min-width="150">
+      <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="请输入名字" />
@@ -57,7 +57,7 @@ watch(
     formData.value = []
     // 2. val 非空，则加载数据
     if (!val) {
-      return;
+      return
     }
     try {
       formLoading.value = true
@@ -97,4 +97,4 @@ const getData = () => {
 }
 
 defineExpose({ validate, getData })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue b/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue
index d912fc5d81f2d0c764f0a82fa4c7fb429e0601d1..965b473c19e49dfcc37bc7e054b3cb2f2bee4fd9 100644
--- a/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue
+++ b/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue
@@ -48,4 +48,4 @@ const handleQuery = () => {
 onMounted(() => {
   getList()
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue b/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue
index e0eeb1920456ca54d20e3a8dd1373ce7f5a0e878..e14bac4723c2dcffa3f4054f07c423df5ccaab97 100644
--- a/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue
+++ b/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue
@@ -6,7 +6,7 @@
     label-width="100px"
     v-loading="formLoading"
   >
-     <el-form-item label="名字" prop="name">
+    <el-form-item label="名字" prop="name">
       <el-input v-model="formData.name" placeholder="请输入名字" />
     </el-form-item>
     <el-form-item label="班主任" prop="teacher">
@@ -38,11 +38,11 @@ watch(
       id: undefined,
       studentId: undefined,
       name: undefined,
-      teacher: undefined,
+      teacher: undefined
     }
     // 2. val 非空，则加载数据
     if (!val) {
-      return;
+      return
     }
     try {
       formLoading.value = true
@@ -69,4 +69,4 @@ const getData = () => {
 }
 
 defineExpose({ validate, getData })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue b/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue
index 96905414236b0f685f1b780bae3997254015cf25..e631384b16dd94dea6f801619b0aa09eaa363287 100644
--- a/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue
+++ b/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue
@@ -52,4 +52,4 @@ const handleQuery = () => {
 onMounted(() => {
   getList()
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue b/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
index 005082284447ad7745835292a0bbbac933986945..4815357e58dc7ec1b449eaec9ca20bdffc11c042 100644
--- a/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
+++ b/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
@@ -150,4 +150,4 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue b/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue
index b6f585726ce63acb3ee445f9b6c886dfc514afcb..f439c3f12afbc653fa9af5f1782b70967fb740b6 100644
--- a/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue
+++ b/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue
@@ -9,7 +9,7 @@
   >
     <el-table :data="formData" class="-mt-10px">
       <el-table-column label="序号" type="index" width="100" />
-       <el-table-column label="名字" min-width="150">
+      <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="请输入名字" />
@@ -57,7 +57,7 @@ watch(
     formData.value = []
     // 2. val 非空，则加载数据
     if (!val) {
-      return;
+      return
     }
     try {
       formLoading.value = true
@@ -97,4 +97,4 @@ const getData = () => {
 }
 
 defineExpose({ validate, getData })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue b/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue
index 12653b6c7defdc7178314aa6b6790825820c2724..c711954d86c65047595981f6afcd0ed0f9bc1584 100644
--- a/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue
+++ b/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue
@@ -6,7 +6,7 @@
     label-width="100px"
     v-loading="formLoading"
   >
-     <el-form-item label="名字" prop="name">
+    <el-form-item label="名字" prop="name">
       <el-input v-model="formData.name" placeholder="请输入名字" />
     </el-form-item>
     <el-form-item label="班主任" prop="teacher">
@@ -38,11 +38,11 @@ watch(
       id: undefined,
       studentId: undefined,
       name: undefined,
-      teacher: undefined,
+      teacher: undefined
     }
     // 2. val 非空，则加载数据
     if (!val) {
-      return;
+      return
     }
     try {
       formLoading.value = true
@@ -69,4 +69,4 @@ const getData = () => {
 }
 
 defineExpose({ validate, getData })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/mall/product/category/components/ProductCategorySelect.vue b/src/views/mall/product/category/components/ProductCategorySelect.vue
index 179a6a3bf4d49854244f65534428daa0db140816..c1810f5d81aed634340106ed2c247900dd178977 100644
--- a/src/views/mall/product/category/components/ProductCategorySelect.vue
+++ b/src/views/mall/product/category/components/ProductCategorySelect.vue
@@ -20,8 +20,12 @@ import { propTypes } from '@/utils/propTypes'
 defineOptions({ name: 'ProductCategorySelect' })
 
 const props = defineProps({
-  modelValue: oneOfType([propTypes.number.def(undefined), propTypes.array.def([])]).def(undefined), // 选中的ID
-  multiple: propTypes.bool.def(false) // 是否多选
+  // 选中的ID
+  modelValue: oneOfType<number | number[]>([Number, Array<Number>]),
+  // 是否多选
+  multiple: propTypes.bool.def(false),
+  // 上级品类的编号
+  parentId: propTypes.number.def(undefined)
 })
 
 /** 选中的分类 ID */
@@ -38,10 +42,10 @@ const selectCategoryId = computed({
 const emit = defineEmits(['update:modelValue'])
 
 /** 初始化 **/
-const categoryList = ref([]) // 分类树
+const categoryList = ref<ProductCategoryApi.CategoryVO[]>([]) // 分类树
 onMounted(async () => {
   // 获得分类树
-  const data = await ProductCategoryApi.getCategoryList({})
+  const data = await ProductCategoryApi.getCategoryList({ parentId: props.parentId })
   categoryList.value = handleTree(data, 'id', 'parentId')
 })
 </script>