2 |
3 | ## t-nav
4 |
5 | Out-of-the-box open-source navigation project.
6 |
7 | ## Tech stack
8 |
9 | - react17+
10 | - antd5.0+
11 | - umi4.0+
12 | - xijs
13 | - qrcode
14 | - weixin js sdk
15 | - pnpm
16 |
17 | ## run
18 |
19 | install pkg:
20 | ```
21 | yarn
22 | ```
23 |
24 | run local:
25 |
26 | ```
27 | yarn start
28 | ```
29 |
30 | config file need deal, like server config.
31 |
32 | ## Design philosophy
33 |
34 | Configuration takes precedence.
35 |
36 | ## Background services
37 |
38 | Since the backend is not a core service, you can choose the language you are familiar with, if you want to get the backend code, please contact the author.
39 |
40 | [xuxiaoxi](https://github.com/MrXujiang)
41 |
42 | ## Partner project
43 |
44 | * [h5-dooring - 零代码解决方案](https://github.com/MrXujiang/h5-Dooring)
45 | * [ react-cropper-pro - 轻量强大的图片上传/裁切/压缩组件](https://github.com/MrXujiang/react-cropper-pro)
46 | * [mitu-editor - 轻量级且强大的图片编辑器](https://github.com/H5-Dooring/mitu-editor)
47 | * [powerNice - 一款轻量级文档管理编辑器](http://h5.dooring.cn/powernice/views)
48 | * [rc-drag - 基于react的轻量级拖拽缩放组件](https://github.com/MrXujiang/rc-drag)
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "author": "xujiang
115 |
116 |
142 |
143 |
145 |
163 |
164 |
188 |
189 |
190 |
311 |
312 |
313 |
117 | 
118 | 工具导航 Ctrl + D 收藏网站
119 |
120 |
121 |
123 |
124 |
141 |
125 |
129 |
130 |
134 |
135 |
139 |
140 |
96 |
,
98 | okText: '确认'
99 | });
100 | }else {
101 | history.push(`/h5?id=${id}`)
102 | }
103 | }
104 |
105 | useEffect(() => {
106 | if(
107 | (type === 'online' && ((!sub_type || !curTab) || curTab !== sub_type))
108 | ||
109 | (type !== 'online' && curTab !== type)
110 | ) return
111 | getListApi({
112 | ...pager,
113 | type,
114 | sub_type: sub_type === 'all' ? '' : sub_type,
115 | keyword
116 | }).then(res => {
117 | const { data: { list, total } } = res;
118 | setList(list);
119 | setTotal(total);
120 | })
121 |
122 | }, [pager, keyword, refresh])
123 |
124 |
125 | return
126 |
192 | })
--------------------------------------------------------------------------------
/src/pages/index.less:
--------------------------------------------------------------------------------
1 | .home {
2 | display: flex;
3 | margin: 16px 80px;
4 | @media screen and (max-width: 500px){
5 | margin: 16px;
6 | }
7 | .list {
8 | flex: 1;
9 | }
10 | .cors {
11 | margin-top: 124px;
12 | padding: 16px 16px 0;
13 | width: 180px;
14 | min-height: 180px;
15 | border-radius: 6px;
16 | background-color: #fff;
17 | align-self: flex-start;
18 | .corTitle {
19 | padding-bottom: 10px;
20 | text-align: center;
21 | }
22 | .cor {
23 | height: 46px;
24 | margin-top: 6px;
25 | margin-bottom: 6px;
26 | text-align: center;
27 | img {
28 | width: 100%;
29 | height: 100%;
30 | object-fit: contain;
31 | }
32 | }
33 | }
34 | @media screen and (max-width: 1150px){
35 | .cors {
36 | display: none;
37 | }
38 | }
39 | @media screen and (max-width: 800px){
40 | .list {
41 | width: 100%;
42 | }
43 | }
44 | }
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { Tabs, Button, Modal } from 'antd';
3 | import Preson from '../assets/preson.png';
4 | import ListCard from './components/CardList';
5 | import { types } from '@/utils/config';
6 | import Qt from '@/assets/qt.png';
7 | import Cx from '@/assets/cx.png';
8 | import Dr from '@/assets/dr.png';
9 | import styles from './index.less';
10 |
11 | export default function HomePage() {
12 | const [type, setType] = useState('online');
13 | const [sub_type, setSubType] = useState('all');
14 | const handleTabChange = (activeKey: string) => {
15 | setType(activeKey)
16 | }
17 | const handleSubTabChange = (activeKey: string) => {
18 | setSubType(activeKey)
19 | }
20 | return (
21 |
127 | {
128 | list.map(v => {
129 | return
177 | {
178 | !!total &&
179 |
130 |
162 | })
163 | }
164 |
165 | {
166 | !list.length &&
167 |
131 | 
-1 ? v.index - 1 : 0]?.url} alt={v.title} />
132 |
133 |
134 |
161 | handleNewPage(v.url)}>{ v.title }
135 |
136 | {
137 | v.tags.map((v, i) => {
138 | return { v }
139 | })
140 | }
141 |
142 | { v.desc }
143 |
144 | { formatDate(+v.ct, 'YY-MM-DD') }
145 |
146 |
160 |
147 | handleNewPage(v.url)}>
159 |
168 |
174 | }
175 |
176 |
180 | `总数: ${total} 条`}
185 | onChange={handlePageChange}
186 | onShowSizeChange={handlePageSizeChange}
187 | />
188 |
189 | }
190 | { contextHolder }
191 |
22 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/src/pages/midPage.less:
--------------------------------------------------------------------------------
1 | .midPage {
2 | padding-top: 120px;
3 | text-align: center;
4 | }
--------------------------------------------------------------------------------
/src/pages/midPage.tsx:
--------------------------------------------------------------------------------
1 | import { Progress } from 'antd';
2 | import { useEffect, useState } from 'react';
3 | import { url2obj } from 'xijs';
4 | import styles from './midPage.less';
5 |
6 | const MidPage = (props) => {
7 | const [curProgress, setCurProgress] = useState(0);
8 | useEffect(() => {
9 | const timer = setInterval(() => {
10 | setCurProgress(prev => {
11 | if(prev >= 100) {
12 | clearInterval(timer)
13 | const params = url2obj(window.location.search);
14 | window.location.href = params.url;
15 | }
16 | return prev + 10
17 | })
18 | }, 100)
19 | }, [])
20 | return (
21 |
23 | {
27 | return {
28 | label: v.text,
29 | key: v.key,
30 | children: v.sub ? {
34 | return {
35 | label: v.text,
36 | key: v.key,
37 | children:
45 |
46 | 
48 | 
49 | 
50 |
61 | 优质合作媒体
47 |
51 |
59 |
60 |
22 |
27 |
31 | );
32 | };
33 |
34 | export default MidPage;
35 |
--------------------------------------------------------------------------------
/src/pages/share.less:
--------------------------------------------------------------------------------
1 | .sharePage {
2 | background-color: #1677ff;
3 | height: 100vh;
4 | width: 100%;
5 | display: flex;
6 | flex-wrap: wrap;
7 | justify-content: center;
8 | .card {
9 | padding: 12px;
10 | max-width: 600px;
11 | width: calc(100% - 56px);
12 | align-self: start;
13 | margin: 20px 28px;
14 | background-color: #fff;
15 | border-radius: 8px;
16 | .title {
17 | font-size: 18px;
18 | font-weight: bold;
19 | }
20 | .tags {
21 | margin-top: 10px;
22 | margin-bottom: 10px;
23 | }
24 | .imgBoxs {
25 | div {
26 | overflow: hidden;
27 | border-radius: 6px;
28 | height: 160px;
29 | width: 100%;
30 | img {
31 | width: 100%;
32 | height: 100%;
33 | object-fit: contain;
34 | }
35 | }
36 | }
37 | .desc {
38 | margin-top: 10px;
39 | margin-bottom: 10px;
40 | word-break: break-all;
41 | }
42 | .rate {
43 | margin-bottom: 10px;
44 | }
45 | .controlArea {
46 | text-align: center;
47 | padding-top: 10px;
48 | padding-bottom: 6px;
49 | }
50 | .more {
51 | margin-top: 30px;
52 | text-align: center;
53 | }
54 |
55 | }
56 | footer {
57 | position: absolute;
58 | bottom: 20px;
59 | width: 100%;
60 | color: #f0f0f0;
61 | text-align: center;
62 | font-size: 12px;
63 | a {
64 | color: #f0f0f0;
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/src/pages/share.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Tag, Carousel, Rate, Divider, Spin } from 'antd';
2 | import { useEffect, useState } from 'react';
3 | import { history } from 'umi';
4 | import { url2obj, formatDate, isPc } from 'xijs';
5 | import wx from 'weixin-js-sdk';
6 | import { getDetailApi, getWxConfigApi } from '@/api';
7 | import codeJpg from '../assets/xx.jpeg';
8 | import styles from './share.less';
9 |
10 | const contentStyle: React.CSSProperties = {
11 | height: '160px',
12 | color: '#fff',
13 | lineHeight: '160px',
14 | textAlign: 'center',
15 | background: '#364d79',
16 | };
17 |
18 | const SharePage = (props) => {
19 | const { id } = url2obj(location.search);
20 | const [detail, setDetail] = useState({});
21 |
22 | const wxShare = (obj, callback) => {
23 | let url = window.location.href.split('#')[0]
24 |
25 | if (obj) {
26 | var title = !obj.title ? '橙讯点评软件分享' : obj.title
27 | var link = !obj.link ? window.location.href : obj.link
28 | var desc = !obj.desc ? '每天分享优质软件工具' : obj.desc
29 | var imgUrl = !obj.imgUrl ? 'https://turntip.cn/cxzk/static/image/cxzk_logo_a.png' : obj.imgUrl
30 | var debug = obj.debug == true
31 | } else {
32 | alert('请传分享参数')
33 | }
34 |
35 | getWxConfigApi(url).then(res => {
36 | let wxConf = res.data;
37 | wx.config({
38 | debug: false,
39 | appId: wxConf.appId,
40 | timestamp: wxConf.timestamp,
41 | nonceStr: wxConf.nonceStr,
42 | signature: wxConf.signature,
43 | jsApiList: wxConf.jsApiList
44 | })
45 | wx.ready(function () {
46 | // 分享给朋友
47 | wx.updateAppMessageShareData({
48 | title: title, // 分享标题
49 | desc: desc, // 分享描述
50 | link: link, // 分享链接
51 | imgUrl: imgUrl, // 分享图标
52 | type: '', // 分享类型,music、video或link，不填默认为link
53 | dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
54 | success: function () {
55 | // 用户确认分享后执行的回调函数
56 | callback && callback()
57 | }
58 | })
59 |
60 | // 分享到朋友圈
61 | wx.updateTimelineShareData({
62 | title: title, // 分享标题
63 | link: link, // 分享链接
64 | desc: desc, // 分享描述
65 | imgUrl: imgUrl, // 分享图标
66 | success: function () {
67 | callback && callback()
68 | }
69 | })
70 | })
71 | })
72 | }
73 |
74 | useEffect(() => {
75 | getDetailApi(id).then(res => {
76 | const { data } = res;
77 | setDetail(data);
78 | if (!isPc()) {
79 | wxShare({
80 | title: data.title, // 分享标题
81 | desc: data.desc, // 分享描述
82 | link: window.location.href, // 分享链接
83 | imgUrl: data.icon && data.icon[0] && data.icon[0].url
84 | //debug:true
85 | }, function () { });
86 | }
87 | })
88 | }, [])
89 |
90 | return (
91 | !detail.title ?
28 | 小橙正在为您加速跳转中...
29 |
30 |
93 |
139 | );
140 | };
141 |
142 | export default SharePage;
143 |
--------------------------------------------------------------------------------
/src/utils/config.ts:
--------------------------------------------------------------------------------
1 | const sub_types = [
2 | {
3 | key: 'all',
4 | text: '全部'
5 | },
6 | {
7 | key: 'code',
8 | text: '程序员必备'
9 | },
10 | {
11 | key: 'docs',
12 | text: '文档编辑'
13 | },
14 | {
15 | key: 'page-mark',
16 | text: '页面制作'
17 | },
18 | {
19 | key: 'flow-mark',
20 | text: '思维导图'
21 | },
22 | {
23 | key: 'image',
24 | text: '图片处理'
25 | },
26 | {
27 | key: 'media',
28 | text: '音视频处理'
29 | },
30 | {
31 | key: 'useful',
32 | text: '实用查询'
33 | },
34 | {
35 | key: 'compute',
36 | text: '全能计算器'
37 | },
38 | {
39 | key: 'convert',
40 | text: '文件转换'
41 | },
42 | {
43 | key: 'saas',
44 | text: '企业Saas'
45 | },
46 | {
47 | key: 'opensource',
48 | text: '开源产品'
49 | }
50 | ];
51 |
52 | const types = [
53 | {
54 | key: 'online',
55 | text: ' 在线工具',
56 | sub: sub_types
57 | },
58 | {
59 | key: 'software',
60 | text: '桌面软件'
61 | },
62 | {
63 | key: 'mobile',
64 | text: '手机精选APP'
65 | }
66 | ];
67 |
68 | export {
69 | sub_types,
70 | types
71 | }
--------------------------------------------------------------------------------
/src/utils/req.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import { message } from 'antd'
3 |
4 | export const getToken = () => localStorage.getItem('token');
5 | export const setToken = (token: string) => localStorage.setItem('token', token)
6 |
7 | const instance = axios.create({
8 | baseURL: `${serverApi}/api/v0/mark`,
9 | timeout: 10000,
10 | // withCredentials: true
11 | });
12 |
13 | // 添加请求拦截器
14 | instance.interceptors.request.use(function (config: any) {
15 | // 在发送请求之前做些什么
16 | config.headers = {
17 | 'x-requested-with': 'mark',
18 | 'Authorization': `Bearer ${getToken()}`,
19 | }
20 | return config;
21 | }, function (error) {
22 | // 对请求错误做些什么
23 | return Promise.reject(error);
24 | });
25 |
26 | // 添加响应拦截器
27 | instance.interceptors.response.use(function (response) {
28 | // 对响应数据做点什么
29 | if(response.headers['x-show-msg'] === 'cxzk_msg_200') {
30 | message.success(response.data.msg, 2);
31 | }
32 | return response.data;
33 | }, function (error) {
34 | // 对响应错误做点什么
35 | const { response } = error;
36 | if(response && response.status === 404) {
37 | message.error('请求资源未发现');
38 | }else if(response.status === 403) {
39 | message.error(response.data.msg);
40 | }else {
41 | message.error(response.data.msg);
42 | }
43 | return Promise.reject(error);
44 | });
45 |
46 |
47 |
48 | export default instance
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./src/.umi/tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
/typings.d.ts:
--------------------------------------------------------------------------------
1 | import 'umi/typings';
2 |
3 | declare const serverApi: string;
4 |
--------------------------------------------------------------------------------
94 |
137 |
138 | { detail.title }
95 |
96 | {
97 | detail.tags.map(v => {
98 | return { v }
99 | })
100 | }
101 |
102 |
103 |
104 | {
105 | detail.img.map((v, i) => {
106 | return
112 |
113 |
107 | 
108 |
109 | })
110 | }
111 |
114 | { detail.desc }
115 |
116 |
117 | 评分:
119 |
120 | 投稿时间: { formatDate(detail.ct, 'YY/MM/DD hh:mm:ss') }
121 |
122 |
123 |
126 |
129 |
130 |
131 |
132 |
136 | 更多精彩
132 |
133 | 
134 |
135 |