style: 新增窗口圆角变量并调整布局样式,修复阅读模式窗口阴影问题

1. 全局样式新增--radius-window圆角变量
2. 主布局和阅读页面添加对应圆角样式并隐藏溢出内容
3. 进入和退出阅读模式时恢复窗口阴影配置
4. 为阅读段落添加首行全角空格缩进
This commit is contained in:
sparksfly 2026-09-01 15:29:50 +08:00
parent eb65b0d63d
commit ee4d7df7d0
3 changed files with 20 additions and 2 deletions

View File

@ -25,6 +25,7 @@
/* 圆角 */
--radius-card: 16px;
--radius-sm: 10px;
--radius-window: 12px;
/* 尺寸 */
--titlebar-height: 38px;

View File

@ -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) {

View File

@ -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);