migrate frontend

web/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["prettier"]
+}

web/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+.yarn/*

web/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 140,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false
+}

web/LICENSE

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

web/README.md

@@ -0,0 +1 @@
+# Memos web

web/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/logo.svg" sizes="64x64" type="image/*" />
+    <meta name="theme-color" content="#f6f5f4" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+    <title>Memos</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-QMWPX445H6"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-QMWPX445H6");
+    </script>
+  </body>
+</html>

web/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "memos",
+  "version": "2.0.6",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "prismjs": "^1.25.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "tiny-undo": "^0.0.8"
+  },
+  "devDependencies": {
+    "@types/prismjs": "^1.16.6",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@vitejs/plugin-react": "^1.0.0",
+    "less": "^4.1.1",
+    "typescript": "^4.3.2",
+    "vite": "^2.6.14"
+  },
+  "license": "MIT"
+}

web/public/icons/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/></svg>

web/public/icons/arrow-right-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>

web/public/icons/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>

web/public/icons/checkbox-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42-6.59 6.59-2.58-2.57-1.42 1.41 4 3.99z"/></svg>

web/public/icons/checkbox.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>

web/public/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>

web/public/icons/edit-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>

web/public/icons/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>

web/public/icons/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>

web/public/icons/more-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>

web/public/icons/more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>

web/public/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>

web/public/icons/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><g><rect fill="none" height="24" width="24"/></g><g><path d="M16,5l-1.42,1.42l-1.59-1.59V16h-1.98V4.83L9.42,6.42L8,5l4-4L16,5z M20,10v11c0,1.1-0.9,2-2,2H6c-1.11,0-2-0.9-2-2V10 c0-1.11,0.89-2,2-2h3v2H6v11h12V10h-3V8h3C19.1,8,20,8.89,20,10z"/></g></svg>

web/public/icons/tag.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M20,10V8h-4V4h-2v4h-4V4H8v4H4v2h4v4H4v2h4v4h2v-4h4v4h2v-4h4v-2h-4v-4H20z M14,14h-4v-4h4V14z"/></g></svg>

web/public/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="0.1em" y=".9em" font-size="90">✍️</text></svg>

web/src/App.tsx

@@ -0,0 +1,30 @@
+import { useContext, useEffect } from "react";
+import appContext from "./stores/appContext";
+import { appRouterSwitch } from "./routers";
+import { globalStateService } from "./services";
+import "./less/app.less";
+import 'prismjs/themes/prism.css';
+
+function App() {
+  const {
+    locationState: { pathname },
+  } = useContext(appContext);
+
+  useEffect(() => {
+    const handleWindowResize = () => {
+      globalStateService.setIsMobileView(document.body.clientWidth <= 875);
+    };
+
+    handleWindowResize();
+
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  return <>{appRouterSwitch(pathname)}</>;
+}
+
+export default App;

web/src/components/AboutSiteDialog.tsx

@@ -0,0 +1,67 @@
+import { showDialog } from "./Dialog";
+import "../less/about-site-dialog.less";
+
+interface Props extends DialogProps {}
+
+const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
+  const handleCloseBtnClick = () => {
+    destroy();
+  };
+
+  return (
+    <>
+      <div className="dialog-header-container">
+        <p className="title-text">
+          <span className="icon-text">🤠</span>关于 <b>Memos</b>
+        </p>
+        <button className="btn close-btn" onClick={handleCloseBtnClick}>
+          <img className="icon-img" src="/icons/close.svg" />
+        </button>
+      </div>
+      <div className="dialog-content-container">
+        <p>一个碎片化知识记录工具。</p>
+        <br />
+        <i>为何做这个？</i>
+        <ul>
+          <li>
+            实践 <strong>卢曼卡片盒笔记法</strong>；
+          </li>
+          <li>用于记录：📅 每日/周计划、💡 突发奇想、📕 读后感...</li>
+          <li>代替了我在微信上经常使用的“文件传输助手”；</li>
+          <li>打造一个属于自己的轻量化“卡片”笔记簿；</li>
+        </ul>
+        <br />
+        <i>有何特点呢？</i>
+        <ul>
+          <li>
+            ✨{" "}
+            <a target="_blank" href="https://github.com/boojack/insmemo-web" rel="noreferrer">
+              开源项目
+            </a>
+          </li>
+          <li>😋 精美且细节的视觉样式；</li>
+          <li>📑 体验优良的交互逻辑；</li>
+        </ul>
+        <br />
+        <a target="_blank" href="https://github.com/boojack/insmemo-web/discussions" rel="noreferrer">
+          🤔 问题反馈
+        </a>
+        <br />
+        <p>Enjoy it and have fun~ </p>
+        <hr />
+        <p className="normal-text">
+          Last updated on <span className="pre-text">2021/11/26 16:17:44</span> 🎉
+        </p>
+      </div>
+    </>
+  );
+};
+
+export default function showAboutSiteDialog(): void {
+  showDialog(
+    {
+      className: "about-site-dialog",
+    },
+    AboutSiteDialog
+  );
+}

web/src/components/BindWxUserIdDialog.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from "react";
+import { userService } from "../services";
+import { showDialog } from "./Dialog";
+import toastHelper from "./Toast";
+import "../less/change-password-dialog.less";
+
+interface Props extends DialogProps {}
+
+const BindWxUserIdDialog: React.FC<Props> = ({ destroy }: Props) => {
+  const [wxUserId, setWxUserId] = useState("");
+
+  useEffect(() => {
+    // do nth
+  }, []);
+
+  const handleCloseBtnClick = () => {
+    destroy();
+  };
+
+  const handleWxUserIdChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setWxUserId(text);
+  };
+
+  const handleSaveBtnClick = async () => {
+    if (wxUserId === "") {
+      toastHelper.error("微信 id 不能为空");
+      return;
+    }
+
+    try {
+      await userService.updateWxUserId(wxUserId);
+      userService.doSignIn();
+      toastHelper.info("绑定成功！");
+      handleCloseBtnClick();
+    } catch (error: any) {
+      toastHelper.error(error);
+    }
+  };
+
+  return (
+    <>
+      <div className="dialog-header-container">
+        <p className="title-text">绑定微信 OpenID</p>
+        <button className="btn close-btn" onClick={handleCloseBtnClick}>
+          <img className="icon-img" src="/icons/close.svg" />
+        </button>
+      </div>
+      <div className="dialog-content-container">
+        <p className="tip-text">
+          关注微信公众号“小谈闲事”，主动发送任意消息，即可获取 <strong>OpenID</strong> 。
+        </p>
+        <label className="form-label input-form-label">
+          <span className={"normal-text " + (wxUserId === "" ? "" : "not-null")}>微信 OpenID</span>
+          <input type="text" value={wxUserId} onChange={handleWxUserIdChanged} />
+        </label>
+        <div className="btns-container">
+          <span className="btn cancel-btn" onClick={handleCloseBtnClick}>
+            取消
+          </span>
+          <span className="btn confirm-btn" onClick={handleSaveBtnClick}>
+            保存
+          </span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+function showBindWxUserIdDialog() {
+  showDialog(
+    {
+      className: "bind-wxid-dialog",
+    },
+    BindWxUserIdDialog
+  );
+}
+
+export default showBindWxUserIdDialog;

web/src/components/ChangePasswordDialog.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState } from "react";
+import { validate, ValidatorConfig } from "../helpers/validator";
+import { userService } from "../services";
+import { showDialog } from "./Dialog";
+import toastHelper from "./Toast";
+import "../less/change-password-dialog.less";
+
+const validateConfig: ValidatorConfig = {
+  minLength: 4,
+  maxLength: 24,
+  noSpace: true,
+  noChinese: true,
+};
+
+interface Props extends DialogProps {}
+
+const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [newPasswordAgain, setNewPasswordAgain] = useState("");
+
+  useEffect(() => {
+    // do nth
+  }, []);
+
+  const handleCloseBtnClick = () => {
+    destroy();
+  };
+
+  const handleOldPasswordChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setOldPassword(text);
+  };
+
+  const handleNewPasswordChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setNewPassword(text);
+  };
+
+  const handleNewPasswordAgainChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setNewPasswordAgain(text);
+  };
+
+  const handleSaveBtnClick = async () => {
+    if (oldPassword === "" || newPassword === "" || newPasswordAgain === "") {
+      toastHelper.error("密码不能为空");
+      return;
+    }
+
+    if (newPassword !== newPasswordAgain) {
+      toastHelper.error("新密码两次输入不一致");
+      setNewPasswordAgain("");
+      return;
+    }
+
+    const passwordValidResult = validate(newPassword, validateConfig);
+    if (!passwordValidResult.result) {
+      toastHelper.error("密码 " + passwordValidResult.reason);
+      return;
+    }
+
+    try {
+      const isValid = await userService.checkPasswordValid(oldPassword);
+
+      if (!isValid) {
+        toastHelper.error("旧密码不匹配");
+        setOldPassword("");
+        return;
+      }
+
+      await userService.updatePassword(newPassword);
+      toastHelper.info("密码修改成功！");
+      handleCloseBtnClick();
+    } catch (error: any) {
+      toastHelper.error(error);
+    }
+  };
+
+  return (
+    <>
+      <div className="dialog-header-container">
+        <p className="title-text">修改密码</p>
+        <button className="btn close-btn" onClick={handleCloseBtnClick}>
+          <img className="icon-img" src="/icons/close.svg" />
+        </button>
+      </div>
+      <div className="dialog-content-container">
+        <label className="form-label input-form-label">
+          <span className={"normal-text " + (oldPassword === "" ? "" : "not-null")}>旧密码</span>
+          <input type="password" value={oldPassword} onChange={handleOldPasswordChanged} />
+        </label>
+        <label className="form-label input-form-label">
+          <span className={"normal-text " + (newPassword === "" ? "" : "not-null")}>新密码</span>
+          <input type="password" value={newPassword} onChange={handleNewPasswordChanged} />
+        </label>
+        <label className="form-label input-form-label">
+          <span className={"normal-text " + (newPasswordAgain === "" ? "" : "not-null")}>再次输入新密码</span>
+          <input type="password" value={newPasswordAgain} onChange={handleNewPasswordAgainChanged} />
+        </label>
+        <div className="btns-container">
+          <span className="btn cancel-btn" onClick={handleCloseBtnClick}>
+            取消
+          </span>
+          <span className="btn confirm-btn" onClick={handleSaveBtnClick}>
+            保存
+          </span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+function showChangePasswordDialog() {
+  showDialog(
+    {
+      className: "change-password-dialog",
+    },
+    ChangePasswordDialog
+  );
+}
+
+export default showChangePasswordDialog;

web/src/components/CreateQueryDialog.tsx

@@ -0,0 +1,307 @@
+import React, { memo, useCallback, useEffect, useState } from "react";
+import { memoService, queryService } from "../services";
+import { checkShouldShowMemoWithFilters, filterConsts, getDefaultFilter, relationConsts } from "../helpers/filter";
+import useLoading from "../hooks/useLoading";
+import { showDialog } from "./Dialog";
+import toastHelper from "./Toast";
+import Selector from "./common/Selector";
+import "../less/create-query-dialog.less";
+
+interface Props extends DialogProps {
+  queryId?: string;
+}
+
+const CreateQueryDialog: React.FC<Props> = (props: Props) => {
+  const { destroy, queryId } = props;
+
+  const [title, setTitle] = useState<string>("");
+  const [filters, setFilters] = useState<Filter[]>([]);
+  const requestState = useLoading(false);
+
+  const shownMemoLength = memoService.getState().memos.filter((memo) => {
+    return checkShouldShowMemoWithFilters(memo, filters);
+  }).length;
+
+  useEffect(() => {
+    const queryTemp = queryService.getQueryById(queryId ?? "");
+    if (queryTemp) {
+      setTitle(queryTemp.title);
+      const temp = JSON.parse(queryTemp.querystring);
+      if (Array.isArray(temp)) {
+        setFilters(temp);
+      }
+    }
+  }, [queryId]);
+
+  const handleTitleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setTitle(text);
+  };
+
+  const handleSaveBtnClick = async () => {
+    if (!title) {
+      toastHelper.error("标题不能为空！");
+      return;
+    }
+
+    try {
+      if (queryId) {
+        const editedQuery = await queryService.updateQuery(queryId, title, JSON.stringify(filters));
+        queryService.editQuery(editedQuery);
+      } else {
+        const query = await queryService.createQuery(title, JSON.stringify(filters));
+        queryService.pushQuery(query);
+      }
+    } catch (error: any) {
+      toastHelper.error(error.message);
+    }
+    destroy();
+  };
+
+  const handleAddFilterBenClick = () => {
+    if (filters.length > 0) {
+      const lastFilter = filters[filters.length - 1];
+      if (lastFilter.value.value === "") {
+        toastHelper.info("先完善上一个过滤器吧");
+        return;
+      }
+    }
+
+    setFilters([...filters, getDefaultFilter()]);
+  };
+
+  const handleFilterChange = useCallback((index: number, filter: Filter) => {
+    setFilters((filters) => {
+      const temp = [...filters];
+      temp[index] = filter;
+      return temp;
+    });
+  }, []);
+
+  const handleFilterRemove = useCallback((index: number) => {
+    setFilters((filters) => {
+      const temp = filters.filter((_, i) => i !== index);
+      return temp;
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="dialog-header-container">
+        <p className="title-text">
+          <span className="icon-text">🔖</span>
+          {queryId ? "编辑检索" : "创建检索"}
+        </p>
+        <button className="btn close-btn" onClick={destroy}>
+          <img className="icon-img" src="/icons/close.svg" />
+        </button>
+      </div>
+      <div className="dialog-content-container">
+        <div className="form-item-container input-form-container">
+          <span className="normal-text">标题</span>
+          <input className="title-input" type="text" value={title} onChange={handleTitleInputChange} />
+        </div>
+        <div className="form-item-container filter-form-container">
+          <span className="normal-text">过滤器</span>
+          <div className="filters-wrapper">
+            {filters.map((f, index) => {
+              return (
+                <MemoFilterInputer
+                  key={index}
+                  index={index}
+                  filter={f}
+                  handleFilterChange={handleFilterChange}
+                  handleFilterRemove={handleFilterRemove}
+                />
+              );
+            })}
+            <div className="create-filter-btn" onClick={handleAddFilterBenClick}>
+              添加筛选条件
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="dialog-footer-container">
+        <div></div>
+        <div className="btns-container">
+          <span className={`tip-text ${filters.length === 0 && "hidden"}`}>
+            符合条件的 Memo 有 <strong>{shownMemoLength}</strong> 条
+          </span>
+          <button className={`btn save-btn ${requestState.isLoading ? "requesting" : ""}`} onClick={handleSaveBtnClick}>
+            保存
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+interface MemoFilterInputerProps {
+  index: number;
+  filter: Filter;
+  handleFilterChange: (index: number, filter: Filter) => void;
+  handleFilterRemove: (index: number) => void;
+}
+
+const MemoFilterInputer: React.FC<MemoFilterInputerProps> = memo((props: MemoFilterInputerProps) => {
+  const { index, filter, handleFilterChange, handleFilterRemove } = props;
+  const { type } = filter;
+  const [inputElements, setInputElements] = useState<JSX.Element>(<></>);
+
+  useEffect(() => {
+    let operatorElement = <></>;
+    if (Object.keys(filterConsts).includes(type)) {
+      operatorElement = (
+        <Selector
+          className="operator-selector"
+          dataSource={Object.values(filterConsts[type as FilterType].operators)}
+          value={filter.value.operator}
+          handleValueChanged={handleOperatorChange}
+        />
+      );
+    }
+
+    let valueElement = <></>;
+    switch (type) {
+      case "TYPE": {
+        valueElement = (
+          <Selector
+            className="value-selector"
+            dataSource={filterConsts["TYPE"].values}
+            value={filter.value.value}
+            handleValueChanged={handleValueChange}
+          />
+        );
+        break;
+      }
+      case "TAG": {
+        valueElement = (
+          <Selector
+            className="value-selector"
+            dataSource={memoService
+              .getState()
+              .tags.sort()
+              .map((t) => {
+                return { text: t, value: t };
+              })}
+            value={filter.value.value}
+            handleValueChanged={handleValueChange}
+          />
+        );
+        break;
+      }
+      case "TEXT": {
+        valueElement = (
+          <input
+            type="text"
+            className="value-inputer"
+            value={filter.value.value}
+            onChange={(event) => {
+              handleValueChange(event.target.value);
+              event.target.focus();
+            }}
+          />
+        );
+        break;
+      }
+    }
+
+    setInputElements(
+      <>
+        {operatorElement}
+        {valueElement}
+      </>
+    );
+  }, [type, filter]);
+
+  const handleRelationChange = useCallback(
+    (value: string) => {
+      if (["AND", "OR"].includes(value)) {
+        handleFilterChange(index, {
+          ...filter,
+          relation: value as MemoFilterRalation,
+        });
+      }
+    },
+    [filter]
+  );
+
+  const handleTypeChange = useCallback(
+    (value: string) => {
+      if (filter.type !== value) {
+        const ops = Object.values(filterConsts[value as FilterType].operators);
+        handleFilterChange(index, {
+          ...filter,
+          type: value as FilterType,
+          value: {
+            operator: ops[0].value,
+            value: "",
+          },
+        });
+      }
+    },
+    [filter]
+  );
+
+  const handleOperatorChange = useCallback(
+    (value: string) => {
+      handleFilterChange(index, {
+        ...filter,
+        value: {
+          ...filter.value,
+          operator: value,
+        },
+      });
+    },
+    [filter]
+  );
+
+  const handleValueChange = useCallback(
+    (value: string) => {
+      handleFilterChange(index, {
+        ...filter,
+        value: {
+          ...filter.value,
+          value,
+        },
+      });
+    },
+    [filter]
+  );
+
+  const handleRemoveBtnClick = () => {
+    handleFilterRemove(index);
+  };
+
+  return (
+    <div className="memo-filter-input-wrapper">
+      {index > 0 ? (
+        <Selector
+          className="relation-selector"
+          dataSource={relationConsts}
+          value={filter.relation}
+          handleValueChanged={handleRelationChange}
+        />
+      ) : null}
+      <Selector
+        className="type-selector"
+        dataSource={Object.values(filterConsts)}
+        value={filter.type}
+        handleValueChanged={handleTypeChange}
+      />
+
+      {inputElements}
+      <img className="remove-btn" src="/icons/close.svg" onClick={handleRemoveBtnClick} />
+    </div>
+  );
+});
+
+export default function showCreateQueryDialog(queryId?: string): void {
+  showDialog(
+    {
+      className: "create-query-dialog",
+    },
+    CreateQueryDialog,
+    { queryId }
+  );
+}

web/src/components/DailyMemo.tsx

@@ -0,0 +1,43 @@
+import { IMAGE_URL_REG } from "../helpers/consts";
+import utils from "../helpers/utils";
+import { formatMemoContent } from "./Memo";
+import Only from "./common/OnlyWhen";
+import "../less/daily-memo.less";
+
+interface DailyMemo extends FormattedMemo {
+  timeStr: string;
+}
+
+interface Props {
+  memo: Model.Memo;
+}
+
+const DailyMemo: React.FC<Props> = (props: Props) => {
+  const { memo: propsMemo } = props;
+  const memo: DailyMemo = {
+    ...propsMemo,
+    createdAtStr: utils.getDateTimeString(propsMemo.createdAt),
+    timeStr: utils.getTimeString(propsMemo.createdAt),
+  };
+  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []);
+
+  return (
+    <div className="daily-memo-wrapper">
+      <div className="time-wrapper">
+        <span className="normal-text">{memo.timeStr}</span>
+      </div>
+      <div className="memo-content-container">
+        <div className="memo-content-text" dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}></div>
+        <Only when={imageUrls.length > 0}>
+          <div className="images-container">
+            {imageUrls.map((imgUrl, idx) => (
+              <img key={idx} crossOrigin="anonymous" src={imgUrl} decoding="async" />
+            ))}
+          </div>
+        </Only>
+      </div>
+    </div>
+  );
+};
+
+export default DailyMemo;

web/src/components/DailyMemoDiaryDialog.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useRef, useState } from "react";
+import { memoService } from "../services";
+import toImage from "../labs/html2image";
+import useToggle from "../hooks/useToggle";
+import useLoading from "../hooks/useLoading";
+import { DAILY_TIMESTAMP } from "../helpers/consts";
+import utils from "../helpers/utils";
+import { showDialog } from "./Dialog";
+import showPreviewImageDialog from "./PreviewImageDialog";
+import DailyMemo from "./DailyMemo";
+import DatePicker from "./common/DatePicker";
+import "../less/daily-memo-diary-dialog.less";
+
+interface Props extends DialogProps {
+  currentDateStamp: DateStamp;
+}
+
+const monthChineseStrArray = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
+const weekdayChineseStrArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+
+const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
+  const loadingState = useLoading();
+  const [memos, setMemos] = useState<Model.Memo[]>([]);
+  const [currentDateStamp, setCurrentDateStamp] = useState(utils.getDateStampByDate(utils.getDateString(props.currentDateStamp)));
+  const [showDatePicker, toggleShowDatePicker] = useToggle(false);
+  const memosElRef = useRef<HTMLDivElement>(null);
+  const currentDate = new Date(currentDateStamp);
+
+  useEffect(() => {
+    const setDailyMemos = () => {
+      const dailyMemos = memoService
+        .getState()
+        .memos.filter(
+          (a) =>
+            utils.getTimeStampByDate(a.createdAt) >= currentDateStamp &&
+            utils.getTimeStampByDate(a.createdAt) < currentDateStamp + DAILY_TIMESTAMP
+        )
+        .sort((a, b) => utils.getTimeStampByDate(a.createdAt) - utils.getTimeStampByDate(b.createdAt));
+      setMemos(dailyMemos);
+      loadingState.setFinish();
+    };
+
+    setDailyMemos();
+  }, [currentDateStamp]);
+
+  const handleShareBtnClick = () => {
+    toggleShowDatePicker(false);
+
+    setTimeout(() => {
+      if (!memosElRef.current) {
+        return;
+      }
+
+      toImage(memosElRef.current, {
+        backgroundColor: "#ffffff",
+        pixelRatio: window.devicePixelRatio * 2,
+      })
+        .then((url) => {
+          showPreviewImageDialog(url);
+        })
+        .catch(() => {
+          // do nth
+        });
+    }, 0);
+  };
+
+  const handleDataPickerChange = (datestamp: DateStamp): void => {
+    setCurrentDateStamp(datestamp);
+    toggleShowDatePicker(false);
+  };
+
+  return (
+    <>
+      <div className="dialog-header-container">
+        <div className="header-wrapper">
+          <p className="title-text">Daily Memos</p>
+          <div className="btns-container">
+            <span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
+              <img className="icon-img" src="/icons/arrow-left.svg" />
+            </span>
+            <span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}>
+              <img className="icon-img" src="/icons/arrow-right.svg" />
+            </span>
+            <span className="btn-text share-btn" onClick={handleShareBtnClick}>
+              <img className="icon-img" src="/icons/share.svg" />
+            </span>
+            <span className="btn-text" onClick={() => props.destroy()}>
+              <img className="icon-img" src="/icons/close.svg" />
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="dialog-content-container" ref={memosElRef}>
+        <div className="date-card-container" onClick={() => toggleShowDatePicker()}>
+          <div className="year-text">{currentDate.getFullYear()}</div>
+          <div className="date-container">
+            <div className="month-text">{monthChineseStrArray[currentDate.getMonth()]}</div>
+            <div className="date-text">{currentDate.getDate()}</div>
+            <div className="day-text">{weekdayChineseStrArray[currentDate.getDay()]}</div>
+          </div>
+        </div>
+        <DatePicker
+          className={`date-picker ${showDatePicker ? "" : "hidden"}`}
+          datestamp={currentDateStamp}
+          handleDateStampChange={handleDataPickerChange}
+        />
+        {loadingState.isLoading ? (
+          <div className="tip-container">
+            <p className="tip-text">努力加载中...</p>
+          </div>
+        ) : memos.length === 0 ? (
+          <div className="tip-container">
+            <p className="tip-text">空空如也</p>
+          </div>
+        ) : (
+          <div className="dailymemos-wrapper">
+            {memos.map((memo) => (
+              <DailyMemo key={`${memo.id}-${memo.updatedAt}`} memo={memo} />
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default function showDailyMemoDiaryDialog(datestamp: DateStamp = Date.now()): void {
+  showDialog(
+    {
+      className: "daily-memo-diary-dialog",
+    },
+    DailyMemoDiaryDialog,
+    { currentDateStamp: datestamp }
+  );
+}

web/src/components/DeletedMemo.tsx

@@ -0,0 +1,87 @@
+import { IMAGE_URL_REG } from "../helpers/consts";
+import utils from "../helpers/utils";
+import useToggle from "../hooks/useToggle";
+import { memoService } from "../services";
+import Only from "./common/OnlyWhen";
+import Image from "./Image";
+import toastHelper from "./Toast";
+import { formatMemoContent } from "./Memo";
+import "../less/memo.less";
+
+interface Props {
+  memo: Model.Memo;
+  handleDeletedMemoAction: (memoId: string) => void;
+}
+
+const DeletedMemo: React.FC<Props> = (props: Props) => {
+  const { memo: propsMemo, handleDeletedMemoAction } = props;
+  const memo: FormattedMemo = {
+    ...propsMemo,
+    createdAtStr: utils.getDateTimeString(propsMemo.createdAt),
+    deletedAtStr: utils.getDateTimeString(propsMemo.deletedAt ?? Date.now()),
+  };
+  const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
+  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []);
+
+  const handleDeleteMemoClick = async () => {
+    if (showConfirmDeleteBtn) {
+      try {
+        await memoService.deleteMemoById(memo.id);
+        handleDeletedMemoAction(memo.id);
+      } catch (error: any) {
+        toastHelper.error(error.message);
+      }
+    } else {
+      toggleConfirmDeleteBtn();
+    }
+  };
+
+  const handleRestoreMemoClick = async () => {
+    try {
+      await memoService.restoreMemoById(memo.id);
+      handleDeletedMemoAction(memo.id);
+      toastHelper.info("恢复成功");
+    } catch (error: any) {
+      toastHelper.error(error.message);
+    }
+  };
+
+  const handleMouseLeaveMemoWrapper = () => {
+    if (showConfirmDeleteBtn) {
+      toggleConfirmDeleteBtn(false);
+    }
+  };
+
+  return (
+    <div className={`memo-wrapper ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
+      <div className="memo-top-wrapper">
+        <span className="time-text">删除于 {memo.deletedAtStr}</span>
+        <div className="btns-container">
+          <span className="btn more-action-btn">
+            <img className="icon-img" src="/icons/more.svg" />
+          </span>
+          <div className="more-action-btns-wrapper">
+            <div className="more-action-btns-container">
+              <span className="btn restore-btn" onClick={handleRestoreMemoClick}>
+                恢复
+              </span>
+              <span className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
+                {showConfirmDeleteBtn ? "确定删除！" : "完全删除"}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="memo-content-text" dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}></div>
+      <Only when={imageUrls.length > 0}>
+        <div className="images-wrapper">
+          {imageUrls.map((imgUrl, idx) => (
+            <Image className="memo-img" key={idx} imgUrl={imgUrl} />
+          ))}
+        </div>
+      </Only>
+    </div>
+  );
+};
+
+export default DeletedMemo;

web/src/components/Dialog.tsx

@@ -0,0 +1,81 @@
+import ReactDOM from "react-dom";
+import appContext from "../stores/appContext";
+import Provider from "../labs/Provider";
+import appStore from "../stores/appStore";
+import { ANIMATION_DURATION } from "../helpers/consts";
+import "../less/dialog.less";
+
+interface DialogConfig {
+  className: string;
+  useAppContext?: boolean;
+  clickSpaceDestroy?: boolean;
+}
+
+interface Props extends DialogConfig, DialogProps {
+  children: React.ReactNode;
+}
+
+const BaseDialog: React.FC<Props> = (props: Props) => {
+  const { children, className, clickSpaceDestroy, destroy } = props;
+
+  const handleSpaceClicked = () => {
+    if (clickSpaceDestroy) {
+      destroy();
+    }
+  };
+
+  return (
+    <div className={`dialog-wrapper ${className}`} onClick={handleSpaceClicked}>
+      <div className="dialog-container" onClick={(e) => e.stopPropagation()}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export function showDialog<T extends DialogProps>(
+  config: DialogConfig,
+  DialogComponent: React.FC<T>,
+  props?: Omit<T, "destroy">
+): DialogCallback {
+  const tempDiv = document.createElement("div");
+  document.body.append(tempDiv);
+
+  setTimeout(() => {
+    tempDiv.firstElementChild?.classList.add("showup");
+  }, 0);
+
+  const cbs: DialogCallback = {
+    destroy: () => {
+      tempDiv.firstElementChild?.classList.remove("showup");
+      tempDiv.firstElementChild?.classList.add("showoff");
+      setTimeout(() => {
+        tempDiv.remove();
+        ReactDOM.unmountComponentAtNode(tempDiv);
+      }, ANIMATION_DURATION);
+    },
+  };
+
+  const dialogProps = {
+    ...props,
+    destroy: cbs.destroy,
+  } as T;
+
+  let Fragment = (
+    <BaseDialog destroy={cbs.destroy} clickSpaceDestroy={true} {...config}>
+      <DialogComponent {...dialogProps} />
+    </BaseDialog>
+  );
+
+  if (config.useAppContext) {
+    Fragment = (
+      <Provider store={appStore} context={appContext}>
+        {Fragment}
+      </Provider>
+    );
+  }
+
+  ReactDOM.render(Fragment, tempDiv);
+
+  return cbs;
+}

web/src/components/Editor/Editor.tsx

@@ -0,0 +1,169 @@
+import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef } from "react";
+import TinyUndo from "tiny-undo";
+import appContext from "../../stores/appContext";
+import { storage } from "../../helpers/storage";
+import useRefresh from "../../hooks/useRefresh";
+import Only from "../common/OnlyWhen";
+import "../../less/editor.less";
+
+export interface EditorRefActions {
+  focus: FunctionType;
+  insertText: (text: string) => void;
+  setContent: (text: string) => void;
+  getContent: () => string;
+}
+
+interface Props {
+  className: string;
+  initialContent: string;
+  placeholder: string;
+  showConfirmBtn: boolean;
+  showCancelBtn: boolean;
+  showTools: boolean;
+  onConfirmBtnClick: (content: string) => void;
+  onCancelBtnClick: () => void;
+  onContentChange: (content: string) => void;
+}
+
+const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefActions>) => {
+  const {
+    globalState: { useTinyUndoHistoryCache },
+  } = useContext(appContext);
+  const {
+    className,
+    initialContent,
+    placeholder,
+    showConfirmBtn,
+    showCancelBtn,
+    showTools,
+    onConfirmBtnClick: handleConfirmBtnClickCallback,
+    onCancelBtnClick: handleCancelBtnClickCallback,
+    onContentChange: handleContentChangeCallback,
+  } = props;
+  const editorRef = useRef<HTMLTextAreaElement>(null);
+  const tinyUndoRef = useRef<TinyUndo | null>(null);
+  const refresh = useRefresh();
+
+  useEffect(() => {
+    if (initialContent) {
+      editorRef.current!.value = initialContent;
+      refresh();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (useTinyUndoHistoryCache) {
+      const { tinyUndoActionsCache, tinyUndoIndexCache } = storage.get(["tinyUndoActionsCache", "tinyUndoIndexCache"]);
+      tinyUndoRef.current = new TinyUndo(editorRef.current!, {
+        interval: 5000,
+        initialActions: tinyUndoActionsCache,
+        initialIndex: tinyUndoIndexCache,
+      });
+
+      tinyUndoRef.current.subscribe((actions, index) => {
+        storage.set({
+          tinyUndoActionsCache: actions,
+          tinyUndoIndexCache: index,
+        });
+      });
+
+      return () => {
+        tinyUndoRef.current?.destroy();
+      };
+    } else {
+      tinyUndoRef.current?.destroy();
+      tinyUndoRef.current = null;
+      storage.remove(["tinyUndoActionsCache", "tinyUndoIndexCache"]);
+    }
+  }, [useTinyUndoHistoryCache]);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.style.height = "auto";
+      editorRef.current.style.height = (editorRef.current.scrollHeight ?? 0) + "px";
+    }
+  }, [editorRef.current?.value]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus: () => {
+        editorRef.current!.focus();
+      },
+      insertText: (rawText: string) => {
+        const prevValue = editorRef.current!.value;
+        editorRef.current!.value = prevValue + rawText;
+        handleContentChangeCallback(editorRef.current!.value);
+        refresh();
+      },
+      setContent: (text: string) => {
+        editorRef.current!.value = text;
+        refresh();
+      },
+      getContent: (): string => {
+        return editorRef.current?.value ?? "";
+      },
+    }),
+    []
+  );
+
+  const handleEditorInput = useCallback(() => {
+    handleContentChangeCallback(editorRef.current!.value);
+    refresh();
+  }, []);
+
+  const handleEditorKeyDown = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    event.stopPropagation();
+
+    if (event.code === "Enter") {
+      if (event.metaKey || event.ctrlKey) {
+        handleCommonConfirmBtnClick();
+      }
+    }
+    refresh();
+  }, []);
+
+  const handleCommonConfirmBtnClick = useCallback(() => {
+    handleConfirmBtnClickCallback(editorRef.current!.value);
+    editorRef.current!.value = "";
+    refresh();
+    // After confirm btn clicked, tiny-undo should reset state(clear actions and index)
+    tinyUndoRef.current?.resetState();
+  }, []);
+
+  const handleCommonCancelBtnClick = useCallback(() => {
+    handleCancelBtnClickCallback();
+  }, []);
+
+  return (
+    <div className={"common-editor-wrapper " + className}>
+      <textarea
+        className="common-editor-inputer"
+        rows={1}
+        placeholder={placeholder}
+        ref={editorRef}
+        onInput={handleEditorInput}
+        onKeyDown={handleEditorKeyDown}
+      ></textarea>
+      <div className="common-tools-wrapper">
+        <Only when={showTools}>
+          <div className={"common-tools-container"}>{/* nth */}</div>
+        </Only>
+        <div className="btns-container">
+          <Only when={showCancelBtn}>
+            <button className="action-btn cancel-btn" onClick={handleCommonCancelBtnClick}>
+              撤销修改
+            </button>
+          </Only>
+          <Only when={showConfirmBtn}>
+            <button className="action-btn confirm-btn" disabled={!editorRef.current?.value} onClick={handleCommonConfirmBtnClick}>
+              记下<span className="icon-text">✍️</span>
+            </button>
+          </Only>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default Editor;

