<!--
 * @Author: kongbeiwu lishaohua-520@qq.com
 * @Date: 2025-12-21 23:02:06
 * @LastEditors: kongbeiwu lishaohua-520@qq.com
 * @LastEditTime: 2026-01-04 10:35:46
 * @FilePath: /project/zn-ai/src/renderer/components/TitleSection/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="flex justify-between items-center box-border border-b-[1px] border-b-[#E5E8EE] mb-[20px] pb-[20px]">
        <div class="flex">
            <div class="flex items-center">
                <el-icon v-if="attrs.onBackTo" @click="emits('back-to', true)" size="18px" color="#525866" class="mr-[15px] cursor-pointer">
                    <ArrowLeftBold />
                </el-icon>
                <span class="text-[24px] font-500 text-[#171717] leading-[32px] mr-[8px]">
                    {{ title }}
                </span>
            </div>
            <span class="text-[12px] font-400 text-[#99A0AE] leading-[16px]" style="align-self: flex-end;">
                {{ desc }}
            </span>
        </div>
        <div class="flex items-center">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useAttrs, defineEmits } from 'vue';
import { ArrowLeftBold } from '@element-plus/icons-vue';
interface TitleSectionProps {
    title?: string
    desc?: string
}

withDefaults(
    defineProps<TitleSectionProps>(),
    { title: '', desc: '' }
)
const emits = defineEmits(["update:back-to"]);
const attrs = useAttrs();
</script>
