style: 对齐加料抽屉选项列表原型样式

apps/web-antd/src/views/product/addons/components/AddonEditorDrawer.vue

@@ -8,6 +8,8 @@ import type { AddonEditorForm } from '../types';
 
 import { onBeforeUnmount, watch } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+
 const props = defineProps<{
   form: AddonEditorForm;
   open: boolean;
@@ -70,7 +72,7 @@ onBeforeUnmount(() => {
       <div class="g-drawer-hd">
         <span class="g-drawer-title">{{ title }}</span>
         <button type="button" class="g-drawer-close" @click="closeDrawer">
-          ×
+          <IconifyIcon icon="lucide:x" />
         </button>
       </div>
 
@@ -157,14 +159,14 @@ onBeforeUnmount(() => {
           <div class="pad-opt-list">
             <div
               v-for="(item, index) in form.items"
-              :key="index"
+              :key="item.id || `addon-item-${index}`"
               class="pad-opt-row"
             >
               <input
                 class="pad-opt-name"
                 type="text"
                 :value="item.name"
-                placeholder="如：珍珠"
+                placeholder="请输入入选项名称"
                 @input="
                   (event) =>
                     emit(
@@ -208,7 +210,7 @@ onBeforeUnmount(() => {
                 class="pad-opt-del"
                 @click="emit('removeItem', index)"
               >
-                ×
+                <IconifyIcon icon="lucide:trash-2" />
               </button>
             </div>
           </div>
@@ -218,7 +220,8 @@ onBeforeUnmount(() => {
             class="g-btn pad-btn-dashed"
             @click="emit('addItem')"
           >
-            + 添加选项
+            <IconifyIcon icon="lucide:plus" />
+            添加选项
           </button>
         </div>
 

apps/web-antd/src/views/product/addons/styles/drawer.less

@@ -1,4 +1,9 @@
 .pad-editor-drawer {
+  .g-drawer-close .iconify {
+    width: 16px;
+    height: 16px;
+  }
+
   .g-form-group {
     margin-bottom: 16px;
   }
@@ -158,14 +163,14 @@
   }
 
   .pad-input-num {
-    width: 80px;
+    width: 84px;
   }
 
   .pad-opt-list-header {
     display: flex;
     gap: 8px;
     align-items: center;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
     font-size: 12px;
     font-weight: 600;
     color: #6b7280;
@@ -177,17 +182,17 @@
 
   .pad-opt-list-header .h-price,
   .pad-opt-list-header .h-stock {
-    width: 80px;
+    width: 120px;
   }
 
   .pad-opt-list-header .h-act {
-    width: 34px;
+    width: 30px;
   }
 
   .pad-opt-list {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 12px;
   }
 
   .pad-opt-row {
@@ -196,46 +201,74 @@
     align-items: center;
   }
 
+  .pad-opt-row input {
+    height: 34px;
+    padding: 0 12px;
+    font-size: 13px;
+    color: #1a1a2e;
+    outline: none;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    transition: var(--g-transition);
+  }
+
+  .pad-opt-row input:focus {
+    border-color: #1677ff;
+    box-shadow: 0 0 0 3px rgb(22 119 255 / 12%);
+  }
+
   .pad-opt-name {
     flex: 1;
   }
 
   .pad-opt-price,
   .pad-opt-stock {
-    width: 80px;
+    width: 120px;
   }
 
   .pad-opt-del {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 34px;
+    width: 30px;
-    height: 34px;
+    height: 30px;
-    font-size: 14px;
     color: #9ca3af;
     cursor: pointer;
-    background: #fff;
+    background: none;
-    border: 1px solid #e5e7eb;
+    border: none;
     border-radius: 8px;
-    transition: all 0.2s ease;
+    transition: var(--g-transition);
+  }
+
+  .pad-opt-del .iconify {
+    width: 15px;
+    height: 15px;
   }
 
   .pad-opt-del:hover {
     color: #ef4444;
     background: #fef2f2;
-    border-color: #ef4444;
   }
 
   .pad-btn-dashed {
+    gap: 8px;
     justify-content: center;
     width: 100%;
     margin-top: 8px;
+    box-shadow: none;
     color: #9ca3af;
     border-style: dashed;
+    border-color: #d1d5db;
+  }
+
+  .pad-btn-dashed .iconify {
+    width: 14px;
+    height: 14px;
   }
 
   .pad-btn-dashed:hover {
     color: #1677ff;
     border-color: #1677ff;
+    box-shadow: none;
   }
 }