Method and device for intelligent selection and management of accounts based on cross-platform social media

Abstract

The invention provides an intelligent selection and management method and device based on cross-platform social media accounts, and belongs to the technical field of social media account management. The method comprises the following steps: constructing a cross-platform data model which contains universal fields such as a user ID (Identity) and a user name and reserves a platform specific field expansion space, and uniformly managing multi-platform account information; based on a React framework and the data model, constructing a modular component framework which is composed of a CumTransfer, an AllPageList and a SelectedList, and constructing a modular component framework which is composed of the CumTransfer, the AllPageList and the SelectedList; realizing component dynamic state management by utilizing a React hook, performing centralized management on a selected account state, and synchronizing data and an interface; virtual rolling paging loading is achieved in the AllPageList component, and account data real-time searching and filtering are achieved at the front end; designing an interactive account selection interface, and realizing verification state visualization according to an account verification state in the data model; the integrated internationalized library supports interface text dynamic language switching and does not need page reloading. According to the method, the problems of insufficient cross-platform integration, low data loading efficiency and the like in the traditional technology are solved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of social media account management, and in particular to a method and device for intelligent selection and management of cross-platform social media accounts and electronic equipment. BACKGROUND

[0002] In the current era of widespread use of social media, cross-platform operation has become a common requirement for individual and enterprise users. However, current social media account management technology still has many shortcomings and cannot meet the efficient and convenient cross-platform management requirements.

[0003] The existing technology generally lacks cross-platform integration capabilities. Most systems use a single platform architecture, rely on independent code libraries and APIs optimized for specific platforms, lack a unified cross-platform abstraction layer, and require users to switch between multiple systems, which cannot provide a unified multi-platform account management experience. In terms of data processing, traditional systems use synchronous data loading methods, which load all account data at once and do not use paging or virtual scrolling techniques, which can cause performance bottlenecks and low loading efficiency when dealing with large amounts of account data.

[0004] At the same time, the user interaction experience of existing systems is poor. Traditional forms are used to handle user operations and rely on full-page refresh to update data, lacking dynamic interaction capabilities. Real-time search functionality is also lacking, relying entirely on server-side implementation of searches without instant filtering on the front end, making it difficult for users to quickly locate target accounts. In addition, most systems ignore internationalization needs, use hard-coded strings, and lack multi-language switching mechanisms, limiting their application in international markets. Furthermore, the lack of intuitive account verification status display, flexible interface adaptation, and intelligent recommendation capabilities further restricts the efficiency and user experience of social media account management. SUMMARY

[0005] Therefore, the present application provides a method and device for intelligent selection and management of cross-platform social media accounts and electronic equipment, at least partially solving the problems in the prior art.

[0006] In a first aspect, the present application provides a method for intelligent selection and management of cross-platform social media accounts, comprising the following steps:

[0007] A cross-platform data model is constructed that includes user ID, username, avatar URL, and fan count, with platform-specific field extension space reserved, to uniformly represent and manage account information from different social media platforms;

[0008] Based on the React framework, a modular component architecture composed of CustomTransfer, AllPageList, and SelectedList is designed and built on the basis of the above cross-platform data model. CustomTransfer serves as the top-level container responsible for managing the overall state and layout. AllPageList is used to display the list of selectable social media accounts, and SelectedList is used to display the selected accounts.

[0009] Using the useState and useEffect hooks of React, dynamic state management within and between components is implemented for the modular component architecture. The selected account list key state is managed in the CustomTransfer component, and is passed to the AllPageList and SelectedList child components through props.

[0010] Based on the above dynamic state management mechanism, a virtual scroll-based pagination loading strategy is implemented in the AllPageList component. When the user scrolls to the bottom of the AllPageList list, the loading of new data is automatically triggered. Combined with the performance optimization features of React, the large amount of account data managed by the cross-platform data model is loaded and displayed.

[0011] With the support of this efficient data loading strategy, real-time search and filtering algorithms are implemented for account data in the cross-platform data model on the front end. When the user inputs a search keyword in the interface, the account data is filtered and matched in real time on the client side, and the matching results are displayed through the AllPageList component.

[0012] Based on the modular component architecture and dynamic state management mechanism, an interactive account selection interface is designed. Users can select or deselect accounts in the AllPageList component by clicking, and the system updates the selected state of the accounts in real time according to user operations, and synchronizes the selected account data to the SelectedList component for display.

[0013] Based on the cross-platform data model containing account verification state information, the verification state visualization is implemented through conditional rendering based on the interactive account selection interface. Special visual identifiers are added to verified accounts, and the identifiers are dynamically displayed or hidden on the interface according to the verification state of the accounts.

[0014] The useIntl hook-related internationalization library is integrated. In each component of the modular component system, the interface text content is managed through this internationalization library, supporting dynamic language switching for the interactive account selection interface and other interface texts of the system without reloading the page.

