feat: 冲突解决

.github/workflows/deploy.yml

@@ -30,7 +30,7 @@ jobs:
         run: pnpm build:play
 
       - name: Sync Playground files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_PLAYGROUND_FTP_ACCOUNT }}
@@ -54,7 +54,7 @@ jobs:
         run: pnpm build:docs
 
       - name: Sync Docs files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEBSITE_FTP_ACCOUNT }}
@@ -85,7 +85,7 @@ jobs:
         run: pnpm run build:antd
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_ANTD_FTP_ACCOUNT }}
@@ -116,7 +116,7 @@ jobs:
         run: pnpm run build:ele
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_ELE_FTP_ACCOUNT }}
@@ -147,7 +147,7 @@ jobs:
         run: pnpm run build:naive
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_NAIVE_FTP_ACCOUNT }}

.npmrc

@@ -1,4 +1,4 @@
-registry = "https://registry.npmmirror.com"
+registry=https://registry.npmmirror.com
 public-hoist-pattern[]=lefthook
 public-hoist-pattern[]=eslint
 public-hoist-pattern[]=prettier

apps/backend-mock/api/timezone/getTimezone.ts

@@ -0,0 +1,12 @@
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+import { getTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler((event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  return useResponseSuccess(getTimezone());
+});

apps/backend-mock/api/timezone/getTimezoneOptions.ts

@@ -0,0 +1,11 @@
+import { eventHandler } from 'h3';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
+import { useResponseSuccess } from '~/utils/response';
+
+export default eventHandler(() => {
+  const data = TIME_ZONE_OPTIONS.map((o) => ({
+    label: `${o.timezone} (GMT${o.offset >= 0 ? `+${o.offset}` : o.offset})`,
+    value: o.timezone,
+  }));
+  return useResponseSuccess(data);
+});

apps/backend-mock/api/timezone/setTimezone.ts

@@ -0,0 +1,22 @@
+import { eventHandler, readBody } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+import { setTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const body = await readBody<{ timezone?: unknown }>(event);
+  const timezone =
+    typeof body?.timezone === 'string' ? body.timezone : undefined;
+  const allowed = TIME_ZONE_OPTIONS.some((o) => o.timezone === timezone);
+  if (!timezone || !allowed) {
+    setResponseStatus(event, 400);
+    return useResponseError('Bad Request', 'Invalid timezone');
+  }
+  setTimezone(timezone);
+  return useResponseSuccess({});
+});

apps/backend-mock/utils/mock-data.ts

@@ -7,6 +7,11 @@ export interface UserInfo {
   homePath?: string;
 }
 
