comclib/Home-Care
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 初始化居家上门服务系统完整项目代码

Browse Source 
- Spring Boot 后端服务 (hss-home-service)
- delivery-miniapp 配送小程序
- website 官网 (Nuxt)
- docs 架构设计文档
- Docker 容器化部署配置

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
comclib
2026-05-19 09:04:49 +08:00
parent 46c7887a18
commit c02029a5f3
471 changed files with 42313 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
hss-home-service/website/components/AppFooter.vue Normal file
View File

@@ -0,0 +1,45 @@
<script setup lang="ts">
import { siteName, footerLinks } from '~/data/siteContent'
</script>
<template>
<footer class="bg-gray-900 text-gray-300 pt-16 pb-8">
<div class="section-container">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
<div>
<h4 class="text-white font-bold mb-4">{{ siteName }}</h4>
<p class="text-sm text-gray-400">智慧医养居家上门服务闭环管理平台</p>
</div>
<div>
<h5 class="text-white font-semibold mb-3">解决方案</h5>
<ul class="space-y-2">
<li v-for="l in footerLinks.solutions" :key="l.to">
<NuxtLink :to="l.to" class="text-sm text-gray-400 hover:text-white transition-colors">{{ l.label }}</NuxtLink>
</li>
</ul>
</div>
<div>
<h5 class="text-white font-semibold mb-3">应用场景</h5>
<ul class="space-y-2">
<li v-for="l in footerLinks.scenarios" :key="l.to">
<NuxtLink :to="l.to" class="text-sm text-gray-400 hover:text-white transition-colors">{{ l.label }}</NuxtLink>
</li>
</ul>
</div>
<div>
<h5 class="text-white font-semibold mb-3">关于</h5>
<ul class="space-y-2">
<li v-for="l in footerLinks.company" :key="l.to">
<NuxtLink :to="l.to" class="text-sm text-gray-400 hover:text-white transition-colors">{{ l.label }}</NuxtLink>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 pt-8 text-center text-sm text-gray-500">
<p>&copy; {{ new Date().getFullYear() }} {{ siteName }}. All rights reserved.</p>
<p class="mt-1 text-xs">ICP备案号：上线前补充 | 公安备案号：上线前补充</p>
<p class="mt-2 text-xs text-gray-600">本网站中系统界面图片为功能示意图（示意素材，待替换为真实系统截图）。</p>
</div>
</div>
</footer>
</template>

55
hss-home-service/website/components/AppHeader.vue Normal file
View File

@@ -0,0 +1,55 @@
<script setup lang="ts">
import { ref } from 'vue'
import { navMenus, siteName } from '~/data/siteContent'
const mobileOpen = ref(false)
const config = useRuntimeConfig()
const loginUrl = config.public.platformLoginUrl as string
</script>
<template>
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-gray-100">
<div class="section-container flex items-center justify-between h-16">
<NuxtLink to="/" class="flex items-center gap-2 text-primary-700 font-bold text-lg shrink-0">
<span class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm font-mono">H</span>
{{ siteName }}
</NuxtLink>
<nav class="hidden lg:flex items-center gap-1">
<NuxtLink v-for="m in navMenus" :key="m.to" :to="m.to"
class="px-3 py-2 rounded-lg text-sm text-text-secondary hover:text-primary hover:bg-primary-50 transition-colors">
{{ m.label }}
</NuxtLink>
</nav>
<div class="hidden lg:flex items-center gap-3">
<a :href="loginUrl" class="text-sm text-text-secondary hover:text-primary transition-colors">平台登录</a>
<NuxtLink to="/contact"
class="px-4 py-2 bg-cta text-white rounded-lg text-sm font-medium hover:bg-cta-700 transition-colors">
预约演示
</NuxtLink>
</div>
<button @click="mobileOpen = !mobileOpen" class="lg:hidden p-2" aria-label="菜单">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
:d="mobileOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'" />
</svg>
</button>
</div>
<div v-if="mobileOpen" class="lg:hidden border-t bg-white">
<div class="section-container py-4 space-y-1">
<NuxtLink v-for="m in navMenus" :key="m.to" :to="m.to" @click="mobileOpen = false"
class="block px-3 py-2 rounded-lg text-text-secondary hover:text-primary hover:bg-primary-50">
{{ m.label }}
</NuxtLink>
<div class="pt-3 border-t">
<NuxtLink to="/contact" @click="mobileOpen = false"
class="block w-full text-center px-4 py-3 bg-cta text-white rounded-lg font-medium">
预约演示
</NuxtLink>
</div>
</div>
</div>
</header>
</template>

