mfx/tkPage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导航页尺寸优化

Browse Source
This commit is contained in:
没复习
2026-01-20 19:54:12 +08:00
parent 1adb587edb
commit 1576cadf8c
4 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Sidebar.vue
View File

@@ -9,9 +9,9 @@
</h1> </h1>
</div> </div>
<nav class="flex-1 px-4 space-y-2"> <nav class="flex-1 px-4 space-y-4">
<a <a
class="flex items-center gap-3 px-4 py-3 rounded-lg font-medium cursor-pointer transition-colors" class="flex items-center gap-3 px-4 py-4 rounded-lg font-medium cursor-pointer transition-colors"
:class="activeIndex == 1 ? 'sidebar-active text-primary' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800'" :class="activeIndex == 1 ? 'sidebar-active text-primary' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800'"
@click="updateActiveIndex(1)" @click="updateActiveIndex(1)"
> >
@@ -20,7 +20,7 @@
</a> </a>
<a <a
class="flex items-center gap-3 px-4 py-3 rounded-lg font-medium cursor-pointer transition-colors" class="flex items-center gap-3 px-4 py-4 rounded-lg font-medium cursor-pointer transition-colors"
:class="activeIndex == 2 ? 'sidebar-active text-primary' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800'" :class="activeIndex == 2 ? 'sidebar-active text-primary' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800'"
@click="updateActiveIndex(2)" @click="updateActiveIndex(2)"
> >

4
src/views/hosts/hostsList.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="bg-white dark:bg-slate-50 rounded-3xl shadow-2xl flex flex-col overflow-hidden h-full"> <div class="bg-white dark:bg-slate-50 rounded-3xl shadow-2xl flex flex-col overflow-hidden h-full">
<!-- Header --> <!-- Header -->
<header class="px-8 py-6 border-b border-slate-100 dark:border-slate-200/60 bg-white/50 backdrop-blur-md"> <header class="px-8 py-6 border-b border-slate-100 dark:border-slate-200/60 bg-white">
<div class="flex flex-wrap items-center gap-4"> <div class="flex flex-wrap items-center gap-4">
<div class="relative flex-1 min-w-[200px]"> <div class="relative flex-1 min-w-[200px]">
<select <select
@@ -191,7 +191,7 @@
</div> </div>
<!-- Footer / Pagination --> <!-- Footer / Pagination -->
<footer class="px-8 py-6 border-t border-slate-100 dark:border-slate-200/60 bg-white/50 backdrop-blur-md flex flex-wrap items-center justify-between gap-4"> <footer class="px-8 py-6 border-t border-slate-100 dark:border-slate-200/60 bg-white flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="relative"> <div class="relative">
<select <select

12
src/views/hosts/workbenches.vue
View File

@@ -1,21 +1,21 @@
<template> <template>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-4"> <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-4">
<!-- Stat Cards --> <!-- Stat Cards -->
<div class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800"> <div class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="text-sm font-medium text-slate-500">{{ $t('workbenches.totalnumber') }}</span> <span class="text-sm font-medium text-slate-500">{{ $t('workbenches.totalnumber') }}</span>
<span class="material-icons-round text-primary/40">analytics</span> <span class="material-icons-round text-primary/40">analytics</span>
</div> </div>
<div class="text-3xl font-bold text-slate-900 dark:text-white">{{ hostData.totalCount }}</div> <div class="text-3xl font-bold text-slate-900 dark:text-white">{{ hostData.totalCount }}</div>
</div> </div>
<div class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800"> <div class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="text-sm font-medium text-slate-500">{{ $t('workbenches.createHost') }}</span> <span class="text-sm font-medium text-slate-500">{{ $t('workbenches.createHost') }}</span>
<span class="material-icons-round text-secondary/40">person_add</span> <span class="material-icons-round text-secondary/40">person_add</span>
</div> </div>
<div class="text-3xl font-bold text-slate-900 dark:text-white">{{ hostData.validAnchorsCount }}</div> <div class="text-3xl font-bold text-slate-900 dark:text-white">{{ hostData.validAnchorsCount }}</div>
</div> </div>
<div class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800"> <div class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="text-sm font-medium text-slate-500">{{ $t('workbenches.query') }} / {{ $t('workbenches.invite') <span class="text-sm font-medium text-slate-500">{{ $t('workbenches.query') }} / {{ $t('workbenches.invite')
}}</span> }}</span>
@@ -25,7 +25,7 @@
class="text-slate-300 text-lg mx-2">/</span> {{ hostData.canInvitationCount }}</div> class="text-slate-300 text-lg mx-2">/</span> {{ hostData.canInvitationCount }}</div>
</div> </div>
<div <div
class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800 flex flex-col justify-center"> class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800 flex flex-col justify-center">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block mb-1">{{ <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block mb-1">{{
@@ -42,7 +42,7 @@
<!-- Guild Accounts --> <!-- Guild Accounts -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div v-for="(item, index) in 2" :key="index" class="glass-card p-5 rounded-xl shadow-premium"> <div v-for="(item, index) in 2" :key="index" class="bg-white border border-slate-100 p-5 rounded-xl shadow-sm">
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full" :class="tkData[index].code == 1 ? 'bg-emerald-500' : 'bg-red-500'"></span> <span class="w-2 h-2 rounded-full" :class="tkData[index].code == 1 ? 'bg-emerald-500' : 'bg-red-500'"></span>
@@ -80,7 +80,7 @@
<!-- Configuration Panel --> <!-- Configuration Panel -->
<div <div
class="bg-white dark:bg-slate-900 rounded-2xl shadow-premium border border-slate-100 dark:border-slate-800 overflow-hidden"> class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 overflow-hidden">
<div class="p-6 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center"> <div class="p-6 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-8 h-8 bg-slate-100 dark:bg-slate-800 rounded-lg flex items-center justify-center"> <div class="w-8 h-8 bg-slate-100 dark:bg-slate-800 rounded-lg flex items-center justify-center">

2
src/views/nav.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="nav-container bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-200 subtle-grid shadow-2xl overflow-hidden" :style="containerStyle"> <div class="nav-container bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-200 shadow-2xl overflow-hidden" :style="containerStyle">
<div class="flex h-full overflow-hidden"> <div class="flex h-full overflow-hidden">
<Sidebar class="flex-none h-full" @activeIndex="activeIndexFn" /> <Sidebar class="flex-none h-full" @activeIndex="activeIndexFn" />
<main class="flex-1 overflow-y-auto p-4 relative flex flex-col h-full bg-[#f3f5f9]"> <main class="flex-1 overflow-y-auto p-4 relative flex flex-col h-full bg-[#f3f5f9]">