ai-text-summary-ng 1.0.0

package/fesm2022/ai-text-summary-ng.mjs

@@ -0,0 +1,1155 @@
+import * as i0 from '@angular/core';
+import { Input, Component, EventEmitter, Output } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+class FmodeHeaderComponent {
+    title = '';
+    subtitle = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeHeaderComponent, isStandalone: true, selector: "fmode-header", inputs: { title: "title", subtitle: "subtitle" }, ngImport: i0, template: `
+    <header class="fmode-header">
+      <div class="header-content">
+        <h1 class="header-title">{{ title }}</h1>
+        <p class="header-subtitle" *ngIf="subtitle">{{ subtitle }}</p>
+      </div>
+    </header>
+  `, isInline: true, styles: [".fmode-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem 2rem;box-shadow:0 4px 12px #0000001a}.header-content{max-width:1400px;margin:0 auto}.header-title{margin:0;font-size:1.75rem;font-weight:700;letter-spacing:.5px}.header-subtitle{margin:.5rem 0 0;font-size:1rem;opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-header', standalone: true, imports: [CommonModule], template: `
+    <header class="fmode-header">
+      <div class="header-content">
+        <h1 class="header-title">{{ title }}</h1>
+        <p class="header-subtitle" *ngIf="subtitle">{{ subtitle }}</p>
+      </div>
+    </header>
+  `, styles: [".fmode-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem 2rem;box-shadow:0 4px 12px #0000001a}.header-content{max-width:1400px;margin:0 auto}.header-title{margin:0;font-size:1.75rem;font-weight:700;letter-spacing:.5px}.header-subtitle{margin:.5rem 0 0;font-size:1rem;opacity:.9}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }] } });
+
+class FmodeCardComponent {
+    title = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeCardComponent, isStandalone: true, selector: "fmode-card", inputs: { title: "title" }, ngImport: i0, template: `
+    <div class="fmode-card">
+      <div class="card-header" *ngIf="title">
+        <h2 class="card-title">{{ title }}</h2>
+      </div>
+      <div class="card-body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [".fmode-card{background:#fff;border-radius:12px;box-shadow:0 4px 16px #00000014;overflow:hidden;transition:transform .3s,box-shadow .3s}.fmode-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001f}.card-header{background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:1rem 1.5rem;border-bottom:2px solid #dee2e6}.card-title{margin:0;font-size:1.1rem;font-weight:600;color:#495057}.card-body{padding:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-card', standalone: true, imports: [CommonModule], template: `
+    <div class="fmode-card">
+      <div class="card-header" *ngIf="title">
+        <h2 class="card-title">{{ title }}</h2>
+      </div>
+      <div class="card-body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, styles: [".fmode-card{background:#fff;border-radius:12px;box-shadow:0 4px 16px #00000014;overflow:hidden;transition:transform .3s,box-shadow .3s}.fmode-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001f}.card-header{background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:1rem 1.5rem;border-bottom:2px solid #dee2e6}.card-title{margin:0;font-size:1.1rem;font-weight:600;color:#495057}.card-body{padding:1.5rem}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }] } });
+
+class FmodeTextareaComponent {
+    value = '';
+    valueChange = new EventEmitter();
+    placeholder = '';
+    label = '';
+    rows = 4;
+    disabled = false;
+    maxLength = 10000;
+    showCharCount = true;
+    onInputChange(event) {
+        const newValue = event.target.value;
+        console.log('Textarea onInputChange - newValue:', newValue);
+        this.valueChange.emit(newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeTextareaComponent, isStandalone: true, selector: "fmode-textarea", inputs: { value: "value", placeholder: "placeholder", label: "label", rows: "rows", disabled: "disabled", maxLength: "maxLength", showCharCount: "showCharCount" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <div class="fmode-textarea-wrapper">
+      <label *ngIf="label" class="textarea-label">{{ label }}</label>
+      <textarea
+        [value]="value"
+        (input)="onInputChange($event)"
+        [placeholder]="placeholder"
+        [rows]="rows"
+        [disabled]="disabled"
+        [maxLength]="maxLength"
+        class="fmode-textarea"
+      ></textarea>
+      <div class="textarea-footer" *ngIf="showCharCount">
+        <span class="char-count">{{ value?.length || 0 }}/{{ maxLength }}</span>
+      </div>
+    </div>
+  `, isInline: true, styles: [".fmode-textarea-wrapper{display:flex;flex-direction:column;gap:.5rem}.textarea-label{font-weight:600;color:#495057;font-size:.9rem}.fmode-textarea{width:100%;padding:1rem;border:2px solid #dee2e6;border-radius:8px;font-size:1rem;font-family:inherit;line-height:1.6;resize:vertical;transition:border-color .3s,box-shadow .3s;box-sizing:border-box}.fmode-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.fmode-textarea:disabled{background:#f8f9fa;cursor:not-allowed;opacity:.7}.textarea-footer{display:flex;justify-content:flex-end;align-items:center}.char-count{font-size:.85rem;color:#6c757d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-textarea', standalone: true, imports: [CommonModule, FormsModule], template: `
+    <div class="fmode-textarea-wrapper">
+      <label *ngIf="label" class="textarea-label">{{ label }}</label>
+      <textarea
+        [value]="value"
+        (input)="onInputChange($event)"
+        [placeholder]="placeholder"
+        [rows]="rows"
+        [disabled]="disabled"
+        [maxLength]="maxLength"
+        class="fmode-textarea"
+      ></textarea>
+      <div class="textarea-footer" *ngIf="showCharCount">
+        <span class="char-count">{{ value?.length || 0 }}/{{ maxLength }}</span>
+      </div>
+    </div>
+  `, styles: [".fmode-textarea-wrapper{display:flex;flex-direction:column;gap:.5rem}.textarea-label{font-weight:600;color:#495057;font-size:.9rem}.fmode-textarea{width:100%;padding:1rem;border:2px solid #dee2e6;border-radius:8px;font-size:1rem;font-family:inherit;line-height:1.6;resize:vertical;transition:border-color .3s,box-shadow .3s;box-sizing:border-box}.fmode-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.fmode-textarea:disabled{background:#f8f9fa;cursor:not-allowed;opacity:.7}.textarea-footer{display:flex;justify-content:flex-end;align-items:center}.char-count{font-size:.85rem;color:#6c757d}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], placeholder: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], showCharCount: [{
+                type: Input
+            }] } });
+
+class FmodeSelectComponent {
+    value = '';
+    valueChange = new EventEmitter();
+    label = '';
+    disabled = false;
+    options = [];
+    onSelectChange(event) {
+        const newValue = event.target.value;
+        this.valueChange.emit(newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeSelectComponent, isStandalone: true, selector: "fmode-select", inputs: { value: "value", label: "label", disabled: "disabled", options: "options" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <div class="fmode-select-wrapper">
+      <label *ngIf="label" class="select-label">{{ label }}</label>
+      <select
+        [value]="value"
+        (change)="onSelectChange($event)"
+        [disabled]="disabled"
+        class="fmode-select"
+      >
+        <option *ngFor="let option of options" [value]="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+  `, isInline: true, styles: [".fmode-select-wrapper{display:flex;flex-direction:column;gap:.5rem}.select-label{font-weight:600;color:#495057;font-size:.9rem}.fmode-select{width:100%;padding:.75rem 1rem;border:2px solid #dee2e6;border-radius:8px;font-size:1rem;font-family:inherit;background:#fff;cursor:pointer;transition:border-color .3s,box-shadow .3s;box-sizing:border-box}.fmode-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.fmode-select:disabled{background:#f8f9fa;cursor:not-allowed;opacity:.7}.fmode-select option{padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-select', standalone: true, imports: [CommonModule, FormsModule], template: `
+    <div class="fmode-select-wrapper">
+      <label *ngIf="label" class="select-label">{{ label }}</label>
+      <select
+        [value]="value"
+        (change)="onSelectChange($event)"
+        [disabled]="disabled"
+        class="fmode-select"
+      >
+        <option *ngFor="let option of options" [value]="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+  `, styles: [".fmode-select-wrapper{display:flex;flex-direction:column;gap:.5rem}.select-label{font-weight:600;color:#495057;font-size:.9rem}.fmode-select{width:100%;padding:.75rem 1rem;border:2px solid #dee2e6;border-radius:8px;font-size:1rem;font-family:inherit;background:#fff;cursor:pointer;transition:border-color .3s,box-shadow .3s;box-sizing:border-box}.fmode-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.fmode-select:disabled{background:#f8f9fa;cursor:not-allowed;opacity:.7}.fmode-select option{padding:.5rem}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class FmodeButtonComponent {
+    disabled = false;
+    type = 'primary';
+    size = 'medium';
+    onClick = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeButtonComponent, isStandalone: true, selector: "fmode-button", inputs: { disabled: "disabled", type: "type", size: "size" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <button
+      [disabled]="disabled"
+      [class.primary]="type === 'primary'"
+      [class.secondary]="type === 'secondary'"
+      [class.success]="type === 'success'"
+      [class.danger]="type === 'danger'"
+      [class.small]="size === 'small'"
+      [class.large]="size === 'large'"
+      (click)="onClick.emit()"
+      class="fmode-button"
+    >
+      <ng-content></ng-content>
+    </button>
+  `, isInline: true, styles: [".fmode-button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;font-family:inherit;box-sizing:border-box}.fmode-button:disabled{opacity:.5;cursor:not-allowed}.fmode-button.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.fmode-button.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.fmode-button.secondary{background:#6c757d;color:#fff}.fmode-button.secondary:hover:not(:disabled){background:#5a6268;transform:translateY(-2px);box-shadow:0 4px 12px #6c757d66}.fmode-button.success{background:#28a745;color:#fff}.fmode-button.success:hover:not(:disabled){background:#218838;transform:translateY(-2px);box-shadow:0 4px 12px #28a74566}.fmode-button.danger{background:#dc3545;color:#fff}.fmode-button.danger:hover:not(:disabled){background:#c82333;transform:translateY(-2px);box-shadow:0 4px 12px #dc354566}.fmode-button.small{padding:.5rem 1rem;font-size:.875rem}.fmode-button.large{padding:1rem 2rem;font-size:1.125rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-button', standalone: true, imports: [CommonModule], template: `
+    <button
+      [disabled]="disabled"
+      [class.primary]="type === 'primary'"
+      [class.secondary]="type === 'secondary'"
+      [class.success]="type === 'success'"
+      [class.danger]="type === 'danger'"
+      [class.small]="size === 'small'"
+      [class.large]="size === 'large'"
+      (click)="onClick.emit()"
+      class="fmode-button"
+    >
+      <ng-content></ng-content>
+    </button>
+  `, styles: [".fmode-button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;font-family:inherit;box-sizing:border-box}.fmode-button:disabled{opacity:.5;cursor:not-allowed}.fmode-button.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.fmode-button.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.fmode-button.secondary{background:#6c757d;color:#fff}.fmode-button.secondary:hover:not(:disabled){background:#5a6268;transform:translateY(-2px);box-shadow:0 4px 12px #6c757d66}.fmode-button.success{background:#28a745;color:#fff}.fmode-button.success:hover:not(:disabled){background:#218838;transform:translateY(-2px);box-shadow:0 4px 12px #28a74566}.fmode-button.danger{background:#dc3545;color:#fff}.fmode-button.danger:hover:not(:disabled){background:#c82333;transform:translateY(-2px);box-shadow:0 4px 12px #dc354566}.fmode-button.small{padding:.5rem 1rem;font-size:.875rem}.fmode-button.large{padding:1rem 2rem;font-size:1.125rem}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class FmodeLoadingComponent {
+    loadingText = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeLoadingComponent, isStandalone: true, selector: "fmode-loading", inputs: { loadingText: "loadingText" }, ngImport: i0, template: `
+    <div class="fmode-loading">
+      <div class="loading-spinner"></div>
+      <div class="loading-text">{{ loadingText || '加载中...' }}</div>
+    </div>
+  `, isInline: true, styles: [".fmode-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.loading-spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.loading-text{color:#667eea;font-weight:600;font-size:1.1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeLoadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-loading', standalone: true, imports: [CommonModule], template: `
+    <div class="fmode-loading">
+      <div class="loading-spinner"></div>
+      <div class="loading-text">{{ loadingText || '加载中...' }}</div>
+    </div>
+  `, styles: [".fmode-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.loading-spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.loading-text{color:#667eea;font-weight:600;font-size:1.1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { loadingText: [{
+                type: Input
+            }] } });
+
+class FmodeListComponent {
+    items = [];
+    itemClick = new EventEmitter();
+    onItemClick(item) {
+        this.itemClick.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeListComponent, isStandalone: true, selector: "fmode-list", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
+    <div class="fmode-list">
+      <div 
+        *ngFor="let item of items"
+        (click)="onItemClick(item)"
+        class="list-item"
+      >
+        <div class="item-content">{{ item }}</div>
+      </div>
+      
+      <div *ngIf="items.length === 0" class="empty-state">
+        <span>暂无数据</span>
+      </div>
+    </div>
+  `, isInline: true, styles: [".fmode-list{background:#fff;border-radius:8px;overflow:hidden}.list-item{padding:1rem;border-bottom:1px solid #e9ecef;cursor:pointer;transition:background .3s}.list-item:hover{background:#f8f9fa}.list-item:last-child{border-bottom:none}.item-content{color:#495057;line-height:1.6}.empty-state{padding:2rem;text-align:center;color:#6c757d;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-list', standalone: true, imports: [CommonModule], template: `
+    <div class="fmode-list">
+      <div 
+        *ngFor="let item of items"
+        (click)="onItemClick(item)"
+        class="list-item"
+      >
+        <div class="item-content">{{ item }}</div>
+      </div>
+      
+      <div *ngIf="items.length === 0" class="empty-state">
+        <span>暂无数据</span>
+      </div>
+    </div>
+  `, styles: [".fmode-list{background:#fff;border-radius:8px;overflow:hidden}.list-item{padding:1rem;border-bottom:1px solid #e9ecef;cursor:pointer;transition:background .3s}.list-item:hover{background:#f8f9fa}.list-item:last-child{border-bottom:none}.item-content{color:#495057;line-height:1.6}.empty-state{padding:2rem;text-align:center;color:#6c757d;font-style:italic}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }] } });
+
+class FmodeAvatarComponent {
+    name = '';
+    imageUrl = '';
+    size = 'medium';
+    backgroundColor = '#667eea';
+    textColor = '#ffffff';
+    alt = 'Avatar';
+    rounded = false;
+    clickable = false;
+    onClick = new EventEmitter();
+    get initials() {
+        if (!this.name)
+            return '';
+        const words = this.name.trim().split(/\s+/);
+        if (words.length >= 2) {
+            return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+        }
+        return this.name.substring(0, 2).toUpperCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeAvatarComponent, isStandalone: true, selector: "fmode-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size", backgroundColor: "backgroundColor", textColor: "textColor", alt: "alt", rounded: "rounded", clickable: "clickable" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <div 
+      class="fmode-avatar"
+      [class.small]="size === 'small'"
+      [class.medium]="size === 'medium'"
+      [class.large]="size === 'large'"
+      [class.xlarge]="size === 'xlarge'"
+      [class.rounded]="rounded"
+      [class.clickable]="clickable"
+      [style.background-image]="imageUrl ? 'url(' + imageUrl + ')' : ''"
+      [style.background-color]="!imageUrl ? backgroundColor : ''"
+      [style.color]="textColor"
+      (click)="onClick.emit()"
+    >
+      <span *ngIf="!imageUrl" class="avatar-text">{{ initials }}</span>
+      <img *ngIf="imageUrl" [src]="imageUrl" [alt]="alt" class="avatar-image">
+    </div>
+  `, isInline: true, styles: [".fmode-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;font-weight:600;font-size:1.2rem;cursor:default;transition:transform .3s,box-shadow .3s;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 2px 8px #0000001a}.fmode-avatar.small{width:32px;height:32px;font-size:.8rem}.fmode-avatar.medium{width:48px;height:48px;font-size:1rem}.fmode-avatar.large{width:64px;height:64px;font-size:1.2rem}.fmode-avatar.xlarge{width:96px;height:96px;font-size:1.5rem}.fmode-avatar.rounded{border-radius:12px}.fmode-avatar.clickable{cursor:pointer}.fmode-avatar.clickable:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}.avatar-text{text-transform:uppercase;letter-spacing:.5px}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-avatar', standalone: true, imports: [CommonModule], template: `
+    <div 
+      class="fmode-avatar"
+      [class.small]="size === 'small'"
+      [class.medium]="size === 'medium'"
+      [class.large]="size === 'large'"
+      [class.xlarge]="size === 'xlarge'"
+      [class.rounded]="rounded"
+      [class.clickable]="clickable"
+      [style.background-image]="imageUrl ? 'url(' + imageUrl + ')' : ''"
+      [style.background-color]="!imageUrl ? backgroundColor : ''"
+      [style.color]="textColor"
+      (click)="onClick.emit()"
+    >
+      <span *ngIf="!imageUrl" class="avatar-text">{{ initials }}</span>
+      <img *ngIf="imageUrl" [src]="imageUrl" [alt]="alt" class="avatar-image">
+    </div>
+  `, styles: [".fmode-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;font-weight:600;font-size:1.2rem;cursor:default;transition:transform .3s,box-shadow .3s;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 2px 8px #0000001a}.fmode-avatar.small{width:32px;height:32px;font-size:.8rem}.fmode-avatar.medium{width:48px;height:48px;font-size:1rem}.fmode-avatar.large{width:64px;height:64px;font-size:1.2rem}.fmode-avatar.xlarge{width:96px;height:96px;font-size:1.5rem}.fmode-avatar.rounded{border-radius:12px}.fmode-avatar.clickable{cursor:pointer}.fmode-avatar.clickable:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}.avatar-text{text-transform:uppercase;letter-spacing:.5px}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], clickable: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class FmodeBadgeComponent {
+    type = 'primary';
+    pill = false;
+    outline = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeBadgeComponent, isStandalone: true, selector: "fmode-badge", inputs: { type: "type", pill: "pill", outline: "outline" }, ngImport: i0, template: `
+    <span
+      class="fmode-badge"
+      [class.primary]="type === 'primary'"
+      [class.secondary]="type === 'secondary'"
+      [class.success]="type === 'success'"
+      [class.warning]="type === 'warning'"
+      [class.danger]="type === 'danger'"
+      [class.info]="type === 'info'"
+      [class.pill]="pill"
+      [class.outline]="outline"
+    >
+      <ng-content></ng-content>
+    </span>
+  `, isInline: true, styles: [".fmode-badge{display:inline-block;padding:.25rem .75rem;font-size:.875rem;font-weight:600;border-radius:4px;letter-spacing:.5px;transition:all .3s}.fmode-badge.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.fmode-badge.secondary{background:#6c757d;color:#fff}.fmode-badge.success{background:#28a745;color:#fff}.fmode-badge.warning{background:#ffc107;color:#212529}.fmode-badge.danger{background:#dc3545;color:#fff}.fmode-badge.info{background:#17a2b8;color:#fff}.fmode-badge.outline{background:transparent;border:2px solid currentColor}.fmode-badge.outline.primary{color:#667eea;border-color:#667eea}.fmode-badge.outline.secondary{color:#6c757d;border-color:#6c757d}.fmode-badge.outline.success{color:#28a745;border-color:#28a745}.fmode-badge.outline.warning{color:#ffc107;border-color:#ffc107}.fmode-badge.outline.danger{color:#dc3545;border-color:#dc3545}.fmode-badge.outline.info{color:#17a2b8;border-color:#17a2b8}.fmode-badge.pill{border-radius:50px;padding:.375rem 1rem}.fmode-badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-badge', standalone: true, imports: [CommonModule], template: `
+    <span
+      class="fmode-badge"
+      [class.primary]="type === 'primary'"
+      [class.secondary]="type === 'secondary'"
+      [class.success]="type === 'success'"
+      [class.warning]="type === 'warning'"
+      [class.danger]="type === 'danger'"
+      [class.info]="type === 'info'"
+      [class.pill]="pill"
+      [class.outline]="outline"
+    >
+      <ng-content></ng-content>
+    </span>
+  `, styles: [".fmode-badge{display:inline-block;padding:.25rem .75rem;font-size:.875rem;font-weight:600;border-radius:4px;letter-spacing:.5px;transition:all .3s}.fmode-badge.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.fmode-badge.secondary{background:#6c757d;color:#fff}.fmode-badge.success{background:#28a745;color:#fff}.fmode-badge.warning{background:#ffc107;color:#212529}.fmode-badge.danger{background:#dc3545;color:#fff}.fmode-badge.info{background:#17a2b8;color:#fff}.fmode-badge.outline{background:transparent;border:2px solid currentColor}.fmode-badge.outline.primary{color:#667eea;border-color:#667eea}.fmode-badge.outline.secondary{color:#6c757d;border-color:#6c757d}.fmode-badge.outline.success{color:#28a745;border-color:#28a745}.fmode-badge.outline.warning{color:#ffc107;border-color:#ffc107}.fmode-badge.outline.danger{color:#dc3545;border-color:#dc3545}.fmode-badge.outline.info{color:#17a2b8;border-color:#17a2b8}.fmode-badge.pill{border-radius:50px;padding:.375rem 1rem}.fmode-badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], pill: [{
+                type: Input
+            }], outline: [{
+                type: Input
+            }] } });
+
+class FmodeDividerComponent {
+    text = '';
+    vertical = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeDividerComponent, isStandalone: true, selector: "fmode-divider", inputs: { text: "text", vertical: "vertical" }, ngImport: i0, template: `
+    <div
+      class="fmode-divider"
+      [class.vertical]="vertical"
+      [class.with-text]="!!text"
+    >
+      <span *ngIf="text" class="divider-text">{{ text }}</span>
+    </div>
+  `, isInline: true, styles: [".fmode-divider{position:relative;display:flex;align-items:center;width:100%;height:1px;background:linear-gradient(90deg,transparent,#e9ecef,transparent);margin:1.5rem 0}.fmode-divider.vertical{width:1px;height:100%;background:linear-gradient(180deg,transparent,#e9ecef,transparent);margin:0 1.5rem}.fmode-divider.with-text:before,.fmode-divider.with-text:after{content:\"\";flex:1;height:1px;background:linear-gradient(90deg,transparent,#e9ecef,transparent)}.fmode-divider.vertical.with-text:before,.fmode-divider.vertical.with-text:after{width:1px;height:100%;background:linear-gradient(180deg,transparent,#e9ecef,transparent)}.divider-text{padding:0 1rem;color:#6c757d;font-size:.875rem;font-weight:500;white-space:nowrap;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-divider', standalone: true, imports: [CommonModule], template: `
+    <div
+      class="fmode-divider"
+      [class.vertical]="vertical"
+      [class.with-text]="!!text"
+    >
+      <span *ngIf="text" class="divider-text">{{ text }}</span>
+    </div>
+  `, styles: [".fmode-divider{position:relative;display:flex;align-items:center;width:100%;height:1px;background:linear-gradient(90deg,transparent,#e9ecef,transparent);margin:1.5rem 0}.fmode-divider.vertical{width:1px;height:100%;background:linear-gradient(180deg,transparent,#e9ecef,transparent);margin:0 1.5rem}.fmode-divider.with-text:before,.fmode-divider.with-text:after{content:\"\";flex:1;height:1px;background:linear-gradient(90deg,transparent,#e9ecef,transparent)}.fmode-divider.vertical.with-text:before,.fmode-divider.vertical.with-text:after{width:1px;height:100%;background:linear-gradient(180deg,transparent,#e9ecef,transparent)}.divider-text{padding:0 1rem;color:#6c757d;font-size:.875rem;font-weight:500;white-space:nowrap;background:transparent}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }] } });
+
+class FmodeTagComponent {
+    color = 'primary';
+    closable = false;
+    onClose = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeTagComponent, isStandalone: true, selector: "fmode-tag", inputs: { color: "color", closable: "closable" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    <span
+      class="fmode-tag"
+      [class.closable]="closable"
+      [class.primary]="color === 'primary'"
+      [class.secondary]="color === 'secondary'"
+      [class.success]="color === 'success'"
+      [class.warning]="color === 'warning'"
+      [class.danger]="color === 'danger'"
+      [class.info]="color === 'info'"
+    >
+      <span class="tag-content">
+        <ng-content></ng-content>
+      </span>
+      <span *ngIf="closable" class="tag-close" (click)="onClose.emit()">×</span>
+    </span>
+  `, isInline: true, styles: [".fmode-tag{display:inline-flex;align-items:center;padding:.375rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;transition:all .3s;gap:.5rem}.fmode-tag.primary{background:linear-gradient(135deg,#667eea1a,#764ba21a);color:#667eea;border:1px solid rgba(102,126,234,.2)}.fmode-tag.secondary{background:#6c757d1a;color:#6c757d;border:1px solid rgba(108,117,125,.2)}.fmode-tag.success{background:#28a7451a;color:#28a745;border:1px solid rgba(40,167,69,.2)}.fmode-tag.warning{background:#ffc1071a;color:#ffc107;border:1px solid rgba(255,193,7,.2)}.fmode-tag.danger{background:#dc35451a;color:#dc3545;border:1px solid rgba(220,53,69,.2)}.fmode-tag.info{background:#17a2b81a;color:#17a2b8;border:1px solid rgba(23,162,184,.2)}.fmode-tag:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.fmode-tag.closable{padding-right:.5rem}.tag-content{display:inline-block}.tag-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;cursor:pointer;transition:all .3s;font-size:1.2rem;line-height:1}.tag-close:hover{background:#0000001a;transform:scale(1.1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeTagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-tag', standalone: true, imports: [CommonModule], template: `
+    <span
+      class="fmode-tag"
+      [class.closable]="closable"
+      [class.primary]="color === 'primary'"
+      [class.secondary]="color === 'secondary'"
+      [class.success]="color === 'success'"
+      [class.warning]="color === 'warning'"
+      [class.danger]="color === 'danger'"
+      [class.info]="color === 'info'"
+    >
+      <span class="tag-content">
+        <ng-content></ng-content>
+      </span>
+      <span *ngIf="closable" class="tag-close" (click)="onClose.emit()">×</span>
+    </span>
+  `, styles: [".fmode-tag{display:inline-flex;align-items:center;padding:.375rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;transition:all .3s;gap:.5rem}.fmode-tag.primary{background:linear-gradient(135deg,#667eea1a,#764ba21a);color:#667eea;border:1px solid rgba(102,126,234,.2)}.fmode-tag.secondary{background:#6c757d1a;color:#6c757d;border:1px solid rgba(108,117,125,.2)}.fmode-tag.success{background:#28a7451a;color:#28a745;border:1px solid rgba(40,167,69,.2)}.fmode-tag.warning{background:#ffc1071a;color:#ffc107;border:1px solid rgba(255,193,7,.2)}.fmode-tag.danger{background:#dc35451a;color:#dc3545;border:1px solid rgba(220,53,69,.2)}.fmode-tag.info{background:#17a2b81a;color:#17a2b8;border:1px solid rgba(23,162,184,.2)}.fmode-tag:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.fmode-tag.closable{padding-right:.5rem}.tag-content{display:inline-block}.tag-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;cursor:pointer;transition:all .3s;font-size:1.2rem;line-height:1}.tag-close:hover{background:#0000001a;transform:scale(1.1)}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }] } });
+
+class FmodeDigitalHumanComponent {
+    size = 'medium';
+    state = 'waiting';
+    speechText = '正在处理...';
+    ngOnInit() {
+        // 初始化状态
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeDigitalHumanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FmodeDigitalHumanComponent, isStandalone: true, selector: "fmode-digital-human", inputs: { size: "size", state: "state", speechText: "speechText" }, ngImport: i0, template: `
+    <div 
+      class="fmode-digital-human"
+      [class.small]="size === 'small'"
+      [class.medium]="size === 'medium'"
+      [class.large]="size === 'large'"
+      [class.xlarge]="size === 'xlarge'"
+    >
+      <div class="digital-human-container">
+        <div class="digital-human-avatar">
+          <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=friendly%20digital%20assistant%20avatar%20with%20glasses%20and%20professional%20appearance&image_size=square_hd" 
+               alt="Digital Assistant" class="avatar-image">
+        </div>
+        
+        <div class="digital-human-animations">
+          <div *ngIf="state === 'waiting'" class="animation waiting">
+            <div class="pulse"></div>
+            <div class="pulse"></div>
+            <div class="pulse"></div>
+          </div>
+          
+          <div *ngIf="state === 'listening'" class="animation listening">
+            <div class="wave">
+              <span></span>
+              <span></span>
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+          </div>
+          
+          <div *ngIf="state === 'thinking'" class="animation thinking">
+            <div class="brain">
+              <div class="neuron"></div>
+              <div class="neuron"></div>
+              <div class="neuron"></div>
+            </div>
+          </div>
+          
+          <div *ngIf="state === 'speaking'" class="animation speaking">
+            <div class="speech-bubble">
+              <span>{{ speechText }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".fmode-digital-human{display:flex;flex-direction:column;align-items:center;gap:1rem}.digital-human-container{position:relative;display:flex;flex-direction:column;align-items:center}.digital-human-avatar{border-radius:50%;overflow:hidden;box-shadow:0 4px 16px #667eea4d;background:linear-gradient(135deg,#667eea,#764ba2);transition:all .3s}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.fmode-digital-human.small .digital-human-avatar{width:64px;height:64px}.fmode-digital-human.medium .digital-human-avatar{width:96px;height:96px}.fmode-digital-human.large .digital-human-avatar{width:128px;height:128px}.fmode-digital-human.xlarge .digital-human-avatar{width:160px;height:160px}.digital-human-animations{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:.5rem;width:100%;display:flex;justify-content:center}.animation{display:flex;align-items:center;justify-content:center}.waiting .pulse{width:8px;height:8px;background:#667eea;border-radius:50%;margin:0 3px;animation:pulse 1.5s infinite ease-in-out}.waiting .pulse:nth-child(2){animation-delay:.2s}.waiting .pulse:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,to{transform:scale(.8);opacity:.5}50%{transform:scale(1.2);opacity:1}}.listening .wave{display:flex;align-items:center;gap:4px}.listening .wave span{width:4px;background:#667eea;border-radius:2px;animation:wave 1.5s infinite ease-in-out}.listening .wave span:nth-child(1){height:8px;animation-delay:0s}.listening .wave span:nth-child(2){height:12px;animation-delay:.1s}.listening .wave span:nth-child(3){height:16px;animation-delay:.2s}.listening .wave span:nth-child(4){height:12px;animation-delay:.3s}.listening .wave span:nth-child(5){height:8px;animation-delay:.4s}@keyframes wave{0%,to{transform:scaleY(.5);opacity:.5}50%{transform:scaleY(1);opacity:1}}.thinking .brain{position:relative;width:40px;height:30px}.thinking .neuron{position:absolute;width:6px;height:6px;background:#667eea;border-radius:50%;animation:neuron 2s infinite ease-in-out}.thinking .neuron:nth-child(1){top:0;left:17px;animation-delay:0s}.thinking .neuron:nth-child(2){top:12px;left:4px;animation-delay:.3s}.thinking .neuron:nth-child(3){top:12px;right:4px;animation-delay:.6s}@keyframes neuron{0%,to{transform:scale(.5);opacity:0}50%{transform:scale(1);opacity:1}}.speaking .speech-bubble{background:#fff;padding:.5rem 1rem;border-radius:16px;box-shadow:0 2px 8px #0000001a;max-width:200px;text-align:center;animation:speech 1s infinite ease-in-out}.speaking .speech-bubble:after{content:\"\";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.speaking .speech-bubble span{font-size:.875rem;color:#495057;font-weight:500}@keyframes speech{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FmodeDigitalHumanComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fmode-digital-human', standalone: true, imports: [CommonModule], template: `
+    <div 
+      class="fmode-digital-human"
+      [class.small]="size === 'small'"
+      [class.medium]="size === 'medium'"
+      [class.large]="size === 'large'"
+      [class.xlarge]="size === 'xlarge'"
+    >
+      <div class="digital-human-container">
+        <div class="digital-human-avatar">
+          <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=friendly%20digital%20assistant%20avatar%20with%20glasses%20and%20professional%20appearance&image_size=square_hd" 
+               alt="Digital Assistant" class="avatar-image">
+        </div>
+        
+        <div class="digital-human-animations">
+          <div *ngIf="state === 'waiting'" class="animation waiting">
+            <div class="pulse"></div>
+            <div class="pulse"></div>
+            <div class="pulse"></div>
+          </div>
+          
+          <div *ngIf="state === 'listening'" class="animation listening">
+            <div class="wave">
+              <span></span>
+              <span></span>
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+          </div>
+          
+          <div *ngIf="state === 'thinking'" class="animation thinking">
+            <div class="brain">
+              <div class="neuron"></div>
+              <div class="neuron"></div>
+              <div class="neuron"></div>
+            </div>
+          </div>
+          
+          <div *ngIf="state === 'speaking'" class="animation speaking">
+            <div class="speech-bubble">
+              <span>{{ speechText }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, styles: [".fmode-digital-human{display:flex;flex-direction:column;align-items:center;gap:1rem}.digital-human-container{position:relative;display:flex;flex-direction:column;align-items:center}.digital-human-avatar{border-radius:50%;overflow:hidden;box-shadow:0 4px 16px #667eea4d;background:linear-gradient(135deg,#667eea,#764ba2);transition:all .3s}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.fmode-digital-human.small .digital-human-avatar{width:64px;height:64px}.fmode-digital-human.medium .digital-human-avatar{width:96px;height:96px}.fmode-digital-human.large .digital-human-avatar{width:128px;height:128px}.fmode-digital-human.xlarge .digital-human-avatar{width:160px;height:160px}.digital-human-animations{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:.5rem;width:100%;display:flex;justify-content:center}.animation{display:flex;align-items:center;justify-content:center}.waiting .pulse{width:8px;height:8px;background:#667eea;border-radius:50%;margin:0 3px;animation:pulse 1.5s infinite ease-in-out}.waiting .pulse:nth-child(2){animation-delay:.2s}.waiting .pulse:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,to{transform:scale(.8);opacity:.5}50%{transform:scale(1.2);opacity:1}}.listening .wave{display:flex;align-items:center;gap:4px}.listening .wave span{width:4px;background:#667eea;border-radius:2px;animation:wave 1.5s infinite ease-in-out}.listening .wave span:nth-child(1){height:8px;animation-delay:0s}.listening .wave span:nth-child(2){height:12px;animation-delay:.1s}.listening .wave span:nth-child(3){height:16px;animation-delay:.2s}.listening .wave span:nth-child(4){height:12px;animation-delay:.3s}.listening .wave span:nth-child(5){height:8px;animation-delay:.4s}@keyframes wave{0%,to{transform:scaleY(.5);opacity:.5}50%{transform:scaleY(1);opacity:1}}.thinking .brain{position:relative;width:40px;height:30px}.thinking .neuron{position:absolute;width:6px;height:6px;background:#667eea;border-radius:50%;animation:neuron 2s infinite ease-in-out}.thinking .neuron:nth-child(1){top:0;left:17px;animation-delay:0s}.thinking .neuron:nth-child(2){top:12px;left:4px;animation-delay:.3s}.thinking .neuron:nth-child(3){top:12px;right:4px;animation-delay:.6s}@keyframes neuron{0%,to{transform:scale(.5);opacity:0}50%{transform:scale(1);opacity:1}}.speaking .speech-bubble{background:#fff;padding:.5rem 1rem;border-radius:16px;box-shadow:0 2px 8px #0000001a;max-width:200px;text-align:center;animation:speech 1s infinite ease-in-out}.speaking .speech-bubble:after{content:\"\";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.speaking .speech-bubble span{font-size:.875rem;color:#495057;font-weight:500}@keyframes speech{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], speechText: [{
+                type: Input
+            }] } });
+
+class AppComponent {
+    inputText = '';
+    currentSummary = '';
+    isLoading = false;
+    summaryLength = 'short';
+    history = [];
+    digitalHumanState = 'waiting';
+    digitalHumanSpeech = '等待输入...';
+    lengthOptions = [
+        { value: 'short', label: '简短' },
+        { value: 'long', label: '详细' }
+    ];
+    testTexts = [
+        {
+            id: 1,
+            title: '人工智能简介',
+            content: '人工智能（Artificial Intelligence，简称AI）是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大，可以设想，未来人工智能带来的科技产品，将会是人类智慧的"容器"。人工智能可以对人的意识、思维的信息过程的模拟。人工智能不是人的智能，但能像人那样思考、也可能超过人的智能。'
+        },
+        {
+            id: 2,
+            title: '气候变化与环境保护',
+            content: '气候变化是指气候状态的变化，特别是平均天气模式的长期变化，这种变化可能是由自然内部过程或外部强迫引起的，也可能是由于人类活动改变了地球大气的组成。气候变化对人类社会和自然生态系统产生了深远的影响，包括海平面上升、极端天气事件增加、生物多样性减少等。为了应对气候变化，国际社会采取了一系列措施，如减少温室气体排放、发展可再生能源、提高能源效率等。环境保护是指人类为解决现实或潜在的环境问题，协调人类与环境的关系，保障经济社会的可持续发展而采取的各种行动的总称。'
+        },
+        {
+            id: 3,
+            title: '健康生活方式',
+            content: '健康的生活方式对于维持身体和心理健康至关重要。这包括均衡的饮食、定期的体育锻炼、充足的睡眠、减少压力以及避免有害习惯如吸烟和过度饮酒。均衡饮食意味着摄入各种营养素，包括蛋白质、碳水化合物、脂肪、维生素和矿物质。定期锻炼可以增强心肺功能、提高肌肉力量和灵活性，并有助于控制体重。充足的睡眠对于身体恢复和大脑功能至关重要。管理压力可以通过冥想、瑜伽、深呼吸或其他放松技巧来实现。避免吸烟和限制酒精摄入可以降低患心脏病、癌症和其他慢性疾病的风险。'
+        },
+        {
+            id: 4,
+            title: '科技创新与未来',
+            content: '科技创新是推动社会进步和经济发展的重要动力。近年来，人工智能、大数据、物联网、区块链、量子计算等新兴技术的快速发展，正在深刻改变着我们的生活和工作方式。人工智能正在各个领域得到广泛应用，从智能助手到自动驾驶汽车。大数据分析帮助企业做出更明智的决策。物联网连接了各种设备，使我们的生活更加便捷。区块链技术提供了安全、透明的交易方式。量子计算有望解决传统计算机难以处理的复杂问题。这些技术的发展将继续推动产业升级和社会变革，为未来创造更多可能性。'
+        },
+        {
+            id: 5,
+            title: '教育的重要性',
+            content: '教育是人类社会发展的基石，对于个人和社会都具有重要意义。教育不仅传授知识和技能，还培养人的思维能力、创造力和社会责任感。通过教育，个人可以获得更好的就业机会，提高生活质量。对于社会而言，教育可以促进经济发展、减少贫困、提高社会凝聚力。教育还可以培养公民的民主意识和参与能力，促进社会的公平与正义。在当今快速变化的世界中，终身学习变得越来越重要，人们需要不断更新知识和技能以适应社会的发展。因此，投资教育是对未来最好的投资。'
+        }
+    ];
+    onInputTextChange(value) {
+        console.log('onInputTextChange:', value);
+        this.inputText = value;
+    }
+    onSummaryLengthChange(value) {
+        console.log('onSummaryLengthChange:', value);
+        this.summaryLength = value;
+    }
+    loadTestText(index) {
+        console.log('Loading test text:', index);
+        const testText = this.testTexts[index];
+        if (testText) {
+            this.inputText = testText.content;
+            console.log('Test text loaded:', testText.title);
+        }
+    }
+    async summarizeText() {
+        console.log('=== summarizeText called ===');
+        console.log('inputText:', this.inputText);
+        console.log('inputText.trim():', this.inputText.trim());
+        console.log('isLoading:', this.isLoading);
+        if (!this.inputText.trim() || this.isLoading) {
+            console.log('Early return: empty text or already loading');
+            return;
+        }
+        const text = this.inputText.trim();
+        console.log('Text length:', text.length);
+        if (text.length < 50) {
+            alert('请输入至少50个字符的文本内容');
+            return;
+        }
+        if (text.length > 10000) {
+            alert('文本长度不能超过10000个字符');
+            return;
+        }
+        // 数字人状态：开始聆听
+        this.digitalHumanState = 'listening';
+        this.digitalHumanSpeech = '正在聆听...';
+        this.isLoading = true;
+        console.log('Starting summary generation...');
+        try {
+            // 模拟聆听过程
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            // 数字人状态：开始思考
+            this.digitalHumanState = 'thinking';
+            this.digitalHumanSpeech = '正在思考...';
+            const summary = await this.mockAISummary(text, this.summaryLength);
+            console.log('Summary generated:', summary);
+            // 数字人状态：开始说话
+            this.digitalHumanState = 'speaking';
+            this.digitalHumanSpeech = '总结完成！';
+            this.currentSummary = summary;
+            console.log('currentSummary set to:', this.currentSummary);
+            const historyItem = {
+                id: Date.now(),
+                originalText: text,
+                summaryText: summary,
+                timestamp: new Date()
+            };
+            this.history.unshift(historyItem);
+            if (this.history.length > 10) {
+                this.history = this.history.slice(0, 10);
+            }
+            // 3秒后恢复到等待状态
+            setTimeout(() => {
+                this.digitalHumanState = 'waiting';
+                this.digitalHumanSpeech = '等待输入...';
+            }, 3000);
+        }
+        catch (error) {
+            console.error('总结失败:', error);
+            alert('总结过程中出现错误，请重试');
+            // 错误时恢复到等待状态
+            this.digitalHumanState = 'waiting';
+            this.digitalHumanSpeech = '等待输入...';
+        }
+        finally {
+            this.isLoading = false;
+            console.log('Loading complete');
+        }
+    }
+    async mockAISummary(text, length) {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                const sentences = text.split(/[。！？.!?]/).filter((s) => s.trim());
+                let summary = '';
+                const ratio = length === 'short' ? 0.3 : length === 'medium' ? 0.5 : 0.7;
+                const targetCount = Math.max(1, Math.floor(sentences.length * ratio));
+                if (sentences.length <= 2) {
+                    summary = `【智能总结】\n${text}`;
+                }
+                else {
+                    const keyPoints = sentences.slice(0, Math.min(3, sentences.length));
+                    summary = `【智能总结】\n核心要点：\n`;
+                    keyPoints.forEach((point, index) => {
+                        summary += `${index + 1}. ${point.trim()}\n`;
+                    });
+                    const selectedSentences = sentences.slice(0, targetCount);
+                    const summaryText = selectedSentences.join('。');
+                    summary += `\n总结：${summaryText}。`;
+                }
+                resolve(summary);
+            }, 1500);
+        });
+    }
+    clearInput() {
+        this.inputText = '';
+        this.currentSummary = '';
+    }
+    clearHistory() {
+        if (confirm('确定要清空所有历史记录吗？')) {
+            this.history = [];
+        }
+    }
+    loadHistoryItem(item) {
+        this.inputText = item.originalText;
+        this.currentSummary = item.summaryText;
+    }
+    copySummary() {
+        if (this.currentSummary) {
+            navigator.clipboard.writeText(this.currentSummary).then(() => {
+                alert('已复制到剪贴板');
+            }).catch(() => {
+                alert('复制失败，请手动复制');
+            });
+        }
+    }
+    formatTime(timestamp) {
+        const date = new Date(timestamp);
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(diff / 3600000);
+        const days = Math.floor(diff / 86400000);
+        if (minutes < 1)
+            return '刚刚';
+        if (minutes < 60)
+            return `${minutes}分钟前`;
+        if (hours < 24)
+            return `${hours}小时前`;
+        if (days < 7)
+            return `${days}天前`;
+        return date.toLocaleDateString('zh-CN');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AppComponent, isStandalone: true, selector: "app-root", ngImport: i0, template: `
+    <div class="app-container">
+      <fmode-header title="AI 文本智能总结助手" subtitle="基于 fmode-ng UI 组件库"></fmode-header>
+      
+      <div class="main-content">
+        <div class="left-panel">
+          <fmode-card title="文本输入" class="input-card">
+            <div class="input-header">
+              <fmode-avatar name="AI" size="large" backgroundColor="#667eea" textColor="#ffffff"></fmode-avatar>
+              <div class="input-info">
+                <h3>智能文本总结</h3>
+                <p>输入长文本，AI 自动生成精简总结</p>
+              </div>
+            </div>
+            
+            <div class="test-texts-section">
+              <h4>测试文本</h4>
+              <div class="test-texts-buttons">
+                <fmode-button *ngFor="let testText of testTexts; let i = index"
+                  (onClick)="loadTestText(i)"
+                  type="secondary"
+                  size="small"
+                >
+                  {{ testText.title }}
+                </fmode-button>
+              </div>
+            </div>
+            
+            <fmode-divider></fmode-divider>
+            
+            <fmode-textarea
+              [value]="inputText"
+              (valueChange)="onInputTextChange($event)"
+              placeholder="请输入需要总结的长文本内容..."
+              [rows]="12"
+              [disabled]="isLoading"
+              [showCharCount]="true"
+              [maxLength]="10000"
+            ></fmode-textarea>
+            
+            <div class="control-bar">
+              <fmode-select
+                [value]="summaryLength"
+                (valueChange)="onSummaryLengthChange($event)"
+                [options]="lengthOptions"
+                label="总结长度"
+                [disabled]="isLoading"
+              ></fmode-select>
+              
+              <div class="button-group">
+                <fmode-button
+                  (onClick)="summarizeText()"
+                  [disabled]="isLoading"
+                  type="primary"
+                >
+                  智能总结
+                </fmode-button>
+                <fmode-button
+                  (onClick)="clearInput()"
+                  [disabled]="isLoading"
+                  type="secondary"
+                >
+                  清空
+                </fmode-button>
+              </div>
+            </div>
+          </fmode-card>
+          
+          <fmode-card title="历史记录" class="history-card">
+            <div class="history-header">
+              <div class="history-info">
+                <fmode-avatar name="历史" size="small" backgroundColor="#6c757d" textColor="#ffffff"></fmode-avatar>
+                <span class="history-count">共 {{ history.length }} 条记录</span>
+              </div>
+              <fmode-button
+                (onClick)="clearHistory()"
+                [disabled]="history.length === 0"
+                type="danger"
+              >
+                清空历史
+              </fmode-button>
+            </div>
+            
+            <fmode-divider></fmode-divider>
+            
+            <div class="history-list">
+              <div 
+                *ngFor="let item of history"
+                (click)="loadHistoryItem(item)"
+                class="history-item"
+              >
+                <div class="history-item-header">
+                  <fmode-avatar [name]="formatTime(item.timestamp)" size="small" backgroundColor="#17a2b8" textColor="#ffffff"></fmode-avatar>
+                  <div class="history-meta">
+                    <div class="history-time">{{ formatTime(item.timestamp) }}</div>
+                    <fmode-tag type="info">{{ item.originalText.length }} 字符</fmode-tag>
+                  </div>
+                </div>
+                <div class="history-text">{{ item.originalText.substring(0, 100) }}...</div>
+              </div>
+              
+              <div *ngIf="history.length === 0" class="empty-history">
+                <fmode-avatar name="空" size="large" backgroundColor="#e9ecef" textColor="#6c757d"></fmode-avatar>
+                <p>暂无历史记录</p>
+              </div>
+            </div>
+          </fmode-card>
+        </div>
+        
+        <div class="right-panel">
+          <fmode-card title="总结结果" class="result-card">
+            <div class="result-header">
+              <fmode-digital-human 
+                size="large" 
+                [state]="digitalHumanState" 
+                [speechText]="digitalHumanSpeech"
+              ></fmode-digital-human>
+              <div class="result-badges">
+                <fmode-badge *ngIf="currentSummary" type="success" [pill]="true">已完成</fmode-badge>
+                <fmode-badge *ngIf="!currentSummary" type="secondary" [pill]="true">等待中</fmode-badge>
+              </div>
+            </div>
+            
+            <fmode-divider></fmode-divider>
+            
+            <div *ngIf="isLoading" class="loading-container">
+              <fmode-loading loadingText="正在智能总结中..."></fmode-loading>
+            </div>
+            
+            <div *ngIf="!isLoading && !currentSummary" class="empty-result">
+              <fmode-avatar name="空" size="xlarge" backgroundColor="#e9ecef" textColor="#6c757d"></fmode-avatar>
+              <p>输入文本并点击"智能总结"按钮</p>
+            </div>
+            
+            <div *ngIf="!isLoading && currentSummary" class="result-content">
+              <pre class="summary-text">{{ currentSummary }}</pre>
+              
+              <fmode-divider></fmode-divider>
+              
+              <div class="result-actions">
+                <div class="result-info">
+                  <fmode-tag type="success">{{ currentSummary.length }} 字符</fmode-tag>
+                  <fmode-tag type="primary">{{ summaryLength === 'short' ? '简短' : '详细' }}</fmode-tag>
+                </div>
+                <fmode-button
+                  (onClick)="copySummary()"
+                  type="success"
+                >
+                  复制结果
+                </fmode-button>
+              </div>
+            </div>
+          </fmode-card>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".app-container{min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#e4e8eb)}.main-content{max-width:1400px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}.left-panel{display:flex;flex-direction:column;gap:2rem}.input-card{flex:1}.input-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.input-info{flex:1}.input-info h3{margin:0 0 .25rem;color:#495057;font-size:1.25rem}.input-info p{margin:0;color:#6c757d;font-size:.875rem}.test-texts-section{margin:1rem 0}.test-texts-section h4{margin:0 0 .75rem;color:#495057;font-size:1rem}.test-texts-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}.input-badges{display:flex;gap:.5rem}.control-bar{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem}.button-group{display:flex;gap:1rem}.history-card{flex:1}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:2px solid #e9ecef}.history-info{display:flex;align-items:center;gap:.75rem}.history-count{font-weight:600;color:#495057}.history-list{max-height:300px;overflow-y:auto}.history-item{padding:1rem;border-bottom:1px solid #e9ecef;cursor:pointer;transition:background .3s;display:flex;flex-direction:column;gap:.75rem}.history-item-header{display:flex;align-items:center;gap:.75rem}.history-meta{flex:1;display:flex;flex-direction:column;gap:.25rem}.history-item:hover{background:#f8f9fa}.history-item:last-child{border-bottom:none}.history-time{font-size:.85rem;color:#6c757d}.history-text{color:#495057;line-height:1.5}.empty-history{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.right-panel{display:flex;flex-direction:column}.result-card{flex:1;display:flex;flex-direction:column}.result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.result-badges{display:flex;gap:.5rem}.loading-container{flex:1;display:flex;align-items:center;justify-content:center}.empty-result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#6c757d}.result-content{flex:1;display:flex;flex-direction:column}.summary-text{flex:1;background:#f8f9fa;padding:1.5rem;border-radius:8px;border:2px solid #e9ecef;font-family:Courier New,monospace;line-height:1.8;white-space:pre-wrap;word-wrap:break-word;overflow-y:auto;max-height:500px}.result-actions{margin-top:1rem;display:flex;justify-content:space-between;align-items:center}.result-info{display:flex;gap:.5rem}.empty-history{padding:2rem;text-align:center;color:#6c757d;font-style:italic;display:flex;flex-direction:column;align-items:center;gap:1rem}.empty-result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;color:#6c757d}.empty-icon{font-size:4rem;opacity:.5}@media (max-width: 1024px){.main-content{grid-template-columns:1fr;padding:1rem}.left-panel{order:1}.right-panel{order:2}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FmodeHeaderComponent, selector: "fmode-header", inputs: ["title", "subtitle"] }, { kind: "component", type: FmodeCardComponent, selector: "fmode-card", inputs: ["title"] }, { kind: "component", type: FmodeTextareaComponent, selector: "fmode-textarea", inputs: ["value", "placeholder", "label", "rows", "disabled", "maxLength", "showCharCount"], outputs: ["valueChange"] }, { kind: "component", type: FmodeSelectComponent, selector: "fmode-select", inputs: ["value", "label", "disabled", "options"], outputs: ["valueChange"] }, { kind: "component", type: FmodeButtonComponent, selector: "fmode-button", inputs: ["disabled", "type", "size"], outputs: ["onClick"] }, { kind: "component", type: FmodeLoadingComponent, selector: "fmode-loading", inputs: ["loadingText"] }, { kind: "component", type: FmodeAvatarComponent, selector: "fmode-avatar", inputs: ["name", "imageUrl", "size", "backgroundColor", "textColor", "alt", "rounded", "clickable"], outputs: ["onClick"] }, { kind: "component", type: FmodeBadgeComponent, selector: "fmode-badge", inputs: ["type", "pill", "outline"] }, { kind: "component", type: FmodeDividerComponent, selector: "fmode-divider", inputs: ["text", "vertical"] }, { kind: "component", type: FmodeTagComponent, selector: "fmode-tag", inputs: ["color", "closable"], outputs: ["onClose"] }, { kind: "component", type: FmodeDigitalHumanComponent, selector: "fmode-digital-human", inputs: ["size", "state", "speechText"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AppComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-root', standalone: true, imports: [
+                        CommonModule,
+                        FmodeHeaderComponent,
+                        FmodeCardComponent,
+                        FmodeTextareaComponent,
+                        FmodeSelectComponent,
+                        FmodeButtonComponent,
+                        FmodeLoadingComponent,
+                        FmodeListComponent,
+                        FmodeAvatarComponent,
+                        FmodeBadgeComponent,
+                        FmodeDividerComponent,
+                        FmodeTagComponent,
+                        FmodeDigitalHumanComponent
+                    ], template: `
+    <div class="app-container">
+      <fmode-header title="AI 文本智能总结助手" subtitle="基于 fmode-ng UI 组件库"></fmode-header>
+      
+      <div class="main-content">
+        <div class="left-panel">
+          <fmode-card title="文本输入" class="input-card">
+            <div class="input-header">
+              <fmode-avatar name="AI" size="large" backgroundColor="#667eea" textColor="#ffffff"></fmode-avatar>
+              <div class="input-info">
+                <h3>智能文本总结</h3>
+                <p>输入长文本，AI 自动生成精简总结</p>
+              </div>
+            </div>
+            
+            <div class="test-texts-section">
+              <h4>测试文本</h4>
+              <div class="test-texts-buttons">
+                <fmode-button *ngFor="let testText of testTexts; let i = index"
+                  (onClick)="loadTestText(i)"
+                  type="secondary"
+                  size="small"
+                >
+                  {{ testText.title }}
+                </fmode-button>
+              </div>
+            </div>
+            
+            <fmode-divider></fmode-divider>
+            
+            <fmode-textarea
+              [value]="inputText"
+              (valueChange)="onInputTextChange($event)"
+              placeholder="请输入需要总结的长文本内容..."
+              [rows]="12"
+              [disabled]="isLoading"
+              [showCharCount]="true"
+              [maxLength]="10000"
+            ></fmode-textarea>
+            
+            <div class="control-bar">
+              <fmode-select
+                [value]="summaryLength"
+                (valueChange)="onSummaryLengthChange($event)"
+                [options]="lengthOptions"
+                label="总结长度"
+                [disabled]="isLoading"
+              ></fmode-select>
+              
+              <div class="button-group">
+                <fmode-button
+                  (onClick)="summarizeText()"
+                  [disabled]="isLoading"
+                  type="primary"
+                >
+                  智能总结
+                </fmode-button>
+                <fmode-button
+                  (onClick)="clearInput()"
+                  [disabled]="isLoading"
+                  type="secondary"
+                >
+                  清空
+                </fmode-button>
+              </div>
+            </div>
+          </fmode-card>
+          
+          <fmode-card title="历史记录" class="history-card">
+            <div class="history-header">
+              <div class="history-info">
+                <fmode-avatar name="历史" size="small" backgroundColor="#6c757d" textColor="#ffffff"></fmode-avatar>
+                <span class="history-count">共 {{ history.length }} 条记录</span>
+              </div>
+              <fmode-button
+                (onClick)="clearHistory()"
+                [disabled]="history.length === 0"
+                type="danger"
+              >
+                清空历史
+              </fmode-button>
+            </div>
+            
+            <fmode-divider></fmode-divider>
+            
+            <div class="history-list">
+              <div 
+                *ngFor="let item of history"
+                (click)="loadHistoryItem(item)"
+                class="history-item"
+              >
+                <div class="history-item-header">
+                  <fmode-avatar [name]="formatTime(item.timestamp)" size="small" backgroundColor="#17a2b8" textColor="#ffffff"></fmode-avatar>
+                  <div class="history-meta">
+                    <div class="history-time">{{ formatTime(item.timestamp) }}</div>
+                    <fmode-tag type="info">{{ item.originalText.length }} 字符</fmode-tag>
+                  </div>
+                </div>
+                <div class="history-text">{{ item.originalText.substring(0, 100) }}...</div>
+              </div>
+              
+              <div *ngIf="history.length === 0" class="empty-history">
+                <fmode-avatar name="空" size="large" backgroundColor="#e9ecef" textColor="#6c757d"></fmode-avatar>
+                <p>暂无历史记录</p>
+              </div>
+            </div>
+          </fmode-card>
+        </div>
+        
+        <div class="right-panel">
+          <fmode-card title="总结结果" class="result-card">
+            <div class="result-header">
+              <fmode-digital-human 
+                size="large" 
+                [state]="digitalHumanState" 
+                [speechText]="digitalHumanSpeech"
+              ></fmode-digital-human>
+              <div class="result-badges">
+                <fmode-badge *ngIf="currentSummary" type="success" [pill]="true">已完成</fmode-badge>
+                <fmode-badge *ngIf="!currentSummary" type="secondary" [pill]="true">等待中</fmode-badge>
+              </div>
+            </div>
+            
+            <fmode-divider></fmode-divider>
+            
+            <div *ngIf="isLoading" class="loading-container">
+              <fmode-loading loadingText="正在智能总结中..."></fmode-loading>
+            </div>
+            
+            <div *ngIf="!isLoading && !currentSummary" class="empty-result">
+              <fmode-avatar name="空" size="xlarge" backgroundColor="#e9ecef" textColor="#6c757d"></fmode-avatar>
+              <p>输入文本并点击"智能总结"按钮</p>
+            </div>
+            
+            <div *ngIf="!isLoading && currentSummary" class="result-content">
+              <pre class="summary-text">{{ currentSummary }}</pre>
+              
+              <fmode-divider></fmode-divider>
+              
+              <div class="result-actions">
+                <div class="result-info">
+                  <fmode-tag type="success">{{ currentSummary.length }} 字符</fmode-tag>
+                  <fmode-tag type="primary">{{ summaryLength === 'short' ? '简短' : '详细' }}</fmode-tag>
+                </div>
+                <fmode-button
+                  (onClick)="copySummary()"
+                  type="success"
+                >
+                  复制结果
+                </fmode-button>
+              </div>
+            </div>
+          </fmode-card>
+        </div>
+      </div>
+    </div>
+  `, styles: [".app-container{min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#e4e8eb)}.main-content{max-width:1400px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}.left-panel{display:flex;flex-direction:column;gap:2rem}.input-card{flex:1}.input-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.input-info{flex:1}.input-info h3{margin:0 0 .25rem;color:#495057;font-size:1.25rem}.input-info p{margin:0;color:#6c757d;font-size:.875rem}.test-texts-section{margin:1rem 0}.test-texts-section h4{margin:0 0 .75rem;color:#495057;font-size:1rem}.test-texts-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}.input-badges{display:flex;gap:.5rem}.control-bar{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem}.button-group{display:flex;gap:1rem}.history-card{flex:1}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:2px solid #e9ecef}.history-info{display:flex;align-items:center;gap:.75rem}.history-count{font-weight:600;color:#495057}.history-list{max-height:300px;overflow-y:auto}.history-item{padding:1rem;border-bottom:1px solid #e9ecef;cursor:pointer;transition:background .3s;display:flex;flex-direction:column;gap:.75rem}.history-item-header{display:flex;align-items:center;gap:.75rem}.history-meta{flex:1;display:flex;flex-direction:column;gap:.25rem}.history-item:hover{background:#f8f9fa}.history-item:last-child{border-bottom:none}.history-time{font-size:.85rem;color:#6c757d}.history-text{color:#495057;line-height:1.5}.empty-history{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.right-panel{display:flex;flex-direction:column}.result-card{flex:1;display:flex;flex-direction:column}.result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.result-badges{display:flex;gap:.5rem}.loading-container{flex:1;display:flex;align-items:center;justify-content:center}.empty-result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#6c757d}.result-content{flex:1;display:flex;flex-direction:column}.summary-text{flex:1;background:#f8f9fa;padding:1.5rem;border-radius:8px;border:2px solid #e9ecef;font-family:Courier New,monospace;line-height:1.8;white-space:pre-wrap;word-wrap:break-word;overflow-y:auto;max-height:500px}.result-actions{margin-top:1rem;display:flex;justify-content:space-between;align-items:center}.result-info{display:flex;gap:.5rem}.empty-history{padding:2rem;text-align:center;color:#6c757d;font-style:italic;display:flex;flex-direction:column;align-items:center;gap:1rem}.empty-result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;color:#6c757d}.empty-icon{font-size:4rem;opacity:.5}@media (max-width: 1024px){.main-content{grid-template-columns:1fr;padding:1rem}.left-panel{order:1}.right-panel{order:2}}\n"] }]
+        }] });
+
+// 导出组件和模块
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppComponent, FmodeAvatarComponent, FmodeBadgeComponent, FmodeButtonComponent, FmodeCardComponent, FmodeDigitalHumanComponent, FmodeDividerComponent, FmodeHeaderComponent, FmodeListComponent, FmodeLoadingComponent, FmodeSelectComponent, FmodeTagComponent, FmodeTextareaComponent };
+//# sourceMappingURL=ai-text-summary-ng.mjs.map