wip: install page

client/api/contentApi.ts

@@ -104,15 +104,21 @@ async function get(path: string, data?: any = {}) {
 async function post(path: string, data?: any = {}) {
   const { __body, ...other } = data;
 
-  const res = await configs.axios.post(path, { params: other, data: __body });
+  const res = await configs.axios.post(path, __body, {
+    params: other,
+    data: __body,
+  });
 
   return decodeResponseData(res.data);
 }
 
 async function put(path: string, data?: any = {}) {
   const { __body, ...other } = data;
 
-  const res = await configs.axios.put(path, { params: other, data: __body });
+  const res = await configs.axios.put(path, __body, {
+    params: other,
+    data: __body,
+  });
 
   return decodeResponseData(res.data);
 }

client/api/index.ts

@@ -1,11 +1,13 @@
 import { isSSR } from '../utils'
 import { globalConfigs } from '../configs'
 import { initConfig } from './contentApi'
+import { initConfig as initAdminConfig } from './adminApi'
 import { CategoryDTO, TagDTO } from './contentApiDefine'
 import axios from 'axios'
 
 export * from './contentApiDefine'
 export * from './contentApi'
+export { installationsPost } from './adminApi'
 
 export const target = globalConfigs.isDev
   ? 'http://localhost:9555'
@@ -17,9 +19,8 @@ export const axiosInstance = axios.create({
   baseURL: target
 })
 
-initConfig({
-  target
-})
+initConfig({ target })
+initAdminConfig({ target })
 
 // fix typedef
 export interface TagDTOMore extends TagDTO {

client/components/VLink.vue

@@ -2,7 +2,7 @@
   <a
     :href="href"
     :target="open ? '_blank' : ''"
-    class="hover:text-blue-500 cursor-pointer transition-colors"
+    class="v-link hover:text-blue-500 cursor-pointer transition-colors"
     @click="(e) => $emit('click', e)"
   >
     <slot>{{ content }}</slot>
@@ -17,12 +17,13 @@ export default defineComponent({
     href: String,
     open: Boolean,
     content: String
-  }
+  },
+  emits: ['click']
 })
 </script>
 
 <style>
-.active {
+.v-link.active {
   @apply text-blue-500;
 }
 </style>

client/components/VNav.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="v-nav">
+    <span class="v-nav-bg" :style="style"></span>
+    <button
+      v-for="(name, i) in items"
+      :key="i"
+      :ref="(e) => (btns[i] = e)"
+      class="v-nav-item"
+      :class="{ active: i === active }"
+      @click="switchNav(i)"
+    >
+      {{ name }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  PropType,
+  reactive,
+  ref,
+  watchEffect
+} from '@vue/runtime-core'
+
+export default defineComponent({
+  props: {
+    items: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    currentStep: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ['change', 'update:currentStep'],
+  setup(props, ctx) {
+    const active = ref(props.currentStep)
+
+    const btns = reactive<HTMLButtonElement[]>([])
+
+    const style = reactive({
+      left: '0px',
+      width: '0px'
+    })
+
+    const switchNav = (idx: number) => {
+      active.value = idx
+
+      const el = btns[idx]
+      if (!el) {
+        return
+      }
+
+      style.left = el.offsetLeft + 'px'
+      style.width = el.clientWidth + 'px'
+
+      ctx.emit('change', idx)
+      ctx.emit('update:currentStep', idx)
+    }
+
+    watchEffect(() => {
+      switchNav(props.currentStep)
+    })
+
+    onMounted(() => {
+      switchNav(0)
+    })
+
+    return {
+      active,
+      style,
+      btns,
+      switchNav
+    }
+  }
+})
+</script>
+
+<style scoped lang="less">
+.v-nav {
+  display: inline-flex;
+  position: relative;
+  width: 100%;
+  justify-content: center;
+  // border: 1px solid;
+  // @apply border-gray-500 bg-gray-50;
+
+  @h: 40px;
+
+  height: @h;
+
+  &-bg {
+    position: absolute;
+    top: -1px;
+    left: 0;
+    height: @h;
+    z-index: 0;
+    // border: 1px solid;
+    // border-width: 1px 0;
+
+    @apply border-blue-500 bg-blue-100;
+
+    transition: all ease 0.4s;
+  }
+
+  &-item {
+    z-index: 1;
+    height: @h;
+    padding: 0 10px;
+    transition: all ease 0.4s;
+    @apply text-gray-400;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.active {
+      @apply text-blue-500;
+    }
+  }
+}
+</style>

client/components/VSteps.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="v-steps">
+    <div class="v-steps-nav">
+      <v-nav
+        v-model:current-step="active"
+        :items="steps"
+        @change="switchStep"
+      ></v-nav>
+    </div>
+    <div class="v-steps-content">
+      <div
+        v-for="(_, i) in steps"
+        :key="i"
+        class="v-step"
+        :class="{ active: active === i }"
+      >
+        <slot :name="`step-${i}`">
+          Slot [step-{{ i }}] Not Defined!
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, watchEffect } from 'vue'
+
+export default defineComponent({
+  props: {
+    steps: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    currentStep: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ['update:currentStep'],
+  setup(props, ctx) {
+    const active = ref(props.currentStep)
+
+    const switchStep = (stepIdx: number) => {
+      active.value = stepIdx
+      ctx.emit('update:currentStep', stepIdx)
+    }
+
+    watchEffect(() => {
+      switchStep(props.currentStep)
+    })
+
+    return {
+      active,
+      switchStep
+    }
+  }
+})
+</script>
+
+<style lang="less">
+.v-steps {
+  &-content {
+    padding: 10px;
+  }
+}
+
+.v-step {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
+</style>