前后端新增停止

ui/backend/config.yaml

@@ -7,15 +7,15 @@ sub:
   proxies:
     9660:
       file_path: g:\code\upwork\zhang_crawl_bio\download\proxy_pool\temp\9660.yaml
-      name: "\U0001F1EF\U0001F1F5\u65E5\u672C"
+      name: "\U0001F1EB\U0001F1F7\u6CD5\u56FD\u9A6C\u8D5B"
       port: 9660
     9662:
       file_path: g:\code\upwork\zhang_crawl_bio\download\proxy_pool\temp\9662.yaml
-      name: "\U0001F1F8\U0001F1EC\u4E9A\u9A6C\u900A\u65B0\u52A0\u5761"
+      name: "\U0001F1F0\U0001F1F7\u97E9\u56FD\u4E09\u7F51\u4E13\u7EBF2"
       port: 9662
     9664:
       file_path: g:\code\upwork\zhang_crawl_bio\download\proxy_pool\temp\9664.yaml
-      name: "\U0001F1EF\U0001F1F5\u65E5\u672C\u4E13\u7EBF4"
+      name: "\U0001F1EF\U0001F1F5\u4E9A\u9A6C\u900A\u65E5\u672C2"
       port: 9664
   start_port: 9660
   temp_dir: g:\code\upwork\zhang_crawl_bio\download\proxy_pool\temp

ui/backend/routers/proxy.py

@@ -196,6 +196,14 @@ async def create_proxy(request:ProxyPost):
     # return ProxyPostResponse(err=1, msg="proxy_lock error", data=sub_mgr.sub)
     return HTTPException(status_code=500, detail=ProxyPostResponse(err=1, msg="proxy_lock error", data=sub_mgr.sub))
 
+@router.post("/proxies/{port}/stop")
+async def stop_proxy(port: int):
+    global sub_mgr
+    proxy_mgr = sub_mgr.get_proxy_manager(port)
+    if not proxy_mgr:
+        raise HTTPException(status_code=404, detail=f"Proxy with port {port} not found")
+    await sub_mgr.stop_proxy(port)
+    return await get_proxy_response(port)
 @router.get("/subs")
 async def get_subscriptions():
     global sub_mgr

ui/docs/gpt/vue_cache.md

@@ -4,5 +4,5 @@ G:\code\upwork\zhang_crawl_bio\ui 当前项目采用 vue3（语法糖） + eleme
 因此前端可能要封装这两个请求让它支持缓存的操作，避免频繁长时间请求，让 UI 切换更加顺滑。
 
 同时，缓存也会过期，因此或许可以设置一个代理守卫，定期获取数据，自动保存到前端本地。这样缓存就会一直保持最新，并且让用户无感体验。
-
+因为目前来说过期时间是1小时并不
 我这个思路是否符合前后端最佳软件设计架构？你来决定应该如何优化。

ui/fontend/src/components/ProxyPool.vue

@@ -2,7 +2,7 @@
     <div class="proxy-pool-container">
       <el-row justify="end" class="mb-4">
         <el-button type="success" @click="autoCreateProxy" :loading="creating">新增代理</el-button>
-        <el-button type="primary" @click="fetchProxyList" :loading="loading">刷新列表</el-button>
+        <el-button type="primary" @click="refreshProxyList" :loading="loading">刷新列表</el-button>
       </el-row>
       
       <el-table :data="proxyList" border stripe v-loading="loading">
@@ -75,7 +75,6 @@
 import { ref } from 'vue'
 import type { ProxyResponse, ProxyPostResponse } from '../api-types'
 import { useProxyStore } from '../stores/proxyStore'
-import { log } from 'console'
 const store = useProxyStore()
 
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || ''
@@ -88,18 +87,17 @@ const selectedProxy = ref<ProxyResponse | null>(null)
 const fetchProxyList = async (useCatch=true) => {
 try {
     loading.value = true
-    let response:Response
+    // let response:Response
     let data: ProxyResponse[]
-    if (useCatch) {
-      const cacheKey = 'fetchProxyList'
+    const cacheKey = 'fetchProxyList'
+    if (!useCatch) {
+      localStorage.removeItem(cacheKey) 
+    }
       data = await store.cachedFetch(`${apiBaseUrl}/proxy/proxies`, cacheKey)
       console.log(`useCatch ${cacheKey}: `, data)
-    }
-    else {
-      response = await fetch(`${apiBaseUrl}/proxy/proxies`)
-      if (!response.ok) throw new Error('获取代理列表失败')
-      data = await response.json()
-    }
+      // response = await fetch(`${apiBaseUrl}/proxy/proxies`)
+      // if (!response.ok) throw new Error('获取代理列表失败')
+      // data = await response.json()
     
     proxyList.value = data.map((proxy: ProxyResponse) => ({
       ...proxy,
@@ -111,6 +109,9 @@ try {
     loading.value = false
 }
 }
+const refreshProxyList = async () => {
+  await fetchProxyList(false) 
+}
 
 const showDetail = (proxy: ProxyResponse) => {
 selectedProxy.value = proxy
@@ -140,8 +141,8 @@ try {
 const closeProxy = async (proxy: ProxyResponse) => {
     try {
         proxy.isLoading = true
-        const response = await fetch(`${apiBaseUrl}/proxy/proxies/${proxy.port}`, {
-            method: 'DELETE'
+        const response = await fetch(`${apiBaseUrl}/proxy/proxies/${proxy.port}/stop`, {
+            method: 'POST'
         })
         if (!response.ok) throw new Error('关闭代理失败')
         proxy.reachable = false