diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts new file mode 100644 index 000000000..5e073f1fc --- /dev/null +++ b/frontend/auto-imports.d.ts @@ -0,0 +1,6 @@ +// Generated by 'unplugin-auto-import' +// We suggest you to commit this file into source control +declare global { + +} +export {} diff --git a/frontend/components.d.ts b/frontend/components.d.ts index 310ef8268..7b9c653f2 100644 --- a/frontend/components.d.ts +++ b/frontend/components.d.ts @@ -3,31 +3,79 @@ // Read more: https://github.com/vuejs/vue-next/pull/3399 declare module 'vue' { - export interface GlobalComponents { - 403: typeof import('./src/components/error-message/403.vue')['default'] - 404: typeof import('./src/components/error-message/404.vue')['default'] - 500: typeof import('./src/components/error-message/500.vue')['default'] - AppLayout: typeof import('./src/components/app-layout/index.vue')['default'] - AppStatus: typeof import('./src/components/app-status/index.vue')['default'] - BackButton: typeof import('./src/components/back-button/index.vue')['default'] - BreadCrumbs: typeof import('./src/components/bread-crumbs/index.vue')['default'] - BreadCrumbsItem: typeof import('./src/components/bread-crumbs/bread-crumbs-item.vue')['default'] - CardWithHeader: typeof import('./src/components/card-with-header/index.vue')['default'] - Codemirror: typeof import('./src/components/codemirror-dialog/codemirror.vue')['default'] - ComplexTable: typeof import('./src/components/complex-table/index.vue')['default'] - ConfirmDialog: typeof import('./src/components/confirm-dialog/index.vue')['default'] - ContainerLog: typeof import('./src/components/container-log/index.vue')['default'] - DrawerHeader: typeof import('./src/components/drawer-header/index.vue')['default'] - ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] - FileList: typeof import('./src/components/file-list/index.vue')['default'] - FileRole: typeof import('./src/components/file-role/index.vue')['default'] - Footer: typeof import('./src/components/app-layout/footer/index.vue')['default'] - Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default'] - Menu: typeof import('./src/components/app-layout/menu/index.vue')['default'] - Status: typeof import('./src/components/status/index.vue')['default'] - SubItem: typeof import('./src/components/app-layout/menu/components/sub-item.vue')['default'] - SvgIcon: typeof import('./src/components/svg-icon/svg-icon.vue')['default'] - } + export interface GlobalComponents { + 403: typeof import('./src/components/error-message/403.vue')['default']; + 404: typeof import('./src/components/error-message/404.vue')['default']; + 500: typeof import('./src/components/error-message/500.vue')['default']; + AppLayout: typeof import('./src/components/app-layout/index.vue')['default']; + AppStatus: typeof import('./src/components/app-status/index.vue')['default']; + BackButton: typeof import('./src/components/back-button/index.vue')['default']; + BreadCrumbs: typeof import('./src/components/bread-crumbs/index.vue')['default']; + BreadCrumbsItem: typeof import('./src/components/bread-crumbs/bread-crumbs-item.vue')['default']; + Codemirror: typeof import('./src/components/codemirror-dialog/codemirror.vue')['default']; + ComplexTable: typeof import('./src/components/complex-table/index.vue')['default']; + ConfirmDialog: typeof import('./src/components/confirm-dialog/index.vue')['default']; + ContainerLog: typeof import('./src/components/container-log/index.vue')['default']; + DrawerHeader: typeof import('./src/components/drawer-header/index.vue')['default']; + ElAlert: typeof import('element-plus/es')['ElAlert']; + ElAside: typeof import('element-plus/es')['ElAside']; + ElButton: typeof import('element-plus/es')['ElButton']; + ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']; + ElCard: typeof import('element-plus/es')['ElCard']; + ElCheckbox: typeof import('element-plus/es')['ElCheckbox']; + ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']; + ElCol: typeof import('element-plus/es')['ElCol']; + ElCollapse: typeof import('element-plus/es')['ElCollapse']; + ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']; + ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']; + ElContainer: typeof import('element-plus/es')['ElContainer']; + ElDatePicker: typeof import('element-plus/es')['ElDatePicker']; + ElDescriptions: typeof import('element-plus/es')['ElDescriptions']; + ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']; + ElDialog: typeof import('element-plus/es')['ElDialog']; + ElDivider: typeof import('element-plus/es')['ElDivider']; + ElDrawer: typeof import('element-plus/es')['ElDrawer']; + 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']; + ElImage: typeof import('element-plus/es')['ElImage']; + ElInput: typeof import('element-plus/es')['ElInput']; + ElInputNumber: typeof import('element-plus/es')['ElInputNumber']; + 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']; + ElPageHeader: typeof import('element-plus/es')['ElPageHeader']; + ElPopover: typeof import('element-plus/es')['ElPopover']; + ElProgress: typeof import('element-plus/es')['ElProgress']; + ElRadio: typeof import('element-plus/es')['ElRadio']; + ElRadioButton: typeof import('element-plus/es')['ElRadioButton']; + ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']; + ElRow: typeof import('element-plus/es')['ElRow']; + ElScrollbar: typeof import('element-plus/es')['ElScrollbar']; + ElSelect: typeof import('element-plus/es')['ElSelect']; + 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']; + ElUpload: typeof import('element-plus/es')['ElUpload']; + FileList: typeof import('./src/components/file-list/index.vue')['default']; + FileRole: typeof import('./src/components/file-role/index.vue')['default']; + Footer: typeof import('./src/components/app-layout/footer/index.vue')['default']; + Loading: typeof import('element-plus/es')['ElLoadingDirective']; + Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default']; + Menu: typeof import('./src/components/app-layout/menu/index.vue')['default']; + RouterButton: typeof import('./src/components/router-button/index.vue')['default']; + Status: typeof import('./src/components/status/index.vue')['default']; + SubItem: typeof import('./src/components/app-layout/menu/components/sub-item.vue')['default']; + SvgIcon: typeof import('./src/components/svg-icon/svg-icon.vue')['default']; + } } -export { } +export {}; diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 639ac05cc..757617dcc 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -19,7 +19,7 @@ "echarts": "^5.3.0", "echarts-liquidfill": "^3.1.0", "element-plus": "^2.2.13", - "fit2cloud-ui-plus": "^0.0.1-beta.15", + "fit2cloud-ui-plus": "^1.0.4", "js-base64": "^3.7.2", "js-md5": "^0.7.3", "md-editor-v3": "^2.7.2", @@ -7011,9 +7011,9 @@ } }, "node_modules/fit2cloud-ui-plus": { - "version": "0.0.1-beta.19", - "resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-0.0.1-beta.19.tgz", - "integrity": "sha512-IhDC7aZDb8MAqxLm293gg2FWk5dJ8J6UjeZk2/2MrLaHhi5HvFGB2N+8Yu3cWBKCffh2WWTwqr2H+0hPjbuV1Q==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-1.0.4.tgz", + "integrity": "sha512-TDalWK0mfVIiaLLLsdUUukJVDklDPYVGVqAZPUu++tSpfJ9Q35isVVsk4U26G/Lxh00wVM0gTIZiQ3sSOGbGqA==", "dependencies": { "@element-plus/icons-vue": "^1.1.4", "element-plus": "^2.2.14", @@ -19000,9 +19000,9 @@ } }, "fit2cloud-ui-plus": { - "version": "0.0.1-beta.19", - "resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-0.0.1-beta.19.tgz", - "integrity": "sha512-IhDC7aZDb8MAqxLm293gg2FWk5dJ8J6UjeZk2/2MrLaHhi5HvFGB2N+8Yu3cWBKCffh2WWTwqr2H+0hPjbuV1Q==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-1.0.4.tgz", + "integrity": "sha512-TDalWK0mfVIiaLLLsdUUukJVDklDPYVGVqAZPUu++tSpfJ9Q35isVVsk4U26G/Lxh00wVM0gTIZiQ3sSOGbGqA==", "requires": { "@element-plus/icons-vue": "^1.1.4", "element-plus": "^2.2.14", diff --git a/frontend/package.json b/frontend/package.json index dbb7ec767..6cf387619 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,7 +31,7 @@ "echarts": "^5.3.0", "echarts-liquidfill": "^3.1.0", "element-plus": "^2.2.13", - "fit2cloud-ui-plus": "^0.0.1-beta.15", + "fit2cloud-ui-plus": "^1.0.4", "js-base64": "^3.7.2", "js-md5": "^0.7.3", "md-editor-v3": "^2.7.2", diff --git a/frontend/src/App.vue b/frontend/src/App.vue index b225a8ab7..6060971d9 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,5 +1,5 @@ @@ -23,7 +23,7 @@ const i18nLocale = computed((): any => { return ''; }); -const assemblySize = computed((): string => globalStore.assemblySize); +// const assemblySize = computed((): string => globalStore.assemblySize); let isRouterAlive = ref(true); diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 32aa4b658..43ee68c6d 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -1,27 +1,31 @@ import { createApp } from 'vue'; import App from './App.vue'; +// import 'element-plus/dist/index.css'; +// import 'element-plus/theme-chalk/dark/css-vars.css'; + +import '@/styles/index.scss'; import '@/styles/reset.scss'; import '@/styles/common.scss'; import '@/assets/iconfont/iconfont.css'; import '@/assets/iconfont/iconfont.js'; -import ElementPlus from 'element-plus'; -import Fit2CloudPlus from 'fit2cloud-ui-plus'; -import * as Icons from '@element-plus/icons-vue'; import '@/styles/element-dark.scss'; import '@/styles/element.scss'; -import 'element-plus/dist/index.css'; -import 'element-plus/theme-chalk/dark/css-vars.css'; -import 'fit2cloud-ui-plus/src/styles/index.scss'; + +import VMdPreview from '@kangc/v-md-editor/lib/preview'; +import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'; +import '@kangc/v-md-editor/lib/theme/style/github.css'; +import '@kangc/v-md-editor/lib/style/preview.css'; +import hljs from 'highlight.js'; + import directives from '@/directives/index'; import router from '@/routers/index'; import I18n from '@/lang/index'; import pinia from '@/store/index'; import SvgIcon from './components/svg-icon/svg-icon.vue'; -import VMdPreview from '@kangc/v-md-editor/lib/preview'; -import '@kangc/v-md-editor/lib/style/preview.css'; -import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'; -import '@kangc/v-md-editor/lib/theme/style/github.css'; -import hljs from 'highlight.js'; + +import ElementPlus from 'element-plus'; +import Fit2CloudPlus from 'fit2cloud-ui-plus'; +import * as Icons from '@element-plus/icons-vue'; VMdPreview.use(githubTheme, { hljs, diff --git a/frontend/src/routers/modules/app-store.ts b/frontend/src/routers/modules/app-store.ts index cac4ed3e3..6da4714fa 100644 --- a/frontend/src/routers/modules/app-store.ts +++ b/frontend/src/routers/modules/app-store.ts @@ -4,7 +4,7 @@ const appStoreRouter = { sort: 2, path: '/apps', component: Layout, - redirect: '/apps', + redirect: '/apps/all', meta: { icon: 'p-appstore', title: 'menu.apps', @@ -13,6 +13,7 @@ const appStoreRouter = { { path: '/apps', name: 'App', + redirect: '/apps/all', component: () => import('@/views/app-store/index.vue'), meta: {}, children: [ diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts index 3474c78d1..f7afc70f8 100644 --- a/frontend/src/store/index.ts +++ b/frontend/src/store/index.ts @@ -9,11 +9,10 @@ export const GlobalStore = defineStore({ state: (): GlobalState => ({ isLogin: false, csrfToken: '', - assemblySize: 'default', language: '', themeConfig: { panelName: '', - primary: '#409EFF', + primary: '#005EEB', theme: 'bright', footer: true, }, @@ -26,9 +25,6 @@ export const GlobalStore = defineStore({ setCsrfToken(token: string) { this.csrfToken = token; }, - setAssemblySize(assemblySize: string) { - this.assemblySize = assemblySize; - }, updateLanguage(language: string) { this.language = language; }, diff --git a/frontend/src/store/interface/index.ts b/frontend/src/store/interface/index.ts index ee1daedfe..cdf764998 100644 --- a/frontend/src/store/interface/index.ts +++ b/frontend/src/store/interface/index.ts @@ -11,7 +11,7 @@ export interface GlobalState { isLogin: boolean; csrfToken: string; language: string; // zh | en - assemblySize: string; // small | default | large + // assemblySize: string; // small | default | large themeConfig: ThemeConfigProp; } diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss index ad8deb605..d4daf7991 100644 --- a/frontend/src/styles/element-dark.scss +++ b/frontend/src/styles/element-dark.scss @@ -1,6 +1,4 @@ -/* 自定义 element 暗黑模式样式 */ html.dark { - // * element plus(可以全部注释掉，只是写在这里方便使用😀) // --el-color-primary: #409eff; // --el-color-primary-light-3: #3375b9; // --el-color-primary-light-5: #2a598a; diff --git a/frontend/src/styles/element.scss b/frontend/src/styles/element.scss index 7f75e1948..c76874ceb 100644 --- a/frontend/src/styles/element.scss +++ b/frontend/src/styles/element.scss @@ -1,20 +1,16 @@ -// * 设置 notification 层级在 loading 之上 .el-notification { z-index: 99999 !important; } -// * 设置 message 层级在 loading 之上 .el-message { z-index: 99999 !important; } -// * el-table 样式 .table-box { display: flex; flex-direction: column; height: 100%; - // 表格 search 样式 .table-search { display: flex; margin-bottom: 10px; @@ -32,12 +28,10 @@ width: 400px; } - // 去除时间选择器上下 padding .el-range-editor.el-input__wrapper { padding: 0 10px; } - // el-select 为多选时不换行显示 .el-select__tags { overflow: hidden; white-space: nowrap; @@ -56,7 +50,6 @@ } } - // 表格 header 样式 .table-header { .header-button-lf { float: left; @@ -72,9 +65,7 @@ } } - // el-table 表格样式 .el-table { - // 表格自适应撑满整个页面(设置了 flex:1,页面上表格必须添加 height 属性) flex: 1; .el-table__header th, .el-table__body td { @@ -88,14 +79,12 @@ background: #fafafa; } - // table 中 image 图片样式 .table-image { width: 50px; height: 50px; border-radius: 50%; } - // 解决 el-table 中 header 文字换行问题 .el-table__header .el-table__cell > .cell { white-space: nowrap; } @@ -103,7 +92,6 @@ height: 52px; } - // 解决表格数据为空时样式不居中问题(仅在element-plus中) .el-table__empty-block { position: absolute; top: 50%; @@ -113,18 +101,8 @@ .table-empty { line-height: 30px; } - - // 解决 keep-alive || 浏览器窗口大小变化 导致 el-table 样式错乱问题（2.1.4会出现问题，升级之后问题已解决） - // .el-table__body-wrapper { - // height: calc(100% - 50px) !important; - // } - // .el-table__inner-wrapper, - // .el-scrollbar__wrap { - // height: 100% !important; - // } } - // 表格 pagination 样式 .el-pagination { display: flex; justify-content: flex-end; @@ -132,9 +110,7 @@ } } -// * el-drawer 样式 .el-drawer { - // drawer header 样式 .el-drawer__header { padding: 15px 20px 14px; margin-bottom: 0; @@ -145,7 +121,6 @@ } } - // drawer header 样式 .el-drawer__footer { border-top: 1px solid #ebeef5; } @@ -153,7 +128,6 @@ width: 100%; } - // drawer-form 多列 form-item .drawer-multiColumn-form { display: flex; flex-wrap: wrap; @@ -166,7 +140,6 @@ } } -// * el-dialog 样式 .el-dialog { .el-dialog__header { padding: 15px 20px; @@ -188,5 +161,4 @@ height: 100%; margin-right: 20px; border: 0; - // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); } diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss new file mode 100644 index 000000000..7e93f2ac9 --- /dev/null +++ b/frontend/src/styles/index.scss @@ -0,0 +1,2 @@ +@use './theme.scss'; +@use 'fit2cloud-ui-plus/src/styles/index.scss'; diff --git a/frontend/src/styles/reset.scss b/frontend/src/styles/reset.scss index 33d5b0f39..d0e3fd481 100644 --- a/frontend/src/styles/reset.scss +++ b/frontend/src/styles/reset.scss @@ -1,132 +1,3 @@ -/* Reset style sheet */ - -/* 因为使用富文本编辑器才注释掉，如果你项目没有使用富文本编辑器，可以取消注释 */ -// html, -// body, -// div, -// span, -// applet, -// object, -// iframe, -// h1, -// h2, -// h3, -// h4, -// h5, -// h6, -// p, -// blockquote, -// pre, -// a, -// abbr, -// acronym, -// address, -// big, -// cite, -// code, -// del, -// dfn, -// em, -// img, -// ins, -// kbd, -// q, -// s, -// samp, -// small, -// strike, -// strong, -// sub, -// sup, -// tt, -// var, -// b, -// u, -// i, -// center, -// dl, -// dt, -// dd, -// ol, -// ul, -// li, -// fieldset, -// form, -// label, -// legend, -// table, -// caption, -// tbody, -// tfoot, -// thead, -// tr, -// th, -// td, -// article, -// aside, -// canvas, -// details, -// embed, -// figure, -// figcaption, -// footer, -// header, -// hgroup, -// menu, -// nav, -// output, -// ruby, -// section, -// summary, -// time, -// mark, -// audio, -// video { -// padding: 0; -// margin: 0; -// font: inherit; -// font-size: 100%; -// vertical-align: baseline; -// border: 0; -// } - -// /* HTML5 display-role reset for older browsers */ -// article, -// aside, -// details, -// figcaption, -// figure, -// footer, -// header, -// hgroup, -// menu, -// nav, -// section { -// display: block; -// } -// body { -// padding: 0; -// margin: 0; -// } -// ol, -// ul { -// list-style: none; -// } -// blockquote, -// q { -// quotes: none; -// } -// blockquote::before, -// blockquote::after, -// q::before, -// q::after { -// content: ""; -// content: none; -// } -// table { -// border-spacing: 0; -// border-collapse: collapse; -// } html, body, #app { @@ -136,7 +7,6 @@ body, margin: 0; } -/* 解决 h1 标签在 webkit 内核浏览器中文字大小失效问题 */ :-webkit-any(article, aside, nav, section) h1 { font-size: 2em; } diff --git a/frontend/src/styles/theme.scss b/frontend/src/styles/theme.scss new file mode 100644 index 000000000..082a7d2c0 --- /dev/null +++ b/frontend/src/styles/theme.scss @@ -0,0 +1,10 @@ +// $primary-color: #005eeb; +// @forward 'element-plus/theme-chalk/src/common/var.scss' with ( +// $colors: ( +// 'primary': ( +// 'base': $primary-color, +// ), +// ) +// ); + +// @use 'element-plus/theme-chalk/src/common/var.scss' as *; diff --git a/frontend/src/styles/var.scss b/frontend/src/styles/var.scss index 98d3ff6bb..1bcd46a96 100644 --- a/frontend/src/styles/var.scss +++ b/frontend/src/styles/var.scss @@ -1,2 +1,23 @@ -/* 全局 css 变量 */ $primary-color: #005eeb; +@forward 'element-plus/theme-chalk/src/common/var.scss' with ( + $colors: ( + 'primary': ( + 'base': $primary-color, + ), + 'success': ( + 'base': #67c23a, + ), + 'warning': ( + 'base': #e6a23c, + ), + 'danger': ( + 'base': #f56c6c, + ), + 'error': ( + 'base': #f56c6c, + ), + 'info': ( + 'base': #909399, + ), + ) +); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index e0539eec2..d5c88c83d 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -10,6 +10,10 @@ import vueJsx from '@vitejs/plugin-vue-jsx'; import DefineOptions from 'unplugin-vue-define-options/vite'; import MonacoEditorPlugin from 'vite-plugin-monaco-editor'; +import AutoImport from 'unplugin-auto-import/vite'; +import Components from 'unplugin-vue-components/vite'; +import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; + export default defineConfig(({ mode }: ConfigEnv): UserConfig => { const env = loadEnv(mode, process.cwd()); const viteEnv = wrapperEnv(env); @@ -49,7 +53,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => { MonacoEditorPlugin({}), viteEnv.VITE_REPORT && visualizer(), - // * gzip compress viteEnv.VITE_BUILD_GZIP && viteCompression({ verbose: true, @@ -58,6 +61,20 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => { algorithm: 'gzip', ext: '.gz', }), + AutoImport({ + resolvers: [ + ElementPlusResolver({ + importStyle: 'sass', + }), + ], + }), + Components({ + resolvers: [ + ElementPlusResolver({ + importStyle: 'sass', + }), + ], + }), ], esbuild: { pure: viteEnv.VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : [], @@ -67,7 +84,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => { minify: 'esbuild', rollupOptions: { output: { - // Static resource classification and packaging chunkFileNames: 'assets/js/[name]-[hash].js', entryFileNames: 'assets/js/[name]-[hash].js', assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',