diff --git a/src/app/pages/home/register.ts b/src/app/pages/home/register.ts
index 3a5c2bd..03ff10d 100644
--- a/src/app/pages/home/register.ts
+++ b/src/app/pages/home/register.ts
@@ -1,5 +1,6 @@
 import { Component, Injectable, Input, OnChanges, signal, SimpleChanges, ViewContainerRef } from '@angular/core';
 import { TreeNode } from '../../core/models';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-field',
@@ -36,6 +37,56 @@ export class FieldWidget implements OnChanges {
   }
 }
 
+@Component({
+  selector: 'app-card',
+  template: `
+    <div [style]="currentStyle()">
+      <span *ngIf="!hasContent()">拖拽字段进入该区域</span>
+      <ng-content></ng-content>
+    </div>
+  `,
+  imports: [NgIf],
+  standalone: true
+})
+export class CardWidget implements OnChanges {
+  @Input() node: TreeNode;
+
+  @Input() style: { [p: string]: any };
+
+  currentStyle = signal({
+    width: '200px',
+    height: '100px',
+    background: '#eee',
+    border: '1px solid #ddd',
+    display: 'flex',
+    padding: '10px',
+    justifyContent: 'center',
+    alignItems: 'center'
+  });
+
+  constructor(private viewContainerRef: ViewContainerRef) {}
+
+  hasContent() {
+    return !!this.viewContainerRef.length;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.style && changes.style.currentValue) {
+      this.currentStyle.set({
+        width: '200px',
+        height: '100px',
+        background: '#eee',
+        border: '1px solid #ddd',
+        display: 'flex',
+        padding: '10px',
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...this.style
+      });
+    }
+  }
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -44,6 +95,7 @@ export class WidgetFactory {
 
   constructor() {
     this.register('Field', FieldWidget);
+    this.register('Card', CardWidget);
   }
 
   register(name: string, component: any) {