web/src/components/Image.tsx

@@ -0,0 +1,23 @@
+import showPreviewImageDialog from "./PreviewImageDialog";
+import "../less/image.less";
+
+interface Props {
+  imgUrl: string;
+  className?: string;
+}
+
+const Image: React.FC<Props> = (props: Props) => {
+  const { className, imgUrl } = props;
+
+  const handleImageClick = () => {
+    showPreviewImageDialog(imgUrl);
+  };
+
+  return (
+    <div className={"image-container " + className} onClick={handleImageClick}>
+      <img src={imgUrl} decoding="async" loading="lazy" />
+    </div>
+  );
+};
+
+export default Image;

web/src/components/Memo.tsx

@@ -0,0 +1,176 @@
+import { memo } from "react";
+import { IMAGE_URL_REG, LINK_REG, MEMO_LINK_REG, TAG_REG } from "../helpers/consts";
+import { encodeHtml, parseMarkedToHtml, parseRawTextToHtml } from "../helpers/marked";
+import utils from "../helpers/utils";
+import useToggle from "../hooks/useToggle";
+import { globalStateService, memoService } from "../services";
+import Only from "./common/OnlyWhen";
+import Image from "./Image";
+import showMemoCardDialog from "./MemoCardDialog";
+import showShareMemoImageDialog from "./ShareMemoImageDialog";
+import toastHelper from "./Toast";
+import "../less/memo.less";
+
+interface Props {
+  memo: Model.Memo;
+}
+
+const Memo: React.FC<Props> = (props: Props) => {
+  const { memo: propsMemo } = props;
+  const memo: FormattedMemo = {
+    ...propsMemo,
+    createdAtStr: utils.getDateTimeString(propsMemo.createdAt),
+  };
+  const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
+  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []);
+
+  const handleShowMemoStoryDialog = () => {
+    showMemoCardDialog(memo);
+  };
+
+  const handleMarkMemoClick = () => {
+    globalStateService.setMarkMemoId(memo.id);
+  };
+
+  const handleEditMemoClick = () => {
+    globalStateService.setEditMemoId(memo.id);
+  };
+
+  const handleDeleteMemoClick = async () => {
+    if (showConfirmDeleteBtn) {
+      try {
+        await memoService.hideMemoById(memo.id);
+      } catch (error: any) {
+        toastHelper.error(error.message);
+      }
+
+      if (globalStateService.getState().editMemoId === memo.id) {
+        globalStateService.setEditMemoId("");
+      }
+    } else {
+      toggleConfirmDeleteBtn();
+    }
+  };
+
+  const handleMouseLeaveMemoWrapper = () => {
+    if (showConfirmDeleteBtn) {
+      toggleConfirmDeleteBtn(false);
+    }
+  };
+
+  const handleGenMemoImageBtnClick = () => {
+    showShareMemoImageDialog(memo);
+  };
+
+  const handleMemoContentClick = async (e: React.MouseEvent) => {
+    const targetEl = e.target as HTMLElement;
+
+    if (targetEl.className === "memo-link-text") {
+      const memoId = targetEl.dataset?.value;
+      const memoTemp = memoService.getMemoById(memoId ?? "");
+
+      if (memoTemp) {
+        showMemoCardDialog(memoTemp);
+      } else {
+        toastHelper.error("MEMO Not Found");
+        targetEl.classList.remove("memo-link-text");
+      }
+    } else if (targetEl.className === "todo-block") {
+      // do nth
+    }
+  };
+
+  return (
+    <div className={`memo-wrapper ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
+      <div className="memo-top-wrapper">
+        <span className="time-text" onClick={handleShowMemoStoryDialog}>
+          {memo.createdAtStr}
+        </span>
+        <div className="btns-container">
+          <span className="btn more-action-btn">
+            <img className="icon-img" src="/icons/more.svg" />
+          </span>
+          <div className="more-action-btns-wrapper">
+            <div className="more-action-btns-container">
+              <span className="btn" onClick={handleShowMemoStoryDialog}>
+                查看详情
+              </span>
+              <span className="btn" onClick={handleMarkMemoClick}>
+                Mark
+              </span>
+              <span className="btn" onClick={handleGenMemoImageBtnClick}>
+                分享
+              </span>
+              <span className="btn" onClick={handleEditMemoClick}>
+                编辑
+              </span>
+              <span className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
+                {showConfirmDeleteBtn ? "确定删除！" : "删除"}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="memo-content-text"
+        onClick={handleMemoContentClick}
+        dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}
+      ></div>
+      <Only when={imageUrls.length > 0}>
+        <div className="images-wrapper">
+          {imageUrls.map((imgUrl, idx) => (
+            <Image className="memo-img" key={idx} imgUrl={imgUrl} />
+          ))}
+        </div>
+      </Only>
+    </div>
+  );
+};
+
+export function formatMemoContent(content: string) {
+  content = encodeHtml(content);
+  content = parseRawTextToHtml(content)
+    .split("<br>")
+    .map((t) => {
+      return `<p>${t !== "" ? t : "<br>"}</p>`;
+    })
+    .join("");
+
+  const { shouldUseMarkdownParser, shouldSplitMemoWord, shouldHideImageUrl } = globalStateService.getState();
+
+  if (shouldUseMarkdownParser) {
+    content = parseMarkedToHtml(content);
+  }
+
+  if (shouldHideImageUrl) {
+    content = content.replace(IMAGE_URL_REG, "");
+  }
+
+  // 中英文之间加空格
+  if (shouldSplitMemoWord) {
+    content = content
+      .replace(/([\u4e00-\u9fa5])([A-Za-z0-9?.,;[\]]+)/g, "$1 $2")
+      .replace(/([A-Za-z0-9?.,;[\]]+)([\u4e00-\u9fa5])/g, "$1 $2");
+  }
+
+  content = content
+    .replace(TAG_REG, "<span class='tag-span'>#$1</span>")
+    .replace(LINK_REG, "<a class='link' target='_blank' rel='noreferrer' href='$1'>$1</a>")
+    .replace(MEMO_LINK_REG, "<span class='memo-link-text' data-value='$2'>$1</span>");
+
+  const tempDivContainer = document.createElement("div");
+  tempDivContainer.innerHTML = content;
+  for (let i = 0; i < tempDivContainer.children.length; i++) {
+    const c = tempDivContainer.children[i];
+
+    if (c.tagName === "P" && c.textContent === "" && c.firstElementChild?.tagName !== "BR") {
+      c.remove();
+      i--;
+      continue;
+    }
+  }
+
+  return tempDivContainer.innerHTML;
+}
+
+export default memo(Memo);

web/src/components/MemoCardDialog.tsx

@@ -0,0 +1,189 @@
+import { useState, useEffect, useCallback } from "react";
+import { IMAGE_URL_REG, MEMO_LINK_REG } from "../helpers/consts";
+import utils from "../helpers/utils";
+import { globalStateService, memoService } from "../services";
+import { parseHtmlToRawText } from "../helpers/marked";
+import { formatMemoContent } from "./Memo";
+import toastHelper from "./Toast";
+import { showDialog } from "./Dialog";
+import Only from "./common/OnlyWhen";
+import Image from "./Image";
+import "../less/memo-card-dialog.less";
+
+interface LinkedMemo extends FormattedMemo {
+  dateStr: string;
+}
+
+interface Props extends DialogProps {
+  memo: Model.Memo;
+}
+
+const MemoCardDialog: React.FC<Props> = (props: Props) => {
+  const [memo, setMemo] = useState<FormattedMemo>({
+    ...props.memo,
+    createdAtStr: utils.getDateTimeString(props.memo.createdAt),
+  });
+  const [linkMemos, setLinkMemos] = useState<LinkedMemo[]>([]);
+  const [linkedMemos, setLinkedMemos] = useState<LinkedMemo[]>([]);
+  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []);
+
+  useEffect(() => {
+    const fetchLinkedMemos = async () => {
+      try {
+        const linkMemos: LinkedMemo[] = [];
+        const matchedArr = [...memo.content.matchAll(MEMO_LINK_REG)];
+        for (const matchRes of matchedArr) {
+          if (matchRes && matchRes.length === 3) {
+            const id = matchRes[2];
+            const memoTemp = memoService.getMemoById(id);
+            if (memoTemp) {
+              linkMemos.push({
+                ...memoTemp,
+                createdAtStr: utils.getDateTimeString(memoTemp.createdAt),
+                dateStr: utils.getDateString(memoTemp.createdAt),
+              });
+            }
+          }
+        }
+        setLinkMemos([...linkMemos]);
+
+        const linkedMemos = await memoService.getLinkedMemos(memo.id);
+        setLinkedMemos(
+          linkedMemos
+            .sort((a, b) => utils.getTimeStampByDate(b.createdAt) - utils.getTimeStampByDate(a.createdAt))
+            .map((m) => ({
+              ...m,
+              createdAtStr: utils.getDateTimeString(m.createdAt),
+              dateStr: utils.getDateString(m.createdAt),
+            }))
+        );
+      } catch (error) {
+        // do nth
+      }
+    };
+
+    fetchLinkedMemos();
+  }, [memo.id]);
+
+  const handleMemoContentClick = useCallback(async (e: React.MouseEvent) => {
+    const targetEl = e.target as HTMLElement;
+
+    if (targetEl.className === "memo-link-text") {
+      const nextMemoId = targetEl.dataset?.value;
+      const memoTemp = memoService.getMemoById(nextMemoId ?? "");
+
+      if (memoTemp) {
+        const nextMemo = {
+          ...memoTemp,
+          createdAtStr: utils.getDateTimeString(memoTemp.createdAt),
+        };
+        setLinkMemos([]);
+        setLinkedMemos([]);
+        setMemo(nextMemo);
+      } else {
+        toastHelper.error("MEMO Not Found");
+        targetEl.classList.remove("memo-link-text");
+      }
+    }
+  }, []);
+
+  const handleLinkedMemoClick = useCallback((memo: FormattedMemo) => {
+    setLinkMemos([]);
+    setLinkedMemos([]);
+    setMemo(memo);
+  }, []);
+
+  const handleEditMemoBtnClick = useCallback(() => {
+    props.destroy();
+    globalStateService.setEditMemoId(memo.id);
+  }, [memo.id]);
+
+  return (
+    <>
+      <div className="memo-card-container">
+        <div className="header-container">
+          <p className="time-text">{memo.createdAtStr}</p>
+          <div className="btns-container">
+            <button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
+              <img className="icon-img" src="/icons/edit.svg" />
+            </button>
+            <button className="btn close-btn" onClick={props.destroy}>
+              <img className="icon-img" src="/icons/close.svg" />
+            </button>
+          </div>
+        </div>
+        <div className="memo-container">
+          <div
+            className="memo-content-text"
+            onClick={handleMemoContentClick}
+            dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}
+          ></div>
+          <Only when={imageUrls.length > 0}>
+            <div className="images-wrapper">
+              {imageUrls.map((imgUrl, idx) => (
+                <Image className="memo-img" key={idx} imgUrl={imgUrl} />
+              ))}
+            </div>
+          </Only>
+        </div>
+        <div className="layer-container"></div>
+        {linkMemos.map((_, idx) => {
+          if (idx < 4) {
+            return (
+              <div
+                className="background-layer-container"
+                key={idx}
+                style={{
+                  bottom: (idx + 1) * -3 + "px",
+                  left: (idx + 1) * 5 + "px",
+                  width: `calc(100% - ${(idx + 1) * 10}px)`,
+                  zIndex: -idx - 1,
+                }}
+              ></div>
+            );
+          } else {
+            return null;
+          }
+        })}
+      </div>
+      {linkMemos.length > 0 ? (
+        <div className="linked-memos-wrapper">
+          <p className="normal-text">关联了 {linkMemos.length} 个 MEMO</p>
+          {linkMemos.map((m) => {
+            const rawtext = parseHtmlToRawText(formatMemoContent(m.content)).replaceAll("\n", " ");
+            return (
+              <div className="linked-memo-container" key={m.id} onClick={() => handleLinkedMemoClick(m)}>
+                <span className="time-text">{m.dateStr} </span>
+                {rawtext}
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
+      {linkedMemos.length > 0 ? (
+        <div className="linked-memos-wrapper">
+          <p className="normal-text">{linkedMemos.length} 个链接至此的 MEMO</p>
+          {linkedMemos.map((m) => {
+            const rawtext = parseHtmlToRawText(formatMemoContent(m.content)).replaceAll("\n", " ");
+            return (
+              <div className="linked-memo-container" key={m.id} onClick={() => handleLinkedMemoClick(m)}>
+                <span className="time-text">{m.dateStr} </span>
+                {rawtext}
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default function showMemoCardDialog(memo: Model.Memo): void {
+  showDialog(
+    {
+      className: "memo-card-dialog",
+    },
+    MemoCardDialog,
+    { memo }
+  );
+}

web/src/components/MemoEditor.tsx

@@ -0,0 +1,120 @@
+import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import appContext from "../stores/appContext";
+import { globalStateService, locationService, memoService } from "../services";
+import utils from "../helpers/utils";
+import { storage } from "../helpers/storage";
+import toastHelper from "./Toast";
+import Editor, { EditorRefActions } from "./Editor/Editor";
+import "../less/memo-editor.less";
+
+interface Props {
+  className?: string;
+  editMemoId?: string;
+}
+
+const MemoEditor: React.FC<Props> = (props: Props) => {
+  const { className, editMemoId } = props;
+  const { globalState } = useContext(appContext);
+  const editorRef = useRef<EditorRefActions>(null);
+  const prevGlobalStateRef = useRef(globalState);
+
+  useEffect(() => {
+    if (globalState.markMemoId) {
+      const editorCurrentValue = editorRef.current?.getContent();
+      const memoLinkText = `${editorCurrentValue ? "\n" : ""}Mark: [@MEMO](${globalState.markMemoId})`;
+      editorRef.current?.insertText(memoLinkText);
+      globalStateService.setMarkMemoId("");
+    }
+
+    if (editMemoId && globalState.editMemoId) {
+      const editMemo = memoService.getMemoById(globalState.editMemoId);
+      if (editMemo) {
+        editorRef.current?.setContent(editMemo.content ?? "");
+        editorRef.current?.focus();
+      }
+    }
+
+    prevGlobalStateRef.current = globalState;
+  }, [globalState.markMemoId, globalState.editMemoId]);
+
+  const handleSaveBtnClick = useCallback(async (content: string) => {
+    if (content === "") {
+      toastHelper.error("内容不能为空呀");
+      return;
+    }
+
+    content = content.replaceAll("&nbsp;", " ");
+
+    try {
+      if (editMemoId) {
+        const prevMemo = memoService.getMemoById(editMemoId);
+
+        if (prevMemo && prevMemo.content !== content) {
+          const editedMemo = await memoService.updateMemo(prevMemo.id, content);
+          editedMemo.updatedAt = utils.getDateTimeString(Date.now());
+          memoService.editMemo(editedMemo);
+        }
+        globalStateService.setEditMemoId("");
+      } else {
+        const newMemo = await memoService.createMemo(content);
+        memoService.pushMemo(newMemo);
+        locationService.clearQuery();
+      }
+    } catch (error: any) {
+      toastHelper.error(error.message);
+    }
+
+    setEditorContentCache("");
+  }, []);
+
+  const handleCancelBtnClick = useCallback(() => {
+    globalStateService.setEditMemoId("");
+    editorRef.current?.setContent("");
+    setEditorContentCache("");
+  }, []);
+
+  const handleContentChange = useCallback((content: string) => {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = content;
+    if (tempDiv.innerText.trim() === "") {
+      content = "";
+    }
+    setEditorContentCache(content);
+  }, []);
+
+  const showEditStatus = Boolean(editMemoId);
+
+  const editorConfig = useMemo(
+    () => ({
+      className: "memo-editor",
+      initialContent: getEditorContentCache(),
+      placeholder: "现在的想法是...",
+      showConfirmBtn: true,
+      showCancelBtn: showEditStatus,
+      showTools: true,
+      onConfirmBtnClick: handleSaveBtnClick,
+      onCancelBtnClick: handleCancelBtnClick,
+      onContentChange: handleContentChange,
+    }),
+    [editMemoId]
+  );
+
+  return (
+    <div className={`memo-editor-wrapper ${className} ${editMemoId ? "edit-ing" : ""}`}>
+      <p className={"tip-text " + (editMemoId ? "" : "hidden")}>正在修改中...</p>
+      <Editor ref={editorRef} {...editorConfig} />
+    </div>
+  );
+};
+
+function getEditorContentCache(): string {
+  return storage.get(["editorContentCache"]).editorContentCache ?? "";
+}
+
+function setEditorContentCache(content: string) {
+  storage.set({
+    editorContentCache: content,
+  });
+}
+
+export default MemoEditor;

web/src/components/MemoFilter.tsx

@@ -0,0 +1,68 @@
+import { useContext } from "react";
+import appContext from "../stores/appContext";
+import { locationService, queryService } from "../services";
+import utils from "../helpers/utils";
+import { getTextWithMemoType } from "../helpers/filter";
+import "../less/memo-filter.less";
+
+interface FilterProps {}
+
+const MemoFilter: React.FC<FilterProps> = () => {
+  const {
+    locationState: { query },
+  } = useContext(appContext);
+
+  const { tag: tagQuery, duration, type: memoType, text: textQuery, filter } = query;
+  const queryFilter = queryService.getQueryById(filter);
+  const showFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || queryFilter);
+
+  return (
+    <div className={`filter-query-container ${showFilter ? "" : "hidden"}`}>
+      <span className="tip-text">筛选：</span>
+      <div
+        className={"filter-item-container " + (queryFilter ? "" : "hidden")}
+        onClick={() => {
+          locationService.setMemoFilter("");
+        }}
+      >
+        <span className="icon-text">🔖</span> {queryFilter?.title}
+      </div>
+      <div
+        className={"filter-item-container " + (tagQuery ? "" : "hidden")}
+        onClick={() => {
+          locationService.setTagQuery("");
+        }}
+      >
+        <span className="icon-text">🏷️</span> {tagQuery}
+      </div>
+      <div
+        className={"filter-item-container " + (memoType ? "" : "hidden")}
+        onClick={() => {
+          locationService.setMemoTypeQuery("");
+        }}
+      >
+        <span className="icon-text">📦</span> {getTextWithMemoType(memoType as MemoSpecType)}
+      </div>
+      {duration && duration.from < duration.to ? (
+        <div
+          className="filter-item-container"
+          onClick={() => {
+            locationService.setFromAndToQuery(0, 0);
+          }}
+        >
+          <span className="icon-text">🗓️</span> {utils.getDateString(duration.from)} 至 {utils.getDateString(duration.to)}
+        </div>
+      ) : null}
+      <div
+        className={"filter-item-container " + (textQuery ? "" : "hidden")}
+        onClick={() => {
+          locationService.setTextQuery("");
+        }}
+      >
+        <span className="icon-text">🔍</span> {textQuery}
+      </div>
+    </div>
+  );
+};
+
+export default MemoFilter;

web/src/components/MemoList.tsx

@@ -0,0 +1,114 @@
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import appContext from "../stores/appContext";
+import { locationService, memoService, queryService } from "../services";
+import { IMAGE_URL_REG, LINK_REG, MEMO_LINK_REG, TAG_REG } from "../helpers/consts";
+import utils from "../helpers/utils";
+import { checkShouldShowMemoWithFilters } from "../helpers/filter";
+import Memo from "./Memo";
+import toastHelper from "./Toast";
+import MemoEditor from "./MemoEditor";
+import "../less/memolist.less";
+
+interface Props {}
+
+const MemoList: React.FC<Props> = () => {
+  const {
+    locationState: { query },
+    memoState: { memos },
+    globalState,
+  } = useContext(appContext);
+  const [isFetching, setFetchStatus] = useState(true);
+  const wrapperElement = useRef<HTMLDivElement>(null);
+
+  const { tag: tagQuery, duration, type: memoType, text: textQuery, filter: queryId } = query;
+  const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery);
+
+  const shownMemos =
+    showMemoFilter || queryId
+      ? memos.filter((memo) => {
+          let shouldShow = true;
+
+          const query = queryService.getQueryById(queryId);
+          if (query) {
+            const filters = JSON.parse(query.querystring) as Filter[];
+            if (Array.isArray(filters)) {
+              shouldShow = checkShouldShowMemoWithFilters(memo, filters);
+            }
+          }
+
+          if (tagQuery && !memo.content.includes(`# ${tagQuery}`)) {
+            shouldShow = false;
+          }
+          if (
+            duration &&
+            duration.from < duration.to &&
+            (utils.getTimeStampByDate(memo.createdAt) < duration.from || utils.getTimeStampByDate(memo.createdAt) > duration.to)
+          ) {
+            shouldShow = false;
+          }
+          if (memoType) {
+            if (memoType === "NOT_TAGGED" && memo.content.match(TAG_REG) !== null) {
+              shouldShow = false;
+            } else if (memoType === "LINKED" && memo.content.match(LINK_REG) === null) {
+              shouldShow = false;
+            } else if (memoType === "IMAGED" && memo.content.match(IMAGE_URL_REG) === null) {
+              shouldShow = false;
+            } else if (memoType === "CONNECTED" && memo.content.match(MEMO_LINK_REG) === null) {
+              shouldShow = false;
+            }
+          }
+          if (textQuery && !memo.content.includes(textQuery)) {
+            shouldShow = false;
+          }
+
+          return shouldShow;
+        })
+      : memos;
+
+  useEffect(() => {
+    memoService
+      .fetchAllMemos()
+      .then(() => {
+        setFetchStatus(false);
+      })
+      .catch(() => {
+        toastHelper.error("😭 请求数据失败了");
+      });
+  }, []);
+
+  useEffect(() => {
+    wrapperElement.current?.scrollTo({ top: 0 });
+  }, [query]);
+
+  const handleMemoListClick = useCallback((event: React.MouseEvent) => {
+    const targetEl = event.target as HTMLElement;
+    if (targetEl.tagName === "SPAN" && targetEl.className === "tag-span") {
+      const tagName = targetEl.innerText.slice(1);
+      const currTagQuery = locationService.getState().query.tag;
+      if (currTagQuery === tagName) {
+        locationService.setTagQuery("");
+      } else {
+        locationService.setTagQuery(tagName);
+      }
+    }
+  }, []);
+
+  return (
+    <div className={`memolist-wrapper ${isFetching ? "" : "completed"}`} onClick={handleMemoListClick} ref={wrapperElement}>
+      {shownMemos.map((memo) =>
+        globalState.editMemoId === memo.id ? (
+          <MemoEditor key={memo.id} className="memo-edit" editMemoId={memo.id} />
+        ) : (
+          <Memo key={`${memo.id}-${memo.updatedAt}`} memo={memo} />
+        )
+      )}
+      <div className="status-text-container">
+        <p className="status-text">
+          {isFetching ? "努力请求数据中..." : shownMemos.length === 0 ? "空空如也" : showMemoFilter ? "" : "所有数据加载完啦 🎉"}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default MemoList;

web/src/components/MemosHeader.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useContext, useEffect, useState } from "react";
+import appContext from "../stores/appContext";
+import SearchBar from "./SearchBar";
+import { globalStateService, memoService, queryService } from "../services";
+import Only from "./common/OnlyWhen";
+import "../less/memos-header.less";
+
+let prevRequestTimestamp = Date.now();
+
+interface Props {}
+
+const MemosHeader: React.FC<Props> = () => {
+  const {
+    locationState: {
+      query: { filter },
+    },
+    globalState: { isMobileView },
+    queryState: { queries },
+  } = useContext(appContext);
+
+  const [titleText, setTitleText] = useState("MEMOS");
+
+  useEffect(() => {
+    const query = queryService.getQueryById(filter);
+    if (query) {
+      setTitleText(query.title);
+    } else {
+      setTitleText("MEMOS");
+    }
+  }, [filter, queries]);
+
+  const handleMemoTextClick = useCallback(() => {
+    const now = Date.now();
+    if (now - prevRequestTimestamp > 10 * 1000) {
+      prevRequestTimestamp = now;
+      memoService.fetchAllMemos().catch(() => {
+        // do nth
+      });
+    }
+  }, []);
+
+  const handleShowSidebarBtnClick = useCallback(() => {
+    globalStateService.setShowSiderbarInMobileView(true);
+  }, []);
+
+  return (
+    <div className="section-header-container memos-header-container">
+      <div className="title-text" onClick={handleMemoTextClick}>
+        <Only when={isMobileView}>
+          <button className="action-btn" onClick={handleShowSidebarBtnClick}>
+            <img className="icon-img" src="/icons/menu.svg" alt="menu" />
+          </button>
+        </Only>
+        <span className="normal-text">{titleText}</span>
+      </div>
+      <SearchBar />
+    </div>
+  );
+};
+
+export default MemosHeader;

