联想搜索

<template>
    <mi-search :data="data" search-key="title" />
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import type { SearchData } from '@miitvip/admin-pro'
    import { ExclamationCircleOutlined, DashboardOutlined } from '@ant-design/icons-vue'

    const data = ref<SearchData[]>([
        {
            title: `关于 MAP`,
            summary: `框架特性 · 设计初衷`,
            icon: ExclamationCircleOutlined,
            path: '/about'
        },
        {
            title: `控制中心`,
            summary: `纵观全局 · 运筹帷幄`,
            icon: DashboardOutlined,
            path: '/dashboard'
        }
    ])
</script>

<template>
    <!-- api ( string ) -->
    <mi-search search-key="title" search-action="/v1/search/components" />

    <!-- action ( function ) -->
    <mi-search :data="data" search-key="title" :search-action="() => handleSearchData()" />
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import type { SearchData } from '@miitvip/admin-pro'

    const data = ref<SearchData[]>()

    const getSearchData = (): SearchData[] => {
        // do something
        return []
    }

    const handleSearchData = async () => {
        // do something
        // get search data
        data.value = await getSearchData()
    }
</script>

<template>
    <mi-search search-key="title" :data="data">
        <template v-slot:itemTemplate>
            <div class="avatar">
                <mi-search-key type="image" tag="img" name="avatar" />
            </div>
            <div class="info">
                <div class="title">
                    <mi-search-key name="title" />
                </div>
                <div class="content">
                    <mi-search-key name="content" />
                </div>
            </div>
        </template>
    </mi-search>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import type { SearchData } from '@miitvip/admin-pro'
    import { ThunderboltOutlined, CrownOutlined } from '@ant-design/icons-vue'

    const data = ref<SearchData[]>([
        {
            title: `快速上手`,
            summary: `一目十行 · 滴水成冰`,
            icon: ThunderboltOutlined,
            path: '/start'
        },
        {
            title: `主题定制`,
            summary: `精妙绝伦 · 美不胜收`,
            icon: CrownOutlined,
            path: '/theming'
        }
    ])
</script>

<style lang="less" scope>
    .avatar {
        width: 2rem;
        /* ... */
    }
</style>