frames paging and filter by label

api/api/products/views.py

@@ -1809,6 +1809,7 @@ class FramesView(BaseView):
     def get(self, request):
         start = request.GET.get('start', 0)
         end = request.GET.get('end', 100)
+        filter_label = request.GET.get('label', None)
         ret = oss_list(bucket=settings.FRAMES_BUCKET)
         start = int(start)
         end = int(end)
@@ -1816,11 +1817,13 @@ class FramesView(BaseView):
         for frame in ret[start:end]:
             fo = FrameLabel.objects.filter(oss_path=frame).first()
             if fo:
+                if filter_label and filter_label not in fo.labels.split(','):
+                    continue
                 frames.append({
                     'path': frame,
                     'labels': fo.labels.split(','),
                 })
-            else:
+            elif not filter_label:
                 frames.append({
                     'path': frame,
                     'labels': [],
@@ -1838,7 +1841,6 @@ class FrameView(BaseView):
         path = request.GET.get('path')
         return HttpResponse(oss_get(path, bucket=settings.FRAMES_BUCKET),
                             content_type='image/jpeg')
-            
 class DeleteFrameView(BaseView):
     name = 'delete-frame'
     auth_check = 'admin'

web/src/views/frames.vue

@@ -1,6 +1,13 @@
 <template>
   <div>
     <h2>帧检查</h2>
+    <div>
+      <button class="btn btn-primary" @click="reload">刷新</button>
+      <button class="btn btn-primary" @click="prev_page">上一页</button>
+      <button class="btn btn-primary" @click="next_page">下一页</button>
+      <button v-for="label in labels" :key="label" class="btn btn-info"
+              @click="filter_by_label(label)">Only {{ label }}</button>
+    </div>
     <table class="table">
       <thead>
         <tr>
@@ -14,7 +21,8 @@
           <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" />
+                <img class="frame-preview d-block" :src="'/api/v1/frame/?path='+frame.path" />
+                {{ frame.path }}
               </a>
               <div v-if="hoveredFrame === frame" class="image-popup">
                 <img :src="'/api/v1/frame/?path='+frame.path" />
@@ -23,9 +31,8 @@
           </td>
           <td>{{ show_labels(frame.labels) }}</td>
           <td>
-            <button class="btn btn-danger" @click="label_frame(frame, 'noqr')">无二维码</button>
+            <button v-for="label in labels" :key="label" class="btn btn-info"
-            <button class="btn btn-warning" @click="label_frame(frame, 'blurry')">模糊</button>
+                    @click="label_frame(frame, label)">{{ label }}</button>
-            <button class="btn btn-success" @click="label_frame(frame, 'clear')">清晰</button>
             <button class="btn btn-danger" @click="delete_frame(frame)">删除</button>
           </td>
         </tr>
@@ -39,18 +46,42 @@ export default {
   name: 'FramesView',
   data() {
     return {
+      labels: ['blurry', 'clear', 'noqr'],
+      filter_label: null,
       frames: [],
-      hoveredFrame: null
+      hoveredFrame: null,
+      page_size: 10,
+      page_num: 0,
+      max_page: 0,
     }
   },
   methods: {
+    filter_by_label(label) {
+        this.filter_label = label
+        this.reload()
+    },
+    prev_page() {
+      this.page_num = Math.max(0, this.page_num - 1)
+      this.reload()
+    },
+    next_page() {
+      this.page_num = Math.min(this.max_page - 1, this.page_num + 1)
+      this.reload()
+    },
     show_labels(labels) {
       return labels.join(', ')
     },
     async reload() {
       try {
-        const response = await this.$root.api_get('/api/v1/frames/')
+        var start = this.page_size * this.page_num
+        var end = start + this.page_size
+        var url = `/api/v1/frames/?start=${start}&end=${end}`
+        if (this.filter_label) {
+          url += `&label=${this.filter_label}`
+        }
+        const response = await this.$root.api_get(url)
         this.frames = response.data.frames
+        this.max_page = Math.ceil(response.data.total / this.page_size)
         console.log(this.frames)
       } catch (error) {
         console.error('Failed to load frames:', error)