41
hss-home-service/website/components/AppIcon.vue Normal file
View File

@@ -0,0 +1,41 @@
<script setup lang="ts">
const props = defineProps<{ name: string; size?: string }>()
const icons: Record<string, string> = {
// 核心能力
clipboard: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4',
health: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z',
document: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
rocket: 'M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59',
check: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
eye: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z',
star: 'M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z',
money: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
// 场景
government: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
hospital: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M11 8h2v3h3v2h-3v3h-2v-3H8v-2h3V8z',
home: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
community: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z',
shield: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
// 通用
phone: 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z',
download: 'M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
mail: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
chart: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
user: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
lock: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
cog: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
globe: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
database: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4',
// 流程步骤
}
import { computed } from 'vue'
const pathData = computed(() => icons[props.name] || icons.clipboard)
</script>
<template>
<svg :class="size || 'w-6 h-6'" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path :d="pathData" />
</svg>
</template>

13
hss-home-service/website/components/CapabilityCard.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup lang="ts">
defineProps<{ icon: string; title: string; desc: string }>()
</script>
<template>
<div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300 border border-gray-50 group">
<div class="w-12 h-12 rounded-xl bg-primary-50 text-primary flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-white transition-colors">
<AppIcon :name="icon" class="w-6 h-6" />
</div>
<h3 class="font-bold text-lg mb-2">{{ title }}</h3>
<p class="text-sm text-text-secondary leading-relaxed">{{ desc }}</p>
</div>
</template>

48
hss-home-service/website/components/ContactForm.vue Normal file
View File

@@ -0,0 +1,48 @@
<script setup lang="ts">
import { useLeadForm } from '~/composables/useLeadForm'
const { form, loading, success, error, submit } = useLeadForm('contact')
const coopTypes = ['政府项目', '医院合作', '养老机构合作', '社区服务', '技术合作', '其他']
</script>
<template>
<div class="max-w-lg mx-auto">
<form v-if="!success" @submit.prevent="submit" class="space-y-5">
<div class="grid sm:grid-cols-2 gap-5">
<div>
<label class="block text-sm font-medium mb-1 text-left">姓名 <span class="text-red-500">*</span></label>
<input v-model="form.name" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none" placeholder="您的姓名" />
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">单位名称 <span class="text-red-500">*</span></label>
<input v-model="form.orgName" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none" placeholder="您所在的单位" />
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">手机号 <span class="text-red-500">*</span></label>
<input v-model="form.phone" type="tel" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none" placeholder="您的手机号" />
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">合作类型</label>
<select v-model="form.contact" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none">
<option value="">请选择</option>
<option v-for="t in coopTypes" :key="t" :value="t">{{ t }}</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">需求描述</label>
<textarea v-model="form.message" rows="4" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none resize-none" placeholder="请描述您的合作需求"></textarea>
</div>
<p v-if="error" class="text-red-500 text-sm">{{ error }}</p>
<button type="submit" :disabled="loading"
class="w-full px-6 py-3 bg-cta text-white rounded-xl font-semibold hover:bg-cta-700 transition-colors disabled:opacity-50">
{{ loading ? '提交中...' : '提交咨询' }}
</button>
</form>
<div v-else class="text-center py-12">
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 text-green-500 flex items-center justify-center"><svg class="w-10 h-10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<h3 class="text-2xl font-bold mb-2">提交成功</h3>
<p class="text-text-secondary">感谢您的咨询，我们将尽快与您联系。</p>
</div>
</div>
</template>

