tor-univer-sheet 1.0.0

package/src/components/UniverSheet/plugins/importFile/ImportFilePlugin.ts

@@ -0,0 +1,109 @@
+import {
+  Inject,
+  Injector,
+  Plugin,
+  CommandType,
+  ICommandService,
+  touchDependencies,
+  UniverInstanceType,
+  IUniverInstanceService,
+  Workbook,
+  IWorkbookData
+} from '@univerjs/core'
+import { ComponentManager, IMenuManagerService, MenuItemType, RibbonStartGroup, ContextMenuPosition, ContextMenuGroup } from '@univerjs/ui'
+import type { IAccessor, ICommand, Dependency } from '@univerjs/core'
+import { SetRangeValuesCommand } from '@univerjs/sheets'
+import { FUniver } from '@univerjs/core/facade'
+import { downloadBlobRes, openMultipleFileSelector } from '@/utils/fileHelp'
+
+// 自定义ui
+import ImportFileIcon from './ImportFileIcon.vue'
+
+import { read, utils, readFile } from 'xlsx'
+
+function waitUserSelectXlSXFile(onSelect: (data: { data: string[][]; colsCount: number; rowsCount: number }) => void) {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = '.xlsx'
+  input.multiple = false
+  input.click()
+  input.onchange = () => {
+    const file = input.files?.[0]
+    if (!file) return
+    console.log('file', file)
+    const reader = new FileReader()
+    reader.onload = (e: any) => {
+      const data = new Uint8Array(e.target.result)
+      const workbook = read(data, { type: 'array' })
+      console.log('workbook', workbook)
+      const sheets: any = {}
+      workbook.SheetNames.forEach((sheetName) => {
+        const worksheet = workbook.Sheets[sheetName]
+        sheets[sheetName] = utils.sheet_to_json(worksheet, { header: 1 })
+      })
+      console.log('sheets', sheets)
+    }
+    reader.readAsArrayBuffer(file)
+  }
+}
+
+class ImportFilePlugin extends Plugin {
+  static override pluginName = 'rt-import-file-button'
+  univerApi: FUniver = {} as FUniver
+
+  constructor(
+    _config: any,
+    // inject injector, required
+    @Inject(Injector) readonly _injector: Injector,
+    // inject menu service, to add toolbar button
+    @Inject(IMenuManagerService) private readonly menuManagerService: IMenuManagerService,
+    // inject command service, to register command handler
+    @Inject(ICommandService) private readonly commandService: ICommandService,
+    // inject component manager, to register icon component
+    @Inject(ComponentManager) private readonly componentManager: ComponentManager
+  ) {
+    super()
+    this.univerApi = _config.univerAPI
+  }
+  onStarting(): void {
+    console.log('onStarting', this.componentManager)
+    this.componentManager.register('rt-import-file-icon', ImportFileIcon, { framework: 'vue3' })
+    const buttonId = 'rt-import-file-button'
+    const menuItemFactory = () => ({
+      id: buttonId,
+      title: '导入',
+      tooltip: '导入xlsx文件',
+      icon: 'rt-import-file-icon',
+      type: MenuItemType.BUTTON
+    })
+    this.menuManagerService.mergeMenu({
+      [RibbonStartGroup.LAYOUT]: {
+        [buttonId]: {
+          order: 2,
+          menuItemFactory
+        }
+      }
+    })
+    const command: ICommand = {
+      type: CommandType.OPERATION,
+      // command id, same as menu button id
+      id: buttonId,
+      handler: async (accessor: IAccessor) => {
+        console.log('点击了导入')
+        const univer = accessor.get(IUniverInstanceService)
+        const commandService = accessor.get(ICommandService)
+        const file: any = await openMultipleFileSelector('.xlsx')
+        const snapshot = await this.univerApi.importXLSXToSnapshotAsync(file[0])
+        if (snapshot) {
+          this.univerApi.createWorkbook(snapshot as IWorkbookData)
+        } else {
+          console.error('Failed to import XLSX file: returned undefined')
+        }
+        return true
+      }
+    }
+    this.commandService.registerCommand(command)
+  }
+}
+
+export default ImportFilePlugin

package/src/components/UniverSheet/plugins/index.ts

