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

feat: add new fullscreen dialog UI, dialog manager and system self-check functionality

Browse Source 
- Implement FSDialog component for system-wide dialogs
- Add dialog manager utility for centralized dialog control
- Introduce system self-check API and handle results
- Show welcome dialog for new superusers
- Display self-check errors on home page
- Refactor proxy form handling in InstanceDetail
This commit is contained in:
NanamiAdmin
2026-05-07 22:52:15 +08:00
parent 49d9f4f389
commit 2541a19884
7 changed files with 278 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.vue
View File

@@ -1,24 +1,38 @@
<template>
<div :class="{ 'dark-mode': isDarkMode }">
<router-view />
<FSDialog ref="fsDialog" />
</div>
</template>
<script>
import { provide } from 'vue';
import { provide, ref, onMounted } from 'vue';
import { useTheme } from './utils/toggleThemes';
import FSDialog from './components/FSDialog.vue';
import { registerDialog } from './utils/dialogManager';
export default {
name: 'App',
components: {
FSDialog
},
setup() {
const { isDarkMode, toggleTheme } = useTheme();
const fsDialog = ref(null);
provide('isDarkMode', isDarkMode);
provide('toggleTheme', toggleTheme);
onMounted(() => {
if (fsDialog.value) {
registerDialog(fsDialog.value);
}
});
return {
isDarkMode,
toggleTheme
toggleTheme,
fsDialog
};
}
};

1
src/api/index.js
View File

