Add new components for login and comment functionality

components/kl-wallpaper-category/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <!-- 面包屑 -->
+  <div v-if="level.length > 1" class="mb--10px mt-20px pl-20px">
+    <el-breadcrumb :separator-icon="ArrowRight">
+      <el-breadcrumb-item v-for="(item, index) in level" :key="item.name" class="cursor-pointer" @click="handleClickBread(item, index)">{{
+        item.name
+      }}</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+  <div class="mt-30px box-border w-100% border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-20px py-26px">
+    <div class="mb-14px flex items-start">
+      <div class="flex-shrink-0 text-15px text-[#333333] font-normal">{{ computType }}分类</div>
+      <div class="ml-30px mt--6px flex flex-wrap">
+        <div
+          v-for="(item, index) in projectTypeList"
+          :key="index"
+          class="mb-8px mr-26px cursor-pointer rounded-15px px-15px py-6px text-14px text-[#666666] font-normal"
+          :class="item.id === query.projectType ? 'bg-#EBEEFE! !text-[#1A65FF]' : ''"
+          @click="handleClick(item)"
+          >{{ item.name }}</div
+        >
+      </div>
+    </div>
+    <div class="flex items-start">
+      <div class="flex-shrink-0 text-15px text-[#333333] font-normal">软件分类</div>
+      <div class="ml-30px mt--6px flex flex-wrap">
+        <div
+          v-for="(item, index) in editionsList"
+          :key="index"
+          class="mb-8px mr-26px cursor-pointer rounded-15px px-15px py-6px text-14px text-[#666666] font-normal"
+          :class="item.id === query.editions ? '!bg-[#EBEEFE] !text-[#1A65FF]' : ''"
+          @click="query.editions = item.id"
+          >{{ item.name }}</div
+        >
+      </div>
+    </div>
+    <!-- <div class="mb-14px flex items-start">
+      <div class="flex-shrink-0 text-18px text-[#333333] font-normal">文本类型</div>
+      <div class="ml-30px mt--6px flex flex-wrap">
+        <div
+          v-for="(item, index) in sourceList"
+          :key="index"
+          class="mb-8px mr-26px cursor-pointer rounded-15px px-15px py-8px text-14px text-[#666666] font-normal"
+          :class="item.id === query.source ? '!bg-[#EBEEFE] !text-[#1A65FF]' : ''"
+          @click="query.source = item.id"
+          >{{ item.name }}</div
+        >
+      </div>
+    </div> -->
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+  import { parent } from '@/api/upnew/index'
+  import type { pageReq } from '@/api/upnew/types'
+  import { ArrowRight } from '@element-plus/icons-vue'
+
+  const props = defineProps({
+    type: {
+      type: Number,
+      default: 1,
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    groundId: {
+      type: String,
+      default: '',
+    },
+  })
+
+  const query = defineModel<pageReq>('modelValue', {
+    required: true,
+  })
+  const level = defineModel<{ id: string; name: string; isChildren?: boolean }[]>('level', {
+    required: true,
+  })
+
+  const computType = computed(() => {
+    return props.type === 1 ? '图纸' : props.type === 3 ? '模型' : '文本'
+  })
+
+  const handleParentId = (type?: string) => {
+    if (level.value.length > 1) {
+      if (type === 'init' && level.value.find((c: any) => c.isChildren)) {
+        return level.value[level.value.length - 2].id || '' // 获取最后一个元素的 id 或 defaul
+      }
+      return level.value[level.value.length - 1].id || '' // 获取最后一个元素的 id 或 defaul
+    }
+    return '0'
+  }
+
+  const projectTypeList = ref<any>([])
+  /** 获取分类下拉框 */
+  const getParent = (type?: string) => {
+    parent({
+      type: 1,
+      // @ts-ignore
+      parentId: handleParentId(type),
+    }).then((res) => {
+      if (Array.isArray(res.data)) {
+        projectTypeList.value = [...[{ id: handleParentId(type), name: '全部' }], ...res.data]
+      }
+    })
+  }
+  getParent('init')
+
+  /** 版本 */
+  const editionsList = ref<any>([])
+  const getEditionsList = () => {
+    parent({
+      type: 2,
+      parentId: 0,
+    }).then((res) => {
+      if (Array.isArray(res.data)) {
+        editionsList.value = [...[{ id: '', name: '全部' }], ...res.data]
+      }
+    })
+  }
+  getEditionsList()
+
+  const handleClick = (row: any) => {
+    query.value.title = ''
+    query.value.projectType = row.id
+    if (row.name === '全部') return
+    const isChildren = level.value.find((c: any) => c.isChildren)
+    if (!row.isChildren && isChildren) {
+      const index = level.value.length - 1
+      level.value[index] = { id: row.id, name: row.name, isChildren: true }
+    } else if (!row.isChildren && !isChildren) {
+      level.value.push({ id: row.id, name: row.name, isChildren: true })
+    } else {
+      level.value.push({ id: row.id, name: row.name })
+      getParent()
+    }
+  }
+
+  const handleClickBread = (row: any, index: number) => {
+    level.value.splice(index + 1)
+    query.value.title = ''
+    query.value.projectType = row.id
+    getParent()
+  }
+</script>