前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载本篇技术文章以 client/me/concierge/README.md 为骨架结合 wp-calypsoThe JavaScript and API powered WordPress.com仓库中的实际源码系统讲解 Business Concierge Sessions快速启动会话预约、取消与改期三个用户流程的路由注册、ConciergeMain/ConciergeCancel组件的多步向导机制、状态层 actions 与 wpcom 数据层的对接方式。读完本文你可以独立定位该模块的路由入口、渲染决策分支与 Redux 数据流并在此基础上理解 Calypso 类多步向导类页面的典型工程组织方式。模块定位Concierge 组件是干什么的README 对该模块的定义非常明确These components are used to render Business Concierge Sessions flows for booking, cancelling and rescheduling appointments.即client/me/concierge/目录下的组件负责渲染面向商业站点Business Plan用户的Concierge 会话在页面文案中多称为 Quick Start Session的三类流程booking预约选择可用时间并填写信息的多步向导cancelling取消取消已预约会话的确认页面rescheduling改期为已有会话重新选择时间的多步向导。目录下的文件布局与 README 描述一致client/me/concierge/ ├── book/ # 预约向导各步骤组件 │ ├── calendar-step.jsx # 步骤选择日历时间 │ ├── confirmation-step.jsx # 步骤确认 │ ├── info-step.jsx # 步骤填写信息 │ └── skeleton.jsx # 数据加载中的骨架屏 ├── cancel/ │ └── index.jsx # ConciergeCancel 取消流程组件 ├── reschedule/ │ ├── calendar-step.jsx # 改期步骤选择新时间 │ ├── confirmation-step.jsx # 改期步骤确认 │ └── skeleton.jsx ├── shared/ # 多个流程共用的组件 │ ├── appointment-info.jsx │ ├── available-time-card.jsx │ ├── available-time-picker.jsx │ ├── closure-notice.jsx │ ├── confirmation.jsx │ ├── no-available-times.jsx │ ├── primary-header.jsx │ ├── upsell.jsx # 不符合资格时的升级引导 │ └── utils.jsx ├── test/main.js # ConciergeMain 的 Jest 测试 ├── constants.js # 状态/错误码/调度 ID 等常量 ├── controller.jsx # 路由 controller ├── index.js # 路由注册入口 ├── main.jsx # ConciergeMain 多步包装组件 └── style.scss支持的路由完整清单与注册方式README 列出的支持路由如下这是该模块对外暴露的全部 URL 形态/me/quickstart; // site selector step /me/quickstart/:siteSlug/book; // booking concierge appointment wizard /me/quickstart/:siteSlug; // redirects to calendar step for booking /me/quickstart/:siteSlug/:appointmentId/cancel; // cancellation page for concierge appointment /me/quickstart/:siteSlug/:appointmentId/reschedule; // rescheduling concierge appointments wizard这五条路由的实际注册位于 index.js其中还包含 README 未提及的历史路径兼容逻辑page( /me/concierge, controller.redirectToQuickStart, ... )与page( /me/quickstart, controller.siteSelector, siteSelection, sites, ... )/me/quickstart是站点选择步骤site selector复用了calypso/my-sites/controller中的siteSelection与sitescontrollerpage( /me/quickstart/:siteSlug, redirectToBooking )选中站点后直接page.redirect到/me/quickstart/:siteSlug/book即 README 中说的 “redirects to calendar step for booking”/me/concierge及其子路径会通过 controller.jsx 中的redirectToQuickStart把/me/concierge前缀替换为/me/quickstart后重定向说明该模块经历过从 concierge 到 quickstart 命名迁移的兼容处理。各路由与 controller 的对应关系可归纳为路由注册的 controller渲染的组件/me/quickstartcontroller.siteSelectorsiteSelectionsites站点选择列表复用 my-sites 逻辑/me/quickstart/:siteSlugredirectToBooking302 到/book路由/me/quickstart/:siteSlug/bookcontroller.bookConciergeMain预约向导rescheduling{false}/me/quickstart/:siteSlug/:appointmentId/cancelcontroller.cancelConciergeCancel/me/quickstart/:siteSlug/:appointmentId/reschedulecontroller.rescheduleConciergeMain改期向导rescheduling从 controller.jsx 的源码可以看到每个 handler 都向context.primary挂载组件并通过analyticsPath/analyticsTitle传入埋点路径例如预约页为Concierge BooksiteSelector还会额外 dispatch 一个calypso_concierge_site_selection_step的 Tracks 事件并注入context.getSiteSelectionHeaderText用于定制站点选择页的头部文案“Select a site for your Quick Start Session”。ConciergeMain多步向导的核心实现README 中提到的两个核心组件之一ConciergeMain是一个同时服务于预约和改期两条流程的多步包装组件实现位于 main.jsx。其设计在文件头部注释中已说明It is a wizard interface with three steps. Each step is a separate component that callsonCompletewhen the step is complete oronBackif the user requests to go back. This component uses those callbacks to keep track of the current step and render it.也就是说每个步骤组件是独立的约定通过onComplete前进、onBack回退ConciergeMain用state.currentStep记录当前步并渲染steps[ currentStep ]预约流程传入steps{ [ BookInfoStep, BookCalendarStep, BookConfirmationStep ] }信息 → 日历选时 → 确认共三步改期流程传入steps{ [ RescheduleCalendarStep, RescheduleConfirmationStep ] }无信息填写步骤共两步。steps、skeleton、rescheduling、appointmentId均由 controller 注入两条流程的差异被收敛到 controller 的参数里而向导骨架完全复用。渲染决策树骨架屏、升级引导、已有预约与无可用时间ConciergeMain通过connect从 Redux 取出六个关键数据源main.jsxavailableTimes: getConciergeAvailableTimes( state ), nextAppointment: getConciergeNextAppointment( state ), site: getSite( state, props.siteSlug ), scheduleId: getConciergeScheduleId( state ), userSettings: getUserSettings( state ), isUserBlocked: getConciergeUserBlocked( state ),getDisplayComponent()按固定优先级做分支判断main.jsx骨架屏! availableTimes || ! site || ! site.plan || null scheduleId || ! userSettings任一不满足时返回skeletonbook 与 reschedule 各有一个 skeleton 组件避免数据未就绪时闪现空白升级引导UpsellscheduleId 0且用户未被屏蔽! isUserBlocked时渲染Upsell site{ site } /。源码注释明确说明 “if scheduleId is 0, it means the user is not eligible for the concierge service”即后端用 0 表示该用户/站点不具备 Concierge 资格已有预约展示nextAppointment ! rescheduling时渲染AppointmentInfo /——如果用户已经有一个即将到来的会话且当前不是改期场景直接展示该预约信息而不是再次引导预约无可用时间isEmpty( availableTimes )时渲染NoAvailableTimes isUserBlocked{ isUserBlocked } /正常向导以上都不命中才渲染当前步骤组件并把availableTimes、site、onComplete、onBack透传给步骤。数据加载与二次验证Reauthrender()中在渲染步骤之前挂载了四个 Query 数据组件它们对应 Calypso 的声明式数据获取模式main.jsxQueryUserSettings / QuerySites / { siteId QueryConciergeInitial siteId{ siteId } / } { siteId QuerySitePlans siteId{ siteId } / }其中QueryConciergeInitial是触发 Concierge 初始数据请求的入口。同时组件挂载/卸载时监听twoStepAuthorization的change事件配合ReauthRequired /实现敏感操作的二次身份验证2SA需要重新验证期间不渲染任何 Query 数据组件待验证通过后再拉取数据。ConciergeCancel取消流程的状态机README 提到的第二个核心组件ConciergeCancel实现于 cancel/index.jsx它是一个以signupForm.status驱动的单页确认组件组件挂载时记录calypso_concierge_cancel_step埋点已取消CONCIERGE_STATUS_CANCELLED渲染shared/confirmation确认页标题 “Your session has been cancelled.”并提供 “Schedule” 主按钮链接回/me/quickstart/:siteSlug/book形成取消后重新预约的闭环默认分支展示 “Reschedule or cancel” 双按钮页——“Reschedule session” 按钮链接到/me/quickstart/:siteSlug/:appointmentId/reschedule“Cancel session” 按钮点击后 dispatchcancelConciergeAppointment( scheduleId, appointmentId )按钮禁用条件来自constants.js中定义的状态常量取消按钮在状态为cancelled/cancelling、或appointmentDetails/scheduleId缺失时禁用改期按钮在cancelling状态或数据缺失时禁用若预约详情返回meta.canChangeAppointment为假则调用shared/utils.jsx中的renderDisallowed()渲染“不允许操作”的提示页。该组件通过connect读取getConciergeAppointmentDetails( state, props.appointmentId )、getConciergeSignupForm( state )、getSite与getConciergeScheduleId并用localize包裹以支持 i18n。常量定义状态、错误码与调度 IDconstants.js 定义了贯穿三个流程的核心常量是理解整个模块状态语义的钥匙// booking status export const CONCIERGE_STATUS_BOOKED booked; export const CONCIERGE_STATUS_BOOKING booking; export const CONCIERGE_STATUS_BOOKING_ERROR booking_error; // cancelling status export const CONCIERGE_STATUS_CANCELLED cancelled; export const CONCIERGE_STATUS_CANCELLING cancelling; export const CONCIERGE_STATUS_CANCELLING_ERROR cancelling_error; // error codes export const CONCIERGE_ERROR_NO_AVAILABLE_STAFF rest_concierge_no_available_staff; export const CONCIERGE_ERROR_ALREADY_HAS_APPOINTMENT rest_concierge_already_has_appointment; // schedule IDs export const CONCIERGE_WPCOM_BUSINESS_ID 1; export const CONCIERGE_WPCOM_SESSION_PRODUCT_ID 2; // /me/purchases 页面 banner 内容类型 export const CONCIERGE_HAS_UPCOMING_APPOINTMENT has-upcoming-appointment; export const CONCIERGE_HAS_AVAILABLE_SESSION has-available-session;几点值得注意的语义预约与取消各自维护一组“进行中 / 成功 / 失败”三态booking→booked/booking_errorcancelling→cancelled/cancelling_error组件正是依据这些状态控制按钮禁用与结果页渲染两个 REST 风格错误码rest_concierge_no_available_staff、rest_concierge_already_has_appointment对应服务端在“无可用客服”“已有预约”场景下返回的失败原因scheduleId有两个具体取值1对应 wpcom Business 计划2对应独立售卖的 Session 产品而0表示不具备资格触发 Upsell三者共同构成 eligibility 判断最后两个常量用于在/me/purchases页面展示“有即将到来的预约”或“有可购买的会话”两种 banner。状态层与数据层从 Redux action 到 wpcom API该模块的前端 UI 只负责渲染与触发真正的数据流由client/state/concierge与client/state/data-layer/wpcom/concierge承担。actions.js 导出了全部业务 actionsAction creator触发的 action type参数requestConciergeInitialCONCIERGE_INITIAL_REQUESTsiteIdupdateConciergeInitialCONCIERGE_INITIAL_UPDATEinitialupdateConciergeSignupFormCONCIERGE_SIGNUP_FORM_UPDATEsignupFormupdateConciergeBookingStatusCONCIERGE_UPDATE_BOOKING_STATUSstatusrequestConciergeAppointmentDetailsCONCIERGE_APPOINTMENT_DETAILS_REQUESTscheduleId,appointmentIdupdateConciergeAppointmentDetailsCONCIERGE_APPOINTMENT_DETAILS_UPDATEappointmentId,appointmentDetailsbookConciergeAppointmentCONCIERGE_APPOINTMENT_CREATEscheduleId,beginTimestamp,customerId,siteId,metarescheduleConciergeAppointmentCONCIERGE_APPOINTMENT_RESCHEDULEscheduleId,appointmentId,beginTimestamp,appointmentDetailscancelConciergeAppointmentCONCIERGE_APPOINTMENT_CANCELscheduleId,appointmentId这些数据最终落入client/state/concierge/下按域拆分的 reducerschedule-id、available-times、next-appointment、signup-form、appointment-details、appointment-timespan、is-user-blocked、available-sessions等每个目录均配有test/reducer.js单测main.jsx中使用的getConciergeAvailableTimes、getConciergeScheduleId等 selector 位于client/state/selectors/下并各自带有测试。以初始数据为例client/state/data-layer/wpcom/concierge/initial/index.js 注册了CONCIERGE_INITIAL_REQUEST的处理器export const fetchConciergeInitial ( action ) http( { method: GET, path: /concierge/initial, apiNamespace: wpcom/v2, query: { site_id: action.siteId, }, }, action );即通过 wpcom REST 的GET /wpcom/v2/concierge/initial?site_id...拉取该站点的 Concierge 初始数据含scheduleId、可用时间、下次预约等成功后 dispatchupdateConciergeInitial写入 store失败则 dispatch 错误通知默认文案 “Something went wrong with Quick Start. Please try again later.”。同目录下还有schedules/appointments/book、schedules/appointments/cancel、schedules/appointments/reschedule、schedules/appointments/detail等处理器分别对应上表中的创建、取消、改期、详情查询动作且各自附带test/index.js数据层测试。从源码结构看availableTimes在main.jsx测试中以毫秒时间戳数组的形式出现如1541506500000可推断/concierge/initial返回的可用时段被归一化为时间戳列表供日历选择器使用appointmentDetails.meta.canChangeAppointment则说明预约详情接口带有控制“是否允许改期/取消”的元信息。测试如何印证上述行为test/main.js 用 Jest Testing Library 对ConciergeMain的关键分支做了逐条断言与上文决策树一一对应“should short-circuit toSkeleton /when data is insufficient”分别将availableTimes、site、site.plan、userSettings置为 null均断言骨架屏可见“Should render upsell for non-eligible users”scheduleId{0}时断言upsell可见且步骤组件不存在“Should render NoAvailableTimes if no times are available”availableTimes[]且scheduleId1时断言no-available-times可见“Should render CurrentStep for eligible users”数据齐备、scheduleId1时断言当前步骤可见且无 upsell。这些用例与getDisplayComponent()的分支逻辑互为印证也说明了该模块的 eligibility 判断scheduleId与数据就绪判断四个 Query 数据源是两条独立的防线。小结模块的关键文件索引关注点文件模块说明路由/目录/组件约定client/me/concierge/README.md路由注册含/me/concierge兼容重定向client/me/concierge/index.js路由 controllerbook/cancel/reschedule/siteSelectorclient/me/concierge/controller.jsx多步向导包装组件预约/改期复用client/me/concierge/main.jsx取消流程组件client/me/concierge/cancel/index.jsx状态/错误码/调度 ID 常量client/me/concierge/constants.js状态 actionsclient/state/concierge/actions.js初始数据处理器GET /concierge/initialwpcom/v2client/state/data-layer/wpcom/concierge/initial/index.js核心渲染分支测试client/me/concierge/test/main.js整体上client/me/concierge是 Calypso 中一个边界清晰的业务模块路由层index.jscontroller.jsx只做 URL 到组件的映射与埋点注入UI 层ConciergeMain/ConciergeCancel以“步骤数组 onComplete/onBack 回调”的约定实现可复用向导并以 eligibility 与数据就绪双条件控制渲染分支数据层则通过Query*组件 wpcom REST 处理器wpcom/v2/concierge/* 按域拆分的 reducer/selector 完成声明式数据获取与状态管理且各层均配有单测。这套组织方式为在 Calypso 中新增类似的“多步预约/流程类”页面提供了可直接参照的范本。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐verb项目深度解析如何用开源NURBS库实现CAD建模的完整指南verb项目深度解析如何用开源NURBS库实现CAD建模的完整指南 verb 是一个功能强大的开源NURBS库专为CAD建模和几何处理而设计。这个跨平台的几图形学wp-calypso 路由工具库详解normalize 中间件与 addQueryArgs 的参数化实现wp calypso 路由工具库详解normalize 中间件与 addQueryArgs 的参数化实现 在 WordPress.com 的前端仓库 wp c前端CMSwp-calypso 的 BackButton 组件设计、使用与源码实现详解wp calypso 的 BackButton 组件设计、使用与源码实现详解 导读 本文聚焦 wp calypso 中一个轻量但高频使用的 UI 组件—— B前端CMS上一篇30天搞定字节跳动算法面试基于LeetCode高频题的精准突破指南下一篇终极揭秘UnblockNeteaseMusic如何让灰色歌曲重获新生完整工作流程解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考