client-wms-board/src/box/FeedingArea.vue

<!-- 上料区管理 -->
<template>
  <div class="feeding-container">
    <!-- 动态背景 -->
    <div class="tech-background">
      <div class="tech-grid" />
      <div class="tech-gradient" />
      <!-- <div class="tech-particles">
        <div v-for="i in 15" :key="i" class="particle" :style="getParticleStyle(i)" />
      </div> -->
    </div>

    <!-- 顶部导航 -->
    <header class="tech-header">
      <div class="header-left">
        <div class="logo-box" style="cursor: pointer;" @click="goBack">
          <i class="fas fa-warehouse" />
        </div>
        <!-- <div class="logo-text">上料区</div> -->
      </div>
      <div class="header-center">
        <h1 class="system-title">料箱上架</h1>
      </div>
      <div class="header-right">
        <!-- <div class="date-display">{{ currentDate }}</div> -->
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="tech-main">
      <!-- 操作按钮区域 -->
      <div class="action-cards">
        <!-- 空料箱上架 -->
        <div class="action-card" @click="handlePlaceEmptyBin(false)">
          <!-- <div class="card-border" /> -->
          <!-- <div class="card-glow" /> -->
          <div class="card-content">
            <div class="card-icon green">
              <i class="fas fa-arrow-up-from-bracket" />
            </div>
            <div class="card-label">空料箱上架</div>
            <!-- <div class="card-decoration">
              <div class="deco-line" />
              <div class="deco-corner" />
            </div> -->
          </div>
        </div>

        <!-- 请求空料箱 -->
        <div class="action-card" @click="handleRequestEmptyBin(false)">
          <div class="card-content">
            <div class="card-icon blue">
              <i class="fas fa-box-open" />
            </div>
            <div class="card-label">请求空料箱</div>
          </div>
        </div>

        <!-- 请求校验 -->
        <div class="action-card" @click="handleRequestVerification(false)">
          <div class="card-content">
            <div class="card-icon orange">
              <i class="fas fa-magnifying-glass-chart" />
            </div>
            <div class="card-label">工装/设备上架</div>
          </div>
        </div>

        <!-- 成品上架 -->
        <div class="action-card" @click="handleProductShelf(false)">
          <div class="card-content">
            <div class="card-icon purple">
              <i class="fas fa-boxes-packing" />
            </div>
            <div class="card-label">成品上架</div>
          </div>
        </div>

        <!-- 成品下架 -->
        <div class="action-card" @click="handleProductOffShelf">
          <div class="card-content">
            <div class="card-icon red">
              <i class="fas fa-dolly" />
            </div>
            <div class="card-label">成品下架</div>
          </div>
        </div>
      </div>
    </main>

    <!-- 识别结果弹窗 - 科技感风格 -->
    <div v-if="showResultDialog" class="tech-modal-overlay" @click.self="closeDialog">
      <div class="tech-modal result-modal">
        <!-- 弹窗标题 -->
        <div class="modal-header">
          <h3>{{ dialogTitle }}</h3>
          <button class="close-btn" @click="closeDialog">
            <i class="fas fa-times" />
          </button>
        </div>

        <div class="dialog-content">
          <!-- 状态标签 -->
          <div v-if="showVerificationStatus" class="verification-status">
            <span class="status-tag" :class="verificationSuccess ? 'success' : 'danger'">
              <i :class="verificationSuccess ? 'fas fa-check-circle' : 'fas fa-times-circle'" />
              {{ verificationSuccess ? '校验通过' : '校验未通过' }}
            </span>
            <span v-if="errorResult" class="status-tag danger">
              {{ errorResult }}
            </span>
          </div>

          <!-- 双栏布局 -->
          <div class="dialog-body">
            <!-- 左侧：料箱列表 -->
            <div class="list-section">
              <h3 class="section-title">
                <i class="fas fa-boxes" />
                料箱信息
              </h3>
              <div class="item-list">
                <div v-for="bin in binList" :key="bin.id" class="item-card">
                  <div class="item-header">
                    <div class="item-info">
                      <div class="item-id">{{ bin.feedBoxName }}</div>
                    </div>
                    <span class="item-tag">{{ bin.feedBoxNo }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右侧：工装/设备列表 或 校验结果 -->
            <template v-if="!isRequest">
              <div class="list-section">
                <h3 class="section-title">
                  <i class="fas fa-tools" />
                  工装 / 设备信息
                </h3>
                <div class="item-list">
                  <div v-for="tool in toolList" :key="tool.id" class="item-card">
                    <div class="item-info">
                      <div class="item-name">{{ tool.inventoryName }}</div>
                      <div class="item-id">编号: {{ tool.inventoryNo }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="verification-result">
                <div class="result-header">
                  <i class="fas fa-check-circle" />
                  <h4>请求成功</h4>
                </div>
                <p class="result-message">请求空料箱【{{ binList[0]?.feedBoxName }}】成功</p>
              </div>
            </template>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="dialog-footer">
          <button v-if="showVerificationStatus" class="modal-btn primary-btn" @click="handleReverify">
            <i class="fas fa-sync-alt" />
            重新校验
          </button>
          <button class="modal-btn close-action-btn" @click="closeDialog">
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 成品上架弹窗 -->
  <div v-if="showProductShelfDialog" class="tech-modal-overlay" @click.self="closeProductShelfDialog">
    <div class="tech-modal product-modal">
      <div class="modal-header">
        <h3>成品上架</h3>
        <button class="close-btn" @click="closeProductShelfDialog">
          <i class="fas fa-times" />
        </button>
      </div>

      <div class="dialog-content">
        <!-- 状态标签 -->
        <div class="verification-status">
          <span class="status-tag" :class="productShelfSuccess ? 'success' : 'danger'">
            <i :class="productShelfSuccess ? 'fas fa-check-circle' : 'fas fa-times-circle'" />
            {{ productShelfSuccess ? '校验通过' : '校验未通过' }}
          </span>
          <span v-if="productShelfError" class="status-tag danger">
            {{ productShelfError }}
          </span>
        </div>

        <!-- 可滚动内容区域：包含双栏 + 已选成品 -->
        <div class="dialog-main">
          <!-- 双栏布局 -->
          <div class="dialog-body">
            <!-- 左侧：料箱列表 -->
            <div class="list-section">
              <h3 class="section-title">
                <i class="fas fa-boxes" />
                料箱信息
              </h3>
              <div class="item-list">
                <div v-for="bin in productShelfBinList" :key="bin.feedBoxId" class="item-card">
                  <div class="item-header">
                    <div class="item-info">
                      <div class="item-id">{{ bin.feedBoxName }}</div>
                    </div>
                    <span class="item-tag">{{ bin.feedBoxNo }}</span>
                  </div>
                </div>
                <div v-if="productShelfBinList.length === 0" class="empty-tip">
                  暂无料箱信息
                </div>
              </div>
            </div>

            <!-- 右侧：根据校验状态显示不同内容 -->
            <div class="list-section">
              <template v-if="!productShelfSuccess">
                <!-- 校验未通过时显示工装设备信息 -->
                <h3 class="section-title">
                  <i class="fas fa-tools" />
                  工装 / 设备信息
                </h3>
                <div class="item-list">
                  <div v-for="tool in productShelfToolList" :key="tool.inventoryNo" class="item-card">
                    <div class="item-info">
                      <div class="item-name">{{ tool.inventoryName }}</div>
                      <div class="item-id">编号: {{ tool.inventoryNo }}</div>
                    </div>
                  </div>
                  <div v-if="productShelfToolList.length === 0" class="empty-tip">
                    暂无工装/设备信息
                  </div>
                </div>
              </template>
              <template v-else>
                <!-- 校验通过时显示成品列表，可选择 -->
                <h3 class="section-title">
                  <i class="fas fa-box" />
                  成品信息（点击选择/取消）
                </h3>
                <div class="item-list">
                  <div
                    v-for="product in productShelfProductList" :key="product.productId" class="item-card selectable"
                    :class="{ selected: isProductSelected(product.productId) }"
                    @click="toggleProductSelection(product)"
                  >
                    <div class="item-header">
                      <div class="item-info">
                        <div class="item-name">{{ product.productName }}</div>
                        <div class="item-id">编号: {{ product.productNo }}</div>
                      </div>
                      <span v-if="isProductSelected(product.productId)" class="selected-icon">
                        <i class="fas fa-check-circle" />
                      </span>
                    </div>
                  </div>
                  <div v-if="productShelfProductList.length === 0" class="empty-tip">
                    暂无成品信息
                  </div>
                </div>
              </template>
            </div>
          </div>

          <!-- 已选成品区域 -->
          <!-- <div v-if="productShelfSuccess && selectedProducts.length > 0" class="selected-section">
            <h3 class="section-title">
              <i class="fas fa-clipboard-check" />
              已选成品（{{ selectedProducts.length }}）
            </h3>
            <div class="selected-list">
              <div v-for="product in selectedProducts" :key="product.productId" class="selected-item">
                <span class="selected-name">{{ product.productName }}</span>
                <span class="selected-no">{{ product.productNo }}</span>
                <button class="remove-btn" @click="removeSelectedProduct(product.productId)">
                  <i class="fas fa-times" />
                </button>
              </div>
            </div>
          </div> -->
        </div>

        <!-- 底部按钮 -->
        <div class="dialog-footer">
          <button class="modal-btn primary-btn" @click="handleProductShelfReverify">
            <i class="fas fa-sync-alt" />
            重新校验
          </button>
          <button v-if="!isEmptySubmit" class="modal-btn submit-btn" @click="submitProductShelf">
            <i class="fas fa-arrow-up-from-bracket" />
            成品上架
          </button>
          <button v-else class="modal-btn submit-btn" @click="submitProductShelfEmpty">
            <i class="fas fa-arrow-up-from-ground-water" />
            空料箱上架
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 成品下架弹窗 -->
  <div v-if="showProductOffShelfDialog" class="tech-modal-overlay" @click.self="closeProductOffShelfDialog">
    <div class="tech-modal product-modal">
      <div class="modal-header">
        <h3>成品下架</h3>
        <button class="close-btn" @click="closeProductOffShelfDialog">
          <i class="fas fa-times" />
        </button>
      </div>

      <div class="dialog-content">
        <!-- 可滚动内容区域：包含双栏 -->
        <div class="dialog-main">
          <!-- 双栏布局 -->
          <div class="dialog-body">
            <!-- 左侧：成品列表 -->
            <div class="list-section">
              <h3 class="section-title">
                <i class="fas fa-box" />
                成品列表（点击选择）
              </h3>
              <div class="item-list">
                <div
                  v-for="product in offShelfProductList" :key="product.id" class="item-card selectable"
                  :class="{ selected: isOffShelfProductSelected(product.id) }"
                  @click="toggleOffShelfProductSelection(product)"
                >
                  <div class="item-header">
                    <div class="item-info">
                      <div class="item-name">{{ product.name }}</div>
                      <div class="item-id">编号: {{ product.no }}</div>
                    </div>
                    <span class="item-tag">{{ product.feedBoxName }}</span>
                    <span v-if="isOffShelfProductSelected(product.id)" class="selected-icon">
                      <i class="fas fa-check-circle" />
                    </span>
                  </div>
                </div>
                <div v-if="offShelfProductList.length === 0" class="empty-tip">
                  暂无成品信息
                </div>
              </div>
            </div>

            <!-- 右侧：已选成品 -->
            <div class="list-section">
              <h3 class="section-title">
                <i class="fas fa-clipboard-check" />
                已选成品（{{ selectedOffShelfProducts.length }}）
              </h3>
              <div class="item-list">
                <div v-for="product in selectedOffShelfProducts" :key="product.id" class="item-card selected-card">
                  <div class="item-header">
                    <div class="item-info">
                      <div class="item-name">{{ product.name }}</div>
                      <div class="item-id">编号: {{ product.no }}</div>
                    </div>
                    <span class="item-tag">{{ product.feedBoxName }}</span>
                    <button class="remove-btn" @click="removeOffShelfProduct(product.id)">
                      <i class="fas fa-times" />
                    </button>
                  </div>
                </div>
                <div v-if="selectedOffShelfProducts.length === 0" class="empty-tip">
                  请从左侧选择要下架的成品
                </div>
              </div>
            </div>
          </div>

          <!-- 底部按钮 -->
          <div class="dialog-footer">
            <button class="modal-btn submit-btn" @click="submitProductOffShelf">
              <i class="fas fa-dolly" />
              成品下架
            </button>
            <button class="modal-btn close-action-btn" @click="closeProductOffShelfDialog">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="tech-footer">
      <!-- <p>&copy; 2024 智能仓储管理系统. All rights reserved.</p> -->
    </footer>
  </div>
  <!-- Loading -->
  <div v-if="loading" class="loading-overlay">
    <div class="loading-dots">
      <div class="dot" />
      <div class="dot" />
      <div class="dot" />
    </div>
    <span class="loading-text">加载中...</span>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { showNotify } from 'vant';
import {
    checkBlankBox, requestBlankBox, checkBlankBoxAndInventory, checkFeedBoxAndProduct, productRack,
    findProductCanRemoved, productRemoved,
} from '../api/blankBox.js';
import { useRouter } from 'vue-router';

const router = useRouter();
const currentDate = ref('');
const errorResult = ref('');
const loading = ref(false);
const showResultDialog = ref(false);
const dialogTitle = ref('');
const showVerificationStatus = ref(false); // 是否显示校验结果
const isRequest = ref(false); // 是否为请求空料箱
const verificationSuccess = ref(true); // 校验是否成功

const binList = ref([]);

const toolList = ref([]);

// 成品上架相关状态
const showProductShelfDialog = ref(false);
const productShelfSuccess = ref(false);
const productShelfError = ref('');
const productShelfBinList = ref([]);
const productShelfToolList = ref([]);
const productShelfProductList = ref([]);
const selectedProducts = ref([]);
const isEmptySubmit = ref(false); // 是否为成品空料箱上架

// 成品下架相关状态
const showProductOffShelfDialog = ref(false);
const offShelfProductList = ref([]);
const selectedOffShelfProducts = ref([]);

const goBack = () => {
    router.back();
};

// 接口数据处理
const handleDataProcessing = (res, isReverify = false) => {
    if (res.data) {
        binList.value = [];
        toolList.value = [];
        isRequest.value = false;
        const { success, rfidFeedBoxResponseList, rfidInventoryResponseList, feedBoxNo, feedBoxName } = res.data;
        if (!isReverify) showResultDialog.value = true;
        if (success) {
            verificationSuccess.value = true;
        } else {
            verificationSuccess.value = false;
        }
        if (rfidFeedBoxResponseList && rfidFeedBoxResponseList.length > 0) {
            binList.value = rfidFeedBoxResponseList;
        }
        if (rfidInventoryResponseList && rfidInventoryResponseList.length > 0) {
            toolList.value = rfidInventoryResponseList;
        }
        if (feedBoxNo && feedBoxName) {
            isRequest.value = true;
            binList.value = [res.data];
        }
    }
    if (res.errorCode !== 0) {
        verificationSuccess.value = false;
        errorResult.value = res.errorMessage,
        showNotify({ type: 'danger', message: res.errorMessage, duration: 6000, zIndex: 9999999 });
    } else {
        errorResult.value = '';
    }
};

// 空料箱上架
const handlePlaceEmptyBin = async isReverify => {
    dialogTitle.value = '上架结果';
    showVerificationStatus.value = true;
    loading.value = true;
    try {
        const res = await checkBlankBox();
        handleDataProcessing(res, isReverify);
    } catch (error) {
        verificationSuccess.value = false;
        console.error('空料箱上架:', error);
        showNotify({ type: 'danger', message: '空料箱上架API调用失败' });
    } finally {
        loading.value = false;
    }
};

// 请求空料箱
const handleRequestEmptyBin = async isReverify => {
    dialogTitle.value = '请求结果';
    showVerificationStatus.value = false;
    loading.value = true;
    try {
        const res = await requestBlankBox();
        handleDataProcessing(res, isReverify);
    } catch (error) {
        console.error('校验失败:', error);
        verificationSuccess.value = false;
        showNotify({ type: 'danger', message: '请求空料箱API调用失败' });
    } finally {
        loading.value = false;
    }
};

// 请求校验
const handleRequestVerification = async isReverify => {
    dialogTitle.value = '校验结果';
    showVerificationStatus.value = true;
    loading.value = true;
    try {
        const res = await checkBlankBoxAndInventory();
        handleDataProcessing(res, isReverify);
    } catch (error) {
        console.error('校验失败:', error);
        verificationSuccess.value = false;
        showNotify({ type: 'danger', message: '请求校验API调用失败' });
    } finally {
        loading.value = false;
    }
};

const handleReverify = () => {
    showNotify({ type: 'primary', message: '正在重新校验....', duration: 1000, zIndex: 9999999 });
    if (dialogTitle.value === '上架结果') {
        handlePlaceEmptyBin();
    } else if (dialogTitle.value === '校验结果')
        handleRequestVerification(true);
};

const closeDialog = () => {
    showResultDialog.value = false;
};


// 处理成品上架接口数据
const handleProductShelfDataProcessing = (res, isReverify = false) => {
    if (res.data) {
        isEmptySubmit.value = false;
        productShelfBinList.value = [];
        productShelfToolList.value = [];
        productShelfProductList.value = [];
        if (!isReverify) {
            selectedProducts.value = [];
        }

        const { success, rfidFeedBoxResponseList, rfidInventoryResponseList, productResponseList, feedBoxDetailIds, blankFeedBox } = res.data;

        if (!isReverify) showProductShelfDialog.value = true;

        productShelfSuccess.value = success;
        isEmptySubmit.value = blankFeedBox;

        if (rfidFeedBoxResponseList && rfidFeedBoxResponseList.length > 0) {
            productShelfBinList.value = rfidFeedBoxResponseList;
        }
        if (rfidInventoryResponseList && rfidInventoryResponseList.length > 0) {
            productShelfToolList.value = rfidInventoryResponseList;
        }
        if (productResponseList && productResponseList.length > 0) {
            productShelfProductList.value = productResponseList;

            // 根据 feedBoxDetailIds 预选中对应成品
            if (Array.isArray(feedBoxDetailIds) && feedBoxDetailIds.length > 0) {
                const selectedIdSet = new Set(feedBoxDetailIds);
                const preSelected = productResponseList.filter(p => selectedIdSet.has(p.productId));
                if (preSelected.length > 0) {
                    selectedProducts.value = preSelected.map(p => ({ ...p }));
                }
            }
        }
    }
    if (res.errorCode !== 0) {
        productShelfSuccess.value = false;
        productShelfError.value = res.errorMessage;
        showNotify({ type: 'danger', message: res.errorMessage, duration: 6000, zIndex: 9999999 });
    } else {
        productShelfError.value = '';
    }
    if (res.data.blankFeedBox) productShelfError.value += ',您可以进行空料想上架';
};

// 成品上架点击
const handleProductShelf = async (isReverify = false) => {
    loading.value = true;
    try {
        const res = await checkFeedBoxAndProduct();
        handleProductShelfDataProcessing(res, isReverify);
    } catch (error) {
        console.error('成品上架校验失败:', error);
        productShelfSuccess.value = false;
        showNotify({ type: 'danger', message: '成品上架校验API调用失败' });
    } finally {
        loading.value = false;
    }
};

// 重新校验成品上架
const handleProductShelfReverify = () => {
    showNotify({ type: 'primary', message: '正在重新校验....', duration: 1000, zIndex: 9999999 });
    handleProductShelf(true);
};

// 关闭成品上架弹窗
const closeProductShelfDialog = () => {
    showProductShelfDialog.value = false;
    selectedProducts.value = [];
};

// 检查成品是否已选中
const isProductSelected = productId => {
    return selectedProducts.value.some(p => p.productId === productId);
};

// 切换成品选中状态
const toggleProductSelection = product => {
    const index = selectedProducts.value.findIndex(p => p.productId === product.productId);
    if (index > -1) {
        selectedProducts.value.splice(index, 1);
    } else {
        selectedProducts.value.push({ ...product });
    }
};

// 移除已选成品
const removeSelectedProduct = productId => {
    const index = selectedProducts.value.findIndex(p => p.productId === productId);
    if (index > -1) {
        selectedProducts.value.splice(index, 1);
    }
};

// 提交成品上架
const submitProductShelf = async () => {
    console.log(productShelfSuccess.value);
    if (!productShelfSuccess.value) {
        showNotify({ type: 'danger', message: '校验未通过，请重新校验', duration: 3000, zIndex: 9999999 });
        return;
    }

    // 校验: 是否选择了成品
    if (selectedProducts.value.length === 0) {
        showNotify({ type: 'danger', message: '请先选择要上架的成品', duration: 3000, zIndex: 9999999 });
        return;
    }

    // 获取料箱ID和所选成品ID集合
    const feedBoxId = productShelfBinList.value[0].feedBoxId;
    const productIds = selectedProducts.value.map(p => p.productId);
    const params = { feedBoxId, productIds };

    console.log('成品上架提交数据:', params);

    loading.value = true;
    try {
        const res = await productRack(params);
        if (res.errorCode === 0) {
            showNotify({ type: 'success', message: '成品上架成功', duration: 3000, zIndex: 9999999 });
            closeProductShelfDialog();
        } else {
            showNotify({ type: 'danger', message: res.errorMessage, duration: 3000, zIndex: 9999999 });
        }

    } catch (error) {
        productShelfSuccess.value = false;
        console.error('成品上架校验失败:', error);
        showNotify({ type: 'danger', message: '成品上架校验API调用失败' });
    } finally {
        loading.value = false;
    }

};

// 提交成名空料箱上架
const submitProductShelfEmpty = () => {
    closeProductShelfDialog();
    handlePlaceEmptyBin(false);
};

// 成品下架点击
const handleProductOffShelf = async () => {
    offShelfProductList.value = [];
    selectedOffShelfProducts.value = [];
    loading.value = true;
    try {
        const res = await findProductCanRemoved();
        if (res.errorCode === 0) {
            if (res.datas && res.datas.length > 0) {
                offShelfProductList.value = res.datas;
                selectedOffShelfProducts.value = [];
                showProductOffShelfDialog.value = true;
            } else {
                offShelfProductList.value = [];
            }
        } else {
            showNotify({ type: 'danger', message: res.errorMessage, duration: 3000, zIndex: 9999999 });
        }
    } catch (error) {
        console.error('获取成品下架列表失败:', error);
        showNotify({ type: 'danger', message: '获取成品下架列表失败' });
    } finally {
        loading.value = false;
    }
};

// 关闭成品下架弹窗
const closeProductOffShelfDialog = () => {
    showProductOffShelfDialog.value = false;
    selectedOffShelfProducts.value = [];
};

// 检查成品下架是否已选中
const isOffShelfProductSelected = productId => {
    return selectedOffShelfProducts.value.some(p => p.id === productId);
};

// 切换成品下架选中状态
const toggleOffShelfProductSelection = product => {
    const index = selectedOffShelfProducts.value.findIndex(p => p.id === product.id);
    if (index > -1) {
        selectedOffShelfProducts.value.splice(index, 1);
    } else {
        selectedOffShelfProducts.value.push({ ...product });
    }
};

// 移除已选成品下架
const removeOffShelfProduct = productId => {
    const index = selectedOffShelfProducts.value.findIndex(p => p.id === productId);
    if (index > -1) {
        selectedOffShelfProducts.value.splice(index, 1);
    }
};

// 提交成品下架
const submitProductOffShelf = async () => {
    // 校验是否选择了成品
    if (selectedOffShelfProducts.value.length === 0) {
        showNotify({ type: 'danger', message: '请先选择要下架的成品', duration: 3000, zIndex: 9999999 });
        return;
    }

    // 获取所选成品ID集合
    const params = selectedOffShelfProducts.value.map(p => {
        return {
            id: p.id,
            feedBoxId: p.feedBoxId,
        };
    });

    console.log('成品下架提交数据:', params);

    loading.value = true;
    try {
        const res = await productRemoved(params);
        if (res.errorCode === 0) {
            showNotify({ type: 'success', message: '成品下架成功', duration: 3000, zIndex: 9999999 });
            closeProductOffShelfDialog();
        } else {
            showNotify({ type: 'danger', message: res.errorMessage, duration: 6000, zIndex: 9999999 });
        }
    } catch (error) {
        console.error('成品下架API调用失败:', error);
        showNotify({ type: 'danger', message: '成品下架API调用失败' });
    } finally {
        loading.value = false;
    }


};

const updateDateTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hour = String(now.getHours()).padStart(2, '0');
    const minute = String(now.getMinutes()).padStart(2, '0');
    const second = String(now.getSeconds()).padStart(2, '0');
    currentDate.value = `${year}.${month}.${day} ${hour}:${minute}:${second}`;
};

const getParticleStyle = index => {
    const size = Math.random() * 4 + 2;
    const left = Math.random() * 100;
    const animationDuration = Math.random() * 20 + 10;
    const animationDelay = Math.random() * 5;
    return {
        width: `${size}px`,
        height: `${size}px`,
        left: `${left}%`,
        animationDuration: `${animationDuration}s`,
        animationDelay: `${animationDelay}s`,
    };
};

let timer = null;

onMounted(() => {
    // updateDateTime();
    // timer = setInterval(updateDateTime, 1000); // 每秒更新一次
});

onUnmounted(() => {
    if (timer) {
        clearInterval(timer);
    }
});
</script>

<style scoped>
/* ========== 主容器 ========== */
.feeding-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: #0a0e27;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ========== 动态背景 ========== */
.tech-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.tech-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(0, 153, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 153, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(50px, 50px);
  }
}

