feat(admin, experimental): 允许自定义页面背景图

miaoxing · Jan 24, 2022 · 1df048a · 1df048a
1 parent 1fe8d15
commit 1df048a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 9 deletions.
diff --git a/pages/admin-api/js-config/index.php b/pages/admin-api/js-config/index.php
@@ -14,6 +14,7 @@ public function get()
             'title' => $page->getTitle(),
             'logo' => $page->getLogo(),
             'copyright' => $page->getCopyright(),
+            'bg' => $page->getBg(),
         ];
 
         return suc(['data' => JsConfig::toArray() + ['page' => $config]]);

diff --git a/pages/admin/login/index.js b/pages/admin/login/index.js
@@ -1,7 +1,7 @@
 /**
  * @layout false
  */
-import { Component } from 'react';
+import {Component} from 'react';
 import {Form, Button, Input} from 'antd';
 import {Box, Image} from '@mxjs/box';
 import $ from 'miaoxing';
@@ -12,17 +12,23 @@ import nextUrl from 'next-url';
 import logo from '@miaoxing/admin/images/logo.svg';
 import {ConfigConsumer} from '@miaoxing/app';
 
+const bg = 'https://image-10001577.image.myqcloud.com/uploads/3/20190602/15594729401485.jpg';
+
 export default class extends Component {
   render() {
     return <Box flex>
-      <Global
-        styles={css`
-          body {
-            background: #f5f8fa url(https://image-10001577.image.myqcloud.com/uploads/3/20190602/15594729401485.jpg) no-repeat center center fixed;
-            background-size: cover;
-          }
-        `}
-      />
+      <ConfigConsumer>
+        {({page}) => (
+          <Global
+            styles={css`
+              body {
+                background: #f5f8fa url(${page.bg || bg}) no-repeat center center fixed;
+                background-size: cover;
+              }
+            `}
+          />
+        )}
+      </ConfigConsumer>
       <Box
         w={350}
         mx="auto"

diff --git a/src/Service/AdminPage.php b/src/Service/AdminPage.php
@@ -21,6 +21,14 @@ class AdminPage extends BaseService
      */
     protected $logo = '';
 
+    /**
+     * 背景图片，可用于登录等简单页面
+     *
+     * @var string
+     * @experimental 只有特定页面有背景，可能要改为其他更合适的名称
+     */
+    protected $bg = '';
+
     /**
      * @return string
      */
@@ -44,4 +52,13 @@ public function getLogo(): string
     {
         return $this->logo;
     }
+
+    /**
+     * @return string
+     * @experimental
+     */
+    public function getBg(): string
+    {
+        return $this->bg;
+    }
 }