✨ 卡片视图 (#860)

* 整理结构

* 优化数据流

* 处理卡片视图问题

* 卡片排序逻辑

* 调整卡片组件

* 删除style

* 根据屏幕宽度设定默认视图

* 根据copilot调整

* 整理代码

Author: CodFrm

src/locales/en-US/translation.json

@@ -533,5 +533,6 @@
     "script_sync_delete_desc": "Script {{scriptName}} has been deleted",
     "subscribe_update": "Subscribe {{subscribeName}} has been updated",
     "subscribe_update_desc": "New scripts: {{newScripts}}\nDeleted scripts: {{deletedScripts}}"
-  }
+  },
+  "loading": "Loading..."
 }

src/locales/zh-CN/translation.json

@@ -533,5 +533,6 @@
     "script_sync_delete_desc": "脚本 {{scriptName}} 已被删除",
     "subscribe_update": "订阅 {{subscribeName}} 已更新",
     "subscribe_update_desc": "新增脚本：{{newScripts}}\n删除脚本：{{deletedScripts}}"
-  }
+  },
+  "loading": "加载中..."
 }

src/pages/options/index.css

@@ -81,4 +81,31 @@ h6.arco-typography {
     border-left: none !important;
 
   }
+
+  /* 卡片视图样式 */
+  .script-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .script-card .arco-card-body {
+    padding: 16px !important;
+  }
+
+  .script-card-grid {
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  }
+
+  @media (max-width: 960px) {
+    .script-card-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .script-card-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
 }