diff --git a/sau_frontend/src/assets/vue.svg b/sau_frontend/src/assets/vue.svg
new file mode 100644
index 0000000..770e9d3
--- /dev/null
+++ b/sau_frontend/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/sau_frontend/src/components/helloworld.vue b/sau_frontend/src/components/helloworld.vue
new file mode 100644
index 0000000..c3c53b4
--- /dev/null
+++ b/sau_frontend/src/components/helloworld.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="hello-world">
+    <h1>{{ msg }}</h1>
+    <div class="card">
+      <el-button type="primary" @click="count++">
+        点击次数: {{ count }}
+      </el-button>
+      <p class="mt-3">
+        这是一个使用 Element Plus 的示例组件
+      </p>
+    </div>
+    <div class="links mt-4">
+      <el-link href="https://vuejs.org/" target="_blank" type="primary">
+        Vue.js 官网
+      </el-link>
+      <el-link href="https://element-plus.org/" target="_blank" type="success">
+        Element Plus 官网
+      </el-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: {
+    type: String,
+    default: 'Hello Vue 3 + Vite'
+  }
+})
+
+const count = ref(0)
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/variables.scss' as *;
+
+.hello-world {
+  text-align: center;
+  padding: 2rem;
+  
+  h1 {
+    color: #2c3e50;
+    margin-bottom: 2rem;
+  }
+  
+  .card {
+    background: white;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+    
+    p {
+      color: #666;
+    }
+  }
+  
+  .links {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+  }
+}
+</style>
diff --git a/sau_frontend/src/stores/account.js b/sau_frontend/src/stores/account.js
new file mode 100644
index 0000000..1c33d84
--- /dev/null
+++ b/sau_frontend/src/stores/account.js
@@ -0,0 +1,63 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAccountStore = defineStore('account', () => {
+  // 存储所有账号信息
+  const accounts = ref([])
+  
+  // 平台类型映射
+  const platformTypes = {
+    1: '小红书',
+    2: '视频号',
+    3: '抖音',
+    4: '快手'
+  }
+  
+  // 设置账号列表
+  const setAccounts = (accountsData) => {
+    // 转换后端返回的数据格式为前端使用的格式
+    accounts.value = accountsData.map(item => {
+      return {
+        id: item[0],
+        type: item[1],
+        filePath: item[2],
+        name: item[3],
+        status: item[4] === 1 ? '正常' : '异常',
+        platform: platformTypes[item[1]] || '未知',
+        avatar: '/vite.svg' // 默认使用vite.svg作为头像
+      }
+    })
+  }
+  
+  // 添加账号
+  const addAccount = (account) => {
+    accounts.value.push(account)
+  }
+  
+  // 更新账号
+  const updateAccount = (id, updatedAccount) => {
+    const index = accounts.value.findIndex(acc => acc.id === id)
+    if (index !== -1) {
+      accounts.value[index] = { ...accounts.value[index], ...updatedAccount }
+    }
+  }
+  
+  // 删除账号
+  const deleteAccount = (id) => {
+    accounts.value = accounts.value.filter(acc => acc.id !== id)
+  }
+  
+  // 根据平台获取账号
+  const getAccountsByPlatform = (platform) => {
+    return accounts.value.filter(acc => acc.platform === platform)
+  }
+  
+  return {
+    accounts,
+    setAccounts,
+    addAccount,
+    updateAccount,
+    deleteAccount,
+    getAccountsByPlatform
+  }
+})
\ No newline at end of file
diff --git a/sau_frontend/src/stores/app.js b/sau_frontend/src/stores/app.js
new file mode 100644
index 0000000..73054c6
--- /dev/null
+++ b/sau_frontend/src/stores/app.js
@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAppStore = defineStore('app', () => {
+  // 是否是第一次进入账号管理页面
+  const isFirstTimeAccountManagement = ref(true)
+  
+  // 是否是第一次进入素材管理页面
+  const isFirstTimeMaterialManagement = ref(true)
+
+  // 账号管理页面刷新状态
+  const isAccountRefreshing = ref(false)
+
+  // 素材列表数据
+  const materials = ref([])
+  
+  // 设置账号管理页面已访问
+  const setAccountManagementVisited = () => {
+    isFirstTimeAccountManagement.value = false
+  }
+  
+  // 设置素材管理页面已访问
+  const setMaterialManagementVisited = () => {
+    isFirstTimeMaterialManagement.value = false
+  }
+  
+  // 重置所有访问状态（用于重新登录或刷新应用时）
+  const resetVisitStatus = () => {
+    isFirstTimeAccountManagement.value = true
+    isFirstTimeMaterialManagement.value = true
+  }
+
+  // 更新素材列表
+  const setMaterials = (materialList) => {
+    materials.value = materialList
+  }
+
+  // 添加新素材
+  const addMaterial = (material) => {
+    materials.value.push(material)
+  }
+
+  // 删除素材
+  const removeMaterial = (materialId) => {
+    const index = materials.value.findIndex(m => m.id === materialId)
+    if (index > -1) {
+      materials.value.splice(index, 1)
+    }
+  }
+  
+  // 设置账号管理页面刷新状态
+  const setAccountRefreshing = (status) => {
+    isAccountRefreshing.value = status
+  }
+
+  return {
+    isFirstTimeAccountManagement,
+    isFirstTimeMaterialManagement,
+    isAccountRefreshing,
+    materials,
+    setAccountManagementVisited,
+    setMaterialManagementVisited,
+    resetVisitStatus,
+    setMaterials,
+    addMaterial,
+    removeMaterial,
+    setAccountRefreshing
+  }
+})
\ No newline at end of file
diff --git a/sau_frontend/src/stores/index.js b/sau_frontend/src/stores/index.js
new file mode 100644
index 0000000..f8841a1
--- /dev/null
+++ b/sau_frontend/src/stores/index.js
@@ -0,0 +1,9 @@
+import { createPinia } from 'pinia'
+import { useUserStore } from './user'
+import { useAccountStore } from './account'
+import { useAppStore } from './app'
+
+const pinia = createPinia()
+
+export default pinia
+export { useUserStore, useAccountStore, useAppStore }
\ No newline at end of file
diff --git a/sau_frontend/src/stores/user.js b/sau_frontend/src/stores/user.js
new file mode 100644
index 0000000..d9e1604
--- /dev/null
+++ b/sau_frontend/src/stores/user.js
@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useUserStore = defineStore('user', () => {
+  const userInfo = ref({
+    name: '',
+    email: ''
+  })
+  
+  const isLoggedIn = ref(false)
+  
+  const setUserInfo = (info) => {
+    userInfo.value = info
+    isLoggedIn.value = true
+  }
+  
+  const logout = () => {
+    userInfo.value = {
+      name: '',
+      email: ''
+    }
+    isLoggedIn.value = false
+  }
+  
+  return {
+    userInfo,
+    isLoggedIn,
+    setUserInfo,
+    logout
+  }
+})
\ No newline at end of file