refactor: update to new project structure

src/pages/components/Palette.vue

@@ -0,0 +1,65 @@
+<template>
+  <div style="text-align: center; margin-top: 48px">
+    <color-checkbox-group :defaultValues="['1']" @change="changeColor" :multiple="true" style="display: inline-block">
+      <color-checkbox color="rgb(245, 34, 45)" value="1" />
+      <color-checkbox color="rgb(250, 84, 28)" value="2" />
+      <color-checkbox color="rgb(250, 173, 20)" value="3" />
+      <color-checkbox color="rgb(19, 194, 194)" value="4" />
+      <color-checkbox color="rgb(82, 196, 26)" value="5" />
+      <color-checkbox color="rgb(24, 144, 255)" value="6" />
+      <color-checkbox color="rgb(47, 84, 235)" value="7" />
+      <color-checkbox color="rgb(114, 46, 209)" value="8" />
+      <color-checkbox color="rgb(256, 0, 0)" value="9" />
+      <color-checkbox color="rgb(0, 256, 0)" value="10" />
+      <color-checkbox color="rgb(0, 0, 256)" value="11" />
+      <color-checkbox color="rgb(256, 256, 0)" value="12" />
+    </color-checkbox-group>
+    <div></div>
+    <div class="view-color" :style="{backgroundColor: color}"/>
+  </div>
+</template>
+
+<script>
+import ColorCheckbox from '../../components/checkbox/ColorCheckbox'
+
+const ColorCheckboxGroup = ColorCheckbox.Group
+
+export default {
+  name: 'Palette',
+  data () {
+    return {
+      color: 'rgb(245, 34, 45)'
+    }
+  },
+  components: {ColorCheckbox, ColorCheckboxGroup},
+  methods: {
+    changeColor (values, colors) {
+      this.color = this.calculateColor(colors)
+    },
+    calculateColor (colors) {
+      let red = 0
+      let green = 0
+      let blue = 0
+      let values
+      colors.forEach(color => {
+        values = color.split('(')[1].split(')')[0].split(',')
+        red = Math.max(red, parseInt(values[0]))
+        green += Math.max(green, parseInt(values[1]))
+        blue += Math.max(blue, parseInt(values[2]))
+      })
+      return 'rgb(' + red + ',' + green + ',' + blue + ')'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .view-color{
+    margin-top: 48px;
+    display: inline-block;
+    height: 96px;
+    width: 96px;
+    border-radius: 48px;
+    border: 1px dashed gray;
+  }
+</style>

src/pages/components/TaskCard.vue

@@ -0,0 +1,38 @@
+<template>
+  <div style="display: flex">
+    <task-group class="task-group" title="ToDo" group="task">
+      <task-item :key="index" v-for="(item, index) in todoList" :content="item" />
+    </task-group>
+    <task-group class="task-group" title="In Progress" group="task">
+      <task-item :key="index" v-for="(item, index) in inproList" :content="item" />
+    </task-group>
+    <task-group class="task-group" title="Done" group="task">
+      <task-item :key="index" v-for="(item, index) in doneList" :content="item" />
+    </task-group>
+  </div>
+</template>
+
+<script>
+import TaskGroup from '../../components/task/TaskGroup'
+import TaskItem from '../../components/task/TaskItem'
+const todoList = ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六']
+const inproList = ['任务七', '任务八', '任务九', '任务十', '任务十一', '任务十二']
+const doneList = ['任务十三', '任务十四', '任务十五', '任务十六', '任务十七', '任务十八']
+export default {
+  name: 'TaskCard',
+  components: {TaskItem, TaskGroup},
+  data () {
+    return {
+      todoList,
+      inproList,
+      doneList
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .task-group{
+    margin: 0 48px;
+  }
+</style>