export interface TableSettingProvider {
modelRightClickMenu: RightClickMenu
modelColumns: SettingOptions
+ size: ComponentSize
+ rayTableUUID: string
}
export interface ExportExcelProvider {
diff --git a/src/icons/adjustment.svg b/src/icons/adjustment.svg
new file mode 100644
index 00000000..bdca828e
--- /dev/null
+++ b/src/icons/adjustment.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 25250b4c..9ff51e65 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -1,12 +1,13 @@
import './index.scss'
-import { NLayout, NLayoutContent } from 'naive-ui'
+import { NLayout, NLayoutContent, NSpin } from 'naive-ui'
import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
import LayoutMenu from './components/Menu/index'
import SiderBar from './components/SiderBar/index'
import MenuTag from './components/MenuTag/index'
import { useSetting } from '@/store'
+import { addClass, removeClass } from '@/utils/element'
const Layout = defineComponent({
name: 'Layout',
@@ -38,19 +39,42 @@ const Layout = defineComponent({
layout: { copyright },
} = __APP_CFG__
+ watch(
+ () => themeValue.value,
+ (newData) => {
+ /**
+ *
+ * 初始化时根据当前主题色进行初始化 body 的 class 属性
+ *
+ * 根据 themeValue 进行初始化
+ */
+ const body = document.body
+ const darkClassName = 'ray-template--dark'
+ const lightClassName = 'ray-template--light'
+
+ newData
+ ? removeClass(body, lightClassName)
+ : removeClass(body, darkClassName)
+
+ addClass(body, newData ? darkClassName : lightClassName)
+ },
+ {
+ immediate: true,
+ },
+ )
+
return {
windowHeight,
modelReloadRoute,
modelMenuTagSwitch,
cssVarsRef,
copyright,
- themeValue,
}
},
render() {
return (
diff --git a/src/router/index.ts b/src/router/index.ts
index ba653965..ad174956 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -22,6 +22,7 @@ export const setupRouter = (app: App) => {
/**
*
* @remark 路由切换启用顶部加载条
+ * @remark 路由切换启用加载动画
*/
export const setupRouterLoadingBar = () => {
router.beforeEach(() => {
diff --git a/src/spin/index.tsx b/src/spin/index.tsx
index 8e3a0b64..ac34432f 100644
--- a/src/spin/index.tsx
+++ b/src/spin/index.tsx
@@ -40,7 +40,7 @@ const GlobalSpin = defineComponent({
>
{{
default: () => this.$slots.default?.(),
- description: () => this.$slots.description?.(),
+ description: () => 'loading...',
}}
)
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
new file mode 100644
index 00000000..dced985b
--- /dev/null
+++ b/src/styles/theme.scss
@@ -0,0 +1,11 @@
+/**
+ * 明暗主题变量
+ *
+ * 全局自定义组件使用变量
+ */
+
+$iconSpace: 5px;
+$width: 140px;
+$activedColor: #2d8cf0;
+$hoverLightBackgroundColor: rgba(45, 140, 240, 0.1);
+$hoverDarkBackgroundColor: rgba(45, 140, 240, 0.15);
diff --git a/src/types/cfg.ts b/src/types/cfg.ts
index 214c74c2..480cde4c 100644
--- a/src/types/cfg.ts
+++ b/src/types/cfg.ts
@@ -27,6 +27,7 @@ export interface Config {
title: HTMLTitle
copyright?: LayoutCopyright
sideBarLogo?: LayoutSideBarLogo
+ mixinCSS?: string
}
export type Recordable = Record
diff --git a/src/utils/element.ts b/src/utils/element.ts
index 18548faa..c63bccc6 100644
--- a/src/utils/element.ts
+++ b/src/utils/element.ts
@@ -87,16 +87,26 @@ export const addClass = (element: HTMLElement, className: string) => {
* @param className 所需删除className，可: 'xxx xxx' | 'xxx'格式删除
*
* @remark 删除元素className(可: 'xxx xxx' | 'xxx'格式删除)
+ * @remark 如果输入值为 removeAllClass 则会删除该元素所有 class name
*/
-export const removeClass = (element: HTMLElement, className: string) => {
+export const removeClass = (
+ element: HTMLElement,
+ className: string | 'removeAllClass',
+) => {
if (element) {
- const classes = className.trim().split(' ')
+ if (className === 'removeAllClass') {
+ const classList = element.classList
- classes.forEach((item) => {
- if (item) {
- element.classList.remove(item)
- }
- })
+ classList.forEach((curr) => classList.remove(curr))
+ } else {
+ const classes = className.trim().split(' ')
+
+ classes.forEach((item) => {
+ if (item) {
+ element.classList.remove(item)
+ }
+ })
+ }
}
}
diff --git a/src/views/table/index.tsx b/src/views/table/index.tsx
index 1794fe93..44629220 100644
--- a/src/views/table/index.tsx
+++ b/src/views/table/index.tsx
@@ -180,6 +180,7 @@ const TableView = defineComponent({
点击导出按钮即可导出 excel 表格，默认以列为表头输出
点击打印按钮即可打印该表格
右键菜单
+ 全屏表格
(
<>
- 搜索
+ 搜索
重置
),
@@ -240,17 +241,6 @@ const TableView = defineComponent({
tableFooter: () => '表格的底部内容区域，有时候你可能会用上',
}}
-
)
},
diff --git a/vite-plugin/index.ts b/vite-plugin/index.ts
index ce50701b..1b57c8ba 100644
--- a/vite-plugin/index.ts
+++ b/vite-plugin/index.ts
@@ -156,3 +156,26 @@ export const useViteBuildPlugin = (options?: BuildOptions) => {
return Object.assign({}, defaultPlugin, options)
}
+
+/**
+ *
+ * @param options 预处理 css 文件
+ * @returns additionalData string
+ *
+ * @remark 辅助处理需要全局注入的 css 样式文件, 会在构建期间完成注入
+ */
+export const mixinCSSPlugin = (options?: string[]) => {
+ const defaultOptions = []
+
+ if (Array.isArray(options)) {
+ defaultOptions.push(...options)
+ }
+
+ const mixisString = defaultOptions.reduce((pre, curr) => {
+ const temp = `@import "${curr}";`
+
+ return (pre += temp)
+ }, '')
+
+ return mixisString as string
+}
diff --git a/vite.config.ts b/vite.config.ts
index 755f54d6..b6be6536 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -23,7 +23,8 @@ import config from './cfg'
import pkg from './package.json'
const { dependencies, devDependencies, name, version } = pkg
-const { server, buildOptions, alias, title, copyright, sideBarLogo } = config
+const { server, buildOptions, alias, title, copyright, sideBarLogo, mixinCSS } =
+ config
/**
*
@@ -140,8 +141,7 @@ export default defineConfig(async ({ mode }) => {
css: {
preprocessorOptions: {
scss: {
- additionalData:
- '@import "./src/styles/mixins.scss"; @import "./src/styles/setting.scss";', // 全局 `mixin`
+ additionalData: mixinCSS,
},
},
modules: {