p90524618
/
answer
mirror of https://gitee.com/answerdev/answer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #361 from answerdev/feat/1.1.0/ui 

Feat/1.1.0/UI
This commit is contained in:
haitao.jarvis 2023-05-19 13:26:40 +08:00 committed by GitHub
parent bb89db35c4 c63267713c
commit bb6e8629e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 178 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
ui/public/index.html
View File

@ -3,13 +3,14 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#0033FF" />
<meta name="theme-color" />
<meta name="generator" content="Answer - https://github.com/answerdev/answer">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div id="spin-mask">
<noscript>
<style>
@ -17,7 +18,7 @@
display: none !important;
}
#protect-brower {
#protect-browser {
display: none;
}
</style>
@ -54,7 +55,7 @@
animation: 0.75s linear infinite _doc-spin;
}
#protect-brower {
#protect-browser {
padding: 20px;
text-align: center;
}
@ -62,8 +63,9 @@
<div id="spin-container">
<div class="spinner"></div>
</div>
<div id="protect-brower"></div>
<div id="protect-browser"></div>
</div>
</div>
</body>
<script>
@ -91,20 +93,20 @@
name: 'IE',
}
];
function getBrowerTypeAndVersion(){
var brower = {
function getBrowserTypeAndVersion(){
var browser = {
name: '',
version: ''
};
var ua = navigator.userAgent.toLowerCase();
var s;
((ua.indexOf("compatible") > -1 && ua.indexOf("MSIE") > -1) || (ua.indexOf('Trident') > -1 && ua.indexOf("rv:11.0") > -1)) ? brower = { name: 'IE', version: '' } :
(s = ua.match(/edge\/([\d\.]+)/)) ? brower = { name: 'Edge', version: s[1] } :
(s = ua.match(/firefox\/([\d\.]+)/)) ? brower = { name: 'Firefox', version: s[1] } :
(s = ua.match(/chrome\/([\d\.]+)/)) ? brower = { name: 'Chrome', version: s[1] } :
(s = ua.match(/version\/([\d\.]+).*safari/)) ? brower = { name: 'Safari', version: s[1] } : brower = { name: 'unknown', version: '' };
((ua.indexOf("compatible") > -1 && ua.indexOf("MSIE") > -1) || (ua.indexOf('Trident') > -1 && ua.indexOf("rv:11.0") > -1)) ? browser = { name: 'IE', version: '' } :
(s = ua.match(/edge\/([\d\.]+)/)) ? browser = { name: 'Edge', version: s[1] } :
(s = ua.match(/firefox\/([\d\.]+)/)) ? browser = { name: 'Firefox', version: s[1] } :
(s = ua.match(/chrome\/([\d\.]+)/)) ? browser = { name: 'Chrome', version: s[1] } :
(s = ua.match(/version\/([\d\.]+).*safari/)) ? browser = { name: 'Safari', version: s[1] } : browser = { name: 'unknown', version: '' };
// 根据关系进行判断
return brower;
return browser;
}
function compareVersion(version1, version2) {
@ -129,25 +131,23 @@
return 0;
}
const browerInfo = getBrowerTypeAndVersion();
const browserInfo = getBrowserTypeAndVersion();
if (browerInfo.name === 'IE') {
const div = document.getElementById('protect-brower');
if (browserInfo.name === 'IE') {
const div = document.getElementById('protect-browser');
div.innerText = 'Sorry, this site does not support Internet Explorer. In order to avoid affecting the normal use of our features, please use a more modern browser such as Edge, Firefox, Chrome, or Safari.'
} else {
const notSupport = defaultList.some(item => {
if (item.name === browerInfo.name) {
return compareVersion(browerInfo.version, item.version) === -1;
if (item.name === browserInfo.name) {
return compareVersion(browserInfo.version, item.version) === -1;
}
return false;
});
if (notSupport) {
const div = document.getElementById('protect-brower');
const div = document.getElementById('protect-browser');
div.innerText = 'The current browser version is too low, in order not to affect the normal use of the function, please upgrade the browser to the latest version.'
}
}
</script>
</html>

2
ui/src/common/constants.ts
View File

@ -8,6 +8,8 @@ export const CAPTCHA_CODE_STORAGE_KEY = '_a_captcha_';
export const DRAFT_QUESTION_STORAGE_KEY = '_a_dq_';
export const DRAFT_ANSWER_STORAGE_KEY = '_a_da_';
export const DRAFT_TIMESIGH_STORAGE_KEY = '|_a_t_s_|';
export const QUESTIONS_ORDER_STORAGE_KEY = '_a_qok_';
export const USER_AGENT_NAMES = {
SegmentFault: 'SegmentFault',
WeChat: 'WeChat',

15
ui/src/components/CustomizeTheme/index.tsx
View File

@ -1,4 +1,4 @@
import { FC } from 'react';
import { FC, useLayoutEffect } from 'react';
import { Helmet } from 'react-helmet-async';
import Color from 'color';
@ -11,10 +11,17 @@ const Index: FC = () => {
let primaryColor;
if (theme_config?.[theme]?.primary_color) {
primaryColor = Color(theme_config[theme].primary_color);
document
.querySelector('meta[name="theme-color"]')
?.setAttribute('content', primaryColor.hex());
}
const setThemeColor = () => {
const themeMetaNode = document.querySelector('meta[name="theme-color"]');
if (themeMetaNode) {
const themeColor = primaryColor ? primaryColor.hex() : '#0033ff';
themeMetaNode.setAttribute('content', themeColor);
}
};
useLayoutEffect(() => {
setThemeColor();
}, [primaryColor]);
return (
<Helmet>

13
ui/src/components/PageTags/index.tsx
View File

@ -2,6 +2,7 @@ import { FC, useEffect, useLayoutEffect } from 'react';
import { Helmet } from 'react-helmet-async';
import { brandingStore, pageTagStore, siteInfoStore } from '@/stores';
import { getCurrentLang } from '@/utils/localize';
const doInsertCustomCSS = !document.querySelector('link[href*="custom.css"]');
@ -32,7 +33,19 @@ const Index: FC = () => {
// eslint-disable-next-line no-empty
} catch (ex) {}
};
const currentLang = getCurrentLang();
const setDocLang = () => {
if (currentLang) {
document.documentElement.setAttribute(
'lang',
currentLang.replace('_', '-'),
);
}
};
useEffect(() => {
setDocLang();
}, [currentLang]);
useEffect(() => {
setAppGenerator();
}, [appVersion]);

19
ui/src/components/QuestionList/index.tsx
View File

@ -3,8 +3,8 @@ import { ListGroup } from 'react-bootstrap';
import { NavLink, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import type { QuestionOrderBy } from '@/common/interface';
import { pathFactory } from '@/router/pathFactory';
import type * as Type from '@/common/interface';
import {
Tag,
Pagination,
@ -16,25 +16,32 @@ import {
Counts,
Icon,
} from '@/components';
import * as Type from '@/common/interface';
const QuestionOrderKeys: Type.QuestionOrderBy[] = [
export const QUESTION_ORDER_KEYS: Type.QuestionOrderBy[] = [
'active',
'newest',
'frequent',
'score',
'unanswered',
];
interface Props {
source: 'questions' | 'tag';
order?: QuestionOrderBy;
data;
isLoading: boolean;
}
const QuestionList: FC<Props> = ({ source, data, isLoading = false }) => {
const QuestionList: FC<Props> = ({
source,
order,
data,
isLoading = false,
}) => {
const { t } = useTranslation('translation', { keyPrefix: 'question' });
const [urlSearchParams] = useSearchParams();
const curOrder = urlSearchParams.get('order') || QuestionOrderKeys[0];
const curOrder =
order || urlSearchParams.get('order') || QUESTION_ORDER_KEYS[0];
const curPage = Number(urlSearchParams.get('page')) || 1;
const pageSize = 20;
const count = data?.count || 0;
@ -47,7 +54,7 @@ const QuestionList: FC<Props> = ({ source, data, isLoading = false }) => {
: t('x_questions', { count })}
</h5>
<QueryGroup
data={QuestionOrderKeys}
data={QUESTION_ORDER_KEYS}
currentSort={curOrder}
pathname={source === 'questions' ? '/questions' : ''}
i18nKeyPrefix="question"

12
ui/src/pages/Questions/index.tsx
View File

@ -17,7 +17,9 @@ import {
} from '@/stores';
import { useQuestionList } from '@/services';
import * as Type from '@/common/interface';
import { userCenter, floppyNavigation } from '@/utils';
import { userCenter, floppyNavigation, Storage } from '@/utils';
import { QUESTIONS_ORDER_STORAGE_KEY } from '@/common/constants';
import { QUESTION_ORDER_KEYS } from '@/components/QuestionList';
const Questions: FC = () => {
const { t } = useTranslation('translation', { keyPrefix: 'question' });
@ -25,7 +27,12 @@ const Questions: FC = () => {
const { user: loggedUser } = loggedUserInfoStore((_) => _);
const [urlSearchParams] = useSearchParams();
const curPage = Number(urlSearchParams.get('page')) || 1;
const curOrder = urlSearchParams.get('order') || 'active';
const storageOrder = Storage.get(QUESTIONS_ORDER_STORAGE_KEY);
const curOrder =
urlSearchParams.get('order') || storageOrder || QUESTION_ORDER_KEYS[0];
if (curOrder !== storageOrder) {
Storage.set(QUESTIONS_ORDER_STORAGE_KEY, curOrder);
}
const reqParams: Type.QueryQuestionsReq = {
page_size: 20,
page: curPage,
@ -50,6 +57,7 @@ const Questions: FC = () => {
<QuestionList
source="questions"
data={listData}
order={curOrder}
isLoading={listLoading}
/>
</Col>

123
ui/template/header.html
View File

@ -3,8 +3,9 @@
<html lang="{{.lang}}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>{{.title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" />
<meta name="description" content="{{.description}}" data-rh="true" />
<meta name="generator" content="Answer {{.Version}} - https://github.com/answerdev/answer version {{.Revision}}">
{{if .keywords }}<meta name="keywords" content="{{.keywords}}" data-rh="true" />{{end}}
@ -37,19 +38,23 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div id="spin-mask" hidden>
<script>
try {
document.querySelector('#spin-mask').removeAttribute('hidden');
} catch (ex) {}
</script>
<div id="spin-mask">
<noscript>
<style>
#spin-mask {
display: none !important;
}
#protect-browser {
display: none;
}
</style>
</noscript>
<style>
@keyframes _doc-spin {
to {
transform: rotate(360deg);
}
to { transform: rotate(360deg) }
}
#spin-mask {
position: fixed;
@ -71,17 +76,23 @@
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: -0.125em;
border: 0.25rem solid currentColor;
vertical-align: -.125em;
border: .25rem solid currentColor;
border-right-color: transparent;
color: rgba(108, 117, 125, 0.75);
color: rgba(108, 117, 125, .75);
border-radius: 50%;
animation: 0.75s linear infinite _doc-spin;
}
#protect-browser {
padding: 20px;
text-align: center;
}
</style>
<div id="spin-container">
<div class="spinner"></div>
</div>
<div id="protect-browser"></div>
</div>
<nav id="header" class="sticky-top navbar navbar-expand-lg navbar-dark">
@ -119,6 +130,90 @@
</div>
</nav>
<div class="position-relative page-wrap">{{end}}</div>
</div>
</body>
<script>
/**
* @description: Prompt that the browser version is too low
*/
const defaultList = [
{
name: 'Edge',
version: '100'
},
{
name: 'Firefox',
version: '100'
},
{
name: 'Chrome',
version: '90'
},
{
name: 'Safari',
version: '15'
},
{
name: 'IE',
}
];
function getBrowserTypeAndVersion(){
var browser = {
name: '',
version: ''
};
var ua = navigator.userAgent.toLowerCase();
var s;
((ua.indexOf("compatible") > -1 && ua.indexOf("MSIE") > -1) || (ua.indexOf('Trident') > -1 && ua.indexOf("rv:11.0") > -1)) ? browser = { name: 'IE', version: '' } :
(s = ua.match(/edge\/([\d\.]+)/)) ? browser = { name: 'Edge', version: s[1] } :
(s = ua.match(/firefox\/([\d\.]+)/)) ? browser = { name: 'Firefox', version: s[1] } :
(s = ua.match(/chrome\/([\d\.]+)/)) ? browser = { name: 'Chrome', version: s[1] } :
(s = ua.match(/version\/([\d\.]+).*safari/)) ? browser = { name: 'Safari', version: s[1] } : browser = { name: 'unknown', version: '' };
// 根据关系进行判断
return browser;
}
function compareVersion(version1, version2) {
var v1 = version1.split('.');
var v2 = version2.split('.');
var len = Math.max(v1.length, v2.length);
while (v1.length < len) {
v1.push('0');
}
while (v2.length < len) {
v2.push('0');
}
for (var i = 0; i < len; i++) {
var num1 = parseInt(v1[i]);
var num2 = parseInt(v2[i]);
if (num1 >= num2) {
return 1;
} else if (num1 < num2) {
return -1;
}
}
return 0;
}
const browserInfo = getBrowserTypeAndVersion();
if (browserInfo.name === 'IE') {
const div = document.getElementById('protect-browser');
div.innerText = 'Sorry, this site does not support Internet Explorer. In order to avoid affecting the normal use of our features, please use a more modern browser such as Edge, Firefox, Chrome, or Safari.'
} else {
const notSupport = defaultList.some(item => {
if (item.name === browserInfo.name) {
return compareVersion(browserInfo.version, item.version) === -1;
}
return false;
});
if (notSupport) {
const div = document.getElementById('protect-browser');
div.innerText = 'The current browser version is too low, in order not to affect the normal use of the function, please upgrade the browser to the latest version.'
}
}
</script>
</html>