feat: 1. 增加退出功能。 2. 优化SearchBar组件。

3. 优化登录跳转。
JackySoft · Aug 17, 2024 · 88dbe27 · 88dbe27
1 parent 960a282
commit 88dbe27
Show file tree

Hide file tree

Showing 10 changed files with 1,064 additions and 275 deletions.
diff --git a/package.json b/package.json
@@ -1,16 +1,31 @@
 {
-  "private": true,
+  "private": false,
   "name": "marsview",
-  "description": "低代码平台，包含可视化编辑器、可视化后台管理，支持自定义组件开发",
+  "description": "marsview 是一款开源的低代码平台，面向中后台管理系统。支持可视化配置、逻辑编排、事件流交互、数据源配置等。",
   "version": "1.0.0",
   "license": "MIT",
+  "author": {
+    "name": "河畔一角",
+    "email": "sunnyboysoft@163.com",
+    "url": "http://www.marsview.cc"
+  },
+  "keywords": [
+    "lowcode",
+    "react",
+    "antd",
+    "react-dnd",
+    "中后台低代码平台"
+  ],
   "scripts": {
     "start:editor": "pnpm --filter editor start",
     "build:editor": "pnpm --filter editor build",
     "start:admin": "pnpm --filter admin start",
     "build:admin": "pnpm --filter admin build",
     "build": "rm -rf dist && pnpm --filter editor build && pnpm --filter admin build",
-    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'"
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "release:major": "standard-version --release-as major",
+    "release:minor": "standard-version --release-as minor",
+    "release:patch": "standard-version --release-as patch"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
@@ -23,6 +38,14 @@
       "prettier --parser=typescript --write"
     ]
   },
+  "homepage": "http://www.marsview.cc",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JackySoft/marsview.git"
+  },
+  "bugs": {
+    "url": "https://github.com/JackySoft/marsview/issues"
+  },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@ant-design/plots": "^1.2.6",
@@ -38,6 +61,7 @@
     "react-error-boundary": "^4.0.13",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.21.2",
+    "standard-version": "^9.5.0",
     "vite": "^5.0.8",
     "vite-plugin-externals-new": "^1.5.5",
     "zustand": "^4.4.7"

diff --git a/packages/admin/src/pages/login/Login.tsx b/packages/admin/src/pages/login/Login.tsx
@@ -1,15 +1,17 @@
 import type { FormProps } from 'antd';
 import { Button, Form, Input } from 'antd';