.tech-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center,
      rgba(0, 100, 200, 0.2) 0%,
      rgba(10, 14, 39, 0.8) 50%,
      #0a0e27 100%);
}

.tech-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: rgba(0, 255, 255, 0.8);
  border-radius: 50%;
  bottom: -10px;
  animation: particleFloat linear infinite;
  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.8),
    0 0 20px rgba(0, 153, 255, 0.6);
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

/* ========== 顶部栏 ========== */
.tech-header {
  position: relative;
  z-index: 10;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: linear-gradient(180deg, rgba(0, 20, 50, 0.9) 0%, rgba(10, 14, 39, 0.7) 100%);
  border-bottom: 2px solid rgba(0, 153, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 153, 255, 0.2);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 200px;
}

.logo-box {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #00ff88 0%, #0099ff 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 0 20px rgba(0, 153, 255, 0.6);
  animation: logoGlow 2s ease-in-out infinite;
}

@keyframes logoGlow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(0, 153, 255, 0.6);
  }

  50% {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.8);
  }
}

.logo-text {
  font-size: 32px;
  font-weight: bold;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
  letter-spacing: 2px;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.system-title {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 20px rgba(0, 153, 255, 0.8);
  letter-spacing: 8px;
}

.header-right {
  min-width: 200px;
  display: flex;
  justify-content: flex-end;
}

.date-display {
  font-size: 24px;
  color: #00ffff;
  font-weight: 600;
  padding: 10px 20px;
  background: rgba(0, 153, 255, 0.1);
  border: 1px solid rgba(0, 153, 255, 0.3);
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 153, 255, 0.2);
}

