dev

frontend/src/components/calc/slider/index.vue

@@ -28,7 +28,12 @@ export default defineComponent({
     showPercent: {
       type: Boolean,
       default: true
+    },
+    formatValue: {
+      type: Function,
+      default: undefined
     }
+
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
@@ -76,35 +81,33 @@ export default defineComponent({
         ]}
       >
         <div
-          class="flex-1 h-1 bg-[#122438] rounded relative"
+          class="flex-1 h-1 bg-[#4D524D] relative"
           ref={runwayRef}
         >
           <div
-            class="h-1 bg-[#c6b083] rounded absolute left-0 top-0"
+            class="h-1 bg-[#8E6D28] absolute left-0 top-0"
             style={{ width: `${percentage.value}%` }}
           ></div>
           <div
             class="h-6 w-6 absolute top-1/2 -translate-y-1/2 bg-transparent text-center select-none"
-            style={{ left: `${percentage.value}%` }}
+            style={{ left: `calc(${percentage.value}% - 0.75rem)` }}
             ref={buttonRef}
           >
             <div class={[
               'w-4 h-4 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
               'bg-gradient-to-b from-[#223768] to-[#122438]',
-              'border border-[#755f44] rounded-full transition-all duration-200',
+              'border border-solid border-[#937639] rounded-full transition-all duration-200',
               'shadow-[0_2px_4px_rgba(0,0,0,0.2)]',
-              'hover:(bg-gradient-to-b from-[#2d4e9f] to-[#153051] border-[#e3c18a] scale-110)',
-              'active:(bg-gradient-to-b from-[#2d4e9f] to-[#122438] border-[#e3c18a])',
               { 'bg-gradient-to-b from-[#353535] to-[#1c1c1c] border-[#414141]': props.disabled }
             ]}></div>
           </div>
         </div>
         {props.showPercent && (
           <div class={[
-            'min-w-[45px] text-right text-sm font-medium',
+            'w-auto min-w-5 text-center text-sm font-medium',
             props.disabled ? 'text-[#696969]' : 'text-[#e9c556]'
           ]}>
-            {percentage.value.toFixed(0)}%
+            {props.formatValue ? props.formatValue(modelValue.value) : `${percentage.value.toFixed(0)}%`}
           </div>
         )}
       </div>

frontend/src/components/dnf/Equipment/List/index.vue

@@ -1,12 +1,23 @@
 <template>
-  <div class="pos-relative w-300px h-full">
-    <template v-for="part in infoStore.parts" :key="part">
+  <div
+    class="pos-relative w-264px h-full"
+    :style="{ backgroundImage: withBg ? `url(${getImageURL('/common/head.png')})` : 'none' }"
+  >
+    <template v-for="part in parts" :key="part">
       <div
         class="pos-absolute text-white/50 w-26px h-26px border-1px border-solid border-#7a7a7a/50 flex items-center justify-center"
         :style="infoStyle(part)"
         @click="choosePart(part)"
       >
-        {{ partName(part) }}
+        <template v-if="detail?.[part]?.id">
+          <EquipmentIcon :equipment="equ(detail[part].id)" />
+        </template>
+        <template v-else>
+          {{ partName(part) }}
+        </template>
+      </div>
+      <div v-if="detail?.[part]?.fusion" class="pos-absolute" :style="fusionStyle(part)">
+        <EquipmentIcon :equipment="stones(detail[part].fusion)" />
       </div>
     </template>
   </div>
@@ -15,19 +26,51 @@
 <script lang="ts" setup name="EquList">
 import { getImageURL } from '@/utils/images'
 import { useVModel } from '@vueuse/core'
-import { useInfoStore, useConfigStore } from '@/stores'
+import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
+import { useInfoStore, useConfigStore, type IConfigEquip } from '@/stores'
 
 const props = defineProps({
   part: {
     type: String,
     default: '',
-  }
+  },
+  withBg: {
+    type: Boolean,
+    default: true,
+  },
+  withPet: {
+    type: Boolean,
+    default: true,
+  },
+  detail: {
+    type: Object as PropType<Record<string, IConfigEquip>>,
+  },
 })
 const partModelValue = useVModel(props, 'part')
 const infoStore = useInfoStore()
 
+const parts = computed(() => {
+  const configStore = useConfigStore()
+  const parts = infoStore.parts.filter((part) => {
+    if (part == '宠物' && !props.withPet) return false
+    if (configStore.config.equips[part]) {
+      return true
+    }
+    return false
+  })
+  return parts
+})
+
+const equ = (id: string) => {
+  return infoStore.equips.find((e) => e.id == id)
+}
+
+const stones = (id: string) => {
+  return infoStore.stones.find((e) => e.id == id)
+}
+
 const infoStyle = (part: string) => {
-  let x = 28
+  let x = 10
   let y = 5
   let index = infoStore.parts.findIndex((p) => p == part)
   if (index == 13) {
@@ -49,6 +92,30 @@ const infoStyle = (part: string) => {
   return style
 }
 
+const fusionStyle = (part: string) => {
+  let x = 0
+  let y = 15
+  let index = infoStore.parts.findIndex((p) => p == part)
+
+  if (index >= 5 && index <= 12) {
+    x += 179
+    index -= 5
+  }
+
+  if (index == 13) {
+    index = 5
+  }
+
+  x += (index % 2) * 39
+  y += Math.floor(index / 2) * 34
+
+  return {
+    left: `${x}px`,
+    top: `${y}px`,
+    zIndex: 7,
+    transform: 'scale(0.6)',
+  }
+}
 const choosePart = (part: string) => {
   partModelValue.value = part
 }