web/src/components/MenuBtnsPopup.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useRef } from "react";
+import { locationService, userService } from "../services";
+import showAboutSiteDialog from "./AboutSiteDialog";
+import "../less/menu-btns-popup.less";
+
+interface Props {
+  shownStatus: boolean;
+  setShownStatus: (status: boolean) => void;
+}
+
+const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
+  const { shownStatus, setShownStatus } = props;
+
+  const popupElRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (shownStatus) {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (!popupElRef.current?.contains(event.target as Node)) {
+          event.stopPropagation();
+        }
+        setShownStatus(false);
+      };
+      window.addEventListener("click", handleClickOutside, {
+        capture: true,
+        once: true,
+      });
+    }
+  }, [shownStatus]);
+
+  const handleMyAccountBtnClick = () => {
+    locationService.pushHistory("/setting");
+  };
+
+  const handleMemosTrashBtnClick = () => {
+    locationService.pushHistory("/recycle");
+  };
+
+  const handleAboutBtnClick = () => {
+    showAboutSiteDialog();
+  };
+
+  const handleSignOutBtnClick = async () => {
+    await userService.doSignOut();
+    locationService.replaceHistory("/signin");
+  };
+
+  return (
+    <div className={`menu-btns-popup ${shownStatus ? "" : "hidden"}`} ref={popupElRef}>
+      <button className="btn action-btn" onClick={handleMyAccountBtnClick}>
+        <span className="icon">👤</span> 账号与设置
+      </button>
+      <button className="btn action-btn" onClick={handleMemosTrashBtnClick}>
+        <span className="icon">🗑️</span> 回收站
+      </button>
+      <button className="btn action-btn" onClick={handleAboutBtnClick}>
+        <span className="icon">🤠</span> 关于
+      </button>
+      <button className="btn action-btn" onClick={handleSignOutBtnClick}>
+        <span className="icon">👋</span> 退出
+      </button>
+    </div>
+  );
+};
+
+export default MenuBtnsPopup;

web/src/components/MyAccountSection.tsx

@@ -0,0 +1,218 @@
+import { useContext, useState } from "react";
+import appContext from "../stores/appContext";
+import { userService } from "../services";
+import utils from "../helpers/utils";
+import { validate, ValidatorConfig } from "../helpers/validator";
+import Only from "./common/OnlyWhen";
+import toastHelper from "./Toast";
+import showChangePasswordDialog from "./ChangePasswordDialog";
+import showBindWxUserIdDialog from "./BindWxUserIdDialog";
+import "../less/my-account-section.less";
+
+const validateConfig: ValidatorConfig = {
+  minLength: 4,
+  maxLength: 24,
+  noSpace: true,
+  noChinese: true,
+};
+
+interface Props {}
+
+const MyAccountSection: React.FC<Props> = () => {
+  const { userState } = useContext(appContext);
+  const user = userState.user as Model.User;
+  const [username, setUsername] = useState<string>(user.username);
+  const [showEditUsernameInputs, setShowEditUsernameInputs] = useState(false);
+  const [showConfirmUnbindGithubBtn, setShowConfirmUnbindGithubBtn] = useState(false);
+  const [showConfirmUnbindWxBtn, setShowConfirmUnbindWxBtn] = useState(false);
+
+  const handleUsernameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const nextUsername = e.target.value as string;
+    setUsername(nextUsername);
+  };
+
+  const handleConfirmEditUsernameBtnClick = async () => {
+    if (user.username === "guest") {
+      toastHelper.info("🈲 不要修改我的用户名");
+      return;
+    }
+
+    if (username === user.username) {
+      setShowEditUsernameInputs(false);
+      return;
+    }
+
+    const usernameValidResult = validate(username, validateConfig);
+    if (!usernameValidResult.result) {
+      toastHelper.error("用户名 " + usernameValidResult.reason);
+      return;
+    }
+
+    try {
+      const isUsable = await userService.checkUsernameUsable(username);
+
+      if (!isUsable) {
+        toastHelper.error("用户名无法使用");
+        return;
+      }
+
+      await userService.updateUsername(username);
+      await userService.doSignIn();
+      setShowEditUsernameInputs(false);
+      toastHelper.info("修改成功~");
+    } catch (error: any) {
+      toastHelper.error(error.message);
+    }
+  };
+
+  const handleChangePasswordBtnClick = () => {
+    if (user.username === "guest") {
+      toastHelper.info("🈲 不要修改我的密码");
+      return;
+    }
+
+    showChangePasswordDialog();
+  };
+
+  const handleUnbindGithubBtnClick = async () => {
+    if (showConfirmUnbindGithubBtn) {
+      try {
+        await userService.removeGithubName();
+        await userService.doSignIn();
+      } catch (error: any) {
+        toastHelper.error(error.message);
+      }
+      setShowConfirmUnbindGithubBtn(false);
+    } else {
+      setShowConfirmUnbindGithubBtn(true);
+    }
+  };
+
+  const handleUnbindWxBtnClick = async () => {
+    if (showConfirmUnbindWxBtn) {
+      try {
+        await userService.updateWxUserId("");
+        await userService.doSignIn();
+      } catch (error: any) {
+        toastHelper.error(error.message);
+      }
+      setShowConfirmUnbindWxBtn(false);
+    } else {
+      setShowConfirmUnbindWxBtn(true);
+    }
+  };
+
+  const handlePreventDefault = (e: React.MouseEvent) => {
+    e.preventDefault();
+  };
+
+  return (
+    <>
+      <div className="section-container account-section-container">
+        <p className="title-text">基本信息</p>
+        <label className="form-label input-form-label">
+          <span className="normal-text">ID：</span>
+          <span className="normal-text">{user.id}</span>
+        </label>
+        <label className="form-label input-form-label">
+          <span className="normal-text">创建时间：</span>
+          <span className="normal-text">{utils.getDateString(user.createdAt)}</span>
+        </label>
+        <label className="form-label input-form-label username-label">
+          <span className="normal-text">账号：</span>
+          <input
+            type="text"
+            readOnly={!showEditUsernameInputs}
+            value={username}
+            onClick={() => {
+              setShowEditUsernameInputs(true);
+            }}
+            onChange={handleUsernameChanged}
+          />
+          <div className="btns-container" onClick={handlePreventDefault}>
+            <span className={"btn confirm-btn " + (showEditUsernameInputs ? "" : "hidden")} onClick={handleConfirmEditUsernameBtnClick}>
+              保存
+            </span>
+            <span
+              className={"btn cancel-btn " + (showEditUsernameInputs ? "" : "hidden")}
+              onClick={() => {
+                setUsername(user.username);
+                setShowEditUsernameInputs(false);
+              }}
+            >
+              撤销
+            </span>
+          </div>
+        </label>
+        <label className="form-label password-label">
+          <span className="normal-text">密码：</span>
+          <span className="btn" onClick={handleChangePasswordBtnClick}>
+            修改密码
+          </span>
+        </label>
+      </div>
+      {/* Account Binding Settings: only can use for domain: memos.justsven.top */}
+      <Only when={window.location.origin.includes("justsven.top")}>
+        <div className="section-container connect-section-container">
+          <p className="title-text">关联账号</p>
+          <label className="form-label input-form-label">
+            <span className="normal-text">微信 OpenID：</span>
+            {user.wxUserId ? (
+              <>
+                <span className="value-text">************</span>
+                <span
+                  className={`btn-text unbind-btn ${showConfirmUnbindWxBtn ? "final-confirm" : ""}`}
+                  onMouseLeave={() => setShowConfirmUnbindWxBtn(false)}
+                  onClick={handleUnbindWxBtnClick}
+                >
+                  {showConfirmUnbindWxBtn ? "确定取消绑定！" : "取消绑定"}
+                </span>
+              </>
+            ) : (
+              <>
+                <span className="value-text">空</span>
+                <span
+                  className="btn-text bind-btn"
+                  onClick={() => {
+                    showBindWxUserIdDialog();
+                  }}
+                >
+                  绑定 ID
+                </span>
+              </>
+            )}
+          </label>
+          <label className="form-label input-form-label">
+            <span className="normal-text">GitHub：</span>
+            {user.githubName ? (
+              <>
+                <a className="value-text" href={"https://github.com/" + user.githubName}>
+                  {user.githubName}
+                </a>
+                <span
+                  className={`btn-text unbind-btn ${showConfirmUnbindGithubBtn ? "final-confirm" : ""}`}
+                  onMouseLeave={() => setShowConfirmUnbindGithubBtn(false)}
+                  onClick={handleUnbindGithubBtnClick}
+                >
+                  {showConfirmUnbindGithubBtn ? "确定取消绑定！" : "取消绑定"}
+                </span>
+              </>
+            ) : (
+              <>
+                <span className="value-text">空</span>
+                <a
+                  className="btn-text link-btn"
+                  href="https://github.com/login/oauth/authorize?client_id=187ba36888f152b06612&scope=read:user,gist"
+                >
+                  前往绑定
+                </a>
+              </>
+            )}
+          </label>
+        </div>
+      </Only>
+    </>
+  );
+};
+
+export default MyAccountSection;

