A Multilingual Adaptation Method for Used Car Web Applications Targeting Overseas Users

Abstract

This application discloses a multilingual adaptation method for a used car web application for overseas users, including: responding to a web application access request from an overseas user; obtaining a target language identifier using a progressive language recognition method based on the web application access request; detecting whether the user performs a language switching operation in the web application; if the user performs a language switching operation, synchronously writing the target language identifier after switching to local storage and the root domain cookie; determining an interface layout strategy based on the target language identifier; loading the corresponding language resource file based on the target language identifier, and loading page code and image resources according to the interface layout strategy. The method provided by this application enables users to automatically inherit language settings when switching between the main site and overseas sites, eliminating the need for repeated language settings, and ensuring that the same interactive component can correctly respond to user operations in both left-to-right and right-to-left layout environments, guaranteeing the consistency of interaction logic.

Description

Technical Field

[0001] This application relates to the field of multilingual adaptation technology, specifically to a multilingual adaptation method for a used car web application for overseas users. Background Technology

[0002] With the development of China's used car export business, web applications targeting overseas users need to provide comprehensive multilingual support capabilities. Existing multilingual technical solutions for web applications mainly include:

[0003] 1. Language switching based on URL parameters: By adding language parameters (e.g., `?lang=en`) or path prefixes (e.g., ` / en / products`) to the URL, different language resources are loaded according to the parameters.

[0004] 2. Passive adaptation based on the browser's default language: Automatically determine the user's language by reading `Accept-Language` in the HTTP request header or `navigator.language` in JavaScript.

[0005] 3. Session-based server management: Store the user's language selection in the server session, and carry the Session ID with each request.

[0006] 4. Manually write multi-language styles: For mirrored layout languages ​​(such as Arabic), developers need to manually write mirrored versions of each CSS style.

[0007] 5. Use third-party UI component libraries: Rely on third-party UI component libraries such as antd-mobile and zarm, but these libraries usually do not support mirrored layouts and require a lot of custom development.

[0008] However, existing multilingual solutions for web applications have the following drawbacks:

[0009] 1. Volatility of language settings: localStorage is subject to the same-origin policy, which prevents the main site from sharing language preferences with overseas sites; the settings will be reset after the user clears the cache; at the same time, the settings cannot be synchronized across devices.

[0010] 2. High cost of mirrored layout adaptation and lack of component library support:

[0011] At the CSS level: Each style requires a manually written mirrored layout version, which is a lot of work.

[0012] At the component logic level: interactive components (such as two-way sliders) require a complete rewrite of the drag logic, handle semantics, and bubble positioning, which cannot be solved by CSS mirroring.

[0013] Issues with third-party UI libraries: antd-mobile and zarm do not support mirrored layouts; Material-UI is too large (200KB+) and is not suitable for mobile devices.

[0014] Actual cost: Each slider component requires several hours of development, and the three filters (price, mileage, and vehicle age) need to be developed separately, resulting in a high logic error rate.

[0015] User experience: Middle Eastern Arabic users reported "difficult operation" and confusion caused by inconsistencies between visual and operational logic.

[0016] 3. First-screen loading performance bottleneck: All language resources are bundled (85KB, only one is actually needed); all page code is loaded; all images are requested simultaneously. This results in slow first-screen loading and a high user bounce rate in weak network conditions.

[0017] 4. Page state cannot be maintained:

[0018] Option A (Redux): Requires writing 300+ lines of state management code per page, which is prone to overlooking non-explicit states such as timers and subscriptions, cannot save closure state, and has high maintenance costs.

[0019] Option B (display:none): All pages remain on the DOM, resulting in high memory usage. Hidden components still execute their lifecycles, leading to poor performance. Summary of the Invention

[0020] To address this, this application provides a multilingual adaptation method for used car web applications targeting overseas users, thereby resolving the issues of existing technologies being unable to share language settings between the main site and overseas sites and being unable to guarantee consistent interaction logic.

[0021] To achieve the above objectives, this application provides the following technical solution:

[0022] Firstly, a method for multilingual adaptation of a used car web application for overseas users includes:

[0023] Step 1: Respond to the web application access request from overseas users, and obtain the target language identifier using a progressive language recognition method based on the web application access request;

[0024] Step 2: Detect whether the user performs a language switching operation in the web application; if the user performs a language switching operation, the target language identifier after switching is synchronously written to the local storage and the root domain cookie; the root domain cookie adopts the root domain shared configuration to realize cross-domain language status synchronization between the main site and overseas sub-sites;

