feat: add Import & Export page and update Help page with new navigation

webapp/src/App.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'preact/hooks';
 import { Link, Route, Switch, useLocation } from 'wouter';
 import { useQuery } from '@tanstack/react-query';
-import { HardDriveDownload, Lock, LogOut, Send as SendIcon, Settings as SettingsIcon, Shield, ShieldUser, Vault } from 'lucide-preact';
+import { ArrowUpDown, Cloud, Lock, LogOut, Send as SendIcon, Settings as SettingsIcon, Shield, ShieldUser, Vault } from 'lucide-preact';
 import AuthViews from '@/components/AuthViews';
 import ConfirmDialog from '@/components/ConfirmDialog';
 import ToastHost from '@/components/ToastHost';
@@ -14,6 +14,7 @@ import SettingsPage from '@/components/SettingsPage';
 import SecurityDevicesPage from '@/components/SecurityDevicesPage';
 import AdminPage from '@/components/AdminPage';
 import HelpPage from '@/components/HelpPage';
+import ImportExportPage from '@/components/ImportExportPage';
 import {
   changeMasterPassword,
   createFolder,
@@ -978,9 +979,13 @@ export default function App() {
                 <span>{t('nav_device_management')}</span>
               </Link>
               <Link href="/help" className={`side-link ${location === '/help' ? 'active' : ''}`}>
-                <HardDriveDownload size={16} />
+                <Cloud size={16} />
                 <span>{t('nav_backup_strategy')}</span>
               </Link>
+              <Link href="/help/import-export" className={`side-link ${location === '/help/import-export' ? 'active' : ''}`}>
+                <ArrowUpDown size={14} />
+                <span>{t('nav_import_export')}</span>
+              </Link>
             </aside>
             <main className="content">
               <Switch>
@@ -1125,6 +1130,9 @@ export default function App() {
                     }}
                   />
                 </Route>
+                <Route path="/help/import-export">
+                  <ImportExportPage />
+                </Route>
                 <Route path="/help">
                   <HelpPage />
                 </Route>

webapp/src/components/HelpPage.tsx

@@ -1,4 +1,4 @@
-import { HardDriveDownload } from 'lucide-preact';
+import { Cloud } from 'lucide-preact';
 import { t } from '@/lib/i18n';
 
 export default function HelpPage() {
@@ -8,7 +8,7 @@ export default function HelpPage() {
         <h3>{t('backup_strategy_title')}</h3>
         <div className="empty" style={{ minHeight: 180 }}>
           <div style={{ textAlign: 'center' }}>
-            <HardDriveDownload size={34} style={{ color: '#64748b', marginBottom: 8 }} />
+            <Cloud size={34} style={{ color: '#64748b', marginBottom: 8 }} />
             <div>{t('backup_strategy_under_construction')}</div>
           </div>
         </div>

webapp/src/components/ImportExportPage.tsx

@@ -0,0 +1,19 @@
+import { ArrowUpDown } from 'lucide-preact';
+import { t } from '@/lib/i18n';
+
+export default function ImportExportPage() {
+  return (
+    <div className="stack">
+      <section className="card">
+        <h3>{t('import_export_title')}</h3>
+        <div className="empty" style={{ minHeight: 180 }}>
+          <div style={{ textAlign: 'center' }}>
+            <ArrowUpDown size={34} style={{ color: '#64748b', marginBottom: 8 }} />
+            <div>{t('import_export_under_construction')}</div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+

webapp/src/lib/i18n.ts

@@ -10,8 +10,11 @@ const messages: Record<Locale, Record<string, string>> = {
     nav_my_vault: "My Vault",
     nav_sends: "Sends",
     nav_backup_strategy: "Backup Strategy",
+    nav_import_export: "Import & Export",
     backup_strategy_title: "Backup Strategy",
     backup_strategy_under_construction: "Under construction.",
+    import_export_title: "Import & Export",
+    import_export_under_construction: "Under construction.",
     txt_access_count: "Access Count",
     txt_accessed_count_times: "Accessed {count} times",
     txt_actions: "Actions",
@@ -368,8 +371,11 @@ const zhCNOverrides: Record<string, string> = {
   nav_account_settings: '账户设置',
   nav_device_management: '设备管理',
   nav_backup_strategy: '备份策略',
+  nav_import_export: '导入导出',
   backup_strategy_title: '备份策略',
   backup_strategy_under_construction: '正在搭建中',
+  import_export_title: '导入导出',
+  import_export_under_construction: '正在搭建中',
   txt_sign_out: '退出登录',
   txt_log_in: '登录',
   txt_log_out: '退出',