{"id":96371,"date":"2026-08-27T16:32:03","date_gmt":"2026-08-27T08:32:03","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/96371.html"},"modified":"2026-08-27T16:32:03","modified_gmt":"2026-08-27T08:32:03","slug":"harmonyos-6-1-1-ai%e5%ad%97%e5%b9%95%e6%96%b0%e7%89%b9%e6%80%a7%e6%b7%b1%e5%ba%a6%e8%a7%a3%e6%9e%90%ef%bc%9a%e4%bb%8eaicaptioncomponent%e5%9b%9b%e5%a4%a7%e6%96%b0%e5%a2%9e%e5%ad%97%e6%ae%b5%e5%88%b0k","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/96371.html","title":{"rendered":"HarmonyOS 6.1.1 AI\u5b57\u5e55\u65b0\u7279\u6027\u6df1\u5ea6\u89e3\u6790\uff1a\u4eceAICaptionComponent\u56db\u5927\u65b0\u589e\u5b57\u6bb5\u5230K\u6b4c\u793e\u4ea4\u821e\u53f0\u9ed1\u9713\u8679\u7d2b\u6df1\u8272\u67b6\u6784\u5168\u94fe\u8def\u5b9e\u6218"},"content":{"rendered":"

\u4e00\u3001\u6280\u672f\u524d\u8a00：HarmonyOS ArkUI \u4e0e Speech Kit \u7684\u6280\u672f\u80cc\u666f<\/h3>\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

HarmonyOS \u4f5c\u4e3a\u534e\u4e3a\u63a8\u51fa\u7684\u9762\u5411\u4e07\u7269\u4e92\u8054\u65f6\u4ee3\u7684\u5206\u5e03\u5f0f\u64cd\u4f5c\u7cfb\u7edf，\u5176\u5e94\u7528\u5f00\u53d1\u6846\u67b6 ArkUI \u627f\u8f7d\u7740\u6784\u5efa\u591a\u7aef\u4e00\u81f4\u4f53\u9a8c\u7684\u6838\u5fc3\u4f7f\u547d\u3002ArkUI \u91c7\u7528\u58f0\u660e\u5f0f\u5f00\u53d1\u8303\u5f0f，\u5f00\u53d1\u8005\u901a\u8fc7 ArkTS \u8bed\u8a00（TypeScript \u7684\u8d85\u96c6，\u4e13\u4e3a HarmonyOS \u8bbe\u5907\u4fa7\u5e94\u7528\u5f00\u53d1\u5b9a\u5236）\u63cf\u8ff0\u754c\u9762\u7ed3\u6784\u4e0e\u72b6\u6001\u7ed1\u5b9a\u5173\u7cfb，\u6846\u67b6\u5e95\u5c42\u8d1f\u8d23\u9ad8\u6548\u7684\u5dee\u5206\u6e32\u67d3\u4e0e\u72b6\u6001\u9a71\u52a8\u66f4\u65b0\u3002\u5728 ArkUI \u7684\u58f0\u660e\u5f0f\u6a21\u578b\u4e2d，@Entry \u6807\u6ce8\u5165\u53e3\u7ec4\u4ef6，@Component \u58f0\u660e\u81ea\u5b9a\u4e49\u7ec4\u4ef6，@State \u7ba1\u7406\u7ec4\u4ef6\u5185\u90e8\u53ef\u53d8\u72b6\u6001，@Builder \u5c01\u88c5\u53ef\u590d\u7528\u7684 UI \u6784\u5efa\u51fd\u6570，@Observed \u914d\u5408 @ObjectLink \u5b9e\u73b0\u8de8\u7ec4\u4ef6\u7684\u5bf9\u8c61\u7ea7\u89c2\u5bdf\u3002\u8fd9\u5957\u72b6\u6001\u7ba1\u7406\u2014\u58f0\u660e\u5f0f\u6784\u5efa\u2014\u5dee\u5206\u6e32\u67d3\u7684\u4e09\u5c42\u4f53\u7cfb，\u662f\u7406\u89e3 HarmonyOS \u539f\u751f\u5e94\u7528\u5f00\u53d1\u7684\u57fa\u7840\u8303\u5f0f\u3002<\/p>\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"
\nArkUI \u7684\u5e03\u5c40\u80fd\u529b\u8986\u76d6\u4e86 Flex \u5f39\u6027\u5e03\u5c40\u3001Stack \u5806\u53e0\u5e03\u5c40\u3001Column \u7ebf\u6027\u7eb5\u5411\u3001Row \u7ebf\u6027\u6a2a\u5411\u3001Scroll \u6eda\u52a8\u5bb9\u5668\u7b49\u5bb9\u5668\u7ec4\u4ef6，\u4ee5\u53ca Text\u3001Image\u3001TextInput\u3001Circle \u7b49\u57fa\u7840\u5185\u5bb9\u7ec4\u4ef6\u3002\u5176\u4e2d linearGradient \u5c5e\u6027\u652f\u6301\u7ebf\u6027\u6e10\u53d8\u80cc\u666f，borderRadius \u5b9e\u73b0\u5706\u89d2\u88c1\u5207，opacity \u63a7\u5236\u900f\u660e\u5ea6\u2014\u2014\u8fd9\u4e9b\u89c6\u89c9\u5c5e\u6027\u4e0e ArkUI \u7684\u72b6\u6001\u7ed1\u5b9a\u673a\u5236\u7ed3\u5408\u540e，\u53ef\u4ee5\u8f7b\u677e\u5b9e\u73b0\u547c\u5438\u52a8\u753b\u3001\u9009\u4e2d\u9ad8\u4eae\u3001\u6e10\u53d8\u4e3b\u9898\u7b49\u52a8\u6548\u3002\u672c\u6848\u4f8b\u5927\u91cf\u8fd0\u7528\u4e86\u6e10\u53d8\u80cc\u666f\u914d\u5408\u5b9a\u65f6\u5668\u9a71\u52a8\u7684\u5e03\u5c14\u72b6\u6001\u7ffb\u8f6c，\u5b9e\u73b0\u4e86\u67f1\u72b6\u56fe\u6ce2\u52a8\u3001\u5934\u50cf\u547c\u5438\u3001\u5c31\u7eea\u72b6\u6001\u95ea\u70c1\u7b49\u8f7b\u91cf\u52a8\u753b\u6548\u679c，\u5145\u5206\u5c55\u793a\u4e86\u58f0\u660e\u5f0f UI \u5728\u52a8\u6548\u8868\u8fbe\u4e0a\u7684\u7b80\u6d01\u4e0e\u9ad8\u6548\u3002<\/p>\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"
\nHarmonyOS \u7684 Speech Kit（\u8bed\u97f3\u670d\u52a1\u5957\u4ef6）\u662f\u7cfb\u7edf\u7ea7 AI \u80fd\u529b\u5bf9\u5916\u5f00\u653e\u7684\u91cd\u8981\u7a97\u53e3，\u5176\u4e2d AICaptionComponent（AI \u5b57\u5e55\u7ec4\u4ef6）\u662f Speech Kit \u5728 HarmonyOS 6.1.1 \u7248\u672c\u4e2d\u91cd\u70b9\u589e\u5f3a\u7684\u6838\u5fc3\u7ec4\u4ef6\u3002\u8be5\u7ec4\u4ef6\u80fd\u591f\u63a5\u6536\u5916\u90e8\u97f3\u9891\u6d41，\u901a\u8fc7\u7aef\u4fa7\u6216\u4e91\u4fa7\u8bed\u97f3\u8bc6\u522b\u5f15\u64ce\u5c06\u8bed\u97f3\u8f6c\u5316\u4e3a\u5b57\u5e55\u6587\u672c，\u5e76\u652f\u6301\u5b9e\u65f6\u7ffb\u8bd1\u663e\u793a\u3002\u5728 K\u6b4c\u793e\u4ea4\u3001\u76f4\u64ad\u8fde\u9ea6\u3001\u4f1a\u8bae\u7eaa\u8981\u7b49\u573a\u666f\u4e2d，AI \u5b57\u5e55\u7ec4\u4ef6\u4e3a\u542c\u969c\u7528\u6237\u3001\u5916\u8bed\u7528\u6237\u3001\u5608\u6742\u73af\u5883\u7528\u6237\u63d0\u4f9b\u4e86\u5173\u952e\u7684\u65e0\u969c\u788d\u4fe1\u606f\u83b7\u53d6\u901a\u9053\u3002\u7ec4\u4ef6\u4ee5 isShown（\u663e\u793a\u72b6\u6001，\u652f\u6301 @Link \u53cc\u5411\u7ed1\u5b9a）\u3001controller（\u63a7\u5236\u5668\u5b9e\u4f8b，\u8c03\u7528 writeAudio \u5199\u5165\u97f3\u9891）\u3001options（\u914d\u7f6e\u9009\u9879\u5bf9\u8c61）\u4e09\u5927\u5165\u53c2\u9a71\u52a8，\u5f62\u6210"\u97f3\u9891\u8f93\u5165\u2014\u8bc6\u522b\u7ffb\u8bd1\u2014\u5b57\u5e55\u6e32\u67d3"\u7684\u5b8c\u6574\u95ed\u73af\u3002<\/p>\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"
\nHarmonyOS 6.1.1 \u7248\u672c\u4e3a AICaptionComponent \u7684 AICaptionOptions \u914d\u7f6e\u5bf9\u8c61\u65b0\u589e\u4e86\u56db\u4e2a\u5173\u952e\u5b57\u6bb5，\u663e\u8457\u63d0\u5347\u4e86\u5b57\u5e55\u7684\u53ef\u5b9a\u5236\u6027\u4e0e\u591a\u8bed\u8a00\u9002\u914d\u80fd\u529b\u3002\u7b2c\u4e00，sourceLanguage（\u6e90\u8bed\u8a00）：\u53d6\u503c\u4e3a 'zh'（\u4e2d\u6587）\u6216 'en'（\u82f1\u6587），\u6307\u5b9a\u97f3\u9891\u6d41\u7684\u6e90\u8bed\u8a00\u7c7b\u578b，\u5f15\u64ce\u636e\u6b64\u9009\u62e9\u5bf9\u5e94\u8bed\u79cd\u7684\u58f0\u5b66\u6a21\u578b\u4e0e\u8bed\u8a00\u6a21\u578b；\u7b2c\u4e8c，targetLanguage（\u76ee\u6807\u8bed\u8a00）：\u53d6\u503c\u4e3a 'zh'\u3001'en' \u6216 'zh-en'（\u4e2d\u82f1\u53cc\u8bed），\u6307\u5b9a\u5b57\u5e55\u8f93\u51fa\u7684\u76ee\u6807\u8bed\u8a00，\u5f53\u6e90\u8bed\u8a00\u4e3a\u4e2d\u6587\u65f6\u76ee\u6807\u8bed\u8a00\u9501\u5b9a\u4e3a 'zh'（\u65e0\u7ffb\u8bd1\u65b9\u5411），\u5f53\u6e90\u8bed\u8a00\u4e3a\u82f1\u6587\u65f6\u53ef\u9009\u62e9\u7ffb\u8bd1\u4e3a\u4e2d\u6587\u3001\u4fdd\u6301\u82f1\u6587\u6216\u8f93\u51fa\u4e2d\u82f1\u53cc\u8bed\u5b57\u5e55；\u7b2c\u4e09，fontSize（\u5b57\u4f53\u5927\u5c0f）：\u7c7b\u578b\u4e3a AICaptionFontSize \u679a\u4e3e，\u63d0\u4f9b SMALL（\u5c0f\u53f7）\u3001NORMAL（\u6807\u51c6）\u3001BIG（\u5927\u53f7）\u3001LARGE（\u8d85\u5927）\u56db\u6863\u53ef\u9009，\u6ee1\u8db3\u4e0d\u540c\u89c6\u529b\u9700\u6c42\u4e0e\u5c4f\u5e55\u8ddd\u79bb\u573a\u666f；\u7b2c\u56db，fontColor（\u5b57\u4f53\u989c\u8272）：\u7c7b\u578b\u4e3a ResourceColor，\u5141\u8bb8\u5f00\u53d1\u8005\u4f20\u5165\u4efb\u610f\u989c\u8272\u503c\u81ea\u5b9a\u4e49\u5b57\u5e55\u6587\u5b57\u989c\u8272\u3002\u8fd9\u56db\u4e2a\u5b57\u6bb5\u7684\u52a0\u5165，\u4f7f AI \u5b57\u5e55\u4ece"\u80fd\u7528"\u8fc8\u5411"\u597d\u7528"，\u5f00\u53d1\u8005\u53ef\u4ee5\u9488\u5bf9 K\u6b4c\u8ddf\u5531\u3001\u8bf4\u5531\u901f\u8bb0\u3001\u7ca4\u8bed\u8f85\u52a9\u3001\u76f4\u64ad\u8fde\u9ea6\u7b49\u7ec6\u5206\u573a\u666f\u505a\u51fa\u7cbe\u7ec6\u5316\u7684\u8bed\u8a00\u4e0e\u5916\u89c2\u914d\u7f6e\u3002<\/p>\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"
\nK\u6b4c\u793e\u4ea4\u662f\u79fb\u52a8\u4e92\u8054\u7f51\u5a31\u4e50\u8d5b\u9053\u4e2d\u517c\u5177\u5b9e\u65f6\u6027\u4e0e\u793e\u4ea4\u6027\u7684\u5782\u76f4\u54c1\u7c7b\u3002\u7528\u6237\u5728\u865a\u62df\u6b4c\u623f\u4e2d\u6392\u9ea6\u3001\u8fde\u9ea6\u3001\u5408\u5531，\u901a\u8fc7\u5b9e\u65f6\u8bed\u97f3\u4e92\u52a8\u5efa\u7acb\u793e\u4ea4\u8fde\u63a5\u3002\u8fd9\u4e00\u573a\u666f\u5bf9\u5b57\u5e55\u6709\u72ec\u7279\u9700\u6c42：\u5916\u8bed\u6b4c\u8bcd\u8ddf\u5531\u65f6\u9700\u8981\u539f\u6587\u4e0e\u4e2d\u6587\u8bd1\u6587\u5bf9\u7167\u663e\u793a（\u4e2d\u82f1\u53cc\u8bed\u6a21\u5f0f），\u8bf4\u5531\u6b4c\u66f2\u8bed\u901f\u6781\u5feb\u9700\u8981\u66f4\u5927\u5b57\u53f7\u786e\u4fdd\u53ef\u8bfb\u6027，\u7ca4\u8bed\u97f3\u9891\u56e0 sourceLanguage \u4ec5\u652f\u6301 zh\/en \u800c\u5f52\u5165\u4e2d\u6587\u6e90\u5904\u7406，\u8fde\u9ea6\u5bf9\u8bdd\u573a\u666f\u5219\u9700\u8981\u53cc\u8bed\u5b57\u5e55\u8f85\u52a9\u8de8\u8bed\u8a00\u4ea4\u6d41\u3002\u8fd9\u4e9b\u7ec6\u5206\u9700\u6c42\u6070\u6070\u5bf9\u5e94\u4e86 6.1.1 \u65b0\u589e\u56db\u5b57\u6bb5\u7684\u914d\u7f6e\u80fd\u529b，\u4f7f AI \u5b57\u5e55\u771f\u6b63\u878d\u5165\u4e1a\u52a1\u6d41\u7a0b\u800c\u975e\u4ec5\u4f5c\u8f85\u52a9\u5c55\u793a\u3002<\/p>\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"
\n\u672c\u6848\u4f8b"\u9ea6\u9738\u6b22\u5531\u00b7K\u6b4c\u793e\u4ea4\u5e94\u7528"\u6b63\u662f\u57fa\u4e8e\u4e0a\u8ff0\u6280\u672f\u6808\u4e0e\u4e1a\u52a1\u7406\u89e3\u6784\u5efa\u7684\u5b8c\u6574\u793a\u4f8b\u5e94\u7528\u3002\u5e94\u7528\u91c7\u7528\u821e\u53f0\u9ed1（#120A1A）\u4f5c\u4e3a\u5168\u5c40\u5e95\u8272，\u53e0\u52a0\u9713\u8679\u7d2b（#A855F7）\u4e0e\u6b22\u5531\u7c89（#F472B6）\u5f62\u6210\u6df1\u8272\u821e\u53f0\u4e3b\u9898，\u8425\u9020\u6c89\u6d78\u5f0f K \u6b4c\u6c1b\u56f4\u3002\u5e94\u7528\u8bbe\u7f6e\u56db\u4e2a\u5e95\u90e8 Tab：\u6b4c\u623f（\u5206\u7c7b\u5bab\u683c\u5165\u53e3+\u70ed\u95e8\u9ea6\u9738\u6a2a\u6ed1\u5927\u5361）\u3001\u70b9\u5531（\u5927\u7f16\u53f7\u70ed\u6b4c\u70b9\u5531\u699c+\u6708\u5ea6\u6b22\u5531\u67f1\u72b6\u56fe）\u3001AI\u5b57\u5e55（Speech Kit \u7279\u6027\u5c55\u793a\u9875，\u542b\u9884\u89c8\/\u8bed\u8a00\u8bbe\u7f6e\/\u5916\u89c2\u8bbe\u7f6e\/\u4ee3\u7801\u9884\u89c8\/\u573a\u666f\u63a8\u8350\u4e94\u4e2a\u533a\u5757）\u3001\u6211\u7684（\u4f1a\u5458\u6e10\u53d8\u5927\u5361+\u529f\u80fd\u6e05\u5355\u884c）\u3002\u540c\u65f6\u914d\u5957\u521b\u5efa\/\u7f16\u8f91\/\u89e3\u6563\u6b4c\u623f\u7684\u4e09\u5957\u5f39\u7a97\u7cfb\u7edf，\u901a\u8fc7\u5168\u5c4f\u906e\u7f69+\u5c45\u4e2d\u9762\u677f\u7684\u6a21\u5f0f\u5b9e\u73b0\u6a21\u6001\u4ea4\u4e92\u3002\u6574\u4f53\u8bbe\u8ba1\u5c06 Speech Kit \u7684 AI \u80fd\u529b\u6df1\u5ea6\u5d4c\u5165 K \u6b4c\u793e\u4ea4\u6d41\u7a0b，\u662f HarmonyOS \u539f\u751f\u5e94\u7528\u4e2d AI \u80fd\u529b\u4e0e\u5782\u76f4\u4e1a\u52a1\u573a\u666f\u878d\u5408\u7684\u5178\u578b\u8303\u4f8b\u3002<\/p>\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

\u4e8c\u3001\u6574\u4f53\u67b6\u6784\u6d41\u7a0b\u56fe<\/h3>\n

\u4ee5\u4e0b\u6d41\u7a0b\u56fe\u5c55\u793a\u4e86\u672c\u5e94\u7528\u7684\u6574\u4f53\u67b6\u6784\u5c42\u6b21，\u4ece\u9876\u5c42\u7ec4\u4ef6\u5230\u5e95\u5c42\u6570\u636e\u6a21\u578b\u4e0e\u7cfb\u7edf\u670d\u52a1\u7684\u4f9d\u8d56\u5173\u7cfb：<\/p>\n

#mermaid-svg-C7yTo4haOTkOnyBO{font-family:\\”trebuchet ms\\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-C7yTo4haOTkOnyBO .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-C7yTo4haOTkOnyBO .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-C7yTo4haOTkOnyBO .error-icon{fill:#552222;}#mermaid-svg-C7yTo4haOTkOnyBO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-C7yTo4haOTkOnyBO .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-C7yTo4haOTkOnyBO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-C7yTo4haOTkOnyBO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-C7yTo4haOTkOnyBO .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-C7yTo4haOTkOnyBO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-C7yTo4haOTkOnyBO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-C7yTo4haOTkOnyBO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-C7yTo4haOTkOnyBO .marker.cross{stroke:#333333;}#mermaid-svg-C7yTo4haOTkOnyBO svg{font-family:\\”trebuchet ms\\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-C7yTo4haOTkOnyBO p{margin:0;}#mermaid-svg-C7yTo4haOTkOnyBO .label{font-family:\\”trebuchet ms\\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-C7yTo4haOTkOnyBO .cluster-label text{fill:#333;}#mermaid-svg-C7yTo4haOTkOnyBO .cluster-label span{color:#333;}#mermaid-svg-C7yTo4haOTkOnyBO .cluster-label span p{background-color:transparent;}#mermaid-svg-C7yTo4haOTkOnyBO .label text,#mermaid-svg-C7yTo4haOTkOnyBO span{fill:#333;color:#333;}#mermaid-svg-C7yTo4haOTkOnyBO .node rect,#mermaid-svg-C7yTo4haOTkOnyBO .node circle,#mermaid-svg-C7yTo4haOTkOnyBO .node ellipse,#mermaid-svg-C7yTo4haOTkOnyBO .node polygon,#mermaid-svg-C7yTo4haOTkOnyBO .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-C7yTo4haOTkOnyBO .rough-node .label text,#mermaid-svg-C7yTo4haOTkOnyBO .node .label text,#mermaid-svg-C7yTo4haOTkOnyBO .image-shape .label,#mermaid-svg-C7yTo4haOTkOnyBO .icon-shape .label{text-anchor:middle;}#mermaid-svg-C7yTo4haOTkOnyBO .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-C7yTo4haOTkOnyBO .rough-node .label,#mermaid-svg-C7yTo4haOTkOnyBO .node .label,#mermaid-svg-C7yTo4haOTkOnyBO .image-shape .label,#mermaid-svg-C7yTo4haOTkOnyBO .icon-shape .label{text-align:center;}#mermaid-svg-C7yTo4haOTkOnyBO .node.clickable{cursor:pointer;}#mermaid-svg-C7yTo4haOTkOnyBO .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-C7yTo4haOTkOnyBO .arrowheadPath{fill:#333333;}#mermaid-svg-C7yTo4haOTkOnyBO .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-C7yTo4haOTkOnyBO .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-C7yTo4haOTkOnyBO .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-C7yTo4haOTkOnyBO .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-C7yTo4haOTkOnyBO .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-C7yTo4haOTkOnyBO .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-C7yTo4haOTkOnyBO .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-C7yTo4haOTkOnyBO .cluster text{fill:#333;}#mermaid-svg-C7yTo4haOTkOnyBO .cluster span{color:#333;}#mermaid-svg-C7yTo4haOTkOnyBO div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\”trebuchet ms\\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-C7yTo4haOTkOnyBO .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-C7yTo4haOTkOnyBO rect.text{fill:none;stroke-width:0;}#mermaid-svg-C7yTo4haOTkOnyBO .icon-shape,#mermaid-svg-C7yTo4haOTkOnyBO .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-C7yTo4haOTkOnyBO .icon-shape p,#mermaid-svg-C7yTo4haOTkOnyBO .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-C7yTo4haOTkOnyBO .icon-shape .label rect,#mermaid-svg-C7yTo4haOTkOnyBO .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-C7yTo4haOTkOnyBO .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-C7yTo4haOTkOnyBO .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-C7yTo4haOTkOnyBO :root{–mermaid-font-family:\\”trebuchet ms\\”,verdana,arial,sans-serif;}<\/p>\n

Speech Kit \u7cfb\u7edf\u670d\u52a1<\/p>\n

<\/span><\/p>\n

Builder\u6784\u5efa\u5c42<\/p>\n

<\/span><\/p>\n

\u72b6\u6001\u7ba1\u7406\u5c42<\/p>\n

<\/span><\/p>\n

\u5165\u53e3\u5c42<\/p>\n

<\/span><\/span><\/span><\/p>\n

0<\/p>\n

<\/span><\/p>\n

1<\/p>\n

<\/span><\/p>\n

2<\/p>\n

<\/span><\/p>\n

3<\/p>\n

<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n

\u6570\u636e\u6a21\u578b\u5c42<\/p>\n

<\/span><\/p>\n

RoomItem \u6b4c\u623f<\/p>\n

<\/span><\/p>\n

SingerItem \u9ea6\u9738<\/p>\n

<\/span><\/p>\n

SongItem \u70b9\u5531\u699c<\/p>\n

<\/span><\/p>\n

CaptionScene \u5b57\u5e55\u573a\u666f<\/p>\n

<\/span><\/p>\n

UserStat \u529f\u80fd\u6e05\u5355<\/p>\n

<\/span><\/p>\n

Page1120 \u4e3b\u9875\u9762@Entry @Component<\/p>\n

<\/span><\/p>\n

currentTab \u5f53\u524dTab\u7d22\u5f15<\/p>\n

<\/span><\/p>\n

breath \u547c\u5438\u52a8\u753b\u5f00\u5173<\/p>\n

<\/span><\/p>\n

addModal \/ editModal \/ delModal\u4e09\u5957\u5f39\u7a97\u5f00\u5173<\/p>\n

<\/span><\/p>\n

AI\u5b57\u5e55\u72b6\u6001\u7ec4srcLang \/ tgtLang \/captionSize \/ captionColor<\/p>\n

<\/span><\/p>\n

\u4e1a\u52a1\u6570\u636e\u7ec4roomList \/ singerList \/songList \/ sceneList \/ statList<\/p>\n

<\/span><\/p>\n

headerMain \u5934\u90e8\u6e10\u53d8Banner+\u641c\u7d22+chips<\/p>\n

<\/span><\/p>\n

tabRoom \u6b4c\u623fTab\u5bab\u683c+\u6a2a\u6ed1\u5927\u5361<\/p>\n

<\/span><\/p>\n

tabOrder \u70b9\u5531Tab\u70ed\u6b4c\u699c+\u67f1\u72b6\u56fe<\/p>\n

<\/span><\/p>\n

tabCaption AI\u5b57\u5e55Tab\u4e94\u533a\u5757\u7279\u6027\u9875<\/p>\n

<\/span><\/p>\n

tabMine \u6211\u7684Tab\u4f1a\u5458\u5361+\u529f\u80fd\u6e05\u5355<\/p>\n

<\/span><\/p>\n

chartCard \u67f1\u72b6\u56fe<\/p>\n

<\/span><\/p>\n

tabBar \u5e95\u90e8\u5bfc\u822a<\/p>\n

<\/span><\/p>\n

panelAdd \/ panelEdit \/ panelDel\u4e09\u5957\u5f39\u7a97\u9762\u677f<\/p>\n

<\/span><\/p>\n

AICaptionComponentAI\u5b57\u5e55\u7ec4\u4ef6<\/p>\n

<\/span><\/p>\n

AICaptionController\u63a7\u5236\u5668 writeAudio<\/p>\n

<\/span><\/p>\n

AICaptionOptionssourceLanguage\/targetLanguagefontSize\/fontColor<\/p>\n

<\/span><\/p>\n

AudioData\u97f3\u9891\u6570\u636e\u5757<\/p>\n

<\/span><\/p>\n

\u6d41\u7a0b\u56fe\u6e05\u6670\u5730\u5448\u73b0\u4e86\u5e94\u7528\u7684\u4e94\u5c42\u67b6\u6784：\u5165\u53e3\u5c42\u7684 Page1120 \u4f5c\u4e3a\u6839\u7ec4\u4ef6\u9a71\u52a8\u6574\u4e2a\u9875\u9762；\u72b6\u6001\u7ba1\u7406\u5c42\u7ef4\u62a4 Tab \u5207\u6362\u3001\u547c\u5438\u52a8\u753b\u3001\u5f39\u7a97\u5f00\u5173\u3001AI \u5b57\u5e55\u914d\u7f6e\u4e0e\u4e94\u5927\u4e1a\u52a1\u6570\u636e\u5217\u8868；Builder \u6784\u5efa\u5c42\u5c06\u754c\u9762\u62c6\u5206\u4e3a\u5934\u90e8\u3001\u56db\u4e2a Tab \u5185\u5bb9\u3001\u56fe\u8868\u5361\u3001\u5e95\u90e8\u5bfc\u822a\u4e0e\u4e09\u5957\u5f39\u7a97\u9762\u677f，\u6bcf\u4e2a Builder \u804c\u8d23\u5355\u4e00\u3001\u53ef\u72ec\u7acb\u7ef4\u62a4；\u6570\u636e\u6a21\u578b\u5c42\u4ee5 @Observed \u7c7b\u627f\u8f7d\u6b4c\u623f\u3001\u9ea6\u9738\u3001\u70b9\u5531\u699c\u3001\u5b57\u5e55\u573a\u666f\u3001\u529f\u80fd\u6e05\u5355\u7b49\u4e1a\u52a1\u5b9e\u4f53；Speech Kit \u7cfb\u7edf\u670d\u52a1\u5c42\u5219\u5c06 AICaptionComponent\u3001AICaptionController\u3001AICaptionOptions\u3001AudioData \u56db\u4e2a\u6838\u5fc3 API \u6709\u673a\u4e32\u8054，\u5f62\u6210 AI \u5b57\u5e55\u80fd\u529b\u95ed\u73af\u3002<\/p>\n

\u4e09\u3001\u989c\u8272\u7cfb\u7edf\u4e0e\u5e38\u91cf\u5b9a\u4e49<\/h3>\n

3.1 \u5bfc\u5165\u58f0\u660e\u4e0e\u4e3b\u9898\u8272\u677f\u63a5\u53e3<\/h4>\n

\u5e94\u7528\u9996\u5148\u4ece Speech Kit \u4e0e\u57fa\u7840\u670d\u52a1 Kit \u4e2d\u5bfc\u5165\u6240\u9700\u7684\u7c7b\u578b，\u968f\u540e\u5b9a\u4e49\u989c\u8272\u7cfb\u7edf\u63a5\u53e3\u4e0e\u5e38\u91cf\u3002<\/p>\n

import<\/span> {<\/span> AICaptionComponent,<\/span> AudioData,<\/span> AICaptionOptions,<\/span> AICaptionController,<\/span> AICaptionFontSize }<\/span> from<\/span> '@kit.SpeechKit'<\/span>;<\/span>
\nimport<\/span> {<\/span> BusinessError }<\/span> from<\/span> '@kit.BasicServicesKit'<\/span>;<\/span><\/p>\n

\/\/ ============ \u2461 \u989c\u8272\u7cfb\u7edf ============<\/span><\/p>\n

\/** \u4e3b\u9898\u8272\u677f\u63a5\u53e3：\u96c6\u4e2d\u58f0\u660e\u9875\u9762\u6240\u6709\u989c\u8272\u5b57\u6bb5（\u821e\u53f0\u9ed1+\u9713\u8679\u7d2b+\u6b22\u5531\u7c89\u6df1\u8272\u7cfb） *\/<\/span>
\ninterface<\/span> ColorPalette<\/span> {<\/span>
\n bg:<\/span> string<\/span>;<\/span>
\n card:<\/span> string<\/span>;<\/span>
\n chip:<\/span> string<\/span>;<\/span>
\n title:<\/span> string<\/span>;<\/span>
\n sub:<\/span> string<\/span>;<\/span>
\n text3:<\/span> string<\/span>;<\/span>
\n purple:<\/span> string<\/span>;<\/span>
\n purpleD:<\/span> string<\/span>;<\/span>
\n pink:<\/span> string<\/span>;<\/span>
\n cyan:<\/span> string<\/span>;<\/span>
\n green:<\/span> string<\/span>;<\/span>
\n gold:<\/span> string<\/span>;<\/span>
\n line:<\/span> string<\/span>;<\/span>
\n tabOn:<\/span> string<\/span>;<\/span>
\n mask:<\/span> string<\/span>;<\/span>
\n}<\/span><\/p>\n

\u5bfc\u5165\u8bed\u53e5\u4ece @kit.SpeechKit \u4e2d\u5f15\u5165\u4e86\u4e94\u4e2a\u6838\u5fc3\u6807\u8bc6\u7b26：AICaptionComponent \u662f AI \u5b57\u5e55\u7684 UI \u7ec4\u4ef6，\u76f4\u63a5\u5728 build() \u4e2d\u6e32\u67d3；AudioData \u662f\u97f3\u9891\u6570\u636e\u63a5\u53e3，\u5c01\u88c5 PCM \u5b57\u8282\u6d41\u4f9b\u63a7\u5236\u5668\u6d88\u8d39；AICaptionOptions \u662f\u914d\u7f6e\u9009\u9879\u63a5\u53e3，\u627f\u8f7d 6.1.1 \u65b0\u589e\u7684\u56db\u5927\u5b57\u6bb5；AICaptionController \u662f\u63a7\u5236\u5668\u7c7b，\u901a\u8fc7\u5176\u5b9e\u4f8b\u65b9\u6cd5 writeAudio() \u5411\u5f15\u64ce\u63a8\u9001\u97f3\u9891；AICaptionFontSize \u662f\u5b57\u53f7\u679a\u4e3e，\u63d0\u4f9b\u56db\u6863\u5b57\u5e55\u5927\u5c0f\u3002\u4ece @kit.BasicServicesKit \u5f15\u5165\u7684 BusinessError \u5219\u7528\u4e8e onError \u56de\u8c03\u4e2d\u7684\u9519\u8bef\u4fe1\u606f\u7ed3\u6784\u5316\u5904\u7406\u3002<\/p>\n

ColorPalette \u63a5\u53e3\u662f\u6574\u4e2a\u5e94\u7528\u89c6\u89c9\u98ce\u683c\u7684\u6838\u5fc3\u5951\u7ea6\u3002\u5b83\u96c6\u4e2d\u58f0\u660e\u4e86\u5341\u4e94\u4e2a\u989c\u8272\u5b57\u6bb5，\u8986\u76d6\u80cc\u666f\u5e95\u8272（bg）\u3001\u5361\u7247\u5e95\u8272（card）\u3001\u6807\u7b7e\u5e95\u8272（chip）\u3001\u4e09\u7ea7\u6587\u5b57\u8272（title\/sub\/text3）\u3001\u4e3b\u9898\u6e10\u53d8\u53cc\u8272（purple\/purpleD）\u3001\u8f85\u52a9\u5f3a\u8c03\u8272（pink\/cyan\/green\/gold）\u3001\u5206\u5272\u7ebf\u8272（line）\u3001\u5bfc\u822a\u9009\u4e2d\u8272（tabOn）\u4e0e\u5f39\u7a97\u906e\u7f69\u8272（mask）\u3002\u901a\u8fc7\u63a5\u53e3\u7ea6\u675f\u989c\u8272\u5b57\u6bb5，\u786e\u4fdd\u6240\u6709\u989c\u8272\u5f15\u7528\u6709\u7c7b\u578b\u4fdd\u969c，\u907f\u514d\u62fc\u5199\u9519\u8bef\u5bfc\u81f4\u7684\u8fd0\u884c\u65f6\u989c\u8272\u7f3a\u5931\u3002\u8fd9\u79cd"\u63a5\u53e3\u5148\u884c\u3001\u5e38\u91cf\u540e\u8865"\u7684\u8bbe\u8ba1\u6a21\u5f0f，\u4f7f\u5f97\u4e3b\u9898\u5207\u6362\u6210\u4e3a\u53ef\u80fd\u2014\u2014\u53ea\u9700\u63d0\u4f9b\u53e6\u4e00\u4e2a\u5b9e\u73b0 ColorPalette \u63a5\u53e3\u7684\u5bf9\u8c61\u5373\u53ef\u6574\u4f53\u66ff\u6362\u914d\u8272\u65b9\u6848\u3002<\/p>\n

3.2 \u6df1\u8272\u4e3b\u9898\u8272\u677f\u5e38\u91cf<\/h4>\n

\/** \u6df1\u8272\u4e3b\u9898\u8272\u677f\u5e38\u91cf（\u9ea6\u9738\u6b22\u5531 \u00b7 \u821e\u53f0\u9ed1 + \u9713\u8679\u7d2b + \u6b22\u5531\u7c89） *\/<\/span>
\nconst<\/span> COLORS<\/span>:<\/span> ColorPalette =<\/span> {<\/span>
\n bg:<\/span> '#120A1A'<\/span>,<\/span>
\n card:<\/span> '#1E1230'<\/span>,<\/span>
\n chip:<\/span> '#2A1A44'<\/span>,<\/span>
\n title:<\/span> '#F6EEFF'<\/span>,<\/span>
\n sub:<\/span> '#C0A8E8'<\/span>,<\/span>
\n text3:<\/span> '#8270A8'<\/span>,<\/span>
\n purple:<\/span> '#A855F7'<\/span>,<\/span>
\n purpleD:<\/span> '#7C3AED'<\/span>,<\/span>
\n pink:<\/span> '#F472B6'<\/span>,<\/span>
\n cyan:<\/span> '#4FE3D0'<\/span>,<\/span>
\n green:<\/span> '#6ED491'<\/span>,<\/span>
\n gold:<\/span> '#FFD36E'<\/span>,<\/span>
\n line:<\/span> '#38245C'<\/span>,<\/span>
\n tabOn:<\/span> '#A855F7'<\/span>,<\/span>
\n mask:<\/span> 'rgba(10,4,20,0.7)'<\/span>
\n}<\/span>;<\/span><\/p>\n

COLORS \u5e38\u91cf\u662f\u5e94\u7528\u552f\u4e00\u7684\u989c\u8272\u4e8b\u5b9e\u6765\u6e90\u3002\u821e\u53f0\u9ed1 #120A1A \u4f5c\u4e3a\u5168\u5c40\u5e95\u8272，\u5e26\u6709\u5fae\u5999\u7684\u7d2b\u8272\u8c03，\u6bd4\u7eaf\u9ed1\u66f4\u6709\u5c42\u6b21\u611f\u4e0e\u6e29\u5ea6\u611f；\u5361\u7247\u5e95\u8272 #1E1230 \u6bd4\u5e95\u8272\u7565\u4eae，\u901a\u8fc7\u660e\u5ea6\u5dee\u5f02\u6784\u5efa\u5c42\u6b21\u7eb5\u6df1；\u6807\u7b7e\u5e95\u8272 #2A1A44 \u518d\u4eae\u4e00\u6863，\u7528\u4e8e chips\u3001\u4ee3\u7801\u5757\u3001\u6309\u94ae\u7b49\u4ea4\u4e92\u5143\u7d20\u7684\u80cc\u666f\u3002\u4e09\u7ea7\u6587\u5b57\u8272\u5f62\u6210\u6e05\u6670\u7684\u660e\u5ea6\u9636\u68af：title（#F6EEFF）\u504f\u6696\u767d\u7528\u4e8e\u4e3b\u6807\u9898\u4e0e\u91cd\u8981\u6570\u503c，sub（#C0A8E8）\u6de1\u7d2b\u7528\u4e8e\u8f85\u52a9\u8bf4\u660e，text3（#8270A8）\u7070\u7d2b\u7528\u4e8e\u6700\u5f31\u7684\u5143\u4fe1\u606f\u6587\u5b57\u3002\u4e3b\u9898\u6e10\u53d8\u53cc\u8272 purple（#A855F7）\u4e0e purpleD（#7C3AED）\u6784\u6210 135 \u5ea6\u7ebf\u6027\u6e10\u53d8，\u4ece\u6df1\u7d2b\u5230\u4eae\u7d2b\u8425\u9020\u821e\u53f0\u805a\u5149\u706f\u822c\u7684\u89c6\u89c9\u6548\u679c\u3002\u6b22\u5531\u7c89 #F472B6 \u4f5c\u4e3a\u5f3a\u8c03\u8272\u70b9\u7f00\u5728 LIVE \u89d2\u6807\u3001\u89e3\u6563\u6309\u94ae\u7b49\u9ad8\u60c5\u7eea\u70b9\u4e0a；\u9713\u8679\u9752 #4FE3D0 \u7528\u4e8e\u9009\u4e2d\u6001\u63cf\u8fb9\u4e0e\u63d0\u793a\u6587\u5b57；\u8584\u8377\u7eff #6ED491 \u7528\u4e8e\u4e0b\u964d\u8d8b\u52bf\u4e0e\u73af\u6bd4\u6b63\u503c；\u91d1\u9ec4 #FFD36E \u7528\u4e8e\u6392\u884c\u699c\u51a0\u519b\u4e0e VIP \u6807\u8bc6\u3002<\/p>\n

3.3 Tab\u5bfc\u822a\u4e0e\u623f\u95f4\u7c7b\u578b\u5e38\u91cf<\/h4>\n

\/** Tab \u5143\u6570\u636e\u63a5\u53e3：\u5e95\u90e8\u5bfc\u822a\u56fe\u6807 + \u6807\u7b7e *\/<\/span>
\ninterface<\/span> TabMeta<\/span> {<\/span>
\n icon:<\/span> string<\/span>;<\/span>
\n label:<\/span> string<\/span>;<\/span>
\n}<\/span><\/p>\n

\/** \u5e95\u90e8\u5bfc\u822a Tab \u5e38\u91cf\u5217\u8868（4 Tab \u5355\u6392） *\/<\/span>
\nconst<\/span> TAB_LIST<\/span>:<\/span> TabMeta[<\/span>]<\/span> =<\/span> [<\/span>
\n {<\/span> icon:<\/span> '🎤'<\/span>,<\/span> label:<\/span> '\u623f\u95f4'<\/span> }<\/span>,<\/span>
\n {<\/span> icon:<\/span> '🎼'<\/span>,<\/span> label:<\/span> '\u70b9\u5531'<\/span> }<\/span>,<\/span>
\n {<\/span> icon:<\/span> '🗣'<\/span>,<\/span> label:<\/span> 'AI\u5b57\u5e55'<\/span> }<\/span>,<\/span>
\n {<\/span> icon:<\/span> '👤'<\/span>,<\/span> label:<\/span> '\u6211\u7684'<\/span> }<\/span>
\n]<\/span>;<\/span><\/p>\n

\/** \u5934\u90e8\u6a2a\u6ed1\u623f\u95f4\u7c7b\u578b chips \u6587\u6848 *\/<\/span>
\nconst<\/span> CATE_TAGS<\/span>:<\/span> string<\/span>[<\/span>]<\/span> =<\/span> [<\/span>'\u63a8\u8350'<\/span>,<\/span> '\u60c5\u6b4c\u623f'<\/span>,<\/span> '\u7ca4\u8bed\u623f'<\/span>,<\/span> '\u8bf4\u5531\u623f'<\/span>,<\/span> '\u6447\u6eda\u623f'<\/span>,<\/span> '\u6c11\u8c23\u623f'<\/span>,<\/span> '\u620f\u8154\u623f'<\/span>,<\/span> '\u5408\u5531\u623f'<\/span>]<\/span>;<\/span><\/p>\n

TabMeta \u63a5\u53e3\u5c06\u5bfc\u822a\u56fe\u6807\u4e0e\u6807\u7b7e\u6587\u672c\u7ed1\u5b9a\u4e3a\u7ed3\u6784\u5316\u6570\u636e，TAB_LIST \u4ee5\u6570\u7ec4\u5f62\u5f0f\u5b58\u50a8\u56db\u4e2a Tab \u7684\u5143\u4fe1\u606f\u3002\u4f7f\u7528 emoji \u4f5c\u4e3a\u56fe\u6807\u65e2\u907f\u514d\u4e86\u56fe\u7247\u8d44\u6e90\u7684\u52a0\u8f7d\u5f00\u9500，\u53c8\u81ea\u5e26\u8de8\u5e73\u53f0\u4e00\u81f4\u6027\u663e\u793a\u3002\u56db\u4e2a Tab \u8986\u76d6\u4e86 K \u6b4c\u793e\u4ea4\u7684\u6838\u5fc3\u529f\u80fd\u57df：\u623f\u95f4（\u53d1\u73b0\u4e0e\u521b\u5efa\u6b4c\u623f）\u3001\u70b9\u5531（\u70ed\u6b4c\u699c\u5355\u4e0e\u6570\u636e\u7edf\u8ba1）\u3001AI\u5b57\u5e55（\u8bed\u97f3\u670d\u52a1\u80fd\u529b\u5c55\u793a）\u3001\u6211\u7684（\u4e2a\u4eba\u4e2d\u5fc3\u4e0e\u8bbe\u7f6e）\u3002CATE_TAGS \u5b9a\u4e49\u4e86\u516b\u4e2a\u623f\u95f4\u5206\u7c7b\u6807\u7b7e，\u6a2a\u6ed1\u5c55\u793a\u5728\u5934\u90e8，\u6db5\u76d6\u4e86\u60c5\u6b4c\u3001\u7ca4\u8bed\u3001\u8bf4\u5531\u3001\u6447\u6eda\u3001\u6c11\u8c23\u3001\u620f\u8154\u3001\u5408\u5531\u7b49\u4e3b\u6d41 K \u6b4c\u66f2\u98ce\u5206\u7c7b，\u7528\u6237\u70b9\u51fb\u53ef\u5207\u6362\u5206\u7c7b\u7b5b\u9009\u6b4c\u623f\u5217\u8868\u3002<\/p>\n

3.4 \u5b57\u5e55\u8bed\u8a00\u4e0e\u6837\u5f0f\u5e38\u91cf（Speech Kit 6.1.1 \u6838\u5fc3\u914d\u7f6e）<\/h4>\n

\/\/ ============ \u5b57\u5e55\u8bed\u8a00\/\u6837\u5f0f\u5e38\u91cf（Speech Kit 6.1.1） ============<\/span><\/p>\n

\/** \u6e90\u8bed\u8a00\u9009\u9879\u63a5\u53e3（\u53d6\u503c\u8303\u56f4：['zh','en']） *\/<\/span>
\ninterface<\/span> LangOption<\/span> {<\/span>
\n code:<\/span> string<\/span>;<\/span> \/\/ \u8bed\u8a00\u7801<\/span>
\n name:<\/span> string<\/span>;<\/span> \/\/ \u5c55\u793a\u540d<\/span>
\n}<\/span><\/p>\n

\/** \u6e90\u8bed\u8a00\u9009\u9879\u5217\u8868（sourceLanguage \u4ec5\u652f\u6301\u4e2d\u6587 \/ \u82f1\u6587\u4e24\u79cd） *\/<\/span>
\nconst<\/span> SRC_LANGS<\/span>:<\/span> LangOption[<\/span>]<\/span> =<\/span> [<\/span>
\n {<\/span> code:<\/span> 'zh'<\/span>,<\/span> name:<\/span> '\u4e2d\u6587'<\/span> }<\/span>,<\/span>
\n {<\/span> code:<\/span> 'en'<\/span>,<\/span> name:<\/span> '\u82f1\u6587'<\/span> }<\/span>
\n]<\/span>;<\/span><\/p>\n

\/** \u82f1\u6587\u6e90\u65f6\u7684\u76ee\u6807\u8bed\u8a00\u9009\u9879（\u4e2d\u6587\u6e90\u65f6\u76ee\u6807\u8bed\u8a00\u9501\u5b9a 'zh'） *\/<\/span>
\nconst<\/span> TGT_LANGS_EN<\/span>:<\/span> LangOption[<\/span>]<\/span> =<\/span> [<\/span>
\n {<\/span> code:<\/span> 'zh'<\/span>,<\/span> name:<\/span> '\u4e2d\u6587'<\/span> }<\/span>,<\/span>
\n {<\/span> code:<\/span> 'en'<\/span>,<\/span> name:<\/span> '\u82f1\u6587'<\/span> }<\/span>,<\/span>
\n {<\/span> code:<\/span> 'zh-en'<\/span>,<\/span> name:<\/span> '\u4e2d\u82f1\u53cc\u8bed'<\/span> }<\/span>
\n]<\/span>;<\/span><\/p>\n

\/** \u5b57\u53f7\u9009\u9879\u63a5\u53e3（AICaptionFontSize \u679a\u4e3e\u56db\u6863） *\/<\/span>
\ninterface<\/span> SizeOption<\/span> {<\/span>
\n size:<\/span> AICaptionFontSize;<\/span> \/\/ \u5b57\u53f7\u679a\u4e3e\u503c<\/span>
\n name:<\/span> string<\/span>;<\/span> \/\/ \u5c55\u793a\u540d<\/span>
\n}<\/span><\/p>\n

\/** \u5b57\u5e55\u5b57\u53f7\u56db\u6863\u9009\u9879 *\/<\/span>
\nconst<\/span> SIZE_OPTIONS<\/span>:<\/span> SizeOption[<\/span>]<\/span> =<\/span> [<\/span>
\n {<\/span> size:<\/span> AICaptionFontSize.<\/span>SMALL<\/span>,<\/span> name:<\/span> '\u5c0f\u53f7'<\/span> }<\/span>,<\/span>
\n {<\/span> size:<\/span> AICaptionFontSize.<\/span>NORMAL<\/span>,<\/span> name:<\/span> '\u6807\u51c6'<\/span> }<\/span>,<\/span>
\n {<\/span> size:<\/span> AICaptionFontSize.<\/span>BIG<\/span>,<\/span> name:<\/span> '\u5927\u53f7'<\/span> }<\/span>,<\/span>
\n {<\/span> size:<\/span> AICaptionFontSize.<\/span>LARGE<\/span>,<\/span> name:<\/span> '\u8d85\u5927'<\/span> }<\/span>
\n]<\/span>;<\/span><\/p>\n

\/** \u5b57\u5e55\u5b57\u4f53\u989c\u8272\u9884\u8bbe（fontColor \u4e3a ResourceColor） *\/<\/span>
\nconst<\/span> CAPTION_FONT_COLORS<\/span>:<\/span> string<\/span>[<\/span>]<\/span> =<\/span> [<\/span>'#FFFFFF'<\/span>,<\/span> '#FFE9B0'<\/span>,<\/span> '#9CE8B5'<\/span>,<\/span> '#9CD0FF'<\/span>,<\/span> '#FFB3C1'<\/span>]<\/span>;<\/span><\/p>\n

\u8fd9\u6bb5\u5e38\u91cf\u5b9a\u4e49\u662f\u6574\u4e2a\u5e94\u7528\u4e0e Speech Kit 6.1.1 \u65b0\u7279\u6027\u5bf9\u63a5\u7684\u6838\u5fc3\u533a\u57df，\u503c\u5f97\u9010\u9879\u6df1\u5165\u5206\u6790\u3002LangOption \u63a5\u53e3\u5c06\u8bed\u8a00\u7801\u4e0e\u5c55\u793a\u540d\u914d\u5bf9，\u4f7f UI \u6e32\u67d3\u4e0e API \u8c03\u7528\u4f7f\u7528\u540c\u4e00\u6570\u636e\u6e90，\u907f\u514d\u4e86\u5c55\u793a\u540d\u4e0e\u7801\u503c\u4e0d\u4e00\u81f4\u7684\u98ce\u9669\u3002SRC_LANGS \u6570\u7ec4\u660e\u786e\u5b9a\u4e49\u4e86 sourceLanguage \u5b57\u6bb5\u4ec5\u652f\u6301\u4e2d\u6587\u4e0e\u82f1\u6587\u4e24\u79cd\u53d6\u503c\u2014\u2014\u8fd9\u662f 6.1.1 \u7248\u672c\u7684\u80fd\u529b\u8fb9\u754c，\u7ca4\u8bed\u97f3\u9891\u56e0\u65e0\u72ec\u7acb\u8bed\u8a00\u7801\u800c\u5f52\u5165 'zh' \u5904\u7406\u3002TGT_LANGS_EN \u5b9a\u4e49\u4e86\u82f1\u6587\u6e90\u65f6\u7684\u4e09\u4e2a\u76ee\u6807\u8bed\u8a00\u9009\u9879：'zh'（\u7ffb\u8bd1\u4e3a\u4e2d\u6587）\u3001'en'（\u4fdd\u6301\u82f1\u6587）\u3001'zh-en'（\u4e2d\u82f1\u53cc\u8bed\u5bf9\u7167\u663e\u793a），\u5176\u4e2d\u53cc\u8bed\u6a21\u5f0f\u662f K \u6b4c\u8ddf\u5531\u573a\u666f\u7684\u9ad8\u9891\u9009\u62e9，\u7528\u6237\u53ef\u4ee5\u540c\u65f6\u770b\u5230\u82f1\u6587\u539f\u6587\u4e0e\u4e2d\u6587\u8bd1\u6587\u3002<\/p>\n

SizeOption \u63a5\u53e3\u5c06 AICaptionFontSize \u679a\u4e3e\u503c\u4e0e\u4e2d\u6587\u5c55\u793a\u540d\u7ed1\u5b9a\u3002SIZE_OPTIONS \u5b8c\u6574\u5217\u51fa\u4e86\u56db\u6863\u5b57\u53f7：SMALL \u9002\u5408\u4fe1\u606f\u5bc6\u96c6\u573a\u666f，NORMAL \u662f\u9ed8\u8ba4\u6807\u51c6\u5927\u5c0f，BIG \u9002\u5408\u4e2d\u7b49\u8ddd\u79bb\u89c2\u770b，LARGE \u5219\u9762\u5411\u8fdc\u8ddd\u79bb\u6216\u89c6\u529b\u8f85\u52a9\u9700\u6c42\u3002\u5728 K \u6b4c\u573a\u666f\u4e2d，\u7528\u6237\u624b\u6301\u8bbe\u5907\u8ddd\u79bb\u901a\u5e38\u5728 30-50 \u5398\u7c73，BIG \u4e0e LARGE \u6863\u4f4d\u662f\u9ad8\u9891\u9009\u62e9，\u5c24\u5176\u8bf4\u5531\u7c7b\u6b4c\u66f2\u8bed\u901f\u5feb，\u5927\u5b57\u53f7\u80fd\u786e\u4fdd\u7528\u6237\u5728\u8ddf\u5531\u65f6\u5feb\u901f\u6355\u6349\u6bcf\u53e5\u6b4c\u8bcd\u3002CAPTION_FONT_COLORS \u63d0\u4f9b\u4e86\u4e94\u79cd\u9884\u8bbe\u989c\u8272：\u7ecf\u5178\u767d（#FFFFFF）\u662f\u6700\u9ad8\u5bf9\u6bd4\u5ea6\u9009\u62e9，\u9ea6\u5149\u9ec4（#FFE9B0）\u5e26\u6709\u6696\u8272\u8c03\u9002\u5408\u821e\u53f0\u6c1b\u56f4，\u8584\u8377\u7eff（#9CE8B5）\u4e0e\u4e91\u6735\u84dd（#9CD0FF）\u63d0\u4f9b\u67d4\u548c\u7684\u5f69\u8272\u9009\u9879，\u6a31\u82b1\u7c89（#FFB3C1）\u5219\u4e0e\u5e94\u7528\u7684\u6b22\u5531\u7c89\u4e3b\u9898\u547c\u5e94\u3002\u8fd9\u4e9b\u989c\u8272\u4f5c\u4e3a fontColor \u5b57\u6bb5\u7684\u5019\u9009\u503c\u4f20\u5165 AICaptionOptions，\u5b9e\u73b0\u5b57\u5e55\u6587\u5b57\u7684\u4e2a\u6027\u5316\u5b9a\u5236\u3002<\/p>\n

3.5 \u6708\u5ea6\u67f1\u72b6\u56fe\u5e38\u91cf<\/h4>\n

\/** \u6708\u5ea6\u6b22\u5531\u65f6\u957f\u67f1\u72b6\u56fe\u6708\u4efd\u7d22\u5f15 *\/<\/span>
\nconst<\/span> MONTH_IDX<\/span>:<\/span> number<\/span>[<\/span>]<\/span> =<\/span> [<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 2<\/span>,<\/span> 3<\/span>,<\/span> 4<\/span>,<\/span> 5<\/span>]<\/span>;<\/span>
\n\/** \u6708\u5ea6\u67f1\u72b6\u56fe\u6708\u4efd\u540d\u79f0 *\/<\/span>
\nconst<\/span> MONTH_LABELS<\/span>:<\/span> string<\/span>[<\/span>]<\/span> =<\/span> [<\/span>'3\u6708'<\/span>,<\/span> '4\u6708'<\/span>,<\/span> '5\u6708'<\/span>,<\/span> '6\u6708'<\/span>,<\/span> '7\u6708'<\/span>,<\/span> '8\u6708'<\/span>]<\/span>;<\/span>
\n\/** \u6708\u5ea6\u6b22\u5531\u65f6\u957f\u6570\u503c（\u5c0f\u65f6） *\/<\/span>
\nconst<\/span> MONTH_HOURS<\/span>:<\/span> number<\/span>[<\/span>]<\/span> =<\/span> [<\/span>62<\/span>,<\/span> 74<\/span>,<\/span> 58<\/span>,<\/span> 96<\/span>,<\/span> 108<\/span>,<\/span> 122<\/span>]<\/span>;<\/span>
\n\/** \u6708\u5ea6\u67f1\u72b6\u56fe\u6700\u5927\u503c（\u5c0f\u65f6） *\/<\/span>
\nconst<\/span> MONTH_MAX<\/span>:<\/span> number<\/span> =<\/span> 140<\/span>;<\/span><\/p>\n

\u8fd9\u7ec4\u5e38\u91cf\u4e3a\u70b9\u5531 Tab \u5e95\u90e8\u7684\u6708\u5ea6\u6b22\u5531\u65f6\u957f\u67f1\u72b6\u56fe\u63d0\u4f9b\u6570\u636e\u652f\u6491\u3002MONTH_IDX \u662f\u6708\u4efd\u7d22\u5f15\u6570\u7ec4\u7528\u4e8e ForEach \u904d\u5386，MONTH_LABELS \u4e0e MONTH_HOURS \u5e73\u884c\u6570\u7ec4\u5206\u522b\u5b58\u50a8\u6708\u4efd\u540d\u79f0\u4e0e\u6b22\u5531\u5c0f\u65f6\u6570，MONTH_MAX \u4f5c\u4e3a\u67f1\u9ad8\u5f52\u4e00\u5316\u7684\u5206\u6bcd（140 \u5c0f\u65f6），\u786e\u4fdd\u6700\u9ad8\u67f1（8 \u6708 122 \u5c0f\u65f6）\u7ea6\u5360\u67f1\u5f62\u5bb9\u5668 87% \u7684\u9ad8\u5ea6，\u7559\u51fa\u9876\u90e8\u7a7a\u95f4\u653e\u7f6e\u6570\u503c\u6807\u7b7e\u3002\u6570\u636e\u5448\u73b0\u9010\u6708\u9012\u589e\u8d8b\u52bf（\u4ece 3 \u6708 62 \u5c0f\u65f6\u5230 8 \u6708 122 \u5c0f\u65f6），\u547c\u5e94"\u73af\u6bd4 +13.0%"\u7684\u6c47\u603b\u6587\u6848，\u5c55\u793a\u7528\u6237\u6b22\u5531\u6d3b\u8dc3\u5ea6\u7684\u589e\u957f\u66f2\u7ebf\u3002<\/p>\n

\u56db\u3001\u8f85\u52a9\u51fd\u6570\u4e0e\u6570\u636e\u6a21\u578b<\/h3>\n

4.1 \u8f85\u52a9\u51fd\u6570\u7fa4<\/h4>\n

\/\/ ============ \u2463 \u8f85\u52a9\u51fd\u6570 ============<\/span><\/p>\n

\/** \u699c\u5355\u8d8b\u52bf\u989c\u8272\u6620\u5c04：\u4e0a\u5347\u6b22\u5531\u7c89 \/ \u4e0b\u964d\u8584\u8377\u7eff \/ \u6301\u5e73\u5f31\u5316 *\/<\/span>
\nfunction<\/span> trendColor<\/span>(<\/span>t:<\/span> string<\/span>)<\/span>:<\/span> string<\/span> {<\/span>
\n if<\/span> (<\/span>t ===<\/span> 'up'<\/span>)<\/span> {<\/span> return<\/span> COLORS<\/span>.<\/span>pink;<\/span> }<\/span>
\n if<\/span> (<\/span>t ===<\/span> 'down'<\/span>)<\/span> {<\/span> return<\/span> COLORS<\/span>.<\/span>green;<\/span> }<\/span>
\n return<\/span> COLORS<\/span>.<\/span>text3;<\/span>
\n}<\/span><\/p>\n

\/** \u699c\u5355\u8d8b\u52bf\u56fe\u6807\u6587\u6848：\u4e0a\u5347 \/ \u4e0b\u964d \/ \u6301\u5e73 *\/<\/span>
\nfunction<\/span> trendIcon<\/span>(<\/span>t:<\/span> string<\/span>)<\/span>:<\/span> string<\/span> {<\/span>
\n if<\/span> (<\/span>t ===<\/span> 'up'<\/span>)<\/span> {<\/span> return<\/span> '\u2191 \u4e0a\u5347'<\/span>;<\/span> }<\/span>
\n if<\/span> (<\/span>t ===<\/span> 'down'<\/span>)<\/span> {<\/span> return<\/span> '\u2193 \u4e0b\u964d'<\/span>;<\/span> }<\/span>
\n return<\/span> '\u2014 \u6301\u5e73'<\/span>;<\/span>
\n}<\/span><\/p>\n

\/** \u5b57\u53f7\u679a\u4e3e\u8f6c\u5c55\u793a\u540d（options \u4ee3\u7801\u9884\u89c8\u7528） *\/<\/span>
\nfunction<\/span> sizeName<\/span>(<\/span>size:<\/span> AICaptionFontSize)<\/span>:<\/span> string<\/span> {<\/span>
\n if<\/span> (<\/span>size ===<\/span> AICaptionFontSize.<\/span>SMALL<\/span>)<\/span> {<\/span> return<\/span> 'SMALL'<\/span>;<\/span> }<\/span>
\n if<\/span> (<\/span>size ===<\/span> AICaptionFontSize.<\/span>BIG<\/span>)<\/span> {<\/span> return<\/span> 'BIG'<\/span>;<\/span> }<\/span>
\n if<\/span> (<\/span>size ===<\/span> AICaptionFontSize.<\/span>LARGE<\/span>)<\/span> {<\/span> return<\/span> 'LARGE'<\/span>;<\/span> }<\/span>
\n return<\/span> 'NORMAL'<\/span>;<\/span>
\n}<\/span><\/p>\n

\/** \u8bed\u8a00\u7801\u8f6c\u5c55\u793a\u540d（\u5982 'zh-en' \u2192 '\u4e2d\u82f1\u53cc\u8bed'） *\/<\/span>
\nfunction<\/span> langName<\/span>(<\/span>code:<\/span> string<\/span>)<\/span>:<\/span> string<\/span> {<\/span>
\n if<\/span> (<\/span>code ===<\/span> 'zh'<\/span>)<\/span> {<\/span> return<\/span> '\u4e2d\u6587'<\/span>;<\/span> }<\/span>
\n if<\/span> (<\/span>code ===<\/span> 'en'<\/span>)<\/span> {<\/span> return<\/span> '\u82f1\u6587'<\/span>;<\/span> }<\/span>
\n return<\/span> '\u4e2d\u82f1\u53cc\u8bed'<\/span>;<\/span>
\n}<\/span><\/p>\n

\/** \u5b57\u5e55\u989c\u8272\u9884\u8bbe\u8f6c\u4e2d\u6587\u540d（\u6309 CAPTION_FONT_COLORS \u4e0b\u6807\u987a\u5e8f） *\/<\/span>
\nfunction<\/span> colorName<\/span>(<\/span>c:<\/span> string<\/span>)<\/span>:<\/span> string<\/span> {<\/span>
\n if<\/span> (<\/span>c ===<\/span> CAPTION_FONT_COLORS<\/span>[<\/span>0<\/span>]<\/span>)<\/span> {<\/span> return<\/span> '\u7ecf\u5178\u767d'<\/span>;<\/span> }<\/span>
\n if<\/span> (<\/span>c ===<\/span> CAPTION_FONT_COLORS<\/span>[<\/span>1<\/span>]<\/span>)<\/span> {<\/span> return<\/span> '\u9ea6\u5149\u9ec4'<\/span>;<\/span> }<\/span>
\n if<\/span> (<\/span>c ===<\/span> CAPTION_FONT_COLORS<\/span>[<\/span>2<\/span>]<\/span>)<\/span> {<\/span> return<\/span> '\u8584\u8377\u7eff'<\/span>;<\/span> }<\/span>
\n if<\/span> (<\/span>c ===<\/span> CAPTION_FONT_COLORS<\/span>[<\/span>3<\/span>]<\/span>)<\/span> {<\/span> return<\/span> '\u4e91\u6735\u84dd'<\/span>;<\/span> }<\/span>
\n return<\/span> '\u6a31\u82b1\u7c89'<\/span>;<\/span>
\n}<\/span><\/p>\n

\u8f85\u52a9\u51fd\u6570\u7fa4\u627f\u62c5\u4e86\u6570\u636e\u5230\u5c55\u793a\u7684\u6620\u5c04\u804c\u8d23，\u662f UI \u6e32\u67d3\u4e0e\u4e1a\u52a1\u6570\u636e\u4e4b\u95f4\u7684\u9002\u914d\u5c42\u3002trendColor \u4e0e trendIcon \u4e24\u4e2a\u51fd\u6570\u670d\u52a1\u4e8e\u70b9\u5531\u699c\u7684\u8d8b\u52bf\u5c55\u793a：\u4e0a\u5347\u8d8b\u52bf\u7528\u6b22\u5531\u7c89（COLORS.pink）\u4f20\u9012\u6b63\u5411\u60c5\u7eea，\u4e0b\u964d\u8d8b\u52bf\u7528\u8584\u8377\u7eff（COLORS.green）\u505a\u67d4\u548c\u63d0\u793a\u2014\u2014\u503c\u5f97\u6ce8\u610f\u7684\u662f，\u8fd9\u91cc\u6ca1\u6709\u4f7f\u7528\u7ea2\u8272\u8868\u793a\u4e0b\u964d，\u800c\u662f\u7528\u7eff\u8272，\u56e0\u4e3a\u6b22\u5531\u6570\u636e\u7684\u4e0b\u964d\u4e0d\u6784\u6210\u8d1f\u9762\u8b66\u544a，\u7eff\u8272\u5728\u6df1\u8272\u4e3b\u9898\u4e2d\u89c6\u89c9\u8212\u9002\u5ea6\u66f4\u9ad8\u3002sizeName \u51fd\u6570\u5c06 AICaptionFontSize \u679a\u4e3e\u503c\u8f6c\u4e3a\u5927\u5199\u82f1\u6587\u540d，\u4e13\u95e8\u670d\u52a1\u4e8e AI \u5b57\u5e55 Tab \u4e2d\u7684\u4ee3\u7801\u9884\u89c8\u533a\u5757，\u4f7f\u4ee3\u7801\u5757\u4e2d\u663e\u793a\u7684\u5b57\u6bb5\u503c\u4e0e\u5b9e\u9645\u679a\u4e3e\u540d\u4e00\u81f4\u3002langName \u51fd\u6570\u5904\u7406\u4e09\u79cd\u8bed\u8a00\u7801\u5230\u4e2d\u6587\u540d\u7684\u8f6c\u6362，colorName \u51fd\u6570\u5c06\u4e94\u79cd\u989c\u8272\u5341\u516d\u8fdb\u5236\u503c\u6620\u5c04\u4e3a\u8bd7\u610f\u5316\u7684\u4e2d\u6587\u540d（\u9ea6\u5149\u9ec4\u3001\u8584\u8377\u7eff\u3001\u4e91\u6735\u84dd\u3001\u6a31\u82b1\u7c89），\u589e\u5f3a\u5e94\u7528\u7684\u60c5\u611f\u5316\u8868\u8fbe\u3002<\/p>\n

4.2 \u6b4c\u623f\u4e0e\u9ea6\u9738\u6570\u636e\u6a21\u578b<\/h4>\n

\/\/ ============ \u2464 \u6570\u636e\u6a21\u578b ============<\/span><\/p>\n

\/** \u6b4c\u623f\u6761\u76ee（\u623f\u95f4 Tab \u5206\u7c7b\u5bab\u683c\u5165\u53e3） *\/<\/span>
\n@<\/span>Observed<\/span><\/span> export<\/span> class<\/span> RoomItem<\/span> {<\/span>
\n icon:<\/span> string<\/span>;<\/span> \/\/ \u623f\u95f4\u56fe\u6807 emoji<\/span>
\n name:<\/span> string<\/span>;<\/span> \/\/ \u623f\u95f4\u540d（\u5982"\u6df1\u591c\u60c5\u6b4c\u623f"）<\/span>
\n online:<\/span> string<\/span>;<\/span> \/\/ \u5728\u7ebf\u4eba\u6570\u6587\u672c（\u5982"1.2\u4e07\u5728\u7ebf"）<\/span>
\n tag:<\/span> string<\/span>;<\/span> \/\/ \u623f\u95f4\u6807\u7b7e（\u5982"\u638c\u9ea6"）<\/span><\/p>\n

constructor<\/span>(<\/span>icon:<\/span> string<\/span>,<\/span> name:<\/span> string<\/span>,<\/span> online:<\/span> string<\/span>,<\/span> tag:<\/span> string<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>icon =<\/span> icon;<\/span>
\n this<\/span>.<\/span>name =<\/span> name;<\/span>
\n this<\/span>.<\/span>online =<\/span> online;<\/span>
\n this<\/span>.<\/span>tag =<\/span> tag;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\/** \u6b4c\u623f\u5e7f\u573a Mock \u6570\u636e（8 \u6761） *\/<\/span>
\nconst<\/span> ROOM_LIST<\/span>:<\/span> Array<\/span><<\/span>RoomItem><\/span> =<\/span> [<\/span>
\n new<\/span> RoomItem<\/span>(<\/span>'🌙'<\/span>,<\/span> '\u6df1\u591c\u60c5\u6b4c\u623f'<\/span>,<\/span> '1.2\u4e07\u5728\u7ebf'<\/span>,<\/span> '\u638c\u9ea6'<\/span>)<\/span>,<\/span>
\n new<\/span> RoomItem<\/span>(<\/span>'🎸'<\/span>,<\/span> '\u6447\u6eda\u55e8\u5531\u623f'<\/span>,<\/span> '8963\u5728\u7ebf'<\/span>,<\/span> '\u8fde\u9ea6'<\/span>)<\/span>,<\/span>
\n new<\/span> RoomItem<\/span>(<\/span>'🎤'<\/span>,<\/span> '\u9ea6\u738b\u4e89\u9738\u623f'<\/span>,<\/span> '7531\u5728\u7ebf'<\/span>,<\/span> '\u6392\u9ea6'<\/span>)<\/span>,<\/span>
\n new<\/span> RoomItem<\/span>(<\/span>'🎼'<\/span>,<\/span> '\u7ca4\u8bed\u91d1\u66f2\u623f'<\/span>,<\/span> '6420\u5728\u7ebf'<\/span>,<\/span> '\u638c\u9ea6'<\/span>)<\/span>,<\/span>
\n new<\/span> RoomItem<\/span>(<\/span>'🎧'<\/span>,<\/span> '\u8bf4\u5531\u5feb\u5634\u623f'<\/span>,<\/span> '5184\u5728\u7ebf'<\/span>,<\/span> '\u8fde\u9ea6'<\/span>)<\/span>,<\/span>
\n new<\/span> RoomItem<\/span>(<\/span>'🏮'<\/span>,<\/span> '\u620f\u8154\u56fd\u98ce\u623f'<\/span>,<\/span> '4309\u5728\u7ebf'<\/span>,<\/span> '\u6392\u9ea6'<\/span>)<\/span>,<\/span>
\n new<\/span> RoomItem<\/span>(<\/span>'🍃'<\/span>,<\/span> '\u6c11\u8c23\u5c0f\u9986\u623f'<\/span>,<\/span> '3625\u5728\u7ebf'<\/span>,<\/span> '\u638c\u9ea6'<\/span>)<\/span>,<\/span>
\n new<\/span> RoomItem<\/span>(<\/span>'🎉'<\/span>,<\/span> '\u751f\u65e5\u6d3e\u5bf9\u623f'<\/span>,<\/span> '2876\u5728\u7ebf'<\/span>,<\/span> '\u8fde\u9ea6'<\/span>)<\/span>
\n]<\/span>;<\/span><\/p>\n

RoomItem \u7c7b\u4f7f\u7528 @Observed \u88c5\u9970\u5668\u6807\u6ce8，\u8fd9\u662f ArkUI \u7684\u53ef\u89c2\u5bdf\u5bf9\u8c61\u673a\u5236\u2014\u2014\u5f53\u8be5\u7c7b\u7684\u5b9e\u4f8b\u5c5e\u6027\u53d1\u751f\u53d8\u5316\u65f6，\u5f15\u7528\u4e86\u8be5\u5b9e\u4f8b\u7684 @ObjectLink \u6216 @State \u7ec4\u4ef6\u4f1a\u81ea\u52a8\u89e6\u53d1\u91cd\u65b0\u6e32\u67d3\u3002\u7c7b\u7684\u56db\u4e2a\u5c5e\u6027\u5206\u522b\u627f\u8f7d\u623f\u95f4\u7684\u89c6\u89c9\u56fe\u6807\u3001\u540d\u79f0\u3001\u5728\u7ebf\u4eba\u6570\u4e0e\u4e92\u52a8\u6a21\u5f0f\u6807\u7b7e\u3002\u6807\u7b7e\u5b57\u6bb5（tag）\u7684\u53d6\u503c\u4e3a"\u638c\u9ea6"\u3001\u201c\u6392\u9ea6\u201d\u3001"\u8fde\u9ea6"\u4e09\u79cd K \u6b4c\u4e92\u52a8\u6a21\u5f0f：\u638c\u9ea6\u6307\u5355\u4eba\u72ec\u5531\u6a21\u5f0f，\u6392\u9ea6\u6307\u6392\u961f\u8f6e\u6d41\u4e0a\u9ea6\u6a21\u5f0f，\u8fde\u9ea6\u6307\u53cc\u4eba\u6216\u591a\u4eba\u5b9e\u65f6\u5408\u5531\u6a21\u5f0f\u3002ROOM_LIST \u63d0\u4f9b\u4e86\u516b\u6761 Mock \u6570\u636e，\u8986\u76d6\u6df1\u591c\u60c5\u6b4c\u3001\u6447\u6eda\u55e8\u5531\u3001\u9ea6\u738b\u4e89\u9738\u3001\u7ca4\u8bed\u91d1\u66f2\u3001\u8bf4\u5531\u5feb\u5634\u3001\u620f\u8154\u56fd\u98ce\u3001\u6c11\u8c23\u5c0f\u9986\u3001\u751f\u65e5\u6d3e\u5bf9\u7b49\u591a\u5143\u66f2\u98ce\u573a\u666f，\u5728\u7ebf\u4eba\u6570\u4ece 2876 \u5230 1.2 \u4e07\u9012\u51cf，\u5f62\u6210\u81ea\u7136\u7684\u63a8\u8350\u6392\u5e8f\u3002<\/p>\n

4.3 \u9ea6\u9738\u6570\u636e\u6a21\u578b<\/h4>\n

\/** \u9ea6\u9738\u6761\u76ee（\u623f\u95f4 Tab \u70ed\u95e8\u9ea6\u9738\u6a2a\u6ed1\u5927\u5361） *\/<\/span>
\n@<\/span>Observed<\/span><\/span> export<\/span> class<\/span> SingerItem<\/span> {<\/span>
\n name:<\/span> string<\/span>;<\/span> \/\/ \u9ea6\u53cb\u6635\u79f0<\/span>
\n avatar:<\/span> string<\/span>;<\/span> \/\/ emoji \u5934\u50cf<\/span>
\n level:<\/span> string<\/span>;<\/span> \/\/ \u7b49\u7ea7\u6587\u672c（\u5982"\u9ea6\u738b Lv.8"）<\/span>
\n fans:<\/span> string<\/span>;<\/span> \/\/ \u7c89\u4e1d\u6587\u672c<\/span>
\n hit:<\/span> string<\/span>;<\/span> \/\/ \u6210\u540d\u66f2\u6587\u672c<\/span><\/p>\n

constructor<\/span>(<\/span>name:<\/span> string<\/span>,<\/span> avatar:<\/span> string<\/span>,<\/span> level:<\/span> string<\/span>,<\/span> fans:<\/span> string<\/span>,<\/span> hit:<\/span> string<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>name =<\/span> name;<\/span>
\n this<\/span>.<\/span>avatar =<\/span> avatar;<\/span>
\n this<\/span>.<\/span>level =<\/span> level;<\/span>
\n this<\/span>.<\/span>fans =<\/span> fans;<\/span>
\n this<\/span>.<\/span>hit =<\/span> hit;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\/** \u70ed\u95e8\u9ea6\u9738 Mock \u6570\u636e（6 \u6761） *\/<\/span>
\nconst<\/span> SINGER_LIST<\/span>:<\/span> Array<\/span><<\/span>SingerItem><\/span> =<\/span> [<\/span>
\n new<\/span> SingerItem<\/span>(<\/span>'\u6a80\u591c\u7b19'<\/span>,<\/span> '🦊'<\/span>,<\/span> '\u9ea6\u738b Lv.8'<\/span>,<\/span> '128\u4e07'<\/span>,<\/span> '\u300a\u591c\u8272\u4e03\u70b9\u534a\u300b'<\/span>)<\/span>,<\/span>
\n new<\/span> SingerItem<\/span>(<\/span>'\u8001\u9646\u7684\u70df\u55d3'<\/span>,<\/span> '🐺'<\/span>,<\/span> '\u6b4c\u795e Lv.9'<\/span>,<\/span> '156\u4e07'<\/span>,<\/span> '\u300a\u6c5f\u8fb9\u5341\u4e8c\u697c\u300b'<\/span>)<\/span>,<\/span>
\n new<\/span> SingerItem<\/span>(<\/span>'\u82cf\u6253\u83e0\u841d'<\/span>,<\/span> '🍍'<\/span>,<\/span> '\u9ea6\u9738 Lv.7'<\/span>,<\/span> '96\u4e07'<\/span>,<\/span> '\u300a\u6c7d\u6c34\u6c14\u6ce1\u97f3\u300b'<\/span>)<\/span>,<\/span>
\n new<\/span> SingerItem<\/span>(<\/span>'\u67e0\u6aac\u6c7d\u6c34Girl'<\/span>,<\/span> '🍋'<\/span>,<\/span> '\u9ea6\u9738 Lv.6'<\/span>,<\/span> '82\u4e07'<\/span>,<\/span> '\u300a\u590f\u65e5\u4e09\u5206\u751c\u300b'<\/span>)<\/span>,<\/span>
\n new<\/span> SingerItem<\/span>(<\/span>'\u9ad8\u97f3\u5c0f\u94a2\u70ae'<\/span>,<\/span> '🚀'<\/span>,<\/span> '\u9ea6\u738b Lv.8'<\/span>,<\/span> '110\u4e07'<\/span>,<\/span> '\u300a\u6d77\u8c5a\u97f3\u7ec3\u4e60\u751f\u300b'<\/span>)<\/span>,<\/span>
\n new<\/span> SingerItem<\/span>(<\/span>'\u534a\u7cd6\u829d\u58eb'<\/span>,<\/span> '🧸'<\/span>,<\/span> '\u9ea6\u9738 Lv.5'<\/span>,<\/span> '64\u4e07'<\/span>,<\/span> '\u300a\u5976\u8336\u6162\u534a\u62cd\u300b'<\/span>)<\/span>
\n]<\/span>;<\/span><\/p>\n

SingerItem \u540c\u6837\u6807\u6ce8 @Observed，\u5176\u5c5e\u6027\u6db5\u76d6\u9ea6\u53cb\u7684\u8eab\u4efd\u4fe1\u606f（\u6635\u79f0\u3001\u5934\u50cf）\u3001\u793e\u4ea4\u8d44\u4ea7（\u7b49\u7ea7\u3001\u7c89\u4e1d\u6570）\u4e0e\u4f5c\u54c1\u6807\u8bc6（\u6210\u540d\u66f2）\u3002\u7b49\u7ea7\u4f53\u7cfb\u5206\u4e3a\u4e09\u6863：\u9ea6\u9738（Lv.5-7）\u3001\u9ea6\u738b（Lv.8）\u3001\u6b4c\u795e（Lv.9），\u7c89\u4e1d\u6570\u4ece 64 \u4e07\u5230 156 \u4e07\u9012\u589e\u3002\u516d\u6761 Mock \u6570\u636e\u7684\u6635\u79f0\u8bbe\u8ba1\u6781\u5177\u793e\u4ea4\u5e73\u53f0\u7684\u4e2a\u6027\u5316\u7279\u5f81\u2014\u2014\u201c\u6a80\u591c\u7b19\u201d\u3001\u201c\u8001\u9646\u7684\u70df\u55d3\u201d\u3001"\u82cf\u6253\u83e0\u841d"\u7b49\u540d\u79f0\u5e26\u6709\u5f3a\u70c8\u7684\u60c5\u611f\u8272\u5f69\u4e0e\u4eba\u8bbe\u6697\u793a，\u7b26\u5408 K \u6b4c\u793e\u4ea4\u5e94\u7528\u7684\u7528\u6237\u753b\u50cf\u3002\u6210\u540d\u66f2\u540d\u79f0\u4e0e\u5e94\u7528\u5185\u70b9\u5531\u699c\u7684\u6b4c\u66f2\u540d\u79f0\u5f62\u6210\u4ea4\u53c9\u5f15\u7528，\u6784\u5efa\u4e86"\u9ea6\u9738\u2014\u6b4c\u66f2\u2014\u6b4c\u623f"\u7684\u5185\u5bb9\u5173\u8054\u7f51\u7edc\u3002<\/p>\n

4.4 \u70b9\u5531\u699c\u4e0e\u5b57\u5e55\u573a\u666f\u6570\u636e\u6a21\u578b<\/h4>\n

\/** \u70b9\u5531\u699c\u6761\u76ee（\u70b9\u5531 Tab \u5927\u7f16\u53f7\u70ed\u6b4c\u70b9\u5531\u699c） *\/<\/span>
\n@<\/span>Observed<\/span><\/span> export<\/span> class<\/span> SongItem<\/span> {<\/span>
\n rank:<\/span> string<\/span>;<\/span> \/\/ \u540d\u6b21\u5b57\u7b26\u4e32<\/span>
\n title:<\/span> string<\/span>;<\/span> \/\/ \u6b4c\u540d<\/span>
\n artist:<\/span> string<\/span>;<\/span> \/\/ \u6b4c\u624b<\/span>
\n heat:<\/span> string<\/span>;<\/span> \/\/ \u70b9\u5531\u70ed\u5ea6\u6587\u672c<\/span>
\n trend:<\/span> string<\/span>;<\/span> \/\/ \u8d8b\u52bf：'up' \/ 'down' \/ 'flat'<\/span><\/p>\n

constructor<\/span>(<\/span>rank:<\/span> string<\/span>,<\/span> title:<\/span> string<\/span>,<\/span> artist:<\/span> string<\/span>,<\/span> heat:<\/span> string<\/span>,<\/span> trend:<\/span> string<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>rank =<\/span> rank;<\/span>
\n this<\/span>.<\/span>title =<\/span> title;<\/span>
\n this<\/span>.<\/span>artist =<\/span> artist;<\/span>
\n this<\/span>.<\/span>heat =<\/span> heat;<\/span>
\n this<\/span>.<\/span>trend =<\/span> trend;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\/** \u70ed\u6b4c\u70b9\u5531\u699c Mock \u6570\u636e（8 \u6761） *\/<\/span>
\nconst<\/span> SONG_LIST<\/span>:<\/span> Array<\/span><<\/span>SongItem><\/span> =<\/span> [<\/span>
\n new<\/span> SongItem<\/span>(<\/span>'1'<\/span>,<\/span> '\u591c\u8272\u4e03\u70b9\u534a'<\/span>,<\/span> '\u6a80\u591c\u7b19'<\/span>,<\/span> '98.6\u4e07'<\/span>,<\/span> 'up'<\/span>)<\/span>,<\/span>
\n new<\/span> SongItem<\/span>(<\/span>'2'<\/span>,<\/span> '\u6c7d\u6c34\u6c14\u6ce1\u97f3'<\/span>,<\/span> '\u82cf\u6253\u83e0\u841d'<\/span>,<\/span> '87.2\u4e07'<\/span>,<\/span> 'up'<\/span>)<\/span>,<\/span>
\n new<\/span> SongItem<\/span>(<\/span>'3'<\/span>,<\/span> '\u6c5f\u8fb9\u5341\u4e8c\u697c'<\/span>,<\/span> '\u8001\u9646\u7684\u70df\u55d3'<\/span>,<\/span> '80.4\u4e07'<\/span>,<\/span> 'flat'<\/span>)<\/span>,<\/span>
\n new<\/span> SongItem<\/span>(<\/span>'4'<\/span>,<\/span> '\u590f\u65e5\u4e09\u5206\u751c'<\/span>,<\/span> '\u67e0\u6aac\u6c7d\u6c34Girl'<\/span>,<\/span> '73.9\u4e07'<\/span>,<\/span> 'down'<\/span>)<\/span>,<\/span>
\n new<\/span> SongItem<\/span>(<\/span>'5'<\/span>,<\/span> '\u5976\u8336\u6162\u534a\u62cd'<\/span>,<\/span> '\u534a\u7cd6\u829d\u58eb'<\/span>,<\/span> '66.8\u4e07'<\/span>,<\/span> 'up'<\/span>)<\/span>,<\/span>
\n new<\/span> SongItem<\/span>(<\/span>'6'<\/span>,<\/span> '\u6d77\u8c5a\u97f3\u7ec3\u4e60\u751f'<\/span>,<\/span> '\u9ad8\u97f3\u5c0f\u94a2\u70ae'<\/span>,<\/span> '59.5\u4e07'<\/span>,<\/span> 'down'<\/span>)<\/span>,<\/span>
\n new<\/span> SongItem<\/span>(<\/span>'7'<\/span>,<\/span> '\u665a\u98ce\u5408\u5531\u56e2'<\/span>,<\/span> '\u9ea6\u7530\u5408\u5531\u793e'<\/span>,<\/span> '52.1\u4e07'<\/span>,<\/span> 'up'<\/span>)<\/span>,<\/span>
\n new<\/span> SongItem<\/span>(<\/span>'8'<\/span>,<\/span> '\u6df1\u591c\u51fa\u79df\u8f66'<\/span>,<\/span> '\u767d\u566a\u8ba1\u5212'<\/span>,<\/span> '48.7\u4e07'<\/span>,<\/span> 'flat'<\/span>)<\/span>
\n]<\/span>;<\/span><\/p>\n

SongItem \u6a21\u578b\u627f\u8f7d\u70b9\u5531\u699c\u5355\u6570\u636e\u3002rank \u5b57\u6bb5\u7279\u610f\u8bbe\u8ba1\u4e3a\u5b57\u7b26\u4e32\u7c7b\u578b\u800c\u975e\u6570\u5b57，\u56e0\u4e3a\u524d\u7aef\u663e\u793a\u65f6\u540d\u6b21\u53ef\u80fd\u5e26\u6709\u7279\u6b8a\u7b26\u53f7（\u5982"No.1"）\u6216\u524d\u7f00\u8865\u96f6（\u5982"01"）\u3002trend \u5b57\u6bb5\u4f7f\u7528 'up'\/'down'\/'flat' \u4e09\u79cd\u5b57\u7b26\u4e32\u503c\u8868\u793a\u8d8b\u52bf\u65b9\u5411，\u914d\u5408\u524d\u9762\u5b9a\u4e49\u7684 trendColor \u4e0e trendIcon \u51fd\u6570\u5373\u53ef\u5b8c\u6210\u8d8b\u52bf\u7684\u89c6\u89c9\u6e32\u67d3\u3002\u516b\u6761\u699c\u5355\u6570\u636e\u4ece 98.6 \u4e07\u5230 48.7 \u4e07\u70ed\u5ea6\u9012\u51cf，\u524d\u4e09\u540d\u5206\u522b\u6807\u6ce8\u4e0a\u5347\u3001\u4e0a\u5347\u3001\u6301\u5e73，\u7b2c\u56db\u540d\u4e0b\u964d\u6697\u793a\u699c\u5355\u7684\u52a8\u6001\u53d8\u5316\u3002\u6b4c\u66f2\u4e0e\u6b4c\u624b\u540d\u79f0\u4e0e\u70ed\u95e8\u9ea6\u9738\u7684\u6210\u540d\u66f2\u4ea4\u53c9\u547c\u5e94，\u4f53\u73b0\u4e86\u5e94\u7528\u5185\u90e8\u6570\u636e\u7684\u5173\u8054\u6027\u8bbe\u8ba1\u3002<\/p>\n

4.5 \u5b57\u5e55\u573a\u666f\u4e0e\u7528\u6237\u529f\u80fd\u6e05\u5355\u6570\u636e\u6a21\u578b<\/h4>\n

\/** \u5b57\u5e55\u573a\u666f\u6761\u76ee（AI\u5b57\u5e55 Tab \u573a\u666f\u63a8\u8350\u5217\u8868） *\/<\/span>
\n@<\/span>Observed<\/span><\/span> export<\/span> class<\/span> CaptionScene<\/span> {<\/span>
\n scene:<\/span> string<\/span>;<\/span> \/\/ \u573a\u666f\u540d<\/span>
\n desc:<\/span> string<\/span>;<\/span> \/\/ \u573a\u666f\u8bf4\u660e<\/span>
\n src:<\/span> string<\/span>;<\/span> \/\/ \u63a8\u8350\u6e90\u8bed\u8a00<\/span>
\n tgt:<\/span> string<\/span>;<\/span> \/\/ \u63a8\u8350\u76ee\u6807\u8bed\u8a00<\/span><\/p>\n

constructor<\/span>(<\/span>scene:<\/span> string<\/span>,<\/span> desc:<\/span> string<\/span>,<\/span> src:<\/span> string<\/span>,<\/span> tgt:<\/span> string<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>scene =<\/span> scene;<\/span>
\n this<\/span>.<\/span>desc =<\/span> desc;<\/span>
\n this<\/span>.<\/span>src =<\/span> src;<\/span>
\n this<\/span>.<\/span>tgt =<\/span> tgt;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\/** \u5b57\u5e55\u573a\u666f Mock \u6570\u636e（5 \u6761：K\u6b4c\u573a\u666f\u76f8\u5173） *\/<\/span>
\nconst<\/span> SCENE_LIST<\/span>:<\/span> Array<\/span><<\/span>CaptionScene><\/span> =<\/span> [<\/span>
\n new<\/span> CaptionScene<\/span>(<\/span>'\u5916\u8bed\u6b4c\u8bcd\u8ddf\u5531'<\/span>,<\/span> '\u82f1\u6587\u6b4c\u6b4c\u8bcd\u5b9e\u65f6\u7ffb\u8bd1\u8ddf\u5531'<\/span>,<\/span> 'en'<\/span>,<\/span> 'zh-en'<\/span>)<\/span>,<\/span>
\n new<\/span> CaptionScene<\/span>(<\/span>'\u8bf4\u5531\u6b4c\u8bcd\u901f\u8bb0'<\/span>,<\/span> '\u8bed\u901f\u5feb\u4e5f\u80fd\u770b\u6e05\u6bcf\u53e5\u8bcd'<\/span>,<\/span> 'en'<\/span>,<\/span> 'en'<\/span>)<\/span>,<\/span>
\n new<\/span> CaptionScene<\/span>(<\/span>'\u4e2d\u6587\u6b4c\u66f2\u5408\u5531'<\/span>,<\/span> '\u5927\u5b57\u5e55\u5408\u5531\u4e0d\u8dd1\u8c03'<\/span>,<\/span> 'zh'<\/span>,<\/span> 'zh'<\/span>)<\/span>,<\/span>
\n new<\/span> CaptionScene<\/span>(<\/span>'\u7ca4\u8bed\u6b4c\u8f85\u52a9'<\/span>,<\/span> '\u7ca4\u8bed\u53d1\u97f3\u770b\u5b57\u5e55\u8ddf\u5531（sourceLanguage \u4ec5 zh\/en，\u7ca4\u8bed\u5f52\u4e2d\u6587\u6e90）'<\/span>,<\/span> 'zh'<\/span>,<\/span> 'zh'<\/span>)<\/span>,<\/span>
\n new<\/span> CaptionScene<\/span>(<\/span>'\u76f4\u64ad\u8fde\u9ea6\u4e92\u52a8'<\/span>,<\/span> '\u8fde\u9ea6\u5bf9\u8bdd\u53cc\u8bed\u5b57\u5e55'<\/span>,<\/span> 'en'<\/span>,<\/span> 'zh'<\/span>)<\/span>
\n]<\/span>;<\/span><\/p>\n

CaptionScene \u6a21\u578b\u662f AI \u5b57\u5e55 Tab \u573a\u666f\u63a8\u8350\u533a\u5757\u7684\u6570\u636e\u652f\u6491，\u6bcf\u6761\u6570\u636e\u9884\u7f6e\u4e86\u573a\u666f\u540d\u3001\u8bf4\u660e\u6587\u5b57\u4e0e\u63a8\u8350\u7684\u6e90\/\u76ee\u6807\u8bed\u8a00\u7ec4\u5408\u3002\u4e94\u6761\u573a\u666f\u6570\u636e\u7cbe\u51c6\u5bf9\u5e94\u4e86 K \u6b4c\u793e\u4ea4\u4e2d\u7684\u5178\u578b\u5b57\u5e55\u9700\u6c42：\u5916\u8bed\u8ddf\u5531\u4f7f\u7528\u82f1\u6587\u6e90+\u4e2d\u82f1\u53cc\u8bed\u76ee\u6807（en\u2192zh-en），\u8bf4\u5531\u901f\u8bb0\u4f7f\u7528\u82f1\u6587\u6e90+\u82f1\u6587\u76ee\u6807（en\u2192en，\u7eaf\u8bc6\u522b\u65e0\u7ffb\u8bd1\u4ee5\u964d\u4f4e\u5ef6\u8fdf），\u4e2d\u6587\u5408\u5531\u4f7f\u7528\u4e2d\u6587\u6e90+\u4e2d\u6587\u76ee\u6807（zh\u2192zh），\u7ca4\u8bed\u8f85\u52a9\u56e0 sourceLanguage \u4ec5\u652f\u6301 zh\/en \u800c\u5f52\u5165\u4e2d\u6587\u6e90\u5904\u7406，\u76f4\u64ad\u8fde\u9ea6\u5219\u4f7f\u7528\u82f1\u6587\u6e90+\u4e2d\u6587\u76ee\u6807（en\u2192zh）\u5b9e\u73b0\u8de8\u8bed\u8a00\u4ea4\u6d41\u3002\u8fd9\u4e9b\u573a\u666f\u9884\u8bbe\u8ba9\u7528\u6237\u4e00\u952e\u5957\u7528\u8bed\u8a00\u7ec4\u5408，\u964d\u4f4e\u4e86\u914d\u7f6e\u95e8\u69db\u3002<\/p>\n

\/** \u6211\u7684\u9875\u529f\u80fd\u6e05\u5355\u6761\u76ee *\/<\/span>
\n@<\/span>Observed<\/span><\/span> export<\/span> class<\/span> UserStat<\/span> {<\/span>
\n icon:<\/span> string<\/span>;<\/span> \/\/ \u529f\u80fd\u56fe\u6807<\/span>
\n label:<\/span> string<\/span>;<\/span> \/\/ \u529f\u80fd\u540d<\/span>
\n value:<\/span> string<\/span>;<\/span> \/\/ \u72b6\u6001\/\u6570\u503c\u6587\u672c<\/span>
\n arrow:<\/span> boolean<\/span>;<\/span> \/\/ \u662f\u5426\u663e\u793a\u53f3\u7bad\u5934<\/span><\/p>\n

constructor<\/span>(<\/span>icon:<\/span> string<\/span>,<\/span> label:<\/span> string<\/span>,<\/span> value:<\/span> string<\/span>,<\/span> arrow:<\/span> boolean<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>icon =<\/span> icon;<\/span>
\n this<\/span>.<\/span>label =<\/span> label;<\/span>
\n this<\/span>.<\/span>value =<\/span> value;<\/span>
\n this<\/span>.<\/span>arrow =<\/span> arrow;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\/** \u6211\u7684\u9875\u529f\u80fd\u6e05\u5355 Mock \u6570\u636e（8 \u6761） *\/<\/span>
\nconst<\/span> STAT_LIST<\/span>:<\/span> Array<\/span><<\/span>UserStat><\/span> =<\/span> [<\/span>
\n new<\/span> UserStat<\/span>(<\/span>'🎙'<\/span>,<\/span> '\u6211\u7684\u5f55\u97f3\u68da'<\/span>,<\/span> '36 \u9996\u4f5c\u54c1'<\/span>,<\/span> true<\/span>)<\/span>,<\/span>
\n new<\/span> UserStat<\/span>(<\/span>'🏆'<\/span>,<\/span> '\u6392\u4f4d\u8d5b\u6bb5\u4f4d'<\/span>,<\/span> '\u94bb\u77f3\u9ea6\u738b III'<\/span>,<\/span> true<\/span>)<\/span>,<\/span>
\n new<\/span> UserStat<\/span>(<\/span>'🎁'<\/span>,<\/span> '\u9ec4\u91d1\u9ea6\u9738\u4f1a\u5458'<\/span>,<\/span> '2026-11-21 \u5230\u671f'<\/span>,<\/span> true<\/span>)<\/span>,<\/span>
\n new<\/span> UserStat<\/span>(<\/span>'👥'<\/span>,<\/span> '\u5173\u6ce8\u7684\u9ea6\u53cb'<\/span>,<\/span> '128 \u4eba'<\/span>,<\/span> true<\/span>)<\/span>,<\/span>
\n new<\/span> UserStat<\/span>(<\/span>'\u2764'<\/span>,<\/span> '\u6211\u559c\u6b22\u7684\u5408\u5531'<\/span>,<\/span> '56 \u573a'<\/span>,<\/span> true<\/span>)<\/span>,<\/span>
\n new<\/span> UserStat<\/span>(<\/span>'🗣'<\/span>,<\/span> 'AI \u5b57\u5e55\u504f\u597d'<\/span>,<\/span> '\u6e90 zh \u00b7 \u76ee\u6807 zh'<\/span>,<\/span> true<\/span>)<\/span>,<\/span>
\n new<\/span> UserStat<\/span>(<\/span>'📊'<\/span>,<\/span> '\u6b22\u5531\u6570\u636e\u62a5\u544a'<\/span>,<\/span> '\u672c\u5468\u6b22\u5531 6.5 \u5c0f\u65f6'<\/span>,<\/span> true<\/span>)<\/span>,<\/span>
\n new<\/span> UserStat<\/span>(<\/span>'\u2699'<\/span>,<\/span> '\u97f3\u6548\u4e0e\u4f34\u594f\u8bbe\u7f6e'<\/span>,<\/span> '\u5f55\u97f3\u68da\u7ea7\u6df7\u54cd'<\/span>,<\/span> true<\/span>)<\/span>
\n]<\/span>;<\/span><\/p>\n

UserStat \u6a21\u578b\u7528\u4e8e\u6211\u7684 Tab \u7684\u529f\u80fd\u6e05\u5355\u884c，arrow \u5e03\u5c14\u5b57\u6bb5\u63a7\u5236\u662f\u5426\u663e\u793a\u53f3\u4fa7\u5bfc\u822a\u7bad\u5934\u2014\u2014\u867d\u7136 Mock \u6570\u636e\u4e2d\u516b\u6761\u5168\u90e8\u4e3a true，\u4f46\u8be5\u5b57\u6bb5\u4fdd\u7559\u4e86\u672a\u6765\u67d0\u4e9b\u7eaf\u4fe1\u606f\u5c55\u793a\u884c\u4e0d\u663e\u793a\u7bad\u5934\u7684\u6269\u5c55\u80fd\u529b\u3002\u529f\u80fd\u6e05\u5355\u8986\u76d6\u4e86\u4f5c\u54c1\u7ba1\u7406（\u5f55\u97f3\u68da）\u3001\u7ade\u6280\u6392\u540d（\u6392\u4f4d\u8d5b）\u3001\u4ed8\u8d39\u6743\u76ca（\u4f1a\u5458）\u3001\u793e\u4ea4\u5173\u7cfb（\u5173\u6ce8\/\u5408\u5531）\u3001AI\u8bbe\u7f6e（\u5b57\u5e55\u504f\u597d）\u3001\u6570\u636e\u7edf\u8ba1（\u6b22\u5531\u62a5\u544a）\u4e0e\u97f3\u9891\u8bbe\u7f6e（\u97f3\u6548\u4f34\u594f）\u4e03\u5927\u529f\u80fd\u57df，\u5176\u4e2d"AI \u5b57\u5e55\u504f\u597d"\u6761\u76ee\u76f4\u63a5\u5c55\u793a\u5f53\u524d\u7528\u6237\u7684\u5b57\u5e55\u8bed\u8a00\u914d\u7f6e（\u6e90 zh\u00b7\u76ee\u6807 zh），\u4e0e AI \u5b57\u5e55 Tab \u5f62\u6210\u6570\u636e\u8054\u52a8\u3002<\/p>\n

\u4e94\u3001\u7ec4\u4ef6\u4e3b\u4f53：\u72b6\u6001\u58f0\u660e\u4e0e\u6838\u5fc3\u65b9\u6cd5<\/h3>\n

5.1 \u72b6\u6001\u53d8\u91cf\u58f0\u660e<\/h4>\n

\/\/ ============ \u2465 \u7ec4\u4ef6\u4e3b\u4f53 ============<\/span><\/p>\n

\/** 1120 \u9ea6\u9738\u6b22\u5531 \u00b7 K\u6b4c\u793e\u4ea4\u4e3b\u9875\u9762 *\/<\/span>
\n@<\/span>Entry<\/span><\/span>
\n@<\/span>Component<\/span><\/span>
\nstruct Page1120 {<\/span>
\n \/** \u5f53\u524d\u9009\u4e2d Tab \u7d22\u5f15 *\/<\/span>
\n @<\/span>State<\/span><\/span> currentTab:<\/span> number<\/span> =<\/span> 0<\/span>;<\/span>
\n \/** \u547c\u5438\u52a8\u753b\u5f00\u5173（\u6bcf\u79d2\u7ffb\u8f6c，\u8054\u52a8\u67f1\u72b6\u56fe\u4e0e\u9ea6\u9738\u5934\u50cf） *\/<\/span>
\n @<\/span>State<\/span><\/span> breath:<\/span> boolean<\/span> =<\/span> false<\/span>;<\/span>
\n \/** \u547c\u5438\u52a8\u753b\u5b9a\u65f6\u5668\u53e5\u67c4 *\/<\/span>
\n @<\/span>State<\/span><\/span> timer:<\/span> number<\/span> =<\/span> –<\/span>1<\/span>;<\/span>
\n \/** \u5934\u90e8\u623f\u95f4\u7c7b\u578b chips \u9009\u4e2d\u7d22\u5f15 *\/<\/span>
\n @<\/span>State<\/span><\/span> cateIdx:<\/span> number<\/span> =<\/span> 0<\/span>;<\/span>
\n \/** \u521b\u5efa\u6b4c\u623f\u5f39\u7a97\u5f00\u5173 *\/<\/span>
\n @<\/span>State<\/span><\/span> addModal:<\/span> boolean<\/span> =<\/span> false<\/span>;<\/span>
\n \/** \u7f16\u8f91\u6b4c\u623f\u5f39\u7a97\u5f00\u5173 *\/<\/span>
\n @<\/span>State<\/span><\/span> editModal:<\/span> boolean<\/span> =<\/span> false<\/span>;<\/span>
\n \/** \u89e3\u6563\u6b4c\u623f\u786e\u8ba4\u5f39\u7a97\u5f00\u5173 *\/<\/span>
\n @<\/span>State<\/span><\/span> delModal:<\/span> boolean<\/span> =<\/span> false<\/span>;<\/span>
\n \/** \u5f53\u524d\u7f16\u8f91\u7684\u6b4c\u623f\u7d22\u5f15 *\/<\/span>
\n @<\/span>State<\/span><\/span> editIdx:<\/span> number<\/span> =<\/span> 0<\/span>;<\/span>
\n \/** \u5f53\u524d\u89e3\u6563\u7684\u6b4c\u623f\u7d22\u5f15 *\/<\/span>
\n @<\/span>State<\/span><\/span> delIdx:<\/span> number<\/span> =<\/span> 0<\/span>;<\/span>
\n \/** \u6b4c\u623f\u5e7f\u573a\u5bab\u683c\u6570\u636e *\/<\/span>
\n @<\/span>State<\/span><\/span> roomList:<\/span> Array<\/span><<\/span>RoomItem><\/span> =<\/span> ROOM_LIST<\/span>;<\/span>
\n \/** \u70ed\u95e8\u9ea6\u9738\u6a2a\u6ed1\u6570\u636e *\/<\/span>
\n @<\/span>State<\/span><\/span> singerList:<\/span> Array<\/span><<\/span>SingerItem><\/span> =<\/span> SINGER_LIST<\/span>;<\/span>
\n \/** \u70ed\u6b4c\u70b9\u5531\u699c\u6570\u636e *\/<\/span>
\n @<\/span>State<\/span><\/span> songList:<\/span> Array<\/span><<\/span>SongItem><\/span> =<\/span> SONG_LIST<\/span>;<\/span>
\n \/** \u5b57\u5e55\u573a\u666f\u5217\u8868\u6570\u636e *\/<\/span>
\n @<\/span>State<\/span><\/span> sceneList:<\/span> Array<\/span><<\/span>CaptionScene><\/span> =<\/span> SCENE_LIST<\/span>;<\/span>
\n \/** \u6211\u7684\u9875\u529f\u80fd\u6e05\u5355\u6570\u636e *\/<\/span>
\n @<\/span>State<\/span><\/span> statList:<\/span> Array<\/span><<\/span>UserStat><\/span> =<\/span> STAT_LIST<\/span>;<\/span>
\n \/** \u521b\u5efa\u8868\u5355：\u6b4c\u623f\u540d\u79f0 *\/<\/span>
\n @<\/span>State<\/span><\/span> formName:<\/span> string<\/span> =<\/span> ''<\/span>;<\/span>
\n \/** \u521b\u5efa\u8868\u5355：\u6b4c\u623f\u7c7b\u578b（\u638c\u9ea6\/\u6392\u9ea6\/\u8fde\u9ea6） *\/<\/span>
\n @<\/span>State<\/span><\/span> formType:<\/span> string<\/span> =<\/span> ''<\/span>;<\/span>
\n \/** \u7f16\u8f91\u8868\u5355：\u6b4c\u623f\u540d\u79f0 *\/<\/span>
\n @<\/span>State<\/span><\/span> editName:<\/span> string<\/span> =<\/span> ''<\/span>;<\/span>
\n \/** \u7f16\u8f91\u8868\u5355：\u6b4c\u623f\u7c7b\u578b *\/<\/span>
\n @<\/span>State<\/span><\/span> editType:<\/span> string<\/span> =<\/span> ''<\/span>;<\/span><\/p>\n

\u7ec4\u4ef6\u4e3b\u4f53 Page1120 \u4ee5 @Entry \u4e0e @Component \u53cc\u88c5\u9970\u5668\u58f0\u660e，\u662f\u5e94\u7528\u7684\u6839\u5165\u53e3\u7ec4\u4ef6\u3002\u72b6\u6001\u53d8\u91cf\u58f0\u660e\u53ef\u5206\u4e3a\u56db\u7ec4：\u5bfc\u822a\u4e0e\u52a8\u753b\u72b6\u6001（currentTab\/breath\/timer\/cateIdx）\u3001\u5f39\u7a97\u72b6\u6001（addModal\/editModal\/delModal\/editIdx\/delIdx）\u3001\u4e1a\u52a1\u6570\u636e\u5217\u8868（roomList\/singerList\/songList\/sceneList\/statList）\u4e0e\u8868\u5355\u6570\u636e（formName\/formType\/editName\/editType）\u3002<\/p>\n

breath \u662f\u4e00\u4e2a\u7cbe\u5999\u7684\u52a8\u753b\u9a71\u52a8\u8bbe\u8ba1\u2014\u2014\u5b83\u662f\u4e00\u4e2a\u6bcf\u79d2\u7ffb\u8f6c\u4e00\u6b21\u7684\u5e03\u5c14\u503c，\u901a\u8fc7 setInterval \u5b9a\u65f6\u5668\u5728 true \u4e0e false \u4e4b\u95f4\u5207\u6362\u3002\u867d\u7136\u53ea\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u5e03\u5c14\u7ffb\u8f6c，\u4f46\u901a\u8fc7\u5728 UI \u7ed1\u5b9a\u4e2d\u4f7f\u7528\u4e09\u5143\u8868\u8fbe\u5f0f（\u5982 this.breath ? 1 : 0.6\u3001this.breath ? COLORS.cyan : COLORS.sub\u3001this.breath ? 1.05 : 0.95），\u9a71\u52a8\u4e86\u5934\u50cf\u900f\u660e\u5ea6\u547c\u5438\u3001\u67f1\u72b6\u56fe\u989c\u8272\u4ea4\u66ff\u3001\u67f1\u72b6\u56fe\u9ad8\u5ea6 \u00b15% \u6ce2\u52a8\u3001\u5c31\u7eea\u72b6\u6001\u95ea\u70c1\u7b49\u591a\u5904\u52a8\u6548\u3002\u8fd9\u79cd"\u5355\u72b6\u6001\u9a71\u52a8\u591a\u52a8\u6548"\u7684\u8bbe\u8ba1\u6a21\u5f0f\u6781\u5927\u7b80\u5316\u4e86\u52a8\u753b\u7ba1\u7406，\u662f\u58f0\u660e\u5f0f UI \u6846\u67b6\u4e0b\u8f7b\u91cf\u52a8\u753b\u7684\u7ecf\u5178\u5b9e\u8df5\u3002<\/p>\n

\/\/ — AI \u5b57\u5e55\u72b6\u6001（6.1.1 \u7279\u6027：\u6e90\u8bed\u8a00\/\u76ee\u6807\u8bed\u8a00\/\u5b57\u4f53\u5927\u5c0f\/\u5b57\u4f53\u989c\u8272） —<\/span>
\n \/** \u5b57\u5e55\u63a7\u5236\u5668（writeAudio \u5199\u5165\u97f3\u9891\u6d41） *\/<\/span>
\n private<\/span> captionController:<\/span> AICaptionController =<\/span> new<\/span> AICaptionController<\/span>(<\/span>)<\/span>;<\/span>
\n \/** \u5b57\u5e55\u663e\u793a\u72b6\u6001（@Link \u53cc\u5411\u7ed1\u5b9a\u5230 AICaptionComponent.isShown） *\/<\/span>
\n @<\/span>State<\/span><\/span> captionShown:<\/span> boolean<\/span> =<\/span> false<\/span>;<\/span>
\n \/** sourceLanguage：\u5b57\u5e55\u6e90\u8bed\u8a00 *\/<\/span>
\n @<\/span>State<\/span><\/span> srcLang:<\/span> string<\/span> =<\/span> 'zh'<\/span>;<\/span>
\n \/** targetLanguage：\u5b57\u5e55\u76ee\u6807\u8bed\u8a00 *\/<\/span>
\n @<\/span>State<\/span><\/span> tgtLang:<\/span> string<\/span> =<\/span> 'zh'<\/span>;<\/span>
\n \/** fontSize：\u5b57\u4f53\u5927\u5c0f（AICaptionFontSize \u679a\u4e3e） *\/<\/span>
\n @<\/span>State<\/span><\/span> captionSize:<\/span> AICaptionFontSize =<\/span> AICaptionFontSize.<\/span>NORMAL<\/span>;<\/span>
\n \/** fontColor：\u5b57\u4f53\u989c\u8272（\u9ed8\u8ba4\u7ecf\u5178\u767d，\u53d6\u81ea\u9884\u8bbe\u6570\u7ec4） *\/<\/span>
\n @<\/span>State<\/span><\/span> captionColor:<\/span> string<\/span> =<\/span> CAPTION_FONT_COLORS<\/span>[<\/span>0<\/span>]<\/span>;<\/span>
\n \/** onPrepared \u56de\u8c03\u7f6e true（\u5b57\u5e55\u670d\u52a1\u5c31\u7eea） *\/<\/span>
\n @<\/span>State<\/span><\/span> captionReady:<\/span> boolean<\/span> =<\/span> false<\/span>;<\/span>
\n \/** onError \u9519\u8bef\u4fe1\u606f *\/<\/span>
\n @<\/span>State<\/span><\/span> captionErrMsg:<\/span> string<\/span> =<\/span> ''<\/span>;<\/span>
\n \/** \u5df2\u5199\u5165\u97f3\u9891\u5757\u8ba1\u6570 *\/<\/span>
\n @<\/span>State<\/span><\/span> captionFed:<\/span> number<\/span> =<\/span> 0<\/span>;<\/span><\/p>\n

AI \u5b57\u5e55\u72b6\u6001\u7ec4\u662f\u7ec4\u4ef6\u4e0e Speech Kit \u4ea4\u4e92\u7684\u6838\u5fc3\u72b6\u6001\u533a\u3002captionController \u58f0\u660e\u4e3a private \u6210\u5458\u800c\u975e @State，\u56e0\u4e3a\u63a7\u5236\u5668\u5b9e\u4f8b\u672c\u8eab\u4e0d\u9700\u8981\u89e6\u53d1 UI \u91cd\u65b0\u6e32\u67d3\u2014\u2014\u5b83\u7684 writeAudio \u65b9\u6cd5\u88ab\u8c03\u7528\u540e，\u5b57\u5e55\u7ec4\u4ef6\u5185\u90e8\u7684\u6e32\u67d3\u7531 AICaptionComponent \u81ea\u884c\u7ba1\u7406\u3002captionShown \u6807\u6ce8 @State，\u56e0\u4e3a\u5b83\u901a\u8fc7 @Link \u53cc\u5411\u7ed1\u5b9a\u5230 AICaptionComponent \u7684 isShown \u53c2\u6570，\u63a7\u5236\u5b57\u5e55\u7684\u663e\u793a\u4e0e\u9690\u85cf，UI \u9700\u8981\u54cd\u5e94\u5176\u53d8\u5316\u3002<\/p>\n

\u56db\u4e2a\u6838\u5fc3\u5b57\u6bb5\u2014\u2014srcLang（\u6e90\u8bed\u8a00，\u9ed8\u8ba4\u4e2d\u6587）\u3001tgtLang（\u76ee\u6807\u8bed\u8a00，\u9ed8\u8ba4\u4e2d\u6587）\u3001captionSize（\u5b57\u53f7，\u9ed8\u8ba4 NORMAL \u6807\u51c6）\u3001captionColor（\u989c\u8272，\u9ed8\u8ba4\u7ecf\u5178\u767d）\u2014\u2014\u76f4\u63a5\u6620\u5c04 6.1.1 \u65b0\u589e\u7684 sourceLanguage\/targetLanguage\/fontSize\/fontColor \u56db\u5927\u914d\u7f6e\u9879\u3002\u5f53\u7528\u6237\u5728 AI \u5b57\u5e55 Tab \u4e2d\u70b9\u51fb\u8bed\u8a00\u6216\u5916\u89c2\u9009\u9879\u65f6，\u8fd9\u4e9b\u72b6\u6001\u503c\u968f\u4e4b\u53d8\u5316，\u8fdb\u800c\u89e6\u53d1 buildCaptionOptions() \u91cd\u5efa\u914d\u7f6e\u5bf9\u8c61，AICaptionComponent \u63a5\u6536\u65b0\u7684 options \u53c2\u6570\u5e76\u70ed\u66f4\u65b0\u5b57\u5e55\u7684\u8bc6\u522b\u4e0e\u663e\u793a\u7b56\u7565\u3002captionReady \u4e0e captionErrMsg \u5206\u522b\u670d\u52a1\u4e8e onPrepared \u4e0e onError \u4e24\u4e2a\u56de\u8c03，\u524d\u8005\u5728\u5b57\u5e55\u670d\u52a1\u5c31\u7eea\u65f6\u7f6e true \u9a71\u52a8 UI \u663e\u793a"\u5df2\u5c31\u7eea"\u72b6\u6001，\u540e\u8005\u5728\u51fa\u9519\u65f6\u5b58\u50a8\u9519\u8bef\u4fe1\u606f\u9a71\u52a8 UI \u663e\u793a\u9519\u8bef\u63d0\u793a\u6761\u3002captionFed \u8ba1\u6570\u5668\u8bb0\u5f55\u5df2\u5199\u5165\u7684\u97f3\u9891\u5757\u6570\u91cf，\u4e3a\u6f14\u793a\u573a\u666f\u63d0\u4f9b\u53ef\u89c6\u5316\u7684\u6570\u636e\u6d41\u6307\u6807\u3002<\/p>\n

5.2 AICaptionOptions \u7ec4\u88c5\u65b9\u6cd5<\/h4>\n

\/** \u7ec4\u88c5 AICaptionOptions：\u4f53\u73b0 6.1.1 \u65b0\u589e\u7684\u6e90\u8bed\u8a00\/\u76ee\u6807\u8bed\u8a00\/\u5b57\u4f53\u5927\u5c0f\/\u5b57\u4f53\u989c\u8272 *\/<\/span>
\n buildCaptionOptions<\/span>(<\/span>)<\/span>:<\/span> AICaptionOptions {<\/span>
\n const<\/span> opts:<\/span> AICaptionOptions =<\/span> {<\/span>
\n initialOpacity:<\/span> 1<\/span>,<\/span>
\n sourceLanguage:<\/span> this<\/span>.<\/span>srcLang,<\/span> \/\/ \u2605 6.1.1：\u5b57\u5e55\u6e90\u8bed\u8a00（'zh' | 'en'）<\/span>
\n targetLanguage:<\/span> this<\/span>.<\/span>tgtLang,<\/span> \/\/ \u2605 6.1.1：\u5b57\u5e55\u76ee\u6807\u8bed\u8a00（'zh' | 'en' | 'zh-en'）<\/span>
\n fontSize:<\/span> this<\/span>.<\/span>captionSize,<\/span> \/\/ \u2605 6.1.1：\u5b57\u4f53\u5927\u5c0f（AICaptionFontSize \u679a\u4e3e）<\/span>
\n fontColor:<\/span> this<\/span>.<\/span>captionColor,<\/span> \/\/ \u2605 6.1.1：\u5b57\u4f53\u989c\u8272（ResourceColor）<\/span>
\n onPrepared<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>captionReady =<\/span> true<\/span>;<\/span>
\n this<\/span>.<\/span>captionErrMsg =<\/span> ''<\/span>;<\/span>
\n }<\/span>,<\/span>
\n onError<\/span>:<\/span> (<\/span>error:<\/span> BusinessError)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>captionErrMsg =<\/span> '\u5b57\u5e55\u670d\u52a1\u5f02\u5e38 '<\/span> +<\/span> error.<\/span>code +<\/span> '：'<\/span> +<\/span> error.<\/span>message;<\/span>
\n }<\/span>
\n }<\/span>;<\/span>
\n return<\/span> opts;<\/span>
\n }<\/span><\/p>\n

buildCaptionOptions() \u65b9\u6cd5\u662f\u8fde\u63a5\u7ec4\u4ef6\u72b6\u6001\u4e0e Speech Kit \u914d\u7f6e\u7684\u6865\u6881\u3002\u6bcf\u6b21\u8c03\u7528\u65f6，\u5b83\u8bfb\u53d6\u5f53\u524d\u7684 srcLang\u3001tgtLang\u3001captionSize\u3001captionColor \u56db\u4e2a\u72b6\u6001\u503c，\u7ec4\u88c5\u4e3a\u4e00\u4e2a\u5168\u65b0\u7684 AICaptionOptions \u5bf9\u8c61\u8fd4\u56de\u3002\u8fd9\u4e2a\u65b9\u6cd5\u5728 build() \u4e2d\u88ab AICaptionComponent \u7684 options \u53c2\u6570\u8c03\u7528，\u610f\u5473\u7740\u6bcf\u6b21 ArkUI \u6846\u67b6\u56e0\u72b6\u6001\u53d8\u5316\u89e6\u53d1\u91cd\u65b0\u6e32\u67d3\u65f6，\u90fd\u4f1a\u91cd\u5efa\u914d\u7f6e\u5bf9\u8c61\u5e76\u4f20\u9012\u7ed9\u5b57\u5e55\u7ec4\u4ef6，\u5b9e\u73b0\u914d\u7f6e\u7684\u5b9e\u65f6\u70ed\u66f4\u65b0\u3002<\/p>\n

initialOpacity \u8bbe\u4e3a 1 \u8868\u793a\u5b57\u5e55\u7ec4\u4ef6\u521d\u59cb\u5b8c\u5168\u53ef\u89c1（\u900f\u660e\u5ea6\u4e3a 1.0）\u3002\u56db\u4e2a\u6807\u6ce8\u661f\u53f7（\u2605）\u7684\u5b57\u6bb5\u6b63\u662f 6.1.1 \u7248\u672c\u7684\u65b0\u589e\u80fd\u529b\u3002onPrepared \u56de\u8c03\u5728\u5b57\u5e55\u670d\u52a1\u521d\u59cb\u5316\u5b8c\u6210\u3001\u53ef\u4ee5\u63a5\u6536\u97f3\u9891\u6d41\u65f6\u88ab\u6846\u67b6\u8c03\u7528，\u6b64\u65f6\u5c06 captionReady \u7f6e\u4e3a true \u5e76\u6e05\u7a7a\u9519\u8bef\u4fe1\u606f，UI \u4e0a"\u521d\u59cb\u5316\u4e2d"\u7684\u63d0\u793a\u968f\u5373\u5207\u6362\u4e3a"\u5df2\u5c31\u7eea"\u7eff\u8272\u6807\u7b7e\u3002onError \u56de\u8c03\u63a5\u6536 BusinessError \u7c7b\u578b\u53c2\u6570，\u5305\u542b code（\u9519\u8bef\u7801）\u4e0e message（\u9519\u8bef\u63cf\u8ff0），\u5c06\u5176\u62fc\u63a5\u4e3a\u7528\u6237\u53ef\u8bfb\u7684\u9519\u8bef\u6587\u672c\u5b58\u5165 captionErrMsg，UI \u4e0a\u4ee5\u7c89\u8272\u63d0\u793a\u6761\u5c55\u793a\u3002\u8fd9\u4e24\u4e2a\u56de\u8c03\u5c06 Speech Kit \u7684\u5f02\u6b65\u751f\u547d\u5468\u671f\u4e8b\u4ef6\u8f6c\u6362\u4e3a\u7ec4\u4ef6\u72b6\u6001，\u4f53\u73b0\u4e86\u58f0\u660e\u5f0f\u7f16\u7a0b\u4e2d"\u4e8b\u4ef6\u2014\u72b6\u6001\u2014\u6e32\u67d3"\u7684\u6807\u51c6\u54cd\u5e94\u94fe\u8def\u3002<\/p>\n

5.3 \u6e90\u8bed\u8a00\u8054\u52a8\u65b9\u6cd5<\/h4>\n

\/** \u5207\u6362\u6e90\u8bed\u8a00\u65f6\u8054\u52a8\u76ee\u6807\u8bed\u8a00（\u4e2d\u6587\u6e90\u65f6\u76ee\u6807\u8bed\u8a00\u4ec5\u652f\u6301 'zh'） *\/<\/span>
\n switchSourceLang<\/span>(<\/span>code:<\/span> string<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>srcLang =<\/span> code;<\/span>
\n if<\/span> (<\/span>code ===<\/span> 'zh'<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>tgtLang =<\/span> 'zh'<\/span>;<\/span> \/\/ \u4e2d\u6587\u6e90：\u65e0\u7ffb\u8bd1\u65b9\u5411，\u9501\u5b9a\u4e2d\u6587<\/span>
\n }<\/span> else<\/span> {<\/span>
\n this<\/span>.<\/span>tgtLang =<\/span> 'zh-en'<\/span>;<\/span> \/\/ \u82f1\u6587\u6e90：\u9ed8\u8ba4\u53cc\u8bed，\u53ef\u518d\u9009 zh\/en<\/span>
\n }<\/span>
\n }<\/span><\/p>\n

switchSourceLang \u65b9\u6cd5\u5c01\u88c5\u4e86\u6e90\u8bed\u8a00\u5207\u6362\u65f6\u7684\u8054\u52a8\u903b\u8f91，\u662f 6.1.1 \u65b0\u7279\u6027\u4e1a\u52a1\u89c4\u5219\u7684\u4ee3\u7801\u5b9e\u73b0\u3002\u5f53 sourceLanguage \u8bbe\u4e3a 'zh'（\u4e2d\u6587）\u65f6，\u5f15\u64ce\u65e0\u9700\u7ffb\u8bd1\u2014\u2014\u4e2d\u6587\u6e90\u8bc6\u522b\u4e3a\u4e2d\u6587\u5b57\u5e55，\u56e0\u6b64 targetLanguage \u88ab\u9501\u5b9a\u4e3a 'zh'；\u5f53 sourceLanguage \u8bbe\u4e3a 'en'（\u82f1\u6587）\u65f6，\u5f15\u64ce\u652f\u6301\u7ffb\u8bd1，\u9ed8\u8ba4\u8bbe\u4e3a 'zh-en'（\u4e2d\u82f1\u53cc\u8bed），\u7528\u6237\u4ecd\u53ef\u5728\u4e09\u4e2a\u9009\u9879（zh\/en\/zh-en）\u4e2d\u5207\u6362\u3002\u8fd9\u4e00\u8054\u52a8\u903b\u8f91\u786e\u4fdd\u4e86\u914d\u7f6e\u7ec4\u5408\u7684\u5408\u6cd5\u6027，\u907f\u514d\u4e86"\u4e2d\u6587\u6e90+\u82f1\u6587\u76ee\u6807"\u7b49\u65e0\u610f\u4e49\u7ec4\u5408\u3002\u5728 AI \u5b57\u5e55 Tab \u7684 UI \u5c42，\u4e2d\u6587\u6e90\u65f6\u76ee\u6807\u8bed\u8a00\u533a\u57df\u663e\u793a\u9501\u5b9a\u63d0\u793a\u884c（🔒\u56fe\u6807+"\u4e2d\u6587\u6e90\u9501\u5b9a\u4e2d\u6587"\u6587\u6848），\u82f1\u6587\u6e90\u65f6\u663e\u793a\u4e09\u9009\u9879\u9009\u62e9\u5668，\u5b9e\u73b0\u4e86\u8054\u52a8\u903b\u8f91\u7684\u89c6\u89c9\u8868\u8fbe\u3002<\/p>\n

5.4 \u6f14\u793a\u97f3\u9891\u5199\u5165\u65b9\u6cd5<\/h4>\n

\/** \u6f14\u793a\u5199\u5165\u97f3\u9891\u6d41：\u751f\u6210 640 \u5b57\u8282 PCM \u5757（16kHz\/16bit\/\u5355\u58f0\u9053 \u2248 20ms）\u8c03\u7528 writeAudio *\/<\/span>
\n feedDemoAudio<\/span>(<\/span>)<\/span> {<\/span>
\n const<\/span> block =<\/span> new<\/span> Uint8Array<\/span>(<\/span>640<\/span>)<\/span>;<\/span>
\n for<\/span> (<\/span>let<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> 640<\/span>;<\/span> i +=<\/span> 2<\/span>)<\/span> {<\/span>
\n const<\/span> t =<\/span> (<\/span>i \/<\/span> 2<\/span>)<\/span> \/<\/span> 16000<\/span>;<\/span>
\n const<\/span> v =<\/span> Math.<\/span>round<\/span>(<\/span>Math.<\/span>sin<\/span>(<\/span>2<\/span> *<\/span> Math.<\/span>PI<\/span> *<\/span> 440<\/span> *<\/span> t)<\/span> *<\/span> 6000<\/span>)<\/span>;<\/span>
\n block[<\/span>i]<\/span> =<\/span> v &<\/span> 0xFF<\/span>;<\/span>
\n block[<\/span>i +<\/span> 1<\/span>]<\/span> =<\/span> (<\/span>v >><\/span> 8<\/span>)<\/span> &<\/span> 0xFF<\/span>;<\/span>
\n }<\/span>
\n try<\/span> {<\/span>
\n const<\/span> audioData:<\/span> AudioData =<\/span> {<\/span> data:<\/span> block }<\/span>;<\/span>
\n this<\/span>.<\/span>captionController.<\/span>writeAudio<\/span>(<\/span>audioData)<\/span>;<\/span>
\n this<\/span>.<\/span>captionFed++<\/span>;<\/span>
\n }<\/span> catch<\/span> (<\/span>e)<\/span> {<\/span>
\n this<\/span>.<\/span>captionErrMsg =<\/span> '\u97f3\u9891\u5199\u5165\u5931\u8d25'<\/span>;<\/span>
\n }<\/span>
\n }<\/span><\/p>\n

feedDemoAudio \u65b9\u6cd5\u751f\u6210\u4e00\u6bb5\u6a21\u62df\u7684 PCM \u97f3\u9891\u6570\u636e\u5e76\u5199\u5165\u5b57\u5e55\u63a7\u5236\u5668，\u662f AI \u5b57\u5e55\u529f\u80fd\u7aef\u5230\u7aef\u6f14\u793a\u7684\u5173\u952e\u4e00\u73af\u3002\u65b9\u6cd5\u9996\u5148\u521b\u5efa\u4e00\u4e2a 640 \u5b57\u8282\u7684 Uint8Array \u7f13\u51b2\u533a\u3002\u6309\u7167 16kHz \u91c7\u6837\u7387\u300116bit \u4f4d\u6df1（\u6bcf\u91c7\u6837 2 \u5b57\u8282）\u3001\u5355\u58f0\u9053\u7684 PCM \u683c\u5f0f\u8ba1\u7b97，640 \u5b57\u8282\u6070\u597d\u5bf9\u5e94 320 \u4e2a\u91c7\u6837\u70b9，\u5373 20 \u6beb\u79d2\u7684\u97f3\u9891\u65f6\u957f\u2014\u2014\u8fd9\u662f\u8bed\u97f3\u8bc6\u522b\u5f15\u64ce\u63a8\u8350\u7684\u5199\u5165\u7c92\u5ea6\u3002<\/p>\n

\u5faa\u73af\u4f53\u4e2d\u4ee5\u6b65\u957f 2 \u904d\u5386\u7f13\u51b2\u533a（\u6bcf\u4e24\u5b57\u8282\u4e3a\u4e00\u4e2a 16bit \u91c7\u6837\u503c），\u901a\u8fc7\u6b63\u5f26\u51fd\u6570 Math.sin(2 * Math.PI * 440 * t) \u751f\u6210 440Hz \u7684\u6807\u51c6\u97f3 A4 \u7684\u6ce2\u5f62\u6570\u636e，\u632f\u5e45\u8bbe\u4e3a 6000（16bit \u6709\u7b26\u53f7\u8303\u56f4 -32768~32767 \u7684\u7ea6 18%），\u786e\u4fdd\u97f3\u9891\u4e0d\u4f1a\u524a\u6ce2\u5931\u771f\u3002\u751f\u6210\u7684\u6574\u6570\u503c\u901a\u8fc7\u4f4d\u8fd0\u7b97 v & 0xFF（\u4f4e 8 \u4f4d）\u548c (v >> 8) & 0xFF（\u9ad8 8 \u4f4d）\u62c6\u5206\u4e3a\u4e24\u4e2a\u5b57\u8282\u5199\u5165\u7f13\u51b2\u533a，\u5b9e\u73b0\u5c0f\u7aef\u5e8f\u7684 16bit PCM \u7f16\u7801\u3002\u968f\u540e\u5c06\u7f13\u51b2\u533a\u5305\u88c5\u4e3a AudioData \u5bf9\u8c61（{ data: block }），\u8c03\u7528 captionController.writeAudio(audioData) \u63a8\u9001\u7ed9 Speech Kit \u5f15\u64ce\u3002\u5199\u5165\u6210\u529f\u540e captionFed \u81ea\u589e，UI \u4e0a\u7684"\u00d7N"\u8ba1\u6570\u5668\u540c\u6b65\u66f4\u65b0\u3002try-catch \u5757\u6355\u83b7\u5199\u5165\u8fc7\u7a0b\u4e2d\u53ef\u80fd\u7684\u5f02\u5e38（\u5982\u670d\u52a1\u672a\u5c31\u7eea\u3001\u7f13\u51b2\u533a\u6ea2\u51fa\u7b49），\u5c06\u9519\u8bef\u4fe1\u606f\u5b58\u5165 captionErrMsg \u4f9b UI \u5c55\u793a\u3002\u5728\u5b9e\u9645 K \u6b4c\u5e94\u7528\u4e2d，\u8fd9\u6bb5\u97f3\u9891\u5199\u5165\u903b\u8f91\u7684\u8f93\u5165\u6e90\u5e94\u66ff\u6362\u4e3a\u9ea6\u514b\u98ce\u91c7\u96c6\u7684\u5b9e\u65f6 PCM \u6d41，\u4f46\u6f14\u793a\u573a\u666f\u4f7f\u7528\u5408\u6210\u6b63\u5f26\u6ce2\u5df2\u8db3\u4ee5\u9a8c\u8bc1\u6570\u636e\u901a\u8def\u7684\u5b8c\u6574\u6027\u3002<\/p>\n

5.5 \u6b4c\u623f\u589e\u5220\u6539\u65b9\u6cd5<\/h4>\n

\/** \u6253\u5f00\u7f16\u8f91\u6b4c\u623f\u5f39\u7a97（\u56de\u586b\u5f53\u524d\u6b4c\u623f\u540d\u79f0\u4e0e\u7c7b\u578b） *\/<\/span>
\n openEditRoom<\/span>(<\/span>idx:<\/span> number<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>editIdx =<\/span> idx;<\/span>
\n this<\/span>.<\/span>editName =<\/span> this<\/span>.<\/span>roomList[<\/span>idx]<\/span>.<\/span>name;<\/span>
\n this<\/span>.<\/span>editType =<\/span> this<\/span>.<\/span>roomList[<\/span>idx]<\/span>.<\/span>tag;<\/span>
\n this<\/span>.<\/span>editModal =<\/span> true<\/span>;<\/span>
\n }<\/span><\/p>\n

\/** \u4fdd\u5b58\u65b0\u5efa\u6b4c\u623f（\u7a7a\u5b57\u6bb5\u7528\u9ed8\u8ba4\u503c\u515c\u5e95） *\/<\/span>
\n saveRoom<\/span>(<\/span>)<\/span> {<\/span>
\n const<\/span> name =<\/span> this<\/span>.<\/span>formName ===<\/span> ''<\/span> ?<\/span> '\u672a\u547d\u540d\u6b4c\u623f'<\/span> :<\/span> this<\/span>.<\/span>formName;<\/span>
\n const<\/span> type =<\/span> this<\/span>.<\/span>formType ===<\/span> ''<\/span> ?<\/span> '\u638c\u9ea6'<\/span> :<\/span> this<\/span>.<\/span>formType;<\/span>
\n this<\/span>.<\/span>roomList.<\/span>push<\/span>(<\/span>new<\/span> RoomItem<\/span>(<\/span>'🎶'<\/span>,<\/span> name,<\/span> '0\u5728\u7ebf'<\/span>,<\/span> type)<\/span>)<\/span>;<\/span>
\n this<\/span>.<\/span>formName =<\/span> ''<\/span>;<\/span>
\n this<\/span>.<\/span>formType =<\/span> ''<\/span>;<\/span>
\n this<\/span>.<\/span>addModal =<\/span> false<\/span>;<\/span>
\n }<\/span><\/p>\n

\/** \u4fdd\u5b58\u7f16\u8f91\u6b4c\u623f（\u6574\u4f53\u5237\u65b0\u6570\u7ec4\u5f15\u7528\u4ee5\u5237\u65b0\u6b4c\u623f\u5bab\u683c） *\/<\/span>
\n updateRoom<\/span>(<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>editIdx >=<\/span> 0<\/span> &&<\/span> this<\/span>.<\/span>editIdx <<\/span> this<\/span>.<\/span>roomList.<\/span>length)<\/span> {<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>editName !==<\/span> ''<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>roomList[<\/span>this<\/span>.<\/span>editIdx]<\/span>.<\/span>name =<\/span> this<\/span>.<\/span>editName;<\/span>
\n }<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>editType !==<\/span> ''<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>roomList[<\/span>this<\/span>.<\/span>editIdx]<\/span>.<\/span>tag =<\/span> this<\/span>.<\/span>editType;<\/span>
\n }<\/span>
\n this<\/span>.<\/span>roomList =<\/span> this<\/span>.<\/span>roomList.<\/span>slice<\/span>(<\/span>)<\/span>;<\/span>
\n }<\/span>
\n this<\/span>.<\/span>editModal =<\/span> false<\/span>;<\/span>
\n }<\/span><\/p>\n

\/** \u89e3\u6563\u6b4c\u623f（\u786e\u8ba4\u5f39\u7a97\u56de\u8c03） *\/<\/span>
\n delRoom<\/span>(<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>delIdx >=<\/span> 0<\/span> &&<\/span> this<\/span>.<\/span>delIdx <<\/span> this<\/span>.<\/span>roomList.<\/span>length)<\/span> {<\/span>
\n this<\/span>.<\/span>roomList.<\/span>splice<\/span>(<\/span>this<\/span>.<\/span>delIdx,<\/span> 1<\/span>)<\/span>;<\/span>
\n }<\/span>
\n this<\/span>.<\/span>delModal =<\/span> false<\/span>;<\/span>
\n }<\/span><\/p>\n

\u6b4c\u623f\u7684\u589e\u5220\u6539（CRUD）\u64cd\u4f5c\u901a\u8fc7\u56db\u4e2a\u65b9\u6cd5\u5b9e\u73b0\u3002openEditRoom \u65b9\u6cd5\u63a5\u6536\u6b4c\u623f\u7d22\u5f15，\u5c06\u5f53\u524d\u6b4c\u623f\u7684\u540d\u79f0\u4e0e\u7c7b\u578b\u56de\u586b\u5230\u7f16\u8f91\u8868\u5355\u72b6\u6001（editName\/editType），\u8bb0\u5f55\u7f16\u8f91\u7d22\u5f15（editIdx）\u5e76\u6253\u5f00\u7f16\u8f91\u5f39\u7a97\u2014\u2014\u8fd9\u4e00"\u5148\u56de\u586b\u540e\u5f39\u51fa"\u7684\u6a21\u5f0f\u786e\u4fdd\u4e86\u7528\u6237\u770b\u5230\u7684\u7f16\u8f91\u8868\u5355\u5df2\u9884\u586b\u4e86\u5f53\u524d\u6570\u636e，\u662f\u5178\u578b\u7684\u7f16\u8f91\u4ea4\u4e92\u6d41\u7a0b\u3002<\/p>\n

saveRoom \u65b9\u6cd5\u5904\u7406\u521b\u5efa\u6b4c\u623f\u903b\u8f91，\u5bf9\u7a7a\u5b57\u6bb5\u505a\u9ed8\u8ba4\u503c\u515c\u5e95：\u540d\u79f0\u4e3a\u7a7a\u65f6\u4f7f\u7528"\u672a\u547d\u540d\u6b4c\u623f"，\u7c7b\u578b\u4e3a\u7a7a\u65f6\u4f7f\u7528"\u638c\u9ea6"\u3002\u65b0\u521b\u5efa\u7684 RoomItem \u4ee5 emoji 🎶 \u4f5c\u4e3a\u56fe\u6807\u3001'0\u5728\u7ebf' \u4f5c\u4e3a\u521d\u59cb\u5728\u7ebf\u4eba\u6570，\u88ab push \u5230 roomList \u6570\u7ec4\u672b\u5c3e\u3002\u7531\u4e8e roomList \u6807\u6ce8\u4e86 @State，\u6570\u7ec4\u5f15\u7528\u53d8\u5316（push \u4f1a\u4fee\u6539\u539f\u6570\u7ec4，ArkUI \u7684 @State \u5bf9\u6570\u7ec4\u65b9\u6cd5\u5982 push \u4f1a\u89e6\u53d1\u66f4\u65b0\u68c0\u6d4b）\u540e UI \u81ea\u52a8\u8ffd\u52a0\u6e32\u67d3\u65b0\u7684\u6b4c\u623f\u5361\u7247\u3002\u6700\u540e\u6e05\u7a7a\u8868\u5355\u72b6\u6001\u5e76\u5173\u95ed\u5f39\u7a97\u3002<\/p>\n

updateRoom \u65b9\u6cd5\u5728\u4fdd\u5b58\u7f16\u8f91\u65f6\u9762\u4e34\u4e00\u4e2a ArkUI \u7684\u72b6\u6001\u66f4\u65b0\u673a\u5236\u7ec6\u8282：\u76f4\u63a5\u4fee\u6539\u6570\u7ec4\u5143\u7d20\u7684\u5c5e\u6027（this.roomList[this.editIdx].name = …）\u53ef\u80fd\u4e0d\u4f1a\u89e6\u53d1 @State \u6570\u7ec4\u7ea7\u522b\u7684\u91cd\u65b0\u6e32\u67d3\u68c0\u6d4b\u3002\u56e0\u6b64\u65b9\u6cd5\u5728\u4fee\u6539\u5c5e\u6027\u540e\u8c03\u7528 this.roomList = this.roomList.slice()，\u901a\u8fc7 slice() \u521b\u5efa\u6570\u7ec4\u7684\u6d45\u62f7\u8d1d\u5e76\u91cd\u65b0\u8d4b\u503c，\u5f3a\u5236\u5237\u65b0\u6570\u7ec4\u5f15\u7528\u4ee5\u89e6\u53d1 UI \u66f4\u65b0\u3002\u8fd9\u662f ArkUI \u58f0\u660e\u5f0f\u72b6\u6001\u7ba1\u7406\u4e2d\u5904\u7406\u6570\u7ec4\u5143\u7d20\u5c5e\u6027\u4fee\u6539\u7684\u5e38\u89c1\u6280\u5de7\u3002<\/p>\n

delRoom \u65b9\u6cd5\u4f7f\u7528 splice \u4ece\u6570\u7ec4\u4e2d\u79fb\u9664\u6307\u5b9a\u7d22\u5f15\u7684\u6b4c\u623f\u6761\u76ee，splice \u4f1a\u4fee\u6539\u539f\u6570\u7ec4\u5e76\u8fd4\u56de\u88ab\u5220\u9664\u7684\u5143\u7d20，ArkUI \u80fd\u591f\u68c0\u6d4b\u5230\u8fd9\u79cd\u6570\u7ec4\u957f\u5ea6\u53d8\u5316\u5e76\u89e6\u53d1\u5217\u8868\u91cd\u65b0\u6e32\u67d3\u3002<\/p>\n

5.6 \u751f\u547d\u5468\u671f\u65b9\u6cd5<\/h4>\n

\/** \u751f\u547d\u5468\u671f：\u542f\u52a8\u547c\u5438\u52a8\u753b\u5b9a\u65f6\u5668（\u6bcf 1000ms \u7ffb\u8f6c breath） *\/<\/span>
\n aboutToAppear<\/span>(<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>timer =<\/span> setInterval<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>breath =<\/span> !<\/span>this<\/span>.<\/span>breath;<\/span>
\n }<\/span>,<\/span> 1000<\/span>)<\/span>;<\/span>
\n }<\/span><\/p>\n

\/** \u751f\u547d\u5468\u671f：\u9500\u6bc1\u65f6\u6e05\u7406\u5b9a\u65f6\u5668 *\/<\/span>
\n aboutToDisappear<\/span>(<\/span>)<\/span> {<\/span>
\n clearInterval<\/span>(<\/span>this<\/span>.<\/span>timer)<\/span>;<\/span>
\n }<\/span><\/p>\n

ArkUI \u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\u56de\u8c03 aboutToAppear \u5728\u7ec4\u4ef6\u521b\u5efa\u540e\u3001build() \u6267\u884c\u524d\u88ab\u8c03\u7528，\u662f\u521d\u59cb\u5316\u5b9a\u65f6\u5668\u3001\u8ba2\u9605\u4e8b\u4ef6\u7b49\u526f\u4f5c\u7528\u7684\u7406\u60f3\u65f6\u673a\u3002\u8fd9\u91cc\u901a\u8fc7 setInterval \u6ce8\u518c\u4e86\u4e00\u4e2a\u6bcf 1000 \u6beb\u79d2\u6267\u884c\u4e00\u6b21\u7684\u56de\u8c03\u51fd\u6570，\u56de\u8c03\u5185\u90e8\u5c06 breath \u72b6\u6001\u7ffb\u8f6c\u2014\u2014\u7531\u4e8e breath \u662f @State \u53d8\u91cf，\u6bcf\u6b21\u7ffb\u8f6c\u90fd\u4f1a\u89e6\u53d1\u4f9d\u8d56\u5b83\u7684 UI \u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3，\u4ece\u800c\u9a71\u52a8\u547c\u5438\u52a8\u753b\u3002aboutToDisappear \u5728\u7ec4\u4ef6\u9500\u6bc1\u524d\u88ab\u8c03\u7528，\u901a\u8fc7 clearInterval \u6e05\u7406\u5b9a\u65f6\u5668，\u907f\u514d\u7ec4\u4ef6\u9500\u6bc1\u540e\u5b9a\u65f6\u5668\u4ecd\u5728\u8fd0\u884c\u5bfc\u81f4\u7684\u5185\u5b58\u6cc4\u6f0f\u4e0e\u65e0\u6548\u72b6\u6001\u66f4\u65b0\u2014\u2014\u8fd9\u662f HarmonyOS \u5e94\u7528\u5f00\u53d1\u4e2d\u8d44\u6e90\u7ba1\u7406\u7684\u6807\u51c6\u5b9e\u8df5\u3002<\/p>\n

\u516d\u3001\u9875\u9762\u4e3b\u6784\u5efa\u4e0e\u5934\u90e8\u5e03\u5c40<\/h3>\n

6.1 \u9875\u9762\u4e3b\u6784\u5efa<\/h4>\n

\/** \u9875\u9762\u4e3b\u6784\u5efa：Stack \u5305\u88f9\u4e3b\u5185\u5bb9\u4e0e\u4e09\u5c42\u5f39\u7a97 *\/<\/span>
\n build<\/span>(<\/span>)<\/span> {<\/span>
\n Stack<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>headerMain<\/span>(<\/span>)<\/span>
\n Divider<\/span>(<\/span>)<\/span>.<\/span>strokeWidth<\/span>(<\/span>1<\/span>)<\/span>.<\/span>color<\/span>(<\/span>COLORS<\/span>.<\/span>line)<\/span>
\n Scroll<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>currentTab ===<\/span> 0<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>tabRoom<\/span>(<\/span>)<\/span>
\n }<\/span> else<\/span> if<\/span> (<\/span>this<\/span>.<\/span>currentTab ===<\/span> 1<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>tabOrder<\/span>(<\/span>)<\/span>
\n }<\/span> else<\/span> if<\/span> (<\/span>this<\/span>.<\/span>currentTab ===<\/span> 2<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>tabCaption<\/span>(<\/span>)<\/span>
\n }<\/span> else<\/span> {<\/span>
\n this<\/span>.<\/span>tabMine<\/span>(<\/span>)<\/span>
\n }<\/span>
\n }<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 14<\/span>,<\/span> right:<\/span> 14<\/span>,<\/span> top:<\/span> 12<\/span>,<\/span> bottom:<\/span> 12<\/span> }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n .<\/span>scrollBar<\/span>(<\/span>BarState.<\/span>Off)<\/span>
\n this<\/span>.<\/span>tabBar<\/span>(<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>height<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

if<\/span> (<\/span>this<\/span>.<\/span>addModal)<\/span> {<\/span>
\n this<\/span>.<\/span>panelAdd<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>addModal =<\/span> false<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>editModal)<\/span> {<\/span>
\n this<\/span>.<\/span>panelEdit<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>editModal =<\/span> false<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>delModal)<\/span> {<\/span>
\n this<\/span>.<\/span>panelDel<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>delModal =<\/span> false<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>height<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>bg)<\/span>
\n }<\/span><\/p>\n

build() \u65b9\u6cd5\u5b9a\u4e49\u4e86\u6574\u4e2a\u9875\u9762\u7684\u7ed3\u6784\u4e0e\u5c42\u7ea7\u5173\u7cfb\u3002\u6700\u5916\u5c42\u662f Stack \u5806\u53e0\u5bb9\u5668\u2014\u2014\u8fd9\u662f\u5b9e\u73b0\u5f39\u7a97\u7cfb\u7edf\u7684\u5173\u952e\u5e03\u5c40\u7b56\u7565\u3002Stack \u7684\u5b50\u5143\u7d20\u6309\u58f0\u660e\u987a\u5e8f\u4ece\u5e95\u5230\u9ad8\u5c42\u53e0，\u540e\u58f0\u660e\u7684\u5b50\u5143\u7d20\u8986\u76d6\u5728\u524d\u8005\u4e4b\u4e0a\u3002\u56e0\u6b64，\u4e3b\u5185\u5bb9 Column（\u5305\u542b\u5934\u90e8\u3001\u6eda\u52a8\u533a\u3001\u5e95\u90e8\u5bfc\u822a）\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u5b50\u5143\u7d20\u4f4d\u4e8e\u5e95\u5c42，\u4e09\u4e2a\u5f39\u7a97\u9762\u677f\u6839\u636e\u5404\u81ea\u7684\u72b6\u6001\u5f00\u5173\u6761\u4ef6\u6e32\u67d3，\u8986\u76d6\u5728\u4e3b\u5185\u5bb9\u4e4b\u4e0a\u3002<\/p>\n

\u4e3b\u5185\u5bb9 Column \u7684\u7ed3\u6784\u4ece\u4e0a\u5230\u4e0b\u4f9d\u6b21\u4e3a：headerMain()（\u5934\u90e8\u6e10\u53d8 Banner+\u641c\u7d22\u6761+chips）\u3001Divider（\u5206\u5272\u7ebf）\u3001Scroll（\u53ef\u6eda\u52a8\u5185\u5bb9\u533a）\u4e0e tabBar()（\u5e95\u90e8\u5bfc\u822a）\u3002Scroll \u8bbe\u7f6e layoutWeight(1) \u5360\u636e\u5934\u90e8\u4e0e\u5e95\u90e8\u5bfc\u822a\u4e4b\u95f4\u7684\u5168\u90e8\u5269\u4f59\u7a7a\u95f4，scrollBar(BarState.Off) \u9690\u85cf\u6eda\u52a8\u6761\u4fdd\u6301\u754c\u9762\u7b80\u6d01\u3002Scroll \u5185\u90e8\u7684 Column \u901a\u8fc7 if-else \u6761\u4ef6\u8bed\u53e5\u6839\u636e currentTab \u7684\u503c\u6e32\u67d3\u5bf9\u5e94\u7684 Tab \u5185\u5bb9\u2014\u2014\u8fd9\u662f ArkUI \u58f0\u660e\u5f0f\u6761\u4ef6\u6e32\u67d3\u7684\u5178\u578b\u7528\u6cd5，\u53ea\u6709\u5339\u914d\u6761\u4ef6\u7684 Builder \u4f1a\u88ab\u6267\u884c\u5e76\u6e32\u67d3，\u5176\u4ed6 Tab \u7684 UI \u4e0d\u53c2\u4e0e\u6784\u5efa，\u4fdd\u8bc1\u4e86\u6e32\u67d3\u6548\u7387\u3002<\/p>\n

\u4e09\u4e2a\u5f39\u7a97\u9762\u677f（panelAdd\/panelEdit\/panelDel）\u5404\u81ea\u7531\u5bf9\u5e94\u7684\u5e03\u5c14\u72b6\u6001\u63a7\u5236\u6e32\u67d3：\u5f53 addModal \u4e3a true \u65f6\u521b\u5efa\u6b4c\u623f\u5f39\u7a97\u6e32\u67d3\u5728 Stack \u9876\u5c42，\u4f9d\u6b21\u7c7b\u63a8\u3002\u6bcf\u4e2a\u5f39\u7a97 Builder \u63a5\u6536\u4e00\u4e2a onClose \u56de\u8c03\u51fd\u6570\u4f5c\u4e3a\u53c2\u6570（\u8fd9\u91cc\u4f20\u5165\u7684\u662f\u5c06\u5bf9\u5e94\u72b6\u6001\u7f6e false \u7684\u7bad\u5934\u51fd\u6570），\u5f39\u7a97\u5185\u90e8\u70b9\u51fb\u906e\u7f69\u6216\u53d6\u6d88\u6309\u94ae\u65f6\u8c03\u7528\u8be5\u56de\u8c03\u5173\u95ed\u81ea\u8eab\u3002\u8fd9\u79cd"\u72b6\u6001\u9a71\u52a8\u6e32\u67d3+\u56de\u8c03\u5173\u95ed"\u7684\u6a21\u5f0f\u7b80\u6d01\u800c\u9ad8\u6548，\u662f ArkUI \u4e2d\u5b9e\u73b0\u6a21\u6001\u5f39\u7a97\u7684\u63a8\u8350\u5b9e\u8df5\u3002<\/p>\n

6.2 \u5934\u90e8\u6e10\u53d8Banner\u4e0e\u641c\u7d22\u6761<\/h4>\n

\/** \u5934\u90e8：\u9876\u90e8\u6e10\u53d8 Banner（\u6b22\u5531\u95ee\u5019\u8bed+\u5728\u7ebf\u9ea6\u53cb\u6570）+ \u641c\u7d22\u6761 + \u6a2a\u6ed1\u623f\u95f4\u7c7b\u578b chips *\/<\/span>
\n @<\/span>Builder<\/span><\/span>
\n headerMain<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 12<\/span> }<\/span>)<\/span> {<\/span>
\n \/\/ \u6e10\u53d8 Banner：\u6b22\u5531\u95ee\u5019\u8bed + \u5728\u7ebf\u9ea6\u53cb\u6570<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 5<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u665a\u4e0a\u597d，\u5f00\u55d3\u7684\u4eba'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>16<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Text<\/span>(<\/span>'\u4eca\u591c 3.2 \u4e07\u95f4\u6b4c\u623f\u6b63\u5728\u6b22\u5531 \u00b7 \u4f60\u7684\u9ea6\u4f4d\u5df2\u9884\u7559'<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>opacity<\/span>(<\/span>0.72<\/span>)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span><\/p>\n

Column<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🎤'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>22<\/span>)<\/span>.<\/span>opacity<\/span>(<\/span>this<\/span>.<\/span>breath ?<\/span> 1<\/span> :<\/span> 0.6<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>44<\/span>)<\/span>.<\/span>height<\/span>(<\/span>44<\/span>)<\/span>.<\/span>borderRadius<\/span>(<\/span>22<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>purpleD)<\/span>
\n .<\/span>justifyContent<\/span>(<\/span>FlexAlign.<\/span>Center)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

Row<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🎧 \u5728\u7ebf\u9ea6\u53cb 26 \u4e07'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>opacity<\/span>(<\/span>0.9<\/span>)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 8<\/span>,<\/span> right:<\/span> 8<\/span>,<\/span> top:<\/span> 3<\/span>,<\/span> bottom:<\/span> 3<\/span> }<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>purpleD)<\/span>.<\/span>borderRadius<\/span>(<\/span>8<\/span>)<\/span>
\n Text<\/span>(<\/span>'🔥 \u9ea6\u738b\u6392\u4f4d\u8d5b\u8fdb\u884c\u4e2d'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>opacity<\/span>(<\/span>0.9<\/span>)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 8<\/span>,<\/span> right:<\/span> 8<\/span>,<\/span> top:<\/span> 3<\/span>,<\/span> bottom:<\/span> 3<\/span> }<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>purpleD)<\/span>.<\/span>borderRadius<\/span>(<\/span>8<\/span>)<\/span>
\n Text<\/span>(<\/span>'💎 \u9ec4\u91d1\u9ea6\u9738\u7279\u6743'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>purpleD)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 8<\/span>,<\/span> right:<\/span> 8<\/span>,<\/span> top:<\/span> 3<\/span>,<\/span> bottom:<\/span> 3<\/span> }<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>gold)<\/span>.<\/span>borderRadius<\/span>(<\/span>8<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>16<\/span>)<\/span>.<\/span>borderRadius<\/span>(<\/span>14<\/span>)<\/span>
\n .<\/span>linearGradient<\/span>(<\/span>{<\/span> angle:<\/span> 135<\/span>,<\/span> colors:<\/span> [<\/span>[<\/span>COLORS<\/span>.<\/span>purpleD,<\/span> 0<\/span>]<\/span>,<\/span> [<\/span>COLORS<\/span>.<\/span>purple,<\/span> 1<\/span>]<\/span>]<\/span> }<\/span>)<\/span><\/p>\n

headerMain Builder \u6784\u5efa\u4e86\u9875\u9762\u7684\u5934\u90e8\u533a\u57df，\u7531\u6e10\u53d8 Banner\u3001\u641c\u7d22\u6761\u548c\u6a2a\u6ed1 chips \u4e09\u90e8\u5206\u7ec4\u6210\u3002\u6e10\u53d8 Banner \u662f\u5934\u90e8\u7684\u89c6\u89c9\u7126\u70b9，\u901a\u8fc7 linearGradient \u5c5e\u6027\u8bbe\u7f6e 135 \u5ea6\u5bf9\u89d2\u6e10\u53d8，\u4ece\u6df1\u7d2b purpleD（#7C3AED）\u5230\u4eae\u7d2b purple（#A855F7），\u6a21\u62df\u821e\u53f0\u805a\u5149\u706f\u7684\u7167\u5c04\u6548\u679c\u3002Banner \u5185\u90e8\u5206\u4e3a\u4e24\u884c：\u4e0a\u884c\u662f\u6b22\u8fce\u8bed\u4e0e\u526f\u6807\u9898\u7684\u5de6\u53f3\u5e03\u5c40，\u5de6\u4fa7 Column \u901a\u8fc7 layoutWeight(1) \u5360\u636e\u5269\u4f59\u7a7a\u95f4，\u53f3\u4fa7\u7684\u5706\u5f62 emoji \u5bb9\u5668\u901a\u8fc7 this.breath ? 1 : 0.6 \u4e09\u5143\u8868\u8fbe\u5f0f\u9a71\u52a8\u900f\u660e\u5ea6\u547c\u5438\u52a8\u753b，\u4f7f 🎤 \u56fe\u6807\u6bcf\u79d2\u95ea\u70c1\u4e00\u6b21\u3002<\/p>\n

\u6b22\u8fce\u8bed"\u665a\u4e0a\u597d，\u5f00\u55d3\u7684\u4eba"\u4f7f\u7528\u4e86 K \u6b4c\u573a\u666f\u7279\u6709\u7684\u62df\u4eba\u5316\u79f0\u547c，\u526f\u6807\u9898"\u4eca\u591c 3.2 \u4e07\u95f4\u6b4c\u623f\u6b63\u5728\u6b22\u5531\u00b7\u4f60\u7684\u9ea6\u4f4d\u5df2\u9884\u7559"\u4f20\u9012\u5b9e\u65f6\u6d3b\u8dc3\u5ea6\u4fe1\u606f\u4e0e\u53c2\u4e0e\u9080\u8bf7\u3002\u4e09\u4e2a\u6807\u7b7e chip \u5206\u522b\u5c55\u793a\u5728\u7ebf\u9ea6\u53cb\u6570\u3001\u6392\u4f4d\u8d5b\u72b6\u6001\u4e0e\u4f1a\u5458\u7279\u6743，\u5176\u4e2d\u524d\u4e24\u4e2a\u4f7f\u7528\u6df1\u7d2b\u5e95\u767d\u5b57（purpleD \u5e95 + title \u6587\u5b57\u8272），\u7b2c\u4e09\u4e2a"\u9ec4\u91d1\u9ea6\u9738\u7279\u6743"\u53cd\u8f6c\u914d\u8272\u4e3a\u91d1\u5e95\u7d2b\u5b57（gold \u5e95 + purpleD \u6587\u5b57\u8272），\u5f62\u6210\u89c6\u89c9\u5c42\u7ea7\u5dee\u5f02\u2014\u2014\u91d1\u8272\u6807\u7b7e\u66f4\u9192\u76ee，\u6697\u793a\u4ed8\u8d39\u7279\u6743\u7684\u7a00\u7f3a\u6027\u3002\u6807\u7b7e\u901a\u8fc7 maxLines(1) \u4e0e textOverflow({ overflow: TextOverflow.Ellipsis }) \u786e\u4fdd\u6587\u5b57\u6ea2\u51fa\u65f6\u4ee5\u7701\u7565\u53f7\u622a\u65ad，\u9632\u6b62\u5185\u5bb9\u6ea2\u51fa\u7834\u574f\u5e03\u5c40\u3002<\/p>\n

\/\/ \u641c\u7d22\u6761（\u53f3\u4fa7\u8bed\u97f3\u5165\u53e3\u8df3\u8f6c AI \u5b57\u5e55 Tab）<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🔍'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>14<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u641c\u7d22\u6b4c\u623f \/ \u9ea6\u53cb \/ \u6b4c\u66f2 \/ \u5408\u5531'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n Text<\/span>(<\/span>'🎙'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>14<\/span>)<\/span>.<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>currentTab =<\/span> 2<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 14<\/span>,<\/span> right:<\/span> 14<\/span>,<\/span> top:<\/span> 10<\/span>,<\/span> bottom:<\/span> 10<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>20<\/span>)<\/span><\/p>\n

\u641c\u7d22\u6761\u4ee5 Row \u5bb9\u5668\u5b9e\u73b0\u6a2a\u5411\u5e03\u5c40，\u5de6\u4fa7 🔍 \u641c\u7d22\u56fe\u6807\u3001\u4e2d\u95f4\u5360\u4f4d\u63d0\u793a\u6587\u5b57（text3 \u7070\u7d2b\u8272，\u5f31\u5316\u89c6\u89c9\u6743\u91cd）\u3001\u53f3\u4fa7 🎙 \u9ea6\u514b\u98ce\u56fe\u6807\u3002\u63d0\u793a\u6587\u5b57\u4f7f\u7528 layoutWeight(1) \u586b\u5145\u5269\u4f59\u7a7a\u95f4\u5e76\u8bbe\u7f6e\u5355\u884c\u7701\u7565\u3002\u53f3\u4fa7\u9ea6\u514b\u98ce\u56fe\u6807\u7ed1\u5b9a\u4e86 onClick \u70b9\u51fb\u4e8b\u4ef6，\u70b9\u51fb\u540e\u5c06 currentTab \u8bbe\u4e3a 2（AI \u5b57\u5e55 Tab \u7d22\u5f15），\u5b9e\u73b0\u4ece\u641c\u7d22\u680f\u5230 AI \u5b57\u5e55\u529f\u80fd\u7684\u5feb\u6377\u8df3\u8f6c\u2014\u2014\u8fd9\u4e00\u8bbe\u8ba1\u5de7\u5999\u5730\u5c06\u8bed\u97f3\u8f93\u5165\u5165\u53e3\u4e0e AI \u5b57\u5e55\u529f\u80fd\u5173\u8054，\u7528\u6237\u60f3\u7528\u8bed\u97f3\u641c\u7d22\u65f6\u81ea\u7136\u88ab\u5f15\u5bfc\u5230\u5b57\u5e55\u529f\u80fd\u9875，\u5f62\u6210\u529f\u80fd\u95f4\u7684\u6709\u673a\u4e32\u8054\u3002\u641c\u7d22\u6761\u6574\u4f53\u4f7f\u7528 card \u5e95\u8272\u4e0e borderRadius(20) \u5927\u5706\u89d2，\u5448\u73b0\u51fa\u80f6\u56ca\u72b6\u7684\u641c\u7d22\u8f93\u5165\u5916\u89c2\u3002<\/p>\n

6.3 \u6a2a\u6ed1\u623f\u95f4\u7c7b\u578bchips<\/h4>\n

\/\/ \u6a2a\u6ed1\u623f\u95f4\u7c7b\u578b chips<\/span>
\n Scroll<\/span>(<\/span>)<\/span> {<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n ForEach<\/span>(<\/span>CATE_TAGS<\/span>,<\/span> (<\/span>tg:<\/span> string<\/span>,<\/span> idx:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
\n Text<\/span>(<\/span>tg)<\/span>.<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>this<\/span>.<\/span>cateIdx ===<\/span> idx ?<\/span> COLORS<\/span>.<\/span>cyan :<\/span> COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 13<\/span>,<\/span> right:<\/span> 13<\/span>,<\/span> top:<\/span> 6<\/span>,<\/span> bottom:<\/span> 6<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>this<\/span>.<\/span>cateIdx ===<\/span> idx ?<\/span> COLORS<\/span>.<\/span>chip :<\/span> COLORS<\/span>.<\/span>card)<\/span>
\n .<\/span>borderRadius<\/span>(<\/span>13<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>cateIdx =<\/span> idx;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>,<\/span> (<\/span>tg:<\/span> string<\/span>)<\/span> =><\/span> tg)<\/span>
\n }<\/span>
\n }<\/span>
\n .<\/span>scrollable<\/span>(<\/span>ScrollDirection.<\/span>Horizontal)<\/span>
\n .<\/span>scrollBar<\/span>(<\/span>BarState.<\/span>Off)<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 14<\/span>,<\/span> right:<\/span> 14<\/span>,<\/span> top:<\/span> 12<\/span>,<\/span> bottom:<\/span> 12<\/span> }<\/span>)<\/span>
\n .<\/span>linearGradient<\/span>(<\/span>{<\/span> angle:<\/span> 180<\/span>,<\/span> colors:<\/span> [<\/span>[<\/span>COLORS<\/span>.<\/span>chip,<\/span> 0<\/span>]<\/span>,<\/span> [<\/span>COLORS<\/span>.<\/span>bg,<\/span> 1<\/span>]<\/span>]<\/span> }<\/span>)<\/span>
\n }<\/span><\/p>\n

\u6a2a\u6ed1 chips \u533a\u57df\u4f7f\u7528\u6c34\u5e73\u6eda\u52a8\u7684 Scroll \u5bb9\u5668\u5305\u88f9 Row，\u901a\u8fc7 scrollable(ScrollDirection.Horizontal) \u542f\u7528\u6a2a\u5411\u6eda\u52a8\u3002ForEach \u904d\u5386 CATE_TAGS \u6570\u7ec4\u7684\u516b\u4e2a\u5206\u7c7b\u6807\u7b7e，\u6bcf\u4e2a\u6807\u7b7e\u7684 fontColor \u4e0e backgroundColor \u901a\u8fc7\u4e09\u5143\u8868\u8fbe\u5f0f\u6839\u636e cateIdx === idx \u5224\u65ad\u662f\u5426\u9009\u4e2d：\u9009\u4e2d\u6001\u4f7f\u7528\u9713\u8679\u9752\u6587\u5b57（cyan）+ \u6807\u7b7e\u5e95\u8272（chip），\u672a\u9009\u4e2d\u6001\u4f7f\u7528\u8f85\u52a9\u6587\u5b57\u8272（sub）+ \u5361\u7247\u5e95\u8272（card），\u5f62\u6210\u6e05\u6670\u4f46\u4e0d\u523a\u773c\u7684\u9009\u4e2d\u5bf9\u6bd4\u3002\u7b2c\u4e09\u4e2a\u53c2\u6570 (tg: string) => tg \u662f ForEach \u7684\u952e\u503c\u751f\u6210\u51fd\u6570，\u4f7f\u7528\u6807\u7b7e\u6587\u672c\u672c\u8eab\u4f5c\u4e3a\u552f\u4e00\u952e，\u786e\u4fdd\u5217\u8868\u6e32\u67d3\u65f6\u7684\u5143\u7d20\u6b63\u786e\u590d\u7528\u3002<\/p>\n

\u6574\u4e2a\u5934\u90e8\u533a\u57df\u7684\u5916\u5c42 Column \u4e5f\u4f7f\u7528\u4e86 linearGradient \u8bbe\u7f6e 180 \u5ea6\u7eb5\u5411\u6e10\u53d8，\u4ece chip（#2A1A44）\u6e10\u53d8\u5230 bg（#120A1A），\u4f7f\u5934\u90e8\u4e0e\u4e0b\u65b9\u5185\u5bb9\u533a\u7684\u8fc7\u6e21\u66f4\u52a0\u81ea\u7136\u3002\u8fd9\u79cd"\u53cc\u91cd\u6e10\u53d8"\u8bbe\u8ba1\u2014\u2014\u5934\u90e8\u533a\u57df\u7eb5\u5411\u6e10\u53d8+\u5185\u90e8 Banner \u5bf9\u89d2\u6e10\u53d8\u2014\u2014\u5728\u6df1\u8272\u4e3b\u9898\u4e2d\u6784\u5efa\u4e86\u4e30\u5bcc\u7684\u5c42\u6b21\u611f\u3002<\/p>\n

\u4e03\u3001\u56db\u5927Tab\u9875\u9762\u8be6\u89e3<\/h3>\n

7.1 \u6b4c\u623fTab：\u5206\u7c7b\u5bab\u683c\u4e0e\u9ea6\u9738\u6a2a\u6ed1<\/h4>\n

\/** \u623f\u95f4 Tab：\u6b4c\u623f\u5206\u7c7b\u5bab\u683c\u5165\u53e3 + \u70ed\u95e8\u9ea6\u9738\u6a2a\u6ed1\u5927\u5361 *\/<\/span>
\n @<\/span>Builder<\/span><\/span>
\n tabRoom<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 12<\/span> }<\/span>)<\/span> {<\/span>
\n \/\/ 1. \u6b4c\u623f\u5e7f\u573a\u6807\u9898\u884c + \u521b\u5efa\u5165\u53e3<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🎤 \u6b4c\u623f\u5e7f\u573a'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>this<\/span>.<\/span>roomList.<\/span>length.<\/span>toString<\/span>(<\/span>)<\/span> +<\/span> ' \u95f4\u6b4c\u623f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n Text<\/span>(<\/span>'+ \u521b\u5efa'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>cyan)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 9<\/span>,<\/span> right:<\/span> 9<\/span>,<\/span> top:<\/span> 4<\/span>,<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>8<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>addModal =<\/span> true<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\u6b4c\u623f Tab \u7684\u7b2c\u4e00\u4e2a\u533a\u5757\u662f\u6807\u9898\u884c，\u5de6\u4fa7"🎤 \u6b4c\u623f\u5e7f\u573a"\u6807\u9898\u4f7f\u7528\u7c97\u4f53\u767d\u8272\u6587\u5b57，\u53f3\u4fa7\u4f9d\u6b21\u663e\u793a\u6b4c\u623f\u603b\u6570\u4e0e"+\u521b\u5efa"\u6309\u94ae\u3002\u603b\u6570\u901a\u8fc7 this.roomList.length.toString() \u52a8\u6001\u8ba1\u7b97，\u5f53\u7528\u6237\u521b\u5efa\u6216\u89e3\u6563\u6b4c\u623f\u65f6\u6570\u5b57\u5b9e\u65f6\u66f4\u65b0\u3002"+\u521b\u5efa"\u6309\u94ae\u7ed1\u5b9a onClick \u4e8b\u4ef6\u5c06 addModal \u7f6e true，\u89e6\u53d1\u521b\u5efa\u6b4c\u623f\u5f39\u7a97\u7684\u6761\u4ef6\u6e32\u67d3\u3002\u6807\u9898\u884c\u4f7f\u7528 Column().layoutWeight(1) \u5728\u5de6\u53f3\u5185\u5bb9\u4e4b\u95f4\u63d2\u5165\u5f39\u6027\u5360\u4f4d，\u5b9e\u73b0\u4e24\u7aef\u5bf9\u9f50\u5e03\u5c40\u3002<\/p>\n

\/\/ 2. \u6b4c\u623f\u5206\u7c7b\u5bab\u683c（Flex \u6362\u884c\u53cc\u5217\u5bab\u683c\u5165\u53e3）<\/span>
\n Flex<\/span>(<\/span>{<\/span> wrap:<\/span> FlexWrap.<\/span>Wrap,<\/span> justifyContent:<\/span> FlexAlign.<\/span>SpaceBetween }<\/span>)<\/span> {<\/span>
\n ForEach<\/span>(<\/span>this<\/span>.<\/span>roomList,<\/span> (<\/span>item:<\/span> RoomItem,<\/span> idx:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n \/\/ \u623f\u95f4\u5c01\u9762\u6e10\u53d8\u5757（emoji \u56fe\u6807 + LIVE \u89d2\u6807 + \u6807\u7b7e）<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>item.<\/span>icon)<\/span>.<\/span>fontSize<\/span>(<\/span>30<\/span>)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>item.<\/span>tag)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>cyan)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 5<\/span>,<\/span> right:<\/span> 5<\/span>,<\/span> top:<\/span> 1<\/span>,<\/span> bottom:<\/span> 1<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>purpleD)<\/span>.<\/span>borderRadius<\/span>(<\/span>5<\/span>)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>'LIVE'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>pink)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 8<\/span> }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>height<\/span>(<\/span>88<\/span>)<\/span>.<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n .<\/span>linearGradient<\/span>(<\/span>{<\/span> angle:<\/span> 145<\/span>,<\/span> colors:<\/span> [<\/span>[<\/span>COLORS<\/span>.<\/span>purpleD,<\/span> 0<\/span>]<\/span>,<\/span> [<\/span>COLORS<\/span>.<\/span>purple,<\/span> 1<\/span>]<\/span>]<\/span> }<\/span>)<\/span><\/p>\n

\/\/ \u623f\u95f4\u540d + \u5728\u7ebf\u4eba\u6570<\/span>
\n Text<\/span>(<\/span>item.<\/span>name)<\/span>.<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n Text<\/span>(<\/span>'👥 '<\/span> +<\/span> item.<\/span>online)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span><\/p>\n

\/\/ \u7f16\u8f91 \/ \u89e3\u6563\u8ff7\u4f60\u64cd\u4f5c\u884c<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 6<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u7f16\u8f91'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 4<\/span>,<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>6<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>openEditRoom<\/span>(<\/span>idx)<\/span>;<\/span>
\n }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u89e3\u6563'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>pink)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 4<\/span>,<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>6<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>delIdx =<\/span> idx;<\/span>
\n this<\/span>.<\/span>delModal =<\/span> true<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'48%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>10<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span>
\n }<\/span>,<\/span> (<\/span>item:<\/span> RoomItem)<\/span> =><\/span> item.<\/span>name +<\/span> item.<\/span>tag)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\u6b4c\u623f\u5206\u7c7b\u5bab\u683c\u4f7f\u7528 Flex \u5e03\u5c40\u5bb9\u5668\u5e76\u8bbe\u7f6e wrap: FlexWrap.Wrap（\u5141\u8bb8\u6362\u884c）\u4e0e justifyContent: FlexAlign.SpaceBetween（\u4e24\u7aef\u5bf9\u9f50），\u5b9e\u73b0\u6bcf\u884c\u4e24\u5217\u7684\u5bab\u683c\u5e03\u5c40\u3002\u6bcf\u4e2a\u6b4c\u623f\u5361\u7247\u5bbd\u5ea6\u8bbe\u4e3a 48%（\u800c\u975e 50%），SpaceBetween \u5bf9\u9f50\u4f1a\u5728\u4e24\u4e2a\u5361\u7247\u4e4b\u95f4\u81ea\u52a8\u5206\u914d\u5269\u4f59\u7684 4% \u7a7a\u95f4\u4f5c\u4e3a\u95f4\u8ddd\u3002\u5361\u7247\u5185\u90e8\u4ece\u4e0a\u5230\u4e0b\u5206\u4e3a\u56db\u4e2a\u533a\u5757：\u5c01\u9762\u6e10\u53d8\u5757\u3001\u623f\u95f4\u540d\u3001\u5728\u7ebf\u4eba\u6570\u3001\u64cd\u4f5c\u6309\u94ae\u884c\u3002<\/p>\n

\u5c01\u9762\u6e10\u53d8\u5757\u662f\u5361\u7247\u7684\u89c6\u89c9\u6838\u5fc3，\u9ad8\u5ea6 88\u3001\u4f7f\u7528 145 \u5ea6\u6e10\u53d8（\u6bd4\u6807\u51c6 135 \u5ea6\u7565\u504f），\u5185\u542b\u5927\u53f7 emoji \u56fe\u6807（fontSize(30)）\u3001\u5e95\u90e8\u7684\u6807\u7b7e chip（\u638c\u9ea6\/\u6392\u9ea6\/\u8fde\u9ea6）\u4e0e \u201cLIVE\u201d \u89d2\u6807\u3002\u6807\u7b7e\u4f7f\u7528\u9752\u8272\u6587\u5b57+\u6df1\u7d2b\u5e95，LIVE \u4f7f\u7528\u7c89\u8272\u7c97\u4f53\u2014\u2014\u5728\u6df1\u8272\u80cc\u666f\u4e0a\u7c89\u8272\u6bd4\u9752\u8272\u66f4\u9192\u76ee，\u6697\u793a\u76f4\u64ad\u8fdb\u884c\u4e2d\u7684\u6d3b\u8dc3\u72b6\u6001\u3002\u5c01\u9762\u5757\u5185\u7684 Column().layoutWeight(1) \u5728 emoji \u4e0e\u5e95\u90e8\u6807\u7b7e\u884c\u4e4b\u95f4\u586b\u5145\u5f39\u6027\u7a7a\u95f4，\u5c06 emoji \u63a8\u5230\u9876\u90e8\u3001\u6807\u7b7e\u884c\u6c89\u5230\u5e95\u90e8\u3002<\/p>\n

\u64cd\u4f5c\u6309\u94ae\u884c\u7684"\u7f16\u8f91"\u4e0e"\u89e3\u6563"\u5206\u522b\u7ed1\u5b9a\u4e0d\u540c\u7684\u70b9\u51fb\u4e8b\u4ef6：\u7f16\u8f91\u8c03\u7528 openEditRoom(idx) \u56de\u586b\u6570\u636e\u5e76\u6253\u5f00\u7f16\u8f91\u5f39\u7a97，\u89e3\u6563\u5148\u5c06 delIdx \u8d4b\u503c\u4e3a\u5f53\u524d\u7d22\u5f15\u518d\u6253\u5f00\u89e3\u6563\u786e\u8ba4\u5f39\u7a97\u2014\u2014\u89e3\u6563\u64cd\u4f5c\u9700\u8981\u4e8c\u6b21\u786e\u8ba4\u4ee5\u9632\u6b62\u8bef\u64cd\u4f5c，\u8fd9\u662f\u6d89\u53ca\u4e0d\u53ef\u9006\u64cd\u4f5c\u65f6\u7684\u6807\u51c6\u4ea4\u4e92\u6a21\u5f0f\u3002ForEach \u7684\u952e\u503c\u751f\u6210\u51fd\u6570\u4f7f\u7528 item.name + item.tag（\u623f\u95f4\u540d+\u6807\u7b7e\u7684\u7ec4\u5408）\u4f5c\u4e3a\u552f\u4e00\u952e，\u786e\u4fdd\u6bcf\u4e2a\u5361\u7247\u7684\u8eab\u4efd\u53ef\u8ffd\u8e2a\u3002<\/p>\n

\/\/ 3. \u70ed\u95e8\u9ea6\u9738\u6807\u9898\u884c<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🔥 \u70ed\u95e8\u9ea6\u9738'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u5de6\u53f3\u6a2a\u6ed1\u56f4\u89c2'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\/\/ 4. \u70ed\u95e8\u9ea6\u9738\u6a2a\u6ed1\u5927\u5361（\u6a2a\u5411 Scroll + \u56fa\u5b9a\u5bbd\u4eba\u7269\u5927\u5361）<\/span>
\n Scroll<\/span>(<\/span>)<\/span> {<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n ForEach<\/span>(<\/span>this<\/span>.<\/span>singerList,<\/span> (<\/span>s:<\/span> SingerItem)<\/span> =><\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n \/\/ \u6e10\u53d8\u5934\u50cf\u5706\u5757（\u547c\u5438\u52a8\u753b）<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>s.<\/span>avatar)<\/span>.<\/span>fontSize<\/span>(<\/span>26<\/span>)<\/span>.<\/span>opacity<\/span>(<\/span>this<\/span>.<\/span>breath ?<\/span> 1<\/span> :<\/span> 0.75<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>52<\/span>)<\/span>.<\/span>height<\/span>(<\/span>52<\/span>)<\/span>.<\/span>borderRadius<\/span>(<\/span>26<\/span>)<\/span>
\n .<\/span>linearGradient<\/span>(<\/span>{<\/span> angle:<\/span> 135<\/span>,<\/span> colors:<\/span> [<\/span>[<\/span>COLORS<\/span>.<\/span>purpleD,<\/span> 0<\/span>]<\/span>,<\/span> [<\/span>COLORS<\/span>.<\/span>pink,<\/span> 1<\/span>]<\/span>]<\/span> }<\/span>)<\/span>
\n .<\/span>justifyContent<\/span>(<\/span>FlexAlign.<\/span>Center)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span><\/p>\n

\/\/ \u6635\u79f0 + \u7b49\u7ea7<\/span>
\n Text<\/span>(<\/span>s.<\/span>name)<\/span>.<\/span>fontSize<\/span>(<\/span>12<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n Text<\/span>(<\/span>s.<\/span>level)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>gold)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span><\/p>\n

\/\/ \u7c89\u4e1d + \u6210\u540d\u66f2<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 3<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u7c89\u4e1d '<\/span> +<\/span> s.<\/span>fans)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u6210\u540d\u66f2 '<\/span> +<\/span> s.<\/span>hit)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span><\/p>\n

\/\/ \u56f4\u89c2\u6309\u94ae<\/span>
\n Text<\/span>(<\/span>'\u56f4\u89c2'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 16<\/span>,<\/span> right:<\/span> 16<\/span>,<\/span> top:<\/span> 5<\/span>,<\/span> bottom:<\/span> 5<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>purple)<\/span>.<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>132<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>12<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span>
\n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span>
\n }<\/span>,<\/span> (<\/span>s:<\/span> SingerItem)<\/span> =><\/span> s.<\/span>name)<\/span>
\n }<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 2<\/span>,<\/span> right:<\/span> 2<\/span> }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>scrollable<\/span>(<\/span>ScrollDirection.<\/span>Horizontal)<\/span>
\n .<\/span>scrollBar<\/span>(<\/span>BarState.<\/span>Off)<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span><\/p>\n

\u70ed\u95e8\u9ea6\u9738\u533a\u5757\u4f7f\u7528\u6a2a\u5411 Scroll \u5bb9\u5668\u5b9e\u73b0\u6a2a\u6ed1\u5927\u5361\u5217\u8868，\u6bcf\u5f20\u5361\u7247\u56fa\u5b9a\u5bbd\u5ea6 132 \u50cf\u7d20\u3002\u5361\u7247\u5185\u90e8\u4ece\u4e0a\u5230\u4e0b\u4f9d\u6b21\u4e3a：\u6e10\u53d8\u5934\u50cf\u5706\u5757\u3001\u6635\u79f0\u3001\u7b49\u7ea7\u3001\u7c89\u4e1d\u4e0e\u6210\u540d\u66f2\u4fe1\u606f\u3001"\u56f4\u89c2"\u6309\u94ae\u3002\u5934\u50cf\u5706\u5757\u4f7f\u7528 135 \u5ea6\u6e10\u53d8\u4ece\u6df1\u7d2b\u5230\u6b22\u5531\u7c89，emoji \u5934\u50cf\u7684\u900f\u660e\u5ea6\u53d7 breath \u72b6\u6001\u9a71\u52a8\u5728 1.0 \u4e0e 0.75 \u4e4b\u95f4\u6ce2\u52a8，\u5f62\u6210\u547c\u5438\u95ea\u70c1\u6548\u679c\u2014\u2014\u8fd9\u4e0e\u5934\u90e8 Banner \u4e2d\u7684 🎤 \u56fe\u6807\u547c\u5438\u52a8\u753b\u5171\u4eab\u540c\u4e00\u4e2a breath \u72b6\u6001，\u5b9e\u73b0\u4e86\u5168\u5c40\u8054\u52a8\u7684\u52a8\u6548\u8282\u594f\u3002<\/p>\n

\u7b49\u7ea7\u6587\u672c\u4f7f\u7528\u91d1\u8272（COLORS.gold），\u5728\u6df1\u8272\u5361\u7247\u80cc\u666f\u4e0a\u5f62\u6210\u4e0e\u7d2b\u8272\u6e10\u53d8\u5934\u50cf\u7684\u4e92\u8865\u8272\u5bf9\u6bd4\u3002\u7c89\u4e1d\u4e0e\u6210\u540d\u66f2\u4f7f\u7528\u66f4\u5c0f\u7684\u5b57\u53f7（8）\u4e0e\u66f4\u5f31\u7684\u6587\u5b57\u8272（sub \u4e0e text3），\u5f62\u6210"\u4e3b\u540d\u2014\u7b49\u7ea7\u2014\u8f85\u52a9\u4fe1\u606f"\u7684\u4e09\u7ea7\u89c6\u89c9\u5c42\u6b21\u3002"\u56f4\u89c2"\u6309\u94ae\u4f7f\u7528\u7d2b\u8272\u80cc\u666f+\u767d\u8272\u6587\u5b57，\u662f\u5361\u7247\u4e2d\u552f\u4e00\u7684\u884c\u52a8\u53ec\u5524\u5143\u7d20，\u5bbd\u5ea6\u901a\u8fc7 padding \u7684\u5de6\u53f3 16 \u6491\u5f00\u4e3a\u80f6\u56ca\u5f62\u6309\u94ae\u3002\u5361\u7247\u6574\u4f53\u4f7f\u7528 alignItems(HorizontalAlign.Center) \u4f7f\u6240\u6709\u5b50\u5143\u7d20\u6c34\u5e73\u5c45\u4e2d\u5bf9\u9f50，\u4fdd\u6301\u4e86\u6a2a\u6ed1\u5217\u8868\u7684\u6574\u9f50\u89c6\u89c9\u8282\u594f\u3002<\/p>\n

7.2 \u70b9\u5531Tab：\u70ed\u6b4c\u699c\u5355\u4e0e\u67f1\u72b6\u56fe<\/h4>\n

\/** \u70b9\u5531 Tab：\u5927\u7f16\u53f7\u70ed\u6b4c\u70b9\u5531\u699c + \u6708\u5ea6\u6b22\u5531\u65f6\u957f\u67f1\u72b6\u56fe *\/<\/span>
\n @<\/span>Builder<\/span><\/span>
\n tabOrder<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 12<\/span> }<\/span>)<\/span> {<\/span>
\n \/\/ \u699c\u5355\u6807\u9898\u884c<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🎼 \u70ed\u6b4c\u70b9\u5531\u699c'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u6bcf\u5c0f\u65f6\u5237\u65b0 \u00b7 \u70b9\u6b4c\u5373\u5531'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\/\/ \u5927\u7f16\u53f7\u699c（\u524d\u4e09\u540d\u91d1\/\u7d2b\/\u7c89\u9ad8\u4eae）<\/span>
\n ForEach<\/span>(<\/span>this<\/span>.<\/span>songList,<\/span> (<\/span>item:<\/span> SongItem,<\/span> idx:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>item.<\/span>rank)<\/span>.<\/span>fontSize<\/span>(<\/span>idx <<\/span> 3<\/span> ?<\/span> 24<\/span> :<\/span> 17<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>idx ===<\/span> 0<\/span> ?<\/span> COLORS<\/span>.<\/span>gold :<\/span> (<\/span>idx ===<\/span> 1<\/span> ?<\/span> COLORS<\/span>.<\/span>purple :<\/span> (<\/span>idx ===<\/span> 2<\/span> ?<\/span> COLORS<\/span>.<\/span>pink :<\/span> COLORS<\/span>.<\/span>text3)<\/span>)<\/span>)<\/span>
\n .<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n .<\/span>width<\/span>(<\/span>34<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span><\/p>\n

Column<\/span>(<\/span>{<\/span> space:<\/span> 4<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>item.<\/span>title)<\/span>.<\/span>fontSize<\/span>(<\/span>12<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n Text<\/span>(<\/span>item.<\/span>artist)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span><\/p>\n

\/\/ \u70b9\u5531\u70ed\u5ea6 + \u8d8b\u52bf<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 3<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>item.<\/span>heat)<\/span>.<\/span>fontSize<\/span>(<\/span>10<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>pink)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Text<\/span>(<\/span>trendIcon<\/span>(<\/span>item.<\/span>trend)<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>trendColor<\/span>(<\/span>item.<\/span>trend)<\/span>)<\/span>
\n }<\/span>
\n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>End)<\/span><\/p>\n

\/\/ \u70b9\u5531\u6309\u94ae<\/span>
\n Text<\/span>(<\/span>'\u70b9\u5531'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 8<\/span>,<\/span> right:<\/span> 8<\/span>,<\/span> top:<\/span> 5<\/span>,<\/span> bottom:<\/span> 5<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>purple)<\/span>.<\/span>borderRadius<\/span>(<\/span>8<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>12<\/span>)<\/span>.<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>idx <<\/span> 3<\/span> ?<\/span> COLORS<\/span>.<\/span>chip :<\/span> COLORS<\/span>.<\/span>card)<\/span>
\n }<\/span>,<\/span> (<\/span>item:<\/span> SongItem)<\/span> =><\/span> item.<\/span>rank +<\/span> item.<\/span>title)<\/span><\/p>\n

\/\/ \u6708\u5ea6\u6b22\u5531\u65f6\u957f\u67f1\u72b6\u56fe（\u547c\u5438 \u00b15% \u6ce2\u52a8）<\/span>
\n this<\/span>.<\/span>chartCard<\/span>(<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span><\/p>\n

\u70b9\u5531 Tab \u7684\u6838\u5fc3\u662f\u70ed\u6b4c\u70b9\u5531\u699c\u5217\u8868，\u901a\u8fc7 ForEach \u904d\u5386 songList \u6e32\u67d3\u516b\u6761\u699c\u5355\u6570\u636e\u3002\u6bcf\u884c\u91c7\u7528 Row \u6a2a\u5411\u5e03\u5c40，\u4ece\u5de6\u5230\u53f3\u4f9d\u6b21\u4e3a：\u5927\u7f16\u53f7\u3001\u6b4c\u66f2\u4fe1\u606f\u5217\u3001\u70ed\u5ea6\u8d8b\u52bf\u5217\u3001\u70b9\u5531\u6309\u94ae\u3002\u7f16\u53f7\u7684 fontSize \u4e0e fontColor \u901a\u8fc7\u5d4c\u5957\u4e09\u5143\u8868\u8fbe\u5f0f\u5b9e\u73b0\u524d\u4e09\u540d\u5dee\u5f02\u5316\u9ad8\u4eae\u2014\u2014\u7b2c\u4e00\u540d\u91d1\u8272 24 \u53f7\u5b57\u3001\u7b2c\u4e8c\u540d\u7d2b\u8272 24 \u53f7\u5b57\u3001\u7b2c\u4e09\u540d\u7c89\u8272 24 \u53f7\u5b57\u3001\u7b2c\u56db\u540d\u53ca\u4ee5\u540e\u7070\u7d2b\u8272 17 \u53f7\u5b57\u3002\u8fd9\u79cd\u524d\u4e09\u540d\u653e\u5927\u9ad8\u4eae\u7684\u8bbe\u8ba1\u662f\u6392\u884c\u699c\u7c7b UI \u7684\u7ecf\u5178\u6a21\u5f0f，\u901a\u8fc7\u89c6\u89c9\u6743\u91cd\u5dee\u5f02\u5f15\u5bfc\u7528\u6237\u5173\u6ce8\u5934\u90e8\u6b4c\u66f2\u3002<\/p>\n

\u524d\u4e09\u540d\u7684\u884c\u80cc\u666f\u4f7f\u7528 chip \u8272（\u6bd4\u666e\u901a\u884c\u7684 card \u8272\u66f4\u4eae），\u8fdb\u4e00\u6b65\u5f3a\u5316\u5934\u90e8\u6392\u540d\u7684\u89c6\u89c9\u7a81\u51fa\u3002\u6b4c\u66f2\u4fe1\u606f\u5217\u4f7f\u7528 layoutWeight(1) \u586b\u5145\u7f16\u53f7\u4e0e\u70ed\u5ea6\u4e4b\u95f4\u7684\u7a7a\u95f4，\u5185\u542b\u6b4c\u540d（\u7c97\u4f53\u767d\u8272）\u4e0e\u6b4c\u624b\u540d（\u8f85\u52a9\u7d2b\u8272）\u3002\u70ed\u5ea6\u8d8b\u52bf\u5217\u53f3\u5bf9\u9f50\u663e\u793a，\u70ed\u5ea6\u6570\u503c\u7528\u7c89\u8272\u7c97\u4f53，\u8d8b\u52bf\u6587\u6848\u901a\u8fc7 trendIcon \u4e0e trendColor \u4e24\u4e2a\u8f85\u52a9\u51fd\u6570\u751f\u6210\u5bf9\u5e94\u7684\u56fe\u6807\u4e0e\u989c\u8272\u3002\u70b9\u5531\u6309\u94ae\u4f7f\u7528\u7d2b\u8272\u80cc\u666f+\u767d\u8272\u6587\u5b57，\u56fa\u5b9a\u5bbd\u5ea6\u901a\u8fc7 padding \u63a7\u5236，\u662f\u699c\u5355\u884c\u4e2d\u7684\u884c\u52a8\u5165\u53e3\u3002<\/p>\n

\u699c\u5355\u4e0b\u65b9\u901a\u8fc7 this.chartCard() \u8c03\u7528\u6708\u5ea6\u6b22\u5531\u65f6\u957f\u67f1\u72b6\u56fe Builder，\u5c06\u6570\u636e\u53ef\u89c6\u5316\u4e0e\u699c\u5355\u4fe1\u606f\u7ec4\u5408\u5728\u540c\u4e00 Tab \u4e2d，\u5f62\u6210"\u699c\u5355+\u7edf\u8ba1"\u7684\u5185\u5bb9\u95ed\u73af\u3002<\/p>\n

7.3 AI\u5b57\u5e55Tab：Speech Kit\u7279\u6027\u9875<\/h4>\n

AI\u5b57\u5e55 Tab \u662f\u6574\u4e2a\u5e94\u7528\u7684\u6280\u672f\u6838\u5fc3\u533a\u5757，\u5b83\u5c06 Speech Kit 6.1.1 \u7684\u56db\u5927\u65b0\u7279\u6027\u4ee5\u4e94\u4e2a\u529f\u80fd\u533a\u5757\u7684\u5f62\u5f0f\u5b8c\u6574\u5c55\u793a\u7ed9\u7528\u6237\u3002\u8fd9\u4e2a Tab \u4e0d\u4ec5\u662f\u4e00\u4e2a\u529f\u80fd\u9875\u9762，\u66f4\u662f\u4e00\u4efd\u53ef\u4ea4\u4e92\u7684\u7279\u6027\u6587\u6863\u3002<\/p>\n

7.3.1 \u7279\u6027\u7b80\u4ecb\u6761\u4e0e\u5b9e\u65f6\u9884\u89c8\u5361<\/h5>\n

\/** AI\u5b57\u5e55 Tab：Speech Kit 6.1.1 \u7279\u6027\u9875（\u9884\u89c8\/\u8bed\u8a00\/\u5916\u89c2\/\u4ee3\u7801\/\u573a\u666f \u4e94\u533a\u5757） *\/<\/span>
\n @<\/span>Builder<\/span><\/span>
\n tabCaption<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 12<\/span> }<\/span>)<\/span> {<\/span>
\n \/\/ \u7279\u6027\u7b80\u4ecb\u6761<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🗣'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>16<\/span>)<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 2<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'Speech Kit \u00b7 \u573a\u666f\u5316\u8bed\u97f3\u670d\u52a1'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Text<\/span>(<\/span>'HarmonyOS 6.1.1：AI\u5b57\u5e55\u652f\u6301\u6e90\u8bed\u8a00 \/ \u76ee\u6807\u8bed\u8a00 \/ \u5b57\u4f53\u989c\u8272 \/ \u5b57\u4f53\u5927\u5c0f'<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>opacity<\/span>(<\/span>0.75<\/span>)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>10<\/span>)<\/span>.<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n .<\/span>linearGradient<\/span>(<\/span>{<\/span> angle:<\/span> 135<\/span>,<\/span> colors:<\/span> [<\/span>[<\/span>COLORS<\/span>.<\/span>purpleD,<\/span> 0<\/span>]<\/span>,<\/span> [<\/span>COLORS<\/span>.<\/span>purple,<\/span> 1<\/span>]<\/span>]<\/span> }<\/span>)<\/span><\/p>\n

\u7279\u6027\u7b80\u4ecb\u6761\u662f AI \u5b57\u5e55 Tab \u7684\u9876\u90e8\u6807\u8bc6\u533a\u57df，\u4f7f\u7528\u4e0e\u5e94\u7528\u5934\u90e8 Banner \u76f8\u540c\u7684 135 \u5ea6\u6e10\u53d8\u80cc\u666f，\u5f62\u6210\u89c6\u89c9\u4e00\u81f4\u6027\u3002\u7b80\u4ecb\u6761\u5de6\u4fa7\u662f\u5927\u53f7 🗣 \u56fe\u6807，\u53f3\u4fa7\u4e24\u884c\u6587\u5b57\u5206\u522b\u5c55\u793a\u4e3b\u6807\u9898"Speech Kit\u00b7\u573a\u666f\u5316\u8bed\u97f3\u670d\u52a1"\u4e0e\u526f\u6807\u9898"HarmonyOS 6.1.1：AI\u5b57\u5e55\u652f\u6301\u6e90\u8bed\u8a00\/\u76ee\u6807\u8bed\u8a00\/\u5b57\u4f53\u989c\u8272\/\u5b57\u4f53\u5927\u5c0f"\u2014\u2014\u526f\u6807\u9898\u76f4\u63a5\u70b9\u660e\u4e86\u56db\u5927\u65b0\u589e\u5b57\u6bb5\u7684\u540d\u79f0，\u4f5c\u4e3a\u7528\u6237\u8fdb\u5165\u8be5 Tab \u540e\u7684\u9996\u8981\u4fe1\u606f\u544a\u77e5\u3002<\/p>\n

\/\/ ===== \u533a\u5757 1：\u7ec4\u4ef6\u5b9e\u65f6\u9884\u89c8\u5361 =====<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🗣 AI \u5b57\u5e55\u5b9e\u65f6\u9884\u89c8'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>this<\/span>.<\/span>captionReady ?<\/span> '\u5df2\u5c31\u7eea'<\/span> :<\/span> '\u521d\u59cb\u5316\u4e2d'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>this<\/span>.<\/span>captionReady ?<\/span> COLORS<\/span>.<\/span>green :<\/span> COLORS<\/span>.<\/span>gold)<\/span>
\n .<\/span>opacity<\/span>(<\/span>this<\/span>.<\/span>captionReady ?<\/span> 1<\/span> :<\/span> (<\/span>this<\/span>.<\/span>breath ?<\/span> 1<\/span> :<\/span> 0.55<\/span>)<\/span>)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 8<\/span>,<\/span> right:<\/span> 8<\/span>,<\/span> top:<\/span> 3<\/span>,<\/span> bottom:<\/span> 3<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>8<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\/\/ AI \u5b57\u5e55\u7ec4\u4ef6（isShown @Link \u53cc\u5411\u7ed1\u5b9a，options \u5b9e\u65f6\u91cd\u5efa）<\/span>
\n AICaptionComponent<\/span>(<\/span>{<\/span>
\n isShown:<\/span> this<\/span>.<\/span>captionShown,<\/span>
\n controller:<\/span> this<\/span>.<\/span>captionController,<\/span>
\n options:<\/span> this<\/span>.<\/span>buildCaptionOptions<\/span>(<\/span>)<\/span>
\n }<\/span>)<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>height<\/span>(<\/span>110<\/span>)<\/span>
\n .<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n .<\/span>border<\/span>(<\/span>{<\/span> width:<\/span> 1<\/span>,<\/span> color:<\/span> COLORS<\/span>.<\/span>line }<\/span>)<\/span><\/p>\n

\/\/ \u63a7\u5236\u6309\u94ae\u884c：\u5f00\u542f\/\u9690\u85cf\u5b57\u5e55 + \u5199\u5165\u6f14\u793a\u97f3\u9891<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>this<\/span>.<\/span>captionShown ?<\/span> '\u9690\u85cf\u5b57\u5e55'<\/span> :<\/span> '\u5f00\u542f\u5b57\u5e55'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>12<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 9<\/span>,<\/span> bottom:<\/span> 9<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>this<\/span>.<\/span>captionShown ?<\/span> COLORS<\/span>.<\/span>purpleD :<\/span> COLORS<\/span>.<\/span>purple)<\/span>
\n .<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>captionShown =<\/span> !<\/span>this<\/span>.<\/span>captionShown;<\/span>
\n }<\/span>)<\/span><\/p>\n

Row<\/span>(<\/span>{<\/span> space:<\/span> 5<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u5199\u5165\u6f14\u793a\u97f3\u9891'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>12<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>cyan)<\/span>
\n Text<\/span>(<\/span>'\u00d7'<\/span> +<\/span> this<\/span>.<\/span>captionFed.<\/span>toString<\/span>(<\/span>)<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>cyan)<\/span>
\n }<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>justifyContent<\/span>(<\/span>FlexAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 9<\/span>,<\/span> bottom:<\/span> 9<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>feedDemoAudio<\/span>(<\/span>)<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\/\/ \u9519\u8bef\u4fe1\u606f\u884c（onError \u56de\u8c03\u89e6\u53d1\u663e\u793a）<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>captionErrMsg !==<\/span> ''<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u26a0 '<\/span> +<\/span> this<\/span>.<\/span>captionErrMsg)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>pink)<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>maxLines<\/span>(<\/span>2<\/span>)<\/span>
\n .<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n .<\/span>padding<\/span>(<\/span>8<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>8<\/span>)<\/span>
\n }<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>14<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span><\/p>\n

\u533a\u5757\u4e00\u662f AI \u5b57\u5e55\u7ec4\u4ef6\u7684\u5b9e\u65f6\u9884\u89c8\u5361，\u662f\u6574\u4e2a Tab \u7684\u6838\u5fc3\u4ea4\u4e92\u533a\u57df\u3002\u9884\u89c8\u5361\u9876\u90e8\u7684\u72b6\u6001\u6807\u7b7e\u901a\u8fc7 captionReady \u72b6\u6001\u9a71\u52a8\u663e\u793a"\u5df2\u5c31\u7eea"（\u7eff\u8272）\u6216"\u521d\u59cb\u5316\u4e2d"（\u91d1\u8272）\u3002\u5f53\u672a\u5c31\u7eea\u65f6，\u6807\u7b7e\u7684 opacity \u53d7 breath \u72b6\u6001\u9a71\u52a8\u5728 1.0 \u4e0e 0.55 \u4e4b\u95f4\u95ea\u70c1，\u5f62\u6210"\u6b63\u5728\u52a0\u8f7d"\u7684\u52a8\u6548\u6697\u793a\u2014\u2014\u8fd9\u662f\u5c06 AI \u5b57\u5e55\u7ec4\u4ef6\u7684\u5f02\u6b65\u521d\u59cb\u5316\u751f\u547d\u5468\u671f\u53ef\u89c6\u5316\u7684\u5de7\u5999\u8bbe\u8ba1\u3002<\/p>\n

AICaptionComponent \u7ec4\u4ef6\u672c\u8eab\u662f\u8fd9\u4e00\u533a\u5757\u7684\u7075\u9b42，\u5b83\u63a5\u6536\u4e09\u4e2a\u53c2\u6570：isShown（\u901a\u8fc7 @Link \u53cc\u5411\u7ed1\u5b9a\u5230 captionShown \u72b6\u6001，\u63a7\u5236\u5b57\u5e55\u663e\u793a\/\u9690\u85cf）\u3001controller（\u4f20\u5165 captionController \u5b9e\u4f8b，\u7528\u4e8e\u8c03\u7528 writeAudio \u5199\u5165\u97f3\u9891）\u3001options（\u8c03\u7528 buildCaptionOptions() \u65b9\u6cd5\u5b9e\u65f6\u6784\u5efa\u914d\u7f6e\u5bf9\u8c61）\u3002\u7ec4\u4ef6\u5bbd\u5ea6 100%\u3001\u9ad8\u5ea6 110\u3001\u5706\u89d2 10，\u4f7f\u7528\u7ebf\u6761\u8272\u8fb9\u6846\u52fe\u52d2\u51fa\u5b57\u5e55\u663e\u793a\u533a\u57df\u7684\u8fb9\u754c\u3002\u5f53\u7528\u6237\u4fee\u6539\u8bed\u8a00\u6216\u5916\u89c2\u8bbe\u7f6e\u65f6，buildCaptionOptions() \u8fd4\u56de\u7684\u914d\u7f6e\u5bf9\u8c61\u968f\u4e4b\u53d8\u5316，ArkUI \u6846\u67b6\u68c0\u6d4b\u5230 options \u53c2\u6570\u53d8\u5316\u540e\u89e6\u53d1\u5b57\u5e55\u7ec4\u4ef6\u7684\u70ed\u66f4\u65b0\u2014\u2014\u5b57\u5e55\u7684\u8bc6\u522b\u8bed\u8a00\u3001\u7ffb\u8bd1\u65b9\u5411\u3001\u5b57\u4f53\u5927\u5c0f\u4e0e\u989c\u8272\u5373\u65f6\u751f\u6548，\u65e0\u9700\u91cd\u65b0\u521d\u59cb\u5316\u7ec4\u4ef6\u3002<\/p>\n

\u63a7\u5236\u6309\u94ae\u884c\u63d0\u4f9b\u4e24\u4e2a\u64cd\u4f5c\u5165\u53e3：\u5de6\u4fa7"\u5f00\u542f\u5b57\u5e55\/\u9690\u85cf\u5b57\u5e55"\u6309\u94ae\u6839\u636e captionShown \u72b6\u6001\u5207\u6362\u6587\u6848\u4e0e\u80cc\u666f\u8272（\u5f00\u542f\u6001\u7528\u4eae\u7d2b purple，\u9690\u85cf\u6001\u7528\u6df1\u7d2b purpleD），\u70b9\u51fb\u7ffb\u8f6c captionShown \u503c；\u53f3\u4fa7"\u5199\u5165\u6f14\u793a\u97f3\u9891"\u6309\u94ae\u8c03\u7528 feedDemoAudio() \u65b9\u6cd5\u5411\u63a7\u5236\u5668\u63a8\u9001\u5408\u6210\u7684 PCM \u97f3\u9891\u5757，\u5e76\u663e\u793a\u5df2\u5199\u5165\u6b21\u6570（\u00d7N）\u3002\u9519\u8bef\u4fe1\u606f\u884c\u901a\u8fc7\u6761\u4ef6\u6e32\u67d3\u4ec5\u5728 captionErrMsg \u975e\u7a7a\u65f6\u663e\u793a，\u4ee5\u7c89\u8272\u6587\u5b57+\u82af\u7247\u8272\u80cc\u666f\u7684\u8b66\u793a\u6837\u5f0f\u5448\u73b0 Speech Kit \u7684 onError \u56de\u8c03\u4fe1\u606f\u3002<\/p>\n

7.3.2 \u8bed\u8a00\u8bbe\u7f6e\u5361<\/h5>\n

\/\/ ===== \u533a\u5757 2：\u8bed\u8a00\u8bbe\u7f6e\u5361（sourceLanguage \/ targetLanguage） =====<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🌐 \u8bed\u8a00\u8bbe\u7f6e'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span><\/p>\n

\/\/ \u6e90\u8bed\u8a00\u6807\u9898\u884c（'zh' | 'en' \u4e8c\u9009\u4e00）<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u6e90\u8bed\u8a00 sourceLanguage'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>10<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>"\u53d6\u503c 'zh' | 'en'"<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

Row<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n ForEach<\/span>(<\/span>SRC_LANGS<\/span>,<\/span> (<\/span>l:<\/span> LangOption)<\/span> =><\/span> {<\/span>
\n Text<\/span>(<\/span>l.<\/span>name)<\/span>.<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>this<\/span>.<\/span>srcLang ===<\/span> l.<\/span>code ?<\/span> COLORS<\/span>.<\/span>title :<\/span> COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>fontWeight<\/span>(<\/span>this<\/span>.<\/span>srcLang ===<\/span> l.<\/span>code ?<\/span> FontWeight.<\/span>Bold :<\/span> FontWeight.<\/span>Normal)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 8<\/span>,<\/span> bottom:<\/span> 8<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>this<\/span>.<\/span>srcLang ===<\/span> l.<\/span>code ?<\/span> COLORS<\/span>.<\/span>purple :<\/span> COLORS<\/span>.<\/span>chip)<\/span>
\n .<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>switchSourceLang<\/span>(<\/span>l.<\/span>code)<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>,<\/span> (<\/span>l:<\/span> LangOption)<\/span> =><\/span> l.<\/span>code)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\u8bed\u8a00\u8bbe\u7f6e\u5361\u662f 6.1.1 \u65b0\u589e\u7684 sourceLanguage \u4e0e targetLanguage \u4e24\u4e2a\u914d\u7f6e\u5b57\u6bb5\u7684 UI \u64cd\u4f5c\u5165\u53e3\u3002\u6e90\u8bed\u8a00\u90e8\u5206\u901a\u8fc7 ForEach \u6e32\u67d3 SRC_LANGS \u6570\u7ec4\u7684\u4e24\u4e2a\u9009\u9879（\u4e2d\u6587\/\u82f1\u6587），\u6bcf\u4e2a\u9009\u9879\u7684 fontColor\u3001fontWeight \u4e0e backgroundColor \u901a\u8fc7 this.srcLang === l.code \u5224\u65ad\u662f\u5426\u9009\u4e2d：\u9009\u4e2d\u6001\u4e3a\u767d\u8272\u7c97\u4f53+\u7d2b\u8272\u80cc\u666f，\u672a\u9009\u4e2d\u6001\u4e3a\u8f85\u52a9\u8272\u5e38\u89c4+\u82af\u7247\u8272\u80cc\u666f\u3002\u70b9\u51fb\u9009\u9879\u8c03\u7528 switchSourceLang(l.code) \u65b9\u6cd5，\u8be5\u65b9\u6cd5\u5185\u90e8\u4f1a\u6839\u636e\u8bed\u8a00\u7801\u8054\u52a8\u8bbe\u7f6e\u76ee\u6807\u8bed\u8a00\u7684\u9ed8\u8ba4\u503c（\u4e2d\u6587\u6e90\u9501\u5b9a zh，\u82f1\u6587\u6e90\u9ed8\u8ba4 zh-en）\u3002<\/p>\n

\u6e90\u8bed\u8a00\u6807\u9898\u884c\u53f3\u4fa7\u6807\u6ce8"\u53d6\u503c \u2018zh\u2019|\u2018en\u2019"，\u76f4\u63a5\u5411\u5f00\u53d1\u8005\u5c55\u793a\u8be5\u5b57\u6bb5\u7684\u53ef\u9009\u503c\u8303\u56f4\u2014\u2014\u8fd9\u79cd\u5c06 API \u6587\u6863\u4fe1\u606f\u5d4c\u5165 UI \u7684\u8bbe\u8ba1\u4f7f\u8be5 Tab \u517c\u5177\u7528\u6237\u529f\u80fd\u9875\u4e0e\u6280\u672f\u6587\u6863\u7684\u53cc\u91cd\u89d2\u8272\u3002<\/p>\n

\/\/ \u76ee\u6807\u8bed\u8a00\u6807\u9898\u884c（\u4e2d\u6587\u6e90\u9501\u5b9a zh；\u82f1\u6587\u6e90\u53ef\u9009 zh \/ en \/ zh-en）<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u76ee\u6807\u8bed\u8a00 targetLanguage'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>10<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>this<\/span>.<\/span>srcLang ===<\/span> 'zh'<\/span> ?<\/span> '\u4e2d\u6587\u6e90\u5df2\u9501\u5b9a'<\/span> :<\/span> "\u53d6\u503c 'zh' | 'en' | 'zh-en'"<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

if<\/span> (<\/span>this<\/span>.<\/span>srcLang ===<\/span> 'zh'<\/span>)<\/span> {<\/span>
\n \/\/ \u4e2d\u6587\u6e90：\u76ee\u6807\u8bed\u8a00\u9501\u5b9a\u63d0\u793a\u884c（\u4e0d\u53ef\u9009）<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🔒'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u4e2d\u6587\u6e90\u9501\u5b9a\u4e2d\u6587：\u65e0\u7ffb\u8bd1\u65b9\u5411，targetLanguage \u56fa\u5b9a\u4e3a zh'<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>10<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>10<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n }<\/span> else<\/span> {<\/span>
\n \/\/ \u82f1\u6587\u6e90：\u76ee\u6807\u8bed\u8a00\u4e09\u9009\u9879<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n ForEach<\/span>(<\/span>TGT_LANGS_EN<\/span>,<\/span> (<\/span>l:<\/span> LangOption)<\/span> =><\/span> {<\/span>
\n Text<\/span>(<\/span>l.<\/span>name)<\/span>.<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>this<\/span>.<\/span>tgtLang ===<\/span> l.<\/span>code ?<\/span> COLORS<\/span>.<\/span>title :<\/span> COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>fontWeight<\/span>(<\/span>this<\/span>.<\/span>tgtLang ===<\/span> l.<\/span>code ?<\/span> FontWeight.<\/span>Bold :<\/span> FontWeight.<\/span>Normal)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 8<\/span>,<\/span> bottom:<\/span> 8<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>this<\/span>.<\/span>tgtLang ===<\/span> l.<\/span>code ?<\/span> COLORS<\/span>.<\/span>purple :<\/span> COLORS<\/span>.<\/span>chip)<\/span>
\n .<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>tgtLang =<\/span> l.<\/span>code;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>,<\/span> (<\/span>l:<\/span> LangOption)<\/span> =><\/span> l.<\/span>code)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span><\/p>\n

\u76ee\u6807\u8bed\u8a00\u533a\u57df\u4f7f\u7528 if-else \u6761\u4ef6\u6e32\u67d3\u5b9e\u73b0\u4e2d\u6587\u6e90\u4e0e\u82f1\u6587\u6e90\u7684\u5dee\u5f02\u5316\u5c55\u793a\u3002\u5f53 srcLang === 'zh'（\u4e2d\u6587\u6e90）\u65f6，\u6e32\u67d3\u4e00\u4e2a\u5e26 🔒 \u9501\u56fe\u6807\u7684\u9501\u5b9a\u63d0\u793a\u884c，\u6587\u5b57\u8bf4\u660e"\u4e2d\u6587\u6e90\u9501\u5b9a\u4e2d\u6587：\u65e0\u7ffb\u8bd1\u65b9\u5411，targetLanguage \u56fa\u5b9a\u4e3a zh"，\u5411\u7528\u6237\u89e3\u91ca\u4e3a\u4f55\u8be5\u9009\u9879\u4e0d\u53ef\u9009\u2014\u2014\u8fd9\u79cd\u900f\u660e\u7684\u89c4\u5219\u89e3\u91ca\u63d0\u5347\u4e86\u7528\u6237\u4f53\u9a8c，\u907f\u514d\u4e86"\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u9009"\u7684\u56f0\u60d1\u3002\u5f53 srcLang === 'en'（\u82f1\u6587\u6e90）\u65f6，\u6e32\u67d3\u4e09\u4e2a\u76ee\u6807\u8bed\u8a00\u9009\u9879（\u4e2d\u6587\/\u82f1\u6587\/\u4e2d\u82f1\u53cc\u8bed），\u9009\u9879\u7684\u9009\u4e2d\u6001\u6837\u5f0f\u4e0e\u6e90\u8bed\u8a00\u4e00\u81f4\u3002\u70b9\u51fb\u9009\u9879\u76f4\u63a5\u5c06 tgtLang \u8d4b\u503c\u4e3a\u5bf9\u5e94\u8bed\u8a00\u7801，\u7531\u4e8e\u8fd9\u4e9b\u72b6\u6001\u90fd\u662f @State，\u8d4b\u503c\u540e\u81ea\u52a8\u89e6\u53d1 buildCaptionOptions() \u91cd\u5efa\u4e0e\u5b57\u5e55\u7ec4\u4ef6\u70ed\u66f4\u65b0\u3002<\/p>\n

\/\/ \u5f53\u524d\u8bed\u8a00\u7ec4\u5408\u6458\u8981<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 6<\/span> }<\/span>)<\/span> {<\/span>
\n Circle<\/span>(<\/span>)<\/span>.<\/span>width<\/span>(<\/span>6<\/span>)<\/span>.<\/span>height<\/span>(<\/span>6<\/span>)<\/span>.<\/span>fill<\/span>(<\/span>COLORS<\/span>.<\/span>cyan)<\/span>
\n Text<\/span>(<\/span>'\u5f53\u524d\u7ec4\u5408：\u6e90 '<\/span> +<\/span> langName<\/span>(<\/span>this<\/span>.<\/span>srcLang)<\/span> +<\/span> ' \u2192 \u76ee\u6807 '<\/span> +<\/span> langName<\/span>(<\/span>this<\/span>.<\/span>tgtLang)<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>14<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span><\/p>\n

\u8bed\u8a00\u8bbe\u7f6e\u5361\u5e95\u90e8\u4ee5\u4e00\u4e2a\u9752\u8272\u5c0f\u5706\u70b9+\u6587\u5b57\u6458\u8981\u7684\u5f62\u5f0f\u5c55\u793a\u5f53\u524d\u8bed\u8a00\u7ec4\u5408，\u901a\u8fc7 langName \u8f85\u52a9\u51fd\u6570\u5c06\u8bed\u8a00\u7801\u8f6c\u4e3a\u4e2d\u6587\u540d，\u5f62\u6210"\u5f53\u524d\u7ec4\u5408：\u6e90 \u4e2d\u6587 \u2192 \u76ee\u6807 \u4e2d\u82f1\u53cc\u8bed"\u8fd9\u6837\u7684\u53ef\u8bfb\u6587\u672c\u3002\u8fd9\u4e00\u6458\u8981\u884c\u8ba9\u7528\u6237\u5728\u8c03\u6574\u8bbe\u7f6e\u540e\u80fd\u591f\u5373\u65f6\u786e\u8ba4\u5f53\u524d\u914d\u7f6e，\u662f\u914d\u7f6e\u53cd\u9988\u7684\u6807\u51c6\u8bbe\u8ba1\u3002<\/p>\n

7.3.3 \u5916\u89c2\u8bbe\u7f6e\u5361<\/h5>\n

\/\/ ===== \u533a\u5757 3：\u5916\u89c2\u8bbe\u7f6e\u5361（fontSize \/ fontColor） =====<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🎨 \u5916\u89c2\u8bbe\u7f6e'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span><\/p>\n

\/\/ \u5b57\u4f53\u5927\u5c0f\u6807\u9898\u884c（AICaptionFontSize \u56db\u6863）<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u5b57\u4f53\u5927\u5c0f fontSize'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>10<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>'AICaptionFontSize'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

Row<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n ForEach<\/span>(<\/span>SIZE_OPTIONS<\/span>,<\/span> (<\/span>s:<\/span> SizeOption)<\/span> =><\/span> {<\/span>
\n Text<\/span>(<\/span>s.<\/span>name)<\/span>.<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>this<\/span>.<\/span>captionSize ===<\/span> s.<\/span>size ?<\/span> COLORS<\/span>.<\/span>title :<\/span> COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>fontWeight<\/span>(<\/span>this<\/span>.<\/span>captionSize ===<\/span> s.<\/span>size ?<\/span> FontWeight.<\/span>Bold :<\/span> FontWeight.<\/span>Normal)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 8<\/span>,<\/span> bottom:<\/span> 8<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>this<\/span>.<\/span>captionSize ===<\/span> s.<\/span>size ?<\/span> COLORS<\/span>.<\/span>purple :<\/span> COLORS<\/span>.<\/span>chip)<\/span>
\n .<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>captionSize =<\/span> s.<\/span>size;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>,<\/span> (<\/span>s:<\/span> SizeOption)<\/span> =><\/span> s.<\/span>name)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\u5916\u89c2\u8bbe\u7f6e\u5361\u5bf9\u5e94 6.1.1 \u65b0\u589e\u7684 fontSize \u4e0e fontColor \u4e24\u4e2a\u5b57\u6bb5\u3002\u5b57\u4f53\u5927\u5c0f\u90e8\u5206\u901a\u8fc7 ForEach \u6e32\u67d3 SIZE_OPTIONS \u6570\u7ec4\u7684\u56db\u6863\u9009\u9879（\u5c0f\u53f7\/\u6807\u51c6\/\u5927\u53f7\/\u8d85\u5927），\u9009\u4e2d\u6001\u6837\u5f0f\u4e0e\u8bed\u8a00\u9009\u9879\u4e00\u81f4\u3002\u6807\u9898\u884c\u53f3\u4fa7\u6807\u6ce8"AICaptionFontSize"\u7c7b\u578b\u540d，\u5411\u5f00\u53d1\u8005\u5c55\u793a\u8be5\u5b57\u6bb5\u7684\u7c7b\u578b\u4e3a\u679a\u4e3e\u800c\u975e\u968f\u610f\u6570\u5b57\u3002\u70b9\u51fb\u9009\u9879\u5c06 captionSize \u8d4b\u503c\u4e3a\u5bf9\u5e94\u7684 AICaptionFontSize \u679a\u4e3e\u503c，\u89e6\u53d1\u5b57\u5e55\u7ec4\u4ef6\u5b57\u53f7\u70ed\u66f4\u65b0\u3002<\/p>\n

\/\/ \u5b57\u4f53\u989c\u8272\u6807\u9898\u884c（ResourceColor \u4e94\u9884\u8bbe）<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u5b57\u4f53\u989c\u8272 fontColor'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>10<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>'ResourceColor'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\/\/ \u4e94\u4e2a\u5706\u5f62\u8272\u5757（\u9009\u4e2d\u9713\u8679\u9752\u63cf\u8fb9）<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 12<\/span> }<\/span>)<\/span> {<\/span>
\n ForEach<\/span>(<\/span>CAPTION_FONT_COLORS<\/span>,<\/span> (<\/span>c:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>
\n Circle<\/span>(<\/span>)<\/span>.<\/span>width<\/span>(<\/span>26<\/span>)<\/span>.<\/span>height<\/span>(<\/span>26<\/span>)<\/span>.<\/span>fill<\/span>(<\/span>c)<\/span>
\n .<\/span>border<\/span>(<\/span>{<\/span> width:<\/span> 2<\/span>,<\/span> color:<\/span> this<\/span>.<\/span>captionColor ===<\/span> c ?<\/span> COLORS<\/span>.<\/span>cyan :<\/span> COLORS<\/span>.<\/span>line }<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>captionColor =<\/span> c;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>,<\/span> (<\/span>c:<\/span> string<\/span>)<\/span> =><\/span> c)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>justifyContent<\/span>(<\/span>FlexAlign.<\/span>SpaceBetween)<\/span><\/p>\n

\/\/ \u5f53\u524d\u9009\u4e2d\u989c\u8272\u8bf4\u660e\u884c<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Circle<\/span>(<\/span>)<\/span>.<\/span>width<\/span>(<\/span>10<\/span>)<\/span>.<\/span>height<\/span>(<\/span>10<\/span>)<\/span>.<\/span>fill<\/span>(<\/span>this<\/span>.<\/span>captionColor)<\/span>
\n Text<\/span>(<\/span>colorName<\/span>(<\/span>this<\/span>.<\/span>captionColor)<\/span> +<\/span> ' '<\/span> +<\/span> this<\/span>.<\/span>captionColor)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> left:<\/span> 6<\/span> }<\/span>)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u4f5c\u7528\u4e8e\u6b4c\u8bcd\u539f\u6587\u4e0e\u8bd1\u6587'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>14<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span><\/p>\n

\u5b57\u4f53\u989c\u8272\u90e8\u5206\u4f7f\u7528 Circle \u5706\u5f62\u7ec4\u4ef6\u6e32\u67d3\u4e94\u4e2a\u989c\u8272\u9884\u8bbe\u8272\u5757，\u6bcf\u4e2a\u8272\u5757\u76f4\u5f84 26 \u50cf\u7d20，\u586b\u5145\u5bf9\u5e94\u989c\u8272\u3002\u9009\u4e2d\u6001\u901a\u8fc7 border \u7684 color \u5c5e\u6027\u5207\u6362\u63cf\u8fb9\u989c\u8272\u5b9e\u73b0：\u9009\u4e2d\u65f6\u4f7f\u7528\u9713\u8679\u9752（COLORS.cyan）\u63cf\u8fb9\u5bbd\u5ea6 2，\u672a\u9009\u4e2d\u65f6\u4f7f\u7528\u7ebf\u6761\u8272（COLORS.line）\u63cf\u8fb9\u2014\u2014\u5728\u6df1\u8272\u80cc\u666f\u4e0a，\u9713\u8679\u9752\u63cf\u8fb9\u5f62\u6210\u4e86\u53d1\u5149\u822c\u7684\u9009\u4e2d\u63d0\u793a，\u4e0e\u8272\u5757\u672c\u8eab\u5f62\u6210\u51b7\u6696\u8272\u5bf9\u6bd4\u3002\u70b9\u51fb\u8272\u5757\u5c06 captionColor \u8d4b\u503c\u4e3a\u5bf9\u5e94\u989c\u8272\u503c\u3002<\/p>\n

\u5e95\u90e8\u8bf4\u660e\u884c\u5c55\u793a\u5f53\u524d\u9009\u4e2d\u989c\u8272\u7684\u4e2d\u6587\u540d（\u901a\u8fc7 colorName \u51fd\u6570\u8f6c\u6362）\u4e0e\u5341\u516d\u8fdb\u5236\u503c，\u5e76\u6807\u6ce8"\u4f5c\u7528\u4e8e\u6b4c\u8bcd\u539f\u6587\u4e0e\u8bd1\u6587"，\u5411\u7528\u6237\u8bf4\u660e\u5b57\u4f53\u989c\u8272\u540c\u65f6\u5f71\u54cd\u5b57\u5e55\u539f\u6587\u4e0e\u7ffb\u8bd1\u6587\u672c\u3002fontColor \u5b57\u6bb5\u6807\u9898\u53f3\u4fa7\u6807\u6ce8"ResourceColor"\u7c7b\u578b\u540d，\u8868\u660e\u8be5\u5b57\u6bb5\u63a5\u53d7 ResourceColor \u7c7b\u578b\u7684\u503c（\u5305\u62ec\u5341\u516d\u8fdb\u5236\u8272\u503c\u5b57\u7b26\u4e32\u3001Color \u679a\u4e3e\u7b49），\u5177\u6709\u7075\u6d3b\u7684\u989c\u8272\u6307\u5b9a\u80fd\u529b\u3002<\/p>\n

7.3.4 options\u5b9e\u65f6\u4ee3\u7801\u9884\u89c8\u5361<\/h5>\n

\/\/ ===== \u533a\u5757 4：options \u5b9e\u65f6\u4ee3\u7801\u9884\u89c8\u5361 =====<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'💻 AICaptionOptions \u5b9e\u65f6\u4ee3\u7801'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u968f\u8bbe\u7f6e\u8054\u52a8'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>cyan)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\/\/ \u6df1\u8272\u4ee3\u7801\u5757（monospace，\u952e\u540d\u7d2b\u8272\u9ad8\u4eae）<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 5<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'AICaptionOptions = {'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>.<\/span>fontFamily<\/span>(<\/span>'monospace'<\/span>)<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 4<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u25cf sourceLanguage:'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>purple)<\/span>.<\/span>fontFamily<\/span>(<\/span>'monospace'<\/span>)<\/span>
\n Text<\/span>(<\/span>"'"<\/span> +<\/span> this<\/span>.<\/span>srcLang +<\/span> "'"<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>cyan)<\/span>.<\/span>fontFamily<\/span>(<\/span>'monospace'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 4<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u25cf targetLanguage:'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>purple)<\/span>.<\/span>fontFamily<\/span>(<\/span>'monospace'<\/span>)<\/span>
\n Text<\/span>(<\/span>"'"<\/span> +<\/span> this<\/span>.<\/span>tgtLang +<\/span> "'"<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>cyan)<\/span>.<\/span>fontFamily<\/span>(<\/span>'monospace'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 4<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u25cf fontSize:'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>purple)<\/span>.<\/span>fontFamily<\/span>(<\/span>'monospace'<\/span>)<\/span>
\n Text<\/span>(<\/span>sizeName<\/span>(<\/span>this<\/span>.<\/span>captionSize)<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>gold)<\/span>.<\/span>fontFamily<\/span>(<\/span>'monospace'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 4<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u25cf fontColor:'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>purple)<\/span>.<\/span>fontFamily<\/span>(<\/span>'monospace'<\/span>)<\/span>
\n Text<\/span>(<\/span>"'"<\/span> +<\/span> this<\/span>.<\/span>captionColor +<\/span> "'"<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>this<\/span>.<\/span>captionColor)<\/span>.<\/span>fontFamily<\/span>(<\/span>'monospace'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n Text<\/span>(<\/span>'}'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>.<\/span>fontFamily<\/span>(<\/span>'monospace'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>12<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>bg)<\/span>.<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span><\/p>\n

Text<\/span>(<\/span>'\u2605 6.1.1 \u65b0\u589e\u5b57\u6bb5：sourceLanguage \/ targetLanguage \/ fontSize \/ fontColor'<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>.<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>14<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span><\/p>\n

\u533a\u5757\u56db\u662f AICaptionOptions \u7684\u5b9e\u65f6\u4ee3\u7801\u9884\u89c8\u5361，\u8fd9\u662f\u4e00\u4e2a\u6781\u5177\u7279\u8272\u7684\u8bbe\u8ba1\u2014\u2014\u5b83\u5c06\u5f53\u524d\u7684\u5b57\u5e55\u914d\u7f6e\u4ee5\u4ee3\u7801\u5757\u7684\u5f62\u5f0f\u53ef\u89c6\u5316\u5c55\u793a\u5728\u9875\u9762\u4e0a，\u4f7f\u7528\u6237（\u5c24\u5176\u662f\u5f00\u53d1\u8005\u7528\u6237）\u80fd\u591f\u76f4\u89c2\u5730\u770b\u5230\u914d\u7f6e\u5bf9\u8c61\u7684\u5b8c\u6574\u7ed3\u6784\u3002\u4ee3\u7801\u5757\u4f7f\u7528 fontFamily('monospace') \u7b49\u5bbd\u5b57\u4f53，\u80cc\u666f\u4e3a\u6700\u6df1\u7684 bg \u8272（#120A1A），\u6a21\u62df\u4ee3\u7801\u7f16\u8f91\u5668\u7684\u6df1\u8272\u4e3b\u9898\u5916\u89c2\u3002<\/p>\n

\u4ee3\u7801\u5757\u5185\u90e8\u7684\u6bcf\u4e00\u884c\u7531 Row \u5bb9\u5668\u7ec4\u5408\u4e24\u4e2a Text \u7ec4\u4ef6\u6784\u6210：\u5de6\u4fa7\u952e\u540d（\u5982 sourceLanguage:）\u4f7f\u7528\u7d2b\u8272（COLORS.purple），\u53f3\u4fa7\u503c（\u5982 'zh'）\u4f7f\u7528\u9752\u8272（COLORS.cyan）\u6216\u91d1\u8272（COLORS.gold），\u5b9e\u73b0\u4e86\u8bed\u6cd5\u9ad8\u4eae\u7684\u89c6\u89c9\u6548\u679c\u3002\u56db\u4e2a\u5b57\u6bb5\u7684\u503c\u76f4\u63a5\u7ed1\u5b9a\u5230\u7ec4\u4ef6\u72b6\u6001：srcLang\u3001tgtLang\u3001captionSize（\u901a\u8fc7 sizeName \u8f6c\u4e3a\u679a\u4e3e\u540d\u5b57\u7b26\u4e32）\u3001captionColor\u3002\u5f53\u7528\u6237\u5728\u8bed\u8a00\u8bbe\u7f6e\u5361\u6216\u5916\u89c2\u8bbe\u7f6e\u5361\u4e2d\u4fee\u6539\u914d\u7f6e\u65f6，\u8fd9\u4e9b\u72b6\u6001\u503c\u53d8\u5316，\u4ee3\u7801\u5757\u4e2d\u7684\u5bf9\u5e94\u503c\u5b9e\u65f6\u540c\u6b65\u66f4\u65b0\u2014\u2014\u8fd9\u79cd"\u6240\u89c1\u5373\u6240\u5f97"\u7684\u4ee3\u7801\u8054\u52a8\u5c55\u793a，\u4f7f\u8be5 Tab \u6210\u4e3a\u4e86\u4e00\u4e2a\u53ef\u4ea4\u4e92\u7684 Speech Kit \u7279\u6027\u6587\u6863\u3002<\/p>\n

\u7279\u522b\u503c\u5f97\u6ce8\u610f\u7684\u662f fontColor \u884c\u7684\u503c Text \u7ec4\u4ef6\u4f7f\u7528\u4e86 .fontColor(this.captionColor)，\u5373\u503c\u7684\u6587\u5b57\u989c\u8272\u5c31\u662f\u7528\u6237\u9009\u4e2d\u7684\u5b57\u5e55\u989c\u8272\u672c\u8eab\u2014\u2014\u8fd9\u6837\u5f53\u7528\u6237\u9009\u62e9"\u6a31\u82b1\u7c89"\u65f6，\u4ee3\u7801\u5757\u4e2d\u7684 '#FFB3C1' \u503c\u6587\u5b57\u4e5f\u4f1a\u53d8\u6210\u7c89\u8272，\u5f62\u6210\u914d\u7f6e\u4e0e\u5c55\u793a\u7684\u4e00\u81f4\u6027\u53cd\u9988\u3002\u5e95\u90e8\u6807\u6ce8"\u2605 6.1.1 \u65b0\u589e\u5b57\u6bb5"\u660e\u786e\u6807\u8bc6\u4e86\u8fd9\u56db\u4e2a\u5b57\u6bb5\u662f\u7248\u672c\u65b0\u589e\u80fd\u529b\u3002<\/p>\n

7.3.5 \u5b57\u5e55\u573a\u666f\u63a8\u8350\u5217\u8868<\/h5>\n

\/\/ ===== \u533a\u5757 5：\u5b57\u5e55\u573a\u666f\u63a8\u8350\u5217\u8868（\u5de6\u8272\u6761 + \u70b9\u51fb\u5957\u7528\u8bed\u8a00\u7ec4\u5408） =====<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🎬 \u6b22\u5531\u5b57\u5e55\u573a\u666f\u63a8\u8350'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u70b9\u51fb\u5957\u7528\u8bed\u8a00\u7ec4\u5408'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

ForEach<\/span>(<\/span>this<\/span>.<\/span>sceneList,<\/span> (<\/span>item:<\/span> CaptionScene,<\/span> idx:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n \/\/ \u5de6\u8272\u6761（\u7d2b\/\u9752\/\u91d1\u8f6e\u6362）<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>width<\/span>(<\/span>4<\/span>)<\/span>.<\/span>height<\/span>(<\/span>42<\/span>)<\/span>.<\/span>borderRadius<\/span>(<\/span>2<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>idx %<\/span> 3<\/span> ===<\/span> 0<\/span> ?<\/span> COLORS<\/span>.<\/span>purple :<\/span> (<\/span>idx %<\/span> 3<\/span> ===<\/span> 1<\/span> ?<\/span> COLORS<\/span>.<\/span>cyan :<\/span> COLORS<\/span>.<\/span>gold)<\/span>)<\/span><\/p>\n

Column<\/span>(<\/span>{<\/span> space:<\/span> 3<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>item.<\/span>scene)<\/span>.<\/span>fontSize<\/span>(<\/span>12<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n Text<\/span>(<\/span>item.<\/span>desc)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u6e90 '<\/span> +<\/span> item.<\/span>src +<\/span> ' \u2192 \u76ee\u6807 '<\/span> +<\/span> item.<\/span>tgt)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>cyan)<\/span>
\n }<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span><\/p>\n

Text<\/span>(<\/span>'\u5957\u7528 \u203a'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>purple)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>10<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n .<\/span>alignItems<\/span>(<\/span>VerticalAlign.<\/span>Center)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>switchSourceLang<\/span>(<\/span>item.<\/span>src)<\/span>;<\/span>
\n this<\/span>.<\/span>tgtLang =<\/span> item.<\/span>tgt;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>,<\/span> (<\/span>item:<\/span> CaptionScene)<\/span> =><\/span> item.<\/span>scene)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>14<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span><\/p>\n

\u533a\u5757\u4e94\u662f\u5b57\u5e55\u573a\u666f\u63a8\u8350\u5217\u8868，\u5c06\u4e94\u79cd K \u6b4c\u573a\u666f\u53ca\u5176\u63a8\u8350\u7684\u8bed\u8a00\u7ec4\u5408\u4ee5\u5217\u8868\u5f62\u5f0f\u5c55\u793a\u3002\u6bcf\u6761\u573a\u666f\u884c\u5de6\u4fa7\u6709\u4e00\u6761 4 \u50cf\u7d20\u5bbd\u300142 \u50cf\u7d20\u9ad8\u7684\u5f69\u8272\u7ad6\u6761，\u989c\u8272\u6309\u7d22\u5f15\u6a21 3 \u8f6e\u6362\u4f7f\u7528\u7d2b\u8272\u3001\u9752\u8272\u4e0e\u91d1\u8272，\u4e3a\u5217\u8868\u9879\u589e\u52a0\u89c6\u89c9\u533a\u5206\u5ea6\u3002\u4e2d\u95f4\u533a\u57df\u5c55\u793a\u573a\u666f\u540d（\u7c97\u4f53\u767d\u8272）\u3001\u573a\u666f\u8bf4\u660e（\u8f85\u52a9\u7d2b\u8272）\u4e0e\u63a8\u8350\u8bed\u8a00\u7ec4\u5408（\u9752\u8272"\u6e90 en \u2192 \u76ee\u6807 zh-en"\u683c\u5f0f）\u3002\u53f3\u4fa7"\u5957\u7528 \u203a"\u6587\u5b57\u6697\u793a\u8be5\u884c\u53ef\u70b9\u51fb\u3002<\/p>\n

\u70b9\u51fb\u4e8b\u4ef6\u8c03\u7528 switchSourceLang(item.src) \u8bbe\u7f6e\u6e90\u8bed\u8a00（\u8be5\u65b9\u6cd5\u5185\u90e8\u4f1a\u8054\u52a8\u76ee\u6807\u8bed\u8a00\u9ed8\u8ba4\u503c），\u968f\u540e\u76f4\u63a5\u5c06 tgtLang \u8986\u76d6\u4e3a\u573a\u666f\u63a8\u8350\u7684\u76ee\u6807\u8bed\u8a00\u503c\u2014\u2014\u4e24\u6b65\u64cd\u4f5c\u786e\u4fdd\u4e86\u8bed\u8a00\u7ec4\u5408\u7684\u51c6\u786e\u5957\u7528\u3002\u8fd9\u4e00\u8bbe\u8ba1\u5c06\u62bd\u8c61\u7684\u914d\u7f6e\u53c2\u6570\u8f6c\u5316\u4e3a\u5177\u4f53\u7684\u4e1a\u52a1\u573a\u666f\u4e00\u952e\u9884\u8bbe，\u5927\u5e45\u964d\u4f4e\u4e86\u7528\u6237\u7406\u89e3\u4e0e\u914d\u7f6e\u6210\u672c，\u662f"\u573a\u666f\u9a71\u52a8\u914d\u7f6e"\u8bbe\u8ba1\u601d\u60f3\u7684\u5178\u578b\u5b9e\u73b0\u3002<\/p>\n

7.4 \u6211\u7684Tab：\u4f1a\u5458\u5927\u5361\u4e0e\u529f\u80fd\u6e05\u5355<\/h4>\n

\/** \u6211\u7684 Tab：\u7528\u6237\u4fe1\u606f+\u4f1a\u5458\u6e10\u53d8\u5927\u5361 + \u529f\u80fd\u6e05\u5355\u884c *\/<\/span>
\n @<\/span>Builder<\/span><\/span>
\n tabMine<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 12<\/span> }<\/span>)<\/span> {<\/span>
\n \/\/ 1. \u7528\u6237\u4fe1\u606f + \u9ec4\u91d1\u9ea6\u9738\u4f1a\u5458\u6e10\u53d8\u5927\u5361（\u9713\u8679\u7d2b \u2192 \u6b22\u5531\u7c89）<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 12<\/span> }<\/span>)<\/span> {<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 12<\/span> }<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🎤'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>26<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>54<\/span>)<\/span>.<\/span>height<\/span>(<\/span>54<\/span>)<\/span>.<\/span>borderRadius<\/span>(<\/span>27<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>purpleD)<\/span>
\n .<\/span>justifyContent<\/span>(<\/span>FlexAlign.<\/span>Center)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span><\/p>\n

Column<\/span>(<\/span>{<\/span> space:<\/span> 4<\/span> }<\/span>)<\/span> {<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 6<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u963f\u6f88\u7231\u9ad8\u97f3'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>16<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Text<\/span>(<\/span>'\u9ec4\u91d1\u9ea6\u9738 VIP'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>purpleD)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> left:<\/span> 6<\/span>,<\/span> right:<\/span> 6<\/span>,<\/span> top:<\/span> 2<\/span>,<\/span> bottom:<\/span> 2<\/span> }<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>gold)<\/span>.<\/span>borderRadius<\/span>(<\/span>7<\/span>)<\/span>
\n }<\/span>
\n Text<\/span>(<\/span>'\u6b22\u5531 ID：mb1120 \u00b7 \u5df2\u8fde\u7eed\u5f00\u55d3\u6b22\u5531 89 \u5929'<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>opacity<\/span>(<\/span>0.72<\/span>)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\/\/ \u4e09\u683c\u6b22\u5531\u6570\u636e<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 3<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'36'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Text<\/span>(<\/span>'\u6b22\u5531\u4f5c\u54c1'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>opacity<\/span>(<\/span>0.7<\/span>)<\/span>
\n }<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span><\/p>\n

Column<\/span>(<\/span>{<\/span> space:<\/span> 3<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'2.8\u4e07'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Text<\/span>(<\/span>'\u83b7\u8d5e\u603b\u6570'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>opacity<\/span>(<\/span>0.7<\/span>)<\/span>
\n }<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span><\/p>\n

Column<\/span>(<\/span>{<\/span> space:<\/span> 3<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'520'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Text<\/span>(<\/span>'\u6b22\u5531\u5c0f\u65f6'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>opacity<\/span>(<\/span>0.7<\/span>)<\/span>
\n }<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> top:<\/span> 2<\/span> }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>16<\/span>)<\/span>.<\/span>borderRadius<\/span>(<\/span>14<\/span>)<\/span>
\n .<\/span>linearGradient<\/span>(<\/span>{<\/span> angle:<\/span> 135<\/span>,<\/span> colors:<\/span> [<\/span>[<\/span>COLORS<\/span>.<\/span>purpleD,<\/span> 0<\/span>]<\/span>,<\/span> [<\/span>COLORS<\/span>.<\/span>purple,<\/span> 1<\/span>]<\/span>]<\/span> }<\/span>)<\/span><\/p>\n

\u6211\u7684 Tab \u7684\u9876\u90e8\u662f\u7528\u6237\u4fe1\u606f\u4e0e\u4f1a\u5458\u6743\u76ca\u7684\u6e10\u53d8\u5927\u5361，\u4f7f\u7528\u4e0e\u5e94\u7528\u5934\u90e8\u76f8\u540c\u7684 135 \u5ea6\u6e10\u53d8\u80cc\u666f\u3002\u5927\u5361\u5206\u4e3a\u4e0a\u4e0b\u4e24\u90e8\u5206：\u4e0a\u90e8\u662f\u5934\u50cf（\u5706\u5f62\u6df1\u7d2b\u5e95+\u5927\u53f7 🎤）\u4e0e\u7528\u6237\u4fe1\u606f（\u6635\u79f0"\u963f\u6f88\u7231\u9ad8\u97f3"+\u91d1\u8272 VIP \u6807\u7b7e+\u6b22\u5531 ID \u4e0e\u8fde\u7eed\u5929\u6570），\u4e0b\u90e8\u662f\u4e09\u683c\u6b22\u5531\u6570\u636e（\u6b22\u5531\u4f5c\u54c1 36 \u9996\u4f5c\u54c1\u3001\u83b7\u8d5e\u603b\u6570 2.8 \u4e07\u3001\u6b22\u5531\u5c0f\u65f6 520 \u5c0f\u65f6）\u3002\u4e09\u683c\u6570\u636e\u901a\u8fc7 Row \u4e0e layoutWeight(1) \u5b9e\u73b0\u5747\u7b49\u4e09\u7b49\u5206\u5e03\u5c40，\u6570\u503c\u4f7f\u7528\u7c97\u4f53\u767d\u8272，\u6807\u7b7e\u4f7f\u7528 70% \u900f\u660e\u5ea6\u7684\u767d\u8272（opacity(0.7)），\u5f62\u6210"\u6570\u503c\u9192\u76ee\u2014\u6807\u7b7e\u5f31\u5316"\u7684\u5c42\u7ea7\u3002<\/p>\n

\/\/ 2. \u529f\u80fd\u6e05\u5355\u884c（UserStat）<\/span>
\n ForEach<\/span>(<\/span>this<\/span>.<\/span>statList,<\/span> (<\/span>item:<\/span> UserStat)<\/span> =><\/span> {<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>item.<\/span>icon)<\/span>.<\/span>fontSize<\/span>(<\/span>16<\/span>)<\/span>
\n Text<\/span>(<\/span>item.<\/span>label)<\/span>.<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n Text<\/span>(<\/span>item.<\/span>value)<\/span>.<\/span>fontSize<\/span>(<\/span>10<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n if<\/span> (<\/span>item.<\/span>arrow)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u203a'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>14<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n }<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>12<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>10<\/span>)<\/span>
\n }<\/span>,<\/span> (<\/span>item:<\/span> UserStat)<\/span> =><\/span> item.<\/span>label)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span><\/p>\n

\u529f\u80fd\u6e05\u5355\u901a\u8fc7 ForEach \u904d\u5386 statList \u6e32\u67d3\u516b\u6761\u529f\u80fd\u884c，\u6bcf\u884c\u91c7\u7528 Row \u6a2a\u5411\u5e03\u5c40：\u5de6\u4fa7 emoji \u56fe\u6807\u3001\u4e2d\u95f4\u529f\u80fd\u540d（layoutWeight(1) \u586b\u5145\u7a7a\u95f4）\u3001\u53f3\u4fa7\u72b6\u6001\/\u6570\u503c\u6587\u672c\u3001\u6700\u53f3\u4fa7\u6761\u4ef6\u6e32\u67d3\u7684\u5bfc\u822a\u7bad\u5934（\u203a）\u3002arrow \u5e03\u5c14\u5b57\u6bb5\u63a7\u5236\u7bad\u5934\u662f\u5426\u663e\u793a，\u867d\u7136\u5f53\u524d Mock \u6570\u636e\u5168\u90e8\u4e3a true，\u4f46\u4fdd\u7559\u4e86\u7eaf\u4fe1\u606f\u884c\u4e0d\u663e\u793a\u7bad\u5934\u7684\u6269\u5c55\u80fd\u529b\u3002\u6bcf\u884c\u4f7f\u7528\u5361\u7247\u5e95\u8272\u4e0e 10 \u50cf\u7d20\u5706\u89d2，\u5f62\u6210\u7d27\u51d1\u800c\u6574\u9f50\u7684\u8bbe\u7f6e\u5217\u8868\u5916\u89c2\u3002<\/p>\n

\u516b\u3001\u56fe\u8868\u5361\u4e0e\u5e95\u90e8\u5bfc\u822a<\/h3>\n

8.1 \u6708\u5ea6\u6b22\u5531\u67f1\u72b6\u56fe<\/h4>\n

\/** \u56fe\u8868\u5361：\u6708\u5ea6\u6b22\u5531\u65f6\u957f\u67f1\u72b6\u56fe（6 \u4e2a\u6708，\u67f1\u9ad8\u968f\u547c\u5438 \u00b15% \u6ce2\u52a8） *\/<\/span>
\n @<\/span>Builder<\/span><\/span>
\n chartCard<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'📊 \u6708\u5ea6\u6b22\u5531\u65f6\u957f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u5355\u4f4d：\u5c0f\u65f6'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span><\/p>\n

\/\/ \u6e10\u53d8\u67f1\u72b6\u56fe（Column + ForEach \u5b9e\u73b0）<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 8<\/span> }<\/span>)<\/span> {<\/span>
\n ForEach<\/span>(<\/span>MONTH_IDX<\/span>,<\/span> (<\/span>i:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 5<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>MONTH_HOURS<\/span>[<\/span>i]<\/span>.<\/span>toString<\/span>(<\/span>)<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>this<\/span>.<\/span>breath ?<\/span> COLORS<\/span>.<\/span>cyan :<\/span> COLORS<\/span>.<\/span>sub)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>width<\/span>(<\/span>18<\/span>)<\/span>
\n .<\/span>height<\/span>(<\/span>Math.<\/span>max<\/span>(<\/span>20<\/span>,<\/span> MONTH_HOURS<\/span>[<\/span>i]<\/span> \/<\/span> MONTH_MAX<\/span> *<\/span> 110<\/span> *<\/span> (<\/span>this<\/span>.<\/span>breath ?<\/span> 1.05<\/span> :<\/span> 0.95<\/span>)<\/span>)<\/span>)<\/span>
\n .<\/span>borderRadius<\/span>(<\/span>5<\/span>)<\/span>
\n .<\/span>linearGradient<\/span>(<\/span>{<\/span> angle:<\/span> 180<\/span>,<\/span> colors:<\/span> [<\/span>[<\/span>COLORS<\/span>.<\/span>purple,<\/span> 0<\/span>]<\/span>,<\/span> [<\/span>COLORS<\/span>.<\/span>pink,<\/span> 1<\/span>]<\/span>]<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>MONTH_LABELS<\/span>[<\/span>i]<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>text3)<\/span>
\n }<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span>
\n }<\/span>,<\/span> (<\/span>i:<\/span> number<\/span>)<\/span> =><\/span> 'm'<\/span> +<\/span> i.<\/span>toString<\/span>(<\/span>)<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>VerticalAlign.<\/span>Bottom)<\/span>.<\/span>height<\/span>(<\/span>150<\/span>)<\/span><\/p>\n

\/\/ \u6c47\u603b\u884c<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u8fd1 6 \u6708\u7d2f\u8ba1 520 \u5c0f\u65f6'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u73af\u6bd4 +13.0%'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>8<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>green)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>14<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span>
\n }<\/span><\/p>\n

chartCard Builder \u5b9e\u73b0\u4e86\u4e00\u4e2a\u7eaf ArkUI \u58f0\u660e\u5f0f\u7684\u67f1\u72b6\u56fe\u7ec4\u4ef6，\u65e0\u9700\u5f15\u5165\u4efb\u4f55\u56fe\u8868\u5e93\u3002\u67f1\u72b6\u56fe\u4f7f\u7528 Row \u5bb9\u5668\u6a2a\u5411\u6392\u5217\u516d\u4e2a\u6708\u4efd\u7684\u6570\u636e\u5217，\u6bcf\u5217\u901a\u8fc7 Column \u7eb5\u5411\u5806\u53e0\u6570\u503c\u6807\u7b7e（\u9876\u90e8）\u3001\u67f1\u4f53（\u4e2d\u95f4）\u4e0e\u6708\u4efd\u6807\u7b7e（\u5e95\u90e8）\u3002Row \u8bbe\u7f6e alignItems(VerticalAlign.Bottom) \u4f7f\u6240\u6709\u5217\u5e95\u90e8\u5bf9\u9f50，\u9ad8\u5ea6 150 \u50cf\u7d20\u3002<\/p>\n

\u67f1\u4f53\u9ad8\u5ea6\u901a\u8fc7\u6570\u5b66\u516c\u5f0f\u8ba1\u7b97：Math.max(20, MONTH_HOURS[i] \/ MONTH_MAX * 110 * (this.breath ? 1.05 : 0.95))\u3002MONTH_HOURS[i] \/ MONTH_MAX \u5c06\u6708\u5ea6\u6570\u503c\u5f52\u4e00\u5316\u4e3a 0-1 \u7684\u6bd4\u4f8b，\u4e58\u4ee5 110（\u67f1\u4f53\u6700\u5927\u9ad8\u5ea6\u57fa\u6570），\u518d\u4e58\u4ee5\u547c\u5438\u7cfb\u6570（breath \u4e3a true \u65f6 1.05，\u4e3a false \u65f6 0.95），\u5b9e\u73b0 \u00b15% \u7684\u67f1\u9ad8\u6ce2\u52a8\u3002Math.max(20, …) \u786e\u4fdd\u67f1\u4f53\u6700\u5c0f\u9ad8\u5ea6 20 \u50cf\u7d20，\u9632\u6b62\u4f4e\u6570\u503c\u6708\u4efd\u7684\u67f1\u4f53\u8fc7\u77ee\u4e0d\u53ef\u89c1\u3002\u67f1\u4f53\u4f7f\u7528 180 \u5ea6\u7eb5\u5411\u6e10\u53d8\u4ece\u7d2b\u8272\u5230\u7c89\u8272，borderRadius(5) \u4f7f\u67f1\u9876\u5706\u89d2，\u89c6\u89c9\u4e0a\u67d4\u548c\u800c\u4e0d\u5c16\u9510\u3002\u6570\u503c\u6807\u7b7e\u7684\u989c\u8272\u4e5f\u53d7 breath \u9a71\u52a8\u5728\u9752\u8272\u4e0e\u8f85\u52a9\u7d2b\u8272\u4e4b\u95f4\u5207\u6362，\u4e0e\u67f1\u9ad8\u6ce2\u52a8\u5f62\u6210\u53cc\u91cd\u52a8\u6548\u8054\u52a8\u3002<\/p>\n

ForEach \u7684\u952e\u503c\u751f\u6210\u51fd\u6570\u4f7f\u7528 'm' + i.toString()（\u5982 m0\u3001m1）\u4f5c\u4e3a\u6bcf\u5217\u7684\u552f\u4e00\u952e，\u786e\u4fdd\u5217\u8868\u6e32\u67d3\u65f6\u5143\u7d20\u6b63\u786e\u590d\u7528\u3002\u6c47\u603b\u884c\u5c55\u793a"\u8fd1 6 \u6708\u7d2f\u8ba1 520 \u5c0f\u65f6"\u4e0e"\u73af\u6bd4 +13.0%"（\u7eff\u8272\u6b63\u503c），\u4e3a\u67f1\u72b6\u56fe\u63d0\u4f9b\u6570\u636e\u603b\u89c8\u3002<\/p>\n

8.2 \u5e95\u90e8\u5bfc\u822a\u680f<\/h4>\n

\/** \u5e95\u90e8\u5bfc\u822a：4 Tab \u5355\u6392（\u9009\u4e2d\u9713\u8679\u7d2b\u9ad8\u4eae + \u56fe\u6807\u653e\u5927） *\/<\/span>
\n @<\/span>Builder<\/span><\/span>
\n tabBar<\/span>(<\/span>)<\/span> {<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n ForEach<\/span>(<\/span>TAB_LIST<\/span>,<\/span> (<\/span>t:<\/span> TabMeta,<\/span> idx:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 3<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>t.<\/span>icon)<\/span>.<\/span>fontSize<\/span>(<\/span>this<\/span>.<\/span>currentTab ===<\/span> idx ?<\/span> 20<\/span> :<\/span> 17<\/span>)<\/span>
\n .<\/span>opacity<\/span>(<\/span>this<\/span>.<\/span>currentTab ===<\/span> idx ?<\/span> 1<\/span> :<\/span> 0.65<\/span>)<\/span>
\n Text<\/span>(<\/span>t.<\/span>label)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>this<\/span>.<\/span>currentTab ===<\/span> idx ?<\/span> COLORS<\/span>.<\/span>tabOn :<\/span> COLORS<\/span>.<\/span>text3)<\/span>
\n .<\/span>fontWeight<\/span>(<\/span>this<\/span>.<\/span>currentTab ===<\/span> idx ?<\/span> FontWeight.<\/span>Bold :<\/span> FontWeight.<\/span>Normal)<\/span>
\n }<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 7<\/span>,<\/span> bottom:<\/span> 7<\/span> }<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>currentTab =<\/span> idx;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>,<\/span> (<\/span>t:<\/span> TabMeta)<\/span> =><\/span> t.<\/span>label)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>
\n .<\/span>border<\/span>(<\/span>{<\/span> width:<\/span> {<\/span> top:<\/span> 1<\/span> }<\/span>,<\/span> color:<\/span> COLORS<\/span>.<\/span>line }<\/span>)<\/span>
\n }<\/span><\/p>\n

\u5e95\u90e8\u5bfc\u822a\u680f\u4f7f\u7528 Row \u5bb9\u5668\u7b49\u5206\u6392\u5217\u56db\u4e2a Tab，\u6bcf\u4e2a Tab \u901a\u8fc7 layoutWeight(1) \u5747\u5206\u5bbd\u5ea6\u3002\u9009\u4e2d\u6001\u7684\u89c6\u89c9\u5dee\u5f02\u901a\u8fc7\u4e09\u4e2a\u7ef4\u5ea6\u4f53\u73b0：\u56fe\u6807 fontSize \u4ece 17 \u653e\u5927\u5230 20（\u653e\u5927\u6697\u793a\u91cd\u8981\u6027）\u3001\u56fe\u6807 opacity \u4ece 0.65 \u63d0\u5347\u5230 1.0（\u4e0d\u900f\u660e\u5ea6\u589e\u5f3a）\u3001\u6807\u7b7e fontColor \u4ece\u7070\u7d2b text3 \u5207\u6362\u5230\u9713\u8679\u7d2b tabOn \u5e76\u52a0\u7c97\u3002\u8fd9\u79cd\u591a\u7ef4\u5ea6\u7684\u9009\u4e2d\u6001\u5dee\u5f02\u786e\u4fdd\u4e86\u7528\u6237\u80fd\u591f\u6e05\u6670\u8bc6\u522b\u5f53\u524d\u6240\u5728 Tab\u3002<\/p>\n

ForEach \u7684\u952e\u503c\u751f\u6210\u51fd\u6570\u4f7f\u7528 t.label（Tab \u6807\u7b7e\u540d）\u4f5c\u4e3a\u552f\u4e00\u952e\u3002\u70b9\u51fb Tab \u5c06 currentTab \u8d4b\u503c\u4e3a\u5bf9\u5e94\u7d22\u5f15，\u89e6\u53d1 build() \u4e2d\u7684\u6761\u4ef6\u6e32\u67d3\u5207\u6362\u663e\u793a\u5bf9\u5e94\u7684 Tab \u5185\u5bb9\u3002\u5e95\u90e8\u5bfc\u822a\u680f\u4f7f\u7528 card \u5e95\u8272\u4e0e\u4ec5\u9876\u90e8\u7684 1 \u50cf\u7d20\u7ebf\u6761\u8fb9\u6846（border({ width: { top: 1 }, color: COLORS.line })），\u4e0e\u4e0a\u65b9\u5185\u5bb9\u533a\u5f62\u6210\u89c6\u89c9\u5206\u9694\u3002<\/p>\n

\u4e5d\u3001\u5f39\u7a97\u7cfb\u7edf<\/h3>\n

9.1 \u5168\u5c4f\u906e\u7f69<\/h4>\n

\/** \u5f39\u7a97\u5168\u5c4f\u906e\u7f69（\u70b9\u51fb\u906e\u7f69\u5173\u95ed\u5f39\u7a97） *\/<\/span>
\n @<\/span>Builder<\/span><\/span>
\n modalOverlay<\/span>(<\/span>onClose<\/span>:<\/span> (<\/span>)<\/span> =><\/span> void<\/span>)<\/span> {<\/span>
\n Stack<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>)<\/span>.<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>height<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>mask)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>height<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>alignContent<\/span>(<\/span>Alignment.<\/span>Center)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> onClose<\/span>(<\/span>)<\/span>)<\/span>
\n }<\/span><\/p>\n

modalOverlay \u662f\u5f39\u7a97\u7cfb\u7edf\u7684\u5e95\u5c42\u906e\u7f69 Builder，\u5b83\u63a5\u6536\u4e00\u4e2a onClose \u56de\u8c03\u51fd\u6570\u4f5c\u4e3a\u53c2\u6570\u3002\u906e\u7f69\u4f7f\u7528 rgba(10,4,20,0.7) \u534a\u900f\u660e\u80cc\u666f\u8272（\u5728 COLORS.mask \u4e2d\u5b9a\u4e49），\u8986\u76d6\u5168\u5c4f\u3002Stack \u5bb9\u5668\u8bbe\u7f6e alignContent(Alignment.Center) \u4f7f\u540e\u7eed\u5f39\u7a97\u9762\u677f\u5185\u5bb9\u5c45\u4e2d\u663e\u793a\u3002\u906e\u7f69\u7684 onClick \u4e8b\u4ef6\u7ed1\u5b9a onClose \u56de\u8c03，\u7528\u6237\u70b9\u51fb\u906e\u7f69\u533a\u57df（\u5f39\u7a97\u9762\u677f\u5916\u7684\u533a\u57df）\u5373\u53ef\u5173\u95ed\u5f39\u7a97\u2014\u2014\u8fd9\u662f\u6a21\u6001\u5f39\u7a97\u7684\u6807\u51c6\u4ea4\u4e92\u6a21\u5f0f，\u63d0\u4f9b\u4e86\u9664\u5173\u95ed\u6309\u94ae\u5916\u7684\u5feb\u6377\u9000\u51fa\u65b9\u5f0f\u3002<\/p>\n

9.2 \u521b\u5efa\u6b4c\u623f\u5f39\u7a97<\/h4>\n

\/** \u521b\u5efa\u6b4c\u623f\u5f39\u7a97\u9762\u677f（\u540d\u79f0 + \u7c7b\u578b\u8f93\u5165） *\/<\/span>
\n @<\/span>Builder<\/span><\/span>
\n panelAdd<\/span>(<\/span>onClose<\/span>:<\/span> (<\/span>)<\/span> =><\/span> void<\/span>)<\/span> {<\/span>
\n Stack<\/span>(<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>modalOverlay<\/span>(<\/span>onClose)<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 12<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u521b\u5efa\u6b4c\u623f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>15<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span><\/p>\n

Column<\/span>(<\/span>{<\/span> space:<\/span> 6<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u6b4c\u623f\u540d\u79f0'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n TextInput<\/span>(<\/span>{<\/span> text:<\/span> this<\/span>.<\/span>formName,<\/span> placeholder:<\/span> '\u5982：\u6df1\u591c\u60c5\u6b4c\u623f'<\/span> }<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>8<\/span>)<\/span>
\n .<\/span>onChange<\/span>(<\/span>(<\/span>value:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>formName =<\/span> value;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span><\/p>\n

Column<\/span>(<\/span>{<\/span> space:<\/span> 6<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u623f\u95f4\u7c7b\u578b'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n TextInput<\/span>(<\/span>{<\/span> text:<\/span> this<\/span>.<\/span>formType,<\/span> placeholder:<\/span> '\u5982：\u638c\u9ea6 \/ \u6392\u9ea6 \/ \u8fde\u9ea6'<\/span> }<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>8<\/span>)<\/span>
\n .<\/span>onChange<\/span>(<\/span>(<\/span>value:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>formType =<\/span> value;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span><\/p>\n

Row<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u53d6\u6d88'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>12<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 9<\/span>,<\/span> bottom:<\/span> 9<\/span> }<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>9<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> onClose<\/span>(<\/span>)<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u521b\u5efa'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>12<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 9<\/span>,<\/span> bottom:<\/span> 9<\/span> }<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>purple)<\/span>.<\/span>borderRadius<\/span>(<\/span>9<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>saveRoom<\/span>(<\/span>)<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'78%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>16<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>14<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>height<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>alignContent<\/span>(<\/span>Alignment.<\/span>Center)<\/span>
\n }<\/span><\/p>\n

\u521b\u5efa\u6b4c\u623f\u5f39\u7a97\u5728 Stack \u4e2d\u5148\u6e32\u67d3\u906e\u7f69\u5c42（modalOverlay），\u518d\u6e32\u67d3\u5c45\u4e2d\u7684 Column \u9762\u677f\u3002\u9762\u677f\u5bbd\u5ea6 78%，\u4f7f\u7528\u5361\u7247\u5e95\u8272\u4e0e 14 \u50cf\u7d20\u5706\u89d2\u3002\u9762\u677f\u5185\u90e8\u4ece\u4e0a\u5230\u4e0b\u4e3a：\u6807\u9898"\u521b\u5efa\u6b4c\u623f"\u3001\u6b4c\u623f\u540d\u79f0\u8f93\u5165\u6846（TextInput \u7ed1\u5b9a formName \u72b6\u6001）\u3001\u623f\u95f4\u7c7b\u578b\u8f93\u5165\u6846（TextInput \u7ed1\u5b9a formType \u72b6\u6001，placeholder \u63d0\u793a\u4e09\u79cd\u7c7b\u578b）\u3001\u53d6\u6d88\u4e0e\u521b\u5efa\u6309\u94ae\u884c\u3002<\/p>\n

TextInput \u7684 text \u53c2\u6570\u7ed1\u5b9a\u5230\u5bf9\u5e94\u7684\u72b6\u6001\u53d8\u91cf，onChange \u56de\u8c03\u5728\u8f93\u5165\u53d8\u5316\u65f6\u66f4\u65b0\u72b6\u6001\u2014\u2014\u8fd9\u662f ArkUI \u8868\u5355\u53cc\u5411\u7ed1\u5b9a\u7684\u6807\u51c6\u6a21\u5f0f\u3002\u4e24\u4e2a\u6309\u94ae\u4f7f\u7528 layoutWeight(1) \u7b49\u5206\u5bbd\u5ea6，\u53d6\u6d88\u6309\u94ae\u4f7f\u7528\u8f85\u52a9\u8272\u6587\u5b57+\u82af\u7247\u8272\u5e95（\u5f31\u89c6\u89c9\u6743\u91cd），\u521b\u5efa\u6309\u94ae\u4f7f\u7528\u767d\u8272\u7c97\u4f53\u6587\u5b57+\u7d2b\u8272\u5e95（\u5f3a\u89c6\u89c9\u6743\u91cd），\u5f62\u6210\u4e3b\u6b21\u5206\u660e\u7684\u884c\u52a8\u5f15\u5bfc\u3002\u521b\u5efa\u6309\u94ae\u70b9\u51fb\u8c03\u7528 saveRoom() \u65b9\u6cd5\u4fdd\u5b58\u65b0\u5efa\u6b4c\u623f，\u8be5\u65b9\u6cd5\u5185\u90e8\u4f1a\u5173\u95ed\u5f39\u7a97\u5e76\u6e05\u7a7a\u8868\u5355\u3002<\/p>\n

9.3 \u7f16\u8f91\u6b4c\u623f\u5f39\u7a97<\/h4>\n

\/** \u7f16\u8f91\u6b4c\u623f\u5f39\u7a97\u9762\u677f（\u56de\u586b\u540d\u79f0 + \u7c7b\u578b） *\/<\/span>
\n @<\/span>Builder<\/span><\/span>
\n panelEdit<\/span>(<\/span>onClose<\/span>:<\/span> (<\/span>)<\/span> =><\/span> void<\/span>)<\/span> {<\/span>
\n Stack<\/span>(<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>modalOverlay<\/span>(<\/span>onClose)<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 12<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u7f16\u8f91\u6b4c\u623f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>15<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span><\/p>\n

Column<\/span>(<\/span>{<\/span> space:<\/span> 6<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u6b4c\u623f\u540d\u79f0'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n TextInput<\/span>(<\/span>{<\/span> text:<\/span> this<\/span>.<\/span>editName,<\/span> placeholder:<\/span> '\u6b4c\u623f\u540d\u79f0'<\/span> }<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>8<\/span>)<\/span>
\n .<\/span>onChange<\/span>(<\/span>(<\/span>value:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>editName =<\/span> value;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span><\/p>\n

Column<\/span>(<\/span>{<\/span> space:<\/span> 6<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u623f\u95f4\u7c7b\u578b'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>9<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n TextInput<\/span>(<\/span>{<\/span> text:<\/span> this<\/span>.<\/span>editType,<\/span> placeholder:<\/span> '\u623f\u95f4\u7c7b\u578b'<\/span> }<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>11<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>8<\/span>)<\/span>
\n .<\/span>onChange<\/span>(<\/span>(<\/span>value:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>editType =<\/span> value;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span><\/p>\n

Row<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u53d6\u6d88'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>12<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 9<\/span>,<\/span> bottom:<\/span> 9<\/span> }<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>9<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> onClose<\/span>(<\/span>)<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u4fdd\u5b58\u4fee\u6539'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>12<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 9<\/span>,<\/span> bottom:<\/span> 9<\/span> }<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>cyan)<\/span>.<\/span>borderRadius<\/span>(<\/span>9<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>updateRoom<\/span>(<\/span>)<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'78%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>16<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>14<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>height<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>alignContent<\/span>(<\/span>Alignment.<\/span>Center)<\/span>
\n }<\/span><\/p>\n

\u7f16\u8f91\u6b4c\u623f\u5f39\u7a97\u4e0e\u521b\u5efa\u5f39\u7a97\u7ed3\u6784\u9ad8\u5ea6\u4e00\u81f4，\u533a\u522b\u5728\u4e8e：\u6807\u9898\u4e3a"\u7f16\u8f91\u6b4c\u623f"\u3001TextInput \u7ed1\u5b9a editName \u4e0e editType \u72b6\u6001（\u8fd9\u4e24\u4e2a\u72b6\u6001\u5728 openEditRoom \u65b9\u6cd5\u4e2d\u5df2\u88ab\u56de\u586b\u4e86\u5f53\u524d\u6b4c\u623f\u7684\u6570\u636e）\u3001\u786e\u8ba4\u6309\u94ae\u6587\u6848\u4e3a"\u4fdd\u5b58\u4fee\u6539"\u4e14\u4f7f\u7528\u9752\u8272\u80cc\u666f（COLORS.cyan，\u533a\u522b\u4e8e\u521b\u5efa\u5f39\u7a97\u7684\u7d2b\u8272\u6309\u94ae）\u3001\u70b9\u51fb\u8c03\u7528 updateRoom() \u65b9\u6cd5\u4fdd\u5b58\u4fee\u6539\u3002\u7f16\u8f91\u5f39\u7a97\u7684 TextInput \u5728 openEditRoom \u88ab\u8c03\u7528\u65f6\u5c31\u5df2\u7ecf\u901a\u8fc7\u72b6\u6001\u8d4b\u503c\u5b8c\u6210\u4e86\u6570\u636e\u56de\u586b，\u7528\u6237\u6253\u5f00\u5f39\u7a97\u5373\u53ef\u770b\u5230\u9884\u586b\u7684\u5f53\u524d\u6b4c\u623f\u540d\u79f0\u4e0e\u7c7b\u578b，\u8fd9\u662f\u7f16\u8f91\u6d41\u7a0b\u7684\u6807\u51c6\u4ea4\u4e92\u3002<\/p>\n

9.4 \u89e3\u6563\u6b4c\u623f\u786e\u8ba4\u5f39\u7a97<\/h4>\n

\/** \u89e3\u6563\u6b4c\u623f\u786e\u8ba4\u5f39\u7a97\u9762\u677f *\/<\/span>
\n @<\/span>Builder<\/span><\/span>
\n panelDel<\/span>(<\/span>onClose<\/span>:<\/span> (<\/span>)<\/span> =><\/span> void<\/span>)<\/span> {<\/span>
\n Stack<\/span>(<\/span>)<\/span> {<\/span>
\n this<\/span>.<\/span>modalOverlay<\/span>(<\/span>onClose)<\/span>
\n Column<\/span>(<\/span>{<\/span> space:<\/span> 12<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u89e3\u6563\u6b4c\u623f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>15<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n Text<\/span>(<\/span>'\u786e\u8ba4\u89e3\u6563\u8be5\u6b4c\u623f\u5417？\u89e3\u6563\u540e\u623f\u5185\u9ea6\u53cb\u4e0e\u5408\u5531\u8bb0\u5f55\u5c06\u4e00\u5e76\u6e05\u7406，\u4e14\u4e0d\u53ef\u6062\u590d\u3002'<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>10<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>maxLines<\/span>(<\/span>2<\/span>)<\/span>.<\/span>textOverflow<\/span>(<\/span>{<\/span> overflow:<\/span> TextOverflow.<\/span>Ellipsis }<\/span>)<\/span>
\n Row<\/span>(<\/span>{<\/span> space:<\/span> 10<\/span> }<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u53d6\u6d88'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>12<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>sub)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 9<\/span>,<\/span> bottom:<\/span> 9<\/span> }<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>chip)<\/span>.<\/span>borderRadius<\/span>(<\/span>9<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> onClose<\/span>(<\/span>)<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u786e\u8ba4\u89e3\u6563'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>12<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>COLORS<\/span>.<\/span>title)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n .<\/span>layoutWeight<\/span>(<\/span>1<\/span>)<\/span>.<\/span>textAlign<\/span>(<\/span>TextAlign.<\/span>Center)<\/span>
\n .<\/span>padding<\/span>(<\/span>{<\/span> top:<\/span> 9<\/span>,<\/span> bottom:<\/span> 9<\/span> }<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>pink)<\/span>.<\/span>borderRadius<\/span>(<\/span>9<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>delRoom<\/span>(<\/span>)<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'78%'<\/span>)<\/span>.<\/span>padding<\/span>(<\/span>16<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>COLORS<\/span>.<\/span>card)<\/span>.<\/span>borderRadius<\/span>(<\/span>14<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>height<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>alignContent<\/span>(<\/span>Alignment.<\/span>Center)<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\u89e3\u6563\u6b4c\u623f\u786e\u8ba4\u5f39\u7a97\u662f\u4e00\u4e2a\u7eaf\u786e\u8ba4\u578b\u5f39\u7a97，\u4e0d\u542b\u8f93\u5165\u6846，\u53ea\u6709\u6807\u9898\u3001\u98ce\u9669\u63d0\u793a\u6587\u5b57\u4e0e\u53d6\u6d88\/\u786e\u8ba4\u6309\u94ae\u3002\u63d0\u793a\u6587\u5b57"\u786e\u8ba4\u89e3\u6563\u8be5\u6b4c\u623f\u5417？\u89e3\u6563\u540e\u623f\u5185\u9ea6\u53cb\u4e0e\u5408\u5531\u8bb0\u5f55\u5c06\u4e00\u5e76\u6e05\u7406，\u4e14\u4e0d\u53ef\u6062\u590d"\u660e\u786e\u544a\u77e5\u7528\u6237\u64cd\u4f5c\u7684\u4e0d\u53ef\u9006\u6027\u4e0e\u5f71\u54cd\u8303\u56f4\u2014\u2014\u8fd9\u662f\u6d89\u53ca\u6570\u636e\u9500\u6bc1\u64cd\u4f5c\u65f6\u7684\u5fc5\u8981\u544a\u77e5\u3002"\u786e\u8ba4\u89e3\u6563"\u6309\u94ae\u4f7f\u7528\u6b22\u5531\u7c89\u80cc\u666f（COLORS.pink），\u4e0e\u521b\u5efa\u5f39\u7a97\u7684\u7d2b\u8272\u6309\u94ae\u548c\u7f16\u8f91\u5f39\u7a97\u7684\u9752\u8272\u6309\u94ae\u5f62\u6210\u989c\u8272\u533a\u5206，\u6697\u793a\u8be5\u64cd\u4f5c\u5177\u6709\u66f4\u9ad8\u7684\u98ce\u9669\u6027\u3002\u70b9\u51fb\u786e\u8ba4\u8c03\u7528 delRoom() \u65b9\u6cd5\u6267\u884c\u5220\u9664，\u70b9\u51fb\u53d6\u6d88\u8c03\u7528 onClose \u5173\u95ed\u5f39\u7a97\u3002<\/p>\n

\u4e09\u5957\u5f39\u7a97（\u521b\u5efa\/\u7f16\u8f91\/\u89e3\u6563）\u7684\u786e\u8ba4\u6309\u94ae\u5206\u522b\u4f7f\u7528\u7d2b\u8272\u3001\u9752\u8272\u3001\u7c89\u8272\u4e09\u79cd\u4e0d\u540c\u989c\u8272，\u4e0d\u4ec5\u5f62\u6210\u89c6\u89c9\u533a\u5206，\u66f4\u9690\u542b\u4e86\u64cd\u4f5c\u7684\u98ce\u9669\u5c42\u7ea7：\u521b\u5efa（\u7d2b\u8272，\u4e3b\u9898\u8272，\u4e2d\u6027\u64cd\u4f5c）\u3001\u7f16\u8f91（\u9752\u8272，\u8f85\u52a9\u8272，\u5b89\u5168\u64cd\u4f5c）\u3001\u89e3\u6563（\u7c89\u8272，\u8b66\u793a\u8272，\u5371\u9669\u64cd\u4f5c）\u3002\u8fd9\u79cd\u901a\u8fc7\u989c\u8272\u8bed\u4e49\u7f16\u7801\u64cd\u4f5c\u98ce\u9669\u7b49\u7ea7\u7684\u8bbe\u8ba1，\u662f\u6df1\u8272\u4e3b\u9898\u5e94\u7528\u4e2d\u65e0\u969c\u788d\u4ea4\u4e92\u7684\u7ec6\u8282\u4f53\u73b0\u3002<\/p>\n

\u5341\u3001\u6280\u672f\u7279\u6027\u5bf9\u6bd4\u8868\u683c<\/h3>\n\n\u6280\u672f\u7ef4\u5ea6\u4f20\u7edf\u5b57\u5e55\u65b9\u6848\u672c\u6848\u4f8b AI \u5b57\u5e55\u65b9\u6848（Speech Kit 6.1.1）\u4f18\u52bf\u8bf4\u660e<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u5b57\u5e55\u751f\u6210\u65b9\u5f0f<\/td>\n\u9884\u5f55\u5165\u6587\u672c\u6216\u7b2c\u4e09\u65b9 ASR \u63a5\u53e3<\/td>\n\u7aef\u4fa7 AICaptionComponent \u7ec4\u4ef6\u5b9e\u65f6\u8bc6\u522b<\/td>\n\u7aef\u4fa7\u4f4e\u5ef6\u8fdf，\u65e0\u9700\u81ea\u5efa ASR \u670d\u52a1，\u7cfb\u7edf\u96c6\u6210\u5ea6\u9ad8<\/td>\n<\/tr>\n
\u6e90\u8bed\u8a00\u652f\u6301<\/td>\n\u56fa\u5b9a\u6216\u9700\u540e\u7aef\u914d\u7f6e<\/td>\nsourceLanguage \u5b57\u6bb5 \u2018zh\u2019|\u2018en\u2019 \u524d\u7aef\u52a8\u6001\u5207\u6362<\/td>\n\u7528\u6237\u5b9e\u65f6\u5207\u6362\u6e90\u8bed\u8a00，\u5f15\u64ce\u5373\u65f6\u9002\u914d\u5bf9\u5e94\u8bed\u79cd\u6a21\u578b<\/td>\n<\/tr>\n
\u76ee\u6807\u8bed\u8a00\/\u7ffb\u8bd1\u65b9\u5411<\/td>\n\u65e0\u7ffb\u8bd1\u6216\u56fa\u5b9a\u5355\u65b9\u5411<\/td>\ntargetLanguage \u5b57\u6bb5 \u2018zh\u2019|\u2018en\u2019|\u2018zh-en\u2019 \u4e09\u9009<\/td>\n\u652f\u6301\u4e2d\u82f1\u53cc\u8bed\u5bf9\u7167\u663e\u793a，\u9002\u914d\u8ddf\u5531\u4e0e\u8de8\u8bed\u8a00\u573a\u666f<\/td>\n<\/tr>\n
\u5b57\u4f53\u5927\u5c0f<\/td>\n\u56fa\u5b9a\u6216\u9700 CSS \u8986\u76d6<\/td>\nfontSize \u679a\u4e3e SMALL\/NORMAL\/BIG\/LARGE \u56db\u6863<\/td>\n\u679a\u4e3e\u7c7b\u578b\u4fdd\u969c\u53d6\u503c\u5408\u6cd5\u6027，\u56db\u6863\u6ee1\u8db3\u4e0d\u540c\u89c6\u8ddd\u9700\u6c42<\/td>\n<\/tr>\n
\u5b57\u4f53\u989c\u8272<\/td>\n\u56fa\u5b9a\u6216\u9700\u6837\u5f0f\u8986\u76d6<\/td>\nfontColor \u5b57\u6bb5 ResourceColor \u4efb\u610f\u8272\u503c<\/td>\n\u4e94\u9884\u8bbe\u8272\u4e00\u952e\u5207\u6362，\u7528\u6237\u4e2a\u6027\u5316\u5b57\u5e55\u5916\u89c2<\/td>\n<\/tr>\n
\u914d\u7f6e\u70ed\u66f4\u65b0<\/td>\n\u9700\u91cd\u5efa\u7ec4\u4ef6\u6216\u5237\u65b0\u9875\u9762<\/td>\noptions \u5b9e\u65f6\u91cd\u5efa，\u7ec4\u4ef6\u70ed\u66f4\u65b0\u65e0\u611f\u5207\u6362<\/td>\n\u4fee\u6539\u8bed\u8a00\/\u5916\u89c2\u540e\u5b57\u5e55\u5373\u65f6\u751f\u6548，\u65e0\u4e2d\u65ad\u4f53\u9a8c<\/td>\n<\/tr>\n
\u97f3\u9891\u6570\u636e\u8f93\u5165<\/td>\n\u6587\u4ef6\u4e0a\u4f20\u6216\u6d41\u63a8\u9001<\/td>\nAICaptionController.writeAudio \u9010\u5757\u63a8\u9001<\/td>\n\u652f\u6301 20ms \u7c92\u5ea6 PCM \u5b9e\u65f6\u5199\u5165，\u9002\u914d\u5b9e\u65f6\u9ea6\u514b\u98ce\u91c7\u96c6<\/td>\n<\/tr>\n
\u751f\u547d\u5468\u671f\u7ba1\u7406<\/td>\n\u624b\u52a8\u7ba1\u7406\u521d\u59cb\u5316\u4e0e\u9500\u6bc1<\/td>\nonPrepared\/onError \u56de\u8c03\u9a71\u52a8\u72b6\u6001\u673a<\/td>\n\u5c31\u7eea\u4e0e\u5f02\u5e38\u72b6\u6001\u81ea\u52a8\u56de\u8c03，UI \u65e0\u7f1d\u54cd\u5e94\u751f\u547d\u5468\u671f<\/td>\n<\/tr>\n
\u52a8\u753b\u65b9\u6848<\/td>\nCSS \u6216\u7b2c\u4e09\u65b9\u52a8\u753b\u5e93<\/td>\n\u5355 breath \u5e03\u5c14\u72b6\u6001\u9a71\u52a8\u591a\u52a8\u6548<\/td>\n\u6781\u7b80\u7684\u5b9a\u65f6\u5668\u7ffb\u8f6c，\u9a71\u52a8\u547c\u5438\/\u6ce2\u52a8\/\u95ea\u70c1\u7b49\u52a8\u6548<\/td>\n<\/tr>\n
\u4e3b\u9898\u7cfb\u7edf<\/td>\n\u5404\u5904\u786c\u7f16\u7801\u989c\u8272<\/td>\nColorPalette \u63a5\u53e3 + COLORS \u5e38\u91cf\u96c6\u4e2d\u7ba1\u7406<\/td>\n\u63a5\u53e3\u7ea6\u675f\u5b57\u6bb5，\u4e3b\u9898\u5207\u6362\u53ea\u9700\u66ff\u6362\u5e38\u91cf\u5bf9\u8c61<\/td>\n<\/tr>\n
\u5e03\u5c40\u7b56\u7565<\/td>\n\u56fa\u5b9a\u6216\u54cd\u5e94\u5f0f\u6846\u67b6<\/td>\nFlex \u6362\u884c\u5bab\u683c+\u6a2a\u5411 Scroll+\u6761\u4ef6\u6e32\u67d3<\/td>\n\u58f0\u660e\u5f0f Flex\/Scroll\/ForEach \u7075\u6d3b\u7ec4\u5408\u65e0\u7b2c\u4e09\u65b9\u4f9d\u8d56<\/td>\n<\/tr>\n
\u5f39\u7a97\u7cfb\u7edf<\/td>\n\u7b2c\u4e09\u65b9 Modal \u7ec4\u4ef6<\/td>\nStack \u5806\u53e0+\u72b6\u6001\u9a71\u52a8+\u906e\u7f69\u56de\u8c03<\/td>\n\u539f\u751f Stack \u5c42\u53e0\u5b9e\u73b0\u6a21\u6001，\u65e0\u989d\u5916\u7ec4\u4ef6\u4f9d\u8d56<\/td>\n<\/tr>\n
\u6570\u636e\u6a21\u578b<\/td>\ninterface \u6216 plain object<\/td>\n@Observed class + @State \u6570\u7ec4<\/td>\n\u53ef\u89c2\u5bdf\u5bf9\u8c61\u81ea\u52a8\u9a71\u52a8 UI \u66f4\u65b0，\u6570\u7ec4\u5f15\u7528\u5237\u65b0\u6280\u5de7<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u5341\u4e00\u3001\u603b\u7ed3<\/h3>\n

\u672c\u6587\u5b8c\u6574\u5256\u6790\u4e86\u4e00\u4e2a\u57fa\u4e8e HarmonyOS ArkUI \u6846\u67b6\u4e0e Speech Kit 6.1.1 \u65b0\u7279\u6027\u6784\u5efa\u7684 K \u6b4c\u793e\u4ea4\u5e94\u7528\u3002\u4ece\u6280\u672f\u67b6\u6784\u5c42\u9762\u770b，\u8be5\u5e94\u7528\u5c55\u793a\u4e86 ArkUI \u58f0\u660e\u5f0f\u5f00\u53d1\u8303\u5f0f\u7684\u5b8c\u6574\u5b9e\u8df5：@Entry\/@Component\/@State\/@Builder\/@Observed \u7b49\u88c5\u9970\u5668\u534f\u540c\u5de5\u4f5c，\u6784\u5efa\u4e86\u4ece\u5165\u53e3\u7ec4\u4ef6\u5230\u6570\u636e\u6a21\u578b\u7684\u5168\u94fe\u8def\u72b6\u6001\u7ba1\u7406\u2014\u58f0\u660e\u5f0f\u6e32\u67d3\u4f53\u7cfb\u3002Stack \u5806\u53e0\u5bb9\u5668\u4f5c\u4e3a\u5f39\u7a97\u7cfb\u7edf\u7684\u5e95\u5c42\u652f\u6491，Flex \u5f39\u6027\u5e03\u5c40\u5b9e\u73b0\u6362\u884c\u5bab\u683c，Scroll \u6a2a\u5411\u6eda\u52a8\u5b9e\u73b0\u6a2a\u6ed1\u5217\u8868，ForEach \u5b9e\u73b0\u6570\u636e\u9a71\u52a8\u6e32\u67d3\u2014\u2014\u8fd9\u4e9b\u539f\u751f\u5bb9\u5668\u7ec4\u4ef6\u7684\u7ec4\u5408\u4f7f\u7528\u8bc1\u660e\u4e86 ArkUI \u5728\u4e0d\u4f9d\u8d56\u7b2c\u4e09\u65b9 UI \u5e93\u7684\u60c5\u51b5\u4e0b，\u8db3\u4ee5\u6784\u5efa\u529f\u80fd\u5b8c\u6574\u3001\u4ea4\u4e92\u4e30\u5bcc\u3001\u89c6\u89c9\u7cbe\u81f4\u7684\u5e94\u7528\u754c\u9762\u3002<\/p>\n

\u4ece Speech Kit 6.1.1 \u65b0\u7279\u6027\u7684\u5b9e\u8df5\u5c42\u9762\u770b，\u8be5\u5e94\u7528\u5c06 AICaptionComponent \u7684 sourceLanguage\u3001targetLanguage\u3001fontSize\u3001fontColor \u56db\u5927\u65b0\u589e\u5b57\u6bb5\u5168\u90e8\u7eb3\u5165\u524d\u7aef\u53ef\u914d\u7f6e\u72b6\u6001\u7ba1\u7406\u3002\u901a\u8fc7 buildCaptionOptions() \u65b9\u6cd5\u5728\u6bcf\u6b21\u6e32\u67d3\u65f6\u5b9e\u65f6\u7ec4\u88c5\u914d\u7f6e\u5bf9\u8c61，\u5b9e\u73b0\u4e86\u8bed\u8a00\u5207\u6362\u3001\u5b57\u53f7\u8c03\u6574\u3001\u989c\u8272\u66f4\u6362\u7684\u914d\u7f6e\u70ed\u66f4\u65b0\u2014\u2014\u7528\u6237\u4fee\u6539\u8bbe\u7f6e\u540e\u5b57\u5e55\u7ec4\u4ef6\u5373\u65f6\u54cd\u5e94，\u65e0\u9700\u91cd\u65b0\u521d\u59cb\u5316\u3002AICaptionController.writeAudio() \u65b9\u6cd5\u914d\u5408\u5408\u6210\u7684 PCM \u97f3\u9891\u6570\u636e，\u5b8c\u6574\u6f14\u793a\u4e86\u4ece\u97f3\u9891\u8f93\u5165\u5230\u5b57\u5e55\u8f93\u51fa\u7684\u7aef\u5230\u7aef\u6570\u636e\u901a\u8def\u3002onPrepared \u4e0e onError \u4e24\u4e2a\u56de\u8c03\u5c06\u5f02\u6b65\u751f\u547d\u5468\u671f\u4e8b\u4ef6\u8f6c\u6362\u4e3a\u7ec4\u4ef6\u72b6\u6001，\u9a71\u52a8 UI \u4e0a\u7684\u5c31\u7eea\u63d0\u793a\u4e0e\u9519\u8bef\u5c55\u793a\u3002\u4e94\u4e2a\u529f\u80fd\u533a\u5757（\u5b9e\u65f6\u9884\u89c8\/\u8bed\u8a00\u8bbe\u7f6e\/\u5916\u89c2\u8bbe\u7f6e\/\u4ee3\u7801\u9884\u89c8\/\u573a\u666f\u63a8\u8350）\u7684\u6709\u673a\u7ec4\u5408，\u4f7f\u8be5 Tab \u517c\u5177\u7528\u6237\u529f\u80fd\u9875\u4e0e\u6280\u672f\u6587\u6863\u7684\u53cc\u91cd\u89d2\u8272，\u662f AI \u80fd\u529b\u5728\u4e1a\u52a1\u573a\u666f\u4e2d\u6df1\u5ea6\u878d\u5408\u7684\u5178\u8303\u3002<\/p>\n

\u4ece\u8bbe\u8ba1\u7406\u5ff5\u5c42\u9762\u770b，\u5e94\u7528\u91c7\u7528\u821e\u53f0\u9ed1（#120A1A）+\u9713\u8679\u7d2b（#A855F7）+\u6b22\u5531\u7c89（#F472B6）\u7684\u6df1\u8272\u4e3b\u9898，\u8425\u9020\u4e86 K \u6b4c\u591c\u573a\u7684\u6c89\u6d78\u5f0f\u89c6\u89c9\u6c1b\u56f4\u3002ColorPalette \u63a5\u53e3\u4e0e COLORS \u5e38\u91cf\u6784\u6210\u7684\u96c6\u4e2d\u5f0f\u989c\u8272\u7ba1\u7406\u7cfb\u7edf，\u786e\u4fdd\u4e86\u89c6\u89c9\u4e00\u81f4\u6027\u4e0e\u4e3b\u9898\u53ef\u6269\u5c55\u6027\u3002\u5355 breath \u5e03\u5c14\u72b6\u6001\u9a71\u52a8\u7684\u591a\u52a8\u6548\u8054\u52a8（\u5934\u50cf\u547c\u5438\u3001\u67f1\u72b6\u56fe\u6ce2\u52a8\u3001\u5c31\u7eea\u95ea\u70c1\u3001\u6570\u503c\u53d8\u8272）\u662f\u58f0\u660e\u5f0f UI \u4e0b\u8f7b\u91cf\u52a8\u753b\u7684\u7ecf\u5178\u5b9e\u8df5\u2014\u2014\u7528\u4e00\u4e2a\u5b9a\u65f6\u5668\u7ffb\u8f6c\u4e00\u4e2a\u5e03\u5c14\u503c，\u5373\u53ef\u9a71\u52a8\u5168\u5c40\u591a\u5904\u52a8\u6548，\u4f53\u73b0\u4e86"\u6700\u5c0f\u72b6\u6001\u2014\u6700\u5927\u8868\u8fbe"\u7684\u8bbe\u8ba1\u54f2\u5b66\u3002\u4e09\u5957\u5f39\u7a97\u7684\u786e\u8ba4\u6309\u94ae\u5206\u522b\u4f7f\u7528\u7d2b\u8272\u3001\u9752\u8272\u3001\u7c89\u8272\u4e09\u8272\u7f16\u7801，\u9690\u542b\u4e86\u521b\u5efa（\u4e2d\u6027）\u3001\u7f16\u8f91（\u5b89\u5168）\u3001\u89e3\u6563（\u5371\u9669）\u7684\u64cd\u4f5c\u98ce\u9669\u5c42\u7ea7，\u662f\u65e0\u969c\u788d\u4ea4\u4e92\u7684\u7ec6\u8282\u4f53\u73b0\u3002<\/p>\n

\u4ece\u4e1a\u52a1\u573a\u666f\u5c42\u9762\u770b，\u4e94\u4e2a\u5b57\u5e55\u573a\u666f\u9884\u8bbe（\u5916\u8bed\u8ddf\u5531\u3001\u8bf4\u5531\u901f\u8bb0\u3001\u4e2d\u6587\u5408\u5531\u3001\u7ca4\u8bed\u8f85\u52a9\u3001\u8fde\u9ea6\u4e92\u52a8）\u7cbe\u51c6\u8986\u76d6\u4e86 K \u6b4c\u793e\u4ea4\u4e2d\u7684\u5178\u578b\u5b57\u5e55\u9700\u6c42\u3002\u7ca4\u8bed\u97f3\u9891\u56e0 sourceLanguage \u4ec5\u652f\u6301 zh\/en \u800c\u5f52\u5165\u4e2d\u6587\u6e90\u5904\u7406\u7684\u8bbe\u8ba1，\u5ba2\u89c2\u53cd\u6620\u4e86 6.1.1 \u7248\u672c\u7684\u80fd\u529b\u8fb9\u754c\u4e0e\u5e94\u7528\u5c42\u9762\u7684\u9002\u914d\u7b56\u7565\u3002\u573a\u666f\u63a8\u8350\u5217\u8868\u7684"\u70b9\u51fb\u5957\u7528\u8bed\u8a00\u7ec4\u5408"\u4ea4\u4e92，\u5c06\u62bd\u8c61\u7684 API \u53c2\u6570\u914d\u7f6e\u8f6c\u5316\u4e3a\u5177\u4f53\u7684\u4e1a\u52a1\u573a\u666f\u4e00\u952e\u9884\u8bbe，\u662f"\u573a\u666f\u9a71\u52a8\u914d\u7f6e"\u8bbe\u8ba1\u601d\u60f3\u7684\u843d\u5730\u5b9e\u8df5\u3002\u6b4c\u623f\u6570\u636e\u6a21\u578b\u4e2d"\u638c\u9ea6\/\u6392\u9ea6\/\u8fde\u9ea6"\u4e09\u79cd\u4e92\u52a8\u6a21\u5f0f\u7684\u5206\u7c7b，\u4ee5\u53ca\u6b4c\u623f\u5206\u7c7b\u6807\u7b7e\u8986\u76d6\u516b\u5927\u66f2\u98ce（\u60c5\u6b4c\/\u7ca4\u8bed\/\u8bf4\u5531\/\u6447\u6eda\/\u6c11\u8c23\/\u620f\u8154\/\u5408\u5531），\u4f53\u73b0\u4e86\u5bf9 K \u6b4c\u793e\u4ea4\u4e1a\u52a1\u57df\u7684\u6df1\u5165\u7406\u89e3\u3002<\/p>\n

\u603b\u4f53\u800c\u8a00，\u8be5\u5e94\u7528\u662f HarmonyOS \u539f\u751f\u751f\u6001\u4e2d AI \u80fd\u529b\u4e0e\u5782\u76f4\u4e1a\u52a1\u573a\u666f\u878d\u5408\u7684\u5178\u578b\u8303\u4f8b，\u5bf9 Speech Kit 6.1.1 \u65b0\u7279\u6027\u7684\u5b9e\u8df5\u5177\u6709\u76f4\u63a5\u7684\u53c2\u8003\u4ef7\u503c\u3002\u5b83\u4e0d\u4ec5\u5c55\u793a\u4e86"\u600e\u4e48\u7528"（\u56db\u5927\u5b57\u6bb5\u7684\u914d\u7f6e\u65b9\u6cd5\u4e0e\u70ed\u66f4\u65b0\u673a\u5236），\u66f4\u5c55\u793a\u4e86"\u4e3a\u4ec0\u4e48\u7528"（\u6bcf\u4e2a\u5b57\u6bb5\u5bf9\u5e94\u7684 K \u6b4c\u4e1a\u52a1\u573a\u666f\u9700\u6c42）\u548c"\u7528\u5f97\u600e\u6837"（\u914d\u7f6e\u53d8\u66f4\u540e\u7684\u5b9e\u65f6\u9884\u89c8\u4e0e\u573a\u666f\u5316\u63a8\u8350），\u4e3a HarmonyOS \u5f00\u53d1\u8005\u7406\u89e3\u4e0e\u8fd0\u7528 Speech Kit \u7684 AI \u5b57\u5e55\u80fd\u529b\u63d0\u4f9b\u4e86\u5b8c\u6574\u7684\u4ee3\u7801\u7ea7\u53c2\u8003\u3002<\/p>\n

\u9644\u5f55：DevEco Studio \u521b\u5efa\u65b0\u9879\u76ee\u4e0e\u67e5\u770b SDK \u7248\u672c<\/h2>\n

\u672c\u7ae0\u8282\u6f14\u793a\u5982\u4f55\u4f7f\u7528 DevEco Studio \u521b\u5efa\u4e00\u4e2a HarmonyOS \u65b0\u9879\u76ee，\u5e76\u67e5\u770b\u5f53\u524d IDE \u5df2\u5b89\u88c5\u7684 SDK \u7248\u672c，\u9002\u5408\u4f5c\u4e3a\u5176\u4ed6\u6280\u672f\u535a\u6587\u7684\u8865\u5145\u64cd\u4f5c\u6307\u5357\u3002<\/p>\n

\n

\u4e00\u3001\u521b\u5efa\u65b0\u9879\u76ee<\/h3>\n

1.1 \u8fdb\u5165\u6b22\u8fce\u754c\u9762<\/h4>\n

\u542f\u52a8 DevEco Studio \u540e，\u9996\u5148\u770b\u5230\u7684\u662f\u6b22\u8fce\u754c\u9762\u3002\u5de6\u4fa7\u5bfc\u822a\u680f\u9ed8\u8ba4\u9009\u4e2d \u201c\u9879\u76ee\u201d，\u53f3\u4fa7\u63d0\u4f9b\u4e09\u4e2a\u4e3b\u8981\u5165\u53e3：<\/p>\n

    \n
  • \u65b0\u5efa\u9879\u76ee：\u4ece\u5934\u521b\u5efa\u65b0\u9879\u76ee<\/li>\n
  • \u6253\u5f00\u9879\u76ee：\u6253\u5f00\u672c\u5730\u5df2\u6709\u9879\u76ee<\/li>\n
  • \u514b\u9686\u4ed3\u5e93：\u4ece Git \u7b49\u7248\u672c\u63a7\u5236\u62c9\u53d6\u4ee3\u7801<\/li>\n<\/ul>\n

    \u70b9\u51fb \u201c\u65b0\u5efa\u9879\u76ee\u201d \u6309\u94ae，\u8fdb\u5165\u9879\u76ee\u521b\u5efa\u5411\u5bfc\u3002<\/p>\n

    \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

    1.2 \u9009\u62e9\u9879\u76ee\u6a21\u677f<\/h4>\n

    \u5728\u5f39\u51fa\u7684"\u65b0\u5efa\u9879\u76ee"\u5bf9\u8bdd\u6846\u4e2d，\u5de6\u4fa7\u5206\u7c7b\u6807\u7b7e\u63d0\u4f9b\u4e86\u4e24\u79cd\u9879\u76ee\u7c7b\u578b：<\/p>\n\n\u7c7b\u578b\u8bf4\u660e<\/tr>\n\n\n\n
    \u5e94\u7528（Application）<\/td>\n\u5f00\u53d1\u6807\u51c6\u7684 HarmonyOS \u5e94\u7528，\u5177\u5907\u5b8c\u6574\u7684 Ability \u751f\u547d\u5468\u671f<\/td>\n<\/tr>\n
    \u5143\u670d\u52a1（Atomic Service）<\/td>\n\u5f00\u53d1\u8f7b\u91cf\u7ea7\u7684\u539f\u5b50\u5316\u670d\u52a1，\u65e0\u9700\u5b89\u88c5\u5373\u53ef\u4f7f\u7528<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u9009\u62e9 \u201c\u5e94\u7528\u201d \u6807\u7b7e\u540e，\u53f3\u4fa7\u5c55\u793a\u591a\u79cd\u6a21\u677f\u3002\u5bf9\u4e8e\u5927\u591a\u6570\u573a\u666f，\u63a8\u8350\u9009\u62e9 \u201cEmpty Ability\u201d \u2014\u2014 \u8fd9\u662f\u4e00\u4e2a\u6700\u57fa\u7840\u7684\u5165\u95e8\u6a21\u677f，\u4ec5\u5305\u542b Hello World \u529f\u80fd，\u9002\u5408\u4ece\u96f6\u5f00\u59cb\u6784\u5efa\u5e94\u7528\u3002<\/p>\n

    \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

    1.3 \u914d\u7f6e\u9879\u76ee\u4fe1\u606f<\/h4>\n

    \u70b9\u51fb \u201c\u4e0b\u4e00\u6b65\u201d \u540e，\u8fdb\u5165\u9879\u76ee\u914d\u7f6e\u754c\u9762，\u9700\u8981\u586b\u5199\u4ee5\u4e0b\u6838\u5fc3\u53c2\u6570：<\/p>\n\n\u914d\u7f6e\u9879\u793a\u4f8b\u503c\u8bf4\u660e<\/tr>\n\n\n\n\n\n\n\n
    \u9879\u76ee\u540d\u79f0（Project name）<\/td>\nrollboat<\/td>\n\u5e94\u7528\u7684\u9879\u76ee\u540d\u79f0，\u5efa\u8bae\u4f7f\u7528\u82f1\u6587\u547d\u540d<\/td>\n<\/tr>\n
    \u5305\u540d（Bundle name）<\/td>\ncom.rollboat.myapplication<\/td>\n\u5e94\u7528\u552f\u4e00\u6807\u8bc6，\u91c7\u7528\u53cd\u5411\u57df\u540d\u683c\u5f0f<\/td>\n<\/tr>\n
    \u4fdd\u5b58\u8def\u5f84（Save location）<\/td>\nD:\\\\CodeFactory\\\\rollboat<\/td>\n\u9879\u76ee\u672c\u5730\u5b58\u50a8\u8def\u5f84，\u907f\u514d\u4f7f\u7528\u4e2d\u6587\u548c\u7a7a\u683c<\/td>\n<\/tr>\n
    \u517c\u5bb9 SDK（Compatible SDK）<\/td>\n6.1.1(24)<\/td>\n\u76ee\u6807 HarmonyOS API \u7248\u672c，\u70b9\u51fb"\u67e5\u770b\u53c2\u8003"\u53ef\u4e86\u89e3\u5404\u7248\u672c\u5dee\u5f02<\/td>\n<\/tr>\n
    \u6a21\u5757\u540d\u79f0（Module name）<\/td>\nentry<\/td>\n\u4e3b\u6a21\u5757\u540d\u79f0，\u9ed8\u8ba4 entry \u4e3a\u5e94\u7528\u5165\u53e3\u6a21\u5757<\/td>\n<\/tr>\n
    \u8bbe\u5907\u7c7b\u578b（Device types）<\/td>\n\u2611 Phone<\/td>\n\u52fe\u9009\u76ee\u6807\u8bbe\u5907：Phone \/ Tablet \/ 2in1 \/ Car \/ Wearable \/ TV<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u53f3\u4fa7\u9884\u89c8\u533a\u4f1a\u5b9e\u65f6\u5c55\u793a\u5f53\u524d\u6a21\u677f\u7684\u9ed8\u8ba4\u6548\u679c \u2014\u2014 \u4e00\u4e2a\u5c45\u4e2d\u663e\u793a\u7684 \u201cHello World\u201d \u6587\u672c\u3002<\/p>\n

    \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

    1.4 \u5b8c\u6210\u521b\u5efa<\/h4>\n

    \u786e\u8ba4\u914d\u7f6e\u65e0\u8bef\u540e，\u70b9\u51fb\u53f3\u4e0b\u89d2 \u201c\u5b8c\u6210\u201d \u6309\u94ae，IDE \u5c06\u81ea\u52a8\u6267\u884c\u4ee5\u4e0b\u64cd\u4f5c：<\/p>\n

  • \u751f\u6210\u9879\u76ee\u9aa8\u67b6（Stage \u6a21\u578b\u76ee\u5f55\u7ed3\u6784）<\/li>\n
  • \u6267\u884c ohpm install \u5b89\u88c5\u4f9d\u8d56<\/li>\n
  • \u8fd0\u884c Hvigor \u6784\u5efa\u521d\u59cb\u5316（Build Init）<\/li>\n

    \u6784\u5efa\u65e5\u5fd7\u4e2d\u663e\u793a \u201c\u9000\u51fa\u4ee3\u7801\u4e3a 0\u201d \u8868\u793a\u9879\u76ee\u521d\u59cb\u5316\u6210\u529f\u3002<\/p>\n

    \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

    1.5 \u9879\u76ee\u7ed3\u6784\u6982\u89c8<\/h4>\n

    \u521b\u5efa\u5b8c\u6210\u540e，\u5de6\u4fa7\u9879\u76ee\u9762\u677f\u5c55\u793a\u7684\u662f\u6807\u51c6\u7684 Stage \u6a21\u578b \u76ee\u5f55\u7ed3\u6784：<\/p>\n

    rollboat\/
    \n\u251c\u2500\u2500 .hvigor\/ # Hvigor \u6784\u5efa\u5de5\u5177\u7f13\u5b58
    \n\u251c\u2500\u2500 .idea\/ # IDE \u914d\u7f6e\u6587\u4ef6
    \n\u251c\u2500\u2500 AppScope\/ # \u5e94\u7528\u7ea7\u5168\u5c40\u914d\u7f6e
    \n\u2502 \u2514\u2500\u2500 app.json5
    \n\u251c\u2500\u2500 entry\/ # \u4e3b\u6a21\u5757（\u5165\u53e3\u6a21\u5757）
    \n\u2502 \u251c\u2500\u2500 src\/main\/ets\/
    \n\u2502 \u2502 \u251c\u2500\u2500 entryability\/ # Ability \u751f\u547d\u5468\u671f\u7ba1\u7406
    \n\u2502 \u2502 \u2502 \u2514\u2500\u2500 EntryAbility.ets
    \n\u2502 \u2502 \u2514\u2500\u2500 pages\/ # UI \u9875\u9762
    \n\u2502 \u2502 \u2514\u2500\u2500 Index.ets # \u9996\u9875（\u9ed8\u8ba4 Hello World）
    \n\u2502 \u251c\u2500\u2500 src\/main\/resources\/ # \u8d44\u6e90\u6587\u4ef6
    \n\u2502 \u251c\u2500\u2500 module.json5 # \u6a21\u5757\u914d\u7f6e
    \n\u2502 \u2514\u2500\u2500 build-profile.json5 # \u6784\u5efa\u914d\u7f6e
    \n\u251c\u2500\u2500 oh_modules\/ # OHPM \u4f9d\u8d56\u5305
    \n\u251c\u2500\u2500 build-profile.json5 # \u5de5\u7a0b\u6784\u5efa\u914d\u7f6e
    \n\u251c\u2500\u2500 hvigorfile.ts # Hvigor \u6784\u5efa\u811a\u672c
    \n\u2514\u2500\u2500 oh-package.json5 # \u5305\u7ba1\u7406\u914d\u7f6e<\/p>\n

    \u6838\u5fc3\u6587\u4ef6 Index.ets \u7684\u9ed8\u8ba4\u4ee3\u7801\u5982\u4e0b，\u91c7\u7528 ArkTS \u58f0\u660e\u5f0f UI \u8bed\u6cd5：<\/p>\n

    @<\/span>Entry<\/span><\/span>
    \n@<\/span>Component<\/span><\/span>
    \nstruct Index {<\/span>
    \n @<\/span>State<\/span><\/span> message:<\/span> string<\/span> =<\/span> 'Hello World'<\/span>;<\/span><\/p>\n

    build<\/span>(<\/span>)<\/span> {<\/span>
    \n RelativeContainer<\/span>(<\/span>)<\/span> {<\/span>
    \n Text<\/span>(<\/span>this<\/span>.<\/span>message)<\/span>
    \n .<\/span>id<\/span>(<\/span>'HelloWorld'<\/span>)<\/span>
    \n .<\/span>fontSize<\/span>(<\/span>$r<\/span>(<\/span>'app.float.page_text_font_size'<\/span>)<\/span>)<\/span>
    \n .<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
    \n .<\/span>alignRules<\/span>(<\/span>{<\/span>
    \n center:<\/span> {<\/span> anchor:<\/span> '__container__'<\/span>,<\/span> align:<\/span> VerticalAlign.<\/span>Center }<\/span>,<\/span>
    \n middle:<\/span> {<\/span> anchor:<\/span> '__container__'<\/span>,<\/span> align:<\/span> HorizontalAlign.<\/span>Center }<\/span>
    \n }<\/span>)<\/span>
    \n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
    \n this<\/span>.<\/span>message =<\/span> 'Welcome'<\/span>;<\/span>
    \n }<\/span>)<\/span>
    \n }<\/span>
    \n .<\/span>height<\/span>(<\/span>'100%'<\/span>)<\/span>
    \n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
    \n }<\/span>
    \n}<\/span><\/p>\n\n\u5173\u952e\u8bed\u6cd5\u4f5c\u7528<\/tr>\n\n\n\n\n\n\n
    @Entry<\/td>\n\u6807\u8bb0\u4e3a\u9875\u9762\u5165\u53e3，\u53ef\u7528\u4e8e\u8def\u7531\u8df3\u8f6c<\/td>\n<\/tr>\n
    @Component<\/td>\n\u58f0\u660e\u4e3a\u81ea\u5b9a\u4e49\u7ec4\u4ef6<\/td>\n<\/tr>\n
    @State<\/td>\n\u72b6\u6001\u53d8\u91cf，\u6570\u636e\u53d8\u66f4\u65f6\u81ea\u52a8\u89e6\u53d1 UI \u5237\u65b0<\/td>\n<\/tr>\n
    RelativeContainer<\/td>\n\u76f8\u5bf9\u5e03\u5c40\u5bb9\u5668，\u66ff\u4ee3\u4f20\u7edf\u7ebf\u6027\u5e03\u5c40<\/td>\n<\/tr>\n
    .onClick()<\/td>\n\u70b9\u51fb\u4e8b\u4ef6，\u6b64\u5904\u70b9\u51fb\u540e\u6587\u672c\u53d8\u4e3a \u201cWelcome\u201d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u6253\u5f00\u53f3\u4fa7 Previewer（\u9884\u89c8\u5668），\u9009\u62e9 Phone \u8bbe\u5907，\u5373\u53ef\u5b9e\u65f6\u9884\u89c8 Hello World \u6548\u679c，\u65e0\u9700\u8fde\u63a5\u771f\u673a\u6216\u542f\u52a8\u6a21\u62df\u5668\u3002<\/p>\n

    \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

    \n

    \u4e8c\u3001\u67e5\u770b SDK \u7248\u672c<\/h3>\n

    2.1 \u67e5\u770b HarmonyOS SDK<\/h4>\n

    DevEco Studio \u5b89\u88c5\u65f6\u5df2\u5185\u7f6e HarmonyOS SDK，\u65e0\u9700\u5355\u72ec\u4e0b\u8f7d\u3002\u901a\u8fc7\u4ee5\u4e0b\u8def\u5f84\u67e5\u770b：<\/p>\n

    \u6587\u4ef6 \u2192 \u8bbe\u7f6e \u2192 HarmonyOS SDK（\u6216\u5feb\u6377\u952e Ctrl + Alt + S \u641c\u7d22 \u201cHarmonyOS SDK\u201d）<\/p>\n

    \u5728\u8bbe\u7f6e\u9762\u677f\u4e2d，\u53ef\u4ee5\u770b\u5230\u5f53\u524d\u5df2\u5b89\u88c5\u7684 SDK \u7248\u672c\u4fe1\u606f：<\/p>\n\n\u540d\u79f0\u9636\u6bb5\u72b6\u6001<\/tr>\n\n\n
    HarmonyOS 6.1.1<\/td>\nRelease<\/td>\n\u2705 \u5df2\u5b89\u88c5<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u754c\u9762\u9876\u90e8\u63d0\u793a：\u201cHarmonyOS SDK \u5df2\u7ecf\u5305\u542b\u5728 IDE，\u65e0\u9700\u5355\u72ec\u5b89\u88c5\u201d，\u7701\u53bb\u4e86\u624b\u52a8\u914d\u7f6e SDK \u7684\u7e41\u7410\u6b65\u9aa4\u3002<\/p>\n

    \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

    2.2 \u67e5\u770b ArkUI-X SDK（\u8de8\u5e73\u53f0\u6269\u5c55）<\/h4>\n

    \u5982\u679c\u9879\u76ee\u9700\u8981\u5c06 ArkUI \u6846\u67b6\u6269\u5c55\u5230\u591a\u4e2a OS \u5e73\u53f0（Android \/ iOS \/ OpenHarmony），\u8fd8\u9700\u8981\u914d\u7f6e ArkUI-X SDK\u3002\u8def\u5f84\u5982\u4e0b：<\/p>\n

    \u6587\u4ef6 \u2192 \u8bbe\u7f6e \u2192 \u8bed\u8a00\u548c\u6846\u67b6 \u2192 ArkUI-X<\/p>\n

    \u5728\u8fd9\u91cc\u53ef\u4ee5\u67e5\u770b\u5df2\u5b89\u88c5\u548c\u53ef\u9009\u7684 ArkUI-X SDK \u7248\u672c：<\/p>\n\n\u7248\u672cSDK \u7248\u672c\u53f7\u9636\u6bb5\u72b6\u6001<\/tr>\n\n\n\n\n
    API Version 24<\/td>\n6.1.1.100<\/td>\nRelease<\/td>\n\u2705 \u5df2\u5b89\u88c5<\/td>\n<\/tr>\n
    API Version 23<\/td>\n6.1.0.28<\/td>\nBeta1<\/td>\n\u672a\u5b89\u88c5<\/td>\n<\/tr>\n
    API Version 22<\/td>\n6.0.2.112<\/td>\nRelease<\/td>\n\u672a\u5b89\u88c5<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u5b89\u88c5\u8def\u5f84\u793a\u4f8b：D:\\\\DevTools\\\\ArkUI-X\\\\sdk<\/p>\n

    \u8bf4\u660e：ArkUI-X \u5141\u8bb8\u5f00\u53d1\u8005\u4f7f\u7528\u4e00\u5957 ArkTS \u4e3b\u4ee3\u7801，\u540c\u65f6\u6784\u5efa\u591a\u5e73\u53f0\u5e94\u7528\u3002\u5982\u679c\u4ec5\u5f00\u53d1 HarmonyOS \u539f\u751f\u5e94\u7528，\u65e0\u9700\u989d\u5916\u5b89\u88c5 ArkUI-X SDK\u3002<\/p>\n

    \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

    \n

    \u4e09\u3001\u5c0f\u7ed3<\/h3>\n\n\u6b65\u9aa4\u64cd\u4f5c\u5173\u952e\u70b9<\/tr>\n\n\n\n\n
    \u521b\u5efa\u9879\u76ee<\/td>\n\u6b22\u8fce\u9875 \u2192 \u65b0\u5efa\u9879\u76ee \u2192 \u9009\u62e9 Empty Ability \u6a21\u677f \u2192 \u914d\u7f6e\u9879\u76ee\u4fe1\u606f \u2192 \u5b8c\u6210<\/td>\n\u4f7f\u7528 Stage \u6a21\u578b + ArkTS \u8bed\u8a00<\/td>\n<\/tr>\n
    \u67e5\u770b SDK<\/td>\n\u8bbe\u7f6e \u2192 HarmonyOS SDK<\/td>\nSDK \u5df2\u5185\u7f6e，\u65e0\u9700\u624b\u52a8\u5b89\u88c5<\/td>\n<\/tr>\n
    \u8de8\u5e73\u53f0\u6269\u5c55<\/td>\n\u8bbe\u7f6e \u2192 ArkUI-X<\/td>\n\u6839\u636e\u9700\u8981\u5b89\u88c5\u5bf9\u5e94 API \u7248\u672c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u81f3\u6b64，DevEco Studio \u7684\u9879\u76ee\u521b\u5efa\u4e0e SDK \u73af\u5883\u786e\u8ba4\u5168\u90e8\u5b8c\u6210，\u53ef\u4ee5\u5f00\u59cb HarmonyOS \u5e94\u7528\u7684\u529f\u80fd\u5f00\u53d1\u3002<\/p>\n

    \n

    \u672c\u6587\u57fa\u4e8e DevEco Studio 6.1.1 Release \u7248\u672c\u7f16\u5199，\u4e0d\u540c\u7248\u672c\u754c\u9762\u53ef\u80fd\u5b58\u5728\u7ec6\u5fae\u5dee\u5f02\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

    \u4e00\u3001\u6280\u672f\u524d\u8a00：HarmonyOS ArkUI \u4e0e Speech Kit \u7684\u6280\u672f\u80cc\u666fHarmonyOS \u4f5c\u4e3a\u534e\u4e3a\u63a8\u51fa\u7684\u9762\u5411\u4e07\u7269\u4e92\u8054\u65f6\u4ee3\u7684\u5206\u5e03\u5f0f\u64cd\u4f5c\u7cfb\u7edf，\u5176\u5e94\u7528\u5f00\u53d1\u6846\u67b6 ArkUI \u627f\u8f7d\u7740\u6784\u5efa\u591a\u7aef\u4e00\u81f4\u4f53\u9a8c\u7684\u6838\u5fc3\u4f7f\u547d\u3002ArkUI \u91c7\u7528\u58f0\u660e\u5f0f\u5f00\u53d1\u8303\u5f0f，\u5f00\u53d1\u8005\u901a\u8fc7 ArkTS \u8bed\u8a00（TypeScript \u7684\u8d85\u96c6，\u4e13\u4e3a HarmonyOS \u8bbe\u5907\u4fa7\u5e94\u7528\u5f00\u53d1\u5b9a\u5236）\u63cf\u8ff0\u754c\u9762\u7ed3\u6784\u4e0e\u72b6\u6001\u7ed1\u5b9a\u5173\u7cfb，\u6846\u67b6<\/p>\n","protected":false},"author":2,"featured_media":96357,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[280,50,188],"topic":[],"class_list":["post-96371","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-harmonyos","tag-50","tag-188"],"yoast_head":"\nHarmonyOS 6.1.1 AI\u5b57\u5e55\u65b0\u7279\u6027\u6df1\u5ea6\u89e3\u6790\uff1a\u4eceAICaptionComponent\u56db\u5927\u65b0\u589e\u5b57\u6bb5\u5230K\u6b4c\u793e\u4ea4\u821e\u53f0\u9ed1\u9713\u8679\u7d2b\u6df1\u8272\u67b6\u6784\u5168\u94fe\u8def\u5b9e\u6218 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/96371.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HarmonyOS 6.1.1 AI\u5b57\u5e55\u65b0\u7279\u6027\u6df1\u5ea6\u89e3\u6790\uff1a\u4eceAICaptionComponent\u56db\u5927\u65b0\u589e\u5b57\u6bb5\u5230K\u6b4c\u793e\u4ea4\u821e\u53f0\u9ed1\u9713\u8679\u7d2b\u6df1\u8272\u67b6\u6784\u5168\u94fe\u8def\u5b9e\u6218 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u4e00\u3001\u6280\u672f\u524d\u8a00：HarmonyOS ArkUI \u4e0e Speech Kit \u7684\u6280\u672f\u80cc\u666fHarmonyOS \u4f5c\u4e3a\u534e\u4e3a\u63a8\u51fa\u7684\u9762\u5411\u4e07\u7269\u4e92\u8054\u65f6\u4ee3\u7684\u5206\u5e03\u5f0f\u64cd\u4f5c\u7cfb\u7edf，\u5176\u5e94\u7528\u5f00\u53d1\u6846\u67b6 ArkUI \u627f\u8f7d\u7740\u6784\u5efa\u591a\u7aef\u4e00\u81f4\u4f53\u9a8c\u7684\u6838\u5fc3\u4f7f\u547d\u3002ArkUI \u91c7\u7528\u58f0\u660e\u5f0f\u5f00\u53d1\u8303\u5f0f，\u5f00\u53d1\u8005\u901a\u8fc7 ArkTS \u8bed\u8a00（TypeScript \u7684\u8d85\u96c6，\u4e13\u4e3a HarmonyOS \u8bbe\u5907\u4fa7\u5e94\u7528\u5f00\u53d1\u5b9a\u5236）\u63cf\u8ff0\u754c\u9762\u7ed3\u6784\u4e0e\u72b6\u6001\u7ed1\u5b9a\u5173\u7cfb，\u6846\u67b6\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/96371.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-27T08:32:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260827083138-6a8ff5ea5d5f2.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"37 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/96371.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/96371.html\",\"name\":\"HarmonyOS 6.1.1 AI\u5b57\u5e55\u65b0\u7279\u6027\u6df1\u5ea6\u89e3\u6790\uff1a\u4eceAICaptionComponent\u56db\u5927\u65b0\u589e\u5b57\u6bb5\u5230K\u6b4c\u793e\u4ea4\u821e\u53f0\u9ed1\u9713\u8679\u7d2b\u6df1\u8272\u67b6\u6784\u5168\u94fe\u8def\u5b9e\u6218 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-08-27T08:32:03+00:00\",\"dateModified\":\"2026-08-27T08:32:03+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/96371.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/96371.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/96371.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HarmonyOS 6.1.1 AI\u5b57\u5e55\u65b0\u7279\u6027\u6df1\u5ea6\u89e3\u6790\uff1a\u4eceAICaptionComponent\u56db\u5927\u65b0\u589e\u5b57\u6bb5\u5230K\u6b4c\u793e\u4ea4\u821e\u53f0\u9ed1\u9713\u8679\u7d2b\u6df1\u8272\u67b6\u6784\u5168\u94fe\u8def\u5b9e\u6218\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HarmonyOS 6.1.1 AI\u5b57\u5e55\u65b0\u7279\u6027\u6df1\u5ea6\u89e3\u6790\uff1a\u4eceAICaptionComponent\u56db\u5927\u65b0\u589e\u5b57\u6bb5\u5230K\u6b4c\u793e\u4ea4\u821e\u53f0\u9ed1\u9713\u8679\u7d2b\u6df1\u8272\u67b6\u6784\u5168\u94fe\u8def\u5b9e\u6218 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/96371.html","og_locale":"zh_CN","og_type":"article","og_title":"HarmonyOS 6.1.1 AI\u5b57\u5e55\u65b0\u7279\u6027\u6df1\u5ea6\u89e3\u6790\uff1a\u4eceAICaptionComponent\u56db\u5927\u65b0\u589e\u5b57\u6bb5\u5230K\u6b4c\u793e\u4ea4\u821e\u53f0\u9ed1\u9713\u8679\u7d2b\u6df1\u8272\u67b6\u6784\u5168\u94fe\u8def\u5b9e\u6218 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u4e00\u3001\u6280\u672f\u524d\u8a00：HarmonyOS ArkUI \u4e0e Speech Kit \u7684\u6280\u672f\u80cc\u666fHarmonyOS \u4f5c\u4e3a\u534e\u4e3a\u63a8\u51fa\u7684\u9762\u5411\u4e07\u7269\u4e92\u8054\u65f6\u4ee3\u7684\u5206\u5e03\u5f0f\u64cd\u4f5c\u7cfb\u7edf，\u5176\u5e94\u7528\u5f00\u53d1\u6846\u67b6 ArkUI \u627f\u8f7d\u7740\u6784\u5efa\u591a\u7aef\u4e00\u81f4\u4f53\u9a8c\u7684\u6838\u5fc3\u4f7f\u547d\u3002ArkUI \u91c7\u7528\u58f0\u660e\u5f0f\u5f00\u53d1\u8303\u5f0f，\u5f00\u53d1\u8005\u901a\u8fc7 ArkTS \u8bed\u8a00（TypeScript \u7684\u8d85\u96c6，\u4e13\u4e3a HarmonyOS \u8bbe\u5907\u4fa7\u5e94\u7528\u5f00\u53d1\u5b9a\u5236）\u63cf\u8ff0\u754c\u9762\u7ed3\u6784\u4e0e\u72b6\u6001\u7ed1\u5b9a\u5173\u7cfb，\u6846\u67b6","og_url":"https:\/\/www.wsisp.com\/helps\/96371.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-08-27T08:32:03+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260827083138-6a8ff5ea5d5f2.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"37 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/96371.html","url":"https:\/\/www.wsisp.com\/helps\/96371.html","name":"HarmonyOS 6.1.1 AI\u5b57\u5e55\u65b0\u7279\u6027\u6df1\u5ea6\u89e3\u6790\uff1a\u4eceAICaptionComponent\u56db\u5927\u65b0\u589e\u5b57\u6bb5\u5230K\u6b4c\u793e\u4ea4\u821e\u53f0\u9ed1\u9713\u8679\u7d2b\u6df1\u8272\u67b6\u6784\u5168\u94fe\u8def\u5b9e\u6218 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-08-27T08:32:03+00:00","dateModified":"2026-08-27T08:32:03+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/96371.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/96371.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/96371.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"HarmonyOS 6.1.1 AI\u5b57\u5e55\u65b0\u7279\u6027\u6df1\u5ea6\u89e3\u6790\uff1a\u4eceAICaptionComponent\u56db\u5927\u65b0\u589e\u5b57\u6bb5\u5230K\u6b4c\u793e\u4ea4\u821e\u53f0\u9ed1\u9713\u8679\u7d2b\u6df1\u8272\u67b6\u6784\u5168\u94fe\u8def\u5b9e\u6218"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/96371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=96371"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/96371\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/96357"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=96371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=96371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=96371"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=96371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}