From 9a15e9f21304300b18a82eaad52a372fae110b35 Mon Sep 17 00:00:00 2001 From: huliyong <2783385703@qq.com> Date: Thu, 15 May 2025 22:31:27 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=94=9F=E4=BA=A7?= =?UTF-8?q?=E7=8E=AF=E5=A2=83=E9=85=8D=E7=BD=AE=E5=92=8CAPI=E8=AF=B7?= =?UTF-8?q?=E6=B1=82=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增`.env.production`文件，配置生产环境API基础URL - 优化`vite.config.js`，支持环境变量和API代理配置 - 重构`request.js`，简化请求拦截器和响应处理逻辑 - 新增`cases.js`和`config.js`存储模块，管理案例和配置数据 - 更新`index.html`，修改页面标题为公司名称 - 优化`CaseDetail.vue`和`Team.vue`，使用新的存储模块和组件 - 新增`CaseItem.vue`和`TeamMemberCard.vue`组件，提升代码复用性 - 删除旧的`casesStore.js`和`caseList.vue`，统一使用新的存储和组件 - 更新`App.vue`，使用配置存储动态渲染导航栏和页脚内容 --- .env.development | 8 +- .env.production | 3 + create_database.sql | 158 +++++ index.html | 15 +- src/App.vue | 31 +- src/api/index.js | 16 + src/assets/scss/main.scss | 1 + src/components/CallToAction.vue | 251 +++++++ src/components/TeamMemberCard.vue | 207 ++++++ src/components/case/caseList.vue | 167 ----- src/components/cases/CaseItem.vue | 219 ++++++ src/components/home/CaseSection.vue | 74 +++ src/components/home/ServiceSection.vue | 235 ++++--- src/main.js | 1 + src/stores/cases.js | 19 + src/stores/casesStore.js | 150 ----- src/stores/config.js | 26 + src/utils/README.md | 84 --- src/utils/api.js | 46 -- src/utils/request.js | 144 ++-- src/views/company/About.vue | 707 +++++++++++++++++--- src/views/company/JobDetail.vue | 3 + src/views/company/Team.vue | 163 +---- src/views/pages/CaseDetail.vue | 129 +++- src/views/pages/Cases.vue | 810 ++++++++-------------- src/views/pages/Contact.vue | 1142 +++++++++++++++++++++++++------- src/views/pages/Home.vue | 635 ++++++++---------- src/views/pages/Services.vue | 660 ++++++------------ vite.config.js | 28 +- 29 files changed, 3595 insertions(+), 2537 deletions(-) create mode 100644 .env.production create mode 100644 create_database.sql create mode 100644 src/api/index.js create mode 100644 src/components/CallToAction.vue create mode 100644 src/components/TeamMemberCard.vue delete mode 100644 src/components/case/caseList.vue create mode 100644 src/components/cases/CaseItem.vue create mode 100644 src/components/home/CaseSection.vue create mode 100644 src/stores/cases.js delete mode 100644 src/stores/casesStore.js create mode 100644 src/stores/config.js delete mode 100644 src/utils/README.md delete mode 100644 src/utils/api.js diff --git a/.env.development b/.env.development index 65aa3ee..d30cbe6 100644 --- a/.env.development +++ b/.env.development @@ -1,5 +1,5 @@ -# 开发环境API基础URL -VITE_API_BASE_URL=http://localhost:3000 -# 其他开发环境变量 -# VITE_APP_MODE=development \ No newline at end of file + + +# 开发环境 +VITE_APP_BASE_API = '/dev-api' \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..b0ca002 --- /dev/null +++ b/.env.production @@ -0,0 +1,3 @@ + +# 生产环境 +VITE_APP_BASE_API = '/prod-api' \ No newline at end of file diff --git a/create_database.sql b/create_database.sql new file mode 100644 index 0000000..bed2a3b --- /dev/null +++ b/create_database.sql @@ -0,0 +1,158 @@ +-- 创建数据库 +CREATE DATABASE IF NOT EXISTS hanhai_website COMMENT='瀚海黎明官方网站数据库'; +USE hanhai_website; + +-- 创建服务表：存储网站提供的服务信息 +CREATE TABLE services ( + id INT PRIMARY KEY AUTO_INCREMENT COMMENT '服务ID，自增主键', + icon VARCHAR(255) NOT NULL COMMENT '服务图标URL', + title VARCHAR(100) NOT NULL COMMENT '服务标题', + description TEXT NOT NULL COMMENT '服务详细描述', + category VARCHAR(50) NULL COMMENT '服务分类', + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', + updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' +) COMMENT='服务信息表'; + +-- 创建案例表：存储公司完成的项目案例 +CREATE TABLE cases ( + id INT PRIMARY KEY AUTO_INCREMENT COMMENT '案例ID，自增主键', + title VARCHAR(100) NOT NULL COMMENT '案例标题', + description TEXT NOT NULL COMMENT '案例简介', + image VARCHAR(255) NOT NULL COMMENT '案例主图URL', + category VARCHAR(50) NOT NULL COMMENT '案例分类', + client VARCHAR(100) NOT NULL COMMENT '客户名称', + completion_date VARCHAR(50) NOT NULL COMMENT '完成日期', + challenge TEXT NOT NULL COMMENT '客户面临的挑战', + solution TEXT NOT NULL COMMENT '提供的解决方案', + results TEXT NOT NULL COMMENT '项目成果', + testimonial TEXT NULL COMMENT '客户评价', + testimonial_author VARCHAR(100) NULL COMMENT '评价人及职位', + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', + updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' +) COMMENT='项目案例表'; + +-- 创建案例服务关联表：存储案例使用的服务列表 +CREATE TABLE case_services ( + id INT PRIMARY KEY AUTO_INCREMENT COMMENT '关联ID，自增主键', + case_id INT NOT NULL COMMENT '关联的案例ID', + service_name VARCHAR(100) NOT NULL COMMENT '服务名称', + FOREIGN KEY (case_id) REFERENCES cases(id) ON DELETE CASCADE COMMENT '外键关联案例表，案例删除时级联删除' +) COMMENT='案例服务关联表'; + +-- 创建案例图库表：存储案例的多张展示图片 +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', + display_order INT NOT NULL DEFAULT 0 COMMENT '显示顺序', + FOREIGN KEY (case_id) REFERENCES cases(id) ON DELETE CASCADE COMMENT '外键关联案例表，案例删除时级联删除' +) COMMENT='案例图库表'; + +-- 创建团队成员表：存储公司团队成员信息 +CREATE TABLE team_members ( + id INT PRIMARY KEY AUTO_INCREMENT COMMENT '成员ID，自增主键', + name VARCHAR(50) NOT NULL COMMENT '成员姓名', + position VARCHAR(100) NOT NULL COMMENT '职位', + bio TEXT NOT NULL COMMENT '个人简介', + photo VARCHAR(255) NOT NULL COMMENT '照片URL', + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', + updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' +) COMMENT='团队成员表'; + +-- 创建社交媒体表：存储团队成员的社交媒体链接 +CREATE TABLE social_media ( + id INT PRIMARY KEY AUTO_INCREMENT COMMENT '社交媒体ID，自增主键', + member_id INT NOT NULL COMMENT '关联的成员ID', + type VARCHAR(50) NOT NULL COMMENT '社交媒体类型(如wechat, linkedin)', + url VARCHAR(255) NOT NULL COMMENT '社交媒体链接', + qrcode VARCHAR(255) NULL COMMENT '二维码图片URL(微信等)', + FOREIGN KEY (member_id) REFERENCES team_members(id) ON DELETE CASCADE COMMENT '外键关联成员表，成员删除时级联删除' +) COMMENT='社交媒体表'; + +-- 创建职位表：存储招聘职位信息 +CREATE TABLE job_openings ( + id INT PRIMARY KEY AUTO_INCREMENT COMMENT '职位ID，自增主键', + title VARCHAR(100) NOT NULL COMMENT '职位名称', + description TEXT NOT NULL COMMENT '职位描述', + requirements TEXT NULL COMMENT '职位要求', + link VARCHAR(255) NOT NULL COMMENT '职位详情链接', + is_active BOOLEAN DEFAULT TRUE COMMENT '是否激活', + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', + updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' +) COMMENT='招聘职位表'; + +-- 创建组件表：存储网站可复用组件的配置 +CREATE TABLE components ( + id INT PRIMARY KEY AUTO_INCREMENT COMMENT '组件ID，自增主键', + name VARCHAR(100) NOT NULL COMMENT '组件名称', + type VARCHAR(50) NOT NULL COMMENT '组件类型', + content JSON NOT NULL COMMENT '组件内容(JSON格式)', + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', + updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' +) COMMENT='网站组件表'; + +-- 创建用户表：存储后台管理用户 +CREATE TABLE users ( + id INT PRIMARY KEY AUTO_INCREMENT COMMENT '用户ID，自增主键', + username VARCHAR(50) NOT NULL UNIQUE COMMENT '用户名', + password VARCHAR(255) NOT NULL COMMENT '密码(加密存储)', + email VARCHAR(100) NOT NULL UNIQUE COMMENT '电子邮箱', + role VARCHAR(20) NOT NULL DEFAULT 'editor' COMMENT '用户角色(admin/editor)', + last_login TIMESTAMP NULL COMMENT '最后登录时间', + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', + updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' +) COMMENT='后台用户表'; + +-- 创建联系表单表：存储网站访客提交的联系信息 +CREATE TABLE contact_messages ( + id INT PRIMARY KEY AUTO_INCREMENT COMMENT '消息ID，自增主键', + name VARCHAR(100) NOT NULL COMMENT '联系人姓名', + email VARCHAR(100) NOT NULL COMMENT '联系人邮箱', + phone VARCHAR(20) NULL COMMENT '联系电话', + subject VARCHAR(200) NOT NULL COMMENT '主题', + message TEXT NOT NULL COMMENT '消息内容', + status VARCHAR(20) DEFAULT 'unread' COMMENT '消息状态(unread/read/replied)', + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间' +) COMMENT='联系表单消息表'; + +-- 向服务表插入初始数据 +INSERT INTO services (icon, title, description) VALUES +('https://cdn-icons-png.flaticon.com/512/2920/2920277.png', '定制软件开发', '根据您的业务需求，量身定制专属软件解决方案'), +('https://cdn-icons-png.flaticon.com/512/2586/2586488.png', '移动应用开发', '打造高性能、用户友好的iOS和Android应用'), +('https://cdn-icons-png.flaticon.com/512/1055/1055687.png', 'Web应用开发', '开发响应式、现代化的Web应用和网站'), +('https://cdn-icons-png.flaticon.com/512/1935/1935765.png', '企业软件解决方案', '提供ERP、CRM等企业级软件解决方案'), +('https://cdn-icons-png.flaticon.com/512/4727/4727266.png', '云服务与DevOps', '云架构设计、部署和DevOps自动化服务'), +('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 case_services (case_id, service_name) VALUES +(1, '系统规划'), +(1, '软件开发'), +(1, '数据迁移'), +(1, '用户培训'), +(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 team_members (name, position, bio, photo) VALUES +('张明', '创始人 & CEO', '拥有15年软件开发和团队管理经验，曾在多家知名科技公司担任技术负责人', 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80'), +('李婷', '技术总监', '计算机科学博士，专注于人工智能和大数据领域，拥有多项技术专利', 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80'); + +-- 向社交媒体表插入数据 +INSERT INTO social_media (member_id, type, url, qrcode) VALUES +(1, 'linkedin', 'https://linkedin.com/', NULL), +(1, 'github', 'https://github.com/', NULL), +(1, 'wechat', 'javascript:void(0);', '/images/qrcode-wechat.jpg'), +(1, 'wecom', 'javascript:void(0);', '/images/qrcode-wecom.jpg'), +(2, 'linkedin', 'https://linkedin.com/', NULL), +(2, 'github', 'https://github.com/', NULL), +(2, 'xiaohongshu', 'https://xiaohongshu.com/', NULL); \ No newline at end of file diff --git a/index.html b/index.html index 8388c4b..6371bcb 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,16 @@ - + + - Vite + Vue - - + 湖南瀚海黎明信息科技有限公司 + + +
- - + + + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 1c7b6f2..4d5f2f5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,11 @@ @@ -39,17 +46,15 @@ onMounted(() => {
@@ -85,8 +90,8 @@ onMounted(() => {
@@ -98,7 +103,7 @@ onMounted(() => {
  • 关于我们
    • -
    +

    联系我们

      -
    • 深圳市南山区科技园
      • -
    • info@hanhaisoft.com
      • -
    • +86 755-8888-7777
      • +
    • {{ configParams.address }}
      • +
    • {{ configParams.email }}
      • +
    • {{ configParams.phone }}
    -

    © 2023 瀚海黎明. 保留所有权利.

    +

    © 2025 {{ configParams.company_name }}. 保留所有权利.

    隐私政策 服务条款 diff --git a/src/api/index.js b/src/api/index.js new file mode 100644 index 0000000..31319a4 --- /dev/null +++ b/src/api/index.js @@ -0,0 +1,16 @@ +import { get, post, put, del } from '../utils/request' + + +// API接口管理 +const api = { + // 获取配置数据 + fetchConfigParams: () => get('/api/officialWebsite/configParams/list'), + getCategoryList: () => get('/api/officialWebsite/caseCategory/list'), + getCasesList: (params) => get('/api/officialWebsite/cases/list', params), + addLeaveMessage: (params) => post('/api/officialWebsite/leaveMessage', params), + getSelectedCase: () => get('/api/officialWebsite/cases/selected'), + getDevelopmentHistory: () => get('/api/officialWebsite/developmentHistory/list'), + getServiceProcess: () => get('/api/officialWebsite/serviceProcess/list') +} + +export default api \ No newline at end of file diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 0f3d8fa..16848df 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -10,6 +10,7 @@ $text-light: #5a6a7e; $light-bg: #f8f9fa; $dark-bg: #1a1a1a; $shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.05); +$shadow-md: 0 10px 20px rgba(0, 0, 0, 0.08); $shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.1); $shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.3); diff --git a/src/components/CallToAction.vue b/src/components/CallToAction.vue new file mode 100644 index 0000000..e50cace --- /dev/null +++ b/src/components/CallToAction.vue @@ -0,0 +1,251 @@ + + + + + \ No newline at end of file diff --git a/src/components/TeamMemberCard.vue b/src/components/TeamMemberCard.vue new file mode 100644 index 0000000..9d35a48 --- /dev/null +++ b/src/components/TeamMemberCard.vue @@ -0,0 +1,207 @@ + + + + + \ No newline at end of file diff --git a/src/components/case/caseList.vue b/src/components/case/caseList.vue deleted file mode 100644 index c183f09..0000000 --- a/src/components/case/caseList.vue +++ /dev/null @@ -1,167 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/cases/CaseItem.vue b/src/components/cases/CaseItem.vue new file mode 100644 index 0000000..2f16cee --- /dev/null +++ b/src/components/cases/CaseItem.vue @@ -0,0 +1,219 @@ + + + + + \ No newline at end of file diff --git a/src/components/home/CaseSection.vue b/src/components/home/CaseSection.vue new file mode 100644 index 0000000..71b236b --- /dev/null +++ b/src/components/home/CaseSection.vue @@ -0,0 +1,74 @@ + + + + + \ No newline at end of file diff --git a/src/components/home/ServiceSection.vue b/src/components/home/ServiceSection.vue index ce75035..4dcdb13 100644 --- a/src/components/home/ServiceSection.vue +++ b/src/components/home/ServiceSection.vue @@ -1,137 +1,132 @@ \ No newline at end of file diff --git a/src/main.js b/src/main.js index e88cd0b..0fa4e7e 100644 --- a/src/main.js +++ b/src/main.js @@ -15,6 +15,7 @@ import './assets/scss/main.scss' // 导入FontAwesome图标库 import '@fortawesome/fontawesome-free/css/all.min.css' + // 创建Pinia实例 const pinia = createPinia() diff --git a/src/stores/cases.js b/src/stores/cases.js new file mode 100644 index 0000000..f66bf15 --- /dev/null +++ b/src/stores/cases.js @@ -0,0 +1,19 @@ +import { defineStore } from 'pinia' +import { ref, computed, reactive } from 'vue' +import api from '@/api' + +// 定义案例数据存储 +export const useCasesStore = defineStore('cases', () => { + + const selectedCase = ref([]) + + const getSelectedCase = async () => { + const res = await api.getSelectedCase() + selectedCase.value = res.data + } + + return { + selectedCase, + getSelectedCase, + } +}) \ No newline at end of file diff --git a/src/stores/casesStore.js b/src/stores/casesStore.js deleted file mode 100644 index 063a581..0000000 --- a/src/stores/casesStore.js +++ /dev/null @@ -1,150 +0,0 @@ -import { defineStore } from 'pinia' -import { ref, computed } from 'vue' - -// 定义案例数据存储 -export const useCasesStore = defineStore('cases', () => { - // 案例数据 - const casesList = ref([ - { - id: 1, - title: '企业资源管理系统', - description: '为某制造企业开发的一套完整ERP系统，实现了生产、销售、库存等全流程管理', - image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - category: '企业系统', - client: '某制造业集团', - completionDate: '2023年6月', - services: ['系统架构设计', '数据库优化', '前端开发', '后端开发', '系统集成'], - challenge: '客户面临的主要挑战是多个业务系统之间数据孤岛问题，导致信息流通不畅，管理效率低下。同时，随着业务规模扩大，原有系统已无法满足日益增长的业务需求。', - solution: '我们为客户设计并实现了一套全面的企业资源管理系统，整合了生产、销售、采购、库存、财务等多个模块。系统采用微服务架构，确保了各模块之间的松耦合与高内聚，同时保证了系统的可扩展性和稳定性。我们还为客户定制了数据分析和决策支持功能，帮助管理层快速获取业务洞察。', - results: '系统上线后，客户的运营效率提升了35%，信息处理时间缩短了60%，库存周转率提高了25%，大幅降低了运营成本。同时，实时的数据分析功能帮助客户更快速地响应市场变化，提升了企业的竞争力。', - testimonial: '微隐软件工作室的团队展现了卓越的专业能力和服务态度。他们不仅理解我们的业务需求，还能提供创新的技术解决方案。新系统极大地提升了我们的运营效率，是我们数字化转型的重要一步。', - testimonialAuthor: '张总 - 客户CIO', - gallery: [ - 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' - ] - }, - { - id: 2, - title: '电商平台重构', - description: '帮助某电商企业重构其线上平台，提升用户体验和系统性能，实现销售额提升30%', - image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - category: 'Web应用', - client: '某知名电商企业', - completionDate: '2023年9月', - services: ['用户体验设计', '前端重构', '后端优化', '性能调优', '安全加固'], - challenge: '客户的电商平台面临用户体验不佳、系统响应缓慢、移动端适配不足等问题，导致用户流失和转化率下降。同时，随着业务量增长，系统稳定性也面临挑战。', - solution: '我们对客户的电商平台进行了全面重构，采用了现代化的前端框架和响应式设计，优化了用户界面和交互流程。在后端，我们重构了核心服务，引入了微服务架构和缓存机制，提升了系统性能和可扩展性。同时，我们还加强了系统的安全性，实现了全面的HTTPS和数据加密。', - results: '重构后的平台页面加载速度提升了65%，用户停留时间增加了40%，转化率提高了25%，最终带来了30%的销售额增长。系统的稳定性也得到了显著提升，即使在促销高峰期也能保持良好的性能。', - testimonial: '微隐软件工作室的团队展现了卓越的技术实力和创新思维。他们不仅解决了我们平台的技术问题，还从用户体验和业务角度提供了宝贵建议。重构后的平台获得了用户的一致好评，为我们带来了实质性的业务增长。', - testimonialAuthor: '李总 - 客户产品总监', - gallery: [ - 'https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1556740772-1a741d976155?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1556761175-129418cb2dfe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' - ] - }, - { - id: 3, - title: '医疗服务APP', - description: '为连锁医疗机构开发的患者服务APP，实现在线挂号、问诊和健康管理等功能', - image: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - category: '移动应用', - client: '某连锁医疗机构', - completionDate: '2023年12月', - services: ['移动应用开发', 'UI/UX设计', '后端API开发', '数据安全', '系统集成'], - challenge: '客户希望通过数字化手段提升患者服务体验，减少排队等待时间，同时提高医疗资源利用效率。传统的线下预约和就诊流程繁琐，患者满意度不高。', - solution: '我们为客户开发了一款功能全面的医疗服务APP，支持在线挂号、远程问诊、检查报告查询、健康档案管理等功能。APP采用了直观的用户界面和流畅的交互设计，确保各年龄段用户都能轻松使用。在技术层面，我们实现了与医院HIS系统的无缝集成，并采用了严格的数据加密和隐私保护措施。', - results: 'APP上线后，患者预约效率提升了80%，平均等待时间减少了65%，患者满意度提高了45%。同时，医生的工作效率也得到了提升，资源利用率增加了30%。APP已成为客户数字化医疗服务的核心平台。', - testimonial: '微隐软件工作室深入理解了医疗行业的特殊需求，为我们打造了一款既专业又易用的医疗服务APP。他们在确保数据安全和系统稳定性方面表现出色，为我们的患者提供了便捷、高效的服务体验。', - testimonialAuthor: '王院长 - 客户医疗总监', - gallery: [ - 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1583324113626-70df0f4deaab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' - ] - }, - { - id: 4, - title: '金融数据可视化平台', - description: '为金融机构开发的数据分析和可视化平台，帮助决策者快速洞察市场趋势', - image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - category: 'Web应用', - client: '某投资管理公司', - completionDate: '2024年2月', - services: ['数据分析', '可视化设计', '前端开发', 'API集成', '实时数据处理'], - challenge: '客户需要一个能够整合多源金融数据，并提供直观、实时的可视化分析工具，帮助投资分析师和决策者快速识别市场趋势和投资机会。', - solution: '我们为客户开发了一个功能强大的金融数据可视化平台，整合了市场数据、公司财报、宏观经济指标等多种数据源。平台提供了丰富的图表类型和分析工具，支持自定义仪表盘和报告。我们采用了高性能的前端渲染技术和实时数据处理架构，确保了大数据量下的流畅体验。', - results: '平台上线后，客户的数据分析效率提升了70%，决策周期缩短了50%，投资组合表现超过了基准指数15%。平台的预测模型准确率达到了85%，为客户提供了显著的竞争优势。', - testimonial: '微隐软件工作室交付的数据可视化平台超出了我们的预期。他们不仅具备出色的技术能力，还展现了对金融行业的深刻理解。平台直观的界面和强大的分析功能极大地提升了我们的决策效率和准确性。', - testimonialAuthor: '赵总 - 客户投资总监', - gallery: [ - 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' - ] - }, - { - id: 5, - title: '智慧校园系统', - description: '为教育机构打造的一体化校园管理系统，涵盖教学、行政、学生服务等多个模块', - image: 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - category: '企业系统', - client: '某知名高校', - completionDate: '2023年8月', - services: ['系统规划', '软件开发', '数据迁移', '用户培训', '持续支持'], - challenge: '客户面临的挑战是多个独立系统并行运行，数据不一致，管理效率低下。学生和教职工需要在多个系统间切换，用户体验不佳。', - solution: '我们为客户设计并实现了一套集成化的智慧校园系统，整合了教务管理、学生服务、行政办公、资源管理等多个模块。系统采用了统一的用户界面和数据标准，实现了单点登录和数据共享。我们还开发了移动端应用，方便师生随时随地访问系统功能。', - results: '系统上线后，管理效率提升了50%，数据处理错误减少了80%，用户满意度提高了60%。系统的自助服务功能减轻了行政人员的工作负担，让他们能够专注于更有价值的任务。', - testimonial: '微隐软件工作室的团队展现了卓越的项目管理和技术能力。他们深入理解了我们复杂的业务需求，并提供了一套既全面又易用的解决方案。新系统极大地改善了我们的管理效率和服务质量。', - testimonialAuthor: '陈校长 - 客户负责人', - gallery: [ - 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' - ] - }, - { - id: 6, - title: '品牌官网设计', - description: '为高端品牌设计的响应式官方网站，展现品牌形象并提升用户转化率', - image: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - category: 'UI/UX设计', - client: '某高端消费品牌', - completionDate: '2024年1月', - services: ['品牌策略', 'UI/UX设计', '前端开发', 'CMS实现', 'SEO优化'], - challenge: '客户的原有网站设计过时，无法有效展现品牌高端形象，且缺乏移动端适配，导致用户体验不佳和转化率低下。', - solution: '我们为客户重新设计了品牌官网，采用了现代简约的设计风格，突出品牌的高端定位。网站采用了响应式设计，确保在各种设备上都能提供出色的用户体验。我们还优化了产品展示和购买流程，降低了用户转化的摩擦。在技术层面，我们实现了高性能的前端架构和易用的内容管理系统。', - results: '新网站上线后，用户停留时间增加了45%，页面跳出率降低了30%，转化率提升了35%。网站的加载速度提高了60%，搜索引擎排名也有显著提升。客户的品牌形象得到了有效提升，线上销售额增长了40%。', - testimonial: '微隐软件工作室的设计团队展现了卓越的创意和专业能力。他们不仅理解我们的品牌价值，还能将其完美地转化为视觉设计。新网站获得了客户和合作伙伴的一致好评，成为了我们品牌传播的重要窗口。', - testimonialAuthor: '林总 - 客户市场总监', - gallery: [ - 'https://images.unsplash.com/photo-1542744094-3a31f272c490?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1542744173-8659239e9452?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - 'https://images.unsplash.com/photo-1542744173-05336fcc7ad4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' - ] - } - ]) - - // 获取单个案例的方法 - const getCaseById = (id) => { - return casesList.value.find(item => item.id === id) || null - } - - // 获取相关案例的方法 - const getRelatedCases = (currentCaseId, category) => { - return casesList.value - .filter(item => - item.id !== currentCaseId && - item.category === category - ) - .slice(0, 3) - } - - return { - casesList, - getCaseById, - getRelatedCases - } -}) \ No newline at end of file diff --git a/src/stores/config.js b/src/stores/config.js new file mode 100644 index 0000000..53ed218 --- /dev/null +++ b/src/stores/config.js @@ -0,0 +1,26 @@ +import { defineStore } from 'pinia' +import { ref, computed, reactive } from 'vue' +import api from '@/api' + +// 定义案例数据存储 +export const useConfigStore = defineStore('config', () => { + + const configParams = reactive({}) + + const map = { + 0 : 'text', + 1 : 'content', + 2 : 'imageUrl', + } + + const getConfigParams = async () => { + const res = await api.fetchConfigParams() + res.forEach(item => { + configParams[item.code] = item[map[item.type]] + }) + } + return { + configParams, + getConfigParams + } +}) \ No newline at end of file diff --git a/src/utils/README.md b/src/utils/README.md deleted file mode 100644 index 8a77a3f..0000000 --- a/src/utils/README.md +++ /dev/null @@ -1,84 +0,0 @@ -# API请求工具使用说明 - -## 简介 - -本项目使用Axios封装了HTTP请求，并集中管理API接口，便于维护和使用。 - -## 文件结构 - -- `request.js`: Axios实例配置和请求/响应拦截器 -- `api.js`: 集中管理所有API接口 - -## 使用方法 - -### 在组件中使用 - -```javascript - -``` - -### 添加新的API接口 - -在`api.js`文件中添加新的接口定义： - -```javascript -// 在api对象中添加新接口 -const api = { - // 现有接口... - - // 新增接口 - getNewData: (params) => get('/new-endpoint', params), - submitNewForm: (data) => post('/new-form', data), -} -``` - -### 自定义请求配置 - -所有请求方法都支持传入自定义配置： - -```javascript -// 带自定义配置的请求 -api.getCustomData = (params) => get('/custom', params, { - timeout: 5000, - headers: { - 'Custom-Header': 'value' - } -}) -``` - -## 注意事项 - -1. API基础URL通过环境变量`VITE_API_BASE_URL`配置 -2. 默认已配置请求超时时间为15秒 -3. 默认已配置token认证，会自动从localStorage获取token并添加到请求头 -4. 响应拦截器会自动处理常见的HTTP错误状态码 \ No newline at end of file diff --git a/src/utils/api.js b/src/utils/api.js deleted file mode 100644 index 4aa1595..0000000 --- a/src/utils/api.js +++ /dev/null @@ -1,46 +0,0 @@ -import { get, post, put, del } from './request' - -// API接口管理 -const api = { - // 示例接口 - // 获取首页数据 - getHomeData: () => get('/home'), - - // 获取关于我们数据 - getAboutData: () => get('/about'), - - // 获取服务列表 - getServices: () => get('/services'), - - // 获取案例列表 - getCases: (params) => get('/cases', params), - - // 获取案例详情 - getCaseDetail: (id) => get(`/cases/${id}`), - - // 获取团队成员 - getTeamMembers: () => get('/team'), - - // 获取博客列表 - getBlogs: (params) => get('/blogs', params), - - // 获取博客详情 - getBlogDetail: (id) => get(`/blogs/${id}`), - - // 提交联系表单 - submitContact: (data) => post('/contact', data), - - // 用户相关接口 - user: { - // 登录 - login: (data) => post('/user/login', data), - // 注册 - register: (data) => post('/user/register', data), - // 获取用户信息 - getInfo: () => get('/user/info'), - // 更新用户信息 - updateInfo: (data) => put('/user/info', data) - } -} - -export default api \ No newline at end of file diff --git a/src/utils/request.js b/src/utils/request.js index 81283d3..c4a507b 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -1,112 +1,56 @@ -import axios from 'axios' +import axios from 'axios'; -// 创建axios实例 -const service = axios.create({ - // 设置基础URL，如果有环境变量可以使用环境变量 - baseURL: import.meta.env.VITE_API_BASE_URL || '', - // 请求超时时间 - timeout: 15000, - // 请求头设置 - headers: { - 'Content-Type': 'application/json;charset=utf-8' - } -}) +const api = axios.create({ + baseURL: import.meta.env.VITE_APP_BASE_API, + timeout: 50000, + headers: { + 'Content-Type': 'application/json' + } +}); // 请求拦截器 -service.interceptors.request.use( - config => { - // 在发送请求之前做些什么 - // 例如：可以在这里统一添加token - const token = localStorage.getItem('token') - if (token) { - config.headers['Authorization'] = `Bearer ${token}` +api.interceptors.request.use( + config => { + const token = localStorage.getItem('token'); + if (token) { + config.headers.Authorization = `Bearer ${token}`; + } + return config; + }, + error => { + return Promise.reject(error); } - return config - }, - error => { - // 对请求错误做些什么 - console.error('请求错误:', error) - return Promise.reject(error) - } -) +); // 响应拦截器 -service.interceptors.response.use( - response => { - // 对响应数据做点什么 - const res = response.data - - // 根据自己的业务逻辑判断响应是否成功 - // 这里假设后端返回的数据格式为 { code: 200, data: {}, message: '' } - if (res.code && res.code !== 200) { - // 处理业务错误 - console.error('业务错误:', res.message || '未知错误') - return Promise.reject(new Error(res.message || '未知错误')) - } - - return res - }, - error => { - // 对响应错误做点什么 - let message = '网络错误' - - if (error.response) { - // 请求已发出，但服务器响应的状态码不在 2xx 范围内 - switch (error.response.status) { - case 401: - message = '未授权，请重新登录' - // 可以在这里处理登出逻辑 - break - case 403: - message = '拒绝访问' - break - case 404: - message = '请求的资源不存在' - break - case 500: - message = '服务器内部错误' - break - default: - message = `请求错误: ${error.response.status}` - } - } else if (error.request) { - // 请求已发出，但没有收到响应 - message = '服务器未响应' - } else { - // 请求配置有误 - message = error.message +api.interceptors.response.use( + response => { + return response.data; + }, + error => { + if (error.response && error.response.status === 401) { + // 处理未授权的情况 + // 可以在这里触发退出登录或跳转到登录页 + } + return Promise.reject(error); } - - console.error('响应错误:', message) - return Promise.reject(error) - } -) +); -// 封装GET请求 -export function get(url, params, config = {}) { - return service.get(url, { - params, - ...config - }) -} +// 封装HTTP请求方法 +export const get = (url, params) => { + return api.get(url, { params }); +}; -// 封装POST请求 -export function post(url, data, config = {}) { - return service.post(url, data, config) -} +export const post = (url, data) => { + return api.post(url, data); +}; -// 封装PUT请求 -export function put(url, data, config = {}) { - return service.put(url, data, config) -} +export const put = (url, data) => { + return api.put(url, data); +}; -// 封装DELETE请求 -export function del(url, params, config = {}) { - return service.delete(url, { - params, - ...config - }) -} +export const del = (url) => { + return api.delete(url); +}; -// 导出axios实例 -export default service \ No newline at end of file +export default api; \ No newline at end of file diff --git a/src/views/company/About.vue b/src/views/company/About.vue index 16f5315..f8ce2fb 100644 --- a/src/views/company/About.vue +++ b/src/views/company/About.vue @@ -1,141 +1,628 @@ \ No newline at end of file diff --git a/src/views/company/JobDetail.vue b/src/views/company/JobDetail.vue index 42d22f7..6e67af0 100644 --- a/src/views/company/JobDetail.vue +++ b/src/views/company/JobDetail.vue @@ -3,6 +3,9 @@ import { ref, onMounted } from 'vue'; import { useRoute } from 'vue-router'; import PageHeader from '../../components/PageHeader.vue'; +import { useConfigStore } from '@/stores/config' +const { configParams } = useConfigStore() + // 获取路由参数 const route = useRoute(); const jobId = route.params.id; diff --git a/src/views/company/Team.vue b/src/views/company/Team.vue index 3b20538..9f02764 100644 --- a/src/views/company/Team.vue +++ b/src/views/company/Team.vue @@ -1,6 +1,10 @@ - \ No newline at end of file diff --git a/src/views/pages/Services.vue b/src/views/pages/Services.vue index aaf1b35..0208f69 100644 --- a/src/views/pages/Services.vue +++ b/src/views/pages/Services.vue @@ -1,27 +1,35 @@