@agentunion/kite 1.5.0 → 1.6.0

package/extensions/services/evol/web/src/views/CommissionView.vue

@@ -0,0 +1,1220 @@
+<template>
+  <div class="commission-view">
+    <h2 class="page-title">{{ t('commission.title') }}</h2>
+
+    <!-- 结算账户概览 -->
+    <div class="account-overview">
+      <div class="account-card">
+        <div class="account-label">{{ t('commission.commissionBalance') }}</div>
+        <div class="account-value primary">{{ formatCredits(account.commissionBalance) }}</div>
+      </div>
+      <div class="account-card">
+        <div class="account-label">{{ t('commission.totalCommission') }}</div>
+        <div class="account-value">{{ formatCredits(account.totalCommission) }}</div>
+      </div>
+      <div class="account-card">
+        <div class="account-label">{{ t('commission.totalWithdrawn') }}</div>
+        <div class="account-value">{{ formatCredits(account.totalWithdrawn) }}</div>
+      </div>
+      <div class="account-card" v-if="account.withdrawEnabled !== undefined">
+        <div class="account-label">{{ t('commission.exchangeRate') }}</div>
+        <div class="account-value small">{{ t('commission.exchangeRateDesc', { n: account.exchangeRate || '-' }) }}</div>
+      </div>
+    </div>
+
+    <!-- Tab 切换 -->
+    <div class="commission-tabs">
+      <div class="tab-item" :class="{ active: activeTab === 'activity' }" @click="activeTab = 'activity'">
+        {{ t('commission.currentActivity') }}
+      </div>
+      <div class="tab-item" :class="{ active: activeTab === 'summary' }" @click="activeTab = 'summary'">
+        {{ t('commission.summary') }}
+      </div>
+      <div class="tab-item" :class="{ active: activeTab === 'records' }" @click="activeTab = 'records'">
+        {{ t('commission.records') }}
+      </div>
+      <div class="tab-item" :class="{ active: activeTab === 'withdraw' }" @click="activeTab = 'withdraw'">
+        {{ t('commission.transfer') }} / {{ t('commission.withdraw') }}
+      </div>
+      <div class="tab-item" :class="{ active: activeTab === 'withdrawals' }" @click="activeTab = 'withdrawals'">
+        {{ t('commission.withdrawals') }}
+      </div>
+    </div>
+
+    <!-- Tab 内容 -->
+    <div class="tab-content">
+
+      <!-- 活动参与 -->
+      <div v-if="activeTab === 'activity'" class="tab-panel">
+        <!-- 当前参与状态 -->
+        <div v-if="participation" class="current-participation">
+          <div class="section-title">{{ t('commission.currentActivity') }}</div>
+          <div class="participation-card">
+            <div class="participation-info">
+              <div class="participation-name">{{ getActivityName(participation.activityId) }}</div>
+              <div class="participation-meta">
+                {{ t('commission.joinTime') }}: {{ formatTime(participation.joinTime) }}
+              </div>
+            </div>
+            <button class="btn btn-danger" @click="handleQuit">{{ t('commission.quitActivity') }}</button>
+          </div>
+        </div>
+        <div v-else class="empty-state">
+          <div class="empty-text">{{ t('commission.notJoined') }}</div>
+        </div>
+
+        <!-- 活动列表 -->
+        <div class="section-title" style="margin-top: 24px">{{ t('commission.activities') }}</div>
+        <div v-if="loadingActivities" class="loading">{{ t('common.loading') }}</div>
+        <div v-else-if="activities.length === 0" class="empty">{{ t('commission.noActivities') }}</div>
+        <div v-else class="activities-list">
+          <div v-for="act in activities" :key="act.id" class="activity-card">
+            <div class="activity-header">
+              <div class="activity-name">{{ act.activityName }}</div>
+              <span class="activity-badge" :class="'badge-' + (act.visibility || '').toLowerCase()">
+                {{ getVisibilityLabel(act.visibility) }}
+              </span>
+            </div>
+            <div class="activity-desc">{{ act.activityDesc }}</div>
+            <div class="activity-details">
+              <div class="detail-item">
+                <span class="detail-label">{{ t('commission.commissionMode') }}</span>
+                <span class="detail-value">
+                  {{ act.commissionMode === 'FIXED' ? t('commission.modeFixed') : t('commission.modeLadder') }}
+                  <template v-if="act.commissionMode === 'FIXED' && act.fixedRate">
+                    ({{ act.fixedRate }}%)
+                  </template>
+                </span>
+              </div>
+              <div class="detail-item" v-if="act.startTime">
+                <span class="detail-label">{{ t('commission.activityTime') }}</span>
+                <span class="detail-value">{{ formatDate(act.startTime) }} ~ {{ formatDate(act.endTime) }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">{{ t('commission.maxCommission') }}</span>
+                <span class="detail-value">
+                  {{ act.maxCommissionPerInviter ? formatCredits(act.maxCommissionPerInviter) : t('commission.noLimit') }}
+                </span>
+              </div>
+              <!-- 阶梯规则 -->
+              <div v-if="act.commissionMode === 'LADDER' && act.ladderRules" class="ladder-rules">
+                <div class="detail-label">{{ t('commission.modeLadder') }}</div>
+                <div class="ladder-table">
+                  <div v-for="(rule, idx) in parseLadderRules(act.ladderRules)" :key="idx" class="ladder-row">
+                    <span>{{ formatCredits(rule.min) }} ~ {{ rule.max ? formatCredits(rule.max) : '∞' }}</span>
+                    <span class="ladder-rate">{{ rule.rate }}%</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="activity-actions">
+              <!-- 邀请码输入（INVITE_ONLY） -->
+              <div v-if="act.visibility === 'INVITE_ONLY' && !participation" class="invite-code-input">
+                <input
+                  v-model="inviteCodeMap[act.id]"
+                  :placeholder="t('commission.inviteCodePlaceholder')"
+                  class="input-field"
+                />
+              </div>
+              <button
+                v-if="!participation || participation.activityId !== act.id"
+                class="btn btn-primary"
+                :disabled="!!participation"
+                @click="handleJoin(act)"
+              >
+                {{ t('commission.joinActivity') }}
+              </button>
+              <span v-else class="joined-badge">{{ t('commission.currentActivity') }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分润汇总 -->
+      <div v-if="activeTab === 'summary'" class="tab-panel">
+        <div v-if="summaryList.length === 0" class="empty">{{ t('commission.noSummary') }}</div>
+        <div v-else class="summary-list">
+          <div v-for="item in summaryList" :key="item.activityId" class="summary-card">
+            <div class="summary-header">{{ getActivityName(item.activityId) }}</div>
+            <div class="summary-grid">
+              <div class="summary-item">
+                <div class="summary-label">{{ t('commission.commissionCredits') }}</div>
+                <div class="summary-value primary">{{ formatCredits(item.totalCommissionCredits) }}</div>
+              </div>
+              <div class="summary-item">
+                <div class="summary-label">{{ t('commission.totalConsumed') }}</div>
+                <div class="summary-value">{{ formatCredits(item.totalConsumedCredits) }}</div>
+              </div>
+              <div class="summary-item">
+                <div class="summary-label">{{ t('commission.totalInvitees') }}</div>
+                <div class="summary-value">{{ item.totalInviteeCount }}</div>
+              </div>
+              <div class="summary-item">
+                <div class="summary-label">{{ t('commission.totalSettles') }}</div>
+                <div class="summary-value">{{ item.totalSettleCount }}</div>
+              </div>
+              <div class="summary-item" v-if="item.lastSettleDate">
+                <div class="summary-label">{{ t('commission.lastSettle') }}</div>
+                <div class="summary-value">{{ item.lastSettleDate }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分润明细 -->
+      <div v-if="activeTab === 'records'" class="tab-panel">
+        <div class="filter-bar">
+          <input type="date" v-model="recordStartDate" class="input-field" />
+          <input type="date" v-model="recordEndDate" class="input-field" />
+          <button class="btn btn-ghost" @click="loadRecords">{{ t('common.confirm') }}</button>
+        </div>
+        <div v-if="loadingRecords" class="loading">{{ t('common.loading') }}</div>
+        <div v-else-if="records.length === 0" class="empty">{{ t('commission.noRecords') }}</div>
+        <div v-else class="records-list">
+          <div v-for="rec in records" :key="rec.id" class="record-card">
+            <div class="record-header">
+              <span class="record-date">{{ rec.settleDate }}</span>
+              <span class="record-status" :class="'status-' + rec.status">{{ getSettleStatus(rec.status) }}</span>
+            </div>
+            <div class="record-details">
+              <div class="record-row">
+                <span class="record-label">{{ t('commission.consumeSource') }}</span>
+                <span>{{ rec.consumeSource === 'PERSONAL' ? t('commission.sourcePersonal') : t('commission.sourceTeam') }}</span>
+              </div>
+              <div class="record-row">
+                <span class="record-label">{{ t('commission.consumedCredits') }}</span>
+                <span class="mono">{{ formatCredits(rec.consumedCredits) }}</span>
+              </div>
+              <div class="record-row">
+                <span class="record-label">{{ t('commission.commissionRate') }}</span>
+                <span>{{ rec.commissionRate }}%</span>
+              </div>
+              <div class="record-row">
+                <span class="record-label">{{ t('commission.commissionCredits') }}</span>
+                <span class="mono primary-text">+{{ formatCredits(rec.commissionCredits) }}</span>
+              </div>
+              <div class="record-row" v-if="rec.grantTime">
+                <span class="record-label">{{ t('commission.grantTime') }}</span>
+                <span>{{ formatTime(rec.grantTime) }}</span>
+              </div>
+              <div class="record-row" v-if="rec.failReason">
+                <span class="record-label">{{ t('commission.statusFailed') }}</span>
+                <span class="error-text">{{ rec.failReason }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 划转 / 提现 -->
+      <div v-if="activeTab === 'withdraw'" class="tab-panel">
+        <div class="withdraw-section">
+          <!-- 划转 -->
+          <div class="withdraw-card">
+            <div class="withdraw-title">{{ t('commission.transfer') }}</div>
+            <div class="withdraw-desc">{{ t('commission.transferDesc') }}</div>
+            <div class="withdraw-form">
+              <input
+                v-model.number="transferAmount"
+                type="number"
+                :placeholder="t('commission.creditsAmountPlaceholder')"
+                class="input-field"
+                min="1"
+              />
+              <button class="btn btn-primary" @click="handleTransfer" :disabled="!transferAmount || transferAmount <= 0">
+                {{ t('commission.transfer') }}
+              </button>
+            </div>
+          </div>
+
+          <!-- 提现 -->
+          <div class="withdraw-card">
+            <div class="withdraw-title">{{ t('commission.withdraw') }}</div>
+            <div class="withdraw-desc">{{ t('commission.withdrawDesc') }}</div>
+            <div v-if="!account.withdrawEnabled" class="withdraw-disabled">
+              {{ t('commission.withdrawDisabled') }}
+            </div>
+            <template v-else>
+              <div class="withdraw-info">
+                <span>{{ t('commission.minWithdraw') }}: {{ formatCredits(Number(account.minWithdrawCredits) || 0) }}</span>
+                <span>{{ t('commission.exchangeRate') }}: {{ t('commission.exchangeRateDesc', { n: account.exchangeRate || '-' }) }}</span>
+              </div>
+              <div class="withdraw-form">
+                <input
+                  v-model.number="withdrawAmount"
+                  type="number"
+                  :placeholder="t('commission.creditsAmountPlaceholder')"
+                  class="input-field"
+                  min="1"
+                />
+                <div v-if="withdrawAmount > 0 && account.exchangeRate" class="cash-preview">
+                  ≈ ¥{{ (withdrawAmount / Number(account.exchangeRate)).toFixed(2) }}
+                </div>
+                <button class="btn btn-primary" @click="handleWithdraw" :disabled="!withdrawAmount || withdrawAmount <= 0">
+                  {{ t('commission.withdraw') }}
+                </button>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- 提现/划转记录 -->
+      <div v-if="activeTab === 'withdrawals'" class="tab-panel">
+        <div class="filter-bar">
+          <input type="date" v-model="withdrawalStartDate" class="input-field" />
+          <input type="date" v-model="withdrawalEndDate" class="input-field" />
+          <button class="btn btn-ghost" @click="loadWithdrawals">{{ t('common.confirm') }}</button>
+        </div>
+        <div v-if="loadingWithdrawals" class="loading">{{ t('common.loading') }}</div>
+        <div v-else-if="withdrawals.length === 0" class="empty">{{ t('commission.noWithdrawals') }}</div>
+        <div v-else class="records-list">
+          <div v-for="w in withdrawals" :key="w.id" class="record-card">
+            <div class="record-header">
+              <span class="record-date">{{ formatTime(w.createTime) }}</span>
+              <span class="record-status" :class="'status-' + w.status">{{ getWithdrawStatus(w.status) }}</span>
+            </div>
+            <div class="record-details">
+              <div class="record-row">
+                <span class="record-label">{{ t('commission.withdrawType') }}</span>
+                <span>{{ w.withdrawType === 'TRANSFER' ? t('commission.typeTransfer') : t('commission.typeCash') }}</span>
+              </div>
+              <div class="record-row">
+                <span class="record-label">{{ t('commission.creditsAmount') }}</span>
+                <span class="mono">{{ formatCredits(w.creditsAmount) }}</span>
+              </div>
+              <div class="record-row" v-if="w.withdrawType === 'CASH' && w.cashAmount != null">
+                <span class="record-label">{{ t('commission.cashAmount') }}</span>
+                <span class="mono">¥{{ Number(w.cashAmount).toFixed(2) }}</span>
+              </div>
+              <div class="record-row">
+                <span class="record-label">{{ t('commission.balanceBefore') }}</span>
+                <span class="mono">{{ formatCredits(w.balanceBefore) }}</span>
+              </div>
+              <div class="record-row">
+                <span class="record-label">{{ t('commission.balanceAfter') }}</span>
+                <span class="mono">{{ formatCredits(w.balanceAfter) }}</span>
+              </div>
+              <div class="record-row" v-if="w.failReason">
+                <span class="record-label">{{ t('commission.statusFailure') }}</span>
+                <span class="error-text">{{ w.failReason }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { useConnectionStore } from '@/stores/connection'
+import { useI18n } from '@/i18n'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const authStore = useAuthStore()
+const connectionStore = useConnectionStore()
+const { t } = useI18n()
+
+const activeTab = ref('activity')
+
+// 活动相关
+const activities = ref<any[]>([])
+const loadingActivities = ref(false)
+const participation = ref<any>(null)
+const inviteCodeMap = reactive<Record<number, string>>({})
+
+// 结算账户
+const account = reactive({
+  commissionBalance: 0,
+  totalCommission: 0,
+  totalWithdrawn: 0,
+  exchangeRate: '',
+  minWithdrawCredits: '',
+  withdrawEnabled: false,
+})
+
+// 汇总
+const summaryList = ref<any[]>([])
+
+// 明细
+const records = ref<any[]>([])
+const loadingRecords = ref(false)
+const recordStartDate = ref('')
+const recordEndDate = ref('')
+
+// 划转/提现
+const transferAmount = ref<number | null>(null)
+const withdrawAmount = ref<number | null>(null)
+
+// 提现记录
+const withdrawals = ref<any[]>([])
+const loadingWithdrawals = ref(false)
+const withdrawalStartDate = ref('')
+const withdrawalEndDate = ref('')
+
+// === 工具方法 ===
+
+function formatCredits(val: number | null | undefined): string {
+  if (val == null) return '0'
+  return val.toLocaleString()
+}
+
+function formatTime(time: string): string {
+  if (!time) return ''
+  return new Date(time).toLocaleString()
+}
+
+function formatDate(time: string): string {
+  if (!time) return ''
+  return time.split(' ')[0]
+}
+
+function getVisibilityLabel(v: string): string {
+  const map: Record<string, string> = {
+    PUBLIC: t('commission.visibilityPublic'),
+    VIP: t('commission.visibilityVip'),
+    INVITE_ONLY: t('commission.visibilityInviteOnly'),
+  }
+  return map[v] || v
+}
+
+function getSettleStatus(s: number): string {
+  const map: Record<number, string> = {
+    0: t('commission.statusPending'),
+    1: t('commission.statusGranted'),
+    2: t('commission.statusFailed'),
+    3: t('commission.statusCancelled'),
+  }
+  return map[s] || String(s)
+}
+
+function getWithdrawStatus(s: number): string {
+  const map: Record<number, string> = {
+    0: t('commission.statusProcessing'),
+    1: t('commission.statusSuccess'),
+    2: t('commission.statusFailure'),
+    3: t('commission.statusCancelled'),
+  }
+  return map[s] || String(s)
+}
+
+function getActivityName(activityId: number): string {
+  const act = activities.value.find(a => a.id === activityId)
+  return act?.activityName || `Activity #${activityId}`
+}
+
+function parseLadderRules(rulesStr: string): any[] {
+  try {
+    return JSON.parse(rulesStr)
+  } catch {
+    return []
+  }
+}
+
+// === API 调用 ===
+
+async function callRpc(method: string, params: Record<string, any> = {}) {
+  return await connectionStore.callRpc<any>(method, {
+    kiteToken: authStore.kiteToken,
+    ...params,
+  })
+}
+
+async function loadActivities() {
+  loadingActivities.value = true
+  try {
+    const result = await callRpc('evol.commission.get_activities')
+    if (result.success) {
+      activities.value = result.data || []
+    }
+  } catch (e: any) {
+    console.error('Load activities failed:', e)
+  } finally {
+    loadingActivities.value = false
+  }
+}
+
+async function loadParticipation() {
+  try {
+    const result = await callRpc('evol.commission.get_participation')
+    if (result.success) {
+      participation.value = result.data || null
+    }
+  } catch (e: any) {
+    console.error('Load participation failed:', e)
+  }
+}
+
+async function loadAccount() {
+  try {
+    const result = await callRpc('evol.commission.get_account')
+    if (result.success && result.data) {
+      Object.assign(account, result.data)
+    }
+  } catch (e: any) {
+    console.error('Load account failed:', e)
+  }
+}
+
+async function loadSummary() {
+  try {
+    const result = await callRpc('evol.commission.get_summary')
+    if (result.success) {
+      summaryList.value = result.data || []
+    }
+  } catch (e: any) {
+    console.error('Load summary failed:', e)
+  }
+}
+
+async function loadRecords() {
+  loadingRecords.value = true
+  try {
+    const params: Record<string, any> = {}
+    if (recordStartDate.value) params.startDate = recordStartDate.value
+    if (recordEndDate.value) params.endDate = recordEndDate.value
+    const result = await callRpc('evol.commission.get_records', params)
+    if (result.success) {
+      records.value = result.data || []
+    }
+  } catch (e: any) {
+    console.error('Load records failed:', e)
+  } finally {
+    loadingRecords.value = false
+  }
+}
+
+async function loadWithdrawals() {
+  loadingWithdrawals.value = true
+  try {
+    const params: Record<string, any> = {}
+    if (withdrawalStartDate.value) params.startDate = withdrawalStartDate.value
+    if (withdrawalEndDate.value) params.endDate = withdrawalEndDate.value
+    const result = await callRpc('evol.commission.get_withdrawals', params)
+    if (result.success) {
+      withdrawals.value = result.data || []
+    }
+  } catch (e: any) {
+    console.error('Load withdrawals failed:', e)
+  } finally {
+    loadingWithdrawals.value = false
+  }
+}
+
+// === 操作 ===
+
+async function handleJoin(act: any) {
+  try {
+    const params: Record<string, any> = { activityId: act.id }
+    if (act.visibility === 'INVITE_ONLY') {
+      const code = inviteCodeMap[act.id]
+      if (!code) {
+        ElMessage.warning(t('commission.inviteCodePlaceholder'))
+        return
+      }
+      params.inviteCode = code
+    }
+    const result = await callRpc('evol.commission.join', params)
+    if (result.success) {
+      ElMessage.success(result.msg || t('commission.joinSuccess'))
+      await loadParticipation()
+    } else {
+      ElMessage.error(result.msg || t('common.error'))
+    }
+  } catch (e: any) {
+    ElMessage.error(e.message || t('common.error'))
+  }
+}
+
+async function handleQuit() {
+  try {
+    await ElMessageBox.confirm(t('commission.confirmQuit'), t('common.confirm'), {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+
+  try {
+    const result = await callRpc('evol.commission.quit')
+    if (result.success) {
+      ElMessage.success(result.msg || t('commission.quitSuccess'))
+      participation.value = null
+    } else {
+      ElMessage.error(result.msg || t('common.error'))
+    }
+  } catch (e: any) {
+    ElMessage.error(e.message || t('common.error'))
+  }
+}
+
+async function handleTransfer() {
+  if (!transferAmount.value || transferAmount.value <= 0) return
+  try {
+    const result = await callRpc('evol.commission.transfer', { creditsAmount: transferAmount.value })
+    if (result.success) {
+      ElMessage.success(result.msg || t('commission.transferSuccess'))
+      transferAmount.value = null
+      await loadAccount()
+    } else {
+      ElMessage.error(result.msg || t('common.error'))
+    }
+  } catch (e: any) {
+    ElMessage.error(e.message || t('common.error'))
+  }
+}
+
+async function handleWithdraw() {
+  if (!withdrawAmount.value || withdrawAmount.value <= 0) return
+  try {
+    const result = await callRpc('evol.commission.withdraw', { creditsAmount: withdrawAmount.value })
+    if (result.success) {
+      ElMessage.success(result.msg || t('commission.withdrawSuccess'))
+      withdrawAmount.value = null
+      await loadAccount()
+    } else {
+      ElMessage.error(result.msg || t('common.error'))
+    }
+  } catch (e: any) {
+    ElMessage.error(e.message || t('common.error'))
+  }
+}
+
+// === 初始化 ===
+
+async function loadAll() {
+  if (!authStore.kiteToken || connectionStore.status !== 'connected') return
+  await Promise.all([
+    loadActivities(),
+    loadParticipation(),
+    loadAccount(),
+    loadSummary(),
+  ])
+}
+
+onMounted(() => {
+  loadAll()
+})
+
+watch(() => connectionStore.status, (s) => {
+  if (s === 'connected') setTimeout(loadAll, 500)
+})
+
+watch(activeTab, (tab) => {
+  if (tab === 'records' && records.value.length === 0) loadRecords()
+  else if (tab === 'withdrawals' && withdrawals.value.length === 0) loadWithdrawals()
+})
+</script>
+
+<style scoped>
+.commission-view {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+/* 结算账户概览 */
+.account-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.account-card {
+  background: var(--panel-bg);
+  backdrop-filter: var(--panel-blur);
+  -webkit-backdrop-filter: var(--panel-blur);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  box-shadow: var(--panel-shadow);
+  border: 1px solid var(--border-color);
+  text-align: center;
+}
+
+.account-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 8px;
+}
+
+.account-value {
+  font-size: 28px;
+  font-weight: 700;
+  font-family: 'Spline Sans Mono', monospace;
+  color: var(--text-primary);
+}
+
+.account-value.primary {
+  color: var(--primary);
+}
+
+.account-value.small {
+  font-size: 16px;
+}
+
+/* Tab 切换 */
+.commission-tabs {
+  display: flex;
+  gap: 8px;
+  border-bottom: 1px solid var(--border-color);
+  padding: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.commission-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-item {
+  padding: 12px 20px;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.2s;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  bottom: -1px;
+  background: transparent;
+}
+
+.tab-item:hover {
+  color: var(--text-primary);
+}
+
+.tab-item.active {
+  color: var(--primary);
+  border-bottom-color: var(--primary);
+}
+
+/* Tab 内容 */
+.tab-content {
+  background: var(--panel-bg);
+  backdrop-filter: var(--panel-blur);
+  -webkit-backdrop-filter: var(--panel-blur);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  box-shadow: var(--panel-shadow);
+  border: 1px solid var(--border-color);
+  min-height: 400px;
+}
+
+.tab-panel {
+  animation: fadeIn 0.3s;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+}
+
+/* 活动卡片 */
+.activities-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.activity-card {
+  background: var(--btn-ghost-bg);
+  border-radius: var(--radius);
+  border: 1px solid var(--border-color);
+  padding: 24px;
+  transition: background 0.2s;
+}
+
+.activity-card:hover {
+  background: var(--border-color);
+}
+
+.activity-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.activity-name {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.activity-badge {
+  padding: 4px 12px;
+  border-radius: var(--radius-pill);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.badge-public {
+  background: rgba(34, 197, 94, 0.15);
+  color: #22c55e;
+}
+
+.badge-vip {
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  color: #422006;
+}
+
+.badge-invite_only {
+  background: rgba(139, 92, 246, 0.15);
+  color: #8b5cf6;
+}
+
+.activity-desc {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 16px;
+  line-height: 1.5;
+}
+
+.activity-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+}
+
+.detail-label {
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.detail-value {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.ladder-rules {
+  margin-top: 8px;
+}
+
+.ladder-table {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ladder-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 12px;
+  background: var(--panel-bg);
+  border-radius: 6px;
+  font-size: 13px;
+  font-family: 'Spline Sans Mono', monospace;
+}
+
+.ladder-rate {
+  color: var(--primary);
+  font-weight: 700;
+}
+
+.activity-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.invite-code-input {
+  flex: 1;
+  max-width: 240px;
+}
+
+.joined-badge {
+  padding: 8px 20px;
+  border-radius: var(--radius-pill);
+  background: rgba(34, 197, 94, 0.15);
+  color: #22c55e;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* 当前参与 */
+.current-participation {
+  margin-bottom: 16px;
+}
+
+.participation-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  background: rgba(34, 197, 94, 0.08);
+  border: 1px solid rgba(34, 197, 94, 0.2);
+  border-radius: var(--radius);
+}
+
+.participation-name {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.participation-meta {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 32px;
+  margin-bottom: 16px;
+}
+
+.empty-text {
+  color: var(--text-muted);
+  font-size: 15px;
+}
+
+/* 汇总 */
+.summary-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.summary-card {
+  background: var(--btn-ghost-bg);
+  border-radius: var(--radius);
+  border: 1px solid var(--border-color);
+  padding: 24px;
+}
+
+.summary-header {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 16px;
+}
+
+.summary-item {
+  text-align: center;
+}
+
+.summary-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 4px;
+}
+
+.summary-value {
+  font-size: 20px;
+  font-weight: 700;
+  font-family: 'Spline Sans Mono', monospace;
+  color: var(--text-primary);
+}
+
+.summary-value.primary {
+  color: var(--primary);
+}
+
+/* 筛选栏 */
+.filter-bar {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* 明细记录 */
+.records-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.record-card {
+  background: var(--btn-ghost-bg);
+  border-radius: var(--radius);
+  border: 1px solid var(--border-color);
+  padding: 18px 22px;
+}
+
+.record-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.record-date {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-family: 'Spline Sans Mono', monospace;
+}
+
+.record-status {
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.status-0 {
+  background: rgba(234, 179, 8, 0.15);
+  color: #eab308;
+}
+
+.status-1 {
+  background: rgba(34, 197, 94, 0.15);
+  color: #22c55e;
+}
+
+.status-2 {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+}
+
+.status-3 {
+  background: rgba(156, 163, 175, 0.15);
+  color: #9ca3af;
+}
+
+.record-details {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.record-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+}
+
+.record-label {
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.mono {
+  font-family: 'Spline Sans Mono', monospace;
+}
+
+.primary-text {
+  color: var(--primary);
+  font-weight: 700;
+}
+
+.error-text {
+  color: var(--error, #ef4444);
+}
+
+/* 划转/提现 */
+.withdraw-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.withdraw-card {
+  background: var(--btn-ghost-bg);
+  border-radius: var(--radius);
+  border: 1px solid var(--border-color);
+  padding: 28px;
+}
+
+.withdraw-title {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.withdraw-desc {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
+.withdraw-disabled {
+  padding: 16px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 14px;
+  background: var(--panel-bg);
+  border-radius: 8px;
+}
+
+.withdraw-info {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 16px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.withdraw-form {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.cash-preview {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--primary);
+  font-family: 'Spline Sans Mono', monospace;
+}
+
+/* 通用元素 */
+.input-field {
+  padding: 10px 16px;
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  background: var(--panel-bg);
+  color: var(--text-primary);
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.input-field:focus {
+  border-color: var(--primary);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 22px;
+  border-radius: var(--radius-pill);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+}
+
+.btn-primary:hover:not(:disabled) {
+  filter: brightness(1.1);
+  transform: translateY(-1px);
+}
+
+.btn-danger {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+.btn-ghost {
+  background: var(--btn-ghost-bg);
+  color: var(--btn-ghost-text);
+  border-color: var(--border-color);
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background: var(--border-color);
+}
+
+.loading, .empty {
+  text-align: center;
+  padding: 40px;
+  color: var(--text-muted);
+}
+
+@media (max-width: 768px) {
+  .account-overview {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .tab-content {
+    padding: 24px 16px;
+  }
+
+  .activity-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .participation-card {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+
+  .filter-bar {
+    flex-direction: column;
+  }
+
+  .withdraw-form {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .withdraw-info {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+</style>