feat: add customer portal and RTC voice diagnostics
This commit is contained in:
Codex Local
@@ -0,0 +1,251 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"bytes"
|
||||
"encoding/json"
|
||||
"flag"
|
||||
"fmt"
|
||||
"io"
|
||||
"net/http"
|
||||
"net/url"
|
||||
"os"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
volcbase "github.com/volcengine/volc-sdk-golang/base"
|
||||
)
|
||||
|
||||
type responseEnvelope struct {
|
||||
ResponseMetadata struct {
|
||||
Error *struct {
|
||||
Code string `json:"Code"`
|
||||
Message string `json:"Message"`
|
||||
} `json:"Error"`
|
||||
} `json:"ResponseMetadata"`
|
||||
}
|
||||
|
||||
func main() {
|
||||
akFile := flag.String("ak-file", "", "file containing the Volcengine AccessKey ID")
|
||||
skFile := flag.String("sk-file", "", "file containing the Volcengine SecretAccessKey")
|
||||
endpoint := flag.String("endpoint", "https://rtc.volcengineapi.com", "RTC OpenAPI endpoint")
|
||||
rtcAppID := flag.String("rtc-app-id", "", "RTC application ID used for staged validation probes")
|
||||
templateFile := flag.String("template-file", "", "voice-chat template bundle used for ProviderParams probes")
|
||||
roomID := flag.String("room-id", "", "RTC room ID to inspect without starting a task")
|
||||
flag.Parse()
|
||||
if *akFile == "" || *skFile == "" {
|
||||
panic("-ak-file and -sk-file are required")
|
||||
}
|
||||
ak := readSecret(*akFile)
|
||||
sk := readSecret(*skFile)
|
||||
credentials := volcbase.Credentials{AccessKeyID: ak, SecretAccessKey: sk, Service: "rtc", Region: "cn-north-1"}
|
||||
client := &http.Client{Timeout: 15 * time.Second}
|
||||
if *rtcAppID != "" && *roomID != "" {
|
||||
queryRoom(client, credentials, *endpoint, *rtcAppID, *roomID)
|
||||
return
|
||||
}
|
||||
for _, version := range []string{"2024-06-01", "2024-12-01", "2025-06-01"} {
|
||||
probe(client, credentials, *endpoint, version, "empty", map[string]any{})
|
||||
}
|
||||
if *rtcAppID != "" {
|
||||
version := "2024-12-01"
|
||||
identity := map[string]any{
|
||||
"AppId": *rtcAppID, "RoomId": "probe-room", "TaskId": "probe-task",
|
||||
}
|
||||
agent := map[string]any{
|
||||
"TargetUserId": []string{"probe-user"}, "UserId": "probe-agent",
|
||||
}
|
||||
probe(client, credentials, *endpoint, version, "app-only", map[string]any{"AppId": *rtcAppID})
|
||||
probe(client, credentials, *endpoint, version, "identity-only", map[string]any{
|
||||
"AppId": *rtcAppID, "RoomId": "probe-room", "TaskId": "probe-task",
|
||||
})
|
||||
probe(client, credentials, *endpoint, version, "empty-config", map[string]any{
|
||||
"AppId": *rtcAppID, "RoomId": "probe-room", "TaskId": "probe-task",
|
||||
"Config": map[string]any{}, "AgentConfig": map[string]any{},
|
||||
})
|
||||
probe(client, credentials, *endpoint, version, "agent-valid", merge(identity, map[string]any{
|
||||
"Config": map[string]any{}, "AgentConfig": agent,
|
||||
}))
|
||||
probe(client, credentials, *endpoint, version, "s2s-shell", merge(identity, map[string]any{
|
||||
"Config": map[string]any{"S2SConfig": map[string]any{}}, "AgentConfig": agent,
|
||||
}))
|
||||
probe(client, credentials, *endpoint, version, "s2s-provider", merge(identity, map[string]any{
|
||||
"Config": map[string]any{"S2SConfig": map[string]any{
|
||||
"Provider": "volcano", "OutputMode": 0,
|
||||
}}, "AgentConfig": agent,
|
||||
}))
|
||||
probe(client, credentials, *endpoint, version, "s2s-params-empty", merge(identity, map[string]any{
|
||||
"Config": map[string]any{"S2SConfig": map[string]any{
|
||||
"Provider": "volcano", "OutputMode": 0, "ProviderParams": map[string]any{},
|
||||
}}, "AgentConfig": agent,
|
||||
}))
|
||||
if *templateFile != "" {
|
||||
providerParams := readProviderParams(*templateFile)
|
||||
for _, item := range []struct {
|
||||
label string
|
||||
keys []string
|
||||
}{
|
||||
{label: "params-app", keys: []string{"app"}},
|
||||
{label: "params-dialog", keys: []string{"dialog"}},
|
||||
{label: "params-asr", keys: []string{"asr"}},
|
||||
{label: "params-tts", keys: []string{"tts"}},
|
||||
{label: "params-full", keys: []string{"app", "dialog", "asr", "tts"}},
|
||||
} {
|
||||
selected := make(map[string]any, len(item.keys))
|
||||
for _, key := range item.keys {
|
||||
if value, ok := providerParams[key]; ok {
|
||||
selected[key] = value
|
||||
}
|
||||
}
|
||||
probeIdentity := merge(identity, map[string]any{"TaskId": "probe-" + item.label})
|
||||
payload := merge(probeIdentity, map[string]any{
|
||||
"Config": map[string]any{"S2SConfig": map[string]any{
|
||||
"Provider": "volcano", "OutputMode": 0, "ProviderParams": selected,
|
||||
}}, "AgentConfig": agent,
|
||||
})
|
||||
if probeAction(client, credentials, *endpoint, version, item.label, "StartVoiceChat", payload) {
|
||||
probeAction(client, credentials, *endpoint, version, item.label+"-cleanup", "StopVoiceChat", probeIdentity)
|
||||
}
|
||||
}
|
||||
fullTemplate := readHybridTemplate(*templateFile)
|
||||
fullIdentity := merge(identity, map[string]any{"TaskId": "probe-full-template"})
|
||||
fullTemplate = merge(fullTemplate, fullIdentity)
|
||||
fullAgent, _ := fullTemplate["AgentConfig"].(map[string]any)
|
||||
fullAgent["TargetUserId"] = []string{"probe-user"}
|
||||
fullAgent["UserId"] = "probe-agent"
|
||||
if probeAction(client, credentials, *endpoint, version, "full-template", "StartVoiceChat", fullTemplate) {
|
||||
probeAction(client, credentials, *endpoint, version, "full-template-cleanup", "StopVoiceChat", fullIdentity)
|
||||
}
|
||||
}
|
||||
probeAction(client, credentials, *endpoint, version, "cleanup", "StopVoiceChat", identity)
|
||||
}
|
||||
}
|
||||
|
||||
func queryRoom(client *http.Client, credentials volcbase.Credentials, endpoint, appID, roomID string) {
|
||||
target, err := url.Parse(endpoint)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
query := target.Query()
|
||||
query.Set("Action", "GetRoomOnlineUsers")
|
||||
query.Set("Version", "2023-11-01")
|
||||
query.Set("AppId", appID)
|
||||
query.Set("RoomId", roomID)
|
||||
query.Set("Property", "false")
|
||||
target.RawQuery = query.Encode()
|
||||
request, err := http.NewRequest(http.MethodGet, target.String(), nil)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
request.Host = target.Host
|
||||
request.Header.Set("Accept", "application/json")
|
||||
credentials.Sign(request)
|
||||
response, err := client.Do(request)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
defer response.Body.Close()
|
||||
body, err := io.ReadAll(io.LimitReader(response.Body, 1<<20))
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
var decoded map[string]any
|
||||
if err := json.Unmarshal(body, &decoded); err != nil {
|
||||
panic(err)
|
||||
}
|
||||
encoded, _ := json.Marshal(decoded)
|
||||
fmt.Printf("room-status=%d response=%s\n", response.StatusCode, encoded)
|
||||
}
|
||||
|
||||
func readProviderParams(path string) map[string]any {
|
||||
template := readHybridTemplate(path)
|
||||
config, _ := template["Config"].(map[string]any)
|
||||
s2s, _ := config["S2SConfig"].(map[string]any)
|
||||
params, _ := s2s["ProviderParams"].(map[string]any)
|
||||
if params == nil {
|
||||
panic("template does not contain s2s_hybrid Config.S2SConfig.ProviderParams")
|
||||
}
|
||||
return params
|
||||
}
|
||||
|
||||
func readHybridTemplate(path string) map[string]any {
|
||||
raw, err := os.ReadFile(path)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
var bundle map[string]any
|
||||
if err := json.Unmarshal(raw, &bundle); err != nil {
|
||||
panic(err)
|
||||
}
|
||||
templates, _ := bundle["templates"].(map[string]any)
|
||||
template, _ := templates["s2s_hybrid"].(map[string]any)
|
||||
if template == nil {
|
||||
panic("template does not contain s2s_hybrid")
|
||||
}
|
||||
return template
|
||||
}
|
||||
|
||||
func merge(base map[string]any, extra map[string]any) map[string]any {
|
||||
result := make(map[string]any, len(base)+len(extra))
|
||||
for key, value := range base {
|
||||
result[key] = value
|
||||
}
|
||||
for key, value := range extra {
|
||||
result[key] = value
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
func readSecret(path string) string {
|
||||
value, err := os.ReadFile(path)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
return strings.TrimSpace(string(value))
|
||||
}
|
||||
|
||||
func probe(client *http.Client, credentials volcbase.Credentials, endpoint, version, label string, payload map[string]any) {
|
||||
probeAction(client, credentials, endpoint, version, label, "StartVoiceChat", payload)
|
||||
}
|
||||
|
||||
func probeAction(client *http.Client, credentials volcbase.Credentials, endpoint, version, label, action string, payload map[string]any) bool {
|
||||
target, err := url.Parse(endpoint)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
query := target.Query()
|
||||
query.Set("Action", action)
|
||||
query.Set("Version", version)
|
||||
target.RawQuery = query.Encode()
|
||||
bodyBytes, err := json.Marshal(payload)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
request, err := http.NewRequest(http.MethodPost, target.String(), bytes.NewReader(bodyBytes))
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
request.Host = target.Host
|
||||
request.Header.Set("Content-Type", "application/json")
|
||||
request.Header.Set("Accept", "application/json")
|
||||
credentials.Sign(request)
|
||||
response, err := client.Do(request)
|
||||
if err != nil {
|
||||
fmt.Printf("label=%s version=%s transport_error=%v\n", label, version, err)
|
||||
return false
|
||||
}
|
||||
defer response.Body.Close()
|
||||
body, err := io.ReadAll(io.LimitReader(response.Body, 1<<20))
|
||||
if err != nil {
|
||||
fmt.Printf("label=%s version=%s status=%d read_error=%v\n", label, version, response.StatusCode, err)
|
||||
return false
|
||||
}
|
||||
var envelope responseEnvelope
|
||||
_ = json.Unmarshal(body, &envelope)
|
||||
if envelope.ResponseMetadata.Error == nil {
|
||||
fmt.Printf("label=%s version=%s status=%d code=none\n", label, version, response.StatusCode)
|
||||
return response.StatusCode >= 200 && response.StatusCode < 300
|
||||
}
|
||||
fmt.Printf("label=%s version=%s status=%d code=%s message=%s\n", label, version, response.StatusCode,
|
||||
envelope.ResponseMetadata.Error.Code, envelope.ResponseMetadata.Error.Message)
|
||||
return false
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"bytes"
|
||||
"encoding/json"
|
||||
"flag"
|
||||
"fmt"
|
||||
"io"
|
||||
"net/http"
|
||||
"net/url"
|
||||
"os"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
volcbase "github.com/volcengine/volc-sdk-golang/base"
|
||||
)
|
||||
|
||||
func main() {
|
||||
akFile := flag.String("ak-file", "", "file containing the Volcengine AccessKey ID")
|
||||
skFile := flag.String("sk-file", "", "file containing the Volcengine SecretAccessKey")
|
||||
resourceID := flag.String("resource-id", "volc.speech.dialog", "speech service resource ID")
|
||||
projectName := flag.String("project", "default", "Volcengine project name")
|
||||
flag.Parse()
|
||||
if *akFile == "" || *skFile == "" {
|
||||
panic("-ak-file and -sk-file are required")
|
||||
}
|
||||
target, _ := url.Parse("https://open.volcengineapi.com")
|
||||
query := target.Query()
|
||||
query.Set("Action", "QuotaMonitoring")
|
||||
query.Set("Version", "2025-05-21")
|
||||
target.RawQuery = query.Encode()
|
||||
today := time.Now().Format("2006-01-02")
|
||||
body, _ := json.Marshal(map[string]any{
|
||||
"ProjectName": *projectName,
|
||||
"ResourceID": *resourceID,
|
||||
"Start": today,
|
||||
"End": today,
|
||||
"Mode": "daily",
|
||||
"QuotaType": "concurrency",
|
||||
})
|
||||
request, _ := http.NewRequest(http.MethodPost, target.String(), bytes.NewReader(body))
|
||||
request.Host = target.Host
|
||||
request.Header.Set("Content-Type", "application/json; charset=UTF-8")
|
||||
credentials := volcbase.Credentials{
|
||||
AccessKeyID: readSecret(*akFile), SecretAccessKey: readSecret(*skFile),
|
||||
Service: "speech_saas_prod", Region: "cn-beijing",
|
||||
}
|
||||
credentials.Sign(request)
|
||||
response, err := (&http.Client{Timeout: 15 * time.Second}).Do(request)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
defer response.Body.Close()
|
||||
responseBody, _ := io.ReadAll(io.LimitReader(response.Body, 1<<20))
|
||||
var decoded map[string]any
|
||||
_ = json.Unmarshal(responseBody, &decoded)
|
||||
encoded, _ := json.Marshal(decoded)
|
||||
fmt.Printf("status=%d response=%s\n", response.StatusCode, encoded)
|
||||
}
|
||||
|
||||
func readSecret(path string) string {
|
||||
value, err := os.ReadFile(path)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
return strings.TrimSpace(string(value))
|
||||
}
|
||||
@@ -11,12 +11,15 @@ services:
|
||||
worker:
|
||||
environment:
|
||||
VOICE_PROVIDER: volcengine
|
||||
# StartVoiceChat must use the same real RTC AppId as the API token issuer.
|
||||
RTC_APP_ID: ${RTC_APP_ID}
|
||||
VOLC_ACCESS_KEY_ID: ""
|
||||
VOLC_ACCESS_KEY_ID_FILE: /run/secrets/local-rtc/volc-access-key-id
|
||||
VOLC_SECRET_ACCESS_KEY: ""
|
||||
VOLC_SECRET_ACCESS_KEY_FILE: /run/secrets/local-rtc/volc-secret-access-key
|
||||
VOLC_RTC_REGION: cn-north-1
|
||||
VOLC_RTC_API_VERSION: 2024-12-01
|
||||
# Quote date-shaped API versions so YAML does not coerce them into timestamps.
|
||||
VOLC_RTC_API_VERSION: "2024-12-01"
|
||||
VOLC_VOICE_CHAT_TEMPLATE_FILE: /run/secrets/local-rtc/voice-chat-template.json
|
||||
volumes:
|
||||
- ./deploy/local-rtc/runtime/volc-access-key-id:/run/secrets/local-rtc/volc-access-key-id:ro
|
||||
|
||||
@@ -32,7 +32,10 @@ server {
|
||||
add_header X-Frame-Options "DENY" always;
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||
add_header Permissions-Policy "camera=(), geolocation=(), microphone=()" always;
|
||||
add_header Content-Security-Policy "default-src 'self'; connect-src 'self' https: http://localhost:*; img-src 'self' data: blob: https:; media-src 'self' blob: https: http://localhost:*; style-src 'self'; script-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self' https: http://localhost:*" always;
|
||||
# Ant Design v6 generates component styles at runtime and also relies on
|
||||
# safe element-level layout styles. Scripts remain restricted to self;
|
||||
# only CSS is allowed inline.
|
||||
add_header Content-Security-Policy "default-src 'self'; connect-src 'self' https: http://localhost:*; img-src 'self' data: blob: https:; media-src 'self' blob: https: http://localhost:*; style-src 'self' 'unsafe-inline'; script-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self' https: http://localhost:*" always;
|
||||
}
|
||||
|
||||
location = /runtime-config.js {
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
# Design QA
|
||||
|
||||
- source visual truth path: `C:\Users\19926\AppData\Local\Temp\codex-clipboard-22a7b04e-194a-47ee-9fef-f98b31a70009.png`
|
||||
- implementation URL: `http://localhost:3100/`
|
||||
- implementation screenshot path: pending browser-capture permission
|
||||
- intended viewport: 3120 x 1810 CSS px, deviceScaleFactor 1
|
||||
- source pixels: 3120 x 1810
|
||||
- implementation pixels: pending
|
||||
- density normalization: pending
|
||||
- state: independent family customer portal, existing browser login session if available
|
||||
|
||||
**Full-view comparison evidence**
|
||||
|
||||
- The source visual was opened at original resolution and used to define the target shell: fixed white header, light-gray sidebar, white content cards, compact enterprise spacing, blue-purple primary color, restrained borders and shadows.
|
||||
- The customer implementation now uses a fixed Ant Design header/sidebar and a family-only information architecture. Operations menus, platform process cards, dependency checks, build version and milestone content are not present in the served bundle.
|
||||
- The implementation is compiled and served successfully, but a browser-rendered screenshot has not yet been captured. A code-only comparison is not sufficient for visual approval.
|
||||
|
||||
**Focused region comparison evidence**
|
||||
|
||||
- Pending browser evidence for the customer header/sidebar, family dashboard, business forms, tables, empty states, authenticated profile and responsive layout.
|
||||
|
||||
**Findings**
|
||||
|
||||
- [P1] Browser-rendered comparison evidence is missing.
|
||||
Location: full implementation at `http://localhost:3100/`.
|
||||
Evidence: the source image is available, but no implementation screenshot has been captured at the matching viewport.
|
||||
Impact: typography, spacing, overflow, border radii, and above-the-fold density cannot be visually verified.
|
||||
Fix: capture the implementation in the user's chosen local browser at 3120 x 1810, combine it with the source image, compare visible differences, fix any P0/P1/P2 issues, and recapture.
|
||||
|
||||
**Open Questions**
|
||||
|
||||
- Permission is required before using Playwright directly for the local screenshot capture.
|
||||
|
||||
**Implementation Checklist**
|
||||
|
||||
- Capture the implementation at the matching desktop viewport and state.
|
||||
- Compare the source and implementation in one combined visual input.
|
||||
- Verify typography, layout rhythm, color tokens, icon fidelity, and app-specific copy.
|
||||
- Test sidebar navigation, refresh, login CTA, and the main workspace controls.
|
||||
- Check browser console errors and horizontal overflow.
|
||||
- Apply and re-capture any P0/P1/P2 fixes.
|
||||
|
||||
**Follow-up Polish**
|
||||
|
||||
- Evaluate whether the production bundle should be code-split after visual QA; this is a performance refinement and does not block the current style redesign.
|
||||
|
||||
**Comparison History**
|
||||
|
||||
- Iteration 0: combined SaaS console build and HTTP smoke test passed; visual comparison blocked because browser capture has not been authorized.
|
||||
- Iteration 1: family customer portal built and served at port 3100; production bundle contains the customer brand and excludes the operations menu labels; TypeScript/Vite build, Docker rebuild, HTTP 200 and API dependency readiness passed. Visual comparison remains blocked pending browser-capture authorization.
|
||||
|
||||
final result: blocked
|
||||
+1223
File diff suppressed because it is too large
Load Diff
+7
-1
@@ -173,7 +173,13 @@ func Run(ctx context.Context, serviceName string) error {
|
||||
return fmt.Errorf("create per-device secret resolver: %w", err)
|
||||
}
|
||||
} else {
|
||||
deviceSecretResolver = deviceauth.StaticSecretResolver{"local-dev://simulated-terminal-1": []byte(cfg.DeviceLocalSecret)}
|
||||
// The local environment provides one already-bound simulator and one
|
||||
// unbound simulator so the family portal's one-time claim flow can be
|
||||
// exercised without provisioning production device secrets.
|
||||
deviceSecretResolver = deviceauth.StaticSecretResolver{
|
||||
"local-dev://simulated-terminal-1": []byte(cfg.DeviceLocalSecret),
|
||||
"local-dev://unbound-terminal-2": []byte(cfg.DeviceLocalSecret),
|
||||
}
|
||||
}
|
||||
deviceVerifier, err = deviceauth.NewVerifier(
|
||||
deviceIdentityRepository,
|
||||
|
||||
@@ -7,6 +7,7 @@ import (
|
||||
"encoding/json"
|
||||
"errors"
|
||||
"fmt"
|
||||
"log/slog"
|
||||
"time"
|
||||
|
||||
"data-terminal-cloud/internal/billing"
|
||||
@@ -167,6 +168,10 @@ func (p *StartProcessor) Handle(ctx context.Context, event outbox.Event) error {
|
||||
}
|
||||
return outbox.Retryable(err)
|
||||
}
|
||||
slog.ErrorContext(ctx, "provider voice chat start rejected",
|
||||
"provider", providerName,
|
||||
"error", err,
|
||||
)
|
||||
return p.failRejectedStart(ctx, event.AggregateID, tenantID, "provider_start_rejected", "provider permanently rejected voice chat start")
|
||||
}
|
||||
}
|
||||
|
||||
@@ -283,12 +283,19 @@ func (c *VolcengineClient) call(ctx context.Context, operation, action string, i
|
||||
if readErr != nil {
|
||||
return &Error{Operation: operation, Temporary: true, Cause: readErr}
|
||||
}
|
||||
var result volcengineResponse
|
||||
decodeErr := json.Unmarshal(responseBody, &result)
|
||||
if response.StatusCode < 200 || response.StatusCode >= 300 {
|
||||
if decodeErr == nil && result.ResponseMetadata.Error != nil {
|
||||
providerError := result.ResponseMetadata.Error
|
||||
return &Error{Operation: operation, StatusCode: response.StatusCode,
|
||||
Code: providerError.Code, Temporary: temporaryHTTPStatus(response.StatusCode) || temporaryProviderCode(providerError.Code),
|
||||
Cause: errors.New(providerError.Message)}
|
||||
}
|
||||
return &Error{Operation: operation, StatusCode: response.StatusCode,
|
||||
Temporary: temporaryHTTPStatus(response.StatusCode), Cause: errors.New(http.StatusText(response.StatusCode))}
|
||||
}
|
||||
var result volcengineResponse
|
||||
if err := json.Unmarshal(responseBody, &result); err != nil {
|
||||
if decodeErr != nil {
|
||||
return &Error{Operation: operation, Temporary: true, Cause: errors.New("provider returned invalid JSON")}
|
||||
}
|
||||
if result.ResponseMetadata.Error != nil {
|
||||
|
||||
@@ -89,6 +89,23 @@ func TestVolcengineClientClassifiesRateLimitAndDuplicateStart(t *testing.T) {
|
||||
}
|
||||
}
|
||||
|
||||
func TestVolcengineClientPreservesProviderErrorOnNonSuccessHTTPStatus(t *testing.T) {
|
||||
server := httptest.NewServer(http.HandlerFunc(func(writer http.ResponseWriter, _ *http.Request) {
|
||||
writer.WriteHeader(http.StatusNotFound)
|
||||
_ = json.NewEncoder(writer).Encode(map[string]any{"ResponseMetadata": map[string]any{"Error": map[string]any{
|
||||
"Code": "InvalidParameter.AppId", "Message": "application was not found",
|
||||
}}})
|
||||
}))
|
||||
defer server.Close()
|
||||
client := newTestVolcengineClient(t, server.URL)
|
||||
_, err := client.Start(context.Background(), StartRequest{
|
||||
TaskRef: "task-1", RoomID: "room-1", DeviceUserID: "device-1", AgentUserID: "agent-1", EngineMode: "s2s_hybrid",
|
||||
})
|
||||
if err == nil || !strings.Contains(err.Error(), "InvalidParameter.AppId") || !strings.Contains(err.Error(), "application was not found") {
|
||||
t.Fatalf("provider error details were lost: %v", err)
|
||||
}
|
||||
}
|
||||
|
||||
func TestVolcengineClientRejectsUneditedExampleTemplate(t *testing.T) {
|
||||
_, err := NewVolcengineClient(VolcengineOptions{
|
||||
BaseURL: "https://rtc.volcengineapi.com", AccessKeyID: strings.Repeat("a", 32), SecretAccessKey: strings.Repeat("s", 40),
|
||||
|
||||
Generated
+975
-3
File diff suppressed because it is too large
Load Diff
+3
-1
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "data-terminal-cloud-web",
|
||||
"name": "elder-companion-customer-portal",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
@@ -11,7 +11,9 @@
|
||||
"generate:api": "openapi-typescript ../openapi/openapi.yaml -o src/api/schema.d.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.3.2",
|
||||
"@vitejs/plugin-react": "latest",
|
||||
"antd": "^6.6.1",
|
||||
"oidc-client-ts": "^3.5.0",
|
||||
"openapi-typescript": "latest",
|
||||
"react": "latest",
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { Badge, Card } from "antd";
|
||||
|
||||
type StatusCardProps = {
|
||||
label: string;
|
||||
value: string;
|
||||
@@ -6,14 +8,16 @@ type StatusCardProps = {
|
||||
};
|
||||
|
||||
export function StatusCard({ label, value, detail, tone }: StatusCardProps) {
|
||||
const status = tone === "good" ? "success" : tone === "warning" ? "warning" : "default";
|
||||
|
||||
return (
|
||||
<article className={`status-card status-card--${tone}`}>
|
||||
<Card className={`status-card status-card--${tone}`} bordered>
|
||||
<div className="status-card__topline">
|
||||
<span>{label}</span>
|
||||
<span className="status-card__dot" aria-hidden="true" />
|
||||
<Badge status={status} />
|
||||
</div>
|
||||
<strong>{value}</strong>
|
||||
<p>{detail}</p>
|
||||
</article>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
+44
-2
@@ -1,10 +1,52 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { PlatformOverview } from "./pages/PlatformOverview";
|
||||
import { ConfigProvider } from "antd";
|
||||
import zhCN from "antd/locale/zh_CN";
|
||||
import { CustomerPortal } from "./pages/CustomerPortal";
|
||||
import "./styles.css";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<PlatformOverview />
|
||||
<ConfigProvider
|
||||
locale={zhCN}
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: "#5b5ce2",
|
||||
colorInfo: "#5b5ce2",
|
||||
colorSuccess: "#1f9d68",
|
||||
colorWarning: "#d98b12",
|
||||
colorError: "#d84a4a",
|
||||
colorText: "#1f2329",
|
||||
colorTextSecondary: "#646a73",
|
||||
colorBgLayout: "#f5f6f8",
|
||||
colorBorder: "#e3e6eb",
|
||||
borderRadius: 8,
|
||||
borderRadiusLG: 10,
|
||||
fontFamily: 'Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif'
|
||||
},
|
||||
components: {
|
||||
Layout: {
|
||||
headerBg: "#ffffff",
|
||||
siderBg: "#f7f8fa",
|
||||
bodyBg: "#f5f6f8"
|
||||
},
|
||||
Menu: {
|
||||
itemBg: "transparent",
|
||||
itemSelectedBg: "#ebe9ff",
|
||||
itemSelectedColor: "#5b5ce2",
|
||||
itemBorderRadius: 8
|
||||
},
|
||||
Button: {
|
||||
borderRadius: 8,
|
||||
controlHeight: 36
|
||||
},
|
||||
Card: {
|
||||
borderRadiusLG: 10
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<CustomerPortal />
|
||||
</ConfigProvider>
|
||||
</StrictMode>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Avatar,
|
||||
Badge,
|
||||
Breadcrumb,
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Descriptions,
|
||||
Dropdown,
|
||||
Empty,
|
||||
Input,
|
||||
Layout,
|
||||
Menu,
|
||||
Row,
|
||||
Space,
|
||||
Spin,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Typography,
|
||||
type MenuProps
|
||||
} from "antd";
|
||||
import {
|
||||
BellOutlined,
|
||||
BookOutlined,
|
||||
CaretDownOutlined,
|
||||
CommentOutlined,
|
||||
CreditCardOutlined,
|
||||
DashboardOutlined,
|
||||
HeartOutlined,
|
||||
HomeOutlined,
|
||||
LaptopOutlined,
|
||||
LockOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
MessageOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
SearchOutlined,
|
||||
SettingOutlined,
|
||||
TeamOutlined,
|
||||
UserOutlined
|
||||
} from "@ant-design/icons";
|
||||
import { useAuth } from "../auth/useAuth";
|
||||
import { SaaSWorkspace, type CustomerSection } from "./SaaSWorkspace";
|
||||
|
||||
type PortalSection = CustomerSection | "profile";
|
||||
|
||||
const sectionMeta: Record<PortalSection, { title: string; description: string; breadcrumb: string }> = {
|
||||
home: { title: "家庭首页", description: "陪伴服务状态、长者近况与家庭待办一目了然。", breadcrumb: "首页" },
|
||||
members: { title: "家庭管理", description: "管理家庭空间、家人邀请、成员角色和所有权。", breadcrumb: "家庭管理" },
|
||||
subjects: { title: "长者管理", description: "维护长者档案、交流偏好、稳定事实和分项授权。", breadcrumb: "长者管理" },
|
||||
devices: { title: "设备管理", description: "绑定陪伴设备，查看在线状态、固件版本和音量配置。", breadcrumb: "设备管理" },
|
||||
conversations: { title: "通话记录", description: "按长者筛选通话，查看文字内容、媒体授权和单次费用。", breadcrumb: "通话记录" },
|
||||
stories: { title: "故事与记忆", description: "核对智能整理的故事，沉淀经过家庭确认的长期记忆。", breadcrumb: "故事与记忆" },
|
||||
sharing: { title: "资源分享", description: "面向指定家人分享故事、文字或录音，并随时撤销权限。", breadcrumb: "授权与隐私 / 资源分享" },
|
||||
privacy: { title: "隐私请求", description: "申请访问、导出或删除个人数据，并跟踪处理状态。", breadcrumb: "授权与隐私 / 隐私请求" },
|
||||
billing: { title: "费用与额度", description: "查看当前家庭可见通话的实际计量和费用说明。", breadcrumb: "费用与额度" },
|
||||
messages: { title: "消息中心", description: "查看设备、通话、故事和隐私请求的实时状态提醒。", breadcrumb: "消息中心" },
|
||||
profile: { title: "个人中心", description: "查看当前登录身份、客户组织和家庭角色。", breadcrumb: "个人中心" }
|
||||
};
|
||||
|
||||
export function CustomerPortal() {
|
||||
const auth = useAuth();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [section, setSection] = useState<PortalSection>(() => sectionFromURL());
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const meta = sectionMeta[section];
|
||||
|
||||
useEffect(() => {
|
||||
const onPopState = () => setSection(sectionFromURL());
|
||||
window.addEventListener("popstate", onPopState);
|
||||
return () => window.removeEventListener("popstate", onPopState);
|
||||
}, []);
|
||||
|
||||
const menuItems = useMemo<MenuProps["items"]>(() => [
|
||||
{ key: "home", icon: <HomeOutlined />, label: "首页" },
|
||||
{ key: "members", icon: <TeamOutlined />, label: "家庭管理" },
|
||||
{ key: "subjects", icon: <HeartOutlined />, label: "长者管理" },
|
||||
{
|
||||
key: "privacy-group",
|
||||
icon: <SafetyCertificateOutlined />,
|
||||
label: "授权与隐私",
|
||||
children: [
|
||||
{ key: "sharing", icon: <TeamOutlined />, label: "资源分享" },
|
||||
{ key: "privacy", icon: <LockOutlined />, label: "隐私请求" }
|
||||
]
|
||||
},
|
||||
{ key: "devices", icon: <LaptopOutlined />, label: "设备管理" },
|
||||
{ key: "conversations", icon: <CommentOutlined />, label: "通话记录" },
|
||||
{ key: "stories", icon: <BookOutlined />, label: "故事与记忆" },
|
||||
{ key: "billing", icon: <CreditCardOutlined />, label: "费用与额度" },
|
||||
{ key: "messages", icon: <MessageOutlined />, label: "消息中心" },
|
||||
{ type: "divider" },
|
||||
{ key: "profile", icon: <UserOutlined />, label: "个人中心" }
|
||||
], []);
|
||||
|
||||
function navigate(next: PortalSection) {
|
||||
setSection(next);
|
||||
const url = new URL(window.location.href);
|
||||
if (next === "home") url.searchParams.delete("section"); else url.searchParams.set("section", next);
|
||||
window.history.pushState({}, "", url);
|
||||
}
|
||||
|
||||
function search() {
|
||||
const value = searchValue.trim().toLowerCase();
|
||||
if (!value) return;
|
||||
const matches: Array<[string[], PortalSection]> = [
|
||||
[["设备", "终端", "音量", "device"], "devices"],
|
||||
[["通话", "语音", "录音", "conversation"], "conversations"],
|
||||
[["故事", "回忆", "记忆", "story"], "stories"],
|
||||
[["隐私", "导出", "删除", "授权", "privacy"], "privacy"],
|
||||
[["分享", "share"], "sharing"],
|
||||
[["费用", "额度", "账单", "cost"], "billing"],
|
||||
[["消息", "通知", "提醒"], "messages"],
|
||||
[["长者", "老人", "档案", "subject"], "subjects"],
|
||||
[["家庭", "成员", "邀请", "member"], "members"]
|
||||
];
|
||||
const target = matches.find(([keywords]) => keywords.some((keyword) => value.includes(keyword)))?.[1];
|
||||
if (target) navigate(target);
|
||||
}
|
||||
|
||||
const accountMenu: MenuProps["items"] = [
|
||||
{ key: "profile", icon: <UserOutlined />, label: "个人中心", onClick: () => navigate("profile") },
|
||||
{ key: "logout", icon: <SettingOutlined />, label: "退出登录", onClick: () => void auth.logout() }
|
||||
];
|
||||
|
||||
return <Layout className="customer-layout">
|
||||
<Layout.Header className="customer-header">
|
||||
<div className="customer-header__brand">
|
||||
<Button type="text" icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} aria-label={collapsed ? "展开菜单" : "收起菜单"} onClick={() => setCollapsed((value) => !value)} />
|
||||
<span className="customer-brand-mark" aria-hidden="true"><HeartOutlined /></span>
|
||||
<strong>安心陪伴</strong>
|
||||
<span className="customer-brand-divider" />
|
||||
<span>家庭中心</span>
|
||||
</div>
|
||||
<div className="customer-header__actions">
|
||||
<Input.Search value={searchValue} onChange={(event) => setSearchValue(event.target.value)} onSearch={search} prefix={<SearchOutlined />} placeholder="搜索长者、设备、通话" allowClear className="customer-search" />
|
||||
<Tooltip title="消息中心"><Badge dot><Button type="text" icon={<BellOutlined />} aria-label="打开消息中心" onClick={() => navigate("messages")} /></Badge></Tooltip>
|
||||
{auth.currentUser ? <Dropdown menu={{ items: accountMenu }} placement="bottomRight">
|
||||
<Button type="text" className="customer-account-button">
|
||||
<Avatar size={30} icon={<UserOutlined />} />
|
||||
<span>{auth.currentUser.identity.display_name || auth.currentUser.identity.preferred_username}</span>
|
||||
<CaretDownOutlined />
|
||||
</Button>
|
||||
</Dropdown> : <Button type="primary" onClick={() => void auth.login()}>登录</Button>}
|
||||
</div>
|
||||
</Layout.Header>
|
||||
|
||||
<Layout className="customer-layout__body">
|
||||
<Layout.Sider className="customer-sider" width={224} collapsedWidth={72} collapsed={collapsed} trigger={null}>
|
||||
<div className="customer-sider__title"><DashboardOutlined />{collapsed ? null : <span>家庭服务</span>}</div>
|
||||
<Menu mode="inline" selectedKeys={[section]} defaultOpenKeys={["privacy-group"]} items={menuItems} onClick={({ key }) => navigate(key as PortalSection)} />
|
||||
<div className="customer-sider__help"><SafetyCertificateOutlined />{collapsed ? null : <div><strong>隐私受保护</strong><span>仅展示当前家庭数据</span></div>}</div>
|
||||
</Layout.Sider>
|
||||
|
||||
<Layout.Content className="customer-content">
|
||||
<main className="customer-page">
|
||||
<Breadcrumb items={[{ title: "家庭中心" }, { title: meta.breadcrumb }]} />
|
||||
<header className="customer-page__header">
|
||||
<div><h1>{meta.title}</h1><p>{meta.description}</p></div>
|
||||
{auth.currentUser ? <Tag color="green">家庭权限已校验</Tag> : null}
|
||||
</header>
|
||||
|
||||
{auth.loading ? <Card className="customer-auth-state"><Spin /><span>正在读取登录状态…</span></Card> : null}
|
||||
{!auth.loading && auth.error ? <Alert type="error" showIcon message="登录信息读取失败" description={auth.error} action={<Space><Button onClick={() => void auth.retry()}>重试</Button><Button type="primary" onClick={() => void auth.login()}>重新登录</Button></Space>} /> : null}
|
||||
{!auth.loading && !auth.currentUser && !auth.error ? <CustomerLogin onLogin={() => void auth.login()} /> : null}
|
||||
{auth.currentUser && auth.oidcUser && section !== "profile" ? <SaaSWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} section={section} onSectionChange={navigate} showNavigation={false} /> : null}
|
||||
{auth.currentUser && section === "profile" ? <CustomerProfile currentUser={auth.currentUser} onLogout={() => void auth.logout()} /> : null}
|
||||
</main>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
</Layout>;
|
||||
}
|
||||
|
||||
function CustomerLogin({ onLogin }: { onLogin: () => void }) {
|
||||
return <Card className="customer-login-card">
|
||||
<span className="customer-login-icon"><LockOutlined /></span>
|
||||
<Typography.Title level={2}>登录家庭陪伴中心</Typography.Title>
|
||||
<Typography.Paragraph>登录后可查看自己家庭内的长者、设备、通话和故事。家庭角色不会自动获得录音播放或下载权限。</Typography.Paragraph>
|
||||
<Button type="primary" size="large" icon={<UserOutlined />} onClick={onLogin}>登录并进入家庭</Button>
|
||||
<div className="customer-login-notes"><span><SafetyCertificateOutlined /> OIDC 安全登录</span><span><LockOutlined /> 家庭数据隔离</span></div>
|
||||
</Card>;
|
||||
}
|
||||
|
||||
function CustomerProfile({ currentUser, onLogout }: { currentUser: NonNullable<ReturnType<typeof useAuth>["currentUser"]>; onLogout: () => void }) {
|
||||
return <div className="customer-profile">
|
||||
<Card>
|
||||
<div className="customer-profile__identity"><Avatar size={64} icon={<UserOutlined />} /><div><h2>{currentUser.identity.display_name || currentUser.identity.preferred_username}</h2><p>{currentUser.identity.preferred_username}</p></div><Button onClick={onLogout}>退出登录</Button></div>
|
||||
</Card>
|
||||
{currentUser.accounts.length ? <Row gutter={[16, 16]}>{currentUser.accounts.map((account) => <Col xs={24} xl={12} key={account.user_id}><Card title={account.tenant_name} extra={<Tag color="blue">客户账号</Tag>}>
|
||||
<Descriptions column={1} size="small" items={[
|
||||
{ key: "display", label: "账号名称", children: account.display_name },
|
||||
{ key: "role", label: "平台角色", children: account.platform_role },
|
||||
{ key: "policy", label: "隐私政策版本", children: account.policy_version || "当前版本" }
|
||||
]} />
|
||||
<div className="customer-membership-list"><h4>家庭角色</h4>{account.household_memberships.length ? account.household_memberships.map((membership) => <div key={membership.household_id}><div><strong>{membership.household_name}</strong><span>{roleLabel(membership.role)}</span></div><small>{membership.capabilities.length} 项业务权限</small></div>) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="尚未加入家庭" />}</div>
|
||||
</Card></Col>)}</Row> : <Empty description="当前账号没有可用的客户组织" />}
|
||||
</div>;
|
||||
}
|
||||
|
||||
function sectionFromURL(): PortalSection {
|
||||
const value = new URL(window.location.href).searchParams.get("section");
|
||||
return value && value in sectionMeta ? value as PortalSection : "home";
|
||||
}
|
||||
|
||||
function roleLabel(role: string) {
|
||||
return ({ owner: "所有者", admin: "管理员", editor: "编辑者", viewer: "查看者" } as Record<string, string>)[role] ?? role;
|
||||
}
|
||||
@@ -1,4 +1,33 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Avatar,
|
||||
Badge,
|
||||
Breadcrumb,
|
||||
Button,
|
||||
Input,
|
||||
Layout,
|
||||
Menu,
|
||||
Space,
|
||||
Tag,
|
||||
Tooltip
|
||||
} from "antd";
|
||||
import {
|
||||
AlertOutlined,
|
||||
ApiOutlined,
|
||||
BellOutlined,
|
||||
CloudServerOutlined,
|
||||
DashboardOutlined,
|
||||
DollarOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
ReloadOutlined,
|
||||
SearchOutlined,
|
||||
SettingOutlined,
|
||||
TeamOutlined,
|
||||
ToolOutlined,
|
||||
UserOutlined
|
||||
} from "@ant-design/icons";
|
||||
import { platformApi } from "../api/client";
|
||||
import { StatusCard } from "../components/StatusCard";
|
||||
import { useAuth } from "../auth/useAuth";
|
||||
@@ -24,6 +53,7 @@ const workspaceKeys: WorkspaceKey[] = ["family", "config", "billing", "alerts",
|
||||
export function PlatformOverview() {
|
||||
const [state, setState] = useState<ViewState>({ loading: true });
|
||||
const [activeWorkspace, setActiveWorkspace] = useState<WorkspaceKey>(() => workspaceFromURL());
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const auth = useAuth();
|
||||
|
||||
const refresh = useCallback(async (signal?: AbortSignal) => {
|
||||
@@ -95,29 +125,109 @@ export function PlatformOverview() {
|
||||
pushWorkspaceURL(workspace);
|
||||
}
|
||||
|
||||
const activeOption = workspaceOptions.find((option) => option.key === activeWorkspace) ?? workspaceOptions[0];
|
||||
const menuItems = [
|
||||
{
|
||||
type: "group" as const,
|
||||
label: "业务中心",
|
||||
children: workspaceOptions.map((option) => ({
|
||||
key: option.key,
|
||||
icon: workspaceIcon(option.key),
|
||||
label: option.label,
|
||||
title: option.detail
|
||||
}))
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<main>
|
||||
<Layout className="app-layout">
|
||||
<Layout.Header className="app-header">
|
||||
<div className="app-header__brand">
|
||||
<Button
|
||||
type="text"
|
||||
className="app-header__collapse"
|
||||
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
aria-label={collapsed ? "展开导航" : "收起导航"}
|
||||
onClick={() => setCollapsed((current) => !current)}
|
||||
/>
|
||||
<div className="brand-mark" aria-hidden="true"><CloudServerOutlined /></div>
|
||||
<strong>长者语音云平台</strong>
|
||||
<Tag color="blue">本地研发</Tag>
|
||||
</div>
|
||||
<div className="app-header__tools">
|
||||
<Input className="header-search" prefix={<SearchOutlined />} placeholder="搜索设备、长者、通话" allowClear />
|
||||
<Tooltip title="平台服务状态">
|
||||
<Badge status={state.ready === "ready" ? "success" : state.loading ? "processing" : "warning"} />
|
||||
</Tooltip>
|
||||
<Button type="text" icon={<BellOutlined />} aria-label="通知" />
|
||||
{auth.currentUser ? (
|
||||
<Space size={8}>
|
||||
<Avatar size={30} icon={<UserOutlined />} />
|
||||
<span className="header-user">{auth.currentUser.identity.display_name || auth.currentUser.identity.preferred_username}</span>
|
||||
</Space>
|
||||
) : (
|
||||
<Button type="primary" onClick={() => void auth.login()}>登录</Button>
|
||||
)}
|
||||
</div>
|
||||
</Layout.Header>
|
||||
|
||||
<Layout className="app-layout__body">
|
||||
<Layout.Sider
|
||||
className="app-sider"
|
||||
width={232}
|
||||
collapsedWidth={72}
|
||||
collapsed={collapsed}
|
||||
trigger={null}
|
||||
>
|
||||
<div className="sider-product">
|
||||
<ApiOutlined />
|
||||
{!collapsed ? <span>数据终端 · 云端</span> : null}
|
||||
</div>
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={auth.currentUser ? [activeWorkspace] : []}
|
||||
items={menuItems}
|
||||
onClick={({ key }) => selectWorkspace(key as WorkspaceKey)}
|
||||
/>
|
||||
<div className="sider-meta">
|
||||
{!collapsed ? (
|
||||
<>
|
||||
<span>平台版本</span>
|
||||
<strong>{state.version ?? "dev"}</strong>
|
||||
</>
|
||||
) : <DashboardOutlined />}
|
||||
</div>
|
||||
</Layout.Sider>
|
||||
|
||||
<Layout.Content className="app-content">
|
||||
<main className="page-container">
|
||||
<Breadcrumb
|
||||
className="page-breadcrumb"
|
||||
items={[{ title: "控制台" }, { title: activeOption?.label ?? "平台总览" }]}
|
||||
/>
|
||||
<header className="hero">
|
||||
<div>
|
||||
<p className="eyebrow">DATA TERMINAL · CLOUD PLATFORM</p>
|
||||
<h1>让每一次陪伴，都安全抵达</h1>
|
||||
<Space size={10} align="center">
|
||||
<span className="page-icon">{workspaceIcon(activeWorkspace)}</span>
|
||||
<h1>{activeOption?.label ?? "平台总览"}</h1>
|
||||
</Space>
|
||||
<p className="hero__description">
|
||||
数据采集终端—云端系统研发工作台。当前版本已经接入家庭、长者、授权、设备与通话业务链路。
|
||||
{activeOption?.detail ?? "数据采集终端—云端系统研发工作台"}。统一管理家庭、长者、授权、设备与语音通话链路。
|
||||
</p>
|
||||
</div>
|
||||
<button type="button" onClick={() => void refresh()} disabled={state.loading}>
|
||||
{state.loading ? "检查中…" : "重新检查"}
|
||||
</button>
|
||||
<Button type="default" icon={<ReloadOutlined />} onClick={() => void refresh()} loading={state.loading}>
|
||||
重新检查
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
{state.error ? (
|
||||
<section className="notice notice--error" role="alert">
|
||||
<div>
|
||||
<strong>暂时无法连接云端服务</strong>
|
||||
<p>{state.error}。请确认API、PostgreSQL和Redis已经启动。</p>
|
||||
</div>
|
||||
<button type="button" onClick={() => void refresh()}>重试</button>
|
||||
</section>
|
||||
<Alert
|
||||
type="error"
|
||||
showIcon
|
||||
message="暂时无法连接云端服务"
|
||||
description={`${state.error}。请确认 API、PostgreSQL 和 Redis 已经启动。`}
|
||||
action={<Button size="small" danger onClick={() => void refresh()}>重试</Button>}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<section className="status-grid" aria-label="平台状态">
|
||||
@@ -145,7 +255,7 @@ export function PlatformOverview() {
|
||||
<div className="identity-panel__intro">
|
||||
<p className="eyebrow">IDENTITY & ACCESS</p>
|
||||
<h2>身份与家庭权限</h2>
|
||||
<p>OIDC只证明登录身份，客户组织与家庭权限全部由服务端关系推导。</p>
|
||||
<p>OIDC 只证明登录身份，客户组织与家庭权限全部由服务端关系推导。</p>
|
||||
</div>
|
||||
{auth.loading ? (
|
||||
<div className="identity-panel__state">正在读取登录状态…</div>
|
||||
@@ -156,7 +266,7 @@ export function PlatformOverview() {
|
||||
<strong>{auth.currentUser.identity.display_name || auth.currentUser.identity.preferred_username}</strong>
|
||||
<span>{auth.currentUser.identity.preferred_username}</span>
|
||||
</div>
|
||||
<button type="button" className="button-secondary" onClick={() => void auth.logout()}>退出登录</button>
|
||||
<Button onClick={() => void auth.logout()}>退出登录</Button>
|
||||
</div>
|
||||
{auth.currentUser.accounts.map((account) => (
|
||||
<article className="account-card" key={account.user_id}>
|
||||
@@ -165,7 +275,7 @@ export function PlatformOverview() {
|
||||
{account.household_memberships.map((membership) => (
|
||||
<div className="membership" key={membership.household_id}>
|
||||
<span>{membership.household_name}</span>
|
||||
<span>{roleLabel(membership.role)} · {membership.capabilities.length}项一般权限</span>
|
||||
<span>{roleLabel(membership.role)} · {membership.capabilities.length} 项一般权限</span>
|
||||
</div>
|
||||
))}
|
||||
</article>
|
||||
@@ -174,13 +284,11 @@ export function PlatformOverview() {
|
||||
) : (
|
||||
<div className="identity-panel__login">
|
||||
<strong>{auth.error ? "登录信息读取失败" : "尚未登录"}</strong>
|
||||
<p>{auth.error ?? "进入本地Keycloak完成授权码与PKCE登录。研发账号见权限矩阵文档。"}</p>
|
||||
<div>
|
||||
{auth.error && auth.oidcUser ? (
|
||||
<button type="button" className="button-secondary" onClick={() => void auth.retry()}>重新读取</button>
|
||||
) : null}
|
||||
<button type="button" onClick={() => void auth.login()}>{auth.error ? "重新登录" : "登录研发环境"}</button>
|
||||
</div>
|
||||
<p>{auth.error ?? "进入本地 Keycloak 完成授权码与 PKCE 登录。研发账号见权限矩阵文档。"}</p>
|
||||
<Space>
|
||||
{auth.error && auth.oidcUser ? <Button onClick={() => void auth.retry()}>重新读取</Button> : null}
|
||||
<Button type="primary" onClick={() => void auth.login()}>{auth.error ? "重新登录" : "登录研发环境"}</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
@@ -189,25 +297,11 @@ export function PlatformOverview() {
|
||||
<section className="workspace-shell" aria-label="业务工作台">
|
||||
<div className="workspace-shell__heading">
|
||||
<div>
|
||||
<p className="eyebrow">BUSINESS WORKSPACES</p>
|
||||
<h2>业务工作台</h2>
|
||||
<p className="eyebrow">{workspaceKicker(activeWorkspace)}</p>
|
||||
<h2>{activeOption?.label}</h2>
|
||||
</div>
|
||||
<p>根据当前账号权限显示可用入口；切换入口时才加载对应业务数据。</p>
|
||||
<p>{activeOption?.detail}；当前内容按账号权限加载。</p>
|
||||
</div>
|
||||
<nav className="workspace-nav" aria-label="业务工作台导航">
|
||||
{workspaceOptions.map((option) => (
|
||||
<button
|
||||
type="button"
|
||||
key={option.key}
|
||||
className={activeWorkspace === option.key ? "workspace-nav__item active" : "workspace-nav__item"}
|
||||
aria-current={activeWorkspace === option.key ? "page" : undefined}
|
||||
onClick={() => selectWorkspace(option.key)}
|
||||
>
|
||||
<strong>{option.label}</strong>
|
||||
<span>{option.detail}</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
<div className="workspace-shell__content">
|
||||
{activeWorkspace === "family" ? <SaaSWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
{activeWorkspace === "config" && hasOperationsAccess ? <OpsConfigWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
@@ -234,9 +328,32 @@ export function PlatformOverview() {
|
||||
</ol>
|
||||
</section>
|
||||
</main>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
function workspaceIcon(workspace: WorkspaceKey) {
|
||||
return {
|
||||
family: <TeamOutlined />,
|
||||
config: <SettingOutlined />,
|
||||
billing: <DollarOutlined />,
|
||||
alerts: <AlertOutlined />,
|
||||
diagnostics: <ToolOutlined />
|
||||
}[workspace];
|
||||
}
|
||||
|
||||
function workspaceKicker(workspace: WorkspaceKey) {
|
||||
return {
|
||||
family: "FAMILY OPERATIONS",
|
||||
config: "RUNTIME CONFIGURATION",
|
||||
billing: "BILLING & QUOTA",
|
||||
alerts: "ALERT MANAGEMENT",
|
||||
diagnostics: "DIAGNOSTICS"
|
||||
}[workspace];
|
||||
}
|
||||
|
||||
function roleLabel(role: string) {
|
||||
return ({ owner: "所有者", admin: "管理员", editor: "编辑者", viewer: "查看者" } as Record<string, string>)[role] ?? role;
|
||||
}
|
||||
|
||||
+204
-26
@@ -41,7 +41,8 @@ import {
|
||||
type Story
|
||||
} from "../api/client";
|
||||
|
||||
type Tab = "members" | "subjects" | "devices" | "firmware" | "conversations" | "stories" | "sharing" | "privacy";
|
||||
export type CustomerSection = "home" | "members" | "subjects" | "devices" | "conversations" | "stories" | "sharing" | "privacy" | "billing" | "messages";
|
||||
type Tab = CustomerSection | "firmware";
|
||||
type LoadState = "idle" | "loading" | "ready" | "error";
|
||||
type MediaLoadState = "idle" | "loading" | "ready" | "restricted" | "error";
|
||||
type EventStreamState = "connecting" | "connected" | "reconnecting";
|
||||
@@ -86,8 +87,15 @@ type FamilyControlDraft =
|
||||
| { kind: "sharing_grant_create"; subjectID: string; subjectName: string; granteeName: string; resourceLabel: string; input: SharingGrantInput; acknowledged: boolean; confirmation: string }
|
||||
| { kind: "sharing_revoke"; item: SharingGrant; acknowledged: boolean; confirmation: string };
|
||||
|
||||
export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string; accounts: CurrentUser["accounts"] }) {
|
||||
const [tab, setTab] = useState<Tab>("subjects");
|
||||
export function SaaSWorkspace({ accessToken, accounts, section = "home", onSectionChange, showNavigation = true, enableFirmware = false }: {
|
||||
accessToken: string;
|
||||
accounts: CurrentUser["accounts"];
|
||||
section?: CustomerSection;
|
||||
onSectionChange?: (section: CustomerSection) => void;
|
||||
showNavigation?: boolean;
|
||||
enableFirmware?: boolean;
|
||||
}) {
|
||||
const [tab, setTab] = useState<Tab>(section);
|
||||
const [state, setState] = useState<LoadState>("loading");
|
||||
const [error, setError] = useState<string>();
|
||||
const [households, setHouseholds] = useState<Household[]>([]);
|
||||
@@ -179,10 +187,21 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
const [rollbackReleaseID, setRollbackReleaseID] = useState("");
|
||||
const [eventStreamState, setEventStreamState] = useState<EventStreamState>("connecting");
|
||||
const [lastEventAt, setLastEventAt] = useState<string>();
|
||||
const [eventNotices, setEventNotices] = useState<Array<{ id: string; type: string; resourceType: string; status: string; occurredAt: string }>>([]);
|
||||
const [billingUsages, setBillingUsages] = useState<ConversationUsage[]>([]);
|
||||
const [billingLoading, setBillingLoading] = useState(false);
|
||||
const [billingError, setBillingError] = useState<string>();
|
||||
const eventRefreshTimer = useRef<number | undefined>(undefined);
|
||||
const lastEventRefreshAt = useRef(0);
|
||||
const conversationDetailController = useRef<AbortController | undefined>(undefined);
|
||||
|
||||
useEffect(() => setTab(section), [section]);
|
||||
|
||||
function selectSection(next: CustomerSection) {
|
||||
setTab(next);
|
||||
onSectionChange?.(next);
|
||||
}
|
||||
|
||||
const scheduleEventRefresh = useCallback(() => {
|
||||
if (eventRefreshTimer.current !== undefined) return;
|
||||
const minimumIntervalMS = 2000;
|
||||
@@ -276,6 +295,18 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
window.sessionStorage.setItem(storageKey, id);
|
||||
if (data) {
|
||||
setLastEventAt(new Date().toISOString());
|
||||
try {
|
||||
const item = JSON.parse(data) as { id?: number; type?: string; resource_type?: string; status?: string; occurred_at?: string };
|
||||
setEventNotices((current) => [{
|
||||
id: String(item.id ?? id),
|
||||
type: item.type ?? "resource.updated",
|
||||
resourceType: item.resource_type ?? "resource",
|
||||
status: item.status ?? "UPDATED",
|
||||
occurredAt: item.occurred_at ?? new Date().toISOString()
|
||||
}, ...current.filter((notice) => notice.id !== String(item.id ?? id))].slice(0, 50));
|
||||
} catch {
|
||||
// The event still triggers an authoritative REST refresh when a legacy payload cannot be decoded.
|
||||
}
|
||||
scheduleEventRefresh();
|
||||
}
|
||||
}
|
||||
@@ -401,6 +432,23 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
return () => controller.abort();
|
||||
}, [accessToken, conversationEngineMode, conversationFrom, conversationStatus, conversationTo, refreshRevision, selectedSubjectID]);
|
||||
|
||||
useEffect(() => {
|
||||
if (tab !== "billing" || conversations.length === 0) {
|
||||
if (tab === "billing") setBillingUsages([]);
|
||||
return;
|
||||
}
|
||||
const controller = new AbortController();
|
||||
setBillingLoading(true);
|
||||
setBillingError(undefined);
|
||||
void Promise.all(conversations.map((item) => platformApi.conversationUsage(item.id, accessToken, controller.signal)))
|
||||
.then((responses) => setBillingUsages(responses.map((response) => response.data)))
|
||||
.catch((cause) => {
|
||||
if (!(cause instanceof DOMException && cause.name === "AbortError")) setBillingError(errorMessage(cause));
|
||||
})
|
||||
.finally(() => { if (!controller.signal.aborted) setBillingLoading(false); });
|
||||
return () => controller.abort();
|
||||
}, [accessToken, conversations, tab]);
|
||||
|
||||
useEffect(() => {
|
||||
if (devices.length === 0) { setPresence({}); setTwins({}); return; }
|
||||
const controller = new AbortController();
|
||||
@@ -428,7 +476,7 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
const canReviewStory = selectedHousehold?.capabilities.includes("story.review") ?? false;
|
||||
const canReadPrivacy = selectedHousehold?.capabilities.includes("privacy.read") ?? false;
|
||||
const canManagePrivacy = selectedHousehold?.capabilities.includes("privacy.manage") ?? false;
|
||||
const canManageFirmware = selectedHousehold?.capabilities.includes("firmware.manage") ?? false;
|
||||
const canManageFirmware = enableFirmware && (selectedHousehold?.capabilities.includes("firmware.manage") ?? false);
|
||||
const canManageRecordingAccess = selectedHousehold?.role === "owner" || selectedHousehold?.role === "admin";
|
||||
const canManageSharing = selectedHousehold?.role === "owner" || selectedHousehold?.role === "admin";
|
||||
const policyVersion = accounts.find((account) => account.tenant_id === selectedHousehold?.tenant_id)?.policy_version ?? "";
|
||||
@@ -551,7 +599,7 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
}
|
||||
|
||||
async function openStoryConversation(story: Story) {
|
||||
setTab("conversations");
|
||||
selectSection("conversations");
|
||||
await openConversation(story.conversation_id);
|
||||
}
|
||||
|
||||
@@ -1084,9 +1132,9 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
<section className="workspace" aria-label="家庭业务工作台">
|
||||
<div className="workspace__header">
|
||||
<div>
|
||||
<p className="eyebrow">FAMILY OPERATIONS</p>
|
||||
<h2>家庭业务工作台</h2>
|
||||
<p>家庭、长者、授权、设备和通话数据均按服务端成员关系隔离。</p>
|
||||
<p className="eyebrow">FAMILY COMPANION</p>
|
||||
<h2>{customerSectionTitle(tab)}</h2>
|
||||
<p>{customerSectionDescription(tab)}</p>
|
||||
</div>
|
||||
<div className="workspace__actions">
|
||||
<span className={`event-stream-status event-stream-status--${eventStreamState}`} title={lastEventAt ? `最近事件：${formatDate(lastEventAt)}` : "等待状态事件"}>{eventStreamState === "connected" ? "状态实时更新" : eventStreamState === "reconnecting" ? "状态重连中" : "状态连接中"}</span>
|
||||
@@ -1100,12 +1148,12 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form className="accept-invitation" onSubmit={(event) => void acceptInvitation(event)}>
|
||||
{tab === "members" ? <form className="accept-invitation" onSubmit={(event) => void acceptInvitation(event)}>
|
||||
<label><span>收到家庭邀请？</span><input value={acceptInvitationToken} minLength={32} maxLength={128} autoComplete="off" onChange={(event) => setAcceptInvitationToken(event.target.value)} placeholder="粘贴一次性邀请凭据" /><small>先只读预览目标客户组织、家庭、角色和到期时间，确认后才建立成员关系。</small></label>
|
||||
<button type="submit" className="button-secondary" disabled={actionBusy || acceptInvitationToken.trim().length < 32 || acceptInvitationToken.trim().length > 128}>{actionBusy ? "正在核验…" : "预览并接受"}</button>
|
||||
</form>
|
||||
</form> : null}
|
||||
|
||||
<details className="household-create" open={households.length === 0}>
|
||||
{tab === "members" || households.length === 0 ? <details className="household-create" open={households.length === 0}>
|
||||
<summary>{households.length === 0 ? "创建第一个家庭" : "新增家庭"}</summary>
|
||||
<form className="tool-form" onSubmit={(event) => void createHousehold(event)}>
|
||||
<div><strong>建立家庭空间</strong><span>创建成功后，当前账号自动成为所有者，可继续新增长者档案和邀请成员。</span></div>
|
||||
@@ -1113,7 +1161,7 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
<label><span>家庭名称</span><input value={newHouseholdName} maxLength={200} onChange={(event) => setNewHouseholdName(event.target.value)} placeholder="例如：王家陪伴空间" required /></label>
|
||||
<button type="submit" disabled={actionBusy || !newHouseholdTenantID || !newHouseholdName.trim()}>创建家庭</button>
|
||||
</form>
|
||||
</details>
|
||||
</details> : null}
|
||||
|
||||
{state === "loading" ? <StatePanel title="正在载入家庭数据" detail="正在校验客户组织和家庭成员关系…" /> : null}
|
||||
{state === "error" ? <StatePanel title="家庭数据载入失败" detail={error ?? "未知错误"} action={() => void loadRoot()} /> : null}
|
||||
@@ -1124,28 +1172,35 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
|
||||
{state === "ready" && selectedHousehold ? (
|
||||
<>
|
||||
<div className="workspace__summary">
|
||||
{tab === "home" ? <div className="workspace__summary">
|
||||
<Metric label="长者档案" value={subjects.length} detail={canWriteSubject ? "当前角色可编辑" : "当前角色只读"} />
|
||||
<Metric label="有效分项授权" value={effectiveConsents} detail="共五类独立授权" />
|
||||
<Metric label="已确认事实" value={confirmedFacts} detail={`${facts.length - confirmedFacts}项等待核对`} />
|
||||
<Metric label="家庭设备" value={devices.filter((item) => item.household_id === selectedHousehold.id).length} detail={`${Object.values(presence).filter((item) => item.online).length}台在线`} />
|
||||
</div>
|
||||
<Metric label="家庭设备" value={devices.filter((item) => item.household_id === selectedHousehold.id).length} detail={`${devices.filter((item) => item.household_id === selectedHousehold.id && presence[item.id]?.online).length}台在线`} />
|
||||
</div> : null}
|
||||
|
||||
{selectedSubject ? <ConversationReadinessPanel readiness={conversationReadiness} subject={selectedSubject}
|
||||
loading={subjectLoading} onAction={(action) => setTab(action === "EDIT_PROFILE" || action === "MANAGE_CONSENTS" ? "subjects" : "devices")} /> : null}
|
||||
{tab === "home" && selectedSubject ? <ConversationReadinessPanel readiness={conversationReadiness} subject={selectedSubject}
|
||||
loading={subjectLoading} onAction={(action) => selectSection(action === "EDIT_PROFILE" || action === "MANAGE_CONSENTS" ? "subjects" : "devices")} /> : null}
|
||||
|
||||
<nav className="workspace__tabs" aria-label="业务模块">
|
||||
<TabButton active={tab === "members"} onClick={() => setTab("members")}>家庭成员</TabButton>
|
||||
<TabButton active={tab === "subjects"} onClick={() => setTab("subjects")}>长者与授权</TabButton>
|
||||
<TabButton active={tab === "devices"} onClick={() => setTab("devices")}>设备管理</TabButton>
|
||||
{showNavigation ? <nav className="workspace__tabs" aria-label="业务模块">
|
||||
<TabButton active={tab === "home"} onClick={() => selectSection("home")}>首页</TabButton>
|
||||
<TabButton active={tab === "members"} onClick={() => selectSection("members")}>家庭成员</TabButton>
|
||||
<TabButton active={tab === "subjects"} onClick={() => selectSection("subjects")}>长者与授权</TabButton>
|
||||
<TabButton active={tab === "devices"} onClick={() => selectSection("devices")}>设备管理</TabButton>
|
||||
{canManageFirmware ? <TabButton active={tab === "firmware"} onClick={() => setTab("firmware")}>固件发布</TabButton> : null}
|
||||
<TabButton active={tab === "conversations"} onClick={() => setTab("conversations")}>通话记录</TabButton>
|
||||
<TabButton active={tab === "stories"} onClick={() => setTab("stories")}>故事与记忆</TabButton>
|
||||
{canManageSharing ? <TabButton active={tab === "sharing"} onClick={() => setTab("sharing")}>资源分享</TabButton> : null}
|
||||
{canReadPrivacy ? <TabButton active={tab === "privacy"} onClick={() => setTab("privacy")}>隐私请求</TabButton> : null}
|
||||
</nav>
|
||||
<TabButton active={tab === "conversations"} onClick={() => selectSection("conversations")}>通话记录</TabButton>
|
||||
<TabButton active={tab === "stories"} onClick={() => selectSection("stories")}>故事与记忆</TabButton>
|
||||
{canManageSharing ? <TabButton active={tab === "sharing"} onClick={() => selectSection("sharing")}>资源分享</TabButton> : null}
|
||||
{canReadPrivacy ? <TabButton active={tab === "privacy"} onClick={() => selectSection("privacy")}>隐私请求</TabButton> : null}
|
||||
<TabButton active={tab === "billing"} onClick={() => selectSection("billing")}>费用与额度</TabButton>
|
||||
<TabButton active={tab === "messages"} onClick={() => selectSection("messages")}>消息中心</TabButton>
|
||||
</nav> : null}
|
||||
|
||||
{subjectError ? <div className="workspace__inline-error" role="alert">{subjectError}</div> : null}
|
||||
{tab === "home" ? <CustomerHomePanel household={selectedHousehold} subject={selectedSubject} subjects={subjects}
|
||||
devices={devices.filter((item) => item.household_id === selectedHousehold.id)} presence={presence}
|
||||
conversations={conversations} stories={stories} privacyRequests={privacyRequests}
|
||||
onOpen={(section) => selectSection(section)} /> : null}
|
||||
{tab === "members" ? <MemberPanel household={selectedHousehold} members={members} invitations={invitations}
|
||||
canManage={canManageMembers} canTransfer={canTransferOwnership} actionBusy={actionBusy}
|
||||
inviteeHint={inviteeHint} onInviteeHint={setInviteeHint} inviteRole={inviteRole} onInviteRole={setInviteRole}
|
||||
@@ -1238,12 +1293,135 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
{tab === "privacy" && canReadPrivacy ? <PrivacyPanel subjects={subjects} selectedID={selectedSubjectID} onSelect={setSelectedSubjectID}
|
||||
requests={privacyRequests} exports={exportTasks} loading={subjectLoading} canManage={canManagePrivacy} actionBusy={actionBusy}
|
||||
onCreateAccess={createPrivacyAccessRequest} onCreateDelete={createPrivacyDeleteRequest} onCreateExport={createExportTask} onDownloadExport={downloadExport} /> : null}
|
||||
{tab === "privacy" && !canReadPrivacy ? <StatePanel title="当前角色不能查看隐私请求" detail="家庭查看者没有隐私请求读取权限，请联系家庭所有者或管理员。" /> : null}
|
||||
{tab === "sharing" && !canManageSharing ? <StatePanel title="当前角色不能管理资源分享" detail="仅家庭所有者或管理员可以创建、撤销故事、文字和录音分享。" /> : null}
|
||||
{tab === "billing" ? <CustomerBillingPanel conversations={conversations} usages={billingUsages} loading={billingLoading} error={billingError} onOpenConversations={() => selectSection("conversations")} /> : null}
|
||||
{tab === "messages" ? <CustomerMessagePanel notices={eventNotices} devices={devices.filter((item) => item.household_id === selectedHousehold.id)} presence={presence} stories={stories} privacyRequests={privacyRequests} eventState={eventStreamState} /> : null}
|
||||
</>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CustomerHomePanel({ household, subject, subjects, devices, presence, conversations, stories, privacyRequests, onOpen }: {
|
||||
household: Household;
|
||||
subject?: Subject;
|
||||
subjects: Subject[];
|
||||
devices: ManagedDevice[];
|
||||
presence: Record<string, DevicePresence>;
|
||||
conversations: ConversationSummary[];
|
||||
stories: Story[];
|
||||
privacyRequests: PrivacyRequest[];
|
||||
onOpen: (section: CustomerSection) => void;
|
||||
}) {
|
||||
const onlineDevices = devices.filter((item) => presence[item.id]?.online).length;
|
||||
const activeConversations = conversations.filter((item) => ["PREPARING", "ROOM_ISSUED", "STARTING_AGENT", "ACTIVE", "STOPPING"].includes(item.status)).length;
|
||||
const pendingStories = stories.filter((item) => item.status === "CANDIDATE" || item.status === "IN_REVIEW").length;
|
||||
return <div className="customer-home">
|
||||
<section className="customer-welcome-card">
|
||||
<div><p className="eyebrow">WELCOME HOME</p><h3>{subject ? `守护${subject.preferred_name}的每一次陪伴` : `欢迎进入${household.name}`}</h3><p>设备状态、通话进展、授权和家庭故事都在同一处更新，所有内容只对有权限的家庭成员开放。</p></div>
|
||||
<button type="button" onClick={() => onOpen(subject ? "conversations" : "subjects")}>{subject ? "查看最近通话" : "添加长者档案"}</button>
|
||||
</section>
|
||||
<section className="customer-quick-grid" aria-label="家庭概况">
|
||||
<button type="button" onClick={() => onOpen("subjects")}><span>长者档案</span><strong>{subjects.length}</strong><small>{subject?.preferred_name ?? "等待添加档案"}</small></button>
|
||||
<button type="button" onClick={() => onOpen("devices")}><span>在线设备</span><strong>{onlineDevices}/{devices.length}</strong><small>{devices.length ? "查看设备与音量配置" : "等待绑定设备"}</small></button>
|
||||
<button type="button" onClick={() => onOpen("conversations")}><span>进行中通话</span><strong>{activeConversations}</strong><small>当前长者已加载 {conversations.length} 条记录</small></button>
|
||||
<button type="button" onClick={() => onOpen("stories")}><span>待确认故事</span><strong>{pendingStories}</strong><small>{stories.length} 条故事候选与回忆</small></button>
|
||||
</section>
|
||||
<section className="customer-action-list">
|
||||
<div><p className="eyebrow">QUICK ACTIONS</p><h3>常用入口</h3></div>
|
||||
<button type="button" onClick={() => onOpen("members")}><strong>邀请家人</strong><span>添加成员并分配查看或编辑权限</span></button>
|
||||
<button type="button" onClick={() => onOpen("sharing")}><strong>分享故事</strong><span>创建定向分享并随时撤销</span></button>
|
||||
<button type="button" onClick={() => onOpen("privacy")}><strong>隐私申请</strong><span>{privacyRequests.length} 条访问、导出或删除申请</span></button>
|
||||
</section>
|
||||
</div>;
|
||||
}
|
||||
|
||||
function CustomerBillingPanel({ conversations, usages, loading, error, onOpenConversations }: {
|
||||
conversations: ConversationSummary[];
|
||||
usages: ConversationUsage[];
|
||||
loading: boolean;
|
||||
error?: string;
|
||||
onOpenConversations: () => void;
|
||||
}) {
|
||||
const totals = new Map<string, number>();
|
||||
const categories = new Map<string, { cost: number; currency: string }>();
|
||||
usages.forEach((usage) => {
|
||||
const currency = usage.currency || "CNY";
|
||||
totals.set(currency, (totals.get(currency) ?? 0) + usage.cost_micros);
|
||||
usage.lines.forEach((line) => {
|
||||
const key = `${line.usage_category}:${line.currency}`;
|
||||
const current = categories.get(key) ?? { cost: 0, currency: line.currency };
|
||||
current.cost += line.cost_micros;
|
||||
categories.set(key, current);
|
||||
});
|
||||
});
|
||||
return <section className="customer-billing-panel">
|
||||
<div className="panel-title"><div><p className="eyebrow">USAGE & COST</p><h3>费用与额度</h3></div><button type="button" className="button-secondary" onClick={onOpenConversations}>查看通话明细</button></div>
|
||||
<p className="workspace__readonly-note">家庭端只汇总当前长者已加载通话的已核价费用；平台价格、供应商任务号和组织硬额度由运维端管理。</p>
|
||||
{loading ? <StatePanel title="正在汇总通话费用" detail={`正在读取 ${conversations.length} 次通话的计量结果…`} /> : null}
|
||||
{error ? <div className="workspace__inline-error" role="alert">{error}</div> : null}
|
||||
{!loading ? <div className="billing-total-grid">
|
||||
{[...totals.entries()].map(([currency, cost]) => <article key={currency}><span>已加载通话费用</span><strong>{formatUsageMoney(cost, currency)}</strong><small>{usages.length} 次通话已有计量结果</small></article>)}
|
||||
{totals.size === 0 ? <article><span>已加载通话费用</span><strong>{formatUsageMoney(0, "CNY")}</strong><small>当前没有已核价费用</small></article> : null}
|
||||
<article><span>家庭可见范围</span><strong>{conversations.length}</strong><small>当前长者、当前筛选条件</small></article>
|
||||
</div> : null}
|
||||
{!loading && categories.size ? <div className="billing-category-list">{[...categories.entries()].map(([key, item]) => <div key={key}><span>{usageCategoryLabel(key.split(":")[0])}</span><strong>{formatUsageMoney(item.cost, item.currency)}</strong></div>)}</div> : null}
|
||||
<div className="quota-note"><strong>额度说明</strong><p>家庭端不会读取或修改平台级额度策略。创建通话时，后端仍会实时执行额度校验；如果额度不足，页面会显示服务端返回的明确原因。</p></div>
|
||||
</section>;
|
||||
}
|
||||
|
||||
function CustomerMessagePanel({ notices, devices, presence, stories, privacyRequests, eventState }: {
|
||||
notices: Array<{ id: string; type: string; resourceType: string; status: string; occurredAt: string }>;
|
||||
devices: ManagedDevice[];
|
||||
presence: Record<string, DevicePresence>;
|
||||
stories: Story[];
|
||||
privacyRequests: PrivacyRequest[];
|
||||
eventState: EventStreamState;
|
||||
}) {
|
||||
const offline = devices.filter((item) => presence[item.id] && !presence[item.id].online);
|
||||
const pendingStories = stories.filter((item) => item.status === "CANDIDATE" || item.status === "IN_REVIEW");
|
||||
const activePrivacy = privacyRequests.filter((item) => !["COMPLETED", "REJECTED", "FAILED"].includes(item.status));
|
||||
const derived = [
|
||||
...offline.map((item) => ({ id: `offline-${item.id}`, title: "设备当前离线", detail: `${item.subject_name} · ${item.model}`, tone: "warning" })),
|
||||
...pendingStories.map((item) => ({ id: `story-${item.id}`, title: "故事等待家庭确认", detail: item.title, tone: "info" })),
|
||||
...activePrivacy.map((item) => ({ id: `privacy-${item.id}`, title: "隐私请求处理中", detail: `${item.request_type} · ${item.status}`, tone: "info" }))
|
||||
];
|
||||
return <section className="customer-message-panel">
|
||||
<div className="panel-title"><div><p className="eyebrow">MESSAGE CENTER</p><h3>消息中心</h3><p>这里只展示状态提醒，不在通知中携带转写、录音、故事正文或隐私原因。</p></div><span className={`event-stream-status event-stream-status--${eventState}`}>{eventState === "connected" ? "实时连接" : eventState === "reconnecting" ? "重新连接" : "正在连接"}</span></div>
|
||||
{derived.length ? <div className="message-list">{derived.map((item) => <article key={item.id} className={`message-item message-item--${item.tone}`}><span aria-hidden="true" /><div><strong>{item.title}</strong><p>{item.detail}</p></div></article>)}</div> : <p className="workspace__readonly-note">当前没有需要处理的家庭提醒。</p>}
|
||||
<div className="message-timeline"><h4>本次登录收到的实时事件</h4>{notices.length ? notices.map((notice) => <article key={notice.id}><time>{formatDate(notice.occurredAt)}</time><div><strong>{eventTypeLabel(notice.type)}</strong><p>{resourceTypeLabel(notice.resourceType)} · {notice.status}</p></div></article>) : <p>暂未收到新的状态事件。服务端事件到达后会自动出现在这里。</p>}</div>
|
||||
</section>;
|
||||
}
|
||||
|
||||
function customerSectionTitle(section: Tab) {
|
||||
return ({ home: "家庭首页", members: "家庭管理", subjects: "长者管理", devices: "设备管理", firmware: "固件发布", conversations: "通话记录", stories: "故事与记忆", sharing: "资源分享", privacy: "隐私请求", billing: "费用与额度", messages: "消息中心" } as Record<Tab, string>)[section];
|
||||
}
|
||||
|
||||
function customerSectionDescription(section: Tab) {
|
||||
return ({
|
||||
home: "查看家庭陪伴服务的最新状态和待办事项。",
|
||||
members: "管理家庭空间、成员邀请、角色和所有权。",
|
||||
subjects: "维护长者档案、稳定事实和分项授权。",
|
||||
devices: "绑定陪伴设备，查看在线状态并调整安全配置。",
|
||||
firmware: "管理设备固件发布。",
|
||||
conversations: "查看通话进展、文字内容、录音授权和单次费用。",
|
||||
stories: "核对从通话中整理的故事和长期记忆。",
|
||||
sharing: "按资源和权限范围向指定家庭成员分享内容。",
|
||||
privacy: "提交访问、导出或删除申请并跟踪处理进度。",
|
||||
billing: "汇总当前可见通话的实际计量费用。",
|
||||
messages: "集中查看设备、通话、故事和隐私请求的状态提醒。"
|
||||
} as Record<Tab, string>)[section];
|
||||
}
|
||||
|
||||
function eventTypeLabel(type: string) {
|
||||
return ({ "device.presence.changed": "设备在线状态变化", "conversation.started": "通话已开始", "conversation.completed": "通话已完成", "conversation.failed": "通话启动失败", "story.created": "生成新的故事候选", "story.revised": "故事内容已更新", "media.upload.completed": "通话媒体上传完成", "export.ready": "隐私导出已就绪", "privacy_request.updated": "隐私请求状态变化", "device.command.updated": "设备指令状态变化" } as Record<string, string>)[type] ?? "业务状态已更新";
|
||||
}
|
||||
|
||||
function resourceTypeLabel(type: string) {
|
||||
return ({ device: "设备", conversation: "通话", story: "故事", upload_batch: "媒体", export_task: "导出任务", privacy_request: "隐私请求", device_command: "设备指令" } as Record<string, string>)[type] ?? "业务资源";
|
||||
}
|
||||
|
||||
function ConversationReadinessPanel({ readiness, subject, loading, onAction }: {
|
||||
readiness?: ConversationReadiness; subject: Subject; loading: boolean; onAction: (action: string) => void;
|
||||
}) {
|
||||
|
||||
@@ -891,3 +891,721 @@ form[aria-label="联调问题流转编辑"] label small { color: #7b898d; font-w
|
||||
.alert-config-form > div, .alert-config-form__wide { grid-column: auto; }
|
||||
.alert-config-form button { justify-self: stretch; }
|
||||
}
|
||||
|
||||
/* Customer portal: a separate family-facing shell. */
|
||||
.customer-layout {
|
||||
min-height: 100vh;
|
||||
color: #1f2329;
|
||||
background: #f5f6f8;
|
||||
}
|
||||
|
||||
.customer-layout button:hover { transform: none; }
|
||||
.customer-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
padding: 0 22px 0 14px;
|
||||
border-bottom: 1px solid #e8eaee;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(31, 35, 41, 0.04);
|
||||
}
|
||||
|
||||
.customer-header__brand,
|
||||
.customer-header__actions,
|
||||
.customer-account-button,
|
||||
.customer-sider__title,
|
||||
.customer-sider__help,
|
||||
.customer-profile__identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.customer-header__brand { gap: 10px; color: #646a73; white-space: nowrap; }
|
||||
.customer-header__brand > strong { color: #1f2329; font-size: 18px; }
|
||||
.customer-brand-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 7px;
|
||||
color: #fff;
|
||||
background: #5b5ce2;
|
||||
font-size: 17px;
|
||||
}
|
||||
.customer-brand-divider { width: 1px; height: 22px; margin: 0 5px; background: #e3e6eb; }
|
||||
.customer-header__actions { gap: 10px; }
|
||||
.customer-search { width: min(320px, 28vw); }
|
||||
.customer-account-button { gap: 8px; height: 42px; padding: 0 8px; color: #3f444c; background: transparent; }
|
||||
|
||||
.customer-layout__body { min-height: calc(100vh - 60px); }
|
||||
.customer-sider {
|
||||
position: sticky !important;
|
||||
top: 60px;
|
||||
align-self: flex-start;
|
||||
height: calc(100vh - 60px);
|
||||
overflow: auto;
|
||||
border-right: 1px solid #e8eaee;
|
||||
background: #fff !important;
|
||||
}
|
||||
.customer-sider__title { gap: 10px; height: 58px; padding: 0 24px; color: #30343b; font-weight: 700; }
|
||||
.customer-sider .ant-menu { border-inline-end: 0 !important; padding: 0 10px; background: transparent; }
|
||||
.customer-sider .ant-menu-item,
|
||||
.customer-sider .ant-menu-submenu-title { margin-block: 3px; font-size: 14px; }
|
||||
.customer-sider__help {
|
||||
gap: 10px;
|
||||
margin: 22px 14px;
|
||||
padding: 12px;
|
||||
border: 1px solid #e8eaee;
|
||||
border-radius: 8px;
|
||||
color: #5b5ce2;
|
||||
background: #f8f8ff;
|
||||
}
|
||||
.customer-sider__help div { display: grid; gap: 2px; }
|
||||
.customer-sider__help strong { color: #3f444c; font-size: 12px; }
|
||||
.customer-sider__help span { color: #8b9199; font-size: 10px; }
|
||||
|
||||
.customer-content { min-width: 0; background: #f5f6f8; }
|
||||
.customer-page {
|
||||
width: min(1440px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 22px 28px 48px;
|
||||
}
|
||||
.customer-page__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin: 14px 0 18px;
|
||||
}
|
||||
.customer-page__header h1 { max-width: none; color: #1f2329; font-family: inherit; font-size: 26px; line-height: 1.35; }
|
||||
.customer-page__header p { margin: 6px 0 0; color: #646a73; line-height: 1.6; }
|
||||
.customer-auth-state { display: flex; justify-content: center; }
|
||||
.customer-auth-state .ant-card-body { display: flex; align-items: center; gap: 12px; color: #646a73; }
|
||||
|
||||
.customer-page > .workspace {
|
||||
margin-top: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid #e3e6eb;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
.customer-page .workspace__header { align-items: center; padding-bottom: 16px; border-bottom: 1px solid #eef0f3; }
|
||||
.customer-page .workspace__header h2 { color: #1f2329; font-size: 18px; }
|
||||
.customer-page .workspace__header > div:first-child > p:last-child { color: #7b818a; font-size: 13px; }
|
||||
.customer-page .eyebrow { margin-bottom: 5px; color: #5b5ce2; font-size: 10px; letter-spacing: .13em; }
|
||||
.customer-page .workspace__actions select { min-width: 160px; border-radius: 7px; }
|
||||
.customer-page .workspace__summary { margin-top: 16px; }
|
||||
.customer-page .metric { border: 1px solid #e8eaee; border-radius: 8px; background: #fafbfc; }
|
||||
.customer-page .conversation-readiness,
|
||||
.customer-page .conversation-readiness--ready,
|
||||
.customer-page .conversation-readiness--blocked { border-radius: 8px; background: #fff; }
|
||||
|
||||
.customer-welcome-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin-top: 16px;
|
||||
padding: 24px;
|
||||
border: 1px solid #dedfff;
|
||||
border-radius: 10px;
|
||||
background: #f7f7ff;
|
||||
}
|
||||
.customer-welcome-card h3 { color: #22263d; font-size: 22px; }
|
||||
.customer-welcome-card p:not(.eyebrow) { max-width: 650px; margin: 8px 0 0; color: #686e7b; line-height: 1.7; }
|
||||
.customer-welcome-card > button { flex: none; border-radius: 7px; color: #fff; background: #5b5ce2; }
|
||||
.customer-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
|
||||
.customer-quick-grid button {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid #e6e8ec;
|
||||
border-radius: 8px;
|
||||
color: #646a73;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
.customer-quick-grid button:hover { border-color: #b8b9f5; background: #fafaff; }
|
||||
.customer-quick-grid strong { color: #1f2329; font-size: 24px; }
|
||||
.customer-quick-grid small { overflow: hidden; color: #8b9199; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.customer-action-list { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 12px; margin-top: 14px; }
|
||||
.customer-action-list > div,
|
||||
.customer-action-list > button { padding: 16px; border: 1px solid #e6e8ec; border-radius: 8px; background: #fff; text-align: left; }
|
||||
.customer-action-list > div { border: 0; padding-left: 0; }
|
||||
.customer-action-list > button { display: grid; gap: 6px; color: #1f2329; }
|
||||
.customer-action-list > button span { color: #8b9199; font-size: 12px; font-weight: 400; line-height: 1.5; }
|
||||
|
||||
.customer-billing-panel,
|
||||
.customer-message-panel { margin-top: 16px; }
|
||||
.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
|
||||
.panel-title h3 { color: #1f2329; font-size: 18px; }
|
||||
.panel-title p:not(.eyebrow) { margin: 6px 0 0; color: #7b818a; }
|
||||
.billing-total-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 14px 0; }
|
||||
.billing-total-grid article { padding: 20px; border: 1px solid #e6e8ec; border-radius: 8px; background: #fafbfc; }
|
||||
.billing-total-grid span,
|
||||
.billing-total-grid small { display: block; color: #7b818a; }
|
||||
.billing-total-grid strong { display: block; margin: 8px 0; color: #1f2329; font-size: 26px; }
|
||||
.billing-category-list { border: 1px solid #e6e8ec; border-radius: 8px; overflow: hidden; }
|
||||
.billing-category-list div { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eef0f3; }
|
||||
.billing-category-list div:last-child { border-bottom: 0; }
|
||||
.quota-note { margin-top: 14px; padding: 16px; border-left: 3px solid #5b5ce2; background: #f7f7ff; }
|
||||
.quota-note p { margin: 5px 0 0; color: #646a73; line-height: 1.65; }
|
||||
|
||||
.message-list,
|
||||
.message-timeline { display: grid; gap: 8px; }
|
||||
.message-item { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid #e6e8ec; border-radius: 8px; background: #fff; }
|
||||
.message-item > span { width: 8px; height: 8px; border-radius: 50%; background: #5b5ce2; }
|
||||
.message-item--warning > span { background: #d98b12; }
|
||||
.message-item strong { color: #30343b; }
|
||||
.message-item p { margin: 3px 0 0; color: #8b9199; }
|
||||
.message-timeline { margin-top: 18px; }
|
||||
.message-timeline h4 { margin: 0 0 4px; }
|
||||
.message-timeline article { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid #eef0f3; }
|
||||
.message-timeline time,
|
||||
.message-timeline p { color: #8b9199; }
|
||||
.message-timeline p { margin: 3px 0 0; }
|
||||
|
||||
.customer-login-card { max-width: 560px; margin: 70px auto 0; text-align: center; }
|
||||
.customer-login-card .ant-card-body { padding: 42px; }
|
||||
.customer-login-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 12px; color: #5b5ce2; background: #eeeeff; font-size: 23px; }
|
||||
.customer-login-notes { display: flex; justify-content: center; gap: 22px; margin-top: 24px; color: #7b818a; font-size: 12px; }
|
||||
.customer-profile { display: grid; gap: 16px; }
|
||||
.customer-profile__identity { gap: 18px; }
|
||||
.customer-profile__identity > div { flex: 1; }
|
||||
.customer-profile__identity h2,
|
||||
.customer-profile__identity p { margin: 0; }
|
||||
.customer-profile__identity p { margin-top: 4px; color: #8b9199; }
|
||||
.customer-membership-list { margin-top: 18px; }
|
||||
.customer-membership-list > div { padding: 12px 0; border-top: 1px solid #eef0f3; }
|
||||
.customer-membership-list > div > div { display: flex; justify-content: space-between; }
|
||||
.customer-membership-list small { color: #8b9199; }
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.customer-search { display: none; }
|
||||
.customer-quick-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.customer-action-list { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.customer-header { padding-inline: 8px; }
|
||||
.customer-header__brand > strong,
|
||||
.customer-header__brand > span:not(.customer-brand-mark),
|
||||
.customer-account-button > span,
|
||||
.customer-account-button > .anticon-down { display: none; }
|
||||
.customer-sider { position: fixed !important; z-index: 90; }
|
||||
.customer-content { margin-left: 72px; }
|
||||
.customer-page { padding: 16px 12px 32px; }
|
||||
.customer-page__header { flex-direction: column; gap: 8px; }
|
||||
.customer-page > .workspace { padding: 14px; }
|
||||
.customer-page .workspace__header,
|
||||
.customer-welcome-card { align-items: flex-start; flex-direction: column; }
|
||||
.customer-page .workspace__actions { align-items: stretch; flex-direction: column; width: 100%; }
|
||||
.customer-quick-grid,
|
||||
.billing-total-grid { grid-template-columns: 1fr; }
|
||||
.message-timeline article { grid-template-columns: 1fr; gap: 4px; }
|
||||
}
|
||||
|
||||
/* Ant Design enterprise console refresh */
|
||||
:root {
|
||||
color: #1f2329;
|
||||
background: #f5f6f8;
|
||||
--console-primary: #5b5ce2;
|
||||
--console-primary-soft: #ebe9ff;
|
||||
--console-text: #1f2329;
|
||||
--console-muted: #646a73;
|
||||
--console-border: #e3e6eb;
|
||||
--console-fill: #f7f8fa;
|
||||
--console-white: #fff;
|
||||
}
|
||||
|
||||
html { background: #f5f6f8; }
|
||||
|
||||
body {
|
||||
color: var(--console-text);
|
||||
background: #f5f6f8;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 34px;
|
||||
border: 1px solid var(--console-primary);
|
||||
border-radius: 8px;
|
||||
padding: 0.42rem 0.9rem;
|
||||
color: #fff;
|
||||
background: var(--console-primary);
|
||||
box-shadow: none;
|
||||
font-size: 0.82rem;
|
||||
transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: none;
|
||||
border-color: #7979eb;
|
||||
background: #6c6de8;
|
||||
}
|
||||
|
||||
button:disabled { opacity: 0.55; }
|
||||
|
||||
.button-secondary {
|
||||
border-color: #d8dbe2;
|
||||
color: #3d424a;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.app-layout { min-height: 100vh; }
|
||||
|
||||
.app-header {
|
||||
position: fixed;
|
||||
inset: 0 0 auto;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
padding: 0 22px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--console-border);
|
||||
line-height: normal;
|
||||
box-shadow: 0 1px 5px rgba(31, 35, 41, 0.04);
|
||||
}
|
||||
|
||||
.app-header__brand,
|
||||
.app-header__tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app-header__brand > strong {
|
||||
color: #15181d;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-header__collapse.ant-btn {
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
color: #3d424a;
|
||||
}
|
||||
|
||||
.brand-mark,
|
||||
.page-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #1677ff, #6c4cff);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.header-search { width: min(300px, 24vw); }
|
||||
.header-user { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.app-layout__body { min-height: 100vh; padding-top: 60px; }
|
||||
|
||||
.app-sider {
|
||||
position: sticky !important;
|
||||
top: 60px;
|
||||
height: calc(100vh - 60px);
|
||||
overflow: auto;
|
||||
border-right: 1px solid var(--console-border);
|
||||
}
|
||||
|
||||
.app-sider .ant-layout-sider-children {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sider-product {
|
||||
display: flex;
|
||||
height: 58px;
|
||||
padding: 0 20px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #252a31;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sider-product .anticon { color: var(--console-primary); font-size: 18px; }
|
||||
.app-sider .ant-menu { flex: 1; border-inline-end: 0 !important; padding: 0 10px; }
|
||||
.app-sider .ant-menu-item { height: 42px; margin-block: 4px; line-height: 42px; }
|
||||
.app-sider .ant-menu-item-group-title { padding: 12px 14px 4px; color: #8f959e; font-size: 12px; }
|
||||
.app-sider .ant-menu-item-selected { font-weight: 600; }
|
||||
|
||||
.sider-meta {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
margin: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 8px;
|
||||
color: var(--console-muted);
|
||||
background: #fff;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.sider-meta strong { color: #363b43; font-size: 12px; }
|
||||
|
||||
.app-content { min-width: 0; background: #f5f6f8; }
|
||||
|
||||
.page-container {
|
||||
width: 100%;
|
||||
max-width: 1560px;
|
||||
margin: 0 auto;
|
||||
padding: 22px 28px 40px;
|
||||
}
|
||||
|
||||
.page-breadcrumb { margin-bottom: 14px; color: #8f959e; font-size: 12px; }
|
||||
|
||||
.hero {
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin: 0 0 20px;
|
||||
padding: 4px 0 2px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
max-width: none;
|
||||
color: #171a1f;
|
||||
font-family: inherit;
|
||||
font-size: 24px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.hero__description {
|
||||
max-width: 64rem;
|
||||
margin: 8px 0 0 46px;
|
||||
color: var(--console-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 7px;
|
||||
color: var(--console-primary);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 { color: var(--console-text); }
|
||||
h2 { font-size: 20px; }
|
||||
h3 { font-size: 16px; }
|
||||
|
||||
.status-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
min-height: 132px;
|
||||
padding: 0;
|
||||
border-color: var(--console-border);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.status-card .ant-card-body { padding: 18px 20px; }
|
||||
.status-card__topline { color: #7b818a; font-size: 13px; }
|
||||
.status-card strong { margin-top: 19px; color: #1f2329; font-size: 22px; line-height: 1.2; }
|
||||
.status-card p { overflow: hidden; margin: 8px 0 0; color: #7b818a; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.identity-panel,
|
||||
.workspace-shell,
|
||||
.milestone-panel,
|
||||
.workspace,
|
||||
.ops-workspace {
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.identity-panel {
|
||||
grid-template-columns: minmax(260px, 0.75fr) minmax(360px, 1.5fr);
|
||||
gap: 34px;
|
||||
margin-top: 14px;
|
||||
padding: 22px 24px;
|
||||
}
|
||||
|
||||
.identity-panel__intro > p:last-child,
|
||||
.identity-panel__state,
|
||||
.identity-panel__login,
|
||||
.identity-panel__login p {
|
||||
color: var(--console-muted);
|
||||
}
|
||||
|
||||
.identity-panel__intro h2 { font-size: 19px; }
|
||||
.identity-panel__login strong { color: var(--console-text); font-size: 16px; }
|
||||
.identity-panel__account-head span { color: #8a9099; }
|
||||
|
||||
.account-card {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: var(--console-fill);
|
||||
}
|
||||
|
||||
.account-card > strong { color: var(--console-text); }
|
||||
.membership { border-color: var(--console-border); color: #535961; }
|
||||
|
||||
.workspace-shell {
|
||||
margin-top: 14px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace-shell__heading {
|
||||
align-items: center;
|
||||
padding: 18px 22px;
|
||||
border-bottom: 1px solid var(--console-border);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.workspace-shell__heading h2 { font-size: 19px; }
|
||||
.workspace-shell__heading > p { color: var(--console-muted); font-size: 12px; }
|
||||
.workspace-shell__content { padding: 0; }
|
||||
.workspace-shell__content > .workspace,
|
||||
.workspace-shell__content > .ops-workspace { margin-top: 0; }
|
||||
|
||||
.workspace,
|
||||
.ops-workspace {
|
||||
margin-top: 0;
|
||||
padding: 22px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.workspace__header,
|
||||
.ops-workspace__head { align-items: center; }
|
||||
.workspace__header > div:first-child > p:last-child,
|
||||
.ops-workspace__head p { color: var(--console-muted); }
|
||||
|
||||
.workspace__tabs {
|
||||
gap: 4px;
|
||||
margin: 20px 0 16px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
min-height: 32px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
color: #5f656d;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tab-button:hover { color: var(--console-primary); background: #f0efff; }
|
||||
.tab-button.active { color: var(--console-primary); background: #fff; box-shadow: 0 1px 4px rgba(31, 35, 41, 0.08); }
|
||||
|
||||
.workspace select,
|
||||
.workspace input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
|
||||
.workspace textarea,
|
||||
.ops-workspace select,
|
||||
.ops-workspace input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
|
||||
.ops-workspace textarea {
|
||||
min-height: 36px;
|
||||
border: 1px solid #d8dbe2;
|
||||
border-radius: 7px;
|
||||
padding: 7px 10px;
|
||||
color: #252a31;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workspace input:focus,
|
||||
.workspace select:focus,
|
||||
.workspace textarea:focus,
|
||||
.ops-workspace input:focus,
|
||||
.ops-workspace select:focus,
|
||||
.ops-workspace textarea:focus {
|
||||
outline: none;
|
||||
border-color: #7778e6;
|
||||
box-shadow: 0 0 0 2px rgba(91, 92, 226, 0.12);
|
||||
}
|
||||
|
||||
.workspace label,
|
||||
.ops-workspace label,
|
||||
.ops-config-form label,
|
||||
.billing-form label,
|
||||
.alert-config-form label,
|
||||
.diagnostic-search label {
|
||||
color: #5d636c;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tool-form,
|
||||
.subject-create-form,
|
||||
.profile-editor,
|
||||
.conversation-readiness,
|
||||
.panel-section,
|
||||
.ops-config-form,
|
||||
.ops-gate-card,
|
||||
.ops-rollout-panel,
|
||||
.billing-form,
|
||||
.conversation-usage,
|
||||
.diagnostic-search,
|
||||
.alert-config-form,
|
||||
.privacy-delete-confirmation,
|
||||
.firmware-recovery-form,
|
||||
.firmware-impact {
|
||||
border-color: var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: var(--console-fill);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.summary-card,
|
||||
.device-card,
|
||||
.diagnostic-card,
|
||||
.billing-summary-grid article,
|
||||
.alert-summary-grid article,
|
||||
.ops-ledger,
|
||||
.ops-version-group,
|
||||
.billing-ledger,
|
||||
.billing-policy-list,
|
||||
.alert-ledger-grid > section,
|
||||
.firmware-key-ledger,
|
||||
.firmware-key-card,
|
||||
.firmware-impact__metrics article,
|
||||
.firmware-impact__devices article {
|
||||
border-color: var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workspace__split,
|
||||
.conversation-layout,
|
||||
.story-layout,
|
||||
.alert-queue-layout,
|
||||
.billing-rate-table {
|
||||
border-color: var(--console-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.resource-list,
|
||||
.conversation-list,
|
||||
.story-sidebar,
|
||||
.alert-queue,
|
||||
.billing-rate-table > div,
|
||||
.ops-ledger > div,
|
||||
.ops-version-group > div:first-child,
|
||||
.billing-ledger > div,
|
||||
.billing-policy-list > div,
|
||||
.alert-queue__toolbar,
|
||||
.alert-ledger-grid section > div {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.resource-button,
|
||||
.conversation-row {
|
||||
border-radius: 7px;
|
||||
color: #50565e;
|
||||
}
|
||||
|
||||
.resource-button:hover,
|
||||
.conversation-row:hover { background: #eeeff2; }
|
||||
.resource-button.active,
|
||||
.conversation-row.active { color: var(--console-primary); background: #fff; box-shadow: 0 1px 4px rgba(31, 35, 41, 0.08); }
|
||||
|
||||
.ops-billing,
|
||||
.ops-alerts,
|
||||
.ops-diagnostics { background: #fff; }
|
||||
|
||||
.billing-summary-grid strong,
|
||||
.alert-summary-grid strong,
|
||||
.summary-card strong,
|
||||
.diagnostic-card__head strong { color: var(--console-text); }
|
||||
|
||||
.status-pill,
|
||||
.event-stream-status,
|
||||
.alert-severity,
|
||||
.alert-detail__title b {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.event-stream-status { color: #137a50; background: #e9f7f0; }
|
||||
.event-stream-status--connecting,
|
||||
.event-stream-status--reconnecting { color: #a86500; background: #fff5df; }
|
||||
|
||||
.workspace__inline-error { border: 1px solid #ffd6d2; border-radius: 7px; color: #b42318; background: #fff2f0; }
|
||||
.workspace__action-message { border: 1px solid #cdebdc; border-radius: 7px; color: #137a50; background: #edf9f3; }
|
||||
.workspace__readonly-note,
|
||||
.ops-config-form__note { border-radius: 7px; color: #646a73; background: #f2f3f5; }
|
||||
|
||||
.alert-queue li.selected { box-shadow: inset 3px 0 var(--console-primary); background: #f4f3ff; }
|
||||
.alert-timeline ol::before { background: #d8dbe2; }
|
||||
.alert-timeline li::before { background: var(--console-primary); box-shadow: 0 0 0 1px #c8c9f6; }
|
||||
|
||||
.milestone-panel {
|
||||
grid-template-columns: 300px 1fr;
|
||||
gap: 30px;
|
||||
margin-top: 14px;
|
||||
padding: 20px 24px;
|
||||
color: var(--console-text);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.milestone-panel h2 { color: var(--console-text); font-size: 18px; }
|
||||
.milestone-panel ol { gap: 10px; }
|
||||
.milestone-panel li { color: #8b9199; font-size: 11px; }
|
||||
.milestone-panel li span { margin-bottom: 7px; color: #a5abb3; font-size: 14px; font-weight: 700; }
|
||||
.milestone-panel li.done,
|
||||
.milestone-panel li.active { color: #4d535b; }
|
||||
.milestone-panel li.done span { color: #1f9d68; }
|
||||
.milestone-panel li.active span { color: var(--console-primary); }
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.header-search { display: none; }
|
||||
.identity-panel { grid-template-columns: 1fr; gap: 18px; }
|
||||
.milestone-panel { grid-template-columns: 1fr; }
|
||||
.milestone-panel ol { grid-template-columns: repeat(4, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.app-header { padding: 0 10px; }
|
||||
.app-header__brand > strong,
|
||||
.app-header__brand .ant-tag,
|
||||
.header-user,
|
||||
.app-header__tools > .ant-badge { display: none; }
|
||||
.app-sider { position: fixed !important; z-index: 80; }
|
||||
.app-sider:not(.ant-layout-sider-collapsed) { box-shadow: 8px 0 24px rgba(31, 35, 41, 0.12); }
|
||||
.app-content { margin-left: 72px; }
|
||||
.page-container { padding: 16px 12px 28px; }
|
||||
.hero { align-items: flex-start; gap: 14px; }
|
||||
.hero__description { margin-left: 0; }
|
||||
.status-grid { grid-template-columns: 1fr; }
|
||||
.identity-panel { gap: 16px; padding: 18px; }
|
||||
.workspace-shell__heading { align-items: flex-start; flex-direction: column; gap: 6px; }
|
||||
.workspace-shell__heading > p { text-align: left; }
|
||||
.workspace,
|
||||
.ops-workspace { padding: 16px; }
|
||||
.milestone-panel { padding: 18px; }
|
||||
.milestone-panel ol { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user