[0015] According to a specific implementation manner of the embodiment of the application, when the cross-platform data model is constructed, the reserved platform-specific field is customized according to the characteristics of different social media platforms, and the adaptability of the data model to the information of the multi-platform account is further improved.

[0016] According to a specific implementation manner of the embodiment of the application, when the dynamic state management is implemented, by setting a state update dependency, the component is triggered to re-render only when the field affecting the interface display in the cross-platform data model changes, and unnecessary performance consumption caused by irrelevant field changes is avoided.

[0017] According to a specific implementation manner of the embodiment of the application, when the virtual scrolling-based page loading strategy is implemented, a data preloading mechanism is added, and new data loading is triggered in advance when the user scrolls to a preset distance from the bottom of the AllPageList list, so that the time for the user to wait for data loading is reduced.

[0018] According to a specific implementation manner of the embodiment of the application, when the real-time search and filtering algorithm is implemented, multi-dimensional combined filtering is supported, in addition to the username and user ID, the fan number range and the account registration time range in the cross-platform data model can also be used for screening, so that the diversified account screening needs of the user are met.

[0019] According to a specific implementation manner of the embodiment of the application, when the interactive account selection interface is designed, a batch operation function is added, the user can select the currently displayed account in batches by checking the selected option in the AllPageList component, or cancel the selected account in batches by using the batch deletion button in the SelectedList component, and the operation process is simplified.

[0020] According to a specific implementation manner of the embodiment of the application, when the verification state visualization is implemented, a dynamic effect is designed for the special visual identifier of the verified account, and a flashing or color gradient effect is presented when the mouse hovers over the identifier, so that the recognition of the verified account by the user is further improved.

[0021] According to a specific implementation manner of the embodiment of the application, after the internationalization library is integrated, a lazy loading method is used for non-key components in the system, and a loading placeholder component is set, the loading state is displayed through the placeholder component during the loading process of the non-key component, so that the blank area of the interface is avoided, and the throttling and debouncing technologies are applied to the scroll event and the search input event, so that unnecessary calculation and rendering are reduced.

[0022] In a second aspect, the embodiment of the application provides a device based on cross-platform social media account intelligent selection and management, comprising:

[0023] A cross-platform data model construction module is configured to construct a cross-platform data model containing common fields of user ID, username, avatar URL, and fan count and reserving space for platform-specific field extension, so as to uniformly represent and manage account information from different social media platforms;

[0024] A modular component architecture design module is configured to design and construct a modular component architecture composed of CustomTransfer, AllPageList, and SelectedList based on the cross-platform data model constructed by the cross-platform data model construction module, wherein CustomTransfer serves as a top-level container responsible for managing the overall state and layout, AllPageList is used to display a list of selectable social media accounts, and SelectedList is used to display selected accounts;

[0025] A dynamic state management module is configured to utilize useState and useEffect hooks of React to implement dynamic state management within and between components for the modular component architecture constructed by the modular component architecture design module, and to centrally manage the key state of the selected account list in the CustomTransfer component and pass it to the AllPageList and SelectedList sub-components through props;

[0026] An efficient data loading module is configured to implement a virtual scrolling-based pagination loading strategy in the AllPageList component based on the dynamic state management mechanism implemented by the dynamic state management module, automatically trigger the loading of new data when the user scrolls to the bottom of the AllPageList list, and combine the performance optimization features of React to load and display a large amount of account data managed by the cross-platform data model constructed by the cross-platform data model construction module;

[0027] A real-time search filtering module is configured to implement real-time search and filtering algorithms in the front end for account data in the cross-platform data model constructed by the cross-platform data model construction module under the support of the efficient data loading strategy implemented by the efficient data loading module, filter and match account data in real time on the client side when the user inputs a search keyword in the interface, and display the matching results through the AllPageList component;

[0028] The interactive account selection module is used for designing an interactive account selection interface based on a modular component architecture built by the modular component architecture design module and a dynamic state management mechanism implemented by the dynamic state management module, and for enabling a user to select or deselect an account in an AllPageList component by clicking operation, synchronously updating a selected state of the account in real time according to the user operation, and synchronously displaying the selected account data in a SelectedList component;

[0029] The verification state visualization module is used for visualizing a verification state of an account according to account verification state information contained in a cross-platform data model built by the cross-platform data model building module, and for adding a special visual identifier to the verified account and dynamically displaying or hiding the identifier on the interface according to the verification state of the account by condition rendering on the basis of the interactive account selection interface designed by the interactive account selection module.

[0030] The internationalization support module is used for integrating an internationalization library related to a useIntl hook, and for managing interface text content in each component of the modular component system built by the modular component architecture design module through the internationalization library, supporting dynamic language switching of the interactive account selection interface and other interface texts of the system without reloading the page.

[0031] In a third aspect, an electronic device is also provided, and the electronic device includes:

[0032] at least one processor; and

[0033] a memory connected with the at least one processor in communication; wherein

[0034] The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method described in the foregoing first aspect or any implementation manner of the first aspect.

