audio_codebuddy/my-uniapp-vue3/src/App.vue

<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
import { createPinia } from 'pinia';
import { useUserStore } from './store/user';
import { initDebug } from './utils/debug';

// 初始化全局调试工具
initDebug();

onLaunch(() => {
  console.log('App Launch');
  const userStore = useUserStore();
  userStore.initUser();

  // 应用夜间模式
  applyDarkMode();
});

onShow(() => {
  console.log('App Show');
});

onHide(() => {
  console.log('App Hide');
});

// 应用夜间模式
function applyDarkMode() {
  try {
    const isDark = uni.getStorageSync('dark_mode');
    if (isDark) {
      uni.setStorageSync('is_dark_mode', true);
    }
  } catch (error) {
    console.error('应用夜间模式失败:', error);
  }
}
</script>

<template>
  <view id="app"></view>
</template>

<style>
/* 全局样式 */
page {
  background-color: #f9fafb;
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #1f2937;
  min-height: 100vh;
  transition: background-color 0.3s, color 0.3s;
}

/* 全局页面切换动画 - 滑入效果 */
page {
  animation: pageIn 0.3s ease-out;
}

@keyframes pageIn {
  from {
    opacity: 0.8;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 列表项入场动画 */
@keyframes listItemIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list-item-enter {
  animation: listItemIn 0.4s ease-out forwards;
}

/* 按钮点击反馈 */
button:active,
.btn:active,
.action-btn:active,
.generate-btn:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

/* 触摸反馈元素 */
.touch-feedback:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
  opacity: 0.9;
}

/* 主色调 */
:root {
  --primary-color: #4f46e5;
  --primary-light: #6366f1;
  --primary-lighter: #818cf8;
  --accent-color: #f97316;
  --success-color: #10b981;
  --error-color: #ef4444;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --bg-primary: #f9fafb;
  --bg-card: #ffffff;
}

/* 夜间模式 */
page.dark-mode {
  background-color: #111827;
  color: #ffffff;
}

/* 禁止选择文本 */
text {
  user-select: none;
}

/* 安全区域 */
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>