sample pages improvement (close #757, #758) (#829)

* chore: set server address

* chore: add bce-python-sdk to requirements

* fix: limit max length of runs in chart tooltip table

* feat: add keyboard shortcuts in sample page

* feat: add image preview in image sample page

frontend/packages/core/public/locales/en/sample.json

@@ -9,5 +9,6 @@
     "sample-rate": "Sample Rate",
     "show-actual-size": "Show Actual Image Size",
     "step": "Step",
+    "step-tip": "You can change step by pressing up & donw on your keyboard",
     "text": "text"
 }

frontend/packages/core/public/locales/zh/sample.json

@@ -9,5 +9,6 @@
     "sample-rate": "采样率",
     "show-actual-size": "按真实大小展示",
     "step": "Step",
+    "step-tip": "您还可以通过键盘 ↑ ↓ 键，快速调节step哦~",
     "text": "文本"
 }

frontend/packages/core/src/App.tsx

@@ -1,7 +1,7 @@
 import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo, useState} from 'react';
 import {Redirect, Route, BrowserRouter as Router, Switch, useLocation} from 'react-router-dom';
 import {THEME, matchMedia} from '~/utils/theme';
-import {headerHeight, position, size} from '~/utils/style';
+import {headerHeight, position, size, zIndexes} from '~/utils/style';
 
 import BodyLoading from '~/components/BodyLoading';
 import ErrorBoundary from '~/components/ErrorBoundary';
@@ -27,7 +27,7 @@ const Main = styled.main`
 `;
 
 const Header = styled.header`
-    z-index: 10000;
+    z-index: ${zIndexes.header};
 
     ${size(headerHeight, '100%')}
     ${position('fixed', 0, 0, null, 0)}