docs(claude): restructure documentation management and add feedback system
- Restructure §8 from "文档沉淀规则" to "文档管理规则" with 4 subsections - Add docs/ structure with features/ and knowledge-base/ directories - Add feature documentation template with 7 sections (概述/设计初衷/技术设计/预期作用/实际效果/演化路线/头脑风暴) - Add feature update trigger matrix (新增/修改/完成/问题/反馈) - Add documentation quality checklist - Add §16
This commit is contained in:
iven
193
desktop/src/components/Feedback/FeedbackHistory.tsx
Normal file
193
desktop/src/components/Feedback/FeedbackHistory.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import { format } from 'date-fns';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Clock, CheckCircle, AlertCircle, Hourglass, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { useFeedbackStore, type FeedbackSubmission, type FeedbackStatus } from './feedbackStore';
|
||||
import { Button, Badge } from '../ui';
|
||||
|
||||
const statusConfig: Record<FeedbackStatus, { label: string; color: string; icon: React.ReactNode }> = {
|
||||
pending: { label: 'Pending', color: 'text-gray-500', icon: <Clock className="w-4 h-4" /> },
|
||||
submitted: { label: 'Submitted', color: 'text-blue-500', icon: <CheckCircle className="w-4 h-4" /> },
|
||||
acknowledged: { label: 'Acknowledged', color: 'text-purple-500', icon: <CheckCircle className="w-4 h-4" /> },
|
||||
in_progress: { label: 'In Progress', color: 'text-yellow-500', icon: <Hourglass className="w-4 h-4" /> },
|
||||
resolved: { label: 'Resolved', color: 'text-green-500', icon: <CheckCircle className="w-4 h-4" /> },
|
||||
};
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
bug: 'Bug Report',
|
||||
feature: 'Feature Request';
|
||||
general: 'General Feedback',
|
||||
};
|
||||
const priorityLabels: Record<string, string> = {
|
||||
low: 'Low',
|
||||
medium: 'Medium',
|
||||
high: 'High',
|
||||
};
|
||||
|
||||
interface FeedbackHistoryProps {
|
||||
onViewDetails?: (feedback: FeedbackSubmission) => void;
|
||||
}
|
||||
|
||||
export function FeedbackHistory({ onViewDetails }: FeedbackHistoryProps) {
|
||||
const { feedbackItems, deleteFeedback, updateFeedbackStatus } = useFeedbackStore();
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
|
||||
const formatDate = (timestamp: number) => {
|
||||
return format(new Date(timestamp), 'yyyy-MM-dd HH:mm');
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
if (confirm('Are you sure you want to delete this feedback?')) {
|
||||
deleteFeedback(id);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStatusChange = (id: string, newStatus: FeedbackStatus) => {
|
||||
updateFeedbackStatus(id, newStatus);
|
||||
};
|
||||
|
||||
if (feedbackItems.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
<p>No feedback submissions yet.</p>
|
||||
<p className="text-sm mt-1">Click the feedback button to submit your first feedback.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{feedbackItems.map((feedback) => {
|
||||
const isExpanded = expandedId === feedback.id;
|
||||
const statusInfo = statusConfig[feedback.status];
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={feedback.id}
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
className="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50"
|
||||
onClick={() => setExpandedId(isExpanded ? null : feedback.id)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
{feedback.type === 'bug' && <span className="text-red-500"><AlertCircle className="w-4 h-4" /></span>}
|
||||
{feedback.type === 'feature' && <span className="text-yellow-500"><ChevronUp className="w-4 h-4" /></span>}
|
||||
{feedback.type === 'general' && <span className="text-blue-500"><CheckCircle className="w-4 h-4" /></span>}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||
{feedback.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{typeLabels[feedback.type]} - {formatDate(feedback.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant={feedback.priority === 'high' ? 'error' : feedback.priority === 'medium' ? 'warning' : 'default'}>
|
||||
{priorityLabels[feedback.priority]}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpandedId(isExpanded ? null : feedback.id);
|
||||
}}
|
||||
className="text-gray-400 hover:text-gray-600 p-1"
|
||||
>
|
||||
{isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expandable Content */}
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="px-4 pb-3 border-t border-gray-100 dark:border-gray-700"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
{/* Description */}
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Description</h5>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
|
||||
{feedback.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
{feedback.attachments.length > 0 && (
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
||||
Attachments ({feedback.attachments.length})
|
||||
</h5>
|
||||
<div className="flex flex-wrap gap-2 mt-1">
|
||||
{feedback.attachments.map((att, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded"
|
||||
>
|
||||
{att.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">System Info</h5>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
|
||||
<p>App Version: {feedback.metadata.appVersion}</p>
|
||||
<p>OS: {feedback.metadata.os}</p>
|
||||
<p>Submitted: {format(feedback.createdAt)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status and Actions */}
|
||||
<div className="flex items-center justify-between pt-2 border-t border-gray-100 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`flex items-center gap-1 text-xs ${statusInfo.color}`}>
|
||||
{statusInfo.icon}
|
||||
{statusInfo.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={feedback.status}
|
||||
onChange={(e) => handleStatusChange(feedback.id, e.target.value as FeedbackStatus)}
|
||||
className="text-xs border border-gray-200 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-800"
|
||||
>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="submitted">Submitted</option>
|
||||
<option value="acknowledged">Acknowledged</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="resolved">Resolved</option>
|
||||
</select>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(feedback.id)}
|
||||
className="text-red-500 hover:text-red-600"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user