lzq
/
njzscloud-dispose-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

色彩调整

master
lzq 2026-01-31 19:16:51 +08:00
parent 306e54afeb
commit a51f166897
26 changed files with 308 additions and 485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/assets/stylus/button.styl
View File

@ -1,160 +0,0 @@
.el-button {
/*--el-button-text-color oklch(72% .19 231.6) !important;
--el-button-bg-color oklch(0.96 0.03 224.26) !important;
--el-button-border-color: oklch(0.96 0.03 224.26) !important;
--el-button-hover-text-color: oklch(72% .19 231.6) !important;
--el-button-hover-bg-color: oklch(0.96 0.03 224.26) !important;
--el-button-hover-border-color: oklch(0.96 0.03 224.26) !important;*/
height: var(--el-component-custom-height) !important;
}
.el-button--default.is-circle {
width: var(--el-component-custom-height) !important;
}
// 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
/*
.el-button--primary {
--el-button-text-color #FFFFFF !important;
--el-button-bg-color #5D87FF !important;
--el-button-border-color: #5D87FF !important;
--el-button-hover-text-color: #FFFFFF !important;
--el-button-hover-bg-color: #8DABFF !important;
--el-button-hover-border-color: #8DABFF !important;
}
*/
/* ========== Default 按钮配置 ========== */
.el-button--default {
--el-button-text-color: var(--el-color-default) !important;
--el-button-bg-color: var(--el-color-white) !important;
--el-button-border-color: var(--el-border-color-light) !important;
--el-button-hover-text-color: var(--el-color-primary) !important;
--el-button-hover-bg-color: var(--el-color-primary-light-9) !important;
--el-button-hover-border-color: var(--el-color-primary-light-7) !important;
--el-button-active-text-color: var(--el-color-primary) !important;
--el-button-active-bg-color: var(--el-color-primary-light-9) !important;
--el-button-active-border-color: var(--el-color-primary) !important;
--el-button-outline-color: var(--el-color-default-dark-2) !important;
--el-button-hover-link-text-color: var(--el-text-color-regular) !important;
--el-button-disabled-text-color: var(--el-color-default-light-5) !important;
--el-button-disabled-bg-color: #F9FAFB !important;
--el-button-disabled-border-color: #F9FAFB !important;
}
/* ========== Primary 按钮配置 ========== */
.el-button--primary {
--el-button-text-color: var(--el-color-primary) !important;
--el-button-bg-color: var(--el-bg-primary) !important;
--el-button-border-color: var(--el-bg-primary) !important;
--el-button-outline-color: var(--el-color-primary-light-5) !important;
--el-button-active-color: var(--el-color-primary-dark-2) !important;
--el-button-hover-text-color: var(--el-color-primary) !important;
--el-button-hover-link-text-color: var(--el-color-primary-light-5) !important;
--el-button-hover-bg-color: #E1E8FF !important;
--el-button-hover-border-color: #E1E8FF !important;
--el-button-active-bg-color: #D7E0FF !important;
--el-button-active-border-color: #D7E0FF !important;
--el-button-disabled-text-color: var(--el-color-primary-light-5) !important;
--el-button-disabled-bg-color: #F0F4FF !important;
--el-button-disabled-border-color: #F0F4FF !important;
}
/* ========== Success 按钮配置 ========== */
.el-button--success {
--el-button-text-color: var(--el-color-success) !important;
--el-button-bg-color: var(--el-bg-success) !important;
--el-button-border-color: var(--el-bg-success) !important;
--el-button-outline-color: var(--el-color-success-light-5) !important;
--el-button-active-color: var(--el-color-success-dark-2) !important;
--el-button-hover-text-color: var(--el-color-success) !important;
--el-button-hover-link-text-color: var(--el-color-success-light-5) !important;
--el-button-hover-bg-color: oklch(0.97 0.02 140.1) !important;
--el-button-hover-border-color: oklch(0.97 0.02 140.1) !important;
--el-button-active-bg-color: oklch(0.95 0.02 140.1) !important;
--el-button-active-border-color: oklch(0.95 0.02 140.1) !important;
--el-button-disabled-text-color: var(--el-color-success-light-5) !important;
--el-button-disabled-bg-color: oklch(0.98 0.01 140.1) !important;
--el-button-disabled-border-color: oklch(0.98 0.01 140.1) !important;
}
/* ========== Warning 按钮配置 ========== */
.el-button--warning {
--el-button-text-color: var(--el-color-warning) !important;
--el-button-bg-color: var(--el-bg-warning) !important;
--el-button-border-color: var(--el-bg-warning) !important;
--el-button-outline-color: var(--el-color-warning-light-5) !important;
--el-button-active-color: var(--el-color-warning-dark-2) !important;
--el-button-hover-text-color: var(--el-color-warning) !important;
--el-button-hover-link-text-color: var(--el-color-warning-light-5) !important;
--el-button-hover-bg-color: oklch(0.97 0.03 58.5) !important;
--el-button-hover-border-color: oklch(0.97 0.03 58.5) !important;
--el-button-active-bg-color: oklch(0.95 0.03 58.5) !important;
--el-button-active-border-color: oklch(0.95 0.03 58.5) !important;
--el-button-disabled-text-color: var(--el-color-warning-light-5) !important;
--el-button-disabled-bg-color: oklch(0.98 0.02 58.5) !important;
--el-button-disabled-border-color: oklch(0.98 0.02 58.5) !important;
}
/* ========== Info 按钮配置 ========== */
.el-button--info {
--el-button-text-color: var(--el-color-info) !important;
--el-button-bg-color: var(--el-bg-info) !important;
--el-button-border-color: var(--el-bg-info) !important;
--el-button-outline-color: var(--el-color-info-light-5) !important;
--el-button-active-color: var(--el-color-info-dark-2) !important;
--el-button-hover-text-color: var(--el-color-info) !important;
--el-button-hover-link-text-color: var(--el-color-info-light-5) !important;
--el-button-hover-bg-color: oklch(0.97 0.03 224.26) !important;
--el-button-hover-border-color: oklch(0.97 0.03 224.26) !important;
--el-button-active-bg-color: oklch(0.95 0.03 224.26) !important;
--el-button-active-border-color: oklch(0.95 0.03 224.26) !important;
--el-button-disabled-text-color: var(--el-color-info-light-5) !important;
--el-button-disabled-bg-color: oklch(0.98 0.02 224.26) !important;
--el-button-disabled-border-color: oklch(0.98 0.02 224.26) !important;
}
/* ========== Danger 按钮配置 ========== */
.el-button--danger {
--el-button-text-color: var(--el-color-danger) !important;
--el-button-bg-color: var(--el-bg-danger) !important;
--el-button-border-color: var(--el-bg-danger) !important;
--el-button-outline-color: var(--el-color-danger-light-5) !important;
--el-button-active-color: var(--el-color-danger-dark-2) !important;
--el-button-hover-text-color: var(--el-color-danger) !important;
--el-button-hover-link-text-color: var(--el-color-danger-light-5) !important;
--el-button-hover-bg-color: oklch(0.97 0.02 22.09) !important;
--el-button-hover-border-color: oklch(0.97 0.02 22.09) !important;
--el-button-active-bg-color: oklch(0.95 0.02 22.09) !important;
--el-button-active-border-color: oklch(0.95 0.02 22.09) !important;
--el-button-disabled-text-color: var(--el-color-danger-light-5) !important;
--el-button-disabled-bg-color: oklch(0.98 0.01 22.09) !important;
--el-button-disabled-border-color: oklch(0.98 0.01 22.09) !important;
}
/* ========== Text 按钮配置 ========== */
.el-button--text {
--el-button-text-color: var(--el-color-text-btn) !important;
--el-button-bg-color: var(--el-bg-text) !important;
--el-button-border-color: var(--el-bg-text) !important;
--el-button-outline-color: var(--el-color-text-btn-light-5) !important;
--el-button-active-color: var(--el-color-text-btn-dark-2) !important;
--el-button-hover-text-color: var(--el-color-text-btn) !important;
--el-button-hover-link-text-color: var(--el-color-text-btn-light-5) !important;
--el-button-hover-bg-color: #F9FAFB !important;
--el-button-hover-border-color: #F9FAFB !important;
--el-button-active-bg-color: #E9EBF0 !important;
--el-button-active-border-color: #E9EBF0 !important;
--el-button-disabled-text-color: var(--el-color-text-btn-light-5) !important;
--el-button-disabled-bg-color: #FAFBFC !important;
--el-button-disabled-border-color: #FAFBFC !important;
}

