From c67d2e2d4b3ade4d30cea2caa933e9fae1dab5b6 Mon Sep 17 00:00:00 2001 From: zhx Date: Wed, 15 Jul 2026 19:57:01 +0800 Subject: [PATCH] fix(external-admin): refine authenticated branding --- .../src/components/BannerCreateDialog.jsx | 3 +- .../src/layout/ExternalAdminLayout.jsx | 15 ++++++++-- external-admin/src/pages/OverviewPage.jsx | 11 ------- external-admin/src/styles/index.css | 16 ++++++++++ src/shared/ui/TimeRangeFilter.jsx | 18 +++++++---- src/shared/ui/TimeRangeFilter.module.css | 30 +++++++++++-------- 6 files changed, 60 insertions(+), 33 deletions(-) diff --git a/external-admin/src/components/BannerCreateDialog.jsx b/external-admin/src/components/BannerCreateDialog.jsx index 340ecc2..077fcb6 100644 --- a/external-admin/src/components/BannerCreateDialog.jsx +++ b/external-admin/src/components/BannerCreateDialog.jsx @@ -22,7 +22,7 @@ const displayScopeOptions = [ ]; export function BannerCreateDialog({ loading, onClose, onSubmit, open }) { - const { locale, t } = useExternalI18n(); + const { direction, locale, t } = useExternalI18n(); const [form, setForm] = useState(initialForm); useEffect(() => setForm(initialForm), [open]); @@ -79,6 +79,7 @@ export function BannerCreateDialog({ loading, onClose, onSubmit, open }) { setForm({ ...form, sortOrder: event.target.value })} /> - {mobile && !current ? t("app.shortTitle") : t(current?.labelKey || "app.shortTitle")} + {mobile ? ( + + ) : ( + {t(current?.labelKey || "app.shortTitle")} + )} @@ -193,7 +204,7 @@ export function ExternalAdminLayout() { })} - + diff --git a/external-admin/src/pages/OverviewPage.jsx b/external-admin/src/pages/OverviewPage.jsx index 9945f85..ee249f3 100644 --- a/external-admin/src/pages/OverviewPage.jsx +++ b/external-admin/src/pages/OverviewPage.jsx @@ -55,20 +55,9 @@ const CAPABILITY_ICONS = { export default function OverviewPage() { const { session } = useExternalAuth(); const { t } = useExternalI18n(); - const enabledCount = EXTERNAL_CAPABILITIES.filter((item) => hasExternalCapability(session, item.code)).length; return ( - - {t("overview.welcome")} - {session.appName || session.appCode} - - {t("overview.currentApp")}{session.appName || session.appCode} ({session.appCode}) - {t("overview.account")}{session.account} - {t("overview.permissions")}{enabledCount} / {EXTERNAL_CAPABILITIES.length} - - - {t("overview.features")} {EXTERNAL_CAPABILITIES.map((item) => { const enabled = hasExternalCapability(session, item.code); diff --git a/external-admin/src/styles/index.css b/external-admin/src/styles/index.css index 89fdf4b..9cda337 100644 --- a/external-admin/src/styles/index.css +++ b/external-admin/src/styles/index.css @@ -224,6 +224,22 @@ body { letter-spacing: 0.03em; } +.external-mobile-brand { + max-width: min(48vw, 180px); + color: var(--primary-strong); + font-family: var(--font-display); + font-size: 15px; + font-weight: 750; + letter-spacing: 0.04em; +} + +.external-mobile-brand img, +.external-sidebar-brand img, +.external-change-password-brand img { + border-color: var(--primary-border); + box-shadow: 0 0 0 1px rgba(214, 181, 110, 0.08), 0 8px 24px rgba(0, 0, 0, 0.38); +} + .external-user-avatar { width: 34px !important; height: 34px !important; diff --git a/src/shared/ui/TimeRangeFilter.jsx b/src/shared/ui/TimeRangeFilter.jsx index cf369df..6a90077 100644 --- a/src/shared/ui/TimeRangeFilter.jsx +++ b/src/shared/ui/TimeRangeFilter.jsx @@ -49,7 +49,7 @@ const defaultMessages = { // withTime=false 时是纯日期区间选择器：隐藏时/分与小时级快捷区间， // 选中的开始/结束日分别取当天 00:00:00.000 与 23:59:59.999 的本地毫秒。 -export function TimeRangeFilter({ className = "", disabled = false, label = "时间", locale = "zh-CN", messages, onChange, value, withTime = true }) { +export function TimeRangeFilter({ className = "", direction = "ltr", disabled = false, label = "时间", locale = "zh-CN", messages, onChange, value, withTime = true }) { const copy = useMemo(() => ({ ...defaultMessages, ...messages }), [messages]); const range = useMemo(() => normalizeRange(value), [value]); const [anchorEl, setAnchorEl] = useState(null); @@ -69,6 +69,12 @@ export function TimeRangeFilter({ className = "", disabled = false, label = "时 const rangeDistance = formatLocalizedRangeDistance(draft.startMs, draft.endMs, withTime, copy); const weekLabels = useMemo(() => localizedWeekLabels(locale), [locale]); const hasRange = Boolean(range.startMs || range.endMs); + // CSS Modules do not pass through the external-admin Emotion RTL cache. Keep + // popover anchoring and directional glyphs explicit so Arabic mirrors as a unit. + const rtl = direction === "rtl"; + const horizontalOrigin = rtl ? "right" : "left"; + const PreviousMonthIcon = rtl ? ChevronRightOutlined : ChevronLeftOutlined; + const NextMonthIcon = rtl ? ChevronLeftOutlined : ChevronRightOutlined; useEffect(() => { if (!open) { @@ -183,9 +189,9 @@ export function TimeRangeFilter({ className = "", disabled = false, label = "时
@@ -233,11 +239,11 @@ export function TimeRangeFilter({ className = "", disabled = false, label = "时
changeMonth(-1)}> - + {monthTitle(viewDate, locale)} changeMonth(1)}> - +
diff --git a/src/shared/ui/TimeRangeFilter.module.css b/src/shared/ui/TimeRangeFilter.module.css index 7cc3c51..72447e1 100644 --- a/src/shared/ui/TimeRangeFilter.module.css +++ b/src/shared/ui/TimeRangeFilter.module.css @@ -9,7 +9,8 @@ width: auto; min-width: 132px !important; max-width: min(420px, 100%); - padding: 7px 28px 3px var(--control-padding-x) !important; + padding-block: 7px 3px !important; + padding-inline: var(--control-padding-x) 28px !important; border-color: var(--border) !important; background: var(--bg-input-strong) !important; box-shadow: none !important; @@ -29,8 +30,8 @@ .triggerMeta { position: absolute; - top: -7px; - left: var(--space-2); + inset-block-start: -7px; + inset-inline-start: var(--space-2); display: inline-flex; max-width: calc(100% - var(--space-4)); align-items: center; @@ -58,15 +59,15 @@ color: var(--text-primary); font-size: var(--control-font-size); line-height: var(--control-line-height); - text-align: left; + text-align: start; text-overflow: ellipsis; white-space: nowrap; } .triggerChevron { position: absolute; - top: 50%; - right: var(--space-2); + inset-block-start: 50%; + inset-inline-end: var(--space-2); color: var(--text-tertiary); transform: translateY(-50%); } @@ -94,8 +95,7 @@ .quickButton { min-width: 0 !important; - padding-right: var(--space-2) !important; - padding-left: var(--space-2) !important; + padding-inline: var(--space-2) !important; } .rangeFields { @@ -115,7 +115,7 @@ border-radius: var(--radius-control); background: var(--bg-input-strong); color: var(--text-primary); - text-align: left; + text-align: start; transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), @@ -275,11 +275,15 @@ } .dayRangeStart { - border-radius: var(--radius-control) 0 0 var(--radius-control); + border-radius: 0; + border-start-start-radius: var(--radius-control); + border-end-start-radius: var(--radius-control); } .dayRangeEnd { - border-radius: 0 var(--radius-control) var(--radius-control) 0; + border-radius: 0; + border-start-end-radius: var(--radius-control); + border-end-end-radius: var(--radius-control); } .dayRangeStart.dayRangeEnd { @@ -304,8 +308,8 @@ .daySelected::after { position: absolute; - top: 1px; - right: 3px; + inset-block-start: 1px; + inset-inline-end: 3px; color: currentcolor; content: attr(data-range-edge); font-size: 8px;