onenote 式样修改

mock/onenote.ts

@@ -2,27 +2,74 @@ import { MockMethod } from 'vite-plugin-mock'
 
 export default [
   {
-    url: '/onenote/api/v1/one_note',
+    url: '/onenote/api/v1/category',
     method: 'get',
     response: () => {
       return [
         {
-          section_id: 'x111',
+          category_id: '4444',
-          section_name: 'A',
+          category_color: '	#B0E0E6',
-          page_list: [
+          category_icon: 'Document',
-            {
+          category_theme: 'WIKI'
-              page_id: 'y111',
+        },
-              section_id: 'x111',
+        {
-              page_name: 'B',
+          category_id: '4444',
-            },
+          category_color: '	#B0E0E6',
-            {
+          category_icon: 'Collection',
-              page_id: 'y222',
+          category_theme: 'Collection'
-              section_id: 'x111',
+        },
-              page_name: 'C',
+        {
-            },
+          category_id: '4444',
-          ]
+          category_color: '	#B0E0E6',
-        }
+          category_icon: 'Files',
+          category_theme: 'Files'
+        },
+        {
+          category_id: '4444',
+          category_color: '	#B0E0E6',
+          category_icon: 'Phone',
+          category_theme: 'Phone'
+        },
       ]
     }
+  },
+  {
+    url: '/onenote/api/v1/4444/items/',
+    method: 'get',
+    response: () => {
+      return [
+        {
+          item_id: '00001',
+          item_name: '中国联通',
+          item_value: '13332247026'
+        },
+        {
+          item_id: '00002',
+          item_name: '中国联通副号',
+          item_value: '13333333333'
+        },
+      ]
+    }
+  },
+  {
+    url: '/onenote/api/v1/category',
+    method: 'put',
+    response: () => {
+      return {}
+    }
+  },
+  {
+    url: '/onenote/api/v1/item',
+    method: 'put',
+    response: () => {
+      return {}
+    }
+  },
+  {
+    url: '/onenote/api/v1/item',
+    method: 'delete',
+    response: () => {
+      return {}
+    }
   }
 ] as MockMethod[]

src/api/onenote.ts

@@ -1,10 +1,49 @@
 import { service } from '../utils/request'
 
-const get_notes = (params: Object) => {
+const get_categorys = () => {
   return service({
-    url: '/onenote/api/v1/one_note',
+    url: '/onenote/api/v1/category',
     method: 'GET',
-    params: params
+  })
+}
+
+const get_items = (category_id: string) => {
+  return service({
+    url: '/onenote/api/v1/' + category_id + '/items/',
+    method: 'GET',
+  })
+}
+
+
+const put_category = (data: Object) => {
+  return service({
+    url: '/onenote/api/v1/category',
+    method: 'PUT',
+    data: data
+  })
+}
+
+const put_item = (data: Object) => {
+  return service({
+    url: '/onenote/api/v1/item',
+    method: 'PUT',
+    data: data
+  })
+}
+
+const post_item = (data: Object) => {
+  return service({
+    url: '/onenote/api/v1/item',
+    method: 'post',
+    data: data
+  })
+}
+
+const delete_item = (data: Object) => {
+  return service({
+    url: '/onenote/api/v1/item',
+    method: 'delete',
+    data: data
   })
 }
 
@@ -24,12 +63,6 @@ const update_section = (params: Object) => {
   })
 }
 
