yunzerwebsite/yunzer_go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加个人中心

Browse Source
This commit is contained in:
扫地僧 2025-12-26 22:45:34 +08:00
parent 4e9720de5c
commit 06779d999f
12 changed files with 2829 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/components.d.ts vendored
View File

@ -16,6 +16,9 @@ declare module 'vue' {
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
ElCol: typeof import('element-plus/es')['ElCol']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
@ -27,8 +30,13 @@ declare module 'vue' {
ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElUpload: typeof import('element-plus/es')['ElUpload']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']

41
frontend/src/components/HelloWorld.vue
View File

@ -1,41 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Learn more about IDE Support for Vue in the
<a
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

5
frontend/src/router/index.ts
View File

@ -57,6 +57,11 @@ const router = createRouter({
name: "login",
component: () => import("@/views/login/index.vue"),
},
{
path: "/user/profile",
name: "userProfile",
component: () => import("@/views/user/profile/index.vue"),
},
],
});

3
frontend/src/views/components/header.vue
View File

@ -95,8 +95,7 @@ const handleCommand = (command: string) => {
switch (command) {
case "profile":
console.log("跳转到个人中心");
// TODO: 实现跳转逻辑
ElMessage.info("跳转到个人中心");
router.push('/user/profile');
break;
case "account":
console.log("跳转到账号管理");

569
frontend/src/views/user/profile/articlePublish.vue Normal file
View File

@ -0,0 +1,569 @@
<template>
<div class="content-section">
<div class="content-header">
<h2 class="content-title">文章管理</h2>
<p class="content-desc">管理您的技术文章</p>
</div>
<div class="content-body">
<!-- 操作栏 -->
<div class="action-bar">
<el-button type="primary" @click="showPublishDialog = true">
<i class="fa-solid fa-plus"></i>
发布文章
</el-button>
<div class="search-box">
<el-input
v-model="searchText"
placeholder="搜索文章..."
clearable
@input="handleSearch"
>
<template #prefix>
<i class="fa-solid fa-search"></i>
</template>
</el-input>
</div>
</div>
<!-- 文章列表 -->
<div class="article-list">
<div v-if="filteredArticles.length === 0" class="empty-state">
<i class="fa-solid fa-file-alt"></i>
<p>{{ searchText ? '未找到相关文章' : '暂无文章' }}</p>
</div>
<div v-else class="article-grid">
<div
v-for="article in paginatedArticles"
:key="article.id"
class="article-card"
>
<div class="article-content-area">
<div class="article-header">
<el-tag :type="getStatusType(article.status)" size="small">
{{ getStatusText(article.status) }}
</el-tag>
<h3 class="article-title">{{ article.title }}</h3>
</div>
<div class="article-meta">
<span class="article-category">{{ getCategoryText(article.category) }}</span>
<span class="article-date">{{ article.createTime }}</span>
<span class="article-views">{{ article.views }} 阅读</span>
</div>
<div class="article-content">
{{ article.content.substring(0, 100) }}...
</div>
</div>
<div class="article-actions">
<el-button size="small" @click="editArticle(article)">编辑</el-button>
<el-button size="small" type="danger" @click="deleteArticle(article)">删除</el-button>
</div>
</div>
</div>
<!-- 分页组件 -->
<div v-if="filteredArticles.length > 0" class="pagination-wrapper">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[5, 10, 20, 50]"
:total="totalArticles"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</div>
</div>
</div>
<!-- 发布/编辑文章弹窗 -->
<el-dialog
v-model="showPublishDialog"
:title="isEditMode ? '编辑文章' : '发布文章'"
width="800px"
:close-on-click-modal="false"
>
<el-form :model="articleForm" label-width="80px" :rules="formRules" ref="formRef">
<el-form-item label="标题" prop="title" required>
<el-input
v-model="articleForm.title"
placeholder="请输入文章标题"
maxlength="100"
show-word-limit
/>
</el-form-item>
<el-form-item label="分类" prop="category" required>
<el-select v-model="articleForm.category" placeholder="请选择分类">
<el-option
v-for="category in categories"
:key="category.value"
:label="category.label"
:value="category.value"
/>
</el-select>
</el-form-item>
<el-form-item label="标签">
<el-input
v-model="articleForm.tags"
placeholder="请输入标签，用逗号分隔"
/>
</el-form-item>
<el-form-item label="内容" prop="content" required>
<el-input
v-model="articleForm.content"
type="textarea"
:rows="12"
placeholder="请输入文章内容..."
maxlength="10000"
show-word-limit
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="showPublishDialog = false">取消</el-button>
<el-button type="primary" @click="submitArticle" :loading="loading">
{{ isEditMode ? '保存修改' : '发布文章' }}
</el-button>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
interface ArticleForm {
title: string;
category: string;
tags: string;
content: string;
}
interface Article {
id: string;
title: string;
content: string;
category: string;
tags: string;
status: 'draft' | 'published' | 'hidden';
createTime: string;
updateTime: string;
views: number;
}
interface Category {
value: string;
label: string;
}
// 响应式数据
const showPublishDialog = ref(false);
const isEditMode = ref(false);
const searchText = ref('');
const loading = ref(false);
const formRef = ref();
// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const totalArticles = computed(() => filteredArticles.value.length);
// 表单数据
const articleForm = ref<ArticleForm>({
title: '',
category: '',
tags: '',
content: ''
});
// 表单验证规则
const formRules = {
title: [
{ required: true, message: '请输入文章标题', trigger: 'blur' },
{ min: 1, max: 100, message: '标题长度在 1 到 100 个字符', trigger: 'blur' }
],
category: [
{ required: true, message: '请选择文章分类', trigger: 'change' }
],
content: [
{ required: true, message: '请输入文章内容', trigger: 'blur' },
{ min: 10, message: '内容不能少于10个字符', trigger: 'blur' }
]
};
// 文章列表
const articles = ref<Article[]>([
{
id: '1',
title: 'Vue 3 响应式原理详解',
content: 'Vue 3 的响应式系统基于 Proxy 实现，与 Vue 2 的 Object.defineProperty 相比具有更好的性能和更完整的响应式覆盖...',
category: 'frontend',
tags: 'Vue,响应式,Proxy',
status: 'published',
createTime: '2024-01-15',
updateTime: '2024-01-15',
views: 1250
},
{
id: '2',
title: 'Go 语言高并发编程实践',
content: '在 Go 语言中，高并发编程是其核心特性之一。通过 goroutine 和 channel，我们可以轻松实现并发编程...',
category: 'backend',
tags: 'Go,并发,goroutine',
status: 'published',
createTime: '2024-01-10',
updateTime: '2024-01-12',
views: 890
}
]);
// 分类选项
const categories = ref<Category[]>([
{ value: 'frontend', label: '前端开发' },
{ value: 'backend', label: '后端开发' },
{ value: 'mobile', label: '移动开发' },
{ value: 'ai', label: '人工智能' },
{ value: 'devops', label: 'DevOps' },
{ value: 'other', label: '其他' }
]);
// 计算属性：过滤后的文章列表
const filteredArticles = computed(() => {
let filtered = articles.value;
// 搜索过滤
if (searchText.value) {
filtered = filtered.filter(article =>
article.title.toLowerCase().includes(searchText.value.toLowerCase()) ||
article.content.toLowerCase().includes(searchText.value.toLowerCase()) ||
article.tags.toLowerCase().includes(searchText.value.toLowerCase())
);
}
return filtered;
});
// 计算属性：分页后的文章列表
const paginatedArticles = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
return filteredArticles.value.slice(start, end);
});
// 分页变化处理
const handlePageChange = (page: number) => {
currentPage.value = page;
};
const handleSizeChange = (size: number) => {
pageSize.value = size;
currentPage.value = 1; // 重置到第一页
};
// 获取分类文本
const getCategoryText = (category: string) => {
const cat = categories.value.find(c => c.value === category);
return cat ? cat.label : category;
};
// 获取状态文本
const getStatusText = (status: string) => {
switch (status) {
case 'draft': return '草稿';
case 'published': return '已发布';
case 'hidden': return '隐藏';
default: return status;
}
};
// 获取状态类型
const getStatusType = (status: string) => {
switch (status) {
case 'draft': return '';
case 'published': return 'success';
case 'hidden': return 'warning';
default: return '';
}
};
// 搜索处理
const handleSearch = () => {
// 搜索逻辑通过计算属性实现
};
// 编辑文章
const editArticle = (article: Article) => {
isEditMode.value = true;
articleForm.value = {
title: article.title,
category: article.category,
tags: article.tags,
content: article.content
};
showPublishDialog.value = true;
};
// 查看文章
const viewArticle = () => {
ElMessage.info('查看文章功能开发中...');
};
// 删除文章
const deleteArticle = async (article: Article) => {
try {
await ElMessageBox.confirm(
`确定要删除文章"${article.title}"吗？此操作不可恢复。`,
'确认删除',
{
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning',
}
);
// 这里可以调用删除API
const index = articles.value.findIndex(a => a.id === article.id);
if (index > -1) {
articles.value.splice(index, 1);
// 检查是否需要调整当前页码
const totalPages = Math.ceil(articles.value.length / pageSize.value);
if (currentPage.value > totalPages && totalPages > 0) {
currentPage.value = totalPages;
}
ElMessage.success('文章删除成功');
}
} catch (error) {
// 用户取消删除
}
};
// 提交文章（发布或更新）
const submitArticle = async () => {
if (!formRef.value) return;
await formRef.value.validate(async (valid: boolean) => {
if (!valid) return;
loading.value = true;
try {
if (isEditMode.value) {
// 更新文章
ElMessage.success('文章更新成功');
} else {
// 发布新文章
const newArticle: Article = {
id: Date.now().toString(),
title: articleForm.value.title,
content: articleForm.value.content,
category: articleForm.value.category,
tags: articleForm.value.tags,
status: 'published',
createTime: new Date().toLocaleDateString(),
updateTime: new Date().toLocaleDateString(),
views: 0
};
articles.value.unshift(newArticle);
currentPage.value = 1; // 重置到第一页
ElMessage.success('文章发布成功');
}
showPublishDialog.value = false;
resetForm();
} catch (error) {
ElMessage.error('操作失败，请重试');
} finally {
loading.value = false;
}
});
};
// 重置表单
const resetForm = () => {
articleForm.value = {
title: '',
category: '',
tags: '',
content: ''
};
if (formRef.value) {
formRef.value.clearValidate();
}
};
// 初始化数据
const initArticles = () => {
// 这里可以调用API获取文章列表
};
onMounted(() => {
initArticles();
});
</script>
<style lang="less" scoped>
.action-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
gap: 16px;
.search-box {
width: 300px;
}
}
.article-list {
.article-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px;
}
.article-card {
background: #fff;
border: 1px solid #e4e7ed;
border-radius: 8px;
padding: 20px;
transition: all 0.3s ease;
display: flex;
align-items: flex-start;
gap: 16px;
&:hover {
border-color: #1677ff;
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.15);
}
.article-content-area {
flex: 1;
min-width: 0; // 防止内容溢出
.article-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
.article-title {
font-size: 16px;
font-weight: 600;
color: #303133;
margin: 0;
flex: 1;
margin-left: 12px;
}
}
.article-meta {
display: flex;
gap: 16px;
margin-bottom: 12px;
font-size: 12px;
color: #909399;
.article-category {
color: #1677ff;
font-weight: 500;
}
}
.article-content {
color: #606266;
line-height: 1.6;
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-clamp: 3;
}
}
.article-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
.el-button {
width: 80px;
justify-content: center;
}
}
}
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
i {
font-size: 48px;
margin-bottom: 16px;
display: block;
}
p {
font-size: 14px;
margin: 0;
}
}
.pagination-wrapper {
display: flex;
justify-content: center;
margin-top: 32px;
padding: 20px 0;
.el-pagination {
::v-deep(.el-pager li) {
min-width: 36px;
height: 36px;
line-height: 36px;
border-radius: 6px;
margin: 0 2px;
}
::v-deep(.el-pager li.is-active) {
background-color: #1677ff;
color: white;
}
::v-deep(.btn-prev, .btn-next) {
min-width: 36px;
height: 36px;
border-radius: 6px;
}
}
}
/* 弹窗表单样式 */
.el-dialog {
::v-deep(.el-dialog__body) {
padding: 20px 24px;
}
.el-form {
.el-form-item {
margin-bottom: 20px;
}
.el-textarea {
::v-deep(.el-textarea__inner) {
resize: vertical;
min-height: 200px;
}
}
}
}
</style>

