Add basic cli stuff.

components/DraggableWindow.vue

@@ -68,13 +68,17 @@ const stopDrag = () => {
       height: props.height || '300px',
     }"
     class="fixed rounded-xl shadow-lg overflow-hidden flex flex-col shadow-lg shadow-xl/30"
-    :class="props.black ? 'bg-black text-white' : 'bg-white text-black'"
+    :class="
+      props.black
+        ? 'bg-black text-white border border-white border-t-0'
+        : 'bg-white text-black'
+    "
   >
     <div
       @mousedown="startDrag"
-      class="bg-gray-700 p-2 cursor-move flex justify-between items-center flex-shrink-0"
+      class="bg-gray-700 p-2 cursor-move flex justify-between items-center flex-shrink-0 text-white"
     >
-      <h3 class="font-semibold">{{ title }}</h3>
+      <h3 class="font-semibold text-white">{{ title }}</h3>
       <div class="flex flex-row gap-1">
         <button
           @click="emit('min')"

components/app/windows/about.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import copyrightInfo from "~/components/app/info/copyright.vue";
+// Great, there are now no errors ig
+const emit = defineEmits(["windowopener", "error", "loadValue"]);
+const props = defineProps<{
+  values?: string;
+}>();
 </script>
 <template>
   <div class="justify-center align-center text-center flex flex-col">

components/app/windows/aboutNewsOrg.vue

@@ -6,6 +6,8 @@ import { ScrambleTextPlugin } from "gsap/dist/ScrambleTextPlugin";
 gsap.registerPlugin(ScrambleTextPlugin);
 const loading = ref(true);
 const { t, locale } = useI18n();
+// Great, there are now no errors ig
+const emit = defineEmits(["windowopener", "error", "loadValue"]);
 
 const props = defineProps({
   values: {

components/app/windows/chatbot.vue

@@ -7,6 +7,11 @@ const cookieChatId = cookie.value;
 const chatId = ref();
 const inputMessage = ref();
 const messages = ref([]);
+// Great, there are now no errors ig
+const emit = defineEmits(["windowopener", "error", "loadValue"]);
+const props = defineProps<{
+  values?: string;
+}>();
 onMounted(async () => {
   console.log(cookieChatId);
   if (cookieChatId) {

components/app/windows/error404.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+// Great, there are now no errors ig
+const emit = defineEmits(["windowopener", "error", "loadValue"]);
+const props = defineProps<{
+  values?: string;
+}>();
+</script>
 <template>
   <div class="justify-center align-center text-center flex flex-col">
     <span class="text-7xl m-4 m-1 mb-0 text-center align-center justify-center"

components/app/windows/hotnews.vue

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+// Great, there are now no errors ig
+const emit = defineEmits(["windowopener", "error", "loadValue"]);
+const props = defineProps<{
+  values?: string;
+}>();
 import DraggableWindow from "~/components/DraggableWindow.vue";
 const ffeed = ref();
 const ass = ["健康2.0", "中天", "TVBS", "香港01", "ETtoday"];

components/app/windows/login.vue

@@ -1,4 +1,6 @@
 <script setup lamng="ts">
+// Great, there are now no errors ig
+const emit = defineEmits(["windowopener", "error", "loadValue"]);
 import sha512 from "crypto-js/sha512";
 const userAccount = ref("");
 const userPassword = ref("");

components/app/windows/sources.vue

@@ -2,7 +2,11 @@
 import noImageLogo from "~/public/geterrorassets/noImageLogo.svg";
 const { t, locale } = useI18n();
 
-const emit = defineEmits(["windowopener", "loadValue"]);
+// Great, there are now no errors ig
+const emit = defineEmits(["windowopener", "error", "loadValue"]);
+const props = defineProps<{
+  values?: string;
+}>();
 
 const openNewWindow = (itemId: string) => {
   emit("windowopener", "aboutNewsOrg");

components/app/windows/tty.vue

@@ -1,16 +1,76 @@
 <script setup lang="ts">
 const commandInputBox = ref();
+const inputRef = ref<HTMLInputElement | null>(null);
+const prevCommands = ref([]);
+
+// Great, there are now no errors ig
+const emit = defineEmits(["windowopener", "error", "loadValue"]);
+const props = defineProps<{
+  values?: string;
+}>();
+
+const openNewWindow = (windowId: string) => {
+  emit("windowopener", windowId);
+};
+
+const printAbout = () => {};
+
+const focusInput = () => {
+  inputRef.value?.focus();
+};
+onMounted(() => {
+  focusInput();
+});
+
+const startScript = () => {
+  console.log(commandInputBox.value);
+  const firstWord = commandInputBox.value.replace(/\s+.*$/, "").trim();
+  const app = commands.find((item) => item.command === firstWord);
+  if (app) {
+    app.run(commandInputBox.value);
+  } else {
+    console.error("Cannot find match");
+  }
+  commandInputBox.value = "";
+};
+
+const findExecutable = (inputContent: string) => {
+  console.log(inputContent);
+};
+
+// scripts
+const commands = [
+  {
+    command: "execute",
+    run: findExecutable,
+  },
+  {
+    command: "about",
+    run: printAbout,
+  },
+];
 </script>
+
 <template>
-  <div class="text-white">
-    <div class="flex flex-row">
-      <span class="mx-1">></span
-      ><input
-        v-model="commandInputBox"
-        type="text"
-        class="border-none bg-black outline-0 w-full text-wrap"
-        @keyup.enter="console.log(commandInputBox)"
-      />
+  <div class="w-full h-full">
+    <div class="text-white">
+      <div v-for="i in prevCommands" :key="i.id"></div>
+    </div>
+    <div class="text-white" @click="focusInput">
+      <div class="flex flex-row">
+        <span class="mx-1">></span>
+        <input
+          ref="inputRef"
+          v-model="commandInputBox"
+          id="ttyinputbox"
+          type="text"
+          autocomplete="false"
+          autocorrect="false"
+          autocapitalize="false"
+          class="border-none bg-black outline-none text-wrap select-none"
+          @keyup.enter="startScript()"
+        />
+      </div>
     </div>
   </div>
 </template>