add: AdminView and remote update view
This commit is contained in:
		@@ -5,6 +5,7 @@ import TestView from "../views/TestView.vue";
 | 
			
		||||
import JtagTest from "../views/JtagTest.vue";
 | 
			
		||||
import ProjectView from "../views/ProjectView.vue";
 | 
			
		||||
import HomeView from "@/views/HomeView.vue";
 | 
			
		||||
import AdminView from "@/views/AdminView.vue";
 | 
			
		||||
 | 
			
		||||
const routes = [
 | 
			
		||||
  { path: "/", name: "Home", component: HomeView },
 | 
			
		||||
@@ -13,6 +14,7 @@ const routes = [
 | 
			
		||||
  { path: "/test", name: "Test", component: TestView },
 | 
			
		||||
  { path: "/test/jtag", name: "JtagTest", component: JtagTest },
 | 
			
		||||
  { path: "/project", name: "Project", component: ProjectView },
 | 
			
		||||
  { path: "/admin", name: "Admin", component: AdminView },
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
const router = createRouter({
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										130
									
								
								src/views/AdminView.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										130
									
								
								src/views/AdminView.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,130 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="bg-base-200 min-h-screen p-6">
 | 
			
		||||
    <h1 class="text-3xl font-bold mb-6">FPGA 设备管理</h1>
 | 
			
		||||
    
 | 
			
		||||
    <div class="card bg-base-100 shadow-xl">
 | 
			
		||||
      <div class="card-body">
 | 
			
		||||
        <h2 class="card-title mb-4">IP 地址列表</h2>
 | 
			
		||||
        
 | 
			
		||||
        <div class="overflow-x-auto">
 | 
			
		||||
          <table class="table w-full">
 | 
			
		||||
            <!-- 表头 -->
 | 
			
		||||
            <thead>
 | 
			
		||||
              <tr class="bg-base-300">
 | 
			
		||||
                <th>IP 地址</th>
 | 
			
		||||
                <th>版本号</th>
 | 
			
		||||
                <th>默认启动位流</th>
 | 
			
		||||
                <th>黄金位流</th>
 | 
			
		||||
                <th>应用位流1</th>
 | 
			
		||||
                <th>应用位流2</th>
 | 
			
		||||
                <th>应用位流3</th>
 | 
			
		||||
                <th>操作</th>
 | 
			
		||||
              </tr>
 | 
			
		||||
            </thead>
 | 
			
		||||
            
 | 
			
		||||
            <!-- 表格内容 -->
 | 
			
		||||
            <tbody>
 | 
			
		||||
              <tr class="hover">
 | 
			
		||||
                <td class="font-medium">192.168.1.100</td>
 | 
			
		||||
                <td>v1.2.3</td>
 | 
			
		||||
                <td>
 | 
			
		||||
                  <select class="select select-bordered w-full max-w-xs">
 | 
			
		||||
                    <option selected>黄金位流</option>
 | 
			
		||||
                    <option>应用位流1</option>
 | 
			
		||||
                    <option>应用位流2</option>
 | 
			
		||||
                    <option>应用位流3</option>
 | 
			
		||||
                  </select>
 | 
			
		||||
                </td>
 | 
			
		||||
                  <!-- 黄金位流上传区 -->
 | 
			
		||||
                <td>
 | 
			
		||||
                  <div class="flex flex-col items-center gap-2">
 | 
			
		||||
                    <label class="btn btn-outline btn-primary">
 | 
			
		||||
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 | 
			
		||||
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
 | 
			
		||||
                      </svg>
 | 
			
		||||
                      <input type="file" class="hidden" @change="handleFileChange($event, goldBitstreamFile)" />
 | 
			
		||||
                    </label>
 | 
			
		||||
                    <span class="text-xs text-primary truncate max-w-32" v-if="goldBitstreamFile">{{ goldBitstreamFile }}</span>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </td>
 | 
			
		||||
                  <!-- 应用位流1上传区 -->
 | 
			
		||||
                <td>
 | 
			
		||||
                  <div class="flex flex-col items-center gap-2">
 | 
			
		||||
                    <label class="btn btn-outline btn-secondary">
 | 
			
		||||
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 | 
			
		||||
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
 | 
			
		||||
                      </svg>
 | 
			
		||||
                      <input type="file" class="hidden" @change="handleFileChange($event, appBitstream1File)" />
 | 
			
		||||
                    </label>
 | 
			
		||||
                    <span class="text-xs text-secondary truncate max-w-32" v-if="appBitstream1File">{{ appBitstream1File }}</span>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </td>
 | 
			
		||||
                  <!-- 应用位流2上传区 -->
 | 
			
		||||
                <td>
 | 
			
		||||
                  <div class="flex flex-col items-center gap-2">
 | 
			
		||||
                    <label class="btn btn-outline btn-accent">
 | 
			
		||||
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 | 
			
		||||
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
 | 
			
		||||
                      </svg>
 | 
			
		||||
                      <input type="file" class="hidden" @change="handleFileChange($event, appBitstream2File)" />
 | 
			
		||||
                    </label>
 | 
			
		||||
                    <span class="text-xs text-accent truncate max-w-32" v-if="appBitstream2File">{{ appBitstream2File }}</span>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </td>
 | 
			
		||||
                  <!-- 应用位流3上传区 -->
 | 
			
		||||
                <td>
 | 
			
		||||
                  <div class="flex flex-col items-center gap-2">
 | 
			
		||||
                    <label class="btn btn-outline btn-info">
 | 
			
		||||
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 | 
			
		||||
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
 | 
			
		||||
                      </svg>
 | 
			
		||||
                      <input type="file" class="hidden" @change="handleFileChange($event, appBitstream3File)" />
 | 
			
		||||
                    </label>
 | 
			
		||||
                    <span class="text-xs text-info truncate max-w-32" v-if="appBitstream3File">{{ appBitstream3File }}</span>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </td>
 | 
			
		||||
                
 | 
			
		||||
                <!-- 操作按钮 -->
 | 
			
		||||
                <td class="flex gap-2">
 | 
			
		||||
                  <button class="btn btn-sm btn-warning">固化</button>
 | 
			
		||||
                  <button class="btn btn-sm btn-success">切换并热启动</button>
 | 
			
		||||
                </td>
 | 
			
		||||
              </tr>
 | 
			
		||||
            </tbody>
 | 
			
		||||
          </table>
 | 
			
		||||
        </div>
 | 
			
		||||
        
 | 
			
		||||
        <div class="mt-6 bg-base-300 p-4 rounded-lg">
 | 
			
		||||
          <p class="text-sm opacity-80">
 | 
			
		||||
            <span class="font-semibold text-warning">提示:</span> 
 | 
			
		||||
            请谨慎操作FPGA固化和热启动功能,确保上传的位流文件无误,以避免设备损坏。
 | 
			
		||||
          </p>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
import { ref } from 'vue';
 | 
			
		||||
 | 
			
		||||
// 存储上传文件的信息
 | 
			
		||||
const goldBitstreamFile = ref<string>('');
 | 
			
		||||
const appBitstream1File = ref<string>('');
 | 
			
		||||
const appBitstream2File = ref<string>('');
 | 
			
		||||
const appBitstream3File = ref<string>('');
 | 
			
		||||
 | 
			
		||||
// 处理文件上传
 | 
			
		||||
function handleFileChange(event: Event, fileRef: any) {
 | 
			
		||||
  const target = event.target as HTMLInputElement;
 | 
			
		||||
  const file = target.files?.[0];
 | 
			
		||||
  
 | 
			
		||||
  if (file) {
 | 
			
		||||
    fileRef.value = file.name;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="postcss">
 | 
			
		||||
@import "../assets/main.css";
 | 
			
		||||
</style>
 | 
			
		||||
@@ -52,8 +52,7 @@
 | 
			
		||||
              </svg>
 | 
			
		||||
              测试功能
 | 
			
		||||
            </router-link>
 | 
			
		||||
            
 | 
			
		||||
            <router-link to="/test/jtag" class="btn btn-warning text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
 | 
			
		||||
              <router-link to="/test/jtag" class="btn btn-warning text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
 | 
			
		||||
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 | 
			
		||||
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
 | 
			
		||||
                <line x1="8" y1="21" x2="16" y2="21"></line>
 | 
			
		||||
@@ -61,6 +60,14 @@
 | 
			
		||||
              </svg>
 | 
			
		||||
              JTAG测试
 | 
			
		||||
            </router-link>
 | 
			
		||||
            
 | 
			
		||||
            <router-link to="/admin" class="btn btn-error text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
 | 
			
		||||
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 | 
			
		||||
                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z"></path>
 | 
			
		||||
                <circle cx="12" cy="12" r="3"></circle>
 | 
			
		||||
              </svg>
 | 
			
		||||
              管理控制台
 | 
			
		||||
            </router-link>
 | 
			
		||||
          </div>
 | 
			
		||||
            <div class="mt-8 p-4 bg-base-300 rounded-lg shadow-inner opacity-80 transition-all duration-300 hover:opacity-100 hover:shadow-md">
 | 
			
		||||
            <p class="text-sm">
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user