@@ -0,0 +1,10 @@
+// src/components/UniverSheet/plugins/index.ts
+import { registerExternalComponents, ExternalComponents } from './Plugins'
+import { indicatorsFormSchemas, timeConfigFormSchemas } from './Plugins'
+
+export {
+  registerExternalComponents,
+  indicatorsFormSchemas,
+  timeConfigFormSchemas,
+  type ExternalComponents
+}

package/src/components/UniverSheet/plugins/indicatorsContextMenu/IndicatorsContextMenuPlugin.ts

@@ -0,0 +1,134 @@
+import { Inject, Injector, Plugin, CommandType, ICommandService, touchDependencies, UniverInstanceType, IUniverInstanceService, Workbook } from '@univerjs/core'
+import { ComponentManager, IMenuManagerService, MenuItemType, RibbonStartGroup, ContextMenuPosition, ContextMenuGroup } from '@univerjs/ui'
+import type { IAccessor, ICommand, Dependency } from '@univerjs/core'
+import type { FWorkbook, FWorksheet, FSelection, FRange } from '@univerjs/preset-sheets-core'
+import { FUniver } from '@univerjs/core/facade';
+import type { ICellData } from '@univerjs/presets'
+import { createVNode, render } from 'vue'
+import { ElConfigProvider } from 'element-plus'
+// 自定义ui
+// import { FolderSingle } from '@univerjs/icons'
+import IndicatorsMenu from './components/IndicatorsMenu.vue'
+// import IndicatorsUniverSheetConfigDialog from './components/IndicatorsUniverSheetConfigDialog.vue'
+
+
+// import saveIcon from '@/assets/icons/saveIcon.svg'
+
+// 定义一个名为 CustomButtonPlugin 的类，继承自 Plugin 类
+class IndicatorsContextMenuPlugin extends Plugin {
+  static override pluginName = 'IndicatorsContextMenuPlugin'
+  univerApi: FUniver = {} as FUniver
+  dialogRef: any = null
+
+  constructor(
+    _config: any,
+    // inject injector, required
+    @Inject(Injector) readonly _injector: Injector,
+    // inject menu service, to add toolbar button
+    @Inject(IMenuManagerService) private readonly menuManagerService: IMenuManagerService,
+    // inject command service, to register command handler
+    @Inject(ICommandService) private readonly commandService: ICommandService,
+    // inject component manager, to register icon component
+    @Inject(ComponentManager) private readonly componentManager: ComponentManager,
+  ) {
+    super()
+    this.univerApi = _config.univerAPI
+    this.dialogRef = _config.dialogRef
+  }
+
+  // 动态挂载 ConfigDialog 并显示弹窗
+  private async showConfigDialog(cellData: ICellData, title: '配置指标' | '指标详情') {
+    return this.dialogRef.open({ cellData, title })
+    // // 创建一个容器元素
+    // const container = document.createElement('div')
+    // document.body.appendChild(container)
+
+    // // 创建组件实例
+    // const vnode = createVNode(IndicatorsUniverSheetConfigDialog, {
+    //   // 监听 success 事件
+    //   onSuccess: (data: any) => {
+    //     console.log('表单提交数据:', data)
+    //     // 卸载组件
+    //     render(null, container)
+    //     document.body.removeChild(container)
+    //   },
+    //   // 监听关闭事件
+    //   onClose: () => {
+    //     render(null, container)
+    //     document.body.removeChild(container)
+    //   },
+    // })
+
+    // // 挂载组件
+    // render(vnode, container)
+
+    // // 调用 open 方法
+    // return vnode.component?.exposed?.open({ cellData, title })
+
+  }
+  onStarting(): void {
+    this.componentManager.register('IndicatorsMenu', IndicatorsMenu, { framework: 'vue3' })
+    // this.univerApi.registerComponent('IndicatorsMenu', IndicatorsMenu, { framework: 'vue3' })
+    const buttonId = 'indicators-context-menu-plugin'
+    const menuItemFactory = () => ({
+      id: buttonId,
+      title: '配置指标',
+      icon: 'IndicatorsMenu',
+      type: MenuItemType.BUTTON,
+    })
+    this.menuManagerService.mergeMenu({
+      [ContextMenuPosition.MAIN_AREA]: {
+        [ContextMenuGroup.OTHERS]: {
+          [buttonId]: {
+            order: 12,
+            menuItemFactory,
+          },
+        }
+      }
+    })
+    const command: ICommand = {
+      type: CommandType.OPERATION,
+      // command id, same as menu button id
+      id: buttonId,
+      handler: async (accessor: IAccessor) => {
+        console.log('点击了配置指标');
+        const workbook: FWorkbook = this.univerApi.getActiveWorkbook() as FWorkbook;
+        const fWorksheet: FWorksheet = workbook.getActiveSheet() as FWorksheet
+        const fSelection: FSelection = fWorksheet.getSelection() as FSelection;
+        const activeRange: FRange = fSelection.getActiveRange() as FRange;
+        console.log('单元格', activeRange.getCellData())
+        const customData = await this.showConfigDialog(activeRange.getCellData() as ICellData, '配置指标')
+        console.log('customData', customData)
+        if (!customData || !Object.keys(customData).length) {
+          activeRange.setValue({
+            custom: null
+          })
+          activeRange.deleteNote()
+          return true
+        }
+        activeRange.setValue({
+          custom: {
+            ...customData,
+            cellType: 'indicator'
+          }
+        })
+        const rowNum = activeRange.getRow()
+        const colNum = activeRange.getColumn()
+        activeRange.createOrUpdateNote({
+          id: `${activeRange.getSheetId()}-${rowNum}-${colNum}`,
+          row: rowNum,
+          col: colNum,
+          note: `指标名称：${customData?.indicatorName};指标编码: ${customData?.indicatorCode};指标ID: ${customData?.indicatorId};`,
+          width: 200,
+          height: 100,
+          show: false,
+        })
+        console.log('配置后的单元格', activeRange.getCellData())
+        return true;
+      }
+    }
+    this.commandService.registerCommand(command);
+  }
+}
+
+export default IndicatorsContextMenuPlugin

