32 lines
1.6 KiB
TypeScript
32 lines
1.6 KiB
TypeScript
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
|
|
|
|
/** Visual folding only: the full receipt remains selectable and unchanged. */
|
|
@Component({
|
|
selector: 'app-expandable-value', standalone: true,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
@if (foldable()) {
|
|
<details>
|
|
<summary><span>{{ label() }} · {{ value().length }} 字符</span><span class="hint">展开查看</span></summary>
|
|
<pre tabindex="0" [attr.aria-label]="label() + '完整内容，可选择复制'">{{ value() }}</pre>
|
|
</details>
|
|
} @else { <span class="short-value">{{ value() }}</span> }
|
|
`,
|
|
styles: [`
|
|
:host { display:block; min-width:0; max-width:100%; }
|
|
details { border:1px solid var(--app-border, #e2e8f0); border-radius:8px; background:var(--app-surface-soft, #f8fafc); }
|
|
summary { cursor:pointer; padding:7px 10px; font-size:12px; color:var(--app-text-secondary, #475569); overflow-wrap:anywhere; }
|
|
.hint { margin-left:8px; color:var(--app-primary-text, #1a73e8); }
|
|
details[open] .hint { display:none; }
|
|
pre { margin:0; padding:10px; max-height:24rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; user-select:text; }
|
|
.short-value { white-space:pre-wrap; overflow-wrap:anywhere; }
|
|
summary:focus-visible, pre:focus-visible { outline:2px solid var(--app-focus, #a5b4fc); outline-offset:2px; }
|
|
`]
|
|
})
|
|
export class ExpandableValueComponent {
|
|
value = input('');
|
|
label = input('详情');
|
|
foldable = computed(() => /payload|原始|^result$/i.test(this.label())
|
|
|| this.value().length > 240 || this.value().split('\n').length > 4);
|
|
}
|