This commit is contained in:
@@ -137,6 +137,9 @@ const enUS = {
|
||||
userFallback: 'Admin',
|
||||
logout: 'Logout',
|
||||
planFallback: 'Free Plan',
|
||||
openNavigation: 'Open navigation',
|
||||
collapseNavigation: 'Collapse navigation',
|
||||
expandNavigation: 'Expand navigation',
|
||||
aiUsageTitle: 'AI Point Usage',
|
||||
aiUsageRecent: 'Recent Usage',
|
||||
aiUsageEmpty: 'No AI point usage yet',
|
||||
|
||||
@@ -134,6 +134,9 @@ const zhCN = {
|
||||
userFallback: "管理员",
|
||||
logout: "退出",
|
||||
planFallback: "免费版",
|
||||
openNavigation: "打开导航",
|
||||
collapseNavigation: "收起导航",
|
||||
expandNavigation: "展开导航",
|
||||
aiUsageTitle: "AI 点数明细",
|
||||
aiUsageRecent: "最近消耗",
|
||||
aiUsageEmpty: "暂无 AI 点数流水",
|
||||
|
||||
@@ -1,18 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
BookOutlined,
|
||||
BarChartOutlined,
|
||||
CopyOutlined,
|
||||
DatabaseOutlined,
|
||||
DownOutlined,
|
||||
EditOutlined,
|
||||
FileTextOutlined,
|
||||
GlobalOutlined,
|
||||
HistoryOutlined,
|
||||
LineChartOutlined,
|
||||
LogoutOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
PictureOutlined,
|
||||
RadarChartOutlined,
|
||||
SearchOutlined,
|
||||
SendOutlined,
|
||||
ShopOutlined,
|
||||
SolutionOutlined,
|
||||
TagsOutlined,
|
||||
ThunderboltOutlined,
|
||||
UserOutlined,
|
||||
WalletOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
import { computed, type Component } from 'vue'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, type Component, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
@@ -24,6 +34,12 @@ const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const { locale, t } = useI18n()
|
||||
|
||||
const MOBILE_BREAKPOINT = '(max-width: 991px)'
|
||||
const siderCollapsed = ref(false)
|
||||
const mobileDrawerOpen = ref(false)
|
||||
const isMobile = ref(false)
|
||||
let mobileMediaQuery: MediaQueryList | null = null
|
||||
|
||||
const isMembershipBlocked = computed(() => authStore.isMembershipBlocked)
|
||||
const membershipBlockedMessage = computed(() =>
|
||||
authStore.membership?.blocked_reason === 'user_disabled'
|
||||
@@ -86,6 +102,16 @@ const selectedKeys = computed(() => {
|
||||
return effectiveNavKey.value ? [effectiveNavKey.value] : []
|
||||
})
|
||||
const pageTitle = computed(() => t(String(route.meta.titleKey ?? 'route.workspace.title')))
|
||||
const navigationButtonLabel = computed(() => {
|
||||
if (isMobile.value) {
|
||||
return t('shell.openNavigation')
|
||||
}
|
||||
|
||||
return siderCollapsed.value ? t('shell.expandNavigation') : t('shell.collapseNavigation')
|
||||
})
|
||||
const navigationButtonIcon = computed(() =>
|
||||
isMobile.value || siderCollapsed.value ? MenuUnfoldOutlined : MenuFoldOutlined,
|
||||
)
|
||||
|
||||
type HeaderBreadcrumb = {
|
||||
label: string
|
||||
@@ -121,21 +147,21 @@ const navSections = computed<NavSection[]>(() => {
|
||||
key: 'articleCreation',
|
||||
title: t('nav.articleCreation'),
|
||||
items: [
|
||||
{ key: '/articles/templates', label: t('nav.templates') },
|
||||
{ key: '/articles/custom', label: t('nav.custom') },
|
||||
{ key: '/articles/free-create', label: t('nav.freeCreate') },
|
||||
{ key: '/articles/imitations', label: t('nav.imitation') },
|
||||
{ key: '/articles/templates', label: t('nav.templates'), icon: FileTextOutlined },
|
||||
{ key: '/articles/custom', label: t('nav.custom'), icon: ThunderboltOutlined },
|
||||
{ key: '/articles/free-create', label: t('nav.freeCreate'), icon: EditOutlined },
|
||||
{ key: '/articles/imitations', label: t('nav.imitation'), icon: CopyOutlined },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'brandManagement',
|
||||
title: t('nav.brandManagement'),
|
||||
items: [{ key: '/brands', label: t('nav.brands'), icon: SearchOutlined }],
|
||||
items: [{ key: '/brands', label: t('nav.brands'), icon: TagsOutlined }],
|
||||
},
|
||||
{
|
||||
key: 'tracking',
|
||||
title: t('nav.tracking'),
|
||||
items: [{ key: '/tracking', label: t('nav.trackingDetail'), icon: RadarChartOutlined }],
|
||||
items: [{ key: '/tracking', label: t('nav.trackingDetail'), icon: LineChartOutlined }],
|
||||
},
|
||||
{
|
||||
key: 'contentManagement',
|
||||
@@ -143,19 +169,19 @@ const navSections = computed<NavSection[]>(() => {
|
||||
items: [
|
||||
{ key: '/media', label: t('nav.media'), icon: GlobalOutlined },
|
||||
{ key: '/publish-management', label: t('nav.publishManagement'), icon: SendOutlined },
|
||||
{ key: '/knowledge', label: t('nav.knowledge'), icon: BookOutlined },
|
||||
{ key: '/knowledge', label: t('nav.knowledge'), icon: DatabaseOutlined },
|
||||
{ key: '/images', label: t('nav.images'), icon: PictureOutlined },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'kolMarket',
|
||||
title: t('nav.kolMarket'),
|
||||
items: [{ key: '/kol/marketplace', label: t('nav.kolMarketplace') }],
|
||||
items: [{ key: '/kol/marketplace', label: t('nav.kolMarketplace'), icon: ShopOutlined }],
|
||||
},
|
||||
{
|
||||
key: 'personalCenter',
|
||||
title: t('nav.personalCenter'),
|
||||
items: [{ key: '/account/ai-points', label: t('nav.aiPointUsage'), icon: HistoryOutlined }],
|
||||
items: [{ key: '/account/ai-points', label: t('nav.aiPointUsage'), icon: WalletOutlined }],
|
||||
},
|
||||
]
|
||||
|
||||
@@ -164,9 +190,9 @@ const navSections = computed<NavSection[]>(() => {
|
||||
key: 'kolWorkspace',
|
||||
title: t('nav.kolWorkspace'),
|
||||
items: [
|
||||
{ key: '/kol/manage', label: t('nav.kolManage') },
|
||||
{ key: '/kol/dashboard', label: t('nav.kolDashboard') },
|
||||
{ key: '/kol/profile', label: t('nav.kolProfile') },
|
||||
{ key: '/kol/manage', label: t('nav.kolManage'), icon: SolutionOutlined },
|
||||
{ key: '/kol/dashboard', label: t('nav.kolDashboard'), icon: BarChartOutlined },
|
||||
{ key: '/kol/profile', label: t('nav.kolProfile'), icon: UserOutlined },
|
||||
],
|
||||
})
|
||||
}
|
||||
@@ -212,23 +238,76 @@ const headerBreadcrumbs = computed<HeaderBreadcrumb[]>(() => {
|
||||
})
|
||||
|
||||
function go(path: string): void {
|
||||
mobileDrawerOpen.value = false
|
||||
void router.push(path)
|
||||
}
|
||||
|
||||
function toggleNavigation(): void {
|
||||
if (isMobile.value) {
|
||||
mobileDrawerOpen.value = true
|
||||
return
|
||||
}
|
||||
|
||||
siderCollapsed.value = !siderCollapsed.value
|
||||
}
|
||||
|
||||
function syncMobileState(event?: MediaQueryListEvent | MediaQueryList): void {
|
||||
const matches = Boolean(event?.matches ?? mobileMediaQuery?.matches)
|
||||
isMobile.value = matches
|
||||
|
||||
if (!matches) {
|
||||
mobileDrawerOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleLogout(): Promise<void> {
|
||||
await authStore.logout()
|
||||
await router.replace('/login')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
mobileDrawerOpen.value = false
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
mobileMediaQuery = window.matchMedia(MOBILE_BREAKPOINT)
|
||||
syncMobileState(mobileMediaQuery)
|
||||
mobileMediaQuery.addEventListener('change', syncMobileState)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
mobileMediaQuery?.removeEventListener('change', syncMobileState)
|
||||
mobileMediaQuery = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-layout class="admin-layout">
|
||||
<a-layout-sider width="250" theme="light" class="admin-sider">
|
||||
<a-layout-sider
|
||||
v-model:collapsed="siderCollapsed"
|
||||
width="250"
|
||||
:collapsed-width="80"
|
||||
:trigger="null"
|
||||
collapsible
|
||||
theme="light"
|
||||
class="admin-sider"
|
||||
:class="{ 'admin-sider--collapsed': siderCollapsed }"
|
||||
>
|
||||
<div class="admin-brand">
|
||||
{{ t('app.name') }}
|
||||
<span class="admin-brand__full">{{ t('app.name') }}</span>
|
||||
<span class="admin-brand__short">省</span>
|
||||
</div>
|
||||
|
||||
<a-menu mode="inline" theme="light" :selected-keys="selectedKeys" class="admin-menu">
|
||||
<a-menu
|
||||
mode="inline"
|
||||
theme="light"
|
||||
:selected-keys="selectedKeys"
|
||||
:inline-collapsed="siderCollapsed"
|
||||
class="admin-menu"
|
||||
>
|
||||
<template v-for="section in navSections" :key="section.key">
|
||||
<template v-if="section.title">
|
||||
<a-menu-item-group :title="section.title">
|
||||
@@ -251,12 +330,27 @@ async function handleLogout(): Promise<void> {
|
||||
|
||||
<a-layout
|
||||
class="admin-main-layout"
|
||||
:class="{ 'admin-main-layout--blocked': isMembershipBlocked }"
|
||||
:class="{
|
||||
'admin-main-layout--collapsed': siderCollapsed,
|
||||
'admin-main-layout--blocked': isMembershipBlocked,
|
||||
}"
|
||||
>
|
||||
<a-layout-header
|
||||
class="admin-header"
|
||||
:class="{ 'admin-header--blocked': isMembershipBlocked }"
|
||||
>
|
||||
<a-button
|
||||
type="text"
|
||||
class="admin-shell-trigger"
|
||||
:aria-label="navigationButtonLabel"
|
||||
:title="navigationButtonLabel"
|
||||
@click="toggleNavigation"
|
||||
>
|
||||
<component :is="navigationButtonIcon" />
|
||||
</a-button>
|
||||
|
||||
<div v-if="!isMembershipBlocked" class="admin-mobile-title">{{ pageTitle }}</div>
|
||||
|
||||
<nav v-if="!isMembershipBlocked" class="admin-header-breadcrumb" aria-label="Breadcrumb">
|
||||
<span
|
||||
v-for="(crumb, index) in headerBreadcrumbs"
|
||||
@@ -353,6 +447,39 @@ async function handleLogout(): Promise<void> {
|
||||
<router-view v-else />
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
|
||||
<a-drawer
|
||||
v-model:open="mobileDrawerOpen"
|
||||
placement="left"
|
||||
width="min(86vw, 320px)"
|
||||
class="admin-mobile-drawer"
|
||||
:closable="false"
|
||||
:body-style="{ padding: 0 }"
|
||||
>
|
||||
<div class="admin-brand admin-brand--drawer">
|
||||
{{ t('app.name') }}
|
||||
</div>
|
||||
|
||||
<a-menu mode="inline" theme="light" :selected-keys="selectedKeys" class="admin-menu">
|
||||
<template v-for="section in navSections" :key="section.key">
|
||||
<template v-if="section.title">
|
||||
<a-menu-item-group :title="section.title">
|
||||
<a-menu-item v-for="item in section.items" :key="item.key" @click="go(item.key)">
|
||||
<template v-if="item.icon" #icon><component :is="item.icon" /></template>
|
||||
{{ item.label }}
|
||||
</a-menu-item>
|
||||
</a-menu-item-group>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<a-menu-item v-for="item in section.items" :key="item.key" @click="go(item.key)">
|
||||
<template v-if="item.icon" #icon><component :is="item.icon" /></template>
|
||||
{{ item.label }}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-menu>
|
||||
</a-drawer>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
@@ -371,11 +498,22 @@ async function handleLogout(): Promise<void> {
|
||||
background: #fff;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
z-index: 10;
|
||||
transition:
|
||||
width 0.2s ease,
|
||||
flex-basis 0.2s ease,
|
||||
max-width 0.2s ease,
|
||||
min-width 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-main-layout {
|
||||
margin-left: 250px;
|
||||
isolation: isolate;
|
||||
min-width: 0;
|
||||
transition: margin-left 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-main-layout--collapsed {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.admin-main-layout--blocked {
|
||||
@@ -395,6 +533,28 @@ async function handleLogout(): Promise<void> {
|
||||
font-weight: 800;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
margin 0.2s ease,
|
||||
width 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-brand__short {
|
||||
display: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.admin-sider--collapsed .admin-brand {
|
||||
width: 40px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.admin-sider--collapsed .admin-brand__full {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-sider--collapsed .admin-brand__short {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.admin-menu {
|
||||
@@ -402,14 +562,23 @@ async function handleLogout(): Promise<void> {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.admin-sider--collapsed :deep(.ant-menu-item-group-title) {
|
||||
height: 12px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
padding: 0 24px;
|
||||
height: 64px;
|
||||
padding: 0 24px 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
z-index: 100;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
}
|
||||
@@ -418,6 +587,34 @@ async function handleLogout(): Promise<void> {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.admin-shell-trigger.ant-btn {
|
||||
flex: 0 0 auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #595959;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.admin-shell-trigger.ant-btn:hover {
|
||||
color: #1677ff;
|
||||
background: #f0f8ff;
|
||||
}
|
||||
|
||||
.admin-mobile-title {
|
||||
display: none;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: #141414;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-header-breadcrumb {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
@@ -579,6 +776,7 @@ async function handleLogout(): Promise<void> {
|
||||
z-index: 0;
|
||||
margin: 24px;
|
||||
min-height: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-content--blocked {
|
||||
@@ -621,4 +819,68 @@ async function handleLogout(): Promise<void> {
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.admin-sider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-main-layout,
|
||||
.admin-main-layout--collapsed {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.admin-header-breadcrumb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-mobile-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.admin-header-actions {
|
||||
gap: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.quota-pill {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.admin-content--blocked {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.admin-header {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.admin-shell-trigger.ant-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.user-name,
|
||||
.user-dropdown-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-dropdown-trigger {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,10 +23,15 @@ html,
|
||||
body,
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Typography Utilities */
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
@@ -157,6 +162,15 @@ body,
|
||||
.app-root {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ant-app,
|
||||
.ant-layout,
|
||||
.ant-layout-content,
|
||||
.ant-layout .ant-layout {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Workspace Layout Specifics */
|
||||
@@ -306,3 +320,160 @@ body,
|
||||
padding: 0 20px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.ant-drawer-content-wrapper {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.ant-table-wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table-container,
|
||||
.ant-table-wrapper .ant-table-content,
|
||||
.ant-table-wrapper .ant-table-body {
|
||||
max-width: 100%;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table-content,
|
||||
.ant-table-wrapper .ant-table-body {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.section-heading,
|
||||
.page-title-card__header,
|
||||
.page-title-card__actions,
|
||||
.table-actions-row,
|
||||
[class$='__header'],
|
||||
[class$='__table-head'],
|
||||
[class*='__toolbar'],
|
||||
[class*='-toolbar'],
|
||||
[class*='__filters-inline'],
|
||||
[class*='__filters'] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.section-heading,
|
||||
.page-title-card__header {
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.page-title-card__header {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.page-title-card__actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-title-card__actions > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.page-title-card__copy h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.ant-table-wrapper {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-spin-nested-loading,
|
||||
.ant-table-wrapper .ant-spin-container,
|
||||
.ant-table-wrapper .ant-table,
|
||||
.ant-table-wrapper .ant-table-container {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ant-tabs-nav {
|
||||
margin-bottom: 14px !important;
|
||||
}
|
||||
|
||||
.ant-tabs-nav-wrap {
|
||||
overflow: auto !important;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.ant-tabs-nav-wrap::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-tabs-nav-list {
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.ant-form,
|
||||
.ant-form-item,
|
||||
.ant-picker,
|
||||
.ant-select,
|
||||
.ant-input,
|
||||
.ant-input-number,
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-space,
|
||||
[class*='__filter'],
|
||||
[class*='filter-item'] {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ant-form .ant-row,
|
||||
.ant-space,
|
||||
[class*='__filters'],
|
||||
[class*='__filters-inline'] {
|
||||
row-gap: 12px;
|
||||
}
|
||||
|
||||
.ant-space {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ant-modal {
|
||||
max-width: calc(100vw - 24px) !important;
|
||||
margin: 12px auto !important;
|
||||
}
|
||||
|
||||
.ant-modal-root .ant-modal-wrap {
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
max-height: calc(100dvh - 180px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.login-screen__form-container {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 14px !important;
|
||||
}
|
||||
|
||||
.ant-table-wrapper {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table-actions-row {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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