cd-aichat 1.0.0

package/src/components/SendButtonGroup.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="send-button-group">
+    <!-- 主发送按钮 + 下拉菜单 -->
+    <t-dropdown
+      :disabled="disabled"
+      trigger="click"
+      @click-item="handleOptionClick"
+    >
+      <template #default>
+        <button
+          class="send-btn-combined"
+          :disabled="disabled"
+          :title="disabled ? '请输入消息内容' : '发送消息 (Ctrl+Enter)'"
+          @click="handleSend"
+        >
+          <i class="ri-send-plane-line"></i>
+          <span class="send-text">发送</span>
+          <i class="ri-arrow-down-s-line dropdown-icon"></i>
+        </button>
+      </template>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          v-for="option in options"
+          :key="option.id"
+          :value="option.id"
+          class="dropdown-item"
+        >
+          <i :class="option.icon"></i>
+          <span>{{ option.label }}</span>
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </t-dropdown>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { Dropdown, DropdownMenu, DropdownItem } from 'tdesign-vue-next';
+
+export default {
+  name: 'SendButtonGroup',
+  components: {
+    TDropdown: Dropdown,
+    TDropdownMenu: DropdownMenu,
+    TDropdownItem: DropdownItem
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Array,
+      default: () => [
+        {
+          id: 'screenshot',
+          label: '截屏',
+          icon: 'ri-screenshot-2-line'
+        },
+        {
+          id: 'scheduled',
+          label: '延时发送',
+          icon: 'ri-time-line'
+        },
+        {
+          id: 'burn',
+          label: '阅后即焚',
+          icon: 'ri-fire-line'
+        },
+        {
+          id: 'priority',
+          label: '标记紧急',
+          icon: 'ri-alarm-warning-line'
+        }
+      ]
+    }
+  },
+  emits: ['send', 'option-click'],
+  setup(props, { emit }) {
+    const handleSend = () => {
+      if (!props.disabled) {
+        emit('send');
+      }
+    };
+
+    const handleOptionClick = (value) => {
+      const option = props.options.find(opt => opt.id === value);
+      if (option) {
+        emit('option-click', option);
+      }
+    };
+
+    return {
+      handleSend,
+      handleOptionClick
+    };
+  }
+};
+</script>
+
+<style scoped>
+.send-button-group {
+  display: flex;
+  align-items: center;
+}
+
+.send-btn-combined {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  height: 36px;
+  border: none;
+  border-radius: 4px;
+  background-color: #1890ff;
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.send-btn-combined:hover:not(:disabled) {
+  background-color: #0052a3;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 103, 204, 0.3);
+}
+
+.send-btn-combined:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 1px 4px rgba(0, 103, 204, 0.2);
+}
+
+.send-btn-combined:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.send-text {
+  font-weight: 500;
+}
+
+.dropdown-icon {
+  font-size: 12px;
+  margin-left: 2px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .send-btn-combined {
+    padding: 8px 12px;
+    height: 40px;
+    font-size: 15px;
+  }
+
+  .send-text {
+    display: none;
+  }
+
+  .dropdown-icon {
+    display: none;
+  }
+}
+</style>

package/src/components/screenshot/ScreenshotsBackground/getBoundsByPoints.ts

@@ -0,0 +1,41 @@
+import { Point, Bounds } from '../types'
+
+export default function getBoundsByPoints (
+  { x: x1, y: y1 }: Point,
+  { x: x2, y: y2 }: Point,
+  width: number,
+  height: number
+): Bounds {
+  // 交换值
+  if (x1 > x2) {
+    [x1, x2] = [x2, x1]
+  }
+
+  if (y1 > y2) {
+    [y1, y2] = [y2, y1]
+  }
+
+  // 把图形限制在元素里面
+  if (x1 < 0) {
+    x1 = 0
+  }
+
+  if (x2 > width) {
+    x2 = width
+  }
+
+  if (y1 < 0) {
+    y1 = 0
+  }
+
+  if (y2 > height) {
+    y2 = height
+  }
+
+  return {
+    x: x1,
+    y: y1,
+    width: x2 - x1,
+    height: y2 - y1
+  }
+}

package/src/components/screenshot/ScreenshotsBackground/index.scss

