for_client/src/views/home/index.vue

<template>
    <div class="home-styles-box">
        <div class="hc-home-input-box">
            <div class="hc-home-content">
                <div class="hc-slogan-icon">
                    <img class="logo" :src="ImgText3" alt="">
                </div>
                <SearchInput v-model="searchKey" placeholder="请输入您想查找的内容" @input="SearchKeyInput" />
                <div class="home-link-box">
                    <span>他们都在搜索：</span>
                    <div class="home-link">
                        <router-link to="/data-fill/wbs">资料填报</router-link>
                    </div>
                    <div class="home-link">
                        <router-link to="/data-fill/query">资料查询</router-link>
                    </div>
                    <div class="home-link">
                        <router-link to="/ledger/query">日志填报</router-link>
                    </div>
                    <div class="home-link">
                        <router-link to="/schedule/data">资料进度</router-link>
                    </div>
                </div>

                <!-- <el-button type="danger" @click="delClick">删除提醒</el-button>

                <el-button type="warning" @click="abnormalClick">异常提醒</el-button> -->
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import SearchInput from '~com/home/SearchInput.vue'
import { apiErrorMessage, delMessageV2 } from '~com/message/index.js'
import ImgText3 from '~src/assets/view/text-3.png'

//变量
const useAppState = useAppStore()
const HomeTheme = ref(useAppState.getHomeTheme)

//监听
watch(() => [
    useAppState.getHomeTheme,
], ([theme]) => {
    HomeTheme.value = theme
})

//搜索
const searchKey = ref('')
const SearchKeyInput = (value) => {
    searchKey.value = value
}

//删除提醒
const delClick = () => {
    delMessageV2((action, instance, done) => {
        if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = 'Loading...'
            setTimeout(() => {
                done()
                setTimeout(() => {
                    instance.confirmButtonLoading = false
                }, 300)
            }, 3000)
        } else {
            done()
        }
    })
}


//删除提醒
const abnormalClick = () => {
    apiErrorMessage()
}
</script>

<style lang="scss" scoped>
@import "../../styles/view/home.scss";
</style>

<style lang="scss">
.home-link a {
    color: inherit;
    text-decoration: none;
}
</style>