From 0d69ba6d38190e0cfff08d8ecdd42b3741e68e1e Mon Sep 17 00:00:00 2001
From: johnniang <johnniang@riseup.net>
Date: Sun, 28 Apr 2019 15:16:29 +0800
Subject: [PATCH] Complete parts of installation

---
 src/api/user.js                     |   6 +-
 src/core/lazy_lib/components_use.js | 111 ++++++++---------
 src/views/system/Installation.vue   | 180 ++++++++++++++++++++++------
 3 files changed, 205 insertions(+), 92 deletions(-)

diff --git a/src/api/user.js b/src/api/user.js
index 3d01bd06..eb689fc4 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -6,14 +6,14 @@ const userApi = {}
 
 userApi.getProfile = () => {
   return service({
-    url: `${baseUrl}/profile`,
+    url: `${baseUrl}/profiles`,
     method: 'get'
   })
 }
 
 userApi.updateProfile = profile => {
   return service({
-    url: `${baseUrl}/profile`,
+    url: `${baseUrl}/profiles`,
     method: 'put',
     data: profile
   })
@@ -21,7 +21,7 @@ userApi.updateProfile = profile => {
 
 userApi.updatePassword = (oldPassword, newPassword) => {
   return service({
-    url: `${baseUrl}/profile/password`,
+    url: `${baseUrl}/profiles/password`,
     method: 'put',
     data: {
       oldPassword: oldPassword,
diff --git a/src/core/lazy_lib/components_use.js b/src/core/lazy_lib/components_use.js
index b88989b6..8f5e2dcb 100644
--- a/src/core/lazy_lib/components_use.js
+++ b/src/core/lazy_lib/components_use.js
@@ -1,4 +1,3 @@
-/* eslint-disable */
 import Vue from 'vue'
 import {
   Anchor,
@@ -47,59 +46,61 @@ import {
   Skeleton,
   Comment,
   ConfigProvider,
-  Timeline
-} from 'ant-design-vue';
+  Timeline,
+  Steps
+} from 'ant-design-vue'
 
-Vue.use(Anchor);
-Vue.use(AutoComplete);
-Vue.use(Alert);
-Vue.use(Avatar);
-Vue.use(Badge);
-Vue.use(Breadcrumb);
-Vue.use(Button);
-Vue.use(Card);
-Vue.use(Collapse);
-Vue.use(Checkbox);
-Vue.use(Col);
-Vue.use(DatePicker);
-Vue.use(Divider);
-Vue.use(Drawer);
-Vue.use(Dropdown);
-Vue.use(Form);
-Vue.use(Icon);
-Vue.use(Input);
-Vue.use(InputNumber);
-Vue.use(Layout);
-Vue.use(List);
-Vue.use(LocaleProvider);
-Vue.use(Menu);
-Vue.use(Modal);
-Vue.use(Pagination);
-Vue.use(Popconfirm);
-Vue.use(Popover);
-Vue.use(Progress);
-Vue.use(Radio);
-Vue.use(Row);
-Vue.use(Select);
-Vue.use(Spin);
-Vue.use(Switch);
-Vue.use(Table);
-Vue.use(Tree);
-Vue.use(TreeSelect);
-Vue.use(Tabs);
-Vue.use(Tag);
-Vue.use(TimePicker);
-Vue.use(Tooltip);
-Vue.use(Upload);
-Vue.use(Skeleton);
-Vue.use(Comment);
-Vue.use(ConfigProvider);
-Vue.use(Timeline);
+Vue.use(Anchor)
+Vue.use(AutoComplete)
+Vue.use(Alert)
+Vue.use(Avatar)
+Vue.use(Badge)
+Vue.use(Breadcrumb)
+Vue.use(Button)
+Vue.use(Card)
+Vue.use(Collapse)
+Vue.use(Checkbox)
+Vue.use(Col)
+Vue.use(DatePicker)
+Vue.use(Divider)
+Vue.use(Drawer)
+Vue.use(Dropdown)
+Vue.use(Form)
+Vue.use(Icon)
+Vue.use(Input)
+Vue.use(InputNumber)
+Vue.use(Layout)
+Vue.use(List)
+Vue.use(LocaleProvider)
+Vue.use(Menu)
+Vue.use(Modal)
+Vue.use(Pagination)
+Vue.use(Popconfirm)
+Vue.use(Popover)
+Vue.use(Progress)
+Vue.use(Radio)
+Vue.use(Row)
+Vue.use(Select)
+Vue.use(Spin)
+Vue.use(Switch)
+Vue.use(Table)
+Vue.use(Tree)
+Vue.use(TreeSelect)
+Vue.use(Tabs)
+Vue.use(Tag)
+Vue.use(TimePicker)
+Vue.use(Tooltip)
+Vue.use(Upload)
+Vue.use(Skeleton)
+Vue.use(Comment)
+Vue.use(ConfigProvider)
+Vue.use(Timeline)
+Vue.use(Steps)
 
-Vue.prototype.$message = message;
-Vue.prototype.$notification = notification;
-Vue.prototype.$info = Modal.info;
-Vue.prototype.$success = Modal.success;
-Vue.prototype.$error = Modal.error;
-Vue.prototype.$warning = Modal.warning;
-Vue.prototype.$confirm = Modal.confirm;
+Vue.prototype.$message = message
+Vue.prototype.$notification = notification
+Vue.prototype.$info = Modal.info
+Vue.prototype.$success = Modal.success
+Vue.prototype.$error = Modal.error
+Vue.prototype.$warning = Modal.warning
+Vue.prototype.$confirm = Modal.confirm
diff --git a/src/views/system/Installation.vue b/src/views/system/Installation.vue
index 5f7f58ca..c6a91b56 100644
--- a/src/views/system/Installation.vue
+++ b/src/views/system/Installation.vue
@@ -1,47 +1,139 @@
 <template>
   <div>
-    <a-row>
+    <a-row
+      class="height-100"
+      type="flex"
+      justify="center"
+      align="middle"
+    >
       <a-col
-        :xl="12"
-        :offset="6"
+        :xl="8"
+        :md="12"
+        :sm="20"
+        :xs="24"
       >
         <div class="card-container">
-          <a-card :hoverable="true">
-            <div class="logo">
+          <a-card
+            :hoverable="true"
+            title="Halo 安装向导"
+          >
+            <!-- <div class="logo">
               Halo<small style="font-size: 14px;">安装向导</small>
-            </div>
+            </div> -->
 
+            <a-steps :current="stepCurrent">
+              <a-step title="博主信息">
+                <a-icon
+                  type="user"
+                  slot="icon"
+                />
+              </a-step>
+              <a-step title="博客信息">
+                <a-icon
+                  type="rocket"
+                  slot="icon"
+                />
+              </a-step>
+              <a-step title="数据迁移">
+                <a-icon
+                  type="fork"
+                  slot="icon"
+                />
+              </a-step>
+            </a-steps>
+            <a-divider dashed />
+            <!-- Blogger info -->
             <a-form
-              :form="form"
-              :layout="horizontal"
+              layout="horizontal"
+              v-show="stepCurrent == 0"
             >
-              <a-form-item label="博客名称">
+              <a-form-item
+                label="博客名称"
+                v-bind="formItemLayout"
+              >
                 <a-input />
               </a-form-item>
-              <a-form-item label="博客地址">
+              <a-form-item
+                label="博客地址"
+                v-bind="formItemLayout"
+              >
                 <a-input />
               </a-form-item>
-              <a-form-item label="用户邮箱">
-                <a-input />
+              <a-form-item
+                label="用户名"
+                v-bind="formItemLayout"
+              >
+                <a-input v-model="installation.username" />
               </a-form-item>
-              <a-form-item label="用户名">
-                <a-input />
+              <a-form-item
+                label="用户昵称"
+                v-bind="formItemLayout"
+              >
+                <a-input v-model="installation.nickname" />
               </a-form-item>
-              <a-form-item label="用户昵称">
-                <a-input />
+              <a-form-item
+                label="用户邮箱"
+                v-bind="formItemLayout"
+              >
+                <a-input v-model="installation.email" />
               </a-form-item>
-              <a-form-item label="用户密码">
-                <a-input />
+              <a-form-item
+                label="用户密码"
+                v-bind="formItemLayout"
+              >
+                <a-input v-model="installation.password" />
               </a-form-item>
-              <a-form-item label="确定密码">
-                <a-input />
-              </a-form-item>
-              <a-form-item>
-                <a-button type="primary">
-                  安装
-                </a-button>
+              <a-form-item
+                label="确定密码"
+                v-bind="formItemLayout"
+              >
+                <a-input v-model="installation.confirmPassword" />
               </a-form-item>
             </a-form>
+
+            <!-- Blog info -->
+
+            <a-form
+              layout="horizontal"
+              v-show="stepCurrent == 1"
+            >
+              <a-form-item
+                label="博客标题"
+                v-bind="formItemLayout"
+              >
+                <a-input v-model="installation.title" />
+              </a-form-item>
+              <a-form-item
+                label="博客地址"
+                v-bind="formItemLayout"
+              >
+                <a-input v-model="installation.url" />
+              </a-form-item>
+            </a-form>
+
+            <!-- Data migration -->
+            <a-row
+              type="flex"
+              justify="space-between"
+            >
+              <div>
+                <a-button
+                  class="previus-button"
+                  v-if="stepCurrent != 0"
+                  @click="stepCurrent--"
+                >上一步</a-button>
+                <a-button
+                  type="primary"
+                  v-if="stepCurrent != 2"
+                  @click="stepCurrent++"
+                >下一步</a-button>
+              </div>
+              <a-button
+                v-if="stepCurrent == 2"
+                type="danger"
+                icon="upload"
+              >安装</a-button>
+            </a-row>
           </a-card>
         </div>
       </a-col>
@@ -53,21 +145,33 @@
 export default {
   data() {
     return {
-      wrapperCol: {
-        xl: { span: 8 },
-        lg: { span: 8 },
-        sm: { span: 12 },
-        xs: { span: 24 }
-      }
+      formItemLayout: {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+          lg: { span: 4 },
+          xl: { span: 4 },
+          xxl: { span: 3 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 19 },
+          lg: { span: 20 },
+          xl: { span: 20 },
+          xxl: { span: 21 }
+        }
+      },
+      installation: {},
+      stepCurrent: 0
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-.card-container {
-  padding-top: 50px;
-}
+// .card-container {
+//   padding-top: 50px;
+// }
 .logo {
   font-size: 56px;
   text-align: center;
@@ -76,4 +180,12 @@ export default {
   color: #444;
   text-shadow: #b2baba 0.1em 0.1em 0.2em;
 }
+
+.height-100 {
+  height: 100vh;
+}
+
+.previus-button {
+  margin-right: 1rem;
+}
 </style>