Autoflow
/
autoflow-web-console
23
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

다크 모드에서 화이트로 배경 변경

Browse Source
main
jschoi 7 months ago
parent b1abc8f68f
commit 7d8fb8b8af
16 changed files with 96 additions and 84 deletions
Show Stats Download Patch File Download Diff File

34
src/components/common/LayoutComponent.vue
Unescape View File

@ -211,7 +211,7 @@ onBeforeUnmount(() => {
<div
variant="text"
size="large"
class="brand-btn text-h5 text-primary"
class="brand-btn text-h5"
@click="goMain"
aria-label="Home"
>
@ -220,8 +220,6 @@ onBeforeUnmount(() => {
<!-- 중앙: 메뉴 그룹 (Settings 전/후 분기) -->
<div class="center-nav d-none d-md-flex" v-if="!hideAllMenus">
<!-- 관리자 메뉴: showAdminTabs 조건으로 표시 -->
<!-- 관리자 메뉴바: 기본 메뉴바와 1:1 동일 구조 -->
<template v-if="showAdminTabs">
<template v-for="(m, i) in adminMenus" :key="'am_' + i">
<!-- 드롭다운 있는 항목 -->
@ -308,12 +306,7 @@ onBeforeUnmount(() => {
(m.path && m.path.startsWith('/run'))
"
>
<v-card
rounded="lg"
elevation="12"
color="surface"
class="px-2 py-2"
>
<v-card rounded="lg" elevation="12" class="px-2 py-2">
<v-list density="comfortable" lines="one" class="min-w-48">
<template v-for="(d, j) in m.depth" :key="'run_' + j">
<v-hover v-slot="{ isHovering, props: liProps }">
@ -322,14 +315,13 @@ onBeforeUnmount(() => {
:title="d.title"
:to="d.path"
:active="isLinkActive(d.path)"
color="primary"
:rounded="'lg'"
:variant="
isHovering || isLinkActive(d.path)
? 'tonal'
: 'text'
"
class="mx-2 my-1 text-white"
class="mx-2 my-1"
/>
</v-hover>
</template>
@ -337,7 +329,6 @@ onBeforeUnmount(() => {
</v-card>
</template>
<!-- 기본 하위메뉴 (Run 이외는 기존 그대로) -->
<template v-else>
<v-list density="compact" class="min-w-48 subnav-list">
<v-list-item
@ -345,7 +336,7 @@ onBeforeUnmount(() => {
:key="'d_' + j"
:title="d.title"
:to="d.path"
class="submenu-item text-white"
class="submenu-item"
:class="{ 'submenu-active': isLinkActive(d.path) }"
/>
</v-list>
@ -373,8 +364,7 @@ onBeforeUnmount(() => {
<template #activator="{ props }" v-if="!hideAllMenus">
<v-btn
icon
color="primary"
class="mr-2"
class="mr-2 text-white"
v-bind="props"
@click="toggleAdmin"
aria-label="Settings"
@ -388,8 +378,7 @@ onBeforeUnmount(() => {
<template #activator="{ props }">
<v-btn
icon
color="primary"
class="mr-2"
class="mr-2 text-white"
@click="goSelect"
v-bind="props"
aria-label="Project"
@ -400,15 +389,17 @@ onBeforeUnmount(() => {
</v-tooltip>
<div class="d-none d-md-flex flex-column align-end userbox">
<div class="font-weight-black">{{ username || "GUEST" }}</div>
<div class="text-subtitle-2">
<div class="font-weight-black text-white">
{{ username || "GUEST" }}
</div>
<div class="text-subtitle-2 text-white">
{{ projectName || "No Project Selected" }}
</div>
</div>
<v-menu location="bottom end">
<template #activator="{ props }">
<v-btn icon color="primary" v-bind="props" class="mr-1">
<v-btn icon v-bind="props" class="mr-1 text-white">
<v-icon>mdi-arrow-down-drop-circle-outline</v-icon>
</v-btn>
</template>
@ -441,7 +432,7 @@ onBeforeUnmount(() => {
<style scoped>
.topbar {
background: rgba(18, 18, 18, 0.7) !important;
background: #121212 !important;
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
@ -451,6 +442,7 @@ onBeforeUnmount(() => {
font-weight: 800;
letter-spacing: 0.08em;
padding: 0 14px;
color: #fff;
}
/* 중앙 고정 네비게이션 */

2
src/components/templates/Datasets/ListComponent.vue
Unescape View File

@ -484,7 +484,7 @@ watch(
</v-sheet>
<!-- 목록 -->
<v-card class="rounded-lg pa-8">
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12">
<v-sheet>
<v-table

2
src/components/templates/datagroup/ListComponent.vue
Unescape View File

@ -462,7 +462,7 @@ onMounted(fetchList);
</v-sheet>
<!-- Table -->
<v-card class="rounded-lg pa-8">
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12">
<v-sheet>
<v-table

2
src/components/templates/deployment/ListComponent.vue
Unescape View File

@ -424,7 +424,7 @@ const getSelectedAllData = () => {
</v-sheet>
</v-sheet>
<v-card class="rounded-lg pa-8">
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12">
<v-sheet>
<v-table

82
src/components/templates/home/ListComponent.vue
Unescape View File

@ -679,10 +679,15 @@ watch(showKubeflowDetails, async () => {
<v-row>
<!-- Recent Run -->
<v-col cols="12" md="6">
<v-card class="pa-0" style="min-height: 450px; max-height: 450px">
<v-card
class="pa-0"
:elevation="0"
color="grey-lighten-4"
style="min-height: 450px; max-height: 450px"
>
<div
class="d-flex align-center justify-space-between w-100"
style="padding: 16px; border-bottom: 1px solid #ccc"
style="padding: 16px"
>
<h3 class="text-subtitle-1 font-weight-bold mb-0">Recent Run</h3>
@ -696,7 +701,7 @@ watch(showKubeflowDetails, async () => {
Go to Executions
</v-btn>
</div>
<v-divider />
<div style="overflow-y: auto; max-height: 380px; padding: 8px 16px">
<v-skeleton-loader
v-if="runsLoading"
@ -705,7 +710,7 @@ watch(showKubeflowDetails, async () => {
v-for="i in 4"
:key="i"
/>
<v-list v-else density="comfortable">
<v-list v-else density="comfortable" class="bg-transparent">
<v-list-item
v-for="(runRow, idx) in recentRuns"
:key="idx"
@ -761,10 +766,15 @@ watch(showKubeflowDetails, async () => {
<!-- Workflows -->
<v-col cols="12" md="6">
<v-card class="pa-0" style="min-height: 450px; max-height: 450px">
<v-card
class="pa-0"
:elevation="0"
color="grey-lighten-4"
style="min-height: 450px; max-height: 450px"
>
<div
class="d-flex align-center justify-space-between w-100"
style="padding: 16px; border-bottom: 1px solid #ccc"
style="padding: 16px"
>
<h3 class="text-subtitle-1 font-weight-bold mb-0">
Recently Registered Workflow
@ -779,9 +789,9 @@ watch(showKubeflowDetails, async () => {
Go to Workflows
</v-btn>
</div>
<v-divider />
<div style="overflow-y: auto; max-height: 380px; padding: 8px 16px">
<v-list density="comfortable" nav>
<v-list density="comfortable" class="bg-transparent" nav>
<v-list-item
v-for="wfRow in workflows
.slice(0, 10)
@ -793,7 +803,7 @@ watch(showKubeflowDetails, async () => {
<span class="text-body-2 font-weight-medium">{{
wfRow.name
}}</span>
<span class="text-caption text-grey-lighten-1">{{
<span class="text-caption text-body-2">{{
fmtYmdHm(wfRow.modDt)
}}</span>
</div>
@ -818,8 +828,13 @@ watch(showKubeflowDetails, async () => {
<!-- Kubeflow -->
<v-col cols="12" md="6">
<v-card class="pa-0" style="min-height: 450px; max-height: 450px">
<div style="padding: 16px; border-bottom: 1px solid #3a3a3a">
<v-card
class="pa-0"
:elevation="0"
color="grey-lighten-4"
style="min-height: 450px; max-height: 450px"
>
<div style="padding: 16px">
<div class="d-flex align-center justify-space-between w-100">
<h3 class="text-subtitle-1 font-weight-bold mb-0">
Run Status Overview
@ -860,7 +875,7 @@ watch(showKubeflowDetails, async () => {
</v-btn>
</div>
</div>
<v-divider />
<div style="height: 380px">
<!-- Only Chart -->
<div
@ -963,28 +978,30 @@ watch(showKubeflowDetails, async () => {
<!-- Dataset (fixed height, inner scroll, compact) -->
<v-col cols="12" md="6">
<v-card class="pa-0 d-flex flex-column" :height="450">
<!-- Header (고정 높이) -->
<div
class="d-flex align-center justify-space-between w-100 pa-4 flex-shrink-0"
>
<h3 class="text-subtitle-1 font-weight-bold mb-0">
DataGroup Update Activity
</h3>
<v-btn
variant="text"
class="text-caption font-weight-bold"
append-icon="mdi-arrow-right"
style="text-transform: none"
@click="goDatasets"
>
Go to DataGroup
</v-btn>
<v-card
class="pa-0"
:elevation="0"
color="grey-lighten-4"
style="min-height: 450px; max-height: 450px"
>
<div style="padding: 16px">
<div class="d-flex align-center justify-space-between w-100">
<h3 class="text-subtitle-1 font-weight-bold mb-0">
DataGroup Update Activity
</h3>
<v-btn
variant="text"
class="text-caption font-weight-bold"
append-icon="mdi-arrow-right"
style="text-transform: none"
@click="goDatasets"
>
Go to DataGroup
</v-btn>
</div>
</div>
<v-divider />
<!-- Body (남은 영역만 스크롤) -->
<v-sheet class="pa-3 flex-grow-1 overflow-auto">
<v-sheet class="pa-3 flex-grow-1 overflow-auto bg-transparent">
<v-skeleton-loader
v-if="dsLoading"
type="list-item-two-line"
@ -997,6 +1014,7 @@ watch(showKubeflowDetails, async () => {
<v-expansion-panel
v-for="g in groupSummaries"
:key="g.id"
:elevation="3"
@group:selected="
async (e: any) => {
if (e.value) await loadDatasetsForGroup(g.id, g.name);

2
src/components/templates/projects/ListComponent.vue
Unescape View File

@ -588,7 +588,7 @@ onMounted(async () => {
</v-sheet>
<!-- 테이블 -->
<v-card class="rounded-lg pa-8">
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12">
<v-sheet>
<v-table

2
src/components/templates/run/executions/ListComponent.vue
Unescape View File

@ -632,7 +632,7 @@ onMounted(() => {
</v-sheet>
<!-- 목록 -->
<v-card class="rounded-lg pa-8">
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12">
<v-sheet>
<v-table

2
src/components/templates/run/experiment/ListComponent.vue
Unescape View File

@ -390,7 +390,7 @@ onMounted(() => {
</v-sheet>
<!-- 목록 -->
<v-card class="rounded-lg pa-8">
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12">
<v-sheet>
<v-table

2
src/components/templates/stepconfig/ListComponent.vue
Unescape View File

@ -407,7 +407,7 @@ onMounted(() => {
</v-sheet>
<!-- 테이블 -->
<v-card class="rounded-lg pa-8">
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12">
<v-sheet>
<v-table

2
src/components/templates/trainingscript/ListComponent.vue
Unescape View File

@ -463,7 +463,7 @@ watch(
</v-sheet>
<!-- 목록 -->
<v-card class="rounded-lg pa-8">
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12">
<v-sheet>
<v-table

2
src/components/templates/trainingscriptgroup/ListComponent.vue
Unescape View File

@ -462,7 +462,7 @@ onMounted(fetchList);
</v-sheet>
<!-- Table -->
<v-card class="rounded-lg pa-8">
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12">
<v-sheet>
<v-table

2
src/components/templates/users/ListComponent.vue
Unescape View File

@ -484,7 +484,7 @@ onMounted(async () => {
</v-sheet>
<!-- 테이블 -->
<v-card class="rounded-lg pa-8">
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12">
<v-sheet>
<v-table

2
src/components/templates/workflow/ListComponent.vue
Unescape View File

@ -432,7 +432,7 @@ onMounted(() => {
</v-sheet>
</v-sheet>
<v-card class="rounded-lg pa-8">
<v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12">
<v-sheet>
<v-table

8
src/pages/LoginView.vue
Unescape View File

@ -89,7 +89,7 @@ const signIn = () => {
<v-text-field
v-model="data.username"
:readonly="data.loading"
class="mb-2"
class="mb-2 text-white"
variant="outlined"
color="secondary"
placeholder="아이디를 입력해주세요."
@ -98,10 +98,10 @@ const signIn = () => {
<v-text-field
v-model="data.password"
:readonly="data.loading"
type="password"
type="password "
variant="outlined"
color="secondary"
class="mb-2"
class="mb-2 text-white"
placeholder="비밀번호를 입력해주세요."
></v-text-field>
@ -118,7 +118,7 @@ const signIn = () => {
</v-btn>
</v-form>
<div class="mt-4 text-center">
<div class="mt-4 text-center text-white">
<span>계정이 없으십니까?</span>
<router-link
to="/signup"

10
src/pages/SignupView.vue
Unescape View File

@ -96,7 +96,7 @@ const signUp = () => {
<v-text-field
v-model="data.username"
:readonly="data.loading"
class="mb-2"
class="mb-2 text-white"
variant="outlined"
color="secondary"
placeholder="아이디를 입력해주세요."
@ -104,7 +104,7 @@ const signUp = () => {
<v-text-field
v-model="data.email"
:readonly="data.loading"
class="mb-2"
class="mb-2 text-white"
variant="outlined"
color="secondary"
placeholder="이메일을 입력해주세요."
@ -115,7 +115,7 @@ const signUp = () => {
:rules="[(v) => !!v || '역할을 선택해주세요.']"
variant="outlined"
placeholder="Role"
class="mb-2"
class="mb-2 text-white"
/>
<v-text-field
v-model="data.password"
@ -123,7 +123,7 @@ const signUp = () => {
type="password"
variant="outlined"
color="secondary"
class="mb-2"
class="mb-2 text-white"
placeholder="비밀번호를 입력해주세요."
></v-text-field>
@ -140,7 +140,7 @@ const signUp = () => {
</v-btn>
</v-form>
<div class="mt-4 text-center">
<div class="mt-4 text-center text-white">
<span>계정이 있으십니까?</span>
<router-link
to="/login"

24
src/plugins/vuetify.js
Unescape View File

@ -1,19 +1,21 @@
/**
* plugins/vuetify.js
*
* Framework documentation: https://vuetifyjs.com`
*/
// Styles
import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";
// Composables
import { createVuetify } from "vuetify";
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
theme: {
defaultTheme: "dark",
defaultTheme: "light",
themes: {
light: {
colors: {
background: "#ffffff", // ⬅️ 페이지 배경을 흰색으로
surface: "#ffffff", // 기본 표면도 흰색
card: "#f7f8fa", // 카드만 아주 연한 회색(원하면 #ffffff로)
border: "#e7e9ee",
text: "#2b2f33",
muted: "#6b7280",
},
},
},
},
});

Write Preview
Loading…
Cancel
Save