[0035] In a fourth aspect, a non-transitory computer-readable storage medium is also provided, and the non-transitory computer-readable storage medium stores computer instructions for causing a computer to perform the method described in the foregoing first aspect or any implementation manner of the first aspect.

[0036] In a fifth aspect, a computer program product is also provided, and the computer program product includes a computer program stored on a non-transitory computer-readable storage medium, and the computer program includes program instructions, which, when executed by a computer, cause the computer to perform the method described in the foregoing first aspect or any implementation manner of the first aspect.

[0037] The present application has the following beneficial effects:

[0038] The application breaks the limitation of traditional single platform architecture by constructing a cross-platform data model containing a universal field and reserving a platform-specific field extension space, and unifies the management of different social media platform account information, without the need for users to switch between multiple systems, realizing integrated management of multi-platform accounts.

[0039] Based on the React framework, a modular component architecture is constructed, and dynamic state management is realized by combining React hooks, ensuring real-time synchronization of data between components and timely updating of interfaces, avoiding the interaction delay caused by traditional full-page refresh, and significantly improving the smoothness of user operations.

[0040] In the AllPageList component, a virtual scrolling-based pagination loading strategy is applied, combined with a real-time search filtering algorithm on the front end, effectively solving the problems of low efficiency of traditional synchronous data loading and search dependence on the server, greatly reducing the memory occupation and network requests when loading a large number of account data, and improving the efficiency of account positioning and management.

[0041] Account verification status visualization is realized through conditional rendering, helping users quickly identify trusted accounts and reducing information screening time.

[0042] The integration of an internationalization library supports dynamic language switching of interface text without page reloading, meeting the needs of users in different regions, breaking the limitations of traditional systems with insufficient internationalization support, and expanding the scope of application and market competitiveness of the system. BRIEF DESCRIPTION OF DRAWINGS

[0043] In order to more clearly illustrate the technical solutions of the embodiments of the application, the following will briefly introduce the drawings needed to be used in the embodiments. Obviously, the drawings in the following description are only some embodiments of the application, and for those skilled in the art, other drawings can also be obtained without creative labor on the basis of these drawings.

[0044] Figure 1 A method flowchart for intelligent selection and management of cross-platform social media accounts is provided for the embodiments of the application.

[0045] Figure 2 Another method flowchart for intelligent selection and management of cross-platform social media accounts is provided for the embodiments of the application.

[0046] Figure 3 A device structure diagram for intelligent selection and management of cross-platform social media accounts is provided for the embodiments of the application.

[0047] Figure 4 An electronic device diagram is provided for the embodiments of the application. DETAILED DESCRIPTION

[0048] The embodiments of the present application will be described in detail below with reference to the accompanying drawings.

[0049] Referring to Figure 1 and Figure 2 , the embodiments of the present application provide a method for intelligent selection and management based on cross-platform social media accounts, comprising the following steps:

[0050] S101, a cross-platform data model containing user ID, username, avatar URL, and fan count is constructed, and platform-specific field extension space is reserved, so as to uniformly represent and manage account information from different social media platforms.

[0051] First of all, the core design goal of the cross-platform data model is to achieve unified management of account information from different social media platforms, so the set of general fields is determined first, and user ID, username, avatar URL, and fan count are used as basic general fields — among them, the user ID adopts a string format to ensure compatibility with different platform account identification rules (such as TikTok's numeric ID and Facebook's alphanumeric combination ID); the username retains the original character format, supporting special symbols and multi-language characters; the avatar URL adopts the standard HTTP / HTTPS protocol address format to ensure cross-browser and cross-device image loading compatibility; the fan count adopts a numerical type to support integer and numerical value display requirements with thousands of places.

[0052] Next, the extension space of platform-specific fields is designed, and a flexible data structure of key-value pair (Key-Value) is adopted to reserve customized field entries for different platforms. For example, for the TikTok platform, the fields of "shortVideoCount" (short video publishing quantity) and "avgPlayCount" (video average play count) can be added; for the Facebook platform, the fields of "friendCount" (number of friends) and "postFrequency" (dynamic publishing frequency) can be added, and all extended fields are set with data type identifiers (such as numerical type, string type, and date type) to ensure consistency of data storage and parsing.

[0053] Finally, the structure specification of the data model is defined by JSON Schema, and the mandatory / optional attributes and data format verification rules of each field are specified (such as user ID non-empty and avatar URL conforming to URL format specification), and a data adaptation interface is developed to achieve automatic mapping and conversion of data returned by different social media platform APIs, and the original data format of each platform is uniformly converted to the cross-platform data model format, finally achieving unified representation and management of multi-platform account information.

[0054] S102, based on the React framework, on the basis of the above cross-platform data model, design and build by CustomTransfer, AllPageList and SelectedList composed of modular component architecture, CustomTransfer as the top container responsible for the management of the overall state and layout, AllPageList for display can choose the list of social media accounts, SelectedList for display has been selected account.

