fix: 新增列表组件

src/packages/components/Tables/Tables/TableCategory/config.ts

@@ -1,14 +0,0 @@
-import { publicConfig } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { TableCategoryConfig } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-
-export const option = {
-  colors: ['#3faacb', '#fff'],
-}
-
-export default class Config extends publicConfig implements CreateComponentType {
-  public key = TableCategoryConfig.key
-  public chartConfig = cloneDeep(TableCategoryConfig)
-  public option = option
-}

src/packages/components/Tables/Tables/TableList/config.ts

@@ -1,6 +1,6 @@
 import { publicConfig } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
-import { TableCommonConfig } from './index'
+import { TableListConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
@@ -32,7 +32,7 @@ export const option = {
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
-  public key = TableCommonConfig.key
+  public key = TableListConfig.key
-  public chartConfig = cloneDeep(TableCommonConfig)
+  public chartConfig = cloneDeep(TableListConfig)
   public option = option
 }

src/packages/components/Tables/Tables/TableList/config.vue

@@ -0,0 +1,76 @@
+<template>
+  <CollapseItem name="列表" :expanded="true">
+    <SettingItemBox name="基础">
+      <SettingItem name="表行数">
+        <n-input-number
+          v-model:value="optionData.rowNum"
+          :min="1"
+          size="small"
+          placeholder="请输入自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="轮播时间(s)">
+        <n-input-number
+          v-model:value="optionData.waitTime"
+          :min="1"
+          size="small"
+          placeholder="请输入轮播时间"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="数值单位">
+        <n-input
+          v-model:value="optionData.unit"
+          size="small"
+          placeholder="数值单位"
+        ></n-input>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.sort" size="small" />
+          <n-text>自动排序</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="样式">
+      <SettingItem name="主体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="数据颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="底部线条">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.borderColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from '@/components/ChartItemSetting/index'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+})
+</script>

src/packages/components/Tables/Tables/TableList/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/Tables/tables_list.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const TableListConfig: ConfigType = {
+  key: 'TableList',
+  chartKey: 'VTableList',
+  conKey: 'VCTableList',
+  title: '排名列表',
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
+  package: PackagesCategoryEnum.TABLES,
+  image
+}

