cfc/cfc-web/src/components/DimensionWeightPicker.vue

<template>
  <div class="dimension-weight-picker">
    <div class="dim-rows">
      <div v-for="dim in dimensions" :key="dim.code" class="dim-row">
        <span class="dim-label" :style="{ color: dim.color }">{{ dim.name }}</span>
        <el-slider
          v-model="dim.currentValue"
          :min="0"
          :max="getMaxForDim(dim.code)"
          :disabled="dim.currentValue === 0 && getRemaining() === 0"
          class="dim-slider"
          @change="onWeightChange"
        />
        <el-input-number
          v-model="dim.currentValue"
          :min="0"
          :max="getMaxForDim(dim.code)"
          :disabled="dim.currentValue === 0 && getRemaining() === 0"
          :controls="false"
          size="mini"
          class="dim-input"
          @change="onWeightChange"
        />
        <span class="dim-unit">%</span>
      </div>
    </div>

    <div class="sum-row" :class="{ error: sum !== 100 && sum > 0 }">
      <span>合计：{{ sum }}%</span>
      <span v-if="sum !== 100 && sum > 0" class="sum-tip">剩余 {{ 100 - sum }}%</span>
      <span v-if="sum === 100" class="sum-ok">已分配完成</span>
    </div>

    <div v-if="showPresets" class="preset-row">
      <el-button v-for="p in presets" :key="p.label" size="mini" @click="applyPreset(p)">{{ p.label }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DimensionWeightPicker',
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    showPresets: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dimensions: [
        { code: 'body', name: '身·土', color: '#FF8C42', currentValue: 0 },
        { code: 'mind', name: '智·金', color: '#6366F1', currentValue: 0 },
        { code: 'action', name: '行·木', color: '#10B981', currentValue: 0 },
        { code: 'wealth', name: '富·水', color: '#F59E0B', currentValue: 0 },
        { code: 'heart', name: '心·火', color: '#FF6B9D', currentValue: 0 }
      ],
      presets: [
        { label: '均衡', weights: { body: 20, mind: 20, action: 20, wealth: 20, heart: 20 } },
        { label: '偏身', weights: { body: 40, mind: 15, action: 15, wealth: 15, heart: 15 } },
        { label: '偏智', weights: { body: 15, mind: 40, action: 15, wealth: 15, heart: 15 } },
        { label: '偏行', weights: { body: 15, mind: 15, action: 40, wealth: 15, heart: 15 } },
        { label: '偏富', weights: { body: 15, mind: 15, action: 15, wealth: 40, heart: 15 } },
        { label: '偏心', weights: { body: 15, mind: 15, action: 15, wealth: 15, heart: 40 } }
      ]
    }
  },
  computed: {
    sum() {
      return this.dimensions.reduce((s, d) => s + (d.currentValue || 0), 0)
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (Array.isArray(val) && val.length > 0) {
          val.forEach(w => {
            const dim = this.dimensions.find(d => d.code === w.dimension)
            if (dim) {
              dim.currentValue = w.weight || 0
            }
          })
        }
      }
    }
  },
  methods: {
    getMaxForDim(code) {
      const otherTotal = this.dimensions
        .filter(d => d.code !== code && (d.currentValue || 0) > 0)
        .reduce((s, d) => s + (d.currentValue || 0), 0)
      return Math.max(0, 100 - otherTotal)
    },
    getRemaining() {
      return 100 - this.sum
    },
    onWeightChange() {
      this.dimensions.forEach(d => {
        const max = this.getMaxForDim(d.code)
        if (d.currentValue > max) {
          d.currentValue = max
        }
        if (d.currentValue < 0) {
          d.currentValue = 0
        }
      })
      this.emitValue()
    },
    emitValue() {
      const weights = this.dimensions.map(d => ({
        dimension: d.code,
        weight: d.currentValue || 0,
        enabled: (d.currentValue || 0) > 0
      }))
      this.$emit('input', weights)
    },
    applyPreset(preset) {
      this.dimensions.forEach(d => {
        d.currentValue = preset.weights[d.code] || 0
      })
      this.onWeightChange()
    }
  }
}
</script>

<style scoped>
.dimension-weight-picker {
  max-width: 520px;
}
.dim-rows {
  margin-bottom: 8px;
}
.dim-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}
.dim-label {
  width: 64px;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.dim-slider {
  flex: 1;
}
.dim-input {
  width: 72px;
  flex-shrink: 0;
}
.dim-input /deep/ .el-input-number__decrease,
.dim-input /deep/ .el-input-number__increase {
  display: none;
}
.dim-input /deep/ .el-input__inner {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}
.dim-unit {
  width: 16px;
  font-size: 13px;
  color: #666;
  flex-shrink: 0;
}
.sum-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  font-size: 13px;
  color: #67c23a;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sum-row.error {
  color: #f56c6c;
}
.sum-tip {
  font-size: 12px;
}
.sum-ok {
  font-size: 12px;
}
.preset-row {
  margin-top: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
</style>