buff/client-tauri/src/components/tabs/SelectionTab.vue

<template>
  <div class="selection-tab">
    <div class="tab-header">
      <h2>🛒 选品工具</h2>
      <p>智能选品，帮您快速找到优质商品</p>
      <div class="status-bar">
        <div class="status-indicator" :class="{ 'running': isRunning, 'stopped': !isRunning }">
          <span class="status-dot"></span>
          <span class="status-text">{{ isRunning ? '运行中' : '已停止' }}</span>
        </div>
        <div v-if="isRunning" class="running-info">
          <span>已处理: {{ processedCount }} 个商品</span>
          <span>找到: {{ selectedCount }} 个目标商品</span>
        </div>
      </div>
    </div>

    <div class="content-grid">
      <!-- 左侧：配置面板 -->
      <div class="left-panel">
        <div class="card">
          <h3>筛选条件</h3>
          <form @submit.prevent="saveConfig">
            <div class="form-row">
              <div class="form-group">
                <label>商品类型</label>
                <select v-model="config.category">
                  <option value="">全部类型</option>
                  <option value="rifle">步枪</option>
                  <option value="pistol">手枪</option>
                  <option value="knife">刀具</option>
                  <option value="gloves">手套</option>
                  <option value="other">其他</option>
                </select>
              </div>
              <div class="form-group">
                <label>品质等级</label>
                <select v-model="config.quality">
                  <option value="">全部品质</option>
                  <option value="consumer">消费级</option>
                  <option value="industrial">工业级</option>
                  <option value="mil-spec">军规级</option>
                  <option value="restricted">受限</option>
                  <option value="classified">保密</option>
                  <option value="covert">隐秘</option>
                </select>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label>最低价格 (¥)</label>
                <input
                  v-model.number="config.minPrice"
                  type="number"
                  step="0.01"
                  min="0"
                  placeholder="0.00"
                />
              </div>
              <div class="form-group">
                <label>最高价格 (¥)</label>
                <input
                  v-model.number="config.maxPrice"
                  type="number"
                  step="0.01"
                  min="0"
                  placeholder="不限制"
                />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label>最小交易量</label>
                <input
                  v-model.number="config.minVolume"
                  type="number"
                  min="0"
                  placeholder="0"
                />
              </div>
              <div class="form-group">
                <label>最大交易量</label>
                <input
                  v-model.number="config.maxVolume"
                  type="number"
                  min="0"
                  placeholder="不限制"
                />
              </div>
            </div>

            <div class="form-group">
              <label class="checkbox-label">
                <input
                  v-model="config.enableFloatRange"
                  type="checkbox"
                />
                启用磨损筛选
              </label>
            </div>

            <div v-if="config.enableFloatRange" class="form-row">
              <div class="form-group">
                <label>最小磨损</label>
                <input
                  v-model.number="config.minFloat"
                  type="number"
                  step="0.0001"
                  min="0"
                  max="1"
                  placeholder="0.0000"
                />
              </div>
              <div class="form-group">
                <label>最大磨损</label>
                <input
                  v-model.number="config.maxFloat"
                  type="number"
                  step="0.0001"
                  min="0"
                  max="1"
                  placeholder="1.0000"
                />
              </div>
            </div>

            <div class="form-actions">
              <button type="submit" :disabled="savingConfig" class="primary-btn">
                {{ savingConfig ? '保存中...' : '保存配置' }}
              </button>
              <button type="button" @click="resetConfig" class="secondary-btn">
                重置
              </button>
            </div>
          </form>
        </div>

        <div class="card">
          <h3>运行控制</h3>
          <div class="control-buttons">
            <button
              @click="startSelection"
              :disabled="isRunning || isSweepRunning"
              class="primary-btn large"
            >
              {{ isRunning ? '运行中...' : '开始选品' }}
            </button>
            <button
              @click="stopSelection"
              :disabled="!isRunning"
              class="danger-btn large"
            >
              停止选品
            </button>
          </div>
          <div v-if="globalState.isSweepRunning" class="warning-notice">
            ⚠️ 扫货功能正在运行，请先停止扫货再开始选品
          </div>
        </div>
      </div>

      <!-- 右侧：结果展示 -->
      <div class="right-panel">
        <div class="card">
          <h3>选品结果</h3>
          <div v-if="results.length === 0" class="no-results">
            <div class="empty-icon">📦</div>
            <p>暂无选品结果</p>
            <small>配置筛选条件并开始选品</small>
          </div>
          <div v-else class="results-list">
            <div class="result-header">
              <span>共找到 {{ results.length }} 个商品</span>
              <button @click="exportResults" class="export-btn">
                导出结果
              </button>
            </div>
            <div class="result-items">
              <div
                v-for="item in results.slice(0, 50)"
                :key="item.id"
                class="result-item"
              >
                <div class="item-info">
                  <div class="item-name">{{ item.name }}</div>
                  <div class="item-price">¥{{ item.price }}</div>
                </div>
                <div class="item-meta">
                  <span class="item-volume">{{ item.volume }}笔交易</span>
                  <span class="item-quality">{{ item.quality }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 消息提示 -->
    <div v-if="message.show" class="message-toast" :class="message.type">
      {{ message.text }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { invoke } from '@tauri-apps/api/tauri'
import { getBeijingDateString } from '../../utils/timezone'

interface UserInfo {
  user_id: number
  username: string
  expire_time: string
}

interface SelectionConfig {
  category: string
  quality: string
  minPrice: number | null
  maxPrice: number | null
  minVolume: number | null
  maxVolume: number | null
  enableFloatRange: boolean
  minFloat: number | null
  maxFloat: number | null
}

interface SelectionResult {
  id: string
  name: string
  price: number
  volume: number
  quality: string
}

// Props
const props = defineProps<{
  userInfo: UserInfo
  globalState: {
    isSelectionRunning: boolean
    isSweepRunning: boolean
  }
}>()

// 响应式数据
const isRunning = ref(false)
const isSweepRunning = ref(false)
const processedCount = ref(0)
const selectedCount = ref(0)
const savingConfig = ref(false)
const results = ref<SelectionResult[]>([])

const config = reactive<SelectionConfig>({
  category: '',
  quality: '',
  minPrice: null,
  maxPrice: null,
  minVolume: null,
  maxVolume: null,
  enableFloatRange: false,
  minFloat: null,
  maxFloat: null
})

const message = reactive({
  show: false,
  text: '',
  type: 'info' as 'info' | 'success' | 'error'
})

let statusTimer: number | null = null

// 保存配置
const saveConfig = async () => {
  savingConfig.value = true
  try {
    // 这里应该调用后端API保存配置
    // 暂时保存到本地存储
    const configStr = JSON.stringify(config)
    await invoke('store_selection_config', { config: configStr })

    showMessage('配置保存成功', 'success')
  } catch (error) {
    console.error('保存配置失败:', error)
    showMessage('配置保存失败', 'error')
  } finally {
    savingConfig.value = false
  }
}

// 重置配置
const resetConfig = () => {
  Object.assign(config, {
    category: '',
    quality: '',
    minPrice: null,
    maxPrice: null,
    minVolume: null,
    maxVolume: null,
    enableFloatRange: false,
    minFloat: null,
    maxFloat: null
  })
}

// 开始选品
const startSelection = async () => {
  try {
    // 检查是否有正在运行的扫货任务
    if (props.globalState.isSweepRunning) {
      showMessage('扫货功能正在运行，请先停止扫货', 'error')
      return
    }

    isRunning.value = true
    props.globalState.isSelectionRunning = true
    processedCount.value = 0
    selectedCount.value = 0
    results.value = []

    // 启动选品服务
    await invoke('start_selection', {
      config: JSON.stringify(config)
    })

    showMessage('选品任务已启动', 'success')

    // 开始状态更新定时器
    startStatusUpdate()

  } catch (error) {
    console.error('启动选品失败:', error)
    isRunning.value = false
    props.globalState.isSelectionRunning = false
    showMessage('启动选品失败', 'error')
  }
}

// 停止选品
const stopSelection = async () => {
  try {
    await invoke('stop_selection')
    isRunning.value = false
    props.globalState.isSelectionRunning = false
    stopStatusUpdate()
    showMessage('选品任务已停止', 'info')
  } catch (error) {
    console.error('停止选品失败:', error)
    showMessage('停止选品失败', 'error')
  }
}

// 导出结果
const exportResults = () => {
  if (results.value.length === 0) {
    showMessage('没有可导出的结果', 'info')
    return
  }

  // 创建CSV内容
  const csvContent = [
    ['商品名称', '价格', '交易量', '品质'].join(','),
    ...results.value.map(item =>
      [item.name, item.price, item.volume, item.quality].join(',')
    )
  ].join('\n')

  // 创建下载链接
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `选品结果_${getBeijingDateString()}.csv`
  link.click()

  showMessage('结果导出成功', 'success')
}

// 状态更新定时器
const startStatusUpdate = () => {
  if (statusTimer) return

  statusTimer = window.setInterval(async () => {
    try {
      const status = await invoke<any>('get_selection_status')
      processedCount.value = status.processed_count || 0
      selectedCount.value = status.selected_count || 0
      results.value = status.results || []

      // 如果任务已完成或停止
      if (!status.running) {
        isRunning.value = false
        stopStatusUpdate()
        showMessage('选品任务已完成', 'success')
      }
    } catch (error) {
      console.error('获取状态失败:', error)
    }
  }, 2000) // 每2秒更新一次
}

const stopStatusUpdate = () => {
  if (statusTimer) {
    clearInterval(statusTimer)
    statusTimer = null
  }
}

// 检查互斥状态
const checkMutexStatus = () => {
  // 直接使用全局状态
  isSweepRunning.value = props.globalState.isSweepRunning
}

// 消息提示
const showMessage = (text: string, type: 'info' | 'success' | 'error' = 'info') => {
  message.text = text
  message.type = type
  message.show = true

  setTimeout(() => {
    message.show = false
  }, 3000)
}

// 加载配置
const loadConfig = async () => {
  try {
    const configStr = await invoke<string>('get_selection_config')
    if (configStr) {
      const loadedConfig = JSON.parse(configStr)
      Object.assign(config, loadedConfig)
    }
  } catch (error) {
    console.log('加载配置失败，使用默认配置')
  }
}

// 组件生命周期
onMounted(async () => {
  await Promise.all([
    loadConfig(),
    checkMutexStatus()
  ])
})

onUnmounted(() => {
  stopStatusUpdate()
})
</script>

<style scoped>
.selection-tab {
  max-width: 1200px;
  margin: 0 auto;
}

.tab-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.tab-header h2 {
  color: #333;
  margin-bottom: 8px;
}

.tab-header p {
  color: #666;
  margin: 0;
}

.status-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 15px;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.status-indicator.running {
  color: #4caf50;
}

.status-indicator.stopped {
  color: #666;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

.status-indicator.stopped .status-dot {
  animation: none;
  background: #ccc;
}

.running-info {
  display: flex;
  gap: 20px;
  color: #666;
  font-size: 14px;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.card h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #1976d2;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: normal !important;
}

.checkbox-label input[type="checkbox"] {
  width: auto !important;
  margin: 0;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.primary-btn {
  flex: 1;
  padding: 12px 24px;
  background: #1976d2;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.primary-btn:hover:not(:disabled) {
  background: #1565c0;
}

.primary-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.secondary-btn {
  padding: 12px 24px;
  border: 1px solid #1976d2;
  background: white;
  color: #1976d2;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.secondary-btn:hover {
  background: #1976d2;
  color: white;
}

.danger-btn {
  background: #f44336;
  color: white;
  border: none;
}

.danger-btn:hover:not(:disabled) {
  background: #d32f2f;
}

.large {
  font-size: 16px;
  padding: 14px 28px;
}

.control-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.warning-notice {
  margin-top: 15px;
  padding: 12px;
  background: #fff3e0;
  border: 1px solid #ffcc02;
  border-radius: 6px;
  color: #e65100;
  font-size: 14px;
  text-align: center;
}

.results-list {
  max-height: 500px;
  overflow-y: auto;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e1e5e9;
}

.export-btn {
  padding: 6px 12px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.export-btn:hover {
  background: #388e3c;
}

.result-items {
  space-y: 10px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}

.result-item:hover {
  border-color: #1976d2;
}

.item-info {
  flex: 1;
}

.item-name {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.item-price {
  color: #4caf50;
  font-weight: bold;
  font-size: 16px;
}

.item-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.no-results p {
  margin: 10px 0 5px 0;
  font-size: 16px;
}

.no-results small {
  color: #999;
}

/* 消息提示 */
.message-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  z-index: 1001;
  animation: slideIn 0.3s ease-out;
}

.message-toast.success {
  background: #4caf50;
}

.message-toast.error {
  background: #f44336;
}

.message-toast.info {
  background: #2196f3;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 响应式布局 */
@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .running-info {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
}
</style>