seven-design-ui 0.0.1

package/packages/components/src/input/Input.tsx

@@ -0,0 +1,230 @@
+'use client';
+
+import React from "react"
+
+import { forwardRef, InputHTMLAttributes, useState, useRef, useImperativeHandle } from 'react'
+import { classnames } from '@seven-design-ui/core'
+import './input.css'
+
+export type InputSize = 'large' | 'default' | 'small'
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onInput'> {
+  /** 输入框类型 */
+  type?: string
+  /** 输入框尺寸 */
+  size?: InputSize
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否只读 */
+  readOnly?: boolean
+  /** 是否可清空 */
+  clearable?: boolean
+  /** 是否显示密码切换按钮 */
+  showPassword?: boolean
+  /** 前置图标 */
+  prefixIcon?: React.ReactNode
+  /** 后置图标 */
+  suffixIcon?: React.ReactNode
+  /** 自定义类名 */
+  className?: string
+  /** 输入框值 */
+  value?: string
+  /** 默认值 */
+  defaultValue?: string
+  /** 输入时的回调 */
+  onInput?: (value: string) => void
+  /** 值改变时的回调 */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  /** 清空按钮点击回调 */
+  onClear?: () => void
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const {
+    type = 'text',
+    size = 'default',
+    disabled = false,
+    readOnly = false,
+    clearable = false,
+    showPassword = false,
+    prefixIcon,
+    suffixIcon,
+    className,
+    value,
+    defaultValue,
+    onInput,
+    onChange,
+    onClear,
+    onFocus,
+    ...rest
+  } = props
+
+  const [showPwd, setShowPwd] = useState(false)
+  const [inputValue, setInputValue] = useState(defaultValue || '')
+  const internalInputRef = useRef<HTMLInputElement>(null)
+
+  // 合并外部 ref 和内部 ref
+  useImperativeHandle(ref, () => internalInputRef.current as HTMLInputElement, [])
+
+  const inputType = showPassword ? (showPwd ? 'text' : 'password') : type
+  const currentValue = value !== undefined ? value : inputValue
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value
+    if (value === undefined) {
+      setInputValue(newValue)
+    }
+    onChange?.(e)
+    onInput?.(newValue)
+  }
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    // 当输入框获得焦点时，清空输入框内的文本
+    const inputElement = e.target
+    
+    // 对于受控组件：通过回调函数通知父组件清空值
+    if (value !== undefined) {
+      onInput?.('')
+      // 如果提供了 onChange 回调，也触发它
+      if (onChange) {
+        const syntheticEvent = {
+          target: {
+            ...inputElement,
+            value: '',
+          },
+          currentTarget: inputElement,
+        } as React.ChangeEvent<HTMLInputElement>
+        onChange(syntheticEvent)
+      }
+    } else {
+      // 对于非受控组件：直接更新内部状态
+      setInputValue('')
+      // 触发 onChange 和 onInput 回调
+      if (onChange) {
+        const syntheticEvent = {
+          target: {
+            ...inputElement,
+            value: '',
+          },
+          currentTarget: inputElement,
+        } as React.ChangeEvent<HTMLInputElement>
+        onChange(syntheticEvent)
+      }
+      onInput?.('')
+    }
+    
+    // 调用外部传入的 onFocus 回调（如果提供了）
+    onFocus?.(e)
+  }
+
+  const handleClear = (e: React.MouseEvent) => {
+    // 阻止事件冒泡和默认行为
+    e.preventDefault()
+    e.stopPropagation()
+    
+    // 调用 onInput 回调，通知父组件清空值
+    // 对于受控组件，这是必需的，因为父组件需要通过 setState 更新 value
+    onInput?.('')
+    
+    // 对于非受控组件，更新内部状态
+    if (value === undefined) {
+      setInputValue('')
+    }
+    
+    // 创建一个合成事件对象，用于触发 onChange（如果提供了 onChange 回调）
+    const inputElement = internalInputRef.current
+    if (inputElement && onChange) {
+      const syntheticEvent = {
+        target: {
+          ...inputElement,
+          value: '',
+        },
+        currentTarget: inputElement,
+      } as React.ChangeEvent<HTMLInputElement>
+      onChange(syntheticEvent)
+    }
+    
+    // 调用 onClear 回调
+    onClear?.()
+  }
+
+  const showClearBtn = clearable && currentValue && !disabled && !readOnly
+
+  const wrapperClasses = classnames(
+    'sd-input',
+    `sd-input--${size}`,
+    {
+      'is-disabled': disabled,
+      'sd-input--prefix': !!prefixIcon,
+      'sd-input--suffix': !!(suffixIcon || showClearBtn || showPassword),
+    },
+    className
+  )
+
+  return (
+    <div className={wrapperClasses}>
+      {prefixIcon && <span className="sd-input__prefix">{prefixIcon}</span>}
+      <input
+        ref={internalInputRef}
+        type={inputType}
+        className="sd-input__inner"
+        disabled={disabled}
+        readOnly={readOnly}
+        value={currentValue}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        {...rest}
+      />
+      <span className="sd-input__suffix">
+        {showClearBtn && (
+          <span 
+            className="sd-input__clear" 
+            onClick={handleClear}
+            onMouseDown={(e) => {
+              // 防止点击清空按钮时 input 失去焦点
+              e.preventDefault()
+            }}
+          >
+            <svg 
+              viewBox="0 0 1024 1024" 
+              width="14" 
+              height="14"
+              style={{ pointerEvents: 'none' }}
+            >
+              <path
+                fill="currentColor"
+                d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"
+              />
+            </svg>
+          </span>
+        )}
+        {showPassword && (
+          <span className="sd-input__password" onClick={() => setShowPwd(!showPwd)}>
+            {showPwd ? (
+              <svg viewBox="0 0 1024 1024" width="14" height="14">
+                <path
+                  fill="currentColor"
+                  d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"
+                />
+              </svg>
+            ) : (
+              <svg viewBox="0 0 1024 1024" width="14" height="14">
+                <path
+                  fill="currentColor"
+                  d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"
+                />
+                <path
+                  fill="currentColor"
+                  d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z"
+                />
+              </svg>
+            )}
+          </span>
+        )}
+        {suffixIcon && !showClearBtn && <span className="sd-input__suffix-icon">{suffixIcon}</span>}
+      </span>
+    </div>
+  )
+})
+
+Input.displayName = 'Input'

