diff --git a/backend/.env.example b/backend/.env.example
index 385a445..d05055a 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -14,3 +14,7 @@
 # MINIO_ENDPOINT=http://localhost:9000
 # MINIO_ACCESS_KEY=replace-with-local-access-key
 # MINIO_SECRET_KEY=replace-with-local-secret-key
+# 本地资格佐证保留期（天）
+LOCAL_EVIDENCE_RETENTION_DAYS=365
+LOCAL_EVIDENCE_ALLOWED_TYPES=jpg,png
+MATCH_LOCAL_ELIGIBILITY_REQUIRED=false
diff --git a/backend/src/main/resources/application-docker.yml b/backend/src/main/resources/application-docker.yml
index 38ec9c5..1f9e54a 100644
--- a/backend/src/main/resources/application-docker.yml
+++ b/backend/src/main/resources/application-docker.yml
@@ -42,6 +42,7 @@ match:
   default-daily-limit: 6
   default-score-threshold: 60
   default-cooldown-days: 180
+  local-eligibility-required: ${MATCH_LOCAL_ELIGIBILITY_REQUIRED:false}
 
 activity:
   default-need-review: true
@@ -73,6 +74,7 @@ features:
   local-evidence-upload-enabled: true
   local-evidence-max-files: 5
   local-evidence-max-file-size-mb: 10
-  local-evidence-allowed-types: jpg,png,pdf
+  local-evidence-allowed-types: ${LOCAL_EVIDENCE_ALLOWED_TYPES:jpg,png}
+  local-evidence-retention-days: ${LOCAL_EVIDENCE_RETENTION_DAYS:365}
   counseling-attachments-private: true
   counseling-attachments-bucket: counseling-attachments
