azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化图片创作

Browse Source
This commit is contained in:
Azmat@qq.com
2026-09-15 11:54:00 +08:00
parent f15fe21b1a
commit 99a126d19b
11 changed files with 206 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/_verify-1100.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 535 KiB

core/frontend/_verify-420.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

core/frontend/_verify-700.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 256 KiB

core/frontend/public/assets/image-presets/chinese-ink-wash.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

core/frontend/public/assets/image-presets/japanese-hand-drawn-anime.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

core/frontend/public/assets/image-presets/neo-chinese.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

core/frontend/src/login-page.css
+170 -37
View File
@@ -156,9 +156,11 @@
.login-page .login-form-panel {
position: relative;
z-index: auto;
overflow: hidden;
overflow: auto;
display: grid;
place-items: center;
align-content: safe center;
justify-items: center;
gap: 16px;
padding: clamp(48px, 6vw, 106px);
background: transparent;
}
@@ -203,7 +205,8 @@
position: relative;
z-index: 2;
width: min(100%, 520px);
height: 548px;
height: auto;
min-height: 0;
padding: 44px 46px 38px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.28);
@@ -452,11 +455,12 @@
.login-page .login-submit {
height: 54px;
min-width: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 2px;
border: 0;
border-radius: 11px;
color: #fff;
@@ -478,51 +482,130 @@
filter: saturate(0.85);
}
.login-page .login-submit:disabled svg { animation: login-spin 800ms linear infinite; }
.login-page .login-submit svg { width: 17px; height: 17px; }
.login-page .login-submit svg { width: 17px; height: 17px; flex: 0 0 auto; }
.login-page .login-extras {
position: absolute;
z-index: 2;
left: 50%;
bottom: 28px;
width: min(calc(100% - 48px), 520px);
display: grid;
gap: 10px;
color: rgba(255, 255, 255, 0.48);
font-size: 12px;
transform: translateX(-50%);
}
.login-page .login-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
color: rgba(255, 255, 255, 0.48);
font-size: 12px;
}
.login-page .login-row label {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
cursor: pointer;
}
.login-page .login-row input[type="checkbox"] {
width: 14px;
height: 14px;
flex: 0 0 auto;
accent-color: #7da1ff;
}
.login-page .login-row a,
.login-page .login-switch a {
color: rgba(183, 204, 255, 0.88);
text-decoration: none;
white-space: nowrap;
}
.login-page .login-row a:hover,
.login-page .login-switch a:hover { text-decoration: underline; }
/* 三入口操作条:同宽收进卡片,小屏改纵向避免撑破 */
.login-page .login-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
align-items: stretch;
gap: 0;
min-width: 0;
width: 100%;
max-width: 100%;
overflow: hidden;
border-radius: 11px;
background: linear-gradient(135deg, #002d9f, #001d70 76%);
box-shadow: 0 14px 30px rgba(0, 25, 102, 0.32);
}
.login-page .login-actions .login-submit {
margin-top: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.login-page .login-actions .login-submit:hover:not(:disabled) {
transform: none;
filter: brightness(1.08);
box-shadow: none;
}
.login-page .login-action-alt {
min-width: 0;
height: 54px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 0;
border-radius: 0;
color: rgba(255, 255, 255, 0.88);
background: transparent;
font: inherit;
font-size: 12px;
line-height: 1.2;
cursor: pointer;
}
.login-page .login-action-alt + .login-submit,
.login-page .login-submit + .login-action-alt {
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.16);
}
.login-page .login-action-alt span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.login-page .login-action-alt:hover { background: rgba(255, 255, 255, 0.08); }
.login-page .login-action-alt svg { width: 14px; height: 14px; flex: 0 0 auto; }
.login-page .login-switch {
margin: 18px 0 0;
text-align: center;
color: rgba(255, 255, 255, 0.48);
font-size: 12px;
}
.login-page .login-card-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 14px;
color: rgba(255, 255, 255, 0.54);
font-size: 10px;
}
.login-page .login-card-footer svg { width: 13px; height: 13px; }
/* 注册页仍可能引用旧 extras 容器,保留文档流兜底 */
.login-page .login-extras {
position: static;
z-index: 2;
width: min(100%, 520px);
display: grid;
gap: 10px;
color: rgba(255, 255, 255, 0.48);
font-size: 12px;
transform: none;
}
.login-page .login-sso {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
min-width: 0;
}
.login-page .login-sso button {
min-width: 0;
height: 36px;
display: inline-flex;
align-items: center;
@@ -537,24 +620,7 @@
cursor: pointer;
}
.login-page .login-sso button:hover { background: rgba(255, 255, 255, 0.08); }
.login-page .login-sso svg { width: 14px; height: 14px; }
.login-page .login-switch {
text-align: center;
color: rgba(255, 255, 255, 0.48);
font-size: 12px;
}
.login-page .login-card-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 26px;
color: rgba(255, 255, 255, 0.54);
font-size: 10px;
}
.login-page .login-card-footer svg { width: 13px; height: 13px; }
.login-page .login-sso svg { width: 14px; height: 14px; flex: 0 0 auto; }
.login-page .login-note {
margin: 0;
@@ -649,6 +715,9 @@
}
.login-page .login-visual { display: none; }
.login-page .login-form-panel {
align-content: start;
justify-items: center;
gap: 16px;
overflow: auto;
padding: 32px 20px 28px;
}
@@ -674,6 +743,70 @@
position: static;
width: min(100%, 480px);
transform: none;
margin-top: 16px;
margin-top: 0;
}
.login-page .login-card-heading { margin-bottom: 28px; }
.login-page .login-form { gap: 14px; }
}
/* 窄屏:主登录在上,两侧入口两列在下 */
@media (max-width: 560px) {
.login-page .login-form-panel {
padding: 24px 14px 20px;
}
.login-page .login-card {
width: min(100%, 480px);
padding: 28px 16px 22px;
}
.login-page .login-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
background: transparent;
box-shadow: none;
overflow: visible;
}
.login-page .login-actions .login-submit {
grid-column: 1 / -1;
order: -1;
border-radius: 11px;
background: linear-gradient(135deg, #002d9f, #001d70 76%);
box-shadow: 0 14px 30px rgba(0, 25, 102, 0.32);
}
.login-page .login-actions .login-submit:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(0, 23, 94, 0.4);
filter: brightness(1.06);
}
.login-page .login-action-alt,
.login-page .login-action-alt + .login-submit,
.login-page .login-submit + .login-action-alt {
box-shadow: none;
}
.login-page .login-action-alt {
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
background: rgba(255, 255, 255, 0.045);
}
.login-page .login-row {
flex-wrap: wrap;
gap: 8px 12px;
}
}
/* 矮屏:顶部对齐可滚动,避免辅助入口与主按钮重叠 */
@media (max-height: 800px) {
.login-page .login-form-panel {
align-content: start;
gap: 16px;
overflow-y: auto;
padding-top: 28px;
padding-bottom: 24px;
}
.login-page .login-card {
height: auto;
min-height: 0;
}
.login-page .login-card-heading { margin-bottom: 24px; }
.login-page .login-form { gap: 14px; }
}
core/frontend/src/routes/auth-screen.tsx
+20 -22
View File
@@ -552,32 +552,30 @@ export function AuthScreen({
<p className={`login-error${error ? " show" : ""}`} role="alert">
{error || "账号或密码不正确，请重新输入。"}
</p>
<button className="login-submit" type="submit" disabled={busy}>
{busy ? (LOGIN_PROGRESS_COPY[loginProgress || "checking"] || "正在进入工作台") : "确认登录"}
{busy ? <LoaderCircle /> : <ArrowRight />}
</button>
<div className="login-row">
<label>
<input type="checkbox" checked={remember} onChange={(event) => setRemember(event.target.checked)} />
记住我 7 天
</label>
<a href="#" onClick={(event) => { event.preventDefault(); showToast("重置密码", "请联系团队超管重置你的登录密码"); }}>忘记密码?</a>
</div>
<div className="login-actions">
<button type="button" className="login-action-alt" onClick={() => showToast("微信扫码", "对接中 · 当前请用账号 + 密码登录")}>
<ScanLine /> <span>微信扫码</span>
</button>
<button className="login-submit" type="submit" disabled={busy}>
{busy ? (LOGIN_PROGRESS_COPY[loginProgress || "checking"] || "正在进入工作台") : "确认登录"}
{busy ? <LoaderCircle /> : <ArrowRight />}
</button>
<button type="button" className="login-action-alt" onClick={() => showToast("飞书 SSO", "对接中 · 当前请用账号 + 密码登录")}>
<ShieldCheck /> <span>飞书 SSO</span>
</button>
</div>
</form>
<p className="login-card-footer"><Lock />登录信息仅用于当前演示会话</p>
</div>
<div className="login-extras">
<div className="login-row">
<label>
<input type="checkbox" checked={remember} onChange={(event) => setRemember(event.target.checked)} />
记住我 7 天
</label>
<a href="#" onClick={(event) => { event.preventDefault(); showToast("重置密码", "请联系团队超管重置你的登录密码"); }}>忘记密码?</a>
</div>
<div className="login-sso">
<button type="button" onClick={() => showToast("微信扫码", "对接中 · 当前请用账号 + 密码登录")}>
<ScanLine /> 微信扫码
</button>
<button type="button" onClick={() => showToast("飞书 SSO", "对接中 · 当前请用账号 + 密码登录")}>
<ShieldCheck /> 飞书 SSO
</button>
</div>
<p className="login-switch">
还没账号? <a href="/register" onClick={(event) => { event.preventDefault(); switchMode("register"); }}>注册团队 →</a>
</p>
<p className="login-card-footer"><Lock />登录信息仅用于当前演示会话</p>
</div>
</main>
{toastNode}
core/frontend/src/routes/omni-create.tsx
+3
View File
@@ -59,6 +59,9 @@ const IMAGE_PRESETS: PresetItem[] = [
{ name: "黑金高级", category: "style", mode: "image", title: "黑金高级", cover: "/assets/image-presets/black-gold.png" },
{ name: "冷峻科技", category: "style", mode: "image", title: "冷峻科技", cover: "/assets/image-presets/tech-cool.png" },
{ name: "赛博朋克", category: "style", mode: "image", title: "赛博朋克", cover: "/assets/image-presets/cyberpunk.png" },
{ name: "日系手绘动画", category: "style", mode: "image", title: "日系手绘动画", cover: "/assets/image-presets/japanese-hand-drawn-anime.png" },
{ name: "国风水墨", category: "style", mode: "image", title: "国风水墨", cover: "/assets/image-presets/chinese-ink-wash.png" },
{ name: "新中式", category: "style", mode: "image", title: "新中式", cover: "/assets/image-presets/neo-chinese.png" },
];
const VIDEO_FILTERS = [