fix: debug
This commit is contained in:
osiris
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive } from 'vue'
|
// import { reactive } from 'vue'
|
||||||
// import { copy } from '@/utils/string'
|
// import { copy } from '@/utils/string'
|
||||||
// const info = reactive({
|
// const info = reactive({
|
||||||
// title: "关于本站",
|
// title: "关于本站",
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Star } from '@element-plus/icons-vue'
|
// import { Star } from '@element-plus/icons-vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
title: String
|
title: String
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import 'element-plus/theme-chalk/display.css'
|
|||||||
import { ToolsInfo } from '@/api/tools/type';
|
import { ToolsInfo } from '@/api/tools/type';
|
||||||
import router from '@/router';
|
import router from '@/router';
|
||||||
|
|
||||||
const isNavDrawer = ref(false)
|
// const isNavDrawer = ref(false)
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const options = ref<ToolsInfo[]>([])
|
const options = ref<ToolsInfo[]>([])
|
||||||
//store
|
//store
|
||||||
@@ -29,21 +29,21 @@ const getToolCates = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//search
|
//search
|
||||||
const search = async () => {
|
// const search = async () => {
|
||||||
try {
|
// try {
|
||||||
await toolsStore.getTools(searchParam)
|
// await toolsStore.getTools(searchParam)
|
||||||
//关闭抽屉
|
// //关闭抽屉
|
||||||
isNavDrawer.value = false
|
// isNavDrawer.value = false
|
||||||
} catch (error) {
|
// } catch (error) {
|
||||||
console.log(error)
|
// console.log(error)
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
//选择分类
|
//选择分类
|
||||||
const chooseCate = (cateId: number) => {
|
// const chooseCate = (cateId: number) => {
|
||||||
searchParam.cateId = cateId
|
// searchParam.cateId = cateId
|
||||||
search()
|
// search()
|
||||||
}
|
// }
|
||||||
|
|
||||||
//搜索工具
|
//搜索工具
|
||||||
const searchTools = async (query: string) => {
|
const searchTools = async (query: string) => {
|
||||||
|
|||||||
@@ -1,157 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
|
||||||
import { Search } from '@element-plus/icons-vue';
|
|
||||||
import { useToolsStore } from '@/store/modules/tools'
|
|
||||||
import { useComponentStore } from '@/store/modules/component'
|
|
||||||
import { ElMessageBox } from 'element-plus'
|
|
||||||
import 'element-plus/theme-chalk/display.css'
|
|
||||||
import { ToolsInfo } from '@/api/tools/type';
|
|
||||||
import router from '@/router';
|
|
||||||
|
|
||||||
const isNavDrawer = ref(false)
|
|
||||||
const loading = ref(false)
|
|
||||||
const options = ref<ToolsInfo[]>([])
|
|
||||||
//store
|
|
||||||
const toolsStore = useToolsStore()
|
|
||||||
const componentStore = useComponentStore()
|
|
||||||
//查询参数
|
|
||||||
const searchParam = reactive({
|
|
||||||
cateId: 0,
|
|
||||||
title: ''
|
|
||||||
})
|
|
||||||
//获取分类
|
|
||||||
const getToolCates = async () => {
|
|
||||||
try {
|
|
||||||
await toolsStore.getToolCate()
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//search
|
|
||||||
const search = async () => {
|
|
||||||
try {
|
|
||||||
await toolsStore.getTools(searchParam)
|
|
||||||
//关闭抽屉
|
|
||||||
isNavDrawer.value = false
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//选择分类
|
|
||||||
const chooseCate = (cateId: number) => {
|
|
||||||
searchParam.cateId = cateId
|
|
||||||
search()
|
|
||||||
}
|
|
||||||
|
|
||||||
//搜索工具
|
|
||||||
const searchTools = async (query: string) => {
|
|
||||||
loading.value = true
|
|
||||||
if (query) {
|
|
||||||
searchParam.title = query
|
|
||||||
await toolsStore.getTools(searchParam)
|
|
||||||
} else {
|
|
||||||
options.value = []
|
|
||||||
}
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const optionClick = (url: string) => {
|
|
||||||
router.push(url)
|
|
||||||
}
|
|
||||||
|
|
||||||
//收藏
|
|
||||||
const collect = () => {
|
|
||||||
ElMessageBox({
|
|
||||||
title: '提示',
|
|
||||||
message: '请使用快捷键`Ctrl+D`进行收藏'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getToolCates()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<header class="h-20 w-full flex justify-between pt-2 pb-2 c-xs:h-16 c-xs:border-b-[1px] items-center">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<Transition name="fold" class="hidden c-sm:block c-md:hidden c-xs:block">
|
|
||||||
<svg v-if="!componentStore.leftComDrawer" @click="componentStore.setleftComDrawerStatus(true)" t="1702978210636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7618" width="30" height="30">
|
|
||||||
<path fill="#444" fill-opacity=".9" d="M895.936 256l-768-0.896 0.128-64L896 192l-0.064 64zM179.2 689.152l202.688-152a32 32 0 0 0 0-51.2L179.2 333.952a32 32 0 0 0-51.2 25.6v304a32 32 0 0 0 51.2 25.6z m12.8-89.6v-176l117.312 88L192 599.552zM896 544H480v-64H896v64z m-0.064 288l-768-0.896 0.128-64L896 768l-0.064 64z" p-id="7619"></path>
|
|
||||||
</svg>
|
|
||||||
<svg v-else @click="componentStore.setleftComDrawerStatus(false)" t="1702978577170" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1587" width="30" height="30">
|
|
||||||
<path fill="#444" fill-opacity=".9" d="M128.064 192l768 0.896-0.128 64L128 256l0.064-64z m514.048 294.848a32 32 0 0 0 0 51.2l202.688 152a32 32 0 0 0 51.2-25.6v-304a32 32 0 0 0-51.2-25.6l-202.688 152zM832 424.448v176l-117.312-88L832 424.448zM128 480h416v64H128v-64z m0.064 288l768 0.896-0.128 64L128 832l0.064-64z" p-id="1588"></path>
|
|
||||||
</svg>
|
|
||||||
</Transition>
|
|
||||||
|
|
||||||
<!-- c-md:block -->
|
|
||||||
<Transition name="fold" class="hidden c-md:block">
|
|
||||||
<svg v-if="!componentStore.leftCom" @click="componentStore.setLeftComStatus(true)" t="1702978577170" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1587" width="30" height="30">
|
|
||||||
<path fill="#444" fill-opacity=".9" d="M128.064 192l768 0.896-0.128 64L128 256l0.064-64z m514.048 294.848a32 32 0 0 0 0 51.2l202.688 152a32 32 0 0 0 51.2-25.6v-304a32 32 0 0 0-51.2-25.6l-202.688 152zM832 424.448v176l-117.312-88L832 424.448zM128 480h416v64H128v-64z m0.064 288l768 0.896-0.128 64L128 832l0.064-64z" p-id="1588"></path>
|
|
||||||
</svg>
|
|
||||||
<svg v-else @click="componentStore.setLeftComStatus(false)" t="1702978210636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7618" width="30" height="30">
|
|
||||||
<path fill="#444" fill-opacity=".9" d="M895.936 256l-768-0.896 0.128-64L896 192l-0.064 64zM179.2 689.152l202.688-152a32 32 0 0 0 0-51.2L179.2 333.952a32 32 0 0 0-51.2 25.6v304a32 32 0 0 0 51.2 25.6z m12.8-89.6v-176l117.312 88L192 599.552zM896 544H480v-64H896v64z m-0.064 288l-768-0.896 0.128-64L896 768l-0.064 64z" p-id="7619"></path>
|
|
||||||
</svg>
|
|
||||||
</Transition>
|
|
||||||
|
|
||||||
<div class="w-80">
|
|
||||||
<!-- <el-input
|
|
||||||
v-model="searchParam.title"
|
|
||||||
placeholder="搜索工具"
|
|
||||||
class="h-10 ml-3"
|
|
||||||
@keyup.enter.native="search">
|
|
||||||
<template #append>
|
|
||||||
<el-button :icon="Search" @click="search"/>
|
|
||||||
</template>
|
|
||||||
</el-input> -->
|
|
||||||
<el-select
|
|
||||||
v-model="searchParam.title"
|
|
||||||
filterable
|
|
||||||
remote
|
|
||||||
reserve-keyword
|
|
||||||
remote-show-suffix
|
|
||||||
:suffix-transition="false"
|
|
||||||
:suffix-icon="Search"
|
|
||||||
placeholder="输入关键词搜索，如文本、json、图片等"
|
|
||||||
:remote-method="searchTools"
|
|
||||||
:loading="loading"
|
|
||||||
class="ml-3 w-80"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in toolsStore.list"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.title"
|
|
||||||
:value="item.id"
|
|
||||||
@click="optionClick(item.url)"
|
|
||||||
>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=" w-full md:w-auto flex c-xs:hidden md:block">
|
|
||||||
<ul class="flex mt-4 flex-col md:flex-row md:mt-0 justify-end items-center">
|
|
||||||
<li class="hover:text-blue-500">
|
|
||||||
<el-button link size="large" @click="collect">收藏本站</el-button>
|
|
||||||
</li>
|
|
||||||
<!-- <li class="ml-3 hover:text-blue-500"> -->
|
|
||||||
<!-- <el-button round>登录/注册</el-button> -->
|
|
||||||
<!-- </li> -->
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.fold-enter-active {
|
|
||||||
transition: all 1s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fold-enter-from,
|
|
||||||
.fold-leave-to {
|
|
||||||
transform: translateX(20px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user