-import style from './index.module.less';
+import { useNavigate } from 'react-router-dom';
 import { login } from '@/api';
 import storage from '@/utils/storage';
 import { usePageStore } from '@/stores/pageStore';
 import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import style from './index.module.less';
 type FieldType = {
   userName: string;
   userPwd: string;
 };
 export default function Login() {
+  const navigate = useNavigate();
   const saveUserInfo = usePageStore((state) => state.saveUserInfo);
   const onFinish: FormProps<FieldType>['onFinish'] = async (values: FieldType) => {
     const res = await login<FieldType>(values);
@@ -18,7 +20,8 @@ export default function Login() {
       saveUserInfo(res);
       const params = new URLSearchParams(location.search);
       setTimeout(() => {
-        location.href = params.get('callback') || '/welcome';
+        const url = new URL(params.get('callback') as string);
+        navigate(url.pathname || '/welcome');
       });
     }
   };

diff --git a/packages/editor/src/components/Searchbar/SearchBar.tsx b/packages/editor/src/components/Searchbar/SearchBar.tsx
@@ -1,19 +1,22 @@
 import { memo } from 'react';
-import { Button, Form, Input, Space } from 'antd';
+import { Button, Form, Input, Radio, Space } from 'antd';
+import { PlusOutlined, RedoOutlined } from '@ant-design/icons';
 import styles from './index.module.less';
 
 const SearchBar = memo((props: any) => {
-  const { form, from, rightChildren, submit } = props;
-
+  const { form, from, submit, refresh, onCreate } = props;
+  const options = [
+    { label: '我的', value: 1 },
+    { label: '市场', value: 2 },
+  ];
   return (
     <>
       <div className={styles.searchBar}>
         <div className={styles.searchBarForm}>
-          {
-            // 左侧的子组件 控制展示全部还是当前用户数据
-            props.leftChildren ? <div className={styles.leftChildren}>{props.leftChildren}</div> : null
-          }
-          <Form form={form} layout="inline">
+          <Form form={form} layout="inline" initialValues={{ type: 1 }}>
+            <Form.Item name="type">
+              <Radio.Group options={options} onChange={submit} optionType="button" buttonStyle="solid" />
+            </Form.Item>
             <Form.Item name="keyword" style={{ width: 200 }}>
               <Input placeholder={`请输入${from}名称`} onPressEnter={submit} />
             </Form.Item>
@@ -26,7 +29,12 @@ const SearchBar = memo((props: any) => {
             </Form.Item>
           </Form>
         </div>
-        <div className={styles.searchBarBtns}>{rightChildren}</div>
+        <div className={styles.searchBarBtns}>
+          <Button type="dashed" style={{ marginRight: '10px' }} icon={<PlusOutlined />} onClick={onCreate}>
+            新建{from}
+          </Button>
+          <Button shape="circle" icon={<RedoOutlined />} onClick={() => refresh()}></Button>
+        </div>
       </div>
     </>
   );

diff --git a/packages/editor/src/layout/components/Header/index.module.less b/packages/editor/src/layout/components/Header/index.module.less
@@ -79,6 +79,9 @@
     align-items: center;
   }
 }
+.github {
+  vertical-align: middle;
+}
 .publishPopover {
   padding: 10px;
   button {

diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx
@@ -1,13 +1,11 @@
 import { Layout, Menu, MenuProps, Button, Popover, Dropdown, Space, Image } from 'antd';
-import { memo, useEffect, useRef, useState } from 'react';
-import { ProjectOutlined, OneToOneOutlined, PlusOutlined, CaretDownFilled, DownOutlined, AppstoreOutlined, LoadingOutlined } from '@ant-design/icons';
+import { memo, useEffect, useState } from 'react';
+import { ProjectOutlined, OneToOneOutlined, CaretDownFilled, DownOutlined, AppstoreOutlined, LoadingOutlined } from '@ant-design/icons';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { toBlob, toPng } from 'html-to-image';
 import { usePageStore } from '@/stores/pageStore';
 import { message } from '@/utils/AntdGlobal';
 import { getUserAvatar, updatePageData, uploadImg } from '@/api';
-import CreatePage from './CreatePage';
-import CreateLib from './CreateLib';
 import Publish from './PublishPopover';
 import styles from './index.module.less';
 
@@ -260,7 +258,7 @@ const Header = memo(() => {
           <Popover
             content={
               <>
-                <Image width={150} src="https://marsview.cdn.bcebos.com/qrcode.png" preview={false} />
+                <Image width={200} src="https://marsview.cdn.bcebos.com/qrcode.jpg" preview={false} />
                 <p style={{ textAlign: 'center', color: '#7d33ff' }}>微信交流群</p>
               </>
             }
@@ -271,8 +269,57 @@ const Header = memo(() => {
           {/* 用户头像 */}
           <div className={styles.avatar}>
             {avatar ? <img width={30} src={avatar} style={{ borderRadius: '50%' }} /> : null}
-            <span style={{ marginLeft: 10 }}>{`${userInfo?.userName}` || '开发者'}</span>
+
+            <Dropdown
+              menu={{
+                items: [
+                  {
+                    key: '1',
+                    label: `${userInfo?.userName}`,
+                  },
+                  {
+                    key: '2',
+                    label: (
+                      <div
+                        onClick={(e) => {
+                          localStorage.clear();
+                          navigate(`/login?callback=${window.location.href}`);
+                        }}
+                      >
+                        退出
+                      </div>
+                    ),
+                  },
+                ],
+                selectable: true,
+              }}
+            >
+              <a onClick={(e) => e.preventDefault()}>
+                <Space>
+                  <span style={{ marginLeft: 10 }}>{`${userInfo?.userName}` || '开发者'}</span>
+                  <DownOutlined />
+                </Space>
+              </a>
+            </Dropdown>
           </div>
+          {/* github开源地址 */}
+          <a href="https://github.com/JackySoft/marsview" aria-label="github" target="_blank">
+            <svg
+              className={styles.github}
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="4250"
+              width="20"
+              height="20"
+            >
+              <path
+                d="M512 12.64c-282.752 0-512 229.216-512 512 0 226.208 146.72 418.144 350.144 485.824 25.6 4.736 35.008-11.104 35.008-24.64 0-12.192-0.48-52.544-0.704-95.328-142.464 30.976-172.512-60.416-172.512-60.416-23.296-59.168-56.832-74.912-56.832-74.912-46.464-31.776 3.52-31.136 3.52-31.136 51.392 3.616 78.464 52.768 78.464 52.768 45.664 78.272 119.776 55.648 148.992 42.56 4.576-33.088 17.856-55.68 32.512-68.48-113.728-12.928-233.28-56.864-233.28-253.024 0-55.904 20-101.568 52.768-137.44-5.312-12.896-22.848-64.96 4.96-135.488 0 0 43.008-13.76 140.832 52.48 40.832-11.36 84.64-17.024 128.16-17.248 43.488 0.192 87.328 5.888 128.256 17.248 97.728-66.24 140.64-52.48 140.64-52.48 27.872 70.528 10.336 122.592 5.024 135.488 32.832 35.84 52.704 81.536 52.704 137.44 0 196.64-119.776 239.936-233.792 252.64 18.368 15.904 34.72 47.04 34.72 94.816 0 68.512-0.608 123.648-0.608 140.512 0 13.632 9.216 29.6 35.168 24.576 203.328-67.776 349.856-259.616 349.856-485.76 0-282.784-229.248-512-512-512z"
+                fill="#2c2c2c"
+                p-id="4251"
+              ></path>
+            </svg>
+          </a>
         </div>
       </Layout.Header>
     </>

diff --git a/packages/editor/src/pages/home/LibList.tsx b/packages/editor/src/pages/home/LibList.tsx
@@ -1,14 +1,13 @@
-import { Button, Skeleton, Space, Pagination, Form, Radio, Badge } from 'antd';
+import { Button, Skeleton, Space, Pagination, Form } from 'antd';
 import { useEffect, useRef, useState } from 'react';
-import { UserOutlined, CodeOutlined, PlusOutlined, RedoOutlined } from '@ant-design/icons';
+import { UserOutlined, CodeOutlined, PlusOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import { getLibList } from '@/api/lib';
 import { usePageStore } from '@/stores/pageStore';
 import { message } from '@/utils/AntdGlobal';
-import style from './index.module.less';
 import SearchBar from '@/components/Searchbar/SearchBar';
 import CreateLib from '@/layout/components/Header/CreateLib';
-import { RadioChangeEvent } from 'antd/lib';
+import style from './index.module.less';
 
 /**
  * 组件商店
@@ -24,26 +23,20 @@ export default () => {
   const createLibRef = useRef<{ open: () => void }>();
   const navigate = useNavigate();
 
-  // 展示可见items 1 个人 2 全部
-  const [visitLocalGlobal, setVisitLocalGlobal] = useState('1');
-  const optionsLocalGlobal = [
-    { label: '个人', value: '1' },
-    { label: '全部', value: '2' },
-  ];
-
   useEffect(() => {
     getList(current, pageSize);
-  }, [current, pageSize, visitLocalGlobal]);
+  }, [current, pageSize]);
 
   // 加载列表
   const getList = async (pageNum: number = current, size: number = pageSize) => {
     try {
       setLoading(true);
+      const { type, keyword } = form.getFieldsValue();
       const { list, total } = await getLibList({
         pageNum,
         pageSize: size,
-        keyword: form.getFieldValue('keyword'),
-        type: Number(visitLocalGlobal),
+        keyword,
+        type,
       });
       setList(list);
       setTotal(total);
@@ -80,11 +73,6 @@ export default () => {
     createLibRef.current?.open();
   };
 
-  // 切换展示个人还是全部
-  const handleVisistLocalGlobalChange = ({ target: { value } }: RadioChangeEvent) => {
-    setVisitLocalGlobal(value);
-  };
-
   const LibItem = ({ item }: { item: any }) => {
     return (
       <div className={style.item} key={item.id}>
@@ -113,40 +101,12 @@ export default () => {
 
   return (
     <div className={style.libWrap}>
-      <SearchBar
-        form={form}
-        from="组件"
-        submit={handleSearch}
-        leftChildren={
-          <Radio.Group
-            style={{ marginRight: '20px' }}
-            options={optionsLocalGlobal}
-            onChange={handleVisistLocalGlobalChange}
-            value={visitLocalGlobal}
-            optionType="button"
-            buttonStyle="solid"
-          />
-        }
-        rightChildren={
-          <>
-            <Button type="dashed" style={{ marginRight: '10px' }} icon={<PlusOutlined />} onClick={handleCreate}>
-              新建组件
-            </Button>
-            <Button shape="circle" icon={<RedoOutlined />} onClick={() => getList()}></Button>
-          </>
-        }
-      ></SearchBar>
+      <SearchBar form={form} from="组件" submit={handleSearch} refresh={getList} onCreate={handleCreate} />
       <div className={style.libList}>
         <Skeleton loading={loading} active paragraph={{ rows: 3 }}>
-          {list.map((item) =>
-            visitLocalGlobal === '2' && item.user_id === userInfo.userId ? (
-              <Badge.Ribbon text="Me" placement="end">
-                <LibItem item={item} />
-              </Badge.Ribbon>
-            ) : (
-              <LibItem item={item} />
-            ),
-          )}
+          {list.map((item) => (
+            <LibItem item={item} key={item.id} />
+          ))}
         </Skeleton>
       </div>
       <div className={style.paginationContainer}>