refactor: 重构国外专区组件结构和路由配置

components/foreign-components/RecommendedColumnsV2.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="relative mt-[34px] w-[100%]">
+    <KlTabBar v-model="tabIndex" :data="tabBar" />
+    <KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
+    <div class="absolute right-[0px] top-[10px] text-[16px] text-[#999999] font-normal"
+      >共<span class="color-[#1A65FF]">{{ result?.total }}</span
+      >个筛选结果</div
+    >
+    <div class="content mt-[10px]">
+      <el-row :gutter="20">
+        <el-col v-for="(item, index) in result?.list" :key="index" :span="6">
+          <CardPicture :item-info="item" />
+        </el-col>
+      </el-row>
+      <el-empty v-if="!result?.list.length" description="暂无数据"></el-empty>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import KlTabBar from '~/components/kl-tab-bar/index.vue'
+  import CardPicture from '~/components/kl-card-picture/index.vue'
+  import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
+  import { ref } from 'vue'
+  import type { pageRes } from '~/api/upnew/types'
+
+  const level = ref([
+    {
+      id: '0',
+      name: '图纸库',
+      isChildren: false,
+    },
+  ])
+
+  const result = defineModel<pageRes| null>('modelValue', {
+    required: true,
+  })
+  const query = defineModel<any>('query', {
+    required: true,
+  })
+
+  const tabIndex = ref(-1)
+  const tabBar = ref([
+    {
+      label: '图纸推荐',
+      value: -1,
+    },
+    {
+      label: '原创图纸',
+      value: 1,
+    },
+    {
+      label: '最新上传',
+      value: 2,
+    },
+  ])
+</script>
+
+<style lang="scss" scoped></style>