From 9fc3967744f165c5dd71d8298133c2ef68af6448 Mon Sep 17 00:00:00 2001
From: Fam Zheng <fam@euphon.net>
Date: Sat, 15 Feb 2025 11:50:34 +0000
Subject: [PATCH] web: Add /frames view

---
 web/src/router/index.js  |   6 ++
 web/src/views/frames.vue | 123 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 web/src/views/frames.vue

diff --git a/web/src/router/index.js b/web/src/router/index.js
index 54b0af6..6edb0c1 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -254,6 +254,12 @@ const routes = [
         component: () =>
           import(/* webpackChunkName: "estor-search" */ '@/views/estor-search.vue'),
       },
+      {
+        path: '/frames',
+        name: 'Frames',
+        component: () =>
+          import(/* webpackChunkName: "frames" */ '@/views/frames.vue'),
+      },
     ],
   },
   {
diff --git a/web/src/views/frames.vue b/web/src/views/frames.vue
new file mode 100644
index 0000000..651e836
--- /dev/null
+++ b/web/src/views/frames.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <h2>帧检查</h2>
+    <table class="table">
+      <thead>
+        <tr>
+          <th>图片</th>
+          <th>标签</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="frame in frames" :key="frame.id">
+          <td>
+            <div class="image-container" @mouseover="showPopup(frame)" @mouseleave="hidePopup">
+              <a :href="'/api/v1/frame/?path='+frame.path" target="_blank">
+                <img class="frame-preview" :src="'/api/v1/frame/?path='+frame.path" />
+              </a>
+              <div v-if="hoveredFrame === frame" class="image-popup">
+                <img :src="'/api/v1/frame/?path='+frame.path" />
+              </div>
+            </div>
+          </td>
+          <td>{{ show_labels(frame.labels) }}</td>
+          <td>
+            <button class="btn btn-danger" @click="label_frame(frame, 'noqr')">无二维码</button>
+            <button class="btn btn-warning" @click="label_frame(frame, 'blurry')">模糊</button>
+            <button class="btn btn-success" @click="label_frame(frame, 'clear')">清晰</button>
+            <button class="btn btn-danger" @click="delete_frame(frame)">删除</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FramesView',
+  data() {
+    return {
+      frames: [],
+      hoveredFrame: null
+    }
+  },
+  methods: {
+    show_labels(labels) {
+      return labels.join(', ')
+    },
+    async reload() {
+      try {
+        const response = await this.$root.api_get('/api/v1/frames/')
+        this.frames = response.data.frames
+        console.log(this.frames)
+      } catch (error) {
+        console.error('Failed to load frames:', error)
+      }
+    },
+    async delete_frame(frame) {
+        await this.$root.api_post('/api/v1/delete-frame/', {
+            path: frame.path
+        })
+        await this.reload()
+    },
+    async label_frame(frame, label) {
+      try {
+        var r = await this.$root.api_post('/api/v1/label-frame/', {
+            path: frame.path,
+            label: label
+        })
+        console.log(r)
+        await this.reload()
+      } catch (error) {
+        console.error('Failed to label frame:', error)
+      }
+    },
+    showPopup(frame) {
+      this.hoveredFrame = frame;
+    },
+    hidePopup() {
+      this.hoveredFrame = null;
+    }
+  },
+  mounted() {
+    this.reload()
+  }
+}
+</script>
+
+<style scoped>
+.table {
+  width: 100%;
+  margin-top: 20px;
+}
+.btn {
+  margin-right: 5px;
+}
+.frame-preview {
+  max-width: 200px;
+  max-height: 200px;
+}
+.image-container {
+  position: relative;
+  display: inline-block;
+}
+
+.image-popup {
+  position: fixed;
+  z-index: 1000;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 0, 0, 0.8);
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.image-popup img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+}
+</style>