@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/components/ScheduleConference/TimezonePicker.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="container">
+    <TuiSelect
+      v-model="selectedTime"
+      theme="white"
+      :teleported="false"
+      :custom-select-content-style="{ 'font-weight': 400 }"
+      :value="selectedTime"
+      @input="selectedTime = $event"
+    >
+      <TuiOption
+        v-for="time in timeOptions"
+        :key="time.value"
+        theme="white"
+        :value="time.value"
+        :label="time.label"
+        :custom-option-content-style="{ 'font-weight': 400 }"
+      />
+    </TuiSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  defineProps,
+  defineEmits,
+  watch,
+  onMounted,
+  onUnmounted,
+} from 'vue';
+import TuiSelect from '../common/base/Select/index.vue';
+import TuiOption from '../common/base/Option/index.vue';
+import { getLanguage } from '../../utils/common';
+import { roomService, EventType, LanguageOption } from '../../services';
+
+interface Props {
+  modelValue: string;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['input']);
+const selectedTime = ref(props.modelValue);
+const currentLanguage = ref(getLanguage());
+const timeOptions = computed(() => {
+  switch (currentLanguage.value) {
+    case 'zh-CN':
+      return timeOptionsCh.value;
+    case 'en-US':
+      return timeOptionsEn.value;
+    default:
+      return timeOptionsEn.value;
+  }
+});
+const timeOptionsCh = computed(() => [
+  { label: 'GMT-12:00 世界时 - 国际日期变更线西', value: 'Etc/GMT+12' },
+  { label: 'GMT-11:00 世界时 - 协调世界时-11', value: 'Etc/GMT+11' },
+  { label: 'GMT-10:00 夏威夷 - 阿留申标准时间', value: 'Pacific/Honolulu' },
+  { label: 'GMT-09:00 阿拉斯加标准时间', value: 'America/Anchorage' },
+  { label: 'GMT-08:00 太平洋标准时间', value: 'America/Los_Angeles' },
+  { label: 'GMT-07:00 美国山地标准时间', value: 'America/Denver' },
+  { label: 'GMT-06:00 美国中部标准时间', value: 'America/Chicago' },
+  { label: 'GMT-05:00 美国东部标准时间', value: 'America/New_York' },
+  { label: 'GMT-04:00 大西洋标准时间', value: 'America/Halifax' },
+  {
+    label: 'GMT-03:00 阿根廷标准时间',
+    value: 'America/Argentina/Buenos_Aires',
+  },
+  { label: 'GMT-02:00 协调世界时-02', value: 'Etc/GMT+2' },
+  { label: 'GMT-01:00 佛得角标准时间', value: 'Atlantic/Cape_Verde' },
+  { label: 'GMT+00:00 格林威治标准时间', value: 'Europe/London' },
+  { label: 'GMT+01:00 中欧标准时间', value: 'Europe/Berlin' },
+  { label: 'GMT+02:00 东欧标准时间', value: 'Europe/Kiev' },
+  { label: 'GMT+03:00 莫斯科标准时间', value: 'Europe/Moscow' },
+  { label: 'GMT+04:00 阿布扎比标准时间', value: 'Asia/Dubai' },
+  { label: 'GMT+05:00 巴基斯坦标准时间', value: 'Asia/Karachi' },
+  { label: 'GMT+05:30 印度标准时间', value: 'Asia/Kolkata' },
+  { label: 'GMT+06:00 孟加拉国标准时间', value: 'Asia/Dhaka' },
+  { label: 'GMT+07:00 泰国标准时间', value: 'Asia/Bangkok' },
+  { label: 'GMT+08:00 中国标准时间 - 北京', value: 'Asia/Shanghai' },
+  { label: 'GMT+09:00 日本标准时间', value: 'Asia/Tokyo' },
+  { label: 'GMT+10:00 澳大利亚东部标准时间 - 悉尼', value: 'Australia/Sydney' },
+  { label: 'GMT+11:00 所罗门群岛标准时间', value: 'Pacific/Guadalcanal' },
+  { label: 'GMT+12:00 新西兰标准时间', value: 'Pacific/Auckland' },
+  { label: 'GMT+13:00 汤加标准时间', value: 'Pacific/Tongatapu' },
+]);
+
+const timeOptionsEn = computed(() => [
+  { label: 'GMT-12:00 International Date Line West', value: 'Etc/GMT+12' },
+  { label: 'GMT-11:00 Coordinated Universal Time-11', value: 'Etc/GMT+11' },
+  {
+    label: 'GMT-10:00 Hawaii-Aleutian Standard Time',
+    value: 'Pacific/Honolulu',
+  },
+  { label: 'GMT-09:00 Alaska Standard Time', value: 'America/Anchorage' },
+  { label: 'GMT-08:00 Pacific Standard Time', value: 'America/Los_Angeles' },
+  { label: 'GMT-07:00 Mountain Standard Time', value: 'America/Denver' },
+  { label: 'GMT-06:00 Central Standard Time', value: 'America/Chicago' },
+  { label: 'GMT-05:00 Eastern Standard Time', value: 'America/New_York' },
+  { label: 'GMT-04:00 Atlantic Standard Time', value: 'America/Halifax' },
+  {
+    label: 'GMT-03:00 Argentina Standard Time',
+    value: 'America/Argentina/Buenos_Aires',
+  },
+  { label: 'GMT-02:00 Coordinated Universal Time-02', value: 'Etc/GMT+2' },
+  { label: 'GMT-01:00 Cape Verde Standard Time', value: 'Atlantic/Cape_Verde' },
+  { label: 'GMT+00:00 Greenwich Mean Time', value: 'Europe/London' },
+  { label: 'GMT+01:00 Central European Standard Time', value: 'Europe/Berlin' },
+  { label: 'GMT+02:00 Eastern European Standard Time', value: 'Europe/Kiev' },
+  { label: 'GMT+03:00 Moscow Standard Time', value: 'Europe/Moscow' },
+  { label: 'GMT+04:00 Gulf Standard Time', value: 'Asia/Dubai' },
+  { label: 'GMT+05:00 Pakistan Standard Time', value: 'Asia/Karachi' },
+  { label: 'GMT+05:30 Indian Standard Time', value: 'Asia/Kolkata' },
+  { label: 'GMT+06:00 Bangladesh Standard Time', value: 'Asia/Dhaka' },
+  { label: 'GMT+07:00 Indochina Time', value: 'Asia/Bangkok' },
+  { label: 'GMT+08:00 China Standard Time - Beijing', value: 'Asia/Shanghai' },
+  { label: 'GMT+09:00 Japan Standard Time', value: 'Asia/Tokyo' },
+  {
+    label: 'GMT+10:00 Australian Eastern Standard Time - Sydney',
+    value: 'Australia/Sydney',
+  },
+  {
+    label: 'GMT+11:00 Solomon Islands Standard Time',
+    value: 'Pacific/Guadalcanal',
+  },
+  { label: 'GMT+12:00 New Zealand Standard Time', value: 'Pacific/Auckland' },
+  { label: 'GMT+13:00 Tonga Standard Time', value: 'Pacific/Tongatapu' },
+]);
+const handleLanguageChange = async (language: LanguageOption) => {
+  currentLanguage.value = language;
+};
+onMounted(() => {
+  roomService.on(EventType.LANGUAGE_CHANGED, handleLanguageChange);
+});
+
+onUnmounted(() => {
+  roomService.off(EventType.LANGUAGE_CHANGED, handleLanguageChange);
+});
+
+const updateTime = () => {
+  emit('input', selectedTime.value);
+};
+
+watch(
+  selectedTime,
+  () => {
+    updateTime();
+  },
+  {
+    immediate: true,
+  }
+);
+watch(
+  () => props.modelValue,
+  newValue => {
+    selectedTime.value = newValue;
+  },
+  { immediate: true }
+);
+</script>

