feat(UI): 增加保存状态提示和全局快捷键支持
- 添加保存状态指示器组件,可通过父窗口调用显示 - 实现 Ctrl+S/⌘+S 全局快捷键触发保存功能 - 调整菜单项字体大小至16px
This commit is contained in:
parent
da37a780c7
commit
e64b49f03d
41
src/main.ts
41
src/main.ts
|
|
@ -192,6 +192,47 @@ window.onload = function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 全局快捷键:Ctrl+S / ⌘+S 触发保存
|
||||||
|
window.addEventListener('keydown', function (e) {
|
||||||
|
const isSaveKey = (e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S')
|
||||||
|
if (!isSaveKey) return
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
const params = new URLSearchParams(window.location.search)
|
||||||
|
const isEditMode = params.get('mode') === 'edit' || params.get('model') === 'edit'
|
||||||
|
if (!isEditMode) {
|
||||||
|
console.warn('当前为只读模式,Ctrl+S 不可用')
|
||||||
|
alert('当前为只读模式,不能保存')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 触发保存按钮的同一逻辑
|
||||||
|
saveCallbackDom.click()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 向父窗口暴露:显示保存状态(文本、颜色、延时可选)
|
||||||
|
;(window as any).showSaveStatus = (text: string, color?: string, delay?: number) => {
|
||||||
|
try {
|
||||||
|
const indicator = document.getElementById('save-status-indicator') as HTMLDivElement | null
|
||||||
|
if (!indicator) return
|
||||||
|
const duration = typeof delay === 'number' ? delay : 2000
|
||||||
|
indicator.textContent = text || '已保存'
|
||||||
|
indicator.style.background = color || '#4caf50'
|
||||||
|
indicator.style.display = 'block'
|
||||||
|
// 清理之前的隐藏计时器
|
||||||
|
const key = '__save_status_timer__'
|
||||||
|
const prev = (window as any)[key]
|
||||||
|
if (prev) {
|
||||||
|
window.clearTimeout(prev)
|
||||||
|
}
|
||||||
|
;(window as any)[key] = window.setTimeout(() => {
|
||||||
|
indicator.style.display = 'none'
|
||||||
|
}, duration)
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('显示保存状态失败:', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const undoDom = document.querySelector<HTMLDivElement>('.menu-item__undo')!
|
const undoDom = document.querySelector<HTMLDivElement>('.menu-item__undo')!
|
||||||
undoDom.title = `撤销(${isApple ? '⌘' : 'Ctrl'}+Z)`
|
undoDom.title = `撤销(${isApple ? '⌘' : 'Ctrl'}+Z)`
|
||||||
undoDom.onclick = function () {
|
undoDom.onclick = function () {
|
||||||
|
|
|
||||||
|
|
@ -218,7 +218,8 @@ ul {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: #0969da; /* link blue */
|
color: #0969da; /* link blue */
|
||||||
font-size: 12px;
|
font-size: 16px;
|
||||||
|
/* font-weight: bold; */
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
16
vocd.html
16
vocd.html
|
|
@ -346,6 +346,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="menu-item__save" title="保存">
|
<div class="menu-item__save" title="保存">
|
||||||
<span>保存</span>
|
<span>保存</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -427,6 +428,21 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 保存状态指示器:默认隐藏,父窗口可调用子窗口函数显示 -->
|
||||||
|
<div id="save-status-indicator" style="
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
top: 24px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: none;
|
||||||
|
background: #4caf50;
|
||||||
|
color: #fff;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 9999;
|
||||||
|
">已保存</div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user