package/src/components/UniverSheet/plugins/indicatorsContextMenu/components/IndicatorsMenu.vue

@@ -0,0 +1,49 @@
+<template>
+  <svg
+    t="1741243303947"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="5288"
+    width="16"
+    height="16"
+  >
+    <path
+      d="M526.628571 468.114286m-87.771428 0a87.771429 87.771429 0 1 0 175.542857 0 87.771429 87.771429 0 1 0-175.542857 0Z"
+      fill="#41CB8F"
+      p-id="5289"
+    ></path>
+    <path
+      d="M292.571429 336.457143m-29.257143 0a29.257143 29.257143 0 1 0 58.514285 0 29.257143 29.257143 0 1 0-58.514285 0Z"
+      fill="#41CB8F"
+      p-id="5290"
+    ></path>
+    <path
+      d="M672.914286 731.428571m-29.257143 0a29.257143 29.257143 0 1 0 58.514286 0 29.257143 29.257143 0 1 0-58.514286 0Z"
+      fill="#41CB8F"
+      p-id="5291"
+    ></path>
+    <path
+      d="M263.314286 746.057143m-29.257143 0a29.257143 29.257143 0 1 0 58.514286 0 29.257143 29.257143 0 1 0-58.514286 0Z"
+      fill="#41CB8F"
+      p-id="5292"
+    ></path>
+    <path
+      d="M950.857143 0H73.142857C32.182857 0 0 32.182857 0 73.142857v877.714286c0 40.96 32.182857 73.142857 73.142857 73.142857h877.714286c40.96 0 73.142857-32.182857 73.142857-73.142857V73.142857c0-40.96-32.182857-73.142857-73.142857-73.142857zM263.314286 804.571429c-32.182857 0-58.514286-26.331429-58.514286-58.514286s26.331429-58.514286 58.514286-58.514286 58.514286 26.331429 58.514285 58.514286-26.331429 58.514286-58.514285 58.514286z m380.342857-336.457143c0 5.851429 0 10.24-1.462857 16.091428l90.697143 10.24c7.314286 1.462857 13.165714 8.777143 13.165714 16.091429-1.462857 7.314286-7.314286 13.165714-14.628572 13.165714h-1.462857l-95.085714-11.702857c-7.314286 17.554286-19.017143 32.182857-32.182857 43.885714l61.44 117.028572c2.925714 0 5.851429-1.462857 8.777143-1.462857 32.182857 0 58.514286 26.331429 58.514285 58.514285s-26.331429 58.514286-58.514285 58.514286-58.514286-26.331429-58.514286-58.514286c0-19.017143 8.777143-35.108571 21.942857-45.348571l-58.514286-112.64c-16.091429 8.777143-32.182857 13.165714-51.2 13.165714-24.868571 0-46.811429-7.314286-65.828571-20.48l-112.64 112.64c-2.925714 2.925714-7.314286 4.388571-10.24 4.388572-4.388571 0-7.314286-1.462857-10.24-4.388572-5.851429-5.851429-5.851429-14.628571 0-20.48l111.177143-111.177143c-17.554286-20.48-29.257143-46.811429-29.257143-76.068571 0-14.628571 2.925714-29.257143 8.777143-42.422857L332.068571 380.342857c-10.24 8.777143-24.868571 14.628571-39.497142 14.628572-32.182857 0-58.514286-26.331429-58.514286-58.514286s26.331429-58.514286 58.514286-58.514286 58.514286 26.331429 58.514285 58.514286c0 5.851429-1.462857 13.165714-2.925714 19.017143l83.382857 45.348571c21.942857-29.257143 55.588571-48.274286 95.085714-48.274286 21.942857 0 43.885714 5.851429 61.44 17.554286l52.662858-57.051428c-7.314286-11.702857-11.702857-21.942857-11.702858-35.108572 0-32.182857 26.331429-58.514286 58.514286-58.514286s58.514286 26.331429 58.514286 58.514286-26.331429 58.514286-58.514286 58.514286c-8.777143 0-17.554286-2.925714-24.868571-5.851429l-51.2 55.588572c19.017143 21.942857 32.182857 49.737143 32.182857 81.92z m175.542857 117.028571c-32.182857 0-58.514286-26.331429-58.514286-58.514286s26.331429-58.514286 58.514286-58.514285 58.514286 26.331429 58.514286 58.514285-26.331429 58.514286-58.514286 58.514286z"
+      fill="#41CB8F"
+      p-id="5293"
+    ></path>
+    <path
+      d="M819.2 526.628571m-29.257143 0a29.257143 29.257143 0 1 0 58.514286 0 29.257143 29.257143 0 1 0-58.514286 0Z"
+      fill="#41CB8F"
+      p-id="5294"
+    ></path>
+    <path
+      d="M687.542857 277.942857m-29.257143 0a29.257143 29.257143 0 1 0 58.514286 0 29.257143 29.257143 0 1 0-58.514286 0Z"
+      fill="#41CB8F"
+      p-id="5295"
+    ></path>
+  </svg>
+</template>
+<script setup lang="ts" name="IndicatorsMenu"></script>

