refactor(frontend): update UI components for database migration

- Update UsageFooter component to handle new data structure
- Modify SkillsPage to work with database-backed skills management
- Ensure frontend compatibility with refactored backend

src/components/UsageFooter.tsx

@@ -156,13 +156,14 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
                 {t("usage.remaining")}
               </span>
               <span
-                className={`font-semibold tabular-nums ${isExpired
+                className={`font-semibold tabular-nums ${
+                  isExpired
                     ? "text-red-500 dark:text-red-400"
                     : firstUsage.remaining <
-                      (firstUsage.total || firstUsage.remaining) * 0.1
+                        (firstUsage.total || firstUsage.remaining) * 0.1
                       ? "text-orange-500 dark:text-orange-400"
                       : "text-green-600 dark:text-green-400"
-                  }`}
+                }`}
               >
                 {firstUsage.remaining.toFixed(2)}
               </span>
@@ -310,12 +311,13 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
               {t("usage.remaining")}
             </span>
             <span
-              className={`font-semibold tabular-nums ${isExpired
+              className={`font-semibold tabular-nums ${
-                ? "text-red-500 dark:text-red-400"
+                isExpired
-                : remaining < (total || remaining) * 0.1
+                  ? "text-red-500 dark:text-red-400"
-                  ? "text-orange-500 dark:text-orange-400"
+                  : remaining < (total || remaining) * 0.1
-                  : "text-green-600 dark:text-green-400"
+                    ? "text-orange-500 dark:text-orange-400"
-                }`}
+                    : "text-green-600 dark:text-green-400"
+              }`}
             >
               {remaining.toFixed(2)}
             </span>

src/components/skills/SkillsPage.tsx

@@ -111,12 +111,12 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
         const errorMessage =
           error instanceof Error ? error.message : String(error);
 
-      // 使用错误解析器格式化错误，传入 "skills.uninstallFailed"
+        // 使用错误解析器格式化错误，传入 "skills.uninstallFailed"
-      const { title, description } = formatSkillError(
+        const { title, description } = formatSkillError(
-        errorMessage,
+          errorMessage,
-        t,
+          t,
-        "skills.uninstallFailed",
+          "skills.uninstallFailed",
-      );
+        );
 
         toast.error(title, {
           description,