package/src/TUIRoom/components/ScheduleConference/scheduleUtils.ts

@@ -0,0 +1,132 @@
+// scheduleUtils.ts`
+import { isWeChat } from '../../utils/environment';
+export interface DateAndTimeResult {
+  date: Date;
+  laterTime: string;
+  time: string;
+}
+
+// 手动格式化日期和时间的函数
+const formatDateTime = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hour = String(date.getHours()).padStart(2, '0');
+  const minute = String(date.getMinutes()).padStart(2, '0');
+
+  return `${month}/${day}/${year}, ${hour}:${minute}`;
+};
+
+export const getDateAndTime = (
+  date: Date,
+  timeZone?: string
+): DateAndTimeResult => {
+  let formattedDate;
+  let currentTimeZone = timeZone;
+  if (isWeChat) {
+    formattedDate = formatDateTime(date);
+  } else {
+    if (!timeZone) {
+      currentTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+    // in other environment use Intl.DateTimeFormat
+    const formatter = new Intl.DateTimeFormat('en-US', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false, // Use 24-hour format
+      currentTimeZone,
+    } as any); // Intl is not supported in the Android mini-program environment, so use any
+
+    formattedDate = formatter.format(date);
+  }
+
+  const [month, day, year, hour, minute] = formattedDate
+    .split(/[\s,:/]+/)
+    .filter(part => part !== 'AM' && part !== 'PM');
+
+  // Round minutes up to the nearest multiple of 15 (00, 15, 30, or 45)
+  const roundedMinute = Math.ceil(parseInt(minute) / 15) * 15;
+
+  // If the rounded minute is 60, increment the hour and set the minute to 00
+  const adjustedHour =
+    roundedMinute === 60 ? parseInt(hour) + 1 : parseInt(hour);
+  const adjustedMinute = roundedMinute === 60 ? 0 : roundedMinute;
+
+  // Create a new date object with the adjusted hour and minute
+  const adjustedDate = new Date(
+    parseInt(year),
+    parseInt(month) - 1,
+    parseInt(day),
+    adjustedHour,
+    adjustedMinute
+  );
+
+  // If the adjusted date is earlier than the current date, add 15 minutes
+  if (adjustedDate < date) {
+    adjustedDate.setMinutes(adjustedDate.getMinutes() + 15);
+  }
+
+  const intHour = parseInt(hour);
+  const intMinute = parseInt(minute);
+
+  return {
+    date: new Date(parseInt(year), parseInt(month) - 1, parseInt(day)),
+    laterTime: `${adjustedHour < 10 ? `0${adjustedHour}` : adjustedHour}:${
+      adjustedMinute < 10 ? `0${adjustedMinute}` : adjustedMinute
+    }`,
+    time: `${intHour < 10 ? `0${intHour}` : intHour}:${intMinute < 10 ? `0${intMinute}` : intMinute}`,
+  };
+};
+
+export const convertToTimestamp = (
+  date: Date,
+  time: string,
+  timezone: string,
+  offset: 1 | -1 = 1,
+  referenceTimezone?: string
+) => {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+
+  // Split time string into hours and minutes
+  const [hour, minute] = time.split(':').map(Number);
+
+  // Create a new date object with the given year, month, day, hour, and minute
+  const dateTime = new Date(year, month, day, hour, minute);
+
+  const timezoneOffset =
+    offset * getTimezoneOffset(timezone, referenceTimezone) * 60 * 1000;
+  return dateTime.getTime() - timezoneOffset;
+};
+
+export const calculateEndTime = (startTime: number, duration: number) => {
+  const endTime = startTime + duration * 1000;
+  return endTime;
+};
+
+export function getTimezoneOffset(
+  targetTimezone: string,
+  referenceTimezone = 'UTC'
+) {
+  const now = Date.now();
+  const referenceDate =
+    referenceTimezone === 'UTC'
+      ? new Date(now).toISOString()
+      : new Date(now).toLocaleString('en-US', {
+          timeZone: referenceTimezone,
+          hour12: false,
+        });
+  const targetDate = new Date(now).toLocaleString('en-US', {
+    timeZone: targetTimezone,
+    hour12: false,
+  });
+  const referenceTime = new Date(referenceDate).getTime();
+  const targetTime = new Date(targetDate).getTime();
+
+  const offset = Math.round((targetTime - referenceTime) / (1000 * 60));
+  return offset;
+}