[0025] Step 3: Determine the interface layout strategy based on the target language identifier; specifically, if the target language identifier is a right-to-left layout language, the interface layout strategy adopts a mirror layout strategy, and the interactive components are loaded and mirror interaction logic is executed during the page rendering process; if the target language identifier is a left-to-right layout language, the interface layout strategy adopts a default left-to-right layout strategy, and the interactive components are loaded and normal interaction logic is executed during the page rendering process.

[0026] Step 4: Load the corresponding language resource file according to the target language identifier, and load the page code and image resources according to the interface layout strategy.

[0027] Preferably, in step 1, when obtaining the target language identifier using the progressive language recognition method, the identifier is obtained sequentially from multiple storage locations according to a preset priority.

[0028] Preferably, the step of retrieving language identifiers from multiple storage locations according to a preset priority includes: first reading the language identifier selected by the user in the local storage; when no valid language identifier is found in the local storage, reading the cross-site language identifier from the root domain cookie; when no valid language identifier is found in either the local storage or the root domain cookie, using the system's preset default language identifier as the target language identifier.

[0029] Preferably, in step 3, the mirror interaction logic includes mirroring the position calculation, numerical mapping, handle semantics, and prompt information positioning of the interactive components.

[0030] Preferably, the formula for calculating the position of the interactive component is:

[0031] ;

[0032] The numerical mapping is as follows:

[0033] .

[0034] Preferably, it also includes: performing state preservation processing on pages marked as needing to be cached when a user switches between multiple pages.

[0035] Preferably, the process of maintaining the state of pages marked as needing to be cached specifically includes: when the page is first entered, rendering the page components normally and recording the corresponding component instances and their virtual DOM structure information in the cache mapping; when the page is cut off, not destroying the page component instances, but migrating the corresponding DOM nodes of the page to a hidden container to maintain their active state; when the page is accessed again, restoring the cached DOM nodes to the visible area.

[0036] Preferably, in step 4, when loading page code and image resources according to the interface layout strategy, a combination of on-demand loading and preloading is used.

[0037] Secondly, a multilingual adaptation device for a used car web application for overseas users includes:

[0038] The progressive language recognition module is used to respond to web application access requests from overseas users and obtain the target language identifier using a progressive language recognition method based on the web application access request.

[0039] The cross-domain language state synchronization module is used to detect whether a user performs a language switching operation in the web application. If the user performs a language switching operation, the target language identifier after switching is synchronously written to the local storage and the root domain cookie. The root domain cookie adopts the root domain shared configuration to realize cross-domain language state synchronization between the main site and overseas sub-sites.

[0040] The interface layout strategy determination module is used to determine the interface layout strategy based on the target language identifier. Specifically, if the target language identifier is a right-to-left layout language, the interface layout strategy adopts a mirror layout strategy, and interactive components are loaded and mirror interaction logic is executed during page rendering. If the target language identifier is a left-to-right layout language, the interface layout strategy adopts a default left-to-right layout strategy, and interactive components are loaded and normal interaction logic is executed during page rendering.

[0041] The loading module is used to load the corresponding language resource file according to the target language identifier, and to load the page code and image resources according to the interface layout strategy.

[0042] As a preferred option, it also includes:

[0043] The virtual DOM cache container module is used to maintain the execution state of pages marked as needing to be cached when a user switches between multiple pages. Specifically, maintaining the execution state of pages marked as needing to be cached includes: upon first entering the page, rendering the page components normally and recording the corresponding component instances and their virtual DOM structure information in the cache mapping; when the page is switched out, not destroying the page component instances, but migrating the corresponding DOM nodes to a hidden container to maintain their active state; when the page is accessed again, restoring the cached DOM nodes to the visible area.

[0044] Compared with the prior art, this application has at least the following beneficial effects:

[0045] 1. This application provides a multilingual adaptation method for used car web applications for overseas users. This method updates local storage and root domain cookies synchronously when switching languages, and combines a progressive language recognition strategy to enable users to automatically inherit language settings when switching between the main site and overseas sites, without having to repeatedly set the language, thus improving the cross-site access experience. In addition, this method obtains the target language identifier and determines the layout language direction, determines the interface layout strategy based on the layout language direction, and executes the corresponding interaction logic, so that the same interactive component can correctly respond to user operations in both left-to-right and right-to-left layout environments, ensuring the consistency of interaction logic.

