Merge pull request #3 from FatttSnake/1.0.0

v1.0.0
2024-09-06 15:17:40 +08:00
parent d0121b126b 842e167f8c
commit 4570a59455
260 changed files with 24590 additions and 3884 deletions
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,7 @@
+VITE_PLATFORM=WEB
+VITE_DESKTOP_PROTOCOL=dev-oxygen-desktop
+VITE_APP_PROTOCOL=dev-oxygen-app
+VITE_UI_URL=${DEV_UI_URL}
+VITE_API_URL=${DEV_API_URL}
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1,7 @@
+VITE_PLATFORM=WEB
+VITE_DESKTOP_PROTOCOL=oxygen-desktop
+VITE_APP_PROTOCOL=oxygen-app
+VITE_UI_URL=${PRODUCT_UI_URL}
+VITE_API_URL=${PRODUCT_API_URL}
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
--- a/.env.testing
+++ b/.env.testing
@@ -0,0 +1,8 @@
+NODE_ENV=development
+VITE_PLATFORM=WEB
+VITE_DESKTOP_PROTOCOL=test-oxygen-desktop
+VITE_APP_PROTOCOL=test-oxygen-app
+VITE_UI_URL=${TEST_UI_URL}
+VITE_API_URL=${TEST_API_URL}
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -34,6 +34,7 @@ module.exports = {
            'warn',
            { allowConstantExport: true }
        ],
-        '@typescript-eslint/no-non-null-assertion': 'off'
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        'react-hooks/exhaustive-deps': 'off',
    }
 }
--- a/674
+++ b/674
@@ -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>.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,71 @@
+<div align="center">
+    <h1>
+        <img alt="Logo" src="doc/logo.svg" width="128">
+        <br>
+        <span>Web UI of Oxygen Toolbox</span>
+    </h1>
+</div>
+<div align="center">
+    <a href="https://ci.fatweb.top/job/Oxygen%20Toolbox%20UI/">
+        <img alt="Build" src="https://ci.fatweb.top/job/Oxygen%20Toolbox%20UI/badge/icon">
+    </a>
+    <a href="https://github.com/FatttSnake/oxygen-ui/releases/latest">
+        <img alt="Release" src="https://img.shields.io/github/v/release/FatttSnake/oxygen-ui">
+    </a>
+    <a href="LICENSE">
+        <img alt="LICENSE" src="https://img.shields.io/github/license/FatttSnake/oxygen-ui">
+    </a>
+</div>
+
+# Overview ([ZH](README_zh.md), EN)
+
+This project is a front-end web UI of Oxygen Toolbox and needs to be used with the back-end API.
+
+# Requires
+
+- Web Server (e.g. Nginx, Apache httpd)
+
+# Related projects
+
+[API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api)
+
+[Desktop Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-desktop)
+
+[Android Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-android)
+
+# Quick Start
+
+**1. Download the latest packaged production version from [Releases](https://github.com/FatttSnake/oxygen-ui/releases/latest) page**
+
+**2. Upload the file `oxygen-ui-*.tar.gz` or `oxygen-ui-*.zip` to the web server and unzip it**
+
+**3. Configure pseudo-static**
+
+Nginx:
+
+```nginx
+server {
+    ...
+    
+    index index.html
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    ...
+}
+```
+
+Apache httpd (.htaccess):
+
+```apache
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
+```
--- a/README_zh.md
+++ b/README_zh.md
@@ -0,0 +1,71 @@
+<div align="center">
+    <h1>
+        <img alt="Logo" src="doc/logo.svg" width="128">
+        <br>
+        <span>Web UI of Oxygen Toolbox</span>
+    </h1>
+</div>
+<div align="center">
+    <a href="https://ci.fatweb.top/job/Oxygen%20Toolbox%20UI/">
+        <img alt="Build" src="https://ci.fatweb.top/job/Oxygen%20Toolbox%20UI/badge/icon">
+    </a>
+    <a href="https://github.com/FatttSnake/oxygen-ui/releases/latest">
+        <img alt="Release" src="https://img.shields.io/github/v/release/FatttSnake/oxygen-ui">
+    </a>
+    <a href="LICENSE">
+        <img alt="LICENSE" src="https://img.shields.io/github/license/FatttSnake/oxygen-ui">
+    </a>
+</div>
+
+# 概述 (ZH, [EN](README.md))
+
+本项目为 Oxygen Toolbox 的网页 UI，需配合后端 API 使用。
+
+# 环境要求
+
+- Web 服务器（如 Nginx, Apache httpd）
+
+# 关联项目
+
+[API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api)
+
+[Desktop Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-desktop)
+
+[Android Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-android)
+
+# 快速开始
+
+**1. 从 [Releases](https://github.com/FatttSnake/oxygen-ui/releases/latest) 页面下载最后打包的生产版本**
+
+**2. 将文件 `oxygen-ui-*.tar.gz` 或 `oxygen-ui-*.zip` 上传到 Web 服务器并解压**
+
+**3. 配置伪静态**
+
+Nginx:
+
+```nginx
+server {
+    ...
+    
+    index index.html
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    ...
+}
+```
+
+Apache httpd (.htaccess):
+
+```apache
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
+```
--- a/build/resolvers/antd.ts
+++ b/build/resolvers/antd.ts
@@ -1,4 +1,4 @@
-export function kebabCase(key: string): string {
+export const kebabCase = (key: string) => {
    const result: string = key.replace(/([A-Z])/g, ' $1').trim()
    return result.split(' ').join('-').toLowerCase()
 }
@@ -149,7 +149,10 @@ const matchComponents: IMatcher[] = [
        pattern: /^Mentions/,
        styleDir: 'mentions'
    },
-
+    {
+        pattern: /^QRCode/,
+        styleDir: 'qr-code'
+    },
    {
        pattern: /^Step/,
        styleDir: 'steps'
@@ -295,6 +298,7 @@ const primitiveNames = [
    'DropdownButton',
    'Drawer',
    'Empty',
+    'FloatButton',
    'Form',
    'FormItem',
    'FormItemRest',
@@ -336,6 +340,7 @@ const primitiveNames = [
    'Rate',
    'Result',
    'Row',
+    'QRCode',
    'Select',
    'SelectOptGroup',
    'SelectOption',
@@ -395,7 +400,7 @@ const isAntd = (compName: string): boolean => {
    return antdNames.has(compName)
 }

-export function AntDesignResolver(options: AntDesignResolverOptions = {}): ComponentResolver {
+export const AntDesignResolver = (options: AntDesignResolverOptions = {}): ComponentResolver => {
    return {
        type: 'component',
        resolve: (name: string) => {
@@ -416,6 +421,7 @@ export function AntDesignResolver(options: AntDesignResolverOptions = {}): Compo
                    sideEffects: getSideEffects(importName, options)
                }
            }
+            return undefined
        }
    }
 }
--- a/doc/logo.svg
+++ b/doc/logo.svg
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>FatWeb</title>
+    <title>Oxygen Toolbox</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,56 +1,84 @@
 {
-  "name": "fatweb-ui",
+  "name": "oxygen-ui",
  "private": true,
-  "version": "0.0.0",
  "type": "module",
+  "version": "1.0.0",
+  "description": "Oxygen Toolbox browser version",
+  "author":  {
+    "name": "FatttSnake",
+    "email": "fatttsnake@fatweb.top",
+    "url": "https://fatweb.top"
+  },
+  "homepage": "https://tool.fatweb.top",
  "scripts": {
    "dev": "vite",
    "dev-host": "vite --host 0.0.0.0",
-    "build": "vite build",
+    "build": "vite build && npm run typecheck",
+    "build:package": "npm run build && bash package.sh ${npm_package_version}",
+    "build-test": "vite build --mode testing && npm run typecheck",
+    "typecheck": "tsc",
    "clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "format": "prettier --write src/",
    "preview": "vite preview"
  },
  "dependencies": {
-    "@ant-design/icons": "^5.2.6",
-    "antd": "^5.8.6",
-    "axios": "^1.5.0",
-    "jwt-decode": "^3.1.2",
+    "@ant-design/icons": "^5.3.7",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@marsidev/react-turnstile": "^0.7.1",
+    "@monaco-editor/react": "^4.6.0",
+    "antd": "^5.18.1",
+    "axios": "^1.7.2",
+    "custom-protocol-check": "^1.4.0",
+    "dayjs": "^1.11.11",
+    "echarts": "^5.5.0",
+    "esbuild-wasm": "^0.21.5",
+    "fast-deep-equal": "^3.1.3",
+    "fflate": "^0.8.2",
+    "jwt-decode": "^4.0.0",
    "localforage": "^1.10.0",
    "lodash": "^4.17.21",
-    "match-sorter": "^6.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0"
+    "match-sorter": "^6.3.4",
+    "moment": "^2.30.1",
+    "monaco-editor": "^0.49.0",
+    "monaco-jsx-syntax-highlight": "^1.2.0",
+    "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",
+    "size-sensor": "^1.0.2",
+    "vanilla-tilt": "^1.8.1"
  },
  "devDependencies": {
    "@svgr/core": "^8.1.0",
    "@svgr/plugin-jsx": "^8.1.0",
-    "@types/jsdom": "^21.1.2",
-    "@types/lodash": "^4.14.198",
-    "@types/node": "^20.5.9",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
-    "@vitejs/plugin-react": "^4.0.4",
-    "eslint": "^8.48.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-config-standard-with-typescript": "^39.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "jsdom": "^22.1.0",
-    "prettier": "^3.0.3",
-    "sass": "^1.66.1",
+    "@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",
+    "eslint": "^8.57.0",
+    "eslint-config-love": "^52.0.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",
+    "jsdom": "^24.1.0",
+    "prettier": "^3.3.2",
+    "sass": "^1.77.5",
    "stylelint-config-prettier": "^9.0.5",
-    "typescript": "^5.2.2",
-    "unplugin-auto-import": "^0.16.6",
-    "unplugin-icons": "^0.17.0",
-    "vite": "^4.4.9"
+    "typescript": "^5.4.5",
+    "unplugin-auto-import": "^0.17.6",
+    "unplugin-icons": "^0.19.0",
+    "vite": "^5.2.13"
  }
 }
--- a/package.sh
+++ b/package.sh
@@ -0,0 +1,20 @@
+#!/bin/bash
+
+FILE_NAME=oxygen-ui${1:+-v$1}
+GZ_FILE_NAME=${FILE_NAME}.tar.gz
+ZIP_FILE_NAME=${FILE_NAME}.zip
+
+cp -r dist ${FILE_NAME}
+
+tar -czvf ${GZ_FILE_NAME} ${FILE_NAME}
+zip -rv9 ${ZIP_FILE_NAME} ${FILE_NAME}
+
+md5sum ${GZ_FILE_NAME} | awk '{ print $1 }' > ${GZ_FILE_NAME}.md5
+sha1sum ${GZ_FILE_NAME} | awk '{ print $1 }' > ${GZ_FILE_NAME}.sha1
+sha256sum ${GZ_FILE_NAME} | awk '{ print $1 }' > ${GZ_FILE_NAME}.sha256
+sha512sum ${GZ_FILE_NAME} | awk '{ print $1 }' > ${GZ_FILE_NAME}.sha512
+
+md5sum ${ZIP_FILE_NAME} | awk '{ print $1 }' > ${ZIP_FILE_NAME}.md5
+sha1sum ${ZIP_FILE_NAME} | awk '{ print $1 }' > ${ZIP_FILE_NAME}.sha1
+sha256sum ${ZIP_FILE_NAME} | awk '{ print $1 }' > ${ZIP_FILE_NAME}.sha256
+sha512sum ${ZIP_FILE_NAME} | awk '{ print $1 }' > ${ZIP_FILE_NAME}.sha512
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/logo.svg
+++ b/public/logo.svg
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,26 @@
-import React from 'react'
-import router from '@/router'
-import LoadingMask from '@/components/common/LoadingMask.tsx'
+import { getRouter } from '@/router'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
+
+export const AppContext = createContext<{ refreshRouter: () => void }>({
+    refreshRouter: () => undefined
+})
+
+const App = () => {
+    const [routerState, setRouterState] = useState(getRouter)

-const App: React.FC = () => {
    return (
        <>
-            <Suspense fallback={<LoadingMask />}>
-                <RouterProvider router={router} />
-            </Suspense>
+            <AppContext.Provider
+                value={{
+                    refreshRouter: () => {
+                        setRouterState(getRouter())
+                    }
+                }}
+            >
+                <Suspense fallback={<FullscreenLoadingMask />}>
+                    <RouterProvider router={routerState} />
+                </Suspense>
+            </AppContext.Provider>
        </>
    )
 }
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -1,20 +1,58 @@
-import { getLoginStatus } from '@/utils/auth.ts'
+import { PRODUCTION_NAME } from '@/constants/common.constants'
+import { getRedirectUrl } from '@/util/route'
+import { getLoginStatus, getVerifyStatus_async } from '@/util/auth'

 const AuthRoute = () => {
-    const match = useMatches()[1]
-    const handle = match.handle as RouteHandle
+    const [searchParams] = useSearchParams()
+    const matches = useMatches()
+    const lastMatch = matches.reduce((_, second) => second)
+    const handle = lastMatch.handle as RouteHandle
+    const location = useLocation()
    const outlet = useOutlet()
    const isLogin = getLoginStatus()
+    const isVerify = getVerifyStatus_async()

    return useMemo(() => {
-        if (handle?.auth && !isLogin) {
-            return <Navigate to="/login" />
+        document.title = `${handle?.titlePrefix ?? ''}${
+            handle?.title ? handle?.title : PRODUCTION_NAME
+        }${handle?.titlePostfix ?? ''}`
+
+        if (matches.some(({ handle }) => (handle as RouteHandle)?.auth)) {
+            if (!isLogin) {
+                return (
+                    <Navigate
+                        replace
+                        to={getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)}
+                    />
+                )
+            }
+            if (isVerify === false && lastMatch.pathname !== '/verify') {
+                return <Navigate to={'/verify'} />
+            }
        }
-        if (isLogin && match.pathname === '/login') {
-            return <Navigate to="/" />
+        if (isLogin && ['/login', '/forget'].includes(lastMatch.pathname)) {
+            if (searchParams.has('redirect')) {
+                return <Navigate to={searchParams.get('redirect') ?? '/'} />
+            } else {
+                return <Navigate to={'/'} />
+            }
        }
+
+        if (location.pathname.length > 1 && location.pathname.endsWith('/')) {
+            return <Navigate to={location.pathname.substring(0, location.pathname.length - 1)} />
+        }
+
        return outlet
-    }, [handle?.auth, isLogin, match.pathname, outlet])
+    }, [
+        handle?.title,
+        handle?.titlePostfix,
+        handle?.titlePrefix,
+        isLogin,
+        lastMatch.pathname,
+        location.search,
+        matches,
+        outlet
+    ])
 }

 export default AuthRoute
--- a/src/ant-design.d.ts
+++ b/src/ant-design.d.ts
@@ -0,0 +1,29 @@
+import { ComponentType, ForwardRefExoticComponent, Key, SVGProps } from 'react'
+import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
+import { GetProp, TablePaginationConfig, UploadProps } from 'antd/lib'
+import { ColumnsType, FilterValue, SorterResult, SortOrder } from 'antd/es/table/interface'
+import { CheckboxChangeEvent } from 'antd/es/checkbox'
+import type { DataNode } from 'antd/es/tree'
+
+declare global {
+    type IconComponent =
+        | ComponentType<CustomIconComponentProps | SVGProps<SVGSVGElement>>
+        | ForwardRefExoticComponent<CustomIconComponentProps>
+
+    type _TablePaginationConfig = TablePaginationConfig
+
+    type _ColumnsType<T> = ColumnsType<T>
+    type _FilterValue = FilterValue
+    type _SorterResult<T> = SorterResult<T>
+    type _SortOrder = SortOrder
+    type _CheckboxChangeEvent = CheckboxChangeEvent
+    interface _DataNode extends DataNode {
+        value: Key
+        fullTitle?: string
+        parentId?: number
+        children?: _DataNode[]
+    }
+
+    type _UploadProps = UploadProps
+    type _GetProp<T, PropName> = GetProp<T, PropName>
+}
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -1,4 +1,4 @@
-@use '@/assets/css/constants.scss' as constants;
+@use '@/assets/css/constants' as constants;

 #root {
  height: 100vh;
@@ -6,6 +6,7 @@
 }

 .body {
+  background-color: constants.$background-color;
  color: constants.$font-main-color;
  user-select: none;
  min-width: 900px;
@@ -25,8 +26,8 @@
  height: 100%;
 }

-.background-white {
-  background-color: white;
+.background-origin {
+  background-color: constants.$origin-color;
 }

 .center-box {
@@ -107,9 +108,11 @@
 }

 .flex-horizontal {
+  display: flex;
  flex-direction: row;
 }

 .flex-vertical {
+  display: flex;
  flex-direction: column;
-}
+}
--- a/src/assets/css/components/common/card.scss
+++ b/src/assets/css/components/common/card.scss
@@ -0,0 +1,8 @@
+@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);
+}
--- a/src/assets/css/components/common/flex-box.scss
+++ b/src/assets/css/components/common/flex-box.scss
@@ -0,0 +1,5 @@
+.flex-box {
+  > * {
+    flex: 1;
+  }
+}
--- a/src/assets/css/components/common/fullscreen-loading-mask.scss
+++ b/src/assets/css/components/common/fullscreen-loading-mask.scss
@@ -0,0 +1,10 @@
+.fullscreen-loading-mask {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(200, 200, 200, 0.2);
+}
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -1,6 +1,8 @@
@use '@/assets/css/constants' as constants;
+@use '@/assets/css/mixins' as mixins;

 .hide-scrollbar-mask {
+  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
@@ -12,9 +14,7 @@
    -ms-overflow-style: none;

    .hide-scrollbar-content {
-      display: inline-block;
-      width: 100%;
-      min-width: 900px;
+      min-width: 100%;
    }
  }

@@ -44,25 +44,47 @@
        background-color: constants.$font-secondary-color;
        transition: background-color .2s;
      }
+
      :hover {
        background-color: constants.$font-main-color;
      }
    }
