hrp-ui-base 1.4.6 → 1.4.7

package/src/components/layout/personalization-guide-dialog.vue

@@ -1,255 +1,255 @@
-<template>
-  <teleport to="body">
-    <div v-if="tourVisible" class="personalization-guide-layer">
-      <div class="guide-highlight" :style="highlightStyle"></div>
-      <div ref="bubbleRef" class="guide-bubble" :style="bubbleStyle">
-        <span class="guide-arrow" :style="arrowStyle"></span>
-        <div class="guide-step">
-          <div class="guide-head">
-            <div>
-              <div class="guide-step-count">步骤 {{ currentStepIndex + 1 }} / {{ guideSteps.length }}</div>
-              <div class="guide-step-title">{{ currentStep.title }}</div>
-            </div>
-            <div class="guide-dots">
-              <span
-                v-for="(_, index) in guideSteps"
-                :key="index"
-                :class="['guide-dot', { 'is-active': index === currentStepIndex, 'is-done': index < currentStepIndex }]"
-              ></span>
-            </div>
-          </div>
-
-          <el-radio-group
-            v-if="currentStep.key === 'menuPosition'"
-            v-model="guideForm.menuPosition"
-            class="guide-control"
-            @change="applyPreview"
-          >
-            <el-radio-button label="top">顶部</el-radio-button>
-            <el-radio-button label="left">左侧</el-radio-button>
-          </el-radio-group>
-
-          <el-radio-group
-            v-if="currentStep.key === 'fontSize'"
-            v-model="guideForm.fontSize"
-            class="guide-control"
-            @change="applyPreview"
-          >
-            <el-radio-button label="small">小</el-radio-button>
-            <el-radio-button label="medium">中</el-radio-button>
-            <el-radio-button label="large">大</el-radio-button>
-          </el-radio-group>
-
-          <el-radio-group
-            v-if="currentStep.key === 'colorMode'"
-            v-model="guideForm.colorMode"
-            class="guide-control"
-            @change="applyPreview"
-          >
-            <el-radio-button label="day">日间</el-radio-button>
-            <el-radio-button label="night">黑夜</el-radio-button>
-          </el-radio-group>
-
-          <div class="guide-step-desc">{{ currentStep.desc }}</div>
-        </div>
-
-        <div class="guide-footer">
-          <el-button class="guide-skip-button" link :disabled="saving" @click="skipGuide">跳过</el-button>
-          <el-button class="guide-next-button" type="primary" :loading="saving" @click="goNextStep">
-            {{ isLastStep ? "完成" : "下一步" }}
-          </el-button>
-        </div>
-      </div>
-    </div>
-  </teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
-
-type MenuPosition = "top" | "left";
-type FontSize = "small" | "medium" | "large";
-type ColorMode = "day" | "night";
-type GuideStepKey = "menuPosition" | "fontSize" | "colorMode";
-
-const props = defineProps<{
-  visible: boolean
-  menuPosition?: string
-  fontSize?: string
-  dayOrNight?: string
-  followSystem?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void
-  (e: 'preview', config: { menuPosition: string; fontSize: string; colorMode: string; followSystem: boolean }): void
-  (e: 'finish', config: { menuPosition: string; fontSize: string; colorMode: string }): void
-  (e: 'skip'): void
-  (e: 'restore', config: { menuPosition: string; fontSize: string; followSystem: boolean; dayOrNight: string }): void
-}>()
-
-const tourVisible = ref(false);
-const saving = ref(false);
-const currentStepIndex = ref(0);
-const bubbleRef = ref<HTMLElement>();
-const highlightStyle = ref<Record<string, string>>({});
-const bubbleStyle = ref<Record<string, string>>({});
-const arrowStyle = ref<Record<string, string>>({});
-
-const guideSteps: { key: GuideStepKey; title: string; desc: string; targetId: string; }[] = [
-  { key: "menuPosition", title: "菜单栏位置", desc: "选择左侧后，菜单会移动到页面左侧。", targetId: "tourMenuPositionId" },
-  { key: "fontSize", title: "字体大小", desc: "可以先预览显示效果，完成后会保存到个性化配置。", targetId: "tourFontSizeId" },
-  { key: "colorMode", title: "黑夜模式", desc: "完成后仍然可以在右上角图标中继续调整。", targetId: "tourDarkId" },
-];
-
-const currentStep = computed(() => guideSteps[currentStepIndex.value]);
-const isLastStep = computed(() => currentStepIndex.value === guideSteps.length - 1);
-
-const guideForm = reactive<{ menuPosition: MenuPosition; fontSize: FontSize; colorMode: ColorMode }>({
-  menuPosition: "top",
-  fontSize: "medium",
-  colorMode: "day",
-});
-
-const originalConfig = ref({
-  menuPosition: "top" as MenuPosition,
-  fontSize: "medium" as FontSize,
-  followSystem: false,
-  dayOrNight: "day" as ColorMode,
-});
-
-const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
-const waitFrame = () => new Promise<void>((resolve) => { window.requestAnimationFrame(() => resolve()); });
-const getStepTarget = () => document.getElementById(currentStep.value.targetId);
-
-const syncGuideForm = () => {
-  guideForm.menuPosition = (props.menuPosition || "top") as MenuPosition;
-  guideForm.fontSize = (props.fontSize || "medium") as FontSize;
-  guideForm.colorMode = (props.dayOrNight || "day") as ColorMode;
-  originalConfig.value = {
-    menuPosition: guideForm.menuPosition,
-    fontSize: guideForm.fontSize,
-    followSystem: !!props.followSystem,
-    dayOrNight: guideForm.colorMode,
-  };
-};
-
-const updateGuidePosition = () => {
-  if (!tourVisible.value) return;
-  const target = getStepTarget();
-  const bubbleWidth = 344;
-  const padding = 16;
-  const targetGap = 10;
-  if (!target) {
-    highlightStyle.value = { display: "none" };
-    bubbleStyle.value = { top: "88px", right: "24px", width: `${bubbleWidth}px` };
-    arrowStyle.value = { display: "none" };
-    return;
-  }
-  const rect = target.getBoundingClientRect();
-  const highlightOffset = 6;
-  const bubbleHeight = bubbleRef.value?.offsetHeight || 220;
-  const targetCenterX = rect.left + rect.width / 2;
-  const left = clamp(targetCenterX - bubbleWidth / 2, padding, window.innerWidth - bubbleWidth - padding);
-  const belowTop = rect.bottom + targetGap + highlightOffset;
-  const aboveTop = rect.top - bubbleHeight - targetGap - highlightOffset;
-  const top = belowTop + bubbleHeight + padding > window.innerHeight ? Math.max(padding, aboveTop) : belowTop;
-  const arrowLeft = clamp(targetCenterX - left - 7, 18, bubbleWidth - 28);
-
-  highlightStyle.value = { top: `${rect.top - highlightOffset}px`, left: `${rect.left - highlightOffset}px`, width: `${rect.width + highlightOffset * 2}px`, height: `${rect.height + highlightOffset * 2}px` };
-  bubbleStyle.value = { top: `${top}px`, left: `${left}px`, width: `${bubbleWidth}px` };
-  arrowStyle.value = { left: `${arrowLeft}px`, display: "block" };
-};
-
-const waitCurrentTarget = async () => {
-  for (let i = 0; i < 20; i += 1) { await nextTick(); await waitFrame(); if (getStepTarget()) return; }
-};
-
-const openGuide = async () => {
-  syncGuideForm();
-  currentStepIndex.value = 0;
-  await waitCurrentTarget();
-  tourVisible.value = true;
-  await nextTick();
-  updateGuidePosition();
-};
-
-const applyPreview = async () => {
-  emit('preview', {
-    menuPosition: guideForm.menuPosition,
-    fontSize: guideForm.fontSize,
-    colorMode: guideForm.colorMode,
-    followSystem: false,
-  });
-  await nextTick();
-  await waitFrame();
-  updateGuidePosition();
-};
-
-const finishGuide = async () => {
-  if (saving.value) return;
-  saving.value = true;
-  try {
-    await applyPreview();
-    emit('finish', { menuPosition: guideForm.menuPosition, fontSize: guideForm.fontSize, colorMode: guideForm.colorMode });
-    tourVisible.value = false;
-    emit('update:visible', false);
-  } finally { saving.value = false; }
-};
-
-const skipGuide = async () => {
-  if (saving.value) return;
-  saving.value = true;
-  try {
-    emit('restore', originalConfig.value);
-    emit('skip');
-    tourVisible.value = false;
-    emit('update:visible', false);
-  } finally { saving.value = false; }
-};
-
-const goNextStep = async () => {
-  if (isLastStep.value) { await finishGuide(); return; }
-  currentStepIndex.value += 1;
-  await waitCurrentTarget();
-  await nextTick();
-  updateGuidePosition();
-};
-
-watch(() => props.visible, (val) => {
-  if (val) { openGuide(); } else { tourVisible.value = false; }
-}, { immediate: true });
-
-onMounted(() => {
-  window.addEventListener("resize", updateGuidePosition);
-  window.addEventListener("scroll", updateGuidePosition, true);
-});
-onUnmounted(() => {
-  window.removeEventListener("resize", updateGuidePosition);
-  window.removeEventListener("scroll", updateGuidePosition, true);
-});
-</script>
-
-<style scoped lang="scss">
-.personalization-guide-layer { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
-.guide-highlight { position: fixed; z-index: 3001; border: 1px solid var(--el-color-primary); border-radius: 8px; background: rgba(64, 158, 255, 0.08); box-shadow: 0 0 0 5px rgba(64, 158, 255, 0.14), 0 0 0 9999px rgba(20, 24, 31, 0.18); pointer-events: none; }
-.guide-bubble { position: fixed; z-index: 3002; overflow: hidden; padding: 18px 18px 14px; background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); border-radius: 8px; box-shadow: 0 16px 42px rgba(20, 24, 31, 0.16), 0 2px 8px rgba(20, 24, 31, 0.06); pointer-events: auto; }
-.guide-bubble::before { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--el-color-primary); content: ""; }
-.guide-arrow { position: absolute; top: -6px; width: 12px; height: 12px; background: var(--el-bg-color); border-top: 1px solid var(--el-border-color-lighter); border-left: 1px solid var(--el-border-color-lighter); border-radius: 2px; transform: rotate(45deg); }
-.guide-step { min-width: 260px; }
-.guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
-.guide-step-count { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; color: var(--el-color-primary); font-size: 12px; font-weight: 600; line-height: 18px; background: var(--el-color-primary-light-9); border-radius: 999px; }
-.guide-step-title { margin-top: 10px; color: var(--el-text-color-primary); font-size: 17px; font-weight: 600; line-height: 24px; }
-.guide-dots { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding-top: 7px; }
-.guide-dot { width: 6px; height: 6px; background: var(--el-border-color); border-radius: 999px; transition: all 0.2s ease; }
-.guide-dot.is-active { width: 18px; background: var(--el-color-primary); }
-.guide-dot.is-done { background: var(--el-color-primary-light-5); }
-.guide-control { margin-top: 18px; }
-.guide-control :deep(.el-radio-button__inner) { min-width: 48px; height: 30px; padding: 7px 14px; font-size: 13px; line-height: 14px; }
-.guide-control :deep(.el-radio-button:first-child .el-radio-button__inner) { border-radius: 6px 0 0 6px; }
-.guide-control :deep(.el-radio-button:last-child .el-radio-button__inner) { border-radius: 0 6px 6px 0; }
-.guide-step-desc { margin-top: 14px; color: var(--el-text-color-regular); font-size: 14px; line-height: 22px; }
-.guide-footer { display: flex; justify-content: space-between; align-items: center; margin: 22px -18px -14px; padding: 12px 18px 14px; background: var(--el-fill-color-extra-light); border-top: 1px solid var(--el-border-color-lighter); }
-.guide-skip-button { color: var(--el-text-color-secondary); }
-.guide-next-button { min-width: 76px; border-radius: 6px; box-shadow: 0 6px 14px rgba(64, 158, 255, 0.22); }
-</style>
+<template>
+  <teleport to="body">
+    <div v-if="tourVisible" class="personalization-guide-layer">
+      <div class="guide-highlight" :style="highlightStyle"></div>
+      <div ref="bubbleRef" class="guide-bubble" :style="bubbleStyle">
+        <span class="guide-arrow" :style="arrowStyle"></span>
+        <div class="guide-step">
+          <div class="guide-head">
+            <div>
+              <div class="guide-step-count">步骤 {{ currentStepIndex + 1 }} / {{ guideSteps.length }}</div>
+              <div class="guide-step-title">{{ currentStep.title }}</div>
+            </div>
+            <div class="guide-dots">
+              <span
+                v-for="(_, index) in guideSteps"
+                :key="index"
+                :class="['guide-dot', { 'is-active': index === currentStepIndex, 'is-done': index < currentStepIndex }]"
+              ></span>
+            </div>
+          </div>
+
+          <el-radio-group
+            v-if="currentStep.key === 'menuPosition'"
+            v-model="guideForm.menuPosition"
+            class="guide-control"
+            @change="applyPreview"
+          >
+            <el-radio-button label="top">顶部</el-radio-button>
+            <el-radio-button label="left">左侧</el-radio-button>
+          </el-radio-group>
+
+          <el-radio-group
+            v-if="currentStep.key === 'fontSize'"
+            v-model="guideForm.fontSize"
+            class="guide-control"
+            @change="applyPreview"
+          >
+            <el-radio-button label="small">小</el-radio-button>
+            <el-radio-button label="medium">中</el-radio-button>
+            <el-radio-button label="large">大</el-radio-button>
+          </el-radio-group>
+
+          <el-radio-group
+            v-if="currentStep.key === 'colorMode'"
+            v-model="guideForm.colorMode"
+            class="guide-control"
+            @change="applyPreview"
+          >
+            <el-radio-button label="day">日间</el-radio-button>
+            <el-radio-button label="night">黑夜</el-radio-button>
+          </el-radio-group>
+
+          <div class="guide-step-desc">{{ currentStep.desc }}</div>
+        </div>
+
+        <div class="guide-footer">
+          <el-button class="guide-skip-button" link :disabled="saving" @click="skipGuide">跳过</el-button>
+          <el-button class="guide-next-button" type="primary" :loading="saving" @click="goNextStep">
+            {{ isLastStep ? "完成" : "下一步" }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
+
+type MenuPosition = "top" | "left";
+type FontSize = "small" | "medium" | "large";
+type ColorMode = "day" | "night";
+type GuideStepKey = "menuPosition" | "fontSize" | "colorMode";
+
+const props = defineProps<{
+  visible: boolean
+  menuPosition?: string
+  fontSize?: string
+  dayOrNight?: string
+  followSystem?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'preview', config: { menuPosition: string; fontSize: string; colorMode: string; followSystem: boolean }): void
+  (e: 'finish', config: { menuPosition: string; fontSize: string; colorMode: string }): void
+  (e: 'skip'): void
+  (e: 'restore', config: { menuPosition: string; fontSize: string; followSystem: boolean; dayOrNight: string }): void
+}>()
+
+const tourVisible = ref(false);
+const saving = ref(false);
+const currentStepIndex = ref(0);
+const bubbleRef = ref<HTMLElement>();
+const highlightStyle = ref<Record<string, string>>({});
+const bubbleStyle = ref<Record<string, string>>({});
+const arrowStyle = ref<Record<string, string>>({});
+
+const guideSteps: { key: GuideStepKey; title: string; desc: string; targetId: string; }[] = [
+  { key: "menuPosition", title: "菜单栏位置", desc: "选择左侧后，菜单会移动到页面左侧。", targetId: "tourMenuPositionId" },
+  { key: "fontSize", title: "字体大小", desc: "可以先预览显示效果，完成后会保存到个性化配置。", targetId: "tourFontSizeId" },
+  { key: "colorMode", title: "黑夜模式", desc: "完成后仍然可以在右上角图标中继续调整。", targetId: "tourDarkId" },
+];
+
+const currentStep = computed(() => guideSteps[currentStepIndex.value]);
+const isLastStep = computed(() => currentStepIndex.value === guideSteps.length - 1);
+
+const guideForm = reactive<{ menuPosition: MenuPosition; fontSize: FontSize; colorMode: ColorMode }>({
+  menuPosition: "top",
+  fontSize: "medium",
+  colorMode: "day",
+});
+
+const originalConfig = ref({
+  menuPosition: "top" as MenuPosition,
+  fontSize: "medium" as FontSize,
+  followSystem: false,
+  dayOrNight: "day" as ColorMode,
+});
+
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+const waitFrame = () => new Promise<void>((resolve) => { window.requestAnimationFrame(() => resolve()); });
+const getStepTarget = () => document.getElementById(currentStep.value.targetId);
+
+const syncGuideForm = () => {
+  guideForm.menuPosition = (props.menuPosition || "top") as MenuPosition;
+  guideForm.fontSize = (props.fontSize || "medium") as FontSize;
+  guideForm.colorMode = (props.dayOrNight || "day") as ColorMode;
+  originalConfig.value = {
+    menuPosition: guideForm.menuPosition,
+    fontSize: guideForm.fontSize,
+    followSystem: !!props.followSystem,
+    dayOrNight: guideForm.colorMode,
+  };
+};
+
+const updateGuidePosition = () => {
+  if (!tourVisible.value) return;
+  const target = getStepTarget();
+  const bubbleWidth = 344;
+  const padding = 16;
+  const targetGap = 10;
+  if (!target) {
+    highlightStyle.value = { display: "none" };
+    bubbleStyle.value = { top: "88px", right: "24px", width: `${bubbleWidth}px` };
+    arrowStyle.value = { display: "none" };
+    return;
+  }
+  const rect = target.getBoundingClientRect();
+  const highlightOffset = 6;
+  const bubbleHeight = bubbleRef.value?.offsetHeight || 220;
+  const targetCenterX = rect.left + rect.width / 2;
+  const left = clamp(targetCenterX - bubbleWidth / 2, padding, window.innerWidth - bubbleWidth - padding);
+  const belowTop = rect.bottom + targetGap + highlightOffset;
+  const aboveTop = rect.top - bubbleHeight - targetGap - highlightOffset;
+  const top = belowTop + bubbleHeight + padding > window.innerHeight ? Math.max(padding, aboveTop) : belowTop;
+  const arrowLeft = clamp(targetCenterX - left - 7, 18, bubbleWidth - 28);
+
+  highlightStyle.value = { top: `${rect.top - highlightOffset}px`, left: `${rect.left - highlightOffset}px`, width: `${rect.width + highlightOffset * 2}px`, height: `${rect.height + highlightOffset * 2}px` };
+  bubbleStyle.value = { top: `${top}px`, left: `${left}px`, width: `${bubbleWidth}px` };
+  arrowStyle.value = { left: `${arrowLeft}px`, display: "block" };
+};
+
+const waitCurrentTarget = async () => {
+  for (let i = 0; i < 20; i += 1) { await nextTick(); await waitFrame(); if (getStepTarget()) return; }
+};
+
+const openGuide = async () => {
+  syncGuideForm();
+  currentStepIndex.value = 0;
+  await waitCurrentTarget();
+  tourVisible.value = true;
+  await nextTick();
+  updateGuidePosition();
+};
+
+const applyPreview = async () => {
+  emit('preview', {
+    menuPosition: guideForm.menuPosition,
+    fontSize: guideForm.fontSize,
+    colorMode: guideForm.colorMode,
+    followSystem: false,
+  });
+  await nextTick();
+  await waitFrame();
+  updateGuidePosition();
+};
+
+const finishGuide = async () => {
+  if (saving.value) return;
+  saving.value = true;
+  try {
+    await applyPreview();
+    emit('finish', { menuPosition: guideForm.menuPosition, fontSize: guideForm.fontSize, colorMode: guideForm.colorMode });
+    tourVisible.value = false;
+    emit('update:visible', false);
+  } finally { saving.value = false; }
+};
+
+const skipGuide = async () => {
+  if (saving.value) return;
+  saving.value = true;
+  try {
+    emit('restore', originalConfig.value);
+    emit('skip');
+    tourVisible.value = false;
+    emit('update:visible', false);
+  } finally { saving.value = false; }
+};
+
+const goNextStep = async () => {
+  if (isLastStep.value) { await finishGuide(); return; }
+  currentStepIndex.value += 1;
+  await waitCurrentTarget();
+  await nextTick();
+  updateGuidePosition();
+};
+
+watch(() => props.visible, (val) => {
+  if (val) { openGuide(); } else { tourVisible.value = false; }
+}, { immediate: true });
+
+onMounted(() => {
+  window.addEventListener("resize", updateGuidePosition);
+  window.addEventListener("scroll", updateGuidePosition, true);
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", updateGuidePosition);
+  window.removeEventListener("scroll", updateGuidePosition, true);
+});
+</script>
+
+<style scoped lang="scss">
+.personalization-guide-layer { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
+.guide-highlight { position: fixed; z-index: 3001; border: 1px solid var(--el-color-primary); border-radius: 8px; background: rgba(64, 158, 255, 0.08); box-shadow: 0 0 0 5px rgba(64, 158, 255, 0.14), 0 0 0 9999px rgba(20, 24, 31, 0.18); pointer-events: none; }
+.guide-bubble { position: fixed; z-index: 3002; overflow: hidden; padding: 18px 18px 14px; background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); border-radius: 8px; box-shadow: 0 16px 42px rgba(20, 24, 31, 0.16), 0 2px 8px rgba(20, 24, 31, 0.06); pointer-events: auto; }
+.guide-bubble::before { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--el-color-primary); content: ""; }
+.guide-arrow { position: absolute; top: -6px; width: 12px; height: 12px; background: var(--el-bg-color); border-top: 1px solid var(--el-border-color-lighter); border-left: 1px solid var(--el-border-color-lighter); border-radius: 2px; transform: rotate(45deg); }
+.guide-step { min-width: 260px; }
+.guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.guide-step-count { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; color: var(--el-color-primary); font-size: 12px; font-weight: 600; line-height: 18px; background: var(--el-color-primary-light-9); border-radius: 999px; }
+.guide-step-title { margin-top: 10px; color: var(--el-text-color-primary); font-size: 17px; font-weight: 600; line-height: 24px; }
+.guide-dots { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding-top: 7px; }
+.guide-dot { width: 6px; height: 6px; background: var(--el-border-color); border-radius: 999px; transition: all 0.2s ease; }
+.guide-dot.is-active { width: 18px; background: var(--el-color-primary); }
+.guide-dot.is-done { background: var(--el-color-primary-light-5); }
+.guide-control { margin-top: 18px; }
+.guide-control :deep(.el-radio-button__inner) { min-width: 48px; height: 30px; padding: 7px 14px; font-size: 13px; line-height: 14px; }
+.guide-control :deep(.el-radio-button:first-child .el-radio-button__inner) { border-radius: 6px 0 0 6px; }
+.guide-control :deep(.el-radio-button:last-child .el-radio-button__inner) { border-radius: 0 6px 6px 0; }
+.guide-step-desc { margin-top: 14px; color: var(--el-text-color-regular); font-size: 14px; line-height: 22px; }
+.guide-footer { display: flex; justify-content: space-between; align-items: center; margin: 22px -18px -14px; padding: 12px 18px 14px; background: var(--el-fill-color-extra-light); border-top: 1px solid var(--el-border-color-lighter); }
+.guide-skip-button { color: var(--el-text-color-secondary); }
+.guide-next-button { min-width: 76px; border-radius: 6px; box-shadow: 0 6px 14px rgba(64, 158, 255, 0.22); }
+</style>

