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