迁移到新仓库

src/components/VarUnit.vue

+<script setup>
+import { computed, inject, ref, watch } from 'vue';
+
+
+const props = defineProps(['var_name', 'var_content', 'changed'])
+const var_name = computed(() => {
+  return props.var_name
+})
+const var_content = computed(() => {
+  return props.var_content
+})
+const changed = computed(() => {
+  return props.changed
+})
+const is_changed = computed(() => {
+  return changed.value == 'changed'
+})
+const is_new = computed(() => {
+  return changed.value == 'new'
+})
+const display_name = computed(() => {
+  if (is_element.value) {
+    return var_name.value.substring(1)
+  }
+  const spaceIndex = var_name.value.indexOf(' '); // 认为仅有'var (static xxx)'的额外情况
+  if (spaceIndex == -1) {
+    if (is_array.value) {
+      return '@' + var_name.value
+    }
+    if (is_struct.value) {
+      return '#' + var_name.value + '(' + var_content.value[2] + ')'
+    }
+    return var_name.value
+  } else {
+    return '$' + var_name.value.substring(0, spaceIndex)
+  }
+})
+const is_data = computed(() => {
+  return var_content.value[0] == 'C_DATA'
+})
+const is_array = computed(() => {
+  return var_content.value[0] == 'C_ARRAY'
+})
+const is_struct = computed(() => {
+  return var_content.value[0] == 'C_STRUCT'
+})
+const is_element = computed(() => {
+  return var_name.value.charAt(0) == '^'
+})
+const address = computed(() => {
+  return var_content.value[1]
+})
+const display_content = computed(() => {
+  if (is_data.value) {
+    let v = var_content.value[3]
+    return v != '<UNINITIALIZED>' ? v : '?'
+  }
+  return 'todo'
+})
+const array_elements = computed(() => {
+  if (is_array.value) {
+    let array = var_content.value
+    array.slice(2)
+    return array
+  }
+})
+const struct_elements = computed(() => {
+  if (is_struct.value) {
+    let struct = var_content.value
+    struct.slice(3)
+    return struct
+  }
+})
+const is_pointer = computed(() => {
+  if (is_data.value) {
+    if (var_content.value[2] == 'pointer') {
+      return true
+    }
+  }
+  return false
+})
+const { check_changed } = inject('check_changed')
+
+const { highlight_addresses, highlight_address, unhighlight_address } = inject('highlight_address')
+
+const pointer_color = ref(-1)
+const css_pointer_color = computed(() => {
+  if (pointer_color.value < 0) {
+    return 'none'
+  } else {
+    let c = pointer_color.value % 4
+    if (c == 0) {
+      return 'underline #ff0000 0.1rem'
+    }
+    if (c == 1) {
+      return 'underline #ffcc00 0.1rem'
+    }
+    if (c == 2) {
+      return 'underline #0066ff 0.1rem'
+    }
+    if (c == 3) {
+      return 'underline #00cc00 0.1rem'
+    }
+  }
+})
+
+const css_var_color = computed(() => {
+  if (address.value in highlight_addresses.value) {
+    let c = highlight_addresses.value[address.value]
+    c = c % 4
+    if (c == 0) {
+      return 'underline #ff0000 0.1rem'
+    }
+    if (c == 1) {
+      return 'underline #ffcc00 0.1rem'
+    }
+    if (c == 2) {
+      return 'underline #0066ff 0.1rem'
+    }
+    if (c == 3) {
+      return 'underline #00cc00 0.1rem'
+    }
+  }
+  return 'none'
+})
+
+function highlight_pointer() {
+  if (is_data.value) {
+    if (var_content.value[2] == 'pointer') {
+      let pa = var_content.value[3]
+      if (pa in highlight_addresses.value) {
+        highlight_addresses.value[pa] += 1
+        pointer_color.value = highlight_addresses.value[pa]
+      } else {
+        highlight_addresses.value[pa] = 0
+        pointer_color.value = 0
+      }
+    }
+  }
+}
+
+const { current_step } = inject('step')
+
+watch(current_step, () => {
+  pointer_color.value = -1
+})
+
+</script>
+
+<template>
+  <!-- <br> -->
+  <div v-if="is_data" class="big-box" :class="{ 'element-box': is_element }">
+    <div class="small-box var-name">{{ display_name }}<span v-if="!is_element"> = </span><span v-else>: </span><span
+        :class="{ changed: is_changed, new: is_new, pointer: is_pointer }" @click="highlight_pointer">{{ display_content
+        }}</span></div>
+  </div>
+  <div v-if="is_array" class="big-box">
+    <div class="array-box">
+      <div class="array-box-header">{{ display_name }}</div>
+      <VarUnit v-for="(item, index) in array_elements" :var_name="'^' + (index - 2)" :var_content="item"
+        :changed="check_changed(item)" />
+    </div>
+  </div>
+  <div v-if="is_struct" class="big-box">
+    <div class="struct-box">
+      <div class="struct-box-header">{{ display_name }}</div>
+      <VarUnit v-for="item in struct_elements" :var_name="item[0]" :var_content="item[1]"
+        :changed="check_changed(item[1])" />
+    </div>
+  </div>
+</template>
+
+<style>
+.big-box {
+  /* margin: 0rem; */
+  /* border-radius: 0.3rem; */
+  /* background-color: green; */
+  padding: 0.2rem;
+  /* width: auto; */
+  /* display: inline-block; */
+}
+
+.small-box {
+  border-radius: 0.2rem;
+  background-color: #EEF4FA;
+  padding: 0.2rem;
+  /* width: auto; */
+  /* display: inline-block; */
+}
+
+.head-box {
+  background-color: white;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
+}
+
+.array-box,
+.struct-box {
+  border-radius: 0.2rem;
+  border: 0.1rem solid #C0E8FF;
+  padding: 0.2rem;
+}
+
+.struct-box-header,
+.array-box-header {
+  padding-left: 0.2rem;
+}
+
+.element-box {
+  display: inline-block;
+}
+</style>
+
+<style scoped>
+.changed {
+  color: #00AEFF;
+}
+
+.new {
+  color: #85d8ff;
+}
+
+.pointer {
+  background-color: #00000000;
+  border-radius: 0.3rem;
+  transition-duration: 200ms;
+  text-decoration: v-bind(css_pointer_color);
+}
+
+.pointer:hover {
+  background-color: #00000020;
+  transition-duration: 200ms;
+}
+
+.var-name {
+  text-decoration: v-bind(css_var_color);
+}
+</style>
\ No newline at end of file

