Solar/Swarm
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Setup drive dashboard

Browse Source
This commit is contained in:
LittleSheep
2025-07-26 22:01:17 +08:00
parent b0683576b9
commit f40d1dc1b2
18 changed files with 561 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
DysonNetwork.Drive/Client/src/layouts/dashboard.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<n-layout has-sider class="h-full">
<n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="240" show-trigger>
<n-menu
:collapsed-width="64"
:collapsed-icon-size="22"
:options="menuOptions"
:value="route.name as string"
@update:value="updateMenuSelect"
/>
</n-layout-sider>
<n-layout>
<router-view />
</n-layout>
</n-layout>
</template>
<script setup lang="ts">
import { DataUsageRound } from '@vicons/material'
import { NIcon, NLayout, NLayoutSider, NMenu, type MenuOption } from 'naive-ui'
import { h, type Component } from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
function renderIcon(icon: Component) {
return () => h(NIcon, null, { default: () => h(icon) })
}
const menuOptions: MenuOption[] = [
{
label: 'Usage',
key: 'dashboardUsage',
icon: renderIcon(DataUsageRound),
},
]
function updateMenuSelect(key: string) {
router.push({ name: key })
}
</script>

17
DysonNetwork.Drive/Client/src/layouts/default.vue
View File

@@ -15,7 +15,7 @@
</n-dropdown>
</div>
</n-layout-header>
<n-layout-content embedded content-style="padding: 24px;">
<n-layout-content embedded>
<router-view />
</n-layout-content>
</n-layout>
@@ -28,12 +28,15 @@ import {
LogInOutlined,
PersonAddAlt1Outlined,
PersonOutlineRound,
DataUsageRound,
} from '@vicons/material'
import { useUserStore } from '@/stores/user'
import { useRoute, useRouter } from 'vue-router'
import { useServicesStore } from '@/stores/services'
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const hideUserMenu = computed(() => {
@@ -60,6 +63,14 @@ const guestOptions = [
]
const userOptions = computed(() => [
{
label: 'Usage',
key: 'dashboardUsage',
icon: () =>
h(NIcon, null, {
default: () => h(DataUsageRound),
}),
},
{
label: 'Profile',
key: 'profile',
@@ -67,7 +78,7 @@ const userOptions = computed(() => [
h(NIcon, null, {
default: () => h(PersonOutlineRound),
}),
}
},
])
const servicesStore = useServicesStore()
@@ -83,6 +94,8 @@ function handleGuestMenuSelect(key: string) {
function handleUserMenuSelect(key: string) {
if (key === 'profile') {
window.open(servicesStore.getSerivceUrl('DysonNetwork.Pass', 'accounts/me')!, '_blank')
} else {
router.push({ name: key })
}
}
</script>

38
DysonNetwork.Drive/Client/src/router/index.ts
View File

@@ -1,5 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useServicesStore } from '@/stores/services'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -7,26 +8,53 @@ const router = createRouter({
{
path: '/',
name: 'index',
component: () => import('../views/index.vue')
component: () => import('../views/index.vue'),
},
{
path: '/files/:fileId',
name: 'files',
component: () => import('../views/files.vue'),
}
]
},
{
path: '/dashboard',
name: 'dashboard',
component: () => import('../layouts/dashboard.vue'),
meta: { requiresAuth: true },
children: [
{
path: 'usage',
name: 'dashboardUsage',
component: () => import('../views/dashboard/usage.vue'),
meta: { requiresAuth: true },
},
],
},
{
path: '/:notFound(.*)',
name: 'errorNotFound',
component: () => import('../views/not-found.vue'),
},
],
})
router.beforeEach(async (to, from, next) => {
const userStore = useUserStore()
const servicesStore = useServicesStore()
// Initialize user state if not already initialized
if (!userStore.user && localStorage.getItem('authToken')) {
await userStore.initialize()
await userStore.fetchUser()
}
if (to.matched.some((record) => record.meta.requiresAuth) && !userStore.isAuthenticated) {
next({ name: 'login', query: { redirect: to.fullPath } })
window.open(
servicesStore.getSerivceUrl(
'DysonNetwork.Pass',
'login?redirect=' + encodeURIComponent(window.location.href),
)!,
'_blank',
)
next('/')
} else {
next()
}

14
DysonNetwork.Drive/Client/src/stores/user.ts
View File

@@ -11,7 +11,8 @@ export const useUserStore = defineStore('user', () => {
const isAuthenticated = computed(() => !!user.value)
// Actions
async function fetchUser() {
async function fetchUser(reload = true) {
if (!reload && user.value) return
isLoading.value = true
error.value = null
try {
@@ -21,9 +22,6 @@ export const useUserStore = defineStore('user', () => {
if (!response.ok) {
// If the token is invalid, clear it and the user state
if (response.status === 401) {
logout()
}
throw new Error('Failed to fetch user information.')
}
@@ -36,13 +34,6 @@ export const useUserStore = defineStore('user', () => {
}
}
function logout() {
user.value = null
localStorage.removeItem('authToken')
// Optionally, redirect to login page
// router.push('/login')
}
function initialize() {
const allowedOrigin = import.meta.env.DEV ? window.location.origin : 'https://id.solian.app'
window.addEventListener('message', (event) => {
@@ -69,7 +60,6 @@ export const useUserStore = defineStore('user', () => {
error,
isAuthenticated,
fetchUser,
logout,
initialize,
}
})

55
DysonNetwork.Drive/Client/src/types/pool.ts
View File

@@ -1,35 +1,36 @@
export interface SnFilePool {
id: string;
name: string;
storage_config: StorageConfig;
billing_config: BillingConfig;
public_indexable: boolean;
public_usable: boolean;
no_optimization: boolean;
no_metadata: boolean;
allow_encryption: boolean;
allow_anonymous: boolean;
require_privilege: number;
account_id: null;
resource_identifier: string;
created_at: Date;
updated_at: Date;
deleted_at: null;
id: string
name: string
description: string
storage_config: StorageConfig
billing_config: BillingConfig
public_indexable: boolean
public_usable: boolean
no_optimization: boolean
no_metadata: boolean
allow_encryption: boolean
allow_anonymous: boolean
require_privilege: number
account_id: null
resource_identifier: string
created_at: Date
updated_at: Date
deleted_at: null
}
export interface BillingConfig {
cost_multiplier: number;
cost_multiplier: number
}
export interface StorageConfig {
region: string;
bucket: string;
endpoint: string;
secret_id: string;
secret_key: string;
enable_signed: boolean;
enable_ssl: boolean;
image_proxy: null;
access_proxy: null;
expiration: null;
region: string
bucket: string
endpoint: string
secret_id: string
secret_key: string
enable_signed: boolean
enable_ssl: boolean
image_proxy: null
access_proxy: null
expiration: null
}

9
DysonNetwork.Drive/Client/src/views/dashboard/usage.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<section class="h-full"></section>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores/user';
const userStore = useUserStore()
</script>

10
DysonNetwork.Drive/Client/src/views/files.vue
View File

@@ -143,6 +143,7 @@ import { useRoute } from 'vue-router'
import { computed, onMounted, ref } from 'vue'
import { downloadAndDecryptFile } from './secure'
import { formatBytes } from './format'
import hljs from 'highlight.js/lib/core'
import json from 'highlight.js/lib/languages/json'
@@ -200,13 +201,4 @@ function downloadFile() {
window.open(fileSource.value, '_blank')
}
}
function formatBytes(bytes: number, decimals = 2): string {
if (bytes === 0) return '0 Bytes'
const k = 1024
const dm = decimals < 0 ? 0 : decimals
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
}
</script>

8
DysonNetwork.Drive/Client/src/views/format.ts Normal file
View File

@@ -0,0 +1,8 @@
export function formatBytes(bytes: number, decimals = 2): string {
if (bytes === 0) return '0 Bytes'
const k = 1024
const dm = decimals < 0 ? 0 : decimals
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
}

59
DysonNetwork.Drive/Client/src/views/index.vue
View File

@@ -49,7 +49,9 @@
type="password"
class="mb-2"
/>
<p class="pl-1 text-xs opacity-75 mt-[-4px]">Only available for Stellar Program and certian file pool.</p>
<p class="pl-1 text-xs opacity-75 mt-[-4px]">
Only available for Stellar Program and certian file pool.
</p>
</div>
</n-card>
</n-collapse-transition>
@@ -110,11 +112,15 @@ import {
type SelectOption,
type SelectRenderTag,
type UploadFileInfo,
useMessage,
NDivider,
NTooltip,
} from 'naive-ui'
import { computed, h, onMounted, ref } from 'vue'
import { CloudUploadRound } from '@vicons/material'
import { useUserStore } from '@/stores/user'
import type { SnFilePool } from '@/types/pool'
import { formatBytes } from './format'
import * as tus from 'tus-js-client'
@@ -160,6 +166,42 @@ function renderPoolSelectLabel(option: SelectOption & SnFilePool) {
},
[
h('div', null, [option.name as string]),
option.description &&
h(
'div',
{
style: {
fontSize: '0.875rem',
opacity: '0.75',
},
},
option.description,
),
h(
'div',
{
style: {
display: 'flex',
marginBottom: '4px',
fontSize: '0.75rem',
opacity: '0.75',
},
},
[
policy.max_file_size && h('span', `Max ${formatBytes(policy.max_file_size)}`),
policy.accept_types &&
h(
NTooltip,
{},
{
trigger: () => h('span', `Accept limited types`),
default: () => h('span', policy.accept_types.join(', ')),
},
),
].flatMap((el, idx, arr) =>
idx < arr.length - 1 ? [el, h(NDivider, { vertical: true })] : [el],
),
),
h(
'div',
{
@@ -228,6 +270,8 @@ const currentFilePool = computed(() => {
return pools.value?.find((pool) => pool.id === filePool.value) ?? null
})
const messageDisplay = useMessage()
function customRequest({
file,
data,
@@ -246,13 +290,21 @@ function customRequest({
retryDelays: [0, 3000, 5000, 10000, 20000],
metadata: {
filename: file.name,
filetype: file.type ?? 'application/octet-stream',
'content-type': file.type ?? 'application/octet-stream',
},
headers: {
...requestHeaders,
...headers,
},
onError: function (error) {
if (error instanceof tus.DetailedError) {
const failedBody = error.originalResponse?.getBody()
if (failedBody != null)
messageDisplay.error(`Upload failed: ${failedBody}`, {
duration: 10000,
closable: true,
})
}
console.error('[DRIVE] Upload failed:', error)
onError()
},
@@ -290,8 +342,7 @@ function createThumbnailUrl(
function customDownload(file: UploadFileInfo) {
const { url, name } = file
if (!url)
return
if (!url) return
window.open(url.replace('/api', ''), '_blank')
}

16
DysonNetwork.Drive/Client/src/views/not-found.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<section class="h-full flex items-center justify-center">
<n-result status="404" title="404" description="Page not found">
<template #footer>
<n-button @click="router.push('/')">Go to Home</n-button>
</template>
</n-result>
</section>
</template>
<script lang="ts" setup>
import { NResult, NButton } from 'naive-ui'
import { useRouter } from 'vue-router';
const router = useRouter()
</script>