fuse-code/src/views/folder/modal-floder-view.vue

<template>
  <ui-group v-if="floders.length">
    <ui-group-option>
      <span @click="canAll && (showAll = !showAll)" :class="{ ['fun-ctrl']: canAll }">
        <template v-if="canAll">
          <UpOutlined v-if="showAll" />
          <DownOutlined v-else />
        </template>
        {{ root.title }}
      </span>
    </ui-group-option>
    <ui-group-option>
      <div class="items">
        <div
          class="img-item"
          v-for="(_, i) in showLen"
          :key="floders[i].filesId"
          :style="{ '--rawLen': samLen }"
        >
          <div class="img-item-content">
            <div>
              <Sign
                focus
                :media="{ url: floders[i].filesUrl }"
                @click="clickHandler(floders[i])"
              />
            </div>
            <!-- <img :src="floders[i].filesUrl"  /> -->
          </div>
        </div>
      </div>
    </ui-group-option>
  </ui-group>

  <Tabs v-if="!emptyTabs" v-model:activeKey="activeTab" class="f-tabs">
    <template v-for="children in root.children">
      <TabPane
        :tab="children.title"
        :key="children.id"
        v-if="getFlatFloders(children).length"
      >
        <ModalFloderView :root="children" @preview="(v: any) => emit('preview', v)" />
      </TabPane>
    </template>
  </Tabs>
  <template v-for="c in children" :key="c.id" v-else>
    <ModalFloderView
      :root="c"
      v-if="isLastLevel(c)"
      @preview="(v: any) => emit('preview', v)"
    />
  </template>
</template>
<script lang="ts" setup>
import { Floder, FloderRoot, getFlatFloders } from "@/store";
import { computed, ref } from "vue";
import { TabPane, Tabs } from "ant-design-vue";
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
import Sign from "@/components/static-preview/sign.vue";

const props = defineProps<{ root: FloderRoot }>();
const emit = defineEmits<{ (e: "preview", v: [Floder, FloderRoot]): void }>();
const isLastLevel = (root: FloderRoot) => {
  return !root.children?.length;
};
const emptyTabs = computed(
  () => props.root.children?.every((r) => isLastLevel(r)) && !props.root.flat
);
const oneTabs = computed(() => {
  if (!emptyTabs.value) return null;
  return props.root.children!.find((i) => !isLastLevel(i));
});
const clickHandler = (floder: Floder) => {
  emit("preview", [floder, props.root]);
};
const activeTab = ref(oneTabs.value?.id);
const floders = computed(() => {
  if (props.root.flat) {
    return getFlatFloders(props.root);
  } else {
    return props.root.floders;
  }
});
const children = computed(() => {
  if (props.root.flat) {
    return [];
  } else {
    return props.root.children;
  }
});
const len = computed(() => floders.value.length);
const showAll = ref(false);
const samLen = 6;
const showLen = computed(() => (showAll.value ? len.value : Math.min(samLen, len.value)));
const canAll = computed(() => len.value > samLen);
</script>

<style lang="scss" scoped>
.items {
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: calc(100% / var(--rawLen));
  padding-right: 5px;
  .img-item-content {
    padding-top: 56.25%;
    position: relative;
    cursor: pointer;

    > div {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      object-fit: cover;
    }
  }
}

.mySwiper {
  --swiper-pagination-fraction-color: #000;
  --swiper-theme-color: #03ad98;
  --swiper-navigation-size: 30px;
}
</style>

<style>
.f-tabs.ant-tabs-top > .ant-tabs-nav {
  margin-bottom: 30px;
}
.f-tabs.ant-tabs-top > .ant-tabs-nav::before {
  display: none !important;
}
</style>