18
hss-home-service/website/components/CtaSection.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<section class="py-20 bg-gradient-to-r from-primary-700 to-primary-900 text-white">
<div class="section-container text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">准备好提升居家服务管理效率了吗？</h2>
<p class="text-lg text-blue-100 mb-8 max-w-xl mx-auto">立即预约演示，了解平台如何帮助您的机构实现服务可监管、过程可追溯、质量可评价、费用可结算。</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<NuxtLink to="/contact"
class="px-8 py-4 bg-cta text-white rounded-xl text-lg font-semibold hover:bg-cta-700 transition-colors shadow-lg shadow-cta/25">
预约演示
</NuxtLink>
<NuxtLink to="/resources"
class="px-8 py-4 bg-white/15 backdrop-blur text-white rounded-xl text-lg font-semibold hover:bg-white/25 transition-colors border border-white/20">
获取方案
</NuxtLink>
</div>
</div>
</section>
</template>

65
hss-home-service/website/components/DataDashboard.vue Normal file
View File

@@ -0,0 +1,65 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useApi } from '~/composables/useApi'
const { get } = useApi()
const stats = ref([
{ label: '今日工单', value: 0, suffix: '单' },
{ label: '进行中', value: 0, suffix: '单' },
{ label: '服务完成率', value: 0, suffix: '%' },
{ label: '异常工单', value: 0, suffix: '单' },
])
function animate(el: { value: number }, target: number, duration = 1200) {
const start = performance.now()
function tick(now: number) {
const p = Math.min((now - start) / duration, 1)
const rounded = Math.round(target * p * 10) / 10
if (target - rounded < 1) { el.value = target; return }
el.value = rounded
if (p < 1) requestAnimationFrame(tick)
}
requestAnimationFrame(tick)
}
onMounted(async () => {
try {
const [d, q] = await Promise.all([
get<any>('/admin/dashboard').catch(() => ({})),
get<any>('/analytics/quality').catch(() => ({})),
])
const targets = [
(d?.todayOrders as number) || 0,
(d?.inProgress as number) || 0,
(q?.serviceCompletionRate as number) || 0,
(d?.exceptions as number) || 0,
]
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
stats.value.forEach((s, i) => { s.value = 0; animate(s, targets[i]) })
obs.disconnect()
}
})
}, { threshold: 0.3 })
const el = document.querySelector('#dashboard-section')
if (el) obs.observe(el)
} catch (_) {}
})
</script>
<template>
<div id="dashboard-section" class="space-y-6">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div v-for="s in stats" :key="s.label" class="bg-white rounded-2xl p-6 text-center shadow-sm border border-gray-50">
<div class="text-3xl font-bold font-mono text-primary mb-2">
{{ s.value }}{{ s.suffix }}
</div>
<div class="text-sm text-text-secondary">{{ s.label }}</div>
</div>
</div>
<img src="https://loremflickr.com/960/300/technology" alt="数据看板示意图（示意素材，待替换）"
class="w-full rounded-xl shadow-sm" width="960" height="300" loading="lazy" />
</div>
</template>

54
hss-home-service/website/components/DemoForm.vue Normal file
View File

