audio_codebuddy/my-uniapp-vue3/src/pages/mine/index.vue

<template>
  <view class="page">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <image v-if="userStore.userInfo?.avatar" :src="userStore.userInfo.avatar" class="avatar" mode="aspectFill" />
        <view v-else class="avatar-placeholder">
          <text class="avatar-text">👤</text>
        </view>
        <view class="user-text">
          <text class="nickname">{{ userStore.userInfo?.nickname || '未登录' }}</text>
          <view class="member-badge" :class="memberClass">
            <text class="member-text">{{ memberText }}</text>
          </view>
        </view>
      </view>

      <!-- 积分余额（两行展示） -->
      <view class="credits-section" v-if="tokenBalance">
        <view class="credit-row">
          <view class="credit-item">
            <text class="credit-label">📋 订阅积分</text>
            <text class="credit-value">{{ formatNumber(tokenBalance.subscriptionRemaining ?? tokenBalance.remainingTokens) }}</text>
            <text class="credit-sub" v-if="tokenBalance.subscriptionTokens">/ {{ formatNumber(tokenBalance.subscriptionTokens) }} 总量</text>
          </view>
          <view class="credit-divider" />
          <view class="credit-item">
            <text class="credit-label">🎁 积分包</text>
            <text class="credit-value">{{ formatNumber(tokenBalance.packRemaining ?? 0) }}</text>
            <text class="credit-sub" v-if="tokenBalance.packTokens > 0">/ {{ formatNumber(tokenBalance.packTokens) }} 总量</text>
            <text class="credit-sub" v-else>暂无</text>
          </view>
        </view>
        <!-- 进度条 -->
        <view class="credit-bar-row">
          <view class="credit-bar" :style="{ flex: tokenBalance.subscriptionTokens || 1 }">
            <view class="credit-bar-fill sub" :style="{ width: subscriptionPercent + '%' }"></view>
          </view>
          <view class="credit-bar-gap" />
          <view class="credit-bar" :style="{ flex: tokenBalance.packTokens || 1 }">
            <view class="credit-bar-fill pack" :style="{ width: packPercent + '%' }"></view>
          </view>
        </view>
      </view>

      <!-- 使用统计 -->
      <view class="stats-row" v-if="userStore.memberStatus">
        <view class="stat-item">
          <text class="stat-value">{{ userStore.memberStatus.quota.dailyRemaining }}</text>
          <text class="stat-label">今日次数</text>
        </view>
        <view class="stat-divider" />
        <view class="stat-item">
          <text class="stat-value">{{ userStore.memberStatus.quota.wordLimit === 0 ? '∞' : userStore.memberStatus.quota.wordLimit }}</text>
          <text class="stat-label">字数上限</text>
        </view>
      </view>
    </view>

    <!-- 今日创作概况 -->
    <view class="today-card" v-if="userStore.isLoggedIn">
      <view class="today-header">
        <text class="today-title">今日创作概况</text>
        <text class="today-date">{{ todayDate }}</text>
      </view>
      <view class="today-stats">
        <view class="today-stat-item">
          <text class="today-stat-value">{{ todayStats.audioCount }}</text>
          <text class="today-stat-label">生成音频</text>
        </view>
        <view class="today-stat-divider" />
        <view class="today-stat-item">
          <text class="today-stat-value">{{ todayStats.bookCount }}</text>
          <text class="today-stat-label">生成书籍</text>
        </view>
        <view class="today-stat-divider" />
        <view class="today-stat-item">
          <text class="today-stat-value">{{ todayStats.usageQuota }}</text>
          <text class="today-stat-label">使用额度</text>
        </view>
      </view>
    </view>

    <!-- 最近的创作 -->
    <view class="recent-card" v-if="recentCreations.length > 0">
      <view class="recent-header">
        <text class="recent-title">最近的创作</text>
        <text class="recent-more" @click="goHistory">查看更多 ›</text>
      </view>
      <view class="recent-list">
        <view
          v-for="item in recentCreations"
          :key="item._id"
          class="recent-item"
          hover-class="recent-item-hover"
          @click="goToDetail(item)"
        >
          <view class="recent-cover" :style="{ background: getCoverGradient(item.voiceId) }">
            <text class="cover-letter">{{ getTitleLetter(item.title) }}</text>
            <text class="cover-title-small">{{ item.title }}</text>
          </view>
          <view class="recent-info">
            <text class="recent-title-text">{{ item.title }}</text>
            <text class="recent-meta">{{ item.wordCount }}字 · {{ formatDate(item.createdAt) }}</text>
          </view>
          <text class="recent-arrow">›</text>
        </view>
      </view>
    </view>

    <!-- 升级会员推广卡片 -->
    <view class="upgrade-card" v-if="userStore.isLoggedIn && !userStore.isMember" @click="goMember">
      <view class="upgrade-left">
        <text class="upgrade-icon">👑</text>
        <view class="upgrade-text">
          <text class="upgrade-title">升级会员</text>
          <text class="upgrade-desc">解锁更多创作次数和高级音色</text>
        </view>
      </view>
      <text class="upgrade-btn">立即开通</text>
    </view>

    <!-- 功能入口 -->
    <view class="menu-section">
      <view class="menu-item" @click="goBookGenerator">
        <text class="menu-icon">📖</text>
        <text class="menu-text">书籍生成</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="goMember">
        <text class="menu-icon">👑</text>
        <text class="menu-text">会员中心</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="goSettings">
        <text class="menu-icon">⚙️</text>
        <text class="menu-text">设置</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="goTokenPacks">
        <text class="menu-icon">🎁</text>
        <text class="menu-text">购买积分包</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="goInvite">
        <text class="menu-icon">🎁</text>
        <text class="menu-text">邀请好友 · 双方得10000积分</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="goOrders">
        <text class="menu-icon">📋</text>
        <text class="menu-text">订单记录</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="goBilling">
        <text class="menu-icon">💰</text>
        <text class="menu-text">消费账单</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="goHistory">
        <text class="menu-icon">📜</text>
        <text class="menu-text">历史记录</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="showAbout">
        <text class="menu-icon">ℹ️</text>
        <text class="menu-text">关于我们</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="showFeedback">
        <text class="menu-icon">💬</text>
        <text class="menu-text">意见反馈</text>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item" @click="goTextToVideo">
        <text class="menu-icon">🎬</text>
        <text class="menu-text">文本生成视频</text>
        <text class="menu-tag">新功能</text>
        <text class="menu-arrow">›</text>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section" v-if="userStore.isLoggedIn">
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useUserStore } from '../../store/user';
import { get } from '../../utils/request';
import { formatNumber } from '../../utils/format';
import type { AudioItem } from '../../types';
import { getCoverGradient, getTitleLetter } from '../../composables/useCoverStyle';
import { getTodayStartISO } from '../../utils/time';

