feat:搭建基本框架

src/components/Stats/FoodRank.vue

@@ -0,0 +1,33 @@
+<template>
+  <div v-for="(item, index) in foodRankList.slice(0, MAX_RANK_COUNT)"
+       :key="index" class="rank-item">
+    <span class="rank-index">{{ index+1 }}.</span>
+    <span class="rank-content">{{ item.value }}</span>
+    <span class="rank-amount">{{ item.count }} 次</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food'
+import { computed } from 'vue'
+
+const foodStore = useFoodStore()
+
+const MAX_RANK_COUNT = 10
+
+const foodRankList = computed(() => {
+  return [{
+    value: '红烧肉',
+    count: 10
+  }, {
+    value: '红烧鱼',
+    count: 8
+  }, {
+    value: '排骨汤',
+    count: 5
+  }, {
+    value: '红烧带鱼',
+    count: 2
+  }]
+})
+</script>