[0055] Based on the componentization idea of React framework, take the cross-platform data model built in S101 as the basis of data interaction, start to build modular component architecture. First, develop CustomTransfer top container component, adopt the form of functional component of React, define the overall state (such as selected account list, account list, search keyword) through useState, use CSS Flex layout to realize the overall layout management of the component, divide the interface into “account area” “operation button area” “selected account area” three core areas, respectively corresponding to the mounting position of AllPageList component, operation button group, SelectedList component, at the same time, pass data and state update function to the child component through props.

[0056] Then develop AllPageList component, which receives the selected account data (from cross-platform data model) passed by CustomTransfer, adopts list layout to display account information, each list item contains avatar (rendered through avatar URL field in S101), username, fan number and other core information, and reserves the display position of verification state identifier; define the list rendering logic inside the component, support dynamic adjustment of list item layout according to data volume, ensure the display adaptability under different screen sizes.

[0057] Finally, develop SelectedList component, which has similar structure with AllPageList component, but receives selected account data, and adds “remove” operation button, which can remove the account from the selected list and update the state of CustomTransfer simultaneously; three components are independently exported through the component export mechanism of React, support independent maintenance and reuse, and the data unidirectional flow between components through props ensures the stability and maintainability of the architecture.

[0058] S103, using the useState and useEffect hooks of React, the dynamic state management between components and within components is realized for the modular component architecture, the selected account list key state is managed in the CustomTransfer component, and is transmitted to the AllPageList and SelectedList subcomponents through props. Based on the modular component architecture constructed in S102, the dynamic state management is realized using the useState and useEffect hooks of React. First, in the CustomTransfer component, the key state variables are defined through useState: "selectedAccounts" (selected account list, initial value is an empty array), "candidateAccounts" (candidate account list, initial value is the account data converted from the data model in S101), and the state update functions (such as "handleSelectAccount" and "handleDeselectAccount") are defined for processing the state changes of account selection and deselection.

[0059] Then, "candidateAccounts" and "handleSelectAccount" are transmitted to the AllPageList component through props, and "selectedAccounts" and "handleDeselectAccount" are transmitted to the SelectedList component; in the AllPageList component, the click event is bound for each account list item, when the user clicks the list item, the "handleSelectAccount" function is triggered, which adds the selected account data to "selectedAccounts" state and removes the corresponding data from "candidateAccounts"; in the SelectedList component, the "handleDeselectAccount" function is triggered by clicking the "remove" button to realize the opposite state update logic.

[0060] Meanwhile, in the CustomTransfer component, the useEffect hook is used to listen to the state changes of "selectedAccounts" and "candidateAccounts". When the state changes, the rendering data inside the component is automatically synchronized and updated to ensure that the AllPageList and SelectedList components can respond to state changes in real time. Through this centralized state management and props transmission method, the inconsistency problem between components is avoided, and dynamic state synchronization between components is achieved.

[0061] In S104, based on the above dynamic state management mechanism, a virtual scrolling-based pagination loading strategy is implemented in the AllPageList component. When the user scrolls to the bottom of the AllPageList list, the loading of new data is automatically triggered. Combined with the performance optimization features of React, a large number of account data managed by the cross-platform data model is loaded and displayed.

[0062] Based on the dynamic state management mechanism of S103, a virtual scrolling-based pagination loading strategy is implemented in the AllPageList component. First, introduce a virtual scrolling library such as React-Virtualized or React-Window, and use the List component in the library to replace the traditional native list rendering. This component supports configuring virtual scrolling logic through "rowCount" (total data volume), "rowHeight" (list item height), and "rowRenderer" (list item rendering function).

[0063] Next, define pagination loading parameters in the AllPageList component: "pageSize" (the amount of data loaded per page, such as 20), "currentPage" (the current page number, the initial value is 1), and "isLoading" (the loading state identifier, the initial value is false). Through the useEffect hook, listen to the scrolling event of the component. When the user scrolls to the bottom of the list (determined by the scrolling position listening API provided by the virtual scrolling library) and "isLoading" is false, trigger the pagination loading function.

[0064] The pagination loading function first sets "isLoading" to true to avoid repeated loading, then calls the data request interface to get the account data of the corresponding page from the backend according to "currentPage" and "pageSize" (the data format conforms to the cross-platform data model of S101), and after obtaining the data, the new data is appended to the "candidateAccounts" state through the state update function in S103, and "currentPage" is increased by 1 and "isLoading" is set to false; During data loading, render the loading prompt component (such as loading animation) through the "isLoading" state to improve user experience; Combined with the performance optimization features of React (such as memo to reduce unnecessary component re-rendering), ensure that the component still maintains smooth rendering performance when loading a large amount of data, and realize efficient data loading and display.

[0065] S105, under the support of the efficient data loading strategy, real-time search and filtering algorithms are implemented on the front end for account data in the cross-platform data model. When the user inputs a search keyword in the interface, the account data is filtered and matched in real time on the client side, and the matching results are displayed through the AllPageList component.

