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-16 16:23:20 +08:00
parent 8e8eb722e4
commit d2ceb6e35e
15 changed files with 212 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -36,6 +36,7 @@
"electron:generate-icons": "electron-icon-builder --input=./public/logo.png --output=build --flatten"
},
"devDependencies": {
"@iconify-icons/material-symbols": "^1.2.58",
"@iconify/vue": "^4.1.1",
"@types/nedb": "^1.8.16",
"@vitejs/plugin-vue": "^4.3.3",

9
src/components/IconifyIcon/index.ts Normal file
View File

@ -0,0 +1,9 @@
import iconifyIconOffline from "./src/iconifyIconOffline";
import iconifyIconOnline from "./src/iconifyIconOnline";
/** 本地图标组件 */
const IconifyIconOffline = iconifyIconOffline;
/** 在线图标组件 */
const IconifyIconOnline = iconifyIconOnline;
export {IconifyIconOffline, IconifyIconOnline};

30
src/components/IconifyIcon/src/iconifyIconOffline.ts Normal file
View File

@ -0,0 +1,30 @@
import { h, defineComponent } from "vue";
import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
// Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
export default defineComponent({
name: "IconifyIconOffline",
components: { IconifyIcon },
props: {
icon: {
default: null
}
},
render() {
if (typeof this.icon === "object") addIcon(this.icon, this.icon);
const attrs = this.$attrs;
return h(
IconifyIcon,
{
icon: this.icon,
style: attrs?.style
? Object.assign(attrs.style, { outline: "none" })
: { outline: "none" },
...attrs
},
{
default: () => []
}
);
}
});

30
src/components/IconifyIcon/src/iconifyIconOnline.ts Normal file
View File

@ -0,0 +1,30 @@
import { h, defineComponent } from "vue";
import { Icon as IconifyIcon } from "@iconify/vue";
// Iconify Icon在Vue里在线使用（用于外网环境）
export default defineComponent({
name: "IconifyIconOnline",
components: { IconifyIcon },
props: {
icon: {
type: String,
default: ""
}
},
render() {
const attrs = this.$attrs;
return h(
IconifyIcon,
{
icon: `${this.icon}`,
style: attrs?.style
? Object.assign(attrs.style, { outline: "none" })
: { outline: "none" },
...attrs
},
{
default: () => []
}
);
}
});

54
src/components/IconifyIcon/src/offlineIcon.ts Normal file
View File

@ -0,0 +1,54 @@
import {addIcon} from "@iconify/vue/dist/offline";
/**
* 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
*/
// 本地菜单图标，后端在路由的icon中返回对应的图标字符串并且前端在此处使用addIcon添加即可渲染菜单图标
import Cloud from "@iconify-icons/material-symbols/cloud";
import RocketLaunchRounded from "@iconify-icons/material-symbols/rocket-launch-rounded";
import Download from "@iconify-icons/material-symbols/download-2";
import Settings from "@iconify-icons/material-symbols/settings";
import FileCopySharp from "@iconify-icons/material-symbols/file-copy-sharp";
import InfoSharp from "@iconify-icons/material-symbols/info-sharp";
import refreshRounded from "@iconify-icons/material-symbols/refresh-rounded";
import MoreVert from "@iconify-icons/material-symbols/more-vert";
import Add from "@iconify-icons/material-symbols/add";
import BringYourOwnIpRounded from "@iconify-icons/material-symbols/bring-your-own-ip-rounded";
import DeleteRounded from "@iconify-icons/material-symbols/delete-rounded";
import RefreshRounded from "@iconify-icons/material-symbols/refresh-rounded";
import CancelPresentation from "@iconify-icons/material-symbols/cancel-presentation";
import GestureSelect from "@iconify-icons/material-symbols/gesture-select";
import SaveRounded from "@iconify-icons/material-symbols/save-rounded";
import Info from "@iconify-icons/material-symbols/info";
import QuestionMark from "@iconify-icons/material-symbols/question-mark";
import CheckCircleRounded from "@iconify-icons/material-symbols/check-circle-rounded";
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";
addIcon("cloud", Cloud);
addIcon("rocket-launch-rounded", RocketLaunchRounded);
addIcon("download", Download);
addIcon("settings", Settings);
addIcon("file-copy-sharp", FileCopySharp);
addIcon("info-sharp", InfoSharp);
addIcon("refresh-rounded", refreshRounded);
addIcon("more-vert", MoreVert);
addIcon("add", Add);
addIcon("bring-your-own-ip-rounded", BringYourOwnIpRounded);
addIcon("delete-rounded", DeleteRounded);
addIcon("cancel-presentation", CancelPresentation);
addIcon("gesture-select", GestureSelect);
addIcon("save-rounded", SaveRounded);
addIcon("refresh-rounded", RefreshRounded);
addIcon("info", Info);
addIcon("question-mark", QuestionMark);
addIcon("check-circle-rounded", CheckCircleRounded);
addIcon("error", Error);
addIcon("content-copy", ContentCopy);
addIcon("content-paste-go", ContentPasteGo);
addIcon("edit", Edit);

10
src/layout/compoenets/Breadcrumb.vue
View File

@ -3,6 +3,7 @@ import { Icon } from "@iconify/vue";
import { computed, defineComponent } from "vue";
import router from "@/router";
defineComponent({
name: "Breadcrumb"
});
@ -15,10 +16,11 @@ const currentRoute = computed(() => {
<template>
<div class="flex justify-between">
<div class="breadcrumb">
<Icon
class="inline-block mr-2"
:icon="currentRoute.meta['icon'] as string"
/>
<IconifyIconOffline class="inline-block mr-2" :icon="currentRoute.meta['icon'] as string"/>
<!-- <Icon-->
<!-- class="inline-block mr-2"-->
<!-- :icon="currentRoute.meta['icon'] as string"-->
<!-- />-->
<span>{{ currentRoute.meta["title"] }}</span>
</div>
<div class="right">

4
src/layout/compoenets/LeftMenu.vue
View File

@ -1,10 +1,10 @@
<script lang="ts" setup>
import {computed, defineComponent, onMounted, ref} from "vue";
import {Icon} from "@iconify/vue";
import router from "@/router";
import {RouteRecordRaw} from "vue-router";
import pkg from '../../../package.json';
defineComponent({
name: "AppMain"
});
@ -58,7 +58,7 @@ onMounted(() => {
:key="r.name"
@click="handleMenuChange(r)"
>
<Icon class="animate__animated" :icon="r?.meta?.icon as string"/>
<IconifyIconOffline class="animate__animated" :icon="r?.meta?.icon as string"></IconifyIconOffline>
</li>
</ul>
<div class="version mb-2 animate__animated" @click="handleOpenGitHubReleases">

1
src/layout/index.vue
View File

@ -2,6 +2,7 @@
import { defineComponent } from "vue";
import AppMain from "./compoenets/AppMain.vue";
import LeftMenu from "./compoenets/LeftMenu.vue";
import "@/components/IconifyIcon/src/offlineIcon";
defineComponent({
name: "Layout"

24
src/main.ts
View File

@ -1,14 +1,22 @@
import { createApp } from "vue";
import {createApp} from "vue";
import App from "./App.vue";
import router from "./router";
import "./styles/index.scss";
import 'animate.css';
import ElementPlus from "element-plus";
import {
IconifyIconOffline,
IconifyIconOnline,
} from "./components/IconifyIcon";
createApp(App)
.use(router)
.use(ElementPlus)
.mount("#app")
.$nextTick(() => {
postMessage({ payload: "removeLoading" }, "*");
});
const app = createApp(App);
app.component("IconifyIconOffline", IconifyIconOffline);
app.component("IconifyIconOnline", IconifyIconOnline);
app.use(router)
.use(ElementPlus)
.mount("#app")
.$nextTick(() => {
postMessage({payload: "removeLoading"}, "*");
});

12
src/router/index.ts
View File

@ -14,7 +14,7 @@ const routes: RouteRecordRaw[] = [
name: "Home",
meta: {
title: "连接",
icon: "material-symbols:rocket-launch-rounded",
icon: "rocket-launch-rounded",
keepAlive: true
},
component: () => import("@/views/home/index.vue")
@ -24,7 +24,7 @@ const routes: RouteRecordRaw[] = [
name: "Proxy",
meta: {
title: "穿透列表",
icon: "material-symbols:cloud",
icon: "cloud",
keepAlive: true
},
component: () => import("@/views/proxy/index.vue")
@ -34,7 +34,7 @@ const routes: RouteRecordRaw[] = [
name: "Download",
meta: {
title: "版本下载",
icon: "material-symbols:download-2",
icon: "download",
keepAlive: true
},
component: () => import("@/views/download/index.vue")
@ -44,7 +44,7 @@ const routes: RouteRecordRaw[] = [
name: "Config",
meta: {
title: "系统配置",
icon: "material-symbols:settings",
icon: "settings",
keepAlive: true
},
component: () => import("@/views/config/index.vue")
@ -54,7 +54,7 @@ const routes: RouteRecordRaw[] = [
name: "Logger",
meta: {
title: "日志",
icon: "material-symbols:file-copy-sharp",
icon: "file-copy-sharp",
keepAlive: true,
hidden: false
},
@ -65,7 +65,7 @@ const routes: RouteRecordRaw[] = [
name: "About",
meta: {
title: "关于",
icon: "material-symbols:info-sharp",
icon: "info-sharp",
keepAlive: true,
hidden: true
},

11
src/views/about/index.vue
View File

@ -103,8 +103,6 @@ defineComponent({
class="w-[95px] h-[95px] mt-[-50px] animate__animated animate__flip" alt="Logo"/>
<div class="mt-[8px] text-2xl">Frpc Desktop</div>
<div class="mt-[8px] text-neutral-400 flex items-center">
<!-- <span class="font-bold"> v{{ pkg.version }}</span>-->
<el-link
:class="!isLastVersion? 'line-through': ''"
class="ml-2 font-bold">v{{ pkg.version }}
@ -114,11 +112,8 @@ defineComponent({
class="ml-2 text-[#67C23A] font-bold"
type="success">v{{ latestVersionInfo.name }}
</el-link>
<!-- <span class="ml-2 text-[#67C23A] font-bold"-->
<!-- @click="handleOpenNewVersion"-->
<!-- v-if="!isLastVersion && latestVersionInfo">v{{ latestVersionInfo.name }}</span>-->
<Icon class="ml-1.5 cursor-pointer check-update" icon="material-symbols:refresh-rounded"
@click="handleGetLastVersion"></Icon>
<IconifyIconOffline class="ml-1.5 cursor-pointer check-update" icon="refresh-rounded"
@click="handleGetLastVersion"/>
</div>
<div class="mt-[8px] text-sm text-center">
<p>
@ -134,7 +129,7 @@ defineComponent({
仓库地址
</el-button>
<el-button type="danger" plain @click="handleOpenGitHubIssues">
<Icon class="cursor-pointer mr-2" icon="material-symbols:question-mark"/>
<IconifyIconOffline class="cursor-pointer mr-2" icon="question-mark"/>
反馈问题
</el-button>
</div>

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

@ -5,9 +5,9 @@ import {ElMessage, ElMessageBox, FormInstance, FormRules} from "element-plus";
import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
import {useDebounceFn} from "@vueuse/core";
import {clone} from "@/utils/clone";
import {Icon} from "@iconify/vue";
import {Base64} from "js-base64";
defineComponent({
name: "Config"
});
@ -331,24 +331,13 @@ onUnmounted(() => {
</el-select>
<div class="w-full flex justify-end">
<el-link type="primary" @click="handleLoadVersions">
<Icon class="mr-1" icon="material-symbols:refresh-rounded"/>
<iconify-icon-offline class="mr-1" icon="refresh-rounded"/>
手动刷新
</el-link>
<!-- <el-button type="text" @click="handleLoadVersions">-->
<!-- <Icon class="mr-1" icon="material-symbols:refresh-rounded"/>-->
<!-- 手动刷新-->
<!-- </el-button>-->
<el-link class="ml-2" type="primary" @click="$router.replace({ name: 'Download' })">
<Icon class="mr-1" icon="material-symbols:download-2"/>
<IconifyIconOffline class="mr-1" icon="download"/>
点击这里去下载
</el-link>
<!-- <el-button-->
<!-- type="text"-->
<!-- @click="$router.replace({ name: 'Download' })"-->
<!-- >-->
<!-- <Icon class="mr-1" icon="material-symbols:download-2"/>-->
<!-- 点击这里去下载-->
<!-- </el-button>-->
</div>
</el-form-item>
</el-col>
@ -356,10 +345,8 @@ onUnmounted(() => {
<div class="h2 flex justify-between">
<div>服务器配置</div>
<div class="flex items-center justify-center">
<Icon @click="handleCopyServerConfig2Base64" class="mr-2 cursor-pointer text-xl font-bold"
icon="material-symbols:content-copy"/>
<Icon @click="handlePasteServerConfig4Base64" class="mr-2 cursor-pointer text-xl font-bold"
icon="material-symbols:content-paste-go"/>
<IconifyIconOffline class="mr-2 cursor-pointer text-xl font-bold" icon="content-copy"/>
<IconifyIconOffline class="mr-2 cursor-pointer text-xl font-bold" icon="content-paste-go"/>
</div>
</div>
@ -377,7 +364,7 @@ onUnmounted(() => {
class="font-black text-[#5A3DAA]">IP</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -414,7 +401,8 @@ onUnmounted(() => {
对应参数：<span class="font-black text-[#5A3DAA]">auth.method</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<!-- <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>-->
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -445,7 +433,7 @@ onUnmounted(() => {
对应参数：<span class="font-black text-[#5A3DAA]">auth.token</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -470,7 +458,7 @@ onUnmounted(() => {
对应参数：<span class="font-black text-[#5A3DAA]">user</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -495,7 +483,7 @@ onUnmounted(() => {
对应参数：<span class="font-black text-[#5A3DAA]">metadatas.token</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -522,7 +510,7 @@ onUnmounted(() => {
对应参数：<span class="font-black text-[#5A3DAA]">transport.heartbeatInterval</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -554,7 +542,7 @@ onUnmounted(() => {
对应参数：<span class="font-black text-[#5A3DAA]">transport.heartbeatTimeout</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -597,7 +585,7 @@ onUnmounted(() => {
对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.certFile</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -625,7 +613,7 @@ onUnmounted(() => {
对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.keyFile</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -653,7 +641,7 @@ onUnmounted(() => {
对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.trustedCaFile</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -681,7 +669,7 @@ onUnmounted(() => {
对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.serverName</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -719,7 +707,7 @@ onUnmounted(() => {
对应参数：<span class="font-black text-[#5A3DAA]">transport.proxyURL</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -764,7 +752,7 @@ onUnmounted(() => {
开机自动启动 <br/><span class="font-black text-[#5A3DAA]">Frpc Desktop</span>
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -789,7 +777,7 @@ onUnmounted(() => {
</template>
<template #reference>
<Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
<IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
</template>
</el-popover>
</div>
@ -804,7 +792,7 @@ onUnmounted(() => {
<el-col :span="24">
<el-form-item>
<el-button plain type="primary" @click="handleSubmit">
<Icon class="mr-1" icon="material-symbols:save"/>
<IconifyIconOffline icon="save"/>
保 存
</el-button>
</el-form-item>
@ -829,7 +817,9 @@ onUnmounted(() => {
<div class="dialog-footer">
<el-button plain type="primary" @click="handlePasteServerConfigBase64">
<Icon class="cursor-pointer mr-2" icon="material-symbols:label-important-rounded"/>导 入</el-button>
<IconifyIconOffline class="cursor-pointer mr-2" icon="label-important-rounded"/>
导 入
</el-button>
</div>
</template>

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

@ -3,10 +3,10 @@ import {defineComponent, onMounted, onUnmounted, ref} from "vue";
import {ipcRenderer} from "electron";
import moment from "moment";
import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
import {Icon} from "@iconify/vue";
import {ElMessage} from "element-plus";
import {useDebounceFn} from "@vueuse/core";
defineComponent({
name: "Download"
});
@ -141,20 +141,10 @@ onUnmounted(() => {
<div class="right">
<div v-if="version.download_completed">
<el-button type="text">已下载</el-button>
<!-- <span-->
<!-- class="primary-text text-sm font-bold ml-2"-->
<!-- >已下载</span>-->
<el-button type="text" class="danger-text" @click="handleDeleteVersion(version)">
<Icon class="mr-1" icon="material-symbols:delete"/>
<IconifyIconOffline class="mr-1" icon="delete-rounded"/>
删除
</el-button>
<!-- <div>-->
<!-- <Icon class="mr-1" icon="material-symbols:download-2"/>-->
<!-- <span-->
<!-- class="danger-text text-sm font-bold ml-2"-->
<!-- >删除下载</span>-->
<!-- </div>-->
</div>
@ -166,7 +156,7 @@ onUnmounted(() => {
/>
</div>
<el-button v-else size="small" type="primary" @click="handleDownload(version)">
<Icon class="mr-1" icon="material-symbols:download-2"/>
<IconifyIconOffline class="mr-1" icon="download"/>
下载
</el-button>
</template>

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

@ -2,7 +2,6 @@
import {defineComponent, onMounted, onUnmounted, ref} from "vue";
import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
import {ipcRenderer} from "electron";
import {Icon} from "@iconify/vue";
import {ElMessageBox} from "element-plus";
import router from "@/router";
import {useDebounceFn} from "@vueuse/core";
@ -89,16 +88,22 @@ onUnmounted(() => {
<div
class="bg-white z-10 w-full h-full bg-white absolute rounded-full flex justify-center items-center"
>
<Icon icon="material-symbols:rocket-launch-rounded"/>
<IconifyIconOffline icon="rocket-launch-rounded"/>
</div>
</div>
<div class="flex justify-center items-center">
<div class="pl-8 h-28 w-52 flex flex-col justify-between">
<transition name="fade">
<div class="font-bold text-2xl text-center">
<Icon v-if="running" class="text-[#7EC050] inline-block relative top-1"
icon="material-symbols:check-circle-rounded"/>
<Icon v-else class="text-[#E47470] inline-block relative top-1" icon="material-symbols:error"/>
<IconifyIconOffline
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"/>
Frpc {{ running ? "已启动" : "已断开" }}
</div>
</transition>

40
src/views/proxy/index.vue
View File

@ -1,11 +1,12 @@
<script lang="ts" setup>
import {defineComponent, onMounted, onUnmounted, reactive, ref} from "vue";
import {Icon} from "@iconify/vue";
import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {ipcRenderer} from "electron";
import {clone} from "@/utils/clone";
import {useDebounceFn} from "@vueuse/core";
import IconifyIconOffline from "@/components/IconifyIcon/src/iconifyIconOffline";
defineComponent({
name: "Proxy"
@ -274,7 +275,7 @@ onUnmounted(() => {
class="cursor-pointer h-[36px] w-[36px] bg-[#5f3bb0] rounded text-white flex justify-center items-center"
@click="handleOpenInsert"
>
<Icon icon="material-symbols:add"/>
<IconifyIconOffline icon="add"/>
</div>
</breadcrumb>
<div class="app-container-breadcrumb" v-loading="loading.list > 0">
@ -315,20 +316,20 @@ onUnmounted(() => {
<a href="javascript:void(0)"
class="text-xl text-[#ADADAD] hover:text-[#5A3DAA]"
>
<Icon icon="material-symbols:more-vert"/>
<IconifyIconOffline icon="more-vert"/>
</a>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="handleOpenUpdate(proxy)">
<Icon
icon="material-symbols:edit"
<IconifyIconOffline
icon="edit"
class="primary-text text-[14px]"
/>
<span class="ml-1">修 改</span>
</el-dropdown-item>
<el-dropdown-item @click="handleDeleteProxy(proxy)">
<Icon
icon="material-symbols:delete-rounded"
<IconifyIconOffline
icon="delete-rounded"
class="text-red-500 text-[14px]"
/>
<span class="ml-1">删 除</span>
@ -411,7 +412,7 @@ onUnmounted(() => {
controls-position="right"
/>
<el-button class="ml-[10px]" plain type="primary" @click="handleOpenLocalPortDialog">
<Icon class="cursor-pointer mr-2" icon="material-symbols:bring-your-own-ip-rounded"/>
<IconifyIconOffline class="cursor-pointer mr-2" icon="bring-your-own-ip-rounded"/>
本地端口
</el-button>
</el-form-item>
@ -457,16 +458,13 @@ onUnmounted(() => {
placeholder="github.com"
v-model="editForm.customDomains[di]"
/>
<!-- <div class="domain-input-button !bg-[#67c23a]">-->
<!-- <Icon icon="material-symbols:add" />-->
<!-- </div>-->
<el-button
class="ml-[10px]"
type="primary"
plain
@click="handleAddDomain"
>
<Icon icon="material-symbols:add"/>
<IconifyIconOffline icon="add"/>
</el-button>
<el-button
type="danger"
@ -474,11 +472,8 @@ onUnmounted(() => {
@click="handleDeleteDomain(di)"
:disabled="editForm.customDomains.length === 1"
>
<Icon icon="material-symbols:delete-rounded"/>
<IconifyIconOffline icon="delete-rounded"/>
</el-button>
<!-- <div class="domain-input-button !bg-[#d3585b]">-->
<!-- <Icon icon="material-symbols:delete-rounded" />-->
<!-- </div>-->
</el-form-item>
</el-col>
</template>
@ -486,10 +481,12 @@ onUnmounted(() => {
<el-form-item>
<div class="w-full flex justify-end">
<el-button @click="edit.visible = false">
<Icon class="cursor-pointer mr-2" icon="material-symbols:cancel-presentation"/>
关 闭</el-button>
<iconify-icon-offline class="cursor-pointer mr-2" icon="cancel-presentation"/>
关 闭
</el-button>
<el-button plain type="primary" @click="handleSubmit"
><Icon class="cursor-pointer mr-2" icon="material-symbols:save-rounded"/>
>
<IconifyIconOffline class="cursor-pointer mr-2" icon="save-rounded"/>
保 存
</el-button>
</div>
@ -512,16 +509,13 @@ onUnmounted(() => {
<el-table-column label="操作" :width="80">
<template #default="scope">
<el-button type="text" @click="handleSelectLocalPort(scope.row.port)">
<Icon class="cursor-pointer mr-2" icon="material-symbols:gesture-select"/>
<IconifyIconOffline class="cursor-pointer mr-2" icon="gesture-select"/>
选择
</el-button>
</template>
</el-table-column>
</el-table>
<!-- <div class="h-[400px] overflow-y-scroll">-->
<!-- -->
<!-- </div>-->
</el-dialog>
</div>
</template>