From 10a0cd9ca5194b2eeb12580a9995a81141e608a1 Mon Sep 17 00:00:00 2001 From: jianglinjun Date: Wed, 15 May 2024 20:00:07 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=9B=BD?= =?UTF-8?q?=E9=99=85=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/locale/en/index.ts | 4 ++++ src/locale/zh-CN/index.ts | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts index c1cd3eb14..7471ba33f 100644 --- a/src/locale/en/index.ts +++ b/src/locale/en/index.ts @@ -396,6 +396,10 @@ export default { onlyShowUnread: 'Only show unread', }, }, + customSetting: { + theme: 'Custom Theme', + menu: 'Custom Menu', + }, }, // runtime runtime: { diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts index 7f316f524..a7ef25070 100644 --- a/src/locale/zh-CN/index.ts +++ b/src/locale/zh-CN/index.ts @@ -376,6 +376,10 @@ export default { onlyShowUnread: '只显示未读', }, }, + customSetting: { + theme: '自定义主题', + menu: '自定义菜单', + }, }, // runtime runtime: { -- Gitee From 2135e4303ed6b75abd6bfcab9964912960528a83 Mon Sep 17 00:00:00 2001 From: RedPig97 <1978141412@qq.com> Date: Wed, 15 May 2024 20:03:38 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E4=B8=BB=E9=A2=98=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/custom-theme/custom-theme-model.ts | 625 ++++++++++++++++++ .../custom-theme/custom-theme.controller.ts | 94 +++ src/common/custom-theme/custom-theme.scss | 36 + src/common/custom-theme/custom-theme.tsx | 186 ++++++ src/common/index.ts | 2 + 5 files changed, 943 insertions(+) create mode 100644 src/common/custom-theme/custom-theme-model.ts create mode 100644 src/common/custom-theme/custom-theme.controller.ts create mode 100644 src/common/custom-theme/custom-theme.scss create mode 100644 src/common/custom-theme/custom-theme.tsx diff --git a/src/common/custom-theme/custom-theme-model.ts b/src/common/custom-theme/custom-theme-model.ts new file mode 100644 index 000000000..ca78a1a59 --- /dev/null +++ b/src/common/custom-theme/custom-theme-model.ts @@ -0,0 +1,625 @@ +export const predefineThemeVars = [ + { + caption: '字体', + type: 'size', + vars: [ + { + label: '字号', + value: '--ibiz-font-size-regular', + unit: 'px', + kindVars: { + '--ibiz-font-size-small': -2, + '--ibiz-font-size-header-6': 2, + '--ibiz-font-size-header-5': 4, + '--ibiz-font-size-header-4': 6, + '--ibiz-font-size-header-3': 8, + '--ibiz-font-size-header-2': 10, + '--ibiz-font-size-header-1': 12, + }, + }, + { + label: '字重', + value: '--ibiz-font-weight-regular', + kindVars: { + '--ibiz-font-weight-light': -200, + '--ibiz-font-weight-bold': 200, + }, + }, + { + label: '圆角', + value: '--ibiz-border-radius-medium', + unit: 'px', + kindVars: { + '--ibiz-border-radius-extra-small': -6, + '--ibiz-border-radius-small': -4, + '--ibiz-border-radius-large': 4, + }, + }, + { + label: '高度', + value: '--ibiz-height-control-default', + unit: 'px', + kindVars: { + '--ibiz-height-control-small': -8, + '--ibiz-height-control-large': 8, + }, + }, + { + label: '图标尺寸', + value: '--ibiz-width-icon-medium', + unit: 'px', + kindVars: { + '--ibiz-width-icon-extra-small': -16, + '--ibiz-width-icon-small': -4, + '--ibiz-width-icon-large': 4, + '--ibiz-width-icon-extra-large': 8, + }, + }, + { + label: '间距', + value: '--ibiz-spacing-base', + unit: 'px', + kindVars: { + '--ibiz-spacing-super-tight': -14, + '--ibiz-spacing-extra-tight': -12, + '--ibiz-spacing-tight': -8, + '--ibiz-spacing-base-tight': -4, + '--ibiz-spacing-base-loose': 4, + '--ibiz-spacing-loose': 8, + '--ibiz-spacing-extra-loose': 16, + '--ibiz-spacing-super-loose': 24, + }, + }, + ], + }, + { + caption: '主要颜色', + vars: [ + { + label: '主要颜色', + description: '主要颜色,仅在需要非常强调的情况下使用', + value: '--ibiz-color-primary', + }, + { + label: '主要文本颜色', + description: '主要颜色文字色，和背景色形成对比', + value: '--ibiz-color-primary-text', + }, + { + label: '主要悬浮颜色', + description: '主要颜色悬浮态', + value: '--ibiz-color-primary-hover', + }, + { + label: '主要悬浮文本颜色', + description: '主要颜色悬浮态文字色，和背景色形成对比', + value: '--ibiz-color-primary-hover-text', + }, + { + label: '主要激活颜色', + description: '主要颜色激活态', + value: '--ibiz-color-primary-active', + }, + { + label: '主要激活文本颜色', + description: '主要颜色激活态文字色，和背景色形成对比', + value: '--ibiz-color-primary-active-text', + }, + { + label: '主要禁用颜色', + description: '主要颜色禁用态', + value: '--ibiz-color-primary-disabled', + }, + { + label: '主要禁用文本颜色', + description: '主要颜色禁用态文字色，和背景色形成对比', + value: '--ibiz-color-primary-disabled-text', + }, + { + label: '主要浅版颜色', + description: '浅版主要颜色（多用于背景）。仅在需要非常强调的情况下使用', + value: '--ibiz-color-primary-light-default', + }, + { + label: '主要浅版悬浮色', + description: '浅版主要颜色悬浮态', + value: '--ibiz-color-primary-light-hover', + }, + { + label: '主要浅版激活色', + description: '浅版主要颜色激活态', + value: '--ibiz-color-primary-light-active', + }, + ], + }, + // { + // caption: '次要颜色', + // vars: [ + // { + // label: '次要颜色', + // description: '次要颜色。强调作用次于主要颜色，但仍然具有强调作用', + // value: '--ibiz-color-secondary', + // }, + // { + // label: '次要文本颜色', + // description: '次要颜色文字色，和背景色形成对比', + // value: '--ibiz-color-secondary-text', + // }, + // { + // label: '次要悬浮颜色', + // description: '次要颜色悬浮态', + // value: '--ibiz-color-secondary-hover', + // }, + // { + // label: '次要悬浮文本色', + // description: '次要颜色悬浮态文字色，和背景色形成对比', + // value: '--ibiz-color-secondary-hover-text', + // }, + // { + // label: '次要激活颜色', + // description: '次要颜色激活态', + // value: '--ibiz-color-secondary-active', + // }, + // { + // label: '次要激活文本色', + // description: '次要颜色激活态文字色，和背景色形成对比', + // value: '--ibiz-color-secondary-active-text', + // }, + // { + // label: '次要禁用颜色', + // description: '次要颜色禁用态', + // value: '--ibiz-color-secondary-disabled', + // }, + // { + // label: '次要禁用文本颜色', + // description: '次要颜色禁用态文字色，和背景色形成对比', + // value: '--ibiz-color-secondary-disabled-text', + // }, + // { + // label: '次要浅版颜色', + // description: '浅版次要颜色（多用于背景）。仅在需要非常强调的情况下使用', + // value: '--ibiz-color-secondary-light-default', + // }, + // { + // label: '次要浅版悬浮色', + // description: '浅版次要颜色悬浮态', + // value: '--ibiz-color-secondary-light-hover', + // }, + // { + // label: '次要浅版激活色', + // description: '浅版次要颜色激活态', + // value: '--ibiz-color-secondary-light-active', + // }, + // ], + // }, + // { + // caption: '第三颜色', + // vars: [ + // { + // label: '第三颜色', + // description: '第三颜色，可以在页面上多次使用', + // value: '--ibiz-color-tertiary', + // }, + // { + // label: '第三文本色', + // description: '第三颜色文字色，和背景色形成对比', + // value: '--ibiz-color-tertiary-text', + // }, + // { + // label: '第三悬浮色', + // description: '第三颜色悬浮态', + // value: '--ibiz-color-tertiary-hover', + // }, + // { + // label: '第三悬浮文本色', + // description: '第三颜色悬浮态文字色，和背景色形成对比', + // value: '--ibiz-color-tertiary-hover-text', + // }, + // { + // label: '第三激活色', + // description: '第三颜色激活态', + // value: '--ibiz-color-tertiary-active', + // }, + // { + // label: '第三激活文本色', + // description: '第三颜色激活态文字色，和背景色形成对比', + // value: '--ibiz-color-tertiary-active-text', + // }, + // { + // label: '第三禁用色', + // description: '第三颜色禁用态', + // value: '--ibiz-color-tertiary-disabled', + // }, + // { + // label: '第三禁用文本色', + // description: '第三颜色禁用态文字色，和背景色形成对比', + // value: '--ibiz-color-tertiary-disabled-text', + // }, + // { + // label: '第三浅版色', + // description: '浅版第三颜色（多用于背景）。仅在需要非常强调的情况下使用', + // value: '--ibiz-color-tertiary-light-default', + // }, + // { + // label: '第三浅版悬浮色', + // description: '浅版第三颜色悬浮态', + // value: '--ibiz-color-tertiary-light-hover', + // }, + // { + // label: '第三浅版激活色', + // description: '浅版第三颜色激活态', + // value: '--ibiz-color-tertiary-light-active', + // }, + // ], + // }, + // { + // caption: '信息色', + // vars: [ + // { + // label: '信息色', + // description: '信息色, 通常用于表达客观、中立信息', + // value: '--ibiz-color-info', + // }, + // { + // label: '信息文本色', + // description: '信息颜色文字色，和背景色形成对比', + // value: '--ibiz-color-info-text', + // }, + // { + // label: '信息悬浮色', + // description: '信息颜色悬浮态', + // value: '--ibiz-color-info-hover', + // }, + // { + // label: '信息悬浮文本色', + // description: '信息颜色悬浮态文字色，和背景色形成对比', + // value: '--ibiz-color-info-hover-text', + // }, + // { + // label: '信息激活色', + // description: '信息颜色激活态', + // value: '--ibiz-color-info-active', + // }, + // { + // label: '信息颜色激活文本色', + // description: '信息颜色激活态文字色，和背景色形成对比', + // value: '--ibiz-color-info-active-text', + // }, + // { + // label: '信息禁用色', + // description: '信息颜色禁用态', + // value: '--ibiz-color-info-disabled', + // }, + // { + // label: '信息禁用文本色', + // description: '信息颜色禁用态文字色，和背景色形成对比', + // value: '--ibiz-color-info-disabled-text', + // }, + // { + // label: '信息浅版色', + // description: '浅版信息颜色（多用于背景）。仅在需要非常强调的情况下使用', + // value: '--ibiz-color-info-light-default', + // }, + // { + // label: '信息浅版悬浮色', + // description: '浅版信息颜色悬浮态', + // value: '--ibiz-color-info-light-hover', + // }, + // { + // label: '信息浅版激活色', + // description: '浅版信息颜色激活态', + // value: '--ibiz-color-info-light-active', + // }, + // ], + // }, + // { + // caption: '成功色', + // vars: [ + // { + // label: '成功色', + // description: '成功色，表示安全、成功、开启的状态', + // value: '--ibiz-color-success', + // }, + // { + // label: '成功文本色', + // description: '成功颜色文字色，和背景色形成对比', + // value: '--ibiz-color-success-text', + // }, + // { + // label: '成功悬浮色', + // description: '成功颜色悬浮态', + // value: '--ibiz-color-success-hover', + // }, + // { + // label: '成功悬浮文本色', + // description: '成功颜色悬浮态文字色，和背景色形成对比', + // value: '--ibiz-color-success-hover-text', + // }, + // { + // label: '成功激活色', + // description: '成功颜色激活态', + // value: '--ibiz-color-success-active', + // }, + // { + // label: '成功激活文本色', + // description: '成功颜色激活态文字色，和背景色形成对比', + // value: '--ibiz-color-success-active-text', + // }, + // { + // label: '成功禁用色', + // description: '成功颜色禁用态', + // value: '--ibiz-color-success-disabled', + // }, + // { + // label: '成功禁用文本色', + // description: '成功颜色禁用态文字色，和背景色形成对比', + // value: '--ibiz-color-success-disabled-text', + // }, + // { + // label: '成功浅版色', + // description: '浅版成功颜色（多用于背景）。仅在需要非常强调的情况下使用', + // value: '--ibiz-color-success-light-default', + // }, + // { + // label: '成功浅版悬浮色', + // description: '浅版成功颜色悬浮态', + // value: '--ibiz-color-success-light-hover', + // }, + // { + // label: '成功浅版激活色', + // description: '浅版成功颜色激活态', + // value: '--ibiz-color-success-light-active', + // }, + // ], + // }, + // { + // caption: '警告色', + // vars: [ + // { + // label: '警告色', + // description: '警示色，表示警告、不安全的状态', + // value: '--ibiz-color-warning', + // }, + // { + // label: '警告文本色', + // description: '警告颜色文字色，和背景色形成对比', + // value: '--ibiz-color-warning-text', + // }, + // { + // label: '警告悬浮色', + // description: '警告颜色悬浮态', + // value: '--ibiz-color-warning-hover', + // }, + // { + // label: '警告悬浮文本色', + // description: '警告颜色悬浮态文字色，和背景色形成对比', + // value: '--ibiz-color-warning-hover-text', + // }, + // { + // label: '警告激活色', + // description: '警告颜色激活态', + // value: '--ibiz-color-warning-active', + // }, + // { + // label: '警告激活文本色', + // description: '警告颜色激活态文字色，和背景色形成对比', + // value: '--ibiz-color-warning-active-text', + // }, + // { + // label: '警告浅版色', + // description: '浅版警告颜色（多用于背景）。仅在需要非常强调的情况下使用', + // value: '--ibiz-color-warning-light-default', + // }, + // { + // label: '警告浅版悬浮色', + // description: '浅版警告颜色悬浮态', + // value: '--ibiz-color-warning-light-hover', + // }, + // { + // label: '警告浅版激活色', + // description: '浅版警告颜色激活态', + // value: '--ibiz-color-warning-light-active', + // }, + // ], + // }, + // { + // caption: '危险色', + // vars: [ + // { + // label: '危险色', + // description: '危险色，表示危险的操作、或需要特别注意的危险信息', + // value: '--ibiz-color-danger', + // }, + // { + // label: '危险文本色', + // description: '危险颜色文字色，和背景色形成对比', + // value: '--ibiz-color-danger-text', + // }, + // { + // label: '危险悬浮色', + // description: '危险颜色悬浮态', + // value: '--ibiz-color-danger-hover', + // }, + // { + // label: '危险悬浮文本色', + // description: '危险颜色悬浮态文字色，和背景色形成对比', + // value: '--ibiz-color-danger-hover-text', + // }, + // { + // label: '危险激活色', + // description: '危险颜色激活态', + // value: '--ibiz-color-danger-active', + // }, + // { + // label: '危险激活文本色', + // description: '危险颜色激活态文字色，和背景色形成对比', + // value: '--ibiz-color-danger-active-text', + // }, + // { + // label: '危险浅版色', + // description: '浅版危险颜色（多用于背景）。仅在需要非常强调的情况下使用', + // value: '--ibiz-color-danger-light-default', + // }, + // { + // label: '危险浅版悬浮色', + // description: '浅版危险颜色悬浮态', + // value: '--ibiz-color-danger-light-hover', + // }, + // { + // label: '危险浅版激活色', + // description: '浅版危险颜色激活态', + // value: '--ibiz-color-danger-light-active', + // }, + // ], + // }, + { + caption: '文本/图标颜色', + vars: [ + { + label: '文本图标主色', + description: '文本/图标颜色 - 最主要', + value: '--ibiz-color-text-0', + }, + { + label: '文本图标稍次色', + description: '文本/图标颜色 - 稍次要', + value: '--ibiz-color-text-1', + }, + { + label: '文本图标次色', + description: '文本/图标颜色 - 次要', + value: '--ibiz-color-text-2', + }, + { + label: '文本图标最次色', + description: '文本/图标颜色 - 最次要', + value: '--ibiz-color-text-3', + }, + ], + }, + { + caption: '链接颜色', + vars: [ + { + label: '文本链接色', + description: '链接颜色 - 最主要', + value: '--ibiz-color-link', + }, + { + label: '文本链接悬浮色', + description: '链接颜色 - 悬浮态', + value: '--ibiz-color-link-hover', + }, + { + label: '文本链接激活色', + description: '链接颜色 - 激活态', + value: '--ibiz-color-link-active', + }, + { + label: '文本链接已访问色', + description: '链接颜色 - 已访问', + value: '--ibiz-color-link-visited', + }, + ], + }, + { + caption: '背景色', + vars: [ + { + label: '背景色最下层', + description: '背景色 - 最下层（底部页面）', + value: '--ibiz-color-bg-0', + }, + { + label: '背景色次下层', + description: '背景色 - 次下层（页面中需要提升的内容）', + value: '--ibiz-color-bg-1', + }, + { + label: '背景色中层', + description: '背景色 - 中间层（模态等容器）', + value: '--ibiz-color-bg-2', + }, + { + label: '背景色次上层', + description: '背景色 - 次上层(通知,Toast等)', + value: '--ibiz-color-bg-3', + }, + { + label: '背景色最上层', + description: '背景色 - 最上层（特殊）', + value: '--ibiz-color-bg-4', + }, + ], + }, + { + caption: '填充色', + vars: [ + { + label: '默认填充色', + description: '填充色 - 默认态', + value: '--ibiz-color-fill-0', + }, + { + label: '悬浮填充色', + description: '填充色 - 悬浮态', + value: '--ibiz-color-fill-1', + }, + { + label: '激活填充色', + description: '填充色 - 激活态', + value: '--ibiz-color-fill-2', + }, + ], + }, + { + caption: '边框', + vars: [ + { + label: '边框色', + description: '默认描边颜色', + value: '--ibiz-color-border', + }, + ], + }, + { + caption: '禁用态', + vars: [ + { + label: '禁用文本色', + description: '禁用态 - 文字', + value: '--ibiz-color-disabled-text', + }, + { + label: '禁用描边色', + description: '禁用态 - 描边', + value: '--ibiz-color-text-border', + }, + { + label: '禁用背景色', + description: '禁用态 - 背景', + value: '--ibiz-color-text-bg', + }, + { + label: '禁用填充色', + description: '禁用态 - 填充', + value: '--ibiz-color-text-fill', + }, + ], + }, + // { + // caption: '阴影', + // vars: [ + // { + // label: '描边阴影', + // description: '用于模拟描边的阴影颜色', + // value: '--ibiz-color-shadow', + // }, + // { + // label: '模态阴影', + // description: '用于toast, modal, popover等需要提升层级的界面元素', + // value: '--ibiz-color-shadow-elevated', + // }, + // ], + // }, +]; diff --git a/src/common/custom-theme/custom-theme.controller.ts b/src/common/custom-theme/custom-theme.controller.ts new file mode 100644 index 000000000..79633e87d --- /dev/null +++ b/src/common/custom-theme/custom-theme.controller.ts @@ -0,0 +1,94 @@ +import { reactive } from 'vue'; +import { clone } from 'ramda'; +import { predefineThemeVars } from './custom-theme-model'; + +/** + * 自定义主题控制器 + * @author zzq + * @date 2024-05-09 14:18:14 + * @export + * @class CustomThemeController + */ +export class CustomThemeController { + /** + * 自定义主题状态 + * + * @type {IData} + * @memberof CustomThemeController + */ + public state: IData = {}; + + /** + * 自定义配置模型 + * + * @type {IData[]} + * @memberof CustomThemeController + */ + public model: IData[] = []; + + /** + * 预定义类型 + * + * @type {IData} + * @memberof CustomThemeController + */ + public predefineType: IData[] = [ + { + codeName: 'light', + label: '亮色', + color: '#557da5', + }, + // { + // codeName: 'dark', + // label: '暗色', + // color: '#1c1c1c', + // }, + ]; + + /** + * 获取css变量 + * + * @param {string} name + * @return {*} {string} + * @memberof CustomThemeController + */ + public getCssVar(name: string): string | number { + let result: string | number = name; + if (this.state.themeVars && this.state.themeVars[name]) { + result = this.state.themeVars[name]; + } else { + const styles = window.getComputedStyle(document.documentElement); + if (styles) { + result = styles.getPropertyValue(name) || result; + } + } + if (result.toString().endsWith('px')) { + result = Number(result.toString().slice(0, -2)); + } + return result; + } + + /** + * 计算尺寸改变，同类size批量更改 + * + * @param {string} varName + * @param {number} size + * @memberof CustomThemeController + */ + public calcSizeChange(varName: string, size: number, item: IData): void { + this.state.themeVars[varName] = `${size}${item.unit || ''}`; + if (item.kindVars) { + Object.keys(item.kindVars).forEach((key: string) => { + const value = item.kindVars[key]; + this.state.themeVars[key] = `${size + value}${item.unit}`; + }); + } + } + + constructor() { + this.model = predefineThemeVars; + const customTheme = ibiz.util.theme.getCustomTheme(); + this.state = clone(customTheme); + this.state = reactive(this.state); + } +} diff --git a/src/common/custom-theme/custom-theme.scss b/src/common/custom-theme/custom-theme.scss new file mode 100644 index 000000000..f74a427de --- /dev/null +++ b/src/common/custom-theme/custom-theme.scss @@ -0,0 +1,36 @@ +@include b(custom-theme) { + display: flex; + flex-direction: column; + height: 100%; + padding: getCssVar('spacing', 'loose'); + @include b(custom-theme-header) { + ion-icon { + margin-right: getCssVar('spacing', 'extra-tight'); + } + } + @include b(custom-theme-content) { + flex: 1; + max-height: calc(100% - 64px); + padding-right: getCssVar('spacing', 'base'); + overflow-y: auto; + } + @include b(custom-theme-footer) { + height: 64px; + @include flex(row, flex-start, center); + } +} +@include b(custom-theme-item) { + padding: getCssVar('spacing', 'base') 0; + border-bottom: 1px solid getCssVar(color, border); + @include e(caption) { + font-size: getCssVar('font-size', 'header-5'); + font-weight: getCssVar('font-weight', 'bold'); + line-height: getCssVar('spacing', 'super', 'loose'); + } +} + +@include b(custom-theme-var) { + gap: getCssVar('spacing', 'base'); + padding: getCssVar('spacing', 'extra-tight') 0; + @include flex(row, space-between, center); +} \ No newline at end of file diff --git a/src/common/custom-theme/custom-theme.tsx b/src/common/custom-theme/custom-theme.tsx new file mode 100644 index 000000000..cf5bf31b3 --- /dev/null +++ b/src/common/custom-theme/custom-theme.tsx @@ -0,0 +1,186 @@ +import { AppMenuController } from '@ibiz-template/runtime'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { defineComponent, getCurrentInstance, PropType } from 'vue'; +import { CustomThemeController } from './custom-theme.controller'; +import './custom-theme.scss'; + +export const CustomTheme = defineComponent({ + name: 'IBizCustomTheme', + props: { + controller: { + type: Object as PropType, + required: true, + }, + }, + emits: [], + setup() { + const ns = useNamespace(`custom-theme`); + + const vue = getCurrentInstance()!.proxy!; + + const c = new CustomThemeController(); + + const handleThemeChange = (codeName: string) => { + c.state.themeTag = codeName; + }; + + const handleColorChange = (varName: string, color: string) => { + c.state.themeVars[varName] = color; + }; + + const handleSizeChange = (varName: string, size: number, item: IData) => { + c.calcSizeChange(varName, size, item); + }; + + const handlePreview = () => { + ibiz.util.theme.previewCustomTheme(c.state.themeTag, c.state.themeVars); + vue.$forceUpdate(); + }; + + const handleSave = async () => { + ibiz.util.theme.previewCustomTheme(c.state.themeTag, c.state.themeVars); + vue.$forceUpdate(); + await ibiz.util.theme.saveCustomTheme( + c.state.themeTag, + c.state.themeVars, + ); + }; + + const handleReset = () => { + c.state.themeVars = {}; + ibiz.util.theme.resetCustomTheme(); + vue.$forceUpdate(); + }; + + const handleShare = async () => { + ibiz.util.theme.previewCustomTheme(c.state.themeTag, c.state.themeVars); + vue.$forceUpdate(); + await ibiz.util.theme.saveCustomTheme( + c.state.themeTag, + c.state.themeVars, + ); + const shareUrl = await ibiz.util.theme.shareCustomTheme( + c.state.themeTag, + c.state.themeVars, + ); + if (shareUrl) { + const confirm = await ibiz.confirm.info({ + title: '确认拷贝链接', + desc: `${shareUrl}`, + }); + if (confirm) { + ibiz.util.text.copy(shareUrl); + } + } + }; + + const renderColorPicker = (data: IData) => { + return ( +
+ + {data.label} + + { + handleColorChange(data.value, value); + }} + model-value={c.getCssVar(data.value)} + /> +
+ ); + }; + + const renderSizeInput = (data: IData) => { + const varValue = c.getCssVar(data.value) as number; + return ( +
+ + {data.label} + + = 100 ? 100 : 1} + min={0} + onChange={(value: number) => { + handleSizeChange(data.value, value, data); + }} + /> +
+ ); + }; + + const renderItem = (item: IData) => { + let content = item.vars.map((data: IData) => { + return renderColorPicker(data); + }); + if (item.type === 'size') { + content = item.vars.map((data: IData) => { + return renderSizeInput(data); + }); + } + return ( +
+
{item.caption}
+
{content}
+
+ ); + }; + + const renderHeader = () => { + return ( +
+
主题色
+
+ {c.predefineType.map((item: IData) => { + return ( + { + handleThemeChange(item.codeName); + }} + > + {c.state.themeTag === item.codeName && ( + + )} + {item.label} + + ); + })} +
+
+ ); + }; + + const renderList = () => { + return c.model.map((item: IData) => { + return renderItem(item); + }); + }; + + return { + ns, + c, + handlePreview, + handleReset, + handleSave, + handleShare, + renderHeader, + renderList, + }; + }, + + render() { + return ( +
+
{this.renderHeader()}
+
{this.renderList()}
+
+ 预览 + 保存 + 重置 + 分享 +
+
+ ); + }, +}); diff --git a/src/common/index.ts b/src/common/index.ts index 6a2c3007a..14fe77616 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -27,6 +27,7 @@ import { IBizGridSetting } from './grid-setting/grid-setting'; import { DoingNotice } from './doing-notice/doing-notice'; import { IBizCarouselComponent } from './carousel/carousel'; import { IBizCoopAlert } from './coop-alert/coop-alert'; +import { CustomTheme } from './custom-theme/custom-theme'; export * from './col/col'; export * from './row/row'; @@ -72,6 +73,7 @@ export const IBizCommonComponents = { v.component(IBizBadge.name, IBizBadge); v.component(IBizCarouselComponent.name, IBizCarouselComponent); v.component(IBizCoopAlert.name, IBizCoopAlert); + v.component(CustomTheme.name, CustomTheme); }, }; -- Gitee From b425c811850c076b689acb86201a1c4ec372666f Mon Sep 17 00:00:00 2001 From: RedPig97 <1978141412@qq.com> Date: Wed, 15 May 2024 20:04:36 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=88=86?= =?UTF-8?q?=E4=BA=AB=E9=A1=B5=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/view/share-view/share-view.scss | 63 +++++++++++++++++++ src/view/share-view/share-view.tsx | 96 +++++++++++++++++++++++++++++ src/web-app/router/index.ts | 14 +++++ 3 files changed, 173 insertions(+) create mode 100644 src/view/share-view/share-view.scss create mode 100644 src/view/share-view/share-view.tsx diff --git a/src/view/share-view/share-view.scss b/src/view/share-view/share-view.scss new file mode 100644 index 000000000..81c6f2a93 --- /dev/null +++ b/src/view/share-view/share-view.scss @@ -0,0 +1,63 @@ +@include b(share-view) { + display: flex; + align-items: center; + justify-content: center; + width: 100vw; + height: 100vh; + background: linear-gradient(120deg, getCssVar(color, primary, light, active) 0%, getCssVar(color, primary, light, default) 100%); +} + +@include b(share-view-box) { + width: 430px; + margin-bottom: 80px; + overflow: hidden; + background: getCssVar(color, bg, 2); +} + +/* stylelint-disable-next-line media-feature-range-notation */ +@media screen and (max-width: 720px) { +@include b(share-view-box) { + width: 340px; + margin-top: 0; +} +} + +@include b(share-view-box-header) { +position: relative; + +> img { + display: block; + width: 430px; + margin: 0 auto; + user-select: none; +} + +@include b(share-view-box-header-title){ + position: absolute; + top: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 80%; + font-size: getCssVar(font-size, header-2); + font-weight: getCssVar(font-weight, bold); + color: getCssVar(color, white); + text-shadow: getCssVar(color, shadow); + white-space: nowrap; +} +} + +@include b(share-view-box-main-content) { + padding: 40px; + + .el-button { + width: 100%; + margin-top: getCssVar(spacing, base); + letter-spacing: getCssVar(spacing, super-tight); + } + + .el-button + .el-button { + margin-left: 0; + } +} \ No newline at end of file diff --git a/src/view/share-view/share-view.tsx b/src/view/share-view/share-view.tsx new file mode 100644 index 000000000..81a2e65b6 --- /dev/null +++ b/src/view/share-view/share-view.tsx @@ -0,0 +1,96 @@ +import { Ref, defineComponent, onMounted, ref } from 'vue'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { useRoute, useRouter } from 'vue-router'; +import './share-view.scss'; + +export const ShareView = defineComponent({ + setup() { + const ns = useNamespace('share-view'); + + const router = useRouter(); + + const route = useRoute(); + + const loading = ref(false); + + const isMounted = ref(false); + + const shareUser: Ref = ref({}); + + let shareTheme: IData = {}; + + let shareThemeId = ''; + + const getShareTheme = async () => { + const { userId } = shareUser.value; + shareTheme = await ibiz.util.theme.getShareTheme(userId, shareThemeId); + if (shareTheme) { + ibiz.util.theme.previewCustomTheme( + shareTheme.themeTag, + shareTheme.themeVars, + ); + } + }; + + onMounted(async () => { + const params: IData = route.query; + shareThemeId = window.atob(params.shareThemeId); + shareUser.value = { + userId: params.shareUserId, + userName: params.shareUserName, + }; + ibiz.util.hiddenAppLoading(); + await ibiz.util.theme.initCustomTheme(false); + await getShareTheme(); + isMounted.value = true; + }); + + const handleApply = async () => { + await ibiz.util.theme.saveCustomTheme( + shareTheme.themeTag, + shareTheme.themeVars, + ); + router.push('/'); + }; + + const handleCancel = () => { + ibiz.util.theme.resetCustomTheme(); + router.push('/'); + }; + + return { ns, loading, isMounted, shareUser, handleApply, handleCancel }; + }, + render() { + if (!this.isMounted) { + return; + } + return ( +
+
+
+ +
+
{this.shareUser.userName}
+ {'邀请您加入主题应用!'} +
+
+
+
+ + 应用 + + + 取消 + +
+
+
+
+ ); + }, +}); diff --git a/src/web-app/router/index.ts b/src/web-app/router/index.ts index dec501de2..04ad1244a 100644 --- a/src/web-app/router/index.ts +++ b/src/web-app/router/index.ts @@ -4,6 +4,7 @@ import { RouteConst } from '@ibiz-template/runtime'; import NProgress from 'nprogress'; import { LoginView, ErrorView } from '../../view'; import { ModalRouterShell, RouterShell } from '../components'; +import { ShareView } from '../../view/share-view/share-view'; import 'nprogress/nprogress.css'; export class AppRouter { @@ -41,6 +42,19 @@ export class AppRouter { }, component: LoginView, }, + { + path: '/share', + name: 'shareView', + beforeEnter: async (_to, _from, next): Promise => { + const authority = await this.authGuard(); + if (authority) { + next(); + } else { + next(false); + } + }, + component: ShareView, + }, { path: '/error/:code', name: 'errorView1', -- Gitee From dba837269400279d7468412f89539018f2e7a574 Mon Sep 17 00:00:00 2001 From: jianglinjun Date: Wed, 15 May 2024 20:04:51 +0800 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F=E4=B8=BB=E9=A2=98=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E4=BD=BF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/action-toolbar/action-toolbar.scss | 22 ++-- src/common/coop-alert/coop-alert.scss | 27 ++-- src/common/data-import/data-import.scss | 26 ++-- .../data-import2-select.scss | 4 +- src/common/doing-notice/doing-notice.scss | 12 +- .../extend-action-timeline.scss | 76 +++++------ src/common/map-chart/map-chart.scss | 4 +- src/common/view-message/view-message.scss | 4 +- src/control/app-menu/app-menu.scss | 18 +-- src/control/context-menu/context-menu.scss | 12 +- .../custom-dashboard-container.scss | 8 +- .../dashboard-design/dashboard-design.scss | 4 +- .../container-portlet/container-portlet.scss | 2 +- .../portlet-layout/portlet-layout.scss | 10 +- src/control/drtab/drtab.scss | 8 +- .../form-druipart/form-druipart.scss | 4 +- .../form/form-detail/form-item/form-item.scss | 2 +- .../form-mdctrl-form/form-mdctrl-form.scss | 2 +- .../form-mdctrl-md/form-mdctrl-md.scss | 4 +- .../repeater-grid/repeater-grid.scss | 2 +- .../mdctrl-container/mdctrl-container.scss | 2 +- .../form/form-detail/form-page/form-page.scss | 2 +- .../form-rawitem/form-rawitem.scss | 4 +- src/control/gantt/gantt.scss | 16 +-- src/control/gantt/gantt.tsx | 4 + .../grid-edit-item/grid-edit-item.scss | 4 +- src/control/grid/grid/grid.scss | 18 +-- .../row-edit-popover/row-edit-popover.scss | 2 +- src/control/kanban/kanban.scss | 16 +-- .../search-bar/filter-tree/filter-tree.scss | 26 ++-- src/control/search-bar/search-bar.scss | 4 +- src/control/tab-exp-panel/tab-exp-panel.scss | 6 +- src/control/tree-grid-ex/tree-grid-ex.scss | 12 +- .../custom-setting/custom-setting-provider.ts | 20 +++ .../custom-setting/custom-setting.scss | 33 +++++ .../custom-setting/custom-setting.tsx | 119 ++++++++++++++++++ src/panel-component/custom-setting/index.ts | 15 +++ src/panel-component/index.ts | 3 + 38 files changed, 380 insertions(+), 177 deletions(-) create mode 100644 src/panel-component/custom-setting/custom-setting-provider.ts create mode 100644 src/panel-component/custom-setting/custom-setting.scss create mode 100644 src/panel-component/custom-setting/custom-setting.tsx create mode 100644 src/panel-component/custom-setting/index.ts diff --git a/src/common/action-toolbar/action-toolbar.scss b/src/common/action-toolbar/action-toolbar.scss index 312580d22..fce05cd72 100644 --- a/src/common/action-toolbar/action-toolbar.scss +++ b/src/common/action-toolbar/action-toolbar.scss @@ -1,11 +1,11 @@ /* action-toolbar 界面行为组工具栏 start */ $action-toolbar: ( - item-margin: 0 4px 0 0, + item-margin: getCssVar(spacing,none) getCssVar(spacing,extra-tight) getCssVar(spacing,none) getCssVar(spacing,none), separator-height: 20px, separator-width: 2px, separator-color: getCssVar(color, border), - popover-padding: 8px 0, - popover-button-padding: 8px 20px, + popover-padding: getCssVar(spacing,tight) getCssVar(spacing,none), + popover-button-padding: getCssVar(spacing,tight) getCssVar(spacing,base-loose), popover-button-color: getCssVar(color, text, 2), popover-button-hover-bg: getCssVar(color, bg, 0), ); @@ -19,7 +19,7 @@ $action-toolbar: ( flex-wrap: wrap; @include e(item) { - padding: getCssVar(spacing, extra-tight) 0; + padding: getCssVar('spacing', 'extra-tight') getCssVar('spacing', 'none'); margin: getCssVar(action-toolbar, item-margin); @include m(icon) { @@ -28,8 +28,8 @@ $action-toolbar: ( justify-content: center; width: 14px; height: 14px; - margin-right: 3px; - font-size: 14px; + margin-right: getCssVar('spacing','extra-tight'); + font-size: getCssVar('font-size', 'regular'); } &+& { @@ -37,6 +37,10 @@ $action-toolbar: ( } } + @include e('separator'){ + height: auto; + } + @include e(popover) { @include set-component-css-var(action-toolbar, $action-toolbar); @@ -52,8 +56,8 @@ $action-toolbar: ( display: block; width: 100%; padding: getCssVar(action-toolbar, popover-button-padding); - margin: 0; - font-size: 14px; + margin: getCssVar('spacing', 'none'); + font-size: getCssVar('font-size', 'regular');; color: getCssVar(action-toolbar, popover-button-color); text-align: left; border-radius: 0; @@ -67,7 +71,7 @@ $action-toolbar: ( } } - @include e(separator) { + .ibiz-action-toolbar__separator{ margin: 0; } } diff --git a/src/common/coop-alert/coop-alert.scss b/src/common/coop-alert/coop-alert.scss index cac181294..d9fd154aa 100644 --- a/src/common/coop-alert/coop-alert.scss +++ b/src/common/coop-alert/coop-alert.scss @@ -1,13 +1,22 @@ $coop-alert: ( - color--info: #909399, - background-color--info: #f4f4f5, - color--success: #67c23a, - background-color--success: #f0f9eb, - color--warning: #e6a23c, - background-color--warning: #fdf6ec, - color--error: #f56c6c, - background-color--error: #fef0f0, - close-btn-color: #a8abb2, + // color--info: #909399, + // background-color--info: #f4f4f5, + // color--success: #67c23a, + // background-color--success: #f0f9eb, + // color--warning: #e6a23c, + // background-color--warning: #fdf6ec, + // color--error: #f56c6c, + // background-color--error: #fef0f0, + // close-btn-color: #a8abb2, + color--info:getCssVar(color,info), + background-color--info: getCssVar(color,fill,0), + color--success: getCssVar(color,success), + background-color--success: getCssVar(color, success, light, default), + color--warning: getCssVar(color,warning), + background-color--warning: getCssVar(color, warning, light, default), + color--error: getCssVar(color,danger), + background-color--error: getCssVar(color, danger, light, default), + close-btn-color: getCssVar(color,text,1), ); @include b(coop-alert) { diff --git a/src/common/data-import/data-import.scss b/src/common/data-import/data-import.scss index b901818fb..32289668b 100644 --- a/src/common/data-import/data-import.scss +++ b/src/common/data-import/data-import.scss @@ -3,7 +3,7 @@ width: 544px; height: 368px; - padding: 20px; + padding: getCssVar(spacing,base-loose); background: getCssVar(color, bg, 1); @include e(caption) { @@ -14,27 +14,27 @@ } @include e(template-container) { - padding: 16px 12px 0; - margin-bottom: 16px; + padding: getCssVar('spacing','base') getCssVar('spacing','base-tight') getCssVar('spacing','none'); + margin-bottom: getCssVar('spacing','base'); } @include e(template-link) { - color: #57a3fd; + color: getCssVar('color','secondary'); cursor: pointer; @include e(link-icon) { height: 19px; - margin-right: 2px; + margin-right: getCssVar('spacing','super-tight'); vertical-align: bottom; } } @include e(button-bar) { - margin-right: 20px; + margin-right: getCssVar('spacing','base-loose'); text-align: right; .ivu-btn { - margin-left: 8px; + margin-left: getCssVar('spacing','tight'); } } } @@ -47,12 +47,12 @@ cursor: pointer; background: getCssVar(color, bg, 1); border: 1px dashed getCssVar(color, border); - border-radius: 4px; + border-radius: getCssVar(border, radius,small); @include e(img) { width: 50px; height: 50px; - margin-bottom: 20px; + margin-bottom: getCssVar('spacing','base-loose'); } } @@ -60,20 +60,20 @@ @include flex(column); flex-grow: 1; - padding: 8px 16px; + padding: getCssVar('spacing','tight') getCssVar('spacing','base'); overflow: auto; cursor: pointer; background: getCssVar(color, bg, 1); border: 1px dashed getCssVar(color, border); - border-radius: 4px; + border-radius: getCssVar(border, radius,small); @include e(title) { font-size: getCssVar('font-size', 'medium'); - font-weight: 600; + font-weight: getCssVar('font-weight', 'bold'); } @include e(content) { - padding-left: 16px; + padding-left: getCssVar('spacing','base'); @include when(error) { color: getCssVar(color, danger); diff --git a/src/common/data-import2-select/data-import2-select.scss b/src/common/data-import2-select/data-import2-select.scss index be33c1dbf..63798680b 100644 --- a/src/common/data-import2-select/data-import2-select.scss +++ b/src/common/data-import2-select/data-import2-select.scss @@ -5,9 +5,9 @@ } @include e('select-option-item') { + height: 100%; padding: getCssVar(spacing, none) 30px getCssVar(spacing, none) 10px; @include flex(row, space-between, center); - height: 100%; &:hover { @include e('select-option-item-button-delete') { @@ -27,7 +27,7 @@ } @include e('select-option-item-button-delete-icon') { - color: red; + color: getCssVar('color','danger'); } @include e('select-option-item-input') { diff --git a/src/common/doing-notice/doing-notice.scss b/src/common/doing-notice/doing-notice.scss index 2445ea187..483950621 100644 --- a/src/common/doing-notice/doing-notice.scss +++ b/src/common/doing-notice/doing-notice.scss @@ -3,7 +3,7 @@ width: auto; .el-notification__group{ - margin: 0; + margin: getCssVar('spacing','none'); } .el-notification__closeBtn{ @@ -15,20 +15,20 @@ @include b(doing-notice){ @include e(text) { - margin-right: 8px; + margin-right: getCssVar('spacing','tight'); } @include e(num) { - margin: 0 8px; - font-size: 18px; - font-weight: bold; + margin: getCssVar('spacing','none') getCssVar('spacing','tight'); + font-size: getCssVar('font-size','header-5'); + font-weight: getCssVar(font-weight, bold); color: getCssVar(color, primary); } @include e(loading-icon) { width: 18px; height: 18px; - margin-right: 6px; + margin-right: getCssVar('spacing','extra-tight'); vertical-align: middle; animation: loading-rotate 2s linear infinite; diff --git a/src/common/extend-action-timeline/extend-action-timeline.scss b/src/common/extend-action-timeline/extend-action-timeline.scss index c683610ca..07ba52871 100644 --- a/src/common/extend-action-timeline/extend-action-timeline.scss +++ b/src/common/extend-action-timeline/extend-action-timeline.scss @@ -1,5 +1,5 @@ @include b(extend-action-timeline) { - padding-top: 30px; + padding-top: getCssVar('spacing', 'extra-loose'); background-color: getCssVar('bg-color', 'overlay'); @include b(extend-action-timeline-task) { @@ -10,38 +10,38 @@ @include flex; padding-left: 35px; - margin-bottom: 16px; + margin-bottom: getCssVar('spacing', 'base'); } @include e(bottom) { min-height: 50px; - padding-bottom: 20px; - padding-left: 35px; + padding-bottom: getCssVar('spacing', 'base-loose'); + padding-left: getCssVar('spacing', 'extra-loose'); } @include e(trigger) { position: absolute; top: -3px; left: 13px; - font-size: 20px; + font-size: getCssVar('font-size', 'header-4'); cursor: pointer; } @include e(last-time) { flex: 1; - padding-right: 16px; + padding-right: getCssVar('spacing', 'base'); text-align: right; @include e(last-time-text) { display: inline-block; - margin-left: 10px; - font-size: 14px; - color: #999; + margin-left: getCssVar('spacing', 'base-tight'); + font-size: getCssVar('font-size', 'regular'); + color: getCssVar('color', 'text', 1); } } @include e(user-task-name) { width: 190px; - margin-right: 35px; - font-size: 18px; - font-weight: bold; - color: #2d8cf0; + margin-right: getCssVar('spacing', 'extra-loose'); + font-size: getCssVar('font-size', 'header-5'); + font-weight: getCssVar('font-weight', 'bold'); + color: getCssVar('color', 'secondary'); } @include e(head) { @@ -50,8 +50,8 @@ left: -9px; width: 22px; height: 22px; - border: 2px solid #2d8cf0; - border-radius: 50%; + border: 2px solid getCssVar('color', 'secondary'); + border-radius: getCssVar('border', 'radius','circle'); } @include e(tail) { @@ -59,14 +59,14 @@ top: 22px; width: 4px; height: calc(100% - 16px); - background: #e8eaec; + background: getCssVar('color', 'fill',1); } @include e(author-name) { width: 300px; overflow: hidden; - font-size: 18px; - color: #666; + font-size: getCssVar('font-size', 'header-5'); + color: getCssVar('color', 'tertiary'); text-overflow: ellipsis; white-space:nowrap; @@ -77,57 +77,57 @@ @include e(type) { width: 200px; - margin-left: 30px; - font-size: 18px; - color: #2d8cf0; + margin-left: getCssVar('spacing', 'extra-loose'); + font-size: getCssVar('font-size', 'header-5'); + color: getCssVar('color', 'secondary'); } @include e(full-message) { - font-size: 18px; - color: #666; + font-size: getCssVar('font-size', 'header-5'); + color: getCssVar('color', 'tertiary'); } @include when(wrong) { @include e(head) { - border: 2px solid #ff686a; + border: 2px solid getCssVar('color', 'danger'); } @include e(user-task-name) { - color: #ff686a; + color: getCssVar('color', 'danger'); } @include e(type) { - color: #ff686a; + color: getCssVar('color', 'danger'); } } @include when(link) { @include e(head) { - background-color: #fff; - border: 2px solid #92a1b3; + background-color: getCssVar('color', 'bg',1); + border: 2px solid getCssVar('color', 'border'); } @include e(user-task-name) { - color: #70849d; + color: getCssVar('color', 'link'); } } @include when(linkname) { .is-link-head{ - background-color: #fff; - border: 2px solid #92a1b3; + background-color: getCssVar('color', 'bg',1); + border: 2px solid getCssVar('color', 'border');; } @include e(user-task-name) { &.is-task-link { width: 190px; - margin-right: 35px; - font-size: 18px; - font-weight: bold; - color: #70849d; + margin-right: getCssVar('spacing', 'extra-loose');; + font-size: getCssVar('font-size', 'header-5');; + font-weight: getCssVar('font-weight', 'bold');; + color: getCssVar('color', 'link'); } } @include e(link-name) { width: 300px; overflow: hidden; - font-size: 18px; - color: #666; + font-size: getCssVar('font-size', 'header-5'); + color: getCssVar('color', 'tertiary'); text-overflow: ellipsis; white-space:nowrap; } @@ -143,7 +143,7 @@ .#{bem('extend-action-timeline-task')} { &:not(:last-child) { .#{bem('extend-action-timeline-task','tail')} { - background-color: #e8eaec; + background-color: getCssVar('color', 'fill',1);; } } } diff --git a/src/common/map-chart/map-chart.scss b/src/common/map-chart/map-chart.scss index e86e2944f..f391721d8 100644 --- a/src/common/map-chart/map-chart.scss +++ b/src/common/map-chart/map-chart.scss @@ -14,8 +14,8 @@ right: 0; width: 100px; height: 100px; - font-size: 20px; - color: #002A5F; + font-size: getCssVar('font-size', 'header-4'); + color: getCssVar('color','text', '0'); text-decoration:underline; letter-spacing: 6px; cursor: pointer; diff --git a/src/common/view-message/view-message.scss b/src/common/view-message/view-message.scss index 8db0372df..ed11bf3d0 100644 --- a/src/common/view-message/view-message.scss +++ b/src/common/view-message/view-message.scss @@ -46,7 +46,7 @@ $view-message: ( @include m(single) { .el-alert__description { - margin: 0; + margin: getCssVar(spacing,none); } } @@ -74,7 +74,7 @@ $view-message: ( @include m(single) { .el-alert__description { - margin: 0; + margin: getCssVar(spacing,none); } } diff --git a/src/control/app-menu/app-menu.scss b/src/control/app-menu/app-menu.scss index dbd107577..0c38acced 100644 --- a/src/control/app-menu/app-menu.scss +++ b/src/control/app-menu/app-menu.scss @@ -87,7 +87,7 @@ $control-appmenu-item: ( @mixin menu-collapse-item-style { @include flex-center; - padding: 0; + padding: getCssVar(spacing, none); margin-bottom: getCssVar(spacing, tight); } @@ -108,7 +108,7 @@ $control-appmenu-item: ( >.el-menu { height: 100%; - padding: 0 getCssVar(spacing, tight); + padding: getCssVar(spacing, none) getCssVar(spacing, tight); overflow-y: auto; border-right: 0; } @@ -149,7 +149,7 @@ $control-appmenu-item: ( // 水平 .el-menu--horizontal { & > * + *{ - margin-left: 16px; + margin-left: getCssVar(spacing, base); } align-items: center; @@ -212,7 +212,7 @@ $control-appmenu-item: ( // 收缩 @include when(collapse) { @include e(icon) { - margin: 0; + margin: getCssVar('spacing', 'none'); } @include e(item) { @include menu-collapse-item-style; @@ -231,7 +231,7 @@ $control-appmenu-item: ( cursor: pointer; } @include e(item) { - padding: 0; + padding: getCssVar('spacing', 'none'); } } } @@ -300,11 +300,11 @@ $control-appmenu-item: ( top: 50%; right: 5px; height: 20px; - padding: 0 6px; + padding: getCssVar('spacing', 'none') getCssVar('spacing', 'tight'); line-height: initial; - color: #fff; - background-color: #f56c6c; - border-radius: 10px; + color: getCssVar('color', danger, text); + background-color: getCssVar('color', 'danger'); + border-radius: getCssVar('border','radius','medium'); transform: translateY(-50%); } diff --git a/src/control/context-menu/context-menu.scss b/src/control/context-menu/context-menu.scss index 6c07c346f..a02008841 100644 --- a/src/control/context-menu/context-menu.scss +++ b/src/control/context-menu/context-menu.scss @@ -3,8 +3,8 @@ $context-menu: (item-margin: 0 0 0 4px, separator-height: 20px, separator-width: 2px, separator-color: getCssVar(color, border), -popover-padding: 8px 0, -popover-button-padding: 8px 20px, +popover-padding: getCssVar(spacing, tight) getCssVar(spacing, none), +popover-button-padding: getCssVar(spacing, tight) getCssVar(spacing, base-loose), popover-button-color: getCssVar(color, text, 2), popover-button-hover-bg: getCssVar(color, bg, 0), ); @@ -22,7 +22,7 @@ popover-button-hover-bg: getCssVar(color, bg, 0), } .#{bem('context-menu','action-content-icon')} { - margin-right: 3px; + margin-right: getCssVar(spacing, extra-tight); } } @@ -56,8 +56,8 @@ popover-button-hover-bg: getCssVar(color, bg, 0), display: block; width: 100%; padding: getCssVar(context-menu, popover-button-padding); - margin: 0; - font-size: 14px; + margin: getCssVar(spacing, none); + font-size: getCssVar(font-size, regular); color: getCssVar(context-menu, popover-button-color); text-align: left; border-radius: 0; @@ -82,7 +82,7 @@ popover-button-hover-bg: getCssVar(color, bg, 0), } @include e(separator) { - margin: 0; + margin: getCssVar(spacing, none); &.el-divider--horizontal { width: calc(100% - 2 * getCssVar('spacing', 'base-loose')); diff --git a/src/control/dashboard/custom-dashboard-container/custom-dashboard-container.scss b/src/control/dashboard/custom-dashboard-container/custom-dashboard-container.scss index 347d7d281..4152abca5 100644 --- a/src/control/dashboard/custom-dashboard-container/custom-dashboard-container.scss +++ b/src/control/dashboard/custom-dashboard-container/custom-dashboard-container.scss @@ -10,12 +10,12 @@ z-index: 10; @include b(custom-dashboard-container-forward-btn){ - padding: 0; - margin: 0 0 0 getCssVar(spacing, tight); + padding: getCssVar(spacing, none); + margin: getCssVar(spacing, none) getCssVar(spacing, none) getCssVar(spacing, none) getCssVar(spacing, tight); } @include b(custom-dashboard-container-back-btn){ - padding: 0; - margin: 0; + padding: getCssVar(spacing, none); + margin: getCssVar(spacing, none); } } } \ No newline at end of file diff --git a/src/control/dashboard/dashboard-design/dashboard-design.scss b/src/control/dashboard/dashboard-design/dashboard-design.scss index 0aea02dc0..b0f518d8b 100644 --- a/src/control/dashboard/dashboard-design/dashboard-design.scss +++ b/src/control/dashboard/dashboard-design/dashboard-design.scss @@ -30,7 +30,7 @@ @include b(dashboard-design-tree-filter){ width: 100%; height: 32px; - padding: 0 getCssVar(spacing, tight); + padding: getCssVar(spacing, none) getCssVar(spacing, tight); } @include b(dashboard-design-tree-content){ @@ -66,7 +66,7 @@ flex-grow: 1; height: 100%; overflow-y: scroll; - background: #efefef; + background: getCssVar(color, fill,1); } @include b(dashboard-design-panel){ diff --git a/src/control/dashboard/portlet/container-portlet/container-portlet.scss b/src/control/dashboard/portlet/container-portlet/container-portlet.scss index 752643cc3..d04d34081 100644 --- a/src/control/dashboard/portlet/container-portlet/container-portlet.scss +++ b/src/control/dashboard/portlet/container-portlet/container-portlet.scss @@ -1,6 +1,6 @@ @include b(portlet-container){ &.#{bem(portlet-layout)}{ - padding: 0; + padding: getCssVar(spacing, none);; } >.#{bem(portlet-layout-content)}{ diff --git a/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss b/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss index b2f3e20bf..39184707a 100644 --- a/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss +++ b/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss @@ -1,8 +1,8 @@ $portlet-layout: ( 'bg-color': transparent, 'header-height': 50px, - 'header-padding': 14px 16px, - 'header-margin': 0, + 'header-padding': calc(getCssVar(spacing, base-tight) + 2px) getCssVar(spacing, base), + 'header-margin': getCssVar(spacing, none), 'header-bg-color': getCssVar(color, bg, 1), 'header-border-bottom': getCssVar('border'), 'caption-max-width': 300px, @@ -10,8 +10,8 @@ $portlet-layout: ( 'caption-font-size': getCssVar('font-size', 'header-5'), 'caption-color': getCssVar('text-color', 'primary'), 'content-bg-color': getCssVar(color, bg, 1), - 'content-padding': 0, - 'content-margin': 0, + 'content-padding': getCssVar(spacing, none), + 'content-margin': getCssVar(spacing, none), 'padding': getCssVar(spacing, tight) ); @@ -27,7 +27,7 @@ $portlet-layout: ( @include e(caption){ max-width: getCssVar('portlet-layout','caption-max-width'); height: 100%; - padding: 0 0 0 getCssVar(spacing, base); + padding: getCssVar(spacing, none) getCssVar(spacing, none) getCssVar(spacing, none) getCssVar(spacing, base); @include e(caption-text){ font-size: getCssVar('portlet-layout','caption-font-size'); font-weight: getCssVar('portlet-layout','caption-font-weight'); diff --git a/src/control/drtab/drtab.scss b/src/control/drtab/drtab.scss index 7fb2fcfbf..faa0791d5 100644 --- a/src/control/drtab/drtab.scss +++ b/src/control/drtab/drtab.scss @@ -1,16 +1,16 @@ @include b(control-drtab) { @include e(counter) { - margin-left: 8px; + margin-left: getCssVar(spacing, tight); } // 标签栏 .el-tabs { .el-tabs__header { - margin: 0; + margin: getCssVar(spacing, none); .el-tabs__nav-wrap { - margin: 0; + margin: getCssVar(spacing, none); .el-tabs__nav { .el-tabs__active-bar { @@ -31,7 +31,7 @@ &.is-top { &:last-child { - padding-right: 0; + padding-right: getCssVar(spacing, none); } } } diff --git a/src/control/form/form-detail/form-druipart/form-druipart.scss b/src/control/form/form-detail/form-druipart/form-druipart.scss index b66722072..192c00d1b 100644 --- a/src/control/form/form-detail/form-druipart/form-druipart.scss +++ b/src/control/form/form-detail/form-druipart/form-druipart.scss @@ -10,8 +10,8 @@ z-index: 10; width: 100%; height: 100%; - color: white; - background-color: rgb(0 0 0 / 50%); + color: getCssVar(color, primary, text); + background-color: rgb(getCssVar(blac) 0.5); @include flex(row, center, center); } } diff --git a/src/control/form/form-detail/form-item/form-item.scss b/src/control/form/form-detail/form-item/form-item.scss index 3853b7f25..ac809125e 100644 --- a/src/control/form/form-detail/form-item/form-item.scss +++ b/src/control/form/form-detail/form-item/form-item.scss @@ -18,7 +18,7 @@ $form-item: ( 'focus-border': getCssVar(color, focus, border), 'line-height': getCssVar(editor,default,line-height), 'font-weight': getCssVar(font-weight, regular), - 'hover-edit-padding': 0 11px, + 'hover-edit-padding': getCssVar('spacing','none') 11px, ); @include b(form-item) { diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.scss b/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.scss index d6deb9c77..4cf43b369 100644 --- a/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.scss +++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.scss @@ -16,7 +16,7 @@ text-align: center; .el-button+.el-button{ - margin-left: 0; + margin-left: getCssVar(spacing, none);; } @include e(btn){ diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.scss b/src/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.scss index b83e13b12..033099599 100644 --- a/src/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.scss +++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.scss @@ -1,5 +1,5 @@ $form-mdctrl-md: (empty-image-width: 64px, - empty-padding: 0, + empty-padding: getCssVar(spacing,none), empty-margin-top: getCssVar('spacing', 'tight'), ); @@ -27,7 +27,7 @@ $form-mdctrl-md: (empty-image-width: 64px, text-align: center; .el-button+.el-button { - margin-left: 0; + margin-left: getCssVar(spacing,none); } @include e(btn) { diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.scss b/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.scss index cf2c55600..639705372 100644 --- a/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.scss +++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.scss @@ -38,7 +38,7 @@ $repeater-grid: ( @include b(repeater-grid-index){ .cell{ - padding: 4px; + padding: getCssVar(spacing,extra-tight); } @include e(remove){ diff --git a/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss b/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss index 3979abc71..c04ed7f2a 100644 --- a/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss +++ b/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss @@ -16,7 +16,7 @@ text-align: center; .el-button+.el-button{ - margin-left: 0; + margin-left: getCssVar(spacing,none); } @include e(btn){ diff --git a/src/control/form/form-detail/form-page/form-page.scss b/src/control/form/form-detail/form-page/form-page.scss index 2354428fd..e7731f93e 100644 --- a/src/control/form/form-detail/form-page/form-page.scss +++ b/src/control/form/form-detail/form-page/form-page.scss @@ -42,7 +42,7 @@ $form-page: ( // 无分页时，分页内容区最上不需要间隔 @include m(no-tab-header) { @include b(form-page-item) { - padding-top: 0; + padding-top: getCssVar(spacing,none);; } } } diff --git a/src/control/form/form-detail/form-rawitem/form-rawitem.scss b/src/control/form/form-detail/form-rawitem/form-rawitem.scss index ccef9a1be..38bc6f58c 100644 --- a/src/control/form/form-detail/form-rawitem/form-rawitem.scss +++ b/src/control/form/form-detail/form-rawitem/form-rawitem.scss @@ -3,9 +3,9 @@ height: 100%; } - +// 左右padding 为11px固定不变 @include b(form-raw-item) { @include when(show-default){ - padding: 0 11px; + padding: getCssVar(spacing,none) 11px; } } diff --git a/src/control/gantt/gantt.scss b/src/control/gantt/gantt.scss index a28625270..4cc1feb70 100644 --- a/src/control/gantt/gantt.scss +++ b/src/control/gantt/gantt.scss @@ -8,7 +8,7 @@ .xg-table-cell:not(:first-child) { > div { - padding: 0; + padding: getCssVar(spacing,none); } } } @@ -28,12 +28,12 @@ } @include e(slider) { height: 100%; - padding: 0 12px; + padding: getCssVar(spacing,none) getCssVar(spacing,base-tight); cursor: pointer; - border-radius: 4px; + border-radius: getCssVar(border,radius,small); @include m(container-title) { .icon { - margin-right: 6px; + margin-right: calc(getCssVar('spacing','extra-tight') + 2px); } .number { @@ -42,9 +42,9 @@ } .caption { - margin: 8px; - font-size: 16px; - font-weight: 400; + margin: getCssVar('spacing','tight'); + font-size: getCssVar('font-size','header-6'); + font-weight: getCssVar('font-weight','regular'); } } @include m(container-content) { @@ -52,7 +52,7 @@ justify-content: space-between; .caption { - margin: 4px; + margin: getCssVar('spacing','extra-tight'); color: getCssVar(color, disabled, text); } diff --git a/src/control/gantt/gantt.tsx b/src/control/gantt/gantt.tsx index 79158345c..a3e152b83 100644 --- a/src/control/gantt/gantt.tsx +++ b/src/control/gantt/gantt.tsx @@ -492,6 +492,10 @@ export const GanttControl = defineComponent({
+ {item._icon && ( )} diff --git a/src/control/grid/grid-column/grid-field-edit-column/grid-edit-item/grid-edit-item.scss b/src/control/grid/grid-column/grid-field-edit-column/grid-edit-item/grid-edit-item.scss index 92b7a4ab9..9c2438310 100644 --- a/src/control/grid/grid-column/grid-field-edit-column/grid-edit-item/grid-edit-item.scss +++ b/src/control/grid/grid-column/grid-field-edit-column/grid-edit-item/grid-edit-item.scss @@ -23,7 +23,7 @@ $form-item: ( 'focus-border': getCssVar(color, focus, border), 'line-height': getCssVar(editor,default,line-height), 'font-weight': getCssVar(font-weight, regular), - 'hover-edit-padding': 0 11px, + 'hover-edit-padding': getCssVar('spacing','none') 11px, ); @include b(grid-edit-item) { @@ -35,7 +35,7 @@ $form-item: ( &.is-error { @include e(tooltip) { - border: 1px solid red; + border: 1px solid getCssVar('color','danger'); } } diff --git a/src/control/grid/grid/grid.scss b/src/control/grid/grid/grid.scss index 0601daced..108a518a4 100644 --- a/src/control/grid/grid/grid.scss +++ b/src/control/grid/grid/grid.scss @@ -1,13 +1,13 @@ $control-grid: ( text-color: getCssVar(color, text, 0), bg-color: transparent, - padding: 0, + padding: getCssVar('spacing','none'), cell-padding: getCssVar(spacing, tight), selection-padding: getCssVar(spacing, base-loose), row-edit-bg-color: getCssVar(color, fill, 2), row-bg-color: getCssVar(color, bg, 1), row-bg-color-2: getCssVar(color, bg, 0), - row-expand-icon-margin: 0 0 0 getCssVar(spacing, tight), + row-expand-icon-margin: getCssVar('spacing','none') getCssVar('spacing','none') getCssVar('spacing','none') getCssVar(spacing, tight), now-header-height: auto, ); $control-grid-header: (text-color: getCssVar(color, text, 2), @@ -25,7 +25,7 @@ row-height: 48px, $control-grid-page: ( text-color: getCssVar(color, text, 2), height: 50px, - padding: 0 getCssVar(spacing, base-tight), + padding: getCssVar('spacing','none') getCssVar(spacing, base-tight), ); $control-grid-footer: (text-color: getCssVar(color, text, 2), @@ -106,7 +106,7 @@ font-weight: getCssVar(font-weight, bold), justify-content: center; & > * + *{ - margin-top: 3px; + margin-top: getCssVar('spacing','super-tight') } } @@ -116,7 +116,7 @@ font-weight: getCssVar(font-weight, bold), // 清除element单元格的padding &.el-table .el-table__cell { - padding: 0; + padding: getCssVar('spacing','none'); } // 行和列的背景色 @@ -188,7 +188,7 @@ font-weight: getCssVar(font-weight, bold), >td { height: 0; - padding: 0; + padding: getCssVar('spacing','none'); } .el-table__expand-icon{ @@ -208,7 +208,7 @@ font-weight: getCssVar(font-weight, bold), display: flex; align-items: center; height: 100%; - padding: 0; + padding: getCssVar('spacing','none'); } .el-table-column--selection .cell { @@ -257,11 +257,11 @@ font-weight: getCssVar(font-weight, bold), // 排序样式 .enable-order { position: relative; - padding-left: 14px; + padding-left: getCssVar('spacing','base-tight'); transition: transform .25s cubic-bezier(0, 0, .2, 1); .#{bem(control-grid__drag-icon)} { - padding: 0 !important; + padding: getCssVar('spacing','none') !important; .cell { display: none; diff --git a/src/control/grid/row-edit-popover/row-edit-popover.scss b/src/control/grid/row-edit-popover/row-edit-popover.scss index d8e161963..c7617a667 100644 --- a/src/control/grid/row-edit-popover/row-edit-popover.scss +++ b/src/control/grid/row-edit-popover/row-edit-popover.scss @@ -1,7 +1,7 @@ @include b(row-edit-popover) { position: absolute; z-index: 2; - padding: 9px 16px; + padding: getCssVar('spacing','tight') getCssVar('spacing','base'); background-color: getCssVar("control-grid","row-edit-bg-color"); @include when(hidden){ diff --git a/src/control/kanban/kanban.scss b/src/control/kanban/kanban.scss index 3bcdbbdda..bbb2646ef 100644 --- a/src/control/kanban/kanban.scss +++ b/src/control/kanban/kanban.scss @@ -32,7 +32,7 @@ $control-kanban: ( flex-direction: column; align-items: start; height: 100%; - padding: 0; + padding: getCssVar('spacing','none'); ion-icon { position: absolute; @@ -87,7 +87,7 @@ $control-kanban: ( @include e(header) { position: relative; height: getCssVar(control-kanban, group-header-height); - padding: 0 getCssVar(spacing, base); + padding: getCssVar('spacing','none') getCssVar(spacing, base); font-size: getCssVar(control-kanban, font-size); font-weight: getCssVar(control-kanban, font-weight); border-bottom: 1px solid getCssVar(color, border); @@ -125,7 +125,7 @@ $control-kanban: ( flex: auto; width: 100%; height: calc(100% - 48px); - padding: 0 getCssVar(spacing, tight); + padding: getCssVar('spacing','none') getCssVar(spacing, tight); overflow: auto; @include e(draggable) { min-height: 100%; @@ -150,18 +150,18 @@ $control-kanban: ( width: 32px; height: 32px; padding: getCssVar(spacing, tight); - margin-left: 4px; + margin-left: getCssVar('spacing','extra-tight'); font-size: getCssVar(control-kanban, font-size); color: getCssVar(color, primary); cursor: pointer; - border-radius: 50%; + border-radius: getCssVar('border','radius','circle'); &:hover { background-color: getCssVar(color, fill, 0); } } @include e(actions-dropdown) { - padding: getCssVar(spacing, extra, tight) 0; + padding: getCssVar(spacing, extra, tight) getCssVar('spacing','none'); .#{bem(action-toolbar)} { @include flex(column) } @@ -172,7 +172,7 @@ $control-kanban: ( justify-content: flex-start; width: 100%; padding: getCssVar(spacing, tight) getCssVar(spacing, base); - margin: 0; + margin: getCssVar('spacing','none'); font-size: getCssVar('font-size', 'regular'); color: getCssVar(color, primary, text); @@ -268,7 +268,7 @@ $control-kanban: ( @include e(info) { span { - margin: 0 getCssVar(spacing, extra, tight); + margin: getCssVar('spacing','none') getCssVar(spacing, extra, tight); color: getCssVar(color, primary); } } diff --git a/src/control/search-bar/filter-tree/filter-tree.scss b/src/control/search-bar/filter-tree/filter-tree.scss index 0f67d329d..e2f231422 100644 --- a/src/control/search-bar/filter-tree/filter-tree.scss +++ b/src/control/search-bar/filter-tree/filter-tree.scss @@ -1,9 +1,5 @@ @include b(filter-tree) { - padding: 16px; - - - - + padding: getCssVar('spacing','base'); // 编辑器样式 @include e(editor){ @@ -15,43 +11,43 @@ // 属性下拉样式 @include e(field-select){ width: 185px; - margin-right: 8px; + margin-right: getCssVar('spacing','tight'); } // 过滤模式下拉样式 @include e(mode-select){ width: 185px; - margin-right: 8px; + margin-right: getCssVar('spacing','tight'); } } @include b(filter-tree-group) { - padding: 6px; + padding: getCssVar('spacing','tight'); border: 1px solid getCssVar(color, border); @include e(actions){ - padding-bottom: 16px; + padding-bottom: getCssVar('spacing','base'); } @include e(logic-type){ width: 80px; - margin-left: 12px; + margin-left: getCssVar('spacing','tight'); } @include e(list-item){ position: relative; @include flex(row,flex-start, center); - padding-right: 15px; - padding-bottom: 16px; + padding-right: getCssVar('spacing','base'); + padding-bottom: getCssVar('spacing','base'); } @include e(list-item-left){ align-self: flex-start; width: 32px; - margin:5px 8px 0; - font-size: 14px; + margin:getCssVar('spacing','extra-tight') getCssVar('spacing','tight') getCssVar('spacing','none'); + font-size: getCssVar('font-size','regular'); color: getCssVar(editor-default-text-color) } @@ -85,6 +81,6 @@ } @include b(filter-tree-footer) { - margin-top: 8px; + margin-top: getCssVar('spacing','tight'); text-align: right; } \ No newline at end of file diff --git a/src/control/search-bar/search-bar.scss b/src/control/search-bar/search-bar.scss index 132ce6355..e2bc7375c 100644 --- a/src/control/search-bar/search-bar.scss +++ b/src/control/search-bar/search-bar.scss @@ -21,11 +21,11 @@ $control-searchbar: ( color: getCssVar('text-color'); background: getCssVar('color', 'white'); border: 1px solid getCssVar('border-color'); - border-radius: 4px; + border-radius: getCssVar('border','radius','small'); // 前缀不要padding &.el-input-group__append, .el-input-group__prepend{ - padding: 0; + padding: getCssVar('spacing','none');; } } diff --git a/src/control/tab-exp-panel/tab-exp-panel.scss b/src/control/tab-exp-panel/tab-exp-panel.scss index c75a93b79..2983aa6a5 100644 --- a/src/control/tab-exp-panel/tab-exp-panel.scss +++ b/src/control/tab-exp-panel/tab-exp-panel.scss @@ -2,10 +2,10 @@ // 标签栏 .el-tabs { .el-tabs__header { - margin: 0; + margin: getCssVar('spacing','none'); .el-tabs__nav-wrap { - margin: 0; + margin: getCssVar('spacing','none'); .el-tabs__nav { .el-tabs__active-bar { @@ -26,7 +26,7 @@ &.is-top { &:last-child { - padding-right: 0; + padding-right: getCssVar('spacing','none'); } } } diff --git a/src/control/tree-grid-ex/tree-grid-ex.scss b/src/control/tree-grid-ex/tree-grid-ex.scss index 24c78ac9f..91d680954 100644 --- a/src/control/tree-grid-ex/tree-grid-ex.scss +++ b/src/control/tree-grid-ex/tree-grid-ex.scss @@ -1,13 +1,13 @@ $control-treegridex: ( text-color: getCssVar(color, text, 0), bg-color: transparent, - padding: 0, + padding: getCssVar('spacing','none'), cell-padding: getCssVar(spacing, tight), selection-padding: getCssVar(spacing, base-loose), row-edit-bg-color: getCssVar(color, fill, 2), row-bg-color: getCssVar(color, bg, 1), row-bg-color-2: getCssVar(color, bg, 0), - row-expand-icon-margin: 0 0 0 getCssVar(spacing, tight), + row-expand-icon-margin: getCssVar('spacing','none') getCssVar('spacing','none') getCssVar('spacing','none') getCssVar(spacing, tight), ); $control-treegridex-header: ( @@ -73,7 +73,7 @@ $control-treegridex-footer: ( justify-content: center; & > * + *{ - margin-top: 3px; + margin-top: getCssVar('spacing','super-tight') } } @@ -83,7 +83,7 @@ $control-treegridex-footer: ( // 清除element单元格的padding &.el-table .el-table__cell { - padding: 0; + padding: getCssVar('spacing','none'); } // 行和列的背景色 @@ -150,7 +150,7 @@ $control-treegridex-footer: ( >td { height: 0; - padding: 0; + padding: getCssVar('spacing','none'); } .el-table__expand-icon{ @@ -170,7 +170,7 @@ $control-treegridex-footer: ( display: flex; align-items: center; height: 100%; - padding: 0; + padding: getCssVar('spacing','none'); } .el-table-column--selection .cell { diff --git a/src/panel-component/custom-setting/custom-setting-provider.ts b/src/panel-component/custom-setting/custom-setting-provider.ts new file mode 100644 index 000000000..356613761 --- /dev/null +++ b/src/panel-component/custom-setting/custom-setting-provider.ts @@ -0,0 +1,20 @@ +import { + IPanelItemProvider, + PanelController, + PanelItemController, +} from '@ibiz-template/runtime'; +import { IPanelItem } from '@ibiz/model-core'; + +export class CustomSettingProvider implements IPanelItemProvider { + component: string = 'IBizCustomSetting'; + + async createController( + panelItem: IPanelItem, + panel: PanelController, + parent: PanelItemController | undefined, + ): Promise { + const c = new PanelItemController(panelItem, panel, parent); + await c.init(); + return c; + } +} diff --git a/src/panel-component/custom-setting/custom-setting.scss b/src/panel-component/custom-setting/custom-setting.scss new file mode 100644 index 000000000..a71a56e8e --- /dev/null +++ b/src/panel-component/custom-setting/custom-setting.scss @@ -0,0 +1,33 @@ +@include b('custom-setting'){ + width: 100%; + height: 100%; + @include flex(row, center, center); + + @include e("image"){ + display: flex; + place-items: center center; + justify-content: center; + width: 28px; + height: 28px; + margin-bottom: 6px; + cursor: pointer; + } + @include e('list-popover'){ + &.el-popper{ + padding: 5px 0; + } + } + @include e('set-list'){ + width: 150px; + + @include m('item'){ + padding: 5px 10px; + + &:hover{ + color: getCssVar(color, text, 0); + cursor: pointer; + background-color: getCssVar(color,fill,1); + } + } + } + } \ No newline at end of file diff --git a/src/panel-component/custom-setting/custom-setting.tsx b/src/panel-component/custom-setting/custom-setting.tsx new file mode 100644 index 000000000..641807cf4 --- /dev/null +++ b/src/panel-component/custom-setting/custom-setting.tsx @@ -0,0 +1,119 @@ +import { PropType, defineComponent, ref } from 'vue'; +import { IPanelRawItem } from '@ibiz/model-core'; +import { PanelItemController } from '@ibiz-template/runtime'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import './custom-setting.scss'; + +export const CustomSetting = defineComponent({ + name: 'IBizCustomSetting', + props: { + modelData: { + type: Object as PropType, + required: true, + }, + controller: { + type: Object as PropType, + required: true, + }, + }, + setup(props) { + const ns = useNamespace('custom-setting'); + const c = props.controller; + + const visibleRef = ref(false); + + // 图片配置 + const imgConfig: IData = { + CUSTOM: { imagePath: 'svg/custom-workbench.svg' }, + }; + let sysImage = props.modelData.sysImage; + + if (!sysImage && props.modelData && props.modelData.rawItem) { + const predefinedType: string | undefined = + props.modelData.rawItem.predefinedType; + if (predefinedType) { + sysImage = imgConfig[predefinedType]; + } + } + + const funcList = [ + { + type: 'menu', + caption: '自定义菜单', + lang: 'panelComponent.customSetting.menu', // 国际化地址 + visible: false, + }, + { + type: 'theme', + caption: '自定义主题', + lang: 'panelComponent.customSetting.theme', + visible: true, + }, + ]; + + // 自定义设置菜单 + const clickCustomMenu = () => {}; + + // 自定义设置主题 + const clickCustomTheme = () => { + ibiz.util.theme.customTheme(); + }; + + // 点击自定义功能 + const clickCustomFunc = (key: string) => { + visibleRef.value = false; + // eslint-disable-next-line default-case + switch (key) { + case 'menu': + clickCustomMenu(); + break; + case 'theme': + clickCustomTheme(); + break; + } + }; + + return { ns, c, visibleRef, sysImage, funcList, clickCustomFunc }; + }, + render() { + return ( + + {{ + default: () => { + return ( +
+ {this.funcList.map(item => { + if (!item.visible) return; + return ( +
this.clickCustomFunc(item.type)} + > + {ibiz.i18n.t(item.lang)} +
+ ); + })} +
+ ); + }, + reference: () => { + return ( +
+ +
+ ); + }, + }} + + ); + }, +}); diff --git a/src/panel-component/custom-setting/index.ts b/src/panel-component/custom-setting/index.ts new file mode 100644 index 000000000..afed65565 --- /dev/null +++ b/src/panel-component/custom-setting/index.ts @@ -0,0 +1,15 @@ +import { App } from 'vue'; +import { withInstall } from '@ibiz-template/vue3-util'; +import { registerPanelItemProvider } from '@ibiz-template/runtime'; +import { CustomSetting } from './custom-setting'; +import { CustomSettingProvider } from './custom-setting-provider'; + +export const IBizCustomSetting = withInstall(CustomSetting, function (v: App) { + v.component(CustomSetting.name, CustomSetting); + registerPanelItemProvider( + 'RAWITEM_CUSTOM', + () => new CustomSettingProvider(), + ); +}); + +export default IBizCustomSetting; diff --git a/src/panel-component/index.ts b/src/panel-component/index.ts index 7c4350244..63c6a5da1 100644 --- a/src/panel-component/index.ts +++ b/src/panel-component/index.ts @@ -41,6 +41,7 @@ import IBizUserAction from './user-action'; import IBizDataImport from './data-import'; import IBizShortCut from './short-cut'; import IBizAuthCaptcha from './auth-captcha'; +import IBizCustomSetting from './custom-setting'; export * from './auth-userinfo'; export * from './nav-pos-index'; @@ -51,6 +52,7 @@ export * from './split-container'; export * from './panel-index-view-search'; export * from './index-actions'; export * from './user-action'; +export * from './custom-setting'; export const IBizPanelComponents = { install: (v: App): void => { @@ -94,6 +96,7 @@ export const IBizPanelComponents = { v.use(IBizDataImport); v.use(IBizShortCut); v.use(IBizAuthCaptcha); + v.use(IBizCustomSetting); }, }; -- Gitee From 238ed73fbaf3f5fb966e359dff3825b2294fd1b5 Mon Sep 17 00:00:00 2001 From: RedPig97 <1978141412@qq.com> Date: Wed, 15 May 2024 20:05:08 +0800 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96?= =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=97=B6=E5=88=9D=E5=A7=8B=E5=8C=96=E4=B8=BB?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/web-app/guard/auth-guard/auth-guard.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/web-app/guard/auth-guard/auth-guard.ts b/src/web-app/guard/auth-guard/auth-guard.ts index 87506f907..342508d5b 100644 --- a/src/web-app/guard/auth-guard/auth-guard.ts +++ b/src/web-app/guard/auth-guard/auth-guard.ts @@ -162,6 +162,7 @@ export class AuthGuard { // 快到过期时间自动换算token await ibiz.auth.extendLogin(); await ibiz.hub.notice.init(); + await ibiz.util.theme.initCustomTheme(); } /** -- Gitee From d6fe232ba38d8f11ca3fc4626f72d2023e170c7a Mon Sep 17 00:00:00 2001 From: RedPig97 <1978141412@qq.com> Date: Wed, 15 May 2024 20:09:35 +0800 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=E4=B8=BB=E9=A2=98=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E5=90=8D=E7=A7=B0=E7=BB=9F=E4=B8=80=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-picker/ibiz-picker/ibiz-picker.scss | 12 +- src/editor/html/wang-editor/wang-editor.scss | 49 +++--- src/editor/text-box/input/input.scss | 16 +- .../index-actions/index-actions.scss | 2 +- .../panel-app-login-view.scss | 64 ++------ .../searchform-buttons.scss | 6 +- src/panel-component/short-cut/short-cut.scss | 150 ++++++++---------- .../async-action-preview.scss | 29 ++-- .../app-float-window-component.scss | 5 +- src/util/app-modal/app-modal-component.scss | 14 +- src/view/403-view/403-view.scss | 8 +- src/view/404-view/404-view.scss | 8 +- src/view/login-view/login-view.scss | 63 ++------ 13 files changed, 170 insertions(+), 256 deletions(-) diff --git a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss index 212d2397d..efee72515 100644 --- a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss +++ b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss @@ -1,6 +1,6 @@ /* picker 数据选择 */ $picker: ( - 'height': 32px, + 'height': getCssVar(editor, default, line-height), ); @include b('picker') { @@ -58,7 +58,7 @@ $picker: ( } @include e('transfer-item') { - padding: 5px; + padding: getCssVar('spacing', 'extra-tight'); cursor: pointer; &:hover { @@ -67,10 +67,10 @@ $picker: ( } @include e('link') { - width: 32px; - height: 32px; - padding: 0 6px; - font-size: 16px; + width: getCssVar('font-size', 'header-1'); + height: getCssVar('font-size', 'header-1'); + padding: 0 getCssVar('spacing', 'tight'); + font-size: getCssVar('font-size', 'header-6'); } @include m(disabled) { diff --git a/src/editor/html/wang-editor/wang-editor.scss b/src/editor/html/wang-editor/wang-editor.scss index ce2ec034e..60e039f9a 100644 --- a/src/editor/html/wang-editor/wang-editor.scss +++ b/src/editor/html/wang-editor/wang-editor.scss @@ -27,19 +27,18 @@ $html: ( border-collapse: collapse; th { - height: 49px; - min-height: 49px; - padding: 8px; - background-color: #f3f3f3; - border: 1px solid lightgray; + height: getCssVar('height-control', 'large'); + min-height: getCssVar('height-control', 'large'); + padding: getCssVar('spacing', 'tight'); + border: 1px solid getCssVar(color, border); } td { - height: 49px; - min-height: 49px; - padding: 8px; + height: getCssVar('height-control', 'large'); + min-height: getCssVar('height-control', 'large'); + padding: getCssVar('spacing', 'tight'); empty-cells: show; - border: 1px solid lightgray; + border: 1px solid getCssVar(color, border); } } } @@ -97,17 +96,17 @@ $html: ( display: flex; align-items: center; justify-content: end; - margin-top: 12px; - margin-right: 8px; + margin-top: getCssVar('spacing', 'base-tight'); + margin-right: getCssVar('spacing', 'tight'); &>*+* { - margin-left: 16px; + margin-left: getCssVar('spacing', 'base'); } @include e('cancel') { - height: 36px; - line-height: 36px; + height: getCssVar('height-control', 'default'); + line-height: getCssVar('height-control', 'default'); color: #{getCssVar(color, text, 1)}; cursor: pointer; opacity: 0.7; @@ -119,18 +118,14 @@ $html: ( } @include e('save') { - width: 96px; - height: 36px; - line-height: 36px; + height: getCssVar('height-control', 'default'); + padding: 0 getCssVar('spacing', 'base'); + line-height: getCssVar('height-control', 'default'); color: #{getCssVar(color, primary, active, text)}; text-align: center; cursor: pointer; background-color: #{getCssVar(color, primary)}; - border-radius: 5px; - - &:hover { - box-shadow: 0 2px 5px 1px #{getCssVar(color, primary)}; - } + border-radius: getCssVar(border, radius, small); } } @@ -139,12 +134,12 @@ $html: ( align-items: center; justify-content: end; width: 100%; - height: 32px; - padding-right: 16px; - font-size: 16px; + height: getCssVar('height-control', 'default'); + padding-right: getCssVar('spacing', 'base'); + font-size: getCssVar('font-size', 'header-6'); &>*+* { - margin-left: 20px; + margin-left: getCssVar('spacing', 'base-loose'); } i { @@ -189,7 +184,7 @@ $html: ( height: 80%; @include b('html') { - padding: 0 32px; + padding: 0 getCssVar('spacing', 'extra-loose'); --w-e-toolbar-bg-color: #{getCssVar(color, bg, 0)}; } diff --git a/src/editor/text-box/input/input.scss b/src/editor/text-box/input/input.scss index d25359586..ecf263210 100644 --- a/src/editor/text-box/input/input.scss +++ b/src/editor/text-box/input/input.scss @@ -10,17 +10,19 @@ $input: ( @include set-component-css-var(input, $input); @include e(ai-chat) { + @include flex(row, center, center); + position: absolute; - right: 10px; - bottom: 10px; - width: 36px; - height: 36px; - padding: 8px; - font-size: 18px; + right: getCssVar('spacing', 'base-loose'); + bottom: getCssVar('spacing', 'base-loose'); + width: calc(getCssVar('width-icon', 'medium') + 2 * getCssVar('spacing', 'tight')); + height: calc(getCssVar('width-icon', 'medium') + 2 * getCssVar('spacing', 'tight')); + padding: getCssVar('spacing', 'tight'); + font-size: getCssVar('width-icon', 'medium'); color: getCssVar(color, primary, text); cursor: pointer; background-color: getCssVar(color, primary); - border-radius: 15px; + border-radius: getCssVar(border, radius, circle); &:hover { color: getCssVar(color, primary, hover, text); diff --git a/src/panel-component/index-actions/index-actions.scss b/src/panel-component/index-actions/index-actions.scss index 23a91e1e4..d0e4c7e38 100644 --- a/src/panel-component/index-actions/index-actions.scss +++ b/src/panel-component/index-actions/index-actions.scss @@ -26,7 +26,7 @@ // 按钮样式 .el-button { - font-size: 28px; + font-size: getCssVar('font-size', 'header-2'); } .el-button:hover { diff --git a/src/panel-component/panel-app-login-view/panel-app-login-view.scss b/src/panel-component/panel-app-login-view/panel-app-login-view.scss index b9516474c..42deaa9e4 100644 --- a/src/panel-component/panel-app-login-view/panel-app-login-view.scss +++ b/src/panel-component/panel-app-login-view/panel-app-login-view.scss @@ -11,33 +11,7 @@ $panel-app-login-view: ( justify-content: center; width: 100vw; height: 100vh; - background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); - - --el-color-primary: #409eff; - - .el-input { - --el-input-text-color: #606266; - --el-input-border-color: #dcdfe6; - --el-input-hover-border-color: #c0c4cc; - --el-input-icon-color: #a8abb2; - } - - .el-button { - --el-button-text-color: var(--el-color-white); - --el-button-bg-color: var(--el-color-primary); - --el-button-border-color: var(--el-color-primary); - --el-button-outline-color: var(--el-color-primary-light-5); - --el-button-active-color: var(--el-color-primary-dark-2); - --el-button-hover-text-color: var(--el-color-white); - --el-button-hover-link-text-color: var(--el-color-primary-light-5); - --el-button-hover-bg-color: var(--el-color-primary-light-3); - --el-button-hover-border-color: var(--el-color-primary-light-3); - --el-button-active-bg-color: var(--el-color-primary-dark-2); - --el-button-active-border-color: var(--el-color-primary-dark-2); - --el-button-disabled-text-color: var(--el-color-white); - --el-button-disabled-bg-color: var(--el-color-primary-light-5); - --el-button-disabled-border-color: var(--el-color-primary-light-5); - } + background: linear-gradient(120deg, getCssVar(color, primary, light, active) 0%, getCssVar(color, primary, light, default) 100%); // 整体 .#{bem(panel-container,'',container1)} { @@ -54,15 +28,16 @@ $panel-app-login-view: ( .#{bem(rawitem)} { position: absolute; - top: 28%; - left: 50%; - height: auto; + top: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 80%; font-size: getCssVar(font-size, header-2); font-weight: getCssVar(font-weight, bold); - color: rgb(getCssVar(white)); - text-align: center; - text-shadow: 0 2px 6px rgb(0 0 0 / 54%); - transform: translateX(-50%); + color: getCssVar(color, white); + text-shadow: getCssVar(color, shadow); } } @@ -71,21 +46,16 @@ $panel-app-login-view: ( position: relative; height: 380px; padding: 100px 40px 40px; - background: #fff; + background: getCssVar(color, white); // 浏览器自动填写之后的输入框的背景色和文字颜色 .el-input__inner:-webkit-autofill{ - box-shadow:0 0 0 1000px #fff inset; - -webkit-text-fill-color: #606266; - } - - .el-input__prefix{ - width: 20px; - margin-left: -1px; + box-shadow:0 0 0 1000px getCssVar(color, white) inset; + -webkit-text-fill-color: getCssVar(editor, default, text-color); } ion-icon { - font-size: 16px; + font-size: getCssVar(width-icon, medium); } } @@ -101,13 +71,12 @@ $panel-app-login-view: ( user-select: none; background: getCssVar(panel-app-login-view, avatar-url); background-size: 100% 100%; - border: 4px solid #fff; - border-radius: 50%; + border: 4px solid getCssVar(color, white); + border-radius: getCssVar(border, radius, circle); } // 按钮 .#{bem(panel-container,'',container3)}{ - >.#{bem(row)}{ & > * + *{ margin-left: 10px; @@ -124,8 +93,7 @@ $panel-app-login-view: ( padding: 0; .el-button { - font-weight: 300; - letter-spacing: 2px; + letter-spacing: getCssVar(spacing, super-tight); } } } diff --git a/src/panel-component/searchform-buttons/searchform-buttons.scss b/src/panel-component/searchform-buttons/searchform-buttons.scss index d7e87a449..370bf8501 100644 --- a/src/panel-component/searchform-buttons/searchform-buttons.scss +++ b/src/panel-component/searchform-buttons/searchform-buttons.scss @@ -17,15 +17,15 @@ $searchform-buttons: ( position: relative; @include e(text){ - padding-right: 4px; + padding-right: getCssVar('spacing', 'extra-tight'); } @include e(remove){ position: absolute; - top: 11px; + top: getCssVar('spacing', 'base-tight'); right: 0; display: none; - font-size: 18px; + font-size: getCssVar('font-size', 'header-5'); } &:hover{ diff --git a/src/panel-component/short-cut/short-cut.scss b/src/panel-component/short-cut/short-cut.scss index 9cac047ba..9b7c986ac 100644 --- a/src/panel-component/short-cut/short-cut.scss +++ b/src/panel-component/short-cut/short-cut.scss @@ -1,98 +1,93 @@ -@include b('short-cut') { - bottom: 4px; +@include b(short-cut) { + position: fixed; right: 4px; + bottom: 4px; z-index: 2; - position: fixed; display: flex; align-items: center; - border-radius: 4px; - box-shadow: 0 0 16px #00000014; - border: 1px solid var(--ibiz-color-border); background: var(--ibiz-color-bg-1); + border: 1px solid var(--ibiz-color-border); + border-radius: getCssVar(border, radius, small); + box-shadow: getCssVar(shadow, elevated); - @include when('conceal') { - visibility: hidden; + @include when(hidden) { + display: none; } - @include e('more') { - padding: 2px; + @include e(more) { + padding: getCssVar(spacing, super-tight); cursor: pointer; + .el-tooltip__trigger { - padding: 8px; - line-height: 16px; + padding: getCssVar(spacing, tight); + line-height: getCssVar(font-size, header-5); + &:hover { - border-radius: 2px; color: var(--ibiz-color-primary); background-color: var(--ibiz-color-primary-light-default); + border-radius: getCssVar(border, radius, extra, small); } } - .recover-icon { - font-size: 16px; - margin-left: 8px; + @include m(icon) { + margin-left: getCssVar(spacing, tight); } } - @include e('recover') { - padding: 2px; + @include e(recover) { display: flex; - cursor: pointer; align-items: center; + padding: getCssVar(spacing, super-tight); + cursor: pointer; + .el-tooltip__trigger { - padding: 8px; - line-height: 16px; + padding: getCssVar(spacing, tight); + line-height: getCssVar(font-size, header-5); + &:hover { - border-radius: 2px; color: var(--ibiz-color-primary); background-color: var(--ibiz-color-primary-light-default); + border-radius: getCssVar(border, radius, extra, small); } } } - @include e('action') { - display: flex; - cursor: pointer; - position: relative; - align-items: center; - flex-flow: row nowrap; - place-content: center flex-start; - width: 225px; - height: 44px; - padding: 9px 20px; - .expand-icon { - font-size: 16px; - margin-right: 8px; - } - } - // 项通用样式 - @include e('item') { - display: flex; - cursor: pointer; + @include e(item) { position: relative; - align-items: center; + display: flex; flex-flow: row nowrap; place-content: center flex-start; + align-items: center; + cursor: pointer; + .icon { flex-shrink: 0; - font-size: 16px; - } - .caption-icon { - margin-right: 8px; + + &.caption { + margin-right: getCssVar(spacing, tight); + } } - .close-icon, + .drag-icon { visibility: hidden; } - .close-icon:hover { - color: var(--ibiz-color-danger-hover); + + .close-icon { + font-size: getCssVar(font-size, header-5); + visibility: hidden; + + &:hover { + color: getCssVar(color, danger, hover); + } } - @include m('caption') { + @include m(caption) { flex-grow: 1; - font-size: 14px; - white-space: nowrap; overflow: hidden; + font-size: getCssVar(font-size, regular); text-overflow: ellipsis; + white-space: nowrap; } + &:hover { .drag-icon, .close-icon { @@ -104,56 +99,35 @@ // 水平样式 .is-horizontal { display: flex; - padding: 8px 0; - @include e('item') { - max-width: 168px; - min-width: 84px; - padding: 0 12px; - border-right: 1px solid var(--ibiz-color-border); - .close-icon { - right: 0; - position: absolute; - padding-right: 4px; - background-color: var(--ibiz-color-white); - box-shadow: -10px 0 20px 8px var(--ibiz-color-white); - } - .drag-icon { - display: none; - margin-right: 8px; - } - &:hover { - .drag-icon { - display: block; - } - .caption-icon { - display: none; - } + padding: getCssVar(spacing, tight); + @include e(item) { + max-width: 165px; + border-right: 1px solid getCssVar(color, border); + @include m(caption) { + margin: 0 getCssVar(spacing, tight); } } } // popover垂直样式 - @include e('popover') { - .is-hidden { - display: none; - } - + @include e(popover) { &.el-popover.el-popper { - padding: 10px 0; + padding: getCssVar(spacing, base-tight) 0; } + .is-vertical { - max-height: 400px; - overflow-y: auto; - @include e('item') { + @include e(item) { width: 225px; height: 44px; - padding: 9px 20px; + padding: getCssVar(spacing, tight) getCssVar(spacing, base-loose); + .drag-icon { - left: 5px; position: absolute; + left: getCssVar(spacing, extra-tight); } + &:hover { - background-color: var(--ibiz-color-fill-1); + background-color: getCssVar(color, fill, 1); } } } diff --git a/src/panel-component/user-message/async-action/async-action-preview/async-action-preview.scss b/src/panel-component/user-message/async-action/async-action-preview/async-action-preview.scss index f812f1acb..8115d5969 100644 --- a/src/panel-component/user-message/async-action/async-action-preview/async-action-preview.scss +++ b/src/panel-component/user-message/async-action/async-action-preview/async-action-preview.scss @@ -3,26 +3,30 @@ $async-action-preview: ( @include b(async-action-preview) { @include set-component-css-var('async-action-preview', $async-action-preview); + height: 100%; @include flex(column); + padding: getCssVar(spacing, tight); @include e(title){ - font-size: 18px; - font-weight: bold; + font-size: getCssVar('font-size', 'header-5'); + font-weight: getCssVar('font-weight', 'bold'); } .el-form-item{ margin: 0; } + .el-form-item__label,.el-form-item__content{ - font-weight: bold; + font-weight: getCssVar('font-weight', 'bold'); } } @include b(async-action-preview-header) { @include flex(row, space-between, center); + height: 48px; padding: getCssVar(spacing, tight); border-bottom: 1px solid getCssVar(color, border); @@ -34,9 +38,9 @@ $async-action-preview: ( } @include b(async-action-preview-count) { + height: 48px; padding: getCssVar(spacing, tight); @include flex(row, space-between, center); - height: 48px; } @@ -48,25 +52,26 @@ $async-action-preview: ( @include b(async-action-preview-detail-item) { @include flex(row, space-between, center); + height: 72px; - padding: 12px getCssVar(spacing, base); + padding: getCssVar('spacing', 'base-tight') getCssVar(spacing, base); border-bottom: 1px solid getCssVar(color, border); @include e(index){ - margin-right: 16px; + width: 40px; height: 40px; - font-size: 20px; - text-align: center; + margin-right: getCssVar('spacing', 'base'); + font-size: getCssVar('font-size', 'header-4'); line-height: 40px; - width: 40px; - border-radius: 0; - background-color: getCssVar(color,primary); color: getCssVar(color, primary, text); + text-align: center; + background-color: getCssVar(color,primary); + border-radius: 0; } @include e(error){ - height: 100%; flex-grow: 1; + height: 100%; text-align: left; @include flex(column, space-between, flex-start); } diff --git a/src/util/app-float-window/app-float-window-component.scss b/src/util/app-float-window/app-float-window-component.scss index 3c25ab56a..86403b3eb 100644 --- a/src/util/app-float-window/app-float-window-component.scss +++ b/src/util/app-float-window/app-float-window-component.scss @@ -1,6 +1,6 @@ @include b(float-window) { position: absolute; - background-color: #ccc; + background-color: getCssVar(color, tertiary, light, active); @include flex(column); } @@ -11,6 +11,5 @@ @include b(float-window-content) { flex-grow: 1; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden auto; } diff --git a/src/util/app-modal/app-modal-component.scss b/src/util/app-modal/app-modal-component.scss index 4be38d078..aec0fb5d3 100644 --- a/src/util/app-modal/app-modal-component.scss +++ b/src/util/app-modal/app-modal-component.scss @@ -1,13 +1,13 @@ /* 模态 start */ $modal: ( - 'z-index': getCssVar('z-index', 'modal'), - 'background-color': #{getCssVar(color, bg, 1)}, + z-index: getCssVar(z-index, modal), + background-color: #{getCssVar(color, bg, 1)}, ); /* 模态 end */ @include b(modal) { - @include set-component-css-var('modal', $modal); + @include set-component-css-var(modal, $modal); &.el-dialog { overflow: visible; @@ -19,9 +19,9 @@ $modal: ( } .el-dialog__body { - background-color: getCssVar(modal, 'background-color'); height: 100%; padding: 0; + background-color: getCssVar(modal, background-color); } // 模态关闭图标位置 @@ -29,9 +29,9 @@ $modal: ( top: -40px; right: -60px; - // z-index: getCssVar('modal', 'z-index'); - border: 2px solid getCssVar(color, white); - border-radius: 50%; + // z-index: getCssVar(modal, z-index); + border: getCssVar('spacing', 'super-tight') solid getCssVar(color, white); + border-radius: getCssVar(border, radius, circle); @include flex(row, center, center); .el-dialog__close{ diff --git a/src/view/403-view/403-view.scss b/src/view/403-view/403-view.scss index 6f34277f0..84f510b30 100644 --- a/src/view/403-view/403-view.scss +++ b/src/view/403-view/403-view.scss @@ -3,18 +3,18 @@ width: 100%; height: 100%; - font-size: 16px; + font-size: getCssVar(font-size, header-6); @include b(403-view-text) { - margin-top: 40px; + margin-top: getCssVar(spacing, super-loose); @include flex(column, center, center); @include e(text1) { - margin-bottom: 20px; + margin-bottom: getCssVar(spacing, base-loose); } @include e(text2){ a{ - color: rgb(85 125 165 / 100%); + color: getCssVar(color, link); cursor: pointer; } } diff --git a/src/view/404-view/404-view.scss b/src/view/404-view/404-view.scss index fe9febcb3..ed11304e7 100644 --- a/src/view/404-view/404-view.scss +++ b/src/view/404-view/404-view.scss @@ -3,18 +3,18 @@ width: 100%; height: 100%; - font-size: 16px; + font-size: getCssVar(font-size, header-6); @include b(404-view-text) { - margin-top: 40px; + margin-top: getCssVar(spacing, super-loose); @include flex(column, center, center); @include e(text1) { - margin-bottom: 20px; + margin-bottom: getCssVar(spacing, base-loose); } @include e(text2){ a{ - color: rgb(85 125 165 / 100%); + color: getCssVar(color, link); cursor: pointer; } } diff --git a/src/view/login-view/login-view.scss b/src/view/login-view/login-view.scss index ae330a899..a058a71f4 100644 --- a/src/view/login-view/login-view.scss +++ b/src/view/login-view/login-view.scss @@ -5,33 +5,7 @@ justify-content: center; width: 100vw; height: 100vh; - background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); - - --el-color-primary: #409eff; - - .el-input { - --el-input-text-color: #606266; - --el-input-border-color: #dcdfe6; - --el-input-hover-border-color: #c0c4cc; - --el-input-icon-color: #a8abb2; - } - - .el-button--primary { - --el-button-text-color: var(--el-color-white); - --el-button-bg-color: var(--el-color-primary); - --el-button-border-color: var(--el-color-primary); - --el-button-outline-color: var(--el-color-primary-light-5); - --el-button-active-color: var(--el-color-primary-dark-2); - --el-button-hover-text-color: var(--el-color-white); - --el-button-hover-link-text-color: var(--el-color-primary-light-5); - --el-button-hover-bg-color: var(--el-color-primary-light-3); - --el-button-hover-border-color: var(--el-color-primary-light-3); - --el-button-active-bg-color: var(--el-color-primary-dark-2); - --el-button-active-border-color: var(--el-color-primary-dark-2); - --el-button-disabled-text-color: var(--el-color-white); - --el-button-disabled-bg-color: var(--el-color-primary-light-5); - --el-button-disabled-border-color: var(--el-color-primary-light-5); - } + background: linear-gradient(120deg, getCssVar(color, primary, light, active) 0%, getCssVar(color, primary, light, default) 100%); } @@ -39,7 +13,7 @@ width: 430px; margin-bottom: 80px; overflow: hidden; - background: #fff; + background: getCssVar(color, bg, 2); } /* stylelint-disable-next-line media-feature-range-notation */ @@ -52,7 +26,6 @@ @include b(login-view-box-header) { position: relative; - background: #ccf; > img { display: block; @@ -63,14 +36,17 @@ @include b(login-view-box-header-title){ position: absolute; - top: 28%; - left: 50%; + top: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 80%; font-size: getCssVar(font-size, header-2); font-weight: getCssVar(font-weight, bold); - color: rgb(getCssVar(white)); - text-shadow: 0 2px 6px rgb(0 0 0 / 54%); + color: getCssVar(color, white); + text-shadow: getCssVar(color, shadow); white-space: nowrap; - transform: translateX(-50%); } } @@ -86,8 +62,8 @@ width: 100px; height: 100px; user-select: none; - border: 4px solid #fff; - border-radius: 50%; + border: 4px solid getCssVar(color, white); + border-radius: getCssVar(border, radius, circle); } } @@ -96,23 +72,18 @@ // 浏览器自动填写之后的输入框的背景色和文字颜色 .el-input__inner:-webkit-autofill{ - box-shadow:0 0 0 1000px #fff inset; - -webkit-text-fill-color: #606266; + box-shadow:0 0 0 1000px getCssVar(color, white) inset; + -webkit-text-fill-color: getCssVar(editor, default, text-color); } .el-button { width: 100%; - margin-top: 15px; - font-weight: 300; - letter-spacing: 2px; + margin-top: getCssVar(spacing, base); + letter-spacing: getCssVar(spacing, super-tight); } - .el-input__prefix{ - width: 20px; - margin-left: -1px; - } ion-icon { - font-size: 16px; + font-size: getCssVar(width-icon, medium); } } -- Gitee