55 lines
3.5 KiB
TypeScript
55 lines
3.5 KiB
TypeScript
import { Component, inject, OnInit, signal, output } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { HttpClient } from '@angular/common/http';
|
|
import { finalize } from 'rxjs';
|
|
|
|
interface Capabilities {
|
|
video_enabled: boolean;
|
|
outputter_enabled: boolean;
|
|
step_summarizer_enabled: boolean;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-capability-settings', standalone: true, imports: [FormsModule],
|
|
template: `
|
|
<section aria-label="功能开关">
|
|
<h3>功能开关</h3>
|
|
<p>按需启用，保存后对新任务生效。</p>
|
|
<label><input type="checkbox" role="switch" [(ngModel)]="config.video_enabled" [disabled]="busy() || loading() || !loaded()" />
|
|
<span>视频分析与录屏<small>录制设备画面，并允许智能体分析录像；关闭可减少资源占用。</small></span></label>
|
|
<label><input type="checkbox" role="switch" [(ngModel)]="config.outputter_enabled" [disabled]="busy() || loading() || !loaded()" />
|
|
<span>最终报告生成<small>根据执行记录生成任务结果报告。</small></span></label>
|
|
<label><input type="checkbox" role="switch" [(ngModel)]="config.step_summarizer_enabled" [disabled]="busy() || loading() || !loaded()" />
|
|
<span>步骤摘要压缩<small>Flash 模式下在后台生成摘要，减少长任务的上下文占用。</small></span></label>
|
|
<button type="button" (click)="save()" [disabled]="busy() || loading() || !loaded()">{{ busy() ? '正在保存…' : '保存功能设置' }}</button>
|
|
@if (message()) { <p role="status">{{ message() }}</p> }
|
|
@if (error()) { <p role="alert" class="error">{{ error() }}</p> }
|
|
</section>
|
|
`,
|
|
styles: [`section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #64748b55; }
|
|
h3 { margin: 0 0 8px; } p, small { color: #64748b; line-height: 1.6; }
|
|
label { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; cursor: pointer; }
|
|
input { width: 20px; height: 20px; accent-color: #0284c7; flex-shrink: 0; }
|
|
small { display: block; margin-top: 4px; } button { padding: 10px 18px; border-radius: 10px; border: 1px solid #38bdf877; background: #0284c7; color: white; font: inherit; cursor: pointer; }
|
|
button:disabled { opacity: .5; cursor: default; } .error { color: #be123c; }`]
|
|
})
|
|
export class CapabilitySettingsComponent implements OnInit {
|
|
changed = output<Capabilities>();
|
|
private http = inject(HttpClient);
|
|
config: Capabilities = { video_enabled: false, outputter_enabled: true, step_summarizer_enabled: true };
|
|
busy = signal(false); loading = signal(true); loaded = signal(false); message = signal(''); error = signal('');
|
|
ngOnInit(): void {
|
|
this.http.get<Capabilities>('/api/system/capability-settings').pipe(finalize(() => this.loading.set(false))).subscribe({
|
|
next: config => { this.config = config; this.loaded.set(true); this.changed.emit(config); }, error: () => this.error.set('功能配置加载失败，请刷新页面重试。')
|
|
});
|
|
}
|
|
save(): void {
|
|
if (this.busy() || this.loading() || !this.loaded()) return;
|
|
this.busy.set(true); this.message.set(''); this.error.set('');
|
|
this.http.post<Capabilities>('/api/system/capability-settings', this.config).pipe(finalize(() => this.busy.set(false))).subscribe({
|
|
next: config => { this.config = config; this.changed.emit(config); this.message.set('功能设置已保存，新任务将使用此配置。'); },
|
|
error: () => this.error.set('保存失败，请检查服务器连接和 .env 文件权限。')
|
|
});
|
|
}
|
|
}
|