💄 style(image): optimize UX and fix fal pricing (lobehub#9592)

Author: tjx666

packages/model-bank/src/aiModels/fal.ts

@@ -39,6 +39,24 @@ export const qwenEditParamsSchema: ModelParamsSchema = {
   width: { default: 1328, max: 1536, min: 512, step: 1 },
 };
 
+export const huanyuanImageParamsSchema: ModelParamsSchema = {
+  cfg: { default: 7.5, max: 20, min: 1, step: 0.1 },
+  prompt: { default: '' },
+  seed: { default: null },
+  size: {
+    default: 'square_hd',
+    enum: [
+      'square_hd',
+      'square',
+      'portrait_4_3',
+      'portrait_16_9',
+      'landscape_4_3',
+      'landscape_16_9',
+    ],
+  },
+  steps: { default: 28, max: 50, min: 1, step: 1 },
+};
+
 const falImageModels: AIImageModelCard[] = [
   {
     description:
@@ -84,23 +102,7 @@ const falImageModels: AIImageModelCard[] = [
     displayName: 'HunyuanImage 3.0',
     enabled: true,
     id: 'fal-ai/hunyuan-image/v3',
-    parameters: {
-      cfg: { default: 7.5, max: 20, min: 1, step: 0.1 },
-      prompt: { default: '' },
-      seed: { default: null },
-      size: {
-        default: 'square_hd',
-        enum: [
-          'square_hd',
-          'square',
-          'portrait_4_3',
-          'portrait_16_9',
-          'landscape_4_3',
-          'landscape_16_9',
-        ],
-      },
-      steps: { default: 28, max: 50, min: 1, step: 1 },
-    },
+    parameters: huanyuanImageParamsSchema,
     pricing: {
       units: [{ name: 'imageGeneration', rate: 0.1, strategy: 'fixed', unit: 'megapixel' }],
     },
@@ -197,7 +199,7 @@ const falImageModels: AIImageModelCard[] = [
     id: 'fal-ai/qwen-image-edit',
     parameters: qwenEditParamsSchema,
     pricing: {
-      units: [{ name: 'imageGeneration', rate: 0.025, strategy: 'fixed', unit: 'image' }],
+      units: [{ name: 'imageGeneration', rate: 0.03, strategy: 'fixed', unit: 'megapixel' }],
     },
     releasedAt: '2025-08-19',
     type: 'image',

src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageConfigSkeleton.tsx

@@ -13,14 +13,15 @@ const ImageConfigSkeleton = memo(() => {
     <Flexbox gap={32} padding="12px 12px 0 12px" style={{ height: '100%' }}>
       {/* Model Selection */}
       <Flexbox gap={8}>
-        <Skeleton.Input size="small" style={{ width: 100 }} />
-        <Skeleton.Input size="large" style={{ width: '100%' }} />
+        <Skeleton.Input active size="small" style={{ width: 100 }} />
+        <Skeleton.Input active size="large" style={{ width: '100%' }} />
       </Flexbox>
 
       {/* Image Upload Area */}
       <Flexbox gap={8}>
-        <Skeleton.Input size="small" style={{ width: 60 }} />
+        <Skeleton.Input active size="small" style={{ width: 60 }} />
         <Skeleton.Node
+          active
           style={{
             borderRadius: 8,
             height: 100,
@@ -32,16 +33,16 @@ const ImageConfigSkeleton = memo(() => {
       {/* Parameter Controls */}
       {Array.from({ length: 2 }, (_, index) => (
         <Flexbox gap={8} key={index}>
-          <Skeleton.Input size="small" style={{ width: 80 }} />
-          <Skeleton.Input size="default" style={{ width: '100%' }} />
+          <Skeleton.Input active size="small" style={{ width: 80 }} />
+          <Skeleton.Input active size="default" style={{ width: '100%' }} />
         </Flexbox>
       ))}
 
       {/* Image Number Control (Sticky at bottom) */}
       <Flexbox padding="12px 0" style={{ marginTop: 'auto' }}>
         <Flexbox gap={8}>
-          <Skeleton.Input size="small" style={{ width: 60 }} />
-          <Skeleton.Input size="default" style={{ width: '100%' }} />
+          <Skeleton.Input active size="small" style={{ width: 60 }} />
+          <Skeleton.Input active size="default" style={{ width: '100%' }} />
         </Flexbox>
       </Flexbox>
     </Flexbox>