做像58同城这样的网站能用mysql数据库吗故宫文创产品

做像58同城这样的网站能用mysql数据库吗,故宫文创产品,中国建设人才服务信息网官网,餐饮系统的网站应该怎么做个人首页#xff1a; VON 鸿蒙系列专栏#xff1a; 鸿蒙开发小型案例总结 综合案例 #xff1a;鸿蒙综合案例开发 鸿蒙6.0#xff1a;从0开始的开源鸿蒙6.0.0 鸿蒙5.0#xff1a;鸿蒙5.0零基础入门到项目实战 Electron适配开源鸿蒙专栏#xff1a;Electron for Open…个人首页 VON鸿蒙系列专栏 鸿蒙开发小型案例总结综合案例 鸿蒙综合案例开发鸿蒙6.0从0开始的开源鸿蒙6.0.0鸿蒙5.0鸿蒙5.0零基础入门到项目实战Electron适配开源鸿蒙专栏Electron for OpenHarmonyFlutter 适配开源鸿蒙专栏Flutter for OpenHarmony本文所属专栏鸿蒙综合案例开发本文atomgit地址小V健身小V健身助手开发手记四打造专属健康空间——以 PersonContent 构建统一风格的个人中心 一、为什么是 PersonContent 而非 PersonalPage️ 二、UI 结构与视觉语言设计细节 三、核心代码解析1. 组件定义与状态管理2. 用户信息区buildUserInfo3. 功能列表基于 List PersonalItem 四、路由与集成️ 五、扩展性与未来演进✅ 六、结语代码总结PersonalItemPersonContent打造专属健康空间——以PersonContent构建统一风格的个人中心在移动应用的用户体验地图中个人中心往往被低估。它不像首页那样高频曝光也不如成就页那样充满激励感但它却是用户建立“归属感”与“掌控感”的关键节点。一个设计良好的个人中心能让用户感受到“这是我的空间一切尽在掌握。”在「小V健身助手」的开发进程中我们始终坚持组件化、一致性与轻量化三大原则。继首页、成就页之后我们以同样的架构思想构建了名为PersonContent的个人中心视图组件——它不是独立页面而是可嵌入、可复用、风格统一的 UI 模块。本文将详解PersonContent的设计思路、代码实现与工程价值。 一、为什么是PersonContent而非PersonalPage在 HarmonyOS 的 Stage 模型中页面通常由Entry装饰的组件作为入口。但在 Tab 导航或多场景复用的场景下将内容逻辑与路由入口解耦是更优的选择。参考我们已有的AchievementContentComponentexportdefaultstruct AchievementContent{...}它不带Entry仅负责渲染成就区域的内容可被主页面按需嵌入。同理我们将个人中心也抽象为PersonContent✅职责单一只管 UI 渲染不处理路由跳转逻辑除内部子跳转✅高度复用未来可用于侧边栏、设置弹窗等场景✅风格统一与AchievementContent共享布局规范、间距系统与交互反馈。这是一种“页面即组件”的现代前端思维。️ 二、UI 结构与视觉语言PersonContent采用经典的“头像区 功能列表”布局[ 头像 昵称 日期 ] ────────────────────── [ 目标设置 → ] [ 历史记录 → ] [ 我的成就 → ] [ 隐私与数据 → ] [ 关于小V v1.0.0 ] [ 退出应用红色]设计细节背景色使用浅灰#f5f5f5区别于首页的深色运动氛围营造“后台管理”的冷静感列表项白底圆角卡片内含图标、标题、描述与箭头信息层级清晰退出按钮单独高亮为红色文字避免误触同时传递“重要操作”信号日期同步顶部展示当前选中日期来自全局AppStorage与首页、成就页保持上下文一致。 三、核心代码解析1. 组件定义与状态管理Componentexportstruct PersonContent{// 双向绑定全局日期确保与其他页面同步StorageLink(date)date:numberDateUtil.beginTimeOfDay(newDate())// 本地状态今日目标后续可接入持久化State dailyTarget:number2000build(){/* ... */}}使用StorageLink而非StorageProp是因为我们希望个人中心也能响应日期变更例如从日历选择新日期后顶部自动刷新。2. 用户信息区buildUserInfoBuilderbuildUserInfo(){Row(){Image($r(app.media.ic_default_avatar)).width(60).height(60).borderRadius(30)Column(){Text(小V用户).fontSize(18).fontWeight(600)Text(DateUtil.formatDate(this.date)).fontSize(12).fontColor(#888)}.margin({left:15})Blank()// 推动右侧对齐}.padding({bottom:25})}简洁、克制突出身份认同而非社交属性当前无账号体系。3. 功能列表基于ListPersonalItem我们封装了可复用的PersonalItem组件// component/PersonalItem.etsComponentexportstruct PersonalItem{icon:ResourceStr title:stringdesc:stringshowArrow:booleanonClick:()voidbuild(){Row(){Image(this.icon).width(24).height(24).margin({right:15})Column(){Text(this.title).fontSize(16).fontWeight(500)if(this.desc)Text(this.desc).fontSize(12).opacity(0.6)}Blank()if(this.showArrow)Image($r(app.media.arrow_right)).width(16)}.backgroundColor(Color.White).borderRadius(12).padding({horizontal:16,vertical:12}).onClick(this.onClick)}}通过组合PersonalItemPersonContent的列表代码变得极其简洁且语义清晰。 四、路由与集成在主页面中只需一行即可嵌入// MainIndexPage.etsif(tabIndex2){PersonContent()}内部跳转使用标准 ArkTS 路由router.pushUrl({url:pages/AchievementPage})注意AchievementPage应是一个带Entry的完整页面而AchievementContent是其内部的内容组件——这种“页面壳 内容体”模式是我们推荐的分层方式。️ 五、扩展性与未来演进当前PersonContent是 MVP 版本但已预留扩展路径功能实现方式动态昵称/头像从preferences读取支持编辑弹窗目标持久化将dailyTarget存入AppStorage或data_preferences缓存清理在“隐私与数据”页调用preferences.clear()深色模式适配使用Watch监听系统主题动态切换颜色所有这些都不会破坏现有组件结构。✅ 六、结语PersonContent的诞生标志着「小V健身助手」完成了从“功能驱动”到“体验驱动”的一次跃迁。它不再只是一个功能列表而是一个有温度、有秩序、有控制感的个人健康空间。更重要的是它延续了我们对代码可维护性的坚持好的 UI不仅是看起来舒服更是写起来清晰、改起来安全。代码总结此次更新只有这两部分代码这里路由部分没有实现PersonalItem// component/PersonalItem.etsinterfacePersonalItemFace{icon:ResourceStr title:stringdesc?:stringshowArrow?:boolean}Componentexportdefaultstruct PersonalItem{Prop icon:ResourceStr;Prop title:string;Prop desc:string;Prop showArrow:booleantrue;// Prop onClick: (event?: ClickEvent) void;build(){Row(){Image(this.icon).width(24).height(24).margin({right:15})Column(){Text(this.title).fontSize(16).fontWeight(500).alignSelf(ItemAlign.Start)if(this.desc){Text(this.desc).fontSize(12).opacity(0.6).alignSelf(ItemAlign.Start).margin({top:3})}}Blank()if(this.showArrow){Image($r(app.media.arrow_right)).width(16).height(16).opacity(0.5)}}.width(100%).height(60).backgroundColor(Color.White).borderRadius(12).padding({left:16,right:16})// .onClick(this.onClick)}}PersonContent// view/PersonContent.etsimport{router}fromkit.ArkUIimportDateUtilfrom../../util/DateUtilimportPersonalItemfrom../../component/PersonalItemComponentexportstruct PersonContent{// 从全局 Storage 获取当前日期用于展示StorageLink(date)date:numberDateUtil.beginTimeOfDay(newDate())// 当前用户的每日目标实际项目中应从持久化存储读取State dailyTarget:number2000build(){Column(){// 用户信息区域this.buildUserInfo()// 功能列表List({space:12}){// 目标设置ListItem(){PersonalItem({icon:$r(app.media.ic_target),title:今日目标,desc:${this.dailyTarget}千卡,showArrow:true,// onClick: () {// // TODO: 弹出目标设置弹窗后续可扩展// console.log(打开目标设置)// }})}// 历史记录ListItem(){PersonalItem({icon:$r(app.media.ic_history),title:历史记录,desc:,showArrow:true,// onClick: () {// router.pushUrl({ url: pages/HistoryPage })// }})}// 成就系统ListItem(){PersonalItem({icon:$r(app.media.ic_achieve),title:我的成就,desc:,showArrow:true,// onClick: () {// router.pushUrl({ url: pages/AchievementPage })// }})}// 隐私与数据ListItem(){PersonalItem({icon:$r(app.media.ic_privacy),title:隐私与数据,desc:,showArrow:true,// onClick: () {// router.pushUrl({ url: pages/PrivacyDataPage })// }})}// 关于小VListItem(){PersonalItem({icon:$r(app.media.ic_about),title:关于小V,desc:v1.0.0,showArrow:false,// onClick: () {}})}// 退出应用ListItem(){Button(退出应用).width(100%).height(50).fontSize(16).fontColor(#ff3b30).backgroundColor(Color.Transparent).onClick((){router.clear()})}}.width(100%).alignListItem(ListItemAlign.Start)}.width(100%).height(100%).padding({top:20,left:20,right:20}).backgroundColor(#f5f5f5)}BuilderbuildUserInfo(){Row(){Image($r(app.media.ic_default_avatar)).width(60).height(60).borderRadius(30)Column(){Text(小V用户).fontSize(18).fontWeight(600).fontColor(Color.Black)Text(DateUtil.formatDate(this.date)).fontSize(12).fontColor(#888888)}.alignItems(HorizontalAlign.Start).margin({left:15})Blank()}.width(100%).padding({bottom:25})}}