[0066] Under the support of the efficient data loading strategy in S104, real-time search and filtering algorithms are implemented on the front end for account data in the cross-platform data model of S101. First, add a "searchKeyword" state variable (initial value is an empty string) in the CustomTransfer component, and develop a search input box component, bind the input event, and when the user inputs a search keyword, update the "searchKeyword" state in real time.

[0067] Next, define a search filtering function that receives "candidateAccounts" (candidate account data) and "searchKeyword" as parameters, and uses a multi-field fuzzy matching algorithm: iterate through each account data in "candidateAccounts", and perform fuzzy matching on the username and user ID fields (convert the field values and search keywords to lowercase for comparison to determine if they contain the keyword), and support range matching for the fan count field (such as inputting "1w+", filter accounts with fan counts greater than 10000).

[0068] The "searchKeyword" state change is monitored through the useEffect hook, and whenever "searchKeyword" is updated, the search filtering function is automatically called to filter "candidateAccounts" and obtain matching account data. The filtered data is used as the rendering data source for the AllPageList component. The filtering process is completely done on the client side without sending requests to the server, ensuring real-time display of search results (response time controlled within 100ms). At the same time, when the user clears the search keyword, the system automatically restores the display of all candidate account data, realizing flexible and efficient account search and positioning functions.

[0069] S106, based on the modular component architecture and dynamic state management mechanism, design interactive account selection interface, users select or deselect accounts in AllPageList component through clicking operation, system updates account selection state in real time according to user operation, and synchronizes selected account data to SelectedList component for display.

[0070] Based on the modular component architecture of S102 and the dynamic state management mechanism of S103, design interactive account selection interface. First, add selected state style (such as adding border highlight, background color change when selected) in AllPageList component's account list item. When users click the list item, in addition to triggering the state update logic in S103, also feedback the selected state in real time through CSS style, so that users can intuitively perceive the operation result.

[0071] Secondly, in the "operation button area" of CustomTransfer component, add "select all" and "remove all" two batch operation buttons: click "select all" button, trigger batch selection function, add all candidate accounts in AllPageList to "selectedAccounts" state, and clear candidate account data; click "remove all" button, trigger batch removal function, restore all selected accounts in SelectedList to "candidateAccounts" state, and clear selected account data; button state dynamically adjusts with data changes (such as "select all" button is disabled when candidate account is empty).

[0072] Meanwhile, in the SelectedList component, the drag-and-drop sorting function of the selected accounts is supported (a drag-and-drop library such as React-DnD is introduced to realize the function), and the user can adjust the display order of the selected accounts by dragging and dropping, and the sorting result is synchronized to the "selectedAccounts" state in real time; the operation process of the entire interface follows the logic of "click to select / cancel - real-time feedback - state synchronization", simplifying the user operation steps and realizing a smooth interactive account selection experience.

[0073] S107, according to the account verification state information contained in the cross-platform data model, on the basis of the interactive account selection interface, the verification state visualization is realized through conditional rendering, special visual identification is added to the verified account, and the identification is dynamically displayed or hidden on the interface according to the verification state of the account.

[0074] According to the account verification state information (such as the "isVerified" Boolean field) contained in the cross-platform data model in S101, the verification state visualization is realized on the basis of the interactive account selection interface designed in S106. First, in the account list items of the AllPageList and SelectedList components, the display position of the verification state identification (on the right side of the username) is reserved, and two visual identification styles are defined: the verified account displays a blue checkmark icon (using SVG vector graphics to ensure that the scaling does not distort), and the unverified account does not display the identification or displays a gray question mark icon.

[0075] Then, in the list item rendering logic of the component, conditional judgment is added: if the "isVerified" field of the account data is true, the verified identification is rendered; if it is false, the unverified identification is not rendered or is rendered; at the same time, the hovering prompt function (implemented through the React-Tooltip library) is added to the verified identification, and when the user's mouse hovers over the identification, the prompt text "verified account, information reliable" is displayed, further enhancing the information transmission effect.

[0076] In addition, in the search filtering function of S105, a verification state filtering option (such as the "only display verified accounts" checkbox) is added, and after the user checks the option, the search filtering function will additionally filter the account data with "isVerified" as true, realizing accurate filtering according to the verification state; through conditional rendering and interaction optimization, the user can quickly distinguish the reliability of the account, improving the accuracy and efficiency of account selection.

[0077] S108 integrates an internationalization library related to the useIntl hook. In the modular component system, the internationalization library manages the interface text content in each component, supports dynamic language switching for the interactive account selection interface and other system interfaces, and does not require reloading the page.

[0078] Integrate internationalization libraries related to the useIntl hook (such as React-Intl) to implement internationalization support in various components of the modular component system built by S102. First, create multilingual resource files (such as en.json, zh-CN.json, ja.json), and store all interface text in the system (such as button text "Select All" and "Remove", prompt text "Verified Account", search box placeholder "Enter Keyword to Search") in the corresponding language resource files in the form of key-value pairs (such as "selectAll": "Select All" in en.json, and "selectAll": "Select All" in zh-CN.json).

