+
+ );
+};
+
+export const SearchBottonsCardPlugin: React.FC
+ {props.children}
+
+
+
+
+
+ {searchBarText}
+ {searchBarText == '展开' ? {props.children}
;
+};
diff --git a/src/global.less b/src/global.less
index a9a0c51..a3db108 100644
--- a/src/global.less
+++ b/src/global.less
@@ -7,6 +7,7 @@ body,
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
+ scroll-behavior: smooth;
}
.colorWeak {
@@ -16,6 +17,16 @@ body,
.ant-layout {
min-height: 100vh;
}
+
+.ant-pro-page-container {
+ min-height: calc(100vh - 55px - 60px);
+}
+
+.ant-pro-global-footer {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
left: unset;
}
@@ -35,19 +46,47 @@ ol {
list-style: none;
}
+.ant-pro-page-container-children-content,
+.ant-page-header {
+ padding-left: 24px !important;
+ padding-right: 24px !important;
+}
+
+input {
+ background-clip: text;
+ -webkit-text-fill-color: #000; // 改变了字体颜色
+}
+
+// 部门 树 css
+.department-tree .ant-tree-node-content-wrapper {
+ display: flex;
+ flex-shrink: 0 !important;
+ min-width: 0;
+ flex: 1 !important;
+
+ >.ant-tree-title {
+ display: flex;
+ width: 100%;
+ flex: 1 !important;
+ }
+}
+
@media (max-width: 768px) {
.ant-table {
width: 100%;
overflow-x: auto;
- &-thead > tr,
- &-tbody > tr {
- > th,
- > td {
+
+ &-thead>tr,
+ &-tbody>tr {
+
+ >th,
+ >td {
white-space: pre;
- > span {
+
+ >span {
display: block;
}
}
}
}
-}
+}
\ No newline at end of file
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 7691489..60c9690 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -11,7 +11,7 @@ export default {
'layout.user.link.help': '帮助',
'layout.user.link.privacy': '隐私',
'layout.user.link.terms': '条款',
- 'app.copyright.produced': '蚂蚁集团体验技术部出品',
+ 'app.copyright.produced': '2021 - 2028 福州晨丰科技有限公司',
'app.preview.down.block': '下载此页面到本地项目',
'app.welcome.link.fetch-blocks': '获取全部区块',
'app.welcome.link.block-list': '基于 block 开发，快速构建标准页面',
diff --git a/src/locales/zh-CN/pages.ts b/src/locales/zh-CN/pages.ts
index 7fa751f..7783c22 100644
--- a/src/locales/zh-CN/pages.ts
+++ b/src/locales/zh-CN/pages.ts
@@ -1,12 +1,12 @@
export default {
'pages.layouts.userLayout.title': 'Ant Design 是西湖区最具影响力的 Web 设计规范',
'pages.login.accountLogin.tab': '账户密码登录',
- 'pages.login.accountLogin.errorMessage': '错误的用户名和密码(admin/ant.design)',
+ 'pages.login.accountLogin.errorMessage': '错误的用户名和密码',
'pages.login.failure': '登录失败，请重试！',
'pages.login.success': '登录成功！',
- 'pages.login.username.placeholder': '用户名: admin or user',
+ 'pages.login.username.placeholder': '请输入用户名',
'pages.login.username.required': '用户名是必填项！',
- 'pages.login.password.placeholder': '密码: ant.design',
+ 'pages.login.password.placeholder': '请输入密码',
'pages.login.password.required': '密码是必填项！',
'pages.login.phoneLogin.tab': '手机号登录',
'pages.login.phoneLogin.errorMessage': '验证码错误',
diff --git a/src/models/demo.ts b/src/models/demo.ts
new file mode 100644
index 0000000..6685c81
--- /dev/null
+++ b/src/models/demo.ts
@@ -0,0 +1,8 @@
+import { useCallback, useState } from 'react';
+
+export default () => {
+ const [counter, setCounter] = useState(0);
+ const increment = useCallback(() => setCounter((c) => c + 1), []);
+ const decrement = useCallback(() => setCounter((c) => c - 1), []);
+ return { counter, increment, decrement };
+};
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 0263687..df82c46 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -6,10 +6,10 @@ const NoFoundPage: React.FC = () => (
+
+ );
+};
+
+interface IChatTimeProps {
+ msgtime: number;
+}
+
+export const ChatTime: React.FC
+
+
+ 
+
+
+
+
+ name
+
+ 通过 message.useMessage 创建支持读取 context 的
+ contextHolder。请注意，我们推荐通过顶层注册的方式代替 message
+ 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。
+ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+
+
+
+
+
+ name
+
+ 通过 message.useMessage 创建支持读取 context 的
+ contextHolder。请注意，我们推荐通过顶层注册的方式代替 message
+ 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。
+ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+
+
+
+
+
+
+
+ );
+};
+
+export const ChatRevoke: React.FC = () => {
+ return (
+
+ {formatTime()}
+
+
+
+ "xxxxx" 撤回了一条消息
+
+
+ );
+};
+
+export const ChatAgreeOrNot: React.FC = () => {
+ return (
+
+
+ 对方[不]同意存档会话内容，你将无法继续提供服务
+
+
+ );
+};
+
+// 语音
+export const ChatVoice = () => {
+ return (
+
+
+ );
+};
+// 视频
+export const ChatVideo = () => {
+ return (
+
+
+ name
+
+ 2"
+
+
+
+
+
+
+
+
+ );
+};
+
+// 名片
+export const ChatCard = () => {
+ return (
+
+
+ name
+
+
+
+
+
+
+
+
+ );
+};
+
+// 表情
+export const ChatEmotion = () => {
+ return (
+
+
+ name
+
+
+
+
+
+
+
+
+ 腾讯
+ corpname
+ corpname2
+ 个人名片
+
+
+
+
+
+
+ );
+};
+// 文件
+export const ChatFile = () => {
+ return (
+
+
+ name
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/ChatLogs/index.module.scss b/src/pages/ChatLogs/index.module.scss
new file mode 100644
index 0000000..08c8688
--- /dev/null
+++ b/src/pages/ChatLogs/index.module.scss
@@ -0,0 +1,109 @@
+.chatLeft {
+ display: flex;
+
+ .chatContentBox {
+ display: inline-flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ max-width: 60%;
+ margin-left: 16px;
+ }
+}
+
+.chatAvatar {
+
+ flex-shrink: 0;
+ width: 34px;
+ height: 34px;
+
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: cover;
+ background-color: #fff;
+ border-radius: 2px;
+ }
+}
+
+.name {
+ margin-bottom: 8px;
+ color: #999;
+}
+
+.content {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ padding: 12px;
+ word-break: break-all;
+ background-color: #fff;
+ border-radius: 4px;
+
+ &::before {
+ position: absolute;
+ top: 12px;
+ left: -6px;
+ width: 12px;
+ height: 12px;
+ background-color: #fff;
+ transform: rotate(45deg);
+ content: '';
+ }
+
+ &:hover,
+ &:hover::before {
+ background-color: #ebebeb;
+ }
+}
+
+.chatRight {
+ display: flex;
+ justify-content: end;
+
+ .name {
+ text-align: right;
+ }
+
+ .chatContentBox {
+ display: inline-flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ justify-content: end;
+ max-width: 60%;
+ margin-right: 16px;
+ }
+
+ .content {
+ background-color: #95ec69;
+
+ &::before {
+ right: -6px;
+ left: initial;
+ background-color: #95ec69;
+ }
+
+ &:hover,
+ &:hover::before {
+ background-color: #89d961;
+ }
+ }
+}
+
+.video {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 176px;
+ height: 144px;
+ background-color: #333;
+ border-radius: 4px;
+ cursor: pointer;
+
+ .videoTime {
+ position: absolute;
+ right: 8px;
+ bottom: 8px;
+ color: #fff;
+ }
+}
diff --git a/src/pages/ChatLogs/index.tsx b/src/pages/ChatLogs/index.tsx
new file mode 100644
index 0000000..5420bbd
--- /dev/null
+++ b/src/pages/ChatLogs/index.tsx
@@ -0,0 +1,161 @@
+import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin';
+import { PageContainer } from '@ant-design/pro-components';
+import { Button, Col, Form, Input, Pagination, Row, Select, Table } from 'antd';
+import React, { useState } from 'react';
+import { ChatBar, ChatTime } from './ChatBar';
+
+interface DataType {
+ key: React.Key;
+ firstName: string;
+ lastName: string;
+ age: number;
+ address: string;
+ tags: string[];
+}
+
+const ChatLogs: React.FC = () => {
+ const [param, setParam] = useState({
+ curr_page: 1,
+ page_count: 20,
+ });
+
+ const data: DataType[] = [
+ {
+ key: '1',
+ firstName: 'John',
+ lastName: 'Brown',
+ age: 32,
+ address: 'New York No. 1 Lake Park',
+ tags: ['nice', 'developer'],
+ },
+ {
+ key: '2',
+ firstName: 'Jim',
+ lastName: 'Green',
+ age: 42,
+ address: 'London No. 1 Lake Park',
+ tags: ['loser'],
+ },
+ {
+ key: '3',
+ firstName: 'Joe',
+ lastName: 'Black',
+ age: 32,
+ address: 'Sydney No. 1 Lake Park',
+ tags: ['cool', 'teacher'],
+ },
+ ];
+
+ // const { notification } = App.useApp();
+
+ return (
+
+
+ name
+
+
+
+
+
+
+
+
+
+ setOpen(false)}
+ centered
+ onOk={() => {}}
+ >
+
+
+
+
+ {
+ console.log(selectedKeys);
+ if (selectedKeys.length) {
+ setDepartmentsID(Number(selectedKeys[0]));
+ }
+ }}
+ titleRender={(nodeData: any) => {
+ // console.log(nodeData);
+ return (
+
+
+
+
+ );
+ }}
+ >
+ {nodeData.name}
+
+
+ {
+ e.stopPropagation();
+ setOpen(true);
+ }}
+ className={styles.edit}
+ />
+ {
+ setPopOpen(-1);
+ e?.stopPropagation();
+ }}
+ onConfirm={(e) => {
+ e?.stopPropagation();
+ console.log(nodeData.id);
+ }}
+ >
+ {
+ e.stopPropagation();
+ setPopOpen(nodeData.id);
+ }}
+ className={styles.del}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ param.page_count = size;
+ setParam({ ...param });
+ }}
+ showTotal={(total, range) => {
+ return 共{total}条;
+ }}
+ onChange={(page, pageSize) => {
+ param.curr_page = page;
+ setParam({ ...param });
+ }}
+ />
+
+
+
+
+ {counter}
+
+ {/*
+
);
};
diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx
index d0c49f7..aced863 100644
--- a/src/pages/Welcome.tsx
+++ b/src/pages/Welcome.tsx
@@ -86,8 +86,12 @@ const InfoCard: React.FC<{
const Welcome: React.FC = () => {
const { token } = theme.useToken();
const { initialState } = useModel('@@initialState');
+
+ const count = useModel('demo');
+
return (