web/src/components/PreferencesSection.tsx

@@ -0,0 +1,112 @@
+import { useContext } from "react";
+import appContext from "../stores/appContext";
+import { globalStateService, memoService } from "../services";
+import { parseHtmlToRawText } from "../helpers/marked";
+import { formatMemoContent } from "./Memo";
+import "../less/preferences-section.less";
+
+interface Props {}
+
+const PreferencesSection: React.FC<Props> = () => {
+  const { globalState } = useContext(appContext);
+  const { useTinyUndoHistoryCache, shouldHideImageUrl, shouldSplitMemoWord, shouldUseMarkdownParser } = globalState;
+
+  const demoMemoContent = `👋 你好呀～\n我是一个demo：\n* 👏 欢迎使用memos；`;
+
+  const handleOpenTinyUndoChanged = () => {
+    globalStateService.setAppSetting({
+      useTinyUndoHistoryCache: !useTinyUndoHistoryCache,
+    });
+  };
+
+  const handleSplitWordsValueChanged = () => {
+    globalStateService.setAppSetting({
+      shouldSplitMemoWord: !shouldSplitMemoWord,
+    });
+  };
+
+  const handleHideImageUrlValueChanged = () => {
+    globalStateService.setAppSetting({
+      shouldHideImageUrl: !shouldHideImageUrl,
+    });
+  };
+
+  const handleUseMarkdownParserChanged = () => {
+    globalStateService.setAppSetting({
+      shouldUseMarkdownParser: !shouldUseMarkdownParser,
+    });
+  };
+
+  const handleExportBtnClick = async () => {
+    const formatedMemos = memoService.getState().memos.map((m) => {
+      return {
+        ...m,
+      };
+    });
+
+    const jsonStr = JSON.stringify(formatedMemos);
+    const element = document.createElement("a");
+    element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(jsonStr));
+    element.setAttribute("download", "data.json");
+    element.style.display = "none";
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+  };
+
+  const handleFormatMemosBtnClick = async () => {
+    const memos = memoService.getState().memos;
+    for (const m of memos) {
+      memoService.updateMemo(m.id, parseHtmlToRawText(m.content));
+    }
+  };
+
+  return (
+    <>
+      <div className="section-container preferences-section-container">
+        <p className="title-text">Memo 显示相关</p>
+        <div
+          className="demo-content-container memo-content-text"
+          dangerouslySetInnerHTML={{ __html: formatMemoContent(demoMemoContent) }}
+        ></div>
+        <label className="form-label checkbox-form-label" onClick={handleSplitWordsValueChanged}>
+          <span className="normal-text">中英文内容自动间隔</span>
+          <img className="icon-img" src={shouldSplitMemoWord ? "/icons/checkbox-active.svg" : "/icons/checkbox.svg"} />
+        </label>
+        <label className="form-label checkbox-form-label" onClick={handleUseMarkdownParserChanged}>
+          <span className="normal-text">部分 markdown 格式解析</span>
+          <img className="icon-img" src={shouldUseMarkdownParser ? "/icons/checkbox-active.svg" : "/icons/checkbox.svg"} />
+        </label>
+        <label className="form-label checkbox-form-label" onClick={handleHideImageUrlValueChanged}>
+          <span className="normal-text">隐藏图片链接地址</span>
+          <img className="icon-img" src={shouldHideImageUrl ? "/icons/checkbox-active.svg" : "/icons/checkbox.svg"} />
+        </label>
+      </div>
+      <div className="section-container preferences-section-container">
+        <p className="title-text">编辑器</p>
+        <label className="form-label checkbox-form-label" onClick={handleOpenTinyUndoChanged}>
+          <span className="normal-text">
+            启用{" "}
+            <a target="_blank" href="https://github.com/boojack/tiny-undo" onClick={(e) => e.stopPropagation()}>
+              tiny-undo
+            </a>
+          </span>
+          <img className="icon-img" src={useTinyUndoHistoryCache ? "/icons/checkbox-active.svg" : "/icons/checkbox.svg"} />
+        </label>
+      </div>
+      <div className="section-container hidden">
+        <p className="title-text">其他</p>
+        <div className="btn-container">
+          <button className="btn export-btn" onClick={handleExportBtnClick}>
+            导出数据(JSON)
+          </button>
+          <button className="btn format-btn" onClick={handleFormatMemosBtnClick}>
+            格式化数据
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PreferencesSection;

web/src/components/PreviewImageDialog.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from "react";
+import utils from "../helpers/utils";
+import { showDialog } from "./Dialog";
+import "../less/preview-image-dialog.less";
+
+interface Props extends DialogProps {
+  imgUrl: string;
+}
+
+const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
+  const imgRef = useRef<HTMLImageElement>(null);
+  const [imgWidth, setImgWidth] = useState<number>(-1);
+
+  useEffect(() => {
+    utils.getImageSize(imgUrl).then(({ width }) => {
+      if (width !== 0) {
+        setImgWidth(80);
+      } else {
+        setImgWidth(0);
+      }
+    });
+  }, []);
+
+  const handleCloseBtnClick = () => {
+    destroy();
+  };
+
+  const handleDecreaseImageSize = () => {
+    if (imgWidth > 30) {
+      setImgWidth(imgWidth - 10);
+    }
+  };
+
+  const handleIncreaseImageSize = () => {
+    setImgWidth(imgWidth + 10);
+  };
+
+  return (
+    <>
+      <button className="btn close-btn" onClick={handleCloseBtnClick}>
+        <img className="icon-img" src="/icons/close.svg" />
+      </button>
+
+      <div className="img-container">
+        <img className={imgWidth <= 0 ? "hidden" : ""} ref={imgRef} width={imgWidth + "%"} src={imgUrl} />
+        <span className={"loading-text " + (imgWidth === -1 ? "" : "hidden")}>图片加载中...</span>
+        <span className={"loading-text " + (imgWidth === 0 ? "" : "hidden")}>😟 图片加载失败，可能是无效的链接</span>
+      </div>
+
+      <div className="action-btns-container">
+        <button className="btn" onClick={handleDecreaseImageSize}>
+          ➖
+        </button>
+        <button className="btn" onClick={handleIncreaseImageSize}>
+          ➕
+        </button>
+        <button className="btn" onClick={() => setImgWidth(80)}>
+          ⭕
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default function showPreviewImageDialog(imgUrl: string): void {
+  showDialog(
+    {
+      className: "preview-image-dialog",
+    },
+    PreviewImageDialog,
+    { imgUrl }
+  );
+}

web/src/components/QueryList.tsx

@@ -0,0 +1,170 @@
+import React, { useContext, useEffect } from "react";
+import appContext from "../stores/appContext";
+import useToggle from "../hooks/useToggle";
+import useLoading from "../hooks/useLoading";
+import Only from "./common/OnlyWhen";
+import utils from "../helpers/utils";
+import toastHelper from "./Toast";
+import { locationService, queryService } from "../services";
+import showCreateQueryDialog from "./CreateQueryDialog";
+import "../less/query-list.less";
+
+interface Props {}
+
+const QueryList: React.FC<Props> = () => {
+  const {
+    queryState: { queries },
+    locationState: {
+      query: { filter },
+    },
+  } = useContext(appContext);
+  const loadingState = useLoading();
+  const sortedQueries = queries
+    .sort((a, b) => utils.getTimeStampByDate(b.createdAt) - utils.getTimeStampByDate(a.createdAt))
+    .sort((a, b) => utils.getTimeStampByDate(b.pinnedAt ?? 0) - utils.getTimeStampByDate(a.pinnedAt ?? 0));
+
+  useEffect(() => {
+    queryService
+      .getMyAllQueries()
+      .catch(() => {
+        // do nth
+      })
+      .finally(() => {
+        loadingState.setFinish();
+      });
+  }, []);
+
+  return (
+    <div className="queries-wrapper">
+      <p className="title-text">
+        <span className="normal-text">快速检索</span>
+        <span className="btn" onClick={() => showCreateQueryDialog()}>
+          +
+        </span>
+      </p>
+      <Only when={loadingState.isSucceed && sortedQueries.length === 0}>
+        <div className="create-query-btn-container">
+          <span className="btn" onClick={() => showCreateQueryDialog()}>
+            创建检索
+          </span>
+        </div>
+      </Only>
+      <div className="queries-container">
+        {sortedQueries.map((q) => {
+          return <QueryItemContainer key={q.id} query={q} isActive={q.id === filter} />;
+        })}
+      </div>
+    </div>
+  );
+};
+
+interface QueryItemContainerProps {
+  query: Model.Query;
+  isActive: boolean;
+}
+
+const QueryItemContainer: React.FC<QueryItemContainerProps> = (props: QueryItemContainerProps) => {
+  const { query, isActive } = props;
+  const [showActionBtns, toggleShowActionBtns] = useToggle(false);
+  const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
+
+  const handleQueryClick = () => {
+    if (isActive) {
+      locationService.setMemoFilter("");
+    } else {
+      if (!["/", "/recycle"].includes(locationService.getState().pathname)) {
+        locationService.setPathname("/");
+      }
+      locationService.setMemoFilter(query.id);
+    }
+  };
+
+  const handleShowActionBtnClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    toggleShowActionBtns();
+  };
+
+  const handleActionBtnContainerMouseLeave = () => {
+    toggleShowActionBtns(false);
+  };
+
+  const handleDeleteMemoClick = async (event: React.MouseEvent) => {
+    event.stopPropagation();
+
+    if (showConfirmDeleteBtn) {
+      try {
+        await queryService.deleteQuery(query.id);
+      } catch (error: any) {
+        toastHelper.error(error.message);
+      }
+    } else {
+      toggleConfirmDeleteBtn();
+    }
+  };
+
+  const handleEditQueryBtnClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    showCreateQueryDialog(query.id);
+  };
+
+  const handlePinQueryBtnClick = async (event: React.MouseEvent) => {
+    event.stopPropagation();
+
+    try {
+      if (query.pinnedAt) {
+        await queryService.unpinQuery(query.id);
+        queryService.editQuery({
+          ...query,
+          pinnedAt: undefined,
+        });
+      } else {
+        await queryService.pinQuery(query.id);
+        queryService.editQuery({
+          ...query,
+          pinnedAt: utils.getDateTimeString(Date.now()),
+        });
+      }
+    } catch (error) {
+      // do nth
+    }
+  };
+
+  const handleDeleteBtnMouseLeave = () => {
+    toggleConfirmDeleteBtn(false);
+  };
+
+  return (
+    <>
+      <div className={`query-item-container ${isActive ? "active" : ""}`} onClick={handleQueryClick}>
+        <div className="query-text-container">
+          <span className="icon-text">#</span>
+          <span className="query-text">{query.title}</span>
+        </div>
+        <div className="btns-container">
+          <span className="action-btn toggle-btn" onClick={handleShowActionBtnClick}>
+            <img className="icon-img" src={`/icons/more${isActive ? "-white" : ""}.svg`} />
+          </span>
+          <div className={`action-btns-wrapper ${showActionBtns ? "" : "hidden"}`} onMouseLeave={handleActionBtnContainerMouseLeave}>
+            <div className="action-btns-container">
+              <span className="btn" onClick={handlePinQueryBtnClick}>
+                {query.pinnedAt ? "取消置顶" : "置顶"}
+              </span>
+              <span className="btn" onClick={handleEditQueryBtnClick}>
+                编辑
+              </span>
+              <span
+                className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`}
+                onClick={handleDeleteMemoClick}
+                onMouseLeave={handleDeleteBtnMouseLeave}
+              >
+                {showConfirmDeleteBtn ? "确定删除！" : "删除"}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default QueryList;

web/src/components/SearchBar.tsx

@@ -0,0 +1,64 @@
+import { useContext } from "react";
+import appContext from "../stores/appContext";
+import { locationService } from "../services";
+import { memoSpecialTypes } from "../helpers/filter";
+import "../less/search-bar.less";
+
+interface Props {}
+
+const SearchBar: React.FC<Props> = () => {
+  const {
+    locationState: {
+      query: { type: memoType },
+    },
+  } = useContext(appContext);
+
+  const handleMemoTypeItemClick = (type: MemoSpecType | "") => {
+    const { type: prevType } = locationService.getState().query;
+    if (type === prevType) {
+      type = "";
+    }
+    locationService.setMemoTypeQuery(type);
+  };
+
+  const handleTextQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
+    const text = event.currentTarget.value;
+    locationService.setTextQuery(text);
+  };
+
+  return (
+    <div className="search-bar-container">
+      <div className="search-bar-inputer">
+        <img className="icon-img" src="/icons/search.svg" />
+        <input className="text-input" type="text" placeholder="" onChange={handleTextQueryInput} />
+      </div>
+      <div className="quickly-action-wrapper">
+        <div className="quickly-action-container">
+          <p className="title-text">QUICKLY FILTER</p>
+          <div className="section-container types-container">
+            <span className="section-text">类型:</span>
+            <div className="values-container">
+              {memoSpecialTypes.map((t, idx) => {
+                return (
+                  <div key={t.value}>
+                    <span
+                      className={`type-item ${memoType === t.value ? "selected" : ""}`}
+                      onClick={() => {
+                        handleMemoTypeItemClick(t.value as MemoSpecType);
+                      }}
+                    >
+                      {t.text}
+                    </span>
+                    {idx + 1 < memoSpecialTypes.length ? <span className="split-text">/</span> : null}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchBar;

web/src/components/ShareMemoImageDialog.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState } from "react";
+import { userService } from "../services";
+import toImage from "../labs/html2image";
+import { ANIMATION_DURATION, IMAGE_URL_REG } from "../helpers/consts";
+import utils from "../helpers/utils";
+import { showDialog } from "./Dialog";
+import { formatMemoContent } from "./Memo";
+import Only from "./common/OnlyWhen";
+import toastHelper from "./Toast";
+import "../less/share-memo-image-dialog.less";
+
+interface Props extends DialogProps {
+  memo: Model.Memo;
+}
+
+const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
+  const { memo: propsMemo, destroy } = props;
+  const { user: userinfo } = userService.getState();
+  const memo: FormattedMemo = {
+    ...propsMemo,
+    createdAtStr: utils.getDateTimeString(propsMemo.createdAt),
+  };
+  const memoImgUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []);
+
+  const [shortcutImgUrl, setShortcutImgUrl] = useState("");
+  const [imgAmount, setImgAmount] = useState(memoImgUrls.length);
+  const memoElRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (imgAmount > 0) {
+      return;
+    }
+
+    setTimeout(() => {
+      if (!memoElRef.current) {
+        return;
+      }
+
+      toImage(memoElRef.current, {
+        backgroundColor: "#eaeaea",
+        pixelRatio: window.devicePixelRatio * 2,
+      })
+        .then((url) => {
+          setShortcutImgUrl(url);
+        })
+        .catch(() => {
+          // do nth
+        });
+    }, ANIMATION_DURATION);
+  }, [imgAmount]);
+
+  const handleCloseBtnClick = () => {
+    destroy();
+  };
+
+  const handleImageOnLoad = (ev: React.SyntheticEvent<HTMLImageElement>) => {
+    if (ev.type === "error") {
+      toastHelper.error("有个图片加载失败了😟");
+      (ev.target as HTMLImageElement).remove();
+    }
+    setImgAmount(imgAmount - 1);
+  };
+
+  return (
+    <>
+      <div className="dialog-header-container">
+        <p className="title-text">
+          <span className="icon-text">🥰</span>分享 Memo 图片
+        </p>
+        <button className="btn close-btn" onClick={handleCloseBtnClick}>
+          <img className="icon-img" src="/icons/close.svg" />
+        </button>
+      </div>
+      <div className="dialog-content-container">
+        <div className={`tip-words-container ${shortcutImgUrl ? "finish" : "loading"}`}>
+          <p className="tip-text">{shortcutImgUrl ? "右键或长按即可保存图片 👇" : "图片生成中..."}</p>
+        </div>
+        <div className="memo-container" ref={memoElRef}>
+          <Only when={shortcutImgUrl !== ""}>
+            <img className="memo-shortcut-img" src={shortcutImgUrl} />
+          </Only>
+          <span className="time-text">{memo.createdAtStr}</span>
+          <div className="memo-content-text" dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}></div>
+          <Only when={memoImgUrls.length > 0}>
+            <div className="images-container">
+              {memoImgUrls.map((imgUrl, idx) => (
+                <img
+                  crossOrigin="anonymous"
+                  decoding="async"
+                  key={idx}
+                  src={imgUrl}
+                  onLoad={handleImageOnLoad}
+                  onError={handleImageOnLoad}
+                />
+              ))}
+            </div>
+          </Only>
+          <div className="watermark-container">
+            <span className="normal-text">
+              <span className="icon-text">✍️</span> by <span className="name-text">{userinfo?.username}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default function showShareMemoImageDialog(memo: Model.Memo): void {
+  showDialog(
+    {
+      className: "share-memo-image-dialog",
+    },
+    ShareMemoImageDialog,
+    { memo }
+  );
+}

web/src/components/Sidebar.tsx

@@ -0,0 +1,75 @@
+import { useContext, useEffect, useMemo, useRef } from "react";
+import appContext from "../stores/appContext";
+import { SHOW_SIDERBAR_MOBILE_CLASSNAME } from "../helpers/consts";
+import { globalStateService } from "../services";
+import UserBanner from "./UserBanner";
+import QueryList from "./QueryList";
+import TagList from "./TagList";
+import UsageHeatMap from "./UsageHeatMap";
+import "../less/siderbar.less";
+
+interface Props {}
+
+const Sidebar: React.FC<Props> = () => {
+  const {
+    locationState,
+    globalState: { isMobileView, showSiderbarInMobileView },
+  } = useContext(appContext);
+  const wrapperElRef = useRef<HTMLElement>(null);
+
+  const handleClickOutsideOfWrapper = useMemo(() => {
+    return (event: MouseEvent) => {
+      const siderbarShown = globalStateService.getState().showSiderbarInMobileView;
+
+      if (!siderbarShown) {
+        window.removeEventListener("click", handleClickOutsideOfWrapper, {
+          capture: true,
+        });
+        return;
+      }
+
+      if (!wrapperElRef.current?.contains(event.target as Node)) {
+        if (wrapperElRef.current?.parentNode?.contains(event.target as Node)) {
+          if (siderbarShown) {
+            event.stopPropagation();
+          }
+          globalStateService.setShowSiderbarInMobileView(false);
+          window.removeEventListener("click", handleClickOutsideOfWrapper, {
+            capture: true,
+          });
+        }
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    globalStateService.setShowSiderbarInMobileView(false);
+  }, [locationState]);
+
+  useEffect(() => {
+    if (showSiderbarInMobileView) {
+      document.body.classList.add(SHOW_SIDERBAR_MOBILE_CLASSNAME);
+    } else {
+      document.body.classList.remove(SHOW_SIDERBAR_MOBILE_CLASSNAME);
+    }
+  }, [showSiderbarInMobileView]);
+
+  useEffect(() => {
+    if (isMobileView && showSiderbarInMobileView) {
+      window.addEventListener("click", handleClickOutsideOfWrapper, {
+        capture: true,
+      });
+    }
+  }, [isMobileView, showSiderbarInMobileView]);
+
+  return (
+    <aside className="sidebar-wrapper" ref={wrapperElRef}>
+      <UserBanner />
+      <UsageHeatMap />
+      <QueryList />
+      <TagList />
+    </aside>
+  );
+};
+
+export default Sidebar;

web/src/components/TagList.tsx

@@ -0,0 +1,143 @@
+import { useContext, useEffect, useState } from "react";
+import appContext from "../stores/appContext";
+import { locationService, memoService } from "../services";
+import useToggle from "../hooks/useToggle";
+import Only from "./common/OnlyWhen";
+import utils from "../helpers/utils";
+import "../less/tag-list.less";
+
+interface Tag {
+  key: string;
+  text: string;
+  subTags: Tag[];
+}
+
+interface Props {}
+
+const TagList: React.FC<Props> = () => {
+  const {
+    locationState: {
+      query: { tag: tagQuery },
+    },
+    memoState: { tags: tagsText, memos },
+  } = useContext(appContext);
+  const [tags, setTags] = useState<Tag[]>([]);
+
+  useEffect(() => {
+    memoService.updateTagsState();
+  }, [memos]);
+
+  useEffect(() => {
+    const sortedTags = Array.from(tagsText).sort();
+    const root: KVObject<any> = {
+      subTags: [],
+    };
+    for (const tag of sortedTags) {
+      const subtags = tag.split("/");
+      let tempObj = root;
+      let tagText = "";
+      for (let i = 0; i < subtags.length; i++) {
+        const key = subtags[i];
+        if (i === 0) {
+          tagText += key;
+        } else {
+          tagText += "/" + key;
+        }
+
+        let obj = null;
+
+        for (const t of tempObj.subTags) {
+          if (t.text === tagText) {
+            obj = t;
+            break;
+          }
+        }
+
+        if (!obj) {
+          obj = {
+            key,
+            text: tagText,
+            subTags: [],
+          };
+          tempObj.subTags.push(obj);
+        }
+
+        tempObj = obj;
+      }
+    }
+    setTags(root.subTags as Tag[]);
+  }, [tagsText]);
+
+  return (
+    <div className="tags-wrapper">
+      <p className="title-text">常用标签</p>
+      <div className="tags-container">
+        {tags.map((t, idx) => (
+          <TagItemContainer key={t.text + "-" + idx} tag={t} tagQuery={tagQuery} />
+        ))}
+        <Only when={tags.length < 5 && memoService.initialized}>
+          <p className="tag-tip-container">
+            输入<span className="code-text"># Tag </span>来创建标签吧~
+          </p>
+        </Only>
+      </div>
+    </div>
+  );
+};
+
+interface TagItemContainerProps {
+  tag: Tag;
+  tagQuery: string;
+}
+
+const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContainerProps) => {
+  const { tag, tagQuery } = props;
+  const isActive = tagQuery === tag.text;
+  const hasSubTags = tag.subTags.length > 0;
+  const [showSubTags, toggleSubTags] = useToggle(false);
+
+  const handleTagClick = () => {
+    if (isActive) {
+      locationService.setTagQuery("");
+    } else {
+      utils.copyTextToClipboard(`# ${tag.text} `);
+      if (!["/", "/recycle"].includes(locationService.getState().pathname)) {
+        locationService.setPathname("/");
+      }
+      locationService.setTagQuery(tag.text);
+    }
+  };
+
+  const handleToggleBtnClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    toggleSubTags();
+  };
+
+  return (
+    <>
+      <div className={`tag-item-container ${isActive ? "active" : ""}`} onClick={handleTagClick}>
+        <div className="tag-text-container">
+          <span className="icon-text">#</span>
+          <span className="tag-text">{tag.key}</span>
+        </div>
+        <div className="btns-container">
+          {hasSubTags ? (
+            <span className={`action-btn toggle-btn ${showSubTags ? "shown" : ""}`} onClick={handleToggleBtnClick}>
+              <img className="icon-img" src="/icons/arrow-right.svg" />
+            </span>
+          ) : null}
+        </div>
+      </div>
+
+      {hasSubTags ? (
+        <div className={`subtags-container ${showSubTags ? "" : "hidden"}`}>
+          {tag.subTags.map((st, idx) => (
+            <TagItemContainer key={st.text + "-" + idx} tag={st} tagQuery={tagQuery} />
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default TagList;

web/src/components/Toast.tsx

@@ -0,0 +1,104 @@
+import { useEffect } from "react";
+import ReactDOM from "react-dom";
+import { TOAST_ANIMATION_DURATION } from "../helpers/consts";
+import "../less/toast.less";
+
+type ToastType = "normal" | "success" | "info" | "error";
+
+type ToastConfig = {
+  type: ToastType;
+  content: string;
+  duration: number;
+};
+
+type ToastItemProps = {
+  type: ToastType;
+  content: string;
+  duration: number;
+  destory: FunctionType;
+};
+
+const Toast: React.FC<ToastItemProps> = (props: ToastItemProps) => {
+  const { destory, duration } = props;
+
+  useEffect(() => {
+    if (duration > 0) {
+      setTimeout(() => {
+        destory();
+      }, duration);
+    }
+  }, []);
+
+  return (
+    <div className="toast-container" onClick={destory}>
+      <p className="content-text">{props.content}</p>
+    </div>
+  );
+};
+
+class ToastHelper {
+  private shownToastAmount = 0;
+  private toastWrapper: HTMLDivElement;
+  private shownToastContainers: HTMLDivElement[] = [];
+
+  constructor() {
+    const wrapperClassName = "toast-list-container";
+    const tempDiv = document.createElement("div");
+    tempDiv.className = wrapperClassName;
+    document.body.appendChild(tempDiv);
+    this.toastWrapper = tempDiv;
+  }
+
+  public info = (content: string, duration = 3000) => {
+    return this.showToast({ type: "normal", content, duration });
+  };
+
+  public success = (content: string, duration = 3000) => {
+    return this.showToast({ type: "success", content, duration });
+  };
+
+  public error = (content: string, duration = 3000) => {
+    return this.showToast({ type: "error", content, duration });
+  };
+
+  private showToast = (config: ToastConfig) => {
+    const tempDiv = document.createElement("div");
+    tempDiv.className = `toast-wrapper ${config.type}`;
+    this.toastWrapper.appendChild(tempDiv);
+    this.shownToastAmount++;
+    this.shownToastContainers.push(tempDiv);
+
+    setTimeout(() => {
+      tempDiv.classList.add("showup");
+    }, 0);
+
+    const cbs = {
+      destory: () => {
+        tempDiv.classList.add("destory");
+
+        setTimeout(() => {
+          if (!tempDiv.parentElement) {
+            return;
+          }
+
+          this.shownToastAmount--;
+          if (this.shownToastAmount === 0) {
+            for (const d of this.shownToastContainers) {
+              ReactDOM.unmountComponentAtNode(d);
+              d.remove();
+            }
+            this.shownToastContainers.splice(0, this.shownToastContainers.length);
+          }
+        }, TOAST_ANIMATION_DURATION);
+      },
+    };
+
+    ReactDOM.render(<Toast {...config} destory={cbs.destory} />, tempDiv);
+
+    return cbs;
+  };
+}
+
+const toastHelper = new ToastHelper();
+
+export default toastHelper;

web/src/components/UsageHeatMap.tsx

@@ -0,0 +1,143 @@
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import appContext from "../stores/appContext";
+import { globalStateService, locationService } from "../services";
+import { DAILY_TIMESTAMP } from "../helpers/consts";
+import utils from "../helpers/utils";
+import "../less/usage-heat-map.less";
+
+const tableConfig = {
+  width: 12,
+  height: 7,
+};
+
+const getInitialUsageStat = (usedDaysAmount: number, beginDayTimestemp: number): DailyUsageStat[] => {
+  const initialUsageStat: DailyUsageStat[] = [];
+  for (let i = 1; i <= usedDaysAmount; i++) {
+    initialUsageStat.push({
+      timestamp: beginDayTimestemp + DAILY_TIMESTAMP * i,
+      count: 0,
+    });
+  }
+  return initialUsageStat;
+};
+
+interface DailyUsageStat {
+  timestamp: number;
+  count: number;
+}
+
+interface Props {}
+
+const UsageHeatMap: React.FC<Props> = () => {
+  const todayTimeStamp = utils.getDateStampByDate(Date.now());
+  const todayDay = new Date(todayTimeStamp).getDay() || 7;
+  const nullCell = new Array(7 - todayDay).fill(0);
+  const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
+  const beginDayTimestemp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
+
+  const {
+    memoState: { memos },
+  } = useContext(appContext);
+  const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestemp));
+  const [popupStat, setPopupStat] = useState<DailyUsageStat | null>(null);
+  const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
+  const containerElRef = useRef<HTMLDivElement>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestemp);
+    for (const m of memos) {
+      const index = (utils.getDateStampByDate(m.createdAt) - beginDayTimestemp) / (1000 * 3600 * 24) - 1;
+      if (index >= 0) {
+        newStat[index].count += 1;
+      }
+    }
+    setAllStat([...newStat]);
+  }, [memos]);
+
+  const handleUsageStatItemMouseEnter = useCallback((event: React.MouseEvent, item: DailyUsageStat) => {
+    setPopupStat(item);
+    if (!popupRef.current) {
+      return;
+    }
+
+    const { isMobileView } = globalStateService.getState();
+    const targetEl = event.target as HTMLElement;
+    const sidebarEl = document.querySelector(".sidebar-wrapper") as HTMLElement;
+    popupRef.current.style.left = targetEl.offsetLeft - (containerElRef.current?.offsetLeft ?? 0) + "px";
+    let topValue = targetEl.offsetTop;
+    if (!isMobileView) {
+      topValue -= sidebarEl.scrollTop;
+    }
+    popupRef.current.style.top = topValue + "px";
+  }, []);
+
+  const handleUsageStatItemMouseLeave = useCallback(() => {
+    setPopupStat(null);
+  }, []);
+
+  const handleUsageStatItemClick = useCallback((item: DailyUsageStat) => {
+    if (locationService.getState().query.duration?.from === item.timestamp) {
+      locationService.setFromAndToQuery(0, 0);
+      setCurrentStat(null);
+    } else if (item.count > 0) {
+      if (!["/", "/recycle"].includes(locationService.getState().pathname)) {
+        locationService.setPathname("/");
+      }
+      locationService.setFromAndToQuery(item.timestamp, item.timestamp + DAILY_TIMESTAMP);
+      setCurrentStat(item);
+    }
+  }, []);
+
+  return (
+    <div className="usage-heat-map-wrapper" ref={containerElRef}>
+      <div className="day-tip-text-container">
+        <span className="tip-text">Mon</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">Wed</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">Fri</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">Sun</span>
+      </div>
+
+      {/* popup */}
+      <div ref={popupRef} className={"usage-detail-container pop-up " + (popupStat ? "" : "hidden")}>
+        {popupStat?.count} memos on <span className="date-text">{new Date(popupStat?.timestamp as number).toDateString()}</span>
+      </div>
+
+      <div className="usage-heat-map">
+        {allStat.map((v, i) => {
+          const count = v.count;
+          const colorLevel =
+            count <= 0
+              ? ""
+              : count <= 1
+              ? "stat-day-L1-bg"
+              : count <= 2
+              ? "stat-day-L2-bg"
+              : count <= 4
+              ? "stat-day-L3-bg"
+              : "stat-day-L4-bg";
+
+          return (
+            <span
+              className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${
+                todayTimeStamp === v.timestamp ? "today" : ""
+              }`}
+              key={i}
+              onMouseEnter={(e) => handleUsageStatItemMouseEnter(e, v)}
+              onMouseLeave={handleUsageStatItemMouseLeave}
+              onClick={() => handleUsageStatItemClick(v)}
+            ></span>
+          );
+        })}
+        {nullCell.map((v, i) => (
+          <span className="stat-container null" key={i}></span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default UsageHeatMap;

web/src/components/UserBanner.tsx

@@ -0,0 +1,62 @@
+import { useCallback, useContext, useState } from "react";
+import appContext from "../stores/appContext";
+import { locationService } from "../services";
+import utils from "../helpers/utils";
+import MenuBtnsPopup from "./MenuBtnsPopup";
+import showDailyMemoDiaryDialog from "./DailyMemoDiaryDialog";
+import "../less/user-banner.less";
+
+interface Props {}
+
+const UserBanner: React.FC<Props> = () => {
+  const {
+    memoState: { memos, tags },
+    userState: { user },
+  } = useContext(appContext);
+  const username = user ? user.username : "Memos";
+  const createdDays = user ? Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdAt)) / 1000 / 3600 / 24) : 0;
+
+  const [shouldShowPopupBtns, setShouldShowPopupBtns] = useState(false);
+
+  const handleUsernameClick = useCallback(() => {
+    locationService.pushHistory("/");
+    locationService.clearQuery();
+  }, []);
+
+  const handlePopupBtnClick = () => {
+    const sidebarEl = document.querySelector(".sidebar-wrapper") as HTMLElement;
+    const popupEl = document.querySelector(".menu-btns-popup") as HTMLElement;
+    popupEl.style.top = 54 - sidebarEl.scrollTop + "px";
+    setShouldShowPopupBtns(true);
+  };
+
+  return (
+    <div className="user-banner-container">
+      <div className="userinfo-header-container">
+        <p className="username-text" onClick={handleUsernameClick}>
+          {username}
+        </p>
+        <span className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}>
+          <img src="/icons/more.svg" className="icon-img" />
+        </span>
+        <MenuBtnsPopup shownStatus={shouldShowPopupBtns} setShownStatus={setShouldShowPopupBtns} />
+      </div>
+      <div className="status-text-container">
+        <div className="status-text memos-text">
+          <span className="amount-text">{memos.length}</span>
+          <span className="type-text">MEMO</span>
+        </div>
+        <div className="status-text tags-text">
+          <span className="amount-text">{tags.length}</span>
+          <span className="type-text">TAG</span>
+        </div>
+        <div className="status-text duration-text" onClick={() => showDailyMemoDiaryDialog()}>
+          <span className="amount-text">{createdDays}</span>
+          <span className="type-text">DAY</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserBanner;

web/src/components/common/DatePicker.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import { DAILY_TIMESTAMP } from "../../helpers/consts";
+import "../../less/common/date-picker.less";
+
+interface DatePickerProps {
+  className?: string;
+  datestamp: DateStamp;
+  handleDateStampChange: (datastamp: DateStamp) => void;
+}
+
+const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
+  const { className, datestamp, handleDateStampChange } = props;
+  const [currentDateStamp, setCurrentDateStamp] = useState<DateStamp>(getMonthFirstDayDateStamp(datestamp));
+
+  useEffect(() => {
+    setCurrentDateStamp(getMonthFirstDayDateStamp(datestamp));
+  }, [datestamp]);
+
+  const firstDate = new Date(currentDateStamp);
+  const firstDateDay = firstDate.getDay() === 0 ? 7 : firstDate.getDay();
+  const dayList = [];
+  for (let i = 1; i < firstDateDay; i++) {
+    dayList.push({
+      date: 0,
+      datestamp: firstDate.getTime() - DAILY_TIMESTAMP * (7 - i),
+    });
+  }
+  const dayAmount = getMonthDayAmount(currentDateStamp);
+  for (let i = 1; i <= dayAmount; i++) {
+    dayList.push({
+      date: i,
+      datestamp: firstDate.getTime() + DAILY_TIMESTAMP * (i - 1),
+    });
+  }
+
+  const handleDateItemClick = (datestamp: DateStamp) => {
+    handleDateStampChange(datestamp);
+  };
+
+  const handleChangeMonthBtnClick = (i: -1 | 1) => {
+    const year = firstDate.getFullYear();
+    const month = firstDate.getMonth() + 1;
+    let nextDateStamp = 0;
+    if (month === 1 && i === -1) {
+      nextDateStamp = new Date(`${year - 1}/12/1`).getTime();
+    } else if (month === 12 && i === 1) {
+      nextDateStamp = new Date(`${year + 1}/1/1`).getTime();
+    } else {
+      nextDateStamp = new Date(`${year}/${month + i}/1`).getTime();
+    }
+    setCurrentDateStamp(getMonthFirstDayDateStamp(nextDateStamp));
+  };
+
+  return (
+    <div className={`date-picker-wrapper ${className}`}>
+      <div className="date-picker-header">
+        <span className="btn-text" onClick={() => handleChangeMonthBtnClick(-1)}>
+          <img className="icon-img" src="/icons/arrow-left.svg" />
+        </span>
+        <span className="normal-text">
+          {firstDate.getFullYear()} 年 {firstDate.getMonth() + 1} 月
+        </span>
+        <span className="btn-text" onClick={() => handleChangeMonthBtnClick(1)}>
+          <img className="icon-img" src="/icons/arrow-right.svg" />
+        </span>
+      </div>
+      <div className="date-picker-day-container">
+        <div className="date-picker-day-header">
+          <span className="day-item">周一</span>
+          <span className="day-item">周二</span>
+          <span className="day-item">周三</span>
+          <span className="day-item">周四</span>
+          <span className="day-item">周五</span>
+          <span className="day-item">周六</span>
+          <span className="day-item">周日</span>
+        </div>
+
+        {dayList.map((d) => {
+          if (d.date === 0) {
+            return (
+              <span key={d.datestamp} className="day-item null">
+                {""}
+              </span>
+            );
+          } else {
+            return (
+              <span
+                key={d.datestamp}
+                className={`day-item ${d.datestamp === datestamp ? "current" : ""}`}
+                onClick={() => handleDateItemClick(d.datestamp)}
+              >
+                {d.date}
+              </span>
+            );
+          }
+        })}
+      </div>
+    </div>
+  );
+};
+
+function getMonthDayAmount(datestamp: DateStamp): number {
+  const dateTemp = new Date(datestamp);
+  const currentDate = new Date(`${dateTemp.getFullYear()}/${dateTemp.getMonth() + 1}/1`);
+  const nextMonthDate =
+    currentDate.getMonth() === 11
+      ? new Date(`${currentDate.getFullYear() + 1}/1/1`)
+      : new Date(`${currentDate.getFullYear()}/${currentDate.getMonth() + 2}/1`);
+
+  return (nextMonthDate.getTime() - currentDate.getTime()) / DAILY_TIMESTAMP;
+}
+
+function getMonthFirstDayDateStamp(timestamp: TimeStamp): DateStamp {
+  const dateTemp = new Date(timestamp);
+  const currentDate = new Date(`${dateTemp.getFullYear()}/${dateTemp.getMonth() + 1}/1`);
+  return currentDate.getTime();
+}
+
+export default DatePicker;

web/src/components/common/OnlyWhen.tsx

@@ -0,0 +1,13 @@
+interface OnlyWhenProps {
+  children: React.ReactElement;
+  when: boolean;
+}
+
+const OnlyWhen: React.FC<OnlyWhenProps> = (props: OnlyWhenProps) => {
+  const { children, when } = props;
+  return when ? <>{children}</> : null;
+};
+
+const Only = OnlyWhen;
+
+export default Only;

web/src/components/common/Selector.tsx

@@ -0,0 +1,90 @@
+import React, { memo, useEffect, useRef } from "react";
+import useToggle from "../../hooks/useToggle";
+import "../../less/common/selector.less";
+
+interface TVObject {
+  text: string;
+  value: string;
+}
+
+interface Props {
+  className?: string;
+  value: string;
+  dataSource: TVObject[];
+  handleValueChanged?: (value: string) => void;
+}
+
+const nullItem = {
+  text: "请选择",
+  value: "",
+};
+
+const Selector: React.FC<Props> = (props: Props) => {
+  const { className, dataSource, handleValueChanged, value } = props;
+  const [showSelector, toggleSelectorStatus] = useToggle(false);
+
+  const seletorElRef = useRef<HTMLDivElement>(null);
+
+  let currentItem = nullItem;
+  for (const d of dataSource) {
+    if (d.value === value) {
+      currentItem = d;
+      break;
+    }
+  }
+
+  useEffect(() => {
+    if (showSelector) {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (!seletorElRef.current?.contains(event.target as Node)) {
+          toggleSelectorStatus(false);
+        }
+      };
+      window.addEventListener("click", handleClickOutside, {
+        capture: true,
+        once: true,
+      });
+    }
+  }, [showSelector]);
+
+  const handleItemClick = (item: TVObject) => {
+    if (handleValueChanged) {
+      handleValueChanged(item.value);
+    }
+    toggleSelectorStatus(false);
+  };
+
+  const handleCurrentValueClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    toggleSelectorStatus();
+  };
+
+  return (
+    <div className={`selector-wrapper ${className ?? ""}`} ref={seletorElRef}>
+      <div className={`current-value-container ${showSelector ? "active" : ""}`} onClick={handleCurrentValueClick}>
+        <span className="value-text">{currentItem.text}</span>
+        <span className="arrow-text">
+          <img className="icon-img" src="/icons/arrow-right.svg" />
+        </span>
+      </div>
+
+      <div className={`items-wrapper ${showSelector ? "" : "hidden"}`}>
+        {dataSource.map((d) => {
+          return (
+            <div
+              className={`item-container ${d.value === value ? "selected" : ""}`}
+              key={d.value}
+              onClick={() => {
+                handleItemClick(d);
+              }}
+            >
+              {d.text}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default memo(Selector);

web/src/helpers/api.ts

@@ -0,0 +1,144 @@
+type ResponseType<T = unknown> = {
+  succeed: boolean;
+  status: number;
+  message: string;
+  data: T;
+};
+
+async function get<T>(url: string): Promise<ResponseType<T>> {
+  const response = await fetch(url, {
+    method: "GET",
+  });
+  const resData = (await response.json()) as ResponseType<T>;
+
+  if (!resData.succeed) {
+    throw resData;
+  }
+
+  return resData;
+}
+
+async function post<T>(url: string, data?: BasicType): Promise<ResponseType<T>> {
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+
+  const resData = (await response.json()) as ResponseType<T>;
+
+  if (!resData.succeed) {
+    throw resData;
+  }
+
+  return resData;
+}
+
+namespace api {
+  export function getUserInfo() {
+    return get<Model.User>("/api/user/me");
+  }
+
+  export function signin(username: string, password: string) {
+    return post("/api/user/signin", { username, password });
+  }
+
+  export function signup(username: string, password: string) {
+    return post("/api/user/signup", { username, password });
+  }
+
+  export function signout() {
+    return post("/api/user/signout");
+  }
+
+  export function checkUsernameUsable(username: string) {
+    return get<boolean>("/api/user/checkusername?username=" + username);
+  }
+
+  export function checkPasswordValid(password: string) {
+    return post<boolean>("/api/user/checkpassword", { password });
+  }
+
+  export function updateUserinfo(username?: string, password?: string, githubName?: string, wxUserId?: string) {
+    return post("/api/user/update", {
+      username,
+      password,
+      githubName,
+      wxUserId,
+    });
+  }
+
+  export function getMyMemos() {
+    return get<Model.Memo[]>("/api/memo/all");
+  }
+
+  export function getMyDeletedMemos() {
+    return get<Model.Memo[]>("/api/memo/deleted");
+  }
+
+  export function createMemo(content: string) {
+    return post<Model.Memo>("/api/memo/new", { content });
+  }
+
+  export function getMemoById(id: string) {
+    return get<Model.Memo>("/api/memo/?id=" + id);
+  }
+
+  export function hideMemo(memoId: string) {
+    return post("/api/memo/hide", {
+      memoId,
+    });
+  }
+
+  export function restoreMemo(memoId: string) {
+    return post("/api/memo/restore", {
+      memoId,
+    });
+  }
+
+  export function deleteMemo(memoId: string) {
+    return post("/api/memo/delete", {
+      memoId,
+    });
+  }
+
+  export function updateMemo(memoId: string, content: string) {
+    return post<Model.Memo>("/api/memo/update", { memoId, content });
+  }
+
+  export function getLinkedMemos(memoId: string) {
+    return get<Model.Memo[]>("/api/memo/linked?memoId=" + memoId);
+  }
+
+  export function removeGithubName() {
+    return post("/api/user/updategh", { githubName: "" });
+  }
+
+  export function getMyQueries() {
+    return get<Model.Query[]>("/api/query/all");
+  }
+
+  export function createQuery(title: string, querystring: string) {
+    return post<Model.Query>("/api/query/new", { title, querystring });
+  }
+
+  export function updateQuery(queryId: string, title: string, querystring: string) {
+    return post<Model.Query>("/api/query/update", { queryId, title, querystring });
+  }
+
+  export function deleteQueryById(queryId: string) {
+    return post("/api/query/delete", { queryId });
+  }
+
+  export function pinQuery(queryId: string) {
+    return post("/api/query/pin", { queryId });
+  }
+
+  export function unpinQuery(queryId: string) {
+    return post("/api/query/unpin", { queryId });
+  }
+}
+
+export default api;

web/src/helpers/consts.ts

@@ -0,0 +1,23 @@
+// 移动端样式适配额外类名
+export const SHOW_SIDERBAR_MOBILE_CLASSNAME = "mobile-show-sidebar";
+
+// 默认动画持续时长
+export const ANIMATION_DURATION = 200;
+
+// toast 动画持续时长
+export const TOAST_ANIMATION_DURATION = 400;
+
+// 一天的毫秒数
+export const DAILY_TIMESTAMP = 3600 * 24 * 1000;
+
+// 标签 正则
+export const TAG_REG = /#\s(.+?)\s/g;
+
+// URL 正则
+export const LINK_REG = /(https?:\/\/[^\s<\\*>']+)/g;
+
+// 图片 正则
+export const IMAGE_URL_REG = /(https?:\/\/[^\s<\\*>']+\.(jpeg|jpg|gif|png|svg))/g;
+
+// memo 关联正则
+export const MEMO_LINK_REG = /\[@(.+?)\]\((.+?)\)/g;

web/src/helpers/filter.ts

@@ -0,0 +1,151 @@
+import { IMAGE_URL_REG, LINK_REG, MEMO_LINK_REG, TAG_REG } from "./consts";
+
+export const relationConsts = [
+  { text: "且", value: "AND" },
+  { text: "或", value: "OR" },
+];
+
+export const filterConsts = {
+  TAG: {
+    value: "TAG",
+    text: "标签",
+    operators: [
+      {
+        text: "包括",
+        value: "CONTAIN",
+      },
+      {
+        text: "排除",
+        value: "NOT_CONTAIN",
+      },
+    ],
+  },
+  TYPE: {
+    value: "TYPE",
+    text: "类型",
+    operators: [
+      {
+        value: "IS",
+        text: "是",
+      },
+      {
+        value: "IS_NOT",
+        text: "不是",
+      },
+    ],
+    values: [
+      {
+        value: "CONNECTED",
+        text: "有关联",
+      },
+      {
+        value: "NOT_TAGGED",
+        text: "无标签",
+      },
+      {
+        value: "LINKED",
+        text: "有超链接",
+      },
+      {
+        value: "IMAGED",
+        text: "有图片",
+      },
+    ],
+  },
+  TEXT: {
+    value: "TEXT",
+    text: "文本",
+    operators: [
+      {
+        value: "CONTAIN",
+        text: "包括",
+      },
+      {
+        value: "NOT_CONTAIN",
+        text: "排除",
+      },
+    ],
+  },
+};
+
+export const memoSpecialTypes = filterConsts["TYPE"].values;
+
+export const getTextWithMemoType = (type: string): string => {
+  for (const t of memoSpecialTypes) {
+    if (t.value === type) {
+      return t.text;
+    }
+  }
+  return "";
+};
+
+export const getDefaultFilter = (): BaseFilter => {
+  return {
+    type: "TAG",
+    value: {
+      operator: "CONTAIN",
+      value: "",
+    },
+    relation: "AND",
+  };
+};
+
+export const checkShouldShowMemoWithFilters = (memo: Model.Memo, filters: Filter[]) => {
+  let shouldShow = true;
+
+  for (const f of filters) {
+    const { relation } = f;
+    const r = checkShouldShowMemo(memo, f);
+    if (relation === "OR") {
+      shouldShow = shouldShow || r;
+    } else {
+      shouldShow = shouldShow && r;
+    }
+  }
+
+  return shouldShow;
+};
+
+export const checkShouldShowMemo = (memo: Model.Memo, filter: Filter) => {
+  const {
+    type,
+    value: { operator, value },
+  } = filter;
+
+  if (value === "") {
+    return true;
+  }
+
+  let shouldShow = true;
+
+  if (type === "TAG") {
+    let contained = memo.content.includes(`# ${value}`);
+    if (operator === "NOT_CONTAIN") {
+      contained = !contained;
+    }
+    shouldShow = contained;
+  } else if (type === "TYPE") {
+    let matched = false;
+    if (value === "NOT_TAGGED" && memo.content.match(TAG_REG) === null) {
+      matched = true;
+    } else if (value === "LINKED" && memo.content.match(LINK_REG) !== null) {
+      matched = true;
+    } else if (value === "IMAGED" && memo.content.match(IMAGE_URL_REG) !== null) {
+      matched = true;
+    } else if (value === "CONNECTED" && memo.content.match(MEMO_LINK_REG) !== null) {
+      matched = true;
+    }
+    if (operator === "IS_NOT") {
+      matched = !matched;
+    }
+    shouldShow = matched;
+  } else if (type === "TEXT") {
+    let contained = memo.content.includes(value);
+    if (operator === "NOT_CONTAIN") {
+      contained = !contained;
+    }
+    shouldShow = contained;
+  }
+
+  return shouldShow;
+};

web/src/helpers/marked.ts

@@ -0,0 +1,86 @@
+/**
+ * 实现一个简易版的 markdown 解析
+ * - 列表解析；
+ * - 代码块；
+ * - 加粗/斜体；
+ * - TODO;
+ */
+import Prism from "prismjs";
+
+const CODE_BLOCK_REG = /```([\s\S]*?)```/g;
+const BOLD_TEXT_REG = /\*\*(.+?)\*\*/g;
+const EM_TEXT_REG = /\*(.+?)\*/g;
+const TODO_BLOCK_REG = /\[ \] /g;
+const DONE_BLOCK_REG = /\[x\] /g;
+const DOT_LI_REG = /[*] /g;
+const NUM_LI_REG = /(\d+)\. /g;
+
+const getCodeLanguage = (codeStr: string): string => {
+  const execRes = /^\w+/g.exec(codeStr);
+
+  if (execRes !== null) {
+    return execRes[0];
+  }
+
+  return "javascript";
+};
+
+const parseCodeToPrism = (codeStr: string): string => {
+  return codeStr.replace(CODE_BLOCK_REG, (_, matchedStr): string => {
+    const lang = getCodeLanguage(matchedStr);
+    let convertedStr = matchedStr
+      .replace(lang, "")
+      .replace(/<p>/g, "")
+      .replace(/<\/p>/g, "\r\n")
+      .replace(/<br>/g, "\r\n")
+      .replace(/&nbsp;/g, " ");
+
+    // 特定语言处理
+    switch (lang) {
+      case "html":
+        convertedStr = convertedStr.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+    }
+
+    try {
+      const resultStr = Prism.highlight(convertedStr, Prism.languages[lang], lang);
+      return `<pre>${resultStr}</pre>`;
+    } catch (error) {
+      // do nth
+    }
+
+    return `<pre>${codeStr}</pre>`;
+  });
+};
+
+const parseMarkedToHtml = (markedStr: string): string => {
+  const htmlText = parseCodeToPrism(markedStr)
+    .replace(DOT_LI_REG, "<span class='counter-block'>•</span>")
+    .replace(NUM_LI_REG, "<span class='counter-block'>$1.</span>")
+    .replace(TODO_BLOCK_REG, "<span class='todo-block' data-type='todo'>⬜</span>")
+    .replace(DONE_BLOCK_REG, "<span class='todo-block' data-type='done'>✅</span>")
+    .replace(BOLD_TEXT_REG, "<strong>$1</strong>")
+    .replace(EM_TEXT_REG, "<em>$1</em>");
+
+  return htmlText;
+};
+
+const parseHtmlToRawText = (htmlStr: string): string => {
+  const tempEl = document.createElement("div");
+  tempEl.className = "memo-content-text";
+  tempEl.innerHTML = htmlStr;
+  const text = tempEl.innerText;
+  return text;
+};
+
+const parseRawTextToHtml = (rawTextStr: string): string => {
+  const htmlText = rawTextStr.replace(/\n/g, "<br>");
+  return htmlText;
+};
+
+const encodeHtml = (htmlStr: string): string => {
+  const t = document.createElement("div");
+  t.textContent = htmlStr;
+  return t.innerHTML;
+};
+
+export { encodeHtml, parseMarkedToHtml, parseHtmlToRawText, parseRawTextToHtml };

web/src/helpers/polyfill.ts

@@ -0,0 +1,15 @@
+(() => {
+  if (!String.prototype.replaceAll) {
+    String.prototype.replaceAll = function (str: any, newStr: any) {
+      // If a regex pattern
+      if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
+        return this.replace(str, newStr);
+      }
+
+      // If a string
+      return this.replace(new RegExp(str, "g"), newStr);
+    };
+  }
+})();
+
+export default null;

web/src/helpers/storage.ts

@@ -0,0 +1,78 @@
+import { InputAction } from "tiny-undo";
+
+/**
+ * Define storage data type
+ */
+interface StorageData {
+  // 编辑器输入缓存内容
+  editorContentCache: string;
+  // 分词开关
+  shouldSplitMemoWord: boolean;
+  // 是否隐藏图片链接地址
+  shouldHideImageUrl: boolean;
+  // markdown 解析开关
+  shouldUseMarkdownParser: boolean;
+
+  // Editor setting
+  useTinyUndoHistoryCache: boolean;
+
+  // tiny undo actions cache
+  tinyUndoActionsCache: InputAction[];
+  // tiny undo index cache
+  tinyUndoIndexCache: number;
+}
+
+type StorageKey = keyof StorageData;
+
+/**
+ * storage helper
+ */
+export namespace storage {
+  export function get(keys: StorageKey[]): Partial<StorageData> {
+    const data: Partial<StorageData> = {};
+
+    for (const key of keys) {
+      try {
+        const stringifyValue = localStorage.getItem(key);
+        if (stringifyValue !== null) {
+          const val = JSON.parse(stringifyValue);
+          data[key] = val;
+        }
+      } catch (error: any) {
+        console.error("Get storage failed in ", key, error);
+      }
+    }
+
+    return data;
+  }
+
+  export function set(data: Partial<StorageData>) {
+    for (const key in data) {
+      try {
+        const stringifyValue = JSON.stringify(data[key as StorageKey]);
+        localStorage.setItem(key, stringifyValue);
+      } catch (error: any) {
+        console.error("Save storage failed in ", key, error);
+      }
+    }
+  }
+
+  export function remove(keys: StorageKey[]) {
+    for (const key of keys) {
+      try {
+        localStorage.removeItem(key);
+      } catch (error: any) {
+        console.error("Remove storage failed in ", key, error);
+      }
+    }
+  }
+
+  export function emitStorageChangedEvent() {
+    const iframeEl = document.createElement("iframe");
+    iframeEl.style.display = "none";
+    document.body.appendChild(iframeEl);
+
+    iframeEl.contentWindow?.localStorage.setItem("t", Date.now().toString());
+    iframeEl.remove();
+  }
+}

web/src/helpers/utils.ts

@@ -0,0 +1,219 @@
+namespace utils {
+  export function getNowTimeStamp(): number {
+    return Date.now();
+  }
+
+  export function getOSVersion(): "Windows" | "MacOS" | "Linux" | "Unknown" {
+    const appVersion = navigator.userAgent;
+    let detectedOS: "Windows" | "MacOS" | "Linux" | "Unknown" = "Unknown";
+
+    if (appVersion.indexOf("Win") != -1) {
+      detectedOS = "Windows";
+    } else if (appVersion.indexOf("Mac") != -1) {
+      detectedOS = "MacOS";
+    } else if (appVersion.indexOf("Linux") != -1) {
+      detectedOS = "Linux";
+    }
+
+    return detectedOS;
+  }
+
+  export function getTimeStampByDate(t: Date | number | string): number {
+    if (typeof t === "string") {
+      t = t.replaceAll("-", "/");
+    }
+    const d = new Date(t);
+
+    return d.getTime();
+  }
+
+  export function getDateStampByDate(t: Date | number | string): number {
+    const d = new Date(getTimeStampByDate(t));
+
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  }
+
+  export function getDateString(t: Date | number | string): string {
+    const d = new Date(getTimeStampByDate(t));
+
+    const year = d.getFullYear();
+    const month = d.getMonth() + 1;
+    const date = d.getDate();
+
+    return `${year}/${month}/${date}`;
+  }
+
+  export function getTimeString(t: Date | number | string): string {
+    const d = new Date(getTimeStampByDate(t));
+
+    const hours = d.getHours();
+    const mins = d.getMinutes();
+
+    const hoursStr = hours < 10 ? "0" + hours : hours;
+    const minsStr = mins < 10 ? "0" + mins : mins;
+
+    return `${hoursStr}:${minsStr}`;
+  }
+
+  // For example: 2021-4-8 17:52:17
+  export function getDateTimeString(t: Date | number | string): string {
+    const d = new Date(getTimeStampByDate(t));
+
+    const year = d.getFullYear();
+    const month = d.getMonth() + 1;
+    const date = d.getDate();
+    const hours = d.getHours();
+    const mins = d.getMinutes();
+    const secs = d.getSeconds();
+
+    const monthStr = month < 10 ? "0" + month : month;
+    const dateStr = date < 10 ? "0" + date : date;
+    const hoursStr = hours < 10 ? "0" + hours : hours;
+    const minsStr = mins < 10 ? "0" + mins : mins;
+    const secsStr = secs < 10 ? "0" + secs : secs;
+
+    return `${year}/${monthStr}/${dateStr} ${hoursStr}:${minsStr}:${secsStr}`;
+  }
+
+  export function dedupe<T>(data: T[]): T[] {
+    return Array.from(new Set(data));
+  }
+
+  export function dedupeObjectWithId<T extends { id: string }>(data: T[]): T[] {
+    const idSet = new Set<string>();
+    const result = [];
+
+    for (const d of data) {
+      if (!idSet.has(d.id)) {
+        idSet.add(d.id);
+        result.push(d);
+      }
+    }
+
+    return result;
+  }
+
+  export function debounce(fn: FunctionType, delay: number) {
+    let timer: number | null = null;
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = setTimeout(fn, delay);
+      } else {
+        timer = setTimeout(fn, delay);
+      }
+    };
+  }
+
+  export function throttle(fn: FunctionType, delay: number) {
+    let valid = true;
+
+    return () => {
+      if (!valid) {
+        return false;
+      }
+      valid = false;
+      setTimeout(() => {
+        fn();
+        valid = true;
+      }, delay);
+    };
+  }
+
+  export function transformObjectToParamsString(object: KVObject): string {
+    const params = [];
+    const keys = Object.keys(object).sort();
+
+    for (const key of keys) {
+      const val = object[key];
+      if (val) {
+        if (typeof val === "object") {
+          params.push(...transformObjectToParamsString(val).split("&"));
+        } else {
+          params.push(`${key}=${val}`);
+        }
+      }
+    }
+
+    return params.join("&");
+  }
+
+  export function transformParamsStringToObject(paramsString: string): KVObject {
+    const object: KVObject = {};
+    const params = paramsString.split("&");
+
+    for (const p of params) {
+      const [key, val] = p.split("=");
+      if (key && val) {
+        object[key] = val;
+      }
+    }
+
+    return object;
+  }
+
+  export function filterObjectNullKeys(object: KVObject): KVObject {
+    if (!object) {
+      return {};
+    }
+
+    const finalObject: KVObject = {};
+    const keys = Object.keys(object).sort();
+
+    for (const key of keys) {
+      const val = object[key];
+      if (typeof val === "object") {
+        const temp = filterObjectNullKeys(JSON.parse(JSON.stringify(val)));
+        if (temp && Object.keys(temp).length > 0) {
+          finalObject[key] = temp;
+        }
+      } else {
+        if (Boolean(val)) {
+          finalObject[key] = val;
+        }
+      }
+    }
+
+    return finalObject;
+  }
+
+  export async function copyTextToClipboard(text: string) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch (error: unknown) {
+        console.warn("Copy to clipboard failed.", error);
+      }
+    } else {
+      console.warn("Copy to clipboard failed, methods not supports.");
+    }
+  }
+
+  export function getImageSize(src: string): Promise<{ width: number; height: number }> {
+    return new Promise((resolve) => {
+      const imgEl = new Image();
+
+      imgEl.onload = () => {
+        const { width, height } = imgEl;
+
+        if (width > 0 && height > 0) {
+          resolve({ width, height });
+        } else {
+          resolve({ width: 0, height: 0 });
+        }
+      };
+
+      imgEl.onerror = () => {
+        resolve({ width: 0, height: 0 });
+      };
+
+      imgEl.className = "hidden";
+      imgEl.src = src;
+      document.body.appendChild(imgEl);
+      imgEl.remove();
+    });
+  }
+}
+
+export default utils;

web/src/helpers/validator.ts

@@ -0,0 +1,52 @@
+// 验证器
+// * 主要用于验证表单
+const chineseReg = /[\u3000\u3400-\u4DBF\u4E00-\u9FFF]/;
+
+export interface ValidatorConfig {
+  // 最小长度
+  minLength: number;
+  // 最大长度
+  maxLength: number;
+  // 无空格
+  noSpace: boolean;
+  // 无中文
+  noChinese: boolean;
+}
+
+export function validate(text: string, config: Partial<ValidatorConfig>): { result: boolean; reason?: string } {
+  if (config.minLength !== undefined) {
+    if (text.length < config.minLength) {
+      return {
+        result: false,
+        reason: "长度过短",
+      };
+    }
+  }
+
+  if (config.maxLength !== undefined) {
+    if (text.length > config.maxLength) {
+      return {
+        result: false,
+        reason: "长度超出",
+      };
+    }
+  }
+
+  if (config.noSpace && text.includes(" ")) {
+    return {
+      result: false,
+      reason: "不应含有空格",
+    };
+  }
+
+  if (config.noChinese && chineseReg.test(text)) {
+    return {
+      result: false,
+      reason: "不应含有中文字符",
+    };
+  }
+
+  return {
+    result: true,
+  };
+}

