achenc1013/ThriveX-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

封装Title组件

Browse Source
This commit is contained in:
宇阳
2024-08-07 14:35:10 +08:00
parent 1ffc3e4467
commit 4d2d9a1550
5 changed files with 56 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Title/index.tsx Normal file
View File

@@ -0,0 +1,13 @@
"use client"
import { Card } from "antd"
import Breadcrumb from "../Breadcrumbs"
import { titleSty } from '@/styles/sty'
export default ({ value }: { value: string }) => {
return (
<>
<Card title={<Breadcrumb pageName={value} />} className={titleSty} />
</>
)
}

9
src/pages/Article/index.tsx
View File

@@ -3,7 +3,8 @@ import { Table, Tag, Button, notification, Card, Popconfirm } from 'antd';
import { delArticleDataAPI, getArticleListAPI } from '@/api/Article';
import dayjs from 'dayjs';
import type { Article } from '@/types/article';
import Breadcrumb from '@/components/Breadcrumbs'
import { titleSty } from '@/styles/sty'
import Title from '@/components/Title';
const Article: React.FC = () => {
const [loading, setLoading] = useState<boolean>(false);
@@ -122,13 +123,11 @@ const Article: React.FC = () => {
},
];
const titleSty = "border-stroke dark:border-strokedark [&>.ant-card-head]:border-stroke [&>.ant-card-head]:dark:border-strokedark dark:bg-boxdark [&>.ant-card-body]:!p-0"
return (
<>
<Card title={<Breadcrumb pageName="文章管理" />} className={titleSty}></Card>
<Title value="文章管理" />
<Card className={`${titleSty} mt-4`}>
<Card className={`${titleSty} mt-2`}>
<Table
rowKey="id"
dataSource={articleList}

68
src/pages/Cate/index.tsx
View File

@@ -1,13 +1,11 @@
import React, { useState, useEffect, useRef } from 'react';
import { Cate } from '@/types/cate';
import { addCateDataAPI, delCateDataAPI, editCateDataAPI, getCateDataAPI, getCateListAPI } from '@/api/Cate';
import Breadcrumb from '@/components/Breadcrumbs';
import { DownOutlined } from '@ant-design/icons';
import { MdOutlineKeyboardArrowDown, MdOutlineKeyboardArrowUp } from "react-icons/md";
import { titleSty } from '@/styles/sty';
import { Form, Input, Button, Tree, Modal, notification, Spin, Dropdown, Card, MenuProps, Popconfirm } from 'antd';
import "./index.scss"
import Title from '@/components/Title';
const CateManager: React.FC = () => {
const [loading, setLoading] = useState(false);
@@ -123,43 +121,45 @@ const CateManager: React.FC = () => {
}
}, [cate, model]);
const titleSty = "border-stroke dark:border-strokedark [&>.ant-card-head]:border-stroke [&>.ant-card-head]:dark:border-strokedark dark:bg-boxdark [&>.ant-card-body]:pt-2"
return (
<Card title={<Breadcrumb pageName="分类管理" />} className={titleSty}>
<div className='mt-2 mb-4 text-center'>
<Button type="primary" onClick={() => setModel(true)}>新增一级分类</Button>
</div>
<>
<Title value="分类管理" />
<Spin spinning={loading}>
<Tree defaultExpandAll treeData={treeData(list)} />
</Spin>
<Card className={`[&>.ant-card-body]:!p-2 [&>.ant-card-body]:!pb-6 mt-2`}>
<div className='my-2 text-center'>
<Button type="primary" onClick={() => setModel(true)}>新增一级分类</Button>
</div>
<Modal title="新增分类导航" open={model} onCancel={closeModel} footer={null}>
<Form ref={formRef} layout="vertical" initialValues={cate} size='large' className='mt-6'>
<Form.Item label="名称" name="name" rules={[{ required: true, message: '分类名称不能为空' }, { min: 1, max: 10, message: '分类名称限制为 1 ~ 10 个字符' }]}>
<Input placeholder="大前端" />
</Form.Item>
<Spin spinning={loading}>
<Tree defaultExpandAll={true} treeData={treeData(list)} />
</Spin>
<Form.Item label="标识" name="mark" rules={[{ required: true, message: '分类标识不能为空' }, { min: 1, max: 10, message: '分类标识限制为 1 ~ 10 个字符' }]}>
<Input placeholder="dqd" />
</Form.Item>
<Modal title="新增分类导航" open={model} onCancel={closeModel} footer={null}>
<Form ref={formRef} layout="vertical" initialValues={cate} size='large' className='mt-6'>
<Form.Item label="名称" name="name" rules={[{ required: true, message: '分类名称不能为空' }, { min: 1, max: 10, message: '分类名称限制为 1 ~ 10 个字符' }]}>
<Input placeholder="大前端" />
</Form.Item>
<Form.Item label="图标" name="icon">
<Input placeholder="🎉" />
</Form.Item>
<Form.Item label="标识" name="mark" rules={[{ required: true, message: '分类标识不能为空' }, { min: 1, max: 10, message: '分类标识限制为 1 ~ 10 个字符' }]}>
<Input placeholder="dqd" />
</Form.Item>
<Form.Item label="链接（选填）" name="url">
<Input placeholder="https://liuyuyang.net/" />
</Form.Item>
<Form.Item label="图标" name="icon">
<Input placeholder="🎉" />
</Form.Item>
<Form.Item className='!mb-0 flex justify-end'>
<Button onClick={closeModel}>取消</Button>
<Button type="primary" onClick={submit} className='ml-2'>确定</Button>
</Form.Item>
</Form>
</Modal>
</Card>
<Form.Item label="链接（选填）" name="url">
<Input placeholder="https://liuyuyang.net/" />
</Form.Item>
<Form.Item className='!mb-0 flex justify-end'>
<Button onClick={closeModel}>取消</Button>
<Button type="primary" onClick={submit} className='ml-2'>确定</Button>
</Form.Item>
</Form>
</Modal>
</Card>
</>
);
};

7
src/pages/Create/index.tsx
View File

@@ -7,6 +7,7 @@ import PublishForm from './components/PublishForm';
import { useEffect, useState } from 'react';
import { addCateDataAPI, delCateDataAPI, editCateDataAPI, getCateDataAPI, getCateListAPI } from '@/api/Cate'
import Title from '@/components/Title';
const Create = () => {
const [content, setContent] = useState('');
@@ -24,11 +25,11 @@ const Create = () => {
})
}, [content])
const titleSty = "border-stroke dark:border-strokedark [&>.ant-card-head]:border-stroke [&>.ant-card-head]:dark:border-strokedark dark:bg-boxdark [&>.ant-card-body]:pt-2"
return (
<>
<Card title={<Breadcrumb pageName="创作" />} className={titleSty}>
<Title value="创作" />
<Card className='mt-2'>
<div className='fixed bottom-10 right-[5%] w-22 z-10'>
<Button type="primary" className='w-full' onClick={() => setPublishOpen(true)} >
<BiSave className='text-base' /> 保存</Button>

1
src/styles/sty.ts Normal file
View File

@@ -0,0 +1 @@
export const titleSty = "border-stroke dark:border-strokedark [&>.ant-card-head]:border-stroke [&>.ant-card-head]:dark:border-strokedark dark:bg-boxdark [&>.ant-card-body]:!p-0"