Refactor(css): Change all less to module mode

.eslintrc.cjs

@@ -1,40 +0,0 @@
-/* eslint-env node */
-
-module.exports = {
-    root: true,
-    env: { browser: true, es2020: true },
-    extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@typescript-eslint/recommended-requiring-type-checking',
-        'plugin:react-hooks/recommended',
-        'plugin:prettier/recommended',
-        './.eslintrc-auto-import.json'
-    ],
-    parser: '@typescript-eslint/parser',
-    parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        project: './tsconfig*.json',
-        tsconfigRootDir: __dirname,
-    },
-    plugins: [
-        'react-refresh',
-        'prettier'],
-    rules: {
-        'no-cond-assign': 'error',
-        'eqeqeq': 'error',
-        'prettier/prettier': [
-            'error',
-            {
-                endOfLine: 'auto',
-            }
-        ],
-        'react-refresh/only-export-components': [
-            'warn',
-            { allowConstantExport: true }
-        ],
-        '@typescript-eslint/no-non-null-assertion': 'off',
-        'react-hooks/exhaustive-deps': 'off',
-    }
-}

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -1,34 +1,37 @@
-# oxygen-desktop
+<div align="center">
+    <h1>
+        <img alt="Logo" src="doc/logo.svg" width="128">
+        <br>
+        <span>Desktop of Oxygen Toolbox</span>
+    </h1>
+</div>
+<div align="center">
+    <a href="https://github.com/FatttSnake/oxygen-desktop/actions/workflows/build.yml">
+        <img alt="Build" src="https://img.shields.io/github/actions/workflow/status/FatttSnake/oxygen-desktop/build.yml
+">
+    </a>
+    <a href="https://github.com/FatttSnake/oxygen-desktop/releases/latest">
+        <img alt="Release" src="https://img.shields.io/github/v/release/FatttSnake/oxygen-desktop">
+    </a>
+    <a href="LICENSE">
+        <img alt="LICENSE" src="https://img.shields.io/github/license/FatttSnake/oxygen-desktop">
+    </a>
+</div>
 
-An Electron application with React and TypeScript
+# Overview ([ZH](README_zh.md), EN)
 
-## Recommended IDE Setup
+This project is a desktop application of Oxygen Toolbox. Supports local installation of tools and supports native api.
 
-- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+# Requires (One of)
 
-## Project Setup
+- Linux
+- Windows
+- MacOS
 
-### Install
+# Related projects
 
-```bash
-$ npm install
-```
+[Web UI of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-ui)
 
-### Development
+[API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api)
 
-```bash
-$ npm run dev
-```
-
-### Build
-
-```bash
-# For windows
-$ npm run build:win
-
-# For macOS
-$ npm run build:mac
-
-# For Linux
-$ npm run build:linux
-```
+[Android Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-android)

README_zh.md

@@ -0,0 +1,37 @@
+<div align="center">
+    <h1>
+        <img alt="Logo" src="doc/logo.svg" width="128">
+        <br>
+        <span>Desktop of Oxygen Toolbox</span>
+    </h1>
+</div>
+<div align="center">
+    <a href="https://github.com/FatttSnake/oxygen-desktop/actions/workflows/build.yml">
+        <img alt="Build" src="https://img.shields.io/github/actions/workflow/status/FatttSnake/oxygen-desktop/build.yml
+">
+    </a>
+    <a href="https://github.com/FatttSnake/oxygen-desktop/releases/latest">
+        <img alt="Release" src="https://img.shields.io/github/v/release/FatttSnake/oxygen-desktop">
+    </a>
+    <a href="LICENSE">
+        <img alt="LICENSE" src="https://img.shields.io/github/license/FatttSnake/oxygen-desktop">
+    </a>
+</div>
+
+# 概述 (ZH, [EN](README.md))
+
+本项目是 Oxygen Toolbox 的桌面应用程序。支持工具本地安装，支持原生api。
+
+# 要求 (其中一个)
+
+- Linux
+- Windows
+- MacOS
+
+# 关联项目
+
+[Web UI of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-ui)
+
+[API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api)
+
+[Android Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-android)

electron-builder.yml

@@ -7,8 +7,12 @@ directories:
 files:
   - '!**/.vscode/*'
   - '!src/*'
+  - '!doc/*'
+  - '!resources/*'
   - '!electron.vite.config.{js,ts,mjs,cjs}'
-  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{.eslintignore,.eslint.config.mjs,.prettierignore,.prettierrc.json,dev-app-update.yml,README.md,README_zh.md}'
+  - '!.eslintrc-auto-import.json'
+  - '!src/renderer/auto-import'
   - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
   - '!{tsconfig.json,tsconfig.node.json}'
 asarUnpack:

eslint.config.mjs

@@ -0,0 +1,30 @@
+import globals from 'globals'
+import eslintJs from '@eslint/js'
+import tsEslint from 'typescript-eslint'
+
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+
+const config = {
+    name: 'Global config',
+    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+    rules: {
+        '@typescript-eslint/no-unused-expressions': [
+            'error',
+            {
+                allowShortCircuit: true,
+                allowTernary: true,
+                allowTaggedTemplates: true
+            }
+        ],
+        '@typescript-eslint/no-unused-vars': 'off'
+    }
+}
+
+export default [
+    { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+    { languageOptions: { globals: globals.browser } },
+    eslintJs.configs.recommended,
+    eslintPluginPrettierRecommended,
+    ...tsEslint.configs.recommended,
+    config
+]

package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0-SNAPSHOT",
   "description": "Oxygen Toolbox multi-platform desktop version",
   "main": "./out/main/index.js",
-  "author":  {
+  "author": {
     "name": "FatttSnake",
     "email": "fatttsnake@fatweb.top",
     "url": "https://fatweb.top"
@@ -36,66 +36,60 @@
     "electron-updater": "^6.2.1"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5.3.7",
+    "@ant-design/icons": "^5.5.1",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@electron-toolkit/eslint-config-prettier": "^2.0.0",
-    "@electron-toolkit/eslint-config-ts": "^2.0.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
-    "@marsidev/react-turnstile": "^0.7.1",
+    "@eslint/js": "^9.12.0",
+    "@marsidev/react-turnstile": "^1.0.2",
     "@monaco-editor/react": "^4.6.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.17.5",
-    "@types/node": "^20.14.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
-    "@typescript/ata": "^0.9.6",
-    "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.18.1",
-    "axios": "^1.7.2",
+    "@types/lodash": "^4.17.10",
+    "@types/node": "^20.16.11",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@typescript/ata": "^0.9.7",
+    "@vitejs/plugin-react": "^4.3.2",
+    "antd": "^5.21.4",
+    "axios": "^1.7.4",
     "custom-protocol-check": "^1.4.0",
-    "dayjs": "^1.11.11",
-    "echarts": "^5.5.0",
+    "dayjs": "^1.11.13",
+    "echarts": "^5.5.1",
     "electron": "^31.0.1",
     "electron-builder": "^24.13.3",
     "electron-vite": "^2.2.0",
-    "esbuild-wasm": "^0.21.5",
-    "eslint": "^8.57.0",
-    "eslint-config-love": "^52.0.0",
+    "esbuild-wasm": "^0.24.0",
+    "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "fast-deep-equal": "^3.1.3",
     "fflate": "^0.8.2",
-    "jsdom": "^24.1.0",
+    "globals": "^15.11.0",
+    "jsdom": "^24.1.3",
     "jwt-decode": "^4.0.0",
+    "less": "^4.2.0",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.4",
     "moment": "^2.30.1",
-    "monaco-editor": "^0.49.0",
+    "monaco-editor": "^0.52.0",
     "monaco-jsx-syntax-highlight": "^1.2.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
-    "react-router": "^6.23.1",
-    "react-router-dom": "^6.23.1",
-    "sass": "^1.77.5",
+    "react-router": "^6.27.0",
+    "react-router-dom": "^6.27.0",
     "size-sensor": "^1.0.2",
-    "stylelint-config-prettier": "^9.0.5",
-    "typescript": "^5.4.5",
-    "unplugin-auto-import": "^0.17.6",
-    "unplugin-icons": "^0.19.0",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.9.0",
+    "unplugin-auto-import": "^0.18.3",
+    "unplugin-icons": "^0.19.3",
     "vanilla-tilt": "^1.8.1",
-    "vite": "^5.2.13"
+    "vite": "5.4.6"
   }
 }

src/renderer/src/assets/css/_mixins.scss

@@ -1,22 +0,0 @@
-@mixin keyframes($animationName) {
-  @-webkit-keyframes #{$animationName} {
-    @content
-  }
-  @-moz-keyframes #{$animationName} {
-    @content
-  }
-  @-o-keyframes #{$animationName} {
-    @content
-  }
-  @keyframes #{$animationName} {
-    @content
-  }
-}
-
-@mixin unique-keyframes {
-  $animationName: unique-id();
-  animation-name: $animationName;
-  @include keyframes($animationName) {
-    @content
-  }
-}

src/renderer/src/assets/css/base.less

@@ -8,31 +8,29 @@ html {
   scroll-behavior: smooth;
 }
 
