mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 17:24:10 +00:00
88adfe0e50
Define 13 semantic color tokens (surface, text, border, hover) with light/dark values in themes.css. Register with Tailwind via @theme inline. Migrate all 335 Vue files from hardcoded gray/white classes to semantic tokens. Add theme toggle (sun/moon/system) in user avatar dropdown. Replace @tailwindcss/forms with custom form reset using theme vars. Add status badge and alert tokens for dark mode. Theme-aware chart grid/labels, skeleton placeholders, and editor. Inline script in <head> prevents flash of wrong theme on load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
96 lines
2.4 KiB
Vue
96 lines
2.4 KiB
Vue
<template>
|
|
<BasePage>
|
|
<BasePageHeader :title="$t('settings.setting', 1)" class="mb-6">
|
|
<BaseBreadcrumb>
|
|
<BaseBreadcrumbItem :title="$t('general.home')" to="/admin/dashboard" />
|
|
<BaseBreadcrumbItem
|
|
:title="$t('settings.setting', 2)"
|
|
to="/admin/settings/company-info"
|
|
active
|
|
/>
|
|
</BaseBreadcrumb>
|
|
</BasePageHeader>
|
|
|
|
<div class="w-full mb-6 select-wrapper xl:hidden">
|
|
<BaseMultiselect
|
|
v-model="currentSetting"
|
|
:options="dropdownMenuItems"
|
|
:can-deselect="false"
|
|
value-prop="title"
|
|
track-by="title"
|
|
label="title"
|
|
object
|
|
@update:modelValue="navigateToSetting"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex gap-8">
|
|
<div class="hidden mt-1 xl:block min-w-[240px]">
|
|
<BaseList>
|
|
<BaseListItem
|
|
v-for="(menuItem, index) in globalStore.settingMenu"
|
|
:key="index"
|
|
:title="$t(menuItem.title)"
|
|
:to="menuItem.link"
|
|
:active="hasActiveUrl(menuItem.link)"
|
|
:index="index"
|
|
class="py-3"
|
|
>
|
|
<template #icon>
|
|
<BaseIcon :name="menuItem.icon"></BaseIcon>
|
|
</template>
|
|
</BaseListItem>
|
|
</BaseList>
|
|
</div>
|
|
|
|
<div class="w-full overflow-hidden">
|
|
<RouterView />
|
|
</div>
|
|
</div>
|
|
</BasePage>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, watchEffect, computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useGlobalStore } from '@/scripts/admin/stores/global'
|
|
import BaseList from '@/scripts/components/list/BaseList.vue'
|
|
import BaseListItem from '@/scripts/components/list/BaseListItem.vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
const { t } = useI18n()
|
|
|
|
let currentSetting = ref({})
|
|
|
|
const globalStore = useGlobalStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const dropdownMenuItems = computed(() => {
|
|
return globalStore.settingMenu.map((item) => {
|
|
return Object.assign({}, item, {
|
|
title: t(item.title),
|
|
})
|
|
})
|
|
})
|
|
|
|
watchEffect(() => {
|
|
if (route.path === '/admin/settings') {
|
|
router.push('/admin/settings/company-info')
|
|
}
|
|
|
|
const item = dropdownMenuItems.value.find((item) => {
|
|
return item.link === route.path
|
|
})
|
|
|
|
currentSetting.value = item
|
|
})
|
|
|
|
function hasActiveUrl(url) {
|
|
return route.path.indexOf(url) > -1
|
|
}
|
|
|
|
function navigateToSetting(setting) {
|
|
return router.push(setting.link)
|
|
}
|
|
</script>
|