feat(frontend-vue): 亚马逊运营工具台与新功能页接入——新版工具台(amazon-console+tool-catalog)、品牌检测/ASIN变体采集/查询ASIN 三个工具页 Vue 化并对接既有后端与桌面桥接；桌面首页/登录页 Vue 化(沿用旧视觉)；补充 vc_*/get_device_id/save_file_from_url 桥类型、dev 代理；品牌默认勾选排名+FBM；修正 query-asin 标题
含未提交新版改造累积：Brand*Tab 套入工具台壳(AmazonToolPageShell/AmazonTopBar)与目录/权限联动。
This commit is contained in:
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<header class="amazon-top">
|
||||
<div class="brand">
|
||||
<span class="brand-logo">富</span>
|
||||
<div class="brand-text">
|
||||
<span class="brand-name">数富AI</span>
|
||||
<span class="brand-sub">亚马逊运营工具台</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="cat-tabs" aria-label="分类导航">
|
||||
<template v-for="cat in visibleCats" :key="cat.key">
|
||||
<a
|
||||
class="cat-tab"
|
||||
:class="{ 'cat-tab--active': cat.key === activeCat }"
|
||||
:href="`${toolbarHref}#group-${cat.key}`"
|
||||
>
|
||||
<span class="cat-dot" :style="{ background: cat.color }"></span>
|
||||
<span class="cat-name">{{ cat.name }}</span>
|
||||
<span class="cat-badge" :style="badgeStyle(cat)">{{ cat.tools.length }}</span>
|
||||
<span class="cat-underline" :style="{ background: cat.color }"></span>
|
||||
</a>
|
||||
</template>
|
||||
</nav>
|
||||
|
||||
<div class="top-right">
|
||||
<a href="/home" class="btn-home">返回首页</a>
|
||||
<BrandApiSecretSettingsButton />
|
||||
<span class="help-mark" title="帮助">?</span>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
import BrandApiSecretSettingsButton from '@/pages/brand/components/BrandApiSecretSettingsButton.vue'
|
||||
import { filterGroupsByPermission, TOOL_GROUPS } from '@/pages/amazon/tool-catalog'
|
||||
import type { VisibleGroup } from '@/pages/amazon/tool-catalog'
|
||||
import { resolvePageHref } from '@/shared/page-prefix'
|
||||
import { getCurrentUserAppColumnKeys } from '@/shared/api/permission'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
/** 当前工具所属分类（功能页高亮对应 tab；工具台首页不传） */
|
||||
activeCat?: 'front' | 'ops' | 'logi'
|
||||
}>(),
|
||||
{
|
||||
activeCat: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const activeCat = computed(() => props.activeCat)
|
||||
const visibleCats = ref<VisibleGroup[]>(TOOL_GROUPS.map((group) => ({ ...group, tools: [...group.tools] })))
|
||||
|
||||
/** 分类 tab 点击回到工具台对应分组 */
|
||||
const toolbarHref = resolvePageHref('/new_web_source/amazon-console.html')
|
||||
|
||||
function badgeStyle(cat: VisibleGroup) {
|
||||
return activeCat.value === cat.key ? { background: cat.color } : {}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const keys = await getCurrentUserAppColumnKeys()
|
||||
visibleCats.value = filterGroupsByPermission(TOOL_GROUPS, keys)
|
||||
} catch (_error) {
|
||||
// 权限接口异常时展示全部分类，避免顶栏空白
|
||||
visibleCats.value = TOOL_GROUPS.map((group) => ({ ...group, tools: [...group.tools] }))
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.amazon-top {
|
||||
flex: 0 0 auto;
|
||||
min-height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 0 24px;
|
||||
background: #151a25;
|
||||
border-bottom: 1px solid #2a3344;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 9px;
|
||||
background: #f59e0b;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
color: #f5f8fc;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-sub {
|
||||
color: #5e6878;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cat-tabs {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.cat-tab {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 132px;
|
||||
height: 38px;
|
||||
padding: 0 14px;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: #c8d2e2;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: background 0.18s ease, color 0.18s ease;
|
||||
}
|
||||
|
||||
.cat-tab:hover {
|
||||
background: #232a3b;
|
||||
color: #f5f8fc;
|
||||
}
|
||||
|
||||
.cat-tab--active {
|
||||
background: #3d4a63;
|
||||
color: #f5f8fc;
|
||||
}
|
||||
|
||||
.cat-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cat-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 22px;
|
||||
height: 18px;
|
||||
padding: 0 4px;
|
||||
border-radius: 999px;
|
||||
background: #2b3447;
|
||||
color: #5e6878;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.cat-tab--active .cat-badge {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cat-underline {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: -4px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cat-tab--active .cat-underline {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-home {
|
||||
color: #a0acbe;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-home:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.help-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: #232a3b;
|
||||
color: #a0acbe;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.amazon-top {
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.cat-tabs {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user