1+ <script setup lang="ts">
2+ import { ref , onMounted } from ' vue'
3+ import { useRoute , useRouter } from ' vue-router'
4+ import { Button } from ' @/components/ui/button'
5+
6+ interface ModelingExample {
7+ id: number
8+ title: string
9+ source: string
10+ description: string
11+ tags: string []
12+ problemText: string
13+ }
14+
15+ const route = useRoute ()
16+ const router = useRouter ()
17+ const exampleId = route .params .id as string
18+ const example = ref <ModelingExample | null >(null )
19+ const loading = ref (true )
20+
21+ onMounted (() => {
22+ // 从localStorage获取样例数据
23+ const storedExample = localStorage .getItem (' viewingExample' )
24+ if (storedExample ) {
25+ example .value = JSON .parse (storedExample )
26+ loading .value = false
27+ } else {
28+ // 如果没有找到缓存的数据,可以模拟一个API请求
29+ // 实际项目中应该从API获取
30+ setTimeout (() => {
31+ example .value = {
32+ id: parseInt (exampleId ),
33+ title: " 数学建模样例案例" ,
34+ source: " 全国大学生数学建模竞赛" ,
35+ description: " 这是一个示例数模案例。" ,
36+ tags: [" 数据分析" , " 算法优化" ],
37+ problemText: " 这里是完整的竞赛题目描述文本。"
38+ }
39+ loading .value = false
40+ }, 800 )
41+ }
42+ })
43+
44+ // 基于当前样例开始新任务
45+ const startModelingTask = () => {
46+ if (example .value ) {
47+ localStorage .setItem (' selectedExample' , JSON .stringify (example .value ))
48+ router .push (' /task/create' )
49+ }
50+ }
51+
52+ // 返回样例列表
53+ const goBack = () => {
54+ router .push (' /chat' )
55+ }
56+ </script >
57+
58+ <template >
59+ <div class =" container mx-auto py-8 px-4 max-w-4xl" >
60+ <Button variant =" ghost" class =" mb-6" @click =" goBack" >
61+ <svg xmlns =" http://www.w3.org/2000/svg" width =" 16" height =" 16" viewBox =" 0 0 24 24" fill =" none"
62+ stroke =" currentColor" stroke-width =" 2" stroke-linecap =" round" stroke-linejoin =" round" class =" mr-2" >
63+ <path d =" m15 18-6-6 6-6" />
64+ </svg >
65+ 返回首页
66+ </Button >
67+
68+ <div v-if =" loading" class =" flex justify-center py-12" >
69+ <div class =" animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" ></div >
70+ </div >
71+
72+ <div v-else-if =" example" class =" space-y-8" >
73+ <div class =" space-y-4" >
74+ <h1 class =" text-2xl font-semibold" >{{ example.title }}</h1 >
75+ <p class =" text-muted-foreground" >{{ example.source }}</p >
76+ <div class =" flex flex-wrap gap-2 mt-4" >
77+ <span v-for =" tag in example.tags" :key =" tag"
78+ class =" px-3 py-1 bg-primary/10 text-primary rounded-full text-sm" >
79+ {{ tag }}
80+ </span >
81+ </div >
82+ </div >
83+
84+ <div class =" space-y-4" >
85+ <h2 class =" text-xl font-medium" >题目描述</h2 >
86+ <div class =" p-6 border rounded-lg bg-muted/20" >
87+ <p class =" whitespace-pre-line" >{{ example.problemText }}</p >
88+ </div >
89+ </div >
90+
91+ <div class =" space-y-4" >
92+ <h2 class =" text-xl font-medium" >解题思路</h2 >
93+ <div class =" p-6 border rounded-lg" >
94+ <ol class =" list-decimal list-inside space-y-3" >
95+ <li >分析问题背景和关键变量</li >
96+ <li >收集和预处理相关数据</li >
97+ <li >构建数学模型并确定算法</li >
98+ <li >实现代码并训练模型</li >
99+ <li >验证模型并分析结果</li >
100+ <li >撰写论文并呈现结论</li >
101+ </ol >
102+ </div >
103+ </div >
104+
105+ <div class =" flex justify-center pt-6" >
106+ <Button size =" lg" @click =" startModelingTask" >
107+ 基于此案例开始建模
108+ </Button >
109+ </div >
110+ </div >
111+
112+ <div v-else class =" text-center py-12" >
113+ <p >未找到相关样例</p >
114+ <Button variant =" outline" class =" mt-4" @click =" goBack" >返回首页</Button >
115+ </div >
116+ </div >
117+ </template >
0 commit comments