web/src/hooks/useDebounce.ts

@@ -0,0 +1,27 @@
+import { useCallback, useRef } from "react";
+
+/**
+ * useDebounce: useRef + useCallback
+ * @param func function
+ * @param delay delay duration
+ * @param deps depends
+ * @returns debounced function
+ */
+export default function useDebounce<T extends (...args: any[]) => any>(func: T, delay: number, deps: any[] = []): T {
+  const timer = useRef<number>();
+
+  const cancel = useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+  }, []);
+
+  const run = useCallback((...args) => {
+    cancel();
+    timer.current = window.setTimeout(() => {
+      func(...args);
+    }, delay);
+  }, deps);
+
+  return run as T;
+}

web/src/hooks/useLoading.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+function useLoading(initialState: boolean = true) {
+  const [state, setState] = useState({ isLoading: initialState, isFailed: false, isSucceed: false });
+
+  return {
+    ...state,
+    setLoading: () => {
+      setState({
+        ...state,
+        isLoading: true,
+        isFailed: false,
+        isSucceed: false,
+      });
+    },
+    setFinish: () => {
+      setState({
+        ...state,
+        isLoading: false,
+        isFailed: false,
+        isSucceed: true,
+      });
+    },
+    setError: () => {
+      setState({
+        ...state,
+        isLoading: false,
+        isFailed: true,
+        isSucceed: false,
+      });
+    },
+  };
+}
+
+export default useLoading;

web/src/hooks/useRefresh.ts

@@ -0,0 +1,15 @@
+import { useCallback, useState } from "react";
+
+function useRefresh() {
+  const [_, setBoolean] = useState<Boolean>(false);
+
+  const refresh = useCallback(() => {
+    setBoolean((ps) => {
+      return !ps;
+    });
+  }, []);
+
+  return refresh;
+}
+
+export default useRefresh;

web/src/hooks/useToggle.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from "react";
+
+// Parameter is the boolean, with default "false" value
+export default function useToggle(initialState = false): [boolean, (nextState?: boolean) => void] {
+  // Initialize the state
+  const [state, setState] = useState(initialState);
+
+  // Define and memorize toggler function in case we pass down the comopnent,
+  // This function change the boolean value to it's opposite value
+  const toggle = useCallback((nextState?: boolean) => {
+    if (nextState !== undefined) {
+      setState(nextState);
+    } else {
+      setState((state) => !state);
+    }
+  }, []);
+
+  return [state, toggle];
+}

