Archivue 室内设计作品集与服务展示 HTML 模板[更至v1.0.0]

Archivue 是一款采用 Vue 3 构建的室内设计落地页模板，主打高端、简约的视觉风格。它将作品展示、服务介绍、客户案例、团队介绍、博客和咨询表单等页面集中整合，适合室内建筑师、住宅与商业设计师、软装工作室及创意机构快速搭建专业展示网站。

背景与产品定位

Archivue 并非 WordPress 主题，而是一套完整的 Vue.js 前端应用模板。其技术组合包括 Vue 3、Vite、Vue Router v4 和 Tailwind CSS v4，并使用 Embla Carousel、Class Variance Authority（CVA）、自定义 SVG 图标，以及 Libre Franklin、Roboto 字体。 模板提供 3 种差异化首页布局，可在单页应用（SPA）内完成页面切换，并通过懒加载与平滑滚动改善浏览体验。

核心变化与功能亮点

更现代的前端技术栈

• Vue 3 与 Vite：采用 Vue 3 Composition API，支持热模块替换（HMR），有助于提升开发效率与页面加载速度。
• Vue Router v4：提供客户端路由、页面组件懒加载及平滑滚动行为。
• Tailwind CSS v4：使用模块化 CSS 变量、自定义字体排版令牌和流式布局网格工具，减少冗余的传统配置。

3 种首页视觉方案

模板包含 3 个独立的首页版本：

• Home 1（Studio Hero）：以工作室品牌和核心服务为主。
• Home 2（Full-screen Carousel）：使用全屏轮播集中呈现视觉作品。
• Home 3（Architectural Overlapping Hero）：通过建筑感重叠布局强化空间主题。

三种方案均使用支持触摸操作的 Embla Carousel，便于在移动端浏览作品。

动效、导航与响应式体验

动态导航栏 Composable 支持全宽布局、单层透明模式和滚动状态切换。页面还提供错位入场、渐显等滚动驱动动画，并针对手机、平板和宽屏显示器进行了响应式适配。 模板还内置了一套无预设视觉样式、注重可访问性的基础组件，可用于手风琴、工具提示、浮层和可折叠卡片等交互。

页面结构与交付内容

核心页面

• 服务详情：包含服务概览网格、双栏详情布局、可折叠侧栏、规格表和 FAQ（常见问题）手风琴。
• 作品与案例：展示客户信息、图片画廊，以及挑战与成果说明。
• 关于与设计理念：提供工作室故事、动态数据计数器、团队展示和 CEO 简介。
• 博客与文章：包含文章列表和单篇文章详情页。
• 客户评价：采用响应式客户评价轮播和社会证明卡片。
• 联系与咨询：提供线索转化卡片和咨询申请表单。

包含的资源

模板交付内容包括：

• Vue 3 与 Vite 源码；
• 完整的文档源码与 HTML 站点；
• 基于 Vite 工作流的打包构建工具。

预览图片仅用于展示。受许可限制，下载包中的图片会被替换为占位尺寸内容；正式上线前，需将其替换为已获授权的素材。

影响与落地建议

Archivue 的优势在于将室内设计作品集和服务型网站所需的核心页面一次性配齐，同时保留较高的视觉定制空间。它更适合希望快速发布作品集、建立品牌展示页或承接设计咨询业务的团队。 实际落地时，可按以下顺序推进：

1. 根据品牌定位选择首页版本，并确定导航层级。
2. 替换工作室信息、服务内容、案例资料和客户评价。
3. 配置咨询表单的提交端、字段映射与通知流程。
4. 检查移动端导航、轮播交互、表单反馈和键盘可访问性。
5. 使用 Vite 完成生产构建，再接入既有的部署流程。

如果现有站点基于 WordPress，需特别注意：Archivue 是 Vue 应用模板，不能直接作为 WordPress 主题安装，应另行规划前端构建、内容管理、SEO 配置，以及表单与后端系统的整合方式。