4
src/assets/stylus/dialog.styl
View File

@ -38,11 +38,11 @@
.draggable-dialog > .el-dialog__header {
border-bottom: 1px solid #EAEBF1;
border-bottom: 1px solid var(--el-border-color-light);
}
.draggable-dialog > .el-dialog__footer {
border-top: 1px solid #EAEBF1;
border-top: 1px solid var(--el-border-color-light);
}
.el-dialog__body {

7
src/assets/stylus/input.styl
View File

@ -3,13 +3,6 @@
}
.el-select--default {
.el-select__wrapper {
min-height: var(--el-component-custom-height) !important;
}
}
.el-checkbox-button--default .el-checkbox-button__inner,
.el-radio-group {
gap 10px

144
src/assets/stylus/root.styl
View File

@ -1,51 +1,5 @@
body {
--main-color: #5D87FF;
/* Primary 系列 (固定 #5D87FF 为主色，衍生色匹配 EBF0FF 风格) */
--el-color-primary: #5D87FF !important;
--el-color-primary-light-3: #85A5FF !important; /* 浅3度 - 悬浮背景/边框 */
--el-color-primary-light-5: #AAC0FF !important; /* 浅5度 - 禁用背景/边框、悬浮链接文字 */
--el-color-primary-light-7: #C9D4FF !important; /* 浅7度 - 极浅背景/辅助边框 */
--el-color-primary-light-8: #DCE4FF !important; /* 浅8度 - 最浅背景/分割线 */
--el-color-primary-light-9: #EBF0FF !important; /* 浅9度 - 近白色背景/高亮区 */
--el-color-primary-dark-2: #4A6FE6 !important; /* 深2度 - 激活背景/边框、激活文字 */
/* Success 系列 (OKLCH 转换为 HEX 格式) */
--el-color-success: #4CB772 !important; /* 原 oklch(68% .18 142.5) */
--el-color-success-light-3: #6FC78C !important; /* 原 oklch(72% .15 142.5) */
--el-color-success-light-5: #91D6A7 !important; /* 原 oklch(76% .12 142.5) */
--el-color-success-light-7: #B3E5C1 !important; /* 原 oklch(80% .09 142.5) */
--el-color-success-light-8: #D5F4DB !important; /* 原 oklch(84% .06 142.5) */
--el-color-success-light-9: #F7FFF6 !important; /* 原 oklch(88% .03 142.5) */
--el-color-success-dark-2: #38A85E !important; /* 原 oklch(64% .20 142.5) */
/* Warning 系列 (OKLCH 转换为 HEX 格式) */
--el-color-warning: #F2B84D !important; /* 原 oklch(75% .22 60.8) */
--el-color-warning-light-3: #F7CA74 !important; /* 原 oklch(78% .19 60.8) */
--el-color-warning-light-5: #FBDB9B !important; /* 原 oklch(81% .16 60.8) */
--el-color-warning-light-7: #FFEDC2 !important; /* 原 oklch(84% .13 60.8) */
--el-color-warning-light-8: #FFF8DF !important; /* 原 oklch(87% .10 60.8) */
--el-color-warning-light-9: #FFFEFC !important; /* 原 oklch(90% .07 60.8) */
--el-color-warning-dark-2: #E0A636 !important; /* 原 oklch(71% .24 60.8) */
/* Info 系列 (OKLCH 转换为 HEX 格式) */
--el-color-info: #6DA1F0 !important; /* 原 oklch(72% .19 231.6) */
--el-color-info-light-3: #8EB1F4 !important; /* 原 oklch(75% .16 231.6) */
--el-color-info-light-5: #AFC1F8 !important; /* 原 oklch(78% .13 231.6) */
--el-color-info-light-7: #D0D1FC !important; /* 原 oklch(81% .10 231.6) */
--el-color-info-light-8: #E1E1FE !important; /* 原 oklch(84% .07 231.6) */
--el-color-info-light-9: #F2F2FF !important; /* 原 oklch(87% .04 231.6) */
--el-color-info-dark-2: #578EE8 !important; /* 原 oklch(68% .21 231.6) */
/* Danger 系列 (OKLCH 转换为 HEX 格式) */
--el-color-danger: #ED7A69 !important; /* 原 oklch(73% .15 25.3) */
--el-color-danger-light-3: #F2998C !important; /* 原 oklch(76% .12 25.3) */
--el-color-danger-light-5: #F7B8AF !important; /* 原 oklch(79% .09 25.3) */
--el-color-danger-light-7: #FCD7D2 !important; /* 原 oklch(82% .06 25.3) */
--el-color-danger-light-8: #FFE6E5 !important; /* 原 oklch(85% .03 25.3) */
--el-color-danger-light-9: #FFF6F6 !important; /* 原 oklch(88% .00 25.3) */
--el-color-danger-dark-2: #E05F4D !important; /* 原 oklch(69% .17 25.3) */
/* Default 系列 (匹配十六进制配色风格) */
/* Default 系列 */
--el-color-default: #7987A1 !important;
--el-color-default-light-3: #8E9AB0 !important;
--el-color-default-light-5: #A3ABC0 !important;
@ -54,36 +8,80 @@ body {
--el-color-default-light-9: #E1E9EE !important;
--el-color-default-dark-2: #6A788F !important;
/* Text 系列 (匹配十六进制配色风格) */
--el-color-text-btn: #4E5969 !important;
--el-color-text-btn-light-3: #616C7C !important;
--el-color-text-btn-light-5: #747F8F !important;
--el-color-text-btn-light-7: #878FAF !important;
--el-color-text-btn-light-8: #9AA4BF !important;
--el-color-text-btn-light-9: #ADB9CF !important;
--el-color-text-btn-dark-2: #3B4656 !important;
/* Primary 系列 */
--el-color-primary: #5D87FF !important;
--el-color-primary-light-3: #85A5FF !important;
--el-color-primary-light-5: #AAC0FF !important;
--el-color-primary-light-7: #C9D4FF !important;
--el-color-primary-light-8: #DCE4FF !important;
--el-color-primary-light-9: #EBF0FF !important;
--el-color-primary-dark-2: #4A6FE6 !important;
/* 通用背景色变量 (匹配你的 icon-btn 背景色) */
--el-bg-primary: #EBF0FF !important;
--el-bg-success: oklch(0.96 0.02 140.1) !important;
--el-bg-warning: oklch(0.96 0.03 58.5) !important;
--el-bg-info: oklch(0.96 0.03 224.26) !important;
--el-bg-danger: oklch(0.96 0.02 22.09) !important;
--el-bg-default: #F2F4F5 !important;
--el-bg-text: #F8F9FA !important;
/* Success 系列 */
--el-color-success: #4CB772 !important;
--el-color-success-light-3: #6FC78C !important;
--el-color-success-light-5: #91D6A7 !important;
--el-color-success-light-7: #B3E5C1 !important;
--el-color-success-light-8: #D5F4DB !important;
--el-color-success-light-9: #F7FFF6 !important;
--el-color-success-dark-2: #38A85E !important;
/* Warning 系列 */
--el-color-warning: #F5B800 !important;
--el-color-warning-dark-2: #E0A600 !important;
--el-color-warning-light-3: #F9C733 !important;
--el-color-warning-light-5: #FBD666 !important;
--el-color-warning-light-7: #FDE599 !important;
--el-color-warning-light-8: #FEF0BB !important;
--el-color-warning-light-9: #FFFAE0 !important;
/* Info 系列 */
--el-color-info: #5A6578 !important;
--el-color-info-light-3: #747F91 !important;
--el-color-info-light-5: #8D97A6 !important;
--el-color-info-light-7: #A6AEBD !important;
--el-color-info-light-8: #C0C6D2 !important;
--el-color-info-light-9: #D9DCE4 !important;
--el-color-info-dark-2: #485263 !important;
/* Danger 系列 */
--el-color-danger: #E05F4D !important;
--el-color-danger-light-3: #F2998C !important;
--el-color-danger-light-5: #F7B8AF !important;
--el-color-danger-light-7: #FCD7D2 !important;
--el-color-danger-light-8: #FFE6E5 !important;
--el-color-danger-light-9: #FFF6F6 !important;
--el-color-danger-dark-2: #C93649 !important;
/* 樱草紫 */
--el-color-ycz: #C06F98 !important;
--el-color-ycz-dark-2: #9E547A !important;
--el-color-ycz-light-3: #CD8AAD !important;
--el-color-ycz-light-5: #DAA5C1 !important;
--el-color-ycz-light-7: #E6BED2 !important;
--el-color-ycz-light-8: #F0D4E2 !important;
--el-color-ycz-light-9: #F8E8F1 !important;
/* 淡土黄 */
--el-color-dth: #8C4B31 !important;
--el-color-dth-dark-2: #792808 !important;
--el-color-dth-light-3: #915D47 !important;
--el-color-dth-light-5: #946A5A !important;
--el-color-dth-light-7: #957568 !important;
--el-color-dth-light-8: #94796E !important;
--el-color-dth-light-9: #937B72 !important;
/*山茶红*/
--el-color-sch: #ED556A !important;
--el-color-sch-light-3: #FA6175 !important;
--el-color-sch-light-5: #FF798A !important;
--el-color-sch-light-7: #FF90A0 !important;
--el-color-sch-light-8: #FFA8B7 !important;
--el-color-sch-light-9: #FFC0CE !important;
--el-color-sch-dark-2: #BB2243 !important;
--el-color-white: #FFFFFF !important;
--el-font-weight-primary: 400 !important;
--el-component-custom-height: 32px !important;
--el-component-size: var(--el-component-custom-height) !important;
--el-border-radius-base: 4px !important;
--el-border-color-light #EAEBF1 !important;
letter-spacing: .5px;
//user-select: none;
}

72
src/assets/stylus/table.styl
View File

@ -1,13 +1,13 @@
.data-table.el-table {
--el-table-text-color: #2F3540 !important;
--el-table-header-text-color: #454C59 !important;
width 100% !important
height 100% !important;
.table-header {
color #454C59 !important
th {
background-color #EDF1F7 !important
font-weight 500 !important
font-weight 600 !important
position relative
& > div {
@ -28,70 +28,4 @@
}
}
}
.table-cell {
color #2F3540 !important
}
.action-btn {
width 100% !important
display grid !important
grid-template-columns repeat(auto-fit, 32px) !important
grid-auto-rows: 32px !important
gap: 10px !important
.text-btn {
margin 0 !important
}
.icon-btn {
margin 0 !important
padding: 8px !important
justify-content center !important
align-items center !important
}
.el-button--default.icon-btn {
color #7987A1 !important
background-color #F2F4F5 !important
border-color #F2F4F5 !important
}
.el-button--primary.icon-btn {
color #5D87FF !important
background-color #EBF0FF !important
border-color #EBF0FF !important
}
.el-button--success.icon-btn {
color: oklch(68% .18 142.5) !important;
background-color: oklch(0.96 0.02 140.1) !important;
border-color: oklch(0.96 0.02 140.1) !important;
}
.el-button--warning.icon-btn {
color: oklch(75% .22 60.8) !important;
background-color: oklch(0.96 0.03 58.5) !important;
border-color: oklch(0.96 0.03 58.5) !important;
}
.el-button--info.icon-btn {
color oklch(72% .19 231.6) !important
background-color oklch(0.96 0.03 224.26) !important
border-color oklch(0.96 0.03 224.26) !important
}
.el-button--danger.icon-btn {
color oklch(73% .15 25.3) !important
background-color oklch(0.96 0.02 22.09) !important
border-color oklch(0.96 0.02 22.09) !important
}
.el-button--text.icon-btn {
color: #4E5969 !important;
background-color: #F8F9FA !important;
border-color: #F8F9FA !important;
}
}
}

2
src/components/a-desensitize/ADesensitize.vue
View File

@ -58,7 +58,7 @@ const handleDblClick = async () => {
user-select none
&:hover {
color: var(--main-color);
color: var(--el-color-primary);
text-decoration: underline;
}
}

8
src/components/a-page/a-table-page/ATablePage.tsx
View File

@ -372,16 +372,16 @@ const component = defineComponent(
icon={elIcon}
loading={tableAction.loading}
type={tableAction.type}
class="icon-btn"
class={styles.iconBtn}
onClick={tableAction.confirm == null ? () => rowAction(scope, tableAction) : undefined}
text/>
plain/>
</ElTooltip>)
}
return (<ElButton
icon={elIcon}
loading={tableAction.loading}
type={tableAction.type}
class="icon-btn"
class={styles.iconBtn}
onClick={tableAction.confirm == null ? () => rowAction(scope, tableAction) : undefined}
text/>)
}
@ -482,7 +482,7 @@ const component = defineComponent(
}}
</ElDropdown>)
}
return (<div class="action-btn">
return (<div class={styles.actionBtn}>
{btns}
</div>)
},

