Merge branch 'main' into app-neil

app/src/components/FileNode.vue

@@ -0,0 +1,29 @@
+<template>
+  <a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</a>
+  <ul :class="nodeClass()" v-if="node.children && node.children.length > 0">
+    <li :class="nodeClass()" v-for="child in node.children" :key="child.path">
+      <FileNode :node="child" :pwd="pwd" />
+    </li>
+  </ul>
+</template>
+
+<script setup>
+const props = defineProps({
+  node: {
+    type: Object,
+    required: true,
+  },
+  pwd: {
+    type: String,
+    required: true,
+    default: '',
+  },
+})
+
+function nodeClass() {
+  const classes = []
+  if (props.node.discovered) classes.push('discovered')
+  if (props.node.path === props.pwd) classes.push('pwd')
+  return classes
+}
+</script>

app/src/components/QuestPart.vue

@@ -1,19 +1,19 @@
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import api from '../utils/api'
+import sessionManager from '../utils/session'
 
 const questData = ref(null)
 const questErr = ref(null)
 
-api
-  .get('/quests/helloworld')
-  .then((res) => {
-    console.log(res.data)
+onMounted(async () => {
+  try {
+    const res = await api.get('/quests/helloworld')
     questData.value = res.data
-  })
-  .catch((err) => {
+  } catch (err) {
     questErr.value = err
-  })
+  }
+})
 </script>
 
 <template>
@@ -26,8 +26,24 @@ api
     </h1>
     <hr class="border-text-tertiary border-2 my-2" />
     <div>
-      <p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
-      <p class="text-text" v-else-if="questData">{{ questData.instruction }}</p>
+      <div v-if="questData">
+        <p class="text-text">{{ questData.instruction }}</p>
+        <br />
+        <p class="text-text">Tasks:</p>
+        <ul v-if="sessionManager.session.value">
+          <li v-for="task in sessionManager.session.value.tasks" :key="task.id">
+            <p class="text-text">
+              <input
+                type="checkbox"
+                class="form-checkbox"
+                disabled
+                :checked="task.completed"
+              />{{ task.name }}
+            </p>
+          </li>
+        </ul>
+      </div>
+      <p class="text-red-500" v-else-if="questErr">{{ questErr.message }}</p>
       <p class="text-text" v-else>Loading...</p>
     </div>
   </div>

app/src/components/TreeChart.vue

@@ -1,56 +1,16 @@
-<script setup></script>
+<script setup>
+import FileNode from './FileNode.vue'
+import sessionManager from '../utils/session.js'
+</script>
 
 <template>
   <div class="tree w-max h-max">
     <ul>
       <li>
-        <a href="#">Parent</a>
-        <ul>
-          <li>
-            <a href="#">Child</a>
-            <ul>
-              <li>
-                <a href="#">Grand Child</a>
-              </li>
-            </ul>
-          </li>
-          <li>
-            <a href="#">Child</a>
-            <ul>
-              <li><a href="#">Grand Child</a></li>
-              <li>
-                <a href="#">Grand Child</a>
-                <ul>
-                  <li>
-                    <a href="#">Great Grand Child</a>
-                  </li>
-                  <li>
-                    <a href="#">Great Grand Child</a>
-                  </li>
-                  <li>
-                    <a href="#">Great Grand Child</a>
-                    <ul>
-                      <li><a>Grand Child</a></li>
-                      <li>
-                        <a>Grand Child</a>
-                        <ul>
-                          <li>
-                            <a>Great Grand Child</a>
-                          </li>
-                          <li>
-                            <a>Great Grand Child</a>
-                          </li>
-                        </ul>
-                      </li>
-                      <li><a>Grand Child</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </li>
-              <li><a href="#">Grand Child</a></li>
-            </ul>
-          </li>
-        </ul>
+        <FileNode
+          :node="sessionManager.graph.value"
+          :pwd="sessionManager.pwd.value"
+        />
       </li>
     </ul>
   </div>
@@ -149,17 +109,18 @@
   -moz-transition: all 0.5s;
 }
 
-.tree li a:hover,
-.tree li a:hover + ul li a {
+a.discovered {
   background: #c8e4f8;
   color: #000;
   border: 1px solid #94a0b4;
 }
 
-.tree li a:hover + ul li::after,
-.tree li a:hover + ul li::before,
-.tree li a:hover + ul::before,
-.tree li a:hover + ul ul::before {
+ul.discovered,
+li.discovered {
   border-color: #94a0b4;
 }
+
+a.pwd {
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 水平偏移、垂直偏移、模糊半徑、顏色 */
+}
 </style>