-const insert_section = () => {
-  return service({
-    url: '/onenote/api/v1/one_note/insert_section',
-    method: 'PUT'
-  })
-}
 
 const insert_page = (params: Object) => {
   return service({
@@ -39,4 +72,4 @@ const insert_page = (params: Object) => {
   })
 }
 
-export { get_notes, update_page, update_section, insert_section, insert_page }
+export { get_categorys, get_items, update_page, update_section, put_category, put_item, post_item, delete_item, insert_page }

src/view/onenote/NavTab.vue

@@ -1,58 +0,0 @@
-<template>
-  <div
-    class="nav_tab"
-    style="display: flex;"
-    @mouseover.native="onOver"
-    @mouseleave.native="onLeave"
-  >
-    <div class="nav_before" :style="nav_back_color"></div>
-    <el-button :id="'input_edit' + row_key" class="nav_button">{{ nav_name }}</el-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-
-
-type Props = {
-  row_key: number,
-  checked: boolean,
-  nav_name: string
-}
-const props = defineProps<Props>()
-let nav_back_color = ref("blueviolet")
-watch(props, (newValue, oldValue) => {
-  if (props.checked) {
-    nav_back_color.value = "background-color: blueviolet;"
-  } else {
-    nav_back_color.value = "background-color: white;"
-  }
-})
-if (props.checked) {
-  nav_back_color.value = "background-color: blueviolet;"
-}
-
-const onOver = (e: any) => {
-  if (props.checked)
-    return
-  nav_back_color.value = "background-color: #FDF5E6;"
-}
-const onLeave = () => {
-  if (props.checked)
-    return
-  nav_back_color.value = "background-color: white;"
-}
-</script>
-
-<style scoped>
-.nav_before {
-  background-color: white;
-  width: 5px;
-  height: 40px;
-}
-.nav_button {
-  border-radius: 0px;
-  width: 50px;
-  height: 40px;
-}
-</style>

src/view/onenote/PageTab.vue

@@ -1,101 +0,0 @@
-<template>
-  <div
-    class="page_tab"
-    @mouseover.native="onOver"
-    @mouseleave.native="onLeave"
-    @dblclick="editPage(row_key)"
-    :style="back_color"
-  >
-    <div class="input_prex" :style="prex_back_color"></div>
-    <el-input
-      :id="'input_edit' + row_key"
-      class="input_edit"
-      v-show="is_edit"
-      v-model="page_data.page_name"
-      @blur="savePage"
-      @keyup.enter="doNothing"
-    ></el-input>
-    <div :id="'input_show' + row_key" class="input_show" v-show="!is_edit">{{ page_data.page_name }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
-import { update_page } from '../../api/onenote'
-
-type Props = {
-  row_key: string,
-  checked: boolean,
-  page_data: any
-}
-const props = defineProps<Props>()
-
-let back_color = ref("aliceblue")
-let prex_back_color = ref("aliceblue")
-let is_edit = ref(false)
-
-watch(props, (newValue, oldValue) => {
-  if (props.checked) {
-    back_color.value = "background-color: #d0d0d0;"
-    prex_back_color.value = "background-color: blueviolet;"
-  } else {
-    back_color.value = "background-color: white;"
-    prex_back_color.value = "background-color: white;"
-  }
-})
-if (props.checked) {
-  back_color.value = "background-color: #d0d0d0;"
-  prex_back_color.value = "background-color: blueviolet;"
-}
-const editPage = (row_key: string) => {
-  is_edit.value = !is_edit.value
-  const inputt: any = document.getElementById("input_edit" + row_key)
-  setTimeout(() => inputt.focus())
-}
-const savePage = () => {
-  is_edit.value = !is_edit.value
-  const params = {
-    page_id: props.page_data.page_id,
-    page_name: props.page_data.page_name
-  }
-  update_page(params).then(response => {
-
-  })
-  onLeave()
-}
-const doNothing = (e: KeyboardEvent) => {
-  (e.target as HTMLInputElement).blur()
-}
-const onOver = (e: any) => {
-  if (props.checked)
-    return
-  is_edit.value ? "" : back_color.value = "background-color: #FDF5E6;"
-}
-const onLeave = () => {
-  if (props.checked)
-    return
-  is_edit.value ? "" : back_color.value = "background-color: white;"
-}
-</script>
-
-<style scoped>
-.input_prex {
-  width: 2px;
-  height: 35px;
-}
-.input_edit,
-.input_show {
-  margin-left: 5px;
-}
-.page_tab {
-  display: flex;
-  align-items: center;
-  width: 90px;
-  height: 35px;
-  padding-left: 15px;
-}
-.page_title {
-  font-size: 14px;
-  font-family: "Meiryo", Courier, monospace;
-}
-</style>

src/view/onenote/SectionTab.vue

@@ -1,90 +0,0 @@
-<template>
-  <div
-    class="section_tab"
-    @mouseover.native="onOver"
-    @mouseleave.native="onLeave"
-    @dblclick="editSection(row_key)"
-    :style="back_color"
-  >
-    <el-input
-      :id="'section_edit' + row_key"
-      v-show="is_edit"
-      v-model="section_data.section_name"
-      @blur="saveSection"
-      @keyup.enter="doNothing"
-    ></el-input>
-    <div :id="'section_show' + row_key" v-show="!is_edit">{{ section_data.section_name }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
-import { update_section } from '../../api/onenote'
-
-type Props = {
-  row_key: string,
-  checked: boolean,
-  section_data: any
-}
-const props = defineProps<Props>()
-
-let back_color = ref("aliceblue")
-let is_edit = ref(false)
-
-watch(props, (newValue, oldValue) => {
-  if (props.checked) {
-    back_color.value = "background-color: #d0d0d0;"
-  } else {
-    back_color.value = "background-color: white;"
-  }
-})
-if (props.checked) {
-  back_color.value = "background-color: #d0d0d0;"
-}
-const editSection = (row_key: string) => {
-  is_edit.value = !is_edit.value
-  const inputt: any = document.getElementById("section_edit" + row_key)
-  setTimeout(() => inputt.focus())
-}
-const saveSection = () => {
-  is_edit.value = !is_edit.value
-  const params = {
-    section_id: props.section_data.section_id,
-    section_name: props.section_data.section_name
-  }
-  update_section(params).then(response => {
-
-  })
-  onLeave()
-}
-const doNothing = (e: KeyboardEvent) => {
-  (e.target as HTMLInputElement).blur()
-}
-const onOver = (e: any) => {
-  if (props.checked)
-    return
-  is_edit.value ? "" : back_color.value = "background-color: #FDF5E6;"
-}
-const onLeave = () => {
-  if (props.checked)
-    return
-  is_edit.value ? "" : back_color.value = "background-color: white;"
-}
-</script>
-
-<style scoped>
-.section_show {
-  width: 90px;
-}
-.section_tab {
-  display: flex;
-  align-items: center;
-  width: 90px;
-  height: 35px;
-  padding-left: 15px;
-}
-.page_title {
-  font-size: 14px;
-  font-family: "Meiryo", Courier, monospace;
-}
-</style>

src/view/onenote/index.vue

@@ -1,153 +1,276 @@
 <template>
-  <div class="one_note">
-    <div class="nav_tabs common_box">
-      <NavTab :row_key="index" :checked="nav == index ? true : false" :nav_name="item" @click="onclickNav(index)"
-        v-for="(item, index) in nav_list"></NavTab>
-    </div>
-    <div class="section_tabs common_box">
-      <div>
-        <SectionTab :row_key="item.section_id + ''" @click="onclickSection(item.section_id, index)"
-          :checked="item.section_id === section.section_id ? true : false" :section_data="item"
-          v-for="(item, index) in data_sections"></SectionTab>
-      </div>
-      <el-button class="plus_button" @click="addSection">+</el-button>
-    </div>
 
-    <div class="page_tabs common_box">
+  <div class="category_card-box" v-show="isshowCategorys">
-      <div>
+    <el-card v-for="(card, key) in categoryCards" shadow="hover" @click="showCategory(card)"
-        <PageTab :row_key="item.page_id + ''" v-show="item.section_id == section.section_id ? true : false"
+      class="onenote_category_card">
-          @click="onclickPage(item.page_id)" :checked="item.page_id === page ? true : false" :page_data="item"
+      <template #header>
-          v-for="(item, index) in current_page_list"></PageTab>
+        <div class="category_card__header">
-      </div>
+          <el-icon :size="40">
+            <component :is="card.category_icon" :style="{ color: card.category_color }" />
+          </el-icon>
+        </div>
 
-      <el-button class="plus_button" @click="addPage">+</el-button>
+      </template>
-    </div>
+      <template #default>
-    <div></div>
+        <div class="category_card__body">
+          {{ card.category_theme }}
+        </div>
+      </template>
+    </el-card>
+    <el-card shadow="hover" @click="categoryDrawer = true" class="onenote_category_card">
+      <template #header>
+        <div class="category_card__header">
+          <el-icon :size="40">
+            <component is="Management" :style="{ color: '#5cdbd3' }" />
+          </el-icon>
+        </div>
+
+      </template>
+      <template #default>
+        <div class="category_card__body">
+          管理
+        </div>
+      </template>
+    </el-card>
   </div>
+
+  <div class="onenote_card-box" v-show="isShowCard">
+    <el-page-header @back="onBack">
+      <template #content>
+        <div class="flex items-center">
+          <span class="text-large font-600 mr-3"> {{ current_category }} </span>
+        </div>
+        <el-button size="large" :icon="Plus" round @click="onAddItem"></el-button>
+      </template>
+    </el-page-header>
+    <el-card v-for="(item, key) in itemCards" shadow="hover" class="onenote_item_card" @dblclick="editItem(item)">
+      <template #header>
+        <div class="onenote_card__header">
+          {{ item.item_name }}
+        </div>
+      </template>
+      <template #default>
+        <div class="onenote_card__body">
+          {{ item.item_value }}
+        </div>
+      </template>
+    </el-card>
+  </div>
+
+  <el-drawer v-model="categoryDrawer" title="I am the title" :with-header="false">
+
+    <span>Pick a icon!</span>
+    <el-alert title="you can pick a icon on the website!" type="success" />
+    <el-link type="success" @click="to_element_ui_icon">{{ element_ui_icon }}</el-link>
+    <el-input v-model="category_form.category_icon" class="category_icon" size="large" placeholder="">
+      <template #prepend>el-icon:</template>
+    </el-input>
+
+    <span>Pick a color!</span>
+    <el-alert title="you can pick a icon on the website!" type="success" />
+    <el-link type="success" @click="to_cainiao_color">{{ cainiao_color }}</el-link>
+    <el-input v-model="category_form.category_color" class="category_icon" size="large" placeholder="">
+      <template #prepend>color:</template>
+    </el-input>
+
+    <span>Pick a theme!</span>
+    <el-input v-model="category_form.category_theme" class="category_icon" size="large" placeholder="">
+      <template #prepend>theme:</template>
+    </el-input>
+
+    <el-button size="large" :icon="Check" round @click="addCategory">确认</el-button>
+  </el-drawer>
+
+  <el-drawer v-model="itemDrawer" title="I am the title" :with-header="false">
+    <el-input v-model="item_form.item_name" class="category_icon" size="large" placeholder="">
+      <template #prepend>name:</template>
+    </el-input>
+
+    <el-input v-model="item_form.item_value" class="category_icon" size="large" type="textarea" :rows="10">
+      <template #prepend>text:</template>
+    </el-input>
+
+    <el-button size="large" :icon="Check" round @click="deleteItem">删除</el-button>
+    <el-button size="large" :icon="Check" round @click="addItem">确认</el-button>
+  </el-drawer>
+
 </template>
 
 <script setup lang="ts">
-import PageTab from './PageTab.vue'
+import { reactive, ref } from 'vue'
-import SectionTab from './SectionTab.vue'
+import { Check, Plus } from '@element-plus/icons-vue'
-import NavTab from './NavTab.vue'
+import { get_categorys, get_items, put_category, put_item, delete_item } from '@/api/onenote'
-import { get_notes, insert_section, insert_page } from '../../api/onenote'
+
-import { reactive, ref } from 'vue';
+
-// type 定義
+// -- IMPORT --
-type Section = {
+
-  section_id: string,
+// -- INTERFACE OR TYPE DEFINITION --
-  section_name: string,
+type CategoryCard = {
-  page_list: Page[]
+  category_id: string,
+  category_color: string,
+  category_icon: string,
+  category_theme: string
 }
 
-type Page = {
+type CategoryItem = {
-  page_id: string,
+  item_id: string,
-  section_id: string,
+  item_name: string,
-  page_name: string
+  item_value: string
 }
-// 変数定義
-let nav = ref(0)
-let page = ref("")
-let section = reactive<Section>(<Section>{})
-const data_sections = reactive<Section[]>([])
-const current_page_list = reactive<Page[]>([])
-const nav_list = reactive<any>(["图书馆", "检索", "历史"])
-// API 呼び出す
-get_notes({}).then(response => {
-  response.data.forEach((item: any) => {
-    const section: Section = {
-      section_id: item.section_id,
-      section_name: item.section_name,
-      page_list: []
-    }
-    item.page_list.forEach((pageItem: any) => {
-      const page: Page = {
-        page_id: pageItem.page_id,
-        section_id: pageItem.section_id,
-        page_name: pageItem.page_name
-      }
-      section.page_list.push(page)
-    });
-    data_sections.push(section)
-  });
-}).then(() => {
-  Object.assign(current_page_list, data_sections[0].page_list)
-});
 
-// アクション
+// -- REACTIVE OBJECT --
-const onclickNav = (index: number) => {
+const itemCards = reactive<CategoryItem[]>([])
-  nav.value = index
+const categoryCards = reactive<CategoryCard[]>([])
+let category_form = ref<CategoryCard>({
+  category_id: '',
+  category_color: '',
+  category_icon: '',
+  category_theme: 'Sample'
+})
+let item_form = ref<CategoryItem>({
+  item_id: '',
+  item_name: '',
+  item_value: '',
+})
+
+// -- REF OBJECT --
+let element_ui_icon = "https://element-plus.gitee.io/zh-CN/component/icon.html"
+let cainiao_color = "runoob.com/html/html-colornames.html"
+const categoryDrawer = ref(false)
+const itemDrawer = ref(false)
+let isShowCard = ref(false)
+let isshowCategorys = ref(true)
+
+let current_category = ref("")
+
+// -- EVENT DEFINITION
+const onBack = () => {
+  isshowCategorys.value = true
+  isShowCard.value = false
 }
-const onclickPage = (index: string) => {
+
-  page.value = index
+const onAddItem = () => {
+  clearItemForm()
+  itemDrawer.value = true
 }
-const onclickSection = (section_id: string, index: number) => {
+
-  section.section_id = section_id
+const showCategory = (card: CategoryCard) => {
-  Object.assign(current_page_list, data_sections[index].page_list)
+  get_items(card.category_id).then((response) => {
-}
+    itemCards.length = 0
-const addSection = () => {
+    response.data.forEach((item: CategoryItem) => {
-  insert_section().then(response => {
+      itemCards.push(item)
-    const data = response.data
+    })
-    const section: Section = {
+    isshowCategorys.value = false
-      section_id: data.section_id + '',
+    isShowCard.value = true
-      section_name: data.section_name,
+    current_category.value = card.category_theme
-      page_list: data.page_list
-    }
-    data_sections.push(section)
-  }).then(() => {
-    let index = data_sections.length - 1
-    onclickSection(data_sections[index].section_id, index)
   })
 }
-const addPage = () => {
+
-  const params = {
+const addCategory = () => {
-    section_id: section.section_id
+  put_category(category_form).then(resp => {
-  }
+    categoryCards.push(category_form.value)
-  insert_page(params).then(response => {
+    categoryDrawer.value = false
-    const data = response.data
+    clearCategoryForm()
-    const page: Page = {
-      page_id: data.page_id,
-      section_id: data.section_id,
-      page_name: data.page_name
-    }
-    current_page_list.push(page)
   })
 }
+
+const addItem = () => {
+  put_item(item_form.value).then(resp => {
+    itemDrawer.value = false
+    itemCards.push(item_form.value)
+  })
+}
+
+const deleteItem = () => {
+  delete_item(item_form.value.item_id).then(resp => {
+    itemDrawer.value = false
+    let index = itemCards.findIndex((record) => record.item_id == item_form.value.item_id)
+    itemCards.splice(index, 1)
+    itemDrawer.value = false
+  })
+}
+
+const editItem = (item: CategoryItem) => {
+  itemDrawer.value = true
+  item_form.value.item_id = item.item_id
+  item_form.value.item_name = item.item_name
+  item_form.value.item_value = item.item_value
+}
+
+const clearItemForm = () => {
+  item_form.value.item_id = ''
+  item_form.value.item_name = ''
+  item_form.value.item_value = ''
+}
+
+const clearCategoryForm = () => {
+  category_form.value.category_color = ''
+  category_form.value.category_id = ''
+  category_form.value.category_icon = ''
+  category_form.value.category_theme = ''
+}
+
+const to_element_ui_icon = () => {
+  window.open(element_ui_icon, '_blank')
+}
+
+const to_cainiao_color = () => {
+  window.open(cainiao_color, '_blank')
+}
+
+
+/**
+ * AUTO INVOKE FUNCTION
+ */
+get_categorys().then((resp) => {
+  resp.data.forEach((record: CategoryCard) => {
+    categoryCards.push(record)
+  })
+})
+clearItemForm()
 </script>
 
 <style  scoped>
-.one_note {
+.category_card-box {
   display: flex;
-  align-items: stretch;
+  flex-wrap: wrap;
 }
 
-.section_tabs,
+.category_card__header {
-.page_tabs {
+  text-align: center;
+  width: 100px;
+  line-height: 100px;
+  height: 100px;
+}
+
+.category_card__body {
+  text-align: center;
+}
+
+.onenote_card__header {
+  width: 120px;
+}
+
+.onenote_card__body {}
+
+.onenote_card-box {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  width: 90px;
 }
 
-.nav_tabs {
+.onenote_item_card {
+  display: flex;
+  margin: 10px;
+}
+
+.onenote_category_card {
   display: flex;
   flex-direction: column;
-  width: 55px;
+  margin: 20px;
-  padding: 0px;
+  padding: 20px;
 }
 
-.common_box {
+.category_icon {
-  background-color: white;
+  margin-bottom: 50px;
-
-  border-right-width: 1px;
-  border-right-style: solid;
-  border-right-color: antiquewhite;
-}
-
-.plus_button {
-  border-top: 1px solid antiquewhite;
-  border-bottom: 1px solid antiquewhite;
-  border-left: 0px solid antiquewhite;
-  border-right: 0px solid antiquewhite;
-  border-radius: 0px;
 }
 </style>