feat: 拆分组件 用Vue3重写Main.vue

src/cpns/ClipFullData.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import FileListVue from './FileList.vue'
+import FileList from './FileList.vue'
 
 const props = defineProps({
   isShow: {

src/cpns/ClipSearch.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="clip-search">
+    <input v-model="filterText" autofocus type="text" placeholder="输入关键词检索" />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+const filterText = ref('')
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+watch(filterText, (val) => emit('update:modelValue', val))
+</script>
+
+<style lang="less" scoped>
+@import '../style/cpns/clip-search.less';
+</style>

src/cpns/ClipSwitch.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="clip-switch">
+    <div class="clip-switch-items">
+      <template v-for="tab of tabs">
+        <div
+          :class="{ 'clip-switch-item': true, active: activeTab === tab.type }"
+          @click="onNavClick(tab.type)"
+        >
+          {{ tab.name }}
+        </div>
+      </template>
+    </div>
+    <slot name="SidePanel"></slot>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const tabs = ref([
+  { name: '📚 全部', type: 'all' },
+  { name: '📋 文字', type: 'text' },
+  { name: '⛺ 图片', type: 'image' },
+  { name: '📂 文件', type: 'file' }
+])
+const activeTab = ref('all')
+const emit = defineEmits(['onNavClick'])
+const toggleNav = (type) => (activeTab.value = type)
+const onNavClick = (type) => {
+  toggleNav(type)
+  emit('onNavClick', type)
+}
+defineExpose({
+  tabs,
+  activeTab,
+  toggleNav
+})
+</script>
+
+<style lang="less" scoped>
+@import '../style/cpns/clip-switch.less';
+</style>

src/cpns/FileList.vue

@@ -7,24 +7,15 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'fileList',
-  props: {
-    data: {
-      type: Array,
-      required: true
-    }
-  },
-  methods: {
-    openFile(path) {
-      window.openFile(path)
-    },
-    getIcon(path) {
-      return window.getIcon(path)
-    }
+<script setup>
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true
   }
-}
+})
+const openFile = (path) => window.openFile(path)
+const getIcon = (path) => window.getIcon(path)
 </script>
 
 <style lang="less" scoped>