Merge pull request #124 from felinae98/mobile-view

前端适配移动端设备

admin-frontend/src/features/subsribeConfigManager/GroupManager.tsx

@@ -24,7 +24,7 @@ export default function GroupManager() {
           <Grid.Row gutter={20}>
             { Object.keys(subs).map(
               (groupNumber: string) => (
-                <Grid.Col span={6} key={groupNumber}>
+                <Grid.Col xs={24} sm={12} md={8} lg={6} key={groupNumber} style={{ margin: '1em 0' }}>
                   <Card
                     title={subs[groupNumber].name}
                     actions={[

admin-frontend/src/features/subsribeConfigManager/SubscribeManager.tsx

@@ -36,45 +36,45 @@ export default function SubscribeManager() {
       render: (col: string, record: SubscribeConfig) => (
         <span>{platformConf[record.platformName].name}</span>
       ),
+      width: '7em',
     },
-    { title: '帐号名称', dataIndex: 'targetName' },
-    { title: '订阅帐号', dataIndex: 'target' },
+    { title: '帐号名称', dataIndex: 'targetName', width: '10em' },
+    { title: '订阅帐号', dataIndex: 'target', width: '10em' },
     {
       title: '订阅分类',
       dataIndex: 'cats',
+      ellipsis: true,
       render: (col: string[], record: SubscribeConfig) => (
-        <span>
-          <Space>
-            {
-            record.cats.map((catNumber: number) => (
-              <Tag>{platformConf[record.platformName].categories[catNumber]}</Tag>
-            ))
-            }
-          </Space>
-        </span>
+        <Space wrap>
+          {
+          record.cats.map((catNumber: number) => (
+            <Tag>{platformConf[record.platformName].categories[catNumber]}</Tag>
+          ))
+          }
+        </Space>
       ),
+      width: '20em',
     },
     {
       title: '订阅标签',
       dataIndex: 'tags',
       render: (col: string[], record: SubscribeConfig) => (
-        <span>
-          <Space>
-            {
-              record.tags.length === 0 ? <Tag color="green">全部标签</Tag>
-                : record.tags.map((tag: string) => (
-                  <Tag color="blue">{tag}</Tag>
-                ))
-            }
-          </Space>
-        </span>
+        <Space wrap>
+          {
+            record.tags.length === 0 ? <Tag color="green">全部标签</Tag>
+              : record.tags.map((tag: string) => (
+                <Tag color="blue">{tag}</Tag>
+              ))
+          }
+        </Space>
       ),
+      width: '20em',
     },
     {
       title: '操作',
       dataIndex: 'op',
       render: (_: null, record: SubscribeConfig) => (
-        <Space>
+        <Space size="small">
           <Button type="text" onClick={handleEdit(record)}>编辑</Button>
           <Button type="text" status="success" onClick={() => Message.error('懒得写了')}>复制</Button>
           <Popconfirm
@@ -91,6 +91,7 @@ export default function SubscribeManager() {
           </Popconfirm>
         </Space>
       ),
+      width: '16em',
     },
   ];
 
@@ -107,6 +108,7 @@ export default function SubscribeManager() {
           data={subs[groupNumber].subscribes}
           rowKey={(record: SubscribeConfig) => `${record.platformName}-${record.target}`}
           loading={isLoading}
+          scroll={{ x: true }}
         />
         <SubscribeModal
           visible={showModal}

admin-frontend/src/features/subsribeConfigManager/SubscribeModal.tsx

@@ -9,6 +9,7 @@ import { selectPlatformConf } from '../globalConf/globalConfSlice';
 import { CategoryConfig, SubscribeConfig } from '../../utils/type';
 import getTargetName from '../targetName/targetNameReq';
 import { useUpdateSubMutation, useNewSubMutation } from './subscribeConfigSlice';
+import useWindowDimensions from '../../utils/hooks';
 
 function SubscribeTag({
   value, onChange, disabled,
@@ -68,6 +69,7 @@ function SubscribeModal({
   const [updateSub] = useUpdateSubMutation();
   const [newSub] = useNewSubMutation();
   const dispatch = useAppDispatch();
+  const { width } = useWindowDimensions();
 
   const onSubmit = () => {
     form.validate().then((value: SubscribeConfig) => {
@@ -147,9 +149,11 @@ function SubscribeModal({
       onCancel={() => setVisible(false)}
       confirmLoading={confirmLoading}
       onOk={onSubmit}
+      style={{ maxWidth: '90vw' }}
     >
       <Form
         form={form}
+        layout={width > 520 ? 'horizontal' : 'vertical'}
       >
         <Form.Item label="平台" field="platformName">
           <Select placeholder="平台" onChange={handlePlatformSelected}>

admin-frontend/src/pages/Home.tsx

@@ -89,7 +89,10 @@ export default function Home() {
         </span>
       </Layout.Header>
       <Layout className="layout-collapse-demo">
-        <Layout.Sider>
+        <Layout.Sider
+          collapsible
+          breakpoint="lg"
+        >
           <Menu
             defaultSelectedKeys={[selectedTab]}
             onClickMenuItem={(key) => { handleTabSelect(key); }}
@@ -104,10 +107,10 @@ export default function Home() {
             </Menu.Item>
           </Menu>
         </Layout.Sider>
-        <Layout.Content style={{ padding: '0 24px' }}>
+        <Layout.Content style={{ padding: '0 1em' }}>
           <Layout style={{ height: '100%' }}>
             { breadcrumbContent }
-            <Layout.Content style={{ margin: '10px', padding: '40px' }}>
+            <Layout.Content style={{ margin: '0.5em', padding: '2em' }}>
               <Outlet />
             </Layout.Content>
           </Layout>

admin-frontend/src/utils/hooks.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+export default function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}