const userStore = useUserStore();

// 积分余额
const tokenBalance = ref<any>(null);

const subscriptionPercent = computed(() => {
  if (!tokenBalance.value || !tokenBalance.value.subscriptionTokens) return 100;
  return tokenBalance.value.subscriptionTokens > 0
    ? Math.round((tokenBalance.value.subscriptionRemaining || 0) / tokenBalance.value.subscriptionTokens * 100)
    : 100;
});

const packPercent = computed(() => {
  if (!tokenBalance.value || !tokenBalance.value.packTokens) return 0;
  return tokenBalance.value.packTokens > 0
    ? Math.round((tokenBalance.value.packRemaining || 0) / tokenBalance.value.packTokens * 100)
    : 0;
});

// 今日创作概况
const todayStats = ref({
  audioCount: 0,
  bookCount: 0,
  usageQuota: 0
});

// 最近的创作
const recentCreations = ref<AudioItem[]>([]);

// 今日日期
const todayDate = computed(() => {
  const now = new Date();
  return `${now.getMonth() + 1}月${now.getDate()}日`;
});

// 计算属性
const memberClass = computed(() => {
  const level = userStore.memberStatus?.level || 0;
  return `level-${level}`;
});

const memberText = computed(() => {
  return userStore.memberStatus?.levelName || '免费用户';
});

// 获取积分余额
async function loadTokenBalance() {
  try {
    tokenBalance.value = await get('/subscription/balance');
  } catch (error) {
    console.error('获取积分余额失败:', error);
  }
}

