From 41990ef08b94640a09deb4aca4c91eda89439486 Mon Sep 17 00:00:00 2001 From: vapao Date: Tue, 26 Dec 2023 00:30:05 +0800 Subject: [PATCH] update --- spug_web2/.eslintrc.cjs | 1 + spug_web2/package.json | 4 +- spug_web2/src/App.jsx | 46 ++++++++++++++++-- spug_web2/src/assets/logo-spug-white.png | Bin 3262 -> 0 bytes spug_web2/src/assets/logo-white.png | Bin 2833 -> 0 bytes .../{logo-spug-txt.png => spug-default.png} | Bin spug_web2/src/i18n.js | 12 ++++- spug_web2/src/layout/Header.jsx | 25 ++++++++-- spug_web2/src/layout/header.module.scss | 18 ------- spug_web2/src/layout/index.jsx | 43 ++++++---------- spug_web2/src/layout/index.module.scss | 46 ++++++++++++++++++ spug_web2/src/libs/index.js | 6 ++- spug_web2/src/libs/session.js | 2 + spug_web2/src/main.jsx | 25 +--------- spug_web2/src/routes.jsx | 13 ----- 15 files changed, 146 insertions(+), 95 deletions(-) delete mode 100644 spug_web2/src/assets/logo-spug-white.png delete mode 100644 spug_web2/src/assets/logo-white.png rename spug_web2/src/assets/{logo-spug-txt.png => spug-default.png} (100%) delete mode 100644 spug_web2/src/layout/header.module.scss create mode 100644 spug_web2/src/layout/index.module.scss diff --git a/spug_web2/.eslintrc.cjs b/spug_web2/.eslintrc.cjs index ced1608..e424d5e 100644 --- a/spug_web2/.eslintrc.cjs +++ b/spug_web2/.eslintrc.cjs @@ -16,6 +16,7 @@ module.exports = { 'warn', { allowConstantExport: true }, ], + 'react/prop-types': 'off', }, globals: { t: 'readonly', diff --git a/spug_web2/package.json b/spug_web2/package.json index 595852f..1a2c026 100644 --- a/spug_web2/package.json +++ b/spug_web2/package.json @@ -10,7 +10,9 @@ "preview": "vite preview" }, "dependencies": { - "antd": "^5.11.5", + "@ant-design/icons": "^5.2.6", + "antd": "^5.12.4", + "dayjs": "^1.11.10", "i18next": "^23.7.7", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/spug_web2/src/App.jsx b/spug_web2/src/App.jsx index 383583d..6c210a7 100644 --- a/spug_web2/src/App.jsx +++ b/spug_web2/src/App.jsx @@ -1,11 +1,47 @@ -import {useTranslation } from 'react-i18next' +import {createBrowserRouter, RouterProvider} from 'react-router-dom' +import {ConfigProvider, App as AntdApp, theme} from 'antd' +import zhCN from 'antd/locale/zh_CN' +import enUS from 'antd/locale/en_US' +import dayjs from 'dayjs' +import routes from './routes.jsx' +import {session, SContext} from '@/libs' +import {useImmer} from 'use-immer' +import './i18n.js' +dayjs.locale(session.lang) -function App(props) { - const {t} = useTranslation() - window.t = t +const router = createBrowserRouter(routes) - return props.children +function App() { + const [S, updateS] = useImmer({theme: session.theme}) + + return ( + + + + + + + + ) } export default App \ No newline at end of file diff --git a/spug_web2/src/assets/logo-spug-white.png b/spug_web2/src/assets/logo-spug-white.png deleted file mode 100644 index d8af69b294e115006398e48c67747b8a49e613ff..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3262 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 diff --git a/spug_web2/src/assets/logo-white.png b/spug_web2/src/assets/logo-white.png deleted file mode 100644 index 8e436564fe301e155248ca13fb51e1aa8819f627..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2833 zcmaKu`9IT-1IORYG1n}8@M%Uyl6y?KH6h7zFDuEM$w$u7q{A_HLbNq=B*jNtvE*1A zjg(`KisT5*93SV$5h~KR??3Q)J|3^v^Y_?I20gL?Z z%O=(6-x7*(cQ^q&>x0h&fF#e+&c>5Cx?Chxh{Yc0XpTuw@*`$V(dABy+Q}R|5?o|1 zq1`Eb)M=e{-Q)79>iITNZ9$tuBJ6%ohED2*N`0w${usl!0^vQhTr3b}9u9GdG>5Bey;xGyofmu4k4xCY=Q8 zTY9`S&m5AZRj_V`%Me3$9P>kTFnLvw^7@q#+whLjj0C43$(?kldEzF96XYId6GP5q zv6Da5CAcA)!lOlobS@nds0_wd3`XUpx*~^O^t`v1m2S<=B7IT;6Bh zs*Zl>$O=9qou*JNuqlrbeLN!}t<}niN$jm!Wzo3^?QgNKqrI

>Y_=e%O6wHlX|gqghF7 zD~nyT=DnZkLo;n*z1(=5i`GTG7F8)Ay+qrOLU}8_PJ&5qs!1d9Q3OQZbqK ztmngi*t*Ho!)N1wcs4Ml^BF*@6$)PQ&Q*UC-c1%U4Uz^Icc)(t9gtC{za< z60~YzKQ2*H(KDC7*2nxz&=FDxp2;psIiboENqh(?n96Hi`~J^?6amwEeJLC6Lv%Va z_mOxU{uBjFU=bxLw{p8epZ98ut%{_l^_iX0ajo$Wwm2E)AFJca>VI^wk_A)pXM+Mu zQ`jF>PwHwVEDe3F3I114*y$SmHI!2}W9rP?Ee#=o_ zphO+ohV_Fd%_ND6UtFmX7wW^VxU}@OzZA8rkod0W!t6_(vN4j%frtp{0T=hTFMcpb zb`t~*e{FrA`xd*X!!yOq&VMCr%mryPB)thCrS>|PCv`#iW6^cFWdgE1N zH7wI|L$>sDxJXr#-K|2<>EBihe+GqMGAV%oG)8Eh2~8af9yY)I5x!%?eh{8ckpzg#YMXoGAr#aEFK zyh)w^KTRRDwJWS%+|ThInpvJ=0ChllLO_g*RV4^S7+EO~fTH<(4m@@K_%Q@yMrNrR zft06yEQ~u$vMwgcqWZi)!2*rMqu>k5VET8^R-~%ux&^Kj%oiU0OvyCN@g~ zYE6c%j4aISPaY4x>fByr361OYf%h;&1t7Bo>jKu*Z8oZxwu>l9Zi$d`85#ylHeMPt0cwbF*A&5if zOX2nB!4+$YV^8m5<}|j8Zk+J4Pm5GhkQcF;c2n^~Ag`zvM_fv8IE+SZxe&5^ufJdB zeQ*XBcEl6Ho$y(TewpJrJtH>co`w$h(qZ$j_qr*;V-#NtXFZHhx#pv(Dc5Xy&O5M!%>D6(W*BYSE*NUsz zfndJApc+A1@`9a>23%&(!Fxj?{y|;E2B#*1rX6u1v;>+0glG^&Qt@i@GOQdQbb7f8 zA=P}LZjl0ngSPlPTX1S9;S>hf<4 zcHi7~6KmUNWbjM_XAH+a6zn)BBSl;S^`h}}@gBQTY`2Ymd7jZY-_Us0tY96IzD%w! zYt;BEkX=it6JWyLW^*#C$D6j4!Kasa0Yszp29-kXk^1pIiWSoPu6RiHp@dN#pJa!> zn>mD6m|D-BsnlMp>)p%Xa1L?jc*4O`3Lbsfhgr#q_bdxRrpRx~cRz_0)zo3(aHR-5 zKBZ^NURK`4$3DAl!d!HN$)>Q(4;`CaVZ)QG^)t7>UZt1{z&=PuMs}5A)9#b3#^ZaB zOU*y_ZU1Q9ai9v%5WJGx;(_olE_OPE?Tuh{ZoveDeclmfkcE#@K@*^M6Q_yN?Q5M3LPG z-f1&G2;;H3i7gNy=1rl64#`DcmdpBXs|;MC!xjS>$w5o0SY;sc#fbmUuaBI6fegAp z?mDve4E-ile{s8%kmsDEpS?H$59+JLdz?n;13Lw*L1OefY2&m zL^)YrflEd=6%Pt4i_}tR20QYXdABELbBei(#4GJB9TGOJBGVaAblZzqcX5C~DHFu+ z!d|tW;4qxEBjyz0z#FnPymi19m__r#;&GvM3}=;mb4#AzFC9Rs|3%ub#1L&5K(4#% z^LrBc(0KuXj}0>~Q3KNG`w!2&)gF}7I+z%6h9eo|lT64} z>#7K~juKjRa^^gF*Z@?{SW^!-b}jE?t2cS1+P z4yKn`#HCrx@P`J1HCUQl&yF$!>UiR+EkTLgmq{6=&c7ME6tei4_g~PFKNT%s_ErZ* T(@cMVT)@%Z+3wj1eDePQWn^aa diff --git a/spug_web2/src/assets/logo-spug-txt.png b/spug_web2/src/assets/spug-default.png similarity index 100% rename from spug_web2/src/assets/logo-spug-txt.png rename to spug_web2/src/assets/spug-default.png diff --git a/spug_web2/src/i18n.js b/spug_web2/src/i18n.js index 0d2ddaa..61ebb85 100644 --- a/spug_web2/src/i18n.js +++ b/spug_web2/src/i18n.js @@ -1,8 +1,9 @@ import i18n from 'i18next' import {initReactI18next} from 'react-i18next' +import {session} from '@/libs' i18n.use(initReactI18next).init({ - lng: localStorage.getItem('lang') || 'zh', + lng: session.lang, resources: { en: { translation: { @@ -12,6 +13,15 @@ i18n.use(initReactI18next).init({ '批量执行': 'Batch', '执行任务': 'Task', '文件分发': 'Transfer', + '重置': 'Reset', + '展示字段': 'Columns Display', + '年龄': 'Age', + 'page': 'Total {{total}} items', + } + }, + zh: { + translation: { + 'page': '共 {{total}} 条', } } } diff --git a/spug_web2/src/layout/Header.jsx b/spug_web2/src/layout/Header.jsx index 8b83401..d962c13 100644 --- a/spug_web2/src/layout/Header.jsx +++ b/spug_web2/src/layout/Header.jsx @@ -1,10 +1,22 @@ -import {Layout, Flex, Dropdown, theme} from 'antd' +import {useContext} from 'react' +import {Layout, Flex, Dropdown} from 'antd' import {AiOutlineTranslation} from 'react-icons/ai' -import css from './header.module.scss' +import {IoSunny, IoMoon} from 'react-icons/io5' +import {SContext} from '@/libs' +import css from './index.module.scss' import i18n from '@/i18n.js' +import logo from "@/assets/spug-default.png"; function Header() { - const {token: {colorBgContainer}} = theme.useToken() + const {S: {theme}, updateS} = useContext(SContext) + + function handleThemeChange() { + const newTheme = theme === 'light' ? 'dark' : 'light' + localStorage.setItem('theme', newTheme) + updateS(draft => { + draft.theme = newTheme + }) + } function handleLangChange({key}) { localStorage.setItem('lang', key) @@ -19,9 +31,9 @@ function Header() { key: 'en', }] - console.log('lang', i18n.language) return ( - + + logo

admin
@@ -29,6 +41,9 @@ function Header() { +
+ {theme === 'light' ? : } +
) diff --git a/spug_web2/src/layout/header.module.scss b/spug_web2/src/layout/header.module.scss deleted file mode 100644 index 66f3668..0000000 --- a/spug_web2/src/layout/header.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -.header { - padding: 0 8px; - - .item { - height: 48px; - display: flex; - align-items: center; - justify-content: center; - padding: 0 16px; - font-weight: 600; - cursor: pointer; - transition: all 0.1s ease-in-out; - - &:hover { - background: #f1f1f1; - } - } -} \ No newline at end of file diff --git a/spug_web2/src/layout/index.jsx b/spug_web2/src/layout/index.jsx index e3a3d5e..bc60b49 100644 --- a/spug_web2/src/layout/index.jsx +++ b/spug_web2/src/layout/index.jsx @@ -1,18 +1,14 @@ -import {useState} from 'react' import {Outlet, useMatches, useNavigate} from 'react-router-dom' -import {Layout, Breadcrumb, Flex, Menu, theme} from 'antd' +import {Layout, Flex, Menu, theme} from 'antd' import Header from './Header.jsx' import {menus} from '@/routes' -import logo1 from '@/assets/logo-spug-white.png' -import logo2 from '@/assets/logo-white.png' +import css from './index.module.scss' function LayoutIndex() { - const [collapsed, setCollapsed] = useState(false) - const {token: {colorBgContainer, colorTextTertiary}} = theme.useToken() + const {token: {colorTextTertiary}} = theme.useToken() const navigate = useNavigate() const matches = useMatches() - const crumbs = matches.map(x => ({title: x.handle.crumb, href: x.pathname})) function handleMenuClick({key}) { navigate(key) @@ -21,29 +17,20 @@ function LayoutIndex() { const selectedKey = matches[matches.length - 1]?.pathname return ( - - - {collapsed ? ( - logo - ) : ( - logo - )} - - - +
-
- - -
- -
+ + + + + + + + Copyright © 2023 OpenSpug All Rights Reserved. + + - - - Copyright © 2023 OpenSpug All Rights Reserved. - - ) diff --git a/spug_web2/src/layout/index.module.scss b/spug_web2/src/layout/index.module.scss new file mode 100644 index 0000000..2e92d0d --- /dev/null +++ b/spug_web2/src/layout/index.module.scss @@ -0,0 +1,46 @@ +.header { + position: sticky; + top: 0; + z-index: 999; + padding: 0 8px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--ant-color-border); + background: var(--ant-color-bg-container); + + .logo { + margin-left: 16px; + height: 30px; + } + + .item { + height: 47px; + display: flex; + align-items: center; + justify-content: center; + padding: 0 12px; + font-weight: 600; + cursor: pointer; + transition: all 0.1s ease-in-out; + + &:hover { + background: var(--ant-color-fill-secondary); + } + } +} + +.sider { + :global(.ant-menu) { + height: 100%; + } + + :global(.ant-layout-sider-trigger) { + border-inline-end: 1px solid var(--ant-color-split); + } +} + +.menu { + border-inline-end: none; +} \ No newline at end of file diff --git a/spug_web2/src/libs/index.js b/spug_web2/src/libs/index.js index c750766..e0e157e 100644 --- a/spug_web2/src/libs/index.js +++ b/spug_web2/src/libs/index.js @@ -1,7 +1,11 @@ +import React from 'react' import http from './http' import session from './session' +const SContext = React.createContext({}) +export * from './utils.js' export { http, session, -} \ No newline at end of file + SContext, +} diff --git a/spug_web2/src/libs/session.js b/spug_web2/src/libs/session.js index d1e6493..03fa021 100644 --- a/spug_web2/src/libs/session.js +++ b/spug_web2/src/libs/session.js @@ -3,6 +3,8 @@ import {isSubArray} from "@/libs/utils.js"; class Session { constructor() { this._session = {}; + this.lang = localStorage.getItem('lang') || 'zh'; + this.theme = localStorage.getItem('theme') || 'light'; const tmp = localStorage.getItem('session'); if (tmp) { try { diff --git a/spug_web2/src/main.jsx b/spug_web2/src/main.jsx index cb27969..92babb7 100644 --- a/spug_web2/src/main.jsx +++ b/spug_web2/src/main.jsx @@ -1,30 +1,9 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import {createBrowserRouter, RouterProvider} from 'react-router-dom' -import {ConfigProvider, App, theme} from 'antd' -import routes from './routes.jsx' -import './i18n.js' - - -const router = createBrowserRouter(routes) +import App from './App.jsx' ReactDOM.createRoot(document.getElementById('root')).render( - - - - - + ) diff --git a/spug_web2/src/routes.jsx b/spug_web2/src/routes.jsx index 37fd665..f97c77f 100644 --- a/spug_web2/src/routes.jsx +++ b/spug_web2/src/routes.jsx @@ -11,7 +11,6 @@ let routes = [ path: '/', element: , errorElement: , - title: t('首页'), children: [ { path: 'home', @@ -72,17 +71,5 @@ function routes2menu(routes, parentPath = '') { return menu } -function handle(routes) { - for (const route of routes) { - if (route.children) { - route.children = handle(route.children) - } - route.handle = {crumb: route.title} - } - return routes -} - -routes = handle(routes) - export const menus = routes2menu(routes[0].children) export default routes \ No newline at end of file