foucui 1.0.1

package/components/QiuTime/index.vue

@@ -0,0 +1,548 @@
+<template>
+  <div
+    ref="rootRef"
+    class="qiu-time"
+    :class="[
+      `qiu-time--${resolvedSize}`,
+      attrs.class,
+      {
+        'is-disabled': disabled,
+        'is-focused': panelVisible,
+        'is-fit': fit,
+      },
+    ]"
+    :style="attrs.style as any"
+  >
+    <div class="qiu-time__editor" tabindex="0" @click="togglePanel" @keydown.enter.prevent="togglePanel">
+      <span class="qiu-time__value" :class="{ 'is-placeholder': !displayText }">
+        {{ displayText || placeholder }}
+      </span>
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="qiu-time__clear"
+        tabindex="-1"
+        @mousedown.prevent
+        @click.stop="clearValue"
+      >
+        ×
+      </button>
+      <qiu-icon icon="time-line" class="qiu-time__icon" />
+    </div>
+
+    <Teleport to="body">
+      <Transition name="qiu-time-fade">
+        <div
+          v-if="panelVisible"
+          ref="panelRef"
+          class="qiu-time-panel"
+          :style="panelStyle"
+          @mousedown.prevent
+        >
+          <div class="qiu-time-panel__body">
+            <div class="qiu-time-panel__spinner">
+              <ul ref="hourListRef" class="qiu-time-panel__list">
+                <li
+                  v-for="h in hours"
+                  :key="`h-${h}`"
+                  class="qiu-time-panel__item"
+                  :class="{ 'is-active': draft.hour === h }"
+                  @click="setDraft('hour', h)"
+                >
+                  {{ pad(h) }}
+                </li>
+              </ul>
+            </div>
+            <div class="qiu-time-panel__spinner">
+              <ul ref="minuteListRef" class="qiu-time-panel__list">
+                <li
+                  v-for="m in minutes"
+                  :key="`m-${m}`"
+                  class="qiu-time-panel__item"
+                  :class="{ 'is-active': draft.minute === m }"
+                  @click="setDraft('minute', m)"
+                >
+                  {{ pad(m) }}
+                </li>
+              </ul>
+            </div>
+            <div v-if="showSeconds" class="qiu-time-panel__spinner">
+              <ul ref="secondListRef" class="qiu-time-panel__list">
+                <li
+                  v-for="s in seconds"
+                  :key="`s-${s}`"
+                  class="qiu-time-panel__item"
+                  :class="{ 'is-active': draft.second === s }"
+                  @click="setDraft('second', s)"
+                >
+                  {{ pad(s) }}
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="qiu-time-panel__footer">
+            <button type="button" class="qiu-time-panel__btn is-text" @click="pickNow">此刻</button>
+            <div class="qiu-time-panel__actions">
+              <button type="button" class="qiu-time-panel__btn" @click="cancelPanel">取消</button>
+              <button type="button" class="qiu-time-panel__btn is-primary" @click="confirmPanel">
+                确定
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+
+defineOptions({
+  name: 'QiuTime',
+  inheritAttrs: false,
+})
+
+type TimeParts = { hour: number; minute: number; second: number }
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    /** 展示/绑定格式：HH:mm:ss 或 HH:mm */
+    format?: 'HH:mm:ss' | 'HH:mm'
+    placeholder?: string
+    clearable?: boolean
+    disabled?: boolean
+    size?: 'large' | 'default' | 'small'
+    /** 按内容自适应宽度（表格单元格内推荐） */
+    fit?: boolean
+    hourStep?: number
+    minuteStep?: number
+    secondStep?: number
+  }>(),
+  {
+    modelValue: null,
+    format: 'HH:mm:ss',
+    placeholder: '选择时间',
+    clearable: true,
+    disabled: false,
+    size: 'default',
+    fit: false,
+    hourStep: 1,
+    minuteStep: 1,
+    secondStep: 1,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [string | null]
+  change: [string | null]
+  clear: []
+  'visible-change': [boolean]
+}>()
+
+const attrs = useAttrs()
+const rootRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const hourListRef = ref<HTMLElement | null>(null)
+const minuteListRef = ref<HTMLElement | null>(null)
+const secondListRef = ref<HTMLElement | null>(null)
+const panelVisible = ref(false)
+const panelStyle = ref<CSSProperties>({
+  position: 'fixed',
+  top: '-9999px',
+  left: '-9999px',
+  zIndex: 3100,
+})
+
+const draft = reactive<TimeParts>({ hour: 0, minute: 0, second: 0 })
+
+const resolvedSize = computed(() => props.size || 'default')
+const showSeconds = computed(() => props.format !== 'HH:mm')
+const hasValue = computed(() => props.modelValue != null && props.modelValue !== '')
+
+const pad = (n: number) => String(n).padStart(2, '0')
+
+const rangeByStep = (max: number, step: number) => {
+  const s = Math.max(1, Math.floor(step || 1))
+  const list: number[] = []
+  for (let i = 0; i <= max; i += s) list.push(i)
+  if (list[list.length - 1] !== max && max % s === 0) {
+    /* already includes */
+  }
+  return list
+}
+
+const hours = computed(() => rangeByStep(23, props.hourStep))
+const minutes = computed(() => rangeByStep(59, props.minuteStep))
+const seconds = computed(() => rangeByStep(59, props.secondStep))
+
+const parseTime = (val?: string | null): TimeParts | null => {
+  if (!val) return null
+  const m = String(val).trim().match(/^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/)
+  if (!m) return null
+  const hour = Math.min(23, Math.max(0, Number(m[1])))
+  const minute = Math.min(59, Math.max(0, Number(m[2])))
+  const second = Math.min(59, Math.max(0, Number(m[3] ?? 0)))
+  return { hour, minute, second }
+}
+
+const formatParts = (p: TimeParts) => {
+  if (showSeconds.value) return `${pad(p.hour)}:${pad(p.minute)}:${pad(p.second)}`
+  return `${pad(p.hour)}:${pad(p.minute)}`
+}
+
+const displayText = computed(() => {
+  const p = parseTime(props.modelValue)
+  return p ? formatParts(p) : ''
+})
+
+const syncDraftFromModel = () => {
+  const p = parseTime(props.modelValue) || { hour: 0, minute: 0, second: 0 }
+  draft.hour = p.hour
+  draft.minute = p.minute
+  draft.second = p.second
+}
+
+const scrollActiveIntoView = async () => {
+  await nextTick()
+  const scrollList = (el: HTMLElement | null, active: number) => {
+    if (!el) return
+    const item = el.querySelector('.qiu-time-panel__item.is-active') as HTMLElement | null
+    if (item) {
+      el.scrollTop = Math.max(0, item.offsetTop - el.clientHeight / 2 + item.clientHeight / 2)
+      return
+    }
+    const idx = Array.from(el.children).findIndex((n) => Number((n as HTMLElement).textContent) === active)
+    if (idx >= 0) {
+      const node = el.children[idx] as HTMLElement
+      el.scrollTop = Math.max(0, node.offsetTop - el.clientHeight / 2 + node.clientHeight / 2)
+    }
+  }
+  scrollList(hourListRef.value, draft.hour)
+  scrollList(minuteListRef.value, draft.minute)
+  if (showSeconds.value) scrollList(secondListRef.value, draft.second)
+}
+
+const updatePanelPosition = () => {
+  const trigger = rootRef.value
+  const panel = panelRef.value
+  if (!trigger || !panel) return
+  const rect = trigger.getBoundingClientRect()
+  const panelRect = panel.getBoundingClientRect()
+  const gap = 4
+  const vw = window.innerWidth
+  const vh = window.innerHeight
+  let top = rect.bottom + gap
+  let left = rect.left
+  if (top + panelRect.height > vh - 4) top = rect.top - panelRect.height - gap
+  if (top < 4) top = 4
+  if (left + panelRect.width > vw - 4) left = vw - panelRect.width - 4
+  if (left < 4) left = 4
+  panelStyle.value = {
+    position: 'fixed',
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+    zIndex: 3100,
+  }
+}
+
+const openPanel = async () => {
+  if (props.disabled) return
+  syncDraftFromModel()
+  panelVisible.value = true
+  emit('visible-change', true)
+  await nextTick()
+  updatePanelPosition()
+  await scrollActiveIntoView()
+  requestAnimationFrame(() => updatePanelPosition())
+}
+
+const closePanel = () => {
+  if (!panelVisible.value) return
+  panelVisible.value = false
+  emit('visible-change', false)
+}
+
+const togglePanel = () => {
+  if (props.disabled) return
+  panelVisible.value ? closePanel() : openPanel()
+}
+
+const setDraft = (key: keyof TimeParts, value: number) => {
+  draft[key] = value
+}
+
+const emitValue = (val: string | null) => {
+  emit('update:modelValue', val)
+  emit('change', val)
+}
+
+const confirmPanel = () => {
+  emitValue(formatParts({ ...draft }))
+  closePanel()
+}
+
+const cancelPanel = () => {
+  closePanel()
+}
+
+const pickNow = () => {
+  const now = new Date()
+  draft.hour = now.getHours()
+  draft.minute = now.getMinutes()
+  draft.second = now.getSeconds()
+  emitValue(formatParts({ ...draft }))
+  closePanel()
+}
+
+const clearValue = () => {
+  emitValue(null)
+  emit('clear')
+}
+
+const onDocClick = (e: MouseEvent) => {
+  if (!panelVisible.value) return
+  const t = e.target as Node
+  if (rootRef.value?.contains(t) || panelRef.value?.contains(t)) return
+  closePanel()
+}
+
+const onScrollOrResize = () => {
+  if (panelVisible.value) updatePanelPosition()
+}
+
+watch(panelVisible, (v) => {
+  if (v) {
+    document.addEventListener('mousedown', onDocClick, true)
+    window.addEventListener('scroll', onScrollOrResize, true)
+    window.addEventListener('resize', onScrollOrResize)
+  } else {
+    document.removeEventListener('mousedown', onDocClick, true)
+    window.removeEventListener('scroll', onScrollOrResize, true)
+    window.removeEventListener('resize', onScrollOrResize)
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', onDocClick, true)
+  window.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-time {
+  position: relative;
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  vertical-align: middle;
+
+  &.is-fit {
+    width: auto;
+    min-width: 120px;
+  }
+
+  &.is-disabled .qiu-time__editor {
+    cursor: not-allowed;
+    background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
+    color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
+  }
+
+  &.is-focused .qiu-time__editor {
+    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
+    box-shadow: 0 0 0 1px
+      color-mix(in srgb, var(--qiu-color-primary, var(--qiu-color-primary)) 25%, transparent);
+  }
+}
+
+.qiu-time__editor {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: 0 8px 0 12px;
+  cursor: pointer;
+  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
+  border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+  border-radius: var(--qiu-border-radius-base, var(--qiu-border-radius-base, 4px));
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    border-color: var(--qiu-border-color-hover, var(--qiu-border-color-hover, #c0c4cc));
+  }
+}
+
+.qiu-time--large .qiu-time__editor {
+  height: 40px;
+  font-size: 16px;
+}
+
+.qiu-time--default .qiu-time__editor {
+  height: 32px;
+  font-size: 14px;
+}
+
+.qiu-time--small .qiu-time__editor {
+  height: 24px;
+  font-size: 12px;
+}
+
+.qiu-time__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+  line-height: 1;
+
+  &.is-placeholder {
+    color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
+  }
+}
+
+.qiu-time__clear,
+.qiu-time__icon {
+  flex-shrink: 0;
+  margin-left: 4px;
+  color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
+}
+
+.qiu-time__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+
+  &:hover {
+    color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+  }
+}
+
+.qiu-time__icon {
+  font-size: 14px;
+}
+
+.qiu-time-panel {
+  box-sizing: border-box;
+  width: auto;
+  overflow: hidden;
+  background: var(--qiu-bg-color-overlay, var(--qiu-bg-color-overlay, #fff));
+  border: 1px solid var(--qiu-border-color-light, var(--qiu-border-color-light, #e4e7ed));
+  border-radius: var(--qiu-border-radius-base, var(--qiu-border-radius-base, 4px));
+  box-shadow: var(--qiu-box-shadow-light, var(--qiu-box-shadow-light, 0 4px 12px rgb(0 0 0 / 10%)));
+}
+
+.qiu-time-panel__body {
+  display: flex;
+  height: 204px;
+  border-bottom: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
+}
+
+.qiu-time-panel__spinner {
+  flex: 1;
+  min-width: 56px;
+  overflow: hidden;
+  border-right: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
+
+  &:last-child {
+    border-right: 0;
+  }
+}
+
+.qiu-time-panel__list {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style: none;
+  scrollbar-width: thin;
+}
+
+.qiu-time-panel__item {
+  height: 32px;
+  padding: 0 10px;
+  font-size: 13px;
+  line-height: 32px;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
+  }
+
+  &.is-active {
+    font-weight: 600;
+    color: var(--qiu-color-primary, var(--qiu-color-primary));
+    background: var(--qiu-color-primary-light-9, var(--qiu-color-primary-light-9, #ecf5ff));
+  }
+}
+
+.qiu-time-panel__footer {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+}
+
+.qiu-time-panel__actions {
+  display: inline-flex;
+  gap: 8px;
+}
+
+.qiu-time-panel__btn {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 13px;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+  cursor: pointer;
+  background: var(--qiu-fill-color-blank, #fff);
+  border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+  border-radius: 4px;
+
+  &.is-text {
+    padding: 0 4px;
+    color: var(--qiu-color-primary, var(--qiu-color-primary));
+    background: transparent;
+    border-color: transparent;
+  }
+
+  &.is-primary {
+    color: #fff;
+    background: var(--qiu-color-primary, var(--qiu-color-primary));
+    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
+  }
+
+  &:hover {
+    opacity: 0.92;
+  }
+}
+
+.qiu-time-fade-enter-active,
+.qiu-time-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.qiu-time-fade-enter-from,
+.qiu-time-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

package/components/QiuTimeAgo/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <span class="qiu-time-ago" :title="absoluteTitle">
+    <slot :value="text">{{ text }}</slot>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+defineOptions({ name: 'QiuTimeAgo' })
+
+const props = withDefaults(
+  defineProps<{
+    /** 时间：Date / 时间戳(ms) / 时间字符串 */
+    value?: Date | number | string
+    /** 是否自动刷新 */
+    autoUpdate?: boolean
+    /** 刷新间隔(ms) */
+    interval?: number
+  }>(),
+  {
+    value: undefined,
+    autoUpdate: true,
+    interval: 30000,
+  }
+)
+
+const emit = defineEmits<{
+  update: [string]
+}>()
+
+const text = ref('')
+const absoluteTitle = ref('')
+let timer: ReturnType<typeof setInterval> | undefined
+
+const toDate = (val?: Date | number | string): Date | null => {
+  if (!val) return null
+  if (val instanceof Date) return isNaN(val.getTime()) ? null : val
+  if (typeof val === 'number') return new Date(val)
+  const d = new Date(val)
+  return isNaN(d.getTime()) ? null : d
+}
+
+const diffText = (date: Date) => {
+  const now = Date.now()
+  const diff = now - date.getTime()
+  const abs = Math.abs(diff)
+  const future = diff < 0
+  const sec = Math.floor(abs / 1000)
+  const min = Math.floor(sec / 60)
+  const hr = Math.floor(min / 60)
+  const day = Math.floor(hr / 24)
+
+  let rel: string
+  if (sec < 10) rel = '刚刚'
+  else if (sec < 60) rel = `${sec} 秒${future ? '后' : '前'}`
+  else if (min < 60) rel = `${min} 分钟${future ? '后' : '前'}`
+  else if (hr < 24) rel = `${hr} 小时${future ? '后' : '前'}`
+  else if (day < 30) rel = `${day} 天${future ? '后' : '前'}`
+  else {
+    const y = date.getFullYear()
+    const m = String(date.getMonth() + 1).padStart(2, '0')
+    const d = String(date.getDate()).padStart(2, '0')
+    text.value = `${y}-${m}-${d}`
+    return
+  }
+  text.value = rel
+}
+
+const refresh = () => {
+  const d = toDate(props.value)
+  if (!d) {
+    text.value = '--'
+    absoluteTitle.value = ''
+    return
+  }
+  const pad = (n: number) => String(n).padStart(2, '0')
+  absoluteTitle.value = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
+  diffText(d)
+  emit('update', text.value)
+}
+
+watch(() => props.value, refresh, { immediate: false })
+
+onMounted(() => {
+  refresh()
+  if (props.autoUpdate && props.interval > 0) {
+    timer = setInterval(refresh, props.interval)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-time-ago {
+  display: inline;
+  font-size: inherit;
+  color: inherit;
+}
+</style>

package/components/QiuTimeline/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <ul
+    class="qiu-timeline"
+    :class="{
+      'qiu-timeline--center': center,
+    }"
+  >
+    <slot />
+  </ul>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuTimeline' })
+
+withDefaults(
+  defineProps<{
+    center?: boolean
+  }>(),
+  {
+    center: false,
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.qiu-timeline {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  &--center {
+    :deep(.qiu-timeline-item__wrapper) {
+      width: 50%;
+    }
+
+    :deep(.qiu-timeline-item:nth-child(odd) .qiu-timeline-item__wrapper) {
+      margin-left: 50%;
+      padding-left: 24px;
+      text-align: left;
+    }
+
+    :deep(.qiu-timeline-item:nth-child(even) .qiu-timeline-item__wrapper) {
+      margin-right: 50%;
+      padding-right: 24px;
+      text-align: right;
+    }
+
+    :deep(.qiu-timeline-item__dot) {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
+</style>