408
frontend/src/views/user/profile/basicInfo.vue Normal file
View File

@ -0,0 +1,408 @@
<template>
<div class="content-section">
<div class="content-header">
<h2 class="content-title">基本资料</h2>
<p class="content-desc">管理您的个人信息</p>
</div>
<div class="content-body">
<el-tabs v-model="activeTab" class="profile-tabs">
<!-- 头像修改 Tab -->
<el-tab-pane label="头像修改" name="avatar">
<template #label>
<i class="fa-solid fa-camera"></i>
头像修改
</template>
<div class="avatar-section">
<div class="avatar-upload">
<div class="avatar-preview">
<img
v-if="avatarPreview || cachedAvatar || userInfo.avatar"
:src="avatarPreview || cachedAvatar || userInfo.avatar"
alt="头像预览"
class="avatar-image"
/>
<div v-else class="avatar-placeholder">
<i class="fa-solid fa-user"></i>
<span>未设置头像</span>
</div>
</div>
<div class="avatar-actions">
<el-upload
ref="uploadRef"
action=""
:auto-upload="false"
:show-file-list="false"
:on-change="handleAvatarChange"
accept="image/*"
class="avatar-uploader"
>
<el-button size="small" type="primary">
<i class="fa-solid fa-upload"></i>
选择头像
</el-button>
</el-upload>
<el-button
v-if="avatarPreview || cachedAvatar || userInfo.avatar"
size="small"
@click="removeAvatar"
type="danger"
plain
>
<i class="fa-solid fa-trash"></i>
移除头像
</el-button>
</div>
</div>
<div class="avatar-tips">
<p>支持 JPG、PNG、GIF 格式，大小不超过 2MB</p>
</div>
<div class="avatar-save">
<el-button type="primary" @click="saveAvatar" :loading="avatarSaving">
保存头像
</el-button>
</div>
</div>
</el-tab-pane>
<!-- 资料修改 Tab -->
<el-tab-pane label="资料修改" name="info">
<template #label>
<i class="fa-solid fa-user-edit"></i>
资料修改
</template>
<el-form :model="basicForm" label-width="120px" class="profile-form">
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="用户名" required>
<el-input v-model="basicForm.user_name" placeholder="请输入用户名" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="邮箱" required>
<el-input v-model="basicForm.email" placeholder="请输入邮箱" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="手机号">
<el-input v-model="basicForm.phone" placeholder="请输入手机号" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="注册时间">
<el-input v-model="userInfo.register_time" readonly />
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" @click="saveBasicInfo" :loading="infoSaving">
保存修改
</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, withDefaults } from "vue";
import { ElMessage } from "element-plus";
// Props
interface UserInfo {
user_name: string;
user_account: string;
email: string;
phone: string;
avatar: string;
register_time: string;
last_login: string;
}
interface BasicForm {
user_name: string;
email: string;
phone: string;
}
interface Props {
userInfo?: UserInfo;
basicForm?: BasicForm;
}
const props = withDefaults(defineProps<Props>(), {
userInfo: () => ({
user_name: '',
user_account: '',
email: '',
phone: '',
avatar: '',
register_time: '',
last_login: ''
}),
basicForm: () => ({
user_name: '',
email: '',
phone: ''
})
});
// Emits
const emit = defineEmits<{
updateBasicInfo: [data: { basicForm: BasicForm; avatarPreview?: string }];
removeAvatar: [];
}>();
// Tab 相关
const activeTab = ref('avatar');
// 头像相关数据
const avatarFile = ref<File | null>(null);
const avatarPreview = ref<string>('');
const cachedAvatar = ref<string>('');
// 加载状态
const avatarSaving = ref(false);
const infoSaving = ref(false);
// 初始化缓存头像
const initCachedAvatar = (avatar: string) => {
cachedAvatar.value = avatar || '';
};
// 头像文件选择
const handleAvatarChange = (file: any) => {
avatarFile.value = file.raw;
// 创建预览URL
const reader = new FileReader();
reader.onload = (e) => {
if (e.target && typeof e.target.result === 'string') {
avatarPreview.value = e.target.result;
}
};
reader.readAsDataURL(file.raw);
};
// 移除头像
const removeAvatar = () => {
avatarFile.value = null;
avatarPreview.value = '';
cachedAvatar.value = '';
emit('removeAvatar');
};
// 保存头像
const saveAvatar = async () => {
try {
avatarSaving.value = true;
// 验证是否有头像文件
if (!avatarFile.value && !avatarPreview.value) {
ElMessage.warning('请先选择头像');
return;
}
// 验证头像文件大小
if (avatarFile.value && avatarFile.value.size) {
const maxSize = 2 * 1024 * 1024; // 2MB
if (avatarFile.value.size > maxSize) {
ElMessage.error('头像文件大小不能超过 2MB');
return;
}
}
// 这里可以调用API保存头像
// const formData = new FormData();
// if (avatarFile.value) {
// formData.append('avatar', avatarFile.value);
// }
ElMessage.success('头像保存成功');
// 发出更新事件
emit('updateBasicInfo', {
basicForm: props.basicForm,
avatarPreview: avatarPreview.value
});
// 保存成功后重置头像预览和文件
avatarPreview.value = '';
avatarFile.value = null;
} catch (error) {
ElMessage.error('保存失败，请重试');
} finally {
avatarSaving.value = false;
}
};
// 保存基本资料
const saveBasicInfo = async () => {
try {
infoSaving.value = true;
// 验证必填字段
if (!props.basicForm.user_name.trim()) {
ElMessage.error('请输入用户名');
return;
}
if (!props.basicForm.email.trim()) {
ElMessage.error('请输入邮箱');
return;
}
// 这里可以调用API保存基本资料
// const formData = new FormData();
// formData.append('user_name', props.basicForm.user_name);
// formData.append('email', props.basicForm.email);
// formData.append('phone', props.basicForm.phone);
ElMessage.success('基本资料保存成功');
// 发出更新事件
emit('updateBasicInfo', {
basicForm: props.basicForm
});
} catch (error) {
ElMessage.error('保存失败，请重试');
} finally {
infoSaving.value = false;
}
};
// 暴露方法给父组件调用
defineExpose({
initCachedAvatar
});
</script>
<style lang="less" scoped>
.profile-tabs {
::v-deep(.el-tabs__header) {
margin: 0 0 24px 0;
.el-tabs__nav-wrap::after {
display: none;
}
.el-tabs__item {
font-size: 16px;
font-weight: 500;
color: #666;
&.is-active {
color: #1677ff;
}
i {
margin-right: 8px;
}
}
}
::v-deep(.el-tabs__content) {
padding: 0;
}
}
.avatar-section {
text-align: center;
max-width: 400px;
margin: 0 auto;
.avatar-upload {
display: inline-block;
margin-bottom: 16px;
.avatar-preview {
width: 140px;
height: 140px;
border-radius: 50%;
border: 3px solid #e4e7ed;
margin: 0 auto 20px;
overflow: hidden;
background: #f5f7fa;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
.avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-placeholder {
text-align: center;
color: #c0c4cc;
i {
font-size: 42px;
margin-bottom: 8px;
display: block;
}
span {
font-size: 14px;
}
}
}
.avatar-actions {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
margin-bottom: 16px;
.avatar-uploader {
.el-button {
height: 36px;
padding: 0 20px;
font-size: 14px;
}
}
}
}
.avatar-tips {
color: #909399;
font-size: 12px;
margin-bottom: 24px;
p {
margin: 0;
}
}
.avatar-save {
.el-button {
height: 40px;
padding: 0 32px;
font-size: 16px;
}
}
}
.profile-form {
max-width: 600px;
margin: 0 auto;
.el-form-item {
margin-bottom: 24px;
}
.el-button {
height: 40px;
padding: 0 32px;
font-size: 16px;
}
}
</style>

