product/SmartisanNote.Remake
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Activity

完善部分阴影系统；

Browse Source 
把所有px单位转换为rem；
This commit is contained in:
User
2025-10-13 13:17:52 +08:00
parent 2e933ece94
commit 00a13ab5e2
8 changed files with 161 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/RichTextEditor.vue
View File

@@ -910,7 +910,7 @@ defineExpose({
left: 0;
right: 0;
display: flex;
padding: 8px 12px;
padding: 0.5rem 0.75rem;
border-top: 1px solid var(--border);
background-color: var(--background-card);
flex-shrink: 0;
@@ -926,12 +926,12 @@ defineExpose({
}
.toolbar-btn {
padding: 6px;
margin-right: 6px;
padding: 0.375rem;
margin-right: 0.375rem;
border: none;
background: transparent;
cursor: pointer;
border-radius: 4px;
border-radius: 0.25rem;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
@@ -950,8 +950,8 @@ defineExpose({
}
.toolbar-icon {
width: 20px;
height: 20px;
width: 1.25rem;
height: 1.25rem;
opacity: 0.8;
}
@@ -961,21 +961,21 @@ defineExpose({
.editor-content {
flex: 1;
padding: 0 10px 60px 10px; /* 添加底部内边距，防止内容被工具栏遮挡 */
padding: 0 0.625rem 3.75rem 0.625rem; /* 添加底部内边距，防止内容被工具栏遮挡 */
outline: none;
overflow-y: auto;
font-size: var(--editor-font-size, 16px);
font-size: var(--editor-font-size, 1rem);
line-height: var(--editor-line-height, 1.6);
color: var(--note-content);
min-height: 200px;
min-height: 12.5rem;
background-color: var(--background-card);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
position: relative;
/* 基准线样式 */
background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
background-size: 100% calc(var(--editor-font-size, 16px) * var(--editor-line-height, 1.6)); /* var(--editor-font-size) * var(--editor-line-height) */
background-size: 100% calc(var(--editor-font-size, 1rem) * var(--editor-line-height, 1.6)); /* var(--editor-font-size) * var(--editor-line-height) */
background-repeat: repeat-y;
background-position: 0 calc((var(--editor-font-size, 16px) * var(--editor-line-height, 1.6) - var(--editor-font-size, 16px)) / 2);
background-position: 0 calc((var(--editor-font-size, 1rem) * var(--editor-line-height, 1.6) - var(--editor-font-size, 1rem)) / 2);
}
.editor-content::before {
@@ -995,16 +995,16 @@ defineExpose({
/* 优化段落样式，确保与基准线对齐 */
:deep(.editor-content p) {
margin: 0 0 12px 0;
margin: 0 0 0.75rem 0;
line-height: var(--editor-line-height, 1.6);
letter-spacing: 0.3px;
}
/* 自定义内容样式 - 统一行高和间距 */
:deep(.editor-content h2) {
font-size: var(--editor-font-size, 16px);
font-size: var(--editor-font-size, 1rem);
font-weight: 600;
margin: 0 0 12px 0;
margin: 0 0 0.75rem 0;
color: var(--note-title);
line-height: var(--editor-line-height, 1.6);
letter-spacing: 0.3px;
@@ -1014,8 +1014,8 @@ defineExpose({
:deep(.editor-content blockquote) {
border-left: 3px solid var(--primary);
padding: 0 16px 0 16px;
margin: 0 0 12px 0;
padding: 0 1rem 0 1rem;
margin: 0 0 0.75rem 0;
color: var(--text-secondary);
background-color: var(--background-secondary);
font-style: italic;
@@ -1024,7 +1024,7 @@ defineExpose({
:deep(.quote-container) {
position: relative;
margin: 0 0 12px 0;
margin: 0 0 0.75rem 0;
line-height: var(--editor-line-height, 1.6);
}
@@ -1032,15 +1032,15 @@ defineExpose({
position: absolute;
left: 0;
top: 0;
width: var(--editor-font-size, 16px);
height: var(--editor-font-size, 16px);
margin-top: 3px;
width: var(--editor-font-size, 1rem);
height: var(--editor-font-size, 1rem);
margin-top: 0.1875rem;
}
:deep(.quote-content) {
border-left: 3px solid var(--primary);
padding: 0 var(--editor-font-size, 16px) 0 32px;
margin-left: var(--editor-font-size, 16px);
padding: 0 var(--editor-font-size, 1rem) 0 2rem;
margin-left: var(--editor-font-size, 1rem);
color: var(--text-secondary);
background-color: var(--background-secondary);
font-style: italic;
@@ -1049,8 +1049,8 @@ defineExpose({
:deep(.editor-content ul),
:deep(.editor-content ol) {
margin: 0 0 12px 0;
padding-left: 32px;
margin: 0 0 0.75rem 0;
padding-left: 2rem;
position: relative;
line-height: var(--editor-line-height, 1.6);
}
@@ -1080,7 +1080,7 @@ defineExpose({
border: none;
height: 1px;
background-color: var(--border);
margin: 12px 0;
margin: 0.75rem 0;
}
.editor-content div[style*='text-align: center'] {
@@ -1094,7 +1094,7 @@ defineExpose({
margin: calc((var(--editor-line-height, 1.6) * 10) * 1px) auto;
object-fit: cover;
box-sizing: border-box;
border: 10px solid white;
border: 0.625rem solid white;
border-radius: 0.2rem;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
}
@@ -1106,12 +1106,12 @@ defineExpose({
margin: 0;
line-height: var(--editor-line-height, 1.6);
position: relative;
padding-left: calc(var(--editor-font-size, 16px) * 1.5);
padding-left: calc(var(--editor-font-size, 1rem) * 1.5);
}
:deep(.todo-icon) {
width: calc(var(--editor-font-size, 16px) * 1.5);
height: calc(var(--editor-font-size, 16px) * 1.5);
width: calc(var(--editor-font-size, 1rem) * 1.5);
height: calc(var(--editor-font-size, 1rem) * 1.5);
cursor: pointer;
flex-shrink: 0;
position: absolute;