'hfll'

create_database.sql

@@ -27,6 +27,9 @@ CREATE TABLE cases (
     results TEXT NOT NULL COMMENT '项目成果',
     testimonial TEXT NULL COMMENT '客户评价',
     testimonial_author VARCHAR(100) NULL COMMENT '评价人及职位',
+    pdf_url VARCHAR(255) NULL COMMENT '功能说明文档PDF链接',
+    design_url VARCHAR(255) NULL COMMENT '设计稿链接',
+    qrcode_url VARCHAR(255) NULL COMMENT '小程序二维码图片链接',
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
     updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间'
 ) COMMENT='项目案例表';
@@ -44,6 +47,7 @@ CREATE TABLE case_gallery (
     id INT PRIMARY KEY AUTO_INCREMENT COMMENT '图片ID，自增主键',
     case_id INT NOT NULL COMMENT '关联的案例ID',
     image_url VARCHAR(255) NOT NULL COMMENT '图片URL',
+    image_title VARCHAR(100) NULL COMMENT '图片标题',
     display_order INT NOT NULL DEFAULT 0 COMMENT '显示顺序',
     FOREIGN KEY (case_id) REFERENCES cases(id) ON DELETE CASCADE COMMENT '外键关联案例表，案例删除时级联删除'
 ) COMMENT='案例图库表';
@@ -125,8 +129,8 @@ INSERT INTO services (icon, title, description) VALUES
 ('https://cdn-icons-png.flaticon.com/512/1055/1055666.png', 'UI/UX设计', '创造直观、美观且用户友好的界面设计');
 
 -- 向案例表插入初始数据
