outman/frpc-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ 新版本

Browse Source
This commit is contained in:
刘嘉伟 2024-08-17 17:22:46 +08:00
parent ed66824931
commit fb2a8ecd51
7 changed files with 101 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -29,9 +29,12 @@
- [x] 增加udp代理类型
- [x] 支持快速分享frps
- [x] 增加快速选择本地端口
- [ ] 支持stcp代理类型
- [ ] 支持配的导出导入
- [ ] 优化配置
- [x] 支持stcp代理类型
- [ ] 支持所有配置的导入导出
- [ ] 支持代理的导出导入导出
- [ ] 一键清空所有配置
- [ ] 通过镜像站下载frp
- [ ] tcp、udp协议支持批量端口
## 常见问题
@ -39,6 +42,7 @@
执行命令：`sudo xattr -cr Frpc-Desktop.app`
## 里程碑
- 2024-08-17: 发布v1.0.8版本 支持stcp代理
- 2024-08-11: 发布v1.0.7版本
- 2024-08-09: 发布v1.0.6版本
- 2024-08-06: 发布v1.0.5版本

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "Frpc-Desktop",
"version": "1.0.7",
"version": "1.0.8",
"main": "dist-electron/main/index.js",
"description": "FRP跨平台桌面客户端，可视化配置，轻松实现内网穿透！",
"repository": "github:luckjiawei/frpc-desktop",

2
src/components/IconifyIcon/src/offlineIcon.ts
View File

@ -28,6 +28,7 @@ import Error from "@iconify-icons/material-symbols/error";
import ContentCopy from "@iconify-icons/material-symbols/content-copy";
import ContentPasteGo from "@iconify-icons/material-symbols/content-paste-go";
import Edit from "@iconify-icons/material-symbols/edit";
import CheckBox from "@iconify-icons/material-symbols/check-box";
addIcon("cloud", Cloud);
addIcon("rocket-launch-rounded", RocketLaunchRounded);
@ -51,4 +52,5 @@ addIcon("error", Error);
addIcon("content-copy", ContentCopy);
addIcon("content-paste-go", ContentPasteGo);
addIcon("edit", Edit);
addIcon("check-box", CheckBox);

4
src/views/config/index.vue
View File