/* ========== 主内容区域 ========== */
.tech-main {
  position: relative;
  z-index: 5;
  flex: 1;
  padding: 40px 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ========== 操作卡片区域 ========== */
.action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  max-width: 1400px;
  width: 100%;
  padding: 0 20px;
}

.action-card {
  position: relative;
  height: 300px;
  max-height: calc((100vh - 200px) / 1.5);
  cursor: pointer;
  transition: all 0.4s ease;
}

.action-card:hover {
  transform: translateY(-15px) scale(1.05);
}

.card-border {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(0, 255, 255, 0.9) 0%,
      rgba(0, 153, 255, 0.9) 25%,
      rgba(255, 0, 255, 0.9) 50%,
      rgba(0, 153, 255, 0.9) 75%,
      rgba(0, 255, 255, 0.9) 100%);
  background-size: 200% 200%;
  border-radius: 20px;
  padding: 4px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderShine 3s linear infinite;
}

@keyframes borderShine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

.card-glow {
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle at center,
      rgba(0, 255, 255, 0.6) 0%,
      rgba(0, 153, 255, 0.4) 40%,
      transparent 70%);
  border-radius: 20px;
  opacity: 0.5;
  animation: glowPulse 2s ease-in-out infinite;
}

.action-card:hover .card-glow {
  opacity: 1;
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

.card-content {
  position: relative;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 25, 50, 0.95) 0%, rgba(15, 30, 60, 0.95) 100%);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  backdrop-filter: blur(15px);
  overflow: hidden;
  box-shadow: inset 0 0 50px rgba(0, 255, 255, 0.1), 0 15px 50px rgba(0, 0, 0, 0.6);
}

