登录注册

2026-05-18 15:22:08 +08:00
parent 4af58134fd
commit d327797236
16 changed files with 734 additions and 14 deletions
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test-ssg</title>
-	<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4403230_2woxf8yp826.css" />
+	<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4403230_96rmept2ld.css" />
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
    "@unhead/vue": "^2.1.15",
    "gsap": "^3.15.0",
    "less": "^4.6.4",
+    "pinia": "^3.0.4",
+    "pinia-persistedstate-plugin": "^0.1.0",
    "unhead": "2.1.15",
    "vite-ssg": "^28.3.0",
    "vue": "^3.5.34",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,12 @@ importers:
      less:
        specifier: ^4.6.4
        version: 4.6.4
+      pinia:
+        specifier: ^3.0.4
+        version: 3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3))
+      pinia-persistedstate-plugin:
+        specifier: ^0.1.0
+        version: 0.1.0(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3))
      unhead:
        specifier: 2.1.15
        version: 2.1.15
@@ -311,6 +317,9 @@ packages:
  '@tybys/wasm-util@0.10.2':
    resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}

+  '@types/js-cookie@3.0.6':
+    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+
  '@types/node@24.12.4':
    resolution: {integrity: sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA==}

@@ -355,6 +364,15 @@ packages:
  '@vue/devtools-api@6.6.4':
    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}

+  '@vue/devtools-api@7.7.9':
+    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
+
+  '@vue/devtools-kit@7.7.9':
+    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
+
+  '@vue/devtools-shared@7.7.9':
+    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
+
  '@vue/language-core@3.2.8':
    resolution: {integrity: sha512-9OiSPQFiAAWNVnXb0d2dcTmcKnFQamhuNES6ayyISrb/mwPWVgoGdAqSfCWqKhQpa3D5gDTcYD+w7ObiheZ81g==}

@@ -405,6 +423,9 @@ packages:
  bidi-js@1.0.3:
    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}

+  birpc@2.9.0:
+    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
+
  buffer-from@1.1.2:
    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}

@@ -430,6 +451,10 @@ packages:
    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
    engines: {node: '>=12.13'}

+  copy-anything@4.0.5:
+    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
+    engines: {node: '>=18'}
+
  css-tree@3.2.1:
    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -503,6 +528,9 @@ packages:
  gsap@3.15.0:
    resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}

+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
  hookable@6.1.1:
    resolution: {integrity: sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==}

@@ -542,6 +570,10 @@ packages:
    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
    engines: {node: '>=12.13'}

+  is-what@5.5.0:
+    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
+    engines: {node: '>=18'}
+
  jsdom@28.1.0:
    resolution: {integrity: sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==}
    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -652,6 +684,9 @@ packages:
    engines: {node: '>=4'}
    hasBin: true

+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
  ms@2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}

@@ -687,6 +722,9 @@ packages:
  path-browserify@1.0.1:
    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}

+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
  picocolors@1.1.1:
    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}

@@ -698,6 +736,27 @@ packages:
    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
    engines: {node: '>=6'}

+  pinia-persistedstate-plugin@0.1.0:
+    resolution: {integrity: sha512-ToKR/EJzhhXElQ5YL8PVVY4CqLJjywxszAJjOCgprjmIVkTrPBsEOY4b/ATOzHQc1TtuaJs/3MJuoCpA3pv8Ew==}
+
+  pinia@2.3.1:
+    resolution: {integrity: sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  pinia@3.0.4:
+    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
+    peerDependencies:
+      typescript: '>=4.5.0'
+      vue: ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
  postcss@8.5.14:
    resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==}
    engines: {node: ^10 || ^12 || >=14}
@@ -717,6 +776,9 @@ packages:
    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
    engines: {node: '>=0.10.0'}

+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
  rolldown@1.0.0:
    resolution: {integrity: sha512-yD986aXDESFGS95spT1LAv0jssywP4npMEjmMHyN2/5+eE8qQJUype2AaKkRiLgBgyD0LFlubwAht7VmY8rGoA==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -748,6 +810,14 @@ packages:
    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
    engines: {node: '>=0.10.0'}

+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
+  superjson@2.2.6:
+    resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
+    engines: {node: '>=16'}
+
  symbol-tree@3.2.4:
    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}