src/packages/components/Tables/Tables/TableList/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="go-tables-rank" :style="`color: ${textColor}`">
+    <div
+      class="row-item"
+      v-for="(item, i) in status.rows"
+      :key="item.toString() + item.scroll"
+      :style="`height: ${status.heights[i]}px;`"
+    >
+      <div class="ranking-info">
+        <div class="rank" :style="`color: ${color}`">No.{{ item.ranking }}</div>
+        <div class="info-name" v-html="item.name" />
+        <div class="ranking-value" :style="`color: ${textColor}`">
+          {{
+            status.mergedConfig.valueFormatter
+              ? status.mergedConfig.valueFormatter(item)
+              : item.value
+          }}
+          {{unit}}
+        </div>
+      </div>
+      <div class="ranking-column" :style="`border-color: ${borderColor}`">
+        <div class="inside-column" :style="`width: ${item.percent}%;background-color: ${color}`">
+          <div class="shine" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, onUnmounted, reactive, ref, toRefs, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import merge from 'lodash/merge'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { rowNum, unit, color, textColor, borderColor } = toRefs(props.chartConfig.option)
+
+const status = reactive({
+  mergedConfig: props.chartConfig.option,
+  rowsData: [],
+  rows: [],
+  heights: [],
+  animationIndex: 0,
+  animationHandler: '',
+  updater: 0,
+})
+
+const onResize = () => {
+  if (!status.mergedConfig) return
+  stopAnimation()
+  calcHeights(true)
+  animation(true)
+}
+
+watch(
+  () => w.value,
+  () => {
+    onResize()
+  }
+)
+watch(
+  () => h.value,
+  () => {
+    onResize()
+  }
+)
+watch(
+  () => rowNum.value,
+  () => {
+    onResize()
+  }
+)
+
+const calcRowsData = () => {
+  let { data, rowNum, sort } = status.mergedConfig
+  sort &&
+    data.sort(({ value: a }, { value: b }) => {
+      if (a > b) return -1
+      if (a < b) return 1
+      if (a === b) return 0
+    })
+  const value = data.map(({ value }) => value)
+  const min = Math.min(...value) || 0
+  // abs of min
+  const minAbs = Math.abs(min)
+  const max = Math.max(...value) || 0
+  // abs of max
+  const maxAbs = Math.abs(max)
+  const total = max + minAbs
+  data = data.map((row, i) => ({
+    ...row,
+    ranking: i + 1,
+    percent: ((row.value + minAbs) / total) * 100,
+  }))
+  const rowLength = data.length
+  if (rowLength > rowNum && rowLength < 2 * rowNum) {
+    data = [...data, ...data]
+  }
+  data = data.map((d, i) => ({ ...d, scroll: i }))
+  status.rowsData = data
+  status.rows = data
+}
+
+const calcHeights = (onresize = false) => {
+  const { rowNum, data } = status.mergedConfig
+  const avgHeight = h.value / rowNum
+  status.avgHeight = avgHeight
+  if (!onresize) status.heights = new Array(data.length).fill(avgHeight)
+}
+
+const animation = async (start = false) => {
+  let { avgHeight, animationIndex, mergedConfig, rowsData, updater } = status
+  const { waitTime, carousel, rowNum } = mergedConfig
+  const rowLength = rowsData.length
+  if (rowNum >= rowLength) return
+  if (start) {
+    await new Promise(resolve => setTimeout(resolve, waitTime * 1000))
+    if (updater !== status.updater) return
+  }
+  const animationNum = carousel === 'single' ? 1 : rowNum
+  let rows = rowsData.slice(animationIndex)
+  rows.push(...rowsData.slice(0, animationIndex))
+  status.rows = rows.slice(0, rowNum + 1)
+  status.heights = new Array(rowLength).fill(avgHeight)
+  await new Promise(resolve => setTimeout(resolve, 300))
+  if (updater !== status.updater) return
+  status.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
+  animationIndex += animationNum
+  const back = animationIndex - rowLength
+  if (back >= 0) animationIndex = back
+
+  status.animationIndex = animationIndex
+  status.animationHandler = setTimeout(animation, waitTime * 1000 - 300)
+}
+
+const stopAnimation = () => {
+  status.updater = (status.updater + 1) % 999999
+  if (!status.animationHandler) return
+  clearTimeout(status.animationHandler)
+}
+
+const init = () => {
+  calcRowsData()
+  calcHeights()
+  animation(true)
+}
+
+init()
+
+onUnmounted(() => {
+  stopAnimation()
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('tables-rank') {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .row-item {
+    transition: all 0.3s;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .ranking-info {
+    display: flex;
+    width: 100%;
+    font-size: 13px;
+
+    .rank {
+      width: 40px;
+    }
+
+    .info-name {
+      flex: 1;
+    }
+  }
+
+  .ranking-column {
+    border-bottom: 2px solid #1370fb80;
+    margin-top: 5px;
+
+    .inside-column {
+      position: relative;
+      height: 6px;
+      margin-bottom: 2px;
+      border-radius: 1px;
+      overflow: hidden;
+    }
+
+    .shine {
+      position: absolute;
+      left: 0%;
+      top: 2px;
+      height: 2px;
+      width: 50px;
+      transform: translateX(-100%);
+      background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);
+      animation: shine 3s ease-in-out infinite alternate;
+    }
+  }
+}
+
+@keyframes shine {
+  80% {
+    left: 0;
+    transform: translateX(-100%);
+  }
+
+  100% {
+    left: 100%;
+    transform: translateX(0%);
+  }
+}
+</style>

src/packages/components/Tables/Tables/index.ts

@@ -1,4 +1,5 @@
+import { TableListConfig } from './TableList'
 import { TableCommonConfig } from './TableCommon'
 import { TableCategoryConfig } from './TableCategory'
 
-export default [TableCommonConfig, TableCategoryConfig]
+export default [TableListConfig, TableCommonConfig, TableCategoryConfig]

src/packages/components/Tables/Tables/tableCommon/config.vue

@@ -1,76 +1,13 @@
 <template>
-  <CollapseItem name="列表" :expanded="true">
+  <div>
-    <SettingItemBox name="基础">
-      <SettingItem name="表行数">
-        <n-input-number
-          v-model:value="optionData.rowNum"
-          :min="1"
-          size="small"
-          placeholder="请输入自动计算"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="轮播时间(s)">
-        <n-input-number
-          v-model:value="optionData.waitTime"
-          :min="1"
-          size="small"
-          placeholder="请输入轮播时间"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="数值单位">
-        <n-input
-          v-model:value="optionData.unit"
-          size="small"
-          placeholder="数值单位"
-        ></n-input>
-      </SettingItem>
-      <SettingItem>
-        <n-space>
-          <n-switch v-model:value="optionData.sort" size="small" />
-          <n-text>自动排序</n-text>
-        </n-space>
-      </SettingItem>
-    </SettingItemBox>
 
-    <SettingItemBox name="样式">
+  </div>
-      <SettingItem name="主体颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.color"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="数据颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.textColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="底部线条">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.borderColor"
-        ></n-color-picker>
-      </SettingItem>
-    </SettingItemBox>
-  </CollapseItem>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from '@/components/ChartItemSetting/index'
-import { option } from './config'
 
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true,
-  },
-})
 </script>
