<template>
  <chat-input
    v-model="message"
    placeholder="请输入消息..."
    :loading="loading"
    @send="handleSend"
    @clear="handleClear"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ChatInput from '@/components/chat-input/chat-input.vue'

const message = ref('')
const loading = ref(false)

function handleSend(text: string) {
  console.log('发送消息:', text)
  loading.value = true
  // 发送消息逻辑
  loading.value = false
}

function handleClear() {
  message.value = ''
}
</script>

<template>
  <chat-input
    v-model="message"
    :loading="loading"
    :show-stop="true"
    :show-continue="true"
    :show-file-upload="true"
    :file-plugin="filePlugin"
    @send="handleSend"
    @pause="handlePause"
    @continue="handleContinue"
    @clear="handleClear"
  >
    <template #actions>
      <view class="flex gap-2">
        <u-tag text="联网" @click="toggleWebSearch" />
        <u-tag text="深度思考" @click="toggleDeepThink" />
      </view>
    </template>
    
    <template #file-list>
      <view v-for="file in fileList" :key="file.id">
        {{ file.name }}
      </view>
    </template>
  </chat-input>
</template>

<script setup lang="ts">
const filePlugin = ref({
  url: '',
  name: ''
})

const fileList = ref([])
</script>

<template>
  <ua-markdown :content="markdownContent" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import UaMarkdown from '@/components/ua-markdown/ua-markdown.vue'

const markdownContent = ref(`
# 标题

## 二级标题

这是一段**加粗**的文字和*斜体*文字。

\`\`\`javascript
const hello = 'world'
console.log(hello)
\`\`\`

| 表头1 | 表头2 |
|-------|-------|
| 内容1 | 内容2 |
`)
</script>

<template>
  <ua-markdown :content="mathContent" />
</template>

<script setup>
const mathContent = `
行内公式：$E=mc^2$

块级公式：
$$
\\int_{a}^{b} f(x) dx = F(b) - F(a)
$$
`
</script>

<template>
  <audio-play
    :src="audioUrl"
    :autoplay="false"
    @play="onPlay"
    @pause="onPause"
    @ended="onEnded"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AudioPlay from '@/components/audio-play/audio-play.vue'

const audioUrl = ref('https://example.com/audio.mp3')

function onPlay() {
  console.log('开始播放')
}

function onPause() {
  console.log('暂停播放')
}

function onEnded() {
  console.log('播放结束')
}
</script>

<template>
  <file-upload
    v-model="fileList"
    :limit="5"
    :max-size="10"
    accept="image/*"
    @success="handleSuccess"
    @error="handleError"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FileUpload from '@/components/file-upload/file-upload.vue'

const fileList = ref([])

function handleSuccess(file) {
  console.log('上传成功:', file)
}

function handleError(error) {
  console.error('上传失败:', error)
}
</script>

<template>
  <tabbar
    v-model="activeIndex"
    :list="tabList"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Tabbar from '@/components/tabbar/tabbar.vue'

const activeIndex = ref(0)

const tabList = ref([
  {
    name: '首页',
    icon: 'home',
    path: '/pages/index/index'
  },
  {
    name: '知识库',
    icon: 'grid',
    path: '/pages/kb/kb'
  },
  {
    name: '我的',
    icon: 'account',
    path: '/pages/user/user'
  }
])

function handleChange(index) {
  console.log('切换到:', index)
}
</script>

<template>
  <page-status
    :status="pageStatus"
    :empty-text="'暂无数据'"
    :error-text="'加载失败'"
    @retry="handleRetry"
  >
    <!-- 正常内容 -->
    <view v-if="pageStatus === 'success'">
      页面内容
    </view>
  </page-status>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageStatus from '@/components/page-status/page-status.vue'

const pageStatus = ref<'loading' | 'success' | 'empty' | 'error'>('loading')

function handleRetry() {
  pageStatus.value = 'loading'
  // 重新加载数据
  loadData()
}
</script>

<template>
  <loading :show="loading" type="flower" text="加载中..." />
</template>

<script setup>
import { ref } from 'vue'
import Loading from '@/components/loading/loading.vue'

const loading = ref(true)
</script>

<template>
  <price :value="99.99" :precision="2" prefix="¥" />
</template>

<script setup>
import Price from '@/components/price/price.vue'
</script>

<template>
  <recorder
    :max-duration="60"
    @start="onStart"
    @stop="onStop"
    @cancel="onCancel"
  />
</template>

<script setup>
import Recorder from '@/components/recorder/recorder.vue'

function onStart() {
  console.log('开始录音')
}

function onStop(file) {
  console.log('录音完成:', file)
}

function onCancel() {
  console.log('取消录音')
}
</script>

components/
└── my-component/
    ├── my-component.vue    # 主组件文件
    ├── props.ts            # Props类型定义
    ├── types.ts            # 类型定义
    ├── utils.ts            # 工具函数
    └── README.md           # 组件说明

<template>
  <view class="my-component">
    <!-- 组件内容 -->
  </view>
</template>

<script setup lang="ts">
/**
 * 组件名称：MyComponent
 * 组件描述：组件功能描述
 * 作者：作者名称
 * 日期：2024-01-01
 */

import { computed, ref, watch } from 'vue'

// Props定义
interface Props {
  modelValue?: string
  title?: string
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  title: '',
  disabled: false
})

// Emits定义
const emit = defineEmits<{
  'update:modelValue': [value: string]
  'change': [value: string]
}>()

// 内部状态
const internalValue = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

// 方法
function handleClick() {
  if (props.disabled) return
  emit('change', internalValue.value)
}
</script>

<style lang="scss" scoped>
.my-component {
  /* 组件样式 */
}
</style>