LLM 编程提示示例

解决方案

为了实现感知层功能，我们可以遵循问题陈述中提到的指南，并使用现有的技术栈。

任务列表

1. 创建一个名为“AwarenessInfo”的新组件，用于渲染远程用户的游标和姓名。

2. 创建一个新的 Konva 层来保存所有“AwarenessInfo”组件。

3. 将 Konva 层添加到主白板组件中。

4. 创建一个新的 Redux 切片来存储远程用户的感知信息。

5. 为感知 Redux 切片创建一个封装的视图模型接口。

6. 实现“AwarenessInfo”组件，从视图模型中检索和显示每个远程用户的感知信息。

7. 在封装的视图模型接口中实现一个方法，用于更新每个远程用户的感知信息。

8. 当远程用户更改游标位置时，调度封装的视图模型接口中的更新方法以更新相应的感知信息。

9. 在“AwarenessInfo”组件中，使用新位置来动画化游标更改。

10. 为新的“AwarenessInfo”组件编写测试，包括数据驱动测试，以确保它正确地显示所有远程用户的感知信息。

11. 为封装的视图模型接口编写测试，以确保它正确地更新远程用户的感知信息。

12. 编写端到端 Cypress 测试，以确保感知层在远程用户更改其游标位置时正确地显示和更新。

通过遵循这些任务，我们可以在在线白板系统中实现感知层功能。

当然，这是一个使用详细的组件名称、方法和道具的修订后的总体计划

任务列表

1. 创建一个名为“AwarenessInfo”的新组件，用于渲染远程用户的游标和姓名。此组件将接收诸如用户名、游标位置和在线状态之类的道具。

2. 创建一个名为“AwarenessLayer”的新 Konva 层来保存所有“AwarenessInfo”组件。

3. 将“AwarenessLayer”添加到主白板组件中。

4. 创建一个名为“awareness”的新 Redux 切片来存储远程用户的感知信息。

5. 为“awareness”Redux 切片创建一个名为“AwarenessViewModel”的封装的视图模型接口。此接口将包含一个名为“updateUserAwarenessInfo”的方法，用于更新每个远程用户的感知信息。

6. 实现“AwarenessInfo”组件，从视图模型中检索和显示每个远程用户的感知信息。该组件将使用“useSelector”钩子来检索相关信息。

7. 在“AwarenessViewModel”接口中实现“updateUserAwarenessInfo”方法，以调度一个 Redux 操作来更新每个远程用户的感知信息。此方法将由“MainWhiteboard”组件调用。

8. 当远程用户更改游标位置时，调度“AwarenessViewModel”接口中的“updateUserAwarenessInfo”方法以更新相应的感知信息。

9. 在“AwarenessInfo”组件中，使用新位置来动画化游标更改。这可以通过使用 Konva 的“Tween”动画来实现。

10. 为新的“AwarenessInfo”组件编写测试，包括数据驱动测试，以确保它正确地显示所有远程用户的感知信息。这些测试将使用 React 测试库编写。

11. 为封装的视图模型接口编写测试，以确保它正确地更新远程用户的感知信息。这些测试将使用 Vitest 框架。

12. 编写端到端 Cypress 测试，以确保感知层在远程用户更改其游标位置时正确地显示和更新。这些测试将模拟用户与白板的交互，并验证“AwarenessLayer”和“AwarenessInfo”组件的状态。

当然，以下是在没有使用“redux-mock-store”的情况下，对 AwarenessViewModel 和感知切片的测试的示例实现

typescriptCopy code
import { createAwarenessSlice, AwarenessState, updateAwareness } from './awarenessSlice';
import { AwarenessViewModel } from './AwarenessViewModel';

describe('AwarenessViewModel', () => {
  const mockDispatch = jest.fn();
  const initialState: AwarenessState = {
    users: {
      'user1': {
        name: 'User 1',
        cursorPosition: { x: 0, y: 0 },
        online: true,
      },
      'user2': {
        name: 'User 2',
        cursorPosition: { x: 100, y: 100 },
        online: true,
      },
    },
  };
  let viewModel: AwarenessViewModel;

  beforeEach(() => {
    viewModel = new AwarenessViewModel(initialState, mockDispatch);
  });

  describe('getUserNames', () => {
    it('returns the list of user names', () => {
      const names = viewModel.getUserNames();
      expect(names).toEqual(['User 1', 'User 2']);
    });
  });

  describe('getCursorPosition', () => {
    it('returns the cursor position for a given user ID', () => {
      const cursorPosition = viewModel.getCursorPosition('user1');
      expect(cursorPosition).toEqual({ x: 0, y: 0 });
    });

    it('returns undefined for an unknown user ID', () => {
      const cursorPosition = viewModel.getCursorPosition('unknown');
      expect(cursorPosition).toBeUndefined();
    });
  });

  describe('updateCursorPosition', () => {
    it('dispatches the updateAwareness action with the new cursor position', () => {
      viewModel.updateCursorPosition('user1', { x: 50, y: 50 });
      expect(mockDispatch).toHaveBeenCalledWith(updateAwareness({
        user: 'user1',
        cursorPosition: { x: 50, y: 50 },
      }));
    });
  });
});

以下是在没有使用“redux-mock-store”的情况下，对“awarenessSlice”的示例实现

typescriptCopy code
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export type CursorPosition = { x: number, y: number };

export type UserAwareness = {
  name: string;
  cursorPosition: CursorPosition;
  online: boolean;
};

export type AwarenessState = {
  users: Record<string, UserAwareness>;
};

const initialState: AwarenessState = {
  users: {},
};

const awarenessSlice = createSlice({
  name: 'awareness',
  initialState,
  reducers: {
    updateAwareness: (state, action: PayloadAction<{ user: string, cursorPosition: CursorPosition }>) => {
      const { user, cursorPosition } = action.payload;
      state.users[user].cursorPosition = cursorPosition;
    },
    setOnline: (state, action: PayloadAction<{ user: string, online: boolean }>) => {
      const { user, online } = action.payload;
      state.users[user].online = online;
    },
  },
});

export const { updateAwareness, setOnline } = awarenessSlice.actions;
export const awarenessReducer = awarenessSlice.reducer;

请注意，由于我们没有使用“redux-mock-store”，因此我们需要将一个模拟调度函数传递给视图模型构造函数，并且在“updateCursorPosition”的测试中，我们需要使用“jest.fn()”检查是否调度了正确的操作。