fix: 修复web mobile 模式的显示问题

Author: mmdctjj

apps/desktop/src/pages/Profile.tsx

@@ -73,6 +73,7 @@ export default function Profile() {
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [newCollectionName, setNewCollectionName] = useState("");
   const [showDropdown, setShowDropdown] = useState(false);
+  const [syncing, setSyncing] = useState<string | null>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   // Close dropdown on click outside
@@ -173,6 +174,31 @@ export default function Profile() {
 
   const downloadedBooks: Book[] = [];
 
+  const handleSync = async (type: "full" | "incremental") => {
+    const title = type === "full" ? "全量更新" : "增量更新";
+    const message =
+      type === "full"
+        ? "扫描所有本地书籍，新增数据库不存在的，标记已删除的，重新抓取所有现有书籍的元数据。"
+        : "仅扫描新数据，现有数据不做处理。";
+
+    if (!window.confirm(`${title}\n\n${message}\n\n确认开始更新吗？`)) {
+      return;
+    }
+
+    setSyncing(type);
+    try {
+      const { getApiClient } = await import("@bookdock/api-client");
+      const api = getApiClient();
+      const res = await api.syncBooks(type);
+      alert(res.data?.message || `${type === "full" ? "全量" : "增量"}更新成功`);
+    } catch (e: any) {
+      alert(e?.response?.data?.message || "同步失败");
+    } finally {
+      setSyncing(null);
+      setShowDropdown(false);
+    }
+  };
+
   const handleCreateCollection = useCallback(async () => {
     if (!newCollectionName.trim()) return;
     try {
@@ -479,6 +505,22 @@ export default function Profile() {
                   <Plus className="w-4 h-4" />
                   <span>新建书单</span>
                 </button>
+                <button
+                  onClick={() => { handleSync("incremental"); setShowDropdown(false); }}
+                  disabled={!!syncing}
+                  className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50"
+                >
+                  <Plus className="w-4 h-4" />
+                  <span>增量更新</span>
+                </button>
+                <button
+                  onClick={() => { handleSync("full"); setShowDropdown(false); }}
+                  disabled={!!syncing}
+                  className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50"
+                >
+                  <RefreshCw className="w-4 h-4" />
+                  <span>全量更新</span>
+                </button>
                 <Link
                   to="/membership"
                   onClick={() => setShowDropdown(false)}

apps/mobile/src/screens/ProfileScreen.tsx

@@ -379,21 +379,22 @@ export function ProfileScreen() {
               <Ionicons name="folder-open-outline" size={18} color={theme.colors.text} />
               <Text style={{ fontSize: fontSizes.md, color: theme.colors.text }}>新建书单</Text>
             </TouchableOpacity>
+            <View style={{ height: 1, backgroundColor: theme.colors.border, marginHorizontal: spacing.md }} />
+            <TouchableOpacity style={styles.menuItem} onPress={() => handleSync('incremental')} disabled={!!syncing}>
+              <Ionicons name="add-circle-outline" size={18} color={theme.colors.text} />
+              <Text style={{ fontSize: fontSizes.md, color: theme.colors.text }}>增量更新</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.menuItem} onPress={() => handleSync('full')} disabled={!!syncing}>
+              <Ionicons name="refresh-circle-outline" size={18} color={theme.colors.text} />
+              <Text style={{ fontSize: fontSizes.md, color: theme.colors.text }}>全量更新</Text>
+            </TouchableOpacity>
             {user?.role === 'admin' && (
               <>
                 <View style={{ height: 1, backgroundColor: theme.colors.border, marginHorizontal: spacing.md }} />
                 <TouchableOpacity style={styles.menuItem} onPress={() => { setMenuVisible(false); navigation.navigate('AdminUsers'); }}>
                   <Ionicons name="people-outline" size={18} color={theme.colors.text} />
                   <Text style={{ fontSize: fontSizes.md, color: theme.colors.text }}>用户管理</Text>
                 </TouchableOpacity>
-                <TouchableOpacity style={styles.menuItem} onPress={() => handleSync('incremental')} disabled={!!syncing}>
-                  <Ionicons name="add-circle-outline" size={18} color={theme.colors.text} />
-                  <Text style={{ fontSize: fontSizes.md, color: theme.colors.text }}>增量更新</Text>
-                </TouchableOpacity>
-                <TouchableOpacity style={styles.menuItem} onPress={() => handleSync('full')} disabled={!!syncing}>
-                  <Ionicons name="refresh-circle-outline" size={18} color={theme.colors.text} />
-                  <Text style={{ fontSize: fontSizes.md, color: theme.colors.text }}>全量更新</Text>
-                </TouchableOpacity>
               </>
             )}
           </View>

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "packageManager": "pnpm@10.33.4",
   "scripts": {
-    "dev": "pnpm -r dev",
+    "dev": "concurrently \"pnpm --filter @bookdock/server run dev\" \"pnpm --filter @bookdock/desktop run dev\"",
     "dev:desktop": "pnpm --filter @bookdock/desktop dev:desktop",
     "build": "pnpm -r build",
     "lint": "pnpm -r lint",
@@ -15,6 +15,7 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",
     "babel-plugin-module-resolver": "^5.0.3",
+    "concurrently": "^10.0.3",
     "vite-plugin-pwa": "^1.2.0",
     "workbox-window": "^7.4.0"
   },
@@ -24,4 +25,4 @@
     "react": "18.3.1",
     "react-native": "0.76.9"
   }
-}
+}