开发体验优化

packages/web/auto-imports.d.ts

@@ -11,7 +11,6 @@ declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
-  const ElNotification: typeof import('element-plus/es')['ElNotification']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']

packages/web/components.d.ts

@@ -11,57 +11,32 @@ declare module '@vue/runtime-core' {
     Copy: typeof import('./src/components/Copy.vue')['default']
     Counter: typeof import('./src/components/Counter.vue')['default']
     Diff: typeof import('./src/components/FunctionEditor/diff.vue')['default']
-    ElAlert: typeof import('element-plus/es')['ElAlert']
-    ElAside: typeof import('element-plus/es')['ElAside']
-    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
-    ElCheckTag: typeof import('element-plus/es')['ElCheckTag']
-    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
-    ElDevider: typeof import('element-plus/es')['ElDevider']
     ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDivider: typeof import('element-plus/es')['ElDivider']
-    ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElDvider: typeof import('element-plus/es')['ElDvider']
-    ElFooter: typeof import('element-plus/es')['ElFooter']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMain: typeof import('element-plus/es')['ElMain']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     Footer: typeof import('./src/components/Footer.vue')['default']
     FunctionEditor: typeof import('./src/components/FunctionEditor/index.vue')['default']
-    Loading: typeof import('element-plus/es')['ElLoadingDirective']
     Param: typeof import('./src/components/JsonEditor/param.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

packages/web/src/layout/components/Multitab/View.vue

@@ -1,17 +1,16 @@
+<script lang="ts" setup>
+import { useTabStore } from '~/store'
+
+const tabStore = useTabStore()
+</script>
+
 <template>
   <div>
     <router-view v-if="tabStore.visitedViews.length > 0" v-slot="{ Component, route }">
-      <keep-alive>
-          <component :is="Component" :key="route.path" />
+      <keep-alive :include="tabStore.cachedViews">
+        <component :is="Component" :key="route.path" />
       </keep-alive>
     </router-view>
-    <slot v-else></slot>
+    <slot v-else />
   </div>
 </template>
-
-<script lang="ts" setup>
-import { useTabStore } from '~/store'
-
-const tabStore = useTabStore()
-
-</script>

packages/web/src/main.ts

@@ -15,7 +15,12 @@ import '~/router/permission'
 const pinia = createPinia()
 
 const app = createApp(App)
-app.use(pinia).use(i18n).use(router).mount('#app')
+app.use(pinia).use(i18n).use(router)
+
+if (process.env.NODE_ENV === 'development')
+  import('./styles/element/theme.dev.scss').then(() => app.mount('#app'))
+else
+  app.mount('#app')
 
 app.config.globalProperties.$filters = {
   formatTime(time: string | Date, cFormat = 'YYYY-MM-DD HH:mm:ss') {

packages/web/src/styles/element/theme.dev.scss

@@ -0,0 +1,3 @@
+/* theme.dev */
+@use "./theme.scss" as *;
+@use "element-plus/theme-chalk/src/index.scss" as *;

packages/web/vite.config.ts

@@ -8,13 +8,13 @@ import AutoImport from 'unplugin-auto-import/vite'
 import Unocss from 'unocss/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import vueI18n from '@intlify/vite-plugin-vue-i18n'
-// import Inspect from 'vite-plugin-inspect'
+import Inspect from 'vite-plugin-inspect'
 import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 import SFCName from './scripts/vite-plugin-vue-sfc-name'
 
 import extendRoute from './scripts/extend-route'
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   resolve: {
     alias: {
       '~/': `${path.resolve(__dirname, 'src')}/`,
@@ -32,7 +32,7 @@ export default defineConfig({
 
   plugins: [
     // debug plugins only
-    // Inspect(),
+    mode === 'development' && Inspect(),
     SFCName(),
     Vue({
       reactivityTransform: true,
@@ -67,13 +67,13 @@ export default defineConfig({
     AutoImport({
       imports: ['vue', 'vue/macros', 'vue-router', '@vueuse/core', 'vue-i18n'],
       dts: true,
-      resolvers: [ElementPlusResolver()],
+      resolvers: [ElementPlusResolver({ importStyle: mode === 'development' ? false : 'sass' })],
     }),
 
     // https://github.com/antfu/vite-plugin-components
     Components({
       dts: true,
-      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
+      resolvers: [ElementPlusResolver({ importStyle: mode === 'development' ? false : 'sass' })],
     }),
 
     // https://github.com/antfu/unocss
@@ -104,11 +104,4 @@ export default defineConfig({
       },
     },
   },
-
-  build: {
-    rollupOptions: {
-      external: [],
-    },
-  },
-
-})
+}))