feat(ui): add light theme with system auto-switch + Cyrene avatar

- Miuix day/night dual theme CSS variables
- themeStore: light default, follows prefers-color-scheme
- Header: sun/moon toggle button
- All components migrated to CSS variables
- Cyrene avatar image replaces 'C' logo everywhere
- Favicon added
This commit is contained in:
Aska committed 2026-08-12 17:42:18 +08:00
1 parent 78c5f0f1b0
commit 5faa955bce
24 files changed
+337 -218

No files matched your search

+12 -12
View File
@@ -52,10 +52,10 @@ export default function MemoryPage() {
onChange={e => setSearch(e.target.value)}
onKeyDown={e => { if (e.key === 'Enter') fetchMemories(search) }}
placeholder="搜索记忆..."
className="flex-1 bg-[#000] border border-[#404040] focus:border-[#277AF7] rounded-[14px] px-4 py-2.5 text-sm text-[#F2F2F2] placeholder:text-white/30 outline-none"
className="flex-1 bg-[var(--mx-surface)] border border-[var(--mx-outline)] focus:border-[var(--mx-primary)] rounded-[14px] px-4 py-2.5 text-sm text-[var(--mx-text)] placeholder:text-[var(--mx-text-dim)] outline-none"
/>
<button onClick={() => fetchMemories(search)} className="px-4 py-2.5 bg-[#277AF7] hover:bg-[#3482FF] text-white text-sm font-medium rounded-full">搜索</button>
<button onClick={() => { setSearch(''); fetchMemories() }} className="px-4 py-2.5 bg-[#000] border border-[#404040] text-white/50 text-sm rounded-full">全部</button>
<button onClick={() => fetchMemories(search)} className="px-4 py-2.5 bg-[var(--mx-primary)] hover:bg-[var(--mx-primary-hover)] text-white text-sm font-medium rounded-full">搜索</button>
<button onClick={() => { setSearch(''); fetchMemories() }} className="px-4 py-2.5 bg-[var(--mx-surface)] border border-[var(--mx-outline)] text-[var(--mx-text-dim)] text-sm rounded-full">全部</button>
</div>
{/* Add */}
@@ -64,33 +64,33 @@ export default function MemoryPage() {
type="text" value={newContent}
onChange={e => setNewContent(e.target.value)}
placeholder="添加新记忆..."
className="flex-1 bg-[#000] border border-[#404040] focus:border-[#277AF7] rounded-[14px] px-4 py-2.5 text-sm text-[#F2F2F2] placeholder:text-white/30 outline-none"
className="flex-1 bg-[var(--mx-surface)] border border-[var(--mx-outline)] focus:border-[var(--mx-primary)] rounded-[14px] px-4 py-2.5 text-sm text-[var(--mx-text)] placeholder:text-[var(--mx-text-dim)] outline-none"
/>
<button onClick={handleAdd} disabled={!newContent.trim()}
className="px-4 py-2.5 bg-[#277AF7] hover:bg-[#3482FF] disabled:bg-[#253E64] text-white text-sm font-medium rounded-full"
className="px-4 py-2.5 bg-[var(--mx-primary)] hover:bg-[var(--mx-primary-hover)] disabled:bg-[#253E64] text-white text-sm font-medium rounded-full"
>添加</button>
</div>
{/* List */}
{loading ? (
<p className="text-center text-white/30 py-8 text-sm">加载中...</p>
<p className="text-center text-[var(--mx-text-dim)] py-8 text-sm">加载中...</p>
) : memories.length === 0 ? (
<p className="text-center text-white/30 py-8 text-sm">暂无记忆</p>
<p className="text-center text-[var(--mx-text-dim)] py-8 text-sm">暂无记忆</p>
) : (
<div className="space-y-2">
{memories.map(m => (
<div key={m.id} className="bg-[#000] border border-[#404040] rounded-[18px] px-4 py-3 flex items-start justify-between">
<div key={m.id} className="bg-[var(--mx-surface)] border border-[var(--mx-outline)] rounded-[18px] px-4 py-3 flex items-start justify-between">
<div className="flex-1 min-w-0">
<p className="text-sm text-[#F2F2F2] truncate">{m.content}</p>
<p className="text-sm text-[var(--mx-text)] truncate">{m.content}</p>
<div className="flex items-center gap-2 mt-1">
<span className="text-xs px-1.5 py-0.5 rounded bg-[#2B3B54]/50 text-[#4788FF]">{m.category}</span>
<span className="text-xs px-1.5 py-0.5 rounded bg-[var(--mx-badge-blue)]/50 text-[var(--mx-tertiary-text)]">{m.category}</span>
{m.keywords?.slice(0, 3).map((kw, i) => (
<span key={i} className="text-xs text-white/30">{kw}</span>
<span key={i} className="text-xs text-[var(--mx-text-dim)]">{kw}</span>
))}
</div>
</div>
<button onClick={() => handleDelete(m.id)}
className="text-xs text-[#F12522]/70 hover:text-[#F12522] shrink-0 ml-3 mt-0.5"
className="text-xs text-[var(--mx-error)]/70 hover:text-[var(--mx-error)] shrink-0 ml-3 mt-0.5"
>删除</button>
</div>
))}