405
frontend/src/views/user/profile/index.vue Normal file
View File

@ -0,0 +1,405 @@
<template>
<Header />
<div class="profile-container">
<div class="profile-sidebar">
<div class="menu">
<!-- 动态渲染菜单分组 -->
<div
v-for="group in menuGroups"
:key="group.id"
class="menu-group"
:data-group="group.id"
>
<div class="menu-group-title" @click="toggleGroup(group.id)">
<i :class="group.icon"></i>
<span>{{ group.title }}</span>
<i class="layui-icon collapse-icon" :class="isGroupCollapsed(group.id) ? 'layui-icon-right' : 'layui-icon-down'"></i>
</div>
<div class="menu-group-content" :class="{ 'expanded': !isGroupCollapsed(group.id) }">
<div
v-for="item in group.items"
:key="item.id"
class="menu-item"
:class="{ active: activeMenu === item.id }"
@click="handleMenuClick(item.id)"
>
<div class="menu-icon">
<i :class="item.icon"></i>
</div>
<div class="menu-content">
<span class="menu-title">{{ item.title }}</span>
<span class="menu-desc">{{ item.desc }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="profile-main">
<div class="content-area">
<!-- 基本资料 -->
<BasicInfo v-if="activeMenu === 'profile-basic'" />
<!-- 我的钱包 -->
<Wallet v-if="activeMenu === 'profile-wallet'" />
<!-- 我的消息 -->
<Messages v-if="activeMenu === 'profile-messages'" />
<!-- 安全设置 -->
<Security v-if="activeMenu === 'profile-security'" />
<!-- 发布文章 -->
<ArticlePublish v-if="activeMenu === 'article-publish'" />
<!-- 发布资源 -->
<ResourcePublish v-if="activeMenu === 'apps-publish'" />
<!-- 系统通知 -->
<Notifications v-if="activeMenu === 'profile-notifications'" />
</div>
</div>
</div>
<Footer />
</template>
<script lang="ts" setup>
import Header from "@/views/components/header.vue";
import Footer from "@/views/components/footer.vue";
import BasicInfo from "@/views/user/profile/basicInfo.vue";
import Wallet from "@/views/user/profile/wallet.vue";
import Messages from "@/views/user/profile/messages.vue";
import Security from "@/views/user/profile/security.vue";
import ArticlePublish from "@/views/user/profile/articlePublish.vue";
import ResourcePublish from "@/views/user/profile/resourcePublish.vue";
import Notifications from "@/views/user/profile/notifications.vue";
import { ref } from "vue";
// 响应式数据
const activeMenu = ref('profile-basic'); // 当前激活的菜单项
const collapsedGroups = ref(['apps', 'system']); // 默认折叠的分组
// 菜单配置数据
const menuGroups = ref([
{
id: 'personal',
title: '个人中心',
icon: 'fa-solid fa-user',
items: [
{
id: 'profile-basic',
title: '基本资料',
desc: '个人信息管理',
icon: 'fa-regular fa-file-lines'
},
{
id: 'profile-wallet',
title: '我的钱包',
desc: '余额与交易记录',
icon: 'fa-solid fa-wallet'
},
{
id: 'profile-messages',
title: '我的消息',
desc: '系统消息提醒',
icon: 'fa-solid fa-message'
},
{
id: 'profile-security',
title: '安全设置',
desc: '账户安全配置',
icon: 'fa-solid fa-shield'
}
]
},
{
id: 'apps',
title: '网站功能',
icon: 'fa-solid fa-grip',
items: [
{
id: 'article-publish',
title: '文章管理',
desc: '管理站内文章',
icon: 'fa-solid fa-file-alt'
},
{
id: 'apps-publish',
title: '资源管理',
desc: '管理应用资源',
icon: 'fa-solid fa-cubes'
}
]
},
{
id: 'system',
title: '系统设置',
icon: 'fa-solid fa-gear',
items: [
{
id: 'profile-notifications',
title: '系统通知',
desc: '通知偏好设置',
icon: 'fa-solid fa-bell'
}
]
}
]);
// 菜单点击事件
const handleMenuClick = (target: string) => {
activeMenu.value = target;
};
// 分组折叠/展开（手风琴效果）
const toggleGroup = (groupName: string) => {
const isCurrentlyCollapsed = collapsedGroups.value.includes(groupName);
if (isCurrentlyCollapsed) {
// 当前分组是折叠的，打开它：关闭所有分组，只保留当前分组打开
collapsedGroups.value = menuGroups.value
.map(group => group.id)
.filter(id => id !== groupName);
} else {
// 当前分组是展开的，关闭它：将当前分组添加到折叠列表
collapsedGroups.value.push(groupName);
}
};
// 检查分组是否折叠
const isGroupCollapsed = (groupName: string) => {
return collapsedGroups.value.includes(groupName);
};
</script>
<style lang="less">
.profile-container {
display: flex;
max-width: 1200px;
margin: 120px auto 40px;
gap: 24px;
padding: 0 20px;
.profile-sidebar {
width: 260px;
flex-shrink: 0;
.menu {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
padding: 16px 0;
.menu-group {
&:last-child {
.menu-group-title {
border-bottom: none !important;
}
}
.menu-group-title {
padding: 16px 24px 12px;
font-size: 12px;
color: #1677ff;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #f5f5f5;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.3s;
position: relative;
&:hover {
color: #1677ff;
background: rgba(22, 119, 255, 0.05);
transform: translateX(2px);
}
.layui-icon {
font-size: 14px;
color: #1677ff;
transition: transform 0.3s;
}
.collapse-icon {
margin-left: auto;
font-size: 12px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
}
.menu-group-content {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&.expanded {
max-height: 500px; // 足够大的值来容纳所有菜单项
opacity: 1;
}
.menu-item {
padding: 12px 24px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: all 0.3s;
border-left: 3px solid transparent;
&:hover {
background: #f5f5f5;
border-left-color: #1677ff;
transform: translateX(4px);
}
&.active {
background: #f0f8ff;
border-left-color: #1677ff;
transform: translateX(4px);
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
.menu-title {
color: #1677ff;
}
}
.menu-icon {
width: 20px;
text-align: center;
i {
font-size: 16px;
color: #1677ff;
}
}
.menu-content {
flex: 1;
.menu-title {
display: block;
font-size: 14px;
color: #1677ff;
font-weight: 500;
margin-bottom: 2px;
}
.menu-desc {
display: block;
font-size: 12px;
color: #999;
}
}
}
}
}
}
}
.profile-main {
flex: 1;
.content-area {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
min-height: 600px;
.content-section {
.content-header {
padding: 24px 32px 16px;
border-bottom: 1px solid #f0f0f0;
.content-title {
font-size: 20px;
color: #333;
margin: 0 0 8px 0;
font-weight: 600;
}
.content-desc {
color: #666;
margin: 0;
font-size: 14px;
}
}
.content-body {
padding: 24px 32px;
.profile-form, .security-form {
max-width: 600px;
.el-form-item {
margin-bottom: 20px;
}
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
i {
font-size: 48px;
margin-bottom: 16px;
display: block;
}
p {
font-size: 14px;
margin: 0;
}
}
}
}
}
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.profile-container {
flex-direction: column;
margin: 100px auto 20px;
padding: 0 15px;
.profile-sidebar {
width: 100%;
margin-bottom: 20px;
.menu {
.menu-group {
.menu-group-title {
padding: 12px 20px 8px;
}
.menu-group-content .menu-item {
padding: 10px 20px;
}
}
}
}
.profile-main .content-area .content-section {
.content-header {
padding: 20px 24px 12px;
}
.content-body {
padding: 20px 24px;
}
}
}
}
</style>

185
frontend/src/views/user/profile/messages.vue Normal file
View File

@ -0,0 +1,185 @@
<template>
<div class="content-section">
<div class="content-header">
<h2 class="content-title">我的消息</h2>
<p class="content-desc">查看系统消息和通知</p>
</div>
<div class="content-body">
<div v-if="messages.length === 0" class="empty-state">
<i class="fa-solid fa-message"></i>
<p>暂无消息</p>
</div>
<div v-else class="message-list">
<div
v-for="message in messages"
:key="message.id"
class="message-item"
:class="{ 'unread': !message.read }"
@click="markAsRead(message.id)"
>
<div class="message-icon">
<i :class="getMessageIcon(message.type)"></i>
</div>
<div class="message-content">
<div class="message-header">
<h4 class="message-title">{{ message.title }}</h4>
<span class="message-time">{{ message.time }}</span>
</div>
<p class="message-text">{{ message.content }}</p>
</div>
<div v-if="!message.read" class="unread-dot"></div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
interface Message {
id: string;
title: string;
content: string;
time: string;
type: 'system' | 'notification' | 'warning';
read: boolean;
}
// 模拟数据
const messages = ref<Message[]>([]);
// 获取消息图标
const getMessageIcon = (type: string) => {
switch (type) {
case 'system':
return 'fa-solid fa-cog';
case 'notification':
return 'fa-solid fa-bell';
case 'warning':
return 'fa-solid fa-exclamation-triangle';
default:
return 'fa-solid fa-info';
}
};
// 标记为已读
const markAsRead = (messageId: string) => {
const message = messages.value.find(m => m.id === messageId);
if (message) {
message.read = true;
}
};
// 初始化数据
const initMessages = () => {
// 这里可以调用API获取消息数据
messages.value = [];
};
onMounted(() => {
initMessages();
});
</script>
<style lang="less" scoped>
.message-list {
.message-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
border: 1px solid #f0f0f0;
border-radius: 8px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
&:hover {
border-color: #1677ff;
background: #f8f9ff;
}
&.unread {
border-left: 4px solid #1677ff;
background: #f0f8ff;
}
.message-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: #1677ff;
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
i {
font-size: 16px;
}
}
.message-content {
flex: 1;
.message-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
.message-title {
font-size: 16px;
color: #333;
margin: 0;
font-weight: 500;
}
.message-time {
font-size: 12px;
color: #999;
white-space: nowrap;
margin-left: 12px;
}
}
.message-text {
font-size: 14px;
color: #666;
margin: 0;
line-height: 1.5;
}
}
.unread-dot {
width: 8px;
height: 8px;
background: #1677ff;
border-radius: 50%;
position: absolute;
top: 16px;
right: 16px;
}
}
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
i {
font-size: 48px;
margin-bottom: 16px;
display: block;
}
p {
font-size: 14px;
margin: 0;
}
}
</style>