// 获取今日创作概况
async function fetchTodayStats() {
  try {
    const startDate = getTodayStartISO();

    // 获取今日音频数
    const audioResult = await get<{ list: AudioItem[]; total: number }>('/history', {
      startDate,
      pageSize: 100
    });

    // 获取今日书籍数（从书籍生成记录获取）
    let bookCount = 0;
    try {
      const bookResult = await get<{ list: any[]; total: number }>('/book-generator/list', {
        startDate,
        pageSize: 100
      });
      bookCount = bookResult.total || 0;
    } catch (e) {
      // 书籍接口可能不存在
      console.log('[Mine] 书籍接口不存在', e);
    }

    todayStats.value = {
      audioCount: audioResult.total || 0,
      bookCount,
      usageQuota: userStore.memberStatus?.quota.dailyRemaining || 0
    };
  } catch (error) {
    console.log('[Mine] 获取今日概况失败', error);
  }
}

// 获取最近的创作
async function fetchRecentCreations() {
  try {
    const result = await get<{ list: AudioItem[]; total: number }>('/history', {
      pageSize: 3,
      sortBy: 'createdAt',
      sortOrder: 'desc'
    });
    recentCreations.value = (result.list || []).slice(0, 3);
  } catch (error) {
    console.log('[Mine] 获取最近创作失败', error);
  }
}


// 格式化日期
function formatDate(dateStr: string): string {
  const date = new Date(dateStr);
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  const oneDay = 24 * 60 * 60 * 1000;

  if (diff < oneDay) return '今天';
  if (diff < 2 * oneDay) return '昨天';
  return `${date.getMonth() + 1}/${date.getDate()}`;
}

// 跳转到历史记录页
function goToDetail(item: AudioItem) {
  uni.navigateTo({ url: '/pages/history/index' });
}

// 页面显示
onShow(() => {
  if (userStore.isLoggedIn) {
    userStore.fetchMemberStatus();
    loadTokenBalance();
    fetchTodayStats();
    fetchRecentCreations();
  } else {
    // 未登录，跳转到登录页
    uni.navigateTo({ url: '/pages/login/index' });
  }
});

// 跳转会员页
function goMember() {
  uni.navigateTo({ url: '/pages/member/index' });
}

// 跳转设置页
function goSettings() {
  uni.navigateTo({ url: '/pages/settings/index' });
}

// 跳转日志监控页
function goLogs() {
  uni.navigateTo({ url: '/pages/logs/index' });
}

// 跳转 Token 包购买
function goTokenPacks() {
  uni.navigateTo({ url: '/pages/token-packs/index' });
}

// 跳转邀请页
function goInvite() {
  uni.navigateTo({ url: '/pages/invite/index' });
}

// 跳转订单记录
function goOrders() {
  uni.navigateTo({ url: '/pages/orders/index' });
}

// 跳转消费账单
function goBilling() {
  uni.navigateTo({ url: '/pages/billing/index' });
}

// 跳转历史页
function goHistory() {
  uni.switchTab({ url: '/pages/history/index' });
}

// 跳转文本生成视频页
function goTextToVideo() {
  uni.navigateTo({ url: '/pages/text-to-video/index' });
}

// 跳转书籍生成页
function goBookGenerator() {
  uni.switchTab({ url: '/pages/book-generator/index' });
}

// 关于我们
function showAbout() {
  uni.showModal({
    title: '关于声工坊',
    content: '声工坊是一款智能文本转语音工具，帮助您轻松制作高质量音频内容。\n\n版本: 1.0.0',
    showCancel: false,
  });
}

// 意见反馈
function showFeedback() {
  uni.showModal({
    title: '意见反馈',
    content: '如有问题或建议，请联系客服：\n邮箱：support@example.com',
    showCancel: false,
  });
}

// 退出登录
function handleLogout() {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        userStore.logout();
        uni.showToast({ title: '已退出登录', icon: 'success' });
        // 关闭所有页面，打开登录页
        uni.reLaunch({ url: '/pages/login/index' });
      }
    },
  });
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: var(--color-bg-page, #f3f4f6);
  padding-bottom: 120rpx;
}

