mirror of
https://github.com/linux-odyssey/linux-odyssey.git
synced 2026-11-06 03:20:13 +08:00
Reorganize front-end code
This commit is contained in:
Chen, Tai-Lin authored and 
wancat committed
1 parent
06220e6b30
commit
a40e9eb3a9
7 files changed
+118
-92
No files matched your search
+18
-92
@@ -1,112 +1,38 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const data = ref(null)
|
||||
const error = ref(null)
|
||||
|
||||
fetch('https://odyssey.wancat.cc/api/v1/quests/helloworld')
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
data.value = JSON.stringify(json.content)
|
||||
})
|
||||
.catch((err) => {
|
||||
error.value = err
|
||||
})
|
||||
// Import components
|
||||
import commandlist_part from './components/commandlist-part.vue'
|
||||
import header_part from './components/header-part.vue'
|
||||
import hint_part from './components/hint-part.vue'
|
||||
import quest_part from './components/quest-part.vue'
|
||||
import terminal_part from './components/terminal-part.vue'
|
||||
import visualization_part from './components/visualization-part.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-background-primary h-screen">
|
||||
<!--header-->
|
||||
<div id="header" class="bg-background-secondary content-center h-[5%] p-1">
|
||||
<div class="inline-block">
|
||||
<button id="stream">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'bars-staggered']"
|
||||
class="text-text-primary"
|
||||
/>
|
||||
</button>
|
||||
<button id="backward">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'arrow-left']"
|
||||
class="text-border"
|
||||
/>
|
||||
</button>
|
||||
<button>
|
||||
<p class="text-text-primary inline font-bold">1. Command's Basics</p>
|
||||
</button>
|
||||
<p class="text-text-primary inline font-bold">‧</p>
|
||||
<button>
|
||||
<p class="text-text-primary inline font-bold">
|
||||
1. Try Your First Command
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
<div class="float-right inline-block">
|
||||
<button id="warning">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'triangle-exclamation']"
|
||||
class="text-text-primary"
|
||||
/>
|
||||
</button>
|
||||
<button id="setting">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'gear']"
|
||||
class="text-text-primary"
|
||||
/>
|
||||
</button>
|
||||
<button id="fullscreen">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'expand']"
|
||||
class="text-text-primary"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div id="header" class="bg-background-secondary content-center h-[6%] p-1">
|
||||
<header_part />
|
||||
</div>
|
||||
<!--main-->
|
||||
<div id="main" class="h-[95%] grid grid-cols-3 gap-3 p-3">
|
||||
<div id="main" class="h-[94%] grid grid-cols-3 gap-3 p-3">
|
||||
<!--Topic and Command List-->
|
||||
<div class="bg-background-secondary inline-block h-full rounded-lg">
|
||||
<section class="h-2/3 m-3">
|
||||
<h1 id="topic" class="text-text">Try Your First Command</h1>
|
||||
<hr class="border-text-line border-2 my-2" />
|
||||
<div>
|
||||
<p class="text-red-500" v-if="error">{{ error.message }}</p>
|
||||
<p class="text-text" v-else-if="data">{{ data }}</p>
|
||||
<p class="text-text" v-else>Loading...</p>
|
||||
</div>
|
||||
<section id="quest" class="h-2/3 m-3">
|
||||
<quest_part />
|
||||
</section>
|
||||
<hr class="border-text-line border" />
|
||||
<section class="h-1/3">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'list']"
|
||||
class="text-text-primary"
|
||||
/>
|
||||
<h1 class="inline text-text-primary font-xl">Command Cheatsheets</h1>
|
||||
<div id="cheatsheets">
|
||||
<p class="text-text-secondary">No Available Command</p>
|
||||
</div>
|
||||
<section id="cmdlist" class="h-1/3">
|
||||
<commandlist_part />
|
||||
</section>
|
||||
</div>
|
||||
<!--Terminal and Hint-->
|
||||
<div class="bg-background inline-block h-full py-2 rounded-lg">
|
||||
<section id="terminal" class="h-3/5">
|
||||
<font-awesome-icon :icon="['fas', 'terminal']" class="text-text" />
|
||||
<button class="text-text h-[5%]">Terminal</button>
|
||||
<div class="bg-background-secondary h-[calc(100%-5%)] p-4">
|
||||
<p class="text-text-primary">
|
||||
zeko@first-command<span class="text-text">:~$</span>
|
||||
</p>
|
||||
</div>
|
||||
<terminal_part />
|
||||
</section>
|
||||
<section class="h-2/5">
|
||||
<font-awesome-icon
|
||||
:icon="['far', 'lightbulb']"
|
||||
class="text-yellow-200"
|
||||
/>
|
||||
<h1 class="inline text-text font-xl">Hint</h1>
|
||||
<div id="hint">
|
||||
<p class="text-text">Type command in the terminal above.</p>
|
||||
</div>
|
||||
<section id="hint" class="h-2/5">
|
||||
<hint_part />
|
||||
</section>
|
||||
</div>
|
||||
<!--Visualization-->
|
||||
@@ -114,7 +40,7 @@ fetch('https://odyssey.wancat.cc/api/v1/quests/helloworld')
|
||||
<div class="bg-border rounded-xl h-[90%] px-3 py-6">
|
||||
<div class="bg-background rounded-xl h-full px-1 py-6">
|
||||
<section id="visualization" class="bg-background-primary h-full">
|
||||
<p class="text-text">visualization</p>
|
||||
<visualization_part />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<font-awesome-icon :icon="['fas', 'list']" class="text-text-primary p-1" />
|
||||
<h1 class="inline text-text-primary font-xl">Command Cheatsheets</h1>
|
||||
<div id="cheatsheets">
|
||||
<p class="text-text-secondary">--Command List--</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div class="inline-block">
|
||||
<button id="stream" class="p-1">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'bars-staggered']"
|
||||
class="text-text-primary"
|
||||
/>
|
||||
</button>
|
||||
<button id="backward" class="p-1">
|
||||
<font-awesome-icon :icon="['fas', 'arrow-left']" class="text-border" />
|
||||
</button>
|
||||
<button>
|
||||
<p class="text-text-primary inline font-bold p-1">1. Command's Basics</p>
|
||||
</button>
|
||||
<p class="text-text-primary inline font-bold p-1">‧</p>
|
||||
<button>
|
||||
<p class="text-text-primary inline font-bold p-1">
|
||||
1. Try Your First Command
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
<div class="float-right inline-block">
|
||||
<button id="warning" class="p-1">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'triangle-exclamation']"
|
||||
class="text-text-primary"
|
||||
/>
|
||||
</button>
|
||||
<button id="setting" class="p-1">
|
||||
<font-awesome-icon :icon="['fas', 'gear']" class="text-text-primary" />
|
||||
</button>
|
||||
<button id="fullscreen" class="p-1">
|
||||
<font-awesome-icon :icon="['fas', 'expand']" class="text-text-primary" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,9 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<font-awesome-icon :icon="['far', 'lightbulb']" class="text-yellow-200 p-1" />
|
||||
<h1 class="inline text-text font-xl">Hint</h1>
|
||||
<div id="hint">
|
||||
<p class="text-text">--Hint--</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const questData = ref(null)
|
||||
const questErr = ref(null)
|
||||
|
||||
fetch('https://odyssey.wancat.cc/api/v1/quests/helloworld')
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
questData.value = JSON.stringify(json.content)
|
||||
})
|
||||
.catch((err) => {
|
||||
questErr.value = err
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1 id="topic" class="text-text">Try Your First Command</h1>
|
||||
<hr class="border-text-line border-2 my-2" />
|
||||
<div>
|
||||
<p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
|
||||
<p class="text-text" v-else-if="questData">--Quest Information--</p>
|
||||
<!--
|
||||
<p class="text-text" v-else-if="quest" v-html="questData"></p>
|
||||
-->
|
||||
<p class="text-text" v-else>Loading...</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
|
||||
<button class="text-text h-[5%]">Terminal</button>
|
||||
<div class="bg-background-secondary h-[calc(100%-5%)] p-4">
|
||||
<p class="text-text-primary">
|
||||
zeko@first-command<span class="text-text">:~$</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<p class="text-text">--Visualization--</p>
|
||||
</template>
|
||||
Reference in new issue
Block a user