package/src/components/UniverSheet/plugins/indicatorsContextMenu/components/IndicatorsUniverSheetConfigDialog.vue

@@ -0,0 +1,153 @@
+<template>
+  <el-dialog :model-value="visible" :title="title" width="90%" @close="handleCancel" append-to-body>
+    <el-form ref="formRef" :model="formData" label-width="120px">
+      <ContentWrap
+        class="cst-card"
+        v-for="(item, index) of formSchema"
+        :key="index"
+        :title="item.title"
+      >
+        <el-row :gutter="16">
+          <el-col v-for="(schema, schemaIndex) of item.schemas" :span="6" :key="schemaIndex">
+            <el-form-item :label="schema.label" :prop="schema.field" v-bind="schema.formItemProps">
+              <component
+                :is="
+                  schema.render
+                    ? schema.render({ formModel: formData, schema })
+                    : componentMap[schema.component!] || componentMap.Input
+                "
+                v-model="formData[schema.field]"
+                v-bind="
+                  isFunction(schema.componentProps)
+                    ? schema.componentProps(formData)
+                    : schema.componentProps || {}
+                "
+                :placeholder="`请输入${schema.label}`"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </ContentWrap>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="handleReset">重置</el-button>
+      <el-button type="primary" @click="handleSubmit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, computed } from 'vue'
+import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
+import {
+  ElConfigProvider,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElButton,
+  ElMessage,
+  ElRow,
+  ElCol,
+} from 'element-plus'
+import type { ICellData } from '@univerjs/presets'
+import { componentMap } from '@/components/Form/src/componentMap'
+import { isEmpty, isFunction, isBoolean } from '@/utils/is'
+import { indicatorsFormSchemas, FormType, ExtendedFormSchema } from '../../Plugins'
+
+defineOptions({ name: 'IndicatorsUniverSheetConfigDialog' })
+
+let prResolve: any, prReject: any
+const visible = ref(false)
+const title = ref<'配置指标' | '指标详情'>('配置指标')
+const formRef = ref()
+
+const formSchema = computed<FormType[]>(() => {
+  return indicatorsFormSchemas.map((item) => {
+    const arr = item.schemas.filter((item: ExtendedFormSchema) => {
+      if (item.hasOwnProperty('hidden')) {
+        if (isFunction(item.hidden) && item.hidden(formData.value)) {
+          return false
+        }
+        if (isBoolean(item.hidden) && item.hidden) {
+          return false
+        }
+      }
+      return true
+    })
+    return {
+      ...item,
+      schemas: arr,
+    }
+  })
+})
+
+const formData = ref<Recordable>({})
+
+// 动态初始化 formData 默认值
+function initFormData() {
+  formSchema.value.forEach((group) => {
+    group.schemas.forEach((schema) => {
+      formData.value[schema.field] = schema.value ?? null // 设置默认值
+    })
+  })
+}
+function close() {
+  if (prReject) prReject()
+}
+
+function handleCancel() {
+  visible.value = false
+}
+
+async function fixData(data: any) {
+  console.log('fixData', formRef.value)
+  await formRef.value?.resetFields()
+  initFormData() // 初始化 formData
+  if (!data) return
+  if (data && Object.keys(data).length > 0) {
+    for (const key of Object.keys(formData.value)) {
+      formData.value[key] = data[key]
+    }
+  }
+}
+async function open(data: { cellData: ICellData; title: '配置指标' | '指标详情' }) {
+  console.log('open', data)
+  visible.value = true
+  await nextTick()
+  const custom = data?.cellData?.custom || {}
+  await fixData(custom)
+  return new Promise((resolve, reject) => {
+    prResolve = resolve
+    prReject = reject
+  })
+}
+
+async function handleReset() {
+  formRef.value?.resetFields()
+}
+async function handleSubmit() {
+  try {
+    await formRef.value?.validate()
+    // emit('success', { ...formData.value })
+    prResolve({ ...formData.value })
+    visible.value = false
+  } catch (error) {
+    ElMessage.error('请填写完整的表单信息')
+  }
+}
+
+defineExpose({
+  handleCancel,
+  close,
+  open,
+})
+</script>
+
+<style scoped>
+.cst-card {
+  border: unset !important;
+}
+</style>

