feat: 添加飞书环境调试页面和详细日志

修改内容:
1. 新增 debug-feishu.tsx - 飞书环境调试页面
2. approval/detail.tsx - 添加详细的调试日志
3. router/index.tsx - 添加调试页面路由
4. business-trip.ts - 修复 import 错误

调试页面功能:
- 检测是否在飞书客户端内
- 显示 window.tt 等对象状态
- 测试飞书免登功能

使用方法:
1. 在飞书客户端中打开: https://xsm.dev.hnxinyouhe.com/debug-feishu
2. 查看环境信息
3. 点击"测试飞书免登"按钮

相关文件:
- frontend/src/pages/debug-feishu.tsx
- frontend/src/pages/approval/detail.tsx
- frontend/src/router/index.tsx
- frontend/src/services/business-trip.ts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-02-26 19:16:33 +08:00
parent 3ad8f34914
commit f31abf2c68
4 changed files with 180 additions and 8 deletions
+131
View File
@@ -0,0 +1,131 @@
import { useEffect, useState } from 'react'
import { Card, List, NoticeBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
declare global {
interface Window {
tt?: any
ttjsBridge?: any
h5sdk?: any
bridge?: any
}
}
interface EnvInfo {
ua: string
isInFeishu: boolean
hasTT: boolean
hasTTJSBridge: boolean
hasH5SDK: boolean
hasBridge: boolean
ttMethods: string[]
}
export default function DebugFeishuPage() {
const navigate = useNavigate()
const [envInfo, setEnvInfo] = useState<EnvInfo | null>(null)
useEffect(() => {
const ua = navigator.userAgent
const isInFeishu = ua.includes('Lark') || ua.includes('feishu') || ua.includes('lark')
const ttMethods = window.tt ? Object.keys(window.tt) : []
setEnvInfo({
ua,
isInFeishu,
hasTT: !!window.tt,
hasTTJSBridge: !!window.ttjsBridge,
hasH5SDK: !!(window as any).h5sdk,
hasBridge: !!(window as any).bridge,
ttMethods,
})
console.log('=== 飞书环境调试 ===')
console.log('User Agent:', ua)
console.log('在飞书中:', isInFeishu)
console.log('window.tt:', window.tt)
console.log('tt 对象方法:', ttMethods)
}, [])
const testFeishuLogin = async () => {
if (!window.tt) {
alert('tt 对象不存在,无法测试')
return
}
const appId = 'cli_a8033d607cba500d'
window.tt.requestAuthCode({
appId: appId,
success: (res: any) => {
alert('✅ 获取授权码成功: ' + res.code?.substring(0, 30))
console.log('授权码:', res)
},
fail: (error: any) => {
alert('❌ 获取授权码失败: ' + JSON.stringify(error))
console.error('错误:', error)
},
})
}
return (
<div style={{ padding: '16px', background: '#f5f5f5', minHeight: '100vh' }}>
<h2>飞书环境调试页面</h2>
{envInfo && (
<List header="环境信息">
<List.Item extra={envInfo.isInFeishu ? '✅ 是' : '❌ 否'}>
在飞书客户端内
</List.Item>
<List.Item extra={envInfo.hasTT ? '✅ 存在' : '❌ 不存在'}>
window.tt 对象
</List.Item>
<List.Item extra={envInfo.hasTTJSBridge ? '✅ 存在' : '❌ 不存在'}>
window.ttjsBridge 对象
</List.Item>
<List.Item
extraStyle={{ maxWidth: '200px', fontSize: '12px', wordBreak: 'break-all' }}
>
User Agent
<div style={{ fontSize: '10px', color: '#999' }}>
{envInfo.ua}
</div>
</List.Item>
<List.Item>
tt 对象方法 ({envInfo.ttMethods.length} 个)
<div style={{ fontSize: '10px', color: '#999', textAlign: 'right' }}>
{envInfo.ttMethods.length > 0 ? envInfo.ttMethods.join(', ') : '(无)'}
</div>
</List.Item>
</List>
)}
<List header="操作">
<List.Item
onClick={testFeishuLogin}
clickable
arrow
>
测试飞书免登
</List.Item>
<List.Item
onClick={() => navigate(-1)}
clickable
arrow
>
返回
</List.Item>
</List>
<NoticeBar content="请在飞书客户端中打开此页面进行测试" color="info" />
<Card title="使用说明">
<p>1. 在飞书客户端中发送此链接给自己</p>
<p>2. 点击链接打开此调试页面</p>
<p>3. 查看环境信息</p>
<p>4. 点击"测试飞书免登"按钮</p>
</Card>
</div>
)
}