chore: replace all cn comments of fe to en version by volc api (#320)

frontend/packages/arch/responsive-kit/__tests__/components/layout/ResponsiveBox.test.tsx

@@ -28,14 +28,14 @@ describe('ResponsiveBox', () => {
       <ResponsiveBox contents={[<div key="1">Test Content</div>]} />,
     );
 
-    // 检查是否渲染了div元素
+    // Check if the div element is rendered
     const boxElement = container.firstChild as HTMLElement;
     expect(boxElement.tagName).toBe('DIV');
 
-    // 检查内容是否正确
+    // Check if the content is correct
     expect(boxElement.textContent).toBe('Test Content');
 
-    // 默认情况下应该有基本的类名
+    // There should be a basic class name by default
     expect(boxElement.className).toContain('w-full');
     expect(boxElement.className).toContain('flex');
     expect(boxElement.className).toContain('overflow-hidden');

frontend/packages/arch/responsive-kit/__tests__/components/layout/ResponsiveList.test.tsx

@@ -37,16 +37,16 @@ describe('ResponsiveList', () => {
       />,
     );
 
-    // 检查是否渲染了div元素
+    // Check if the div element is rendered
     const listElement = container.firstChild as HTMLElement;
     expect(listElement.tagName).toBe('DIV');
 
-    // 检查是否渲染了所有项目
+    // Check if all items are rendered
     const gridElement = listElement.firstChild as HTMLElement;
     expect(gridElement.children.length).toBe(3);
     expect(gridElement.textContent).toBe('Item 1Item 2Item 3');
 
-    // 检查默认类名
+    // Check default class name
     expect(listElement.className).toContain('flex');
     expect(listElement.className).toContain('flex-col');
   });

frontend/packages/arch/responsive-kit/__tests__/hooks/media-query.test.ts

@@ -28,17 +28,17 @@ import {
 } from '../../src/constant';
 
 describe('useCustomMediaQuery', () => {
-  // 保存原始的 window.matchMedia
+  // Save the original window.matchMedia
   const originalMatchMedia = window.matchMedia;
 
   beforeEach(() => {
-    // 模拟 window.matchMedia
+    // Emulate window.matchMedia
     window.matchMedia = vi.fn().mockImplementation(query => ({
       matches: false,
       media: query,
       onchange: null,
-      addListener: vi.fn(), // 兼容旧版API
-      removeListener: vi.fn(), // 兼容旧版API
+      addListener: vi.fn(), // Compatible with outdated API
+      removeListener: vi.fn(), // Compatible with outdated API
       addEventListener: vi.fn(),
       removeEventListener: vi.fn(),
       dispatchEvent: vi.fn(),
@@ -46,13 +46,13 @@ describe('useCustomMediaQuery', () => {
   });
 
   afterEach(() => {
-    // 恢复原始的 window.matchMedia
+    // Restore the original window.matchMedia
     window.matchMedia = originalMatchMedia;
     vi.resetAllMocks();
   });
 
   it('should return false when media query does not match', () => {
-    // 设置 matchMedia 返回 false
+    // Set matchMedia to return false
     window.matchMedia = vi.fn().mockImplementation(query => ({
       matches: false,
       media: query,
@@ -71,7 +71,7 @@ describe('useCustomMediaQuery', () => {
   });
 
   it('should return true when media query matches', () => {
-    // 设置 matchMedia 返回 true
+    // Set matchMedia to return true
     window.matchMedia = vi.fn().mockImplementation(query => ({
       matches: true,
       media: query,
@@ -122,7 +122,7 @@ describe('useCustomMediaQuery', () => {
   });
 
   it('should update when media query changes', () => {
-    // 创建一个模拟的 MediaQueryList
+    // Create a simulated MediaQueryList
     const mediaQueryList = {
       matches: false,
       media: '(min-width: 768px)',
@@ -130,42 +130,42 @@ describe('useCustomMediaQuery', () => {
       removeEventListener: vi.fn(),
     };
 
-    // 模拟 window.matchMedia 返回我们的 mediaQueryList
+    // Emulate window.matchMedia returns our mediaQueryList
     window.matchMedia = vi.fn().mockReturnValue(mediaQueryList);
 
     const { result, rerender } = renderHook(() =>
       useCustomMediaQuery({ rangeMinPx: '768px' }),
     );
 
-    // 初始状态是 false
+    // The initial state is false
     expect(result.current).toBe(false);
 
-    // 找到注册的事件处理函数
+    // Find the registered event handler
     const eventListenerCall = mediaQueryList.addEventListener.mock.calls[0];
     const eventType = eventListenerCall[0];
     const handler = eventListenerCall[1];
 
-    // 确认事件类型是 'change'
+    // Confirm that the event type is'change'
     expect(eventType).toBe('change');
 
-    // 模拟媒体查询变化
+    // Simulate media query changes
     mediaQueryList.matches = true;
     handler();
 
-    // 重新渲染钩子以获取更新后的值
+    // Render the hook again to get the updated value
     rerender();
 
-    // 现在应该是 true
+    // It should be true now
     expect(result.current).toBe(true);
   });
 });
 
 describe('useMediaQuery', () => {
-  // 保存原始的 window.matchMedia
+  // Save the original window.matchMedia
   const originalMatchMedia = window.matchMedia;
 
   beforeEach(() => {
-    // 模拟 window.matchMedia
+    // Emulate window.matchMedia
     window.matchMedia = vi.fn().mockImplementation(query => ({
       matches: false,
       media: query,
@@ -175,7 +175,7 @@ describe('useMediaQuery', () => {
   });
 
   afterEach(() => {
-    // 恢复原始的 window.matchMedia
+    // Restore the original window.matchMedia
     window.matchMedia = originalMatchMedia;
     vi.resetAllMocks();
   });

frontend/packages/arch/responsive-kit/__tests__/utils/token-map-to-str.test.ts

@@ -57,7 +57,7 @@ describe('tokenMapToStr', () => {
 
     const result = tokenMapToStr(tokenMap, 'prefix');
 
-    // 根据实际实现，undefined值会被转换为字符串"undefined"
+    // Depending on the actual implementation, the undefined value is converted to the string "undefined".
     expect(result).toBe('sm:prefix-1 md:prefix-undefined lg:prefix-3');
   });
 

frontend/packages/arch/responsive-kit/src/components/layout/ResponsiveList.tsx

@@ -31,12 +31,12 @@ interface ResponsiveListProps<T> {
 
   footer?: React.ReactNode;
 
-  gridCols?: ResponsiveTokenMap<ScreenRange>; // 响应式列数
-  gridGapXs?: ResponsiveTokenMap<ScreenRange>; // 响应式X轴gap
-  gridGapYs?: ResponsiveTokenMap<ScreenRange>; // 响应式Y轴gap
+  gridCols?: ResponsiveTokenMap<ScreenRange>; // number of responsive columns
+  gridGapXs?: ResponsiveTokenMap<ScreenRange>; // Responsive X-axis gap
+  gridGapYs?: ResponsiveTokenMap<ScreenRange>; // Responsive Y-axis gap
 }
 
-// 通过tailwind动态根据媒体查询设置List列数
+// List columns dynamically set by media query with tailwind
 export const ResponsiveList = <T extends object>({
   dataSource,
   renderItem,

frontend/packages/arch/responsive-kit/src/hooks/media-query.ts

@@ -30,7 +30,7 @@ export const useCustomMediaQuery = ({
   rangeMinPx?: string;
   rangeMaxPx?: string;
 }) => {
-  // 1. 根据查询范围拼凑query语句
+  // 1. Patchwork query statements according to query range
   const getQuery = () => {
     const minQuery = rangeMinPx ? `(min-width: ${rangeMinPx})` : '';
     const maxQuery = rangeMaxPx ? `(max-width: ${rangeMaxPx})` : '';
@@ -40,7 +40,7 @@ export const useCustomMediaQuery = ({
   };
   const query = getQuery();
 
-  // 2. 配合监听事件动态判断是否在区域中
+  // 2. Cooperate with the monitoring event to dynamically determine whether it is in the area
   const [matches, setMatches] = useState(window.matchMedia(query).matches);
   useEffect(() => {
     const mediaQueryList = window.matchMedia(query);
@@ -58,7 +58,7 @@ export const useCustomMediaQuery = ({
   return matches;
 };
 
-// 判断当前屏幕像素是否match媒体查询条件
+// Determine whether the current screen pixels match the media query conditions
 export const useMediaQuery = ({
   rangeMin,
   rangeMax,