添加掌上工厂应用

apps/hand-factory/components/klp-ui/k-metric-card/k-metric-card.vue

@@ -0,0 +1,68 @@
+<template>
+  <view class="metric-container" :style="{ gridTemplateColumns: `repeat(${columns}, 1fr)` }">
+    <view class="metric-item" v-for="(item, index) in items" :key="index">
+      <view class="metric-value">
+        {{ item.value }}
+      </view>
+      <view class="metric-label">{{ item.label }}</view>
+      <view v-if="item.unit" class="metric-unit">{{ item.unit }}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MetricCard',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    columns: {
+      type: Number,
+      default: 3
+    }
+  }
+}
+</script>
+
+<style scoped>
+.metric-container {
+  display: grid;
+  gap: 20rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+  background-color: #fff;
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
+}
+
+.metric-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20rpx;
+}
+
+.metric-value {
+  font-size: 48rpx;
+  font-weight: 600;
+  margin-bottom: 16rpx;
+  line-height: 1.2;
+  color: #333;
+}
+
+.metric-unit {
+  font-size: 0.7em;
+  color: #999;
+  margin-left: 8rpx;
+}
+
+.metric-label {
+  font-size: 28rpx;
+  color: #666;
+  letter-spacing: 2rpx;
+  text-align: center;
+  line-height: 1.4;
+}
+</style>