save

src/components/DictListPanel.vue

@@ -8,7 +8,7 @@ import {useBaseStore} from "@/stores/base.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import DictList from "@/components/list/DictList.vue";
-import DictGroup from "@/components/toolbar/DictGroup.vue";
+import DictGroup from "@/components/list/DictGroup.vue";
 
 const emit = defineEmits<{
   add: [],
@@ -160,7 +160,7 @@ const groupedByCategoryAndTag = $computed(() => {
       flex: 1;
       overflow: auto;
       height: 100%;
-      padding-right: var(--space);
+      padding-right: 10rem;
 
       .translate {
         display: flex;

src/components/dialog/DictDiglog.vue

@@ -412,7 +412,7 @@ $header-height: 60rem;
   //transform: translate(-50%, -50%);
   background: var(--color-second-bg);
   z-index: 99999;
-  width: 1000rem;
+  width: 1030rem;
   height: 75vh;
 }
 

src/components/list/BaseList.vue

@@ -40,7 +40,7 @@ const localActiveIndex = $computed(() => {
 
 function scrollViewToCenter(index: number) {
   if (index === -1) return
-  nextTick(()=>{
+  nextTick(() => {
     if (props.list.length > limit) {
       listRef?.scrollToItem(index)
     } else {
@@ -65,7 +65,7 @@ watch(() => props.isActive, (n: boolean) => {
 
 watch(() => props.list, () => {
   if (props.static) return
-  nextTick(()=>{
+  nextTick(() => {
     if (props.list.length > limit) {
       listRef?.scrollToItem(0)
     } else {
@@ -75,14 +75,22 @@ watch(() => props.list, () => {
 })
 
 function scrollToBottom() {
-  nextTick(()=>{
-    listRef.scrollToBottom()
+  nextTick(() => {
+    if (props.list.length > limit) {
+      listRef.scrollToBottom()
+    } else {
+      listRef?.scrollTo(0, listRef.scrollHeight)
+    }
   })
 }
 
 function scrollToItem(index: number) {
-  nextTick(()=>{
-    listRef.scrollToItem(index)
+  nextTick(() => {
+    if (props.list.length > limit) {
+      listRef?.scrollToItem(index)
+    } else {
+      listRef?.children[index]?.scrollIntoView({block: 'center', behavior: 'smooth'})
+    }
   })
 }
 

src/components/list/DictGroup.vue

@@ -3,6 +3,7 @@ import {$computed, $ref} from "vue/macros";
 import {watch} from "vue";
 import {DictResource} from "@/types.ts";
 import DictItem from "@/components/list/DictItem.vue";
+import DictList from "@/components/list/DictList.vue";
 
 const props = defineProps<{
   category: string,
@@ -34,12 +35,9 @@ watch(() => props.groupByTag, () => {
            v-for="i in Object.keys(groupByTag)">{{ i }}
       </div>
     </div>
-    <div class="dict-list">
-      <DictItem v-for="(dict,index) in list"
-                @click="emit('selectDict',{dict,index})"
-                :active="selectDictName === dict.id"
-                :dict="dict"/>
-    </div>
+    <DictList
+        @selectDict="e => emit('selectDict',e)"
+        :list="list" :select-dict-name="selectDictName"/>
   </div>
 </template>
 
@@ -74,9 +72,4 @@ watch(() => props.groupByTag, () => {
   }
 }
 
-.dict-list {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 15rem;
-}
 </style>

src/components/list/DictItem.vue

@@ -21,8 +21,10 @@ const emit = defineEmits<{
       :class="active && 'active'"
   >
     <template v-if="dict.name">
-      <div class="name">{{ dict.name }}</div>
-      <div class="desc">{{ dict.description }}</div>
+      <div class="top">
+        <div class="name">{{ dict.name }}</div>
+        <div class="desc">{{ dict.description }}</div>
+      </div>
       <div class="num">{{ dict.length ?? dict.originWords.length }}词</div>
     </template>
     <div v-else class="add" @click.stop="emit('add')">
@@ -35,24 +37,41 @@ const emit = defineEmits<{
 <style scoped lang="scss">
 .dict-item {
   cursor: pointer;
+  box-sizing: border-box;
   padding: 10rem;
-  min-height: 100rem;
+  width: 125rem;
+  height: 165rem;
   border-radius: 10rem;
   position: relative;
   background: var(--color-item-bg);
   color: var(--color-font-1);
   font-size: 14rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
   .name {
-    font-size: 18rem;
+    font-size: 16rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display:-webkit-box; //作为弹性伸缩盒子模型显示。
+    -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+    -webkit-line-clamp:2; //显示的行
   }
 
   .desc {
     color: var(--color-font-2);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display:-webkit-box; //作为弹性伸缩盒子模型显示。
+    -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+    -webkit-line-clamp:2; //显示的行
   }
 
   .num {
-    font-weight: bold;
+    text-align: right;
+    color: var(--color-font-2);
+    //font-weight: bold;
   }
 
   .go {

src/components/list/DictList.vue

@@ -27,8 +27,8 @@ const emit = defineEmits<{
 
 <style scoped lang="scss">
 .dict-list {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  display: flex;
+  flex-wrap: wrap;
   gap: 15rem;
 }