Files
wordpress-theme-aksrt/assets/creator-studio/src/components/studio-masthead.tsx
T
kate522andClaude Opus 5 1970db0b56 feat(creator-studio): two-row masthead with site logo and user avatar
顶栏改为知乎式两行结构:第一行左侧站点 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>
2026-11-08 22:20:10 +08:00

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>
);
}