liuc/fe_supplier_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复less导入污染全局

Browse Source
This commit is contained in:
linxd
2025-06-23 08:33:14 +08:00
parent 0b2891a0e3
commit 8a121eff8a
23 changed files with 221 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/aboutManage/aboutManage.less
View File

@ -1,35 +1,13 @@
.about-manage-container {
.aboutManageContent {
background: #fff;
padding: 24px;
.about-manage-content {
background: #fff;
padding: 24px;
min-height: 500px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.ant-card {
margin-bottom: 16px;
}
.ant-form-item-label > label {
font-weight: 500;
}
.save-btn-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
.ant-tabs-nav {
margin-bottom: 16px;
}
.ant-card-head-title {
font-size: 18px;
font-weight: 500;
}
min-height: 500px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.saveBtnWrapper {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}

13
src/pages/aboutManage/aboutManage.tsx
View File

@ -3,7 +3,7 @@ import { useIntl, FormattedMessage } from 'umi';
import { Card, Form, Input, Button, message, Tabs, Spin } from 'antd';
import WangEditor from '@/components/WangEidtor/WangEidtor';
import { getAboutUs, updateAboutUs, AboutUsRequest } from '@/servers/api/about';
import './aboutManage.less';
import styles from './aboutManage.less';
const { TabPane } = Tabs;
@ -122,7 +122,7 @@ const AboutManage: React.FC = () => {
};
return (
<div className="about-manage-container common-container">
<div className="common-container">
<Card
title={intl.formatMessage({ id: 'aboutManage.title' })}
extra={
@ -251,6 +251,15 @@ const AboutManage: React.FC = () => {
</Tabs>
</Form>
</Spin>
<div className={styles.saveBtnWrapper}>
<Button
type="primary"
onClick={handleSubmit}
loading={submitting}
>
{intl.formatMessage({ id: 'aboutManage.save' })}
</Button>
</div>
</Card>
</div>
);

47
src/pages/downloadManage/downloadManage.less
View File

@ -1,50 +1,7 @@
.download-manage-container {
.upload-hint {
.downloadManageContainer {
.uploadHint {
margin-top: 8px;
color: #999;
font-size: 12px;
}
.content-area {
background-color: #fff;
padding: 16px;
border-radius: 4px;
margin-top: 16px;
}
.filter-action-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
background-color: #fff;
padding: 16px;
border-radius: 4px;
.filter-form {
flex: 1;
}
.filter-btns {
margin-left: 8px;
display: flex;
gap: 8px;
}
.right-buttons {
display: flex;
gap: 8px;
align-items: center;
.selected-count {
margin-left: 8px;
color: #1890ff;
}
}
}
.ant-table-wrapper {
width: 100%;
}
}

6
src/pages/downloadManage/downloadManage.tsx
View File

@ -9,7 +9,7 @@ import {
InboxOutlined,
} from '@ant-design/icons';
import { validateFileSize } from '@/utils/utils';
import './downloadManage.less';
import styles from './downloadManage.less';
import type { UploadFile } from 'antd/es/upload/interface';
const { Option } = Select;
@ -500,7 +500,7 @@ const DownloadManage: React.FC = () => {
};
return (
<div className="download-manage-container common-container">
<div className="common-container">
<div className="filter-action-row">
<Form
form={form}
@ -640,7 +640,7 @@ const DownloadManage: React.FC = () => {
<InboxOutlined />
</p>
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
<p className="ant-upload-hint">支持格式：.rar .zip .doc .docx .pdf，单个文件不能超过20MB</p>
<p className={styles.uploadHint}>支持格式：.rar .zip .doc .docx .pdf，单个文件不能超过20MB</p>
</Dragger>
</Form.Item>

42
src/pages/friendLinkManage/friendLinkCategory.tsx
View File

@ -4,7 +4,7 @@ import { Card, Table, Button, Modal, Form, Input, Space, message, Select, TreeSe
import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined, EditOutlined } from '@ant-design/icons';
import { getCategoryList, getAllCategories, addCategory, updateCategory, deleteCategory } from '@/servers/api/friendLink';
import { useFriendLinkDict } from '@/dicts/friendLinkDict';
import './friendLinkManage.less';
import styles from './friendLinkManage.less';
const { Option } = Select;
const { TextArea } = Input;
@ -203,23 +203,31 @@ const FriendLinkCategory: React.FC = () => {
];
return (
<div className="friend-link-category-container common-container">
<div className="action-bar">
<Button type="primary" icon={<PlusOutlined />} onClick={handleAddCategory}>
{intl.formatMessage({ id: 'friendLink.category.add' })}
</Button>
</div>
<div className="common-container">
<div className="filter-action-row">
<div></div>
<div className="right-buttons">
<Button
type="primary"
ghost
icon={<PlusOutlined />}
onClick={handleAddCategory}
>
{intl.formatMessage({ id: 'friendLink.category.add' })}
</Button>
</div>
</div>
<div className='content-area'>
<Table
rowKey="id"
columns={columns}
dataSource={categoryData}
loading={loading}
pagination={pagination}
onChange={handleTableChange}
/>
</div>
<div className="content-area">
<Table
rowKey="id"
columns={columns}
dataSource={categoryData}
loading={loading}
pagination={pagination}
onChange={handleTableChange}
/>
</div>
{/* 新增/编辑分类模态框 */}
<Modal

36
src/pages/friendLinkManage/friendLinkManage.less
View File

@ -1,36 +0,0 @@
.friend-link-manage-container,
.friend-link-category-container {
padding: 24px;
background-color: #fff;
min-height: calc(100vh - 184px);
.action-bar {
margin-bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
.selected-count {
margin-left: 8px;
color: #999;
}
}
.ant-table-row-expand-icon {
margin-right: 8px;
}
.ant-card {
margin-bottom: 24px;
}
.ant-table-thead > tr > th {
background-color: #fafafa;
font-weight: 500;
}
.ant-modal-body {
max-height: 60vh;
overflow-y: auto;
}
}

21
src/pages/friendLinkManage/friendLinkManage.tsx
View File

@ -15,7 +15,7 @@ import {
} from '@/servers/api/friendLink';
import { LinkStatusMap } from '@/dicts/friendLinkDict';
import FileUpload from '@/components/FileUpload';
import './friendLinkManage.less';
import styles from './friendLinkManage.less';
const FriendLinkManage: React.FC = () => {
const intl = useIntl();
@ -346,12 +346,18 @@ const FriendLinkManage: React.FC = () => {
};
return (
<div className="friend-link-manage-container common-container">
<div className="common-container">
<div className="filter-action-row">
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
{intl.formatMessage({ id: 'friendLink.add' })}
</Button>
<div></div>
<div className="right-buttons">
<Button
type="primary"
ghost
icon={<PlusOutlined />}
onClick={handleAdd}
>
{intl.formatMessage({ id: 'friendLink.add' })}
</Button>
<Button
danger
icon={<DeleteOutlined />}
@ -362,10 +368,7 @@ const FriendLinkManage: React.FC = () => {
</Button>
{selectedRowKeys.length > 0 && (
<span className="selected-count">
{intl.formatMessage(
{ id: 'friendLink.selectedCount' },
{ count: selectedRowKeys.length },
)}
{intl.formatMessage({ id: 'friendLink.selectedCount' }, { count: selectedRowKeys.length })}
</span>
)}
</div>

6
src/pages/helpManage/HelpManageForm.tsx
View File

@ -4,6 +4,7 @@ import { useIntl } from 'umi';
import WangEditor from '@/components/WangEidtor/WangEidtor';
import { TopStatus, EnglishSetting, categoryOptions } from '@/dicts/helpManageDict';
import { addHelp, updateHelp, getHelpDetail } from '@/servers/api/help';
import styles from './helpManage.less';
const { TabPane } = Tabs;
const { Option } = Select;
@ -127,7 +128,7 @@ const HelpManageForm: React.FC<HelpManageFormProps> = ({ id, isEdit, onSuccess }
};
return (
<div>
<div className={styles.helpForm}>
<Form form={form} layout="vertical" name="helpForm" preserve={false}>
<Form.Item name="isTop" label={intl.formatMessage({ id: 'helpManage.form.isTop' })} valuePropName="checked">
<Switch />
@ -214,7 +215,7 @@ const HelpManageForm: React.FC<HelpManageFormProps> = ({ id, isEdit, onSuccess }
</TabPane>
</Tabs>
</Form>
<div style={{ textAlign: 'right', marginTop: '20px' }}>
<div className={styles.formActions}>
<Button onClick={() => onSuccess()}>
{intl.formatMessage({ id: 'helpManage.cancel' })}
</Button>
@ -222,7 +223,6 @@ const HelpManageForm: React.FC<HelpManageFormProps> = ({ id, isEdit, onSuccess }
type="primary"
loading={loading}
onClick={handleSubmit}
style={{ marginLeft: '8px' }}
>
{intl.formatMessage({ id: 'helpManage.submit' })}
</Button>

19
src/pages/helpManage/HelpManageInfo.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import { Descriptions, Divider, Card, Tag } from 'antd';
import { useIntl } from 'umi';
import { HelpStatus, HelpStatusText, HelpStatusColor } from '@/dicts/helpManageDict';
import styles from './helpManage.less';
interface HelpManageInfoProps {
data: API.HelpRecord | null;
@ -22,7 +23,7 @@ const HelpManageInfo: React.FC<HelpManageInfoProps> = ({ data }) => {
if (!data) return null;
return (
<div className="help-detail-view">
<div className={styles.helpDetailView}>
<Descriptions bordered column={2} size="small">
<Descriptions.Item label={intl.formatMessage({ id: 'helpManage.detail.title' })} span={2}>
{data.title}
@ -57,15 +58,15 @@ const HelpManageInfo: React.FC<HelpManageInfoProps> = ({ data }) => {
</Descriptions>
<Divider orientation="left">{intl.formatMessage({ id: 'helpManage.detail.contentZh' })}</Divider>
<Card size="small" bordered={false} className="content-card">
<div className="help-content" dangerouslySetInnerHTML={{ __html: data.content }} />
<Card size="small" bordered={false} className={styles.contentCard}>
<div className={styles.helpContent} dangerouslySetInnerHTML={{ __html: data.content }} />
</Card>
{data.contentEn && (
<>
<Divider orientation="left">{intl.formatMessage({ id: 'helpManage.detail.contentEn' })}</Divider>
<Card size="small" bordered={false} className="content-card">
<div className="help-content" dangerouslySetInnerHTML={{ __html: data.contentEn }} />
<Card size="small" bordered={false} className={styles.contentCard}>
<div className={styles.helpContent} dangerouslySetInnerHTML={{ __html: data.contentEn }} />
</Card>
</>
)}
@ -73,8 +74,8 @@ const HelpManageInfo: React.FC<HelpManageInfoProps> = ({ data }) => {
{data.answerContent && (
<>
<Divider orientation="left">{intl.formatMessage({ id: 'helpManage.detail.answerContentZh' })}</Divider>
<Card size="small" bordered={false} className="content-card">
<div className="help-content" dangerouslySetInnerHTML={{ __html: data.answerContent }} />
<Card size="small" bordered={false} className={styles.contentCard}>
<div className={styles.helpContent} dangerouslySetInnerHTML={{ __html: data.answerContent }} />
</Card>
</>
)}
@ -82,8 +83,8 @@ const HelpManageInfo: React.FC<HelpManageInfoProps> = ({ data }) => {
{data.answerContentNe && (
<>
<Divider orientation="left">{intl.formatMessage({ id: 'helpManage.detail.answerContentEn' })}</Divider>
<Card size="small" bordered={false} className="content-card">
<div className="help-content" dangerouslySetInnerHTML={{ __html: data.answerContentNe }} />
<Card size="small" bordered={false} className={styles.contentCard}>
<div className={styles.helpContent} dangerouslySetInnerHTML={{ __html: data.answerContentNe }} />
</Card>
</>
)}

43
src/pages/helpManage/helpManage.less
View File

@ -1,28 +1,39 @@
.help-manage-container {
.helpManageContainer {
padding: 24px;
.help-manage-content {
background: #fff;
padding: 24px;
min-height: 500px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.search-area {
.searchArea {
display: flex;
margin-bottom: 16px;
align-items: center;
}
}
.common-container {
border-radius: 4px;
min-height: calc(100vh - 144px);
/* HelpManageForm styles */
.helpForm {
}
:global {
.ant-form-item {
margin-bottom: 16px;
.formActions {
text-align: right;
margin-top: 20px;
button {
margin-left: 8px;
}
}
/* HelpManageInfo styles */
.helpDetailView {
.contentCard {
background-color: #fafafa;
}
.helpContent {
padding: 16px;
:global {
img {
max-width: 100%;
}
}
}
}

4
src/pages/helpManage/helpManage.tsx
View File

@ -7,7 +7,7 @@ import {
ExclamationCircleOutlined,
SearchOutlined,
} from '@ant-design/icons';
import './helpManage.less';
import styles from './helpManage.less';
// 引入API
import {
getHelpList,
@ -354,8 +354,6 @@ const HelpManage: React.FC = () => {
dataIndex: 'createTime',
key: 'createTime',
align: 'center' as const,
sorter: (a: HelpItemType, b: HelpItemType) =>
new Date(a.createTime).getTime() - new Date(b.createTime).getTime(),
},
{
title: intl.formatMessage({ id: 'helpManage.status' }),

4
src/pages/noticeManage/NoticeManageForm.tsx
View File

@ -3,6 +3,7 @@ import { Form, Input, Switch, Tabs, message, Button } from 'antd';
import WangEditor from '@/components/WangEidtor/WangEidtor';
import { TopStatus, EnglishSetting } from '@/dicts/noticeManageDict';
import { addNotice, updateNotice, getNoticeDetail } from '@/servers/api/notice';
import styles from './noticeManage.less';
const { TabPane } = Tabs;
@ -161,13 +162,12 @@ const NoticeManageForm: React.FC<NoticeManageFormProps> = ({ id, isEdit, onSucce
</TabPane>
</Tabs>
</Form>
<div style={{ textAlign: 'right', marginTop: '20px' }}>
<div className={styles.formActions}>
<Button onClick={() => onSuccess()}>取消</Button>
<Button
type="primary"
loading={loading}
onClick={handleSubmit}
style={{ marginLeft: '8px' }}
>
提交
</Button>

12
src/pages/noticeManage/NoticeManageInfo.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { Descriptions, Divider, Card, Tag } from 'antd';
import { NoticeStatus, NoticeStatusText, NoticeStatusColor } from '@/dicts/noticeManageDict';
import styles from './noticeManage.less';
interface NoticeManageInfoProps {
data: API.NoticeRecord | null;
@ -18,7 +19,7 @@ const NoticeManageInfo: React.FC<NoticeManageInfoProps> = ({ data }) => {
if (!data) return null;
return (
<div className="notice-detail-view">
<div className={styles.noticeDetailView}>
<Descriptions bordered column={2} size="small">
<Descriptions.Item label="标题" span={2}>
{data.title}
@ -35,15 +36,15 @@ const NoticeManageInfo: React.FC<NoticeManageInfoProps> = ({ data }) => {
</Descriptions>
<Divider orientation="left">中文内容</Divider>
<Card size="small" bordered={false} className="content-card">
<div className="notice-content" dangerouslySetInnerHTML={{ __html: data.content }} />
<Card size="small" bordered={false} className={styles.contentCard}>
<div className={styles.noticeContent} dangerouslySetInnerHTML={{ __html: data.content }} />
</Card>
{data.contentEn && (
<>
<Divider orientation="left">英文内容</Divider>
<Card size="small" bordered={false} className="content-card">
<div className="notice-content" dangerouslySetInnerHTML={{ __html: data.contentEn }} />
<Card size="small" bordered={false} className={styles.contentCard}>
<div className={styles.noticeContent} dangerouslySetInnerHTML={{ __html: data.contentEn }} />
</Card>
</>
)}
@ -52,4 +53,3 @@ const NoticeManageInfo: React.FC<NoticeManageInfoProps> = ({ data }) => {
};
export default NoticeManageInfo;

18
src/pages/noticeManage/noticeManage.less
View File

@ -0,0 +1,18 @@
.noticeDetailView {
.contentCard {
background-color: #fafafa;
}
.noticeContent {
padding: 16px;
}
}
.formActions {
text-align: right;
margin-top: 20px;
button {
margin-left: 8px;
}
}

2
src/pages/noticeManage/noticeManage.tsx
View File

@ -9,7 +9,7 @@ import {
EyeOutlined,
} from '@ant-design/icons';
import { getNoticeList, addNotice, updateNotice, deleteNotice, batchDeleteNotice, updateNoticeStatus, updateNoticeTopStatus, getNoticeDetail } from '@/servers/api/notice';
import './noticeManage.less';
import styles from './noticeManage.less';
import {
NoticeStatus,
NoticeStatusText,

1
src/pages/supplierEvaluateManage/supplierEvaluateResultApproval/supplierEvaluateResultApproval.less Normal file
View File

@ -0,0 +1 @@
<EFBFBD><EFBFBD>

6
src/pages/supplierEvaluateManage/supplierTaskManage/supplierTaskManage.less
View File

@ -1,11 +1,11 @@
.supplier-task-manage-container {
.supplierTaskManageContainer {
// 使用公共容器样式，不需要重复定义padding和background-color
.task-detail {
.taskDetail {
padding: 16px;
.detail-item {
.detailItem {
margin-bottom: 16px;
line-height: 22px;

72
src/pages/supplierEvaluateManage/supplierTaskManage/supplierTaskManage.tsx
View File

@ -24,7 +24,7 @@ import {
EyeOutlined,
} from '@ant-design/icons';
import { TaskStatus, TaskType, TaskStatusText, TaskStatusColor, TaskTypeText } from '@/dicts/supplierTaskDict';
import './supplierTaskManage.less';
import styles from './supplierTaskManage.less';
const { Option } = Select;
const { RangePicker } = DatePicker;
@ -375,77 +375,77 @@ const SupplierTaskManage: React.FC = () => {
if (!viewData) return null;
return (
<div className="task-detail">
<div className={styles.taskDetail}>
<Row gutter={[16, 16]}>
<Col span={12}>
<div className="detail-item">
<span className="label">任务名称：</span>
<span className="content">{viewData.taskName}</span>
<div className={styles.detailItem}>
<span className={styles.label}>任务名称：</span>
<span className={styles.content}>{viewData.taskName}</span>
</div>
</Col>
<Col span={12}>
<div className="detail-item">
<span className="label">任务编号：</span>
<span className="content">{viewData.taskCode}</span>
<div className={styles.detailItem}>
<span className={styles.label}>任务编号：</span>
<span className={styles.content}>{viewData.taskCode}</span>
</div>
</Col>
<Col span={12}>
<div className="detail-item">
<span className="label">任务类型：</span>
<span className="content">
<div className={styles.detailItem}>
<span className={styles.label}>任务类型：</span>
<span className={styles.content}>
{TaskTypeText[viewData.taskType as keyof typeof TaskTypeText] || '未知类型'}
</span>
</div>
</Col>
<Col span={12}>
<div className="detail-item">
<span className="label">使用模板：</span>
<span className="content">{viewData.templateName}</span>
<div className={styles.detailItem}>
<span className={styles.label}>使用模板：</span>
<span className={styles.content}>{viewData.templateName}</span>
</div>
</Col>
<Col span={12}>
<div className="detail-item">
<span className="label">状态：</span>
<span className="content">{getStatusTag(viewData.status)}</span>
<div className={styles.detailItem}>
<span className={styles.label}>状态：</span>
<span className={styles.content}>{getStatusTag(viewData.status)}</span>
</div>
</Col>
<Col span={12}>
<div className="detail-item">
<span className="label">开始时间：</span>
<span className="content">{viewData.startTime}</span>
<div className={styles.detailItem}>
<span className={styles.label}>开始时间：</span>
<span className={styles.content}>{viewData.startTime}</span>
</div>
</Col>
<Col span={12}>
<div className="detail-item">
<span className="label">结束时间：</span>
<span className="content">{viewData.endTime}</span>
<div className={styles.detailItem}>
<span className={styles.label}>结束时间：</span>
<span className={styles.content}>{viewData.endTime}</span>
</div>
</Col>
<Col span={12}>
<div className="detail-item">
<span className="label">创建人：</span>
<span className="content">{viewData.createBy}</span>
<div className={styles.detailItem}>
<span className={styles.label}>创建人：</span>
<span className={styles.content}>{viewData.createBy}</span>
</div>
</Col>
<Col span={12}>
<div className="detail-item">
<span className="label">创建时间：</span>
<span className="content">{viewData.createTime}</span>
<div className={styles.detailItem}>
<span className={styles.label}>创建时间：</span>
<span className={styles.content}>{viewData.createTime}</span>
</div>
</Col>
{viewData.updateBy && (
<Col span={12}>
<div className="detail-item">
<span className="label">更新人：</span>
<span className="content">{viewData.updateBy}</span>
<div className={styles.detailItem}>
<span className={styles.label}>更新人：</span>
<span className={styles.content}>{viewData.updateBy}</span>
</div>
</Col>
)}
{viewData.updateTime && (
<Col span={12}>
<div className="detail-item">
<span className="label">更新时间：</span>
<span className="content">{viewData.updateTime}</span>
<div className={styles.detailItem}>
<span className={styles.label}>更新时间：</span>
<span className={styles.content}>{viewData.updateTime}</span>
</div>
</Col>
)}
@ -522,7 +522,7 @@ const SupplierTaskManage: React.FC = () => {
};
return (
<div className="supplier-task-manage-container common-container">
<div className={`${styles.supplierTaskManageContainer} common-container`}>
<div className="filter-action-row">
<Form
form={form}

19
src/pages/userQuestionManage/QuestionModal.tsx
View File

@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Modal, Button, Form, Input, Switch, message, Descriptions, Divider, Card, Tag } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useIntl, FormattedMessage } from 'umi';
import styles from './userQuestionManage.less';
import { answerQuestion } from '@/servers/api/userQuestion';
// 引入字典
import {
@ -163,7 +164,7 @@ const QuestionModal: React.FC<QuestionModalProps> = ({
if (!question) return null;
return (
<div className="question-detail-view">
<div className={styles.questionDetailView}>
<Descriptions bordered column={2} size="small">
<Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.title' })} span={2}>
{question.title}
@ -219,8 +220,8 @@ const QuestionModal: React.FC<QuestionModalProps> = ({
</Descriptions>
<Divider orientation="left">{intl.formatMessage({ id: 'questionDetail.questionContent' })}</Divider>
<Card size="small" bordered={false} className="content-card">
<div className="question-content">
<Card size="small" bordered={false} className={styles.contentCard}>
<div className={styles.questionContent}>
{question.content}
</div>
</Card>
@ -228,8 +229,8 @@ const QuestionModal: React.FC<QuestionModalProps> = ({
{question.answerContent && (
<>
<Divider orientation="left">{intl.formatMessage({ id: 'questionDetail.answerContent' })}</Divider>
<Card size="small" bordered={false} className="content-card">
<div className="answer-content">
<Card size="small" bordered={false} className={styles.contentCard}>
<div className={styles.answerContent}>
{question.answerContent}
</div>
</Card>
@ -245,7 +246,7 @@ const QuestionModal: React.FC<QuestionModalProps> = ({
return (
<Form form={form} layout="vertical">
<div className="question-info-section">
<div className={styles.questionInfoSection}>
<Descriptions bordered column={2} size="small">
<Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.title' })} span={2}>
{question.title}
@ -275,8 +276,8 @@ const QuestionModal: React.FC<QuestionModalProps> = ({
</div>
<Divider orientation="left">{intl.formatMessage({ id: 'questionDetail.questionContent' })}</Divider>
<Card size="small" bordered={false} className="content-card">
<div className="question-content">
<Card size="small" bordered={false} className={styles.contentCard}>
<div className={styles.questionContent}>
{question.content}
</div>
</Card>
@ -298,7 +299,7 @@ const QuestionModal: React.FC<QuestionModalProps> = ({
/>
</Form.Item>
<div className="form-options">
<div className={styles.questionSettings}>
<Form.Item name="isPublished" valuePropName="checked">
<Switch checkedChildren={intl.formatMessage({ id: 'questionModal.publishSwitch' })} />
</Form.Item>

12
src/pages/userQuestionManage/QuestionViewDetail.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { Descriptions, Divider, Card, Tag } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
import styles from './userQuestionManage.less';
import {
PublishStatus,
PublishStatusText,
@ -37,7 +38,7 @@ const QuestionViewDetail: React.FC<QuestionDetailProps> = ({ question }) => {
};
return (
<div className="question-detail-view">
<div className={styles.questionDetailView}>
<Descriptions bordered column={2} size="small">
<Descriptions.Item label={intl.formatMessage({ id: 'questionDetail.title' })} span={2}>
{question.title}
@ -84,8 +85,8 @@ const QuestionViewDetail: React.FC<QuestionDetailProps> = ({ question }) => {
</Descriptions>
<Divider orientation="left">{intl.formatMessage({ id: 'questionDetail.questionContent' })}</Divider>
<Card size="small" bordered={false} className="content-card">
<div className="question-content">
<Card size="small" bordered={false} className={styles.contentCard}>
<div className={styles.questionContent}>
{question.content}
</div>
</Card>
@ -93,8 +94,8 @@ const QuestionViewDetail: React.FC<QuestionDetailProps> = ({ question }) => {
{question.answerContent && (
<>
<Divider orientation="left">{intl.formatMessage({ id: 'questionDetail.answerContent' })}</Divider>
<Card size="small" bordered={false} className="content-card">
<div className="answer-content">
<Card size="small" bordered={false} className={styles.contentCard}>
<div className={styles.answerContent}>
{question.answerContent}
</div>
</Card>
@ -105,4 +106,3 @@ const QuestionViewDetail: React.FC<QuestionDetailProps> = ({ question }) => {
};
export default QuestionViewDetail;

2
src/pages/userQuestionManage/readQuestionManage.tsx
View File

@ -6,7 +6,7 @@ import {
ExclamationCircleOutlined,
SearchOutlined
} from '@ant-design/icons';
import '../userQuestionManage/userQuestionManage.less';
import styles from './userQuestionManage.less';
// 引入封装的组件
import QuestionModal from './QuestionModal';
// 引入API

2
src/pages/userQuestionManage/unreadQuestionManage.tsx
View File

@ -6,7 +6,7 @@ import {
ExclamationCircleOutlined,
SearchOutlined
} from '@ant-design/icons';
import '../userQuestionManage/userQuestionManage.less';
import styles from './userQuestionManage.less';
// 引入封装的组件
import QuestionModal from './QuestionModal';
// 引入API

70
src/pages/userQuestionManage/userQuestionManage.less
View File

@ -1,21 +1,13 @@
// 扩展公共容器样式
.common-container {
border-radius: 2px;
min-height: calc(100vh - 184px);
// 这里只保留与公共样式不同的部分
}
// 问题查看容器
.question-view-container {
.questionViewContainer {
padding: 0;
}
// 问题编辑容器
.question-edit-container {
.questionEditContainer {
padding: 0;
.form-actions {
.formActions {
display: flex;
justify-content: flex-end;
margin-top: 24px;
@ -23,13 +15,13 @@
}
// 卡片容器样式
.card-container {
.cardContainer {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 24px;
.stat-card {
.statCard {
width: calc(25% - 18px);
min-width: 250px;
height: 120px;
@ -47,25 +39,25 @@
transform: translateY(-2px);
}
.card-title {
.cardTitle {
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 8px;
}
.card-value {
.cardValue {
font-size: 28px;
font-weight: bold;
color: #1890ff;
}
.card-footer {
.cardFooter {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
.card-label {
.cardLabel {
font-size: 14px;
color: rgba(0, 0, 0, 0.45);
}
@ -74,7 +66,7 @@
}
// 问题详情样式
.question-detail-header {
.questionDetailHeader {
margin-bottom: 24px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 16px;
@ -85,7 +77,7 @@
font-weight: 500;
}
.question-meta {
.questionMeta {
display: flex;
flex-wrap: wrap;
@ -96,7 +88,7 @@
}
}
.question-detail-section {
.questionDetailSection {
margin-bottom: 24px;
h3 {
@ -105,7 +97,7 @@
font-weight: 500;
}
.question-detail-content {
.questionDetailContent {
padding: 16px;
background-color: #f5f5f5;
border-radius: 4px;
@ -113,13 +105,13 @@
word-break: break-all;
}
.answer-content-wrapper {
.answerContentWrapper {
border: 1px solid #f0f0f0;
border-radius: 4px;
padding: 16px;
min-height: 200px;
.answer-content {
.answerContent {
line-height: 1.6;
p {
@ -134,16 +126,16 @@
}
}
.question-detail-footer {
.questionDetailFooter {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
.question-settings {
.questionSettings {
display: flex;
margin-bottom: 16px;
.setting-item {
.settingItem {
display: flex;
align-items: center;
margin-right: 24px;
@ -152,11 +144,11 @@
margin-right: 8px;
}
.switch-wrapper {
.switchWrapper {
display: flex;
align-items: center;
.status-indicator {
.statusIndicator {
width: 8px;
height: 8px;
border-radius: 50%;
@ -174,7 +166,7 @@
background-color: #f5222d;
}
&.not-top {
&.notTop {
background-color: #d9d9d9;
}
}
@ -182,7 +174,7 @@
}
}
.answer-info {
.answerInfo {
display: flex;
span {
@ -192,10 +184,10 @@
}
}
.answer-form-container {
.answerFormContainer {
margin-bottom: 24px;
.question-settings {
.questionSettings {
display: flex;
margin-top: 16px;
@ -204,23 +196,23 @@
}
}
.answer-content {
.answerContent {
min-height: 100px;
}
}
// 新增问题详情查看样式
.question-detail-view {
.questionDetailView {
.ant-descriptions {
margin-bottom: 24px;
}
.content-card {
.contentCard {
background-color: #f9f9f9;
margin-bottom: 24px;
.question-content,
.answer-content {
.questionContent,
.answerContent {
white-space: pre-wrap;
line-height: 1.6;
word-break: break-word;
@ -240,7 +232,7 @@
}
// 添加合并后组件的样式
.question-info-section {
.questionInfoSection {
margin-bottom: 24px;
.ant-descriptions {
@ -248,7 +240,7 @@
}
}
.question-settings {
.questionSettings {
display: flex;
gap: 24px;
margin-top: 16px;