dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

dev

Browse Source
This commit is contained in:
imelon
2025-04-19 17:58:45 +08:00
parent 3de6762c5f
commit f125c8c620
27 changed files with 736 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/calc/button/index.vue
+14 -2
View File
@@ -23,9 +23,14 @@ export default defineComponent({
type: {
type: String,
default: "primary"
},
disabled: {
type: Boolean,
default: false
}
},
setup(props, { slots }) {
emits: ["click"],
setup(props, { slots,emit }) {
return () => {
const proerpties = {
to: props.to,
@@ -34,7 +39,14 @@ export default defineComponent({
"i-button cursor-pointer outline-none text-shadow": true,
"small": props.small,
[`icon-${props.icon}`]: !!props.icon
}
},
onClick: (e: MouseEvent) => {
if (props.to) {
e.preventDefault()
}
emit("click", e)
},
disabled: props.disabled
}
const content = renderSlot(slots, "default")
return props.to ? <RouterLink {...proerpties}>{content}</RouterLink> : <button {...proerpties}>{content}</button>
frontend/src/components/dnf/Equipment/Info/index.vue
+97
View File
@@ -0,0 +1,97 @@
<template>
<div class="bg-hex-222222">
<div
:class="['bg-black text-shadow text-12px h-auto', 'text-hex-9D9476']"
style="
width: 220px;
float: left;
padding: 5px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-color: rgb(0, 0, 0);
"
>
<div class="h-30px flex items-left my-2px">
<div style="position: relative" class="w-28px mr-2px">
<Icon :equipment="props.equipment"></Icon>
</div>
<div style="line-height: 15px">
<div :class="[rarity,'pl-5px']">{{ props.equipment?.name }}</div>
<div class="pl-5px text-#3ea74e">{{ props.equipment?.categorize }}</div>
</div>
</div>
<!-- 装备图标 装备名称 -->
<div class="divide"></div>
<div class="flex flex-col items-end my-1px" style="line-height: 15px">
<div :class="rarity">{{ props.equipment?.rarity }}</div>
<div class="text-hex-7C6430">{{ props.equipment?.itemDetailType }}</div>
</div>
<!-- 装备基础信息 -->
<div class="divide"></div>
<div class="flex flex-col items-start my-1px" style="white-space: pre-wrap; line-height: 15px">
<div class="text-#908150" v-html="mainAttr"></div>
</div>
<!-- 装备属性 -->
<div class="divide"></div>
<div class="flex flex-col items-start my-1px" style="white-space: pre-wrap; line-height: 15px">
<div class="text-#DED29A" v-html="detail"></div>
</div>
<template v-if="bufferDetail">
<div class="divide"></div>
<div class="flex flex-col items-start my-1px" style="white-space: pre-wrap; line-height: 15px">
<div class="text-#A48B2E mb-10px">辅助职业专属属性</div>
<div class="text-#DED29A" v-html="bufferDetail"></div>
</div>
</template>
</div>
</div>
<!-- 奶系专属 -->
</template>
<script lang="ts" setup>
import type { IEquipment } from '@/api/info/type'
import Icon from '../Icon/index.vue'
import { formatAttr, rarityClass } from '@/utils'
const props = defineProps<{
equipment?: IEquipment
}>()
const rarity = computed(() => rarityClass(props.equipment?.rarity ?? ''))
const mainAttr = computed(()=>{
const attrs :(keyof IEquipment)[] = ['STR', 'INT', 'Vitality', 'Spirit','AtkP','AtkM','AtkI','SkillAttack','Attack','Buffer']
let info = ""
for (const attr of attrs) {
const item = props.equipment?.[attr] as number[]
if (item?.[0]) {
info += `${formatAttr(attr,item?.[0])}\n`
}
}
return info;
})
const detail = computed(()=>props.equipment?.detail.replace(/\[([^\[\]技能]+?)\]/g, '<span style="color:#3d9147">[$1]</span>'))
const bufferDetail = computed(()=>
{
const detail = props.equipment?.bufferDetail
if(!detail || detail == '-') return undefined
return props.equipment?.bufferDetail.replace(/\[([^\[\]技能]+?)\]/g, '<span style="color:#3d9147">[$1]</span>')
} )
</script>
<style lang="scss" scoped>
.divide {
border-top: 1px solid rgba(243, 244, 246, 0.3);
}
</style>
frontend/src/components/dnf/Equipment/SuitInfo/index.vue
+75
View File
@@ -0,0 +1,75 @@
<template>
<div class="bg-hex-222222">
<div
:class="['bg-black text-shadow text-12px h-auto', 'text-hex-9D9476']"
style="
width: 220px;
float: left;
padding: 5px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-color: rgb(0, 0, 0);
"
>
<!-- 装备图标 装备名称 -->
<div class="flex w-full items-center justify-center gap-5px" >
<div><img :src="getImageURL('equipment' + props.suit?.imageUrl.replace('/suit/','/suit/icon/'))" alt="装备图标"></div>
<div :class="rarity">{{ props.suit?.name }}</div>
<div :class="rarity">{{ props.suit?.point }}点</div>
</div>
<div class="divide"></div>
<!-- 装备基础信息 -->
<div
class="flex flex-col items-start my-1px"
style="white-space: pre-wrap; line-height: 15px"
>
<div class="text-#908150" v-html="mainAttr"></div>
</div>
<!-- 装备属性 -->
<div class="divide"></div>
<div
class="flex flex-col items-start my-1px"
style="white-space: pre-wrap; line-height: 15px"
>
<div class="text-#DED29A" v-html="detail"></div>
</div>
</div>
</div>
<!-- 奶系专属 -->
</template>
<script lang="ts" setup>
import type { IEquipment, ISuit } from '@/api/info/type'
import {getImageURL} from '@/utils/images'
import { formatAttr, rarityClass } from '@/utils'
const props = defineProps<{
suit?: ISuit
}>()
const rarity = computed(() => rarityClass(props.suit?.rarity ?? ''))
const mainAttr = computed(() => {
const attrs: (keyof ISuit)[] = ['SkillAttack', 'Buffer']
let info = ''
for (const attr of attrs) {
const item = props.suit?.[attr] as number
if (item) {
info += `${formatAttr(attr, item)}\n`
}
}
return info
})
const detail = computed(() =>
props.suit?.value.replace(/\[([^\[\]技能]+?)\]/g, '<span style="color:#3d9147">[$1]</span>'),
)
</script>
<style lang="scss" scoped>
.divide {
border-top: 1px solid rgba(243, 244, 246, 0.3);
}
</style>