feat: small ui modify

src/components/App.js

@@ -1,20 +1,48 @@
 import React from 'react';
 import AppContent from './AppContent';
+import { pathUtils } from '../router';
 import './css/App.css';
 
 class App extends React.Component {
  constructor(props) {
  super(props);
+ this.state = {
+ path: null,
+ };
  this.pageRef = React.createRef();
  }
+ componentDidMount() {
+ window.addEventListener('hashchange', () => {
+ this.navigateToByHash();
+ });
+ this.navigateToByHash();
+ }
+ navigateToByHash() {
+ let hash = pathUtils.parsePath(window.location.hash);
+ if (hash === this.state.path) {
+ return;
+ }
+ this.navigateTo(window.location.hash);
+ }
+ navigateTo(path) {
+ let state = this.state;
+ state.path = pathUtils.parsePath(path);
+ this.setState(state);
+ window.location.hash = state.path;
+ }
  render() {
  return (
  <s-page class="App" ref={this.pageRef} theme="auto">
- <AppContent
- setThemeFunc={(themeType) => {
- this.pageRef.current.theme = themeType;
- }}
- />
+ {!pathUtils.isNotFound(this.state.path) ? (
+ <AppContent
+ routerPath={this.state.path}
+ setThemeFunc={(themeType) => {
+ this.pageRef.current.theme = themeType;
+ }}
+ />
+ ) : (
+ <></>
+ )}
  </s-page>
  );
  }

src/components/AppContent.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { withTranslation } from 'react-i18next';
+import { routerRootPathList, pathUtils } from '../router';
 import RegistryIcon from './RegistryIcon';
 import './css/AppContent.css';
 
 class AppContent extends React.Component {
  constructor(props) {
  super(props);
  this.drawerRef = React.createRef();
+ this.navbarRef = React.createRef();
  this.themePickerRef = React.createRef();
  }
  componentDidMount() {
@@ -23,14 +25,23 @@ class AppContent extends React.Component {
  break;
  }
  });
+ this.navbarRef.current?.addEventListener('change', (event) => {
+ window.navigateTo(routerRootPathList[AppContent.navbarLinks[this.navbarRef.current.selectedIndex]]);
+ });
  }
+ static navbarLinks = ['home'];
  render() {
- // eslint-disable-next-line
  const { t } = this.props;
+ const getNavItemSelected = (index) => pathUtils.isSubPath(this.props.routerPath, routerRootPathList[AppContent.navbarLinks[index]]);
  return (
  <s-drawer ref={this.drawerRef}>
  <div className="App-sidebar" slot="start">
- <s-navigation mode="rail"></s-navigation>
+ <s-navigation class="App-navbar" mode="rail" ref={this.navbarRef}>
+ <s-navigation-item selected={getNavItemSelected(0)}>
+ <RegistryIcon type="home" slot="icon" />
+ <div slot="text">{t('ui.navbar.home')}</div>
+ </s-navigation-item>
+ </s-navigation>
  </div>
  <div className="App-content">
  <s-appbar>

src/interface.d.ts

@@ -0,0 +1,5 @@
+declare global {
+ interface Window {
+ navigateTo: (path: string) => void;
+ }
+}

src/locales/zh.json

@@ -6,6 +6,9 @@
  "official": "组件库",
  "community_wiki": "社区文档"
  }
+ },
+ "navbar": {
+ "home": "主页"
  }
  },
  "text": {

src/router.js

@@ -0,0 +1,55 @@
+export const routerRootPathList = { home: '/', introduction: '/introduction', components: '/components', api: '/api', more: '/more' };
+
+export const pathUtils = {
+ /**
+ * 处理路径
+ * @param {string} path 待处理路径
+ * @returns {string}
+ */
+ parsePath(path) {
+ let parsedPath = path;
+ if (parsedPath.startsWith('#')) {
+ parsedPath = parsedPath.substring(1);
+ }
+ if (!parsedPath.startsWith('/')) {
+ parsedPath = '/' + parsedPath;
+ }
+ return parsedPath;
+ },
+ /**
+ * 只按 routerRootPathList 来看，currentPath 是否找不到
+ * @param {string | null} currentPath
+ * @returns {boolean}
+ */
+ isNotFound(currentPath) {
+ if (currentPath === null) {
+ return true;
+ }
+ let found = false;
+ for (const key in routerRootPathList) {
+ const path = routerRootPathList[key];
+ if (this.isSubPath(currentPath, path)) {
+ found = true;
+ break;
+ }
+ }
+ return !found;
+ },
+ /**
+ * 比较 currentPath 是否为 parentPath 的子路径，或者二者相等
+ * 注意：parentPath 为根目录时始终返回 false
+ * @param {string | null} currentPath
+ * @param {string} parentPath
+ * @returns {boolean}
+ */
+ isSubPath(currentPath, parentPath) {
+ if (currentPath === null) {
+ return false;
+ }
+ if (currentPath.startsWith(parentPath + '/') || currentPath === parentPath) {
+ return true;
+ } else {
+ return false;
+ }
+ },
+};