Architecture Overview

全栈技术 架构解析

苏煜云采用双栈架构设计，针对不同业务场景采用最优技术方案。从公共门户的高效SEO与渲染，到控制台的沉浸式SPA体验。

公共门户 (Public)

jQuery + Bootstrap 5 • SEO First

控制台 (Client Area)

Vue.js 2.x + Element UI • SPA

Part 1: 公共营销门户

面向访客的公共页面（首页、关于我们等）采用成熟、稳定的传统技术栈，确保最佳的搜索引擎优化（SEO）效果和首屏加载速度。

快速 DOM 操作与事件处理
响应式栅格布局
丰富的交互动效

核心库 (Core Libraries)

jQuery

用于高效的 DOM 操作和事件处理。作为传统 Web 开发的基石，提供了广泛的浏览器兼容性。

/assets/lib/jQuery.js

Bootstrap 5

提供响应式网格系统和丰富的 UI 组件（Navbar, Collapse 等）。

/css/bootstrap.min.css

动画与特效 (Animation)

  • AOS (Animate On Scroll) 滚动触发动画，增强页面浏览的沉浸感。使用 data-aos="fade-up" 属性控制。
  • Swiper.js & Owl Carousel 处理触摸滑动和轮播图展示，用于 Hero Banner 和产品展示区域。

第三方集成 (Integrations)

Aliyun Customer Service

智能客服对话窗口集成

Font Awesome

矢量图标库系统

Part 2: 客户中心与控制台

登录后的管理区域采用单页应用（SPA）架构，提供类似原生应用的操作体验。数据驱动视图，实现无刷新的流畅交互。

组件化开发模式
双向数据绑定
模块化插件系统

核心框架 (Framework)

Vue.js 2.x

作为应用的核心引擎，负责视图层的渲染和逻辑处理。利用 Vue 指令 (v-if, v-for) 和双向绑定 (v-model) 构建动态界面。

Element UI

基于 Vue 2.0 的桌面端组件库。提供了完整的后台管理组件体系（表格、表单、弹窗、导航等），保证了控制台 UI 的一致性和专业性。

数据与通信 (Data Layer)

Axios

处理所有 HTTP 请求。封装了拦截器用于处理 Token 认证和全局错误响应。

API 架构

  • api/common.js: 通用接口
  • api/product.js: 产品业务逻辑
  • api/goodsList.js: 购物车逻辑

插件化系统 (Addon System)

系统采用模块化设计，通过 addons_js 属性动态加载功能模块。支持 30+ 种业务插件，包括：

IdcsmartCloud (云管理) IdcsmartRenew (续费) IdcsmartTicket (工单) PromoCode (优惠码)

技术栈对比总结

特性 / 维度 公共门户 (Public) 控制台 (Client Area)
核心框架 jQuery Vue.js 2.x
UI 库 Bootstrap 5 Element UI
数据交互 Native / jQuery Ajax Axios
图标系统 Font Awesome Iconfont + SVG
主要优势 SEO 友好，首屏加载快 交互流畅，开发效率高

共享特性： 版本管理 (v10.6.7) • CSS Reset (Normalization) • 模块化插件加载机制