@ -23,7 +23,7 @@ type ShareLinkConfig = {
};
const defaultFormData = ref<FrpConfig>({
currentVersion: "",
currentVersion: -1,
serverAddr: "",
serverPort: 7000,
authMethod: "",
@ -155,7 +155,7 @@ const checkAndResetVersion = () => {
currentVersion &&
!versions.value.some(item => item.id === currentVersion)
) {
formData.value.currentVersion = "";
formData.value.currentVersion = null;
}
};

91
src/views/download/index.vue
View File

@ -1,11 +1,10 @@
<script lang="ts" setup>
import {defineComponent, onMounted, onUnmounted, ref} from "vue";
import {ipcRenderer} from "electron";
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import { ipcRenderer } from "electron";
import moment from "moment";
import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
import {ElMessage} from "element-plus";
import {useDebounceFn} from "@vueuse/core";
import { ElMessage } from "element-plus";
import { useDebounceFn } from "@vueuse/core";
defineComponent({
name: "Download"
@ -14,7 +13,7 @@ defineComponent({
const versions = ref<Array<FrpVersion>>([]);
const loading = ref(1);
const downloadPercentage = ref(0);
const downloading = ref<Map<string, number>>(new Map<string, number>());
const downloading = ref<Map<number, number>>(new Map<number, number>());
/**
* 获取版本
@ -47,30 +46,30 @@ const handleInitDownloadHook = () => {
ipcRenderer.on("Download.frpVersionHook", (event, args) => {
loading.value--;
versions.value = args.map(m => {
m.published_at = moment(m.published_at).format("YYYY-MM-DD HH:mm:ss")
m.published_at = moment(m.published_at).format("YYYY-MM-DD");
return m as FrpVersion;
}) as Array<FrpVersion>;
console.log(versions, 'versions')
console.log(versions, "versions");
});
// 进度监听
ipcRenderer.on("Download.frpVersionDownloadOnProgress", (event, args) => {
const {id, progress} = args;
const { id, progress } = args;
downloading.value.set(
id,
Number(Number(progress.percent * 100).toFixed(2))
id,
Number(Number(progress.percent * 100).toFixed(2))
);
});
ipcRenderer.on("Download.frpVersionDownloadOnCompleted", (event, args) => {
downloading.value.delete(args);
const version: FrpVersion | undefined = versions.value.find(
f => f.id === args
f => f.id === args
);
if (version) {
version.download_completed = true;
}
});
ipcRenderer.on("Download.deleteVersion.hook", (event, args) => {
const {err, data} = args
const { err, data } = args;
if (!err) {
loading.value++;
ElMessage({
@ -79,8 +78,7 @@ const handleInitDownloadHook = () => {
});
handleLoadVersions();
}
})
});
};
onMounted(() => {
@ -100,7 +98,7 @@ onUnmounted(() => {
</script>
<template>
<div class="main">
<breadcrumb/>
<breadcrumb />
<!-- <breadcrumb>-->
<!-- <div class="flex items-center">-->
<!-- <el-checkbox>加速下载</el-checkbox>-->
@ -110,17 +108,17 @@ onUnmounted(() => {
<template v-if="versions && versions.length > 0">
<el-row :gutter="20">
<el-col
v-for="version in versions"
:key="version.id"
:lg="8"
:md="8"
:sm="12"
:xl="6"
:xs="24"
class="mb-[20px]"
v-for="version in versions"
:key="version.id"
:lg="8"
:md="8"
:sm="12"
:xl="6"
:xs="24"
class="mb-[20px]"
>
<div
class="w-full bg-white rounded p-4 drop-shadow-lg flex justify-between items-center"
class="w-full bg-white rounded p-4 drop-shadow-lg flex justify-between items-center"
>
<div class="left">
<div class="mb-2">
@ -128,7 +126,7 @@ onUnmounted(() => {
<!-- <el-tag class="ml-2">原文件名：{{ version.assets[0]?.name }}</el-tag>-->
</div>
<div class="text-sm">
发布时间：<span class="text-gray-00">{{
发布时间：<span class="text-gray-00 text-sm text-primary font-bold">{{
// moment(version.published_at).format("YYYY-MM-DD HH:mm:ss")
version.published_at
}}</span>
@ -136,23 +134,41 @@ onUnmounted(() => {
</div>
<div class="right">
<div v-if="version.download_completed">
<el-button type="text">已下载</el-button>
<el-button type="text" class="danger-text" @click="handleDeleteVersion(version)">
<IconifyIconOffline class="mr-1" icon="delete-rounded"/>
<!-- <span class="text-[12px] text-primary font-bold mr-2"-->
<!-- >已下载</span-->
<!-- >-->
<el-button
type="text"
@click="handleDeleteVersion(version)"
>
<IconifyIconOffline class="mr-1" icon="check-box" />
已下载
</el-button>
<!-- <el-button type="text"></el-button>-->
<el-button
type="text"
class="danger-text"
@click="handleDeleteVersion(version)"
>
<IconifyIconOffline class="mr-1" icon="delete-rounded" />
删除
</el-button>
</div>
<template v-else>
<div class="w-32" v-if="downloading.has(version.id)">
<el-progress
:percentage="downloading.get(version.id)"
:text-inside="false"
:percentage="downloading.get(version.id)"
:text-inside="false"
/>
</div>
<el-button v-else size="small" type="primary" @click="handleDownload(version)">
<IconifyIconOffline class="mr-1" icon="download"/>
<el-button
v-else
size="small"
type="primary"
@click="handleDownload(version)"
>
<IconifyIconOffline class="mr-1" icon="download" />
下载
</el-button>
</template>
@ -160,13 +176,12 @@ onUnmounted(() => {
</div>
</el-col>
</el-row>
</template>
<div
v-else
class="w-full h-full bg-white rounded p-2 overflow-hidden drop-shadow-xl flex justify-center items-center"
v-else
class="w-full h-full bg-white rounded p-2 overflow-hidden drop-shadow-xl flex justify-center items-center"
>
<el-empty description="暂无可用版本"/>
<el-empty description="暂无可用版本" />
</div>
</div>
</div>

62
src/views/home/index.vue
View File

@ -1,10 +1,10 @@
<script lang="ts" setup>
import {defineComponent, onMounted, onUnmounted, ref} from "vue";
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
import {ipcRenderer} from "electron";
import {ElMessageBox} from "element-plus";
import { ipcRenderer } from "electron";
import { ElMessageBox } from "element-plus";
import router from "@/router";
import {useDebounceFn} from "@vueuse/core";
import { useDebounceFn, useIntervalFn } from "@vueuse/core";
defineComponent({
name: "Home"
@ -29,12 +29,12 @@ const handleButtonClick = useDebounceFn(() => {
}, 300);
onMounted(() => {
setInterval(() => {
useIntervalFn(() => {
ipcRenderer.invoke("frpc.running").then(data => {
running.value = data;
console.log('进程状态', data)
console.log("进程状态", data);
});
}, 300);
}, 500);
ipcRenderer.on("Home.frpc.start.error.hook", (event, args) => {
if (args) {
@ -58,37 +58,37 @@ onUnmounted(() => {
<template>
<div class="main">
<breadcrumb/>
<breadcrumb />
<div class="app-container-breadcrumb">
<div
class="w-full h-full bg-white p-4 rounded drop-shadow-lg overflow-y-auto flex justify-center items-center"
class="w-full h-full bg-white p-4 rounded drop-shadow-lg overflow-y-auto flex justify-center items-center"
>
<div class="flex">
<div
class="w-40 h-40 border-[#5A3DAA] text-[#5A3DAA] border-4 rounded-full flex justify-center items-center text-[100px] relative"
class="w-40 h-40 border-[#5A3DAA] text-[#5A3DAA] border-4 rounded-full flex justify-center items-center text-[100px] relative"
>
<transition name="fade">
<div
v-show="running"
class="z-0 rounded-full opacity-20 left-circle bg-[#5A3DAA] w-full h-full animation-rotate-1"
v-show="running"
class="z-0 rounded-full opacity-20 left-circle bg-[#5A3DAA] w-full h-full animation-rotate-1"
/>
</transition>
<transition name="fade">
<div
v-show="running"
class="z-0 rounded-full opacity-20 right-circle top-[10px] bg-[#5A3DAA] w-full h-full animation-rotate-2"
v-show="running"
class="z-0 rounded-full opacity-20 right-circle top-[10px] bg-[#5A3DAA] w-full h-full animation-rotate-2"
/>
</transition>
<transition name="fade">
<div
v-show="running"
class="z-0 rounded-full opacity-20 top-circle bg-[#5A3DAA] w-full h-full animation-rotate-3"
v-show="running"
class="z-0 rounded-full opacity-20 top-circle bg-[#5A3DAA] w-full h-full animation-rotate-3"
/>
</transition>
<div
class="bg-white z-10 w-full h-full absolute rounded-full flex justify-center items-center"
class="bg-white z-10 w-full h-full absolute rounded-full flex justify-center items-center"
>
<IconifyIconOffline icon="rocket-launch-rounded"/>
<IconifyIconOffline icon="rocket-launch-rounded" />
</div>
</div>
<div class="flex justify-center items-center">
@ -96,14 +96,15 @@ onUnmounted(() => {
<transition name="fade">
<div class="font-bold text-2xl text-center">
<IconifyIconOffline
v-if="running"
class="text-[#7EC050]
inline-block relative top-1"
icon="check-circle-rounded"/>
v-if="running"
class="text-[#7EC050] inline-block relative top-1"
icon="check-circle-rounded"
/>
<IconifyIconOffline
v-else
class="text-[#E47470] inline-block relative top-1"
icon="error"/>
v-else
class="text-[#E47470] inline-block relative top-1"
icon="error"
/>
Frpc {{ running ? "已启动" : "已断开" }}
</div>
</transition>
@ -115,11 +116,16 @@ onUnmounted(() => {
<!-- >查看日志-->
<!-- </el-button>-->
<div class="w-full justify-center text-center">
<el-link v-if="running" type="primary" @click="$router.replace({ name: 'Logger' })">查看日志</el-link>
<el-link
v-if="running"
type="primary"
@click="$router.replace({ name: 'Logger' })"
>查看日志</el-link
>
</div>
<div
class="w-full h-8 bg-[#563EA4] rounded flex justify-center items-center text-white font-bold cursor-pointer"
@click="handleButtonClick"
class="w-full h-8 bg-[#563EA4] rounded flex justify-center items-center text-white font-bold cursor-pointer"
@click="handleButtonClick"
>
{{ running ? "断 开" : "启 动" }}
</div>

4
types/global.d.ts vendored
View File

@ -25,7 +25,7 @@ declare global {
serverName: string;
secretKey: string;
bindAddr: string;
bindPort: string;
bindPort: number;
};
/**
@ -41,7 +41,7 @@ declare global {
* 版本类型
*/
type FrpVersion = {
id: string;
id: number;
name: string;
published_at: string;
download_completed: boolean;