refactor(admin-web): unify page headers with shared title card

Introduce .page-title-card style and migrate Images, Knowledge,
KolDashboard, KolManage, KolProfile views to the shared header layout.
Add subtitle copy for KOL dashboard and manage views.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-25 21:38:45 +08:00
parent 40d9a6cc63
commit 2862aff72b
8 changed files with 111 additions and 110 deletions
+19 -28
View File
@@ -352,22 +352,13 @@ async function confirmDeleteImage(image: ImageAssetItem) {
<template>
<div class="images-page">
<div class="images-page__hero">
<h2>{{ t("images.title") }}</h2>
<p>{{ t("images.description") }}</p>
</div>
<div class="images-main-card">
<div class="images-toolbar">
<div class="images-toolbar__left">
<a-input-search
v-model:value="searchKeyword"
:placeholder="t('images.searchPlaceholder')"
style="width: 300px"
allow-clear
/>
<section class="page-title-card">
<div class="page-title-card__header">
<div class="page-title-card__copy">
<h2>{{ t("images.title") }}</h2>
<p>{{ t("images.description") }}</p>
</div>
<div class="images-toolbar__right">
<div class="page-title-card__actions">
<a-button type="primary" :disabled="imageUploadBusy" @click="triggerUpload">
<template #icon><UploadOutlined /></template>
{{ t("images.uploadBtn") }}
@@ -383,6 +374,19 @@ async function confirmDeleteImage(image: ImageAssetItem) {
/>
</div>
</div>
</section>
<div class="images-main-card">
<div class="images-toolbar">
<div class="images-toolbar__left">
<a-input-search
v-model:value="searchKeyword"
:placeholder="t('images.searchPlaceholder')"
style="width: 300px"
allow-clear
/>
</div>
</div>
<div class="images-layout-inner">
<aside class="images-sidebar">
@@ -579,19 +583,6 @@ async function confirmDeleteImage(image: ImageAssetItem) {
gap: 20px;
}
.images-page__hero h2 {
margin: 0;
color: #111827;
font-size: 18px;
font-weight: 700;
}
.images-page__hero p {
margin: 0;
color: #6b7280;
font-size: 13px;
}
.images-main-card {
background: #fff;
border-radius: 12px;