pqc
/
new-demo
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

基本的页面框架新建

This commit is contained in:
pqcqaq 2024-10-13 00:48:39 +08:00
parent b4c10ed21d
commit 399f63b9d5
27 changed files with 282 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,2 @@
{
}

11
src/components/frontend/home/FrontendHeader.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const FrontendHeader = () => {
return (
<div>
<h1>前台显示一堆的书签</h1>
</div>
);
};
export default FrontendHeader;

1
src/configuration/attrUpdateMatrix.ts
View File

@ -1,7 +1,6 @@
import { AttrUpdateMatrix } from 'oak-domain/lib/types/EntityDesc';
import { EntityDict } from '@project/oak-app-domain';
const attrUpdateMatrix: AttrUpdateMatrix<EntityDict> = {
}

41
src/data/i18n.ts
View File

@ -80,6 +80,7 @@ const i18ns: I18n[] = [
module: "new-demo",
position: "locales/common",
data: {
"name": "示例项目",
"ptrActivate": "松开刷新",
"ptrDeactivate": "下拉刷新",
"ptrRelease": "正在刷新...",
@ -1710,23 +1711,15 @@ const i18ns: I18n[] = [
}
},
{
id: "a136b97a2d1a0df852429a1571ea2805",
namespace: "new-demo-w-app-components-footer",
id: "f56ed5ee4162a746b58cb7b480624239",
namespace: "new-demo-w-app-components-frontendHeader",
language: "zh-CN",
module: "new-demo",
position: "web/src/app/components/footer",
position: "web/src/app/components/frontendHeader",
data: {
"copyright": "Oak Team & INSTITUTE OF COMPUTING INNOVATION, ZHEJIANG UNIVERSITY"
}
},
{
id: "db9ce83e39820857ac8da6103b3ea554",
namespace: "new-demo-w-app-components-header",
language: "zh-CN",
module: "new-demo",
position: "web/src/app/components/header",
data: {
"name": "Oak模板项目",
"welcome": "欢迎您：",
"console": "控制台",
"logout": "退出",
"close": "关闭"
}
},
@ -1770,23 +1763,15 @@ const i18ns: I18n[] = [
}
},
{
id: "6826285cb20b97c82fad625ecc649a26",
namespace: "new-demo-wmp-app-components-footer",
id: "7b3a1c677ba8182dd03dc7fe28dedbeb",
namespace: "new-demo-wmp-app-components-frontendHeader",
language: "zh-CN",
module: "new-demo",
position: "wechatMp/src/app/components/footer",
position: "wechatMp/src/app/components/frontendHeader",
data: {
"copyright": "Oak Team & INSTITUTE OF COMPUTING INNOVATION, ZHEJIANG UNIVERSITY"
}
},
{
id: "c15aa691483da3f6a13e9cd8473f8d11",
namespace: "new-demo-wmp-app-components-header",
language: "zh-CN",
module: "new-demo",
position: "wechatMp/src/app/components/header",
data: {
"name": "Oak模板项目",
"welcome": "欢迎您：",
"console": "控制台",
"logout": "退出",
"close": "关闭"
}
},

1
src/locales/common/zh_CN.json
View File