package/src/TUIRoom/components/Whiteboard/controller/CloseController/image/close.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <title>close</title>
+    <desc>Created with Sketch.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Whiteboard-Guidelines" transform="translate(-417.000000, -445.000000)">
+            <g id="close" transform="translate(417.000000, 445.000000)">
+                <g fill="#FFFFFF" opacity="0.01">
+                    <rect x="0" y="0" width="22" height="22"></rect>
+                </g>
+                <g transform="translate(11.000000, 11.000000) rotate(-315.000000) translate(-11.000000, -11.000000) translate(5.000000, 5.000000)" stroke="#212324" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="0" y1="6" x2="12" y2="6"></line>
+                    <line x1="6" y1="0" x2="6" y2="12"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/CloseController/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="close-controller">
+    <div class="stop-button" @click="stopWhiteboard">
+      <img :src="close" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ipcRenderer } from 'electron';
+import close from './image/close.svg';
+import { getUrlParam } from '../../../../utils/utils';
+
+let isAnnotationWin = false;
+
+function stopWhiteboard() {
+  const annotationParam = getUrlParam('isAnnotationWin');
+  if (annotationParam && annotationParam === 'true') {
+    isAnnotationWin = true;
+  }
+  if (isAnnotationWin) {
+    ipcRenderer.send('annotation:stop-from-annotation-window');
+  } else {
+    ipcRenderer.send('whiteboard:stop-from-whiteboard-window');
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.close-controller {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.stop-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 2px;
+  margin-left: 2px;
+  border-radius: 2px;
+
+  &:hover {
+    background: rgba(33, 35, 36, 0.1);
+  }
+}
+</style>

package/src/TUIRoom/components/Whiteboard/controller/RedoUndo/image/redo-disabled.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>undo-d</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-128.000000, -116.000000)" stroke="#DBE1EA">
+            <polyline transform="translate(143.000000, 126.000000) scale(-1, 1) rotate(-360.000000) translate(-143.000000, -126.000000) " points="145 130 143 128 141 126 143 124 145 122"></polyline>
+            <path d="M135,126 L143,126 C144.104569,126 145,126.895431 145,128 L145,134 L145,134" transform="translate(140.000000, 130.000000) scale(-1, 1) translate(-140.000000, -130.000000) "></path>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/RedoUndo/image/redo.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>undo</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-88.000000, -116.000000)" stroke="#444E60">
+            <polyline transform="translate(103.000000, 126.000000) scale(-1, 1) rotate(-360.000000) translate(-103.000000, -126.000000) " points="105 130 103 128 101 126 103 124 105 122"></polyline>
+            <path d="M95,126 L103,126 C104.104569,126 105,126.895431 105,128 L105,134 L105,134" transform="translate(100.000000, 130.000000) scale(-1, 1) translate(-100.000000, -130.000000) "></path>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/RedoUndo/image/undo-disabled.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>redo-d</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-128.000000, -80.000000)" stroke="#DBE1EA">
+            <polyline transform="translate(137.000000, 90.000000) rotate(-360.000000) translate(-137.000000, -90.000000) " points="139 94 137 92 135 90 137 88 139 86"></polyline>
+            <path d="M135,90 L143,90 C144.104569,90 145,90.8954305 145,92 L145,98 L145,98" ></path>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/RedoUndo/image/undo.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>redo</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-88.000000, -80.000000)" stroke="#444E60">
+            <polyline transform="translate(97.000000, 90.000000) rotate(-360.000000) translate(-97.000000, -90.000000) " points="99 94 97 92 95 90 97 88 99 86"></polyline>
+            <path d="M95,90 L103,90 C104.104569,90 105,90.8954305 105,92 L105,98 L105,98"></path>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/RedoUndo/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="redo-undo">
+    <div class="redo-undo-controller-btn" @click="handleUndo">
+      <img :src="step !== 0 ? undo : undoDisabled" />
+    </div>
+    <div class="redo-undo-controller-btn" @click="handleRedo">
+      <img :src="step !== historyList.length ? redo : redoDisabled" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { inject, ref, Ref, watchEffect } from 'vue';
+import { ipcRenderer } from 'electron';
+import FabricCanvas from './../../core';
+import redo from './image/redo.svg';
+import undo from './image/undo.svg';
+import redoDisabled from './image/redo-disabled.svg';
+import undoDisabled from './image/undo-disabled.svg';
+import eventBus from '../../../../hooks/useMitt';
+
+const canvas = inject<Ref<FabricCanvas>>('canvas');
+const step = ref<number>(0);
+const historyList = ref<any>([]);
+
+function renderCanvas(data: any) {
+  if (!canvas?.value) return;
+  canvas.value.clearCanvas();
+  canvas.value.loadFromJSON(data, () => {
+    canvas.value.renderAll();
+  });
+}
+
+function handleUndo() {
+  eventBus.emit('exitTextEditing');
+  if (!canvas?.value || step.value === 0) return;
+  if (step.value > 0) {
+    // eslint-disable-next-line no-plusplus
+    step.value--;
+    if (step.value === 0) {
+      canvas?.value.clearCanvas();
+    } else {
+      const canvasState = historyList.value[step.value - 1];
+      renderCanvas(canvasState);
+    }
+  }
+}
+
+function handleRedo() {
+  if (!canvas?.value || step.value === historyList.value.length) return;
+
+  if (step.value < historyList.value.length) {
+    // eslint-disable-next-line no-plusplus
+    step.value++;
+    const canvasState = historyList.value[step.value - 1];
+    renderCanvas(canvasState);
+  }
+}
+
+function addToUndoStack() {
+  if (!canvas?.value) return;
+  const data = canvas.value.toJSON();
+  const histroySteps = historyList.value.length;
+
+  if (histroySteps !== step.value) {
+    const arrayTemp = historyList.value.slice(0, step.value);
+    historyList.value = arrayTemp;
+  }
+
+  historyList.value.push(data);
+  step.value = historyList.value.length;
+}
+
+function addEmptyCanvasToUndoStack() {
+  if (historyList.value.length > 0) {
+    addToUndoStack();
+  }
+}
+
+function clearHistoryList() {
+  historyList.value = [];
+  step.value = 0;
+}
+
+function initEvent() {
+  if (!canvas?.value) return;
+  canvas.value.on('push-canvas-to-stack', addToUndoStack);
+  eventBus.on('undo-clear-canvas', addEmptyCanvasToUndoStack);
+  // hotkeys(keyNames.ctrlz, handleUndo);
+  // hotkeys(keyNames.ctrly, handleRedo);
+}
+
+ipcRenderer.on('whiteboard:clear', clearHistoryList);
+ipcRenderer.on('annotation:clear', clearHistoryList);
+
+watchEffect(() => {
+  if (canvas?.value) {
+    initEvent();
+  }
+});
+</script>
+<style lang="scss" scoped>
+.redo-undo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 32px;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.redo-undo-controller-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 2px;
+  margin-left: 2px;
+  border-radius: 2px;
+
+  &:hover {
+    background: rgba(33, 35, 36, 0.1);
+  }
+}
+</style>

