style(更改主题背景颜色): 🎨 修改侧边栏默认主题颜色，添加多行展开查询配置

web/src/settings.ts

@@ -1,43 +1,56 @@
 // 引入fast-crud
-import { FastCrud } from "@fast-crud/fast-crud";
+import { FastCrud } from '@fast-crud/fast-crud';
-import "@fast-crud/fast-crud/dist/style.css";
+import '@fast-crud/fast-crud/dist/style.css';
-import { setLogger } from '@fast-crud/fast-crud'
+import { setLogger } from '@fast-crud/fast-crud';
 // element
-import ui from "@fast-crud/ui-element";
+import ui from '@fast-crud/ui-element';
-import { request } from "/@/utils/service.ts";
+import { request } from '/@/utils/service.ts';
 
 export default {
-    async install(app: any, options: any) {
+	async install(app: any, options: any) {
-        // 先安装ui
+		// 先安装ui
-        app.use(ui);
+		app.use(ui);
-        // 然后安装FastCrud
+		// 然后安装FastCrud
-        app.use(FastCrud, {
+		app.use(FastCrud, {
-            //i18n, //i18n配置，可选，默认使用中文，具体用法请看demo里的 src/i18n/index.js 文件
+			//i18n, //i18n配置，可选，默认使用中文，具体用法请看demo里的 src/i18n/index.js 文件
-            // 此处配置公共的dictRequest（字典请求）
+			// 此处配置公共的dictRequest（字典请求）
-            async dictRequest({ dict }: any) {
+			async dictRequest({ dict }: any) {
-                return await request({ url: dict.url }); //根据dict的url，异步返回一个字典数组
+				return await request({ url: dict.url }); //根据dict的url，异步返回一个字典数组
-            },
+			},
-            //公共crud配置
+			//公共crud配置
-            commonOptions() {
+			commonOptions() {
-                return {
+				return {
-                    request: {
+					request: {
-                        //接口请求配置
+						//接口请求配置
-                        //你项目后台接口大概率与fast-crud所需要的返回结构不一致，所以需要配置此项
+						//你项目后台接口大概率与fast-crud所需要的返回结构不一致，所以需要配置此项
-                        //请参考文档http://fast-crud.docmirror.cn/api/crud-options/request.html
+						//请参考文档http://fast-crud.docmirror.cn/api/crud-options/request.html
-                        transformQuery: ({ page, form, sort }: any) => {
+						transformQuery: ({ page, form, sort }: any) => {
-                            //转换为你pageRequest所需要的请求参数结构
+							//转换为你pageRequest所需要的请求参数结构
-                            return { page: page.currentPage, limit: page.pageSize, ...form };
+							return { page: page.currentPage, limit: page.pageSize, ...form };
-                        },
+						},
-                        transformRes: ({ res }: any) => {
+						transformRes: ({ res }: any) => {
-                            //将pageRequest的返回数据，转换为fast-crud所需要的格式
+							//将pageRequest的返回数据，转换为fast-crud所需要的格式
-                            //return {records,currentPage,pageSize,total};
+							//return {records,currentPage,pageSize,total};
-                            return { records: res.data, currentPage: res.page, pageSize: res.limit, total: res.total }
+							return { records: res.data, currentPage: res.page, pageSize: res.limit, total: res.total };
-                        }
+						},
-                    },
+					},
-                };
+					/* search: {
-            },
+						layout: 'multi-line',
-        });
+						collapse: true,
-        setLogger({ level: 'error' })
+						col: {
-    }
+							span: 4,
-}
+						},
-
+						options: {
+							labelCol: {
+								style: {
+									width: '100px',
+								},
+							},
+						},
+					}, */
+				};
+			},
+		});
+		setLogger({ level: 'error' });
+	},
+};

web/src/stores/themeConfig.ts

@@ -36,7 +36,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 菜单设置
 			 */
 			// 默认菜单导航背景颜色
-			menuBar: '#545c64',
+			menuBar: '#334054',
 			// 默认菜单导航字体颜色
 			menuBarColor: '#eaeaea',
 			// 默认菜单高亮背景色
@@ -48,7 +48,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 分栏设置
 			 */
 			// 默认分栏菜单背景颜色
-			columnsMenuBar: '#545c64',
+			columnsMenuBar: '#334054',
 			// 默认分栏菜单字体颜色
 			columnsMenuBarColor: '#e6e6e6',
 			// 是否开启分栏菜单背景颜色渐变