feat: support local storage (#1383)

* feat: support local storage

* update

* update

* update

* update

web/src/components/Settings/StorageSection.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useGlobalStore } from "../../store/module";
 import * as api from "../../helpers/api";
 import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
+import showUpdateLocalStorageDialog from "../UpdateLocalStorageDialog";
 import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 
@@ -27,10 +28,6 @@ const StorageSection = () => {
   };
 
   const handleActiveStorageServiceChanged = async (storageId: StorageId) => {
-    if (storageList.length === 0) {
-      return;
-    }
-
     await api.upsertSystemSetting({
       name: "storageServiceId",
       value: JSON.stringify(storageId),
@@ -70,6 +67,7 @@ const StorageSection = () => {
         }}
       >
         <Option value={0}>Database</Option>
+        <Option value={-1}>Local</Option>
         {storageList.map((storage) => (
           <Option key={storage.id} value={storage.id}>
             {storage.name}
@@ -84,6 +82,26 @@ const StorageSection = () => {
         </button>
       </div>
       <div className="mt-2 w-full flex flex-col">
+        <div className="py-2 w-full border-t last:border-b flex flex-row items-center justify-between">
+          <div className="flex flex-row items-center">
+            <p className="ml-2">Local</p>
+          </div>
+          <div className="flex flex-row items-center">
+            <Dropdown
+              actionsClassName="!w-28"
+              actions={
+                <>
+                  <button
+                    className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
+                    onClick={() => showUpdateLocalStorageDialog(systemStatus.localStoragePath)}
+                  >
+                    Edit
+                  </button>
+                </>
+              }
+            />
+          </div>
+        </div>
         {storageList.map((storage) => (
           <div key={storage.id} className="py-2 w-full border-t last:border-b flex flex-row items-center justify-between">
             <div className="flex flex-row items-center">