[0046] 2. When a user first enters the page, this application renders the page components normally and records the corresponding component instances and their virtual DOM structure information in the cache mapping. When the page is cut off, the page component instances are not destroyed, but the corresponding DOM nodes are moved to a hidden container to keep them active. When the page is accessed again, the cached DOM nodes are restored to the visible area, thereby achieving complete preservation and rapid recovery of the page state without intruding on the business code. Attached Figure Description

[0047] To more intuitively illustrate the prior art and this application, exemplary drawings are provided below. It should be understood that the specific shapes and structures shown in the drawings should not generally be regarded as limiting conditions for implementing this application; for example, based on the technical concept disclosed in this application and the exemplary drawings, those skilled in the art are able to easily make conventional adjustments or further optimizations to the addition / reduction / classification, specific shapes, positional relationships, connection methods, size ratios, etc. of certain units (components).

[0048] Figure 1 This is a flowchart illustrating a method for multilingual adaptation of a used car web application for overseas users, as provided in Embodiment 1 of this application. Detailed Implementation

[0049] The present application will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0050] In the description of this application: unless otherwise stated, "a plurality of" means two or more. The terms "first," "second," "third," etc., in this application are intended to distinguish the objects referred to and do not have any special meaning in terms of technical connotation (e.g., they should not be construed as an emphasis on importance or order). Expressions such as "including," "comprising," and "having" also mean "not limited to" (certain units, components, materials, steps, etc.).

[0051] The terms used in this application, such as "upper," "lower," "left," "right," and "middle," are generally used to indicate the general relative positional relationship for the purpose of intuitive understanding by referring to the accompanying drawings, and are not absolute limitations on the positional relationship in the actual product.

[0052] Example 1

[0053] Please see Figure 1 This embodiment provides a multilingual adaptation method for a used car web application for overseas users, including:

[0054] S1: In response to the web application access request from overseas users, the target language identifier is obtained using a progressive language recognition method based on the web application access request;

[0055] Specifically, in this embodiment, when a user accesses a web application, the target language identifier is first obtained. The target language identifier is retrieved sequentially from multiple storage locations according to a preset priority: first, the user-selected language identifier is read from local storage; if no valid language identifier is found in local storage, the cross-site language identifier is further read from the root domain cookie; if no valid language identifier is found in either local storage or the root domain cookie, the system-preset default language identifier is used as a fallback target language identifier. Through this progressive language recognition method, this embodiment ensures that a valid language identifier can be obtained in any access scenario.

[0056] Progressive Language Detection (PRD) is a multi-level language detection strategy that detects language identifiers in different storage locations sequentially according to priority, providing a fallback mechanism while ensuring accuracy. In this embodiment, a three-level detection mechanism is employed: local user selection → cross-domain application status → system default value. Detection is performed sequentially according to priority, ensuring that valid language identifiers are returned under any circumstances.

[0057] S2: Detect whether the user performs a language switching operation in the web application; if the user performs a language switching operation, the target language identifier after switching is synchronously written to local storage and root domain cookie; the root domain cookie adopts root domain shared configuration to realize cross-domain language status synchronization between the main site and overseas sub-sites;

[0058] Specifically, in this embodiment, when a user performs a language switching operation in a web application, the switched language identifier is synchronously written to the local storage and the root domain cookie. The root domain cookie adopts a root domain sharing configuration, so that the main site and overseas sites can read the same language identifier in subsequent access processes, thereby realizing the synchronization of cross-site language status.

[0059] In this embodiment, cross-domain state synchronization is a technical method that achieves state consistency between the main site and the sub-site by sharing root domain cookies under the browser's same-origin policy restriction (i.e., cross-site language state synchronization technology based on root domain cookies).

[0060] This embodiment addresses the issue of local storage being restricted by browser same-origin policies, preventing the sharing of language settings between the main website and overseas websites. It proposes a cross-site language state synchronization technology based on local storage and root domain cookies. By synchronously updating local storage and root domain cookies when switching languages, and combining this with a progressive language recognition strategy, users can automatically inherit their language settings when switching between the main website and overseas websites, eliminating the need for repeated language selection and thus improving the cross-site access experience.

[0061] S3: Determine the interface layout strategy based on the target language identifier; specifically, if the target language identifier is a right-to-left layout language, the interface layout strategy adopts a mirror layout strategy, and the interactive components are loaded and mirror interaction logic is executed during the page rendering process; if the target language identifier is a left-to-right layout language, the interface layout strategy adopts a default left-to-right layout strategy, and the interactive components are loaded and normal interaction logic is executed during the page rendering process.

