feat: add international language support for analysis page; 🌟

新增：分析页面增加国际化语言支持；

src/pages/dashboard/analysis/Analysis.vue

@@ -2,50 +2,50 @@
   <div class="analysis">
     <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="6">
-        <chart-card title="总销售额" total="￥ 189,345">
-          <a-tooltip title="指标说明" slot="action">
+        <chart-card :title="$t('totalSales')" total="￥ 189,345">
+          <a-tooltip :title="$t('introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <div>
-            <trend style="margin-right: 16px" term="同周比" :percent="12" :is-increase="true" :scale="0" />
-            <trend term="日环比" :target="100" :value="89" :scale="0" />
+            <trend style="margin-right: 16px" :term="$t('wow')" :percent="12" :is-increase="true" :scale="0" />
+            <trend :term="$t('dod')" :target="100" :value="89" :scale="0" />
           </div>
-          <div slot="footer">日均销售额<span> ￥234.56</span></div>
+          <div slot="footer">{{$ta('daily|sales', 'p')}}<span> ￥234.56</span></div>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6">
-        <chart-card title="总销售额" total="￥ 189,345">
-          <a-tooltip title="指标说明" slot="action">
+        <chart-card :title="$t('visits')" total="￥ 189,345">
+          <a-tooltip :title="$t('introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <div>
             <mini-area />
           </div>
-          <div slot="footer">日访问量<span> 123,4</span></div>
+          <div slot="footer">{{$ta('daily|visits', 'p')}}<span> 123,4</span></div>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6">
-        <chart-card title="总销售额" total="￥ 189,345">
-          <a-tooltip title="指标说明" slot="action">
+        <chart-card :title="$t('payments')" total="￥ 189,345">
+          <a-tooltip :title="$t('introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <div>
             <mini-bar />
           </div>
-          <div slot="footer">转化率 <span>60%</span></div>
+          <div slot="footer">{{$t('conversion')}} <span>60%</span></div>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6">
-        <chart-card title="运营活动效果" total="73%">
-          <a-tooltip title="指标说明" slot="action">
+        <chart-card :title="$t('operating')" total="73%">
+          <a-tooltip :title="$t('introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <div>
             <mini-progress target="90" percent="78" color="#13C2C2" height="8px"/>
           </div>
           <div slot="footer">
-            <trend style="margin-right: 16px" term="同周比" :percent="12" :is-increase="true" :scale="0" />
-            <trend term="日环比" :target="100" :value="89" :scale="0" />
+            <trend style="margin-right: 16px" :term="$t('wow')" :percent="12" :is-increase="true" :scale="0" />
+            <trend :term="$t('dod')" :target="100" :value="89" :scale="0" />
           </div>
         </chart-card>
       </a-col>
@@ -55,29 +55,29 @@
         <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
           <div class="extra-wrap" slot="tabBarExtraContent">
             <div class="extra-item">
-              <a>今日</a>
-              <a>本周</a>
-              <a>本月</a>
-              <a>本年</a>
+              <a>{{$t('day')}}</a>
+              <a>{{$t('week')}}</a>
+              <a>{{$t('month')}}</a>
+              <a>{{$t('year')}}</a>
             </div>
             <a-range-picker :style="{width: '256px'}"></a-range-picker>
           </div>
-          <a-tab-pane loading="true" tab="销售额" key="1">
+          <a-tab-pane loading="true" :tab="$t('sales')" key="1">
             <a-row>
               <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
-                <bar title="销售额趋势" />
+                <bar :title="$ta('stores|sales|trend', 'p')" />
               </a-col>
               <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-                <ranking-list title="门店销售排行榜" :list="rankList"/>
+                <ranking-list :title="$ta('stores|sales|ranking', 'p')" :list="rankList"/>
               </a-col>
             </a-row>
           </a-tab-pane>
-          <a-tab-pane tab="访问量" key="2"><a-row>
+          <a-tab-pane :tab="$t('visits')" key="2"><a-row>
             <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
-              <bar title="销售额趋势" />
+              <bar :title="$ta('visits|trend', 'p')" />
             </a-col>
             <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-              <ranking-list title="门店销售排行榜" :list="rankList"/>
+              <ranking-list :title="$ta('stores|visits|ranking', 'p')" :list="rankList"/>
             </a-col>
           </a-row></a-tab-pane>
         </a-tabs>
@@ -85,16 +85,18 @@
     </a-card>
     <a-row style="margin: 0 -12px">
       <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-        <a-card :bordered="false" style="margin-top: 24px" title="热门搜索">
+        <a-card :bordered="false" style="margin-top: 24px" :title="$t('search')">
           <hot-search />
         </a-card>
       </a-col>
       <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-        <a-card :bordered="false" style="margin-top: 24px;" title="销售额占比">
+        <a-card :bordered="false" style="margin-top: 24px;" :title="$t('proportion')">
           <sales-data />