package/src/TUIRoom/components/Whiteboard/controller/SaveController/image/download.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <title>upload</title>
+    <desc>Created with Sketch.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Whiteboard-Guidelines" transform="translate(-696.000000, -295.000000)">
+            <g id="upload" transform="translate(696.000000, 295.000000)">
+                <rect fill="#FFFFFF" opacity="0.01" x="0" y="0" width="40" height="40" rx="2"></rect>
+                <polyline stroke="#212324" stroke-linecap="round" stroke-linejoin="round" transform="translate(20.000000, 22.000000) rotate(-90.000000) translate(-20.000000, -14.000000) " points="22 18 20 16 18 14 20 12 22 10"></polyline>
+                <polyline stroke="#212324" stroke-linecap="round" stroke-linejoin="round" points="28 24 28 28 12 28 12 24"></polyline>
+                <line x1="20" y1="24" x2="20" y2="12" id="Stroke-3备份-3" stroke="#212324" stroke-linecap="round" stroke-linejoin="round"></line>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/SaveController/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="save-controller">
+      <button class="save-button" @click="downloadCanvas">
+        <img src="./image/download.svg" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, Ref } from 'vue';
+import FabricCanvas from './../../core';
+
+const canvas = inject<Ref<FabricCanvas>>('canvas');
+
+function generateImageName() {
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  const formattedMonth = month < 10 ? `0${month}` : month;
+  const formattedDay = day < 10 ? `0${day}` : day;
+  const formattedHours = hours < 10 ? `0${hours}` : hours;
+  const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
+  const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
+  return `${year}-${formattedMonth}-${formattedDay}-${formattedHours}.${formattedMinutes}.${formattedSeconds}.png`;
+}
+
+function downloadCanvas() {
+  if (!canvas || !canvas.value) {
+    return;
+  }
+  const dataURL = canvas.value.toDataURL({
+    format: 'png',
+  } as any);
+  const link = document.createElement('a');
+  link.style.display = 'none';
+  link.href = dataURL;
+  link.download = generateImageName();
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+</script>
+
+<style lang="scss" scoped>
+.save-controller {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.save-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 2px;
+  margin-left: 2px;
+  background-color: white;
+  border: none;
+
+  &:hover {
+    background: rgba(33, 35, 36, 0.1);
+  }
+}
+</style>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/arrow-active.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-48.000000, -152.000000)">
+            <g transform="translate(48.000000, 152.000000)">
+                <line x1="6" y1="18" x2="16.4593589" y2="7.54064109" stroke="#3381FF" stroke-linecap="square" stroke-linejoin="round"></line>
+                <polygon fill="#3381FF" points="12 6 18 6 18 12"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/controller/ToolBox/image/arrow.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-8.000000, -152.000000)">
+            <g transform="translate(8.000000, 152.000000)">
+                <line x1="6" y1="18" x2="16.4593589" y2="7.54064109" stroke="#444E60" stroke-linecap="square" stroke-linejoin="round"></line>
+                <polygon fill="#444E60" points="12 6 18 6 18 12"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>