feat: 更新课程卡片布局，优化教案设计页面，添加响应式屏幕支持

components/course/Card.vue

@@ -52,17 +52,17 @@ const openCourse = (id: number) => {
           <span>{{ data.teacherName || "未知教师" }}</span>
         </p>
       </div>
-      <div class="flex justify-between gap-1 text-xs text-muted-foreground/80">
-        <div class="flex-1 flex flex-col">
+      <div class="flex justify-between gap-4 text-xs text-muted-foreground/80">
+        <div class=" flex flex-col">
           <p>
-            学期：<span>{{ data.semester || "未知" }}</span>
+            学期 <span>{{ data.semester || "未知" }}</span>
           </p>
           <p>
             课程ID：<span>{{ data.id }}</span>
           </p>
         </div>
-        <div class="flex flex-col items-end">
-          <p>{{ data.schoolName }}</p>
+        <div class="flex-1 flex flex-col items-end">
+          <p class="text-ellipsis line-clamp-1">{{ data.schoolName }}</p>
           <div class="flex items-center gap-1">
             <div
               v-if="data.status === 0"

components/fn/teach/LessonPlan.vue

@@ -1,7 +1,58 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const tab = ref('text')
+</script>
 
 <template>
-  <div>教案设计</div>
+  <div class="flex flex-col gap-4">
+    <Tabs
+      v-model="tab"
+      class="w-[400px]"
+    >
+      <TabsList>
+        <TabsTrigger value="text">
+          <div class="flex items-center gap-1">
+            <Icon name="tabler:article" />
+            <span>文本生成</span>
+          </div>
+        </TabsTrigger>
+        <TabsTrigger value="chapter">
+          <div class="flex items-center gap-1">
+            <Icon name="tabler:text-plus" />
+            <span>章节生成</span>
+          </div>
+        </TabsTrigger>
+        <TabsTrigger value="bot">
+          <div class="flex items-center gap-1">
+            <Icon name="tabler:robot" />
+            <span>课程智能体</span>
+          </div>
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+    <div class="flex items-start。 gap-4">
+      <div
+        v-if="tab === 'chapter'"
+        class="flex h-20 flex-col justify-center items-center gap-1 px-8 rounded-md border"
+      >
+        <Icon
+          name="tabler:text-plus"
+          class="text-3xl"
+        />
+        <span class="text-xs font-medium">选择章节</span>
+      </div>
+      <Textarea
+        placeholder="请输入文本来生成内容"
+        class="h-20 flex-1"
+      />
+      <div class="flex flex-col items-center gap-2">
+        <Button size="lg">
+          <Icon name="tabler:stars" />
+          生成教案
+        </Button>
+        <p class="text-xs text-foreground/40">内容由 AI 生成，仅供参考</p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>

pages/course/index.vue

@@ -308,7 +308,7 @@ const onDeleteCourse = (courseId: number) => {
       </div>
       <div
         v-if="coursesList?.rows && coursesList.rows.length > 0"
-        class="grid grid-cols-6 gap-8"
+        class="grid grid-cols-1 lg:grid-cols-4 3xl:grid-cols-5 gap-8"
       >
         <CourseCard
           v-for="course in coursesList?.rows"

tailwind.config.js

@@ -4,6 +4,12 @@ export default {
   content: [],
   theme: {
     extend: {
+      screens: {
+        '3xl': '1792px',
+        '4xl': '2048px',
+        '5xl': '2560px',
+        '6xl': '3840px',
+      },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
@@ -51,14 +57,14 @@ export default {
           5: 'hsl(var(--chart-5))',
         },
         sidebar: {
-          'DEFAULT': 'hsl(var(--sidebar-background))',
-          'foreground': 'hsl(var(--sidebar-foreground))',
-          'primary': 'hsl(var(--sidebar-primary))',
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
           'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          'accent': 'hsl(var(--sidebar-accent))',
+          accent: 'hsl(var(--sidebar-accent))',
           'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          'border': 'hsl(var(--sidebar-border))',
-          'ring': 'hsl(var(--sidebar-ring))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
         },
       },
     },