fix(materials): handle API response format and color rendering

Update the subjects API to handle the nested list structure in the response, and fix color rendering by using direct inline styles instead of CSS custom properties that weren't being properly applied

src/api/materials.ts

@@ -94,7 +94,7 @@ export interface MaterialQueryParams {
 export const subjectsApi = {
   // 获取学科列表
   getSubjects: () =>
-    apiClient.get<ApiResponse<MaterialSubject[]>>('/admin/materials/subjects'),
+    apiClient.get<ApiResponse<{ list: MaterialSubject[] }>>('/admin/materials/subjects'),
 
   // 创建学科
   createSubject: (data: SubjectUpsertRequest) =>

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?.list ?? []
       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 text-dynamic-color" style={{ '--dynamic-color': subject.color } as React.CSSProperties} />
+                        <IconComponent className="h-6 w-6" style={{ color: subject.color }} />
                       </TableCell>
                       <TableCell className="font-medium">{subject.name}</TableCell>
                     <TableCell>
                       <div
-                        className="w-6 h-6 rounded bg-dynamic-color"
+                        className="w-6 h-6 rounded"
-                        style={{ '--dynamic-color': subject.color } as React.CSSProperties}
+                        style={{ backgroundColor: subject.color }}
                       />
                     </TableCell>
                     <TableCell className="max-w-[200px] truncate">
@@ -385,16 +385,16 @@ export default function MaterialSubjects() {
               <Label>颜色</Label>
               <div className="flex flex-wrap gap-2">
                 {COLOR_PRESETS.map((color) => (
-                  <button
+<button
                       key={color.value}
                       type="button"
                       onClick={() => setFormData({ ...formData, color: color.value })}
-                    className={`w-8 h-8 rounded-full border-2 transition-colors bg-dynamic-color ${
+                      className={`w-8 h-8 rounded-full border-2 transition-colors ${
                         formData.color === color.value
                           ? 'border-primary scale-110'
                           : 'border-transparent hover:scale-105'
                       }`}
-                    style={{ '--dynamic-color': color.value } as React.CSSProperties}
+                      style={{ backgroundColor: color.value }}
                       title={color.name}
                     />
                 ))}