package/src/components/UniverSheet/plugins/saveButton/ButtonIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    t="1741163047735"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="1370"
+    width="16"
+    height="16"
+  >
+    <path
+      d="M882.356706 0.150588a136.131765 136.131765 0 0 1 135.740235 135.770353v746.616471a136.131765 136.131765 0 0 1-135.740235 135.710117H135.740235A136.131765 136.131765 0 0 1 0 882.507294V135.890824A136.131765 136.131765 0 0 1 135.740235 0.180706h33.942589V322.56a102.098824 102.098824 0 0 0 101.797647 101.797647H746.616471a102.098824 102.098824 0 0 0 101.797647-101.797647V0.150588h33.942588zM240.790588 33.129412c0-18.221176 15.36-33.129412 34.123294-33.129412h443.723294c18.793412 0 34.153412 14.908235 34.153412 33.129412v265.035294c0 18.221176-15.36 33.129412-34.153412 33.129412H274.913882c-18.763294 0-34.123294-14.908235-34.123294-33.129412V33.129412zM667.407059 205.402353V122.578824c0-23.190588-18.763294-41.411765-42.646588-41.411765-23.913412 0-42.676706 18.221176-42.676706 41.411765v82.823529c0 23.190588 18.763294 41.411765 42.676706 41.411765 23.883294 0 42.646588-18.221176 42.646588-41.411765z"
+      fill="#FA581C"
+      p-id="1371"
+    ></path>
+  </svg>
+</template>
+<script setup lang="ts" name="ButtonIcon"></script>