diff --git a/miniapp/assets/brand/default-avatar.png b/miniapp/assets/brand/default-avatar.png
index 3000ed8..92fb1a4 100644
Binary files a/miniapp/assets/brand/default-avatar.png and b/miniapp/assets/brand/default-avatar.png differ
diff --git a/miniapp/env.js b/miniapp/env.js
index 054f649..66b2b84 100644
--- a/miniapp/env.js
+++ b/miniapp/env.js
@@ -6,7 +6,14 @@
  */
 const isDev = (function() {
   try {
-    // 使用非废弃的 API（wx.getSystemInfoSync 在基础库 3.7.0+ 已废弃）
+    const accountInfo = typeof wx.getAccountInfoSync === 'function'
+      ? wx.getAccountInfoSync()
+      : null;
+    if (accountInfo && accountInfo.miniProgram && accountInfo.miniProgram.envVersion === 'develop') {
+      return true;
+    }
+
+    // 兼容旧基础库与部分自动化运行环境。
     const info = wx.getDeviceInfo ? wx.getDeviceInfo() : wx.getSystemInfoSync();
     return info.platform === 'devtools';
   } catch (e) {
diff --git a/miniapp/env.ts b/miniapp/env.ts
index 5093dfc..10406c7 100644
--- a/miniapp/env.ts
+++ b/miniapp/env.ts
@@ -5,6 +5,13 @@ declare const wx: WechatMiniprogram.Wx;
 
 function isDev(): boolean {
   try {
+    const accountInfo = typeof wx.getAccountInfoSync === 'function'
+      ? wx.getAccountInfoSync()
+      : null;
+    if (accountInfo?.miniProgram?.envVersion === 'develop') {
+      return true;
+    }
+
     const info = (wx.getDeviceInfo ? wx.getDeviceInfo() : wx.getSystemInfoSync()) as any;
     return info.platform === 'devtools';
   } catch {
diff --git a/miniapp/pages/anti-fraud/anti-fraud.js b/miniapp/pages/anti-fraud/anti-fraud.js
index a820a0d..6f65f21 100644
--- a/miniapp/pages/anti-fraud/anti-fraud.js
+++ b/miniapp/pages/anti-fraud/anti-fraud.js
@@ -1 +1,27 @@
-Page({data:{warnings:['刚认识就引导投资或博彩','以生病、工程、周转为由借款','催促脱离平台并索要隐私资料']},report(){wx.navigateTo({url:'/pages/report/report?type=fraud'})}})
\ No newline at end of file
+Page({
+  data: {
+    risks: [
+      { title: '投资博彩诱导', description: '刚认识便引导投资、博彩或下载陌生应用' },
+      { title: '借款资金周转', description: '以生病、工程或临时周转为由反复借款' },
+      { title: '索取隐私资料', description: '催促脱离平台并索要验证码、银行卡或证件信息' },
+      { title: '冒充平台人员', description: '以认证、保证金或解冻账户为由要求转账' },
+    ],
+  },
+
+  report() {
+    wx.navigateTo({ url: '/pages/report/report?type=fraud' })
+  },
+
+  requestHelp() {
+    wx.showModal({
+      title: '安全求助',
+      content: '如有财产损失或人身危险，请立即拨打 110；非紧急问题可前往平台帮助中心。',
+      confirmText: '拨打 110',
+      cancelText: '帮助中心',
+      success(result) {
+        if (result.confirm) wx.makePhoneCall({ phoneNumber: '110' })
+        else if (result.cancel) wx.navigateTo({ url: '/pages/help-center/help-center' })
+      },
+    })
+  },
+})
diff --git a/miniapp/pages/anti-fraud/anti-fraud.json b/miniapp/pages/anti-fraud/anti-fraud.json
index 817794d..1aaafd4 100644
--- a/miniapp/pages/anti-fraud/anti-fraud.json
+++ b/miniapp/pages/anti-fraud/anti-fraud.json
@@ -1 +1,7 @@
-{"navigationBarTitleText":"婚恋反诈","backgroundColor":"#FAFAF8"}
\ No newline at end of file
+{
+  "navigationBarTitleText": "婚恋反诈",
+  "backgroundColor": "#F4F5FA",
+  "usingComponents": {
+    "ui-service-hero": "/components/service-hero/index"
+  }
+}
diff --git a/miniapp/pages/anti-fraud/anti-fraud.wxml b/miniapp/pages/anti-fraud/anti-fraud.wxml
index 180e921..5f06f76 100644
--- a/miniapp/pages/anti-fraud/anti-fraud.wxml
+++ b/miniapp/pages/anti-fraud/anti-fraud.wxml
@@ -1 +1,19 @@
-<view class="service-page reference-page"><view class="hero"><text class="eyebrow">婚恋反诈中心</text><text class="hero-title">真诚交往，也要守住安全边界</text><text class="hero-desc">平台不会以任何理由要求转账、投资或提供银行卡密码。</text></view><view class="content"><view class="block"><text class="block-title">常见风险信号</text><view class="card danger-card"><view wx:for="{{warnings}}" wx:key="*this" class="feature-row"><view class="feature-icon">!</view><view class="feature-copy"><text class="feature-title">{{item}}</text><text class="feature-desc">遇到异常请停止转账并保存相关记录</text></view></view></view></view><view class="block"><text class="block-title">遇到可疑情况怎么办</text><view class="card"><view class="feature-row"><view class="feature-icon">1</view><view class="feature-copy"><text class="feature-title">停止资金操作</text><text class="feature-desc">不要继续转账、充值或提供验证码</text></view></view><view class="feature-row"><view class="feature-icon">2</view><view class="feature-copy"><text class="feature-title">保存相关证据</text><text class="feature-desc">保留聊天、付款与账号信息</text></view></view><view class="feature-row"><view class="feature-icon">3</view><view class="feature-copy"><text class="feature-title">及时举报或报警</text><text class="feature-desc">紧急情况请直接拨打 110</text></view></view></view></view></view><view class="fixed-action"><view class="primary-btn" bindtap="report">举报可疑行为</view></view></view>
\ No newline at end of file
+<view class="service-shell fraud-page app-page reference-page">
+  <ui-service-hero eyebrow="提高警惕 · 守护真心" title="婚恋反诈" subtitle="识别风险信号，守护你的真心与财产安全" image-src="/assets/service/anti-fraud-hero.jpg" tone="rose" />
+  <view class="service-content">
+    <view class="block"><text class="block-title">常见风险信号</text><text class="block-subtitle">出现以下情况，请先停止资金或隐私操作</text>
+      <view class="risk-grid">
+        <view wx:for="{{risks}}" wx:key="title" class="risk-card"><image src="/assets/icons/ui/warning.png" mode="aspectFit" /><text class="risk-title">{{item.title}}</text><text class="risk-desc">{{item.description}}</text></view>
+      </view>
+    </view>
+
+    <view class="block"><text class="block-title">遇到可疑情况怎么办</text>
+      <view class="safety-steps">
+        <view class="safety-step"><image src="/assets/icons/home/anti-fraud.png" mode="aspectFit" /><view><text>立即停止资金操作</text><text>不要继续转账、充值或提供验证码</text></view></view>
+        <view class="safety-step"><image src="/assets/icons/home/classroom.png" mode="aspectFit" /><view><text>保存相关证据</text><text>保留聊天、付款和对方账号信息</text></view></view>
+        <view class="safety-step"><image src="/assets/icons/home/service-station.png" mode="aspectFit" /><view><text>及时举报或报警</text><text>平台举报不会通知被举报人，紧急情况请拨打 110</text></view></view>
+      </view>
+    </view>
+  </view>
+  <view class="fixed-action"><view class="service-actions"><view class="secondary-btn" bindtap="requestHelp">安全求助</view><view class="primary-btn" bindtap="report">举报可疑行为</view></view></view>
+</view>
diff --git a/miniapp/pages/anti-fraud/anti-fraud.wxss b/miniapp/pages/anti-fraud/anti-fraud.wxss
index db9c96d..5424136 100644
--- a/miniapp/pages/anti-fraud/anti-fraud.wxss
+++ b/miniapp/pages/anti-fraud/anti-fraud.wxss
@@ -1 +1,2 @@
-@import "../../styles/service-page.wxss";
\ No newline at end of file
+@import "../../styles/service-page.wxss";
+.risk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16rpx;margin-top:18rpx}.risk-card{display:flex;min-height:174rpx;flex-direction:column;padding:20rpx;border:1rpx solid #F7DCE2;border-radius:24rpx;background:#FFF9FA}.risk-card image{width:42rpx;height:42rpx}.risk-title{margin-top:10rpx;color:#9E4054;font-size:23rpx;font-weight:650}.risk-desc{margin-top:7rpx;color:#846F78;font-size:18rpx;line-height:1.5}.safety-steps{overflow:hidden;margin-top:18rpx;border-radius:24rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.safety-step{display:flex;align-items:center;gap:16rpx;min-height:104rpx;padding:16rpx 20rpx;border-bottom:1rpx solid #EFF0F5}.safety-step:last-child{border-bottom:0}.safety-step>image{width:48rpx;height:48rpx;flex:none}.safety-step>view{display:flex;flex:1;flex-direction:column}.safety-step view text:first-child{color:#303654;font-size:23rpx;font-weight:650}.safety-step view text:last-child{margin-top:5rpx;color:#858A9E;font-size:19rpx;line-height:1.45}
diff --git a/miniapp/pages/content/content.js b/miniapp/pages/content/content.js
index 11164ad..1163106 100644
--- a/miniapp/pages/content/content.js
+++ b/miniapp/pages/content/content.js
@@ -1 +1,76 @@
-Page({data:{categories:['推荐','认识自己','沟通成长','关系经营','婚恋反诈'],active:0,articles:[{id:'1',title:'第一次见面，怎样自然地开始交流',category:'沟通成长',read:'5分钟'},{id:'2',title:'建立健康关系，需要怎样的边界',category:'关系经营',read:'6分钟'},{id:'3',title:'警惕以投资为名的婚恋骗局',category:'婚恋反诈',read:'4分钟'}]},select(e){this.setData({active:e.currentTarget.dataset.index})},open(e){wx.navigateTo({url:'/pages/content-detail/content-detail?id='+e.currentTarget.dataset.id})}})
\ No newline at end of file
+const api = require('../../utils/api')
+
+const formatDate = (value) => {
+  if (!value) return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${date.getFullYear()}-${month}-${day}`
+}
+
+Page({
+  data: {
+    categories: [{ id: '', name: '推荐' }],
+    activeCategoryId: '',
+    articles: [],
+    loading: true,
+    loadError: false,
+  },
+
+  onLoad() {
+    this.loadPage()
+  },
+
+  async loadPage() {
+    this.setData({ loading: true, loadError: false })
+    try {
+      const [categories, articles] = await Promise.all([
+        api.get('/content/categories'),
+        api.get('/content/articles'),
+      ])
+      this.setData({
+        categories: [{ id: '', name: '推荐' }, ...(categories || [])],
+        articles: this.normalizeArticles(articles || [], categories || []),
+        loading: false,
+      })
+    } catch (error) {
+      console.error('加载婚恋课堂失败', error)
+      this.setData({ loading: false, loadError: true })
+    }
+  },
+
+  normalizeArticles(articles, categories) {
+    const categoryNames = new Map(categories.map((item) => [item.id, item.name]))
+    return articles.map((item) => ({
+      ...item,
+      categoryName: categoryNames.get(item.categoryId) || '婚恋课堂',
+      publishAtText: formatDate(item.publishAt || item.createdAt),
+    }))
+  },
+
+  async select(e) {
+    const categoryId = e.currentTarget.dataset.id || ''
+    if (categoryId === this.data.activeCategoryId) return
+    this.setData({ activeCategoryId: categoryId, loading: true, loadError: false })
+    try {
+      const articles = await api.get('/content/articles', categoryId ? { categoryId } : undefined)
+      this.setData({
+        articles: this.normalizeArticles(articles || [], this.data.categories),
+        loading: false,
+      })
+    } catch (error) {
+      console.error('加载课堂分类失败', error)
+      this.setData({ loading: false, loadError: true })
+    }
+  },
+
+  open(e) {
+    const id = e.currentTarget.dataset.id
+    if (id) wx.navigateTo({ url: `/pages/content-detail/content-detail?id=${id}` })
+  },
+
+  onRetry() {
+    this.loadPage()
+  },
+})
diff --git a/miniapp/pages/content/content.json b/miniapp/pages/content/content.json
index 9626719..e68b580 100644
--- a/miniapp/pages/content/content.json
+++ b/miniapp/pages/content/content.json
@@ -1 +1,10 @@
-{"navigationBarTitleText":"婚恋课堂","backgroundColor":"#FAFAF8"}
\ No newline at end of file
+{
+  "navigationBarTitleText": "婚恋课堂",
+  "backgroundColor": "#F4F5FA",
+  "usingComponents": {
+    "ui-service-hero": "/components/service-hero/index",
+    "ui-loading": "/components/loading/index",
+    "ui-empty": "/components/empty/index",
+    "ui-error-state": "/components/error-state/index"
+  }
+}
diff --git a/miniapp/pages/content/content.wxml b/miniapp/pages/content/content.wxml
index ec8f7c0..be698c5 100644
--- a/miniapp/pages/content/content.wxml
+++ b/miniapp/pages/content/content.wxml
@@ -1 +1,19 @@
-<view class="service-page reference-page"><view class="hero"><text class="eyebrow">婚恋课堂</text><text class="hero-title">认真学习，更好地相遇</text><text class="hero-desc">提供真实、克制、可实践的关系成长与安全知识。</text></view><scroll-view scroll-x style="white-space:nowrap;padding:24rpx 32rpx;box-sizing:border-box"><text wx:for="{{categories}}" wx:key="*this" data-index="{{index}}" bindtap="select" class="tag {{active===index ? '' : 'warning'}}">{{item}}</text></scroll-view><view class="content"><view wx:for="{{articles}}" wx:key="id" class="article-card" data-id="{{item.id}}" bindtap="open"><view class="article-cover"><text>{{item.category}}</text></view><view class="article-body"><text class="article-title">{{item.title}}</text><text class="article-meta">{{item.category}} · 阅读约 {{item.read}}</text></view></view></view></view>
\ No newline at end of file
+<view class="content-page app-page reference-page">
+  <ui-service-hero eyebrow="学习成长 · 认真相遇" title="婚恋课堂" subtitle="学习成长，收获更好的自己" image-src="/assets/covers/classroom-default.jpg" tone="rose" />
+  <scroll-view scroll-x class="content-categories">
+    <view class="content-category-row"><view wx:for="{{categories}}" wx:key="id" data-id="{{item.id}}" bindtap="select" class="content-category {{activeCategoryId === item.id ? 'active' : ''}}">{{item.name}}</view></view>
+  </scroll-view>
+
+  <view class="content-list">
+    <ui-loading wx:if="{{loading}}" mode="skeleton" rows="4" />
+    <ui-error-state wx:elif="{{loadError}}" title="暂时无法加载课堂内容" description="请检查网络后重试" bind:retry="onRetry" />
+    <view wx:elif="{{articles.length}}">
+      <view wx:for="{{articles}}" wx:key="id" class="content-card" data-id="{{item.id}}" bindtap="open">
+        <image class="content-cover" src="{{item.coverFileId || '/assets/covers/classroom-default.jpg'}}" mode="aspectFill" />
+        <view class="content-card__body"><text class="content-card__category">{{item.categoryName}}</text><text class="content-card__title">{{item.title}}</text><text wx:if="{{item.summary}}" class="content-card__summary">{{item.summary}}</text><view class="content-card__meta"><text>浏览 {{item.viewCount || 0}}</text><text>{{item.publishAtText}}</text></view></view>
+        <image class="content-card__arrow" src="/assets/icons/ui/chevron-right.png" mode="aspectFit" />
+      </view>
+    </view>
+    <ui-empty wx:else illustration="default" title="暂无课堂内容" description="公益内容正在准备中，请稍后再来" />
+  </view>
+</view>
diff --git a/miniapp/pages/content/content.wxss b/miniapp/pages/content/content.wxss
index db9c96d..ba4856e 100644
--- a/miniapp/pages/content/content.wxss
+++ b/miniapp/pages/content/content.wxss
@@ -1 +1,2 @@
-@import "../../styles/service-page.wxss";
\ No newline at end of file
+@import "../../styles/service-page.wxss";
+.content-page{min-height:100vh;padding-bottom:40rpx;background:#F4F5FA}.content-categories{padding:24rpx 0;white-space:nowrap}.content-category-row{display:inline-flex;gap:12rpx;padding:0 24rpx}.content-category{padding:11rpx 22rpx;border-radius:24rpx;background:#fff;color:#767D96;font-size:21rpx;box-shadow:0 6rpx 18rpx rgba(35,35,95,.05)}.content-category.active{background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-weight:650}.content-list{padding:0 24rpx}.content-card{display:flex;align-items:center;overflow:hidden;min-height:150rpx;margin-bottom:16rpx;border-radius:24rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.content-cover{width:176rpx;height:150rpx;flex:none}.content-card__body{display:flex;flex:1;min-width:0;flex-direction:column;padding:16rpx}.content-card__category{align-self:flex-start;padding:4rpx 10rpx;border-radius:12rpx;background:#FFF0F5;color:var(--mini-accent-pink);font-size:17rpx}.content-card__title{overflow:hidden;margin-top:8rpx;color:#283056;font-size:24rpx;font-weight:650;white-space:nowrap;text-overflow:ellipsis}.content-card__summary{overflow:hidden;margin-top:5rpx;color:#83899F;font-size:18rpx;white-space:nowrap;text-overflow:ellipsis}.content-card__meta{display:flex;gap:18rpx;margin-top:9rpx;color:#9A9EB0;font-size:17rpx}.content-card__arrow{width:24rpx;height:24rpx;margin-right:16rpx;flex:none}
diff --git a/miniapp/pages/local-eligibility-supplement/local-eligibility-supplement.wxml b/miniapp/pages/local-eligibility-supplement/local-eligibility-supplement.wxml
index f365392..126ae20 100644
--- a/miniapp/pages/local-eligibility-supplement/local-eligibility-supplement.wxml
+++ b/miniapp/pages/local-eligibility-supplement/local-eligibility-supplement.wxml
@@ -11,7 +11,7 @@
 
   <!-- 已声明的资格类型 -->
   <view class="type-tag" wx:if="{{eligibilityType}}">
-    <text>已声明：{{getEligibilityLabel(eligibilityType)}}</text>
+    <text>已选择本地资格类型</text>
   </view>
 
   <!-- 佐证类型选择 -->
@@ -36,7 +36,7 @@
     <text class="section-title">上传佐证材料</text>
     <view class="upload-area">
       <view class="upload-hint">
-        <text class="hint-text">支持 JPG/PNG，最多 6 张</text>
+        <text class="hint-text">支持 JPG/PNG，最多 {{maxFiles}} 张</text>
       </view>
       <view class="image-grid">
         <view
@@ -47,7 +47,7 @@
           <image src="{{item}}" mode="aspectFill" class="image-preview" />
           <view class="image-remove" bindtap="onRemoveImage" data-index="{{index}}">×</view>
         </view>
-        <view class="upload-btn" bindtap="onChooseImage">
+        <view class="upload-btn" bindtap="onChooseImage" wx:if="{{uploadedFileIds.length < maxFiles}}">
           <text class="upload-icon">+</text>
           <text class="upload-text">上传</text>
         </view>
@@ -57,13 +57,13 @@
 
   <!-- 隐私提示 -->
   <view class="privacy-note">
-    <text class="note-text">🔒 仅用于资格审核，不对其他用户展示</text>
+    <text class="note-text">材料仅用于资格审核，不对其他用户展示</text>
   </view>
 
   <!-- 提交按钮 -->
   <view class="action-bar">
-    <button class="btn-primary" bindtap="onSubmit">
-      提交审核
+    <button class="btn-primary" bindtap="onSubmit" loading="{{submitting}}" disabled="{{submitting || uploading}}">
+      {{submitting ? '提交中…' : '提交审核'}}
     </button>
   </view>
 </view>
diff --git a/miniapp/pages/local-eligibility/local-eligibility.wxml b/miniapp/pages/local-eligibility/local-eligibility.wxml
index e555ba7..9d25487 100644
--- a/miniapp/pages/local-eligibility/local-eligibility.wxml
+++ b/miniapp/pages/local-eligibility/local-eligibility.wxml
@@ -1,5 +1,10 @@
 <!-- U62 本地资格说明页 -->
 <view class="page">
+  <view class="status-card" wx:if="{{!loading && !loadError}}">
+    <text>当前状态：{{statusText[status]}}</text>
+  </view>
+  <view class="status-card" wx:if="{{loading}}"><text>正在读取资格状态…</text></view>
+  <view class="status-card error" wx:if="{{loadError}}" bindtap="checkStatus"><text>状态加载失败，点击重试</text></view>
   <!-- 头部说明 -->
   <view class="header">
     <text class="title">为什么需要确认本地资格？</text>
@@ -29,13 +34,13 @@
   <!-- 提示信息 -->
   <view class="notice">
     <text class="notice-text">
-      💡 只需声明一种资格即可。如需补充佐证材料，系统会在审核后告知您。
+      只需声明一种资格即可。如需补充佐证材料，系统会在审核后告知您。
     </text>
   </view>
 
   <!-- 我的资格入口 -->
   <view class="action-bar">
-    <button class="btn-secondary" bindtap="go到我的资格">
+    <button class="btn-secondary" bindtap="goToMyEligibility">
       查看我已有的资格
     </button>
   </view>
diff --git a/miniapp/pages/service-station/service-station.js b/miniapp/pages/service-station/service-station.js
index 500bebf..d514f18 100644
--- a/miniapp/pages/service-station/service-station.js
+++ b/miniapp/pages/service-station/service-station.js
@@ -1 +1,65 @@
-Page({data:{services:['资料填写协助','公益红娘咨询','活动报名指导','婚恋咨询预约']},call(){wx.showModal({title:'联系服务站',content:'服务热线：0511-00000000',showCancel:false})},book(){wx.navigateTo({url:'/pages/service-appointment/service-appointment'})}})
\ No newline at end of file
+const api = require('../../utils/api')
+
+Page({
+  data: {
+    serviceLocation: null,
+    loading: true,
+    loadError: false,
+  },
+
+  onLoad() {
+    this.loadStation()
+  },
+
+  async loadStation() {
+    this.setData({ loading: true, loadError: false })
+    try {
+      const home = await api.get('/home')
+      this.setData({ serviceLocation: home?.serviceLocation || null, loading: false })
+    } catch (error) {
+      console.error('加载服务站失败', error)
+      this.setData({ loading: false, loadError: true })
+    }
+  },
+
+  call() {
+    const station = this.data.serviceLocation
+    const phoneNumber = station?.contactPhone || station?.contactPhoneDisplay || ''
+    const digitCount = phoneNumber.replace(/\D/g, '').length
+    if (!phoneNumber || phoneNumber.includes('*') || digitCount < 5) {
+      wx.showToast({ title: '联系电话请以预约确认为准', icon: 'none' })
+      return
+    }
+    wx.makePhoneCall({ phoneNumber })
+  },
+
+  openMap() {
+    const station = this.data.serviceLocation
+    const latitude = Number(station?.latitude)
+    const longitude = Number(station?.longitude)
+    if (Number.isFinite(latitude) && Number.isFinite(longitude) && latitude && longitude) {
+      wx.openLocation({
+        latitude,
+        longitude,
+        name: station.name,
+        address: station.address || '',
+      })
+      return
+    }
+    if (station?.address) {
+      wx.setClipboardData({ data: station.address })
+      return
+    }
+    wx.showToast({ title: '暂未提供地图位置', icon: 'none' })
+  },
+
+  book() {
+    const id = this.data.serviceLocation?.id
+    const query = id ? `?serviceLocationId=${encodeURIComponent(id)}` : ''
+    wx.navigateTo({ url: `/pages/service-appointment/service-appointment${query}` })
+  },
+
+  onRetry() {
+    this.loadStation()
+  },
+})
diff --git a/miniapp/pages/service-station/service-station.json b/miniapp/pages/service-station/service-station.json
index 6df8c64..34d66ac 100644
--- a/miniapp/pages/service-station/service-station.json
+++ b/miniapp/pages/service-station/service-station.json
@@ -1 +1,10 @@
-{"navigationBarTitleText":"善缘服务站","backgroundColor":"#FAFAF8"}
\ No newline at end of file
+{
+  "navigationBarTitleText": "善缘服务站",
+  "backgroundColor": "#F4F5FA",
+  "usingComponents": {
+    "ui-service-hero": "/components/service-hero/index",
+    "ui-loading": "/components/loading/index",
+    "ui-empty": "/components/empty/index",
+    "ui-error-state": "/components/error-state/index"
+  }
+}
diff --git a/miniapp/pages/service-station/service-station.wxml b/miniapp/pages/service-station/service-station.wxml
index e86d789..2bf7453 100644
--- a/miniapp/pages/service-station/service-station.wxml
+++ b/miniapp/pages/service-station/service-station.wxml
@@ -1 +1,23 @@
-<view class="service-page reference-page"><view class="hero"><text class="eyebrow">固定公益服务阵地</text><text class="hero-title">善缘丹阳公益服务站</text><text class="hero-desc">提供面对面的婚恋服务咨询，让线上服务在丹阳有真实落点。</text></view><view class="content"><view class="block"><text class="block-title">服务站信息</text><view class="card"><view class="feature-row"><view class="feature-icon">址</view><view class="feature-copy"><text class="feature-title">丹阳市城区公益服务中心</text><text class="feature-desc">丹阳市云阳街道（具体地址以预约确认为准）</text></view></view><view class="feature-row"><view class="feature-icon">时</view><view class="feature-copy"><text class="feature-title">周二至周日 09:00–17:30</text><text class="feature-desc">节假日开放时间以平台通知为准</text></view></view></view></view><view class="block"><text class="block-title">可预约服务</text><view class="card"><view wx:for="{{services}}" wx:key="*this" class="menu-row"><view class="feature-icon">{{index+1}}</view><text class="feature-title" style="flex:1">{{item}}</text><text class="arrow">›</text></view></view></view><view class="notice">服务站人员仅处理现场预约与指定服务，不会浏览无关用户资料。</view></view><view class="fixed-action"><view class="primary-btn" bindtap="book">预约到站服务</view></view></view>
\ No newline at end of file
+<view class="service-shell station-page app-page reference-page">
+  <ui-service-hero eyebrow="公益服务 · 就在身边" title="善缘服务站" subtitle="面对面提供可靠、温暖的本地婚恋服务" image-src="/assets/service/station-hero.jpg" tone="rose" />
+  <view class="service-content">
+    <ui-loading wx:if="{{loading}}" mode="skeleton" rows="4" />
+    <ui-error-state wx:elif="{{loadError}}" title="暂时无法加载服务站" description="请检查网络后重试" bind:retry="onRetry" />
+    <ui-empty wx:elif="{{!serviceLocation}}" illustration="default" title="所在区域暂无服务站" description="新的公益服务阵地正在筹备中" />
+    <block wx:else>
+      <view class="station-name-card"><image src="/assets/icons/home/service-station.png" mode="aspectFit" /><view><text class="station-name">{{serviceLocation.name}}</text><text class="station-short-name">{{serviceLocation.shortName || '善缘丹阳公益婚恋服务阵地'}}</text></view></view>
+
+      <view class="station-info-card">
+        <view class="station-info-row"><image src="/assets/icons/home/service-station.png" mode="aspectFit" /><view><text class="station-info-label">地址</text><text class="station-info-value">{{serviceLocation.address || '以预约确认为准'}}</text></view></view>
+        <view class="station-info-row" bindtap="call"><image src="/assets/icons/home/counseling.png" mode="aspectFit" /><view><text class="station-info-label">联系电话</text><text class="station-info-value">{{serviceLocation.contactPhoneDisplay || '以预约确认为准'}}</text></view><image class="station-arrow" src="/assets/icons/ui/chevron-right.png" mode="aspectFit" /></view>
+        <view class="station-info-row"><image src="/assets/icons/home/activity.png" mode="aspectFit" /><view><text class="station-info-label">开放时间</text><text class="station-info-value">{{serviceLocation.openingHoursText || '以平台通知为准'}}</text></view></view>
+      </view>
+
+      <view class="block"><text class="block-title">服务项目</text><view class="station-services"><view wx:for="{{serviceLocation.services}}" wx:key="*this" class="station-service"><image src="/assets/icons/home/matchmaker.png" mode="aspectFit" /><text>{{item}}</text></view></view></view>
+
+      <view class="privacy-note"><image src="/assets/icons/home/anti-fraud.png" mode="aspectFit" /><text>服务站人员仅处理现场预约与指定服务，不会浏览无关用户资料。</text></view>
+      <view class="map-button" bindtap="openMap"><image src="/assets/icons/home/service-station.png" mode="aspectFit" /><text>地图定位</text></view>
+    </block>
+  </view>
+  <view wx:if="{{serviceLocation}}" class="fixed-action"><view class="service-actions"><view class="secondary-btn" bindtap="call">联系服务站</view><view class="primary-btn" bindtap="book">预约到站服务</view></view></view>
+</view>
diff --git a/miniapp/pages/service-station/service-station.wxss b/miniapp/pages/service-station/service-station.wxss
index db9c96d..c9d7374 100644
--- a/miniapp/pages/service-station/service-station.wxss
+++ b/miniapp/pages/service-station/service-station.wxss
@@ -1 +1,2 @@
-@import "../../styles/service-page.wxss";
\ No newline at end of file
+@import "../../styles/service-page.wxss";
+.station-name-card{display:flex;align-items:center;gap:18rpx;margin-top:24rpx;padding:24rpx;border-radius:26rpx;background:linear-gradient(135deg,#F1FFFA,#FFF7F9);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.station-name-card>image{width:66rpx;height:66rpx}.station-name-card>view{display:flex;flex:1;flex-direction:column}.station-name{color:#283056;font-size:27rpx;font-weight:700}.station-short-name{margin-top:6rpx;color:#7E859B;font-size:19rpx}.station-info-card{overflow:hidden;margin-top:18rpx;border-radius:26rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.station-info-row{display:flex;align-items:center;gap:16rpx;min-height:104rpx;padding:14rpx 20rpx;border-bottom:1rpx solid #EFF0F5}.station-info-row:last-child{border-bottom:0}.station-info-row>image:first-child{width:42rpx;height:42rpx;flex:none}.station-info-row>view{display:flex;flex:1;flex-direction:column}.station-info-label{color:#303654;font-size:22rpx;font-weight:650}.station-info-value{margin-top:5rpx;color:#858A9E;font-size:19rpx;line-height:1.45}.station-info-row .station-arrow{width:24rpx;height:24rpx}.station-services{display:grid;grid-template-columns:repeat(2,1fr);gap:14rpx;margin-top:18rpx}.station-service{display:flex;align-items:center;gap:12rpx;min-height:74rpx;padding:12rpx 16rpx;border-radius:20rpx;background:#fff;color:#505874;font-size:20rpx;box-shadow:0 6rpx 20rpx rgba(35,35,95,.05)}.station-service image{width:34rpx;height:34rpx}.map-button{display:flex;align-items:center;justify-content:center;gap:10rpx;height:78rpx;margin-top:20rpx;border:1rpx solid #E5E7F0;border-radius:39rpx;background:#fff;color:#53607F;font-size:22rpx}.map-button image{width:34rpx;height:34rpx}
diff --git a/project.config.json b/project.config.json
index 1d9ee40..a508773 100644
--- a/project.config.json
+++ b/project.config.json
@@ -12,7 +12,9 @@
       "disablePlugins": [],
       "outputPath": ""
     },
-    "useCompilerPlugins": false,
+    "useCompilerPlugins": [
+      "typescript"
+    ],
     "minifyWXML": true,
     "compileWorklet": false,
     "uploadWithSourceMap": true,