cc/PersonalWebApplication
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(photo-wall): larger adjust steps + rotation/scale presets in context menu

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
cc 2026-06-24 21:29:14 +08:00
parent dba517df4e
commit d038372336
2 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
Client/src/components/PhotoWallPage.tsx
View File

@ -536,6 +536,10 @@ export function PhotoWallPage({ onExit, token }: PhotoWallPageProps) {
}) })
const recolorNote = (id: number, color: string) => const recolorNote = (id: number, color: string) =>
mutate((p) => p.map((e) => (e.id === id ? { ...e, color } : e))) mutate((p) => p.map((e) => (e.id === id ? { ...e, color } : e)))
const setRotation = (id: number, deg: number) =>
mutate((p) => p.map((e) => (e.id === id ? { ...e, rot: deg } : e)))
const setScale = (id: number, s: number) =>
mutate((p) => p.map((e) => (e.id === id ? { ...e, scale: s } : e)))
const removeEl = (id: number) => { const removeEl = (id: number) => {
const target = elsRef.current.find((e) => e.id === id) const target = elsRef.current.find((e) => e.id === id)
if (target?.type === 'photo' && target.photoId) { if (target?.type === 'photo' && target.photoId) {
@ -917,17 +921,17 @@ export function PhotoWallPage({ onExit, token }: PhotoWallPageProps) {
<div ref={menuRef} className="pw-menu pw-pop" style={{ left: menu.x, top: menu.y, minWidth: 170 }}> <div ref={menuRef} className="pw-menu pw-pop" style={{ left: menu.x, top: menu.y, minWidth: 170 }}>
{menuEl.type !== 'doodle' && ( {menuEl.type !== 'doodle' && (
<> <>
<div className="pw-item" onClick={() => { rotate(menu.id, 5); setMenu(null) }}>旋转 +5°</div> <div className="pw-item" onClick={() => { rotate(menu.id, 15); setMenu(null) }}>旋转 +15°</div>
<div className="pw-item" onClick={() => { rotate(menu.id, -5); setMenu(null) }}>旋转 -5°</div> <div className="pw-item" onClick={() => { rotate(menu.id, -15); setMenu(null) }}>旋转 -15°</div>
{menuEl.type === 'photo' ? ( {menuEl.type === 'photo' ? (
<> <>
<div className="pw-item" onClick={() => { resizePhoto(menu.id, 10); setMenu(null) }}>放大</div> <div className="pw-item" onClick={() => { resizePhoto(menu.id, 30); setMenu(null) }}>放大</div>
<div className="pw-item" onClick={() => { resizePhoto(menu.id, -10); setMenu(null) }}>缩小</div> <div className="pw-item" onClick={() => { resizePhoto(menu.id, -30); setMenu(null) }}>缩小</div>
</> </>
) : ( ) : (
<> <>
<div className="pw-item" onClick={() => { scaleEl(menu.id, 0.12); setMenu(null) }}>放大</div> <div className="pw-item" onClick={() => { scaleEl(menu.id, 0.25); setMenu(null) }}>放大</div>
<div className="pw-item" onClick={() => { scaleEl(menu.id, -0.12); setMenu(null) }}>缩小</div> <div className="pw-item" onClick={() => { scaleEl(menu.id, -0.25); setMenu(null) }}>缩小</div>
</> </>
)} )}
<div className="pw-sep" /> <div className="pw-sep" />
@ -951,6 +955,19 @@ export function PhotoWallPage({ onExit, token }: PhotoWallPageProps) {
</> </>
)} )}
<div className="pw-sep" /> <div className="pw-sep" />
<div className="pw-preset">
<span className="pw-preset-label">旋转</span>
{[0, 15, 30, 45, 90].map((d) => (
<button key={d} className="pw-chip" onClick={() => { setRotation(menu.id, d); setMenu(null) }}>{d}°</button>
))}
</div>
<div className="pw-preset">
<span className="pw-preset-label">比例</span>
{[0.5, 0.75, 1, 1.5, 2].map((s) => (
<button key={s} className="pw-chip" onClick={() => { setScale(menu.id, s); setMenu(null) }}>{s}×</button>
))}
</div>
<div className="pw-sep" />
<div className="pw-item pw-danger" onClick={() => removeEl(menu.id)}> <div className="pw-item pw-danger" onClick={() => removeEl(menu.id)}>
<span>删除</span> <span>删除</span>
<span className="pw-kbd">Del</span> <span className="pw-kbd">Del</span>

7
Client/src/index.css
View File

@ -355,6 +355,13 @@ textarea,
font-size: 13px; font-size: 13px;
} }
.pw-colorrow { display: flex; gap: 6px; padding: 6px 8px; } .pw-colorrow { display: flex; gap: 6px; padding: 6px 8px; }
.pw-preset { display: flex; align-items: center; gap: 5px; padding: 5px 8px; flex-wrap: wrap; }
.pw-preset-label { font-size: 12px; color: #888; width: 28px; }
.pw-chip {
border: 1px solid #e0e0e0; background: #fff; border-radius: 12px;
padding: 3px 9px; font-size: 12px; cursor: pointer; color: #444;
}
.pw-chip:hover { background: #f5f5f5; }
.pw-sw { .pw-sw {
width: 20px; width: 20px;
height: 20px; height: 20px;