feat: revamp demo

demo/examples/Example.vue

@@ -1,15 +1,49 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface ExampleProps {
+  id: string;
+  title: string;
+  desc?: string | string[];
+  split?: boolean;
+}
+
+const props = defineProps<ExampleProps>();
+
+const badges = computed<string[]>(() => {
+  const { desc } = props;
+  if (!desc) {
+    return [];
+  }
+  if (Array.isArray(desc)) {
+    return desc.map((value) => value.trim()).filter(Boolean);
+  }
+
+  let text = desc.trim();
+  const wrapped = text.match(/^\s*\((.*)\)\s*$/);
+  if (wrapped) {
+    text = wrapped[1];
+  }
+
+  return text
+    .split(/\s*·\s*|\s*,\s*|\s*&\s*|\s+and\s+/i)
+    .map((part) => part.trim())
+    .filter(Boolean);
+});
+</script>
+
 <template>
   <h3 :id="id">
-    <a :href="`#${id}`">
-      {{ title }}
-      <small v-if="desc">{{ desc }}</small>
-    </a>
+    <a :href="`#${id}`">{{ title }}</a>
   </h3>
+  <div v-if="badges.length" class="badges">
+    <span v-for="(b, i) in badges" :key="i" class="badge">{{ b }}</span>
+  </div>
   <section>
-    <figure class="fig hero" v-if="!split">
+    <figure v-if="!split" class="fig hero">
       <slot />
     </figure>
-    <div class="split" v-else>
+    <div v-else class="split">
       <figure class="fig half">
         <slot name="start" />
       </figure>
@@ -21,38 +55,57 @@
   </section>
 </template>
 
-<script setup>
-defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  desc: String,
-  split: Boolean,
-});
-</script>
-
 <style>
 .fig {
   display: flex;
   justify-content: center;
   width: fit-content;
-  margin: 2em auto;
+  margin: 2rem auto;
 
-  > .echarts {
-    width: calc(60vw + 4em);
+  & > .echarts {
+    width: min(calc(64vw + 4rem), 980px);
     height: 360px;
-    max-width: 720px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
+    max-width: 980px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--r-l);
+    box-shadow: none;
   }
 }
 
+.badges {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 0.5rem;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0.26rem 0.72rem;
+  font-weight: 500;
+  font-size: 0.78rem;
+  line-height: 1;
+  color: var(--text);
+  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2) 70%);
+  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border) 60%);
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+.badge::before {
+  content: "#";
+  display: inline-block;
+  font-weight: 700;
+  font-size: 0.95rem;
+  line-height: 1;
+  color: var(--accent);
+}
+
 .split {
   display: flex;
   justify-content: center;
@@ -63,15 +116,23 @@ defineProps({
   }
 }
 
+.actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-top: 0.5rem;
+}
+
 @media (max-width: 980px) {
   .fig {
-    width: 100vw;
-    margin: 1em auto;
+    width: 100%;
+    margin: 1rem auto;
 
     .echarts {
       width: 100%;
       min-width: 0;
-      height: 60vw;
+      height: 64vw;
       border: none;
       border-radius: 0;
       box-shadow: none;
@@ -82,8 +143,8 @@ defineProps({
 @media (min-width: 980px) {
   .fig.half {
     .echarts {
-      width: 28vw;
-      min-width: 240px;
+      width: 32vw;
+      min-width: 280px;
       height: 180px;
     }