Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 stringadmin
|
8cf9ee3519 | ||
|
stringadmin
|
91c332f567 | ||
 ludan
|
ecade14bd0 |
@@ -1,32 +0,0 @@
|
|||||||
import { serverRequest } from "./serverConnection";
|
|
||||||
|
|
||||||
export interface BugFeedbackInput {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
screenshotUrl?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BugFeedbackItem {
|
|
||||||
id: number;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
screenshotUrl?: string | null;
|
|
||||||
status: "pending" | "approved" | "rejected";
|
|
||||||
adminNote?: string | null;
|
|
||||||
createdAt: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const bugFeedbackClient = {
|
|
||||||
async submit(input: BugFeedbackInput): Promise<{ id: number; status: string; createdAt: string }> {
|
|
||||||
const payload = await serverRequest<{ feedback: { id: number; status: string; createdAt: string } }>(
|
|
||||||
"bug-feedback",
|
|
||||||
{ method: "POST", body: input },
|
|
||||||
);
|
|
||||||
return payload.feedback;
|
|
||||||
},
|
|
||||||
|
|
||||||
async listMine(): Promise<BugFeedbackItem[]> {
|
|
||||||
const payload = await serverRequest<{ feedbacks?: BugFeedbackItem[] }>("bug-feedback/mine");
|
|
||||||
return Array.isArray(payload.feedbacks) ? payload.feedbacks : [];
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
import {
|
import {
|
||||||
ArrowDownOutlined,
|
ArrowDownOutlined,
|
||||||
ArrowUpOutlined,
|
ArrowUpOutlined,
|
||||||
BugOutlined,
|
|
||||||
CheckCircleOutlined,
|
CheckCircleOutlined,
|
||||||
FlagOutlined,
|
FlagOutlined,
|
||||||
InfoCircleOutlined,
|
InfoCircleOutlined,
|
||||||
@@ -15,7 +14,6 @@ import { useEffect, useMemo, useRef, useState } from "react";
|
|||||||
import type { ReactNode } from "react";
|
import type { ReactNode } from "react";
|
||||||
import { publicConfigClient, type WebPublicConfig } from "../api/publicConfigClient";
|
import { publicConfigClient, type WebPublicConfig } from "../api/publicConfigClient";
|
||||||
import { toast } from "./toast/toastStore";
|
import { toast } from "./toast/toastStore";
|
||||||
import { BugFeedbackModal } from "./BugFeedbackModal";
|
|
||||||
import type { ServerConnectionHealth } from "../api/serverConnection";
|
import type { ServerConnectionHealth } from "../api/serverConnection";
|
||||||
import { ossAssets } from "../data/ossAssets";
|
import { ossAssets } from "../data/ossAssets";
|
||||||
import { canManageCommunityCases, canReviewCommunity } from "../features/community-review/communityPermissions";
|
import { canManageCommunityCases, canReviewCommunity } from "../features/community-review/communityPermissions";
|
||||||
@@ -70,7 +68,6 @@ function AppShell({
|
|||||||
const [profileOpen, setProfileOpen] = useState(false);
|
const [profileOpen, setProfileOpen] = useState(false);
|
||||||
const [rechargeOpen, setRechargeOpen] = useState(false);
|
const [rechargeOpen, setRechargeOpen] = useState(false);
|
||||||
const [infoOpen, setInfoOpen] = useState(false);
|
const [infoOpen, setInfoOpen] = useState(false);
|
||||||
const [bugFeedbackOpen, setBugFeedbackOpen] = useState(false);
|
|
||||||
const infoRef = useRef<HTMLDivElement>(null);
|
const infoRef = useRef<HTMLDivElement>(null);
|
||||||
const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
|
const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
|
||||||
const [publicConfig, setPublicConfig] = useState<WebPublicConfig>({});
|
const [publicConfig, setPublicConfig] = useState<WebPublicConfig>({});
|
||||||
@@ -346,11 +343,6 @@ function AppShell({
|
|||||||
onMarkAllRead={onMarkAllNotificationsRead}
|
onMarkAllRead={onMarkAllNotificationsRead}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{session && (
|
|
||||||
<button className="info-button" type="button" aria-label="Bug反馈" title="Bug反馈" onClick={() => setBugFeedbackOpen(true)}>
|
|
||||||
<BugOutlined />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<div className="info-popover-anchor" ref={infoRef}>
|
<div className="info-popover-anchor" ref={infoRef}>
|
||||||
<button
|
<button
|
||||||
className="info-button"
|
className="info-button"
|
||||||
@@ -499,7 +491,6 @@ function AppShell({
|
|||||||
</div>
|
</div>
|
||||||
{session?.user.role === "admin" ? <AdminMonitor /> : null}
|
{session?.user.role === "admin" ? <AdminMonitor /> : null}
|
||||||
<RechargeModal open={rechargeOpen} onClose={() => setRechargeOpen(false)} currentBalance={displayedBalanceCents} />
|
<RechargeModal open={rechargeOpen} onClose={() => setRechargeOpen(false)} currentBalance={displayedBalanceCents} />
|
||||||
<BugFeedbackModal open={bugFeedbackOpen} onClose={() => setBugFeedbackOpen(false)} />
|
|
||||||
<CookieConsentBanner />
|
<CookieConsentBanner />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,131 +0,0 @@
|
|||||||
import { useCallback, useEffect, useRef, useState } from "react";
|
|
||||||
import { BugOutlined, CameraOutlined, CloseOutlined } from "@ant-design/icons";
|
|
||||||
import { bugFeedbackClient, type BugFeedbackItem } from "../api/bugFeedbackClient";
|
|
||||||
import { uploadAssetWithProgress } from "../api/uploadWithProgress";
|
|
||||||
import { toast } from "./toast/toastStore";
|
|
||||||
|
|
||||||
interface BugFeedbackModalProps {
|
|
||||||
open: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BugFeedbackModal({ open, onClose }: BugFeedbackModalProps) {
|
|
||||||
const [tab, setTab] = useState<"submit" | "history">("submit");
|
|
||||||
const [title, setTitle] = useState("");
|
|
||||||
const [description, setDescription] = useState("");
|
|
||||||
const [screenshotUrl, setScreenshotUrl] = useState<string | null>(null);
|
|
||||||
const [uploading, setUploading] = useState(false);
|
|
||||||
const [submitting, setSubmitting] = useState(false);
|
|
||||||
const [history, setHistory] = useState<BugFeedbackItem[]>([]);
|
|
||||||
const [historyLoading, setHistoryLoading] = useState(false);
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
const backdropRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (open && tab === "history") loadHistory();
|
|
||||||
}, [open, tab]);
|
|
||||||
|
|
||||||
const loadHistory = useCallback(async () => {
|
|
||||||
setHistoryLoading(true);
|
|
||||||
try {
|
|
||||||
const items = await bugFeedbackClient.listMine();
|
|
||||||
setHistory(items);
|
|
||||||
} catch { /* silent */ }
|
|
||||||
finally { setHistoryLoading(false); }
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleScreenshot = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = e.target.files?.[0];
|
|
||||||
if (!file) return;
|
|
||||||
setUploading(true);
|
|
||||||
try {
|
|
||||||
const reader = new FileReader();
|
|
||||||
const dataUrl = await new Promise<string>((resolve) => {
|
|
||||||
reader.onload = () => resolve(reader.result as string);
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
});
|
|
||||||
const result = await uploadAssetWithProgress({ dataUrl, name: file.name, scope: "bug-feedback" });
|
|
||||||
setScreenshotUrl(result.url);
|
|
||||||
} catch { toast.error("截图上传失败"); }
|
|
||||||
finally { setUploading(false); }
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleSubmit = useCallback(async () => {
|
|
||||||
if (!title.trim()) { toast.error("请输入标题"); return; }
|
|
||||||
if (!description.trim()) { toast.error("请输入问题描述"); return; }
|
|
||||||
setSubmitting(true);
|
|
||||||
try {
|
|
||||||
await bugFeedbackClient.submit({ title: title.trim(), description: description.trim(), screenshotUrl: screenshotUrl || undefined });
|
|
||||||
toast.success("反馈提交成功，审核通过后将奖励 1 积分");
|
|
||||||
setTitle("");
|
|
||||||
setDescription("");
|
|
||||||
setScreenshotUrl(null);
|
|
||||||
onClose();
|
|
||||||
} catch (err: unknown) {
|
|
||||||
toast.error(err instanceof Error ? err.message : "提交失败");
|
|
||||||
} finally { setSubmitting(false); }
|
|
||||||
}, [title, description, screenshotUrl, onClose]);
|
|
||||||
|
|
||||||
if (!open) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="bug-feedback-overlay" ref={backdropRef} onClick={(e) => { if (e.target === backdropRef.current) onClose(); }}>
|
|
||||||
<div className="bug-feedback-modal" role="dialog" aria-modal="true" aria-label="Bug反馈">
|
|
||||||
<div className="bug-feedback-modal__header">
|
|
||||||
<div className="bug-feedback-modal__tabs">
|
|
||||||
<button type="button" className={tab === "submit" ? "is-active" : ""} onClick={() => setTab("submit")}>提交反馈</button>
|
|
||||||
<button type="button" className={tab === "history" ? "is-active" : ""} onClick={() => setTab("history")}>我的反馈</button>
|
|
||||||
</div>
|
|
||||||
<button type="button" className="bug-feedback-modal__close" onClick={onClose} aria-label="关闭"><CloseOutlined /></button>
|
|
||||||
</div>
|
|
||||||
{tab === "submit" && (
|
|
||||||
<div className="bug-feedback-modal__form">
|
|
||||||
<p className="bug-feedback-modal__tip"><BugOutlined /> 提交有效 Bug 反馈，审核通过奖励 1 积分</p>
|
|
||||||
<label className="bug-feedback-modal__label">标题</label>
|
|
||||||
<input className="bug-feedback-modal__input" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="简述遇到的问题" maxLength={200} />
|
|
||||||
<label className="bug-feedback-modal__label">问题描述</label>
|
|
||||||
<textarea className="bug-feedback-modal__textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="详细描述操作步骤、预期结果和实际结果" maxLength={5000} rows={5} />
|
|
||||||
<label className="bug-feedback-modal__label">截图（可选）</label>
|
|
||||||
<div className="bug-feedback-modal__screenshot">
|
|
||||||
{screenshotUrl ? (
|
|
||||||
<div className="bug-feedback-modal__preview">
|
|
||||||
<img src={screenshotUrl} alt="截图预览" />
|
|
||||||
<button type="button" onClick={() => setScreenshotUrl(null)}>移除</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<button type="button" className="bug-feedback-modal__upload-btn" onClick={() => fileInputRef.current?.click()} disabled={uploading}>
|
|
||||||
<CameraOutlined /> {uploading ? "上传中..." : "添加截图"}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<input ref={fileInputRef} type="file" accept="image/*" hidden onChange={handleScreenshot} />
|
|
||||||
</div>
|
|
||||||
<button type="button" className="bug-feedback-modal__submit" disabled={submitting} onClick={handleSubmit}>
|
|
||||||
{submitting ? "提交中..." : "提交反馈"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{tab === "history" && (
|
|
||||||
<div className="bug-feedback-modal__history">
|
|
||||||
{historyLoading ? <p className="bug-feedback-modal__empty">加载中...</p> : history.length === 0 ? <p className="bug-feedback-modal__empty">暂无反馈记录</p> : (
|
|
||||||
<ul className="bug-feedback-modal__list">
|
|
||||||
{history.map((item) => (
|
|
||||||
<li key={item.id} className="bug-feedback-modal__item">
|
|
||||||
<div className="bug-feedback-modal__item-head">
|
|
||||||
<span className="bug-feedback-modal__item-title">{item.title}</span>
|
|
||||||
<span className={`bug-feedback-modal__status bug-feedback-modal__status--${item.status}`}>
|
|
||||||
{item.status === "pending" ? "审核中" : item.status === "approved" ? "已通过 +1积分" : "未通过"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="bug-feedback-modal__item-desc">{item.description}</p>
|
|
||||||
{item.adminNote && <p className="bug-feedback-modal__item-note">回复：{item.adminNote}</p>}
|
|
||||||
<span className="bug-feedback-modal__item-date">{new Date(item.createdAt).toLocaleDateString()}</span>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -2874,10 +2874,6 @@ function CanvasPage({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
closeNodeContextMenus();
|
|
||||||
setContextMenu(null);
|
|
||||||
setSelectionContextMenu(null);
|
|
||||||
|
|
||||||
const point = getCanvasPointFromClient(event.clientX, event.clientY);
|
const point = getCanvasPointFromClient(event.clientX, event.clientY);
|
||||||
const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
|
const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
|
||||||
setCanvasViewport((viewport) => {
|
setCanvasViewport((viewport) => {
|
||||||
|
|||||||
@@ -3102,6 +3102,11 @@ function WorkbenchPage({
|
|||||||
<span>{message.taskStatusLabel || generationStatus}</span>
|
<span>{message.taskStatusLabel || generationStatus}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{message.role === "assistant" && message.mode === "chat" && message.status === "completed" && (
|
||||||
|
<div className="ai-chat-task-billing-note">
|
||||||
|
{formatTextTokenUsage(message.taskUsage)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{(message.resultUrl || (message.result && message.status !== "thinking")) && (
|
{(message.resultUrl || (message.result && message.status !== "thinking")) && (
|
||||||
<ResultCard
|
<ResultCard
|
||||||
message={message}
|
message={message}
|
||||||
|
|||||||
@@ -1,252 +0,0 @@
|
|||||||
.bug-feedback-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 1200;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: rgba(0, 0, 0, 0.55);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal {
|
|
||||||
width: min(560px, 92vw);
|
|
||||||
max-height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-radius: 16px;
|
|
||||||
background: var(--bg-panel);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
box-shadow: var(--shadow-heavy, 0 12px 40px rgba(0,0,0,0.4));
|
|
||||||
padding: 24px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__tabs {
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__tabs button {
|
|
||||||
padding: 6px 14px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
background: transparent;
|
|
||||||
color: var(--fg-muted);
|
|
||||||
font-size: 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__tabs button.is-active {
|
|
||||||
background: var(--accent);
|
|
||||||
color: #000;
|
|
||||||
border-color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__close {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
|
||||||
background: var(--bg-subtle);
|
|
||||||
color: var(--fg-muted);
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: background 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__close:hover {
|
|
||||||
background: var(--bg-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__tip {
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--accent);
|
|
||||||
margin: 0;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(var(--accent-rgb, 0 255 136), 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__label {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--fg-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__input,
|
|
||||||
.bug-feedback-modal__textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
background: var(--bg-subtle);
|
|
||||||
color: var(--fg-default);
|
|
||||||
font-size: 14px;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__textarea {
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__screenshot {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__upload-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 8px 14px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px dashed var(--border-subtle);
|
|
||||||
background: transparent;
|
|
||||||
color: var(--fg-muted);
|
|
||||||
font-size: 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__upload-btn:hover {
|
|
||||||
border-color: var(--accent);
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__preview {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__preview img {
|
|
||||||
width: 80px;
|
|
||||||
height: 60px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__preview button {
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
background: transparent;
|
|
||||||
color: var(--fg-muted);
|
|
||||||
font-size: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__submit {
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
|
||||||
background: var(--accent);
|
|
||||||
color: #000;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: opacity 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__submit:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__history {
|
|
||||||
min-height: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__empty {
|
|
||||||
text-align: center;
|
|
||||||
color: var(--fg-muted);
|
|
||||||
font-size: 13px;
|
|
||||||
padding: 32px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__list {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__item {
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: var(--bg-subtle);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__item-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__item-title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--fg-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__status {
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__status--pending {
|
|
||||||
background: rgba(255, 180, 0, 0.15);
|
|
||||||
color: #e6a700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__status--approved {
|
|
||||||
background: rgba(0, 200, 80, 0.15);
|
|
||||||
color: #00c850;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__status--rejected {
|
|
||||||
background: rgba(255, 60, 60, 0.15);
|
|
||||||
color: #ff4040;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__item-desc {
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--fg-muted);
|
|
||||||
margin: 0 0 4px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__item-note {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--accent);
|
|
||||||
margin: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bug-feedback-modal__item-date {
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--fg-muted);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
@@ -38,6 +38,5 @@
|
|||||||
@import "./components/empty-state.css";
|
@import "./components/empty-state.css";
|
||||||
@import "./components/page-transition.css";
|
@import "./components/page-transition.css";
|
||||||
@import "./components/motion.css";
|
@import "./components/motion.css";
|
||||||
@import "./components/bug-feedback-modal.css";
|
|
||||||
@import "./themes/dark-green.css";
|
@import "./themes/dark-green.css";
|
||||||
@import "./pages/local-theme-parity.css";
|
@import "./pages/local-theme-parity.css";
|
||||||
|
|||||||
@@ -1 +1,13 @@
|
|||||||
/* Agent page rules move here as they are retired from legacy-pages.css. */
|
/* Agent page rules move here as they are retired from legacy-pages.css. */
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.agent-page {
|
||||||
|
padding: 16px 16px 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.agent-page {
|
||||||
|
padding: 12px 10px 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -243,3 +243,24 @@
|
|||||||
max-height: calc(100vh - 190px);
|
max-height: calc(100vh - 190px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.asset-preview-modal {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-preview-modal__panel {
|
||||||
|
width: calc(100vw - 16px);
|
||||||
|
max-height: calc(100vh - 16px);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-preview-modal__body {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-preview-modal__body img,
|
||||||
|
.asset-preview-modal__body video {
|
||||||
|
max-height: calc(100vh - 160px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -4211,3 +4211,30 @@
|
|||||||
grid-template-columns: minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.avatar-console-page {
|
||||||
|
height: auto;
|
||||||
|
min-height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-console-main {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-console-scroll {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-console-toolbar {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-console-video-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -910,3 +910,94 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════════════════
|
||||||
|
Responsive: Canvas
|
||||||
|
Breakpoints: 900px / 560px
|
||||||
|
═══════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.studio-canvas-page {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-canvas-toolbar {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 12px;
|
||||||
|
gap: 6px;
|
||||||
|
overflow-x: auto;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border-weak);
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-canvas-toolbar__group {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-shrink: 0;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-canvas-toolbar button {
|
||||||
|
min-width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-canvas-main {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-canvas-node {
|
||||||
|
min-width: 140px;
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.studio-canvas-page {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-canvas-toolbar {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 6px 8px;
|
||||||
|
gap: 4px;
|
||||||
|
border-bottom: 1px solid var(--border-weak);
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-canvas-toolbar button {
|
||||||
|
min-width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
padding: 0 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-canvas-main {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-canvas-node {
|
||||||
|
min-width: 110px;
|
||||||
|
min-height: 48px;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-canvas-project-bar {
|
||||||
|
right: 8px;
|
||||||
|
left: 8px;
|
||||||
|
bottom: 80px;
|
||||||
|
gap: 4px;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-canvas-project-bar__name-form {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -117,3 +117,52 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════════════════
|
||||||
|
Responsive: Community
|
||||||
|
Breakpoints: 900px / 560px
|
||||||
|
═══════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.community-page {
|
||||||
|
padding: 12px 16px 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-carousel__slide--video {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-carousel__video {
|
||||||
|
max-height: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-case-card__preview {
|
||||||
|
min-height: 140px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.community-page {
|
||||||
|
padding: 10px 10px 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-carousel__slide--video {
|
||||||
|
min-height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-carousel__video {
|
||||||
|
max-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-case-card__preview {
|
||||||
|
min-height: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-case-empty {
|
||||||
|
padding: 32px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-case-empty__icon {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -8382,6 +8382,147 @@
|
|||||||
.clone-ai-adwizard__risk.is-low { color: #52c41a; }
|
.clone-ai-adwizard__risk.is-low { color: #52c41a; }
|
||||||
.clone-ai-adwizard__risk.is-medium { color: #faad14; }
|
.clone-ai-adwizard__risk.is-medium { color: #faad14; }
|
||||||
.clone-ai-adwizard__risk.is-high { color: #ff4d4f; }
|
.clone-ai-adwizard__risk.is-high { color: #ff4d4f; }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════════════════
|
||||||
|
Responsive: Ecommerce Tools
|
||||||
|
Breakpoints: 1180px / 900px / 560px
|
||||||
|
═══════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
/* ── 1180px: Narrower panels ── */
|
||||||
|
@media (max-width: 1180px) {
|
||||||
|
.product-clone-page[data-tool="clone"] > .product-clone-shell {
|
||||||
|
grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
.product-clone-page[data-tool="set"] > .product-clone-shell {
|
||||||
|
grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 900px: Tablet — stacked layout ── */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
/* All tools: collapse shell to single column */
|
||||||
|
.product-clone-page > .product-clone-shell,
|
||||||
|
.product-clone-page[data-tool="clone"] > .product-clone-shell,
|
||||||
|
.product-clone-page[data-tool="set"] > .product-clone-shell {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: auto minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rail becomes horizontal tab bar */
|
||||||
|
.product-clone-rail {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 4px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
padding: 8px 12px;
|
||||||
|
overflow-x: auto;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border-weak, #2a3032);
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-rail button {
|
||||||
|
flex-shrink: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Panel: full-width, reduced height */
|
||||||
|
.product-clone-panel {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 45vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-page[data-tool="clone"] .product-clone-panel {
|
||||||
|
--clone-settings-panel-width: 100%;
|
||||||
|
max-height: 45vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Preview: independent scroll area */
|
||||||
|
.product-clone-preview {
|
||||||
|
min-height: 40vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-page[data-tool="set"] .product-clone-preview {
|
||||||
|
padding: 20px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Collapse toggle tweak */
|
||||||
|
.product-clone-page[data-tool="clone"] .product-clone-panel {
|
||||||
|
transition: max-height 320ms ease, opacity 320ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-page.is-settings-collapsed .product-clone-panel {
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 560px: Phone — further compression ── */
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.product-clone-page {
|
||||||
|
grid-template-rows: 44px minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-rail {
|
||||||
|
padding: 6px 8px;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-rail button {
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-panel {
|
||||||
|
max-height: 38vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-page[data-tool="clone"] .product-clone-panel {
|
||||||
|
max-height: 38vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-page[data-tool="set"] .product-clone-panel__scroll {
|
||||||
|
padding: 20px 14px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) {
|
||||||
|
padding: 18px;
|
||||||
|
border-radius: 14px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-page[data-tool="set"] .product-set-upload {
|
||||||
|
min-height: 180px;
|
||||||
|
padding: 16px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-page[data-tool="set"] .product-set-upload-title {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-page[data-tool="set"] .product-set-upload strong {
|
||||||
|
height: 42px;
|
||||||
|
min-width: 140px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Preview full-width */
|
||||||
|
.product-clone-preview {
|
||||||
|
padding: 12px 10px !important;
|
||||||
|
min-height: 50vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
.clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
|
.clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
|
||||||
|
|
||||||
/* ===== Ecommerce Template Apple Carousel ===== */
|
/* ===== Ecommerce Template Apple Carousel ===== */
|
||||||
|
|||||||
@@ -1776,3 +1776,28 @@ textarea.image-workbench-prompt {
|
|||||||
.image-workbench-result-card:nth-child(2) { animation-delay: 0.08s; }
|
.image-workbench-result-card:nth-child(2) { animation-delay: 0.08s; }
|
||||||
.image-workbench-result-card:nth-child(3) { animation-delay: 0.16s; }
|
.image-workbench-result-card:nth-child(3) { animation-delay: 0.16s; }
|
||||||
.image-workbench-result-card:nth-child(4) { animation-delay: 0.24s; }
|
.image-workbench-result-card:nth-child(4) { animation-delay: 0.24s; }
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.image-workbench-page {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
.image-workbench-toolbar {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.image-workbench-page {
|
||||||
|
padding: 8px 8px 80px;
|
||||||
|
}
|
||||||
|
.image-workbench-toolbar {
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
.image-workbench-toolbar button {
|
||||||
|
min-width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1286,3 +1286,23 @@ textarea.image-workbench-prompt,
|
|||||||
justify-items: start;
|
justify-items: start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.token-usage-page {
|
||||||
|
padding: 0 8px 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-usage-page .script-token-page__scroll,
|
||||||
|
.script-token-page__scroll {
|
||||||
|
padding-inline: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-member-card {
|
||||||
|
padding: 14px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-member-card__head {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -313,3 +313,39 @@
|
|||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.more-page-v2 {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-page-v2__header {
|
||||||
|
padding: 10px 12px 8px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-page-v2__scroll {
|
||||||
|
padding: 12px 10px 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-page-v2__grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-page-v2__featured-grid {
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-card--featured {
|
||||||
|
padding: 14px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-card__featured-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -2,16 +2,32 @@
|
|||||||
|
|
||||||
/* ── 代表作滚动容器：固定3列，刚好显示9个（3行），超出可滚动，隐藏滚动条 ── */
|
/* ── 代表作滚动容器：固定3列，刚好显示9个（3行），超出可滚动，隐藏滚动条 ── */
|
||||||
.profile-page__works-scroll {
|
.profile-page__works-scroll {
|
||||||
max-height: 390px; /* 3行卡片：3 × 120(min-height) + 2 × 10(gap) = 380px，留10px余量 */
|
max-height: 390px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
scrollbar-width: none; /* Firefox */
|
scrollbar-width: none;
|
||||||
-ms-overflow-style: none; /* IE/Edge */
|
-ms-overflow-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-page__works-scroll::-webkit-scrollbar {
|
.profile-page__works-scroll::-webkit-scrollbar {
|
||||||
display: none; /* Chrome/Safari/Edge */
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-page__works-scroll .profile-page__list-grid {
|
.profile-page__works-scroll .profile-page__list-grid {
|
||||||
grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.profile-page,
|
||||||
|
.auth-page,
|
||||||
|
.settings-page {
|
||||||
|
padding: 16px 16px 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.profile-page,
|
||||||
|
.auth-page,
|
||||||
|
.settings-page {
|
||||||
|
padding: 12px 10px 80px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -164,3 +164,40 @@
|
|||||||
.provider-health-table tr:hover td {
|
.provider-health-table tr:hover td {
|
||||||
background: var(--surface-elevated);
|
background: var(--surface-elevated);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.provider-health-page__inner {
|
||||||
|
padding: 16px;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider-health-grid {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.provider-health-page__inner {
|
||||||
|
padding: 12px 12px 80px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider-health-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider-health-toolbar {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider-health-table {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider-health-table th,
|
||||||
|
.provider-health-table td {
|
||||||
|
padding: 6px 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -474,3 +474,24 @@
|
|||||||
width: min(100%, 430px);
|
width: min(100%, 430px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.size-template-page {
|
||||||
|
padding: 12px 10px 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-template-main-frame {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-template-spec-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-template-preview-note,
|
||||||
|
.size-template-detail-card {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -674,3 +674,19 @@
|
|||||||
max-height: 320px;
|
max-height: 320px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.studio-tool-layout {
|
||||||
|
grid-template-rows: 40px auto minmax(200px, 1fr) 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-tool-layout__toolstrip {
|
||||||
|
padding: 6px 8px;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio-panel {
|
||||||
|
max-height: 240px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -133,3 +133,15 @@
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.subtitle-removal-page {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.subtitle-removal-page {
|
||||||
|
padding: 8px 8px 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -440,3 +440,137 @@
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════════════════
|
||||||
|
Responsive: Workbench Launch & Active State
|
||||||
|
Breakpoints: 900px / 560px
|
||||||
|
═══════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
/* ── 900px: Tablet — launch state ── */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.wb-home {
|
||||||
|
padding: 36px 16px 80px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wb-home__title {
|
||||||
|
font-size: clamp(24px, 6vw, 36px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wb-home__composer {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wb-home__suggestions {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wb-showcase {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wb-showcase__grid {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active state: message thread */
|
||||||
|
.ai-workbench-content-scroll {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-chat-message-stack {
|
||||||
|
max-width: 86%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-chat-message-bubble {
|
||||||
|
padding: 10px 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Composer in active state */
|
||||||
|
.wb-composer {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 0 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 560px: Phone — full-width compact ── */
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.wb-home {
|
||||||
|
padding: 24px 10px 72px;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wb-home__title {
|
||||||
|
font-size: clamp(20px, 7vw, 28px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wb-home__glow {
|
||||||
|
width: 240px;
|
||||||
|
height: 120px;
|
||||||
|
top: -40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wb-showcase__grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wb-suggestion-chip {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 7px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active state: messages fill screen */
|
||||||
|
.ai-workbench-content-scroll {
|
||||||
|
padding: 12px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-workbench-thread-shell {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-chat-message-list {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-chat-message-stack {
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-chat-message-bubble {
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-chat-message-bubble--user {
|
||||||
|
border-radius: 12px 12px 4px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-chat-message-bubble--ai {
|
||||||
|
border-radius: 12px 12px 12px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-chat-avatar {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
flex: 0 0 26px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-chat-message-row {
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Composer at bottom */
|
||||||
|
.wb-composer {
|
||||||
|
padding: 6px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wb-chat-scroll-actions {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -896,6 +896,21 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1180px) {
|
||||||
|
.brand-lockup__tone {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.creator-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.member-button {
|
||||||
|
max-width: 148px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.web-shell {
|
.web-shell {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -962,6 +977,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── 640px: Narrower topbar adjustments ── */
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.brand-lockup__name {
|
.brand-lockup__name {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -981,3 +997,33 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── 560px: Phone-sized compact layout ── */
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.web-topbar {
|
||||||
|
flex: 0 0 44px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-lockup {
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-lockup__mark {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-lockup__name {
|
||||||
|
font-size: 13px;
|
||||||
|
max-width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-button,
|
||||||
|
.icon-button {
|
||||||
|
min-width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -84,3 +84,14 @@
|
|||||||
--danger: var(--error);
|
--danger: var(--error);
|
||||||
--shadow-soft: var(--shadow-panel);
|
--shadow-soft: var(--shadow-panel);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════════════════
|
||||||
|
Responsive Breakpoints (standardized)
|
||||||
|
Reference-only — CSS custom properties cannot be used
|
||||||
|
inside @media queries, but all pages should align to
|
||||||
|
these three breakpoints for consistency.
|
||||||
|
|
||||||
|
Phone : 560px (max-width — portrait / landscape)
|
||||||
|
Tablet : 900px (max-width — tablet / small desktop)
|
||||||
|
Desktop: 1180px (max-width — large desktop)
|
||||||
|
═══════════════════════════════════════════════════════ */
|
||||||
|
|||||||
Reference in New Issue
Block a user