From 01652a527d00626af61cfb45f3acf7966813cf5f Mon Sep 17 00:00:00 2001
From: simple321vip <simple321@vip.qq.com>
Date: Tue, 25 Oct 2022 08:51:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20=E6=B3=A8=E5=86=8C=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8Csorry=E9=A1=B5=E9=9D=A2=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/blog.ts                   |  11 +-
 src/api/user.ts                   |  10 +-
 src/components/login/login.vue    |   2 +-
 src/components/login/register.vue |  77 ++++++++++
 src/components/login/sorry.vue    |  14 ++
 src/main.ts                       |  67 +++++----
 src/router/index.ts               |   8 ++
 src/view/blog/createBlog.vue      | 226 ++++++++++++++++++++++++------
 8 files changed, 341 insertions(+), 74 deletions(-)
 create mode 100644 src/components/login/register.vue
 create mode 100644 src/components/login/sorry.vue

diff --git a/src/api/blog.ts b/src/api/blog.ts
index f6f8249..3250e57 100644
--- a/src/api/blog.ts
+++ b/src/api/blog.ts
@@ -39,6 +39,15 @@ const removeBlogType = (data: Object) => {
   })
 }
 
+const sortBlogTypes = (data: Object) => {
+  return service({
+    url: '/auth/api/v1/author/blog_types',
+    method: 'POST',
+    headers: headers,
+    data: data
+  })
+}
+
 const getContent = (id: string) => {
   return service({
     url: '/auth/api/v1/author/blog/content/' + id,
@@ -74,4 +83,4 @@ const deleteContent = (bid: string) => {
 }
 
 
-export { listAll, updateBtName, putBlogType, removeBlogType, getContent, putBlog, updateContent, deleteContent }
\ No newline at end of file
+export { listAll, updateBtName, putBlogType, removeBlogType, sortBlogTypes, getContent, putBlog, updateContent, deleteContent }
\ No newline at end of file
diff --git a/src/api/user.ts b/src/api/user.ts
index 9356738..0a27cb0 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -22,5 +22,13 @@ const logout = (id: string) => {
   })
 }
 
+const register_user = (postData: Object) => {
+  return service({
+    url: '/auth/api/v1/register',
+    method: 'POST',
+    data: postData
+  })
+}
 
-export { authorize, obtainUserInfo, logout }
\ No newline at end of file
+
+export { authorize, obtainUserInfo, logout, register_user }
\ No newline at end of file
diff --git a/src/components/login/login.vue b/src/components/login/login.vue
index f32124b..f7f13f9 100644
--- a/src/components/login/login.vue
+++ b/src/components/login/login.vue
@@ -13,7 +13,7 @@
       <el-form-item label="用户凭证" prop="checkPass">
         <el-input v-model="loginForm.password" type="password" autocomplete="off" />
       </el-form-item> -->
-      <p class="tang-pass-qrcode-title">百度网盘扫码登陆<a class="pass-link" :href="qrcode" target="new">请使用微信扫一扫登录</a></p>
+      <p class="tang-pass-qrcode-title">百度网盘扫码登陆<a class="pass-link" :href="qrcode" target="_self">请使用微信扫一扫登录</a></p>
       <!-- <el-button @click="loginWithBaiDu">
         百度App
       </el-button> -->
diff --git a/src/components/login/register.vue b/src/components/login/register.vue
new file mode 100644
index 0000000..68ec294
--- /dev/null
+++ b/src/components/login/register.vue
@@ -0,0 +1,77 @@
+<template>
+  該当システムのご利用はシステム管理者に許可する必要があります。<br>
+  許可がなければ、ユーザー情報を登録しても、システムのご利用はできませんので、ご注意ください。
+  <el-form :model="register_form" label-width="120px">
+
+    <el-form-item label="phone_number">
+      <el-input v-model="register_form.phone_number" />
+    </el-form-item>
+
+    <el-form-item label="auth_code">
+      <el-input v-model="register_form.code" />
+    </el-form-item>
+
+    <el-form-item label="tenantId">
+      <el-input v-model="register_form.tenant_id" :disabled="true" />
+    </el-form-item>
+
+    <el-form-item label="account">
+      <el-input v-model="register_form.account" :disabled="true" />
+    </el-form-item>
+
+    <el-form-item label="token">
+      <el-input v-model="register_form.token" :disabled="true" />
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">Register</el-button>
+      <el-button>Cancel</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { useRoute } from 'vue-router';
+import { register_user } from "./../../api/user";
+import router from '../../router/index'
+import { setTenant, setToken } from '../../utils/auth';
+
+const route = useRoute()
+const params = route.query
+
+
+// use phone number to register user(tenant)
+const register_form = reactive({
+  phone_number: '',
+  code: '',
+  tenant_id: params.tenantId as string,
+  account: params.account as string,
+  token: params.token as string
+})
+
+const onSubmit = () => {
+  register_user(register_form).then((response) => {
+
+    if (response.status == 200) {
+      const tenant = {
+        id: params.tenantId,
+        account: params.account
+      }
+
+      setToken(params.token as string)
+      setTenant(tenant)
+
+      const { href } = router.resolve({
+        path: '/'
+      });
+      window.open(href, '_self');
+    }
+  })
+}
+
+
+</script>
+<style scoped>
+
+</style>
diff --git a/src/components/login/sorry.vue b/src/components/login/sorry.vue
new file mode 100644
index 0000000..df03677
--- /dev/null
+++ b/src/components/login/sorry.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="yuliu">
+    这个人很懒，什么也没写
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+
+
+</script>
+<style scoped>
+
+</style>
diff --git a/src/main.ts b/src/main.ts
index aa1f634..178cfcb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -23,35 +23,52 @@ app.use(store)
 import { getToken, getTenant, setToken, setTenant } from './utils/auth'
 import { Tenant } from './entity/index'
 import Cookies from 'js-cookie'
-import { obtainUserInfo } from './api/user'
-const whiteList = ['/login']
+const whiteList = ['/login', '/register', '/sorryPage']
 let url = window.location.href
 
 async function checktoken(url: string) {
-  if (url.search("token") != -1) {
 
-    const list = url.split("?token=")
-
-    let base_url = list[0]
-    let authorizeToken = list[1]
-    if (list.length < 2 || authorizeToken.length == 0) {
-      router.push({
-        path: '/illustration',
-      })
-      return
-    }
-    await obtainUserInfo(authorizeToken).then(response => {
-
-      if (response.status == 200) {
-        const tenant = {
-          id: response.data.id,
-          account: response.data.account
-        }
-        setToken(authorizeToken)
-        setTenant(tenant)
-        window.open(base_url, "_self")
-      }
+  if (url.search("register") != -1) {
+    let arr = url.split('?')
+    let parameters = arr[1].split('&')
+    let query_data: { [key: string]: any } = {}
+    parameters.forEach(parameter => {
+      let parameter_list = parameter.split("=")
+      query_data[parameter_list[0]] = parameter_list[1]
     })
+    router.push({
+      path: '/register',
+      query: query_data
+    })
+    return
+  }
+  if (url.search("home") != -1) {
+    let arr = url.split('?')
+    let parameters = arr[1].split('&')
+    let query_data: { [key: string]: any } = {}
+    parameters.forEach(parameter => {
+      let parameter_list = parameter.split("=")
+      query_data[parameter_list[0]] = parameter_list[1]
+    })
+    const tenant = {
+      id: query_data.tenantId,
+      account: query_data.account
+    }
+
+    setToken(query_data.token as string)
+    setTenant(tenant)
+
+    const { href } = router.resolve({
+      path: '/'
+    });
+    window.open(href, '_self');
+    return
+  }
+  if (url.search("sorryPage") != -1) {
+    router.push({
+      path: '/sorryPage',
+    })
+    return
   }
 }
 checktoken(url)
@@ -96,7 +113,7 @@ router.beforeEach((to, from, next) => {
         next()
     }
   } else {
-    if (whiteList.includes(to.path)) {
+    if (whiteList.indexOf(to.path) !== -1) {
       next()
     } else {
       next('/login')
diff --git a/src/router/index.ts b/src/router/index.ts
index dd5082c..b1db757 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -104,6 +104,14 @@ const routes: Array<RouteRecordRaw> = [
     path: "/illustration",
     component: () => import('../components/illustration/index.vue')
   },
+  {
+    path: "/register",
+    component: () => import('../components/login/register.vue')
+  },
+  {
+    path: "/sorryPage",
+    component: () => import('../components/login/sorry.vue')
+  },
 ]
 
 
diff --git a/src/view/blog/createBlog.vue b/src/view/blog/createBlog.vue
index e6f08c8..b6ee5bb 100644
--- a/src/view/blog/createBlog.vue
+++ b/src/view/blog/createBlog.vue
@@ -1,10 +1,35 @@
 <template>
   <div class="blog_editer" v-if="isReady">
     <div class="bt_section" :style="btWholeStyle">
-      <el-button class="bt-input" @click="contentDialogVisible = true">增加一个分类</el-button>
-      <el-button class="bt-input" v-for="(value, key) of blogTypes" :key="key" @click="onclickTypeTab(value[0])">
+      <table class="tb">
+        <thead>
+          <draggable v-model="state.headers" animation="200" tag="tr" :item-key="(key: string) => key">
+            <template #item="{ element: header }">
+              <th class="move">
+                增加分类
+              </th>
+            </template>
+          </draggable>
+        </thead>
+        <!-- <draggable :list="blogTypes" handle=".move" animation="300" @start="onStart" @end="onEnd" tag="tbody" -->
+        <draggable :list="blogTypes" handle=".move" animation="300" @start="onStart" @end="onEnd" tag="tbody"
+          item-key="name">
+          <template #item="{ element }">
+            <tr>
+              <td class="move" v-for="(header, index) in state.headers" :key="header">
+                <el-icon v-show="checkedBlogIndex == element.order">
+                  <edit />
+                </el-icon>
+                {{ element.btName }}
+              </td>
+            </tr>
+          </template>
+        </draggable>
+      </table>
+      <!-- <el-button class="bt-input" @click="contentDialogVisible = true">增加一个分类</el-button>
+      <el-button class="bt-input" v-for="(value, key) of blogTypes" :key="key" @click="onclickTypeTab(value.order)">
         <el-dropdown trigger="click">
-          <el-icon v-show="checkedBlogIndex == value[0]">
+          <el-icon v-show="checkedBlogIndex == value.order">
             <edit />
           </el-icon>
           <template #dropdown>
@@ -15,13 +40,14 @@
             </el-dropdown-menu>
           </template>
         </el-dropdown>
-        {{ value[1].btName }}
-      </el-button>
+        {{ value.btName }}
+      </el-button> -->
     </div>
     <div class="b_section" :style="bWholeStyle">
+
       <el-button class="bt-input" :disabled="isclicked" @click="insertBlog">增加一个博客</el-button>
-      <el-button class="bt-input" v-for="(blog, index) of blogTypes.get(checkedBlogIndex)?.blogs"
-        @click="onclickBlogTab(blog[0])">
+      <el-button class="bt-input" v-for="(blog, index) of blogTypes[checkedBlogIndex].blogs"
+        @click="onclickBlogTab(blog[1])">
         <el-dropdown trigger="click">
           <el-icon v-show="checkedIndex == blog[0]">
             <edit />
@@ -39,7 +65,7 @@
     </div>
     <div class="c_section">
       <div class="title_style">
-        <el-input v-model="((blogTypes.get(checkedBlogIndex) as BlogType).blogs.get(checkedIndex) as Blog).title"
+        <el-input v-model="((blogTypes[checkedBlogIndex] as BlogType).blogs.get(checkedIndex) as Blog).title"
           @keyup.enter.native="saveTitle" @blur="saveTitle">
         </el-input>
         <div style="width: 60px;">
@@ -49,12 +75,12 @@
       </div>
       <div :style="cWholeStyle">
         <md-editor theme="light"
-          v-model="((blogTypes.get(checkedBlogIndex) as BlogType).blogs.get(checkedIndex) as Blog).content"
+          v-model="((blogTypes[checkedBlogIndex] as BlogType).blogs.get(checkedIndex) as Blog).content"
           @save="saveContent" :style="{ height: innerHeight }" />
       </div>
     </div>
     <el-dialog v-model="dialogVisible" title="修改博客分类名称" width="30%">
-      <el-input v-model="(blogTypes.get(checkedBlogIndex) as BlogType).btName"></el-input>
+      <el-input v-model="(blogTypes[checkedBlogIndex] as BlogType).btName"></el-input>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="dialogVisible = false">取消</el-button>
@@ -73,8 +99,8 @@
       </template>
     </el-dialog>
     <el-dialog v-model="btdeleteDialogVisible" title="删除博客分类" width="30%">
-      你正在对 {{ (blogTypes.get(checkedBlogIndex) as BlogType).btName }}
-      <el-input v-model="btName" :placeholder="'请输入<' + (blogTypes.get(checkedBlogIndex) as BlogType).btName + '>'">
+      你正在对 {{ (blogTypes[checkedBlogIndex] as BlogType).btName }}
+      <el-input v-model="btName" :placeholder="'请输入<' + (blogTypes[checkedBlogIndex] as BlogType).btName + '>'">
       </el-input>
       <template #footer>
         <span class="dialog-footer">
@@ -84,7 +110,7 @@
       </template>
     </el-dialog>
     <el-dialog v-model="deleteDialogVisible" title="删除博客" width="30%">
-      你正在对 {{ ((blogTypes.get(checkedBlogIndex) as BlogType).blogs.get(checkedIndex) as Blog).title }}
+      你正在对 {{ ((blogTypes[checkedBlogIndex] as BlogType).blogs.get(checkedIndex) as Blog).title }}
       <el-input v-model="btName" :placeholder="'请输入<删除>'">
       </el-input>
       <template #footer>
@@ -103,7 +129,18 @@ import $moment from "moment"
 import MdEditor from 'md-editor-v3'
 import { Edit } from "@element-plus/icons-vue"
 import 'md-editor-v3/lib/style.css'
-import { updateBtName, updateContent, listAll, putBlogType, removeBlogType, getContent, putBlog, deleteContent } from '../../api/blog'
+import {
+  updateBtName,
+  updateContent,
+  listAll,
+  putBlogType,
+  removeBlogType,
+  getContent,
+  putBlog,
+  deleteContent,
+  sortBlogTypes
+} from '../../api/blog'
+import draggable from "vuedraggable"
 
 type Blog = {
   bid: string,
@@ -112,40 +149,68 @@ type Blog = {
   title: string,
   blog_prex: string,
   autosave_control: string,
-  content: string
+  content: string,
+  order: number
 }
 
 type BlogType = {
   btId: string,
   btName: string,
-  blogs: Map<string, Blog>
+  blogs: Map<string, Blog>,
+  order: number
 }
-const blogTypes = reactive<Map<string, BlogType>>(new Map())
+const blogTypes = reactive<BlogType[]>([])
 const dialogVisible = ref(false)
 const contentDialogVisible = ref(false)
 const btdeleteDialogVisible = ref(false)
 const deleteDialogVisible = ref(false)
 
 let checkedIndex = ref<string>("")
-let checkedBlogIndex = ref<string>("")
+let checkedBlogIndex = ref<number>(0)
 let isclicked = ref(false)
 let isReady = ref(false)
 let updated = ref(false)
 let startTime = reactive($moment());
 
+/*
+draggable 对CSS样式没有什么要求万物皆可拖拽
+:list="state.list"         //需要绑定的数组 
+animation="300"            //动画效果
+@start="onStart"           //拖拽开始的事件
+@end="onEnd"               //拖拽结束的事件
+*/
+const state = reactive({
+  //列的名称
+  headers: ["blogType"],
+  //需要拖拽的数据，拖拽后数据的顺序也会变化
+})
 
 // 関数定義
+//拖拽开始的事件
+const onStart = () => {
+  console.log("开始拖拽");
+};
+
+//拖拽结束的事件
+const onEnd = () => {
+  blogTypes.forEach((blogType, index) => {
+    blogType.order = index
+  })
+  sortBlogType()
+}
 
 /**
  * Blog一覧取得
  */
 const getTestData = async () => {
   await listAll().then(response => {
+    response.data.sort((x: any, y: any) => { x.order - y.order })
     response.data.forEach((element: any) => {
       const blog_type: BlogType = {
         btId: element.btId,
         btName: element.btName,
-        blogs: new Map<string, Blog>()
+        blogs: new Map<string, Blog>(),
+        order: element.order
       }
       element.blog_list.forEach((item: any) => {
         const blog: Blog = {
@@ -155,15 +220,16 @@ const getTestData = async () => {
           title: item.title,
           blog_prex: item.blog_prex,
           autosave_control: item.autosave_control,
-          content: item.content
+          content: item.content,
+          order: item.order
         }
         blog_type.blogs.set(item.bid, blog)
       })
-      blogTypes.set(element.btId, blog_type)
+      blogTypes.push(blog_type)
     })
   })
   isReady.value = true
-  checkedBlogIndex.value = blogTypes.keys().next().value
+  checkedBlogIndex.value = blogTypes[0].order
   checkedIndex.value = blogTypes.values().next().value.blogs.keys().next().value
   // TODO 需要优化部分
   /**
@@ -189,19 +255,18 @@ const getTestData = async () => {
  * BlogTypeを選べる
  * @param key
  */
-const onclickTypeTab = (key: string) => {
-  const bid = blogTypes.get(key)?.blogs.values().next().value.bid
+const onclickTypeTab = (order: number) => {
+  const bid = blogTypes[order].blogs.values().next().value.bid
   getContent(bid).then(response => {
-    ((blogTypes.get(key) as BlogType).blogs.get(bid) as Blog).content = response.data.content
-    checkedBlogIndex.value = key
+    (blogTypes[order].blogs.get(bid) as Blog).content = response.data.content
+    checkedBlogIndex.value = order
     checkedIndex.value = bid
   })
 }
 
-const onclickBlogTab = (key: string) => {
-  checkedIndex.value = key
-  getContent(key).then(response => {
-    ((blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.get(checkedIndex.value) as Blog).content = response.data.content
+const onclickBlogTab = (blog: Blog) => {
+  getContent(blog.bid).then(response => {
+    ((blogTypes[checkedBlogIndex.value] as BlogType).blogs.get(checkedIndex.value) as Blog).content = response.data.content
 
   })
 }
@@ -220,7 +285,7 @@ const saveContent = () => {
   updated.value = true
   const query = {
     bid: checkedIndex.value,
-    content: ((blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.get(checkedIndex.value) as Blog).content
+    content: ((blogTypes[checkedBlogIndex.value] as BlogType).blogs.get(checkedIndex.value) as Blog).content
   }
   updateContent(query).then(response => {
     if (response.status == 200) {
@@ -236,7 +301,7 @@ const saveContent = () => {
 const saveType = () => {
   const query = {
     btId: checkedBlogIndex.value,
-    btName: (blogTypes.get(checkedBlogIndex.value) as BlogType).btName
+    btName: (blogTypes[checkedBlogIndex.value] as BlogType).btName
   }
   updateBtName(query).then(response => {
     dialogVisible.value = false
@@ -254,7 +319,7 @@ const saveTitle = () => {
   updated.value = true
   const query = {
     bid: checkedIndex.value,
-    title: ((blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.get(checkedIndex.value) as Blog).title
+    title: ((blogTypes[checkedBlogIndex.value] as BlogType).blogs.get(checkedIndex.value) as Blog).title
   }
   updateContent(query).then(response => {
     updated.value = false
@@ -268,19 +333,23 @@ const insertBlog = () => {
   isclicked.value = true
   const data = {
     btId: checkedBlogIndex.value,
-    title: $moment().format("YYYY-MM-DD")
+    title: $moment().format("YYYY-MM-DD"),
+    order: (blogTypes[checkedBlogIndex.value] as BlogType).blogs.size
   }
   putBlog(data).then(response => {
-    const { bid, title, content } = response.data
+    const { bid, btid, title, content, order, autosave_control } = response.data
     const blog = {
       bid: bid,
-      btId: checkedBlogIndex.value,
+      btId: btid,
       btName: "",
       title: title,
       blog_prex: "",
-      content: content
+      content: content,
+      autosave_control: autosave_control,
+      order: order
     } as Blog
-    (blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.set(bid, blog)
+
+    (blogTypes[checkedBlogIndex.value] as BlogType).blogs.set(bid, blog)
     checkedIndex.value = bid
     isclicked.value = false
   })
@@ -294,8 +363,8 @@ const deleteBlog = () => {
     deleteContent(checkedIndex.value).then(response => {
       if (response.status == 200) {
         const deleteKey = checkedIndex.value
-        checkedIndex.value = blogTypes.get(checkedBlogIndex.value)?.blogs.keys().next().value
-        blogTypes.get(checkedBlogIndex.value)?.blogs.delete(deleteKey)
+        checkedIndex.value = blogTypes[checkedBlogIndex.value].blogs.keys().next().value
+        blogTypes[checkedBlogIndex.value].blogs.delete(deleteKey)
         deleteDialogVisible.value = false
       }
     })
@@ -307,13 +376,15 @@ const deleteBlog = () => {
 let btName = ref("")
 const insertBlogType = () => {
   const data = {
-    btName: btName.value
+    btName: btName.value,
+    order: blogTypes.length
   }
   putBlogType(data).then(response => {
     const blog_type: BlogType = {
       btId: response.data.btId,
       btName: response.data.btName,
-      blogs: new Map<string, Blog>()
+      blogs: new Map<string, Blog>(),
+      order: response.data.order
     }
     response.data.blog_list.forEach((item: any) => {
       const blog: Blog = {
@@ -323,11 +394,12 @@ const insertBlogType = () => {
         title: item.title,
         blog_prex: item.blog_prex,
         autosave_control: item.autosave_control,
-        content: item.content
+        content: item.content,
+        order: item.order
       }
       blog_type.blogs.set(item.bid, blog)
     })
-    blogTypes.set(response.data.btId, blog_type)
+    blogTypes.push(blog_type)
     checkedBlogIndex.value = response.data.btId
     checkedIndex.value = blog_type.blogs.keys().next().value
     contentDialogVisible.value = false
@@ -336,13 +408,13 @@ const insertBlogType = () => {
 }
 
 const deleteBlogType = () => {
-  if (btName.value == (blogTypes.get(checkedBlogIndex.value) as BlogType).btName) {
+  if (btName.value == (blogTypes[checkedBlogIndex.value] as BlogType).btName) {
     const data = {
       btId: checkedBlogIndex.value
     }
     removeBlogType(data).then((response) => {
       if (response.status == 200) {
-        blogTypes.delete(checkedBlogIndex.value)
+        blogTypes.splice(checkedBlogIndex.value, 1)
         checkedBlogIndex.value = blogTypes.keys().next().value
         checkedIndex.value = blogTypes.values().next().value.blogs.keys().next().value
       } else {
@@ -356,6 +428,23 @@ const deleteBlogType = () => {
   }
 }
 
+const sortBlogType = () => {
+
+  const sortData: BlogType[] = []
+  blogTypes.forEach((blogType: BlogType) => {
+    sortData.push({
+      btId: blogType.btId,
+      btName: blogType.btName,
+      blogs: new Map(),
+      order: blogType.order
+    })
+  })
+
+  sortBlogTypes(sortData).then(response => {
+
+  }).catch()
+}
+
 // Created　段階の関数呼び出す処理
 getTestData()
 
@@ -436,4 +525,49 @@ innerHeight.value = (window.innerHeight - 50) + 'px'
   display: flex;
   flex-direction: column;
 }
+
+
+
+
+.itxst {
+  width: 600px;
+}
+
+.move {
+  cursor: move;
+}
+
+table.tb {
+  color: #333;
+  border: solid 1px #999;
+  font-size: 13px;
+  border-collapse: collapse;
+  min-width: 100px;
+  user-select: none;
+}
+
+table.tb th {
+  background: rgb(168 173 217);
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #999;
+  text-align: left;
+}
+
+table.tb th:nth-of-type(1) {
+  text-align: center;
+}
+
+table.tb td {
+  background: #d6c8c8;
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #999;
+}
+
+table.tb td:nth-of-type(1) {
+  text-align: center;
+}
 </style>
\ No newline at end of file