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="100"
          class="dim-slider"
          @change="onWeightChange(dim.code)"
        />
        <el-input-number
          v-model="dim.currentValue"
          :min="0"
          :max="100"
          :controls="false"
          size="mini"
          class="dim-input"
          @change="onWeightChange(dim.code)"
        />
        <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: 20 },
        { code: 'mind', name: '智·金', color: '#6366F1', currentValue: 20 },
        { code: 'action', name: '行·木', color: '#10B981', currentValue: 20 },
        { code: 'wealth', name: '富·水', color: '#F59E0B', currentValue: 20 },
        { code: 'heart', name: '心·火', color: '#FF6B9D', currentValue: 20 }
      ],
      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: {
    onWeightChange(changedCode) {
      const changed = this.dimensions.find(function(d) { return d.code === changedCode })
      if (changed) {
        changed.currentValue = Math.max(0, Math.min(100, changed.currentValue))
      }
      var remaining = 100 - this.sum
      if (Math.abs(remaining) < 0.01) {
        this.emitValue()
        return
      }
      var others = this.dimensions.filter(function(d) { return d.code !== changedCode })
      if (remaining > 0) {
        var othersTotal = others.reduce(function(s, d) { return s + (d.currentValue || 0) }, 0)
        var exactVals = []
        for (var i = 0; i < others.length; i++) {
          exactVals.push(othersTotal > 0 ? ((others[i].currentValue || 0) / othersTotal) * remaining : remaining / others.length)
        }
        var distributed = 0
        for (var j = 0; j < others.length - 1; j++) {
          var rounded = Math.round(exactVals[j])
          others[j].currentValue = Math.max(0, rounded)
          distributed += rounded
        }
        others[others.length - 1].currentValue = Math.max(0, Math.round(remaining - distributed))
      } else {
        var excess = -remaining
        var othersTotal2 = others.reduce(function(s, d) { return s + (d.currentValue || 0) }, 0)
        var exactCuts = []
        for (var k = 0; k < others.length; k++) {
          exactCuts.push(othersTotal2 > 0 ? ((others[k].currentValue || 0) / othersTotal2) * excess : excess / others.length)
        }
        var cutSum = 0
        for (var m = 0; m < others.length - 1; m++) {
          var cutRounded = Math.round(exactCuts[m])
          others[m].currentValue = Math.max(0, (others[m].currentValue || 0) - cutRounded)
          cutSum += cutRounded
        }
        others[others.length - 1].currentValue = Math.max(0, (others[others.length - 1].currentValue || 0) - Math.round(excess - cutSum))
      }
      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(function(d) {
        d.currentValue = preset.weights[d.code] || 0
      })
      this.emitValue()
    }
  }
}
</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;
  height: 38px;
}
.dim-slider /deep/ .el-slider__runway {
  height: 6px;
}
.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>