package/src/components/UniverSheet/plugins/saveButton/SaveButton.ts

@@ -0,0 +1,68 @@
+import { Inject, Injector, Plugin, CommandType, ICommandService, touchDependencies, UniverInstanceType, IUniverInstanceService, Workbook } from '@univerjs/presets'
+import { ComponentManager, IMenuManagerService, MenuItemType, RibbonStartGroup, ContextMenuPosition, ContextMenuGroup } from '@univerjs/ui'
+import type { IAccessor, ICommand, Dependency } from '@univerjs/core'
+import { FUniver } from '@univerjs/core/facade'
+// 自定义ui
+// import { FolderSingle } from '@univerjs/icons'
+import ButtonIcon from './ButtonIcon.vue'
+
+
+// import saveIcon from '@/assets/icons/saveIcon.svg'
+
+// 定义一个名为 CustomButtonPlugin 的类，继承自 Plugin 类
+class SaveButtonPlugin extends Plugin {
+  static override pluginName = 'save-button'
+  univerApi: FUniver = {} as FUniver
+
+  constructor(
+    _config: any,
+    // inject injector, required
+    @Inject(Injector) readonly _injector: Injector,
+    // inject menu service, to add toolbar button
+    @Inject(IMenuManagerService) private readonly menuManagerService: IMenuManagerService,
+    // inject command service, to register command handler
+    @Inject(ICommandService) private readonly commandService: ICommandService,
+    // inject component manager, to register icon component
+    @Inject(ComponentManager) private readonly componentManager: ComponentManager,
+  ) {
+    super()
+    this.univerApi = _config?.univerAPI
+  }
+  onStarting(): void {
+    this.componentManager.register('saveIcon', ButtonIcon, { framework: 'vue3' })
+    // this.univerApi.registerComponent('saveIcon', ButtonIcon, { framework: 'vue3' })
+    const buttonId = 'save-button'
+    const menuItemFactory = () => ({
+      id: buttonId,
+      title: '保存',
+      tooltip: '保存',
+      icon: 'saveIcon',
+      type: MenuItemType.BUTTON,
+    })
+    this.menuManagerService.mergeMenu({
+      [RibbonStartGroup.LAYOUT]: {
+        [buttonId]: {
+          order: 1,
+          menuItemFactory,
+        },
+      },
+    })
+    const command: ICommand = {
+      type: CommandType.OPERATION,
+      // command id, same as menu button id
+      id: buttonId,
+      handler: (accessor: IAccessor) => {
+        console.log('点击了保存');
+        const univer = accessor.get(IUniverInstanceService)
+        const commandService = accessor.get(ICommandService)
+        const sheet = univer.getCurrentUnitOfType<Workbook>(UniverInstanceType.UNIVER_SHEET)!.getActiveSheet()
+        const workbook = this.univerApi.getActiveWorkbook()
+        console.log('工作簿数据', workbook?.save().sheets)
+        return true;
+      }
+    }
+    this.commandService.registerCommand(command);
+  }
+}
+
+export default SaveButtonPlugin

