feat(print): add print-related components and pages (to be completed)

src/pages/output/print/Film.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Film: React.FC = () => {
+  return (
+    <div className="film">
+      {/* Film content */}
+      胶片页面
+    </div>
+  );
+};
+
+export default Film;

src/pages/output/print/FilmBox.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import ImageBox from './ImageBox';
+
+// 假设 ImageBox 已经实现并导入
+
+export interface FilmBoxProps {
+  images: {
+    id: string;
+    src: string;
+    alt?: string;
+  }[];
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const FilmBox: React.FC<FilmBoxProps> = ({ images, className, style }) => {
+  return (
+    <div className={className} style={style}>
+      {images.map((img) => (
+        <ImageBox key={img.id} src={img.src} />
+      ))}
+    </div>
+  );
+};
+
+export default FilmBox;

src/pages/output/print/FilmOperationPanel.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const FilmOperationPanel: React.FC = () => {
+  return (
+    <div className="film-operation-panel">
+      <button>添加胶片</button>
+      <button>删除胶片</button>
+      <button>横向与竖向胶片</button>
+      <button>关闭选中胶片</button>
+      <button>1×1布局</button>
+      <button>1×2布局</button>
+      <button>2×1布局</button>
+      <button>2×2布局</button>
+      <button>自定义布局</button>
+      <button>定义子布局</button>
+      <button>删除子布局</button>
+      <button>Preset</button>
+    </div>
+  );
+};
+
+export default FilmOperationPanel;

src/pages/output/print/FilmTabBar.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const FilmTabBar: React.FC = () => {
+  return <div className="film-tab-bar">{/* Tab bar content */}</div>;
+};
+
+export default FilmTabBar;

src/pages/output/print/ImageBox.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface ImageBoxProps {
+  src: string;
+}
+
+const ImageBox: React.FC<ImageBoxProps> = ({ src }) => {
+  return (
+    <div className="image-box">
+      <img src={src} alt="Image" />
+    </div>
+  );
+};
+
+export default ImageBox;

src/pages/output/print/ImageItem.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface ImageItemProps {
+  src: string;
+}
+/**
+ * 缩略图组件
+ * @param param0 缩略图
+ * @returns component
+ */
+const ImageItem: React.FC<ImageItemProps> = ({ src }) => {
+  return (
+    <div className="image-item">
+      <img src={src} alt="Image" />
+    </div>
+  );
+};
+
+export default ImageItem;

src/pages/output/print/ImageList.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ImageItem from './ImageItem';
+
+interface ImageListProps {
+  images: string[];
+}
+
+const ImageList: React.FC<ImageListProps> = ({ images }) => {
+  return (
+    <div className="image-list">
+      {images.map((image) => (
+        <ImageItem src={image} />
+      ))}
+    </div>
+  );
+};
+
+export default ImageList;

src/pages/output/print/ImageOperationPanel.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const ImageOperationPanel: React.FC = () => {
+  return (
+    <div className="image-operation-panel">
+      <button>Zoom</button>
+      <button>Pan</button>
+      <button>左转90</button>
+      <button>右转90</button>
+      <button>拖放</button>
+      <button>同比缩放</button>
+      <button>水平翻转</button>
+      <button>竖直翻转</button>
+      <button>重新装载</button>
+      <button>自适应大小</button>
+      <button>鼠标调节亮度与对比度</button>
+      <button>反色</button>
+      <button>隐藏或者显示信息</button>
+    </div>
+  );
+};
+
+export default ImageOperationPanel;

src/pages/output/print/OperationPanel.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import FilmOperationPanel from './FilmOperationPanel';
+import ImageOperationPanel from './ImageOperationPanel';
+
+const OperationPanel: React.FC = () => {
+  return (
+    <div className="operation-panel">
+      <FilmOperationPanel />
+      <ImageOperationPanel />
+    </div>
+  );
+};
+
+export default OperationPanel;

src/pages/output/print/PrintControl.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const PrintControl: React.FC = () => {
+  return (
+    <div className="print-control">
+      <select>
+        <option>打印节点1</option>
+        <option>打印节点2</option>
+      </select>
+      <select>
+        <option>操作尺寸1</option>
+        <option>操作尺寸2</option>
+      </select>
+      <button>DICOM打印</button>
+      <button>本地打印</button>
+    </div>
+  );
+};
+
+export default PrintControl;

src/pages/output/print/index.tsx

@@ -0,0 +1,9 @@
+export { default as FilmTabBar } from './FilmTabBar';
+export { default as ImageList } from './ImageList';
+export { default as ImageItem } from './ImageItem';
+export { default as Film } from './Film';
+export { default as OperationPanel } from './OperationPanel';
+export { default as FilmOperationPanel } from './FilmOperationPanel';
+export { default as ImageOperationPanel } from './ImageOperationPanel';
+export { default as ImageBox } from './ImageBox';
+export { default as PrintControl } from './PrintControl';