@@ -860,6 +930,17 @@ packages:
  vscode-uri@3.1.0:
    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}

+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
  vue-i18n@11.4.4:
    resolution: {integrity: sha512-gIbXVSFQV4jcSJxfwdZ5zSZmZ+12CnX0K3vBkRSd6Zn+HSzCp+QwUgPwpD/uN0oKNKI9RzlUXPKVedEuMgNG0A==}
    engines: {node: '>= 22'}
@@ -1114,6 +1195,8 @@ snapshots:
      tslib: 2.8.1
    optional: true

+  '@types/js-cookie@3.0.6': {}
+
  '@types/node@24.12.4':
    dependencies:
      undici-types: 7.16.0
@@ -1178,6 +1261,24 @@ snapshots:

  '@vue/devtools-api@6.6.4': {}

+  '@vue/devtools-api@7.7.9':
+    dependencies:
+      '@vue/devtools-kit': 7.7.9
+
+  '@vue/devtools-kit@7.7.9':
+    dependencies:
+      '@vue/devtools-shared': 7.7.9
+      birpc: 2.9.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.6
+
+  '@vue/devtools-shared@7.7.9':
+    dependencies:
+      rfdc: 1.4.1
+
  '@vue/language-core@3.2.8':
    dependencies:
      '@volar/language-core': 2.4.28
@@ -1229,6 +1330,8 @@ snapshots:
    dependencies:
      require-from-string: 2.0.2

+  birpc@2.9.0: {}
+
  buffer-from@1.1.2: {}

  cac@6.7.14: {}
@@ -1250,6 +1353,10 @@ snapshots:
    dependencies:
      is-what: 4.1.16

+  copy-anything@4.0.5:
+    dependencies:
+      is-what: 5.5.0
+
  css-tree@3.2.1:
    dependencies:
      mdn-data: 2.27.1
@@ -1309,6 +1416,8 @@ snapshots:

  gsap@3.15.0: {}

+  hookable@5.5.3: {}
+
  hookable@6.1.1: {}

  html-encoding-sniffer@6.0.0:
@@ -1357,6 +1466,8 @@ snapshots:

  is-what@4.1.16: {}

+  is-what@5.5.0: {}
+
  jsdom@28.1.0:
    dependencies:
      '@acemir/cssom': 0.9.31
@@ -1467,6 +1578,8 @@ snapshots:
  mime@1.6.0:
    optional: true

+  mitt@3.0.1: {}
+
  ms@2.1.3: {}

  muggle-string@0.4.1: {}
@@ -1502,6 +1615,8 @@ snapshots:

  path-browserify@1.0.1: {}

+  perfect-debounce@1.0.0: {}
+
  picocolors@1.1.1: {}

  picomatch@4.0.4: {}
@@ -1509,6 +1624,32 @@ snapshots:
  pify@4.0.1:
    optional: true

