deotalandAi/apps/frontend/src/main.js

116 lines
3.0 KiB
JavaScript

import { createApp } from 'vue'
import App from './App.vue'
// Styles
import 'normalize.css'
import './styles/tailwind.css' // Tailwind CSS 样式
// import './styles/base.css'
// import './styles/theme.css'
// Enable Element Plus dark theme CSS variables when html has the `dark` class
import 'element-plus/theme-chalk/dark/css-vars.css'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
// Plugins
import ElementPlus from 'element-plus'
import { createI18n } from 'vue-i18n'
import i18nConfig from './locales/index.js'
import router from './router'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// import VueLazyload from 'vue3-lazyload'
import 'element-plus/dist/index.css'
import 'nprogress/nprogress.css'
import {ElMessage,ElLoading } from 'element-plus'
import dtUI from '@deotaland/ui'
import '@deotaland/ui/style.css'
import { environmentUtils } from '@deotaland/utils';
const app = createApp(App)
window.setElMessage = (options={})=>{
ElMessage[options.type || 'info'](options.message || '请求失败')
}
// environmentUtils.detectEnvironment().then((env)=>{
// console.log('当前环境:', env)
// })
app.use(dtUI);
// window.setElLoading = ()=>{
// const loading = ElLoading.service({
// lock: true,
// text: 'Loading',
// background: 'rgba(0, 0, 0, 0.4)',
// })
// return loading
// // loading.close()
// }
// Pinia
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
// i18n
const i18n = createI18n(i18nConfig)
app.use(i18n)
// Router & UI
app.use(router)
app.use(ElementPlus)
// Lazyload
// app.use(VueLazyload, {
// loading: '/logo.png',
// error: '/logo.png',
// })
// Configure Element Plus ElMessage component position via individual message calls
// Using default ElMessage configuration - no global config needed
// Custom scrollbar styles for theme support
const scrollbarStyle = document.createElement('style')
scrollbarStyle.textContent = `
/* Light theme scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* Dark theme scrollbar */
html.dark ::-webkit-scrollbar-track {
background: #2d2d2d;
}
html.dark ::-webkit-scrollbar-thumb {
background: #5a5a5a;
}
html.dark ::-webkit-scrollbar-thumb:hover {
background: #6d6d6d;
}
/* Firefox scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
html.dark * {
scrollbar-color: #5a5a5a #2d2d2d;
}
`
// Element Plus ElMessage uses default styles - no custom overrides needed
document.head.appendChild(scrollbarStyle)
// Import message-fix styles last to ensure project dark overrides don't break
// Element Plus ElMessage appearance.
// import './styles/element-fix.css'
app.mount('#app')