|
@@ -144,9 +144,10 @@
|
|
|
|
|
|
|
|
<div v-else-if="workflowStep === 2 && outline" class="outline">
|
|
<div v-else-if="workflowStep === 2 && outline" class="outline">
|
|
|
<div class="sample-stage-head">
|
|
<div class="sample-stage-head">
|
|
|
- <div>
|
|
|
|
|
- <strong>选择喜欢的课件样式</strong>
|
|
|
|
|
- <span>已推荐“{{ selectedTemplate.name }}”,可以逐页查看效果后再生成完整课件。</span>
|
|
|
|
|
|
|
+ <div class="sample-template-current">
|
|
|
|
|
+ <span>当前样式</span>
|
|
|
|
|
+ <strong>{{ selectedTemplate.name }}</strong>
|
|
|
|
|
+ <small v-if="selectedTemplate.id === recommendedTemplate.id">系统推荐</small>
|
|
|
</div>
|
|
</div>
|
|
|
<button type="button" :disabled="working" @click="templatePickerExpanded = !templatePickerExpanded">
|
|
<button type="button" :disabled="working" @click="templatePickerExpanded = !templatePickerExpanded">
|
|
|
{{ templatePickerExpanded ? "收起模板" : "更换模板" }}
|
|
{{ templatePickerExpanded ? "收起模板" : "更换模板" }}
|
|
@@ -173,7 +174,7 @@
|
|
|
:title="outline.pages[index]?.title || `第${index + 1}页`"
|
|
:title="outline.pages[index]?.title || `第${index + 1}页`"
|
|
|
@click="selectSamplePage(outline.pages[index]?.pageNo || index + 1, index)"
|
|
@click="selectSamplePage(outline.pages[index]?.pageNo || index + 1, index)"
|
|
|
>
|
|
>
|
|
|
- <ThumbnailSlide :slide="slide" :size="132" />
|
|
|
|
|
|
|
+ <ThumbnailSlide :slide="slide" :size="116" />
|
|
|
<span>{{ outline.pages[index]?.title || `第${index + 1}页` }}</span>
|
|
<span>{{ outline.pages[index]?.title || `第${index + 1}页` }}</span>
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|
|
@@ -212,81 +213,80 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div v-if="sampleSlide && selectedPage" class="sample-detail-layout">
|
|
|
|
|
- <div class="sample-outline-panel">
|
|
|
|
|
- <div class="sample-panel-heading">
|
|
|
|
|
- <span>当前页大纲</span>
|
|
|
|
|
- <strong>第{{ samplePageNo }}页</strong>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="page-editor simplified-page-editor">
|
|
|
|
|
- <div class="editor-head">
|
|
|
|
|
- <div class="title-editor">
|
|
|
|
|
- <label class="outline-field-label">页面主题</label>
|
|
|
|
|
- <input v-model="selectedPage.title" class="page-title" :disabled="working" />
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div class="field-card">
|
|
|
|
|
- <div class="field-title">学生看到的内容</div>
|
|
|
|
|
- <input
|
|
|
|
|
- :value="studentHeadline"
|
|
|
|
|
- :disabled="working"
|
|
|
|
|
- class="headline-input"
|
|
|
|
|
- placeholder="这一页给学生看的核心标题"
|
|
|
|
|
- @input="event => updateStudentHeadline(selectedPage!, event)"
|
|
|
|
|
- />
|
|
|
|
|
- <textarea
|
|
|
|
|
- :value="studentPoints.join('\n')"
|
|
|
|
|
- :disabled="working"
|
|
|
|
|
- class="page-bullets"
|
|
|
|
|
- placeholder="每行一条学生可见要点,避免写老师操作步骤"
|
|
|
|
|
- @input="event => updateStudentPoints(selectedPage!, event)"
|
|
|
|
|
- ></textarea>
|
|
|
|
|
|
|
+ <div v-if="sampleSlide && selectedPage" class="sample-detail-section">
|
|
|
|
|
+ <div class="sample-detail-heading">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>第{{ samplePageNo }}页</span>
|
|
|
|
|
+ <strong>{{ samplePageTitle }}</strong>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ <small>{{ samplePageReason }}</small>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div class="sample-preview-column">
|
|
|
|
|
- <div class="sample-preview-heading">
|
|
|
|
|
- <div>
|
|
|
|
|
- <span>页面预览</span>
|
|
|
|
|
- <strong>{{ samplePageTitle }}</strong>
|
|
|
|
|
|
|
+ <div class="sample-detail-layout">
|
|
|
|
|
+ <section class="sample-outline-panel" aria-label="页面内容编辑">
|
|
|
|
|
+ <div class="page-editor simplified-page-editor">
|
|
|
|
|
+ <div class="editor-head">
|
|
|
|
|
+ <div class="title-editor">
|
|
|
|
|
+ <label class="outline-field-label">页面主题</label>
|
|
|
|
|
+ <input v-model="selectedPage.title" class="page-title" :disabled="working" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="field-card">
|
|
|
|
|
+ <div class="field-title">学生看到的内容</div>
|
|
|
|
|
+ <input
|
|
|
|
|
+ :value="studentHeadline"
|
|
|
|
|
+ :disabled="working"
|
|
|
|
|
+ class="headline-input"
|
|
|
|
|
+ placeholder="这一页给学生看的核心标题"
|
|
|
|
|
+ @input="event => updateStudentHeadline(selectedPage!, event)"
|
|
|
|
|
+ />
|
|
|
|
|
+ <textarea
|
|
|
|
|
+ :value="studentPoints.join('\n')"
|
|
|
|
|
+ :disabled="working"
|
|
|
|
|
+ class="page-bullets"
|
|
|
|
|
+ placeholder="每行一条学生可见要点,避免写老师操作步骤"
|
|
|
|
|
+ @input="event => updateStudentPoints(selectedPage!, event)"
|
|
|
|
|
+ ></textarea>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- <small>{{ samplePageReason }}</small>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="sample-canvas">
|
|
|
|
|
- <ThumbnailSlide
|
|
|
|
|
- :slide="sampleSlide"
|
|
|
|
|
- :size="600"
|
|
|
|
|
- :show-background-error="true"
|
|
|
|
|
- @background-load-state="handleSampleBackgroundLoadState"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div v-if="sampleBackgroundState.status === 'error'" class="template-load-error">模板背景加载失败,请更换模板或稍后重试</div>
|
|
|
|
|
- <div class="sample-feedback">
|
|
|
|
|
- <div class="feedback-label">调整当前页面</div>
|
|
|
|
|
- <div class="feedback-chips">
|
|
|
|
|
- <button
|
|
|
|
|
- v-for="item in sampleFeedbackOptions"
|
|
|
|
|
- :key="item"
|
|
|
|
|
- type="button"
|
|
|
|
|
- :class="{ active: sampleFeedbackTags.includes(item) }"
|
|
|
|
|
- :disabled="working"
|
|
|
|
|
- @click="toggleSampleFeedback(item)"
|
|
|
|
|
- >
|
|
|
|
|
- {{ item }}
|
|
|
|
|
- </button>
|
|
|
|
|
|
|
+ </section>
|
|
|
|
|
+
|
|
|
|
|
+ <section class="sample-preview-column" aria-label="页面预览及调整">
|
|
|
|
|
+ <div class="sample-canvas">
|
|
|
|
|
+ <ThumbnailSlide
|
|
|
|
|
+ :slide="sampleSlide"
|
|
|
|
|
+ :size="600"
|
|
|
|
|
+ :show-background-error="true"
|
|
|
|
|
+ @background-load-state="handleSampleBackgroundLoadState"
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="sample-feedback-action">
|
|
|
|
|
- <textarea
|
|
|
|
|
- v-model="sampleFeedbackText"
|
|
|
|
|
- :disabled="working"
|
|
|
|
|
- placeholder="也可以直接说明你希望怎么调整"
|
|
|
|
|
- @input="invalidateVisualApproval"
|
|
|
|
|
- ></textarea>
|
|
|
|
|
- <Button @click="regenerateSamplePage" :disabled="working">调整当前页面</Button>
|
|
|
|
|
|
|
+ <div v-if="sampleBackgroundState.status === 'error'" class="template-load-error">模板背景加载失败,请更换模板或稍后重试</div>
|
|
|
|
|
+ <div class="sample-feedback">
|
|
|
|
|
+ <div class="feedback-label">调整当前页面</div>
|
|
|
|
|
+ <div class="feedback-chips">
|
|
|
|
|
+ <button
|
|
|
|
|
+ v-for="item in sampleFeedbackOptions"
|
|
|
|
|
+ :key="item"
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ :class="{ active: sampleFeedbackTags.includes(item) }"
|
|
|
|
|
+ :disabled="working"
|
|
|
|
|
+ @click="toggleSampleFeedback(item)"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ item }}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sample-feedback-action">
|
|
|
|
|
+ <textarea
|
|
|
|
|
+ v-model="sampleFeedbackText"
|
|
|
|
|
+ :disabled="working"
|
|
|
|
|
+ placeholder="也可以直接说明你希望怎么调整"
|
|
|
|
|
+ @input="invalidateVisualApproval"
|
|
|
|
|
+ ></textarea>
|
|
|
|
|
+ <Button @click="regenerateSamplePage" :disabled="working">调整当前页面</Button>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </section>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -839,11 +839,7 @@ async function confirmSamplesAndGenerate() {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const backgroundUrls = Array.from(
|
|
const backgroundUrls = Array.from(
|
|
|
- new Set(
|
|
|
|
|
- slides
|
|
|
|
|
- .map(slide => (slide.background?.type === "image" ? resolveTemplateAssetUrl(slide.background.image) : ""))
|
|
|
|
|
- .filter(Boolean)
|
|
|
|
|
- )
|
|
|
|
|
|
|
+ new Set(slides.map(slide => (slide.background?.type === "image" ? resolveTemplateAssetUrl(slide.background.image) : "")).filter(Boolean))
|
|
|
)
|
|
)
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
@@ -1039,12 +1035,16 @@ function normalizeDraftLocally() {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function cleanDraftText(value?: string, limit?: number) {
|
|
function cleanDraftText(value?: string, limit?: number) {
|
|
|
- const cleaned = String(value || "").replace(/\s+/g, " ").trim()
|
|
|
|
|
|
|
+ const cleaned = String(value || "")
|
|
|
|
|
+ .replace(/\s+/g, " ")
|
|
|
|
|
+ .trim()
|
|
|
return limit ? cleaned.slice(0, limit) : cleaned
|
|
return limit ? cleaned.slice(0, limit) : cleaned
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function normalizeDraftText(value?: string) {
|
|
function normalizeDraftText(value?: string) {
|
|
|
- return cleanDraftText(value).replace(/[,。!?、;:,.!?;:\s]+/g, "").toLowerCase()
|
|
|
|
|
|
|
+ return cleanDraftText(value)
|
|
|
|
|
+ .replace(/[,。!?、;:,.!?;:\s]+/g, "")
|
|
|
|
|
+ .toLowerCase()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function uniqueDraftTexts(values: string[]) {
|
|
function uniqueDraftTexts(values: string[]) {
|
|
@@ -1133,6 +1133,16 @@ function shortProgressLabel(message?: string) {
|
|
|
.ai-dialog.review-mode {
|
|
.ai-dialog.review-mode {
|
|
|
height: 82vh;
|
|
height: 82vh;
|
|
|
}
|
|
}
|
|
|
|
|
+.ai-dialog.review-mode .header {
|
|
|
|
|
+ .title {
|
|
|
|
|
+ font-size: 22px;
|
|
|
|
|
+ line-height: 1.25;
|
|
|
|
|
+ }
|
|
|
|
|
+ .sub {
|
|
|
|
|
+ margin-top: 3px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
.header,
|
|
.header,
|
|
|
.footer {
|
|
.footer {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -1157,7 +1167,7 @@ function shortProgressLabel(message?: string) {
|
|
|
.workflow-steps {
|
|
.workflow-steps {
|
|
|
display: grid;
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
- margin-top: 16px;
|
|
|
|
|
|
|
+ margin-top: 12px;
|
|
|
padding: 4px;
|
|
padding: 4px;
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
background: #f4f7fa;
|
|
background: #f4f7fa;
|
|
@@ -1168,7 +1178,7 @@ function shortProgressLabel(message?: string) {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
gap: 8px;
|
|
gap: 8px;
|
|
|
- height: 38px;
|
|
|
|
|
|
|
+ height: 34px;
|
|
|
color: #7b8794;
|
|
color: #7b8794;
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
@@ -1538,7 +1548,7 @@ function shortProgressLabel(message?: string) {
|
|
|
color: #52616b;
|
|
color: #52616b;
|
|
|
}
|
|
}
|
|
|
.outline {
|
|
.outline {
|
|
|
- margin-top: 14px;
|
|
|
|
|
|
|
+ margin-top: 10px;
|
|
|
min-height: 0;
|
|
min-height: 0;
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
display: block;
|
|
display: block;
|
|
@@ -1550,39 +1560,58 @@ function shortProgressLabel(message?: string) {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
gap: 12px;
|
|
gap: 12px;
|
|
|
- div span {
|
|
|
|
|
- display: block;
|
|
|
|
|
- margin-top: 3px;
|
|
|
|
|
- color: #7b8794;
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
- }
|
|
|
|
|
button {
|
|
button {
|
|
|
- height: 32px;
|
|
|
|
|
- padding: 0 11px;
|
|
|
|
|
- border: 1px solid $themeColor;
|
|
|
|
|
|
|
+ height: 30px;
|
|
|
|
|
+ padding: 0 10px;
|
|
|
|
|
+ border: 1px solid #cbd9e8;
|
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
color: $themeColor;
|
|
color: $themeColor;
|
|
|
|
|
+ font-size: 12px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+.sample-template-current {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ gap: 7px;
|
|
|
|
|
+ color: #657381;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ strong {
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ color: #1f2933;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ }
|
|
|
|
|
+ small {
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ padding: 2px 6px;
|
|
|
|
|
+ border-radius: 999px;
|
|
|
|
|
+ background: #eaf7f4;
|
|
|
|
|
+ color: #168f86;
|
|
|
|
|
+ font-size: 10px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
.sample-carousel-shell {
|
|
.sample-carousel-shell {
|
|
|
display: grid;
|
|
display: grid;
|
|
|
- grid-template-columns: 34px minmax(0, 1fr) 34px;
|
|
|
|
|
|
|
+ grid-template-columns: 30px minmax(0, 1fr) 30px;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- gap: 8px;
|
|
|
|
|
- margin-top: 12px;
|
|
|
|
|
|
|
+ gap: 6px;
|
|
|
|
|
+ margin-top: 8px;
|
|
|
}
|
|
}
|
|
|
.sample-carousel-arrow {
|
|
.sample-carousel-arrow {
|
|
|
- width: 34px;
|
|
|
|
|
- height: 34px;
|
|
|
|
|
|
|
+ width: 30px;
|
|
|
|
|
+ height: 30px;
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
border: 1px solid #d8e1eb;
|
|
border: 1px solid #d8e1eb;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
color: #52616b;
|
|
color: #52616b;
|
|
|
- font-size: 24px;
|
|
|
|
|
- line-height: 30px;
|
|
|
|
|
|
|
+ font-size: 21px;
|
|
|
|
|
+ line-height: 26px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
box-shadow: 0 3px 10px rgba(31, 41, 51, 0.08);
|
|
box-shadow: 0 3px 10px rgba(31, 41, 51, 0.08);
|
|
|
&:hover:not(:disabled) {
|
|
&:hover:not(:disabled) {
|
|
@@ -1596,10 +1625,10 @@ function shortProgressLabel(message?: string) {
|
|
|
}
|
|
}
|
|
|
.sample-thumbnail-track {
|
|
.sample-thumbnail-track {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- gap: 10px;
|
|
|
|
|
|
|
+ gap: 8px;
|
|
|
min-width: 0;
|
|
min-width: 0;
|
|
|
overflow-x: auto;
|
|
overflow-x: auto;
|
|
|
- padding: 3px;
|
|
|
|
|
|
|
+ padding: 2px;
|
|
|
scroll-behavior: smooth;
|
|
scroll-behavior: smooth;
|
|
|
scroll-snap-type: x proximity;
|
|
scroll-snap-type: x proximity;
|
|
|
scrollbar-width: none;
|
|
scrollbar-width: none;
|
|
@@ -1608,26 +1637,28 @@ function shortProgressLabel(message?: string) {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.sample-thumbnail-item {
|
|
.sample-thumbnail-item {
|
|
|
- width: 136px;
|
|
|
|
|
- flex: 0 0 136px;
|
|
|
|
|
|
|
+ width: 120px;
|
|
|
|
|
+ flex: 0 0 120px;
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
border: 2px solid transparent;
|
|
border: 2px solid transparent;
|
|
|
- border-radius: 7px;
|
|
|
|
|
|
|
+ border-radius: 6px;
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
color: #52616b;
|
|
color: #52616b;
|
|
|
text-align: left;
|
|
text-align: left;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
scroll-snap-align: start;
|
|
scroll-snap-align: start;
|
|
|
- box-shadow: 0 3px 10px rgba(31, 41, 51, 0.08);
|
|
|
|
|
- transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
|
|
|
|
|
|
+ box-shadow: 0 2px 7px rgba(31, 41, 51, 0.07);
|
|
|
|
|
+ transition:
|
|
|
|
|
+ border-color 0.16s ease,
|
|
|
|
|
+ box-shadow 0.16s ease;
|
|
|
&.active {
|
|
&.active {
|
|
|
border-color: $themeColor;
|
|
border-color: $themeColor;
|
|
|
box-shadow: 0 0 0 2px rgba($themeColor, 0.1);
|
|
box-shadow: 0 0 0 2px rgba($themeColor, 0.1);
|
|
|
}
|
|
}
|
|
|
> span {
|
|
> span {
|
|
|
display: block;
|
|
display: block;
|
|
|
- padding: 6px 7px 7px;
|
|
|
|
|
|
|
+ padding: 5px 6px 6px;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
font-size: 11px;
|
|
font-size: 11px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
@@ -1636,7 +1667,7 @@ function shortProgressLabel(message?: string) {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.compact-template-panel {
|
|
.compact-template-panel {
|
|
|
- margin-top: 12px;
|
|
|
|
|
|
|
+ margin-top: 8px;
|
|
|
padding: 10px;
|
|
padding: 10px;
|
|
|
border: 1px solid #e5eaf0;
|
|
border: 1px solid #e5eaf0;
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
@@ -1650,57 +1681,90 @@ function shortProgressLabel(message?: string) {
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-.sample-detail-layout {
|
|
|
|
|
- display: grid;
|
|
|
|
|
- grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.45fr);
|
|
|
|
|
- align-items: start;
|
|
|
|
|
- gap: 16px;
|
|
|
|
|
- margin-top: 14px;
|
|
|
|
|
-}
|
|
|
|
|
-.sample-outline-panel,
|
|
|
|
|
-.sample-preview-column {
|
|
|
|
|
- min-width: 0;
|
|
|
|
|
- padding: 14px;
|
|
|
|
|
- border: 1px solid #e5eaf0;
|
|
|
|
|
- border-radius: 10px;
|
|
|
|
|
- background: #fafcff;
|
|
|
|
|
|
|
+.sample-detail-section {
|
|
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
}
|
|
|
-.sample-panel-heading,
|
|
|
|
|
-.sample-preview-heading {
|
|
|
|
|
|
|
+.sample-detail-heading {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- align-items: flex-start;
|
|
|
|
|
|
|
+ align-items: center;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
- gap: 12px;
|
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
- span,
|
|
|
|
|
- strong {
|
|
|
|
|
- display: block;
|
|
|
|
|
|
|
+ min-height: 26px;
|
|
|
|
|
+ gap: 16px;
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+ > div {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: baseline;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ gap: 8px;
|
|
|
}
|
|
}
|
|
|
span {
|
|
span {
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
color: $themeColor;
|
|
color: $themeColor;
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
}
|
|
}
|
|
|
strong {
|
|
strong {
|
|
|
- margin-top: 3px;
|
|
|
|
|
|
|
+ overflow: hidden;
|
|
|
color: #1f2933;
|
|
color: #1f2933;
|
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ }
|
|
|
|
|
+ small {
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ max-width: 48%;
|
|
|
|
|
+ color: #8a96a3;
|
|
|
|
|
+ font-size: 11px;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-.sample-panel-heading > strong {
|
|
|
|
|
- margin-top: 0;
|
|
|
|
|
- color: #7b8794;
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
|
|
+.sample-detail-layout {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1.48fr);
|
|
|
|
|
+ align-items: stretch;
|
|
|
|
|
+ gap: 12px;
|
|
|
}
|
|
}
|
|
|
-.sample-preview-heading small {
|
|
|
|
|
- max-width: 52%;
|
|
|
|
|
- color: #7b8794;
|
|
|
|
|
- font-size: 11px;
|
|
|
|
|
- line-height: 1.5;
|
|
|
|
|
- text-align: right;
|
|
|
|
|
|
|
+.sample-outline-panel,
|
|
|
|
|
+.sample-preview-column {
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ border: 1px solid #dfe6ee;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+.sample-outline-panel {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+}
|
|
|
|
|
+.sample-preview-column {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+}
|
|
|
|
|
+.simplified-page-editor {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ overflow: visible;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ border-radius: 0;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ .title-editor {
|
|
|
|
|
+ max-width: none;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.simplified-page-editor .field-card {
|
|
.simplified-page-editor .field-card {
|
|
|
- margin-top: 12px;
|
|
|
|
|
|
|
+ margin-top: 11px;
|
|
|
|
|
+ padding: 11px 0 0;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ border-top: 1px solid #edf1f5;
|
|
|
|
|
+ border-radius: 0;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+}
|
|
|
|
|
+.simplified-page-editor .page-bullets {
|
|
|
|
|
+ min-height: 124px;
|
|
|
|
|
+ height: 124px;
|
|
|
}
|
|
}
|
|
|
.representative-samples {
|
|
.representative-samples {
|
|
|
display: grid;
|
|
display: grid;
|
|
@@ -1975,8 +2039,8 @@ function shortProgressLabel(message?: string) {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.sample-feedback {
|
|
.sample-feedback {
|
|
|
- margin-top: 12px;
|
|
|
|
|
- padding-top: 12px;
|
|
|
|
|
|
|
+ margin-top: auto;
|
|
|
|
|
+ padding-top: 10px;
|
|
|
border-top: 1px solid #e5eaf0;
|
|
border-top: 1px solid #e5eaf0;
|
|
|
}
|
|
}
|
|
|
.feedback-label {
|
|
.feedback-label {
|
|
@@ -1988,10 +2052,10 @@ function shortProgressLabel(message?: string) {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
|
gap: 6px;
|
|
gap: 6px;
|
|
|
- margin-top: 7px;
|
|
|
|
|
|
|
+ margin-top: 6px;
|
|
|
button {
|
|
button {
|
|
|
- height: 28px;
|
|
|
|
|
- padding: 0 10px;
|
|
|
|
|
|
|
+ height: 26px;
|
|
|
|
|
+ padding: 0 9px;
|
|
|
border: 1px solid #dfe5ec;
|
|
border: 1px solid #dfe5ec;
|
|
|
border-radius: 999px;
|
|
border-radius: 999px;
|
|
|
background: #fff;
|
|
background: #fff;
|
|
@@ -2008,7 +2072,7 @@ function shortProgressLabel(message?: string) {
|
|
|
}
|
|
}
|
|
|
.sample-feedback textarea {
|
|
.sample-feedback textarea {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 58px;
|
|
|
|
|
|
|
+ height: 48px;
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
padding: 8px 10px;
|
|
padding: 8px 10px;
|
|
|
border: 1px solid #dfe5ec;
|
|
border: 1px solid #dfe5ec;
|
|
@@ -2024,7 +2088,7 @@ function shortProgressLabel(message?: string) {
|
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
|
align-items: end;
|
|
align-items: end;
|
|
|
gap: 8px;
|
|
gap: 8px;
|
|
|
- margin-top: 8px;
|
|
|
|
|
|
|
+ margin-top: 6px;
|
|
|
:deep(.button) {
|
|
:deep(.button) {
|
|
|
height: 34px;
|
|
height: 34px;
|
|
|
line-height: 34px;
|
|
line-height: 34px;
|
|
@@ -2037,10 +2101,12 @@ function shortProgressLabel(message?: string) {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
overflow: auto;
|
|
overflow: auto;
|
|
|
- padding: 12px;
|
|
|
|
|
- border: 1px solid #e0e7ef;
|
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
- background: #eef2f7;
|
|
|
|
|
|
|
+ min-height: 0;
|
|
|
|
|
+ flex: 1 1 auto;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ background: #f1f4f8;
|
|
|
:deep(.thumbnail-slide) {
|
|
:deep(.thumbnail-slide) {
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
@@ -2130,7 +2196,9 @@ function shortProgressLabel(message?: string) {
|
|
|
color: #52616b;
|
|
color: #52616b;
|
|
|
text-align: left;
|
|
text-align: left;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
- transition: border-color 0.16s ease, background 0.16s ease;
|
|
|
|
|
|
|
+ transition:
|
|
|
|
|
+ border-color 0.16s ease,
|
|
|
|
|
+ background 0.16s ease;
|
|
|
+ .draft-page-item {
|
|
+ .draft-page-item {
|
|
|
margin-top: 7px;
|
|
margin-top: 7px;
|
|
|
}
|
|
}
|
|
@@ -2496,6 +2564,14 @@ function shortProgressLabel(message?: string) {
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|
|
|
|
|
+.ai-dialog.review-mode .footer {
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ padding-top: 10px;
|
|
|
|
|
+ :deep(.button.primary) {
|
|
|
|
|
+ height: 36px;
|
|
|
|
|
+ line-height: 36px;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
@media (max-width: 900px) {
|
|
@media (max-width: 900px) {
|
|
|
.ai-dialog.review-mode {
|
|
.ai-dialog.review-mode {
|
|
@@ -2509,6 +2585,9 @@ function shortProgressLabel(message?: string) {
|
|
|
justify-self: center;
|
|
justify-self: center;
|
|
|
max-width: 100%;
|
|
max-width: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
+ .sample-preview-column {
|
|
|
|
|
+ order: -1;
|
|
|
|
|
+ }
|
|
|
.compact-template-panel .sample-template-picker {
|
|
.compact-template-panel .sample-template-picker {
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
}
|
|
}
|
|
@@ -2551,11 +2630,14 @@ function shortProgressLabel(message?: string) {
|
|
|
.sample-feedback-action {
|
|
.sample-feedback-action {
|
|
|
grid-template-columns: 1fr;
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
}
|
|
|
- .sample-preview-heading {
|
|
|
|
|
|
|
+ .sample-detail-heading {
|
|
|
|
|
+ align-items: flex-start;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
|
|
+ gap: 3px;
|
|
|
small {
|
|
small {
|
|
|
max-width: none;
|
|
max-width: none;
|
|
|
text-align: left;
|
|
text-align: left;
|
|
|
|
|
+ white-space: normal;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.compact-template-panel .sample-template-picker {
|
|
.compact-template-panel .sample-template-picker {
|