lix/mnote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve local evidence search and AI capabilities

Browse Source
This commit is contained in:
lix-2026
2026-06-05 23:00:53 +08:00
parent a1dcfc9f76
commit 4dbd9a978b
52 changed files with 6415 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rust/crates/mnote-web/src/ssr/pages/layout.rs
+47 -7
View File
@@ -201,7 +201,7 @@ pub fn PageLayout(
{children()}
</article>
<div class="wolai-floating-actions" aria-label="浮动操作">
<button type="button" data-testid="wolai-floating-help" class="wolai-floating-button wolai-floating-button--help" aria-label="帮助"><span class="material-symbols-outlined" data-icon="help" aria-hidden="true"></span></button>
<button type="button" data-testid="mnote-floating-task-toggle" class="wolai-floating-button wolai-floating-button--tasks mnote-local-ocr-task-toggle" title="后台任务" aria-label="后台任务" data-mnote-action="toggle-ocr-tasks"><span class="material-symbols-outlined" data-icon="pending_actions" aria-hidden="true"></span><span class="mnote-local-ocr-task-badge" data-mnote-local-ocr-task-count hidden>0</span></button>
<button type="button" data-testid="wolai-floating-ai" class="wolai-floating-button wolai-floating-button--ai" aria-label="AI 助手" title="点击 进入空间智能问答" data-mnote-action="open-page-ai"><span class="material-symbols-outlined material-symbols-filled" data-icon="auto_awesome" aria-hidden="true"></span></button>
</div>
</div>
@@ -232,6 +232,8 @@ mod tests {
include_str!("../../../browser/sidebar-page-tree-runtime.js");
const SIDEBAR_PAGE_AI_RUNTIME_JS: &str =
include_str!("../../../browser/sidebar-page-ai-runtime.js");
const SIDEBAR_PAGE_AI_MARKDOWN_RUNTIME_JS: &str =
include_str!("../../../browser/sidebar-page-ai-markdown-runtime.js");
const SIDEBAR_PAGE_AI_RENDER_RUNTIME_JS: &str =
include_str!("../../../browser/sidebar-page-ai-render-runtime.js");
const SIDEBAR_PAGE_AI_PERMISSION_RUNTIME_JS: &str =
@@ -499,6 +501,9 @@ mod tests {
assert!(html.contains(r#"data-icon="manage_search""#));
assert!(html.contains(r#"data-testid="mnote-local-ocr-task-toggle""#));
assert!(html.contains(r#"data-mnote-action="open-ocr-settings""#));
assert!(html.contains(r#"data-testid="mnote-floating-task-toggle""#));
assert!(html.contains(r#"data-mnote-action="toggle-ocr-tasks""#));
assert!(html.contains(r#"data-icon="pending_actions""#));
}
#[test]
@@ -515,12 +520,30 @@ mod tests {
"新增索引范围必须保留空白输入行，不能先过滤成默认 ."
);
assert!(
SIDEBAR_PAGE_SETTINGS_RUNTIME_JS.contains("if (!values.length) values = [''];"),
"删除最后一个索引范围时 UI 应显示空行，不能强制回填 ."
SIDEBAR_PAGE_SETTINGS_RUNTIME_JS.contains("data-local-index-persisted=\"true\""),
"已保存索引范围必须锁定为不可直接修改"
);
assert!(
SIDEBAR_PAGE_SETTINGS_RUNTIME_JS
.contains("return currentLocalIndexRangeValues(popover).map"),
"删除最后一个索引范围后保存应提交空数组，不能强制回填 ."
);
assert!(
SIDEBAR_PAGE_SETTINGS_RUNTIME_JS
.contains("var savedIncludePaths = Array.isArray(settings.includePaths) ? settings.includePaths : [];"),
"索引面板默认不应把空配置回填成工作区根目录"
);
assert!(
SIDEBAR_PAGE_SETTINGS_RUNTIME_JS.contains(
"var includePaths = savedIncludePaths.length ? savedIncludePaths : indexedPaths;"
),
"无用户配置但已有索引缓存时仍应展示旧索引范围，便于删除"
);
assert!(SIDEBAR_PAGE_SETTINGS_RUNTIME_JS
.contains("data-local-ocr-settings-action=\"run-active\""));
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("mnote:local-ocr-settings-action"));
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("[data-mnote-action=\"toggle-ocr-tasks\"]"));
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("detail: { action: 'tasks' }"));
assert!(!SIDEBAR_PAGE_SETTINGS_RUNTIME_JS.contains("data-page-settings-tab=\"index\""));
assert!(!SIDEBAR_PAGE_SETTINGS_RUNTIME_JS.contains("本地索引仅在本地工作区页面可用"));
assert!(
@@ -617,6 +640,11 @@ mod tests {
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("function pageAiLoadBackendSessions"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("/api/hermes/client/sessions?"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("params.set('source', 'acp')"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains(
"var draftSessions = pageAiNormalizeArray(pageUiState.pageAiSessions).filter"
));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS
.contains("pageAiDedupeSessions(backendSessions.concat(draftSessions))"));
assert!(
SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("function pageAiLoadBackendSessionDetail")
);
@@ -625,6 +653,9 @@ mod tests {
assert!(SIDEBAR_PAGE_AI_RENDER_RUNTIME_JS.contains("data-page-ai-session-delete"));
assert!(SIDEBAR_PAGE_AI_RENDER_RUNTIME_JS.contains("data-page-ai-session-resume"));
assert!(SIDEBAR_PAGE_AI_RENDER_RUNTIME_JS.contains("data-page-ai-session-search"));
assert!(SIDEBAR_PAGE_AI_RENDER_RUNTIME_JS.contains("function pageAiRenderThoughtGroup"));
assert!(SIDEBAR_PAGE_AI_RENDER_RUNTIME_JS.contains("data-page-ai-thought-card"));
assert!(SIDEBAR_PAGE_AI_RENDER_RUNTIME_JS.contains("data-page-ai-collapse-card"));
assert!(SIDEBAR_PAGE_AI_RUNTIME_JS.contains("pageAiUsageSummary"));
assert!(SIDEBAR_PAGE_AI_RUNTIME_JS.contains("usage.updated"));
assert!(SIDEBAR_PAGE_AI_RUNTIME_JS.contains("thought.delta"));
@@ -664,9 +695,11 @@ mod tests {
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("function pageAiSessionStorageLabel"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("local_private"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("local_shared"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("sqlite_control_plane"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("convex_acp_runtime_store"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("本地私有"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("共享会话"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("账号会话"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("云端会话"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("sessionStorage:"));
assert!(SIDEBAR_PAGE_AI_SESSION_RUNTIME_JS.contains("permissionLevel:"));
@@ -688,6 +721,10 @@ mod tests {
assert!(SIDEBAR_PAGE_AI_RUNTIME_JS.contains("pageAiNormalizeAcpRuntimes(acpRuntimes)"));
assert!(SIDEBAR_PAGE_AI_RUNTIME_JS.contains("pageAiAcpRuntimeSelect.value || 'reasonix'"));
assert!(SIDEBAR_PAGE_AI_RUNTIME_JS.contains("function handlePageAiClick"));
assert!(SIDEBAR_PAGE_AI_RUNTIME_JS.contains("function pageAiOpenCitationUrl"));
assert!(SIDEBAR_PAGE_AI_RUNTIME_JS.contains("a[data-page-ai-citation-link=\"true\"]"));
assert!(SIDEBAR_PAGE_AI_MARKDOWN_RUNTIME_JS.contains("data-page-ai-citation-link=\"true\""));
assert!(SIDEBAR_PAGE_AI_MARKDOWN_RUNTIME_JS.contains("target=\"_blank\""));
assert!(SIDEBAR_PAGE_AI_RUNTIME_JS.contains("function handlePageAiChange"));
assert!(SIDEBAR_PAGE_AI_RUNTIME_JS.contains("function installPageAiDelegates"));
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("sidebarPageAi.installPageAiDelegates()"));
@@ -722,7 +759,8 @@ mod tests {
#[test]
fn sidebar_workspace_source_switch_remembers_real_cloud_workspace_before_local_folder() {
assert!(
!SIDEBAR_TREE_RUNTIME_JS.contains("rememberCloudWorkspaceId(resolveWorkspaceId(document.body))"),
!SIDEBAR_TREE_RUNTIME_JS
.contains("rememberCloudWorkspaceId(resolveWorkspaceId(document.body))"),
"进入本地文件夹前不能用 document.body 推导 workspaceId；它会在无 workspaceId URL 时回退成 default"
);
assert!(
@@ -881,7 +919,8 @@ mod tests {
assert!(LOCAL_UPLOAD_RUNTIME_JS.contains("uploadFilesWithResolvedTarget"));
assert!(LOCAL_UPLOAD_RUNTIME_JS.contains("__mnoteLastEditorUploadRoot"));
assert!(
LOCAL_UPLOAD_RUNTIME_JS.contains("var imageUrl = localOpenUrl || fallbackUrl || markdownHref;"),
LOCAL_UPLOAD_RUNTIME_JS
.contains("var imageUrl = localOpenUrl || fallbackUrl || markdownHref;"),
"图片上传首屏必须使用本地 open URL 渲染，避免相对 href 在 /documents 下命中退役 Convex 兼容路径"
);
assert!(
@@ -1530,8 +1569,9 @@ mod tests {
);
assert!(SIDEBAR_TREE_LIVE_APPLY_RUNTIME_JS
.contains("fileTreeViewState.selectedRowIds.add(rowId)"));
assert!(SIDEBAR_TREE_LIVE_APPLY_RUNTIME_JS
.contains("row.setAttribute('data-selected', String(fileTreeViewState.selectedRowIds.has(rowId)))"));
assert!(SIDEBAR_TREE_LIVE_APPLY_RUNTIME_JS.contains(
"row.setAttribute('data-selected', String(fileTreeViewState.selectedRowIds.has(rowId)))"
));
assert!(SIDEBAR_TREE_LIVE_APPLY_RUNTIME_JS.contains(
"row.setAttribute('data-focused', String(rowId === fileTreeViewState.focusedRowId))"
));
rust/crates/mnote-web/src/ssr/styles.rs
+346 -56
View File
@@ -1732,7 +1732,8 @@ body {
justify-content: center;
flex: 0 0 20px;
color: #9A958F;
overflow: hidden;
overflow: visible;
position: relative;
}
.sidebar-tree .tree-kind-badge::before {
@@ -1745,6 +1746,32 @@ body {
mask: var(--mnote-filetree-icon-mask) center / contain no-repeat;
}
.sidebar-tree .tree-row[data-index-status="indexed"] .tree-kind-badge::after,
.sidebar-tree .tree-row[data-index-status="failed"] .tree-kind-badge::after {
position: absolute;
left: -1px;
bottom: 1px;
width: 9px;
height: 9px;
border-radius: 2px;
color: #FFFFFF;
font-size: 8px;
line-height: 9px;
font-weight: 700;
text-align: center;
box-shadow: 0 0 0 1px #FFFFFF;
}
.sidebar-tree .tree-row[data-index-status="indexed"] .tree-kind-badge::after {
content: "✓";
background: #38B86E;
}
.sidebar-tree .tree-row[data-index-status="failed"] .tree-kind-badge::after {
content: "x";
background: #D94841;
}
.sidebar-tree .tree-kind-badge[data-kind="page"]::before {
--mnote-filetree-icon-mask: var(--mnote-filetree-icon-file);
}
@@ -2783,9 +2810,10 @@ body {
.mnote-local-ocr-task-dock {
position: fixed;
right: 16px;
top: 48px;
z-index: 90;
top: 12px;
right: 12px;
bottom: 12px;
z-index: 89;
color: #37352f;
font-size: 13px;
pointer-events: none;
@@ -2813,30 +2841,61 @@ body {
}
.mnote-local-ocr-task-drawer {
width: min(360px, calc(100vw - 36px));
max-height: min(420px, calc(100vh - 120px));
overflow: auto;
border: 1px solid rgba(55, 53, 47, 0.14);
border-radius: 6px;
background: #FFF;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
width: min(440px, calc(100vw - 24px));
height: 100%;
pointer-events: auto;
}
.mnote-local-ocr-task-drawer[hidden] {
display: none !important;
}
.mnote-local-ocr-task-panel {
height: 100%;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.98);
box-shadow: -18px 0 42px rgba(27, 28, 28, 0.14);
box-sizing: border-box;
}
.mnote-local-ocr-task-head {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid rgba(55, 53, 47, 0.1);
}
.mnote-local-ocr-task-head > div {
min-width: 0;
}
.mnote-local-ocr-task-head strong {
display: block;
color: #1B1C1C;
font-size: 16px;
font-weight: 650;
line-height: 22px;
}
.mnote-local-ocr-task-head span {
display: block;
margin-top: 2px;
color: #8B8782;
font-size: 12px;
line-height: 18px;
}
.mnote-local-ocr-task-close {
width: 24px;
height: 24px;
flex: 0 0 auto;
width: 28px;
height: 28px;
border: 0;
border-radius: 4px;
border-radius: 6px;
background: transparent;
color: #787774;
cursor: pointer;
@@ -2847,55 +2906,208 @@ body {
color: #37352f;
}
.mnote-local-ocr-task-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid rgba(55, 53, 47, 0.08);
.mnote-local-ocr-task-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
padding: 3px;
border-radius: 8px;
background: #F4F3F2;
}
.mnote-local-ocr-task-main {
.mnote-local-ocr-task-tabs button {
min-width: 0;
}
.mnote-local-ocr-task-main strong,
.mnote-local-ocr-task-main span {
display: block;
height: 28px;
border: 0;
border-radius: 6px;
background: transparent;
color: #5A5A5A;
font-size: 12px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mnote-local-ocr-task-main span,
.mnote-local-ocr-task-empty {
.mnote-local-ocr-task-tabs button[aria-selected="true"] {
background: #FFF;
color: #1B1C1C;
box-shadow: 0 1px 4px rgba(27, 28, 28, 0.08);
}
.mnote-local-ocr-task-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.mnote-local-ocr-task-toolbar span {
color: #8B8782;
font-size: 12px;
}
.mnote-local-ocr-task-toolbar button,
.mnote-local-ocr-task-actions button {
min-height: 28px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 6px;
background: #FFF;
color: #1B1C1C;
font-size: 12px;
cursor: pointer;
}
.mnote-local-ocr-task-toolbar button:disabled {
color: #AAA6A0;
cursor: default;
}
.mnote-local-ocr-task-list {
min-height: 0;
overflow: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.mnote-local-ocr-task-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
padding: 10px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 8px;
background: #FFF;
}
.mnote-local-ocr-task-main {
min-width: 0;
display: grid;
gap: 5px;
}
.mnote-local-ocr-task-title-line {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.mnote-local-ocr-task-main strong {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #1B1C1C;
font-size: 13px;
font-weight: 600;
line-height: 18px;
}
.mnote-local-ocr-task-main em {
flex: 0 0 auto;
padding: 1px 6px;
border-radius: 999px;
background: #F0EFED;
color: #8B8782;
font-size: 10px;
font-style: normal;
line-height: 15px;
}
.mnote-local-ocr-task-row[data-mnote-local-ocr-task-category="attention"] .mnote-local-ocr-task-main em {
background: #FEE2E2;
color: #B3261E;
}
.mnote-local-ocr-task-row[data-mnote-local-ocr-task-category="active"] .mnote-local-ocr-task-main em {
background: #DBEAFE;
color: #1D4ED8;
}
.mnote-local-ocr-task-main span {
display: block;
min-width: 0;
overflow: hidden;
color: #787774;
font-size: 12px;
line-height: 17px;
text-overflow: ellipsis;
white-space: nowrap;
}
.mnote-local-ocr-task-progress {
position: relative;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: #ECE9E4;
}
.mnote-local-ocr-task-progress i {
display: block;
height: 100%;
border-radius: inherit;
background: #5B8DEF;
}
.mnote-local-ocr-task-progress[data-progress-mode="indeterminate"] i {
width: 40%;
animation: mnote-task-progress-slide 1.15s ease-in-out infinite;
}
@keyframes mnote-task-progress-slide {
0% {
transform: translateX(-120%);
}
100% {
transform: translateX(260%);
}
}
.mnote-local-ocr-task-empty {
padding: 12px;
padding: 24px 12px;
border: 1px dashed rgba(27, 28, 28, 0.12);
border-radius: 8px;
color: #787774;
text-align: center;
}
.mnote-local-ocr-task-actions {
display: flex;
display: grid;
flex: 0 0 auto;
gap: 6px;
}
.mnote-local-ocr-task-actions button {
height: 26px;
border: 1px solid rgba(55, 53, 47, 0.14);
border-radius: 4px;
background: #FFF;
color: #37352f;
cursor: pointer;
padding: 0 8px;
}
.mnote-local-ocr-task-actions button[data-mnote-local-ocr-task-delete] {
color: #b3261e;
}
@media (max-width: 720px) {
.mnote-local-ocr-task-dock {
left: 12px;
}
.mnote-local-ocr-task-drawer {
width: 100%;
}
.mnote-local-ocr-task-row {
grid-template-columns: 1fr;
}
.mnote-local-ocr-task-actions {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.mnote-resource-tab-frame,
.mnote-resource-tab-image,
.mnote-resource-tab-text-shell {
@@ -3481,7 +3693,7 @@ body {
cursor: pointer;
}
.wolai-floating-button--help {
.wolai-floating-button--tasks {
width: 40px;
height: 40px;
border: 1px solid rgba(27, 28, 28, 0.1);
@@ -3767,6 +3979,12 @@ body {
color: #A19D97;
}
.wolai-page-settings-index-root-hint {
color: #8B8782;
font-size: 11px;
white-space: nowrap;
}
.wolai-page-settings-index-remove,
.wolai-page-settings-index-add {
border: 1px solid #D8D4CE;
@@ -4597,13 +4815,14 @@ body {
.wolai-page-ai-skills-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(124px, 160px) max-content;
grid-template-columns: minmax(0, 1fr);
align-items: end;
gap: 8px;
}
.wolai-page-ai-skill-filter-toggle {
display: inline-flex;
grid-column: 1 / -1;
min-height: 34px;
align-items: center;
gap: 6px;
@@ -4670,10 +4889,10 @@ body {
.wolai-page-ai-skill-row {
display: flex;
min-height: 38px;
align-items: center;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 6px 8px;
padding: 8px;
border: 0;
border-radius: 6px;
background: transparent;
@@ -4687,20 +4906,21 @@ body {
display: grid;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.wolai-page-ai-skill-main {
display: flex;
display: grid;
min-width: 0;
align-items: center;
gap: 8px;
gap: 2px;
}
.wolai-page-ai-skill-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
white-space: normal;
word-break: break-word;
}
.wolai-page-ai-skill-desc {
@@ -4708,18 +4928,22 @@ body {
color: #5A5A5A;
font-size: 11px;
line-height: 15px;
text-overflow: ellipsis;
white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: clip;
white-space: normal;
}
.wolai-page-ai-skill-source {
flex: 0 0 auto;
padding: 1px 5px;
border-radius: 999px;
background: #F0EFED;
padding: 0;
border-radius: 0;
background: transparent;
color: #8B8782;
font-size: 10px;
line-height: 14px;
white-space: normal;
word-break: break-word;
}
.wolai-page-ai-skill-switch {
@@ -4753,6 +4977,17 @@ body {
transform: translateX(14px);
}
.wolai-page-ai-skill-readonly-badge {
flex: 0 0 auto;
margin-top: 2px;
padding: 2px 6px;
border-radius: 999px;
background: #F0EFED;
color: #8B8782;
font-size: 10px;
line-height: 14px;
}
.wolai-page-ai-message {
display: flex;
flex-direction: column;
@@ -4867,6 +5102,61 @@ button.wolai-page-ai-message-text {
white-space: nowrap;
}
.wolai-page-ai-tool-group-list {
display: grid;
gap: 8px;
margin-top: 8px;
}
.wolai-page-ai-thought-group-list {
min-width: 0;
margin-top: 8px;
padding-left: 10px;
border-left: 2px solid rgba(27, 28, 28, 0.12);
color: #6F6B66;
font-size: 12px;
line-height: 18px;
white-space: pre-wrap;
}
.wolai-page-ai-tool-item {
display: grid;
gap: 4px;
min-width: 0;
padding: 8px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 6px;
background: rgba(255, 255, 255, 0.58);
}
.wolai-page-ai-tool-item-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
gap: 8px;
align-items: center;
}
.wolai-page-ai-tool-item-head strong {
min-width: 0;
overflow: hidden;
color: #1B1C1C;
font-size: 12px;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-tool-item-head span {
min-width: 0;
overflow: hidden;
color: #8B8782;
font-size: 11px;
line-height: 16px;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-footer {
position: relative;
z-index: 20;