.card-icon {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: #fff;
  border: 4px solid;
  transition: all 0.4s ease;
  animation: iconPulse 2s ease-in-out infinite;
}

.card-icon.blue {
  background: linear-gradient(135deg, rgba(0, 153, 255, 0.3), rgba(0, 255, 255, 0.3));
  border-color: rgba(0, 255, 255, 0.8);
  box-shadow: 0 0 50px rgba(0, 153, 255, 1), inset 0 0 30px rgba(0, 255, 255, 0.3);
}

.card-icon.green {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 200, 100, 0.3));
  border-color: rgba(0, 255, 136, 0.8);
  box-shadow: 0 0 50px rgba(0, 255, 136, 1), inset 0 0 30px rgba(0, 255, 136, 0.3);
}

.card-icon.orange {
  background: linear-gradient(135deg, rgba(255, 153, 0, 0.3), rgba(255, 100, 0, 0.3));
  border-color: rgba(255, 153, 0, 0.8);
  box-shadow: 0 0 50px rgba(255, 153, 0, 1), inset 0 0 30px rgba(255, 153, 0, 0.3);
}

.card-icon.purple {
  background: linear-gradient(135deg, rgba(153, 51, 255, 0.3), rgba(102, 0, 204, 0.3));
  border-color: rgba(153, 51, 255, 0.8);
  box-shadow: 0 0 50px rgba(153, 51, 255, 1), inset 0 0 30px rgba(153, 51, 255, 0.3);
}

