feat: 新增轮播图表

src/packages/components/Decorates/Decorates/Decorates01/index.ts

@@ -7,8 +7,8 @@ export const Decorates01Config: ConfigType = {
   chartKey: 'VDecorates01',
   conKey: 'VCDecorates01',
   title: '装饰-01',
-  category: ChatCategoryEnum.DECORATES,
-  categoryName: ChatCategoryEnumName.DECORATES,
+  category: ChatCategoryEnum.DECORATE,
+  categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
   image
 }

src/packages/components/Decorates/Decorates/Decorates02/index.ts

@@ -7,8 +7,8 @@ export const Decorates02Config: ConfigType = {
   chartKey: 'VDecorates02',
   conKey: 'VCDecorates02',
   title: '装饰-02',
-  category: ChatCategoryEnum.DECORATES,
-  categoryName: ChatCategoryEnumName.DECORATES,
+  category: ChatCategoryEnum.DECORATE,
+  categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
   image
 }

src/packages/components/Decorates/Decorates/Decorates03/index.ts

@@ -7,8 +7,8 @@ export const Decorates03Config: ConfigType = {
   chartKey: 'VDecorates03',
   conKey: 'VCDecorates03',
   title: '装饰-03',
-  category: ChatCategoryEnum.DECORATES,
-  categoryName: ChatCategoryEnumName.DECORATES,
+  category: ChatCategoryEnum.DECORATE,
+  categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
   image
 }

src/packages/components/Decorates/Decorates/Decorates04/config.vue

@@ -3,7 +3,7 @@
     <SettingItemBox name="方向">
       <SettingItem >
         <n-space>
-        <n-switch v-model:value="optionData.reverse" size="small" />
+          <n-switch v-model:value="optionData.reverse" size="small" />
           <n-text>开启反向</n-text>
         </n-space>
       </SettingItem>

src/packages/components/Decorates/Decorates/Decorates04/index.ts

@@ -7,8 +7,8 @@ export const Decorates04Config: ConfigType = {
   chartKey: 'VDecorates04',
   conKey: 'VCDecorates04',
   title: '装饰-04',
-  category: ChatCategoryEnum.DECORATES,
-  categoryName: ChatCategoryEnumName.DECORATES,
+  category: ChatCategoryEnum.DECORATE,
+  categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
   image
 }

src/packages/components/Decorates/Decorates/Decorates05/index.ts

@@ -7,8 +7,8 @@ export const Decorates05Config: ConfigType = {
   chartKey: 'VDecorates05',
   conKey: 'VCDecorates05',
   title: '装饰-05',
-  category: ChatCategoryEnum.DECORATES,
-  categoryName: ChatCategoryEnumName.DECORATES,
+  category: ChatCategoryEnum.DECORATE,
+  categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
   image
 }

src/packages/components/Decorates/index.d.ts

@@ -1,11 +1,11 @@
 export enum ChatCategoryEnum {
   BORDER = 'Borders',
-  DECORATES = 'Decorates',
+  DECORATE = 'Decorates',
   MORE = 'Mores'
 }
 
 export enum ChatCategoryEnumName {
   BORDER = '边框',
-  DECORATES = '装饰',
+  DECORATE = '装饰',
   MORE = '更多'
 }

src/packages/components/Informations/Mores/Image/index.ts

@@ -9,6 +9,6 @@ export const ImageConfig: ConfigType = {
   title: '图片',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
-  package: PackagesCategoryEnum.INFORMATION,
+  package: PackagesCategoryEnum.INFORMATIONS,
   image
 }

src/packages/components/Informations/Mores/TextCloud/index.ts

@@ -10,6 +10,6 @@ export const TextCloudConfig: ConfigType = {
   title: '词云',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
-  package: PackagesCategoryEnum.INFORMATION,
+  package: PackagesCategoryEnum.INFORMATIONS,
   image
 }

src/packages/components/Informations/Texts/TextCommon/index.ts

@@ -9,6 +9,6 @@ export const TextCommonConfig: ConfigType = {
   title: '文字',
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
-  package: PackagesCategoryEnum.INFORMATION,
+  package: PackagesCategoryEnum.INFORMATIONS,
   image
 }

src/packages/components/Informations/Titles/TitleBevelAngle/index.ts

@@ -9,6 +9,6 @@ export const TitleBevelAngleConfig: ConfigType = {
   title: '斜角标题',
   category: ChatCategoryEnum.TITLE,
   categoryName: ChatCategoryEnumName.TITLE,
-  package: PackagesCategoryEnum.INFORMATION,
+  package: PackagesCategoryEnum.INFORMATIONS,
   image
 }

src/packages/components/Informations/Titles/TitleCommon/index.ts

@@ -9,6 +9,6 @@ export const TitleCommonConfig: ConfigType = {
   title: '普通标题',
   category: ChatCategoryEnum.TITLE,
   categoryName: ChatCategoryEnumName.TITLE,
-  package: PackagesCategoryEnum.INFORMATION,
+  package: PackagesCategoryEnum.INFORMATIONS,
   image
 }

