顶栏改为知乎式两行结构:第一行左侧站点 LOGO、右侧当前用户头像, 第二行只保留正文工具条并居中,同时移除「Jio / 写文章」字样。 - bootstrap payload 新增 site/viewer 身份字段(复用 jio_get_site_logo_url 与 jio_get_avatar_url,前端不拼 URL、不做权限判断) - 拆分 draft 类型、TinyMCE 块运行时、顶栏组件,index.tsx 1065 → 735 行 - 清理死代码:未调用的 keepCaretInsideCode、永远无法打开的代码语言弹窗 (setCodeLanguage 只会收到 null,codeTargetRef 从未赋值)及其样式, 以及顶栏移除后失效的 bar-left/brand/mode/save-draft/ghost/primary 规则 - 契约测试、本地预览与截图脚本同步到新 DOM Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
/**
|
|
* 创作页顶栏(第一行):站点 LOGO 在左,用户头像在右。
|
|
*
|
|
* 与知乎写作页一致:品牌与身份常驻顶部,正文工具条单独占第二行并居中,
|
|
* 避免品牌文字挤占工具条的可视宽度。
|
|
*
|
|
* @package Jio
|
|
*/
|
|
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
type Props = {
|
|
centerUrl: string;
|
|
site: { home?: string; name?: string; logo?: string };
|
|
viewer: { avatar?: string };
|
|
};
|
|
|
|
export function StudioMasthead({ centerUrl, site, viewer }: Props) {
|
|
const brandName = String(site.name || '');
|
|
const avatarUrl = String(viewer.avatar || '');
|
|
const avatarHref = centerUrl || '/';
|
|
|
|
return (
|
|
<header className="jio-creator__masthead">
|
|
<div className="jio-creator__masthead-left">
|
|
<a className="jio-creator__back" href={centerUrl || '/'} aria-label={__('返回作者中心', 'jio')}>
|
|
<i className="fa fas fa-angle-left" aria-hidden="true" />
|
|
</a>
|
|
<a
|
|
className="jio-creator__brand"
|
|
href={String(site.home || '/')}
|
|
aria-label={brandName || __('返回首页', 'jio')}
|
|
>
|
|
{site.logo ? (
|
|
<img className="jio-creator__brand-logo" src={String(site.logo)} alt={brandName} />
|
|
) : (
|
|
<span className="jio-creator__brand-text">{brandName}</span>
|
|
)}
|
|
</a>
|
|
</div>
|
|
|
|
<a className="jio-creator__me" href={avatarHref} aria-label={__('返回作者中心', 'jio')}>
|
|
{avatarUrl ? (
|
|
<img className="jio-creator__me-avatar" src={avatarUrl} alt="" width={32} height={32} />
|
|
) : (
|
|
<span className="jio-creator__me-avatar is-placeholder" aria-hidden="true">
|
|
<i className="fa fas fa-user" />
|
|
</span>
|
|
)}
|
|
</a>
|
|
</header>
|
|
);
|
|
}
|