feat: add sort-list components

src/components/TheCharts/Item.vue

@@ -0,0 +1,195 @@
+<script setup name="TheChartItem">
+import { computed, h } from "vue";
+import { getPicUrl } from "~/utils/util";
+
+const Props = defineProps({
+  nickname: {
+    type: String,
+  },
+  signature: {
+    type: String
+  },
+  idx: {
+    type: Number
+  },
+  type: {
+    type: String,
+    validator: key => (['score', 'essence', 'like'].includes(key)),
+    required: true
+  }
+})
+
+const __score_comp__ = () => {
+  return h("img", {
+    class: ['score-top'],
+    src: getPicUrl(`../../assets/cicons/score-${Props.idx}.png`, import.meta.url)
+  })
+}
+
+const __common_comp__ = (ops) => {
+  const level = [undefined, 'Ⅰ', 'Ⅱ', 'Ⅲ'][Props.idx]
+  return h("div", {
+    class: [`${ops.className}-top`, `c${Props.idx}`]
+  }, [
+    h("img", {
+      src: getPicUrl(ops.pic, import.meta.url)
+    }),
+    h("span", `${ops.title} ${level}`)
+  ])
+}
+
+// 渲染Item `right component`组件
+const rendeTop = computed(() => {
+  switch (Props.type) {
+    case 'score':
+      return __score_comp__()
+    case 'essence':
+      return __common_comp__({
+        pic: '../../assets/cicons/essence.png',
+        className: 'essence',
+        title: '优质作者'
+      })
+    case 'like':
+      return __common_comp__({
+        pic: '../../assets/cicons/like.png',
+        className: 'like',
+        title: '点赞大师'
+      })
+  }
+})
+</script>
+<template>
+  <div class="the-charts-item-container flex-row flex-aic flex-jc-sb">
+    <div class="main flex-row flex-aic">
+      <img src="https://dummyimage.com/38x38/e3e3e3/fff" alt="" class="avatar">
+      <div class="info">
+        <div class="nickname">{{ nickname }}</div>
+        <div class="signature">{{ signature }}</div>
+      </div>
+    </div>
+    <!-- 三种类型
+      积分排行、精华帖排行、点赞排行
+      前三有个人 flag
+    -->
+    <div class="foote">
+      <template v-if="idx <= 3">
+        <component :is="rendeTop"></component>
+      </template>
+      <template v-else>
+        <span :class="`${type}-default`">{{ idx }}</span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.the-charts-item-container {
+  padding: 20px 0;
+  border-bottom: 1px solid #F5F5F5;
+
+  &:last-child {
+    border-bottom: initial;
+  }
+
+  .main {
+    .avatar {
+      border-radius: 50%;
+    }
+
+    .info {
+      padding-left: 8px;
+
+      .nickname {
+        width: 98px;
+        height: 20px;
+        font-size: 14px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 20px;
+      }
+
+      .signature {
+        width: 192px;
+        height: 17px;
+        font-size: 12px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        color: #999999;
+        line-height: 17px;
+      }
+    }
+  }
+
+  .foote {
+    >span {
+      display: inline-block;
+    }
+
+    .score {
+      &-top {
+        width: 30px;
+        height: 19px;
+      }
+
+      &-default {
+        width: 30px;
+        text-align: center;
+        font-size: 16px;
+        font-family: SFPro, SFPro;
+        font-weight: 500;
+        color: #666666;
+      }
+    }
+
+    .essence,
+    .like {
+      &-top {
+        width: 90px;
+        height: 26px;
+        line-height: 26px;
+        background-color: #eee;
+        border-radius: 50px;
+        text-align: center;
+
+        &.c {
+          &1 {
+            background-color: rgba(255, 171, 26, 1);
+          }
+
+          &2 {
+            background-color: rgba(134, 192, 255, 1);
+          }
+
+          &3 {
+            background-color: rgba(252, 184, 145, 1);
+          }
+        }
+
+        img {
+          width: 16px;
+          height: 16px;
+          vertical-align: middle;
+        }
+
+        span {
+          margin-left: 3px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #FFFFFF;
+        }
+      }
+    }
+
+    .essence-default,
+    .like-default {
+      height: 19px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #666666;
+      line-height: 19px;
+    }
+  }
+
+}
+</style>

src/components/TheCharts/index.vue