src/packages/components/Informations/Titles/TitlePro/index.ts

@@ -9,6 +9,6 @@ export const TitleProConfig: ConfigType = {
   title: '中心标题',
   category: ChatCategoryEnum.TITLE,
   categoryName: ChatCategoryEnumName.TITLE,
-  package: PackagesCategoryEnum.INFORMATION,
+  package: PackagesCategoryEnum.INFORMATIONS,
   image
 }

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

@@ -0,0 +1,14 @@
+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/TableCategory/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    表格
+
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 
 </script>
 

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

@@ -0,0 +1,38 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TableCommonConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const option = {
+  data: dataJson,
+  // 表行数
+  rowNum: 5,
+  // 轮播时间
+  waitTime: 2,
+  // 数值单位
+  unit: '',
+  // 自动排序
+  sort: true,
+  color: '#1370fb',
+  textColor: '#ffffff',
+  borderColor: '#1370fb80',
+  carousel: 'single',
+  // 格式化
+  valueFormatter({ value }) {
+    const reverseNumber = (value + '').split('').reverse()
+    let valueStr = ''
+    while (reverseNumber.length) {
+      const seg = reverseNumber.splice(0, 3).join('')
+      valueStr += seg
+      if (seg.length === 3) valueStr += ','
+    }
+    return valueStr.split('').reverse().join('')
+  }
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = TableCommonConfig.key
+  public chartConfig = cloneDeep(TableCommonConfig)
+  public option = option
+}

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

@@ -1,6 +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/tableCommon/data.json

@@ -0,0 +1,14 @@
+[
+  { "name": "荣成", "value": 26700 },
+  { "name": "河南", "value": 20700 },
+  { "name": "河北", "value": 18700 },
+  { "name": "徐州", "value": 17800 },
+  { "name": "漯河", "value": 16756 },
+  { "name": "三门峡", "value": 12343 },
+  { "name": "郑州", "value": 9822 },
+  { "name": "周口", "value": 8912 },
+  { "name": "濮阳", "value": 6834 },
+  { "name": "信阳", "value": 5875 },
+  { "name": "新乡", "value": 3832 },
+  { "name": "大同", "value": 1811 }
+]

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

@@ -1,13 +1,227 @@
 <template>
-  <div>
-    表格
+  <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%);
+  }
 
-</style>
+  100% {
+    left: 100%;
+    transform: translateX(0%);
+  }
+}
+</style>

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

@@ -1,5 +1,5 @@
 export enum ChatCategoryEnum {
-  TABLE = 'TABLE',
+  TABLE = 'Tables',
 }
 
 export enum ChatCategoryEnumName {

src/packages/index.d.ts

@@ -46,15 +46,15 @@ export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<
 export enum PackagesCategoryEnum {
   CHARTS = 'Charts',
   TABLES = 'Tables',
-  INFORMATION = 'Informations',
+  INFORMATIONS = 'Informations',
   DECORATES = 'Decorates'
 }
 
 // 包分类名称
 export enum PackagesCategoryName {
   CHARTS = '图表',
-  TABLES = '表格',
-  INFORMATION = '信息',
+  TABLES = '列表',
+  INFORMATIONS = '信息',
   DECORATES = '小组件'
 }
 
@@ -67,7 +67,7 @@ export enum FetchComFlagType {
 // 图表包类型
 export type PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ConfigType[]
-  [PackagesCategoryEnum.INFORMATION]: ConfigType[]
+  [PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
   [PackagesCategoryEnum.TABLES]: ConfigType[]
   [PackagesCategoryEnum.DECORATES]: ConfigType[]
 }

src/packages/index.ts

@@ -16,7 +16,7 @@ const indexModules = import.meta.globEager("./components/**/index.vue")
 // * 所有图表
 export let packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
-  [PackagesCategoryEnum.INFORMATION]: InformationList,
+  [PackagesCategoryEnum.INFORMATIONS]: InformationList,
   [PackagesCategoryEnum.TABLES]: TableList,
   [PackagesCategoryEnum.DECORATES]: DecorateList
 }

src/views/chart/ContentCharts/hooks/useAside.hook.ts

@@ -29,9 +29,9 @@ const packagesListObj = {
     icon: renderIcon(RoadmapIcon),
     label: renderLang(PackagesCategoryName.CHARTS),
   },
-  [PackagesCategoryEnum.INFORMATION]: {
+  [PackagesCategoryEnum.INFORMATIONS]: {
     icon: renderIcon(SpellCheckIcon),
-    label: renderLang(PackagesCategoryName.INFORMATION),
+    label: renderLang(PackagesCategoryName.INFORMATIONS),
   },
   [PackagesCategoryEnum.TABLES]: {
     icon: renderIcon(TableSplitIcon),