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
@@ -265,7 +265,7 @@ const setActive = (func) => {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-divider);
border-radius: 10px;
@@ -357,8 +357,8 @@ const setActive = (func) => {
.detail-example {
background: var(--vp-c-bg-soft);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
@@ -470,8 +470,8 @@ const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === curren
.step-content {
flex: 1;
background: var(--vp-c-bg-soft);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
@@ -517,7 +517,7 @@ const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === curren
.token-part {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
}
@@ -622,8 +622,8 @@ const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === curren
gap: 1rem;
align-items: flex-start;
background: white;
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid #22c55e;
}
@@ -422,7 +422,7 @@ watch(serverCount, (newVal) => {
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-divider);
border-radius: 10px;
@@ -523,7 +523,7 @@ watch(serverCount, (newVal) => {
background: linear-gradient(135deg, rgba(var(--vp-c-brand-rgb), 0.1), rgba(var(--vp-c-brand-rgb), 0.05));
border: 2px solid var(--vp-c-brand);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
margin-bottom: 1.5rem;
display: flex;
gap: 1rem;
@@ -596,7 +596,7 @@ watch(serverCount, (newVal) => {
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-divider);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
transition: all 0.3s;
}
@@ -714,7 +714,7 @@ watch(serverCount, (newVal) => {
.request-queue {
background: var(--vp-c-bg-soft);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
margin-bottom: 1.5rem;
border: 1px solid var(--vp-c-divider);
}
@@ -746,7 +746,7 @@ watch(serverCount, (newVal) => {
flex-direction: column;
gap: 0.25rem;
max-height: 200px;
overflow-y: auto;
}
.queue-item {
@@ -792,7 +792,7 @@ watch(serverCount, (newVal) => {
.strategy-stats {
background: var(--vp-c-bg-soft);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
@@ -812,7 +812,7 @@ watch(serverCount, (newVal) => {
.stat-card {
background: white;
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
text-align: center;
border: 1px solid var(--vp-c-divider);
@@ -366,7 +366,7 @@ const resetSimulation = () => {
.compare-item {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
text-align: center;
}
@@ -435,7 +435,7 @@ const resetSimulation = () => {
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
@@ -466,9 +466,9 @@ const resetSimulation = () => {
.stat-item {
text-align: center;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.stat-value {
@@ -634,7 +634,7 @@ onUnmounted(() => {
background: linear-gradient(180deg, #fef3c7, #fde68a);
border: 3px solid #f59e0b;
border-radius: 12px;
padding: 1rem;
padding: 0.75rem;
min-height: 200px;
display: flex;
flex-direction: column;
@@ -655,7 +655,7 @@ onUnmounted(() => {
align-content: flex-start;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
border-radius: 6px;
}
.token {
@@ -679,7 +679,7 @@ onUnmounted(() => {
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-divider);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
text-align: center;
}
@@ -711,7 +711,7 @@ onUnmounted(() => {
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-divider);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
}
.queue-title {
@@ -726,7 +726,7 @@ onUnmounted(() => {
flex-direction: column;
gap: 0.5rem;
max-height: 250px;
overflow-y: auto;
}
.request-item {
@@ -790,14 +790,14 @@ onUnmounted(() => {
background: linear-gradient(180deg, #dbeafe, #bfdbfe);
border: 3px solid #3b82f6;
border-radius: 12px;
padding: 1rem;
padding: 0.75rem;
position: relative;
}
.bucket-content {
height: 150px;
background: rgba(255, 255, 255, 0.7);
border-radius: 8px;
border-radius: 6px;
position: relative;
overflow: hidden;
}
@@ -866,7 +866,7 @@ onUnmounted(() => {
/* 滑动窗口可视化 */
.sliding-window-vis {
padding: 1rem;
padding: 0.75rem;
}
.window-container {
@@ -904,7 +904,7 @@ onUnmounted(() => {
align-items: flex-end;
padding: 0.5rem;
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
border-radius: 6px;
}
.time-slot {
@@ -937,9 +937,9 @@ onUnmounted(() => {
.window-stats {
display: flex;
justify-content: space-around;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
}
@@ -1060,8 +1060,8 @@ onUnmounted(() => {
.config-code {
background: var(--vp-c-bg-alt);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
overflow-x: auto;
font-size: 0.85rem;
line-height: 1.6;
@@ -1070,8 +1070,8 @@ onUnmounted(() => {
.config-explanation {
background: var(--vp-c-bg-soft);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
}
.exp-title {
@@ -223,7 +223,7 @@ const currentScenarios = computed(() => mode.value === 'forward' ? forwardScenar
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
padding: 0.75rem;
border-radius: 12px;
min-width: 100px;
text-align: center;
@@ -323,7 +323,7 @@ const applyPreset = (preset) => {
.input-group select {
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
font-size: 0.95rem;
background: var(--vp-c-bg);
color: var(--vp-c-text-1);
@@ -337,11 +337,11 @@ const applyPreset = (preset) => {
.match-btn {
width: 100%;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
@@ -534,7 +534,7 @@ code {
padding: 0.6rem 1rem;
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
font-size: 0.9rem;
@@ -324,7 +324,7 @@ const bestPractices = [
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-divider);
border-radius: 12px;
@@ -532,8 +532,8 @@ const bestPractices = [
gap: 1rem;
align-items: flex-start;
background: var(--vp-c-bg-soft);
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
border-left: 3px solid var(--vp-c-brand);
}
@@ -580,8 +580,8 @@ const bestPractices = [
.nginx-config {
background: var(--vp-c-bg-alt);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
overflow-x: auto;
}
@@ -607,8 +607,8 @@ const bestPractices = [
.practice-card {
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
}
.practice-header {