liqupan/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: app 端 ui 设计完成

Browse Source
This commit is contained in:
liqupan
2026-01-28 19:10:19 +08:00
commit a4e7898e94
149 changed files with 11302 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
wei-ai-demo/pages/PrivacySafety.tsx Normal file
View File

@@ -0,0 +1,176 @@
import React, { useState } from 'react';
import {
ChevronLeft,
ShieldCheck,
Lock,
EyeOff,
Fingerprint,
CloudOff,
Trash2,
AlertTriangle,
History
} from 'lucide-react';
interface PrivacySafetyProps {
onBack: () => void;
}
const PrivacySafety: React.FC<PrivacySafetyProps> = ({ onBack }) => {
const [settings, setSettings] = useState({
biometric: true,
incognito: false,
cloudSync: false,
analytics: false,
blurApp: true
});
const toggleSetting = (key: keyof typeof settings) => {
setSettings(prev => ({ ...prev, [key]: !prev[key] }));
};
const handleWipeData = () => {
if(window.confirm("警告：此操作不可逆！\n\n将清除本地所有聊天记录、自定义剧本及偏好设置。\n确定执行吗？")) {
alert("正在执行安全擦除...");
setTimeout(() => {
alert("数据已销毁。");
onBack();
}, 1500);
}
};
return (
<div className="fixed inset-0 z-[60] bg-[#0F1014] flex flex-col h-full overflow-hidden animate-in slide-in-from-right duration-300">
{/* Header */}
<div className="relative z-20 pt-safe-top px-4 py-3 flex items-center justify-between border-b border-white/5 bg-[#0F1014]/80 backdrop-blur-md">
<button onClick={onBack} className="p-2 -ml-2 text-white/70 hover:text-white active:scale-95 transition-transform">
<ChevronLeft size={24} />
</button>
<h1 className="text-base font-bold text-white tracking-wider">隐私与安全</h1>
<div className="w-8"></div>
</div>
<div className="flex-1 overflow-y-auto no-scrollbar p-5 pb-20">
{/* Security Status Card */}
<div className="bg-[#1C1F26]/40 border border-[#10B981]/20 rounded-2xl p-6 mb-8 flex flex-col items-center justify-center relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-[#10B981]/5 to-transparent"></div>
<div className="relative z-10 w-16 h-16 rounded-full bg-[#10B981]/10 flex items-center justify-center mb-3 shadow-[0_0_20px_rgba(16,185,129,0.2)]">
<ShieldCheck size={32} className="text-[#10B981]" />
</div>
<h2 className="text-lg font-bold text-white tracking-wide">环境安全</h2>
<p className="text-xs text-[#94A3B8] mt-1">端对端加密已启用 • 本地存储</p>
</div>
{/* Settings Group 1: Access Control */}
<h3 className="text-xs font-bold text-[#64748B] uppercase tracking-widest mb-3 ml-1">访问控制</h3>
<div className="space-y-3 mb-8">
{/* Biometric */}
<div className="bg-[#1C1F26]/60 p-4 rounded-xl flex items-center justify-between border border-white/5">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-[#8B5CF6]/10 text-[#8B5CF6]">
<Fingerprint size={20} />
</div>
<div>
<div className="text-sm font-bold text-white">生物识别锁定</div>
<div className="text-[10px] text-[#94A3B8]">使用 FaceID/指纹 解锁应用</div>
</div>
</div>
<button
onClick={() => toggleSetting('biometric')}
className={`w-11 h-6 rounded-full transition-colors relative ${settings.biometric ? 'bg-[#8B5CF6]' : 'bg-[#334155]'}`}
>
<div className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${settings.biometric ? 'left-6' : 'left-1'}`}></div>
</button>
</div>
{/* App Switcher Blur */}
<div className="bg-[#1C1F26]/60 p-4 rounded-xl flex items-center justify-between border border-white/5">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-white/5 text-[#94A3B8]">
<EyeOff size={20} />
</div>
<div>
<div className="text-sm font-bold text-white">后台模糊</div>
<div className="text-[10px] text-[#94A3B8]">切换应用时模糊屏幕内容</div>
</div>
</div>
<button
onClick={() => toggleSetting('blurApp')}
className={`w-11 h-6 rounded-full transition-colors relative ${settings.blurApp ? 'bg-[#8B5CF6]' : 'bg-[#334155]'}`}
>
<div className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${settings.blurApp ? 'left-6' : 'left-1'}`}></div>
</button>
</div>
</div>
{/* Settings Group 2: Data Privacy */}
<h3 className="text-xs font-bold text-[#64748B] uppercase tracking-widest mb-3 ml-1">数据隐私</h3>
<div className="space-y-3 mb-8">
{/* Cloud Sync */}
<div className="bg-[#1C1F26]/60 p-4 rounded-xl flex items-center justify-between border border-white/5">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-white/5 text-[#94A3B8]">
<CloudOff size={20} />
</div>
<div>
<div className="text-sm font-bold text-white">云端同步</div>
<div className="text-[10px] text-[#94A3B8]">仅在本地存储聊天与设置</div>
</div>
</div>
<button
onClick={() => toggleSetting('cloudSync')}
className={`w-11 h-6 rounded-full transition-colors relative ${settings.cloudSync ? 'bg-[#8B5CF6]' : 'bg-[#334155]'}`}
>
<div className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${settings.cloudSync ? 'left-6' : 'left-1'}`}></div>
</button>
</div>
{/* Incognito Mode */}
<div className="bg-[#1C1F26]/60 p-4 rounded-xl flex items-center justify-between border border-white/5">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-white/5 text-[#94A3B8]">
<Lock size={20} />
</div>
<div>
<div className="text-sm font-bold text-white">隐身伪装模式</div>
<div className="text-[10px] text-[#94A3B8]">更改应用图标与通知样式</div>
</div>
</div>
<button
onClick={() => toggleSetting('incognito')}
className={`w-11 h-6 rounded-full transition-colors relative ${settings.incognito ? 'bg-[#8B5CF6]' : 'bg-[#334155]'}`}
>
<div className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${settings.incognito ? 'left-6' : 'left-1'}`}></div>
</button>
</div>
</div>
{/* Danger Zone */}
<div className="mt-8 border-t border-white/5 pt-6">
<button
onClick={handleWipeData}
className="w-full group relative overflow-hidden rounded-xl border border-[#F43F5E]/30 bg-[#F43F5E]/5 p-4 flex items-center justify-between active:bg-[#F43F5E]/10 transition-all"
>
<div className="flex items-center gap-3 z-10">
<div className="p-2 rounded-lg bg-[#F43F5E]/10 text-[#F43F5E]">
<AlertTriangle size={20} />
</div>
<div className="text-left">
<div className="text-sm font-bold text-[#F43F5E]">紧急数据销毁</div>
<div className="text-[10px] text-[#F43F5E]/70">不可恢复的操作</div>
</div>
</div>
<Trash2 size={18} className="text-[#F43F5E] z-10" />
</button>
<div className="mt-4 flex justify-center">
<p className="text-[10px] text-[#475569] font-mono">ID: 884-291-00X-SECURE</p>
</div>
</div>
</div>
</div>
);
};
export default PrivacySafety;