@@ -0,0 +1,88 @@
+<script setup name="TheCharts">
+import TheChartItem from "./Item.vue"
+
+const Props = defineProps({
+  headerTitle: {
+    type: String,
+    default: ''
+  },
+  list: {
+    type: Array,
+    default: () => ([])
+  },
+  type: {
+    type: String,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <div class="the-charts-container">
+    <header class="heade">
+      <span>{{ headerTitle }}</span>
+    </header>
+    <div class="main">
+      <template v-for="(item, idx) in list" :key="idx">
+        <TheChartItem :idx="++idx" :type="type" :nickname="item.nickname" :signature="item.signature" />
+      </template>
+    </div>
+    <div class="footer">
+      <span>查看更多</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "~/styles/variable.scss";
+
+.the-charts-container {
+  width: 100%;
+  background-color: #fff;
+  padding: 16px;
+
+  header.heade {
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    border-bottom: 1px solid #F5F5F5;
+
+    span {
+      position: relative;
+      display: inline-block;
+
+      &::before {
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        content: "";
+        width: 60%;
+        height: 2px;
+        transform: translateX(-50%);
+        background-color: $color-primary;
+
+
+      }
+    }
+  }
+
+  .footer {
+    text-align: center;
+
+    span {
+      cursor: pointer;
+      display: inline-block;
+      width: 50%;
+      padding: 16px 0;
+      text-align: center;
+      background-color: #F7F7F7;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 20px;
+    }
+  }
+}
+</style>

src/utils/util.js

@@ -1,3 +1,15 @@
 /**
  * 基础 `utils`
- */
+ */
+
+
+/**
+ * 获取图片Url
+ * @param {string} link 资源地址
+ * @returns 图片绝对地址Object
+ */
+export const getPicUrl = (link, baseHref) => {
+  let img = new URL(link, baseHref || import.meta.url)
+  // let img = new URL("../../assets/cicons/score-1.png", import.meta.url)
+  return img.href
+}

src/views/index-content.vue

@@ -1,11 +1,42 @@
 <script setup>
+import { ref } from "vue"
 import IndexTitle from "~/components/IndexTitle/index.vue";
 import IndexNews from "~/components/IndexNews/index.vue";
 import IndexSection from "~/components/IndexSection/index.vue";
-import YXFooter from "~/components/layouts/Footer.vue"
+import YXFooter from "~/components/layouts/Footer.vue";
+import TheCharts from "~/components/TheCharts/index.vue";
+
+// mock data.
+const chartsList = ref([
+  {
+    nickname: '爱思考的大毛',
+    signature: '我这一生如履薄冰。。。',
+    type: 'score'
+  },
+  {
+    nickname: '爱思考的大毛',
+    signature: '我这一生如履薄冰。。。',
+    type: 'score'
+  },
+  {
+    nickname: '爱思考的大毛',
+    signature: '我这一生如履薄冰。。。',
+    type: 'score'
+  },
+  {
+    nickname: '爱思考的大毛',
+    signature: '我这一生如履薄冰。。。',
+    type: 'score'
+  },
+  {
+    nickname: '爱思考的大毛',
+    signature: '我这一生如履薄冰。。。',
+    type: 'score'
+  }
+])
 
-</script>
 
+</script>
 
 <template>
   <div class="index-container">
@@ -45,8 +76,14 @@ import YXFooter from "~/components/layouts/Footer.vue"
       </template>
     </div>
 
-    <template v-if="!user.name">
+    <!-- 排行榜只有登录才有 -->
+    <template v-if="true">
       <IndexTitle title="排行榜" />
+      <div class="sortlist-container flex-row flex-jc-sb">
+        <TheCharts :list="chartsList" type="score" header-title="积分排行" />
+        <TheCharts :list="chartsList" type="essence" header-title="精华帖排行" />
+        <TheCharts :list="chartsList" type="like" header-title="点赞排行" />
+      </div>
     </template>
 
     <YXFooter />
@@ -107,6 +144,7 @@ import YXFooter from "~/components/layouts/Footer.vue"
     justify-content: flex-start;
     flex-wrap: wrap;
     padding: 30px 0 0;
+    margin-bottom: 20px;
     height: 142px;
     overflow: hidden;
 
@@ -126,4 +164,8 @@ import YXFooter from "~/components/layouts/Footer.vue"
     }
   }
 }
+
+.sortlist-container {
+  column-gap: 26px;
+}
 </style>