Finish the sqlite feature.

src/common/model/global/i18n/LangEn.ts

@@ -21,7 +21,8 @@ let LangEn = {
     reRun: 'ReRun',
   },
   install: {
-    configMysql: "Config MySQL",
+    configMysql: "Config Database",
+    dbType: "Database Type",
     port: "Port",
     schema: "Schema",
     username: "Username",
@@ -30,6 +31,7 @@ let LangEn = {
     mysqlConnectionPass: "Connect MySQL Ok",
     testMysqlConnection: "Tes MySQL Connection",
     notice: "Notice",
+    sqliteNotice1: "Sqlite is a tiny file database, you can use it without installation",
     mysqlNotice1: "If Mysql and EyeblueTank installed on the same server, Host is 127.0.0.1",
     mysqlNotice2: "Your mysql account must have access to create table, or the second step will fail.",
     validateMysqlFirst: "Please test the mysql connection firstly.",

src/common/model/global/i18n/LangZh.ts

@@ -21,7 +21,8 @@ let LangZh = {
     reRun: '立即重跑',
   },
   install: {
-    configMysql: "配置MySQL",
+    configMysql: "配置数据库",
+    dbType: "数据库类型",
     port: "端口",
     schema: "库名",
     username: "用户名",
@@ -30,6 +31,7 @@ let LangZh = {
     mysqlConnectionPass: "MySQL连接测试通过",
     testMysqlConnection: "测试MySQL连接",
     notice: "注意",
+    sqliteNotice1: "sqlite是一个轻量的文件数据库，无需安装即可使用",
     mysqlNotice1: "如果数据库和蓝眼云盘安装在同一台服务器，Host可以直接填写 127.0.0.1。",
     mysqlNotice2: "数据库账户的权限要求要能够创建表，否则第二步\"创建表\"操作会出错",
     validateMysqlFirst: "请首先验证数据库连接",

src/common/model/install/Install.ts

@@ -14,6 +14,9 @@ export default class Install extends BaseEntity {
   static URL_VALIDATE_ADMIN = '/api/install/validate/admin'
   static URL_FINISH = '/api/install/finish'
 
+  //数据库类型
+  dbType: string = "mysql"
+
   //数据库名
   mysqlPort: number = 3306
   mysqlHost: string = "127.0.0.1"
@@ -52,6 +55,7 @@ export default class Install extends BaseEntity {
 
   getMysqlForm() {
     return {
+      dbType: this.dbType,
       mysqlHost: this.mysqlHost,
       mysqlPort: this.mysqlPort,
       mysqlSchema: this.mysqlSchema,
@@ -63,6 +67,7 @@ export default class Install extends BaseEntity {
 
   getForm() {
     return {
+      dbType: this.dbType,
       mysqlPort: this.mysqlPort,
       mysqlHost: this.mysqlHost,
       mysqlSchema: this.mysqlSchema,

src/pages/dashboard/Index.tsx

@@ -252,7 +252,9 @@ export default class Index extends TankComponent<IProps, IState> {
   refreshActiveIpTop10() {
     let that = this
     that.dashboard.httpActiveIpTop10(function (data: any) {
-      that.activeIpTop10 = data
+      if (data) {
+        that.activeIpTop10 = data
+      }
       that.updateUI()
     })
   }
@@ -410,7 +412,7 @@ export default class Index extends TankComponent<IProps, IState> {
           </Col>
 
 
-          <Col  xs={24} sm={24} md={12} lg={12}>
+          <Col xs={24} sm={24} md={12} lg={12}>
 
             <div className="figure-block">
               <div className="title">

src/pages/install/widget/MysqlPanel.tsx

@@ -38,6 +38,7 @@ export default class MysqlPanel extends TankComponent<IProps, IState> {
     let that = this
     let install: Install = this.props.install
 
+    install.dbType = values["dbType"]
     install.mysqlHost = values["mysqlHost"]
     install.mysqlPort = values["mysqlPort"]
     install.mysqlSchema = values["mysqlSchema"]
@@ -67,18 +68,31 @@ export default class MysqlPanel extends TankComponent<IProps, IState> {
   goToNext() {
     let that = this
     let install: Install = this.props.install
+    let useMysql = this.useMysql();
+    if (!useMysql) {
+      install.verified = true
+    }
 
     if (install.verified) {
-
       this.props.onNextStep()
-
     } else {
       MessageBoxUtil.error(Lang.t("install.validateMysqlFirst"))
-
     }
 
   }
 
+  useMysql(): boolean {
+    let that = this;
+
+    let install: Install = this.props.install
+    let dbType = install.dbType
+    if (that.formRef && that.formRef.current) {
+      dbType = that.formRef.current!.getFieldValue("dbType")
+      install.dbType = dbType
+    }
+
+    return dbType === "mysql"
+  }
 
   render() {
 
@@ -91,6 +105,9 @@ export default class MysqlPanel extends TankComponent<IProps, IState> {
       wrapperCol: {span: 18},
     };
 
+
+    let useMysql: boolean = this.useMysql()
+
     return (
       <div className="widget-mysql-panel">
 
@@ -105,75 +122,111 @@ export default class MysqlPanel extends TankComponent<IProps, IState> {
           }}
         >
           <Form.Item
-            label="MySQL host"
-            name="mysqlHost"
-            initialValue={install.mysqlHost}
-            rules={[{required: true, message: Lang.t("inputRequired")}]}
-          >
-            <Input/>
-          </Form.Item>
-
-          <Form.Item
-            label={Lang.t("install.port")}
-            name="mysqlPort"
-            initialValue={install.mysqlPort}
-            rules={[{required: true, message: Lang.t("inputRequired")}]}
-          >
-            <Input/>
-          </Form.Item>
-
-
-          <Form.Item
-            label={Lang.t("install.schema")}
-            name="mysqlSchema"
-            initialValue={install.mysqlSchema}
-            rules={[{required: true, message: Lang.t("inputRequired")}]}
-          >
-            <Input/>
-          </Form.Item>
-
-
-          <Form.Item
-            label={Lang.t("install.username")}
-            name="mysqlUsername"
-            initialValue={install.mysqlUsername}
-            rules={[{required: true, message: Lang.t("inputRequired")}]}
-          >
-            <Input/>
-          </Form.Item>
-
-
-          <Form.Item
-            label={Lang.t("install.password")}
-            name="mysqlPassword"
-            initialValue={install.mysqlPassword}
-            rules={[{required: true, message: Lang.t("inputRequired")}]}
-          >
-            <Input.Password/>
-          </Form.Item>
-
-          <Form.Item
-            label={Lang.t("install.charset")}
-            name="mysqlCharset"
-            initialValue={install.mysqlCharset}
+            label={Lang.t("install.dbType")}
+            name="dbType"
+            initialValue={install.dbType}
             rules={[{required: true, message: Lang.t("inputRequired")}]}
           >
             <Select>
-              <Select.Option value="utf8">utf8</Select.Option>
-              <Select.Option value="utf8mb4">utf8mb4</Select.Option>
-              <Select.Option value="gbk">gbk</Select.Option>
+              <Select.Option value={"mysql"}>mysql</Select.Option>
+              <Select.Option value={"sqlite"}>sqlite</Select.Option>
             </Select>
           </Form.Item>
 
+          {
+            useMysql && (<Form.Item
+              label="MySQL host"
+              name="mysqlHost"
+              initialValue={install.mysqlHost}
+              rules={[{required: useMysql, message: Lang.t("inputRequired")}]}
+            >
+              <Input/>
+            </Form.Item>)
+          }
+
+
+          {
+            useMysql && (<Form.Item
+              label={Lang.t("install.port")}
+              name="mysqlPort"
+              initialValue={install.mysqlPort}
+              rules={[{required: useMysql, message: Lang.t("inputRequired")}]}
+            >
+              <Input/>
+            </Form.Item>)
+          }
+
+
+          {
+            useMysql && (<Form.Item
+              label={Lang.t("install.schema")}
+              name="mysqlSchema"
+              initialValue={install.mysqlSchema}
+              rules={[{required: useMysql, message: Lang.t("inputRequired")}]}
+            >
+              <Input/>
+            </Form.Item>)
+          }
+
+
+          {
+            useMysql && (<Form.Item
+              label={Lang.t("install.username")}
+              name="mysqlUsername"
+              initialValue={install.mysqlUsername}
+              rules={[{required: useMysql, message: Lang.t("inputRequired")}]}
+            >
+              <Input/>
+            </Form.Item>)
+          }
+
+
+          {
+            useMysql && (<Form.Item
+              label={Lang.t("install.password")}
+              name="mysqlPassword"
+              initialValue={install.mysqlPassword}
+              rules={[{required: useMysql, message: Lang.t("inputRequired")}]}
+            >
+              <Input.Password/>
+            </Form.Item>)
+          }
+
+
+          {
+            useMysql && (<Form.Item
+              label={Lang.t("install.charset")}
+              name="mysqlCharset"
+              initialValue={install.mysqlCharset}
+              rules={[{required: useMysql, message: Lang.t("inputRequired")}]}
+            >
+              <Select>
+                <Select.Option value="utf8">utf8</Select.Option>
+                <Select.Option value="utf8mb4">utf8mb4</Select.Option>
+                <Select.Option value="gbk">gbk</Select.Option>
+              </Select>
+            </Form.Item>)
+          }
+
+
           <div>
             <Alert
               message={<div>
                 <div><SoundOutlined/> {Lang.t("install.notice")}</div>
                 <div>
-                  <ol>
-                    <li> {Lang.t("install.mysqlNotice1")}</li>
-                    <li>{Lang.t("install.mysqlNotice2")}</li>
-                  </ol>
+                  {
+                    useMysql ? (<ol>
+                        <li> {Lang.t("install.mysqlNotice1")}</li>
+                        <li>{Lang.t("install.mysqlNotice2")}</li>
+                      </ol>
+
+                    ) : (
+                      <ol>
+                        <li> {Lang.t("install.sqliteNotice1")}</li>
+                      </ol>
+                    )
+                  }
+
                 </div>
               </div>}
               type="info"
@@ -181,10 +234,13 @@ export default class MysqlPanel extends TankComponent<IProps, IState> {
           </div>
 
           <div className="text-right mt15">
-            <Button type={install.verified ? "primary" : "default"} htmlType="submit"
-                    icon={install.verified ? <LinkOutlined/> : <DisconnectOutlined/>}>
-              {install.verified ? Lang.t("install.mysqlConnectionPass") : Lang.t("install.testMysqlConnection")}
-            </Button>
+            {
+              useMysql && (<Button type={install.verified ? "primary" : "default"} htmlType="submit"
+                                   icon={install.verified ? <LinkOutlined/> : <DisconnectOutlined/>}>
+                {install.verified ? Lang.t("install.mysqlConnectionPass") : Lang.t("install.testMysqlConnection")}
+              </Button>)
+            }
+
             <Button className={'ml10'} ghost={true} type="primary" icon={<ArrowRightOutlined/>}
                     onClick={this.goToNext.bind(this)}>
               {Lang.t("install.nextStep")}