From 1e9a05ca33e55acb5d942af7a5722381eb7bb484 Mon Sep 17 00:00:00 2001
From: plightfield <1207120484@qq.com>
Date: Wed, 11 Sep 2024 13:46:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=92=8C=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |   2 +
 public/logo.png                         | Bin 0 -> 3769 bytes
 src/App.vue                             |   4 +
 src/config.ts                           |   6 +
 src/db.ts                               |  39 +-----
 src/layout/header/search/SearchPage.tsx | 110 ++++++---------
 src/layout/layout.types.ts              |  25 ++--
 src/layout/sider/ModeSwitch.tsx         | 179 ++++++++++++++++++++++++
 src/layout/sider/icons.ts               | 159 +++++++++++++++++++++
 src/layout/sider/index.tsx              | 171 ++++++++++++++++++++++
 src/layout/useLayoutStore.ts            |  41 ++++--
 src/main.css                            |  24 +++-
 src/settings/SettingsButton.tsx         |   2 +-
 src/settings/SettingsOverlay.tsx        |  12 +-
 src/useRouterStore.ts                   |   2 +-
 src/user/LoginModal.tsx                 |  58 ++++++++
 src/user/UserPage.tsx                   |  20 ++-
 src/utils/ImageUploader.tsx             |   2 +-
 src/utils/request.ts                    |  57 ++++++++
 19 files changed, 772 insertions(+), 141 deletions(-)
 create mode 100644 public/logo.png
 create mode 100644 src/layout/sider/ModeSwitch.tsx
 create mode 100644 src/layout/sider/icons.ts
 create mode 100644 src/layout/sider/index.tsx
 create mode 100644 src/user/LoginModal.tsx
 create mode 100644 src/utils/request.ts

diff --git a/package.json b/package.json
index 9a1517f..cbe5b3c 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "oh-vue-icons": "^1.0.0-rc3",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.3",
+    "ua-parser-js": "^1.0.38",
     "uuid": "^10.0.0",
     "v-viewer": "^3.0.13",
     "viewerjs": "^1.11.6",
@@ -33,6 +34,7 @@
     "@tsconfig/node20": "^20.1.4",
     "@types/ali-oss": "^6.16.11",
     "@types/node": "^20.14.5",