package/packages/components/src/input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input'
+export type { InputProps, InputSize } from './Input'

package/packages/components/src/input/input.css

@@ -0,0 +1,99 @@
+/* Input 组件样式 */
+.sd-input {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  font-size: var(--sd-font-size-base);
+  line-height: var(--sd-component-size-default);
+}
+
+.sd-input__inner {
+  flex: 1;
+  width: 100%;
+  height: var(--sd-component-size-default);
+  padding: 0 15px;
+  font-size: inherit;
+  line-height: inherit;
+  color: var(--sd-text-color-regular);
+  background-color: var(--sd-fill-color-blank);
+  border: 1px solid var(--sd-border-color);
+  border-radius: var(--sd-border-radius-base);
+  outline: none;
+  transition: all var(--sd-transition-duration-fast);
+}
+
+.sd-input__inner:hover {
+  border-color: var(--sd-border-color-darker);
+}
+
+.sd-input__inner:focus {
+  border-color: var(--sd-color-primary);
+}
+
+.sd-input__inner::placeholder {
+  color: var(--sd-text-color-placeholder);
+}
+
+/* 前置图标 */
+.sd-input--prefix .sd-input__inner {
+  padding-left: 30px;
+}
+
+.sd-input__prefix {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  color: var(--sd-text-color-placeholder);
+  pointer-events: none;
+}
+
+/* 后置图标 */
+.sd-input--suffix .sd-input__inner {
+  padding-right: 30px;
+}
+
+.sd-input__suffix {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--sd-text-color-placeholder);
+}
+
+.sd-input__clear,
+.sd-input__password {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: color var(--sd-transition-duration-fast);
+}
+
+.sd-input__clear:hover,
+.sd-input__password:hover {
+  color: var(--sd-text-color-regular);
+}
+
+/* 尺寸 */
+.sd-input--large .sd-input__inner {
+  height: var(--sd-component-size-large);
+  font-size: var(--sd-font-size-medium);
+}
+
+.sd-input--small .sd-input__inner {
+  height: var(--sd-component-size-small);
+  font-size: var(--sd-font-size-small);
+}
+
+/* 禁用状态 */
+.sd-input.is-disabled .sd-input__inner {
+  color: var(--sd-disabled-text-color);
+  background-color: var(--sd-disabled-bg-color);
+  border-color: var(--sd-disabled-border-color);
+  cursor: not-allowed;
+}

