diff --git a/apps/web-antd/src/api/product/index.ts b/apps/web-antd/src/api/product/index.ts
index 11a49c8..aa84c9e 100644
--- a/apps/web-antd/src/api/product/index.ts
+++ b/apps/web-antd/src/api/product/index.ts
@@ -313,6 +313,7 @@ export interface ProductAddonItemDto {
   id: string;
   name: string;
   price: number;
+  stock: number;
   sort: number;
   status: ProductSwitchStatus;
 }
@@ -350,6 +351,7 @@ export interface SaveProductAddonGroupDto {
     price: number;
     sort: number;
     status: ProductSwitchStatus;
+    stock: number;
   }>;
   maxSelect: number;
   minSelect: number;
@@ -374,6 +376,13 @@ export interface ChangeProductAddonGroupStatusDto {
   storeId: string;
 }
 
+/** 绑定加料组商品参数。 */
+export interface BindProductAddonGroupProductsDto {
+  groupId: string;
+  productIds: string[];
+  storeId: string;
+}
+
 /** 商品标签。 */
 export interface ProductLabelDto {
   color: string;
@@ -696,6 +705,16 @@ export async function changeProductAddonGroupStatusApi(
   return requestClient.post('/product/addon/group/status', data);
 }
 
+/** 绑定加料组商品。 */
+export async function bindProductAddonGroupProductsApi(
+  data: BindProductAddonGroupProductsDto,
+) {
+  return requestClient.post<ProductAddonGroupDto>(
+    '/product/addon/group/products/bind',
+    data,
+  );
+}
+
 /** 获取标签列表。 */
 export async function getProductLabelListApi(params: ProductLabelQuery) {
   return requestClient.get<ProductLabelDto[]>('/product/label/list', {
diff --git a/apps/web-antd/src/mock/product-extensions.ts b/apps/web-antd/src/mock/product-extensions.ts
index e638b4c..ba89b01 100644
--- a/apps/web-antd/src/mock/product-extensions.ts
+++ b/apps/web-antd/src/mock/product-extensions.ts
@@ -58,6 +58,7 @@ interface AddonItemRecord {
   id: string;
   name: string;
   price: number;
+  stock: number;
   sort: number;
   status: ProductSwitchStatus;
 }
@@ -378,6 +379,7 @@ function toAddonGroupItem(
         id: addon.id,
         name: addon.name,
         price: addon.price,
+        stock: addon.stock,
         sort: addon.sort,
         status: addon.status,
       })),
@@ -517,6 +519,7 @@ function createDefaultState(storeId: string): ProductExtensionStoreState {
           id: createId('addon-item', storeId),
           name: '加鸡蛋',
           price: 2,
+          stock: 160,
           sort: 1,
           status: 'enabled',
         },
@@ -524,6 +527,7 @@ function createDefaultState(storeId: string): ProductExtensionStoreState {
           id: createId('addon-item', storeId),
           name: '加饭',
           price: 3,
+          stock: 80,
           sort: 2,
           status: 'enabled',
         },
@@ -1067,6 +1071,7 @@ Mock.mock(
           id: normalizeText(current.id, createId('addon-item', storeId)),
           name: itemName,
           price: Number(normalizeNumber(current.price, 0, 0).toFixed(2)),
+          stock: normalizeInt(current.stock, 999, 0),
           sort: normalizeInt(current.sort, index + 1, 1),
           status: normalizeSwitchStatus(current.status, 'enabled'),
         };
@@ -1177,6 +1182,29 @@ Mock.mock(
   },
 );
 
+Mock.mock(
+  /\/product\/addon\/group\/products\/bind/,
+  'post',
+  (options: MockRequestOptions) => {
+    const body = parseBody(options);
+    const storeId = normalizeText(body.storeId);
+    const groupId = normalizeText(body.groupId);
+    if (!storeId || !groupId) {
+      return { code: 400, data: null, message: '参数不完整' };
+    }
+
+    const state = ensureStoreState(storeId);
+    const target = state.addonGroups.find((item) => item.id === groupId);
+    if (!target) return { code: 404, data: null, message: '加料组不存在' };
+
+    target.productIds = normalizeIdList(body.productIds).filter((productId) =>
+      state.products.some((item) => item.id === productId),
+    );
+    target.updatedAt = toDateTimeText(new Date());
+    return { code: 200, data: toAddonGroupItem(state, target) };
+  },
+);
+
 Mock.mock(
   /\/product\/label\/list(?:\?|$)/,
   'get',
diff --git a/apps/web-antd/src/views/product/addons/components/AddonEditorDrawer.vue b/apps/web-antd/src/views/product/addons/components/AddonEditorDrawer.vue
new file mode 100644
index 0000000..0ce064c
--- /dev/null
+++ b/apps/web-antd/src/views/product/addons/components/AddonEditorDrawer.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+/**
+ * 文件职责：加料组编辑抽屉。
+ * 1. 承载加料组基础字段和加料项编辑表单。
+ * 2. 对外抛出表单变更与保存事件。
+ */
+import type { AddonEditorForm } from '../types';
+
+import { onBeforeUnmount, watch } from 'vue';
+
+const props = defineProps<{
+  form: AddonEditorForm;
+  open: boolean;
+  submitText: string;
+  submitting: boolean;
+  title: string;
+}>();
+
+const emit = defineEmits<{
+  addItem: [];
+  close: [];
+  removeItem: [index: number];
+  setDescription: [value: string];
+  setItemName: [index: number, value: string];
+  setItemPrice: [index: number, value: number];
+  setItemStock: [index: number, value: number];
+  setMaxSelect: [value: number];
+  setMinSelect: [value: number];
+  setName: [value: string];
+  setRequired: [value: boolean];
+  submit: [];
+}>();
+
+function closeDrawer() {
+  emit('close');
+}
+
+function submit() {
+  if (props.submitting) return;
+  emit('submit');
+}
+
+function setBodyLock(locked: boolean) {
+  if (typeof document === 'undefined') return;
+  document.body.style.overflow = locked ? 'hidden' : '';
+}
+
+watch(
+  () => props.open,
+  (open) => {
+    setBodyLock(open);
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  setBodyLock(false);
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="g-drawer-mask" :class="{ open }" @click="closeDrawer"></div>
+
+    <div
+      class="g-drawer pad-editor-drawer"
+      :class="{ open }"
+      style="width: 520px"
+    >
+      <div class="g-drawer-hd">
+        <span class="g-drawer-title">{{ title }}</span>
+        <button type="button" class="g-drawer-close" @click="closeDrawer">
+          ×
+        </button>
+      </div>
+
+      <div class="g-drawer-bd">
+        <div class="g-form-group">
+          <label class="g-form-label required">组名称</label>
+          <input
+            type="text"
+            class="g-input"
+            :value="form.name"
+            maxlength="30"
+            placeholder="请输入加料组名称，如：加料、配菜"
+            @input="
+              (event) =>
+                emit('setName', (event.target as HTMLInputElement).value)
+            "
+          />
+        </div>
+
+        <div class="g-form-group">
+          <div class="g-toggle-wrap">
+            <label class="g-toggle-input">
+              <input
+                type="checkbox"
+                :checked="form.required"
+                @change="
+                  (event) =>
+                    emit(
+                      'setRequired',
+                      (event.target as HTMLInputElement).checked,
+                    )
+                "
+              />
+              <span class="g-toggle-sl"></span>
+            </label>
+            <span class="g-toggle-label">是否必选</span>
+          </div>
+        </div>
+
+        <div class="pad-sel-row">
+          <span>选择数量：最少</span>
+          <input
+            class="g-input pad-input-num"
+            type="number"
+            min="0"
+            :value="form.minSelect"
+            @input="
+              (event) =>
+                emit(
+                  'setMinSelect',
+                  Number((event.target as HTMLInputElement).value || 0),
+                )
+            "
+          />
+          <span>最多</span>
+          <input
+            class="g-input pad-input-num"
+            type="number"
+            min="1"
+            :value="form.maxSelect"
+            @input="
+              (event) =>
+                emit(
+                  'setMaxSelect',
+                  Number((event.target as HTMLInputElement).value || 1),
+                )
+            "
+          />
+        </div>
+
+        <div class="g-form-group">
+          <label class="g-form-label required">选项列表</label>
+          <div class="g-hint" style="margin-bottom: 8px">
+            每个选项可设置加价和库存，加价为 0 表示免费
+          </div>
+
+          <div class="pad-opt-list-header">
+            <span class="h-name">名称</span>
+            <span class="h-price">加价(¥)</span>
+            <span class="h-stock">库存</span>
+            <span class="h-act"></span>
+          </div>
+
+          <div class="pad-opt-list">
+            <div
+              v-for="(item, index) in form.items"
+              :key="index"
+              class="pad-opt-row"
+            >
+              <input
+                class="pad-opt-name"
+                type="text"
+                :value="item.name"
+                placeholder="如：珍珠"
+                @input="
+                  (event) =>
+                    emit(
+                      'setItemName',
+                      index,
+                      (event.target as HTMLInputElement).value,
+                    )
+                "
+              />
+              <input
+                class="pad-opt-price"
+                type="number"
+                min="0"
+                step="0.01"
+                :value="item.price"
+                @input="
+                  (event) =>
+                    emit(
+                      'setItemPrice',
+                      index,
+                      Number((event.target as HTMLInputElement).value || 0),
+                    )
+                "
+              />
+              <input
+                class="pad-opt-stock"
+                type="number"
+                min="0"
+                :value="item.stock"
+                @input="
+                  (event) =>
+                    emit(
+                      'setItemStock',
+                      index,
+                      Number((event.target as HTMLInputElement).value || 0),
+                    )
+                "
+              />
+              <button
+                type="button"
+                class="pad-opt-del"
+                @click="emit('removeItem', index)"
+              >
+                ×
+              </button>
+            </div>
+          </div>
+
+          <button
+            type="button"
+            class="g-btn pad-btn-dashed"
+            @click="emit('addItem')"
+          >
+            + 添加选项
+          </button>
+        </div>
+
+        <div class="g-form-group">
+          <label class="g-form-label">备注</label>
+          <textarea
+            class="g-textarea"
+            rows="2"
+            maxlength="120"
+            :value="form.description"
+            placeholder="可选，如：仅限堂食商品使用"
+            @input="
+              (event) =>
+                emit(
+                  'setDescription',
+                  (event.target as HTMLTextAreaElement).value,
+                )
+            "
+          ></textarea>
+        </div>
+      </div>
+
+      <div class="g-drawer-ft">
+        <button type="button" class="g-btn" @click="closeDrawer">取消</button>
+        <button
+          type="button"
+          class="g-btn g-btn-primary"
+          :disabled="submitting"
+          @click="submit"
+        >
+          {{ submitText }}
+        </button>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/apps/web-antd/src/views/product/addons/components/AddonGroupCard.vue b/apps/web-antd/src/views/product/addons/components/AddonGroupCard.vue
new file mode 100644
index 0000000..90efdee
--- /dev/null
+++ b/apps/web-antd/src/views/product/addons/components/AddonGroupCard.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+/**
+ * 文件职责：加料组卡片。
+ * 1. 展示加料组信息、选项表格与库存状态。
+ * 2. 对外抛出编辑、关联商品、改名、移除等操作事件。
+ */
+import type { AddonGroupCardViewModel } from '../types';
+
+const props = defineProps<{
+  item: AddonGroupCardViewModel;
+}>();
+
+const emit = defineEmits<{
+  bindProducts: [item: AddonGroupCardViewModel];
+  edit: [item: AddonGroupCardViewModel];
+  enable: [item: AddonGroupCardViewModel];
+  removeGroup: [item: AddonGroupCardViewModel];
+  removeItem: [payload: { group: AddonGroupCardViewModel; itemId: string }];
+  renameItem: [payload: { group: AddonGroupCardViewModel; itemId: string }];
+}>();
+
+function formatPrice(value: number) {
+  return `+¥${value.toFixed(2)}`;
+}
+
+function getRuleText() {
+  if (
+    props.item.required &&
+    props.item.minSelect === 1 &&
+    props.item.maxSelect === 1
+  ) {
+    return '必须选1';
+  }
+  return `最少选${props.item.minSelect}，最多选${props.item.maxSelect}`;
+}
+
+function getStockText(stock: number) {
+  return stock <= 20 ? '偏少' : '充足';
+}
+
+function getStockClass(stock: number) {
+  return stock <= 20 ? 'pad-stock-low' : 'pad-stock-ok';
+}
+</script>
+
+<template>
+  <div class="pad-card" :class="{ disabled: item.status === 'disabled' }">
+    <div class="pad-card-header">
+      <span class="pad-card-name">{{ item.name }}</span>
+      <span
+        class="g-tag"
+        :class="
+          item.status === 'disabled'
+            ? 'pad-tag-disabled'
+            : item.required
+              ? 'pad-tag-required'
+              : 'pad-tag-optional'
+        "
+      >
+        {{
+          item.status === 'disabled'
+            ? '已停用'
+            : item.required
+              ? '必选'
+              : '可选'
+        }}
+      </span>
+      <span class="pad-rule">{{ getRuleText() }}</span>
+    </div>
+
+    <table class="pad-table">
+      <thead>
+        <tr>
+          <th>选项名称</th>
+          <th>加价</th>
+          <th>库存</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="option in item.items" :key="option.id">
+          <td>{{ option.name }}</td>
+          <td>{{ formatPrice(option.price) }}</td>
+          <td>
+            <span :class="getStockClass(option.stock)">
+              {{ getStockText(option.stock) }}
+            </span>
+          </td>
+          <td>
+            <button
+              type="button"
+              class="g-action"
+              @click="emit('renameItem', { group: item, itemId: option.id })"
+            >
+              改名
+            </button>
+            <button
+              type="button"
+              class="g-action g-action-danger"
+              @click="emit('removeItem', { group: item, itemId: option.id })"
+            >
+              移除
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="pad-assoc">已关联 {{ item.productCount }} 个商品</div>
+
+    <div class="pad-card-footer">
+      <button type="button" class="g-action" @click="emit('edit', item)">
+        编辑
+      </button>
+      <button
+        v-if="item.status === 'disabled'"
+        type="button"
+        class="g-action"
+        @click="emit('enable', item)"
+      >
+        启用
+      </button>
+      <button
+        v-else
+        type="button"
+        class="g-action"
+        @click="emit('bindProducts', item)"
+      >
+        关联商品
+      </button>
+      <button
+        type="button"
+        class="g-action g-action-danger"
+        @click="emit('removeGroup', item)"
+      >
+        删除
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/product/addons/components/AddonProductPickerModal.vue b/apps/web-antd/src/views/product/addons/components/AddonProductPickerModal.vue
new file mode 100644
index 0000000..d0eaf32
--- /dev/null
+++ b/apps/web-antd/src/views/product/addons/components/AddonProductPickerModal.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * 文件职责：加料组关联商品弹窗。
+ */
+import type { ProductPickerItemDto } from '#/api/product';
+
+import { Input, Modal } from 'ant-design-vue';
+
+interface Props {
+  keyword: string;
+  loading: boolean;
+  open: boolean;
+  products: ProductPickerItemDto[];
+  selectedIds: string[];
+  submitting: boolean;
+  title: string;
+}
+
+interface Emits {
+  (event: 'close'): void;
+  (event: 'search'): void;
+  (event: 'setKeyword', value: string): void;
+  (event: 'submit'): void;
+  (event: 'toggleProduct', id: string): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+function setKeyword(value: string) {
+  emit('setKeyword', value);
+}
+</script>
+
+<template>
+  <Modal
+    :open="props.open"
+    :title="title"
+    ok-text="确认关联"
+    cancel-text="取消"
+    :confirm-loading="props.submitting"
+    :ok-button-props="{ disabled: props.selectedIds.length === 0 }"
+    @ok="emit('submit')"
+    @cancel="emit('close')"
+  >
+    <div class="pad-picker-search">
+      <Input
+        :value="props.keyword"
+        placeholder="搜索商品名称/SPU"
+        allow-clear
+        @update:value="setKeyword"
+        @press-enter="emit('search')"
+      />
+      <button type="button" class="pad-btn pad-btn-sm" @click="emit('search')">
+        搜索
+      </button>
+    </div>
+
+    <div class="pad-picker-list">
+      <div v-if="props.loading" class="pad-picker-empty">加载中...</div>
+      <div v-else-if="props.products.length === 0" class="pad-picker-empty">
+        暂无可选商品
+      </div>
+      <label
+        v-for="item in props.products"
+        v-else
+        :key="`picker-${item.id}`"
+        class="pad-picker-item"
+      >
+        <input
+          :checked="props.selectedIds.includes(item.id)"
+          type="checkbox"
+          @change="emit('toggleProduct', item.id)"
+        />
+        <span class="name">{{ item.name }}</span>
+        <span class="spu">{{ item.spuCode }}</span>
+        <span class="price">¥{{ item.price.toFixed(2) }}</span>
+      </label>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/product/addons/composables/useProductAddonsPage.ts b/apps/web-antd/src/views/product/addons/composables/useProductAddonsPage.ts
new file mode 100644
index 0000000..b9a7ca6
--- /dev/null
+++ b/apps/web-antd/src/views/product/addons/composables/useProductAddonsPage.ts
@@ -0,0 +1,610 @@
+import type {
+  AddonEditorForm,
+  AddonGroupCardViewModel,
+  AddonItemForm,
+} from '../types';
+
+import type { ProductAddonGroupDto, ProductPickerItemDto } from '#/api/product';
+import type { StoreListItemDto } from '#/api/store';
+
+/**
+ * 文件职责：加料管理页面状态与行为编排。
+ * 1. 管理门店、加料组卡片、统计与筛选状态。
+ * 2. 封装加料组新增编辑、选项改名移除、关联商品流程。
+ */
+import { computed, h, onMounted, reactive, ref, watch } from 'vue';
+
+import { Input, message, Modal } from 'ant-design-vue';
+
+import {
+  bindProductAddonGroupProductsApi,
+  changeProductAddonGroupStatusApi,
+  deleteProductAddonGroupApi,
+  getProductAddonGroupListApi,
+  saveProductAddonGroupApi,
+  searchProductPickerApi,
+} from '#/api/product';
+import { getStoreListApi } from '#/api/store';
+
+const DEFAULT_ITEM: AddonItemForm = {
+  id: '',
+  name: '',
+  price: 0,
+  stock: 999,
+  sort: 1,
+  status: 'enabled',
+};
+
+export function useProductAddonsPage() {
+  const stores = ref<StoreListItemDto[]>([]);
+  const selectedStoreId = ref('');
+  const isStoreLoading = ref(false);
+
+  const rows = ref<AddonGroupCardViewModel[]>([]);
+  const isLoading = ref(false);
+  const keyword = ref('');
+
+  const isDrawerOpen = ref(false);
+  const isDrawerSubmitting = ref(false);
+  const drawerMode = ref<'create' | 'edit'>('create');
+  const editingGroupId = ref('');
+  const editingGroupName = ref('');
+  const editingProductIds = ref<string[]>([]);
+
+  const form = reactive<AddonEditorForm>({
+    name: '',
+    description: '',
+    required: false,
+    minSelect: 0,
+    maxSelect: 1,
+    sort: 1,
+    status: 'enabled',
+    items: [{ ...DEFAULT_ITEM }],
+  });
+
+  const isPickerOpen = ref(false);
+  const isPickerLoading = ref(false);
+  const isPickerSubmitting = ref(false);
+  const pickerTitle = ref('关联商品');
+  const pickerKeyword = ref('');
+  const pickerProducts = ref<ProductPickerItemDto[]>([]);
+  const pickerSelectedIds = ref<string[]>([]);
+  const bindingGroupId = ref('');
+
+  const storeOptions = computed(() =>
+    stores.value.map((item) => ({
+      label: item.name,
+      value: item.id,
+    })),
+  );
+
+  const filteredRows = computed(() => {
+    const normalized = keyword.value.trim().toLowerCase();
+    if (!normalized) return rows.value;
+    return rows.value.filter((item) =>
+      item.name.toLowerCase().includes(normalized),
+    );
+  });
+
+  const groupCount = computed(() => rows.value.length);
+
+  const optionCount = computed(() =>
+    rows.value.reduce((sum, item) => sum + item.items.length, 0),
+  );
+
+  const relatedProductCount = computed(() =>
+    rows.value.reduce((sum, item) => sum + item.productCount, 0),
+  );
+
+  const drawerTitle = computed(() =>
+    drawerMode.value === 'create'
+      ? '添加加料组'
+      : `编辑加料组 - ${editingGroupName.value}`,
+  );
+
+  const drawerSubmitText = computed(() =>
+    drawerMode.value === 'create' ? '确认保存' : '保存修改',
+  );
+
+  async function loadStores() {
+    isStoreLoading.value = true;
+    try {
+      const result = await getStoreListApi({
+        page: 1,
+        pageSize: 200,
+      });
+      stores.value = result.items ?? [];
+      if (stores.value.length === 0) {
+        selectedStoreId.value = '';
+        rows.value = [];
+        return;
+      }
+
+      const hasSelected = stores.value.some(
+        (item) => item.id === selectedStoreId.value,
+      );
+      if (!hasSelected) {
+        selectedStoreId.value = stores.value[0]?.id ?? '';
+      }
+    } catch (error) {
+      console.error(error);
+      message.error('加载门店失败');
+    } finally {
+      isStoreLoading.value = false;
+    }
+  }
+
+  async function loadAddonGroups() {
+    if (!selectedStoreId.value) {
+      rows.value = [];
+      return;
+    }
+
+    isLoading.value = true;
+    try {
+      const list = await getProductAddonGroupListApi({
+        storeId: selectedStoreId.value,
+      });
+      rows.value = list;
+    } catch (error) {
+      console.error(error);
+      rows.value = [];
+      message.error('加载加料组失败');
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  function setSelectedStoreId(value: string) {
+    selectedStoreId.value = value;
+  }
+
+  function setKeyword(value: string) {
+    keyword.value = value;
+  }
+
+  function setDrawerOpen(value: boolean) {
+    isDrawerOpen.value = value;
+  }
+
+  function setFormName(value: string) {
+    form.name = value;
+  }
+
+  function setFormDescription(value: string) {
+    form.description = value;
+  }
+
+  function setFormRequired(value: boolean) {
+    form.required = value;
+    if (value && form.minSelect < 1) {
+      form.minSelect = 1;
+    }
+  }
+
+  function setFormMinSelect(value: number) {
+    form.minSelect = Math.max(0, value);
+    if (form.required && form.minSelect < 1) {
+      form.minSelect = 1;
+    }
+  }
+
+  function setFormMaxSelect(value: number) {
+    form.maxSelect = Math.max(1, value);
+  }
+
+  function setItemName(index: number, value: string) {
+    const current = form.items[index];
+    if (!current) return;
+    current.name = value;
+  }
+
+  function setItemPrice(index: number, value: number) {
+    const current = form.items[index];
+    if (!current) return;
+    current.price = Number.isNaN(value) ? 0 : Math.max(0, value);
+  }
+
+  function setItemStock(index: number, value: number) {
+    const current = form.items[index];
+    if (!current) return;
+    current.stock = Number.isNaN(value) ? 0 : Math.max(0, Math.floor(value));
+  }
+
+  function addItem() {
+    form.items.push({
+      id: '',
+      name: '',
+      price: 0,
+      stock: 999,
+      sort: form.items.length + 1,
+      status: 'enabled',
+    });
+  }
+
+  function removeItem(index: number) {
+    if (form.items.length <= 1) {
+      message.warning('至少保留一个加料项');
+      return;
+    }
+    form.items.splice(index, 1);
+    form.items.forEach((item, idx) => {
+      item.sort = idx + 1;
+    });
+  }
+
+  function resetForm() {
+    editingGroupId.value = '';
+    editingGroupName.value = '';
+    editingProductIds.value = [];
+    form.name = '';
+    form.description = '';
+    form.required = false;
+    form.minSelect = 0;
+    form.maxSelect = 1;
+    form.sort = rows.value.length + 1;
+    form.status = 'enabled';
+    form.items = [{ ...DEFAULT_ITEM }];
+  }
+
+  function openCreateDrawer() {
+    drawerMode.value = 'create';
+    resetForm();
+    isDrawerOpen.value = true;
+  }
+
+  function openEditDrawer(item: AddonGroupCardViewModel) {
+    drawerMode.value = 'edit';
+    editingGroupId.value = item.id;
+    editingGroupName.value = item.name;
+    editingProductIds.value = [...item.productIds];
+    form.name = item.name;
+    form.description = item.description;
+    form.required = item.required;
+    form.minSelect = item.minSelect;
+    form.maxSelect = item.maxSelect;
+    form.sort = item.sort;
+    form.status = item.status;
+    form.items = item.items.map((option, index) => ({
+      id: option.id,
+      name: option.name,
+      price: option.price,
+      stock: option.stock,
+      sort: option.sort || index + 1,
+      status: option.status,
+    }));
+    if (form.items.length === 0) {
+      form.items = [{ ...DEFAULT_ITEM }];
+    }
+    isDrawerOpen.value = true;
+  }
+
+  async function submitDrawer() {
+    if (!selectedStoreId.value) return;
+    if (!form.name.trim()) {
+      message.warning('请输入加料组名称');
+      return;
+    }
+
+    const normalizedItems = form.items
+      .map((item, index) => ({
+        ...item,
+        name: item.name.trim(),
+        sort: index + 1,
+        price: Number(item.price.toFixed(2)),
+      }))
+      .filter((item) => item.name);
+    if (normalizedItems.length === 0) {
+      message.warning('至少保留一个加料项');
+      return;
+    }
+
+    const uniqueNames = new Set(
+      normalizedItems.map((item) => item.name.toLowerCase()),
+    );
+    if (uniqueNames.size !== normalizedItems.length) {
+      message.warning('加料项名称不能重复');
+      return;
+    }
+
+    if (form.maxSelect < form.minSelect) {
+      message.warning('最大可选数量不能小于最小可选数量');
+      return;
+    }
+
+    isDrawerSubmitting.value = true;
+    try {
+      await saveProductAddonGroupApi({
+        storeId: selectedStoreId.value,
+        id: editingGroupId.value || undefined,
+        name: form.name.trim(),
+        description: form.description.trim(),
+        required: form.required,
+        minSelect: form.minSelect,
+        maxSelect: form.maxSelect,
+        sort: form.sort,
+        status: form.status,
+        productIds: [...editingProductIds.value],
+        items: normalizedItems.map((item) => ({
+          id: item.id || undefined,
+          name: item.name,
+          price: item.price,
+          stock: item.stock,
+          sort: item.sort,
+          status: item.status,
+        })),
+      });
+      message.success(
+        drawerMode.value === 'create' ? '加料组已创建' : '加料组已更新',
+      );
+      isDrawerOpen.value = false;
+      await loadAddonGroups();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      isDrawerSubmitting.value = false;
+    }
+  }
+
+  function removeGroup(item: AddonGroupCardViewModel) {
+    if (!selectedStoreId.value) return;
+    Modal.confirm({
+      title: `确认删除加料组「${item.name}」吗？`,
+      okText: '确认删除',
+      cancelText: '取消',
+      async onOk() {
+        await deleteProductAddonGroupApi({
+          storeId: selectedStoreId.value,
+          groupId: item.id,
+        });
+        message.success('加料组已删除');
+        await loadAddonGroups();
+      },
+    });
+  }
+
+  async function enableGroup(item: AddonGroupCardViewModel) {
+    if (!selectedStoreId.value) return;
+    try {
+      await changeProductAddonGroupStatusApi({
+        storeId: selectedStoreId.value,
+        groupId: item.id,
+        status: 'enabled',
+      });
+      message.success('加料组已启用');
+      await loadAddonGroups();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function saveGroupInline(
+    group: AddonGroupCardViewModel,
+    items: ProductAddonGroupDto['items'],
+  ) {
+    if (!selectedStoreId.value) return;
+    await saveProductAddonGroupApi({
+      storeId: selectedStoreId.value,
+      id: group.id,
+      name: group.name,
+      description: group.description,
+      required: group.required,
+      minSelect: group.minSelect,
+      maxSelect: group.maxSelect,
+      sort: group.sort,
+      status: group.status,
+      productIds: [...group.productIds],
+      items: items.map((item, index) => ({
+        id: item.id || undefined,
+        name: item.name.trim(),
+        price: Number(item.price.toFixed(2)),
+        stock: item.stock,
+        sort: index + 1,
+        status: item.status,
+      })),
+    });
+  }
+
+  function renameItem(payload: {
+    group: AddonGroupCardViewModel;
+    itemId: string;
+  }) {
+    const currentItem = payload.group.items.find(
+      (item) => item.id === payload.itemId,
+    );
+    if (!currentItem) return;
+
+    let draftName = currentItem.name;
+    Modal.confirm({
+      title: `改名 - ${currentItem.name}`,
+      okText: '确认',
+      cancelText: '取消',
+      content: () =>
+        h(Input, {
+          value: draftName,
+          maxlength: 30,
+          placeholder: '请输入新名称',
+          'onUpdate:value': (value: string) => {
+            draftName = value;
+          },
+        }),
+      async onOk() {
+        const nextName = draftName.trim();
+        if (!nextName) {
+          message.warning('加料项名称不能为空');
+          throw new Error('invalid-name');
+        }
+
+        const nextItems = payload.group.items.map((item) =>
+          item.id === payload.itemId ? { ...item, name: nextName } : item,
+        );
+        const uniqueNames = new Set(
+          nextItems.map((item) => item.name.toLowerCase()),
+        );
+        if (uniqueNames.size !== nextItems.length) {
+          message.warning('加料项名称不能重复');
+          throw new Error('duplicate-name');
+        }
+
+        await saveGroupInline(payload.group, nextItems);
+        message.success('加料项名称已更新');
+        await loadAddonGroups();
+      },
+    });
+  }
+
+  function removeCardItem(payload: {
+    group: AddonGroupCardViewModel;
+    itemId: string;
+  }) {
+    if (payload.group.items.length <= 1) {
+      message.warning('至少保留一个加料项');
+      return;
+    }
+
+    const currentItem = payload.group.items.find(
+      (item) => item.id === payload.itemId,
+    );
+    if (!currentItem) return;
+
+    Modal.confirm({
+      title: `确认移除选项「${currentItem.name}」吗？`,
+      okText: '确认移除',
+      cancelText: '取消',
+      async onOk() {
+        const nextItems = payload.group.items.filter(
+          (item) => item.id !== payload.itemId,
+        );
+        await saveGroupInline(payload.group, nextItems);
+        message.success('加料项已移除');
+        await loadAddonGroups();
+      },
+    });
+  }
+
+  async function loadPickerProducts() {
+    if (!selectedStoreId.value) {
+      pickerProducts.value = [];
+      return;
+    }
+    isPickerLoading.value = true;
+    try {
+      pickerProducts.value = await searchProductPickerApi({
+        storeId: selectedStoreId.value,
+        keyword: pickerKeyword.value.trim() || undefined,
+        limit: 500,
+      });
+    } catch (error) {
+      console.error(error);
+      pickerProducts.value = [];
+      message.error('加载商品失败');
+    } finally {
+      isPickerLoading.value = false;
+    }
+  }
+
+  async function openBindProducts(item: AddonGroupCardViewModel) {
+    bindingGroupId.value = item.id;
+    pickerTitle.value = `关联商品 - ${item.name}`;
+    pickerKeyword.value = '';
+    pickerSelectedIds.value = [...item.productIds];
+    pickerProducts.value = [];
+    isPickerOpen.value = true;
+    await loadPickerProducts();
+  }
+
+  function setPickerOpen(value: boolean) {
+    isPickerOpen.value = value;
+  }
+
+  function setPickerKeyword(value: string) {
+    pickerKeyword.value = value;
+  }
+
+  function togglePickerProduct(id: string) {
+    if (pickerSelectedIds.value.includes(id)) {
+      pickerSelectedIds.value = pickerSelectedIds.value.filter(
+        (item) => item !== id,
+      );
+      return;
+    }
+    pickerSelectedIds.value = [...pickerSelectedIds.value, id];
+  }
+
+  async function submitPicker() {
+    if (!selectedStoreId.value || !bindingGroupId.value) return;
+
+    isPickerSubmitting.value = true;
+    try {
+      await bindProductAddonGroupProductsApi({
+        storeId: selectedStoreId.value,
+        groupId: bindingGroupId.value,
+        productIds: [...pickerSelectedIds.value],
+      });
+      message.success('关联商品已更新');
+      isPickerOpen.value = false;
+      await loadAddonGroups();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      isPickerSubmitting.value = false;
+    }
+  }
+
+  watch(selectedStoreId, () => {
+    keyword.value = '';
+    void loadAddonGroups();
+  });
+
+  onMounted(loadStores);
+
+  return {
+    addItem,
+    drawerSubmitText,
+    drawerTitle,
+    enableGroup,
+    filteredRows,
+    form,
+    groupCount,
+    isDrawerOpen,
+    isDrawerSubmitting,
+    isLoading,
+    isPickerLoading,
+    isPickerOpen,
+    isPickerSubmitting,
+    isStoreLoading,
+    keyword,
+    loadPickerProducts,
+    openBindProducts,
+    openCreateDrawer,
+    openEditDrawer,
+    optionCount,
+    pickerKeyword,
+    pickerProducts,
+    pickerSelectedIds,
+    pickerTitle,
+    relatedProductCount,
+    removeCardItem,
+    removeGroup,
+    removeItem,
+    renameItem,
+    selectedStoreId,
+    setDrawerOpen,
+    setFormDescription,
+    setFormMaxSelect,
+    setFormMinSelect,
+    setFormName,
+    setFormRequired,
+    setItemName,
+    setItemPrice,
+    setItemStock,
+    setKeyword,
+    setPickerKeyword,
+    setPickerOpen,
+    setSelectedStoreId,
+    storeOptions,
+    submitDrawer,
+    submitPicker,
+    togglePickerProduct,
+  };
+}
diff --git a/apps/web-antd/src/views/product/addons/index.vue b/apps/web-antd/src/views/product/addons/index.vue
index b3a5db1..79334f3 100644
--- a/apps/web-antd/src/views/product/addons/index.vue
+++ b/apps/web-antd/src/views/product/addons/index.vue
@@ -1,564 +1,164 @@
 <script setup lang="ts">
 /**
- * 文件职责：加料管理页面。
- * 1. 管理加料组、加料项配置。
- * 2. 管理加料组与商品关联。
+ * 文件职责：加料管理页面主视图。
+ * 1. 还原原型的工具栏、统计条、卡片列表与右侧抽屉。
+ * 2. 管理加料组及其关联商品。
  */
-import type { ProductSwitchStatus } from '#/api/product';
-import type { StoreListItemDto } from '#/api/store';
-
-import { computed, onMounted, reactive, ref, watch } from 'vue';
-
 import { Page } from '@vben/common-ui';
 
-import {
-  Button,
-  Card,
-  Divider,
-  Drawer,
-  Empty,
-  Form,
-  Input,
-  InputNumber,
-  message,
-  Modal,
-  Select,
-  Space,
-  Switch,
-  Table,
-  Tag,
-} from 'ant-design-vue';
+import { Button, Empty, Input, Select, Spin } from 'ant-design-vue';
 
-import {
-  changeProductAddonGroupStatusApi,
-  deleteProductAddonGroupApi,
-  getProductAddonGroupListApi,
-  saveProductAddonGroupApi,
-  searchProductPickerApi,
-} from '#/api/product';
-import { getStoreListApi } from '#/api/store';
+import AddonEditorDrawer from './components/AddonEditorDrawer.vue';
+import AddonGroupCard from './components/AddonGroupCard.vue';
+import AddonProductPickerModal from './components/AddonProductPickerModal.vue';
+import { useProductAddonsPage } from './composables/useProductAddonsPage';
 
-type StatusFilter = '' | ProductSwitchStatus;
-
-interface AddonItemForm {
-  id: string;
-  name: string;
-  price: number;
-  sort: number;
-  status: ProductSwitchStatus;
-}
-
-interface AddonGroupRow {
-  description: string;
-  id: string;
-  items: AddonItemForm[];
-  maxSelect: number;
-  minSelect: number;
-  name: string;
-  productCount: number;
-  productIds: string[];
-  required: boolean;
-  sort: number;
-  status: ProductSwitchStatus;
-  updatedAt: string;
-}
-
-const stores = ref<StoreListItemDto[]>([]);
-const selectedStoreId = ref('');
-const isStoreLoading = ref(false);
-
-const rows = ref<AddonGroupRow[]>([]);
-const isLoading = ref(false);
-const keyword = ref('');
-const statusFilter = ref<StatusFilter>('');
-
-const pickerOptions = ref<Array<{ label: string; value: string }>>([]);
-const isDrawerOpen = ref(false);
-const isDrawerSubmitting = ref(false);
-const editingGroupId = ref('');
-
-const form = reactive({
-  name: '',
-  description: '',
-  required: false,
-  minSelect: 0,
-  maxSelect: 1,
-  sort: 1,
-  status: 'enabled' as ProductSwitchStatus,
-  productIds: [] as string[],
-  items: [] as AddonItemForm[],
-});
-
-const storeOptions = computed(() =>
-  stores.value.map((item) => ({
-    label: item.name,
-    value: item.id,
-  })),
-);
-
-const statusOptions = [
-  { label: '全部状态', value: '' },
-  { label: '启用', value: 'enabled' },
-  { label: '停用', value: 'disabled' },
-];
-
-const drawerTitle = computed(() =>
-  editingGroupId.value ? '编辑加料组' : '新增加料组',
-);
-
-/** 控制抽屉开关。 */
-function setDrawerOpen(value: boolean) {
-  isDrawerOpen.value = value;
-}
-
-/** 加载门店列表。 */
-async function loadStores() {
-  isStoreLoading.value = true;
-  try {
-    const result = await getStoreListApi({
-      page: 1,
-      pageSize: 200,
-    });
-    stores.value = result.items ?? [];
-    if (stores.value.length === 0) {
-      selectedStoreId.value = '';
-      return;
-    }
-
-    const hasSelected = stores.value.some(
-      (item) => item.id === selectedStoreId.value,
-    );
-    if (!hasSelected) {
-      selectedStoreId.value = stores.value[0]?.id ?? '';
-    }
-  } catch (error) {
-    console.error(error);
-    message.error('加载门店失败');
-  } finally {
-    isStoreLoading.value = false;
-  }
-}
-
-/** 加载加料组列表。 */
-async function loadAddonGroups() {
-  if (!selectedStoreId.value) {
-    rows.value = [];
-    return;
-  }
-
-  isLoading.value = true;
-  try {
-    const result = await getProductAddonGroupListApi({
-      storeId: selectedStoreId.value,
-      keyword: keyword.value.trim() || undefined,
-      status: (statusFilter.value || undefined) as
-        | ProductSwitchStatus
-        | undefined,
-    });
-    rows.value = result as AddonGroupRow[];
-  } catch (error) {
-    console.error(error);
-    rows.value = [];
-    message.error('加载加料组失败');
-  } finally {
-    isLoading.value = false;
-  }
-}
-
-/** 加载商品选择器。 */
-async function loadPickerOptions() {
-  if (!selectedStoreId.value) {
-    pickerOptions.value = [];
-    return;
-  }
-  try {
-    const list = await searchProductPickerApi({
-      storeId: selectedStoreId.value,
-      limit: 500,
-    });
-    pickerOptions.value = list.map((item) => ({
-      label: `${item.name}（${item.spuCode}）`,
-      value: item.id,
-    }));
-  } catch (error) {
-    console.error(error);
-    pickerOptions.value = [];
-    message.error('加载商品失败');
-  }
-}
-
-/** 重置表单。 */
-function resetForm() {
-  editingGroupId.value = '';
-  form.name = '';
-  form.description = '';
-  form.required = false;
-  form.minSelect = 0;
-  form.maxSelect = 1;
-  form.sort = rows.value.length + 1;
-  form.status = 'enabled';
-  form.productIds = [];
-  form.items = [
-    {
-      id: '',
-      name: '',
-      price: 0,
-      sort: 1,
-      status: 'enabled',
-    },
-  ];
-}
-
-/** 打开新增抽屉。 */
-async function openCreateDrawer() {
-  resetForm();
-  await loadPickerOptions();
-  isDrawerOpen.value = true;
-}
-
-/** 打开编辑抽屉。 */
-async function openEditDrawer(row: AddonGroupRow) {
-  editingGroupId.value = row.id;
-  form.name = row.name;
-  form.description = row.description;
-  form.required = row.required;
-  form.minSelect = row.minSelect;
-  form.maxSelect = row.maxSelect;
-  form.sort = row.sort;
-  form.status = row.status;
-  form.productIds = [...row.productIds];
-  form.items = row.items.map((item) => ({ ...item }));
-  if (form.items.length === 0) {
-    form.items = [{ id: '', name: '', price: 0, sort: 1, status: 'enabled' }];
-  }
-  await loadPickerOptions();
-  isDrawerOpen.value = true;
-}
-
-/** 添加加料项。 */
-function addAddonItem() {
-  form.items.push({
-    id: '',
-    name: '',
-    price: 0,
-    sort: form.items.length + 1,
-    status: 'enabled',
-  });
-}
-
-/** 删除加料项。 */
-function removeAddonItem(index: number) {
-  if (form.items.length <= 1) {
-    message.warning('至少保留一个加料项');
-    return;
-  }
-  form.items.splice(index, 1);
-  form.items.forEach((item, idx) => {
-    item.sort = idx + 1;
-  });
-}
-
-/** 保存加料组。 */
-async function submitDrawer() {
-  if (!selectedStoreId.value) return;
-  if (!form.name.trim()) {
-    message.warning('请输入加料组名称');
-    return;
-  }
-  if (form.items.some((item) => !item.name.trim())) {
-    message.warning('加料项名称不能为空');
-    return;
-  }
-  if (form.maxSelect < form.minSelect) {
-    message.warning('最大可选数量不能小于最小可选数量');
-    return;
-  }
-
-  isDrawerSubmitting.value = true;
-  try {
-    await saveProductAddonGroupApi({
-      storeId: selectedStoreId.value,
-      id: editingGroupId.value || undefined,
-      name: form.name.trim(),
-      description: form.description.trim(),
-      required: form.required,
-      minSelect: form.minSelect,
-      maxSelect: form.maxSelect,
-      sort: form.sort,
-      status: form.status,
-      productIds: [...form.productIds],
-      items: form.items.map((item) => ({
-        id: item.id || undefined,
-        name: item.name.trim(),
-        price: item.price,
-        sort: item.sort,
-        status: item.status,
-      })),
-    });
-    message.success(editingGroupId.value ? '加料组已更新' : '加料组已创建');
-    isDrawerOpen.value = false;
-    await loadAddonGroups();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    isDrawerSubmitting.value = false;
-  }
-}
-
-/** 删除加料组。 */
-function removeAddonGroup(row: AddonGroupRow) {
-  if (!selectedStoreId.value) return;
-  Modal.confirm({
-    title: `确认删除加料组「${row.name}」吗？`,
-    async onOk() {
-      await deleteProductAddonGroupApi({
-        storeId: selectedStoreId.value,
-        groupId: row.id,
-      });
-      message.success('加料组已删除');
-      await loadAddonGroups();
-    },
-  });
-}
-
-/** 切换加料组状态。 */
-async function toggleAddonStatus(row: AddonGroupRow, checked: boolean) {
-  if (!selectedStoreId.value) return;
-  await changeProductAddonGroupStatusApi({
-    storeId: selectedStoreId.value,
-    groupId: row.id,
-    status: checked ? 'enabled' : 'disabled',
-  });
-  row.status = checked ? 'enabled' : 'disabled';
-  message.success('状态已更新');
-}
-
-/** 重置筛选。 */
-function resetFilters() {
-  keyword.value = '';
-  statusFilter.value = '';
-  loadAddonGroups();
-}
-
-watch(selectedStoreId, loadAddonGroups);
-
-onMounted(loadStores);
+const {
+  addItem,
+  drawerSubmitText,
+  drawerTitle,
+  enableGroup,
+  filteredRows,
+  form,
+  groupCount,
+  isDrawerOpen,
+  isDrawerSubmitting,
+  isLoading,
+  isPickerLoading,
+  isPickerOpen,
+  isPickerSubmitting,
+  isStoreLoading,
+  keyword,
+  loadPickerProducts,
+  openBindProducts,
+  openCreateDrawer,
+  openEditDrawer,
+  optionCount,
+  pickerKeyword,
+  pickerProducts,
+  pickerSelectedIds,
+  pickerTitle,
+  relatedProductCount,
+  removeCardItem,
+  removeGroup,
+  removeItem,
+  renameItem,
+  selectedStoreId,
+  setDrawerOpen,
+  setFormDescription,
+  setFormMaxSelect,
+  setFormMinSelect,
+  setFormName,
+  setFormRequired,
+  setItemName,
+  setItemPrice,
+  setItemStock,
+  setKeyword,
+  setPickerKeyword,
+  setPickerOpen,
+  setSelectedStoreId,
+  storeOptions,
+  submitDrawer,
+  submitPicker,
+  togglePickerProduct,
+} = useProductAddonsPage();
 </script>
 
 <template>
-  <Page title="加料管理" content-class="space-y-4 page-product-addons">
-    <Card :bordered="false">
-      <Space wrap>
+  <Page title="加料管理" content-class="page-product-addons">
+    <div class="pad-page">
+      <div class="pad-toolbar">
         <Select
-          v-model:value="selectedStoreId"
+          class="pad-store-select"
+          :value="selectedStoreId"
           :options="storeOptions"
           :loading="isStoreLoading"
-          style="width: 240px"
           placeholder="请选择门店"
+          @update:value="(value) => setSelectedStoreId(String(value ?? ''))"
         />
         <Input
-          v-model:value="keyword"
-          style="width: 220px"
-          placeholder="搜索加料组名称"
+          class="pad-search"
+          :value="keyword"
+          placeholder="搜索加料组名称…"
+          @update:value="setKeyword"
         />
-        <Select
-          v-model:value="statusFilter"
-          :options="statusOptions"
-          style="width: 140px"
-        />
-        <Button type="primary" @click="loadAddonGroups">查询</Button>
-        <Button @click="resetFilters">重置</Button>
-        <Button type="primary" @click="openCreateDrawer">新增加料组</Button>
-      </Space>
-    </Card>
+        <span class="pad-spacer"></span>
+        <Button type="primary" @click="openCreateDrawer">+ 添加加料组</Button>
+      </div>
 
-    <Card v-if="!selectedStoreId" :bordered="false">
-      <Empty description="暂无门店，请先创建门店" />
-    </Card>
+      <div v-if="selectedStoreId" class="pad-stats">
+        <span>
+          加料组 <strong>{{ groupCount }}</strong>
+        </span>
+        <span>
+          选项总数 <strong>{{ optionCount }}</strong>
+        </span>
+        <span>
+          关联商品 <strong>{{ relatedProductCount }}</strong>
+        </span>
+      </div>
 
-    <Card v-else :bordered="false">
-      <Table
-        row-key="id"
-        :data-source="rows"
-        :loading="isLoading"
-        :pagination="false"
-        size="middle"
-      >
-        <Table.Column
-          title="加料组名称"
-          data-index="name"
-          key="name"
-          :width="180"
-        />
-        <Table.Column title="加料项" key="items">
-          <template #default="{ record }">
-            <Space wrap size="small">
-              <Tag v-for="item in record.items" :key="item.id || item.name">
-                {{ item.name }}（+{{ item.price }}）
-              </Tag>
-            </Space>
-          </template>
-        </Table.Column>
-        <Table.Column title="选择规则" key="rule" :width="160">
-          <template #default="{ record }">
-            {{ record.required ? '必选' : '非必选' }}，{{ record.minSelect }}~{{
-              record.maxSelect
-            }}
-          </template>
-        </Table.Column>
-        <Table.Column
-          title="关联商品数"
-          data-index="productCount"
-          key="productCount"
-          :width="100"
-        />
-        <Table.Column title="状态" key="status" :width="90">
-          <template #default="{ record }">
-            <Switch
-              :checked="record.status === 'enabled'"
-              size="small"
-              @change="(checked) => toggleAddonStatus(record, checked === true)"
-            />
-          </template>
-        </Table.Column>
-        <Table.Column
-          title="更新时间"
-          data-index="updatedAt"
-          key="updatedAt"
-          :width="170"
-        />
-        <Table.Column title="操作" key="action" :width="170">
-          <template #default="{ record }">
-            <Space size="small">
-              <Button size="small" @click="openEditDrawer(record)">编辑</Button>
-              <Button danger size="small" @click="removeAddonGroup(record)">
-                删除
-              </Button>
-            </Space>
-          </template>
-        </Table.Column>
-      </Table>
-    </Card>
+      <div v-if="!selectedStoreId" class="pad-empty">
+        暂无门店，请先创建门店
+      </div>
 
-    <Drawer
+      <Spin v-else :spinning="isLoading">
+        <template v-if="filteredRows.length > 0">
+          <AddonGroupCard
+            v-for="item in filteredRows"
+            :key="item.id"
+            :item="item"
+            @edit="openEditDrawer"
+            @bind-products="openBindProducts"
+            @remove-group="removeGroup"
+            @enable="enableGroup"
+            @rename-item="renameItem"
+            @remove-item="removeCardItem"
+          />
+        </template>
+        <div v-else class="pad-empty">
+          <Empty description="暂无加料组" />
+        </div>
+      </Spin>
+    </div>
+
+    <AddonEditorDrawer
       :open="isDrawerOpen"
       :title="drawerTitle"
-      width="620"
-      :destroy-on-close="true"
-      @update:open="setDrawerOpen"
-    >
-      <Form layout="vertical">
-        <Form.Item label="加料组名称" required>
-          <Input v-model:value="form.name" :maxlength="30" show-count />
-        </Form.Item>
-        <Form.Item label="描述">
-          <Input v-model:value="form.description" :maxlength="100" show-count />
-        </Form.Item>
-        <Form.Item label="关联商品">
-          <Select
-            v-model:value="form.productIds"
-            mode="multiple"
-            :options="pickerOptions"
-            placeholder="请选择商品"
-          />
-        </Form.Item>
+      :submit-text="drawerSubmitText"
+      :submitting="isDrawerSubmitting"
+      :form="form"
+      @close="setDrawerOpen(false)"
+      @set-name="setFormName"
+      @set-description="setFormDescription"
+      @set-required="setFormRequired"
+      @set-min-select="setFormMinSelect"
+      @set-max-select="setFormMaxSelect"
+      @set-item-name="setItemName"
+      @set-item-price="setItemPrice"
+      @set-item-stock="setItemStock"
+      @add-item="addItem"
+      @remove-item="removeItem"
+      @submit="submitDrawer"
+    />
 
-        <Form.Item label="是否必选">
-          <Switch v-model:checked="form.required" />
-        </Form.Item>
-
-        <Space style="display: flex; width: 100%">
-          <Form.Item label="最少可选" style="flex: 1">
-            <InputNumber
-              v-model:value="form.minSelect"
-              :min="0"
-              style="width: 100%"
-            />
-          </Form.Item>
-          <Form.Item label="最多可选" style="flex: 1">
-            <InputNumber
-              v-model:value="form.maxSelect"
-              :min="1"
-              style="width: 100%"
-            />
-          </Form.Item>
-        </Space>
-
-        <Divider orientation="left">加料项</Divider>
-        <div
-          v-for="(item, index) in form.items"
-          :key="index"
-          class="addon-item-row"
-        >
-          <Input v-model:value="item.name" placeholder="加料项名称，如：珍珠" />
-          <InputNumber
-            v-model:value="item.price"
-            :min="0"
-            :step="0.5"
-            style="width: 120px"
-            placeholder="加价"
-          />
-          <Select
-            v-model:value="item.status"
-            style="width: 110px"
-            :options="[
-              { label: '启用', value: 'enabled' },
-              { label: '停用', value: 'disabled' },
-            ]"
-          />
-          <Button danger @click="removeAddonItem(index)">删除</Button>
-        </div>
-        <Button @click="addAddonItem">新增加料项</Button>
-
-        <Divider />
-        <Space style="display: flex; width: 100%">
-          <Form.Item label="排序" style="flex: 1">
-            <InputNumber
-              v-model:value="form.sort"
-              :min="1"
-              style="width: 100%"
-            />
-          </Form.Item>
-          <Form.Item label="状态" style="flex: 1">
-            <Select
-              v-model:value="form.status"
-              :options="[
-                { label: '启用', value: 'enabled' },
-                { label: '停用', value: 'disabled' },
-              ]"
-            />
-          </Form.Item>
-        </Space>
-      </Form>
-
-      <template #footer>
-        <Space>
-          <Button @click="setDrawerOpen(false)">取消</Button>
-          <Button
-            type="primary"
-            :loading="isDrawerSubmitting"
-            @click="submitDrawer"
-          >
-            保存
-          </Button>
-        </Space>
-      </template>
-    </Drawer>
+    <AddonProductPickerModal
+      :open="isPickerOpen"
+      :title="pickerTitle"
+      :loading="isPickerLoading"
+      :submitting="isPickerSubmitting"
+      :keyword="pickerKeyword"
+      :products="pickerProducts"
+      :selected-ids="pickerSelectedIds"
+      @close="setPickerOpen(false)"
+      @set-keyword="setPickerKeyword"
+      @search="loadPickerProducts"
+      @toggle-product="togglePickerProduct"
+      @submit="submitPicker"
+    />
   </Page>
 </template>
 
-<style scoped lang="less">
-/* 文件职责：加料管理页面样式。 */
-.page-product-addons {
-  .addon-item-row {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    margin-bottom: 8px;
-  }
-
-  :deep(.ant-table-cell) {
-    vertical-align: middle;
-  }
-}
+<style lang="less">
+@import './styles/index.less';
 </style>
diff --git a/apps/web-antd/src/views/product/addons/styles/index.less b/apps/web-antd/src/views/product/addons/styles/index.less
new file mode 100644
index 0000000..1f74c20
--- /dev/null
+++ b/apps/web-antd/src/views/product/addons/styles/index.less
@@ -0,0 +1,620 @@
+/**
+ * 文件职责：加料管理页面样式。
+ * 1. 对齐原型的工具栏、统计条、卡片列表与抽屉视觉。
+ * 2. 提供加料项行编辑、库存状态和关联商品弹窗样式。
+ */
+:root {
+  --g-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --g-shadow-sm: 0 1px 2px rgb(0 0 0 / 4%);
+  --g-shadow-md: 0 4px 12px rgb(0 0 0 / 7%), 0 1px 3px rgb(0 0 0 / 4%);
+}
+
+.g-action {
+  padding: 0;
+  font-size: 13px;
+  color: #1677ff;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.g-action + .g-action {
+  margin-left: 12px;
+}
+
+.g-action-danger {
+  color: #ef4444;
+}
+
+.g-drawer-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  pointer-events: none;
+  background: rgb(0 0 0 / 45%);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.g-drawer-mask.open {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.g-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  box-shadow: -6px 0 16px rgb(0 0 0 / 8%);
+  transform: translateX(100%);
+  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
+}
+
+.g-drawer.open {
+  transform: translateX(0);
+}
+
+.g-drawer-hd {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 54px;
+  padding: 0 20px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.g-drawer-title {
+  flex: 1;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a2e;
+}
+
+.g-drawer-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 18px;
+  color: #999;
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 6px;
+}
+
+.g-drawer-close:hover {
+  color: #333;
+  background: #f5f5f5;
+}
+
+.g-drawer-bd {
+  flex: 1;
+  padding: 20px 24px;
+  overflow-y: auto;
+}
+
+.g-drawer-ft {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 12px 20px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.page-product-addons {
+  .pad-page {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-width: 960px;
+  }
+
+  .pad-toolbar {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    padding: 12px 16px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: var(--g-shadow-sm);
+  }
+
+  .pad-store-select {
+    width: 220px;
+  }
+
+  .pad-store-select .ant-select-selector {
+    height: 34px !important;
+    border-color: #e5e7eb !important;
+    border-radius: 8px !important;
+  }
+
+  .pad-store-select .ant-select-selection-item {
+    line-height: 32px !important;
+  }
+
+  .pad-search {
+    width: 220px;
+  }
+
+  .pad-search .ant-input {
+    height: 34px;
+    padding-left: 32px;
+    font-size: 13px;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
+      10px center no-repeat;
+    border-radius: 8px;
+  }
+
+  .pad-spacer {
+    flex: 1;
+  }
+
+  .pad-stats {
+    display: flex;
+    gap: 24px;
+    padding: 10px 16px;
+    font-size: 13px;
+    color: #4b5563;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: var(--g-shadow-sm);
+  }
+
+  .pad-stats span {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+
+  .pad-stats strong {
+    font-weight: 600;
+    color: #1a1a2e;
+  }
+
+  .pad-card {
+    padding: 20px;
+    margin-bottom: 16px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: var(--g-shadow-sm);
+    transition: var(--g-transition);
+  }
+
+  .pad-card:hover {
+    box-shadow: var(--g-shadow-md);
+  }
+
+  .pad-card.disabled {
+    opacity: 0.5;
+  }
+
+  .pad-card-header {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 14px;
+  }
+
+  .pad-card-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: #1a1a2e;
+  }
+
+  .pad-tag-required {
+    color: #ef4444;
+    background: #fef2f2;
+  }
+
+  .pad-tag-optional {
+    color: #3b82f6;
+    background: #eff6ff;
+  }
+
+  .pad-tag-disabled {
+    color: #9ca3af;
+    background: #f3f4f6;
+  }
+
+  .pad-rule {
+    margin-left: 4px;
+    font-size: 12px;
+    color: #9ca3af;
+  }
+
+  .pad-table {
+    width: 100%;
+    margin-bottom: 12px;
+    font-size: 13px;
+    border-collapse: collapse;
+  }
+
+  .pad-table th {
+    padding: 8px 12px;
+    font-weight: 600;
+    color: #6b7280;
+    text-align: left;
+    background: #f8f9fb;
+    border-bottom: 1px solid #f3f4f6;
+  }
+
+  .pad-table td {
+    padding: 8px 12px;
+    color: #1a1a2e;
+    border-bottom: 1px solid #f3f4f6;
+  }
+
+  .pad-table tr:last-child td {
+    border-bottom: none;
+  }
+
+  .pad-table tr:hover td {
+    background: rgb(22 119 255 / 3%);
+  }
+
+  .pad-stock-ok {
+    font-size: 12px;
+    font-weight: 600;
+    color: #22c55e;
+  }
+
+  .pad-stock-low {
+    font-size: 12px;
+    font-weight: 600;
+    color: #f59e0b;
+  }
+
+  .pad-assoc {
+    margin-bottom: 12px;
+    font-size: 12px;
+    color: #9ca3af;
+  }
+
+  .pad-card-footer {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding-top: 12px;
+    border-top: 1px solid #f3f4f6;
+  }
+
+  .pad-empty {
+    padding: 28px 14px;
+    font-size: 13px;
+    color: #9ca3af;
+    text-align: center;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: var(--g-shadow-sm);
+  }
+
+  .pad-editor-drawer {
+    .g-form-group {
+      margin-bottom: 16px;
+    }
+
+    .g-form-label {
+      display: inline-flex;
+      margin-bottom: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      color: #1a1a2e;
+    }
+
+    .g-form-label.required::before {
+      margin-right: 4px;
+      color: #ef4444;
+      content: '*';
+    }
+
+    .g-hint {
+      font-size: 12px;
+      color: #9ca3af;
+    }
+
+    .g-input,
+    .g-textarea {
+      width: 100%;
+      padding: 0 10px;
+      font-size: 13px;
+      color: #1a1a2e;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      outline: none;
+      transition: var(--g-transition);
+    }
+
+    .g-input {
+      height: 34px;
+    }
+
+    .g-textarea {
+      min-height: 66px;
+      padding-top: 8px;
+      line-height: 1.5;
+      resize: vertical;
+    }
+
+    .g-input:focus,
+    .g-textarea:focus {
+      border-color: #1677ff;
+      box-shadow: 0 0 0 3px rgb(22 119 255 / 12%);
+    }
+
+    .g-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 32px;
+      padding: 0 16px;
+      font-size: 13px;
+      color: #1f1f1f;
+      cursor: pointer;
+      background: #fff;
+      border: 1px solid #d9d9d9;
+      border-radius: 6px;
+      box-shadow: var(--g-shadow-sm);
+      transition: all var(--g-transition);
+    }
+
+    .g-btn:hover {
+      color: #1677ff;
+      border-color: #1677ff;
+      box-shadow: var(--g-shadow-md);
+    }
+
+    .g-btn-primary {
+      color: #fff;
+      background: #1677ff;
+      border-color: #1677ff;
+    }
+
+    .g-btn-primary:hover {
+      color: #fff;
+      opacity: 0.88;
+    }
+
+    .g-btn:disabled {
+      cursor: not-allowed;
+      box-shadow: none;
+      opacity: 0.6;
+    }
+
+    .g-toggle-wrap {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .g-toggle-label {
+      font-size: 12px;
+      color: #4b5563;
+    }
+
+    .g-toggle-input {
+      position: relative;
+      flex-shrink: 0;
+      width: 40px;
+      height: 22px;
+    }
+
+    .g-toggle-input input {
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+
+    .g-toggle-sl {
+      position: absolute;
+      inset: 0;
+      cursor: pointer;
+      background: #d9d9d9;
+      border-radius: 11px;
+      transition: all 0.2s;
+    }
+
+    .g-toggle-sl::before {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 18px;
+      height: 18px;
+      content: '';
+      background: #fff;
+      border-radius: 50%;
+      box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
+      transition: all 0.2s;
+    }
+
+    .g-toggle-input input:checked + .g-toggle-sl {
+      background: #1677ff;
+    }
+
+    .g-toggle-input input:checked + .g-toggle-sl::before {
+      transform: translateX(18px);
+    }
+
+    .pad-sel-row {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    .pad-sel-row span {
+      font-size: 13px;
+      color: #4b5563;
+      font-weight: 500;
+    }
+
+    .pad-input-num {
+      width: 80px;
+    }
+
+    .pad-opt-list-header {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      margin-bottom: 8px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #6b7280;
+    }
+
+    .pad-opt-list-header .h-name {
+      flex: 1;
+    }
+
+    .pad-opt-list-header .h-price,
+    .pad-opt-list-header .h-stock {
+      width: 80px;
+    }
+
+    .pad-opt-list-header .h-act {
+      width: 34px;
+    }
+
+    .pad-opt-list {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .pad-opt-row {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .pad-opt-name {
+      flex: 1;
+    }
+
+    .pad-opt-price,
+    .pad-opt-stock {
+      width: 80px;
+    }
+
+    .pad-opt-del {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 34px;
+      height: 34px;
+      font-size: 14px;
+      color: #9ca3af;
+      cursor: pointer;
+      background: #fff;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+    }
+
+    .pad-opt-del:hover {
+      color: #ef4444;
+      background: #fef2f2;
+      border-color: #ef4444;
+    }
+
+    .pad-btn-dashed {
+      justify-content: center;
+      width: 100%;
+      margin-top: 8px;
+      color: #9ca3af;
+      border-style: dashed;
+    }
+
+    .pad-btn-dashed:hover {
+      color: #1677ff;
+      border-color: #1677ff;
+    }
+  }
+
+  .pad-picker-search {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+
+  .pad-btn {
+    height: 32px;
+    padding: 0 12px;
+    font-size: 13px;
+    color: #1f1f1f;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+  }
+
+  .pad-btn-sm {
+    flex-shrink: 0;
+  }
+
+  .pad-picker-list {
+    max-height: 320px;
+    overflow-y: auto;
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
+  }
+
+  .pad-picker-item {
+    display: grid;
+    grid-template-columns: auto 1fr 140px auto;
+    gap: 10px;
+    align-items: center;
+    padding: 10px 12px;
+    cursor: pointer;
+    border-bottom: 1px solid #f5f5f5;
+  }
+
+  .pad-picker-item:last-child {
+    border-bottom: none;
+  }
+
+  .pad-picker-item:hover {
+    background: #fafcff;
+  }
+
+  .pad-picker-item .name {
+    font-size: 13px;
+    color: #1a1a2e;
+  }
+
+  .pad-picker-item .spu {
+    font-size: 12px;
+    color: #9ca3af;
+  }
+
+  .pad-picker-item .price {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1a1a2e;
+  }
+
+  .pad-picker-empty {
+    padding: 28px 14px;
+    font-size: 13px;
+    color: #9ca3af;
+    text-align: center;
+  }
+
+  @media (width <= 1200px) {
+    .pad-toolbar {
+      flex-wrap: wrap;
+    }
+
+    .pad-spacer {
+      display: none;
+    }
+  }
+}
diff --git a/apps/web-antd/src/views/product/addons/types.ts b/apps/web-antd/src/views/product/addons/types.ts
new file mode 100644
index 0000000..6d95e28
--- /dev/null
+++ b/apps/web-antd/src/views/product/addons/types.ts
@@ -0,0 +1,30 @@
+import type { ProductAddonGroupDto, ProductSwitchStatus } from '#/api/product';
+
+/**
+ * 文件职责：加料管理页面类型定义。
+ */
+
+/** 加料项编辑表单。 */
+export interface AddonItemForm {
+  id: string;
+  name: string;
+  price: number;
+  stock: number;
+  sort: number;
+  status: ProductSwitchStatus;
+}
+
+/** 加料组编辑表单。 */
+export interface AddonEditorForm {
+  description: string;
+  items: AddonItemForm[];
+  maxSelect: number;
+  minSelect: number;
+  name: string;
+  required: boolean;
+  sort: number;
+  status: ProductSwitchStatus;
+}
+
+/** 加料组卡片视图模型。 */
+export type AddonGroupCardViewModel = ProductAddonGroupDto;