refactor(official): 使用演示数据兜底官网内容展示

- 在关于我们页补充企业优势和联系方式演示数据展示 - 资讯列表页增加分类标签，实现按分类筛选资讯 - 文章详情页新增相关推荐文章展示逻辑 - 主页使用演示数据兜底导航、Banner、核心业务、公司简介和文章列表 - 各页面均优化站点信息使用，优先展示真实数据，缺失时使用演示数据 - 留言页增加公司联系信息展示，提升体验 - 个人中心页支持分享官网，展示演示数据防止空白 - 主页Banner支持无图时使用渐变背景和文字占位 - 统一使用演示数据，保证页面无空白，提升整体稳定性和用户体验
2026-08-12 19:17:47 +08:00
parent aa8d038e75
commit d83a6bdd69
10 changed files with 463 additions and 78 deletions
@@ -0,0 +1,118 @@
+/**
+ * 官网演示兜底数据
+ * 当 CMS 后台未配置对应内容（站点信息 / 导航 / Banner / 文章等）时，
+ * 前端使用下方数据渲染成型页面，保证「打开即见官网」而非空白。
+ * 一旦 CMS 返回真实数据，页面自动以真实数据覆盖（见各页 merge 逻辑）。
+ *
+ * 注意：图片类字段统一留空，由组件用 CSS 渐变 / 首字母占位渲染，
+ * 避免演示环境外链裂图。
+ */
+import type { CmsWebsite, CmsNavigation } from '@/api/cms/cmsWebsite/model'
+import type { CmsArticle } from '@/api/cms/cmsArticle/model'
+
+/** 站点信息兜底（对应 getCmsWebsiteSiteInfo 返回结构，按需取字段） */
+export const DEMO_SITE: Partial<CmsWebsite> = {
+  websiteName: '星辰科技企业',
+  websiteLogo: '',
+  description: '专注于为企业提供数字化转型与智能营销一体化解决方案，助力品牌增长。',
+  phone: '400-888-6666',
+  email: 'contact@example.com',
+  address: '广东省深圳市南山区科技园',
+  icpNo: '粤ICP备2024000000号',
+  config: {
+    about:
+      '<p>星辰科技成立于 2015 年，是一家以技术与服务驱动的数字化服务商，致力于帮助企业在移动互联网时代实现增长。</p>' +
+      '<p>我们已服务超过 <b>2000+</b> 家企业客户，覆盖零售、制造、教育、本地生活等多个行业，提供从战略咨询到系统落地的一站式服务。</p>',
+  },
+}
+
+/** 顶部快捷导航宫格兜底 */
+export const DEMO_NAVS: CmsNavigation[] = [
+  { navigationId: 1, title: '公司简介', icon: '🏢', color: '#EAF2FB', path: '/official/about' },
+  { navigationId: 2, title: '产品中心', icon: '📦', color: '#EAF2FB' },
+  { navigationId: 3, title: '解决方案', icon: '💡', color: '#EAF2FB' },
+  { navigationId: 4, title: '新闻资讯', icon: '📰', color: '#EAF2FB', path: '/official/article' },
+  { navigationId: 5, title: '客户案例', icon: '🤝', color: '#EAF2FB' },
+  { navigationId: 6, title: '留言咨询', icon: '💬', color: '#EAF2FB', path: '/official/message' },
+  { navigationId: 7, title: '关于我们', icon: 'ℹ️', color: '#EAF2FB', path: '/official/about' },
+  { navigationId: 8, title: '联系我们', icon: '📞', color: '#EAF2FB', path: '/official/message' },
+]
+
+/** Banner 兜底（渐变 + 标题，无外链图片） */
+export interface DemoBanner {
+  title: string
+  subtitle: string
+  gradient: string
+}
+export const DEMO_BANNERS: DemoBanner[] = [
+  { title: '数字化转型专家', subtitle: '让增长更简单', gradient: 'linear-gradient(135deg,#185FA5,#3D86CE)' },
+  { title: '智能营销一体化', subtitle: '全渠道触达你的客户', gradient: 'linear-gradient(135deg,#12518C,#1E6BB8)' },
+  { title: '2000+ 企业信赖', subtitle: '专业服务值得托付', gradient: 'linear-gradient(135deg,#0E4070,#185FA5)' },
+]
+
+/** 首页「核心业务」横向卡片兜底 */
+export interface DemoBusiness {
+  id: number
+  title: string
+  desc: string
+  icon: string
+}
+export const DEMO_BUSINESS: DemoBusiness[] = [
+  { id: 1, title: '数字化转型', desc: '从战略到落地的全链路咨询与实施', icon: '🚀' },
+  { id: 2, title: '智能营销', desc: '私域运营 + 全渠道增长引擎', icon: '📈' },
+  { id: 3, title: '客户管理', desc: '一体化 CRM 与会员体系', icon: '👥' },
+  { id: 4, title: '数据洞察', desc: '可视化看板辅助经营决策', icon: '📊' },
+]
+
+/** 资讯列表兜底 */
+export const DEMO_ARTICLES: CmsArticle[] = [
+  {
+    articleId: 101,
+    title: '星辰科技发布全新一代智能营销平台',
+    overview: '集成私域运营、内容分发与数据洞察，帮助企业以更低成本获取并留住客户。',
+    image: '',
+    source: '公司新闻',
+    author: '星辰科技',
+    createTime: '2026-08-01',
+  },
+  {
+    articleId: 102,
+    title: '零售行业数字化转型的 5 个关键步骤',
+    overview: '从会员体系到门店数字化，拆解一套可落地的转型路线图。',
+    image: '',
+    source: '行业洞察',
+    author: '研究院',
+    createTime: '2026-07-20',
+  },
+  {
+    articleId: 103,
+    title: '客户案例：某连锁品牌会员复购提升 38%',
+    overview: '通过一体化客户管理与精准触达，实现显著增长。',
+    image: '',
+    source: '客户案例',
+    author: '星辰科技',
+    createTime: '2026-07-08',
+  },
+  {
+    articleId: 104,
+    title: '小程序官网能力上新：留言咨询与内容管理',
+    overview: '企业可自助维护站点内容，客户一键发起咨询。',
+    image: '',
+    source: '产品动态',
+    author: '产品团队',
+    createTime: '2026-06-25',
+  },
+]
+
+/** 关于页「企业优势」兜底 */
+export interface DemoAdvantage {
+  title: string
+  desc: string
+  icon: string
+}
+export const DEMO_ADVANTAGES: DemoAdvantage[] = [
+  { title: '技术领先', desc: '自研增长引擎，稳定支撑高并发业务', icon: '⚙️' },
+  { title: '服务专业', desc: '一对一顾问，从咨询到落地全程陪伴', icon: '🎯' },
+  { title: '数据安全', desc: '金融级加密与权限管控，合规可靠', icon: '🔒' },
+  { title: '持续迭代', desc: '产品按月更新，紧跟行业趋势', icon: '🔄' },
+]