-INSERT INTO cases (title, description, image, category, client, completion_date, challenge, solution, results, testimonial, testimonial_author) VALUES
-('智慧校园系统', '为教育机构打造的一体化校园管理系统，涵盖教学、行政、学生服务等多个模块', 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', '企业系统', '某知名高校', '2023年8月', '客户面临的挑战是多个独立系统并行运行，数据不一致，管理效率低下。学生和教职工需要在多个系统间切换，用户体验不佳。', '我们为客户设计并实现了一套集成化的智慧校园系统，整合了教务管理、学生服务、行政办公、资源管理等多个模块。系统采用了统一的用户界面和数据标准，实现了单点登录和数据共享。我们还开发了移动端应用，方便师生随时随地访问系统功能。', '系统上线后，管理效率提升了50%，数据处理错误减少了80%，用户满意度提高了60%。系统的自助服务功能减轻了行政人员的工作负担，让他们能够专注于更有价值的任务。', '微隐软件工作室的团队展现了卓越的项目管理和技术能力。他们深入理解了我们复杂的业务需求，并提供了一套既全面又易用的解决方案。新系统极大地改善了我们的管理效率和服务质量。', '陈校长 - 客户负责人');
+INSERT INTO cases (title, description, image, category, client, completion_date, challenge, solution, results, testimonial, testimonial_author, pdf_url, design_url, qrcode_url) VALUES
+('智慧校园系统', '为教育机构打造的一体化校园管理系统，涵盖教学、行政、学生服务等多个模块', 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', '企业系统', '某知名高校', '2023年8月', '客户面临的挑战是多个独立系统并行运行，数据不一致，管理效率低下。学生和教职工需要在多个系统间切换，用户体验不佳。', '我们为客户设计并实现了一套集成化的智慧校园系统，整合了教务管理、学生服务、行政办公、资源管理等多个模块。系统采用了统一的用户界面和数据标准，实现了单点登录和数据共享。我们还开发了移动端应用，方便师生随时随地访问系统功能。', '系统上线后，管理效率提升了50%，数据处理错误减少了80%，用户满意度提高了60%。系统的自助服务功能减轻了行政人员的工作负担，让他们能够专注于更有价值的任务。', '微隐软件工作室的团队展现了卓越的项目管理和技术能力。他们深入理解了我们复杂的业务需求，并提供了一套既全面又易用的解决方案。新系统极大地改善了我们的管理效率和服务质量。', '陈校长 - 客户负责人', '/docs/smart-campus-system.pdf', 'https://www.figma.com/file/smart-campus-design', '/images/smart-campus-qrcode.png');
 
 -- 向案例服务关联表插入数据
 INSERT INTO case_services (case_id, service_name) VALUES
@@ -137,10 +141,10 @@ INSERT INTO case_services (case_id, service_name) VALUES
 (1, '持续支持');
 
 -- 向案例图库表插入数据
-INSERT INTO case_gallery (case_id, image_url, display_order) VALUES
-(1, 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', 1),
-(1, 'https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', 2),
-(1, 'https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', 3);
+INSERT INTO case_gallery (case_id, image_url, image_title, display_order) VALUES
+(1, 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', '系统主界面', 1),
+(1, 'https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', '移动端应用界面', 2),
+(1, 'https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', '数据分析仪表盘', 3);
 
 -- 向团队成员表插入初始数据
 INSERT INTO team_members (name, position, bio, photo) VALUES

src/api/index.js

@@ -7,6 +7,7 @@ const api = {
     fetchConfigParams: () => get('/api/officialWebsite/configParams/list'),
     getCategoryList: () => get('/api/officialWebsite/caseCategory/list'),
     getCasesList: (params) => get('/api/officialWebsite/cases/list', params),
+    getCaseDetail: (id) => get(`/api/officialWebsite/cases/detail/${id}`),
     addLeaveMessage: (params) => post('/api/officialWebsite/leaveMessage', params),
     getSelectedCase: () => get('/api/officialWebsite/cases/selected'),
     getDevelopmentHistory: () => get('/api/officialWebsite/developmentHistory/list'),

src/components/home/CaseSection.vue

@@ -11,7 +11,7 @@ const router = useRouter();
 
 // 查看案例详情处理函数
 const viewCaseDetails = (id) => {
-  router.push(`/cases/${id}`);
+  router.push(`/case/${id}`);
 };
 
 </script>

src/router/index.js

@@ -29,7 +29,7 @@ const routes = [
     component: Cases
   },
   {
-    path: '/cases/:id',
+    path: '/case/:id',
     name: 'CaseDetail',
     component: CaseDetail
   },

src/stores/cases.js

@@ -4,12 +4,119 @@ import api from '@/api'
 
 // 定义案例数据存储
 export const useCasesStore = defineStore('cases', () => {
+    // Mock数据
+    const mockSelectedCases = [
+        {
+            id: '1923006946802786306',
+            title: '智慧校园管理系统',
+            description: '为某知名高校开发的一体化校园管理系统，涵盖教学、行政、学生服务等多个模块',
+            imageUrl: 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+            categoryName: '企业系统',
+            categoryId: 1,
+            client: '某知名高校',
+            completionDate: '2023年8月',
+            challenge: '客户面临的挑战是多个独立系统并行运行，数据不一致，管理效率低下。学生和教职工需要在多个系统间切换，用户体验不佳。',
+            solution: '我们为客户设计并实现了一套集成化的智慧校园系统，整合了教务管理、学生服务、行政办公、资源管理等多个模块。系统采用了统一的用户界面和数据标准，实现了单点登录和数据共享。我们还开发了移动端应用，方便师生随时随地访问系统功能。',
+            results: '系统上线后，管理效率提升了50%，数据处理错误减少了80%，用户满意度提高了60%。系统的自助服务功能减轻了行政人员的工作负担，让他们能够专注于更有价值的任务。',
+            testimonial: '微隐软件工作室的团队展现了卓越的项目管理和技术能力。他们深入理解了我们复杂的业务需求，并提供了一套既全面又易用的解决方案。新系统极大地改善了我们的管理效率和服务质量。',
+            testimonialAuthor: '陈校长 - 客户负责人',
+            pdfUrl: '/docs/smart-campus-system.pdf',
+            designUrl: 'https://www.figma.com/file/smart-campus-design',
+            qrcodeUrl: '/images/smart-campus-qrcode.png',
+            gallery: [
+                {
+                    imageUrl: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+                    imageTitle: '系统主界面'
+                },
+                {
+                    imageUrl: 'https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+                    imageTitle: '移动端应用界面'
+                },
+                {
+                    imageUrl: 'https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+                    imageTitle: '数据分析仪表盘'
+                }
+            ]
+        },
+        {
+            id: '1923006946802786307',
+            title: '电商平台重构',
+            description: '帮助某电商企业重构其线上平台，提升用户体验和系统性能，实现销售额提升30%',
+            imageUrl: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+            categoryName: 'Web应用',
+            categoryId: 2,
+            client: '某知名电商企业',
+            completionDate: '2023年9月',
+            challenge: '客户的电商平台面临用户体验不佳、系统响应缓慢、移动端适配不足等问题，导致用户流失和转化率下降。同时，随着业务量增长，系统稳定性也面临挑战。',
+            solution: '我们对客户的电商平台进行了全面重构，采用了现代化的前端框架和响应式设计，优化了用户界面和交互流程。在后端，我们重构了核心服务，引入了微服务架构和缓存机制，提升了系统性能和可扩展性。同时，我们还加强了系统的安全性，实现了全面的HTTPS和数据加密。',
+            results: '重构后的平台页面加载速度提升了65%，用户停留时间增加了40%，转化率提高了25%，最终带来了30%的销售额增长。系统的稳定性也得到了显著提升，即使在促销高峰期也能保持良好的性能。',
+            testimonial: '微隐软件工作室的团队展现了卓越的技术实力和创新思维。他们不仅解决了我们平台的技术问题，还从用户体验和业务角度提供了宝贵建议。重构后的平台获得了用户的一致好评，为我们带来了实质性的业务增长。',
+            testimonialAuthor: '李总 - 客户产品总监',
+            pdfUrl: '/docs/ecommerce-platform.pdf',
+            designUrl: 'https://www.figma.com/file/ecommerce-design',
+            qrcodeUrl: '/images/ecommerce-qrcode.png',
+            gallery: [
+                {
+                    imageUrl: 'https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+                    imageTitle: '平台首页'
+                },
+                {
+                    imageUrl: 'https://images.unsplash.com/photo-1556740772-1a741d976155?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+                    imageTitle: '商品详情页'
+                },
+                {
+                    imageUrl: 'https://images.unsplash.com/photo-1556761175-129418cb2dfe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+                    imageTitle: '移动端购物流程'
+                }
+            ]
+        },
+        {
+            id: '1923006946802786308',
+            title: '医疗服务APP',
+            description: '为连锁医疗机构开发的患者服务APP，实现在线挂号、问诊和健康管理等功能',
+            imageUrl: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+            categoryName: '移动应用',
+            categoryId: 3,
+            client: '某连锁医疗机构',
+            completionDate: '2023年12月',
+            challenge: '客户希望通过数字化手段提升患者服务体验，减少排队等待时间，同时提高医疗资源利用效率。传统的线下预约和就诊流程繁琐，患者满意度不高。',
+            solution: '我们为客户开发了一款功能全面的医疗服务APP，支持在线挂号、远程问诊、检查报告查询、健康档案管理等功能。APP采用了直观的用户界面和流畅的交互设计，确保各年龄段用户都能轻松使用。在技术层面，我们实现了与医院HIS系统的无缝集成，并采用了严格的数据加密和隐私保护措施。',
+            results: 'APP上线后，患者预约效率提升了80%，平均等待时间减少了65%，患者满意度提高了45%。同时，医生的工作效率也得到了提升，资源利用率增加了30%。APP已成为客户数字化医疗服务的核心平台。',
+            testimonial: '微隐软件工作室深入理解了医疗行业的特殊需求，为我们打造了一款既专业又易用的医疗服务APP。他们在确保数据安全和系统稳定性方面表现出色，为我们的患者提供了便捷、高效的服务体验。',
+            testimonialAuthor: '王院长 - 客户医疗总监',
+            pdfUrl: '/docs/medical-app.pdf',
+            designUrl: 'https://www.figma.com/file/medical-app-design',
+            qrcodeUrl: '/images/medical-app-qrcode.png',
+            gallery: [
+                {
+                    imageUrl: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+                    imageTitle: '挂号预约界面'
+                },
+                {
+                    imageUrl: 'https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+                    imageTitle: '在线问诊模块'
+                },
+                {
+                    imageUrl: 'https://images.unsplash.com/photo-1583324113626-70df0f4deaab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+                    imageTitle: '健康档案管理'
+                }
+            ]
+        }
+    ];
 
-    const selectedCase = ref([])
+    const selectedCase = ref(mockSelectedCases);
 
     const getSelectedCase = async () => {
-        const res = await api.getSelectedCase()
-        selectedCase.value = res.data
+        try {
+            const res = await api.getSelectedCase();
+            if (res.data && res.data.length > 0) {
+                selectedCase.value = res.data;
+            }
+        } catch (error) {
+            console.error('获取精选案例失败:', error);
+            // 如果API调用失败，使用mock数据
+            selectedCase.value = mockSelectedCases;
+        }
     }
 
     return {

src/views/pages/Cases.vue

@@ -32,7 +32,7 @@ const router = useRouter();
 // 查看案例详情
 const viewCaseDetails = (id) => {
     // 跳转到案例详情页
-    router.push(`/cases/${id}`);
+    router.push(`/case/${id}`);
 };
 
 function getCategoryList() {