feat(frontend): add posting compose component suite
新增了发帖相关的完整组件模块：包括顶部导航栏ComposeHeader、正文编辑区ComposeDocument，以及发布设置栏ComposeContextBar，同时添加了vite依赖缓存配置文件。
This commit is contained in:
@@ -774,14 +774,36 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
<div className="article-editor-body">
|
||||
{mode === 'rich' ? (
|
||||
<div className="article-editor-pane article-editor-pane--rich">
|
||||
<div className="article-editor-scroll">
|
||||
<div
|
||||
className="article-editor-scroll"
|
||||
onPointerDown={e => {
|
||||
// 点击编辑器外空白区域时，聚焦并将光标置于文末
|
||||
if (editor && (e.target === e.currentTarget || (e.target as HTMLElement).classList.contains('article-editor-content'))) {
|
||||
e.preventDefault();
|
||||
editor.chain().focus('end').run();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<EditorContent editor={editor} className="article-editor-content" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="article-editor-markdown">
|
||||
<div className="article-editor-pane article-editor-pane--source">
|
||||
<div className="article-editor-scroll">
|
||||
<div
|
||||
className="article-editor-scroll"
|
||||
onPointerDown={e => {
|
||||
if (e.target === e.currentTarget) {
|
||||
e.preventDefault();
|
||||
const ta = markdownRef.current;
|
||||
if (ta) {
|
||||
ta.focus();
|
||||
const len = ta.value.length;
|
||||
ta.setSelectionRange(len, len);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<textarea
|
||||
ref={markdownRef}
|
||||
className="article-editor-markdown-input"
|
||||
|
||||
105
frontend/src/components/compose/ComposeContextBar.tsx
Normal file
105
frontend/src/components/compose/ComposeContextBar.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import TagInput from '../TagInput';
|
||||
import BoardIconDisplay from '../BoardIconDisplay';
|
||||
import { getBoardThemeIndex } from '../../utils/boardTheme';
|
||||
import type { Board, ForumLimitsPublic } from '../../api/types';
|
||||
|
||||
export type PostType = 'normal' | 'question';
|
||||
|
||||
interface Props {
|
||||
isEdit: boolean;
|
||||
postType: PostType;
|
||||
onPostTypeChange: (type: PostType) => void;
|
||||
boards: Board[];
|
||||
boardId: string;
|
||||
onBoardChange: (boardId: string) => void;
|
||||
tags: string;
|
||||
onTagsChange: (tags: string) => void;
|
||||
limits: ForumLimitsPublic;
|
||||
}
|
||||
|
||||
/**
|
||||
* 发帖页发布设置模块：帖子类型、板块、标签三行配置。
|
||||
* 受控组件，所有状态由父级持有。
|
||||
*/
|
||||
export default function ComposeContextBar({
|
||||
isEdit,
|
||||
postType,
|
||||
onPostTypeChange,
|
||||
boards,
|
||||
boardId,
|
||||
onBoardChange,
|
||||
tags,
|
||||
onTagsChange,
|
||||
limits,
|
||||
}: Props) {
|
||||
return (
|
||||
<section className="compose-context" aria-label="发布设置">
|
||||
<div className="compose-context-row">
|
||||
<span className="compose-context-label">类型</span>
|
||||
<div className="compose-type-field">
|
||||
<div className="compose-type-pills" role="radiogroup" aria-label="帖子类型">
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={postType === 'normal'}
|
||||
className={`compose-type-pill${postType === 'normal' ? ' active' : ''}`}
|
||||
onClick={() => onPostTypeChange('normal')}
|
||||
>
|
||||
讨论
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={postType === 'question'}
|
||||
className={`compose-type-pill${postType === 'question' ? ' active' : ''}`}
|
||||
onClick={() => onPostTypeChange('question')}
|
||||
>
|
||||
问答
|
||||
</button>
|
||||
</div>
|
||||
{postType === 'question' && (
|
||||
<span className="compose-type-hint">问答可标记解决状态</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="compose-context-row">
|
||||
<span className="compose-context-label">板块</span>
|
||||
<div
|
||||
className="compose-board-pills"
|
||||
role="listbox"
|
||||
aria-label={isEdit ? '修改板块' : '选择板块'}
|
||||
>
|
||||
{boards.map(b => {
|
||||
const themeIdx = getBoardThemeIndex(b);
|
||||
const isActive = String(b.id) === boardId;
|
||||
return (
|
||||
<button
|
||||
key={b.id}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={isActive}
|
||||
className={`compose-board-pill compose-board-pill--${themeIdx}${isActive ? ' active' : ''}`}
|
||||
onClick={() => onBoardChange(String(b.id))}
|
||||
>
|
||||
<BoardIconDisplay
|
||||
board={b}
|
||||
className="compose-board-icon"
|
||||
/>
|
||||
<span>{b.name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="compose-context-row compose-context-row--tags">
|
||||
<span className="compose-context-label">标签</span>
|
||||
<TagInput
|
||||
value={tags}
|
||||
onChange={onTagsChange}
|
||||
placeholder="添加标签，回车确认"
|
||||
maxLength={limits.post_tags_max > 0 ? limits.post_tags_max : undefined}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
48
frontend/src/components/compose/ComposeDocument.tsx
Normal file
48
frontend/src/components/compose/ComposeDocument.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import ArticleEditor from '../ArticleEditor';
|
||||
import type { ForumLimitsPublic } from '../../api/types';
|
||||
import type { PostType } from './ComposeContextBar';
|
||||
|
||||
interface Props {
|
||||
postType: PostType;
|
||||
title: string;
|
||||
onTitleChange: (title: string) => void;
|
||||
content: string;
|
||||
onContentChange: (content: string) => void;
|
||||
limits: ForumLimitsPublic;
|
||||
/** 渲染于标题与编辑器之间的元信息条（如发布设置） */
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* 发帖页正文写作模块：标题输入框 + 富文本编辑器。
|
||||
* 受控组件，标题与正文状态由父级持有。
|
||||
*/
|
||||
export default function ComposeDocument({
|
||||
postType,
|
||||
title,
|
||||
onTitleChange,
|
||||
content,
|
||||
onContentChange,
|
||||
limits,
|
||||
children,
|
||||
}: Props) {
|
||||
return (
|
||||
<div className="compose-document">
|
||||
<input
|
||||
className="compose-title"
|
||||
type="text"
|
||||
placeholder={postType === 'question' ? '用一句话描述你的问题…' : '输入文章标题…'}
|
||||
value={title}
|
||||
onChange={e => onTitleChange(e.target.value)}
|
||||
maxLength={limits.post_title_max > 0 ? limits.post_title_max : undefined}
|
||||
/>
|
||||
{children}
|
||||
<ArticleEditor
|
||||
value={content}
|
||||
onChange={onContentChange}
|
||||
placeholder="开始写作。按回车分段，选中文字后用工具栏设置格式。"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
frontend/src/components/compose/ComposeHeader.tsx
Normal file
58
frontend/src/components/compose/ComposeHeader.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { ArrowLeft, Send } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
isEdit: boolean;
|
||||
publishing: boolean;
|
||||
/** 编辑场景下展示的可编辑剩余时间提示；新建时为空 */
|
||||
editWindowHint: string;
|
||||
/** 新建场景下展示的本地草稿提示；编辑时为空 */
|
||||
draftHint: string;
|
||||
onBack: () => void;
|
||||
onPublish: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 发帖页顶部栏模块：返回按钮、页面标题、草稿/编辑时限提示与发布动作。
|
||||
* 仅承担展示与事件回传，不持有业务状态。
|
||||
*/
|
||||
export default function ComposeHeader({
|
||||
isEdit,
|
||||
publishing,
|
||||
editWindowHint,
|
||||
draftHint,
|
||||
onBack,
|
||||
onPublish,
|
||||
}: Props) {
|
||||
return (
|
||||
<header className="compose-header">
|
||||
<div className="compose-header-left">
|
||||
<button type="button" className="compose-back" onClick={onBack}>
|
||||
<ArrowLeft size={16} />
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 className="compose-header-title">{isEdit ? '编辑帖子' : '写新帖'}</h1>
|
||||
{editWindowHint && (
|
||||
<span className="compose-draft-hint" title={editWindowHint}>
|
||||
{editWindowHint}
|
||||
</span>
|
||||
)}
|
||||
{!isEdit && draftHint && (
|
||||
<span className="compose-draft-hint" title={draftHint}>
|
||||
{draftHint}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="compose-header-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="compose-publish-btn"
|
||||
disabled={publishing}
|
||||
onClick={onPublish}
|
||||
>
|
||||
<Send size={16} />
|
||||
<span>{publishing ? (isEdit ? '保存中…' : '发布中…') : (isEdit ? '保存修改' : '发布')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user