|
|
@@ -35,8 +35,8 @@
|
|
|
<view class="bar-row bar-row-family">
|
|
|
<text class="bar-label">全家</text>
|
|
|
<view class="bar-track stacked-track">
|
|
|
- <view class="bar-fill bar-fill-primary" :style="{ width: (sandboxData[dualDimension.primary.code + 'Score'] || 0) + '%', background: dualDimension.primary.color || '#8B5CF6' }"></view>
|
|
|
- <view class="bar-fill bar-fill-secondary" :style="{ width: (sandboxData[dualDimension.secondary.code + 'Score'] || 0) + '%', background: dualDimension.secondary.color || '#3B82F6' }"></view>
|
|
|
+ <view class="bar-fill bar-fill-primary" :style="{ width: (sandboxData[dualDimension.primary.code + 'Score'] || 0) + '%', background: dualDimension.primary.color || fallbackPrimaryColor }"></view>
|
|
|
+ <view class="bar-fill bar-fill-secondary" :style="{ width: (sandboxData[dualDimension.secondary.code + 'Score'] || 0) + '%', background: dualDimension.secondary.color || fallbackSecondaryColor }"></view>
|
|
|
</view>
|
|
|
<text class="bar-value">{{ familyScore }}</text>
|
|
|
</view>
|
|
|
@@ -48,8 +48,8 @@
|
|
|
>
|
|
|
<text class="bar-label">{{ member.name }}</text>
|
|
|
<view class="bar-track stacked-track">
|
|
|
- <view class="bar-fill bar-fill-primary" :style="{ width: getMemberPrimaryScore(member) + '%', background: dualDimension.primary.color || '#8B5CF6' }"></view>
|
|
|
- <view class="bar-fill bar-fill-secondary" :style="{ width: getMemberSecondaryScore(member) + '%', background: dualDimension.secondary.color || '#3B82F6' }"></view>
|
|
|
+ <view class="bar-fill bar-fill-primary" :style="{ width: getMemberPrimaryScore(member) + '%', background: dualDimension.primary.color || fallbackPrimaryColor }"></view>
|
|
|
+ <view class="bar-fill bar-fill-secondary" :style="{ width: getMemberSecondaryScore(member) + '%', background: dualDimension.secondary.color || fallbackSecondaryColor }"></view>
|
|
|
</view>
|
|
|
<text class="bar-value">{{ getMemberScore(member) }}</text>
|
|
|
<text class="bar-arrow">›</text>
|
|
|
@@ -57,11 +57,11 @@
|
|
|
<!-- 图例 -->
|
|
|
<view class="stacked-legend">
|
|
|
<view class="legend-item">
|
|
|
- <view class="legend-dot" :style="{ background: dualDimension.primary.color || '#8B5CF6' }"></view>
|
|
|
+ <view class="legend-dot" :style="{ background: dualDimension.primary.color || fallbackPrimaryColor }"></view>
|
|
|
<text class="legend-label">{{ dualDimension.primary.label || '心' }}</text>
|
|
|
</view>
|
|
|
<view class="legend-item">
|
|
|
- <view class="legend-dot" :style="{ background: dualDimension.secondary.color || '#3B82F6' }"></view>
|
|
|
+ <view class="legend-dot" :style="{ background: dualDimension.secondary.color || fallbackSecondaryColor }"></view>
|
|
|
<text class="legend-label">{{ dualDimension.secondary.label || '智' }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -71,6 +71,17 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { BrandColors } from '../utils/brand-colors.js'
|
|
|
+
|
|
|
+// 维度色板(JS 侧单一事实源;SCSS 侧等值令牌见 uni.scss $dim-*/$facade-violet/$status-info)
|
|
|
+var DIM_COLORS = {
|
|
|
+ body: BrandColors.action, // 身体
|
|
|
+ mind: BrandColors.violet, // 心
|
|
|
+ wisdom: BrandColors.infoBlue, // 智
|
|
|
+ action: BrandColors.primary, // 行动
|
|
|
+ wealth: BrandColors.wealth // 富
|
|
|
+}
|
|
|
+
|
|
|
export default {
|
|
|
props: {
|
|
|
dimensionCode: { type: String, required: true },
|
|
|
@@ -79,7 +90,9 @@ export default {
|
|
|
},
|
|
|
data: function() {
|
|
|
return {
|
|
|
- showMembers: false
|
|
|
+ showMembers: false,
|
|
|
+ fallbackPrimaryColor: BrandColors.violet,
|
|
|
+ fallbackSecondaryColor: BrandColors.infoBlue
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -88,13 +101,13 @@ export default {
|
|
|
},
|
|
|
dimensionConfig: function() {
|
|
|
var maps = {
|
|
|
- body: { name: '身体', icon: '\u{1F3C3}', color: '#10B981' },
|
|
|
- mind: { name: '心', icon: '\u2764', color: '#8B5CF6' },
|
|
|
- wisdom: { name: '智', icon: '\u{1F9E0}', color: '#3B82F6' },
|
|
|
- action: { name: '行动', icon: '\u{1F3CB}', color: '#F97316' },
|
|
|
- wealth: { name: '富', icon: '\u{1F4B0}', color: '#F59E0B' }
|
|
|
+ body: { name: '身体', icon: '\u{1F3C3}', color: DIM_COLORS.body },
|
|
|
+ mind: { name: '心', icon: '\u2764', color: DIM_COLORS.mind },
|
|
|
+ wisdom: { name: '智', icon: '\u{1F9E0}', color: DIM_COLORS.wisdom },
|
|
|
+ action: { name: '行动', icon: '\u{1F3CB}', color: DIM_COLORS.action },
|
|
|
+ wealth: { name: '富', icon: '\u{1F4B0}', color: DIM_COLORS.wealth }
|
|
|
}
|
|
|
- return maps[this.dimensionCode] || { name: '', icon: '', color: '#999' }
|
|
|
+ return maps[this.dimensionCode] || { name: '', icon: '', color: BrandColors.textMuted }
|
|
|
},
|
|
|
dimensionIcon: function() { return this.dimensionConfig.icon },
|
|
|
dimensionName: function() { return this.dimensionConfig.name },
|
|
|
@@ -134,10 +147,10 @@ export default {
|
|
|
},
|
|
|
memberColor: function(member) {
|
|
|
var score = this.getMemberScore(member)
|
|
|
- if (score >= 80) return '#10B981'
|
|
|
- if (score >= 60) return '#3B82F6'
|
|
|
- if (score >= 40) return '#F97316'
|
|
|
- return '#EF4444'
|
|
|
+ if (score >= 80) return BrandColors.action
|
|
|
+ if (score >= 60) return BrandColors.infoBlue
|
|
|
+ if (score >= 40) return BrandColors.primary
|
|
|
+ return BrandColors.danger
|
|
|
},
|
|
|
onMemberClick: function(member) {
|
|
|
var self = this
|