feat: init

src/views/dashboard/workplace/components/popular-content.vue

@@ -0,0 +1,101 @@
+<template>
+  <a-spin :loading="loading" style="width: 100%">
+    <a-card class="general-card" :header-style="{ paddingBottom: '0' }" :body-style="{ padding: '17px 20px 21px 20px' }">
+      <template #title>
+        {{ $t('workplace.popularContent') }}
+      </template>
+      <template #extra>
+        <a-link>{{ $t('workplace.viewMore') }}</a-link>
+      </template>
+      <a-space direction="vertical" :size="10" fill>
+        <a-radio-group v-model:model-value="type" type="button" @change="typeChange as any">
+          <a-radio value="text">
+            {{ $t('workplace.popularContent.text') }}
+          </a-radio>
+          <a-radio value="image">
+            {{ $t('workplace.popularContent.image') }}
+          </a-radio>
+          <a-radio value="video">
+            {{ $t('workplace.popularContent.video') }}
+          </a-radio>
+        </a-radio-group>
+        <a-table :data="renderList" :pagination="false" :bordered="false" :scroll="{ x: '100%', y: '264px' }">
+          <template #columns>
+            <a-table-column title="排名" data-index="key"></a-table-column>
+            <a-table-column title="内容标题" data-index="title">
+              <template #cell="{ record }">
+                <a-typography-paragraph
+                  :ellipsis="{
+                    rows: 1,
+                  }"
+                >
+                  {{ record.title }}
+                </a-typography-paragraph>
+              </template>
+            </a-table-column>
+            <a-table-column title="点击量" data-index="clickNumber"></a-table-column>
+            <a-table-column
+              title="日涨幅"
+              data-index="increases"
+              :sortable="{
+                sortDirections: ['ascend', 'descend'],
+              }"
+            >
+              <template #cell="{ record }">
+                <div class="increases-cell">
+                  <span>{{ record.increases }}%</span>
+                  <icon-caret-up v-if="record.increases !== 0" style="color: #f53f3f; font-size: 8px" />
+                </div>
+              </template>
+            </a-table-column>
+          </template>
+        </a-table>
+      </a-space>
+    </a-card>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import useLoading from '@/hooks/loading'
+import { queryPopularList } from '@/api/dashboard'
+import type { TableData } from '@arco-design/web-vue/es/table/interface'
+
+const type = ref('text')
+const { loading, setLoading } = useLoading()
+const renderList = ref<TableData[]>()
+const fetchData = async (contentType: string) => {
+  try {
+    setLoading(true)
+    const { data } = await queryPopularList({ type: contentType })
+    renderList.value = data
+  } catch (err) {
+    // you can report use errorHandler or other
+  } finally {
+    setLoading(false)
+  }
+}
+const typeChange = (contentType: string) => {
+  fetchData(contentType)
+}
+fetchData('text')
+</script>
+
+<style scoped lang="less">
+.general-card {
+  min-height: 395px;
+}
+:deep(.arco-table-tr) {
+  height: 44px;
+  .arco-typography {
+    margin-bottom: 0;
+  }
+}
+.increases-cell {
+  display: flex;
+  align-items: center;
+  span {
+    margin-right: 4px;
+  }
+}
+</style>