site 细节优化 (#543)

* 更新 README

* 添加文档、上报问题、 v2 版本的底部导航

* 设置实现优化

* 优化底部导航布局

* deadline 初始化不使用上次的存储时间（容易过期）

* 优化文档示例的位置

* 更好的命名

* 优化 html template

* 设置卡片默认展开

* 移除多余的空行

* 重命名 OfficialSite => Copyright

Author: yinxulai

README.md

@@ -40,7 +40,8 @@ Qiniu-JavaScript-SDK 为客户端 SDK，没有包含 `token` 生成实现，为
 
 Qiniu-JavaScript-SDK 的示例 [Demo](http://jssdk-v2.demo.qiniu.io) 中的服务器端部分是基于 [Node.js 服务器端 SDK](https://developer.qiniu.com/kodo/sdk/nodejs) 开发的。
 
-* [JavaScript SDK 在线示例](http://jssdk-v2.demo.qiniu.io/)
+* [JavaScript SDK 在线示例 V3](https://js-sdk-demo.qiniu.io)
+* [JavaScript SDK 在线示例 V2](http://jssdk-v2.demo.qiniu.io)
 
 <!--
 本 SDK 可使开发者忽略上传底层实现细节，而更多的关注 UI 层的展现。

site/src/components/App/index.tsx

@@ -10,7 +10,7 @@ import classnames from './style.less'
 
 export const App = () => {
   const [fileList, setFileList] = React.useState<UniqueFile[]>([])
-  const [settingVisible, setSettingVisible] = React.useState(false)
+  const [settingVisible, setSettingVisible] = React.useState(true)
 
   const selectFile = (file: UniqueFile) => {
     setFileList(files => [file, ...files])

site/src/components/Input/index.tsx

@@ -3,8 +3,8 @@ import * as React from 'react'
 import classnames from './style.less'
 
 interface IProps {
-  value: string | undefined
-  onChange(v: string | undefined): void
+  value: string
+  onChange(v: string): void
 
   placeholder?: string | undefined
 }

site/src/components/Layout/index.tsx

@@ -3,6 +3,50 @@ import * as React from 'react'
 import qiniuLogo from './assets/logo.svg'
 import classnames from './style.less'
 
+function Copyright() {
+  return (
+    <>
+      © {new Date().getFullYear()} <a href="https://www.qiniu.com/" rel="noopener" target="_blank">七牛云</a>
+    </>
+  )
+}
+
+function OfficialDoc() {
+  return (
+    <a
+      rel="noopener"
+      target="_blank"
+      href="http://developer.qiniu.com/code/v6/sdk/javascript.html"
+    >
+      官方文档
+    </a>
+  )
+}
+
+function Issue() {
+  return (
+    <a
+      rel="noopener"
+      target="_blank"
+      href="https://github.com/qiniu/js-sdk/issues"
+    >
+      上报问题
+    </a>
+  )
+}
+
+function V2Link() {
+  return (
+    <a
+      rel="noopener"
+      target="_blank"
+      href="http://jssdk-v2.demo.qiniu.io"
+    >
+      V2版本
+    </a>
+  )
+}
+
 interface IProps { }
 
 export function Layout(props: React.PropsWithChildren<IProps>) {
@@ -13,8 +57,10 @@ export function Layout(props: React.PropsWithChildren<IProps>) {
         {props.children}
       </div>
       <footer className={classnames.footer}>
-        对象存储文件上传 DEMO
-        © {new Date().getFullYear()} <a href="https://www.qiniu.com/" rel="noopener" target="_blank" >七牛云</a>
+        对象存储文件上传 DEMO <Copyright />
+        <OfficialDoc />
+        <Issue />
+        <V2Link />
       </footer>
     </>
   )

site/src/components/Layout/style.less

@@ -19,8 +19,17 @@
   text-align: center;
 
   a {
-    color: #777;
+    color: inherit;
+    outline: none;
+  }
+
+  a:hover {
+    color: rgb(44, 178, 255);
     outline: none;
     text-decoration: none;
   }
+
+  a + a {
+    margin-left: 0.5rem;
+  }
 }

site/src/components/Settings/index.tsx

@@ -8,11 +8,12 @@ interface IProps { }
 
 export function Settings(props: IProps) {
   const setting = React.useMemo(() => utils.loadSetting(), [])
-  const [uphost, seUphost] = React.useState<string | undefined>(setting.uphost)
-  const [deadline, setDeadline] = React.useState<number>(setting.deadline || 0)
-  const [assessKey, setAssessKey] = React.useState<string | undefined>(setting.assessKey)
-  const [secretKey, setSecretKey] = React.useState<string | undefined>(setting.secretKey)
-  const [bucketName, setBucketName] = React.useState<string | undefined>(setting.bucketName)
+
+  const [deadline, setDeadline] = React.useState<number>(0)
+  const [uphost, seUphost] = React.useState<string>(setting.uphost || '')
+  const [assessKey, setAssessKey] = React.useState<string>(setting.assessKey || '')
+  const [secretKey, setSecretKey] = React.useState<string>(setting.secretKey || '')
+  const [bucketName, setBucketName] = React.useState<string>(setting.bucketName || '')
 
   React.useEffect(() => {
     utils.saveSetting({

site/webpack.config.js

@@ -4,6 +4,20 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ESLintPlugin = require('eslint-webpack-plugin')
 const WebpackBar = require('webpackbar')
 
+const htmlTemp = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <title state-data-title="">七牛云 - JS SDK 示例 V3</title>
+    <meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no">
+    <link rel="shortcut icon" href="https://qiniu.staticfile.org/favicon.ico" type="image/vnd.microsoft.icon">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`
+
 module.exports = {
   context: path.join(__dirname, 'src'),
   devtool: 'source-map',
@@ -70,7 +84,7 @@ module.exports = {
 
   plugins: [
     new HtmlWebpackPlugin({
-      templateContent: '<!DOCTYPE html><html><body><div id="root"></div></body></html>',
+      templateContent: htmlTemp,
       inject: 'head'
     }),
     new HotModuleReplacementPlugin(),