diff --git a/src/App.vue b/src/App.vue
index 525efa1..084d28e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
-    <Nav v-if="isShowNav" />
+    <Nav v-if="state.isShowNav" />
     <div class="layout">
       <router-view />
-      <CustomSlider v-if="isShowSlider"></CustomSlider>
+      <CustomSlider v-if="state.isShowSlider"></CustomSlider>
     </div>
     <ArrowUp></ArrowUp>
     <!-- <Footer v-if="isShowNav"></Footer> -->
@@ -11,7 +11,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineComponent, defineAsyncComponent, reactive, onMounted } from "vue";
+import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { isMobileOrPc } from "./utils/utils";
 
 // 移动端 rem 单位适配
@@ -26,80 +27,68 @@ if (isMobileOrPc()) {
 export default defineComponent({
   name: "App",
   components: {
-    Nav: defineAsyncComponent(() =>
-      import('./components/Nav.vue')
+    Nav: defineAsyncComponent(() => import("./components/Nav.vue")),
+    CustomSlider: defineAsyncComponent(
+      () => import("./components/CustomSlider.vue")
     ),
-    CustomSlider: defineAsyncComponent(() =>
-      import('./components/CustomSlider.vue')
-    ),
-    Footer: defineAsyncComponent(() =>
-      import('./components/Footer.vue')
-    ),
-    ArrowUp: defineAsyncComponent(() =>
-      import('./components/Footer.vue')
-    ),
-  },
-  data() {
-    return {
-      isShowNav: false,
-      isShowSlider: false,
-    };
+    Footer: defineAsyncComponent(() => import("./components/Footer.vue")),
+    ArrowUp: defineAsyncComponent(() => import("./components/Footer.vue")),
   },
   watch: {
     $route: function (val: any, oldVal: any) {
       this.routeChange(val, oldVal);
-      // const referrer: any = document.getElementById("referrer");
-      // if (val.path === "/") {
-      //   this.isShowNav = false;
-      //   referrer.setAttribute("content", "always");
-      // } else {
-      //   this.isShowNav = true;
-      //   referrer.setAttribute("content", "never");
-      // }
-      // if (
-      //   val.path === "/articles" ||
-      //   val.path === "/archive" ||
-      //   val.path === "/project" ||
-      //   val.path === "/timeline" ||
-      //   val.path === "/message"
-      // ) {
-      //   this.isShowSlider = true;
-      // } else {
-      //   this.isShowSlider = false;
-      // }
-      // if (isMobileOrPc()) {
-      //   this.isShowSlider = false;
-      // }
     },
   },
-  methods: {
-    routeChange(val: any, oldVal: any): void {
+  setup() {
+    const state = reactive({
+      isShowNav: false,
+      isShowSlider: false,
+    });
+
+    // const router = useRouter();
+    const route = useRoute();
+
+    const routeChange = (val: any, oldVal: any): void => {
       const referrer: any = document.getElementById("referrer");
       if (val.path === "/") {
-        this.isShowNav = false;
+        state.isShowNav = false;
         referrer.setAttribute("content", "always");
       } else {
-        this.isShowNav = true;
+        state.isShowNav = true;
         referrer.setAttribute("content", "never");
       }
-      if (
-        val.path === "/articles" ||
-        val.path === "/archive" ||
-        val.path === "/project" ||
-        val.path === "/timeline" ||
-        val.path === "/message"
-      ) {
-        this.isShowSlider = true;
+      const navs = [
+        "/articles",
+        "/archive",
+        "/archive",
+        "/project",
+        "/timeline",
+        "/message",
+      ];
+      if (navs.includes(val.path)) {
+        state.isShowSlider = true;
       } else {
-        this.isShowSlider = false;
+        state.isShowSlider = false;
       }
       if (isMobileOrPc()) {
-        this.isShowSlider = false;
+        state.isShowSlider = false;
       }
-    },
-  },
-  mounted(): void {
-    this.routeChange(this.$route, this.$route);
+    };
+
+    onMounted(() => {
+        routeChange(route, route);
+    })
+
+    // onBeforeRouteUpdate((to: any, from: any) => {
+    //     console.log(to, "=====");
+    //     console.log(from, "=====");
+    //     routeChange(to, from);
+    // });
+
+    return {
+      state,
+      routeChange,
+    };
   },
 });
 </script>
@@ -109,14 +98,13 @@ export default defineComponent({
 @import url("./less/index.less");
 @import url("./less/mobile.less");
 #app {
-    font-family: Avenir,Helvetica,Arial,sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: left;
-    color: #2c3e50;
-    width: 1200px;
-    margin: 0 auto;
-    padding-top: 61px;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: left;
+  color: #2c3e50;
+  // width: 1200px;
+  padding-top: 61px;
 }
 img {
   vertical-align: bottom;
diff --git a/src/components/About.vue b/src/components/About.vue
deleted file mode 100644
index 2c53d16..0000000
--- a/src/components/About.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <img
-    alt="Vue logo"
-    src="../assets/logo.png"
-  />
-  <h1>{{ msg }}</h1>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'About',
-  data() {
-    return {
-      msg: 'About Vue 3.0 + Vite!'
-    }
-  },
-  setup() {}
-})
-</script>
diff --git a/src/components/ArrowUp.vue b/src/components/ArrowUp.vue
index a779872..c0175c8 100644
--- a/src/components/ArrowUp.vue
+++ b/src/components/ArrowUp.vue
@@ -9,35 +9,39 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, reactive, onMounted } from "vue";
 
 export default defineComponent({
   name: "ArrowUp",
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       isShowBtn: false,
-    };
-  },
-  mounted() {
-    // 当网页向下滑动 20px 出现"返回顶部" 按钮
-    window.onscroll = (): void => {
-      if (
-        window.document.body.scrollTop > 100 ||
-        window.document.documentElement.scrollTop > 100
-      ) {
-        this.isShowBtn = true;
-      } else {
-        this.isShowBtn = false;
-      }
-    };
-  },
-  methods: {
-    topFunction(): void {
+    });
+
+    onMounted(() => {
+      // 当网页向下滑动 20px 出现"返回顶部" 按钮
+      window.onscroll = (): void => {
+        if (
+          window.document.body.scrollTop > 100 ||
+          window.document.documentElement.scrollTop > 100
+        ) {
+          state.isShowBtn = true;
+        } else {
+          state.isShowBtn = false;
+        }
+      };
+    });
+
+    const topFunction = (): void => {
       document.body.scrollTop = 0;
       document.documentElement.scrollTop = 0;
-    },
+    }
+
+    return {
+      state,
+      topFunction
+    };
   },
-  setup() {},
 });
 </script>
 <style scoped>
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 31b2690..00df399 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -2,14 +2,14 @@
   <el-dialog
     title="评论"
     width="60%"
-    v-model="dialogDodel"
+    v-model="state.dialogDodel"
     @close="cancel"
   >
     <el-form>
       <el-form-item>
         <el-input
           type="textarea"
-          v-model="content"
+          v-model="state.content"
           placeholder="文明社会，理性评论"
           autocomplete="off"
         ></el-input>
@@ -32,9 +32,10 @@
 </template>
 
 <script lang="ts">
