@lobehub/chat 1.98.2 → 1.99.1

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/DimensionControlGroup.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { ActionIcon, SliderWithInput } from '@lobehub/ui';
+import { LockIcon, UnlockIcon } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useDimensionControl } from '@/store/image/slices/generationConfig/hooks';
+
+import AspectRatioSelect from '../../../components/AspectRatioSelect';
+
+const styles = {
+  aspectRatioSelect: {
+    width: '100%',
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: 500,
+    textTransform: 'uppercase' as const,
+  },
+} as const;
+
+const DimensionControlGroup = memo(() => {
+  const { t } = useTranslation('image');
+  const {
+    isLocked,
+    toggleLock,
+    width,
+    height,
+    aspectRatio,
+    setWidth,
+    setHeight,
+    setAspectRatio,
+    widthSchema,
+    heightSchema,
+    options,
+  } = useDimensionControl();
+
+  // 构建宽高比选择器的选项
+  const aspectRatioOptions = useMemo(
+    () =>
+      options.map((ratio) => ({
+        label: ratio,
+        value: ratio,
+      })),
+    [options],
+  );
+
+  const lockButtonTitle = isLocked ? t('config.aspectRatio.unlock') : t('config.aspectRatio.lock');
+
+  const lockIcon = isLocked ? LockIcon : UnlockIcon;
+
+  return (
+    <Flexbox gap={16}>
+      {/* 宽高比选择器 */}
+      <Flexbox gap={8}>
+        <Flexbox align="center" distribution="space-between" horizontal>
+          <span style={styles.label}>{t('config.aspectRatio.label')}</span>
+          <ActionIcon
+            aria-label={lockButtonTitle}
+            icon={lockIcon}
+            onClick={toggleLock}
+            size="small"
+            title={lockButtonTitle}
+          />
+        </Flexbox>
+        <AspectRatioSelect
+          onChange={setAspectRatio}
+          options={aspectRatioOptions}
+          style={styles.aspectRatioSelect}
+          value={aspectRatio}
+        />
+      </Flexbox>
+
+      {/* 宽度滑块 */}
+      {widthSchema && (
+        <Flexbox gap={8}>
+          <span style={styles.label}>{t('config.width.label')}</span>
+          <SliderWithInput
+            max={widthSchema.max}
+            min={widthSchema.min}
+            onChange={setWidth}
+            value={width ?? widthSchema.min}
+          />
+        </Flexbox>
+      )}
+
+      {/* 高度滑块 */}
+      {heightSchema && (
+        <Flexbox gap={8}>
+          <span style={styles.label}>{t('config.height.label')}</span>
+          <SliderWithInput
+            max={heightSchema.max}
+            min={heightSchema.min}
+            onChange={setHeight}
+            value={height ?? heightSchema.min}
+          />
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+DimensionControlGroup.displayName = 'DimensionControlGroup';
+
+export default DimensionControlGroup;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageNum.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import { ActionIcon, InputNumber } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Check, Plus, X } from 'lucide-react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useImageStore } from '@/store/image';
+import { imageGenerationConfigSelectors } from '@/store/image/selectors';
+
+const useStyles = createStyles(({ css, token }) => ({
+  actionButton: css`
+    flex-shrink: 0;
+  `,
+
+  button: css`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 40px;
+    height: 32px;
+    padding-block: 0;
+    padding-inline: 12px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadius}px;
+
+    font-size: 14px;
+    font-weight: 500;
+    color: ${token.colorText};
+
+    background: ${token.colorBgContainer};
+
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: ${token.colorPrimary};
+      background: ${token.colorBgTextHover};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+
+      &:hover {
+        border-color: ${token.colorBorder};
+        background: ${token.colorBgContainer};
+      }
+    }
+  `,
+
+  cancelButton: css`
+    border-color: ${token.colorBorder};
+    color: ${token.colorTextTertiary};
+
+    &:hover {
+      border-color: ${token.colorBorderSecondary};
+      color: ${token.colorText};
+      background: ${token.colorBgTextHover};
+    }
+  `,
+
+  confirmButton: css`
+    border-color: ${token.colorSuccess};
+    color: ${token.colorSuccess};
+
+    &:hover {
+      border-color: ${token.colorSuccessHover};
+      color: ${token.colorSuccessHover};
+      background: ${token.colorSuccessBg};
+    }
+  `,
+
+  container: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  `,
+
+  editContainer: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    width: 100%;
+  `,
+
+  input: css`
+    flex: 1;
+    min-width: 80px;
+
+    .ant-input {
+      font-weight: 500;
+      text-align: center;
+    }
+  `,
+
+  selectedButton: css`
+    border-color: ${token.colorPrimary};
+    color: ${token.colorPrimary};
+    background: ${token.colorPrimaryBg};
+
+    &:hover {
+      border-color: ${token.colorPrimary};
+      color: ${token.colorPrimary};
+      background: ${token.colorPrimaryBgHover};
+    }
+  `,
+}));
+
+interface ImageNumSelectorProps {
+  disabled?: boolean;
+  max?: number;
+  min?: number;
+  presetCounts?: number[];
+}
+
+const ImageNum = memo<ImageNumSelectorProps>(
+  ({ presetCounts = [1, 2, 4, 8], min = 1, max = 50, disabled = false }) => {
+    const imageNum = useImageStore(imageGenerationConfigSelectors.imageNum);
+    const setImageNum = useImageStore((s) => s.setImageNum);
+
+    const { styles, cx } = useStyles();
+    const [isEditing, setIsEditing] = useState(false);
+    const [customCount, setCustomCount] = useState<number | null>(null);
+    const customCountRef = useRef<number | null>(null);
+    const inputRef = useRef<any>(null);
+
+    const isCustomValue = !presetCounts.includes(imageNum);
+
+    // 处理预设按钮点击
+    const handlePresetClick = useCallback(
+      (count: number) => {
+        if (disabled) return;
+        setImageNum(count);
+      },
+      [disabled, setImageNum],
+    );
+
+    // 进入编辑模式
+    const handleEditStart = useCallback(() => {
+      if (disabled) return;
+      setCustomCount(imageNum);
+      customCountRef.current = imageNum;
+      setIsEditing(true);
+    }, [disabled, imageNum]);
+
+    // 确认自定义输入
+    const handleCustomConfirm = useCallback(() => {
+      let count = customCountRef.current;
+
+      // 如果解析失败或输入为空，使用当前值
+      if (count === null) {
+        setIsEditing(false);
+        return;
+      }
+
+      // 智能处理超出范围的值 (作为二次保险)
+      if (count > max) {
+        count = max;
+      } else if (count < min) {
+        count = min;
+      }
+
+      setImageNum(count);
+      setIsEditing(false);
+      setCustomCount(null);
+    }, [min, max, setImageNum]);
+
+    const handleCustomCancel = useCallback(() => {
+      setIsEditing(false);
+      setCustomCount(null);
+    }, []);
+
+    // 处理输入变化
+    const handleInputChange = useCallback((value: number | string | null) => {
+      console.log('handleInputChange', value);
+
+      if (value === null) {
+        setCustomCount(null);
+        customCountRef.current = null;
+        return;
+      }
+
+      const num = parseInt(String(value), 10);
+
+      if (!isNaN(num)) {
+        setCustomCount(num);
+        customCountRef.current = num;
+      }
+    }, []);
+
+    // 自动聚焦和选择输入框内容
+    useEffect(() => {
+      if (isEditing) {
+        // 延迟聚焦以确保 input 已渲染
+        setTimeout(() => {
+          if (inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+          }
+        }, 100);
+      }
+    }, [isEditing]);
+
+    // 验证输入是否有效
+    const isValidInput = useCallback(() => {
+      return customCount !== null;
+    }, [customCount]);
+
+    if (isEditing) {
+      return (
+        <div className={styles.editContainer}>
+          <InputNumber
+            className={styles.input}
+            max={max}
+            min={min}
+            onChange={handleInputChange}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') {
+                e.preventDefault();
+                handleCustomCancel();
+              }
+            }}
+            onPressEnter={handleCustomConfirm}
+            placeholder={`${min}-${max}`}
+            ref={inputRef}
+            size="small"
+            value={customCount}
+          />
+          <ActionIcon
+            className={cx(styles.actionButton, styles.confirmButton)}
+            disabled={!isValidInput()}
+            icon={Check}
+            onClick={handleCustomConfirm}
+            size="small"
+          />
+          <ActionIcon
+            className={cx(styles.actionButton, styles.cancelButton)}
+            icon={X}
+            onClick={handleCustomCancel}
+            size="small"
+          />
+        </div>
+      );
+    }
+
+    return (
+      <Flexbox className={styles.container} horizontal>
+        {presetCounts.map((count) => (
+          <button
+            className={cx(styles.button, imageNum === count && styles.selectedButton)}
+            disabled={disabled}
+            key={count}
+            onClick={() => handlePresetClick(count)}
+            type="button"
+          >
+            {count}
+          </button>
+        ))}
+
+        {isCustomValue ? (
+          <button
+            className={cx(styles.button, styles.selectedButton)}
+            disabled={disabled}
+            onClick={handleEditStart}
+            type="button"
+          >
+            {imageNum}
+          </button>
+        ) : (
+          <button
+            className={styles.button}
+            disabled={disabled}
+            onClick={handleEditStart}
+            type="button"
+          >
+            <Plus size={16} />
+          </button>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+ImageNum.displayName = 'ImageCountSelector';
+
+export default ImageNum;