fix: make Android tasks use extensions automatically and populate marketplace
This commit is contained in:
chenmingxuan committed
1 parent
6663233ab8
commit
9c82a40cbf
32 files changed
+341
-131
No files matched your search
@@ -0,0 +1,28 @@
|
||||
<button class="plugin-toggle" type="button" (click)="toggle()" [attr.aria-expanded]="open()">
|
||||
<span class="material-symbols-outlined" aria-hidden="true">extension</span>
|
||||
<span>扩展插件</span><span class="mode">{{ summary() }}</span>
|
||||
<span class="material-symbols-outlined chevron" aria-hidden="true">{{ open() ? 'expand_less' : 'expand_more' }}</span>
|
||||
</button>
|
||||
@if (open()) {
|
||||
<section class="plugin-options" aria-label="扩展插件设置">
|
||||
<p>照常描述安卓测试任务。需要操作电脑、浏览器等外部步骤时，AI 会按需调用已启用并授权的插件。</p>
|
||||
<label class="auto-option"><input type="checkbox" [(ngModel)]="automatic" (ngModelChange)="emit()">自动使用可用插件</label>
|
||||
@if (loading()) { <p role="status">正在读取插件…</p> }
|
||||
@else if (error()) { <p class="error" role="alert">{{ error() }} <button type="button" class="text-button" (click)="load()">重试</button></p> }
|
||||
@else if (!automatic) {
|
||||
@for (plugin of available(); track plugin.manifest.id) {
|
||||
<div class="choice">
|
||||
<label><input type="checkbox" [checked]="selected[plugin.manifest.id] !== undefined" (change)="choose(plugin, $event)">{{ plugin.manifest.name }}</label>
|
||||
<select [disabled]="selected[plugin.manifest.id] === undefined" [ngModel]="selected[plugin.manifest.id] || ''" (ngModelChange)="selected[plugin.manifest.id] = $event; emit()" [attr.aria-label]="plugin.manifest.name + '连接配置'">
|
||||
<option value="" disabled>选择连接配置</option>
|
||||
@for (profile of plugin.profiles; track profile.name) { @if (profile.authorized) { <option [value]="profile.name">{{ profile.label }}</option> } }
|
||||
</select>
|
||||
</div>
|
||||
} @empty { <p>还没有可用插件，请先安装、授权并启用。</p> }
|
||||
<p class="hint">不勾选任何插件时，本次任务只使用手机能力。</p>
|
||||
} @else {
|
||||
<p class="hint">{{ available().length ? '默认连接用于自动调用，也可以关闭自动选择，指定本次可用的插件。' : '还没有可用插件，手机测试不受影响。' }}</p>
|
||||
}
|
||||
<a routerLink="/plugins" class="manage-link">管理插件 <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span></a>
|
||||
</section>
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
:host { display: block; width: 100%; color: #475569; font-size: 12px; }
|
||||
.plugin-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; border-radius: 20px; padding: 5px 10px; background: #f8fafc; color: #64748b; font: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
|
||||
.plugin-toggle:hover, .plugin-toggle[aria-expanded=true] { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
|
||||
.material-symbols-outlined { font-size: 16px; }
|
||||
.mode { color: #2563eb; padding-left: 6px; border-left: 1px solid #dce5ef; }
|
||||
.chevron { font-size: 15px; }
|
||||
.plugin-options { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; margin-top: 8px; display: grid; gap: 12px; }
|
||||
p { margin: 0; line-height: 1.65; }
|
||||
label { display: flex; align-items: center; gap: 8px; }
|
||||
.auto-option { font-weight: 500; color: #334155; }
|
||||
input[type=checkbox] { accent-color: #2563eb; margin: 0; width: 14px; height: 14px; flex-shrink: 0; }
|
||||
.choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
|
||||
select { font: inherit; color: #334155; background: #fff; border: 1px solid #dce3eb; border-radius: 8px; padding: 6px 10px; max-width: 100%; }
|
||||
select:disabled { opacity: .5; }
|
||||
.hint { color: #64748b; font-size: 11px; }
|
||||
.error { color: #b91c1c; }
|
||||
.text-button, .manage-link { color: #2563eb; font: inherit; text-decoration: none; }
|
||||
.text-button { background: none; border: 0; padding: 0 6px; cursor: pointer; }
|
||||
.manage-link { display: inline-flex; align-items: center; gap: 4px; justify-self: start; }
|
||||
:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; }
|
||||
@@ -0,0 +1,59 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
|
||||
import { TaskPluginsComponent } from './task-plugins.component';
|
||||
|
||||
describe('TaskPluginsComponent', () => {
|
||||
let http: HttpTestingController;
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({ imports: [TaskPluginsComponent], providers: [provideRouter([]), provideHttpClient(), provideHttpClientTesting()] });
|
||||
http = TestBed.inject(HttpTestingController);
|
||||
});
|
||||
afterEach(() => http.verify());
|
||||
|
||||
it('starts collapsed and automatic without an execution target selector', async () => {
|
||||
const fixture = TestBed.createComponent(TaskPluginsComponent);
|
||||
fixture.detectChanges();
|
||||
http.expectNone('/api/plugins');
|
||||
expect(fixture.nativeElement.textContent).toContain('自动');
|
||||
expect(fixture.nativeElement.textContent).not.toContain('执行目标');
|
||||
expect(fixture.nativeElement.querySelector('select')).toBeNull();
|
||||
const emitted = jasmine.createSpy('changed');
|
||||
fixture.componentInstance.changed.subscribe(emitted);
|
||||
fixture.nativeElement.querySelector('button').click(); fixture.detectChanges();
|
||||
http.expectOne('/api/plugins').flush({ plugins: [] });
|
||||
await fixture.whenStable(); fixture.detectChanges();
|
||||
fixture.nativeElement.querySelector('input').click(); fixture.detectChanges();
|
||||
expect(emitted).toHaveBeenCalledWith({ plugins: [] });
|
||||
fixture.nativeElement.querySelector('input').click(); fixture.detectChanges();
|
||||
expect(emitted).toHaveBeenCalledWith({});
|
||||
});
|
||||
|
||||
it('offers authorized cross-device connections and uses the default profile', async () => {
|
||||
const fixture = TestBed.createComponent(TaskPluginsComponent);
|
||||
const component = fixture.componentInstance;
|
||||
component.toggle();
|
||||
const plugin = { enabled: true, manifest: { id: 'desktop', name: '电脑控制', targets: ['computer', 'mixed'] }, profiles: [
|
||||
{ name: 'default', label: '旧配置', authorized: false },
|
||||
{ name: 'lab', label: '实验室', authorized: true, is_default: true }
|
||||
] };
|
||||
http.expectOne('/api/plugins').flush({ plugins: [plugin, { ...plugin, enabled: false, manifest: { ...plugin.manifest, id: 'disabled' } }] });
|
||||
component.automatic = false; fixture.detectChanges(); await fixture.whenStable();
|
||||
const emitted = jasmine.createSpy('changed'); component.changed.subscribe(emitted);
|
||||
const checkbox = fixture.nativeElement.querySelector('.choice input');
|
||||
checkbox.click(); fixture.detectChanges(); await fixture.whenStable();
|
||||
expect(emitted).toHaveBeenCalledWith({ plugins: [{ id: 'desktop', profile: 'lab' }] });
|
||||
expect(fixture.nativeElement.querySelectorAll('.choice').length).toBe(1);
|
||||
expect(fixture.nativeElement.querySelector('select').textContent).not.toContain('旧配置');
|
||||
});
|
||||
|
||||
it('shows a retryable error and keeps automatic mode on lookup failure', () => {
|
||||
const fixture = TestBed.createComponent(TaskPluginsComponent);
|
||||
fixture.componentInstance.toggle();
|
||||
http.expectOne('/api/plugins').flush({}, { status: 503, statusText: 'Unavailable' });
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.textContent).toContain('重试');
|
||||
expect(fixture.componentInstance.automatic).toBeTrue();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
import { Component, inject, output, signal } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { InstalledPlugin, PluginService } from '../../services/plugin.service';
|
||||
|
||||
export interface TaskPluginOptions {
|
||||
plugins?: { id: string; profile: string; version?: string }[];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-task-plugins', standalone: true, imports: [FormsModule, RouterLink],
|
||||
templateUrl: './task-plugins.component.html', styleUrl: './task-plugins.component.scss'
|
||||
})
|
||||
export class TaskPluginsComponent {
|
||||
changed = output<TaskPluginOptions>();
|
||||
private api = inject(PluginService);
|
||||
automatic = true;
|
||||
selected: Record<string, string> = {};
|
||||
open = signal(false);
|
||||
loading = signal(false);
|
||||
error = signal('');
|
||||
plugins = signal<InstalledPlugin[]>([]);
|
||||
|
||||
summary() {
|
||||
return this.automatic ? '自动' : Object.keys(this.selected).length ? `已选 ${Object.keys(this.selected).length} 个` : '本次停用';
|
||||
}
|
||||
available() {
|
||||
return this.plugins().filter(p => p.enabled && p.profiles.some(profile => profile.authorized) &&
|
||||
p.manifest.targets.some(target => target === 'android' || target === 'mixed'));
|
||||
}
|
||||
toggle() {
|
||||
this.open.update(v => !v);
|
||||
if (this.open()) this.load();
|
||||
}
|
||||
load() {
|
||||
this.loading.set(true); this.error.set('');
|
||||
this.api.list().subscribe({
|
||||
next: value => { this.plugins.set(value.plugins); this.loading.set(false); },
|
||||
error: () => { this.error.set('暂时无法读取插件。'); this.loading.set(false); }
|
||||
});
|
||||
}
|
||||
choose(plugin: InstalledPlugin, event: Event) {
|
||||
if ((event.target as HTMLInputElement).checked) {
|
||||
const profiles = plugin.profiles.filter(p => p.authorized);
|
||||
this.selected[plugin.manifest.id] = (profiles.find(p => p.is_default) || profiles[0]).name;
|
||||
} else delete this.selected[plugin.manifest.id];
|
||||
this.emit();
|
||||
}
|
||||
emit() {
|
||||
this.changed.emit(this.automatic ? {} : {
|
||||
plugins: Object.entries(this.selected).map(([id, profile]) => ({ id, profile }))
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user