julian/chrono-snap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

ui lang to zh-cn

Browse Source
This commit is contained in:
Julian Freeman
2026-03-22 16:49:30 -04:00
parent b94a976e5f
commit b9db650e25
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/App.vue
View File

@@ -188,13 +188,13 @@ const handleTimelineClick = (e: MouseEvent) => {
<div class="w-20 h-20 bg-[#007AFF]/10 rounded-3xl flex items-center justify-center mx-auto mb-8">
<FolderOpen :size="40" class="text-[#007AFF]" />
</div>
<h1 class="text-3xl font-bold mb-4 tracking-tight">Set up Chrono Snap</h1>
<p class="text-[#86868B] mb-10 leading-relaxed">Choose a local folder where your visual history will be securely stored.</p>
<h1 class="text-3xl font-bold mb-4 tracking-tight">初始化 Chrono Snap</h1>
<p class="text-[#86868B] mb-10 leading-relaxed">请选择一个本地文件夹，用于安全地存储您的视觉历史记录。</p>
<button
@click="selectFolder"
class="bg-[#007AFF] text-white px-8 py-4 rounded-2xl font-semibold hover:bg-[#0063CC] transition-all transform active:scale-95 shadow-lg shadow-[#007AFF]/20 w-full flex items-center justify-center gap-3"
>
Select Storage Folder
选择存储目录
</button>
</div>
</div>
@@ -206,7 +206,7 @@ const handleTimelineClick = (e: MouseEvent) => {
<!-- Date Picker Header -->
<div class="p-6 bg-[#F8FAFD]/80 backdrop-blur-md sticky top-0 z-20 border-b border-[#E5E5E7]/50">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-bold tracking-tight">Activity</h2>
<h2 class="text-lg font-bold tracking-tight">历史活动</h2>
<button @click="loadTimeline" class="p-2 hover:bg-white rounded-xl transition-colors text-[#86868B] hover:text-[#007AFF]">
<RefreshCw :size="18" />
</button>
@@ -280,10 +280,10 @@ const handleTimelineClick = (e: MouseEvent) => {
<div class="p-6 flex items-center justify-between border-b border-[#E5E5E7]/50 bg-white/80 backdrop-blur-md z-10">
<div v-if="selectedImage" class="flex items-center gap-3">
<span class="text-lg font-bold">{{ selectedImage.time }}</span>
<span v-if="lockedImage?.path === selectedImage.path" class="text-xs font-bold px-2 py-0.5 bg-[#007AFF] text-white rounded-full uppercase tracking-wider">Locked</span>
<span v-else class="text-xs font-medium px-2 py-0.5 bg-[#F2F2F7] text-[#86868B] rounded-full uppercase tracking-wider">Previewing</span>
<span v-if="lockedImage?.path === selectedImage.path" class="text-xs font-bold px-2 py-0.5 bg-[#007AFF] text-white rounded-full uppercase tracking-wider">已定格</span>
<span v-else class="text-xs font-medium px-2 py-0.5 bg-[#F2F2F7] text-[#86868B] rounded-full uppercase tracking-wider">预览中</span>
</div>
<div v-else class="text-[#86868B] font-medium">No activity selected</div>
<div v-else class="text-[#86868B] font-medium">未选中活动</div>
<button v-if="selectedImage" @click="isFullscreen = true" class="p-2.5 rounded-xl hover:bg-[#F2F2F7] transition-all text-[#86868B]">
<Maximize2 :size="20" />
@@ -301,7 +301,7 @@ const handleTimelineClick = (e: MouseEvent) => {
<div class="w-16 h-16 bg-[#E5E5E7] rounded-full flex items-center justify-center opacity-50">
<Maximize2 :size="30" />
</div>
<p class="font-medium">Hover over the timeline to preview</p>
<p class="font-medium">在时间轴上滑动以预览</p>
</div>
</div>
</div>
@@ -311,14 +311,14 @@ const handleTimelineClick = (e: MouseEvent) => {
<div v-if="isSettingsOpen" class="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isSettingsOpen = false">
<div class="bg-white rounded-[40px] shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
<div class="p-8 border-b border-[#E5E5E7] flex justify-between items-center bg-[#FBFBFD]">
<h2 class="text-2xl font-bold">Settings</h2>
<h2 class="text-2xl font-bold">设置</h2>
<button @click="isSettingsOpen = false" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-[#E5E5E7] transition-colors">
<X :size="24" />
</button>
</div>
<div class="p-10 space-y-8">
<div class="space-y-3">
<label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">Storage Location</label>
<label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">存储位置</label>
<div class="flex gap-3">
<input type="text" readonly :value="savePath" class="flex-1 bg-[#F2F2F7] rounded-2xl px-5 py-3.5 text-sm font-medium text-[#1D1D1F] outline-none" />
<button @click="selectFolder" class="bg-white border-2 border-[#E5E5E7] p-3.5 rounded-2xl hover:border-[#007AFF] transition-all"><FolderOpen :size="20" /></button>
@@ -327,8 +327,8 @@ const handleTimelineClick = (e: MouseEvent) => {
<div class="flex items-center justify-between p-4 bg-[#F2F2F7] rounded-3xl">
<div class="space-y-0.5">
<div class="font-bold text-[#1D1D1F]">Merge Displays</div>
<div class="text-xs font-medium text-[#86868B]">Stitch all screens into one image</div>
<div class="font-bold text-[#1D1D1F]">多屏合并</div>
<div class="text-xs font-medium text-[#86868B]">将所有屏幕拼接成一张图片</div>
</div>
<button @click="mergeScreens = !mergeScreens; updateSettings()" class="w-14 h-8 rounded-full transition-all relative shadow-inner" :class="mergeScreens ? 'bg-[#34C759]' : 'bg-[#E5E5E7]'">
<div class="absolute top-1 left-1 w-6 h-6 bg-white rounded-full transition-transform shadow-md" :style="{ transform: mergeScreens ? 'translateX(24px)' : 'translateX(0)' }"></div>
@@ -337,20 +337,20 @@ const handleTimelineClick = (e: MouseEvent) => {
<div class="space-y-4">
<div class="flex justify-between items-end">
<label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">Capture Interval</label>
<span class="text-lg font-black text-[#007AFF]">{{ captureInterval }} Seconds</span>
<label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">截图间隔</label>
<span class="text-lg font-black text-[#007AFF]">{{ captureInterval }} 秒</span>
</div>
<input type="range" v-model.number="captureInterval" min="10" max="600" step="10" @change="updateSettings" class="w-full h-2 bg-[#E5E5E7] rounded-full appearance-none cursor-pointer accent-[#007AFF]" />
<p class="text-[11px] text-[#86868B] font-medium leading-normal text-center">Frequency of snapshots (10s to 10m).</p>
<p class="text-[11px] text-[#86868B] font-medium leading-normal text-center">自动截图的频率（10秒至10分钟）。</p>
</div>
<div class="space-y-4">
<div class="flex justify-between items-end">
<label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">Retention Policy</label>
<span class="text-lg font-black text-[#007AFF]">{{ retainDays }} Days</span>
<label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">清理策略</label>
<span class="text-lg font-black text-[#007AFF]">{{ retainDays }} 天</span>
</div>
<input type="range" v-model.number="retainDays" min="1" max="180" @change="updateSettings" class="w-full h-2 bg-[#E5E5E7] rounded-full appearance-none cursor-pointer accent-[#007AFF]" />
<p class="text-[11px] text-[#86868B] font-medium leading-normal text-center">Screenshots older than this will be permanently removed.</p>
<p class="text-[11px] text-[#86868B] font-medium leading-normal text-center">超过此天数的截图将被自动永久删除。</p>
</div>
</div>
</div>