Add new components for login and comment functionality
This commit is contained in:
wangqiao
26
layout/default.vue
Normal file
26
layout/default.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="layout-wrap">
|
||||
<div class="flex flex-1 flex-col">
|
||||
<slot></slot>
|
||||
<!-- 右侧固定按钮组 -->
|
||||
<KlQuickMenu></KlQuickMenu>
|
||||
</div>
|
||||
<KlFooter></KlFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import KlFooter from './kl-footer/index.vue'
|
||||
import KlQuickMenu from '@/components/kl-quick-menu/index.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fbfcff;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
139
layout/kl-footer/index.vue
Normal file
139
layout/kl-footer/index.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="mt-30px bg-[#14213d] px-[40px] pb-[20px] pt-[50px] text-white lg:px-[80px] sm:px-[60px]">
|
||||
<!-- 主内容区 -->
|
||||
<div class="mb-[40px] flex flex-col items-start justify-between gap-[30px] lg:flex-row">
|
||||
<!-- 左侧 Logo -->
|
||||
<div class="mx-auto w-[200px] shrink-0 lg:mx0">
|
||||
<img src="@/assets/images/logo5.png" class="h-auto w-full" />
|
||||
</div>
|
||||
|
||||
<!-- 中间部分 -->
|
||||
<div class="grid grid-cols-2 mx-[80px] flex-1 gap-[10px] lg:grid-cols-3">
|
||||
<div v-for="(col, index) in bannerList?.slice(0, 3)" :key="index">
|
||||
<h3 v-if="handle(col)" class="ma-0px mb-[20px] pa-0px text-[16px]">{{ handle(col) }}</h3>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, i) in handle2(col)"
|
||||
:key="i"
|
||||
class="mb-[15px] cursor-pointer text-[15px] text-white/90"
|
||||
:class="{ 'cursor-pointer hover:text-blue-400!': item.url }"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧二维码 -->
|
||||
<div class="flex shrink-0 flex-row gap-[30px]">
|
||||
<div
|
||||
v-for="(qr, i) in bannerList?.[3]"
|
||||
:key="i"
|
||||
class="text-center"
|
||||
:class="{ 'cursor-pointer hover:text-blue-400!': qr.url }"
|
||||
@click="handleClick(qr)"
|
||||
>
|
||||
<el-image :src="qr.content" class="mx-auto mb-[10px] w-[120px] rounded-lg bg-gray-400/20" />
|
||||
<p class="text-[15px] text-white/90" :class="{ 'cursor-pointer hover:text-blue-400!': qr.url }">{{ qr.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部版权 -->
|
||||
<div class="border-t border-white/20 pt-[20px] text-center text-[14px] text-white/70">
|
||||
Copyright 2007-2025 图夕夕网络科技(成都)有限公司
|
||||
<a href="http://beian.miit.gov.cn/" target="_blank" class="text-white/90 hover:text-blue-400!"> 蜀ICP备2025141494号-1</a>
|
||||
</div>
|
||||
|
||||
<el-image-viewer v-if="showViewer" :url-list="previewImgList" :url-index="0" @close="showViewer = false"></el-image-viewer>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
import { getSettingPage } from '@/api/home/index'
|
||||
import { PageResultIndexSettingRespVO } from '@/api/home/type'
|
||||
|
||||
// 导航数据
|
||||
// const columns = [
|
||||
// {
|
||||
// title: '联系与合作',
|
||||
// items: ['关于我们', '联系我们', '免责声明', '常见问题'],
|
||||
// },
|
||||
// {
|
||||
// title: '关注我们',
|
||||
// items: ['微信订阅号：多多机械', '微信服务号：多多网', '技术交流群：点此加入', '创收平台：为设计师创造收益'],
|
||||
// },
|
||||
// ]
|
||||
|
||||
// 二维码数据（需要替换真实图片路径）
|
||||
// const qrcodes = [
|
||||
// {
|
||||
// img: new URL('@/assets/images/logo2.png', import.meta.url).href,
|
||||
// text: '抖音电商关注官方号',
|
||||
// },
|
||||
// {
|
||||
// img: new URL('@/assets/images/logo2.png', import.meta.url).href,
|
||||
// text: '微信扫码关注官方助手',
|
||||
// },
|
||||
// ]
|
||||
|
||||
const pageReq = reactive({
|
||||
type: 3,
|
||||
status: 0,
|
||||
})
|
||||
|
||||
const bannerList = ref<Array<PageResultIndexSettingRespVO[]>>([])
|
||||
const getBanner = async () => {
|
||||
const res = await getSettingPage(pageReq)
|
||||
if (res.code === 0) {
|
||||
const arr = res.data || []
|
||||
const bannerListOne = arr.filter((item) => item.rowType === 1)?.sort((a, b) => a.sort - b.sort)
|
||||
const bannerListTwo = arr.filter((item) => item.rowType === 2)?.sort((a, b) => a.sort - b.sort)
|
||||
const bannerListThree = arr.filter((item) => item.rowType === 3)?.sort((a, b) => a.sort - b.sort)
|
||||
const bannerListFour = arr.filter((item) => item.rowType === 4)?.sort((a, b) => a.sort - b.sort)
|
||||
bannerList.value = [bannerListOne, bannerListTwo, bannerListThree, bannerListFour]
|
||||
}
|
||||
}
|
||||
getBanner()
|
||||
|
||||
const handle = (col: PageResultIndexSettingRespVO[]) => {
|
||||
if (col?.length > 0) {
|
||||
return col[0].name
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const handle2 = (col: PageResultIndexSettingRespVO[]) => {
|
||||
if (col?.length > 0) {
|
||||
return col.slice(1)
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param item.innerType 区分 底部信息展示 0 文本 1 图片地址 2 站内链接地址 3 外部链接地址 4 富文本
|
||||
*/
|
||||
const showViewer = ref(false)
|
||||
const previewImgList = ref<string[]>([])
|
||||
const handleClick = (item: PageResultIndexSettingRespVO) => {
|
||||
if (item.content && (item.innerType === 3 || item.innerType === 2)) {
|
||||
window.open(item.content, '_blank')
|
||||
} else if (item.content && (item.innerType === 4 || item.innerType === 0)) {
|
||||
window.open(`/editor-view?content=${encodeURIComponent(item.content)}`, '_blank')
|
||||
} else if (item.innerType === 1 && item.content) {
|
||||
showViewer.value = true
|
||||
previewImgList.value = [item.content]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
ul {
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
layout/kl-menus-v2/index.vue
Normal file
105
layout/kl-menus-v2/index.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="box-border">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
<div class="box-border h-100% h-55px w-221px flex items-center rounded-lg bg-[#1A65FF] pl-24px text-white">
|
||||
<img src="@/assets/images/1.png" alt="" srcset="" />
|
||||
<span class="ml-12px text-16px">全部资源分类</span>
|
||||
</div>
|
||||
<div class="item-center ml-45px w-660px flex justify-between">
|
||||
<router-link
|
||||
v-for="(item, index) in menuItems"
|
||||
:key="index"
|
||||
target="_blank"
|
||||
:to="item.path"
|
||||
class="parent-links relative rounded-lg px3 py2 text-[#1A65FF]"
|
||||
>
|
||||
{{ item.name }}
|
||||
<img v-if="item.path === '/communication/channel'" src="@/assets/images/hot.png" alt="火" class="absolute right--15px top--2px" />
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isLogin" class="flex flex-1 items-center justify-end">
|
||||
<div class="h-36px w-36px cursor-pointer border-rd-[50%] bg-[#F5F5F5] text-center line-height-44px" @click="handleUserCenter">
|
||||
<img src="@/assets/images/user.png" alt="" srcset="" class="h-19px w-17px" />
|
||||
</div>
|
||||
<div class="ml-8px h-36px w-36px cursor-pointer border-rd-[50%] text-center line-height-44px" @click="handleMessageCenter">
|
||||
<el-icon size="20px" color="#999999"><BellFilled /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import useUserStore from '@/store/user'
|
||||
const userStore = useUserStore()
|
||||
import { BellFilled } from '@element-plus/icons-vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const menuItems = ref([
|
||||
{ name: '首页', path: '/index' },
|
||||
{ name: '图纸', path: '/drawe' },
|
||||
{ name: '文本', path: '/text' },
|
||||
{ name: '模型', path: '/model' },
|
||||
{ name: '国外专区', path: '/foreign' },
|
||||
{ name: '工具箱', path: '/toolbox' },
|
||||
{ name: '交流频道', path: '/communication/channel' },
|
||||
// { name: '牛人社区', path: '/community' },
|
||||
])
|
||||
|
||||
// 是否登录
|
||||
const isLogin = computed(() => {
|
||||
return !!userStore.token
|
||||
})
|
||||
|
||||
// 用户中心
|
||||
const handleUserCenter = () => {
|
||||
router.push('/personal/center/info')
|
||||
}
|
||||
|
||||
// 消息中心
|
||||
const handleMessageCenter = () => {
|
||||
router.push('/personal/center/message')
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
/* 覆盖默认的input number样式 */
|
||||
input[type='number']::-webkit-inner-spin-button,
|
||||
input[type='number']::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
/* 自定义滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
.parent-links {
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
color: #1a65ff;
|
||||
&:hover {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
layout/kl-menus/index.vue
Normal file
66
layout/kl-menus/index.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="kl-menu">
|
||||
<el-scrollbar height="100%">
|
||||
<el-menu class="el-menu-vertical" :default-active="activeRouteComputed" router>
|
||||
<KlMenuItem
|
||||
v-for="menu in childRoutes"
|
||||
:key="menu?.component?.toString()"
|
||||
:title="menu?.meta?.title + ''"
|
||||
:children="menu.children"
|
||||
:index="menu.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import KlMenuItem from './kl-menu-item.vue'
|
||||
import { RouteRecordRaw, useRoute } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const modulesFiles = import.meta.globEager('@/router/modules/*.ts')
|
||||
const childRoutes: RouteRecordRaw[] = []
|
||||
Object.keys(modulesFiles).forEach((path: string) => {
|
||||
const module = modulesFiles[path] as any
|
||||
if (module?.default) {
|
||||
childRoutes.push(...module.default)
|
||||
}
|
||||
}, {})
|
||||
|
||||
const route = useRoute()
|
||||
const activeRouteComputed = computed(() => {
|
||||
return route.path
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.kl-menu {
|
||||
height: 100%;
|
||||
::v-deep(.el-scrollbar) {
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
display: block !important;
|
||||
.el-scrollbar__thumb {
|
||||
width: 0px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu-vertical {
|
||||
border: none;
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
font-size: 15px;
|
||||
}
|
||||
.el-menu-item.is-active {
|
||||
background-color: #ebf1ff;
|
||||
border-right: 4px solid $color-primary;
|
||||
}
|
||||
.el-sub-menu {
|
||||
.el-menu-item {
|
||||
text-indent: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
58
layout/kl-menus/kl-menu-item.vue
Normal file
58
layout/kl-menus/kl-menu-item.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<el-menu-item v-if="!props.children?.length" :index="props.index">
|
||||
<template #title>
|
||||
<span>{{ props.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
<el-sub-menu v-else-if="props.children.length" :index="props.index + props.title">
|
||||
<template #title>
|
||||
<span>{{ props.title }}</span>
|
||||
</template>
|
||||
<KlMenuItem v-for="menu in props.children" :key="menu.path" :title="menu.meta?.title || ''" :children="menu.children" :index="menu.path"></KlMenuItem>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType } from 'vue'
|
||||
import { RouteRecordRaw } from 'vue-router'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
children: {
|
||||
type: Array as PropType<RouteRecordRaw[]>,
|
||||
default: () => [],
|
||||
},
|
||||
index: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.el-sub-menu) {
|
||||
.el-menu-item {
|
||||
display: flex;
|
||||
span {
|
||||
text-indent: 6px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: #bcbfc5;
|
||||
border-radius: 10px;
|
||||
margin-left: -4px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
153
layout/kl-search/index.vue
Normal file
153
layout/kl-search/index.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div>
|
||||
<header class="h-106px">
|
||||
<div class="mx-a ml--250px h-full flex items-center justify-center">
|
||||
<!-- Logo区域 -->
|
||||
<div class="h-100% flex cursor-pointer items-center" @click="router.push('/index')">
|
||||
<img src="@/assets/images/logo5.png" alt="图夕夕" class="h-51px w-182px" />
|
||||
</div>
|
||||
<!-- 搜索区域 -->
|
||||
<div class="relative ml-49px w-647px px4 p-r-0px!">
|
||||
<div class="search-input relative w-100%">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="搜一搜"
|
||||
:prefix-icon="Search"
|
||||
class="no-right-border box-border h40 w-100% rounded-bl-4px rounded-br-0px rounded-tl-4px rounded-tr-0px bg-[#F8F8F8] text-14px outline-#999"
|
||||
@focus="handleHot(), (showHotList = true)"
|
||||
@input="handleInput"
|
||||
/>
|
||||
</div>
|
||||
<!-- 搜索框 获取到焦点 显示热门列表 -->
|
||||
<div
|
||||
v-if="showHotList"
|
||||
v-loading="loading"
|
||||
class="absolute z-100 w-625px border-width-1px border-color-#1A65FF rounded-bl-4px rounded-br-4px rounded-tl-0px rounded-tr-0px border-solid bg-[#fff] pa-10px"
|
||||
>
|
||||
<!-- 这里放置热门列表的内容 -->
|
||||
<ul class="flex flex-col gap-6px">
|
||||
<li
|
||||
v-for="(item, index) in hotItems"
|
||||
:key="index"
|
||||
class="flex flex-row cursor-pointer items-center justify-between text-13px"
|
||||
@click="handleHotItem(item)"
|
||||
>
|
||||
<span class="color-#333333">{{ item.projectTypeName }}</span>
|
||||
<span v-if="item.count" class="color-#999999">{{ item.count }}份图纸</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="!hotItems.length" class="text-12px color-#999">无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 按钮区域 -->
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="h-40px w-111px cursor-pointer border-width-1px border-color-#1A65FF rounded-bl-0px rounded-br-4px rounded-tl-0px rounded-tr-4px border-none border-solid text-center text-14px color-#fff bg-#1A65FF!"
|
||||
>
|
||||
搜索
|
||||
</button>
|
||||
<button
|
||||
class="m-l-16px h-40px w-111px cursor-pointer border-width-1px border-color-#E7B03B rounded-bl-6px rounded-br-6px rounded-tl-4px rounded-tr-6px border-none border-solid text-14px color-#fff bg-#E7B03B!"
|
||||
@click="handleUpload"
|
||||
>
|
||||
上传图纸
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import useUserStore from '@/store/user'
|
||||
import router from '@/router'
|
||||
const userStore = useUserStore()
|
||||
|
||||
import { top } from '@/api/home/index'
|
||||
import type { ProjectDrawStatisticAppRespVO } from '@/api/home/type'
|
||||
import { page } from '@/api/upnew/index'
|
||||
|
||||
const searchQuery = ref('')
|
||||
const showHotList = ref(false)
|
||||
const hotItems = ref<ProjectDrawStatisticAppRespVO[]>([])
|
||||
|
||||
const handleUpload = () => {
|
||||
// 是否登录
|
||||
if (!userStore.token) return ElMessage.error('请先登录')
|
||||
// 新开窗口 用router跳转 新窗口打开
|
||||
window.open('/upnew/drawe', '_blank')
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const handleHot = async () => {
|
||||
loading.value = true
|
||||
const res = await top({
|
||||
limit: 10,
|
||||
type: 1, // 1 图纸 2 模型 3 文本
|
||||
})
|
||||
hotItems.value = res.data
|
||||
loading.value = false
|
||||
}
|
||||
handleHot()
|
||||
|
||||
const timer = ref(0)
|
||||
const handleInput = (val: string) => {
|
||||
searchQuery.value = val
|
||||
loading.value = true
|
||||
if (timer.value) {
|
||||
window.clearTimeout(timer.value)
|
||||
}
|
||||
timer.value = window.setTimeout(async () => {
|
||||
console.log('searchQuery', searchQuery.value)
|
||||
const res = await page({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
type: 1, // 1 图纸 2 模型 3 文本
|
||||
title: searchQuery.value, // 1 图纸 2 模型 3 文本
|
||||
})
|
||||
if (res.code === 0) {
|
||||
hotItems.value = res.data.list.map((c) => {
|
||||
return { ...c, projectTypeName: c.title }
|
||||
})
|
||||
}
|
||||
loading.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const handleHotItem = (item: ProjectDrawStatisticAppRespVO) => {
|
||||
const normal = { id: '0', name: '图纸库', isChildren: false }
|
||||
const level = item.pairs?.filter(Boolean).map((item) => ({ id: item?.id, name: item?.name, isChildren: false })) || []
|
||||
level.unshift(normal)
|
||||
if (item.type === 1) {
|
||||
window.open(`/drawe?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
||||
} else if (item.type === 2) {
|
||||
window.open(`/text?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
||||
} else if (item.type === 3) {
|
||||
window.open(`/model?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 监听点击事件
|
||||
document.addEventListener('click', (event) => {
|
||||
const target = event.target as HTMLElement
|
||||
if (!target.closest('.search-input')) {
|
||||
showHotList.value = false
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.no-right-border :deep(.el-input__wrapper) {
|
||||
border-right: none !important;
|
||||
/* box-shadow: -1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset !important; */
|
||||
}
|
||||
|
||||
/* 如果需要调整右侧圆角，可以添加 */
|
||||
.no-right-border :deep(.el-input__wrapper) {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user