JefferyandClaude Sonnet 5
5da8b3a63e
新增 apps/mobile：Expo Router 檔案系統路由（同 Next.js App Router 的 心智模型），底部四分頁（聊天/角色/日常/設定）皆為真實 API 串接（/chat、 /tachie、/characters、/schedule、/health、/push）。聊天分頁完整重用 H/O 群組已驗證過的對話+表情查詢節奏。立繪暫以依情緒 magnitude 調整 透明度的色塊佔位（PixiJS 是瀏覽器 DOM/Canvas API，未移植到 React Native，需要 react-native-skia 等原生繪圖套件才能重現分層合成，超出 本群組範圍）。 新增 apps/api/src/push/：PushProvider 抽象（第三次套用 F-1/P-4 的 Provider 模式），MockPushProvider 供測試、ExpoPushProvider 是可直接 打真實 HTTP 請求的完整實作（Expo 推播匿名發送不需金鑰，不像 LLM/TTS 需要另外挑供應商待人工確認）。PushToken/PushNotificationLog 記錄裝置 註冊與每次推播嘗試。J 群組 TaskTriggerService 觸發時會嘗試推播給 使用者已註冊裝置，用觸發訊息本身當推播內容。 本環境沒有 Android/iOS 模擬器，改用 `expo start --web` + playwright-core （同 O 群組手法）驅動無頭瀏覽器驗證四分頁切換、真實 API 串接、聊天 完整往返、推播按鈕在無裝置環境下的優雅降級——不是原生 APP 的完整驗證， 但驗證了畫面邏輯與 API 契約層。過程中發現並修正 CORS 設定只放行網頁版 origin、擋掉 Expo 網頁版請求的問題（永久修正：新增 localhost:8081 白名單， 不影響原生 APP，原生環境沒有 CORS 限制）。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { ScrollView, StyleSheet, Text, View } from "react-native";
|
|
import type { Character } from "@kokorone/shared";
|
|
import { API_BASE_URL } from "../../lib/api";
|
|
|
|
const CHARACTER_ID = "seed-character-genki";
|
|
|
|
// Q-2 角色分頁：展示角色設定表（沿用 B 群組的 /characters 端點），驗證分頁本身可獨立運作、能打 API。
|
|
export default function CharacterScreen() {
|
|
const [character, setCharacter] = useState<Character | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetch(`${API_BASE_URL}/characters`)
|
|
.then((res) => res.json())
|
|
.then((characters: Character[]) => {
|
|
setCharacter(characters.find((c) => c.id === CHARACTER_ID) ?? characters[0] ?? null);
|
|
})
|
|
.catch(() => setError("角色資料載入失敗，請確認 api 服務是否已啟動"));
|
|
}, []);
|
|
|
|
const formalName = character?.aliases?.[0]?.formalName ?? character?.id ?? "";
|
|
|
|
return (
|
|
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
|
<Text style={styles.title}>{formalName || "角色"}</Text>
|
|
{error && <Text style={styles.error}>{error}</Text>}
|
|
{character && (
|
|
<View style={styles.card}>
|
|
<Field label="性格原型" value={character.personalityArchetype} />
|
|
<Field label="基本資料" value={character.basicInfo} />
|
|
<Field label="喜好／厭惡" value={character.likesDislikes} />
|
|
<Field label="目標／執念" value={character.goalsObsessions} />
|
|
<Field label="說話方式" value={character.speechStyle} />
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
function Field({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<View style={styles.field}>
|
|
<Text style={styles.fieldLabel}>{label}</Text>
|
|
<Text style={styles.fieldValue}>{value}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: "#FFF5F7" },
|
|
content: { padding: 20, gap: 16 },
|
|
title: { fontSize: 22, fontWeight: "bold", color: "#FF7E9D" },
|
|
card: { gap: 14 },
|
|
field: { gap: 2 },
|
|
fieldLabel: { fontSize: 12, color: "#8a6b6f" },
|
|
fieldValue: { fontSize: 14, color: "#222" },
|
|
error: { color: "#FF7E9D", fontSize: 12 },
|
|
});
|