24
src/components/a-page/a-table-page/a-table-page.module.styl
View File

@ -16,7 +16,7 @@
}
.search-form-wrapper {
border: 1px solid #EAEBF1;
border: 1px solid var(--el-border-color-light);
padding: 20px;
border-radius: 8px;
background-color: white;
@ -54,7 +54,7 @@
display grid
grid-template-columns 1fr
grid-template-rows 50px minmax(0, 1fr) 50px
border: 1px solid #EAEBF1;
border: 1px solid var(--el-border-color-light);
padding: 15px 20px 20px 15px;
border-radius: 8px;
background-color: white;
@ -107,7 +107,7 @@
margin 0
&:hover {
color var(--main-color)
color var(--el-color-primary)
background-color #E6EAEB;
border-color #E6EAEB;
}
@ -118,12 +118,28 @@
}
:global(.el-button--default).filter-btn-active {
color var(--main-color)
color var(--el-color-primary)
}
}
}
}
.action-btn {
width 100% !important
display grid !important
grid-template-columns repeat(auto-fit, 32px) !important
grid-auto-rows: 32px !important
gap: 10px !important
.icon-btn {
margin 0 !important
padding: 8px !important
justify-content center !important
align-items center !important
//border-color var(--el-button-bg-color) !important
}
}
:global(.el-pagination) {
justify-content center

2
src/components/a-table-column/ADesensitizeColumn.vue
View File

@ -34,7 +34,7 @@ defineProps<{
user-select none
&:hover {
color: var(--main-color);
color: var(--el-color-primary);
text-decoration: underline;
}
}

8
src/components/page/FormPage.vue
View File

@ -340,7 +340,7 @@ onMounted(doSearch)
<style lang="stylus" scoped>
.form-page {
.search-form {
border: 1px solid #EAEBF1;
border: 1px solid var(--el-border-color-light);
padding: 20px;
border-radius: 8px;
background-color: white;
@ -412,7 +412,7 @@ onMounted(doSearch)
flex 1
display flex
flex-direction column
border: 1px solid #EAEBF1;
border: 1px solid var(--el-border-color-light);
padding: 15px 20px 20px 15px;
border-radius: 8px;
background-color: white;
@ -457,7 +457,7 @@ onMounted(doSearch)
margin 0
&:hover {
color var(--main-color)
color var(--el-color-primary)
background-color #E6EAEB;
border-color #E6EAEB;
}
@ -469,7 +469,7 @@ onMounted(doSearch)
}
:deep(.el-button--default).filter-btn-active {
color var(--main-color)
color var(--el-color-primary)
}
}
}