@@ -0,0 +1,54 @@
<script setup lang="ts">
import { useLeadForm } from '~/composables/useLeadForm'
const { form, loading, success, error, submit } = useLeadForm('demo')
const focusAreas = ['政府监管', '医院延续护理', '养老机构上门服务', '社区居家照护', '长护险管理', '其他']
</script>
<template>
<div class="max-w-lg mx-auto">
<form v-if="!success" @submit.prevent="submit" class="space-y-5">
<div>
<label class="block text-sm font-medium mb-1 text-left">姓名 <span class="text-red-500">*</span></label>
<input v-model="form.name" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all" placeholder="您的姓名" />
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">单位名称 <span class="text-red-500">*</span></label>
<input v-model="form.orgName" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all" placeholder="您所在的单位" />
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">职务</label>
<input v-model="form.position" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all" placeholder="您的职务/角色" />
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">手机号 <span class="text-red-500">*</span></label>
<input v-model="form.phone" type="tel" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all" placeholder="您的手机号" />
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">所在城市</label>
<input v-model="form.city" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all" placeholder="城市" />
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">关注方向</label>
<select v-model="form.focusArea" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all">
<option value="">请选择</option>
<option v-for="a in focusAreas" :key="a" :value="a">{{ a }}</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">留言需求</label>
<textarea v-model="form.message" rows="3" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all resize-none" placeholder="请简要描述您的需求"></textarea>
</div>
<p v-if="error" class="text-red-500 text-sm">{{ error }}</p>
<button type="submit" :disabled="loading"
class="w-full px-6 py-3 bg-cta text-white rounded-xl font-semibold hover:bg-cta-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
{{ loading ? '提交中...' : '提交预约' }}
</button>
</form>
<div v-else class="text-center py-12">
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 text-green-500 flex items-center justify-center"><svg class="w-10 h-10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<h3 class="text-2xl font-bold mb-2">提交成功</h3>
<p class="text-text-secondary">感谢您的关注，我们将尽快与您联系。</p>
</div>
</div>
</template>

32
hss-home-service/website/components/DownloadForm.vue Normal file
View File

@@ -0,0 +1,32 @@
<script setup lang="ts">
import { useLeadForm } from '~/composables/useLeadForm'
const { form, loading, success, error, submit } = useLeadForm('download')
</script>
<template>
<div class="max-w-sm mx-auto">
<form v-if="!success" @submit.prevent="submit" class="space-y-4">
<div>
<label class="block text-sm font-medium mb-1 text-left">姓名 <span class="text-red-500">*</span></label>
<input v-model="form.name" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none" placeholder="您的姓名" />
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">单位名称 <span class="text-red-500">*</span></label>
<input v-model="form.orgName" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none" placeholder="您所在的单位" />
</div>
<div>
<label class="block text-sm font-medium mb-1 text-left">手机号 <span class="text-red-500">*</span></label>
<input v-model="form.phone" type="tel" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none" placeholder="您的手机号" />
</div>
<p v-if="error" class="text-red-500 text-sm">{{ error }}</p>
<button type="submit" :disabled="loading"
class="w-full px-6 py-3 bg-primary text-white rounded-xl font-semibold hover:bg-primary-700 transition-colors disabled:opacity-50">
{{ loading ? '提交中...' : '获取方案资料' }}
</button>
</form>
<div v-else class="text-center py-8">
<p class="text-xl font-bold mb-2">📥 资料已提交获取申请</p>
<p class="text-sm text-text-secondary">我们将尽快将方案资料发送给您。</p>
</div>
</div>
</template>

39
hss-home-service/website/components/HeroSection.vue Normal file
View File

@@ -0,0 +1,39 @@
<script setup lang="ts">
import { siteTagline, siteDescription } from '~/data/siteContent'
</script>
<template>
<section class="relative overflow-hidden bg-gradient-to-br from-primary-900 via-primary-700 to-primary-500 text-white">
<div class="absolute inset-0 opacity-10">
<div class="absolute top-10 left-10 w-72 h-72 bg-white rounded-full blur-3xl" />
<div class="absolute bottom-10 right-10 w-96 h-96 bg-accent rounded-full blur-3xl" />
</div>
<div class="section-container relative py-20 lg:py-32">
<div class="max-w-3xl">
<span class="inline-block px-3 py-1 rounded-full bg-white/20 text-sm font-medium mb-6 backdrop-blur">
智慧医养 · 居家上门服务 · 长护险管理
</span>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
{{ siteTagline }}
</h1>
<p class="text-lg md:text-xl text-blue-100 mb-8 max-w-2xl">
{{ siteDescription }}
</p>
<div class="flex flex-col sm:flex-row gap-4">
<NuxtLink to="/contact"
class="px-8 py-4 bg-cta text-white rounded-xl text-lg font-semibold hover:bg-cta-700 transition-colors text-center shadow-lg shadow-cta/25">
预约演示
</NuxtLink>
<NuxtLink to="/service-loop"
class="px-8 py-4 bg-white/15 backdrop-blur text-white rounded-xl text-lg font-semibold hover:bg-white/25 transition-colors text-center border border-white/20">
查看服务闭环
</NuxtLink>
</div>
</div>
<div class="mt-12 lg:absolute lg:right-8 lg:top-1/2 lg:-translate-y-1/2 lg:mt-0">
<img src="https://loremflickr.com/560/400/technology" alt="平台概览示意图（示意素材，待替换）"
class="rounded-2xl shadow-2xl w-full max-w-lg opacity-90" width="560" height="400" loading="eager" />
</div>
</div>
</section>
</template>

