update pay ui
This commit is contained in:
@@ -34,6 +34,7 @@ import {
|
||||
Textarea,
|
||||
Select,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
Tabs,
|
||||
TabList,
|
||||
TabPanels,
|
||||
@@ -66,6 +67,13 @@ export default function SettingsPage() {
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
const toast = useToast();
|
||||
|
||||
// 深色模式适配颜色
|
||||
const headingColor = useColorModeValue('gray.800', 'white');
|
||||
const textColor = useColorModeValue('gray.800', 'gray.100');
|
||||
const subTextColor = useColorModeValue('gray.600', 'gray.400');
|
||||
const cardBg = useColorModeValue('white', 'gray.800');
|
||||
const borderColor = useColorModeValue('gray.200', 'gray.600');
|
||||
|
||||
// 🎯 初始化设置页面埋点Hook
|
||||
const profileEvents = useProfileEvents({ pageType: 'settings' });
|
||||
|
||||
@@ -501,15 +509,15 @@ export default function SettingsPage() {
|
||||
<Container maxW="container.xl" py={8}>
|
||||
<VStack spacing={8} align="stretch">
|
||||
{/* 页面标题 */}
|
||||
<Heading size="lg" color="gray.800">账户设置</Heading>
|
||||
<Heading size="lg" color={headingColor}>账户设置</Heading>
|
||||
|
||||
<Tabs variant="enclosed" colorScheme="blue">
|
||||
<TabList>
|
||||
<Tab>账户安全</Tab>
|
||||
<Tab>通知设置</Tab>
|
||||
<Tab>隐私设置</Tab>
|
||||
<Tab>界面设置</Tab>
|
||||
<Tab>危险操作</Tab>
|
||||
<Tab color={textColor} _selected={{ color: 'blue.500', borderColor: 'blue.500' }}>账户安全</Tab>
|
||||
<Tab color={textColor} _selected={{ color: 'blue.500', borderColor: 'blue.500' }}>通知设置</Tab>
|
||||
<Tab color={textColor} _selected={{ color: 'blue.500', borderColor: 'blue.500' }}>隐私设置</Tab>
|
||||
<Tab color={textColor} _selected={{ color: 'blue.500', borderColor: 'blue.500' }}>界面设置</Tab>
|
||||
<Tab color={textColor} _selected={{ color: 'blue.500', borderColor: 'blue.500' }}>危险操作</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanels>
|
||||
@@ -517,17 +525,17 @@ export default function SettingsPage() {
|
||||
<TabPanel>
|
||||
<VStack spacing={6} align="stretch">
|
||||
{/* 密码设置 */}
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md">密码设置</Heading>
|
||||
<Heading size="md" color={headingColor}>密码设置</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<Text fontWeight="medium">
|
||||
<Text fontWeight="medium" color={textColor}>
|
||||
{passwordStatus.needsFirstTimeSetup ? '设置登录密码' : '登录密码'}
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
{passwordStatus.needsFirstTimeSetup
|
||||
? '您通过微信登录，建议设置密码以便其他方式登录'
|
||||
: '定期更换密码，保护账户安全'
|
||||
@@ -551,23 +559,23 @@ export default function SettingsPage() {
|
||||
</Card>
|
||||
|
||||
{/* 手机号绑定 */}
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md">手机号绑定</Heading>
|
||||
<Heading size="md" color={headingColor}>手机号绑定</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<HStack>
|
||||
<FaMobile />
|
||||
<Text fontWeight="medium">
|
||||
<Text fontWeight="medium" color={textColor}>
|
||||
{user?.phone || '未绑定手机号'}
|
||||
</Text>
|
||||
{user?.phone_confirmed && (
|
||||
<Badge colorScheme="green" size="sm">已验证</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
绑定手机号可用于登录和接收重要通知
|
||||
</Text>
|
||||
</VStack>
|
||||
@@ -607,21 +615,21 @@ export default function SettingsPage() {
|
||||
</Card>
|
||||
|
||||
{/* 邮箱绑定 */}
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md">邮箱设置</Heading>
|
||||
<Heading size="md" color={headingColor}>邮箱设置</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<HStack>
|
||||
<FaEnvelope />
|
||||
<Text fontWeight="medium">{user?.email}</Text>
|
||||
<Text fontWeight="medium" color={textColor}>{user?.email}</Text>
|
||||
{user?.email_confirmed && (
|
||||
<Badge colorScheme="green" size="sm">已验证</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
邮箱用于登录和接收重要通知
|
||||
</Text>
|
||||
</VStack>
|
||||
@@ -633,23 +641,23 @@ export default function SettingsPage() {
|
||||
</Card>
|
||||
|
||||
{/* 微信绑定 */}
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md">微信绑定</Heading>
|
||||
<Heading size="md" color={headingColor}>微信绑定</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<HStack>
|
||||
<FaWeixin color="#1aad19" />
|
||||
<Text fontWeight="medium">
|
||||
<Text fontWeight="medium" color={textColor}>
|
||||
{user?.has_wechat ? '已绑定微信' : '未绑定微信'}
|
||||
</Text>
|
||||
{user?.has_wechat && (
|
||||
<Badge colorScheme="green" size="sm">已绑定</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
绑定微信可使用微信一键登录
|
||||
</Text>
|
||||
</VStack>
|
||||
@@ -724,15 +732,15 @@ export default function SettingsPage() {
|
||||
</Card>
|
||||
|
||||
{/* 两步验证 */}
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md">两步验证</Heading>
|
||||
<Heading size="md" color={headingColor}>两步验证</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<Text fontWeight="medium">安全验证</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontWeight="medium" color={textColor}>安全验证</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
开启两步验证，提高账户安全性
|
||||
</Text>
|
||||
</VStack>
|
||||
@@ -746,16 +754,16 @@ export default function SettingsPage() {
|
||||
{/* 通知设置 */}
|
||||
<TabPanel>
|
||||
<VStack spacing={6} align="stretch">
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md">通知方式</Heading>
|
||||
<Heading size="md" color={headingColor}>通知方式</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<Text fontWeight="medium">邮件通知</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontWeight="medium" color={textColor}>邮件通知</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
接收邮件通知
|
||||
</Text>
|
||||
</VStack>
|
||||
@@ -770,8 +778,8 @@ export default function SettingsPage() {
|
||||
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<Text fontWeight="medium">短信通知</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontWeight="medium" color={textColor}>短信通知</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
接收短信通知（需绑定手机号）
|
||||
</Text>
|
||||
</VStack>
|
||||
@@ -787,8 +795,8 @@ export default function SettingsPage() {
|
||||
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<Text fontWeight="medium">微信通知</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontWeight="medium" color={textColor}>微信通知</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
接收微信通知（需绑定微信）
|
||||
</Text>
|
||||
</VStack>
|
||||
@@ -805,9 +813,9 @@ export default function SettingsPage() {
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md">通知类型</Heading>
|
||||
<Heading size="md" color={headingColor}>通知类型</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
@@ -873,9 +881,9 @@ export default function SettingsPage() {
|
||||
{/* 隐私设置 */}
|
||||
<TabPanel>
|
||||
<VStack spacing={6} align="stretch">
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md">隐私级别</Heading>
|
||||
<Heading size="md" color={headingColor}>隐私级别</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
@@ -934,9 +942,9 @@ export default function SettingsPage() {
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md">屏蔽设置</Heading>
|
||||
<Heading size="md" color={headingColor}>屏蔽设置</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<FormControl>
|
||||
@@ -969,16 +977,16 @@ export default function SettingsPage() {
|
||||
{/* 界面设置 */}
|
||||
<TabPanel>
|
||||
<VStack spacing={6} align="stretch">
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md">外观设置</Heading>
|
||||
<Heading size="md" color={headingColor}>外观设置</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<Text fontWeight="medium">深色模式</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontWeight="medium" color={textColor}>深色模式</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
切换到深色主题
|
||||
</Text>
|
||||
</VStack>
|
||||
@@ -990,8 +998,8 @@ export default function SettingsPage() {
|
||||
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<Text fontWeight="medium">语言</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontWeight="medium" color={textColor}>语言</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
选择界面语言
|
||||
</Text>
|
||||
</VStack>
|
||||
@@ -1005,16 +1013,16 @@ export default function SettingsPage() {
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md">数据管理</Heading>
|
||||
<Heading size="md" color={headingColor}>数据管理</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<Text fontWeight="medium">数据导出</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontWeight="medium" color={textColor}>数据导出</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
导出您的个人数据
|
||||
</Text>
|
||||
</VStack>
|
||||
@@ -1025,8 +1033,8 @@ export default function SettingsPage() {
|
||||
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<Text fontWeight="medium">清除缓存</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
<Text fontWeight="medium" color={textColor}>清除缓存</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>
|
||||
清除本地缓存数据
|
||||
</Text>
|
||||
</VStack>
|
||||
@@ -1051,20 +1059,20 @@ export default function SettingsPage() {
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<Card>
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Heading size="md" color="red.600">注销账户</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
<Text color="gray.600">
|
||||
<Text color={subTextColor}>
|
||||
注销账户将永久删除您的所有数据，包括：
|
||||
</Text>
|
||||
<Box pl={4}>
|
||||
<Text fontSize="sm" color="gray.600">• 个人资料和设置</Text>
|
||||
<Text fontSize="sm" color="gray.600">• 投资记录和分析数据</Text>
|
||||
<Text fontSize="sm" color="gray.600">• 社区发布的内容</Text>
|
||||
<Text fontSize="sm" color="gray.600">• 关注和粉丝关系</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>• 个人资料和设置</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>• 投资记录和分析数据</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>• 社区发布的内容</Text>
|
||||
<Text fontSize="sm" color={subTextColor}>• 关注和粉丝关系</Text>
|
||||
</Box>
|
||||
<Text fontSize="sm" color="red.600" fontWeight="medium">
|
||||
此操作不可恢复，请确认您真的要注销账户。
|
||||
|
||||
Reference in New Issue
Block a user