[0079] Next, in the top-level component of the React application (such as the App component), introduce the IntlProvider component, pass the multi-language resource files as props to IntlProvider, and define the "currentLocale" state variable (the initial value can be automatically obtained through the browser language settings, or it can be set to "zh-CN" by default) to control the current interface language.

[0080] In components such as CustomTransfer, AllPageList, and SelectedList, the internationalization utility function (such as formatMessage) is obtained through the useIntl hook. The hard-coded text in the component is replaced with the formatMessage call (e.g., changing the button text from "Select All" to formatMessage ({ id: 'selectAll'})), realizing dynamic text rendering. At the same time, a language switching drop-down menu (such as containing "Chinese", "English", and "Japanese" options) is added to the interface. When the user selects a language, the "currentLocale" state is triggered to update. The IntlProvider component will automatically load the resource file of the corresponding language according to the new "currentLocale", realizing dynamic switching of interface text. The entire switching process does not require reloading the page, ensuring the continuity of user operation and meeting the usage needs of users in different regions.

[0081] According to a specific implementation manner of the embodiment of the application, when the cross-platform data model is constructed, the reserved platform-specific field is customized according to the characteristics of different social media platforms, and the adaptability of the data model to the information of the multi-platform account is further improved.

[0082] According to a specific implementation manner of the embodiment of the application, when the dynamic state management is implemented, by setting a state update dependency, the component is re-rendered only when the field affecting the interface display in the cross-platform data model changes, and unnecessary performance consumption caused by irrelevant field changes is avoided.

[0083] According to a specific implementation manner of the embodiment of the application, when the virtual scrolling-based page loading strategy is implemented, a data preloading mechanism is added, and new data loading is triggered in advance when the user scrolls to a preset distance from the bottom of the AllPageList list, so that the time for the user to wait for data loading is reduced.

[0084] According to a specific implementation manner of the embodiment of the application, when the real-time search and filtering algorithm is implemented, multi-dimensional combined filtering is supported, in addition to the username and user ID, the fan number range and the account registration time range in the cross-platform data model can also be used for screening, so that the diversified account screening needs of the user are met.

[0085] According to a specific implementation manner of the embodiment of the application, when the interactive account selection interface is designed, a batch operation function is added, the user can select the currently displayed account in batches through the check all option in the AllPageList component, or cancel the selected account in batches through the batch delete button in the SelectedList component, and the operation process is simplified.

[0086] According to a specific implementation manner of the embodiment of the application, when the verification state visualization is implemented, a dynamic effect is designed for the special visual identifier of the verified account, and a flashing or color gradient effect is presented when the mouse hovers over the identifier, so that the recognition of the user for the verified account is further improved.

[0087] According to a specific implementation manner of the embodiment of the application, after the internationalization library is integrated, a lazy loading method is used for non-key components in the system, and a loading placeholder component is set, the loading state is displayed through the placeholder component during the loading process of the non-key component, so that the blank area of the interface is avoided, and the throttling and debouncing technologies are applied to the scroll event and the search input event, so that unnecessary calculation and rendering are reduced.

[0088] Compared with the method embodiment, the application further provides a device based on cross-platform social media account intelligent selection and management, which comprises:

[0089] A cross-platform data model construction module is configured to construct a cross-platform data model containing common fields of user ID, username, avatar URL, and fan count and reserving space for platform-specific field extension, so as to uniformly represent and manage account information from different social media platforms;

[0090] A modular component architecture design module is configured to design and construct a modular component architecture composed of CustomTransfer, AllPageList, and SelectedList based on the cross-platform data model constructed by the cross-platform data model construction module, wherein CustomTransfer serves as a top-level container responsible for managing the overall state and layout, AllPageList is used to display a list of selectable social media accounts, and SelectedList is used to display selected accounts;

[0091] A dynamic state management module is configured to use useState and useEffect hooks of React to implement dynamic state management within and between components for the modular component architecture constructed by the modular component architecture design module, to centrally manage the key state of the selected account list in the CustomTransfer component, and to pass it to the AllPageList and SelectedList sub-components through props;

[0092] An efficient data loading module is configured to implement a virtual scrolling-based pagination loading strategy in the AllPageList component based on the dynamic state management mechanism implemented by the dynamic state management module, to automatically trigger the loading of new data when the user scrolls to the bottom of the AllPageList list, and to combine the performance optimization features of React to load and display a large amount of account data managed by the cross-platform data model constructed by the cross-platform data model construction module;

[0093] A real-time search filtering module is configured to implement real-time search and filtering algorithms in the front end for account data in the cross-platform data model constructed by the cross-platform data model construction module under the support of the efficient data loading strategy implemented by the efficient data loading module, to filter and match account data in real time on the client side when the user inputs a search keyword in the interface, and to display the matching results through the AllPageList component;

