@lobehub/chat 1.98.1 → 1.99.0

package/src/app/[variants]/(main)/image/@menu/components/AspectRatioSelect/index.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { Block, Grid, GridProps, Text } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
+
+export interface AspectRatioSelectProps extends Omit<GridProps, 'children' | 'onChange'> {
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  options?: { label?: string; value: string }[];
+  value?: string;
+}
+
+const AspectRatioSelect = memo<AspectRatioSelectProps>(
+  ({ options, onChange, value, defaultValue, ...rest }) => {
+    const theme = useTheme();
+    const [active, setActive] = useMergeState('', {
+      defaultValue,
+      onChange,
+      value,
+    });
+    return (
+      <Block padding={4} variant={'filled'} {...rest}>
+        <Grid gap={4} maxItemWidth={48} rows={16}>
+          {options?.map((item) => {
+            const isActive = active === item.value;
+            const [width, height] = item.value.split(':').map(Number);
+            const isWidthGreater = width > height;
+
+            return (
+              <Block
+                align={'center'}
+                clickable
+                gap={4}
+                justify={'center'}
+                key={item.value}
+                onClick={() => {
+                  setActive(item.value);
+                  onChange?.(item.value);
+                }}
+                padding={8}
+                shadow={isActive && !theme.isDarkMode}
+                style={{
+                  backgroundColor: isActive ? theme.colorBgElevated : 'transparent',
+                }}
+                variant={'filled'}
+              >
+                <Center height={16} style={{ marginTop: 4 }} width={16}>
+                  <div
+                    style={{
+                      aspectRatio: `${width} / ${height}`,
+                      border: `2px solid ${isActive ? theme.colorText : theme.colorTextDescription}`,
+                      borderRadius: 3,
+                      height: isWidthGreater ? undefined : 16,
+                      width: isWidthGreater ? 16 : undefined,
+                    }}
+                  />
+                </Center>
+                <Text fontSize={12} type={isActive ? undefined : 'secondary'}>
+                  {item.label || item.value}
+                </Text>
+              </Block>
+            );
+          })}
+        </Grid>
+      </Block>
+    );
+  },
+);
+
+export default AspectRatioSelect;

package/src/app/[variants]/(main)/image/@menu/components/SeedNumberInput/index.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Button, InputNumber, InputNumberProps, Tooltip } from '@lobehub/ui';
+import { Dices } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+export type SeedNumberInputProps = InputNumberProps;
+
+const SeedNumberInput = memo<SeedNumberInputProps>(
+  ({ value, step = 1, onChange, style, className, ...rest }) => {
+    const { t } = useTranslation('image');
+
+    return (
+      <Flexbox className={className} gap={4} horizontal style={style}>
+        <InputNumber
+          placeholder={t('config.seed.random')}
+          step={step}
+          style={{ width: '100%' }}
+          value={value}
+          {...rest}
+        />
+        <Tooltip title={t('config.seed.random')}>
+          <Button
+            disabled={!value}
+            icon={Dices}
+            onClick={() => onChange?.(null)}
+            style={{ flex: 'none', width: 62 }}
+            type={'primary'}
+            variant={'outlined'}
+          />
+        </Tooltip>
+      </Flexbox>
+    );
+  },
+);
+
+export default SeedNumberInput;

package/src/app/[variants]/(main)/image/@menu/components/SizeSelect/index.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { Block, Grid, GridProps, Text } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Center } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
+
+export interface SizeSelectProps extends Omit<GridProps, 'children' | 'onChange'> {
+  defaultValue?: 'auto' | string;
+  onChange?: (value: string) => void;
+  options?: { label?: string; value: 'auto' | string }[];
+  value?: 'auto' | string;
+}
+
+const SizeSelect = memo<SizeSelectProps>(({ options, onChange, value, defaultValue, ...rest }) => {
+  const theme = useTheme();
+  const [active, setActive] = useMergeState('auto', {
+    defaultValue,
+    onChange,
+    value,
+  });
+  return (
+    <Block padding={4} variant={'filled'} {...rest}>
+      <Grid gap={4} maxItemWidth={72} rows={16}>
+        {options?.map((item) => {
+          const isActive = active === item.value;
+          let content: ReactNode;
+
+          if (item.value === 'auto') {
+            content = (
+              <div
+                style={{
+                  border: `2px dashed ${isActive ? theme.colorText : theme.colorTextDescription}`,
+                  borderRadius: 3,
+                  height: 16,
+                  width: 16,
+                }}
+              />
+            );
+          } else {
+            const [width, height] = item.value.split('x').map(Number);
+            const isWidthGreater = width > height;
+            content = (
+              <div
+                style={{
+                  aspectRatio: `${width} / ${height}`,
+                  border: `2px solid ${isActive ? theme.colorText : theme.colorTextDescription}`,
+                  borderRadius: 3,
+                  height: isWidthGreater ? undefined : 16,
+                  width: isWidthGreater ? 16 : undefined,
+                }}
+              />
+            );
+          }
+
+          return (
+            <Block
+              align={'center'}
+              clickable
+              gap={4}
+              justify={'center'}
+              key={item.value}
+              onClick={() => {
+                setActive(item.value);
+                onChange?.(item.value);
+              }}
+              padding={8}
+              shadow={isActive && !theme.isDarkMode}
+              style={{
+                backgroundColor: isActive ? theme.colorBgElevated : 'transparent',
+              }}
+              variant={'filled'}
+            >
+              <Center height={16} style={{ marginTop: 4 }} width={16}>
+                {content}
+              </Center>
+              <Text fontSize={12} type={isActive ? undefined : 'secondary'}>
+                {item.label || item.value}
+              </Text>
+            </Block>
+          );
+        })}
+      </Grid>
+    </Block>
+  );
+});
+
+export default SizeSelect;

package/src/app/[variants]/(main)/image/@menu/default.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import ConfigPanel from './features/ConfigPanel';
+
+const page = () => {
+  return <ConfigPanel />;
+};
+
+page.displayName = 'ImageConfigPanel';
+
+export default page;

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

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+
+import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
+
+import Select from '../../../components/AspectRatioSelect';
+
+const AspectRatioSelect = memo(() => {
+  const { value, setValue, enumValues } = useGenerationConfigParam('aspectRatio');
+
+  // 如果模型支持 ratio 枚举值，则使用枚举值
+  if (enumValues && enumValues.length > 0) {
+    const options = enumValues.map((ratio) => ({
+      label: ratio,
+      value: ratio,
+    }));
+
+    return <Select onChange={setValue} options={options} style={{ width: '100%' }} value={value} />;
+  }
+
+  // 如果模型不支持 ratio 参数，返回 null（由外部处理是否显示）
+  return null;
+});
+
+export default AspectRatioSelect;

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;