dcalc/frontend/src/pages/Character/Index.vue

<template>
  <div class="w-100% h-100% main flex" :class="infoStore.infos?.alter">
    <div class="header">
      <calc-tabs route :query="route.query">
        <calc-tab :value="`/character/equipment/${props.alter}`">装备设置</calc-tab>
        <calc-tab :value="`/character/skill/${props.alter}`">技能设置</calc-tab>
        <calc-tab :value="`/character/forge/${props.alter}`">打造设置</calc-tab>
      </calc-tabs>
    </div>
    <div class="content flex gap-1">
      <div
        class="flex h-auto p-1 overflow-y-hidden flex-1 box-border"
        v-if="!!infoStore.infos?.alter"
      >
        <RouterView></RouterView>
      </div>
      <div class="m-1 ml-auto h-auto z-2 box-border">
        <Result></Result>
      </div>
    </div>
    <div class="footer flex">
      <calc-checkbox round v-model="configStore.config.DSB">系统奶</calc-checkbox>
      <calc-checkbox round v-model="configStore.config.BUFF">组队</calc-checkbox>
      <calc-button title="打造导入" @click="showImport" class="ml-1" icon="import"></calc-button>
      <calc-button
        title="技能导入"
        @click="showImportSkill"
        class="ml-1"
        icon="exchange"
      ></calc-button>
    </div>
  </div>

  <calc-dialog lazy header="打造导入" v-model:visible="importVisible">
    <ImportVue></ImportVue>
  </calc-dialog>

  <calc-dialog lazy header="技能导入" v-model:visible="importSkillVisible">
    <ImportSkillVue></ImportSkillVue>
  </calc-dialog>

  <calc-dialog lazy header="助手打造导入" v-model:visible="helperImport">
    <ImportDnfhelper :alter="toImport" :uid="helperStore.helperInfo?.id"></ImportDnfhelper>
  </calc-dialog>
</template>

<script lang="ts" setup name="Index">
import { useInfoStore } from '@/stores/info'
import { useConfigStore } from '@/stores'
import ImportVue from './Config/import.vue'
import ImportSkillVue from './Config/importSkill.vue'
import ImportDnfhelper from './Config/importDnfhelper.vue'
import Result from './Result/Index.vue'
import { useDnfHelperStore } from '@/stores/dnfhelper.ts'
import { type IHelperRoleInfo } from '@/api/info/type'
const props = defineProps<{
  alter: string
}>()
const infoStore = useInfoStore()
const configStore = useConfigStore()
const helperImport = ref(false)
const importVisible = ref(false)
const importSkillVisible = ref(false)
const helperStore = useDnfHelperStore()
const toImport = ref<IHelperRoleInfo>()

// const shouldWatch = ref(true)

const isExecuting = ref(false)

const stopWatch = watch(
  () => {
    return JSON.stringify(configStore.config)
  },
  async () => {
    if (isExecuting.value) return

    isExecuting.value = true
    try {
      ;(await configStore.result).execute()
    } finally {
      isExecuting.value = false
    }
  },
)

const showImport = () => {
  importVisible.value = true
}

const showImportSkill = () => {
  importSkillVisible.value = true
}

const route = useRoute()

onMounted(async () => {
  await infoStore.createCharacter(props.alter, '0')
  window.addEventListener('beforeunload', () => {
    configStore.saveConfig()
  })
  // 检测router的传参
  const { roleId } = route.query
  if (roleId) {
    toImport.value = helperStore.helperInfo?.roleList.find((a) => a.roleId === roleId)
    if (toImport.value) {
      helperImport.value = true
    }
  }
})

onUnmounted(() => {
  stopWatch()
  window.removeEventListener('beforeunload', () => {
    configStore.saveConfig()
  })
})
</script>

<style lang="scss">
.main {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: black;

  color: #e9c558;
  // font-size: 12px;

  .header {
    display: flex;
    align-items: flex-end;
    z-index: 2;
    height: 26px;
  }

  .footer {
    display: flex;
    align-items: center;
    z-index: 2;
    height: 40px;
    gap: 10px;
  }

  .content {
    flex: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: 2;
    width: 100%;
  }
}

.main::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(50, 50, 50, 0.75);
}
</style>