基于vue前端ui_基于Vue的hydrusrv前端

基于vue前端ui

水合 (hydrusrvue)

hydrusrvue is a Vue-based frontend for hydrusrv that makes use of its entire feature set, allowing you to access your media managed with hydrus server on the web. It is largely built with Bulma and optimized for all common desktop and mobile screen sizes.

hydrusrvue是hydrusrv的基于Vue的前端，它利用了其全部功能集，可让您访问通过hydrus服务器在网络上管理的媒体。它主要由Bulma构建，并针对所有常见的桌面和移动屏幕尺寸进行了优化。

View demo 查看演示 Download Source 下载源

最突出的功能是： (The most prominent features are:)

Comprehensive options to search and sort your files and tags

搜索和排序文件和标签的综合选项
A gallery mode in the files search page that allows you to comfortably view your files in a lightbox without navigating to the detail page

文件搜索页面中的图库模式，可让您轻松地在灯箱中查看文件，而无需导航到详细信息页面
Direct support for common image and video formats on the web; non-supported files can be downloaded and viewed locally

直接支持网络上常见的图像和视频格式；不受支持的文件可以在本地下载和查看
Built-in user registration and actions like changing username or password or deleting the user altogether

内置的用户注册和操作，例如更改用户名或密码或完全删除用户
The ability to define options like tag colors and default sorting methods on a per-client basis, allowing you to have different settings in each browser

能够基于每个客户端定义标签颜色和默认排序方法等选项，从而使您可以在每个浏览器中进行不同的设置
Fast delivery due to lazy loading routes

懒惰的装载路线使交货Swift
Enhanced performance on modern browsers thanks to Vue CLI's modern mode

Vue CLI的现代模式增强了现代浏览器的性能
Basic web app features that allow you to add hydrusrvue to the home screen of your smart device and use it just like a native app

基本的Web应用程序功能，可让您将hydrusrvue添加到智能设备的主屏幕，并像本机应用程序一样使用它
Experimental Electron support that allows you to built a hydrusrvue desktop app for any major platform

实验性电子支持，可让您为任何主要平台构建一个hydrusrvue桌面应用

安装 (Install)

The easiest way to install is via cloning this repository:

最简单的安装方法是克隆此存储库：

[email protected]:~$ git clone https://github.com/mserajnik/hydrusrvue.git
[email protected]:~$ cd hydrusrvue
[email protected]:hydrusrvue$ yarn

更新中 (Updating)

If you have installed via cloning the repository, you can update via Git:

如果您是通过克隆存储库安装的，则可以通过Git更新：

[email protected]:hydrusrvue$ git pull
[email protected]:hydrusrvue$ yarn

Always make sure to run yarn after updating to install any packages you might be missing.

务必确保在更新后运行yarn来安装可能缺少的任何软件包。

hydrusrvue follows Semantic Versioning and any breaking changes that require additional attention will be released under a new major version (e.g., 2.0.0). Minor version updates (e.g., 1.1.0 or 1.2.0) are therefore always safe to simply install via the routine mentioned before.

hydrusrvue遵循语义版本控制，任何需要额外注意的重大更改都将在新的主要版本(例如2.0.0 )下发布。小版本更新(例如1.1.0或1.2.0 )因此始终可以通过前面提到的例程简单地安装。

When necessary, this section will be expanded with upgrade guides to new major versions.

必要时，本节将扩展至新主要版本的升级指南。

用法 (Usage)

组态 (Configuration)

Duplicate .env.example as .env. Make use of the following options to configure your installation:

重复.env.example为.env 。使用以下选项来配置安装：

VUE_APP_TITLE=hydrusrvue: sets the title of your installation. It is used

VUE_APP_TITLE=hydrusrvue ：设置安装的标题。用了

throughout the whole application, making it possible to add some personal
在整个应用程序中，可以添加一些个人
flavor/branding.
风味/品牌。
VUE_APP_DESCRIPTION=A Vue-based frontend for hydrusrv: sets the content

VUE_APP_DESCRIPTION=A Vue-based frontend for hydrusrv ：设置内容

of
的

<meta name="description">. Be advised that hydrusrvue is not opmitized

<meta name="description"> 。提醒不要轻度屈膝

for search engines and that they might decide to ignore the description even
对于搜索引擎，他们甚至可能决定忽略该描述
if provided.
如果提供的话。
VUE_APP_ROBOTS=noindex, nofollow: sets the content of

VUE_APP_ROBOTS=noindex, nofollow ：设置内容

<meta name="robots">.

