wooo/awoooi
1
1
Fork 0
Code Issues 2 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

feat(web): bridge audit review pages to IwoooS

Browse Source
This commit is contained in:
Your Name
2026-05-20 20:20:47 +08:00
parent 2e77c27d8e
commit 695d3b0191
8 changed files with 117 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/src/app/[locale]/alert-operation-logs/page.tsx
View File

@@ -17,6 +17,7 @@
import { useState, useEffect, useCallback, useRef } from 'react'
import { useTranslations } from 'next-intl'
import { AppLayout } from '@/components/layout'
import { IwoooSReadOnlyBridge } from '@/components/security/iwooos-read-only-bridge'
import { cn } from '@/lib/utils'
import {
Activity,
@@ -196,6 +197,8 @@ export default function AlertOperationLogsPage({ params }: { params: { locale: s
</button>
</div>
<IwoooSReadOnlyBridge variant="dark" />
{/* Stats */}
{stats && (
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">

3
apps/web/src/app/[locale]/code-review/page.tsx
View File

@@ -1,6 +1,7 @@
'use client'
import { AppLayout } from '@/components/layout'
import { IwoooSReadOnlyBridge } from '@/components/security/iwooos-read-only-bridge'
import {
Activity,
Bot,
@@ -56,6 +57,8 @@ export default function CodeReviewPage({ params }: { params: { locale: string }
</a>
</header>
<IwoooSReadOnlyBridge variant="dark" />
<section className="grid gap-3 md:grid-cols-4">
<div className="rounded border border-gray-800 bg-gray-950 p-4">
<div className="flex items-center gap-2 text-xs text-gray-400">

63
apps/web/src/components/security/iwooos-read-only-bridge.tsx
View File

@@ -23,8 +23,21 @@ const boundaries = [
'not_authorization=true',
] as const
export function IwoooSReadOnlyBridge() {
type IwoooSReadOnlyBridgeProps = {
variant?: 'light' | 'dark'
}
export function IwoooSReadOnlyBridge({ variant = 'light' }: IwoooSReadOnlyBridgeProps) {
const t = useTranslations('security.iwooosBridge')
const isDark = variant === 'dark'
const panelBackground = isDark ? '#111827' : '#fff'
const headerBackground = isDark ? '#0f172a' : '#faf9f3'
const borderColor = isDark ? '#374151' : '#e0ddd4'
const softBorderColor = isDark ? '#1f2937' : '#f0ede4'
const primaryText = isDark ? '#f9fafb' : '#141413'
const bodyText = isDark ? '#d1d5db' : '#5f5d56'
const mutedText = isDark ? '#9ca3af' : '#87867f'
const linkBackground = isDark ? '#111827' : '#fff'
return (
<>
@@ -47,8 +60,8 @@ export function IwoooSReadOnlyBridge() {
flexDirection: 'column',
alignItems: 'stretch',
gap: 6,
background: '#fff',
border: '0.5px solid #e0ddd4',
background: panelBackground,
border: `0.5px solid ${borderColor}`,
borderRadius: 8,
marginBottom: 12,
padding: '10px 8px',
@@ -56,11 +69,11 @@ export function IwoooSReadOnlyBridge() {
>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
<ShieldCheck size={15} strokeWidth={1.8} color="#d97757" style={{ flex: '0 0 auto' }} />
<div style={{ fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.2, minWidth: 0 }}>
<div style={{ fontSize: 12, fontWeight: 700, color: primaryText, lineHeight: 1.2, minWidth: 0 }}>
{t('compactTitle')}
</div>
</div>
<div style={{ fontSize: 10, color: '#87867f', lineHeight: 1.35 }}>
<div style={{ fontSize: 10, color: mutedText, lineHeight: 1.35 }}>
{t('compactDetail')}
</div>
<Link
@@ -74,8 +87,8 @@ export function IwoooSReadOnlyBridge() {
minWidth: 0,
height: 26,
border: '0.5px solid #d97757',
background: '#fff',
color: '#141413',
background: linkBackground,
color: primaryText,
textDecoration: 'none',
}}
>
@@ -87,8 +100,8 @@ export function IwoooSReadOnlyBridge() {
className="iwooos-bridge-full"
data-testid="iwooos-read-only-bridge"
style={{
background: '#fff',
border: '0.5px solid #e0ddd4',
background: panelBackground,
border: `0.5px solid ${borderColor}`,
borderRadius: 12,
marginBottom: 16,
overflow: 'hidden',
@@ -102,17 +115,17 @@ export function IwoooSReadOnlyBridge() {
justifyContent: 'space-between',
gap: 12,
padding: '14px 16px',
borderBottom: '0.5px solid #e0ddd4',
background: '#faf9f3',
borderBottom: `0.5px solid ${borderColor}`,
background: headerBackground,
}}
>
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, minWidth: 0 }}>
<ShieldCheck size={18} strokeWidth={1.8} color="#d97757" style={{ marginTop: 2, flex: '0 0 auto' }} />
<div style={{ minWidth: 0 }}>
<div style={{ fontSize: 13, fontWeight: 700, color: '#141413', lineHeight: 1.4 }}>
<div style={{ fontSize: 13, fontWeight: 700, color: primaryText, lineHeight: 1.4 }}>
{t('title')}
</div>
<p style={{ fontSize: 12, color: '#5f5d56', margin: '4px 0 0', lineHeight: 1.65 }}>
<p style={{ fontSize: 12, color: bodyText, margin: '4px 0 0', lineHeight: 1.65 }}>
{t('subtitle')}
</p>
</div>
@@ -126,8 +139,8 @@ export function IwoooSReadOnlyBridge() {
minHeight: 32,
padding: '0 10px',
border: '0.5px solid #d97757',
background: '#fff',
color: '#141413',
background: linkBackground,
color: primaryText,
textDecoration: 'none',
fontSize: 12,
fontWeight: 700,
@@ -144,18 +157,18 @@ export function IwoooSReadOnlyBridge() {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
gap: 0,
borderBottom: '0.5px solid #e0ddd4',
borderBottom: `0.5px solid ${borderColor}`,
}}
>
{metrics.map(metric => (
<div key={metric.key} style={{ padding: '12px 16px', borderRight: '0.5px solid #f0ede4' }}>
<div style={{ fontSize: 10, color: '#87867f', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 4 }}>
<div key={metric.key} style={{ padding: '12px 16px', borderRight: `0.5px solid ${softBorderColor}` }}>
<div style={{ fontSize: 10, color: mutedText, textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 4 }}>
{t(`metrics.${metric.key}.label`)}
</div>
<div style={{ fontSize: 20, fontWeight: 700, color: '#141413', lineHeight: 1.2 }}>
<div style={{ fontSize: 20, fontWeight: 700, color: primaryText, lineHeight: 1.2 }}>
{metric.value}
</div>
<div style={{ fontSize: 11, color: '#87867f', marginTop: 4, lineHeight: 1.5 }}>
<div style={{ fontSize: 11, color: mutedText, marginTop: 4, lineHeight: 1.5 }}>
{t(`metrics.${metric.key}.detail`)}
</div>
</div>
@@ -169,21 +182,21 @@ export function IwoooSReadOnlyBridge() {
gap: 0,
}}
>
<div style={{ padding: '12px 16px', borderRight: '0.5px solid #f0ede4' }}>
<div style={{ fontSize: 11, fontWeight: 700, color: '#141413', marginBottom: 8 }}>
<div style={{ padding: '12px 16px', borderRight: `0.5px solid ${softBorderColor}` }}>
<div style={{ fontSize: 11, fontWeight: 700, color: primaryText, marginBottom: 8 }}>
{t('sourceLabel')}
</div>
<p style={{ fontSize: 12, color: '#5f5d56', margin: 0, lineHeight: 1.65 }}>
<p style={{ fontSize: 12, color: bodyText, margin: 0, lineHeight: 1.65 }}>
{t('sourceDetail')}
</p>
</div>
<div style={{ padding: '12px 16px' }}>
<div style={{ fontSize: 11, fontWeight: 700, color: '#141413', marginBottom: 8 }}>
<div style={{ fontSize: 11, fontWeight: 700, color: primaryText, marginBottom: 8 }}>
{t('boundaryLabel')}
</div>
<div style={{ display: 'grid', gap: 5 }}>
{boundaries.map(boundary => (
<code key={boundary} style={{ fontSize: 11, color: '#141413', wordBreak: 'break-word' }}>
<code key={boundary} style={{ fontSize: 11, color: primaryText, wordBreak: 'break-word' }}>
{boundary}
</code>
))}