SparkOS人机交互平台文档导览

<div class="doc-body" style="width: 100%; min-height: 100%; background: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 0;">
    <div class="header-bg" style="width: 100%; height: 280px; background-image: url('http://oss-beijing-m8.openstorage.cn/data-manager-platform/file/2026/f0a47748b59347e691e71235b2de39cc.png?AWSAccessKeyId=8VCX18XOURCKGUJDWNTJ&Expires=3351305258&Signature=lSsmkmWwlN5uNIFPEWWdPHkwBN4%3D'); background-size: cover; background-position: center; background-repeat: no-repeat;"></div>
    <div class="container" style="max-width: 100%;padding: 0 20px; position: relative; margin-top: -230px; box-sizing: border-box;">
        
        <details class="panel" style="margin-bottom: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.7); border: 1px solid #ECEEF3; box-shadow: 4px 8px 10px 0px rgba(55, 56, 67, 0.02); overflow: hidden; transition: border-color 0.3s ease;">
            <summary class="panel-header" style="display: flex; align-items: center; padding: 16px; cursor: pointer; user-select: none; list-style: none;">
                <div class="panel-icon" style="width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                    <img src="http://oss-beijing-m8.openstorage.cn/data-manager-platform/file/2026/8428429817034a1baeaf46c91bf66732.png?AWSAccessKeyId=8VCX18XOURCKGUJDWNTJ&Expires=3351295899&Signature=t2KuJDkC87RWWE3Nxv5YXFPml%2F0%3D" alt="产品介绍" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
                </div>
                <div class="panel-content" style="flex: 1; margin-right: 12px;">
                    <div class="panel-title" style="font-size: 16px; font-weight: 600; line-height: 24px; color: #3D3D3D;">产品介绍</div>
                    <div class="panel-desc" style="font-size: 12px; font-weight: normal; line-height: 20px; color: #8C8F9E;">包含产品介绍、产品核心能力、典型应用场景、快速入门</div>
                </div>
                <div class="panel-arrow" style="width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #495464; transition: transform 0.3s ease; flex-shrink: 0;">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </summary>
            <div class="panel-body" style="padding: 0 16px 16px 16px;">
                <div class="sub-docs-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                    
					 <a href="https://aiui-doc-admin.xf-yun.com/project-15/doc-835/" target="_blank" class="sub-doc" style="display: flex; align-items: flex-start; padding: 16px; border-radius: 8px; background: #F7F8FA; text-decoration: none; transition: all 0.3s ease;">
                        <div class="sub-doc-index" style="width: 24px; height: 24px; min-width: 24px; background: #FFFFFF; box-sizing: border-box; border: 1px solid #ECEEF3; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #325AF6; margin-right: 12px;">1</div>
                        <div class="sub-doc-text" style="flex: 1;">
                            <div class="sub-doc-title" style="font-size: 14px; font-weight: 600; line-height: 20px; color: #3D3D3D; margin-bottom: 4px;">SparkOS产品介绍</div>
                            <div class="sub-doc-desc" style="font-size: 12px; line-height: 18px; color: #8C8F9E;">零门槛一站式交互定制平台，提供官方最优模板体验，开箱即用</div>
                        </div>
                    </a>
					 <a href="https://aiui-doc-admin.xf-yun.com/project-15/doc-837/" target="_blank" class="sub-doc" style="display: flex; align-items: flex-start; padding: 16px; border-radius: 8px; background: #F7F8FA; text-decoration: none; transition: all 0.3s ease;">
                        <div class="sub-doc-index" style="width: 24px; height: 24px; min-width: 24px; background: #FFFFFF; box-sizing: border-box; border: 1px solid #ECEEF3; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #325AF6; margin-right: 12px;">2</div>
                        <div class="sub-doc-text" style="flex: 1;">
                            <div class="sub-doc-title" style="font-size: 14px; font-weight: 600; line-height: 20px; color: #3D3D3D; margin-bottom: 4px;">SparkOS新手指南</div>
                            <div class="sub-doc-desc" style="font-size: 12px; line-height: 18px; color: #8C8F9E;">平台功能一览，新手快速上手</div>
                        </div>
                    </a>
					 <a href="https://aiui-doc-admin.xf-yun.com/project-15/doc-840/" target="_blank" class="sub-doc" style="display: flex; align-items: flex-start; padding: 16px; border-radius: 8px; background: #F7F8FA; text-decoration: none; transition: all 0.3s ease;">
                        <div class="sub-doc-index" style="width: 24px; height: 24px; min-width: 24px; background: #FFFFFF; box-sizing: border-box; border: 1px solid #ECEEF3; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #325AF6; margin-right: 12px;">3</div>
                        <div class="sub-doc-text" style="flex: 1;">
                            <div class="sub-doc-title" style="font-size: 14px; font-weight: 600; line-height: 20px; color: #3D3D3D; margin-bottom: 4px;">SparkOS进阶教程</div>
                            <div class="sub-doc-desc" style="font-size: 12px; line-height: 18px; color: #8C8F9E;">平台进阶玩法，好玩易用的构建案例</div>
                        </div>
                    </a>
                </div>
            </div>
        </details>
        
        <details class="panel" style="margin-bottom: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.7); border: 1px solid #ECEEF3; box-shadow: 4px 8px 10px 0px rgba(55, 56, 67, 0.02); overflow: hidden; transition: border-color 0.3s ease;">
            <summary class="panel-header" style="display: flex; align-items: center; padding: 16px; cursor: pointer; user-select: none; list-style: none;">
                <div class="panel-icon" style="width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                    <img src="http://oss-beijing-m8.openstorage.cn/data-manager-platform/file/2026/0eb78aaaf8c54b558f67c56f6e585ecd.png?AWSAccessKeyId=8VCX18XOURCKGUJDWNTJ&Expires=3351296322&Signature=Vs74X9Sn0lxKGo5QFxEoo8vm8e8%3D" alt="SDK接入指南" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
                </div>
                <div class="panel-content" style="flex: 1; margin-right: 12px;">
                    <div class="panel-title" style="font-size: 16px; font-weight: 600; line-height: 24px; color: #3D3D3D;">API/SDK接入指南</div>
                    <div class="panel-desc" style="font-size: 12px; font-weight: normal; line-height: 20px; color: #8C8F9E;">涵盖SparkOS SDK接入流程、配置、能力及各链路接入方式</div>
                </div>
                <div class="panel-arrow" style="width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #495464; transition: transform 0.3s ease; flex-shrink: 0;">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </summary>
            <div class="panel-body" style="padding: 0 16px 16px 16px;">
                <div class="sub-docs-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
				   <a href="https://aiui-doc-admin.xf-yun.com/project-15/doc-845/" target="_blank" class="sub-doc" style="display: flex; align-items: flex-start; padding: 16px; border-radius: 8px; background: #F7F8FA; text-decoration: none; transition: all 0.3s ease;">
                        <div class="sub-doc-index" style="width: 24px; height: 24px; min-width: 24px; background: #FFFFFF; box-sizing: border-box; border: 1px solid #ECEEF3; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #325AF6; margin-right: 12px;">1</div>
                        <div class="sub-doc-text" style="flex: 1;">
                            <div class="sub-doc-title" style="font-size: 14px; font-weight: 600; line-height: 20px; color: #3D3D3D; margin-bottom: 4px;">SparkOS API接入文档</div>
                            <div class="sub-doc-desc" style="font-size: 12px; line-height: 18px; color: #8C8F9E;">WebAPI接入流程介绍</div>
                        </div>
                    </a>
                    <a href="https://aiui-doc-admin.xf-yun.com/project-15/doc-830/" target="_blank" class="sub-doc" style="display: flex; align-items: flex-start; padding: 16px; border-radius: 8px; background: #F7F8FA; text-decoration: none; transition: all 0.3s ease;">
                        <div class="sub-doc-index" style="width: 24px; height: 24px; min-width: 24px; background: #FFFFFF; box-sizing: border-box; border: 1px solid #ECEEF3; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #325AF6; margin-right: 12px;">2</div>
                        <div class="sub-doc-text" style="flex: 1;">
                            <div class="sub-doc-title" style="font-size: 14px; font-weight: 600; line-height: 20px; color: #3D3D3D; margin-bottom: 4px;">SparkOS Android SDK接入文档</div>
                            <div class="sub-doc-desc" style="font-size: 12px; line-height: 18px; color: #8C8F9E;">Android系统接入流程介绍</div>
                        </div>
                    </a>
                    <a href="https://aiui-doc-admin.xf-yun.com/project-15/doc-831/" target="_blank" class="sub-doc" style="display: flex; align-items: flex-start; padding: 16px; border-radius: 8px; background: #F7F8FA; text-decoration: none; transition: all 0.3s ease;">
                        <div class="sub-doc-index" style="width: 24px; height: 24px; min-width: 24px; background: #FFFFFF; box-sizing: border-box; border: 1px solid #ECEEF3; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #325AF6; margin-right: 12px;">3</div>
                        <div class="sub-doc-text" style="flex: 1;">
                            <div class="sub-doc-title" style="font-size: 14px; font-weight: 600; line-height: 20px; color: #3D3D3D; margin-bottom: 4px;">SparkOS iOS SDK接入文档</div>
                            <div class="sub-doc-desc" style="font-size: 12px; line-height: 18px; color: #8C8F9E;">iOS系统接入流程介绍</div>
                        </div>
                    </a>
                    <a href="https://aiui-doc-admin.xf-yun.com/project-15/doc-832/" target="_blank" class="sub-doc" style="display: flex; align-items: flex-start; padding: 16px; border-radius: 8px; background: #F7F8FA; text-decoration: none; transition: all 0.3s ease;">
                        <div class="sub-doc-index" style="width: 24px; height: 24px; min-width: 24px; background: #FFFFFF; box-sizing: border-box; border: 1px solid #ECEEF3; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #325AF6; margin-right: 12px;">4</div>
                        <div class="sub-doc-text" style="flex: 1;">
                            <div class="sub-doc-title" style="font-size: 14px; font-weight: 600; line-height: 20px; color: #3D3D3D; margin-bottom: 4px;">SparkOS Harmony NEXT接入文档</div>
                            <div class="sub-doc-desc" style="font-size: 12px; line-height: 18px; color: #8C8F9E;">鸿蒙系统接入流程介绍</div>
                        </div>
                    </a>
                </div>
            </div>
        </details>
        
        <details class="panel" style="margin-bottom: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.7); border: 1px solid #ECEEF3; box-shadow: 4px 8px 10px 0px rgba(55, 56, 67, 0.02); overflow: hidden; transition: border-color 0.3s ease;">
            <summary class="panel-header" style="display: flex; align-items: center; padding: 16px; cursor: pointer; user-select: none; list-style: none;">
                <div class="panel-icon" style="width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                    <img src="http://oss-beijing-m8.openstorage.cn/data-manager-platform/file/2026/069180f732624fb4ac933e3c0a2fc848.png?AWSAccessKeyId=8VCX18XOURCKGUJDWNTJ&Expires=3351296607&Signature=dV14y%2FaQJfGjdezZCESs3Ytq0V0%3D" alt="服务条款" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
                </div>
                <div class="panel-content" style="flex: 1; margin-right: 12px;">
                    <div class="panel-title" style="font-size: 16px; font-weight: 600; line-height: 24px; color: #3D3D3D;">服务条款</div>
                    <div class="panel-desc" style="font-size: 12px; font-weight: normal; line-height: 20px; color: #8C8F9E;">包含用户协议、平台隐私协议</div>
                </div>
                <div class="panel-arrow" style="width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #495464; transition: transform 0.3s ease; flex-shrink: 0;">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </summary>
            <div class="panel-body" style="padding: 0 16px 16px 16px;">
                <div class="sub-docs-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                    <a href="https://aiui-doc-admin.xf-yun.com/project-15/doc-827/" target="_blank" class="sub-doc" style="display: flex; align-items: flex-start; padding: 16px; border-radius: 8px; background: #F7F8FA; text-decoration: none; transition: all 0.3s ease;">
                        <div class="sub-doc-index" style="width: 24px; height: 24px; min-width: 24px; background: #FFFFFF; box-sizing: border-box; border: 1px solid #ECEEF3; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #325AF6; margin-right: 12px;">1</div>
                        <div class="sub-doc-text" style="flex: 1;">
                            <div class="sub-doc-title" style="font-size: 14px; font-weight: 600; line-height: 20px; color: #3D3D3D; margin-bottom: 4px;">SparkOS人机交互平台隐私协议</div>
                            <div class="sub-doc-desc" style="font-size: 12px; line-height: 18px; color: #8C8F9E;">平台隐私协议</div>
                        </div>
                    </a>
                    <a href="https://aiui-doc-admin.xf-yun.com/project-15/doc-828/" target="_blank" class="sub-doc" style="display: flex; align-items: flex-start; padding: 16px; border-radius: 8px; background: #F7F8FA; text-decoration: none; transition: all 0.3s ease;">
                        <div class="sub-doc-index" style="width: 24px; height: 24px; min-width: 24px; background: #FFFFFF; box-sizing: border-box; border: 1px solid #ECEEF3; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #325AF6; margin-right: 12px;">2</div>
                        <div class="sub-doc-text" style="flex: 1;">
                            <div class="sub-doc-title" style="font-size: 14px; font-weight: 600; line-height: 20px; color: #3D3D3D; margin-bottom: 4px;">SparkOS人机交互平台用户协议</div>
                            <div class="sub-doc-desc" style="font-size: 12px; line-height: 18px; color: #8C8F9E;">平台用户协议</div>
                        </div>
                    </a>
                </div>
            </div>
        </details>
    </div>
</div>
<style>
    .panel:hover { border-color: #325AF6 !important; }
    .sub-doc:hover .sub-doc-title { color: #325AF6 !important; }
    details.panel > summary::-webkit-details-marker { display: none; }
	details[open] .panel-arrow { transform: rotate(180deg); }
    .panel-arrow { transition: transform 0.3s ease; }
</style>