feat(routes): add edit/delete actions on RouteCard

src/components/RouteCard.vue

@@ -1,12 +1,16 @@
 <template>
-  <article>
+  <article class="route-card">
     <div class="route-map" :class="mapClass">
       <svg><use href="#i-route" /></svg>
       <span>{{ distance }}</span>
     </div>
-    <div>
+    <div class="route-card-body">
       <strong>{{ name }}</strong>
       <small>{{ waypoints }} 个航点 · 采集于 {{ collectedAt }}</small>
+      <div class="route-card-actions" @click.stop>
+        <t-button variant="text" theme="primary" type="button" @click="emit('edit')">编辑</t-button>
+        <t-button variant="text" theme="danger" type="button" @click="emit('delete')">删除</t-button>
+      </div>
     </div>
   </article>
 </template>
@@ -19,4 +23,6 @@ defineProps({
   collectedAt: { type: String, required: true },
   mapClass: { type: String, required: true }
 })
+
+const emit = defineEmits(['edit', 'delete'])
 </script>

src/styles/prototype.css

@@ -334,8 +334,12 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width:
 .route-map::after { content: ""; position: absolute; width: 58%; height: 46%; border: 2px dashed rgba(108,188,255,.95); border-radius: 48% 35% 52% 30%; transform: rotate(-8deg); }
 .route-map svg { z-index: 1; width: 25px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
 .route-map span { position: absolute; z-index: 2; right: 8px; bottom: 8px; padding: 4px 7px; border-radius: 3px; background: rgba(29,45,57,.82); font-size: 10px; }
+.route-grid article > .route-card-body,
 .route-grid article > div:last-child{ padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; }
-.route-grid strong { font-size: 12px; }.route-grid small { color: var(--muted); font-size: 10px; }
+.route-grid strong{ font-size: 12px; }
+.route-grid small{ color: var(--muted); font-size: 10px; }
+.route-card-actions{ margin-top: 8px; display: flex; align-items: center; gap: 2px; }
+.route-card-actions .t-button{ height: 28px; }
 .route-library-view[hidden], .route-editor[hidden] { display: none !important; }
 .route-editor { height: 100%; min-height: 520px; display: flex; flex-direction: column; background: #fff; }
 .route-editor-header { height: 58px; min-height: 58px; padding: 0 14px; display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }