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)与目录/权限联动。
2026-09-07 11:06:05 +08:00
parent f6c44d1b92
commit d2301db292
43 changed files with 4513 additions and 614 deletions
@@ -0,0 +1,112 @@
+<template>
+  <div class="amazon-tool-shell">
+    <AmazonTopBar :active-cat="groupKey" />
+
+    <div class="tool-head">
+      <a class="tool-head__back" :href="backHref">← 返回{{ group ? group.name : '工具' }}列表</a>
+      <span class="tool-head__sep"></span>
+      <span class="tool-head__title">{{ tool?.name ?? '' }}</span>
+      <span class="tool-head__desc">{{ detailText }}</span>
+    </div>
+
+    <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'
+
+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;
+}
+
+.tool-head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 62px;
+  padding: 10px 34px;
+  background: #151a25;
+  border-bottom: 1px solid #2a3344;
+}
+
+.tool-head__back {
+  flex-shrink: 0;
+  color: #c8d2e2;
+  font-size: 13px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.tool-head__back:hover {
+  color: #fff;
+}
+
+.tool-head__sep {
+  flex-shrink: 0;
+  width: 1px;
+  height: 18px;
+  background: #3e4a62;
+}
+
+.tool-head__title {
+  flex-shrink: 0;
+  color: #f5f8fc;
+  font-size: 20px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.tool-head__desc {
+  min-width: 0;
+  overflow: hidden;
+  color: #a0acbe;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tool-shell-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+@media (max-width: 1100px) {
+  .tool-head {
+    padding: 10px 16px;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+}
+</style>