-          <div slot="extra">
-            <div>...</div>
-          </div>
+          <a-radio-group slot="extra" style="margin: -12px 0">
+            <a-radio-button value="a">{{$t('all')}}</a-radio-button>
+            <a-radio-button value="b">{{$t('online')}}</a-radio-button>
+            <a-radio-button value="c">{{$t('stores')}}</a-radio-button>
+          </a-radio-group>
         </a-card>
       </a-col>
     </a-row>
@@ -102,15 +104,15 @@
 </template>
 
 <script>
-import ChartCard from '../../components/card/ChartCard'
-import MiniArea from '../../components/chart/MiniArea'
-import MiniBar from '../../components/chart/MiniBar'
-import MiniProgress from '../../components/chart/MiniProgress'
-import Bar from '../../components/chart/Bar'
-import RankingList from '../../components/chart/RankingList'
-import HotSearch from '../../components/analysis/HotSearch'
-import SalesData from '../../components/analysis/SalesData'
-import Trend from '../../components/chart/Trend'
+import ChartCard from '../../../components/card/ChartCard'
+import MiniArea from '../../../components/chart/MiniArea'
+import MiniBar from '../../../components/chart/MiniBar'
+import MiniProgress from '../../../components/chart/MiniProgress'
+import Bar from '../../../components/chart/Bar'
+import RankingList from '../../../components/chart/RankingList'
+import HotSearch from './HotSearch'
+import SalesData from './SalesData'
+import Trend from '../../../components/chart/Trend'
 
 const rankList = []
 