-em,
-i {
-  font-style: normal
+em, i {
+  font-style: normal;
 }
 
 li {
-  list-style: none
+  list-style: none;
 }
 
 img {
   border: 0;
-  vertical-align: middle
+  vertical-align: middle;
 }
 
 button {
-  cursor: pointer
+  cursor: pointer;
 }
 
 a {
   color: #666;
-  text-decoration: none
+  text-decoration: none;
 }
 
-button,
-input {
+button, input {
   font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
   border: 0;
   outline: none;
@@ -42,12 +40,11 @@ body {
   -webkit-font-smoothing: antialiased;
   background-color: #fff;
   font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
-  color: #666
+  color: #666;
 }
 
-.hide,
-.none {
-  display: none
+.hide, .none {
+  display: none;
 }
 
 .clearfix:after {
@@ -55,9 +52,9 @@ body {
   clear: both;
   display: block;
   content: ".";
-  height: 0
+  height: 0;
 }
 
 .clearfix {
-  *zoom: 1
-}
+  zoom: 1;
+}

src/renderer/src/assets/css/common.less

@@ -1,4 +1,4 @@
-@use '@/assets/css/constants' as constants;
+@import '@/assets/css/constants';
 
 #root {
   height: 100vh;
@@ -6,8 +6,8 @@
 }
 
 .body {
-  background-color: constants.$background-color;
-  color: constants.$font-main-color;
+  background-color: @background-color;
+  color: @font-main-color;
   user-select: none;
   min-width: 900px;
   min-height: 400px;
@@ -27,7 +27,7 @@
 }
 
 .background-origin {
-  background-color: constants.$origin-color;
+  background-color: @origin-color;
 }
 
 .center-box {

src/renderer/src/assets/css/components/common/card.module.less

@@ -0,0 +1,8 @@
+@import '@/assets/css/constants';
+
+.cardBox {
+  background-color: @origin-color;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
+}

src/renderer/src/assets/css/components/common/card.scss

@@ -1,8 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-.card-box {
-  background-color: constants.$origin-color;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
-}

src/renderer/src/assets/css/components/common/fit-center.module.less

@@ -1,7 +1,7 @@
-.fit-center {
+.fitCenter {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
-}
+}

src/renderer/src/assets/css/components/common/fit-fullscreen.module.less

@@ -1,5 +1,5 @@
-.fit-fullscreen {
+.fitFullscreen {
   position: relative;
   width: 100%;
   height: 100vh;
-}
+}

src/renderer/src/assets/css/components/common/flex-box.module.less

@@ -1,5 +1,5 @@
-.flex-box {
+.flexBox {
   > * {
     flex: 1;
   }
-}
+}

src/renderer/src/assets/css/components/common/fullscreen-loading-mask.module.less

@@ -1,4 +1,4 @@
-.fullscreen-loading-mask {
+.fullscreenLoadingMask {
   position: absolute;
   display: flex;
   justify-content: center;
@@ -7,4 +7,4 @@
   height: 100%;
   z-index: 100;
   background-color: rgba(200, 200, 200, 0.2);
-}
+}

src/renderer/src/assets/css/components/common/hide-scrollbar.module.less

@@ -1,19 +1,19 @@
-@use '@/assets/css/constants' as constants;
-@use '@/assets/css/mixins' as mixins;
+@import "@/assets/css/constants";
+@import "@/assets/css/mixins";
 
-.hide-scrollbar-mask {
+.hideScrollbarMask {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
 
-  .hide-scrollbar-selection {
+  .hideScrollbarSelection {
     position: relative;
     overflow: scroll;
     scrollbar-width: none;
     -ms-overflow-style: none;
 
-    .hide-scrollbar-content {
+    .hideScrollbarContent {
       min-width: 100%;
     }
   }
@@ -41,12 +41,12 @@
         width: 100%;
         height: 100%;
         border-radius: 8px;
-        background-color: constants.$font-secondary-color;
+        background-color: @font-secondary-color;
         transition: background-color .2s;
       }
 
       :hover {
-        background-color: constants.$font-main-color;
+        background-color: @font-main-color;
       }
     }
 
@@ -55,18 +55,18 @@
       opacity: 0;
       animation: 0.4s linear;
 
-      @include mixins.unique-keyframes {
+      .keyframes(m7t06K, {
         0% {
           opacity: 0.5;
         }
         100% {
           opacity: 0;
         }
-      }
+      });
     }
   }
 
-  .vertical-scrollbar {
+  .verticalScrollbar {
     height: 100%;
     left: 100%;
     top: 0;
@@ -77,7 +77,7 @@
     }
   }
 
-  .horizontal-scrollbar {
+  .horizontalScrollbar {
     width: 100%;
     left: 0;
     top: 100%;

src/renderer/src/assets/css/components/common/indicator.module.less

@@ -1,6 +1,6 @@
-@use '@/assets/css/constants' as constants;
+@import '@/assets/css/constants';
 
-.dot-list {
+.dotList {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -15,20 +15,16 @@
       width: 10px;
       height: 10px;
       border-radius: 50%;
-      border: {
-        width: 2px;
-        color: constants.$font-secondary-color;
-        style: solid;
-      };
+      border: 2px solid @font-secondary-color;
       transition: all .2s;
     }
 
     :hover {
-      background-color: constants.$focus-color;
+      background-color: @focus-color;
     }
   }
 
   .active > * {
-    background-color: constants.$font-secondary-color !important;
+    background-color: @font-secondary-color !important;
   }
 }

src/renderer/src/assets/css/components/common/loading-mask.module.less

@@ -1,8 +1,8 @@
-.loading-mask {
+.loadingMask {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   z-index: 100;
-}
+}

src/renderer/src/assets/css/components/common/sidebar.module.less

@@ -1,5 +1,5 @@
-@use "@/assets/css/constants" as constants;
-@use "@/assets/css/mixins" as mixins;
+@import "@/assets/css/constants";
+@import "@/assets/css/mixins";
 
 .sidebar {
   display: flex;
@@ -14,17 +14,17 @@
     align-items: center;
     font-weight: bold;
     padding: 10px 14px;
-    color: constants.$main-color;
+    color: @main-color;
     overflow: hidden;
 
-    .icon-box {
+    .iconBox {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 10px;
       width: 40px;
       height: 40px;
-      font-size: constants.$SIZE_ICON_SM;
+      font-size: @SIZE_ICON_SM;
       border-radius: 8px;
       cursor: pointer;
 
@@ -34,7 +34,7 @@
       }
 
       &:hover {
-        background-color: constants.$background-color;
+        background-color: @background-color;
       }
     }
 
@@ -47,7 +47,7 @@
     }
   }
 
-  .content, .bottom-fixed {
+  .content, .bottomFixed {
     display: flex;
     min-height: 0;
     flex-direction: column;
@@ -67,19 +67,19 @@
           position: relative;
           font-size: 1rem;
 
-          > .menu-bt {
+          > .menuBt {
             border-radius: 8px;
             overflow: hidden;
             height: 40px;
 
-            .icon-box {
+            .iconBox {
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 0 10px;
               width: 40px;
               height: 40px;
-              font-size: constants.$SIZE_ICON_SM;
+              font-size: @SIZE_ICON_SM;
               cursor: pointer;
 
               img {
@@ -93,7 +93,7 @@
               height: 100%;
               width: 100%;
               transition: all 0.2s;
-              background-color: constants.$origin-color;
+              background-color: @origin-color;
 
               .text {
                 flex: 1;
@@ -104,15 +104,21 @@
               }
 
               &.active {
-                color: constants.$origin-color;
-                background-color: constants.$main-color;
+                color: @origin-color;
+                background-color: @main-color;
 
                 img {
-                  filter: drop-shadow(1000px 0 0 constants.$origin-color);
+                  filter: drop-shadow(1000px 0 0 @origin-color);
                   transform: translate(-1000px);
                 }
               }
             }
+
+            &:hover {
+              > * {
+                background-color: @background-color;
+              }
+            }
           }
 
           .submenu {
@@ -121,7 +127,7 @@
             padding-left: 10px;
             z-index: 10000;
             animation: 0.1s ease forwards;
-            @include mixins.unique-keyframes {
+            .keyframes(XxrGiu, {
               0% {
                 transform: translateX(0);
                 opacity: 1;
@@ -130,16 +136,16 @@
                 transform: translateX(-10px);
                 opacity: 0;
               }
-            }
+            });
 
             .content {
               display: flex;
               flex-direction: column;
               gap: 2px;
               padding: 10px 10px;
-              background-color: constants.$origin-color;
+              background-color: @origin-color;
               border-radius: 8px;
-              box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1);
+              box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
 
               .item {
                 border-radius: 8px;
@@ -157,13 +163,13 @@
                   }
 
                   &.active {
-                    color: constants.$origin-color;
-                    background-color: constants.$main-color;
+                    color: @origin-color;
+                    background-color: @main-color;
                   }
                 }
 
                 &:hover a:not(.active) {
-                  background-color: constants.$background-color;
+                  background-color: @background-color;
                 }
               }
             }
@@ -172,14 +178,14 @@
           &:hover {
             > .menu-bt {
               a:not(.active) {
-                background-color: constants.$background-color;
+                background-color: @background-color;
               }
             }
 
             .submenu {
               visibility: visible;
               animation: 0.3s ease;
-              @include mixins.unique-keyframes {
+              .keyframes(f6yTZM, {
                 0% {
                   transform: translateX(-10px);
                   opacity: 0;
@@ -188,20 +194,16 @@
                   transform: translateX(0);
                   opacity: 1;
                 }
-              }
+              });
             }
           }
         }
       }
 
-      .delete {
-        .menu-bt {
-          border: {
-            width: 1px;
-            color: constants.$error-secondary-color;
-            style: dashed;
-          };
-          filter: drop-shadow(1000px 0 0 constants.$error-secondary-color);
+      :global .delete {
+        :local .menuBt {
+          border: 1px dashed @error-secondary-color;
+          filter: drop-shadow(1000px 0 0 @error-secondary-color);
           transform: translate(-1000px);
 
           > a {
@@ -215,11 +217,7 @@
   .separate {
     height: 0;
     margin: 10px 5px;
-    border: {
-      width: 1px;
-      color: constants.$font-secondary-color;
-      style: solid;
-    };
+    border: 1px solid @font-secondary-color;
     opacity: 0.4;
   }
 
@@ -228,9 +226,9 @@
     align-items: center;
     font-weight: bold;
     padding: 8px 14px;
-    color: constants.$main-color;
+    color: @main-color;
 
-    .icon-user {
+    .iconUser {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -238,9 +236,9 @@
       margin-left: 4px;
       width: 36px;
       height: 36px;
-      font-size: constants.$SIZE_ICON_XS;
-      border: 2px constants.$font-secondary-color solid;
-      color: constants.$font-secondary-color;
+      font-size: @SIZE_ICON_XS;
+      border: 2px @font-secondary-color solid;
+      color: @font-secondary-color;
       border-radius: 50%;
       overflow: hidden;
       cursor: pointer;
@@ -255,26 +253,26 @@
       flex: 1;
       padding-left: 10px;
       font-size: 1.4em;
-      color: constants.$font-main-color;
+      color: @font-main-color;
       user-select: text;
       overflow: hidden;
       text-overflow: ellipsis;
 
       a {
-        color: constants.$main-color;
+        color: @main-color;
         text-decoration: underline;
       }
     }
 
-    .icon-exit {
-      font-size: constants.$SIZE_ICON_XS;
-      color: constants.$error-color;
+    .iconExit {
+      font-size: @SIZE_ICON_XS;
+      color: @error-color;
       padding: 6px 10px;
       cursor: pointer;
 
       &:hover {
         border-radius: 8px;
-        background-color: constants.$background-color;
+        background-color: @background-color;
       }
     }
   }
@@ -283,7 +281,7 @@
     width: 68px !important;
 
     .title {
-      .icon-box {
+      .iconBox {
         span {
           transform: rotateZ(360deg);
           transition: all .3s;
@@ -295,14 +293,14 @@
       }
     }
 
-    .menu-bt {
+    .menuBt {
       .text, .extend {
         display: none;
       }
     }
 
     .submenu {
-      .menu-bt {
+      .menuBt {
         .text {
           display: block;
         }
@@ -316,7 +314,7 @@
         display: none;
       }
 
-      .submenu-exit {
+      .submenuExit {
         display: none;
         position: absolute;
         padding-left: 6px;
@@ -327,14 +325,14 @@
         .content {
           padding: 8px;
           border-radius: 8px;
-          background-color: constants.$origin-color;
+          background-color: @origin-color;
 
-          .icon-exit {
+          .iconExit {
             padding: 4px 8px;
 
             &:hover {
               border-radius: 8px;
-              background-color: constants.$background-color;
+              background-color: @background-color;
             }
           }
         }
@@ -344,10 +342,10 @@
         }
       }
 
-      &:hover .submenu-exit {
+      &:hover .submenuExit {
         display: block;
         animation: 0.3s ease;
-        @include mixins.unique-keyframes {
+        .keyframes(mfdCZC, {
           0% {
             transform: translateX(-10px);
             opacity: 0;
@@ -356,7 +354,7 @@
             transform: translateX(0);
             opacity: 1;
           }
-        }
+        });
       }
     }
   }

src/renderer/src/assets/css/components/common/url-card.module.less

@@ -1,9 +1,9 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=component-url-card] {
+.root {
   cursor: pointer;
 
-  .url-card {
+  .urlCard {
     width: 100%;
     height: 100%;
     margin-top: 80px;
@@ -16,8 +16,8 @@
     }
 
     .icon {
-      color: constants.$production-color;
-      font-size: constants.$SIZE_ICON_XL;
+      color: @production-color;
+      font-size: @SIZE_ICON_XL;
     }
 
     .text {

src/renderer/src/assets/css/components/dnd/drag-handle.module.less

@@ -1,4 +1,4 @@
-[data-component=component-drag-handle] {
+.root {
   background-color: transparent;
   color: unset;
   cursor: grab;

src/renderer/src/assets/css/components/dnd/drop-mask.module.less

@@ -0,0 +1,22 @@
+@import "@/assets/css/constants";
+
+.root {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0 10px 10px;
+  background-color: @origin-color;
+
+  .dropMaskBorder {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    border: 2px dashed @font-secondary-color;
+    border-radius: 8px;
+    font-size: 1.8em;
+  }
+}

src/renderer/src/assets/css/components/dnd/drop-mask.scss

@@ -1,30 +0,0 @@
-@use "@/assets/css/constants" as constants;
-
-[data-component=component-drop-mask] {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  padding: {
-    left: 10px;
-    right: 10px;
-    bottom: 10px;
-  };
-  background-color: constants.$origin-color;
-
-  .drop-mask-border {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    border: {
-      width: 2px;
-      color: constants.$font-secondary-color;
-      style: dashed;
-      radius: 8px;
-    };
-    font-size: 1.8em;
-  }
-}

src/renderer/src/assets/css/components/system/setting-card.module.less

@@ -1,17 +1,17 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=component-setting-card] {
-  .settings-card {
+.root {
+  .settingsCard {
     padding: 20px;
     gap: 20px;
-    color: constants.$main-color;
+    color: @main-color;
 
     > .head {
       align-items: center;
       gap: 5px;
 
       .icon {
-        font-size: constants.$SIZE_ICON_MD;
+        font-size: @SIZE_ICON_MD;
         flex: 0 0 auto;
       }
 
@@ -22,11 +22,11 @@
 
       :nth-child(n+3) {
         flex: 0 0 auto;
-        color: constants.$font-main-color;
+        color: @font-main-color;
       }
 
-      .bt-save {
-        color: constants.$main-color;
+      .btSave {
+        color: @main-color;
       }
     }
   }

src/renderer/src/assets/css/components/system/statistics-card.module.less

@@ -1,17 +1,17 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=component-statistics-card] {
-  .statistics-card {
+.root {
+  .statisticsCard {
     padding: 20px;
     gap: 20px;
 
     > .head {
       align-items: center;
       gap: 5px;
-      color: constants.$main-color;
+      color: @main-color;
 
       .icon {
-        font-size: constants.$SIZE_ICON_MD;
+        font-size: @SIZE_ICON_MD;
         flex: 0 0 auto;
       }
 
@@ -22,22 +22,22 @@
 
       :nth-child(n+3) {
         flex: 0 0 auto;
-        color: constants.$font-main-color;
+        color: @font-main-color;
       }
     }
 
-    .card-content {
+    :global .card-content {
       font-size: 1.1em;
       padding: 0 10px;
       gap: 10px;
 
       .key, .value-percent {
         flex: 0 0 auto;
-        color: constants.$font-main-color;
+        color: @font-main-color;
       }
 
       .value {
-        color: constants.$font-secondary-color;
+        color: @font-secondary-color;
         overflow: hidden;
 
         > * {

src/renderer/src/assets/css/components/tools/load-more-card.module.less

@@ -1,9 +1,9 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=component-load-more-card] {
+.root {
   cursor: pointer;
 
-  .load-more-card {
+  .loadMoreCard {
     width: 100%;
     height: 100%;
     text-align: center;
@@ -11,8 +11,8 @@
 
     .icon {
       display: flex;
-      font-size: constants.$SIZE_ICON_XXL;
-      color: constants.$production-color;
+      font-size: @SIZE_ICON_XXL;
+      color: @production-color;
       align-items: center;
       transform: translateY(-20px);
     }

src/renderer/src/assets/css/components/tools/local-card.module.less

@@ -1,10 +1,10 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=component-local-card] {
+.root {
   height: 100%;
   cursor: pointer;
 
-  .local-card {
+  .localCard {
     width: 100%;
     height: 100%;
     text-align: center;
@@ -34,7 +34,7 @@
         transition: all 0.2s;
 
         > *:hover {
-          color: constants.$font-secondary-color;
+          color: @font-secondary-color;
         }
       }
     }
@@ -43,30 +43,26 @@
       display: flex;
       padding-top: 10px;
       padding-bottom: 20px;
-      color: constants.$production-color;
-      font-size: constants.$SIZE_ICON_XL;
+      color: @production-color;
+      font-size: @SIZE_ICON_XL;
       justify-content: center;
 
       img {
-        width: constants.$SIZE_ICON_XL;
+        width: @SIZE_ICON_XL;
       }
     }
 
     .info {
       padding-top: 20px;
 
-      .tool-name {
+      .toolName {
         font-weight: bolder;
         font-size: 1.6em;
       }
 
-      .tool-desc {
-        margin: {
-          top: 10px;
-          left: auto;
-          right: auto;
-        };
-        color: constants.$font-secondary-color;
+      .toolDesc {
+        margin: 10px auto 0;
+        color: @font-secondary-color;
         overflow: hidden;
         text-overflow: ellipsis;
         max-height: 40px;
@@ -89,7 +85,7 @@
         }
       }
 
-      .author-name {
+      .authorName {
         display: flex;
         align-items: center;
       }
@@ -108,3 +104,9 @@
     }
   }
 }
+
+.androidQrcode {
+  align-items: center;
+  transform: translateX(-16px);
+  gap: 20px;
+}

src/renderer/src/assets/css/components/tools/repository-card.module.less

@@ -0,0 +1,94 @@
+@import "@/assets/css/constants";
+
+.root {
+  height: 100%;
+
+  .repositoryCard {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    align-items: center;
+
+    > * {
+      display: block;
+      flex: 0 0 auto;
+    }
+
+    .header {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      padding: 10px;
+
+      :global .version-select {
+        width: 9em;
+        margin-right: auto;
+      }
+
+      >:not(:global .version-select) {
+        font-size: 1.6em;
+      }
+    }
+
+    .icon {
+      display: flex;
+      padding-top: 10px;
+      padding-bottom: 20px;
+      color: @production-color;
+      font-size: @SIZE_ICON_XL;
+      justify-content: center;
+
+      img {
+        width: @SIZE_ICON_XL;
+      }
+    }
+
+    .info {
+      transform: translateY(40px);
+      transition: all 0.1s ease;
+
+      .toolName {
+        font-weight: bolder;
+        font-size: 1.6em;
+      }
+    }
+
+    &:hover {
+      .info {
+        transform: translateY(-10px);
+        transition: all 0.2s ease;
+      }
+    }
+
+    .operation {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      padding-bottom: 20px;
+      gap: 4px;
+      width: 70%;
+      flex-direction: column;
+      align-items: center;
+      visibility: hidden;
+      opacity: 0;
+
+      > *, .edit > * {
+        width: 100%;
+      }
+
+      .edit {
+        > * {
+          > :first-child {
+            flex: 1;
+          }
+        }
+      }
+    }
+
+    &:hover .operation {
+      visibility: visible;
+      opacity: 1;
+      transition: all 0.4s ease;
+    }
+  }
+}

src/renderer/src/assets/css/components/tools/repository-card.scss

@@ -1,51 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=component-repository-card] {
-  height: 100%;
-
-  .repository-card {
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    align-items: center;
-
-    > * {
-      display: block;
-      flex: 0 0 auto;
-    }
-
-    .header {
-      display: flex;
-      width: 100%;
-      align-items: center;
-      padding: 10px;
-
-      .version-select {
-        width: 9em;
-        margin-right: auto;
-      }
-
-      >:not(.version-select) {
-        font-size: 1.6em;
-      }
-    }
-
-    .icon {
-      display: flex;
-      padding-top: 10px;
-      padding-bottom: 20px;
-      color: constants.$production-color;
-      font-size: constants.$SIZE_ICON_XL;
-      justify-content: center;
-
-      img {
-        width: constants.$SIZE_ICON_XL;
-      }
-    }
-
-    .tool-name {
-      font-weight: bolder;
-      font-size: 1.6em;
-    }
-  }
-}

src/renderer/src/assets/css/components/tools/store-card.module.less

@@ -1,10 +1,10 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=component-store-card] {
+.root {
   height: 100%;
   cursor: pointer;
 
-  .store-card {
+  .storeCard {
     width: 100%;
     height: 100%;
     text-align: center;
@@ -35,7 +35,7 @@
         z-index: 100;
 
         > *:hover {
-          color: constants.$font-secondary-color;
+          color: @font-secondary-color;
         }
       }
     }
@@ -44,30 +44,26 @@
       display: flex;
       padding-top: 10px;
       padding-bottom: 20px;
-      color: constants.$production-color;
-      font-size: constants.$SIZE_ICON_XL;
+      color: @production-color;
+      font-size: @SIZE_ICON_XL;
       justify-content: center;
 
       img {
-        width: constants.$SIZE_ICON_XL;
+        width: @SIZE_ICON_XL;
       }
     }
 
     .info {
       padding-top: 20px;
 
-      .tool-name {
+      .toolName {
         font-weight: bolder;
         font-size: 1.6em;
       }
 
-      .tool-desc {
-        margin: {
-          top: 10px;
-          left: auto;
-          right: auto;
-        };
-        color: constants.$font-secondary-color;
+      .toolDesc {
+        margin: 10px auto 0;
+        color: @font-secondary-color;
         overflow: hidden;
         text-overflow: ellipsis;
         max-height: 40px;
@@ -78,6 +74,7 @@
     .author {
       display: flex;
       margin-top: auto;
+      padding-top: 8px;
       flex-direction: row;
       justify-content: end;
       padding-bottom: 10px;
@@ -90,7 +87,7 @@
         }
       }
 
-      .author-name {
+      .authorName {
         display: flex;
         align-items: center;
       }
@@ -109,3 +106,9 @@
     }
   }
 }
+
+.androidQrcode {
+  align-items: center;
+  transform: translateX(-16px);
+  gap: 20px;
+}

src/renderer/src/assets/css/constants.less

@@ -0,0 +1,22 @@
+@origin-color: white;
+@production-color: #4E47BB;
+@main-color: @production-color;
+@secondary-color: #BAB8E5;
+@error-color: #FF4D4F;
+@error-secondary-color: #FF7875;
+@blue-color: #1677FF;
+@active-color: #EBECFD;
+@background-color: #F5F5F5;
+@font-main-color: #4D4D4D;
+@font-secondary-color: #9E9E9E;
+@focus-color: #DDDDDD;
+@divide-color: rgba(204, 204, 204, 0.66);
+@border-color: rgba(204, 204, 204, 0.33);
+@url-color: rgba(102, 102, 102, .8);
+@url-active-color: #ccc;
+@SIZE_ICON_XS: 16px;
+@SIZE_ICON_SM: 20px;
+@SIZE_ICON_MD: 24px;
+@SIZE_ICON_LG: 32px;
+@SIZE_ICON_XL: 64px;
+@SIZE_ICON_XXL: 96px;

src/renderer/src/assets/css/constants.scss

@@ -1,22 +0,0 @@
-$origin-color: white;
-$production-color: #4E47BB;
-$main-color: $production-color;
-$secondary-color: #BAB8E5;
-$error-color: #FF4D4F;
-$error-secondary-color: #FF7875;
-$blue-color: #1677FF;
-$active-color: #EBECFD;
-$background-color: #F5F5F5;
-$font-main-color: #4D4D4D;
-$font-secondary-color: #9E9E9E;
-$focus-color: #DDDDDD;
-$divide-color: rgba(204, 204, 204, 0.66);
-$border-color: rgba(204, 204, 204, 0.33);
-$url-color: rgba(102, 102, 102, .8);
-$url-active-color: #ccc;
-$SIZE_ICON_XS: 16px;
-$SIZE_ICON_SM: 20px;
-$SIZE_ICON_MD: 24px;
-$SIZE_ICON_LG: 32px;
-$SIZE_ICON_XL: 64px;
-$SIZE_ICON_XXL: 96px;

src/renderer/src/assets/css/mixins.less

@@ -0,0 +1,15 @@
+.keyframes(@animationName, @content) {
+  animation-name: @animationName;
+  @-webkit-keyframes @animationName {
+    @content();
+  }
+  @-moz-keyframes @animationName {
+    @content();
+  }
+  @-o-keyframes @animationName {
+    @content();
+  }
+  @keyframes @animationName {
+    @content();
+  }
+}

src/renderer/src/assets/css/pages/sign.scss

@@ -1,149 +0,0 @@
-@use "@/assets/css/mixins" as mixins;
-@use "@/assets/css/constants" as constants;
-
-[data-component=sign] {
-  background-color: #D2D0DD;
-  user-select: none;
-
-  a {
-    cursor: pointer;
-  }
-
-  a:hover {
-    color: constants.$production-color;
-  }
-
-  .sign-box {
-    position: relative;
-    background-color: constants.$origin-color;
-    width: 900px;
-    height: 600px;
-    overflow: hidden;
-    border-radius: 12px;
-
-    .left, .right {
-      opacity: 1;
-      transition: all 1s ease;
-
-      > * {
-        width: 100%;
-        height: 100%;
-      }
-
-      &.hidden {
-        opacity: 0;
-      }
-
-      > * {
-        .title {
-          margin-bottom: 20px;
-          transform: translateY(-10px);
-
-          .primary {
-            font-size: 2.4em;
-            font-weight: bolder;
-            color: constants.$production-color;
-          }
-
-          .secondary {
-            font-size: 1.2em;
-          }
-        }
-
-        .form {
-          width: 300px;
-          font-size: 14px;
-
-          button {
-            font-weight: bolder;
-          }
-
-          .addition {
-            justify-content: space-between;
-            margin-bottom: 14px;
-
-            > * {
-              flex: 0 0 auto;
-            }
-          }
-
-          .footer {
-            text-align: center;
-
-            a {
-              color: constants.$production-color;
-            }
-          }
-        }
-      }
-
-      .verify {
-        a {
-          color: constants.$production-color;
-          font-weight: bolder;
-        }
-      }
-
-      .sign-up, .sign-in, .forget {
-        .footer {
-          a {
-            font-weight: bolder;
-          }
-        }
-      }
-
-      .sign-up, .forget {
-        .retry, .success {
-          margin-bottom: 16px;
-
-          a {
-            font-weight: bolder;
-          }
-        }
-      }
-    }
-
-    .cover {
-      position: absolute;
-      height: 100%;
-      width: 50%;
-      background-color: #F3F4F8;
-      transition: all 0.8s ease;
-
-      .ball-box {
-        position: relative;
-        overflow: hidden;
-
-        background-color: #F1F2F7;
-
-        .ball {
-          position: absolute;
-          width: 128px;
-          height: 128px;
-          background-color: constants.$production-color;
-          border-radius: 50%;
-          bottom: 0;
-          left: 50%;
-          transform: translateX(-50%) translateY(50%);
-        }
-      }
-
-      .mask {
-        transform: rotateZ(180deg);
-        filter: blur(12px);
-
-        .ball {
-          width: 140px;
-          height: 140px;
-        }
-      }
-    }
-
-    &.switch {
-      .cover {
-        transform: translateX(100%);
-        transition: all 0.8s ease;
-      }
-    }
-  }
-}

src/renderer/src/assets/css/pages/sign/forget.module.less

@@ -0,0 +1,40 @@
+@import "@/assets/css/constants";
+
+.root {
+  .title {
+    margin-bottom: 20px;
+    transform: translateY(-10px);
+
+    .primary {
+      font-size: 2.4em;
+      font-weight: bolder;
+      color: @production-color;
+    }
+
+    .secondary {
+      font-size: 1.2em;
+    }
+  }
+
+  .form {
+    width: 300px;
+    font-size: 14px;
+
+    .retry, .success {
+      margin-bottom: 16px;
+
+      a {
+        font-weight: bolder;
+      }
+    }
+
+    .footer {
+      text-align: center;
+
+      a {
+        color: @production-color;
+        font-weight: bolder;
+      }
+    }
+  }
+}

src/renderer/src/assets/css/pages/sign/index.module.less

@@ -0,0 +1,80 @@
+@import "@/assets/css/constants";
+
+.root {
+  background-color: #D2D0DD;
+  user-select: none;
+
+  a {
+    cursor: pointer;
+  }
+
+  a:hover {
+    color: @production-color;
+  }
+
+  .signBox {
+    position: relative;
+    background-color: @origin-color;
+    width: 900px;
+    height: 600px;
+    overflow: hidden;
+    border-radius: 12px;
+
+    .left, .right {
+      opacity: 1;
+      transition: all 1s ease;
+
+      > * {
+        width: 100%;
+        height: 100%;
+      }
+
+      &.hidden {
+        opacity: 0;
+      }
+    }
+
+    .cover {
+      position: absolute;
+      height: 100%;
+      width: 50%;
+      background-color: #F3F4F8;
+      transition: all 0.8s ease;
+
+      .ballBox {
+        position: relative;
+        overflow: hidden;
+
+        background-color: #F1F2F7;
+
+        .ball {
+          position: absolute;
+          width: 128px;
+          height: 128px;
+          background-color: @production-color;
+          border-radius: 50%;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%) translateY(50%);
+        }
+      }
+
+      .mask {
+        transform: rotateZ(180deg);
+        filter: blur(12px);
+
+        .ball {
+          width: 140px;
+          height: 140px;
+        }
+      }
+    }
+
+    &.switch {
+      .cover {
+        transform: translateX(100%);
+        transition: all 0.8s ease;
+      }
+    }
+  }
+}

src/renderer/src/assets/css/pages/sign/sign-in.module.less

@@ -0,0 +1,41 @@
+@import "@/assets/css/constants";
+
+.root {
+  .title {
+    margin-bottom: 20px;
+    transform: translateY(-10px);
+
+    .primary {
+      font-size: 2.4em;
+      font-weight: bolder;
+      color: @production-color;
+    }
+
+    .secondary {
+      font-size: 1.2em;
+    }
+  }
+
+  .form {
+    width: 300px;
+    font-size: 14px;
+
+    .addition {
+      justify-content: space-between;
+      margin-bottom: 14px;
+
+      a {
+        flex: 0 0 auto;
+      }
+    }
+
+    .footer {
+      text-align: center;
+
+      a {
+        color: @production-color;
+        font-weight: bolder;
+      }
+    }
+  }
+}

src/renderer/src/assets/css/pages/sign/sign-up.module.less

@@ -0,0 +1,40 @@
+@import "@/assets/css/constants";
+
+.root {
+  .title {
+    margin-bottom: 20px;
+    transform: translateY(-10px);
+
+    .primary {
+      font-size: 2.4em;
+      font-weight: bolder;
+      color: @production-color;
+    }
+
+    .secondary {
+      font-size: 1.2em;
+    }
+  }
+
+  .form {
+    width: 300px;
+    font-size: 14px;
+
+    .retry, .success {
+      margin-bottom: 16px;
+
+      a {
+        font-weight: bolder;
+      }
+    }
+
+    .footer {
+      text-align: center;
+
+      a {
+        color: @production-color;
+        font-weight: bolder;
+      }
+    }
+  }
+}

src/renderer/src/assets/css/pages/sign/verify.module.less

@@ -0,0 +1,28 @@
+@import "@/assets/css/constants";
+
+.root {
+  .title {
+    margin-bottom: 20px;
+    transform: translateY(-10px);
+
+    .primary {
+      font-size: 2.4em;
+      font-weight: bolder;
+      color: @production-color;
+    }
+
+    .secondary {
+      font-size: 1.2em;
+    }
+  }
+
+  .form {
+    width: 300px;
+    font-size: 14px;
+
+    a {
+      color: @production-color;
+      font-weight: bolder;
+    }
+  }
+}

src/renderer/src/assets/css/pages/system-framework.module.less

@@ -0,0 +1,13 @@
+@import "@/assets/css/constants";
+
+.root {
+  .leftPanel {
+    background-color: @origin-color;
+  }
+
+  .rightPanel {
+    flex: 1;
+    width: 0;
+    background-color: @background-color;
+  }
+}

src/renderer/src/assets/css/pages/system-framework.scss

@@ -1,14 +0,0 @@
-@use "@/assets/css/constants" as constants;
-@use "@/assets/css/mixins" as mixins;
-
-[data-component=system-framework] {
-  .left-panel {
-    background-color: constants.$origin-color;
-  }
-
-  .right-panel {
-    flex: 1;
-    width: 0;
-    background-color: constants.$background-color;
-  }
-}

src/renderer/src/assets/css/pages/system/index.module.less

@@ -1,13 +1,11 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=system] {
-  .root-content {
+.root {
+  .rootContent {
     padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: flex-start;
 
-    > .card-box {
+    > div {
       width: 200px;
       height: 320px;
       flex: 0 0 auto;

src/renderer/src/assets/css/pages/system/settings.module.less

@@ -0,0 +1,14 @@
+.root {
+  .rootContent {
+    padding: 20px;
+    gap: 20px;
+
+    .rootCol {
+      gap: 20px;
+
+      > * {
+        flex: 0 0 auto;
+      }
+    }
+  }
+}

src/renderer/src/assets/css/pages/system/settings.scss

@@ -1,16 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=system-settings] {
-  .root-content {
-    padding: 20px;
-    gap: 20px;
-
-    .root-col {
-      gap: 20px;
-
-      > * {
-        flex: 0 0 auto;
-      }
-    }
-  }
-}

src/renderer/src/assets/css/pages/system/statistics.module.less

@@ -1,13 +1,11 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=system-statistics] {
-  .root-content {
+.root {
+  .rootContent {
     padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: center;
 
-    > .card-box {
+    > div {
       width: 48%;
       flex: 0 0 auto;
     }

src/renderer/src/assets/css/pages/system/tools/base.module.less

@@ -1,15 +1,15 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=system-tools-base] {
-  .root-content {
+.root {
+  .rootContent {
     padding: 20px;
     gap: 10px;
     height: 100%;
     width: 100%;
 
-    .has-edited::after {
+    .hasEdited::after {
       content: '*';
-      color: constants.$font-secondary-color;
+      color: @font-secondary-color;
     }
 
     >*:first-child {
@@ -23,14 +23,14 @@
       height: calc(100vh - 40px);
     }
 
-    .close-editor-btn {
+    .closeEditorBtn {
       display: flex;
       justify-content: center;
       align-items: center;
       position: absolute;
       top: 10px;
       right: 10px;
-      background-color: constants.$font-secondary-color;
+      background-color: @font-secondary-color;
       width: 32px;
       height: 32px;
       border-radius: 50%;
@@ -38,6 +38,7 @@
       opacity: 0.6;
       box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
       cursor: pointer;
+      z-index: 1000;
     }
   }
 }

src/renderer/src/assets/css/pages/system/tools/code.module.less

@@ -1,12 +1,12 @@
-[data-component=system-tools-code] {
+.root {
   padding: 20px;
 
-  .card-box {
+  .rootBox {
     width: 100%;
     height: 100%;
   }
 
-  .draggable-content {
+  .draggableContent {
     position: fixed;
     inset-inline-end: 48px;
     inset-block-end: 48px;

src/renderer/src/assets/css/pages/system/tools/execute.module.less

@@ -1,7 +1,7 @@
-[data-component=tools-source] {
+.root {
   padding: 20px;
 
-  .card-box {
+  .rootBox {
     width: 100%;
     height: 100%;
   }

src/renderer/src/assets/css/pages/system/tools/template.module.less

@@ -1,15 +1,15 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=system-tools-template] {
-  .root-content {
+.root {
+  .rootContent {
     padding: 20px;
     gap: 10px;
     height: 100%;
     width: 100%;
 
-    .has-edited::after {
+    .hasEdited::after {
       content: '*';
-      color: constants.$font-secondary-color;
+      color: @font-secondary-color;
     }
 
     >*:first-child {
@@ -23,14 +23,14 @@
       height: calc(100vh - 40px);
     }
 
-    .close-editor-btn {
+    .closeEditorBtn {
       display: flex;
       justify-content: center;
       align-items: center;
       position: absolute;
       top: 10px;
       right: 10px;
-      background-color: constants.$font-secondary-color;
+      background-color: @font-secondary-color;
       width: 32px;
       height: 32px;
       border-radius: 50%;
@@ -38,6 +38,7 @@
       opacity: 0.6;
       box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
       cursor: pointer;
+      z-index: 1000;
     }
   }
 }

src/renderer/src/assets/css/pages/tools-framework.module.less

@@ -0,0 +1,21 @@
+@import "@/assets/css/constants";
+
+.root {
+  .leftPanel {
+    background-color: @origin-color;
+
+    .menuDroppable {
+      display: flex;
+      position: relative;
+      min-height: 0;
+      flex: 1;
+      width: 100%;
+    }
+  }
+
+  .rightPanel {
+    flex: 1;
+    width: 0;
+    background-color: @background-color;
+  }
+}

src/renderer/src/assets/css/pages/tools-framework.scss

@@ -1,22 +0,0 @@
-@use "@/assets/css/constants" as constants;
-@use "@/assets/css/mixins" as mixins;
-
-[data-component=tools-framework] {
-  .left-panel {
-    background-color: constants.$origin-color;
-
-    .menu-droppable {
-      display: flex;
-      position: relative;
-      min-height: 0;
-      flex: 1;
-      width: 100%;
-    }
-  }
-
-  .right-panel {
-    flex: 1;
-    width: 0;
-    background-color: constants.$background-color;
-  }
-}

src/renderer/src/assets/css/pages/tools/create.module.less

@@ -0,0 +1,52 @@
+@import "@/assets/css/constants";
+
+.root {
+  padding: 20px;
+  gap: 20px;
+  height: 100%;
+  width: 100%;
+
+  > * {
+    gap: 10px;
+    width: 0;
+
+    .title {
+      flex: 0 0 auto;
+      height: 40px;
+
+      > * {
+        height: 100%;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.6em;
+        color: @production-color;
+        font-weight: bolder;
+      }
+    }
+
+    .config {
+      .configContent {
+        padding: 20px;
+
+        .createBt {
+          width: 100%;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .preview {
+      display: flex;
+      position: relative;
+      justify-content: center;
+      align-items: center;
+
+      .noPreview {
+        font-weight: bolder;
+        color: @font-secondary-color;
+        font-size: 1.4em;
+      }
+    }
+  }
+}

src/renderer/src/assets/css/pages/tools/create.scss

@@ -1,61 +0,0 @@
-@use "@/assets/css/mixins" as mixins;
-@use "@/assets/css/constants" as constants;
-
-[data-component=tools-create] {
-  .root-content {
-    padding: 20px;
-    gap: 20px;
-    height: 100%;
-    width: 100%;
-
-    > * {
-      gap: 10px;
-      width: 0;
-
-      .title {
-        flex: 0 0 auto;
-        height: 40px;
-
-        > * {
-          height: 100%;
-          width: 100%;
-          justify-content: center;
-          align-items: center;
-          font-size: 1.6em;
-          color: constants.$production-color;
-          font-weight: bolder;
-        }
-      }
-
-      .config {
-        .config-content {
-          padding: 20px;
-
-          .help {
-            margin-left: 6px;
-            color: constants.$font-main-color;
-            font-size: 0.8em;
-          }
-
-          .create-bt {
-            width: 100%;
-            font-weight: bold;
-          }
-        }
-      }
-
-      .preview {
-        display: flex;
-        position: relative;
-        justify-content: center;
-        align-items: center;
-
-        .no-preview {
-          font-weight: bolder;
-          color: constants.$font-secondary-color;
-          font-size: 1.4em;
-        }
-      }
-    }
-  }
-}

src/renderer/src/assets/css/pages/tools/edit.module.less

@@ -1,11 +1,12 @@
-[data-component=tools-edit] {
+.root {
   padding: 20px;
 
-  .card-box {
+  .rootBox {
     height: 100%;
     width: 100%;
 
-    .root-content {
+    .rootContent {
+      position: relative;
       width: 100%;
       height: 100%;
 
@@ -13,7 +14,7 @@
         width: 0;
       }
 
-      .draggable-mask {
+      .draggableMask {
         position: absolute;
         width: 100%;
         height: 100%;
@@ -21,7 +22,7 @@
     }
   }
 
-  .draggable-content {
+  .draggableContent {
     position: fixed;
     inset-inline-end: 48px;
     inset-block-end: 48px;

src/renderer/src/assets/css/pages/tools/index.module.less

@@ -0,0 +1,54 @@
+@import "@/assets/css/constants";
+
+.root {
+  padding: 20px;
+  gap: 20px;
+
+  .ownContent {
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > div {
+      width: 180px;
+      min-height: 290px;
+      flex: 0 0 auto;
+    }
+
+
+    & > :first-child {
+      cursor: pointer;
+    }
+  }
+
+  .favoriteDivider {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+    margin-top: 20px;
+
+    :first-child, :last-child {
+      height: 0;
+      border: 1px dashed @divide-color;
+    }
+
+    .dividerText {
+      flex: 0 0 auto;
+      font-size: 1.2em;
+      color: @font-secondary-color;
+    }
+  }
+
+  .starContent {
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > div {
+      width: 180px;
+      min-height: 290px;
+      flex: 0 0 auto;
+    }
+  }
+}

src/renderer/src/assets/css/pages/tools/index.scss

@@ -1,110 +0,0 @@
-@use "@/assets/css/mixins" as mixins;
-@use '@/assets/css/constants' as constants;
-
-[data-component=tools] {
-  .root-content {
-    padding: 20px;
-    gap: 20px;
-
-    .own-content {
-      gap: 20px;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-
-      > .card-box, > div {
-        width: 180px;
-        height: 290px;
-        flex: 0 0 auto;
-      }
-
-
-      & > :first-child {
-        cursor: pointer;
-
-        .info {
-          padding-top: 50px;
-        }
-      }
-
-      & > :not(:first-child) {
-        .info {
-          transform: translateY(40px);
-          transition: all 0.1s ease;
-        }
-
-        .operation {
-          display: flex;
-          flex: 1;
-          justify-content: center;
-          padding-bottom: 20px;
-          gap: 4px;
-          width: 70%;
-          flex-direction: column;
-          align-items: center;
-          visibility: hidden;
-          opacity: 0;
-
-          > *, .edit > * {
-            width: 100%;
-          }
-
-          .edit {
-            > * {
-              > :first-child {
-                flex: 1;
-              }
-            }
-          }
-        }
-      }
-
-      & > :not(:first-child):hover {
-        .info {
-          transform: translateY(-10px);
-          transition: all 0.2s ease;
-        }
-
-        .operation {
-          visibility: visible;
-          opacity: 1;
-          transition: all 0.4s ease;
-        }
-      }
-    }
-
-    .favorite-divider {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 20px;
-      margin-top: 20px;
-
-      :first-child, :last-child {
-        height: 0;
-        border: {
-          width: 1px;
-          color: constants.$divide-color;
-          style: dashed;
-        };
-      }
-
-      .divider-text {
-        flex: 0 0 auto;
-        font-size: 1.2em;
-        color: constants.$font-secondary-color;
-      }
-    }
-
-    .star-content {
-      gap: 20px;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-
-      > .card-box, > div {
-        width: 180px;
-        height: 290px;
-        flex: 0 0 auto;
-      }
-    }
-  }
-}

src/renderer/src/assets/css/pages/tools/local.module.less

@@ -1,6 +1,6 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=tools-store] {
+.root {
   .search {
     display: flex;
     position: sticky;
@@ -20,7 +20,7 @@
     }
   }
 
-  .root-content {
+  .rootContent {
     padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
@@ -28,22 +28,16 @@
 
     > div {
       width: 180px;
-      height: 290px;
+      min-height: 290px;
       flex: 0 0 auto;
     }
 
-    .no-tool {
+    .noTool {
       display: flex;
       justify-content: center;
       font-size: 1.4em;
       font-weight: bolder;
-      color: constants.$font-secondary-color;
+      color: @font-secondary-color;
     }
   }
-
-  .android-qrcode {
-    align-items: center;
-    transform: translateX(-16px);
-    gap: 20px;
-  }
 }

src/renderer/src/assets/css/pages/tools/source.module.less

@@ -1,7 +1,7 @@
-[data-component=system-tools-execute] {
+.root {
   padding: 20px;
 
-  .card-box {
+  .rootBox {
     width: 100%;
     height: 100%;
   }

src/renderer/src/assets/css/pages/tools/store.module.less

@@ -1,6 +1,6 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=tools-local] {
+.root {
   .search {
     display: flex;
     position: sticky;
@@ -20,7 +20,7 @@
     }
   }
 
-  .root-content {
+  .rootContent {
     padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
@@ -28,22 +28,16 @@
 
     > div {
       width: 180px;
-      height: 290px;
+      min-height: 290px;
       flex: 0 0 auto;
     }
 
-    .no-tool {
+    .noTool {
       display: flex;
       justify-content: center;
       font-size: 1.4em;
       font-weight: bolder;
-      color: constants.$font-secondary-color;
+      color: @font-secondary-color;
     }
   }
-
-  .android-qrcode {
-    align-items: center;
-    transform: translateX(-16px);
-    gap: 20px;
-  }
 }

src/renderer/src/assets/css/pages/tools/user.module.less

@@ -1,14 +1,9 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=tools-store-user] .root-content {
-  padding: {
-    top: 80px;
-    left: 20px;
-    right: 20px;
-    bottom: 20px;
-  };
+.root {
+  padding: 80px 20px 20px 20px;
 
-  .root-box {
+  .rootBox {
     width: 100%;
     height: 100%;
     overflow: visible;
@@ -24,7 +19,7 @@
         flex: 0 0 auto;
       }
 
-      .avatar-box {
+      .avatarBox {
         background-color: white;
         padding: 4px;
         border-radius: 50%;
@@ -35,11 +30,8 @@
         }
       }
 
-      .info-name {
-        margin: {
-          top: 20px;
-          left: 24px;
-        };
+      .infoName {
+        margin: 20px 0 0 24px;
         justify-content: center;
 
         > * {
@@ -49,7 +41,7 @@
         .nickname {
           font-size: 2.4em;
           font-weight: bolder;
-          color: constants.$production-color;
+          color: @production-color;
         }
 
         .url {
@@ -70,24 +62,18 @@
 
       > div {
         width: 180px;
-        height: 290px;
+        min-height: 290px;
         flex: 0 0 auto;
       }
 
-      .no-tool {
+      .noTool {
         display: flex;
         justify-content: center;
         margin-bottom: 20px;
         font-size: 1.2em;
         font-weight: bolder;
-        color: constants.$font-secondary-color;
+        color: @font-secondary-color;
       }
     }
   }
-
-  .android-qrcode {
-    align-items: center;
-    transform: translateX(-16px);
-    gap: 20px;
-  }
 }

src/renderer/src/assets/css/pages/tools/view.module.less

@@ -1,7 +1,7 @@
-[data-component=tools-view] {
+.root {
   padding: 20px;
 
-  .card-box {
+  .rootBox {
     position: relative;
     height: 100%;
     width: 100%;

src/renderer/src/assets/css/pages/user-framework.module.less

@@ -0,0 +1,13 @@
+@import "@/assets/css/constants";
+
+.root {
+  .leftPanel {
+    background-color: @origin-color;
+  }
+
+  .rightPanel {
+    flex: 1;
+    width: 0;
+    background-color: @background-color;
+  }
+}

src/renderer/src/assets/css/pages/user-framework.scss

@@ -1,14 +0,0 @@
-@use "@/assets/css/constants" as constants;
-@use "@/assets/css/mixins" as mixins;
-
-[data-component=user-framework] {
-  .left-panel {
-    background-color: constants.$origin-color;
-  }
-
-  .right-panel {
-    flex: 1;
-    width: 0;
-    background-color: constants.$background-color;
-  }
-}

src/renderer/src/assets/css/pages/user/index.module.less

@@ -1,14 +1,9 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
-[data-component=user] .root-content {
-  padding: {
-    top: 80px;
-    left: 20px;
-    right: 20px;
-    bottom: 20px;
-  };
+.root {
+  padding: 80px 20px 20px 20px;
 
-  .card-box {
+  .content {
     width: 100%;
     height: 100%;
     overflow: visible;
@@ -17,20 +12,14 @@
     padding-bottom: 20px;
 
     > :not(:first-child) {
-      padding: {
-        left: 60px;
-        right: 60px;
-      };
+      padding: 0 60px;
     }
 
     .divide {
       height: 1px;
       width: calc(100% - 120px);
-      background-color: constants.$divide-color;
-      margin: {
-        left: 60px;
-        right: 60px;
-      };
+      background-color: @divide-color;
+      margin: 0 60px;
     }
 
     .info {
@@ -41,7 +30,7 @@
         flex: 0 0 auto;
       }
 
-      .avatar-box {
+      .avatarBox {
         background-color: white;
         padding: 4px;
         border-radius: 50%;
@@ -52,11 +41,8 @@
         }
       }
 
-      .info-name {
-        margin: {
-          top: 20px;
-          left: 24px;
-        };
+      .infoName {
+        margin: 20px 0 0 24px;
         justify-content: center;
 
         > * {
@@ -66,7 +52,7 @@
         .nickname {
           font-size: 2.4em;
           font-weight: bolder;
-          color: constants.$production-color;
+          color: @production-color;
         }
 
         .url {
@@ -83,9 +69,7 @@
       align-items: center;
 
       .content {
-        padding: {
-          bottom: 30px;
-        };
+        padding-bottom: 30px;
         justify-content: space-between;
         align-items: center;
         width: 100%;
@@ -105,13 +89,10 @@
       }
     }
 
-    .table {
+    .profile, .security {
       gap: 24px;
-
-      padding: {
-        top: 30px;
-        bottom: 20px;
-      };
+      padding-top: 30px;
+      padding-bottom: 20px;
 
       .row {
         > * {

src/renderer/src/components/Playground/CodeEditor/Editor/ata.ts

@@ -34,19 +34,39 @@ export interface TypeHelper {
 export const createATA = async (): Promise<TypeHelper> => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const ts = await import('https://esm.sh/typescript@5.3.3')
+    const ts = await import('https://esm.sh/typescript@5.6.3')
+
+    const maxConcurrentRequests = 50
+    let activeRequests = 0
+    const requestQueue: Array<() => void> = []
+    const fetchWithQueue = (input: RequestInfo | URL, init?: RequestInit | undefined) =>
+        new Promise<Response>((resolve, reject) => {
+            const attemptRequest = () => {
+                if (activeRequests < maxConcurrentRequests) {
+                    activeRequests++
+                    fetch(input, init)
+                        .then((response) => resolve(response))
+                        .catch((error) => reject(error))
+                        .finally(() => {
+                            activeRequests--
+                            if (requestQueue.length > 0) {
+                                requestQueue.shift()?.()
+                            }
+                        })
+                } else {
+                    requestQueue.push(attemptRequest)
+                }
+            }
+            attemptRequest()
+        })
+
     const ata = setupTypeAcquisition({
         projectName: 'monaco-ts',
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         typescript: ts,
         logger: console,
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
         fetcher: (input, init) => {
             try {
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                return fetch(input, init)
+                return fetchWithQueue(input, init)
             } catch (error) {
                 console.error('Error fetching data:', error)
             }

src/renderer/src/components/Playground/CodeEditor/Editor/hooks.ts

@@ -12,8 +12,8 @@ export const useEditor = () => {
         const selection = input.options ? input.options.selection : null
         if (selection) {
             if (
-                typeof selection.endLineNumber === 'number' &&
-                typeof selection.endColumn === 'number'
+                typeof selection?.endLineNumber === 'number' &&
+                typeof selection?.endColumn === 'number'
             ) {
                 editor.setSelection(selection)
                 editor.revealRangeInCenter(selection, ScrollType.Immediate)

src/renderer/src/components/Playground/CodeEditor/Editor/index.module.less

@@ -1,31 +1,24 @@
-@mixin keyframes($animationName) {
-  @-webkit-keyframes #{$animationName} {
-    @content
+.keyframes(@animationName, @content) {
+  animation-name: @animationName;
+  @-webkit-keyframes @animationName {
+    @content();
   }
-  @-moz-keyframes #{$animationName} {
-    @content
+  @-moz-keyframes @animationName {
+    @content();
   }
-  @-o-keyframes #{$animationName} {
-    @content
+  @-o-keyframes @animationName {
+    @content();
   }
-  @keyframes #{$animationName} {
-    @content
+  @keyframes @animationName {
+    @content();
   }
 }
 
-@mixin unique-keyframes {
-  $animationName: unique-id();
-  animation-name: $animationName;
-  @include keyframes($animationName) {
-    @content
-  }
-}
-
-[data-component=playground-code-editor-editor] {
+.root {
   position: relative;
   height: 0;
 
-  .monaco-editor-light {
+  :global .monaco-editor-light {
     height: 100%;
     overflow: hidden;
     background-color: var(--border);
@@ -47,7 +40,7 @@
     }
   }
 
-  .monaco-editor-vs-dark {
+  :global .monaco-editor-vs-dark {
     height: 100%;
     overflow: hidden;
     background-color: var(--border);
@@ -69,7 +62,7 @@
     }
   }
 
-  .playground-code-editor-loading {
+  .playgroundCodeEditorLoading {
     position: absolute;
     top: 0;
     right: 0;
@@ -77,15 +70,13 @@
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    border: {
-      top: 2px #666 solid;
-      bottom: 2px #ddd solid;
-      left: 2px #ddd solid;
-      right: 2px #ddd solid;
-    };
+    border-top: 2px #666 solid;
+    border-right: 2px #ddd solid;
+    border-bottom: 2px #ddd solid;
+    border-left: 2px #ddd solid;
     animation: .6s linear infinite;
 
-    @include unique-keyframes {
+    .keyframes(fUHD7o, {
       0% {
         transform: rotateZ(0);
       }
@@ -93,6 +84,6 @@
       100% {
         transform: rotateZ(360deg);
       }
-    }
+    });
   }
-}
+}

src/renderer/src/components/Playground/CodeEditor/Editor/index.tsx

@@ -1,12 +1,17 @@
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
-import '@/components/Playground/CodeEditor/Editor/editor.scss'
+import styles from '@/components/Playground/CodeEditor/Editor/index.module.less'
 import '@/components/Playground/CodeEditor/Editor/loader'
 import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'
 import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks'
 import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
 
+export interface ExtraLib {
+    path: string
+    content: string
+}
+
 interface EditorProps {
     tsconfig?: ITsconfig
     files?: IFiles
@@ -16,6 +21,7 @@ interface EditorProps {
     options?: IEditorOptions
     theme?: ITheme
     onJumpFile?: (fileName: string) => void
+    extraLibs?: ExtraLib[]
 }
 
 const Editor = ({
@@ -26,7 +32,8 @@ const Editor = ({
     theme,
     onChange,
     options,
-    onJumpFile
+    onJumpFile,
+    extraLibs = []
 }: EditorProps) => {
     const editorRef = useRef<editor.IStandaloneCodeEditor>()
     const monacoRef = useRef<Monaco>()
@@ -70,19 +77,23 @@ const Editor = ({
 
         monacoRef.current = monaco
 
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
         editor['_codeEditorService'].doOpenEditor = function (
             editor: editor.IStandaloneCodeEditor,
             input: { options: { selection: Selection }; resource: { path: string } }
         ) {
             const path = input.resource.path
-            if (!path.startsWith('/node_modules/')) {
+            if (!['/lib.dom.d.ts', '/node_modules/'].some((item) => path.startsWith(item))) {
                 onJumpFile?.(path.replace('/', ''))
                 doOpenEditor(editor, input)
             }
         }
 
         jsxSyntaxHighlightRef.current = loadJsxSyntaxHighlight(editor, monaco)
+        extraLibs.forEach((item) =>
+            monaco.languages.typescript.typescriptDefaults.addExtraLib(item.content, item.path)
+        )
 
         void autoLoadExtraLib(editor, monaco, file.value, onWatch)
     }
@@ -101,7 +112,7 @@ const Editor = ({
 
     return (
         <>
-            <div data-component={'playground-code-editor-editor'}>
+            <div className={styles.root}>
                 <MonacoEditor
                     theme={theme}
                     path={file.name}
@@ -118,7 +129,7 @@ const Editor = ({
                         readOnly: readonly
                     }}
                 />
-                {total > 0 && !finished && <div className={'playground-code-editor-loading'} />}
+                {total > 0 && !finished && <div className={styles.playgroundCodeEditorLoading} />}
             </div>
         </>
     )

src/renderer/src/components/Playground/CodeEditor/FileSelector/Item.tsx

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react'
+import styles from '@/components/Playground/CodeEditor/FileSelector/item.module.less'
 
 interface ItemProps {
     className?: string
@@ -109,11 +110,11 @@ const Item = ({
 
     return (
         <div
-            className={`tab-item${active ? ' active' : ''}${className ? ` ${className}` : ''}`}
+            className={`${styles.root}${active ? ` ${styles.active}` : ''}${className ? ` ${className}` : ''}`}
             onClick={handleOnClick}
         >
             {isCreating ? (
-                <div className={'tab-item-input'}>
+                <div className={styles.tabItemInput}>
                     <input
                         ref={inputRef}
                         value={fileName}
@@ -122,13 +123,13 @@ const Item = ({
                         onKeyDown={handleKeyDown}
                         spellCheck={'false'}
                     />
-                    <span className={'tab-item-input-mask'}>{fileName}</span>
+                    <span className={styles.tabItemInputMask}>{fileName}</span>
                 </div>
             ) : (
                 <>
                     <div onDoubleClick={handleOnDoubleClick}>{value}</div>
                     {!readonly && (
-                        <div className={'tab-item-close'} onClick={handleOnDelete}>
+                        <div className={styles.tabItemClose} onClick={handleOnDelete}>
                             <IconOxygenClose />
                         </div>
                     )}

src/renderer/src/components/Playground/CodeEditor/FileSelector/file-selector.scss

@@ -1,86 +0,0 @@
-[data-component=playground-file-selector].tab{
-  display: flex;
-  flex: 0 0 auto;
-  height: 40px;
-
-  .multiple {
-    flex: 1;
-    width: 0;
-
-    .tab-content {
-      height: 40px;
-      align-items: flex-end;
-      gap: 2px;
-      margin-left: 10px;
-
-      .tab-item-add {
-        padding: 0 12px;
-      }
-
-      .tabs-margin-right {
-        height: 100%;
-
-        > * {
-          height: 100%;
-          width: 10px;
-        }
-      }
-    }
-  }
-
-  .sticky {
-    display: flex;
-    flex: 0 0 auto;
-    align-items: flex-end;
-    margin-right: 10px;
-  }
-
-  .tab-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    height: 30px;
-    padding: 0 20px;
-    border: 1px solid #f0f0f0;
-    background-color: rgba(0, 0, 0, 0.04);
-    border-radius: 6px 6px 0 0;
-    cursor: pointer;
-
-    .tab-item-input {
-      position: relative;
-      min-width: 40px;
-      transform: translateY(1px);
-
-      .tab-item-input-mask {
-        display: inline-block;
-        color: transparent;
-      }
-      input {
-        position: absolute;
-        background-color: transparent;
-        width: 100%;
-        font-size: 1em;
-      }
-    }
-
-    .tab-item-close {
-      transform: translateX(10px);
-
-      :hover {
-        fill: #888;
-      }
-
-      svg {
-        height: 8px;
-        fill: #666;
-      }
-    }
-
-    &.active {
-      background-color: white;
-      border-bottom: none;
-    }
-  }
-
-}

src/renderer/src/components/Playground/CodeEditor/FileSelector/index.module.less

@@ -0,0 +1,37 @@
+.root{
+  display: flex;
+  flex: 0 0 auto;
+  height: 40px;
+
+  .multiple {
+    flex: 1;
+    width: 0;
+
+    .tabContent {
+      height: 40px;
+      align-items: flex-end;
+      gap: 2px;
+      margin-left: 10px;
+
+      .tabItemAdd {
+        padding: 0 12px;
+      }
+
+      .tabsMarginRight {
+        height: 100%;
+
+        > * {
+          height: 100%;
+          width: 10px;
+        }
+      }
+    }
+  }
+
+  .sticky {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: flex-end;
+    margin-right: 10px;
+  }
+}

src/renderer/src/components/Playground/CodeEditor/FileSelector/index.tsx

@@ -1,4 +1,4 @@
-import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
+import styles from '@/components/Playground/CodeEditor/FileSelector/index.module.less'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles } from '@/components/Playground/shared'
@@ -164,8 +164,8 @@ const FileSelector = ({
 
     return (
         <>
-            <div data-component={'playground-file-selector'} className={'tab'}>
-                <div className={'multiple'}>
+            <div className={styles.root}>
+                <div className={styles.multiple}>
                     <HideScrollbar
                         ref={hideScrollbarRef}
                         autoHideWaitingTime={800}
@@ -173,7 +173,7 @@ const FileSelector = ({
                         scrollbarAsidePadding={0}
                         scrollbarEdgePadding={0}
                     >
-                        <FlexBox direction={'horizontal'} className={'tab-content'}>
+                        <FlexBox direction={'horizontal'} className={styles.tabContent}>
                             {tabs.map((item, index) => (
                                 <Item
                                     key={index + item}
@@ -192,20 +192,20 @@ const FileSelector = ({
                             ))}
                             {!readonly && (
                                 <Item
-                                    className={'tab-item-add'}
+                                    className={styles.tabItemAdd}
                                     value={'+'}
                                     onClick={addTab}
                                     readonly
                                 />
                             )}
-                            <div className={'tabs-margin-right'}>
+                            <div className={styles.tabsMarginRight}>
                                 <div />
                             </div>
                         </FlexBox>
                     </HideScrollbar>
                 </div>
                 {(files[IMPORT_MAP_FILE_NAME] || files[TS_CONFIG_FILE_NAME]) && (
-                    <div className={'sticky'}>
+                    <div className={styles.sticky}>
                         {files[TS_CONFIG_FILE_NAME] && (
                             <Item
                                 value={'tsconfig.json'}

src/renderer/src/components/Playground/CodeEditor/FileSelector/item.module.less

@@ -0,0 +1,47 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  height: 30px;
+  padding: 0 20px;
+  border: 1px solid #f0f0f0;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-radius: 6px 6px 0 0;
+  cursor: pointer;
+
+  .tabItemInput {
+    position: relative;
+    min-width: 40px;
+    transform: translateY(1px);
+
+    .tabItemInputMask {
+      display: inline-block;
+      color: transparent;
+    }
+    input {
+      position: absolute;
+      background-color: transparent;
+      width: 100%;
+      font-size: 1em;
+    }
+  }
+
+  .tabItemClose {
+    transform: translateX(10px);
+
+    :hover {
+      fill: #888;
+    }
+
+    svg {
+      height: 8px;
+      fill: #666;
+    }
+  }
+
+  &.active {
+    background-color: white;
+    border-bottom: none;
+  }
+}

src/renderer/src/components/Playground/CodeEditor/code-editor.scss

@@ -1,5 +0,0 @@
-[data-component=playground-code-editor] {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}

src/renderer/src/components/Playground/CodeEditor/index.module.less

@@ -0,0 +1,15 @@
+.root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .errorMessage {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    background-color: #FF4D4FAA;
+    padding: 5px 10px;
+    font-size: 1.2em;
+  }
+}

src/renderer/src/components/Playground/CodeEditor/index.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import '@/components/Playground/CodeEditor/code-editor.scss'
+import styles from '@/components/Playground/CodeEditor/index.module.less'
 import FlexBox from '@/components/common/FlexBox'
 import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import {
@@ -9,7 +9,7 @@ import {
     TS_CONFIG_FILE_NAME
 } from '@/components/Playground/files'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
-import Editor from '@/components/Playground/CodeEditor/Editor'
+import Editor, { ExtraLib } from '@/components/Playground/CodeEditor/Editor'
 
 interface CodeEditorProps {
     theme?: ITheme
@@ -21,6 +21,7 @@ interface CodeEditorProps {
     notRemovable?: string[]
     selectedFileName?: string
     options?: IEditorOptions
+    extraLibs?: ExtraLib[]
     onSelectedFileChange?: (fileName: string) => void
     onAddFile?: (fileName: string, files: IFiles) => void
     onRemoveFile?: (fileName: string, files: IFiles) => void
@@ -44,6 +45,7 @@ const CodeEditor = ({
     onRenameFile,
     onChangeFileContent,
     onError,
+    extraLibs,
     ...props
 }: CodeEditorProps) => {
     const filteredFilesName = getFileNameList(files).filter(
@@ -120,7 +122,7 @@ const CodeEditor = ({
 
     return (
         <>
-            <FlexBox data-component={'playground-code-editor'}>
+            <FlexBox className={styles.root}>
                 {showFileSelector && (
                     <FileSelector
                         files={files}
@@ -153,8 +155,9 @@ const CodeEditor = ({
                     }
                     onChange={handleOnChangeFileContent}
                     onJumpFile={handleOnChangeSelectedFile}
+                    extraLibs={extraLibs}
                 />
-                {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
+                {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
             </FlexBox>
         </>
     )

src/renderer/src/components/Playground/Output/Preview/Render.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react'
-import '@/components/Playground/Output/Preview/render.scss'
+import styles from '@/components/Playground/Output/Preview/render.module.less'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
 import HideScrollbar from '@/components/common/HideScrollbar'
@@ -174,31 +174,33 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
     return mobileMode ? (
         <>
             <HideScrollbar
-                className={'mobile-mode-background'}
+                className={styles.mobileModeRoot}
                 isShowVerticalScrollbar
                 isShowHorizontalScrollbar
                 autoHideWaitingTime={1000}
             >
-                <div className={'mobile-mode-content'} style={{ zoom }}>
-                    <div className={`device${isRotate ? ' rotate' : ''}`}>
-                        <div className={`device-header${isRotate ? ' rotate' : ''}`} />
+                <div className={styles.mobileModeContent} style={{ zoom }}>
+                    <div className={`${styles.device}${isRotate ? ` ${styles.rotate}` : ''}`}>
                         <div
-                            className={`device-content${isRotate ? ' rotate' : ''}`}
+                            className={`${styles.deviceHeader}${isRotate ? ` ${styles.rotate}` : ''}`}
+                        />
+                        <div
+                            className={`${styles.deviceContent}${isRotate ? ` ${styles.rotate}` : ''}`}
                             style={{
                                 width: isRotate
-                                    ? devices.find((value) => value.name === selectedDevice)
-                                          ?.height ?? 915
-                                    : devices.find((value) => value.name === selectedDevice)
-                                          ?.width ?? 412,
+                                    ? (devices.find((value) => value.name === selectedDevice)
+                                          ?.height ?? 915)
+                                    : (devices.find((value) => value.name === selectedDevice)
+                                          ?.width ?? 412),
                                 height: isRotate
-                                    ? devices.find((value) => value.name === selectedDevice)
-                                          ?.width ?? 412
-                                    : devices.find((value) => value.name === selectedDevice)
-                                          ?.height ?? 915
+                                    ? (devices.find((value) => value.name === selectedDevice)
+                                          ?.width ?? 412)
+                                    : (devices.find((value) => value.name === selectedDevice)
+                                          ?.height ?? 915)
                             }}
                         >
                             <iframe
-                                data-component={'playground-output-preview-render'}
+                                className={styles.renderRoot}
                                 key={iframeKey}
                                 ref={iframeRef}
                                 src={iframeUrl}
@@ -207,19 +209,21 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                                 allow={'clipboard-read; clipboard-write'}
                             />
                         </div>
-                        <div className={`device-footer${isRotate ? ' rotate' : ''}`} />
+                        <div
+                            className={`${styles.deviceFooter}${isRotate ? ` ${styles.rotate}` : ''}`}
+                        />
                     </div>
                 </div>
             </HideScrollbar>
 
-            <div className={'switch-device'}>
+            <div className={styles.switchDevice}>
                 <IconOxygenMobile fill={COLOR_FONT_MAIN} />
                 <select value={selectedDevice} onChange={handleOnChangeDevice}>
                     {devices.map((value) => (
                         <option value={value.name}>{value.name}</option>
                     ))}
                 </select>
-                <div className={'rotate-device'} title={'旋转屏幕'} onClick={handleOnRotateDevice}>
+                <div title={'旋转屏幕'} onClick={handleOnRotateDevice}>
                     {isRotate ? (
                         <IconOxygenRotateRight fill={COLOR_FONT_MAIN} />
                     ) : (
@@ -227,7 +231,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                     )}
                 </div>
             </div>
-            <div className={'switch-zoom'}>
+            <div className={styles.switchZoom}>
                 <IconOxygenZoom fill={COLOR_FONT_MAIN} />
                 <input
                     type={'range'}
@@ -241,12 +245,12 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
         </>
     ) : (
         <iframe
-            data-component={'playground-output-preview-render'}
+            className={styles.renderRoot}
             key={iframeKey}
             ref={iframeRef}
             src={iframeUrl}
             onLoad={() => setIsLoaded(true)}
-            sandbox="allow-downloads allow-forms allow-modals allow-scripts"
+            sandbox={'allow-downloads allow-forms allow-modals allow-scripts'}
             allow={'clipboard-read; clipboard-write'}
         />
     )

src/renderer/src/components/Playground/Output/Preview/iframe.html

@@ -38,7 +38,7 @@
     }
 
     if (data?.type === "SCALE") {
-      document.getElementById("root").style.zoom = data.data.zoom
+      document.getElementById("root").style.zoom = data.data.zoom;
     }
   });
 </script>

src/renderer/src/components/Playground/Output/Preview/index.module.less

@@ -1,9 +1,9 @@
-[data-component=playground-preview] {
+.root {
   display: flex;
   position: relative;
   height: 0;
 
-  .playground-error-message {
+  .errorMessage {
     position: absolute;
     bottom: 0;
     width: 100%;

src/renderer/src/components/Playground/Output/Preview/index.tsx

@@ -1,4 +1,4 @@
-import '@/components/Playground/Output/Preview/preview.scss'
+import styles from '@/components/Playground/Output/Preview/index.module.less'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
 import Render from '@/components/Playground/Output/Preview/Render'
@@ -32,7 +32,7 @@ const Preview = ({
         Compiler.compile(files, importMap, entryPoint)
             .then((result) => {
                 setCompiledCode(
-                    `${preExpansionCode}\n${result.outputFiles[0].text}\n${postExpansionCode}`
+                    `(()=>{${preExpansionCode}})();\n(()=>{${result.outputFiles[0].text}})();\n(()=>{${postExpansionCode}})();`
                 )
                 setErrorMsg('')
             })
@@ -42,9 +42,9 @@ const Preview = ({
     }, [files, Compiler, importMap, entryPoint])
 
     return (
-        <div data-component={'playground-preview'}>
+        <div className={styles.root}>
             <Render iframeKey={iframeKey} compiledCode={compiledCode} mobileMode={mobileMode} />
-            {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
+            {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
         </div>
     )
 }

src/renderer/src/components/Playground/Output/Preview/render.module.less

@@ -1,16 +1,14 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=playground-output-preview-render] {
+.renderRoot {
   border: none;
   height: 100%;
   width: 100%;
   flex: 1;
 }
 
-.mobile-mode-background {
+.mobileModeRoot {
   background-color: rgba(204, 204, 204, 0.66);
 
-  .mobile-mode-content {
+  .mobileModeContent {
     padding: 80px;
   }
 
@@ -26,7 +24,7 @@
       flex-direction: row;
     }
 
-    .device-header {
+    .deviceHeader {
       margin: 20px auto;
       width: 60px;
       height: 10px;
@@ -40,7 +38,7 @@
       }
     }
 
-    .device-content {
+    .deviceContent {
       margin: 0 10px;
       background-color: white;
 
@@ -49,7 +47,7 @@
       }
     }
 
-    .device-footer {
+    .deviceFooter {
       margin: 20px auto;
       width: 40px;
       height: 40px;
@@ -63,7 +61,7 @@
   }
 }
 
-.switch-device, .switch-zoom {
+.switchDevice, .switchZoom {
   display: flex;
   position: absolute;
   top: 10px;
@@ -71,10 +69,10 @@
   gap: 4px;
 }
 
-.switch-device {
+.switchDevice {
   left: 10px;
 }
 
-.switch-zoom {
+.switchZoom {
   right: 10px;
 }

src/renderer/src/components/Playground/Output/Transform/index.module.less

@@ -0,0 +1,13 @@
+.root {
+  position: relative;
+
+  .errorMessage {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    background-color: #FF4D4FAA;
+    padding: 5px 10px;
+    font-size: 1.2em;
+  }
+}

src/renderer/src/components/Playground/Output/Transform/index.tsx

@@ -1,8 +1,8 @@
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
-import '@/components/Playground/Output/Transform/transform.scss'
+import styles from '@/components/Playground/Output/Transform/index.module.less'
 import { IFile, ITheme } from '@/components/Playground/shared'
-import { cssToJs, jsonToJs, addReactImport } from '@/components/Playground/files'
+import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files'
 import Compiler from '@/components/Playground/compiler'
 import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
 
@@ -16,12 +16,7 @@ const Transform = ({ file, theme }: OutputProps) => {
     const [errorMsg, setErrorMsg] = useState('')
 
     const compile = (code: string, loader: Loader) => {
-        let _code = code
-        if (['jsx', 'tsx'].includes(loader)) {
-            _code = addReactImport(code)
-        }
-
-        Compiler?.transform(_code, loader)
+        Compiler?.transform(code, loader)
             .then((value) => {
                 setCompiledCode(value.code)
                 setErrorMsg('')
@@ -44,10 +39,10 @@ const Transform = ({ file, theme }: OutputProps) => {
                         compile(code, 'jsx')
                         break
                     case 'css':
-                        setCompiledCode(cssToJs(file))
+                        setCompiledCode(cssToJsFromFile(file))
                         break
                     case 'json':
-                        setCompiledCode(jsonToJs(file))
+                        setCompiledCode(jsonToJsFromFile(file))
                         break
                     case 'xml':
                         setCompiledCode(code)
@@ -62,14 +57,14 @@ const Transform = ({ file, theme }: OutputProps) => {
     }, [file, Compiler])
 
     return (
-        <div data-component={'playground-transform'}>
+        <div className={styles.root}>
             <MonacoEditor
                 theme={theme}
                 language={'javascript'}
                 value={compiledCode}
                 options={{ ...MonacoEditorConfig, readOnly: true }}
             />
-            {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
+            {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
         </div>
     )
 }

src/renderer/src/components/Playground/Output/Transform/transform.scss

@@ -1,3 +0,0 @@
-[data-component=playground-transform] {
-  position: relative;
-}

src/renderer/src/components/Playground/Output/index.tsx

@@ -26,7 +26,7 @@ const Output = ({
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (
-        <FlexBox data-component={'playground-code-output'}>
+        <FlexBox>
             <Playground.CodeEditor.FileSelector
                 files={{
                     Preview: { name: 'Preview', language: 'json', value: '' },

src/renderer/src/components/Playground/compiler.ts

@@ -1,9 +1,23 @@
-import esbuild, { Loader, OnLoadArgs, Plugin, PluginBuild } from 'esbuild-wasm'
+import esbuild, {
+    Loader,
+    OnLoadArgs,
+    OnLoadResult,
+    OnResolveArgs,
+    OnResolveResult,
+    Plugin,
+    PluginBuild
+} from 'esbuild-wasm'
 import localforage from 'localforage'
 import axios from 'axios'
 import esbuildWasmUrl from 'esbuild-wasm/esbuild.wasm?url'
-import { IFiles, IImportMap } from '@/components/Playground/shared'
-import { cssToJs, jsonToJs, addReactImport } from '@/components/Playground/files'
+import { IFile, IFiles, IImportMap } from '@/components/Playground/shared'
+import {
+    addReactImport,
+    cssToJs,
+    cssToJsFromFile,
+    jsonToJs,
+    jsonToJsFromFile
+} from '@/components/Playground/files'
 
 class Compiler {
     private init = false
@@ -27,198 +41,273 @@ class Compiler {
         }
     }
 
-    transform = (code: string, loader: Loader) =>
-        new Promise<void>((resolve) => {
-            if (this.init) {
-                resolve()
-                return
-            }
-            const timer = setInterval(() => {
-                if (this.init) {
-                    clearInterval(timer)
-                    resolve()
+    private waitInit = async () => {
+        if (!this.init) {
+            await new Promise<void>((resolve) => {
+                const checkInit = () => {
+                    if (this.init) {
+                        resolve()
+                    } else {
+                        setTimeout(checkInit, 100)
+                    }
                 }
-            }, 100)
-        }).then(() => {
-            return esbuild.transform(code, { loader })
-        })
-
-    compile = (files: IFiles, importMap: IImportMap, entryPoint: string) =>
-        new Promise<void>((resolve) => {
-            if (this.init) {
-                resolve()
-                return
-            }
-            const timer = setInterval(() => {
-                if (this.init) {
-                    clearInterval(timer)
-                    resolve()
-                }
-            }, 100)
-        }).then(() => {
-            return esbuild.build({
-                bundle: true,
-                entryPoints: [entryPoint],
-                format: 'esm',
-                metafile: true,
-                write: false,
-                plugins: [this.fileResolverPlugin(files, importMap, entryPoint)]
+                checkInit()
             })
+        }
+    }
+
+    transform = async (code: string, loader: Loader) => {
+        await this.waitInit()
+        return esbuild.transform(code, { loader, target: 'es2015' })
+    }
+
+    compile = async (files: IFiles, importMap: IImportMap, entryPoint: string) => {
+        await this.waitInit()
+        return esbuild.build({
+            bundle: true,
+            entryPoints: [entryPoint],
+            format: 'esm',
+            target: 'es2015',
+            metafile: true,
+            write: false,
+            plugins: [this.fileResolverPlugin(files, importMap)]
         })
+    }
+
+    compileCss = async (cssCode: string, basePath: string) => {
+        await this.waitInit()
+        return esbuild.build({
+            bundle: true,
+            entryPoints: [basePath],
+            write: false,
+            plugins: [this.cssCodeResolverPlugin(cssCode, basePath)]
+        })
+    }
 
     stop = () => {
         void esbuild.stop()
     }
 
-    private fileResolverPlugin = (
-        files: IFiles,
-        importMap: IImportMap,
-        entryPoint: string
-    ): Plugin => {
-        return {
-            name: 'file-resolver-plugin',
-            setup: (build: PluginBuild) => {
-                build.onResolve({ filter: /.*/ }, (args: esbuild.OnResolveArgs) => {
-                    if (entryPoint === args.path) {
-                        return {
-                            namespace: 'OxygenToolbox',
-                            path: args.path
-                        }
+    private fileResolverPlugin = (files: IFiles, importMap: IImportMap): Plugin => ({
+        name: 'file-resolver-plugin',
+        setup: (build: PluginBuild) => {
+            build.onResolve({ filter: /.*/ }, (args: OnResolveArgs): OnResolveResult => {
+                if (args.kind === 'entry-point') {
+                    return {
+                        namespace: 'oxygen',
+                        path: args.path
                     }
-                    if (args.path.startsWith('./') && files[args.path.substring(2)]) {
-                        return {
-                            namespace: 'OxygenToolbox',
-                            path: args.path.substring(2)
-                        }
-                    }
-                    if (args.path.startsWith('./') && files[`${args.path.substring(2)}.tsx`]) {
-                        return {
-                            namespace: 'OxygenToolbox',
-                            path: `${args.path.substring(2)}.tsx`
-                        }
-                    }
-                    if (args.path.startsWith('./') && files[`${args.path.substring(2)}.jsx`]) {
-                        return {
-                            namespace: 'OxygenToolbox',
-                            path: `${args.path.substring(2)}.jsx`
-                        }
-                    }
-                    if (args.path.startsWith('./') && files[`${args.path.substring(2)}.ts`]) {
-                        return {
-                            namespace: 'OxygenToolbox',
-                            path: `${args.path.substring(2)}.ts`
-                        }
-                    }
-                    if (args.path.startsWith('./') && files[`${args.path.substring(2)}.js`]) {
-                        return {
-                            namespace: 'OxygenToolbox',
-                            path: `${args.path.substring(2)}.js`
-                        }
-                    }
-                    if (/\.\/.*\.css/.test(args.path) && !args.resolveDir) {
-                        throw Error(`Css '${args.path}' not found`)
-                    }
-
-                    if (/^https?:\/\/.*/.test(args.path)) {
-                        return {
-                            namespace: 'default',
-                            path: args.path
-                        }
-                    }
-
-                    if (
-                        args.path.includes('./') ||
-                        args.path.includes('../') ||
-                        args.path.startsWith('/')
-                    ) {
-                        return {
-                            namespace: 'default',
-                            path: new URL(args.path, args.resolveDir.substring(1)).href
-                        }
-                    }
-
-                    const path = importMap.imports[args.path]
-
-                    if (!path) {
-                        throw Error(`Import '${args.path}' not found in Import Map`)
-                    }
-
+                }
+                if (/^https?:\/\/.*/.test(args.path)) {
                     return {
                         namespace: 'default',
-                        path
+                        path: args.path
                     }
-                })
+                }
 
-                build.onLoad({ filter: /.*\.css$/ }, (args: OnLoadArgs) => {
-                    const contents = cssToJs(files[args.path])
-                    return {
-                        loader: 'js',
-                        contents
-                    }
-                })
-
-                build.onLoad({ filter: /.*\.json$/ }, (args: OnLoadArgs) => {
-                    const contents = jsonToJs(files[args.path])
-                    return {
-                        loader: 'js',
-                        contents
-                    }
-                })
-
-                build.onLoad({ filter: /.*/ }, async (args: OnLoadArgs) => {
-                    if (entryPoint === args.path) {
+                if (
+                    args.path.startsWith('./') &&
+                    (!args.resolveDir.length || args.resolveDir in files)
+                ) {
+                    const suffix = ['', '.tsx', '.jsx', '.ts', '.js'].find((suffix) => {
+                        return files[`${args.path.substring(2)}${suffix}`]
+                    })
+                    if (suffix !== undefined) {
                         return {
-                            loader: 'tsx',
-                            contents: addReactImport(files[entryPoint].value)
+                            namespace: 'oxygen',
+                            path: `${args.path.substring(2)}${suffix}`
                         }
                     }
-
-                    if (files[args.path]) {
-                        const contents = addReactImport(files[args.path].value)
-                        if (args.path.endsWith('.jsx')) {
-                            return {
-                                loader: 'jsx',
-                                contents
-                            }
-                        }
-                        if (args.path.endsWith('.ts')) {
-                            return {
-                                loader: 'ts',
-                                contents
-                            }
-                        }
-                        if (args.path.endsWith('.js')) {
-                            return {
-                                loader: 'js',
-                                contents
-                            }
-                        }
-                        return {
-                            loader: 'tsx',
-                            contents
-                        }
+                }
+                if (['./', '../', '/'].some((prefix) => args.path.startsWith(prefix))) {
+                    return {
+                        namespace: 'default',
+                        path: new URL(args.path, args.resolveDir.substring(1)).href
                     }
+                }
 
-                    const cached = await this.fileCache.getItem<esbuild.OnLoadResult>(args.path)
-
-                    if (cached) {
-                        return cached
+                let path = importMap[args.path]
+                let tempPath = args.path
+                while (!path && tempPath.includes('/')) {
+                    tempPath = tempPath.substring(0, tempPath.lastIndexOf('/'))
+                    if (importMap[tempPath]) {
+                        const suffix = args.path.replace(tempPath, '')
+                        const importUrl = new URL(importMap[tempPath])
+                        path = `${importUrl.origin}${importUrl.pathname}${suffix}${importUrl.search}`
                     }
-
-                    const axiosResponse = await axios.get<string>(args.path)
-                    const result: esbuild.OnLoadResult = {
-                        loader: 'jsx',
-                        contents: axiosResponse.data,
-                        resolveDir: (axiosResponse.request as XMLHttpRequest).responseURL
+                }
+                if (!path) {
+                    throw Error(`Import '${args.path}' not found in Import Map`)
+                }
+                const pathUrl = new URL(path)
+                const externals = pathUrl.searchParams.get('external')?.split(',') ?? []
+                Object.keys(importMap).forEach((item) => {
+                    if (!(item in externals)) {
+                        externals.push(item)
                     }
-
-                    await this.fileCache.setItem(args.path, result)
-
-                    return result
                 })
-            }
+                pathUrl.searchParams.set('external', externals.join(','))
+                return {
+                    namespace: 'default',
+                    path: pathUrl.href
+                }
+            })
+
+            build.onLoad({ filter: /.*\.css$/ }, (args: OnLoadArgs): OnLoadResult => {
+                const contents = cssToJsFromFile(files[args.path])
+                return {
+                    loader: 'js',
+                    contents
+                }
+            })
+
+            build.onLoad({ filter: /.*\.json$/ }, (args: OnLoadArgs): OnLoadResult => {
+                const contents = jsonToJsFromFile(files[args.path])
+                return {
+                    loader: 'js',
+                    contents
+                }
+            })
+
+            build.onLoad(
+                { namespace: 'oxygen', filter: /.*/ },
+                (args: OnLoadArgs): OnLoadResult | undefined => {
+                    let file: IFile | undefined
+
+                    void ['', '.tsx', '.jsx', '.ts', '.js'].forEach((suffix) => {
+                        file = file || files[`${args.path}${suffix}`]
+                    })
+                    if (file) {
+                        return {
+                            loader: (() => {
+                                switch (file.language) {
+                                    case 'javascript':
+                                        return 'jsx'
+                                    default:
+                                        return 'tsx'
+                                }
+                            })(),
+                            contents: addReactImport(file.value)
+                        }
+                    }
+                }
+            )
+
+            build.onLoad({ filter: /.*/ }, async (args: OnLoadArgs): Promise<OnLoadResult> => {
+                const cached = await this.fileCache.getItem<OnLoadResult>(args.path)
+
+                if (cached) {
+                    return cached
+                }
+
+                const axiosResponse = await axios.get<ArrayBuffer>(args.path, {
+                    responseType: 'arraybuffer'
+                })
+                const contentType = axiosResponse.headers['content-type'] as string
+                const utf8Decoder = new TextDecoder('utf-8')
+                const result: OnLoadResult = {
+                    loader: (() => {
+                        if (
+                            contentType.includes('javascript') ||
+                            contentType.includes('css') ||
+                            contentType.includes('json')
+                        ) {
+                            return 'js'
+                        }
+                        return 'base64'
+                    })(),
+                    contents: await (async () => {
+                        if (contentType.includes('css')) {
+                            return cssToJs(
+                                (
+                                    await this.compileCss(
+                                        utf8Decoder.decode(axiosResponse.data),
+                                        args.path
+                                    )
+                                ).outputFiles[0].text
+                            )
+                        }
+                        if (contentType.includes('json')) {
+                            return jsonToJs(utf8Decoder.decode(axiosResponse.data))
+                        }
+                        return new Uint8Array(axiosResponse.data)
+                    })(),
+                    resolveDir: args.path
+                }
+
+                await this.fileCache.setItem(args.path, result)
+
+                return result
+            })
         }
-    }
+    })
+
+    private cssCodeResolverPlugin = (cssCode: string, basePath: string): Plugin => ({
+        name: 'css-code-resolver-plugin',
+        setup: (build: PluginBuild) => {
+            build.onResolve({ filter: /.*/ }, (args: OnResolveArgs): OnResolveResult => {
+                if (args.kind === 'entry-point') {
+                    return {
+                        namespace: 'default',
+                        path: basePath
+                    }
+                }
+                return {
+                    namespace: 'default',
+                    path: args.resolveDir.length
+                        ? new URL(args.path, args.resolveDir.substring(1)).href
+                        : new URL(args.path, basePath).href
+                }
+            })
+
+            build.onLoad({ filter: /.*/ }, async (args: OnLoadArgs): Promise<OnLoadResult> => {
+                if (args.path === basePath) {
+                    return {
+                        loader: 'css',
+                        contents: cssCode,
+                        resolveDir: basePath
+                    }
+                }
+                const cached = await this.fileCache.getItem<OnLoadResult>(args.path)
+
+                if (cached) {
+                    return cached
+                }
+
+                const axiosResponse = await axios.get<ArrayBuffer>(args.path, {
+                    responseType: 'arraybuffer'
+                })
+                const contentType = axiosResponse.headers['content-type'] as string
+                const utf8Decoder = new TextDecoder('utf-8')
+                const result: OnLoadResult = {
+                    loader: (() => {
+                        if (contentType.includes('css')) {
+                            return 'js'
+                        }
+                        return 'dataurl'
+                    })(),
+                    contents: await (async () => {
+                        if (contentType.includes('css')) {
+                            return cssToJs(
+                                (
+                                    await this.compileCss(
+                                        utf8Decoder.decode(axiosResponse.data),
+                                        args.path
+                                    )
+                                ).outputFiles[0].text
+                            )
+                        }
+                        return new Uint8Array(axiosResponse.data)
+                    })(),
+                    resolveDir: args.path
+                }
+
+                await this.fileCache.setItem(args.path, result)
+
+                return result
+            })
+        }
+    })
 }
 
 export default new Compiler()

src/renderer/src/components/Playground/files.ts

@@ -83,21 +83,25 @@ export const jsToBlob = (code: string) => {
     return URL.createObjectURL(new Blob([code], { type: 'application/javascript' }))
 }
 
-export const jsonToJs = (file: IFile) => {
-    return `export default ${file.value}`
+export const jsonToJs = (code: string) => {
+    return `export default ${code}`
 }
 
-export const cssToJs = (file: IFile) => {
+export const jsonToJsFromFile = (file: IFile) => {
+    return jsonToJs(file.value)
+}
+
+export const cssToJs = (code: string, fileName?: string) => {
     const randomId = new Date().getTime()
     return `(() => {
-  let stylesheet = document.getElementById('style_${randomId}_${file.name}');
+  let stylesheet = document.getElementById('style_${randomId}${fileName ? `_${fileName}` : ''}');
   if (!stylesheet) {
     stylesheet = document.createElement('style')
-    stylesheet.setAttribute('id', 'style_${randomId}_${file.name}')
+    stylesheet.setAttribute('id', 'style_${randomId}_${fileName ? `_${fileName}` : ''}')
     document.head.appendChild(stylesheet)
   }
   const styles = document.createTextNode(
-\`${file.value}\`
+\`${code}\`
     )
   stylesheet.innerHTML = ''
   stylesheet.appendChild(styles)
@@ -105,8 +109,12 @@ export const cssToJs = (file: IFile) => {
 `
 }
 
+export const cssToJsFromFile = (file: IFile) => {
+    return cssToJs(file.value, file.name)
+}
+
 export const addReactImport = (code: string) => {
-    if (!/import\s+React/g.test(code)) {
+    if (!/^\s*import\s+React\s+/g.test(code)) {
         return `import React from 'react';\n${code}`
     }
     return code
@@ -118,18 +126,12 @@ export const tsconfigJsonDiagnosticsOptions: DiagnosticsOptions = {
         {
             uri: 'tsconfig.json',
             fileMatch: ['tsconfig.json'],
-            schema: {
-                type: 'object',
-                properties: tsconfigSchema
-            }
+            schema: tsconfigSchema
         },
         {
             uri: 'import-map.json',
             fileMatch: ['import-map.json'],
-            schema: {
-                type: 'object',
-                properties: importMapSchema
-            }
+            schema: importMapSchema
         }
     ]
 }

src/renderer/src/components/Playground/import-map-schema.json

@@ -1,6 +1,4 @@
 {
-  "imports": {
     "type": "object",
-    "description": "Import map"
-  }
-}
+    "additionalProperties": {"type": "string"}
+}

src/renderer/src/components/Playground/index.module.less

@@ -1,8 +1,8 @@
-[data-component=playground] {
+.root {
   width: 100%;
   height: 100%;
 
   > * {
     width: 0 !important;
   }
-}
+}

src/renderer/src/components/Playground/index.tsx

@@ -1,4 +1,4 @@
-import '@/components/Playground/playground.scss'
+import styles from '@/components/Playground/index.module.less'
 import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
 import {
     ENTRY_FILE_NAME,
@@ -34,7 +34,7 @@ const Playground = ({
         try {
             setImportMap(JSON.parse(importMapRaw) as IImportMap)
         } catch (e) {
-            setImportMap({ imports: {} })
+            setImportMap({})
         }
     }
     if (!tsconfig) {
@@ -77,7 +77,7 @@ const Playground = ({
     }, [tsconfigRaw])
 
     return (
-        <FlexBox data-component={'playground'} direction={'horizontal'}>
+        <FlexBox className={styles.root} direction={'horizontal'}>
             <CodeEditor
                 tsconfig={tsconfig}
                 files={{

src/renderer/src/components/Playground/shared.ts

@@ -14,20 +14,7 @@ export interface IFiles {
     [key: string]: IFile
 }
 
-export interface ITemplate {
-    name: string
-    tsconfig: ITsconfig
-    importMap: IImportMap
-    files: IFiles
-}
-
-export interface ITemplates {
-    [key: string]: ITemplate
-}
-
-export interface IImportMap {
-    imports: Record<string, string>
-}
+export type IImportMap = Record<string, string>
 
 export interface ITsconfig {
     compilerOptions: CompilerOptions

src/renderer/src/components/Playground/templates.ts

@@ -1,59 +0,0 @@
-import { ITemplates } from '@/components/Playground/shared'
-import { ENTRY_FILE_NAME, MAIN_FILE_NAME } from '@/components/Playground/files'
-
-import baseTsconfig from '@/components/Playground/templates/base/tsconfig.json'
-import baseImportMap from '@/components/Playground/templates/base/import-map.json'
-import baseMain from '@/components/Playground/templates/base/main.tsx?raw'
-import baseApp from '@/components/Playground/templates/base/App.tsx?raw'
-
-import demoTsconfig from '@/components/Playground/templates/demo/tsconfig.json'
-import demoImportMap from '@/components/Playground/templates/demo/import-map.json'
-import demoMain from '@/components/Playground/templates/demo/main.tsx?raw'
-import demoApp from '@/components/Playground/templates/demo/App.tsx?raw'
-import demoAppCSS from '@/components/Playground/templates/demo/App.css?raw'
-
-const templates: ITemplates = {
-    base: {
-        name: '基础',
-        tsconfig: baseTsconfig,
-        importMap: baseImportMap,
-        files: {
-            [ENTRY_FILE_NAME]: {
-                name: ENTRY_FILE_NAME,
-                language: 'typescript',
-                value: baseMain,
-                hidden: true
-            },
-            [MAIN_FILE_NAME]: {
-                name: MAIN_FILE_NAME,
-                language: 'typescript',
-                value: baseApp
-            }
-        }
-    },
-    demo: {
-        name: 'Demo',
-        tsconfig: demoTsconfig,
-        importMap: demoImportMap,
-        files: {
-            [ENTRY_FILE_NAME]: {
-                name: ENTRY_FILE_NAME,
-                language: 'typescript',
-                value: demoMain,
-                hidden: true
-            },
-            [MAIN_FILE_NAME]: {
-                name: MAIN_FILE_NAME,
-                language: 'typescript',
-                value: demoApp
-            },
-            ['App.css']: {
-                name: 'App.css',
-                language: 'css',
-                value: demoAppCSS
-            }
-        }
-    }
-}
-
-export default templates