todo list

.github/workflows/main.yml

@@ -3,9 +3,7 @@ name: Node.js CI
 on:
   push:
     branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
+
 jobs:
   build:
 

src/pages/index/App.vue

@@ -1,25 +1,151 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
-  <div>新版本</div>
+  <div class="page">
+    <div class="user-list">
+      <div
+        v-for="user in userList"
+        :key="user.id"
+        :class="{ active: currentUser == user }"
+        class="user-item"
+        @click="currentUser = user"
+      >
+        {{ user.id }}
+      </div>
+    </div>
+    <div class="todo-list">
+      <div v-for="item in todoList" :key="item.id" class="todo-item">
+        <div class="status" @click="changeStatusClick(item)">
+          {{ item.status == "done" ? "✅" : "🕗" }}
+        </div>
+        {{ item.text }}
+      </div>
+    </div>
+    <div class="input">
+      <input v-model="addTxt" type="text" />
+      <div class="ok-btn" @click="okBtnClick">添加</div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from "./components/HelloWorld.vue";
+import { ref, watch } from "vue";
+import { GET, api } from "./common";
+const userList = ref([{ id: "001" }, { id: "002" }, { id: "003" }]);
+const currentUser = ref(userList.value[0]);
+
+type TodoList = {
+  id: string;
+  uid: string;
+  text: string;
+  status: "done" | "doing";
+}[];
+const todoList = ref<TodoList>([]);
+const changeStatusClick = (item: TodoList[0]) => {
+  GET(
+    api.update +
+      "?id=" +
+      item.id +
+      "&status=" +
+      (item.status == "doing" ? "done" : "doing")
+  ).then(() => {
+    updateTodoList();
+  });
+  item.status = item.status == "doing" ? "done" : "doing";
+};
+const updateTodoList = () =>
+  GET(api.list + "?uid=" + currentUser.value.id).then((res) => {
+    todoList.value = res;
+  });
+watch(
+  currentUser,
+  () => {
+    updateTodoList();
+  },
+  { immediate: true }
+);
+
+const addTxt = ref("");
+const okBtnClick = () => {
+  if (addTxt.value != "") {
+    GET(
+      api.add + "?uid=" + currentUser.value.id + "&text=" + addTxt.value
+    ).then(() => {
+      addTxt.value = "";
+      updateTodoList();
+    });
+  }
+};
 </script>
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-  i {
-    background: #eee;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  line-height: 1;
+}
+</style>
+<style lang="scss" scoped>
+@import "./mixin.scss";
+.page {
+  max-width: 500px;
+  width: 100%;
+  margin: 0 auto;
+  padding-top: 100px;
+  @include flexCenter();
+  flex-direction: column;
+  .user-list {
+    @include flexCenter();
+    justify-content: space-around;
+    width: 100%;
+    .user-item {
+      user-select: none;
+      &.active {
+        font-weight: bold;
+      }
+    }
+  }
+  .todo-list {
+    @include flexCenter();
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: 20px;
+    width: 300px;
+    .todo-item {
+      @include flexCenter();
+      justify-content: flex-start;
+      font-size: 30px;
+      height: 50px;
+      width: 100%;
+      border: 1px solid #ccc;
+      padding-left: 20px;
+      & + .todo-item {
+        margin-top: 10px;
+      }
+      .status {
+        margin-right: 5px;
+      }
+    }
+  }
+  .input {
+    width: 300px;
+    height: 50px;
+    border: 1px solid #ccc;
+    margin-top: 10px;
+    @include flexCenter();
+    input {
+      flex: 1;
+      height: 100%;
+      border: none !important;
+      outline: none !important;
+      padding-left: 20px;
+      font-size: 20px;
+    }
+    .ok-btn {
+      height: 100%;
+      width: 100px;
+      @include flexCenter();
+      border-left: 1px solid #ccc;
+    }
   }
 }
 </style>

src/pages/index/api.ts

@@ -0,0 +1,6 @@
+const host = "http://api.1036892522.top";
+export default {
+  list: host + "/list",
+  add: host + "/add",
+  update: host + "/update",
+};

src/pages/index/common.ts

@@ -0,0 +1,15 @@
+import axios from "axios";
+import api from "./api";
+const GET = (url: string) => {
+  return axios
+    .get(url)
+    .then((res) => res.data)
+    .then((res) => {
+      if (res.code != -1) {
+        return res.data;
+      } else {
+        throw new Error(res.msg);
+      }
+    });
+};
+export { api, GET };

src/pages/index/mixin.scss

@@ -0,0 +1,44 @@
+@mixin imgBg($url,$width,$height) {
+  background-image:url($url);
+  background-repeat: no-repeat;
+  background-position: left top;
+  background-size: $width $height;
+  width:$width;
+  height:$height;
+}
+@mixin flexCenter() {
+  display:flex; 
+  justify-content: center;
+  align-items:center;
+}
+@mixin font($size,$color,$weight:normal) {
+  font-size: $size;
+  color: $color;
+  font-weight: $weight;
+}
+@function top($top){
+  @return "calc(var(--top,0) + 0.3rem + "+$top+")";
+}
+@mixin fontBorder($size:0.02rem,$color:#000,$blur:0.0rem) {
+  text-shadow: $size 0 $blur $color,
+  calc(#{$size} * -1) 0 $blur $color,
+  0 calc(#{$size} * -1)  $blur $color,
+  0 $size $blur $color,0 0 $size $color,
+  $size $size $blur $color,0 0 $size $color,
+  calc(#{$size} * -1) calc(#{$size} * -1) $blur $color,0 0 $size $color,
+  calc(#{$size} * -1) $size $blur $color,0 0 $size $color,
+  $size calc(#{$size} * -1) $blur $color,0 0 $size $color,;
+}
+.n::after {
+  content: "数";
+  display: inline-block;
+  width: 0;
+  opacity: 0;
+}
+@mixin textHide($max_width) {
+  max-width: $max_width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+  white-space: nowrap;
+}