Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ludan
|
bbc705c8d9 | ||
 stringadmin
|
796162de4d | ||
|
stringadmin
|
aebe0ff827 | ||
|
stringadmin
|
c113d82844 | ||
|
stringadmin
|
2129b29dfe | ||
|
stringadmin
|
d36d46836f | ||
|
ludan
|
b17a978e9e | ||
|
ludan
|
6d68ab02bb | ||
|
ludan
|
2b65206b84 |
@@ -75,7 +75,7 @@ function AppShell({
|
||||
const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
|
||||
const isAuthView = activeView === "login";
|
||||
const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
|
||||
const showFloatingNav = (!isAuthView || !!session) && !isImmersiveView && activeView !== "home";
|
||||
const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
|
||||
const toolSurfaceViews = [
|
||||
"workbench",
|
||||
"canvas",
|
||||
|
||||
@@ -260,6 +260,30 @@ function ProfilePage({
|
||||
const packageLabel = session?.user.activePackages?.[0]?.name || "按量积分";
|
||||
const avatarUrl = session?.user.avatarUrl || localAvatarUrl || null;
|
||||
const displayedBio = profileBio.trim() || "这个人还没有填写个性签名";
|
||||
const activePanelTitle =
|
||||
activePanel === "works"
|
||||
? "代表作"
|
||||
: activePanel === "projects"
|
||||
? "服务器项目"
|
||||
: activePanel === "assets"
|
||||
? "我的资产"
|
||||
: "社区审核";
|
||||
const activePanelDescription =
|
||||
activePanel === "works"
|
||||
? "最近完成的高质量生成内容"
|
||||
: activePanel === "projects"
|
||||
? "云端同步的创作项目"
|
||||
: activePanel === "assets"
|
||||
? "可复用的图片、视频与素材"
|
||||
: "已提交社区的案例状态";
|
||||
const activePanelCount =
|
||||
activePanel === "works"
|
||||
? visibleWorks.length
|
||||
: activePanel === "projects"
|
||||
? projects.length
|
||||
: activePanel === "assets"
|
||||
? savedAssets.length
|
||||
: communityCases.length;
|
||||
const emailLooksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
|
||||
const phoneLooksValid = /^1[3-9]\d{9}$/.test(phone.trim());
|
||||
const passwordLooksReady = password.length >= (mode === "register" ? 6 : 1);
|
||||
@@ -765,9 +789,9 @@ function ProfilePage({
|
||||
className={`profile-page__banner${bannerUrl ? " has-image" : ""}`}
|
||||
style={bannerUrl ? { backgroundImage: `url(${bannerUrl})` } : undefined}
|
||||
>
|
||||
<button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()}>
|
||||
<button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()} aria-label="更换背景">
|
||||
<CameraOutlined />
|
||||
更换背景
|
||||
<span className="profile-page__banner-btn-label">更换背景</span>
|
||||
</button>
|
||||
<div className="profile-page__banner-overlay" />
|
||||
</header>
|
||||
@@ -847,14 +871,16 @@ function ProfilePage({
|
||||
className={accountPanel === "credits" ? "is-active" : ""}
|
||||
onClick={() => setAccountPanel("credits")}
|
||||
>
|
||||
积分 {(totalBalance / 100).toFixed(2)}
|
||||
<span>可用积分</span>
|
||||
<strong>{(totalBalance / 100).toFixed(2)}</strong>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={accountPanel === "tasks" ? "is-active" : ""}
|
||||
onClick={() => setAccountPanel("tasks")}
|
||||
>
|
||||
任务 {tasks.length}
|
||||
<span>生成任务</span>
|
||||
<strong>{tasks.length}</strong>
|
||||
</button>
|
||||
</div>
|
||||
<div className="profile-page__account-summary">
|
||||
@@ -863,6 +889,7 @@ function ProfilePage({
|
||||
<span className="profile-page__account-summary-main">
|
||||
<small>当前账号</small>
|
||||
<strong>{displayName}</strong>
|
||||
<em>{packageLabel}</em>
|
||||
</span>
|
||||
<span className="profile-page__account-summary-metric">
|
||||
<small>积分剩余</small>
|
||||
@@ -874,6 +901,7 @@ function ProfilePage({
|
||||
<span className="profile-page__account-summary-main">
|
||||
<small>任务概览</small>
|
||||
<strong>{tasks.length} 个任务</strong>
|
||||
<em>{completedTasks.length} 个已完成</em>
|
||||
</span>
|
||||
<span className="profile-page__account-summary-metric">
|
||||
<small>已完成</small>
|
||||
@@ -884,51 +912,49 @@ function ProfilePage({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
|
||||
<ShareAltOutlined />
|
||||
{packageLabel}
|
||||
</button>
|
||||
<div className="profile-page__actions">
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
|
||||
<ShareAltOutlined />
|
||||
{packageLabel}
|
||||
</button>
|
||||
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
|
||||
<PlusOutlined />
|
||||
进入工作台
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
|
||||
<ShareAltOutlined />
|
||||
打开社区
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
|
||||
<LockOutlined />
|
||||
退出登录
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
|
||||
<PlusOutlined />
|
||||
进入工作台
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
|
||||
<ShareAltOutlined />
|
||||
打开社区
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
|
||||
<LockOutlined />
|
||||
退出登录
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="profile-page__main">
|
||||
<div className="profile-page__main-tabs">
|
||||
<button type="button" className={activePanel === "works" ? "is-active" : ""} onClick={() => setActivePanel("works")}>
|
||||
我的作品
|
||||
<span>我的作品</span>
|
||||
</button>
|
||||
<button type="button" className={activePanel === "projects" ? "is-active" : ""} onClick={() => setActivePanel("projects")}>
|
||||
我的项目
|
||||
<span>我的项目</span>
|
||||
</button>
|
||||
<button type="button" className={activePanel === "assets" ? "is-active" : ""} onClick={() => setActivePanel("assets")}>
|
||||
我的资产
|
||||
<span>我的资产</span>
|
||||
</button>
|
||||
<button type="button" className={activePanel === "community" ? "is-active" : ""} onClick={() => setActivePanel("community")}>
|
||||
社区发布
|
||||
<span>社区发布</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="profile-page__section">
|
||||
<span className="profile-page__section-label">
|
||||
{activePanel === "works"
|
||||
? "代表作"
|
||||
: activePanel === "projects"
|
||||
? "服务器项目"
|
||||
: activePanel === "assets"
|
||||
? "我的资产"
|
||||
: "社区审核"}
|
||||
</span>
|
||||
<div className="profile-page__section-head">
|
||||
<span className="profile-page__section-label">{activePanelTitle}</span>
|
||||
<span className="profile-page__section-desc">{activePanelDescription}</span>
|
||||
<span className="profile-page__section-meta">{activePanelCount} 项</span>
|
||||
</div>
|
||||
{renderActivePanel()}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,13 +1 @@
|
||||
/* 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,24 +243,3 @@
|
||||
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,30 +4211,3 @@
|
||||
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,94 +910,3 @@
|
||||
height: 100%;
|
||||
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,52 +117,3 @@
|
||||
font-weight: 600;
|
||||
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,147 +8382,6 @@
|
||||
.clone-ai-adwizard__risk.is-low { color: #52c41a; }
|
||||
.clone-ai-adwizard__risk.is-medium { color: #faad14; }
|
||||
.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; }
|
||||
|
||||
/* ===== Ecommerce Template Apple Carousel ===== */
|
||||
|
||||
@@ -1776,28 +1776,3 @@ textarea.image-workbench-prompt {
|
||||
.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(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,23 +1286,3 @@ textarea.image-workbench-prompt,
|
||||
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,39 +313,3 @@
|
||||
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,32 +2,23 @@
|
||||
|
||||
/* ── 代表作滚动容器：固定3列，刚好显示9个（3行），超出可滚动，隐藏滚动条 ── */
|
||||
.profile-page__works-scroll {
|
||||
max-height: 390px;
|
||||
max-height: 390px; /* 3行卡片：3 × 120(min-height) + 2 × 10(gap) = 380px，留10px余量 */
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
}
|
||||
|
||||
.profile-page__works-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
display: none; /* Chrome/Safari/Edge */
|
||||
}
|
||||
|
||||
.profile-page__works-scroll .profile-page__list-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
/* Dashboard uses natural page scrolling instead of a nested works scroller. */
|
||||
.profile-page--dashboard .profile-page__works-scroll {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
@@ -163,41 +163,4 @@
|
||||
|
||||
.provider-health-table tr:hover td {
|
||||
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,24 +474,3 @@
|
||||
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,19 +674,3 @@
|
||||
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,15 +133,3 @@
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.subtitle-removal-page {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.subtitle-removal-page {
|
||||
padding: 8px 8px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -440,137 +440,3 @@
|
||||
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,21 +896,6 @@
|
||||
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) {
|
||||
.web-shell {
|
||||
overflow: hidden;
|
||||
@@ -977,7 +962,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 640px: Narrower topbar adjustments ── */
|
||||
@media (max-width: 640px) {
|
||||
.brand-lockup__name {
|
||||
font-size: 14px;
|
||||
@@ -997,33 +981,3 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -84,14 +84,3 @@
|
||||
--danger: var(--error);
|
||||
--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