",
7 | "license": "MIT",
8 | "scripts": {
9 | "build": "cross-env NODE_ENV=production webpack --mode production",
10 | "start": "cross-env NODE_ENV=development webpack-dev-server --mode development"
11 | },
12 | "dependencies": {
13 | "axios": "^0.21.2",
14 | "blueimp-md5": "^2.10.0",
15 | "js-base64": "^2.4.9",
16 | "js-cookie": "^2.2.0",
17 | "react": "^16.5.2",
18 | "react-dom": "^16.5.2",
19 | "react-loadable": "^5.5.0",
20 | "react-router-dom": "^4.3.1",
21 | "simplemde": "^1.11.2",
22 | "smox": "^1.3.3"
23 | },
24 | "devDependencies": {
25 | "@babel/core": "^7.1.0",
26 | "@babel/plugin-proposal-decorators": "^7.1.0",
27 | "@babel/plugin-syntax-dynamic-import": "^7.0.0",
28 | "@babel/plugin-transform-runtime": "^7.2.0",
29 | "@babel/preset-env": "^7.1.0",
30 | "@babel/preset-react": "^7.0.0",
31 | "@babel/runtime": "^7.3.1",
32 | "babel-loader": "^8.0.2",
33 | "cross-env": "^5.2.0",
34 | "css-loader": "^1.0.0",
35 | "file-loader": "^2.0.0",
36 | "html-webpack-plugin": "^3.2.0",
37 | "mini-css-extract-plugin": "^0.4.3",
38 | "style-loader": "^0.23.0",
39 | "url-loader": "^1.1.1",
40 | "webpack": "^4.20.2",
41 | "webpack-cli": "^3.1.1",
42 | "webpack-dev-server": "^3.1.9"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/react/src/api/comment.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import {isDev, API_LINK} from 'common/js/util'
3 |
4 |
5 | // 根据pid查找评论
6 | export function getCommentByPid(pid, page, pageSize) {
7 | return request.get('/comments', {
8 | params: {pid, page, pageSize}
9 | })
10 | }
11 |
12 | // 根据 uid 查找评论
13 | export function getCommentByUid(uid, page, pageSize) {
14 | return request.get('/comments', {
15 | params: {uid, page, pageSize}
16 | })
17 | }
18 |
19 |
20 | // 根据pid删除评论
21 | export function deleteCommentByPid(pid) {
22 | return axios.post(`/comment/delete?pid=${pid}`)
23 | }
--------------------------------------------------------------------------------
/packages/react/src/api/jx.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 |
3 | export function getHcyList(fid) {
4 | return axios.get('/hcy/list', {
5 | params: {
6 | fid
7 | }
8 | })
9 |
10 | }
--------------------------------------------------------------------------------
/packages/react/src/api/post.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import {isDev, API_LINK} from 'common/js/util'
3 | import Cookies from 'js-cookie'
4 |
5 | axios.defaults.withCredentials = true
6 |
7 | export function getPosts(status, sort, tag, uid, page, pageSize) {
8 | return axios.get(`//api.clicli.cc/posts`, {
9 | params: {
10 | status, sort, tag, uid, page, pageSize
11 | }
12 | })
13 | }
14 |
15 | export function getPost(id) {
16 | return axios.get(`//api.clicli.cc/post/${id}`)
17 | }
18 |
19 | export function add({title, content, status, sort, tag, uid, videos}) {
20 | return axios.post('//api.clicli.cc/post/add', {
21 | title,
22 | content,
23 | status,
24 | sort,
25 | tag,
26 | uid,
27 | videos
28 | }, {
29 | headers: {
30 | 'token': Cookies.get('token')
31 | }
32 | })
33 | }
34 |
35 | // 更新文章
36 | export function update({id, title, content, status, sort, tag, uid, time,videos}) {
37 | return axios.post(`//api.clicli.cc/post/update/${id}`, {
38 | title,
39 | content,
40 | status,
41 | sort,
42 | tag,
43 | uid,
44 | time,
45 | videos
46 | }, {
47 | headers: {
48 | 'token': Cookies.get('token')
49 | }
50 | })
51 | }
52 |
53 | // 删除一篇文章
54 | export function deletePost(id) {
55 | return axios.post(`//api.clicli.cc/post/delete/${id}`, {}, {
56 | headers: {
57 | 'token': Cookies.get('token')
58 | }
59 | })
60 | }
61 |
62 |
--------------------------------------------------------------------------------
/packages/react/src/api/user.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import Cookies from "js-cookie"
3 |
4 | axios.defaults.withCredentials = true
5 |
6 | // 用户登录
7 | export function login(user) {
8 | return axios.post('//api.clicli.cc/user/login', {
9 | name: user.name,
10 | pwd: user.pwd
11 | })
12 | }
13 |
14 |
15 | // 用户注册
16 | export function register(user) {
17 | return axios.post('//api.clicli.cc/user/register', {
18 | name: user.name,
19 | pwd: user.pwd,
20 | qq: user.qq,
21 | level: 1,
22 | desc: '人懒，竟然没有签名~'
23 | })
24 | }
25 |
26 | // 更新用户信息
27 | export function update(user) {
28 | return axios.post(`//api.clicli.cc/user/update/${user.id}`, {
29 | name: user.name,
30 | pwd: user.pwd,
31 | qq: user.qq,
32 | level: parseInt(user.level),
33 | desc: user.desc
34 | }, {
35 | headers: {
36 | 'token': Cookies.get('token')
37 | }
38 | })
39 | }
40 |
41 | // 获取用户列表
42 | export function userList(level) {
43 | return axios.get('//api.clicli.cc/users', {
44 | params: {
45 | level,
46 | page: 1,
47 | pageSize: 100
48 | }
49 | })
50 | }
51 |
52 |
53 | // 用户退出
54 | export function logout() {
55 | return axios.post('//api.clicli.cc/user/logout')
56 | }
57 |
58 | // 获取用户cookie
59 | export function getCookie(uid) {
60 | return axios.get(`//api.clicli.cc/cookie/${uid}`)
61 | }
62 |
63 | export function getUser(uname, uid, uqq) {
64 | return axios.get('//api.clicli.cc/user', {
65 | params: {
66 | uname,
67 | uid,
68 | uqq
69 | }
70 | })
71 | }
72 |
73 | // 替换用户cookie
74 | export function replaceCookie(data) {
75 | return axios.post('//api.clicli.cc/cookie/replace', {
76 | uid: parseInt(data.uid),
77 | hcy: data.hcy,
78 | quqi: data.quqi
79 | })
80 |
81 | }
82 |
83 | export function auth() {
84 | return axios.get('//api.clicli.cc/auth')
85 | }
--------------------------------------------------------------------------------
/packages/react/src/api/video.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import {replaceContent, isDev, API_LINK} from 'common/js/util'
3 | import Cookies from "js-cookie"
4 |
5 | const request = axios.create({
6 | baseURL: API_LINK
7 | })
8 |
9 | // 根据pid查找视频
10 | export function getVideos(pid, page, pageSize) {
11 | return request.get('/videos', {
12 | params: {
13 | pid: pid,
14 | page,
15 | pageSize
16 | }
17 | })
18 | }
19 |
20 | // 根据vid查找单一视频
21 |
22 | export function getVideo(vid) {
23 | return request.get(`/video/${vid}`)
24 |
25 | }
26 |
27 | // 添加视频
28 | export function addVideo({oid, title, content, pid, uid}) {
29 | content = replaceContent(content)
30 | return axios.post('/video/add', {
31 | oid: parseInt(oid),
32 | title,
33 | content,
34 | pid: parseInt(pid),
35 | uid
36 | }, {
37 | headers: {
38 | 'token': Cookies.get('token')
39 | }
40 | })
41 | }
42 |
43 | // 修改视频
44 | export function updateVideo({id, oid, title, content, pid, uid}) {
45 | content = replaceContent(content)
46 | return axios.post(`/video/update/${id}`, {
47 | oid: parseInt(oid),
48 | title,
49 | content,
50 | pid: parseInt(pid),
51 | uid
52 | }, {
53 | headers: {
54 | 'token': Cookies.get('token')
55 | }
56 | })
57 | }
58 |
59 | // 根据id删除视频
60 | export function deleteVideoById(id) {
61 | return axios.post(`/video/delete?id=${id}`, {}, {
62 | headers: {
63 | 'token': Cookies.get('token')
64 | }
65 | })
66 | }
67 |
68 | // 根据pid删除视频
69 | export function deleteVideoByPid(pid) {
70 | return axios.post(`/video/delete?pid=${pid}`, {}, {
71 | headers: {
72 | 'token': Cookies.get('token')
73 | }
74 | })
75 | }
76 |
77 |
78 | //上传
79 |
80 | export function getUploadToken(fname, rname) {
81 | return axios.get('https://jx.clicli.us/upload/auth', {
82 | params: {
83 | fname,
84 | rname
85 | }
86 | })
87 | }
--------------------------------------------------------------------------------
/packages/react/src/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Header from 'component/header/header'
4 | import EditorUser from 'component/editor-user/editor-user'
5 | import WriteArticle from 'component/write-article/wirte-article'
6 | import EditorVideo from 'component/editor-video/editor-video'
7 | import Login from 'component/login/login'
8 | import UserList from 'component/user-list/user-list'
9 | import ArticleList from 'component/post-list/post-list'
10 | import Register from 'component/register/register'
11 | import UserInfo from 'component/user-info/user-info'
12 |
13 | import {Route, Switch} from 'react-router-dom'
14 |
15 | class App extends React.Component {
16 | render() {
17 | return (
18 |
19 |
20 |
21 | (
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | )}/>
37 |
38 | )
39 | }
40 | }
41 |
42 | export default App
--------------------------------------------------------------------------------
/packages/react/src/base/confirm/confirm.css:
--------------------------------------------------------------------------------
1 | .confirm {
2 | width: 280px;
3 | position: absolute;
4 | top: 50%;
5 | left: 50%;
6 | transform: translate(-50%, -50%);
7 | background: #fff;
8 | box-shadow: -1px 0px 1px rgba(70,123,150, 0.2)
9 |
10 | }
11 |
12 | .confirm .text {
13 | text-align: center;
14 | padding: 30px 0;
15 | }
16 |
17 | .confirm .option {
18 | display: flex;
19 | }
20 |
21 | .confirm .option li {
22 | display: block;
23 | flex: 1;
24 | text-align: center;
25 | cursor: pointer;
26 | }
27 |
28 | .confirm .option li:last-child {
29 | background: #7e5fd9;
30 | color: #fff;
31 | }
32 |
--------------------------------------------------------------------------------
/packages/react/src/base/confirm/confirm.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './confirm.css'
3 |
4 | class Confirm extends React.Component {
5 | // constructor(props) {
6 | // super(props)
7 | // this.state = {
8 | // isShow: true
9 | // }
10 | // }
11 |
12 | closeShow() {
13 | this.props.closeShow()
14 | }
15 |
16 | confirm() {
17 | this.props.confirm(this.props.id)
18 | }
19 |
20 | render() {
21 | return (
22 |
23 |
24 | 确认删除吗？
25 |
26 |
30 |
49 | {this.state.isShow === true ?
: null}
51 |
52 |
53 | 标题
54 | 分类
55 | 状态
56 | 操作
57 |
58 |
73 |
43 |
44 |
45 |
46 | 努力加载中……
47 |
48 |
38 |
39 |
40 | )
41 | }
42 | }
43 |
44 | export default Markdown
--------------------------------------------------------------------------------
/packages/react/src/base/reach-box/reach-box.css:
--------------------------------------------------------------------------------
1 | .reach-box input {
2 | padding: 10px;
3 | box-shadow: 1px 1px 1px rgba(70, 75, 150, 0.2);
4 | border: 0;
5 | width: 300px;
6 | margin-right: 20px;
7 | box-sizing: border-box;
8 | background: #F6F6F3;
9 | }
10 |
11 | .reach-box button {
12 | background: #7e5fd9;
13 | padding: 8px 30px;
14 | color: #fff;
15 | margin: 0 auto;
16 | border: 0;
17 | box-shadow: 1px 1px 1px rgba(70, 75, 150, 0.6);
18 | cursor: pointer;
19 | }
--------------------------------------------------------------------------------
/packages/react/src/base/reach-box/reach-box.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './reach-box.css'
3 | import {withRouter} from "react-router-dom"
4 |
5 | @withRouter
6 |
7 | class ReachBox extends React.Component {
8 | constructor(props) {
9 | super(props)
10 | this.state = {
11 | v: ''
12 | }
13 | }
14 |
15 | selectInput() {
16 | this.props.history.push(`${this.props.prefix}${this.state.v}`)
17 | }
18 |
19 | handleChange(v) {
20 | this.setState({
21 | v
22 | })
23 | }
24 |
25 | render() {
26 | return (
27 |
28 | this.handleChange(e.target.value)}/>
29 |
30 |
31 | )
32 | }
33 |
34 | }
35 |
36 | export default ReachBox
--------------------------------------------------------------------------------
/packages/react/src/base/top-tip/top-tip.css:
--------------------------------------------------------------------------------
1 | .toptip {
2 | position: fixed;
3 | width: 100%;
4 | padding: 10px;
5 | color: #fff;
6 | top: -40px;
7 | text-align: center;
8 | z-index: 999;
9 | animation: moveup 5s ease-in-out infinite;
10 | }
11 |
12 | @keyframes moveup {
13 | 0% {
14 | top: -40px;
15 | opacity: 1;
16 | }
17 | 25%{
18 | top: 0;
19 | opacity: 1;
20 | }
21 | 50%{
22 | opacity: 1;
23 | }
24 | 100% {
25 | top: 0;
26 | opacity: 0;
27 | }
28 | }
--------------------------------------------------------------------------------
/packages/react/src/base/top-tip/top-tip.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './top-tip.css'
3 |
4 |
5 | class TopTip extends React.Component {
6 |
7 | render() {
8 | let text = this.props.text
9 | return (
10 |
11 | {text}
12 |
13 | )
14 | }
15 | }
16 |
17 | export default TopTip
--------------------------------------------------------------------------------
/packages/react/src/common/js/axios.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cliclitv/fre-clicli/a60d1f6b647c5da69f29e046cee52d68adf1b072/packages/react/src/common/js/axios.js
--------------------------------------------------------------------------------
/packages/react/src/common/js/util.js:
--------------------------------------------------------------------------------
1 | import md5 from 'blueimp-md5'
2 | import Cookies from 'js-cookie'
3 |
4 | export function getAvatar(avatar) {
5 | if (!avatar) return ''
6 | if (/^[0-9]+$/.test(avatar)) {
7 | return `http://q1.qlogo.cn/g?b=qq&nk=${avatar}&s=5`
8 | } else {
9 | let hash = md5(avatar)
10 | return `https://sdn.geekzu.org/avatar/${hash}`
11 | }
12 | }
13 |
14 | export function replaceContent(content) {
15 | content = content.replace('piaoquantv', 'yishihui')
16 | return content
17 | }
18 |
19 | export let isDev = process.env.NODE_ENV === 'development'
20 | export const HOME_LINK = '//www.clicli.cc'
21 | export const API_LINK = '//api.clicli.cc'
22 |
--------------------------------------------------------------------------------
/packages/react/src/common/style/iconfont.css:
--------------------------------------------------------------------------------
1 |
2 | @font-face {font-family: "icon-font";
3 | src: url('//at.alicdn.com/t/font_474499_sbdek9r9luucjtt9.eot?t=1519207777376'); /* IE9*/
4 | src: url('//at.alicdn.com/t/font_474499_sbdek9r9luucjtt9.eot?t=1519207777376#iefix') format('embedded-opentype'), /* IE6-IE8 */
5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
6 | url('//at.alicdn.com/t/font_474499_sbdek9r9luucjtt9.ttf?t=1519207777376') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
7 | url('//at.alicdn.com/t/font_474499_sbdek9r9luucjtt9.svg?t=1519207777376#icon-font') format('svg'); /* iOS 4.1- */
8 | }
9 |
10 | .icon-font {
11 | font-family:"icon-font" !important;
12 | font-size:16px;
13 | font-style:normal;
14 | -webkit-font-smoothing: antialiased;
15 | -moz-osx-font-smoothing: grayscale;
16 | }
17 |
18 | .icon-editor:before { content: "\e684"; }
19 |
20 | .icon-del:before { content: "\e65a"; }
21 |
22 | .icon-text:before { content: "\e6a9"; }
23 |
24 |
--------------------------------------------------------------------------------
/packages/react/src/common/style/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font: 14px 微软雅黑;
3 | color: #444;
4 | background: #f4f6fa;
5 | }
6 |
7 | a {
8 | color: #7e5fd9;
9 | }
10 |
11 | .center {
12 | text-align: center;
13 | }
14 |
15 | li {
16 | list-style: none;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/react/src/common/style/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 |
27 | /* HTML5 display-role reset for older browsers */
28 | article, aside, details, figcaption, figure,
29 | footer, header, hgroup, menu, nav, section {
30 | display: block;
31 | }
32 |
33 | body {
34 | line-height: 1;
35 | }
36 |
37 | ol, ul {
38 | list-style: none;
39 | }
40 |
41 | blockquote, q {
42 | quotes: none;
43 | }
44 |
45 | blockquote:before, blockquote:after,
46 | q:before, q:after {
47 | content: '';
48 | content: none;
49 | }
50 |
51 | table {
52 | border-collapse: collapse;
53 | border-spacing: 0;
54 | }
55 |
56 | a{
57 | text-decoration: none;
58 | }
--------------------------------------------------------------------------------
/packages/react/src/component/editor-user/editor-user.css:
--------------------------------------------------------------------------------
1 | .editor-user {
2 | width: 800px;
3 | margin: 50px auto;
4 | }
5 |
6 | .editor-user h1 {
7 | color: #7e5fd9;
8 | font-size: 24px;
9 | margin: 20px 0;
10 | }
11 |
12 | .editor-user li {
13 | padding: 10px;
14 | font-weight: bold;
15 | }
16 |
17 | .editor-user span {
18 | cursor: pointer;
19 | }
20 |
21 | .editor-user ul {
22 | width: 500px;
23 | margin: 50px auto;
24 | }
25 |
26 | .editor-user li input, textarea {
27 | padding: 10px;
28 | box-shadow: 1px 1px 1px rgba(70, 75, 150, 0.2);
29 | border: 0;
30 | width: 100%;
31 | margin: 10px 0;
32 | box-sizing: border-box;
33 | }
34 |
35 | .editor-user li textarea {
36 | height: 50px;
37 | }
38 |
39 | .editor-user button {
40 | background: #7e5fd9;
41 | padding: 8px 30px;
42 | color: #fff;
43 | margin: 20px;
44 | border: 0;
45 | box-shadow: 1px 1px 1px rgba(70, 75, 150, 0.6);
46 | cursor: pointer;
47 | }
48 |
49 | .editor-user select {
50 | padding: 5px 17px;
51 | box-shadow: 1px 1px 1px rgba(70, 75, 150, 0.2);
52 | border: 0;
53 | color: #666;
54 | margin: 10px 0;
55 | display: block;
56 | }
57 |
58 | .per {
59 | position: absolute;
60 | top: 50%;
61 | left: 50%;
62 | transform: translate(-50%, -50%);
63 | height: 60px;
64 | width: 60px;
65 | color: #fff;
66 | font-size: 20px;
67 | background: #608ea8;
68 | text-align: center;
69 | border-radius: 30px;
70 | line-height: 60px;
71 | }
72 |
73 | #uploader{
74 | position: relative;
75 | }
76 |
77 | #uploader input{
78 | opacity: 0;
79 | position: absolute;
80 | top: 0;
81 | left: 0;
82 | width: 100px;
83 | height: 35px;
84 | }
85 |
86 | #uploader span{
87 | position: absolute;
88 | top: 15px;
89 | left: 0;
90 | background: #6c43b6;
91 | color: #fff;
92 | width: 100px;
93 | text-align: center;
94 | line-height: 35px;
95 | box-shadow: 1px 1px 1px rgba(70, 75, 150, 0.6);
96 | cursor: pointer;
97 | height: 35px;
98 | }
--------------------------------------------------------------------------------
/packages/react/src/component/editor-user/editor-user.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import TopTip from 'base/top-tip/top-tip'
4 |
5 | import {getUser, update} from 'api/user'
6 | import {adminAuth} from "hoc/auth/auth"
7 |
8 | import './editor-user.css'
9 |
10 | @adminAuth
11 | class EditorUser extends React.Component {
12 |
13 | constructor(props) {
14 | super(props)
15 | this.state = {
16 | qq: this.props.match.params.qq,
17 | msg: '',
18 | name: '',
19 | desc: '',
20 | level: ''
21 | }
22 | }
23 |
24 | componentDidMount() {
25 | this.loadUser()
26 | }
27 |
28 | loadUser() {
29 | getUser('', 0, this.state.qq).then(res => {
30 | if (res.data.code === 200) {
31 | this.setState(res.data.result)
32 | }
33 | })
34 | }
35 |
36 | handleChange(key, val) {
37 | this.setState({
38 | [key]: val
39 | })
40 | }
41 |
42 | handleClick() {
43 | update(this.state).then(res => {
44 | this.setState({
45 | msg: res.data.msg
46 | })
47 | setTimeout(() => {
48 | this.setState({
49 | msg: ''
50 | })
51 | }, 5000)
52 | })
53 | }
54 |
55 | render() {
56 | return (
57 |
58 | {this.state.msg ?
: null}
59 |
60 |
88 |
144 | {this.state.msg ?
: null}
145 | {this.state.per ?
{this.state.per + '%'}
: null}
146 |
147 |
148 |
{this.state.text}视频
149 |
170 |
171 |
32 |
33 | - 控制台
34 |
35 | {this.props.state.level >= 2 ?
36 |
37 | - 撰写
38 | : null}
39 | {this.props.state.level >= 3 ?
40 | - 管理
41 |
42 |
43 | - 审核稿件
44 |
45 |
46 | - 管理稿件
47 |
48 |
49 | - 管理用户
50 |
51 |
52 |
53 | : null}
54 | -
55 | 退出
56 |
57 |
58 | -
59 | 网站首页
60 |
61 |
62 |
63 |
64 | )
65 | }
66 |
67 | }
68 |
69 | export default Header
--------------------------------------------------------------------------------
/packages/react/src/component/login/login.css:
--------------------------------------------------------------------------------
1 | .login {
2 | width: 280px;
3 | position: absolute;
4 | top: 50%;
5 | left: 50%;
6 | transform: translate(-50%, -50%);
7 | }
8 |
9 | .login li {
10 | padding: 8px 0;
11 | text-align: center;
12 | }
13 |
14 | .login li input {
15 | padding: 10px;
16 | width: 100%;
17 | box-sizing: border-box;
18 | box-shadow: 1px 1px 1px rgba(70, 75, 150, 0.2);
19 | border: 0px;
20 | }
21 |
22 | .login li button{
23 | background: #7e5fd9;
24 | width: 100%;
25 | border: 0px;
26 | box-shadow: 1px 1px 1px rgba(60, 32, 105, 0.6);
27 | padding: 10px;
28 | color: #fff;
29 | cursor: pointer;
30 | }
31 | .login li a{
32 | text-align: center;
33 | }
34 |
35 | .login h1{
36 | color: #7e5fd9;
37 | font-size: 40px;
38 | padding: 10px;
39 | }
--------------------------------------------------------------------------------
/packages/react/src/component/login/login.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import {Link, withRouter} from 'react-router-dom'
4 |
5 | import {map} from 'smox'
6 | import {handleForm} from "hoc/handle-form/handle-form"
7 | import TopTip from 'base/top-tip/top-tip'
8 |
9 | import './login.css'
10 |
11 | @map({
12 | state: ['isAuth', 'msg', 'bg'],
13 | actions: ['onLogin']
14 | })
15 | @handleForm
16 | @withRouter
17 | class Login extends React.Component {
18 |
19 | onKeyUp(e) {
20 | if (e.keyCode === 13) {
21 | this.onLogin()
22 | }
23 | }
24 |
25 | onLogin() {
26 | this.props.onLogin(this.props.state)
27 | }
28 |
29 | render() {
30 | return (
31 |
32 | {this.props.isAuth ? setTimeout(() => {
33 | this.props.history.push('/')
34 | }, 2000) : null}
35 | {this.props.msg ?
: null}
36 |
37 |
50 |
50 |
51 | 待审核
52 | 已下架
53 | 已发布
54 |
55 |
56 | )
57 | }
58 |
59 | componentDidMount() {
60 | this.refresh()
61 | }
62 | }
63 |
64 | export default PostList
--------------------------------------------------------------------------------
/packages/react/src/component/register/register.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {register} from "api/user"
3 | import {handleForm} from "hoc/handle-form/handle-form"
4 |
5 | import TopTip from '../../base/top-tip/top-tip'
6 | import '../login/login.css'
7 |
8 | @handleForm
9 | class Home extends React.Component {
10 | constructor(props) {
11 | super(props)
12 | this.state = {
13 | msg: '',
14 | bg: ''
15 | }
16 |
17 | this.onRegister = this.onRegister.bind(this)
18 |
19 | }
20 |
21 | onRegister() {
22 | if (!this.props.state.name || !this.props.state.pwd || !this.props.state.repeatPwd || !this.props.state.qq) {
23 | this.setState({
24 | msg: '都要填写都要填(〃＞皿＜)！',
25 | bg: '#ef736e'
26 | })
27 | setTimeout(() => {
28 | this.setState({
29 | msg: ''
30 | })
31 | }, 4500)
32 | return
33 | }
34 | register(this.props.state).then(res => {
35 | if (res.status === 200 && res.data.code === 201) {
36 | this.setState({
37 | msg: res.data.msg,
38 | bg: '#b4d896'
39 | })
40 | setTimeout(() => {
41 | this.props.history.push('/login')
42 | }, 2000)
43 | } else {
44 | this.setState({
45 | msg: res.data.msg,
46 | bg: '#ef736e'
47 | })
48 | }
49 | })
50 |
51 | }
52 |
53 | onKeyUp(e) {
54 | if (e.keyCode === 13) {
55 | this.onRegister()
56 | }
57 | }
58 |
59 | render() {
60 | return (
61 |
62 | {this.state.msg ?
: null}
63 |
64 |
84 |
41 |
42 |
43 |
44 |
欢迎！{this.state.user.name} sama~
45 |
uid : {this.state.user.id}
46 |
47 | 快速开始：
48 | {this.props.state.level > 1 ?
49 | 投稿
50 | : null}
51 | {this.props.state.level > 1 ? 查看稿件 : null}
52 | 设置
53 |
54 |
31 |
32 | 用户
33 | 作者
34 | 审核
35 |
36 |
37 |
38 | {this.props.location.pathname === '/users/user' ?
39 |
40 | :
41 | this.state.users.map((item) => {
42 | const qq = `http://q2.qlogo.cn/headimg_dl?dst_uin=` + item.qq + `&spec=100`
43 | return (
44 | -
45 |
46 |
47 |
{item.name}
48 |
49 |
50 | )
51 | })}
52 |
53 |
{this.state.msg ?
: null}
136 |
137 |
{this.state.text}稿件
138 |
this.handleChange('title', e.target.value)} />
141 |
this.changeMde(content)}
142 | value={this.state.content} defaultValue={this.state.defaultValue} />
143 |
149 |
150 |
158 |
166 | {this.props.location.pathname === '/write-article' ? null : this.handleChange('time', e.target.value)} />}
168 |
169 |
170 | {tags.map((item, index) => - this.selectTag(item)} key={index}
171 | className={this.state.tag.indexOf(item) > -1 ? 'active' : ''}>{item}
)}
172 |
173 |
176 |
177 |
178 |
179 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/react/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDom from 'react-dom'
3 | import {BrowserRouter} from 'react-router-dom'
4 |
5 |
6 | import App from './app'
7 |
8 | import './common/style/reset.css'
9 | import './common/style/index.css'
10 | import './common/style/iconfont.css'
11 |
12 | import {store} from './store/index'
13 | import {Provider} from 'smox'
14 |
15 |
16 | ReactDom.render((
17 |
18 |
19 |
20 |
21 |
22 |
23 | ), document.getElementById('app'))
24 |
25 |
--------------------------------------------------------------------------------
/packages/react/src/store/actions.js:
--------------------------------------------------------------------------------
1 | import {login, logout} from "api/user"
2 |
3 | export default {
4 | onLogin({commit}, user) {
5 | if (!user.name || !user.pwd) {
6 | commit('errMsg', '都要填都要填！')
7 | setTimeout(() => {
8 | commit('errMsg', '')
9 | }, 4500)
10 | }
11 | return login(user).then(res => {
12 | commit('errMsg', '')
13 | if (res.status === 200) {
14 | commit('login', res.data)
15 | } else {
16 | commit('errMsg', res.data.msg)
17 | setTimeout(() => {
18 | commit('errMsg', '')
19 | }, 4500)
20 | }
21 | })
22 | },
23 | onLogout({commit}) {
24 | return logout().then(res => {
25 | if (res.data.code === 200) {
26 | commit('logout', res.data)
27 | setTimeout(() => {
28 | commit('errMsg', '')
29 | }, 4500)
30 | }
31 | })
32 | }
33 |
34 | }
--------------------------------------------------------------------------------
/packages/react/src/store/index.js:
--------------------------------------------------------------------------------
1 | import { Store } from 'smox'
2 | import state from './state'
3 | import mutations from './mutations'
4 | import actions from './actions'
5 |
6 | export const store = new Store({
7 | state,
8 | mutations,
9 | actions
10 | })
11 |
--------------------------------------------------------------------------------
/packages/react/src/store/mutations.js:
--------------------------------------------------------------------------------
1 | export default {
2 | login(state, data) {
3 | state.msg = data.msg
4 | state.isAuth = true
5 | state.bg = '#b4d896'
6 | },
7 | errMsg(state, msg) {
8 | state.msg = msg
9 | state.bg = '#ef736e'
10 | },
11 | logout(state) {
12 | state.isAuth = false
13 | state.msg = '退出成功啦'
14 | state.bg = '#b4d896'
15 | }
16 | }
--------------------------------------------------------------------------------
/packages/react/src/store/state.js:
--------------------------------------------------------------------------------
1 | export default {
2 | isAuth: false,
3 | redirectTo: '',
4 | bg: '',
5 | msg: '',
6 | user:{}
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
3 | const MiniCssExtractPlugin = require("mini-css-extract-plugin")
4 | const webpack = require('webpack')
5 |
6 | module.exports = {
7 | entry: './src/index.js',
8 | output: {
9 | path: path.resolve(__dirname, 'dist'),
10 | filename: '[name].js',
11 | publicPath:'/'
12 | },
13 | resolve: {
14 | alias: {
15 | component: path.resolve(__dirname, 'src/component'),
16 | common: path.resolve(__dirname, 'src/common'),
17 | api: path.resolve(__dirname, 'src/api'),
18 | base: path.resolve(__dirname, 'src/base'),
19 | store: path.resolve(__dirname, 'src/store'),
20 | hoc: path.resolve(__dirname, 'src/hoc')
21 | }
22 | },
23 | module: {
24 | rules: [
25 | {
26 | test: /\.js$/,
27 | exclude: /node_modules/,
28 | use: {
29 | loader: 'babel-loader'
30 | }
31 | },
32 | {
33 | test: /\.css$/,
34 | use: [
35 | MiniCssExtractPlugin.loader,
36 | "css-loader"
37 | ]
38 |
39 | },
40 | {
41 | test: /\.(png|jpg|gif)$/,
42 | use: [
43 | {
44 | loader: 'url-loader',
45 | options: {
46 | limit: 8192,
47 | name: 'static/img/[name].[ext]'
48 | }
49 | }
50 | ]
51 | }
52 | ]
53 | },
54 | optimization: {
55 | splitChunks: {
56 | chunks: 'all'
57 | },
58 | runtimeChunk: false,
59 | minimize:false
60 | },
61 | plugins: [
62 | new webpack.HotModuleReplacementPlugin(),
63 | new HtmlWebpackPlugin({
64 | template: './src/index.html'
65 | }),
66 | new MiniCssExtractPlugin({
67 | filename: "[name].css"
68 | }),
69 | ],
70 | devServer: {
71 | headers: {'Access-Control-Allow-Origin': '*'},
72 | contentBase: path.join(__dirname, "dist"),
73 | compress: true,
74 | port: 1122,
75 | historyApiFallback: true,
76 | hot: true,
77 | proxy: {
78 | '/api/*': {
79 | pathRewrite: {'^/api': ''},
80 | target: 'https://api.clicli.cc'
81 | }
82 | }
83 | }
84 | }
--------------------------------------------------------------------------------
/pnpm-lock.yaml:
--------------------------------------------------------------------------------
1 | lockfileVersion: 5.3
2 |
3 | importers:
4 |
5 | .:
6 | specifiers:
7 | react: ^0.0.0-experimental-1314299c7-20210901
8 | react-dom: ^0.0.0-experimental-1314299c7-20210901
9 | dependencies:
10 | react: 0.0.0-experimental-1314299c7-20210901
11 | react-dom: 0.0.0-experimental-1314299c7-20210901_e51ce3ac058c0d2f1ad274f789274e97
12 |
13 | packages/create-nfes:
14 | specifiers:
15 | '@ctrip/nfes': workspace:^1.0.0
16 | dependencies:
17 | '@ctrip/nfes': link:../nfes
18 |
19 | packages/nfes:
20 | specifiers:
21 | '@types/node': ^16.7.12
22 | esbuild: ^0.12.25
23 | esbuild-register: ^3.0.0
24 | fs-extra: ^10.0.0
25 | polka: ^0.5.2
26 | dependencies:
27 | fs-extra: 10.0.0
28 | polka: 0.5.2
29 | devDependencies:
30 | '@types/node': 16.7.12
31 | esbuild: 0.12.25
32 | esbuild-register: 3.0.0_esbuild@0.12.25
33 |
34 | packages:
35 |
36 | /@arr/every/1.0.1:
37 | resolution: {integrity: sha512-UQFQ6SgyJ6LX42W8rHCs8KVc0JS0tzVL9ct4XYedJukskYVWTo49tNiMEK9C2HTyarbNiT/RVIRSY82vH+6sTg==}
38 | engines: {node: '>=4'}
39 | dev: false
40 |
41 | /@polka/url/0.5.0:
42 | resolution: {integrity: sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==}
43 | dev: false
44 |
45 | /@types/node/16.7.12:
46 | resolution: {integrity: sha512-IrhrusVM9QJAn1xLFFqbZH+XCI8L6eZoVHjR4sZeGTBBvjQSuchXGgKpown1jP75TCMSndcbudYBDTekOhcIZA==}
47 | dev: true
48 |
49 | /esbuild-register/3.0.0_esbuild@0.12.25:
50 | resolution: {integrity: sha512-No7U3ZUd6gPrrC6gqdb3XFcf2lNqzn8nvQXcgcyOl8szMVuN6YUvOplnmakxWyogI9d8SiJMl0uzBzJck+Aoxw==}
51 | peerDependencies:
52 | esbuild: '>=0.12 <1'
53 | dependencies:
54 | esbuild: 0.12.25
55 | jsonc-parser: 3.0.0
56 | dev: true
57 |
58 | /esbuild/0.12.25:
59 | resolution: {integrity: sha512-woie0PosbRSoN8gQytrdCzUbS2ByKgO8nD1xCZkEup3D9q92miCze4PqEI9TZDYAuwn6CruEnQpJxgTRWdooAg==}
60 | hasBin: true
61 | requiresBuild: true
62 | dev: true
63 |
64 | /fs-extra/10.0.0:
65 | resolution: {integrity: sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==}
66 | engines: {node: '>=12'}
67 | dependencies:
68 | graceful-fs: 4.2.8
69 | jsonfile: 6.1.0
70 | universalify: 2.0.0
71 | dev: false
72 |
73 | /graceful-fs/4.2.8:
74 | resolution: {integrity: sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==}
75 | dev: false
76 |
77 | /js-tokens/4.0.0:
78 | resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
79 | dev: false
80 |
81 | /jsonc-parser/3.0.0:
82 | resolution: {integrity: sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==}
83 | dev: true
84 |
85 | /jsonfile/6.1.0:
86 | resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
87 | dependencies:
88 | universalify: 2.0.0
89 | optionalDependencies:
90 | graceful-fs: 4.2.8
91 | dev: false
92 |
93 | /loose-envify/1.4.0:
94 | resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
95 | hasBin: true
96 | dependencies:
97 | js-tokens: 4.0.0
98 | dev: false
99 |
100 | /matchit/1.1.0:
101 | resolution: {integrity: sha512-+nGYoOlfHmxe5BW5tE0EMJppXEwdSf8uBA1GTZC7Q77kbT35+VKLYJMzVNWCHSsga1ps1tPYFtFyvxvKzWVmMA==}
102 | engines: {node: '>=6'}
103 | dependencies:
104 | '@arr/every': 1.0.1
105 | dev: false
106 |
107 | /object-assign/4.1.1:
108 | resolution: {integrity: sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=}
109 | engines: {node: '>=0.10.0'}
110 | dev: false
111 |
112 | /polka/0.5.2:
113 | resolution: {integrity: sha512-FVg3vDmCqP80tOrs+OeNlgXYmFppTXdjD5E7I4ET1NjvtNmQrb1/mJibybKkb/d4NA7YWAr1ojxuhpL3FHqdlw==}
114 | dependencies:
115 | '@polka/url': 0.5.0
116 | trouter: 2.0.1
117 | dev: false
118 |
119 | /react-dom/0.0.0-experimental-1314299c7-20210901_e51ce3ac058c0d2f1ad274f789274e97:
120 | resolution: {integrity: sha512-hKxIBZb0oZYUoFaDuhcwIG+Xtk/3bkd+Jtuf0KXakKKFGVrPTR77S9sJDW2mTqADDP+5oKHm8vYONE0Ua3z38Q==}
121 | peerDependencies:
122 | react: 0.0.0-experimental-1314299c7-20210901
123 | dependencies:
124 | loose-envify: 1.4.0
125 | object-assign: 4.1.1
126 | react: 0.0.0-experimental-1314299c7-20210901
127 | scheduler: 0.0.0-experimental-1314299c7-20210901
128 | dev: false
129 |
130 | /react/0.0.0-experimental-1314299c7-20210901:
131 | resolution: {integrity: sha512-A7oXsm7J0SerEWEwt5j6No3jDFaWAhgBerhwSWh2Si81opJb4UpgQ8LfgtLoHItK3VFlVySH2WCViKAVbOzbNQ==}
132 | engines: {node: '>=0.10.0'}
133 | dependencies:
134 | loose-envify: 1.4.0
135 | object-assign: 4.1.1
136 | dev: false
137 |
138 | /scheduler/0.0.0-experimental-1314299c7-20210901:
139 | resolution: {integrity: sha512-ZE2wFqqPnGL2d4GRgZ/0AEwBSpg7fHOe+nY5dZFI/RpjDZmKN+13/Yldn/sM5Fz0SyqliqmMy4vQzyb+ndBi5g==}
140 | dependencies:
141 | loose-envify: 1.4.0
142 | object-assign: 4.1.1
143 | dev: false
144 |
145 | /trouter/2.0.1:
146 | resolution: {integrity: sha512-kr8SKKw94OI+xTGOkfsvwZQ8mWoikZDd2n8XZHjJVZUARZT+4/VV6cacRS6CLsH9bNm+HFIPU1Zx4CnNnb4qlQ==}
147 | engines: {node: '>=6'}
148 | dependencies:
149 | matchit: 1.1.0
150 | dev: false
151 |
152 | /universalify/2.0.0:
153 | resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
154 | engines: {node: '>= 10.0.0'}
155 | dev: false
156 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | # all packages in subdirs of packages/ and components/
3 | - 'packages/**'
--------------------------------------------------------------------------------
31 |