package/src/components/layout/plugin.ts

@@ -1,32 +1,32 @@
-import type { App } from "vue";
-import type NoticeVO from "../../api/notice/bo/NoticeVO";
-
-export interface LayoutPluginOptions {
-  /** Vue Router 实例 */
-  router: any;
-  /** 首页路径（默认 /home） */
-  homeUrl?: string;
-  /** 应用入口路径（默认 /application-entry） */
-  entryUrl?: string;
-  /** 文件下载处理函数（业务自定义） */
-  onFileDownload?: (notice: NoticeVO) => void;
-  /** PMS 跨应用跳转处理 */
-  onCrossAppNavigate?: (urlRoute: string) => void;
-}
-
-/** 全局注入 key */
-export const LAYOUT_ROUTER_KEY = "__layout_router__";
-export const LAYOUT_OPTIONS_KEY = "__layout_options__";
-
-/**
- * 创建布局插件
- * SCM 在 main.ts 中使用：app.use(createLayoutPlugin({ router, ... }))
- */
-export function createLayoutPlugin(options: LayoutPluginOptions) {
-  return {
-    install(app: App) {
-      app.provide(LAYOUT_ROUTER_KEY, options.router);
-      app.provide(LAYOUT_OPTIONS_KEY, options);
-    },
-  };
-}
+import type { App } from "vue";
+import type NoticeVO from "../../api/notice/bo/NoticeVO";
+
+export interface LayoutPluginOptions {
+  /** Vue Router 实例 */
+  router: any;
+  /** 首页路径（默认 /home） */
+  homeUrl?: string;
+  /** 应用入口路径（默认 /application-entry） */
+  entryUrl?: string;
+  /** 文件下载处理函数（业务自定义） */
+  onFileDownload?: (notice: NoticeVO) => void;
+  /** PMS 跨应用跳转处理 */
+  onCrossAppNavigate?: (urlRoute: string) => void;
+}
+
+/** 全局注入 key */
+export const LAYOUT_ROUTER_KEY = "__layout_router__";
+export const LAYOUT_OPTIONS_KEY = "__layout_options__";
+
+/**
+ * 创建布局插件
+ * SCM 在 main.ts 中使用：app.use(createLayoutPlugin({ router, ... }))
+ */
+export function createLayoutPlugin(options: LayoutPluginOptions) {
+  return {
+    install(app: App) {
+      app.provide(LAYOUT_ROUTER_KEY, options.router);
+      app.provide(LAYOUT_OPTIONS_KEY, options);
+    },
+  };
+}