src/components/buttons/EditButton.vue

+<script setup>
+import { inject } from 'vue';
+
+const edit_mode = inject('edit_mode')
+const { try_failed } = inject('data')
+function click() {
+  edit_mode.value = true
+  try_failed.value = false
+}
+
+</script>
+
+<template>
+  <button class="button" @click="click">编辑代码</button>
+</template>
+
+<style scoped>
+@import '@/assets/button.css';
+</style>
\ No newline at end of file

src/components/buttons/Loading.vue

+<template>
+  <svg class="rotate" t="1712589928998" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="4943" width="1rem" height="1rem">
+    <path
+      d="M512 61.44a40.96 40.96 0 0 1 40.96 40.96v122.88a40.96 40.96 0 1 1-81.92 0V102.4a40.96 40.96 0 0 1 40.96-40.96z"
+      fill="#000000" p-id="4944"></path>
+    <path
+      d="M737.28 121.79456a40.96 40.96 0 0 1 14.99136 55.95136l-61.44 106.43456a40.96 40.96 0 1 1-70.94272-40.96l61.44-106.43456A40.96 40.96 0 0 1 737.28 121.79456z"
+      fill="#191919" p-id="4945"></path>
+    <path
+      d="M902.20544 286.72a40.96 40.96 0 0 1-14.99136 55.95136l-106.43456 61.44a40.96 40.96 0 0 1-40.96-70.94272l106.43456-61.44a40.96 40.96 0 0 1 55.95136 14.99136z"
+      fill="#333333" p-id="4946"></path>
+    <path
+      d="M962.56 512a40.96 40.96 0 0 1-40.96 40.96h-122.88a40.96 40.96 0 1 1 0-81.92h122.88a40.96 40.96 0 0 1 40.96 40.96z"
+      fill="#4C4C4C" p-id="4947"></path>
+    <path
+      d="M902.20544 737.28a40.96 40.96 0 0 1-55.95136 14.99136l-106.43456-61.44a40.96 40.96 0 1 1 40.96-70.94272l106.43456 61.44A40.96 40.96 0 0 1 902.20544 737.28z"
+      fill="#666666" p-id="4948"></path>
+    <path
+      d="M737.28 902.20544a40.96 40.96 0 0 1-55.95136-14.99136l-61.44-106.43456a40.96 40.96 0 0 1 70.94272-40.96l61.44 106.43456A40.96 40.96 0 0 1 737.28 902.20544z"
+      fill="#7F7F7F" p-id="4949"></path>
+    <path
+      d="M512 962.56a40.96 40.96 0 0 1-40.96-40.96v-122.88a40.96 40.96 0 1 1 81.92 0v122.88a40.96 40.96 0 0 1-40.96 40.96z"
+      fill="#999999" p-id="4950"></path>
+    <path
+      d="M286.72 902.20544a40.96 40.96 0 0 1-14.99136-55.95136l61.44-106.43456a40.96 40.96 0 1 1 70.94272 40.96l-61.44 106.43456a40.96 40.96 0 0 1-55.95136 14.99136z"
+      fill="#ACACAC" p-id="4951"></path>
+    <path
+      d="M121.79456 737.28a40.96 40.96 0 0 1 14.99136-55.95136l106.43456-61.44a40.96 40.96 0 0 1 40.96 70.94272l-106.43456 61.44A40.96 40.96 0 0 1 121.79456 737.28z"
+      fill="#BFBFBF" p-id="4952"></path>
+    <path
+      d="M61.44 512a40.96 40.96 0 0 1 40.96-40.96h122.88a40.96 40.96 0 1 1 0 81.92H102.4a40.96 40.96 0 0 1-40.96-40.96z"
+      fill="#CCCCCC" p-id="4953"></path>
+    <path
+      d="M121.79456 286.72a40.96 40.96 0 0 1 55.95136-14.99136l106.43456 61.44a40.96 40.96 0 1 1-40.96 70.94272l-106.43456-61.44A40.96 40.96 0 0 1 121.79456 286.72z"
+      fill="#E5E5E5" p-id="4954"></path>
+    <path
+      d="M286.72 121.79456a40.96 40.96 0 0 1 55.95136 14.99136l61.44 106.43456a40.96 40.96 0 0 1-70.94272 40.96l-61.44-106.43456A40.96 40.96 0 0 1 286.72 121.79456z"
+      fill="#F2F2F2" p-id="4955"></path>
+  </svg>
+</template>
+
+<style scoped>
+.rotate {
+  animation: rotate-forever 2s linear infinite;
+  transform-origin: center;
+}
+
+@keyframes rotate-forever {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+</style>
\ No newline at end of file

src/components/buttons/NextButton.vue

+<script setup>
+import { inject } from 'vue';
+
+const { current_step, total_steps } = inject('step')
+
+function click() {
+  if (current_step.value < total_steps.value) {
+    current_step.value += 1
+  }
+}
+
+</script>
+
+<template>
+  <button class="button" @click="click">下一步</button>
+</template>
+
+<style scoped>
+@import '@/assets/button.css';
+</style>
\ No newline at end of file

src/components/buttons/PrevButton.vue

+<script setup>
+
+import { inject } from 'vue';
+
+const { current_step } = inject('step')
+
+function click() {
+  if (current_step.value > 1) {
+    current_step.value -= 1
+  }
+}
+
+</script>
+
+<template>
+  <button class="button" @click="click">上一步</button>
+</template>
+
+<style scoped>
+@import '@/assets/button.css';
+</style>
\ No newline at end of file

src/components/buttons/RunButton.vue

+<script setup>
+import { computed, inject } from 'vue';
+import Loading from './Loading.vue'
+
+const edit_mode = inject('edit_mode')
+
+const loading = inject('loading')
+
+const { send_request, code_input } = inject('input')
+const { try_failed } = inject('data')
+
+const code_not_null = computed(() => {
+  return code_input.value.length > 0
+})
+
+function click() {
+  loading.value = true
+  try_failed.value = false
+  send_request()
+}
+
+</script>
+
+<template>
+  <button class="button" @click="click" :disabled="!code_not_null">运行代码<span v-show="loading">&nbsp</span>
+    <Loading v-show="loading" />
+  </button>
+</template>
+
+<style scoped>
+@import '@/assets/button.css';
+
+.button {
+  display: flex;
+  align-items: center;
+  /* 垂直居中 */
+}
+</style>
\ No newline at end of file

src/main.js

+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+
+export const base_url = 'http://10a522a.vip.cpolar.top' /* 修改此项为后端地址 */
\ No newline at end of file

vite.config.js

+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})