/* --- 用户信息卡片 --- */
.user-card {
  margin: 24rpx 24rpx 20rpx;
  background: linear-gradient(135deg, var(--color-primary-600, #4f46e5) 0%, #7c3aed 100%);
  border-radius: var(--radius-lg, 24rpx);
  padding: 40rpx 32rpx 32rpx;
  box-shadow: var(--shadow-primary, 0 4rpx 20rpx rgba(79, 70, 229, 0.25));
  position: relative;
  overflow: hidden;
}

.user-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 280rpx;
  height: 280rpx;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  pointer-events: none;
}

.user-card::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 200rpx;
  height: 200rpx;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 50%;
  pointer-events: none;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 28rpx;
  position: relative;
  z-index: 1;
}

.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  border: 3rpx solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
}

.avatar-placeholder {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid rgba(255, 255, 255, 0.4);
}

.avatar-text {
  font-size: 48rpx;
}

.user-text {
  margin-left: 24rpx;
}

.nickname {
  display: block;
  font-size: var(--text-xl, 36rpx);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8rpx;
  letter-spacing: -0.3rpx;
}

.member-badge {
  display: inline-block;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.member-badge.level-1 {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.9), rgba(251, 146, 60, 0.9));
}
.member-badge.level-2 {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(252, 211, 77, 0.9));
}

.member-text {
  font-size: 22rpx;
  color: #ffffff;
  font-weight: 600;
}

/* 积分余额区域 */
.credits-section {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md, 16rpx);
  padding: 20rpx 24rpx;
  margin-bottom: 12rpx;
  backdrop-filter: blur(8px);
}

.credit-row {
  display: flex;
  align-items: center;
}

.credit-item {
  flex: 1;
  text-align: center;
}

.credit-label {
  display: block;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6rpx;
}

.credit-value {
  display: block;
  font-size: 34rpx;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5rpx;
}

.credit-sub {
  display: block;
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2rpx;
}

.credit-divider {
  width: 1rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.2);
}

/* 双进度条 */
.credit-bar-row {
  display: flex;
  align-items: center;
  margin-top: 14rpx;
  gap: 8rpx;
}

.credit-bar {
  height: 5rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3rpx;
  overflow: hidden;
}

.credit-bar-gap {
  width: 6rpx;
}

.credit-bar-fill {
  height: 100%;
  border-radius: 3rpx;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.credit-bar-fill.sub {
  background: #34d399;
}
.credit-bar-fill.pack {
  background: #fbbf24;
}

/* 使用统计 */
.stats-row {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md, 16rpx);
  padding: 20rpx 24rpx;
  backdrop-filter: blur(8px);
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 32rpx;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5rpx;
}

.stat-label {
  display: block;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4rpx;
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.2);
}

/* --- 今日创作概况 --- */
.today-card {
  margin: 0 24rpx 20rpx;
  background: var(--color-bg-card, #ffffff);
  border-radius: var(--radius-lg, 24rpx);
  padding: 32rpx;
  box-shadow: var(--shadow-xs, 0 1rpx 2rpx rgba(0,0,0,0.04));
}

.today-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28rpx;
}