package/packages/components/src/pagination/Pagination.tsx

@@ -0,0 +1,271 @@
+import { forwardRef, useState, useCallback, useMemo } from 'react'
+import { classnames } from '@seven-design-ui/core'
+import './pagination.css'
+
+export type PaginationSize = 's' | 'm'
+
+export interface PaginationProps {
+  /** 总数量 */
+  total: number
+  /** 默认页码 */
+  defaultCurrent?: number
+  /** 默认每页容量 */
+  defaultPageSize?: number
+  /** 当前页码 */
+  current?: number
+  /** 每页容量 */
+  pageSize?: number
+  /** 页码改变回调 */
+  onChange?: (page: number, pageSize: number) => void
+  /** 每页容量改变回调 */
+  onPageSizeChange?: (pageSize: number) => void
+  /** 最大页码按钮数，默认7 */
+  pagerCount?: number
+  /** 分页器大小 */
+  size?: PaginationSize
+  /** 每页容量选项 */
+  pageSizeOptions?: number[]
+  /** 是否显示每页容量选择器 */
+  showSizeChanger?: boolean
+  /** 是否显示跳转输入框 */
+  showQuickJumper?: boolean
+  /** 自定义类名 */
+  className?: string
+}
+
+export const Pagination = forwardRef<HTMLDivElement, PaginationProps>((props, ref) => {
+  const {
+    total,
+    defaultCurrent = 1,
+    defaultPageSize = 10,
+    current: controlledCurrent,
+    pageSize: controlledPageSize,
+    onChange,
+    onPageSizeChange,
+    pagerCount = 7,
+    size = 'm',
+    pageSizeOptions = [10, 20, 50, 100],
+    showSizeChanger = true,
+    showQuickJumper = false,
+    className,
+    ...rest
+  } = props
+
+  // 使用受控状态管理当前页码
+  const [internalCurrent, setInternalCurrent] = useState(defaultCurrent)
+  const current = controlledCurrent ?? internalCurrent
+
+  // 使用受控状态管理每页容量
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize)
+  const pageSize = controlledPageSize ?? internalPageSize
+
+  // 计算总页数
+  const totalPages = useMemo(() => Math.ceil(total / pageSize), [total, pageSize])
+
+  // 处理页码改变
+  const handlePageChange = useCallback((page: number) => {
+    if (page < 1 || page > totalPages || page === current) return
+
+    const newPage = Math.max(1, Math.min(page, totalPages))
+
+    if (controlledCurrent === undefined) {
+      setInternalCurrent(newPage)
+    }
+
+    onChange?.(newPage, pageSize)
+  }, [current, totalPages, pageSize, onChange, controlledCurrent])
+
+  // 处理每页容量改变
+  const handlePageSizeChange = useCallback((newPageSize: number) => {
+    if (controlledPageSize === undefined) {
+      setInternalPageSize(newPageSize)
+    }
+
+    onPageSizeChange?.(newPageSize)
+
+    // 容量改变后，跳转到第一页
+    const newPage = 1
+    if (controlledCurrent === undefined) {
+      setInternalCurrent(newPage)
+    }
+
+    onChange?.(newPage, newPageSize)
+  }, [onPageSizeChange, onChange, controlledCurrent, controlledPageSize])
+
+  // 计算页码按钮列表
+  const pageItems = useMemo(() => {
+    const items: (number | 'prev-more' | 'next-more')[] = []
+
+    if (totalPages <= pagerCount) {
+      // 总页数不超过最大显示数，直接显示所有页码
+      for (let i = 1; i <= totalPages; i++) {
+        items.push(i)
+      }
+    } else {
+      // 需要折叠的情况
+      const leftCount = Math.floor((pagerCount - 2) / 2) // 左侧显示的页码数
+      const rightCount = pagerCount - 2 - leftCount // 右侧显示的页码数
+
+      // 始终显示第一页
+      items.push(1)
+
+      if (current <= leftCount + 2) {
+        // 当前页靠近左侧
+        for (let i = 2; i <= Math.min(pagerCount - 2, totalPages - 1); i++) {
+          items.push(i)
+        }
+        if (totalPages > pagerCount - 1) {
+          items.push('next-more')
+        }
+      } else if (current >= totalPages - rightCount - 1) {
+        // 当前页靠近右侧
+        if (totalPages > pagerCount - 1) {
+          items.push('prev-more')
+        }
+        for (let i = Math.max(2, totalPages - (pagerCount - 3)); i <= totalPages - 1; i++) {
+          items.push(i)
+        }
+      } else {
+        // 当前页在中间
+        items.push('prev-more')
+        for (let i = current - leftCount; i <= current + rightCount; i++) {
+          items.push(i)
+        }
+        items.push('next-more')
+      }
+
+      // 始终显示最后一页
+      if (totalPages > 1) {
+        items.push(totalPages)
+      }
+    }
+
+    return items
+  }, [totalPages, pagerCount, current])
+
+  // 跳转输入框状态
+  const [jumpValue, setJumpValue] = useState('')
+
+  const handleJump = useCallback(() => {
+    const page = parseInt(jumpValue, 10)
+    if (!isNaN(page)) {
+      handlePageChange(page)
+      setJumpValue('')
+    }
+  }, [jumpValue, handlePageChange])
+
+  // 如果没有数据，不显示分页器
+  if (total === 0) {
+    return null
+  }
+
+  const classes = classnames(
+    'sd-pagination',
+    `sd-pagination--${size}`,
+    className
+  )
+
+  return (
+    <div ref={ref} className={classes} {...rest}>
+      {/* 上一页按钮 */}
+      <button
+        type="button"
+        className={classnames('sd-pagination__item', 'sd-pagination__prev', {
+          'is-disabled': current === 1
+        })}
+        disabled={current === 1}
+        onClick={() => handlePageChange(current - 1)}
+        aria-label="上一页"
+      >
+        ‹
+      </button>
+
+      {/* 页码按钮 */}
+      {pageItems.map((item, index) => {
+        if (item === 'prev-more') {
+          return (
+            <span key={`more-${index}`} className="sd-pagination__more sd-pagination__more--prev">
+              ...
+            </span>
+          )
+        }
+
+        if (item === 'next-more') {
+          return (
+            <span key={`more-${index}`} className="sd-pagination__more sd-pagination__more--next">
+              ...
+            </span>
+          )
+        }
+
+        return (
+          <button
+            key={item}
+            type="button"
+            className={classnames('sd-pagination__item', 'sd-pagination__page', {
+              'is-active': item === current
+            })}
+            onClick={() => handlePageChange(item)}
+          >
+            {item}
+          </button>
+        )
+      })}
+
+      {/* 下一页按钮 */}
+      <button
+        type="button"
+        className={classnames('sd-pagination__item', 'sd-pagination__next', {
+          'is-disabled': current === totalPages
+        })}
+        disabled={current === totalPages}
+        onClick={() => handlePageChange(current + 1)}
+        aria-label="下一页"
+      >
+        ›
+      </button>
+
+      {/* 每页容量选择器 */}
+      {showSizeChanger && (
+        <div className="sd-pagination__size-changer">
+          <select
+            value={pageSize}
+            onChange={(e) => handlePageSizeChange(Number(e.target.value))}
+            className="sd-pagination__size-select"
+          >
+            {pageSizeOptions.map(option => (
+              <option key={option} value={option}>
+                {option} 条/页
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {/* 跳转输入框 */}
+      {showQuickJumper && (
+        <div className="sd-pagination__jumper">
+          <span className="sd-pagination__jumper-text">跳至</span>
+          <input
+            type="number"
+            min="1"
+            max={totalPages}
+            value={jumpValue}
+            onChange={(e) => setJumpValue(e.target.value)}
+            onKeyPress={(e) => e.key === 'Enter' && handleJump()}
+            className="sd-pagination__jumper-input"
+            placeholder={current.toString()}
+          />
+          <span className="sd-pagination__jumper-text">页</span>
+        </div>
+      )}
+
+      {/* 总数信息 */}
+      <div className="sd-pagination__total">
+        共 {total} 条
+      </div>
+    </div>
+  )
+})
+
+Pagination.displayName = 'Pagination'

package/packages/components/src/pagination/index.ts

@@ -0,0 +1 @@
+export * from './Pagination'