lc/NoteAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对移动端的UI进行了重构

Browse Source
This commit is contained in:
cniucheng
2026-02-25 10:33:37 +08:00
parent ee3de1968c
commit 5709ef2966
16 changed files with 689 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/settings/page.tsx
+36 -19
View File
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
import { Lock, Save, Sparkles, Type, Upload, Download } from "lucide-react";
import { Lock, Save, Sparkles, Type, Upload, Download, Loader2 } from "lucide-react";
import { ResizableSidebar } from "@/components/sidebar";
import { PromptManagement } from "@/components/settings/prompt-management";
import { ImportProvider } from "@/components/import-context";
@@ -28,6 +28,8 @@ export default function SettingsPage() {
const [currentPassword, setCurrentPassword] = useState("");
const [newPassword, setNewPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [isExporting, setIsExporting] = useState(false);
const [isRestoring, setIsRestoring] = useState(false);
const [msg, setMsg] = useState<{ type: "success" | "error"; text: string } | null>(null);
const handlePasswordChange = async (e: React.FormEvent) => {
@@ -62,7 +64,7 @@ export default function SettingsPage() {
return (
<ImportProvider>
<div className="flex h-screen w-full bg-background overflow-hidden">
<div className="flex h-[100dvh] w-full overflow-hidden bg-background">
<ResizableSidebar />
<main className="flex-1 h-full overflow-y-auto p-4 md:p-10">
<div className="mx-auto max-w-3xl space-y-8 pb-16">
@@ -71,10 +73,10 @@ export default function SettingsPage() {
<p className="text-muted-foreground">管理外观、AI、安全与备份。</p>
</header>
<section className="ui-card ui-enter-delayed p-6 space-y-5">
<section className="ui-card ui-enter-delayed space-y-5 p-4 md:p-6">
<div className="flex items-center gap-2 border-b pb-2">
<Type size={18} className="text-primary" />
<h2 className="text-xl font-semibold">外观设置</h2>
<h2 className="text-lg font-semibold md:text-xl">外观设置</h2>
</div>
<div className="grid gap-4 md:grid-cols-2">
@@ -149,10 +151,10 @@ export default function SettingsPage() {
</label>
</section>
<section className="ui-card ui-enter-delayed p-6 space-y-5">
<section className="ui-card ui-enter-delayed space-y-5 p-4 md:p-6">
<div className="flex items-center gap-2 border-b pb-2">
<Sparkles size={18} className="text-primary" />
<h2 className="text-xl font-semibold">AI 配置</h2>
<h2 className="text-lg font-semibold md:text-xl">AI 配置</h2>
</div>
<div className="space-y-3">
@@ -191,14 +193,14 @@ export default function SettingsPage() {
</div>
</section>
<section className="ui-card ui-enter-delayed p-6">
<section className="ui-card ui-enter-delayed p-4 md:p-6">
<PromptManagement />
</section>
<section className="ui-card ui-enter-delayed p-6 space-y-5">
<section className="ui-card ui-enter-delayed space-y-5 p-4 md:p-6">
<div className="flex items-center gap-2 border-b pb-2">
<Lock size={18} className="text-primary" />
<h2 className="text-xl font-semibold">安全设置</h2>
<h2 className="text-lg font-semibold md:text-xl">安全设置</h2>
</div>
<form onSubmit={handlePasswordChange} className="space-y-3 max-w-md">
@@ -243,30 +245,43 @@ export default function SettingsPage() {
</form>
</section>
<section className="ui-card ui-enter-delayed p-6 space-y-4">
<h2 className="text-xl font-semibold">备份与恢复</h2>
<section className="ui-card ui-enter-delayed space-y-4 p-4 md:p-6">
<h2 className="text-lg font-semibold md:text-xl">备份与恢复</h2>
<p className="text-sm text-muted-foreground">恢复会覆盖当前全部文档，请谨慎操作。</p>
<div className="flex flex-col gap-3 sm:flex-row">
<button
onClick={async () => {
const { pages } = await import("@/lib/store").then((m) => m.useEditorStore.getState());
const { exportAllPagesAsZip } = await import("@/lib/export");
await exportAllPagesAsZip(pages);
if (isExporting || isRestoring) return;
setIsExporting(true);
try {
const { pages } = await import("@/lib/store").then((m) => m.useEditorStore.getState());
const { exportAllPagesAsZip } = await import("@/lib/export");
await exportAllPagesAsZip(pages);
} finally {
setIsExporting(false);
}
}}
disabled={isExporting || isRestoring}
aria-busy={isExporting}
className="ui-btn-secondary"
>
<Download size={14} />
下载备份 (Zip)
{isExporting ? <Loader2 size={14} className="animate-spin" /> : <Download size={14} />}
{isExporting ? "导出中..." : "下载备份 (Zip)"}
</button>
<label className="ui-btn inline-flex cursor-pointer border border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/20">
<Upload size={14} />
上传备份并恢复
<label
className={`ui-btn inline-flex border border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/20 ${
isExporting || isRestoring ? "cursor-not-allowed opacity-55" : "cursor-pointer"
}`}
>
{isRestoring ? <Loader2 size={14} className="animate-spin" /> : <Upload size={14} />}
{isRestoring ? "恢复中..." : "上传备份并恢复"}
<input
type="file"
accept=".zip"
className="hidden"
disabled={isExporting || isRestoring}
onChange={async (e) => {
const file = e.target.files?.[0];
if (!file) return;
@@ -284,6 +299,7 @@ export default function SettingsPage() {
}
try {
setIsRestoring(true);
const formData = new FormData();
formData.append("file", file);
const res = await fetch("/api/settings/restore", { method: "POST", body: formData });
@@ -295,6 +311,7 @@ export default function SettingsPage() {
} catch (error) {
alert(String(error));
} finally {
setIsRestoring(false);
e.target.value = "";
}
}}