@ -1,4 +1,5 @@
{
"name": "示例项目",
"ptrActivate": "松开刷新",
"ptrDeactivate": "下拉刷新",
"ptrRelease": "正在刷新...",

3
src/pages/frontend/home/index.ts Normal file
View File

@ -0,0 +1,3 @@
export default OakComponent({
})

26
src/pages/frontend/home/styles.module.less Normal file
View File

@ -0,0 +1,26 @@
.body {
padding-top: 60px;
background-color: #f0f2f5;
min-height: 100vh;
.header {
background-color: #fff;
padding: 0 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
z-index: 1;
}
.content {
padding: 20px;
background-color: #fff;
margin-top: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.footer {
background-color: #fff;
margin-top: 20px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
}

22
src/pages/frontend/home/web.pc.tsx Normal file
View File

@ -0,0 +1,22 @@
import FrontendHeader from '@project/components/frontend/home/FrontendHeader';
import React from 'react';
import Styles from "./styles.module.less"
const Home = () => {
return (
// 布局
<div className={Styles.body}>
<div className={Styles.header}>
<FrontendHeader />
</div>
<div className={Styles.content}>
<h1>Home</h1>
</div>
<div className={Styles.footer}>
<h1>Footer</h1>
</div>
</div>
);
};
export default Home;

2
src/pages/frontend/login/index.ts Normal file
View File

@ -0,0 +1,2 @@
export default OakComponent({
})

3
src/pages/frontend/login/locales/zh_CN.json Normal file
View File

@ -0,0 +1,3 @@
{
"userLogin": "用户登录"
}

15
src/pages/frontend/login/styles.module.less Normal file
View File

@ -0,0 +1,15 @@
.body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
.title {
font-size: 24px;
font-weight: 500;
}
}

19
src/pages/frontend/login/web.pc.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import Login from 'oak-general-business/es/components/user/login';
import Styles from './styles.module.less';
import useFeatures from '@project/hooks/useFeatures';
const UserLogin = () => {
const features = useFeatures();
return (
<div className={Styles.body}>
<div className={Styles.title}>
{features.locales.t('userLogin')}
</div>
<Login url='/home'/>
</div>
);
};
export default UserLogin;

63
web/public/index.html
View File

@ -24,68 +24,7 @@
type="text/javascript"
src="//g.alicdn.com/de/prismplayer/2.11.0/aliplayer-h5-min.js"
></script>
<script src="//cdn.staticfile.net/react/18.2.0/umd/react.production.min.js"></script>
<script>
window.React || document.write('<script src="//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"><\/script>')
</script>
<script>
window.React || document.write('<script src="//cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.production.min.js"><\/script>')
</script>
<script>
window.React || document.write('<script src="//unpkg.com/react@18.2.0/umd/react.production.min.js"><\/script>')
</script>
<script src="//cdn.staticfile.net/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script>
window.ReactDOM || document.write('<script src="//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"><\/script>')
</script>
<script>
window.ReactDOM || document.write('<script src="//cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"><\/script>')
</script>
<script>
window.ReactDOM || document.write('<script src="//unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"><\/script>')
</script>
<script src="//cdn.staticfile.net/echarts/5.4.3/echarts.min.js"></script>
<script>
window.echarts || document.write('<script src="//lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0/echarts.min.js"><\/script>')
</script>
<script>
window.echarts || document.write('<script src="//unpkg.com/echarts@5.4.0/dist/echarts.min.js"><\/script>')
</script>
<script src="//cdn.staticfile.net/lodash.js/4.17.21/lodash.min.js"></script>
<script>
window._ || document.write('<script src="//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.min.js"><\/script>')
</script>
<script>
window._ || document.write('<script src="//cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"><\/script>')
</script>
<script>
window._ || document.write('<script src="//unpkg.com/lodash@4.17.21/lodash.js"><\/script>')
</script>
<!-- <link href="//unpkg.com/@wangeditor/editor@5.1.22/dist/css/style.css" rel="stylesheet">
<script src="//unpkg.com/@wangeditor/editor@5.1.22/dist/index.js"></script> -->
<link href="//cdn.staticfile.net/wangeditor5/5.1.22/css/style.min.css" rel="stylesheet" />
<script src="//cdn.staticfile.net/wangeditor5/5.1.22/index.js"></script>
<script>
window.wangEditor || document.write('<script src="//cdn.bootcdn.net/ajax/libs/wangeditor5/5.1.22/index.min.js"><\/script>')
</script>
<script>
window.wangEditor || document.write('<script src="//unpkg.com/@wangeditor/editor@5.1.22/dist/index.js"><\/script>')
</script>
<script src="//unpkg.com/@fingerprintjs/fingerprintjs@3.3.6/dist/fp.min.js"></script>
<script>
window.FingerprintJS || document.write('<script src="//cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3.3.6/dist/fp.min.js"><\/script>')
</script>
<script>
window.FingerprintJS || document.write('<script src="//unpkg.com/@fingerprintjs/fingerprintjs@3.3.6/dist/fp.min.js"><\/script>')
</script>
<script src="//unpkg.com/bn.js@5.2.1/lib/bn.js"></script>
<script>
window.BN || document.write('<script src="//cdn.jsdelivr.net/npm/bn.js@5.2.1/lib/bn.min.js"><\/script>')
</script>
<script>
window.BN || document.write('<script src="//unpkg.com/bn.js@5.2.1/lib/bn.js"><\/script>')
</script>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.

16
web/src/app/components/footer/index.module.less
View File

@ -1,16 +0,0 @@
.footer {
background: unset !important;
}
.panel {
display: flex;
flex-direction: column;
align-items: center;
/** 文本1 */
font-size: 12px;
font-weight: 400;
letter-spacing: 0px;
line-height: 16.8px;
color: rgba(165, 192, 203, 1);
}

19
web/src/app/components/footer/index.tsx
View File

@ -1,19 +0,0 @@
import React from 'react';
import { Layout } from 'antd';
import Style from './index.module.less';
const { Footer } = Layout;
export default function Render() {
return (
<Footer className={Style.footer}>
<div className={Style.panel}>
<span>
Copyright © {new Date().getFullYear()}{' '}
浙江大学计算机创新技术研究院
</span>
</div>
</Footer>
);
}

3
web/src/app/components/footer/locales/zh-CN.json
View File

@ -1,3 +0,0 @@
{
"copyright": "Oak Team & INSTITUTE OF COMPUTING INNOVATION, ZHEJIANG UNIVERSITY"
}

84
web/src/app/components/frontendHeader/index.tsx Normal file
View File

@ -0,0 +1,84 @@
import React, { useEffect, useState } from 'react';
import Styles from './web.pc.module.less';
import { Button, Space, Modal } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import useFeatures from '@project/hooks/useFeatures';
import ConsoleAvatar from '../consoleAvatar';
export default function render() {
const features = useFeatures();
const [user, setUser] =
useState<ReturnType<typeof features.token.getUserInfo>>();
useEffect(() => {
const user = features.token.getUserInfo();
setUser(user);
return features.token.subscribe(() => {
const user = features.token.getUserInfo();
setUser(user);
});
}, []);
return (
<div className={Styles.header}>
<div
className={Styles.logo}
onClick={() => {
features.navigator.namespace = '';
features.navigator.navigateTo({
url: '/home',
});
}}
>
<img src='/logo512.png' className={Styles.img} />
<div className={Styles.name}>
{features.locales.t('common::name')}
</div>
</div>
<div
style={{
padding: 18,
fontSize: 22,
}}
>
{/* <div className={Styles.title}>
{features.locales.t('welcome')} {user?.name || user?.nickname}
</div> */}
</div>
<div style={{ flex: 1 }} />
<div className={Styles.right}>
{user ? (
<>
<Button
type='primary'
onClick={() => {
features.navigator.navigateTo({
url: '/console',
});
}}
style={{
marginRight: 8,
}}
>
<Space>
{features.locales.t('console')}
<RightOutlined />
</Space>
</Button>
<ConsoleAvatar />{' '}
</>
) : (
<Button
onClick={() => {
features.navigator.navigateTo({
url: '/login',
});
}}
>
{features.locales.t('login')}
</Button>
)}
</div>
</div>
);
}

7
web/src/app/components/frontendHeader/locales/zh-CN.json Normal file
View File

@ -0,0 +1,7 @@
{
"welcome": "欢迎您：",
"console": "控制台",
"logout": "退出",
"close": "关闭",
"login": "登录"
}

58
web/src/app/components/frontendHeader/web.pc.module.less Normal file
View File

@ -0,0 +1,58 @@
.header {
height: 60px;
// background-color: #6661f5;
// 背景透明，模糊
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
display: flex;
flex-direction: row;
align-items: center;
// header固定在最上方
position: fixed;
top: 0;
left: 0;
right: 0;
.logo {
width: 160px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
// 背景样式
margin-left: 10px;
transition: all 0.3s ease;
.img {
height: 42px;
width: 42px;
}
.name {
font-size: 22px;
font-weight: 500;
// color: rgb(255, 255, 255);
margin-left: 15px;
font-family: fantasy;
}
&:hover {
color: #6661f5;
// 圆角+阴影
border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
}
.title {
font-size: 16px;
font-weight: 500;
// color: white;
margin-left: 24px;
}
.right {
margin-right: 16px;
}
}

16
web/src/app/components/header/index.ts
View File

@ -1,16 +0,0 @@
export default OakComponent({
isList: false,
formData({ features }) {
return {
loggedIn: '',
avatar: '',
modeTitle: '控制台',
};
},
features: ['console'],
methods: {
logout() {
// this.features.xxxx.logout();
}
},
})

1
web/src/app/components/header/locales/zh_CN.json
View File

@ -1 +0,0 @@
{"name":"Oak模板项目", "close": "关闭"}

18
web/src/app/components/header/web.pc.module.less
View File

@ -1,18 +0,0 @@
.header {
height: 64px;
padding: 4px;
width: 100%;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
.home {
font-size: 22px;
font-weight: bold;
}
.right{
margin-right: 16px;
}
}

58
web/src/app/components/header/web.pc.tsx
View File

@ -1,58 +0,0 @@
import React, { useState } from 'react';
import { EntityDict } from '@project/oak-app-domain';
import { WebComponentProps } from 'oak-frontend-base';
import { useLocation } from 'react-router-dom';
import { Row, Modal, Button } from 'antd';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import Styles from './web.pc.module.less';
export default function Render(props: WebComponentProps<
EntityDict,
'user',
false,
{
loggedIn: boolean;
avatar?: string;
modeTitle?: string;
}
>) {
const { modeTitle, avatar } = props.data;
const { t, navigateTo } = props.methods;
const location = useLocation();
const [open, setOpen] = useState(false);
return (
<Row className={Styles.header}>
<Button
type="text"
size="large"
onClick={() => {
navigateTo(
{
url: '/',
},
undefined,
true
);
}}
>
<div className={Styles.home}>
{t('name')}
</div>
</Button>
<div className={Styles.right}>
<Button
icon={<DownOutlined />}
onClick={() => {
setOpen(true);
}}
style={{
marginRight: 8,
}}
>
{modeTitle || t('modeUnset')}
</Button>
</div>
</Row>
);
}

5
web/src/app/components/header/web.tsx
View File

@ -1,5 +0,0 @@
import React from 'react';
export default function Render() {
return null;
}

2
web/src/app/namespaces/frontend/index.json
View File

@ -1,4 +1,4 @@
{
"path": "/",
"first": "/"
"first": "/home"
}

15
web/src/app/namespaces/frontend/index.tsx
View File

@ -1,10 +1,17 @@
import React from 'react';
import { useNavigate, useParams, useSearchParams, useLocation } from 'react-router-dom';
import { Outlet, Route } from 'react-router-dom';
import FrontendHeader from '../../components/frontendHeader';
import Styles from './styles.module.less'
function Frontend() {
return <Outlet />;
return (
<div>
<FrontendHeader />
<div className={Styles.body}>
<Outlet />
</div>
</div>
);
}
export default Frontend;
export default Frontend;

3
web/src/app/namespaces/frontend/styles.module.less Normal file
View File

@ -0,0 +1,3 @@
.body {
background-color: #f0f2f5;
}