foucui 1.0.1

package/README.md

@@ -0,0 +1,43 @@
+# foucui
+
+FouCui 自研 Vue3 组件库（独立可发布包）。包名 **`foucui@1.0.1+`**。
+
+原包名迁移路径：`qiuui-vue` →（短暂 `qiuye`）→ **`foucui`**。
+
+## 安装
+
+```bash
+pnpm add foucui
+# 或 npm i foucui
+```
+
+```ts
+import { setupFoucui, setupQiu } from 'foucui'
+import 'foucui/dist/foucui.css'
+import 'foucui/styles/qiu.scss'
+```
+
+`setupFoucui` / `setupQiuye` / `setupQiu` 行为一致。
+
+## 画布套件 QiuCanvasKit
+
+```ts
+import {
+  QiuCanvasEditor,
+  QiuCanvasRenderer,
+  mergeTemplateText,
+  createBannerDoc,
+  downloadCanvasHtml,
+} from 'foucui'
+```
+
+业务端只 `from 'foucui'`，禁止 Vite alias 到组件库源码入口。
+
+## 发布
+
+```bash
+cd web/qiu-ui
+pnpm install
+pnpm run build
+npm publish --access public
+```

package/components/QiuAffix/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div ref="rootRef" class="qiu-affix">
+    <div
+      v-if="fixed && !useSticky"
+      class="qiu-affix__placeholder"
+      :style="{ height: `${placeholderHeight}px` }"
+    />
+    <div
+      ref="affixRef"
+      class="qiu-affix__content"
+      :class="{ 'is-fixed': fixed && !useSticky, 'is-sticky': useSticky }"
+      :style="contentStyle"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuAffix' })
+
+const props = withDefaults(
+  defineProps<{
+    offset?: number
+    position?: 'top' | 'bottom'
+    zIndex?: number
+    /** 滚动容器选择器；指定后优先用 sticky（适合 overflow 容器） */
+    target?: string
+  }>(),
+  {
+    offset: 0,
+    position: 'top',
+    zIndex: 100,
+    target: '',
+  }
+)
+
+const emit = defineEmits<{
+  change: [fixed: boolean]
+  scroll: [payload: { scrollTop: number; fixed: boolean }]
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const affixRef = ref<HTMLElement | null>(null)
+const fixed = ref(false)
+const placeholderHeight = ref(0)
+
+/** 有 target 时用 sticky，天然适配 overflow 滚动容器 */
+const useSticky = computed(() => !!props.target)
+
+const getScrollContainer = (): HTMLElement | Window => {
+  if (!props.target) return window
+  const el = document.querySelector(props.target)
+  return (el as HTMLElement) || window
+}
+
+const update = () => {
+  if (useSticky.value) return
+
+  const root = rootRef.value
+  const affix = affixRef.value
+  if (!root || !affix) return
+
+  const container = getScrollContainer()
+  const rootRect = root.getBoundingClientRect()
+  placeholderHeight.value = affix.offsetHeight
+
+  let next = false
+  if (props.position === 'top') {
+    // 仅判断是否滚过阈值；滚回时自动解除（勿再加与之矛盾的 bottom 条件）
+    if (container === window) {
+      next = rootRect.top <= props.offset
+    } else {
+      const cTop = (container as HTMLElement).getBoundingClientRect().top
+      next = rootRect.top <= cTop + props.offset
+    }
+  } else if (container === window) {
+    next = rootRect.bottom >= window.innerHeight - props.offset
+  } else {
+    const cBottom = (container as HTMLElement).getBoundingClientRect().bottom
+    next = rootRect.bottom >= cBottom - props.offset
+  }
+
+  if (next !== fixed.value) {
+    fixed.value = next
+    emit('change', next)
+  }
+
+  const scrollTop =
+    container === window
+      ? window.scrollY || document.documentElement.scrollTop
+      : (container as HTMLElement).scrollTop
+  emit('scroll', { scrollTop, fixed: fixed.value })
+}
+
+const contentStyle = computed(() => {
+  if (useSticky.value) {
+    return {
+      position: 'sticky',
+      zIndex: String(props.zIndex),
+      ...(props.position === 'top'
+        ? { top: `${props.offset}px` }
+        : { bottom: `${props.offset}px` }),
+    } as Record<string, string>
+  }
+
+  if (!fixed.value) return undefined
+
+  const container = getScrollContainer()
+  const style: Record<string, string> = {
+    position: 'fixed',
+    zIndex: String(props.zIndex),
+    width: `${rootRef.value?.offsetWidth ?? 0}px`,
+  }
+
+  if (props.position === 'top') {
+    const top =
+      container === window
+        ? props.offset
+        : (container as HTMLElement).getBoundingClientRect().top + props.offset
+    style.top = `${top}px`
+  } else {
+    const bottom =
+      container === window
+        ? props.offset
+        : window.innerHeight -
+          (container as HTMLElement).getBoundingClientRect().bottom +
+          props.offset
+    style.bottom = `${bottom}px`
+  }
+
+  if (container !== window) {
+    const rect = (container as HTMLElement).getBoundingClientRect()
+    style.left = `${rect.left}px`
+    style.width = `${rect.width}px`
+  } else if (rootRef.value) {
+    style.left = `${rootRef.value.getBoundingClientRect().left}px`
+  }
+
+  return style
+})
+
+let containerEl: HTMLElement | Window = window
+
+const onScroll = () => update()
+const onResize = () => update()
+
+const bind = () => {
+  containerEl.removeEventListener('scroll', onScroll)
+  window.removeEventListener('resize', onResize)
+  if (useSticky.value) return
+  containerEl = getScrollContainer()
+  containerEl.addEventListener('scroll', onScroll, { passive: true })
+  window.addEventListener('resize', onResize, { passive: true })
+  update()
+}
+
+onMounted(() => {
+  nextTick(bind)
+})
+
+onBeforeUnmount(() => {
+  containerEl.removeEventListener('scroll', onScroll)
+  window.removeEventListener('resize', onResize)
+})
+
+watch(
+  () => [props.target, props.offset, props.position],
+  () => nextTick(bind)
+)
+
+defineExpose({ update })
+</script>
+
+<style lang="scss" scoped>
+.qiu-affix {
+  &__content {
+    box-sizing: border-box;
+
+    &.is-fixed,
+    &.is-sticky {
+      z-index: 10;
+    }
+  }
+}
+</style>

package/components/QiuAlert/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <div
+    v-show="visible"
+    class="qiu-alert"
+    :class="[
+      `qiu-alert--${normalizedType}`,
+      `qiu-alert--${effect}`,
+      { 'is-center': center },
+    ]"
+    role="alert"
+    v-bind="$attrs"
+  >
+    <qiu-icon v-if="showIcon" class="qiu-alert__icon" :icon="typeIcon" />
+    <div class="qiu-alert__content">
+      <div v-if="title || $slots.title" class="qiu-alert__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div v-if="$slots.default || description" class="qiu-alert__description">
+        <slot>{{ description }}</slot>
+      </div>
+    </div>
+    <button
+      v-if="closable"
+      type="button"
+      class="qiu-alert__close"
+      :aria-label="closeText || 'Close'"
+      @click="handleClose"
+    >
+      <span v-if="closeText">{{ closeText }}</span>
+      <qiu-icon v-else icon="close-line" />
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'QiuAlert',
+})
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String as () => 'success' | 'warning' | 'info' | 'error' | 'danger',
+    default: 'info',
+  },
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+  closeText: {
+    type: String,
+    default: '',
+  },
+  showIcon: {
+    type: Boolean,
+    default: false,
+  },
+  center: {
+    type: Boolean,
+    default: false,
+  },
+  effect: {
+    type: String as () => 'light' | 'dark',
+    default: 'light',
+  },
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const visible = ref(true)
+
+const normalizedType = computed(() => (props.type === 'danger' ? 'error' : props.type))
+
+const typeIcon = computed(() => {
+  const map: Record<string, string> = {
+    success: 'checkbox-circle-line',
+    warning: 'error-warning-line',
+    info: 'information-line',
+    error: 'close-circle-line',
+  }
+  return map[normalizedType.value] || map.info
+})
+
+const handleClose = () => {
+  visible.value = false
+  emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-alert {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  width: 100%;
+  padding: 8px 16px;
+  margin: 0;
+  overflow: hidden;
+  border-radius: var(--qiu-border-radius-base, 4px);
+  box-sizing: border-box;
+  transition: opacity 0.2s ease;
+
+  &.is-center {
+    justify-content: center;
+    text-align: center;
+
+    .qiu-alert__content {
+      flex: none;
+    }
+  }
+
+  &--light {
+    &.qiu-alert--success {
+      color: var(--qiu-color-success);
+      background-color: var(--qiu-color-success-light-9, #f0f9eb);
+    }
+
+    &.qiu-alert--warning {
+      color: var(--qiu-color-warning);
+      background-color: var(--qiu-color-warning-light-9, #fdf6ec);
+    }
+
+    &.qiu-alert--info {
+      color: var(--qiu-color-info);
+      background-color: var(--qiu-color-info-light-9, #f4f4f5);
+    }
+
+    &.qiu-alert--error {
+      color: var(--qiu-color-error);
+      background-color: var(--qiu-color-error-light-9, #fef0f0);
+    }
+  }
+
+  &--dark {
+    &.qiu-alert--success {
+      color: #fff;
+      background-color: var(--qiu-color-success);
+    }
+
+    &.qiu-alert--warning {
+      color: #fff;
+      background-color: var(--qiu-color-warning);
+    }
+
+    &.qiu-alert--info {
+      color: #fff;
+      background-color: var(--qiu-color-info);
+    }
+
+    &.qiu-alert--error {
+      color: #fff;
+      background-color: var(--qiu-color-error);
+    }
+  }
+}
+
+.qiu-alert__icon {
+  flex-shrink: 0;
+  margin-top: 2px;
+  font-size: 16px;
+}
+
+.qiu-alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.qiu-alert__title {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.qiu-alert__description {
+  margin: 4px 0 0;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.qiu-alert__close {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  font-size: 12px;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+</style>

package/components/QiuAnchor/context.ts

@@ -0,0 +1,18 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export interface QiuAnchorLinkRecord {
+  href: string
+  title: string
+  el: HTMLElement | null
+}
+
+export interface QiuAnchorContext {
+  offset: Ref<number>
+  bound: Ref<string>
+  activeLink: Ref<string>
+  registerLink: (link: QiuAnchorLinkRecord) => void
+  unregisterLink: (href: string) => void
+  scrollToLink: (href: string) => void
+}
+
+export const QIU_ANCHOR_KEY: InjectionKey<QiuAnchorContext> = Symbol('QiuAnchor')

package/components/QiuAnchor/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="qiu-anchor">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { QiuAnchorContext, QiuAnchorLinkRecord } from './context'
+import { QIU_ANCHOR_KEY } from './context'
+
+defineOptions({ name: 'QiuAnchor' })
+
+const props = withDefaults(
+  defineProps<{
+    offset?: number
+    /** 滚动容器选择器 */
+    bound?: string
+  }>(),
+  {
+    offset: 0,
+    bound: '',
+  }
+)
+
+const links = ref<QiuAnchorLinkRecord[]>([])
+const activeLink = ref('')
+
+const isScrollable = (el: HTMLElement) => {
+  const style = window.getComputedStyle(el)
+  return /(auto|scroll)/.test(style.overflow + style.overflowY + style.overflowX)
+}
+
+const findScrollContainer = (el: Element): HTMLElement | Window => {
+  let node: HTMLElement | null = el.parentElement
+  while (node) {
+    if (isScrollable(node)) return node
+    node = node.parentElement
+  }
+  return window
+}
+
+const getScrollContainer = (target?: Element): HTMLElement | Window => {
+  if (props.bound) {
+    const el = document.querySelector(props.bound)
+    return (el as HTMLElement) || window
+  }
+  if (target) return findScrollContainer(target)
+  return window
+}
+
+const getScrollTop = (container: HTMLElement | Window) => {
+  if (container === window) return window.scrollY || document.documentElement.scrollTop
+  return (container as HTMLElement).scrollTop
+}
+
+const scrollToLink = (href: string) => {
+  const id = href.replace(/^#/, '')
+  const target = document.getElementById(id)
+  if (!target) return
+
+  const container = getScrollContainer(target)
+  if (container === window) {
+    const top = target.getBoundingClientRect().top + getScrollTop(window) - props.offset
+    window.scrollTo({ top, behavior: 'smooth' })
+  } else {
+    const c = container as HTMLElement
+    const cRect = c.getBoundingClientRect()
+    const tRect = target.getBoundingClientRect()
+    const top = tRect.top - cRect.top + c.scrollTop - props.offset
+    c.scrollTo({ top, behavior: 'smooth' })
+  }
+  activeLink.value = href
+}
+
+const registerLink = (link: QiuAnchorLinkRecord) => {
+  const idx = links.value.findIndex((l) => l.href === link.href)
+  if (idx >= 0) links.value[idx] = link
+  else links.value.push(link)
+  links.value.sort((a, b) => {
+    const elA = document.querySelector(a.href)
+    const elB = document.querySelector(b.href)
+    if (!elA || !elB) return 0
+    return elA.getBoundingClientRect().top - elB.getBoundingClientRect().top
+  })
+}
+
+const unregisterLink = (href: string) => {
+  links.value = links.value.filter((l) => l.href !== href)
+}
+
+const resolveContainer = (): HTMLElement | Window => {
+  if (props.bound) {
+    const el = document.querySelector(props.bound)
+    return (el as HTMLElement) || window
+  }
+  // 未指定 bound 时自动探测：以第一个锚点目标元素的可滚动祖先作为滚动容器
+  for (const link of links.value) {
+    const el = document.querySelector(link.href)
+    if (el) return findScrollContainer(el)
+  }
+  return window
+}
+
+const updateActive = () => {
+  const container = resolveContainer()
+  const scrollTop = getScrollTop(container)
+  const containerTop =
+    container === window ? 0 : (container as HTMLElement).getBoundingClientRect().top
+
+  let current = ''
+  for (const link of links.value) {
+    const id = link.href.replace(/^#/, '')
+    const el = document.getElementById(id)
+    if (!el) continue
+    const top =
+      container === window
+        ? el.getBoundingClientRect().top + scrollTop
+        : el.getBoundingClientRect().top - containerTop + scrollTop
+    if (top - props.offset <= scrollTop + 1) current = link.href
+  }
+  if (current) activeLink.value = current
+}
+
+provide<QiuAnchorContext>(QIU_ANCHOR_KEY, {
+  offset: toRef(props, 'offset'),
+  bound: toRef(props, 'bound'),
+  activeLink,
+  registerLink,
+  unregisterLink,
+  scrollToLink,
+})
+
+let containerEl: HTMLElement | Window = window
+
+const onScroll = () => updateActive()
+
+const rebindScrollContainer = () => {
+  const next = resolveContainer()
+  if (next !== containerEl) {
+    containerEl.removeEventListener('scroll', onScroll)
+    containerEl = next
+    containerEl.addEventListener('scroll', onScroll, { passive: true })
+  }
+}
+
+onMounted(() => {
+  containerEl = resolveContainer()
+  containerEl.addEventListener('scroll', onScroll, { passive: true })
+  updateActive()
+})
+
+onBeforeUnmount(() => {
+  containerEl.removeEventListener('scroll', onScroll)
+})
+
+watch(
+  () => props.bound,
+  () => {
+    rebindScrollContainer()
+    updateActive()
+  }
+)
+
+// 锚点链接注册完成后，若之前未探测到滚动容器则重新探测并切换事件监听
+watch(
+  () => links.value.map((l) => l.href).join(','),
+  () => {
+    rebindScrollContainer()
+    updateActive()
+  },
+  { flush: 'post' }
+)
+</script>
+
+<style lang="scss" scoped>
+.qiu-anchor {
+  font-size: var(--qiu-font-size, 14px);
+  line-height: 1.5;
+}
+</style>

package/components/QiuAnchorLink/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <a
+    class="qiu-anchor-link"
+    :class="{ 'is-active': isActive }"
+    :href="href"
+    @click.prevent="onClick"
+  >
+    <slot>{{ title }}</slot>
+  </a>
+</template>
+
+<script lang="ts" setup>
+import { QIU_ANCHOR_KEY } from '../QiuAnchor/context'
+
+defineOptions({ name: 'QiuAnchorLink' })
+
+const props = withDefaults(
+  defineProps<{
+    href: string
+    title?: string
+  }>(),
+  {
+    title: '',
+  }
+)
+
+const anchor = inject(QIU_ANCHOR_KEY, null)
+const linkRef = ref<HTMLElement | null>(null)
+
+const isActive = computed(() => anchor?.activeLink.value === props.href)
+
+const onClick = () => {
+  anchor?.scrollToLink(props.href)
+}
+
+onMounted(() => {
+  anchor?.registerLink({
+    href: props.href,
+    title: props.title,
+    el: linkRef.value,
+  })
+})
+
+onBeforeUnmount(() => {
+  anchor?.unregisterLink(props.href)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-anchor-link {
+  display: block;
+  padding: 4px 0 4px 12px;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+
+  &:hover {
+    color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
+  }
+
+  &.is-active {
+    color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
+    border-left-color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
+  }
+}
+</style>

package/components/QiuApp/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <router-view />
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'QiuApp',
+})
+</script>