[0062] Specifically, after obtaining the target language identifier, the system determines whether the current language is a right-to-left layout language and determines the interface layout strategy accordingly. If it is determined to be a right-to-left layout language, the interface adopts a mirror layout strategy; if it is determined to be a non-right-to-left (i.e., left-to-right) layout language, the interface adopts a default left-to-right layout strategy. The layout direction determination result serves as the basis for subsequent interface rendering and interaction logic execution.

[0063] During page rendering, the corresponding interactive components are loaded according to the layout direction. When a left-to-right layout is used, normal interactive logic is executed; when a right-to-left layout is used, mirrored interactive logic is executed. Specifically, the mirrored interactive logic mirrors the interactive logic such as position calculation, numerical mapping, handle semantics, and prompt information positioning within the interactive component to ensure that the user's operation direction, the direction of numerical change, and the interface presentation direction are consistent.

[0064] The interactive component uses a slider. Within this component, the maximum effective width of the draggable area is defined as the maximum effective width, the current filtered value is defined as the current value, and the pixel length corresponding to each unit value is defined as a scaling factor. This scaling factor is calculated based on the maximum effective width and the value span.

[0065] Therefore, in a left-to-right layout, the correspondence between the current position of the slider handle and its current value is as follows: In a right-to-left layout, the correspondence between the current position of the slider handle and its current value is as follows: .

[0066] When the user drags the slider handle to determine the current position, in a left-to-right layout, In a right-to-left layout, Through the above mapping and reverse mapping relationship, the dragging direction and numerical change direction of the slider in the right-to-left layout language environment are kept consistent with the interface display direction.

[0067] This step presents a component logic mirroring method, which (right-to-left) mirroring is a technique for achieving mirrored layout language adaptation at the component's business logic level. Unlike simple CSS style mirroring, this method requires a complete mirrored design of the component's interaction logic, mathematical calculations, event handling, etc. This method supports right-to-left mirrored slider components (SliderAr), achieving complete mirrored interaction through redesigned coordinate algorithms, drag logic, and bubble positioning.

[0068] To address the issue that existing interactive components, when only mirroring styles in a right-to-left layout language environment, cannot guarantee consistent interaction logic, this embodiment proposes a component logic layer mirroring interaction implementation technology. This technology obtains the current language identifier and determines the layout direction. During the interactive component initialization phase, it determines the effective width, numerical range, and scaling factor. In the value-to-position mapping phase, it selects either a normal mapping method or a mirror mapping method to calculate the interaction position based on the layout direction. In the position-to-value reverse calculation phase, it selects the corresponding reverse calculation method based on the layout direction. Furthermore, in a dual-handheld scenario, it mirrors the numerical control semantics corresponding to the handheld controller. Simultaneously, during the prompt information display phase, it recalculates the positioning method of the prompt information according to the mirror layout rules. This ensures that the same interactive component can correctly respond to user operations in both left-to-right and right-to-left layout environments, solving the technical problem that style mirroring alone cannot achieve consistent interaction.

[0069] S4: Load the corresponding language resource file according to the target language identifier, and load the page code and image resources according to the interface layout strategy.

[0070] Specifically, after completing target language identification and determining the interface layout strategy, the language resource files corresponding to the current language are loaded. A combination of on-demand loading and pre-loading (i.e., viewport pre-loading) is used for page code and image resources to reduce the size of the initial screen resources and improve page loading efficiency. Simultaneously, style units are automatically converted during the build phase to adapt to different terminal devices.

[0071] In this embodiment, viewport preloading is a resource lazy loading optimization strategy. By starting loading at a fixed distance (such as 200px) before the resource is about to enter the visible area, it ensures that the resource has been loaded when the user scrolls to the content.

[0072] This embodiment provides a multilingual adaptation method for a used car web application for overseas users, which further includes: when a user switches between multiple pages, performing state preservation processing (i.e., virtual DOM cache container) on the pages marked as needing to be cached.

[0073] The specific steps for maintaining the state of pages marked as needing caching include: upon first entering the page, rendering the page components normally and recording the corresponding component instances and their virtual DOM structure information in the cache mapping; when the page is cut off, not destroying the page component instances, but migrating the corresponding DOM nodes to a hidden container to maintain their active state; when the page is accessed again, restoring the cached DOM nodes to the visible area, thereby completing the page state restoration without recreating component instances.

