From b1424fb58266510ba4a725e2c584bd7a5500e2de Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sat, 25 Nov 2023 16:34:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B1=20=E5=AE=8C=E6=88=90=E5=B7=A6?=
 =?UTF-8?q?=E4=B8=8B=E5=91=BD=E5=BA=A7=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devCharacter/duc-detail-olb.vue           | 69 ++++++++++++++++++-
 .../devCharacter/duc-detail-overlay.vue       | 12 ++--
 2 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/src/components/devCharacter/duc-detail-olb.vue b/src/components/devCharacter/duc-detail-olb.vue
index 1aa3f238..b4591add 100644
--- a/src/components/devCharacter/duc-detail-olb.vue
+++ b/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>
diff --git a/src/components/devCharacter/duc-detail-overlay.vue b/src/components/devCharacter/duc-detail-overlay.vue
index 4e9b5834..259388dc 100644
--- a/src/components/devCharacter/duc-detail-overlay.vue
+++ b/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>