Add the placeholder for preference.

2024-04-21 12:31:55 +00:00 · 2020-06-06 11:49:44 +08:00
parent 7bf0fc6c77
commit f9ed88b84f
13 changed files with 227 additions and 11 deletions
@@ -1,8 +1,7 @@
 {
  "parser": "@typescript-eslint/parser",
  "plugins": [
-    "@typescript-eslint",
-    "prettier"
+    "@typescript-eslint"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
@@ -24,7 +24,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
+    <title>蓝眼云盘</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -1,16 +1,17 @@
 import {ToolItem} from "../types";
+import React from "react";

 export default class MenuItem implements ToolItem {
  name: string;
  url: string;
-  iconType: string;
+  icon: React.ReactNode;
  active: boolean = false;


-  constructor(name: string, url: string, iconType: string) {
+  constructor(name: string, url: string, icon: React.ReactNode) {
    this.name = name;
    this.url = url;
-    this.iconType = iconType;
+    this.icon = icon;

    //当前的url完全一致，那么就高亮显示
    if (url == "/user/login") {
@@ -1,20 +1,21 @@
 /**
 * 管理当前所有的菜单
 */
+import React from "react";
 import MenuItem from './MenuItem';
 import Moon from '../model/global/Moon';
 import User from '../model/user/User';
 import {UserRole} from '../model/user/UserRole';
+import {AppstoreOutlined, DashboardOutlined, PoweroffOutlined, SettingOutlined, TeamOutlined} from '@ant-design/icons';
+

 export default class MenuManager {

  //单例模式
  private static singleton: MenuManager;

-
  constructor() {

-
  }

  static getSingleton(): MenuManager {
@@ -62,10 +63,15 @@ export default class MenuManager {
        new MenuItem('登录', '/user/login', 'user'),
      ];
    } else {
+
      menuItems = [
-        new MenuItem('所有文件', '/matter/list', 'bar-chart'),
-        new MenuItem('退出', '/user/logout', 'poweroff'),
+        new MenuItem('所有文件', '/matter/list', <AppstoreOutlined/>),
+        new MenuItem('网站偏好', '/preference/index', <SettingOutlined/>),
+        new MenuItem('监控统计', '', <DashboardOutlined/>),
+        new MenuItem('用户列表', '', <TeamOutlined/>),
+        new MenuItem('退出登录', '/user/logout', <PoweroffOutlined/>),
      ];
+
    }

    return menuItems;
@@ -0,0 +1,107 @@
+import SafeUtil from '../../util/SafeUtil';
+import BaseEntity from '../base/BaseEntity';
+
+
+export default class Preference extends BaseEntity {
+
+  //获取当前登录者的信息
+  static URL_API_PREFERENCE_FETCH = '/api/preference/fetch'
+  static URL_API_SYSTEM_CLEANUP = '/api/preference/system/cleanup'
+
+  //网站名称
+  name: string = ""
+
+  //logo
+  logoUrl: string | null = null
+  faviconUrl: string | null = null
+
+  //版权信息
+  copyright: string | null = null
+  record: string | null = null
+
+  //大小限制
+  downloadDirMaxSize: number = -1
+  //文件数量
+  downloadDirMaxNum: number = -1
+  //用户默认总大小限制
+  defaultTotalSizeLimit: number = -1
+  //是否允许自主注册
+  allowRegister: boolean = false
+  //Office预览链接
+  officeUrl: string | null = null
+  //后台版本
+  version: string | null = null
+
+
+  constructor(reactComponent?: React.Component) {
+
+    super(reactComponent);
+
+  }
+
+
+  assign(obj: any) {
+    super.assign(obj);
+
+  }
+
+  getForm(): any {
+    return {
+      name: this.name,
+      logoUrl: this.logoUrl,
+      faviconUrl: this.faviconUrl,
+      copyright: this.copyright,
+      record: this.record,
+      downloadDirMaxNum: this.downloadDirMaxNum,
+      downloadDirMaxSize: this.downloadDirMaxSize,
+      defaultTotalSizeLimit: this.defaultTotalSizeLimit,
+      allowRegister: this.allowRegister,
+      officeUrl: this.officeUrl
+    };
+  }
+
+
+  //修改title和favicon
+  updateTitleAndFavicon() {
+
+    if (this.faviconUrl) {
+      //修改favicon
+      let link: any = document.querySelector("link[rel*='icon']") || document.createElement('link');
+      link.type = 'image/x-icon';
+      link.rel = 'shortcut icon';
+      link.href = this.faviconUrl;
+      document.getElementsByTagName('head')[0].appendChild(link);
+    }
+
+    document.title = this.name
+
+  }
+
+  httpFetch(successCallback?: any, errorCallback?: any, finalCallback?: any) {
+    let that = this
+    this.httpPost(Preference.URL_API_PREFERENCE_FETCH, {}, function (response: any) {
+
+      that.assign(response.data.data);
+
+      that.updateTitleAndFavicon()
+
+      SafeUtil.safeCallback(successCallback)(response);
+
+    }, errorCallback)
+  }
+
+  httpSystemCleanup(password: string, successCallback?: any, errorCallback?: any, finalCallback?: any) {
+    let that = this
+    this.httpPost(Preference.URL_API_SYSTEM_CLEANUP, {password}, function (response: any) {
+
+      SafeUtil.safeCallback(successCallback)(response);
+
+    }, errorCallback, finalCallback)
+  }
+
+
+}
+
+
+
+
@@ -1,3 +1,5 @@
+import * as React from "react";
+
 /**
 * 定义了一个图标行为的对象，这个可以辅助一些组件。
 */
@@ -27,7 +29,7 @@ export interface ToolItem {
  active: boolean

  //antd的图标样式
-  iconType: string
+  icon: React.ReactNode

 }

@@ -7,6 +7,9 @@ import UserLogin from './user/Login';

 import UserProfile from './user/Profile';
 import MatterDetail from './matter/Detail';
+import PreferenceIndex from './preference/Index';
+import PreferenceEdit from './preference/Edit';
+
 import MatterList from './matter/List';
 import MatterEdit from './matter/Edit';

@@ -131,6 +134,7 @@ class RawFrame extends TankComponent<IProps, IState> {
                menuItems.map((menuItem: MenuItem, index: number) => {
                  return (
                    <Menu.Item key={menuItem.url}>
+                      {menuItem.icon}
                      <span>{menuItem.name}</span>
                    </Menu.Item>
                  );
@@ -154,6 +158,10 @@ class RawFrame extends TankComponent<IProps, IState> {
                <Route path="/index" component={Index}/>
                <Route path="/user/login" component={UserLogin}/>
                <Route path="/user/profile" component={UserProfile}/>
+
+                <Route path="/preference/index" component={PreferenceIndex}/>
+                <Route path="/preference/edit" component={PreferenceEdit}/>
+
                <Route path="/matter/detail/:uuid" component={MatterDetail}/>
                <Route exact path="/matter" render={() =>
                  <Redirect to="/matter/list"/>
@@ -0,0 +1,3 @@
+.page-preference-edit {
+
+}
@@ -0,0 +1,43 @@
+import React from 'react';
+import {RouteComponentProps} from "react-router-dom";
+import "./Edit.less"
+import TankComponent from "../../common/component/TankComponent";
+import User from "../../common/model/user/User";
+import Moon from "../../common/model/global/Moon";
+
+
+interface IProps extends RouteComponentProps {
+
+}
+
+interface IState {
+
+}
+
+export default class Edit extends TankComponent<IProps, IState> {
+
+  user: User = Moon.getSingleton().user
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {};
+  }
+
+  componentDidMount() {
+
+  }
+
+  render() {
+
+    let that = this
+
+    return (
+      <div className="page-preference-edit">
+        欢迎来到偏好设置页面
+      </div>
+    );
+  }
+}
+
+
@@ -0,0 +1,3 @@
+.page-preference-index {
+
+}
@@ -0,0 +1,43 @@
+import React from 'react';
+import {RouteComponentProps} from "react-router-dom";
+import "./Index.less"
+import TankComponent from "../../common/component/TankComponent";
+import User from "../../common/model/user/User";
+import Moon from "../../common/model/global/Moon";
+
+
+interface IProps extends RouteComponentProps {
+
+}
+
+interface IState {
+
+}
+
+export default class Index extends TankComponent<IProps, IState> {
+
+  user: User = Moon.getSingleton().user
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {};
+  }
+
+  componentDidMount() {
+
+  }
+
+  render() {
+
+    let that = this
+
+    return (
+      <div className="page-preference-index">
+        欢迎来到偏好设置页面
+      </div>
+    );
+  }
+}
+
+
@@ -70,6 +70,7 @@ export default class Login extends TankComponent<IProps, IState> {

    let that = this

+
    return (
      <div className="user-login">