257
frontend/src/views/user/profile/notifications.vue Normal file
View File

@ -0,0 +1,257 @@
<template>
<div class="content-section">
<div class="content-header">
<h2 class="content-title">系统通知</h2>
<p class="content-desc">设置通知偏好</p>
</div>
<div class="content-body">
<div class="notification-settings">
<div class="setting-group">
<h3 class="group-title">邮件通知</h3>
<div class="setting-items">
<div class="setting-item">
<div class="setting-info">
<div class="setting-name">系统消息</div>
<div class="setting-desc">接收系统更新和维护通知</div>
</div>
<el-switch v-model="settings.email.system" />
</div>
<div class="setting-item">
<div class="setting-info">
<div class="setting-name">账户安全</div>
<div class="setting-desc">接收登录异常和安全提醒</div>
</div>
<el-switch v-model="settings.email.security" />
</div>
<div class="setting-item">
<div class="setting-info">
<div class="setting-name">内容更新</div>
<div class="setting-desc">接收文章和资源更新通知</div>
</div>
<el-switch v-model="settings.email.content" />
</div>
</div>
</div>
<div class="setting-group">
<h3 class="group-title">站内消息</h3>
<div class="setting-items">
<div class="setting-item">
<div class="setting-info">
<div class="setting-name">评论回复</div>
<div class="setting-desc">有人回复您的评论时通知</div>
</div>
<el-switch v-model="settings.inSite.comments" />
</div>
<div class="setting-item">
<div class="setting-info">
<div class="setting-name">点赞通知</div>
<div class="setting-desc">收到点赞时通知</div>
</div>
<el-switch v-model="settings.inSite.likes" />
</div>
<div class="setting-item">
<div class="setting-info">
<div class="setting-name">关注通知</div>
<div class="setting-desc">有人关注您时通知</div>
</div>
<el-switch v-model="settings.inSite.follows" />
</div>
</div>
</div>
<div class="setting-group">
<h3 class="group-title">推送通知</h3>
<div class="setting-items">
<div class="setting-item">
<div class="setting-info">
<div class="setting-name">浏览器推送</div>
<div class="setting-desc">在浏览器中接收推送通知</div>
</div>
<el-switch v-model="settings.push.browser" />
</div>
<div class="setting-item">
<div class="setting-info">
<div class="setting-name">移动推送</div>
<div class="setting-desc">在移动设备上接收推送通知</div>
</div>
<el-switch v-model="settings.push.mobile" />
</div>
</div>
</div>
<div class="setting-actions">
<el-button type="primary" @click="saveSettings" :loading="loading">
保存设置
</el-button>
<el-button @click="resetSettings" style="margin-left: 12px;">
重置为默认
</el-button>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
interface NotificationSettings {
email: {
system: boolean;
security: boolean;
content: boolean;
};
inSite: {
comments: boolean;
likes: boolean;
follows: boolean;
};
push: {
browser: boolean;
mobile: boolean;
};
}
// 通知设置
const settings = reactive<NotificationSettings>({
email: {
system: true,
security: true,
content: false
},
inSite: {
comments: true,
likes: true,
follows: true
},
push: {
browser: false,
mobile: false
}
});
const loading = ref(false);
// 保存设置
const saveSettings = async () => {
loading.value = true;
try {
// 这里可以调用API保存通知设置
await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟API调用
// 保存到本地存储
localStorage.setItem('notification_settings', JSON.stringify(settings));
ElMessage.success('设置保存成功');
} catch (error) {
ElMessage.error('保存失败，请重试');
} finally {
loading.value = false;
}
};
// 重置设置
const resetSettings = () => {
Object.assign(settings, {
email: {
system: true,
security: true,
content: false
},
inSite: {
comments: true,
likes: true,
follows: true
},
push: {
browser: false,
mobile: false
}
});
};
// 初始化设置
const initSettings = () => {
// 从本地存储加载设置
const savedSettings = localStorage.getItem('notification_settings');
if (savedSettings) {
try {
const parsed = JSON.parse(savedSettings);
Object.assign(settings, parsed);
} catch (error) {
console.error('加载通知设置失败:', error);
}
}
};
onMounted(() => {
initSettings();
});
</script>
<style lang="less" scoped>
.notification-settings {
max-width: 800px;
.setting-group {
margin-bottom: 32px;
&:last-child {
margin-bottom: 24px;
}
.group-title {
font-size: 18px;
color: #333;
margin: 0 0 16px 0;
padding-bottom: 8px;
border-bottom: 2px solid #1677ff;
}
.setting-items {
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.setting-info {
flex: 1;
.setting-name {
font-size: 16px;
color: #333;
margin-bottom: 4px;
font-weight: 500;
}
.setting-desc {
font-size: 14px;
color: #666;
line-height: 1.4;
}
}
}
}
}
.setting-actions {
text-align: center;
padding-top: 24px;
border-top: 1px solid #f0f0f0;
}
}
</style>

