wip: Waterfall

mock/role/index.ts

@@ -285,6 +285,14 @@ const adminList = [
         meta: {
           title: 'router.inputPassword'
         }
+      },
+      {
+        path: 'waterfall',
+        component: 'views/Components/Waterfall',
+        name: 'Waterfall',
+        meta: {
+          title: 'router.waterfall'
+        }
       }
     ]
   },
@@ -640,8 +648,8 @@ const testList: string[] = [
   '/components/qrcode',
   '/components/highlight',
   '/components/infotip',
-  '/Components/InputPassword',
+  '/components/input-password',
-  '/Components/Sticky',
+  '/components/waterfall',
   'function',
   '/function/multiple-tabs',
   '/function/multiple-tabs-demo/:id',

mock/table/index.ts

@@ -46,8 +46,8 @@ for (let i = 0; i < count; i++) {
       content: baseContent,
       importance: '@integer(1, 3)',
       display_time: '@datetime',
-      pageviews: '@integer(300, 5000)',
+      pageviews: '@integer(100, 500)',
-      image_uri: Mock.Random.image('@integer(300, 5000)x@integer(300, 5000)')
+      image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)')
     })
   )
 }

src/components/IconPicker/src/IconPicker.vue

@@ -15,17 +15,17 @@ const appStore = useAppStore()
 const size = computed(() => appStore.getCurrentSize)
 
 const iconSize = computed(() => {
-  return size.value === 'small'
+  return unref(size) === 'small'
     ? 'var(--el-component-size-small)'
-    : size.value === 'large'
+    : unref(size) === 'large'
     ? 'var(--el-component-size-large)'
     : 'var(--el-component-size)'
 })
 
 const iconWrapStyle = computed((): CSSProperties => {
   return {
-    width: iconSize.value,
+    width: unref(iconSize),
-    height: iconSize.value,
+    height: unref(iconSize),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -45,7 +45,7 @@ const icons = [epIcons, antIcons, tIcons]
 const iconName = ref(icons[0].prefix)
 
 const currentIconNameIndex = computed(() => {
-  return icons.findIndex((item) => item.prefix === iconName.value)
+  return icons.findIndex((item) => item.prefix === unref(iconName))
 })
 
 const tabChange = () => {
@@ -57,8 +57,8 @@ const pageSize = ref(63)
 const currentPage = ref(1)
 
 const filterIcons = (icons: string[]) => {
-  const start = (currentPage.value - 1) * pageSize.value
+  const start = (unref(currentPage) - 1) * unref(pageSize)
-  const end = currentPage.value * pageSize.value
+  const end = unref(currentPage) * unref(pageSize)
   return icons.slice(start, end)
 }
 
@@ -81,7 +81,7 @@ async function init(icon?: string) {
   const index = icons[wrapIndex].icons.findIndex((item) => item === icon)
   // 计算当前icon的页码
   await nextTick()
-  currentPage.value = Math.ceil((index + 1) / pageSize.value)
+  currentPage.value = Math.ceil((index + 1) / unref(pageSize))
 }
 
 const popoverShow = () => {

src/components/Waterfall/index.ts

@@ -1,3 +1,3 @@
-import Waterfall from './Waterfall.vue'
+import Waterfall from './src/Waterfall.vue'
 
 export { Waterfall }

src/components/Waterfall/src/Waterfall.vue

@@ -1,3 +1,20 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
 
-<template>dddd</template>
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('waterfall')
+
+const props = defineProps({
+  data: propTypes.array.def([]),
+  reset: propTypes.bool.def(false),
+  width: propTypes.number.def(200),
+  gap: propTypes.number.def(20),
+  getContainer: propTypes.func.def(() => document.body)
+})
+</script>
+
+<template>
+  <div :class="prefixCls"></div>
+</template>

src/locales/en.ts

@@ -176,7 +176,8 @@ export default {
     multipleTabs: 'Multiple tabs',
     details: 'Details',
     iconPicker: 'Icon picker',
-    request: 'Request'
+    request: 'Request',
+    waterfall: 'Waterfall'
   },
   permission: {
     hasPermission: 'Please set the operation permission value'

src/locales/zh-CN.ts

@@ -174,7 +174,8 @@ export default {
     multipleTabs: '多开标签页',
     details: '详情页',
     iconPicker: '图标选择器',
-    request: '请求'
+    request: '请求',
+    waterfall: '瀑布流'
   },
   permission: {
     hasPermission: '请设置操作权限值'

src/router/index.ts

@@ -326,6 +326,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.inputPassword')
         }
+      },
+      {
+        path: 'waterfall',
+        component: () => import('@/views/Components/Waterfall.vue'),
+        name: 'waterfall',
+        meta: {
+          title: t('router.waterfall')
+        }
       }
     ]
   },

src/views/Components/Waterfall.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Waterfall } from '@/components/Waterfall'
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import Mock from 'mockjs'
+import { ref, unref } from 'vue'
+import { toAnyString } from '@/utils'
+
+const data = ref<any>([])
+
+const getList = () => {
+  const list: any = []
+  for (let i = 0; i < 20; i++) {
+    list.push(
+      Mock.mock({
+        id: toAnyString(),
+        image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)')
+      })
+    )
+  }
+  data.value = [...unref(data), ...list]
+  console.log('【data】：', data.value)
+}
+getList()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <ContentWrap :title="t('router.waterfall')">
+    <Waterfall :data="data" />
+  </ContentWrap>
+</template>