.card-icon.red {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.3), rgba(220, 20, 60, 0.3));
  border-color: rgba(255, 71, 87, 0.8);
  box-shadow: 0 0 50px rgba(255, 71, 87, 1), inset 0 0 30px rgba(255, 71, 87, 0.3);
}

@keyframes iconPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

.action-card:hover .card-icon {
  transform: scale(1.15) rotate(10deg);
}

.card-label {
  font-size: 42px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 153, 255, 0.8);
  letter-spacing: 4px;
}

.card-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.deco-line {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #00ffff 20%, #ff00ff 50%, #00ffff 80%, transparent);
  box-shadow: 0 0 20px rgba(0, 255, 255, 1);
  animation: lineFlow 2s ease-in-out infinite;
}

@keyframes lineFlow {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

.deco-corner {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-top: 4px solid #00ffff;
  border-right: 4px solid #00ffff;
  border-radius: 0 10px 0 0;
  box-shadow: 0 0 20px rgba(0, 255, 255, 1);
  animation: cornerPulse 1.5s ease-in-out infinite;
}

@keyframes cornerPulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

/* ========== 页脚 ========== */
.tech-footer {
  position: relative;
  z-index: 10;
  padding: 15px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  background: rgba(10, 14, 39, 0.7);
  border-top: 1px solid rgba(0, 153, 255, 0.2);
  flex-shrink: 0;
}

/* ========== 弹窗样式 ========== */
:deep(.tech-dialog) {
  width: 95vw !important;
  max-width: 1400px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(15, 25, 45, 0.98), rgba(20, 30, 50, 0.98)) !important;
  border: 3px solid rgba(0, 255, 255, 0.5) !important;
  box-shadow: 0 0 50px rgba(0, 255, 255, 0.5), inset 0 0 30px rgba(0, 255, 255, 0.1) !important;
}

