🌱 完成左下命座显示

src/components/devCharacter/duc-detail-olb.vue

@@ -1,2 +1,67 @@
-<template></template>
-<script lang="ts" setup></script>
+<template>
+  <div class="duc-dolb-box">
+    <div
+      v-for="constellation in constellations"
+      :key="constellation.pos"
+      :title="constellation.name"
+      class="duc-dolb-item"
+    >
+      <div v-if="!constellation.active" class="duc-dolb-lock">
+        <v-icon color="white">mdi-lock</v-icon>
+      </div>
+      <img class="duc-dolb-icon" :src="constellation.icon" alt="constellation" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+interface DucDetailOlbProps {
+  modelValue: TGApp.Sqlite.Character.RoleConstellation[];
+}
+
+const props = defineProps<DucDetailOlbProps>();
+const constellations = computed(() => {
+  return props.modelValue ?? [];
+});
+</script>
+<style>
+.duc-dolb-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 10px;
+}
+
+.duc-dolb-item {
+  position: relative;
+  display: flex;
+  width: 60px;
+  height: 60px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  backdrop-filter: blur(5px);
+  background: rgb(0 0 0/40%);
+}
+
+.duc-dolb-lock {
+  position: absolute;
+  display: flex;
+  width: 54px;
+  height: 54px;
+  align-items: center;
+  justify-content: center;
+  padding: 3px;
+  border-radius: 50%;
+  backdrop-filter: blur(5px);
+  background-color: rgb(0 0 0 / 40%);
+}
+
+.duc-dolb-icon {
+  width: 50px;
+  height: 50px;
+  padding: 5px;
+  border-radius: 50%;
+}
+</style>

src/components/devCharacter/duc-detail-overlay.vue

@@ -20,7 +20,7 @@
         </div>
         <!-- 左下命座 -->
         <div class="duc-doc-lb">
-          <DucDetailOlb :data="JSON.parse(props.dataVal.constellation)" />
+          <DucDetailOlb :model-value="JSON.parse(props.dataVal.constellation)" />
         </div>
       </div>
       <!-- 右侧箭头 -->
@@ -163,15 +163,13 @@ async function loadData(): Promise<void> {
   position: absolute;
   top: 10px;
   right: 10px;
-  padding: 10px;
+  padding: 5px;
 }
 
 .duc-doc-lb {
   position: absolute;
-  bottom: 20px;
-  left: 20px;
-  width: 300px;
-  height: 80px;
-  background: var(--common-shadow-2);
+  bottom: 10px;
+  left: 10px;
+  padding: 5px;
 }
 </style>