feat(types): add image types and enhance Post/Comment interfaces

Add PostImage and CommentImage types for handling post/comment images. Update
Post interface with likes_count, comments_count, views_count, and images.
Update Comment interface with likes_count, replies_count, and images. Add
display_name and priority to Role type. Include dynamic color CSS utilities
and UI enhancements for Comments/Posts pages. Add defensive empty array
fallback for subjects data.

src/api/comments.ts

@@ -1,5 +1,5 @@
 import apiClient from './client'
-import type { Comment, ApiResponse, PaginatedResponse } from '@/types'
+import type { Comment, ApiResponse, PaginatedResponse, CommentImage } from '@/types'
 
 // 评论查询参数
 export interface CommentQueryParams {
@@ -24,6 +24,8 @@ export interface CommentDetail extends Comment {
   post?: {
     id: string
     title: string
+    content?: string
+    images?: CommentImage[]
   }
   ip_address?: string
   device_info?: string

src/components/Layout/Sidebar.tsx

@@ -111,7 +111,7 @@ const menuItems: MenuItem[] = [
 
 export default function Sidebar({ collapsed, onCollapse }: SidebarProps) {
   const { hasAnyRole } = useAuthStore()
-  const [expandedItems, setExpandedItems] = useState<string[]>(['学习资料'])
+  const [expandedItems, setExpandedItems] = useState<string[]>([])
 
   // 切换展开状态
   const toggleExpand = (title: string) => {
@@ -178,6 +178,7 @@ export default function Sidebar({ collapsed, onCollapse }: SidebarProps) {
       <NavLink
         key={item.path}
         to={item.path!}
+        end
         className={({ isActive }) =>
           cn(
             'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',

src/index.css

@@ -31,3 +31,12 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  .text-dynamic-color {
+    color: var(--dynamic-color);
+  }
+  .bg-dynamic-color {
+    background-color: var(--dynamic-color);
+  }
+}

src/pages/Comments.tsx

@@ -47,6 +47,10 @@ import {
   AlertTriangle,
   MessageSquare,
   ExternalLink,
+  ThumbsUp,
+  Check,
+  Reply,
+  ImageIcon,
 } from 'lucide-react'
 import { format } from 'date-fns'
 
@@ -242,23 +246,30 @@ export default function Comments() {
       </div>
 
       {/* 筛选栏 */}
-      <Card>
-        <CardHeader>
-          <CardTitle>筛选条件</CardTitle>
+      <Card className="border-slate-200 shadow-sm">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <Search className="h-5 w-5 text-primary" />
+            筛选条件
+          </CardTitle>
           <CardDescription>根据条件筛选评论</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="flex flex-wrap gap-4">
-            <div className="flex-1 min-w-[200px] max-w-sm">
-              <Input
-                placeholder="搜索评论内容..."
-                value={keyword}
-                onChange={(e) => setKeyword(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-              />
+          <div className="flex flex-wrap items-center gap-3">
+            <div className="flex-1 min-w-[240px] max-w-md">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+                <Input
+                  placeholder="搜索评论内容..."
+                  value={keyword}
+                  onChange={(e) => setKeyword(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                  className="pl-10 bg-slate-50 border-slate-200 focus:bg-white"
+                />
+              </div>
             </div>
             <Select value={statusFilter} onValueChange={setStatusFilter}>
-              <SelectTrigger className="w-[150px]">
+              <SelectTrigger className="w-[160px] bg-slate-50 border-slate-200">
                 <SelectValue placeholder="状态筛选" />
               </SelectTrigger>
               <SelectContent>
@@ -269,7 +280,7 @@ export default function Comments() {
                 <SelectItem value="deleted">已删除</SelectItem>
               </SelectContent>
             </Select>
-            <Button onClick={handleSearch}>
+            <Button onClick={handleSearch} className="bg-primary hover:bg-primary/90">
               <Search className="mr-2 h-4 w-4" />
               搜索
             </Button>
@@ -279,12 +290,17 @@ export default function Comments() {
 
       {/* 批量操作栏 */}
       {selectedIds.length > 0 && (
-        <Card className="border-orange-200 bg-orange-50">
+        <Card className="border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 shadow-sm">
           <CardContent className="py-4">
             <div className="flex items-center justify-between">
-              <span className="text-sm text-orange-800">
-                已选择 {selectedIds.length} 项
-              </span>
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-amber-100 rounded-lg">
+                  <Check className="h-4 w-4 text-amber-600" />
+                </div>
+                <span className="text-sm font-medium text-amber-900">
+                  已选择 <span className="font-bold">{selectedIds.length}</span> 项
+                </span>
+              </div>
               <div className="flex gap-2">
                 <Button
                   variant="destructive"
@@ -302,107 +318,158 @@ export default function Comments() {
       )}
 
       {/* 评论表格 */}
-      <Card>
-        <CardHeader>
-          <CardTitle>评论列表</CardTitle>
-          <CardDescription>
-            共 {total} 条记录
-          </CardDescription>
+      <Card className="border-slate-200 shadow-sm">
+        <CardHeader className="pb-4 border-b border-slate-100">
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-lg flex items-center gap-2">
+                <MessageSquare className="h-5 w-5 text-primary" />
+                评论列表
+              </CardTitle>
+              <CardDescription className="mt-1">
+                共 <span className="font-medium text-slate-900">{total}</span> 条记录
+              </CardDescription>
+            </div>
+          </div>
         </CardHeader>
-        <CardContent>
+        <CardContent className="p-0">
           <Table>
             <TableHeader>
-              <TableRow>
-                <TableHead className="w-12">
+              <TableRow className="bg-slate-50/50 hover:bg-slate-50/50">
+                <TableHead className="w-12 rounded-tl-lg">
                   <Checkbox
                     checked={isAllSelected}
                     onCheckedChange={handleSelectAll}
                   />
                 </TableHead>
                 <TableHead className="w-16">ID</TableHead>
+                <TableHead className="w-20">预览</TableHead>
                 <TableHead>内容</TableHead>
                 <TableHead>评论者</TableHead>
                 <TableHead>所属帖子</TableHead>
                 <TableHead className="w-24">状态</TableHead>
                 <TableHead className="w-16">点赞</TableHead>
                 <TableHead className="w-36">评论时间</TableHead>
-                <TableHead className="w-20">操作</TableHead>
+                <TableHead className="w-20 rounded-tr-lg">操作</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {loading ? (
                 <TableRow>
-                  <TableCell colSpan={9} className="text-center py-8">
-                    <Loader2 className="h-6 w-6 animate-spin mx-auto text-muted-foreground" />
+                  <TableCell colSpan={10} className="text-center py-12">
+                    <div className="flex flex-col items-center gap-3">
+                      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                      <span className="text-sm text-muted-foreground">加载中...</span>
+                    </div>
                   </TableCell>
                 </TableRow>
               ) : comments.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={9} className="text-center py-8 text-muted-foreground">
-                    暂无数据
+                  <TableCell colSpan={10} className="text-center py-12 text-muted-foreground">
+                    <div className="flex flex-col items-center gap-3">
+                      <div className="p-4 bg-slate-100 rounded-full">
+                        <MessageSquare className="h-8 w-8 text-slate-400" />
+                      </div>
+                      <span>暂无数据</span>
+                    </div>
                   </TableCell>
                 </TableRow>
               ) : (
                 comments.map((comment) => (
-                  <TableRow key={comment.id}>
+                  <TableRow
+                    key={comment.id}
+                    className="group hover:bg-slate-50/80 transition-colors"
+                  >
                     <TableCell>
                       <Checkbox
                         checked={selectedIds.includes(comment.id)}
                         onCheckedChange={(checked) => handleSelect(comment.id, !!checked)}
                       />
                     </TableCell>
-                    <TableCell className="font-mono text-sm">{comment.id}</TableCell>
+                    <TableCell className="font-mono text-xs text-slate-500">#{comment.id.slice(-6)}</TableCell>
+                    <TableCell>
+                      <div className="relative w-14 h-14 rounded-lg overflow-hidden bg-slate-100 ring-1 ring-slate-200 group-hover:ring-primary/30 transition-all">
+                        {comment.images && comment.images.length > 0 ? (
+                          <>
+                            <img
+                              src={comment.images[0].url}
+                              alt=""
+                              className="w-full h-full object-cover"
+                              onError={(e) => {
+                                (e.target as HTMLImageElement).style.display = 'none';
+                              }}
+                            />
+                            {comment.images.length > 1 && (
+                              <div className="absolute bottom-0 right-0 bg-black/60 text-white text-[10px] px-1.5 py-0.5 rounded-tl-md">
+                                +{comment.images.length - 1}
+                              </div>
+                            )}
+                          </>
+                        ) : (
+                          <div className="w-full h-full flex items-center justify-center">
+                            <MessageSquare className="h-5 w-5 text-slate-300" />
+                          </div>
+                        )}
+                      </div>
+                    </TableCell>
                     <TableCell>
                       <div className="max-w-[250px]">
-                        <p className="text-sm truncate" title={comment.content}>
-                          {truncateContent(comment.content)}
+                        <p className="text-sm text-slate-700 truncate group-hover:text-primary transition-colors" title={comment.content}>
+                          {truncateContent(comment.content, 80)}
                         </p>
                       </div>
                     </TableCell>
                     <TableCell>
-                      <div className="flex items-center gap-2">
-                        <Avatar className="h-8 w-8">
+                      <div className="flex items-center gap-2.5">
+                        <Avatar className="h-9 w-9 ring-2 ring-white shadow-sm">
                           <AvatarImage src={comment.author.avatar} />
-                          <AvatarFallback>{getAvatarFallback(comment.author)}</AvatarFallback>
+                          <AvatarFallback className="bg-primary/10 text-primary text-xs font-medium">
+                            {getAvatarFallback(comment.author)}
+                          </AvatarFallback>
                         </Avatar>
-                        <div>
-                          <div className="font-medium">{comment.author.nickname || comment.author.username}</div>
-                          <div className="text-xs text-muted-foreground">@{comment.author.username}</div>
+                        <div className="min-w-0">
+                          <div className="font-medium text-sm text-slate-900 truncate">{comment.author.nickname || comment.author.username}</div>
+                          <div className="text-xs text-slate-500 truncate">@{comment.author.username}</div>
                         </div>
                       </div>
                     </TableCell>
                     <TableCell>
-                      <div className="flex items-center gap-1 text-sm">
-                        <MessageSquare className="h-4 w-4 text-muted-foreground" />
-                        <span className="truncate max-w-[150px]" title={comment.post_title}>
+                      <div className="flex items-center gap-1.5 text-sm">
+                        <ExternalLink className="h-3.5 w-3.5 text-slate-400" />
+                        <span className="truncate max-w-[140px] text-slate-600" title={comment.post_title}>
                           {comment.post_title || `帖子 #${comment.post_id}`}
                         </span>
                       </div>
                     </TableCell>
                     <TableCell>
-                      <Badge className={`${statusColors[comment.status]} text-white`}>
+                      <Badge className={`${statusColors[comment.status]} text-white font-medium text-xs px-2.5 py-1`}>
                         {statusText[comment.status]}
                       </Badge>
                     </TableCell>
-                    <TableCell>{comment.like_count}</TableCell>
-                    <TableCell className="text-sm text-muted-foreground">
+                    <TableCell>
+                      <div className="flex items-center gap-1 text-slate-600">
+                        <ThumbsUp className="h-3.5 w-3.5" />
+                        <span className="text-sm">{comment.likes_count}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-sm text-slate-500">
                       {formatDate(comment.created_at)}
                     </TableCell>
                     <TableCell>
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" size="sm">
+                          <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-slate-100">
                             <MoreHorizontal className="h-4 w-4" />
                           </Button>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleViewDetail(comment)}>
-                            <Eye className="mr-2 h-4 w-4" />
+                        <DropdownMenuContent align="end" className="w-40">
+                          <DropdownMenuItem onClick={() => handleViewDetail(comment)} className="cursor-pointer">
+                            <Eye className="mr-2 h-4 w-4 text-blue-500" />
                             查看详情
                           </DropdownMenuItem>
                           <DropdownMenuItem
                             onClick={() => openDeleteDialog(comment)}
-                            className="text-red-600"
+                            className="text-red-600 cursor-pointer focus:text-red-600"
                           >
                             <Trash2 className="mr-2 h-4 w-4" />
                             删除
@@ -417,7 +484,7 @@ export default function Comments() {
           </Table>
 
           {/* 分页 */}
-          <div className="mt-4">
+          <div className="p-4 border-t border-slate-100 bg-slate-50/50">
             <PaginationNavigator
               currentPage={page}
               totalPages={Math.ceil(total / pageSize)}
@@ -429,59 +496,151 @@ export default function Comments() {
 
       {/* 详情对话框 */}
       <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>评论详情</DialogTitle>
+        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader className="border-b pb-4">
+            <DialogTitle className="text-xl flex items-center gap-2">
+              <MessageSquare className="h-5 w-5 text-primary" />
+              评论详情
+            </DialogTitle>
           </DialogHeader>
           {detailLoading ? (
-            <div className="flex items-center justify-center py-8">
-              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="h-8 w-8 animate-spin text-primary" />
             </div>
           ) : selectedComment ? (
-            <div className="space-y-4">
-              <div className="flex items-center gap-4">
-                <Avatar className="h-12 w-12">
+            <div className="space-y-6 py-2">
+              {/* 评论者信息卡片 */}
+              <div className="flex items-center gap-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl">
+                <Avatar className="h-14 w-14 ring-2 ring-white shadow-sm">
                   <AvatarImage src={selectedComment.author?.avatar} />
-                  <AvatarFallback>{getAvatarFallback(selectedComment.author)}</AvatarFallback>
+                  <AvatarFallback className="bg-primary/10 text-primary font-semibold text-lg">
+                    {getAvatarFallback(selectedComment.author)}
+                  </AvatarFallback>
                 </Avatar>
-                <div>
-                  <div className="font-medium">{selectedComment.author?.nickname || selectedComment.author?.username}</div>
-                  <div className="text-sm text-muted-foreground">@{selectedComment.author?.username}</div>
+                <div className="flex-1">
+                  <div className="font-semibold text-lg">{selectedComment.author?.nickname || selectedComment.author?.username}</div>
+                  <div className="text-sm text-slate-500">@{selectedComment.author?.username}</div>
                 </div>
-                <Badge className={`${statusColors[selectedComment.status]} text-white ml-auto`}>
+                <Badge className={`${statusColors[selectedComment.status]} text-white font-medium px-3 py-1`}>
                   {statusText[selectedComment.status]}
                 </Badge>
               </div>
 
               {/* 所属帖子 */}
               {selectedComment.post && (
-                <Card className="bg-muted/50">
-                  <CardContent className="py-3">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <div className="text-xs text-muted-foreground mb-1">所属帖子</div>
-                        <div className="font-medium">{selectedComment.post.title}</div>
+                <Card className="bg-slate-50 border-slate-200">
+                  <CardContent className="py-4">
+                    <div className="flex items-start gap-3">
+                      <div className="p-2 bg-blue-100 rounded-lg">
+                        <ExternalLink className="h-4 w-4 text-blue-600" />
                       </div>
-                      <Button variant="ghost" size="sm">
+                      <div className="flex-1 min-w-0">
+                        <div className="text-xs text-slate-500 mb-1">所属帖子</div>
+                        <div className="font-medium text-slate-900">{selectedComment.post.title}</div>
+                        {selectedComment.post.content && (
+                          <div className="text-sm text-slate-500 mt-1 truncate">
+                            {selectedComment.post.content.substring(0, 100)}...
+                          </div>
+                        )}
+                      </div>
+                      <Button variant="ghost" size="sm" className="shrink-0">
                         <ExternalLink className="h-4 w-4" />
                       </Button>
                     </div>
+                    {/* 帖子图片预览 */}
+                    {selectedComment.post.images && selectedComment.post.images.length > 0 && (
+                      <div className="mt-3 flex gap-2">
+                        {selectedComment.post.images.slice(0, 3).map((img, index) => (
+                          <img
+                            key={index}
+                            src={img.url}
+                            alt=""
+                            className="w-16 h-16 object-cover rounded-lg ring-1 ring-slate-200"
+                            onError={(e) => {
+                              (e.target as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                        ))}
+                        {selectedComment.post.images.length > 3 && (
+                          <div className="w-16 h-16 bg-slate-200 rounded-lg flex items-center justify-center text-xs text-slate-500">
+                            +{selectedComment.post.images.length - 3}
+                          </div>
+                        )}
+                      </div>
+                    )}
                   </CardContent>
                 </Card>
               )}
 
+              {/* 回复信息 */}
+              {selectedComment.reply_to_user && (
+                <div className="flex items-center gap-2 p-3 bg-amber-50 rounded-lg border border-amber-100">
+                  <Reply className="h-4 w-4 text-amber-600" />
+                  <span className="text-sm text-amber-800">
+                    回复给 <span className="font-medium">@{selectedComment.reply_to_user.nickname || selectedComment.reply_to_user.username}</span>
+                  </span>
+                </div>
+              )}
+              
               {/* 评论内容 */}
-              <div>
-                <div className="text-xs text-muted-foreground mb-1">评论内容</div>
-                <p className="bg-muted/50 p-3 rounded-lg whitespace-pre-wrap">{selectedComment.content}</p>
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-sm font-medium text-slate-700">
+                  <MessageSquare className="h-4 w-4 text-primary" />
+                  <span>评论内容</span>
+                </div>
+                <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
+                  <p className="text-slate-700 whitespace-pre-wrap leading-relaxed">{selectedComment.content}</p>
+                </div>
               </div>
 
-              <div className="flex gap-6 text-sm text-muted-foreground">
-                <span>👍 {selectedComment.like_count} 点赞</span>
+              {/* 评论图片 */}
+              {selectedComment.images && selectedComment.images.length > 0 && (
+                <div className="space-y-3">
+                  <div className="flex items-center gap-2 text-sm font-medium text-slate-700">
+                    <ImageIcon className="h-4 w-4 text-primary" />
+                    <span>评论图片 ({selectedComment.images.length}张)</span>
+                  </div>
+                  <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
+                    {selectedComment.images.map((img, index) => (
+                      <div
+                        key={index}
+                        className="group relative aspect-square rounded-xl overflow-hidden bg-slate-100 ring-1 ring-slate-200 hover:ring-primary/50 transition-all"
+                      >
+                        <img
+                          src={img.url}
+                          alt={`图片 ${index + 1}`}
+                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                          onError={(e) => {
+                            (e.target as HTMLImageElement).src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="%239ca3af" stroke-width="1"%3E%3Crect x="3" y="3" width="18" height="18" rx="2" ry="2"/%3E%3Ccircle cx="8.5" cy="8.5" r="1.5"/%3E%3Cpolyline points="21 15 16 10 5 21"/%3E%3C/svg%3E';
+                            (e.target as HTMLImageElement).classList.add('p-4');
+                          }}
+                        />
+                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* 统计数据 */}
+              <div className="flex items-center gap-6 p-4 bg-slate-50 rounded-xl">
+                <div className="flex items-center gap-2 text-slate-600">
+                  <div className="p-2 bg-rose-100 rounded-lg">
+                    <ThumbsUp className="h-4 w-4 text-rose-500" />
+                  </div>
+                  <div>
+                    <div className="text-lg font-semibold text-slate-900">{selectedComment.likes_count}</div>
+                    <div className="text-xs text-slate-500">点赞</div>
+                  </div>
+                </div>
               </div>
 
-              <div className="text-sm text-muted-foreground">
-                评论时间：{formatDate(selectedComment.created_at)}
+              {/* 时间信息 */}
+              <div className="flex items-center justify-between text-sm text-slate-500 pt-4 border-t border-slate-100">
+                <span>评论时间：{formatDate(selectedComment.created_at)}</span>
+                {selectedComment.updated_at !== selectedComment.created_at && (
+                  <span>更新于：{formatDate(selectedComment.updated_at)}</span>
+                )}
               </div>
             </div>
           ) : null}

src/pages/MaterialSubjects.tsx

@@ -123,7 +123,7 @@ export default function MaterialSubjects() {
     setLoading(true)
     try {
       const response = await subjectsApi.getSubjects()
-      const list = response.data.data
+      const list = response.data.data || []
       setSubjects(list)
     } catch (error) {
       console.error('Failed to load subjects:', error)
@@ -273,13 +273,13 @@ export default function MaterialSubjects() {
                     <TableRow key={subject.id}>
                       <TableCell>{subject.sort_order}</TableCell>
                       <TableCell>
-                        <IconComponent className="h-6 w-6" style={{ color: subject.color }} />
+                        <IconComponent className="h-6 w-6 text-dynamic-color" style={{ '--dynamic-color': subject.color } as React.CSSProperties} />
                       </TableCell>
                       <TableCell className="font-medium">{subject.name}</TableCell>
                     <TableCell>
                       <div
-                        className="w-6 h-6 rounded"
-                        style={{ backgroundColor: subject.color }}
+                        className="w-6 h-6 rounded bg-dynamic-color"
+                        style={{ '--dynamic-color': subject.color } as React.CSSProperties}
                       />
                     </TableCell>
                     <TableCell className="max-w-[200px] truncate">
@@ -302,6 +302,7 @@ export default function MaterialSubjects() {
                           variant="ghost"
                           size="icon"
                           onClick={() => handleOpenEdit(subject)}
+                          title="编辑"
                         >
                           <Pencil className="h-4 w-4" />
                         </Button>
@@ -309,6 +310,7 @@ export default function MaterialSubjects() {
                           variant="ghost"
                           size="icon"
                           onClick={() => handleOpenDelete(subject)}
+                          title="删除"
                         >
                           <Trash2 className="h-4 w-4 text-destructive" />
                         </Button>
@@ -370,6 +372,7 @@ export default function MaterialSubjects() {
                           ? 'border-primary bg-primary/10'
                           : 'border-muted hover:border-muted-foreground'
                       }`}
+                      title={iconName}
                     >
                       <IconComponent className="h-5 w-5" />
                     </button>
@@ -386,12 +389,12 @@ export default function MaterialSubjects() {
                     key={color.value}
                     type="button"
                     onClick={() => setFormData({ ...formData, color: color.value })}
-                    className={`w-8 h-8 rounded-full border-2 transition-colors ${
+                    className={`w-8 h-8 rounded-full border-2 transition-colors bg-dynamic-color ${
                       formData.color === color.value
                         ? 'border-primary scale-110'
                         : 'border-transparent hover:scale-105'
                     }`}
-                    style={{ backgroundColor: color.value }}
+                    style={{ '--dynamic-color': color.value } as React.CSSProperties}
                     title={color.name}
                   />
                 ))}
@@ -427,6 +430,7 @@ export default function MaterialSubjects() {
                 checked={formData.is_active ?? true}
                 onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
                 className="rounded"
+                aria-label="启用此学科"
               />
               <Label htmlFor="is_active">启用此学科</Label>
             </div>

src/pages/Posts.tsx

@@ -50,6 +50,12 @@ import {
   X,
   Loader2,
   AlertTriangle,
+  ImageIcon,
+  ThumbsUp,
+  MessageCircle,
+  Eye as EyeIcon,
+  Pin,
+  Star,
 } from 'lucide-react'
 import { format } from 'date-fns'
 
@@ -298,23 +304,30 @@ export default function Posts() {
       </div>
 
       {/* 筛选栏 */}
-      <Card>
-        <CardHeader>
-          <CardTitle>筛选条件</CardTitle>
+      <Card className="border-slate-200 shadow-sm">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <Search className="h-5 w-5 text-primary" />
+            筛选条件
+          </CardTitle>
           <CardDescription>根据条件筛选帖子</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="flex flex-wrap gap-4">
-            <div className="flex-1 min-w-[200px] max-w-sm">
-              <Input
-                placeholder="搜索帖子标题或内容..."
-                value={keyword}
-                onChange={(e) => setKeyword(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-              />
+          <div className="flex flex-wrap items-center gap-3">
+            <div className="flex-1 min-w-[240px] max-w-md">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+                <Input
+                  placeholder="搜索帖子标题或内容..."
+                  value={keyword}
+                  onChange={(e) => setKeyword(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                  className="pl-10 bg-slate-50 border-slate-200 focus:bg-white"
+                />
+              </div>
             </div>
             <Select value={statusFilter} onValueChange={setStatusFilter}>
-              <SelectTrigger className="w-[150px]">
+              <SelectTrigger className="w-[160px] bg-slate-50 border-slate-200">
                 <SelectValue placeholder="状态筛选" />
               </SelectTrigger>
               <SelectContent>
@@ -325,7 +338,7 @@ export default function Posts() {
                 <SelectItem value="deleted">已删除</SelectItem>
               </SelectContent>
             </Select>
-            <Button onClick={handleSearch}>
+            <Button onClick={handleSearch} className="bg-primary hover:bg-primary/90">
               <Search className="mr-2 h-4 w-4" />
               搜索
             </Button>
@@ -335,18 +348,24 @@ export default function Posts() {
 
       {/* 批量操作栏 */}
       {selectedIds.length > 0 && (
-        <Card className="border-orange-200 bg-orange-50">
+        <Card className="border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 shadow-sm">
           <CardContent className="py-4">
             <div className="flex items-center justify-between">
-              <span className="text-sm text-orange-800">
-                已选择 {selectedIds.length} 项
-              </span>
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-amber-100 rounded-lg">
+                  <Check className="h-4 w-4 text-amber-600" />
+                </div>
+                <span className="text-sm font-medium text-amber-900">
+                  已选择 <span className="font-bold">{selectedIds.length}</span> 项
+                </span>
+              </div>
               <div className="flex gap-2">
                 <Button
                   variant="outline"
                   size="sm"
                   onClick={() => handleBatchModerate('published')}
                   disabled={batchLoading}
+                  className="bg-white border-green-200 text-green-700 hover:bg-green-50 hover:text-green-800"
                 >
                   <Check className="mr-2 h-4 w-4" />
                   批量通过
@@ -356,6 +375,7 @@ export default function Posts() {
                   size="sm"
                   onClick={() => handleBatchModerate('rejected')}
                   disabled={batchLoading}
+                  className="bg-white border-amber-200 text-amber-700 hover:bg-amber-50 hover:text-amber-800"
                 >
                   <X className="mr-2 h-4 w-4" />
                   批量拒绝
@@ -376,107 +396,162 @@ export default function Posts() {
       )}
 
       {/* 帖子表格 */}
-      <Card>
-        <CardHeader>
-          <CardTitle>帖子列表</CardTitle>
-          <CardDescription>
-            共 {total} 条记录
-          </CardDescription>
+      <Card className="border-slate-200 shadow-sm">
+        <CardHeader className="pb-4 border-b border-slate-100">
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-lg flex items-center gap-2">
+                <Eye className="h-5 w-5 text-primary" />
+                帖子列表
+              </CardTitle>
+              <CardDescription className="mt-1">
+                共 <span className="font-medium text-slate-900">{total}</span> 条记录
+              </CardDescription>
+            </div>
+          </div>
         </CardHeader>
-        <CardContent>
+        <CardContent className="p-0">
           <Table>
             <TableHeader>
-              <TableRow>
-                <TableHead className="w-12">
+              <TableRow className="bg-slate-50/50 hover:bg-slate-50/50">
+                <TableHead className="w-12 rounded-tl-lg">
                   <Checkbox
                     checked={isAllSelected}
                     onCheckedChange={handleSelectAll}
                   />
                 </TableHead>
                 <TableHead className="w-16">ID</TableHead>
-                <TableHead>标题</TableHead>
+                <TableHead className="w-20">预览</TableHead>
+                <TableHead>标题/内容</TableHead>
                 <TableHead>作者</TableHead>
                 <TableHead className="w-24">状态</TableHead>
-                <TableHead className="w-20">点赞</TableHead>
-                <TableHead className="w-20">评论</TableHead>
+                <TableHead className="w-20">互动</TableHead>
                 <TableHead className="w-36">发布时间</TableHead>
-                <TableHead className="w-28">操作</TableHead>
+                <TableHead className="w-28 rounded-tr-lg">操作</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {loading ? (
                 <TableRow>
-                  <TableCell colSpan={9} className="text-center py-8">
-                    <Loader2 className="h-6 w-6 animate-spin mx-auto text-muted-foreground" />
+                  <TableCell colSpan={9} className="text-center py-12">
+                    <div className="flex flex-col items-center gap-3">
+                      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                      <span className="text-sm text-muted-foreground">加载中...</span>
+                    </div>
                   </TableCell>
                 </TableRow>
               ) : posts.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={9} className="text-center py-8 text-muted-foreground">
-                    暂无数据
+                  <TableCell colSpan={9} className="text-center py-12 text-muted-foreground">
+                    <div className="flex flex-col items-center gap-3">
+                      <div className="p-4 bg-slate-100 rounded-full">
+                        <Eye className="h-8 w-8 text-slate-400" />
+                      </div>
+                      <span>暂无数据</span>
+                    </div>
                   </TableCell>
                 </TableRow>
               ) : (
                 posts.map((post) => (
-                  <TableRow key={post.id}>
+                  <TableRow
+                    key={post.id}
+                    className="group hover:bg-slate-50/80 transition-colors"
+                  >
                     <TableCell>
                       <Checkbox
                         checked={selectedIds.includes(post.id)}
                         onCheckedChange={(checked) => handleSelect(post.id, !!checked)}
                       />
                     </TableCell>
-                    <TableCell className="font-mono text-sm">{post.id}</TableCell>
+                    <TableCell className="font-mono text-xs text-slate-500">#{post.id.slice(-6)}</TableCell>
                     <TableCell>
-                      <div className="max-w-[300px]">
-                        <div className="font-medium truncate">{post.title}</div>
-                        <div className="text-sm text-muted-foreground truncate">
-                          {post.content.substring(0, 50)}...
+                      <div className="relative w-14 h-14 rounded-lg overflow-hidden bg-slate-100 ring-1 ring-slate-200 group-hover:ring-primary/30 transition-all">
+                        {post.images && post.images.length > 0 ? (
+                          <img
+                            src={post.images[0].url}
+                            alt=""
+                            className="w-full h-full object-cover"
+                            onError={(e) => {
+                              (e.target as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                        ) : (
+                          <div className="w-full h-full flex items-center justify-center">
+                            <ImageIcon className="h-5 w-5 text-slate-300" />
+                          </div>
+                        )}
+                        {post.images && post.images.length > 1 && (
+                          <div className="absolute bottom-0 right-0 bg-black/60 text-white text-[10px] px-1.5 py-0.5 rounded-tl-md">
+                            +{post.images.length - 1}
+                          </div>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="max-w-[280px] space-y-1">
+                        <div className="font-medium text-slate-900 truncate group-hover:text-primary transition-colors">
+                          {post.title}
+                        </div>
+                        <div className="text-sm text-slate-500 truncate">
+                          {post.content.substring(0, 60)}{post.content.length > 60 ? '...' : ''}
                         </div>
                       </div>
                     </TableCell>
                     <TableCell>
-                      <div className="flex items-center gap-2">
-                        <Avatar className="h-8 w-8">
+                      <div className="flex items-center gap-2.5">
+                        <Avatar className="h-9 w-9 ring-2 ring-white shadow-sm">
                           <AvatarImage src={post.author.avatar} />
-                          <AvatarFallback>{getAvatarFallback(post.author)}</AvatarFallback>
+                          <AvatarFallback className="bg-primary/10 text-primary text-xs font-medium">
+                            {getAvatarFallback(post.author)}
+                          </AvatarFallback>
                         </Avatar>
-                        <div>
-                          <div className="font-medium">{post.author.nickname || post.author.username}</div>
-                          <div className="text-xs text-muted-foreground">@{post.author.username}</div>
+                        <div className="min-w-0">
+                          <div className="font-medium text-sm text-slate-900 truncate">{post.author.nickname || post.author.username}</div>
+                          <div className="text-xs text-slate-500 truncate">@{post.author.username}</div>
                         </div>
                       </div>
                     </TableCell>
                     <TableCell>
-                      <Badge className={`${statusColors[post.status]} text-white`}>
+                      <Badge className={`${statusColors[post.status]} text-white font-medium text-xs px-2.5 py-1`}>
                         {statusText[post.status]}
                       </Badge>
                     </TableCell>
-                    <TableCell>{post.like_count}</TableCell>
-                    <TableCell>{post.comment_count}</TableCell>
-                    <TableCell className="text-sm text-muted-foreground">
+                    <TableCell>
+                      <div className="flex flex-col gap-1 text-xs">
+                        <div className="flex items-center gap-1 text-slate-600">
+                          <ThumbsUp className="h-3 w-3" />
+                          <span>{post.likes_count}</span>
+                        </div>
+                        <div className="flex items-center gap-1 text-slate-600">
+                          <MessageCircle className="h-3 w-3" />
+                          <span>{post.comments_count}</span>
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-sm text-slate-500">
                       {formatDate(post.created_at)}
                     </TableCell>
                     <TableCell>
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" size="sm">
+                          <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-slate-100">
                             <MoreHorizontal className="h-4 w-4" />
                           </Button>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleViewDetail(post)}>
-                            <Eye className="mr-2 h-4 w-4" />
+                        <DropdownMenuContent align="end" className="w-40">
+                          <DropdownMenuItem onClick={() => handleViewDetail(post)} className="cursor-pointer">
+                            <Eye className="mr-2 h-4 w-4 text-blue-500" />
                             查看详情
                           </DropdownMenuItem>
                           {post.status === 'pending' && (
                             <>
                               <DropdownMenuSeparator />
-                              <DropdownMenuItem onClick={() => openModerateDialog(post, 'published')}>
-                                <Check className="mr-2 h-4 w-4" />
+                              <DropdownMenuItem onClick={() => openModerateDialog(post, 'published')} className="cursor-pointer">
+                                <Check className="mr-2 h-4 w-4 text-green-500" />
                                 通过审核
                               </DropdownMenuItem>
-                              <DropdownMenuItem onClick={() => openModerateDialog(post, 'rejected')}>
-                                <X className="mr-2 h-4 w-4" />
+                              <DropdownMenuItem onClick={() => openModerateDialog(post, 'rejected')} className="cursor-pointer">
+                                <X className="mr-2 h-4 w-4 text-amber-500" />
                                 拒绝
                               </DropdownMenuItem>
                             </>
@@ -484,7 +559,7 @@ export default function Posts() {
                           <DropdownMenuSeparator />
                           <DropdownMenuItem
                             onClick={() => openDeleteDialog(post)}
-                            className="text-red-600"
+                            className="text-red-600 cursor-pointer focus:text-red-600"
                           >
                             <Trash2 className="mr-2 h-4 w-4" />
                             删除
@@ -499,7 +574,7 @@ export default function Posts() {
           </Table>
 
           {/* 分页 */}
-          <div className="mt-4">
+          <div className="p-4 border-t border-slate-100 bg-slate-50/50">
             <PaginationNavigator
               currentPage={page}
               totalPages={Math.ceil(total / pageSize)}
@@ -511,43 +586,144 @@ export default function Posts() {
 
       {/* 详情对话框 */}
       <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>帖子详情</DialogTitle>
+        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader className="border-b pb-4">
+            <DialogTitle className="text-xl flex items-center gap-2">
+              <Eye className="h-5 w-5 text-primary" />
+              帖子详情
+            </DialogTitle>
           </DialogHeader>
           {detailLoading ? (
-            <div className="flex items-center justify-center py-8">
-              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="h-8 w-8 animate-spin text-primary" />
             </div>
           ) : selectedPost ? (
-            <div className="space-y-4">
-              <div className="flex items-center gap-4">
-                <Avatar className="h-12 w-12">
+            <div className="space-y-6 py-2">
+              {/* 作者信息卡片 */}
+              <div className="flex items-center gap-4 p-4 bg-gradient-to-r from-slate-50 to-slate-100 rounded-xl">
+                <Avatar className="h-14 w-14 ring-2 ring-white shadow-sm">
                   <AvatarImage src={selectedPost.author?.avatar} />
-                  <AvatarFallback>{getAvatarFallback(selectedPost.author)}</AvatarFallback>
+                  <AvatarFallback className="bg-primary/10 text-primary font-semibold text-lg">
+                    {getAvatarFallback(selectedPost.author)}
+                  </AvatarFallback>
                 </Avatar>
-                <div>
-                  <div className="font-medium">{selectedPost.author?.nickname || selectedPost.author?.username}</div>
+                <div className="flex-1">
+                  <div className="font-semibold text-lg">{selectedPost.author?.nickname || selectedPost.author?.username}</div>
                   <div className="text-sm text-muted-foreground">@{selectedPost.author?.username}</div>
                 </div>
-                <Badge className={`${statusColors[selectedPost.status]} text-white ml-auto`}>
-                  {statusText[selectedPost.status]}
-                </Badge>
+                <div className="flex flex-col items-end gap-2">
+                  <Badge className={`${statusColors[selectedPost.status]} text-white font-medium px-3 py-1`}>
+                    {statusText[selectedPost.status]}
+                  </Badge>
+                  <div className="flex gap-1">
+                    {selectedPost.is_pinned && (
+                      <Badge variant="outline" className="text-amber-600 border-amber-200 bg-amber-50">
+                        <Pin className="h-3 w-3 mr-1" />
+                        置顶
+                      </Badge>
+                    )}
+                    {selectedPost.is_featured && (
+                      <Badge variant="outline" className="text-purple-600 border-purple-200 bg-purple-50">
+                        <Star className="h-3 w-3 mr-1" />
+                        精华
+                      </Badge>
+                    )}
+                  </div>
+                </div>
               </div>
 
-              <div>
-                <h3 className="text-xl font-bold mb-2">{selectedPost.title}</h3>
-                <p className="text-muted-foreground whitespace-pre-wrap">{selectedPost.content}</p>
+              {/* 帖子内容 */}
+              <div className="space-y-4">
+                <h3 className="text-2xl font-bold text-slate-900 leading-tight">{selectedPost.title}</h3>
+                <div className="prose prose-slate max-w-none">
+                  <p className="text-slate-700 whitespace-pre-wrap leading-relaxed text-base">{selectedPost.content}</p>
+                </div>
               </div>
 
-              <div className="flex gap-6 text-sm text-muted-foreground">
-                <span>👍 {selectedPost.like_count} 点赞</span>
-                <span>💬 {selectedPost.comment_count} 评论</span>
-                <span>👁 {selectedPost.view_count} 浏览</span>
+              {/* 图片展示 */}
+              {selectedPost.images && selectedPost.images.length > 0 && (
+                <div className="space-y-3">
+                  <div className="flex items-center gap-2 text-sm font-medium text-slate-700">
+                    <ImageIcon className="h-4 w-4 text-primary" />
+                    <span>图片附件 ({selectedPost.images.length}张)</span>
+                  </div>
+                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+                    {selectedPost.images.map((img, index) => (
+                      <div
+                        key={index}
+                        className="group relative aspect-square rounded-xl overflow-hidden bg-slate-100 ring-1 ring-slate-200 hover:ring-primary/50 transition-all"
+                      >
+                        <img
+                          src={img.url}
+                          alt={`图片 ${index + 1}`}
+                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                          onError={(e) => {
+                            (e.target as HTMLImageElement).src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="%239ca3af" stroke-width="1"%3E%3Crect x="3" y="3" width="18" height="18" rx="2" ry="2"/%3E%3Ccircle cx="8.5" cy="8.5" r="1.5"/%3E%3Cpolyline points="21 15 16 10 5 21"/%3E%3C/svg%3E';
+                            (e.target as HTMLImageElement).classList.add('p-4');
+                          }}
+                        />
+                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* 标签展示 */}
+              {selectedPost.tags && selectedPost.tags.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {selectedPost.tags.map((tag, index) => (
+                    <Badge key={index} variant="secondary" className="bg-slate-100 text-slate-700 hover:bg-slate-200">
+                      #{tag}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+
+              {/* 统计数据 */}
+              <div className="flex items-center gap-6 p-4 bg-slate-50 rounded-xl">
+                <div className="flex items-center gap-2 text-slate-600">
+                  <div className="p-2 bg-rose-100 rounded-lg">
+                    <ThumbsUp className="h-4 w-4 text-rose-500" />
+                  </div>
+                  <div>
+                    <div className="text-lg font-semibold text-slate-900">{selectedPost.likes_count}</div>
+                    <div className="text-xs text-slate-500">点赞</div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 text-slate-600">
+                  <div className="p-2 bg-blue-100 rounded-lg">
+                    <MessageCircle className="h-4 w-4 text-blue-500" />
+                  </div>
+                  <div>
+                    <div className="text-lg font-semibold text-slate-900">{selectedPost.comments_count}</div>
+                    <div className="text-xs text-slate-500">评论</div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 text-slate-600">
+                  <div className="p-2 bg-emerald-100 rounded-lg">
+                    <EyeIcon className="h-4 w-4 text-emerald-500" />
+                  </div>
+                  <div>
+                    <div className="text-lg font-semibold text-slate-900">{selectedPost.views_count}</div>
+                    <div className="text-xs text-slate-500">浏览</div>
+                  </div>
+                </div>
               </div>
 
-              <div className="text-sm text-muted-foreground">
-                发布时间：{formatDate(selectedPost.created_at)}
+              {/* 时间信息 */}
+              <div className="flex items-center justify-between text-sm text-slate-500 pt-4 border-t border-slate-100">
+                <div className="flex items-center gap-4">
+                  <span>发布时间：{formatDate(selectedPost.created_at)}</span>
+                  {selectedPost.group_name && (
+                    <Badge variant="outline" className="text-xs">
+                      圈子：{selectedPost.group_name}
+                    </Badge>
+                  )}
+                </div>
+                {selectedPost.updated_at !== selectedPost.created_at && (
+                  <span>更新于：{formatDate(selectedPost.updated_at)}</span>
+                )}
               </div>
             </div>
           ) : null}

src/pages/Users.tsx

@@ -105,10 +105,12 @@ export default function Users() {
       const response = await rolesApi.getRoles()
       const roles = response.data.data || []
       setAllRoles(roles.map(r => ({
-        id: r.name, // 使用 name 作为 id
+        id: r.name,
         name: r.name,
+        display_name: r.display_name,
         description: r.description,
-        created_at: '', // 后端列表接口不返回这些字段
+        priority: r.priority,
+        created_at: '',
         updated_at: '',
       })))
     } catch (error) {

src/types/index.ts

@@ -26,7 +26,9 @@ export type CommentStatus = 'pending' | 'published' | 'rejected' | 'deleted'
 export interface Role {
   id: string
   name: string
+  display_name: string
   description?: string
+  priority: number
   permissions?: string[]
   created_at: string
   updated_at: string
@@ -45,6 +47,17 @@ export interface User {
   updated_at: string
 }
 
+// 帖子图片
+export interface PostImage {
+  id?: string
+  url: string
+  thumbnail_url?: string
+  preview_url?: string
+  preview_url_large?: string
+  width?: number
+  height?: number
+}
+
 // 帖子
 export interface Post {
   id: string
@@ -52,13 +65,19 @@ export interface Post {
   content: string
   author: User
   status: PostStatus
-  like_count: number
-  comment_count: number
-  view_count: number
+  likes_count: number
+  comments_count: number
+  views_count: number
+  images?: PostImage[]
   created_at: string
   updated_at: string
 }
 
+// 评论图片
+export interface CommentImage {
+  url: string
+}
+
 // 评论
 export interface Comment {
   id: string
@@ -67,7 +86,9 @@ export interface Comment {
   post_id: string
   post_title?: string
   status: CommentStatus
-  like_count: number
+  likes_count: number
+  replies_count?: number
+  images?: CommentImage[]
   created_at: string
   updated_at: string
 }