+export interface TimezoneOption {
+  offset: number;
+  timezone: string;
+}
+
 export const MOCK_USERS: UserInfo[] = [
   {
     id: 0,
@@ -276,7 +281,7 @@ export const MOCK_MENU_LIST = [
         children: [
           {
             id: 20_401,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptCreate',
             status: 1,
             type: 'button',
@@ -285,7 +290,7 @@ export const MOCK_MENU_LIST = [
           },
           {
             id: 20_402,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptEdit',
             status: 1,
             type: 'button',
@@ -294,7 +299,7 @@ export const MOCK_MENU_LIST = [
           },
           {
             id: 20_403,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptDelete',
             status: 1,
             type: 'button',
@@ -388,3 +393,29 @@ export function getMenuIds(menus: any[]) {
   });
   return ids;
 }
+
+/**
+ * 时区选项
+ */
+export const TIME_ZONE_OPTIONS: TimezoneOption[] = [
+  {
+    offset: -5,
+    timezone: 'America/New_York',
+  },
+  {
+    offset: 0,
+    timezone: 'Europe/London',
+  },
+  {
+    offset: 8,
+    timezone: 'Asia/Shanghai',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Tokyo',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Seoul',
+  },
+];

apps/backend-mock/utils/timezone-utils.ts

@@ -0,0 +1,9 @@
+let mockTimeZone: null | string = null;
+
+export const setTimezone = (timeZone: string) => {
+  mockTimeZone = timeZone;
+};
+
+export const getTimezone = () => {
+  return mockTimeZone;
+};

apps/web-antd/package.json

@@ -43,10 +43,11 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/components": "catalog:",
+    "@videojs-player/vue": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "ant-design-vue": "catalog:",
+    "benz-amr-recorder": "catalog:",
     "bpmn-js": "catalog:",
     "bpmn-js-properties-panel": "catalog:",
     "bpmn-js-token-simulation": "catalog:",
@@ -59,6 +60,7 @@
     "pinia": "catalog:",
     "steady-xml": "catalog:",
     "tinymce": "catalog:",
+    "video.js": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:",

apps/web-antd/src/api/mp/draft/index.ts

@@ -35,9 +35,13 @@ export function getDraftPage(params: PageParam) {
 
 /** 创建草稿 */
 export function createDraft(accountId: number, articles: MpDraftApi.Article[]) {
-  return requestClient.post('/mp/draft/create', articles, {
-    params: { accountId },
-  });
+  return requestClient.post(
+    '/mp/draft/create',
+    { articles },
+    {
+      params: { accountId },
+    },
+  );
 }
 
 /** 更新草稿 */
@@ -46,9 +50,13 @@ export function updateDraft(
   mediaId: string,
   articles: MpDraftApi.Article[],
 ) {
-  return requestClient.put('/mp/draft/update', articles, {
-    params: { accountId, mediaId },
-  });
+  return requestClient.put(
+    '/mp/draft/update',
+    { articles },
+    {
+      params: { accountId, mediaId },
+    },
+  );
 }
 
 /** 删除草稿 */

apps/web-antd/src/components/card-title/CardTitle.vue

@@ -1,36 +0,0 @@
-<script lang="ts" setup>
-defineOptions({ name: 'CardTitle' });
-
-// TODO @jawe from xingyu：https://gitee.com/yudaocode/yudao-ui-admin-vben/pulls/243/files#diff_note_47350213；这个组件没有必要，直接用antdv card 的slot去做就行了，只有这一个地方用，没有必要单独写一个组件
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <span class="card-title">{{ title }}</span>
-</template>
-
-<style scoped lang="scss">
-.card-title {
-  font-size: 14px;
-  font-weight: 600;
-
-  &::before {
-    position: relative;
-    top: 8px;
-    left: -5px;
-    display: inline-block;
-    width: 3px;
-    height: 14px;
-    content: '';
-    //background-color: #105cfb;
-    background: var(--el-color-primary);
-    border-radius: 5px;
-    transform: translateY(-50%);
-  }
-}
-</style>

apps/web-antd/src/components/card-title/index.ts

@@ -1 +0,0 @@
-export { default as CardTitle } from './CardTitle.vue';

apps/web-antd/src/components/cron-tab/cron-tab.vue

@@ -420,7 +420,7 @@ function inputChange() {
     @input="inputChange"
   >
     <template #addonAfter>
-      <Select v-model:value="select" placeholder="生成器" style="width: 115px">
+      <Select v-model:value="select" placeholder="生成器" class="w-36">
         <Select.Option value="0 * * * * ?">每分钟</Select.Option>
         <Select.Option value="0 0 * * * ?">每小时</Select.Option>
         <Select.Option value="0 0 0 * * ?">每天零点</Select.Option>
@@ -946,20 +946,20 @@ function inputChange() {
   padding: 0 15px;
   font-size: 12px;
   line-height: 30px;
-  background: var(--ant-primary-color-active-bg);
+  background: hsl(var(--primary) / 10%);
   border-radius: 4px;
 }
 
 .sc-cron :deep(.ant-tabs-tab.ant-tabs-tab-active) .sc-cron-num h4 {
   color: #fff;
-  background: var(--ant-primary-color);
+  background: hsl(var(--primary));
 }
 
 [data-theme='dark'] .sc-cron-num h4 {
-  background: var(--ant-color-white);
+  background: hsl(var(--white));
 }
 
 .input-with-select .ant-input-group-addon {
-  background-color: var(--ant-color-fill-alter);
+  background-color: hsl(var(--muted));
 }
 </style>

apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue

@@ -81,7 +81,7 @@ onMounted(() => {
       :value-format="rangePickerProps.valueFormat"
       :placeholder="rangePickerProps.placeholder"
       :presets="rangePickerProps.presets"
-      class="!w-[235px]"
+      class="!w-full !max-w-96"
       @change="handleDateRangeChange"
     />
     <slot></slot>

apps/web-antd/src/layouts/auth.vue

@@ -8,12 +8,14 @@ import { $t } from '#/locales';
 
 const appName = computed(() => preferences.app.name);
 const logo = computed(() => preferences.logo.source);
+const logoDark = computed(() => preferences.logo.sourceDark);
 </script>
 
 <template>
   <AuthPageLayout
     :app-name="appName"
     :logo="logo"
+    :logo-dark="logoDark"
     :page-description="$t('authentication.pageDesc')"
     :page-title="$t('authentication.pageTitle')"
   >

apps/web-antd/src/utils/index.ts

@@ -1,2 +1,29 @@
+import type { Recordable } from '@vben/types';
+
 export * from './rangePickerProps';
 export * from './routerHelper';
+
+/**
+ * 查找数组对象的某个下标
+ * @param {Array} ary 查找的数组
+ * @param {Function} fn 判断的方法
+ */
+type Fn<T = any> = (item: T, index: number, array: Array<T>) => boolean;
+export const findIndex = <T = Recordable<any>>(
+  ary: Array<T>,
+  fn: Fn<T>,
+): number => {
+  if (ary.findIndex) {
+    return ary.findIndex((item, index, array) => fn(item, index, array));
+  }
+  let index = -1;
+  ary.some((item: T, i: number, ary: Array<T>) => {
+    const ret: boolean = fn(item, i, ary);
+    if (ret) {
+      index = i;
+      return true;
+    }
+    return false;
+  });
+  return index;
+};

apps/web-antd/src/utils/routerHelper.ts

@@ -1,3 +1,8 @@
+import type {
+  RouteLocationNormalized,
+  RouteRecordNormalized,
+} from 'vue-router';
+
 import { defineAsyncComponent } from 'vue';
 
 const modules = import.meta.glob('../views/**/*.{vue,tsx}');
@@ -14,3 +19,20 @@ export function registerComponent(componentPath: string) {
     }
   }
 }
+
+export const getRawRoute = (
+  route: RouteLocationNormalized,
+): RouteLocationNormalized => {
+  if (!route) return route;
+  const { matched, ...opt } = route;
+  return {
+    ...opt,
+    matched: (matched
+      ? matched.map((item) => ({
+          meta: item.meta,
+          name: item.name,
+          path: item.path,
+        }))
+      : undefined) as RouteRecordNormalized[],
+  };
+};

apps/web-antd/src/utils/useUpload.ts

@@ -0,0 +1,63 @@
+import { message } from 'ant-design-vue';
+
+enum UploadType {
+  Image = 'image',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+const useBeforeUpload = (type: UploadType, maxSizeMB: number) => {
+  const fn = (file: File): boolean => {
+    let allowTypes: string[] = [];
+    let name = '';
+
+    switch (type) {
+      case UploadType.Image: {
+        allowTypes = [
+          'image/jpeg',
+          'image/png',
+          'image/gif',
+          'image/bmp',
+          'image/jpg',
+        ];
+        maxSizeMB = 2;
+        name = '图片';
+        break;
+      }
+      case UploadType.Video: {
+        allowTypes = ['video/mp4'];
+        maxSizeMB = 10;
+        name = '视频';
+        break;
+      }
+      case UploadType.Voice: {
+        allowTypes = [
+          'audio/mp3',
+          'audio/mpeg',
+          'audio/wma',
+          'audio/wav',
+          'audio/amr',
+        ];
+        maxSizeMB = 2;
+        name = '语音';
+        break;
+      }
+    }
+    // 格式不正确
+    if (!allowTypes.includes(file.type)) {
+      message.error(`上传${name}格式不对!`);
+      return false;
+    }
+    // 大小不正确
+    if (file.size / 1024 / 1024 > maxSizeMB) {
+      message.error(`上传${name}大小不能超过${maxSizeMB}M!`);
+      return false;
+    }
+
+    return true;
+  };
+
+  return fn;
+};
+
+export { UploadType, useBeforeUpload };

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>