delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update border-radius and padding values across components

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue
+9 -9
View File
@@ -197,12 +197,12 @@ const testAsyncCall = () => {
<style scoped>
.coupling-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;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -272,16 +272,16 @@ const testAsyncCall = () => {
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
margin-bottom: 0.75rem;
}
.service-box {
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-brand);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
text-align: center;
min-width: 140px;
@@ -366,7 +366,7 @@ const testAsyncCall = () => {
.mq-box {
background: var(--vp-c-brand-soft);
border: 2px solid var(--vp-c-brand);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
text-align: center;
min-width: 120px;
docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue
+10 -10
View File
@@ -261,11 +261,11 @@ addMessage = addMessageWithAutoProcess
.dlq-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
border-radius: 6px;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -337,7 +337,7 @@ addMessage = addMessageWithAutoProcess
.queue-box {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
overflow: hidden;
}
@@ -361,7 +361,7 @@ addMessage = addMessageWithAutoProcess
.message-list {
max-height: 150px;
overflow-y: auto;
padding: 0.5rem;
}
@@ -446,8 +446,8 @@ addMessage = addMessageWithAutoProcess
.processor-box {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
text-align: center;
min-height: 150px;
display: flex;
@@ -507,7 +507,7 @@ addMessage = addMessageWithAutoProcess
.stat-card {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
text-align: center;
border: 1px solid var(--vp-c-divider);
docs/.vitepress/theme/components/appendix/queue-design/DecouplingDemo.vue
+8 -8
View File
@@ -253,7 +253,7 @@ const testAsyncCall = () => {
padding: 12px 16px;
border: 2px solid var(--vp-c-divider);
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
@@ -323,7 +323,7 @@ const testAsyncCall = () => {
padding: 8px 12px;
background: var(--vp-c-danger);
color: white;
border-radius: 8px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
}
@@ -341,7 +341,7 @@ const testAsyncCall = () => {
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 8px;
border-radius: 6px;
transition: all 0.3s;
}
@@ -401,7 +401,7 @@ const testAsyncCall = () => {
padding: 8px 12px;
background: var(--vp-c-success);
color: white;
border-radius: 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
@@ -422,7 +422,7 @@ const testAsyncCall = () => {
.consumer-box {
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-brand);
border-radius: 8px;
border-radius: 6px;
padding: 12px;
text-align: center;
transition: all 0.3s;
@@ -458,7 +458,7 @@ const testAsyncCall = () => {
align-items: flex-start;
gap: 10px;
padding: 12px;
border-radius: 8px;
border-radius: 6px;
font-size: 14px;
line-height: 1.6;
}
@@ -480,7 +480,7 @@ const testAsyncCall = () => {
width: 100%;
padding: 12px;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
@@ -508,7 +508,7 @@ const testAsyncCall = () => {
.info-box {
background: var(--vp-c-bg-alt);
padding: 16px;
border-radius: 8px;
border-radius: 6px;
font-size: 14px;
color: var(--vp-c-text-2);
margin-top: 16px;
docs/.vitepress/theme/components/appendix/queue-design/DelayedMessageDemo.vue
+11 -11
View File
@@ -333,7 +333,7 @@ onUnmounted(() => {
padding: 0.6rem 1rem;
border: 2px solid var(--vp-c-divider);
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
@@ -369,7 +369,7 @@ onUnmounted(() => {
.result-section {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
@@ -377,7 +377,7 @@ onUnmounted(() => {
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.scenario-name {
@@ -450,7 +450,7 @@ onUnmounted(() => {
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -470,7 +470,7 @@ onUnmounted(() => {
position: relative;
height: 150px;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 0.5rem;
margin-top: 0.5rem;
}
@@ -510,7 +510,7 @@ onUnmounted(() => {
.msg-bubble {
background: white;
border: 2px solid var(--vp-c-brand);
border-radius: 8px;
border-radius: 6px;
padding: 0.5rem;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -565,9 +565,9 @@ onUnmounted(() => {
.result-box {
max-height: 250px;
overflow-y: auto;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
}
@@ -611,7 +611,7 @@ onUnmounted(() => {
.use-cases {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
margin-bottom: 1rem;
border: 1px solid var(--vp-c-divider);
}
@@ -629,7 +629,7 @@ onUnmounted(() => {
.case-card {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
text-align: center;
}
@@ -654,7 +654,7 @@ onUnmounted(() => {
.implementation {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue
+9 -9
View File
@@ -365,7 +365,7 @@ const pressMultipleTimes = () => {
padding: 12px 16px;
border: 2px solid var(--vp-c-divider);
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
@@ -450,7 +450,7 @@ const pressMultipleTimes = () => {
align-items: center;
gap: 8px;
padding: 16px;
border-radius: 8px;
border-radius: 6px;
transition: all 0.3s;
}
@@ -494,7 +494,7 @@ const pressMultipleTimes = () => {
.control-panel {
background: var(--vp-c-bg);
padding: 16px;
border-radius: 8px;
border-radius: 6px;
margin-bottom: 16px;
}
@@ -606,7 +606,7 @@ const pressMultipleTimes = () => {
.result-log {
background: var(--vp-c-bg);
padding: 16px;
border-radius: 8px;
border-radius: 6px;
margin-bottom: 16px;
}
@@ -618,7 +618,7 @@ const pressMultipleTimes = () => {
.log-list {
max-height: 200px;
overflow-y: auto;
}
.log-item {
@@ -667,7 +667,7 @@ const pressMultipleTimes = () => {
.comparison-item {
padding: 16px;
border-radius: 8px;
border-radius: 6px;
text-align: center;
}
@@ -730,7 +730,7 @@ const pressMultipleTimes = () => {
padding: 16px;
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
@@ -831,7 +831,7 @@ const pressMultipleTimes = () => {
.explanation-box {
background: var(--vp-c-bg);
padding: 16px;
border-radius: 8px;
border-radius: 6px;
}
.explanation-title {
@@ -865,7 +865,7 @@ const pressMultipleTimes = () => {
padding: 16px;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 8px;
border-radius: 6px;
font-size: 14px;
color: var(--vp-c-text-1);
margin-top: 16px;
docs/.vitepress/theme/components/appendix/queue-design/MQArchitectureDemo.vue
+1 -1
View File
@@ -22,7 +22,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);
}
docs/.vitepress/theme/components/appendix/queue-design/MQComparisonDemo.vue
+1 -1
View File
@@ -22,7 +22,7 @@ const description = ref('对比主流消息队列产品（RabbitMQ、Kafka、Roc
<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);
}
docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComparisonDemo.vue
+4 -4
View File
@@ -361,7 +361,7 @@ const selectMQ = (name) => {
padding: 0.75rem 1rem;
border: 2px solid var(--vp-c-divider);
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -420,8 +420,8 @@ const selectMQ = (name) => {
.metric {
background: var(--vp-c-bg-soft);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
}
.metric-label {
@@ -547,7 +547,7 @@ th.highlight {
.recommendation {
background: rgba(59, 130, 246, 0.1);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
border: 1px solid rgba(59, 130, 246, 0.3);
}
docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComponentsDemo.vue
+3 -3
View File
@@ -280,7 +280,7 @@ const consumeMessage = () => {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
text-align: center;
transition: all 0.3s;
}
@@ -421,7 +421,7 @@ const consumeMessage = () => {
.detail-card {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
@@ -469,7 +469,7 @@ const consumeMessage = () => {
.message-flow {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
docs/.vitepress/theme/components/appendix/queue-design/MessageQueueDemo.vue
+3 -3
View File
@@ -231,7 +231,7 @@ const consumeMessage = () => {
background: var(--vp-c-brand);
color: #fff;
border: none;
border-radius: 8px;
border-radius: 6px;
padding: 0.6rem 1.2rem;
cursor: pointer;
font-weight: 600;
@@ -267,7 +267,7 @@ const consumeMessage = () => {
border-radius: 10px;
min-height: 200px;
max-height: 280px;
overflow-y: auto;
padding: 0.75rem;
display: flex;
flex-direction: column;
@@ -336,7 +336,7 @@ const consumeMessage = () => {
.compare-col {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
docs/.vitepress/theme/components/appendix/queue-design/PeakShavingDemo.vue
+4 -4
View File
@@ -386,7 +386,7 @@ onUnmounted(() => {
.controls-panel {
background: var(--vp-c-bg);
padding: 16px;
border-radius: 8px;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
display: flex;
flex-direction: column;
@@ -480,7 +480,7 @@ onUnmounted(() => {
.metric-item {
background: var(--vp-c-bg);
padding: 12px;
border-radius: 8px;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
}
@@ -534,7 +534,7 @@ onUnmounted(() => {
flex: 1;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 12px;
display: flex;
flex-direction: column;
@@ -581,7 +581,7 @@ canvas {
margin-top: 16px;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 8px;
border-radius: 6px;
padding: 12px;
display: flex;
gap: 12px;
docs/.vitepress/theme/components/appendix/queue-design/PointToPointVsPubSubDemo.vue
+6 -6
View File
@@ -247,7 +247,7 @@ const processMessage = (consumer) => {
padding: 0.75rem 1rem;
border: 2px solid var(--vp-c-divider);
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -267,7 +267,7 @@ const processMessage = (consumer) => {
margin-bottom: 1.5rem;
padding: 0.75rem 1rem;
background: rgba(59, 130, 246, 0.1);
border-radius: 8px;
border-radius: 6px;
}
.desc-text {
@@ -304,7 +304,7 @@ const processMessage = (consumer) => {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-brand);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
text-align: center;
min-width: 140px;
margin-bottom: 0.75rem;
@@ -335,7 +335,7 @@ const processMessage = (consumer) => {
background: var(--vp-c-brand);
color: #fff;
border: none;
border-radius: 8px;
border-radius: 6px;
padding: 0.6rem 1.2rem;
cursor: pointer;
font-weight: 600;
@@ -370,7 +370,7 @@ const processMessage = (consumer) => {
.consumer-box {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
text-align: center;
transition: all 0.3s;
@@ -433,7 +433,7 @@ tr:hover td {
.example-scenario {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
docs/.vitepress/theme/components/appendix/queue-design/ProducerConsumerDemo.vue
+1 -1
View File
@@ -22,7 +22,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);
}
docs/.vitepress/theme/components/appendix/queue-design/PubSubDemo.vue
+10 -10
View File
@@ -397,7 +397,7 @@ const clearLog = () => {
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
width: 100%;
}
@@ -419,7 +419,7 @@ const clearLog = () => {
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -439,7 +439,7 @@ const clearLog = () => {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
text-align: center;
min-width: 160px;
transition: all 0.3s;
@@ -490,7 +490,7 @@ const clearLog = () => {
.subscriber-card {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
transition: all 0.3s;
}
@@ -540,7 +540,7 @@ const clearLog = () => {
.real-time-log {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
margin-bottom: 1.5rem;
}
@@ -573,7 +573,7 @@ const clearLog = () => {
.log-content {
max-height: 250px;
overflow-y: auto;
background: var(--vp-c-bg-soft);
border-radius: 6px;
padding: 0.75rem;
@@ -583,7 +583,7 @@ const clearLog = () => {
.log-empty {
text-align: center;
color: var(--vp-c-text-3);
padding: 1rem;
padding: 0.75rem;
}
.log-entry {
@@ -617,7 +617,7 @@ const clearLog = () => {
.use-cases {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
@@ -634,8 +634,8 @@ const clearLog = () => {
.case-card {
background: var(--vp-c-bg-soft);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
text-align: center;
}
docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue
+7 -7
View File
@@ -345,7 +345,7 @@ const simulateConsume = () => {
margin-bottom: 20px;
padding: 20px;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.component {
@@ -388,7 +388,7 @@ const simulateConsume = () => {
align-items: center;
gap: 6px;
padding: 10px;
border-radius: 8px;
border-radius: 6px;
transition: all 0.3s;
}
@@ -483,7 +483,7 @@ const simulateConsume = () => {
.replication-info {
padding: 16px;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 12px;
@@ -514,7 +514,7 @@ const simulateConsume = () => {
margin-bottom: 20px;
padding: 20px;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.flow-step {
@@ -579,7 +579,7 @@ const simulateConsume = () => {
padding: 16px;
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
text-align: center;
}
@@ -608,7 +608,7 @@ const simulateConsume = () => {
.control-panel {
padding: 16px;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.control-item {
@@ -693,7 +693,7 @@ const simulateConsume = () => {
padding: 16px;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 8px;
border-radius: 6px;
font-size: 14px;
color: var(--vp-c-text-1);
}
docs/.vitepress/theme/components/appendix/queue-design/SeckillSystemDemo.vue
+15 -15
View File
@@ -448,14 +448,14 @@ onUnmounted(() => {
display: flex;
gap: 0.75rem;
justify-content: center;
margin: 1rem 0;
margin: 0.5rem 0;
}
.start-btn,
.reset-btn {
padding: 0.75rem 2rem;
border: none;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
@@ -495,7 +495,7 @@ onUnmounted(() => {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
}
.layer-title {
@@ -513,7 +513,7 @@ onUnmounted(() => {
.stat-box {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
text-align: center;
}
@@ -546,7 +546,7 @@ onUnmounted(() => {
grid-column: 1 / -1;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.stock-bar {
@@ -600,7 +600,7 @@ onUnmounted(() => {
.queue-box {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
}
@@ -641,8 +641,8 @@ onUnmounted(() => {
.real-time-stats {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
border: 1px solid var(--vp-c-divider);
}
@@ -661,7 +661,7 @@ onUnmounted(() => {
text-align: center;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.stat-item .stat-label {
@@ -679,8 +679,8 @@ onUnmounted(() => {
.log-section {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
border: 1px solid var(--vp-c-divider);
}
@@ -707,9 +707,9 @@ onUnmounted(() => {
.log-content {
max-height: 300px;
overflow-y: auto;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
font-size: 0.8rem;
}
@@ -717,7 +717,7 @@ onUnmounted(() => {
.log-empty {
text-align: center;
color: var(--vp-c-text-3);
padding: 1rem;
padding: 0.75rem;
}
.log-entry {
@@ -759,7 +759,7 @@ onUnmounted(() => {
.key-points {
background: rgba(59, 130, 246, 0.1);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
border: 1px solid rgba(59, 130, 246, 0.3);
}