save

src/components/list/ArticleList3.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+
+import Input from "@/components/Input.vue";
+import {$computed, $ref} from "vue/macros";
+import {Article, Word} from "@/types.ts";
+import ListItem from "@/components/list/ListItem.vue";
+import {useSettingStore} from "@/stores/setting.ts";
+import {watch} from "vue";
+import VolumeIcon from "@/components/icon/VolumeIcon.vue";
+
+const props = withDefaults(defineProps<{
+  list: Article[],
+  activeIndex?: number,
+  isActive?: boolean
+  showTranslate?: boolean
+}>(), {
+  list: [],
+  activeIndex: -1,
+  isActive: false,
+  showTranslate:true
+})
+
+const emit = defineEmits<{
+  click: [val: { data: Article, index: number }],
+  delSelectItem: [],
+  'update:searchKey': [val: string],
+  'update:list': [list: Article[]],
+}>()
+
+let searchKey = $ref('')
+let localList = $computed({
+  get() {
+    if (searchKey) {
+      return props.list.filter((item: Article) => {
+        //把搜索内容，分词之后，判断是否有这个词，比单纯遍历包含体验更好
+        return searchKey.toLowerCase().split(' ').filter(v => v).some(value => {
+          return item.title.toLowerCase().includes(value) || item.titleTranslate.toLowerCase().includes(value)
+        })
+      })
+    } else {
+      return props.list
+    }
+  },
+  set(newValue) {
+    emit('update:list', newValue)
+  }
+})
+
+const settingStore = useSettingStore()
+
+const listRef: HTMLElement = $ref(null as any)
+
+// function scrollViewToCenter(index: number) {
+//   if (index === -1) return
+//   listRef.children[index + 1]?.scrollIntoView({block: 'center', behavior: 'smooth'})
+// }
+//
+// watch(() => props.activeIndex, (n: any) => {
+//   if (settingStore.showPanel) {
+//     scrollViewToCenter(n)
+//   }
+// })
+//
+// watch(() => props.isActive, (n: boolean) => {
+//   setTimeout(() => {
+//     if (n) scrollViewToCenter(props.activeIndex)
+//   }, 300)
+// })
+
+watch(() => props.list, () => {
+  // listRef.scrollTo(0, 0)
+})
+
+</script>
+
+<template>
+  <div class="list">
+    <div class="search">
+      <Input v-model="searchKey"/>
+    </div>
+    <DynamicScroller
+        :items="list"
+        ref="listRef"
+        :min-item-size="90"
+        class="scroller"
+    >
+      <template v-slot="{ item, index, active }">
+        <DynamicScrollerItem
+            :item="item"
+            :active="active"
+            :size-dependencies="[
+          item.id,
+        ]"
+            :data-index="index"
+        >
+          <div class="list-item-wrapper">
+            <div class="common-list-item"
+                 :class="{active:activeIndex === index}"
+                 @click="emit('click',{data:item,index})"
+            >
+              <div class="left">
+                <slot name="prefix" :data="item" :index="index"></slot>
+                <div class="title-wrapper">
+                  <div class="item-title">
+                    <div class="name"> {{ `${index + 1}. ${item.title}` }}</div>
+                  </div>
+                  <div class="item-sub-title" v-if="item.titleTranslate && showTranslate">
+                    <div class="item-translate"> {{ `   ${item.titleTranslate}` }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="right">
+                <slot :data="item" :index="index"></slot>
+              </div>
+            </div>
+          </div>
+        </DynamicScrollerItem>
+      </template>
+    </DynamicScroller>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/assets/css/variable.scss";
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 15rem;
+  flex: 1;
+  height: 100%;
+
+  .search {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 var(--space);
+  }
+
+  .translate {
+    font-size: 16rem;
+  }
+
+  .scroller {
+    flex: 1;
+    padding: 0 var(--space);
+  }
+}
+</style>