[0094] The interactive account selection module is used for designing an interactive account selection interface based on a modular component architecture built by the modular component architecture design module and a dynamic state management mechanism implemented by the dynamic state management module, for a user to select or deselect an account in an AllPageList component through a click operation, to update a selected state of the account in real time according to a user operation, and to synchronize the selected account data to a SelectedList component for display;

[0095] The verification state visualization module is used for visualizing a verification state of an account according to account verification state information contained in a cross-platform data model built by the cross-platform data model building module, realizing verification state visualization through conditional rendering on the basis of the interactive account selection interface designed by the interactive account selection module, adding a special visual identifier to the verified account, and dynamically displaying or hiding the identifier on the interface according to the verification state of the account.

[0096] The internationalization support module is used for integrating an internationalization library related to a useIntl hook, managing interface text content in each component of the modular component system built by the modular component architecture design module through the internationalization library, supporting dynamic language switching of the interactive account selection interface and other interface texts of the system, and without reloading a page.

[0097] Referring to Figure 4 The embodiment of the present application further provides an electronic device 60, which comprises:

[0098] at least one processor; and

[0099] a memory connected with the at least one processor; wherein

[0100] The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method of intelligent selection and management of cross-platform social media accounts in the foregoing method embodiments.

[0101] The embodiment of the present application further provides a non-transitory computer readable storage medium storing computer instructions, and the computer instructions are used for enabling the computer to execute the method in the foregoing method embodiments.

[0102] The embodiment of the present application further provides a computer program product, which comprises a computer program stored on a non-transitory computer readable storage medium, and the computer program comprises program instructions, and when the program instructions are executed by a computer, the computer is enabled to execute the method of intelligent selection and management of cross-platform social media accounts in the foregoing method embodiments.

[0103] As Figure 4As shown, the electronic device 60 can include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601 that can perform various appropriate actions and processes according to programs stored in a read-only memory (ROM) 602 or loaded into a random access memory (RAM) 603 from a storage device 608. Various programs and data required for the operation of the electronic device 60 are also stored in the RAM 603. The processing device 601, the ROM 602, and the RAM 603 are connected to each other through a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0104] In general, the following devices can be connected to the I / O interface 605: input devices 606 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, a gyro sensor, a geomagnetic sensor, etc.; output devices 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; storage devices 608 including, for example, a tape, a hard disk, etc.; and communication devices 609. The communication devices 609 can allow the electronic device 60 to communicate wirelessly or wired with other devices to exchange data. Although Figure 4 The electronic device 60 is shown with various devices, but it should be understood that not all of the shown devices are required to be implemented or present. More or fewer devices can alternatively be implemented or present.

[0105] In particular, the processes described above with reference to the flowcharts can be implemented as a computer software program according to embodiments of the present application. For example, embodiments of the present application include a computer program product comprising a computer program carried on a computer readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network through the communication devices 609, or installed from the storage devices 608, or installed from the ROM 602. When the computer program is executed by the processing device 601, the above-described functions defined in the methods of embodiments of the present application are performed.

[0106] The above description is merely that of specific embodiments of the present application, but the scope of the present application is not limited thereto. Any changes or modifications that can be easily conceived by those skilled in the art within the technical scope of the present application should be encompassed within the scope of the present application. Therefore, the scope of the present application should be defined by the appended claims.

Claims

1. A method for intelligent selection and management of cross-platform social media accounts, characterized in that, Includes the following steps: Construct a cross-platform data model that includes common fields such as user ID, username, avatar URL, and number of followers, while reserving space for expansion of platform-specific fields, so as to uniformly represent and manage account information from different social media platforms; Based on the React framework and the aforementioned cross-platform data model, a modular component architecture consisting of CustomTransfer, AllPageList, and SelectedList was designed and constructed. CustomTransfer, as the top-level container, is responsible for managing the overall state and layout. AllPageList is used to display the list of selectable social media accounts, and SelectedList is used to display the selected accounts. By leveraging React's useState and useEffect hooks, dynamic state management is implemented within and between components for this modular component architecture. The key states of the selected account list are centrally managed in the CustomTransfer component and passed to the AllPageList and SelectedList child components via props. Based on the above dynamic state management mechanism, a pagination loading strategy based on virtual scrolling is implemented in the AllPageList component. When the user scrolls to the bottom of the AllPageList, the loading of new data is automatically triggered. Combined with React's performance optimization features, a large amount of account data managed by the cross-platform data model is loaded and displayed. With the support of this efficient data loading strategy, a real-time search and filtering algorithm is implemented on the front end for account data in the cross-platform data model. When the user enters search keywords on the interface, the account data is filtered and matched in real time on the client side, and the matching results are displayed through the AllPageList component. Based on a modular component architecture and dynamic state management mechanism, an interactive account selection interface is designed. Users can select or deselect accounts in the AllPageList component by clicking. The system updates the selection status of accounts in real time according to user operations and synchronizes the selected account data to the SelectedList component for display. Based on the account verification status information contained in the cross-platform data model, the verification status is visualized through conditional rendering on the basis of the interactive account selection interface. A special visual identifier is added to the verified account, and the identifier is dynamically displayed or hidden on the interface according to the account's verification status. It integrates the internationalization library related to the useIntl hook. In the modular component system, the internationalization library is used to manage the interface text content in each component. It supports dynamic language switching of the text in the interactive account selection interface and other system interfaces without reloading the page.

