Feat-optimise-ui (#85)

Feat-optimise-ui

app/src/components/QuestMap.vue

@@ -74,7 +74,7 @@ const genOption = (nodes, edges) => ({
       symbolSize: [fullwidth / 13, fullwidth / 30],
       roam: 'move',
       zoom: 1.5,
-      center: ['150%', '50%'],
+      center: ['120%', '30%'],
       label: {
         show: true,
         fontSize: fullwidth / 90,

app/src/components/TreeChart.vue

@@ -121,6 +121,6 @@ li.discovered {
 }
 
 a.pwd {
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  box-shadow: 0 0 40px rgba(255, 255, 0, 20);
 }
 </style>

app/src/utils/terminal.js

@@ -13,12 +13,11 @@ class SocketTerminal {
       disableStdin: false, // 是否应禁用输入
       // cursorStyle: "underline", //光标样式
       cursorBlink: true, // 光标闪烁
-      theme: {
-        foreground: '#ECECEC', // 字体
-        background: '#000000', // 背景色
-        cursor: 'help', // 设置光标
-        lineHeight: 20,
-      },
+      foreground: '#ECECEC', // 字体
+      background: '#000000', // 背景色
+      cursor: 'help', // 设置光标
+      fontSize: 18,
+      fontWeight: 'normal',
     })
     this.fitAddon = new FitAddon()
     this.term.loadAddon(this.fitAddon)

packages/container/cli.js

@@ -48,10 +48,10 @@ async function handleCommand(command) {
 
 async function handleResponse({ responses, hints, end }) {
   if (responses) {
-    await printResponses(responses, 60)
+    await printResponses(responses, 90)
   }
   if (hints) {
-    await printHints(hints, 60)
+    await printHints(hints, 90)
   }
   if (end) {
     console.log(colorize('Quest completed!', 'blue'))

packages/container/print.js

@@ -6,6 +6,7 @@ const RETURN_SYMBOL = '\u21B5'
 
 // ANSI color map
 const ANSI_COLORS = {
+  default: 0,
   black: 30,
   red: 31,
   green: 32,
@@ -16,10 +17,13 @@ const ANSI_COLORS = {
   white: 37,
 }
 
+function colorCode(color) {
+  return `\x1b[${ANSI_COLORS[color]}m`
+}
+
 function colorize(content, color) {
-  const colorCode = ANSI_COLORS[color]
-  if (!colorCode) return content
-  return `\x1b[${colorCode}m${content}\x1b[0m`
+  if (!color) return content
+  return `${colorCode(color)}${content}${colorCode('default')}`
 }
 
 process.stdin.setRawMode(true)
@@ -36,8 +40,25 @@ function waitForEnter() {
   })
 }
 
+function formatLine(content, color) {
+  let result = colorCode(color)
+  let codeBlock = false
+  for (const c of content) {
+    switch (c) {
+      case '`':
+        result += colorCode(codeBlock ? color : 'green')
+        codeBlock = !codeBlock
+        break
+
+      default:
+        result += c
+    }
+  }
+  return result + colorCode('default') + RETURN_SYMBOL
+}
+
 function printLine(content, delay, color) {
-  const printContent = `${colorize(content, color)}${RETURN_SYMBOL}`
+  const printContent = formatLine(content, color)
   return new Promise((resolve) => {
     let i = 0
     const timer = setInterval(() => {

server/src/containers/docker.js

@@ -25,8 +25,8 @@ export function createContainer(name, questId) {
     Image: getQuestImage(questId),
   }
   const { hostPwd, mountQuest } = config.docker
-  if (!config.isProduction && hostPwd && mountQuest) {
-    logger.debug('Mounting quest folder', mountQuest)
+  if (!config.isProduction && hostPwd && mountQuest === questId) {
+    logger.info('Mounting quest folder', mountQuest)
     option.HostConfig.Binds = [
       `${hostPwd}/quests/${mountQuest}/home:/home/commander`,
       `${hostPwd}/packages/container:/usr/local/lib/container`,