Commit 81cc6cce authored by littleforest's avatar littleforest

feat: remove userInfo

parent db645324
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
* @see https://umijs.org/zh-CN/plugins/plugin-access * @see https://umijs.org/zh-CN/plugins/plugin-access
* */ * */
export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) { export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
console.log(initialState)
const { currentUser } = initialState ?? {}; const { currentUser } = initialState ?? {};
return { return {
canAdmin: currentUser && currentUser.access === 'admin', canAdmin: currentUser && currentUser.access === 'admin',
......
import Footer from '@/components/Footer'; import Footer from '@/components/Footer';
import RightContent from '@/components/RightContent'; import RightContent from '@/components/RightContent';
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
import { PageLoading, SettingDrawer } from '@ant-design/pro-components'; import { PageLoading, SettingDrawer } from '@ant-design/pro-components';
import type { RunTimeLayoutConfig } from 'umi'; import { isEmpty } from 'lodash';
import { history } from 'umi'; import { history } from 'umi';
import defaultSettings from '../config/defaultSettings';
import { currentUser as queryCurrentUser } from './services/ant-design-pro/api';
const loginPath = '/chat'; const loginPath = '/chat';
/** 获取用户信息比较慢的时候会展示一个 loading */ /** 获取用户信息比较慢的时候会展示一个 loading */
...@@ -18,52 +13,24 @@ export const initialStateConfig = { ...@@ -18,52 +13,24 @@ export const initialStateConfig = {
/** /**
* @see https://umijs.org/zh-CN/plugins/plugin-initial-state * @see https://umijs.org/zh-CN/plugins/plugin-initial-state
* */ * */
export async function getInitialState(): Promise<{ export async function getInitialState() {
settings?: Partial<LayoutSettings>; const userMessage = JSON.parse(localStorage.getItem('user'));
currentUser?: API.CurrentUser;
loading?: boolean; if (isEmpty(userMessage)) {
fetchUserInfo?: () => Promise<API.CurrentUser | undefined>; history.push(loginPath);
}> { return {};
const fetchUserInfo = async () => {
try {
const msg = await queryCurrentUser();
return msg.data;
} catch (error) {
history.push(loginPath);
}
return undefined;
};
// 如果不是登录页面,执行
if (history.location.pathname !== loginPath) {
const currentUser = await fetchUserInfo();
return {
fetchUserInfo,
currentUser,
settings: defaultSettings,
};
} }
return {
fetchUserInfo, return { userMessage };
settings: defaultSettings,
};
} }
// ProLayout 支持的api https://procomponents.ant.design/components/layout // ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => { export const layout = ({ initialState, setInitialState }) => {
return { return {
rightContentRender: () => <RightContent />, rightContentRender: () => <RightContent />,
disableContentMargin: false, disableContentMargin: false,
waterMarkProps: {
content: initialState?.currentUser?.name,
},
footerRender: () => <Footer />, footerRender: () => <Footer />,
onPageChange: () => {
const { location } = history;
// 如果没有登录,重定向到 login
if (!initialState?.currentUser && location.pathname !== loginPath) {
history.push(loginPath);
}
},
menuHeaderRender: undefined, menuHeaderRender: undefined,
// 自定义 403 页面 // 自定义 403 页面
// unAccessible: <div>unAccessible</div>, // unAccessible: <div>unAccessible</div>,
......
@import (reference) '~antd/es/style/themes/index';
.headerSearch {
display: inline-flex;
align-items: center;
.input {
width: 0;
min-width: 0;
overflow: hidden;
background: transparent;
border-radius: 0;
transition: width 0.3s, margin-left 0.3s;
:global(.ant-select-selection) {
background: transparent;
}
input {
box-shadow: none !important;
}
&.show {
width: 210px;
margin-left: 8px;
}
}
}
import { SearchOutlined } from '@ant-design/icons';
import type { InputRef } from 'antd';
import { AutoComplete, Input } from 'antd';
import type { AutoCompleteProps } from 'antd/es/auto-complete';
import classNames from 'classnames';
import useMergedState from 'rc-util/es/hooks/useMergedState';
import React, { useRef } from 'react';
import styles from './index.less';
export type HeaderSearchProps = {
onSearch?: (value?: string) => void;
onChange?: (value?: string) => void;
onVisibleChange?: (b: boolean) => void;
className?: string;
placeholder?: string;
options: AutoCompleteProps['options'];
defaultVisible?: boolean;
visible?: boolean;
defaultValue?: string;
value?: string;
};
const HeaderSearch: React.FC<HeaderSearchProps> = (props) => {
const {
className,
defaultValue,
onVisibleChange,
placeholder,
visible,
defaultVisible,
...restProps
} = props;
const inputRef = useRef<InputRef | null>(null);
const [value, setValue] = useMergedState<string | undefined>(defaultValue, {
value: props.value,
onChange: props.onChange,
});
const [searchMode, setSearchMode] = useMergedState(defaultVisible ?? false, {
value: props.visible,
onChange: onVisibleChange,
});
const inputClass = classNames(styles.input, {
[styles.show]: searchMode,
});
return (
<div
className={classNames(className, styles.headerSearch)}
onClick={() => {
setSearchMode(true);
if (searchMode && inputRef.current) {
inputRef.current.focus();
}
}}
onTransitionEnd={({ propertyName }) => {
if (propertyName === 'width' && !searchMode) {
if (onVisibleChange) {
onVisibleChange(searchMode);
}
}
}}
>
<SearchOutlined
key="Icon"
style={{
cursor: 'pointer',
}}
/>
<AutoComplete
key="AutoComplete"
className={inputClass}
value={value}
options={restProps.options}
onChange={(completeValue) => setValue(completeValue)}
>
<Input
size="small"
ref={inputRef}
defaultValue={defaultValue}
aria-label={placeholder}
placeholder={placeholder}
onKeyDown={(e) => {
if (e.key === 'Enter') {
if (restProps.onSearch) {
restProps.onSearch(value);
}
}
}}
onBlur={() => {
setSearchMode(false);
}}
/>
</AutoComplete>
</div>
);
};
export default HeaderSearch;
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Space } from 'antd'; import { Space } from 'antd';
import React from 'react'; import React from 'react';
import { SelectLang, useModel } from 'umi'; import { SelectLang, useModel } from 'umi';
import HeaderSearch from '../HeaderSearch';
import Avatar from './AvatarDropdown'; import Avatar from './AvatarDropdown';
import styles from './index.less'; import styles from './index.less';
...@@ -23,37 +21,6 @@ const GlobalHeaderRight: React.FC = () => { ...@@ -23,37 +21,6 @@ const GlobalHeaderRight: React.FC = () => {
} }
return ( return (
<Space className={className}> <Space className={className}>
<HeaderSearch
className={`${styles.action} ${styles.search}`}
placeholder="站内搜索"
defaultValue="umi ui"
options={[
{ label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>, value: 'umi ui' },
{
label: <a href="next.ant.design">Ant Design</a>,
value: 'Ant Design',
},
{
label: <a href="https://protable.ant.design/">Pro Table</a>,
value: 'Pro Table',
},
{
label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
value: 'Pro Layout',
},
]}
// onSearch={value => {
// console.log('input', value);
// }}
/>
<span
className={styles.action}
onClick={() => {
window.open('https://pro.ant.design/docs/getting-started');
}}
>
<QuestionCircleOutlined />
</span>
<Avatar /> <Avatar />
<SelectLang className={styles.action} /> <SelectLang className={styles.action} />
</Space> </Space>
......
...@@ -52,57 +52,6 @@ export default () => { ...@@ -52,57 +52,6 @@ export default () => {
}; };
``` ```
## HeaderSearch 头部搜索框
一个带补全数据的输入框,支持收起和展开 Input
```tsx
/**
* background: '#f0f2f5'
*/
import HeaderSearch from '@/components/HeaderSearch';
import React from 'react';
export default () => {
return (
<HeaderSearch
placeholder="站内搜索"
defaultValue="umi ui"
options={[
{ label: 'Ant Design Pro', value: 'Ant Design Pro' },
{
label: 'Ant Design',
value: 'Ant Design',
},
{
label: 'Pro Table',
value: 'Pro Table',
},
{
label: 'Pro Layout',
value: 'Pro Layout',
},
]}
onSearch={(value) => {
console.log('input', value);
}}
/>
);
};
```
### API
| 参数 | 说明 | 类型 | 默认值 |
| --------------- | ---------------------------------- | ---------------------------- | ------ |
| value | 输入框的值 | `string` | - |
| onChange | 值修改后触发 | `(value?: string) => void` | - |
| onSearch | 查询后触发 | `(value?: string) => void` | - |
| options | 选项菜单的的列表 | `{label,value}[]` | - |
| defaultVisible | 输入框默认是否显示,只有第一次生效 | `boolean` | - |
| visible | 输入框是否显示 | `boolean` | - |
| onVisibleChange | 输入框显示隐藏的回调函数 | `(visible: boolean) => void` | - |
## NoticeIcon 通知工具 ## NoticeIcon 通知工具
通知工具提供一个展示多种通知信息的界面。 通知工具提供一个展示多种通知信息的界面。
......
/* eslint-disable @typescript-eslint/no-unused-expressions */ /* eslint-disable @typescript-eslint/no-unused-expressions */
import { Form, Button, Col, Row, Input, Typography } from 'antd'; import { Form, Button, Col, Row, Input, Typography, Grid } from 'antd';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import styles from './index.less'; import styles from './index.less';
import ChatFirstContent from './components/content'; import ChatFirstContent from './components/content';
import { import {
DeleteOutlined,
FieldTimeOutlined, FieldTimeOutlined,
MenuOutlined, MenuOutlined,
PlusOutlined, PlusOutlined,
...@@ -13,7 +12,7 @@ import { ...@@ -13,7 +12,7 @@ import {
WechatOutlined, WechatOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import classNames from 'classnames'; import classNames from 'classnames';
import { Grid } from 'antd'; import { history } from 'umi';
import LoginModal from '@/components/loginModal'; import LoginModal from '@/components/loginModal';
import NewSession from '@/components/newSession'; import NewSession from '@/components/newSession';
...@@ -34,7 +33,7 @@ const Chat: React.FC = () => { ...@@ -34,7 +33,7 @@ const Chat: React.FC = () => {
const tabShow = showSider; const tabShow = showSider;
const questionValue = form.getFieldValue('chatInput'); const questionValue = form.getFieldValue('chatInput');
console.log(questionValue);
useEffect(() => { useEffect(() => {
if (!isMobile) { if (!isMobile) {
setShowSider(true); setShowSider(true);
...@@ -69,15 +68,10 @@ const Chat: React.FC = () => { ...@@ -69,15 +68,10 @@ const Chat: React.FC = () => {
}; };
const siderTabsList = [ const siderTabsList = [
{
icons: <DeleteOutlined />,
text: '清空所有会话',
checked: 'clear',
},
{ {
icons: <SettingOutlined />, icons: <SettingOutlined />,
text: '预留功能', text: '后台',
checked: 'moreFunction', checked: 'gotoAdmin',
}, },
{ {
icons: <WechatOutlined />, icons: <WechatOutlined />,
...@@ -93,6 +87,9 @@ const Chat: React.FC = () => { ...@@ -93,6 +87,9 @@ const Chat: React.FC = () => {
const selectSliderTabsHandleClick = (value: string) => { const selectSliderTabsHandleClick = (value: string) => {
setSelectSiderTabs(value); setSelectSiderTabs(value);
if (value === 'gotoAdmin') {
history.push('/admin/user');
}
}; };
const renderMobileHeader = () => { const renderMobileHeader = () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment