From 5f893aa5c58baec6138fb250ac2561d1160e7f13 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 29 Nov 2021 09:58:23 +0800
Subject: [PATCH] refactor: installation page logo (#383)

---
 src/views/system/Installation.vue | 234 +++++++++++++++---------------
 1 file changed, 115 insertions(+), 119 deletions(-)

diff --git a/src/views/system/Installation.vue b/src/views/system/Installation.vue
index 410055fd..31d2cae0 100644
--- a/src/views/system/Installation.vue
+++ b/src/views/system/Installation.vue
@@ -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>