package/src/components/UniverSheet/plugins/syncContextMenu/SyncContextMenu.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    t="1741243523970"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="7203"
+    width="16"
+    height="16"
+  >
+    <path
+      d="M810.666667 128H213.333333c-46.933333 0-85.333333 38.4-85.333333 85.333333v597.333334c0 46.933333 38.4 85.333333 85.333333 85.333333h597.333334c46.933333 0 85.333333-38.4 85.333333-85.333333V213.333333c0-46.933333-38.4-85.333333-85.333333-85.333333z m0 640c0 23.466667-19.2 42.666667-42.666667 42.666667H256c-23.466667 0-42.666667-19.2-42.666667-42.666667V256c0-23.466667 19.2-42.666667 42.666667-42.666667h512c23.466667 0 42.666667 19.2 42.666667 42.666667v512z"
+      fill="#297AFF"
+      p-id="7204"
+    ></path>
+    <path
+      d="M533.333333 490.666667h168.533334c8.533333 0 17.066667-4.266667 23.466666-8.533334l8.533334-8.533333c12.8-12.8 12.8-34.133333 0-46.933333l-36.266667-36.266667-104.533333-104.533333c-4.266667-8.533333-19.2-8.533333-27.733334 0l-29.866666 29.866666c-8.533333 8.533333-8.533333 21.333333 0 29.866667L597.333333 405.333333H313.6c-12.8 0-21.333333 8.533333-21.333333 21.333334v42.666666c0 12.8 8.533333 21.333333 21.333333 21.333334H533.333333zM497.066667 533.333333h-168.533334c-8.533333 0-17.066667 4.266667-23.466666 8.533334l-8.533334 8.533333c-12.8 12.8-12.8 34.133333 0 46.933333l36.266667 36.266667 104.533333 104.533333c4.266667 8.533333 19.2 8.533333 27.733334 0l29.866666-29.866666c8.533333-8.533333 8.533333-21.333333 0-29.866667L433.066667 618.666667h283.733333c12.8 0 21.333333-8.533333 21.333333-21.333334v-42.666666c0-12.8-8.533333-21.333333-21.333333-21.333334H497.066667z"
+      fill="#297AFF"
+      p-id="7205"
+    ></path>
+  </svg>
+</template>
+<script setup lang="ts" name="SyncContextMenu"></script>

package/src/components/UniverSheet/plugins/syncContextMenu/SyncContextMenuPlugin.ts

@@ -0,0 +1,65 @@
+import { Inject, Injector, Plugin, CommandType, ICommandService, touchDependencies, UniverInstanceType, IUniverInstanceService, Workbook } from '@univerjs/core'
+import { ComponentManager, IMenuManagerService, MenuItemType, RibbonStartGroup, ContextMenuPosition, ContextMenuGroup } from '@univerjs/ui'
+import type { IAccessor, ICommand, Dependency } from '@univerjs/core'
+import { FUniver } from '@univerjs/core/facade';
+// 自定义ui
+// import { FolderSingle } from '@univerjs/icons'
+import SyncContextMenu from './SyncContextMenu.vue'
+
+
+// import saveIcon from '@/assets/icons/saveIcon.svg'
+
+// 定义一个名为 CustomButtonPlugin 的类，继承自 Plugin 类
+class SyncContextMenuPlugin extends Plugin {
+  static override pluginName = 'SyncContextMenuPlugin'
+  univerApi: FUniver = {} as FUniver
+
+  constructor(
+    _config: any,
+    // inject injector, required
+    @Inject(Injector) readonly _injector: Injector,
+    // inject menu service, to add toolbar button
+    @Inject(IMenuManagerService) private readonly menuManagerService: IMenuManagerService,
+    // inject command service, to register command handler
+    @Inject(ICommandService) private readonly commandService: ICommandService,
+    // inject component manager, to register icon component
+    @Inject(ComponentManager) private readonly componentManager: ComponentManager,
+  ) {
+    super()
+    this.univerApi = _config?.univerAPI
+  }
+  onStarting(): void {
+    this.componentManager.register('SyncContextMenu', SyncContextMenu, { framework: 'vue3' })
+    const buttonId = 'sync-context-menu-plugin'
+    const menuItemFactory = () => ({
+      id: buttonId,
+      title: '立刻同步',
+      icon: 'SyncContextMenu',
+      type: MenuItemType.BUTTON,
+    })
+    this.menuManagerService.mergeMenu({
+      [ContextMenuPosition.MAIN_AREA]: {
+        [ContextMenuGroup.OTHERS]: {
+          [buttonId]: {
+            order: 12,
+            menuItemFactory,
+          },
+        }
+      }
+    })
+    const command: ICommand = {
+      type: CommandType.OPERATION,
+      // command id, same as menu button id
+      id: buttonId,
+      handler: (accessor: IAccessor) => {
+        console.log('点击了立刻同步');
+        const univer = accessor.get(IUniverInstanceService)
+        const commandService = accessor.get(ICommandService)
+        return true;
+      }
+    }
+    this.commandService.registerCommand(command);
+  }
+}
+
+export default SyncContextMenuPlugin