feat: 修改主题色

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 {}

frontend/components.d.ts

@@ -4,30 +4,78 @@
 
 declare module 'vue' {
     export interface GlobalComponents {
-    403: typeof import('./src/components/error-message/403.vue')['default']
+        403: typeof import('./src/components/error-message/403.vue')['default'];
-    404: typeof import('./src/components/error-message/404.vue')['default']
+        404: typeof import('./src/components/error-message/404.vue')['default'];
-    500: typeof import('./src/components/error-message/500.vue')['default']
+        500: typeof import('./src/components/error-message/500.vue')['default'];
-    AppLayout: typeof import('./src/components/app-layout/index.vue')['default']
+        AppLayout: typeof import('./src/components/app-layout/index.vue')['default'];
-    AppStatus: typeof import('./src/components/app-status/index.vue')['default']
+        AppStatus: typeof import('./src/components/app-status/index.vue')['default'];
-    BackButton: typeof import('./src/components/back-button/index.vue')['default']
+        BackButton: typeof import('./src/components/back-button/index.vue')['default'];
-    BreadCrumbs: typeof import('./src/components/bread-crumbs/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']
+        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'];
-    Codemirror: typeof import('./src/components/codemirror-dialog/codemirror.vue')['default']
+        ComplexTable: typeof import('./src/components/complex-table/index.vue')['default'];
-    ComplexTable: typeof import('./src/components/complex-table/index.vue')['default']
+        ConfirmDialog: typeof import('./src/components/confirm-dialog/index.vue')['default'];
-    ConfirmDialog: typeof import('./src/components/confirm-dialog/index.vue')['default']
+        ContainerLog: typeof import('./src/components/container-log/index.vue')['default'];
-    ContainerLog: typeof import('./src/components/container-log/index.vue')['default']
+        DrawerHeader: typeof import('./src/components/drawer-header/index.vue')['default'];
-    DrawerHeader: typeof import('./src/components/drawer-header/index.vue')['default']
+        ElAlert: typeof import('element-plus/es')['ElAlert'];
-    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+        ElAside: typeof import('element-plus/es')['ElAside'];
-    FileList: typeof import('./src/components/file-list/index.vue')['default']
+        ElButton: typeof import('element-plus/es')['ElButton'];
-    FileRole: typeof import('./src/components/file-role/index.vue')['default']
+        ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup'];
-    Footer: typeof import('./src/components/app-layout/footer/index.vue')['default']
+        ElCard: typeof import('element-plus/es')['ElCard'];
-    Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default']
+        ElCheckbox: typeof import('element-plus/es')['ElCheckbox'];
-    Menu: typeof import('./src/components/app-layout/menu/index.vue')['default']
+        ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'];
-    Status: typeof import('./src/components/status/index.vue')['default']
+        ElCol: typeof import('element-plus/es')['ElCol'];
-    SubItem: typeof import('./src/components/app-layout/menu/components/sub-item.vue')['default']
+        ElCollapse: typeof import('element-plus/es')['ElCollapse'];
-    SvgIcon: typeof import('./src/components/svg-icon/svg-icon.vue')['default']
+        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 {};

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",
+            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-0.0.1-beta.19.tgz",
+            "resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-1.0.4.tgz",
-            "integrity": "sha512-IhDC7aZDb8MAqxLm293gg2FWk5dJ8J6UjeZk2/2MrLaHhi5HvFGB2N+8Yu3cWBKCffh2WWTwqr2H+0hPjbuV1Q==",
+            "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",
+            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-0.0.1-beta.19.tgz",
+            "resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-1.0.4.tgz",
-            "integrity": "sha512-IhDC7aZDb8MAqxLm293gg2FWk5dJ8J6UjeZk2/2MrLaHhi5HvFGB2N+8Yu3cWBKCffh2WWTwqr2H+0hPjbuV1Q==",
+            "integrity": "sha512-TDalWK0mfVIiaLLLsdUUukJVDklDPYVGVqAZPUu++tSpfJ9Q35isVVsk4U26G/Lxh00wVM0gTIZiQ3sSOGbGqA==",
             "requires": {
                 "@element-plus/icons-vue": "^1.1.4",
                 "element-plus": "^2.2.14",

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",

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-config-provider :locale="i18nLocale" :button="config" :size="assemblySize">
+    <el-config-provider :locale="i18nLocale" :button="config" size="default">
         <router-view v-if="isRouterAlive"></router-view>
     </el-config-provider>
 </template>
@@ -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);
 

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 VMdPreview from '@kangc/v-md-editor/lib/preview';
-import 'fit2cloud-ui-plus/src/styles/index.scss';
+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 ElementPlus from 'element-plus';
-import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
+import Fit2CloudPlus from 'fit2cloud-ui-plus';
-import '@kangc/v-md-editor/lib/theme/style/github.css';
+import * as Icons from '@element-plus/icons-vue';
-import hljs from 'highlight.js';
 
 VMdPreview.use(githubTheme, {
     hljs,

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: [

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;
         },

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;
 }
 

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;

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%);
 }

frontend/src/styles/index.scss

@@ -0,0 +1,2 @@
+@use './theme.scss';
+@use 'fit2cloud-ui-plus/src/styles/index.scss';

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;
 }

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 *;

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,
+        ),
+    )
+);

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]',