.today-title {
  font-size: var(--text-base, 28rpx);
  font-weight: 700;
  color: var(--color-text-primary, #111827);
  letter-spacing: -0.2rpx;
}

.today-date {
  font-size: var(--text-sm, 24rpx);
  color: var(--color-text-tertiary, #9ca3af);
}

.today-stats {
  display: flex;
  align-items: center;
}

.today-stat-item {
  flex: 1;
  text-align: center;
}

.today-stat-value {
  display: block;
  font-size: 40rpx;
  font-weight: 800;
  color: var(--color-primary-600, #4f46e5);
  letter-spacing: -0.5rpx;
}

.today-stat-label {
  display: block;
  font-size: 22rpx;
  color: var(--color-text-secondary, #4b5563);
  margin-top: 6rpx;
}

.today-stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: var(--color-bg-divider, #e5e7eb);
}

/* --- 最近的创作 --- */
.recent-card {
  margin: 0 24rpx 20rpx;
  background: var(--color-bg-card, #ffffff);
  border-radius: var(--radius-lg, 24rpx);
  padding: 32rpx;
  box-shadow: var(--shadow-xs, 0 1rpx 2rpx rgba(0,0,0,0.04));
}

.recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.recent-title {
  font-size: var(--text-base, 28rpx);
  font-weight: 700;
  color: var(--color-text-primary, #111827);
}

.recent-more {
  font-size: var(--text-sm, 24rpx);
  color: var(--color-primary-600, #4f46e5);
  font-weight: 500;
}

.recent-list {
  display: flex;
  flex-direction: column;
}

.recent-item {
  display: flex;
  align-items: center;
  padding: 18rpx 12rpx;
  border-radius: var(--radius-sm, 10rpx);
  margin-bottom: 4rpx;
  transition: background 0.15s;
}
.recent-item:last-child {
  margin-bottom: 0;
}

.recent-item-hover {
  background-color: var(--color-bg-surface, #f9fafb);
}

.recent-cover {
  width: 76rpx;
  height: 76rpx;
  border-radius: var(--radius-sm, 10rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

.cover-letter {
  position: absolute;
  top: -6rpx;
  left: 4rpx;
  font-size: 52rpx;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
  pointer-events: none;
}

.cover-title-small {
  position: absolute;
  bottom: 4rpx;
  left: 8rpx;
  right: 8rpx;
  font-size: 16rpx;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cover-icon {
  font-size: 32rpx;
}

.recent-info {
  flex: 1;
  margin-left: 18rpx;
  overflow: hidden;
}

.recent-title-text {
  display: block;
  font-size: var(--text-base, 28rpx);
  font-weight: 500;
  color: var(--color-text-primary, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-meta {
  display: block;
  font-size: 22rpx;
  color: var(--color-text-tertiary, #9ca3af);
  margin-top: 4rpx;
}

.recent-arrow {
  font-size: 28rpx;
  color: var(--color-text-placeholder, #d1d5db);
  margin-left: 16rpx;
}

/* --- 升级会员卡片 --- */
.upgrade-card {
  margin: 0 24rpx 20rpx;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: var(--radius-lg, 24rpx);
  padding: 24rpx 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4rpx 16rpx rgba(251, 191, 36, 0.15);
  transition: transform 0.15s;
}
.upgrade-card:active {
  transform: scale(0.98);
}

.upgrade-left {
  display: flex;
  align-items: center;
}

.upgrade-icon {
  font-size: 36rpx;
  margin-right: 16rpx;
}

.upgrade-text {
  display: flex;
  flex-direction: column;
}

.upgrade-title {
  display: block;
  font-size: var(--text-base, 28rpx);
  font-weight: 700;
  color: #92400e;
}

.upgrade-desc {
  display: block;
  font-size: 22rpx;
  color: #b45309;
  margin-top: 2rpx;
}

.upgrade-btn {
  font-size: 24rpx;
  color: #ffffff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  padding: 14rpx 28rpx;
  border-radius: 24rpx;
  font-weight: 600;
  box-shadow: 0 2rpx 8rpx rgba(217, 119, 6, 0.3);
}

/* --- 功能菜单 --- */
.menu-section {
  margin: 24rpx;
  background: var(--color-bg-card, #ffffff);
  border-radius: var(--radius-lg, 24rpx);
  overflow: hidden;
  box-shadow: var(--shadow-xs, 0 1rpx 2rpx rgba(0,0,0,0.04));
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 28rpx 32rpx;
  transition: background 0.15s;
}
.menu-item:active {
  background: var(--color-bg-surface, #f9fafb);
}

.menu-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
  width: 48rpx;
  text-align: center;
}

.menu-text {
  flex: 1;
  font-size: var(--text-base, 28rpx);
  color: var(--color-text-primary, #111827);
  font-weight: 500;
}

.menu-tag {
  font-size: 18rpx;
  padding: 4rpx 12rpx;
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #ffffff;
  border-radius: 6rpx;
  margin-right: 12rpx;
  font-weight: 600;
}

.menu-arrow {
  font-size: 28rpx;
  color: var(--color-text-placeholder, #d1d5db);
}

.logout-section {
  margin: 40rpx 24rpx;
}

.logout-btn {
  width: 100%;
  height: 88rpx;
  background: var(--color-bg-card, #ffffff);
  border-radius: var(--radius-md, 16rpx);
  border: 1.5rpx solid var(--color-error, #ef4444);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xs, 0 1rpx 2rpx rgba(0,0,0,0.04));
  transition: all 0.15s;
}
.logout-btn:active {
  background: var(--color-error-bg, #fef2f2);
}

.logout-btn::after {
  border: none;
}

.logout-btn text {
  font-size: var(--text-base, 28rpx);
  color: var(--color-error, #ef4444);
  font-weight: 500;
}
</style>