lucky_shop/pages_tool/ai-chat/components/ai-chat-tools-panel.vue

<template>
  <view class="tools-popup" v-if="visible">
    <view class="tools-mask" @click="hideToolsPanel"></view>
    <view class="tools-panel">
      <view class="tools-header">
        <text>{{ $lang('ai-chat.index.moreFunctions') }}</text>
        <button class="close-btn" @click="hideToolsPanel">
          <text class="iconfont icon-close"></text>
        </button>
      </view>
      <view class="tools-grid">
        <view class="tool-item" @click="selectImage">
          <view class="tool-icon">
            <text class="iconfont icon-image"></text>
          </view>
          <text class="tool-text">{{ $lang('ai-chat.index.image') }}</text>
        </view>
        <view class="tool-item" @click="selectFile">
          <view class="tool-icon">
            <text class="iconfont icon-file"></text>
          </view>
          <text class="tool-text">{{ $lang('ai-chat.index.file') }}</text>
        </view>
        <view class="tool-item" @click="startRecord">
          <view class="tool-icon">
            <text class="iconfont icon-voice"></text>
          </view>
          <text class="tool-text">{{ $lang('ai-chat.index.voice') }}</text>
        </view>
        <view class="tool-item" @click="selectLocation">
          <view class="tool-icon">
            <text class="iconfont icon-location"></text>
          </view>
          <text class="tool-text">{{ $lang('ai-chat.index.location') }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * ai-chat-tools-panel - 更多工具面板组件
 *
 * Props:
 *   visible: Boolean - 控制显示/隐藏
 *
 * Events:
 *   update:visible   - 同步关闭状态
 *   image-selected  - 选择图片，参数：图片消息对象
 *   file-selected   - 选择文件，参数：文件消息对象
 *   voice-start     - 开始语音
 *   location-selected - 选择位置，参数：位置消息对象
 */
export default {
  name: 'AiChatToolsPanel',

  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      messageId: 0
    }
  },

  methods: {
    hideToolsPanel() {
      this.$emit('update:visible', false)
    },

    selectImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const imageMessage = {
            id: ++this.messageId,
            role: 'user',
            type: 'image',
            content: '',
            imageUrl: res.tempFilePaths[0],
            timestamp: Date.now()
          }
          this.hideToolsPanel()
          this.$emit('image-selected', imageMessage)
        }
      })
    },

    selectFile() {
      // #ifdef H5
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = '*/*'
      input.onchange = (e) => {
        const file = e.target.files[0]
        if (file) {
          const fileMessage = {
            id: ++this.messageId,
            role: 'user',
            type: 'file',
            content: '',
            fileName: file.name,
            fileSize: file.size,
            fileType: file.type,
            timestamp: Date.now()
          }
          this.hideToolsPanel()
          this.$emit('file-selected', fileMessage)
        }
      }
      input.click()
      // #endif

      // #ifdef APP-PLUS
      uni.chooseFile({
        count: 1,
        success: (res) => {
          const file = res.tempFiles[0]
          const fileMessage = {
            id: ++this.messageId,
            role: 'user',
            type: 'file',
            content: '',
            fileName: file.name,
            fileSize: file.size,
            fileType: file.type,
            url: file.path,
            timestamp: Date.now()
          }
          this.hideToolsPanel()
          this.$emit('file-selected', fileMessage)
        }
      })
      // #endif
    },

    startRecord() {
      this.$emit('voice-start')
      this.hideToolsPanel()
    },

    selectLocation() {
      uni.chooseLocation({
        success: (res) => {
          const locationMessage = {
            id: ++this.messageId,
            role: 'user',
            type: 'location',
            content: '',
            latitude: res.latitude,
            longitude: res.longitude,
            address: res.address,
            name: res.name,
            timestamp: Date.now()
          }
          this.hideToolsPanel()
          this.$emit('location-selected', locationMessage)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

/* 引入图标字体 */
@import url('/common/css/iconfont.css');
/* 引入全局变量 */
@import '../styles/ai-chat-global.scss';

.tools-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  .tools-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .tools-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bg-card;
    border-radius: $radius-lg $radius-lg 0 0;
    padding: 32rpx;
    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);

    .tools-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32rpx;
      border-bottom: 2rpx solid #f0f4f8;
      padding-bottom: 16rpx;

      text {
        font-size: 34rpx;
        font-weight: 600;
        color: $color-text;
      }

      .close-btn {
        width: 56rpx;
        height: 56rpx;
        border-radius: 50%;
        background-color: $bg-main;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;

        .iconfont {
          font-size: 28rpx;
          color: $color-text-light;
        }
      }
    }

    .tools-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24rpx;

      .tool-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24rpx 16rpx;
        border-radius: $radius-md;
        background-color: $bg-main;

        .tool-icon {
          width: 88rpx;
          height: 88rpx;
          border-radius: 50%;
          background-color: $bg-card;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16rpx;
          box-shadow: $shadow-sm;

          .iconfont {
            font-size: 48rpx;
            color: $color-primary;
          }
        }

        .tool-text {
          font-size: 24rpx;
          color: $color-text;
          font-weight: 500;
        }
      }
    }
  }
}
</style>