2
src/pages/a-frame/AAvatar.vue
View File

@ -83,7 +83,7 @@ function logoutHandler() {
display: flex;
flex-direction: column;
justify-content: space-around;
border-bottom: 1px solid #EAEBF1;
border-bottom: 1px solid var(--el-border-color-light);
padding: 12px;
font-size: 1rem;
}

4
src/pages/a-frame/AFrame.vue
View File

@ -73,7 +73,7 @@ onUnmounted(() => {
height 100%;
width auto
position relative
border-right: solid 1px #EAEBF1;
border-right: solid 1px var(--el-border-color-light);
//border-right: solid 1px var(--el-menu-border-color);
background-color white
box-sizing border-box
@ -95,7 +95,7 @@ onUnmounted(() => {
display flex
justify-content space-between
box-sizing border-box
border-bottom 1px solid #EAEBF1;
border-bottom 1px solid var(--el-border-color-light);
padding-right 5px
& > div:nth-child(1) {

14
src/pages/a-frame/ATabbar.vue
View File

@ -63,8 +63,8 @@ function handleCommand(command: 'closeCurrent' | 'closeOther' | 'closeAll') {
height 42px
width 100%;
box-sizing border-box
//border-top 1px solid #EAEBF1;
//border-bottom 1px solid #EAEBF1;
//border-top 1px solid var(--el-border-color-light);
//border-bottom 1px solid var(--el-border-color-light);
display flex
justify-content space-between
align-items center
@ -109,7 +109,7 @@ function handleCommand(command: 'closeCurrent' | 'closeOther' | 'closeAll') {
align-items center
box-sizing border-box
position relative
border 1px solid #EAEBF1
border 1px solid var(--el-border-color-light)
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
transition color, box-shadow, border 0.2s ease-in-out
font-size 14px
@ -122,7 +122,7 @@ function handleCommand(command: 'closeCurrent' | 'closeOther' | 'closeAll') {
content ''
height 1px
width 0
background-color var(--main-color)
background-color var(--el-color-primary)
margin auto
box-sizing border-box
position absolute
@ -133,12 +133,12 @@ function handleCommand(command: 'closeCurrent' | 'closeOther' | 'closeAll') {
}
&.a-tab-item-active {
color var(--main-color)
//border 1px solid var(--main-color)
color var(--el-color-primary)
//border 1px solid var(--el-color-primary)
}
&:not(.a-tab-item-active):hover {
color var(--main-color)
color var(--el-color-primary)
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
&::after {

10
src/pages/cst/customer/Customer.vue
View File

@ -63,11 +63,11 @@
<ElTableColumn label="身份类型">
<template #default="scope">
<span>
<AIcon v-if="scope.row.identityCategory === identityCategory.ChanFei" name="kehu" style="color: var(--main-color); font-weight: 600"/>
<AIcon v-else-if="scope.row.identityCategory === identityCategory.YunShu" name="yunshu" style="color: var(--main-color); font-weight: 600"/>
<AIcon v-else-if="scope.row.identityCategory === identityCategory.XiaoNa" name="xiaonachang" style="color: var(--main-color); font-weight: 600"/>
<AIcon v-else-if="scope.row.identityCategory === identityCategory.CaiGou" name="icon-cart" style="color: var(--main-color); font-weight: 600"/>
<AIcon v-else-if="scope.row.identityCategory === identityCategory.SiJi" name="siji" style="color: var(--main-color); font-weight: 600"/>
<AIcon v-if="scope.row.identityCategory === identityCategory.ChanFei" name="kehu" style="color: var(--el-color-primary); font-weight: 600"/>
<AIcon v-else-if="scope.row.identityCategory === identityCategory.YunShu" name="yunshu" style="color: var(--el-color-primary); font-weight: 600"/>
<AIcon v-else-if="scope.row.identityCategory === identityCategory.XiaoNa" name="xiaonachang" style="color: var(--el-color-primary); font-weight: 600"/>
<AIcon v-else-if="scope.row.identityCategory === identityCategory.CaiGou" name="icon-cart" style="color: var(--el-color-primary); font-weight: 600"/>
<AIcon v-else-if="scope.row.identityCategory === identityCategory.SiJi" name="siji" style="color: var(--el-color-primary); font-weight: 600"/>
<span style="margin-left: 8px">{{ scope.row.identityCategoryTxt }}</span>
</span>
</template>

2
src/pages/cst/customer/purchaser/Purchaser.vue
View File

@ -60,7 +60,7 @@
<span style="margin-left: 8px">{{ scope.row.identityCategoryTxt }}</span>
</span> -->
<span>
<AIcon v-if="scope.row.orgCategory === orgCategory.GeRen" name="kehu" style="color: var(--main-color); font-weight: 600"/>
<AIcon v-if="scope.row.orgCategory === orgCategory.GeRen" name="kehu" style="color: var(--el-color-primary); font-weight: 600"/>
<AIcon v-else-if="scope.row.orgCategory === orgCategory.QiYe" name="yunshu" style="color: var(--el-color-danger); font-weight: 600"/>
<span style="margin-left: 8px">{{ scope.row.orgCategoryTxt }}</span>
</span>

2
src/pages/cst/customer/transport/Transport.vue
View File

@ -60,7 +60,7 @@
<span style="margin-left: 8px">{{ scope.row.identityCategoryTxt }}</span>
</span> -->
<span>
<AIcon v-if="scope.row.orgCategory === orgCategory.GeRen" name="kehu" style="color: var(--main-color); font-weight: 600"/>
<AIcon v-if="scope.row.orgCategory === orgCategory.GeRen" name="kehu" style="color: var(--el-color-primary); font-weight: 600"/>
<AIcon v-else-if="scope.row.orgCategory === orgCategory.QiYe" name="yunshu" style="color: var(--el-color-danger); font-weight: 600"/>
<span style="margin-left: 8px">{{ scope.row.orgCategoryTxt }}</span>
</span>

2
src/pages/cst/customer/waste-prod/WasteProd.vue
View File

@ -60,7 +60,7 @@
<span style="margin-left: 8px">{{ scope.row.identityCategoryTxt }}</span>
</span> -->
<span>
<AIcon v-if="scope.row.orgCategory === orgCategory.GeRen" name="kehu" style="color: var(--main-color); font-weight: 600"/>
<AIcon v-if="scope.row.orgCategory === orgCategory.GeRen" name="kehu" style="color: var(--el-color-primary); font-weight: 600"/>
<AIcon v-else-if="scope.row.orgCategory === orgCategory.QiYe" name="yunshu" style="color: var(--el-color-danger); font-weight: 600"/>
<span style="margin-left: 8px">{{ scope.row.orgCategoryTxt }}</span>
</span>

112
src/pages/cst/project/Project.vue
View File

@ -1,57 +1,44 @@
<template>
<FormPage
ref="formPage"
:action-column="actionColumn"
:formStyle=" {
border: false,
colCount: 3,
vgap: '20px',
hgap: '20px',
}"
:left-tools="leftTools"
:search-form-props="{
labelPosition: 'left',
labelWidth: '100px',
inline: true,
}"
:paging="paging">
<template #searchFormItem="{ searchForm }">
<ATablePage
ref="tablePage"
v-bind="tablePageProps">
<template #highFormItem="formData">
<ElFormItem label="项目名称">
<ElInput
v-model="searchForm.projectName"
v-model="formData.projectName"
placeholder="项目名称"/>
</ElFormItem>
<ElFormItem label="客户名称">
<ElInput
v-model="searchForm.fringeName"
v-model="formData.fringeName"
placeholder="客户名称"/>
</ElFormItem>
<ElFormItem label="运输方名称">
<ElInput
v-model="searchForm.transName"
v-model="formData.transName"
placeholder="运输方名称"/>
</ElFormItem>
<ElFormItem label="合同有效期">
<ADtPicker v-model="searchForm.contractTimes" :change-handler="research"/>
<ADtPicker v-model="formData.contractTimes" :change-handler="research"/>
</ElFormItem>
<ElFormItem label="创建时间">
<ADtPicker v-model="searchForm.createTimes" :change-handler="research"/>
<ADtPicker v-model="formData.createTimes" :change-handler="research"/>
</ElFormItem>
</template>
<template #simpleSearchFormItem="{ searchForm }">
<template #simpleFormItem="formData">
<ElFormItem>
<ElInput
v-model="searchForm.projectName"
v-model="formData.projectName"
placeholder="项目名称"/>
</ElFormItem>
<ElFormItem>
<ElInput
v-model="searchForm.fringeName"
v-model="formData.fringeName"
placeholder="客户名称"/>
</ElFormItem>
<ElFormItem>
<ElInput
v-model="searchForm.transName"
v-model="formData.transName"
placeholder="运输方名称"/>
</ElFormItem>
</template>
@ -66,58 +53,65 @@
<!-- <ElTableColumn label="详细地址" prop="address" width="240" show-overflow-tooltip/> -->
<ElTableColumn label="合同有效期" prop="contractStartDate" width="210">
<template #default="{ row }">
{{ row.contractStartDate + ' 至 ' + row.contractEndDate ?? '--' }}
{{ row.contractStartDate + ' 至 ' + (row.contractEndDate ?? '--') }}
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="createTime" width="170"/>
</template>
<ProjectForm ref="projectForm" :research="research"/>
<ProjectDetail ref="projectDetail" @edit-succ="research"/>
</FormPage>
</ATablePage>
</template>
<script lang="ts" setup>
import ProjectApi from '@/pages/cst/project/project-api.ts'
import ProjectDetail from '@/pages/cst/project/ProjectDetail.vue'
import ProjectForm from '@/pages/cst/project/ProjectForm.vue'
import FormPage from '@/components/page/FormPage.vue'
import type {
ActionColumnType,
ToolType,
} from '@/components/page/a-page-type.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'
import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
import ATablePage, {
type ATablePageInstance,
buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
const projectDetailIns = useTemplateRef<InstanceType<typeof ProjectDetail>>('projectDetail')
const projectFormIns = useTemplateRef<InstanceType<typeof ProjectDetail>>('projectForm')
const actionColumn = reactive<ActionColumnType<ProjectTypes.SearchProjectResult>>({
tableActions: [
{
tooltip: '详情',
icon: 'Postcard',
action({row}) {
projectDetailIns.value?.open(row)
function research() {
tablePageIns.value?.doSearch()
}
const tablePageProps = buildTablePageProps<ProjectTypes.SearchProjectParam, ProjectTypes.SearchProjectResult>({
pageLayout: {
dataListHeight: 3,
},
toolBar: {
leftTools: [
{
icon: 'Plus',
label: '新建',
action() {
projectFormIns.value?.open()
},
},
},
],
})
const leftTools: ToolType[] = [
{
icon: 'Plus',
label: '新建',
action() {
projectFormIns.value?.open()
],
},
table: {
actionColumn: {
tableActions: [
{
tooltip: '详情',
icon: 'Postcard',
action({row}) {
projectDetailIns.value?.open(row)
},
},
],
},
},
]
searchForm: {
paging: ProjectApi.paging,
},
})
function research() {
formPageIns.value?.doSearch()
}
function paging(params: ProjectTypes.SearchProjectParam) {
return ProjectApi.paging(params)
}
</script>

2
src/pages/fin/bill/Bill.vue
View File

@ -62,7 +62,7 @@ const tablePageProps = buildTablePageProps<BillTypes.SearchBillParam, BillTypes.
{
tooltip: '详情',
icon: 'Postcard',
type: 'info',
type: 'primary',
action({row}) {
billDetailIns.value?.open(row)
},

6
src/pages/fin/money-account/MoneyAccount.vue
View File

@ -83,7 +83,7 @@ const tablePageProps = buildTablePageProps<MoneyAccountTypes.SearchMoneyAccountP
{
tooltip: '详情',
icon: 'Postcard',
type: 'info',
type: 'primary',
action({row}) {
moneyAccountDetailIns.value?.open(row)
},
@ -91,7 +91,7 @@ const tablePageProps = buildTablePageProps<MoneyAccountTypes.SearchMoneyAccountP
{
tooltip: '充值',
icon: 'chongzhi0101',
type: 'primary',
type: 'success',
action({row}) {
moneyAccountFormIns.value?.open(row)
},
@ -99,7 +99,7 @@ const tablePageProps = buildTablePageProps<MoneyAccountTypes.SearchMoneyAccountP
{
tooltip: '调账',
icon: 'tiaozhang',
type: 'info',
type: 'danger',
action({row}) {
moneyAccountFormIns.value?.open(row)
},

2
src/pages/fin/money-flow/MoneyFlow.vue
View File

@ -94,7 +94,7 @@ const tablePageProps = buildTablePageProps<MoneyFlowTypes.SearchMoneyFlowParam,
{
tooltip: '详情',
icon: 'Postcard',
type: 'info',
type: 'primary',
action({row}) {
moneyFlowDetailIns.value?.open(row)
},

148
src/pages/gds/goods-category/GoodsCategory.vue
View File

@ -1,37 +1,34 @@
<template>
<FormPage
ref="formPage"
:action-column="actionColumn"
:left-tools="leftTools"
:default-search-form="{createTimes:[undefined,undefined]}"
:paging="paging">
<template #searchFormItem="{ searchForm }">
<ATablePage
ref="tablePage"
v-bind="tablePageProps">
<template #highFormItem="formData">
<ElFormItem label="业务类型">
<ElSelect v-model="searchForm.bizType" clearable placeholder="业务类型" @change="research">
<ElSelect v-model="formData.bizType" clearable placeholder="业务类型" @change="research">
<ElOption v-for="item in bizType" :key="item.val" :label="item.txt" :value="item.val"/>
</ElSelect>
</ElFormItem>
<ElFormItem label="编码">
<ElInput v-model="searchForm.sn" clearable placeholder="编码" @clear="research"/>
<ElInput v-model="formData.sn" clearable placeholder="编码" @clear="research"/>
</ElFormItem>
<ElFormItem label="分类名称">
<ElInput v-model="searchForm.categoryName" clearable placeholder="分类名称" @clear="research"/>
<ElInput v-model="formData.categoryName" clearable placeholder="分类名称" @clear="research"/>
</ElFormItem>
<ElFormItem label="创建时间">
<ADtPicker v-model="searchForm.createTimes" :change-handler="research"/>
<ADtPicker v-model="formData.createTimes" :change-handler="research"/>
</ElFormItem>
</template>
<template #simpleSearchFormItem="{ searchForm }">
<template #simpleFormItem="formData">
<ElFormItem style="min-width: 200px">
<ElSelect v-model="searchForm.bizType" clearable placeholder="业务类型" @change="research">
<ElSelect v-model="formData.bizType" clearable placeholder="业务类型" @change="research">
<ElOption v-for="item in bizType" :key="item.val" :label="item.txt" :value="item.val"/>
</ElSelect>
</ElFormItem>
<ElFormItem>
<ElInput v-model="searchForm.sn" clearable placeholder="编码" @clear="research"/>
<ElInput v-model="formData.sn" clearable placeholder="编码" @clear="research"/>
</ElFormItem>
<ElFormItem>
<ElInput v-model="searchForm.categoryName" clearable placeholder="分类名称" @clear="research"/>
<ElInput v-model="formData.categoryName" clearable placeholder="分类名称" @clear="research"/>
</ElFormItem>
</template>
<template #columns>
@ -47,72 +44,85 @@
<ElTableColumn label="创建时间" prop="createTime"/>
</template>
<GoodsCategoryForm ref="goodsCategoryForm" :research="research"/>
</FormPage>
</ATablePage>
</template>
<script lang="ts" setup>
import type { ComponentExposed } from 'vue-component-type-helpers'
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
import GoodsCategoryForm from '@/pages/gds/goods-category/GoodsCategoryForm.vue'
import AppApi from '@/common/app/app-api.ts'
import FormPage from '@/components/page/FormPage.vue'
import type {
ActionColumnType,
ToolType,
} from '@/components/page/a-page-type.ts'
import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
import { bizType } from '@/pages/gds/goods-category/constants.ts'
import ATablePage, {
type ATablePageInstance,
buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
const goodsCategoryFormIns = useTemplateRef<InstanceType<typeof GoodsCategoryForm>>('goodsCategoryForm')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
const leftTools: ToolType[] = [
{
icon: 'Plus',
label: '新建',
action() {
goodsCategoryFormIns.value?.open()
},
},
]
const actionColumn = reactive<ActionColumnType<GoodsCategoryTypes.SearchGoodsCategoryResult>>({
tableActions: [
{
tooltip: '编辑',
icon: 'Edit',
action({row}) {
goodsCategoryFormIns.value?.open(row)
},
},
{
icon: 'Delete',
loading: false,
type: 'danger',
tooltip: '删除',
confirm: {
title: '是否删除当前数据',
},
action({row}) {
return GoodsCategoryApi.del([ row.id! ])
.then(() => {
ElMessage.success('删除成功')
return true
})
},
},
],
})
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
function research() {
formPageIns.value?.doSearch()
tablePageIns.value?.doSearch()
}
function paging(param: GoodsCategoryTypes.SearchGoodsCategoryParam) {
return GoodsCategoryApi.paging({
bizType: param.bizType,
categoryName: param.categoryName,
createTimeStart: param.createTimes?.[0],
createTimeEnd: param.createTimes?.[1],
})
}
const tablePageProps = buildTablePageProps<GoodsCategoryTypes.SearchGoodsCategoryParam, GoodsCategoryTypes.SearchGoodsCategoryResult>({
pageLayout: {
searchFormHeight: '120px',
dataListHeight: 1,
},
toolBar: {
leftTools: [
{
icon: 'Plus',
label: '新建',
action() {
goodsCategoryFormIns.value?.open()
},
},
],
},
table: {
actionColumn: {
tableActions: [
{
tooltip: '编辑',
icon: 'Edit',
action({row}) {
goodsCategoryFormIns.value?.open(row)
},
},
{
icon: 'Delete',
loading: false,
type: 'danger',
tooltip: '删除',
confirm: {
title: '是否删除当前数据',
},
action({row}) {
return GoodsCategoryApi.del([ row.id! ])
.then(() => {
ElMessage.success('删除成功')
return true
})
},
},
],
},
},
searchForm: {
highForm: {
contentWidth: 320,
},
defaultData: {createTimes: [ undefined, undefined ]},
paging(param) {
return GoodsCategoryApi.paging({
bizType: param.bizType,
categoryName: param.categoryName,
createTimeStart: param.createTimes?.[0],
createTimeEnd: param.createTimes?.[1],
})
},
},
})
</script>

8
src/pages/gds/goods/Goods.vue
View File

@ -66,11 +66,15 @@ function research() {
}
const tablePageProps = buildTablePageProps({
pageLayout: {
searchFormHeight: '120px',
dataListHeight: 1,
},
searchForm: {
defaultData: {createTimes: [ undefined, undefined ]},
highForm: {
colCount: 4,
contentWidth: 320,
},
defaultData: {createTimes: [ undefined, undefined ]},
paging(param: GoodsTypes.SearchGoodsParam) {
return GoodsApi.paging({
...param,

38
src/pages/home/Home.vue
View File

@ -1,6 +1,7 @@
<script lang="ts" setup>
import Page from '@/components/page/Page.vue'
const a = ref(false)
</script>
<template>
@ -15,6 +16,38 @@ import Page from '@/components/page/Page.vue'
<h1>欢迎使用<br><span>再昇云智能收运系统</span></h1>
<p>高效、安全、智能的一站式管理平台，助力您的业务腾飞。全新界面，极致体验，即刻开启您的数字化之旅。</p>
<!-- <a href="#" class="btn">进入系统</a> -->
<p>
<ElButton :disabled="a" circle>Default</ElButton>
<ElButton :disabled="a" type="primary">进入系统</ElButton>
<ElButton :disabled="a" type="success">进入系统</ElButton>
<ElButton :disabled="a" type="info">进入系统</ElButton>
<ElButton :disabled="a" type="warning">进入系统</ElButton>
<ElButton :disabled="a" type="danger">进入系统</ElButton>
</p>
<p>
<ElButton :disabled="a" plain>Plain</ElButton>
<ElButton :disabled="a" plain type="primary">进入系统</ElButton>
<ElButton :disabled="a" plain type="success">进入系统</ElButton>
<ElButton :disabled="a" plain type="info">进入系统</ElButton>
<ElButton :disabled="a" plain type="warning">进入系统</ElButton>
<ElButton :disabled="a" plain type="danger">进入系统</ElButton>
</p>
<p>
<ElButton :disabled="a" text>Text</ElButton>
<ElButton :disabled="a" text type="primary">进入系统</ElButton>
<ElButton :disabled="a" text type="success">进入系统</ElButton>
<ElButton :disabled="a" text type="info">进入系统</ElButton>
<ElButton :disabled="a" text type="warning">进入系统</ElButton>
<ElButton :disabled="a" text type="danger">进入系统</ElButton>
</p>
<p>
<ElButton :disabled="a" link>Link</ElButton>
<ElButton :disabled="a" link type="primary">进入系统</ElButton>
<ElButton :disabled="a" link type="success">进入系统</ElButton>
<ElButton :disabled="a" link type="info">进入系统</ElButton>
<ElButton :disabled="a" link type="warning">进入系统</ElButton>
<ElButton :disabled="a" link type="danger">进入系统</ElButton>
</p>
</div>
<!-- 右侧图形区 -->
@ -83,7 +116,8 @@ import Page from '@/components/page/Page.vue'
color: #6C757D;
margin-bottom: 40px;
line-height: 1.6;
max-width: 500px;
//max-width: 500px;
width: 7500px;
}
/* 按钮样式 */

4
src/pages/order/book/Book.vue
View File

@ -97,7 +97,6 @@ import BookDetail from '@/pages/order/book/BookDetail.vue'
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
const bookDetailIns = useTemplateRef<InstanceType<typeof BookDetail>>('bookDetail')
function research() {
tablePageIns.value?.doSearch()
}
@ -119,7 +118,7 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
},
{
tooltip: '派单',
type: 'info',
type: 'success',
show({row}) {
return row.transStatus === transStatus.DaiPaiDan
},
@ -191,4 +190,5 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
},
},
})
</script>

6
src/pages/order/realtime/Realtime.vue
View File

@ -127,7 +127,7 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
},
{
tooltip: '进场',
type: 'info',
type: 'success',
icon: 'approach',
show({row}) {
return row.transStatus === transStatus.YunShuZhong
@ -138,7 +138,7 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
},
{
tooltip: '出场',
type: 'info',
type: 'danger',
icon: 'carexit',
show({row}) {
return row.transStatus === transStatus.YiJinChang && (row.checkStatus === checkStatus.Wu || row.checkStatus === checkStatus.YiKanLiao)
@ -149,7 +149,7 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
},
{
tooltip: '勘料',
type: 'info',
type: 'warning',
icon: 'chakanliaodan',
confirm: {
title: '是否确认勘料',