@@ -123,6 +125,7 @@ for (let i = 0; i < 8; i++) {
 
 export default {
   name: 'analysis',
+  i18n: require('./i18n'),
   data () {
     return {
       rankList

src/pages/dashboard/analysis/HotSearch.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="hot-search">
+    <a-row style="margin: 0 -34px">
+      <a-col style="padding: 0 34px; margin-bottom: 24px" :sm="12" :xs="24">
+        <div class="num-info">
+          <span class="title">
+            {{$t('search')}}
+            <a-tooltip :title="$t('introduce')">
+              <a-icon type="info-circle" style="font-size: 14px; margin-left: 8px" />
+            </a-tooltip>
+          </span>
+          <div class="value">
+            <span class="total">12321</span>
+            <span class="subtotal">71.2<a-icon type="caret-up" /></span>
+          </div>
+        </div>
+        <mini-area style="height: 45px" />
+      </a-col>
+      <a-col style="padding: 0 34px; margin-bottom: 24px" :sm="12" :xs="24">
+        <div class="num-info">
+          <span class="title">
+            {{$t('capita')}}
+            <a-tooltip :title="$t('introduce')">
+              <a-icon type="info-circle" style="font-size: 14px; margin-left: 8px" />
+            </a-tooltip>
+          </span>
+          <div class="value">
+            <span class="total">2.7</span>
+            <span class="subtotal">71.2<a-icon type="caret-down" /></span>
+          </div>
+        </div>
+        <mini-area style="height: 45px" />
+      </a-col>
+    </a-row>
+    <a-table
+      :dataSource="searchData"
+      :columns="tableColumns"
+      :pagination="{style: { marginBottom: 0 }, pageSize: 5}"
+      size="small"
+      rowKey="index"
+    >
+      <a href="#/" slot="keyword" slot-scope="text">{{text}}</a>
+      <span slot="rang" slot-scope="text">{{text}} %<a-icon type="caret-up" /> </span>
+    </a-table>
+  </div>
+</template>
+
+<script>
+import MiniArea from '../../../components/chart/MiniArea'
+
+const searchData = []
+for (let i = 0; i < 50; i++) {
+  searchData.push({
+    index: i + 1,
+    keyword: '关键词-' + i,
+    count: Math.floor(Math.random() * 1000),
+    range: Math.floor(Math.random() * 100),
+    status: Math.floor((Math.random() * 10) % 2)
+  })
+}
+
+const columns = [
+  {
+    dataIndex: 'index',
+    key: 'rank'
+  },
+  {
+    dataIndex: 'keyword',
+    key: 'keyword',
+    scopedSlots: {customRender: 'keyword'}
+  },
+  {
+    dataIndex: 'count',
+    key: 'users',
+    sorter: (a, b) => a.count - b.count
+  },
+  {
+    title: '周涨幅',
+    dataIndex: 'range',
+    key: 'range',
+    scopedSlots: {customRender: 'rang'}
+  }
+]
+
+export default {
+  name: 'HotSearch',
+  components: {MiniArea},
+  i18n: require('./i18n-search'),
+  data () {
+    return {
+      searchData,
+      columns
+    }
+  },
+  computed: {
+    tableColumns() {
+      let columns = this.columns
+      return columns.map(item => {
+       item.title = this.$t(item.key)
+        return item
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .num-info{
+    .title{
+      color: rgba(0,0,0,.45);
+      font-size: 14px;
+      height: 22px;
+      line-height: 22px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+    }
+    .value{
+      .total{
+        color: rgba(0,0,0,.85);
+        display: inline-block;
+        line-height: 32px;
+        height: 32px;
+        font-size: 24px;
+        margin-right: 32px;
+      }
+      .subtotal{
+        color: rgba(0,0,0,.45);
+        font-size: 16px;
+        vertical-align: top;
+        margin-right: 0;
+        i{
+          font-size: 12px;
+          color: red;
+          transform: scale(.82);
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+</style>

src/pages/dashboard/analysis/SalesData.vue

@@ -0,0 +1,61 @@
+<template>
+  <div style="">
+    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
+      <v-tooltip :showTitle="false" dataKey="item*percent" />
+      <v-axis />
+      <v-legend dataKey="item" position="right" :offsetX="-140"/>
+      <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig" />
+      <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
+    </v-chart>
+  </div>
+</template>
+
+<script>
+const DataSet = require('@antv/data-set')
+
+const sourceData = [
+  { item: '事例一', count: 40 },
+  { item: '事例二', count: 21 },
+  { item: '事例三', count: 17 },
+  { item: '事例四', count: 13 },
+  { item: '事例五', count: 9 }
+]
+
+const scale = [{
+  dataKey: 'percent',
+  min: 0,
+  formatter: '.0%'
+}]
+
+const dv = new DataSet.View().source(sourceData)
+dv.transform({
+  type: 'percent',
+  field: 'count',
+  dimension: 'item',
+  as: 'percent'
+})
+const data = dv.rows
+export default {
+  name: 'SalesData',
+  data () {
+    return {
+      data,
+      scale,
+      height: 385,
+      pieStyle: {
+        stroke: '#fff',
+        lineWidth: 1
+      },
+      labelConfig: ['percent', {
+        formatter: (val, item) => {
+          return item.point.item + ': ' + val
+        }
+      }]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/dashboard/analysis/i18n-search.js

@@ -0,0 +1,31 @@
+module.exports = {
+  messages: {
+    CN: {
+      search: '搜索用户数',
+      capita: '人均搜索次数',
+      rank: '排名',
+      keyword: '搜索关键词',
+      count: '用户数',
+      range: '周涨幅',
+      introduce: '指标说明'
+    },
+    HK: {
+      search: '搜索用戶數',
+      capita: '人均搜索次數',
+      rank: '排名',
+      keyword: '搜索關鍵詞',
+      count: '用戶數',
+      range: '周漲幅',
+      introduce: '指標說明'
+    },
+    US: {
+      search: 'Search Users',
+      capita: 'Per Capita Search',
+      rank: 'Rank',
+      keyword: 'Keyword',
+      users: 'Users',
+      range: 'Weekly Range',
+      introduce: 'Introduce'
+    },
+  }
+}

src/pages/dashboard/analysis/i18n.js

@@ -0,0 +1,73 @@
+module.exports = {
+  messages: {
+    CN: {
+      introduce: '指标说明',
+      totalSales: '总销售额',
+      visits: '访问量',
+      payments: '支付笔数',
+      operating: '运营活动效果',
+      wow: '同周比',
+      dod: '日环比',
+      sales: '销售额',
+      daily: '日均',
+      day: '今日',
+      week: '本周',
+      month: '本月',
+      year: '本年',
+      search: '热门搜索',
+      proportion: '销售额占比',
+      conversion: '转化率',
+      trend: '趋势',
+      ranking: '排行榜',
+      all: '全渠道',
+      online: '线上',
+      stores: '门店',
+    },
+    HK: {
+      introduce: '指標說明',
+      totalSales: '總銷售額',
+      visits: '訪問量',
+      payments: '支付筆數',
+      operating: '運營活動效果',
+      wow: '通周比',
+      dod: '日環比',
+      sales: '銷售額',
+      daily: '日均',
+      day: '今日',
+      week: '本週',
+      month: '本月',
+      year: '本年',
+      search: '熱門搜索',
+      proportion: '銷售額佔比',
+      conversion: '轉化率',
+      trend: '趨勢',
+      ranking: '排行榜',
+      all: '全渠道',
+      online: '線上',
+      stores: '門店',
+    },
+    US: {
+      introduce: 'Introduce',
+      totalSales: 'Total Sales',
+      visits: 'Visits',
+      payments: 'Payments',
+      operating: 'Operational Effect',
+      wow: 'WoW Change',
+      dod: 'DoD Change',
+      sales: 'Sales',
+      daily: 'Daily',
+      day: 'All Day',
+      week: 'All Week',
+      month: 'All Month',
+      year: 'All Year',
+      search: 'Hot Search',
+      proportion: 'The Proportion Of Sales',
+      conversion: 'Conversion Rate',
+      trend: 'Trend',
+      ranking: 'Ranking',
+      all: 'All',
+      online: 'Online',
+      stores: 'Stores',
+    }
+  }
+}