:deep(.tech-dialog .van-dialog__header) {
  padding: 25px 30px !important;
  font-size: 32px !important;
  font-weight: bold !important;
  color: #00ffff !important;
  text-shadow: 0 0 20px rgba(0, 255, 255, 1) !important;
  background: transparent !important;
  border-bottom: 2px solid rgba(0, 255, 255, 0.3) !important;
}

.dialog-content {
  padding: 30px;
  color: #fff;
}

.verification-status {
  margin-bottom: 25px;
  display: flex;
  /* justify-content: center; */
  justify-content: space-between;
}

:deep(.van-tag) {
  padding: 10px 25px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dialog-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.list-section {
  background: rgba(10, 20, 40, 0.6);
  border-radius: 12px;
  padding: 20px;
  border: 2px solid rgba(0, 255, 255, 0.2);
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 20px;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  display: flex;
  align-items: center;
}

.item-list {
  max-height: 400px;
  overflow-y: auto;
}

.item-card {
  background: rgba(20, 30, 50, 0.6);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 4px;
  border: 1px solid rgba(0, 153, 255, 0.3);
  transition: all 0.3s ease;
}

.item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0, 255, 255, 0.3);
  border-color: rgba(0, 255, 255, 0.6);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.item-info {
  flex: 1;
}

