mirror of
https://github.com/Mujinniao/Anonima.git
synced 2025-12-19 00:14:40 +08:00
Delete picx directory
This commit is contained in:
Mujinniao
674
picx/LICENSE
674
picx/LICENSE
@@ -1,674 +0,0 @@
|
|||||||
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>.
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
<a href="https://picx.xpoet.cn" >
|
|
||||||
<img width="100" align="right" alt="PicX" src="https://cdn.staticaly.com/gh/XPoet/image-hosting@master/PicX/picx-logo.png">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
# PicX 图床
|
|
||||||
|
|
||||||
[](https://github.com/XPoet)
|
|
||||||
[](https://github.com/XPoet/picx/releases)
|
|
||||||
[](https://github.com/XPoet/picx/blob/master/LICENSE)
|
|
||||||
[](https://github.com/XPoet/picx)
|
|
||||||
[](https://github.com/XPoet/picx/issues)
|
|
||||||
[](https://github.com/XPoet/picx/actions/workflows/deploy.yml)
|
|
||||||
[](https://github.com/lin-123/javascript)
|
|
||||||
|
|
||||||
**[PicX](https://picx.xpoet.cn)** 是一款基于 GitHub API 开发的具有 CDN 加速功能的图床管理工具
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
> 在线使用入口 **https://picx.xpoet.cn**
|
|
||||||
|
|
||||||
**灵魂拷问，你为图床问题烦恼过吗?**
|
|
||||||
|
|
||||||
- 用 Hexo、VuePress、Hugo 等静态博客写文章，不知图片保存到哪里去...
|
|
||||||
- 特意花钱租云服务器托管图片，太贵划不来，而且上传配置好繁琐...
|
|
||||||
- 网上复制的心仪图片的链接，用着用着某一天就失效了...
|
|
||||||
- 使用其他的付费图床，速度慢，容量小，还限时、限流量...
|
|
||||||
- 想找一款真正免费、稳定、不限容量、访问速度还很快的图床...
|
|
||||||
- ......
|
|
||||||
|
|
||||||
那么，快来试试 **[PicX 图床](https://picx.xpoet.cn)** 吧，专为技术博主打造，谁用谁知道~
|
|
||||||
|
|
||||||
只需选择一个 GitHub 仓库作为图床，然后在 **[PicX 官网](https://picx.xpoet.cn/)** 完成 Token 绑定和相应配置就能使用了。
|
|
||||||
|
|
||||||
**[PicX 图床](https://picx.xpoet.cn)** 浏览器在线使用，免下载&安装，如此简单。
|
|
||||||
|
|
||||||
🆓 免费 🆓 🏆 稳定 🏆 🚀 极速 🚀 🔒 安全 🔒
|
|
||||||
|
|
||||||
## 功能特性 | Features
|
|
||||||
|
|
||||||
- [x] 支持 **拖拽**、**复制粘贴**、**选择文件** 等方式进行选择图片
|
|
||||||
- [x] 支持图片 **重命名**、**哈希化**（确保图片名唯一）和 **设置命名前缀**
|
|
||||||
- [x] 支持 **批量上传图片**、**批量删除图片** 和 **批量复制图片外链**
|
|
||||||
- [x] 支持 **多级目录** 管理 （创建多级目录 / 查看多级目录图片）
|
|
||||||
- [x] 支持 **一键复制** 图片外链和 **一键转换 Markdown 格式**
|
|
||||||
- [x] 支持 **图床管理**（对仓库图片的 **增删改查**）
|
|
||||||
- [x] 支持 **图片压缩** (内置三款压缩算法，可在上传前自动压缩，效果极佳)
|
|
||||||
- [x] 支持 **暗夜模式** (自由切换 / 自动切换)
|
|
||||||
- [x] 支持 **PWA**
|
|
||||||
- [ ] i18n
|
|
||||||
- [ ] 设置图片水印
|
|
||||||
- [ ] 支持其他 Git 厂商 （例如：Gitee / Coding）
|
|
||||||
|
|
||||||
## 使用教程 | Using the tutorial
|
|
||||||
|
|
||||||
官方文档 >> https://picx-docs.xpoet.cn
|
|
||||||
|
|
||||||
## 快速开始 | Get start
|
|
||||||
|
|
||||||
通过阅读官方文档的快速开始教程，可帮助你迅速上手 PicX 图床
|
|
||||||
|
|
||||||
https://picx-docs.xpoet.cn/tutorial/get-start.html
|
|
||||||
|
|
||||||
## 贡献 | Contribution
|
|
||||||
|
|
||||||
欢迎各种形式的贡献，包括但不限于：美化界面、增加功能、改进代码、 修复 Bug 等
|
|
||||||
|
|
||||||
## 反馈 | Feedback
|
|
||||||
|
|
||||||
在使用过程中，如遇问题，请仔细阅读 **[官方文档](https://picx-docs.xpoet.cn)** ，或给作者提 **[Issue](https://github.com/XPoet/picx/issues)**
|
|
||||||
|
|
||||||
## 许可 | License
|
|
||||||
|
|
||||||
**[GPL-3.0](https://github.com/XPoet/picx/blob/master/LICENSE)**
|
|
||||||
|
|
||||||
Copyright © 2020-Present PicX Dev Team
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
module.exports = { extends: ['@commitlint/config-conventional'] }
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" href="./logo.png" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" rel="stylesheet">
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
|
|
||||||
<title>PicX 图床神器</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "picx",
|
|
||||||
"version": "2.1.0",
|
|
||||||
"private": false,
|
|
||||||
"author": "XPoet",
|
|
||||||
"license": "GPL-3.0",
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/XPoet/picx/issues"
|
|
||||||
},
|
|
||||||
"homepage": "https://github.com/XPoet/picx#readme",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vite build",
|
|
||||||
"serve": "vite preview",
|
|
||||||
"release": "git push --tag && git push -u",
|
|
||||||
"format": "prettier --write",
|
|
||||||
"prepare": "husky install"
|
|
||||||
},
|
|
||||||
"lint-staged": {
|
|
||||||
"*.{vue,js,ts}": "eslint --fix"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@element-plus/icons-vue": "^2.0.4",
|
|
||||||
"@yireen/squoosh-browser": "^1.0.7",
|
|
||||||
"axios": "^0.21.4",
|
|
||||||
"element-plus": "^2.2.5",
|
|
||||||
"vue": "^3.2.18",
|
|
||||||
"vue-router": "^4.0.11",
|
|
||||||
"vuex": "^4.0.2"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@commitlint/cli": "^12.1.1",
|
|
||||||
"@commitlint/config-conventional": "^12.1.1",
|
|
||||||
"@types/node": "^15.0.1",
|
|
||||||
"@typescript-eslint/eslint-plugin": "^4.22.0",
|
|
||||||
"@typescript-eslint/parser": "^4.22.0",
|
|
||||||
"@vitejs/plugin-vue": "^1.1.5",
|
|
||||||
"@vue/compiler-sfc": "^3.2.18",
|
|
||||||
"commitizen": "^4.2.3",
|
|
||||||
"cz-conventional-changelog": "^3.3.0",
|
|
||||||
"cz-customizable": "^6.3.0",
|
|
||||||
"eslint": "^7.32.0",
|
|
||||||
"eslint-config-airbnb-base": "^14.2.1",
|
|
||||||
"eslint-config-prettier": "^8.3.0",
|
|
||||||
"eslint-plugin-import": "^2.22.1",
|
|
||||||
"eslint-plugin-prettier": "^3.4.0",
|
|
||||||
"eslint-plugin-vue": "^9.1.1",
|
|
||||||
"husky": "^6.0.0",
|
|
||||||
"lint-staged": "^10.5.4",
|
|
||||||
"prettier": "^2.2.1",
|
|
||||||
"stylus": "^0.54.8",
|
|
||||||
"typescript": "^4.1.5",
|
|
||||||
"unplugin-auto-import": "^0.8.7",
|
|
||||||
"unplugin-vue-components": "^0.19.6",
|
|
||||||
"vite": "~2.7.13",
|
|
||||||
"vite-plugin-pwa": "^0.11.2"
|
|
||||||
},
|
|
||||||
"config": {
|
|
||||||
"commitizen": {
|
|
||||||
"path": "./node_modules/cz-conventional-changelog"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
picx.xpoet.cn
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
@@ -1,74 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-config-provider :size="size" :z-index="zIndex" :locale="locale">
|
|
||||||
<main-container />
|
|
||||||
</el-config-provider>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
|
|
||||||
import { ElConfigProvider } from 'element-plus'
|
|
||||||
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
|
|
||||||
import mainContainer from '@/components/main-container/main-container.vue'
|
|
||||||
import setTheme from '@/utils/set-theme-mode'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'App',
|
|
||||||
components: {
|
|
||||||
ElConfigProvider,
|
|
||||||
mainContainer
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const store = useStore()
|
|
||||||
|
|
||||||
const data = reactive({
|
|
||||||
zIndex: 3000,
|
|
||||||
size: 'small', // large | default | small
|
|
||||||
locale: zhCn
|
|
||||||
})
|
|
||||||
|
|
||||||
const elementPlusSizeHandle = (width: number) => {
|
|
||||||
if (width <= 600) {
|
|
||||||
store.dispatch('SET_USER_SETTINGS', {
|
|
||||||
elementPlusSize: 'small'
|
|
||||||
})
|
|
||||||
data.size = 'small'
|
|
||||||
} else if (width <= 800) {
|
|
||||||
store.dispatch('SET_USER_SETTINGS', {
|
|
||||||
elementPlusSize: 'default'
|
|
||||||
})
|
|
||||||
data.size = 'default'
|
|
||||||
} else {
|
|
||||||
store.dispatch('SET_USER_SETTINGS', {
|
|
||||||
elementPlusSize: 'large'
|
|
||||||
})
|
|
||||||
data.size = 'large'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
setTheme()
|
|
||||||
elementPlusSizeHandle(window.innerWidth)
|
|
||||||
window.addEventListener('resize', (e: any) => {
|
|
||||||
elementPlusSizeHandle(e.target.innerWidth)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
...toRefs(data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus">
|
|
||||||
#app {
|
|
||||||
font-family Avenir, Helvetica, Arial, sans-serif
|
|
||||||
-webkit-font-smoothing antialiased
|
|
||||||
-moz-osx-font-smoothing grayscale
|
|
||||||
box-sizing border-box
|
|
||||||
position relative
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
@@ -1,82 +0,0 @@
|
|||||||
import { computed } from 'vue'
|
|
||||||
import axios from '@/utils/axios'
|
|
||||||
import { store } from '@/store'
|
|
||||||
import { getFileSuffix, isImage } from '@/utils/file-handle-helper'
|
|
||||||
import structureImageObject from '@/utils/image-helper'
|
|
||||||
|
|
||||||
const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取指定路径（path）下的目录列表
|
|
||||||
* @param path 路径
|
|
||||||
*/
|
|
||||||
export const getDirListByPath = (path: string = '') => {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
axios
|
|
||||||
.get(
|
|
||||||
`/repos/${userConfigInfo.owner}/${userConfigInfo.selectedRepos}/contents/${path}`,
|
|
||||||
{
|
|
||||||
params: {
|
|
||||||
ref: userConfigInfo.selectedBranch
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then((res: any) => {
|
|
||||||
if (res && res.status === 200 && res.data.length > 0) {
|
|
||||||
resolve(
|
|
||||||
res.data
|
|
||||||
.filter((v: any) => v.type === 'dir')
|
|
||||||
.map((x: any) => ({
|
|
||||||
value: x.name,
|
|
||||||
label: x.name
|
|
||||||
}))
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
resolve(null)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
resolve(null)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取指定路径（path）下的目录和图片
|
|
||||||
* @param path
|
|
||||||
*/
|
|
||||||
export const getContentByReposPath = (path: string = '') => {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
axios
|
|
||||||
.get(
|
|
||||||
`/repos/${userConfigInfo.owner}/${userConfigInfo.selectedRepos}/contents/${path}`,
|
|
||||||
{
|
|
||||||
params: {
|
|
||||||
ref: userConfigInfo.selectedBranch
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then((res: any) => {
|
|
||||||
if (res && res.status === 200 && res.data.length > 0) {
|
|
||||||
res.data
|
|
||||||
.filter((v: any) => v.type === 'dir')
|
|
||||||
.forEach((x: any) => store.dispatch('DIR_IMAGE_LIST_ADD_DIR', x.path))
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
res.data
|
|
||||||
.filter((v: any) => v.type === 'file' && isImage(getFileSuffix(v.name)))
|
|
||||||
.forEach((x: any) =>
|
|
||||||
store.dispatch('DIR_IMAGE_LIST_ADD_IMAGE', structureImageObject(x, path))
|
|
||||||
)
|
|
||||||
}, 100)
|
|
||||||
|
|
||||||
resolve(true)
|
|
||||||
} else {
|
|
||||||
resolve(null)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
resolve(null)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
/* eslint-disable import/prefer-default-export */
|
|
||||||
export enum deleteStatusEnum {
|
|
||||||
deleted = 'deleted',
|
|
||||||
allDeleted = 'allDeleted',
|
|
||||||
deleteFail = 'deleteFail'
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
export interface DirModel {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum DirModeEnum {
|
|
||||||
autoDir = 'autoDir',
|
|
||||||
newDir = 'newDir',
|
|
||||||
rootDir = 'rootDir',
|
|
||||||
reposDir = 'reposDir'
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
enum ExternalLinkType {
|
|
||||||
staticaly = 'staticaly',
|
|
||||||
jsdelivr = 'jsdelivr',
|
|
||||||
github = 'github',
|
|
||||||
cloudflare = 'cloudflare'
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ExternalLinkType
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
const PICX_PREFIX = 'PICX_'
|
|
||||||
|
|
||||||
export const PICX_CONFIG = `${PICX_PREFIX}CONFIG`
|
|
||||||
export const PICX_UPLOADED = `${PICX_PREFIX}UPLOADED`
|
|
||||||
export const PICX_MANAGEMENT = `${PICX_PREFIX}MANAGEMENT_MULTI`
|
|
||||||
export const PICX_SETTINGS = `${PICX_PREFIX}SETTINGS`
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
export enum UploadStatusEnum {
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
uploaded = 'uploaded',
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
allUploaded = 'allUploaded',
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
uploadFail = 'uploadFail'
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UploadedImageModel {
|
|
||||||
type: string
|
|
||||||
uuid: string
|
|
||||||
sha: string
|
|
||||||
dir: string
|
|
||||||
path: string
|
|
||||||
name: string
|
|
||||||
size: any
|
|
||||||
deleting: boolean
|
|
||||||
is_transform_md: boolean
|
|
||||||
checked: boolean
|
|
||||||
github_url: string
|
|
||||||
jsdelivr_cdn_url: string
|
|
||||||
staticaly_cdn_url: string
|
|
||||||
cloudflare_cdn_url: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ToUploadImageModel {
|
|
||||||
uuid: string
|
|
||||||
|
|
||||||
uploadStatus: {
|
|
||||||
progress: number
|
|
||||||
uploading: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
imgData: {
|
|
||||||
base64Content: string
|
|
||||||
base64Url: string
|
|
||||||
}
|
|
||||||
|
|
||||||
fileInfo: {
|
|
||||||
compressedSize?: number | undefined
|
|
||||||
originSize?: number | undefined
|
|
||||||
size: number | undefined
|
|
||||||
lastModified: number | undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
filename: {
|
|
||||||
name: string
|
|
||||||
hash: string
|
|
||||||
suffix: string
|
|
||||||
prefixName: string
|
|
||||||
now: string
|
|
||||||
initName: string
|
|
||||||
newName: string
|
|
||||||
isHashRename: boolean
|
|
||||||
isRename: boolean
|
|
||||||
isPrefix: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
externalLink: {
|
|
||||||
github: string
|
|
||||||
jsdelivr: string
|
|
||||||
staticaly: string
|
|
||||||
cloudflare: string
|
|
||||||
}
|
|
||||||
|
|
||||||
uploadedImg?: UploadedImageModel
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
import { DirModeEnum, DirModel } from './dir.model'
|
|
||||||
|
|
||||||
export interface ReposModel {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
desc?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BranchModel {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum BranchModeEnum {
|
|
||||||
newBranch = 'newBranch',
|
|
||||||
reposBranch = 'reposBranch'
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UserConfigInfoModel {
|
|
||||||
token: string
|
|
||||||
owner: string
|
|
||||||
email: string
|
|
||||||
name: string
|
|
||||||
avatarUrl: string
|
|
||||||
selectedRepos: string
|
|
||||||
reposList: ReposModel[]
|
|
||||||
selectedBranch: string
|
|
||||||
branchMode: BranchModeEnum
|
|
||||||
branchList: BranchModel[]
|
|
||||||
dirMode: DirModeEnum
|
|
||||||
selectedDir: string
|
|
||||||
selectedDirList: string[]
|
|
||||||
dirList: DirModel[]
|
|
||||||
loggingStatus: boolean
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import { CompressEncoderMap } from '../../utils/compress'
|
|
||||||
import ExternalLinkType from '@/common/model/external-link.model'
|
|
||||||
|
|
||||||
export interface UserSettingsModel {
|
|
||||||
defaultHash: boolean
|
|
||||||
defaultMarkdown: boolean
|
|
||||||
defaultPrefix: boolean
|
|
||||||
prefixName: string
|
|
||||||
themeMode: 'auto' | 'light' | 'dark'
|
|
||||||
autoLightThemeTime: string[]
|
|
||||||
isCompress: boolean
|
|
||||||
compressEncoder: CompressEncoderMap
|
|
||||||
elementPlusSize: 'large' | 'default' | 'small'
|
|
||||||
externalLinkType: ExternalLinkType
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
export declare type Recordable<T = any> = Record<string, T>
|
|
||||||
|
|
||||||
export declare interface ViteEnv {
|
|
||||||
VITE_PORT?: number
|
|
||||||
VITE_USE_PWA?: boolean
|
|
||||||
VITE_PUBLIC_PATH?: string
|
|
||||||
VITE_GLOB_APP_TITLE?: string
|
|
||||||
VITE_GLOB_APP_SHORT_NAME?: string
|
|
||||||
VITE_OPEN_BROWSER?: boolean
|
|
||||||
VITE_CORS?: boolean
|
|
||||||
}
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
@import "../../style/base.styl"
|
|
||||||
|
|
||||||
.copy-external-link-box {
|
|
||||||
position relative
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
box-sizing border-box
|
|
||||||
display flex
|
|
||||||
justify-content space-between
|
|
||||||
align-items flex-end
|
|
||||||
padding 2rem
|
|
||||||
|
|
||||||
.markdown-icon-box {
|
|
||||||
width 26rem
|
|
||||||
height 20rem
|
|
||||||
position relative
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
.markdown-icon {
|
|
||||||
path {
|
|
||||||
fill var(--markdown-icon-color)
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
path {
|
|
||||||
fill var(--markdown-icon-active-color)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn-box {
|
|
||||||
position relative
|
|
||||||
box-sizing border-box
|
|
||||||
height 100%
|
|
||||||
display flex
|
|
||||||
justify-content space-between
|
|
||||||
|
|
||||||
.btn-item {
|
|
||||||
height 20rem
|
|
||||||
box-sizing border-box
|
|
||||||
border-radius 5rem
|
|
||||||
font-size 12rem
|
|
||||||
cursor pointer
|
|
||||||
transition all 0.3s ease
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-url {
|
|
||||||
box-sizing border-box
|
|
||||||
border 1rem solid var(--default-text-color)
|
|
||||||
color var(--default-text-color)
|
|
||||||
padding 1rem 2rem
|
|
||||||
margin-right 4rem
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background var(--default-text-color)
|
|
||||||
color var(--background-color)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,104 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="copy-external-link-box">
|
|
||||||
<div>
|
|
||||||
<el-tooltip
|
|
||||||
:content="img.is_transform_md ? '点击转换普通外链' : '点击转换 Markdown 格式外链'"
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="markdown-icon-box flex-center"
|
|
||||||
@click="img.is_transform_md = !img.is_transform_md"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
v-if="!img.is_transform_md"
|
|
||||||
t="1631782798077"
|
|
||||||
class="markdown-icon"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
p-id="2861"
|
|
||||||
width="26"
|
|
||||||
height="26"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M92 192C42.24 192 0 232.128 0 282.016v459.968C0 791.904 42.24 832 92 832h840C981.76 832 1024 791.872 1024 741.984V282.016C1024 232.16 981.76 192 932 192z m0 64h840c16.512 0 28 12.256 28 26.016v459.968c0 13.76-11.52 26.016-28 26.016H92C75.488 768 64 755.744 64 741.984V282.016c0-13.76 11.52-25.984 28-25.984zM160 352v320h96v-212.992l96 127.008 96-127.04V672h96V352h-96l-96 128-96-128z m544 0v160h-96l144 160 144-160h-96v-160z"
|
|
||||||
p-id="2862"
|
|
||||||
fill="#808080"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
<svg
|
|
||||||
v-if="img.is_transform_md"
|
|
||||||
t="1631784688556"
|
|
||||||
class="markdown-icon active"
|
|
||||||
viewBox="0 0 1280 1024"
|
|
||||||
version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
p-id="3242"
|
|
||||||
width="26"
|
|
||||||
height="26"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M1187.6 118.2H92.4C41.4 118.2 0 159.6 0 210.4v603c0 51 41.4 92.4 92.4 92.4h1095.4c51 0 92.4-41.4 92.2-92.2V210.4c0-50.8-41.4-92.2-92.4-92.2zM677 721.2H554v-240l-123 153.8-123-153.8v240H184.6V302.8h123l123 153.8 123-153.8h123v418.4z m270.6 6.2L763 512H886V302.8h123V512H1132z"
|
|
||||||
p-id="3243"
|
|
||||||
fill="#3c3c3c"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
<div class="btn-box">
|
|
||||||
<el-tooltip content="点击复制 Staticaly CDN 外链" placement="top">
|
|
||||||
<span
|
|
||||||
class="btn-item copy-url flex-center"
|
|
||||||
@click="copyLink(externalLinkType.staticaly)"
|
|
||||||
>
|
|
||||||
Staticaly
|
|
||||||
</span>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip content="点击复制 Cloudflare CDN 外链" placement="top">
|
|
||||||
<span
|
|
||||||
class="btn-item copy-url flex-center"
|
|
||||||
@click="copyLink(externalLinkType.cloudflare)"
|
|
||||||
>
|
|
||||||
Cloudflare
|
|
||||||
</span>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, computed, ref, onUpdated } from 'vue'
|
|
||||||
import ExternalLinkType from '@/common/model/external-link.model'
|
|
||||||
import { store } from '@/store'
|
|
||||||
import { copyExternalLink } from '@/utils/external-link-handler'
|
|
||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
imgObj: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const userSettings = computed(() => store.getters.getUserSettings).value
|
|
||||||
|
|
||||||
let img = ref(props.imgObj as UploadedImageModel).value
|
|
||||||
const externalLinkType = ExternalLinkType
|
|
||||||
|
|
||||||
const copyLink = (type: ExternalLinkType) => {
|
|
||||||
copyExternalLink(img, type)
|
|
||||||
}
|
|
||||||
|
|
||||||
onUpdated(() => {
|
|
||||||
img = props.imgObj
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
img.is_transform_md = userSettings.defaultMarkdown
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import "copy-external-link.styl"
|
|
||||||
</style>
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
@import '../../style/base.styl'
|
|
||||||
|
|
||||||
.folder-card {
|
|
||||||
position relative
|
|
||||||
width 110rem
|
|
||||||
height 106rem
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
flex-direction column
|
|
||||||
justify-content flex-start
|
|
||||||
cursor pointer
|
|
||||||
box-sizing border-box
|
|
||||||
padding 3rem
|
|
||||||
user-select none
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background var(--second-background-color)
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
justify-content center
|
|
||||||
width 50rem
|
|
||||||
height 50rem
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.text {
|
|
||||||
width 90%
|
|
||||||
font-size 14rem
|
|
||||||
margin-top 5rem
|
|
||||||
text-align center
|
|
||||||
overflow hidden
|
|
||||||
text-overflow ellipsis
|
|
||||||
display -webkit-box
|
|
||||||
-webkit-box-orient vertical
|
|
||||||
-webkit-line-clamp 2
|
|
||||||
word-wrap break-word
|
|
||||||
word-break break-all
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,116 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="folder-card" @dblclick="dblclickFolder">
|
|
||||||
<el-tooltip
|
|
||||||
v-if="mode === 'dir'"
|
|
||||||
effect="dark"
|
|
||||||
content="双击进入下一级目录"
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
<div class="icon">
|
|
||||||
<svg
|
|
||||||
t="1639999626518"
|
|
||||||
class="icon"
|
|
||||||
viewBox="0 0 1228 1024"
|
|
||||||
version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
p-id="3575"
|
|
||||||
width="200"
|
|
||||||
height="200"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M1196.987733 212.5824v540.0576c0 39.594667-34.474667 71.3728-76.765866 71.3728H323.242667c-51.780267 0-88.746667-46.762667-73.250134-92.808533l126.737067-375.808H70.417067C31.675733 355.362133 0 326.4512 0 291.089067V98.372267C0 63.044267 31.675733 34.0992 70.417067 34.0992h378.811733c26.7264 0 51.029333 13.9264 63.010133 35.703467l39.048534 71.406933H1120.256c42.257067 0 76.8 32.119467 76.8 71.3728"
|
|
||||||
fill="#5398DF"
|
|
||||||
p-id="3576"
|
|
||||||
></path>
|
|
||||||
<path
|
|
||||||
d="M1128.721067 997.853867H68.266667a68.266667 68.266667 0 0 1-68.266667-68.266667V280.3712a68.266667 68.266667 0 0 1 68.266667-68.266667h1060.4544a68.266667 68.266667 0 0 1 68.266666 68.266667V929.5872a68.266667 68.266667 0 0 1-68.266666 68.266667"
|
|
||||||
fill="#85BCFF"
|
|
||||||
p-id="3577"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</el-tooltip>
|
|
||||||
|
|
||||||
<div class="icon" v-if="mode === 'back'">
|
|
||||||
<svg
|
|
||||||
t="1640264285200"
|
|
||||||
class="icon"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
p-id="29312"
|
|
||||||
width="200"
|
|
||||||
height="200"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M426.666667 384V213.333333l-298.666667 298.666667 298.666667 298.666667v-174.933334c213.333333 0 362.666667 68.266667 469.333333 217.6-42.666667-213.333333-170.666667-426.666667-469.333333-469.333333z"
|
|
||||||
p-id="29313"
|
|
||||||
fill="#85BCFF"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="text" v-if="mode === 'dir'">{{ folderObj.dir }}</div>
|
|
||||||
<div class="text" v-if="mode === 'back'">双击返回</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
|
|
||||||
const store = useStore()
|
|
||||||
|
|
||||||
const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-undef
|
|
||||||
const props = defineProps({
|
|
||||||
folderObj: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {}
|
|
||||||
},
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: 'dir'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emits = defineEmits(['update:modelValue'])
|
|
||||||
|
|
||||||
const dblclickFolder = () => {
|
|
||||||
const { folderObj, mode } = props
|
|
||||||
|
|
||||||
if (mode === 'back') {
|
|
||||||
const currentDir = userConfigInfo.selectedDir
|
|
||||||
|
|
||||||
if (currentDir === '/') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentDirList = currentDir.split('/')
|
|
||||||
|
|
||||||
if (currentDirList.length === 1) {
|
|
||||||
userConfigInfo.selectedDir = '/'
|
|
||||||
} else if (currentDirList.length > 1) {
|
|
||||||
currentDirList.length -= 1
|
|
||||||
userConfigInfo.selectedDir = currentDirList.join('/')
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
userConfigInfo.selectedDir = folderObj.dirPath
|
|
||||||
}
|
|
||||||
|
|
||||||
const { selectedDir } = userConfigInfo
|
|
||||||
|
|
||||||
if (selectedDir === '/') {
|
|
||||||
userConfigInfo.selectedDirList = []
|
|
||||||
userConfigInfo.dirMode = 'rootDir'
|
|
||||||
} else {
|
|
||||||
userConfigInfo.selectedDirList = selectedDir.split('/')
|
|
||||||
userConfigInfo.dirMode = 'reposDir'
|
|
||||||
}
|
|
||||||
store.dispatch('USER_CONFIG_INFO_NOT_PERSIST')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import 'folder-card.styl';
|
|
||||||
</style>
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
@import "../../style/base.styl"
|
|
||||||
|
|
||||||
.header {
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
background var(--background-color)
|
|
||||||
padding 0 20rem
|
|
||||||
box-sizing border-box
|
|
||||||
display flex
|
|
||||||
justify-content space-between
|
|
||||||
align-items center
|
|
||||||
|
|
||||||
.header-left {
|
|
||||||
height 100%
|
|
||||||
display flex
|
|
||||||
justify-content flex-start
|
|
||||||
|
|
||||||
.brand {
|
|
||||||
height 100%
|
|
||||||
display flex
|
|
||||||
justify-content flex-start
|
|
||||||
align-items center
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width 46rem
|
|
||||||
height 46rem
|
|
||||||
margin-right 10rem
|
|
||||||
|
|
||||||
img {
|
|
||||||
width 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size 36rem
|
|
||||||
font-weight bold
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.website-count {
|
|
||||||
box-sizing border-box
|
|
||||||
display flex
|
|
||||||
align-items flex-end
|
|
||||||
font-size 14rem
|
|
||||||
margin-left 10rem
|
|
||||||
padding-bottom 12rem
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
+picx-mobile() {
|
|
||||||
display none
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.header-right {
|
|
||||||
.user-info {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.username {
|
|
||||||
font-size: 16rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 38rem;
|
|
||||||
height: 38rem;
|
|
||||||
color: var(--default-text-color);
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1rem solid var(--default-text-color);
|
|
||||||
margin-left: 10rem;
|
|
||||||
padding: 1rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
<template>
|
|
||||||
<header class="header">
|
|
||||||
<div class="header-left">
|
|
||||||
<div class="brand" @click="router.push('/')">
|
|
||||||
<div class="logo">
|
|
||||||
<img src="../../assets/logo.png" alt="PicX" />
|
|
||||||
</div>
|
|
||||||
<div class="title">PicX</div>
|
|
||||||
</div>
|
|
||||||
<div class="website-count" @click="goGitHubRepo">
|
|
||||||
<el-tooltip content="感觉好用，点 Star 支持作者(*￣︶￣)" placement="bottom">
|
|
||||||
<site-count :isuv="false" />
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header-right">
|
|
||||||
<div class="user-info" @click="onUserInfoClick">
|
|
||||||
<div class="username">
|
|
||||||
{{ userConfigInfo.owner ? userConfigInfo.owner : defaultUsername }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="avatar" v-if="!userConfigInfo?.avatarUrl">
|
|
||||||
<el-icon :size="22"><UserFilled /></el-icon>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-dropdown
|
|
||||||
trigger="click"
|
|
||||||
@command="handleCommand"
|
|
||||||
v-if="userConfigInfo?.avatarUrl"
|
|
||||||
>
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
<span class="avatar">
|
|
||||||
<img :src="userConfigInfo?.avatarUrl" :alt="userConfigInfo?.owner" />
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item command="logout"> 退出登录 </el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, reactive, computed, toRefs } from 'vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
import siteCount from '@/components/site-count/site-count.vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'header-content',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
siteCount
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
const router = useRouter()
|
|
||||||
const store = useStore()
|
|
||||||
|
|
||||||
const reactiveData = reactive({
|
|
||||||
defaultUsername: '未登录',
|
|
||||||
userConfigInfo: computed(() => store.state.userConfigInfoModule.userConfigInfo)
|
|
||||||
})
|
|
||||||
|
|
||||||
const onUserInfoClick = () => {
|
|
||||||
if (
|
|
||||||
!reactiveData.userConfigInfo.loggingStatus &&
|
|
||||||
router.currentRoute.value.path !== '/config'
|
|
||||||
) {
|
|
||||||
router.push('/config')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const logout = () => {
|
|
||||||
store.dispatch('LOGOUT')
|
|
||||||
router.push('/config')
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCommand = (command: string) => {
|
|
||||||
// eslint-disable-next-line default-case
|
|
||||||
switch (command) {
|
|
||||||
case 'upload':
|
|
||||||
router.push('/')
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'config':
|
|
||||||
router.push('/config')
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'management':
|
|
||||||
router.push('/management')
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'logout':
|
|
||||||
logout()
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const goGitHubRepo = () => {
|
|
||||||
window.open('https://github.com/XPoet/picx')
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...toRefs(reactiveData),
|
|
||||||
router,
|
|
||||||
onUserInfoClick,
|
|
||||||
handleCommand,
|
|
||||||
goGitHubRepo
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import "header-content.styl"
|
|
||||||
</style>
|
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
@import "../../style/base.styl"
|
|
||||||
|
|
||||||
$infoBoxHeight = 56rem
|
|
||||||
|
|
||||||
.image-card {
|
|
||||||
position relative
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
box-shadow 1rem 2rem 3rem var(--shadow-color)
|
|
||||||
box-sizing border-box
|
|
||||||
padding-bottom $infoBoxHeight
|
|
||||||
user-select none
|
|
||||||
|
|
||||||
&.checked, &:hover {
|
|
||||||
box-shadow 0 0 10rem #666
|
|
||||||
}
|
|
||||||
|
|
||||||
&.listing {
|
|
||||||
display flex
|
|
||||||
justify-content flex-start
|
|
||||||
align-items center
|
|
||||||
padding 5rem
|
|
||||||
border-radius $box-border-radius
|
|
||||||
|
|
||||||
.image-box {
|
|
||||||
height 45rem
|
|
||||||
width 45rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-box {
|
|
||||||
position relative
|
|
||||||
width 80%
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-loading-mask) {
|
|
||||||
.el-loading-spinner {
|
|
||||||
margin-top -25rem
|
|
||||||
|
|
||||||
.circular {
|
|
||||||
height 24rem
|
|
||||||
width 24rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-loading-text {
|
|
||||||
margin 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.image-box {
|
|
||||||
position relative
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
|
|
||||||
img {
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
object-fit cover
|
|
||||||
cursor pointer
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.info-box {
|
|
||||||
width 100%
|
|
||||||
height $infoBoxHeight
|
|
||||||
position absolute
|
|
||||||
bottom 0
|
|
||||||
left 0
|
|
||||||
|
|
||||||
.image-info {
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
padding 5rem
|
|
||||||
color var(--default-text-color)
|
|
||||||
box-sizing border-box
|
|
||||||
display flex
|
|
||||||
flex-direction column
|
|
||||||
justify-content space-between
|
|
||||||
|
|
||||||
.rename-input {
|
|
||||||
height 20rem
|
|
||||||
display flex
|
|
||||||
margin-bottom 4rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.filename {
|
|
||||||
height 16rem
|
|
||||||
overflow hidden
|
|
||||||
text-overflow ellipsis
|
|
||||||
white-space nowrap
|
|
||||||
font-size 14rem
|
|
||||||
margin-bottom 6rem
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.operation-box {
|
|
||||||
position absolute
|
|
||||||
top 10rem
|
|
||||||
right 8rem
|
|
||||||
width calc(100% - 16rem)
|
|
||||||
display flex
|
|
||||||
justify-content space-between
|
|
||||||
|
|
||||||
.operation-left {
|
|
||||||
.picked-btn {
|
|
||||||
i {
|
|
||||||
font-weight bold
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.operation-right {
|
|
||||||
display flex
|
|
||||||
}
|
|
||||||
|
|
||||||
.operation-btn {
|
|
||||||
width 32rem
|
|
||||||
height 32rem
|
|
||||||
border-radius 50%
|
|
||||||
box-shadow 0 0 6rem #555
|
|
||||||
cursor pointer
|
|
||||||
background var(--background-color)
|
|
||||||
display flex
|
|
||||||
justify-content center
|
|
||||||
align-items center
|
|
||||||
margin-right 8rem
|
|
||||||
font-size 18rem
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,287 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="image-card"
|
|
||||||
:class="{ listing: listing, checked: imageObj.checked }"
|
|
||||||
v-loading="imageObj.deleting"
|
|
||||||
element-loading-text="删除中..."
|
|
||||||
@mouseenter="isShowDelBtn = true"
|
|
||||||
@mouseleave="isShowDelBtn = false"
|
|
||||||
>
|
|
||||||
<div class="image-box">
|
|
||||||
<img data-fancybox="gallery" :src="imgUrl" />
|
|
||||||
</div>
|
|
||||||
<div class="info-box">
|
|
||||||
<div class="image-info">
|
|
||||||
<el-input
|
|
||||||
size="small"
|
|
||||||
v-if="renameValue && props.modelValue === props.index"
|
|
||||||
class="rename-input"
|
|
||||||
v-model="renameValue"
|
|
||||||
@blur="renameInputBlur"
|
|
||||||
@keydown.enter.prevent="updateRename"
|
|
||||||
ref="renameInputRef"
|
|
||||||
></el-input>
|
|
||||||
<div class="filename" v-else>{{ imageObj.name }}</div>
|
|
||||||
<div class="image-operation">
|
|
||||||
<copy-external-link :img-obj="imageObj" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="operation-box"
|
|
||||||
v-show="isShowDelBtn || dropdownVisible || imageObj.checked"
|
|
||||||
>
|
|
||||||
<div class="operation-left">
|
|
||||||
<div
|
|
||||||
v-if="isManagementPage"
|
|
||||||
:class="[imageObj.checked ? 'picked-btn' : 'pick-btn', 'operation-btn']"
|
|
||||||
@click="trigglePick(imageObj)"
|
|
||||||
>
|
|
||||||
<el-icon v-if="imageObj.checked"><Check /></el-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="operation-right">
|
|
||||||
<el-dropdown size="default" trigger="click" @visible-change="visibleChange">
|
|
||||||
<div class="operation-btn">
|
|
||||||
<el-icon><MoreFilled /></el-icon>
|
|
||||||
</div>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item @click="deleteImageTips(imageObj)">
|
|
||||||
删除
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item @click.self="renameImage(imageObj)">
|
|
||||||
重命名
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item @click="viewImageProperties(imageObj)">
|
|
||||||
属性
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, nextTick, ref } from 'vue'
|
|
||||||
import type { ElInput } from 'element-plus'
|
|
||||||
import { useRoute } from 'vue-router'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
import axios from '@/utils/axios'
|
|
||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
import { getBase64ByImageUrl, getImage } from '@/utils/rename-image'
|
|
||||||
import { uploadImage_single } from '@/utils/upload-helper'
|
|
||||||
import { getFilename, getFileSize, getFileSuffix } from '@/utils/file-handle-helper'
|
|
||||||
import ExternalLinkType from '@/common/model/external-link.model'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
listing: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
imageObj: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {}
|
|
||||||
},
|
|
||||||
isUploaded: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
index: {
|
|
||||||
type: Number
|
|
||||||
},
|
|
||||||
modelValue: {
|
|
||||||
type: Number
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emits = defineEmits(['update:modelValue'])
|
|
||||||
|
|
||||||
const store = useStore()
|
|
||||||
const router = useRoute()
|
|
||||||
const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
|
|
||||||
const userSettings = computed(() => store.getters.getUserSettings).value
|
|
||||||
const isManagementPage = computed(() => {
|
|
||||||
return router.path === '/management'
|
|
||||||
})
|
|
||||||
|
|
||||||
const imgUrl = computed(() => {
|
|
||||||
switch (userSettings.externalLinkType) {
|
|
||||||
case ExternalLinkType.jsdelivr:
|
|
||||||
return props.imageObj.jsdelivr_cdn_url
|
|
||||||
case ExternalLinkType.staticaly:
|
|
||||||
return props.imageObj.staticaly_cdn_url
|
|
||||||
case ExternalLinkType.cloudflare:
|
|
||||||
return props.imageObj.cloudflare_cdn_url
|
|
||||||
default:
|
|
||||||
return props.imageObj.github_url
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const renameInputRef = ref<InstanceType<typeof ElInput>>()
|
|
||||||
|
|
||||||
const isShowDelBtn = ref(false)
|
|
||||||
|
|
||||||
const renameValue = ref('')
|
|
||||||
|
|
||||||
const dropdownVisible = ref<Boolean>(false)
|
|
||||||
|
|
||||||
const doDeleteImage = (
|
|
||||||
imageObj: UploadedImageModel,
|
|
||||||
isRename: boolean = false
|
|
||||||
): Promise<Boolean> => {
|
|
||||||
if (!isRename) {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
imageObj.deleting = true
|
|
||||||
}
|
|
||||||
const { owner, selectedRepos } = userConfigInfo
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
axios
|
|
||||||
.delete(`/repos/${owner}/${selectedRepos}/contents/${imageObj.path}`, {
|
|
||||||
data: {
|
|
||||||
owner,
|
|
||||||
repo: selectedRepos,
|
|
||||||
path: imageObj.path,
|
|
||||||
message: 'Delete picture via PicX(https://github.com/XPoet/picx)',
|
|
||||||
sha: imageObj.sha
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
console.log('[deleteImage] ', res)
|
|
||||||
if (res && res.status === 200) {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
imageObj.deleting = false
|
|
||||||
// eslint-disable-next-line no-unused-expressions
|
|
||||||
ElMessage.success(`${isRename ? '更新' : '删除'}成功！`)
|
|
||||||
store.dispatch('UPLOADED_LIST_REMOVE', imageObj.uuid)
|
|
||||||
store.dispatch('DIR_IMAGE_LIST_REMOVE', imageObj)
|
|
||||||
resolve(true)
|
|
||||||
} else {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
imageObj.deleting = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteImageTips = (imageObj: UploadedImageModel) => {
|
|
||||||
ElMessageBox.confirm(
|
|
||||||
`
|
|
||||||
<div>此操作将会永久删除图片：</div>
|
|
||||||
<strong>${imageObj.name}</strong>
|
|
||||||
`,
|
|
||||||
`删除提示`,
|
|
||||||
{
|
|
||||||
dangerouslyUseHTMLString: true,
|
|
||||||
type: 'warning'
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then(() => {
|
|
||||||
doDeleteImage(imageObj)
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
console.log('取消删除')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const trigglePick = (imageObj: UploadedImageModel) => {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
imageObj.checked = !imageObj.checked
|
|
||||||
store.commit('IMAGE_CARD', { imageObj })
|
|
||||||
}
|
|
||||||
|
|
||||||
const renameImage = async (imgObj: UploadedImageModel) => {
|
|
||||||
emits('update:modelValue', props.index)
|
|
||||||
renameValue.value = getFilename(imgObj.name)
|
|
||||||
await nextTick(() => {
|
|
||||||
const temp = setTimeout(() => {
|
|
||||||
renameInputRef.value?.focus()
|
|
||||||
clearTimeout(temp)
|
|
||||||
}, 150)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const renameInputBlur = () => {
|
|
||||||
emits('update:modelValue', undefined)
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateRename = async () => {
|
|
||||||
renameInputBlur()
|
|
||||||
|
|
||||||
const { imageObj }: any = props
|
|
||||||
|
|
||||||
if (renameValue.value === getFilename(imageObj.name) || !renameValue.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const renameFn = async () => {
|
|
||||||
const loading = ElLoading.service({
|
|
||||||
lock: true,
|
|
||||||
text: '正在重命名...'
|
|
||||||
})
|
|
||||||
|
|
||||||
const suffix = getFileSuffix(imageObj.name)
|
|
||||||
|
|
||||||
const imgInfo = {
|
|
||||||
name: renameValue.value + imageObj.name.substring(imageObj.name.indexOf('.')),
|
|
||||||
size: imageObj.size,
|
|
||||||
lastModified: Date.now(),
|
|
||||||
type: `image/${suffix}`
|
|
||||||
}
|
|
||||||
|
|
||||||
const base64 = await getBase64ByImageUrl(imgUrl.value, suffix)
|
|
||||||
|
|
||||||
if (base64) {
|
|
||||||
const newImgObj = getImage(base64, imgInfo)
|
|
||||||
if (newImgObj) {
|
|
||||||
const isUploadSuccess = await uploadImage_single(userConfigInfo, newImgObj)
|
|
||||||
|
|
||||||
if (isUploadSuccess) {
|
|
||||||
renameValue.value = ''
|
|
||||||
await doDeleteImage(imageObj, true)
|
|
||||||
await store.dispatch('UPLOADED_LIST_REMOVE', newImgObj.uuid)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
loading.close()
|
|
||||||
}
|
|
||||||
|
|
||||||
ElMessageBox.confirm(`该图片重命名为 ${renameValue.value} ？`, `提示`, {
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
.then(async () => {
|
|
||||||
await renameFn()
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
console.log('取消图片重命名')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const visibleChange = (e: boolean) => {
|
|
||||||
dropdownVisible.value = e
|
|
||||||
}
|
|
||||||
|
|
||||||
const viewImageProperties = (imgObj: UploadedImageModel) => {
|
|
||||||
ElMessageBox.confirm(
|
|
||||||
`
|
|
||||||
<div>图片名称：<strong>${imgObj.name}</strong></div>
|
|
||||||
<div>图片大小：<strong>${getFileSize(imgObj.size)} KB</strong></div>
|
|
||||||
`,
|
|
||||||
`属性`,
|
|
||||||
{
|
|
||||||
showCancelButton: false,
|
|
||||||
showConfirmButton: false,
|
|
||||||
dangerouslyUseHTMLString: true,
|
|
||||||
type: 'info'
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import 'image-card.styl';
|
|
||||||
</style>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
@import "../../style/base.styl"
|
|
||||||
|
|
||||||
.selector-wrapper {
|
|
||||||
padding 4rem 12rem
|
|
||||||
width 100%
|
|
||||||
box-sizing border-box
|
|
||||||
display flex
|
|
||||||
justify-content space-between
|
|
||||||
align-items center
|
|
||||||
border-bottom 1rem solid var(--third-background-color)
|
|
||||||
|
|
||||||
|
|
||||||
.selector-left-box {
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
|
|
||||||
:deep(.el-checkbox) {
|
|
||||||
font-weight unset
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-checkbox__label ) {
|
|
||||||
line-height unset
|
|
||||||
}
|
|
||||||
|
|
||||||
.cancel-select-btn {
|
|
||||||
color #576b95
|
|
||||||
cursor pointer
|
|
||||||
}
|
|
||||||
|
|
||||||
div.item {
|
|
||||||
margin-left 8rem
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.selector-right-box {
|
|
||||||
.btn-icon {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 22rem;
|
|
||||||
margin-left: 10rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.temp-batch-externalink {
|
|
||||||
opacity 0
|
|
||||||
position absolute
|
|
||||||
left -9999rem
|
|
||||||
top -9999rem
|
|
||||||
width 0
|
|
||||||
height 0
|
|
||||||
}
|
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="selector-wrapper" v-if="getImageCardCheckedNum">
|
|
||||||
<div class="selector-left-box">
|
|
||||||
<el-checkbox
|
|
||||||
:label="checked ? '取消全选' : '全选'"
|
|
||||||
v-model="checked"
|
|
||||||
@change="triggleFullCheck"
|
|
||||||
></el-checkbox>
|
|
||||||
<div class="item">已选择 {{ getImageCardCheckedNum }} 张图片</div>
|
|
||||||
<div class="item cancel-select-btn" @click="cancelPick">取消选择</div>
|
|
||||||
</div>
|
|
||||||
<div class="selector-right-box">
|
|
||||||
<el-tooltip placement="top" content="批量复制外链">
|
|
||||||
<el-icon class="btn-icon" @click="copyLink"><CopyDocument /></el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip placement="top" content="批量删除图片">
|
|
||||||
<el-icon class="btn-icon" @click="batchDeleteImage"><Delete /></el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed, onMounted, watch, ref } from 'vue'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
import { batchCopyExternalLink } from '@/utils/external-link-handler'
|
|
||||||
import { delelteBatchImage } from '@/utils/delete-image-card'
|
|
||||||
import { deleteStatusEnum } from '@/common/model/delete.model'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
currentDirImageList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emits = defineEmits(['update:initImageList'])
|
|
||||||
|
|
||||||
const store = useStore()
|
|
||||||
const checked = ref(false)
|
|
||||||
|
|
||||||
const getImageCardCheckedArr = computed(() => store.getters.getImageCardCheckedArr)
|
|
||||||
const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
|
|
||||||
const userSettings = computed(() => store.getters.getUserSettings).value
|
|
||||||
const getImageCardCheckedNum = computed(() => getImageCardCheckedArr.value.length || 0)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => getImageCardCheckedNum.value,
|
|
||||||
(newVal) => {
|
|
||||||
const newValCheckedNum = props.currentDirImageList.length
|
|
||||||
checked.value = newVal === newValCheckedNum
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
function copyLink() {
|
|
||||||
batchCopyExternalLink(getImageCardCheckedArr.value, userSettings.externalLinkType)
|
|
||||||
}
|
|
||||||
|
|
||||||
function cancelPick() {
|
|
||||||
props.currentDirImageList.forEach((item: UploadedImageModel) => {
|
|
||||||
if (item.checked) {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
item.checked = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function batchDeleteImage() {
|
|
||||||
if (getImageCardCheckedArr.value?.length > 0) {
|
|
||||||
ElMessageBox.confirm('是否批量删除已选中的图片？', '删除提示', {
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
.then(async () => {
|
|
||||||
const res = await delelteBatchImage(getImageCardCheckedArr.value, userConfigInfo)
|
|
||||||
if (res === deleteStatusEnum.allDeleted) {
|
|
||||||
ElMessage.success('批量删除成功！')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
console.log('取消批量删除')
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
ElMessage.warning('请先选择图片')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function triggleFullCheck() {
|
|
||||||
let checkedImgArr: Array<UploadedImageModel> = []
|
|
||||||
props.currentDirImageList.forEach((item: UploadedImageModel) => {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
item.checked = checked.value
|
|
||||||
})
|
|
||||||
checkedImgArr = props.currentDirImageList as any
|
|
||||||
store.commit('REPLACE_IMAGE_CARD', { checkedImgArr })
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
triggleFullCheck()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import 'image-selector.styl';
|
|
||||||
</style>
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
$transition-duration = 0.3s
|
|
||||||
$transition-delay = 0s
|
|
||||||
|
|
||||||
.image-viewer {
|
|
||||||
position fixed
|
|
||||||
left 0
|
|
||||||
top 0
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
justify-content center
|
|
||||||
background rgba(0, 0, 0, 0)
|
|
||||||
visibility hidden
|
|
||||||
z-index 1000
|
|
||||||
padding 6%
|
|
||||||
box-sizing border-box
|
|
||||||
transition-property visibility, background
|
|
||||||
transition-delay $transition-delay, $transition-delay
|
|
||||||
transition-duration $transition-duration, $transition-duration
|
|
||||||
transition-timing-function ease, ease
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background rgba(0, 0, 0, 0.6)
|
|
||||||
visibility visible
|
|
||||||
|
|
||||||
.image-box {
|
|
||||||
transform scale(1)
|
|
||||||
padding 2rem
|
|
||||||
|
|
||||||
.image-info {
|
|
||||||
display block
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.image-box {
|
|
||||||
position relative;
|
|
||||||
width 60%
|
|
||||||
height 100%
|
|
||||||
display flex
|
|
||||||
flex-direction column
|
|
||||||
justify-content center
|
|
||||||
align-items center
|
|
||||||
transform scale(0)
|
|
||||||
transition-property transform
|
|
||||||
transition-delay $transition-delay
|
|
||||||
transition-duration $transition-duration
|
|
||||||
transition-timing-function ease
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
width 80%
|
|
||||||
}
|
|
||||||
|
|
||||||
.img {
|
|
||||||
cursor zoom-out
|
|
||||||
max-width 100%
|
|
||||||
max-height 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-info {
|
|
||||||
display none
|
|
||||||
padding 10rem
|
|
||||||
|
|
||||||
.item {
|
|
||||||
margin 0 6rem
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="image-viewer"
|
|
||||||
:class="{ active: imageViewer.isShow }"
|
|
||||||
@click="imageViewer.isShow = false"
|
|
||||||
>
|
|
||||||
<div class="image-box" v-if="imageViewer?.imgInfo?.url">
|
|
||||||
<img class="img" :src="imageViewer?.imgInfo?.url" />
|
|
||||||
<div class="image-info" v-if="imageViewer.imgInfo">
|
|
||||||
<el-tag class="item" size="small" v-if="imageViewer.imgInfo.name">
|
|
||||||
图片名：{{ imageViewer.imgInfo.name }}
|
|
||||||
</el-tag>
|
|
||||||
<el-tag class="item" size="small" v-if="imageViewer.imgInfo.size">
|
|
||||||
图片大小：{{ parseFileSize(imageViewer.imgInfo.size) }}
|
|
||||||
</el-tag>
|
|
||||||
<el-tag class="item" size="small" v-if="imageViewer.imgInfo.lastModified">
|
|
||||||
最后修改时间：{{ formatLastModified(imageViewer.imgInfo.lastModified) }}
|
|
||||||
</el-tag>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
import { getFileSize } from '@/utils/file-handle-helper'
|
|
||||||
import TimeHelper from '@/utils/time-helper'
|
|
||||||
|
|
||||||
const store = useStore()
|
|
||||||
const imageViewer = computed(() => store.getters.getImageViewer)
|
|
||||||
|
|
||||||
function parseFileSize(size: number) {
|
|
||||||
return `${getFileSize(size)} KB`
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatLastModified(t: number) {
|
|
||||||
return TimeHelper.formatTimestamp(t)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import "image-viewer.styl"
|
|
||||||
</style>
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
@import "../../style/base.styl"
|
|
||||||
|
|
||||||
$top-height = 60rem
|
|
||||||
$left-side-width = 80rem
|
|
||||||
|
|
||||||
.main-container {
|
|
||||||
position absolute
|
|
||||||
box-sizing border-box
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
background var(--second-background-color)
|
|
||||||
padding-top $top-height
|
|
||||||
font-size 15rem
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.top {
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
box-sizing border-box
|
|
||||||
width 100%
|
|
||||||
height $top-height
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
position relative
|
|
||||||
box-sizing border-box
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
padding-top $component-interval
|
|
||||||
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position relative
|
|
||||||
box-sizing border-box
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
padding-left $left-side-width
|
|
||||||
|
|
||||||
|
|
||||||
.left {
|
|
||||||
position absolute
|
|
||||||
box-sizing border-box
|
|
||||||
width $left-side-width
|
|
||||||
height 100%
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.right {
|
|
||||||
position relative
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
box-sizing border-box
|
|
||||||
padding 0 $component-interval 0 $component-interval
|
|
||||||
|
|
||||||
|
|
||||||
.content {
|
|
||||||
position relative
|
|
||||||
box-sizing border-box
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
<template>
|
|
||||||
<main class="main-container" @click="changeUploadAreaActive">
|
|
||||||
<div class="top">
|
|
||||||
<header-content />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="container">
|
|
||||||
<div class="left">
|
|
||||||
<nav-content />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right">
|
|
||||||
<div class="content">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<image-viewer></image-viewer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from 'vue'
|
|
||||||
import headerContent from '@/components/header-content/header-content.vue'
|
|
||||||
import navContent from '@/components/nav-content/nav-content.vue'
|
|
||||||
import imageViewer from '@/components/image-viewer/image-viewer.vue'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
import userConfigInfoModel from '@/utils/set-theme-mode'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'main-container',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
headerContent,
|
|
||||||
navContent,
|
|
||||||
imageViewer
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
const store = useStore()
|
|
||||||
|
|
||||||
const changeUploadAreaActive = (e: any) => {
|
|
||||||
store.commit(
|
|
||||||
'CHANGE_UPLOAD_AREA_ACTIVE',
|
|
||||||
e.target.classList.contains('active-upload')
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
userConfigInfoModel()
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
changeUploadAreaActive
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import "main-container.styl"
|
|
||||||
</style>
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
@import "../../style/base.styl"
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
position relative
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
box-sizing border-box
|
|
||||||
background var(--background-color)
|
|
||||||
|
|
||||||
ul.nav-list {
|
|
||||||
padding 0
|
|
||||||
margin 0
|
|
||||||
|
|
||||||
li.nav-item {
|
|
||||||
box-sizing border-box
|
|
||||||
width 100%
|
|
||||||
height 76rem
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
font-weight bold
|
|
||||||
background var(--second-background-color)
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-content {
|
|
||||||
display flex
|
|
||||||
flex-direction column
|
|
||||||
justify-content center
|
|
||||||
align-items center
|
|
||||||
|
|
||||||
.nav-name {
|
|
||||||
margin-top 5rem
|
|
||||||
font-size 12rem
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,152 +0,0 @@
|
|||||||
<template>
|
|
||||||
<aside class="nav">
|
|
||||||
<ul class="nav-list">
|
|
||||||
<li
|
|
||||||
class="nav-item flex-center"
|
|
||||||
v-for="(navItem, index) in navList"
|
|
||||||
:key="index"
|
|
||||||
:class="{ active: navItem.isActive }"
|
|
||||||
@click="navClick(navItem)"
|
|
||||||
v-show="navItem.isShow"
|
|
||||||
>
|
|
||||||
<div class="nav-content">
|
|
||||||
<el-icon :size="navIconSize">
|
|
||||||
<component :is="navItem.icon"></component>
|
|
||||||
</el-icon>
|
|
||||||
<span class="nav-name">{{ navItem.name }}</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</aside>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, watch, computed, ref } from 'vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const store = useStore()
|
|
||||||
|
|
||||||
const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
|
|
||||||
const userSettings = computed(() => store.getters.getUserSettings).value
|
|
||||||
|
|
||||||
const navIconSize = computed(() => {
|
|
||||||
switch (userSettings.elementPlusSize) {
|
|
||||||
case 'small':
|
|
||||||
return 22
|
|
||||||
case 'large':
|
|
||||||
return 30
|
|
||||||
default:
|
|
||||||
return 26
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const navList = ref([
|
|
||||||
{
|
|
||||||
name: '图床配置',
|
|
||||||
icon: 'edit',
|
|
||||||
isActive: false,
|
|
||||||
path: '/config',
|
|
||||||
isShow: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '上传图片',
|
|
||||||
icon: 'upload',
|
|
||||||
isActive: false,
|
|
||||||
path: '/upload',
|
|
||||||
isShow: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '图床管理',
|
|
||||||
icon: 'box',
|
|
||||||
isActive: false,
|
|
||||||
path: '/management',
|
|
||||||
isShow: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '我的设置',
|
|
||||||
icon: 'setting',
|
|
||||||
isActive: false,
|
|
||||||
path: '/settings',
|
|
||||||
isShow: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '使用教程',
|
|
||||||
icon: 'magic-stick',
|
|
||||||
isActive: false,
|
|
||||||
path: '/tutorials',
|
|
||||||
isShow: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '帮助反馈',
|
|
||||||
icon: 'chat-dot-round',
|
|
||||||
isActive: false,
|
|
||||||
path: '/about',
|
|
||||||
isShow: true
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
const navClick = (e: any) => {
|
|
||||||
const { path } = e
|
|
||||||
|
|
||||||
if (path === '/management') {
|
|
||||||
if (userConfigInfo.selectedRepos === '') {
|
|
||||||
ElMessage.warning('请选择一个仓库！')
|
|
||||||
router.push('/config')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (userConfigInfo.selectedDir === '') {
|
|
||||||
ElMessage.warning('目录不能为空！')
|
|
||||||
router.push('/config')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
router.push(path)
|
|
||||||
}
|
|
||||||
|
|
||||||
const changeNavActive = (currentPath: string) => {
|
|
||||||
navList.value.forEach((v) => {
|
|
||||||
const temp = v
|
|
||||||
temp.isActive = v.path === currentPath
|
|
||||||
return temp
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => router.currentRoute.value,
|
|
||||||
(_n) => {
|
|
||||||
changeNavActive(_n.path)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => userConfigInfo.loggingStatus,
|
|
||||||
(_n) => {
|
|
||||||
navList.value.forEach((v: any) => {
|
|
||||||
// eslint-disable-next-line default-case
|
|
||||||
switch (v.path) {
|
|
||||||
case '/management':
|
|
||||||
case '/settings':
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
v.isShow = _n
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
router.isReady().then(() => {
|
|
||||||
changeNavActive(router.currentRoute.value.path)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import "nav-content.styl"
|
|
||||||
</style>
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
.selected-info-bar-box {
|
|
||||||
height 100%
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
justify-content flex-start
|
|
||||||
font-size 12rem
|
|
||||||
box-sizing border-box
|
|
||||||
|
|
||||||
.info-item {
|
|
||||||
margin-right 8rem
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="selected-info-bar-box" v-if="userConfigInfo.selectedRepos">
|
|
||||||
<span class="info-item">
|
|
||||||
仓库：
|
|
||||||
<el-tag>
|
|
||||||
{{ userConfigInfo.selectedRepos }}
|
|
||||||
</el-tag>
|
|
||||||
</span>
|
|
||||||
<span class="info-item" v-if="userConfigInfo.selectedBranch">
|
|
||||||
分支：
|
|
||||||
<el-tag>
|
|
||||||
{{ userConfigInfo.selectedBranch }}
|
|
||||||
</el-tag>
|
|
||||||
</span>
|
|
||||||
<span class="info-item" v-if="userConfigInfo.selectedDir">
|
|
||||||
目录：
|
|
||||||
<el-tag>
|
|
||||||
{{ userConfigInfo.selectedDir }}
|
|
||||||
</el-tag>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
|
|
||||||
const store = useStore()
|
|
||||||
const userConfigInfo = computed(() => store.getters.getUserConfigInfo)
|
|
||||||
const userSettings = computed(() => store.getters.getUserSettings)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import "selected-info-bar.styl"
|
|
||||||
</style>
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
<template>
|
|
||||||
<span class="site-count" ref="siteCountDom" v-show="isShow">
|
|
||||||
超过
|
|
||||||
<span id="busuanzi_value_site_uv" class="uv" v-show="isuv"></span>
|
|
||||||
<span id="busuanzi_value_site_pv" class="pv" v-show="!isuv"></span>
|
|
||||||
次被使用
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted, ref, Ref } from 'vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'site-count',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
isuv: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props, ctx) {
|
|
||||||
const siteCountDom: Ref = ref<null | HTMLElement>(null)
|
|
||||||
const isShow: Ref<boolean> = ref(false)
|
|
||||||
|
|
||||||
const getInnerText = (dom, isuv) => {
|
|
||||||
return dom.querySelector(`.${isuv ? 'u' : 'p'}v`).innerText
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
const script: any = document.createElement('script')
|
|
||||||
script.async = true
|
|
||||||
script.src = '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js'
|
|
||||||
siteCountDom.value.appendChild(script)
|
|
||||||
|
|
||||||
script.onload = () => {
|
|
||||||
const tempT = setTimeout(() => {
|
|
||||||
if (getInnerText(siteCountDom.value, props.isuv)) {
|
|
||||||
isShow.value = true
|
|
||||||
}
|
|
||||||
clearTimeout(tempT)
|
|
||||||
}, 1500)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
siteCountDom,
|
|
||||||
isShow
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="stylus">
|
|
||||||
.site-count {
|
|
||||||
transition all 0.2s ease-in
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,211 +0,0 @@
|
|||||||
@import "../../style/base.styl"
|
|
||||||
|
|
||||||
$info-item-height = 68rem
|
|
||||||
$info-item-border = 1rem
|
|
||||||
$info-item-padding = 5rem
|
|
||||||
$compressed-file-background-color = #228eff
|
|
||||||
$image-width = $info-item-height - ($info-item-border * 2)
|
|
||||||
|
|
||||||
.to-upload-image-list-card {
|
|
||||||
position relative
|
|
||||||
width 100%
|
|
||||||
box-sizing border-box
|
|
||||||
margin-top 6rem
|
|
||||||
|
|
||||||
.header {
|
|
||||||
width 100%
|
|
||||||
height 30rem
|
|
||||||
box-sizing border-box
|
|
||||||
font-size 12rem
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
justify-content space-between
|
|
||||||
padding-bottom 6rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
max-height 170rem
|
|
||||||
overflow-y auto
|
|
||||||
box-sizing border-box
|
|
||||||
padding 10rem
|
|
||||||
border 1rem solid var(--border-color)
|
|
||||||
margin-top 10rem
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width 5rem
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
border-radius 2rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-uploading-info-box {
|
|
||||||
position relative
|
|
||||||
width 100%
|
|
||||||
box-sizing border-box
|
|
||||||
padding 0
|
|
||||||
margin 0
|
|
||||||
|
|
||||||
.image-uploading-info-item {
|
|
||||||
position relative
|
|
||||||
box-sizing border-box
|
|
||||||
width 100%
|
|
||||||
height $info-item-height
|
|
||||||
border $info-item-border solid var(--border-color)
|
|
||||||
border-radius 5rem
|
|
||||||
margin-bottom 10rem
|
|
||||||
overflow hidden
|
|
||||||
font-size 15rem
|
|
||||||
padding-left $image-width
|
|
||||||
transition all 0.3s ease
|
|
||||||
|
|
||||||
&.disable {
|
|
||||||
pointer-events none
|
|
||||||
cursor not-allowed
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom 0
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow 0 0 5rem var(--shadow-hover-color)
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-image-box {
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
width $image-width
|
|
||||||
height 100%
|
|
||||||
box-sizing border-box
|
|
||||||
margin-right 5rem
|
|
||||||
|
|
||||||
img {
|
|
||||||
object-fit cover
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
overflow hidden
|
|
||||||
cursor pointer
|
|
||||||
border-top-left-radius 5rem
|
|
||||||
border-bottom-left-radius 5rem
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.right-operation-box {
|
|
||||||
position relative
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
box-sizing border-box
|
|
||||||
padding $info-item-padding 20rem $info-item-padding $info-item-padding
|
|
||||||
|
|
||||||
.top, .bottom {
|
|
||||||
width 100%
|
|
||||||
height 50%
|
|
||||||
box-sizing border-box
|
|
||||||
padding 0 5rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.top {
|
|
||||||
display flex
|
|
||||||
justify-content space-between
|
|
||||||
|
|
||||||
.image-name,
|
|
||||||
.image-info {
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
box-sizing border-box
|
|
||||||
height 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-name {
|
|
||||||
font-size 13rem
|
|
||||||
overflow hidden
|
|
||||||
text-overflow ellipsis
|
|
||||||
white-space nowrap
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-info {
|
|
||||||
font-size 12rem
|
|
||||||
|
|
||||||
.item {
|
|
||||||
padding 1rem 4rem
|
|
||||||
background var(--third-background-color)
|
|
||||||
border-radius 2rem
|
|
||||||
margin-left 10rem
|
|
||||||
|
|
||||||
&.compressed {
|
|
||||||
color $compressed-file-background-color
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
|
|
||||||
&.rename-operation {
|
|
||||||
|
|
||||||
.el-checkbox {
|
|
||||||
margin-right 20rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.rename-input {
|
|
||||||
input {
|
|
||||||
height 23rem
|
|
||||||
line-height 23rem
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.upload-status-box {
|
|
||||||
box-sizing border-box
|
|
||||||
color #fff
|
|
||||||
position absolute
|
|
||||||
right -17rem
|
|
||||||
top -7rem
|
|
||||||
width 46rem
|
|
||||||
height 26rem
|
|
||||||
text-align center
|
|
||||||
transform rotate(45deg)
|
|
||||||
box-shadow 0 1rem 1rem var(--border-color)
|
|
||||||
|
|
||||||
&.wait-upload {
|
|
||||||
background var(--await-upload-color)
|
|
||||||
}
|
|
||||||
|
|
||||||
&.uploading {
|
|
||||||
background var(--uploading-color)
|
|
||||||
}
|
|
||||||
|
|
||||||
&.uploaded {
|
|
||||||
background var(--uploaded-color)
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size 12rem
|
|
||||||
margin-top 12rem
|
|
||||||
transform rotate(-45deg)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.remove-to-upload-image {
|
|
||||||
position absolute
|
|
||||||
bottom 5rem
|
|
||||||
right 5rem
|
|
||||||
cursor pointer
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,300 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="to-upload-image-list-card"
|
|
||||||
v-if="toUploadImage.list.length || userConfigInfo.selectedRepos"
|
|
||||||
>
|
|
||||||
<div class="header">
|
|
||||||
<div>
|
|
||||||
<selected-info-bar />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span v-if="toUploadImage.list.length">
|
|
||||||
已上传：{{ toUploadImage.uploadedNumber }} / {{ toUploadImage.list.length }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="body" v-if="toUploadImage.list.length">
|
|
||||||
<ul class="image-uploading-info-box">
|
|
||||||
<li
|
|
||||||
class="image-uploading-info-item"
|
|
||||||
:class="{ disable: loadingAllImage }"
|
|
||||||
v-for="(imgItem, index) in toUploadImage.list"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="left-image-box">
|
|
||||||
<img data-fancybox="gallery" :src="imgItem.imgData.base64Url" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right-operation-box">
|
|
||||||
<div class="top">
|
|
||||||
<div class="image-name">
|
|
||||||
{{ imgItem.filename.now }}
|
|
||||||
</div>
|
|
||||||
<div class="image-info">
|
|
||||||
<span class="file-size item" v-if="userSettings.isCompress">
|
|
||||||
<del>
|
|
||||||
{{ getFileSize(imgItem.fileInfo.originSize) }}
|
|
||||||
</del>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span
|
|
||||||
class="file-size item"
|
|
||||||
:class="{ compressed: userSettings.isCompress }"
|
|
||||||
>
|
|
||||||
{{ getFileSize(imgItem.fileInfo.size) }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="last-modified item">
|
|
||||||
{{ formatLastModified(imgItem.fileInfo.lastModified) }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="bottom rename-operation"
|
|
||||||
v-if="
|
|
||||||
!imgItem.uploadStatus.uploading && imgItem.uploadStatus.progress !== 100
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- 哈希化 -->
|
|
||||||
<el-checkbox
|
|
||||||
label="哈希化"
|
|
||||||
v-model="imgItem.filename.isHashRename"
|
|
||||||
@change="hashRename($event, imgItem)"
|
|
||||||
></el-checkbox>
|
|
||||||
|
|
||||||
<!-- 重命名 -->
|
|
||||||
<el-checkbox
|
|
||||||
label="重命名"
|
|
||||||
v-model="imgItem.filename.isRename"
|
|
||||||
@change="rename($event, imgItem)"
|
|
||||||
></el-checkbox>
|
|
||||||
<el-input
|
|
||||||
class="rename-input"
|
|
||||||
size="small"
|
|
||||||
v-if="imgItem.filename.isRename"
|
|
||||||
v-model="imgItem.filename.newName"
|
|
||||||
@input="rename($event, imgItem)"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
|
|
||||||
<!-- 命名前缀 -->
|
|
||||||
<el-checkbox
|
|
||||||
label="命名前缀"
|
|
||||||
v-if="
|
|
||||||
!imgItem.filename.isRename &&
|
|
||||||
userConfigInfo.defaultPrefix &&
|
|
||||||
userConfigInfo.prefixName
|
|
||||||
"
|
|
||||||
v-model="imgItem.filename.isPrefix"
|
|
||||||
@change="prefixName($event, imgItem)"
|
|
||||||
></el-checkbox>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="bottom rename-operation"
|
|
||||||
v-if="
|
|
||||||
!imgItem.uploadStatus.uploading && imgItem.uploadStatus.progress === 100
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<copy-externalLink :img-obj="imgItem.uploadedImg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="upload-status-box"
|
|
||||||
:class="{
|
|
||||||
'wait-upload':
|
|
||||||
!imgItem.uploadStatus.uploading && imgItem.uploadStatus.progress !== 100,
|
|
||||||
uploading:
|
|
||||||
imgItem.uploadStatus.uploading && imgItem.uploadStatus.progress !== 100,
|
|
||||||
uploaded:
|
|
||||||
!imgItem.uploadStatus.uploading && imgItem.uploadStatus.progress === 100
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<el-icon
|
|
||||||
v-if="
|
|
||||||
!imgItem.uploadStatus.uploading && imgItem.uploadStatus.progress !== 100
|
|
||||||
"
|
|
||||||
><Upload
|
|
||||||
/></el-icon>
|
|
||||||
|
|
||||||
<el-icon
|
|
||||||
class="is-loading"
|
|
||||||
v-if="
|
|
||||||
imgItem.uploadStatus.uploading && imgItem.uploadStatus.progress !== 100
|
|
||||||
"
|
|
||||||
><Loading
|
|
||||||
/></el-icon>
|
|
||||||
|
|
||||||
<el-icon
|
|
||||||
v-if="
|
|
||||||
!imgItem.uploadStatus.uploading && imgItem.uploadStatus.progress === 100
|
|
||||||
"
|
|
||||||
><Check
|
|
||||||
/></el-icon>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="remove-to-upload-image"
|
|
||||||
v-if="
|
|
||||||
imgItem.uploadStatus.progress !== 100 && !imgItem.uploadStatus.uploading
|
|
||||||
"
|
|
||||||
@click="removeToUploadImage(imgItem)"
|
|
||||||
>
|
|
||||||
<el-tooltip effect="dark" content="移除" placement="top">
|
|
||||||
<el-icon><Delete /></el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { computed, defineComponent, reactive, toRefs, onMounted } from 'vue'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
import { getFileSize } from '@/utils/file-handle-helper'
|
|
||||||
import { UserConfigInfoModel } from '@/common/model/user-config-info.model'
|
|
||||||
import { ToUploadImageModel, UploadStatusEnum } from '@/common/model/upload.model'
|
|
||||||
import TimeHelper from '@/utils/time-helper'
|
|
||||||
import copyExternalLink from '@/components/copy-external-link/copy-external-link.vue'
|
|
||||||
import selectedInfoBar from '@/components/selected-info-bar/selected-info-bar.vue'
|
|
||||||
import { uploadImage_single } from '@/utils/upload-helper'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'to-upload-image-card',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
copyExternalLink,
|
|
||||||
selectedInfoBar
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
loadingAllImage: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
const store = useStore()
|
|
||||||
|
|
||||||
const reactiveData = reactive({
|
|
||||||
isShowDialog: false,
|
|
||||||
curImgInfo: {
|
|
||||||
size: ''
|
|
||||||
},
|
|
||||||
|
|
||||||
userConfigInfo: computed(() => store.getters.getUserConfigInfo).value,
|
|
||||||
userSettings: computed(() => store.getters.getUserSettings).value,
|
|
||||||
toUploadImage: computed(() => store.getters.getToUploadImage).value,
|
|
||||||
|
|
||||||
hashRename(e: boolean, img: any) {
|
|
||||||
if (e) {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.filename.now = `${img.filename.name}.${img.filename.hash}.${img.filename.suffix}`
|
|
||||||
} else {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.filename.now = `${img.filename.name}.${img.filename.suffix}`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
prefixName(e: boolean, img: any) {
|
|
||||||
if (e) {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.filename.name = `${img.filename.prefixName}${img.filename.initName}`
|
|
||||||
} else {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.filename.name = `${img.filename.initName}`
|
|
||||||
}
|
|
||||||
if (img.filename.isHashRename) {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.filename.now = `${img.filename.name}.${img.filename.hash}.${img.filename.suffix}`
|
|
||||||
} else {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.filename.now = `${img.filename.name}.${img.filename.suffix}`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
rename(e: boolean, img: any) {
|
|
||||||
if (e) {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.filename.name = img.filename.newName.trim().replace(/\s+/g, '-')
|
|
||||||
} else {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
reactiveData.prefixName(img.filename.isPrefix, img) // 恢复列表prefix选项
|
|
||||||
}
|
|
||||||
|
|
||||||
if (img.filename.isHashRename) {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.filename.now = `${img.filename.name}.${img.filename.hash}.${img.filename.suffix}`
|
|
||||||
} else {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.filename.now = `${img.filename.name}.${img.filename.suffix}`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getFileSize(size: number) {
|
|
||||||
return `${getFileSize(size)} KB`
|
|
||||||
},
|
|
||||||
|
|
||||||
formatLastModified(t: number) {
|
|
||||||
return TimeHelper.formatTimestamp(t)
|
|
||||||
},
|
|
||||||
|
|
||||||
async uploadImage_all(userConfigInfo: UserConfigInfoModel) {
|
|
||||||
const uploadIndex = this.toUploadImage.uploadedNumber
|
|
||||||
|
|
||||||
if (uploadIndex >= this.toUploadImage.list.length) {
|
|
||||||
return UploadStatusEnum.uploaded
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
await uploadImage_single(userConfigInfo, this.toUploadImage.list[uploadIndex])
|
|
||||||
) {
|
|
||||||
if (uploadIndex < this.toUploadImage.list.length) {
|
|
||||||
await this.uploadImage_all(userConfigInfo)
|
|
||||||
return UploadStatusEnum.allUploaded
|
|
||||||
}
|
|
||||||
return UploadStatusEnum.uploaded
|
|
||||||
}
|
|
||||||
return UploadStatusEnum.uploadFail
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const removeToUploadImage = (imgItem: ToUploadImageModel) => {
|
|
||||||
store.dispatch('TO_UPLOAD_IMAGE_LIST_REMOVE', imgItem.uuid)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
const {
|
|
||||||
defaultHash: isHash,
|
|
||||||
defaultPrefix: isPrefix,
|
|
||||||
prefixName
|
|
||||||
} = reactiveData.userSettings
|
|
||||||
reactiveData.toUploadImage.list.forEach((v: ToUploadImageModel) => {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
v.filename.isPrefix = isPrefix
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
v.filename.prefixName = prefixName
|
|
||||||
reactiveData.prefixName(isPrefix, v)
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
v.filename.isHashRename = isHash
|
|
||||||
reactiveData.hashRename(isHash, v)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
...toRefs(reactiveData),
|
|
||||||
removeToUploadImage
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus">
|
|
||||||
@import "to-upload-image-card.styl"
|
|
||||||
</style>
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="tutorials-step-1">
|
|
||||||
<h3>
|
|
||||||
创建一个用来存储图片的
|
|
||||||
<span class="go-create-repo" @click="goCreateRepo"> GitHub 仓库</span>
|
|
||||||
</h3>
|
|
||||||
<img
|
|
||||||
src="https://cdn.staticaly.com/gh/XPoet/image-hosting@master/PicX/image.j1486dtk68n.png"
|
|
||||||
alt="Create GitHub Repository"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
function goCreateRepo() {
|
|
||||||
window.open('https://github.com/new')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus">
|
|
||||||
|
|
||||||
.tutorials-step-1 {
|
|
||||||
|
|
||||||
width 800rem
|
|
||||||
|
|
||||||
.go-create-repo {
|
|
||||||
cursor pointer
|
|
||||||
color #1c81e9
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color #085fb8
|
|
||||||
border-bottom 1rem solid #085fb8
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width 100%
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="tutorials-step-2">
|
|
||||||
<h3>
|
|
||||||
创建一个有 repo 权限的
|
|
||||||
<span class="go-create-token" @click="goCreateToken"> GitHub Token</span>
|
|
||||||
</h3>
|
|
||||||
<img
|
|
||||||
src="https://cdn.staticaly.com/gh/XPoet/image-hosting@master/PicX/image.lpt1xl9fu.png"
|
|
||||||
alt="Create GitHub Token"
|
|
||||||
/>
|
|
||||||
<p>然后点击 Generate token 按钮，即可生成一个token，如下图：</p>
|
|
||||||
<img
|
|
||||||
src="https://cdn.staticaly.com/gh/XPoet/image-hosting@master/PicX/image.pzmcp6b80fk.png"
|
|
||||||
alt="token-demo"
|
|
||||||
/>
|
|
||||||
<p style="color: red">
|
|
||||||
<em>新生成的 Token 只会显示一次，请妥善保存！如有遗失，重新生成即可。</em>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
function goCreateToken() {
|
|
||||||
window.open('https://github.com/settings/tokens/new')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus">
|
|
||||||
|
|
||||||
.tutorials-step-2 {
|
|
||||||
|
|
||||||
width 800rem
|
|
||||||
|
|
||||||
.go-create-token {
|
|
||||||
cursor pointer
|
|
||||||
color #1c81e9
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color #085fb8
|
|
||||||
border-bottom 1rem solid #085fb8
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
img {
|
|
||||||
width 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-weight bold
|
|
||||||
padding-top 20rem
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="tutorials-step-3">
|
|
||||||
<h3>进行图床配置（绑定 GitHub Token、存储图片的仓库和目录）</h3>
|
|
||||||
<p>1、填写 Token，自动获取该用户下的仓库</p>
|
|
||||||
<img
|
|
||||||
src="https://cdn.staticaly.com/gh/XPoet/image-hosting@master/PicX/image.4g8q5m7c8sq0.png"
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<p>2、在仓库的下拉列表中，选择一个作为图床的仓库</p>
|
|
||||||
<img
|
|
||||||
src="https://cdn.staticaly.com/gh/XPoet/image-hosting@master/PicX/image.746g75olruk0.png"
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<p>3、选择一种目录方式（目录即仓库里存放图片的文件夹）</p>
|
|
||||||
<img
|
|
||||||
src="https://cdn.staticaly.com/gh/XPoet/image-hosting@master/PicX/image.5ydmhgxjhgo0.png"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="dir-desc-box">
|
|
||||||
<ul>
|
|
||||||
<li>新建目录：需手动输入一个新目录。</li>
|
|
||||||
<li>根目录：图片将直接存储在仓库根目录下。</li>
|
|
||||||
<li>自动目录：自动生成日期格式 YYYYMMDD 的目录。例如：20200909</li>
|
|
||||||
<li>选择仓库目录：自动获取仓库下所有目录，选择一个即可。</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="stylus">
|
|
||||||
|
|
||||||
.tutorials-step-3 {
|
|
||||||
|
|
||||||
width 800rem
|
|
||||||
|
|
||||||
img {
|
|
||||||
width 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-weight bold
|
|
||||||
padding-top 20rem
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.dir-desc-box {
|
|
||||||
display flex
|
|
||||||
justify-content center
|
|
||||||
|
|
||||||
ul {
|
|
||||||
width 100%
|
|
||||||
padding 0
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding-top 10rem
|
|
||||||
text-align left
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
@import "../../style/base.styl"
|
|
||||||
|
|
||||||
.upload-area {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 300rem;
|
|
||||||
border: 4rem dashed var(--third-text-color)
|
|
||||||
box-sizing border-box
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 999;
|
|
||||||
|
|
||||||
&.focus {
|
|
||||||
border-color: var(--upload-area-focus-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--upload-area-focus-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="file"] {
|
|
||||||
position: absolute;
|
|
||||||
left: -9999rem;
|
|
||||||
top: -9999rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips {
|
|
||||||
text-align: center;
|
|
||||||
color: #aaa;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: 100rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
cursor: default;
|
|
||||||
font-size: 20rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
object-fit: cover;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,148 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="upload-area active-upload"
|
|
||||||
:class="{ focus: uploadAreaActive }"
|
|
||||||
@dragover.prevent
|
|
||||||
@drop.stop.prevent="onDrop"
|
|
||||||
@paste="onPaste"
|
|
||||||
v-loading="imageLoading"
|
|
||||||
element-loading-text="图片上传中..."
|
|
||||||
element-loading-background="rgba(0, 0, 0, 0.5)"
|
|
||||||
>
|
|
||||||
<label for="uploader" class="active-upload" v-if="uploadAreaActive"></label>
|
|
||||||
<input id="uploader" type="file" @change="onSelect" multiple="multiple" />
|
|
||||||
<div class="tips active-upload" v-if="!toUploadImage.curImgBase64Url">
|
|
||||||
<el-icon class="icon active-upload"><UploadFilled /></el-icon>
|
|
||||||
<div class="text active-upload">拖拽、粘贴、或点击此处上传</div>
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
class="active-upload"
|
|
||||||
v-if="toUploadImage.curImgBase64Url"
|
|
||||||
:src="toUploadImage.curImgBase64Url"
|
|
||||||
alt="Pictures to be uploaded"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { computed, defineComponent, reactive, toRefs } from 'vue'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
import { filenameHandle } from '@/utils/file-handle-helper'
|
|
||||||
import selectedFileHandle, { handleResult } from '@/utils/selected-file-handle'
|
|
||||||
import createToUploadImageObject from '@/utils/create-to-upload-image'
|
|
||||||
import paste from '@/utils/paste'
|
|
||||||
import Upload from '@/views/upload/upload.vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'upload-area',
|
|
||||||
props: {
|
|
||||||
imageLoading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
const store = useStore()
|
|
||||||
|
|
||||||
const reactiveData = reactive({
|
|
||||||
userConfigInfo: computed(() => store.getters.getUserConfigInfo).value,
|
|
||||||
userSettings: computed(() => store.getters.getUserSettings).value,
|
|
||||||
uploadAreaActive: computed((): boolean => store.getters.getUploadAreaActive),
|
|
||||||
uploadSettings: computed(() => store.getters.getUploadSettings).value,
|
|
||||||
toUploadImage: computed(() => store.getters.getToUploadImage).value,
|
|
||||||
|
|
||||||
// 选择图片
|
|
||||||
onSelect(e: any) {
|
|
||||||
store.commit('CHANGE_UPLOAD_AREA_ACTIVE', true)
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
|
||||||
for (const file of e.target.files) {
|
|
||||||
selectedFileHandle(file, this.uploadSettings.imageMaxSize)?.then((result) => {
|
|
||||||
if (!result) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const { base64, originalFile, compressFile } = result
|
|
||||||
this.getImage(base64, originalFile, compressFile)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 拖拽图片
|
|
||||||
onDrop(e: any) {
|
|
||||||
store.commit('CHANGE_UPLOAD_AREA_ACTIVE', true)
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
|
||||||
for (const file of e.dataTransfer.files) {
|
|
||||||
selectedFileHandle(file, this.uploadSettings.imageMaxSize)?.then((result) => {
|
|
||||||
if (!result) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const { base64, originalFile, compressFile } = result
|
|
||||||
this.getImage(base64, originalFile, compressFile)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 复制图片
|
|
||||||
async onPaste(e: any) {
|
|
||||||
const { base64, originalFile, compressFile }: handleResult = await paste(
|
|
||||||
e,
|
|
||||||
this.uploadSettings.imageMaxSize
|
|
||||||
)
|
|
||||||
this.getImage(base64, originalFile, compressFile)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取图片对象
|
|
||||||
getImage(base64Data: string, originFile: File, compressFile?: File) {
|
|
||||||
if (
|
|
||||||
this.toUploadImage.list.length === this.toUploadImage.uploadedNumber &&
|
|
||||||
this.toUploadImage.list.length > 0 &&
|
|
||||||
this.toUploadImage.uploadedNumber > 0
|
|
||||||
) {
|
|
||||||
store.dispatch('TO_UPLOAD_IMAGE_CLEAN_LIST')
|
|
||||||
store.dispatch('TO_UPLOAD_IMAGE_CLEAN_UPLOADED_NUMBER')
|
|
||||||
}
|
|
||||||
|
|
||||||
const { defaultHash, isCompress, defaultPrefix, prefixName } = this.userSettings
|
|
||||||
const file = isCompress ? compressFile : originFile
|
|
||||||
const curImg = createToUploadImageObject()
|
|
||||||
|
|
||||||
curImg.imgData.base64Url = base64Data
|
|
||||||
// eslint-disable-next-line prefer-destructuring
|
|
||||||
curImg.imgData.base64Content = base64Data.split(',')[1]
|
|
||||||
|
|
||||||
const { name, hash, suffix } = filenameHandle(file?.name)
|
|
||||||
curImg.uuid = hash
|
|
||||||
curImg.fileInfo.compressedSize = compressFile?.size
|
|
||||||
curImg.fileInfo.originSize = originFile.size
|
|
||||||
curImg.fileInfo.size = file?.size
|
|
||||||
curImg.fileInfo.lastModified = file?.lastModified
|
|
||||||
|
|
||||||
curImg.filename.initName = name
|
|
||||||
curImg.filename.name = defaultPrefix ? `${prefixName}${name}` : name
|
|
||||||
curImg.filename.prefixName = prefixName
|
|
||||||
curImg.filename.hash = hash
|
|
||||||
curImg.filename.suffix = suffix
|
|
||||||
curImg.filename.now = defaultHash
|
|
||||||
? `${curImg.filename.name}.${hash}.${suffix}`
|
|
||||||
: `${curImg.filename.name}.${suffix}`
|
|
||||||
curImg.filename.isHashRename = defaultHash
|
|
||||||
curImg.filename.isPrefix = defaultPrefix
|
|
||||||
|
|
||||||
store.dispatch('TO_UPLOAD_IMAGE_LIST_ADD', JSON.parse(JSON.stringify(curImg)))
|
|
||||||
store.dispatch('TO_UPLOAD_IMAGE_SET_CURRENT', {
|
|
||||||
uuid: hash,
|
|
||||||
base64Url: base64Data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
...toRefs(reactiveData)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import "upload-area.styl"
|
|
||||||
</style>
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import { createApp } from 'vue'
|
|
||||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
|
||||||
import router from '@/router/index'
|
|
||||||
import { key, store } from '@/store'
|
|
||||||
import App from './App.vue'
|
|
||||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
|
||||||
|
|
||||||
if (import.meta.env.MODE === 'production') {
|
|
||||||
// @ts-ignore
|
|
||||||
import('@/utils/register-sw.ts')
|
|
||||||
}
|
|
||||||
|
|
||||||
const app = createApp(App)
|
|
||||||
|
|
||||||
// import element-plus icons
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
|
||||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
|
||||||
app.component(key, component)
|
|
||||||
}
|
|
||||||
// @ts-ignore
|
|
||||||
app.use(router).use(store, key).mount('#app')
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
import type { Plugin } from 'vite'
|
|
||||||
import vue from '@vitejs/plugin-vue'
|
|
||||||
import AutoImport from 'unplugin-auto-import/vite'
|
|
||||||
import Components from 'unplugin-vue-components/vite'
|
|
||||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
|
||||||
import { ViteEnv } from '@/common/model/vite-config.model'
|
|
||||||
|
|
||||||
import configPWAPlugin from './pwa'
|
|
||||||
|
|
||||||
export default function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
|
|
||||||
const vitePlugins: (Plugin | Plugin[])[] = [vue()]
|
|
||||||
|
|
||||||
// On-demand import style for Element Plus
|
|
||||||
vitePlugins.push(
|
|
||||||
AutoImport({
|
|
||||||
resolvers: [ElementPlusResolver()]
|
|
||||||
}),
|
|
||||||
Components({
|
|
||||||
resolvers: [ElementPlusResolver()]
|
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
// production env
|
|
||||||
if (isBuild) {
|
|
||||||
// add plugin vite-plugin-pwa
|
|
||||||
if (viteEnv.VITE_USE_PWA) {
|
|
||||||
vitePlugins.push(configPWAPlugin(viteEnv))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return vitePlugins
|
|
||||||
}
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
/**
|
|
||||||
* Zero config PWA for Vite
|
|
||||||
* Plugin: vite-plugin-pwa
|
|
||||||
* https://github.com/antfu/vite-plugin-pwa
|
|
||||||
*/
|
|
||||||
import { VitePWA } from 'vite-plugin-pwa'
|
|
||||||
import { ViteEnv } from '@/common/model/vite-config.model'
|
|
||||||
|
|
||||||
export default function configPWAPlugin(env: ViteEnv) {
|
|
||||||
return VitePWA({
|
|
||||||
registerType: 'autoUpdate',
|
|
||||||
manifest: {
|
|
||||||
name: env.VITE_GLOB_APP_TITLE,
|
|
||||||
short_name: env.VITE_GLOB_APP_SHORT_NAME,
|
|
||||||
icons: [
|
|
||||||
{
|
|
||||||
src: './logo@192x192.png',
|
|
||||||
sizes: '192x192',
|
|
||||||
type: 'image/png'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
|
|
||||||
import config from '@/views/config/config.vue'
|
|
||||||
import upload from '@/views/upload/upload.vue'
|
|
||||||
import management from '@/views/management/management.vue'
|
|
||||||
import tutorials from '@/views/tutorials/tutorials.vue'
|
|
||||||
import settings from '@/views/settings/settings.vue'
|
|
||||||
import { store } from '@/store'
|
|
||||||
|
|
||||||
const titleSuffix = ` | PicX 图床神器`
|
|
||||||
|
|
||||||
const routes: Array<RouteRecordRaw> = [
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
name: 'index',
|
|
||||||
redirect: {
|
|
||||||
name: 'upload'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/config',
|
|
||||||
name: 'config',
|
|
||||||
component: config,
|
|
||||||
meta: {
|
|
||||||
title: `图床配置${titleSuffix}`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/upload',
|
|
||||||
name: 'upload',
|
|
||||||
component: upload,
|
|
||||||
meta: {
|
|
||||||
title: `图片上传${titleSuffix}`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/management',
|
|
||||||
name: 'Management',
|
|
||||||
component: management,
|
|
||||||
meta: {
|
|
||||||
title: `图床管理${titleSuffix}`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/tutorials',
|
|
||||||
name: 'tutorials',
|
|
||||||
component: tutorials,
|
|
||||||
meta: {
|
|
||||||
title: `使用教程${titleSuffix}`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/about',
|
|
||||||
name: 'about',
|
|
||||||
component: () => import('@/views/about/about.vue'),
|
|
||||||
meta: {
|
|
||||||
title: `帮助反馈${titleSuffix}`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/settings',
|
|
||||||
name: 'settings',
|
|
||||||
component: settings,
|
|
||||||
meta: {
|
|
||||||
title: `我的设置${titleSuffix}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const router = createRouter({
|
|
||||||
history: createWebHashHistory(),
|
|
||||||
routes
|
|
||||||
})
|
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
|
||||||
if (to.meta.title) (<any>window).document.title = to.meta.title
|
|
||||||
if (from.path === '/management') {
|
|
||||||
store.dispatch('USER_CONFIG_INFO_RESET')
|
|
||||||
}
|
|
||||||
next()
|
|
||||||
})
|
|
||||||
|
|
||||||
export default router
|
|
||||||
6
picx/src/shims-vue.d.ts
vendored
6
picx/src/shims-vue.d.ts
vendored
@@ -1,6 +0,0 @@
|
|||||||
declare module '*.vue' {
|
|
||||||
import { DefineComponent } from 'vue'
|
|
||||||
|
|
||||||
const component: DefineComponent<{}, {}, any>
|
|
||||||
export default component
|
|
||||||
}
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
import { InjectionKey } from 'vue'
|
|
||||||
import { createStore, Store, useStore as baseUseStore } from 'vuex'
|
|
||||||
import RootStateTypes, { AllStateTypes } from './types'
|
|
||||||
import dirImageListModule from './modules/dir-image-list'
|
|
||||||
import toUploadImageModule from './modules/to-upload-image'
|
|
||||||
import uploadedImageListModule from './modules/uploaded-image-list'
|
|
||||||
import userConfigInfoModule from './modules/user-config-info'
|
|
||||||
import imageViewerModule from './modules/image-viewer'
|
|
||||||
import imageCardModule from './modules/image-card'
|
|
||||||
import uploadAreaActiveModule from './modules/upload-area-active'
|
|
||||||
import uploadSettingsModule from './modules/upload-settings'
|
|
||||||
import userSettingsModule from './modules/user-settings'
|
|
||||||
|
|
||||||
// Create a new store instance.
|
|
||||||
export const store = createStore<RootStateTypes>({
|
|
||||||
modules: {
|
|
||||||
dirImageListModule,
|
|
||||||
toUploadImageModule,
|
|
||||||
uploadedImageListModule,
|
|
||||||
userConfigInfoModule,
|
|
||||||
imageViewerModule,
|
|
||||||
imageCardModule,
|
|
||||||
uploadAreaActiveModule,
|
|
||||||
uploadSettingsModule,
|
|
||||||
userSettingsModule
|
|
||||||
},
|
|
||||||
|
|
||||||
state: {
|
|
||||||
rootName: 'root'
|
|
||||||
},
|
|
||||||
|
|
||||||
mutations: {},
|
|
||||||
|
|
||||||
actions: {
|
|
||||||
// 退出登录（删除 localStorage 和 sessionStorage 数据，清空 state 的值）
|
|
||||||
LOGOUT({ dispatch, commit }) {
|
|
||||||
dispatch('DIR_IMAGE_LOGOUT')
|
|
||||||
dispatch('TO_UPLOAD_IMAGE_LOGOUT')
|
|
||||||
dispatch('UPLOADED_LIST_LOGOUT')
|
|
||||||
dispatch('USER_CONFIG_INFO_LOGOUT')
|
|
||||||
commit('IMAGE_VIEWER_LOGOUT')
|
|
||||||
commit('UPLOAD_AREA_ACTIVE_LOGOUT')
|
|
||||||
commit('UPLOAD_SETTINGS_LOGOUT')
|
|
||||||
dispatch('USER_SETTINGS_LOGOUT')
|
|
||||||
localStorage.clear()
|
|
||||||
sessionStorage.clear()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getters: {}
|
|
||||||
})
|
|
||||||
|
|
||||||
export const key: InjectionKey<Store<RootStateTypes>> = Symbol('vuex-store')
|
|
||||||
|
|
||||||
export function useStore<T = AllStateTypes>() {
|
|
||||||
return baseUseStore<T>(key)
|
|
||||||
}
|
|
||||||
@@ -1,260 +0,0 @@
|
|||||||
import { Module } from 'vuex'
|
|
||||||
import { PICX_MANAGEMENT } from '@/common/model/storage.model'
|
|
||||||
import DirImageListStateTypes, { DirObject } from './types'
|
|
||||||
import RootStateTypes from '../../types'
|
|
||||||
import {
|
|
||||||
createDirObject,
|
|
||||||
getUpLevelDirList,
|
|
||||||
getUpOneLevelDir
|
|
||||||
} from '@/store/modules/dir-image-list/utils'
|
|
||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
import { getDirContent } from '@/views/management/management.util'
|
|
||||||
|
|
||||||
const initDirObject = () => {
|
|
||||||
const dirObj = localStorage.getItem(PICX_MANAGEMENT)
|
|
||||||
return dirObj ? JSON.parse(dirObj) : createDirObject('/', '/')
|
|
||||||
}
|
|
||||||
|
|
||||||
const dirImageListModule: Module<DirImageListStateTypes, RootStateTypes> = {
|
|
||||||
state: {
|
|
||||||
name: 'dirImageListModule',
|
|
||||||
dirObject: initDirObject()
|
|
||||||
},
|
|
||||||
|
|
||||||
mutations: {},
|
|
||||||
|
|
||||||
actions: {
|
|
||||||
// 图床管理 - 增加目录
|
|
||||||
DIR_IMAGE_LIST_ADD_DIR({ state, dispatch }, dirPath: string) {
|
|
||||||
if (dirPath === '/') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const findAssign = (dirObj: DirObject, dir: string, dirPath: string) => {
|
|
||||||
if (dirObj) {
|
|
||||||
if (!dirObj.childrenDirs.some((v: DirObject) => v.dir === dir)) {
|
|
||||||
dirObj.childrenDirs.push(createDirObject(dir, dirPath))
|
|
||||||
}
|
|
||||||
const temp = dirObj.childrenDirs.find((x: DirObject) => x.dir === dir)
|
|
||||||
return temp || createDirObject(dir, dirPath)
|
|
||||||
}
|
|
||||||
return createDirObject(dir, dirPath)
|
|
||||||
}
|
|
||||||
|
|
||||||
const dirList: string[] = dirPath.split('/')
|
|
||||||
let dirPathC = ''
|
|
||||||
let tempDirObj: DirObject = state.dirObject
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-plusplus
|
|
||||||
for (let i = 0, len = dirList.length; i < len; i++) {
|
|
||||||
const dirName = dirList[i]
|
|
||||||
dirPathC += `${i > 0 ? '/' : ''}${dirName}`
|
|
||||||
tempDirObj = findAssign(tempDirObj, dirName, dirPathC)
|
|
||||||
|
|
||||||
if (i === 0) {
|
|
||||||
dispatch('USER_CONFIG_INFO_ADD_DIR', dirName)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch('DIR_IMAGE_LIST_PERSIST')
|
|
||||||
},
|
|
||||||
|
|
||||||
// 图床管理 - 删除目录
|
|
||||||
DIR_IMAGE_LIST_REMOVE_DIR({ state, dispatch }, dirPath: string) {
|
|
||||||
if (dirPath === '/') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const rmDir = (dirObj: DirObject, dir: string, isRm: boolean) => {
|
|
||||||
if (dir === '/') {
|
|
||||||
return state.dirObject
|
|
||||||
}
|
|
||||||
|
|
||||||
const temp = dirObj.childrenDirs.find((v) => v.dir === dir)
|
|
||||||
if (!temp) {
|
|
||||||
return dirObj
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isRm) {
|
|
||||||
const rmIndex = dirObj.childrenDirs.findIndex((v: any) => v.dir === dir)
|
|
||||||
if (rmIndex !== -1) {
|
|
||||||
dirObj.childrenDirs.splice(rmIndex, 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return temp
|
|
||||||
}
|
|
||||||
|
|
||||||
const dirList = dirPath.split('/')
|
|
||||||
|
|
||||||
let tempDirObj = state.dirObject
|
|
||||||
dirList.forEach((d, i) => {
|
|
||||||
tempDirObj = rmDir(tempDirObj, d, i === dirList.length - 1)
|
|
||||||
|
|
||||||
// 删除在用户配置信息模块里的目录项
|
|
||||||
if (i === 0) {
|
|
||||||
dispatch('USER_CONFIG_INFO_REMOVE_DIR', d)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
dispatch('DIR_IMAGE_LIST_PERSIST')
|
|
||||||
},
|
|
||||||
|
|
||||||
// 图床管理 - 增加图片
|
|
||||||
DIR_IMAGE_LIST_ADD_IMAGE({ state, dispatch }, item: UploadedImageModel) {
|
|
||||||
const addImg = (
|
|
||||||
dirObj: DirObject,
|
|
||||||
dir: string,
|
|
||||||
Img: UploadedImageModel,
|
|
||||||
isAdd: boolean = false
|
|
||||||
) => {
|
|
||||||
if (!dirObj) {
|
|
||||||
return state.dirObject
|
|
||||||
}
|
|
||||||
|
|
||||||
const temp = dirObj.childrenDirs?.find((x: DirObject) => x.dir === dir)
|
|
||||||
if (!temp) {
|
|
||||||
return state.dirObject
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isAdd && !temp.imageList.some((v) => v.name === Img.name)) {
|
|
||||||
temp.imageList.push(Img)
|
|
||||||
}
|
|
||||||
|
|
||||||
return temp
|
|
||||||
}
|
|
||||||
|
|
||||||
let tempDirObj: DirObject = state.dirObject
|
|
||||||
|
|
||||||
if (item.dir === '/') {
|
|
||||||
if (!tempDirObj.imageList.some((v) => v.name === item.name)) {
|
|
||||||
tempDirObj.imageList.push(item)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const dirList: string[] = item.dir.split('/')
|
|
||||||
dirList.forEach((dir, i) => {
|
|
||||||
tempDirObj = addImg(tempDirObj, dir, item, i === dirList.length - 1)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
dispatch('DIR_IMAGE_LIST_PERSIST')
|
|
||||||
},
|
|
||||||
|
|
||||||
// 图床管理 - 删除图片（即删除指定目录里的指定图片）
|
|
||||||
DIR_IMAGE_LIST_REMOVE({ state, dispatch }, item: any) {
|
|
||||||
// 删除
|
|
||||||
const rm = (list: UploadedImageModel[], uuid: string) => {
|
|
||||||
if (list.length) {
|
|
||||||
const rmIndex = list.findIndex((v: any) => v.uuid === uuid)
|
|
||||||
if (rmIndex !== -1) {
|
|
||||||
list.splice(rmIndex, 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除图片
|
|
||||||
const rmImg = (
|
|
||||||
dirObj: DirObject,
|
|
||||||
dir: string,
|
|
||||||
img: UploadedImageModel,
|
|
||||||
isRm: boolean
|
|
||||||
) => {
|
|
||||||
if (!dirObj) {
|
|
||||||
return state.dirObject
|
|
||||||
}
|
|
||||||
|
|
||||||
const temp = dirObj.childrenDirs.find((x: DirObject) => x.dir === dir)
|
|
||||||
if (!temp) {
|
|
||||||
return state.dirObject
|
|
||||||
}
|
|
||||||
|
|
||||||
if (temp.dir === dir && isRm) {
|
|
||||||
rm(temp.imageList, img.uuid)
|
|
||||||
}
|
|
||||||
|
|
||||||
return temp
|
|
||||||
}
|
|
||||||
|
|
||||||
const { dir, uuid } = item
|
|
||||||
|
|
||||||
if (dir === '/') {
|
|
||||||
rm(state.dirObject.imageList, uuid)
|
|
||||||
dispatch('DIR_IMAGE_LIST_PERSIST')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const dirList: string[] = dir.split('/')
|
|
||||||
let tempDirObj: DirObject = state.dirObject
|
|
||||||
|
|
||||||
dirList.forEach((d, i) => {
|
|
||||||
tempDirObj = rmImg(tempDirObj, d, item, i === dirList.length - 1)
|
|
||||||
if (!tempDirObj.imageList.length && !tempDirObj.childrenDirs.length) {
|
|
||||||
const dirPathList = getUpLevelDirList(tempDirObj.dirPath)
|
|
||||||
|
|
||||||
// 循环遍历判断上一级目录的内容是否为空，为空则删除，依次往上查找，直到根目录
|
|
||||||
dirPathList.forEach((dp) => {
|
|
||||||
const dpc = getDirContent(dp, state.dirObject)
|
|
||||||
if (dpc && !dpc.imageList.length && !dpc.childrenDirs.length) {
|
|
||||||
const { dirPath } = getUpOneLevelDir(dp)
|
|
||||||
dispatch('SET_USER_CONFIG_INFO', { selectedDir: dirPath })
|
|
||||||
dispatch('DIR_IMAGE_LIST_REMOVE_DIR', dp)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 图床管理 - 初始化指定目录（即删除指定目录的子目录列表和图片列表） -- OK
|
|
||||||
DIR_IMAGE_LIST_INIT_DIR({ state, dispatch }, dirPath: string) {
|
|
||||||
let tempDirObj = state.dirObject
|
|
||||||
|
|
||||||
if (dirPath === '/') {
|
|
||||||
tempDirObj.imageList = []
|
|
||||||
tempDirObj.childrenDirs = []
|
|
||||||
dispatch('DIR_IMAGE_LIST_PERSIST')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const initDirObject = (dirObj: DirObject, dir: string, isInit: boolean) => {
|
|
||||||
if (!dirObj) {
|
|
||||||
return state.dirObject
|
|
||||||
}
|
|
||||||
|
|
||||||
const temp = dirObj.childrenDirs?.find((x: DirObject) => x.dir === dir)
|
|
||||||
if (!temp) {
|
|
||||||
return state.dirObject
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isInit) {
|
|
||||||
temp.imageList = []
|
|
||||||
temp.childrenDirs = []
|
|
||||||
}
|
|
||||||
|
|
||||||
return temp
|
|
||||||
}
|
|
||||||
|
|
||||||
const dirList = dirPath.split('/')
|
|
||||||
|
|
||||||
dirList.forEach((d, i) => {
|
|
||||||
tempDirObj = initDirObject(tempDirObj, d, i === dirList.length - 1)
|
|
||||||
})
|
|
||||||
|
|
||||||
dispatch('DIR_IMAGE_LIST_PERSIST')
|
|
||||||
},
|
|
||||||
|
|
||||||
// 图床管理 - 持久化存储 -- OK
|
|
||||||
DIR_IMAGE_LIST_PERSIST({ state }) {
|
|
||||||
localStorage.setItem(PICX_MANAGEMENT, JSON.stringify(state.dirObject))
|
|
||||||
},
|
|
||||||
|
|
||||||
// 图床管理 - 退出登录
|
|
||||||
DIR_IMAGE_LOGOUT({ state }) {
|
|
||||||
state.dirObject = createDirObject('/', '/')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getters: {
|
|
||||||
getDirObject: (state: any) => state.dirObject
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default dirImageListModule
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
|
|
||||||
export interface DirObject {
|
|
||||||
type: 'dir'
|
|
||||||
dir: string
|
|
||||||
dirPath: string
|
|
||||||
childrenDirs: DirObject[]
|
|
||||||
imageList: UploadedImageModel[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export default interface DirImageListStateTypes {
|
|
||||||
name: string
|
|
||||||
dirObject: DirObject
|
|
||||||
}
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
import { DirObject } from '@/store/modules/dir-image-list/types'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 构造一个新的目录对象
|
|
||||||
* @param dir
|
|
||||||
* @param dirPath
|
|
||||||
*/
|
|
||||||
export const createDirObject = (dir: string, dirPath: string): DirObject => {
|
|
||||||
return {
|
|
||||||
type: 'dir',
|
|
||||||
dir,
|
|
||||||
dirPath,
|
|
||||||
childrenDirs: [],
|
|
||||||
imageList: []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取上一级目录
|
|
||||||
* @param dirPath
|
|
||||||
*/
|
|
||||||
export const getUpOneLevelDir = (dirPath: string) => {
|
|
||||||
if (dirPath === '/') {
|
|
||||||
return {
|
|
||||||
currentDir: '/',
|
|
||||||
dirPath: '/'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const dirList = dirPath.split('/')
|
|
||||||
|
|
||||||
if (dirList.length === 1) {
|
|
||||||
return {
|
|
||||||
currentDir: '/',
|
|
||||||
dirPath: '/'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (dirList.length > 1) {
|
|
||||||
dirList.length -= 1
|
|
||||||
return {
|
|
||||||
currentDir: dirList[dirList.length - 1],
|
|
||||||
dirPath: dirList.join('/')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
currentDir: '/',
|
|
||||||
dirPath: '/'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取上级目录列表
|
|
||||||
* @param dirPath
|
|
||||||
*/
|
|
||||||
export const getUpLevelDirList = (dirPath: string) => {
|
|
||||||
if (dirPath === '/') {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
|
|
||||||
const dirList = dirPath.split('/')
|
|
||||||
|
|
||||||
const tempL: string[] = []
|
|
||||||
let tempP = ''
|
|
||||||
|
|
||||||
dirList.forEach((d, i) => {
|
|
||||||
tempP += `${i > 0 ? '/' : ''}${d}`
|
|
||||||
tempL.unshift(tempP)
|
|
||||||
})
|
|
||||||
|
|
||||||
return tempL
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import { Module } from 'vuex'
|
|
||||||
import { ImageCardStateTypes } from './types'
|
|
||||||
import RootStateTypes from '../../types'
|
|
||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
|
|
||||||
const imageCardModule: Module<ImageCardStateTypes, RootStateTypes> = {
|
|
||||||
state: {
|
|
||||||
imgCardArr: []
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
IMAGE_CARD(state: ImageCardStateTypes, { imageObj }) {
|
|
||||||
const { uuid, checked } = imageObj
|
|
||||||
if (checked) {
|
|
||||||
state.imgCardArr.forEach((item) => {
|
|
||||||
if (item.uuid === uuid) {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
item.checked = true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
REPLACE_IMAGE_CARD(state: ImageCardStateTypes, { checkedImgArr }) {
|
|
||||||
if (checkedImgArr.length > 0) {
|
|
||||||
state.imgCardArr = checkedImgArr
|
|
||||||
} else {
|
|
||||||
state.imgCardArr = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {},
|
|
||||||
getters: {
|
|
||||||
getImageCardArr: (state: ImageCardStateTypes) => state.imgCardArr,
|
|
||||||
getImageCardCheckedArr: (state: ImageCardStateTypes) => {
|
|
||||||
return state.imgCardArr.filter((item: UploadedImageModel) => {
|
|
||||||
return item.checked
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default imageCardModule
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
|
|
||||||
export interface ImageCardStateTypes {
|
|
||||||
imgCardArr: UploadedImageModel[]
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import { Module } from 'vuex'
|
|
||||||
import ImageViewerStateTypes from './types'
|
|
||||||
import RootStateTypes from '../../types'
|
|
||||||
|
|
||||||
const imageViewerModule: Module<ImageViewerStateTypes, RootStateTypes> = {
|
|
||||||
state: {
|
|
||||||
imageViewer: {
|
|
||||||
imgInfo: null,
|
|
||||||
isShow: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
IMAGE_VIEWER(state: ImageViewerStateTypes, { imgInfo, isShow }) {
|
|
||||||
state.imageViewer.imgInfo = imgInfo
|
|
||||||
state.imageViewer.isShow = isShow
|
|
||||||
},
|
|
||||||
|
|
||||||
IMAGE_VIEWER_LOGOUT(state: ImageViewerStateTypes) {
|
|
||||||
state.imageViewer.isShow = false
|
|
||||||
state.imageViewer.imgInfo = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {},
|
|
||||||
getters: {
|
|
||||||
getImageViewer: (state: ImageViewerStateTypes) => state.imageViewer
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default imageViewerModule
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
export interface ImgInfo {
|
|
||||||
name: string
|
|
||||||
size: number
|
|
||||||
lastModified: number
|
|
||||||
url: string
|
|
||||||
}
|
|
||||||
export default interface ImageViewerStateTypes {
|
|
||||||
imageViewer: {
|
|
||||||
imgInfo: ImgInfo | null
|
|
||||||
isShow: boolean
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
import { ToUploadImageModel } from '@/common/model/upload.model'
|
|
||||||
import { Module } from 'vuex'
|
|
||||||
import ToUploadImageStateTypes from '@/store/modules/to-upload-image/types'
|
|
||||||
import RootStateTypes from '@/store/types'
|
|
||||||
|
|
||||||
const toUploadImageModule: Module<ToUploadImageStateTypes, RootStateTypes> = {
|
|
||||||
state: {
|
|
||||||
curImgBase64Url: '',
|
|
||||||
curImgUuid: '',
|
|
||||||
list: [],
|
|
||||||
uploadedNumber: 0
|
|
||||||
},
|
|
||||||
|
|
||||||
actions: {
|
|
||||||
// 要上传的图片列表 - 增加图片项
|
|
||||||
TO_UPLOAD_IMAGE_LIST_ADD({ state }, item: ToUploadImageModel) {
|
|
||||||
state.list.unshift(item)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 要上传的图片列表 - 设置当前图片的 Base64Url
|
|
||||||
TO_UPLOAD_IMAGE_SET_CURRENT({ state }, { uuid, base64Url }) {
|
|
||||||
state.curImgUuid = uuid
|
|
||||||
state.curImgBase64Url = base64Url
|
|
||||||
},
|
|
||||||
|
|
||||||
// 要上传的图片列表 - 上传完成的图片数量 +1
|
|
||||||
TO_UPLOAD_IMAGE_UPLOADED({ state }) {
|
|
||||||
state.uploadedNumber += 1
|
|
||||||
},
|
|
||||||
|
|
||||||
// 要上传的图片列表 - 删除图片项
|
|
||||||
TO_UPLOAD_IMAGE_LIST_REMOVE({ state }, uuid: string) {
|
|
||||||
if (state.list.length > 0) {
|
|
||||||
const rmIndex = state.list.findIndex((v: ToUploadImageModel) => v.uuid === uuid)
|
|
||||||
if (rmIndex !== -1) {
|
|
||||||
state.list.splice(rmIndex, 1)
|
|
||||||
}
|
|
||||||
if (state.list.length === 0) {
|
|
||||||
state.curImgBase64Url = ''
|
|
||||||
state.uploadedNumber = 0
|
|
||||||
} else if (state.curImgUuid === uuid) {
|
|
||||||
const cur = state.list[0]
|
|
||||||
state.curImgBase64Url = cur.imgData.base64Url
|
|
||||||
state.curImgUuid = cur.uuid
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 要上传的图片列表 - 上传失败时，在列表中移除已上传的图片
|
|
||||||
TO_UPLOAD_IMAGE_LIST_FAIL({ state }) {
|
|
||||||
if (state.list.length > 0) {
|
|
||||||
const temp: ToUploadImageModel[] = state.list.filter(
|
|
||||||
(v: ToUploadImageModel) => v.uploadStatus.progress !== 100
|
|
||||||
)
|
|
||||||
if (temp.length > 0) {
|
|
||||||
state.list = temp
|
|
||||||
state.uploadedNumber = 0
|
|
||||||
state.curImgBase64Url = temp[0].imgData.base64Url
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 要上传的图片列表 - 清空 Url
|
|
||||||
TO_UPLOAD_IMAGE_CLEAN_URL({ state }) {
|
|
||||||
state.curImgBase64Url = ''
|
|
||||||
},
|
|
||||||
|
|
||||||
// 要上传的图片列表 - 清空 List
|
|
||||||
TO_UPLOAD_IMAGE_CLEAN_LIST({ state }) {
|
|
||||||
state.list = []
|
|
||||||
},
|
|
||||||
|
|
||||||
// 要上传的图片列表 - 清空上传完成数量
|
|
||||||
TO_UPLOAD_IMAGE_CLEAN_UPLOADED_NUMBER({ state }) {
|
|
||||||
state.uploadedNumber = 0
|
|
||||||
},
|
|
||||||
|
|
||||||
// 要上传的图片列表 - 退出登录
|
|
||||||
TO_UPLOAD_IMAGE_LOGOUT({ state }) {
|
|
||||||
state.curImgBase64Url = ''
|
|
||||||
state.list = []
|
|
||||||
state.uploadedNumber = 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getters: {
|
|
||||||
getToUploadImageList: (state: ToUploadImageStateTypes) => state.list,
|
|
||||||
getToUploadImage: (state: ToUploadImageStateTypes) => state
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default toUploadImageModule
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
export default interface ToUploadImageStateTypes {
|
|
||||||
curImgBase64Url: string
|
|
||||||
curImgUuid: string
|
|
||||||
list: any[]
|
|
||||||
uploadedNumber: number
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { Module } from 'vuex'
|
|
||||||
import UploadAreaActiveStateTypes from './types'
|
|
||||||
import RootStateTypes from '../../types'
|
|
||||||
|
|
||||||
const uploadAreaActiveModule: Module<UploadAreaActiveStateTypes, RootStateTypes> = {
|
|
||||||
state: {
|
|
||||||
uploadAreaActive: false
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
// 修改上传区域激活状态
|
|
||||||
CHANGE_UPLOAD_AREA_ACTIVE(state: UploadAreaActiveStateTypes, isActive: boolean) {
|
|
||||||
state.uploadAreaActive = isActive
|
|
||||||
},
|
|
||||||
|
|
||||||
UPLOAD_AREA_ACTIVE_LOGOUT(state: UploadAreaActiveStateTypes) {
|
|
||||||
state.uploadAreaActive = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {},
|
|
||||||
getters: {
|
|
||||||
getUploadAreaActive: (state: UploadAreaActiveStateTypes) => state.uploadAreaActive
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default uploadAreaActiveModule
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export default interface UploadAreaActiveStateTypes {
|
|
||||||
uploadAreaActive: boolean
|
|
||||||
}
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
import { Module } from 'vuex'
|
|
||||||
import UploadAreaActiveStateTypes from './types'
|
|
||||||
import RootStateTypes from '../../types'
|
|
||||||
|
|
||||||
const uploadSettingsModule: Module<UploadAreaActiveStateTypes, RootStateTypes> = {
|
|
||||||
state: {
|
|
||||||
uploadSettings: {
|
|
||||||
isSetMaxSize: true,
|
|
||||||
imageMaxSize: 30 * 1024
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
UPLOAD_SETTINGS_LOGOUT(state: UploadAreaActiveStateTypes) {
|
|
||||||
state.uploadSettings.isSetMaxSize = true
|
|
||||||
state.uploadSettings.imageMaxSize = 50 * 1024
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {},
|
|
||||||
getters: {
|
|
||||||
getUploadSettings: (state) => state.uploadSettings
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default uploadSettingsModule
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
export default interface UploadSettingsStateTypes {
|
|
||||||
uploadSettings: {
|
|
||||||
isSetMaxSize: boolean
|
|
||||||
imageMaxSize: number
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
import { Module } from 'vuex'
|
|
||||||
import UploadedImageListStateTypes from '@/store/modules/uploaded-image-list/types'
|
|
||||||
import RootStateTypes from '@/store/types'
|
|
||||||
import { PICX_UPLOADED } from '@/common/model/storage.model'
|
|
||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
|
|
||||||
const initUploadedImageList = (): UploadedImageModel[] => {
|
|
||||||
const imageList: string | null = sessionStorage.getItem(PICX_UPLOADED)
|
|
||||||
return imageList ? JSON.parse(imageList) : []
|
|
||||||
}
|
|
||||||
|
|
||||||
const uploadedImageListModule: Module<UploadedImageListStateTypes, RootStateTypes> = {
|
|
||||||
state: {
|
|
||||||
uploadedImageList: initUploadedImageList()
|
|
||||||
},
|
|
||||||
|
|
||||||
mutations: {},
|
|
||||||
|
|
||||||
actions: {
|
|
||||||
// 上传完成的图片列表 - 增加
|
|
||||||
UPLOADED_LIST_ADD({ state, dispatch }, item: UploadedImageModel) {
|
|
||||||
state.uploadedImageList.unshift(item)
|
|
||||||
dispatch('UPLOADED_LIST_PERSIST')
|
|
||||||
},
|
|
||||||
|
|
||||||
// 上传完成的图片列表 - 删除
|
|
||||||
UPLOADED_LIST_REMOVE({ state, dispatch }, uuid: string) {
|
|
||||||
if (state.uploadedImageList.length > 0) {
|
|
||||||
const rmIndex = state.uploadedImageList.findIndex((v) => v.uuid === uuid)
|
|
||||||
if (rmIndex !== -1) {
|
|
||||||
state.uploadedImageList.splice(rmIndex, 1)
|
|
||||||
dispatch('UPLOADED_LIST_PERSIST')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 上传完成的图片列表 - 持久化
|
|
||||||
UPLOADED_LIST_PERSIST({ state }) {
|
|
||||||
sessionStorage.setItem(PICX_UPLOADED, JSON.stringify(state.uploadedImageList))
|
|
||||||
},
|
|
||||||
|
|
||||||
// 上传完成的图片列表 - 退出登录
|
|
||||||
UPLOADED_LIST_LOGOUT({ state }) {
|
|
||||||
state.uploadedImageList = []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getters: {
|
|
||||||
getUploadedImageList: (state: any) => state.uploadedImageList
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default uploadedImageListModule
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
|
|
||||||
export default interface UploadedImageListStateTypes {
|
|
||||||
uploadedImageList: UploadedImageModel[]
|
|
||||||
}
|
|
||||||
@@ -1,155 +0,0 @@
|
|||||||
import { Module } from 'vuex'
|
|
||||||
import {
|
|
||||||
BranchModeEnum,
|
|
||||||
UserConfigInfoModel
|
|
||||||
} from '@/common/model/user-config-info.model'
|
|
||||||
import { PICX_CONFIG } from '@/common/model/storage.model'
|
|
||||||
import { deepAssignObject, cleanObject } from '@/utils/object-helper'
|
|
||||||
import UserConfigInfoStateTypes from '@/store/modules/user-config-info/types'
|
|
||||||
import RootStateTypes from '@/store/types'
|
|
||||||
import { DirModeEnum } from '@/common/model/dir.model'
|
|
||||||
import TimeHelper from '@/utils/time-helper'
|
|
||||||
|
|
||||||
const initUserConfigInfo = (): UserConfigInfoModel => {
|
|
||||||
const initConfig: UserConfigInfoModel = {
|
|
||||||
token: '',
|
|
||||||
owner: '',
|
|
||||||
email: '',
|
|
||||||
name: '',
|
|
||||||
avatarUrl: '',
|
|
||||||
selectedRepos: '',
|
|
||||||
reposList: [],
|
|
||||||
branchMode: BranchModeEnum.reposBranch,
|
|
||||||
branchList: [],
|
|
||||||
selectedBranch: '',
|
|
||||||
selectedDir: '',
|
|
||||||
dirMode: DirModeEnum.reposDir,
|
|
||||||
dirList: [],
|
|
||||||
loggingStatus: false,
|
|
||||||
selectedDirList: []
|
|
||||||
}
|
|
||||||
|
|
||||||
const LSConfig: string | null = localStorage.getItem(PICX_CONFIG)
|
|
||||||
|
|
||||||
if (LSConfig) {
|
|
||||||
// Assign: oldConfig -> initConfig
|
|
||||||
deepAssignObject(initConfig, JSON.parse(LSConfig))
|
|
||||||
|
|
||||||
if (initConfig.selectedBranch && !initConfig.branchList.length) {
|
|
||||||
initConfig.branchList = [
|
|
||||||
{
|
|
||||||
value: initConfig.selectedBranch,
|
|
||||||
label: initConfig.selectedBranch
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
if (initConfig.dirMode === DirModeEnum.autoDir) {
|
|
||||||
initConfig.selectedDir = TimeHelper.getYyyyMmDd()
|
|
||||||
}
|
|
||||||
|
|
||||||
return initConfig
|
|
||||||
}
|
|
||||||
|
|
||||||
return initConfig
|
|
||||||
}
|
|
||||||
|
|
||||||
const userConfigInfoUpdate = (state: UserConfigInfoStateTypes): void => {
|
|
||||||
const { selectedDir, selectedBranch, dirMode } = state.userConfigInfo
|
|
||||||
if (dirMode === 'newDir') {
|
|
||||||
const strList = selectedDir.split('')
|
|
||||||
let count = 0
|
|
||||||
let newStr = ''
|
|
||||||
// eslint-disable-next-line no-plusplus
|
|
||||||
for (let i = 0; i < strList.length; i++) {
|
|
||||||
if (strList[i] === ' ' || strList[i] === '.' || strList[i] === '、') {
|
|
||||||
strList[i] = '-'
|
|
||||||
}
|
|
||||||
if (strList[i] === '/') {
|
|
||||||
count += 1
|
|
||||||
}
|
|
||||||
if (count >= 3) {
|
|
||||||
break
|
|
||||||
}
|
|
||||||
newStr += strList[i]
|
|
||||||
}
|
|
||||||
state.userConfigInfo.selectedDir = newStr
|
|
||||||
}
|
|
||||||
state.userConfigInfo.selectedBranch = selectedBranch.replace(/\s+/g, '-')
|
|
||||||
}
|
|
||||||
|
|
||||||
const userConfigInfoModule: Module<UserConfigInfoStateTypes, RootStateTypes> = {
|
|
||||||
state: {
|
|
||||||
userConfigInfo: initUserConfigInfo()
|
|
||||||
},
|
|
||||||
|
|
||||||
actions: {
|
|
||||||
// 持久化状态获取
|
|
||||||
USER_CONFIG_INFO_RESET({ state }) {
|
|
||||||
state.userConfigInfo = initUserConfigInfo()
|
|
||||||
},
|
|
||||||
// 设置用户配置信息
|
|
||||||
SET_USER_CONFIG_INFO(
|
|
||||||
{ state, dispatch },
|
|
||||||
configInfo: UserConfigInfoStateTypes,
|
|
||||||
needPersist: boolean = true
|
|
||||||
) {
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
|
||||||
for (const key in configInfo) {
|
|
||||||
// eslint-disable-next-line no-prototype-builtins
|
|
||||||
if (state.userConfigInfo.hasOwnProperty(key)) {
|
|
||||||
// @ts-ignore
|
|
||||||
state.userConfigInfo[key] = configInfo[key]
|
|
||||||
} else if (key === 'needPersist') {
|
|
||||||
// eslint-disable-next-line
|
|
||||||
needPersist = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!needPersist) return
|
|
||||||
dispatch('USER_CONFIG_INFO_PERSIST')
|
|
||||||
},
|
|
||||||
|
|
||||||
// 用户配置信息 - 增加目录
|
|
||||||
USER_CONFIG_INFO_ADD_DIR({ state, dispatch }, dir: string) {
|
|
||||||
if (!state.userConfigInfo.dirList.some((v: any) => v.value === dir)) {
|
|
||||||
state.userConfigInfo.dirList.push({ label: dir, value: dir })
|
|
||||||
dispatch('USER_CONFIG_INFO_PERSIST')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 用户配置信息 - 删除目录列表的某个目录
|
|
||||||
USER_CONFIG_INFO_REMOVE_DIR({ state, dispatch }, dir: string) {
|
|
||||||
const { dirList } = state.userConfigInfo
|
|
||||||
if (dirList.some((v: any) => v.value === dir)) {
|
|
||||||
const rmIndex = dirList.findIndex((v: any) => v.value === dir)
|
|
||||||
dirList.splice(rmIndex, 1)
|
|
||||||
dispatch('USER_CONFIG_INFO_PERSIST')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 持久化用户配置信息
|
|
||||||
USER_CONFIG_INFO_PERSIST({ state }) {
|
|
||||||
userConfigInfoUpdate(state)
|
|
||||||
localStorage.setItem(PICX_CONFIG, JSON.stringify(state.userConfigInfo))
|
|
||||||
},
|
|
||||||
|
|
||||||
// 修改 userConfigInfo 但无需持久化 (目前提供图床管理页面使用)
|
|
||||||
USER_CONFIG_INFO_NOT_PERSIST({ state }) {
|
|
||||||
userConfigInfoUpdate(state)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 退出登录
|
|
||||||
USER_CONFIG_INFO_LOGOUT({ state }) {
|
|
||||||
cleanObject(state.userConfigInfo)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getters: {
|
|
||||||
getUserLoggingStatus: (state: UserConfigInfoStateTypes): boolean =>
|
|
||||||
state.userConfigInfo.loggingStatus,
|
|
||||||
getUserConfigInfo: (state: UserConfigInfoStateTypes): UserConfigInfoModel =>
|
|
||||||
state.userConfigInfo
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default userConfigInfoModule
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import { UserConfigInfoModel } from '@/common/model/user-config-info.model'
|
|
||||||
|
|
||||||
export default interface UserConfigInfoStateTypes {
|
|
||||||
userConfigInfo: UserConfigInfoModel
|
|
||||||
}
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
import { Module } from 'vuex'
|
|
||||||
import { PICX_SETTINGS } from '@/common/model/storage.model'
|
|
||||||
import { deepAssignObject } from '@/utils/object-helper'
|
|
||||||
import UserConfigInfoStateTypes from '@/store/modules/user-config-info/types'
|
|
||||||
import RootStateTypes from '@/store/types'
|
|
||||||
import { CompressEncoderMap } from '@/utils/compress'
|
|
||||||
import { UserSettingsModel } from '@/common/model/user-settings.model'
|
|
||||||
import UserSettingsStateTypes from '@/store/modules/user-settings/types'
|
|
||||||
import { getLocalItem } from '@/utils/common-utils'
|
|
||||||
import ExternalLinkType from '@/common/model/external-link.model'
|
|
||||||
|
|
||||||
const initSettings: UserSettingsModel = {
|
|
||||||
defaultHash: true,
|
|
||||||
defaultMarkdown: false,
|
|
||||||
defaultPrefix: false,
|
|
||||||
prefixName: '',
|
|
||||||
isCompress: true,
|
|
||||||
compressEncoder: CompressEncoderMap.webP,
|
|
||||||
themeMode: 'light',
|
|
||||||
autoLightThemeTime: ['08:00', '19:00'],
|
|
||||||
elementPlusSize: 'default',
|
|
||||||
externalLinkType: ExternalLinkType.staticaly
|
|
||||||
}
|
|
||||||
|
|
||||||
const initUserSettings = (): UserSettingsModel => {
|
|
||||||
const LSSettings = getLocalItem(PICX_SETTINGS)
|
|
||||||
if (LSSettings) {
|
|
||||||
deepAssignObject(initSettings, LSSettings)
|
|
||||||
}
|
|
||||||
return initSettings
|
|
||||||
}
|
|
||||||
|
|
||||||
const userSettingsModule: Module<UserSettingsStateTypes, RootStateTypes> = {
|
|
||||||
state: {
|
|
||||||
userSettings: initUserSettings()
|
|
||||||
},
|
|
||||||
|
|
||||||
actions: {
|
|
||||||
// 设置
|
|
||||||
SET_USER_SETTINGS({ state }, configInfo: UserConfigInfoStateTypes) {
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
|
||||||
for (const key in configInfo) {
|
|
||||||
// eslint-disable-next-line no-prototype-builtins
|
|
||||||
if (state.userSettings.hasOwnProperty(key)) {
|
|
||||||
// @ts-ignore
|
|
||||||
state.userSettings[key] = configInfo[key]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 持久化
|
|
||||||
USER_SETTINGS_PERSIST({ state }) {
|
|
||||||
localStorage.setItem(PICX_SETTINGS, JSON.stringify(state.userSettings))
|
|
||||||
},
|
|
||||||
|
|
||||||
// 退出登录
|
|
||||||
USER_SETTINGS_LOGOUT({ state }) {
|
|
||||||
state.userSettings = initSettings
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getters: {
|
|
||||||
getUserSettings: (state): UserSettingsModel => state.userSettings
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default userSettingsModule
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import { UserSettingsModel } from '@/common/model/user-settings.model'
|
|
||||||
|
|
||||||
export default interface UserSettingsStateTypes {
|
|
||||||
userSettings: UserSettingsModel
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import DirImageListStateTypes from './modules/dir-image-list/types'
|
|
||||||
import ToUploadImageStateTypes from './modules/to-upload-image/types'
|
|
||||||
import UploadedImageListStateTypes from './modules/uploaded-image-list/types'
|
|
||||||
import UserConfigInfoStateTypes from './modules/user-config-info/types'
|
|
||||||
import ImageViewerStateTypes from './modules/image-viewer/types'
|
|
||||||
import UploadAreaActiveStateTypes from './modules/upload-area-active/types'
|
|
||||||
import UploadSettingsStateTypes from './modules/upload-settings/types'
|
|
||||||
|
|
||||||
export default interface RootStateTypes {
|
|
||||||
rootName: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AllStateTypes extends RootStateTypes {
|
|
||||||
dirImageListModule: DirImageListStateTypes
|
|
||||||
toUploadImageModule: ToUploadImageStateTypes
|
|
||||||
uploadedImageListModule: UploadedImageListStateTypes
|
|
||||||
userConfigInfoModule: UserConfigInfoStateTypes
|
|
||||||
imageViewerModule: ImageViewerStateTypes
|
|
||||||
uploadAreaActiveModule: UploadAreaActiveStateTypes
|
|
||||||
uploadSettingsModule: UploadSettingsStateTypes
|
|
||||||
}
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
@import './theme.styl'
|
|
||||||
@import './variables.styl'
|
|
||||||
|
|
||||||
$component-interval = 16rem
|
|
||||||
$box-border-radius = 6rem
|
|
||||||
$content-max-width = 888rem
|
|
||||||
$scrollbar-size = 8rem
|
|
||||||
|
|
||||||
:root {
|
|
||||||
font-size 1px
|
|
||||||
|
|
||||||
+picx-tablet() {
|
|
||||||
font-size 0.9px
|
|
||||||
}
|
|
||||||
|
|
||||||
+picx-mobile() {
|
|
||||||
font-size 0.8px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
position relative
|
|
||||||
padding 0
|
|
||||||
margin 0
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
color var(--default-text-color)
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration none
|
|
||||||
font-size 1.5rem
|
|
||||||
color var(--default-text-color)
|
|
||||||
}
|
|
||||||
|
|
||||||
a:link {
|
|
||||||
color var(--default-text-color)
|
|
||||||
text-decoration none
|
|
||||||
}
|
|
||||||
|
|
||||||
ul, ol, li {
|
|
||||||
list-style none
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
height $scrollbar-size
|
|
||||||
width $scrollbar-size
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background var(--scrollbar-color)
|
|
||||||
border-radius $box-border-radius
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background transparent
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.flex-center {
|
|
||||||
display flex
|
|
||||||
justify-content center
|
|
||||||
align-items center
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.flex-start {
|
|
||||||
display flex
|
|
||||||
justify-content flex-start
|
|
||||||
align-items center
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.page-container {
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
box-sizing border-box
|
|
||||||
padding 30rem
|
|
||||||
background var(--background-color)
|
|
||||||
border-top-left-radius $box-border-radius
|
|
||||||
border-top-right-radius $box-border-radius
|
|
||||||
overflow-y auto
|
|
||||||
}
|
|
||||||
|
|
||||||
.clear {
|
|
||||||
&::after {
|
|
||||||
content ''
|
|
||||||
display block
|
|
||||||
clear both
|
|
||||||
visibility hidden
|
|
||||||
overflow hidden
|
|
||||||
height 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
@import './variables.styl'
|
|
||||||
|
|
||||||
:root {
|
|
||||||
root-color('light')
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme light) {
|
|
||||||
:root {
|
|
||||||
root-color('light')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme dark) {
|
|
||||||
:root {
|
|
||||||
root-color('dark')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.light {
|
|
||||||
root-color('light')
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
root-color('dark')
|
|
||||||
}
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
// ========================================================================================
|
|
||||||
// media query
|
|
||||||
// ========================================================================================
|
|
||||||
$media-max-width-tablet = 800px; // media query max width (tablet)
|
|
||||||
$media-max-width-mobile = 500px; // media query max width (mobile)
|
|
||||||
|
|
||||||
picx-tablet()
|
|
||||||
@media (max-width: $media-max-width-tablet)
|
|
||||||
{ block }
|
|
||||||
|
|
||||||
picx-mobile()
|
|
||||||
@media (max-width: $media-max-width-mobile)
|
|
||||||
{ block }
|
|
||||||
|
|
||||||
|
|
||||||
// ========================================================================================
|
|
||||||
// z-index
|
|
||||||
// ========================================================================================
|
|
||||||
$z-index-1 = 1001;
|
|
||||||
$z-index-2 = 1002;
|
|
||||||
$z-index-3 = 1003;
|
|
||||||
$z-index-4 = 1004;
|
|
||||||
$z-index-5 = 1005;
|
|
||||||
$z-index-6 = 1006;
|
|
||||||
$z-index-7 = 1007;
|
|
||||||
$z-index-8 = 1008;
|
|
||||||
$z-index-9 = 1009;
|
|
||||||
|
|
||||||
|
|
||||||
// ========================================================================================
|
|
||||||
// light mode color
|
|
||||||
// ========================================================================================
|
|
||||||
$primary-color = #0066CC;
|
|
||||||
$background-color = #fff;
|
|
||||||
$second-background-color = darken($background-color, 5%);
|
|
||||||
$third-background-color = darken($background-color, 10%);
|
|
||||||
$default-text-color = #50505c;
|
|
||||||
$first-text-color = darken($default-text-color, 10%);
|
|
||||||
$second-text-color = darken($default-text-color, 5%);
|
|
||||||
$third-text-color = lighten($default-text-color, 30%);
|
|
||||||
$fourth-text-color = lighten($default-text-color, 90%);
|
|
||||||
$border-color = darken($background-color, 30%);
|
|
||||||
$selection-color = lighten($primary-color, 10%);
|
|
||||||
$shadow-color = rgba(0, 0, 0, 0.2);
|
|
||||||
$shadow-hover-color = rgba(0, 0, 0, 0.28);
|
|
||||||
$scrollbar-color = darken($background-color, 20%);
|
|
||||||
$scroll-bar-bg-color = darken($background-color, 30%);
|
|
||||||
$upload-area-focus-color = #0066CC;
|
|
||||||
$await-upload-color = #E6A23C;
|
|
||||||
$uploading-color = #409EFF;
|
|
||||||
$uploaded-color = #67C23A;
|
|
||||||
$markdown-icon-color = #808080;
|
|
||||||
$markdown-icon-active-color = darken($markdown-icon-color, 30%);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ========================================================================================
|
|
||||||
// dark mode color
|
|
||||||
// ========================================================================================
|
|
||||||
$dark-primary-color = #0066CC;
|
|
||||||
$dark-background-color = #2a2a2f;
|
|
||||||
$dark-second-background-color = darken($dark-background-color, 10%);
|
|
||||||
$dark-third-background-color = darken($dark-background-color, 15%);
|
|
||||||
$dark-default-text-color = #bebec6;
|
|
||||||
$dark-first-text-color = lighten($dark-default-text-color, 30%);
|
|
||||||
$dark-second-text-color = lighten($dark-default-text-color, 20%);
|
|
||||||
$dark-third-text-color = darken($dark-default-text-color, 20%);
|
|
||||||
$dark-fourth-text-color = darken($dark-default-text-color, 80%);
|
|
||||||
$dark-border-color = lighten($dark-background-color, 20%);
|
|
||||||
$dark-selection-color = $selection-color;
|
|
||||||
$dark-shadow-color = rgba(128, 128, 128, 0.2);
|
|
||||||
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28);
|
|
||||||
$dark-scrollbar-color = darken($dark-background-color, 20%);
|
|
||||||
$dark-scroll-bar-bg-color = lighten($dark-background-color, 30%);
|
|
||||||
$dark-upload-area-focus-color = #1070d0;
|
|
||||||
$dark-await-upload-color = #c08327;
|
|
||||||
$dark-uploading-color = #287dd5;
|
|
||||||
$dark-uploaded-color = #55b626;
|
|
||||||
$dark-markdown-icon-color = #aaa;
|
|
||||||
$dark-markdown-icon-active-color = lighten($dark-markdown-icon-color, 30%);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ========================================================================
|
|
||||||
// light/dark mode color
|
|
||||||
// ========================================================================
|
|
||||||
root-color(mode) {
|
|
||||||
--background-color: mode == 'light' ? $background-color : $dark-background-color;
|
|
||||||
--second-background-color: mode == 'light' ? $second-background-color : $dark-second-background-color;
|
|
||||||
--third-background-color: mode == 'light' ? $third-background-color : $dark-third-background-color;
|
|
||||||
--primary-color: mode == 'light' ? $primary-color : $dark-primary-color;
|
|
||||||
--first-text-color: mode == 'light' ? $first-text-color : $dark-first-text-color;
|
|
||||||
--second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color;
|
|
||||||
--third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color;
|
|
||||||
--fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color;
|
|
||||||
--default-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color;
|
|
||||||
--border-color: mode == 'light' ? $border-color : $dark-border-color;
|
|
||||||
--selection-color: mode == 'light' ? $selection-color : $dark-selection-color;
|
|
||||||
--shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color;
|
|
||||||
--shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color;
|
|
||||||
--scrollbar-color: mode == 'light' ? $scrollbar-color : $dark-scrollbar-color;
|
|
||||||
--scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color;
|
|
||||||
--upload-area-focus-color : mode == 'light' ? $upload-area-focus-color : $dark-upload-area-focus-color;
|
|
||||||
--await-upload-color : mode == 'light' ? $await-upload-color : $dark-await-upload-color;
|
|
||||||
--uploading-color : mode == 'light' ? $uploading-color : $dark-uploading-color;
|
|
||||||
--uploaded-color : mode == 'light' ? $uploaded-color : $dark-uploaded-color;
|
|
||||||
--markdown-icon-color : mode == 'light' ? $markdown-icon-color : $dark-markdown-icon-color;
|
|
||||||
--markdown-icon-active-color : mode == 'light' ? $markdown-icon-active-color : $dark-markdown-icon-active-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
import Axios from 'axios'
|
|
||||||
import { PICX_CONFIG } from '@/common/model/storage.model'
|
|
||||||
|
|
||||||
const baseURL = 'https://api.github.com'
|
|
||||||
|
|
||||||
const axios = Axios.create({
|
|
||||||
baseURL,
|
|
||||||
timeout: 300000 // request timeout 请求超时 5m
|
|
||||||
})
|
|
||||||
|
|
||||||
axios.defaults.headers['Content-Type'] = 'application/json'
|
|
||||||
|
|
||||||
// 发起请求之前的拦截器（前置拦截）
|
|
||||||
axios.interceptors.request.use(
|
|
||||||
(config) => {
|
|
||||||
const userConfig = localStorage.getItem(PICX_CONFIG)
|
|
||||||
|
|
||||||
if (userConfig) {
|
|
||||||
const { token } = JSON.parse(userConfig)
|
|
||||||
if (token) {
|
|
||||||
config.headers.Authorization = `token ${token}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return config
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
return Promise.reject(error)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
// 响应拦截器
|
|
||||||
axios.interceptors.response.use(
|
|
||||||
(response) => {
|
|
||||||
return response
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
if (error.response && error.response.data) {
|
|
||||||
const code = error.response.status
|
|
||||||
const msg = error.response.data.message
|
|
||||||
ElMessage.error(`Code: ${code}, Message: ${msg}`)
|
|
||||||
console.error(`[PicX Error]`, error.response)
|
|
||||||
} else {
|
|
||||||
ElMessage.error(`${error}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
return error.response
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export default axios
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
/**
|
|
||||||
* Get JavaScript basic data types
|
|
||||||
* @param data
|
|
||||||
* @returns {string} array | string | number ...
|
|
||||||
*/
|
|
||||||
export const getType = (data: string) => {
|
|
||||||
const type = Object.prototype.toString.call(data).split(' ')[1]
|
|
||||||
return type.substring(0, type.length - 1).toLowerCase()
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets a string(uuid) that is not repeated
|
|
||||||
* @returns uuid {string}
|
|
||||||
*/
|
|
||||||
export const getUuid = () => {
|
|
||||||
return Number(Math.random().toString().substr(2, 5) + Date.now()).toString(36)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* get localStorage value
|
|
||||||
* @param key
|
|
||||||
* @returns {*}
|
|
||||||
*/
|
|
||||||
export const getLocalItem = (key: string) => {
|
|
||||||
const temp = window.localStorage.getItem(key)
|
|
||||||
return temp ? JSON.parse(temp) : null
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
import Compress from '@yireen/squoosh-browser'
|
|
||||||
import {
|
|
||||||
defaultPreprocessorState,
|
|
||||||
defaultProcessorState,
|
|
||||||
encoderMap,
|
|
||||||
EncoderState
|
|
||||||
} from '@yireen/squoosh-browser/dist/client/lazy-app/feature-meta'
|
|
||||||
|
|
||||||
export enum CompressEncoderMap {
|
|
||||||
mozJPEG = 'mozJPEG',
|
|
||||||
avif = 'avif',
|
|
||||||
webP = 'webP'
|
|
||||||
}
|
|
||||||
|
|
||||||
export const compress = async (file: File, encoder: CompressEncoderMap) => {
|
|
||||||
const compress = new Compress(file, {
|
|
||||||
encoderState: {
|
|
||||||
type: encoder,
|
|
||||||
options: encoderMap[encoder].meta.defaultOptions
|
|
||||||
} as EncoderState,
|
|
||||||
processorState: defaultProcessorState,
|
|
||||||
preprocessorState: defaultPreprocessorState
|
|
||||||
})
|
|
||||||
|
|
||||||
return compress.process()
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
import { ToUploadImageModel } from '../common/model/upload.model'
|
|
||||||
|
|
||||||
export default (): ToUploadImageModel => {
|
|
||||||
return {
|
|
||||||
uuid: '',
|
|
||||||
|
|
||||||
uploadStatus: {
|
|
||||||
progress: 0,
|
|
||||||
uploading: false
|
|
||||||
},
|
|
||||||
|
|
||||||
imgData: {
|
|
||||||
base64Content: '',
|
|
||||||
base64Url: ''
|
|
||||||
},
|
|
||||||
|
|
||||||
fileInfo: {
|
|
||||||
size: 0,
|
|
||||||
lastModified: 0
|
|
||||||
},
|
|
||||||
|
|
||||||
filename: {
|
|
||||||
name: '',
|
|
||||||
hash: '',
|
|
||||||
suffix: '',
|
|
||||||
prefixName: '',
|
|
||||||
now: '',
|
|
||||||
initName: '',
|
|
||||||
newName: 'xxx',
|
|
||||||
isHashRename: true,
|
|
||||||
isRename: false,
|
|
||||||
isPrefix: false
|
|
||||||
},
|
|
||||||
|
|
||||||
externalLink: {
|
|
||||||
github: '',
|
|
||||||
jsdelivr: '',
|
|
||||||
staticaly: '',
|
|
||||||
cloudflare: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
import { UploadedImageModel } from '../common/model/upload.model'
|
|
||||||
import { UserConfigInfoModel } from '../common/model/user-config-info.model'
|
|
||||||
import axios from '@/utils/axios'
|
|
||||||
import { deleteStatusEnum } from '../common/model/delete.model'
|
|
||||||
import { store } from '@/store'
|
|
||||||
|
|
||||||
let deleteIndex = 0
|
|
||||||
|
|
||||||
export async function deleteSingleImage(
|
|
||||||
imageObj: UploadedImageModel,
|
|
||||||
userConfigInfo: UserConfigInfoModel
|
|
||||||
): Promise<boolean> {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
imageObj.deleting = true
|
|
||||||
const { owner, selectedRepos } = userConfigInfo
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
axios
|
|
||||||
.delete(`/repos/${owner}/${selectedRepos}/contents/${imageObj.path}`, {
|
|
||||||
data: {
|
|
||||||
owner,
|
|
||||||
repo: selectedRepos,
|
|
||||||
path: imageObj.path,
|
|
||||||
message: 'delete picture via PicX(https://github.com/XPoet/picx)',
|
|
||||||
sha: imageObj.sha
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
if (res && res.status === 200) {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
imageObj.deleting = false
|
|
||||||
store.dispatch('UPLOADED_LIST_REMOVE', imageObj.uuid)
|
|
||||||
store.dispatch('DIR_IMAGE_LIST_REMOVE', imageObj)
|
|
||||||
resolve(true)
|
|
||||||
} else {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
imageObj.deleting = false
|
|
||||||
resolve(false)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
reject(err)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function delelteBatchImage(
|
|
||||||
imgCardArr: Array<UploadedImageModel>,
|
|
||||||
userConfigInfo: UserConfigInfoModel
|
|
||||||
) {
|
|
||||||
if (deleteIndex >= imgCardArr.length) {
|
|
||||||
return deleteStatusEnum.deleted
|
|
||||||
}
|
|
||||||
if (await deleteSingleImage(imgCardArr[deleteIndex], userConfigInfo)) {
|
|
||||||
if (deleteIndex < imgCardArr.length) {
|
|
||||||
deleteIndex += 1
|
|
||||||
if (await delelteBatchImage(imgCardArr, userConfigInfo)) {
|
|
||||||
deleteIndex = 0
|
|
||||||
return deleteStatusEnum.allDeleted
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return deleteStatusEnum.deleted
|
|
||||||
}
|
|
||||||
return deleteStatusEnum.deleteFail
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
/* eslint-disable no-restricted-syntax */
|
|
||||||
import { Recordable, ViteEnv } from '@/common/model/vite-config.model'
|
|
||||||
|
|
||||||
// Read all environment variable configuration files to process.env
|
|
||||||
export default function wrapperEnv(envConf: Recordable): ViteEnv {
|
|
||||||
const ret: any = {}
|
|
||||||
|
|
||||||
for (const envName of Object.keys(envConf)) {
|
|
||||||
let realName = envConf[envName].replace(/\\n/g, '\n')
|
|
||||||
if (realName === 'true') {
|
|
||||||
realName = true
|
|
||||||
} else if (realName === 'false') {
|
|
||||||
realName = false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (envName === 'VITE_PORT') {
|
|
||||||
realName = Number(realName)
|
|
||||||
}
|
|
||||||
ret[envName] = realName
|
|
||||||
process.env[envName] = realName
|
|
||||||
}
|
|
||||||
return ret
|
|
||||||
}
|
|
||||||
@@ -1,178 +0,0 @@
|
|||||||
import ExternalLinkType from '@/common/model/external-link.model'
|
|
||||||
import { UserConfigInfoModel } from '@/common/model/user-config-info.model'
|
|
||||||
import { getFilename } from '@/utils/file-handle-helper'
|
|
||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 创建承载图片外链文本的 DOM 元素
|
|
||||||
*/
|
|
||||||
export const createExternalLinkDom = () => {
|
|
||||||
let externalLinkDom: any = document.querySelector('.temp-external-link-txt')
|
|
||||||
if (!externalLinkDom) {
|
|
||||||
externalLinkDom = document.createElement('textarea')
|
|
||||||
externalLinkDom.setAttribute('class', 'temp-external-link-txt')
|
|
||||||
externalLinkDom.style.position = 'absolute'
|
|
||||||
externalLinkDom.style.top = '-99999rem'
|
|
||||||
externalLinkDom.style.left = '-99999rem'
|
|
||||||
document.body.appendChild(externalLinkDom)
|
|
||||||
}
|
|
||||||
return externalLinkDom
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 生成图片外链
|
|
||||||
* @param type
|
|
||||||
* @param content
|
|
||||||
* @param config
|
|
||||||
*/
|
|
||||||
export const generateExternalLink = (
|
|
||||||
type: ExternalLinkType,
|
|
||||||
content: any,
|
|
||||||
config: UserConfigInfoModel
|
|
||||||
): string => {
|
|
||||||
const staticalyLink: string = `https://cdn.staticaly.com/gh/${config.owner}/${config.selectedRepos}@${config.selectedBranch}/${content.path}`
|
|
||||||
const cloudflareLink: string = `https://git.poker/${config.owner}/${config.selectedRepos}/blob/${config.selectedBranch}/${content.path}?raw=true`
|
|
||||||
const jsdelivrLink: string = `https://cdn.jsdelivr.net/gh/${config.owner}/${config.selectedRepos}@${config.selectedBranch}/${content.path}`
|
|
||||||
const githubLink: string = decodeURI(content.download_url)
|
|
||||||
|
|
||||||
// eslint-disable-next-line default-case
|
|
||||||
switch (type) {
|
|
||||||
case ExternalLinkType.staticaly:
|
|
||||||
return staticalyLink
|
|
||||||
|
|
||||||
case ExternalLinkType.cloudflare:
|
|
||||||
return cloudflareLink
|
|
||||||
|
|
||||||
case ExternalLinkType.jsdelivr:
|
|
||||||
return jsdelivrLink
|
|
||||||
|
|
||||||
case ExternalLinkType.github:
|
|
||||||
return githubLink
|
|
||||||
|
|
||||||
default:
|
|
||||||
return githubLink
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 图片外链转换为 Markdown 格式
|
|
||||||
* @param name 图片名
|
|
||||||
* @param url 图片外链
|
|
||||||
*/
|
|
||||||
export const formatMarkdown = (name: string, url: string): string => {
|
|
||||||
return ``
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 复制图片外链
|
|
||||||
* @param img 图片对象
|
|
||||||
* @param type CDN 类型
|
|
||||||
*/
|
|
||||||
export const copyExternalLink = (img: UploadedImageModel, type: ExternalLinkType) => {
|
|
||||||
let externalLink = ''
|
|
||||||
let successInfo = ''
|
|
||||||
const { name, is_transform_md: isMD } = img
|
|
||||||
|
|
||||||
switch (type) {
|
|
||||||
case ExternalLinkType.jsdelivr:
|
|
||||||
if (isMD) {
|
|
||||||
externalLink = formatMarkdown(name, img.jsdelivr_cdn_url)
|
|
||||||
successInfo = 'Markdown 格式的 jsDelivr CDN'
|
|
||||||
} else {
|
|
||||||
externalLink = img.jsdelivr_cdn_url
|
|
||||||
successInfo = 'jsDelivr CDN'
|
|
||||||
}
|
|
||||||
break
|
|
||||||
|
|
||||||
case ExternalLinkType.staticaly:
|
|
||||||
if (isMD) {
|
|
||||||
externalLink = formatMarkdown(name, img.staticaly_cdn_url)
|
|
||||||
successInfo = 'Markdown 格式的 Staticaly CDN'
|
|
||||||
} else {
|
|
||||||
externalLink = img.staticaly_cdn_url
|
|
||||||
successInfo = 'Staticaly CDN'
|
|
||||||
}
|
|
||||||
break
|
|
||||||
|
|
||||||
case ExternalLinkType.cloudflare:
|
|
||||||
if (isMD) {
|
|
||||||
externalLink = formatMarkdown(name, img.cloudflare_cdn_url)
|
|
||||||
successInfo = 'Markdown 格式的 Cloudflare CDN'
|
|
||||||
} else {
|
|
||||||
externalLink = img.cloudflare_cdn_url
|
|
||||||
successInfo = 'Cloudflare CDN'
|
|
||||||
}
|
|
||||||
break
|
|
||||||
|
|
||||||
default:
|
|
||||||
if (isMD) {
|
|
||||||
externalLink = formatMarkdown(name, img.github_url)
|
|
||||||
successInfo = 'Markdown 格式的 GitHub'
|
|
||||||
} else {
|
|
||||||
externalLink = img.github_url
|
|
||||||
successInfo = 'GitHub'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const externalLinkDom: any = createExternalLinkDom()
|
|
||||||
|
|
||||||
externalLinkDom.value = externalLink
|
|
||||||
externalLinkDom.select()
|
|
||||||
document.execCommand('copy')
|
|
||||||
ElMessage.success(`${successInfo} 外链复制成功！`)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 批量复制图片外链
|
|
||||||
* @param imgCardList 图片列表
|
|
||||||
* @param type 当前选择的外链类型
|
|
||||||
*/
|
|
||||||
export const batchCopyExternalLink = (
|
|
||||||
imgCardList: Array<UploadedImageModel>,
|
|
||||||
type: ExternalLinkType
|
|
||||||
) => {
|
|
||||||
let externalLink = ''
|
|
||||||
const externalLinkDom: any = createExternalLinkDom()
|
|
||||||
externalLinkDom.value = ''
|
|
||||||
if (imgCardList?.length > 0) {
|
|
||||||
imgCardList.forEach((item: UploadedImageModel, index) => {
|
|
||||||
const isMD = item.is_transform_md
|
|
||||||
switch (type) {
|
|
||||||
case ExternalLinkType.jsdelivr:
|
|
||||||
externalLink = isMD
|
|
||||||
? formatMarkdown(item.name, item.jsdelivr_cdn_url)
|
|
||||||
: item.jsdelivr_cdn_url
|
|
||||||
break
|
|
||||||
|
|
||||||
case ExternalLinkType.staticaly:
|
|
||||||
externalLink = isMD
|
|
||||||
? formatMarkdown(item.name, item.staticaly_cdn_url)
|
|
||||||
: item.staticaly_cdn_url
|
|
||||||
break
|
|
||||||
|
|
||||||
case ExternalLinkType.cloudflare:
|
|
||||||
externalLink = isMD
|
|
||||||
? formatMarkdown(item.name, item.cloudflare_cdn_url)
|
|
||||||
: item.cloudflare_cdn_url
|
|
||||||
break
|
|
||||||
|
|
||||||
default:
|
|
||||||
externalLink = isMD
|
|
||||||
? formatMarkdown(item.name, item.github_url)
|
|
||||||
: item.github_url
|
|
||||||
}
|
|
||||||
|
|
||||||
if (index < imgCardList.length - 1) {
|
|
||||||
// eslint-disable-next-line prefer-template
|
|
||||||
externalLinkDom.value += externalLink + '\n'
|
|
||||||
} else {
|
|
||||||
externalLinkDom.value += externalLink
|
|
||||||
}
|
|
||||||
})
|
|
||||||
externalLinkDom.select()
|
|
||||||
document.execCommand('copy')
|
|
||||||
ElMessage.success(`批量复制图片链接成功`)
|
|
||||||
} else {
|
|
||||||
console.warn('请先选择图片')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
import { getUuid } from './common-utils'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* get filename
|
|
||||||
* @param filename
|
|
||||||
*/
|
|
||||||
export const getFilename = (filename: string) => {
|
|
||||||
const splitIndex = filename.indexOf('.')
|
|
||||||
return filename.substr(0, splitIndex).trim().replace(/\s+/g, '-')
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* get filename suffix
|
|
||||||
* @param filename
|
|
||||||
*/
|
|
||||||
export const getFileSuffix = (filename: string) => {
|
|
||||||
const splitIndex = filename.lastIndexOf('.')
|
|
||||||
return filename.substr(splitIndex + 1, filename.length)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const isImage = (suffix: string): boolean => {
|
|
||||||
return /(png|jpg|gif|jpeg|webp|avif|svg\+xml|image\/x-icon)$/.test(suffix)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* get file size (KB)
|
|
||||||
* @param size
|
|
||||||
*/
|
|
||||||
export const getFileSize = (size: number) => {
|
|
||||||
return Number((size / 1024).toFixed(2))
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* filename handle
|
|
||||||
* @param filename
|
|
||||||
*/
|
|
||||||
export const filenameHandle = (filename: string | undefined) => {
|
|
||||||
if (filename) {
|
|
||||||
return {
|
|
||||||
name: getFilename(filename),
|
|
||||||
hash: getUuid(),
|
|
||||||
suffix: getFileSuffix(filename)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
name: '',
|
|
||||||
hash: '',
|
|
||||||
suffix: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
import { computed } from 'vue'
|
|
||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
import { getUuid } from '@/utils/common-utils'
|
|
||||||
import { generateExternalLink } from '@/utils/external-link-handler'
|
|
||||||
import ExternalLinkType from '@/common/model/external-link.model'
|
|
||||||
import { store } from '@/store'
|
|
||||||
|
|
||||||
const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
|
|
||||||
|
|
||||||
export default function structureImageObject(
|
|
||||||
item: any,
|
|
||||||
selectedDir: string
|
|
||||||
): UploadedImageModel {
|
|
||||||
return {
|
|
||||||
type: 'image',
|
|
||||||
uuid: getUuid(),
|
|
||||||
dir: selectedDir,
|
|
||||||
name: item.name,
|
|
||||||
path: item.path,
|
|
||||||
sha: item.sha,
|
|
||||||
deleting: false,
|
|
||||||
is_transform_md: false,
|
|
||||||
size: item.size,
|
|
||||||
checked: false,
|
|
||||||
github_url: generateExternalLink(ExternalLinkType.github, item, userConfigInfo),
|
|
||||||
jsdelivr_cdn_url: generateExternalLink(
|
|
||||||
ExternalLinkType.jsdelivr,
|
|
||||||
item,
|
|
||||||
userConfigInfo
|
|
||||||
),
|
|
||||||
staticaly_cdn_url: generateExternalLink(
|
|
||||||
ExternalLinkType.staticaly,
|
|
||||||
item,
|
|
||||||
userConfigInfo
|
|
||||||
),
|
|
||||||
cloudflare_cdn_url: generateExternalLink(
|
|
||||||
ExternalLinkType.cloudflare,
|
|
||||||
item,
|
|
||||||
userConfigInfo
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import { getType } from './common-utils'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据 object 每个 key 上值的数据类型，赋对应的初始值
|
|
||||||
* @param object
|
|
||||||
*/
|
|
||||||
export const cleanObject = (object: any) => {
|
|
||||||
// eslint-disable-next-line guard-for-in,no-restricted-syntax
|
|
||||||
for (const key in object) {
|
|
||||||
// eslint-disable-next-line default-case
|
|
||||||
switch (getType(object[key])) {
|
|
||||||
case 'object':
|
|
||||||
cleanObject(object[key])
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'string':
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
object[key] = ''
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'array':
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
object[key] = []
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'number':
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
object[key] = 0
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'boolean':
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
object[key] = false
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 将 obj2 对象的值深度赋值给 obj1 对象
|
|
||||||
* @param obj1{Object}
|
|
||||||
* @param obj2{Object}
|
|
||||||
*/
|
|
||||||
export const deepAssignObject = (obj1: object, obj2: object): any => {
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
|
||||||
for (const key in obj2) {
|
|
||||||
// @ts-ignore
|
|
||||||
if (getType(obj2[key]) !== 'object') {
|
|
||||||
if (obj1) {
|
|
||||||
// @ts-ignore
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
obj1[key] = obj2[key]
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// @ts-ignore
|
|
||||||
deepAssignObject(obj1[key], obj2[key])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import selectedFileHandle from './selected-file-handle'
|
|
||||||
|
|
||||||
const onPaste = (e: any, maxsize: number): Promise<any> | null => {
|
|
||||||
if (!(e.clipboardData && e.clipboardData.items)) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
// eslint-disable-next-line consistent-return
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
// eslint-disable-next-line no-plusplus
|
|
||||||
for (let i = 0, len = e.clipboardData.items.length; i < len; i++) {
|
|
||||||
const item = e.clipboardData.items[i]
|
|
||||||
if (item.kind === 'file') {
|
|
||||||
const pasteFile = item.getAsFile()
|
|
||||||
|
|
||||||
selectedFileHandle(pasteFile, maxsize)?.then((result) => {
|
|
||||||
if (!result) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const { base64, originalFile, compressFile } = result
|
|
||||||
resolve({ base64, originalFile, compressFile })
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export default onPaste
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
import { registerSW } from 'virtual:pwa-register'
|
|
||||||
|
|
||||||
registerSW()
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import { computed } from 'vue'
|
|
||||||
import { store } from '@/store'
|
|
||||||
import createToUploadImageObject from '@/utils/create-to-upload-image'
|
|
||||||
import { filenameHandle } from './file-handle-helper'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据图片链接获取图片 base64 编码
|
|
||||||
* @param url 图片路径
|
|
||||||
* @param ext 图片格式
|
|
||||||
*/
|
|
||||||
export function getBase64ByImageUrl(url: string, ext: string): Promise<string | null> {
|
|
||||||
const canvas = document.createElement('canvas')
|
|
||||||
const ctx = canvas.getContext('2d')
|
|
||||||
const img = new Image()
|
|
||||||
img.crossOrigin = 'Anonymous'
|
|
||||||
img.src = url
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
img.onload = () => {
|
|
||||||
const { width } = img
|
|
||||||
const { height } = img
|
|
||||||
canvas.width = width // 指定画板的高度，自定义
|
|
||||||
canvas.height = height // 指定画板的宽度，自定义
|
|
||||||
ctx?.drawImage(img, 0, 0, width, height) // 参数可自定义
|
|
||||||
const dataURL: string = canvas.toDataURL(`image/${ext}`)
|
|
||||||
resolve(dataURL)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取图片对象
|
|
||||||
export function getImage(base64Data: string, file: any) {
|
|
||||||
const userSettings = computed(() => store.getters.getUserSettings).value
|
|
||||||
const curImg = createToUploadImageObject()
|
|
||||||
|
|
||||||
curImg.imgData.base64Url = base64Data
|
|
||||||
// eslint-disable-next-line prefer-destructuring
|
|
||||||
curImg.imgData.base64Content = base64Data.split(',')[1]
|
|
||||||
|
|
||||||
const { name, hash, suffix } = filenameHandle(file.name)
|
|
||||||
curImg.uuid = hash
|
|
||||||
|
|
||||||
curImg.fileInfo.size = file.size
|
|
||||||
curImg.fileInfo.originSize = file.size
|
|
||||||
curImg.fileInfo.lastModified = file.lastModified
|
|
||||||
|
|
||||||
curImg.filename.name = name
|
|
||||||
curImg.filename.hash = hash
|
|
||||||
curImg.filename.suffix = suffix
|
|
||||||
curImg.filename.now = userSettings.defaultHash
|
|
||||||
? `${name}.${hash}.${suffix}`
|
|
||||||
: `${name}.${suffix}`
|
|
||||||
curImg.filename.initName = name
|
|
||||||
curImg.filename.isHashRename = userSettings.defaultHash
|
|
||||||
|
|
||||||
return curImg
|
|
||||||
}
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
import { store } from '@/store'
|
|
||||||
import { compress } from './compress'
|
|
||||||
import { getFileSize, isImage } from './file-handle-helper'
|
|
||||||
|
|
||||||
export type handleResult = { base64: string; originalFile: File; compressFile?: File }
|
|
||||||
|
|
||||||
const selectedFileHandle = async (
|
|
||||||
file: File,
|
|
||||||
maxsize: number
|
|
||||||
): Promise<handleResult | null> => {
|
|
||||||
if (!file) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isImage(file.type)) {
|
|
||||||
ElMessage.error('该文件格式不支持！')
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
let compressFile: NonNullable<File>
|
|
||||||
const { isCompress, compressEncoder } = store.getters.getUserSettings
|
|
||||||
const isGif = file.type === 'image/gif'
|
|
||||||
if (!isGif && isCompress) {
|
|
||||||
const loadingInstance = ElLoading.service({
|
|
||||||
target: '.upload-area',
|
|
||||||
text: '正在压缩图片'
|
|
||||||
})
|
|
||||||
compressFile = await compress(file, compressEncoder)
|
|
||||||
loadingInstance.close()
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
const reader = new FileReader()
|
|
||||||
reader.readAsDataURL(!isGif && isCompress ? compressFile : file)
|
|
||||||
reader.onload = (e: ProgressEvent<FileReader>) => {
|
|
||||||
const base64: any = e.target?.result
|
|
||||||
const curImgSize = getFileSize(base64.length)
|
|
||||||
|
|
||||||
if (curImgSize >= maxsize) {
|
|
||||||
// 给出提示，引导用户自行去压缩图片
|
|
||||||
ElMessageBox.confirm(
|
|
||||||
`当前图片 ${(curImgSize / 1024).toFixed(
|
|
||||||
2
|
|
||||||
)} M，CDN 只能加速小于 50 MB 的图片，建议使用第三方工具 TinyPNG 压缩`,
|
|
||||||
'图片过大，禁止上传',
|
|
||||||
{
|
|
||||||
confirmButtonText: '前往 TinyPNG',
|
|
||||||
cancelButtonText: '放弃上传'
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then(() => {
|
|
||||||
window.open('https://tinypng.com/')
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
console.log('放弃上传')
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
resolve({
|
|
||||||
base64,
|
|
||||||
originalFile: file,
|
|
||||||
compressFile: !isGif && isCompress ? compressFile : file
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export default selectedFileHandle
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
import { watch, nextTick } from 'vue'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
import { UserSettingsModel } from '@/common/model/user-settings.model'
|
|
||||||
|
|
||||||
const setThemeMode = () => {
|
|
||||||
const store = useStore()
|
|
||||||
|
|
||||||
const setBodyClassName = async (theme: 'dark' | 'light') => {
|
|
||||||
await nextTick(() => {
|
|
||||||
const body = document.getElementsByTagName('html')[0]
|
|
||||||
if (theme === 'dark') {
|
|
||||||
body.classList.remove('light')
|
|
||||||
body.classList.add('dark')
|
|
||||||
} else {
|
|
||||||
body.classList.remove('dark')
|
|
||||||
body.classList.add('light')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const autoThemeModeTimeHandle = (autoLightThemeTime: string[]) => {
|
|
||||||
const getTimestamp = (i: number) => {
|
|
||||||
const D = new Date()
|
|
||||||
const yyyy = D.getFullYear()
|
|
||||||
const mm = D.getMonth() + 1
|
|
||||||
const dd = D.getDate()
|
|
||||||
return new Date(`${yyyy}/${mm}/${dd} ${autoLightThemeTime[i]}:00`).getTime()
|
|
||||||
}
|
|
||||||
const now = Date.now()
|
|
||||||
return getTimestamp(0) <= now && now <= getTimestamp(1)
|
|
||||||
}
|
|
||||||
|
|
||||||
const setThemeByConfigFn = (settings: UserSettingsModel) => {
|
|
||||||
const { themeMode, autoLightThemeTime } = settings
|
|
||||||
if (themeMode === 'auto') {
|
|
||||||
setBodyClassName(autoThemeModeTimeHandle(autoLightThemeTime) ? 'light' : 'dark')
|
|
||||||
} else {
|
|
||||||
setBodyClassName(themeMode)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
(): UserSettingsModel => store.getters.getUserSettings,
|
|
||||||
(newValue) => {
|
|
||||||
setThemeByConfigFn(newValue)
|
|
||||||
},
|
|
||||||
{ deep: true, immediate: true }
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default setThemeMode
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
export default class TimeHelper {
|
|
||||||
private static zerofill(n: number) {
|
|
||||||
return n < 10 ? `0${n}` : n
|
|
||||||
}
|
|
||||||
|
|
||||||
static getYyyyMmDd(now: number = Date.now()) {
|
|
||||||
const date: Date = new Date(now)
|
|
||||||
const yyyy = date.getFullYear()
|
|
||||||
const MM = date.getMonth() + 1
|
|
||||||
const DD = date.getDate()
|
|
||||||
return `${yyyy}${this.zerofill(MM)}${this.zerofill(DD)}`
|
|
||||||
}
|
|
||||||
|
|
||||||
static formatTimestamp(now: number = Date.now()) {
|
|
||||||
const date: Date = new Date(now)
|
|
||||||
const YYYY = date.getFullYear()
|
|
||||||
const MM = date.getMonth() + 1
|
|
||||||
const DD = date.getDate()
|
|
||||||
const hh = date.getHours()
|
|
||||||
const mm = date.getMinutes()
|
|
||||||
const ss = date.getSeconds()
|
|
||||||
return `${YYYY}-${this.zerofill(MM)}-${this.zerofill(DD)} ${this.zerofill(
|
|
||||||
hh
|
|
||||||
)}:${this.zerofill(mm)}:${this.zerofill(ss)}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,134 +0,0 @@
|
|||||||
import { UserConfigInfoModel } from '@/common/model/user-config-info.model'
|
|
||||||
import { ToUploadImageModel, UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
import axios from '@/utils/axios'
|
|
||||||
import { store } from '@/store'
|
|
||||||
import { generateExternalLink } from '@/utils/external-link-handler'
|
|
||||||
import ExternalLinkType from '@/common/model/external-link.model'
|
|
||||||
|
|
||||||
export const uploadUrlHandle = (
|
|
||||||
config: UserConfigInfoModel,
|
|
||||||
filename: string
|
|
||||||
): string => {
|
|
||||||
let path = ''
|
|
||||||
if (config.selectedDir !== '/') {
|
|
||||||
path = `${config.selectedDir}/`
|
|
||||||
}
|
|
||||||
return `/repos/${config.owner}/${config.selectedRepos}/contents/${path}${filename}`
|
|
||||||
}
|
|
||||||
|
|
||||||
export function uploadImage_single(
|
|
||||||
userConfigInfo: UserConfigInfoModel,
|
|
||||||
img: ToUploadImageModel
|
|
||||||
): Promise<Boolean> {
|
|
||||||
const { selectedBranch, email, owner } = userConfigInfo
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.uploadStatus.uploading = true
|
|
||||||
|
|
||||||
const data: any = {
|
|
||||||
message: 'Upload picture via PicX(https://github.com/XPoet/picx)',
|
|
||||||
branch: selectedBranch,
|
|
||||||
content: img.imgData.base64Content
|
|
||||||
}
|
|
||||||
|
|
||||||
if (email) {
|
|
||||||
data.committer = {
|
|
||||||
name: owner,
|
|
||||||
email
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
axios
|
|
||||||
.put(uploadUrlHandle(userConfigInfo, img.filename.now), data)
|
|
||||||
.then((res) => {
|
|
||||||
if (res && res.status === 201) {
|
|
||||||
// eslint-disable-next-line no-use-before-define
|
|
||||||
uploadedHandle(res, img, userConfigInfo)
|
|
||||||
store.dispatch('TO_UPLOAD_IMAGE_UPLOADED', img.uuid)
|
|
||||||
resolve(true)
|
|
||||||
} else {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.uploadStatus.uploading = false
|
|
||||||
resolve(false)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
reject(error)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function uploadedHandle(
|
|
||||||
res: any,
|
|
||||||
img: ToUploadImageModel,
|
|
||||||
userConfigInfo: UserConfigInfoModel
|
|
||||||
) {
|
|
||||||
const userSettings = store.getters.getUserSettings
|
|
||||||
|
|
||||||
// 上传状态处理
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.uploadStatus.progress = 100
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.uploadStatus.uploading = false
|
|
||||||
|
|
||||||
// 生成 GitHub 外链
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.externalLink.github = generateExternalLink(
|
|
||||||
ExternalLinkType.github,
|
|
||||||
res.data.content,
|
|
||||||
userConfigInfo
|
|
||||||
)
|
|
||||||
|
|
||||||
// 生成 jsDelivr CDN 外链
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.externalLink.jsdelivr = generateExternalLink(
|
|
||||||
ExternalLinkType.jsdelivr,
|
|
||||||
res.data.content,
|
|
||||||
userConfigInfo
|
|
||||||
)
|
|
||||||
|
|
||||||
// 生成 Staticaly CDN 外链
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.externalLink.staticaly = generateExternalLink(
|
|
||||||
ExternalLinkType.staticaly,
|
|
||||||
res.data.content,
|
|
||||||
userConfigInfo
|
|
||||||
)
|
|
||||||
|
|
||||||
// 生成 Cloudflare CDN 外链
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.externalLink.cloudflare = generateExternalLink(
|
|
||||||
ExternalLinkType.cloudflare,
|
|
||||||
res.data.content,
|
|
||||||
userConfigInfo
|
|
||||||
)
|
|
||||||
|
|
||||||
const item: UploadedImageModel = {
|
|
||||||
checked: false,
|
|
||||||
type: 'image',
|
|
||||||
uuid: img.uuid,
|
|
||||||
dir: userConfigInfo.selectedDir,
|
|
||||||
name: res.data.content.name,
|
|
||||||
path: res.data.content.path,
|
|
||||||
sha: res.data.content.sha,
|
|
||||||
github_url: img.externalLink.github,
|
|
||||||
jsdelivr_cdn_url: img.externalLink.jsdelivr,
|
|
||||||
staticaly_cdn_url: img.externalLink.staticaly,
|
|
||||||
cloudflare_cdn_url: img.externalLink.cloudflare,
|
|
||||||
is_transform_md: userSettings.defaultMarkdown,
|
|
||||||
deleting: false,
|
|
||||||
size: img.fileInfo.size
|
|
||||||
}
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
img.uploadedImg = item
|
|
||||||
|
|
||||||
// uploadedList 增加图片
|
|
||||||
store.dispatch('UPLOADED_LIST_ADD', item)
|
|
||||||
|
|
||||||
// dirImageList 增加目录
|
|
||||||
store.dispatch('DIR_IMAGE_LIST_ADD_DIR', userConfigInfo.selectedDir)
|
|
||||||
|
|
||||||
// dirImageList 增加图片
|
|
||||||
store.dispatch('DIR_IMAGE_LIST_ADD_IMAGE', item)
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
.feedback-page-container {
|
|
||||||
|
|
||||||
.help-info-item {
|
|
||||||
font-size: 16rem;
|
|
||||||
padding: 6rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10rem;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 28rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.red-text {
|
|
||||||
color: #de1a1a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="page-container feedback-page-container">
|
|
||||||
<div class="help-info-item description">
|
|
||||||
PicX 是一款基于 GitHub API & jsDelivr 开发的具有 CDN 加速功能的图床工具。
|
|
||||||
<br />
|
|
||||||
无需下载！无需安装！打开网站即用！免费！极速！稳定！
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="help-info-item">建议将本站添加至浏览器收藏夹，方便下次使用 😊</div>
|
|
||||||
|
|
||||||
<div class="help-info-item">
|
|
||||||
作者：
|
|
||||||
<el-link type="primary" href="https://xpoet.cn/" target="_blank">@XPoet</el-link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="help-info-item">
|
|
||||||
仓库：
|
|
||||||
<el-link type="primary" href="https://github.com/XPoet/picx" target="_blank">
|
|
||||||
https://github.com/XPoet/picx
|
|
||||||
</el-link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="help-info-item">
|
|
||||||
教程：
|
|
||||||
<el-link
|
|
||||||
type="primary"
|
|
||||||
href="https://github.com/XPoet/picx/blob/master/README.md"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
https://github.com/XPoet/picx/blob/master/README.md
|
|
||||||
</el-link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="help-info-item">
|
|
||||||
在使用过程中遇到问题，请仔细阅读文档，或者给作者提
|
|
||||||
<el-link
|
|
||||||
type="primary"
|
|
||||||
style="font-size: 16rem"
|
|
||||||
href="https://github.com/XPoet/picx/issues"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Issue
|
|
||||||
</el-link>
|
|
||||||
。
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="help-info-item red-text">
|
|
||||||
图片上传缓慢或加载不出来等情况，可借助
|
|
||||||
<el-link
|
|
||||||
style="font-size: 16rem"
|
|
||||||
type="primary"
|
|
||||||
href="https://github.com/Alvin9999/new-pac/wiki"
|
|
||||||
target="_blank"
|
|
||||||
>VPN 工具
|
|
||||||
</el-link>
|
|
||||||
。
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="help-info-item">
|
|
||||||
<strong>
|
|
||||||
郑重声明：请勿通过本站上传违反你当地法律的图片，所造成的一切后果与本站无关。
|
|
||||||
</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'about'
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import "about.styl"
|
|
||||||
</style>
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
.config-page-container {
|
|
||||||
.operation {
|
|
||||||
text-align right
|
|
||||||
|
|
||||||
.el-button {
|
|
||||||
margin-left 20rem
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-left 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,498 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="page-container config-page-container">
|
|
||||||
<!-- Token -->
|
|
||||||
<el-form label-width="70rem" :label-position="labelPosition" class="config-form">
|
|
||||||
<el-form-item label="Token">
|
|
||||||
<el-input
|
|
||||||
v-model="userConfigInfo.token"
|
|
||||||
clearable
|
|
||||||
:autofocus="!userConfigInfo.token"
|
|
||||||
type="password"
|
|
||||||
show-password
|
|
||||||
placeholder="请输入 GitHub Token"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item class="operation">
|
|
||||||
<el-button
|
|
||||||
plain
|
|
||||||
type="primary"
|
|
||||||
native-type="submit"
|
|
||||||
@click.prevent="getUserInfo()"
|
|
||||||
>
|
|
||||||
确认 Token
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<!-- 基本信息 -->
|
|
||||||
<el-form
|
|
||||||
label-width="70rem"
|
|
||||||
:label-position="labelPosition"
|
|
||||||
v-if="userConfigInfo.token"
|
|
||||||
v-loading="loading"
|
|
||||||
element-loading-text="加载中..."
|
|
||||||
>
|
|
||||||
<el-form-item v-if="userConfigInfo.owner" label="用户名">
|
|
||||||
<el-input v-model="userConfigInfo.owner" readonly></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item v-if="userConfigInfo.email" label="邮箱">
|
|
||||||
<el-input v-model="userConfigInfo.email" readonly></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item v-if="userConfigInfo.reposList.length" label="选择仓库">
|
|
||||||
<el-select
|
|
||||||
v-model="userConfigInfo.selectedRepos"
|
|
||||||
filterable
|
|
||||||
style="width: 100%"
|
|
||||||
placeholder="请选择图床仓库..."
|
|
||||||
@change="selectRepos"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="(repos, index) in userConfigInfo.reposList"
|
|
||||||
:key="index"
|
|
||||||
:label="repos.label"
|
|
||||||
:value="repos.value"
|
|
||||||
>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<!-- 分支 -->
|
|
||||||
<el-form
|
|
||||||
label-width="70rem"
|
|
||||||
:label-position="labelPosition"
|
|
||||||
v-if="userConfigInfo.selectedRepos && userConfigInfo.branchList.length"
|
|
||||||
v-loading="branchLoading"
|
|
||||||
element-loading-text="加载中..."
|
|
||||||
>
|
|
||||||
<!-- 因未验证 API 是否能创建空分支，暂时不开启分支选择方式 && 0 -->
|
|
||||||
<el-form-item v-if="userConfigInfo.selectedRepos && 0" label="分支方式">
|
|
||||||
<el-radio-group v-model="userConfigInfo.branchMode" @change="branchModeChange">
|
|
||||||
<el-tooltip
|
|
||||||
v-if="userConfigInfo.branchList.length"
|
|
||||||
:content="'选择 ' + userConfigInfo.selectedRepos + ' 仓库下的一个分支'"
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
<el-radio label="reposBranch">
|
|
||||||
选择 {{ userConfigInfo.selectedRepos }} 仓库下的分支
|
|
||||||
</el-radio>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip content="手动创建一个新分支" placement="top">
|
|
||||||
<el-radio label="newBranch">新建分支</el-radio>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item
|
|
||||||
v-if="
|
|
||||||
userConfigInfo.branchList.length > 1 &&
|
|
||||||
userConfigInfo.branchMode === 'reposBranch'
|
|
||||||
"
|
|
||||||
label="选择分支"
|
|
||||||
>
|
|
||||||
<el-select
|
|
||||||
v-model="userConfigInfo.selectedBranch"
|
|
||||||
filterable
|
|
||||||
style="width: 100%"
|
|
||||||
placeholder="请选择分支..."
|
|
||||||
@change="selectBranch"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="(repos, reposIndex) in userConfigInfo.branchList"
|
|
||||||
:key="reposIndex"
|
|
||||||
:label="repos.label"
|
|
||||||
:value="repos.value"
|
|
||||||
>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item v-if="userConfigInfo.branchMode === 'newBranch'" label="新建分支">
|
|
||||||
<el-input
|
|
||||||
v-model="userConfigInfo.selectedBranch"
|
|
||||||
@input="persistUserConfigInfo()"
|
|
||||||
clearable
|
|
||||||
placeholder="请输入新建的分支..."
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<!-- 目录 -->
|
|
||||||
<el-form
|
|
||||||
label-width="70rem"
|
|
||||||
:label-position="labelPosition"
|
|
||||||
v-if="userConfigInfo.selectedBranch"
|
|
||||||
v-loading="dirLoading"
|
|
||||||
element-loading-text="加载中..."
|
|
||||||
>
|
|
||||||
<el-form-item v-if="userConfigInfo.selectedBranch" label="目录方式">
|
|
||||||
<el-radio-group v-model="userConfigInfo.dirMode" @change="dirModeChange">
|
|
||||||
<el-tooltip content="手动输入一个新目录" placement="top" :offset="-1">
|
|
||||||
<el-radio label="newDir">新建目录</el-radio>
|
|
||||||
</el-tooltip>
|
|
||||||
|
|
||||||
<el-tooltip
|
|
||||||
:content="'图片存储在 ' + userConfigInfo.selectedBranch + ' 分支的根目录下'"
|
|
||||||
placement="top"
|
|
||||||
:offset="-1"
|
|
||||||
>
|
|
||||||
<el-radio label="rootDir">根目录</el-radio>
|
|
||||||
</el-tooltip>
|
|
||||||
|
|
||||||
<el-tooltip
|
|
||||||
:content="'根据日期自动创建格式 YYYYMMDD 的目录'"
|
|
||||||
placement="top"
|
|
||||||
:offset="-1"
|
|
||||||
>
|
|
||||||
<el-radio label="autoDir">自动目录</el-radio>
|
|
||||||
</el-tooltip>
|
|
||||||
|
|
||||||
<el-tooltip
|
|
||||||
v-if="
|
|
||||||
userConfigInfo.dirList.length && userConfigInfo.branchMode !== 'newBranch'
|
|
||||||
"
|
|
||||||
:content="'选择 ' + userConfigInfo.selectedBranch + ' 分支下的一个目录'"
|
|
||||||
placement="top"
|
|
||||||
:offset="-1"
|
|
||||||
>
|
|
||||||
<el-radio label="reposDir">
|
|
||||||
选择 {{ userConfigInfo.selectedRepos }} 仓库目录
|
|
||||||
</el-radio>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item v-if="userConfigInfo.dirMode === 'autoDir'" label="自动目录">
|
|
||||||
<el-input v-model="userConfigInfo.selectedDir" readonly></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item v-if="userConfigInfo.dirMode === 'rootDir'" label="根目录">
|
|
||||||
<el-input v-model="userConfigInfo.selectedDir" readonly></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item v-if="userConfigInfo.dirMode === 'newDir'" label="新建目录">
|
|
||||||
<el-input
|
|
||||||
v-model="userConfigInfo.selectedDir"
|
|
||||||
@input="persistUserConfigInfo()"
|
|
||||||
clearable
|
|
||||||
placeholder="请输入新建的目录..."
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item
|
|
||||||
v-if="
|
|
||||||
userConfigInfo.dirList.length &&
|
|
||||||
userConfigInfo.dirMode === 'reposDir' &&
|
|
||||||
userConfigInfo.branchMode !== 'newBranch'
|
|
||||||
"
|
|
||||||
label="选择目录"
|
|
||||||
>
|
|
||||||
<el-cascader
|
|
||||||
style="width: 100%"
|
|
||||||
:props="cascaderProps"
|
|
||||||
:key="elCascaderKey"
|
|
||||||
v-model="userConfigInfo.selectedDirList"
|
|
||||||
filterable
|
|
||||||
placeholder="请选择一个目录..."
|
|
||||||
clearable
|
|
||||||
@change="cascaderChange"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<!-- 操作（重置、完成配置） -->
|
|
||||||
<el-form label-width="70rem" :label-position="labelPosition">
|
|
||||||
<el-form-item class="operation">
|
|
||||||
<el-button plain type="warning" @click="reset()" v-if="userConfigInfo.owner">
|
|
||||||
重置
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
plain
|
|
||||||
type="success"
|
|
||||||
@click="goUpload"
|
|
||||||
v-if="userConfigInfo.selectedRepos"
|
|
||||||
>
|
|
||||||
完成配置
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed, ref, watch } from 'vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
import { DirModeEnum } from '@/common/model/dir.model'
|
|
||||||
import { BranchModeEnum } from '@/common/model/user-config-info.model'
|
|
||||||
import axios from '@/utils/axios'
|
|
||||||
import TimeHelper from '@/utils/time-helper'
|
|
||||||
import { getDirListByPath } from '@/common/api'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const store = useStore()
|
|
||||||
|
|
||||||
const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
|
|
||||||
const loggingStatus = computed(() => store.getters.getUserConfigInfo).value
|
|
||||||
const userSettings = computed(() => store.getters.getUserSettings).value
|
|
||||||
|
|
||||||
const loading = ref(false)
|
|
||||||
const dirLoading = ref(false)
|
|
||||||
const branchLoading = ref(false)
|
|
||||||
|
|
||||||
const labelPosition = computed(() => {
|
|
||||||
return userSettings.elementPlusSize === 'default' ? 'top' : 'right'
|
|
||||||
})
|
|
||||||
|
|
||||||
const elCascaderKey = ref<string>('elCascaderKey')
|
|
||||||
|
|
||||||
function persistUserConfigInfo() {
|
|
||||||
store.dispatch('USER_CONFIG_INFO_PERSIST')
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveUserInfo(res: any) {
|
|
||||||
userConfigInfo.loggingStatus = true
|
|
||||||
userConfigInfo.owner = res.data.login
|
|
||||||
userConfigInfo.name = res.data.name
|
|
||||||
userConfigInfo.email = res.data.email
|
|
||||||
userConfigInfo.avatarUrl = res.data.avatar_url
|
|
||||||
persistUserConfigInfo()
|
|
||||||
}
|
|
||||||
|
|
||||||
function getReposList(reposUrl: string) {
|
|
||||||
axios
|
|
||||||
.get(reposUrl, {
|
|
||||||
params: {
|
|
||||||
type: 'public',
|
|
||||||
sort: 'created',
|
|
||||||
per_page: 100
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then((res: any) => {
|
|
||||||
console.log('[getReposList] ', res)
|
|
||||||
if (res.status === 200 && res.data.length > 0) {
|
|
||||||
userConfigInfo.reposList = []
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
|
||||||
for (const repos of res.data) {
|
|
||||||
if (!repos.fork && !repos.private) {
|
|
||||||
userConfigInfo.reposList.push({
|
|
||||||
value: repos.name,
|
|
||||||
label: repos.name,
|
|
||||||
desc: repos.description
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
loading.value = false
|
|
||||||
persistUserConfigInfo()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getDirList() {
|
|
||||||
dirLoading.value = true
|
|
||||||
userConfigInfo.dirList = await getDirListByPath()
|
|
||||||
persistUserConfigInfo()
|
|
||||||
dirLoading.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
function dirModeChange(dirMode: DirModeEnum) {
|
|
||||||
switch (dirMode) {
|
|
||||||
case DirModeEnum.rootDir:
|
|
||||||
// 根目录
|
|
||||||
userConfigInfo.selectedDir = '/'
|
|
||||||
break
|
|
||||||
|
|
||||||
case DirModeEnum.autoDir:
|
|
||||||
// 自动目录，根据当天日期自动生成
|
|
||||||
userConfigInfo.selectedDir = TimeHelper.getYyyyMmDd()
|
|
||||||
break
|
|
||||||
|
|
||||||
case DirModeEnum.newDir:
|
|
||||||
// 手动输入的新建目录
|
|
||||||
userConfigInfo.selectedDir = 'xxx'
|
|
||||||
break
|
|
||||||
|
|
||||||
case DirModeEnum.reposDir:
|
|
||||||
// 仓库目录
|
|
||||||
// eslint-disable-next-line no-case-declarations
|
|
||||||
const { dirList } = userConfigInfo
|
|
||||||
if (dirList.length) {
|
|
||||||
userConfigInfo.selectedDir = dirList[0].value
|
|
||||||
} else {
|
|
||||||
userConfigInfo.selectedDir = ''
|
|
||||||
}
|
|
||||||
break
|
|
||||||
|
|
||||||
default:
|
|
||||||
userConfigInfo.selectedDir = '/'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
persistUserConfigInfo()
|
|
||||||
}
|
|
||||||
|
|
||||||
function getBranchList(repos: string) {
|
|
||||||
branchLoading.value = true
|
|
||||||
axios.get(`/repos/${userConfigInfo.owner}/${repos}/branches`).then((res: any) => {
|
|
||||||
console.log('[getBranchList] ', res)
|
|
||||||
if (res && res.status === 200) {
|
|
||||||
branchLoading.value = false
|
|
||||||
if (res.data.length > 0) {
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
|
||||||
for (const item of res.data) {
|
|
||||||
userConfigInfo.branchList.push({
|
|
||||||
value: item.name,
|
|
||||||
label: item.name
|
|
||||||
})
|
|
||||||
}
|
|
||||||
userConfigInfo.branchList.reverse()
|
|
||||||
userConfigInfo.selectedBranch = userConfigInfo.branchList[0].value
|
|
||||||
userConfigInfo.branchMode = BranchModeEnum.reposBranch
|
|
||||||
getDirList()
|
|
||||||
} else {
|
|
||||||
userConfigInfo.selectedBranch = 'master'
|
|
||||||
userConfigInfo.branchMode = BranchModeEnum.newBranch
|
|
||||||
}
|
|
||||||
dirModeChange(userConfigInfo.dirMode)
|
|
||||||
persistUserConfigInfo()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function getUserInfo() {
|
|
||||||
if (userConfigInfo.token) {
|
|
||||||
loading.value = true
|
|
||||||
axios
|
|
||||||
.get('/user', {
|
|
||||||
headers: { Authorization: `token ${userConfigInfo.token}` }
|
|
||||||
})
|
|
||||||
.then((res: any) => {
|
|
||||||
console.log('[getUserInfo] ', res)
|
|
||||||
if (res && res.status === 200) {
|
|
||||||
saveUserInfo(res)
|
|
||||||
getReposList(res.data.repos_url)
|
|
||||||
} else {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
ElMessage.warning('Token 不能为空！')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectRepos(repos: string) {
|
|
||||||
userConfigInfo.branchList = []
|
|
||||||
userConfigInfo.dirList = []
|
|
||||||
getBranchList(repos)
|
|
||||||
persistUserConfigInfo()
|
|
||||||
}
|
|
||||||
|
|
||||||
async function selectBranch(branch: string) {
|
|
||||||
userConfigInfo.selectedBranch = branch
|
|
||||||
await getDirList()
|
|
||||||
elCascaderKey.value = userConfigInfo.selectedBranch
|
|
||||||
userConfigInfo.selectedDir = userConfigInfo.dirList[0].value
|
|
||||||
userConfigInfo.selectedDirList = [userConfigInfo.selectedDir]
|
|
||||||
persistUserConfigInfo()
|
|
||||||
}
|
|
||||||
|
|
||||||
function branchModeChange(mode: BranchModeEnum) {
|
|
||||||
const selBranch = userConfigInfo.selectedBranch
|
|
||||||
const bv = userConfigInfo.branchList[0].value
|
|
||||||
|
|
||||||
switch (mode) {
|
|
||||||
case BranchModeEnum.newBranch:
|
|
||||||
userConfigInfo.selectedBranch = 'xxx'
|
|
||||||
userConfigInfo.dirMode = DirModeEnum.newDir
|
|
||||||
userConfigInfo.selectedDir = 'xxx'
|
|
||||||
break
|
|
||||||
|
|
||||||
case BranchModeEnum.reposBranch:
|
|
||||||
if (selBranch !== bv) {
|
|
||||||
userConfigInfo.selectedBranch = bv
|
|
||||||
getDirList()
|
|
||||||
}
|
|
||||||
break
|
|
||||||
|
|
||||||
default:
|
|
||||||
userConfigInfo.selectedBranch = ''
|
|
||||||
break
|
|
||||||
}
|
|
||||||
persistUserConfigInfo()
|
|
||||||
}
|
|
||||||
|
|
||||||
function reset() {
|
|
||||||
loading.value = false
|
|
||||||
dirLoading.value = false
|
|
||||||
store.dispatch('LOGOUT')
|
|
||||||
}
|
|
||||||
|
|
||||||
function goUpload() {
|
|
||||||
const { selectedDir, dirMode } = userConfigInfo
|
|
||||||
let warningMessage: string = '目录不能为空！'
|
|
||||||
|
|
||||||
if (selectedDir === '') {
|
|
||||||
switch (dirMode) {
|
|
||||||
case DirModeEnum.newDir:
|
|
||||||
warningMessage = '请在输入框输入一个新目录！'
|
|
||||||
break
|
|
||||||
case DirModeEnum.reposDir:
|
|
||||||
warningMessage = `请选择 ${userConfigInfo.selectedRepos} 仓库下的一个目录！`
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
warningMessage = '请在输入框输入一个新目录！'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
ElMessage.warning(warningMessage)
|
|
||||||
} else {
|
|
||||||
router.push('/upload')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const cascaderProps = {
|
|
||||||
lazy: true,
|
|
||||||
checkStrictly: true,
|
|
||||||
async lazyLoad(node: any, resolve: any) {
|
|
||||||
const { level, pathLabels } = node
|
|
||||||
let dirs: any
|
|
||||||
if (level === 0) {
|
|
||||||
dirs = userConfigInfo.dirList
|
|
||||||
} else {
|
|
||||||
dirs = await getDirListByPath(pathLabels.join('/'))
|
|
||||||
}
|
|
||||||
if (dirs) {
|
|
||||||
resolve(
|
|
||||||
dirs.map((x: any) => ({
|
|
||||||
value: x.value,
|
|
||||||
label: x.label,
|
|
||||||
leaf: level >= 2
|
|
||||||
}))
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
resolve([])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function cascaderChange(e: string[]) {
|
|
||||||
userConfigInfo.selectedDirList = e
|
|
||||||
userConfigInfo.selectedDir = e.join('/')
|
|
||||||
persistUserConfigInfo()
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => loggingStatus,
|
|
||||||
(_n) => {
|
|
||||||
if (!_n) {
|
|
||||||
loading.value = false
|
|
||||||
dirLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import "config.styl"
|
|
||||||
</style>
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
@import "../../style/base.styl"
|
|
||||||
|
|
||||||
$infoBarHeight = 50rem
|
|
||||||
|
|
||||||
.management-page-container {
|
|
||||||
padding-bottom 0 !important
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
position relative
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
padding-top $infoBarHeight
|
|
||||||
box-sizing border-box
|
|
||||||
|
|
||||||
.top {
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
width 100%
|
|
||||||
height $infoBarHeight
|
|
||||||
box-sizing border-box
|
|
||||||
display flex
|
|
||||||
align-items center
|
|
||||||
justify-content space-between
|
|
||||||
font-size 14rem
|
|
||||||
padding-bottom 20rem
|
|
||||||
|
|
||||||
.right {
|
|
||||||
|
|
||||||
.btn-icon {
|
|
||||||
cursor pointer
|
|
||||||
font-size 22rem
|
|
||||||
margin-left 10rem
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
position relative
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
box-sizing border-box
|
|
||||||
border 1rem solid var(--border-color)
|
|
||||||
|
|
||||||
.image-list {
|
|
||||||
width 100%
|
|
||||||
//height 100%
|
|
||||||
//max-height calc(100% - 60rem)
|
|
||||||
margin 0
|
|
||||||
padding 2rem
|
|
||||||
list-style none
|
|
||||||
overflow-y auto
|
|
||||||
box-sizing border-box
|
|
||||||
|
|
||||||
li.image-item {
|
|
||||||
float left
|
|
||||||
box-sizing border-box
|
|
||||||
padding 10rem
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
import { Store } from 'vuex'
|
|
||||||
import { DirObject } from '@/store/modules/dir-image-list/types'
|
|
||||||
|
|
||||||
function getContent(targetContent: any, dirList: string[], n: number): any {
|
|
||||||
if (targetContent) {
|
|
||||||
if (dirList.length === n) {
|
|
||||||
return targetContent
|
|
||||||
}
|
|
||||||
return getContent(
|
|
||||||
targetContent.childrenDirs?.find((v: any) => v.dir === dirList[n]),
|
|
||||||
dirList,
|
|
||||||
// eslint-disable-next-line no-param-reassign,no-plusplus
|
|
||||||
++n
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取当前目录下所有内容（子目录和图片）
|
|
||||||
* @param dirPath
|
|
||||||
* @param dirObj
|
|
||||||
*/
|
|
||||||
export const getDirContent = (dirPath: string, dirObj: DirObject) => {
|
|
||||||
if (dirPath === '/') {
|
|
||||||
return dirObj
|
|
||||||
}
|
|
||||||
const dirList: string[] = dirPath.split('/')
|
|
||||||
return getContent(dirObj, dirList, 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 过滤当前目录的内容（子目录或图片）
|
|
||||||
* @param dirPath
|
|
||||||
* @param content
|
|
||||||
* @param type
|
|
||||||
*/
|
|
||||||
export const filterDirContent = (dirPath: string, content: any, type: string): any => {
|
|
||||||
if (type === 'dir') {
|
|
||||||
return content.childrenDirs?.filter((x: any) => x.type === 'dir')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type === 'image') {
|
|
||||||
return content.imageList.filter((x: any) => x.type === 'image')
|
|
||||||
}
|
|
||||||
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
|
|
||||||
export const dirModeHandle = (dir: string, store: Store<any>) => {
|
|
||||||
if (dir === '/') {
|
|
||||||
store.dispatch('SET_USER_CONFIG_INFO', {
|
|
||||||
dirMode: 'rootDir',
|
|
||||||
needPersist: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,201 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="page-container management-page-container">
|
|
||||||
<div class="content-container">
|
|
||||||
<div class="top">
|
|
||||||
<div class="left">
|
|
||||||
<selected-info-bar />
|
|
||||||
</div>
|
|
||||||
<div class="right flex-start">
|
|
||||||
<el-tooltip
|
|
||||||
placement="top"
|
|
||||||
:content="listing ? '切换方块展示' : '切换列表展示'"
|
|
||||||
>
|
|
||||||
<el-icon class="btn-icon" @click.stop="toggleListing">
|
|
||||||
<Tickets v-if="listing" />
|
|
||||||
<Menu v-if="!listing" />
|
|
||||||
</el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip placement="top" content="重新加载图片">
|
|
||||||
<el-icon class="btn-icon" @click.stop="reloadCurrentDirContent">
|
|
||||||
<Refresh />
|
|
||||||
</el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bottom" v-loading="loadingImageList" element-loading-text="加载中...">
|
|
||||||
<image-selector
|
|
||||||
v-if="currentPathImageList.length"
|
|
||||||
:currentDirImageList="currentPathImageList"
|
|
||||||
@update:initImageList="currentPathImageList"
|
|
||||||
:key="renderKey"
|
|
||||||
></image-selector>
|
|
||||||
<ul
|
|
||||||
class="image-list"
|
|
||||||
:style="{
|
|
||||||
height: isShowBatchTools ? 'calc(100% - 50rem)' : '100%'
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<li class="image-item" v-if="userConfigInfo.selectedDir !== '/'">
|
|
||||||
<folder-card mode="back" />
|
|
||||||
</li>
|
|
||||||
<li class="image-item" v-for="(dir, index) in currentPathDirList" :key="index">
|
|
||||||
<folder-card :folder-obj="dir" />
|
|
||||||
</li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
<li
|
|
||||||
class="image-item"
|
|
||||||
v-for="(image, index) in currentPathImageList"
|
|
||||||
:key="index"
|
|
||||||
:style="{
|
|
||||||
width: listing ? '50%' : '230rem',
|
|
||||||
height: listing ? '80rem' : '240rem'
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<image-card
|
|
||||||
:image-obj="image"
|
|
||||||
:listing="listing"
|
|
||||||
v-model="activeIndex"
|
|
||||||
:index="index"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed, onMounted, watch, ref } from 'vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
import { getContentByReposPath } from '@/common/api'
|
|
||||||
import {
|
|
||||||
dirModeHandle,
|
|
||||||
filterDirContent,
|
|
||||||
getDirContent
|
|
||||||
} from '@/views/management/management.util'
|
|
||||||
|
|
||||||
import imageCard from '@/components/image-card/image-card.vue'
|
|
||||||
import selectedInfoBar from '@/components/selected-info-bar/selected-info-bar.vue'
|
|
||||||
import folderCard from '@/components/folder-card/folder-card.vue'
|
|
||||||
import imageSelector from '@/components/image-selector/image-selector.vue'
|
|
||||||
import { UploadedImageModel } from '@/common/model/upload.model'
|
|
||||||
|
|
||||||
const store = useStore()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
|
|
||||||
const loggingStatus = computed(() => store.getters.getUserLoggingStatus).value
|
|
||||||
const dirObject = computed(() => store.getters.getDirObject).value
|
|
||||||
|
|
||||||
const renderKey = ref(new Date().getTime()) // key for update image-selector component
|
|
||||||
const loadingImageList = ref(false)
|
|
||||||
const listing = ref(false)
|
|
||||||
const activeIndex = ref<number>()
|
|
||||||
|
|
||||||
const currentPathDirList = ref([])
|
|
||||||
const currentPathImageList = ref([])
|
|
||||||
|
|
||||||
async function dirContentHandle(dir: string) {
|
|
||||||
loadingImageList.value = true
|
|
||||||
|
|
||||||
const dirContent = getDirContent(dir, dirObject)
|
|
||||||
if (dirContent) {
|
|
||||||
const dirs = filterDirContent(dir, dirContent, 'dir')
|
|
||||||
const images = filterDirContent(dir, dirContent, 'image')
|
|
||||||
if (!dirs.length && !images.length) {
|
|
||||||
await getContentByReposPath(dir)
|
|
||||||
} else {
|
|
||||||
currentPathDirList.value = dirs
|
|
||||||
currentPathImageList.value = images
|
|
||||||
store.commit('REPLACE_IMAGE_CARD', { checkedImgArr: currentPathImageList.value })
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
await getContentByReposPath(dir)
|
|
||||||
}
|
|
||||||
loadingImageList.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
async function initDirImageList() {
|
|
||||||
const { selectedDir, dirMode } = userConfigInfo
|
|
||||||
|
|
||||||
if (
|
|
||||||
(dirMode === 'newDir' || dirMode === 'autoDir') &&
|
|
||||||
!getDirContent(selectedDir, dirObject)
|
|
||||||
) {
|
|
||||||
userConfigInfo.selectedDir = '/'
|
|
||||||
userConfigInfo.dirMode = 'rootDir'
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!dirObject.imageList.length && !dirObject.childrenDirs.length) {
|
|
||||||
await getContentByReposPath(userConfigInfo.selectedDir)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
await dirContentHandle(userConfigInfo.selectedDir)
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleListing() {
|
|
||||||
listing.value = !listing.value
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重新加载当前目录内容（网络请求）
|
|
||||||
async function reloadCurrentDirContent() {
|
|
||||||
const { selectedDir } = userConfigInfo
|
|
||||||
await store.dispatch('DIR_IMAGE_LIST_INIT_DIR', selectedDir)
|
|
||||||
loadingImageList.value = true
|
|
||||||
await getContentByReposPath(selectedDir)
|
|
||||||
loadingImageList.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initDirImageList()
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => loggingStatus,
|
|
||||||
(nv) => {
|
|
||||||
if (nv === false) {
|
|
||||||
router.push('/config')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => userConfigInfo.selectedDir,
|
|
||||||
async (nDir) => {
|
|
||||||
dirModeHandle(nDir, store)
|
|
||||||
await dirContentHandle(nDir)
|
|
||||||
renderKey.value += 1
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => dirObject,
|
|
||||||
(nv: any) => {
|
|
||||||
const { selectedDir } = userConfigInfo
|
|
||||||
const dirContent = getDirContent(selectedDir, nv)
|
|
||||||
if (dirContent) {
|
|
||||||
currentPathDirList.value = filterDirContent(selectedDir, dirContent, 'dir')
|
|
||||||
currentPathImageList.value = filterDirContent(selectedDir, dirContent, 'image')
|
|
||||||
store.commit('REPLACE_IMAGE_CARD', { checkedImgArr: currentPathImageList.value })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
)
|
|
||||||
|
|
||||||
const isShowBatchTools = ref(false)
|
|
||||||
watch(
|
|
||||||
() => currentPathImageList.value,
|
|
||||||
(nv: UploadedImageModel[]) => {
|
|
||||||
isShowBatchTools.value = nv.filter((x) => x.checked).length > 0
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import 'management.styl';
|
|
||||||
</style>
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
.setting-title {
|
|
||||||
font-size 16rem
|
|
||||||
font-weight bold
|
|
||||||
margin 40rem 0 20rem 0
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-list {
|
|
||||||
padding 0
|
|
||||||
margin 0
|
|
||||||
|
|
||||||
.setting-item {
|
|
||||||
margin-bottom 10rem
|
|
||||||
|
|
||||||
&.last-child {
|
|
||||||
margin-bottom 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.prefix-input {
|
|
||||||
width calc(100% - 50rem)
|
|
||||||
margin-left 50rem
|
|
||||||
margin-top 15rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-encoder-title {
|
|
||||||
margin-bottom 12rem
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep() .el-radio-group {
|
|
||||||
|
|
||||||
display inline-block
|
|
||||||
|
|
||||||
.el-radio {
|
|
||||||
display block
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,149 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="page-container settings-page-container">
|
|
||||||
<div class="setting-title">个性设置：</div>
|
|
||||||
<ul class="setting-list">
|
|
||||||
<li class="setting-item">
|
|
||||||
<el-switch
|
|
||||||
v-model="userSettings.defaultHash"
|
|
||||||
@change="persistUserSettings"
|
|
||||||
active-text="上传时给图片名加上哈希码（确保图片名唯一，强烈建议开启）"
|
|
||||||
></el-switch>
|
|
||||||
</li>
|
|
||||||
<li class="setting-item">
|
|
||||||
<el-switch
|
|
||||||
v-model="userSettings.defaultPrefix"
|
|
||||||
@change="persistUserSettings"
|
|
||||||
active-text="上传时给图片名加上配置的前缀（示例：abc-image.jpg，abc- 为前缀）"
|
|
||||||
></el-switch>
|
|
||||||
<el-input
|
|
||||||
class="prefix-input"
|
|
||||||
v-if="userSettings.defaultPrefix"
|
|
||||||
v-model="userSettings.prefixName"
|
|
||||||
placeholder="请输入命名前缀"
|
|
||||||
@input="persistUserSettings"
|
|
||||||
clearable
|
|
||||||
autofocus
|
|
||||||
></el-input>
|
|
||||||
</li>
|
|
||||||
<li class="setting-item">
|
|
||||||
<el-switch
|
|
||||||
v-model="userSettings.defaultMarkdown"
|
|
||||||
@change="persistUserSettings"
|
|
||||||
active-text="上传成功后复制的图片外链启用 Markdown 格式（）"
|
|
||||||
></el-switch>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="setting-title">CDN 提供商：</div>
|
|
||||||
<ul class="setting-list">
|
|
||||||
<li class="setting-item">
|
|
||||||
<el-select
|
|
||||||
v-model="userSettings.externalLinkType"
|
|
||||||
placeholder="选择 CDN 提供商"
|
|
||||||
@change="saveUserSettings"
|
|
||||||
>
|
|
||||||
<el-option label="Staticaly" value="staticaly"></el-option>
|
|
||||||
<el-option label="Cloudflare" value="cloudflare"></el-option>
|
|
||||||
<el-option label="jsDelivr" value="jsdelivr"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="setting-title">压缩设置：</div>
|
|
||||||
<ul class="setting-list">
|
|
||||||
<li class="setting-item">
|
|
||||||
<el-switch
|
|
||||||
v-model="userSettings.isCompress"
|
|
||||||
@change="persistUserSettings"
|
|
||||||
active-text="是否压缩图片"
|
|
||||||
></el-switch>
|
|
||||||
</li>
|
|
||||||
<li class="setting-item">
|
|
||||||
<div class="img-encoder-title">选择图像编码器（压缩算法）：</div>
|
|
||||||
<el-radio-group
|
|
||||||
:disabled="!userSettings.isCompress"
|
|
||||||
v-model="userSettings.compressEncoder"
|
|
||||||
@change="persistUserSettings"
|
|
||||||
>
|
|
||||||
<el-radio :label="compressEncoder.webP">
|
|
||||||
{{ compressEncoder.webP }} （压缩后图片格式为 webp，大多数现代浏览器支持）
|
|
||||||
</el-radio>
|
|
||||||
<el-radio :label="compressEncoder.mozJPEG">
|
|
||||||
{{ compressEncoder.mozJPEG }} （压缩后图片格式为 jpg，兼容性最好）
|
|
||||||
</el-radio>
|
|
||||||
<el-radio :label="compressEncoder.avif">
|
|
||||||
{{ compressEncoder.avif }}
|
|
||||||
（压缩后图片格式为 avif，压缩比最高，目前仅谷歌浏览器支持）
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="setting-title">主题设置：</div>
|
|
||||||
<ul class="setting-list">
|
|
||||||
<li class="setting-item">
|
|
||||||
<el-select
|
|
||||||
v-model="userSettings.themeMode"
|
|
||||||
placeholder="主题模式"
|
|
||||||
@change="saveUserSettings"
|
|
||||||
>
|
|
||||||
<el-option label="自动设置" value="auto"></el-option>
|
|
||||||
<el-option label="暗夜主题" value="dark"></el-option>
|
|
||||||
<el-option label="白昼主题" value="light"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="setting-title" v-if="userSettings.themeMode === 'auto'">
|
|
||||||
设置白昼模式时间区间：
|
|
||||||
</div>
|
|
||||||
<ul class="setting-list" v-if="userSettings.themeMode === 'auto'">
|
|
||||||
<li class="setting-item">
|
|
||||||
<el-form ref="form">
|
|
||||||
<el-form-item>
|
|
||||||
<el-time-select
|
|
||||||
v-model="userSettings.autoLightThemeTime[0]"
|
|
||||||
start="00:00"
|
|
||||||
step="00:30"
|
|
||||||
end="23:59"
|
|
||||||
@change="saveUserSettings"
|
|
||||||
></el-time-select>
|
|
||||||
<span class="time-middle-space"> ~ </span>
|
|
||||||
<el-time-select
|
|
||||||
v-model="userSettings.autoLightThemeTime[1]"
|
|
||||||
:start="userSettings.autoLightThemeTime[0]"
|
|
||||||
step="00:30"
|
|
||||||
end="23:59"
|
|
||||||
@change="saveUserSettings"
|
|
||||||
></el-time-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { store } from '@/store'
|
|
||||||
import { CompressEncoderMap } from '@/utils/compress'
|
|
||||||
|
|
||||||
const userSettings = computed(() => store.getters.getUserSettings).value
|
|
||||||
|
|
||||||
const persistUserSettings = () => {
|
|
||||||
store.dispatch('USER_SETTINGS_PERSIST')
|
|
||||||
}
|
|
||||||
|
|
||||||
const compressEncoder = CompressEncoderMap
|
|
||||||
|
|
||||||
const saveUserSettings = () => {
|
|
||||||
store.dispatch('SET_USER_SETTINGS', {
|
|
||||||
...userSettings
|
|
||||||
})
|
|
||||||
persistUserSettings()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="stylus">
|
|
||||||
@import "settings.styl"
|
|
||||||
</style>
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user