Novault/Novault-Frontend-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加健康分卡片、健康分模态框、修改密码组件和设置页面。

Browse Source
This commit is contained in:
12975
2026-01-31 13:38:10 +08:00
parent 11a9ce4218
commit 53336bf260
8 changed files with 575 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/home/HealthScoreCard/HealthScoreCard.css
View File

@@ -4,7 +4,16 @@
justify-content: space-between;
height: 100%;
padding: 1.5rem !important;
/* Override standard bento padding for tighter fit if needed */
background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.health-score-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
border-color: rgba(255, 255, 255, 0.1);
}
.health-score-header {
@@ -18,10 +27,16 @@
font-size: 0.9rem;
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.02em;
}
.health-trend {
color: var(--text-tertiary);
transition: transform 0.3s;
}
.health-score-card:hover .health-trend {
transform: scale(1.1);
}
.health-score-content {
@@ -35,8 +50,14 @@
.health-ring-container {
position: relative;
width: 80px;
height: 80px;
width: 90px;
height: 90px;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.05));
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.health-score-card:hover .health-ring-container {
transform: scale(1.05);
}
.health-ring-svg {
@@ -45,6 +66,7 @@
.health-ring-progress {
transition: stroke-dashoffset 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
}
.health-score-value {
@@ -59,18 +81,22 @@
}
.score-number {
font-size: 1.75rem;
font-size: 2rem;
font-weight: 800;
color: var(--text-primary);
font-family: 'Outfit', sans-serif;
letter-spacing: -0.05em;
background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-secondary) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.health-score-status {
text-align: center;
display: flex;
flex-direction: column;
gap: 0;
gap: 2px;
}
.status-text {
@@ -83,4 +109,5 @@
font-size: 0.75rem;
color: var(--text-tertiary);
font-weight: 500;
opacity: 0.8;
}

2
src/components/home/HealthScoreCard/HealthScoreCard.tsx
View File

@@ -36,7 +36,7 @@ export const HealthScoreCard: React.FC<HealthScoreCardProps> = ({ score, label,
<svg className="health-ring-svg" width="80" height="80">
<circle
className="health-ring-bg"
stroke="rgba(0,0,0,0.06)"
stroke="rgba(255,255,255,0.1)"
strokeWidth="8"
fill="transparent"
r={radius}

416
src/components/home/HealthScoreModal/HealthScoreModal.css
View File

@@ -1,27 +1,30 @@
/**
* HealthScoreModal Styles - Premium Glassmorphism
* HealthScoreModal Styles - Premium Glassmorphism & Aurora Theme
*/
:root {
--health-score-gradient: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
/* More transparent dark background for glass effect */
--health-bg-glass: rgba(20, 20, 35, 0.85);
--health-text-main: #ffffff;
--health-text-sub: rgba(255, 255, 255, 0.7);
--health-glass-border: rgba(255, 255, 255, 0.12);
--health-card-bg: rgba(255, 255, 255, 0.05);
--health-card-hover: rgba(255, 255, 255, 0.1);
--health-bg-glass: rgba(15, 23, 42, 0.85);
/* Darker Slate */
--health-text-main: #f8fafc;
--health-text-sub: #94a3b8;
--health-glass-border: rgba(255, 255, 255, 0.1);
--health-card-bg: rgba(255, 255, 255, 0.03);
--health-card-hover: rgba(255, 255, 255, 0.08);
--health-accent-glow: rgba(74, 222, 128, 0.5);
/* Default green glow */
}
/* Modal Overlay */
.health-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background-color: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
display: flex;
align-items: center;
justify-content: center;
@@ -37,26 +40,53 @@
}
}
/* Main Content Container */
.health-modal-content {
background: var(--health-bg-glass);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
background: linear-gradient(160deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
width: 100%;
max-width: 420px;
border-radius: 36px;
padding: 2.5rem 1.75rem 1.75rem;
max-width: 440px;
border-radius: 40px;
padding: 2.5rem 2rem 2rem;
position: relative;
box-shadow:
0 40px 100px -20px rgba(0, 0, 0, 0.8),
0 40px 100px -20px rgba(0, 0, 0, 0.9),
inset 0 0 0 1px var(--health-glass-border),
inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
transform: scale(0.92) translateY(30px);
opacity: 0;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
display: flex;
flex-direction: column;
max-height: 85vh;
color: white;
max-height: 90vh;
color: var(--health-text-main);
overflow: hidden;
/* For inner glow effects */
}
.health-modal-content::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.08) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
transform: rotate(0deg);
animation: slowSpin 60s linear infinite;
}
@keyframes slowSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.health-modal-content.animate-in {
@@ -70,6 +100,9 @@
padding: 0 0.5rem;
margin-right: -0.5rem;
scrollbar-width: none;
z-index: 1;
/* Above background effects */
position: relative;
}
.health-scroll-container::-webkit-scrollbar {
@@ -79,34 +112,34 @@
/* Header Controls */
.health-modal-controls {
position: absolute;
top: 1.25rem;
width: calc(100% - 2.5rem);
top: 1.5rem;
width: calc(100% - 4rem);
display: flex;
justify-content: space-between;
z-index: 10;
z-index: 20;
}
.health-icon-btn {
width: 40px;
height: 40px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--health-text-sub);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
backdrop-filter: blur(10px);
backdrop-filter: blur(8px);
}
.health-icon-btn:hover {
background: rgba(255, 255, 255, 0.15);
color: white;
transform: scale(1.1) rotate(5deg);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
transform: scale(1.1);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}
/* Score Section */
@@ -114,31 +147,60 @@
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
margin-top: 0.5rem;
margin-bottom: 2.5rem;
margin-top: 1rem;
position: relative;
}
.health-score-ring-container {
position: relative;
width: 180px;
height: 180px;
margin-bottom: 1.25rem;
filter: drop-shadow(0 0 40px rgba(74, 222, 128, 0.2));
width: 200px;
height: 200px;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
/* Outer Rotating Glow Ring */
.health-score-ring-container::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0%, var(--health-accent-glow) 20%, transparent 40%);
animation: spinGlow 4s linear infinite;
opacity: 0.6;
filter: blur(15px);
z-index: 0;
}
@keyframes spinGlow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.health-score-ring-svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
z-index: 2;
filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3));
}
.health-ring-bg {
stroke: rgba(255, 255, 255, 0.05);
stroke: rgba(255, 255, 255, 0.06);
}
.health-ring-progress {
transition: stroke-dasharray 2s cubic-bezier(0.22, 1, 0.36, 1);
stroke-linecap: round;
filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.6));
/* Main glow comes from SVG filter or shadow */
}
.health-score-content {
@@ -150,74 +212,79 @@
flex-direction: column;
align-items: center;
text-align: center;
z-index: 5;
}
.health-score-number {
font-size: 4rem;
font-size: 4.5rem;
font-weight: 800;
font-family: 'Outfit', sans-serif;
line-height: 1;
background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
color: white;
letter-spacing: -2px;
text-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
/* Gradient Text */
background: linear-gradient(180deg, #ffffff 20%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
letter-spacing: -2px;
}
.health-score-label {
font-size: 0.85rem;
color: var(--health-text-sub);
font-weight: 600;
margin-top: 0.5rem;
letter-spacing: 0.15em;
margin-top: 0.25rem;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.9;
opacity: 0.8;
}
/* Level Badge */
/* Level Badge - Refined */
.health-level-badge {
padding: 8px 20px;
border-radius: 99px;
padding: 8px 24px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
/* Will be overridden by inline style for tint */
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 8px;
gap: 10px;
font-size: 0.95rem;
font-weight: 600;
font-weight: 700;
backdrop-filter: blur(12px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s;
justify-content: center;
min-width: 180px;
}
.health-level-badge:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.3) !important;
}
/* Metrics Grid */
/* Metrics Grid - Cards */
.health-metrics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.25rem;
margin-bottom: 1.5rem;
}
.health-metric-card {
background: var(--health-card-bg);
border-radius: 24px;
padding: 1.25rem;
border-radius: 28px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
transition: all 0.3s;
gap: 0.5rem;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid var(--health-glass-border);
position: relative;
overflow: hidden;
height: 100%;
justify-content: space-between;
}
.health-metric-card::before {
@@ -227,7 +294,7 @@
left: 0;
right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
pointer-events: none;
}
@@ -235,19 +302,20 @@
transform: translateY(-5px);
background: var(--health-card-hover);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.4);
}
.metric-icon-wrapper {
width: 44px;
height: 44px;
border-radius: 14px;
width: 48px;
height: 48px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
margin-bottom: 0.5rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.05);
}
.metric-title {
@@ -258,13 +326,13 @@
.metric-value-group {
display: flex;
align-items: center;
align-items: baseline;
justify-content: space-between;
margin-top: 0.25rem;
}
.metric-number {
font-size: 1.5rem;
font-size: 1.75rem;
font-weight: 700;
font-family: 'Outfit', sans-serif;
color: white;
@@ -272,69 +340,95 @@
}
.metric-tag {
font-size: 0.75rem;
font-size: 0.7rem;
font-weight: 700;
padding: 4px 8px;
border-radius: 6px;
padding: 4px 10px;
border-radius: 8px;
backdrop-filter: blur(4px);
letter-spacing: 0.02em;
}
.metric-subtitle {
font-size: 0.8125rem;
font-size: 0.8rem;
color: var(--health-text-sub);
margin-top: 0.25rem;
opacity: 0.6;
opacity: 0.7;
}
/* Suggestion Box */
/* Suggestion Box - AI Theme */
.health-suggestion-box {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(15, 23, 42, 0.4));
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 24px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.6) 100%);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: 28px;
padding: 1.5rem;
margin-bottom: 1.25rem;
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
backdrop-filter: blur(20px);
box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.5);
}
.health-suggestion-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: linear-gradient(to bottom, #38bdf8, #818cf8);
}
.health-suggestion-box::after {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%);
top: -60px;
right: -60px;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
border-radius: 50%;
filter: blur(30px);
animation: pulseGlow 4s ease-in-out infinite alternate;
}
@keyframes pulseGlow {
from {
opacity: 0.5;
transform: scale(1);
}
to {
opacity: 1;
transform: scale(1.1);
}
}
.suggestion-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 1rem;
color: #60a5fa;
gap: 12px;
margin-bottom: 1.25rem;
color: #38bdf8;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.02em;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.suggestion-content {
font-size: 0.95rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.95);
line-height: 1.7;
color: #e2e8f0;
font-weight: 400;
text-align: justify;
position: relative;
z-index: 2;
}
/* Action Button */
.health-confirm-btn {
width: 100%;
padding: 1.1rem;
border-radius: 20px;
border-radius: 22px;
border: none;
font-size: 1.05rem;
font-weight: 700;
@@ -342,26 +436,26 @@
background: white;
color: #0f172a;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 30px -5px rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
letter-spacing: 0.02em;
}
.health-confirm-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 20px 50px -10px rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
box-shadow: 0 20px 40px -5px rgba(255, 255, 255, 0.25);
background: #f8fafc;
}
.health-confirm-btn:active {
transform: translateY(0) scale(0.98);
transform: translateY(-1px);
box-shadow: 0 5px 15px -3px rgba(255, 255, 255, 0.2);
}
/* Loading Dots */
/* Loading Animation */
.loading-dots {
display: inline-block;
background: linear-gradient(90deg, #60a5fa 25%, rgba(96, 165, 250, 0.3) 50%, #60a5fa 75%);
background: linear-gradient(90deg, #38bdf8 25%, rgba(56, 189, 248, 0.3) 50%, #38bdf8 75%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
@@ -379,14 +473,14 @@
}
}
/* Rules Panel */
/* Rules Panel Animation */
.health-rules-panel {
background: rgba(255, 255, 255, 0.03);
border-radius: 24px;
background: rgba(15, 23, 42, 0.6);
border-radius: 28px;
padding: 1.5rem;
margin-bottom: 2rem;
animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes slideDown {
@@ -403,10 +497,10 @@
.rule-item {
display: flex;
gap: 1.25rem;
padding-bottom: 1.25rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
gap: 1.5rem;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.rule-item:last-child {
@@ -419,130 +513,44 @@
font-family: 'Outfit', sans-serif;
font-weight: 800;
color: #4ade80;
font-size: 1.25rem;
font-size: 1.4rem;
min-width: 3.5rem;
text-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
}
.rule-score--blue {
color: #3b82f6;
text-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
.rule-score--green {
color: #10b981;
text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}
.rule-score--orange {
color: #f59e0b;
text-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}
.rule-score--purple {
color: #8b5cf6;
text-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}
.rule-desc-group h4 {
margin: 0 0 0.4rem 0;
font-size: 1rem;
font-weight: 600;
color: white;
}
.rule-desc-group p {
margin: 0;
font-size: 0.875rem;
color: var(--health-text-sub);
line-height: 1.5;
}
/* AI Advice & Tips Styling */
.tip-item {
margin-bottom: 0.75rem;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
padding-left: 1rem;
position: relative;
transition: all 0.3s ease;
}
.tip-item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
background: #60a5fa;
border-radius: 50%;
opacity: 0.5;
}
.tip-item:hover {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding-left: 1.5rem;
padding-right: 0.5rem;
}
.tip-item:hover::before {
background: #4ade80;
opacity: 1;
left: 0.5rem;
text-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
}
/* AI Advice Styles */
.ai-advice-container {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px dashed rgba(255, 255, 255, 0.15);
border-top: 1px dashed rgba(56, 189, 248, 0.2);
animation: fadeInUp 0.5s ease-out forwards;
}
.ai-advice-box {
/* Refactored to blend in */
background: transparent;
border: none;
padding: 0;
box-shadow: none;
backdrop-filter: none;
font-size: 0.95rem;
line-height: 1.6;
color: #93c5fd;
/* Keep the blue text distinctive */
color: #bfdbfe;
/* Softer blue text */
position: relative;
padding-left: 2rem;
/* Space for icon */
}
.ai-advice-icon {
position: absolute;
top: 2px;
top: 3px;
left: 0;
color: #60a5fa;
filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.4));
filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.5));
}
.ai-advice-text {
display: block;
margin-left: 0;
text-align: justify;
font-weight: 500;
}
.ai-loading {
margin-top: 1rem;
font-size: 0.85rem;
opacity: 0.7;
font-style: italic;
display: flex;
align-items: center;
gap: 8px;
padding-left: 0.5rem;
}
@keyframes fadeInUp {
from {
opacity: 0;

35
src/components/home/HealthScoreModal/HealthScoreModal.tsx
View File

@@ -170,31 +170,40 @@ export const HealthScoreModal: React.FC<HealthScoreModalProps> = ({
) : (
// --- Score View ---
<>
<div className="health-score-section">
<div className="health-score-section" style={{ '--health-accent-glow': level.color } as React.CSSProperties}>
<div className="health-score-ring-container">
<svg className="health-score-ring-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#4ade80" />
<stop offset="100%" stopColor="#22c55e" />
<stop offset="0%" stopColor="#ffffff" />
<stop offset="100%" stopColor={level.color} />
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
{/* Background Ring */}
<circle
cx="50" cy="50" r="45"
fill="none"
stroke="rgba(255,255,255,0.1)"
strokeWidth="8"
stroke="rgba(255,255,255,0.05)"
strokeWidth="6"
/>
{/* Progress Ring */}
{/* Progress Ring with Glow */}
<circle
cx="50" cy="50" r="45"
fill="none"
stroke={level.color} /* Use level color or gradient */
strokeWidth="8"
stroke={`url(#scoreGradient)`}
strokeWidth="6"
strokeLinecap="round"
strokeDasharray={`${283 * (score / 100)} 283`}
className="health-ring-progress"
filter="url(#glow)"
/>
</svg>
<div className="health-score-content">
@@ -203,9 +212,13 @@ export const HealthScoreModal: React.FC<HealthScoreModalProps> = ({
</div>
</div>
<div className="health-level-badge" style={{ borderColor: `${level.color}40`, background: `${level.color}15` }}>
<Icon icon={level.icon} width="20" color={level.color} />
<span style={{ color: level.color }}>{level.title} · {level.desc}</span>
<div className="health-level-badge" style={{
background: `linear-gradient(90deg, ${level.color}20 0%, ${level.color}10 100%)`,
borderColor: `${level.color}40`,
boxShadow: `0 8px 30px -10px ${level.color}40`
}}>
<Icon icon={level.icon} width="24" color={level.color} style={{ filter: `drop-shadow(0 0 8px ${level.color}60)` }} />
<span style={{ color: level.color, textShadow: `0 0 15px ${level.color}40` }}>{level.title} · {level.desc}</span>
</div>
</div>

163
src/components/settings/ChangePassword/ChangePassword.css Normal file
View File

@@ -0,0 +1,163 @@
/* ChangePassword.css - Premium Glassmorphism */
.change-password-settings {
width: 100%;
}
.password-section {
background: var(--glass-panel-bg);
backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.password-section:hover {
box-shadow: var(--shadow-md);
border-color: rgba(99, 102, 241, 0.2);
/* Indigo hint */
}
.password-section h3 {
font-size: var(--font-lg);
font-weight: 700;
margin: 0 0 var(--spacing-lg) 0;
color: var(--color-text);
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Forms */
.password-form {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.form-group label {
font-weight: 600;
color: var(--color-text);
font-size: var(--font-sm);
}
.form-group input {
padding: var(--spacing-md);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
background: var(--glass-bg);
color: var(--color-text);
font-size: var(--font-base);
transition: all 0.2s;
}
.form-group input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-lighter);
background: #fff;
}
/* Buttons */
.password-btn {
padding: var(--spacing-md) var(--spacing-xl);
font-weight: 600;
border-radius: var(--radius-full);
cursor: pointer;
border: none;
transition: all 0.2s;
font-size: var(--font-sm);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--gradient-primary);
color: white;
box-shadow: 0 4px 6px rgba(99, 102, 241, 0.2);
align-self: flex-start;
min-width: 120px;
}
.password-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(99, 102, 241, 0.3);
}
.password-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Messages */
.message {
padding: var(--spacing-md);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-lg);
font-size: var(--font-sm);
font-weight: 500;
animation: slideUpFade 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.message-success {
background: rgba(5, 150, 105, 0.1);
color: var(--color-success);
border: 1px solid rgba(5, 150, 105, 0.2);
}
.message-error {
background: rgba(220, 38, 38, 0.1);
color: var(--color-error);
border: 1px solid rgba(220, 38, 38, 0.2);
}
/* Info */
.password-info {
background: rgba(255, 255, 255, 0.4);
border: 1px dashed var(--glass-border);
border-radius: var(--radius-xl);
padding: var(--spacing-xl);
}
.password-info h4 {
font-size: var(--font-base);
margin-bottom: var(--spacing-md);
color: var(--color-text);
font-weight: 600;
}
.password-info ul {
margin: 0;
padding-left: 1.25rem;
color: var(--color-text-secondary);
font-size: var(--font-sm);
line-height: 1.6;
}
.password-info li {
margin-bottom: var(--spacing-xs);
}
@keyframes slideUpFade {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

139
src/components/settings/ChangePassword/ChangePassword.tsx Normal file
View File

@@ -0,0 +1,139 @@
import { useState } from 'react';
import { Icon } from '@iconify/react';
import { updatePassword } from '../../../services/authService';
import './ChangePassword.css';
/**
* ChangePassword Component
* Allows users to change their login password
*/
function ChangePassword() {
const [oldPassword, setOldPassword] = useState('');
const [newPassword, setNewPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
// Validations
if (newPassword !== confirmPassword) {
setMessage({ type: 'error', text: '两次输入的新密码不一致' });
return;
}
if (newPassword.length < 8) {
setMessage({ type: 'error', text: '新密码长度至少为8位' });
return;
}
if (oldPassword === newPassword) {
setMessage({ type: 'error', text: '新密码不能与旧密码相同' });
return;
}
setLoading(true);
setMessage(null);
try {
await updatePassword(oldPassword, newPassword);
setMessage({ type: 'success', text: '登录密码修改成功' });
// Clear forms
setOldPassword('');
setNewPassword('');
setConfirmPassword('');
} catch (error) {
setMessage({
type: 'error',
text: error instanceof Error ? error.message : '修改密码失败，请检查旧密码是否正确'
});
} finally {
setLoading(false);
}
};
return (
<div className="change-password-settings">
<section className="password-section">
<h3>
<Icon icon="solar:lock-password-bold-duotone" className="text-primary" />
登录密码
</h3>
{message && (
<div className={`message message-${message.type}`}>
<Icon icon={message.type === 'success' ? "solar:check-circle-bold" : "solar:danger-circle-bold"} />
{message.text}
</div>
)}
<form onSubmit={handleSubmit} className="password-form">
<div className="form-group">
<label htmlFor="login-old-password">当前密码</label>
<input
type="password"
id="login-old-password"
value={oldPassword}
onChange={(e) => setOldPassword(e.target.value)}
placeholder="输入当前使用的登录密码"
disabled={loading}
required
/>
</div>
<div className="form-group">
<label htmlFor="login-new-password">新密码</label>
<input
type="password"
id="login-new-password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
placeholder="输入新密码（至少8位）"
disabled={loading}
required
minLength={8}
/>
</div>
<div className="form-group">
<label htmlFor="login-confirm-password">确认新密码</label>
<input
type="password"
id="login-confirm-password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="再次输入新密码"
disabled={loading}
required
minLength={8}
/>
</div>
<button type="submit" disabled={loading} className="password-btn">
{loading ? (
<>
<Icon icon="line-md:loading-loop" /> 修改中...
</>
) : (
<>
<Icon icon="solar:check-read-bold" /> 修改密码
</>
)}
</button>
</form>
</section>
<div className="password-info">
<h4>安全建议</h4>
<ul>
<li>使用包含字母、数字和符号的强密码</li>
<li>不要使用与其他网站相同的密码</li>
<li>定期更换密码可以提高账户安全性</li>
</ul>
</div>
</div>
);
}
export default ChangePassword;

1
src/components/settings/ChangePassword/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from './ChangePassword';

3
src/pages/Settings/Settings.tsx
View File

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
import { useTheme } from '../../hooks/useTheme';
import BackupManager from '../../components/settings/BackupManager';
import AppLockSettings from '../../components/settings/AppLockSettings';
import ChangePassword from '../../components/settings/ChangePassword';
import { CapsuleSelector } from '../../components/common/CapsuleSelector/CapsuleSelector';
import { CustomSelect } from '../../components/common/CustomSelect/CustomSelect';
import { getSupportedCurrencies } from '../../services/exchangeRateService';
@@ -445,6 +446,8 @@ function Settings() {
{activeTab === 'security' && (
<section className="security-settings">
<ChangePassword />
<div style={{ marginTop: '2rem' }}></div>
<AppLockSettings />
</section>
)}