@@ -0,0 +1,27 @@
+.screenshots-background {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &-image {
+    width: 100%;
+    height: 100%;
+    display: block;
+    border: none;
+    outline: none;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+    -webkit-font-smooting: antialiased;
+  }
+
+  &-mask {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}

package/src/components/screenshot/ScreenshotsBackground/index.tsx

@@ -0,0 +1,145 @@
+import React, {
+	memo,
+	ReactElement,
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
+import useBounds from "../hooks/useBounds";
+import useStore from "../hooks/useStore";
+import ScreenshotsMagnifier from "../ScreenshotsMagnifier";
+import { Point, Position } from "../types";
+import getBoundsByPoints from "./getBoundsByPoints";
+import "./index.scss";
+
+export default memo(function ScreenshotsBackground(): ReactElement | null {
+	const { url, image, width, height } = useStore();
+	const [bounds, boundsDispatcher] = useBounds();
+
+	const elRef = useRef<HTMLDivElement>(null);
+	const pointRef = useRef<Point | null>(null);
+	// 用来判断鼠标是否移动过
+	// 如果没有移动过位置，则mouseup时不更新
+	const isMoveRef = useRef<boolean>(false);
+	const [position, setPosition] = useState<Position | null>(null);
+
+	const updateBounds = useCallback(
+		(p1: Point, p2: Point) => {
+			if (!elRef.current) {
+				return;
+			}
+			const { x, y } = elRef.current.getBoundingClientRect();
+
+			boundsDispatcher.set(
+				getBoundsByPoints(
+					{
+						x: p1.x - x,
+						y: p1.y - y,
+					},
+					{
+						x: p2.x - x,
+						y: p2.y - y,
+					},
+					width,
+					height,
+				),
+			);
+		},
+		[width, height, boundsDispatcher],
+	);
+
+	const onMouseDown = useCallback(
+		(e: React.MouseEvent) => {
+			// e.button 鼠标左键
+			if (pointRef.current || bounds || e.button !== 0) {
+				return;
+			}
+			pointRef.current = {
+				x: e.clientX,
+				y: e.clientY,
+			};
+			isMoveRef.current = false;
+		},
+		[bounds],
+	);
+
+	useEffect(() => {
+		const onMouseMove = (e: MouseEvent) => {
+			if (elRef.current) {
+				const rect = elRef.current.getBoundingClientRect();
+				if (
+					e.clientX < rect.left ||
+					e.clientY < rect.top ||
+					e.clientX > rect.right ||
+					e.clientY > rect.bottom
+				) {
+					setPosition(null);
+				} else {
+					setPosition({
+						x: e.clientX - rect.x,
+						y: e.clientY - rect.y,
+					});
+				}
+			}
+
+			if (!pointRef.current) {
+				return;
+			}
+			updateBounds(pointRef.current, {
+				x: e.clientX,
+				y: e.clientY,
+			});
+			isMoveRef.current = true;
+		};
+
+		const onMouseUp = (e: MouseEvent) => {
+			if (!pointRef.current) {
+				return;
+			}
+
+			if (isMoveRef.current) {
+				updateBounds(pointRef.current, {
+					x: e.clientX,
+					y: e.clientY,
+				});
+			}
+			pointRef.current = null;
+			isMoveRef.current = false;
+		};
+		window.addEventListener("mousemove", onMouseMove);
+		window.addEventListener("mouseup", onMouseUp);
+
+		return () => {
+			window.removeEventListener("mousemove", onMouseMove);
+			window.removeEventListener("mouseup", onMouseUp);
+		};
+	}, [updateBounds]);
+
+	useLayoutEffect(() => {
+		if (!image || bounds) {
+			// 重置位置
+			setPosition(null);
+		}
+	}, [image, bounds]);
+
+	// 没有加载完不显示图片
+	if (!url || !image) {
+		return null;
+	}
+
+	return (
+		<div
+			ref={elRef}
+			className="screenshots-background"
+			onMouseDown={onMouseDown}
+		>
+			<img className="screenshots-background-image" src={url} />
+			<div className="screenshots-background-mask" />
+			{position && !bounds && (
+				<ScreenshotsMagnifier x={position?.x} y={position?.y} />
+			)}
+		</div>
+	);
+});

package/src/components/screenshot/ScreenshotsButton/index.scss

@@ -0,0 +1,29 @@
+@import "../var.scss";
+
+.screenshots-button {
+	width: $button-size;
+	height: $button-size;
+	line-height: $button-size;
+	color: #333;
+	font-size: 22px;
+	text-align: center;
+	margin: 0 3px;
+	vertical-align: middle;
+	cursor: pointer;
+
+	&-checked,
+	&:hover {
+		background-color: #eee;
+		outline: 1px solid #777;
+	}
+
+	&-disabled {
+		color: #bbb;
+		cursor: not-allowed;
+
+		&:hover {
+			background-color: #fff;
+			outline: none;
+		}
+	}
+}

package/src/components/screenshot/ScreenshotsButton/index.tsx

@@ -0,0 +1,58 @@
+import React, {
+	memo,
+	ReactElement,
+	PointerEvent,
+	ReactNode,
+	useCallback,
+} from "react";
+import ScreenshotsOption from "../ScreenshotsOption";
+import "./index.scss";
+
+export interface ScreenshotsButtonProps {
+	title: string;
+	icon: string;
+	checked?: boolean;
+	disabled?: boolean;
+	option?: ReactNode;
+	onClick?: (e: PointerEvent<HTMLDivElement>) => unknown;
+}
+
+export default memo(function ScreenshotsButton({
+	title,
+	icon,
+	checked,
+	disabled,
+	option,
+	onClick,
+}: ScreenshotsButtonProps): ReactElement {
+	const classNames = ["screenshots-button"];
+
+	const onButtonClick = useCallback(
+		(e: PointerEvent<HTMLDivElement>) => {
+			if (disabled || !onClick) {
+				return;
+			}
+			onClick(e);
+		},
+		[disabled, onClick],
+	);
+
+	if (checked) {
+		classNames.push("screenshots-button-checked");
+	}
+	if (disabled) {
+		classNames.push("screenshots-button-disabled");
+	}
+
+	return (
+		<ScreenshotsOption open={checked} content={option}>
+			<div
+				className={classNames.join(" ")}
+				title={title}
+				onClick={onButtonClick}
+			>
+				<span className={icon} />
+			</div>
+		</ScreenshotsOption>
+	);
+});

package/src/components/screenshot/ScreenshotsCanvas/getBoundsByPoints.ts

@@ -0,0 +1,55 @@
+import { Bounds, Point } from '../types'
+
+export default function getBoundsByPoints (
+  { x: x1, y: y1 }: Point,
+  { x: x2, y: y2 }: Point,
+  bounds: Bounds,
+  width: number,
+  height: number,
+  resizeOrMove: string
+): Bounds {
+  // 交换值
+  if (x1 > x2) {
+    [x1, x2] = [x2, x1]
+  }
+
+  if (y1 > y2) {
+    [y1, y2] = [y2, y1]
+  }
+
+  // 把图形限制在元素里面
+  if (x1 < 0) {
+    x1 = 0
+    if (resizeOrMove === 'move') {
+      x2 = bounds.width
+    }
+  }
+
+  if (x2 > width) {
+    x2 = width
+    if (resizeOrMove === 'move') {
+      x1 = x2 - bounds.width
+    }
+  }
+
+  if (y1 < 0) {
+    y1 = 0
+    if (resizeOrMove === 'move') {
+      y2 = bounds.height
+    }
+  }
+
+  if (y2 > height) {
+    y2 = height
+    if (resizeOrMove === 'move') {
+      y1 = y2 - bounds.height
+    }
+  }
+
+  return {
+    x: x1,
+    y: y1,
+    width: Math.max(x2 - x1, 1),
+    height: Math.max(y2 - y1, 1)
+  }
+}

package/src/components/screenshot/ScreenshotsCanvas/getPoints.ts

@@ -0,0 +1,60 @@
+import { Point, Bounds } from '../types'
+
+export default function getBoundsByPoints (e: MouseEvent, resizeOrMove: string, point: Point, bounds: Bounds): Point[] {
+  const x = e.clientX - point.x
+  const y = e.clientY - point.y
+  let x1 = bounds.x
+  let y1 = bounds.y
+  let x2 = bounds.x + bounds.width
+  let y2 = bounds.y + bounds.height
+
+  switch (resizeOrMove) {
+    case 'top':
+      y1 += y
+      break
+    case 'top-right':
+      x2 += x
+      y1 += y
+      break
+    case 'right':
+      x2 += x
+      break
+    case 'right-bottom':
+      x2 += x
+      y2 += y
+      break
+    case 'bottom':
+      y2 += y
+      break
+    case 'bottom-left':
+      x1 += x
+      y2 += y
+      break
+    case 'left':
+      x1 += x
+      break
+    case 'left-top':
+      x1 += x
+      y1 += y
+      break
+    case 'move':
+      x1 += x
+      y1 += y
+      x2 += x
+      y2 += y
+      break
+    default:
+      break
+  }
+
+  return [
+    {
+      x: x1,
+      y: y1
+    },
+    {
+      x: x2,
+      y: y2
+    }
+  ]
+}

package/src/components/screenshot/ScreenshotsCanvas/index.scss

@@ -0,0 +1,84 @@
+@import "../var.scss";
+
+.screenshots-canvas {
+	position: absolute;
+	left: 0;
+	top: 0;
+	will-change: width, height, transform;
+
+	&-body,
+	&-mask {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: hidden;
+	}
+
+	&-image {
+		display: block;
+		border: none;
+		outline: none;
+		will-change: transform;
+		max-width: unset;
+		image-rendering: -webkit-optimize-contrast;
+		image-rendering: crisp-edges;
+		-webkit-font-smooting: antialiased;
+	}
+
+	&-panel {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		will-change: width, height;
+	}
+
+	&-size {
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		background-color: rgba(0, 0, 0, 0.8);
+		color: #fff;
+		font-size: 12px;
+		padding: 3px 4px;
+		border-radius: 2px;
+		white-space: nowrap;
+		pointer-events: none;
+	}
+
+	@each $border in $borders {
+		@each $key, $value in $border {
+			&-border-#{$key} {
+				@each $j, $val in $value {
+					#{$j}: $val;
+				}
+				position: absolute;
+				background-color: $border-color;
+				pointer-events: none;
+			}
+		}
+	}
+	@each $point in $points {
+		@each $key, $value in $point {
+			&-point-#{$key} {
+				@each $j, $val in $value {
+					#{$j}: $val;
+				}
+				width: 8px;
+				height: 8px;
+				position: absolute;
+				background-color: $point-color;
+				border-radius: 50%;
+				transform: translate(-50%, -50%);
+			}
+		}
+	}
+}