align(全局+asin): 每面板操作提示条(guides对齐旧版admin-interactions.js原文)；asin域行内按钮统一实心small(对齐.btn-sm)；商品类目树折叠钮靛蓝#6366f1改蓝白token

2026-09-06 21:38:16 +08:00
parent 26e062d32c
commit 4742a2e3b5
10 changed files with 315 additions and 13 deletions
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/** 当前页面操作提示条：对齐旧版 admin-interactions.js 的 adminOperationGuide（14 页有独立文案，余用通用 fallback）。
+ *  挂在 AdminLayout 内容区顶部，随 route.meta.menuKey 切换文案；折叠态存 localStorage。 */
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { OPERATION_GUIDE_STORAGE_KEY, operationGuideFor } from '@/layout/operation-guides'
+
+const route = useRoute()
+const guide = computed(() => operationGuideFor(route.meta.menuKey))
+
+function readCollapsed(): boolean {
+  try {
+    return localStorage.getItem(OPERATION_GUIDE_STORAGE_KEY) === '1'
+  } catch {
+    return false
+  }
+}
+function persistCollapsed(value: boolean) {
+  try {
+    localStorage.setItem(OPERATION_GUIDE_STORAGE_KEY, value ? '1' : '0')
+  } catch {
+    // 忽略隐私模式写入失败
+  }
+}
+const collapsed = ref(readCollapsed())
+function toggle() {
+  collapsed.value = !collapsed.value
+  persistCollapsed(collapsed.value)
+}
+watch(collapsed, (v) => persistCollapsed(v))
+</script>
+
+<template>
+  <aside v-if="guide" class="operation-guide" :class="{ 'is-collapsed': collapsed }" aria-label="当前页面操作提示">
+    <div class="og-head">
+      <span class="og-title">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 11v5"></path><path d="M12 8h.01"></path></svg>
+        当前页面操作提示
+      </span>
+      <button type="button" class="og-toggle" :aria-expanded="!collapsed" @click="toggle">
+        {{ collapsed ? '展开提示' : '收起提示' }}
+      </button>
+    </div>
+    <div v-show="!collapsed" class="og-body">
+      <p class="og-text">{{ guide.text }}</p>
+      <ol v-if="guide.steps.length" class="og-steps">
+        <li v-for="step in guide.steps" :key="step">{{ step }}</li>
+      </ol>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.operation-guide {
+  display: flex; flex-direction: column;
+  margin: 0 0 18px; padding: 12px 16px;
+  border: 1px solid #cddbe6; border-radius: 12px;
+  background: linear-gradient(180deg, #fbfdfe, #f4f8fc);
+  box-shadow: 0 10px 26px -24px rgba(39, 67, 94, 0.3);
+  color: var(--admin-text);
+}
+.operation-guide.is-collapsed { padding: 8px 16px; }
+.og-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.og-title {
+  display: inline-flex; align-items: center; gap: 7px;
+  font-size: 13px; font-weight: 650; color: var(--admin-primary-strong);
+}
+.og-title svg { width: 15px; height: 15px; }
+.og-toggle {
+  padding: 0; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: 12px; color: #6b8096;
+}
+.og-toggle:hover { color: var(--admin-primary-strong); }
+.og-body { margin-top: 8px; padding-left: 22px; }
+.og-text { margin: 0; color: #40586e; font-size: 13px; line-height: 1.7; }
+.og-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
+.og-steps li {
+  padding: 2px 10px; border-radius: 999px;
+  background: #e9f1f8; border: 1px solid #d3e0ea;
+  color: #2f4a63; font-size: 12px; line-height: 1.7;
+}
+</style>