@@ -36,6 +36,7 @@ export const systemApi = {
getStatus: () => api.get('/system/getStatus'),
getSoftwareInfo: () => api.get('/system/getSoftwareInfo'),
getSystemInfo: () => api.get('/system/info'),
selfCheck: () => api.get('/system/selfCheck'),
getSettings: (key) => {
const url = key ? `/system/settings/get?key=${key}` : '/system/settings/get';
return api.get(url);

178
src/components/FSDialog.vue Normal file
View File

@@ -0,0 +1,178 @@
<template>
<teleport to="body">
<transition name="fs-dialog-fade">
<div v-if="visible" class="fs-dialog-overlay">
<div class="fs-dialog">
<div class="fs-dialog-header">
<h2>{{ title }}</h2>
</div>
<div class="fs-dialog-body">
<p>{{ content }}</p>
</div>
<div class="fs-dialog-footer">
<button v-if="type === 1" @click="handleYes" class="fs-btn fs-btn-yes">
Yes
</button>
<button v-if="type === 1" @click="handleNo" class="fs-btn fs-btn-no">
No
</button>
<button v-else @click="handleConfirm" class="fs-btn fs-btn-confirm">
Confirm
</button>
</div>
</div>
</div>
</transition>
</teleport>
</template>
<script>
export default {
name: 'FSDialog',
data() {
return {
visible: false,
type: 0,
title: '',
content: '',
resolve: null
};
},
methods: {
show(type, title, content) {
this.type = type;
this.title = title;
this.content = content;
this.visible = true;
document.body.style.overflow = 'hidden';
return new Promise((resolve) => {
this.resolve = resolve;
});
},
handleYes() {
this.close();
if (this.resolve) {
this.resolve(1);
}
},
handleNo() {
this.close();
if (this.resolve) {
this.resolve(0);
}
},
handleConfirm() {
this.close();
if (this.resolve) {
this.resolve(0);
}
},
close() {
this.visible = false;
document.body.style.overflow = '';
}
}
};
</script>
<style scoped>
.fs-dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.fs-dialog {
background: var(--card-bg, #ffffff);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 600px;
padding: 32px;
color: var(--text-color, #333333);
}
.fs-dialog-header {
margin-bottom: 24px;
}
.fs-dialog-header h2 {
font-size: 24px;
font-weight: 600;
margin: 0;
color: var(--text-color, #333333);
}
.fs-dialog-body {
margin-bottom: 32px;
}
.fs-dialog-body p {
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary, #666666);
white-space: pre-wrap;
word-break: break-word;
}
.fs-dialog-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.fs-btn {
padding: 10px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.fs-btn-yes {
background-color: var(--primary-color, #1890ff);
color: white;
}
.fs-btn-yes:hover {
background-color: var(--primary-hover, #40a9ff);
}
.fs-btn-no {
background-color: var(--surface-light, #f5f5f5);
color: var(--text-color, #333333);
}
.fs-btn-no:hover {
background-color: var(--border-color, #d9d9d9);
}
.fs-btn-confirm {
background-color: var(--primary-color, #1890ff);
color: white;
}
.fs-btn-confirm:hover {
background-color: var(--primary-hover, #40a9ff);
}
.fs-dialog-fade-enter-active,
.fs-dialog-fade-leave-active {
transition: opacity 0.3s;
}
.fs-dialog-fade-enter-from,
.fs-dialog-fade-leave-to {
opacity: 0;
}
</style>

13
src/utils/dialogManager.js Normal file
View File

@@ -0,0 +1,13 @@
let dialogInstance = null;
export function registerDialog(instance) {
dialogInstance = instance;
}
export function showFSDialog(type, title, content) {
if (!dialogInstance) {
console.error('FSDialog not registered');
return Promise.resolve(0);
}
return dialogInstance.show(type, title, content);
}

34
src/views/Home.vue
View File

@@ -9,9 +9,12 @@
</template>
<script>
import { ref } from 'vue';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import TopBar from '../components/TopBar.vue';
import SideBar from '../components/SideBar.vue';
import { showFSDialog } from '../utils/dialogManager.js';
import { showNotification } from '../utils/functions.js';
export default {
name: 'Home',
@@ -20,12 +23,41 @@ export default {
SideBar
},
setup() {
const router = useRouter();
const searchQuery = ref('');
const handleSearch = (query) => {
searchQuery.value = query;
};
onMounted(async () => {
const showWelcomeDialog = sessionStorage.getItem('showWelcomeDialog');
const showSelfCheckError = sessionStorage.getItem('showSelfCheckError');
const selfCheckErrorMessage = sessionStorage.getItem('selfCheckErrorMessage');
sessionStorage.removeItem('showWelcomeDialog');
sessionStorage.removeItem('showSelfCheckError');
sessionStorage.removeItem('selfCheckErrorMessage');
if (showWelcomeDialog === 'true') {
await showFSDialog(
0,
'Welcome to Super-frpc!',
'Seems you just set this system up, now please finish some basic settings to make this system usable and reliable.'
);
router.push('/settings');
return;
}
if (showSelfCheckError === 'true') {
showNotification(
`System self-check failed: ${selfCheckErrorMessage || 'Unknown error'}`,
'error'
);
router.push('/settings');
}
});
return {
searchQuery,
handleSearch

26
src/views/InstanceDetail.vue
View File

@@ -603,20 +603,28 @@ export default {
const handleProxySubmit = async () => {
loading.value = true;
try {
const proxyInfo = {
oldName: isEditProxy.value ? originalProxyName.value : undefined,
newName: formData.value.name,
type: formData.value.type,
localIP: formData.value.localIP,
localPort: formData.value.localPort,
remotePort: formData.value.remotePort
};
let proxyInfo;
let result;
if (isEditProxy.value) {
proxyInfo = {
oldName: originalProxyName.value,
newName: formData.value.name,
type: formData.value.type,
localIP: formData.value.localIP,
localPort: formData.value.localPort,
remotePort: formData.value.remotePort
};
result = await instanceApi.modifyProxy(instanceID.value, proxyInfo);
showNotification(result.message || 'Proxy updated successfully', 'success');
} else {
proxyInfo = {
name: formData.value.name,
type: formData.value.type,
localIP: formData.value.localIP,
localPort: formData.value.localPort,
remotePort: formData.value.remotePort
};
result = await instanceApi.createProxy(instanceID.value, proxyInfo);
showNotification(result.message || 'Proxy created successfully', 'success');
}

24
src/views/Login.vue
View File

@@ -56,7 +56,7 @@
<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { authApi } from '../api/index.js';
import { authApi, systemApi } from '../api/index.js';
import { showNotification, setCookie } from '../utils/functions.js';
export default {
@@ -96,13 +96,13 @@ export default {
formData.value.username,
formData.value.passwd
);
handleLoginSuccess(loginResult);
await handleLoginSuccess(loginResult, true);
} else {
const result = await authApi.login(
formData.value.username,
formData.value.passwd
);
handleLoginSuccess(result);
await handleLoginSuccess(result, false);
}
} catch (error) {
showNotification(error.message || 'Login failed', 'error');
@@ -111,12 +111,28 @@ export default {
}
};
const handleLoginSuccess = (result) => {
const handleLoginSuccess = async (result, isJustRegistered) => {
setCookie('token', result.data.token);
setCookie('user-id', result.data.userID);
setCookie('username', result.data.username);
setCookie('user-type', result.data.type);
showNotification('Login successful', 'success');
if (isJustRegistered && result.data.type === 'superuser') {
sessionStorage.setItem('showWelcomeDialog', 'true');
}
try {
const selfCheckResult = await systemApi.selfCheck();
if (!selfCheckResult.success || selfCheckResult.error) {
sessionStorage.setItem('showSelfCheckError', 'true');
sessionStorage.setItem('selfCheckErrorMessage', selfCheckResult.message || selfCheckResult.error || 'Unknown error');
}
} catch (error) {
sessionStorage.setItem('showSelfCheckError', 'true');
sessionStorage.setItem('selfCheckErrorMessage', error.message || 'Unknown error');
}
router.push('/');
};