<!--
 * @Author: chris
 * @Date: 2025-10-23 11:25:00
 * @LastEditors: chris
 * @LastEditTime: 2025-10-23 12:02:30
-->
<script setup lang="ts">
// 定义标题组件接口
interface TitleProps {
  title: {
    type: string
    default: '模块标题'
  }
}

const props = defineProps<TitleProps>()
</script>

<template>
  <view class="section-title">
    <view class="title-left">
      {{ props.title }}
    </view>
    <view class="title-right">
      <slot />
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '../variables.scss';

.section-title {
  @apply flex items-center justify-between items-center px-15px;

  .title-left {
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
    display: block;
    margin-bottom: 16px;
    position: relative;
    padding-left: 15px;
    // 添加科技感标题装饰
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background: linear-gradient(180deg, $primary-color, $primary-color-dark);
      border-radius: 2px;
      box-shadow: 0 0 8px rgba($primary-color, 0.3);
    }
  }
}
</style>
