feat: use tailwindcss and show export btn

web/package.json

@@ -18,12 +18,15 @@
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
     "@vitejs/plugin-react": "^1.0.0",
+    "autoprefixer": "^10.4.2",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.27.1",
     "less": "^4.1.1",
+    "postcss": "^8.4.5",
     "prettier": "2.5.1",
+    "tailwindcss": "^3.0.18",
     "typescript": "^4.3.2",
     "vite": "^2.6.14"
   },

web/postcss.config.js

+/* eslint-disable no-undef */
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

web/src/components/PreferencesSection.tsx

@@ -40,13 +40,14 @@ const PreferencesSection: React.FC<Props> = () => {
   const handleExportBtnClick = async () => {
     const formatedMemos = memoService.getState().memos.map((m) => {
       return {
-        ...m,
+        content: m.content,
+        createdAt: m.createdAt,
       };
     });
 
     const jsonStr = JSON.stringify(formatedMemos);
     const element = document.createElement("a");
-    element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(jsonStr));
+    element.setAttribute("href", "data:text/json;charset=utf-8," + encodeURIComponent(jsonStr));
     element.setAttribute("download", "data.json");
     element.style.display = "none";
     document.body.appendChild(element);
@@ -94,13 +95,13 @@ const PreferencesSection: React.FC<Props> = () => {
           <img className="icon-img" src={useTinyUndoHistoryCache ? "/icons/checkbox-active.svg" : "/icons/checkbox.svg"} />
         </label>
       </div>
-      <div className="section-container hidden">
+      <div className="section-container">
         <p className="title-text">其他</p>
-        <div className="btn-container">
-          <button className="btn export-btn" onClick={handleExportBtnClick}>
+        <div className="w-full flex flex-row justify-start items-center">
+          <button className="px-2 py-1 border rounded text-base hover:opacity-80" onClick={handleExportBtnClick}>
             导出数据(JSON)
           </button>
-          <button className="btn format-btn" onClick={handleFormatMemosBtnClick}>
+          <button className="btn format-btn hidden" onClick={handleFormatMemosBtnClick}>
             格式化数据
           </button>
         </div>

web/src/css/index.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;

web/src/less/global.less

@@ -60,7 +60,6 @@ img {
   background-color: transparent;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
-  border: none;
   outline: none;
 }
 

web/src/main.tsx

@@ -6,6 +6,7 @@ import appStore from "./stores/appStore";
 import App from "./App";
 import "./helpers/polyfill";
 import "./less/global.less";
+import "./css/index.css";
 
 ReactDOM.render(
   <React.StrictMode>

web/tailwind.config.js

+/* eslint-disable no-undef */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{js,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};