<meta name="robots"> 。
VUE_APP_API_URL=https://example.com/api: the URL to your hydrusrv

VUE_APP_API_URL=https://example.com/api您的hydrusrv的URL

API.
API。

No trailing slashes.

没有结尾的斜杠。
VUE_APP_REGISTRATION_ENABLED=true: setting this to false disables the

VUE_APP_REGISTRATION_ENABLED=true ：将其设置为false会禁用

registration page. This does not disable the registration in your hydrusrv
注册页面。这不会禁用您的hydrusrv中的注册
installation; to achieve this, use the appropriate hydrusrv setting.
安装; 为此，请使用适当的hydrusrv设置。
VUE_APP_AUTHENTICATION_REQUIRED=true: setting this to false allows the

VUE_APP_AUTHENTICATION_REQUIRED=true ：将其设置为false允许

access of all views aside the user view without logging in. This only affects
无需登录即可访问用户视图之外的所有视图。这仅影响
the frontend and must mirror the setting in hydrusrv for it to work correctly
前端，并且必须镜像hydrusrv中的设置才能使其正常工作
and without creating user experience issues.
并且不会造成用户体验问题。
VUE_APP_MIN_PASSWORD_LENGTH=16: sets the minimum password length when

VUE_APP_MIN_PASSWORD_LENGTH=16 ：设置最小密码长度

registering or updating the password. Providing a higher value than
注册或更新密码。提供更高的价值

1024

1024

will discard the value and use
将丢弃该值并使用

1024 as the minimum length instead. This

最小长度为1024 。这个

is only used for frontend validation and should mirror the setting in
仅用于前端验证，并且应在
hydrusrv for the best user experience.
hydrusrv提供最佳的用户体验。
VUE_APP_FALLBACK_FILES_SORTING_NAMESPACE=namespace: sets the fallback

VUE_APP_FALLBACK_FILES_SORTING_NAMESPACE=namespace ：设置后备

sorting namespace that is needed to not break namespace sorting. Should be
不破坏名称空间排序所需的排序名称空间。应该
set to something sensible like
设置为明智的

creator or series, depending on your

creator或series ，具体取决于您

preferences.
优先。
VUE_APP_DEFAULT_NAMESPACE_COLORS='character#00b401|creator#bb1800|meta#000000|person#008f00|series#bb2cb9|studio#941100':

VUE_APP_DEFAULT_NAMESPACE_COLORS='character#00b401|creator#bb1800|meta#000000|person#008f00|series#bb2cb9|studio#941100' ：

sets default colors for the given namespaces. The user will not be able to
设置给定名称空间的默认颜色。用户将无法
change those colors in his settings until tags under the configured
更改其设置中的颜色，直到已配置的标签下
namespaces exist. Once such tags are added to hydrusrv, the user will see the
存在名称空间。将此类标签添加到hydrusrv后，用户将看到
default colors and be able to override them.
默认颜色并能够覆盖它们。
VUE_APP_FALLBACK_TAG_COLOR='#0088fb': sets the fallback color for

VUE_APP_FALLBACK_TAG_COLOR='#0088fb' ：设置后备颜色

non-namespaced tags (if not overriden by the user).
非命名间隔的标签(如果用户未覆盖)。

发展 (Develop)

[email protected]:hydrusrvue$ yarn serve

建立 (Build)

[email protected]:hydrusrvue$ yarn build

部署 (Deploy)

After running yarn build, copy the content from dist to any webspace.

运行yarn build ，将内容从dist复制到任何Webspace。

电子 (Electron)

Disclaimer: Electron support is experimental, untested on most platforms and might contain application-breaking bugs.

免责声明： Electron支持是试验性的，在大多数平台上未经测试，并且可能包含破坏应用程序的错误。

发展 (Develop)

[email protected]:hydrusrvue$ yarn serve:electron

建立 (Build)

[email protected]:hydrusrvue$ yarn build:electron

This creates a build for your current platform. You can find the built application in dist_electron. Take a look at the electron-builder CLI parameters (the Building section) to learn how to built for other platforms. You can just attach the parameter to the yarn build:electron command. E.g., to build for Windows x64:

这将为您当前的平台创建一个构建。您可以在dist_electron找到内置的应用程序。看一看电子建造者的CLI参数(“ 建造”部分)，了解如何为其他平台建造。您只需将参数附加到yarn build:electron命令即可。例如，要为Windows x64构建：

[email protected]:hydrusrvue$ yarn build:electron --win --x64

屏幕截图 (Screenshots)

翻译自: https://vuejsexamples.com/a-vue-based-frontend-for-hydrusrv/

基于vue前端ui