12
hss-home-service/website/components/MobileBottomCTA.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="fixed bottom-0 left-0 right-0 lg:hidden z-40 bg-white border-t border-gray-200 px-4 py-3 safe-area-bottom">
<NuxtLink to="/contact"
class="block w-full text-center px-6 py-3 bg-cta text-white rounded-xl font-semibold text-base shadow-lg">
预约演示
</NuxtLink>
</div>
</template>
<style scoped>
.safe-area-bottom { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
</style>

10
hss-home-service/website/components/PainPointCard.vue Normal file
View File

@@ -0,0 +1,10 @@
<script setup lang="ts">
defineProps<{ title: string; desc: string }>()
</script>
<template>
<div class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
<h3 class="font-bold text-xl mb-3 text-red-500">{{ title }}</h3>
<p class="text-text-secondary leading-relaxed">{{ desc }}</p>
</div>
</template>

22
hss-home-service/website/components/PlatformSection.vue Normal file
View File

@@ -0,0 +1,22 @@
<script setup lang="ts">
defineProps<{ title: string; desc?: string }>()
</script>
<template>
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-50 flex items-center justify-between">
<div>
<h3 class="font-bold text-text-primary">{{ title }}</h3>
<p v-if="desc" class="text-xs text-text-secondary mt-0.5">{{ desc }}</p>
</div>
<div class="flex gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-red-400" />
<span class="w-2.5 h-2.5 rounded-full bg-yellow-400" />
<span class="w-2.5 h-2.5 rounded-full bg-green-400" />
</div>
</div>
<div class="p-0">
<slot />
</div>
</div>
</template>

19
hss-home-service/website/components/PlatformStatCard.vue Normal file
View File

@@ -0,0 +1,19 @@
<script setup lang="ts">
defineProps<{ label: string; value: string | number; suffix?: string; trend?: string; loading?: boolean }>()
</script>
<template>
<div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
<div v-if="loading" class="animate-pulse space-y-3">
<div class="h-4 bg-gray-200 rounded w-16" />
<div class="h-8 bg-gray-200 rounded w-24" />
</div>
<template v-else>
<p class="text-sm text-text-secondary mb-2">{{ label }}</p>
<p class="text-3xl font-bold font-mono text-primary">
{{ value }}<span v-if="suffix" class="text-lg text-text-secondary ml-1">{{ suffix }}</span>
</p>
<p v-if="trend" class="text-xs text-accent mt-1">{{ trend }}</p>
</template>
</div>
</template>

34
hss-home-service/website/components/PlatformWorkOrderRow.vue Normal file
View File

@@ -0,0 +1,34 @@
<script setup lang="ts">
defineProps<{
id: number
patientName: string
serviceType: string
status: string
serviceDate: string
staffName?: string
}>()
const statusMap: Record<string, { label: string; class: string }> = {
ORDER_CREATED: { label: '待派单', class: 'bg-gray-100 text-gray-600' },
ORDER_ASSIGNED: { label: '已派单', class: 'bg-blue-50 text-blue-600' },
ORDER_ACCEPTED: { label: '已接单', class: 'bg-indigo-50 text-indigo-600' },
ORDER_CHECKED_IN: { label: '已签到', class: 'bg-teal-50 text-teal-600' },
ORDER_IN_SERVICE: { label: '服务中', class: 'bg-accent-50 text-accent-700' },
ORDER_COMPLETED: { label: '已完成', class: 'bg-green-50 text-green-600' },
ORDER_EXCEPTION: { label: '异常', class: 'bg-red-50 text-red-600' },
ACCEPTED: { label: '已验收', class: 'bg-green-100 text-green-700' },
}
</script>
<template>
<div class="flex items-center gap-4 px-4 py-3 bg-white border-b border-gray-50 hover:bg-gray-50 transition-colors">
<span class="text-sm text-text-secondary w-12 shrink-0">#{{ id }}</span>
<span class="text-sm font-medium flex-1 truncate">{{ patientName }}</span>
<span class="text-xs text-text-secondary w-16 shrink-0">{{ serviceType }}</span>
<span class="text-xs w-24 shrink-0">{{ serviceDate }}</span>
<span class="text-xs px-2 py-1 rounded-full font-medium shrink-0" :class="statusMap[status]?.class || 'bg-gray-100'">
{{ statusMap[status]?.label || status }}
</span>
<span class="text-xs text-text-secondary w-20 shrink-0 truncate">{{ staffName || '-' }}</span>
</div>
</template>

16
hss-home-service/website/components/ResourceCard.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup lang="ts">
defineProps<{ title: string; desc: string; type: string }>()
</script>
<template>
<div class="bg-surface rounded-2xl p-8 border border-gray-100 hover:shadow-md transition-all duration-300">
<div class="w-12 h-12 rounded-lg bg-primary-50 flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</div>
<h3 class="font-bold text-lg mb-2">{{ title }}</h3>
<p class="text-sm text-text-secondary mb-4">{{ desc }}</p>
<span class="text-primary font-medium text-sm hover:underline cursor-pointer">下载 {{ type }}</span>
</div>
</template>

17
hss-home-service/website/components/ScenarioCard.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup lang="ts">
defineProps<{ icon: string; title: string; desc: string }>()
</script>
<template>
<div class="bg-surface rounded-2xl p-8 hover:shadow-md transition-all duration-300 border border-gray-100 group">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary-50 to-accent-50 text-primary flex items-center justify-center mb-5 group-hover:from-primary group-hover:to-accent group-hover:text-white transition-all">
<AppIcon :name="icon" class="w-7 h-7" />
</div>
<h3 class="font-bold text-xl mb-3">{{ title }}</h3>
<p class="text-sm text-text-secondary leading-relaxed mb-4">{{ desc }}</p>
<span class="text-primary font-medium text-sm hover:underline cursor-pointer inline-flex items-center gap-1">
了解更多
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</div>
</template>

19
hss-home-service/website/components/SecurityGrid.vue Normal file
View File

@@ -0,0 +1,19 @@
<script setup lang="ts">
import { securityItems } from '~/data/siteContent'
</script>
<template>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="s in securityItems" :key="s.title"
class="bg-surface rounded-2xl p-8 border border-gray-100 hover:shadow-md transition-all duration-300">
<div class="w-10 h-10 rounded-lg bg-primary-50 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
<h3 class="font-bold text-lg mb-2">{{ s.title }}</h3>
<p class="text-sm text-text-secondary leading-relaxed">{{ s.desc }}</p>
</div>
</div>
</template>

42
hss-home-service/website/components/ServiceLoopFlow.vue Normal file
View File

@@ -0,0 +1,42 @@
<script setup lang="ts">
import { onMounted } from 'vue'
import { useScrollAnim } from '~/composables/useScrollAnim'
const steps = [
{ num: '01', title: '需求受理', desc: '多渠道统一接入\n自动校验与审核' },
{ num: '02', title: '能力评估', desc: '上门评估定级\nGPS签到+拍照' },
{ num: '03', title: '方案制定', desc: '个性化服务方案\n费用透明计算' },
{ num: '04', title: '智能派单', desc: '算法匹配推荐\n人工确认兜底' },
{ num: '05', title: '上门执行', desc: 'GPS签到校验\n项目级执行记录' },
{ num: '06', title: '过程监管', desc: '抽查违规整改\n审计日志追溯' },
{ num: '07', title: '验收评价', desc: '星级+标签评价\n评分影响后续派单' },
{ num: '08', title: '结算归档', desc: '自动汇总结算\n电子台账归档' },
]
const { observe } = useScrollAnim()
onMounted(() => {
document.querySelectorAll('.flow-step').forEach((el, i) => {
observe(el, { delay: i * 100, class: 'flow-visible' })
})
})
</script>
<template>
<div class="relative">
<div class="hidden lg:block absolute top-1/2 left-[5%] right-[5%] h-0.5 bg-gray-200 -translate-y-1/2 z-0" />
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 relative z-10">
<div v-for="(s, i) in steps" :key="i"
class="flow-step bg-white rounded-2xl p-5 md:p-6 text-center shadow-sm opacity-0 translate-y-8 transition-all duration-500 hover:shadow-lg group">
<span class="w-12 h-12 mx-auto mb-4 rounded-full bg-gradient-to-br from-primary-50 to-accent-50 text-primary font-bold text-sm flex items-center justify-center group-hover:from-primary group-hover:to-accent group-hover:text-white transition-all">
{{ s.num }}
</span>
<h4 class="font-bold text-sm mb-1">{{ s.title }}</h4>
<p class="text-xs text-text-secondary whitespace-pre-line leading-relaxed">{{ s.desc }}</p>
</div>
</div>
</div>
</template>
<style scoped>
.flow-visible { opacity: 1; transform: translateY(0); }
</style>

20
hss-home-service/website/components/TriEndDisplay.vue Normal file
View File

@@ -0,0 +1,20 @@
<script setup lang="ts">
const ends = [
{ title: '服务对象/家属端', desc: '申请服务、查看方案、签署确认、验收评价、支付结算', color: 'border-primary', bg: 'bg-primary-50', img: 'people' },
{ title: '服务人员 Delivery 端', desc: '接单确认、GPS签到、项目级执行、异常上报、证据上传', color: 'border-accent', bg: 'bg-accent-50', img: 'technology' },
{ title: '机构管理/监管端', desc: '受理派单、调度台、数据看板、质量监管、结算审核、合规审计', color: 'border-cta', bg: 'bg-orange-50', img: 'office' },
]
</script>
<template>
<div class="grid md:grid-cols-3 gap-8">
<div v-for="(e, i) in ends" :key="i"
class="rounded-2xl border-2 p-8 text-center transition-all duration-300 hover:shadow-lg"
:class="[e.color, e.bg]">
<img :src="`https://loremflickr.com/240/160/${e.img}`"
:alt="e.title + '（示意素材，待替换）'" class="w-full h-40 object-cover rounded-xl mb-6" width="240" height="160" loading="lazy" />
<h3 class="font-bold text-xl mb-3">{{ e.title }}</h3>
<p class="text-sm text-text-secondary leading-relaxed">{{ e.desc }}</p>
</div>
</div>
</template>

14
hss-home-service/website/components/ValueMetrics.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup lang="ts">
import { metrics } from '~/data/siteContent'
</script>
<template>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
<div v-for="m in metrics" :key="m.label"
class="bg-white rounded-2xl p-8 text-center shadow-sm border border-gray-100">
<div class="text-4xl font-bold font-mono text-primary mb-3">{{ m.value }}</div>
<div class="font-semibold text-text-primary mb-1">{{ m.label }}</div>
<div class="text-xs text-text-secondary">{{ m.desc }}</div>
</div>
</div>
</template>