HarmonyOS 鸿蒙Next 关于 HAR HSP 应该如何选择呀？有没有大佬能举一些常见应用例子

关于 HAR HSP  应该如何选择呀？？？？，有没有大佬能举一些 常见应用在例子！！！，比如说功能模块，头部 标题和返回按钮

.el-image-viewer__wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483649 !important; } .el-image-viewer__btn { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; opacity: .8; cursor: pointer; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .el-image-viewer__btn .el-icon { font-size: inherit; cursor: pointer } .el-image-viewer__close { top: 60px; right: 40px; width: 40px; height: 40px; font-size: 40px } .el-image-viewer__canvas { position: static; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .el-image-viewer__actions { left: 50%; bottom: 30px; transform: translateX(-50%); width: 282px; height: 44px; padding: 0 23px; background-color: #333333; border-color: #fff; border-radius: 22px } .el-image-viewer__actions__inner { width: 100%; height: 100%; text-align: justify; cursor: default; font-size: 23px; color: #fff; display: flex; align-items: center; justify-content: space-around } .el-image-viewer__actions__inner i:nth-child(3), .el-image-viewer__actions__inner i:nth-child(4), .el-image-viewer__actions__inner i:nth-child(5) { display: none; } .el-image-viewer__prev { top: 50%; transform: translateY(-50%); left: 40px; width: 44px; height: 44px; font-size: 24px; color: #fff; background-color: #333333; border-color: #fff } .el-image-viewer__next { top: 50%; transform: translateY(-50%); right: 40px; text-indent: 2px; width: 44px; height: 44px; font-size: 24px; color: #fff; background-color: #333333; border-color: #fff } .el-image-viewer__close { width: 44px; height: 44px; font-size: 24px; color: #fff; background-color: #333333; border-color: #fff } .el-image-viewer__mask { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: .5; background: #000 } .viewer-fade-enter-active { -webkit-animation: viewer-fade-in var(–el-transition-duration); animation: viewer-fade-in var(–el-transition-duration) } .viewer-fade-leave-active { -webkit-animation: viewer-fade-out var(–el-transition-duration); animation: viewer-fade-out var(–el-transition-duration) } @-webkit-keyframes viewer-fade-in { 0% { transform: translate3d(0, -20px, 0); opacity: 0 } 100% { transform: translate3d(0, 0, 0); opacity: 1 } } @keyframes viewer-fade-in { 0% { transform: translate3d(0, -20px, 0); opacity: 0 } 100% { transform: translate3d(0, 0, 0); opacity: 1 } } @-webkit-keyframes viewer-fade-out { 0% { transform: translate3d(0, 0, 0); opacity: 1 } 100% { transform: translate3d(0, -20px, 0); opacity: 0 } } @keyframes viewer-fade-out { 0% { transform: translate3d(0, 0, 0); opacity: 1 } 100% { transform: translate3d(0, -20px, 0); opacity: 0 } } .el-icon-loading { -webkit-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite } .el-icon–right { margin-left: 5px } .el-icon–left { margin-right: 5px } @-webkit-keyframes rotating { 0% { transform: rotateZ(0) } 100% { transform: rotateZ(360deg) } } @keyframes rotating { 0% { transform: rotateZ(0) } 100% { transform: rotateZ(360deg) } } .el-icon { --color: inherit; height: 1em; width: 1em; line-height: 1em; display: inline-flex; justify-content: center; align-items: center; position: relative; fill: currentColor; color: var(–color); font-size: inherit } .el-icon.is-loading { -webkit-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite } .el-icon svg { height: 1em; width: 1em }