Complete parts of installation

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,

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
+  Timeline,
-} from 'ant-design-vue';
+  Steps
+} from 'ant-design-vue'
 
-Vue.use(Anchor);
+Vue.use(Anchor)
-Vue.use(AutoComplete);
+Vue.use(AutoComplete)
-Vue.use(Alert);
+Vue.use(Alert)
-Vue.use(Avatar);
+Vue.use(Avatar)
-Vue.use(Badge);
+Vue.use(Badge)
-Vue.use(Breadcrumb);
+Vue.use(Breadcrumb)
-Vue.use(Button);
+Vue.use(Button)
-Vue.use(Card);
+Vue.use(Card)
-Vue.use(Collapse);
+Vue.use(Collapse)
-Vue.use(Checkbox);
+Vue.use(Checkbox)
-Vue.use(Col);
+Vue.use(Col)
-Vue.use(DatePicker);
+Vue.use(DatePicker)
-Vue.use(Divider);
+Vue.use(Divider)
-Vue.use(Drawer);
+Vue.use(Drawer)
-Vue.use(Dropdown);
+Vue.use(Dropdown)
-Vue.use(Form);
+Vue.use(Form)
-Vue.use(Icon);
+Vue.use(Icon)
-Vue.use(Input);
+Vue.use(Input)
-Vue.use(InputNumber);
+Vue.use(InputNumber)
-Vue.use(Layout);
+Vue.use(Layout)
-Vue.use(List);
+Vue.use(List)
-Vue.use(LocaleProvider);
+Vue.use(LocaleProvider)
-Vue.use(Menu);
+Vue.use(Menu)
-Vue.use(Modal);
+Vue.use(Modal)
-Vue.use(Pagination);
+Vue.use(Pagination)
-Vue.use(Popconfirm);
+Vue.use(Popconfirm)
-Vue.use(Popover);
+Vue.use(Popover)
-Vue.use(Progress);
+Vue.use(Progress)
-Vue.use(Radio);
+Vue.use(Radio)
-Vue.use(Row);
+Vue.use(Row)
-Vue.use(Select);
+Vue.use(Select)
-Vue.use(Spin);
+Vue.use(Spin)
-Vue.use(Switch);
+Vue.use(Switch)
-Vue.use(Table);
+Vue.use(Table)
-Vue.use(Tree);
+Vue.use(Tree)
-Vue.use(TreeSelect);
+Vue.use(TreeSelect)
-Vue.use(Tabs);
+Vue.use(Tabs)
-Vue.use(Tag);
+Vue.use(Tag)
-Vue.use(TimePicker);
+Vue.use(TimePicker)
-Vue.use(Tooltip);
+Vue.use(Tooltip)
-Vue.use(Upload);
+Vue.use(Upload)
-Vue.use(Skeleton);
+Vue.use(Skeleton)
-Vue.use(Comment);
+Vue.use(Comment)
-Vue.use(ConfigProvider);
+Vue.use(ConfigProvider)
-Vue.use(Timeline);
+Vue.use(Timeline)
+Vue.use(Steps)
 
-Vue.prototype.$message = message;
+Vue.prototype.$message = message
-Vue.prototype.$notification = notification;
+Vue.prototype.$notification = notification
-Vue.prototype.$info = Modal.info;
+Vue.prototype.$info = Modal.info
-Vue.prototype.$success = Modal.success;
+Vue.prototype.$success = Modal.success
-Vue.prototype.$error = Modal.error;
+Vue.prototype.$error = Modal.error
-Vue.prototype.$warning = Modal.warning;
+Vue.prototype.$warning = Modal.warning
-Vue.prototype.$confirm = Modal.confirm;
+Vue.prototype.$confirm = Modal.confirm

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"
+        :xl="8"
-        :offset="6"
+        :md="12"
+        :sm="20"
+        :xs="24"
       >
         <div class="card-container">
-          <a-card :hoverable="true">
+          <a-card
-            <div class="logo">
+            :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-form-item
-                <a-input />
+                label="用户名"
+                v-bind="formItemLayout"
+              >
+                <a-input v-model="installation.username" />
               </a-form-item>
-              <a-form-item label="用户名">
+              <a-form-item
-                <a-input />
+                label="用户昵称"
+                v-bind="formItemLayout"
+              >
+                <a-input v-model="installation.nickname" />
               </a-form-item>
-              <a-form-item label="用户昵称">
+              <a-form-item
-                <a-input />
+                label="用户邮箱"
+                v-bind="formItemLayout"
+              >
+                <a-input v-model="installation.email" />
               </a-form-item>
-              <a-form-item label="用户密码">
+              <a-form-item
-                <a-input />
+                label="用户密码"
+                v-bind="formItemLayout"
+              >
+                <a-input v-model="installation.password" />
               </a-form-item>
-              <a-form-item label="确定密码">
+              <a-form-item
-                <a-input />
+                label="确定密码"
-              </a-form-item>
+                v-bind="formItemLayout"
-              <a-form-item>
+              >
-                <a-button type="primary">
+                <a-input v-model="installation.confirmPassword" />
-                  安装
-                </a-button>
               </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: {
+      formItemLayout: {
-        xl: { span: 8 },
+        labelCol: {
-        lg: { span: 8 },
+          xs: { span: 24 },
-        sm: { span: 12 },
+          sm: { span: 5 },
-        xs: { span: 24 }
+          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 {
+// .card-container {
-  padding-top: 50px;
+//   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>