release: v1.2.2-beta

.browserslistrc

@@ -0,0 +1,10 @@
+# Browsers that we support
+
+ios 10.3
+Android > 67
+
+last 2 version
+> 1% in CN
+
+not dead
+not IE > 0

babel.config.js

@@ -0,0 +1,31 @@
+const presets = [
+ ["@babel/env", {
+ "debug": process.env.NODE_ENV === "production",
+ "modules": false,
+ }],
+ "@babel/react",
+ "@babel/typescript",
+]
+
+const plugins = [
+ ["@babel/plugin-transform-runtime"],
+ ["@babel/plugin-proposal-class-properties", {
+ "loose": true
+ }],
+ ["transform-imports", {
+ "@material-ui/core": {
+ "transform": "@material-ui/core/es/${member}"
+ },
+ "lodash-es": {
+ "transform": "lodash-es/${member}"
+ }
+ }],
+ ["babel-plugin-styled-components", {
+ "ssr": false
+ }],
+]
+
+module.exports = {
+ presets,
+ plugins,
+}

config/webpack.dev.js

@@ -17,6 +17,7 @@ module.exports = merge(common, {
  devtool: 'eval-source-map',
 
  devServer: {
+ disableHostCheck: true,
  historyApiFallback: true,
  port: 9898,
  host: '0.0.0.0',

package.json

@@ -16,7 +16,7 @@
  "dependencies": {
  "@aspnet/signalr": "^1.1.0",
  "@cc98/ubb-core": "1.1.0",
- "@material-ui/core": "^3.7.0",
+ "@material-ui/core": "^3.7.1",
  "@material-ui/icons": "^3.0.1",
  "@reach/router": "^1.2.1",
  "@sentry/browser": "^4.4.2",
@@ -25,6 +25,7 @@
  "lodash-es": "^4.17.11",
  "react": "16.7.0-alpha.2",
  "react-dom": "16.7.0-alpha.2",
+ "react-spring": "^7.2.5",
  "remark": "^10.0.1",
  "remark-react": "^5.0.1",
  "styled-components": "^4.1.3",
@@ -34,6 +35,7 @@
  "devDependencies": {
  "@babel/core": "^7.2.2",
  "@babel/plugin-proposal-class-properties": "^7.2.3",
+ "@babel/plugin-transform-runtime": "^7.2.0",
  "@babel/preset-env": "^7.2.3",
  "@babel/preset-react": "^7.0.0",
  "@babel/preset-typescript": "^7.1.0",

src/@types/@cc98/IConfig.d.ts

@@ -37,7 +37,7 @@ declare module '@cc98/api' {
  /**
  * 推荐功能
  */
- recommendationFunction: Array
+ recommendationFunction: any[]
  /**
  * 推荐阅读
  */

src/UBB/handlerHub/specificTagHandlers/bili.tsx

@@ -12,20 +12,11 @@ const handler: ITagHandler<React.ReactNode> = {
  const { bili } = node.tagData
  const partNumber = parseInt(bili, 10) || 1
 
- const props = {
- border: 0,
- frameborder: 'no',
- framespacing: 0,
- allowfullscreen: true,
- }
-
  return (
  <iframe
  className="ubb-tag-bili"
- {...props}
  src={`https://player.bilibili.com/player.html?aid=${innerText}&page=${partNumber}`}
- allowFullScreen={true}
- scrolling="no"
+ allowFullScreen
  />
  )
  },

src/UBB/style.css

@@ -11,8 +11,8 @@
 
 
 .ubb-tag-bili {
- width: 80%;
- margin-left: 10%;
+ width: 90%;
+ margin-left: 5%;
  border: none;
 }
 

src/components/FixFab/index.tsx

@@ -9,21 +9,22 @@ const FabS = styled(Fab).attrs({
 })<{ bottom: number }>`
  && {
  position: fixed;
- bottom: ${props => (props.bottom ? `${props.bottom}px` : '15px')};
+ bottom: ${props => `${props.bottom}px`};
  right: 15px;
  z-index: 20;
  }
 `
 
 interface Props {
  onClick?: () => void
- bottom?: number
+ /** 次序，从 1 计数 */
+ order?: number
 }
 
-const FixFab: React.FunctionComponent<Props> = ({ onClick, bottom, children }) => (
+const FixFab: React.FunctionComponent<Props> = ({ onClick, order = 1, children }) => (
  // FIXME: waiting @types/styled-components to upgrade
  // @ts-ignore https://www.styled-components.com/docs/advanced#refs
- <FabS onClick={onClick} bottom={bottom}>
+ <FabS onClick={onClick} bottom={(order - 1) * 50 + 15}>
  {children}
  </FabS>
 )

src/components/TopicList/TopicListItem.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { navigate } from '@/utils/history'
 
@@ -91,10 +91,18 @@ interface Props {
 
 export default ({ data, place }: Props) => {
  const [boardName, setBoardName] = useState('')
-
- function getBoardName() {
- getBoardNameById(data.boardId).then(boardName => setBoardName(boardName))
- }
+ useEffect(
+ () => {
+ switch (place) {
+ case 'usercenter':
+ case 'hot':
+ case 'follow':
+ case 'search':
+ getBoardNameById(data.boardId).then(boardName => setBoardName(boardName))
+ }
+ },
+ [place]
+ )
 
  const title = data.title
  let subtitle = data.userName ? data.userName : '[匿名]'
@@ -103,26 +111,17 @@ export default ({ data, place }: Props) => {
 
  switch (place) {
  case 'usercenter':
- if (!boardName) {
- getBoardName()
- }
  subtitle = boardName
  break
 
  case 'hot':
- if (!boardName) {
- getBoardName()
- }
  info1 = boardName
  break
 
  case 'newtopic':
  info1 = dayjs(data.time).fromNow()
  case 'follow':
  case 'search':
- if (!boardName) {
- getBoardName()
- }
  info2 = boardName
  break
 

src/components/TopicList/index.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 import useInfList, { Service as InfService } from '@/hooks/useInfList'
 import useFetcher, { Service as FinService } from '@/hooks/useFetcher'
+import useDelay from '@/hooks/useDelay'
 
 import TopicList from './TopicList'
 import { Place } from './TopicListItem'
@@ -58,12 +59,19 @@ interface FinProps {
  service: FinService<ITopic[]>
  noLoading?: boolean
  place: Place
+ delay?: number
 }
 
-const FinTopicList: React.FunctionComponent<FinProps> = ({ service, noLoading, place }) => {
+const FinTopicList: React.FunctionComponent<FinProps> = ({
+ service,
+ noLoading,
+ place,
+ delay = 0,
+}) => {
  const [topics] = useFetcher(service, { fail: navigateHandler })
+ const isResolve = useDelay(delay)
 
- if (topics === null) {
+ if (topics === null || !isResolve) {
  return noLoading ? null : <LoadingCircle />
  }
 

src/config/host.ts

@@ -4,8 +4,8 @@ interface IHost {
 }
 
 const host: IHost = {
- oauth: 'https://openid.cc98.org/connect/token',
- api: 'https://api-v2.cc98.org',
+ oauth: process.env.oauth || 'https://openid.cc98.org/connect/token',
+ api: process.env.api || 'https://api-v2.cc98.org',
 }
 
 export default host

src/hooks/useDelay.ts

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react'
+
+/**
+ * 返回一个boolean
+ * 在指定的时间后其值为true
+ * @returns {boolean} 是否超过了延迟时间
+ * @param time 延迟时间
+ */
+export default function useDelay(time: number): boolean {
+ const [isResolve, setIsResolve] = useState(time <= 0)
+
+ useEffect(() => {
+ if (time <= 0) return
+ const timer = setTimeout(() => setIsResolve(true), time)
+
+ return () => clearTimeout(timer)
+ }, [])
+
+ return isResolve
+}

src/pages/Editor/Editor/MainContent.tsx

@@ -10,7 +10,7 @@ const InputArea = styled(InputBase).attrs({
  multiline: true,
  autoFocus: true,
  rows: 6,
- rowsMax: 12,
+ rowsMax: 10,
 })`
  && {
  margin-top: 8px;