Kronecker/NotesAgentic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

feat(frontend): 统一页面视觉与轻量动效

Browse Source
This commit is contained in:
admin
2026-08-30 20:13:29 +08:00
parent 2c84a98474
commit ef03a8f745
17 changed files with 275 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/common/AppShell.vue
+2 -1
View File
@@ -73,7 +73,7 @@ defineExpose({ openCitation })
flex-direction: column;
height: 100vh;
width: 100vw;
background: var(--color-background-primary);
background: var(--color-background-secondary);
color: var(--color-text-primary);
}
@@ -89,5 +89,6 @@ defineExpose({ openCitation })
min-width: 0;
overflow: hidden;
background: var(--color-background-primary);
isolation: isolate;
}
</style>
frontend/src/components/common/CommandPalette.vue
+8 -4
View File
@@ -89,13 +89,17 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
</template>
<style scoped>
.command-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; background: var(--color-background-overlay); }
.command-palette { width: min(600px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-surface-elevated); box-shadow: var(--shadow-xl); }
.command-input { width: 100%; padding: var(--space-lg); border: 0; border-bottom: 1px solid var(--color-border-default); outline: 0; background: transparent; font-size: var(--font-size-xl); }
.command-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; background: var(--color-background-overlay); animation: command-backdrop-in var(--motion-fast) both; }
.command-palette { width: min(620px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: var(--color-surface-elevated); box-shadow: var(--shadow-xl); animation: command-palette-in var(--motion-normal) both; }
.command-input { width: 100%; padding: var(--space-xl); border: 0; border-bottom: 1px solid var(--color-border-default); outline: 0; background: transparent; color: var(--color-text-primary); font-size: var(--font-size-xl); }
.command-list { max-height: 360px; overflow: auto; padding: var(--space-sm); }
.command-list button { display: flex; justify-content: space-between; width: 100%; padding: var(--space-md); border-radius: var(--radius-md); text-align: left; }
.command-list button { display: flex; justify-content: space-between; width: 100%; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); text-align: left; transition: color var(--motion-fast), background-color var(--motion-fast), transform var(--motion-fast); }
.command-list button:hover, .command-list button:focus { outline: 0; background: var(--color-accent-soft); color: var(--color-accent-primary); }
.command-list button:hover { transform: translateX(2px); }
.command-list small, .command-list p, footer { color: var(--color-text-tertiary); }
.command-list p { padding: var(--space-xl); text-align: center; }
footer { display: flex; gap: var(--space-lg); padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--color-border-subtle); font-size: var(--font-size-xs); }
@keyframes command-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes command-palette-in { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
</style>
frontend/src/components/common/PrimarySidebar.vue
+14 -9
View File
@@ -60,13 +60,14 @@ function toggleExpanded() {
<style scoped>
.primary-sidebar {
width: 56px;
width: var(--sidebar-primary-width);
background: var(--color-background-secondary);
border-right: 1px solid var(--color-border-subtle);
display: flex;
flex-direction: column;
flex-shrink: 0;
z-index: var(--z-sidebar);
transition: width var(--motion-normal), background-color var(--motion-normal);
}
.primary-sidebar.expanded { width: var(--sidebar-primary-width-expanded); }
@@ -76,7 +77,7 @@ function toggleExpanded() {
.nav-list {
flex: 1;
padding: var(--space-sm) 0;
padding: var(--space-md) 0;
display: flex;
flex-direction: column;
gap: 2px;
@@ -87,31 +88,34 @@ function toggleExpanded() {
flex-direction: column;
align-items: center;
justify-content: center;
height: 50px;
margin: 0 4px;
height: 48px;
margin: 0 6px;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-secondary);
transition: all var(--motion-fast);
border: 1px solid transparent;
transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
position: relative;
&:hover {
background: var(--color-background-hover);
color: var(--color-text-primary);
transform: translateX(2px);
}
&.active {
background: var(--color-accent-soft);
color: var(--color-accent-primary);
border-color: color-mix(in srgb, var(--color-accent-primary) 16%, transparent);
&::before {
content: '';
position: absolute;
left: -4px;
left: -7px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 24px;
width: 4px;
height: 22px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--color-accent-primary);
}
@@ -127,6 +131,7 @@ function toggleExpanded() {
.nav-label {
font-size: 10px;
line-height: 1.2;
font-weight: 550;
}
.sidebar-footer {
@@ -134,5 +139,5 @@ function toggleExpanded() {
border-top: 1px solid var(--color-border-subtle);
}
.collapse-button { width: calc(100% - 8px); }
.collapse-button { width: calc(100% - 12px); }
</style>
frontend/src/components/common/SecondarySidebar.vue
+9 -8
View File
@@ -53,7 +53,7 @@ const showSkillToggle = computed(() => routeName.value === 'skills' || routeName
<style scoped>
.secondary-sidebar {
width: var(--sidebar-secondary-width);
background: var(--color-background-primary);
background: var(--color-surface-secondary);
border-right: 1px solid var(--color-border-default);
display: flex;
flex-direction: column;
@@ -62,36 +62,36 @@ const showSkillToggle = computed(() => routeName.value === 'skills' || routeName
}
.sidebar-header {
padding: var(--space-md) var(--space-lg);
padding: var(--space-lg);
border-bottom: 1px solid var(--color-border-subtle);
flex-shrink: 0;
}
.sidebar-title {
font-size: var(--font-size-sm);
font-weight: 600;
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 var(--space-sm) 0;
margin: 0 0 var(--space-md) 0;
}
.sidebar-tabs {
display: flex;
gap: 2px;
background: var(--color-background-secondary);
padding: 2px;
padding: 3px;
border-radius: var(--radius-md);
}
.tab {
flex: 1;
text-align: center;
padding: 4px 8px;
padding: 6px 8px;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
border-radius: var(--radius-sm);
cursor: pointer;
text-decoration: none;
transition: all var(--motion-fast);
transition: color var(--motion-fast), background-color var(--motion-fast), box-shadow var(--motion-fast);
&.active {
background: var(--color-surface-primary);
@@ -108,6 +108,7 @@ const showSkillToggle = computed(() => routeName.value === 'skills' || routeName
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
}
</style>
frontend/src/components/common/StatusBar.vue
+9 -2
View File
@@ -107,8 +107,8 @@ const showEditorInfo = computed(() => route.name === 'workspace')
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-md);
background: var(--color-background-secondary);
padding: 0 var(--space-lg);
background: var(--color-surface-secondary);
border-top: 1px solid var(--color-border-subtle);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
@@ -129,6 +129,7 @@ const showEditorInfo = computed(() => route.name === 'workspace')
gap: 6px;
white-space: nowrap;
cursor: default;
transition: color var(--motion-fast);
&:hover {
color: var(--color-text-primary);
@@ -140,6 +141,7 @@ const showEditorInfo = computed(() => route.name === 'workspace')
height: 6px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 2px var(--color-surface-secondary);
}
.agent-status {
@@ -162,4 +164,9 @@ const showEditorInfo = computed(() => route.name === 'workspace')
.provider-info {
color: var(--color-text-tertiary);
}
@media (max-width: 760px) {
.statusbar-left, .statusbar-right { gap: var(--space-sm); }
.provider-info { display: none; }
}
</style>
frontend/src/components/common/TitleBar.vue
+20 -7
View File
@@ -71,8 +71,8 @@ const isDirty = computed(() => editorStore.saveStatus === 'dirty' || editorStore
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-md);
background: var(--color-background-secondary);
padding: 0 var(--space-lg);
background: var(--color-surface-secondary);
border-bottom: 1px solid var(--color-border-subtle);
font-size: var(--font-size-sm);
flex-shrink: 0;
@@ -129,7 +129,13 @@ const isDirty = computed(() => editorStore.saveStatus === 'dirty' || editorStore
}
.app-name {
font-weight: 500;
padding: 3px 10px;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-full);
background: var(--color-surface-primary);
color: var(--color-text-secondary);
font-weight: 650;
letter-spacing: .04em;
}
.titlebar-right {
@@ -141,8 +147,8 @@ const isDirty = computed(() => editorStore.saveStatus === 'dirty' || editorStore
}
.icon-btn {
width: 28px;
height: 28px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
@@ -150,11 +156,12 @@ const isDirty = computed(() => editorStore.saveStatus === 'dirty' || editorStore
color: var(--color-text-secondary);
font-size: 14px;
-webkit-app-region: no-drag;
transition: background var(--motion-fast);
transition: background-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
&:hover {
background: var(--color-background-hover);
color: var(--color-text-primary);
transform: rotate(8deg);
}
}
@@ -179,7 +186,7 @@ const isDirty = computed(() => editorStore.saveStatus === 'dirty' || editorStore
color: var(--color-text-secondary);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--motion-fast);
transition: background-color var(--motion-fast), color var(--motion-fast);
&:hover {
background: var(--color-background-hover);
@@ -190,4 +197,10 @@ const isDirty = computed(() => editorStore.saveStatus === 'dirty' || editorStore
color: white;
}
}
@media (max-width: 760px) {
.titlebar-left, .titlebar-right { min-width: 0; }
.titlebar-center, .window-controls { display: none; }
.file-name { max-width: 42vw; }
}
</style>