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: 'wisdom', name: '智·金', color: '#6366F1', currentValue: 20 },
        { code: 'action', name: '行·木', color: '#10B981', currentValue: 20 },
        { code: 'wealth', name: '富·水', color: '#F59E0B', currentValue: 20 },
        { code: 'mind', name: '心·火', color: '#FF6B9D', currentValue: 20 }
      ],
      presets: [
        { label: '均衡', weights: { body: 20, wisdom: 20, action: 20, wealth: 20, mind: 20 } },
        { label: '偏身', weights: { body: 40, wisdom: 15, action: 15, wealth: 15, mind: 15 } },
        { label: '偏智', weights: { body: 15, wisdom: 40, action: 15, wealth: 15, mind: 15 } },
        { label: '偏行', weights: { body: 15, wisdom: 15, action: 40, wealth: 15, mind: 15 } },
        { label: '偏富', weights: { body: 15, wisdom: 15, action: 15, wealth: 40, mind: 15 } },
        { label: '偏心', weights: { body: 15, wisdom: 15, action: 15, wealth: 15, mind: 40 } }
      ]
    }
  },
  computed: {
    sum() {
      return this.dimensions.reduce((s, d) => s + (d.currentValue || 0), 0)
    }
  },
  watch: {
    value(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
          }
        })
      }
    }
  },
  mounted() {
    this.emitValue()
  },
  methods: {
    onWeightChange(changedCode) {
      var changed = this.dimensions.find(function(d) { return d.code === changedCode })
      if (changed) {
        changed.currentValue = Math.max(0, Math.min(100, changed.currentValue || 0))
      }
      var changedValue = changed ? (changed.currentValue || 0) : 0
      var remaining = 100 - changedValue
      var others = this.dimensions.filter(function(d) { return d.code !== changedCode })
      var othersTotal = others.reduce(function(s, d) { return s + (d.currentValue || 0) }, 0)

      if (othersTotal === 0) {
        // 其他维度全为0时，均分剩余
        var share = Math.floor(remaining / others.length)
        var distributed = 0
        for (var i = 0; i < others.length - 1; i++) {
          others[i].currentValue = share
          distributed += share
        }
        others[others.length - 1].currentValue = remaining - distributed
      } else {
        // 按其他维度的当前比例分配剩余值
        var distributed2 = 0
        for (var j = 0; j < others.length - 1; j++) {
          var exactVal = ((others[j].currentValue || 0) / othersTotal) * remaining
          var rounded = Math.round(exactVal)
          others[j].currentValue = rounded
          distributed2 += rounded
        }
        others[others.length - 1].currentValue = remaining - distributed2
      }
      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>