开源 ATBSPB-个人主页 - At

1
www - VUE/
2
├── public/                     # 静态资源目录
3
│   └── static/
4
│       ├── fonts/              # 字体文件
5
│       ├── img/                # 图片文件
6
│       └── svg/                # SVG 图标
7
├── src/
8
│   ├── components/             # Vue 组件
9
│   ├── composables/            # 组合式函数
10
│   ├── utils/                  # 工具函数
11
│   ├── App.vue                 # 根组件
12
│   ├── main.js                 # 入口文件
13
│   └── style.css               # 全局样式（主题配置）
14
├── index.html                  # HTML 模板
15
├── package.json                # 项目依赖
16
├── vite.config.js              # Vite 配置
17
└── README.md                   # 项目说明

技术栈#

Vue 3 — 渐进式 JavaScript 框架
Vite — 下一代前端构建工具
CSS3 — 样式和主题系统

主题系统#

项目支持 Light 和 Dark 双主题，通过 data-theme 属性切换。

Light 主题（默认）#

1
:root {
2
  --main_bg_color: url(/static/img/bz-light.jpg);
3
  --main_text_color: #ffffff;
4
  --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
5
  --item_bg_color: rgba(235, 240, 250, 0.25);
6
  --back_filter: 20px;
7
  --back_filter_color: rgba(0, 0, 0, 0.17);
8
}

Dark 主题#

1
[data-theme="Dark"] {
2
  --main_bg_color: url(/static/img/bz-dark.jpg);
3
  --main_text_color: #fff;
4
  --gradient: linear-gradient(120deg, rgb(133, 62, 255), #f76cc6 30%, rgb(255, 255, 255) 60%);
5
  --item_bg_color: rgba(19, 20, 24, 0.35);
6
  --back_filter: 20px;
7
  --back_filter_color: rgba(0, 0, 0, 0.55);
8
}

主题切换逻辑#

1
const theme = ref('Light')
2

3
function toggleTheme() {
4
  theme.value = theme.value === 'Dark' ? 'Light' : 'Dark'
5
  setCookie('themeState', theme.value, 365)
6
  document.documentElement.dataset.theme = theme.value
7
}

组件架构#

组件	功能	自定义内容
LeftSidebar	左侧侧边栏	个人描述、标签列表、时间线
PageHeader	页面头部	欢迎语、图标链接列表
PageContent	页面内容	项目站点数据
PageFooter	页面底部	版权信息、底部链接
ThemeToggle	主题切换按钮	切换按钮样式

自定义配置#

修改壁纸#

替换 public/static/img/ 目录下的图片：

bz-light.jpg — Light 主题壁纸
bz-dark.jpg — Dark 主题壁纸

修改主题颜色#

编辑 src/style.css 中的 CSS 变量，找到对应的主题区块修改即可。

添加新组件#

在 src/components/ 目录下创建 .vue 文件，然后在 App.vue 中导入使用：

1
<template>
2
  <div>
3
    <LeftSidebar />
4
    <div class="at-right">
5
      <PageHeader />
6
      <PageContent />
7
      <NewComponent />
8
    </div>
9
  </div>
10
</template>
11

12
<script setup>
13
import LeftSidebar from './components/LeftSidebar.vue'
14
import NewComponent from './components/NewComponent.vue'
15
</script>

快速开始#

1
# 安装依赖
2
npm install
3

4
# 开发模式
5
npm run dev
6

7
# 构建生产版本
8
npm run build
9

10
# 预览生产版本
11
npm run preview

Cloudflare 免费代理搭建教程