685
frontend/src/views/user/profile/resourcePublish.vue Normal file
View File

@ -0,0 +1,685 @@
<template>
<div class="content-section">
<div class="content-header">
<h2 class="content-title">资源管理</h2>
<p class="content-desc">管理您的应用资源</p>
</div>
<div class="content-body">
<!-- 操作栏 -->
<div class="action-bar">
<el-button type="primary" @click="showPublishDialog = true">
<i class="fa-solid fa-plus"></i>
发布资源
</el-button>
<div class="filters">
<el-input
v-model="searchText"
placeholder="搜索资源..."
clearable
@input="handleSearch"
style="width: 300px; margin-left: 12px;"
>
<template #prefix>
<i class="fa-solid fa-search"></i>
</template>
</el-input>
</div>
</div>
<!-- 资源列表 -->
<div class="resource-list">
<div v-if="filteredResources.length === 0" class="empty-state">
<i class="fa-solid fa-cubes"></i>
<p>{{ searchText || filterType ? '未找到相关资源' : '暂无资源' }}</p>
</div>
<div v-else class="resource-grid">
<div
v-for="resource in paginatedResources"
:key="resource.id"
class="resource-card"
>
<div class="resource-content-area">
<div class="resource-header">
<el-tag :type="getTypeColor(resource.type)" size="small">
{{ getTypeText(resource.type) }}
</el-tag>
<h3 class="resource-title">
{{ resource.name }}
</h3>
</div>
<div class="resource-meta">
<span class="resource-category">{{ resource.category.join(', ') }}</span>
<span class="resource-downloads">{{ resource.downloads }} 下载</span>
<span class="resource-date">{{ resource.createTime }}</span>
</div>
<div class="resource-description">
{{ resource.description }}
</div>
</div>
<div class="resource-actions">
<el-button size="small" @click="editResource(resource)">编辑</el-button>
<el-button size="small" type="danger" @click="deleteResource(resource)">删除</el-button>
</div>
</div>
</div>
<!-- 分页组件 -->
<div v-if="filteredResources.length > 0" class="pagination-wrapper">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[5, 10, 20, 50]"
:total="totalResources"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</div>
</div>
</div>
<!-- 发布/编辑资源弹窗 -->
<el-dialog
v-model="showPublishDialog"
:title="isEditMode ? '编辑资源' : '发布资源'"
width="800px"
:close-on-click-modal="false"
>
<el-form :model="resourceForm" label-width="80px" :rules="formRules" ref="formRef">
<el-form-item label="资源名称" prop="name" required>
<el-input
v-model="resourceForm.name"
placeholder="请输入资源名称"
maxlength="50"
show-word-limit
/>
</el-form-item>
<el-form-item label="资源类型" prop="type" required>
<el-select v-model="resourceForm.type" placeholder="请选择资源类型">
<el-option
v-for="type in resourceTypes"
:key="type.value"
:label="type.label"
:value="type.value"
/>
</el-select>
</el-form-item>
<el-form-item label="分类" prop="category" required>
<el-checkbox-group v-model="resourceForm.category">
<el-checkbox
v-for="platform in platforms"
:key="platform.value"
:label="platform.value"
>
{{ platform.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="版本号">
<el-input
v-model="resourceForm.version"
placeholder="例如：1.0.0"
/>
</el-form-item>
<el-form-item label="下载链接" prop="downloadUrl" required>
<el-input
v-model="resourceForm.downloadUrl"
placeholder="请输入下载链接"
/>
</el-form-item>
<el-form-item label="资源描述" prop="description" required>
<el-input
v-model="resourceForm.description"
type="textarea"
:rows="4"
placeholder="请输入资源描述..."
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-form-item label="截图上传">
<el-upload
ref="uploadRef"
:file-list="fileList"
:on-change="handleFileChange"
:on-remove="handleFileRemove"
action=""
:auto-upload="false"
multiple
accept="image/*"
list-type="picture-card"
>
<el-icon><Plus /></el-icon>
<div class="upload-text">上传截图</div>
</el-upload>
<div class="upload-tips">
<p>支持 JPG、PNG、GIF 格式，单张图片不超过 2MB，最多上传 5 张</p>
</div>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="showPublishDialog = false">取消</el-button>
<el-button type="primary" @click="submitResource" :loading="loading">
{{ isEditMode ? '保存修改' : '发布资源' }}
</el-button>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
interface ResourceForm {
name: string;
type: string;
category: string[];
version: string;
downloadUrl: string;
description: string;
}
interface Resource {
id: string;
name: string;
type: string;
category: string[];
version: string;
downloadUrl: string;
description: string;
createTime: string;
downloads: number;
}
interface ResourceType {
value: string;
label: string;
}
interface Platform {
value: string;
label: string;
}
// 响应式数据
const showPublishDialog = ref(false);
const isEditMode = ref(false);
const searchText = ref('');
const filterType = ref('');
const loading = ref(false);
const formRef = ref();
const fileList = ref([]);
// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const totalResources = computed(() => filteredResources.value.length);
// 表单数据
const resourceForm = ref<ResourceForm>({
name: '',
type: '',
category: [],
version: '',
downloadUrl: '',
description: ''
});
// 表单验证规则
const formRules = {
name: [
{ required: true, message: '请输入资源名称', trigger: 'blur' },
{ min: 1, max: 50, message: '名称长度在 1 到 50 个字符', trigger: 'blur' }
],
type: [
{ required: true, message: '请选择资源类型', trigger: 'change' }
],
category: [
{ type: 'array', required: true, message: '请至少选择一个分类', trigger: 'change' }
],
downloadUrl: [
{ required: true, message: '请输入下载链接', trigger: 'blur' },
{ type: 'url', message: '请输入正确的URL格式', trigger: 'blur' }
],
description: [
{ required: true, message: '请输入资源描述', trigger: 'blur' },
{ min: 10, message: '描述不能少于10个字符', trigger: 'blur' }
]
};
// 资源列表
const resources = ref<Resource[]>([
{
id: '1',
name: 'Vue DevTools',
type: 'plugin',
category: ['游戏下载'],
version: '6.5.0',
downloadUrl: 'https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd',
description: 'Vue.js 官方开发者工具，用于调试 Vue 应用。',
createTime: '2024-01-15',
downloads: 1250
},
{
id: '2',
name: 'GoLand IDE',
type: 'software',
category: ['办公下载'],
version: '2023.3',
downloadUrl: 'https://www.jetbrains.com/go/download/',
description: 'JetBrains 出品的 Go 语言集成开发环境。',
createTime: '2024-01-10',
downloads: 890
}
]);
// 资源类型选项
const resourceTypes = ref<ResourceType[]>([
{ value: 'software', label: '软件工具' },
{ value: 'plugin', label: '插件扩展' },
{ value: 'library', label: '代码库' },
{ value: 'template', label: '模板素材' },
{ value: 'other', label: '其他' }
]);
// 平台选项
const platforms = ref<Platform[]>([
{ value: 'windows', label: 'Windows' },
{ value: 'macos', label: 'macOS' },
{ value: 'linux', label: 'Linux' },
{ value: 'web', label: 'Web' },
{ value: 'mobile', label: '移动端' }
]);
// 计算属性：过滤后的资源列表
const filteredResources = computed(() => {
let filtered = resources.value;
// 类型过滤
if (filterType.value) {
filtered = filtered.filter(resource => resource.type === filterType.value);
}
// 搜索过滤
if (searchText.value) {
filtered = filtered.filter(resource =>
resource.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
resource.description.toLowerCase().includes(searchText.value.toLowerCase())
);
}
return filtered;
});
// 计算属性：分页后的资源列表
const paginatedResources = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
return filteredResources.value.slice(start, end);
});
// 分页变化处理
const handlePageChange = (page: number) => {
currentPage.value = page;
};
const handleSizeChange = (size: number) => {
pageSize.value = size;
currentPage.value = 1; // 重置到第一页
};
// 获取类型文本
const getTypeText = (type: string) => {
const typeObj = resourceTypes.value.find(t => t.value === type);
return typeObj ? typeObj.label : type;
};
// 获取类型颜色
const getTypeColor = (type: string) => {
switch (type) {
case 'software': return 'success';
case 'plugin': return 'primary';
case 'library': return 'warning';
case 'template': return 'info';
default: return '';
}
};
// 获取平台文本
const getPlatformText = (platform: string) => {
const platformObj = platforms.value.find(p => p.value === platform);
return platformObj ? platformObj.label : platform;
};
// 搜索处理
const handleSearch = () => {
// 搜索逻辑通过计算属性实现
};
// 过滤处理
const handleFilter = () => {
// 过滤逻辑通过计算属性实现
};
// 文件变化处理
const handleFileChange = (file: any, fileList: any[]) => {
// 验证文件大小
if (file.size > 2 * 1024 * 1024) {
ElMessage.error('图片大小不能超过 2MB');
return false;
}
// 验证文件数量
if (fileList.length > 5) {
ElMessage.error('最多只能上传 5 张图片');
return false;
}
};
// 文件移除处理
const handleFileRemove = (file: any, fileList: any[]) => {
// 处理文件移除逻辑
};
// 编辑资源
const editResource = (resource: Resource) => {
isEditMode.value = true;
resourceForm.value = {
name: resource.name,
type: resource.type,
category: [...resource.category],
version: resource.version,
downloadUrl: resource.downloadUrl,
description: resource.description
};
showPublishDialog.value = true;
};
// 下载资源
const downloadResource = (resource: Resource) => {
window.open(resource.downloadUrl, '_blank');
};
// 删除资源
const deleteResource = async (resource: Resource) => {
try {
await ElMessageBox.confirm(
`确定要删除资源"${resource.name}"吗？此操作不可恢复。`,
'确认删除',
{
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning',
}
);
// 这里可以调用删除API
const index = resources.value.findIndex(r => r.id === resource.id);
if (index > -1) {
resources.value.splice(index, 1);
// 检查是否需要调整当前页码
const totalPages = Math.ceil(resources.value.length / pageSize.value);
if (currentPage.value > totalPages && totalPages > 0) {
currentPage.value = totalPages;
}
ElMessage.success('资源删除成功');
}
} catch (error) {
// 用户取消删除
}
};
// 提交资源（发布或更新）
const submitResource = async () => {
if (!formRef.value) return;
await formRef.value.validate(async (valid: boolean) => {
if (!valid) return;
loading.value = true;
try {
if (isEditMode.value) {
// 更新资源
ElMessage.success('资源更新成功');
} else {
// 发布新资源
const newResource: Resource = {
id: Date.now().toString(),
name: resourceForm.value.name,
type: resourceForm.value.type,
category: [...resourceForm.value.category],
version: resourceForm.value.version || '1.0.0',
downloadUrl: resourceForm.value.downloadUrl,
description: resourceForm.value.description,
createTime: new Date().toLocaleDateString(),
downloads: 0
};
resources.value.unshift(newResource);
currentPage.value = 1; // 重置到第一页
ElMessage.success('资源发布成功');
}
showPublishDialog.value = false;
resetForm();
} catch (error) {
ElMessage.error('操作失败，请重试');
} finally {
loading.value = false;
}
});
};
// 重置表单
const resetForm = () => {
resourceForm.value = {
name: '',
type: '',
category: [],
version: '',
downloadUrl: '',
description: ''
};
fileList.value = [];
if (formRef.value) {
formRef.value.clearValidate();
}
};
// 初始化数据
const initResources = () => {
// 这里可以调用API获取资源列表
};
onMounted(() => {
initResources();
});
</script>
<style lang="less" scoped>
.action-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
gap: 16px;
.filters {
display: flex;
gap: 12px;
align-items: center;
}
}
.resource-list {
.resource-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px;
}
.resource-card {
background: #fff;
border: 1px solid #e4e7ed;
border-radius: 8px;
padding: 20px;
transition: all 0.3s ease;
display: flex;
align-items: flex-start;
gap: 16px;
&:hover {
border-color: #1677ff;
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.15);
}
.resource-content-area {
flex: 1;
min-width: 0; // 防止内容溢出
.resource-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
.resource-title {
font-size: 16px;
font-weight: 600;
color: #303133;
margin: 0;
flex: 1;
margin-left: 12px;
}
}
.resource-meta {
display: flex;
gap: 16px;
margin-bottom: 12px;
font-size: 12px;
color: #909399;
.resource-version {
color: #1677ff;
font-weight: 500;
}
}
.resource-platforms {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.resource-description {
color: #606266;
line-height: 1.6;
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-clamp: 2;
}
}
.resource-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
.el-button {
width: 80px;
justify-content: center;
}
}
}
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
i {
font-size: 48px;
margin-bottom: 16px;
display: block;
}
p {
font-size: 14px;
margin: 0;
}
}
.pagination-wrapper {
display: flex;
justify-content: center;
margin-top: 32px;
padding: 20px 0;
.el-pagination {
::v-deep(.el-pager li) {
min-width: 36px;
height: 36px;
line-height: 36px;
border-radius: 6px;
margin: 0 2px;
}
::v-deep(.el-pager li.is-active) {
background-color: #1677ff;
color: white;
}
::v-deep(.btn-prev, .btn-next) {
min-width: 36px;
height: 36px;
border-radius: 6px;
}
}
}
/* 弹窗表单样式 */
.el-dialog {
::v-deep(.el-dialog__body) {
padding: 20px 24px;
}
.el-form {
.el-form-item {
margin-bottom: 20px;
}
.upload-tips {
margin-top: 8px;
p {
margin: 0;
font-size: 12px;
color: #909399;
}
}
.upload-text {
font-size: 12px;
color: #909399;
margin-top: 8px;
}
}
}
</style>

