新增：《使用 IntelliJ IDEA 进行远程程序调试》

docs/.vitepress/theme/components/Badge.vue

@@ -1,47 +1,49 @@
 <script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    text?: string,
-    type?: 'warning' | 'tip' | 'error' | 'info'
-    vertical?: 'top' | 'middle'
-  }>(), {
-    text: '',
-    type: 'tip',
-    vertical: 'top',
-  }
-);
+defineProps<{
+  text?: string
+  type?: 'info' | 'tip' | 'warning' | 'danger'
+}>()
 </script>
 
 <template>
-  <span
-    class='VPBadge'
-    :class="[ `VPBadge-type-${props.type}` ]"
-    :style="{ 'vertical-align': props.vertical }"
-  >
-    <slot>{{ props.text }}</slot>
+  <span class="VPBadge" :class="type ?? 'tip'">
+    <slot>{{ text }}</slot>
   </span>
 </template>
-
 <style scoped>
 .VPBadge {
   display: inline-block;
-  font-size: 14px;
-  height: 18px;
+  margin-left: 2px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 0 8px;
   line-height: 18px;
-  border-radius: 3px;
-  padding: 0 6px;
-  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  transform: translateY(-2px);
 }
-.VPBadge.VPBadge-type-warning {
-  background-color: var(--vp-c-badge-type-warning);
+h2 .VPBadge {
+  border-radius: 11px;
+  line-height: 20px;
 }
-.VPBadge.VPBadge-type-tip {
-  background-color: var(--vp-c-badge-type-tip);
+.VPBadge.info {
+  border-color: var(--vp-badge-info-border);
+  color: var(--vp-badge-info-text);
+  background-color: var(--vp-badge-info-bg);
 }
-.VPBadge.VPBadge-type-error {
-  background-color: var(--vp-c-badge-type-error);
+.VPBadge.tip {
+  border-color: var(--vp-badge-tip-border);
+  color: var(--vp-badge-tip-text);
+  background-color: var(--vp-badge-tip-bg);
 }
-.VPBadge.VPBadge-type-info {
-  background-color: var(--vp-c-badge-type-info);
+.VPBadge.warning {
+  border-color: var(--vp-badge-warning-border);
+  color: var(--vp-badge-warning-text);
+  background-color: var(--vp-badge-warning-bg);
+}
+.VPBadge.danger {
+  border-color: var(--vp-badge-danger-border);
+  color: var(--vp-badge-danger-text);
+  background-color: var(--vp-badge-danger-bg);
 }
 </style>