feat: 冲突解决

apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue

@@ -343,9 +343,9 @@ onMounted(async () => {
             v-if="conversationMap[conversationKey].length > 0"
             class="classify-title pt-2"
           >
-            <b class="mx-1">
+            <p class="mx-1">
               {{ conversationKey }}
-            </b>
+            </p>
           </div>
 
           <div
@@ -357,11 +357,9 @@ onMounted(async () => {
             class="mt-1"
           >
             <div
-              class="flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10"
+              class="mb-2 flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10"
               :class="[
-                conversation.id === activeConversationId
-                  ? 'bg-success-600'
-                  : '',
+                conversation.id === activeConversationId ? 'bg-success' : '',
               ]"
             >
               <div class="flex items-center">

apps/web-antd/src/views/ai/chat/index/index.vue

@@ -514,7 +514,7 @@ onMounted(async () => {
       <!-- 右侧：详情部分 -->
       <Layout class="bg-card mx-4">
         <Layout.Header
-          class="!bg-card border-border flex items-center justify-between border-b"
+          class="!bg-card border-border flex !h-12 items-center justify-between border-b"
         >
           <div class="text-lg font-bold">
             {{ activeConversation?.title ? activeConversation?.title : '对话' }}
@@ -574,11 +574,9 @@ onMounted(async () => {
         </Layout.Content>
 
         <Layout.Footer class="!bg-card m-0 flex flex-col p-0">
-          <form
-            class="border-border my-5 mb-5 mt-2 flex flex-col rounded-xl border px-2 py-2.5"
-          >
+          <form class="border-border m-2 flex flex-col rounded-xl border p-2">
             <textarea
-              class="box-border h-24 resize-none overflow-auto rounded-md px-0 py-1 focus:outline-none"
+              class="box-border h-24 resize-none overflow-auto rounded-md p-2 focus:outline-none"
               v-model="prompt"
               @keydown="handleSendByKeydown"
               @input="handlePromptInput"

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue

@@ -660,16 +660,15 @@ onBeforeUnmount(() => {
       <!-- <div id="js-properties-panel" class="panel"></div> -->
       <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
     </div>
-    <Dialog
+    <Modal
       title="预览"
       v-model:open="previewModelVisible"
-      width="80%"
+      class="max-h-[600px] w-4/5"
       :scroll="true"
-      style="max-height: 600px"
     >
       <div>
         <pre><code v-dompurify-html="highlightedCode(previewResult)" class="hljs"></code></pre>
       </div>
-    </Dialog>
+    </Modal>
   </div>
 </template>

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue

@@ -246,7 +246,7 @@ watch(
       <Input
         v-model:value="condition"
         :placeholder="placeholder"
-        style="width: calc(100% - 100px)"
+        class="w-[calc(100vw-25%)]"
         :readonly="type !== 'duration' && type !== 'cycle'"
         @focus="handleInputFocus"
         @blur="updateNode"

apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue

@@ -42,6 +42,7 @@ const props = defineProps({
   modelValue: {
     type: Object,
     required: true,
+    default: () => ({}),
   },
 });
 

apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue

@@ -272,7 +272,7 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
         </template>
         <Condition
           :ref="(el) => (conditionRef[index] = el)"
-          :model-value="routerGroups[index] as Record<string, any>"
+          :model-value="routerGroups[index]"
           @update:model-value="(val) => (routerGroups[index] = val)"
         />
       </Card>

apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue

@@ -248,9 +248,8 @@ defineExpose({ validate });
       :rules="rules"
       :label-col="{ span: 4 }"
       :wrapper-col="{ span: 20 }"
-      class="mt-5"
     >
-      <Form.Item label="流程标识" name="key" class="mb-5">
+      <Form.Item label="流程标识" name="key">
         <div class="flex items-center">
           <Input
             class="w-full"
@@ -264,14 +263,11 @@ defineExpose({ validate });
             "
             placement="top"
           >
-            <IconifyIcon
-              icon="lucide:circle-help"
-              class="ml-1 size-5 text-gray-900"
-            />
+            <IconifyIcon icon="lucide:circle-help" class="ml-1 size-5" />
           </Tooltip>
         </div>
       </Form.Item>
-      <Form.Item label="流程名称" name="name" class="mb-5">
+      <Form.Item label="流程名称" name="name">
         <Input
           v-model:value="modelData.name"
           :disabled="!!modelData.id"
@@ -279,7 +275,7 @@ defineExpose({ validate });
           placeholder="请输入流程名称"
         />
       </Form.Item>
-      <Form.Item label="流程分类" name="category" class="mb-5">
+      <Form.Item label="流程分类" name="category">
         <Select
           class="w-full"
           v-model:value="modelData.category"
@@ -295,13 +291,13 @@ defineExpose({ validate });
           </Select.Option>
         </Select>
       </Form.Item>
-      <Form.Item label="流程图标" class="mb-5">
+      <Form.Item label="流程图标">
         <ImageUpload v-model:value="modelData.icon" />
       </Form.Item>
-      <Form.Item label="流程描述" name="description" class="mb-5">
+      <Form.Item label="流程描述" name="description">
         <Input.TextArea v-model:value="modelData.description" allow-clear />
       </Form.Item>
-      <Form.Item label="流程类型" name="type" class="mb-5">
+      <Form.Item label="流程类型" name="type">
         <Radio.Group v-model:value="modelData.type">
           <Radio
             v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_TYPE, 'number')"
@@ -312,7 +308,7 @@ defineExpose({ validate });
           </Radio>
         </Radio.Group>
       </Form.Item>
-      <Form.Item label="是否可见" name="visible" class="mb-5">
+      <Form.Item label="是否可见" name="visible">
         <Radio.Group v-model:value="modelData.visible">
           <Radio
             v-for="dict in getDictOptions(
@@ -326,7 +322,7 @@ defineExpose({ validate });
           </Radio>
         </Radio.Group>
       </Form.Item>
-      <Form.Item label="谁可以发起" name="startUserType" class="mb-5">
+      <Form.Item label="谁可以发起" name="startUserType">
         <Select
           v-model:value="modelData.startUserType"
           placeholder="请选择谁可以发起"
@@ -343,15 +339,10 @@ defineExpose({ validate });
           <div
             v-for="user in selectedStartUsers"
             :key="user.id"
-            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
+            class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
           >
-            <Avatar
-              class="m-1"
-              :size="28"
-              v-if="user.avatar"
-              :src="user.avatar"
-            />
-            <Avatar class="m-1" :size="28" v-else>
+            <Avatar class="m-1 size-7" v-if="user.avatar" :src="user.avatar" />
+            <Avatar class="m-1 size-7" v-else>
               {{ user.nickname?.substring(0, 1) }}
             </Avatar>
             <span class="text-gray-700 dark:text-gray-200">
@@ -359,7 +350,7 @@ defineExpose({ validate });
             </span>
             <IconifyIcon
               icon="lucide:x"
-              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500 dark:text-gray-200"
               @click="handleRemoveStartUser(user)"
             />
           </div>
@@ -381,7 +372,7 @@ defineExpose({ validate });
           <div
             v-for="dept in selectedStartDepts"
             :key="dept.id"
-            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 shadow-sm hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
+            class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 shadow-sm hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
           >
             <IconifyIcon icon="lucide:building" class="size-6 px-1" />
             <span class="text-gray-700 dark:text-gray-200">
@@ -405,20 +396,15 @@ defineExpose({ validate });
           </Button>
         </div>
       </Form.Item>
-      <Form.Item label="流程管理员" name="managerUserIds" class="mb-5">
+      <Form.Item label="流程管理员" name="managerUserIds">
         <div class="flex flex-wrap gap-1">
           <div
             v-for="user in selectedManagerUsers"
             :key="user.id"
             class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
           >
-            <Avatar
-              class="m-1"
-              :size="28"
-              v-if="user.avatar"
-              :src="user.avatar"
-            />
-            <Avatar class="m-1" :size="28" v-else>
+            <Avatar class="m-1 size-7" v-if="user.avatar" :src="user.avatar" />
+            <Avatar class="m-1 size-7" v-else>
               {{ user.nickname?.substring(0, 1) }}
             </Avatar>
             <span class="text-gray-700 dark:text-gray-200">

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsInfo.vue

@@ -181,7 +181,7 @@ function handleAuthInfoDialogClose() {
               style="width: calc(100% - 80px)"
             />
             <Button @click="copyToClipboard(authInfo.clientId)" type="primary">
-              <IconifyIcon icon="ph:copy" />
+              <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
         </Form.Item>
@@ -193,7 +193,7 @@ function handleAuthInfoDialogClose() {
               style="width: calc(100% - 80px)"
             />
             <Button @click="copyToClipboard(authInfo.username)" type="primary">
-              <IconifyIcon icon="ph:copy" />
+              <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
         </Form.Item>
@@ -210,11 +210,11 @@ function handleAuthInfoDialogClose() {
               type="primary"
             >
               <IconifyIcon
-                :icon="authPasswordVisible ? 'ph:eye-slash' : 'ph:eye'"
+                :icon="authPasswordVisible ? 'lucide:eye-off' : 'lucide:eye'"
               />
             </Button>
             <Button @click="copyToClipboard(authInfo.password)" type="primary">
-              <IconifyIcon icon="ph:copy" />
+              <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
         </Form.Item>

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModelProperty.vue

@@ -165,18 +165,15 @@ onMounted(() => {
           >
             <!-- 添加渐变背景层 -->
             <div
-              class="pointer-events-none absolute left-0 right-0 top-0 h-[50px] bg-gradient-to-b from-[#eefaff] to-transparent"
+              class="from-muted pointer-events-none absolute left-0 right-0 top-0 h-12 bg-gradient-to-b to-transparent"
             ></div>
             <div class="relative p-4">
               <!-- 标题区域 -->
               <div class="mb-3 flex items-center">
                 <div class="mr-2.5 flex items-center">
-                  <IconifyIcon
-                    icon="ep:cpu"
-                    class="text-[18px] text-[#0070ff]"
-                  />
+                  <IconifyIcon icon="ep:cpu" class="text-primary text-lg" />
                 </div>
-                <div class="font-600 flex-1 text-[16px]">{{ item.name }}</div>
+                <div class="flex-1 text-base font-bold">{{ item.name }}</div>
                 <!-- 标识符 -->
                 <div class="mr-2 inline-flex items-center">
                   <Tag size="small" color="blue">
@@ -198,22 +195,22 @@ onMounted(() => {
                 >
                   <IconifyIcon
                     icon="ep:data-line"
-                    class="text-[18px] text-[#0070ff]"
+                    class="text-primary text-lg"
                   />
                 </div>
               </div>
 
               <!-- 信息区域 -->
-              <div class="text-[14px]">
+              <div class="text-sm">
                 <div class="mb-2.5 last:mb-0">
-                  <span class="mr-2.5 text-[#717c8e]">属性值</span>
-                  <span class="font-600 text-[#0b1d30]">
+                  <span class="text-muted-foreground mr-2.5">属性值</span>
+                  <span class="text-foreground font-bold">
                     {{ formatValueWithUnit(item) }}
                   </span>
                 </div>
                 <div class="mb-2.5 last:mb-0">
-                  <span class="mr-2.5 text-[#717c8e]">更新时间</span>
-                  <span class="text-[12px] text-[#0b1d30]">
+                  <span class="text-muted-foreground mr-2.5">更新时间</span>
+                  <span class="text-foreground text-sm">
                     {{ item.updateTime ? formatDate(item.updateTime) : '-' }}
                   </span>
                 </div>

apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue

@@ -102,7 +102,7 @@ defineExpose({
 <template>
   <div class="product-card-view">
     <!-- 产品卡片列表 -->
-    <div v-loading="loading" class="min-h-[400px]">
+    <div v-loading="loading" class="min-h-96">
       <Row v-if="list.length > 0" :gutter="[16, 16]">
         <Col
           v-for="item in list"
@@ -119,7 +119,7 @@ defineExpose({
               <div class="product-icon">
                 <IconifyIcon
                   :icon="item.icon || 'ant-design:inbox-outlined'"
-                  class="text-[32px]"
+                  class="text-3xl"
                 />
               </div>
               <div class="ml-3 min-w-0 flex-1">
@@ -162,7 +162,7 @@ defineExpose({
               <div class="product-3d-icon">
                 <IconifyIcon
                   icon="ant-design:box-plot-outlined"
-                  class="text-[80px]"
+                  class="text-2xl"
                 />
               </div>
             </div>
@@ -201,11 +201,11 @@ defineExpose({
                   size="small"
                   danger
                   disabled
-                  class="action-btn action-btn-delete !w-[32px]"
+                  class="action-btn action-btn-delete !w-8"
                 >
                   <IconifyIcon
                     icon="ant-design:delete-outlined"
-                    class="text-[14px]"
+                    class="text-sm"
                   />
                 </Button>
               </Tooltip>
@@ -217,11 +217,11 @@ defineExpose({
                 <Button
                   size="small"
                   danger
-                  class="action-btn action-btn-delete !w-[32px]"
+                  class="action-btn action-btn-delete !w-8"
                 >
                   <IconifyIcon
                     icon="ant-design:delete-outlined"
-                    class="text-[14px]"
+                    class="text-sm"
                   />
                 </Button>
               </Popconfirm>

apps/web-antd/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue

@@ -170,7 +170,7 @@ watch(
 </script>
 
 <template>
-  <div class="gap-16px flex flex-col">
+  <div class="flex flex-col gap-4">
     <Row :gutter="16">
       <!-- 时间操作符选择 -->
       <Col :span="8">
@@ -190,7 +190,7 @@ watch(
               :value="option.value"
             >
               <div class="flex w-full items-center justify-between">
-                <div class="gap-8px flex items-center">
+                <div class="flex items-center gap-2">
                   <IconifyIcon :icon="option.icon" :class="option.iconClass" />
                   <span>{{ option.label }}</span>
                 </div>
@@ -225,9 +225,7 @@ watch(
             value-format="YYYY-MM-DD HH:mm:ss"
             class="w-full"
           />
-          <div v-else class="text-14px text-[var(--el-text-color-placeholder)]">
-            无需设置时间值
-          </div>
+          <div v-else class="text-secondary text-sm">无需设置时间值</div>
         </Form.Item>
       </Col>
 

apps/web-antd/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue

@@ -161,11 +161,11 @@ function removeConditionGroup() {
               @click="addSubGroup"
               :disabled="(trigger.conditionGroups?.length || 0) >= maxSubGroups"
             >
-              <IconifyIcon icon="ep:plus" />
+              <IconifyIcon icon="lucide:plus" />
               添加子条件组
             </Button>
             <Button danger size="small" text @click="removeConditionGroup">
-              <IconifyIcon icon="ep:delete" />
+              <IconifyIcon icon="lucide:trash-2" />
               删除条件组
             </Button>
           </div>
@@ -215,7 +215,7 @@ function removeConditionGroup() {
                     @click="removeSubGroup(subGroupIndex)"
                     class="hover:bg-red-50"
                   >
-                    <IconifyIcon icon="ep:delete" />
+                    <IconifyIcon icon="lucide:trash-2" />
                     删除组
                   </Button>
                 </div>
@@ -258,7 +258,7 @@ function removeConditionGroup() {
           class="p-24px rounded-8px border-2 border-dashed border-orange-200 bg-orange-50 text-center"
         >
           <div class="gap-12px flex flex-col items-center">
-            <IconifyIcon icon="ep:plus" class="text-32px text-orange-400" />
+            <IconifyIcon icon="lucide:plus" class="text-32px text-orange-400" />
             <div class="text-orange-600">
               <p class="text-14px font-500 mb-4px">暂无子条件组</p>
               <p class="text-12px">点击上方"添加子条件组"按钮开始配置</p>

apps/web-antd/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue

@@ -173,7 +173,7 @@ function handlePropertyChange(propertyInfo: any) {
 </script>
 
 <template>
-  <div class="space-y-16px">
+  <div class="space-y-4">
     <!-- 触发事件类型选择 -->
     <Form.Item label="触发事件类型" required>
       <Select
@@ -192,7 +192,7 @@ function handlePropertyChange(propertyInfo: any) {
     </Form.Item>
 
     <!-- 设备属性条件配置 -->
-    <div v-if="isDevicePropertyTrigger" class="space-y-16px">
+    <div v-if="isDevicePropertyTrigger" class="space-y-4">
       <!-- 产品设备选择 -->
       <Row :gutter="16">
         <Col :span="12">
@@ -292,7 +292,7 @@ function handlePropertyChange(propertyInfo: any) {
     </div>
 
     <!-- 设备状态条件配置 -->
-    <div v-else-if="isDeviceStatusTrigger" class="space-y-16px">
+    <div v-else-if="isDeviceStatusTrigger" class="space-y-4">
       <!-- 设备状态触发器使用简化的配置 -->
       <Row :gutter="16">
         <Col :span="12">
@@ -364,13 +364,11 @@ function handlePropertyChange(propertyInfo: any) {
     </div>
 
     <!-- 其他触发类型的提示 -->
-    <div v-else class="py-20px text-center">
-      <p class="text-14px mb-4px text-[var(--el-text-color-secondary)]">
+    <div v-else class="py-5 text-center">
+      <p class="text-secondary mb-1 text-sm">
         当前触发事件类型：{{ getTriggerTypeLabel(triggerType) }}
       </p>
-      <p class="text-12px text-[var(--el-text-color-placeholder)]">
-        此触发类型暂不需要配置额外条件
-      </p>
+      <p class="text-secondary text-xs">此触发类型暂不需要配置额外条件</p>
     </div>
   </div>
 </template>

apps/web-antd/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue

@@ -83,27 +83,24 @@ function updateCondition(index: number, condition: TriggerCondition) {
 </script>
 
 <template>
-  <div class="p-16px">
+  <div class="p-4">
     <!-- 空状态 -->
-    <div v-if="!subGroup || subGroup.length === 0" class="py-24px text-center">
-      <div class="gap-12px flex flex-col items-center">
-        <IconifyIcon
-          icon="ep:plus"
-          class="text-32px text-[var(--el-text-color-placeholder)]"
-        />
-        <div class="text-[var(--el-text-color-secondary)]">
-          <p class="text-14px font-500 mb-4px">暂无条件</p>
-          <p class="text-12px">点击下方按钮添加第一个条件</p>
+    <div v-if="!subGroup || subGroup.length === 0" class="py-6 text-center">
+      <div class="flex flex-col items-center gap-3">
+        <IconifyIcon icon="lucide:plus" class="text-8 text-secondary" />
+        <div class="text-secondary">
+          <p class="mb-1 text-base font-bold">暂无条件</p>
+          <p class="text-xs">点击下方按钮添加第一个条件</p>
         </div>
         <Button type="primary" @click="addCondition">
-          <IconifyIcon icon="ep:plus" />
+          <IconifyIcon icon="lucide:plus" />
           添加条件
         </Button>
       </div>
     </div>
 
     <!-- 条件列表 -->
-    <div v-else class="space-y-16px">
+    <div v-else class="space-y-4">
       <div
         v-for="(condition, conditionIndex) in subGroup"
         :key="`condition-${conditionIndex}`"
@@ -111,20 +108,18 @@ function updateCondition(index: number, condition: TriggerCondition) {
       >
         <!-- 条件配置 -->
         <div
-          class="rounded-6px border border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-blank)] shadow-sm"
+          class="rounded-3px border-border bg-fill-color-blank border shadow-sm"
         >
           <div
-            class="p-12px rounded-t-4px flex items-center justify-between border-b border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]"
+            class="rounded-t-1 border-border bg-fill-color-blank flex items-center justify-between border-b p-3"
           >
-            <div class="gap-8px flex items-center">
+            <div class="flex items-center gap-2">
               <div
-                class="w-20px h-20px text-10px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
+                class="bg-primary flex size-5 items-center justify-center rounded-full text-xs font-bold text-white"
               >
                 {{ conditionIndex + 1 }}
               </div>
-              <span
-                class="text-12px font-500 text-[var(--el-text-color-primary)]"
-              >
+              <span class="text-primary text-base font-bold">
                 条件 {{ conditionIndex + 1 }}
               </span>
             </div>
@@ -136,11 +131,11 @@ function updateCondition(index: number, condition: TriggerCondition) {
               v-if="subGroup!.length > 1"
               class="hover:bg-red-50"
             >
-              <IconifyIcon icon="ep:delete" />
+              <IconifyIcon icon="lucide:trash-2" />
             </Button>
           </div>
 
-          <div class="p-12px">
+          <div class="p-3">
             <ConditionConfig
               :model-value="condition"
               @update:model-value="
@@ -158,15 +153,13 @@ function updateCondition(index: number, condition: TriggerCondition) {
         v-if="
           subGroup && subGroup.length > 0 && subGroup.length < maxConditions
         "
-        class="py-16px text-center"
+        class="py-4 text-center"
       >
         <Button type="primary" plain @click="addCondition">
-          <IconifyIcon icon="ep:plus" />
+          <IconifyIcon icon="lucide:plus" />
           继续添加条件
         </Button>
-        <span
-          class="mt-8px text-12px block text-[var(--el-text-color-secondary)]"
-        >
+        <span class="text-secondary mt-2 block text-xs">
           最多可添加 {{ maxConditions }} 个条件
         </span>
       </div>

apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue

@@ -198,25 +198,25 @@ const emptyMessage = computed(() => {
 });
 
 // 计算属性：无配置消息
-const noConfigMessage = computed(() => {
-  switch (props.type) {
-    case JsonParamsInputTypeEnum.CUSTOM: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
-    }
-    case JsonParamsInputTypeEnum.EVENT: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
-    }
-    case JsonParamsInputTypeEnum.PROPERTY: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
-    }
-    case JsonParamsInputTypeEnum.SERVICE: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
-    }
-    default: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
-    }
-  }
-});
+// const noConfigMessage = computed(() => {
+//   switch (props.type) {
+//     case JsonParamsInputTypeEnum.CUSTOM: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
+//     }
+//     case JsonParamsInputTypeEnum.EVENT: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
+//     }
+//     case JsonParamsInputTypeEnum.PROPERTY: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
+//     }
+//     case JsonParamsInputTypeEnum.SERVICE: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
+//     }
+//     default: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
+//     }
+//   }
+// });
 
 /**
  * 处理参数变化事件
@@ -415,7 +415,7 @@ watch(
 
 <template>
   <!-- 参数配置 -->
-  <div class="space-y-12px w-full">
+  <div class="w-full space-y-3">
     <!-- JSON 输入框 -->
     <div class="relative">
       <Input.TextArea
@@ -427,7 +427,7 @@ watch(
         :class="{ 'is-error': jsonError }"
       />
       <!-- 查看详细示例弹出层 -->
-      <div class="top-8px right-8px absolute">
+      <div class="absolute right-2 top-2">
         <Popover
           placement="leftTop"
           :width="450"
@@ -450,79 +450,64 @@ watch(
 
           <!-- 弹出层内容 -->
           <div class="json-params-detail-content">
-            <div class="gap-8px mb-16px flex items-center">
-              <IconifyIcon
-                :icon="titleIcon"
-                class="text-18px text-[var(--el-color-primary)]"
-              />
-              <span
-                class="text-16px font-600 text-[var(--el-text-color-primary)]"
-              >
+            <div class="mb-4 flex items-center gap-2">
+              <IconifyIcon :icon="titleIcon" class="text-primary text-lg" />
+              <span class="text-primary text-base font-bold">
                 {{ title }}
               </span>
             </div>
 
-            <div class="space-y-16px">
+            <div class="space-y-4">
               <!-- 参数列表 -->
               <div v-if="paramsList.length > 0">
-                <div class="gap-8px mb-8px flex items-center">
+                <div class="mb-2 flex items-center gap-2">
                   <IconifyIcon
                     :icon="paramsIcon"
-                    class="text-14px text-[var(--el-color-primary)]"
+                    class="text-primary text-base"
                   />
-                  <span
-                    class="text-14px font-500 text-[var(--el-text-color-primary)]"
-                  >
+                  <span class="text-primary text-base font-bold">
                     {{ paramsLabel }}
                   </span>
                 </div>
-                <div class="ml-22px space-y-8px">
+                <div class="ml-6 space-y-2">
                   <div
                     v-for="param in paramsList"
                     :key="param.identifier"
-                    class="p-8px rounded-4px flex items-center justify-between bg-[var(--el-fill-color-lighter)]"
+                    class="bg-card flex items-center justify-between rounded-lg p-2"
                   >
                     <div class="flex-1">
-                      <div
-                        class="text-12px font-500 text-[var(--el-text-color-primary)]"
-                      >
+                      <div class="text-primary text-base font-bold">
                         {{ param.name }}
                         <Tag
                           v-if="param.required"
                           size="small"
                           type="danger"
-                          class="ml-4px"
+                          class="ml-1"
                         >
                           {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
                         </Tag>
                       </div>
-                      <div
-                        class="text-11px text-[var(--el-text-color-secondary)]"
-                      >
+                      <div class="text-secondary text-xs">
                         {{ param.identifier }}
                       </div>
                     </div>
-                    <div class="gap-8px flex items-center">
+                    <div class="flex items-center gap-2">
                       <Tag :type="getParamTypeTag(param.dataType)" size="small">
                         {{ getParamTypeName(param.dataType) }}
                       </Tag>
-                      <span
-                        class="text-11px text-[var(--el-text-color-secondary)]"
-                      >
+                      <span class="text-secondary text-xs">
                         {{ getExampleValue(param) }}
                       </span>
                     </div>
                   </div>
                 </div>
 
-                <div class="mt-12px ml-22px">
-                  <div
-                    class="text-12px mb-6px text-[var(--el-text-color-secondary)]"
-                  >
+                <div class="ml-6 mt-3">
+                  <div class="text-secondary mb-1 text-xs">
                     {{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
                   </div>
                   <pre
-                    class="p-12px rounded-4px text-11px border-l-3px overflow-x-auto border-[var(--el-color-primary)] bg-[var(--el-fill-color-light)] text-[var(--el-text-color-primary)]"
+                    class="bg-card border-l-3px border-primary text-primary overflow-x-auto rounded-lg p-3 text-sm"
                   >
                       <code>{{ generateExampleJson() }}</code>
                     </pre>
@@ -531,8 +516,8 @@ watch(
 
               <!-- 无参数提示 -->
               <div v-else>
-                <div class="py-16px text-center">
-                  <p class="text-14px text-[var(--el-text-color-secondary)]">
+                <div class="py-4 text-center">
+                  <p class="text-secondary text-sm">
                     {{ emptyMessage }}
                   </p>
                 </div>
@@ -545,37 +530,29 @@ watch(
 
     <!-- 验证状态和错误提示 -->
     <div class="flex items-center justify-between">
-      <div class="gap-8px flex items-center">
+      <div class="flex items-center gap-2">
         <IconifyIcon
           :icon="
             jsonError
               ? JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.ERROR
               : JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.SUCCESS
           "
-          :class="
-            jsonError
-              ? 'text-[var(--el-color-danger)]'
-              : 'text-[var(--el-color-success)]'
-          "
-          class="text-14px"
+          :class="jsonError ? 'text-danger' : 'text-success'"
+          class="text-sm"
         />
         <span
-          :class="
-            jsonError
-              ? 'text-[var(--el-color-danger)]'
-              : 'text-[var(--el-color-success)]'
-          "
-          class="text-12px"
+          :class="jsonError ? 'text-danger' : 'text-success'"
+          class="text-xs"
         >
           {{ jsonError || JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_CORRECT }}
         </span>
       </div>
 
       <!-- 快速填充按钮 -->
-      <div v-if="paramsList.length > 0" class="gap-8px flex items-center">
-        <span class="text-12px text-[var(--el-text-color-secondary)]">{{
-          JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL
-        }}</span>
+      <div v-if="paramsList.length > 0" class="flex items-center gap-2">
+        <span class="text-secondary text-xs">
+          {{ JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL }}
+        </span>
         <Button size="small" type="primary" plain @click="fillExampleJson">
           {{ JSON_PARAMS_INPUT_CONSTANTS.EXAMPLE_DATA_BUTTON }}
         </Button>

apps/web-antd/src/views/iot/rule/scene/form/inputs/ValueInput.vue

@@ -186,7 +186,7 @@ watch(
         operator ===
         IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value
       "
-      class="w-full! gap-8px flex items-center"
+      class="w-full! flex items-center gap-2"
     >
       <Input
         v-model="rangeStart"
@@ -196,11 +196,7 @@ watch(
         class="min-w-0 flex-1"
         style="width: auto !important"
       />
-      <span
-        class="text-12px whitespace-nowrap text-[var(--el-text-color-secondary)]"
-      >
-        至
-      </span>
+      <span class="text-secondary whitespace-nowrap text-xs"> 至 </span>
       <Input
         v-model="rangeEnd"
         :type="getInputType()"
@@ -226,18 +222,16 @@ watch(
           <Tooltip content="多个值用逗号分隔，如：1,2,3" placement="top">
             <IconifyIcon
               icon="ep:question-filled"
-              class="cursor-help text-[var(--el-text-color-placeholder)]"
+              class="cursor-help text-gray-400"
             />
           </Tooltip>
         </template>
       </Input>
       <div
         v-if="listPreview.length > 0"
-        class="mt-8px gap-6px flex flex-wrap items-center"
+        class="mt-2 flex flex-wrap items-center gap-1"
       >
-        <span class="text-12px text-[var(--el-text-color-secondary)]">
-          解析结果：
-        </span>
+        <span class="text-secondary text-xs"> 解析结果： </span>
         <Tag
           v-for="(item, index) in listPreview"
           :key="index"
@@ -288,7 +282,7 @@ watch(
           :content="`单位：${propertyConfig.unit}`"
           placement="top"
         >
-          <span class="text-12px px-4px text-[var(--el-text-color-secondary)]">
+          <span class="text-secondary px-1 text-xs">
             {{ propertyConfig.unit }}
           </span>
         </Tooltip>

apps/web-antd/src/views/iot/rule/scene/form/sections/ActionSection.vue

@@ -100,7 +100,7 @@ function removeAction(index: number) {
  * @param type 执行器类型
  */
 function updateActionType(index: number, type: number) {
-  actions.value[index].type = type.toString();
+  actions.value[index]!.type = type.toString();
   onActionTypeChange(actions.value[index] as Action, type);
 }
 
@@ -119,7 +119,7 @@ function updateAction(index: number, action: Action) {
  * @param alertConfigId 告警配置ID
  */
 function updateActionAlertConfig(index: number, alertConfigId?: number) {
-  actions.value[index].alertConfigId = alertConfigId;
+  actions.value[index]!.alertConfigId = alertConfigId;
   if (actions.value[index]) {
     actions.value[index].alertConfigId = alertConfigId;
   }
@@ -153,7 +153,7 @@ function onActionTypeChange(action: Action, type: any) {
 </script>
 
 <template>
-  <Card class="rounded-8px border-primary border" shadow="never">
+  <Card class="border-primary rounded-lg border" shadow="never">
     <template #title>
       <div class="flex items-center justify-between">
         <div class="gap-8px flex items-center">
@@ -186,18 +186,18 @@ function onActionTypeChange(action: Action, type: any) {
         <div
           v-for="(action, index) in actions"
           :key="`action-${index}`"
-          class="rounded-8px border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
+          class="rounded-lg border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
         >
           <!-- 执行器头部 - 蓝色主题 -->
           <div
-            class="p-16px rounded-t-6px flex items-center justify-between border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50"
+            class="flex items-center justify-between rounded-t-lg border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 p-4"
           >
             <div class="gap-12px flex items-center">
               <div
-                class="gap-8px text-16px font-600 flex items-center text-blue-700"
+                class="font-600 flex items-center gap-2 text-base text-blue-700"
               >
                 <div
-                  class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
+                  class="flex size-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white"
                 >
                   {{ index + 1 }}
                 </div>
@@ -220,7 +220,7 @@ function onActionTypeChange(action: Action, type: any) {
                 @click="removeAction(index)"
                 class="hover:bg-red-50"
               >
-                <IconifyIcon icon="ep:delete" />
+                <IconifyIcon icon="lucide:trash-2" />
                 删除
               </Button>
             </div>
@@ -275,16 +275,14 @@ function onActionTypeChange(action: Action, type: any) {
                 action.type ===
                 IotRuleSceneActionTypeEnum.ALERT_TRIGGER.toString()
               "
-              class="rounded-6px p-16px border-border bg-fill-color-blank border"
+              class="border-border bg-fill-color-blank rounded-lg border p-4"
             >
-              <div class="gap-8px mb-8px flex items-center">
-                <IconifyIcon icon="ep:warning" class="text-16px text-warning" />
-                <span class="text-14px font-600 text-primary">触发告警</span>
+              <div class="mb-2 flex items-center gap-2">
+                <IconifyIcon icon="ep:warning" class="text-warning text-base" />
+                <span class="font-600 text-primary text-sm">触发告警</span>
                 <Tag size="small" type="warning">自动执行</Tag>
               </div>
-              <div
-                class="text-12px leading-relaxed text-[var(--el-text-color-secondary)]"
-              >
+              <div class="text-secondary text-xs leading-relaxed">
                 当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 ->
                 告警配置] 管理。
               </div>

apps/web-antd/src/views/iot/rule/scene/form/sections/TriggerSection.vue

@@ -71,7 +71,7 @@ function removeTrigger(index: number) {
  * @param type 触发器类型
  */
 function updateTriggerType(index: number, type: number) {
-  triggers.value[index].type = type;
+  triggers.value[index]!.type = type.toString();
   onTriggerTypeChange(index, type);
 }
 
@@ -90,7 +90,7 @@ function updateTriggerDeviceConfig(index: number, newTrigger: Trigger) {
  * @param cronExpression CRON 表达式
  */
 function updateTriggerCronConfig(index: number, cronExpression?: string) {
-  triggers.value[index].cronExpression = cronExpression;
+  triggers.value[index]!.cronExpression = cronExpression;
 }
 
 /**
@@ -99,7 +99,7 @@ function updateTriggerCronConfig(index: number, cronExpression?: string) {
  * @param _ 触发器类型（未使用）
  */
 function onTriggerTypeChange(index: number, _: number) {
-  const triggerItem = triggers.value[index];
+  const triggerItem = triggers.value[index]!;
   triggerItem.productId = undefined;
   triggerItem.deviceId = undefined;
   triggerItem.identifier = undefined;
@@ -127,7 +127,7 @@ onMounted(() => {
           <Tag size="small" type="info"> {{ triggers.length }} 个触发器 </Tag>
         </div>
         <Button type="primary" size="small" @click="addTrigger">
-          <IconifyIcon icon="ep:plus" />
+          <IconifyIcon icon="lucide:plus" />
           添加触发器
         </Button>
       </div>
@@ -173,7 +173,7 @@ onMounted(() => {
                 @click="removeTrigger(index)"
                 class="hover:bg-red-50"
               >
-                <IconifyIcon icon="ep:delete" />
+                <IconifyIcon icon="lucide:trash-2" />
                 删除
               </Button>
             </div>
@@ -203,7 +203,10 @@ onMounted(() => {
               <div
                 class="gap-8px p-12px px-16px rounded-6px border-primary bg-background flex items-center border"
               >
-                <IconifyIcon icon="ep:timer" class="text-18px text-danger" />
+                <IconifyIcon
+                  icon="lucide:timer"
+                  class="text-18px text-danger"
+                />
                 <span class="text-14px font-500 text-primary">
                   定时触发配置
                 </span>

apps/web-antd/src/views/mall/home/modules/shortcut-card.vue

@@ -14,7 +14,7 @@ const router = useRouter();
 const menuList = [
   {
     name: '用户管理',
-    icon: 'ep:user-filled',
+    icon: 'lucide:user',
     bgColor: 'bg-red-400',
     routerName: 'MemberUser',
   },
@@ -26,7 +26,7 @@ const menuList = [
   },
   {
     name: '订单管理',
-    icon: 'ep:list',
+    icon: 'lucide:list',
     bgColor: 'bg-yellow-500',
     routerName: 'TradeOrder',
   },
@@ -44,13 +44,13 @@ const menuList = [
   },
   {
     name: '优惠券',
-    icon: 'ep:ticket',
+    icon: 'lucide:ticket',
     bgColor: 'bg-blue-500',
     routerName: 'PromotionCoupon',
   },
   {
     name: '拼团活动',
-    icon: 'fa:group',
+    icon: 'lucide:users',
     bgColor: 'bg-purple-500',
     routerName: 'PromotionBargainActivity',
   },

apps/web-antd/src/views/mall/product/category/components/product-category-select.vue

@@ -3,6 +3,8 @@ import { computed, onMounted, ref } from 'vue';
 
 import { handleTree } from '@vben/utils';
 
+import { TreeSelect } from 'ant-design-vue';
+
 import { getCategoryList } from '#/api/mall/product/category';
 
 /** 商品分类选择组件 */

apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue

@@ -161,25 +161,22 @@ function handleProductCategorySelected(id: number) {
     @ok="handleSubmit"
   >
     <div class="flex h-[500px] gap-2">
-      <div class="flex flex-col">
-        <!-- 左侧分组列表 -->
-        <div
-          class="h-full overflow-y-auto border-r border-gray-200 pr-2"
-          ref="groupScrollbar"
+      <!-- 左侧分组列表 -->
+      <div
+        class="flex h-full flex-col overflow-y-auto border-r border-gray-200 pr-2"
+        ref="groupScrollbar"
+      >
+        <Button
+          v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
+          :key="groupIndex"
+          class="!ml-0 mb-1 mr-4 !justify-start"
+          :class="[{ active: activeGroup === group.name }]"
+          ref="groupBtnRefs"
+          :type="activeGroup === group.name ? 'primary' : 'default'"
+          @click="handleGroupSelected(group.name)"
         >
-          <Button
-            v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
-            :key="groupIndex"
-            class="!ml-0 mb-1 mr-4 !justify-start"
-            :class="[{ active: activeGroup === group.name }]"
-            ref="groupBtnRefs"
-            :type="activeGroup === group.name ? 'primary' : 'default'"
-            :ghost="activeGroup !== group.name"
-            @click="handleGroupSelected(group.name)"
-          >
-            {{ group.name }}
-          </Button>
-        </div>
+          {{ group.name }}
+        </Button>
       </div>
       <!-- 右侧链接列表 -->
       <div

apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue

@@ -48,17 +48,13 @@ watch(
 <template>
   <Input v-model:value="appLink" placeholder="输入或选择链接">
     <template #addonAfter>
-      <Button @click="handleOpenDialog" class="!border-none">选择</Button>
+      <Button
+        @click="handleOpenDialog"
+        class="!border-none !bg-transparent !p-0"
+      >
+        选择
+      </Button>
     </template>
   </Input>
-
   <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>
-
-<style scoped lang="scss">
-:deep(.ant-input-group-addon) {
-  padding: 0;
-  background: transparent;
-  border: 0;
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue

@@ -3,11 +3,13 @@ import type { ComponentStyle } from '../util';
 
 import { useVModel } from '@vueuse/core';
 import {
-  Card,
+  Col,
   Form,
   FormItem,
+  InputNumber,
   Radio,
   RadioGroup,
+  Row,
   Slider,
   TabPane,
   Tabs,
@@ -132,7 +134,8 @@ function handleSliderChange(prop: string) {
 
     <!-- 每个组件的通用内容 -->
     <TabPane tab="样式" key="style" force-render>
-      <Card title="组件样式" class="property-group">
+      <p class="text-lg font-bold">组件样式：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Form :model="formData">
           <FormItem label="组件背景" name="bgType">
             <RadioGroup v-model:value="formData.bgType">
@@ -156,7 +159,7 @@ function handleSliderChange(prop: string) {
               <template #tip>建议宽度 750px</template>
             </UploadImg>
           </FormItem>
-          <Tree :tree-data="treeData" default-expand-all>
+          <Tree :tree-data="treeData" default-expand-all :block-node="true">
             <template #title="{ dataRef }">
               <FormItem
                 :label="dataRef.label"
@@ -167,20 +170,33 @@ function handleSliderChange(prop: string) {
                 :wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
                 class="mb-0 w-full"
               >
-                <Slider
-                  v-model:value="
-                    formData[dataRef.prop as keyof ComponentStyle] as number
-                  "
-                  :max="100"
-                  :min="0"
-                  @change="handleSliderChange(dataRef.prop)"
-                />
+                <Row>
+                  <Col :span="12">
+                    <Slider
+                      v-model:value="
+                        formData[dataRef.prop as keyof ComponentStyle]
+                      "
+                      :max="100"
+                      :min="0"
+                      @change="handleSliderChange(dataRef.prop)"
+                    />
+                  </Col>
+                  <Col :span="4">
+                    <InputNumber
+                      :max="100"
+                      :min="0"
+                      v-model:value="
+                        formData[dataRef.prop as keyof ComponentStyle]
+                      "
+                    />
+                  </Col>
+                </Row>
               </FormItem>
             </template>
           </Tree>
           <slot name="style" :style="formData"></slot>
         </Form>
-      </Card>
+      </div>
     </TabPane>
   </Tabs>
 </template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue

@@ -5,7 +5,7 @@ import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, Tooltip } from 'ant-design-vue';
+import { Button } from 'ant-design-vue';
 
 import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
@@ -96,7 +96,9 @@ const handleDeleteComponent = () => {
     <div :style="style">
       <component :is="component.id" :property="component.property" />
     </div>
-    <div class="component-wrap absolute left-[-2px] top-0 block h-full w-full">
+    <div
+      class="component-wrap absolute -bottom-1 -left-0.5 -right-0.5 -top-1 block h-full w-full"
+    >
       <!-- 左侧：组件名（悬浮的小贴条） -->
       <div class="component-name" v-if="component.name">
         {{ component.name }}
@@ -106,33 +108,61 @@ const handleDeleteComponent = () => {
         class="component-toolbar"
         v-if="showToolbar && component.name && active"
       >
-        <VerticalButtonGroup type="primary">
-          <Tooltip title="上移" placement="right">
-            <Button
-              :disabled="!canMoveUp"
-              @click.stop="handleMoveComponent(-1)"
-            >
-              <IconifyIcon icon="ep:arrow-up" />
-            </Button>
-          </Tooltip>
-          <Tooltip title="下移" placement="right">
-            <Button
-              :disabled="!canMoveDown"
-              @click.stop="handleMoveComponent(1)"
-            >
-              <IconifyIcon icon="ep:arrow-down" />
-            </Button>
-          </Tooltip>
-          <Tooltip title="复制" placement="right">
-            <Button @click.stop="handleCopyComponent()">
-              <IconifyIcon icon="ep:copy-document" />
-            </Button>
-          </Tooltip>
-          <Tooltip title="删除" placement="right">
-            <Button @click.stop="handleDeleteComponent()">
-              <IconifyIcon icon="ep:delete" />
-            </Button>
-          </Tooltip>
+        <VerticalButtonGroup size="small">
+          <Button
+            :disabled="!canMoveUp"
+            type="primary"
+            size="small"
+            @click.stop="handleMoveComponent(-1)"
+            v-tippy="{
+              content: '上移',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:arrow-up" />
+          </Button>
+          <Button
+            :disabled="!canMoveDown"
+            type="primary"
+            size="small"
+            @click.stop="handleMoveComponent(1)"
+            v-tippy="{
+              content: '下移',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:arrow-down" />
+          </Button>
+          <Button
+            type="primary"
+            size="small"
+            @click.stop="handleCopyComponent()"
+            v-tippy="{
+              content: '复制',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:copy" />
+          </Button>
+          <Button
+            type="primary"
+            size="small"
+            @click.stop="handleDeleteComponent()"
+            v-tippy="{
+              content: '删除',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+          </Button>
         </VerticalButtonGroup>
       </div>
     </div>
@@ -149,7 +179,7 @@ $toolbar-position: -55px;
   .component-wrap {
     /* 鼠标放到组件上时 */
     &:hover {
-      border: $hover-border-width dashed var(--ant-color-primary);
+      border: $hover-border-width dashed hsl(var(--primary));
       box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
 
       .component-name {
@@ -170,9 +200,9 @@ $toolbar-position: -55px;
       height: 25px;
       font-size: 12px;
       line-height: 25px;
-      color: #6a6a6a;
+      color: hsl(var(--text-color));
       text-align: center;
-      background: #fff;
+      background: hsl(var(--background));
       box-shadow:
         0 0 4px #00000014,
         0 2px 6px #0000000f,
@@ -187,7 +217,7 @@ $toolbar-position: -55px;
         height: 0;
         content: ' ';
         border: 5px solid transparent;
-        border-left-color: #fff;
+        border-left-color: hsl(var(--background));
       }
     }
 
@@ -207,7 +237,7 @@ $toolbar-position: -55px;
         height: 0;
         content: ' ';
         border: 5px solid transparent;
-        border-right-color: #2d8cf0;
+        border-right-color: hsl(var(--primary));
       }
     }
   }
@@ -218,7 +248,7 @@ $toolbar-position: -55px;
 
     .component-wrap {
       margin-bottom: $active-border-width + $active-border-width;
-      border: $active-border-width solid var(--ant-color-primary) !important;
+      border: $active-border-width solid hsl(var(--primary)) !important;
       box-shadow: 0 0 10px 0 rgb(24 144 255 / 30%);
 
       .component-name {
@@ -227,10 +257,10 @@ $toolbar-position: -55px;
         /* 防止加了边框之后，位置移动 */
         left: $name-position - $active-border-width !important;
         color: #fff;
-        background: var(--ant-color-primary);
+        background: hsl(var(--primary));
 
         &::after {
-          border-left-color: var(--ant-color-primary);
+          border-left-color: hsl(var(--primary));
         }
       }
 

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { DiyComponent, DiyComponentLibrary } from '../util';
 
-import { reactive, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
-import { Collapse, CollapsePanel } from 'ant-design-vue';
+import { Collapse } from 'ant-design-vue';
 import draggable from 'vuedraggable';
 
 import { componentConfigs } from './mobile/index';
@@ -19,28 +19,28 @@ const props = defineProps<{
   list: DiyComponentLibrary[];
 }>();
 
-const groups = reactive<any[]>([]); // 组件分组
-const extendGroups = reactive<string[]>([]); // 展开的折叠面板
+const groups = ref<any[]>([]); // 组件分组
+const extendGroups = ref<string[]>([]); // 展开的折叠面板
 
 /** 监听 list 属性，按照 DiyComponentLibrary 的 name 分组 */
 watch(
   () => props.list,
   () => {
     // 清除旧数据
-    extendGroups.length = 0;
-    groups.length = 0;
+    extendGroups.value = [];
+    groups.value = [];
     // 重新生成数据
     props.list.forEach((group) => {
       // 是否展开分组
       if (group.extended) {
-        extendGroups.push(group.name);
+        extendGroups.value.push(group.name);
       }
       // 查找组件
       const components = group.components
         .map((name) => componentConfigs[name] as DiyComponent<any>)
         .filter(Boolean);
       if (components.length > 0) {
-        groups.push({
+        groups.value.push({
           name: group.name,
           components,
         });
@@ -53,137 +53,50 @@ watch(
 );
 
 /** 克隆组件 */
-const handleCloneComponent = (component: DiyComponent<any>) => {
+function handleCloneComponent(component: DiyComponent<any>) {
   const instance = cloneDeep(component);
   instance.uid = Date.now();
   return instance;
-};
+}
 </script>
 
 <template>
-  <aside
-    class="editor-left z-[1] w-[261px] shrink-0 select-none shadow-[8px_0_8px_-8px_rgb(0_0_0/0.12)]"
-  >
-    <div class="h-full overflow-y-auto">
-      <Collapse v-model:active-key="extendGroups">
-        <CollapsePanel
-          v-for="group in groups"
-          :key="group.name"
-          :header="group.name"
+  <div class="z-[1] max-h-[calc(80vh)] shrink-0 select-none overflow-y-auto">
+    <Collapse
+      v-model:active-key="extendGroups"
+      :bordered="false"
+      class="bg-card"
+    >
+      <Collapse.Panel
+        v-for="(group, index) in groups"
+        :key="group.name"
+        :header="group.name"
+        :force-render="true"
+      >
+        <draggable
+          class="flex flex-wrap items-center"
+          ghost-class="draggable-ghost"
+          :item-key="index.toString()"
+          :list="group.components"
+          :sort="false"
+          :group="{ name: 'component', pull: 'clone', put: false }"
+          :clone="handleCloneComponent"
+          :animation="200"
+          :force-fallback="false"
         >
-          <draggable
-            class="flex flex-wrap items-center"
-            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="false"
-          >
-            <template #item="{ element }">
-              <div>
-                <div class="hidden text-white">组件放置区域</div>
-                <div
-                  class="component flex h-[86px] w-[86px] cursor-move flex-col items-center justify-center border-b border-r [&:nth-of-type(3n)]:border-r-0"
-                  :style="{
-                    borderColor: 'var(--ant-color-split)',
-                  }"
-                >
-                  <IconifyIcon
-                    :icon="element.icon"
-                    :size="32"
-                    class="mb-1 text-gray-500"
-                  />
-                  <span class="mt-1 text-xs">{{ element.name }}</span>
-                </div>
-              </div>
-            </template>
-          </draggable>
-        </CollapsePanel>
-      </Collapse>
-    </div>
-  </aside>
+          <template #item="{ element }">
+            <div
+              class="component flex h-20 w-20 cursor-move flex-col items-center justify-center hover:border-2 hover:border-blue-500"
+            >
+              <IconifyIcon
+                :icon="element.icon"
+                class="mb-1 size-8 text-gray-500"
+              />
+              <span class="mt-1 text-xs">{{ element.name }}</span>
+            </div>
+          </template>
+        </draggable>
+      </Collapse.Panel>
+    </Collapse>
+  </div>
 </template>
-
-<style scoped lang="scss">
-.editor-left {
-  :deep(.ant-collapse) {
-    border-top: none;
-  }
-
-  :deep(.ant-collapse-item) {
-    border-bottom: none;
-  }
-
-  :deep(.ant-collapse-content-box) {
-    padding: 0;
-  }
-
-  :deep(.ant-collapse-header) {
-    height: 32px;
-    padding: 0 24px !important;
-    line-height: 32px;
-    background-color: var(--ant-color-bg-layout);
-    border-bottom: none;
-  }
-
-  /* 组件 hover 和 active 状态（需要 CSS 变量） */
-  .component.active,
-  .component:hover {
-    color: var(--ant-color-white);
-    background: var(--ant-color-primary);
-
-    :deep(.iconify) {
-      color: var(--ant-color-white);
-    }
-  }
-}
-
-/* 拖拽区域全局样式 */
-.drag-area {
-  /* 拖拽到手机区域时的样式 */
-  .draggable-ghost {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    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;
-
-    span {
-      display: inline-block;
-      width: 140px;
-      height: 25px;
-      font-size: 12px;
-      line-height: 25px;
-      color: #fff;
-      text-align: center;
-      background: #5487df;
-    }
-
-    .component {
-      display: none; /* 拖拽时隐藏组件 */
-    }
-
-    .hidden {
-      display: block !important; /* 拖拽时显示占位提示 */
-    }
-  }
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue

@@ -5,6 +5,8 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Carousel, Image } from 'ant-design-vue';
+
 /** 轮播图 */
 defineOptions({ name: 'Carousel' });
 
@@ -16,36 +18,36 @@ const handleIndexChange = (index: number) => {
 };
 </script>
 <template>
-  <!-- 无图片 -->
-  <div
-    class="flex h-[250px] items-center justify-center bg-gray-300"
-    v-if="property.items.length === 0"
-  >
-    <IconifyIcon icon="tdesign:image" class="text-[120px] text-gray-800" />
-  </div>
-  <div v-else class="relative">
-    <Carousel
-      :autoplay="property.autoplay"
-      :autoplay-speed="property.interval * 1000"
-      :dots="property.indicator !== 'number'"
-      @change="handleIndexChange"
-      class="h-[174px]"
-    >
-      <div v-for="(item, index) in property.items" :key="index">
-        <Image
-          class="h-full w-full object-cover"
-          :src="item.imgUrl"
-          :preview="false"
-        />
-      </div>
-    </Carousel>
+  <div>
+    <!-- 无图片 -->
     <div
-      v-if="property.indicator === 'number'"
-      class="absolute bottom-[10px] right-[10px] rounded-xl bg-black px-[8px] py-[2px] text-[10px] text-white opacity-40"
+      class="bg-card flex h-64 items-center justify-center"
+      v-if="property.items.length === 0"
     >
-      {{ currentIndex }} / {{ property.items.length }}
+      <IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" />
+    </div>
+    <div v-else class="relative">
+      <Carousel
+        :autoplay="property.autoplay"
+        :autoplay-speed="property.interval * 1000"
+        :dots="property.indicator !== 'number'"
+        @change="handleIndexChange"
+        class="h-44"
+      >
+        <div v-for="(item, index) in property.items" :key="index">
+          <Image
+            class="h-full w-full object-cover"
+            :src="item.imgUrl"
+            :preview="false"
+          />
+        </div>
+      </Carousel>
+      <div
+        v-if="property.indicator === 'number'"
+        class="absolute bottom-2.5 right-2.5 rounded-xl bg-black px-2 py-1 text-xs text-white opacity-40"
+      >
+        {{ currentIndex }} / {{ property.items.length }}
+      </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue

@@ -5,7 +5,6 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 import {
-  Card,
   Form,
   FormItem,
   Radio,
@@ -33,17 +32,18 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <Form label-width="80px" :model="formData">
-      <Card header="样式设置" class="property-group" shadow="never">
+      <p class="text-base font-bold">样式设置：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <FormItem label="样式" prop="type">
           <RadioGroup v-model="formData.type">
             <Tooltip class="item" content="默认" placement="bottom">
               <RadioButton value="default">
-                <IconifyIcon icon="system-uicons:carousel" />
+                <IconifyIcon icon="system-uicons:carousel" class="size-6" />
               </RadioButton>
             </Tooltip>
             <Tooltip class="item" content="卡片" placement="bottom">
               <RadioButton value="card">
-                <IconifyIcon icon="ic:round-view-carousel" />
+                <IconifyIcon icon="ic:round-view-carousel" class="size-6" />
               </RadioButton>
             </Tooltip>
           </RadioGroup>
@@ -69,8 +69,9 @@ const formData = useVModel(props, 'modelValue', emit);
           />
           <p class="text-info">单位：秒</p>
         </FormItem>
-      </Card>
-      <Card header="内容设置" class="property-group" shadow="never">
+      </div>
+      <p class="text-base font-bold">内容设置：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
           <template #default="{ element }">
             <FormItem label="类型" prop="type" class="mb-2" label-width="40px">
@@ -90,7 +91,7 @@ const formData = useVModel(props, 'modelValue', emit);
                 draggable="false"
                 height="80px"
                 width="100%"
-                class="min-w-[80px]"
+                class="min-w-20"
                 :show-description="false"
               />
             </FormItem>
@@ -102,7 +103,7 @@ const formData = useVModel(props, 'modelValue', emit);
                   :show-description="false"
                   height="80px"
                   width="100%"
-                  class="min-w-[80px]"
+                  class="min-w-20"
                 />
               </FormItem>
               <FormItem label="视频" class="mb-2" label-width="40px">
@@ -111,7 +112,7 @@ const formData = useVModel(props, 'modelValue', emit);
                   :file-type="['mp4']"
                   :limit="1"
                   :file-size="100"
-                  class="min-w-[80px]"
+                  class="min-w-20"
                 />
               </FormItem>
             </template>
@@ -120,9 +121,7 @@ const formData = useVModel(props, 'modelValue', emit);
             </FormItem>
           </template>
         </Draggable>
-      </Card>
+      </div>
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue

@@ -25,5 +25,3 @@ defineProps<{ property: DividerProperty }>();
     ></div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue

@@ -61,7 +61,10 @@ const formData = useVModel(props, 'modelValue', emit);
           :title="item.text"
         >
           <RadioButton :value="item.type">
-            <IconifyIcon :icon="item.icon" />
+            <IconifyIcon
+              :icon="item.icon"
+              class="inset-0 size-6 items-center"
+            />
           </RadioButton>
         </Tooltip>
       </RadioGroup>
@@ -74,12 +77,18 @@ const formData = useVModel(props, 'modelValue', emit);
         <RadioGroup v-model:value="formData!.paddingType">
           <Tooltip title="无边距" placement="top">
             <RadioButton value="none">
-              <IconifyIcon icon="tabler:box-padding" />
+              <IconifyIcon
+                icon="tabler:box-padding"
+                class="inset-0 size-6 items-center"
+              />
             </RadioButton>
           </Tooltip>
           <Tooltip title="左右留边" placement="top">
             <RadioButton value="horizontal">
-              <IconifyIcon icon="vaadin:padding" />
+              <IconifyIcon
+                icon="vaadin:padding"
+                class="inset-0 size-6 items-center"
+              />
             </RadioButton>
           </Tooltip>
         </RadioGroup>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue

@@ -33,7 +33,7 @@ const handleActive = (index: number) => {
     <Image :src="item.imgUrl" fit="contain" class="h-full w-full">
       <template #error>
         <div class="flex h-full w-full items-center justify-center">
-          <IconifyIcon icon="ep:picture" />
+          <IconifyIcon icon="lucide:image" />
         </div>
       </template>
     </Image>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx

@@ -23,7 +23,7 @@ export const CouponDiscountDesc = defineComponent({
     const discountDesc =
       coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
         ? `减${floatToFixed2(coupon.discountPrice)}元`
-        : `打${coupon.discountPercent ?? 0 / 10}折`;
+        : `打${(coupon.discountPercent ?? 0) / 10}折`;
     return () => (
       <div>
         <span>{useCondition}</span>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx

@@ -17,7 +17,7 @@ export const CouponDiscount = defineComponent({
   setup(props) {
     const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
     // 折扣
-    let value = `${coupon.discountPercent ?? 0 / 10}`;
+    let value = `${(coupon.discountPercent ?? 0) / 10}`;
     let suffix = ' 折';
     // 满减
     if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue

@@ -33,13 +33,13 @@ watch(
 );
 
 // 手机宽度
-const phoneWidth = ref(375);
+const phoneWidth = ref(384);
 // 容器
 const containerRef = ref();
 // 滚动条宽度
 const scrollbarWidth = ref('100%');
 // 优惠券的宽度
-const couponWidth = ref(375);
+const couponWidth = ref(384);
 // 计算布局参数
 watch(
   () => [props.property, phoneWidth, couponList.value.length],
@@ -58,11 +58,11 @@ watch(
 );
 onMounted(() => {
   // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
 });
 </script>
 <template>
-  <div class="z-10 min-h-[30px]" wrap-class="w-full" ref="containerRef">
+  <div class="z-10 min-h-8" wrap-class="w-full" ref="containerRef">
     <div
       class="flex flex-row text-xs"
       :style="{
@@ -155,4 +155,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue

@@ -16,7 +16,6 @@ import { floatToFixed2 } from '@vben/utils';
 import { useVModel } from '@vueuse/core';
 import {
   Button,
-  Card,
   Form,
   FormItem,
   RadioButton,
@@ -40,8 +39,6 @@ const props = defineProps<{ modelValue: CouponCardProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-const { Text: ATypographyText } = Typography;
-
 const formData = useVModel(props, 'modelValue', emit);
 
 const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 已选择的优惠券列表
@@ -84,28 +81,31 @@ watch(
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <Form :model="formData">
-      <Card title="优惠券列表" class="property-group">
+      <p class="text-base font-bold">优惠券列表：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <div
           v-for="(coupon, index) in couponList"
           :key="index"
           class="flex items-center justify-between"
         >
-          <ATypographyText ellipsis class="text-base">
-            {{ coupon.name }}
-          </ATypographyText>
-          <ATypographyText type="secondary" ellipsis>
-            <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>
-          </ATypographyText>
+          <Typography>
+            <Typography.Title :level="5">
+              {{ coupon.name }}
+            </Typography.Title>
+            <Typography.Text type="secondary">
+              <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 ?? 0) / 10 }}折 </span>
+            </Typography.Text>
+          </Typography>
         </div>
         <FormItem>
           <Button
@@ -114,29 +114,37 @@ watch(
             ghost
             class="mt-2 w-full"
           >
-            <template #icon>
-              <IconifyIcon icon="ep:plus" />
-            </template>
+            <IconifyIcon icon="lucide:plus" />
             添加
           </Button>
         </FormItem>
-      </Card>
-      <Card title="优惠券样式" class="property-group">
+      </div>
+      <p class="text-base font-bold">优惠券样式：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <FormItem label="列数" name="type">
           <RadioGroup v-model:value="formData.columns">
             <Tooltip title="一列" placement="bottom">
               <RadioButton :value="1">
-                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-one-24-filled"
+                  class="inset-0 size-6 items-center"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="二列" placement="bottom">
               <RadioButton :value="2">
-                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="三列" placement="bottom">
               <RadioButton :value="3">
-                <IconifyIcon icon="fluent:text-column-three-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-three-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
           </RadioGroup>
@@ -162,7 +170,7 @@ watch(
         <FormItem label="间隔" name="space">
           <Slider v-model:value="formData.space" :max="100" :min="0" />
         </FormItem>
-      </Card>
+      </div>
     </Form>
   </ComponentContainerProperty>
 

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue

@@ -25,7 +25,7 @@ const handleActive = (index: number) => {
 </script>
 <template>
   <div
-    class="absolute bottom-8 right-[calc(50%-375px/2+32px)] z-20 flex items-center gap-3"
+    class="absolute bottom-8 right-[calc(50%-384px/2+32px)] z-20 flex items-center gap-3"
     :class="[
       {
         'flex-row': property.direction === 'horizontal',
@@ -43,7 +43,11 @@ const handleActive = (index: number) => {
         <Image :src="item.imgUrl" fit="contain" class="h-7 w-7">
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
-              <IconifyIcon icon="ep:picture" :color="item.textColor" />
+              <IconifyIcon
+                icon="lucide:image"
+                :color="item.textColor"
+                class="inset-0 size-6 items-center"
+              />
             </div>
           </template>
         </Image>
@@ -59,7 +63,7 @@ const handleActive = (index: number) => {
     <!-- todo: @owen 使用APP主题色 -->
     <Button type="primary" size="large" circle @click="handleToggleFab">
       <IconifyIcon
-        icon="ep:plus"
+        icon="lucide:plus"
         class="fab-icon"
         :class="[{ active: expanded }]"
       />
@@ -74,9 +78,9 @@ const handleActive = (index: number) => {
 .modal-bg {
   position: absolute;
   top: 0;
-  left: calc(50% - 375px / 2);
+  left: calc(50% - 384px / 2);
   z-index: 11;
-  width: 375px;
+  width: 384px;
   height: 100%;
   background-color: rgb(0 0 0 / 40%);
 }

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue

@@ -2,14 +2,7 @@
 import type { FloatingActionButtonProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
-import {
-  Card,
-  Form,
-  FormItem,
-  Radio,
-  RadioGroup,
-  Switch,
-} from 'ant-design-vue';
+import { Form, FormItem, Radio, RadioGroup, Switch } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
@@ -30,7 +23,8 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <Form :model="formData">
-    <Card title="按钮配置" class="property-group">
+    <p class="text-base font-bold">按钮配置：</p>
+    <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
       <FormItem label="展开方向" name="direction">
         <RadioGroup v-model:value="formData.direction">
           <Radio value="vertical">垂直</Radio>
@@ -40,8 +34,9 @@ const formData = useVModel(props, 'modelValue', emit);
       <FormItem label="显示文字" name="showText">
         <Switch v-model:checked="formData.showText" />
       </FormItem>
-    </Card>
-    <Card title="按钮列表" class="property-group">
+    </div>
+    <p class="text-base font-bold">按钮列表：</p>
+    <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
       <Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
         <template #default="{ element, index }">
           <FormItem label="图标" :name="`list[${index}].imgUrl`">
@@ -63,6 +58,6 @@ const formData = useVModel(props, 'modelValue', emit);
           </FormItem>
         </template>
       </Draggable>
-    </Card>
+    </div>
   </Form>
 </template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue

@@ -200,10 +200,10 @@ const handleAppLinkChange = (appLink: AppLink) => {
           height: `${item.height}px`,
           top: `${item.top}px`,
           left: `${item.left}px`,
-          color: 'var(--ant-color-primary)',
+          color: 'hsl(var(--primary))',
           background:
-            'color-mix(in srgb, var(--ant-color-primary) 30%, transparent)',
-          borderColor: 'var(--ant-color-primary)',
+            'color-mix(in srgb, hsl(var(--primary)) 30%, transparent)',
+          borderColor: 'hsl(var(--primary))',
         }"
         @mousedown="handleMove(item, $event)"
         @dblclick="handleShowAppLinkDialog(item)"
@@ -212,10 +212,9 @@ const handleAppLinkChange = (appLink: AppLink) => {
           {{ item.name || '双击选择链接' }}
         </span>
         <IconifyIcon
-          icon="ep:close"
-          class="absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
-          :style="{ backgroundColor: 'var(--ant-color-primary)' }"
-          :size="14"
+          icon="lucide:x"
+          class="absolute inset-0 right-0 top-0 hidden size-6 cursor-pointer items-center rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
+          :style="{ backgroundColor: 'hsl(var(--primary))' }"
           @click="handleRemove(item)"
         />
 
@@ -232,7 +231,7 @@ const handleAppLinkChange = (appLink: AppLink) => {
     <template #prepend-footer>
       <Button @click="handleAdd" type="primary" ghost>
         <template #icon>
-          <IconifyIcon icon="ep:plus" />
+          <IconifyIcon icon="lucide:plus" />
         </template>
         添加热区
       </Button>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue

@@ -16,7 +16,7 @@ const props = defineProps<{ property: HotZoneProperty }>();
     <div
       v-for="(item, index) in props.property.list"
       :key="index"
-      class="hot-zone"
+      class="bg-primary-700 absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
       :style="{
         width: `${item.width}px`,
         height: `${item.height}px`,
@@ -24,23 +24,9 @@ const props = defineProps<{ property: HotZoneProperty }>();
         left: `${item.left}px`,
       }"
     >
-      {{ item.name }}
+      <p class="text-primary">
+        {{ item.name }}
+      </p>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  color: var(--el-color-primary);
-  cursor: move;
-  background: var(--el-color-primary-light-7);
-  border: 1px solid var(--el-color-primary);
-  opacity: 0.8;
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue

@@ -4,7 +4,7 @@ import type { HotZoneProperty } from './config';
 import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-import { Button, Form, FormItem, Typography } from 'ant-design-vue';
+import { Button, Form, FormItem } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
 
@@ -40,19 +40,14 @@ const handleOpenEditDialog = () => {
           v-model="formData.imgUrl"
           height="50px"
           width="auto"
-          class="min-w-[80px]"
+          class="min-w-20"
           :show-description="false"
-        >
-          <template #tip>
-            <Typography.Text type="secondary" class="text-xs">
-              推荐宽度 750
-            </Typography.Text>
-          </template>
-        </UploadImg>
+        />
       </FormItem>
+      <p class="text-center text-sm text-gray-500">推荐宽度 750</p>
     </Form>
 
-    <Button type="primary" class="w-full" @click="handleOpenEditDialog">
+    <Button type="primary" class="mt-4 w-full" @click="handleOpenEditDialog">
       设置热区
     </Button>
   </ComponentContainerProperty>
@@ -71,10 +66,10 @@ const handleOpenEditDialog = () => {
   align-items: center;
   justify-content: center;
   font-size: 12px;
-  color: #fff;
+  color: hsl(var(--text-color));
   cursor: move;
-  background: #409effbf;
-  border: 1px solid var(--el-color-primary);
+  background: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
+  border: 1px solid hsl(var(--primary));
 
   /* 控制点 */
   .ctrl-dot {

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts

@@ -11,7 +11,7 @@ export interface ImageBarProperty {
 export const component = {
   id: 'ImageBar',
   name: '图片展示',
-  icon: 'ep:picture',
+  icon: 'lucide:image',
   property: {
     imgUrl: '',
     url: '',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue

@@ -3,6 +3,8 @@ import type { ImageBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Image } from 'ant-design-vue';
+
 /** 图片展示 */
 defineOptions({ name: 'ImageBar' });
 
@@ -11,24 +13,15 @@ defineProps<{ property: ImageBarProperty }>();
 <template>
   <!-- 无图片 -->
   <div
-    class="flex h-12 items-center justify-center bg-gray-300"
+    class="bg-card flex h-12 items-center justify-center"
     v-if="!property.imgUrl"
   >
-    <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
+    <IconifyIcon icon="lucide:image" class="text-3xl text-gray-600" />
   </div>
   <Image
-    class="min-h-8 w-full"
+    class="block h-full min-h-8 w-full"
     v-else
     :src="property.imgUrl"
     :preview="false"
   />
 </template>
-
-<style scoped lang="scss">
-/* 图片 */
-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue

@@ -30,11 +30,9 @@ const formData = useVModel(props, 'modelValue', emit);
           draggable="false"
           height="80px"
           width="100%"
-          class="min-w-[80px]"
+          class="min-w-20"
           :show-description="false"
-        >
-          <template #tip> 建议宽度750 </template>
-        </UploadImg>
+        />
       </FormItem>
       <FormItem label="链接" prop="url">
         <AppLinkInput v-model="formData.url" />
@@ -42,5 +40,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue

@@ -5,6 +5,8 @@ import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Image } from 'ant-design-vue';
+
 /** 广告魔方 */
 defineOptions({ name: 'MagicCube' });
 const props = defineProps<{ property: MagicCubeProperty }>();
@@ -78,5 +80,3 @@ const rowCount = computed(() => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue

@@ -4,7 +4,7 @@ import type { MagicCubeProperty } from './config';
 import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-import { Form, FormItem, Slider, Typography } from 'ant-design-vue';
+import { Form, FormItem, Slider } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
@@ -21,8 +21,6 @@ const props = defineProps<{ modelValue: MagicCubeProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-const { Text: ATypographyText } = Typography;
-
 const formData = useVModel(props, 'modelValue', emit);
 
 const selectedHotAreaIndex = ref(-1); // 选中的热区
@@ -36,10 +34,7 @@ const handleHotAreaSelected = (_: any, index: number) => {
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <Form :model="formData" class="mt-2">
-      <ATypographyText tag="p"> 魔方设置 </ATypographyText>
-      <ATypographyText type="secondary" class="text-sm">
-        每格尺寸187 * 187
-      </ATypographyText>
+      <p class="text-base font-bold">魔方设置：</p>
       <MagicCubeEditor
         class="my-4"
         v-model="formData.list"

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { MenuGridProperty } from './config';
 
+import { Image } from 'ant-design-vue';
+
 /** 宫格导航 */
 defineOptions({ name: 'MenuGrid' });
 defineProps<{ property: MenuGridProperty }>();
@@ -11,13 +13,13 @@ defineProps<{ property: MenuGridProperty }>();
     <div
       v-for="(item, index) in property.list"
       :key="index"
-      class="relative flex flex-col items-center pb-3.5 pt-5"
+      class="relative flex flex-col items-center pb-4 pt-4"
       :style="{ width: `${100 * (1 / property.column)}%` }"
     >
       <!-- 右上角角标 -->
       <span
         v-if="item.badge?.show"
-        class="absolute left-1/2 top-2.5 z-10 h-5 rounded-full px-1.5 text-center text-xs leading-5"
+        class="absolute left-1/2 top-2 z-10 h-4 rounded-full px-2 text-center text-xs leading-5"
         :style="{
           color: item.badge.textColor,
           backgroundColor: item.badge.bgColor,
@@ -27,7 +29,7 @@ defineProps<{ property: MenuGridProperty }>();
       </span>
       <Image
         v-if="item.iconUrl"
-        class="h-7 w-7"
+        :width="32"
         :src="item.iconUrl"
         :preview="false"
       />
@@ -46,5 +48,3 @@ defineProps<{ property: MenuGridProperty }>();
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue

@@ -2,17 +2,14 @@
 import type { MenuGridProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
-import {
-  Card,
-  Form,
-  FormItem,
-  Radio,
-  RadioGroup,
-  Switch,
-} from 'ant-design-vue';
+import { Form, FormItem, Radio, RadioGroup, Switch } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
-import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+} from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
@@ -36,7 +33,8 @@ const formData = useVModel(props, 'modelValue', emit);
         </RadioGroup>
       </FormItem>
 
-      <Card header="菜单设置" class="property-group" shadow="never">
+      <p class="text-base font-bold">菜单设置</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Draggable
           v-model="formData.list"
           :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
@@ -53,13 +51,13 @@ const formData = useVModel(props, 'modelValue', emit);
               </UploadImg>
             </FormItem>
             <FormItem label="标题" prop="title">
-              <InputWithColor
+              <ColorInput
                 v-model="element.title"
                 v-model:color="element.titleColor"
               />
             </FormItem>
             <FormItem label="副标题" prop="subtitle">
-              <InputWithColor
+              <ColorInput
                 v-model="element.subtitle"
                 v-model:color="element.subtitleColor"
               />
@@ -72,7 +70,7 @@ const formData = useVModel(props, 'modelValue', emit);
             </FormItem>
             <template v-if="element.badge.show">
               <FormItem label="角标内容" prop="badge.text">
-                <InputWithColor
+                <ColorInput
                   v-model="element.badge.text"
                   v-model:color="element.badge.textColor"
                 />
@@ -83,9 +81,7 @@ const formData = useVModel(props, 'modelValue', emit);
             </template>
           </template>
         </Draggable>
-      </Card>
+      </div>
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue

@@ -11,11 +11,11 @@ defineProps<{ property: MenuListProperty }>();
 </script>
 
 <template>
-  <div class="flex min-h-[42px] flex-col">
+  <div class="flex min-h-10 flex-col">
     <div
       v-for="(item, index) in property.list"
       :key="index"
-      class="item flex h-[42px] flex-row items-center justify-between gap-1 px-3"
+      class="flex h-10 flex-row items-center justify-between gap-1 border-t border-gray-200 px-3 first:border-t-0"
     >
       <div class="flex flex-1 flex-row items-center gap-2">
         <Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
@@ -27,14 +27,8 @@ defineProps<{ property: MenuListProperty }>();
         <span class="text-xs" :style="{ color: item.subtitleColor }">
           {{ item.subtitle }}
         </span>
-        <IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
+        <IconifyIcon icon="lucide:arrow-right" class="size-4" />
       </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.item + .item {
-  border-top: 1px solid #eee;
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue

@@ -2,7 +2,7 @@
 import type { MenuListProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
-import { Form, Typography } from 'ant-design-vue';
+import { Form, FormItem } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
@@ -21,17 +21,12 @@ const props = defineProps<{ modelValue: MenuListProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-const { Text: ATypographyText } = Typography;
-
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ATypographyText tag="p"> 菜单设置 </ATypographyText>
-    <ATypographyText type="secondary" class="text-sm">
-      拖动左侧的小圆点可以调整顺序
-    </ATypographyText>
+    <p class="text-base font-bold">菜单设置</p>
     <Form :model="formData" class="mt-2">
       <Draggable
         v-model="formData.list"
@@ -44,9 +39,8 @@ const formData = useVModel(props, 'modelValue', emit);
               height="80px"
               width="80px"
               :show-description="false"
-            >
-              <template #tip> 建议尺寸：44 * 44 </template>
-            </UploadImg>
+            />
+            <p class="text-sm text-gray-500">建议尺寸：44 * 44</p>
           </FormItem>
           <FormItem label="标题" name="title">
             <InputWithColor

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue

@@ -3,6 +3,8 @@ import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
 
 import { ref, watch } from 'vue';
 
+import { Image } from 'ant-design-vue';
+
 /** 菜单导航 */
 defineOptions({ name: 'MenuSwiper' });
 const props = defineProps<{ property: MenuSwiperProperty }>();
@@ -122,14 +124,14 @@ watch(
     button {
       width: 6px;
       height: 6px;
-      background: #ff6000;
+      background: hsl(var(--red));
       border-radius: 6px;
     }
   }
 
   .ant-carousel-dot-active button {
     width: 12px;
-    background: #ff6000;
+    background: hsl(var(--red));
   }
 }
 </style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue

@@ -78,12 +78,7 @@ const handleHotAreaSelected = (
       class="m-b-16px"
       @hot-area-selected="handleHotAreaSelected"
     />
-    <Image
-      v-if="isMp"
-      alt=""
-      style="width: 76px; height: 30px"
-      :src="appNavBarMp"
-    />
+    <Image v-if="isMp" alt="" class="w-19 h-8" :src="appNavBarMp" />
   </div>
   <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
     <template v-if="selectedHotAreaIndex === Number(cellIndex)">
@@ -112,12 +107,10 @@ const handleHotAreaSelected = (
           <UploadImg
             v-model="cell.imgUrl"
             :limit="1"
-            height="56px"
-            width="56px"
             :show-description="false"
-          >
-            <template #tip>建议尺寸 56*56</template>
-          </UploadImg>
+            class="size-14"
+          />
+          <span class="text-xs text-gray-500">建议尺寸 56*56</span>
         </FormItem>
         <FormItem label="链接">
           <AppLinkInput v-model="cell.url" />
@@ -135,5 +128,3 @@ const handleHotAreaSelected = (
     </template>
   </template>
 </template>
-
-<style lang="scss" scoped></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue

@@ -35,8 +35,8 @@ const cellList = computed(() =>
 // 单元格宽度
 const cellWidth = computed(() => {
   return props.property._local?.previewMp
-    ? (375 - 80 - 86) / 6
-    : (375 - 90) / 8;
+    ? (384 - 80 - 86) / 6
+    : (384 - 90) / 8;
 });
 // 获得单元格样式
 const getCellStyle = (cell: NavigationBarCellProperty) => {
@@ -78,7 +78,7 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
       v-if="property._local?.previewMp"
       :src="appNavbarMp"
       alt=""
-      style="width: 86px; height: 30px"
+      class="w-22 h-8"
     />
   </div>
 </template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue

@@ -130,5 +130,3 @@ if (!formData.value._local) {
     </Card>
   </Form>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts

@@ -19,7 +19,7 @@ export interface NoticeContentProperty {
 export const component = {
   id: 'NoticeBar',
   name: '公告栏',
-  icon: 'ep:bell',
+  icon: 'lucide:bell',
   property: {
     iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
     contents: [

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue

@@ -33,7 +33,7 @@ setInterval(() => {
     <div class="h-6 flex-1 truncate pr-2 leading-6">
       {{ property.contents?.[activeIndex]?.text }}
     </div>
-    <IconifyIcon icon="ep:arrow-right" />
+    <IconifyIcon icon="lucide:arrow-right" />
   </div>
 </template>
 

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts

@@ -11,7 +11,7 @@ export interface PageConfigProperty {
 export const component = {
   id: 'PageConfig',
   name: '页面设置',
-  icon: 'ep:document',
+  icon: 'lucide:file-text',
   property: {
     description: '',
     backgroundColor: '#f5f5f5',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts

@@ -39,7 +39,7 @@ export interface ProductCardFieldProperty {
 export const component = {
   id: 'ProductCard',
   name: '商品卡片',
-  icon: 'fluent:text-column-two-left-24-filled',
+  icon: 'lucide:grid-3x3',
   property: {
     layoutType: 'oneColBigImg',
     fields: {

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue

@@ -61,7 +61,7 @@ function calculateWidth() {
     ref="containerRef"
   >
     <div
-      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
       :style="{
         ...calculateSpace(index),
         ...calculateWidth(),
@@ -78,30 +78,26 @@ function calculateWidth() {
         v-if="property.badge.show && property.badge.imgUrl"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image
-          fit="cover"
-          :src="property.badge.imgUrl"
-          class="h-[26px] w-[38px]"
-        />
+        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-[140px]"
+        class="h-36"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[140px]': property.layoutType === 'oneColSmallImg',
+            'w-36': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
         <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
       </div>
       <div
-        class="box-border flex flex-col gap-[8px] p-[8px]"
+        class="box-border flex flex-col gap-2 p-2"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100%-140px-16px)]':
+            'w-[calc(100vh-140px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -109,7 +105,7 @@ function calculateWidth() {
         <!-- 商品名称 -->
         <div
           v-if="property.fields.name.show"
-          class="text-[14px]"
+          class="text-sm"
           :class="[
             {
               truncate: property.layoutType !== 'oneColSmallImg',
@@ -124,7 +120,7 @@ function calculateWidth() {
         <!-- 商品简介 -->
         <div
           v-if="property.fields.introduction.show"
-          class="truncate text-[12px]"
+          class="truncate text-xs"
           :style="{ color: property.fields.introduction.color }"
         >
           {{ spu.introduction }}
@@ -133,7 +129,7 @@ function calculateWidth() {
           <!-- 价格 -->
           <span
             v-if="property.fields.price.show"
-            class="text-[16px]"
+            class="text-base"
             :style="{ color: property.fields.price.color }"
           >
             ￥{{ fenToYuan(spu.price as any) }}
@@ -141,12 +137,12 @@ function calculateWidth() {
           <!-- 市场价 -->
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
-            class="ml-[4px] text-[10px] line-through"
+            class="ml-1 text-xs line-through"
             :style="{ color: property.fields.marketPrice.color }"
             >￥{{ fenToYuan(spu.marketPrice) }}
           </span>
         </div>
-        <div class="text-[12px]">
+        <div class="text-xs">
           <!-- 销量 -->
           <span
             v-if="property.fields.salesCount.show"
@@ -164,11 +160,11 @@ function calculateWidth() {
         </div>
       </div>
       <!-- 购买按钮 -->
-      <div class="absolute bottom-[8px] right-[8px]">
+      <div class="absolute bottom-2 right-2">
         <!-- 文字按钮 -->
         <span
           v-if="property.btnBuy.type === 'text'"
-          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+          class="rounded-full px-3 py-1 text-sm text-white"
           :style="{
             background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
           }"
@@ -178,7 +174,7 @@ function calculateWidth() {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="h-[28px] w-[28px] rounded-full"
+          class="size-7 rounded-full"
           fit="cover"
           :src="property.btnBuy.imgUrl"
         />
@@ -186,5 +182,3 @@ function calculateWidth() {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue

@@ -44,17 +44,26 @@ const formData = useVModel(props, 'modelValue', emit);
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="单列大图" placement="bottom">
               <RadioButton value="oneColBigImg">
-                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-one-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="单列小图" placement="bottom">
               <RadioButton value="oneColSmallImg">
-                <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-left-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="双列" placement="bottom">
               <RadioButton value="twoCol">
-                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
           </RadioGroup>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue

@@ -7,6 +7,8 @@ import { onMounted, ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
+import { Image } from 'ant-design-vue';
+
 import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品栏 */
@@ -26,7 +28,7 @@ watch(
   },
 );
 // 手机宽度
-const phoneWidth = ref(375);
+const phoneWidth = ref(384);
 // 容器
 const containerRef = ref();
 // 商品的列数
@@ -69,7 +71,7 @@ watch(
 );
 onMounted(() => {
   // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
 });
 </script>
 <template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue

@@ -46,17 +46,23 @@ const formData = useVModel(props, 'modelValue', emit);
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="双列" placement="bottom">
               <RadioButton value="twoCol">
-                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="三列" placement="bottom">
               <RadioButton value="threeCol">
-                <IconifyIcon icon="fluent:text-column-three-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-three-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="水平滑动" placement="bottom">
               <RadioButton value="horizSwiper">
-                <IconifyIcon icon="system-uicons:carousel" />
+                <IconifyIcon icon="system-uicons:carousel" class="size-6" />
               </RadioButton>
             </Tooltip>
           </RadioGroup>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue

@@ -27,7 +27,5 @@ watch(
 );
 </script>
 <template>
-  <div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
+  <div class="min-h-8" v-dompurify-html="article?.content"></div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue

@@ -64,5 +64,3 @@ onMounted(() => {
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue

@@ -97,11 +97,11 @@ const calculateWidth = () => {
 </script>
 <template>
   <div
-    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    class="box-content flex min-h-8 w-full flex-row flex-wrap"
     ref="containerRef"
   >
     <div
-      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
       :style="{
         ...calculateSpace(index),
         ...calculateWidth(),
@@ -118,19 +118,15 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image
-          fit="cover"
-          :src="property.badge.imgUrl"
-          class="h-[26px] w-[38px]"
-        />
+        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-[140px]"
+        class="h-36"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[140px]': property.layoutType === 'oneColSmallImg',
+            'w-36': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
@@ -141,7 +137,7 @@ const calculateWidth = () => {
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100%-140px-16px)]':
+            'w-[calc(100vw-36px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -149,7 +145,7 @@ const calculateWidth = () => {
         <!-- 商品名称 -->
         <div
           v-if="property.fields.name.show"
-          class="text-[14px]"
+          class="text-sm"
           :class="[
             {
               truncate: property.layoutType !== 'oneColSmallImg',
@@ -164,7 +160,7 @@ const calculateWidth = () => {
         <!-- 商品简介 -->
         <div
           v-if="property.fields.introduction.show"
-          class="truncate text-[12px]"
+          class="truncate text-xs"
           :style="{ color: property.fields.introduction.color }"
         >
           {{ spu.introduction }}
@@ -173,7 +169,7 @@ const calculateWidth = () => {
           <!-- 价格 -->
           <span
             v-if="property.fields.price.show"
-            class="text-[16px]"
+            class="text-base"
             :style="{ color: property.fields.price.color }"
           >
             ￥{{ fenToYuan(spu.price || Infinity) }}
@@ -181,13 +177,13 @@ const calculateWidth = () => {
           <!-- 市场价 -->
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
-            class="ml-[4px] text-[10px] line-through"
+            class="ml-1 text-xs line-through"
             :style="{ color: property.fields.marketPrice.color }"
           >
             ￥{{ fenToYuan(spu.marketPrice) }}
           </span>
         </div>
-        <div class="text-[12px]">
+        <div class="text-xs">
           <!-- 销量 -->
           <span
             v-if="property.fields.salesCount.show"
@@ -205,11 +201,11 @@ const calculateWidth = () => {
         </div>
       </div>
       <!-- 购买按钮 -->
-      <div class="absolute bottom-[8px] right-[8px]">
+      <div class="absolute bottom-2 right-2">
         <!-- 文字按钮 -->
         <span
           v-if="property.btnBuy.type === 'text'"
-          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+          class="rounded-full px-3 py-1 text-sm text-white"
           :style="{
             background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
           }"
@@ -219,7 +215,7 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="h-[28px] w-[28px] rounded-full"
+          class="size-7 rounded-full"
           fit="cover"
           :src="property.btnBuy.imgUrl"
         />
@@ -227,5 +223,3 @@ const calculateWidth = () => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue

@@ -60,17 +60,26 @@ onMounted(async () => {
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="单列大图" placement="bottom">
               <RadioButton value="oneColBigImg">
-                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-one-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="单列小图" placement="bottom">
               <RadioButton value="oneColSmallImg">
-                <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-left-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="双列" placement="bottom">
               <RadioButton value="twoCol">
-                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
           </RadioGroup>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue

@@ -95,7 +95,7 @@ const calculateWidth = () => {
 <template>
   <div
     ref="containerRef"
-    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    class="box-content flex min-h-9 w-full flex-row flex-wrap"
   >
     <div
       v-for="(spu, index) in spuList"
@@ -108,26 +108,22 @@ const calculateWidth = () => {
         borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
         borderBottomRightRadius: `${property.borderRadiusBottom}px`,
       }"
-      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
     >
       <!-- 角标 -->
       <div
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image
-          :src="property.badge.imgUrl"
-          class="h-[26px] w-[38px]"
-          fit="cover"
-        />
+        <Image :src="property.badge.imgUrl" class="h-6 w-10" fit="cover" />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-[140px]"
+        class="h-36"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[140px]': property.layoutType === 'oneColSmallImg',
+            'w-36': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
@@ -146,7 +142,7 @@ const calculateWidth = () => {
         <!-- 商品名称 -->
         <div
           v-if="property.fields.name.show"
-          class="text-[14px]"
+          class="text-sm"
           :class="[
             {
               truncate: property.layoutType !== 'oneColSmallImg',
@@ -162,7 +158,7 @@ const calculateWidth = () => {
         <div
           v-if="property.fields.introduction.show"
           :style="{ color: property.fields.introduction.color }"
-          class="truncate text-[12px]"
+          class="truncate text-xs"
         >
           {{ spu.introduction }}
         </div>
@@ -171,7 +167,7 @@ const calculateWidth = () => {
           <span
             v-if="property.fields.price.show"
             :style="{ color: property.fields.price.color }"
-            class="text-[16px]"
+            class="text-base"
           >
             {{ spu.point }}积分
             {{
@@ -184,12 +180,12 @@ const calculateWidth = () => {
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
             :style="{ color: property.fields.marketPrice.color }"
-            class="ml-[4px] text-[10px] line-through"
+            class="ml-1 text-xs line-through"
           >
             ￥{{ fenToYuan(spu.marketPrice) }}
           </span>
         </div>
-        <div class="text-[12px]">
+        <div class="text-xs">
           <!-- 销量 -->
           <span
             v-if="property.fields.salesCount.show"
@@ -207,14 +203,14 @@ const calculateWidth = () => {
         </div>
       </div>
       <!-- 购买按钮 -->
-      <div class="absolute bottom-[8px] right-[8px]">
+      <div class="absolute bottom-2 right-2">
         <!-- 文字按钮 -->
         <span
           v-if="property.btnBuy.type === 'text'"
           :style="{
             background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
           }"
-          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+          class="rounded-full px-3 py-1 text-sm text-white"
         >
           {{ property.btnBuy.text }}
         </span>
@@ -222,12 +218,10 @@ const calculateWidth = () => {
         <Image
           v-else
           :src="property.btnBuy.imgUrl"
-          class="h-[28px] w-[28px] rounded-full"
+          class="size-7 rounded-full"
           fit="cover"
         />
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue

@@ -42,17 +42,26 @@ const formData = useVModel(props, 'modelValue', emit);
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="单列大图" placement="bottom">
               <RadioButton value="oneColBigImg">
-                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-one-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="单列小图" placement="bottom">
               <RadioButton value="oneColSmallImg">
-                <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-left-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="双列" placement="bottom">
               <RadioButton value="twoCol">
-                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
           </RadioGroup>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue

@@ -95,11 +95,11 @@ const calculateWidth = () => {
 </script>
 <template>
   <div
-    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    class="box-content flex min-h-9 w-full flex-row flex-wrap"
     ref="containerRef"
   >
     <div
-      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
       :style="{
         ...calculateSpace(index),
         ...calculateWidth(),
@@ -116,19 +116,15 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image
-          fit="cover"
-          :src="property.badge.imgUrl"
-          class="h-[26px] w-[38px]"
-        />
+        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-[140px]"
+        class="h-36"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[140px]': property.layoutType === 'oneColSmallImg',
+            'w-36': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
@@ -139,7 +135,7 @@ const calculateWidth = () => {
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100%-140px-16px)]':
+            'w-[calc(100vw-140px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -179,7 +175,7 @@ const calculateWidth = () => {
           <!-- 市场价 -->
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
-            class="ml-1 text-[10px] line-through"
+            class="ml-1 text-xs line-through"
             :style="{ color: property.fields.marketPrice.color }"
           >
             ￥{{ fenToYuan(spu.marketPrice) }}
@@ -217,7 +213,7 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="h-7 w-7 rounded-full"
+          class="size-7 rounded-full"
           fit="cover"
           :src="property.btnBuy.imgUrl"
         />
@@ -225,5 +221,3 @@ const calculateWidth = () => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue

@@ -45,17 +45,26 @@ const formData = useVModel(props, 'modelValue', emit);
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="单列大图" placement="bottom">
               <RadioButton value="oneColBigImg">
-                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-one-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="单列小图" placement="bottom">
               <RadioButton value="oneColSmallImg">
-                <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-left-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="双列" placement="bottom">
               <RadioButton value="twoCol">
-                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
           </RadioGroup>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts

@@ -20,7 +20,7 @@ export type PlaceholderPosition = 'center' | 'left';
 export const component = {
   id: 'SearchBar',
   name: '搜索框',
-  icon: 'ep:search',
+  icon: 'lucide:search',
   property: {
     height: 28,
     showScan: false,

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue

@@ -30,19 +30,16 @@ defineProps<{ property: SearchProperty }>();
           justifyContent: property.placeholderPosition,
         }"
       >
-        <IconifyIcon icon="ep:search" />
+        <IconifyIcon icon="lucide:search" />
         <span>{{ property.placeholder || '搜索商品' }}</span>
       </div>
       <div class="right">
         <!-- 搜索热词 -->
-        <span v-for="(keyword, index) in property.hotKeywords" :key="index">{{
-          keyword
-        }}</span>
+        <span v-for="(keyword, index) in property.hotKeywords" :key="index">
+          {{ keyword }}
+        </span>
         <!-- 扫一扫 -->
-        <IconifyIcon
-          icon="ant-design:scan-outlined"
-          v-show="property.showScan"
-        />
+        <IconifyIcon icon="lucide:scan-barcode" v-show="property.showScan" />
       </div>
     </div>
   </div>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue

@@ -70,12 +70,12 @@ watch(
           <RadioGroup v-model:value="formData!.borderRadius">
             <Tooltip title="方形" placement="top">
               <RadioButton :value="0">
-                <IconifyIcon icon="tabler:input-search" />
+                <IconifyIcon icon="tabler:input-search" class="size-6" />
               </RadioButton>
             </Tooltip>
             <Tooltip title="圆形" placement="top">
               <RadioButton :value="10">
-                <IconifyIcon icon="iconoir:input-search" />
+                <IconifyIcon icon="iconoir:input-search" class="size-6" />
               </RadioButton>
             </Tooltip>
           </RadioGroup>
@@ -87,12 +87,18 @@ watch(
           <RadioGroup v-model:value="formData!.placeholderPosition">
             <Tooltip title="居左" placement="top">
               <RadioButton value="left">
-                <IconifyIcon icon="ant-design:align-left-outlined" />
+                <IconifyIcon
+                  icon="ant-design:align-left-outlined"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="居中" placement="top">
               <RadioButton value="center">
-                <IconifyIcon icon="ant-design:align-center-outlined" />
+                <IconifyIcon
+                  icon="ant-design:align-center-outlined"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
           </RadioGroup>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue

@@ -31,7 +31,7 @@ defineProps<{ property: TabBarProperty }>();
         <Image :src="index === 0 ? item.activeIconUrl : item.iconUrl">
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
-              <IconifyIcon icon="ep:picture" />
+              <IconifyIcon icon="lucide:image" />
             </div>
           </template>
         </Image>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue

@@ -60,7 +60,10 @@ defineProps<{ property: TitleBarProperty }>();
       <span v-if="property.more.type !== 'icon'">
         {{ property.more.text }}
       </span>
-      <IconifyIcon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
+      <IconifyIcon
+        icon="lucide:arrow-right"
+        v-if="property.more.type !== 'text'"
+      />
     </div>
   </div>
 </template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue

@@ -54,12 +54,18 @@ const rules = {}; // 表单校验
           <RadioGroup v-model:value="formData!.textAlign">
             <Tooltip title="居左" placement="top">
               <RadioButton value="left">
-                <IconifyIcon icon="ant-design:align-left-outlined" />
+                <IconifyIcon
+                  icon="ant-design:align-left-outlined"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="居中" placement="top">
               <RadioButton value="center">
-                <IconifyIcon icon="ant-design:align-center-outlined" />
+                <IconifyIcon
+                  icon="ant-design:align-center-outlined"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
           </RadioGroup>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue

@@ -3,6 +3,8 @@ import type { UserCardProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Avatar } from 'ant-design-vue';
+
 /** 用户卡片 */
 defineOptions({ name: 'UserCard' });
 // 定义属性
@@ -10,24 +12,20 @@ defineProps<{ property: UserCardProperty }>();
 </script>
 <template>
   <div class="flex flex-col">
-    <div class="flex items-center justify-between px-[18px] py-[24px]">
-      <div class="flex flex-1 items-center gap-[16px]">
-        <Avatar :size="60">
-          <IconifyIcon icon="ep:avatar" :size="60" />
+    <div class="flex items-center justify-between px-4 py-6">
+      <div class="flex flex-1 items-center gap-4">
+        <Avatar class="size-14">
+          <IconifyIcon icon="lucide:user" class="size-14" />
         </Avatar>
-        <span class="text-[18px] font-bold">芋道源码</span>
+        <span class="text-lg font-bold">芋道源码</span>
       </div>
-      <IconifyIcon icon="tdesign:qrcode" :size="20" />
+      <IconifyIcon icon="lucide:qr-code" class="size-5" />
     </div>
-    <div
-      class="flex items-center justify-between bg-white px-[20px] py-[8px] text-[12px]"
-    >
-      <span class="text-[#ff690d]">点击绑定手机号</span>
-      <span class="rounded-[26px] bg-[#ff6100] px-[8px] py-[5px] text-white">
+    <div class="bg-card flex items-center justify-between px-5 py-2 text-xs">
+      <span class="text-orange-500">点击绑定手机号</span>
+      <span class="rounded-lg bg-orange-500 px-2 py-1 text-white">
         去绑定
       </span>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue

@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style" />
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts

@@ -10,7 +10,7 @@ export interface UserCouponProperty {
 export const component = {
   id: 'UserCoupon',
   name: '用户卡券',
-  icon: 'ep:ticket',
+  icon: 'lucide:ticket',
   property: {
     style: {
       bgType: 'color',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue

@@ -13,5 +13,3 @@ defineProps<{ property: UserCouponProperty }>();
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
   />
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue

@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style" />
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts

@@ -9,7 +9,7 @@ export interface UserOrderProperty {
 export const component = {
   id: 'UserOrder',
   name: '用户订单',
-  icon: 'ep:list',
+  icon: 'lucide:clipboard-list',
   property: {
     style: {
       bgType: 'color',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue

@@ -13,5 +13,3 @@ defineProps<{ property: UserOrderProperty }>();
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
   />
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue

@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style" />
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts

@@ -9,7 +9,7 @@ export interface UserWalletProperty {
 export const component = {
   id: 'UserWallet',
   name: '用户资产',
-  icon: 'ep:wallet-filled',
+  icon: 'lucide:wallet',
   property: {
     style: {
       bgType: 'color',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue

@@ -13,5 +13,3 @@ defineProps<{ property: UserWalletProperty }>();
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
   />
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue

@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style" />
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts

@@ -17,7 +17,7 @@ export interface VideoPlayerStyle extends ComponentStyle {
 export const component = {
   id: 'VideoPlayer',
   name: '视频播放',
-  icon: 'ep:video-play',
+  icon: 'lucide:video',
   property: {
     videoUrl: '',
     posterUrl: '',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue

@@ -10,10 +10,14 @@ defineProps<{ property: VideoPlayerProperty }>();
 </script>
 <template>
   <div class="w-full" :style="{ height: `${property.style.height}px` }">
-    <Image class="w-full" :src="property.posterUrl" v-if="property.posterUrl" />
+    <Image
+      class="h-full w-full"
+      :src="property.posterUrl"
+      v-if="property.posterUrl"
+    />
     <video
       v-else
-      class="w-full"
+      class="h-full w-full"
       :src="property.videoUrl"
       :poster="property.posterUrl"
       :autoplay="property.autoplay"
@@ -21,12 +25,3 @@ defineProps<{ property: VideoPlayerProperty }>();
     ></video>
   </div>
 </template>
-
-<style scoped lang="scss">
-/* 图片 */
-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue

@@ -56,5 +56,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue

@@ -3,11 +3,11 @@ import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
 
 import { onMounted, ref, unref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep, isEmpty, isString } from '@vben/utils';
 
-import { Button, Card, QRCode, Tag, Tooltip } from 'ant-design-vue';
+import { Button, Card, Col, QRCode, Row, Tag, Tooltip } from 'ant-design-vue';
 import draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
@@ -168,7 +168,8 @@ function handleComponentSelected(
   component: DiyComponent<any>,
   index: number = -1,
 ) {
-  selectedComponent.value = component;
+  // 使用深拷贝避免响应式追踪循环警告
+  selectedComponent.value = cloneDeep(component);
   selectedComponentIndex.value = index;
 }
 
@@ -287,54 +288,62 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div>
-    <div class="editor flex h-full flex-col">
-      <!-- 顶部：工具栏 -->
-      <div class="editor-header flex items-center">
-        <!-- 左侧操作区 -->
+  <Page auto-content-height>
+    <!-- 顶部：工具栏 -->
+    <Row class="bg-card flex max-h-12 rounded-lg">
+      <!-- 左侧操作区 -->
+      <Col :span="8">
         <slot name="toolBarLeft"></slot>
-        <!-- 中心操作区 -->
-        <div class="header-center flex flex-1 items-center justify-center">
-          <span>{{ title }}</span>
-        </div>
-        <!-- 右侧操作区 -->
-        <div class="header-right flex">
+      </Col>
+      <!-- 中心操作区 -->
+      <Col :span="8">
+        <span class="flex h-full items-center justify-center">{{ title }}</span>
+      </Col>
+      <!-- 右侧操作区 -->
+      <Col :span="8">
+        <Button.Group
+          direction="vertical"
+          size="large"
+          class="flex justify-end"
+        >
           <Tooltip title="重置">
             <Button @click="handleReset">
-              <IconifyIcon :size="24" icon="system-uicons:reset-alt" />
+              <IconifyIcon class="size-6" icon="lucide:refresh-cw" />
             </Button>
           </Tooltip>
           <Tooltip v-if="previewUrl" title="预览">
             <Button @click="handlePreview">
-              <IconifyIcon :size="24" icon="ep:view" />
+              <IconifyIcon class="size-6" icon="lucide:eye" />
             </Button>
           </Tooltip>
           <Tooltip title="保存">
             <Button @click="handleSave">
-              <IconifyIcon :size="24" icon="ep:check" />
+              <IconifyIcon class="size-6" icon="lucide:check" />
             </Button>
           </Tooltip>
-        </div>
-      </div>
-
-      <!-- 中心区域 -->
-      <div class="editor-container h-[calc(100vh-135px)]">
-        <!-- 左侧：组件库（ComponentLibrary） -->
+        </Button.Group>
+      </Col>
+    </Row>
+    <!-- 中心区域 -->
+    <Row class="mt-4 h-[calc(80vh)]">
+      <!-- 左侧：组件库（ComponentLibrary） -->
+      <Col :span="6">
         <ComponentLibrary
           v-if="libs && libs.length > 0"
           ref="componentLibrary"
           :list="libs"
         />
-        <!-- 中心：设计区域（ComponentContainer） -->
+      </Col>
+      <!-- 中心：设计区域（ComponentContainer） -->
+      <Col :span="12">
         <div
-          class="editor-center page-prop-area relative mt-4 flex w-full flex-1 flex-col justify-center overflow-hidden"
-          :style="{ backgroundColor: 'var(--app-content-bg-color)' }"
+          class="relative flex max-h-[calc(80vh)] w-full flex-1 flex-col justify-center overflow-y-auto"
           @click="handlePageSelected"
         >
           <!-- 手机顶部 -->
-          <div class="editor-design-top mx-auto flex w-[375px] flex-col">
+          <div class="mx-auto flex w-96 flex-col">
             <!-- 手机顶部状态栏 -->
-            <img alt="" class="h-5 w-[375px] bg-white" :src="statusBarImg" />
+            <img alt="" class="bg-card h-6" :src="statusBarImg" />
             <!-- 手机顶部导航栏 -->
             <ComponentContainer
               v-if="showNavigationBar"
@@ -362,18 +371,20 @@ onMounted(() => {
           </div>
           <!-- 手机页面编辑区域 -->
           <div
-            class="editor-design-center page-prop-area h-full w-full overflow-y-auto"
+            class="min-h-full w-full"
             :style="{
-              backgroundColor: pageConfigComponent.property.backgroundColor,
+              // backgroundColor: pageConfigComponent.property.backgroundColor,
               backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
             }"
           >
-            <div class="phone-container">
+            <div
+              class="bg-size-[auto_auto] relative mx-auto my-0 min-h-full w-96 items-center justify-center bg-no-repeat"
+            >
               <draggable
                 v-model="pageComponents"
                 :animation="200"
                 :force-fallback="false"
-                class="page-prop-area drag-area"
+                class="min-h-full w-full"
                 filter=".component-toolbar"
                 ghost-class="draggable-ghost"
                 group="component"
@@ -402,7 +413,7 @@ onMounted(() => {
           <!-- 手机底部导航 -->
           <div
             v-if="showTabBar"
-            class="editor-design-bottom component mx-auto w-[375px] cursor-pointer"
+            class="bottom-2 mx-auto mb-2 w-96 cursor-pointer"
           >
             <ComponentContainer
               :active="selectedComponent?.id === tabBarComponent.id"
@@ -412,9 +423,7 @@ onMounted(() => {
             />
           </div>
           <!-- 固定布局的组件 操作按钮区 -->
-          <div
-            class="fixed-component-action-group absolute right-4 top-0 flex flex-col gap-2"
-          >
+          <div class="absolute right-4 top-0 flex flex-col gap-2">
             <Tag
               v-if="showPageConfig"
               :color="
@@ -426,7 +435,10 @@ onMounted(() => {
               size="large"
               @click="handleComponentSelected(pageConfigComponent)"
             >
-              <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
+              <IconifyIcon
+                :icon="pageConfigComponent.icon"
+                class="mr-2 size-4"
+              />
               <span>{{ pageConfigComponent.name }}</span>
             </Tag>
             <template v-for="(component, index) in pageComponents" :key="index">
@@ -441,46 +453,46 @@ onMounted(() => {
                 @click="handleComponentSelected(component)"
                 @close="handleDeleteComponent(index)"
               >
-                <IconifyIcon :icon="component.icon" :size="12" />
+                <IconifyIcon :icon="component.icon" class="size-4" />
                 <span>{{ component.name }}</span>
               </Tag>
             </template>
           </div>
         </div>
-        <!-- 右侧：属性面板（ComponentContainerProperty） -->
-        <aside
-          v-if="selectedComponent?.property"
-          class="editor-right w-[350px] shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
+      </Col>
+      <!-- 右侧：属性面板（ComponentContainerProperty） -->
+      <Col :span="6" v-if="selectedComponent?.property">
+        <Card
+          class="h-[calc(80vh)] px-2 py-4"
+          :body-style="{ padding: 0 }"
+          :head-style="{ padding: 0, minHeight: '40px' }"
         >
-          <Card
-            class="h-full"
-            :body-style="{ padding: 0, height: 'calc(100% - 57px)' }"
-          >
-            <!-- 组件名称 -->
-            <template #title>
-              <div class="flex items-center gap-2">
-                <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
-                <span>{{ selectedComponent?.name }}</span>
-              </div>
-            </template>
-            <div class="property h-full overflow-y-auto p-4">
-              <component
-                :is="`${selectedComponent?.id}Property`"
-                :key="selectedComponent?.uid || selectedComponent?.id"
-                v-model="selectedComponent.property"
-              />
+          <!-- 组件名称 -->
+          <template #title>
+            <div class="flex h-8 items-center gap-1">
+              <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
+              <span>{{ selectedComponent?.name }}</span>
             </div>
-          </Card>
-        </aside>
-      </div>
-    </div>
+          </template>
+          <div
+            class="property mt-0 max-h-[calc(80vh-100px)] overflow-y-auto p-4"
+          >
+            <component
+              :is="`${selectedComponent?.id}Property`"
+              :key="selectedComponent?.uid || selectedComponent?.id"
+              v-model="selectedComponent.property"
+            />
+          </div>
+        </Card>
+      </Col>
+    </Row>
 
     <!-- 预览弹框 -->
     <PreviewModal title="预览" class="w-[700px]">
       <div class="flex justify-around">
         <iframe
           :src="previewUrl"
-          class="h-[667px] w-[375px] rounded-lg border-4 border-solid p-0.5"
+          class="h-[667px] w-96 rounded-lg border-4 border-solid p-0.5"
         ></iframe>
         <div class="flex flex-col">
           <div class="text-base">手机扫码预览</div>
@@ -488,112 +500,5 @@ onMounted(() => {
         </div>
       </div>
     </PreviewModal>
-  </div>
+  </Page>
 </template>
-<style lang="scss" scoped>
-/* 手机宽度 */
-$phone-width: 375px;
-
-/* 根节点样式 */
-.editor {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  /* 顶部：工具栏 */
-  .editor-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 42px;
-    padding: 0;
-    background-color: var(--ant-color-bg-container);
-    border-bottom: solid 1px var(--ant-color-border);
-
-    /* 工具栏：右侧按钮 */
-    .header-right {
-      height: 100%;
-
-      .ant-btn {
-        height: 100%;
-      }
-    }
-
-    /* 隐藏工具栏按钮的边框 */
-    :deep(.ant-radio-button-wrapper),
-    :deep(.ant-btn) {
-      border-top: none !important;
-      border-bottom: none !important;
-      border-radius: 0 !important;
-    }
-  }
-
-  /* 中心操作区 */
-  .editor-container {
-    display: flex;
-
-    /* 右侧属性面板 */
-    :deep(.editor-right) {
-      /* 属性面板顶部：减少内边距 */
-      :deep(.ant-card-head) {
-        padding: 8px 16px;
-      }
-
-      /* 属性面板分组 */
-      :deep(.property-group) {
-        margin: 0 -20px;
-
-        &.ant-card {
-          border: none;
-        }
-
-        /* 属性分组名称 */
-        .ant-card-head {
-          padding: 8px 32px;
-          background: var(--ant-color-bg-layout);
-          border: none;
-        }
-
-        .ant-card-body {
-          border: none;
-        }
-      }
-    }
-
-    /* 中心区域 */
-    .editor-center {
-      /* 手机页面编辑区域 */
-      :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 {
-        :deep(.ant-tag) {
-          border: none;
-          box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
-
-          .ant-tag-icon {
-            margin-right: 4px;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/draggable/index.vue

@@ -58,18 +58,17 @@ const handleDelete = function (index: number) {
       <div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2">
         <!-- 操作按钮区 -->
         <div
-          class="-m-2 mb-1 flex flex-row items-center justify-between rounded-t p-2"
-          style="background-color: var(--ant-color-bg-container-secondary)"
+          class="bg-secondary -m-2 mb-1 flex flex-row items-center justify-between rounded-t p-2"
         >
           <Tooltip title="拖动排序">
             <IconifyIcon
-              icon="ic:round-drag-indicator"
+              icon="lucide:move"
               class="drag-icon cursor-move text-gray-500"
             />
           </Tooltip>
           <Tooltip v-if="formData.length > min" title="删除">
             <IconifyIcon
-              icon="ep:delete"
+              icon="lucide:trash-2"
               class="cursor-pointer text-red-500 hover:text-red-600"
               @click="handleDelete(index)"
             />
@@ -93,7 +92,7 @@ const handleDelete = function (index: number) {
       @click="handleAdd"
     >
       <template #icon>
-        <IconifyIcon icon="ep:plus" />
+        <IconifyIcon icon="lucide:plus" />
       </template>
       添加
     </Button>

apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue

@@ -198,103 +198,54 @@ function eachCube(callback: (x: number, y: number, cube: Cube) => void) {
 }
 </script>
 <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"
-            :class="[{ active: cube.active }]"
-            :style="{
-              width: `${cubeSize}px`,
-              height: `${cubeSize}px`,
-            }"
-            @click="handleCubeClick(row, col)"
-            @mouseenter="handleCellHover(row, col)"
-          >
-            <IconifyIcon 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 && hotArea.width && hotArea.height
-          "
-          class="btn-delete"
-          @click="handleDeleteHotArea(index)"
+  <table class="relative border-collapse border-spacing-0">
+    <!-- 底层：魔方矩阵 -->
+    <tbody>
+      <tr v-for="(rowCubes, row) in cubes" :key="row">
+        <td
+          v-for="(cube, col) in rowCubes"
+          :key="col"
+          class="active:bg-primary-200 hover:bg-primary-100 box-border cursor-pointer border text-center align-middle"
+          :class="[{ active: cube.active }]"
+          :style="{
+            width: `${cubeSize}px`,
+            height: `${cubeSize}px`,
+          }"
+          @click="handleCubeClick(row, col)"
+          @mouseenter="handleCellHover(row, col)"
         >
-          <IconifyIcon icon="ep:circle-close-filled" />
-        </div>
-        <span v-if="hotArea.width">{{
-          `${hotArea.width}×${hotArea.height}`
-        }}</span>
+          <IconifyIcon icon="lucide:plus" class="inline-block size-6" />
+        </td>
+      </tr>
+    </tbody>
+    <!-- 顶层：热区 -->
+    <div
+      v-for="(hotArea, index) in hotAreas"
+      :key="index"
+      class="bg-primary-200 border-primary absolute box-border flex items-center justify-center border"
+      :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 && hotArea.width && hotArea.height"
+        class="bg-card absolute -right-2 -top-2 z-[1] size-6 h-4 w-4 items-center rounded-lg"
+        @click="handleDeleteHotArea(index)"
+      >
+        <IconifyIcon
+          icon="lucide:x"
+          class="bg-primary inset-0 items-center text-white"
+        />
       </div>
-    </table>
-  </div>
+      <span v-if="hotArea.width">
+        {{ `${hotArea.width}×${hotArea.height}` }}
+      </span>
+    </div>
+  </table>
 </template>
-<style lang="scss" scoped>
-.cube-table {
-  position: relative;
-  border-spacing: 0;
-  border-collapse: collapse;
-
-  .cube {
-    box-sizing: border-box;
-    line-height: 1;
-    color: var(--ant-color-text-secondary);
-    text-align: center;
-    cursor: pointer;
-    border: 1px solid var(--ant-color-border);
-
-    &.active {
-      background: color-mix(in srgb, var(--ant-color-primary) 10%, transparent);
-    }
-  }
-
-  .hot-area {
-    position: absolute;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--ant-color-primary);
-    cursor: pointer;
-    border-spacing: 0;
-    border-collapse: collapse;
-    background: color-mix(in srgb, var(--ant-color-primary) 20%, transparent);
-    border: 1px solid var(--ant-color-primary);
-
-    .btn-delete {
-      position: absolute;
-      top: -8px;
-      right: -8px;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 16px;
-      background-color: var(--ant-color-bg-container);
-      border-radius: 50%;
-    }
-  }
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ButtonGroup } from 'ant-design-vue';
-
+import { Space } from 'ant-design-vue';
 /**
  * 垂直按钮组
  * Ant Design Vue 的按钮组只支持水平显示，通过重写样式实现垂直布局
@@ -9,31 +8,9 @@ defineOptions({ name: 'VerticalButtonGroup' });
 </script>
 
 <template>
-  <ButtonGroup v-bind="$attrs" class="!inline-flex !flex-col">
-    <slot></slot>
-  </ButtonGroup>
+  <Space v-bind="$attrs">
+    <Space.Compact direction="vertical">
+      <slot></slot>
+    </Space.Compact>
+  </Space>
 </template>
-
-<style scoped lang="scss">
-// TODO @AI:圆角的样式不太对！
-.ant-btn-group > :deep(.ant-btn:first-child) {
-  border-bottom-color: transparent;
-  border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
-}
-
-.ant-btn-group > :deep(.ant-btn:last-child) {
-  border-top-color: transparent;
-  border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
-}
-
-.ant-btn-group :deep(.ant-btn:not(:first-child):not(:last-child)) {
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-  border-radius: 0;
-}
-
-.ant-btn-group > :deep(.ant-btn:not(:last-child)) {
-  margin-right: 0;
-  margin-bottom: -1px;
-}
-</style>

apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue

@@ -3,15 +3,15 @@ import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
 import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template';
 import type { DiyComponentLibrary } from '#/views/mall/promotion/components'; // 商城的 DIY 组件，在 DiyEditor 目录下
 
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { useTabs } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 import { useAccessStore } from '@vben/stores';
-import { isEmpty } from '@vben/utils';
+import { isEmpty, isNumber } from '@vben/utils';
 
-import { message, Radio, RadioGroup, Tooltip } from 'ant-design-vue';
+import { message, Radio, RadioGroup } from 'ant-design-vue';
 
 import { updateDiyPageProperty } from '#/api/mall/promotion/diy/page';
 import {
@@ -26,28 +26,35 @@ defineOptions({ name: 'DiyTemplateDecorate' });
 const route = useRoute();
 const { refreshTab } = useTabs();
 
-const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
+/** 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复 */
+const DIY_PAGE_INDEX_KEY = 'diy_page_index';
 
 const selectedTemplateItem = ref(0);
-const templateItems = reactive([
-  { name: '基础设置', icon: 'ep:iphone' },
-  { name: '首页', icon: 'ep:home-filled' },
-  { name: '我的', icon: 'ep:user-filled' },
-]); // 左上角工具栏操作按钮
+/** 左上角工具栏操作按钮 */
+const templateItems = ref([
+  { name: '基础设置', icon: 'lucide:settings' },
+  { name: '首页', icon: 'lucide:home' },
+  { name: '我的', icon: 'lucide:user' },
+]);
 
 const formData = ref<MallDiyTemplateApi.DiyTemplateProperty>();
+/** 当前编辑的属性 */
 const currentFormData = ref<
   MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
 >({
   property: '',
-} as MallDiyPageApi.DiyPage); // 当前编辑的属性
+} as MallDiyPageApi.DiyPage);
+/** templateItem 对应的缓存 */
 const currentFormDataMap = ref<
   Map<string, MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty>
->(new Map()); // templateItem 对应的缓存
+>(new Map());
 
-const previewUrl = ref(''); // 商城 H5 预览地址
+/** 商城 H5 预览地址 */
+const previewUrl = ref('');
 
-const templateLibs = [] as DiyComponentLibrary[]; // 模板组件库
+/** 模板组件库 */
+const templateLibs = [] as DiyComponentLibrary[];
+/** 当前组件库 */
 const libs = ref<DiyComponentLibrary[]>(templateLibs); // 当前组件库
 
 /** 获取详情 */
@@ -69,17 +76,23 @@ async function getPageDetail(id: any) {
 }
 
 /** 模板选项切换 */
-function handleTemplateItemChange(val: any) {
+function handleTemplateItemChange(event: any) {
+  // 从事件对象中获取值
+  const val = event.target?.value ?? event;
+  // 切换模版
+  selectedTemplateItem.value = isNumber(val)
+    ? val
+    : templateItems.value.findIndex((item) => item.name === val.name);
+
   // 缓存模版编辑数据
   currentFormDataMap.value.set(
-    templateItems[selectedTemplateItem.value]?.name || '',
+    templateItems.value[selectedTemplateItem.value]?.name || '',
     currentFormData.value!,
   );
   // 读取模版缓存
-  const data = currentFormDataMap.value.get(templateItems[val]?.name || '');
-
-  // 切换模版
-  selectedTemplateItem.value = val;
+  const data = currentFormDataMap.value.get(
+    templateItems.value[selectedTemplateItem.value]?.name || '',
+  );
 
   // 情况一：编辑模板
   if (val === 0) {
@@ -92,14 +105,22 @@ function handleTemplateItemChange(val: any) {
 
   // 情况二：编辑页面
   libs.value = PAGE_LIBS;
-  currentFormData.value = (
-    isEmpty(data)
-      ? formData.value!.pages.find(
-          (page: MallDiyPageApi.DiyPage) =>
-            page.name === templateItems[val]?.name,
-        )
-      : data
-  ) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty;
+  const pageData = isEmpty(data)
+    ? formData.value!.pages.find(
+        (page: MallDiyPageApi.DiyPage) =>
+          page.name === templateItems.value[val]?.name,
+      )
+    : data;
+
+  // 如果找不到页面数据，使用默认值
+  currentFormData.value = pageData
+    ? (pageData as
+        | MallDiyPageApi.DiyPage
+        | MallDiyTemplateApi.DiyTemplateProperty)
+    : ({
+        property: '',
+        name: templateItems.value[val]?.name || '',
+      } as MallDiyPageApi.DiyPage);
 }
 
 /** 提交表单 */
@@ -110,7 +131,7 @@ async function submitForm() {
   });
   try {
     // 对所有的 templateItems 都进行保存，有缓存则保存缓存，解决都有修改时只保存了当前所编辑的 templateItem，导致装修效果存在差异
-    for (const [i, templateItem] of templateItems.entries()) {
+    for (const [i, templateItem] of templateItems.value.entries()) {
       const data = currentFormDataMap.value.get(templateItem.name) as any;
       // 情况一：基础设置
       if (i === 0) {
@@ -191,18 +212,25 @@ onMounted(async () => {
     <template #toolBarLeft>
       <RadioGroup
         :value="selectedTemplateItem"
-        class="h-full!"
+        class="flex items-center"
+        size="large"
         @change="handleTemplateItemChange"
       >
-        <Tooltip
-          v-for="(item, index) in templateItems"
-          :key="index"
-          :title="item.name"
-        >
-          <Radio.Button :value="index">
-            <IconifyIcon :icon="item.icon" :size="24" />
+        <template v-for="(item, index) in templateItems" :key="index">
+          <Radio.Button
+            :value="item"
+            :class="
+              index === selectedTemplateItem
+                ? 'bg-primary text-primary-foreground'
+                : ''
+            "
+          >
+            <IconifyIcon
+              :icon="item.icon"
+              class="mt-2 flex size-6 items-center"
+            />
           </Radio.Button>
-        </Tooltip>
+        </template>
       </RadioGroup>
     </template>
   </DiyEditor>

apps/web-antd/src/views/mall/promotion/kefu/components/index.ts

@@ -1,6 +0,0 @@
-export { default as KeFuConversationList } from './KeFuConversationList.vue';
-export { default as KeFuMessageList } from './KeFuMessageList.vue';
-export { default as MemberInfo } from './member/MemberInfo.vue';
-
-// TODO @jawe：components =》modules；在 vben 里，modules 是给自己用的，把一个大 vue 拆成 n 个小 vue；components 是给别的模块使用的；
-// TODO @jawe：1）组件名小写，类似 conversation-list.vue；2）KeFu 开头可以去掉，因为已经是当前模块下，不用重复拼写；

apps/web-antd/src/views/mall/promotion/kefu/components/member/MemberInfo.vue

@@ -1,293 +0,0 @@
-<!-- 右侧信息：会员信息 + 最近浏览 + 交易订单 -->
-<script lang="ts" setup>
-import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
-import type { MemberUserApi } from '#/api/member/user';
-import type { PayWalletApi } from '#/api/pay/wallet/balance';
-
-import { computed, nextTick, ref } from 'vue';
-
-import { isEmpty } from '@vben/utils';
-
-// TODO @jawe：debounce 是不是还是需要的哈；应该有 2 处需要；可以微信沟通哈；
-// import { debounce } from 'lodash-es'
-import { useDebounceFn } from '@vueuse/core';
-import { Card, Empty, Layout, message } from 'ant-design-vue';
-
-import { getUser } from '#/api/member/user';
-import { getWallet } from '#/api/pay/wallet/balance';
-import AccountInfo from '#/views/member/user/detail/modules/account-info.vue';
-import BasicInfo from '#/views/member/user/detail/modules/basic-info.vue';
-
-import OrderBrowsingHistory from './OrderBrowsingHistory.vue';
-import ProductBrowsingHistory from './ProductBrowsingHistory.vue';
-
-defineOptions({ name: 'MemberBrowsingHistory' });
-
-const activeTab = ref('会员信息');
-const tabActivation = computed(() => (tab: string) => activeTab.value === tab);
-
-/** tab 切换 */
-const productBrowsingHistoryRef =
-  ref<InstanceType<typeof ProductBrowsingHistory>>();
-const orderBrowsingHistoryRef =
-  ref<InstanceType<typeof OrderBrowsingHistory>>();
-async function handleClick(tab: string) {
-  activeTab.value = tab;
-  await nextTick();
-  await getHistoryList();
-}
-
-/** 获得历史数据 */
-async function getHistoryList() {
-  switch (activeTab.value) {
-    case '交易订单': {
-      await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value);
-      break;
-    }
-    case '会员信息': {
-      await getUserData();
-      await getUserWallet();
-      break;
-    }
-    case '最近浏览': {
-      await productBrowsingHistoryRef.value?.getHistoryList(conversation.value);
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
-
-/** 加载下一页数据 */
-async function loadMore() {
-  switch (activeTab.value) {
-    case '交易订单': {
-      await orderBrowsingHistoryRef.value?.loadMore();
-      break;
-    }
-    case '会员信息': {
-      break;
-    }
-    case '最近浏览': {
-      await productBrowsingHistoryRef.value?.loadMore();
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
-
-/** 浏览历史初始化 */
-const conversation = ref<MallKefuConversationApi.Conversation>(
-  {} as MallKefuConversationApi.Conversation,
-); // 用户会话
-async function initHistory(val: MallKefuConversationApi.Conversation) {
-  activeTab.value = '会员信息';
-  conversation.value = val;
-  await nextTick();
-  await getHistoryList();
-}
-defineExpose({ initHistory });
-
-/** 处理消息列表滚动事件(debounce 限流) */
-const scrollbarRef = ref<InstanceType<any>>();
-const handleScroll = useDebounceFn(async () => {
-  const wrap = scrollbarRef.value?.wrapRef;
-  // 触底重置
-  if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
-    await loadMore();
-  }
-}, 200);
-
-/** 查询用户钱包信息 */
-// TODO @jawe：idea 的导入报错；需要看下；
-const WALLET_INIT_DATA = {
-  balance: 0,
-  totalExpense: 0,
-  totalRecharge: 0,
-} as PayWalletApi.Wallet; // 钱包初始化数据
-const wallet = ref<PayWalletApi.Wallet>(WALLET_INIT_DATA); // 钱包信息
-
-async function getUserWallet() {
-  if (!conversation.value.userId) {
-    wallet.value = WALLET_INIT_DATA;
-    return;
-  }
-  wallet.value =
-    (await getWallet({ userId: conversation.value.userId })) ||
-    WALLET_INIT_DATA;
-}
-
-/** 获得用户 */
-const loading = ref(true); // 加载中
-const user = ref<MemberUserApi.User>({} as MemberUserApi.User);
-async function getUserData() {
-  loading.value = true;
-  try {
-    const res = await getUser(conversation.value.userId);
-    if (res) {
-      user.value = res;
-    } else {
-      user.value = {} as MemberUserApi.User;
-      message.error('会员不存在！');
-    }
-  } finally {
-    loading.value = false;
-  }
-}
-</script>
-
-<template>
-  <!-- TODO @jave：from xingyu：a- 换成大写的方式，另外组件没有进行导入，其他页面也有这个问题 -->
-  <Layout class="kefu">
-    <Layout.Header class="kefu-header">
-      <div
-        :class="{ 'kefu-header-item-activation': tabActivation('会员信息') }"
-        class="kefu-header-item flex cursor-pointer items-center justify-center"
-        @click="handleClick('会员信息')"
-      >
-        会员信息
-      </div>
-      <div
-        :class="{ 'kefu-header-item-activation': tabActivation('最近浏览') }"
-        class="kefu-header-item flex cursor-pointer items-center justify-center"
-        @click="handleClick('最近浏览')"
-      >
-        最近浏览
-      </div>
-      <div
-        :class="{ 'kefu-header-item-activation': tabActivation('交易订单') }"
-        class="kefu-header-item flex cursor-pointer items-center justify-center"
-        @click="handleClick('交易订单')"
-      >
-        交易订单
-      </div>
-    </Layout.Header>
-    <Layout.Content class="kefu-content p-10px!">
-      <div v-if="!isEmpty(conversation)" v-loading="loading">
-        <!-- 基本信息 -->
-        <BasicInfo v-if="activeTab === '会员信息'" :user="user" mode="kefu">
-          <template #title>
-            <span class="text-sm font-bold">基本信息</span>
-          </template>
-        </BasicInfo>
-        <!-- 账户信息 -->
-        <Card
-          v-if="activeTab === '会员信息'"
-          class="mt-10px h-full"
-          shadow="never"
-        >
-          <template #title>
-            <span class="text-sm font-bold">账户信息</span>
-          </template>
-          <AccountInfo :column="1" :user="user" :wallet="wallet" />
-        </Card>
-      </div>
-      <div v-show="!isEmpty(conversation)">
-        <div ref="scrollbarRef" always @scroll="handleScroll">
-          <!-- 最近浏览 -->
-          <ProductBrowsingHistory
-            v-if="activeTab === '最近浏览'"
-            ref="productBrowsingHistoryRef"
-          />
-          <!-- 交易订单 -->
-          <OrderBrowsingHistory
-            v-if="activeTab === '交易订单'"
-            ref="orderBrowsingHistoryRef"
-          />
-        </div>
-      </div>
-      <Empty
-        v-show="isEmpty(conversation)"
-        description="请选择左侧的一个会话后开始"
-        class="mt-[50px]"
-      />
-    </Layout.Content>
-  </Layout>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @jave：看看哪些可以用 tailwind 简化掉 */
-.kefu {
-  position: relative;
-  width: 300px !important;
-  background-color: var(--app-content-bg-color);
-
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 1px; /* 实际宽度 */
-    height: 100%;
-    content: '';
-    background-color: var(--el-border-color);
-    transform: scaleX(0.3); /* 缩小宽度 */
-  }
-
-  &-header {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    background-color: var(--app-content-bg-color);
-
-    &::before {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 1px; /* 初始宽度 */
-      content: '';
-      background-color: var(--el-border-color);
-      transform: scaleY(0.3); /* 缩小视觉高度 */
-    }
-
-    &-title {
-      font-size: 18px;
-      font-weight: bold;
-    }
-
-    &-item {
-      position: relative;
-      width: 100%;
-      height: 100%;
-
-      &-activation::before {
-        position: absolute; /* 绝对定位 */
-        inset: 0; /* 覆盖整个元素 */
-        pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
-        content: '';
-        border-bottom: 2px solid rgb(128 128 128 / 50%); /* 边框样式 */
-      }
-
-      &:hover::before {
-        position: absolute; /* 绝对定位 */
-        inset: 0; /* 覆盖整个元素 */
-        pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
-        content: '';
-        border-bottom: 2px solid rgb(128 128 128 / 50%); /* 边框样式 */
-      }
-    }
-  }
-
-  &-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    overflow: auto;
-  }
-
-  &-tabs {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.header-title {
-  border-bottom: #e4e0e0 solid 1px;
-}
-</style>

apps/web-antd/src/views/mall/promotion/kefu/components/message/OrderItem.vue

@@ -1,206 +0,0 @@
-<script lang="ts" setup>
-import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
-
-import { computed } from 'vue';
-import { useRouter } from 'vue-router';
-
-import { fenToYuan, isObject, jsonParse } from '@vben/utils';
-
-import ProductItem from '#/views/mall/promotion/kefu/components/message/ProductItem.vue';
-
-defineOptions({ name: 'OrderItem' });
-
-const props = defineProps<{
-  message?: MallKefuMessageApi.Message;
-  order?: any;
-}>();
-
-const { push } = useRouter();
-
-const getMessageContent = computed(() =>
-  props.message === undefined
-    ? props.order
-    : jsonParse(props!.message!.content),
-);
-
-/** 查看订单详情 */
-function openDetail(id: number) {
-  push({ name: 'TradeOrderDetail', params: { id } });
-}
-
-/**
- * 格式化订单状态的颜色
- *
- * @param order 订单
- * @return {string} 颜色的 class 名称
- */
-function formatOrderColor(order: any) {
-  if (order.status === 0) {
-    return 'info-color';
-  }
-  if (
-    order.status === 10 ||
-    order.status === 20 ||
-    (order.status === 30 && !order.commentStatus)
-  ) {
-    return 'warning-color';
-  }
-  if (order.status === 30 && order.commentStatus) {
-    return 'success-color';
-  }
-  return 'danger-color';
-}
-
-/**
- * 格式化订单状态
- *
- * @param order 订单
- */
-function formatOrderStatus(order: any) {
-  if (order.status === 0) {
-    return '待付款';
-  }
-  if (order.status === 10 && order.deliveryType === 1) {
-    return '待发货';
-  }
-  if (order.status === 10 && order.deliveryType === 2) {
-    return '待核销';
-  }
-  if (order.status === 20) {
-    return '待收货';
-  }
-  if (order.status === 30 && !order.commentStatus) {
-    return '待评价';
-  }
-  if (order.status === 30 && order.commentStatus) {
-    return '已完成';
-  }
-  return '已关闭';
-}
-</script>
-
-<template>
-  <div v-if="isObject(getMessageContent)">
-    <div :key="getMessageContent.id" class="order-list-card-box mt-[14px]">
-      <div
-        class="order-card-header p-x-[5px] flex items-center justify-between"
-      >
-        <div class="order-no">
-          订单号：
-          <span
-            style="cursor: pointer"
-            @click="openDetail(getMessageContent.id)"
-          >
-            {{ getMessageContent.no }}
-          </span>
-        </div>
-        <div
-          :class="formatOrderColor(getMessageContent)"
-          class="order-state font-16"
-        >
-          {{ formatOrderStatus(getMessageContent) }}
-        </div>
-      </div>
-      <div
-        v-for="item in getMessageContent.items"
-        :key="item.id"
-        class="border-bottom"
-      >
-        <ProductItem
-          :num="item.count"
-          :pic-url="item.picUrl"
-          :price="item.price"
-          :sku-text="
-            item.properties.map((property: any) => property.valueName).join(' ')
-          "
-          :spu-id="item.spuId"
-          :title="item.spuName"
-        />
-      </div>
-      <div class="pay-box flex justify-end pr-[5px]">
-        <div class="flex items-center">
-          <div class="discounts-title pay-color">
-            共 {{ getMessageContent?.productCount }} 件商品,总金额:
-          </div>
-          <div class="discounts-money pay-color">
-            ￥{{ fenToYuan(getMessageContent?.payPrice) }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @jave：看看哪些可以用 tailwind 简化掉 */
-.order-list-card-box {
-  padding: 10px;
-  background-color: rgb(128 128 128 / 30%); // 透明色，暗黑模式下也能体现
-  border: 1px var(--el-border-color) solid;
-  border-radius: 10px;
-
-  .order-card-header {
-    height: 28px;
-    font-weight: bold;
-
-    .order-no {
-      font-size: 13px;
-
-      span {
-        &:hover {
-          color: var(--left-menu-bg-active-color);
-          text-decoration: underline;
-        }
-      }
-    }
-
-    .order-state {
-      font-size: 13px;
-    }
-  }
-
-  .pay-box {
-    padding-top: 10px;
-    font-weight: bold;
-
-    .discounts-title {
-      font-size: 16px;
-      line-height: normal;
-    }
-
-    .discounts-money {
-      font-family: OPPOSANS;
-      font-size: 16px;
-      line-height: normal;
-    }
-
-    .pay-color {
-      font-size: 13px;
-    }
-  }
-}
-
-.warning-color {
-  font-size: 11px;
-  font-weight: bold;
-  color: #faad14;
-}
-
-.danger-color {
-  font-size: 11px;
-  font-weight: bold;
-  color: #ff3000;
-}
-
-.success-color {
-  font-size: 11px;
-  font-weight: bold;
-  color: #52c41a;
-}
-
-.info-color {
-  font-size: 11px;
-  font-weight: bold;
-  color: #999;
-}
-</style>

apps/web-antd/src/views/mall/promotion/kefu/index.vue

@@ -1,28 +1,29 @@
 <script lang="ts" setup>
 import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
 
-import { defineOptions, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import { useAccessStore } from '@vben/stores';
 
 import { useWebSocket } from '@vueuse/core';
-import { Layout, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { useMallKefuStore } from '#/store/mall/kefu';
 
-import {
-  KeFuConversationList,
-  KeFuMessageList,
-  MemberInfo,
-} from './components';
-import { WebSocketMessageTypeConstants } from './components/tools/constants';
-
-defineOptions({ name: 'KeFu' });
+import ConversationList from './modules/conversation-list.vue';
+import MemberInfo from './modules/member/member-info.vue';
+import MessageList from './modules/message-list.vue';
+import { WebSocketMessageTypeConstants } from './modules/tools/constants';
 
 const accessStore = useAccessStore();
 const kefuStore = useMallKefuStore(); // 客服缓存
 
+/** 组件引用 */
+const messageListRef = ref<InstanceType<typeof MessageList>>();
+const memberInfoRef = ref<InstanceType<typeof MemberInfo>>();
+const conversationListRef = ref<InstanceType<typeof ConversationList>>();
+
 // ======================= WebSocket start =======================
 const url = `${`${import.meta.env.VITE_BASE_URL}/infra/ws`.replace(
   'http',
@@ -59,7 +60,7 @@ watch(
         // 刷新会话列表
         kefuStore.updateConversation(message.conversationId);
         // 刷新消息列表
-        keFuChatBoxRef.value?.refreshMessageList(message);
+        messageListRef.value?.refreshMessageList(message);
         return;
       }
 
@@ -79,21 +80,16 @@ watch(
 );
 // ======================= WebSocket end =======================
 
-/** 加载指定会话的消息列表 */
-const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>();
-const memberInfoRef = ref<InstanceType<typeof MemberInfo>>();
-// TODO @jawe：这里没导入
 function handleChange(conversation: MallKefuConversationApi.Conversation) {
-  keFuChatBoxRef.value?.getNewMessageList(conversation as any);
+  messageListRef.value?.getNewMessageList(conversation);
   memberInfoRef.value?.initHistory(conversation);
 }
 
-const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>();
 /** 初始化 */
 onMounted(() => {
   // 加载会话列表
   kefuStore.setConversationList().then(() => {
-    keFuConversationRef.value?.calculationLastMessageTime();
+    conversationListRef.value?.calculationLastMessageTime();
   });
   // 打开 websocket 连接
   open();
@@ -107,30 +103,20 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Page>
-    <!-- TODO @jawe：style 使用 tailwindcss，AI 友好； -->
-    <Layout.Content class="kefu-layout hrow">
-      <!-- 会话列表 -->
-      <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
-      <!-- 会话详情（选中会话的消息列表） -->
-      <KeFuMessageList ref="keFuChatBoxRef" />
-      <!-- 会员信息（选中会话的会员信息） -->
-      <MemberInfo ref="memberInfoRef" />
-    </Layout.Content>
+  <Page auto-content-height>
+    <div class="flex h-full antialiased">
+      <div class="flex h-full w-full flex-row overflow-x-hidden">
+        <!-- 会话列表 -->
+        <ConversationList
+          class="w-1/6"
+          ref="conversationListRef"
+          @change="handleChange"
+        />
+        <!-- 会话详情（选中会话的消息列表） -->
+        <MessageList class="w-4/6" ref="messageListRef" />
+        <!-- 会员信息（选中会话的会员信息） -->
+        <MemberInfo class="w-[280px]" ref="memberInfoRef" />
+      </div>
+    </div>
   </Page>
 </template>
-
-<style lang="scss">
-.kefu-layout {
-  position: absolute;
-  top: 0;
-  left: 0;
-  flex: 1;
-  width: 100%;
-  height: 100%;
-}
-
-.hrow {
-  display: flex;
-}
-</style>

apps/web-antd/src/views/mall/promotion/kefu/modules/conversation-list.vue

@@ -7,7 +7,7 @@ import { confirm } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { formatPast, jsonParse } from '@vben/utils';
 
-import { Avatar, Badge, Layout, message } from 'ant-design-vue';
+import { Avatar, message } from 'ant-design-vue';
 
 import {
   deleteConversation,
@@ -18,8 +18,6 @@ import { useMallKefuStore } from '#/store/mall/kefu';
 import { KeFuMessageContentTypeEnum } from './tools/constants';
 import { useEmoji } from './tools/emoji';
 
-defineOptions({ name: 'KeFuConversationList' });
-
 /** 打开右侧的消息列表 */
 const emits = defineEmits<{
   (e: 'change', v: MallKefuConversationApi.Conversation): void;
@@ -160,38 +158,36 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Layout.Sider class="kefu h-full pt-[5px]" width="260px">
-    <div class="color-[#999] my-[10px] font-bold">
-      会话记录({{ kefuStore.getConversationList.length }})
+  <div
+    class="bg-background flex flex-shrink-0 flex-col border-r border-gray-200 p-4"
+  >
+    <div class="flex h-12 w-full flex-row items-center justify-between">
+      <span class="text-lg font-bold">会话记录</span>
+      <span
+        class="flex h-4 w-4 items-center justify-center rounded-full bg-indigo-100 text-indigo-600"
+      >
+        {{ kefuStore.getConversationList.length }}
+      </span>
     </div>
-    <div
-      v-for="item in kefuStore.getConversationList"
-      :key="item.id"
-      :class="{
-        active: item.id === activeConversationId,
-        pinned: item.adminPinned,
-      }"
-      class="kefu-conversation flex items-center px-[10px]"
-      @click="openRightMessage(item)"
-      @contextmenu.prevent="rightClick($event as PointerEvent, item)"
-    >
-      <div class="!flex w-full items-center justify-center">
-        <div class="w-50[px] h-50[px] flex items-center justify-center">
-          <!-- 头像 + 未读 -->
-          <Badge
-            :hidden="item.adminUnreadMessageCount === 0"
-            :max="99"
-            :value="item.adminUnreadMessageCount"
+    <div class="mt-2 flex flex-col">
+      <div class="-mx-2 mt-4 flex h-48 flex-col space-y-1 overflow-y-auto">
+        <button
+          v-for="(item, index) in kefuStore.getConversationList"
+          :key="index"
+          class="flex flex-row items-center rounded-xl p-2 hover:bg-gray-100"
+          :class="{
+            'bg-gray-500/50': item.id === activeConversationId,
+          }"
+          @click="openRightMessage(item)"
+          @contextmenu.prevent="rightClick($event as PointerEvent, item)"
+        >
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200"
           >
             <Avatar :src="item.userAvatar" alt="avatar" />
-          </Badge>
-        </div>
-        <div class="ml-[10px] w-full">
-          <div class="!flex w-full items-center justify-between">
-            <span class="username">{{ item.userNickname || 'null' }}</span>
-            <span class="color-[#999]" style="font-size: 13px">
-              {{ lastMessageTimeMap.get(item.id) ?? '计算中' }}
-            </span>
+          </div>
+          <div class="ml-2 text-sm font-semibold">
+            {{ item.userNickname || 'null' }}
           </div>
           <!-- 最后聊天内容 -->
           <div
@@ -201,96 +197,54 @@ onBeforeUnmount(() => {
                 item.lastMessageContent,
               )
             "
-            class="last-message color-[#999] !flex items-center"
+            class="line-clamp-1 flex items-center text-sm text-gray-500"
           ></div>
-        </div>
+          <div
+            v-if="item.adminUnreadMessageCount > 0"
+            class="ml-auto flex h-4 w-4 items-center justify-center rounded bg-red-500 text-xs leading-none text-white"
+          >
+            {{ item.adminUnreadMessageCount }}
+          </div>
+        </button>
       </div>
     </div>
 
     <!-- 右键，进行操作（类似微信） -->
-    <ul v-show="showRightMenu" :style="rightMenuStyle" class="right-menu-ul">
+    <ul
+      v-show="showRightMenu"
+      :style="rightMenuStyle"
+      class="bg-background absolute z-[9999] m-0 w-32 list-none rounded-xl p-1 shadow-md"
+    >
       <li
         v-show="!rightClickConversation.adminPinned"
-        class="flex items-center"
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
         @click.stop="updateConversationPinnedFn(true)"
       >
-        <IconifyIcon class="mr-[5px]" icon="ep:top" />
+        <IconifyIcon class="mr-1" icon="lucide:arrow-up-to-line" />
         置顶会话
       </li>
       <li
         v-show="rightClickConversation.adminPinned"
-        class="flex items-center"
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
         @click.stop="updateConversationPinnedFn(false)"
       >
-        <IconifyIcon class="mr-[5px]" icon="ep:bottom" />
+        <IconifyIcon class="mr-1" icon="lucide:arrow-down-from-line" />
         取消置顶
       </li>
-      <li class="flex items-center" @click.stop="deleteConversationFn">
-        <IconifyIcon class="mr-[5px]" color="red" icon="ep:delete" />
+      <li
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
+        @click.stop="deleteConversationFn"
+      >
+        <IconifyIcon class="mr-1" color="red" icon="lucide:trash-2" />
         删除会话
       </li>
-      <li class="flex items-center" @click.stop="closeRightMenu">
-        <IconifyIcon class="mr-[5px]" color="red" icon="ep:close" />
+      <li
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
+        @click.stop="closeRightMenu"
+      >
+        <IconifyIcon class="mr-1" color="red" icon="lucide:x" />
         取消
       </li>
     </ul>
-  </Layout.Sider>
+  </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @jave：看看哪些可以用 tailwind 简化掉 */
-.kefu {
-  background-color: var(--app-content-bg-color);
-
-  &-conversation {
-    height: 60px;
-    //background-color: #fff;
-    //transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
-
-    .username {
-      min-width: 0;
-      max-width: 60%;
-    }
-
-    .last-message {
-      font-size: 13px;
-    }
-
-    .last-message,
-    .username {
-      display: -webkit-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-    }
-  }
-
-  .active {
-    background-color: rgb(128 128 128 / 50%); // 透明色，暗黑模式下也能体现
-  }
-
-  .right-menu-ul {
-    position: absolute;
-    width: 130px;
-    padding: 5px;
-    margin: 0;
-    list-style-type: none; /* 移除默认的项目符号 */
-    background-color: var(--app-content-bg-color);
-    border-radius: 12px;
-    box-shadow: 0 2px 4px rgb(0 0 0 / 10%); /* 阴影效果 */
-
-    li {
-      padding: 8px 16px;
-      cursor: pointer;
-      border-radius: 12px;
-      transition: background-color 0.3s; /* 平滑过渡 */
-      &:hover {
-        background-color: var(
-          --left-menu-bg-active-color
-        ); /* 悬停时的背景颜色 */
-      }
-    }
-  }
-}
-</style>

apps/web-antd/src/views/mall/promotion/kefu/modules/member/member-info.vue

@@ -0,0 +1,220 @@
+<!-- 右侧信息：会员信息 + 最近浏览 + 交易订单 -->
+<script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+import type { MemberUserApi } from '#/api/member/user';
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+
+import { computed, nextTick, ref, toRefs, watch } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useScroll } from '@vueuse/core';
+import { Empty, message } from 'ant-design-vue';
+
+import { getUser } from '#/api/member/user';
+import { getWallet } from '#/api/pay/wallet/balance';
+import AccountInfo from '#/views/member/user/detail/modules/account-info.vue';
+import BasicInfo from '#/views/member/user/detail/modules/basic-info.vue';
+
+import OrderBrowsingHistory from './order-browsing-history.vue';
+import ProductBrowsingHistory from './product-browsing-history.vue';
+
+const activeTab = ref<string>('会员信息');
+
+const tabActivation = computed(() => (tab: string) => activeTab.value === tab);
+
+/** tab 切换 */
+const productBrowsingHistoryRef =
+  ref<InstanceType<typeof ProductBrowsingHistory>>();
+const orderBrowsingHistoryRef =
+  ref<InstanceType<typeof OrderBrowsingHistory>>();
+async function handleClick(tab: string) {
+  activeTab.value = tab;
+  await nextTick();
+  await getHistoryList();
+}
+
+/** 获得历史数据 */
+async function getHistoryList() {
+  switch (activeTab.value) {
+    case '交易订单': {
+      await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value);
+      break;
+    }
+    case '会员信息': {
+      await getUserData();
+      await getUserWallet();
+      break;
+    }
+    case '最近浏览': {
+      await productBrowsingHistoryRef.value?.getHistoryList(conversation.value);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+/** 加载下一页数据 */
+async function loadMore() {
+  switch (activeTab.value) {
+    case '交易订单': {
+      await orderBrowsingHistoryRef.value?.loadMore();
+      break;
+    }
+    case '会员信息': {
+      break;
+    }
+    case '最近浏览': {
+      await productBrowsingHistoryRef.value?.loadMore();
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+/** 浏览历史初始化 */
+const conversation = ref<MallKefuConversationApi.Conversation>(
+  {} as MallKefuConversationApi.Conversation,
+); // 用户会话
+async function initHistory(val: MallKefuConversationApi.Conversation) {
+  activeTab.value = '会员信息';
+  conversation.value = val;
+  await nextTick();
+  await getHistoryList();
+}
+defineExpose({ initHistory });
+
+/** 处理消息列表滚动事件(debounce 限流) */
+const scrollbarRef = ref<InstanceType<any>>();
+const { arrivedState } = useScroll(scrollbarRef);
+const { bottom } = toRefs(arrivedState);
+watch(
+  () => bottom.value,
+  async (newVal) => {
+    if (newVal) {
+      await loadMore();
+    }
+  },
+);
+
+/** 查询用户钱包信息 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0,
+} as PayWalletApi.Wallet; // 钱包初始化数据
+const wallet = ref<PayWalletApi.Wallet>(WALLET_INIT_DATA); // 钱包信息
+
+async function getUserWallet() {
+  if (!conversation.value.userId) {
+    wallet.value = WALLET_INIT_DATA;
+    return;
+  }
+  wallet.value =
+    (await getWallet({ userId: conversation.value.userId })) ||
+    WALLET_INIT_DATA;
+}
+
+/** 获得用户 */
+const loading = ref(true); // 加载中
+const user = ref<MemberUserApi.User>({} as MemberUserApi.User);
+async function getUserData() {
+  loading.value = true;
+  try {
+    const res = await getUser(conversation.value.userId);
+    if (res) {
+      user.value = res;
+    } else {
+      user.value = {} as MemberUserApi.User;
+      message.error('会员不存在！');
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="bg-background flex h-full flex-auto flex-col">
+    <div
+      class="mt-4 flex h-12 items-center justify-around before:absolute before:bottom-0 before:left-0 before:h-1 before:w-full before:scale-y-[0.3] before:bg-gray-200 before:content-['']"
+    >
+      <div
+        :class="{
+          'before:border-primary before:border-b-2': tabActivation('会员信息'),
+        }"
+        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
+        @click="handleClick('会员信息')"
+      >
+        会员信息
+      </div>
+      <div
+        :class="{
+          'before:border-primary before:border-b-2': tabActivation('最近浏览'),
+        }"
+        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
+        @click="handleClick('最近浏览')"
+      >
+        最近浏览
+      </div>
+      <div
+        :class="{
+          'before:border-primary before:border-b-2': tabActivation('交易订单'),
+        }"
+        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
+        @click="handleClick('交易订单')"
+      >
+        交易订单
+      </div>
+    </div>
+    <div class="relative m-0 h-full w-full overflow-x-auto p-2">
+      <template v-if="!isEmpty(conversation)">
+        <div
+          v-loading="loading"
+          v-if="activeTab === '会员信息'"
+          class="relative overflow-y-auto overflow-x-hidden"
+        >
+          <!-- 基本信息 -->
+          <BasicInfo :user="user" mode="kefu">
+            <template #title>
+              <span class="text-sm font-bold">基本信息</span>
+            </template>
+          </BasicInfo>
+          <!-- 账户信息 -->
+          <AccountInfo
+            :column="1"
+            :user="user"
+            :wallet="wallet"
+            mode="kefu"
+            class="mt-2"
+          >
+            <template #title>
+              <span class="text-sm font-bold">账户信息</span>
+            </template>
+          </AccountInfo>
+        </div>
+        <div
+          v-show="activeTab !== '会员信息'"
+          ref="scrollbarRef"
+          class="relative h-full overflow-y-auto overflow-x-hidden"
+        >
+          <!-- 最近浏览 -->
+          <ProductBrowsingHistory
+            v-if="activeTab === '最近浏览'"
+            ref="productBrowsingHistoryRef"
+          />
+          <!-- 交易订单 -->
+          <OrderBrowsingHistory
+            v-if="activeTab === '交易订单'"
+            ref="orderBrowsingHistoryRef"
+          />
+        </div>
+      </template>
+      <Empty v-else description="请选择左侧的一个会话后开始" class="mt-[20%]" />
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/mall/promotion/kefu/modules/member/order-browsing-history.vue

@@ -4,9 +4,7 @@ import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversa
 import { computed, reactive, ref } from 'vue';
 
 import { getOrderPage } from '#/api/mall/trade/order';
-import OrderItem from '#/views/mall/promotion/kefu/components/message/OrderItem.vue';
-
-defineOptions({ name: 'OrderBrowsingHistory' });
+import OrderItem from '#/views/mall/promotion/kefu/modules/message/order-item.vue';
 
 const list = ref<any>([]); // 列表
 const total = ref(0); // 总数
@@ -45,10 +43,5 @@ defineExpose({ getHistoryList, loadMore });
 </script>
 
 <template>
-  <OrderItem
-    v-for="item in list"
-    :key="item.id"
-    :order="item"
-    class="mb-[10px]"
-  />
+  <OrderItem v-for="item in list" :key="item.id" :order="item" />
 </template>