mirror of https://github.com/halo-dev/halo-admin
refactor: installation page logo (#383)
Ryan Wang
GitHub
parent
e3532fa4e9
commit
5f893aa5c5
|
|
@ -1,125 +1,121 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-row align="middle" class="h-screen" justify="center" type="flex">
|
||||
<a-col :lg="16" :md="20" :sm="20" :xl="12" :xs="23" :xxl="8">
|
||||
<div class="card-container animated fadeIn">
|
||||
<a-card :bordered="false" style="box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;">
|
||||
<div class="halo-logo">
|
||||
<span
|
||||
>Halo
|
||||
<small>安装向导</small>
|
||||
</span>
|
||||
</div>
|
||||
<a-alert :message="`欢迎使用 Halo，您正在安装的是 Halo ${VERSION}。`" show-icon type="success" />
|
||||
<!-- Blogger info -->
|
||||
<div class="mt-5 mb-5">
|
||||
<a-radio-group v-model="installationMode">
|
||||
<a-radio-button value="new">
|
||||
全新安装
|
||||
</a-radio-button>
|
||||
<a-radio-button value="import">
|
||||
数据导入
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<a-form-model
|
||||
v-show="isInstallMode"
|
||||
ref="installationForm"
|
||||
:model="form.model"
|
||||
:rules="form.rules"
|
||||
class="installationForm animated fadeIn"
|
||||
layout="horizontal"
|
||||
>
|
||||
<a-divider dashed orientation="left">
|
||||
管理员信息
|
||||
</a-divider>
|
||||
<a-form-model-item prop="username">
|
||||
<a-input v-model="form.model.username" placeholder="用户名">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="username">
|
||||
<a-input v-model="form.model.nickname" placeholder="用户昵称">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="email">
|
||||
<a-input v-model="form.model.email" placeholder="用户邮箱">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="mail" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="password">
|
||||
<a-input v-model="form.model.password" placeholder="登录密码（8-100位）" type="password">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="confirmPassword">
|
||||
<a-input v-model="form.model.confirmPassword" placeholder="确认登录密码" type="password">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-divider dashed orientation="left">
|
||||
站点信息
|
||||
</a-divider>
|
||||
<a-form-model-item prop="url">
|
||||
<a-input v-model="form.model.url" placeholder="博客地址">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="link" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="title">
|
||||
<a-input v-model="form.model.title" placeholder="博客标题">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="book" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<a-row align="middle" class="h-screen" justify="center" type="flex">
|
||||
<a-col :lg="16" :md="20" :sm="20" :xl="12" :xs="23" :xxl="8">
|
||||
<div class="card-container animated fadeIn">
|
||||
<a-card :bordered="false" style="box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;">
|
||||
<div class="halo-logo">
|
||||
<img alt="Halo Logo" src="/images/logo.svg" />
|
||||
<span>安装向导</span>
|
||||
</div>
|
||||
<a-alert :message="`欢迎使用 Halo，您正在安装的是 Halo ${VERSION}。`" show-icon type="success" />
|
||||
<!-- Blogger info -->
|
||||
<div class="mt-5 mb-5">
|
||||
<a-radio-group v-model="installationMode">
|
||||
<a-radio-button value="new">
|
||||
全新安装
|
||||
</a-radio-button>
|
||||
<a-radio-button value="import">
|
||||
数据导入
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<a-form-model
|
||||
v-show="isInstallMode"
|
||||
ref="installationForm"
|
||||
:model="form.model"
|
||||
:rules="form.rules"
|
||||
class="installationForm animated fadeIn"
|
||||
layout="horizontal"
|
||||
>
|
||||
<a-divider dashed orientation="left">
|
||||
管理员信息
|
||||
</a-divider>
|
||||
<a-form-model-item prop="username">
|
||||
<a-input v-model="form.model.username" placeholder="用户名">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="username">
|
||||
<a-input v-model="form.model.nickname" placeholder="用户昵称">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="email">
|
||||
<a-input v-model="form.model.email" placeholder="用户邮箱">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="mail" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="password">
|
||||
<a-input v-model="form.model.password" placeholder="登录密码（8-100位）" type="password">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="confirmPassword">
|
||||
<a-input v-model="form.model.confirmPassword" placeholder="确认登录密码" type="password">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-divider dashed orientation="left">
|
||||
站点信息
|
||||
</a-divider>
|
||||
<a-form-model-item prop="url">
|
||||
<a-input v-model="form.model.url" placeholder="博客地址">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="link" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="title">
|
||||
<a-input v-model="form.model.title" placeholder="博客标题">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="book" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
|
||||
<!-- Data migration -->
|
||||
<div v-show="isImportMode" class="animated fadeIn">
|
||||
<FilePondUpload
|
||||
ref="upload"
|
||||
:accepts="['application/json']"
|
||||
:multiple="false"
|
||||
:uploadHandler="onImportUpload"
|
||||
label="拖拽或点击选择数据文件<br>请确认是否为 Halo 后台导出的文件。"
|
||||
name="file"
|
||||
></FilePondUpload>
|
||||
</div>
|
||||
<!-- Data migration -->
|
||||
<div v-show="isImportMode" class="animated fadeIn">
|
||||
<FilePondUpload
|
||||
ref="upload"
|
||||
:accepts="['application/json']"
|
||||
:multiple="false"
|
||||
:uploadHandler="onImportUpload"
|
||||
label="拖拽或点击选择数据文件<br>请确认是否为 Halo 后台导出的文件。"
|
||||
name="file"
|
||||
></FilePondUpload>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<ReactiveButton
|
||||
v-if="isInstallMode"
|
||||
:errored="form.installErrored"
|
||||
:loading="form.installing"
|
||||
block
|
||||
erroredText="安装失败"
|
||||
icon="check"
|
||||
loadedText="安装成功"
|
||||
size="large"
|
||||
text="安装"
|
||||
type="primary"
|
||||
@callback="handleInstallCallback"
|
||||
@click="handleInstall"
|
||||
></ReactiveButton>
|
||||
<ReactiveButton
|
||||
v-if="isImportMode"
|
||||
:errored="form.importErrored"
|
||||
:loading="form.importing"
|
||||
block
|
||||
erroredText="导入失败"
|
||||
icon="import"
|
||||
loadedText="导入成功"
|
||||
size="large"
|
||||
text="导入"
|
||||
type="primary"
|
||||
@callback="handleImportCallback"
|
||||
@click="handleImport"
|
||||
></ReactiveButton>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<ReactiveButton
|
||||
v-if="isInstallMode"
|
||||
:errored="form.installErrored"
|
||||
:loading="form.installing"
|
||||
block
|
||||
erroredText="安装失败"
|
||||
icon="check"
|
||||
loadedText="安装成功"
|
||||
size="large"
|
||||
text="安装"
|
||||
type="primary"
|
||||
@callback="handleInstallCallback"
|
||||
@click="handleInstall"
|
||||
></ReactiveButton>
|
||||
<ReactiveButton
|
||||
v-if="isImportMode"
|
||||
:errored="form.importErrored"
|
||||
:loading="form.importing"
|
||||
block
|
||||
erroredText="导入失败"
|
||||
icon="import"
|
||||
loadedText="导入成功"
|
||||
size="large"
|
||||
text="导入"
|
||||
type="primary"
|
||||
@callback="handleImportCallback"
|
||||
@click="handleImport"
|
||||
></ReactiveButton>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue