From 0b16613be4a88ba3dee10ca1d5818d73ca883d7a Mon Sep 17 00:00:00 2001
From: lafay <2021211506@stu.hit.edu.cn>
Date: Fri, 10 Apr 2026 01:16:38 +0800
Subject: [PATCH] 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           |  2 +-
 src/pages/MaterialSubjects.tsx | 32 ++++++++++++++++----------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/api/materials.ts b/src/api/materials.ts
index 3726485..681c899 100644
--- a/src/api/materials.ts
+++ b/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) =>
diff --git a/src/pages/MaterialSubjects.tsx b/src/pages/MaterialSubjects.tsx
index f1f9636..3ff9d31 100644
--- a/src/pages/MaterialSubjects.tsx
+++ b/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"
-                        style={{ '--dynamic-color': subject.color } as React.CSSProperties}
+                        className="w-6 h-6 rounded"
+                        style={{ backgroundColor: subject.color }}
                       />
                     </TableCell>
                     <TableCell className="max-w-[200px] truncate">
@@ -385,18 +385,18 @@ export default function MaterialSubjects() {
               <Label>颜色</Label>
               <div className="flex flex-wrap gap-2">
                 {COLOR_PRESETS.map((color) => (
-                  <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 ${
-                      formData.color === color.value
-                        ? 'border-primary scale-110'
-                        : 'border-transparent hover:scale-105'
-                    }`}
-                    style={{ '--dynamic-color': color.value } as React.CSSProperties}
-                    title={color.name}
-                  />
+<button
+                      key={color.value}
+                      type="button"
+                      onClick={() => setFormData({ ...formData, color: color.value })}
+                      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={{ backgroundColor: color.value }}
+                      title={color.name}
+                    />
                 ))}
               </div>
             </div>