多开器UI

ArkMowers · Jan 5, 2024 · c24b573 · c24b573
1 parent 612a509
commit c24b573
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 1 deletion.
diff --git a/ui/index.html b/ui/index.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Mower WebUI in Browser</title>
   </head>
-
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>

diff --git a/ui/manager/MowerManager.vue b/ui/manager/MowerManager.vue
@@ -0,0 +1,117 @@
+<script setup>
+import PlayIcon from '@vicons/ionicons5/Play'
+import PlusIcon from '@vicons/ionicons5/Add'
+import TrashOutline from '@vicons/ionicons5/TrashOutline'
+import PencilIcon from '@vicons/ionicons5/Pencil'
+import DotIcon from '@vicons/ionicons5/EllipsisHorizontal'
+import CheckIcon from '@vicons/ionicons5/CheckmarkSharp'
+import CrossIcon from '@vicons/ionicons5/CloseSharp'
+</script>
+
+<template>
+  <div class="mower-list">
+    <n-card size="small">
+      <template #header>
+        <div class="header">
+          <div>实例名称</div>
+          <n-button size="tiny">
+            <template #icon>
+              <n-icon>
+                <pencil-icon />
+              </n-icon>
+            </template>
+          </n-button>
+          <n-button type="error" ghost size="tiny">
+            <template #icon>
+              <n-icon>
+                <trash-outline />
+              </n-icon>
+            </template>
+          </n-button>
+          <div class="expand"></div>
+          <n-button type="primary" size="small">
+            <template #icon>
+              <n-icon>
+                <play-icon />
+              </n-icon>
+            </template>
+          </n-button>
+        </div>
+      </template>
+      <div class="folder">
+        <code class="folder-content">/home/zhao/Documents/mower-profile</code>
+        <n-button size="tiny">
+          <template #icon>
+            <n-icon>
+              <dot-icon />
+            </n-icon>
+          </template>
+        </n-button>
+      </div>
+    </n-card>
+    <n-card size="small">
+      <template #header>
+        <div class="header">
+          <n-input placeholder="实例名称" />
+          <n-button type="primary" size="tiny" circle>
+            <template #icon>
+              <n-icon>
+                <check-icon />
+              </n-icon>
+            </template>
+          </n-button>
+          <n-button type="error" size="tiny" circle>
+            <template #icon>
+              <n-icon>
+                <cross-icon />
+              </n-icon>
+            </template>
+          </n-button>
+        </div>
+      </template>
+      <div class="folder">
+        <code class="folder-content">/home/zhao/Documents/mower-profile</code>
+      </div>
+    </n-card>
+    <n-button size="large" dashed>
+      <template #icon>
+        <n-icon>
+          <plus-icon />
+        </n-icon>
+      </template>
+      添加实例
+    </n-button>
+  </div>
+</template>
+
+<style scoped>
+.mower-list {
+  box-sizing: border-box;
+  width: 100vw;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.header {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.expand {
+  flex-grow: 1;
+}
+
+.folder {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.folder-content {
+  word-break: break-all;
+  flex-grow: 1;
+}
+</style>
diff --git a/ui/manager/index.html b/ui/manager/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mower Manager</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/manager/main.js"></script>
+  </body>
+</html>
diff --git a/ui/manager/main.js b/ui/manager/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import MowerManager from './MowerManager.vue'
+
+const app = createApp(MowerManager)
+app.mount('#app')
diff --git a/ui/vite.config.js b/ui/vite.config.js
@@ -30,5 +30,13 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: 'index.html',
+        nested: 'manager/index.html'
+      }
+    }
   }
 })