feat: refine tiangong flows and integrate profile avatars

src/components/TiangongUI.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react'
+import Taro from '@tarojs/taro'
+import { Button, Text, View } from '@tarojs/components'
+import './TiangongUI.scss'
+
+export function TiangongHeader({ title, onBack }: { title: string; onBack?: () => void }) {
+  const top = process.env.TARO_ENV === 'weapp' ? Taro.getSystemInfoSync().statusBarHeight || 0 : 0
+  return <View className='tg-header' style={{ paddingTop: `${top}px` }}><View className='tg-header-row'>
+    {onBack && <Button className='tg-back' aria-label='返回天宫' onClick={onBack}>‹</Button>}<Text>{title}</Text>
+  </View></View>
+}
+export function TiangongModal({ title, onClose, children, variant = '' }: { title: string; onClose: () => void; children: ReactNode; variant?: string }) {
+  return <View className='tg-modal-mask' onClick={onClose} catchMove><View className={`tg-modal ${variant}`} role='dialog' aria-label={title} onClick={e => e.stopPropagation()}>
+    <Button className='tg-modal-close' aria-label='关闭弹窗' onClick={onClose}>×</Button>{children}
+  </View></View>
+}
+export function TiangongMockNote() { return <Text className='tg-mock-note'>Mock 原型演示 · 不扣费、不连接设备 · 刷新重置</Text> }