This commit is contained in:
@@ -2931,20 +2931,31 @@ function onStructureDragEnd(): void {
|
||||
</main>
|
||||
|
||||
<footer class="wizard-page__footer">
|
||||
<div>
|
||||
<a-button v-if="currentStep === 0" disabled>{{ t('common.previous') }}</a-button>
|
||||
<a-button v-else @click="handlePrev">{{ t('common.previous') }}</a-button>
|
||||
<div class="footer-previous">
|
||||
<a-button v-if="currentStep === 0" class="footer-btn" disabled>
|
||||
{{ t('common.previous') }}
|
||||
</a-button>
|
||||
<a-button v-else class="footer-btn" @click="handlePrev">
|
||||
{{ t('common.previous') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="footer-actions">
|
||||
<a-button :loading="savingDraft" @click="handleSaveDraftAndExit">
|
||||
<a-button class="footer-btn" :loading="savingDraft" @click="handleSaveDraftAndExit">
|
||||
{{ t('common.cancel') }}
|
||||
</a-button>
|
||||
<a-button v-if="currentStep < 2" type="primary" :loading="assistBusy" @click="handleNext">
|
||||
<a-button
|
||||
v-if="currentStep < 2"
|
||||
type="primary"
|
||||
class="footer-btn footer-btn--primary"
|
||||
:loading="assistBusy"
|
||||
@click="handleNext"
|
||||
>
|
||||
{{ t('common.next') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
v-else
|
||||
type="primary"
|
||||
class="footer-btn footer-btn--primary"
|
||||
:loading="mutation.isPending.value"
|
||||
@click="handleGenerate"
|
||||
>
|
||||
@@ -2967,8 +2978,8 @@ function onStructureDragEnd(): void {
|
||||
:closable="false"
|
||||
:mask-closable="false"
|
||||
:keyboard="false"
|
||||
centered
|
||||
width="460px"
|
||||
wrap-class-name="leave-confirm-modal-wrap"
|
||||
>
|
||||
<p class="leave-confirm-text">{{ t('templates.wizard.leaveConfirm.content') }}</p>
|
||||
<template #footer>
|
||||
@@ -3000,6 +3011,32 @@ function onStructureDragEnd(): void {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
:deep(.leave-confirm-modal-wrap) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 32px 16px 16px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:deep(.leave-confirm-modal-wrap .ant-modal) {
|
||||
top: 0;
|
||||
width: min(460px, calc(100vw - 32px)) !important;
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.leave-confirm-modal-wrap .ant-modal-footer) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
:deep(.leave-confirm-modal-wrap .ant-modal-footer .ant-btn) {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.wizard-page__loading {
|
||||
padding: 40px;
|
||||
}
|
||||
@@ -3736,9 +3773,27 @@ function onStructureDragEnd(): void {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.footer-previous {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.footer-btn.ant-btn {
|
||||
min-width: 104px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.footer-btn--primary.ant-btn {
|
||||
min-width: 144px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@@ -3791,9 +3846,10 @@ function onStructureDragEnd(): void {
|
||||
}
|
||||
|
||||
.wizard-page__footer {
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.custom-outline-row {
|
||||
@@ -3805,8 +3861,27 @@ function onStructureDragEnd(): void {
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.wizard-page__footer {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer-btn.ant-btn {
|
||||
min-width: auto;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-btn--primary.ant-btn {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -240,6 +240,7 @@ const articleColumns = computed<TableColumnsType<ArticleListItem>>(() => [
|
||||
title: t('common.title'),
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
width: 360,
|
||||
},
|
||||
{
|
||||
title: t('common.templateType'),
|
||||
@@ -273,6 +274,19 @@ const articleColumns = computed<TableColumnsType<ArticleListItem>>(() => [
|
||||
},
|
||||
])
|
||||
|
||||
const articlePagination = computed(() =>
|
||||
shouldUseRecentFallback.value
|
||||
? false
|
||||
: {
|
||||
current: page.value,
|
||||
pageSize: pageSize.value,
|
||||
total: displayedArticleTotal.value,
|
||||
showSizeChanger: true,
|
||||
onChange: handleTableChange,
|
||||
onShowSizeChange: handleTableChange,
|
||||
},
|
||||
)
|
||||
|
||||
// removed wizard watch effect
|
||||
|
||||
function applyFilters(): void {
|
||||
@@ -545,22 +559,13 @@ function refreshRecords(): void {
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
class="templates-view__desktop-table"
|
||||
:columns="articleColumns"
|
||||
:data-source="displayedArticles"
|
||||
:loading="articleListQuery.isPending.value || recentArticlesQuery.isPending.value"
|
||||
row-key="id"
|
||||
:pagination="
|
||||
shouldUseRecentFallback
|
||||
? false
|
||||
: {
|
||||
current: page,
|
||||
pageSize,
|
||||
total: displayedArticleTotal,
|
||||
showSizeChanger: true,
|
||||
onChange: handleTableChange,
|
||||
onShowSizeChange: handleTableChange,
|
||||
}
|
||||
"
|
||||
:pagination="articlePagination"
|
||||
:scroll="{ x: 1068 }"
|
||||
>
|
||||
<template #emptyText>{{ t('templates.list.empty') }}</template>
|
||||
|
||||
@@ -609,6 +614,82 @@ function refreshRecords(): void {
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<div class="templates-view__mobile-records">
|
||||
<a-skeleton
|
||||
v-if="articleListQuery.isPending.value || recentArticlesQuery.isPending.value"
|
||||
active
|
||||
:paragraph="{ rows: 6 }"
|
||||
/>
|
||||
|
||||
<a-empty v-else-if="!displayedArticles.length" :description="t('templates.list.empty')" />
|
||||
|
||||
<template v-else>
|
||||
<article
|
||||
v-for="record in displayedArticles"
|
||||
:key="record.id"
|
||||
class="templates-view__mobile-record"
|
||||
>
|
||||
<div class="templates-view__mobile-record-main">
|
||||
<h4>{{ record.title || t('article.untitled') }}</h4>
|
||||
<ArticleSourceMeta
|
||||
:source-type="record.source_type"
|
||||
:generation-mode="record.generation_mode"
|
||||
:created-at="record.created_at"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="templates-view__mobile-record-meta">
|
||||
<div class="templates-view__mobile-record-field">
|
||||
<span>{{ t('common.templateType') }}</span>
|
||||
<strong>{{ record.template_name || '--' }}</strong>
|
||||
</div>
|
||||
<div class="templates-view__mobile-record-field">
|
||||
<span>{{ t('common.wordCount') }}</span>
|
||||
<strong>{{ record.word_count || '--' }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="templates-view__mobile-record-status">
|
||||
<div class="templates-view__mobile-record-field">
|
||||
<span>{{ t('common.generateStatus') }}</span>
|
||||
<ArticleGenerateStatus :status="record.generate_status" />
|
||||
</div>
|
||||
<div class="templates-view__mobile-record-field">
|
||||
<span>{{ t('common.publishStatus') }}</span>
|
||||
<ArticlePublishStatus :status="record.publish_status" :article-id="record.id" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="templates-view__mobile-record-actions">
|
||||
<span>{{ t('common.actions') }}</span>
|
||||
<ArticleActionGroup
|
||||
v-bind="resolveArticleActionState(record)"
|
||||
:delete-confirm-title="t('templates.list.deleteConfirm')"
|
||||
:delete-loading="deleteMutation.isPending.value"
|
||||
:regenerate-confirm-title="t('common.regenerateConfirm')"
|
||||
:regenerate-loading="regeneratingArticleId === record.id"
|
||||
@publish="openPublish(record)"
|
||||
@edit="openEditor(record)"
|
||||
@preview="openPreview(record)"
|
||||
@copy="copyArticle(record.id)"
|
||||
@regenerate="handleRegenerate(record)"
|
||||
@delete="handleDelete(record.id)"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<a-pagination
|
||||
v-if="!shouldUseRecentFallback"
|
||||
class="templates-view__mobile-pagination"
|
||||
:current="page"
|
||||
:page-size="pageSize"
|
||||
:total="displayedArticleTotal"
|
||||
size="small"
|
||||
@change="handleTableChange"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a-drawer
|
||||
@@ -802,6 +883,10 @@ function refreshRecords(): void {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.templates-view__desktop-table :deep(.ant-table) {
|
||||
min-width: 1068px;
|
||||
}
|
||||
|
||||
.templates-view__filters-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -853,6 +938,91 @@ function refreshRecords(): void {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.templates-view__mobile-records {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.templates-view__mobile-record {
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #eef2f6;
|
||||
}
|
||||
|
||||
.templates-view__mobile-record:first-of-type {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.templates-view__mobile-record-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.templates-view__mobile-record-main h4 {
|
||||
margin: 0;
|
||||
color: #101828;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.templates-view__mobile-record-meta,
|
||||
.templates-view__mobile-record-status {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.templates-view__mobile-record-field {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.templates-view__mobile-record-field > span,
|
||||
.templates-view__mobile-record-actions > span {
|
||||
color: #98a2b3;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.templates-view__mobile-record-field > strong {
|
||||
min-width: 0;
|
||||
color: #1f2937;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.55;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.templates-view__mobile-record-status {
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.templates-view__mobile-record-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.templates-view__mobile-record-actions :deep(.table-actions-row) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.templates-view__mobile-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.templates-view__drawer-intro {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -1326,5 +1496,24 @@ function refreshRecords(): void {
|
||||
.templates-view__drawer-mode-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.templates-view__table-card {
|
||||
padding: 24px 16px 16px;
|
||||
}
|
||||
|
||||
.templates-view__desktop-table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.templates-view__mobile-records {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.templates-view__mobile-record-meta,
|
||||
.templates-view__mobile-record-status {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user