From 2bf9f2cbaeecc4baf7957da63a92ea2782714698 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Thu, 20 Nov 2025 16:33:46 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                |  27 +++-
 src/components/Header.vue                  | 123 +++++++++++++++++
 src/components/layout.vue                  |  58 ++++----
 src/components/sidebar.vue                 | 149 ++++++++++++++++-----
 src/main.ts                                |  13 +-
 src/router/index.ts                        |  42 +++---
 src/views/controlPanel/fileStore/index.vue |  21 ++-
 src/views/home/index.vue                   |  27 ++--
 8 files changed, 325 insertions(+), 135 deletions(-)
 create mode 100644 src/components/Header.vue

diff --git a/src/App.vue b/src/App.vue
index 849fab7..e4bd3fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,30 @@
 <!-- src/App.vue -->
 <template>
-  <router-view />
+  <div id="app">
+    <Header />
+    <router-view />
+  </div>
 </template>
 
+<script setup>
+import Header from '@/components/Header.vue'
+</script>
+
 <style>
-/* 全局重置 */
 * {
-  box-sizing: border-box;
-}
-html, body, #app {
   margin: 0;
   padding: 0;
-  height: 100%;
-  width: 100%;
+  box-sizing: border-box;
 }
+
+html, body {
+  height: 100%;
+}
+
+#app {
+  min-height: 100vh;
+  margin-top: 66px;
+}
+
+
 </style>
