Initial commit: One Pipe System

完整的管理系统，包含账户管理、卡片管理、套餐管理、财务管理等功能模块。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/business/CommissionDisplay.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="commission-display" :class="{ 'is-compact': compact }">
+    <div v-if="!compact" class="commission-item">
+      <span class="commission-label">佣金类型：</span>
+      <span class="commission-value">{{ commissionTypeLabel }}</span>
+    </div>
+
+    <div class="commission-item">
+      <span class="commission-label">{{ compact ? '' : '佣金金额：' }}</span>
+      <span class="commission-value commission-amount">
+        {{ formattedAmount }}
+      </span>
+    </div>
+
+    <div v-if="showRate && rate !== undefined" class="commission-item">
+      <span class="commission-label">{{ compact ? '' : '佣金比例：' }}</span>
+      <span class="commission-value">{{ rate }}%</span>
+    </div>
+
+    <div v-if="showStatus && status !== undefined" class="commission-item">
+      <span class="commission-label">{{ compact ? '' : '状态：' }}</span>
+      <el-tag :type="statusType" size="small">
+        {{ statusLabel }}
+      </el-tag>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { formatMoney } from '@/utils/business'
+import {
+  CommissionType,
+  WithdrawStatus,
+  getCommissionTypeLabel,
+  getWithdrawStatusLabel,
+  getWithdrawStatusType
+} from '@/config/constants'
+
+interface Props {
+  // 佣金金额（单位：分）
+  amount: number
+  // 佣金类型
+  type?: CommissionType
+  // 佣金比例
+  rate?: number
+  // 状态（用于提现记录）
+  status?: WithdrawStatus
+  // 是否显示比例
+  showRate?: boolean
+  // 是否显示状态
+  showStatus?: boolean
+  // 紧凑模式（只显示金额）
+  compact?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showRate: true,
+  showStatus: false,
+  compact: false
+})
+
+const formattedAmount = computed(() => formatMoney(props.amount))
+
+const commissionTypeLabel = computed(() => {
+  return props.type !== undefined ? getCommissionTypeLabel(props.type) : '-'
+})
+
+const statusLabel = computed(() => {
+  return props.status !== undefined ? getWithdrawStatusLabel(props.status) : '-'
+})
+
+const statusType = computed(() => {
+  return props.status !== undefined ? getWithdrawStatusType(props.status) : 'info'
+})
+</script>
+
+<style scoped lang="scss">
+.commission-display {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &.is-compact {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .commission-item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+
+    .commission-label {
+      color: var(--el-text-color-secondary);
+      margin-right: 8px;
+      white-space: nowrap;
+    }
+
+    .commission-value {
+      color: var(--el-text-color-primary);
+      font-weight: 500;
+
+      &.commission-amount {
+        color: var(--el-color-success);
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+  }
+
+  &.is-compact .commission-item {
+    .commission-label {
+      display: none;
+    }
+  }
+}
+</style>