+
+<style scoped>
+
+</style>

src/packages/components/Tables/Tables/tableCommon/index.vue

@@ -1,227 +1,13 @@
 <template>
-  <div class="go-tables-rank" :style="`color: ${textColor}`">
+  <div>
-    <div
+
-      class="row-item"
-      v-for="(item, i) in status.rows"
-      :key="item.toString() + item.scroll"
-      :style="`height: ${status.heights[i]}px;`"
-    >
-      <div class="ranking-info">
-        <div class="rank" :style="`color: ${color}`">No.{{ item.ranking }}</div>
-        <div class="info-name" v-html="item.name" />
-        <div class="ranking-value" :style="`color: ${textColor}`">
-          {{
-            status.mergedConfig.valueFormatter
-              ? status.mergedConfig.valueFormatter(item)
-              : item.value
-          }}
-          {{unit}}
-        </div>
-      </div>
-      <div class="ranking-column" :style="`border-color: ${borderColor}`">
-        <div class="inside-column" :style="`width: ${item.percent}%;background-color: ${color}`">
-          <div class="shine" />
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
-import { PropType, onUnmounted, reactive, ref, toRefs, watch } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import cloneDeep from 'lodash/cloneDeep'
-import merge from 'lodash/merge'
 
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
-})
-
-const { w, h } = toRefs(props.chartConfig.attr)
-const { rowNum, unit, color, textColor, borderColor } = toRefs(props.chartConfig.option)
-
-const status = reactive({
-  mergedConfig: props.chartConfig.option,
-  rowsData: [],
-  rows: [],
-  heights: [],
-  animationIndex: 0,
-  animationHandler: '',
-  updater: 0,
-})
-
-const onResize = () => {
-  if (!status.mergedConfig) return
-  stopAnimation()
-  calcHeights(true)
-  animation(true)
-}
-
-watch(
-  () => w.value,
-  () => {
-    onResize()
-  }
-)
-watch(
-  () => h.value,
-  () => {
-    onResize()
-  }
-)
-watch(
-  () => rowNum.value,
-  () => {
-    onResize()
-  }
-)
-
-const calcRowsData = () => {
-  let { data, rowNum, sort } = status.mergedConfig
-  sort &&
-    data.sort(({ value: a }, { value: b }) => {
-      if (a > b) return -1
-      if (a < b) return 1
-      if (a === b) return 0
-    })
-  const value = data.map(({ value }) => value)
-  const min = Math.min(...value) || 0
-  // abs of min
-  const minAbs = Math.abs(min)
-  const max = Math.max(...value) || 0
-  // abs of max
-  const maxAbs = Math.abs(max)
-  const total = max + minAbs
-  data = data.map((row, i) => ({
-    ...row,
-    ranking: i + 1,
-    percent: ((row.value + minAbs) / total) * 100,
-  }))
-  const rowLength = data.length
-  if (rowLength > rowNum && rowLength < 2 * rowNum) {
-    data = [...data, ...data]
-  }
-  data = data.map((d, i) => ({ ...d, scroll: i }))
-  status.rowsData = data
-  status.rows = data
-}
-
-const calcHeights = (onresize = false) => {
-  const { rowNum, data } = status.mergedConfig
-  const avgHeight = h.value / rowNum
-  status.avgHeight = avgHeight
-  if (!onresize) status.heights = new Array(data.length).fill(avgHeight)
-}
-
-const animation = async (start = false) => {
-  let { avgHeight, animationIndex, mergedConfig, rowsData, updater } = status
-  const { waitTime, carousel, rowNum } = mergedConfig
-  const rowLength = rowsData.length
-  if (rowNum >= rowLength) return
-  if (start) {
-    await new Promise(resolve => setTimeout(resolve, waitTime * 1000))
-    if (updater !== status.updater) return
-  }
-  const animationNum = carousel === 'single' ? 1 : rowNum
-  let rows = rowsData.slice(animationIndex)
-  rows.push(...rowsData.slice(0, animationIndex))
-  status.rows = rows.slice(0, rowNum + 1)
-  status.heights = new Array(rowLength).fill(avgHeight)
-  await new Promise(resolve => setTimeout(resolve, 300))
-  if (updater !== status.updater) return
-  status.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
-  animationIndex += animationNum
-  const back = animationIndex - rowLength
-  if (back >= 0) animationIndex = back
-
-  status.animationIndex = animationIndex
-  status.animationHandler = setTimeout(animation, waitTime * 1000 - 300)
-}
-
-const stopAnimation = () => {
-  status.updater = (status.updater + 1) % 999999
-  if (!status.animationHandler) return
-  clearTimeout(status.animationHandler)
-}
-
-const init = () => {
-  calcRowsData()
-  calcHeights()
-  animation(true)
-}
-
-init()
-
-onUnmounted(() => {
-  stopAnimation()
-})
 </script>
 
 <style lang="scss" scoped>
-@include go('tables-rank') {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
 
-  .row-item {
+</style>
-    transition: all 0.3s;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    overflow: hidden;
-  }
-
-  .ranking-info {
-    display: flex;
-    width: 100%;
-    font-size: 13px;
-
-    .rank {
-      width: 40px;
-    }
-
-    .info-name {
-      flex: 1;
-    }
-  }
-
-  .ranking-column {
-    border-bottom: 2px solid #1370fb80;
-    margin-top: 5px;
-
-    .inside-column {
-      position: relative;
-      height: 6px;
-      margin-bottom: 2px;
-      border-radius: 1px;
-      overflow: hidden;
-    }
-
-    .shine {
-      position: absolute;
-      left: 0%;
-      top: 2px;
-      height: 2px;
-      width: 50px;
-      transform: translateX(-100%);
-      background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);
-      animation: shine 3s ease-in-out infinite alternate;
-    }
-  }
-}
-
-@keyframes shine {
-  80% {
-    left: 0;
-    transform: translateX(-100%);
-  }
-
-  100% {
-    left: 100%;
-    transform: translateX(0%);
-  }
-}
-</style>