|
|
@@ -1,31 +1,155 @@
|
|
|
import React from 'react';
|
|
|
+import { Button, Flex } from 'antd';
|
|
|
+import { useDispatch } from 'react-redux';
|
|
|
+import { useAppSelector } from '@/states/store';
|
|
|
+import {
|
|
|
+ addFilm,
|
|
|
+ deleteFilm,
|
|
|
+ toggleFilmOrientation,
|
|
|
+ setFilmLayout,
|
|
|
+ deleteSelectedImage,
|
|
|
+} from '@/states/print/printSlice';
|
|
|
+import Icon from '@/components/Icon';
|
|
|
import { showNotImplemented } from '@/utils/notificationHelper';
|
|
|
|
|
|
+interface FilmOperationButtonProps {
|
|
|
+ title: string;
|
|
|
+ iconName: string;
|
|
|
+ onClick: () => void;
|
|
|
+ disabled?: boolean;
|
|
|
+}
|
|
|
+
|
|
|
+const FilmOperationButton: React.FC<FilmOperationButtonProps> = ({
|
|
|
+ title,
|
|
|
+ iconName,
|
|
|
+ onClick,
|
|
|
+ disabled = false,
|
|
|
+}) => {
|
|
|
+ const themeType = useAppSelector((state) => state.theme.themeType);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Button
|
|
|
+ onClick={onClick}
|
|
|
+ disabled={disabled}
|
|
|
+ icon={
|
|
|
+ <Icon
|
|
|
+ module="module-process"
|
|
|
+ name={iconName}
|
|
|
+ userId="base"
|
|
|
+ theme={themeType}
|
|
|
+ size="2x"
|
|
|
+ state="normal"
|
|
|
+ />
|
|
|
+ }
|
|
|
+ style={{
|
|
|
+ width: '1.5rem',
|
|
|
+ height: '1.5rem',
|
|
|
+ padding: 0,
|
|
|
+ }}
|
|
|
+ title={title}
|
|
|
+ className="truncate-text"
|
|
|
+ />
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
const FilmOperationPanel: React.FC = () => {
|
|
|
+ const dispatch = useDispatch();
|
|
|
+ const activeFilmId = useAppSelector((state) => state.print.activeFilmId);
|
|
|
+ const films = useAppSelector((state) => state.print.films);
|
|
|
+
|
|
|
+ const handleAddFilm = () => {
|
|
|
+ dispatch(addFilm());
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleDeleteFilm = () => {
|
|
|
+ if (films.length <= 1) {
|
|
|
+ showNotImplemented('至少需要保留一个胶片');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ dispatch(deleteFilm(activeFilmId));
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleToggleOrientation = () => {
|
|
|
+ dispatch(toggleFilmOrientation());
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleDeleteSelectedImage = () => {
|
|
|
+ dispatch(deleteSelectedImage());
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleSetLayout = (layout: '1x1' | '1x2' | '2x1' | '2x2') => {
|
|
|
+ dispatch(setFilmLayout(layout));
|
|
|
+ };
|
|
|
+
|
|
|
return (
|
|
|
<div className="film-operation-panel">
|
|
|
- <button onClick={() => showNotImplemented('添加胶片')}>添加胶片</button>
|
|
|
- <button onClick={() => showNotImplemented('删除胶片')}>删除胶片</button>
|
|
|
- <button onClick={() => showNotImplemented('横向与竖向胶片')}>
|
|
|
- 横向与竖向胶片
|
|
|
- </button>
|
|
|
- <button onClick={() => showNotImplemented('关闭选中胶片')}>
|
|
|
- 关闭选中胶片
|
|
|
- </button>
|
|
|
- <button onClick={() => showNotImplemented('1×1布局')}>1×1布局</button>
|
|
|
- <button onClick={() => showNotImplemented('1×2布局')}>1×2布局</button>
|
|
|
- <button onClick={() => showNotImplemented('2×1布局')}>2×1布局</button>
|
|
|
- <button onClick={() => showNotImplemented('2×2布局')}>2×2布局</button>
|
|
|
- <button onClick={() => showNotImplemented('自定义布局')}>
|
|
|
- 自定义布局
|
|
|
- </button>
|
|
|
- <button onClick={() => showNotImplemented('定义子布局')}>
|
|
|
- 定义子布局
|
|
|
- </button>
|
|
|
- <button onClick={() => showNotImplemented('删除子布局')}>
|
|
|
- 删除子布局
|
|
|
- </button>
|
|
|
- <button onClick={() => showNotImplemented('Preset')}>Preset</button>
|
|
|
+ <div className="font-semibold">胶片操作</div>
|
|
|
+ <Flex wrap align="center" justify="start">
|
|
|
+ <FilmOperationButton
|
|
|
+ title="添加胶片"
|
|
|
+ iconName="RotateAnyDegree"
|
|
|
+ onClick={handleAddFilm}
|
|
|
+ />
|
|
|
+ <FilmOperationButton
|
|
|
+ title="删除胶片"
|
|
|
+ iconName="RotateAnyDegree"
|
|
|
+ onClick={handleDeleteFilm}
|
|
|
+ />
|
|
|
+ <FilmOperationButton
|
|
|
+ title="横向/竖向"
|
|
|
+ iconName="RotateAnyDegree"
|
|
|
+ onClick={handleToggleOrientation}
|
|
|
+ />
|
|
|
+ <FilmOperationButton
|
|
|
+ title="删除选中图像"
|
|
|
+ iconName="RotateAnyDegree"
|
|
|
+ onClick={handleDeleteSelectedImage}
|
|
|
+ />
|
|
|
+ </Flex>
|
|
|
+
|
|
|
+ <div className="font-semibold">胶片布局</div>
|
|
|
+ <Flex wrap gap="small" align="center" justify="start">
|
|
|
+ <FilmOperationButton
|
|
|
+ title="1×1分格"
|
|
|
+ iconName="1x1_normal"
|
|
|
+ onClick={() => handleSetLayout('1x1')}
|
|
|
+ />
|
|
|
+ <FilmOperationButton
|
|
|
+ title="1×2分格"
|
|
|
+ iconName="1x2_normal"
|
|
|
+ onClick={() => handleSetLayout('1x2')}
|
|
|
+ />
|
|
|
+ <FilmOperationButton
|
|
|
+ title="2×1分格"
|
|
|
+ iconName="2x1_normal"
|
|
|
+ onClick={() => handleSetLayout('2x1')}
|
|
|
+ />
|
|
|
+ <FilmOperationButton
|
|
|
+ title="2×2分格"
|
|
|
+ iconName="2x2_normal"
|
|
|
+ onClick={() => handleSetLayout('2x2')}
|
|
|
+ />
|
|
|
+ <FilmOperationButton
|
|
|
+ title="自定义布局"
|
|
|
+ iconName="RotateAnyDegree"
|
|
|
+ onClick={() => showNotImplemented('自定义布局')}
|
|
|
+ />
|
|
|
+ <FilmOperationButton
|
|
|
+ title="定义子布局"
|
|
|
+ iconName="RotateAnyDegree"
|
|
|
+ onClick={() => showNotImplemented('定义子布局')}
|
|
|
+ />
|
|
|
+ <FilmOperationButton
|
|
|
+ title="取消子布局"
|
|
|
+ iconName="RotateAnyDegree"
|
|
|
+ onClick={() => showNotImplemented('取消子布局')}
|
|
|
+ />
|
|
|
+ <FilmOperationButton
|
|
|
+ title="更多胶片布局"
|
|
|
+ iconName="btn_OtherSetting"
|
|
|
+ onClick={() => showNotImplemented('更多胶片布局')}
|
|
|
+ />
|
|
|
+ </Flex>
|
|
|
</div>
|
|
|
);
|
|
|
};
|