From 1ddb65b3d06d489fb025f06a28a8b74b4c313e6d Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 23 Nov 2021 09:50:45 +0800
Subject: [PATCH 01/12] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20README?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2d1ac12b..45e7a0b7 100644
--- a/README.md
+++ b/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 在线示例 V2](http://jssdk-v2.demo.qiniu.io)
+* [JavaScript SDK 在线示例 V3](https://js-sdk-demo.qiniu.io)
 
 <!--
 本 SDK 可使开发者忽略上传底层实现细节，而更多的关注 UI 层的展现。

From f2d3d18f2eb13fdea3ceb29d8be8d97436ac1a01 Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 23 Nov 2021 10:00:41 +0800
Subject: [PATCH 02/12] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E3=80=81=E4=B8=8A=E6=8A=A5=E9=97=AE=E9=A2=98=E3=80=81=20v2=20?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E7=9A=84=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Layout/index.tsx  | 50 ++++++++++++++++++++++++++-
 site/src/components/Layout/style.less | 11 +++++-
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Layout/index.tsx b/site/src/components/Layout/index.tsx
index 6883bb10..493e93cd 100644
--- a/site/src/components/Layout/index.tsx
+++ b/site/src/components/Layout/index.tsx
@@ -3,6 +3,51 @@ import * as React from 'react'
 import qiniuLogo from './assets/logo.svg'
 import classnames from './style.less'
 
+
+function OfficialSite() {
+  return (
+    <>
+      © {new Date().getFullYear()} <a href="https://www.qiniu.com/" rel="noopener" target="_blank">七牛云</a>
+    </>
+  )
+}
+
+function Doc() {
+  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 V2Href() {
+  return (
+    <a
+      rel="noopener"
+      target="_blank"
+      href="http://jssdk-v2.demo.qiniu.io"
+    >
+      V2版本
+    </a>
+  )
+}
+
 interface IProps { }
 
 export function Layout(props: React.PropsWithChildren<IProps>) {
@@ -14,7 +59,10 @@ export function Layout(props: React.PropsWithChildren<IProps>) {
       </div>
       <footer className={classnames.footer}>
         对象存储文件上传 DEMO
-        © {new Date().getFullYear()} <a href="https://www.qiniu.com/" rel="noopener" target="_blank" >七牛云</a>
+        <OfficialSite />
+        <Doc />
+        <Issue />
+        <V2Href />
       </footer>
     </>
   )
diff --git a/site/src/components/Layout/style.less b/site/src/components/Layout/style.less
index 9575e23f..5eac34d3 100644
--- a/site/src/components/Layout/style.less
+++ b/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;
+  }
 }

From a1555c7218aaf3864a4b3942576565344534aa45 Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 23 Nov 2021 10:02:51 +0800
Subject: [PATCH 03/12] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Input/index.tsx    | 4 ++--
 site/src/components/Settings/index.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/site/src/components/Input/index.tsx b/site/src/components/Input/index.tsx
index 19968fec..ad811224 100644
--- a/site/src/components/Input/index.tsx
+++ b/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
 }
diff --git a/site/src/components/Settings/index.tsx b/site/src/components/Settings/index.tsx
index 1764bbbc..da0d6c3e 100644
--- a/site/src/components/Settings/index.tsx
+++ b/site/src/components/Settings/index.tsx
@@ -8,11 +8,11 @@ interface IProps { }
 
 export function Settings(props: IProps) {
   const setting = React.useMemo(() => utils.loadSetting(), [])
-  const [uphost, seUphost] = React.useState<string | undefined>(setting.uphost)
+  const [uphost, seUphost] = React.useState<string>(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 [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({

From a295af2b2dae498b1c9195d3198eaeb9b0aaa331 Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 23 Nov 2021 10:06:47 +0800
Subject: [PATCH 04/12] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Layout/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/site/src/components/Layout/index.tsx b/site/src/components/Layout/index.tsx
index 493e93cd..e0371e01 100644
--- a/site/src/components/Layout/index.tsx
+++ b/site/src/components/Layout/index.tsx
@@ -58,8 +58,7 @@ export function Layout(props: React.PropsWithChildren<IProps>) {
         {props.children}
       </div>
       <footer className={classnames.footer}>
-        对象存储文件上传 DEMO
-        <OfficialSite />
+        对象存储文件上传 DEMO <OfficialSite />
         <Doc />
         <Issue />
         <V2Href />

From 101b5f04a525d0ee47739de9001abc63a720dc2a Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 23 Nov 2021 10:08:20 +0800
Subject: [PATCH 05/12] =?UTF-8?q?deadline=20=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E4=B8=8D=E4=BD=BF=E7=94=A8=E4=B8=8A=E6=AC=A1=E7=9A=84=E5=AD=98?=
 =?UTF-8?q?=E5=82=A8=E6=97=B6=E9=97=B4=EF=BC=88=E5=AE=B9=E6=98=93=E8=BF=87?=
 =?UTF-8?q?=E6=9C=9F=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Settings/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Settings/index.tsx b/site/src/components/Settings/index.tsx
index da0d6c3e..80b5b14a 100644
--- a/site/src/components/Settings/index.tsx
+++ b/site/src/components/Settings/index.tsx
@@ -8,8 +8,9 @@ interface IProps { }
 
 export function Settings(props: IProps) {
   const setting = React.useMemo(() => utils.loadSetting(), [])
+
+  const [deadline, setDeadline] = React.useState<number>(0)
   const [uphost, seUphost] = React.useState<string>(setting.uphost || '')
-  const [deadline, setDeadline] = React.useState<number>(setting.deadline || 0)
   const [assessKey, setAssessKey] = React.useState<string>(setting.assessKey || '')
   const [secretKey, setSecretKey] = React.useState<string>(setting.secretKey || '')
   const [bucketName, setBucketName] = React.useState<string>(setting.bucketName || '')

From 05671eb2cc5631a0df3560bba4d7a793394316ab Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 23 Nov 2021 10:10:43 +0800
Subject: [PATCH 06/12] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E7=9A=84=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 45e7a0b7..d728f81c 100644
--- a/README.md
+++ b/README.md
@@ -40,8 +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 在线示例 V2](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 层的展现。

From d9b270ca9c662b499cc082ac329fab3017c807f5 Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 23 Nov 2021 10:11:12 +0800
Subject: [PATCH 07/12] =?UTF-8?q?=E6=9B=B4=E5=A5=BD=E7=9A=84=E5=91=BD?=
 =?UTF-8?q?=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Layout/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Layout/index.tsx b/site/src/components/Layout/index.tsx
index e0371e01..640ed9ba 100644
--- a/site/src/components/Layout/index.tsx
+++ b/site/src/components/Layout/index.tsx
@@ -12,7 +12,7 @@ function OfficialSite() {
   )
 }
 
-function Doc() {
+function OfficialDoc() {
   return (
     <a
       rel="noopener"
@@ -36,7 +36,7 @@ function Issue() {
   )
 }
 
-function V2Href() {
+function V2Link() {
   return (
     <a
       rel="noopener"
@@ -59,9 +59,9 @@ export function Layout(props: React.PropsWithChildren<IProps>) {
       </div>
       <footer className={classnames.footer}>
         对象存储文件上传 DEMO <OfficialSite />
-        <Doc />
+        <OfficialDoc />
         <Issue />
-        <V2Href />
+        <V2Link />
       </footer>
     </>
   )

From 1bbb55c8f1df891dcda4128b4fb62d071303f8e7 Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 23 Nov 2021 10:16:43 +0800
Subject: [PATCH 08/12] =?UTF-8?q?=E4=BC=98=E5=8C=96=20html=20template?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/webpack.config.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/site/webpack.config.js b/site/webpack.config.js
index 03766b9c..1bfda858 100644
--- a/site/webpack.config.js
+++ b/site/webpack.config.js
@@ -5,6 +5,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',
@@ -71,7 +85,7 @@ module.exports = {
 
   plugins: [
     new HtmlWebpackPlugin({
-      templateContent: '<!DOCTYPE html><html><body><div id="root"></div></body></html>',
+      templateContent: htmlTemp,
       inject: 'head'
     }),
     new HotModuleReplacementPlugin(),

From 3a19bd76025c8b23ef76db30b85bdd06862ddef5 Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 23 Nov 2021 10:31:28 +0800
Subject: [PATCH 09/12] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=B1=95=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/App/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/App/index.tsx b/site/src/components/App/index.tsx
index 2cc1cca7..3b4addfb 100644
--- a/site/src/components/App/index.tsx
+++ b/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])

From 3d2d857a1131aeb327cc8bdb3b03ea47407dd3fd Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 23 Nov 2021 10:39:55 +0800
Subject: [PATCH 10/12] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E5=A4=9A=E4=BD=99?=
 =?UTF-8?q?=E7=9A=84=E7=A9=BA=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Layout/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/components/Layout/index.tsx b/site/src/components/Layout/index.tsx
index 640ed9ba..a589a973 100644
--- a/site/src/components/Layout/index.tsx
+++ b/site/src/components/Layout/index.tsx
@@ -3,7 +3,6 @@ import * as React from 'react'
 import qiniuLogo from './assets/logo.svg'
 import classnames from './style.less'
 
-
 function OfficialSite() {
   return (
     <>

From f082f47f971d1bcc1dfecbe6d9cc3bad84039e7d Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 23 Nov 2021 10:40:27 +0800
Subject: [PATCH 11/12] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=20OfficialSit?=
 =?UTF-8?q?e=20=3D>=20Copyright?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Layout/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Layout/index.tsx b/site/src/components/Layout/index.tsx
index a589a973..b82dd58a 100644
--- a/site/src/components/Layout/index.tsx
+++ b/site/src/components/Layout/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import qiniuLogo from './assets/logo.svg'
 import classnames from './style.less'
 
-function OfficialSite() {
+function Copyright() {
   return (
     <>
       © {new Date().getFullYear()} <a href="https://www.qiniu.com/" rel="noopener" target="_blank">七牛云</a>
@@ -57,7 +57,7 @@ export function Layout(props: React.PropsWithChildren<IProps>) {
         {props.children}
       </div>
       <footer className={classnames.footer}>
-        对象存储文件上传 DEMO <OfficialSite />
+        对象存储文件上传 DEMO <Copyright />
         <OfficialDoc />
         <Issue />
         <V2Link />

From 08e5a1527e53076eec31e6dd2b4d0b11d9e14176 Mon Sep 17 00:00:00 2001
From: yinxulai <yinxulai@hotmail.com>
Date: Tue, 30 Nov 2021 18:00:11 +0800
Subject: [PATCH 12/12] =?UTF-8?q?=20=E4=BF=AE=E5=A4=8D=E5=88=86=E7=89=87?=
 =?UTF-8?q?=E8=BF=87=E5=A4=9A=E5=AF=BC=E8=87=B4=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=BA=A2=E5=87=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Queue/item.tsx   |  5 ++++-
 site/src/components/Queue/style.less | 11 ++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Queue/item.tsx b/site/src/components/Queue/item.tsx
index b310c534..ac84b324 100644
--- a/site/src/components/Queue/item.tsx
+++ b/site/src/components/Queue/item.tsx
@@ -93,12 +93,15 @@ function ProgressBar(props: { progress: UploadProgress | null }) {
     return []
   }, [props.progress])
 
+  // 一行以内就需要撑开
+  const isExpanded = chunks.length < 18
+
   return (
     <ul className={classnames.progressBar}>
       {chunks.map((chunk, index) => {
         const cacheName = chunk.fromCache ? classnames.cachedChunk : ''
         return (
-          <li key={index}>
+          <li key={index} className={isExpanded ? classnames.expanded : ''}>
             <span className={cacheName} style={{ width: chunk.percent + '%' }}>
             </span>
           </li>
diff --git a/site/src/components/Queue/style.less b/site/src/components/Queue/style.less
index 9cc87850..398d7b8d 100644
--- a/site/src/components/Queue/style.less
+++ b/site/src/components/Queue/style.less
@@ -64,18 +64,23 @@
   position: relative;
 
   display: flex;
+  flex-wrap: wrap;
   flex-direction: row;
   align-items: center;
 
   list-style: none;
   padding-inline-start: 0;
 
-  li {
+  .expanded {
     flex: 1;
+  }
+
+  li {
+    margin: 1px;
     padding: 1px;
-    margin: 0 1px;
+    min-width: 4px;
     border-radius: 2px;
-    border:#333 solid 1px;
+    border: #333 solid 1px;
 
     span {
       height: 10px;