2. The method according to claim 1, characterized in that, When building a cross-platform data model, the reserved platform-specific fields are customized according to the characteristics of different social media platforms, further improving the adaptability of the data model to account information on multiple platforms.

3. The method according to claim 2, characterized in that, When implementing dynamic state management, by setting state update dependencies, component re-rendering is triggered only when the fields affecting the interface display in the cross-platform data model change, thus avoiding unnecessary performance consumption caused by changes in irrelevant fields.

4. The method according to claim 2, characterized in that, When implementing a pagination loading strategy based on virtual scrolling, a data preloading mechanism is added. When the user scrolls to a preset distance from the bottom of the AllPageList, new data loading is triggered in advance, reducing the time the user waits for data to load.

5. The method according to claim 4, characterized in that, When implementing real-time search and filtering algorithms, multi-dimensional combined filtering is supported. In addition to filtering based on username and user ID, it can also be filtered based on the range of the number of followers and the range of account registration time in the cross-platform data model, so as to meet the diverse account filtering needs of users.

6. The method according to claim 4, characterized in that, When designing the interactive account selection interface, a batch operation function was added. Users can select all currently displayed accounts in batches by checking the "Select All" option in the AllPageList component, or deselect selected accounts in batches by using the "Batch Delete" button in the SelectedList component, thus simplifying the operation process.

7. The method according to claim 6, characterized in that, When visualizing the verification status, dynamic effects are designed for the special visual identifier of verified accounts. When the mouse hovers over the identifier, it flashes or changes color, further enhancing the user's recognition of verified accounts.

8. The method according to claim 7, characterized in that, After integrating the internationalization library, lazy loading is adopted for non-critical components in the system, and loading placeholder components are set to display the loading status through the placeholder components during the loading process of non-critical components, so as to avoid blank areas on the interface. At the same time, throttling and debouncing techniques are applied to scroll events and search input events to reduce unnecessary calculations and rendering.

9. A device for intelligent selection and management of cross-platform social media accounts, characterized in that, include: The cross-platform data model building module is used to build a cross-platform data model that includes common fields such as user ID, username, avatar URL, and number of followers, while reserving space for expansion of platform-specific fields, so as to uniformly represent and manage account information from different social media platforms. The modular component architecture design module is used to design and build a modular component architecture consisting of CustomTransfer, AllPageList, and SelectedList based on the cross-platform data model built by the cross-platform data model building module, using the React framework. CustomTransfer serves as the top-level container and is responsible for managing the overall state and layout. AllPageList is used to display the list of selectable social media accounts, and SelectedList is used to display the selected accounts. The dynamic state management module utilizes React's useState and useEffect hooks to implement dynamic state management within and between components, based on the modular component architecture designed by the modular component architecture design module. It centrally manages the key states of the selected account list in the CustomTransfer component and passes them to the AllPageList and SelectedList child components via props. The high-efficiency data loading module is used to implement a pagination loading strategy based on virtual scrolling in the AllPageList component, based on the dynamic state management mechanism implemented by the dynamic state management module. When the user scrolls to the bottom of the AllPageList, the loading of new data is automatically triggered. Combined with the performance optimization features of React, it loads and displays a large amount of account data managed by the cross-platform data model built by the cross-platform data model building module. The real-time search and filtering module, supported by the efficient data loading strategy implemented by the efficient data loading module, implements real-time search and filtering algorithms on the front end for account data in the cross-platform data model built by the cross-platform data model building module. When the user enters search keywords on the interface, the account data is filtered and matched in real time on the client side, and the matching results are displayed through the AllPageList component. The interactive account selection module is designed based on the modular component architecture built by the modular component architecture design module and the dynamic state management mechanism implemented by the dynamic state management module. It designs an interactive account selection interface, allowing users to select or deselect accounts in the AllPageList component by clicking. The selected account status is updated in real time according to the user's operation, and the selected account data is synchronized to the SelectedList component for display. The verification status visualization module is used to visualize the account verification status information contained in the cross-platform data model constructed by the cross-platform data model construction module. Based on the interactive account selection interface designed by the interactive account selection module, it visualizes the verification status through conditional rendering, adds special visual identifiers to verified accounts, and dynamically displays or hides the identifiers on the interface according to the account's verification status. The internationalization support module integrates internationalization libraries related to the useIntl hook. In the modular component system built by the modular component architecture design module, the internationalization library manages the interface text content and supports dynamic language switching for the interactive account selection interface and other system interfaces without reloading the page.

10. An electronic device, characterized in that, The electronic device includes: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 8.

Images