添加系统代理页面 API 获取状态

ui/fontend/src/App.vue

@@ -3,7 +3,14 @@ import Proxy from './components/Proxy.vue'
 </script>
 
 <template>
-    <Proxy />
+    <div class="common-layout">
+    <el-container>
+      <el-header></el-header>
+      <el-main >    
+        <Proxy />
+      </el-main>
+    </el-container>
+  </div>
 </template>
 
 <style scoped>

ui/fontend/src/components/Proxy.vue

@@ -1,33 +1,65 @@
 <template>
     <div>
-      <el-row>
+      <el-row justify="center">
         <el-radio-group @change="proxy_change" v-model="proxy_choice">
-          <el-radio  value="poll">代理池</el-radio>
           <el-radio  value="system" @change="get_sys_proxy" >系统</el-radio>
+          <el-radio  value="poll">代理池</el-radio>
         </el-radio-group>
       </el-row>
         
-      <el-row>
-        <el-text class="mx-1" size="large">当前系统代理： {{ proxy_choice }}</el-text>
+      <el-row v-if="proxy_choice=='system'" justify="center" class="mt-4">
+        <el-descriptions title="系统代理状态" direction="vertical" :column="1" border>
+          <el-descriptions-item label="代理状态">
+            {{ sys_proxy.sys_open ? '已启用' : '未启用' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="代理地址">
+            {{ sys_proxy.proxy_server || '未设置' }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-row>
+      <el-row v-else justify="center">
+        <el-button type="primary" >代理池</el-button>
       </el-row>
     </div>
 </template>
     
 <script setup lang="ts">
 import { ref } from 'vue'
-const proxy_choice = ref<any>('default')
+import { onMounted } from 'vue'
+const proxy_choice = ref<string>('system')
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || ''
-const proxy_change = (value: any) => {
-  console.log(value)
-  console.log(proxy_choice.value)
+const sys_proxy = ref<{sys_open: boolean, proxy_server: string}>({
+  sys_open: false,
+  proxy_server: ''
+})
+
+// 获取系统代理信息
+const get_sys_proxy = async () => {
+  try {
+    const response = await fetch(apiBaseUrl + '/proxy/sys')
+    if (!response.ok) throw new Error('获取代理信息失败')
+    const data = await response.json()
+    sys_proxy.value = data
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('获取代理信息失败')
+  }
 }
-const get_sys_proxy = () => {
-    console.log(apiBaseUrl);
-    
+
+// 初始化时自动获取一次代理信息
+onMounted(() => {
+  get_sys_proxy()
+})
+
+const proxy_change = (value: any) => {
+  if (value === 'system') {
+    get_sys_proxy()
+  }
 }
+
 </script>
 
 <style scoped>
 
 </style>
-  
+