web/src/labs/Provider.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { Store } from "./createStore";
+
+interface Props {
+  children: React.ReactElement;
+  store: Store<any, any>;
+  context: React.Context<any>;
+}
+
+/**
+ * Toy-Redux Provider
+ * Just for debug with the app store
+ */
+const Provider: React.FC<Props> = (props: Props) => {
+  const { children, store, context: Context } = props;
+  const [appState, setAppState] = useState(store.getState());
+
+  useEffect(() => {
+    const unsubscribe = store.subscribe((ns) => {
+      setAppState(ns);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return <Context.Provider value={appState}>{children}</Context.Provider>;
+};
+
+export default Provider;

web/src/labs/combineReducers.ts

@@ -0,0 +1,36 @@
+import { Action, Reducer, State } from "./createStore";
+
+interface ReducersMapObject<S extends State = any, A extends Action = any> {
+  [key: string]: Reducer<S, A>;
+}
+
+type StateFromReducersMapObject<M> = M extends ReducersMapObject
+  ? { [P in keyof M]: M[P] extends Reducer<infer S, any> ? S : never }
+  : never;
+
+function combineReducers<S extends State, A extends Action>(reducers: ReducersMapObject): Reducer<S, A> {
+  const reducerKeys = Object.keys(reducers);
+  const finalReducersObj: ReducersMapObject = {};
+
+  for (const key of reducerKeys) {
+    if (typeof reducers[key] === "function") {
+      finalReducersObj[key] = reducers[key];
+    }
+  }
+
+  return ((state: StateFromReducersMapObject<typeof reducers> = {}, action: A) => {
+    let hasChanged = false;
+    const nextState: StateFromReducersMapObject<typeof reducers> = {};
+
+    for (const key of reducerKeys) {
+      const prevStateForKey = state[key];
+      const nextStateForKey = finalReducersObj[key](prevStateForKey, action);
+      nextState[key] = nextStateForKey;
+      hasChanged = hasChanged || nextStateForKey !== prevStateForKey;
+    }
+
+    return hasChanged ? nextState : state;
+  }) as any as Reducer<S, A>;
+}
+
+export default combineReducers;

web/src/labs/createStore.ts

@@ -0,0 +1,63 @@
+export type State = Readonly<Object>;
+export type Action = {
+  type: string;
+  payload: any;
+};
+
+export type Reducer<S extends State, A extends Action> = (s: S, a: A) => S;
+type Listener<S extends State> = (ns: S, ps?: S) => void;
+type Unsubscribe = () => void;
+
+export interface Store<S extends State, A extends Action> {
+  dispatch: (a: A) => void;
+  getState: () => S;
+  subscribe: (listener: Listener<S>) => Unsubscribe;
+}
+
+/**
+ * 简单实现的 Redux
+ * @param preloadedState 初始 state
+ * @param reducer reducer pure function
+ * @returns store
+ */
+function createStore<S extends State, A extends Action>(preloadedState: S, reducer: Reducer<S, A>): Store<Readonly<S>, A> {
+  const listeners: Listener<S>[] = [];
+  let currentState = preloadedState;
+
+  const dispatch = (action: A) => {
+    const nextState = reducer(currentState, action);
+    const prevState = currentState;
+    currentState = nextState;
+
+    for (const cb of listeners) {
+      cb(currentState, prevState);
+    }
+  };
+
+  const subscribe = (listener: Listener<S>) => {
+    let isSubscribed = true;
+    listeners.push(listener);
+
+    return () => {
+      if (!isSubscribed) {
+        return;
+      }
+
+      const index = listeners.indexOf(listener);
+      listeners.splice(index, 1);
+      isSubscribed = false;
+    };
+  };
+
+  const getState = () => {
+    return currentState;
+  };
+
+  return {
+    dispatch,
+    getState,
+    subscribe,
+  };
+}
+
+export default createStore;

web/src/labs/html2image/convertResourceToDataURL.ts

@@ -0,0 +1,21 @@
+const cachedResource = new Map<string, string>();
+
+function convertResourceToDataURL(url: string, useCache = true): Promise<string> {
+  if (useCache && cachedResource.has(url)) {
+    return Promise.resolve(cachedResource.get(url) as string);
+  }
+
+  return new Promise(async (resolve) => {
+    const res = await fetch(url);
+    const blob = await res.blob();
+    var reader = new FileReader();
+    reader.onloadend = () => {
+      const base64Url = reader.result as string;
+      cachedResource.set(url, base64Url);
+      resolve(base64Url);
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+
+export default convertResourceToDataURL;

web/src/labs/html2image/getCloneStyledElement.ts

@@ -0,0 +1,37 @@
+import convertResourceToDataURL from "./convertResourceToDataURL";
+
+async function getCloneStyledElement(element: HTMLElement) {
+  const clonedElementContainer = document.createElement(element.tagName);
+  clonedElementContainer.innerHTML = element.innerHTML;
+
+  const applyStyles = async (sourceElement: HTMLElement, clonedElement: HTMLElement) => {
+    if (!sourceElement || !clonedElement) {
+      return;
+    }
+
+    const sourceStyles = window.getComputedStyle(sourceElement);
+
+    if (sourceElement.tagName === "IMG") {
+      try {
+        const url = await convertResourceToDataURL(sourceElement.getAttribute("src") ?? "");
+        (clonedElement as HTMLImageElement).src = url;
+      } catch (error) {
+        // do nth
+      }
+    }
+
+    for (const item of sourceStyles) {
+      clonedElement.style.setProperty(item, sourceStyles.getPropertyValue(item), sourceStyles.getPropertyPriority(item));
+    }
+
+    for (let i = 0; i < clonedElement.childElementCount; i++) {
+      await applyStyles(sourceElement.children[i] as HTMLElement, clonedElement.children[i] as HTMLElement);
+    }
+  };
+
+  await applyStyles(element, clonedElementContainer);
+
+  return clonedElementContainer;
+}
+
+export default getCloneStyledElement;

web/src/labs/html2image/index.ts

@@ -0,0 +1,142 @@
+/**
+ * HTML to Image
+ *
+ * References:
+ * 1. html-to-image: https://github.com/bubkoo/html-to-image
+ * 2. <foreignObject>: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
+ */
+import convertResourceToDataURL from "./convertResourceToDataURL";
+import getCloneStyledElement from "./getCloneStyledElement";
+
+type Options = Partial<{
+  backgroundColor: string;
+  pixelRatio: number;
+}>;
+
+function getElementSize(element: HTMLElement) {
+  const { width, height } = window.getComputedStyle(element);
+
+  return {
+    width: parseInt(width.replace("px", "")),
+    height: parseInt(height.replace("px", "")),
+  };
+}
+
+function convertSVGToDataURL(svg: SVGElement): string {
+  const xml = new XMLSerializer().serializeToString(svg);
+  const url = encodeURIComponent(xml);
+  return `data:image/svg+xml;charset=utf-8,${url}`;
+}
+
+function generateSVGElement(width: number, height: number, element: HTMLElement): SVGSVGElement {
+  const xmlns = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(xmlns, "svg");
+
+  svg.setAttribute("width", `${width}`);
+  svg.setAttribute("height", `${height}`);
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+
+  const foreignObject = document.createElementNS(xmlns, "foreignObject");
+
+  foreignObject.setAttribute("width", "100%");
+  foreignObject.setAttribute("height", "100%");
+  foreignObject.setAttribute("x", "0");
+  foreignObject.setAttribute("y", "0");
+  foreignObject.setAttribute("externalResourcesRequired", "true");
+
+  foreignObject.appendChild(element);
+  svg.appendChild(foreignObject);
+
+  return svg;
+}
+
+// TODO need rethink how to get the needed font-family
+async function getFontsStyleElement() {
+  const styleElement = document.createElement("style");
+
+  const fonts = [
+    {
+      name: "DINPro",
+      url: "/fonts/DINPro-Regular.otf",
+      weight: "normal",
+    },
+    {
+      name: "DINPro",
+      url: "/fonts/DINPro-Bold.otf",
+      weight: "bold",
+    },
+    {
+      name: "ubuntu-mono",
+      url: "/fonts/UbuntuMono.ttf",
+      weight: "normal",
+    },
+  ];
+
+  for (const f of fonts) {
+    const base64Url = await convertResourceToDataURL(f.url);
+    styleElement.innerHTML += `
+      @font-face {
+        font-family: "${f.name}";
+        src: url("${base64Url}");
+        font-weight: ${f.weight};
+      }`;
+  }
+
+  return styleElement;
+}
+
+export async function toSVG(element: HTMLElement, options?: Options) {
+  const { width, height } = getElementSize(element);
+
+  const clonedElement = await getCloneStyledElement(element);
+
+  if (options?.backgroundColor) {
+    clonedElement.style.backgroundColor = options.backgroundColor;
+  }
+
+  const svg = generateSVGElement(width, height, clonedElement);
+  svg.prepend(await getFontsStyleElement());
+
+  const url = convertSVGToDataURL(svg);
+
+  return url;
+}
+
+export async function toCanvas(element: HTMLElement, options?: Options): Promise<HTMLCanvasElement> {
+  const url = await toSVG(element, options);
+
+  const imageEl = new Image();
+  imageEl.src = url;
+
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d")!;
+  const ratio = options?.pixelRatio || 1;
+  const { width, height } = getElementSize(element);
+
+  canvas.width = width * ratio;
+  canvas.height = height * ratio;
+
+  canvas.style.width = `${width}`;
+  canvas.style.height = `${height}`;
+
+  if (options?.backgroundColor) {
+    context.fillStyle = options.backgroundColor;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  return new Promise((resolve) => {
+    imageEl.onload = () => {
+      context.drawImage(imageEl, 0, 0, canvas.width, canvas.height);
+
+      resolve(canvas);
+    };
+  });
+}
+
+async function toImage(element: HTMLElement, options?: Options) {
+  const canvas = await toCanvas(element, options);
+
+  return canvas.toDataURL();
+}
+
+export default toImage;

web/src/labs/useSelector.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+type State = Readonly<Object>;
+interface Action {
+  type: string;
+}
+type Listener<S extends State> = (ns: S, ps?: S) => void;
+
+interface Store<S extends State, A extends Action> {
+  dispatch: (a: A) => void;
+  getState: () => S;
+  subscribe: (listener: Listener<S>) => () => void;
+}
+
+export default function useSelector<S extends State, A extends Action>(store: Store<S, A>): S {
+  const [state, setState] = useState(store.getState());
+
+  useEffect(() => {
+    const unsubscribe = store.subscribe((ns) => {
+      setState(ns);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return state;
+}

web/src/less/about-site-dialog.less

@@ -0,0 +1,43 @@
+@import "./mixin.less";
+
+.about-site-dialog {
+  > .dialog-container {
+    width: 420px;
+
+    > .dialog-content-container {
+      line-height: 1.8;
+
+      > ul {
+        margin: 4px 0;
+        padding-left: 4px;
+        width: 100%;
+      }
+
+      > hr {
+        margin: 4px 0;
+        width: 100%;
+        height: 1px;
+        background-color: lightgray;
+        border: none;
+      }
+
+      .normal-text {
+        .flex(row, flex-start, center);
+        font-size: 13px;
+        color: gray;
+        white-space: pre-wrap;
+      }
+
+      .pre-text {
+        .mono-font-family();
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .dialog-wrapper.about-site-dialog {
+    padding: 24px 16px;
+    padding-top: 64px;
+  }
+}

web/src/less/app.less

@@ -0,0 +1,7 @@
+@import "./mixin.less";
+
+#root {
+  .flex(row, flex-start, flex-start);
+  width: 100%;
+  height: 100%;
+}

web/src/less/change-password-dialog.less

@@ -0,0 +1,104 @@
+@import "./mixin.less";
+
+.change-password-dialog,
+.bind-wxid-dialog {
+  > .dialog-container {
+    width: 300px;
+    border-radius: 8px;
+
+    > .dialog-content-container {
+      .flex(column, flex-start, flex-start);
+      width: 100%;
+
+      > .tip-text {
+        background-color: @bg-gray;
+        font-size: 12px;
+        padding: 8px;
+        border-radius: 8px;
+      }
+
+      > .form-label {
+        .flex(column, flex-start, flex-start);
+        position: relative;
+        width: 100%;
+        line-height: 1.6;
+
+        > .normal-text {
+          position: absolute;
+          left: 8px;
+          padding-left: 4px;
+          flex-shrink: 0;
+          font-size: 13px;
+          line-height: 38px;
+          color: gray;
+          transition: all 0.2s linear;
+          cursor: text;
+
+          &.not-null {
+            top: 2px;
+            left: 8px;
+            background-color: white;
+            font-size: 13px;
+            line-height: 18px;
+            padding: 0 4px;
+            border-radius: 12px;
+          }
+        }
+
+        &.input-form-label {
+          padding: 12px 0;
+          padding-bottom: 4px;
+
+          > input {
+            width: 100%;
+            padding: 6px 8px;
+            font-size: 13px;
+            line-height: 24px;
+            border-radius: 4px;
+            border: 1px solid lightgray;
+            background-color: transparent;
+          }
+        }
+      }
+
+      > .btns-container {
+        .flex(row, flex-end, center);
+        margin-top: 8px;
+        width: 100%;
+
+        > .btn {
+          font-size: 14px;
+          padding: 6px 12px;
+          border-radius: 4px;
+          margin-right: 8px;
+          background-color: lightgray;
+
+          &:hover {
+            opacity: 0.8;
+          }
+
+          &.cancel-btn {
+            background-color: unset;
+          }
+
+          &.confirm-btn {
+            background-color: @text-green;
+            color: white;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .dialog-wrapper.change-password-dialog,
+  .dialog-wrapper.bind-wxid-dialog {
+    padding: 24px 16px;
+    padding-top: 64px;
+
+    > .dialog-container {
+      width: 100%;
+    }
+  }
+}

web/src/less/common/date-picker.less

@@ -0,0 +1,81 @@
+@import "../mixin.less";
+
+.date-picker-wrapper {
+  .flex(column, flex-start, flex-start);
+  padding: 16px;
+
+  > .date-picker-header {
+    .flex(row, center, center);
+    width: 100%;
+
+    > .btn-text {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      cursor: pointer;
+      user-select: none;
+
+      > .icon-img {
+        width: 100%;
+        height: auto;
+      }
+
+      &:hover {
+        background-color: @bg-whitegray;
+      }
+    }
+
+    > .normal-text {
+      margin: 0 4px;
+      line-height: 24px;
+    }
+  }
+
+  > .date-picker-day-container {
+    .flex(row, flex-start, flex-start);
+    width: 280px;
+    flex-wrap: wrap;
+
+    > .date-picker-day-header {
+      .flex(row, space-around, center);
+      width: 100%;
+
+      > .day-item {
+        .flex(column, center, center);
+        width: 36px;
+        height: 36px;
+        user-select: none;
+        color: gray;
+        font-size: 13px;
+        margin: 2px 0;
+      }
+    }
+
+    > .day-item {
+      .flex(column, center, center);
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      font-size: 14px;
+      user-select: none;
+      cursor: pointer;
+      margin: 2px;
+
+      &:hover {
+        background-color: @bg-whitegray;
+      }
+
+      &.current {
+        background-color: @bg-light-blue;
+        font-size: 16px;
+        color: @text-blue;
+        font-weight: bold;
+      }
+
+      &.null {
+        background-color: unset;
+        cursor: unset;
+      }
+    }
+  }
+}

web/src/less/common/selector.less

@@ -0,0 +1,87 @@
+@import "../mixin.less";
+
+.selector-wrapper {
+  .flex(column, flex-start, flex-start);
+  position: relative;
+  height: 28px;
+
+  > .current-value-container {
+    .flex(row, space-between, center);
+    width: 100%;
+    height: 100%;
+    border: 1px solid @bg-gray;
+    border-radius: 4px;
+    padding: 0 8px;
+    padding-right: 4px;
+    background-color: white;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover,
+    &.active {
+      background-color: @bg-whitegray;
+    }
+
+    > .value-text {
+      margin-right: 0px;
+      font-size: 13px;
+      line-height: 32px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: calc(100% - 20px);
+    }
+
+    > .arrow-text {
+      .flex(row, center, center);
+      width: 16px;
+      flex-shrink: 0;
+
+      > .icon-img {
+        width: 16px;
+        height: auto;
+        opacity: 0.6;
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  > .items-wrapper {
+    .flex(column, flex-start, flex-start);
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: auto;
+    min-width: calc(100% + 16px);
+    max-height: 256px;
+    padding: 4px;
+    overflow: auto;
+    margin-top: 2px;
+    margin-left: -8px;
+    z-index: 1;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
+    .hide-scroll-bar();
+
+    > .item-container {
+      .flex(column, flex-start, flex-start);
+      width: 100%;
+      padding-left: 12px;
+      line-height: 30px;
+      white-space: nowrap;
+      font-size: 13px;
+      cursor: pointer;
+      border-radius: 4px;
+      user-select: none;
+
+      &:hover {
+        background-color: @bg-whitegray;
+      }
+
+      &.selected {
+        color: @text-green;
+      }
+    }
+  }
+}

web/src/less/create-query-dialog.less

@@ -0,0 +1,168 @@
+@import "./mixin.less";
+
+.create-query-dialog {
+  > .dialog-container {
+    width: 420px;
+
+    > .dialog-content-container {
+      .flex(column, flex-start, flex-start);
+
+      > .form-item-container {
+        .flex(row, flex-start, flex-start);
+        width: 100%;
+        margin-top: 8px;
+        padding: 4px 0;
+
+        > .normal-text {
+          display: block;
+          flex-shrink: 0;
+          width: 40px;
+          margin-right: 12px;
+          text-align: right;
+          color: gray;
+          font-size: 13px;
+          line-height: 32px;
+        }
+
+        > .title-input {
+          width: 100%;
+          padding: 0 8px;
+          font-size: 13px;
+          line-height: 32px;
+          border-radius: 4px;
+          border: 1px solid @bg-gray;
+          resize: none;
+        }
+
+        > .filters-wrapper {
+          width: calc(100% - 56px);
+          .flex(column, flex-start, flex-start);
+
+          > .create-filter-btn {
+            color: @text-green;
+            font-size: 13px;
+            line-height: 32px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+
+    > .dialog-footer-container {
+      .flex(row, space-between, center);
+      width: 100%;
+      margin-top: 0;
+
+      > .btns-container {
+        .flex(row, flex-start, center);
+
+        > .tip-text {
+          font-size: 13px;
+          color: gray;
+          margin-right: 8px;
+        }
+
+        > .btn {
+          padding: 6px 16px;
+          font-size: 13px;
+          border-radius: 4px;
+
+          &:hover {
+            opacity: 0.8;
+          }
+
+          &.disabled {
+            color: lightgray;
+            cursor: not-allowed;
+          }
+
+          &.save-btn {
+            background-color: @text-green;
+            color: white;
+
+            &.requesting {
+              cursor: wait;
+              opacity: 0.8;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.memo-filter-input-wrapper {
+  .flex(row, flex-start, center);
+  width: 100%;
+  margin-top: 8px;
+  flex-shrink: 0;
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+
+  > .selector-wrapper {
+    margin-right: 4px;
+    height: 34px;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    &.relation-selector {
+      width: 48px;
+      margin-left: -52px;
+    }
+
+    &.type-selector {
+      width: 62px;
+    }
+
+    &.operator-selector {
+      width: 62px;
+    }
+
+    &.value-selector {
+      flex-grow: 1;
+      max-width: calc(100% - 152px);
+    }
+  }
+
+  > input.value-inputer {
+    max-width: calc(100% - 152px);
+    height: 34px;
+    padding: 0 8px;
+    flex-shrink: 0;
+    flex-grow: 1;
+    margin-right: 4px;
+    border-radius: 4px;
+    border: 1px solid @bg-gray;
+    background-color: transparent;
+
+    &:hover {
+      background-color: @bg-whitegray;
+    }
+  }
+
+  > .remove-btn {
+    width: 16px;
+    height: auto;
+    cursor: pointer;
+    opacity: 0.8;
+
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .dialog-wrapper.create-query-dialog {
+    padding: 24px 16px;
+    padding-top: 64px;
+    justify-content: unset;
+    overflow-x: hidden;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}

web/src/less/daily-memo-diary-dialog.less

@@ -0,0 +1,164 @@
+@import "./mixin.less";
+
+.daily-memo-diary-dialog {
+  > .dialog-container {
+    width: 440px;
+    max-width: 100%;
+    padding: 0;
+
+    > .dialog-header-container {
+      .flex(column, center, center);
+      position: relative;
+      width: 100%;
+      padding: 24px;
+      margin-bottom: 0;
+      padding-bottom: 0;
+
+      > .header-wrapper {
+        .flex(row, space-between, center);
+        width: 100%;
+
+        > .btns-container {
+          .flex(row, flex-start, center);
+
+          > .btn-text {
+            width: 24px;
+            height: 24px;
+            margin-right: 8px;
+            border-radius: 4px;
+            cursor: pointer;
+            user-select: none;
+
+            &:last-child {
+              margin-right: 0;
+            }
+
+            > .icon-img {
+              width: 100%;
+              height: auto;
+            }
+
+            &:hover {
+              background-color: lightgray;
+            }
+
+            &.share-btn {
+              padding: 2px;
+            }
+          }
+        }
+      }
+    }
+
+    > .dialog-content-container {
+      .flex(column, flex-start, flex-start);
+      width: 440px;
+      max-width: 100%;
+      height: auto;
+      padding: 24px 24px;
+
+      > .date-card-container {
+        .flex(column, center, center);
+        margin: auto;
+        padding-bottom: 24px;
+        z-index: 1;
+        user-select: none;
+
+        > .year-text {
+          margin: auto;
+          font-weight: bold;
+          color: gray;
+          text-align: center;
+          line-height: 24px;
+          margin-bottom: 12px;
+        }
+
+        > .date-container {
+          .flex(column, center, center);
+          margin: auto;
+          width: 96px;
+          height: 96px;
+          border-radius: 32px;
+          box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
+          border: 1px solid rgb(0 0 0 / 10%);
+          text-align: center;
+          z-index: 1;
+
+          > .month-text,
+          > .day-text {
+            .flex(column, center, center);
+            width: 100%;
+            height: 24px;
+            font-size: 14px;
+          }
+
+          > .month-text {
+            background-color: @bg-blue;
+            color: white;
+            border-top-left-radius: 32px;
+            border-top-right-radius: 32px;
+          }
+
+          > .date-text {
+            .flex(column, center, center);
+            width: 100%;
+            padding-top: 4px;
+            height: 48px;
+            font-size: 44px;
+            font-weight: bold;
+          }
+
+          > .day-text {
+            font-size: 12px;
+          }
+        }
+      }
+
+      > .date-picker {
+        margin: 0 auto;
+        border: 1px solid lightgray;
+        border-radius: 8px;
+        margin-bottom: 24px;
+      }
+
+      > .tip-container {
+        margin: auto;
+        padding: 16px 0;
+
+        > .tip-text {
+          font-style: italic;
+        }
+      }
+
+      > .dailymemos-wrapper {
+        .flex(column, flex-start, flex-start);
+        margin-top: 8px;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .dialog-wrapper.daily-memo-diary-dialog {
+    padding: 0;
+    .hide-scroll-bar();
+
+    > .dialog-container {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding-bottom: 16px;
+
+      > .dialog-header-container {
+        padding-top: 32px;
+      }
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+}

web/src/less/daily-memo.less

@@ -0,0 +1,72 @@
+@import "./mixin.less";
+
+.daily-memo-wrapper {
+  .flex(row, flex-start, flex-start);
+  position: relative;
+  width: calc(100% - 24px);
+  margin-left: 24px;
+  padding: 0;
+  padding-bottom: 24px;
+  border: none;
+  border-left: 2px solid @bg-whitegray;
+
+  &:last-child {
+    border-left: none;
+    padding-bottom: 0;
+  }
+
+  > .time-wrapper {
+    .flex(column, center, center);
+    position: relative;
+    left: -24px;
+    margin-top: -2px;
+    flex-shrink: 0;
+    width: 48px;
+    height: 28px;
+    border-radius: 6px;
+    background-color: @bg-lightgray;
+    color: @text-gray;
+    border: 2px solid white;
+
+    > .normal-text {
+      margin: 0 auto;
+      font-size: 11px;
+      line-height: 24px;
+    }
+  }
+
+  > .memo-content-container {
+    .flex(column, flex-start, flex-start);
+    width: 100%;
+    margin-left: -12px;
+    padding: 0;
+    font-size: 16px;
+
+    > .memo-content-text {
+      .tag-span {
+        cursor: unset;
+
+        &:hover {
+          color: @text-blue;
+          background-color: @bg-light-blue;
+        }
+      }
+    }
+
+    > .images-container {
+      .flex(column, flex-start, flex-start);
+      width: 100%;
+
+      > img {
+        width: 100%;
+        height: auto;
+        border-radius: 4px;
+        margin-bottom: 8px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

web/src/less/dialog.less

@@ -0,0 +1,83 @@
+@import "./mixin.less";
+
+.dialog-wrapper {
+  .flex(column, flex-start, center);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  z-index: 100;
+  transition: all 0.2s ease;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding: 64px 0;
+  .hide-scroll-bar();
+
+  &.showup {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  &.showoff {
+    display: none;
+  }
+
+  > .dialog-container {
+    .flex(column, flex-start, flex-start);
+    background-color: white;
+    padding: 16px;
+    border-radius: 8px;
+
+    > .dialog-header-container {
+      .flex(row, space-between, center);
+      width: 100%;
+      margin-bottom: 16px;
+
+      > .title-text {
+        > .icon-text {
+          margin-right: 6px;
+          font-size: 16px;
+        }
+      }
+
+      .btn {
+        width: 24px;
+        height: 24px;
+        padding: 2px;
+        border-radius: 4px;
+
+        > .icon-img {
+          width: 20px;
+          height: 20px;
+        }
+
+        &:hover {
+          background-color: lightgray;
+        }
+      }
+    }
+
+    > .dialog-content-container {
+      .flex(column, flex-start, flex-start);
+      width: 100%;
+    }
+
+    > .dialog-footer-container {
+      .flex(row, flex-end, center);
+      width: 100%;
+      margin-top: 16px;
+    }
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .dialog-wrapper {
+    width: 100%;
+    padding: 0 16px;
+
+    > .dialog-container {
+      max-width: 100%;
+    }
+  }
+}

web/src/less/editor.less

@@ -0,0 +1,87 @@
+@import "./mixin.less";
+
+.common-editor-wrapper {
+  .flex(column, flex-start, flex-start);
+  position: relative;
+  width: 100%;
+  height: auto;
+  background-color: white;
+
+  > .common-editor-inputer {
+    display: inline-block;
+    width: 100%;
+    min-height: 24px;
+    max-height: 300px;
+    font-size: 15px;
+    line-height: 24px;
+    resize: none;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    background-color: transparent;
+    z-index: 1;
+    margin-bottom: 4px;
+    white-space: pre-wrap;
+    .hide-scroll-bar();
+
+    &::placeholder {
+      padding-left: 2px;
+    }
+
+    &:focus {
+      &::placeholder {
+        color: lightgray;
+      }
+    }
+  }
+
+  > .common-tools-wrapper {
+    .flex(row, space-between, center);
+    width: 100%;
+
+    > .common-tools-container {
+      .flex(row, flex-start, center);
+    }
+
+    > .btns-container {
+      .flex(row, flex-end, center);
+      flex-grow: 0;
+      flex-shrink: 0;
+
+      > .action-btn {
+        border: none;
+        user-select: none;
+        cursor: pointer;
+        padding: 6px 12px;
+        border-radius: 6px;
+        font-size: 13px;
+        line-height: 32px;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+
+      > .cancel-btn {
+        color: gray;
+        background-color: transparent;
+        margin-right: 8px;
+      }
+
+      > .confirm-btn {
+        cursor: pointer;
+        padding: 0 12px;
+        background-color: @text-green;
+        color: white;
+
+        &:disabled {
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
+
+        > .icon-text {
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+}

web/src/less/global.less

@@ -0,0 +1,113 @@
+@import "./mixin.less";
+
+// ⚠️ This font is only free for personal use but not for commercial.
+@font-face {
+  font-family: "DINPro";
+  src: url("/fonts/DINPro-Regular.otf");
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "DINPro";
+  src: url("/fonts/DINPro-Bold.otf");
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: "ubuntu-mono";
+  src: url("/fonts/UbuntuMono.ttf");
+  font-style: normal;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  color: @text-black;
+  -webkit-tap-highlight-color: transparent;
+  font-family: "DINPro", ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
+    "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+body,
+html {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-size: 15px;
+}
+
+code {
+  .mono-font-family();
+  background-color: pink;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+pre {
+  .mono-font-family();
+
+  * {
+    .mono-font-family();
+  }
+}
+
+label,
+input,
+button,
+textarea,
+img {
+  background-color: transparent;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  border: none;
+  outline: none;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  box-shadow: 0 0 0 30px white inset !important;
+}
+
+li {
+  list-style-type: none;
+
+  &::before {
+    content: "•";
+    font-weight: bold;
+    margin-right: 4px;
+  }
+}
+
+a {
+  cursor: pointer;
+  color: @text-blue;
+  text-underline-offset: 2px;
+
+  &:hover {
+    background-color: @bg-gray;
+  }
+}
+
+.btn {
+  border: unset;
+  background-color: unset;
+  text-align: unset;
+  font-size: unset;
+  user-select: none;
+  cursor: pointer;
+  text-align: center;
+}
+
+.hidden {
+  display: none !important;
+}
+
+@media only screen and (max-width: 875px) {
+  body,
+  html {
+    -webkit-overflow-scrolling: touch;
+  }
+}

web/src/less/home.less

@@ -0,0 +1,48 @@
+@import "./mixin.less";
+
+#root {
+  background-color: #f6f5f4;
+}
+
+#page-wrapper {
+  .flex(row, flex-start, flex-start);
+  width: 848px;
+  max-width: 100%;
+  height: 100%;
+  margin: auto;
+  transform: translateX(-16px);
+
+  > .content-wrapper {
+    .flex(column, flex-start, flex-start);
+    position: relative;
+    width: 600px;
+    height: 100%;
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  body.mobile-show-sidebar {
+    #page-wrapper {
+      > .content-wrapper {
+        transform: translateX(320px);
+      }
+    }
+  }
+
+  #page-wrapper {
+    .flex(column, flex-start, flex-start);
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    transform: translateX(0);
+
+    > .content-wrapper {
+      width: 100%;
+      height: 100%;
+      margin-left: 0;
+      padding-top: 0;
+      transition: all 0.4s ease;
+      transform: translateX(0);
+    }
+  }
+}

web/src/less/image.less

@@ -0,0 +1,16 @@
+@import "./mixin.less";
+
+.image-container {
+  width: 200px;
+  height: auto;
+  overflow-y: scroll;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  .pretty-scroll-bar(2px, 0);
+
+  > img {
+    margin: auto;
+    width: 100%;
+    height: auto;
+  }
+}

web/src/less/memo-card-dialog.less

@@ -0,0 +1,196 @@
+@import "./mixin.less";
+
+.dialog-wrapper.memo-card-dialog {
+  > .dialog-container {
+    padding: 0;
+    background-color: transparent;
+
+    > * {
+      flex-shrink: 0;
+    }
+
+    > .memo-card-container {
+      position: relative;
+      .flex(column, flex-start, flex-start);
+      width: 512px;
+      min-height: 64px;
+      max-width: 100%;
+      padding: 12px 24px;
+      margin-bottom: 12px;
+      border-radius: 8px;
+      background-color: @bg-paper-yellow;
+
+      > * {
+        z-index: 1;
+      }
+
+      > .header-container {
+        .flex(row, space-between, center);
+        width: 100%;
+        height: auto;
+        padding-bottom: 0;
+        margin-bottom: 0;
+        margin-top: 0;
+
+        > .time-text {
+          font-size: 14px;
+          color: gray;
+          .mono-font-family();
+        }
+
+        > .btns-container {
+          .flex(row, flex-end, center);
+
+          > .btn {
+            .flex(row, center, center);
+            width: 24px;
+            height: 24px;
+            margin-left: 4px;
+            border-radius: 4px;
+
+            &:hover {
+              background-color: white;
+            }
+
+            > .icon-img {
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+      }
+
+      > .memo-container {
+        .flex(column, flex-start, flex-start);
+        width: 100%;
+        padding-top: 8px;
+
+        > .memo-content-text {
+          width: 100%;
+          font-size: 16px;
+          line-height: 1.6;
+          word-wrap: break-word;
+          word-break: break-all;
+
+          .tag-span {
+            margin: 0;
+            padding: 0;
+            font-size: 14px;
+            color: @text-blue;
+            background-color: unset;
+            cursor: unset;
+          }
+        }
+
+        > .images-wrapper {
+          .flex(row, flex-start, flex-start);
+          margin-top: 8px;
+          width: 100%;
+          overflow-x: auto;
+          overflow-y: hidden;
+          padding-bottom: 2px;
+          .pretty-scroll-bar(0, 2px);
+
+          > .memo-img {
+            margin-right: 8px;
+            width: auto;
+            height: 128px;
+            flex-shrink: 0;
+            flex-grow: 0;
+            overflow-y: hidden;
+            .hide-scroll-bar();
+
+            &:hover {
+              border-color: lightgray;
+            }
+
+            &:last-child {
+              margin-right: 0;
+            }
+
+            > img {
+              width: auto;
+              max-height: 128px;
+              border-radius: 8px;
+            }
+          }
+        }
+      }
+
+      > .normal-text {
+        margin-top: 8px;
+        font-size: 13px;
+        color: gray;
+      }
+
+      > .layer-container,
+      > .background-layer-container {
+        position: absolute;
+        bottom: -3px;
+        left: 3px;
+        width: calc(100% - 6px);
+        height: 100%;
+        border-radius: 8px;
+        z-index: -1;
+        background-color: @bg-paper-yellow;
+        border-bottom: 1px solid lightgray;
+      }
+
+      > .layer-container {
+        z-index: 0;
+        background-color: @bg-paper-yellow;
+        border: 1px solid lightgray;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+
+    > .linked-memos-wrapper {
+      .flex(column, flex-start, flex-start);
+      width: 512px;
+      max-width: 100%;
+      margin-top: 8px;
+      padding: 12px 24px;
+      border-radius: 8px;
+      background-color: white;
+
+      &:last-child {
+        margin-bottom: 36px;
+      }
+
+      > .normal-text {
+        font-size: 13px;
+      }
+
+      > .linked-memo-container {
+        font-size: 13px;
+        line-height: 24px;
+        margin-top: 8px;
+        cursor: pointer;
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+          opacity: 0.8;
+        }
+
+        > .time-text {
+          color: gray;
+          .mono-font-family();
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .dialog-wrapper.memo-card-dialog {
+    padding: 24px 16px;
+    padding-top: 64px;
+  }
+}

web/src/less/memo-content.less

@@ -0,0 +1,87 @@
+@import "./mixin.less";
+
+.memo-content-text {
+  .flex(column, flex-start, flex-start);
+  width: 100%;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  > p {
+    display: inline-block;
+    width: 100%;
+    height: auto;
+    margin-bottom: 4px;
+    font-size: 15px;
+    line-height: 24px;
+    min-height: 24px;
+    white-space: pre-wrap;
+  }
+
+  .tag-span {
+    display: inline-block;
+    width: auto;
+    padding: 0 6px;
+    line-height: 24px;
+    font-size: 13px;
+    border: none;
+    border-radius: 4px;
+    color: @text-blue;
+    background-color: @bg-light-blue;
+    cursor: pointer;
+    vertical-align: bottom;
+
+    &:hover {
+      background-color: @text-blue;
+      color: white;
+    }
+  }
+
+  .memo-link-text {
+    display: inline-block;
+    color: @text-blue;
+    font-weight: bold;
+    border-bottom: none;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .counter-block,
+  .todo-block {
+    display: inline-block;
+    text-align: center;
+    width: 2rem;
+    .mono-font-family();
+  }
+
+  pre {
+    width: 100%;
+    margin: 4px 0;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 15px;
+    line-height: 1.5;
+    background-color: #f6f5f4;
+    white-space: pre-wrap;
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .memo-content-text {
+    > p {
+      font-size: 15px;
+      line-height: 26px;
+      min-height: 26px;
+      white-space: pre-wrap;
+    }
+
+    .tag-span {
+      line-height: 26px;
+      font-size: 14px;
+    }
+  }
+}

web/src/less/memo-editor.less

@@ -0,0 +1,37 @@
+@import "./mixin.less";
+
+.memo-editor-wrapper {
+  .flex(column, flex-start, flex-start);
+  position: relative;
+  width: 100%;
+  height: auto;
+  background-color: white;
+  padding: 16px;
+  border-radius: 8px;
+  border: 2px solid @bg-gray;
+
+  &.edit-ing {
+    border-color: @text-blue;
+  }
+
+  > .tip-text {
+    font-size: 12px;
+    line-height: 20px;
+    color: @text-lightgray;
+  }
+
+  > .memo-editor {
+    .flex(column, flex-start, flex-start);
+    position: relative;
+    width: 100%;
+    height: auto;
+    background-color: white;
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .memo-editor-wrapper {
+    width: calc(100% - 24px);
+    margin: auto;
+  }
+}

web/src/less/memo-filter.less

@@ -0,0 +1,41 @@
+@import "./mixin.less";
+
+.filter-query-container {
+  .flex(row, flex-start, flex-start);
+  width: 100%;
+  flex-wrap: wrap;
+  padding: 12px 12px;
+  padding-bottom: 4px;
+  font-size: 13px;
+  line-height: 1.8;
+
+  > .tip-text {
+    padding: 2px 0;
+  }
+
+  > .filter-item-container {
+    padding: 2px 8px;
+    margin-right: 6px;
+    cursor: pointer;
+    background-color: @bg-gray;
+    border-radius: 4px;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    > .icon-text {
+      letter-spacing: 2px;
+    }
+
+    &:hover {
+      text-decoration: line-through;
+    }
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .filter-query-container {
+    padding-left: 20px;
+  }
+}

web/src/less/memo-trash.less

@@ -0,0 +1,44 @@
+@import "./mixin.less";
+@import "./memos-header.less";
+
+.memo-trash-wrapper {
+  .flex(column, flex-start, flex-start);
+  width: 100%;
+  height: 100%;
+  flex-grow: 1;
+  overflow-y: scroll;
+  .hide-scroll-bar();
+
+  > .section-header-container {
+    width: 100%;
+    height: 40px;
+    margin-bottom: 0;
+
+    > .title-text {
+      font-weight: bold;
+      font-size: 18px;
+      color: @text-black;
+    }
+  }
+
+  > .tip-text-container {
+    width: 100%;
+    height: 128px;
+    .flex(column, center, center);
+  }
+
+  > .deleted-memos-container {
+    .flex(column, flex-start, flex-start);
+    flex-grow: 1;
+    width: 100%;
+    overflow-y: scroll;
+    padding-bottom: 64px;
+    .hide-scroll-bar();
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .deleted-memos-container {
+    padding: 0 12px;
+  }
+}

web/src/less/memo.less

@@ -0,0 +1,153 @@
+@import "./mixin.less";
+@import "./memo-content.less";
+
+.memo-wrapper {
+  .flex(column, flex-start, flex-start);
+  width: 100%;
+  padding: 12px 18px;
+  background-color: white;
+  margin-top: 8px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: @bg-gray;
+  }
+
+  > .memo-top-wrapper {
+    .flex(row, space-between, center);
+    width: 100%;
+    height: 24px;
+    margin-bottom: 4px;
+
+    > .time-text {
+      font-size: 12px;
+      line-height: 24px;
+      color: gray;
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+
+    > .btns-container {
+      .flex(row, flex-end, center);
+      position: relative;
+      flex-shrink: 0;
+
+      > .more-action-btns-wrapper {
+        .flex(column, flex-start, center);
+        position: absolute;
+        flex-wrap: nowrap;
+        top: calc(100% - 8px);
+        right: -16px;
+        width: auto;
+        height: auto;
+        padding: 12px;
+        z-index: 1;
+        display: none;
+
+        &:hover {
+          display: flex;
+        }
+
+        > .more-action-btns-container {
+          width: 112px;
+          height: auto;
+          padding: 4px;
+          white-space: nowrap;
+          border-radius: 8px;
+          background-color: white;
+          box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
+          z-index: 1;
+
+          > .btn {
+            width: 100%;
+            padding: 8px 0;
+            padding-left: 24px;
+            border-radius: 4px;
+            height: unset;
+            line-height: unset;
+            justify-content: flex-start;
+
+            &.delete-btn {
+              color: @text-red;
+
+              &.final-confirm {
+                font-weight: bold;
+              }
+            }
+          }
+        }
+      }
+
+      .btn {
+        .flex(row, center, center);
+        width: 100%;
+        height: 28px;
+        font-size: 13px;
+        border-radius: 4px;
+
+        &:hover {
+          background-color: @bg-whitegray;
+        }
+
+        &.more-action-btn {
+          width: 28px;
+          cursor: unset;
+          margin-right: -6px;
+          opacity: 0.8;
+
+          > .icon-img {
+            width: 16px;
+            height: 16px;
+          }
+
+          &:hover {
+            background-color: unset;
+
+            & + .more-action-btns-wrapper {
+              display: flex;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  > .memo-content-text {
+    width: 100%;
+  }
+
+  > .images-wrapper {
+    .flex(row, flex-start, flex-start);
+    margin-top: 8px;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 4px;
+    .pretty-scroll-bar(0, 2px);
+
+    > .memo-img {
+      margin-right: 8px;
+      width: auto;
+      height: 128px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      overflow-y: hidden;
+      .hide-scroll-bar();
+
+      &:hover {
+        border-color: lightgray;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      > img {
+        width: auto;
+        max-height: 128px;
+        border-radius: 8px;
+      }
+    }
+  }
+}

web/src/less/memolist.less

@@ -0,0 +1,43 @@
+@import "./mixin.less";
+
+.memolist-wrapper {
+  .flex(column, flex-start, flex-start);
+  flex-grow: 1;
+  width: 100%;
+  overflow-y: scroll;
+  .hide-scroll-bar();
+
+  > .memo-edit {
+    margin-top: 8px;
+  }
+
+  > .status-text-container {
+    .flex(column, flex-start, center);
+    width: 100%;
+    margin-top: 16px;
+    margin-bottom: 16px;
+
+    &.completed {
+      margin-bottom: 64px;
+    }
+
+    &.invisible {
+      visibility: hidden;
+    }
+
+    > .status-text {
+      font-size: 13px;
+      color: gray;
+    }
+  }
+
+  &.completed {
+    padding-bottom: 80px;
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .memolist-wrapper {
+    padding: 0 12px;
+  }
+}

web/src/less/memos-header.less

@@ -0,0 +1,54 @@
+@import "./mixin.less";
+
+.section-header-container,
+.memos-header-container {
+  .flex(row, space-between, center);
+  width: 100%;
+  height: 40px;
+  flex-wrap: nowrap;
+  margin-top: 16px;
+  margin-bottom: 8px;
+  flex-shrink: 0;
+
+  > .title-text {
+    .flex(row, flex-start, center);
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 40px;
+    color: @text-black;
+    margin-right: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 0;
+    cursor: pointer;
+
+    > .action-btn {
+      .flex(row, center, center);
+      width: 24px;
+      height: 24px;
+      margin-right: 4px;
+      flex-shrink: 0;
+      background-color: unset;
+
+      > .icon-img {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+
+  > .btns-container {
+    .flex(row, flex-end, center);
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .section-header-container,
+  .memos-header-container {
+    height: auto;
+    margin-top: 16px;
+    margin-bottom: 0;
+    padding: 0 12px;
+    padding-bottom: 8px;
+  }
+}

web/src/less/menu-btns-popup.less

@@ -0,0 +1,46 @@
+@import "./mixin.less";
+
+.menu-btns-popup {
+  .flex(column, flex-start, flex-start);
+  position: absolute;
+  margin-top: 4px;
+  margin-left: 90px;
+  padding: 4px;
+  width: 180px;
+  border-radius: 8px;
+  z-index: 2;
+  box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
+  background-color: white;
+
+  &:hover {
+    display: flex;
+  }
+
+  > .btn {
+    .flex(row, flex-start, center);
+    width: 100%;
+    padding: 8px 16px;
+    font-size: 14px;
+    line-height: 1.6;
+    border-radius: 4px;
+    text-align: left;
+
+    > .icon {
+      display: block;
+      width: 28px;
+      text-align: center;
+      margin-right: 4px;
+      font-size: 14px;
+    }
+
+    &:hover {
+      background-color: @bg-whitegray;
+    }
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .menu-btns-popup {
+    margin-left: 64px;
+  }
+}

web/src/less/mixin.less

@@ -0,0 +1,55 @@
+@text-black: #37352f;
+@text-gray: #52504b;
+@text-lightgray: #cac8c4;
+@text-blue: #5783f7;
+@text-green: #55bb8e;
+@text-red: #d28653;
+
+@bg-black: #2f3437;
+@bg-gray: #e4e4e4;
+@bg-whitegray: #f8f8f8;
+@bg-lightgray: #eaeaea;
+@bg-blue: #1337a3;
+@bg-yellow: yellow;
+@bg-light-blue: #eef3fe;
+@bg-paper-yellow: #fbf4de;
+
+.mono-font-family {
+  font-family: "ubuntu-mono", SFMono-Regular, Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace;
+}
+
+.hide-scroll-bar {
+  .pretty-scroll-bar(0, 0);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.pretty-scroll-bar(@width: 0px, @height: 0px) {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: @width;
+    height: @height;
+    cursor: pointer;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    width: @width;
+    height: @height;
+    border-radius: 8px;
+    background-color: #d5d5d5;
+
+    &:hover {
+      background-color: #ccc;
+    }
+  }
+}
+
+.flex(@direction, @justify, @align) {
+  display: flex;
+  flex-direction: @direction;
+  justify-content: @justify;
+  align-items: @align;
+}

web/src/less/my-account-section.less

@@ -0,0 +1,107 @@
+@import "./mixin.less";
+
+.account-section-container {
+  > .form-label {
+    height: 28px;
+
+    &.username-label {
+      > input {
+        flex-grow: 0 !important;
+        width: 128px;
+        padding: 0 8px;
+        margin-right: 4px;
+        font-size: 14px;
+        border: 1px solid lightgray;
+        border-radius: 0;
+        border-radius: 4px;
+        line-height: 26px;
+        background-color: transparent;
+
+        &:focus {
+          border-color: black;
+        }
+      }
+
+      > .btns-container {
+        .flex(row, flex-start, center);
+        margin-left: 4px;
+        flex-shrink: 0;
+
+        > .btn {
+          font-size: 12px;
+          padding: 0 16px;
+          border-radius: 4px;
+          line-height: 28px;
+          margin-right: 8px;
+          background-color: lightgray;
+
+          &:hover {
+            opacity: 0.8;
+          }
+
+          &.cancel-btn {
+            background-color: unset;
+          }
+
+          &.confirm-btn {
+            background-color: @text-green;
+            color: white;
+          }
+        }
+      }
+    }
+
+    &.password-label {
+      > .btn {
+        color: @text-blue;
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+}
+
+.connect-section-container {
+  > .form-label {
+    height: 28px;
+
+    > .value-text {
+      max-width: 128px;
+      min-height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    > .btn-text {
+      padding: 0 8px;
+      margin-left: 12px;
+      border-radius: 4px;
+      font-size: 12px;
+      cursor: pointer;
+      line-height: 28px;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      &.bind-btn,
+      &.link-btn {
+        color: white;
+        background-color: @text-green;
+        text-decoration: none;
+      }
+
+      &.unbind-btn {
+        color: #d28653;
+        background-color: @bg-lightgray;
+
+        &.final-confirm {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}