style: 新增窗口圆角变量并调整布局样式,修复阅读模式窗口阴影问题
1. 全局样式新增--radius-window圆角变量 2. 主布局和阅读页面添加对应圆角样式并隐藏溢出内容 3. 进入和退出阅读模式时恢复窗口阴影配置 4. 为阅读段落添加首行全角空格缩进
This commit is contained in:
parent
eb65b0d63d
commit
ee4d7df7d0
|
|
@ -25,6 +25,7 @@
|
|||
/* 圆角 */
|
||||
--radius-card: 16px;
|
||||
--radius-sm: 10px;
|
||||
--radius-window: 12px;
|
||||
|
||||
/* 尺寸 */
|
||||
--titlebar-height: 38px;
|
||||
|
|
|
|||
|
|
@ -15,8 +15,18 @@
|
|||
<script setup lang="ts">
|
||||
import WindowsTitleBar from "@/layout/components/WindowsTitleBar.vue"
|
||||
import MacTitleBar from "@/layout/components/MacTitleBar.vue"
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window"
|
||||
import { useSettingStore } from "@/stores/setting"
|
||||
|
||||
const isMacos = navigator.userAgent.includes("Mac OS X")
|
||||
|
||||
const appWindow = getCurrentWindow()
|
||||
const settingStore = useSettingStore()
|
||||
|
||||
onMounted(() => {
|
||||
// 从阅读模式返回时,恢复主窗口的阴影设置(避免停留在阅读器的阴影状态)
|
||||
appWindow.setShadow(settingStore.appearance.showShadow)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -25,6 +35,8 @@ const isMacos = navigator.userAgent.includes("Mac OS X")
|
|||
height: 100vh;
|
||||
background: var(--color-window-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: var(--radius-window);
|
||||
overflow: hidden;
|
||||
// border: 1px solid var(--color-border);
|
||||
|
||||
:deep(.n-layout) {
|
||||
|
|
|
|||
|
|
@ -100,8 +100,10 @@ const paginate = () => {
|
|||
logicalLines.push("")
|
||||
continue
|
||||
}
|
||||
for (let i = 0; i < para.length; i += charsPerLine) {
|
||||
logicalLines.push(para.slice(i, i + charsPerLine))
|
||||
// 段落首行缩进两格(使用全角空格)
|
||||
const indented = " " + para
|
||||
for (let i = 0; i < indented.length; i += charsPerLine) {
|
||||
logicalLines.push(indented.slice(i, i + charsPerLine))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -201,6 +203,8 @@ onMounted(() => {
|
|||
onUnmounted(() => {
|
||||
window.removeEventListener("keydown", onKeydown)
|
||||
window.removeEventListener("resize", onResize)
|
||||
// 离开阅读模式时,恢复主窗口的阴影设置
|
||||
appWindow.setShadow(settingStore.appearance.showShadow)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -211,6 +215,7 @@ onUnmounted(() => {
|
|||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: var(--reader-background-color);
|
||||
border-radius: var(--radius-window);
|
||||
/* border: 1px solid rgba(255, 255, 255, 0.2); */
|
||||
padding: 10px;
|
||||
color: var(--reader-font-color);
|
||||
|
|
|
|||
Loading…
Reference in New Issue