+    "@types/ua-parser-js": "^0.7.39",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c0897a5340a8a53a6841405d3a7c6d15e8d2acc
GIT binary patch
literal 3769
zcmV;q4o2~bP)<h;3K|Lk000e1NJLTq008g+0024&1^@s6jwaMV00001b5ch_0Itp)
z=>Px@b4f%&RCr$PT}xWq$QG`W`z|281hND&XmT?o-GIligk%Y131JDagfKSHHw@E|
zL9>MR5}FNQ)%}j5a%5Sm^Pf{kHi_*Ss8o+r|9@WfkawBC-~Jfydmm1nbNh8wkKX&U
zqHq^qCX>g^>X%-B^ZR&rR)kN^xt-R-s@)LW^!{dYY2B`MeQ(C&7v)oV8oWO(oV%O_
zfARIt$*pxetFCVdJiHl?cV@G29x>*<|IjtA5W>gi|Eb*F_2kS#273qNWAEKg2o=^}
zH0r#)zqxv=ZR7Rf__ST8cj3bM;^FRka>3Q>+Xbk?j+Y+WmC-~MzB~@jzw2+rpIDP=
z@8Ia44)V6Ua620LlOYrcCs5=$k@u+#pM7w<3xEsZ?C#I&PH-ai4pC;^c&N$ycZ)QV
zp*}k2-)nK$MX=?@bvS>0aCn~PkDHE4fAZyjlZU<m&k5WIs-~tHmHtCHa{C=xs8^uY
zTF|-5`Xaw9&4@IhDFXoFS@iq4;NiE!qrcmVP9t|ORF0%Lp33kEX<J%1^`GQBn}vUY
zu{@4S|F)0Ba{|}ET5v&t%E2N!4b|lxwB4js2S%lTmC{~d=d+8EY<&p3rE|wfW#m%-
zb#rxslpU(fbHIajAILSmySaXk$PD!KVpY@oo2!>dy|E0r<ft)9;o&=hd2=r5-$L2o
z-NV=Gt5@m@>KCOG8iIejuDDW4+O}-g*>~y-;NGdH6Tw4mp(tEx#+&Lk<BNz#Sm#;D
zZHIr-`4VEeS3#_Vz$AtHo2#XG8<viez^k;tRZ^;S??MQa%!>&<=@94T*KLJ|Brt*p
zA;3j)MsOi@-6htYIxDGv?H1TM$_&d~jIJ4Z{m0=)%G#o{H5&O}hfHKuiM+z?N^$~d
z-<@-h_cvF+3d)-n9hkr@9`+87C_Xf`zEMDk2S8<OH<z;CP(MZ^|MJUZGUX;hYT;7~
zXC)RGaa-6ye+&9ymrAM;x%T7p25AS%7tDL|(-N4&!|TH_c``(t<d2BxgFlNI=9+Lc
zFYP79rFy*g?~!F1i6_8~D|SMl9B(Oc3}vAOm2z@jcy8qiqLUgMN8BWIAe50TOLshw
zrS0s-Pzneg^E&accX0F>2}8OpUcKx@?{g$(y?`hyK|<@X?o;pnhq`}ch>|}vvu$F5
ziKM~%g|#Z{jU4EtS`wJz+As^}X!e+!6v6Z9Xyo4_?wFuXQPCU%=imVbcp{@*ZzdrU
zb2NeWDM*Y5XN5tF&MJa9uq*<Tl_<*MV(6tBbW#^*D}U)qlIrK6()GOFanp{OmNw03
z>dt*fLtqO$fB<(~))!Iu67Nu8g?lYKnpsD!FU|3sz{r5-tPkO=_@$t&l5D`93nY49
zn!Kt8X0VNJAOa7%)zm`XRL8pT0Jh7zzo->P6P;*%HTF8=Yt)jX$uJFp*Ro4UlaZ8Y
zu|CkF8WSYVt@r*CNt}T74O$E&k|`e0-AU-&Vz|LQHBcrrFP#bovEtI)hsXk>g0n=H
zMDw-UH365A6*lRMrChnX5U^U~0hKkHphP@3i5o3h{%L2q;jw{BQA;r}G+_pADF>YP
zb4@H(*I~8{g9<+}wx5&0#&|#oCs`i{=S_qY0Uj5uFvKsxR!=Q~p|vw9NmJ!9H>kS?
zG`>OlTYCa@kfOb)Pk8|PUuv=cXC<&H9+2HhB8v$g7?9vZmQelXo}-pq68ruT1O_!|
zFaNkqB|_Y0nYbPt|5wc1EoI<=*k(&$M%ZxtE42E++)&CBT26{X06hgNUd=mVwWYD|
z4?$pL;3-^KWTFw0b0Cpe4WzwQl!076a5oduU)V|sPniAp;OG;#jxWWDB)LhkFtV#m
zV|_`kq9m5JMdKzm$9=8_Cp-hn^{4MSM_{dX)%M5YJ%qrPctDp}q=#Y<YpGGN=z29W
z7diNNwgk>~pGk1&rgcQfOq?E)o`51bk=v)-_t!vRx>_c=zg#n)h+@#xTU%i|a>#Aj
zWTyhns&`fNYzd5NPR>1&YHU{89R>Cdj<y8W2(IxC5-w>h6}Sv3%0$m&VerreBbu!I
z$g?Fd;yzQ{Fq?(seMvdm4aMY^z^J79%OMtD8mm%kXx3PgiEfU93!ga2<c1+40!y=X
zT<80qBMFVDjkzR+X40ko-c$lx;sIGgLXQBp=Z~8oDz8=anW0{m^{w(eaj>8UG+p=W
zBMOorh?<LYwKWNfErGGU&{{%u$rrI?T5C0A-82@2J6&Vej;C4Ivm`L5jhjgaKm)QH
z-=&0=YIsfTmfNS?_YqL8n!wtn77kC9CCgY61LN%Wlw@1qYzy47l()|L3+?^8adgOn
ze$y>R%4_2rlmwiMwkZV8!2@C?wFF*;GU7tHHkK@`uZF<$o9_Eu*Ibtsu&Az0NIu~u
z+i8Omw-J79WEQ%qNOSRkSV=8`p$xZhhgTaTXtJz+&&(^7y3ikr!d*5$bJ6MBd-w25
zQQasZ{<I3G$+{E-_s-B8IyTq>o8bYml4=42mm%gRJB0*hFC;*Xh={<nw-dRmh#J>g
zV$Pa&#VTCVOS4dq3b0OMY@`LY!~>^<t4y)*s9l^x4j*+4ob??g#LBlYWnzV;1eV}h
ztYwhpqpo;X`<`epiNc#|fu-_G#eE0?v`anQN<}V#l}Rj<TVn<#u+(+sG-aPvM-o|<
zYnIzAw3NEv%BS$a%{{%ZP5dCrA;*PA-2Wbl(dBioa;~NtmcYV2z?>VE5;B(rkt!1j
zL^%tr4JRahur8Yc%HFP|vhfIkwM#u5u4)Uc+T)<LzEMcI*cg_;!pt5Q|E63hz)doV
zIl9ov5jdU;wI<n+^$kMc1Rjvp2d$OllzR?=E###2EUJD-5Lk4i1t`%sdVx4Lx#1iE
zfHsEWhytu(nk?FL{jhw#YCHh*@3iaboMF(q=egFmF<)xqVnX2dMc!rU9;9Cd<XkAu
z)j;B4(%`fVMqgQIeeRR}kaCI~TLLdiM}r4s{xquzNWIj1O@`Z2$!Wcd90E_B^B;0|
zUd5^B;uK_nh^v$!qB^0lC2%FxY&-y#Qhe+W@ysL_<wg7mtS{Y}hMXBz;ZH?itt-P=
zG3IM@{ky5?&^BEvSGsVFd{I5o50$IC=>)dI17gvnVGxiTQC<9i^fkKXg)fhT^Mujl
zkMlCSUKSJBYO<Q0LE;~pxF_#k(C0kqT?4Xq3RAOh8X&Mb#^EM?sOKm^E%AVm4e`X9
zGC{mD=?aCw`c?*^-ldg1w;uZ}O=w98tg=uX$hi2Id*AZ8RDjg>1{2s656Ja55-Wwq
zztTMdz<gJbY+^}(agnkY5m>6JP+}nq?Py)O<)kiJO<?YGn4(F^9fQUDhy}LB1LBEE
z;#DyIT{;|-k{_aE>i3tF8%lhMmmwpta9tM#65{5db!C<lCrLm8tLn`hOV;ZUfd{|?
zkjR2}WO0en%1V0o@b&uY6)G$N370m82wZPCp(Xmfs6;cM0>RxJv_^e7?f4L|ui|n&
z{m7T!M7$!cyi)x{NQYQ{^zLS)uGn9J_3ibzknvG_XsEDu0;6t@B{-vt<GrWTRq?0(
zF7KAWcC!PLgbhi+dSGi_ds_b>OG2qFpORyTNIphNVAXz6CZ=HT1Ga<5_nJ@*hqR4Y
zD@}GAX?v(L$e6TylT&?0Ju(j5U|0r+HmE}A`?P3t%$5nQwG$Y1DN>V8aZKU-WnHGS
zqyPXZ&UmT0bfDcApe@x-pP|T!)QgO12m({z5KN?&uh3Xi;y&lZzHNC+E`{g96e)qT
z4n21P2T58q-kW;wFX-<O=p)LLNZO^Uk&LDl01>cjw(2278>$R4CJtQMzM)}NpI3u~
zG}JeA#lh10Mwy^vq^x`D$l+QE48{ZMwMJkf*;onzAp&;J<wM$8Wf^2lLlGE_H@hq-
zYJJh{v!%6c&mVx#>XlTuw^jlpS_svW-PV14>|CI4`u6@TtS}POYzZt=Kd9Af<HOR`
zr5+=58$&l~NCq0Ps`@_std+okaI!5VFrnFP0OJsUgH{H2`_k*Sz^E0bq|vDKC+<IP
zI-6C>dLNJml>b1NqNqKsH-c;*t;f@OVopY2;SC!pLDt%bb};px)Q}_@`r1M?xmNhG
zO(^M-ad9{RNb@2PferD{H2~BdmJS}BZ$t)K>l^!wX5C}?cHb)kBMF~M%NR}==KtH=
z=L}e3(RyGLFeu1S&`7~JMEP~#p;rL|SHcQqFs+k9y;mNSad|4kC-h`n&fH4e=<nnF
z&Wnn`;F=i~&2~2{g)tt#n9TwmA58wN)=m*COdXNN+cnV1i+I6}1x=c8^{nFgs`0>$
z2~+l5E#ICaIS+y5t?JCdDHeV$j;*OMDgq-eV5}mivvarM_wnwms6Gpt{8?>3M75mM
zWtYf}2Ku8UvLxfOzypT^dTv2tbn}j|tt_J^Y^xSk%L1boN^%l}n-paI*O0)F#g|?_
zCl$U_L2xo0>iIhGfQ&_u@ad|Kb)Dl&LaPYx=IZK{u&pJFKTl#IS~thnZ+D*SxV6iP
zxP_>OZcOyM5W+bEzPgNhO<T~0Nzql~0qt}hwtNJ$&9Pb{FMaBVuD4--6yiOV;WHWo
z=NcM`%ihN5oWL}yR7IBLofF{T@Vx)35t{^-%x#yqDG~k<GGx)1QDD`0kaU&8BD$Q=
zg>ol#T}_V6IU{4Kl<PeaWDHXIlqE&9Kw#<+WmQ{u_)J6a@1?g)qLV=#4?dhWwB2n8
z{%nZ$NVAruBdbaG6U~>e$lCkh&$Jix)h;Jlg_Q7r80*`dyH(=>#Z6y1ve4zo?cZHb
z&T{K&y40;(OshvZ%Av1s)%|W|xf8rUZIpTR-k%kPyJ+v-Um~#8pf|A|(%9{Zt`AyV
j&;g50l*x9?!%E=)Aoiy3g;B1}00000NkvXXu0mjfVku8$

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 1ad1271..bab5a9e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,8 @@ import Background from './layout/background'
 import GLobalModal from './GlobalModal'
 import SettingsButton from './settings/SettingsButton'
 import SettingsOverlay from './settings/SettingsOverlay'
+import Sider from './layout/sider'
+import LoginModal from './user/LoginModal'
 import { computed } from 'vue'
 const settings = useSettingsStore()
 const blockSize = computed(() => settings.state.blockSize + 'rem')
@@ -19,6 +21,8 @@ const blockRadius = computed(() => settings.state.blockRadius + 'rem')
     <GLobalModal />
     <SettingsOverlay />
     <SettingsButton />
+    <Sider />
+    <LoginModal />
   </div>
 </template>
 
diff --git a/src/config.ts b/src/config.ts
index 06871f7..4dcbc19 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -8,3 +8,9 @@ export const ossKeyUrl = import.meta.env.PROD
 export const ossBase = import.meta.env.PROD
   ? 'http://btab.oss-cn-hangzhou.aliyuncs.com'
   : 'http://btab.oss-cn-hangzhou.aliyuncs.com'
+
+export const apiBase = import.meta.env.PROD
+  ? 'http://192.168.110.28:8300'
+  : 'http://192.168.110.28:8300'
+
+export const cdnBase = import.meta.env.PROD ? apiBase : apiBase
diff --git a/src/db.ts b/src/db.ts
index f58dae8..441bf47 100644
--- a/src/db.ts
+++ b/src/db.ts
@@ -1,45 +1,8 @@
 import { createInstance, INDEXEDDB } from 'localforage'
-import { reactive, toRaw, watch, type WatchStopHandle } from 'vue'
 
-const db = createInstance({
+export default createInstance({
   driver: INDEXEDDB,
   name: 'fatfox',
   version: 1.0,
   storeName: 'fat_fox_key_value_pairs'
 })
-
-export function useForageStore<T extends { [key: string]: any; loading: boolean }>(
-  name: string,
-  defaultData: T,
-  partialWrite: (res: T) => T = (res) => res
-) {
-  const state = reactive(defaultData)
-  const writeWatch = () =>
-    watch(
-      state,
-      (d) => {
-        db.setItem(name, partialWrite(toRaw(d) as T))
-      },
-      { deep: true }
-    )
-  let stopWatch: WatchStopHandle = () => {}
-  const refresh = () => {
-    stopWatch()
-    state.loading = true
-    db.getItem<{ data: T }>(name).then((res) => {
-      if (res?.data) {
-        Object.assign(state, res.data)
-      }
-      state.loading = false
-      stopWatch = writeWatch()
-    })
-  }
-  refresh()
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') {
-      refresh()
-    }
-  })
-}
-
-export default db
diff --git a/src/layout/header/search/SearchPage.tsx b/src/layout/header/search/SearchPage.tsx
index 9f93a88..693fa9d 100644
--- a/src/layout/header/search/SearchPage.tsx
+++ b/src/layout/header/search/SearchPage.tsx
@@ -1,17 +1,7 @@
-import { defineComponent, reactive, ref } from 'vue'
-import zhCN from 'ant-design-vue/es/locale/zh_CN'
-import {
-  Button,
-  Checkbox,
-  ConfigProvider,
-  Divider,
-  Form,
-  Input,
-  message,
-  Modal
-} from 'ant-design-vue'
-import useSearchConfigStore, { type SearchInfo } from './useSearchConfigStore'
-import { EditOutlined, DeleteOutlined, PlusOutlined, CheckOutlined } from '@ant-design/icons-vue'
+import { defineComponent, ref } from 'vue'
+import { Button, Checkbox, Divider, message, Modal } from 'ant-design-vue'
+import useSearchConfigStore from './useSearchConfigStore'
+import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import asyncLoader from '@/utils/asyncLoader'
 const SearchAdder = asyncLoader(() => import('./SearchAdder'))
 const SearchItem = defineComponent({
@@ -125,69 +115,61 @@ export default defineComponent(() => {
   const showAdder = ref<{ [key: string]: any } | null | undefined>(undefined)
   return () => (
     <div
-      class="w-full h-full bg-white/90 backdrop-blur p-4 flex flex-col select-text"
+      class="w-full h-full bg-white/80 backdrop-blur p-4 flex flex-col select-text"
       onContextmenu={(e) => e.stopPropagation()}
     >
-      <ConfigProvider locale={zhCN}>
-        <h2 class="text-center tracking-widest font-bold text-xl text-black/80">管理搜索引擎</h2>
-        <div class="grid grid-cols-2 gap-4">
-          <Divider>默认</Divider>
-          <Divider>自定义</Divider>
+      <h2 class="text-center tracking-widest font-bold text-xl text-black/80">管理搜索引擎</h2>
+      <div class="grid grid-cols-2 gap-4">
+        <Divider>默认</Divider>
+        <Divider>自定义</Divider>
+      </div>
+      <div class="w-full h-0 flex-grow grid grid-cols-2 gap-4">
+        <div class="w-full h-full overflow-auto">
+          {searchConfig.defaultList.map((el) => (
+            <SearchItem key={el.url} url={el.url} icon={el.icon} name={el.name} v-model={el.show} />
+          ))}
         </div>
-        <div class="w-full h-0 flex-grow grid grid-cols-2 gap-4">
-          <div class="w-full h-full overflow-auto">
-            {searchConfig.defaultList.map((el) => (
+        <div class="w-full h-full flex flex-col">
+          <div class="w-full h-0 flex-grow overflow-y-auto">
+            {searchConfig.customList.map((el) => (
               <SearchItem
                 key={el.url}
                 url={el.url}
                 icon={el.icon}
                 name={el.name}
+                editable
                 v-model={el.show}
+                onEdit={(obj) => {
+                  showAdder.value = obj
+                }}
               />
             ))}
           </div>
-          <div class="w-full h-full flex flex-col">
-            <div class="w-full h-0 flex-grow overflow-y-auto">
-              {searchConfig.customList.map((el) => (
-                <SearchItem
-                  key={el.url}
-                  url={el.url}
-                  icon={el.icon}
-                  name={el.name}
-                  editable
-                  v-model={el.show}
-                  onEdit={(obj) => {
-                    showAdder.value = obj
-                  }}
-                />
-              ))}
-            </div>
-            <Button
-              type="primary"
-              class="mt-4"
-              block
-              icon={<PlusOutlined />}
-              onClick={() => {
-                showAdder.value = null
-              }}
-            >
-              添加自定义搜索引擎
-            </Button>
-          </div>
+          <Button
+            type="primary"
+            class="mt-4"
+            block
+            icon={<PlusOutlined />}
+            onClick={() => {
+              showAdder.value = null
+            }}
+          >
+            添加自定义搜索引擎
+          </Button>
         </div>
-        <Modal
-          open={showAdder.value !== undefined}
-          onUpdate:open={(e) => {
-            if (!e) {
-              showAdder.value = undefined
-            }
-          }}
-          title="添加搜索引擎"
-          footer={false}
-        >
-          <SearchAdder selected={showAdder.value as any} />
-        </Modal>
-      </ConfigProvider>
+      </div>
+      <Modal
+        open={showAdder.value !== undefined}
+        onUpdate:open={(e) => {
+          if (!e) {
+            showAdder.value = undefined
+          }
+        }}
+        title="添加搜索引擎"
+        footer={false}
+      >
+        <SearchAdder selected={showAdder.value as any} />
+      </Modal>
     </div>
   )
 })
diff --git a/src/layout/layout.types.ts b/src/layout/layout.types.ts
index 5065080..c14f24b 100644
--- a/src/layout/layout.types.ts
+++ b/src/layout/layout.types.ts
@@ -22,24 +22,25 @@ export interface Block {
   extra?: any
 }
 
-export type LayoutPages = { list: Block[]; icon: string; label: string }[]
+export type LayoutPages = { list: Block[]; label: string; name: string }[]
 
 export interface Layout {
   content: [LayoutPages, LayoutPages, LayoutPages]
   current: 0 | 1 | 2 // 游戏，工作，轻娱
   currentPage: number
   dir: { [key: string]: Block[] }
-  dock: {
-    q: Block | null
-    w: Block | null
-    e: Block | null
-    r: Block | null
-    a: Block | null
-    s: Block | null
-    d: Block | null
-    f: Block | null
-    b: Block | null
-  }
+  dock: [
+    Block | null,
+    Block | null,
+    Block | null,
+    Block | null,
+    Block | null,
+    Block | null,
+    Block | null,
+    Block | null,
+    Block | null,
+    Block | null
+  ]
   simple: boolean
   loading: boolean
 }
diff --git a/src/layout/sider/ModeSwitch.tsx b/src/layout/sider/ModeSwitch.tsx
new file mode 100644
index 0000000..2dc9dcf
--- /dev/null
+++ b/src/layout/sider/ModeSwitch.tsx
@@ -0,0 +1,179 @@
+import { defineComponent, ref, watch } from 'vue'
+import useLayoutStore from '../useLayoutStore'
+import { OhVueIcon, addIcons } from 'oh-vue-icons'
+import { MdVideogameassetTwotone, MdWorkhistoryTwotone, MdStarsTwotone } from 'oh-vue-icons/icons'
+
+addIcons(MdVideogameassetTwotone, MdWorkhistoryTwotone, MdStarsTwotone)
+
+export default defineComponent(() => {
+  const hover = ref(false)
+  const selected = ref<0 | 1 | 2>(0)
+  const layout = useLayoutStore()
+  watch(
+    () => layout.state.current,
+    (val) => {
+      selected.value = val
+    },
+    { immediate: true }
+  )
+  return () => (
+    <div
+      class="w-[56px] h-[56px] relative cursor-pointer"
+      onMouseenter={() => (hover.value = true)}
+      onMouseleave={() => (hover.value = false)}
+    >
+      <svg width="56" height="56" viewBox="0 0 1 1">
+        <circle
+          class="relative z-10 transition-all"
+          cx="0.5"
+          cy="0.5"
+          r={hover.value ? 0.4 : 0.44}
+          stroke={hover.value ? 'rgba(255,255,255,.8)' : 'rgba(255,255,255,.4)'}
+          stroke-width={hover.value ? 0.08 : 0.03}
+          fill-opacity={hover.value ? 1 : 0}
+          fill={hover.value ? 'rgba(0,0,0,.4)' : 'transparent'}
+        />
+        <text
+          x={hover.value ? '0.23' : '0.28'}
+          y={hover.value ? '0.6' : '0.42'}
+          font-size={hover.value ? '0.26' : '0.22'}
+          class="transition-all"
+          fill="white"
+        >
+          {layout.state.current === 0 ? '游戏' : layout.state.current === 1 ? '工作' : '休闲'}
+        </text>
+        <text
+          x="0.28"
+          y="0.68"
+          font-size="0.22"
+          class="transition-all"
+          fill={hover.value ? 'transparent' : 'white'}
+        >
+          模式
+        </text>
+      </svg>
+      {/* 转盘 */}
+      <div
+        class={
+          'w-[200px] h-[200px] absolute -left-[72px] -top-[72px] rounded-full overflow-hidden transition-all ' +
+          (hover.value ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0')
+        }
+        style="transform-origin: 54% 54%; filter: drop-shadow(0 0 4px rgba(0,0,0,.4));transition-duration:.3s; transition-timing-function: cubic-bezier(.4,0,.2,1)"
+      >
+        <div class="absolute left-[105px] top-[18px] text-white text-[13px] flex flex-col items-center pointer-events-none">
+          <OhVueIcon name="md-videogameasset-twotone" fill="white" scale={1.3} />
+          游戏
+        </div>
+        <div class="absolute left-[150px] top-[80px] text-white text-[13px] flex flex-col items-center pointer-events-none">
+          <OhVueIcon name="md-workhistory-twotone" fill="white" scale={1.3} />
+          工作
+        </div>
+        <div class="absolute left-[105px] top-[140px] text-white text-[13px] flex flex-col items-center pointer-events-none">
+          <OhVueIcon name="md-stars-twotone" fill="white" scale={1.3} />
+          休闲
+        </div>
+        <svg width="200" height="200" class="w-full h-full" viewBox="0 0 240 240">
+          <g>
+            <path
+              fill="rgba(0,0,0,.6)"
+              d="M155.29,94.09c-7.97-10.81-20.68-17.24-34.1-17.24-4.48,0-8.91,.71-13.17,2.1L85.85,11.74c11.31-3.68,23.12-5.54,35.1-5.54,35.71,0,69.72,17.1,91.07,45.78l-56.72,42.12Z"
+            />
+            <path
+              fill="rgba(0,0,0,.6)"
+              d="M156.16,143.1c4.83-7.06,7.39-15.31,7.39-23.89s-2.66-17.18-7.7-24.35l56.73-42.13c14.29,19.53,21.84,42.66,21.84,66.93s-7.3,46.62-21.12,65.94l-57.13-42.5Z"
+            />
+            <path
+              fill="rgba(0,0,0,.6)"
+              d="M120.94,233.14c-12.09,0-24-1.9-35.41-5.64l22.25-68.1c4.33,1.44,8.83,2.17,13.4,2.17,13.64,0,26.47-6.6,34.43-17.69l57.12,42.5c-21.32,29.29-55.6,46.76-91.79,46.76Z"
+            />
+          </g>
+          {/* 判定区块，无颜色 */}
+          <g class="relative z-10">
+            <path
+              fill="transparent"
+              d="M155.29,94.09c-7.97-10.81-20.68-17.24-34.1-17.24-4.48,0-8.91,.71-13.17,2.1L85.85,11.74c11.31-3.68,23.12-5.54,35.1-5.54,35.71,0,69.72,17.1,91.07,45.78l-56.72,42.12Z"
+              onMouseenter={() => {
+                selected.value = 0
+              }}
+            />
+            <path
+              fill="transparent"
+              d="M156.16,143.1c4.83-7.06,7.39-15.31,7.39-23.89s-2.66-17.18-7.7-24.35l56.73-42.13c14.29,19.53,21.84,42.66,21.84,66.93s-7.3,46.62-21.12,65.94l-57.13-42.5Z"
+              onMouseenter={() => {
+                selected.value = 1
+              }}
+            />
+            <path
+              fill="transparent"
+              d="M120.94,233.14c-12.09,0-24-1.9-35.41-5.64l22.25-68.1c4.33,1.44,8.83,2.17,13.4,2.17,13.64,0,26.47-6.6,34.43-17.69l57.12,42.5c-21.32,29.29-55.6,46.76-91.79,46.76Z"
+              onMouseenter={() => {
+                selected.value = 2
+              }}
+            />
+          </g>
+          <defs>
+            <linearGradient
+              id="mode-switch-selected"
+              x1="154.46"
+              y1="119.31"
+              x2="233.16"
+              y2="119.31"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0" stop-color="#fff" />
+              <stop offset="1" stop-color="#fff" stop-opacity=".2" />
+            </linearGradient>
+          </defs>
+          <g>
+            <path
+              class={
+                'absolute z-30 transition-all opacity-60 ' +
+                (selected.value === 0
+                  ? '-rotate-[72deg]'
+                  : selected.value === 1
+                    ? 'rotate-0'
+                    : 'rotate-[72deg]')
+              }
+              onClick={() => {
+                layout.state.current = selected.value
+              }}
+              style="transform-origin: 50% 50%;"
+              fill="url(#mode-switch-selected)"
+              d="M154.46,95.56c2.19-2.22,56.63-42.87,56.63-42.87,0,0,22.04,26.2,22,64.39,1.48,38.81-20.93,68.85-20.93,68.85,0,0-55.81-40.54-57.3-42.91,2.37-2.59,16.11-22.46-.41-47.46Z"
+            />
+            <path
+              class={
+                'relative transition-all ' +
+                (layout.state.current === 0
+                  ? '-rotate-[72deg]'
+                  : layout.state.current === 1
+                    ? 'rotate-0'
+                    : 'rotate-[72deg]')
+              }
+              style="transform-origin: 50% 50%;"
+              fill="none"
+              stroke="rgba(255,255,255,.8)"
+              stroke-linecap="round"
+              stroke-miterlimit="10"
+              stroke-width="3px"
+              d="M215.65,51.3s24,32.56,22,67.67c-1.33,31.11-10.52,53.19-21.41,68.96"
+            />
+            <path
+              class={
+                'relative transition-all ' +
+                (layout.state.current === 0
+                  ? '-rotate-[72deg]'
+                  : layout.state.current === 1
+                    ? 'rotate-0'
+                    : 'rotate-[72deg]')
+              }
+              style="transform-origin: 50% 50%;"
+              fill="rgba(255,255,255,.8)"
+              d="M154.51,95.83l4.36-3.41s7.73,10.66,7.5,24.88c1.11,13.7-6.91,29.57-6.91,29.57l-4.63-3.81s5.47-11.68,5.32-24.42c.89-12-5.64-22.8-5.64-22.8Z"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  )
+})
diff --git a/src/layout/sider/icons.ts b/src/layout/sider/icons.ts
new file mode 100644
index 0000000..cac19ca
--- /dev/null
+++ b/src/layout/sider/icons.ts
@@ -0,0 +1,159 @@
+import { addIcons } from 'oh-vue-icons'
+import {
+  PxHome,
+  PxSpeedFast,
+  PxCalculator,
+  PxArticleMultiple,
+  PxVideo,
+  PxEdit,
+  PxCode,
+  PxImageGallery,
+  PxGamepad,
+  PxShoppingBag,
+  PxCoin,
+  PxBookOpen,
+  PxCar,
+  PxCloud,
+  PxCommand,
+  PxHumanHandsup,
+  PxCameraAlt,
+  PxDevicePhone,
+  PxHeart,
+  PxBus,
+  PxMusic,
+  PxComment,
+  PxTeach,
+  PxTrending,
+  PxMailMultiple
+} from 'oh-vue-icons/icons'
+export function initIcons() {
+  addIcons(
+    PxHome,
+    PxSpeedFast,
+    PxCalculator,
+    PxArticleMultiple,
+    PxVideo,
+    PxEdit,
+    PxCode,
+    PxImageGallery,
+    PxGamepad,
+    PxShoppingBag,
+    PxCoin,
+    PxBookOpen,
+    PxCar,
+    PxCloud,
+    PxCommand,
+    PxHumanHandsup,
+    PxCameraAlt,
+    PxDevicePhone,
+    PxHeart,
+    PxBus,
+    PxMusic,
+    PxComment,
+    PxTeach,
+    PxTrending,
+    PxMailMultiple
+  )
+}
+export default [
+  {
+    name: 'px-home',
+    label: '首页'
+  },
+  {
+    name: 'px-speed-fast',
+    label: '效率'
+  },
+  {
+    name: 'px-calculator',
+    label: '工具'
+  },
+  {
+    name: 'px-article-multiple',
+    label: '咨询'
+  },
+  {
+    name: 'px-video',
+    label: '影音'
+  },
+  {
+    name: 'px-edit',
+    label: '设计'
+  },
+  {
+    name: 'px-code',
+    label: '编程'
+  },
+  {
+    name: 'px-image-gallery',
+    label: '图库'
+  },
+  {
+    name: 'px-gamepad',
+    label: '游戏'
+  },
+  {
+    name: 'px-shopping-bag',
+    label: '购物'
+  },
+  {
+    name: 'px-coin',
+    label: '金融'
+  },
+  {
+    name: 'px-book-open',
+    label: '阅读'
+  },
+  {
+    name: 'px-car',
+    label: '汽车'
+  },
+  {
+    name: 'px-cloud',
+    label: '网络'
+  },
+  {
+    name: 'px-command',
+    label: '产品'
+  },
+  {
+    name: 'px-human-handsup',
+    label: '创意'
+  },
+  {
+    name: 'px-camera-alt',
+    label: '摄影'
+  },
+  {
+    name: 'px-device-phone',
+    label: '科技'
+  },
+  {
+    name: 'px-heart',
+    label: '健康'
+  },
+  {
+    name: 'px-bus',
+    label: '旅游'
+  },
+  {
+    name: 'px-music',
+    label: '音乐'
+  },
+  {
+    name: 'px-comment',
+    label: '社交'
+  },
+  {
+    name: 'px-teach',
+    label: '学习'
+  },
+  {
+    name: 'px-trending',
+    label: '股票'
+  },
+  {
+    name: 'px-mail-multiple',
+    label: '邮箱'
+  }
+]
diff --git a/src/layout/sider/index.tsx b/src/layout/sider/index.tsx
new file mode 100644
index 0000000..bcf3c8b
--- /dev/null
+++ b/src/layout/sider/index.tsx
@@ -0,0 +1,171 @@
+import { defineComponent, ref, Transition, TransitionGroup, watch } from 'vue'
+import ModeSwitch from './ModeSwitch'
+import icons, { initIcons } from './icons'
+import { OhVueIcon, addIcons } from 'oh-vue-icons'
+import { PxHeadset, PxAddBox, PxCheck } from 'oh-vue-icons/icons'
+import useRouterStore from '@/useRouterStore'
+import useLayoutStore from '../useLayoutStore'
+
+initIcons()
+addIcons(PxHeadset, PxAddBox, PxCheck)
+const Item = defineComponent({
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    idx: {
+      type: Number,
+      default: 0
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click'],
+  setup(props, ctx) {
+    const hover = ref(false)
+    return () => (
+      <div
+        class={
+          'relative z-10 w-full h-[56px] flex flex-col justify-center items-center text-[13px] cursor-pointer transition-all font-bold ' +
+          (props.active ? 'text-white' : hover.value ? 'text-white' : 'text-white/80')
+        }
+        onMouseenter={() => {
+          hover.value = true
+        }}
+        onMouseleave={() => {
+          hover.value = false
+        }}
+        onClick={() => {
+          ctx.emit('click')
+        }}
+      >
+        <OhVueIcon name={props.name} fill="white" scale={1.2} />
+        {props.label}
+      </div>
+    )
+  }
+})
+export default defineComponent(() => {
+  const showEdit = ref(false)
+  const selected = ref(icons[0])
+  const router = useRouterStore()
+  const layout = useLayoutStore()
+  const label = ref('')
+  watch(
+    selected,
+    (val) => {
+      label.value = val.label
+    },
+    { immediate: true }
+  )
+  return () => (
+    <div class="fixed left-6 top-1/2 -translate-y-1/2 h-[600px] z-30">
+      <div class="w-[56px] h-full rounded-[28px] bg-black/70 backdrop-blur flex flex-col justify-between items-center">
+        <ModeSwitch />
+        <div class="w-full h-[64px]" />
+        <div class="w-full h-0 flex-grow overflow-auto relative no-scrollbar">
+          <TransitionGroup>
+            {layout.state.content[layout.state.current].map((el, idx) => (
+              <Item
+                key={idx}
+                name={el.name}
+                label={el.label}
+                idx={idx}
+                active={layout.state.currentPage === idx}
+                onClick={() => {
+                  layout.state.currentPage = idx
+                }}
+              />
+            ))}
+          </TransitionGroup>
+          <Transition>
+            {layout.state.content[layout.state.current]?.length > 0 && (
+              <div
+                class="absolute w-full h-[56px] rounded-lg bg-white/40 left-0 transition-all"
+                style={{
+                  transitionDuration: '.3s',
+                  top: `${layout.state.currentPage * 56}px`
+                }}
+              />
+            )}
+          </Transition>
+        </div>
+        <div class="w-full h-4" />
+        <Item
+          name="px-add-box"
+          label="添加"
+          onClick={() => {
+            showEdit.value = true
+          }}
+        />
+        <Item
+          name="px-headset"
+          label="反馈"
+          onClick={() => {
+            router.path = 'settings-fallback'
+          }}
+        />
+        <div
+          class="w-[56px] h-[56px] bg-white/40 rounded-full border-white border-[2px] border-solid overflow-hidden cursor-pointer"
+          onClick={() => {
+            router.path = 'settings-user'
+          }}
+        ></div>
+      </div>
+      {/* 添加页面 */}
+      <Transition name="page-adder">
+        {showEdit.value && (
+          <div
+            class="absolute left-[70px] bottom-0 w-56 rounded-lg p-4 bg-white/40 backdrop-blur shadow-lg"
+            v-outside-click={() => {
+              showEdit.value = false
+            }}
+          >
+            <input
+              class="rounded bg-black/10 text-center text-sm w-full py-1"
+              v-model={label.value}
+              maxlength={2}
+            />
+            <div class="flex flex-wrap gap-1 mt-2">
+              {icons.map((el) => (
+                <div
+                  class={
+                    'p-1 rounded cursor-pointer transition-all ' +
+                    (selected.value.name === el.name
+                      ? 'text-black/80 bg-white shadow'
+                      : 'text-black/60 hover:shadow hover:text-black/80 hover:bg-white')
+                  }
+                  onClick={() => {
+                    selected.value = { ...el }
+                  }}
+                >
+                  <OhVueIcon name={el.name} fill="black" scale={1.3} />
+                </div>
+              ))}
+            </div>
+            <div
+              class="w-full mt-2 py-1 rounded-lg bg-white text-center text-sm shadow hover:shadow-lg transition-all cursor-pointer"
+              onClick={() => {
+                layout.state.content[layout.state.current].push({
+                  list: [],
+                  label: label.value,
+                  name: selected.value.name
+                })
+              }}
+            >
+              <OhVueIcon name="px-check" />
+              添加页面
+            </div>
+          </div>
+        )}
+      </Transition>
+    </div>
+  )
+})
diff --git a/src/layout/useLayoutStore.ts b/src/layout/useLayoutStore.ts
index 307acb6..b4583a5 100644
--- a/src/layout/useLayoutStore.ts
+++ b/src/layout/useLayoutStore.ts
@@ -1,30 +1,43 @@
-import { useForageStore } from '@/db'
 import { defineStore } from 'pinia'
 import type { Layout } from './layout.types'
+import { reactive, ref, toRaw, watch } from 'vue'
+import db from '@/db'
 
 const defaultLayout: Layout = {
   content: [[], [], []],
   current: 0,
   currentPage: 0,
   dir: {},
-  dock: {
-    q: null,
-    w: null,
-    e: null,
-    r: null,
-    a: null,
-    s: null,
-    d: null,
-    f: null,
-    b: null
-  },
+  dock: [null, null, null, null, null, null, null, null, null, null],
   simple: false,
   loading: true
 }
 
 export default defineStore('layout', () => {
-  const state = useForageStore('layout', defaultLayout)
+  const state = reactive(defaultLayout)
+  const ready = ref(false)
+  db.getItem<Layout>('layout').then((res) => {
+    if (res) {
+      Object.assign(state, res)
+    }
+    ready.value = true
+  })
+  watch(
+    [ready, state],
+    ([re, s]) => {
+      if (!re) return
+      db.setItem('layout', toRaw(s))
+    },
+    { deep: true }
+  )
+  watch(
+    () => state.current,
+    () => {
+      state.currentPage = 0
+    }
+  )
   return {
-    state
+    state,
+    ready
   }
 })
diff --git a/src/main.css b/src/main.css
index 009ec79..8c3b320 100644
--- a/src/main.css
+++ b/src/main.css
@@ -40,7 +40,7 @@ body {
   top: -3px;
 }
 .ant-modal-content {
-  background-color: rgba(255, 255, 255, 0.9) !important;
+  background-color: rgba(255, 255, 255, 0.8) !important;
   backdrop-filter: blur(20px);
 }
 .ant-modal-header {
@@ -135,3 +135,25 @@ body {
   opacity: 0;
   transform: scale(0.4);
 }
+
+/* 页面添加框动画 */
+.page-adder-enter-active,
+.page-adder-leave-active {
+  transform-origin: center bottom;
+  transition:
+    transform 0.3s ease-in-out,
+    left 0.3s ease-in-out,
+    opacity 0.3s ease-in-out;
+}
+
+.page-adder-enter-from,
+.page-adder-leave-to {
+  opacity: 0;
+  transform: scale(0.4);
+  left: 0;
+}
+
+.no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
diff --git a/src/settings/SettingsButton.tsx b/src/settings/SettingsButton.tsx
index 2d47141..7756199 100644
--- a/src/settings/SettingsButton.tsx
+++ b/src/settings/SettingsButton.tsx
@@ -7,7 +7,7 @@ export default defineComponent(() => {
   const router = useRouterStore()
   return () => (
     <div
-      class="absolute left-8 bottom-8 p-1 z-10 flex justify-center items-center cursor-pointer rounded-lg hover:bg-black/20 transition-all"
+      class="absolute left-10 bottom-8 p-1 z-10 flex justify-center items-center cursor-pointer rounded-lg hover:bg-black/20 transition-all"
       style="filter: drop-shadow(0 0 4px rgba(0,0,0,0.2))"
       onClick={() => {
         router.path = 'settings-background'
diff --git a/src/settings/SettingsOverlay.tsx b/src/settings/SettingsOverlay.tsx
index de3c0ba..ec5a728 100644
--- a/src/settings/SettingsOverlay.tsx
+++ b/src/settings/SettingsOverlay.tsx
@@ -2,7 +2,7 @@ import useRouterStore from '@/useRouterStore'
 import asyncLoader from '@/utils/asyncLoader'
 import { computed, defineComponent, Transition } from 'vue'
 
-const ProfilePage = asyncLoader(() => import('@/user/UserPage'))
+const UserPage = asyncLoader(() => import('@/user/UserPage'))
 const BackgroundPage = asyncLoader(() => import('@/layout/background/BackgroundPage'))
 
 const SettingsTab = defineComponent({
@@ -38,11 +38,11 @@ export default defineComponent(() => {
   const router = useRouterStore()
   const show = computed(() => router.path.startsWith('settings-'))
   return () => (
-    <div class="fixed left-0 bottom-0 z-20 w-full">
+    <div class="fixed left-0 bottom-0 z-40 w-full">
       {/* 背景遮罩 */}
       {show.value && (
         <div
-          class="w-full h-screen"
+          class="w-full h-screen backdrop-blur-sm"
           onClick={() => {
             router.path = ''
           }}
@@ -51,7 +51,7 @@ export default defineComponent(() => {
       {/* 弹框主体 */}
       <Transition name="settings">
         {show.value && (
-          <div class="absolute left-8 bottom-20 w-[600px] h-[480px] rounded-lg overflow-hidden shadow-2xl flex">
+          <div class="absolute left-6 bottom-20 w-[600px] h-[480px] rounded-lg overflow-hidden shadow-2xl flex">
             <div class="w-[200px] p-4 h-full bg-white/60 backdrop-blur flex flex-col">
               <div
                 class={
@@ -74,10 +74,10 @@ export default defineComponent(() => {
               <SettingsTab label="重置" path="settings-reset" />
               <SettingsTab label="问题反馈" path="settings-fallback" />
             </div>
-            <div class="w-0 h-full flex-grow bg-white/90 backdrop-blur">
+            <div class="w-0 h-full flex-grow bg-white/80 backdrop-blur">
               <Transition>
                 {router.path === 'settings-user' ? (
-                  <ProfilePage />
+                  <UserPage />
                 ) : router.path === 'settings-background' ? (
                   <BackgroundPage />
                 ) : null}
diff --git a/src/useRouterStore.ts b/src/useRouterStore.ts
index 47a3ee9..d33bfa9 100644
--- a/src/useRouterStore.ts
+++ b/src/useRouterStore.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 export type WidgetStr = 'ai' | 'calendar'
-export type GlobalStr = 'search' | 'block' | 'adder'
+export type GlobalStr = 'search' | 'block' | 'adder' | 'login'
 export type SettingStr =
   | 'user'
   | 'background'
diff --git a/src/user/LoginModal.tsx b/src/user/LoginModal.tsx
new file mode 100644
index 0000000..b28a991
--- /dev/null
+++ b/src/user/LoginModal.tsx
@@ -0,0 +1,58 @@
+import { defineComponent, reactive, Transition } from 'vue'
+import useRouterStore from '@/useRouterStore'
+import request from '@/utils/request'
+
+export default defineComponent(() => {
+  const router = useRouterStore()
+  const form = reactive({
+    email: '',
+    password: ''
+  })
+  return () => (
+    <div class="fixed left-0 top-0 z-20 w-full">
+      <Transition>
+        {router.path === 'global-login' && (
+          <div
+            class="w-full h-screen bg-black/20 backdrop-blur"
+            onClick={() => {
+              router.path = ''
+            }}
+          ></div>
+        )}
+      </Transition>
+      <Transition name="modal">
+        {router.path === 'global-login' && (
+          <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden transition-all w-[540px] max-w-[90%] rounded-lg p-2 bg-white/40 backdrop-blur">
+            <div class="w-full h-full rounded-lg bg-white/80 overflow-hidden">
+              <div class="flex justify-center py-4">
+                <img src="/logo.png" alt="logo" class="w-1/3" />
+              </div>
+              <div class="text-center text-lg text-black/60 font-bold tracking-widest">
+                登录 Fatfox 新标签页
+              </div>
+              <div class="flex flex-col">
+                测试用
+                <input placeholder="邮箱" v-model={form.email} />
+                <input placeholder="密码" type="password" v-model={form.password} />
+                <button
+                  onClick={() => {
+                    request('POST', '/api/user/login', {
+                      data: form
+                    }).then((res) => {
+                      console.log(res)
+                    })
+                  }}
+                >
+                  立即登录
+                </button>
+              </div>
+              <div class="flex justify-end py-4">
+                <img src="/logo.png" alt="logo" class="w-1/2 relative top-8 left-4 opacity-10" />
+              </div>
+            </div>
+          </div>
+        )}
+      </Transition>
+    </div>
+  )
+})
diff --git a/src/user/UserPage.tsx b/src/user/UserPage.tsx
index 7d8820f..25fcda4 100644
--- a/src/user/UserPage.tsx
+++ b/src/user/UserPage.tsx
@@ -1,5 +1,19 @@
+import useRouterStore from '@/useRouterStore'
+import { Button } from 'ant-design-vue'
 import { defineComponent } from 'vue'
 
-export default defineComponent(() => () => (
-  <div class="absolute left-0 top-0 w-full h-full p-4">this is user</div>
-))
+export default defineComponent(() => {
+  const router = useRouterStore()
+  return () => (
+    <div class="absolute left-0 top-0 w-full h-full p-4">
+      this is user
+      <Button
+        onClick={() => {
+          router.path = 'global-login'
+        }}
+      >
+        登录
+      </Button>
+    </div>
+  )
+})
diff --git a/src/utils/ImageUploader.tsx b/src/utils/ImageUploader.tsx
index e7032a7..9a65d56 100644
--- a/src/utils/ImageUploader.tsx
+++ b/src/utils/ImageUploader.tsx
@@ -56,7 +56,7 @@ export default defineComponent({
           }}
         />
         <div
-          class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all bg-cover bg-no-repeat bg-center cursor-pointer"
+          class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all bg-cover bg-no-repeat bg-center cursor-pointer shadow"
           style={{
             width: props.width + 'px',
             height: props.width / props.ratio + 'px',
diff --git a/src/utils/request.ts b/src/utils/request.ts
new file mode 100644
index 0000000..f2a8079
--- /dev/null
+++ b/src/utils/request.ts
@@ -0,0 +1,57 @@
+import { apiBase, cdnBase } from '@/config'
+import { UAParser } from 'ua-parser-js'
+const ua = new UAParser(navigator.userAgent)
+// 设备型号：例如 Mac Os-Chrome
+const device = ua.getOS().name + '-' + ua.getBrowser().name
+
+/**
+ * 发送请求
+ * @param method
+ * @param url
+ * @param requestConfig
+ */
+export default function request<R>(
+  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
+  url: `${'/api' | '/cdn'}${string}`,
+  requestConfig?: {
+    data?: any
+    dataType?: 'json' | 'form'
+    returnType?: 'json' | 'text' | 'blob'
+  }
+) {
+  const { data, dataType = 'json', returnType = 'json' } = requestConfig || {}
+  const fp = localStorage.getItem('fp') || ''
+  const config: any = {
+    method,
+    headers: {
+      Authorization: 'Bearer ' + localStorage.getItem('token'),
+      device,
+      fp
+    }
+  }
+  if (!['GET', 'DELETE'].includes(method)) {
+    if (dataType === 'json') {
+      config.body = JSON.stringify(data)
+      config.headers['Content-Type'] = 'application/json'
+    } else {
+      config.body = new FormData()
+      for (const key in data) {
+        config.body.append(key, data[key])
+      }
+    }
+  }
+  const path = url.replace(/^\/api/, apiBase).replace(/^\/cdn/, cdnBase)
+  return fetch(path, config).then((res) => {
+    if (res.status >= 200 && res.status < 400) {
+      return res[returnType]()
+    } else {
+      return res.text().then((err) => {
+        if (res.status === 401) {
+          localStorage.setItem('token', '')
+          return Promise.reject('登录已过期，请重新登录')
+        }
+        return Promise.reject(err)
+      })
+    }
+  }) as Promise<R>
+}