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:
@@ -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. 顶部统计栏 */
|
||||
|
||||
+2
-2
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
+6
-6
@@ -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;
|
||||
|
||||
+1
-1
@@ -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);
|
||||
|
||||
+4
-4
@@ -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;
|
||||
|
||||
+4
-4
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user