[0074] In this embodiment, the virtual DOM cache container is an innovative component-level caching mechanism. By establishing an independent cache scope at the root of the React application, components that need to be kept alive are removed from the view tree but kept in memory instead of being truly destroyed, thus achieving component caching with zero business code intrusion.

[0075] Traditional solutions require manually saving each component's state, props, scroll position, and other information in a global state manager, resulting in complex and error-prone code. This embodiment, through caching at the virtual DOM level, can automatically maintain the complete state of components.

[0076] This embodiment addresses the problem that traditional page state preservation solutions require explicit maintenance of a large amount of state information and are prone to missing non-explicit states. It proposes a component caching and state preservation technology based on a DOM movement strategy. This technology sets a cache flag for the target page at the routing configuration layer. Upon the page's first entry, it records the corresponding component instances and virtual DOM information. When the page is switched out, the component instances are not destroyed; instead, the corresponding DOM nodes are moved from the visible container to a hidden container and kept active. When the page is accessed again, the cached DOM nodes are restored to the visible container to complete page recovery. Corresponding lifecycle processing logic is triggered during page hibernation and recovery, thus achieving complete preservation and rapid recovery of page state without intruding on business logic.

[0077] The multilingual adaptation method for a used car web application for overseas users provided in this embodiment has the following advantages:

[0078] 1. Cross-domain language synchronization

[0079] The root domain cookie enables automatic synchronization of language settings between the main website (www.taocars.com) and the overseas website (wholesale.taocars.com), eliminating the need for users to repeatedly select the language.

[0080] 2. SliderAr component (mirror slider)

[0081] Arabic-speaking users achieved 100% accuracy in their operations.

[0082] 3. Virtual DOM caching container (state-keeping active)

[0083] Code volume: Each cached page reduces state management code by 300 lines, achieving zero intrusion into business logic.

[0084] Performance: Page recovery speed decreased from 800ms to 50ms, an improvement of 93%.

[0085] Integrity: State retention has been increased from 70% to 100%, including all states such as timers and subscriptions.

[0086] Development efficiency: The time for adding cached pages has been reduced from 2 days to 10 minutes, an improvement of 96%.

[0087] 4. First-screen performance optimization

[0088] By employing techniques such as code splitting, lazy loading, and on-demand loading, the JS file on the first screen was reduced from 620KB to 180KB, a 71% reduction, significantly improving the user experience in overseas regions with weak network connectivity.

[0089] Example 2

[0090] This embodiment provides a multilingual adaptation device for a used car web application for overseas users, including:

[0091] The progressive language recognition module is used to respond to web application access requests from overseas users and obtain the target language identifier using a progressive language recognition method based on the web application access request.

[0092] The cross-domain language state synchronization module is used to detect whether a user performs a language switching operation in the web application. If the user performs a language switching operation, the target language identifier after switching is synchronously written to the local storage and the root domain cookie. The root domain cookie adopts the root domain shared configuration to realize cross-domain language state synchronization between the main site and overseas sub-sites.

[0093] The interface layout strategy determination module is used to determine the interface layout strategy based on the target language identifier. Specifically, if the target language identifier is a right-to-left layout language, the interface layout strategy adopts a mirror layout strategy, and interactive components are loaded and mirror interaction logic is executed during page rendering. If the target language identifier is a left-to-right layout language, the interface layout strategy adopts a default left-to-right layout strategy, and interactive components are loaded and normal interaction logic is executed during page rendering.

[0094] The loading module is used to load the corresponding language resource file according to the target language identifier, and to load the page code and image resources according to the interface layout strategy.

[0095] This embodiment provides a multilingual adaptation device for a used car web application for overseas users, and also includes:

[0096] The virtual DOM cache container module is used to maintain the execution state of pages marked as needing to be cached when a user switches between multiple pages. Specifically, maintaining the execution state of pages marked as needing to be cached includes: upon first entering the page, rendering the page components normally and recording the corresponding component instances and their virtual DOM structure information in the cache mapping; when the page is switched out, not destroying the page component instances, but migrating the corresponding DOM nodes to a hidden container to maintain their active state; when the page is accessed again, restoring the cached DOM nodes to the visible area.

[0097] For details regarding the specific implementation of each module in the multilingual adaptation device for used car web applications for overseas users provided in this embodiment, please refer to the above description of the multilingual adaptation method for used car web applications for overseas users provided in this embodiment, which will not be repeated here.

[0098] The technical features of the above embodiments can be combined in any way (as long as there is no contradiction in the combination of these technical features). For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described; these embodiments not explicitly written should also be considered to be within the scope of this specification.

