150 lines
3.7 KiB
Vue
150 lines
3.7 KiB
Vue
<template>
|
||
<div class="amazon-tool-shell">
|
||
<AmazonTopBar :active-cat="groupKey" />
|
||
|
||
<div class="tool-head">
|
||
<router-link class="tool-head__back" :to="backHref">← 返回{{ group ? group.name : '工具' }}列表</router-link>
|
||
<span class="tool-head__title">{{ tool?.name ?? '' }}</span>
|
||
<span class="tool-head__desc">{{ detailText }}</span>
|
||
<a
|
||
v-if="tool?.id === 'source'"
|
||
class="tool-head__aliprice"
|
||
:href="ALIPRICE_URL"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>Aliprice点击注册</a>
|
||
</div>
|
||
|
||
<!-- 工具说明提示卡已按需求移除（原棕色底 note 卡区域） -->
|
||
|
||
<div class="tool-shell-body">
|
||
<slot />
|
||
</div>
|
||
|
||
<AmazonFooterBar />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
|
||
import AmazonTopBar from '@/pages/amazon/components/AmazonTopBar.vue'
|
||
import AmazonFooterBar from '@/pages/amazon/components/AmazonFooterBar.vue'
|
||
import { TOOL_DETAILS, TOOL_GROUPS, TOOL_MAP } from '@/pages/amazon/tool-catalog'
|
||
import { resolvePageHref } from '@/shared/page-prefix'
|
||
|
||
/** Aliprice 注册推广链接（对齐 gemini-code 工具页头 Aliprice 按钮） */
|
||
const ALIPRICE_URL =
|
||
'https://www.aiprice.com/?ext_id=10100&channel=chrome_offline&platform=1688&version=4.0.5&browser=chrome&mv=3'
|
||
|
||
const props = defineProps<{
|
||
/** 工具 id（见 tool-catalog TOOL_MAP） */
|
||
toolId: string
|
||
}>()
|
||
|
||
const tool = computed(() => TOOL_MAP.get(props.toolId))
|
||
const group = computed(() => TOOL_GROUPS.find((g) => g.tools.some((t) => t.id === props.toolId)))
|
||
const groupKey = computed(() => group.value?.key ?? 'front')
|
||
const detailText = computed(() => {
|
||
if (!tool.value) return ''
|
||
return TOOL_DETAILS[tool.value.id] ?? tool.value.desc
|
||
})
|
||
/** 返回工具台列表对应分组（带锚点） */
|
||
const backHref = computed(() => `${resolvePageHref('/new_web_source/amazon-console.html')}#group-${groupKey.value}`)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.amazon-tool-shell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
background-color: #1a1f2e;
|
||
/* 深色底 + 青色网点纹理（对齐 gemini-code body） */
|
||
background-image: radial-gradient(rgba(45, 212, 191, 0.08) 1px, transparent 1px);
|
||
background-size: 48px 48px;
|
||
font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "微软雅黑", sans-serif;
|
||
}
|
||
|
||
.tool-head {
|
||
flex: 0 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
min-height: 62px;
|
||
padding: 10px 34px;
|
||
background: #1a1f2e;
|
||
}
|
||
|
||
.tool-head__back {
|
||
flex-shrink: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 14px;
|
||
border: 1px solid #3e4a62;
|
||
border-radius: 6px;
|
||
color: #c8d2e2;
|
||
font-size: 13px;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.tool-head__back:hover {
|
||
background: #2b3447;
|
||
color: #f5f8fc;
|
||
}
|
||
|
||
.tool-head__title {
|
||
flex-shrink: 0;
|
||
color: #f5f8fc;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tool-head__desc {
|
||
min-width: 0;
|
||
max-width: 760px;
|
||
color: #a0acbe;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Aliprice 注册按钮（仅货源查询显示，TEAL 渐变，对齐 gemini-code aliprice-btn） */
|
||
.tool-head__aliprice {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-left: 10px;
|
||
padding: 6px 14px;
|
||
background: linear-gradient(135deg, #14b8a6, #0d9488);
|
||
color: #ffffff;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.tool-head__aliprice:hover {
|
||
filter: brightness(1.15);
|
||
}
|
||
|
||
.tool-shell-body {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.tool-head {
|
||
padding: 10px 16px;
|
||
gap: 10px;
|
||
}
|
||
}
|
||
</style>
|