-
-
)
}
diff --git a/app/globals.css b/app/globals.css
index c6f5a4d..4c455cb 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -39,51 +39,45 @@
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
- /* ===== Apple Frosted Glass Design Tokens ===== */
- /* 深色主题背景 - 模拟iOS深色模式 */
+ /* ===== Soul App Style - Cyan/Teal Theme ===== */
+ /* 深色主题背景 */
--app-bg: #000000;
--app-bg-secondary: #1c1c1e;
--app-bg-tertiary: #2c2c2e;
-
+
/* 毛玻璃效果 */
--glass-bg: rgba(28, 28, 30, 0.72);
--glass-bg-light: rgba(44, 44, 46, 0.65);
--glass-bg-heavy: rgba(18, 18, 20, 0.85);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-border-light: rgba(255, 255, 255, 0.12);
-
- /* 品牌色 - 青绿色调 */
- --app-brand: #30d158;
- --app-brand-secondary: #34c759;
- --app-brand-hover: #28a745;
- --app-brand-light: rgba(48, 209, 88, 0.15);
-
- /* iOS系统色 */
- --ios-blue: #007aff;
- --ios-green: #30d158;
- --ios-indigo: #5856d6;
- --ios-orange: #ff9500;
- --ios-pink: #ff2d55;
- --ios-purple: #af52de;
- --ios-red: #ff3b30;
- --ios-teal: #5ac8fa;
- --ios-yellow: #ffcc00;
-
+
+ /* 品牌色改为Soul青色 */
+ --app-brand: #00ced1;
+ --app-brand-secondary: #20b2aa;
+ --app-brand-hover: #00b4b7;
+ --app-brand-light: rgba(0, 206, 209, 0.15);
+ --app-brand-dark: #008b8b;
+
+ /* 强调色 */
+ --app-accent: #5ac8fa;
+ --app-gold: #ffd700;
+
/* 文字颜色 */
--app-text: #ffffff;
--app-text-secondary: rgba(235, 235, 245, 0.6);
--app-text-tertiary: rgba(235, 235, 245, 0.3);
--app-text-muted: #8e8e93;
-
+
/* 分隔线和边框 */
--app-separator: rgba(84, 84, 88, 0.65);
--app-border: rgba(255, 255, 255, 0.1);
-
+
/* 阴影 */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
- --shadow-glow: 0 0 20px rgba(48, 209, 88, 0.3);
+ --shadow-glow: 0 0 20px rgba(0, 206, 209, 0.3);
}
.dark {
@@ -123,9 +117,10 @@
@theme inline {
/* iOS San Francisco字体栈 */
- --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
+ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC",
+ "Microsoft YaHei", sans-serif;
--font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco, Consolas, monospace;
-
+
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
@@ -178,7 +173,7 @@
* {
@apply border-border outline-ring/50;
}
-
+
html {
/* 启用iOS平滑滚动 */
scroll-behavior: smooth;
@@ -186,7 +181,7 @@
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
-
+
body {
@apply bg-background text-foreground;
/* iOS安全区域适配 */
@@ -207,7 +202,7 @@
border: 1px solid var(--glass-border);
border-radius: 1rem;
}
-
+
.glass-card-light {
background: var(--glass-bg-light);
backdrop-filter: saturate(180%) blur(20px);
@@ -215,7 +210,7 @@
border: 1px solid var(--glass-border-light);
border-radius: 1rem;
}
-
+
.glass-card-heavy {
background: var(--glass-bg-heavy);
backdrop-filter: saturate(200%) blur(30px);
@@ -223,7 +218,7 @@
border: 1px solid var(--glass-border);
border-radius: 1.25rem;
}
-
+
/* 毛玻璃导航栏 */
.glass-nav {
background: var(--glass-bg-heavy);
@@ -231,7 +226,7 @@
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 0.5px solid var(--app-separator);
}
-
+
/* 毛玻璃弹窗 */
.glass-modal {
background: var(--glass-bg-heavy);
@@ -241,8 +236,8 @@
border-radius: 1.5rem;
box-shadow: var(--shadow-lg);
}
-
- /* iOS风格按钮 */
+
+ /* iOS风格按钮改为青色 */
.btn-ios {
@apply font-medium transition-all duration-200;
background: var(--app-brand);
@@ -252,16 +247,16 @@
font-size: 1rem;
letter-spacing: -0.01em;
}
-
+
.btn-ios:hover {
background: var(--app-brand-hover);
transform: scale(0.98);
}
-
+
.btn-ios:active {
transform: scale(0.95);
}
-
+
.btn-ios-secondary {
@apply font-medium transition-all duration-200;
background: var(--glass-bg);
@@ -271,7 +266,7 @@
border-radius: 0.75rem;
padding: 0.875rem 1.5rem;
}
-
+
/* iOS风格输入框 */
.input-ios {
background: var(--app-bg-secondary);
@@ -282,23 +277,23 @@
color: var(--app-text);
transition: all 0.2s ease;
}
-
+
.input-ios:focus {
outline: none;
box-shadow: 0 0 0 4px var(--app-brand-light);
}
-
+
.input-ios::placeholder {
color: var(--app-text-tertiary);
}
-
+
/* iOS风格分割线 */
.separator-ios {
height: 0.5px;
background: var(--app-separator);
margin: 0 1rem;
}
-
+
/* iOS风格列表项 */
.list-item-ios {
@apply flex items-center justify-between px-4 py-3;
@@ -306,28 +301,28 @@
border-bottom: 0.5px solid var(--app-separator);
transition: background 0.15s ease;
}
-
+
.list-item-ios:first-child {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
-
+
.list-item-ios:last-child {
border-bottom-left-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
border-bottom: none;
}
-
+
.list-item-ios:active {
background: var(--glass-bg-heavy);
}
-
+
/* 书籍阅读器样式 */
.book-reader {
@apply min-h-screen;
background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
}
-
+
.book-page {
@apply max-w-2xl mx-auto px-6 py-8;
background: var(--glass-bg);
@@ -335,26 +330,26 @@
border-radius: 1rem;
margin: 1rem;
}
-
+
.book-content {
font-size: 1.0625rem;
line-height: 1.8;
letter-spacing: 0.01em;
color: var(--app-text);
}
-
+
.book-content h1,
.book-content h2,
.book-content h3 {
@apply font-semibold;
letter-spacing: -0.02em;
}
-
+
.book-content p {
margin-bottom: 1.5em;
text-align: justify;
}
-
+
/* 章节导航 */
.chapter-nav {
@apply fixed bottom-0 left-0 right-0;
@@ -363,22 +358,22 @@
border-top: 0.5px solid var(--app-separator);
padding-bottom: env(safe-area-inset-bottom);
}
-
- /* 进度条 */
+
+ /* 进度条改为青色 */
.progress-bar {
height: 3px;
background: var(--app-bg-tertiary);
border-radius: 1.5px;
overflow: hidden;
}
-
+
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--app-brand) 0%, var(--app-brand-secondary) 100%);
border-radius: 1.5px;
transition: width 0.3s ease;
}
-
+
/* 骨架屏动画 */
.skeleton {
background: linear-gradient(
@@ -391,7 +386,7 @@
animation: skeleton-loading 1.5s infinite;
border-radius: 0.5rem;
}
-
+
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
@@ -400,12 +395,12 @@
background-position: -200% 0;
}
}
-
+
/* 页面过渡动画 */
.page-transition {
animation: page-fade-in 0.3s ease-out;
}
-
+
@keyframes page-fade-in {
from {
opacity: 0;
@@ -416,16 +411,16 @@
transform: translateY(0);
}
}
-
+
/* 弹窗动画 */
.modal-overlay {
animation: modal-overlay-in 0.25s ease-out;
}
-
+
.modal-content {
animation: modal-content-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
-
+
@keyframes modal-overlay-in {
from {
opacity: 0;
@@ -434,7 +429,7 @@
opacity: 1;
}
}
-
+
@keyframes modal-content-in {
from {
opacity: 0;
@@ -445,12 +440,12 @@
transform: scale(1) translateY(0);
}
}
-
+
/* 发光效果 */
.glow {
box-shadow: var(--shadow-glow);
}
-
+
.glow-text {
text-shadow: 0 0 20px var(--app-brand);
}
@@ -462,39 +457,39 @@
.safe-top {
padding-top: env(safe-area-inset-top);
}
-
+
.safe-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
-
+
.safe-left {
padding-left: env(safe-area-inset-left);
}
-
+
.safe-right {
padding-right: env(safe-area-inset-right);
}
-
+
/* 触摸反馈 */
.touch-feedback {
-webkit-tap-highlight-color: transparent;
}
-
+
.touch-feedback:active {
opacity: 0.7;
transform: scale(0.98);
}
-
+
/* 隐藏滚动条但保持可滚动 */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
-
+
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
-
+
/* iOS风格文字省略 */
.text-ellipsis-2 {
display: -webkit-box;
@@ -502,7 +497,7 @@
-webkit-box-orient: vertical;
overflow: hidden;
}
-
+
.text-ellipsis-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
diff --git a/app/match/page.tsx b/app/match/page.tsx
index f0b57ab..aab9d6f 100644
--- a/app/match/page.tsx
+++ b/app/match/page.tsx
@@ -3,6 +3,8 @@
import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Mic } from "lucide-react"
+import { Home, List, User } from "lucide-react"
+import { useRouter } from "next/navigation"
interface MatchUser {
id: string
@@ -28,6 +30,7 @@ export default function MatchPage() {
const [matchAttempts, setMatchAttempts] = useState(0)
const [selectedType, setSelectedType] = useState("partner")
const [activeTab, setActiveTab] = useState<"voice" | "party" | "team">("voice")
+ const router = useRouter()
const startMatch = () => {
setIsMatching(true)
@@ -378,6 +381,33 @@ export default function MatchPage() {
)}
+
+ {/* 底部导航 */}
+
)
}
diff --git a/app/my/page.tsx b/app/my/page.tsx
index bbcc2e3..c59eed2 100644
--- a/app/my/page.tsx
+++ b/app/my/page.tsx
@@ -2,14 +2,14 @@
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
-import { User, ChevronRight, Copy, Check } from "lucide-react"
+import { User, ChevronRight, Copy, Check, Home, List, Sparkles, Clock } from "lucide-react"
import { useStore } from "@/lib/store"
import { AuthModal } from "@/components/modules/auth/auth-modal"
import { getFullBookPrice, getTotalSectionCount } from "@/lib/book-data"
export default function MyPage() {
const router = useRouter()
- const { user, isLoggedIn, logout, getAllPurchases } = useStore()
+ const { user, isLoggedIn, logout, getAllPurchases, settings } = useStore()
const [showAuthModal, setShowAuthModal] = useState(false)
const [mounted, setMounted] = useState(false)
const [copied, setCopied] = useState(false)
@@ -21,7 +21,7 @@ export default function MyPage() {
if (!mounted) {
return (