Claims

1. A method for multi-language adaptation of a used car web application for overseas users, characterized in that, The method comprises the following steps: Step 1: in response to a web application access request of an overseas user, a target language identifier is obtained according to the web application access request by using a progressive language recognition method; Step 2: it is detected whether the user performs a language switching operation in the web application; if it is detected that the user performs the language switching operation, the target language identifier after switching is written into local storage and a root domain cookie; The root domain cookie uses a root domain sharing configuration to realize cross-domain language state synchronization between a main station and an overseas substation; Step 3: an interface layout strategy is determined according to the target language identifier; specifically, if the target language identifier is a right-to-left layout language, the interface layout strategy uses a mirror layout strategy, and an interactive component is loaded in a page rendering process to execute mirror interaction logic; if the target language identifier is a left-to-right layout language, the interface layout strategy uses a default left-to-right layout strategy, and an interactive component is loaded in a page rendering process to execute normal interaction logic; Step 4: corresponding language resource files are loaded according to the target language identifier, and page code and picture resources are loaded according to the interface layout strategy.

2. The method of claim 1, wherein, In step 1, the target language identifier is obtained by using the progressive language recognition method according to a preset priority from multiple storage locations in sequence.

3. The method of claim 2, wherein the method further comprises: The preset priority is used to obtain the target language identifier from the multiple storage locations in sequence, specifically including: a language identifier selected by the user in the local storage is read preferentially; when no valid language identifier is read in the local storage, a cross-station language identifier is read from the root domain cookie; when no valid language identifier is obtained in the local storage and the root domain cookie, a default language identifier preset by the system is used as the target language identifier.

4. The method of claim 1, wherein the method further comprises: In step 3, the mirror interaction logic includes mirror processing of position calculation, value mapping, handle semantics and prompt information positioning of the interactive component.

5. The method of claim 4, wherein the method further comprises: The position calculation formula of the interactive component is: ； The value mapping is: 。 6. The method of claim 1, wherein, The method further comprises the following steps: When the user switches between multiple pages, state maintenance processing is performed on a page marked as needing to be cached.

7. The method of claim 6, wherein the method further comprises: The state maintenance processing on the page marked as needing to be cached specifically includes: when the page is first entered, the page component is normally rendered, and the component instance corresponding to the page and the virtual DOM structure information thereof are recorded into a cache mapping; when the page is switched out, the page component instance is not destroyed, but the DOM node corresponding to the page is migrated to a hidden container to maintain an active state; when the page is accessed again, the DOM node in the cache is restored to a visible area.

8. The method of claim 1, wherein the method further comprises: In step 4, the page code and picture resources are loaded according to the interface layout strategy by using a combination of on-demand loading and early loading.

9. An apparatus for multi-language adaptation of a Web application for overseas users of used cars, characterized by, The method comprises the following steps: A progressive language recognition module is configured to obtain a target language identifier according to a web application access request of an overseas user by using a progressive language recognition method in response to the web application access request. The cross-domain language state synchronization module is configured to detect whether a user performs a language switching operation in a web application; if it is detected that the user performs the language switching operation, a target language identifier after the switching is written into a local storage and a root domain cookie; The root domain cookie adopts a root domain sharing configuration to realize cross-domain language state synchronization between a main station and an overseas substation; The interface layout strategy determination module is configured to determine an interface layout strategy according to the target language identifier; specifically, if the target language identifier is a right-to-left layout language, the interface layout strategy adopts a mirror layout strategy, and an interactive component is loaded in a page rendering process to execute mirror interaction logic; if the target language identifier is a left-to-right layout language, the interface layout strategy adopts a default left-to-right layout strategy, and an interactive component is loaded in a page rendering process to execute normal interaction logic; The loading module is configured to load a corresponding language resource file according to the target language identifier, and load page code and picture resources according to the interface layout strategy.

10. The overseas user oriented second-hand car web application multi-language adaptation device according to claim 9, characterized in that, Further comprising: The virtual DOM cache container module is configured to perform state maintenance processing on a page marked as needing to be cached when a user switches between multiple pages; The state maintenance processing on the page marked as needing to be cached specifically includes: when the page is first entered, normally rendering a page component, and recording a component instance corresponding to the page and virtual DOM structure information of the page into a cache mapping; When the page is switched out, instead of destroying the page component instance, the DOM node corresponding to the page is migrated to a hidden container to maintain an active state; when the page is accessed again, the DOM node in the cache is restored to a visible area.

Images