150
frontend/src/views/user/profile/security.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<div class="content-section">
<div class="content-header">
<h2 class="content-title">安全设置</h2>
<p class="content-desc">保护您的账户安全</p>
</div>
<div class="content-body">
<el-form :model="passwordForm" label-width="120px" class="security-form">
<el-form-item label="当前密码" required>
<el-input
v-model="passwordForm.old_password"
type="password"
placeholder="请输入当前密码"
show-password
/>
</el-form-item>
<el-form-item label="新密码" required>
<el-input
v-model="passwordForm.new_password"
type="password"
placeholder="请输入新密码"
show-password
/>
</el-form-item>
<el-form-item label="确认密码" required>
<el-input
v-model="passwordForm.confirm_password"
type="password"
placeholder="请再次输入新密码"
show-password
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="changePassword" :loading="loading">
修改密码
</el-button>
</el-form-item>
</el-form>
<div class="security-tips">
<h4>安全提示</h4>
<ul>
<li>密码长度至少8位，包含字母和数字</li>
<li>定期更换密码以确保账户安全</li>
<li>不要在多个网站使用相同的密码</li>
<li>启用双因子认证可以进一步保护账户</li>
</ul>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
interface PasswordForm {
old_password: string;
new_password: string;
confirm_password: string;
}
// 表单数据
const passwordForm = ref<PasswordForm>({
old_password: '',
new_password: '',
confirm_password: ''
});
const loading = ref(false);
// 修改密码
const changePassword = async () => {
if (!passwordForm.value.old_password || !passwordForm.value.new_password || !passwordForm.value.confirm_password) {
ElMessage.error('请填写完整信息');
return;
}
if (passwordForm.value.new_password !== passwordForm.value.confirm_password) {
ElMessage.error('两次输入的密码不一致');
return;
}
if (passwordForm.value.new_password.length < 8) {
ElMessage.error('密码长度至少8位');
return;
}
loading.value = true;
try {
// 这里可以调用API修改密码
await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟API调用
ElMessage.success('密码修改成功');
// 清空表单
passwordForm.value = {
old_password: '',
new_password: '',
confirm_password: ''
};
} catch (error) {
ElMessage.error('密码修改失败，请重试');
} finally {
loading.value = false;
}
};
</script>
<style lang="less" scoped>
.security-form {
max-width: 600px;
margin-bottom: 32px;
.el-form-item {
margin-bottom: 20px;
}
}
.security-tips {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
h4 {
color: #333;
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 500;
}
ul {
margin: 0;
padding-left: 20px;
li {
color: #666;
margin-bottom: 8px;
font-size: 14px;
line-height: 1.5;
&:last-child {
margin-bottom: 0;
}
}
}
}
</style>

