668 lines
31 KiB
TypeScript
668 lines
31 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import type { Asset, AssetCategory, AssetCategoryDef, AssetFileType } from '@/types';
|
|
import { assetsAPI } from '@/api';
|
|
import { formatBjTime } from '@/utils/datetime';
|
|
import './AssetsPage.css';
|
|
|
|
const fileTypeLabels: Record<string, { label: string; bg: string; color: string }> = {
|
|
word: { label: 'Word', bg: '#E8F1FF', color: '#2563EB' },
|
|
excel: { label: 'Excel', bg: '#E8F8EE', color: '#219B5E' },
|
|
ppt: { label: 'PPT', bg: '#FEF2E2', color: '#D97706' },
|
|
pdf: { label: 'PDF', bg: '#FDEBEB', color: '#DC2626' },
|
|
txt: { label: 'TXT', bg: '#F1F3F7', color: '#64748B' },
|
|
md: { label: 'MD', bg: '#E8EEF8', color: '#3B82F6' },
|
|
doc: { label: 'DOC', bg: '#E6F4EA', color: '#0D9488' },
|
|
other: { label: '其他', bg: '#F1F3F7', color: '#64748B' },
|
|
};
|
|
|
|
// SVG Icons
|
|
const CloseIcon = () => (
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
);
|
|
|
|
const DownloadIcon = () => (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
|
|
</svg>
|
|
);
|
|
|
|
const TrashIcon = () => (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
|
</svg>
|
|
);
|
|
|
|
const getFileTypeInfo = (ft?: string) => {
|
|
return fileTypeLabels[ft || 'other'] || fileTypeLabels.other;
|
|
};
|
|
|
|
function formatSize(bytes?: number): string {
|
|
if (!bytes) return '--';
|
|
if (bytes < 1024) return `${bytes}B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
|
|
return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
|
|
}
|
|
|
|
function formatDate(dateStr: string): string {
|
|
return formatBjTime(dateStr);
|
|
}
|
|
|
|
// 将文件扩展名或API返回的file_type映射到前端fileType标签
|
|
function mapFileTypeToLabel(ft: string): string {
|
|
const mapping: Record<string, string> = {
|
|
pdf: 'pdf', docx: 'word', doc: 'word', xlsx: 'excel', xls: 'excel',
|
|
pptx: 'ppt', ppt: 'ppt', csv: 'txt', md: 'md', txt: 'txt',
|
|
word: 'word', excel: 'excel',
|
|
};
|
|
return mapping[ft] || 'other';
|
|
}
|
|
|
|
// Preview Modal Component
|
|
interface PreviewModalProps {
|
|
asset: Asset;
|
|
onClose: () => void;
|
|
onDelete: (id: string) => void;
|
|
}
|
|
|
|
const PreviewModal: React.FC<PreviewModalProps> = ({ asset, onClose, onDelete }) => {
|
|
const [editing, setEditing] = useState(false);
|
|
const [editContent, setEditContent] = useState('');
|
|
const [showOnlinePreview, setShowOnlinePreview] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
const isTextFile = asset.category === 'file' && ['txt', 'other', 'md', 'doc'].includes(asset.fileType || '');
|
|
const isImage = asset.category === 'image';
|
|
const isVideo = asset.category === 'video';
|
|
const isAudio = asset.category === 'audio';
|
|
const isTextEditable = asset.category === 'file' && (asset.fileType === 'txt' || asset.fileType === 'other' || asset.fileType === 'md' || asset.fileType === 'doc');
|
|
const isOfficeDoc = asset.category === 'file' && ['word', 'excel', 'ppt'].includes(asset.fileType || '');
|
|
const isPdf = asset.category === 'file' && asset.fileType === 'pdf';
|
|
|
|
const handleDownload = () => {
|
|
// Simulate download - in production would use asset.url
|
|
const a = document.createElement('a');
|
|
a.href = '#' + asset.id;
|
|
a.download = asset.name;
|
|
a.click();
|
|
};
|
|
|
|
const handleStartEdit = () => {
|
|
setEditContent(asset.description || '');
|
|
setEditing(true);
|
|
};
|
|
|
|
const handleSaveEdit = () => {
|
|
// In production, would call assetsAPI.updateAsset
|
|
setEditing(false);
|
|
};
|
|
|
|
// 在线预览内容渲染
|
|
const renderOnlinePreview = () => {
|
|
if (!showOnlinePreview) return null;
|
|
const ft = asset.fileType || 'other';
|
|
|
|
// PDF 使用浏览器原生预览
|
|
if (ft === 'pdf' && asset.url) {
|
|
return (
|
|
<div className="assets-preview-online">
|
|
<div className="assets-preview-online-toolbar">
|
|
<span>在线预览：{asset.name}</span>
|
|
<button className="assets-btn assets-btn-cancel" onClick={() => setShowOnlinePreview(false)} style={{fontSize:'var(--text-xs)'}}>
|
|
关闭预览
|
|
</button>
|
|
</div>
|
|
<iframe
|
|
src={asset.url}
|
|
style={{width:'100%',height:'600px',border:'1px solid var(--color-border)',borderRadius:'0 0 var(--radius-md) var(--radius-md)'}}
|
|
title={`预览 ${asset.name}`}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Office文档(docx/xlsx/pptx) 使用微软Office Online查看器
|
|
if (asset.url && ['word', 'excel', 'ppt'].includes(ft)) {
|
|
const encodedUrl = encodeURIComponent(asset.url);
|
|
const officeViewerUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodedUrl}`;
|
|
return (
|
|
<div className="assets-preview-online">
|
|
<div className="assets-preview-online-toolbar">
|
|
<span>在线预览：{asset.name}</span>
|
|
<button className="assets-btn assets-btn-cancel" onClick={() => setShowOnlinePreview(false)} style={{fontSize:'var(--text-xs)'}}>
|
|
关闭预览
|
|
</button>
|
|
</div>
|
|
<iframe
|
|
src={officeViewerUrl}
|
|
style={{width:'100%',height:'600px',border:'1px solid var(--color-border)',borderRadius:'0 0 var(--radius-md) var(--radius-md)'}}
|
|
title={`预览 ${asset.name}`}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 文本类文件的在线预览
|
|
if (['txt', 'word', 'other', 'md', 'doc'].includes(ft)) {
|
|
const previewContent = (asset as any).content || asset.description || '（文件内容预览）\n\n该文件暂无内容预览。\n\n--- 在线预览模式 ---\n您正在查看文件的只读预览。';
|
|
return (
|
|
<div className="assets-preview-online">
|
|
<div className="assets-preview-online-toolbar">
|
|
<span>在线预览：{asset.name}</span>
|
|
<button className="assets-btn assets-btn-cancel" onClick={() => setShowOnlinePreview(false)} style={{fontSize:'var(--text-xs)'}}>
|
|
关闭预览
|
|
</button>
|
|
</div>
|
|
<div className="assets-preview-reader">
|
|
<pre style={{whiteSpace:'pre-wrap',fontFamily:'var(--font-mono)',fontSize:'var(--text-sm)',lineHeight:1.8,padding:'var(--space-xl)',color:'var(--color-text-primary)'}}>
|
|
{previewContent}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
return (
|
|
<div className="assets-modal-overlay" onClick={onClose}>
|
|
<div className="assets-modal" onClick={e => e.stopPropagation()}>
|
|
<div className="assets-modal-header">
|
|
<h3 className="assets-modal-title">{asset.name}</h3>
|
|
<button className="assets-modal-close" onClick={onClose}><CloseIcon /></button>
|
|
</div>
|
|
<div className="assets-modal-body">
|
|
<div className="assets-modal-meta">
|
|
<span className="assets-modal-type">
|
|
{asset.category === 'file' && (
|
|
<span className="asset-file-type" style={{ background: getFileTypeInfo(asset.fileType).bg, color: getFileTypeInfo(asset.fileType).color }}>
|
|
{getFileTypeInfo(asset.fileType).label}
|
|
</span>
|
|
)}
|
|
<span className="assets-modal-cat">{asset.category === 'image' ? '图片' : asset.category === 'video' ? '视频' : asset.category === 'audio' ? '音频' : asset.category === 'novel' ? '小说' : '文件'}</span>
|
|
</span>
|
|
{asset.size && <span className="assets-modal-size">{formatSize(asset.size)}</span>}
|
|
<span className="assets-modal-date">{formatDate(asset.updatedAt)}</span>
|
|
</div>
|
|
|
|
{/* Text preview */}
|
|
{isTextFile && !editing && !showOnlinePreview && (
|
|
<div className="assets-preview-text">
|
|
<pre className="assets-preview-code">
|
|
{(asset as any).content || asset.description || '（文件内容预览）\n\n这是一个文本类型的文件。\n内容由后端API提供。'}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
|
|
{/* Text editing */}
|
|
{isTextEditable && editing && (
|
|
<div className="assets-edit-section">
|
|
<textarea
|
|
className="assets-edit-textarea"
|
|
value={editContent}
|
|
onChange={e => setEditContent(e.target.value)}
|
|
rows={12}
|
|
/>
|
|
<div className="assets-edit-actions">
|
|
<button className="assets-btn assets-btn-primary" onClick={handleSaveEdit}>保存</button>
|
|
<button className="assets-btn assets-btn-cancel" onClick={() => setEditing(false)}>取消</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Image preview */}
|
|
{isImage && !showOnlinePreview && (
|
|
<div className="assets-preview-image">
|
|
<img src={asset.url || ''} alt={asset.name} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
|
|
{!asset.url && (
|
|
<div style={{ padding: 40, textAlign: 'center', color: 'var(--color-text-tertiary)' }}>
|
|
无法加载图片预览
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{/* Image online preview */}
|
|
{isImage && showOnlinePreview && (
|
|
<div className="assets-preview-online">
|
|
<div className="assets-preview-online-toolbar">
|
|
<span>在线预览：{asset.name}</span>
|
|
<button className="assets-btn assets-btn-cancel" onClick={() => setShowOnlinePreview(false)} style={{fontSize:'var(--text-xs)'}}>
|
|
关闭预览
|
|
</button>
|
|
</div>
|
|
<img src={asset.url || ''} alt={asset.name} style={{maxWidth:'100%',maxHeight:'500px',objectFit:'contain'}}
|
|
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Video preview */}
|
|
{isVideo && !showOnlinePreview && (
|
|
<div className="assets-preview-video">
|
|
<video controls src={asset.url || ''}>
|
|
您的浏览器不支持视频播放
|
|
</video>
|
|
</div>
|
|
)}
|
|
|
|
{/* Audio preview */}
|
|
{isAudio && !showOnlinePreview && (
|
|
<div className="assets-preview-audio">
|
|
<audio controls src={asset.url || ''}>
|
|
您的浏览器不支持音频播放
|
|
</audio>
|
|
</div>
|
|
)}
|
|
|
|
{/* Online Preview */}
|
|
{renderOnlinePreview()}
|
|
|
|
{/* Action buttons */}
|
|
<div className="assets-modal-actions">
|
|
{isTextFile && !editing && isTextEditable && (
|
|
<button className="assets-btn assets-btn-secondary" onClick={handleStartEdit}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
编辑
|
|
</button>
|
|
)}
|
|
{!editing && (
|
|
<button className="assets-btn assets-btn-secondary" onClick={handleDownload}>
|
|
<DownloadIcon />
|
|
下载
|
|
</button>
|
|
)}
|
|
{(isTextFile || isImage || isOfficeDoc || isPdf) && !editing && (
|
|
<button
|
|
className="assets-btn assets-btn-secondary"
|
|
onClick={() => setShowOnlinePreview(!showOnlinePreview)}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
{showOnlinePreview ? '关闭预览' : '在线预览'}
|
|
</button>
|
|
)}
|
|
{asset.category === 'novel' && (
|
|
<button className="assets-btn assets-btn-primary" onClick={() => navigate(`/assets/novel/${asset.id}`)}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
|
|
阅读
|
|
</button>
|
|
)}
|
|
<button className="assets-btn assets-btn-danger" onClick={() => { if (window.confirm('确定删除该资产？')) { onDelete(asset.id); onClose(); } }}>
|
|
<TrashIcon />
|
|
删除
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Create Asset Modal
|
|
interface CreateAssetModalProps {
|
|
onClose: () => void;
|
|
onCreated: () => void;
|
|
}
|
|
|
|
const CreateAssetModal: React.FC<CreateAssetModalProps> = ({ onClose, onCreated }) => {
|
|
const [name, setName] = useState('');
|
|
const [fileType, setFileType] = useState('txt');
|
|
const [content, setContent] = useState('');
|
|
const [creating, setCreating] = useState(false);
|
|
|
|
const handleCreate = async () => {
|
|
if (!name.trim()) return;
|
|
setCreating(true);
|
|
try {
|
|
await assetsAPI.createAsset({
|
|
name: name.trim(),
|
|
category: 'file',
|
|
file_type: fileType,
|
|
content: content,
|
|
description: content.slice(0, 100),
|
|
});
|
|
onCreated();
|
|
onClose();
|
|
} catch (err) {
|
|
console.error('创建失败', err);
|
|
} finally {
|
|
setCreating(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="assets-modal-overlay" onClick={onClose}>
|
|
<div className="assets-modal assets-create-modal" onClick={e => e.stopPropagation()}>
|
|
<div className="assets-modal-header">
|
|
<h3 className="assets-modal-title">创建资产</h3>
|
|
<button className="assets-modal-close" onClick={onClose}><CloseIcon /></button>
|
|
</div>
|
|
<div className="assets-modal-body">
|
|
<div className="form-section">
|
|
<label className="form-label">名称 <span className="required">*</span></label>
|
|
<input
|
|
type="text"
|
|
className="form-input"
|
|
placeholder="请输入资产名称"
|
|
value={name}
|
|
onChange={e => setName(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="form-section">
|
|
<label className="form-label">文件类型</label>
|
|
<select className="form-input" value={fileType} onChange={e => setFileType(e.target.value)}>
|
|
<option value="txt">TXT</option>
|
|
<option value="word">Word</option>
|
|
<option value="excel">Excel</option>
|
|
<option value="ppt">PPT</option>
|
|
<option value="pdf">PDF</option>
|
|
<option value="other">其他</option>
|
|
</select>
|
|
</div>
|
|
<div className="form-section">
|
|
<label className="form-label">内容</label>
|
|
<textarea
|
|
className="form-textarea"
|
|
placeholder="输入文件内容..."
|
|
value={content}
|
|
onChange={e => setContent(e.target.value)}
|
|
rows={6}
|
|
/>
|
|
</div>
|
|
<button
|
|
className="form-submit-btn"
|
|
onClick={handleCreate}
|
|
disabled={!name.trim() || creating}
|
|
>
|
|
{creating ? '创建中...' : '创建'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ===== Main AssetsPage Component =====
|
|
const AssetsPage: React.FC = () => {
|
|
const [activeCategory, setActiveCategory] = useState<string>('all');
|
|
const [subCategory, setSubCategory] = useState<string>('all');
|
|
const [assets, setAssets] = useState<Asset[]>([]);
|
|
const [categories, setCategories] = useState<AssetCategoryDef[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [selectedAsset, setSelectedAsset] = useState<Asset | null>(null);
|
|
const [showCreate, setShowCreate] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
// 将后端返回的资产标准化：
|
|
// 1. 统一 fileType（兼容 file_type 字段）
|
|
// 2. 兼容遗留的文档类分类（doc/document 等）与带文件类型但分类异常的资产，
|
|
// 统一归入 file 分类，确保它们出现在「文件」页签及其对应的子类型（如 pdf）中。
|
|
const VALID_CATEGORIES = ['file', 'novel', 'image', 'video', 'audio', 'custom', 'other'];
|
|
const normalizeAsset = (item: any): Asset => {
|
|
const rawCat = item.category;
|
|
const ft = mapFileTypeToLabel(item.fileType || item.file_type || 'other');
|
|
let category = rawCat;
|
|
if (!VALID_CATEGORIES.includes(category)) {
|
|
category = (ft && ft !== 'other') ? 'file' : 'other';
|
|
}
|
|
return { ...item, category, fileType: ft };
|
|
};
|
|
|
|
// 一次性拉取当前用户全部资产（分页累加），分类与子类型筛选全部在前端完成，
|
|
// 避免后端按 category 过滤时漏掉历史遗留分类（如 doc）的资产。
|
|
const fetchAllAssets = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
let all: any[] = [];
|
|
let page = 1;
|
|
const pageSize = 100;
|
|
for (;;) {
|
|
const res = await assetsAPI.getAssets({ page, page_size: pageSize });
|
|
const data = (res.data as any) || {};
|
|
const items: any[] = data.items || [];
|
|
const total: number = data.total || 0;
|
|
all = all.concat(items);
|
|
if (items.length === 0 || all.length >= total) break;
|
|
page += 1;
|
|
}
|
|
const normalized = all.map(normalizeAsset);
|
|
// 按id去重
|
|
const seen = new Set<string>();
|
|
const deduped = normalized.filter(a => {
|
|
if (seen.has(a.id)) return false;
|
|
seen.add(a.id);
|
|
return true;
|
|
});
|
|
setAssets(deduped);
|
|
} catch (err: any) {
|
|
setError(err.message || '加载失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const DEFAULT_CATEGORIES: AssetCategoryDef[] = [
|
|
{ id: 'file', name: '文件', type: 'file', color: '#5B5FED', icon: 'file', isDefault: true },
|
|
{ id: 'image', name: '图片', type: 'image', color: '#219B5E', icon: 'image', isDefault: true },
|
|
{ id: 'video', name: '视频', type: 'video', color: '#D9383A', icon: 'video', isDefault: true },
|
|
{ id: 'audio', name: '音频', type: 'audio', color: '#8B5CF6', icon: 'audio', isDefault: true },
|
|
{ id: 'novel', name: '小说', type: 'novel', color: '#E8922C', icon: 'novel', isDefault: true },
|
|
{ id: 'other', name: '其他', type: 'other', color: '#64748B', icon: 'other', isDefault: true },
|
|
{ id: 'custom', name: '自定义', type: 'custom', color: '#EC4899', icon: 'custom', isDefault: true },
|
|
];
|
|
|
|
const fetchCategories = async () => {
|
|
try {
|
|
const res = await assetsAPI.getCategories();
|
|
const apiCats = res.data || [];
|
|
const merged: AssetCategoryDef[] = [...apiCats];
|
|
for (const def of DEFAULT_CATEGORIES) {
|
|
if (!merged.some((c: any) => c.type === def.type)) {
|
|
merged.push(def);
|
|
}
|
|
}
|
|
setCategories(merged);
|
|
} catch (err) {
|
|
console.error('分类加载失败', err);
|
|
setCategories(DEFAULT_CATEGORIES);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchCategories();
|
|
fetchAllAssets();
|
|
}, []);
|
|
|
|
// Filter by sub-category for files
|
|
const filtered = (() => {
|
|
// 如果是文件分类，先确保只显示文件类资产
|
|
let base = activeCategory === 'all' ? assets : assets.filter(a => a.category === activeCategory);
|
|
// 在文件分类下，按子分类再筛选
|
|
if (activeCategory === 'file' && subCategory !== 'all') {
|
|
base = base.filter(a => a.fileType === subCategory);
|
|
}
|
|
return base;
|
|
})();
|
|
|
|
const handleDelete = async (id: string) => {
|
|
try {
|
|
await assetsAPI.deleteAsset(id);
|
|
setAssets(prev => prev.filter(a => a.id !== id));
|
|
} catch (err) {
|
|
console.error('删除失败', err);
|
|
}
|
|
};
|
|
|
|
const showFileSubTabs = activeCategory === 'file';
|
|
|
|
return (
|
|
<div className="assets-page">
|
|
<div className="assets-header">
|
|
<h1 className="assets-title">我的资产</h1>
|
|
<span className="assets-count">{filtered.length} 项</span>
|
|
<button className="assets-create-btn" onClick={() => setShowCreate(true)}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
创建
|
|
</button>
|
|
</div>
|
|
|
|
{/* Category Tabs */}
|
|
<div className="assets-tabs">
|
|
<button className={`assets-tab ${activeCategory === 'all' ? 'active' : ''}`} onClick={() => { setActiveCategory('all'); setSubCategory('all'); }}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
|
全部
|
|
</button>
|
|
{categories.length > 0 ? categories.map(cat => (
|
|
<button
|
|
key={cat.id}
|
|
className={`assets-tab ${activeCategory === cat.type ? 'active' : ''}`}
|
|
onClick={() => { setActiveCategory(cat.type); setSubCategory('all'); }}
|
|
style={activeCategory === cat.type ? { '--tab-color': cat.color, '--tab-bg': cat.color + '18' } as React.CSSProperties : undefined}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
|
{cat.type === 'file' && <><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></>}
|
|
{cat.type === 'novel' && <><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></>}
|
|
{cat.type === 'image' && <><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></>}
|
|
{cat.type === 'video' && <><polygon points="23 7 16 12 7 12 7 19 23 19 23 7"/></>}
|
|
{cat.type === 'audio' && <><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></>}
|
|
{cat.type === 'other' && <><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></>}
|
|
{cat.type === 'custom' && <><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></>}
|
|
</svg>
|
|
{cat.name}
|
|
</button>
|
|
)) : (
|
|
<>
|
|
<button className={`assets-tab ${activeCategory === 'file' ? 'active' : ''}`} onClick={() => { setActiveCategory('file'); setSubCategory('all'); }} style={activeCategory === 'file' ? { '--tab-color': '#5B5FED', '--tab-bg': '#5B5FED18' } as React.CSSProperties : undefined}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
文件
|
|
</button>
|
|
<button className={`assets-tab ${activeCategory === 'image' ? 'active' : ''}`} onClick={() => { setActiveCategory('image'); setSubCategory('all'); }} style={activeCategory === 'image' ? { '--tab-color': '#219B5E', '--tab-bg': '#10B98118' } as React.CSSProperties : undefined}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
|
图片
|
|
</button>
|
|
<button className={`assets-tab ${activeCategory === 'video' ? 'active' : ''}`} onClick={() => { setActiveCategory('video'); setSubCategory('all'); }} style={activeCategory === 'video' ? { '--tab-color': '#D9383A', '--tab-bg': '#EF444418' } as React.CSSProperties : undefined}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="23 7 16 12 7 12 7 19 23 19 23 7"/></svg>
|
|
视频
|
|
</button>
|
|
<button className={`assets-tab ${activeCategory === 'audio' ? 'active' : ''}`} onClick={() => { setActiveCategory('audio'); setSubCategory('all'); }} style={activeCategory === 'audio' ? { '--tab-color': '#8B5CF6', '--tab-bg': '#8B5CF618' } as React.CSSProperties : undefined}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
|
音频
|
|
</button>
|
|
<button className={`assets-tab ${activeCategory === 'novel' ? 'active' : ''}`} onClick={() => { setActiveCategory('novel'); setSubCategory('all'); }} style={activeCategory === 'novel' ? { '--tab-color': '#E8922C', '--tab-bg': '#F59E0B18' } as React.CSSProperties : undefined}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
|
|
小说
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* File sub-tabs */}
|
|
{showFileSubTabs && (
|
|
<div className="assets-subtabs">
|
|
<button className={`assets-subtab ${subCategory === 'all' ? 'active' : ''}`} onClick={() => setSubCategory('all')}>全部文件</button>
|
|
{(['word', 'excel', 'ppt', 'pdf', 'txt', 'md', 'doc', 'other'] as AssetFileType[]).map(ft => (
|
|
<button key={ft} className={`assets-subtab ${subCategory === ft ? 'active' : ''}`} onClick={() => setSubCategory(ft)}>
|
|
{fileTypeLabels[ft].label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Asset list */}
|
|
<div className="assets-list">
|
|
{loading ? (
|
|
<div className="assets-loading">
|
|
<div className="audit-spinner" />
|
|
<span>加载中...</span>
|
|
</div>
|
|
) : error ? (
|
|
<div className="assets-empty">
|
|
<p>加载失败：{error}</p>
|
|
</div>
|
|
) : filtered.length === 0 ? (
|
|
<div className="assets-empty">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--color-text-disabled)' }}><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
|
|
<p>暂无资产</p>
|
|
</div>
|
|
) : (
|
|
<div className={`assets-grid ${activeCategory === 'novel' ? 'novel-grid' : ''}`}>
|
|
{filtered.map(asset => {
|
|
if (asset.category === 'novel') {
|
|
return (
|
|
<div key={asset.id} className="asset-novel-card" onClick={() => setSelectedAsset(asset)}>
|
|
<div className="novel-card-cover">
|
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" style={{ color: '#E8922C', opacity: 0.6 }}><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
|
|
<span className="novel-card-badge">小说</span>
|
|
</div>
|
|
<div className="novel-card-info">
|
|
<h3 className="novel-card-title">{asset.name}</h3>
|
|
<p className="novel-card-desc">{asset.description}</p>
|
|
<div className="novel-card-meta">
|
|
<span>{asset.chapters?.length || 0} 章</span>
|
|
<span>·</span>
|
|
<span>{asset.chapters?.reduce((s, c) => s + c.wordCount, 0).toLocaleString() || 0} 字</span>
|
|
<span>·</span>
|
|
<span>{formatDate(asset.updatedAt)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div key={asset.id} className="asset-card" onClick={() => setSelectedAsset(asset)}>
|
|
<div className="asset-card-icon">
|
|
{asset.category === 'file' && (
|
|
<span className="asset-file-type" style={{ background: getFileTypeInfo(asset.fileType).bg, color: getFileTypeInfo(asset.fileType).color }}>
|
|
{getFileTypeInfo(asset.fileType).label}
|
|
</span>
|
|
)}
|
|
{asset.category === 'image' && (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#219B5E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
|
)}
|
|
{asset.category === 'video' && (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#D9383A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="23 7 16 12 7 12 7 19 23 19 23 7"/></svg>
|
|
)}
|
|
{asset.category === 'audio' && (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#8B5CF6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
|
)}
|
|
</div>
|
|
<div className="asset-card-body">
|
|
<h4 className="asset-card-name">{asset.name}</h4>
|
|
{asset.description && <p className="asset-card-desc">{asset.description}</p>}
|
|
<div className="asset-card-footer">
|
|
{asset.size && <span className="asset-card-size">{formatSize(asset.size)}</span>}
|
|
<span className="asset-card-date">{formatDate(asset.updatedAt)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Preview Modal */}
|
|
{selectedAsset && (
|
|
<PreviewModal
|
|
asset={selectedAsset}
|
|
onClose={() => setSelectedAsset(null)}
|
|
onDelete={handleDelete}
|
|
/>
|
|
)}
|
|
|
|
{/* Create Modal */}
|
|
{showCreate && (
|
|
<CreateAssetModal
|
|
onClose={() => setShowCreate(false)}
|
|
onCreated={() => fetchAllAssets()}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AssetsPage;
|