foucui 1.0.1

package/components/QiuBadgeDot/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <span class="qiu-badge-dot" :class="{ 'is-dot': isDot }">
+    <slot />
+    <sup
+      v-if="!hidden && (isDot || displayValue !== null)"
+      class="qiu-badge-dot__content"
+      :class="{
+        'is-dot': isDot,
+        'is-fixed': !!$slots.default,
+      }"
+    >
+      <template v-if="!isDot">{{ displayValue }}</template>
+    </sup>
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuBadgeDot' })
+
+const props = withDefaults(
+  defineProps<{
+    value?: string | number
+    max?: number
+    isDot?: boolean
+    hidden?: boolean
+  }>(),
+  {
+    value: '',
+    max: 99,
+    isDot: false,
+    hidden: false,
+  }
+)
+
+const displayValue = computed(() => {
+  if (props.isDot) return null
+  const raw = props.value
+  if (raw === '' || raw === undefined || raw === null) return null
+  const num = Number(raw)
+  if (!Number.isNaN(num) && num > props.max) return `${props.max}+`
+  return String(raw)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-badge-dot {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.qiu-badge-dot__content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  color: #fff;
+  white-space: nowrap;
+  background: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
+  border: 1px solid var(--qiu-bg-color, var(--qiu-bg-color, #fff));
+  border-radius: 10px;
+  box-sizing: border-box;
+  transform: translate(50%, -50%);
+  transform-origin: 100% 0;
+
+  &.is-fixed {
+    position: absolute;
+  }
+
+  &.is-dot {
+    min-width: 8px;
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    border-radius: 50%;
+  }
+}
+</style>

package/components/QiuButton/index.vue

@@ -0,0 +1,247 @@
+<template>
+  <component
+    :is="tag"
+    class="qiu-button"
+    :class="buttonClass"
+    :type="tag === 'button' ? nativeType : undefined"
+    :disabled="disabled || loading"
+    :style="colorStyle"
+    v-bind="$attrs"
+    @click="onClick"
+  >
+    <span v-if="loading" class="qiu-button__loading" aria-hidden="true" />
+    <span v-if="!loading && (icon || $slots.icon)" class="qiu-button__icon">
+      <slot name="icon">
+        <qiu-icon v-if="icon" :icon="icon" />
+      </slot>
+    </span>
+    <span v-if="$slots.default" class="qiu-button__label"><slot /></span>
+    <span v-if="iconRight || $slots.iconRight" class="qiu-button__icon-right">
+      <slot name="iconRight">
+        <qiu-icon v-if="iconRight" :icon="iconRight" />
+      </slot>
+    </span>
+  </component>
+</template>
+
+<script lang="ts" setup>
+/**
+ * QiuButton — 纯自研多色按钮（无 Element Plus）
+ */
+defineOptions({
+  name: 'QiuButton',
+  inheritAttrs: false,
+})
+
+const QIU_BUTTON_COLORS: Record<string, string> = {
+  primary: 'var(--qiu-color-primary, var(--qiu-color-primary, #0f766e))',
+  success: 'var(--qiu-color-success, var(--qiu-color-success, #67c23a))',
+  warning: 'var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c))',
+  danger: 'var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c))',
+  info: 'var(--qiu-color-info, var(--qiu-color-info, #909399))',
+  cyan: '#0ea5e9',
+  orange: '#f97316',
+  pink: '#ec4899',
+  teal: '#14b8a6',
+  gray: '#64748b',
+  magenta: '#d946ef',
+  lime: '#84cc16',
+  brown: '#a16207',
+}
+
+type QiuButtonType = 'default' | keyof typeof QIU_BUTTON_COLORS | string
+
+const props = withDefaults(
+  defineProps<{
+    type?: QiuButtonType
+    color?: string
+    size?: 'large' | 'default' | 'small'
+    plain?: boolean
+    text?: boolean
+    link?: boolean
+    round?: boolean
+    circle?: boolean
+    disabled?: boolean
+    loading?: boolean
+    nativeType?: 'button' | 'submit' | 'reset'
+    tag?: string
+    icon?: string
+    iconRight?: string
+  }>(),
+  {
+    type: 'default',
+    plain: false,
+    text: false,
+    link: false,
+    round: false,
+    circle: false,
+    disabled: false,
+    loading: false,
+    nativeType: 'button',
+    tag: 'button',
+  }
+)
+
+const emit = defineEmits<{ click: [e: MouseEvent] }>()
+
+const groupSize = inject<Ref<'large' | 'default' | 'small'> | null>('qiuButtonGroupSize', null)
+const resolvedSize = computed(() => props.size || groupSize?.value || 'default')
+
+const resolvedHue = computed(() => {
+  if (props.color) return props.color
+  if (props.type && props.type !== 'default' && QIU_BUTTON_COLORS[props.type]) {
+    return QIU_BUTTON_COLORS[props.type]
+  }
+  return ''
+})
+
+const colorStyle = computed(() => {
+  if (!resolvedHue.value) return undefined
+  return { '--qiu-btn-color': resolvedHue.value } as Record<string, string>
+})
+
+const buttonClass = computed(() => [
+  `qiu-button--${resolvedSize.value}`,
+  {
+    'qiu-button--default': props.type === 'default' && !props.color,
+    'qiu-button--colored': !!resolvedHue.value,
+    'qiu-button--plain': props.plain,
+    'qiu-button--text': props.text,
+    'qiu-button--link': props.link,
+    'qiu-button--round': props.round,
+    'qiu-button--circle': props.circle,
+    'is-disabled': props.disabled || props.loading,
+    'is-loading': props.loading,
+  },
+])
+
+const onClick = (e: MouseEvent) => {
+  if (props.disabled || props.loading) {
+    e.preventDefault()
+    return
+  }
+  emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-button {
+  --qiu-btn-color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  font-weight: 500;
+  font-size: var(--qiu-font-size, 14px);
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  appearance: none;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+  border-radius: var(--qiu-border-radius, 4px);
+  background: var(--qiu-fill-color-blank, #fff);
+  color: var(--qiu-text-color-regular, #606266);
+  transition:
+    color var(--qiu-transition, 0.2s),
+    background var(--qiu-transition, 0.2s),
+    border-color var(--qiu-transition, 0.2s);
+
+  &--large {
+    height: var(--qiu-component-size-large, 40px);
+    padding: 0 18px;
+    font-size: 15px;
+  }
+  &--default {
+    height: var(--qiu-component-size, 32px);
+    padding: 0 14px;
+  }
+  &--small {
+    height: var(--qiu-component-size-small, 24px);
+    padding: 0 10px;
+    font-size: var(--qiu-font-size-small, 13px);
+  }
+
+  &--colored:not(.qiu-button--plain):not(.qiu-button--text):not(.qiu-button--link) {
+    color: #fff;
+    background: var(--qiu-btn-color);
+    border-color: var(--qiu-btn-color);
+    &:hover:not(.is-disabled) {
+      filter: brightness(1.08);
+    }
+  }
+
+  &--colored.qiu-button--plain {
+    color: var(--qiu-btn-color);
+    background: color-mix(in srgb, var(--qiu-btn-color) 10%, #fff);
+    border-color: color-mix(in srgb, var(--qiu-btn-color) 45%, #fff);
+    &:hover:not(.is-disabled) {
+      color: #fff;
+      background: var(--qiu-btn-color);
+      border-color: var(--qiu-btn-color);
+    }
+  }
+
+  &--text,
+  &--link {
+    height: auto;
+    padding: 0 4px;
+    border-color: transparent;
+    background: transparent;
+    color: var(--qiu-btn-color, var(--qiu-text-color-regular, #606266));
+    &:hover:not(.is-disabled) {
+      opacity: 0.8;
+    }
+  }
+
+  &--link {
+    padding: 0;
+  }
+
+  &--round {
+    border-radius: var(--qiu-border-radius-round, 20px);
+  }
+
+  &--circle {
+    width: var(--qiu-component-size, 32px);
+    padding: 0;
+    border-radius: 50%;
+    &.qiu-button--large {
+      width: var(--qiu-component-size-large, 40px);
+    }
+    &.qiu-button--small {
+      width: var(--qiu-component-size-small, 24px);
+    }
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  &__loading {
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: qiu-btn-spin 0.7s linear infinite;
+  }
+
+  &__icon,
+  &__icon-right {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+  }
+}
+
+@keyframes qiu-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/components/QiuButtonGroup/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="qiu-button-group" :class="groupClass" role="group" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuButtonGroup' })
+
+const props = withDefaults(
+  defineProps<{
+    size?: 'large' | 'default' | 'small'
+    vertical?: boolean
+  }>(),
+  { size: 'default', vertical: false }
+)
+
+const groupClass = computed(() => ({
+  'qiu-button-group--vertical': props.vertical,
+  [`qiu-button-group--${props.size}`]: true,
+}))
+
+provide('qiuButtonGroupSize', toRef(props, 'size'))
+</script>
+
+<style lang="scss" scoped>
+.qiu-button-group {
+  display: inline-flex;
+  vertical-align: middle;
+
+  :deep(.qiu-button) {
+    border-radius: 0;
+    & + .qiu-button {
+      margin-left: -1px;
+    }
+    &:first-child {
+      border-top-left-radius: var(--qiu-border-radius, 4px);
+      border-bottom-left-radius: var(--qiu-border-radius, 4px);
+    }
+    &:last-child {
+      border-top-right-radius: var(--qiu-border-radius, 4px);
+      border-bottom-right-radius: var(--qiu-border-radius, 4px);
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+    :deep(.qiu-button) {
+      width: 100%;
+      & + .qiu-button {
+        margin-left: 0;
+        margin-top: -1px;
+      }
+      &:first-child {
+        border-radius: var(--qiu-border-radius, 4px) var(--qiu-border-radius, 4px) 0 0;
+      }
+      &:last-child {
+        border-radius: 0 0 var(--qiu-border-radius, 4px) var(--qiu-border-radius, 4px);
+      }
+    }
+  }
+}
+</style>