+
+    &.hide {
+      display: block;
+      opacity: 0;
+      animation: 0.4s linear;
+
+      @include mixins.unique-keyframes {
+        0% {
+          opacity: 0.5;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    }
  }

  .vertical-scrollbar {
-    padding: 12px 4px;
-    width: 16px;
    height: 100%;
-    right: 0;
+    left: 100%;
    top: 0;
+    transform: translateX(-100%);
+
+    .box {
+      width: 6px;
+    }
  }

  .horizontal-scrollbar {
-    padding: 4px 12px;
    width: 100%;
-    height: 16px;
    left: 0;
-    bottom: 0;
+    top: 100%;
+    transform: translateY(-100%);
+
+    .box {
+      height: 8px;
+    }
  }
-}
+}
--- a/src/assets/css/components/common/indicator.scss
+++ b/src/assets/css/components/common/indicator.scss
@@ -1,4 +1,4 @@
-@use '@/assets/css/constants.scss' as constants;
+@use '@/assets/css/constants' as constants;

 .dot-list {
  display: flex;
@@ -31,4 +31,4 @@
  .active > * {
    background-color: constants.$font-secondary-color !important;
  }
-}
+}
--- a/src/assets/css/components/common/loading-mask.scss
+++ b/src/assets/css/components/common/loading-mask.scss
@@ -1,10 +1,8 @@
 .loading-mask {
-  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 100;
-  background-color: rgba(200, 200, 200, 0.2);
 }
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -0,0 +1,363 @@
+@use "@/assets/css/constants" as constants;
+@use "@/assets/css/mixins" as mixins;
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  user-select: none;
+  transition: all .3s;
+  white-space: nowrap;
+
+  .title {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    padding: 10px 14px;
+    color: constants.$main-color;
+    overflow: hidden;
+
+    .icon-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      width: 40px;
+      height: 40px;
+      font-size: constants.$SIZE_ICON_SM;
+      border-radius: 8px;
+      cursor: pointer;
+
+      span {
+        transform: rotateZ(180deg);
+        transition: all .3s;
+      }
+
+      &:hover {
+        background-color: constants.$background-color;
+      }
+    }
+
+    .text {
+      flex: 1;
+      font-size: 2em;
+      text-align: center;
+      letter-spacing: 0.2em;
+      transform: translateX(0.1em);
+    }
+  }
+
+  .content, .bottom-fixed {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+    flex: 1;
+
+    .scroll {
+      min-height: 0;
+      flex: 1;
+      width: 100%;
+    }
+
+    ul {
+      > li, > div > li {
+        padding: 2px 14px;
+
+        &.item {
+          position: relative;
+          font-size: 1rem;
+
+          > .menu-bt {
+            border-radius: 8px;
+            overflow: hidden;
+            height: 40px;
+
+            .icon-box {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 0 10px;
+              width: 40px;
+              height: 40px;
+              font-size: constants.$SIZE_ICON_SM;
+              cursor: pointer;
+
+              img {
+                width: 100%;
+              }
+            }
+
+            a {
+              display: flex;
+              align-items: center;
+              height: 100%;
+              width: 100%;
+              transition: all 0.2s;
+              background-color: constants.$origin-color;
+
+              .text {
+                flex: 1;
+                padding-left: 8px;
+                width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+
+              &.active {
+                color: constants.$origin-color;
+                background-color: constants.$main-color;
+
+                img {
+                  filter: drop-shadow(1000px 0 0 constants.$origin-color);
+                  transform: translate(-1000px);
+                }
+              }
+            }
+          }
+
+          .submenu {
+            visibility: hidden;
+            position: fixed;
+            padding-left: 10px;
+            z-index: 10000;
+            animation: 0.1s ease forwards;
+            @include mixins.unique-keyframes {
+              0% {
+                transform: translateX(0);
+                opacity: 1;
+              }
+              100% {
+                transform: translateX(-10px);
+                opacity: 0;
+              }
+            }
+
+            .content {
+              display: flex;
+              flex-direction: column;
+              gap: 2px;
+              padding: 10px 10px;
+              background-color: constants.$origin-color;
+              border-radius: 8px;
+              box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1);
+
+              .item {
+                border-radius: 8px;
+                white-space: nowrap;
+                overflow: hidden;
+                padding: 0;
+
+                a {
+                  display: block;
+                  padding: 8px 16px;
+                  transition: all 0.2s;
+
+                  .text {
+                    width: unset;
+                  }
+
+                  &.active {
+                    color: constants.$origin-color;
+                    background-color: constants.$main-color;
+                  }
+                }
+
+                &:hover a:not(.active) {
+                  background-color: constants.$background-color;
+                }
+              }
+            }
+          }
+
+          &:hover {
+            > .menu-bt {
+              a:not(.active) {
+                background-color: constants.$background-color;
+              }
+            }
+
+            .submenu {
+              visibility: visible;
+              animation: 0.3s ease;
+              @include mixins.unique-keyframes {
+                0% {
+                  transform: translateX(-10px);
+                  opacity: 0;
+                }
+                100% {
+                  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);
+          transform: translate(-1000px);
+
+          > a {
+            background-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
+
+  .separate {
+    height: 0;
+    margin: 10px 5px;
+    border: {
+      width: 1px;
+      color: constants.$font-secondary-color;
+      style: solid;
+    };
+    opacity: 0.4;
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    padding: 8px 14px;
+    color: constants.$main-color;
+
+    .icon-user {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex: 0 0 auto;
+      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;
+      border-radius: 50%;
+      overflow: hidden;
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .text {
+      flex: 1;
+      padding-left: 10px;
+      font-size: 1.4em;
+      color: constants.$font-main-color;
+      user-select: text;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      a {
+        color: constants.$main-color;
+        text-decoration: underline;
+      }
+    }
+
+    .icon-exit {
+      font-size: constants.$SIZE_ICON_XS;
+      color: constants.$error-color;
+      padding: 6px 10px;
+      cursor: pointer;
+
+      &:hover {
+        border-radius: 8px;
+        background-color: constants.$background-color;
+      }
+    }
+  }
+
+  &.hide {
+    width: 68px !important;
+
+    .title {
+      .icon-box {
+        span {
+          transform: rotateZ(360deg);
+          transition: all .3s;
+        }
+      }
+
+      .text {
+        display: none;
+      }
+    }
+
+    .menu-bt {
+      .text, .extend {
+        display: none;
+      }
+    }
+
+    .submenu {
+      .menu-bt {
+        .text {
+          display: block;
+        }
+      }
+    }
+
+    .footer {
+      position: relative;
+
+      .text {
+        display: none;
+      }
+
+      .submenu-exit {
+        display: none;
+        position: absolute;
+        padding-left: 6px;
+        left: 100%;
+        z-index: 1000;
+        box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
+
+        .content {
+          padding: 8px;
+          border-radius: 8px;
+          background-color: constants.$origin-color;
+
+          .icon-exit {
+            padding: 4px 8px;
+
+            &:hover {
+              border-radius: 8px;
+              background-color: constants.$background-color;
+            }
+          }
+        }
+
+        &.hide {
+          display: none !important;
+        }
+      }
+
+      &:hover .submenu-exit {
+        display: block;
+        animation: 0.3s ease;
+        @include mixins.unique-keyframes {
+          0% {
+            transform: translateX(-10px);
+            opacity: 0;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/common/url-card.scss
+++ b/src/assets/css/components/common/url-card.scss
@@ -0,0 +1,28 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-url-card] {
+  cursor: pointer;
+
+  .url-card {
+    width: 100%;
+    height: 100%;
+    margin-top: 80px;
+    text-align: center;
+    gap: 42px;
+
+    > * {
+      flex: 0 0 auto;
+      display: block;
+    }
+
+    .icon {
+      color: constants.$production-color;
+      font-size: constants.$SIZE_ICON_XL;
+    }
+
+    .text {
+      font-weight: bolder;
+      font-size: 2em;
+    }
+  }
+}
--- a/src/assets/css/components/dnd/drag-handle.scss
+++ b/src/assets/css/components/dnd/drag-handle.scss
@@ -0,0 +1,5 @@
+[data-component=component-drag-handle] {
+  background-color: transparent;
+  color: unset;
+  cursor: grab;
+}
--- a/src/assets/css/components/dnd/drop-mask.scss
+++ b/src/assets/css/components/dnd/drop-mask.scss
@@ -0,0 +1,30 @@
+@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;
+  }
+}
--- a/src/assets/css/components/home/footer.scss
+++ b/src/assets/css/components/home/footer.scss
@@ -1,19 +0,0 @@
-.icons {
-  display: flex;
-  gap: 20px;
-
-  .icon {
-    font-size: 8em;
-    color: white;
-  }
-}
-
-.links {
-  font-size: 2em;
-  text-decoration: underline;
-  color: white;
-
-  > * {
-    color: white;
-  }
-}
--- a/src/assets/css/components/home/home.scss
+++ b/src/assets/css/components/home/home.scss
@@ -1,11 +0,0 @@
-.indicator {
-  position: fixed;
-  margin: {
-    right: 20px;
-  };
-  width: 20px;
-  height: 100px;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
--- a/src/assets/css/components/home/slogan.scss
+++ b/src/assets/css/components/home/slogan.scss
@@ -1,63 +0,0 @@
-@use "@/assets/css/mixins" as mixins;
-
-.center-box {
-  display: flex;
-  flex-direction: column;
-}
-
-.big-logo {
-  font: {
-    size: 5em;
-    weight: bold;
-  };
-  color: #666;
-}
-
-.slogan {
-  font: {
-    size: 1.3em;
-    style: italic;
-  };
-  color: #666;
-
-  .cursor {
-    font-style: normal;
-    animation: 1s infinite;
-
-    @include mixins.unique-keyframes {
-      0% {
-        opacity: 0;
-      }
-      50% {
-        opacity: 1;
-      }
-      100% {
-        opacity: 0;
-      }
-    }
-  }
-}
-
-.scroll-down {
-  position: absolute;
-  bottom: 10px;
-  padding: 20px;
-  cursor: pointer;
-  animation: 1.5s infinite;
-  @include mixins.unique-keyframes {
-    0%,
-    100% {
-      -ms-filter: none;
-      filter: none;
-      opacity: 1;
-      transform: translateY(10px);
-    }
-
-    50% {
-      -ms-filter: alpha(opacity=40);
-      filter: alpha(opacity=40);
-      opacity: .4;
-      transform: translateY(-10px);
-    }
-  }
-}
--- a/src/assets/css/components/system/setting-card.scss
+++ b/src/assets/css/components/system/setting-card.scss
@@ -0,0 +1,33 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-setting-card] {
+  .settings-card {
+    padding: 20px;
+    gap: 20px;
+    color: constants.$main-color;
+
+    > .head {
+      align-items: center;
+      gap: 5px;
+
+      .icon {
+        font-size: constants.$SIZE_ICON_MD;
+        flex: 0 0 auto;
+      }
+
+      .title {
+        display: flex;
+        font-size: 1.2em;
+      }
+
+      :nth-child(n+3) {
+        flex: 0 0 auto;
+        color: constants.$font-main-color;
+      }
+
+      .bt-save {
+        color: constants.$main-color;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/system/statistics-card.scss
+++ b/src/assets/css/components/system/statistics-card.scss
@@ -0,0 +1,78 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-statistics-card] {
+  .statistics-card {
+    padding: 20px;
+    gap: 20px;
+
+    > .head {
+      align-items: center;
+      gap: 5px;
+      color: constants.$main-color;
+
+      .icon {
+        font-size: constants.$SIZE_ICON_MD;
+        flex: 0 0 auto;
+      }
+
+      .title {
+        display: flex;
+        font-size: 1.2em;
+      }
+
+      :nth-child(n+3) {
+        flex: 0 0 auto;
+        color: constants.$font-main-color;
+      }
+    }
+
+    .card-content {
+      font-size: 1.1em;
+      padding: 0 10px;
+      gap: 10px;
+
+      .key, .value-percent {
+        flex: 0 0 auto;
+        color: constants.$font-main-color;
+      }
+
+      .value {
+        color: constants.$font-secondary-color;
+        overflow: hidden;
+
+        > * {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .value-chart {
+        justify-content: space-around;
+        width: 0;
+
+        > div {
+          max-height: 12px;
+          height: 12px;
+
+          > * {
+            transform: translateY(1px);
+          }
+        }
+      }
+
+      .value-percent {
+        text-align: right;
+      }
+
+      .big-chart {
+        width: 0;
+        height: 400px;
+      }
+
+      > * {
+        gap: 5px;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/tools/load-more-card.scss
+++ b/src/assets/css/components/tools/load-more-card.scss
@@ -0,0 +1,27 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-load-more-card] {
+  cursor: pointer;
+
+  .load-more-card {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    align-items: center;
+
+    .icon {
+      display: flex;
+      font-size: constants.$SIZE_ICON_XXL;
+      color: constants.$production-color;
+      align-items: center;
+      transform: translateY(-20px);
+    }
+
+    .text {
+      position: absolute;
+      top: 60%;
+      font-size: 1.2em;
+      font-weight: bolder;
+    }
+  }
+}
--- a/src/assets/css/components/tools/repository-card.scss
+++ b/src/assets/css/components/tools/repository-card.scss
@@ -0,0 +1,51 @@
+@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;
+    }
+  }
+}
--- a/src/assets/css/components/tools/store-card.scss
+++ b/src/assets/css/components/tools/store-card.scss
@@ -0,0 +1,111 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-store-card] {
+  height: 100%;
+  cursor: pointer;
+
+  .store-card {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    align-items: center;
+
+    > * {
+      display: block;
+      flex: 0 0 auto;
+    }
+
+    .header {
+      display: flex;
+      width: 100%;
+      padding: 10px;
+      justify-content: space-between;
+
+      .version {
+        width: 0;
+        transition: all 0.2s;
+      }
+
+      .operation {
+        display: flex;
+        font-size: 1.6em;
+        gap: 4px;
+        opacity: 0;
+        transition: all 0.2s;
+        z-index: 100;
+
+        > *:hover {
+          color: constants.$font-secondary-color;
+        }
+      }
+    }
+
+    .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;
+      }
+    }
+
+    .info {
+      padding-top: 20px;
+
+      .tool-name {
+        font-weight: bolder;
+        font-size: 1.6em;
+      }
+
+      .tool-desc {
+        margin: {
+          top: 10px;
+          left: auto;
+          right: auto;
+        };
+        color: constants.$font-secondary-color;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-height: 40px;
+        width: 80%;
+      }
+    }
+
+    .author {
+      display: flex;
+      margin-top: auto;
+      flex-direction: row;
+      justify-content: end;
+      padding-bottom: 10px;
+      gap: 10px;
+
+      .avatar {
+        > * {
+          width: 24px;
+          height: 24px;
+        }
+      }
+
+      .author-name {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  :hover {
+    .header {
+      .version {
+        opacity: 0;
+      }
+
+      .operation {
+        opacity: 1;
+      }
+    }
+  }
+}
--- a/src/assets/css/constants.scss
+++ b/src/assets/css/constants.scss
@@ -1,8 +1,22 @@
-$main-color: #00D4FF;
+$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
+$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;
--- a/src/assets/css/pages/header.scss
+++ b/src/assets/css/pages/header.scss
@@ -1,164 +0,0 @@
-@use "@/assets/css/mixins" as mixins;
-@use "@/assets/css/constants" as constants;
-
-.nav {
-  display: flex;
-  position: fixed;
-  align-items: center;
-  z-index: 1;
-  width: 100%;
-  height: 70px;
-  background-color: white;
-  border: {
-    bottom: {
-      width: 1px;
-      style: solid;
-      color: constants.$border-color;
-    }
-  }
-  animation: .5s ease both;
-
-  @include mixins.unique-keyframes {
-    0% {
-      transform: translateY(-100%);
-    }
-    100% {
-      transform: translateY(0);
-    }
-  }
-
-  .logo {
-    padding: 0 40px;
-
-    .title {
-      font-size: 2.8em;
-      font-family: century gothic, texgyreadventor, stheiti, sans-serif;
-    }
-  }
-
-  nav {
-    display: flex;
-    justify-content: end;
-    flex: 1;
-    transition: {
-      property: all;
-      duration: .5s;
-    };
-
-    .menu {
-      padding: 0 30px;
-
-      .item {
-        display: inline-block;
-        font-size: 1.5em;
-        transition: {
-          property: all;
-          duration: .3s;
-        };
-
-        a {
-          padding: 5px 20px;
-          color: constants.$url-color;
-        }
-      }
-
-      .active {
-        border: {
-          bottom: {
-            width: 2px;
-            style: solid;
-            color: constants.$url-active-color;
-          };
-        };
-      }
-
-      :hover {
-        transform: translateY(-5px);
-      }
-    }
-
-    .dropdown-menu-button {
-      display: none;
-      margin: 0 20px;
-      width: 45px;
-      height: 45px;
-      justify-content: center;
-      align-items: center;
-      border-radius: 6px;
-    }
-
-    .dropdown-menu-button.active {
-      background-color: transparentize(constants.$focus-color, 0.8);
-      border: {
-        width: 1px;
-        color: constants.$focus-color;
-        style: solid;
-      };
-    }
-
-    @media screen and (max-width: 900px) {
-      .menu {
-        display: none;
-      }
-
-      .dropdown-menu-button {
-        display: flex;
-      }
-    }
-  }
-}
-
-.dropdown-menu-content {
-  display: none;
-
-  @media screen and (max-width: 900px) {
-    display: none;
-    position: fixed;
-    width: 100%;
-    top: 70px;
-    border: {
-      width: 1px;
-      color: constants.$border-color;
-      style: solid;
-    };
-    background-color: white;
-    z-index: 1;
-
-    ul {
-      li {
-        font-size: 1.2em;
-        text-align: center;
-
-        a {
-          display: block;
-          width: 100%;
-          height: 100%;
-          padding: 10px;
-        }
-
-        :hover {
-          background-color: constants.$focus-color;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 900px){
-  .dropdown-menu-content.show {
-    display: block;
-  }
-}
-
-.nav.hide {
-  animation: .5s ease both;
-
-  @include mixins.unique-keyframes {
-    0% {
-      transform: translateY(0);
-    }
-    100% {
-      transform: translateY(-100%);
-    }
-  }
-}
--- a/src/assets/css/pages/login.scss
+++ b/src/assets/css/pages/login.scss
@@ -1,63 +0,0 @@
-.login-background {
-  display: flex;
-  height: 100vh;
-  width: 100vw;
-  justify-content: center;
-  align-items: center;
-  background-color: #B3E5FC;
-}
-
-.login-box {
-  display: flex;
-  width: 800px;
-  height: 450px;
-  background-color: #448AFF;
-}
-
-.login-box-left {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  flex: 2;
-}
-
-.login-box-left-text {
-  font-size: 3rem;
-  color: white;
-  font-weight: bold;
-
-  > div:last-child {
-    font-size: 1.8rem;
-    font-weight: normal;
-  }
-}
-
-.login-box-right {
-  position: relative;
-  height: 100%;
-  flex: 3;
-  background-color: white;
-}
-
-.login-from-text {
-  position: absolute;
-  top: 60px;
-  left: 40px;
-  font-weight: bold;
-  font-size: 2rem;
-}
-
-.login-from {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 30px;
-  width: 100%;
-  height: 100%;
-}
-
-.login-from-item {
-  width: 80%;
-}
--- a/src/assets/css/pages/sign.scss
+++ b/src/assets/css/pages/sign.scss
@@ -0,0 +1,149 @@
+@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;
+      }
+    }
+  }
+}
--- a/src/assets/css/pages/system-framework.scss
+++ b/src/assets/css/pages/system-framework.scss
@@ -0,0 +1,14 @@
+@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;
+  }
+}
--- a/src/assets/css/pages/system/index.scss
+++ b/src/assets/css/pages/system/index.scss
@@ -0,0 +1,17 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=system] {
+  .root-content {
+    padding: 20px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > .card-box {
+      width: 200px;
+      height: 320px;
+      flex: 0 0 auto;
+      overflow: hidden !important;
+    }
+  }
+}
--- a/src/assets/css/pages/system/settings.scss
+++ b/src/assets/css/pages/system/settings.scss
@@ -0,0 +1,16 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=system-settings] {
+  .root-content {
+    padding: 20px;
+    gap: 20px;
+
+    .root-col {
+      gap: 20px;
+
+      > * {
+        flex: 0 0 auto;
+      }
+    }
+  }
+}
--- a/src/assets/css/pages/system/statistics.scss
+++ b/src/assets/css/pages/system/statistics.scss
@@ -0,0 +1,15 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=system-statistics] {
+  .root-content {
+    padding: 20px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    > .card-box {
+      width: 48%;
+      flex: 0 0 auto;
+    }
+  }
+}
--- a/src/assets/css/pages/system/tools/base.scss
+++ b/src/assets/css/pages/system/tools/base.scss
@@ -0,0 +1,43 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=system-tools-base] {
+  .root-content {
+    padding: 20px;
+    gap: 10px;
+    height: 100%;
+    width: 100%;
+
+    .has-edited::after {
+      content: '*';
+      color: constants.$font-secondary-color;
+    }
+
+    >*:first-child {
+      width: 0;
+      height: fit-content;
+    }
+
+    > *:nth-child(2) {
+      position: sticky;
+      top: 20px;
+      height: calc(100vh - 40px);
+    }
+
+    .close-editor-btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background-color: constants.$font-secondary-color;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      color: white;
+      opacity: 0.6;
+      box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
+      cursor: pointer;
+    }
+  }
+}
--- a/src/assets/css/pages/system/tools/code.scss
+++ b/src/assets/css/pages/system/tools/code.scss
@@ -0,0 +1,20 @@
+[data-component=system-tools-code] {
+  padding: 20px;
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+  }
+
+  .draggable-content {
+    position: fixed;
+    inset-inline-end: 48px;
+    inset-block-end: 48px;
+
+    > * {
+      position: relative;
+      inset-inline-end: 0;
+      inset-block-end: 0;
+    }
+  }
+}
--- a/src/assets/css/pages/system/tools/execute.scss
+++ b/src/assets/css/pages/system/tools/execute.scss
@@ -0,0 +1,8 @@
+[data-component=system-tools-execute] {
+  padding: 20px;
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+  }
+}
--- a/src/assets/css/pages/system/tools/template.scss
+++ b/src/assets/css/pages/system/tools/template.scss
@@ -0,0 +1,43 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=system-tools-template] {
+  .root-content {
+    padding: 20px;
+    gap: 10px;
+    height: 100%;
+    width: 100%;
+
+    .has-edited::after {
+      content: '*';
+      color: constants.$font-secondary-color;
+    }
+
+    >*:first-child {
+      width: 0;
+      height: fit-content;
+    }
+
+    > *:nth-child(2) {
+      position: sticky;
+      top: 20px;
+      height: calc(100vh - 40px);
+    }
+
+    .close-editor-btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background-color: constants.$font-secondary-color;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      color: white;
+      opacity: 0.6;
+      box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
+      cursor: pointer;
+    }
+  }
+}
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -0,0 +1,22 @@
+@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;
+  }
+}
--- a/src/assets/css/pages/tools/create.scss
+++ b/src/assets/css/pages/tools/create.scss
@@ -0,0 +1,61 @@
+@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;
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/pages/tools/edit.scss
+++ b/src/assets/css/pages/tools/edit.scss
@@ -0,0 +1,35 @@
+[data-component=tools-edit] {
+  padding: 20px;
+
+  .card-box {
+    height: 100%;
+    width: 100%;
+
+    .root-content {
+      width: 100%;
+      height: 100%;
+
+      > * {
+        width: 0;
+      }
+
+      .draggable-mask {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .draggable-content {
+    position: fixed;
+    inset-inline-end: 48px;
+    inset-block-end: 48px;
+
+    > * {
+      position: relative;
+      inset-inline-end: 0;
+      inset-block-end: 0;
+    }
+  }
+}
--- a/src/assets/css/pages/tools/index.scss
+++ b/src/assets/css/pages/tools/index.scss
@@ -0,0 +1,110 @@
+@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;
+      }
+    }
+  }
+}
--- a/src/assets/css/pages/tools/source.scss
+++ b/src/assets/css/pages/tools/source.scss
@@ -0,0 +1,8 @@
+[data-component=tools-source] {
+  padding: 20px;
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+  }
+}
--- a/src/assets/css/pages/tools/store.scss
+++ b/src/assets/css/pages/tools/store.scss
@@ -0,0 +1,49 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=tools-store] {
+  .search {
+    display: flex;
+    position: sticky;
+    width: 100%;
+    margin-top: 20px;
+    top: 20px;
+    z-index: 10;
+    justify-content: center;
+    transition: all 0.3s ease;
+
+    > * {
+      width: 80%;
+    }
+
+    &.hide {
+      transform: translateY(-60px);
+    }
+  }
+
+  .root-content {
+    padding: 20px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    > div {
+      width: 180px;
+      height: 290px;
+      flex: 0 0 auto;
+    }
+
+    .no-tool {
+      display: flex;
+      justify-content: center;
+      font-size: 1.4em;
+      font-weight: bolder;
+      color: constants.$font-secondary-color;
+    }
+  }
+
+  .android-qrcode {
+    align-items: center;
+    transform: translateX(-16px);
+    gap: 20px;
+  }
+}
--- a/src/assets/css/pages/tools/user.scss
+++ b/src/assets/css/pages/tools/user.scss
@@ -0,0 +1,93 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=tools-store-user] .root-content {
+  padding: {
+    top: 80px;
+    left: 20px;
+    right: 20px;
+    bottom: 20px;
+  };
+
+  .root-box {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    align-items: center;
+    min-width: 900px;
+    padding-bottom: 20px;
+
+    > .info {
+      margin-left: 40px;
+      transform: translateY(-40px);
+
+      > * {
+        flex: 0 0 auto;
+      }
+
+      .avatar-box {
+        background-color: white;
+        padding: 4px;
+        border-radius: 50%;
+        box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
+
+        .avatar {
+          background-color: transparent !important;
+        }
+      }
+
+      .info-name {
+        margin: {
+          top: 20px;
+          left: 24px;
+        };
+        justify-content: center;
+
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .nickname {
+          font-size: 2.4em;
+          font-weight: bolder;
+          color: constants.$production-color;
+        }
+
+        .url {
+          cursor: pointer;
+
+          > span {
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+
+    .tools {
+      padding: 20px;
+      gap: 20px;
+      flex-wrap: wrap;
+      justify-content: center;
+
+      > div {
+        width: 180px;
+        height: 290px;
+        flex: 0 0 auto;
+      }
+
+      .no-tool {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 20px;
+        font-size: 1.2em;
+        font-weight: bolder;
+        color: constants.$font-secondary-color;
+      }
+    }
+  }
+
+  .android-qrcode {
+    align-items: center;
+    transform: translateX(-16px);
+    gap: 20px;
+  }
+}
--- a/src/assets/css/pages/tools/view.scss
+++ b/src/assets/css/pages/tools/view.scss
@@ -0,0 +1,9 @@
+[data-component=tools-view] {
+  padding: 20px;
+
+  .card-box {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+}
--- a/src/assets/css/pages/user-framework.scss
+++ b/src/assets/css/pages/user-framework.scss
@@ -0,0 +1,14 @@
+@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;
+  }
+}
--- a/src/assets/css/pages/user/index.scss
+++ b/src/assets/css/pages/user/index.scss
@@ -0,0 +1,137 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=user] .root-content {
+  padding: {
+    top: 80px;
+    left: 20px;
+    right: 20px;
+    bottom: 20px;
+  };
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    align-items: center;
+    min-width: 900px;
+    padding-bottom: 20px;
+
+    > :not(:first-child) {
+      padding: {
+        left: 60px;
+        right: 60px;
+      };
+    }
+
+    .divide {
+      height: 1px;
+      width: calc(100% - 120px);
+      background-color: constants.$divide-color;
+      margin: {
+        left: 60px;
+        right: 60px;
+      };
+    }
+
+    .info {
+      margin-left: 40px;
+      transform: translateY(-40px);
+
+      > * {
+        flex: 0 0 auto;
+      }
+
+      .avatar-box {
+        background-color: white;
+        padding: 4px;
+        border-radius: 50%;
+        box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
+
+        .avatar {
+          background-color: transparent !important;
+        }
+      }
+
+      .info-name {
+        margin: {
+          top: 20px;
+          left: 24px;
+        };
+        justify-content: center;
+
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .nickname {
+          font-size: 2.4em;
+          font-weight: bolder;
+          color: constants.$production-color;
+        }
+
+        .url {
+          cursor: pointer;
+
+          > span {
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+
+    .title {
+      align-items: center;
+
+      .content {
+        padding: {
+          bottom: 30px;
+        };
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .text {
+          font-size: 1.6em;
+          font-weight: bolder;
+        }
+
+        .operation {
+          gap: 10px;
+        }
+      }
+    }
+
+    .table {
+      gap: 24px;
+
+      padding: {
+        top: 30px;
+        bottom: 20px;
+      };
+
+      .row {
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .label {
+          font-size: 1.4em;
+          font-weight: bolder;
+          width: 400px;
+        }
+
+        .input {
+          width: 400px;
+
+          > * {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/assets/svg/analysis.svg
+++ b/src/assets/svg/analysis.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1024"><path d="M265.216 920.348444a41.472 41.472 0 0 1-41.415111-42.211555v-215.608889a42.154667 42.154667 0 1 1 83.512889 0v215.608889a42.097778 42.097778 0 0 1-42.097778 42.211555z m207.701333 0a41.472 41.472 0 0 1-41.358222-42.211555V536.689778a42.097778 42.097778 0 0 1 83.512889 0v340.764444a42.097778 42.097778 0 0 1-42.097778 42.894222z m207.758223 0a41.472 41.472 0 0 1-41.358223-42.211555V728.177778a42.097778 42.097778 0 0 1 83.512889 0v149.959111a42.097778 42.097778 0 0 1-42.097778 42.211555z m207.758222 0a41.472 41.472 0 0 1-41.415111-42.211555v-276.48a42.154667 42.154667 0 1 1 83.569777 0v279.950222a42.097778 42.097778 0 0 1-42.097777 38.684445zM210.659556 502.101333a41.415111 41.415111 0 0 1-33.792-16.554666 42.211556 42.211556 0 0 1 10.353777-58.766223l300.202667-231.537777a42.723556 42.723556 0 0 1 51.768889 0l138.069333 112.64 222.947556-185.969778a41.756444 41.756444 0 0 1 53.816889 63.601778l-247.808 208.782222a41.358222 41.358222 0 0 1-53.134223 0L515.072 280.917333 238.933333 493.112889a42.723556 42.723556 0 0 1-28.273777 8.988444z" /><path d="M927.118222 336.896a42.097778 42.097778 0 0 1-42.097778-41.472V179.313778h-117.361777a42.154667 42.154667 0 0 1 0-83.626667h159.459555a42.097778 42.097778 0 0 1 42.097778 41.415111v158.321778a42.097778 42.097778 0 0 1-42.097778 41.528889z" /></svg>
--- a/src/assets/svg/arrowDown.svg
+++ b/src/assets/svg/arrowDown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M482.133333 738.133333L136.533333 392.533333c-17.066667-17.066667-17.066667-42.666667 0-59.733333 8.533333-8.533333 19.2-12.8 29.866667-12.8h689.066667c23.466667 0 42.666667 19.2 42.666666 42.666667 0 10.666667-4.266667 21.333333-12.8 29.866666L541.866667 738.133333c-17.066667 17.066667-42.666667 17.066667-59.733334 0z" /></svg>
--- a/src/assets/svg/back.svg
+++ b/src/assets/svg/back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M471.893333 149.333333a42.666667 42.666667 0 0 0-73.258666-29.781333l-343.893334 352.981333a42.666667 42.666667 0 0 0-0.768 58.709334l343.893334 372.352a42.666667 42.666667 0 0 0 73.984-28.928v-190.677334c56.917333-5.248 116.821333-1.365333 179.882666 11.989334 65.834667 13.994667 150.528 76.032 253.909334 202.24a42.666667 42.666667 0 0 0 75.477333-31.36c-15.445333-152.32-73.984-281.301333-176.170667-384.853334-92.757333-93.994667-204.373333-146.432-333.098666-156.586666V149.333333z" /></svg>
--- a/src/assets/svg/base.svg
+++ b/src/assets/svg/base.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1001.472 608.768l-473.088-216.576c-5.12-2.048-10.752-3.584-15.872-3.584s-10.752 1.024-15.872 3.584L22.528 608.768c-13.824 6.656-22.528 19.968-22.528 35.328 0 15.36 8.704 28.672 23.04 35.328l473.088 212.992c10.24 4.608 21.504 4.608 31.744 0l473.088-212.992c14.336-6.144 23.04-19.968 23.04-35.328 0-15.36-8.704-28.672-22.528-35.328z" /><path d="M23.04 435.2l125.952 56.32c12.8 5.632 27.648 0 33.28-12.288 5.632-12.8 0-27.648-12.288-33.28l-103.424-46.08 445.44-203.776 445.952 204.288-102.912 46.08c-12.8 5.632-18.432 20.48-12.288 33.28s20.48 18.432 33.28 12.288L1000.96 435.2c14.336-6.144 23.04-19.968 23.04-35.328 0-15.36-8.704-29.184-22.528-35.328L527.872 148.48c-5.12-2.048-10.752-3.584-15.872-3.584s-10.752 1.024-15.872 3.584L22.528 365.056C8.704 371.2 0 385.024 0 400.384s8.704 28.672 23.04 34.816z" /><path d="M23.04 433.152l125.952 56.32c12.8 5.632 27.648 0 33.28-12.288 5.632-12.8 0-27.648-12.288-33.28l-103.424-46.08 445.44-204.288 445.952 204.288-102.912 46.592c-12.8 5.632-18.432 20.48-12.288 33.28s20.48 18.432 33.28 12.288l125.44-56.832c14.336-6.144 23.04-19.968 23.04-35.328 0-15.36-8.704-29.184-22.528-35.328l-473.088-216.576c-5.12-2.048-10.752-3.584-15.872-3.584s-10.752 1.024-15.872 3.584L22.528 362.496C8.704 369.152 0 382.464 0 397.824c0 15.36 8.704 29.184 23.04 35.328z" /></svg>
--- a/src/assets/svg/browser.svg
+++ b/src/assets/svg/browser.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 885.76a392.2944 392.2944 0 1 1 392.192-392.192A392.6016 392.6016 0 0 1 512 885.76z m0-702.5664A310.3744 310.3744 0 1 0 822.6816 493.568 310.6816 310.6816 0 0 0 512 183.1936z" /><path d="M978.432 263.8848c-22.9376-46.6944-127.2832-36.5568-193.7408-11.3664l29.0816 76.5952c4.3008-1.6384 8.6016-3.1744 12.8-4.5056l-8.704 5.4272c-76.0832 47.0016-187.0848 107.1104-304.64 165.0688S280.2688 604.16 196.7104 636.1088l-2.1504 0.8192-30.72-49.5616C91.136 632.2176 22.4256 674.7136 46.3872 723.1488c9.216 18.8416 26.3168 26.112 48.3328 26.112 34.816 0 81.92-18.0224 131.072-36.5568 87.1424-33.0752 202.0352-84.1728 323.584-144.0768S781.6192 448.7168 860.8768 399.36c72.8064-44.544 141.5168-87.04 117.5552-135.4752zM125.7472 675.0208l24.064-26.624 11.3664 26.624z m739.7376-350.5152a98.304 98.304 0 0 0-18.2272-32.4608 152.1664 152.1664 0 0 1 57.0368-10.24 115.5072 115.5072 0 0 1-38.8096 42.7008z" /></svg>
--- a/src/assets/svg/category.svg
+++ b/src/assets/svg/category.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M128 426.666667H85.333333V170.794667C85.333333 147.157333 104.746667 128 127.658667 128h768.682666A42.24 42.24 0 0 1 938.666667 170.794667V426.666667h-42.666667v426.709333a42.496 42.496 0 0 1-42.368 42.624H170.368A42.453333 42.453333 0 0 1 128 853.376V426.666667z m682.666667 0H213.333333v384h597.333334v-384zM170.666667 213.333333v128h682.666666V213.333333H170.666667z m213.333333 298.666667h256v85.333333H384v-85.333333z" /></svg>
--- a/src/assets/svg/chart.svg
+++ b/src/assets/svg/chart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1000 768c13.2 0 24 10.8 24 24v80c0 13.2-10.8 24-24 24H24c-13.2 0-24-10.8-24-24V152c0-13.2 10.8-24 24-24h80c13.2 0 24 10.8 24 24v616h872zM745.4 319L576 432l-170.6-227.4c-10.2-13.6-31-12.6-39.8 2L192 496v208h768l-179.8-375.6c-6.4-13-22.8-17.4-34.8-9.4z" /></svg>
--- a/src/assets/svg/close.svg
+++ b/src/assets/svg/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1028 1024"><path d="M646.4 512l345.6-345.6c38.4-38.4 38.4-96 0-134.4-38.4-38.4-96-38.4-134.4 0L512 377.6 166.4 32C128-6.4 70.4-6.4 32 32c-38.4 38.4-38.4 96 0 134.4L377.6 512l-345.6 345.6c-38.4 38.4-38.4 96 0 134.4 19.2 19.2 44.8 25.6 70.4 25.6s51.2-6.4 70.4-25.6L512 646.4l345.6 345.6c19.2 19.2 44.8 25.6 70.4 25.6s51.2-6.4 70.4-25.6c38.4-38.4 38.4-96 0-134.4L646.4 512z" /></svg>
--- a/src/assets/svg/code.svg
+++ b/src/assets/svg/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M305.6 225.6c-17.6-17.6-43.2-17.6-59.2 0L19.2 460.8c-25.6 30.4-25.6 72 0 97.6l225.6 235.2c8 8 20.8 12.8 30.4 12.8s20.8-4.8 30.4-12.8c17.6-17.6 17.6-43.2 0-59.2L88 512l217.6-225.6c17.6-17.6 17.6-43.2 0-60.8zM1001.6 460.8L774.4 225.6c-17.6-17.6-43.2-17.6-59.2 0s-17.6 43.2 0 59.2L932.8 512 715.2 737.6c-17.6 17.6-17.6 43.2 0 59.2 8 8 17.6 12.8 30.4 12.8 12.8 0 20.8-4.8 30.4-12.8l225.6-235.2c28.8-28.8 28.8-70.4 0-100.8zM612.8 230.4c-20.8-8-46.4 4.8-56 25.6L382.4 742.4c-8 20.8 4.8 46.4 25.6 56 4.8 0 8 4.8 12.8 4.8 17.6 0 33.6-12.8 38.4-30.4l179.2-491.2c8-20.8-4.8-46.4-25.6-51.2z" /></svg>
--- a/src/assets/svg/copy.svg
+++ b/src/assets/svg/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M672 832 224 832c-52.928 0-96-43.072-96-96L128 160c0-52.928 43.072-96 96-96l448 0c52.928 0 96 43.072 96 96l0 576C768 788.928 724.928 832 672 832zM224 128C206.368 128 192 142.368 192 160l0 576c0 17.664 14.368 32 32 32l448 0c17.664 0 32-14.336 32-32L704 160c0-17.632-14.336-32-32-32L224 128z" /><path d="M800 960 320 960c-17.664 0-32-14.304-32-32s14.336-32 32-32l480 0c17.664 0 32-14.336 32-32L832 256c0-17.664 14.304-32 32-32s32 14.336 32 32l0 608C896 916.928 852.928 960 800 960z" /><path d="M544 320 288 320c-17.664 0-32-14.336-32-32s14.336-32 32-32l256 0c17.696 0 32 14.336 32 32S561.696 320 544 320z" /><path d="M608 480 288.032 480c-17.664 0-32-14.336-32-32s14.336-32 32-32L608 416c17.696 0 32 14.336 32 32S625.696 480 608 480z" /><path d="M608 640 288 640c-17.664 0-32-14.304-32-32s14.336-32 32-32l320 0c17.696 0 32 14.304 32 32S625.696 640 608 640z" /></svg>
--- a/src/assets/svg/cpu.svg
+++ b/src/assets/svg/cpu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M256 768h512V256H256v512z m341.3 85.3H426.6v85.3h-85.3v-85.3h-128a42.7 42.7 0 0 1-42.7-42.7v-128H85.3v-85.3h85.3V426.6H85.3v-85.3h85.3v-128a42.7 42.7 0 0 1 42.7-42.7h128V85.3h85.3v85.3h170.7V85.3h85.3v85.3h128a42.7 42.7 0 0 1 42.7 42.7v128h85.3v85.3h-85.3v170.7h85.3v85.3h-85.3v128a42.7 42.7 0 0 1-42.7 42.7h-128v85.3h-85.3v-85.3z m-256-512h341.3v341.3H341.3V341.3z" /></svg>
--- a/src/assets/svg/delete.svg
+++ b/src/assets/svg/delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" version="1.1"><path d="M885.333333 266.666667H768v-64C768 149.738667 725.290667 106.666667 672.746667 106.666667H352A96.106667 96.106667 0 0 0 256 202.666667v64H138.666667c-17.706667 0-32 14.293333-32 32s14.293333 32 32 32h746.666666c17.706667 0 32-14.293333 32-32s-14.293333-32-32-32zM320 202.666667c0-17.621333 14.378667-32 32-32h320.746667C690.24 170.666667 704 184.725333 704 202.666667v64H320v-64zM736.128 917.333333H288.064a96.128 96.128 0 0 1-96-96l1.194667-384a32 32 0 0 1 64 0l-1.194667 384c0 17.664 14.378667 32 32 32h448.064a32 32 0 0 0 32-32l-0.234667-384a32 32 0 1 1 64 0l0.234667 384c0 52.928-43.072 96-96 96z" /><path d="M384 469.333333m32 0l0 0q32 0 32 32l0 192q0 32-32 32l0 0q-32 0-32-32l0-192q0-32 32-32Z" /><path d="M576 469.333333m32 0l0 0q32 0 32 32l0 192q0 32-32 32l0 0q-32 0-32-32l0-192q0-32 32-32Z" /></svg>
--- a/src/assets/svg/desktop.svg
+++ b/src/assets/svg/desktop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M810.666667 128H213.333333a128 128 0 0 0-128 128v341.333333a128 128 0 0 0 128 128h256v85.333334H298.666667a42.666667 42.666667 0 0 0 0 85.333333h426.666666a42.666667 42.666667 0 0 0 0-85.333333h-170.666666v-85.333334h256a128 128 0 0 0 128-128V256a128 128 0 0 0-128-128z m42.666666 469.333333a42.666667 42.666667 0 0 1-42.666666 42.666667H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V256a42.666667 42.666667 0 0 1 42.666666-42.666667h597.333334a42.666667 42.666667 0 0 1 42.666666 42.666667z" /></svg>
--- a/src/assets/svg/disk.svg
+++ b/src/assets/svg/disk.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M960 736c0 41.27-33.4 74.66-74.67 74.66H138.67C97.4 810.66 64 777.27 64 736V586.67C64 545.4 97.4 512 138.67 512h746.67c41.26 0 74.66 33.4 74.66 74.67V736zM138.67 462.38c-13.84 0-35.31 4.29-47.95 9.54l150.05-225.19c12.17-18.37 40.08-33.39 62.02-33.39h417.7c22.19 0 49.86 14.79 62.26 33.39L932.8 471.92c-15.27-5.73-31.49-9.06-47.71-9.54H138.67z m472.8 198.96c0 27.43 22.19 49.86 49.86 49.86 27.43 0 49.86-22.18 49.86-49.86 0-27.43-22.42-49.86-49.86-49.86-27.43 0.24-49.86 22.43-49.86 49.86z m149.34 0c0 27.43 22.19 49.86 49.86 49.86 27.43 0 49.86-22.18 49.86-49.86 0-27.43-22.42-49.86-49.86-49.86-27.44 0.24-49.86 22.43-49.86 49.86z" /></svg>
--- a/src/assets/svg/down.svg
+++ b/src/assets/svg/down.svg
@@ -1 +1 @@
-<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M958.577476 311.180252c0 15.286148-5.878894 29.522384-16.564257 40.166815L551.623951 741.043556c-1.39272 1.425466-2.577708 2.537799-3.846608 3.449565l-2.905166 2.304486c-11.416004 11.362792-24.848944 16.945951-39.068807 16.945951-14.475689 0-28.010961-5.708002-38.110993-16.056698L79.475588 355.310332c-10.467399-10.613732-16.236799-24.786523-16.236799-39.893592 0-14.772448 5.599532-28.726252 15.753799-39.286772 10.18599-10.497075 24.390503-16.539698 38.95215-16.539698 14.382569 0 28.009937 5.723352 38.366819 16.142655l350.169241 353.968777 359.428116-358.485651c10.30981-10.248412 23.781636-15.909341 37.994336-15.909341 14.889105 0 28.859281 6.05081 39.333844 16.999163C953.126324 282.725176 958.577476 296.556183 958.577476 311.180252z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M958.577476 311.180252c0 15.286148-5.878894 29.522384-16.564257 40.166815L551.623951 741.043556c-1.39272 1.425466-2.577708 2.537799-3.846608 3.449565l-2.905166 2.304486c-11.416004 11.362792-24.848944 16.945951-39.068807 16.945951-14.475689 0-28.010961-5.708002-38.110993-16.056698L79.475588 355.310332c-10.467399-10.613732-16.236799-24.786523-16.236799-39.893592 0-14.772448 5.599532-28.726252 15.753799-39.286772 10.18599-10.497075 24.390503-16.539698 38.95215-16.539698 14.382569 0 28.009937 5.723352 38.366819 16.142655l350.169241 353.968777 359.428116-358.485651c10.30981-10.248412 23.781636-15.909341 37.994336-15.909341 14.889105 0 28.859281 6.05081 39.333844 16.999163C953.126324 282.725176 958.577476 296.556183 958.577476 311.180252z" /></svg>
--- a/src/assets/svg/email.svg
+++ b/src/assets/svg/email.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M926.47619 355.644952V780.190476a73.142857 73.142857 0 0 1-73.142857 73.142857H170.666667a73.142857 73.142857 0 0 1-73.142857-73.142857V355.644952l304.103619 257.828572a170.666667 170.666667 0 0 0 220.745142 0L926.47619 355.644952zM853.333333 170.666667a74.044952 74.044952 0 0 1 26.087619 4.778666 72.704 72.704 0 0 1 30.622477 22.186667 73.508571 73.508571 0 0 1 10.678857 17.67619c3.169524 7.509333 5.12 15.652571 5.607619 24.210286L926.47619 243.809524v24.380952L559.469714 581.241905a73.142857 73.142857 0 0 1-91.306666 2.901333l-3.632762-2.925714L97.52381 268.190476v-24.380952a72.899048 72.899048 0 0 1 40.155428-65.292191A72.97219 72.97219 0 0 1 170.666667 170.666667h682.666666z" /></svg>
--- a/src/assets/svg/execute.svg
+++ b/src/assets/svg/execute.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M750.912 505.216L256 198.016c-27.712-17.024-64 4.288-64 36.288v614.4c0 32 36.288 53.312 64 36.288l492.8-307.2c29.888-14.976 29.888-57.6 2.112-72.576z" /></svg>
--- a/src/assets/svg/exit.svg
+++ b/src/assets/svg/exit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M835.669333 554.666667h-473.173333A42.453333 42.453333 0 0 1 320 512a42.666667 42.666667 0 0 1 42.474667-42.666667h473.173333l-161.813333-161.834666a42.666667 42.666667 0 0 1 60.330666-60.330667l234.666667 234.666667a42.666667 42.666667 0 0 1 0 60.330666l-234.666667 234.666667a42.666667 42.666667 0 0 1-60.330666-60.330667L835.669333 554.666667zM554.666667 42.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333C137.578667 128 128 137.578667 128 149.482667v725.034666C128 886.4 137.6 896 149.525333 896H554.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333A106.816 106.816 0 0 1 42.666667 874.517333V149.482667A106.773333 106.773333 0 0 1 149.525333 42.666667H554.666667z" /></svg>
--- a/src/assets/svg/expand.svg
+++ b/src/assets/svg/expand.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1028 1024"><path d="M8.533333 192c0-25.6 17.066667-42.666667 34.133334-42.666667h490.666666c21.333333 0 34.133333 17.066667 34.133334 42.666667 0 21.333333-17.066667 42.666667-34.133334 42.666667h-490.666666c-21.333333 0-34.133333-21.333333-34.133334-42.666667z m550.4 213.333333c0 25.6-21.333333 42.666667-46.933333 42.666667h-465.066667c-25.6 0-46.933333-17.066667-46.933333-42.666667 0-21.333333 21.333333-42.666667 46.933333-42.666666h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666666z m-507.733333 256c-25.6 0-46.933333-17.066667-46.933333-42.666666s21.333333-42.666667 46.933333-42.666667h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666667 0 21.333333-21.333333 42.666667-46.933333 42.666666h-465.066667z m507.733333 170.666667c0 25.6-21.333333 42.666667-51.2 42.666667h-452.266666c-29.866667 0-51.2-17.066667-51.2-42.666667s21.333333-42.666667 51.2-42.666667h452.266666c29.866667 0 51.2 17.066667 51.2 42.666667z m140.8-85.333333l221.866667-238.933334-221.866667-238.933333c-17.066667-17.066667-17.066667-51.2 0-68.266667 17.066667-17.066667 46.933333-17.066667 64 0l251.733334 273.066667c17.066667 17.066667 17.066667 51.2 0 68.266667l-251.733334 273.066666c-17.066667 17.066667-46.933333 17.066667-64 0-17.066667-17.066667-17.066667-46.933333 0-68.266666z" /></svg>
--- a/src/assets/svg/eye.svg
+++ b/src/assets/svg/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1152 1024"><path d="M576 288a221.88 221.88 0 0 0-62.48 10 110.8 110.8 0 0 1 14.48 54 112 112 0 0 1-112 112 110.8 110.8 0 0 1-54-14.48A223.42 223.42 0 1 0 576 288z m569.04 194.8C1036.58 271.18 821.86 128 576 128S115.36 271.28 6.96 482.82a64.7 64.7 0 0 0 0 58.38C115.42 752.82 330.14 896 576 896s460.64-143.28 569.04-354.82a64.7 64.7 0 0 0 0-58.38zM576 800c-197.3 0-378.18-110-475.86-288C197.82 334 378.68 224 576 224s378.18 110 475.86 288C954.2 690 773.32 800 576 800z" /></svg>
--- a/src/assets/svg/github.svg
+++ b/src/assets/svg/github.svg
@@ -1 +1 @@
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" /></svg>
--- a/src/assets/svg/group.svg
+++ b/src/assets/svg/group.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M620.8 611.2c67.2-38.4 115.2-112 115.2-195.2 0-124.8-99.2-224-224-224s-224 99.2-224 224c0 83.2 44.8 156.8 115.2 195.2-89.6 35.2-156.8 115.2-179.2 211.2-3.2 16 6.4 35.2 25.6 38.4H256c16 0 28.8-9.6 32-25.6 22.4-105.6 115.2-182.4 224-182.4s201.6 76.8 224 182.4c3.2 16 19.2 28.8 38.4 25.6 16-3.2 28.8-19.2 25.6-38.4-22.4-96-89.6-176-179.2-211.2zM352 416c0-89.6 70.4-160 160-160s160 70.4 160 160-70.4 160-160 160-160-70.4-160-160zM992 630.4c-12.8-64-54.4-115.2-118.4-144 35.2-32 54.4-76.8 54.4-128C928 265.6 857.6 192 768 192c-19.2 0-32 12.8-32 32s12.8 32 32 32c54.4 0 96 44.8 96 102.4 0 51.2-28.8 89.6-73.6 99.2-16 3.2-28.8 22.4-22.4 38.4 0 16 9.6 28.8 25.6 28.8 70.4 12.8 118.4 54.4 131.2 115.2 3.2 16 16 25.6 32 25.6h6.4c19.2 0 32-16 28.8-35.2zM252.8 499.2c6.4-19.2-6.4-35.2-22.4-41.6C188.8 448 160 409.6 160 358.4 163.2 300.8 201.6 256 256 256c19.2 0 32-12.8 32-32s-16-32-32-32c-89.6 0-156.8 70.4-156.8 166.4 0 51.2 19.2 96 51.2 128-60.8 28.8-105.6 80-118.4 144-3.2 16 6.4 35.2 25.6 38.4H64c16 0 28.8-9.6 32-25.6 12.8-60.8 60.8-102.4 131.2-115.2 16 0 25.6-12.8 25.6-28.8z" /></svg>
--- a/src/assets/svg/handle.svg
+++ b/src/assets/svg/handle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" /></svg>
--- a/src/assets/svg/hardware.svg
+++ b/src/assets/svg/hardware.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M981.333333 533.333333H42.666667l151.68-303.36A85.226667 85.226667 0 0 1 275.626667 170.666667h472.746666c37.12 0 69.973333 23.893333 81.28 59.306666L981.333333 533.333333zM42.666667 597.333333v170.666667c0 47.146667 38.186667 85.333333 85.333333 85.333333h768c47.146667 0 85.333333-38.186667 85.333333-85.333333v-170.666667H42.666667z m778.666666 170.666667h-106.666666c-17.706667 0-32-14.293333-32-32s14.293333-32 32-32h106.666666c17.706667 0 32 14.293333 32 32s-14.293333 32-32 32z" /></svg>
--- a/src/assets/svg/help.svg
+++ b/src/assets/svg/help.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1024 512c0 282.624-229.376 512-512 512S0 794.624 0 512 229.376 0 512 0s512 229.376 512 512z m-510.464 209.408c-23.552 0-43.008 19.456-43.008 43.008v9.728c0 23.552 19.456 42.496 43.008 42.496 23.552 0 43.008-18.944 43.008-42.496v-9.728c0-23.552-19.456-43.008-43.008-43.008z m10.24-481.792c-56.32-1.024-99.84 13.312-129.536 42.496-32.256 31.744-48.64 81.408-48.64 147.456v0.512c1.024 10.752 10.752 30.72 37.376 30.72 26.624 0 35.328-20.48 35.84-31.232-1.024-40.96 8.192-71.168 27.136-89.6 17.92-17.408 45.568-25.6 81.92-23.552 49.664 5.632 74.752 32.768 76.8 82.944-3.584 22.528-23.04 52.224-57.344 88.576C500.224 536.576 476.16 580.608 476.16 619.52v39.424c1.536 9.728 10.752 27.648 35.328 27.648 24.064 0 33.792-17.92 35.328-27.648v-27.648c0-29.696 22.016-66.56 66.048-108.544 48.128-44.032 72.192-85.504 72.192-123.392-4.608-101.888-58.368-155.648-161.28-159.744z" /></svg>
--- a/src/assets/svg/home.svg
+++ b/src/assets/svg/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M116.707556 631.751111a56.888889 56.888889 0 1 1 113.777777 0V910.222222h539.704889V512a56.888889 56.888889 0 1 1 113.777778 0v398.222222a113.777778 113.777778 0 0 1-113.777778 113.777778H230.485333a113.777778 113.777778 0 0 1-113.777777-113.777778v-278.471111z" /><path d="M98.929778 573.070222a56.888889 56.888889 0 0 1-84.081778-76.629333L412.700444 59.904A113.777778 113.777778 0 0 1 578.019556 56.888889l429.710222 438.044444a56.888889 56.888889 0 0 1-81.237334 79.644445L496.810667 136.533333 98.929778 573.098667z" /></svg>
--- a/src/assets/svg/info.svg
+++ b/src/assets/svg/info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 938.715429A426.642286 426.642286 0 1 1 512 85.357714a426.642286 426.642286 0 0 1 0 853.357715z m-42.642286-469.357715v256h85.284572v-256H469.284571z m0-170.642285V384h85.284572V298.715429H469.284571z" /></svg>
--- a/src/assets/svg/java.svg
+++ b/src/assets/svg/java.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M564 96c44.864 105.888-160.864 170.752-180 259.008-17.504 80.992 121.888 176 122.016 176-21.28-33.504-36.768-61.76-58.016-114.016C412 328.736 667.36 249.12 564 96z m136 147.008s-179.872 11.36-188.992 128.992c-4.16 52.384 47.488 79.872 48.992 118.016 1.28 31.104-31.008 56.96-31.008 56.96s57.888-10.464 76-57.984c20-52.736-38.976-88.736-32.992-131.008 5.76-40.352 128-114.976 128-114.976z m44 270.976c-18.88-0.864-40.128 6.144-59.008 20 37.248-8.224 69.024 15.136 69.024 42.016 0 60.256-86.016 116.992-86.016 116.992s132.992-14.88 132.992-113.984c0-40.896-25.6-63.52-56.992-65.024z m-352.992 1.024c-46.4 1.6-139.008 9.248-139.008 44.992 0 49.76 215.744 53.632 370.016 23.008 0 0 41.984-29.248 52.992-40-101.12 20.992-332 24.256-332 5.984 0-16.736 73.984-33.984 73.984-33.984s-10.496-0.512-25.984 0z m-14.016 92c-25.376 0-63.008 19.744-63.008 38.976 0 38.752 191.04 68.512 332.032 12l-49.024-29.984c-95.616 31.264-272.256 20.864-220-20.992z m24 86.976c-34.624 0-56.992 21.888-56.992 38.016 0 49.6 206.88 54.496 288.992 4l-52-34.016c-61.248 26.4-215.36 30.272-180-8z m-116 45.024C228.512 737.888 192 763.488 192 784.96c0 114.368 579.008 108.896 579.008-8 0-19.36-22.88-28.608-31.008-32.992 47.264 111.744-472.992 103.008-472.992 36.992 0-14.976 38.496-29.984 73.984-22.976l-29.984-17.024a190.784 190.784 0 0 0-26.016-1.984zM832 816c-88 85.12-310.72 115.616-535.008 63.008 224.256 93.76 533.888 41.6 535.008-63.008z" /></svg>
--- a/src/assets/svg/jenkins.svg
+++ b/src/assets/svg/jenkins.svg
@@ -1 +1 @@
-<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M487.1 425c-1.4-11.2-19-23.1-28.2-31.9-5.1-5-29-23.1-30.4-29.9-1.4-6.6 9.7-21.5 13.3-28.9 5.1-10.7 8.8-23.7 11.3-32.6 18.8-66.1 20.7-156.9-6.2-211.2-10.2-20.6-38.6-49-56.4-62.5-42-31.7-119.6-35.3-170.1-16.6-14.1 5.2-27.8 9.8-40.1 17.1-33.1 19.4-68.3 32.5-78.1 71.6-24.2 10.8-31.5 41.8-30.3 77.8.2 7 4.1 15.8 2.7 22.4-.7 3.3-5.2 7.6-6.1 9.8-11.6 27.7-2.3 64 11.1 83.7 8.1 11.9 21.5 22.4 39.2 25.2.7 10.6 3.3 19.7 8.2 30.4 3.1 6.8 14.7 19 10.4 27.7-2.2 4.4-21 13.8-27.3 17.6C89 407.2 73.7 415 54.2 429c-12.6 9-32.3 10.2-29.2 31.1 2.1 14.1 10.1 31.6 14.7 45.8.7 2 1.4 4.1 2.1 6h422c4.9-15.3 9.7-30.9 14.6-47.2 3.4-11.4 10.2-27.8 8.7-39.7zM205.9 33.7c1.8-.5 3.4.7 4.9 2.4-.2 5.2-5.4 5.1-8.9 6.8-5.4 6.7-13.4 9.8-20 17.2-6.8 7.5-14.4 27.7-23.4 30-4.5 1.1-9.7-.8-13.6-.5-10.4.7-17.7 6-28.3 7.5 13.6-29.9 56.1-54 89.3-63.4zm-104.8 93.6c13.5-14.9 32.1-24.1 54.8-25.9 11.7 29.7-8.4 65-.9 97.6 2.3 9.9 10.2 25.4-2.4 25.7.3-28.3-34.8-46.3-61.3-29.6-1.8-21.5-4.9-51.7 9.8-67.8zm36.7 200.2c-1-4.1-2.7-12.9-2.3-15.1 1.6-8.7 17.1-12.5 11-24.7-11.3-.1-13.8 10.2-24.1 11.3-26.7 2.6-45.6-35.4-44.4-58.4 1-19.5 17.6-38.2 40.1-35.8 16 1.8 21.4 19.2 24.5 34.7 9.2.5 22.5-.4 26.9-7.6-.6-17.5-8.8-31.6-8.2-47.7 1-30.3 17.5-57.6 4.8-87.4 13.6-30.9 53.5-55.3 83.1-70 36.6-18.3 94.9-3.7 129.3 15.8 19.7 11.1 34.4 32.7 48.3 50.7-19.5-5.8-36.1 4.2-33.1 20.3 16.3-14.9 44.2-.2 52.5 16.4 7.9 15.8 7.8 39.3 9 62.8 2.9 57-10.4 115.9-39.1 157.1-7.7 11-14.1 23-24.9 30.6-26 18.2-65.4 34.7-99.2 23.4-44.7-15-65-44.8-89.5-78.8.7 18.7 13.8 34.1 26.8 48.4 11.3 12.5 25 26.6 39.7 32.4-12.3-2.9-31.1-3.8-36.2 7.2-28.6-1.9-55.1-4.8-68.7-24.2-10.6-15.4-21.4-41.4-26.3-61.4zm222 124.1c4.1-3 11.1-2.9 17.4-3.6-5.4-2.7-13-3.7-19.3-2.2-.1-4.2-2-6.8-3.2-10.2 10.6-3.8 35.5-28.5 49.6-20.3 6.7 3.9 9.5 26.2 10.1 37 .4 9-.8 18-4.5 22.8-18.8-.6-35.8-2.8-50.7-7 .9-6.1-1-12.1.6-16.5zm-17.2-20c-16.8.8-26-1.2-38.3-10.8.2-.8 1.4-.5 1.5-1.4 18 8 40.8-3.3 59-4.9-7.9 5.1-14.6 11.6-22.2 17.1zm-12.1 33.2c-1.6-9.4-3.5-12-2.8-20.2 25-16.6 29.7 28.6 2.8 20.2zM226 438.6c-11.6-.7-48.1-14-38.5-23.7 9.4 6.5 27.5 4.9 41.3 7.3.8 4.4-2.8 10.2-2.8 16.4zM57.7 497.1c-4.3-12.7-9.2-25.1-14.8-36.9 30.8-23.8 65.3-48.9 102.2-63.5 2.8-1.1 23.2 25.4 26.2 27.6 16.5 11.7 37 21 56.2 30.2 1.2 8.8 3.9 20.2 8.7 35.5.7 2.3 1.4 4.7 2.2 7.2H57.7zm240.6 5.7h-.8c.3-.2.5-.4.8-.5v.5zm7.5-5.7c2.1-1.4 4.3-2.8 6.4-4.3 1.1 1.4 2.2 2.8 3.2 4.3h-9.6zm15.1-24.7c-10.8 7.3-20.6 18.3-33.3 25.2-6 3.3-27 11.7-33.4 10.2-3.6-.8-3.9-5.3-5.4-9.5-3.1-9-10.1-23.4-10.8-37-.8-17.2-2.5-46 16-42.4 14.9 2.9 32.3 9.7 43.9 16.1 7.1 3.9 11.1 8.6 21.9 9.5-.1 1.4-.1 2.8-.2 4.3-5.9 3.9-15.3 3.8-21.8 7.1 9.5.4 17 2.7 23.5 5.9-.1 3.4-.3 7-.4 10.6zm53.4 24.7h-14c-.1-3.2-2.8-5.8-6.1-5.8s-5.9 2.6-6.1 5.8h-17.4c-2.8-4.4-5.7-8.6-8.9-12.5 2.1-2.2 4-4.7 6-6.9 9 3.7 14.8-4.9 21.7-4.2 7.9.8 14.2 11.7 25.4 11l-.6 12.6zm8.7 0c.2-4 .4-7.8.6-11.5 15.6-7.3 29 1.3 35.7 11.5H383zm83.4-37c-2.3 11.2-5.8 24-9.9 37.1-.2-.1-.4-.1-.6-.1H428c.6-1.1 1.2-2.2 1.9-3.3-2.6-6.1-9-8.7-10.9-15.5 12.1-22.7 6.5-93.4-24.2-78.5 4.3-6.3 15.6-11.5 20.8-19.3 13 10.4 20.8 20.3 33.2 31.4 6.8 6 20 13.3 21.4 23.1.8 5.5-2.6 18.9-3.8 25.1zM222.2 130.5c5.4-14.9 27.2-34.7 45-32 7.7 1.2 18 8.2 12.2 17.7-30.2-7-45.2 12.6-54.4 33.1-8.1-2-4.9-13.1-2.8-18.8zm184.1 63.1c8.2-3.6 22.4-.7 29.6-5.3-4.2-11.5-10.3-21.4-9.3-37.7.5 0 1 0 1.4.1 6.8 14.2 12.7 29.2 21.4 41.7-5.7 13.5-43.6 25.4-43.1 1.2zm20.4-43zm-117.2 45.7c-6.8-10.9-19-32.5-14.5-45.3 6.5 11.9 8.6 24.4 17.8 33.3 4.1 4 12.2 9 8.2 20.2-.9 2.7-7.8 8.6-11.7 9.7-14.4 4.3-47.9.9-36.6-17.1 11.9.7 27.9 7.8 36.8-.8zm27.3 70c3.8 6.6 1.4 18.7 12.1 20.6 20.2 3.4 43.6-12.3 58.1-17.8 9-15.2-.8-20.7-8.9-30.5-16.6-20-38.8-44.8-38-74.7 6.7-4.9 7.3 7.4 8.2 9.7 8.7 20.3 30.4 46.2 46.3 63.5 3.9 4.3 10.3 8.4 11 11.2 2.1 8.2-5.4 18-4.5 23.5-21.7 13.9-45.8 29.1-81.4 25.6-7.4-6.7-10.3-21.4-2.9-31.1zm-201.3-9.2c-6.8-3.9-8.4-21-16.4-21.4-11.4-.7-9.3 22.2-9.3 35.5-7.8-7.1-9.2-29.1-3.5-40.3-6.6-3.2-9.5 3.6-13.1 5.9 4.7-34.1 49.8-15.8 42.3 20.3zm299.6 28.8c-10.1 19.2-24.4 40.4-54 41-.6-6.2-1.1-15.6 0-19.4 22.7-2.2 36.6-13.7 54-21.6zm-141.9 12.4c18.9 9.9 53.6 11 79.3 10.2 1.4 5.6 1.3 12.6 1.4 19.4-33 1.8-72-6.4-80.7-29.6zm92.2 46.7c-1.7 4.3-5.3 9.3-9.8 11.1-12.1 4.9-45.6 8.7-62.4-.3-10.7-5.7-17.5-18.5-23.4-26-2.8-3.6-16.9-12.9-.2-12.9 13.1 32.7 58 29 95.8 28.1z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M487.1 425c-1.4-11.2-19-23.1-28.2-31.9-5.1-5-29-23.1-30.4-29.9-1.4-6.6 9.7-21.5 13.3-28.9 5.1-10.7 8.8-23.7 11.3-32.6 18.8-66.1 20.7-156.9-6.2-211.2-10.2-20.6-38.6-49-56.4-62.5-42-31.7-119.6-35.3-170.1-16.6-14.1 5.2-27.8 9.8-40.1 17.1-33.1 19.4-68.3 32.5-78.1 71.6-24.2 10.8-31.5 41.8-30.3 77.8.2 7 4.1 15.8 2.7 22.4-.7 3.3-5.2 7.6-6.1 9.8-11.6 27.7-2.3 64 11.1 83.7 8.1 11.9 21.5 22.4 39.2 25.2.7 10.6 3.3 19.7 8.2 30.4 3.1 6.8 14.7 19 10.4 27.7-2.2 4.4-21 13.8-27.3 17.6C89 407.2 73.7 415 54.2 429c-12.6 9-32.3 10.2-29.2 31.1 2.1 14.1 10.1 31.6 14.7 45.8.7 2 1.4 4.1 2.1 6h422c4.9-15.3 9.7-30.9 14.6-47.2 3.4-11.4 10.2-27.8 8.7-39.7zM205.9 33.7c1.8-.5 3.4.7 4.9 2.4-.2 5.2-5.4 5.1-8.9 6.8-5.4 6.7-13.4 9.8-20 17.2-6.8 7.5-14.4 27.7-23.4 30-4.5 1.1-9.7-.8-13.6-.5-10.4.7-17.7 6-28.3 7.5 13.6-29.9 56.1-54 89.3-63.4zm-104.8 93.6c13.5-14.9 32.1-24.1 54.8-25.9 11.7 29.7-8.4 65-.9 97.6 2.3 9.9 10.2 25.4-2.4 25.7.3-28.3-34.8-46.3-61.3-29.6-1.8-21.5-4.9-51.7 9.8-67.8zm36.7 200.2c-1-4.1-2.7-12.9-2.3-15.1 1.6-8.7 17.1-12.5 11-24.7-11.3-.1-13.8 10.2-24.1 11.3-26.7 2.6-45.6-35.4-44.4-58.4 1-19.5 17.6-38.2 40.1-35.8 16 1.8 21.4 19.2 24.5 34.7 9.2.5 22.5-.4 26.9-7.6-.6-17.5-8.8-31.6-8.2-47.7 1-30.3 17.5-57.6 4.8-87.4 13.6-30.9 53.5-55.3 83.1-70 36.6-18.3 94.9-3.7 129.3 15.8 19.7 11.1 34.4 32.7 48.3 50.7-19.5-5.8-36.1 4.2-33.1 20.3 16.3-14.9 44.2-.2 52.5 16.4 7.9 15.8 7.8 39.3 9 62.8 2.9 57-10.4 115.9-39.1 157.1-7.7 11-14.1 23-24.9 30.6-26 18.2-65.4 34.7-99.2 23.4-44.7-15-65-44.8-89.5-78.8.7 18.7 13.8 34.1 26.8 48.4 11.3 12.5 25 26.6 39.7 32.4-12.3-2.9-31.1-3.8-36.2 7.2-28.6-1.9-55.1-4.8-68.7-24.2-10.6-15.4-21.4-41.4-26.3-61.4zm222 124.1c4.1-3 11.1-2.9 17.4-3.6-5.4-2.7-13-3.7-19.3-2.2-.1-4.2-2-6.8-3.2-10.2 10.6-3.8 35.5-28.5 49.6-20.3 6.7 3.9 9.5 26.2 10.1 37 .4 9-.8 18-4.5 22.8-18.8-.6-35.8-2.8-50.7-7 .9-6.1-1-12.1.6-16.5zm-17.2-20c-16.8.8-26-1.2-38.3-10.8.2-.8 1.4-.5 1.5-1.4 18 8 40.8-3.3 59-4.9-7.9 5.1-14.6 11.6-22.2 17.1zm-12.1 33.2c-1.6-9.4-3.5-12-2.8-20.2 25-16.6 29.7 28.6 2.8 20.2zM226 438.6c-11.6-.7-48.1-14-38.5-23.7 9.4 6.5 27.5 4.9 41.3 7.3.8 4.4-2.8 10.2-2.8 16.4zM57.7 497.1c-4.3-12.7-9.2-25.1-14.8-36.9 30.8-23.8 65.3-48.9 102.2-63.5 2.8-1.1 23.2 25.4 26.2 27.6 16.5 11.7 37 21 56.2 30.2 1.2 8.8 3.9 20.2 8.7 35.5.7 2.3 1.4 4.7 2.2 7.2H57.7zm240.6 5.7h-.8c.3-.2.5-.4.8-.5v.5zm7.5-5.7c2.1-1.4 4.3-2.8 6.4-4.3 1.1 1.4 2.2 2.8 3.2 4.3h-9.6zm15.1-24.7c-10.8 7.3-20.6 18.3-33.3 25.2-6 3.3-27 11.7-33.4 10.2-3.6-.8-3.9-5.3-5.4-9.5-3.1-9-10.1-23.4-10.8-37-.8-17.2-2.5-46 16-42.4 14.9 2.9 32.3 9.7 43.9 16.1 7.1 3.9 11.1 8.6 21.9 9.5-.1 1.4-.1 2.8-.2 4.3-5.9 3.9-15.3 3.8-21.8 7.1 9.5.4 17 2.7 23.5 5.9-.1 3.4-.3 7-.4 10.6zm53.4 24.7h-14c-.1-3.2-2.8-5.8-6.1-5.8s-5.9 2.6-6.1 5.8h-17.4c-2.8-4.4-5.7-8.6-8.9-12.5 2.1-2.2 4-4.7 6-6.9 9 3.7 14.8-4.9 21.7-4.2 7.9.8 14.2 11.7 25.4 11l-.6 12.6zm8.7 0c.2-4 .4-7.8.6-11.5 15.6-7.3 29 1.3 35.7 11.5H383zm83.4-37c-2.3 11.2-5.8 24-9.9 37.1-.2-.1-.4-.1-.6-.1H428c.6-1.1 1.2-2.2 1.9-3.3-2.6-6.1-9-8.7-10.9-15.5 12.1-22.7 6.5-93.4-24.2-78.5 4.3-6.3 15.6-11.5 20.8-19.3 13 10.4 20.8 20.3 33.2 31.4 6.8 6 20 13.3 21.4 23.1.8 5.5-2.6 18.9-3.8 25.1zM222.2 130.5c5.4-14.9 27.2-34.7 45-32 7.7 1.2 18 8.2 12.2 17.7-30.2-7-45.2 12.6-54.4 33.1-8.1-2-4.9-13.1-2.8-18.8zm184.1 63.1c8.2-3.6 22.4-.7 29.6-5.3-4.2-11.5-10.3-21.4-9.3-37.7.5 0 1 0 1.4.1 6.8 14.2 12.7 29.2 21.4 41.7-5.7 13.5-43.6 25.4-43.1 1.2zm20.4-43zm-117.2 45.7c-6.8-10.9-19-32.5-14.5-45.3 6.5 11.9 8.6 24.4 17.8 33.3 4.1 4 12.2 9 8.2 20.2-.9 2.7-7.8 8.6-11.7 9.7-14.4 4.3-47.9.9-36.6-17.1 11.9.7 27.9 7.8 36.8-.8zm27.3 70c3.8 6.6 1.4 18.7 12.1 20.6 20.2 3.4 43.6-12.3 58.1-17.8 9-15.2-.8-20.7-8.9-30.5-16.6-20-38.8-44.8-38-74.7 6.7-4.9 7.3 7.4 8.2 9.7 8.7 20.3 30.4 46.2 46.3 63.5 3.9 4.3 10.3 8.4 11 11.2 2.1 8.2-5.4 18-4.5 23.5-21.7 13.9-45.8 29.1-81.4 25.6-7.4-6.7-10.3-21.4-2.9-31.1zm-201.3-9.2c-6.8-3.9-8.4-21-16.4-21.4-11.4-.7-9.3 22.2-9.3 35.5-7.8-7.1-9.2-29.1-3.5-40.3-6.6-3.2-9.5 3.6-13.1 5.9 4.7-34.1 49.8-15.8 42.3 20.3zm299.6 28.8c-10.1 19.2-24.4 40.4-54 41-.6-6.2-1.1-15.6 0-19.4 22.7-2.2 36.6-13.7 54-21.6zm-141.9 12.4c18.9 9.9 53.6 11 79.3 10.2 1.4 5.6 1.3 12.6 1.4 19.4-33 1.8-72-6.4-80.7-29.6zm92.2 46.7c-1.7 4.3-5.3 9.3-9.8 11.1-12.1 4.9-45.6 8.7-62.4-.3-10.7-5.7-17.5-18.5-23.4-26-2.8-3.6-16.9-12.9-.2-12.9 13.1 32.7 58 29 95.8 28.1z" /></svg>
--- a/src/assets/svg/loading.svg
+++ b/src/assets/svg/loading.svg
@@ -1 +1 @@
-<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3 0.1 19.9-16 36-35.9 36z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3 0.1 19.9-16 36-35.9 36z" /></svg>
--- a/src/assets/svg/lock.svg
+++ b/src/assets/svg/lock.svg
@@ -0,0 +1 @@
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 725.333333c46.933333 0 85.333333-38.4 85.333333-85.333333s-38.4-85.333333-85.333333-85.333333-85.333333 38.4-85.333333 85.333333 38.4 85.333333 85.333333 85.333333z m256-384h-42.666667v-85.333333c0-117.76-95.573333-213.333333-213.333333-213.333333S298.666667 138.24 298.666667 256v85.333333h-42.666667c-46.933333 0-85.333333 38.4-85.333333 85.333334v426.666666c0 46.933333 38.4 85.333333 85.333333 85.333334h512c46.933333 0 85.333333-38.4 85.333333-85.333334V426.666667c0-46.933333-38.4-85.333333-85.333333-85.333334z m-388.266667-85.333333c0-72.96 59.306667-132.266667 132.266667-132.266667s132.266667 59.306667 132.266667 132.266667v85.333333H379.733333v-85.333333zM768 853.333333H256V426.666667h512v426.666666z" /></svg>
--- a/src/assets/svg/log.svg
+++ b/src/assets/svg/log.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M298.666667 298.666667c17.066667 0 32-14.933333 32-32v-128c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v128c0 17.066667 14.933333 32 32 32zM576 298.666667c17.066667 0 32-14.933333 32-32v-128c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v128c0 17.066667 14.933333 32 32 32z" /><path d="M469.333333 725.333333c0-104.533333 64-196.266667 153.6-234.666666H224c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h405.333333c17.066667 0 32 14.933333 32 32 0 8.533333-4.266667 14.933333-8.533333 21.333333 23.466667-6.4 46.933333-10.666667 72.533333-10.666667 6.4 0 14.933333 0 21.333334 2.133334V277.333333c0-46.933333-38.4-85.333333-85.333334-85.333333v74.666667c0 53.333333-42.666667 96-96 96S469.333333 320 469.333333 266.666667V192h-85.333333v74.666667c0 53.333333-42.666667 96-96 96S192 320 192 266.666667V192c-46.933333 0-85.333333 38.4-85.333333 85.333333v554.666667c0 46.933333 38.4 85.333333 85.333333 85.333333h364.8c-53.333333-46.933333-87.466667-115.2-87.466667-192z m-53.333333 21.333334h-192c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h192c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z m0-128h-192c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h192c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z" /><path d="M725.333333 533.333333c-106.666667 0-192 87.466667-192 192s87.466667 192 192 192 192-87.466667 192-192-85.333333-192-192-192z m74.666667 256h-106.666667c-17.066667 0-32-14.933333-32-32v-128c0-17.066667 14.933333-32 32-32s32 14.933333 32 32V725.333333h74.666667c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z" /></svg>
--- a/src/assets/svg/logo.svg
+++ b/src/assets/svg/logo.svg
--- a/src/assets/svg/memory.svg
+++ b/src/assets/svg/memory.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024"><path d="M1280 261.88V192c0-35.34-28.66-64-64-64H64C28.66 128 0 156.66 0 192v69.88c37.2 13.22 64 48.38 64 90.12s-26.8 76.9-64 90.12V640h1280v-197.88c-37.2-13.22-64-48.38-64-90.12s26.8-76.9 64-90.12zM448 512h-128V256h128v256z m256 0h-128V256h128v256z m256 0h-128V256h128v256zM0 896h128v-53.34c0-17.68 14.32-32 32-32s32 14.32 32 32V896h256v-53.34c0-17.68 14.32-32 32-32s32 14.32 32 32V896h256v-53.34c0-17.68 14.32-32 32-32s32 14.32 32 32V896h256v-53.34c0-17.68 14.32-32 32-32s32 14.32 32 32V896h128v-192H0v192z" /></svg>
--- a/src/assets/svg/menu.svg
+++ b/src/assets/svg/menu.svg
@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M950.784 768v72.704q0 15.36-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264t-11.264-25.6V768q0-15.36 11.264-25.6t25.6-11.264h803.84q15.36 0 26.624 11.264t10.24 25.6z m0-292.864v73.728q0 14.336-10.24 25.6t-26.624 10.24H110.08q-15.36 0-25.6-10.24t-11.264-25.6v-73.728q0-14.336 11.264-25.6t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 25.6z m0-291.84V256q0 14.336-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264T73.216 256V183.296q0-15.36 11.264-26.624t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 26.624z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M950.784 768v72.704q0 15.36-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264t-11.264-25.6V768q0-15.36 11.264-25.6t25.6-11.264h803.84q15.36 0 26.624 11.264t10.24 25.6z m0-292.864v73.728q0 14.336-10.24 25.6t-26.624 10.24H110.08q-15.36 0-25.6-10.24t-11.264-25.6v-73.728q0-14.336 11.264-25.6t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 25.6z m0-291.84V256q0 14.336-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264T73.216 256V183.296q0-15.36 11.264-26.624t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 26.624z" /></svg>
--- a/src/assets/svg/mobile.svg
+++ b/src/assets/svg/mobile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M768 64a64 64 0 0 1 64 64v768a64 64 0 0 1-64 64H256a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h512z m-32 64H288a32 32 0 0 0-32 32v704a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32z m-223.488 608a48 48 0 1 1 0 96 48 48 0 0 1 0-96z" /></svg>
--- a/src/assets/svg/more.svg
+++ b/src/assets/svg/more.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M243.2 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /><path d="M512 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /><path d="M780.8 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /></svg>
--- a/src/assets/svg/newProject.svg
+++ b/src/assets/svg/newProject.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M899.5 288.4L528 74c-9.9-5.7-22.1-5.7-32 0L140.3 278.9c-10 5.6-16.1 16.2-16.2 27.6l-0.1 410.6c0 11.4 6.1 22 16 27.7L512 959v0.1c20-11.4 32-32.5 32-55.3l-0.1-372.6 323.7-187.3c19.7-11.5 31.9-32.6 31.9-55.5zM188 698.7V362.4l292 168.7v335.7L188 698.7z m323.8-223L220.4 306.9 512 138.7 803.6 307 511.8 475.7z" /><path d="M928 672H800V544c0-17.7-14.3-32-32-32s-32 14.3-32 32v128H608c-17.7 0-32 14.3-32 32s14.3 32 32 32h128v128c0 17.7 14.3 32 32 32s32-14.3 32-32V736h128c17.7 0 32-14.3 32-32s-14.3-32-32-32z" /></svg>
--- a/src/assets/svg/online.svg
+++ b/src/assets/svg/online.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M739.584 575.561143A365.824 365.824 0 0 0 513.828571 950.857143H73.142857c0-242.358857 196.498286-438.857143 438.857143-438.857143 83.346286 0 161.243429 23.222857 227.584 63.561143zM512 512a219.428571 219.428571 0 1 1 0-438.857143 219.428571 219.428571 0 0 1 0 438.857143z m182.857143 146.285714h256v73.142857h-256v-73.142857z m-73.142857 109.714286h329.142857v73.142857h-329.142857v-73.142857z m-36.571429 109.714286h365.714286v73.142857H585.142857v-73.142857z" /></svg>
--- a/src/assets/svg/option.svg
+++ b/src/assets/svg/option.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M810.666667 384a128 128 0 0 0-120.32 85.333333H128a42.666667 42.666667 0 0 0 0 85.333334h562.346667A128 128 0 1 0 810.666667 384zM128 298.666667h50.346667a128 128 0 0 0 240.64 0H896a42.666667 42.666667 0 0 0 0-85.333334H418.986667a128 128 0 0 0-240.64 0H128a42.666667 42.666667 0 0 0 0 85.333334zM896 725.333333h-306.346667a128 128 0 0 0-240.64 0H128a42.666667 42.666667 0 0 0 0 85.333334h221.013333a128 128 0 0 0 240.64 0H896a42.666667 42.666667 0 0 0 0-85.333334z" /></svg>
--- a/src/assets/svg/password.svg
+++ b/src/assets/svg/password.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M768 426.666667V341.333333A256 256 0 0 0 256 341.333333v85.333334a85.333333 85.333333 0 0 0-85.333333 85.333333v341.333333a85.333333 85.333333 0 0 0 85.333333 85.333334h512a85.333333 85.333333 0 0 0 85.333333-85.333334v-341.333333a85.333333 85.333333 0 0 0-85.333333-85.333333zM341.333333 341.333333a170.666667 170.666667 0 0 1 341.333334 0v85.333334H341.333333z m298.666667 320a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333z m-170.666667 0a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333z m-170.666666 42.666667v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333z" /></svg>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1024"><path d="M265.216 920.348444a41.472 41.472 0 0 1-41.415111-42.211555v-215.608889a42.154667 42.154667 0 1 1 83.512889 0v215.608889a42.097778 42.097778 0 0 1-42.097778 42.211555z m207.701333 0a41.472 41.472 0 0 1-41.358222-42.211555V536.689778a42.097778 42.097778 0 0 1 83.512889 0v340.764444a42.097778 42.097778 0 0 1-42.097778 42.894222z m207.758223 0a41.472 41.472 0 0 1-41.358223-42.211555V728.177778a42.097778 42.097778 0 0 1 83.512889 0v149.959111a42.097778 42.097778 0 0 1-42.097778 42.211555z m207.758222 0a41.472 41.472 0 0 1-41.415111-42.211555v-276.48a42.154667 42.154667 0 1 1 83.569777 0v279.950222a42.097778 42.097778 0 0 1-42.097777 38.684445zM210.659556 502.101333a41.415111 41.415111 0 0 1-33.792-16.554666 42.211556 42.211556 0 0 1 10.353777-58.766223l300.202667-231.537777a42.723556 42.723556 0 0 1 51.768889 0l138.069333 112.64 222.947556-185.969778a41.756444 41.756444 0 0 1 53.816889 63.601778l-247.808 208.782222a41.358222 41.358222 0 0 1-53.134223 0L515.072 280.917333 238.933333 493.112889a42.723556 42.723556 0 0 1-28.273777 8.988444z" /><path d="M927.118222 336.896a42.097778 42.097778 0 0 1-42.097778-41.472V179.313778h-117.361777a42.154667 42.154667 0 0 1 0-83.626667h159.459555a42.097778 42.097778 0 0 1 42.097778 41.415111v158.321778a42.097778 42.097778 0 0 1-42.097778 41.528889z" /></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M482.133333 738.133333L136.533333 392.533333c-17.066667-17.066667-17.066667-42.666667 0-59.733333 8.533333-8.533333 19.2-12.8 29.866667-12.8h689.066667c23.466667 0 42.666667 19.2 42.666666 42.666667 0 10.666667-4.266667 21.333333-12.8 29.866666L541.866667 738.133333c-17.066667 17.066667-42.666667 17.066667-59.733334 0z" /></svg>`