feat: optimize page flow test

src/modules/flow/page-flow-test/page-flow-test.component.html

@@ -1,4 +1,77 @@
-<ion-button (click)="startTriage()">开始分诊</ion-button>
-<ion-button (click)="getForm()">获取表单</ion-button>
-<ion-button (click)="jobWorkflow()">求职表单</ion-button>
-<ion-button (click)="startWorkflow()">启动工作流</ion-button>
+<ion-content class="ion-padding">
+    <!-- 工作流分组1：医疗相关 -->
+    <ion-card class="workflow-group">
+        <ion-card-header>
+            <ion-card-title>医疗工作流</ion-card-title>
+            <ion-card-subtitle>与医疗相关的流程</ion-card-subtitle>
+        </ion-card-header>
+
+        <ion-card-content>
+            <ion-grid>
+                <ion-row>
+                    <ion-col size="12" size-md="6">
+                        <ion-card class="workflow-card" button (click)="startTriage()">
+                            <ion-icon name="medkit" color="primary" class="workflow-icon"></ion-icon>
+                            <ion-card-header>
+                                <ion-card-title>开始分诊</ion-card-title>
+                            </ion-card-header>
+                            <ion-card-content>
+                                启动患者分诊流程
+                            </ion-card-content>
+                        </ion-card>
+                    </ion-col>
+
+                    <ion-col size="12" size-md="6">
+                        <ion-card class="workflow-card" button (click)="getForm()">
+                            <ion-icon name="document-text" color="secondary" class="workflow-icon"></ion-icon>
+                            <ion-card-header>
+                                <ion-card-title>获取表单</ion-card-title>
+                            </ion-card-header>
+                            <ion-card-content>
+                                获取医疗表单和文档
+                            </ion-card-content>
+                        </ion-card>
+                    </ion-col>
+                </ion-row>
+            </ion-grid>
+        </ion-card-content>
+    </ion-card>
+
+    <!-- 工作流分组2：人事相关 -->
+    <ion-card class="workflow-group">
+        <ion-card-header>
+            <ion-card-title>人事工作流</ion-card-title>
+            <ion-card-subtitle>与人事相关的流程</ion-card-subtitle>
+        </ion-card-header>
+
+        <ion-card-content>
+            <ion-grid>
+                <ion-row>
+                    <ion-col size="12" size-md="6">
+                        <ion-card class="workflow-card" button (click)="jobWorkflow()">
+                            <ion-icon name="briefcase" color="tertiary" class="workflow-icon"></ion-icon>
+                            <ion-card-header>
+                                <ion-card-title>求职表单</ion-card-title>
+                            </ion-card-header>
+                            <ion-card-content>
+                                处理求职申请和工作申请
+                            </ion-card-content>
+                        </ion-card>
+                    </ion-col>
+
+                    <ion-col size="12" size-md="6">
+                        <ion-card class="workflow-card" button (click)="startWorkflow()">
+                            <ion-icon name="rocket" color="success" class="workflow-icon"></ion-icon>
+                            <ion-card-header>
+                                <ion-card-title>启动工作流</ion-card-title>
+                            </ion-card-header>
+                            <ion-card-content>
+                                启动通用工作流程
+                            </ion-card-content>
+                        </ion-card>
+                    </ion-col>
+                </ion-row>
+            </ion-grid>
+        </ion-card-content>
+    </ion-card>
+</ion-content>

src/modules/flow/page-flow-test/page-flow-test.component.scss

@@ -0,0 +1,41 @@
+.workflow-group {
+    margin-bottom: 20px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+    ion-card-header {
+        background: var(--ion-color-light);
+    }
+}
+
+.workflow-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 10px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+    &:active {
+        transform: scale(0.98);
+    }
+
+    .workflow-icon {
+        font-size: 48px;
+        margin: 16px 0;
+    }
+
+    ion-card-header {
+        width: 100%;
+        padding-bottom: 0;
+    }
+
+    ion-card-content {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

src/modules/flow/page-flow-test/page-flow-test.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { ModalController } from '@ionic/angular/standalone';
-import { IonButton } from '@ionic/angular/standalone';
+import { IonicModule } from '@ionic/angular';
 import { FlowExecutor } from '../lib/flow.executor';
 import { MockProgressTask, MockRetryTask, MockSuccessTask } from './mock-tasks/mock-tasks';
 import { FlowDisplayComponent } from '../lib/flow-display/flow-display.component';
@@ -14,7 +14,9 @@ import { JobIntentionTask, UserBasicInfoTask, UserInterestsTask } from './job-wo
   selector: 'app-page-flow-test',
   templateUrl: './page-flow-test.component.html',
   styleUrls: ['./page-flow-test.component.scss'],
-  imports: [IonButton, FlowDisplayComponent,
+  imports: [
+    IonicModule,
+    FlowDisplayComponent,
     TriageResultComponent,
     SymptomInputModalComponent
   ],