-import config from "../utils/config";
-import { ToUser } from "../types/index";
-import { defineComponent } from "vue";
+import { ElMessage } from "element-plus";
+import { defineComponent, reactive, watch } from "vue";
+import service from "../utils/https";
+import urls from "../utils/urls";
 
 export default defineComponent({
   name: "Comment",
@@ -57,53 +58,31 @@ export default defineComponent({
     },
   },
   emits: ["ok", "cancel"],
-  data() {
-    return {
-      dialogDodel: this.visible,
+  setup(props, context) {
+    const state = reactive({
+      dialogDodel: props.visible,
       btnLoading: false,
       content: "",
       cacheTime: 0, // 缓存时间
       times: 0, // 留言次数
-    };
-  },
-  watch: {
-    dialogDodel: {
-      handler(val: any, oldVal: any) {
-        if (!val) {
-          this.$emit("cancel", val);
-        }
-      },
-      // immediate: true
-    },
-    visible: {
-      handler(val: any, oldVal: any) {
-        console.log("val: ", val);
-        this.dialogDodel = val;
-      },
-      // immediate: true
-    },
-  },
-  // computed: {
-  //   dialogVisible(): boolean {
-  //     return this.visible;
-  //   },
-  // },
-  methods: {
-    cancel(): boolean {
-      this.$emit("cancel", false);
+    });
+
+    const cancel = (): boolean => {
+      context.emit("cancel", false);
       return false;
-    },
-    async handleOk(): Promise<void> {
-      if (!this.article_id) {
-        (this as any).$message({
+    };
+
+    const handleOk = async (): Promise<void> => {
+      if (!props.article_id) {
+        ElMessage({
           message: "该文章不存在！",
           type: "error",
         });
         return;
       }
 
-      if (this.times > 2) {
-        (this as any).$message({
+      if (state.times > 2) {
+        ElMessage({
           message: "您今天评论的次数已经用完，明天再来评论吧！",
           type: "warning",
         });
@@ -112,16 +91,16 @@ export default defineComponent({
 
       let now = new Date();
       let nowTime = now.getTime();
-      if (nowTime - this.cacheTime < 4000) {
-        (this as any).$message({
+      if (nowTime - state.cacheTime < 4000) {
+        ElMessage({
           message: "您评论太过频繁，1 分钟后再来评论吧！",
           type: "warning",
         });
         return;
       }
 
-      if (!this.content) {
-        (this as any).$message({
+      if (!state.content) {
+        ElMessage({
           message: "评论内容不能为空",
           type: "error",
         });
@@ -133,33 +112,42 @@ export default defineComponent({
         let userInfo = JSON.parse(window.sessionStorage.userInfo);
         user_id = userInfo._id;
       } else {
-        (this as any).$message({
+        ElMessage({
           message: "登录才能评论，请先登录！",
           type: "warning",
         });
         return;
       }
-      this.btnLoading = true;
-      await (this as any).$https.post((this as any).$urls.addThirdComment, {
-        article_id: this.article_id,
+      state.btnLoading = true;
+      await service.post(urls.addThirdComment, {
+        article_id: props.article_id,
         user_id,
-        comment_id: this.comment_id,
-        to_user: JSON.stringify(this.to_user),
-        content: this.content,
+        comment_id: props.comment_id,
+        to_user: JSON.stringify(props.to_user),
+        content: state.content,
       });
-      this.btnLoading = false;
-      this.times++;
+      state.btnLoading = false;
+      state.times++;
 
-      this.cacheTime = nowTime;
-      this.content = "";
-      this.$emit("ok", false);
-      (this as any).$message({
+      state.cacheTime = nowTime;
+      state.content = "";
+      context.emit("ok", false);
+      ElMessage({
         message: "操作成功",
         type: "success",
       });
-    },
+    };
+
+    watch(props, (val, oldVal) => {
+      state.dialogDodel = val.visible;
+    });
+
+    return {
+      state,
+      cancel,
+      handleOk,
+    };
   },
-  setup() {},
 });
 </script>
 <style scoped>
diff --git a/src/components/CommentList.vue b/src/components/CommentList.vue
index 3daf1cd..35e08c5 100644
--- a/src/components/CommentList.vue
+++ b/src/components/CommentList.vue
@@ -88,9 +88,9 @@
       </div>
     </div>
     <Comment
-      :visible="visible"
-      :to_user="to_user"
-      :comment_id="comment_id"
+      :visible="state.visible"
+      :to_user="state.to_user"
+      :comment_id="state.comment_id"
       :article_id="article_id"
       @ok="handleOk"
       @cancel="handleCancel"
@@ -98,7 +98,8 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from "vue";
+import { ElMessage } from "element-plus";
+import { defineComponent, defineAsyncComponent, reactive } from "vue";
 import { timestampToTime } from "../utils/utils";
 import { ToUser } from "../types/index";
 
@@ -121,8 +122,8 @@ export default defineComponent({
       default: "",
     },
   },
-  data() {
-    return {
+  setup(props, context) {
+    const state = reactive({
       visible: false,
       comment_id: "",
       to_user: {
@@ -130,28 +131,30 @@ export default defineComponent({
         name: "",
         avatar: "",
         type: 0,
-      } as ToUser,
-    };
-  },
-  methods: {
-    formatTime(value: string | Date): string {
+      }
+    });
+
+    const formatTime = (value: string | Date): string => {
       return timestampToTime(value, true);
-    },
-    handleCancel(): void {
-      this.visible = false;
-    },
-    handleOk(): void {
-      this.visible = false;
-      this.$emit("refreshArticle");
-    },
+    };
+
+    const handleCancel = (): void => {
+      state.visible = false;
+    };
+
+    const handleOk = (): void => {
+      state.visible = false;
+      context.emit("refreshArticle");
+    };
+
     // 添加评论
-    showCommentModal(
+    const showCommentModal = (
       commitId: string,
       user: ToUser,
       secondUser?: ToUser
-    ): boolean | void {
+    ): boolean | void => {
       if (!window.sessionStorage.userInfo) {
-        (this as any).$message({
+        ElMessage({
           message: "登录才能点赞，请先登录！",
           type: "warning",
         });
@@ -159,19 +162,25 @@ export default defineComponent({
       }
       // 添加三级评论
       if (secondUser) {
-        this.visible = true;
-        this.comment_id = commitId;
-        this.to_user = user;
+        state.visible = true;
+        state.comment_id = commitId;
+        state.to_user = user;
       } else {
         // 添加二级评论
-        this.visible = true;
-        this.comment_id = commitId;
-        this.to_user = user;
+        state.visible = true;
+        state.comment_id = commitId;
+        state.to_user = user;
       }
-      console.log("this.visible: ", this.visible);
-    },
+    };
+
+    return {
+      state,
+      showCommentModal,
+      handleOk,
+      handleCancel,
+      formatTime,
+    };
   },
-  setup() {},
 });
 </script>
 <style lang="less" scoped>
diff --git a/src/components/CustomSlider.vue b/src/components/CustomSlider.vue
index 58d9840..d33a83a 100644
--- a/src/components/CustomSlider.vue
+++ b/src/components/CustomSlider.vue
@@ -23,7 +23,7 @@
     <div class="tags">
       <div class="title">标签云</div>
       <router-link
-        v-for="item in list"
+        v-for="item in state.list"
         class="item"
         :key="item._id"
         :to="`/articles?tag_id=${item._id}&tag_name=${item.name}&category_id=`"
@@ -56,12 +56,14 @@
 
 <script lang="ts">
 import { Params, TagsData } from "../types/index";
-import { defineComponent } from "vue";
+import { defineComponent, reactive, onMounted } from "vue";
+import service from "../utils/https";
+import urls from "../utils/urls";
 
 export default defineComponent({
   name: "CustomSlider",
-  data() {
-    return {
+  setup(props, context) {
+    const state = reactive({
       isLoadEnd: false,
       isLoading: false,
       list: [] as Array<any>,
@@ -71,31 +73,31 @@ export default defineComponent({
         pageNum: 1,
         pageSize: 100,
       } as Params,
-    };
-  },
-  methods: {
-    async handleSearch(): Promise<void> {
-      this.isLoading = true;
-      const data: TagsData = await (this as any).$https.get(
-        (this as any).$urls.getTagList,
-        {
-          params: this.params,
-        }
-      );
-      this.isLoading = false;
+    });
+
+    const handleSearch = async (): Promise<void> => {
+      state.isLoading = true;
+      const data: TagsData = await service.get(urls.getTagList, {
+        params: state.params,
+      });
+      state.isLoading = false;
 
-      this.list = [...this.list, ...data.list];
-      this.total = data.count;
-      this.params.pageNum++;
-      if (this.total === this.list.length) {
-        this.isLoadEnd = true;
+      state.list = [...state.list, ...data.list];
+      state.total = data.count;
+      state.params.pageNum++;
+      if (state.total === state.list.length) {
+        state.isLoadEnd = true;
       }
-    },
-  },
-  mounted(): void {
-    this.handleSearch();
-  },
-  setup() {},
+    };
+
+    onMounted(() => {
+      handleSearch();
+    });
+
+    return {
+      state,
+    };
+  }
 });
 </script>
 
diff --git a/src/components/Login.vue b/src/components/Login.vue
deleted file mode 100644
index 4810524..0000000
--- a/src/components/Login.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <Dialog
-    title="登录"
-    width="60%"
-    :visible="dialogVisible"
-    @close="cancel"
-  >
-    <Form>
-      <FormItem
-        label="邮箱"
-        placeholder="邮箱"
-        :label-width="formLabelWidth"
-      >
-        <Input
-          v-model="params.email"
-          autocomplete="off"
-        ></Input>
-      </FormItem>
-      <FormItem
-        label="密码"
-        :label-width="formLabelWidth"
-      >
-        <Input
-          type="password"
-          placeholder="密码"
-          v-model="params.password"
-          autocomplete="off"
-        ></Input>
-      </FormItem>
-    </Form>
-    <div
-      slot="footer"
-      class="dialog-footer"
-    >
-      <Button
-        type="success"
-        @click="handleOAuth"
-      >github 授权登录</Button>
-      <Button
-        type="primary"
-        @click="handleOk"
-      >确 定</Button>
-    </div>
-  </Dialog>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import config from "../utils/config";
-import { LoginParams, UserInfo } from "../types/index";
-
-export default defineComponent({
-  name: "Login",
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      btnLoading: false,
-      loading: false,
-      formLabelWidth: "60px",
-      params: {
-        email: "",
-        password: "",
-      } as LoginParams,
-    };
-  },
-  computed: {
-    dialogVisible(): boolean {
-      return this.visible;
-    },
-  },
-  methods: {
-    handleOAuth(): void {
-      // 保存授权前的页面链接内容
-      let preventHistory = {
-        pathname: window.location.pathname,
-        search: window.location.search,
-      };
-      window.sessionStorage.preventHistory = JSON.stringify(preventHistory);
-      // window.location.href = 'https://github.com/login/oauth/authorize?client_id=6de90ab270aea2bdb01c&redirect_uri=http://biaochenxuying.cn/login'
-      window.location.href = `${config.oauth_uri}?client_id=${config.client_id}&redirect_uri=${config.redirect_uri}`;
-    },
-    handleOk(): void {
-      const reg = new RegExp(
-        "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
-      );
-      if (!this.params.email) {
-        (this as any).$message({
-          message: "邮箱不能为空！",
-          type: "warning",
-        });
-        return;
-      } else if (!reg.test(this.params.email)) {
-        (this as any).$message({
-          message: "请输入格式正确的邮箱！",
-          type: "warning",
-        });
-        return;
-      } else if (!this.params.password) {
-        (this as any).$message({
-          message: "密码不能为空",
-          type: "warning",
-        });
-        return;
-      }
-      this.submit();
-    },
-    cancel(): boolean {
-      this.$emit("cancel", false);
-      return false;
-    },
-    async submit(): Promise<void> {
-      const data: UserInfo = await (this as any).$https.post(
-        (this as any).$urls.login,
-        this.params
-      );
-      const userInfo: UserInfo = {
-        _id: data._id,
-        name: data.name,
-        avatar: data.avatar,
-      };
-      window.sessionStorage.userInfo = JSON.stringify(userInfo);
-      this.$emit("ok", false);
-      (this as any).$message({
-        message: "登录成功",
-        type: "success",
-      });
-    },
-  },
-  setup() {},
-});
-</script>
\ No newline at end of file
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index a67a9e5..ff22274 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      v-if="!isMobile"
+      v-if="!state.isMobile"
       class="nav"
     >
       <div class="nav-content">
@@ -18,7 +18,7 @@
           <el-col :span="16">
             <el-menu
               :router="true"
-              :default-active="activeIndex"
+              :default-active="state.activeIndex"
               active-text-color="#409eff"
               class="el-menu-demo"
               mode="horizontal"
@@ -27,7 +27,7 @@
               <el-menuItem
                 :route="l.path"
                 :index="l.index"
-                v-for="l in list"
+                v-for="l in state.list"
                 :key="l.index"
               >
                 {{l.name}}
@@ -95,16 +95,16 @@
             >
           </router-link>
         </div>
-        <div class="title">{{title}}</div>
+        <div class="title">{{state.title}}</div>
         <div
           class="menu"
           @click="handleMenu"
         ><i class="el-icon-menu"></i></div>
       </div>
       <div
-        v-if="isShow"
+        v-if="state.isShow"
         class="nav-mobile-content"
-        :class="{'enter-slideUp': enterSlideUp,'leave-slideDown': leaveSlideDown}"
+        :class="{'enter-slideUp': state.enterSlideUp,'leave-slideDown': state.leaveSlideDown}"
       >
         <div class="list">
           <div
@@ -174,15 +174,15 @@
       </div>
     </div>
     <div
-      v-if="isShow"
+      v-if="state.isShow"
       class="mask"
-      :class="{'mask-fade-out': leaveSlideDown}"
+      :class="{'mask-fade-out': state.leaveSlideDown}"
       @click="handleHideMenu"
     ></div>
     <RegisterAndLogin
-      :visible="visible"
-      :isMobile="isMobile"
-      :handleFlag="handleFlag"
+      :visible="state.visible"
+      :isMobile="state.isMobile"
+      :handleFlag="state.handleFlag"
       @ok="handleOk"
       @cancel="handleCancel"
     ></RegisterAndLogin>
@@ -190,7 +190,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from "vue";
+import {
+  defineComponent,
+  defineAsyncComponent,
+  reactive,
+} from "vue";
+import service from "../utils/https";
+import urls from "../utils/urls";
+import { useStore } from "vuex";
+import { useRoute, useRouter } from "vue-router";
+import { ElLoading, ElMessage } from "element-plus";
+import { key } from "../store";
 import { isMobileOrPc, getQueryStringByName } from "../utils/utils";
 import { UserInfo, NavListItem } from "../types/index";
 
@@ -201,8 +211,45 @@ export default defineComponent({
       () => import("./RegisterAndLogin.vue")
     ),
   },
-  data() {
-    return {
+  computed: {
+    userInfo(): UserInfo {
+      let userInfo: UserInfo = {
+        _id: "",
+        name: "",
+        avatar: "",
+      };
+      if (window.sessionStorage.userInfo) {
+        userInfo = JSON.parse(window.sessionStorage.userInfo);
+        (this as any).$store.commit("SAVE_USER", {
+          userInfo,
+        });
+      }
+      if ((this as any).$store.state.user.userInfo) {
+        userInfo = (this as any).$store.state.user.userInfo;
+      }
+      return userInfo;
+    },
+  },
+  watch: {
+    $route: {
+      handler(val: any, oldVal: any) {
+        this.routeChange(val, oldVal);
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    // 授权登录的，有 code 参数
+    this.routeChange(this.$route, this.$route);
+    const code: string = getQueryStringByName("code");
+    if (code) {
+      this.getUser(code);
+    }
+  },
+  setup(props, context) {
+    const store = useStore(key);
+    const router = useRouter();
+    const state = reactive({
       visible: false,
       handleFlag: "",
       title: "首页",
@@ -248,81 +295,76 @@ export default defineComponent({
       leaveSlideDown: false,
       isShow: false,
       isMobile: isMobileOrPc(),
-    };
-  },
-  computed: {
-    userInfo(): UserInfo {
-      let userInfo: UserInfo = {
-        _id: "",
-        name: "",
-        avatar: "",
-      };
-      if (window.sessionStorage.userInfo) {
-        userInfo = JSON.parse(window.sessionStorage.userInfo);
-        (this as any).$store.commit("SAVE_USER", {
-          userInfo,
-        });
-      }
-      if ((this as any).$store.state.user.userInfo) {
-        userInfo = (this as any).$store.state.user.userInfo;
-      }
-      return userInfo;
-    },
-  },
-  watch: {
-    $route: {
-      handler(val: any, oldVal: any) {
-        this.routeChange(val, oldVal);
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    routeChange(val: any, oldVal: any) {
-      for (let i = 0; i < this.list.length; i++) {
-        const l: NavListItem = this.list[i];
+    });
+
+    const routeChange = (val: any, oldVal: any) => {
+      for (let i = 0; i < state.list.length; i++) {
+        const l: NavListItem = state.list[i];
         if (l.path === val.path) {
-          this.activeIndex = i + 1 + "";
-          this.title = l.name;
+          state.activeIndex = i + 1 + "";
+          state.title = l.name;
           break;
         }
       }
-    },
-    handleClickMenu(route?: string): void {
-      this.isShow = false;
+    };
+
+    const handleSelect = (val: string, oldVal: string): void => {
+      state.activeIndex = val;
+    };
+
+    const handleOk = (value: boolean): void => {
+      state.visible = value;
+    };
+
+    const handleCancel = (value: boolean): void => {
+      state.visible = value;
+    };
+
+    const handleClick = (value: string): void => {
+      state.handleFlag = value;
+      state.visible = true;
+    };
+
+    const handleLogout = (): void => {
+      window.sessionStorage.userInfo = "";
+      store.commit("SAVE_USER", {
+        userInfo: {
+          _id: "",
+          name: "",
+          avatar: "",
+        },
+      });
+    };
+
+    const handleClickMenu = (route?: string): void => {
+      state.isShow = false;
       if (route === "/login") {
-        this.handleFlag = "login";
-        this.visible = true;
+        state.handleFlag = "login";
+        state.visible = true;
       }
       if (route === "/register") {
-        this.handleFlag = "register";
-        this.visible = true;
+        state.handleFlag = "register";
+        state.visible = true;
       }
       if (route === "/logout") {
-        this.handleLogout();
+        handleLogout();
       }
-    },
-    handleMenu(): void {
-      this.isShow = true;
-      this.enterSlideUp = true;
-    },
-    handleHideMenu(): void {
-      this.enterSlideUp = false;
-      this.leaveSlideDown = true;
-      setTimeout(() => {
-        this.leaveSlideDown = false;
-        this.isShow = false;
-      }, 300);
-    },
-    async getUser(code: string): Promise<void> {
-      const loading: any = (this as any).$loading({
+    };
+
+    const handleMenu = (): void => {
+      state.isShow = true;
+      state.enterSlideUp = true;
+    };
+
+    const getUser = async (code: string): Promise<void> => {
+      const loading: any = ElLoading.service({
         lock: true,
         text: "Loading",
         spinner: "el-icon-loading",
         background: "rgba(255, 255, 255, 0.7)",
       });
-      const data: UserInfo = await (this as any).$https.post(
-        (this as any).$urls.getUser,
+      const data: UserInfo = await service.post(
+        urls.getUser,
         { code },
         { withCredentials: true }
       );
@@ -333,55 +375,46 @@ export default defineComponent({
         name: data.name,
         avatar: data.avatar,
       };
-      (this as any).$store.commit("SAVE_USER", {
+      store.commit("SAVE_USER", {
         userInfo,
       });
       window.sessionStorage.userInfo = JSON.stringify(userInfo);
-      (this as any).$message({
+      ElMessage({
         message: "操作成功",
         type: "success",
       });
       let preventHistory = JSON.parse(window.sessionStorage.preventHistory);
       if (preventHistory) {
-        this.$router.push({
+        router.push({
           path: preventHistory.name,
           query: preventHistory.query,
         });
       }
-    },
-    handleLogout(): void {
-      window.sessionStorage.userInfo = "";
-      (this as any).$store.commit("SAVE_USER", {
-        userInfo: {
-          _id: "",
-          name: "",
-          avatar: "",
-        },
-      });
-    },
-    handleClick(value: string): void {
-      this.handleFlag = value;
-      this.visible = true;
-    },
-    handleCancel(value: boolean): void {
-      this.visible = value;
-    },
-    handleOk(value: boolean): void {
-      this.visible = value;
-    },
-    handleSelect(val: string, oldVal: string): void {
-      this.activeIndex = val;
-    },
-  },
-  mounted() {
-    // 授权登录的，有 code 参数
-    this.routeChange(this.$route, this.$route);
-    const code: string = getQueryStringByName("code");
-    if (code) {
-      this.getUser(code);
-    }
+    };
+
+    const handleHideMenu = (): void => {
+      state.enterSlideUp = false;
+      state.leaveSlideDown = true;
+      setTimeout(() => {
+        state.leaveSlideDown = false;
+        state.isShow = false;
+      }, 300);
+    };
+
+    return {
+      state,
+      handleCancel,
+      handleOk,
+      handleClick,
+      handleLogout,
+      handleClickMenu,
+      handleMenu,
+      getUser,
+      handleSelect,
+      routeChange,
+      handleHideMenu
+    };
   },
-  setup() {},
 });
 </script>
 
diff --git a/src/components/RegisterAndLogin.vue b/src/components/RegisterAndLogin.vue
index 84430ac..d3397ab 100644
--- a/src/components/RegisterAndLogin.vue
+++ b/src/components/RegisterAndLogin.vue
@@ -2,17 +2,17 @@
   <el-dialog
     title="登录"
     :width="isMobile ? '90%' : '50%'"
-    v-model="dialogDodel"
+    v-model="state.dialogDodel"
     @close="cancel"
     :show-close="true"
   >
     <el-form>
       <el-formItem
         label="邮箱"
-        :label-width="formLabelWidth"
+        :label-width="state.formLabelWidth"
       >
         <el-input
-          v-model="params.email"
+          v-model="state.params.email"
           placeholder="邮箱"
           autocomplete="off"
         >
@@ -20,22 +20,22 @@
       </el-formItem>
       <el-formItem
         label="密码"
-        :label-width="formLabelWidth"
+        :label-width="state.formLabelWidth"
       >
         <el-input
           type="password"
           placeholder="密码"
-          v-model="params.password"
+          v-model="state.params.password"
           autocomplete="off"
         ></el-input>
       </el-formItem>
       <el-formItem
         v-if="handleFlag === 'register'"
         label="昵称"
-        :label-width="formLabelWidth"
+        :label-width="state.formLabelWidth"
       >
         <el-input
-          v-model="params.name"
+          v-model="state.params.name"
           placeholder="用户名或昵称"
           autocomplete="off"
         ></el-input>
@@ -43,10 +43,10 @@
       <el-formItem
         v-if="handleFlag === 'register'"
         label="手机"
-        :label-width="formLabelWidth"
+        :label-width="state.formLabelWidth"
       >
         <el-input
-          v-model="params.phone"
+          v-model="state.params.phone"
           placeholder="手机号"
           autocomplete="off"
         ></el-input>
@@ -54,10 +54,10 @@
       <el-formItem
         v-if="handleFlag === 'register'"
         label="简介"
-        :label-width="formLabelWidth"
+        :label-width="state.formLabelWidth"
       >
         <el-input
-          v-model="params.desc"
+          v-model="state.params.desc"
           placeholder="个人简介"
           autocomplete="off"
         ></el-input>
@@ -73,13 +73,13 @@
       >github 授权登录</el-button>
       <el-button
         v-if="handleFlag === 'login'"
-        :loading="btnLoading"
+        :loading="state.btnLoading"
         type="primary"
         @click="handleOk"
       >登 录</el-button>
       <el-button
         v-if="handleFlag === 'register'"
-        :loading="btnLoading"
+        :loading="state.btnLoading"
         type="primary"
         @click="handleOk"
       >注 册</el-button>
@@ -88,9 +88,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, reactive, watch } from "vue";
+import { useStore } from "vuex";
+import { useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import { key } from '../store'
 import config from "../utils/config";
 import { RegAndLogParams, UserInfo } from "../types/index";
+import service from "../utils/https";
+import urls from "../utils/urls";
 
 export default defineComponent({
   name: "RegisterAndLogin",
@@ -109,12 +115,13 @@ export default defineComponent({
     },
   },
   emits: ["ok", "cancel"],
-  data() {
-    return {
-      dialogDodel: this.visible,
+  setup(props, context) {
+    const store = useStore(key);
+    const state = reactive({
+      dialogDodel: props.visible,
       btnLoading: false,
       loading: false,
-      formLabelWidth: this.isMobile ? "40px" : "60px",
+      formLabelWidth: props.isMobile ? "40px" : "60px",
       params: {
         email: "",
         name: "",
@@ -122,118 +129,106 @@ export default defineComponent({
         phone: "",
         desc: "",
       } as RegAndLogParams,
-    };
-  },
-  watch: {
-    dialogDodel: {
-      handler(val: any, oldVal: any) {
-        this.$emit("cancel", val);
-      },
-      immediate: true,
-    },
-    visible: {
-      handler(val: any, oldVal: any) {
-        this.dialogDodel = val;
-      },
-      immediate: true,
-    },
-  },
-  // computed: {
-  //   dialogVisible(): boolean {
-  //     return this.visible;
-  //   },
-  // },
-  methods: {
-    handleOAuth(): void {
+    });
+
+    const route = useRoute();
+    const handleOAuth = (): void => {
       // 保存授权前的页面链接内容
       let preventHistory: object = {
-        name: this.$route.name,
-        query: this.$route.query,
+        name: route.name,
+        query: route.query,
       };
       window.sessionStorage.preventHistory = JSON.stringify(preventHistory);
       // window.location.href = 'https://github.com/login/oauth/authorize?client_id=6de90ab270aea2bdb01c&redirect_uri=http://biaochenxuying.cn/login'
       window.location.href = `${config.oauth_uri}?client_id=${config.client_id}&redirect_uri=${config.redirect_uri}`;
-    },
-    handleOk(): void {
+    };
+
+    const submit = async (): Promise<void> => {
+      let data: any = "";
+      state.btnLoading = true;
+      if (props.handleFlag === "register") {
+        data = await service.post(urls.register, state.params);
+      } else {
+        data = await service.post(urls.login, state.params);
+      }
+      state.btnLoading = false;
+
+      const userInfo: UserInfo = {
+        _id: data._id,
+        name: data.name,
+        avatar: data.avatar,
+      };
+      store.commit("SAVE_USER", {
+        userInfo,
+      });
+      window.sessionStorage.userInfo = JSON.stringify(userInfo);
+      context.emit("ok", false);
+      ElMessage({
+        message: "操作成功",
+        type: "success",
+      });
+    };
+
+    const handleOk = (): void => {
       const reg = new RegExp(
         "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
       ); //正则表达式
-      if (!this.params.email) {
-        // Message.warning("邮箱不能为空！");
-        (this as any).$message({
+      if (!state.params.email) {
+        ElMessage({
           message: "邮箱不能为空！",
           type: "warning",
         });
         return;
-      } else if (!reg.test(this.params.email)) {
-        (this as any).$message({
+      } else if (!reg.test(state.params.email)) {
+        ElMessage({
           message: "请输入格式正确的邮箱！",
           type: "warning",
         });
         return;
       }
-      if (this.handleFlag === "register") {
-        if (!this.params.password) {
-          (this as any).$message({
+      if (props.handleFlag === "register") {
+        if (!state.params.password) {
+          ElMessage({
             message: "密码不能为空！",
             type: "warning",
           });
           return;
-        } else if (!this.params.name) {
-          (this as any).$message({
+        } else if (!state.params.name) {
+          ElMessage({
             message: "用户名不能为空！",
             type: "warning",
           });
           return;
         }
         const re = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
-        if (this.params.phone && !re.test(this.params.phone)) {
-          (this as any).$message({
+        if (state.params.phone && !re.test(state.params.phone)) {
+          ElMessage({
             message: "请输入正确的手机号!",
             type: "warning",
           });
           return;
         }
       }
-      this.submit();
-    },
-    cancel(): boolean {
-      this.$emit("cancel", false);
+      submit();
+    };
+
+    const cancel = (): boolean => {
+      context.emit("cancel", false);
       return false;
-    },
-    async submit(): Promise<void> {
-      let data: any = "";
-      this.btnLoading = true;
-      if (this.handleFlag === "register") {
-        data = await (this as any).$https.post(
-          (this as any).$urls.register,
-          this.params
-        );
-      } else {
-        data = await (this as any).$https.post(
-          (this as any).$urls.login,
-          this.params
-        );
-      }
-      this.btnLoading = false;
+    };
 
-      const userInfo: UserInfo = {
-        _id: data._id,
-        name: data.name,
-        avatar: data.avatar,
-      };
-      (this as any).$store.commit("SAVE_USER", {
-        userInfo,
-      });
-      window.sessionStorage.userInfo = JSON.stringify(userInfo);
-      this.$emit("ok", false);
-      (this as any).$message({
-        message: "操作成功",
-        type: "success",
-      });
-    },
+    watch(props, (val, oldVal) => {
+      state.dialogDodel = val.visible;
+    });
+
+    return {
+      state,
+      handleOAuth,
+      handleOk,
+      submit,
+      cancel,
+    };
   },
-  setup() {},
 });
 </script>
 <style scoped>
diff --git a/src/less/index.less b/src/less/index.less
index 04afe83..006b4a2 100644
--- a/src/less/index.less
+++ b/src/less/index.less
@@ -71,7 +71,10 @@ p > code:not([class]) {
 img {
 	max-width: 100%;
 }
-
+.container {
+	width: 1200px;
+	margin: 0 auto;
+}
 .article-detail {
 	img {
 		/* 图片居中 */
diff --git a/src/main.ts b/src/main.ts
index a9eac89..7614a53 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -24,6 +24,7 @@ import {
     ElTimelineItem,
     ElCard,
     ElTag,
+    ElIcon,
     ElCollapseTransition
 } from 'element-plus';
 
@@ -47,6 +48,7 @@ app.component(ElDropdownItem.name, ElDropdownItem);
 app.component(ElDropdown.name, ElDropdown);
 app.component(ElCard.name, ElCard);
 app.component(ElTag.name, ElTag);
+app.component(ElIcon.name, ElIcon);
 app.component(ElCollapseTransition.name, ElCollapseTransition);
 
 app.config.globalProperties.$message = ElMessage;
diff --git a/src/utils/urls.ts b/src/utils/urls.ts
index f7efc60..6f39715 100644
--- a/src/utils/urls.ts
+++ b/src/utils/urls.ts
@@ -1,5 +1,5 @@
 // url的链接
-export const urls: object = {
+export const urls: any = {
   login: "login",
   logout: "logout",
   register: "register",
diff --git a/src/views/Archive.vue b/src/views/Archive.vue
index 22d9a47..e567c8e 100644
--- a/src/views/Archive.vue
+++ b/src/views/Archive.vue
@@ -2,7 +2,7 @@
   <div class="archive left">
     <el-timeline>
       <el-timeline-item
-        v-for="(l, i) in articlesList"
+        v-for="(l, i) in state.articlesList"
         :key="l.year"
         placement="top"
         hide-timestamp
@@ -29,14 +29,16 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, reactive, onMounted } from "vue";
 import { timestampToTime } from "../utils/utils";
 import { ParamsArchive, ArchiveData } from "../types/index";
+import service from "../utils/https";
+import urls from "../utils/urls";
 
 export default defineComponent({
   name: "Archive",
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       isLoadEnd: false,
       isLoading: false,
       articlesList: [] as Array<any>,
@@ -50,34 +52,40 @@ export default defineComponent({
         category_id: "",
         pageNum: 1,
         pageSize: 10,
-      } as ParamsArchive,
-    };
-  },
-  methods: {
-    formatTime(value: string | Date): string {
+      } as ParamsArchive
+    });
+
+    const formatTime = (value: string | Date): string => {
       return timestampToTime(value, true);
-    },
-    async handleSearch(): Promise<void> {
-      this.isLoading = true;
-      const data: ArchiveData = await (this as any).$https.get(
-        (this as any).$urls.getArticleList,
+    }
+
+    const handleSearch = async (): Promise<void> => {
+      state.isLoading = true;
+      const data: ArchiveData = await service.get(
+        urls.getArticleList,
         {
-          params: this.params,
+          params: state.params,
         }
       );
-      this.isLoading = false;
-      this.articlesList = [...this.articlesList, ...data.list];
-      this.total = data.count;
-      this.params.pageNum++;
-      if (this.total === this.articlesList.length) {
-        this.isLoadEnd = true;
+      state.isLoading = false;
+      state.articlesList = [...state.articlesList, ...data.list];
+      state.total = data.count;
+      state.params.pageNum++;
+      if (state.total === state.articlesList.length) {
+        state.isLoadEnd = true;
       }
-    },
-  },
-  mounted(): void {
-    this.handleSearch();
+    }
+
+    onMounted(() => {
+      handleSearch();
+    })
+
+    return {
+      state,
+      formatTime,
+      handleSearch
+    };
   },
-  setup() {},
 });
 </script>
 <style lang="less" scoped>
diff --git a/src/views/ArticleDetail.vue b/src/views/ArticleDetail.vue
index 8871c46..2ba0543 100644
--- a/src/views/ArticleDetail.vue
+++ b/src/views/ArticleDetail.vue
@@ -2,12 +2,12 @@
   <div style="width: 100%">
     <div class="article clearfix">
       <div
-        v-show="!isLoading"
-        :style="{'width': isMobileOrPc ? '100%' : '75%'}"
+        v-show="!state.isLoading"
+        :style="{'width': state.isMobileOrPc ? '100%' : '75%'}"
         class="article-left fl"
       >
         <div class="header">
-          <h1 class="title">{{articleDetail.title}}</h1>
+          <h1 class="title">{{state.articleDetail.title}}</h1>
           <div class="author">
             <div class="avatar">
               <img
@@ -18,7 +18,7 @@
             </div>
             <div class="info">
               <span class="name">
-                <span>{{articleDetail.author}}</span>
+                <span>{{state.articleDetail.author}}</span>
               </span>
               <div
                 props-data-classes="user-follow-button-header"
@@ -26,19 +26,19 @@
               />
               <div class="meta">
                 <span class="publish-time">
-                  {{articleDetail.create_time? formatTime(articleDetail.create_time): ''}}
+                  {{state.articleDetail.create_time? formatTime(state.articleDetail.create_time): ''}}
                 </span>
                 <span class="wordage">
-                  字数 {{articleDetail.numbers}}
+                  字数 {{state.articleDetail.numbers}}
                 </span>
                 <span class="views-count">
-                  阅读 {{articleDetail.meta.views}}
+                  阅读 {{state.articleDetail.meta.views}}
                 </span>
                 <span class="comments-count">
-                  评论 {{articleDetail.meta.comments}}
+                  评论 {{state.articleDetail.meta.comments}}
                 </span>
                 <span class="likes-count">
-                  喜欢 {{articleDetail.meta.likes}}
+                  喜欢 {{state.articleDetail.meta.likes}}
                 </span>
               </div>
             </div>
@@ -48,7 +48,7 @@
             >
               <el-tag
                 size="mini"
-                v-for="tag in articleDetail.tags"
+                v-for="tag in state.articleDetail.tags"
                 :key="tag._id"
                 class="tag"
                 type="success"
@@ -61,7 +61,7 @@
           <div
             id="content"
             class="article-detail"
-            v-html="articleDetail.content"
+            v-html="state.articleDetail.content"
           >
           </div>
         </div>
@@ -70,7 +70,7 @@
             type="danger"
             size="large"
             icon="heart"
-            :loading="isLoading"
+            :loading="state.isLoading"
             @click="likeArticle"
           >
             点赞
@@ -80,40 +80,40 @@
           <el-input
             placeholder="文明社会，理性评论"
             type="textarea"
-            v-model="content"
+            v-model="state.content"
           ></el-input>
           <el-button
             style="margin-top: 15px"
             type="primary"
-            :loading="btnLoading"
+            :loading="state.btnLoading"
             @click="handleAddComment"
           >发 送</el-button>
         </div>
         <CommentList
-          v-if="!isLoading"
-          :numbers="articleDetail.meta.comments"
-          :list="articleDetail.comments"
-          :article_id="articleDetail._id"
+          v-if="!state.isLoading"
+          :numbers="state.articleDetail.meta.comments"
+          :list="state.articleDetail.comments"
+          :article_id="state.articleDetail._id"
           @refreshArticle="refreshArticle"
         />
       </div>
       <div
-        v-if="!isMobileOrPc"
+        v-if="!state.isMobileOrPc"
         style="width: 23%"
         class="article-right fr anchor"
-        v-html="articleDetail.toc"
+        v-html="state.articleDetail.toc"
       ></div>
-      <LoadingCustom v-if="isLoading"></LoadingCustom>
+      <LoadingCustom v-if="state.isLoading"></LoadingCustom>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
-import {
-  timestampToTime,
-  getQueryStringByName,
-  isMobileOrPc,
-} from "../utils/utils";
+import { defineComponent, reactive, onMounted } from "vue";
+import service from "../utils/https";
+import urls from "../utils/urls";
+import { ElMessage } from "element-plus";
+import { useRoute } from "vue-router";
+import { timestampToTime, isMobileOrPc } from "../utils/utils";
 import markdown from "../utils/markdown";
 import LoadingCustom from "../components/Loading.vue";
 import CommentList from "../components/CommentList.vue";
@@ -131,8 +131,8 @@ export default defineComponent({
     LoadingCustom,
     CommentList,
   },
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       btnLoading: false,
       isLoadEnd: false,
       isLoading: false,
@@ -166,152 +166,161 @@ export default defineComponent({
       cacheTime: 0, // 缓存时间
       times: 0, // 评论次数
       likeTimes: 0, // 点赞次数
-    };
-  },
-  mounted(): void {
-    this.params.id = this.$route.query.article_id as string;
-    // this.params.id = "5c8cfe5d26bb39b22d3a7aec";
-    if (this.$route.path === "/about") {
-      this.params.type = 3;
-    }
-    this.handleSearch();
-  },
-  methods: {
-    formatTime(value: string | Date): string {
+    });
+
+    const formatTime = (value: string | Date): string => {
       return timestampToTime(value, true);
-    },
-    refreshArticle(): void {
-      this.handleSearch();
-    },
-    async handleAddComment(): Promise<void> {
-      if (!this.articleDetail._id) {
-        (this as any).$message({
-          message: "该文章不存在！",
-          type: "error",
-        });
-        return;
-      }
+    };
 
-      if (this.times > 2) {
-        (this as any).$message({
-          message: "您今天评论的次数已经用完，明天再来评论吧！",
-          type: "warning",
-        });
-        return;
-      }
+    const handleSearch = async (): Promise<void> => {
+      state.isLoading = true;
+      const data: any = await service.post(urls.getArticleDetail, state.params);
+      state.isLoading = false;
 
-      let now = new Date();
-      let nowTime = now.getTime();
-      if (nowTime - this.cacheTime < 4000) {
-        (this as any).$message({
-          message: "您评论太过频繁，1 分钟后再来留言吧！",
+      state.articleDetail = data;
+      const article = markdown.marked(data.content);
+      article.then((res: any) => {
+        state.articleDetail.content = res.content;
+        state.articleDetail.toc = res.toc;
+      });
+      let keyword = data.keyword.join(",");
+      let description = data.desc;
+      let title = data.title;
+      document.title = title;
+      document.querySelector("#keywords").setAttribute("content", keyword);
+      document
+        .querySelector("#description")
+        .setAttribute("content", description);
+    };
+
+    const refreshArticle = (): void => {
+      handleSearch();
+    };
+
+    const likeArticle = async (): Promise<void> => {
+      if (!state.articleDetail._id) {
+        ElMessage({
+          message: "该文章不存在！",
           type: "warning",
         });
         return;
       }
 
-      if (!this.content) {
-        (this as any).$message({
-          message: "请输入内容!",
+      if (state.likeTimes > 0) {
+        ElMessage({
+          message: "您已经点过赞了！悠着点吧！",
           type: "warning",
         });
         return;
       }
-      let user_id = "";
+
+      let user_id: string = "";
       if (window.sessionStorage.userInfo) {
         let userInfo = JSON.parse(window.sessionStorage.userInfo);
         user_id = userInfo._id;
       } else {
-        (this as any).$message({
-          message: "登录才能评论，请先登录！",
+        ElMessage({
+          message: "登录才能点赞，请先登录！",
           type: "warning",
         });
         return;
       }
-
-      this.btnLoading = true;
-      await (this as any).$https.post((this as any).$urls.addComment, {
-        article_id: this.articleDetail._id,
+      let params: LikeParams = {
+        id: state.articleDetail._id,
         user_id,
-        content: this.content,
-      });
-      this.btnLoading = false;
-      this.times++;
-      this.cacheTime = nowTime;
-      this.content = "";
-      (this as any).$message({
+      };
+      await service.post(urls.likeArticle, params);
+      state.isLoading = false;
+
+      state.likeTimes++;
+      ++state.articleDetail.meta.likes;
+      ElMessage({
         message: "操作成功",
         type: "success",
       });
-      this.handleSearch();
-    },
-    async handleSearch(): Promise<void> {
-      this.isLoading = true;
-      const data: any = await (this as any).$https.post(
-        (this as any).$urls.getArticleDetail,
-        this.params
-      );
-      this.isLoading = false;
+    };
 
-      this.articleDetail = data;
-      const article = markdown.marked(data.content);
-      article.then((res: any) => {
-        this.articleDetail.content = res.content;
-        this.articleDetail.toc = res.toc;
-      });
-      let keyword = data.keyword.join(",");
-      let description = data.desc;
-      let title = data.title;
-      document.title = title;
-      document.querySelector("#keywords").setAttribute("content", keyword);
-      document
-        .querySelector("#description")
-        .setAttribute("content", description);
-    },
-    async likeArticle(): Promise<void> {
-      if (!this.articleDetail._id) {
-        (this as any).$message({
+    const handleAddComment = async (): Promise<void> => {
+      if (!state.articleDetail._id) {
+        ElMessage({
           message: "该文章不存在！",
+          type: "error",
+        });
+        return;
+      }
+
+      if (state.times > 2) {
+        ElMessage({
+          message: "您今天评论的次数已经用完，明天再来评论吧！",
           type: "warning",
         });
         return;
       }
 
-      if (this.likeTimes > 0) {
-        (this as any).$message({
-          message: "您已经点过赞了！悠着点吧！",
+      let now = new Date();
+      let nowTime = now.getTime();
+      if (nowTime - state.cacheTime < 4000) {
+        ElMessage({
+          message: "您评论太过频繁，1 分钟后再来留言吧！",
           type: "warning",
         });
         return;
       }
 
-      let user_id: string = "";
+      if (!state.content) {
+        ElMessage({
+          message: "请输入内容!",
+          type: "warning",
+        });
+        return;
+      }
+      let user_id = "";
       if (window.sessionStorage.userInfo) {
         let userInfo = JSON.parse(window.sessionStorage.userInfo);
         user_id = userInfo._id;
       } else {
-        (this as any).$message({
-          message: "登录才能点赞，请先登录！",
+        ElMessage({
+          message: "登录才能评论，请先登录！",
           type: "warning",
         });
         return;
       }
-      let params: LikeParams = {
-        id: this.articleDetail._id,
-        user_id,
-      };
-      await (this as any).$https.post((this as any).$urls.likeArticle, params);
-      this.isLoading = false;
 
-      this.likeTimes++;
-      ++this.articleDetail.meta.likes;
-      (this as any).$message({
+      state.btnLoading = true;
+      await service.post(urls.addComment, {
+        article_id: state.articleDetail._id,
+        user_id,
+        content: state.content,
+      });
+      state.btnLoading = false;
+      state.times++;
+      state.cacheTime = nowTime;
+      state.content = "";
+      ElMessage({
         message: "操作成功",
         type: "success",
       });
-    },
+      handleSearch();
+    };
+
+    const route = useRoute();
+    onMounted(() => {
+      state.params.id = route.query.article_id as string;
+      if (route.path === "/about") {
+        state.params.type = 3;
+      }
+      handleSearch();
+    });
+
+    return {
+      state,
+      formatTime,
+      handleSearch,
+      handleAddComment,
+      likeArticle,
+      refreshArticle,
+    };
   },
-  setup() {},
   beforeUnmount(): void {
     document.title = "夜尽天明的博客网站";
     document
diff --git a/src/views/Articles.vue b/src/views/Articles.vue
index 0bebcdd..a2f3d77 100644
--- a/src/views/Articles.vue
+++ b/src/views/Articles.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="left clearfix">
     <h3
-      v-if="params.tag_id"
+      v-if="state.params.tag_id"
       class="left-title"
-    >{{tag_name}} 相关的文章：</h3>
+    >{{state.tag_name}} 相关的文章：</h3>
     <ul
       class="articles-list"
       id="list"
     >
       <transition-group name="el-fade-in">
         <li
-          v-for="(article) in articlesList"
+          v-for="(article) in state.articlesList"
           :key="article._id"
           class="item"
         >
           <a
-            :href="href + article._id"
+            :href="state.href + article._id"
             target="_blank"
           >
             <img
@@ -44,13 +44,15 @@
         </li>
       </transition-group>
     </ul>
-    <LoadingCustom v-if="isLoading"></LoadingCustom>
-    <LoadEnd v-if="isLoadEnd"></LoadEnd>
+    <LoadingCustom v-if="state.isLoading"></LoadingCustom>
+    <LoadEnd v-if="state.isLoadEnd"></LoadEnd>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, reactive, onMounted, nextTick } from "vue";
+import service from "../utils/https";
+import urls from "../utils/urls";
 import LoadEnd from "../components/LoadEnd.vue";
 import LoadingCustom from "../components/Loading.vue";
 import {
@@ -95,8 +97,16 @@ export default defineComponent({
     LoadEnd,
     LoadingCustom,
   },
-  data() {
-    return {
+  watch: {
+    $route: {
+      handler(val: any, oldVal: any) {
+        this.routeChange(val, oldVal);
+      },
+      immediate: true,
+    },
+  },
+  setup(props, context) {
+    const state = reactive({
       isLoadEnd: false,
       isLoading: false,
       articlesList: [] as Array<any>,
@@ -114,64 +124,64 @@ export default defineComponent({
       href:
         import.meta.env.MODE === "development"
           ? "http://localhost:3001/articleDetail?article_id="
-          : "https://biaochenxuying.cn/articleDetail?article_id=",
-    };
-  },
-  watch: {
-    $route: {
-      handler(val: any, oldVal: any) {
-        this.routeChange(val, oldVal);
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    routeChange(val: any, oldVal: any): void {
-      this.tag_name = decodeURI(getQueryStringByName("tag_name"));
-      this.params.tag_id = getQueryStringByName("tag_id");
-      this.params.category_id = getQueryStringByName("category_id");
-      this.articlesList = [];
-      this.params.pageNum = 1;
-      this.handleSearch();
-    },
-    formatTime(value: string | Date): string {
+          : "https://biaochenxuying.cn/articleDetail?article_id="
+    });
+
+    const formatTime = (value: string | Date): string => {
       return timestampToTime(value, true);
-    },
-    async handleSearch() {
-      this.isLoading = true;
-      const data: ArticlesData = await (this as any).$https.get(
-        (this as any).$urls.getArticleList,
+    };
+
+    const handleSearch = async (): Promise<void> => {
+      state.isLoading = true;
+      const data: ArticlesData = await service.get(
+        urls.getArticleList,
         {
-          params: this.params,
+          params: state.params,
         }
       );
-      this.isLoading = false;
-      this.articlesList = [...this.articlesList, ...data.list];
-      this.total = data.count;
-      this.params.pageNum++;
-      this.$nextTick(() => {
+      state.isLoading = false;
+      state.articlesList = [...state.articlesList, ...data.list];
+      state.total = data.count;
+      state.params.pageNum++;
+      nextTick(() => {
         lazyload();
       });
-      if (data.list.length === 0 || this.total === this.articlesList.length) {
-        this.isLoadEnd = true;
+      if (data.list.length === 0 || state.total === state.articlesList.length) {
+        state.isLoadEnd = true;
         document.removeEventListener("scroll", () => {});
         window.onscroll = null;
       }
-    },
-  },
-  mounted(): void {
-    this.handleSearch();
-    window.onscroll = () => {
-      if (getScrollTop() + getWindowHeight() > getDocumentHeight() - 150) {
-        // 如果不是已经没有数据了，都可以继续滚动加载
-        if (this.isLoadEnd === false && this.isLoading === false) {
-          this.handleSearch();
+    };
+
+    const routeChange = (val: any, oldVal: any): void => {
+      state.tag_name = decodeURI(getQueryStringByName("tag_name"));
+      state.params.tag_id = getQueryStringByName("tag_id");
+      state.params.category_id = getQueryStringByName("category_id");
+      state.articlesList = [];
+      state.params.pageNum = 1;
+      handleSearch();
+    }
+
+    onMounted(() => {
+      handleSearch();
+      window.onscroll = () => {
+        if (getScrollTop() + getWindowHeight() > getDocumentHeight() - 100) {
+          // 如果不是已经没有数据了，都可以继续滚动加载
+          if (state.isLoadEnd === false && state.isLoading === false) {
+            handleSearch();
+          }
         }
-      }
+      };
+      document.addEventListener("scroll", lazyload);
+    });
+
+    return {
+      state,
+      formatTime,
+      handleSearch,
+      routeChange
     };
-    document.addEventListener("scroll", lazyload);
-  },
-  setup() {},
+  }
 });
 </script>
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 800ea19..da7c28c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -48,7 +48,7 @@
             target="_blank"
             rel="noopener noreferrer"
             class="link"
-            href="https://www.zhihu.com/people/gu-jian-qi-tan-shui/activities"
+            href="https://www.zhihu.com/people/mo-xu-ming-53/posts"
           >
             知乎
           </a>
@@ -76,24 +76,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, onMounted } from "vue";
 import { ElMessage } from "element-plus";
 
 export default defineComponent({
   name: "Home",
-  data() {
-    return {};
-  },
-  mounted() {
-    if (document.location.protocol === "http:") {
-      ElMessage({
-        message:
-          "本网站已经配置了 https，为了有更好的体验效果，请把地址前缀换成 https 哦",
-        type: "warning",
-        duration: 3000,
-      });
-    }
-    let sakura_point_vsh: string = `
+  setup() {
+    onMounted(() => {
+      if (document.location.protocol === "http:") {
+        ElMessage({
+          message:
+            "本网站已经配置了 https，为了有更好的体验效果，请把地址前缀换成 https 哦",
+          type: "warning",
+          duration: 3000,
+        });
+      }
+      let sakura_point_vsh: string = `
     uniform mat4 uProjection;
     uniform mat4 uModelview;
     uniform vec3 uResolution;
@@ -184,7 +182,7 @@ export default defineComponent({
         //-0.69315 = ln(0.5)
         distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
     }`;
-    let sakura_point_fsh: string = `
+      let sakura_point_fsh: string = `
     #ifdef GL_ES
     //precision mediump float;
     precision highp float;
@@ -255,7 +253,7 @@ export default defineComponent({
         
         gl_FragColor = vec4(col * 0.5, alpha);
     }`;
-    let fx_common_vsh: string = `
+      let fx_common_vsh: string = `
     uniform vec3 uResolution;
     attribute vec2 aPosition;
 
@@ -267,7 +265,7 @@ export default defineComponent({
         texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
         screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
     }`;
-    let bg_fsh: string = `
+      let bg_fsh: string = `
     #ifdef GL_ES
     //precision mediump float;
     precision highp float;
@@ -286,7 +284,7 @@ export default defineComponent({
         col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
         gl_FragColor = vec4(col * 0.5, 1.0);
     }`;
-    let fx_brightbuf_fsh: string = `
+      let fx_brightbuf_fsh: string = `
     #ifdef GL_ES
     //precision mediump float;
     precision highp float;
@@ -301,7 +299,7 @@ export default defineComponent({
         vec4 col = texture2D(uSrc, texCoord);
         gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
     }`;
-    let fx_dirblur_r4_fsh: string = `
+      let fx_dirblur_r4_fsh: string = `
     #ifdef GL_ES
     //precision mediump float;
     precision highp float;
@@ -321,7 +319,7 @@ export default defineComponent({
         col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
         gl_FragColor = col / 5.0;
     }`;
-    let pp_final_vsh: string = `
+      let pp_final_vsh: string = `
     uniform vec3 uResolution;
     attribute vec2 aPosition;
     varying vec2 texCoord;
@@ -331,7 +329,7 @@ export default defineComponent({
         texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
         screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
     }`;
-    let pp_final_fsh: string = `
+      let pp_final_fsh: string = `
     #ifdef GL_ES
     //precision mediump float;
     precision highp float;
@@ -353,1016 +351,1023 @@ export default defineComponent({
         gl_FragColor.a = 1.0;
     }`;
 
-    // Utilities
-    var Vector3: any = {};
-    var Matrix44: any = {};
-    Vector3.create = function (x: any, y: any, z: any) {
-      return { x: x, y: y, z: z };
-    };
-    Vector3.dot = function (v0: any, v1: any) {
-      return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;
-    };
-    Vector3.cross = function (v: any, v0: any, v1: any) {
-      v.x = v0.y * v1.z - v0.z * v1.y;
-      v.y = v0.z * v1.x - v0.x * v1.z;
-      v.z = v0.x * v1.y - v0.y * v1.x;
-    };
-    Vector3.normalize = function (v: any) {
-      var l: any = v.x * v.x + v.y * v.y + v.z * v.z;
-      if (l > 0.00001) {
-        l = 1.0 / Math.sqrt(l);
-        v.x *= l;
-        v.y *= l;
-        v.z *= l;
-      }
-    };
-    Vector3.arrayForm = function (v: any) {
-      if (v.array) {
-        v.array[0] = v.x;
-        v.array[1] = v.y;
-        v.array[2] = v.z;
-      } else {
-        v.array = new Float32Array([v.x, v.y, v.z]);
-      }
-      return v.array;
-    };
-    Matrix44.createIdentity = function () {
-      return new Float32Array([
-        1.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        1.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        1.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        1.0,
-      ]);
-    };
-    Matrix44.loadProjection = function (
-      m: any,
-      aspect: any,
-      vdeg: any,
-      near: any,
-      far: any
-    ) {
-      let h = near * Math.tan(((vdeg * Math.PI) / 180.0) * 0.5) * 2.0;
-      let w = h * aspect;
-
-      m[0] = (2.0 * near) / w;
-      m[1] = 0.0;
-      m[2] = 0.0;
-      m[3] = 0.0;
-
-      m[4] = 0.0;
-      m[5] = (2.0 * near) / h;
-      m[6] = 0.0;
-      m[7] = 0.0;
-
-      m[8] = 0.0;
-      m[9] = 0.0;
-      m[10] = -(far + near) / (far - near);
-      m[11] = -1.0;
-
-      m[12] = 0.0;
-      m[13] = 0.0;
-      m[14] = (-2.0 * far * near) / (far - near);
-      m[15] = 0.0;
-    };
-    Matrix44.loadLookAt = function (m: any, vpos: any, vlook: any, vup: any) {
-      let frontv = Vector3.create(
-        vpos.x - vlook.x,
-        vpos.y - vlook.y,
-        vpos.z - vlook.z
-      );
-      Vector3.normalize(frontv);
-      let sidev = Vector3.create(1.0, 0.0, 0.0);
-      Vector3.cross(sidev, vup, frontv);
-      Vector3.normalize(sidev);
-      let topv = Vector3.create(1.0, 0.0, 0.0);
-      Vector3.cross(topv, frontv, sidev);
-      Vector3.normalize(topv);
-
-      m[0] = sidev.x;
-      m[1] = topv.x;
-      m[2] = frontv.x;
-      m[3] = 0.0;
-
-      m[4] = sidev.y;
-      m[5] = topv.y;
-      m[6] = frontv.y;
-      m[7] = 0.0;
-
-      m[8] = sidev.z;
-      m[9] = topv.z;
-      m[10] = frontv.z;
-      m[11] = 0.0;
-
-      m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);
-      m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);
-      m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);
-      m[15] = 1.0;
-    };
-
-    //
-    var timeInfo: any = {
-      start: 0,
-      prev: 0, // Date
-      delta: 0,
-      elapsed: 0, // Number(sec)
-    };
-
-    //
-    var gl: any;
-    var renderSpec: any = {
-      width: 0,
-      height: 0,
-      aspect: 1,
-      array: new Float32Array(3),
-      halfWidth: 0,
-      halfHeight: 0,
-      halfArray: new Float32Array(3),
-      // and some render targets. see setViewport()
-    };
-    renderSpec.setSize = function (w: any, h: any) {
-      renderSpec.width = w;
-      renderSpec.height = h;
-      renderSpec.aspect = renderSpec.width / renderSpec.height;
-      renderSpec.array[0] = renderSpec.width;
-      renderSpec.array[1] = renderSpec.height;
-      renderSpec.array[2] = renderSpec.aspect;
-
-      renderSpec.halfWidth = Math.floor(w / 2);
-      renderSpec.halfHeight = Math.floor(h / 2);
-      renderSpec.halfArray[0] = renderSpec.halfWidth;
-      renderSpec.halfArray[1] = renderSpec.halfHeight;
-      renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;
-    };
-
-    function deleteRenderTarget(rt: any) {
-      gl.deleteFramebuffer(rt.frameBuffer);
-      gl.deleteRenderbuffer(rt.renderBuffer);
-      gl.deleteTexture(rt.texture);
-    }
-
-    function createRenderTarget(w: any, h: any) {
-      var ret: any = {
-        width: w,
-        height: h,
-        sizeArray: new Float32Array([w, h, w / h]),
-        dtxArray: new Float32Array([1.0 / w, 1.0 / h]),
+      // Utilities
+      var Vector3: any = {};
+      var Matrix44: any = {};
+      Vector3.create = function (x: any, y: any, z: any) {
+        return { x: x, y: y, z: z };
+      };
+      Vector3.dot = function (v0: any, v1: any) {
+        return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;
+      };
+      Vector3.cross = function (v: any, v0: any, v1: any) {
+        v.x = v0.y * v1.z - v0.z * v1.y;
+        v.y = v0.z * v1.x - v0.x * v1.z;
+        v.z = v0.x * v1.y - v0.y * v1.x;
+      };
+      Vector3.normalize = function (v: any) {
+        var l: any = v.x * v.x + v.y * v.y + v.z * v.z;
+        if (l > 0.00001) {
+          l = 1.0 / Math.sqrt(l);
+          v.x *= l;
+          v.y *= l;
+          v.z *= l;
+        }
+      };
+      Vector3.arrayForm = function (v: any) {
+        if (v.array) {
+          v.array[0] = v.x;
+          v.array[1] = v.y;
+          v.array[2] = v.z;
+        } else {
+          v.array = new Float32Array([v.x, v.y, v.z]);
+        }
+        return v.array;
+      };
+      Matrix44.createIdentity = function () {
+        return new Float32Array([
+          1.0,
+          0.0,
+          0.0,
+          0.0,
+          0.0,
+          1.0,
+          0.0,
+          0.0,
+          0.0,
+          0.0,
+          1.0,
+          0.0,
+          0.0,
+          0.0,
+          0.0,
+          1.0,
+        ]);
+      };
+      Matrix44.loadProjection = function (
+        m: any,
+        aspect: any,
+        vdeg: any,
+        near: any,
+        far: any
+      ) {
+        let h = near * Math.tan(((vdeg * Math.PI) / 180.0) * 0.5) * 2.0;
+        let w = h * aspect;
+
+        m[0] = (2.0 * near) / w;
+        m[1] = 0.0;
+        m[2] = 0.0;
+        m[3] = 0.0;
+
+        m[4] = 0.0;
+        m[5] = (2.0 * near) / h;
+        m[6] = 0.0;
+        m[7] = 0.0;
+
+        m[8] = 0.0;
+        m[9] = 0.0;
+        m[10] = -(far + near) / (far - near);
+        m[11] = -1.0;
+
+        m[12] = 0.0;
+        m[13] = 0.0;
+        m[14] = (-2.0 * far * near) / (far - near);
+        m[15] = 0.0;
+      };
+      Matrix44.loadLookAt = function (m: any, vpos: any, vlook: any, vup: any) {
+        let frontv = Vector3.create(
+          vpos.x - vlook.x,
+          vpos.y - vlook.y,
+          vpos.z - vlook.z
+        );
+        Vector3.normalize(frontv);
+        let sidev = Vector3.create(1.0, 0.0, 0.0);
+        Vector3.cross(sidev, vup, frontv);
+        Vector3.normalize(sidev);
+        let topv = Vector3.create(1.0, 0.0, 0.0);
+        Vector3.cross(topv, frontv, sidev);
+        Vector3.normalize(topv);
+
+        m[0] = sidev.x;
+        m[1] = topv.x;
+        m[2] = frontv.x;
+        m[3] = 0.0;
+
+        m[4] = sidev.y;
+        m[5] = topv.y;
+        m[6] = frontv.y;
+        m[7] = 0.0;
+
+        m[8] = sidev.z;
+        m[9] = topv.z;
+        m[10] = frontv.z;
+        m[11] = 0.0;
+
+        m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);
+        m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);
+        m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);
+        m[15] = 1.0;
       };
-      ret.frameBuffer = gl.createFramebuffer();
-      ret.renderBuffer = gl.createRenderbuffer();
-      ret.texture = gl.createTexture();
-
-      gl.bindTexture(gl.TEXTURE_2D, ret.texture);
-      gl.texImage2D(
-        gl.TEXTURE_2D,
-        0,
-        gl.RGBA,
-        w,
-        h,
-        0,
-        gl.RGBA,
-        gl.UNSIGNED_BYTE,
-        null
-      );
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-
-      gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);
-      gl.framebufferTexture2D(
-        gl.FRAMEBUFFER,
-        gl.COLOR_ATTACHMENT0,
-        gl.TEXTURE_2D,
-        ret.texture,
-        0
-      );
-
-      gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);
-      gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);
-      gl.framebufferRenderbuffer(
-        gl.FRAMEBUFFER,
-        gl.DEPTH_ATTACHMENT,
-        gl.RENDERBUFFER,
-        ret.renderBuffer
-      );
-
-      gl.bindTexture(gl.TEXTURE_2D, null);
-      gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-
-      return ret;
-    }
 
-    function compileShader(shtype: any, shsrc: any) {
-      var retsh: any = gl.createShader(shtype);
+      //
+      var timeInfo: any = {
+        start: 0,
+        prev: 0, // Date
+        delta: 0,
+        elapsed: 0, // Number(sec)
+      };
 
-      gl.shaderSource(retsh, shsrc);
-      gl.compileShader(retsh);
+      //
+      var gl: any;
+      var renderSpec: any = {
+        width: 0,
+        height: 0,
+        aspect: 1,
+        array: new Float32Array(3),
+        halfWidth: 0,
+        halfHeight: 0,
+        halfArray: new Float32Array(3),
+        // and some render targets. see setViewport()
+      };
+      renderSpec.setSize = function (w: any, h: any) {
+        renderSpec.width = w;
+        renderSpec.height = h;
+        renderSpec.aspect = renderSpec.width / renderSpec.height;
+        renderSpec.array[0] = renderSpec.width;
+        renderSpec.array[1] = renderSpec.height;
+        renderSpec.array[2] = renderSpec.aspect;
+
+        renderSpec.halfWidth = Math.floor(w / 2);
+        renderSpec.halfHeight = Math.floor(h / 2);
+        renderSpec.halfArray[0] = renderSpec.halfWidth;
+        renderSpec.halfArray[1] = renderSpec.halfHeight;
+        renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;
+      };
 
-      if (!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {
-        var errlog: any = gl.getShaderInfoLog(retsh);
-        gl.deleteShader(retsh);
-        console.error(errlog);
-        return null;
+      function deleteRenderTarget(rt: any) {
+        gl.deleteFramebuffer(rt.frameBuffer);
+        gl.deleteRenderbuffer(rt.renderBuffer);
+        gl.deleteTexture(rt.texture);
       }
-      return retsh;
-    }
 
-    function createShader(
-      vtxsrc: any,
-      frgsrc: any,
-      uniformlist: any,
-      attrlist: any
-    ) {
-      var vsh: any = compileShader(gl.VERTEX_SHADER, vtxsrc);
-      var fsh: any = compileShader(gl.FRAGMENT_SHADER, frgsrc);
-
-      if (vsh == null || fsh == null) {
-        return null;
-      }
+      function createRenderTarget(w: any, h: any) {
+        var ret: any = {
+          width: w,
+          height: h,
+          sizeArray: new Float32Array([w, h, w / h]),
+          dtxArray: new Float32Array([1.0 / w, 1.0 / h]),
+        };
+        ret.frameBuffer = gl.createFramebuffer();
+        ret.renderBuffer = gl.createRenderbuffer();
+        ret.texture = gl.createTexture();
+
+        gl.bindTexture(gl.TEXTURE_2D, ret.texture);
+        gl.texImage2D(
+          gl.TEXTURE_2D,
+          0,
+          gl.RGBA,
+          w,
+          h,
+          0,
+          gl.RGBA,
+          gl.UNSIGNED_BYTE,
+          null
+        );
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);
+        gl.framebufferTexture2D(
+          gl.FRAMEBUFFER,
+          gl.COLOR_ATTACHMENT0,
+          gl.TEXTURE_2D,
+          ret.texture,
+          0
+        );
 
-      var prog: any = gl.createProgram();
-      gl.attachShader(prog, vsh);
-      gl.attachShader(prog, fsh);
+        gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);
+        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);
+        gl.framebufferRenderbuffer(
+          gl.FRAMEBUFFER,
+          gl.DEPTH_ATTACHMENT,
+          gl.RENDERBUFFER,
+          ret.renderBuffer
+        );
 
-      gl.deleteShader(vsh);
-      gl.deleteShader(fsh);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
-      gl.linkProgram(prog);
-      if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
-        var errlog: any = gl.getProgramInfoLog(prog);
-        console.error(errlog);
-        return null;
+        return ret;
       }
 
-      if (uniformlist) {
-        prog.uniforms = {};
-        for (var i = 0; i < uniformlist.length; i++) {
-          prog.uniforms[uniformlist[i]] = gl.getUniformLocation(
-            prog,
-            uniformlist[i]
-          );
+      function compileShader(shtype: any, shsrc: any) {
+        var retsh: any = gl.createShader(shtype);
+
+        gl.shaderSource(retsh, shsrc);
+        gl.compileShader(retsh);
+
+        if (!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {
+          var errlog: any = gl.getShaderInfoLog(retsh);
+          gl.deleteShader(retsh);
+          console.error(errlog);
+          return null;
         }
+        return retsh;
       }
 
-      if (attrlist) {
-        prog.attributes = {};
-        for (let i = 0; i < attrlist.length; i++) {
-          let attr = attrlist[i];
-          prog.attributes[attr] = gl.getAttribLocation(prog, attr);
+      function createShader(
+        vtxsrc: any,
+        frgsrc: any,
+        uniformlist: any,
+        attrlist: any
+      ) {
+        var vsh: any = compileShader(gl.VERTEX_SHADER, vtxsrc);
+        var fsh: any = compileShader(gl.FRAGMENT_SHADER, frgsrc);
+
+        if (vsh == null || fsh == null) {
+          return null;
         }
-      }
 
-      return prog;
-    }
+        var prog: any = gl.createProgram();
+        gl.attachShader(prog, vsh);
+        gl.attachShader(prog, fsh);
+
+        gl.deleteShader(vsh);
+        gl.deleteShader(fsh);
+
+        gl.linkProgram(prog);
+        if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+          var errlog: any = gl.getProgramInfoLog(prog);
+          console.error(errlog);
+          return null;
+        }
 
-    function useShader(prog: any) {
-      gl.useProgram(prog);
-      for (let attr in prog.attributes) {
-        gl.enableVertexAttribArray(prog.attributes[attr]);
+        if (uniformlist) {
+          prog.uniforms = {};
+          for (var i = 0; i < uniformlist.length; i++) {
+            prog.uniforms[uniformlist[i]] = gl.getUniformLocation(
+              prog,
+              uniformlist[i]
+            );
+          }
+        }
+
+        if (attrlist) {
+          prog.attributes = {};
+          for (let i = 0; i < attrlist.length; i++) {
+            let attr = attrlist[i];
+            prog.attributes[attr] = gl.getAttribLocation(prog, attr);
+          }
+        }
+
+        return prog;
       }
-    }
 
-    function unuseShader(prog: any) {
-      for (let attr in prog.attributes) {
-        gl.disableVertexAttribArray(prog.attributes[attr]);
+      function useShader(prog: any) {
+        gl.useProgram(prog);
+        for (let attr in prog.attributes) {
+          gl.enableVertexAttribArray(prog.attributes[attr]);
+        }
       }
-      gl.useProgram(null);
-    }
 
-    /////
-    var projection: any = {
-      angle: 60,
-      nearfar: new Float32Array([0.1, 100.0]),
-      matrix: Matrix44.createIdentity(),
-    };
-    var camera: any = {
-      position: Vector3.create(0, 0, 100),
-      lookat: Vector3.create(0, 0, 0),
-      up: Vector3.create(0, 1, 0),
-      dof: Vector3.create(10.0, 4.0, 8.0),
-      matrix: Matrix44.createIdentity(),
-    };
-
-    var pointFlower: any = {};
-    // var meshFlower = {};
-    var sceneStandBy: any = false;
-
-    var BlossomParticle: any = function () {
-      this.velocity = new Array(3);
-      this.rotation = new Array(3);
-      this.position = new Array(3);
-      this.euler = new Array(3);
-      this.size = 1.0;
-      this.alpha = 1.0;
-      this.zkey = 0.0;
-    };
-
-    BlossomParticle.prototype.setVelocity = function (
-      vx: any,
-      vy: any,
-      vz: any
-    ) {
-      this.velocity[0] = vx;
-      this.velocity[1] = vy;
-      this.velocity[2] = vz;
-    };
-
-    BlossomParticle.prototype.setRotation = function (
-      rx: any,
-      ry: any,
-      rz: any
-    ) {
-      this.rotation[0] = rx;
-      this.rotation[1] = ry;
-      this.rotation[2] = rz;
-    };
-
-    BlossomParticle.prototype.setPosition = function (
-      nx: any,
-      ny: any,
-      nz: any
-    ) {
-      this.position[0] = nx;
-      this.position[1] = ny;
-      this.position[2] = nz;
-    };
-
-    BlossomParticle.prototype.setEulerAngles = function (
-      rx: any,
-      ry: any,
-      rz: any
-    ) {
-      this.euler[0] = rx;
-      this.euler[1] = ry;
-      this.euler[2] = rz;
-    };
-
-    BlossomParticle.prototype.setSize = function (s: any) {
-      this.size = s;
-    };
-
-    BlossomParticle.prototype.update = function (dt: any, et: any) {
-      this.position[0] += this.velocity[0] * dt;
-      this.position[1] += this.velocity[1] * dt;
-      this.position[2] += this.velocity[2] * dt;
-
-      this.euler[0] += this.rotation[0] * dt;
-      this.euler[1] += this.rotation[1] * dt;
-      this.euler[2] += this.rotation[2] * dt;
-    };
-
-    function createPointFlowers() {
-      // get point sizes
-      var prm: any = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
-      renderSpec.pointSize = { min: prm[0], max: prm[1] };
-
-      var vtxsrc: any = sakura_point_vsh;
-      var frgsrc: any = sakura_point_fsh;
-
-      pointFlower.program = createShader(
-        vtxsrc,
-        frgsrc,
-        [
-          "uProjection",
-          "uModelview",
-          "uResolution",
-          "uOffset",
-          "uDOF",
-          "uFade",
-        ],
-        ["aPosition", "aEuler", "aMisc"]
-      );
-
-      useShader(pointFlower.program);
-      pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);
-      pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);
-
-      // paramerters: velocity[3], rotate[3]
-      pointFlower.numFlowers = 1600;
-      pointFlower.particles = new Array(pointFlower.numFlowers);
-      // vertex attributes {position[3], euler_xyz[3], size[1]}
-      pointFlower.dataArray = new Float32Array(
-        pointFlower.numFlowers * (3 + 3 + 2)
-      );
-      pointFlower.positionArrayOffset = 0;
-      pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;
-      pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;
-
-      pointFlower.buffer = gl.createBuffer();
-      gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
-      gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
-      gl.bindBuffer(gl.ARRAY_BUFFER, null);
-
-      unuseShader(pointFlower.program);
-
-      for (let i = 0; i < pointFlower.numFlowers; i++) {
-        pointFlower.particles[i] = new BlossomParticle();
+      function unuseShader(prog: any) {
+        for (let attr in prog.attributes) {
+          gl.disableVertexAttribArray(prog.attributes[attr]);
+        }
+        gl.useProgram(null);
       }
-    }
 
-    function initPointFlowers() {
-      //area
-      pointFlower.area = Vector3.create(20.0, 20.0, 20.0);
-      pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;
-
-      pointFlower.fader.x = 10.0; //env fade start
-      pointFlower.fader.y = pointFlower.area.z; //env fade half
-      pointFlower.fader.z = 0.1; //near fade start
-
-      //particles
-      var PI2: any = Math.PI * 2.0;
-      var tmpv3: any = Vector3.create(0, 0, 0);
-      var tmpv: any = 0;
-      var symmetryrand: any = function () {
-        return Math.random() * 2.0 - 1.0;
+      /////
+      var projection: any = {
+        angle: 60,
+        nearfar: new Float32Array([0.1, 100.0]),
+        matrix: Matrix44.createIdentity(),
+      };
+      var camera: any = {
+        position: Vector3.create(0, 0, 100),
+        lookat: Vector3.create(0, 0, 0),
+        up: Vector3.create(0, 1, 0),
+        dof: Vector3.create(10.0, 4.0, 8.0),
+        matrix: Matrix44.createIdentity(),
+      };
+
+      var pointFlower: any = {};
+      // var meshFlower = {};
+      var sceneStandBy: any = false;
+
+      var BlossomParticle: any = function () {
+        this.velocity = new Array(3);
+        this.rotation = new Array(3);
+        this.position = new Array(3);
+        this.euler = new Array(3);
+        this.size = 1.0;
+        this.alpha = 1.0;
+        this.zkey = 0.0;
+      };
+
+      BlossomParticle.prototype.setVelocity = function (
+        vx: any,
+        vy: any,
+        vz: any
+      ) {
+        this.velocity[0] = vx;
+        this.velocity[1] = vy;
+        this.velocity[2] = vz;
+      };
+
+      BlossomParticle.prototype.setRotation = function (
+        rx: any,
+        ry: any,
+        rz: any
+      ) {
+        this.rotation[0] = rx;
+        this.rotation[1] = ry;
+        this.rotation[2] = rz;
+      };
+
+      BlossomParticle.prototype.setPosition = function (
+        nx: any,
+        ny: any,
+        nz: any
+      ) {
+        this.position[0] = nx;
+        this.position[1] = ny;
+        this.position[2] = nz;
       };
-      for (let i = 0; i < pointFlower.numFlowers; i++) {
-        let tmpprtcl = pointFlower.particles[i];
-
-        //velocity
-        tmpv3.x = symmetryrand() * 0.3 + 0.8;
-        tmpv3.y = symmetryrand() * 0.2 - 1.0;
-        tmpv3.z = symmetryrand() * 0.3 + 0.5;
-        Vector3.normalize(tmpv3);
-        tmpv = 2.0 + Math.random() * 1.0;
-        tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);
-
-        //rotation
-        tmpprtcl.setRotation(
-          symmetryrand() * PI2 * 0.5,
-          symmetryrand() * PI2 * 0.5,
-          symmetryrand() * PI2 * 0.5
-        );
 
-        //position
-        tmpprtcl.setPosition(
-          symmetryrand() * pointFlower.area.x,
-          symmetryrand() * pointFlower.area.y,
-          symmetryrand() * pointFlower.area.z
+      BlossomParticle.prototype.setEulerAngles = function (
+        rx: any,
+        ry: any,
+        rz: any
+      ) {
+        this.euler[0] = rx;
+        this.euler[1] = ry;
+        this.euler[2] = rz;
+      };
+
+      BlossomParticle.prototype.setSize = function (s: any) {
+        this.size = s;
+      };
+
+      BlossomParticle.prototype.update = function (dt: any, et: any) {
+        this.position[0] += this.velocity[0] * dt;
+        this.position[1] += this.velocity[1] * dt;
+        this.position[2] += this.velocity[2] * dt;
+
+        this.euler[0] += this.rotation[0] * dt;
+        this.euler[1] += this.rotation[1] * dt;
+        this.euler[2] += this.rotation[2] * dt;
+      };
+
+      function createPointFlowers() {
+        // get point sizes
+        var prm: any = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
+        renderSpec.pointSize = { min: prm[0], max: prm[1] };
+
+        var vtxsrc: any = sakura_point_vsh;
+        var frgsrc: any = sakura_point_fsh;
+
+        pointFlower.program = createShader(
+          vtxsrc,
+          frgsrc,
+          [
+            "uProjection",
+            "uModelview",
+            "uResolution",
+            "uOffset",
+            "uDOF",
+            "uFade",
+          ],
+          ["aPosition", "aEuler", "aMisc"]
         );
 
-        //euler
-        tmpprtcl.setEulerAngles(
-          Math.random() * Math.PI * 2.0,
-          Math.random() * Math.PI * 2.0,
-          Math.random() * Math.PI * 2.0
+        useShader(pointFlower.program);
+        pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);
+        pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);
+
+        // paramerters: velocity[3], rotate[3]
+        pointFlower.numFlowers = 1600;
+        pointFlower.particles = new Array(pointFlower.numFlowers);
+        // vertex attributes {position[3], euler_xyz[3], size[1]}
+        pointFlower.dataArray = new Float32Array(
+          pointFlower.numFlowers * (3 + 3 + 2)
         );
+        pointFlower.positionArrayOffset = 0;
+        pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;
+        pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;
+
+        pointFlower.buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
 
-        //size
-        tmpprtcl.setSize(0.9 + Math.random() * 0.1);
+        unuseShader(pointFlower.program);
+
+        for (let i = 0; i < pointFlower.numFlowers; i++) {
+          pointFlower.particles[i] = new BlossomParticle();
+        }
       }
-    }
 
-    function renderPointFlowers() {
-      //update
-      var PI2: any = Math.PI * 2.0;
-      // var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];
-      var repeatPos: any = function (prt: any, cmp: any, limit: any) {
-        if (Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {
-          //out of area
-          if (prt.position[cmp] > 0) {
-            prt.position[cmp] -= limit * 2.0;
-          } else {
-            prt.position[cmp] += limit * 2.0;
+      function initPointFlowers() {
+        //area
+        pointFlower.area = Vector3.create(20.0, 20.0, 20.0);
+        pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;
+
+        pointFlower.fader.x = 10.0; //env fade start
+        pointFlower.fader.y = pointFlower.area.z; //env fade half
+        pointFlower.fader.z = 0.1; //near fade start
+
+        //particles
+        var PI2: any = Math.PI * 2.0;
+        var tmpv3: any = Vector3.create(0, 0, 0);
+        var tmpv: any = 0;
+        var symmetryrand: any = function () {
+          return Math.random() * 2.0 - 1.0;
+        };
+        for (let i = 0; i < pointFlower.numFlowers; i++) {
+          let tmpprtcl = pointFlower.particles[i];
+
+          //velocity
+          tmpv3.x = symmetryrand() * 0.3 + 0.8;
+          tmpv3.y = symmetryrand() * 0.2 - 1.0;
+          tmpv3.z = symmetryrand() * 0.3 + 0.5;
+          Vector3.normalize(tmpv3);
+          tmpv = 2.0 + Math.random() * 1.0;
+          tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);
+
+          //rotation
+          tmpprtcl.setRotation(
+            symmetryrand() * PI2 * 0.5,
+            symmetryrand() * PI2 * 0.5,
+            symmetryrand() * PI2 * 0.5
+          );
+
+          //position
+          tmpprtcl.setPosition(
+            symmetryrand() * pointFlower.area.x,
+            symmetryrand() * pointFlower.area.y,
+            symmetryrand() * pointFlower.area.z
+          );
+
+          //euler
+          tmpprtcl.setEulerAngles(
+            Math.random() * Math.PI * 2.0,
+            Math.random() * Math.PI * 2.0,
+            Math.random() * Math.PI * 2.0
+          );
+
+          //size
+          tmpprtcl.setSize(0.9 + Math.random() * 0.1);
+        }
+      }
+
+      function renderPointFlowers() {
+        //update
+        var PI2: any = Math.PI * 2.0;
+        // var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];
+        var repeatPos: any = function (prt: any, cmp: any, limit: any) {
+          if (Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {
+            //out of area
+            if (prt.position[cmp] > 0) {
+              prt.position[cmp] -= limit * 2.0;
+            } else {
+              prt.position[cmp] += limit * 2.0;
+            }
+          }
+        };
+        var repeatEuler: any = function (prt: any, cmp: any) {
+          prt.euler[cmp] = prt.euler[cmp] % PI2;
+          if (prt.euler[cmp] < 0.0) {
+            prt.euler[cmp] += PI2;
           }
+        };
+
+        for (let i = 0; i < pointFlower.numFlowers; i++) {
+          let prtcl = pointFlower.particles[i];
+          prtcl.update(timeInfo.delta, timeInfo.elapsed);
+          repeatPos(prtcl, 0, pointFlower.area.x);
+          repeatPos(prtcl, 1, pointFlower.area.y);
+          repeatPos(prtcl, 2, pointFlower.area.z);
+          repeatEuler(prtcl, 0);
+          repeatEuler(prtcl, 1);
+          repeatEuler(prtcl, 2);
+
+          prtcl.alpha = 1.0; //(pointFlower.area.z - prtcl.position[2]) * 0.5;
+
+          prtcl.zkey =
+            camera.matrix[2] * prtcl.position[0] +
+            camera.matrix[6] * prtcl.position[1] +
+            camera.matrix[10] * prtcl.position[2] +
+            camera.matrix[14];
         }
-      };
-      var repeatEuler: any = function (prt: any, cmp: any) {
-        prt.euler[cmp] = prt.euler[cmp] % PI2;
-        if (prt.euler[cmp] < 0.0) {
-          prt.euler[cmp] += PI2;
+
+        // sort
+        pointFlower.particles.sort(function (p0: any, p1: any) {
+          return p0.zkey - p1.zkey;
+        });
+
+        // update data
+        var ipos: any = pointFlower.positionArrayOffset;
+        var ieuler: any = pointFlower.eulerArrayOffset;
+        var imisc: any = pointFlower.miscArrayOffset;
+        for (let i = 0; i < pointFlower.numFlowers; i++) {
+          let prtcl = pointFlower.particles[i];
+          pointFlower.dataArray[ipos] = prtcl.position[0];
+          pointFlower.dataArray[ipos + 1] = prtcl.position[1];
+          pointFlower.dataArray[ipos + 2] = prtcl.position[2];
+          ipos += 3;
+          pointFlower.dataArray[ieuler] = prtcl.euler[0];
+          pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];
+          pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];
+          ieuler += 3;
+          pointFlower.dataArray[imisc] = prtcl.size;
+          pointFlower.dataArray[imisc + 1] = prtcl.alpha;
+          imisc += 2;
         }
-      };
 
-      for (let i = 0; i < pointFlower.numFlowers; i++) {
-        let prtcl = pointFlower.particles[i];
-        prtcl.update(timeInfo.delta, timeInfo.elapsed);
-        repeatPos(prtcl, 0, pointFlower.area.x);
-        repeatPos(prtcl, 1, pointFlower.area.y);
-        repeatPos(prtcl, 2, pointFlower.area.z);
-        repeatEuler(prtcl, 0);
-        repeatEuler(prtcl, 1);
-        repeatEuler(prtcl, 2);
-
-        prtcl.alpha = 1.0; //(pointFlower.area.z - prtcl.position[2]) * 0.5;
-
-        prtcl.zkey =
-          camera.matrix[2] * prtcl.position[0] +
-          camera.matrix[6] * prtcl.position[1] +
-          camera.matrix[10] * prtcl.position[2] +
-          camera.matrix[14];
-      }
+        //draw
+        gl.enable(gl.BLEND);
+        //gl.disable(gl.DEPTH_TEST);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
-      // sort
-      pointFlower.particles.sort(function (p0: any, p1: any) {
-        return p0.zkey - p1.zkey;
-      });
-
-      // update data
-      var ipos: any = pointFlower.positionArrayOffset;
-      var ieuler: any = pointFlower.eulerArrayOffset;
-      var imisc: any = pointFlower.miscArrayOffset;
-      for (let i = 0; i < pointFlower.numFlowers; i++) {
-        let prtcl = pointFlower.particles[i];
-        pointFlower.dataArray[ipos] = prtcl.position[0];
-        pointFlower.dataArray[ipos + 1] = prtcl.position[1];
-        pointFlower.dataArray[ipos + 2] = prtcl.position[2];
-        ipos += 3;
-        pointFlower.dataArray[ieuler] = prtcl.euler[0];
-        pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];
-        pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];
-        ieuler += 3;
-        pointFlower.dataArray[imisc] = prtcl.size;
-        pointFlower.dataArray[imisc + 1] = prtcl.alpha;
-        imisc += 2;
-      }
+        var prog: any = pointFlower.program;
+        useShader(prog);
 
-      //draw
-      gl.enable(gl.BLEND);
-      //gl.disable(gl.DEPTH_TEST);
-      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-
-      var prog: any = pointFlower.program;
-      useShader(prog);
-
-      gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);
-      gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);
-      gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
-      gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));
-      gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));
-
-      gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
-      gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
-
-      gl.vertexAttribPointer(
-        prog.attributes.aPosition,
-        3,
-        gl.FLOAT,
-        false,
-        0,
-        pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT
-      );
-      gl.vertexAttribPointer(
-        prog.attributes.aEuler,
-        3,
-        gl.FLOAT,
-        false,
-        0,
-        pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT
-      );
-      gl.vertexAttribPointer(
-        prog.attributes.aMisc,
-        2,
-        gl.FLOAT,
-        false,
-        0,
-        pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT
-      );
-
-      // doubler
-      for (let i = 1; i < 2; i++) {
-        let zpos = i * -2.0;
-        pointFlower.offset[0] = pointFlower.area.x * -1.0;
-        pointFlower.offset[1] = pointFlower.area.y * -1.0;
-        pointFlower.offset[2] = pointFlower.area.z * zpos;
-        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
-        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+        gl.uniformMatrix4fv(
+          prog.uniforms.uProjection,
+          false,
+          projection.matrix
+        );
+        gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);
+        gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
+        gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));
+        gl.uniform3fv(
+          prog.uniforms.uFade,
+          Vector3.arrayForm(pointFlower.fader)
+        );
 
-        pointFlower.offset[0] = pointFlower.area.x * -1.0;
-        pointFlower.offset[1] = pointFlower.area.y * 1.0;
-        pointFlower.offset[2] = pointFlower.area.z * zpos;
-        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
-        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+        gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
 
-        pointFlower.offset[0] = pointFlower.area.x * 1.0;
-        pointFlower.offset[1] = pointFlower.area.y * -1.0;
-        pointFlower.offset[2] = pointFlower.area.z * zpos;
-        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
-        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+        gl.vertexAttribPointer(
+          prog.attributes.aPosition,
+          3,
+          gl.FLOAT,
+          false,
+          0,
+          pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT
+        );
+        gl.vertexAttribPointer(
+          prog.attributes.aEuler,
+          3,
+          gl.FLOAT,
+          false,
+          0,
+          pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT
+        );
+        gl.vertexAttribPointer(
+          prog.attributes.aMisc,
+          2,
+          gl.FLOAT,
+          false,
+          0,
+          pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT
+        );
+
+        // doubler
+        for (let i = 1; i < 2; i++) {
+          let zpos = i * -2.0;
+          pointFlower.offset[0] = pointFlower.area.x * -1.0;
+          pointFlower.offset[1] = pointFlower.area.y * -1.0;
+          pointFlower.offset[2] = pointFlower.area.z * zpos;
+          gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+          gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+
+          pointFlower.offset[0] = pointFlower.area.x * -1.0;
+          pointFlower.offset[1] = pointFlower.area.y * 1.0;
+          pointFlower.offset[2] = pointFlower.area.z * zpos;
+          gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+          gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+
+          pointFlower.offset[0] = pointFlower.area.x * 1.0;
+          pointFlower.offset[1] = pointFlower.area.y * -1.0;
+          pointFlower.offset[2] = pointFlower.area.z * zpos;
+          gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+          gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+
+          pointFlower.offset[0] = pointFlower.area.x * 1.0;
+          pointFlower.offset[1] = pointFlower.area.y * 1.0;
+          pointFlower.offset[2] = pointFlower.area.z * zpos;
+          gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
+          gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+        }
 
-        pointFlower.offset[0] = pointFlower.area.x * 1.0;
-        pointFlower.offset[1] = pointFlower.area.y * 1.0;
-        pointFlower.offset[2] = pointFlower.area.z * zpos;
+        //main
+        pointFlower.offset[0] = 0.0;
+        pointFlower.offset[1] = 0.0;
+        pointFlower.offset[2] = 0.0;
         gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
         gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
-      }
 
-      //main
-      pointFlower.offset[0] = 0.0;
-      pointFlower.offset[1] = 0.0;
-      pointFlower.offset[2] = 0.0;
-      gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
-      gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        unuseShader(prog);
 
-      gl.bindBuffer(gl.ARRAY_BUFFER, null);
-      unuseShader(prog);
+        gl.enable(gl.DEPTH_TEST);
+        gl.disable(gl.BLEND);
+      }
 
-      gl.enable(gl.DEPTH_TEST);
-      gl.disable(gl.BLEND);
-    }
+      // effects
+      //common util
+      function createEffectProgram(
+        vtxsrc: any,
+        frgsrc: any,
+        exunifs: any,
+        exattrs: any
+      ) {
+        var ret: any = {};
+        var unifs: any = ["uResolution", "uSrc", "uDelta"];
+        if (exunifs) {
+          unifs = unifs.concat(exunifs);
+        }
+        var attrs: any = ["aPosition"];
+        if (exattrs) {
+          attrs = attrs.concat(exattrs);
+        }
 
-    // effects
-    //common util
-    function createEffectProgram(
-      vtxsrc: any,
-      frgsrc: any,
-      exunifs: any,
-      exattrs: any
-    ) {
-      var ret: any = {};
-      var unifs: any = ["uResolution", "uSrc", "uDelta"];
-      if (exunifs) {
-        unifs = unifs.concat(exunifs);
+        ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);
+        useShader(ret.program);
+
+        ret.dataArray = new Float32Array([
+          -1.0,
+          -1.0,
+          1.0,
+          -1.0,
+          -1.0,
+          1.0,
+          1.0,
+          1.0,
+        ]);
+        ret.buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        unuseShader(ret.program);
+
+        return ret;
       }
-      var attrs: any = ["aPosition"];
-      if (exattrs) {
-        attrs = attrs.concat(exattrs);
+
+      // basic usage
+      // useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize
+      // gl.uniform**(...); //additional uniforms
+      // drawEffect()
+      // unuseEffect(prog)
+      // TEXTURE0 makes src
+      function useEffect(fxobj: any, srctex: any) {
+        var prog: any = fxobj.program;
+        useShader(prog);
+        gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
+
+        if (srctex != null) {
+          gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);
+          gl.uniform1i(prog.uniforms.uSrc, 0);
+
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, srctex.texture);
+        }
+      }
+      function drawEffect(fxobj: any) {
+        gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);
+        gl.vertexAttribPointer(
+          fxobj.program.attributes.aPosition,
+          2,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      }
+      function unuseEffect(fxobj: any) {
+        unuseShader(fxobj.program);
       }
 
-      ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);
-      useShader(ret.program);
-
-      ret.dataArray = new Float32Array([
-        -1.0,
-        -1.0,
-        1.0,
-        -1.0,
-        -1.0,
-        1.0,
-        1.0,
-        1.0,
-      ]);
-      ret.buffer = gl.createBuffer();
-      gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);
-      gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);
-
-      gl.bindBuffer(gl.ARRAY_BUFFER, null);
-      unuseShader(ret.program);
-
-      return ret;
-    }
+      var effectLib: any = {};
+      function createEffectLib() {
+        var vtxsrc: any, frgsrc: any;
+        //common
+        var cmnvtxsrc: any = fx_common_vsh;
+
+        //background
+        frgsrc = bg_fsh;
+        effectLib.sceneBg = createEffectProgram(
+          cmnvtxsrc,
+          frgsrc,
+          ["uTimes"],
+          null
+        );
 
-    // basic usage
-    // useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize
-    // gl.uniform**(...); //additional uniforms
-    // drawEffect()
-    // unuseEffect(prog)
-    // TEXTURE0 makes src
-    function useEffect(fxobj: any, srctex: any) {
-      var prog: any = fxobj.program;
-      useShader(prog);
-      gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
-
-      if (srctex != null) {
-        gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);
-        gl.uniform1i(prog.uniforms.uSrc, 0);
-
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, srctex.texture);
+        // make brightpixels buffer
+        frgsrc = fx_brightbuf_fsh;
+        effectLib.mkBrightBuf = createEffectProgram(
+          cmnvtxsrc,
+          frgsrc,
+          null,
+          null
+        );
+
+        // direction blur
+        frgsrc = fx_dirblur_r4_fsh;
+        effectLib.dirBlur = createEffectProgram(
+          cmnvtxsrc,
+          frgsrc,
+          ["uBlurDir"],
+          null
+        );
+
+        //final composite
+        vtxsrc = pp_final_vsh;
+        frgsrc = pp_final_fsh;
+        // console.log('frgsrc :',frgsrc )
+        effectLib.finalComp = createEffectProgram(
+          vtxsrc,
+          frgsrc,
+          ["uBloom"],
+          null
+        );
       }
-    }
-    function drawEffect(fxobj: any) {
-      gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);
-      gl.vertexAttribPointer(
-        fxobj.program.attributes.aPosition,
-        2,
-        gl.FLOAT,
-        false,
-        0,
-        0
-      );
-      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-    }
-    function unuseEffect(fxobj: any) {
-      unuseShader(fxobj.program);
-    }
 
-    var effectLib: any = {};
-    function createEffectLib() {
-      var vtxsrc: any, frgsrc: any;
-      //common
-      var cmnvtxsrc: any = fx_common_vsh;
-
-      //background
-      frgsrc = bg_fsh;
-      effectLib.sceneBg = createEffectProgram(
-        cmnvtxsrc,
-        frgsrc,
-        ["uTimes"],
-        null
-      );
-
-      // make brightpixels buffer
-      frgsrc = fx_brightbuf_fsh;
-      effectLib.mkBrightBuf = createEffectProgram(
-        cmnvtxsrc,
-        frgsrc,
-        null,
-        null
-      );
-
-      // direction blur
-      frgsrc = fx_dirblur_r4_fsh;
-      effectLib.dirBlur = createEffectProgram(
-        cmnvtxsrc,
-        frgsrc,
-        ["uBlurDir"],
-        null
-      );
-
-      //final composite
-      vtxsrc = pp_final_vsh;
-      frgsrc = pp_final_fsh;
-      // console.log('frgsrc :',frgsrc )
-      effectLib.finalComp = createEffectProgram(
-        vtxsrc,
-        frgsrc,
-        ["uBloom"],
-        null
-      );
-    }
+      // background
+      function createBackground() {
+        //console.log("create background");
+      }
+      function initBackground() {
+        //console.log("init background");
+      }
+      function renderBackground() {
+        gl.disable(gl.DEPTH_TEST);
+
+        useEffect(effectLib.sceneBg, null);
+        gl.uniform2f(
+          effectLib.sceneBg.program.uniforms.uTimes,
+          timeInfo.elapsed,
+          timeInfo.delta
+        );
+        drawEffect(effectLib.sceneBg);
+        unuseEffect(effectLib.sceneBg);
 
-    // background
-    function createBackground() {
-      //console.log("create background");
-    }
-    function initBackground() {
-      //console.log("init background");
-    }
-    function renderBackground() {
-      gl.disable(gl.DEPTH_TEST);
-
-      useEffect(effectLib.sceneBg, null);
-      gl.uniform2f(
-        effectLib.sceneBg.program.uniforms.uTimes,
-        timeInfo.elapsed,
-        timeInfo.delta
-      );
-      drawEffect(effectLib.sceneBg);
-      unuseEffect(effectLib.sceneBg);
-
-      gl.enable(gl.DEPTH_TEST);
-    }
+        gl.enable(gl.DEPTH_TEST);
+      }
 
-    // post process
-    // var postProcess = {};
-    function createPostProcess() {
-      //console.log("create post process");
-    }
-    function initPostProcess() {
-      //console.log("init post process");
-    }
+      // post process
+      // var postProcess = {};
+      function createPostProcess() {
+        //console.log("create post process");
+      }
+      function initPostProcess() {
+        //console.log("init post process");
+      }
+
+      function renderPostProcess() {
+        gl.enable(gl.TEXTURE_2D);
+        gl.disable(gl.DEPTH_TEST);
+        var bindRT: any = function (rt: any, isclear: any) {
+          gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);
+          gl.viewport(0, 0, rt.width, rt.height);
+          if (isclear) {
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+          }
+        };
 
-    function renderPostProcess() {
-      gl.enable(gl.TEXTURE_2D);
-      gl.disable(gl.DEPTH_TEST);
-      var bindRT: any = function (rt: any, isclear: any) {
-        gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);
-        gl.viewport(0, 0, rt.width, rt.height);
-        if (isclear) {
-          gl.clearColor(0, 0, 0, 0);
-          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        //make bright buff
+        bindRT(renderSpec.wHalfRT0, true);
+        useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);
+        drawEffect(effectLib.mkBrightBuf);
+        unuseEffect(effectLib.mkBrightBuf);
+
+        // make bloom
+        for (let i = 0; i < 2; i++) {
+          let p = 1.5 + 1 * i;
+          let s = 2.0 + 1 * i;
+          bindRT(renderSpec.wHalfRT1, true);
+          useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);
+          gl.uniform4f(
+            effectLib.dirBlur.program.uniforms.uBlurDir,
+            p,
+            0.0,
+            s,
+            0.0
+          );
+          drawEffect(effectLib.dirBlur);
+          unuseEffect(effectLib.dirBlur);
+
+          bindRT(renderSpec.wHalfRT0, true);
+          useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);
+          gl.uniform4f(
+            effectLib.dirBlur.program.uniforms.uBlurDir,
+            0.0,
+            p,
+            0.0,
+            s
+          );
+          drawEffect(effectLib.dirBlur);
+          unuseEffect(effectLib.dirBlur);
         }
-      };
 
-      //make bright buff
-      bindRT(renderSpec.wHalfRT0, true);
-      useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);
-      drawEffect(effectLib.mkBrightBuf);
-      unuseEffect(effectLib.mkBrightBuf);
-
-      // make bloom
-      for (let i = 0; i < 2; i++) {
-        let p = 1.5 + 1 * i;
-        let s = 2.0 + 1 * i;
-        bindRT(renderSpec.wHalfRT1, true);
-        useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);
-        gl.uniform4f(
-          effectLib.dirBlur.program.uniforms.uBlurDir,
-          p,
-          0.0,
-          s,
-          0.0
-        );
-        drawEffect(effectLib.dirBlur);
-        unuseEffect(effectLib.dirBlur);
+        //display
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.viewport(0, 0, renderSpec.width, renderSpec.height);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-        bindRT(renderSpec.wHalfRT0, true);
-        useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);
-        gl.uniform4f(
-          effectLib.dirBlur.program.uniforms.uBlurDir,
-          0.0,
-          p,
-          0.0,
-          s
-        );
-        drawEffect(effectLib.dirBlur);
-        unuseEffect(effectLib.dirBlur);
+        useEffect(effectLib.finalComp, renderSpec.mainRT);
+        gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);
+        drawEffect(effectLib.finalComp);
+        unuseEffect(effectLib.finalComp);
+
+        gl.enable(gl.DEPTH_TEST);
       }
 
-      //display
-      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-      gl.viewport(0, 0, renderSpec.width, renderSpec.height);
-      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+      /////
+      // var SceneEnv = {};
+      function createScene() {
+        createEffectLib();
+        createBackground();
+        createPointFlowers();
+        createPostProcess();
+        sceneStandBy = true;
+      }
 
-      useEffect(effectLib.finalComp, renderSpec.mainRT);
-      gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);
-      gl.activeTexture(gl.TEXTURE1);
-      gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);
-      drawEffect(effectLib.finalComp);
-      unuseEffect(effectLib.finalComp);
+      function initScene() {
+        initBackground();
+        initPointFlowers();
+        initPostProcess();
+
+        //camera.position.z = 17.320508;
+        camera.position.z = pointFlower.area.z + projection.nearfar[0];
+        projection.angle =
+          ((Math.atan2(
+            pointFlower.area.y,
+            camera.position.z + pointFlower.area.z
+          ) *
+            180.0) /
+            Math.PI) *
+          2.0;
+        Matrix44.loadProjection(
+          projection.matrix,
+          renderSpec.aspect,
+          projection.angle,
+          projection.nearfar[0],
+          projection.nearfar[1]
+        );
+      }
 
-      gl.enable(gl.DEPTH_TEST);
-    }
+      function renderScene() {
+        //draw
+        Matrix44.loadLookAt(
+          camera.matrix,
+          camera.position,
+          camera.lookat,
+          camera.up
+        );
 
-    /////
-    // var SceneEnv = {};
-    function createScene() {
-      createEffectLib();
-      createBackground();
-      createPointFlowers();
-      createPostProcess();
-      sceneStandBy = true;
-    }
+        gl.enable(gl.DEPTH_TEST);
 
-    function initScene() {
-      initBackground();
-      initPointFlowers();
-      initPostProcess();
-
-      //camera.position.z = 17.320508;
-      camera.position.z = pointFlower.area.z + projection.nearfar[0];
-      projection.angle =
-        ((Math.atan2(
-          pointFlower.area.y,
-          camera.position.z + pointFlower.area.z
-        ) *
-          180.0) /
-          Math.PI) *
-        2.0;
-      Matrix44.loadProjection(
-        projection.matrix,
-        renderSpec.aspect,
-        projection.angle,
-        projection.nearfar[0],
-        projection.nearfar[1]
-      );
-    }
+        //gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);
+        gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);
+        gl.clearColor(0.005, 0, 0.05, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-    function renderScene() {
-      //draw
-      Matrix44.loadLookAt(
-        camera.matrix,
-        camera.position,
-        camera.lookat,
-        camera.up
-      );
-
-      gl.enable(gl.DEPTH_TEST);
-
-      //gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-      gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);
-      gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);
-      gl.clearColor(0.005, 0, 0.05, 0);
-      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-      renderBackground();
-      renderPointFlowers();
-      renderPostProcess();
-    }
+        renderBackground();
+        renderPointFlowers();
+        renderPostProcess();
+      }
 
-    /////
-    function onResize(e: any) {
-      makeCanvasFullScreen(document.getElementById("sakura"));
-      setViewports();
-      if (sceneStandBy) {
-        initScene();
+      /////
+      function onResize(e: any) {
+        makeCanvasFullScreen(document.getElementById("sakura"));
+        setViewports();
+        if (sceneStandBy) {
+          initScene();
+        }
       }
-    }
 
-    function setViewports() {
-      renderSpec.setSize(gl.canvas.width, gl.canvas.height);
+      function setViewports() {
+        renderSpec.setSize(gl.canvas.width, gl.canvas.height);
 
-      gl.clearColor(0.2, 0.2, 0.5, 1.0);
-      gl.viewport(0, 0, renderSpec.width, renderSpec.height);
+        gl.clearColor(0.2, 0.2, 0.5, 1.0);
+        gl.viewport(0, 0, renderSpec.width, renderSpec.height);
 
-      var rtfunc: any = function (rtname: any, rtw: any, rth: any) {
-        var rt: any = renderSpec[rtname];
-        if (rt) deleteRenderTarget(rt);
-        renderSpec[rtname] = createRenderTarget(rtw, rth);
-      };
-      rtfunc("mainRT", renderSpec.width, renderSpec.height);
-      rtfunc("wFullRT0", renderSpec.width, renderSpec.height);
-      rtfunc("wFullRT1", renderSpec.width, renderSpec.height);
-      rtfunc("wHalfRT0", renderSpec.halfWidth, renderSpec.halfHeight);
-      rtfunc("wHalfRT1", renderSpec.halfWidth, renderSpec.halfHeight);
-    }
+        var rtfunc: any = function (rtname: any, rtw: any, rth: any) {
+          var rt: any = renderSpec[rtname];
+          if (rt) deleteRenderTarget(rt);
+          renderSpec[rtname] = createRenderTarget(rtw, rth);
+        };
+        rtfunc("mainRT", renderSpec.width, renderSpec.height);
+        rtfunc("wFullRT0", renderSpec.width, renderSpec.height);
+        rtfunc("wFullRT1", renderSpec.width, renderSpec.height);
+        rtfunc("wHalfRT0", renderSpec.halfWidth, renderSpec.halfHeight);
+        rtfunc("wHalfRT1", renderSpec.halfWidth, renderSpec.halfHeight);
+      }
 
-    function render() {
-      renderScene();
-    }
+      function render() {
+        renderScene();
+      }
 
-    var animating: boolean = true;
+      var animating: boolean = true;
 
-    function animate() {
-      var curdate: any = new Date();
-      timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;
-      timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;
-      timeInfo.prev = curdate;
+      function animate() {
+        var curdate: any = new Date();
+        timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;
+        timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;
+        timeInfo.prev = curdate;
 
-      if (animating) requestAnimationFrame(animate);
-      render();
-    }
+        if (animating) requestAnimationFrame(animate);
+        render();
+      }
 
-    function makeCanvasFullScreen(canvas: any) {
-      var b: any = document.body;
-      var d: any = document.documentElement;
-      let fullw = Math.max(
-        b.clientWidth,
-        b.scrollWidth,
-        d.scrollWidth,
-        d.clientWidth
-      );
-      let fullh = Math.max(
-        b.clientHeight,
-        b.scrollHeight,
-        d.scrollHeight,
-        d.clientHeight
-      );
-      canvas.width = fullw;
-      canvas.height = fullh;
-    }
+      function makeCanvasFullScreen(canvas: any) {
+        var b: any = document.body;
+        var d: any = document.documentElement;
+        let fullw = Math.max(
+          b.clientWidth,
+          b.scrollWidth,
+          d.scrollWidth,
+          d.clientWidth
+        );
+        let fullh = Math.max(
+          b.clientHeight,
+          b.scrollHeight,
+          d.scrollHeight,
+          d.clientHeight
+        );
+        canvas.width = fullw;
+        canvas.height = fullh;
+      }
 
-    // window.addEventListener("load", function(e: any) {
-    //   var canvas: any = document.getElementById("sakura");
-    //   try {
-    //     makeCanvasFullScreen(canvas);
-    //     gl = canvas.getContext("experimental-webgl");
-    //   } catch (e) {
-    //     alert("WebGL not supported." + e);
-    //     console.log("WebGL not supported :", e);
-    //     return;
-    //   }
-
-    //   window.addEventListener("resize", onResize);
-
-    //   setViewports();
-    //   createScene();
-    //   initScene();
-
-    //   timeInfo.start = new Date();
-    //   timeInfo.prev = timeInfo.start;
-    //   animate();
-    // });
-
-    // 保证每次都执行
-    var canvas: any = document.getElementById("sakura");
-    try {
-      makeCanvasFullScreen(canvas);
-      gl = canvas.getContext("experimental-webgl");
-    } catch (e) {
-      alert("WebGL not supported." + e);
-      console.error(e);
-      return;
-    }
+      // window.addEventListener("load", function(e: any) {
+      //   var canvas: any = document.getElementById("sakura");
+      //   try {
+      //     makeCanvasFullScreen(canvas);
+      //     gl = canvas.getContext("experimental-webgl");
+      //   } catch (e) {
+      //     alert("WebGL not supported." + e);
+      //     console.log("WebGL not supported :", e);
+      //     return;
+      //   }
+
+      //   window.addEventListener("resize", onResize);
+
+      //   setViewports();
+      //   createScene();
+      //   initScene();
+
+      //   timeInfo.start = new Date();
+      //   timeInfo.prev = timeInfo.start;
+      //   animate();
+      // });
+
+      // 保证每次都执行
+      var canvas: any = document.getElementById("sakura");
+      try {
+        makeCanvasFullScreen(canvas);
+        gl = canvas.getContext("experimental-webgl");
+      } catch (e) {
+        alert("WebGL not supported." + e);
+        console.error(e);
+        return;
+      }
 
-    window.addEventListener("resize", onResize);
-
-    setViewports();
-    createScene();
-    initScene();
-
-    timeInfo.start = new Date();
-    timeInfo.prev = timeInfo.start;
-    animate();
-
-    //set window.requestAnimationFrame
-    (function (w: any, r: any) {
-      w["r" + r] =
-        w["r" + r] ||
-        w["webkitR" + r] ||
-        w["mozR" + r] ||
-        w["msR" + r] ||
-        w["oR" + r] ||
-        function (c: any) {
-          w.setTimeout(c, 1000 / 60);
-        };
-    })(window, "equestAnimationFrame");
+      window.addEventListener("resize", onResize);
+
+      setViewports();
+      createScene();
+      initScene();
+
+      timeInfo.start = new Date();
+      timeInfo.prev = timeInfo.start;
+      animate();
+
+      //set window.requestAnimationFrame
+      (function (w: any, r: any) {
+        w["r" + r] =
+          w["r" + r] ||
+          w["webkitR" + r] ||
+          w["mozR" + r] ||
+          w["msR" + r] ||
+          w["oR" + r] ||
+          function (c: any) {
+            w.setTimeout(c, 1000 / 60);
+          };
+      })(window, "equestAnimationFrame");
+    });
   },
-  setup() {},
 });
 </script>
 
diff --git a/src/views/Message.vue b/src/views/Message.vue
index c5edba7..b261bd4 100644
--- a/src/views/Message.vue
+++ b/src/views/Message.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="message left">
     <el-form
-      :model="params"
+      :model="state.params"
       status-icon
-      :rules="rules"
+      :rules="state.rules"
       ref="params"
       label-width="50px"
       class="demo-ruleForm"
@@ -15,7 +15,7 @@
         <el-input
           type="text"
           placeholder="必填"
-          v-model="params.email"
+          v-model="state.params.email"
           autocomplete="off"
         ></el-input>
       </el-form-item>
@@ -24,7 +24,7 @@
         prop="phone"
       >
         <el-input
-          v-model="params.phone"
+          v-model="state.params.phone"
           autocomplete="off"
         ></el-input>
       </el-form-item>
@@ -32,7 +32,7 @@
         label="名字"
         prop="name"
       >
-        <el-input v-model="params.name"></el-input>
+        <el-input v-model="state.params.name"></el-input>
       </el-form-item>
       <el-form-item
         label="内容"
@@ -41,13 +41,13 @@
         <el-input
           type="textarea"
           placeholder="必填"
-          v-model="params.content"
+          v-model="state.params.content"
         ></el-input>
       </el-form-item>
       <el-form-item>
         <el-button
           type="primary"
-          :loading="btnLoading"
+          :loading="state.btnLoading"
           @click="submit"
         >提交</el-button>
       </el-form-item>
@@ -56,7 +56,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, reactive, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import service from "../utils/https";
+import urls from "../utils/urls";
 import { MessageParams, RulesItem, Rules } from "../types/index";
 
 const check = (
@@ -98,8 +101,8 @@ const checkContent = (
 
 export default defineComponent({
   name: "Message",
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       btnLoading: false,
       cacheTime: 0, // 缓存时间
       times: 0, // 留言次数
@@ -115,12 +118,11 @@ export default defineComponent({
         name: [{ validator: checkName, trigger: "blur" }],
         content: [{ validator: checkContent, trigger: "blur" }],
       } as Rules,
-    };
-  },
-  methods: {
-    async submit(): Promise<void> {
-      if (this.times > 3) {
-        (this as any).$message({
+    });
+
+    const submit = async (): Promise<void> => {
+      if (state.times > 3) {
+        ElMessage({
           message: "您今天留言的次数已经用完，明天再来留言吧！",
           type: "warning",
         });
@@ -129,8 +131,8 @@ export default defineComponent({
 
       let now = new Date();
       let nowTime = now.getTime();
-      if (nowTime - this.cacheTime < 60000) {
-        (this as any).$message({
+      if (nowTime - state.cacheTime < 60000) {
+        ElMessage({
           message: "您留言太过频繁，1 分钟后再来留言吧！",
           type: "warning",
         });
@@ -140,54 +142,55 @@ export default defineComponent({
       const reg: RegExp = new RegExp(
         "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
       );
-      if (!this.params.email) {
-        (this as any).$message({
+      if (!state.params.email) {
+        ElMessage({
           message: "邮箱不能为空！",
           type: "warning",
         });
         return;
-      } else if (!reg.test(this.params.email)) {
-        (this as any).$message({
+      } else if (!reg.test(state.params.email)) {
+        ElMessage({
           message: "请输入格式正确的邮箱！",
           type: "warning",
         });
         return;
-      } else if (!this.params.phone) {
-        (this as any).$message({
+      } else if (!state.params.phone) {
+        ElMessage({
           message: "手机不能为空",
           type: "warning",
         });
         return;
-      } else if (!this.params.name) {
-        (this as any).$message({
+      } else if (!state.params.name) {
+        ElMessage({
           message: "名字不能为空",
           type: "warning",
         });
         return;
-      } else if (!this.params.content) {
-        (this as any).$message({
+      } else if (!state.params.content) {
+        ElMessage({
           message: "内容不能为空",
           type: "warning",
         });
         return;
       }
-      this.btnLoading = true;
-      await (this as any).$https.post(
-        (this as any).$urls.addMessage,
-        this.params
-      );
-      this.btnLoading = false;
+      state.btnLoading = true;
+      await service.post(urls.addMessage, state.params);
+      state.btnLoading = false;
 
-      this.times++;
-      this.cacheTime = nowTime;
-      (this as any).$message({
+      state.times++;
+      state.cacheTime = nowTime;
+      ElMessage({
         message: "感谢您的留言，有必要的，博主有空都会回复您的 ！",
         type: "success",
       });
-      this.params.content = "";
-    },
+      state.params.content = "";
+    };
+
+    return {
+      state,
+      submit,
+    };
   },
-  setup() {},
 });
 </script>
 <style scoped>
diff --git a/src/views/Project.vue b/src/views/Project.vue
index 9b80b87..00d3623 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -3,8 +3,8 @@
     <el-row :gutter="20">
       <el-col
         class="el-col-pointer"
-        :span="isMobileOrPc ? 24 : 12"
-        v-for="(l, index) in list"
+        :span="state.isMobileOrPc ? 24 : 12"
+        v-for="(l, index) in state.list"
         :key="l._id"
         style="margin-bottom: 20px"
       >
@@ -32,20 +32,20 @@
         </a>
       </el-col>
     </el-row>
-    <LoadingCustom v-if="isLoading"></LoadingCustom>
-    <LoadEnd v-if="isLoadEnd"></LoadEnd>
+    <LoadingCustom v-if="state.isLoading"></LoadingCustom>
+    <LoadEnd v-if="state.isLoadEnd"></LoadEnd>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, reactive, onMounted } from "vue";
+import service from "../utils/https";
+import urls from "../utils/urls";
 import LoadEnd from "../components/LoadEnd.vue";
 import LoadingCustom from "../components/Loading.vue";
 import {
-  throttle,
   getScrollTop,
   getDocumentHeight,
   getWindowHeight,
-  getQueryStringByName,
   timestampToTime,
   isMobileOrPc,
 } from "../utils/utils";
@@ -57,8 +57,8 @@ export default defineComponent({
     LoadEnd,
     LoadingCustom,
   },
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       reverse: true,
       isLoadEnd: false,
       isLoading: false,
@@ -69,43 +69,46 @@ export default defineComponent({
         keyword: "",
         pageNum: 1,
         pageSize: 10,
-      } as Params,
+      } as Params
+    });
+
+    const formatTime = (value: string | Date): string => {
+      return timestampToTime(value, true);
     };
-  },
-  mounted(): void {
-    this.handleSearch();
-    window.onscroll = () => {
-      if (getScrollTop() + getWindowHeight() > getDocumentHeight() - 100) {
-        // 如果不是已经没有数据了，都可以继续滚动加载
-        if (this.isLoadEnd === false && this.isLoading === false) {
-          this.handleSearch();
-        }
+
+    const handleSearch = async (): Promise<void> => {
+      state.isLoading = true;
+      const data: ProjectsData = await service.get(urls.getProjectList, {
+        params: state.params,
+      });
+      state.isLoading = false;
+
+      state.list = [...state.list, ...data.list];
+      state.total = data.count;
+      state.params.pageNum++;
+      if (state.total === state.list.length) {
+        state.isLoadEnd = true;
       }
     };
-  },
-  methods: {
-    formatTime(value: string | Date): string {
-      return timestampToTime(value, true);
-    },
-    async handleSearch(): Promise<void> {
-      this.isLoading = true;
-      const data: ProjectsData = await (this as any).$https.get(
-        (this as any).$urls.getProjectList,
-        {
-          params: this.params,
+
+    onMounted(() => {
+      handleSearch();
+      window.onscroll = () => {
+        if (getScrollTop() + getWindowHeight() > getDocumentHeight() - 100) {
+          // 如果不是已经没有数据了，都可以继续滚动加载
+          if (state.isLoadEnd === false && state.isLoading === false) {
+            handleSearch();
+          }
         }
-      );
-      this.isLoading = false;
+      };
+    });
 
-      this.list = [...this.list, ...data.list];
-      this.total = data.count;
-      this.params.pageNum++;
-      if (this.total === this.list.length) {
-        this.isLoadEnd = true;
-      }
-    },
-  },
-  setup() {},
+    return {
+      state,
+      formatTime,
+      handleSearch,
+    };
+  }
 });
 </script>
 <style lang="less" scoped>
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 13421df..c088788 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -2,7 +2,7 @@
   <div class="timeline left">
     <el-timeline>
       <el-timeline-item
-        v-for="(l, i) in list"
+        v-for="(l, i) in state.list"
         :key="l._id"
         :color="l.state === 1 ? 'green' : l.state === 3 ? 'red' : ''"
         placement="top"
@@ -25,27 +25,28 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, reactive, onMounted } from "vue";
+import service from "../utils/https";
+import urls from "../utils/urls";
 import LoadEnd from "../components/LoadEnd.vue";
 import LoadingCustom from "../components/Loading.vue";
 import {
-  throttle,
   getScrollTop,
   getDocumentHeight,
   getWindowHeight,
-  getQueryStringByName,
   timestampToTime,
 } from "../utils/utils";
 import { Params, TimelineList, TimelinesData } from "../types/index";
 
+
 export default defineComponent({
   name: "Timeline",
   components: {
     LoadEnd,
     LoadingCustom,
   },
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       isLoadEnd: false,
       isLoading: false,
       list: [] as TimelineList[],
@@ -55,42 +56,45 @@ export default defineComponent({
         pageNum: 1,
         pageSize: 10,
       } as Params,
+    });
+
+    const formatTime = (value: string | Date): string => {
+      return timestampToTime(value, true);
     };
-  },
-  mounted(): void {
-    this.handleSearch();
-    window.onscroll = () => {
-      if (getScrollTop() + getWindowHeight() > getDocumentHeight() - 100) {
-        // 如果不是已经没有数据了，都可以继续滚动加载
-        if (this.isLoadEnd === false && this.isLoading === false) {
-          this.handleSearch();
-        }
+
+    const handleSearch = async (): Promise<void> => {
+      state.isLoading = true;
+      const data: TimelinesData = await service.get(urls.getTimeAxisList, {
+        params: state.params,
+      });
+      state.isLoading = false;
+
+      state.list = [...state.list, ...data.list];
+      state.total = data.count;
+      state.params.pageNum++;
+      if (state.total === state.list.length) {
+        state.isLoadEnd = true;
       }
     };
-  },
-  methods: {
-    formatTime(value: string | Date): string {
-      return timestampToTime(value, true);
-    },
-    async handleSearch(): Promise<void> {
-      this.isLoading = true;
-      const data: TimelinesData = await (this as any).$https.get(
-        (this as any).$urls.getTimeAxisList,
-        {
-          params: this.params,
+
+    onMounted(() => {
+      handleSearch();
+      window.onscroll = () => {
+        if (getScrollTop() + getWindowHeight() > getDocumentHeight() - 100) {
+          // 如果不是已经没有数据了，都可以继续滚动加载
+          if (state.isLoadEnd === false && state.isLoading === false) {
+            handleSearch();
+          }
         }
-      );
-      this.isLoading = false;
+      };
+    });
 
-      this.list = [...this.list, ...data.list];
-      this.total = data.count;
-      this.params.pageNum++;
-      if (this.total === this.list.length) {
-        this.isLoadEnd = true;
-      }
-    },
-  },
-  setup() {},
+    return {
+      state,
+      formatTime,
+      handleSearch,
+    };
+  }
 });
 </script>
 <style lang="less" scoped>