ai_uniapp_v2/pages/tool/detail.vue

<template>
  <view class="tool">
    <view class="tip card">
      <text class="tip-title">{{ title || 'AI工具' }}</text>
      <text class="tip-desc">工具类型：{{ type || '未指定' }}</text>
      <text class="tip-note">这是通用工具详情页骨架。后续按 type 渲染不同的上传/参数表单，并调用 toolApi.submitTask 提交生成任务、轮询结果。</text>
    </view>

    <!-- 示例：图片上传占位 -->
    <view class="upload card" @click="chooseImage">
      <view v-if="!image" class="upload-empty">
        <text class="upload-plus">+</text>
        <text class="upload-text">上传图片</text>
      </view>
      <image v-else class="upload-img" :src="image" mode="aspectFit" />
    </view>

    <view class="btn-primary submit" @click="onSubmit">开始生成</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user.js'
import { useApp } from '@/utils/useApp.js'

const { toast } = useApp()
const userStore = useUserStore()

const type = ref('')
const title = ref('')
const image = ref('')

onLoad((options) => {
  type.value = options.type || ''
  title.value = options.title ? decodeURIComponent(options.title) : ''
  if (title.value) uni.setNavigationBarTitle({ title: title.value })
})

function chooseImage() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      image.value = res.tempFilePaths[0]
    }
  })
}

function onSubmit() {
  if (!userStore.isLogin) return uni.navigateTo({ url: '/pages/login/login' })
  if (!image.value) return toast('请先上传图片')
  // TODO: 上传图片 -> toolApi.submitTask -> 轮询结果 -> 跳转结果页
  toast('生成逻辑待接入')
}
</script>

<style lang="scss" scoped>
.tool {
  padding: 24rpx 0;
}
.tip {
  margin-top: 24rpx;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 12rpx;

  .tip-title {
    font-size: 34rpx;
    font-weight: 700;
  }
  .tip-desc {
    font-size: 26rpx;
    color: $ai-accent;
  }
  .tip-note {
    font-size: 24rpx;
    color: $ai-muted;
    line-height: 1.6;
  }
}
.upload {
  margin-top: 24rpx;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .upload-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: $ai-muted;
  }
  .upload-plus {
    font-size: 60rpx;
  }
  .upload-text {
    font-size: 26rpx;
  }
  .upload-img {
    width: 100%;
    height: 100%;
  }
}
.submit {
  margin: 48rpx $ai-gutter 0;
}
</style>