xiaoxia
138 lines
3.9 KiB
TypeScript
138 lines
3.9 KiB
TypeScript
/**
|
||
* 标题库页面 — V21 设计系统
|
||
* 两栏布局：左侧分类列表（220px）+ 右侧标题卡片网格（3列）
|
||
* 支持：标题卡片展示、AI 生成标题、复制/编辑/删除、收藏、分类筛选、搜索
|
||
* 对接后端真实 API（GET/POST/PUT/DELETE /titles）
|
||
*/
|
||
import React from "react"
|
||
import { useTitleLibrary } from "./hooks/useTitleLibrary"
|
||
import { useTitleEdit } from "./hooks/useTitleEdit"
|
||
import { useTitleAI } from "./hooks/useTitleAI"
|
||
import { CategorySidebar } from "./components/title-library/CategorySidebar"
|
||
import { FilterBar } from "./components/title-library/FilterBar"
|
||
import { TitleGrid } from "./components/title-library/TitleGrid"
|
||
import { CreateTitleModal } from "./components/title-library/CreateTitleModal"
|
||
import { AIGenerateModal } from "./components/title-library/AIGenerateModal"
|
||
import "./titles.css"
|
||
|
||
const TitleLibrary: React.FC = () => {
|
||
const {
|
||
categories,
|
||
activeCatId,
|
||
filteredTitles,
|
||
searchText,
|
||
filterType,
|
||
filterIndustry,
|
||
filterFrequency,
|
||
createMutation,
|
||
updateMutation,
|
||
setActiveCatId,
|
||
setSearchText,
|
||
setFilterType,
|
||
setFilterIndustry,
|
||
setFilterFrequency,
|
||
handleToggleFavorite,
|
||
handleCopy,
|
||
handleDelete,
|
||
} = useTitleLibrary()
|
||
|
||
const {
|
||
editingId,
|
||
editText,
|
||
setEditText,
|
||
createTitleModalOpen,
|
||
setCreateTitleModalOpen,
|
||
newTitleContent,
|
||
setNewTitleContent,
|
||
newTitleType,
|
||
setNewTitleType,
|
||
handleStartEdit,
|
||
handleSaveEdit,
|
||
handleCancelEdit,
|
||
handleCreateTitle,
|
||
handleCloseCreateModal,
|
||
} = useTitleEdit({ updateMutation, createMutation })
|
||
|
||
const {
|
||
aiModalOpen,
|
||
setAiModalOpen,
|
||
aiKeyword,
|
||
setAiKeyword,
|
||
aiLoading,
|
||
aiResults,
|
||
handleAIGenerate,
|
||
handleAdoptAITitle,
|
||
handleCopyAI,
|
||
handleCloseAIModal,
|
||
} = useTitleAI({ createMutation })
|
||
|
||
return (
|
||
<div className="xx-titles-page">
|
||
<div className="xx-titles-layout">
|
||
{/* 左侧：分类列表 */}
|
||
<CategorySidebar
|
||
categories={categories}
|
||
activeCatId={activeCatId}
|
||
onSelect={setActiveCatId}
|
||
/>
|
||
|
||
{/* 右侧：内容区 */}
|
||
<div className="xx-titles-content">
|
||
<FilterBar
|
||
searchText={searchText}
|
||
onSearchChange={setSearchText}
|
||
filterType={filterType}
|
||
onFilterTypeChange={setFilterType}
|
||
filterIndustry={filterIndustry}
|
||
onFilterIndustryChange={setFilterIndustry}
|
||
filterFrequency={filterFrequency}
|
||
onFilterFrequencyChange={setFilterFrequency}
|
||
onCreateClick={() => setCreateTitleModalOpen(true)}
|
||
onAIClick={() => setAiModalOpen(true)}
|
||
/>
|
||
|
||
<TitleGrid
|
||
titles={filteredTitles}
|
||
editingId={editingId}
|
||
editText={editText}
|
||
searchText={searchText}
|
||
onEditChange={setEditText}
|
||
onStartEdit={handleStartEdit}
|
||
onSaveEdit={handleSaveEdit}
|
||
onCancelEdit={handleCancelEdit}
|
||
onCopy={handleCopy}
|
||
onDelete={handleDelete}
|
||
onToggleFavorite={handleToggleFavorite}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 新建标题弹窗 */}
|
||
<CreateTitleModal
|
||
open={createTitleModalOpen}
|
||
newTitleContent={newTitleContent}
|
||
newTitleType={newTitleType}
|
||
onContentChange={setNewTitleContent}
|
||
onTypeChange={setNewTitleType}
|
||
onCancel={handleCloseCreateModal}
|
||
onSubmit={handleCreateTitle}
|
||
/>
|
||
|
||
{/* AI 生成标题弹窗 */}
|
||
<AIGenerateModal
|
||
open={aiModalOpen}
|
||
aiKeyword={aiKeyword}
|
||
aiLoading={aiLoading}
|
||
aiResults={aiResults}
|
||
onKeywordChange={setAiKeyword}
|
||
onGenerate={handleAIGenerate}
|
||
onCancel={handleCloseAIModal}
|
||
onCopy={handleCopyAI}
|
||
onAdopt={handleAdoptAITitle}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default TitleLibrary
|