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
@@ -121,10 +121,10 @@ const simulateRequest = () => {
<style scoped>
.cache-architecture-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -166,7 +166,7 @@ const simulateRequest = () => {
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
padding: 0.75rem;
border-radius: 12px;
transition: all 0.3s;
}
@@ -316,7 +316,7 @@ const simulateRequest = () => {
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
@@ -142,10 +142,10 @@ const layers = [
<style scoped>
.cache-architecture-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -185,7 +185,7 @@ const layers = [
.layer {
width: 100%;
max-width: 400px;
border-radius: 8px;
border-radius: 6px;
transition: all 0.3s;
}
@@ -141,10 +141,10 @@ const simulateFlow = () => {
<style scoped>
.cache-hierarchy-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
max-width: 600px;
}
@@ -187,8 +187,8 @@ const simulateFlow = () => {
max-width: 400px;
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
cursor: pointer;
transition: all 0.3s;
}
@@ -262,8 +262,8 @@ const simulateFlow = () => {
.data-flow {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 1rem;
border: 1px solid var(--vp-c-divider);
}
@@ -288,7 +288,7 @@ const simulateFlow = () => {
gap: 1rem;
padding: 0.75rem 1rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
transition: all 0.3s;
width: 100%;
@@ -335,7 +335,7 @@ const simulateFlow = () => {
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
@@ -349,8 +349,8 @@ const simulateFlow = () => {
.comparison-table {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 1rem;
border: 1px solid var(--vp-c-divider);
}
@@ -338,7 +338,7 @@ onUnmounted(() => {
.cache-entry {
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
transition: all 0.3s;
}
@@ -456,7 +456,7 @@ onUnmounted(() => {
.action-btn {
padding: 0.75rem 1rem;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -508,7 +508,7 @@ onUnmounted(() => {
flex-direction: column;
gap: 0.5rem;
max-height: 200px;
overflow-y: auto;
}
.event {
@@ -555,9 +555,9 @@ onUnmounted(() => {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
}
@@ -246,10 +246,10 @@ onUnmounted(() => {
<style scoped>
.cache-monitoring-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -288,7 +288,7 @@ onUnmounted(() => {
.metric-card {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
display: flex;
gap: 0.75rem;
@@ -367,7 +367,7 @@ onUnmounted(() => {
.request-log {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
margin-bottom: 1rem;
overflow: hidden;
}
@@ -400,7 +400,7 @@ onUnmounted(() => {
.log-list {
max-height: 180px;
overflow-y: auto;
padding: 0.5rem;
}
@@ -191,10 +191,10 @@ const patterns = [
<style scoped>
.cache-pattern-comparison-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -236,7 +236,7 @@ const patterns = [
padding: 0.75rem 1rem;
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -275,9 +275,9 @@ const patterns = [
}
.pattern-header {
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
}
@@ -296,9 +296,9 @@ const patterns = [
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
}
@@ -331,8 +331,8 @@ const patterns = [
}
.pros, .cons {
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
}
.pros {
@@ -359,8 +359,8 @@ const patterns = [
.comparison-table {
background: var(--vp-c-bg);
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
margin-bottom: 1rem;
}
@@ -427,7 +427,7 @@ const simulateWriteBehind = async () => {
padding: 0.75rem 1.5rem;
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -511,7 +511,7 @@ const simulateWriteBehind = async () => {
gap: 1rem;
padding: 0.75rem 1.5rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
transition: all 0.3s;
}
@@ -576,8 +576,8 @@ const simulateWriteBehind = async () => {
}
.branch {
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
transition: all 0.3s;
}
@@ -621,7 +621,7 @@ const simulateWriteBehind = async () => {
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -658,9 +658,9 @@ const simulateWriteBehind = async () => {
}
.arch-block {
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.arch-title {
@@ -679,7 +679,7 @@ const simulateWriteBehind = async () => {
.flow-box {
padding: 0.75rem 1.5rem;
background: white;
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
font-weight: 600;
}
@@ -759,8 +759,8 @@ const simulateWriteBehind = async () => {
.code-block {
background: #1e293b;
color: #e2e8f0;
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
overflow-x: auto;
font-size: 0.85rem;
line-height: 1.6;
@@ -495,7 +495,7 @@ initializeCacheItems()
.problem-btn {
flex: 1;
min-width: 150px;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 10px;
@@ -578,7 +578,7 @@ initializeCacheItems()
gap: 0.75rem;
padding: 0.75rem 1.5rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
min-width: 250px;
justify-content: center;
@@ -622,7 +622,7 @@ initializeCacheItems()
background: #ef4444;
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -638,7 +638,7 @@ initializeCacheItems()
background: #22c55e;
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -684,9 +684,9 @@ initializeCacheItems()
.hotkey-badge {
text-align: center;
padding: 1rem;
padding: 0.75rem;
background: #fef3c7;
border-radius: 8px;
border-radius: 6px;
border: 2px solid #f59e0b;
font-weight: 600;
}
@@ -700,8 +700,8 @@ initializeCacheItems()
.concurrent-requests {
background: var(--vp-c-bg-soft);
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
}
.requests-title {
@@ -751,9 +751,9 @@ initializeCacheItems()
.mutex-visual {
text-align: center;
padding: 1rem;
padding: 0.75rem;
background: #eff6ff;
border-radius: 8px;
border-radius: 6px;
border: 2px solid #3b82f6;
}
@@ -809,9 +809,9 @@ initializeCacheItems()
.mass-explosion {
text-align: center;
padding: 1rem;
padding: 0.75rem;
background: #fef2f2;
border-radius: 8px;
border-radius: 6px;
border: 2px solid #ef4444;
}
@@ -831,9 +831,9 @@ initializeCacheItems()
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
transition: all 0.3s;
}
@@ -873,9 +873,9 @@ initializeCacheItems()
}
.solution-item {
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
border-left: 4px solid var(--vp-c-brand);
}
@@ -23,7 +23,7 @@ const description = ref('展示电商系统中的多级缓存架构设计,包
<style scoped>
.demo-container {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
background: var(--vp-c-bg-soft);
}
@@ -328,7 +328,7 @@ const reset = () => {
.app-instance {
background: #eff6ff;
padding: 0.75rem;
border-radius: 8px;
border-radius: 6px;
margin-bottom: 0.5rem;
border: 1px solid #bfdbfe;
}
@@ -416,7 +416,7 @@ const reset = () => {
.redis-cluster {
background: #fef2f2;
padding: 0.75rem;
border-radius: 8px;
border-radius: 6px;
border: 1px solid #fecaca;
}
@@ -462,7 +462,7 @@ const reset = () => {
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.metric {
@@ -505,7 +505,7 @@ const reset = () => {
.pros,
.cons {
padding: 0.75rem;
border-radius: 8px;
border-radius: 6px;
}
.pros {
@@ -555,7 +555,7 @@ const reset = () => {
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
@@ -581,9 +581,9 @@ const reset = () => {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
border-left: 4px solid var(--vp-c-brand);
}
@@ -294,9 +294,9 @@ initializeProducts()
.description {
margin-bottom: 1.5rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border-left: 4px solid var(--vp-c-brand);
}
@@ -330,7 +330,7 @@ initializeProducts()
gap: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border-left: 3px solid #94a3b8;
}
@@ -365,8 +365,8 @@ initializeProducts()
.cache-state {
background: var(--vp-c-bg);
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
}
.cache-title {
@@ -425,7 +425,7 @@ initializeProducts()
.product {
background: var(--vp-c-bg);
padding: 0.75rem;
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
text-align: center;
transition: all 0.3s;
@@ -466,7 +466,7 @@ initializeProducts()
gap: 0.75rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
}
.icon {
@@ -491,7 +491,7 @@ initializeProducts()
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -339,7 +339,7 @@ const makeRequest = async () => {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 10px;
border: 2px solid var(--vp-c-divider);
@@ -369,7 +369,7 @@ const makeRequest = async () => {
justify-content: center;
background: var(--vp-c-brand);
color: white;
border-radius: 8px;
border-radius: 6px;
font-weight: 700;
font-size: 1.1rem;
flex-shrink: 0;
@@ -458,7 +458,7 @@ const makeRequest = async () => {
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -478,7 +478,7 @@ const makeRequest = async () => {
padding: 0.75rem;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
}
@@ -509,7 +509,7 @@ const makeRequest = async () => {
align-items: center;
gap: 1rem;
padding: 0.75rem;
border-radius: 8px;
border-radius: 6px;
font-size: 0.85rem;
}
@@ -551,7 +551,7 @@ const makeRequest = async () => {
.stat-card {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
text-align: center;
border: 1px solid var(--vp-c-divider);
}
@@ -598,9 +598,9 @@ const makeRequest = async () => {
.explanation-item {
display: flex;
gap: 1rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.item-icon {
@@ -479,7 +479,7 @@ const resetDemo = () => {
.layer {
width: 100%;
max-width: 400px;
padding: 1rem;
padding: 0.75rem;
border-radius: 10px;
border: 2px solid var(--vp-c-divider);
transition: all 0.3s;
@@ -585,7 +585,7 @@ const resetDemo = () => {
min-width: 150px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
font-size: 0.9rem;
}
@@ -594,7 +594,7 @@ const resetDemo = () => {
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -615,16 +615,16 @@ const resetDemo = () => {
background: var(--vp-c-bg);
color: var(--vp-c-text-1);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.query-result {
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
margin-bottom: 1rem;
border-left: 4px solid var(--vp-c-brand);
}
@@ -742,8 +742,8 @@ const resetDemo = () => {
.metric-card {
background: var(--vp-c-bg-soft);
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
text-align: center;
}
@@ -772,8 +772,8 @@ const resetDemo = () => {
.hit-rate-display {
background: var(--vp-c-bg-soft);
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
margin-bottom: 1rem;
}
@@ -812,8 +812,8 @@ const resetDemo = () => {
.cache-stats-detail {
background: var(--vp-c-bg-soft);
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
}
.stats-title {
@@ -867,9 +867,9 @@ const resetDemo = () => {
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.feature-icon {
@@ -905,8 +905,8 @@ const resetDemo = () => {
.code-block {
background: #1e293b;
color: #e2e8f0;
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
overflow-x: auto;
font-size: 0.8rem;
line-height: 1.6;