.item-id,
.item-name {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8px;
}

.item-location {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.item-type {
  font-size: 14px;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 8px;
  display: inline-block;
}

.type-tool {
  background: rgba(0, 153, 255, 0.2);
  color: #0099ff;
  border: 1px solid rgba(0, 153, 255, 0.5);
}

.type-equipment {
  background: rgba(153, 0, 255, 0.2);
  color: #9900ff;
  border: 1px solid rgba(153, 0, 255, 0.5);
}

.verification-result {
  padding: 20px;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.result-header i {
  font-size: 36px;
}

.result-header h4 {
  font-size: 24px;
  font-weight: bold;
}

.text-success {
  color: #00ff88;
}

.text-danger {
  color: #ff3366;
}

.result-message {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: 20px;
}

.result-errors {
  background: rgba(255, 51, 102, 0.1);
  border: 1px solid rgba(255, 51, 102, 0.3);
  border-radius: 8px;
  padding: 15px;
}

.result-errors h5 {
  font-size: 16px;
  font-weight: bold;
  color: #ff3366;
  margin-bottom: 10px;
}

.result-errors ul {
  list-style: disc;
  padding-left: 25px;
}

.result-errors li {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 5px;
}

.dialog-footer {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.action-btn {
  min-width: 150px;
  height: 50px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 10px;
}

:deep(.van-button--primary) {
  background: linear-gradient(135deg, #0099ff, #00ffff) !important;
  border: 2px solid #00ffff !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5) !important;
}

:deep(.van-button--default) {
  background: rgba(100, 100, 100, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

/* ========== 响应式设计 ========== */
@media (max-width: 1200px) {
  .action-cards {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 10px;
  }

  .dialog-body {
    grid-template-columns: 1fr;
  }

  .system-title {
    font-size: 36px;
    letter-spacing: 4px;
  }

  .action-card {
    height: 260px;
    max-height: calc((100vh - 180px) / 1.5);
  }

  .tech-main {
    padding: 40px 20px;
  }
}

@media (max-width: 768px) {
  .tech-header {
    padding: 0 15px;
    height: 70px;
  }

  .header-left,
  .header-right {
    min-width: auto;
  }

  .logo-box {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .logo-text {
    font-size: 20px;
  }

  .date-display {
    font-size: 14px;
    padding: 6px 12px;
  }

  .system-title {
    font-size: 20px;
    letter-spacing: 2px;
  }

  .tech-main {
    padding: 30px 15px;
  }

  .action-cards {
    gap: 25px;
    padding: 0 5px;
    grid-template-columns: 1fr;
  }

  .action-card {
    height: 280px;
    max-height: calc((100vh - 150px) / 1.5);
  }

  .card-icon {
    width: 100px;
    height: 100px;
    font-size: 50px;
  }

  .card-label {
    font-size: 28px;
    letter-spacing: 2px;
  }

  .tech-footer {
    padding: 10px;
    font-size: 11px;
  }

  .dialog-content {
    padding: 20px;
  }

  .section-title {
    font-size: 18px;
  }

  .deco-line {
    bottom: 20px;
  }

  .deco-corner {
    width: 30px;
    height: 30px;
    border-width: 3px;
  }
}

@media (max-width: 480px) {
  .tech-header {
    height: 60px;
    padding: 0 10px;
  }

  .logo-box {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }

  .logo-text {
    font-size: 16px;
  }

  .system-title {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .date-display {
    font-size: 12px;
    padding: 5px 10px;
  }

  .tech-main {
    padding: 20px 10px;
  }

  .action-card {
    height: 250px;
    max-height: calc((100vh - 120px) / 1.5);
  }

  .card-icon {
    width: 80px;
    height: 80px;
    font-size: 40px;
  }

  .card-label {
    font-size: 24px;
  }

  .card-content {
    gap: 30px;
  }
}

/* 滚动条样式 */
.item-list::-webkit-scrollbar {
  width: 8px;
}

.item-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.item-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0099ff, #00ffff);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 153, 255, 0.5);
}

/* 隐藏主内容区域的滚动条 */
.tech-main::-webkit-scrollbar {
  width: 0;
  display: none;
}

.tech-main {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.mr-1 {
  margin-right: 4px;
}

.mr-2 {
  margin-right: 8px;
}

/* ========== 科技感弹窗样式 ========== */
.tech-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 28, 61, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.tech-modal {
  background: linear-gradient(135deg, #0a3d6d 0%, #041c3d 100%);
  border: 1px solid #049FD8;
  border-radius: 16px;
  width: 90%;
  max-width: 800px;
  max-height: 88vh;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(4, 159, 216, 0.3);
  display: flex;
  flex-direction: column;
  padding: 20px 28px !important;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(4, 159, 216, 0.3);
}

.modal-header h3 {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  margin: 0;
}

.close-btn {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #7ec8ff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.dialog-content {
  padding: 14px 24px 20px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.verification-status {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.status-tag.success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.status-tag.danger {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.dialog-body {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}

.list-section {
  flex: 1;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 15px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #7ec8ff;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.item-card {
  background: rgba(9, 61, 140, 0.5);
  border: 1px solid rgba(4, 159, 216, 0.3);
  border-radius: 8px;
  padding: 12px;
}

.item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-info {
  flex: 1;
}

.item-id {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

.item-name {
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
}

.item-tag {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.verification-result {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

/* 弹窗中部滚动容器：双栏 + 已选成品 */
.dialog-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding-right: 4px;
}

.result-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.result-header i {
  font-size: 48px;
  color: #34d399;
}

.result-header h4 {
  font-size: 20px;
  color: #34d399;
  margin: 0;
}

.result-message {
  font-size: 14px;
  color: #7ec8ff;
  text-align: center;
  margin: 0;
}

.dialog-footer {
  display: flex;
  gap: 15px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.modal-btn {
  flex: 1;
  padding: 14px 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.primary-btn {
  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
  border: none;
  color: #fff;
}

.primary-btn:hover {
  box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
}

.close-action-btn {
  background: transparent;
  border: 1px solid #2a7fff;
  color: #7ec8ff;
}

.close-action-btn:hover {
  background: rgba(42, 127, 255, 0.2);
}

/* ========== 成品上架/下架相关样式 ========== */
.product-modal {
  max-width: 900px;
  max-height: 88vh;
}

.item-card.selectable {
  cursor: pointer;
  transition: all 0.3s ease;
}

.item-card.selectable:hover {
  background: rgba(4, 159, 216, 0.3);
  border-color: rgba(4, 159, 216, 0.6);
}

.item-card.selected {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.8);
}

.item-card.selected-card {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
}

.selected-icon {
  color: #34d399;
  font-size: 20px;
}

.empty-tip {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding: 30px 0;
  font-size: 14px;
}

/* 已选成品区域 */
.selected-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 15px;
  margin-top: 20px;
  flex-shrink: 0;
}

.selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 180px;
  overflow-y: auto;
}

.selected-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.5);
  border-radius: 20px;
  padding: 8px 12px;
}

.selected-name {
  color: #34d399;
  font-size: 14px;
  font-weight: 500;
}

.selected-no {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.remove-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.3);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #f87171;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.remove-btn:hover {
  background: rgba(239, 68, 68, 0.5);
  color: #fff;
}

/* 提交按钮样式 */
.submit-btn {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  border: none;
  color: #fff;
}

.submit-btn:hover {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

/* 响应式 */
@media screen and (max-width: 768px) {
  .dialog-body {
    flex-direction: column;
  }

  .tech-modal {
    max-width: 95%;
    max-height: 90vh;
  }

  .product-modal {
    max-width: 95%;
  }

  .selected-list {
    max-height: 100px;
  }
}
</style>