156
frontend/src/views/user/profile/wallet.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<div class="content-section">
<div class="content-header">
<h2 class="content-title">我的钱包</h2>
<p class="content-desc">查看余额和交易记录</p>
</div>
<div class="content-body">
<div class="wallet-info">
<div class="balance-card">
<div class="balance-title">账户余额</div>
<div class="balance-amount">¥ {{ balance }}</div>
</div>
</div>
<div class="transaction-history">
<h3>交易记录</h3>
<el-divider></el-divider>
<div v-if="transactions.length === 0" class="empty-state">
<i class="fa-solid fa-wallet"></i>
<p>暂无交易记录</p>
</div>
<div v-else class="transaction-list">
<div
v-for="transaction in transactions"
:key="transaction.id"
class="transaction-item"
>
<div class="transaction-info">
<div class="transaction-desc">{{ transaction.description }}</div>
<div class="transaction-time">{{ transaction.time }}</div>
</div>
<div class="transaction-amount" :class="{ 'income': transaction.type === 'income', 'expense': transaction.type === 'expense' }">
{{ transaction.type === 'income' ? '+' : '-' }}¥{{ transaction.amount }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
interface Transaction {
id: string;
description: string;
amount: string;
time: string;
type: 'income' | 'expense';
}
// 模拟数据
const balance = ref('0.00');
const transactions = ref<Transaction[]>([]);
// 初始化数据
const initWalletData = () => {
// 这里可以调用API获取钱包数据
balance.value = '0.00';
transactions.value = [];
};
onMounted(() => {
initWalletData();
});
</script>
<style lang="less" scoped>
.wallet-info {
margin-bottom: 32px;
.balance-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 24px;
border-radius: 12px;
text-align: center;
.balance-title {
font-size: 14px;
margin-bottom: 8px;
opacity: 0.9;
}
.balance-amount {
font-size: 32px;
font-weight: 600;
}
}
}
.transaction-history {
h3 {
font-size: 18px;
color: #333;
margin-bottom: 16px;
}
}
.transaction-list {
.transaction-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.transaction-info {
.transaction-desc {
font-size: 14px;
color: #333;
margin-bottom: 4px;
}
.transaction-time {
font-size: 12px;
color: #999;
}
}
.transaction-amount {
font-size: 16px;
font-weight: 500;
&.income {
color: #67c23a;
}
&.expense {
color: #f56c6c;
}
}
}
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
i {
font-size: 48px;
margin-bottom: 16px;
display: block;
}
p {
font-size: 14px;
margin: 0;
}
}
</style>