project/chuhai-payment-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update app theme style

Browse Source
This commit is contained in:
LittleBoy 2024-06-10 11:40:39 +08:00
parent 33f2341ed3
commit 33c729c8be
10 changed files with 156 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -10,6 +10,7 @@ lerna-debug.log*
node_modules node_modules
dist dist
dist-ssr dist-ssr
test
*.local *.local
# Editor directories and files # Editor directories and files

138
src/assets/index.less
View File

@ -9,8 +9,11 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
//user-select: none; //user-select: none;
--dashboard-header-height: 50px; --dashboard-header-height: 50px;
--dashboard-layout-padding:20px; --dashboard-layout-padding: 20px;
--dashboard-navigation-width:250px; --dashboard-navigation-width: 250px;
// overrides
--brand-color: #43ABFF;
} }
* { * {
@ -19,7 +22,12 @@
outline: none; outline: none;
font-family: -apple-system, "PingFang SC", 'Microsoft YaHei', sans-serif; font-family: -apple-system, "PingFang SC", 'Microsoft YaHei', sans-serif;
} }
body #root .dashboard-layout{
--semi-color-primary: var(--brand-color) !important;
--semi-border-radius-small: 5px;
--semi-border-radius-medium: 8px;
--semi-border-radius-large: 12px;
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
@ -27,49 +35,61 @@
.semi-layout { .semi-layout {
min-height: 100vh; min-height: 100vh;
} }
.text-center{
.text-center {
text-align: center; text-align: center;
} }
.text-right{
.text-right {
text-align: right; text-align: right;
} }
.space-between { .space-between {
justify-content: space-between; justify-content: space-between;
} }
.space-center{
.space-center {
justify-content: center; justify-content: center;
} }
.no-wrap{
.no-wrap {
white-space: nowrap; white-space: nowrap;
} }
.align-center { .align-center {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.money-format{
.money-format {
white-space: nowrap; white-space: nowrap;
} }
.btn-auth-login{
.btn-auth-login {
box-sizing: border-box; box-sizing: border-box;
text-decoration: none; text-decoration: none;
border-radius: 10px;
} }
.page-content-container { .page-content-container {
max-width: 90%; max-width: 90%;
width: 1400px; width: 1400px;
margin: auto; margin: auto;
} }
.main-bg-container{
.main-content{ .main-bg-container {
.main-content {
} }
} }
.main-bg-container { .main-bg-container {
background: url(./images/auth/bg.jpg); background: url(./images/auth/bg.jpg);
background-attachment: fixed; background-attachment: fixed;
.main-content{
.main-content {
display: flex; display: flex;
align-items:center; align-items: center;
justify-content: center; justify-content: center;
background: rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
@ -80,30 +100,80 @@
} }
} }
/***************** semi overrides ****************/
.semi-dropdown-item-active { .semi-dropdown-item-active {
background-color: var(--semi-color-default-active); background-color: var(--semi-color-default-active);
} }
.semi-tabs{
&.no-border{ .semi-tabs {
.semi-tabs-bar-line.semi-tabs-bar-top{ &.no-border {
border-bottom: none; .semi-tabs-bar-line.semi-tabs-bar-top {
border-bottom: none;
} }
} }
} }
.semi-radio-inner{
.semi-radio-inner {
width: 20px; width: 20px;
height: 20px; height: 20px;
.semi-radio-inner-display{
.semi-radio-inner-display {
width: 20px; width: 20px;
height: 20px; height: 20px;
.semi-icon{
.semi-icon {
font-size: 18px; font-size: 18px;
} }
} }
} }
// input
.semi-input-wrapper, .semi-select,.semi-datepicker-range-input {
background-color: transparent;
border: 1px var(--semi-color-fill-2) solid;
border-radius: var(--semi-border-radius-small);
&:hover, &:focus {
background-color: transparent;
border: 1px solid var(--semi-color-focus-border);
}
}
.semi-input-wrapper-focus,
.semi-datepicker-range-input-active,
.semi-datepicker-range-input-active:focus-within{
background-color: transparent;
border: 1px solid var(--semi-color-focus-border);
}
.semi-input-wrapper-error {
border: 1px solid #FF4D4F;
color: #FF4D4F;
.semi-input {
&::placeholder {
color: #FF4D4F;
}
}
}
.semi-datepicker-range-input{
.semi-input-wrapper,.semi-input-wrapper-focus,.semi-datepicker-range-input-wrapper-active {
background-color: transparent;
border: 1px transparent solid;
border-radius: var(--semi-border-radius-small);
&:hover, &:focus {
background-color: transparent;
border: 1px solid transparent;
}
}
}
/************ end overrides ****************/
.dashboard-menu-container { .dashboard-menu-container {
padding: var(--dashboard-layout-padding,15px); padding: var(--dashboard-layout-padding, 15px);
.nav-item { .nav-item {
padding: 15px; padding: 15px;
display: flex; display: flex;
@ -111,21 +181,39 @@
text-decoration: none; text-decoration: none;
border-radius: 10px; border-radius: 10px;
color: #999999; color: #999999;
.svg-icon{
.svg-icon {
font-size: 22px; font-size: 22px;
} }
.menu-text{
.menu-text {
margin-left: 10px; margin-left: 10px;
font-size: 14px; font-size: 14px;
} }
&.active { &.active {
background-color: #fff; background-color: #fff;
.svg-icon{
.svg-icon {
color: #FFC65F; color: #FFC65F;
} }
.menu-text{
.menu-text {
color: #2D3748; color: #2D3748;
} }
} }
} }
}
.dashboard-layout{
min-width: 1000px;
}
@media screen and (max-width: 1280px) {
:root {
--dashboard-navigation-width: 200px;
}
.dashboard-menu-container .nav-item{
.menu-text{
//display: none;
}
}
} }

8
src/components/bill/bill.less
View File

@ -16,13 +16,17 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 5px; margin-right: 5px;
--active-color:#00C479;
&.current-amount{
--active-color:#FF8432;
}
&:before { &:before {
content: ' '; content: ' ';
width: 6px; width: 6px;
height: 6px; height: 6px;
display: block; display: block;
background-color: #00C479; background-color: var(--active-color);
border: solid 2px #efefef;
margin-right: 5px; margin-right: 5px;
border-radius: 50%; border-radius: 50%;
} }

2
src/components/bill/list.tsx
View File

@ -174,7 +174,7 @@ export const BillList: React.FC<BillListProps> = (props) => {
<MoneyFormat money={props.source?.pagination.recordTotal || 0}/> <MoneyFormat money={props.source?.pagination.recordTotal || 0}/>
</div> </div>
<div className="bill-info-item"> <div className="bill-info-item">
<span className="bill-info-title">{t('bill.query_amount_current_page')} :</span> <span className="bill-info-title current-amount">{t('bill.query_amount_current_page')} :</span>
<MoneyFormat money={currentTotalAmount || 0}/> <MoneyFormat money={currentTotalAmount || 0}/>
</div> </div>
</div>} </div>}

43
src/components/bill/search-form.tsx
View File

@ -47,6 +47,9 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
if (value.bill_status) { if (value.bill_status) {
params.status = value.bill_status; params.status = value.bill_status;
} }
if(props.showApply){
params.status = 'PAID'
}
// 支付方式 // 支付方式
if (value.payment_channel) { if (value.payment_channel) {
params.payment_channel = value.payment_channel; params.payment_channel = value.payment_channel;
@ -74,20 +77,20 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
<div className="bill-search-form"> <div className="bill-search-form">
<Form<SearchFormFields> onSubmit={formSubmit}> <Form<SearchFormFields> onSubmit={formSubmit}>
<Row type={'flex'} gutter={20}> <Row type={'flex'} gutter={20}>
<Col span={4} md={6}> <Col xxl={4} xl={6} md={8}>
<Form.DatePicker type={'dateRange'} field="dateRange" label={t('bill.bill_date')} <Form.DatePicker type={'dateRange'} field="dateRange" label={t('bill.bill_date')}
style={{width: '100%'}}> style={{width: '100%'}}>
</Form.DatePicker> </Form.DatePicker>
</Col> </Col>
<Col span={4} md={6}> <Col xxl={4} xl={6} md={8}>
<Form.Input field='student_number' label={t('base.student_number')} trigger='blur' <Form.Input field='student_number' label={t('base.student_number')} trigger='blur'
placeholder={t('base.please_enter')}/> placeholder={t('base.please_enter')}/>
</Col> </Col>
<Col span={4} md={6}> <Col xxl={4} xl={6} md={8}>
<Form.Input field='application_number' label={t('base.bill_number')} trigger='blur' <Form.Input field='application_number' label={t('base.bill_number')} trigger='blur'
placeholder={t('base.please_enter')}/> placeholder={t('base.please_enter')}/>
</Col> </Col>
<Col span={4} md={6}> <Col xxl={4} xl={6} md={8}>
<Form.Select showClear field="payment_channel" label={t('bill.title_pay_method')} <Form.Select showClear field="payment_channel" label={t('bill.title_pay_method')}
placeholder={t('base.please_select')} style={{width: '100%'}}> placeholder={t('base.please_select')} style={{width: '100%'}}>
<Form.Select.Option value="ASIAPAY">ASIAPAY</Form.Select.Option> <Form.Select.Option value="ASIAPAY">ASIAPAY</Form.Select.Option>
@ -95,21 +98,23 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
<Form.Select.Option value="PPS">PPS</Form.Select.Option> <Form.Select.Option value="PPS">PPS</Form.Select.Option>
</Form.Select> </Form.Select>
</Col> </Col>
<Col span={4} md={6}> {props.showApply && <>
<Form.Select showClear field="bill_status" label={t('bill.pay_status')} <Col xxl={4} xl={6} md={8}>
placeholder={t('base.please_select')} style={{width: '100%'}}> <Form.Select showClear field="bill_status" label={t('bill.pay_status')}
{billStatusOptions.map((item, index) => ( placeholder={t('base.please_select')} style={{width: '100%'}}>
<Form.Select.Option key={index} value={item.value}>{item.label}</Form.Select.Option>))} {billStatusOptions.map((item, index) => (
</Form.Select> <Form.Select.Option key={index} value={item.value}>{item.label}</Form.Select.Option>))}
</Col> </Form.Select>
{props.showApply && <Col span={4} md={6}> </Col>
<Form.Select showClear field="apply_status" label={t('bill.title_reconciliation_status')} <Col xxl={4} xl={6} md={8}>
placeholder={t('base.please_select')} style={{width: '100%'}}> <Form.Select showClear field="apply_status" label={t('bill.title_reconciliation_status')}
{applyStatusOptions.map((item, index) => ( placeholder={t('base.please_select')} style={{width: '100%'}}>
<Form.Select.Option key={index} value={item.value}>{item.label}</Form.Select.Option>))} {applyStatusOptions.map((item, index) => (
</Form.Select> <Form.Select.Option key={index} value={item.value}>{item.label}</Form.Select.Option>))}
</Col>} </Form.Select>
<Col span={4} style={{display: 'flex', alignItems: 'flex-end', paddingBottom: 12}}> </Col>
</>}
<Col xxl={4} xl={6} md={8} style={{display: 'flex', alignItems: 'flex-end', paddingBottom: 12}}>
<Button loading={props.loading} style={{width: 100}} htmlType={'submit'} theme={'solid'} <Button loading={props.loading} style={{width: 100}} htmlType={'submit'} theme={'solid'}
type={'primary'}>{t('base.btn_search_submit')}</Button> type={'primary'}>{t('base.btn_search_submit')}</Button>
</Col> </Col>

2
src/components/card/card.less
View File

@ -7,7 +7,7 @@
.card-header { .card-header {
margin-bottom: 10px; margin-bottom: 10px;
color: #666; color: #333;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;

4
src/pages/bill/reconciliation.tsx
View File

@ -8,7 +8,9 @@ import {useState} from "react";
const BillReconciliation = () => { const BillReconciliation = () => {
const {t} = useTranslation() const {t} = useTranslation()
const [queryParams, setBillQueryParams] = useSetState<BillQueryParams>({}); const [queryParams, setBillQueryParams] = useSetState<BillQueryParams>({
status:'PAID'
});
const {data, loading,refresh} = useRequest(() => billList(queryParams), { const {data, loading,refresh} = useRequest(() => billList(queryParams), {
refreshDeps: [queryParams] refreshDeps: [queryParams]
}) })

8
src/pages/manual/index.tsx
View File

@ -68,7 +68,7 @@ export default function Index() {
layout='horizontal' onValueChange={() => setState({errorMessage: ''})} layout='horizontal' onValueChange={() => setState({errorMessage: ''})}
onSubmit={handleSubmit} ref={frm}> onSubmit={handleSubmit} ref={frm}>
<Form.Select <Form.Select
field="bill_type" style={{width: 176}} field="bill_type" style={{width: 200}}
label={t('manual.bill_type')} label={t('manual.bill_type')}
placeholder={t('manual.bill_type')} placeholder={t('manual.bill_type')}
rules={[{required: true, message: t('manual.bill_type_required')}]} rules={[{required: true, message: t('manual.bill_type_required')}]}
@ -79,7 +79,7 @@ export default function Index() {
} }
</Form.Select> </Form.Select>
<Form.Input <Form.Input
field='amount' label={t('manual.amount')} style={{minWidth: 120}} field='amount' label={t('manual.amount')} style={{minWidth: 200}}
placeholder={t('manual.amount')} placeholder={t('manual.amount')}
rules={[ rules={[
{required: true, message: t('manual.amount_required')}, {required: true, message: t('manual.amount_required')},
@ -94,13 +94,13 @@ export default function Index() {
]} ]}
/> />
<Form.Input <Form.Input
field='student_number' label={t('manual.student_number')} style={{minWidth: 150}} field='student_number' label={t('manual.student_number')} style={{minWidth: 200}}
placeholder={t('manual.student_number')} placeholder={t('manual.student_number')}
rules={[{required: true, message: t('manual.student_number_required')}]} rules={[{required: true, message: t('manual.student_number_required')}]}
/> />
<div className={styles.generateButtonContainer}> <div className={styles.generateButtonContainer}>
<Space> <Space>
<Button loading={state.loading} htmlType="submit">{t('manual.btn_generate')}</Button> <Button loading={state.loading} htmlType="submit" theme={'solid'}>{t('manual.btn_generate')}</Button>
{state.errorMessage && <div className={'semi-form-field-error-message'}> {state.errorMessage && <div className={'semi-form-field-error-message'}>
<IconAlertTriangle/>{state.errorMessage}</div>} <IconAlertTriangle/>{state.errorMessage}</div>}
</Space> </Space>

2
src/pages/pay/result.tsx
View File

@ -19,7 +19,7 @@ const PayIndex = () => {
const {t} = useTranslation() const {t} = useTranslation()
const {downloadPDF} = useDownloadReceiptPDF() const {downloadPDF} = useDownloadReceiptPDF()
const [state, setState] = useSetState<{ const [state, setState] = useSetState<{
from?: 'asia_spay' | 'flywire' | string; from?: 'ASIAPAY' | 'FLYWIRE' | string;
result?: PayResult; result?: PayResult;
id?: string; id?: string;
bill?: BillModel bill?: BillModel

4
src/routes/layout/dashboard-layout.tsx
View File

@ -110,13 +110,13 @@ export const BaseLayout: React.FC<LayoutProps> = ({children}) => {
return nav?.key return nav?.key
}, [location.pathname]) }, [location.pathname])
return (<Layout> return (<Layout className={'dashboard-layout'}>
<CommonHeader/> <CommonHeader/>
<Layout style={{ <Layout style={{
backgroundColor: '#f8f9fa', backgroundColor: '#f8f9fa',
minHeight: 'calc(100vh - var(--dashboard-header-height,50px))', minHeight: 'calc(100vh - var(--dashboard-header-height,50px))',
}}> }}>
<Sider style={{minWidth: 'var(--dashboard-navigation-width,250px)'}}> <Sider style={{minWidth: 'var(--dashboard-navigation-width,250px)',transition:'all 0.5s'}}>
<DashboardNavigation/> <DashboardNavigation/>
</Sider> </Sider>
<Content style={{padding: 'var(--dashboard-layout-padding)'}}> <Content style={{padding: 'var(--dashboard-layout-padding)'}}>