gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
73 lines
2.4 KiB
Vue
73 lines
2.4 KiB
Vue
<template>
|
|
<form
|
|
class="relative"
|
|
:style="accent ? { '--sb-accent': accent } : undefined"
|
|
@submit.prevent="onSearch"
|
|
>
|
|
<input
|
|
v-model="keyword"
|
|
type="text"
|
|
:placeholder="placeholder"
|
|
class="w-56 pl-4 pr-10 py-2 text-sm rounded-full border bg-[#F4F6FA] focus:outline-none focus:bg-white transition-colors"
|
|
:class="inputClass"
|
|
>
|
|
<button
|
|
type="submit"
|
|
class="absolute right-2 top-1/2 -translate-y-1/2 transition-colors"
|
|
:class="iconClass"
|
|
aria-label="搜索"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
/**
|
|
* 共享头部搜索框（Nuxt 自动导入，全局可用）
|
|
* 由各模板 Header 在 logo 右侧以 <SiteSearchBox v-if="showHeaderSearch" /> 挂载。
|
|
* 是否显示由 useSite().showHeaderSearch（后台 setting.searchBtn）控制。
|
|
* 提交后带关键词跳转 /article?keywords=xxx（复用 fetchArticles 的 keywords 参数）。
|
|
*
|
|
* 定位（ml-8 / ml-auto 等）由父组件通过 class 透传（fallthrough 合并到根 <form>）；
|
|
* 视觉主题通过 variant / accent 适配各模板配色。
|
|
*/
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
/** 头部背景：light=浅色头部（默认），dark=深色头部 */
|
|
variant?: 'light' | 'dark'
|
|
/** 主题色（聚焦边框 / 图标 hover 色），支持 CSS 变量名如 'var(--t2-primary)' */
|
|
accent?: string
|
|
placeholder?: string
|
|
}>(),
|
|
{
|
|
variant: 'light',
|
|
placeholder: '请输入关键词...'
|
|
}
|
|
)
|
|
|
|
const router = useRouter()
|
|
const keyword = ref('')
|
|
|
|
const inputClass = computed(() => {
|
|
if (props.variant === 'dark') {
|
|
return 'border-[#333] bg-[#222] text-gray-100 placeholder-gray-500 focus:border-[color:var(--sb-accent,#d4af37)]'
|
|
}
|
|
return 'border-[#E5E7EB] bg-[#F4F6FA] text-gray-800 placeholder-gray-400 focus:border-[color:var(--sb-accent,#1E2A47)]'
|
|
})
|
|
|
|
const iconClass = computed(() => {
|
|
if (props.variant === 'dark') {
|
|
return 'text-gray-300 hover:text-[color:var(--sb-accent,#d4af37)]'
|
|
}
|
|
return 'text-gray-500 hover:text-[color:var(--sb-accent,#1E2A47)]'
|
|
})
|
|
|
|
function onSearch() {
|
|
const kw = keyword.value.trim()
|
|
router.push({ path: '/article', query: kw ? { keywords: kw } : {} })
|
|
}
|
|
</script>
|