style: 全站使用背景分层替代装饰边框并统一直角
This commit is contained in:
GouJ
@@ -393,7 +393,7 @@ function exportResult() {
|
||||
</div>
|
||||
<div v-if="tab === 'tasks'" class="p-5">
|
||||
<NScrollbar x-scrollable v-if="snapshot?.tasks?.length" class="table-scroll">
|
||||
<NTable :single-line="false" class="project-table"
|
||||
<NTable :bordered="false" :single-line="true" striped class="project-table"
|
||||
><thead>
|
||||
<tr>
|
||||
<th>分组</th>
|
||||
|
||||
@@ -53,7 +53,7 @@ const purposeLabels: Record<string, string> = {
|
||||
{{ episode?.beatShots.reduce((sum, beat) => sum + beat.shots.length, 0) ?? 0 }} 个镜头</span
|
||||
>
|
||||
</div>
|
||||
<div class="mb-7 border-l-2 border-accent pl-4">
|
||||
<div class="mb-7 surface-inset p-4">
|
||||
<p class="font-medium">{{ plan.storyGoal }}</p>
|
||||
<p class="mt-2 text-sm leading-6 text-muted">{{ plan.emotionalArc }}</p>
|
||||
</div>
|
||||
|
||||
@@ -30,7 +30,7 @@ const filtered = computed(() =>
|
||||
></NInput>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="filtered.length" class="divide-y divide-line">
|
||||
<div v-if="filtered.length" class="record-list">
|
||||
<article v-for="subject in filtered" :key="subject.profileId" class="py-5 first:pt-0">
|
||||
<div class="mb-3 flex flex-wrap items-center gap-3">
|
||||
<h3 class="font-semibold">{{ subject.name }}</h3>
|
||||
@@ -66,7 +66,7 @@ const filtered = computed(() =>
|
||||
<div
|
||||
v-for="form in forms.filter(item => item.profileId === subject.profileId)"
|
||||
:key="form.formId"
|
||||
class="mt-3 border-l-2 border-line pl-4"
|
||||
class="mt-3 surface-inset p-4"
|
||||
>
|
||||
<p class="text-sm font-medium">
|
||||
{{ form.formName || form.name
|
||||
|
||||
@@ -148,7 +148,7 @@ function exportScript() {
|
||||
</div>
|
||||
<NScrollbar v-if="tab !== 'episodes'" class="panel-scroll"
|
||||
><div v-if="tab === 'characters'" class="p-6 lg:p-8">
|
||||
<div v-if="project?.characters.length" class="divide-y divide-line">
|
||||
<div v-if="project?.characters.length" class="record-list">
|
||||
<article
|
||||
v-for="character in project.characters"
|
||||
:key="character.id"
|
||||
@@ -208,11 +208,7 @@ function exportScript() {
|
||||
</div>
|
||||
<div v-if="tab === 'review'" class="p-6 lg:p-8">
|
||||
<div v-if="project?.reviews.length" class="space-y-5">
|
||||
<article
|
||||
v-for="review in project.reviews"
|
||||
:key="review.id"
|
||||
class="border-b border-line pb-5"
|
||||
>
|
||||
<article v-for="review in project.reviews" :key="review.id" class="pb-5">
|
||||
<div class="mb-3 flex justify-between gap-3">
|
||||
<span
|
||||
class="text-sm font-medium"
|
||||
|
||||
@@ -464,7 +464,7 @@ watch(
|
||||
</nav>
|
||||
<article class="production-detail min-w-0">
|
||||
<NScrollbar class="panel-scroll" content-class="p-5 lg:p-7">
|
||||
<header class="mb-5 border-b border-line pb-5">
|
||||
<header class="mb-5 pb-5">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<p class="eyebrow">BEAT {{ shot.beatNo }} / SHOT {{ shot.shotNo }}</p>
|
||||
|
||||
@@ -401,7 +401,7 @@ async function inspectSpecs() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NCollapse v-if="keyframeSpec || videoSpec" class="mt-5 border-t border-line pt-4 text-xs"
|
||||
<NCollapse v-if="keyframeSpec || videoSpec" class="mt-5 pt-4 text-xs"
|
||||
><NCollapseItem name="details"
|
||||
><template #header>本镜确定性生成规格</template>
|
||||
<div class="mt-4 grid gap-5 lg:grid-cols-2">
|
||||
|
||||
@@ -100,6 +100,9 @@ function clearFilters() {
|
||||
<div class="project-table-area">
|
||||
<NDataTable
|
||||
class="project-data-table"
|
||||
:bordered="false"
|
||||
:bottom-bordered="false"
|
||||
striped
|
||||
:columns="columns"
|
||||
:data="filtered"
|
||||
:row-key="row => row.id"
|
||||
|
||||
@@ -271,7 +271,7 @@ watch(
|
||||
修改或覆盖上游设计后，后端不会自动使旧状态、旧提示词失效；请按顺序重生成下游内容。自动修复次数仅用于
|
||||
VisualState。
|
||||
</p>
|
||||
<NCollapse class="mt-3 border-t border-line pt-3"
|
||||
<NCollapse class="mt-3 pt-3"
|
||||
><NCollapseItem name="details"
|
||||
><template #header>视频提示词批量操作</template>
|
||||
<p class="my-3 text-xs leading-6 text-muted">
|
||||
|
||||
@@ -43,7 +43,7 @@ function exportReceipt() {
|
||||
{{ receipt.result.skippedEpisodes }} · 失败 {{ receipt.result.failedEpisodes }}
|
||||
</p>
|
||||
<NScrollbar x-scrollable class="table-scroll">
|
||||
<NTable :single-line="false" class="project-table"
|
||||
<NTable :bordered="false" :single-line="true" striped class="project-table"
|
||||
><thead>
|
||||
<tr>
|
||||
<th>剧集</th>
|
||||
|
||||
@@ -40,7 +40,7 @@ defineProps<{ shot: DesignedShot }>()
|
||||
>
|
||||
<p v-else class="text-sm text-muted">此镜头尚无已保存的导演设计。</p>
|
||||
</section>
|
||||
<section class="border-t border-line pt-6">
|
||||
<section class="pt-6">
|
||||
<h3 class="mb-4 text-sm font-semibold">
|
||||
即时视觉状态 <span class="ml-2 font-mono text-[10px] font-normal text-muted">VisualState</span>
|
||||
</h3>
|
||||
@@ -60,7 +60,7 @@ defineProps<{ shot: DesignedShot }>()
|
||||
<article
|
||||
v-for="subject in shot.visualState.subjects"
|
||||
:key="subject.subjectId"
|
||||
class="mt-5 border-l-2 border-line pl-4"
|
||||
class="mt-5 surface-inset p-4"
|
||||
>
|
||||
<div class="mb-3 flex flex-wrap items-center gap-2">
|
||||
<code class="subject-ref">{{ subject.subjectRef }}</code
|
||||
|
||||
@@ -152,7 +152,7 @@ function exportResult(kind: 'spec' | 'prompt') {
|
||||
</p>
|
||||
</template>
|
||||
</section>
|
||||
<section class="border-t border-line pt-6">
|
||||
<section class="pt-6">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<h3 class="text-sm font-semibold">镜头生成规格</h3>
|
||||
<NButton
|
||||
@@ -179,7 +179,7 @@ function exportResult(kind: 'spec' | 'prompt') {
|
||||
</NScrollbar>
|
||||
</template>
|
||||
</section>
|
||||
<section class="border-t border-line pt-6">
|
||||
<section class="pt-6">
|
||||
<h3 class="text-sm font-semibold">视频提示词</h3>
|
||||
<p class="mt-2 text-xs leading-6 text-muted">
|
||||
已有提示词可直接复用，没有则依据 GenerationSpec 与参考图调用模型生成。此处只处理
|
||||
|
||||
@@ -52,7 +52,7 @@ describe('Beat 两级镜头目录', () => {
|
||||
// happy-dom 不计算吸顶位置，保护 CSS 边界，实际滚动仍需浏览器验收。
|
||||
const css = readFileSync('src/admin.css', 'utf8')
|
||||
expect(css).toMatch(
|
||||
/\.directory-group-heading\s*\{[^}]*position:\s*sticky;[^}]*top:\s*0;[^}]*background:\s*var\(--app-subtle\)/
|
||||
/\.directory-group-heading\s*\{[^}]*position:\s*sticky;[^}]*top:\s*0;[^}]*background:\s*var\(--app-control\)/
|
||||
)
|
||||
expect(css).toMatch(/\.directory-mobile-beat\s*\{\s*display:\s*none/)
|
||||
const mobile = css.slice(css.lastIndexOf('@media (max-width: 760px)'))
|
||||
|
||||
@@ -250,7 +250,7 @@ watch(
|
||||
<dd>{{ casting.ready }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div class="mt-5 flex flex-wrap items-end gap-4 border-t border-line pt-4">
|
||||
<div class="mt-5 flex flex-wrap items-end gap-4 pt-4">
|
||||
<label class="w-28">
|
||||
<span class="field-label">并发数</span>
|
||||
<NInputNumber
|
||||
@@ -543,12 +543,12 @@ watch(
|
||||
@save="save"
|
||||
@dirty="dirty = $event"
|
||||
/>
|
||||
<div v-if="anchor" class="mt-5 flex items-center gap-4 border-t border-line pt-5">
|
||||
<div v-if="anchor" class="mt-5 flex items-center gap-4 pt-5">
|
||||
<AssetImage
|
||||
:src="anchor.imageUrl"
|
||||
:alt="`${subject.name}当前身份母版`"
|
||||
preview
|
||||
class="h-20 w-20 shrink-0 rounded"
|
||||
class="h-20 w-20 shrink-0"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-medium">当前身份母版</p>
|
||||
@@ -575,7 +575,7 @@ watch(
|
||||
@anchor="chooseAnchor"
|
||||
/>
|
||||
</template>
|
||||
<div class="mt-5 border-t border-line pt-5">
|
||||
<div class="mt-5 pt-5">
|
||||
<h4 class="text-xs font-medium">此主体的形态</h4>
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
<NTag v-for="form in subject.forms" :key="form.id" size="small" :bordered="false"
|
||||
|
||||
@@ -47,7 +47,7 @@ function chooseAnchor() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mt-5 border-t border-line pt-5" aria-label="身份参考图库">
|
||||
<section class="mt-5 pt-5" aria-label="身份参考图库">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h3 class="text-sm font-medium">身份参考图 · {{ images.length }}</h3>
|
||||
<NTag size="small" :bordered="false">{{ anchor ? '已选母版' : '尚无母版' }}</NTag>
|
||||
|
||||
@@ -158,7 +158,7 @@ function resetFilters() {
|
||||
@confirm="generateStale"
|
||||
/></div
|
||||
></NAlert>
|
||||
<NCollapse class="mt-4 border-t border-line pt-4"
|
||||
<NCollapse class="mt-4 pt-4"
|
||||
><NCollapseItem name="details"
|
||||
><template #header>项目批量生图</template>
|
||||
<div class="mt-4 flex flex-wrap items-end gap-4">
|
||||
|
||||
@@ -80,7 +80,7 @@ function remove(image: VisualStyleImage) {
|
||||
请填写有效图片地址和整数排序。
|
||||
</p>
|
||||
<div v-if="images.length" class="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<article v-for="image in images" :key="image.id" class="min-w-0 rounded border border-line p-3">
|
||||
<article v-for="image in images" :key="image.id" class="surface-inset min-w-0 p-3">
|
||||
<AssetImage
|
||||
:src="image.imageUrl"
|
||||
:alt="`${categories[image.category]}风格参考图`"
|
||||
|
||||
@@ -37,7 +37,7 @@ const history = computed(() => workflowCheckpoints(props.checkpoints, props.work
|
||||
>
|
||||
</NTimelineItem>
|
||||
</NTimeline>
|
||||
<p class="mt-5 border-t border-line pt-4 text-[11px] leading-5 text-muted">
|
||||
<p class="mt-5 pt-4 text-[11px] leading-5 text-muted">
|
||||
记录在节点或批次结束后更新，长时间无新记录不一定意味着任务失败。
|
||||
</p>
|
||||
</NScrollbar>
|
||||
|
||||
Reference in New Issue
Block a user