18 |
19 | {breadcrumbs.map((item, index) => (
20 | index === breadcrumbs.length - 1 ? {item.meta?.title}
21 | : (
22 |
23 | {item.meta?.title}
24 | {/*
25 | {item.meta.title}
26 | */}
27 |
28 | )))}
29 |
30 |
31 | )
32 | })
33 |
34 | export default Breadcrumbs
35 |
--------------------------------------------------------------------------------
/src/components/Captcha/index.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | memo, useState, useEffect, useRef,
3 | } from 'react'
4 | import { IDictionary } from '@src/typings/global'
5 | import { Button, FormInstance, message } from 'antd'
6 | import authApi from '@src/api/auth'
7 | import { useAsyncFn, useCounter } from 'react-use'
8 |
9 | const COUNT_STATIC = 60
10 | interface IProps {
11 | module: 'login' | 'register'
12 | form: FormInstance
13 | }
14 |
15 | interface BtnState {
16 | state: boolean
17 | info: string
18 | }
19 |
20 | const currentState: IDictionary
30 |
38 |
46 |
47 | )
48 | })
49 |
50 | export default connect(({ user: { username } }: IStoreState) => ({ username }), {
51 | logout, clearSideBarRoutes,
52 | })(UserInfo)
53 |
--------------------------------------------------------------------------------
/src/components/Layout/Header/index.less:
--------------------------------------------------------------------------------
1 | .header {
2 | height: @header-height !important;
3 | background-color: @main-bgcolor !important;
4 | display: flex;
5 | align-items: center;
6 | justify-content: space-between;
7 | padding: 0 !important;
8 |
9 | .anticon {
10 | color: @text-gray;
11 | &:hover {
12 | color: #000;
13 | }
14 | }
15 |
16 | .anticon-menu-fold, .anticon-menu-unfold {
17 | font-size: 16px;
18 | padding-left: 30px;
19 | }
20 |
21 | }
--------------------------------------------------------------------------------
/src/components/Layout/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react'
2 | import { useWindowSize, useDebounce } from 'react-use'
3 | import { Layout } from 'antd'
4 | import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
5 | import { AppState, updateSideBar } from '@src/store/module/app'
6 | import { Min_Width } from '@src/constants/app'
7 | import { connect } from 'react-redux'
8 | import UserInfo from './UserInfo'
9 | import './index.less'
10 |
11 | interface IProps {
12 | updateSideBar: (sidebar: AppState['sidebar']) => void
13 | sidebar: AppState['sidebar']
14 | }
15 |
16 | const Header: React.FC{props.username}
32 |
39 |
45 |
10 | {children}
11 |
12 |
62 | {loading ?
65 | )
66 |
67 | return (
68 | Upload
64 | 
: uploadButton}
77 |
45 |
66 |
67 | )
68 | }
69 | }
70 |
71 | export default UserLayout
72 |
--------------------------------------------------------------------------------
/src/constants/app.ts:
--------------------------------------------------------------------------------
1 | import { FormProps } from 'antd';
2 |
3 | export const LayoutCol: FormProps = {
4 | labelCol: { span: 4 },
5 | wrapperCol: { span: 16 },
6 | }
7 |
8 | export const Min_Width = 460
9 |
--------------------------------------------------------------------------------
/src/constants/lottiePath.ts:
--------------------------------------------------------------------------------
1 | export const ClosePath = 'https://assets10.lottiefiles.com/temp/lf20_1m8bBV.json'
2 |
3 | export const LoginPath = 'https://assets3.lottiefiles.com/private_files/lf30_irb2v6ie.json'
4 |
--------------------------------------------------------------------------------
/src/constants/server.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/prefer-default-export
2 | export const BASE = process.env.NODE_ENV === 'development' ? '/api' : '/adminApi/'
3 |
--------------------------------------------------------------------------------
/src/constants/validate.ts:
--------------------------------------------------------------------------------
1 | import { Rule } from 'antd/lib/form'
2 |
3 | export const PASSWORDREG = /^[a-zA-Z]\w{5,17}$/
4 | export const CARDREG = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/
5 | export const PHONEREG = /^(?:(?:\+|00)86)?1\d{10}$/
6 |
7 | export const ConfirmPassWord = ({ getFieldValue }: any) => ({
8 | validator(_: any, value: any) {
9 | if (!value || getFieldValue('password') === value) {
10 | return Promise.resolve()
11 | }
12 | return Promise.reject(new Error('您输入的两个密码不匹配!'))
13 | },
14 | })
15 |
16 | /* 邮箱验证 */
17 | export const UserNameRule: Rule[] = [{ required: true, message: '请输入用户名！' }, { type: 'email', message: '请输入正确的邮箱格式！' }]
18 |
19 | /* 密码验证 */
20 | export const PassWordRule: Rule[] = [{ required: true, message: '请输入密码！' }, { pattern: PASSWORDREG, message: '输入的密码不合规范！' }]
21 |
22 | /* 确认密码 */
23 | export const ConfirmRule: Rule[] = [{ required: true, message: '请输入重复密码！' }, ConfirmPassWord]
24 |
25 | /* 验证码 */
26 | export const CaptchaRule : Rule[] = [{ required: true, message: '请输入验证码！' }, { len: 6, message: '请检查验证码长度！' }]
27 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import { Provider } from 'react-redux'
4 | import { ConfigProvider } from 'antd'
5 | import zhCN from 'antd/es/locale/zh_CN'
6 | import App from './views/App'
7 | import store from './store'
8 | import './assets/normalize.less'
9 |
10 | ReactDOM.render(
11 | -
46 | {/* eslint-disable-next-line react/no-array-index-key */}
47 | {new Array(10).fill(0).map((item, index) =>
- Admin )} 48 |
50 |
59 | {systemRouteList.map((menu: IRoute) => (
60 |
63 |
64 |
65 |
51 |
52 |
53 | React Ant Admin
54 |
55 |
56 |
57 |
15 |
44 | ))
45 |
46 | export default connect(({ user: { username } }: IStoreState) => ({ username }), null)(DashboardHeader)
47 |
--------------------------------------------------------------------------------
/src/views/Dashboard/header.less:
--------------------------------------------------------------------------------
1 | .dashboard-header {
2 | .header-title {
3 | font-weight: 600;
4 | font-size: 20px;
5 | margin-bottom: 10px;
6 | }
7 | }
8 |
9 | .header-content {
10 | display: flex;
11 | align-items: center;
12 | justify-content: space-between;
13 | padding: 20px 0;
14 | @media (max-width: 768px) {
15 | display: block;
16 | }
17 | .content-left {
18 | display: flex;
19 | align-items: center;
20 |
21 | @media (max-width: 768px) {
22 | display: block;
23 | }
24 |
25 | & > div + div{
26 | margin-left: 10px;
27 | }
28 | .content-info {
29 | color: rgba(0,0,0,.85);
30 | font-size: 20px;
31 | margin-bottom: 15px;
32 | }
33 | .content-id {
34 | color: rgba(0,0,0,.45);
35 | }
36 | }
37 | .content-count {
38 | // display: flex;
39 | @media (max-width: 768px) {
40 | margin-top: 10px;
41 | }
42 | }
43 |
44 | }
--------------------------------------------------------------------------------
/src/views/Dashboard/index.less:
--------------------------------------------------------------------------------
1 | .site-card-border-less-wrapper {
2 | padding: 30px;
3 | background: #ececec;
4 | @media (max-width: 768px) {
5 | padding: 5px;
6 | }
7 | }
--------------------------------------------------------------------------------
/src/views/Dashboard/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useEffect, useState } from 'react'
2 | import { useAsyncFn } from 'react-use'
3 | import { PaginationProps, Row, Divider } from 'antd'
4 | import departmentApi from '@src/api/department'
5 | import jobApi from '@src/api/job'
6 | import staffApi from '@src/api/staff'
7 | import userApi from '@src/api/user'
8 | import Header from './Header'
9 | import CardGroup from './CardGroup'
10 | import './index.less'
11 |
12 | const Dashboard: React.FC = memo(() => {
13 | const [page, setPage] = useState
16 | 控制台
17 |
18 |
19 |
38 |
42 |
43 |
20 |
37 |
27 |
36 |
28 | 早安，
29 | {username}
30 | ,祝你快乐一整天!
31 |
32 |
33 | 前端萌新 | 邯郸学院 — 软件工程专业 — 某某年级
34 |
35 |
34 |
45 | )
46 | })
47 |
48 | export default Dashboard
49 |
--------------------------------------------------------------------------------
/src/views/Department/Add/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useCallback, useEffect } from 'react'
2 | import { useAsyncFn } from 'react-use'
3 | import { useHistory, useLocation } from 'react-router-dom'
4 | import { Button, Form, message } from 'antd'
5 | import { IDepartmentParams } from '@src/api/types/department'
6 | import { LayoutCol } from '@src/constants/app'
7 | import departmentApi from '@src/api/department'
8 | import DepartmentItem from '@src/components/FormItem/DepartmentItem'
9 |
10 | const DepartmentAdd: React.FC = memo(() => {
11 | const { state } = useLocation<{id: string}>()
12 | const [form] = Form.useForm()
13 | const { goBack } = useHistory()
14 |
15 | const [, addOrEditDepartmentFn] = useAsyncFn(departmentApi.addOrEditDepartment)
16 | const [, getDepartmentDetailedFn] = useAsyncFn(departmentApi.getDepartmentDetailed)
17 |
18 | /* 部门列表跳转判断是否有id */
19 | useEffect(() => {
20 | if (state?.id) {
21 | getDepartmentDetailedFn(state.id).then((res) => {
22 | form.setFieldsValue(res)
23 | })
24 | }
25 | }, [])
26 |
27 | /* 编辑或者删除 */
28 | const onHandleSubmit = useCallback(
29 | () => {
30 | form.validateFields().then((res: IDepartmentParams) => {
31 | const id = state?.id ? state.id : undefined
32 | const values = { id, ...res }
33 | addOrEditDepartmentFn(values).then((mes) => {
34 | message.success(mes)
35 | form.resetFields()
36 | goBack()
37 | })
38 | })
39 | },
40 | [],
41 | )
42 |
43 | return (
44 |
63 | )
64 | })
65 |
66 | export default DepartmentAdd
67 |
--------------------------------------------------------------------------------
/src/views/Department/List/index.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | memo, useCallback, useEffect, useState,
3 | } from 'react'
4 | import { useHistory } from 'react-router-dom'
5 | import { useAsyncFn } from 'react-use'
6 | import {
7 | Button, Table, Popconfirm, message, PaginationProps, Form, Switch, Modal,
8 | } from 'antd'
9 | import { IDepartment } from '@src/api/types/department'
10 | import BasisTable from '@src/components/BasisTable'
11 | import departmentApi from '@src/api/department'
12 | import SearchItem, { SearchParam } from '@src/components/FormItem/SearchItem'
13 |
14 | const DepartList: React.FC = memo(() => {
15 | const [search, setSearch] = useState
37 |
38 |
43 |
44 |
107 |
118 |
119 | loading={departmentList.loading}
120 | data={departmentList.value?.data.data}
121 | total={departmentList.value?.data.total}
122 | rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
123 | onChange={onPageChange}
124 | footer={() => }>
125 |
126 | title='部门名称'
127 | dataIndex='name' />
128 |
129 | title='禁启用'
130 | dataIndex='status'
131 | align='center'
132 | width={100}
133 | render={(_, record) => (
134 | onHandleChangeStatus(record.id, checked)} />
139 | )} />
140 |
141 | title='人员数量'
142 | dataIndex='number' />
143 |
144 | title='操作'
145 | align='center'
146 | width={200}
147 | render={(_, record) => (
148 |
165 | )
166 | })
167 |
168 | export default DepartList
169 |
--------------------------------------------------------------------------------
/src/views/Error/403.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react'
2 | import { Button, Result } from 'antd'
3 | import { Link } from 'react-router-dom'
4 |
5 | const Noauthorized: React.FC = memo(() => {
6 | console.log('403')
7 | return (
8 |
149 |
154 | onDeleteModal(record.id!)}
157 | okText='确认'
158 | cancelText='取消'>
159 |
160 |
161 |
162 | )} />
163 |
164 |
107 |
118 |
119 | loading={jobList.loading}
120 | data={jobList.value?.data.data}
121 | total={jobList.value?.data.total}
122 | rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
123 | onChange={onPageChange}
124 | footer={() => }>
125 |
126 | title='职位名称'
127 | dataIndex='name' />
128 |
129 | title='部门名称'
130 | dataIndex='jobName' />
131 |
132 | title='禁启用'
133 | dataIndex='status'
134 | align='center'
135 | width={100}
136 | render={(text, record) => (
137 | onHandleChangeStatus(record.jobId, checked)} />
142 | )} />
143 |
144 | title='操作'
145 | align='center'
146 | width={200}
147 | render={(text, record) => (
148 |
165 | )
166 | })
167 |
168 | export default JobList
169 |
--------------------------------------------------------------------------------
/src/views/Login/Form/loginForm.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useCallback } from 'react'
2 | import { useAsyncFn, useKey } from 'react-use'
3 | import { useHistory } from 'react-router-dom'
4 | import { connect } from 'react-redux'
5 | import sha256 from 'crypto-js/sha256'
6 | import { Form, Button, message } from 'antd'
7 | import authApi from '@src/api/auth'
8 | import LoginItem from '@src/components/FormItem/LoginItem'
9 | import type { IParam } from '@src/api/types/auth'
10 | import { UserState, setUserInfo } from '@src/store/module/user'
11 |
12 | interface IProps {
13 | setUserInfo: (user: UserState)=> void
14 | }
15 |
16 | const LoginForm: React.FC
149 |
154 | onDeleteModal(record.jobId)}
157 | okText='确认'
158 | cancelText='取消'>
159 |
160 |
161 |
162 | )} />
163 |
164 |
53 |
71 | )
72 | })
73 |
74 | export default Login
75 |
--------------------------------------------------------------------------------
/src/views/Staff/Add/index.less:
--------------------------------------------------------------------------------
1 | .staff-form {
2 | display: flex;
3 | justify-content: space-between;
4 | flex-wrap: wrap;
5 | width: 100%;
6 | @media (max-width: 768px) {
7 | display: block;
8 | }
9 | &>div {
10 | flex-basis: 50%;
11 | }
12 | .form-editor {
13 | flex-basis: 100%;
14 | .ant-col-10 {
15 | max-width: 100% !important;
16 | }
17 | }
18 | }
--------------------------------------------------------------------------------
/src/views/Staff/Add/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useCallback, useEffect } from 'react'
2 | import { useAsyncFn } from 'react-use'
3 | import { useLocation, useHistory } from 'react-router-dom'
4 | import moment from 'moment'
5 | import store from 'store'
6 | import { Button, Form, Divider } from 'antd'
7 | import departmentApi from '@src/api/department'
8 | import jobApi from '@src/api/job'
9 | import staffApi from '@src/api/staff'
10 | import StaffItem from '@src/components/FormItem/StaffItem'
11 | import './index.less'
12 | import { UPLOAD_TOKEN } from '@src/components/UploadPic'
13 |
14 | const token = store.get(UPLOAD_TOKEN)
15 |
16 | const StaffAdd: React.FC = memo(() => {
17 | const [form] = Form.useForm()
18 | const { state } = useLocation<{id: string}>()
19 | const { push } = useHistory()
20 |
21 | const [departmentAll, getDepartmentListAllFn] = useAsyncFn(departmentApi.getDepartmentListAll)
22 | const [jobAll, getJobListAllFn] = useAsyncFn(jobApi.getJobAllList)
23 | const [, getStaffDetailFn] = useAsyncFn(staffApi.getstaffDetail)
24 | const [, addOrEditStaffFn] = useAsyncFn(staffApi.addOrEditStaff)
25 |
26 | useEffect(() => {
27 | getDepartmentListAllFn()
28 | getJobListAllFn()
29 | if (state?.id) {
30 | getStaffDetailFn(state.id).then((res) => {
31 | const {
32 | birthday,
33 | job_entry_date,
34 | job_formal_date,
35 | job_status_date,
36 | job_quit_date,
37 | ...data
38 | } = res
39 |
40 | const basisDate = {
41 | birthday: birthday ? moment(birthday) : null,
42 | job_entry_date: job_entry_date ? moment(job_entry_date) : null,
43 | job_formal_date: job_formal_date ? moment(job_formal_date) : null,
44 | job_status_date: job_status_date ? moment(job_status_date) : null,
45 | job_quit_date: job_quit_date ? moment(job_quit_date) : null,
46 | }
47 |
48 | form.setFieldsValue({ ...data, ...basisDate })
49 | })
50 | }
51 | return () => {
52 | store.remove(UPLOAD_TOKEN)
53 | }
54 | }, [])
55 |
56 | const onSubmit = useCallback(
57 | () => {
58 | form.validateFields().then((res) => {
59 | const id = state?.id
60 | const values = { id, ...res }
61 | addOrEditStaffFn(values).then(() => {
62 | push({
63 | pathname: '/success',
64 | state: { title: `职员${id ? '修改' : '添加'}成功`, path: '/staff/list' },
65 | })
66 | })
67 | })
68 | },
69 | [],
70 | )
71 |
72 | return (
73 |
120 | )
121 | })
122 |
123 | export default StaffAdd
124 |
--------------------------------------------------------------------------------
/src/views/Staff/List/index.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | memo, useCallback, useEffect, useState,
3 | } from 'react'
4 | import { useHistory } from 'react-router-dom'
5 | import { useAsyncFn } from 'react-use'
6 | import {
7 | Button, Table, Popconfirm, message, PaginationProps, Form, Switch, Modal,
8 | } from 'antd'
9 | import staffApi from '@src/api/staff'
10 | import BasisTable from '@src/components/BasisTable'
11 | import SearchItem, { SearchParam } from '@src/components/FormItem/SearchItem'
12 | import { IStaff } from '@src/api/types/staff'
13 |
14 | const StaffList: React.FC = memo(() => {
15 | const [search, setSearch] = useState
60 |
70 |
61 |
68 | {state === FormTab.LOGIN ?
62 | {state.title}
63 |
64 |
65 | {state.toggleText}
66 |
67 |
107 |
118 |
119 | loading={staffList.loading}
120 | data={staffList.value?.data.data}
121 | total={staffList.value?.data.total}
122 | rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
123 | onChange={onPageChange}
124 | footer={() => }>
125 |
126 | title='职员名称'
127 | dataIndex='full_name' />
128 |
129 | title='部门名称'
130 | dataIndex='jobName' />
131 |
132 | title='禁启用'
133 | dataIndex='status'
134 | align='center'
135 | width={100}
136 | render={(text, record) => (
137 | onHandleChangeStatus(record.staff_id, checked)} />
142 | )} />
143 |
144 | title='操作'
145 | align='center'
146 | width={200}
147 | render={(text, record) => (
148 |
165 | )
166 | })
167 |
168 | export default StaffList
169 |
--------------------------------------------------------------------------------
/src/views/Success/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react'
2 | import { useHistory, useLocation } from 'react-router-dom'
3 | import { Button, Result } from 'antd'
4 |
5 | const SuccessPage: React.FC = memo(() => {
6 | const { state } = useLocation<{title: string, path: string}>()
7 | const { push, goBack } = useHistory()
8 | return (
9 |
149 |
154 | onDeleteModal(record.staff_id)}
157 | okText='确认'
158 | cancelText='取消'>
159 |
160 |
161 |
162 | )} />
163 |
164 |
122 |
144 |
145 | loading={userList.loading}
146 | data={userList.value?.data.data}
147 | total={userList.value?.data.total}
148 | rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
149 | onChange={onPageChange}
150 | footer={() => }>
151 |
152 | title='用户名'
153 | dataIndex='username' />
154 |
155 | title='真实姓名'
156 | dataIndex='truename' />
157 |
158 | title='手机号'
159 | dataIndex='phone' />
160 |
161 | title='禁启用'
162 | dataIndex='status'
163 | align='center'
164 | width={100}
165 | render={(text, record) => (
166 | onHandleChangeStatus(record.id, checked)} />
171 | )} />
172 |
173 | title='操作'
174 | align='center'
175 | width={200}
176 | render={(text, record) => (
177 | { closeAddModal() }}
198 | onConfirm={() => { closeAddModal() }} />
199 |
200 | )
201 | })
202 |
203 | export default UserList
204 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "lib": [
5 | "DOM",
6 | "DOM.Iterable",
7 | "ESNext"
8 | ],
9 | "paths": {
10 | "@src/*": [
11 | "./src/*"
12 | ]
13 | },
14 | "types": [
15 | "vite/client",
16 | "node",
17 | ],
18 | "allowJs": false,
19 | "skipLibCheck": false,
20 | "esModuleInterop": false,
21 | "allowSyntheticDefaultImports": true,
22 | "strict": true,
23 | "forceConsistentCasingInFileNames": true,
24 | "module": "ESNext",
25 | "moduleResolution": "Node",
26 | "resolveJsonModule": true,
27 | "isolatedModules": true,
28 | "noEmit": true,
29 | "jsx": "react",
30 | "suppressImplicitAnyIndexErrors": true,
31 | },
32 | "include": [
33 | "./src",
34 | ]
35 | }
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import reactRefresh from '@vitejs/plugin-react-refresh'
3 | import styleImport from 'vite-plugin-style-import'
4 | import path from 'path'
5 | import fs from 'fs'
6 | import lessToJS from 'less-vars-to-js'
7 |
8 | const themeVariables = lessToJS(
9 | fs.readFileSync(path.resolve(__dirname, './src/styles/variables.less'), 'utf8'),
10 | )
11 |
12 | // 获取环境变量
13 | /* const env = process.argv[process.argv.length - 1] */
14 |
15 | export default defineConfig({
16 | base: '/reactAdmin/',
17 | resolve: {
18 | // 路径别名
19 | alias: [
20 | { find: /^@src/, replacement: path.resolve(__dirname, 'src') },
21 | ],
22 | },
23 | /* 跨域转发 */
24 | server: {
25 | open: true,
26 | proxy: {
27 | '/api': {
28 | target: 'http://www.web-jshtml.cn/api/react',
29 | changeOrigin: true,
30 | rewrite: (path) => path.replace(/^\/api/, ''),
31 | },
32 | },
33 | },
34 | plugins: [
35 | reactRefresh(),
36 | styleImport({
37 | libs: [
38 | {
39 | libraryName: 'antd',
40 | esModule: true,
41 | resolveStyle: (name) => `antd/es/${name}/style/index`,
42 | },
43 | ],
44 | }),
45 | ],
46 | css: {
47 | preprocessorOptions: {
48 | less: {
49 | // 支持内联 JavaScript
50 | javascriptEnabled: true,
51 | // 配置变量，重写样式
52 | modifyVars: {
53 | ...themeVariables,
54 | },
55 | },
56 | },
57 | },
58 | })
59 |
--------------------------------------------------------------------------------
178 |
183 | onDeleteModal(record.id)}
186 | okText='确认'
187 | cancelText='取消'>
188 |
189 |
190 |
191 | )} />
192 |
193 | {/* 添加框 */}
194 |