feat: update docs and components, fix DLQ demo bug
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
<div class="commits">
|
||||
<div v-for="c in local" :key="c" class="commit-dot">
|
||||
<span class="dot local"></span>
|
||||
<span class="hash">{{ c.substring(0,6) }}</span>
|
||||
<span class="hash">{{ c.substring(0, 6) }}</span>
|
||||
</div>
|
||||
<div v-if="local.length === 0" class="empty">无</div>
|
||||
</div>
|
||||
@@ -20,7 +20,7 @@
|
||||
<div class="commits">
|
||||
<div v-for="c in remote" :key="c" class="commit-dot">
|
||||
<span class="dot remote"></span>
|
||||
<span class="hash">{{ c.substring(0,6) }}</span>
|
||||
<span class="hash">{{ c.substring(0, 6) }}</span>
|
||||
</div>
|
||||
<div v-if="remote.length === 0" class="empty">无</div>
|
||||
</div>
|
||||
@@ -29,8 +29,16 @@
|
||||
|
||||
<div class="controls">
|
||||
<button @click="localCommit" class="btn">本地提交</button>
|
||||
<button @click="push" :disabled="local.length <= remote.length" class="btn">推送 Push</button>
|
||||
<button @click="pull" :disabled="!hasRemote" class="btn">拉取 Pull</button>
|
||||
<button
|
||||
@click="push"
|
||||
:disabled="local.length <= remote.length"
|
||||
class="btn"
|
||||
>
|
||||
推送 Push
|
||||
</button>
|
||||
<button @click="pull" :disabled="!hasRemote" class="btn">
|
||||
拉取 Pull
|
||||
</button>
|
||||
<button @click="reset" class="btn secondary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,35 +55,125 @@ const local = ref([])
|
||||
const remote = ref([])
|
||||
const hasRemote = ref(false)
|
||||
|
||||
const localCommit = () => { local.value.push(Math.random().toString(16).substr(2,7)) }
|
||||
const push = () => { remote.value.push(...local.value.slice(remote.value.length)); hasRemote.value = false }
|
||||
const pull = () => { if(hasRemote.value) local.value.push(Math.random().toString(16).substr(2,7)); hasRemote.value = false }
|
||||
const reset = () => { local.value = []; remote.value = []; hasRemote.value = false }
|
||||
const localCommit = () => {
|
||||
local.value.push(Math.random().toString(16).substr(2, 7))
|
||||
}
|
||||
const push = () => {
|
||||
remote.value.push(...local.value.slice(remote.value.length))
|
||||
hasRemote.value = false
|
||||
}
|
||||
const pull = () => {
|
||||
if (hasRemote.value) local.value.push(Math.random().toString(16).substr(2, 7))
|
||||
hasRemote.value = false
|
||||
}
|
||||
const reset = () => {
|
||||
local.value = []
|
||||
remote.value = []
|
||||
hasRemote.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.remote-demo { border: 1px solid var(--vp-c-divider); border-radius: 8px; background-color: var(--vp-c-bg-soft); padding: 1.5rem; margin: 1rem 0; }
|
||||
.repos { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
|
||||
.repo { border: 1px solid var(--vp-c-divider); border-radius: 8px; padding: 1rem; background: var(--vp-c-bg); }
|
||||
.header { font-weight: 600; margin-bottom: 0.5rem; }
|
||||
.commits { min-height: 80px; }
|
||||
.commit-dot { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
|
||||
.dot { width: 10px; height: 10px; border-radius: 50%; }
|
||||
.dot.local { background: #3b82f6; }
|
||||
.dot.remote { background: #10b981; }
|
||||
.hash { font-family: monospace; font-size: 0.875rem; color: var(--vp-c-text-2); }
|
||||
.sync { font-size: 2rem; text-align: center; }
|
||||
.empty { color: var(--vp-c-text-3); text-align: center; padding: 1rem; }
|
||||
.controls { display: flex; gap: 0.5rem; flex-wrap: wrap; }
|
||||
.btn { padding: 0.5rem 1rem; border: 1px solid var(--vp-c-brand); background: var(--vp-c-bg); color: var(--vp-c-brand); border-radius: 6px; cursor: pointer; }
|
||||
.btn:hover:not(:disabled) { background: var(--vp-c-brand); color: var(--vp-c-bg); }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn.secondary { border-color: var(--vp-c-divider); }
|
||||
.info-box { padding: 1rem; background: var(--vp-c-bg); border-left: 4px solid var(--vp-c-brand); border-radius: 4px; margin-top: 1rem; }
|
||||
.info-box p { margin: 0; color: var(--vp-c-text-1); }
|
||||
.remote-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.repos {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.repo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
.header {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.commits {
|
||||
min-height: 80px;
|
||||
}
|
||||
.commit-dot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.dot.local {
|
||||
background: #3b82f6;
|
||||
}
|
||||
.dot.remote {
|
||||
background: #10b981;
|
||||
}
|
||||
.hash {
|
||||
font-family: monospace;
|
||||
font-size: 0.875rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
.sync {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.empty {
|
||||
color: var(--vp-c-text-3);
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--vp-c-brand);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-brand);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
background: var(--vp-c-brand);
|
||||
color: var(--vp-c-bg);
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn.secondary {
|
||||
border-color: var(--vp-c-divider);
|
||||
}
|
||||
.info-box {
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-left: 4px solid var(--vp-c-brand);
|
||||
border-radius: 4px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.repos { grid-template-columns: 1fr; }
|
||||
.sync { transform: rotate(90deg); }
|
||||
.repos {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.sync {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user