\ No newline at end of file
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..766bd83
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,123 @@
+<!-- src/components/Header.vue -->
+<template>
+  <div class="header">
+    <!-- 左侧导航 -->
+    <nav class="nav-left">
+      <a href="/" class="nav-item">首页</a>
+      <a href="/compute" class="nav-item">算力中心</a>
+      <a href="/cloud-server" class="nav-item">云主机</a>
+    </nav>
+
+    <!-- 右侧导航 -->
+    <nav class="nav-right">
+      <a href="/docs" class="nav-item">用户文档</a>
+      <a href="/controlPanel" class="nav-item active">控制台</a>
+      <button class="login-btn" @click="goToLogin">登录/注册</button>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// 使用 Vue Router 编程式导航跳转登录页（避免页面刷新）
+const goToLogin = () => {
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 40px;
+  background-color: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  height: 64px;
+  box-sizing: border-box;
+}
+
+.nav-left,
+.nav-right {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+
+.nav-left {
+  padding-left: 8px; /* 增加左侧内边距 */
+}
+
+.nav-right {
+  padding-right: 8px; /* 增加右侧内边距 */
+}
+
+.nav-item {
+  font-size: 15px;
+  color: #333;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  padding: 8px 4px;
+  position: relative;
+  font-weight: 500;
+}
+
+.nav-item:hover {
+  color: #1890ff;
+}
+
+.nav-item.active {
+  color: #1890ff;
+  font-weight: 600;
+}
+
+.nav-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 4px;
+  right: 4px;
+  height: 2px;
+  background-color: #1890ff;
+  border-radius: 1px;
+}
+
+.login-btn {
+  padding: 8px 20px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
+}
+
+.login-btn:hover {
+  background-color: #096dd9;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .header {
+    padding: 16px 20px;
+  }
+  
+  .nav-left,
+  .nav-right {
+    gap: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/layout.vue b/src/components/layout.vue
index 71c9313..d482390 100644
--- a/src/components/layout.vue
+++ b/src/components/layout.vue
@@ -1,51 +1,49 @@
 <!-- src/components/Layout.vue -->
-
-
 <template>
-  <div class="layout">
-    <div class="sidebar-container">
-      <Sidebar />
+    <div class="layout">
+        <!-- 侧边栏 -->
+        <div class="sidebar-container custom-sidebar">
+            <Sidebar />
+        </div>
+
+        <!-- 主要内容区域 -->
+        <div class="main-content">
+            <div class="content">
+                <router-view />
+            </div>
+        </div>
     </div>
-    <div class="main-content">
-      <div class="content">
-        <router-view />
-      </div>
-    </div>
-  </div>
 </template>
 
-
 <script setup lang="ts">
-import Sidebar from './sidebar.vue' 
+import Sidebar from './Sidebar.vue'
 </script>
 
 <style scoped>
 .layout {
-  display: flex;
-  min-height: 100vh;
-  width: 100%;
-  margin: 0;
-  padding: 0;
+    display: flex;
+    min-height: 100vh;
+    width: 100%;
 }
 
 .sidebar-container {
-  width: 200px;
-  flex-shrink: 0;
-  height: 100vh;
-  position: sticky;
-  top: 0;
-  left: 0;
+    width: 240px;
+    flex-shrink: 0;
+    height: 100vh;
+    position: sticky;
+    top: 0;
+    left: 0;
 }
 
 .main-content {
-  flex: 1;
-  min-width: 0;
-  background: #f5f5f5;
+    flex: 1;
+    min-width: 0;
+    background: #f5f5f5;
 }
 
 .content {
-  padding: 20px;
-  background: #fff;
-  min-height: calc(100vh - 40px);
+    padding: 20px;
+    background: #fff;
+    min-height: calc(100vh - 40px);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index 129d02c..fe8adf1 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -7,26 +7,33 @@
       :open-keys="openKeys"
       @click="handleMenuClick"
       theme="light"
+      class="custom-menu"
     >
       <template v-for="item in menuItems" :key="item.path">
         <!-- 有子菜单的项 -->
         <a-sub-menu v-if="item.children && item.children.length" :key="item.path">
           <template #title>
             <span class="menu-item-content">
-              <span class="icon">{{ item.icon }}</span>
-              <span>{{ item.name }}</span>
+              <span class="icon">
+                <component :is="item.icon" />
+              </span>
+              <span class="menu-text">{{ item.name }}</span>
             </span>
           </template>
           <a-menu-item v-for="child in item.children" :key="child.path">
-            <router-link :to="child.path">{{ child.name }}</router-link>
+            <router-link :to="child.path" class="submenu-item">
+              <span class="menu-text">{{ child.name }}</span>
+            </router-link>
           </a-menu-item>
         </a-sub-menu>
-        
+
         <!-- 没有子菜单的项 -->
         <a-menu-item v-else :key="item.path">
           <router-link :to="item.path" class="menu-item-content">
-            <span class="icon">{{ item.icon }}</span>
-            <span>{{ item.name }}</span>
+            <span class="icon">
+              <component :is="item.icon" />
+            </span>
+            <span class="menu-text">{{ item.name }}</span>
           </router-link>
         </a-menu-item>
       </template>
@@ -37,6 +44,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { HomeOutlined,FolderOpenOutlined,ConsoleSqlOutlined ,GlobalOutlined,LaptopOutlined,MoneyCollectOutlined,TeamOutlined} from '@ant-design/icons-vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -44,20 +52,20 @@ const router = useRouter()
 interface MenuItem {
   path: string
   name: string
-  icon: string
+  icon: any
   children?: { path: string; name: string }[]
 }
 
-// 重要：路径要与路由配置匹配，使用 /controlPanel 前缀
 const menuItems: MenuItem[] = [
-  { path: '/controlPanel/fileStore', name: '文件存储', icon: '💾' },
-  { path: '/controlPanel/container', name: '容器实例', icon: '🐳' },
-  { path: '/controlPanel/image', name: '镜像', icon: '🖼️' },
-  { path: '/controlPanel/publicData', name: '公开数据', icon: '📚' },
+  { path: '/controlPanel/overview', name: '总览', icon: HomeOutlined },
+  { path: '/controlPanel/container', name: '容器实例', icon: ConsoleSqlOutlined },
+  { path: '/controlPanel/fileStore', name: '文件存储', icon: FolderOpenOutlined },
+  { path: '/controlPanel/image', name: '镜像', icon: GlobalOutlined },
+  { path: '/controlPanel/publicData', name: '公开数据', icon: LaptopOutlined },
   {
     path: '/controlPanel/fee',
     name: '费用',
-    icon: '💰',
+    icon: MoneyCollectOutlined,
     children: [
       { path: '/controlPanel/fee/detail', name: '详情' },
       { path: '/controlPanel/fee/bill', name: '账单' }
@@ -66,7 +74,7 @@ const menuItems: MenuItem[] = [
   {
     path: '/controlPanel/account',
     name: '账号',
-    icon: '👤',
+    icon: TeamOutlined,
     children: [
       { path: '/controlPanel/account/profile', name: '个人资料' },
       { path: '/controlPanel/account/security', name: '安全设置' }
@@ -74,12 +82,8 @@ const menuItems: MenuItem[] = [
   }
 ]
 
-// 选中的菜单项
-const selectedKeys = computed(() => {
-  return [route.path]
-})
+const selectedKeys = computed(() => [route.path])
 
-// 展开的菜单项
 const openKeys = computed(() => {
   const keys: string[] = []
   if (route.path.startsWith('/controlPanel/fee')) keys.push('/controlPanel/fee')
@@ -87,7 +91,6 @@ const openKeys = computed(() => {
   return keys
 })
 
-// 菜单点击处理
 const handleMenuClick = ({ key }: { key: string }) => {
   router.push(key)
 }
@@ -95,7 +98,7 @@ const handleMenuClick = ({ key }: { key: string }) => {
 
 <style scoped>
 .sidebar {
-  width: 200px;
+  width: 240px; 
   height: 100vh;
   background: #fff;
   box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
@@ -105,23 +108,99 @@ const handleMenuClick = ({ key }: { key: string }) => {
 .menu-item-content {
   display: flex;
   align-items: center;
-}
-
-.icon {
-  margin-right: 8px;
-  width: 20px;
-  text-align: center;
-}
-
-/* 修复链接样式 */
-:deep(.ant-menu-item a) {
-  color: inherit;
-  text-decoration: none;
-  display: block;
   width: 100%;
 }
 
-:deep(.ant-menu-submenu-title) {
+.icon {
+  margin-right: 12px; /* 增加图标和文字的间距 */
+  width: 20px;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px; /* 图标大小 */
+}
+
+.menu-text {
+  font-size: 14px; /* 文字大小 */
+  font-weight: 500; /* 中等字重 */
+  line-height: 1.4;
+}
+
+.submenu-item {
+  display: block;
+  width: 100%;
+  padding-left: 32px; /* 子菜单项缩进 */
+}
+
+/* 自定义菜单样式 */
+:deep(.custom-menu.ant-menu) {
+  font-size: 14px;
+  border: none;
+}
+
+:deep(.custom-menu.ant-menu-inline) {
+  background: transparent;
+}
+
+:deep(.custom-menu .ant-menu-item) {
+  height: 48px; /* 增加菜单项高度 */
+  line-height: 48px;
+  margin: 0;
+  border-radius: 0;
+  width: 100%;
+}
+
+:deep(.custom-menu .ant-menu-item:not(:last-child)) {
+  margin-bottom: 0;
+}
+
+:deep(.custom-menu .ant-menu-submenu-title) {
+  height: 48px; /* 增加子菜单标题高度 */
+  line-height: 48px;
   padding-right: 12px !important;
+  border-radius: 0;
+  margin: 0;
+}
+
+:deep(.custom-menu .ant-menu-submenu .ant-menu-item) {
+  height: 40px; /* 子菜单项稍矮一些 */
+  line-height: 40px;
+  padding-left: 48px !important; /* 子菜单项缩进 */
+}
+
+:deep(.custom-menu .ant-menu-item-selected) {
+  background-color: #e6f7ff; /* 选中背景色 */
+  border-right: 3px solid #1890ff; /* 选中指示条 */
+}
+
+:deep(.custom-menu .ant-menu-item:active),
+:deep(.custom-menu .ant-menu-submenu-title:active) {
+  background-color: #f0f0f0;
+}
+
+:deep(.custom-menu .ant-menu-item a) {
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+:deep(.custom-menu .ant-menu-submenu-arrow) {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+/* 鼠标悬停效果 */
+:deep(.custom-menu .ant-menu-item:hover),
+:deep(.custom-menu .ant-menu-submenu-title:hover) {
+  background-color: #f5f5f5;
+  color: #1890ff;
+}
+
+:deep(.custom-menu .ant-menu-item:hover .icon),
+:deep(.custom-menu .ant-menu-submenu-title:hover .icon) {
+  color: #1890ff;
 }
 </style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index fa1e451..7979476 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,20 +3,13 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
+// 引入 Ant Design Vue 组件
+import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/reset.css'
-// 引入更多必要的组件
-import { 
-  Menu, 
-  MenuItem, 
-  SubMenu 
-} from 'ant-design-vue'
 
 const app = createApp(App)
 
-// 注册组件
-app.use(Menu)
-app.use(MenuItem)
-app.use(SubMenu)
 app.use(router)
+app.use(Antd)  // 全局注册所有 Ant Design 组件
 
 app.mount('#app')
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 96e4617..fdca19e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,40 +2,38 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import Layout from '@/components/Layout.vue'
 
-// 按需导入视图组件
 const HomeView = () => import('@/views/home/index.vue')
 const FileStore = () => import('@/views/controlPanel/fileStore/index.vue')
-const Container = () => import('@/views/controlPanel/container/index.vue')
-const Image = () => import('@/views/controlPanel/image/index.vue')
-// 其他视图组件...
 
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'Home',
-    component: HomeView  // 这个页面独立，不包含侧边栏
+    component: HomeView  // 这个页面独立，不使用Layout
   },
   {
-    path: '/controlPanel',
-    component: Layout,  // 这个路径下的所有页面都使用 Layout（包含侧边栏）
-    redirect: '/controlPanel/fileStore', // 添加重定向到默认子路由
+    path: '/fileStore',
+    name: 'FileStore',
+    component: Layout,  // 使用Layout包装FileStore
     children: [
       {
-        path: '/controlPanel', // 或者写成 'fileStore'（相对路径）
-        name: 'FileStore',
-        component: FileStore,
-      },
+        path: '',  // 空路径，访问 /fileStore 时显示FileStore组件
+        name: 'FileStoreContent',
+        component: FileStore
+      }
+    ]
+  },
+  // 可以继续添加其他使用Layout的路由
+  {
+    path: '/container',
+    name: 'Container',
+    component: Layout,
+    children: [
       {
-        path: '/controlPanel/container',
-        name: 'Container',
-        component: Container,
-      },
-      {
-        path: '/controlPanel/image',
-        name: 'Image',
-        component: Image,
-      },
-      // 可以继续添加其他子路由...
+        path: '',
+        name: 'ContainerContent',
+        component: () => import('@/views/controlPanel/container/index.vue')
+      }
     ]
   }
 ]
diff --git a/src/views/controlPanel/fileStore/index.vue b/src/views/controlPanel/fileStore/index.vue
index 57b54e5..90d93cb 100644
--- a/src/views/controlPanel/fileStore/index.vue
+++ b/src/views/controlPanel/fileStore/index.vue
@@ -1,15 +1,10 @@
-<script setup lang="ts">
-
-</script>
-
-
+<!-- src/views/controlPanel/fileStore/index.vue -->
 <template>
-  <div style="padding: 20px;">
-    <h1>📁 File Store</h1>
-    <p>这里只有文件存储的内容，没有 logo，没有 HelloWorld！</p>
+  <div>
+    <h1>文件存储管理</h1>
+    <p>这个页面显示在Layout中，包含侧边栏</p>
+    <router-link to="/" style="color: blue; text-decoration: underline;">
+      返回首页（无侧边栏）
+    </router-link>
   </div>
-</template>
-
-<style scoped>
-
-</style>
+</template>
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a20a8dd..0675516 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,22 +1,13 @@
-<!-- src/views/HomeView.vue -->
-<script setup lang="ts">
-// import HelloWorld from '@/components/HelloWorld.vue'
-</script>
-
+<!-- src/views/home/index.vue -->
 <template>
-  <div>
-
-
-    <div class="links">
-      <router-link to="/controlPanel/fileStore">File Store</router-link>
-    </div>
-
-    
+  <div >
+    <h1>首页 - 独立页面</h1>
+    <p>这个页面没有侧边栏</p>
+    <router-link to="/fileStore" style="color: blue; text-decoration: underline;">
+      点击进入文件存储（有侧边栏）
+    </router-link>
   </div>
 </template>
 
-<style scoped>
-.logo { height: 6em; padding: 1.5em; }
-.logo:hover { filter: drop-shadow(0 0 2em #646cffaa); }
-.logo.vue:hover { filter: drop-shadow(0 0 2em #42b883aa); }
-</style>
\ No newline at end of file
+<script setup>
+</script>
\ No newline at end of file

From 1b6239b4bc9613ba7dae57ae224f5b58b0d57f59 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Thu, 20 Nov 2025 18:42:27 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/controlPanel/fileStore/index.vue | 767 ++++++++++++++++++++-
 1 file changed, 759 insertions(+), 8 deletions(-)

diff --git a/src/views/controlPanel/fileStore/index.vue b/src/views/controlPanel/fileStore/index.vue
index 90d93cb..b4a96d5 100644
--- a/src/views/controlPanel/fileStore/index.vue
+++ b/src/views/controlPanel/fileStore/index.vue
@@ -1,10 +1,761 @@
-<!-- src/views/controlPanel/fileStore/index.vue -->
 <template>
-  <div>
-    <h1>文件存储管理</h1>
-    <p>这个页面显示在Layout中，包含侧边栏</p>
-    <router-link to="/" style="color: blue; text-decoration: underline;">
-      返回首页（无侧边栏）
-    </router-link>
+  <div class="container">
+    <header>
+      <h1>文件存储</h1>
+    </header>
+    
+    <div class="storage-grid">
+      <div 
+        v-for="storage in storageOptions" 
+        :key="storage.id"
+        :class="['storage-card', storage.class, { selected: selectedStorage === storage.id }]"
+        @click="selectStorage(storage.id)"
+      >
+        <div class="card-header">
+          <div class="card-icon">
+            <i :class="storage.icon"></i>
+          </div>
+          <div class="card-title">{{ storage.name }}</div>
+        </div>
+        <div class="card-description">
+          {{ storage.description }}
+        </div>
+        <div class="card-stats">
+          <div class="stat">
+            <div class="stat-value">{{ storage.capacity }}</div>
+            <div class="stat-label">存储容量</div>
+          </div>
+          <div class="stat">
+            <div class="stat-value">{{ storage.speed }}</div>
+            <div class="stat-label">传输速度</div>
+          </div>
+          <div class="stat">
+            <div class="stat-value">{{ storage.price }}</div>
+            <div class="stat-label">价格/月</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="divider"></div>
+    
+    <section class="init-section">
+      <h2>初始化文件存储</h2>
+      <div class="init-content">
+        <div class="init-form" v-if="!isInitialized">
+          <div class="form-group">
+            <label for="storageName">存储名称</label>
+            <input 
+              id="storageName"
+              v-model="initForm.name"
+              type="text" 
+              placeholder="请输入存储名称"
+              :class="{ error: formErrors.name }"
+            >
+            <span class="error-message" v-if="formErrors.name">{{ formErrors.name }}</span>
+          </div>
+          
+          <div class="form-group">
+            <label for="storageSize">存储容量</label>
+            <div class="size-input">
+              <input 
+                id="storageSize"
+                v-model.number="initForm.size"
+                type="number" 
+                placeholder="请输入存储容量"
+                :class="{ error: formErrors.size }"
+              >
+              <select v-model="initForm.sizeUnit">
+                <option value="GB">GB</option>
+                <option value="TB">TB</option>
+                <option value="PB">PB</option>
+              </select>
+            </div>
+            <span class="error-message" v-if="formErrors.size">{{ formErrors.size }}</span>
+          </div>
+          
+          <div class="form-group">
+            <label>存储类型</label>
+            <div class="radio-group">
+              <label class="radio-option">
+                <input 
+                  type="radio" 
+                  v-model="initForm.storageType" 
+                  value="standard"
+                >
+                <span class="radio-label">标准存储</span>
+              </label>
+              <label class="radio-option">
+                <input 
+                  type="radio" 
+                  v-model="initForm.storageType" 
+                  value="archive"
+                >
+                <span class="radio-label">归档存储</span>
+              </label>
+              <label class="radio-option">
+                <input 
+                  type="radio" 
+                  v-model="initForm.storageType" 
+                  value="performance"
+                >
+                <span class="radio-label">性能存储</span>
+              </label>
+            </div>
+          </div>
+          
+          <div class="form-group">
+            <label class="checkbox-option">
+              <input 
+                type="checkbox" 
+                v-model="initForm.enableEncryption"
+              >
+              <span class="checkmark"></span>
+              启用数据加密
+            </label>
+          </div>
+          
+          <div class="form-actions">
+            <button class="btn btn-outline" @click="resetForm">重置</button>
+            <button 
+              class="btn btn-primary" 
+              @click="initializeStorage"
+              :disabled="!canInitialize"
+            >
+              {{ isInitializing ? '初始化中...' : '开始初始化' }}
+            </button>
+          </div>
+        </div>
+        
+        <div class="init-success" v-else>
+          <div class="success-icon">
+            <i class="fas fa-check-circle"></i>
+          </div>
+          <h3>初始化成功！</h3>
+          <p>文件存储已成功创建，您现在可以开始使用了。</p>
+          <div class="storage-info">
+            <div class="info-item">
+              <span class="info-label">存储名称：</span>
+              <span class="info-value">{{ initializedStorage.name }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">存储区域：</span>
+              <span class="info-value">{{ getSelectedStorageName() }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">存储容量：</span>
+              <span class="info-value">{{ initializedStorage.size }} {{ initializedStorage.sizeUnit }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">存储类型：</span>
+              <span class="info-value">{{ getStorageTypeText(initializedStorage.storageType) }}</span>
+            </div>
+          </div>
+          <div class="success-actions">
+            <button class="btn btn-outline" @click="createNewStorage">创建新的存储</button>
+            <button class="btn btn-primary" @click="goToStorage">进入文件存储</button>
+          </div>
+        </div>
+        
+        <div class="init-help">
+          <h3>文件存储使用介绍</h3>
+          <p>选择适合您需求的存储区域，配置存储参数并开始使用</p>
+          <div v-if="selectedStorage" class="selected-info">
+            当前选择: <strong>{{ getSelectedStorageName() }}</strong>
+          </div>
+          <div class="help-actions">
+            <button class="btn btn-outline">查看文档</button>
+            <button class="btn btn-primary" @click="viewPricingRules">查看计费规则</button>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+
+// 定义存储选项接口
+interface StorageOption {
+  id: number
+  name: string
+  class: string
+  icon: string
+  description: string
+  capacity: string
+  speed: string
+  price: string
+}
+
+// 定义初始化表单接口
+interface InitForm {
+  name: string
+  size: number | null
+  sizeUnit: string
+  storageType: string
+  enableEncryption: boolean
+}
+
+interface FormErrors {
+  name?: string
+  size?: string
+}
+
+interface InitializedStorage {
+  name: string
+  size: number
+  sizeUnit: string
+  storageType: string
+  enableEncryption: boolean
+}
+
+// 响应式数据
+const selectedStorage = ref<number | null>(null)
+const isInitializing = ref(false)
+const isInitialized = ref(false)
+
+// 初始化表单数据
+const initForm = reactive<InitForm>({
+  name: '',
+  size: null,
+  sizeUnit: 'GB',
+  storageType: 'standard',
+  enableEncryption: true
+})
+
+const formErrors = reactive<FormErrors>({})
+const initializedStorage = ref<InitializedStorage | null>(null)
+
+// 存储选项数据
+const storageOptions = ref<StorageOption[]>([
+  {
+    id: 1,
+    name: 'A100专区',
+    class: 'a100',
+    icon: 'fas fa-microchip',
+    description: '高性能计算存储，适用于AI训练和大数据分析',
+    capacity: '10TB',
+    speed: '10Gbps',
+    price: '¥299'
+  },
+  {
+    id: 2,
+    name: 'V100专区',
+    class: 'v100',
+    icon: 'fas fa-server',
+    description: '企业级存储解决方案，提供高可靠性和稳定性',
+    capacity: '20TB',
+    speed: '8Gbps',
+    price: '¥499'
+  },
+  {
+    id: 3,
+    name: '佛山区',
+    class: 'foshan',
+    icon: 'fas fa-map-marker-alt',
+    description: '华南地区存储节点，低延迟访问',
+    capacity: '15TB',
+    speed: '6Gbps',
+    price: '¥199'
+  },
+  {
+    id: 4,
+    name: '北京B区',
+    class: 'beijing',
+    icon: 'fas fa-cloud',
+    description: '华北地区存储节点，高可用性架构',
+    capacity: '25TB',
+    speed: '12Gbps',
+    price: '¥399'
+  }
+])
+
+// 计算属性
+const canInitialize = computed(() => {
+  return selectedStorage.value !== null && 
+         initForm.name.trim() !== '' && 
+         initForm.size !== null && 
+         initForm.size > 0
+})
+
+// 方法：选择存储区域
+const selectStorage = (id: number): void => {
+  selectedStorage.value = id
+}
+
+// 方法：获取选中的存储名称
+const getSelectedStorageName = (): string => {
+  const selected = storageOptions.value.find(storage => storage.id === selectedStorage.value)
+  return selected ? selected.name : ''
+}
+
+// 方法：验证表单
+const validateForm = (): boolean => {
+  // 清空错误信息
+  formErrors.name = ''
+  formErrors.size = ''
+
+  let isValid = true
+
+  if (!initForm.name.trim()) {
+    formErrors.name = '请输入存储名称'
+    isValid = false
+  }
+
+  if (initForm.size === null || initForm.size <= 0) {
+    formErrors.size = '请输入有效的存储容量'
+    isValid = false
+  }
+
+  return isValid
+}
+
+// 方法：初始化存储
+const initializeStorage = async (): Promise<void> => {
+  if (!validateForm()) {
+    return
+  }
+
+  if (!selectedStorage.value) {
+    alert('请先选择存储区域')
+    return
+  }
+
+  isInitializing.value = true
+
+  try {
+    // 模拟API调用
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    
+    // 保存初始化后的存储信息
+    initializedStorage.value = {
+      name: initForm.name,
+      size: initForm.size!,
+      sizeUnit: initForm.sizeUnit,
+      storageType: initForm.storageType,
+      enableEncryption: initForm.enableEncryption
+    }
+    
+    isInitialized.value = true
+  } catch (error) {
+    console.error('初始化失败:', error)
+    alert('初始化失败，请重试')
+  } finally {
+    isInitializing.value = false
+  }
+}
+
+// 方法：重置表单
+const resetForm = (): void => {
+  initForm.name = ''
+  initForm.size = null
+  initForm.sizeUnit = 'GB'
+  initForm.storageType = 'standard'
+  initForm.enableEncryption = true
+  
+  // 清空错误信息
+  formErrors.name = ''
+  formErrors.size = ''
+}
+
+// 方法：创建新的存储
+const createNewStorage = (): void => {
+  isInitialized.value = false
+  resetForm()
+}
+
+// 方法：进入文件存储
+const goToStorage = (): void => {
+  alert('正在跳转到文件存储管理页面...')
+  // 实际项目中这里会进行页面跳转
+}
+
+// 方法：获取存储类型文本
+const getStorageTypeText = (type: string): string => {
+  const typeMap: { [key: string]: string } = {
+    standard: '标准存储',
+    archive: '归档存储',
+    performance: '性能存储'
+  }
+  return typeMap[type] || type
+}
+
+// 方法：查看计费规则
+const viewPricingRules = (): void => {
+  alert('计费规则页面即将打开')
+}
+</script>
+
+<style scoped>
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  margin-bottom: 30px;
+}
+
+h1 {
+  font-size: 2.2rem;
+  color: #2c3e50;
+  margin-bottom: 10px;
+}
+
+.divider {
+  height: 1px;
+  background: linear-gradient(to right, transparent, #ddd, transparent);
+  margin: 25px 0;
+}
+
+h2 {
+  font-size: 1.6rem;
+  color: #34495e;
+  margin-bottom: 15px;
+}
+
+.storage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.storage-card {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: 2px solid transparent;
+}
+
+.storage-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+}
+
+.storage-card.selected {
+  border-color: #3498db;
+  background-color: #f8fafd;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.card-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
+  font-size: 1.5rem;
+}
+
+.a100 .card-icon {
+  background-color: #e8f4fd;
+  color: #3498db;
+}
+
+.v100 .card-icon {
+  background-color: #e8f6f3;
+  color: #1abc9c;
+}
+
+.foshan .card-icon {
+  background-color: #fef9e7;
+  color: #f39c12;
+}
+
+.beijing .card-icon {
+  background-color: #fdedec;
+  color: #e74c3c;
+}
+
+.card-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.card-description {
+  color: #7f8c8d;
+  font-size: 0.9rem;
+  margin-bottom: 15px;
+}
+
+.card-stats {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.stat {
+  text-align: center;
+}
+
+.stat-value {
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.stat-label {
+  font-size: 0.8rem;
+  color: #7f8c8d;
+}
+
+.init-section {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.init-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+}
+
+.init-form {
+  grid-column: 1;
+}
+
+.init-help {
+  grid-column: 2;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.form-group input[type="text"],
+.form-group input[type="number"] {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.3s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #3498db;
+}
+
+.form-group input.error {
+  border-color: #e74c3c;
+}
+
+.error-message {
+  color: #e74c3c;
+  font-size: 12px;
+  margin-top: 5px;
+  display: block;
+}
+
+.size-input {
+  display: flex;
+  gap: 10px;
+}
+
+.size-input input {
+  flex: 1;
+}
+
+.size-input select {
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: white;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.radio-option input {
+  margin-right: 8px;
+}
+
+.checkbox-option {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.checkbox-option input {
+  margin-right: 8px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 30px;
+}
+
+.btn {
+  padding: 10px 20px;
+  border-radius: 6px;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background-color: #3498db;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: #2980b9;
+}
+
+.btn-outline {
+  background-color: transparent;
+  border: 1px solid #3498db;
+  color: #3498db;
+}
+
+.btn-outline:hover {
+  background-color: #e8f4fd;
+}
+
+.init-success {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.success-icon {
+  font-size: 4rem;
+  color: #27ae60;
+  margin-bottom: 20px;
+}
+
+.success-icon i {
+  animation: scaleIn 0.5s ease;
+}
+
+@keyframes scaleIn {
+  0% { transform: scale(0); }
+  70% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+.storage-info {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 30px 0;
+  text-align: left;
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.info-item:last-child {
+  margin-bottom: 0;
+  border-bottom: none;
+}
+
+.info-label {
+  font-weight: 600;
+  color: #495057;
+}
+
+.info-value {
+  color: #6c757d;
+}
+
+.success-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 30px;
+}
+
+.selected-info {
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #e8f4fd;
+  border-radius: 8px;
+  border-left: 4px solid #3498db;
+}
+
+.help-actions {
+  margin-top: 20px;
+}
+
+.init-help h3 {
+  font-size: 1.4rem;
+  margin-bottom: 8px;
+  color: #2c3e50;
+}
+
+.init-help p {
+  color: #7f8c8d;
+  margin-bottom: 15px;
+}
+
+@media (max-width: 768px) {
+  .storage-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .init-content {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  
+  .init-form,
+  .init-help {
+    grid-column: 1;
+  }
+  
+  .success-actions {
+    flex-direction: column;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+  }
+}
+</style>
\ No newline at end of file

From 0f5690fadb31582db00e6d2a8f9b52779a000cfc Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Fri, 21 Nov 2025 16:34:12 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  21 +-
 src/components/sidebar.vue                    |   6 +-
 src/router/index.ts                           |  14 +
 .../controlPanel/account/history/index.vue    | 116 +++
 .../controlPanel/account/security/index.vue   | 203 +++++
 src/views/controlPanel/fileStore/index.vue    | 844 ++++--------------
 6 files changed, 524 insertions(+), 680 deletions(-)
 create mode 100644 src/views/controlPanel/account/history/index.vue
 create mode 100644 src/views/controlPanel/account/security/index.vue

diff --git a/src/App.vue b/src/App.vue
index e4bd3fb..784c26a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,9 @@
-<!-- src/App.vue -->
 <template>
   <div id="app">
     <Header />
-    <router-view />
+    <main class="main-content">
+      <router-view />
+    </main>
   </div>
 </template>
 
@@ -19,12 +20,26 @@ import Header from '@/components/Header.vue'
 
 html, body {
   height: 100%;
+  overflow-x: hidden; /* 可选：防止水平滚动 */
 }
 
 #app {
   min-height: 100vh;
-  margin-top: 66px;
+  display: flex;
+  flex-direction: column;
 }
 
+/* 假设 Header 高度是 66px */
+header {
+  height: 66px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
 
+.main-content {
+  padding-top: 30px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index fe8adf1..b47ee69 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -76,7 +76,8 @@ const menuItems: MenuItem[] = [
     name: '账号',
     icon: TeamOutlined,
     children: [
-      { path: '/controlPanel/account/profile', name: '个人资料' },
+     { path: '/accountSecurity', name: '账号安全' },
+      { path: '/accountHistory', name: '访问记录' },
       { path: '/controlPanel/account/security', name: '安全设置' }
     ]
   }
@@ -102,7 +103,8 @@ const handleMenuClick = ({ key }: { key: string }) => {
   height: 100vh;
   background: #fff;
   box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
-  overflow-y: auto;
+  padding-top:30px;
+  /* overflow-y: auto; */
 }
 
 .menu-item-content {
diff --git a/src/router/index.ts b/src/router/index.ts
index fdca19e..508b413 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -4,6 +4,10 @@ import Layout from '@/components/Layout.vue'
 
 const HomeView = () => import('@/views/home/index.vue')
 const FileStore = () => import('@/views/controlPanel/fileStore/index.vue')
+// 账号安全
+const AccountSecurity = () => import('@/views/controlPanel/account/security/index.vue')
+// 访问记录
+const AccountHistory = () => import('@/views/controlPanel/account/history/index.vue')
 
 const routes: RouteRecordRaw[] = [
   {
@@ -20,6 +24,16 @@ const routes: RouteRecordRaw[] = [
         path: '',  // 空路径，访问 /fileStore 时显示FileStore组件
         name: 'FileStoreContent',
         component: FileStore
+      },
+      {
+        path: '/accountSecurity', 
+        name: 'AccountSecurity',
+        component: AccountSecurity
+      },
+       {
+        path: '/accountHistory', 
+        name: 'AccountHistory',
+        component: AccountHistory
       }
     ]
   },
diff --git a/src/views/controlPanel/account/history/index.vue b/src/views/controlPanel/account/history/index.vue
new file mode 100644
index 0000000..cf0c8b3
--- /dev/null
+++ b/src/views/controlPanel/account/history/index.vue
@@ -0,0 +1,116 @@
+<!-- src/components/AccessLog.vue -->
+<template>
+  <div class="access-log">
+    <div class="title-wrapper">
+      <h3>访问记录</h3>
+      <span class="desc">以下显示内容为账号及其子账号近3个月的登录记录</span>
+    </div>
+
+    <a-table
+      :columns="columns"
+      :data-source="loginRecords"
+      :pagination="false"
+      size="middle"
+      :bordered="true"
+      class="login-table"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 定义类型
+interface LoginRecord {
+  id: number;
+  time: string;
+  ip: string;
+  city: string;
+  type: string;
+  operator: string;
+}
+
+// 模拟数据
+const loginRecords = ref<LoginRecord[]>([
+  {
+    id: 1,
+    time: '2025-11-21 09:58:38',
+    ip: '183.209.69.36',
+    city: '中国 江苏省',
+    type: 'Web微信登录',
+    operator: '炼丹师5075',
+  },
+  {
+    id: 2,
+    time: '2025-11-19 17:07:13',
+    ip: '183.209.69.36',
+    city: '中国 江苏省',
+    type: 'Web微信登录',
+    operator: '炼丹师5075',
+  },
+]);
+
+// 表格列配置
+const columns = [
+  {
+    title: '访问时间',
+    dataIndex: 'time',
+    key: 'time',
+    width: 200,
+  },
+  {
+    title: '访问IP地址',
+    dataIndex: 'ip',
+    key: 'ip',
+    width: 180,
+  },
+  {
+    title: '访问城市',
+    dataIndex: 'city',
+    key: 'city',
+    width: 180,
+  },
+  {
+    title: '登录类型',
+    dataIndex: 'type',
+    key: 'type',
+    width: 200,
+  },
+  {
+    title: '操作人',
+    dataIndex: 'operator',
+    key: 'operator',
+    width: 180,
+  },
+];
+</script>
+
+<style scoped>
+.access-log {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.title-wrapper h3 {
+  margin: 0;
+  color: #333;
+  font-size: 1.2em;
+}
+
+.desc {
+  color: #faad14;
+  font-size: 14px;
+  font-weight: normal;
+}
+
+.login-table {
+  border-radius: 6px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/controlPanel/account/security/index.vue b/src/views/controlPanel/account/security/index.vue
new file mode 100644
index 0000000..495af44
--- /dev/null
+++ b/src/views/controlPanel/account/security/index.vue
@@ -0,0 +1,203 @@
+<!-- src/components/AccountSecurity.vue -->
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
+
+// 定义安全项接口
+interface SecurityItem {
+  title: string;
+  description: string;
+  status: 'unset' | 'bound' | 'unverified' | 'verified';
+  actionText: string;
+  actionHandler: () => void;
+}
+
+const securityItems = ref<SecurityItem[]>([
+  {
+    title: '登录密码',
+    description: '安全性高的密码可以使账号更安全。建议您定期更换密码，设置一个包含字母和数字且长度超过8位的密码',
+    status: 'unset',
+    actionText: '设置',
+    actionHandler: () => alert('跳转到设置密码页面'),
+  },
+  {
+    title: '手机绑定',
+    description: '您已绑定了手机178****5075您的手机号可以直接用于登录、找回密码等',
+    status: 'bound',
+    actionText: '修改',
+    actionHandler: () => alert('跳转到修改手机号页面'),
+  },
+  {
+    title: '实名认证',
+    description: '实名认证后可以使用AutoDL更完整的功能，如打开实例的自定义服务等',
+    status: 'unverified',
+    actionText: '立即认证',
+    actionHandler: () => alert('跳转到实名认证页面'),
+  },
+  {
+    title: '微信绑定',
+    description: '您已绑定微信，可快速扫码登录',
+    status: 'bound',
+    actionText: '解绑',
+    actionHandler: () => alert('确认解绑微信？'),
+  },
+  {
+    title: '邮箱绑定',
+    description: '绑定邮箱后可接收系统消息，如余额不足、实例即将到期、实例即将释放等消息',
+    status: 'unset',
+    actionText: '绑定',
+    actionHandler: () => alert('跳转到绑定邮箱页面'),
+  },
+]);
+
+// 根据状态返回对应图标和颜色
+const getStatusIcon = (status: SecurityItem['status']) => {
+  switch (status) {
+    case 'bound':
+      return CheckCircleOutlined;
+    case 'unverified':
+    case 'unset':
+      return ExclamationCircleOutlined;
+    default:
+      return null;
+  }
+};
+
+const getStatusColor = (status: SecurityItem['status']) => {
+  switch (status) {
+    case 'bound':
+      return 'green';
+    case 'unverified':
+    case 'unset':
+      return 'red';
+    default:
+      return 'gray';
+  }
+};
+
+const getActionColor = (status: SecurityItem['status']) => {
+  if (status === 'bound') {
+    return 'blue';
+  }
+  return 'blue'; // 默认蓝色
+};
+</script>
+
+<template>
+  <div class="account-security">
+    <h2>账号安全</h2>
+    <div v-for="(item, index) in securityItems" :key="index" class="security-item">
+      <div class="item-header">
+        <span class="title">{{ item.title }}</span>
+        <div class="status">
+          <component
+            :is="getStatusIcon(item.status)"
+            v-if="getStatusIcon(item.status)"
+            :class="['icon', `color-${getStatusColor(item.status)}`]"
+          />
+          <span :class="['text', `color-${getStatusColor(item.status)}`]">
+            {{ item.status === 'bound' ? '已绑定' : item.status === 'unverified' ? '未认证' : '未设置' }}
+          </span>
+          <span class="divider">|</span>
+          <button
+            class="action-btn"
+            :class="`color-${getActionColor(item.status)}`"
+            @click="item.actionHandler"
+          >
+            {{ item.actionText }}
+          </button>
+        </div>
+      </div>
+      <p class="description">{{ item.description }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.account-security {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.account-security h2 {
+  margin-top: 0;
+  color: #333;
+  font-size: 1.4em;
+}
+
+.security-item {
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  padding: 16px;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.title {
+  font-weight: bold;
+  color: #333;
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.text {
+  font-size: 14px;
+  font-weight: normal;
+}
+
+.divider {
+  color: #ccc;
+  font-size: 14px;
+}
+
+.action-btn {
+  background: none;
+  border: none;
+  color: #0066cc;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0;
+  margin-left: 8px;
+  text-decoration: underline;
+}
+
+.action-btn:hover {
+  text-decoration: none;
+}
+
+.color-green {
+  color: #52c41a !important;
+}
+
+.color-red {
+  color: #ff4d4f !important;
+}
+
+.color-blue {
+  color: #0066cc !important;
+}
+
+.description {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/controlPanel/fileStore/index.vue b/src/views/controlPanel/fileStore/index.vue
index b4a96d5..04de818 100644
--- a/src/views/controlPanel/fileStore/index.vue
+++ b/src/views/controlPanel/fileStore/index.vue
@@ -1,761 +1,255 @@
 <template>
   <div class="container">
-    <header>
+    <!-- 标题 -->
+    <div class="header">
       <h1>文件存储</h1>
-    </header>
-    
-    <div class="storage-grid">
-      <div 
-        v-for="storage in storageOptions" 
-        :key="storage.id"
-        :class="['storage-card', storage.class, { selected: selectedStorage === storage.id }]"
-        @click="selectStorage(storage.id)"
-      >
-        <div class="card-header">
-          <div class="card-icon">
-            <i :class="storage.icon"></i>
-          </div>
-          <div class="card-title">{{ storage.name }}</div>
-        </div>
-        <div class="card-description">
-          {{ storage.description }}
-        </div>
-        <div class="card-stats">
-          <div class="stat">
-            <div class="stat-value">{{ storage.capacity }}</div>
-            <div class="stat-label">存储容量</div>
-          </div>
-          <div class="stat">
-            <div class="stat-value">{{ storage.speed }}</div>
-            <div class="stat-label">传输速度</div>
-          </div>
-          <div class="stat">
-            <div class="stat-value">{{ storage.price }}</div>
-            <div class="stat-label">价格/月</div>
-          </div>
-        </div>
+    </div>
+
+    <!-- 区域选择 -->
+    <div class="region-section">
+      <h2 class="section-title">选择存储区域</h2>
+      <div class="region-tabs">
+        <button
+          v-for="region in regions"
+          :key="region.id"
+          :class="['region-tab', { active: selectedRegion === region.id }]"
+          @click="selectRegion(region.id)"
+        >
+          {{ region.name }}
+        </button>
       </div>
     </div>
-    
-    <div class="divider"></div>
-    
-    <section class="init-section">
-      <h2>初始化文件存储</h2>
-      <div class="init-content">
-        <div class="init-form" v-if="!isInitialized">
-          <div class="form-group">
-            <label for="storageName">存储名称</label>
-            <input 
-              id="storageName"
-              v-model="initForm.name"
-              type="text" 
-              placeholder="请输入存储名称"
-              :class="{ error: formErrors.name }"
-            >
-            <span class="error-message" v-if="formErrors.name">{{ formErrors.name }}</span>
-          </div>
-          
-          <div class="form-group">
-            <label for="storageSize">存储容量</label>
-            <div class="size-input">
-              <input 
-                id="storageSize"
-                v-model.number="initForm.size"
-                type="number" 
-                placeholder="请输入存储容量"
-                :class="{ error: formErrors.size }"
-              >
-              <select v-model="initForm.sizeUnit">
-                <option value="GB">GB</option>
-                <option value="TB">TB</option>
-                <option value="PB">PB</option>
-              </select>
-            </div>
-            <span class="error-message" v-if="formErrors.size">{{ formErrors.size }}</span>
-          </div>
-          
-          <div class="form-group">
-            <label>存储类型</label>
-            <div class="radio-group">
-              <label class="radio-option">
-                <input 
-                  type="radio" 
-                  v-model="initForm.storageType" 
-                  value="standard"
-                >
-                <span class="radio-label">标准存储</span>
-              </label>
-              <label class="radio-option">
-                <input 
-                  type="radio" 
-                  v-model="initForm.storageType" 
-                  value="archive"
-                >
-                <span class="radio-label">归档存储</span>
-              </label>
-              <label class="radio-option">
-                <input 
-                  type="radio" 
-                  v-model="initForm.storageType" 
-                  value="performance"
-                >
-                <span class="radio-label">性能存储</span>
-              </label>
-            </div>
-          </div>
-          
-          <div class="form-group">
-            <label class="checkbox-option">
-              <input 
-                type="checkbox" 
-                v-model="initForm.enableEncryption"
-              >
-              <span class="checkmark"></span>
-              启用数据加密
-            </label>
-          </div>
-          
-          <div class="form-actions">
-            <button class="btn btn-outline" @click="resetForm">重置</button>
-            <button 
-              class="btn btn-primary" 
-              @click="initializeStorage"
-              :disabled="!canInitialize"
-            >
-              {{ isInitializing ? '初始化中...' : '开始初始化' }}
-            </button>
-          </div>
-        </div>
-        
-        <div class="init-success" v-else>
-          <div class="success-icon">
-            <i class="fas fa-check-circle"></i>
-          </div>
-          <h3>初始化成功！</h3>
-          <p>文件存储已成功创建，您现在可以开始使用了。</p>
-          <div class="storage-info">
-            <div class="info-item">
-              <span class="info-label">存储名称：</span>
-              <span class="info-value">{{ initializedStorage.name }}</span>
-            </div>
-            <div class="info-item">
-              <span class="info-label">存储区域：</span>
-              <span class="info-value">{{ getSelectedStorageName() }}</span>
-            </div>
-            <div class="info-item">
-              <span class="info-label">存储容量：</span>
-              <span class="info-value">{{ initializedStorage.size }} {{ initializedStorage.sizeUnit }}</span>
-            </div>
-            <div class="info-item">
-              <span class="info-label">存储类型：</span>
-              <span class="info-value">{{ getStorageTypeText(initializedStorage.storageType) }}</span>
-            </div>
-          </div>
-          <div class="success-actions">
-            <button class="btn btn-outline" @click="createNewStorage">创建新的存储</button>
-            <button class="btn btn-primary" @click="goToStorage">进入文件存储</button>
-          </div>
-        </div>
-        
-        <div class="init-help">
-          <h3>文件存储使用介绍</h3>
-          <p>选择适合您需求的存储区域，配置存储参数并开始使用</p>
-          <div v-if="selectedStorage" class="selected-info">
-            当前选择: <strong>{{ getSelectedStorageName() }}</strong>
-          </div>
-          <div class="help-actions">
-            <button class="btn btn-outline">查看文档</button>
-            <button class="btn btn-primary" @click="viewPricingRules">查看计费规则</button>
-          </div>
-        </div>
+
+    <!-- 中心图标 -->
+    <div class="center-section">
+      <div class="center-icon">
+        <i class="icon-book"></i>
       </div>
-    </section>
+    </div>
+
+    <!-- 主要操作按钮 -->
+    <div class="action-section">
+      <button class="btn-primary" @click="initializeStorage">
+        初始化文件存储
+      </button>
+      <p class="action-hint">将在 {{ getSelectedRegionName() }} 创建存储空间</p>
+    </div>
+
+    <!-- 底部帮助链接 -->
+    <div class="help-section">
+      <div class="help-links">
+        <a href="#" class="link" @click.prevent="viewHelp">文件存储使用介绍</a>
+        <a href="#" class="link" @click.prevent="viewPricing">查看计费规则</a>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
+import { ref } from 'vue'
 
-// 定义存储选项接口
-interface StorageOption {
-  id: number
+// 定义区域选项
+interface Region {
+  id: string
   name: string
-  class: string
-  icon: string
-  description: string
-  capacity: string
-  speed: string
-  price: string
 }
 
-// 定义初始化表单接口
-interface InitForm {
-  name: string
-  size: number | null
-  sizeUnit: string
-  storageType: string
-  enableEncryption: boolean
+const regions = [
+  { id: 'a100', name: 'A100专区' },
+  { id: 'v100', name: 'V100专区' },
+  { id: 'foshan', name: '佛山区' },
+  { id: 'beijing', name: '北京B区' }
+]
+
+const selectedRegion = ref('a100') // 默认选中 A100
+
+// 方法：获取选中区域名称
+const getSelectedRegionName = () => {
+  const region = regions.find(r => r.id === selectedRegion.value)
+  return region ? region.name : ''
 }
 
-interface FormErrors {
-  name?: string
-  size?: string
-}
-
-interface InitializedStorage {
-  name: string
-  size: number
-  sizeUnit: string
-  storageType: string
-  enableEncryption: boolean
-}
-
-// 响应式数据
-const selectedStorage = ref<number | null>(null)
-const isInitializing = ref(false)
-const isInitialized = ref(false)
-
-// 初始化表单数据
-const initForm = reactive<InitForm>({
-  name: '',
-  size: null,
-  sizeUnit: 'GB',
-  storageType: 'standard',
-  enableEncryption: true
-})
-
-const formErrors = reactive<FormErrors>({})
-const initializedStorage = ref<InitializedStorage | null>(null)
-
-// 存储选项数据
-const storageOptions = ref<StorageOption[]>([
-  {
-    id: 1,
-    name: 'A100专区',
-    class: 'a100',
-    icon: 'fas fa-microchip',
-    description: '高性能计算存储，适用于AI训练和大数据分析',
-    capacity: '10TB',
-    speed: '10Gbps',
-    price: '¥299'
-  },
-  {
-    id: 2,
-    name: 'V100专区',
-    class: 'v100',
-    icon: 'fas fa-server',
-    description: '企业级存储解决方案，提供高可靠性和稳定性',
-    capacity: '20TB',
-    speed: '8Gbps',
-    price: '¥499'
-  },
-  {
-    id: 3,
-    name: '佛山区',
-    class: 'foshan',
-    icon: 'fas fa-map-marker-alt',
-    description: '华南地区存储节点，低延迟访问',
-    capacity: '15TB',
-    speed: '6Gbps',
-    price: '¥199'
-  },
-  {
-    id: 4,
-    name: '北京B区',
-    class: 'beijing',
-    icon: 'fas fa-cloud',
-    description: '华北地区存储节点，高可用性架构',
-    capacity: '25TB',
-    speed: '12Gbps',
-    price: '¥399'
-  }
-])
-
-// 计算属性
-const canInitialize = computed(() => {
-  return selectedStorage.value !== null && 
-         initForm.name.trim() !== '' && 
-         initForm.size !== null && 
-         initForm.size > 0
-})
-
-// 方法：选择存储区域
-const selectStorage = (id: number): void => {
-  selectedStorage.value = id
-}
-
-// 方法：获取选中的存储名称
-const getSelectedStorageName = (): string => {
-  const selected = storageOptions.value.find(storage => storage.id === selectedStorage.value)
-  return selected ? selected.name : ''
-}
-
-// 方法：验证表单
-const validateForm = (): boolean => {
-  // 清空错误信息
-  formErrors.name = ''
-  formErrors.size = ''
-
-  let isValid = true
-
-  if (!initForm.name.trim()) {
-    formErrors.name = '请输入存储名称'
-    isValid = false
-  }
-
-  if (initForm.size === null || initForm.size <= 0) {
-    formErrors.size = '请输入有效的存储容量'
-    isValid = false
-  }
-
-  return isValid
+// 方法：选择区域
+const selectRegion = (id: string) => {
+  selectedRegion.value = id
 }
 
 // 方法：初始化存储
-const initializeStorage = async (): Promise<void> => {
-  if (!validateForm()) {
-    return
-  }
-
-  if (!selectedStorage.value) {
-    alert('请先选择存储区域')
-    return
-  }
-
-  isInitializing.value = true
-
-  try {
-    // 模拟API调用
-    await new Promise(resolve => setTimeout(resolve, 2000))
-    
-    // 保存初始化后的存储信息
-    initializedStorage.value = {
-      name: initForm.name,
-      size: initForm.size!,
-      sizeUnit: initForm.sizeUnit,
-      storageType: initForm.storageType,
-      enableEncryption: initForm.enableEncryption
-    }
-    
-    isInitialized.value = true
-  } catch (error) {
-    console.error('初始化失败:', error)
-    alert('初始化失败，请重试')
-  } finally {
-    isInitializing.value = false
-  }
+const initializeStorage = () => {
+  alert(`正在初始化 ${selectedRegion.value} 的文件存储...`)
+  // 这里可以跳转到下一步流程
 }
 
-// 方法：重置表单
-const resetForm = (): void => {
-  initForm.name = ''
-  initForm.size = null
-  initForm.sizeUnit = 'GB'
-  initForm.storageType = 'standard'
-  initForm.enableEncryption = true
-  
-  // 清空错误信息
-  formErrors.name = ''
-  formErrors.size = ''
-}
-
-// 方法：创建新的存储
-const createNewStorage = (): void => {
-  isInitialized.value = false
-  resetForm()
-}
-
-// 方法：进入文件存储
-const goToStorage = (): void => {
-  alert('正在跳转到文件存储管理页面...')
-  // 实际项目中这里会进行页面跳转
-}
-
-// 方法：获取存储类型文本
-const getStorageTypeText = (type: string): string => {
-  const typeMap: { [key: string]: string } = {
-    standard: '标准存储',
-    archive: '归档存储',
-    performance: '性能存储'
-  }
-  return typeMap[type] || type
+// 方法：查看帮助
+const viewHelp = () => {
+  alert('文件存储使用介绍')
 }
 
 // 方法：查看计费规则
-const viewPricingRules = (): void => {
-  alert('计费规则页面即将打开')
+const viewPricing = () => {
+  alert('计费规则详情')
 }
 </script>
 
 <style scoped>
 .container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
+  /* max-width: 800px;
+  margin: 0 auto; */
+  padding: 40px 30px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: #333;
 }
 
-header {
-  margin-bottom: 30px;
-}
-
-h1 {
-  font-size: 2.2rem;
-  color: #2c3e50;
-  margin-bottom: 10px;
-}
-
-.divider {
-  height: 1px;
-  background: linear-gradient(to right, transparent, #ddd, transparent);
-  margin: 25px 0;
-}
-
-h2 {
-  font-size: 1.6rem;
-  color: #34495e;
-  margin-bottom: 15px;
-}
-
-.storage-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 20px;
+/* 标题区域 */
+.header {
   margin-bottom: 40px;
 }
 
-.storage-card {
-  background: white;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
-  cursor: pointer;
-  border: 2px solid transparent;
+h1 {
+  font-size: 2rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 8px;
 }
 
-.storage-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+/* 区域选择 */
+.region-section {
+  margin-bottom: 40px;
 }
 
-.storage-card.selected {
-  border-color: #3498db;
-  background-color: #f8fafd;
+.section-title {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: #555;
+  margin-bottom: 16px;
 }
 
-.card-header {
+.region-tabs {
   display: flex;
-  align-items: center;
-  margin-bottom: 15px;
+  flex-wrap: wrap;
+  gap: 12px;
 }
 
-.card-icon {
-  width: 50px;
-  height: 50px;
-  border-radius: 10px;
+.region-tab {
+  padding: 12px 24px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 14px;
+  min-width: 140px;
+}
+
+.region-tab:hover {
+  border-color: #999;
+}
+
+.region-tab.active {
+  background-color: #3498db;
+  color: white;
+  border-color: #3498db;
+}
+
+/* 中心图标区域 */
+.center-section {
+  margin: 40px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.center-icon {
+  width: 80px;
+  height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 15px;
-  font-size: 1.5rem;
+  background: #f5f5f5;
+  border-radius: 8px;
 }
 
-.a100 .card-icon {
-  background-color: #e8f4fd;
+.icon-book {
+  font-size: 36px;
   color: #3498db;
 }
 
-.v100 .card-icon {
-  background-color: #e8f6f3;
-  color: #1abc9c;
+.icon-book::before {
+  content: "📁";
 }
 
-.foshan .card-icon {
-  background-color: #fef9e7;
-  color: #f39c12;
-}
-
-.beijing .card-icon {
-  background-color: #fdedec;
-  color: #e74c3c;
-}
-
-.card-title {
-  font-size: 1.2rem;
-  font-weight: 600;
-}
-
-.card-description {
-  color: #7f8c8d;
-  font-size: 0.9rem;
-  margin-bottom: 15px;
-}
-
-.card-stats {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 10px;
-}
-
-.stat {
+/* 操作区域 */
+.action-section {
+  margin: 40px 0;
   text-align: center;
 }
 
-.stat-value {
-  font-weight: 700;
-  font-size: 1.1rem;
-}
-
-.stat-label {
-  font-size: 0.8rem;
-  color: #7f8c8d;
-}
-
-.init-section {
-  background: white;
-  border-radius: 12px;
-  padding: 25px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.init-content {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 40px;
-}
-
-.init-form {
-  grid-column: 1;
-}
-
-.init-help {
-  grid-column: 2;
-}
-
-.form-group {
-  margin-bottom: 20px;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 600;
-  color: #2c3e50;
-}
-
-.form-group input[type="text"],
-.form-group input[type="number"] {
-  width: 100%;
-  padding: 10px 12px;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  font-size: 14px;
-  transition: border-color 0.3s;
-}
-
-.form-group input:focus {
-  outline: none;
-  border-color: #3498db;
-}
-
-.form-group input.error {
-  border-color: #e74c3c;
-}
-
-.error-message {
-  color: #e74c3c;
-  font-size: 12px;
-  margin-top: 5px;
-  display: block;
-}
-
-.size-input {
-  display: flex;
-  gap: 10px;
-}
-
-.size-input input {
-  flex: 1;
-}
-
-.size-input select {
-  padding: 10px 12px;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  background: white;
-}
-
-.radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.radio-option {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.radio-option input {
-  margin-right: 8px;
-}
-
-.checkbox-option {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.checkbox-option input {
-  margin-right: 8px;
-}
-
-.form-actions {
-  display: flex;
-  gap: 10px;
-  margin-top: 30px;
-}
-
-.btn {
-  padding: 10px 20px;
-  border-radius: 6px;
-  border: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
 .btn-primary {
   background-color: #3498db;
   color: white;
+  border: none;
+  padding: 14px 32px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
 }
 
-.btn-primary:hover:not(:disabled) {
+.btn-primary:hover {
   background-color: #2980b9;
 }
 
-.btn-outline {
-  background-color: transparent;
-  border: 1px solid #3498db;
-  color: #3498db;
+.action-hint {
+  margin-top: 12px;
+  font-size: 0.9rem;
+  color: #666;
 }
 
-.btn-outline:hover {
-  background-color: #e8f4fd;
+/* 帮助区域 */
+.help-section {
+  margin-top: 50px;
 }
 
-.init-success {
-  grid-column: 1 / -1;
-  text-align: center;
-  padding: 40px 20px;
-}
-
-.success-icon {
-  font-size: 4rem;
-  color: #27ae60;
-  margin-bottom: 20px;
-}
-
-.success-icon i {
-  animation: scaleIn 0.5s ease;
-}
-
-@keyframes scaleIn {
-  0% { transform: scale(0); }
-  70% { transform: scale(1.2); }
-  100% { transform: scale(1); }
-}
-
-.storage-info {
-  background: #f8f9fa;
-  border-radius: 8px;
-  padding: 20px;
-  margin: 30px 0;
-  text-align: left;
-  max-width: 400px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.info-item {
+.help-links {
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #e9ecef;
-}
-
-.info-item:last-child {
-  margin-bottom: 0;
-  border-bottom: none;
-}
-
-.info-label {
-  font-weight: 600;
-  color: #495057;
-}
-
-.info-value {
-  color: #6c757d;
-}
-
-.success-actions {
-  display: flex;
-  gap: 10px;
+  gap: 30px;
   justify-content: center;
-  margin-top: 30px;
 }
 
-.selected-info {
-  margin-top: 20px;
-  padding: 15px;
-  background-color: #e8f4fd;
-  border-radius: 8px;
-  border-left: 4px solid #3498db;
+.link {
+  text-decoration: none;
+  color: #3498db;
+  font-size: 14px;
+  transition: color 0.2s;
 }
 
-.help-actions {
-  margin-top: 20px;
-}
-
-.init-help h3 {
-  font-size: 1.4rem;
-  margin-bottom: 8px;
-  color: #2c3e50;
-}
-
-.init-help p {
-  color: #7f8c8d;
-  margin-bottom: 15px;
+.link:hover {
+  color: #2980b9;
+  text-decoration: underline;
 }
 
+/* 响应式设计 */
 @media (max-width: 768px) {
-  .storage-grid {
-    grid-template-columns: 1fr;
+  .container {
+    padding: 30px 20px;
   }
   
-  .init-content {
-    grid-template-columns: 1fr;
-    gap: 20px;
-  }
-  
-  .init-form,
-  .init-help {
-    grid-column: 1;
-  }
-  
-  .success-actions {
+  .region-tabs {
     flex-direction: column;
   }
   
-  .form-actions {
+  .region-tab {
+    width: 100%;
+    max-width: 100%;
+  }
+  
+  .help-links {
     flex-direction: column;
+    gap: 15px;
+  }
+  
+  .center-section {
+    justify-content: center;
   }
 }
 </style>
\ No newline at end of file