style: update border-radius and padding values across components

- standardize border-radius from 8px to 6px for consistent styling
- adjust padding values from 1rem to 0.75rem for better visual hierarchy
- remove redundant overflow-y properties for cleaner code
This commit is contained in:
sanbuphy
2026-02-14 20:23:34 +08:00
parent 81e4284b87
commit d35211071a
373 changed files with 3441 additions and 5629 deletions
@@ -149,10 +149,10 @@ const totalHeight = computed(() => systemHeight.value + historyHeight.value + in
<style scoped>
.agent-context-flow {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
overflow: hidden;
margin: 1rem 0;
margin: 0.5rem 0;
}
/* 1. 顶部统计栏 */
@@ -144,8 +144,8 @@ const compress = async (mode) => {
.section {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
transition: all 0.3s ease;
}
@@ -145,10 +145,10 @@ const clear = () => {
<style scoped>
.context-visualizer {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
font-family: var(--vp-font-family-mono);
}
@@ -229,7 +229,7 @@ const clear = () => {
.window-frame {
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg);
min-height: 100px;
position: relative;
@@ -258,7 +258,7 @@ const clear = () => {
flex-wrap: wrap;
gap: 2px;
max-height: 150px;
overflow-y: auto;
}
.token-chip {
@@ -368,7 +368,7 @@ textarea:focus {
.info-box {
background-color: var(--vp-c-bg-alt);
padding: 1rem;
padding: 0.75rem;
border-radius: 6px;
font-size: 0.9rem;
line-height: 1.5;
@@ -33,7 +33,7 @@
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 0.75rem;
font-size: 0.82rem;
@@ -181,10 +181,10 @@ const sendRequest = async () => {
<style scoped>
.kv-cache-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
font-family: var(--vp-font-family-mono);
}
@@ -354,7 +354,7 @@ input:checked + .slider:before {
.metric-card {
background: var(--vp-c-bg-alt);
padding: 1rem;
padding: 0.75rem;
border-radius: 6px;
text-align: center;
position: relative;
@@ -390,7 +390,7 @@ input:checked + .slider:before {
.info-box {
background-color: var(--vp-c-bg-alt);
padding: 1rem;
padding: 0.75rem;
border-radius: 6px;
font-size: 0.9rem;
color: var(--vp-c-text-2);
@@ -112,10 +112,10 @@ const getScoreClass = (score) => {
<style scoped>
.lost-in-middle-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
font-family: var(--vp-font-family-mono);
}
@@ -151,7 +151,7 @@ const getScoreClass = (score) => {
.context-bar {
height: 40px;
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
position: relative;
margin-bottom: 0.75rem;
background: var(--vp-c-bg);
@@ -261,7 +261,7 @@ const getLayerStyle = (layerId) => {
<style scoped>
.action-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
margin: 1.5rem 0;
overflow: hidden;
@@ -328,7 +328,7 @@ const getLayerStyle = (layerId) => {
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
background: #f9f9f9;
}
.dark .chat-window {
@@ -426,7 +426,7 @@ const getLayerStyle = (layerId) => {
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
}
.layer-box {
@@ -472,7 +472,7 @@ const getLayerStyle = (layerId) => {
border-radius: 4px;
white-space: pre-wrap;
max-height: 80px;
overflow-y: auto;
}
.mini-line {
@@ -190,8 +190,8 @@ const isComplete = computed(() => currentStep.value === 4)
.layer-block {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
opacity: 0;
transform: translateY(20px) scale(0.95);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -271,12 +271,12 @@ const isComplete = computed(() => currentStep.value === 4)
color: var(--vp-c-text-3);
padding: 2rem;
border: 2px dashed var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
}
/* Controls */
.control-area {
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-top: 1px solid var(--vp-c-divider);
display: flex;
@@ -310,7 +310,7 @@ const isComplete = computed(() => currentStep.value === 4)
/* Explanation */
.explanation-box {
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-alt);
border-top: 1px solid var(--vp-c-divider);
}
@@ -209,8 +209,8 @@ const search = async () => {
position: relative;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
transition: all 0.3s ease;
}
@@ -338,7 +338,7 @@ input {
.blackboard {
background: #2b2b2b;
color: #e0e0e0;
padding: 1rem;
padding: 0.75rem;
border-radius: 6px;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 0.85rem;
@@ -192,10 +192,10 @@ const togglePin = (msg) => {
<style scoped>
.selective-context-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
font-family: var(--vp-font-family-mono);
}
@@ -265,7 +265,7 @@ const togglePin = (msg) => {
.context-section {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg);
overflow: hidden;
}
@@ -184,10 +184,10 @@ const reset = () => {
<style scoped>
.sliding-window-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
font-family: var(--vp-font-family-mono);
}
@@ -247,7 +247,7 @@ const reset = () => {
.visualization-area {
margin-bottom: 1rem;
background: var(--vp-c-bg-alt);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}