+  pinia-persistedstate-plugin@0.1.0(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)):
+    dependencies:
+      '@types/js-cookie': 3.0.6
+      pinia: 2.3.1(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+      - vue
+
+  pinia@2.3.1(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.34(typescript@6.0.3)
+      vue-demi: 0.14.10(vue@3.5.34(typescript@6.0.3))
+    optionalDependencies:
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
+  pinia@3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.9
+      vue: 3.5.34(typescript@6.0.3)
+    optionalDependencies:
+      typescript: 6.0.3
+
  postcss@8.5.14:
    dependencies:
      nanoid: 3.3.12
@@ -1524,6 +1665,8 @@ snapshots:

  require-from-string@2.0.2: {}

+  rfdc@1.4.1: {}
+
  rolldown@1.0.0:
    dependencies:
      '@oxc-project/types': 0.129.0
@@ -1567,6 +1710,12 @@ snapshots:

  source-map@0.6.1: {}

+  speakingurl@14.0.1: {}
+
+  superjson@2.2.6:
+    dependencies:
+      copy-anything: 4.0.5
+
  symbol-tree@3.2.4: {}

  terser@5.47.1:
@@ -1643,6 +1792,10 @@ snapshots:

  vscode-uri@3.1.0: {}

+  vue-demi@0.14.10(vue@3.5.34(typescript@6.0.3)):
+    dependencies:
+      vue: 3.5.34(typescript@6.0.3)
+
  vue-i18n@11.4.4(vue@3.5.34(typescript@6.0.3)):
    dependencies:
      '@intlify/core-base': 11.4.4
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,16 +3,22 @@
 	<RouterView />
 	<MainFooter />
 	<BackTop />
-	
 	<VideoModel />
+	<div v-show="loading" class="main-loading">
+		<span class="iconfont icon-loading"></span>
+	</div>
 </template>

 <script setup lang="ts">
-	import { RouterView } from "vue-router";
-	import MainHeader from "./components/main-header.vue";
-	import MainFooter from "./components/main-footer.vue";
-	import BackTop from "./components/back-top.vue";
-	import VideoModel from "./components/video-model.vue";
+	import { ref, computed } from 'vue'
+	import { RouterView } from 'vue-router'
+	import MainHeader from './components/main-header.vue'
+	import MainFooter from './components/main-footer.vue'
+	import BackTop from './components/back-top.vue'
+	import VideoModel from './components/video-model.vue'
+	import { useGlobalStore } from './stores/global'
+	const globalStore = useGlobalStore()
+	const loading = computed(() => globalStore.state.loading)
 </script>
 <style scoped lang="less">
 	// .main {
@@ -25,4 +31,26 @@
 	// 		height: auto;
 	// 	}
 	// }
+	.main-loading {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 9999999999;
+		> .iconfont {
+			font-size: 80px;
+			color: #fff;
+			animation: loading 2s linear infinite;
+		}
+	}
 </style>
+<style lang="less">
+	html:root {
+		--main-header-height: 85px;
+	}
+</style>
--- a/src/components/main-header.vue
+++ b/src/components/main-header.vue
@@ -27,11 +27,8 @@
 			</down-menu>
 			<router-link class="link" to="/my-account">
 				<span class="iconfont icon-tubiao-"></span>
-				<span>{{ $t('MainHeader.LoginOrSignin') }}</span>
-			</router-link>
-			<router-link class="link" to="/my-account">
-				<span class="iconfont icon-tubiao-"></span>
-				<span>{{ $t('MainHeader.MyAccount') }}</span>
+				<span v-if="token">{{ $t('MainHeader.MyAccount') }}</span>
+				<span v-else>{{ $t('MainHeader.LoginOrSignin') }}</span>
 			</router-link>
 		</div>
 	</header>
@@ -43,6 +40,9 @@
 	import { useI18n } from 'vue-i18n'
 	const { locale } = useI18n()
 	import { useRoute } from 'vue-router'
+	import { useUserInfoStore } from '@/stores/userInfo'
+	const userInfoStore = useUserInfoStore()
+	const token = computed(() => userInfoStore.state.token)
 	const route = useRoute()
 	const lang = computed(() => route.params.lang)
 	if (lang.value) setLang(lang.value)
@@ -119,7 +119,7 @@
 	.main-header {
 		position: fixed;
 		width: 100%;
-		height: 85px;
+		height: var(--main-header-height, 85px);
 		padding: 15px 30px;
 		box-sizing: border-box;
 		top: 0;
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import { routes } from './routes'
 import '@/assets/css/style.less'
 import directives from './directives/index'
 import i18n from './lang/index'
+import store from './stores/index'

 export const createApp = ViteSSG(App, {
 	routes,
@@ -13,6 +14,7 @@ export const createApp = ViteSSG(App, {
 	({ app }) => {
 		// 注册全局指令
 		app.use(directives)
+		app.use(store)
 		app.use(i18n)
 	}
 )
--- a/src/pages/my-account/account-info.vue
+++ b/src/pages/my-account/account-info.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="account-info">
+		<div class="left">
+			<img alt="" src="" class="avatar" />
+			<div class="name">12312</div>
+			<div class="name">12312</div>
+			<div class="name">12312</div>
+		</div>
+		<div class="content"></div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed } from 'vue'
+</script>
+
+<style scoped lang="less">
+	.account-info {
+		display: flex;
+		>.left{
+			width: 270px;
+			border-right: 1px solid #e1e1e1;
+			margin-right: 30px;
+		}
+		>.content{
+			flex: 1;
+		}
+	}
+</style>
--- a/src/pages/my-account/css/style.css
+++ b/src/pages/my-account/css/style.css
@@ -0,0 +1,124 @@
+.login,
+.register {
+  padding: 35px;
+  border: 1px solid #e1e1e1;
+  background-color: #fff;
+  border-radius: 5px;
+}
+.login > h2,
+.register > h2 {
+  font-weight: 600;
+  color: #222;
+  font-size: 24px;
+  margin-bottom: 24px;
+}
+.login > form > *,
+.register > form > * {
+  margin-bottom: 20px;
+}
+.login > form > .form-item,
+.register > form > .form-item {
+  display: flex;
+  flex-direction: column;
+}
+.login > form > .form-item > label,
+.register > form > .form-item > label {
+  margin-bottom: 5px;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #333;
+  font-weight: 400;
+}
+.login > form > .form-item > label::after,
+.register > form > .form-item > label::after {
+  content: ' *';
+  color: #f00;
+}
+.login > form > .form-item > .input-container > input,
+.register > form > .form-item > .input-container > input,
+.login > form > .form-item > input,
+.register > form > .form-item > input {
+  width: 100%;
+  height: 35px;
+  padding: 0 17px;
+  font-size: 16px;
+  border: 1px solid #e1e1e1;
+  outline: none;
+}
+.login > form > .form-item > .input-container > input:focus,
+.register > form > .form-item > .input-container > input:focus,
+.login > form > .form-item > input:focus,
+.register > form > .form-item > input:focus {
+  border-color: #000;
+}
+.login > form > .form-item > .input-container,
+.register > form > .form-item > .input-container {
+  position: relative;
+}
+.login > form > .form-item > .input-container > input,
+.register > form > .form-item > .input-container > input {
+  padding-right: 35px;
+}
+.login > form > .form-item > .input-container > .iconfont,
+.register > form > .form-item > .input-container > .iconfont {
+  position: absolute;
+  right: 10px;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  cursor: pointer;
+}
+.login > form > .remember,
+.register > form > .remember {
+  display: flex;
+  align-items: center;
+}
+.login > form > .remember > input,
+.register > form > .remember > input {
+  margin: 4px 8px 0 0;
+}
+.login > form > .remember > label,
+.register > form > .remember > label {
+  color: #333;
+}
+.login > form > .remember > .link,
+.register > form > .remember > .link {
+  margin-left: auto;
+  color: #222;
+}
+.login > form > .subscribe,
+.register > form > .subscribe {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #333;
+}
+.login > form > .tip,
+.register > form > .tip {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #333;
+}
+.login > form > .tip > a,
+.register > form > .tip > a {
+  color: #000;
+}
+.login > form > button,
+.register > form > button {
+  width: 100%;
+  height: 38px;
+  border-radius: 4px;
+  border: none;
+  background-color: #9a2125;
+  color: #fff;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
+  cursor: pointer;
+  font-size: 12px;
+}
+.login > form > button:hover,
+.register > form > button:hover {
+  background-color: #99494c;
+}
--- a/src/pages/my-account/index.vue
+++ b/src/pages/my-account/index.vue
@@ -0,0 +1,61 @@
+<template>
+	<div class="my-account">
+		<div class="header">
+			<h1 class="title">
+				<span class="iconfont icon-tubiao-"></span>
+				<span>My Account</span>
+			</h1>
+		</div>
+		<div class="content" v-if="!token">
+			<Login />
+			<Register />
+		</div>
+		<div class="content" v-else>
+			<AccountInfo />
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import Login from './login.vue'
+	import Register from './register.vue'
+	import AccountInfo from './account-info.vue'
+	import { useUserInfoStore } from '@/stores/userInfo'
+	const userInfoStore = useUserInfoStore()
+	const token = computed(() => userInfoStore.state.token)
+</script>
+
+<style scoped lang="less">
+	.my-account {
+		background-color: #f9f9f9;
+		> .header {
+			border-top: var(--main-header-height, 85px) solid #000;
+			background-color: #666;
+			padding: 32px 0;
+			color: #fff;
+			margin-bottom: 32px;
+			> h1 {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 80px;
+				> span {
+					font-size: 40px;
+					font-weight: 400;
+				}
+			}
+		}
+		> .content {
+			max-width: 1200px;
+			margin: 0 auto;
+			padding-bottom: 80px;
+			display: flex;
+			align-items: flex-start;
+			gap: 60px;
+			> * {
+				flex: 1;
+			}
+			animation: opacity-in 0.3s linear both;
+		}
+	}
+</style>
--- a/src/pages/my-account/less/style.less
+++ b/src/pages/my-account/less/style.less
@@ -0,0 +1,124 @@
+.login,
+.register {
+	padding: 35px;
+	border: 1px solid #e1e1e1;
+	background-color: #fff;
+	border-radius: 5px;
+
+	>h2 {
+		font-weight: 600;
+		color: #222;
+		font-size: 24px;
+		margin-bottom: 24px;
+	}
+
+	>form {
+		>* {
+			margin-bottom: 20px;
+		}
+
+		>.form-item {
+			display: flex;
+			flex-direction: column;
+
+			>label {
+				margin-bottom: 5px;
+				font-size: 16px;
+				line-height: 1.6;
+				color: #333;
+				font-weight: 400;
+
+				&::after {
+					content: ' *';
+					color: #f00;
+				}
+			}
+
+			>.input-container>input,
+			>input {
+				width: 100%;
+				height: 35px;
+				padding: 0 17px;
+				font-size: 16px;
+				border: 1px solid #e1e1e1;
+				outline: none;
+
+				&:focus {
+					border-color: #000;
+				}
+			}
+
+			>.input-container {
+				position: relative;
+
+				>input {
+					padding-right: 35px;
+				}
+
+				>.iconfont {
+					position: absolute;
+					right: 10px;
+					top: 0;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 18px;
+					cursor: pointer;
+				}
+			}
+		}
+
+		>.remember {
+			display: flex;
+			align-items: center;
+
+			>input {
+				margin: 4px 8px 0 0;
+			}
+
+			>label {
+				color: #333;
+			}
+
+			>.link {
+				margin-left: auto;
+				color: #222;
+			}
+
+		}
+
+		>.subscribe {
+			font-size: 16px;
+			line-height: 1.6;
+			color: #333;
+		}
+
+		>.tip {
+			font-size: 16px;
+			line-height: 1.6;
+			color: #333;
+
+			>a {
+				color: #000;
+			}
+		}
+
+		>button {
+			width: 100%;
+			height: 38px;
+			border-radius: 4px;
+			border: none;
+			background-color: #9a2125;
+			color: #fff;
+			transition: all 0.3s ease-in-out;
+			box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
+			cursor: pointer;
+			font-size: 12px;
+
+			&:hover {
+				background-color: #99494c;
+			}
+		}
+	}
+}
--- a/src/pages/my-account/login.vue
+++ b/src/pages/my-account/login.vue
@@ -0,0 +1,62 @@
+<template>
+	<div class="login">
+		<h2>Login</h2>
+		<form @submit.prevent="handleSubmit">
+			<div class="form-item">
+				<label for="email">Username or email address</label>
+				<input type="email" id="email" name="email" required v-model="fromData.email" />
+			</div>
+			<div class="form-item">
+				<label for="password">Password</label>
+				<div class="input-container">
+					<input
+						id="password"
+						name="password"
+						required
+						:type="passShow ? 'text' : 'password'"
+						v-model="fromData.password"
+					/>
+					<span
+						class="iconfont"
+						:class="[passShow ? 'icon-hide' : 'icon-show']"
+						@click="passShow = !passShow"
+					></span>
+				</div>
+			</div>
+			<div class="remember">
+				<input type="checkbox" id="remember" name="remember" v-model="remember" />
+				<label for="remember">Remember me</label>
+				<router-link class="link" to="/my-account/lost-password"
+					>Lost your password?</router-link
+				>
+			</div>
+			<button type="submit">LOG IN</button>
+		</form>
+	</div>
+</template>
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { useGlobalStore } from '@/stores/global'
+	const globalStore = useGlobalStore()
+	import { useUserInfoStore } from '@/stores/userInfo'
+	const userInfoStore = useUserInfoStore()
+	const passShow = ref(false)
+	const remember = ref(false)
+	const fromData = ref({
+		email: '',
+		password: ''
+	})
+
+	const handleSubmit = () => {
+		console.log(fromData.value, remember.value)
+		globalStore.setLoading(true)
+		setTimeout(() => {
+			globalStore.setLoading(false)
+			userInfoStore.setToken('123456')
+		}, 1000)
+	}
+</script>
+
+<style scoped lang="less">
+	@import './less/style.less';
+</style>
--- a/src/pages/my-account/register.vue
+++ b/src/pages/my-account/register.vue
@@ -0,0 +1,78 @@
+<template>
+	<div class="register">
+		<h2>Register</h2>
+		<form @submit.prevent="handleSubmit">
+			<div class="form-item">
+				<label for="username">Username</label>
+				<input
+					type="username"
+					id="username"
+					name="username"
+					required
+					v-model="fromData.username"
+				/>
+			</div>
+			<div class="form-item">
+				<label for="email">Email address</label>
+				<input type="email" id="email" name="email" required v-model="fromData.email" />
+			</div>
+			<div class="form-item">
+				<label for="password">Password</label>
+				<div class="input-container">
+					<input
+						id="password"
+						name="password"
+						required
+						:type="passShow ? 'text' : 'password'"
+						v-model="fromData.password"
+					/>
+					<span
+						class="iconfont"
+						:class="[passShow ? 'icon-hide' : 'icon-show']"
+						@click="passShow = !passShow"
+					></span>
+				</div>
+			</div>
+			<div class="subscribe">
+				<input
+					type="checkbox"
+					id="subscribe"
+					name="subscribe"
+					v-model="fromData.subscribe"
+				/>
+				<label for="subscribe"
+					>Subscribe to Code Create product/service news and newsletter</label
+				>
+			</div>
+			<div class="tip">
+				Your personal data will be used to support your experience throughout this website,
+				to manage access to your account, and for other purposes described in our
+				<router-link class="link" to="/my-account/privacy-policy"
+					>Privacy Policy</router-link
+				>
+			</div>
+			<button type="submit">REGISTER</button>
+		</form>
+	</div>
+</template>
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { useUserInfoStore } from '@/stores/userInfo'
+	const userInfoStore = useUserInfoStore()
+	const passShow = ref(false)
+	const remember = ref(false)
+	const fromData = ref({
+		username: '',
+		email: '',
+		password: '',
+		subscribe: false
+	})
+
+	const handleSubmit = () => {
+		console.log(fromData.value, remember.value)
+	}
+</script>
+
+<style scoped lang="less">
+	@import './less/style.less';
+</style>
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -31,7 +31,12 @@ export const routes: RouteRecordRaw[] = [
 				path: 'aida',
 				name: 'Aida',
 				component: () => import('./pages/aida/index.vue')
-			}
+			},
+			{
+				path: 'my-account',
+				name: 'MyAccount',
+				component: () => import('./pages/my-account/index.vue')
+			},
 		]
 	}
 ]
--- a/src/stores/global.ts
+++ b/src/stores/global.ts
@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+export const useGlobalStore = defineStore('global', () => {
+	const state = ref({
+		loading: false,// 全局loading
+	})
+
+	const setLoading = (v: boolean) => { state.value.loading = v }
+
+	return {
+		state,
+		setLoading,
+	}
+})
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -0,0 +1,9 @@
+import { createPinia } from 'pinia'
+import { createPersistedState } from 'pinia-persistedstate-plugin'
+// 创建store实例
+const store = createPinia()
+// 使用持久化插件(全局持久化)
+store.use(createPersistedState())
+export default store
+export * from './global'
+export * from './userInfo'
--- a/src/stores/userInfo.ts
+++ b/src/stores/userInfo.ts
@@ -0,0 +1,30 @@
+// 每一个存储的模块，命名规则use开头，store结尾
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+export const useUserInfoStore = defineStore('userInfo', () => {
+	const state = ref({
+		userInfo: {},
+		token: '',
+
+	})
+
+	// actions
+	const setUserInfo = (data: any) => {
+		state.value.userInfo = data
+	}
+
+	const setToken = (data: string) => {
+		state.value.token = data
+	}
+
+	const logOut = async () => {
+
+	}
+
+	return {
+		state,
+		setToken,
+		setUserInfo,
+		logOut,
+	}
+})