hrp-ui-base 1.0.2 → 1.0.4

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

@@ -0,0 +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>

package/src/components/layout/sideMenu-global.scss

@@ -0,0 +1,115 @@
+/* 抽屉全局样式 */
+.side-menu-drawer {
+  position: fixed;
+  top: 50px;
+  left: 0;
+  right: 0;
+  z-index: 2001;
+  background: var(--el-bg-color-overlay);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  max-height: calc(80vh - 50px);
+  overflow-y: auto;
+  padding: 12px;
+}
+
+/* 抽屉滑动过渡 */
+.side-drawer-slide-enter-active,
+.side-drawer-slide-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.side-drawer-slide-enter-from,
+.side-drawer-slide-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+
+.left-collapsed-flyout {
+  position: fixed;
+  left: 58px;
+  width: 240px;
+  max-height: min(460px, calc(100vh - 72px));
+  overflow-y: auto;
+  padding: 10px;
+  z-index: 2100;
+  background: var(--el-bg-color-overlay);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  box-shadow: var(--el-box-shadow-light);
+  box-sizing: border-box;
+}
+
+.left-collapsed-collapse {
+  margin-bottom: 6px;
+}
+
+.left-submenu-item {
+  min-height: 38px;
+  line-height: 38px;
+  padding: 0 12px;
+  margin: 4px 0;
+  color: var(--el-text-color-regular);
+  font-size: 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: color 0.2s, background 0.2s;
+  box-sizing: border-box;
+
+  &.with-icon {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    line-height: normal;
+  }
+
+  span:not(.left-page-icon):not(.left-page-icon-fallback) {
+    min-width: 0;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    color: var(--el-color-primary);
+    background: var(--el-fill-color-light);
+  }
+
+  &.is-active {
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+    font-weight: 500;
+  }
+}
+
+.left-page-icon {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+  font-size: 13px;
+  font-weight: 600;
+  background: var(--el-fill-color-light);
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.left-page-icon-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.left-collapsed-flyout-enter-active,
+.left-collapsed-flyout-leave-active {
+  transition: transform 0.18s ease, opacity 0.18s ease;
+}
+
+.left-collapsed-flyout-enter-from,
+.left-collapsed-flyout-leave-to {
+  transform: translateX(-8px);
+  opacity: 0;
+}

package/src/components/layout/sideMenu.scss

@@ -0,0 +1,312 @@
+#header-sidebar {
+  height: 50px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.scroll-arrow {
+  width: 28px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  color: var(--el-text-color-secondary);
+  transition: color 0.2s;
+
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+
+.menu-scroll-wrapper {
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-width: 0;
+
+  /* 隐藏滚动条 */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.menu-scroll-content {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  white-space: nowrap;
+}
+
+.menu-tab-item {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  padding: 0 16px;
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  transition: color 0.2s, background 0.2s;
+  color: var(--el-text-color-primary);
+
+  .menu-tab-name {
+    font-size: 14px;
+    font-weight: 400;
+    white-space: nowrap;
+  }
+
+  .menu-tab-arrow {
+    margin-left: 4px;
+    font-size: 12px;
+    transition: transform 0.3s;
+
+    &.is-open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:hover {
+    color: var(--el-color-primary);
+    background: var(--el-fill-color-light);
+  }
+
+  &.is-active {
+    color: var(--el-color-primary);
+    //background: var(--el-color-primary-light-9);
+
+    .menu-tab-name {
+      font-weight: 500;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 6px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 90%;
+      height: 3px;
+      background: var(--el-color-primary);
+      border-radius: 2px;
+    }
+  }
+}
+
+#header-sidebar.menu-position-left {
+  width: 200px;
+  height: 100%;
+  align-items: stretch;
+  flex-direction: column;
+  transition: width 0.2s ease;
+
+  .menu-scroll-wrapper {
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .menu-scroll-content {
+    height: auto;
+    min-height: 100%;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 8px;
+    white-space: normal;
+    box-sizing: border-box;
+  }
+
+  .menu-tab-item {
+    width: 100%;
+    height: 40px;
+    padding: 0 12px;
+    border-radius: 6px;
+    justify-content: space-between;
+    box-sizing: border-box;
+
+    .menu-tab-icon {
+      width: 22px;
+      height: 22px;
+      margin-right: 8px;
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: currentColor;
+      font-size: 13px;
+      font-weight: 600;
+      background: var(--el-fill-color-light);
+      border-radius: 5px;
+      overflow: hidden;
+
+      .menu-tab-icon-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+
+      .menu-tab-icon-fallback {
+        line-height: 22px;
+      }
+    }
+
+    .menu-tab-name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &.is-active {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .left-collapse-control {
+    height: 38px;
+    margin: 6px 8px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    color: var(--el-text-color-regular);
+    font-size: 13px;
+    border-radius: 6px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: color 0.2s, background 0.2s;
+
+    &:hover {
+      color: var(--el-color-primary);
+      background: var(--el-fill-color-light);
+    }
+  }
+
+  .left-inline-submenu {
+    margin: 2px 0 8px;
+    padding: 4px 0 4px 12px;
+    border-left: 1px solid var(--el-border-color-light);
+  }
+
+  .left-submenu-group {
+    margin-bottom: 4px;
+  }
+
+  .left-submenu-group-title {
+    min-height: 30px;
+    line-height: 30px;
+    padding: 0 10px 0 12px;
+    margin: 6px 0 4px;
+    color: var(--el-color-primary);
+    font-size: 13px;
+    font-weight: 600;
+    background: var(--el-color-primary-light-9);
+    border-left: 3px solid var(--el-color-primary);
+    border-radius: 5px;
+    cursor: default;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    box-sizing: border-box;
+
+    &.is-active {
+      background: var(--el-color-primary-light-8);
+      cursor: pointer;
+    }
+  }
+
+  .left-submenu-item {
+    min-height: 32px;
+    line-height: 32px;
+    padding: 0 10px;
+    margin: 2px 0;
+    color: var(--el-text-color-regular);
+    font-size: 13px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: color 0.2s, background 0.2s;
+
+    &.with-icon {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      line-height: normal;
+    }
+
+    .left-page-icon {
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: currentColor;
+      font-size: 12px;
+      font-weight: 600;
+      background: var(--el-fill-color-light);
+      border-radius: 5px;
+      overflow: hidden;
+    }
+
+    .left-page-icon-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    span {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:hover {
+      color: var(--el-color-primary);
+      background: var(--el-fill-color-light);
+    }
+
+    &.is-active {
+      color: var(--el-color-primary);
+      background: var(--el-color-primary-light-9);
+      font-weight: 500;
+    }
+  }
+}
+
+#header-sidebar.menu-position-left.is-left-collapsed {
+  width: 58px;
+
+  .menu-scroll-content {
+    padding: 8px 6px;
+    align-items: center;
+  }
+
+  .menu-tab-item {
+    width: 40px;
+    padding: 0;
+    justify-content: center;
+
+    .menu-tab-icon {
+      margin-right: 0;
+    }
+
+    &.is-active {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .left-collapse-control {
+    width: 40px;
+    margin: 6px auto 8px;
+  }
+}