zhjwxt/uniapp/pages/test/dict_test.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">字典功能测试</text>
    </view>

    <view class="test-section">
      <view class="section-title">1. 测试单个字典获取</view>
      <button class="test-btn" @click="testSingleDict">测试获取单个字典</button>
      <view class="result" v-if="singleResult">
        <text class="result-title">结果:</text>
        <text class="result-content">{{ JSON.stringify(singleResult, null, 2) }}</text>
      </view>
    </view>

    <view class="test-section">
      <view class="section-title">2. 测试批量字典获取</view>
      <button class="test-btn" @click="testBatchDict">测试批量获取字典</button>
      <view class="result" v-if="batchResult">
        <text class="result-title">结果:</text>
        <text class="result-content">{{ JSON.stringify(batchResult, null, 2) }}</text>
      </view>
    </view>

    <view class="test-section">
      <view class="section-title">3. 测试字典缓存</view>
      <button class="test-btn" @click="testCache">测试缓存机制</button>
      <view class="result" v-if="cacheResult">
        <text class="result-title">缓存测试结果:</text>
        <text class="result-content">{{ cacheResult }}</text>
      </view>
    </view>

    <view class="test-section">
      <view class="section-title">4. 测试静默请求</view>
      <button class="test-btn" @click="testQuietRequest">测试静默请求</button>
      <view class="result" v-if="quietResult">
        <text class="result-title">静默请求结果:</text>
        <text class="result-content">{{ JSON.stringify(quietResult, null, 2) }}</text>
      </view>
    </view>

    <view class="test-section">
      <view class="section-title">5. 清除缓存</view>
      <button class="test-btn clear" @click="clearAllCache">清除所有缓存</button>
    </view>
  </view>
</template>

<script>
import dictUtil from '@/common/dictUtil.js'
import axiosQuiet from '@/common/axiosQuiet.js'

export default {
  data() {
    return {
      singleResult: null,
      batchResult: null,
      cacheResult: null,
      quietResult: null
    }
  },
  methods: {
    // 测试单个字典获取
    async testSingleDict() {
      try {
        console.log('开始测试单个字典获取')
        const result = await dictUtil.getDict('source')
        this.singleResult = result
        console.log('单个字典获取结果:', result)
        
        uni.showToast({
          title: '单个字典测试完成',
          icon: 'success'
        })
      } catch (error) {
        console.error('单个字典获取失败:', error)
        this.singleResult = { error: error.message || '获取失败' }
        
        uni.showToast({
          title: '单个字典测试失败',
          icon: 'none'
        })
      }
    },

    // 测试批量字典获取
    async testBatchDict() {
      try {
        console.log('开始测试批量字典获取')
        const keys = ['source', 'SourceChannel', 'customer_purchasing_power']
        const result = await dictUtil.getBatchDict(keys)
        this.batchResult = result
        console.log('批量字典获取结果:', result)
        
        uni.showToast({
          title: '批量字典测试完成',
          icon: 'success'
        })
      } catch (error) {
        console.error('批量字典获取失败:', error)
        this.batchResult = { error: error.message || '获取失败' }
        
        uni.showToast({
          title: '批量字典测试失败',
          icon: 'none'
        })
      }
    },

    // 测试缓存机制
    async testCache() {
      try {
        console.log('开始测试缓存机制')
        
        // 清除缓存
        dictUtil.clearCache(['source'])
        
        // 第一次获取（应该从接口获取）
        const start1 = Date.now()
        await dictUtil.getDict('source', true)
        const time1 = Date.now() - start1
        
        // 第二次获取（应该从缓存获取）
        const start2 = Date.now()
        await dictUtil.getDict('source', true)
        const time2 = Date.now() - start2
        
        this.cacheResult = `第一次获取: ${time1}ms, 第二次获取: ${time2}ms, 缓存提升: ${Math.round((time1 - time2) / time1 * 100)}%`
        
        uni.showToast({
          title: '缓存测试完成',
          icon: 'success'
        })
      } catch (error) {
        console.error('缓存测试失败:', error)
        this.cacheResult = '缓存测试失败: ' + (error.message || '未知错误')
        
        uni.showToast({
          title: '缓存测试失败',
          icon: 'none'
        })
      }
    },

    // 测试静默请求
    async testQuietRequest() {
      try {
        console.log('开始测试静默请求')
        const result = await axiosQuiet.get('/dict/batch', {
          keys: 'source,SourceChannel'
        })
        this.quietResult = result
        console.log('静默请求结果:', result)
        
        uni.showToast({
          title: '静默请求测试完成',
          icon: 'success'
        })
      } catch (error) {
        console.error('静默请求失败:', error)
        this.quietResult = { error: error.message || error.msg || '请求失败' }
        
        uni.showToast({
          title: '静默请求测试失败',
          icon: 'none'
        })
      }
    },

    // 清除所有缓存
    clearAllCache() {
      dictUtil.clearCache()
      this.singleResult = null
      this.batchResult = null
      this.cacheResult = null
      this.quietResult = null
      
      uni.showToast({
        title: '缓存已清除',
        icon: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.header {
  background: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  text-align: center;
  
  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

.test-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
}

.test-btn {
  background: #29d3b4;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx 32rpx;
  font-size: 26rpx;
  margin-bottom: 20rpx;
  
  &.clear {
    background: #ff6b6b;
  }
  
  &:active {
    opacity: 0.8;
  }
}

.result {
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 20rpx;
  border-left: 4rpx solid #29d3b4;
  
  .result-title {
    font-size: 24rpx;
    color: #666;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .result-content {
    font-size: 22rpx;
    color: #333;
    word-break: break-all;
    white-space: pre-wrap;
    font-family: monospace;
    line-height: 1.5;
  }
}
</style>