pref: 优化多语言弹窗

src/renderer/src/views/designer/sidebar/components/LanguageModal.vue

@@ -7,12 +7,29 @@
     width="720px"
     align-center
   >
-    <el-scrollbar height="calc(100vh - 200px)" class="config">
-      <div class="flex items-center justify-between">
-        <div class="w-280px flex items-center gap-12px mb-12px">
-          <span class="text-12px shrink-0">当前语言:</span>
-          <el-select v-model="currentLanguage" :options="languagesMenu" />
-        </div>
+    <div>
+      <el-input v-model="search" placeholder="输入key/内容搜索" class="mb-10px" />
+    </div>
+    <div
+      class="flex items-center justify-between border-b border-b-solid border-border pb-12px border-1px"
+    >
+      <div class="w-280px flex items-center gap-12px">
+        <span class="text-12px shrink-0">当前语言:</span>
+        <el-select v-model="currentLanguage" :options="languagesMenu" />
+      </div>
+      <div class="flex items-center gap-8px">
+        <el-button type="text" @click="handleCollapseAll">
+          <el-icon class="cursor-pointer">
+            <ArrowRight />
+          </el-icon>
+          <span>一键折叠</span>
+        </el-button>
+        <el-button type="text" @click="handleExpandAll">
+          <el-icon class="cursor-pointer">
+            <ArrowDown />
+          </el-icon>
+          <span>一键展开</span>
+        </el-button>
         <el-button type="text" @click="handleAdd">
           <el-icon class="cursor-pointer">
             <Plus />
@@ -20,8 +37,10 @@
           <span>添加</span>
         </el-button>
       </div>
+    </div>
+    <el-scrollbar ref="scrollbarRef" height="calc(100vh - 300px)" class="config">
       <el-form label-position="top">
-        <div v-for="item in data" :key="item.id">
+        <div v-for="item in getData" :key="item.id">
           <el-collapse v-model="activeNames">
             <el-collapse-item :name="item.id">
               <template #title>
@@ -107,14 +126,20 @@
           </el-collapse>
         </div>
       </el-form>
+      <el-empty v-if="!getData.length" :image-size="80">
+        <template #description>
+          <div>暂时数据</div>
+        </template>
+      </el-empty>
     </el-scrollbar>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import type { Language, LanguageItem } from '@/types/language'
-import { ArrowRight, Plus, Delete } from '@element-plus/icons-vue'
+import type { ScrollbarInstance } from 'element-plus'
+import { ArrowRight, Plus, Delete, ArrowDown } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { languagesMenu } from '@/constants'
 import { v4 } from 'uuid'
@@ -126,6 +151,8 @@ const showModal = ref(false)
 const activeNames = ref<string[]>([])
 const previousLanguageKeys = ref<Record<string, string>>({})
 const projectStore = useProjectStore()
+const search = ref('')
+const scrollbarRef = ref<ScrollbarInstance>()
 
 // 字体选项
 const fontOptions = computed(() => {
@@ -149,6 +176,15 @@ const data = computed<Language[]>({
   }
 })
 
+const getData = computed(() => {
+  if (!search.value) return data.value
+
+  return data.value.filter(
+    (item) =>
+      item.key.includes(search.value) || item.values.some((v) => v.value.includes(search.value))
+  )
+})
+
 const currentLanguage = computed({
   get() {
     return projectStore.project?.currentLanguage || ''
@@ -160,6 +196,14 @@ const currentLanguage = computed({
   }
 })
 
+const handleCollapseAll = () => {
+  activeNames.value = []
+}
+
+const handleExpandAll = () => {
+  activeNames.value = getData.value.map((item) => item.id)
+}
+
 const ensureProject = () => {
   if (projectStore.project) return true
 
@@ -258,7 +302,7 @@ const handleRemoveGroup = (language: Language) =>
     }
   })
 
-const handleAdd = () => {
+const handleAdd = async () => {
   if (!ensureProject()) return
 
   const first = data.value?.[0]?.values.map((item) => ({
@@ -290,6 +334,13 @@ const handleAdd = () => {
   })
   previousLanguageKeys.value[id] = nextKey
   activeNames.value.push(id)
+
+  // 滚动到新增的语言项
+  await nextTick()
+  const h = scrollbarRef.value?.wrapRef?.scrollHeight
+  if (h) {
+    scrollbarRef.value?.setScrollTop(h)
+  }
 }
 
 defineExpose({