ContiNew/continew-admin-ui
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin-ui.git synced 2025-10-17 04:57:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Charles7c
2024-04-08 21:34:02 +08:00
commit a41a7f32ab
223 changed files with 44629 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/views/setting/index.vue Normal file
View File

@@ -0,0 +1,99 @@
<template>
<div class="setting" :class="{ 'setting--h5': !isDesktop }">
<div class="setting__tabs">
<a-tabs hide-content size="medium" :active-key="selectedKeys" @change="(key) => toPage(String(key))">
<a-tab-pane v-for="item in list" :key="item.path" :title="item.name"> </a-tab-pane>
</a-tabs>
</div>
<div class="setting__main">
<div class="setting__main__menu">
<a-menu :selected-keys="selectedKeys">
<a-menu-item v-for="item in list" :key="item.path" @click="toPage(item.path)">
<span>{{ item.name }}</span>
</a-menu-item>
</a-menu>
</div>
<div class="setting__main__content">
<ParentView></ParentView>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useDevice } from '@/hooks'
defineOptions({ name: 'Setting' })
const route = useRoute()
const router = useRouter()
const { isDesktop } = useDevice()
const selectedKeys = ref('')
watch(
() => route.path,
(newPath) => {
selectedKeys.value = newPath
},
{ immediate: true }
)
const list = [
{ name: '基本信息', value: 1, path: '/setting/profile' },
{ name: '安全设置', value: 2, path: '/setting/security' },
{ name: '消息中心', value: 3, path: '/setting/notice' }
]
const toPage = (path: string) => {
router.push({ path: path })
selectedKeys.value = path
}
</script>
<style lang="scss" scoped>
.setting {
flex: 1;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
&__tabs {
display: none;
background-color: var(--color-bg-1);
}
&__main {
flex: 1;
overflow: hidden;
display: flex;
&__menu {
width: 200px;
margin-top: $margin;
margin-left: $margin;
}
&__content {
flex: 1;
height: 100%;
padding: $margin;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
}
}
}
.setting--h5 {
flex-direction: column;
.setting__tabs {
display: block;
}
.setting__main__menu {
display: none;
}
}
:deep(.arco-menu-vertical .arco-menu-inner) {
padding: 8px;
}
</style>

21
src/views/setting/notice/index.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<div class="page">
</div>
</template>
<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
defineOptions({ name: 'Notification' })
const route = useRoute()
const form = reactive({ name: '' })
</script>
<style lang="scss" scoped>
.page {
padding: $padding;
background-color: var(--color-bg-1);
}
</style>

163
src/views/setting/profile/RightBox.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<div class="right-box">
<section class="right-box__header">
<a-avatar :size="60" :trigger-icon-style="{ color: '#3491FA' }">
<img :src="userStore.avatar" />
<template #trigger-icon>
<IconCamera />
</template>
</a-avatar>
<section class="username">{{ userStore.name }}</section>
<ul class="list">
<li><icon-user /><span>前端开发工程师</span></li>
<li><icon-safe /><span>前端</span></li>
<li><icon-location /><span>广州</span></li>
</ul>
<a-button type="primary" class="edit-btn"
><template #icon> <icon-edit /> </template>编辑信息</a-button
>
</section>
<a-tabs hide-content default-active-key="2">
<a-tab-pane key="1">
<template #title>文章</template>
</a-tab-pane>
<a-tab-pane key="2">
<template #title>项目</template>
</a-tab-pane>
<a-tab-pane key="3">
<template #title>应用（3）</template>
</a-tab-pane>
</a-tabs>
<section class="right-box__comment">
<a-comment
v-for="(item, index) in list"
:key="index"
:author="item.name"
datetime="1个小时之前"
align="right"
class="comment-item"
>
<template #actions>
<a-space :size="20">
<span class="action" key="heart">
<span><IconHeart /></span>
<span>83</span>
</span>
<span class="action" key="star">
<span><IconStar /></span>
<span>3</span>
</span>
<span class="action" key="reply"> <IconMessage /><span>回复</span></span>
</a-space>
</template>
<template #avatar>
<a-avatar>
<img alt="avatar" :src="item.avatar" />
</a-avatar>
</template>
<template #content>
<div class="text">{{ item.text }}</div>
</template>
</a-comment>
</section>
</div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const list = [
{
avatar:
'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
name: 'Lin',
text: '生活会让你苦上一阵子，等你适应以后，再让你苦上一辈子'
},
{
avatar:
'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
name: 'Lin',
text: '我从一无所有，到资产过亿，从家徒四壁，到豪车别墅，这些不是靠的别人，完全是靠我自己，一点一滴，想出来的'
},
{
avatar:
'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
name: 'Lin',
text: '有很多事情你当时想不通，别着急，过一段时间你再想，就想不起来了'
},
{
avatar:
'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
name: 'Lin',
text: '⽐你优秀的⼈都⽐你努⼒，你努力还有什么用'
},
{
avatar:
'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
name: '窃·格瓦拉',
text: '打工这辈子是不可能打工的，做生意又不会做，就是偷这种东西，才可以维持生活这样子'
}
]
</script>
<style lang="scss" scoped>
.edit-btn {
color: #fff;
border-color: #fff;
background: transparent;
&:hover {
background: rgb(var(--primary-5));
border-color: rgb(var(--primary-5));
}
}
.right-box {
flex: 1;
background-color: var(--color-bg-1);
display: flex;
flex-direction: column;
border-radius: 2px;
overflow: hidden;
overflow-y: auto;
&__header {
min-height: 204px;
height: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--color-white);
background-color: rgb(var(--primary-6));
.username {
font-size: 16px;
font-weight: 500;
margin: 10px 0;
}
.list {
display: flex;
margin-bottom: 10px;
> li {
margin-right: 15px;
span {
margin-left: 2px;
}
}
}
}
&__comment {
flex: 1;
padding: 20px 30px;
padding-left: 16px;
overflow: auto;
.comment-item {
margin-bottom: 15px;
.text {
color: $color-text-2;
}
}
}
}
</style>

139
src/views/setting/profile/index.vue Normal file
View File

@@ -0,0 +1,139 @@
<template>
<div class="user">
<div class="user__info">
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="8" :xxl="7">
<section class="user-card">
<div class="user-card__header">
<a-avatar :size="60" :trigger-icon-style="{ color: '#3491FA' }">
<img :src="userStore.avatar" />
<template #trigger-icon>
<IconCamera />
</template>
</a-avatar>
<div class="name">{{ userStore.name }}</div>
<p class="desc">尘缘已定，不念过往</p>
</div>
<ul class="user-card__list">
<li class="list-item">
<span class="icon"><icon-bookmark :stroke-width="1" :size="16" /></span>
<span>前端工程师</span>
</li>
<li class="list-item">
<span class="icon"><icon-branch :stroke-width="1" :size="16" /></span
><span>中台-数据平台团队-前端创新团队-前端架构和平台工具团队</span>
</li>
<li class="list-item">
<span class="icon"><icon-location :stroke-width="1" :size="16" /></span><span>广州市</span>
</li>
</ul>
<a-row justify="space-around" class="user-card__images">
<img src="https://file.iviewui.com/admin-pro-dist/img/icon-social-weibo.cbf658a0.svg" />
<img src="https://file.iviewui.com/admin-pro-dist/img/icon-social-zhihu.1dc5a4ff.svg" />
<img src="https://file.iviewui.com/admin-pro-dist/img/icon-social-facebook.e95df60e.svg" />
<img src="https://file.iviewui.com/admin-pro-dist/img/icon-social-twitter.5db80e81.svg" />
</a-row>
<a-divider style="border-bottom-style: dashed" />
<a-typography-title :heading="6">标签</a-typography-title>
<a-space wrap :size="5">
<a-tag>vue3</a-tag>
<a-tag>pinia</a-tag>
<a-tag>vite</a-tag>
<a-tag>ts</a-tag>
<a-tag>arco design</a-tag>
</a-space>
<a-descriptions :column="1" style="margin-top: 20px">
<a-descriptions-item label="星座">双鱼座</a-descriptions-item>
<a-descriptions-item label="生日">07月16日</a-descriptions-item>
<a-descriptions-item label="爱好">
<a-space wrap :size="5">
<a-tag color="purple">王者荣耀</a-tag>
<a-tag color="magenta">旅行</a-tag>
</a-space>
</a-descriptions-item>
</a-descriptions>
</section>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="16" :xxl="17">
<RightBox></RightBox>
</a-col>
</a-row>
</div>
</div>
</template>
<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import { useUserStore } from '@/stores'
import RightBox from './RightBox.vue'
defineOptions({ name: 'Profile' })
const route = useRoute()
const userStore = useUserStore()
</script>
<style lang="scss" scoped>
.user {
background-color: var(--color-bg-1);
&__alert {
padding: $padding;
padding-bottom: 0;
}
&__info {
box-sizing: border-box;
overflow: hidden;
display: flex;
}
}
.user-card {
width: 100%;
height: fit-content;
padding: $padding;
box-sizing: border-box;
background: var(--color-bg-1);
border-radius: 2px;
&__header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.name {
font-size: 20px;
font-weight: bolder;
line-height: 1.5;
margin: 8px;
color: $color-text-1;
}
.desc {
font-size: 12px;
color: $color-text-3;
}
}
&__list {
margin-top: 20px;
.list-item {
padding-bottom: 16px;
display: flex;
> .icon {
margin-right: 8px;
}
}
}
&__images {
margin: 10px 0;
img {
width: 32px;
height: 32px;
border-radius: 50%;
}
}
}
</style>

21
src/views/setting/security/index.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<div class="page">
</div>
</template>
<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
defineOptions({ name: 'Security' })
const route = useRoute()
const form = reactive({ name: '' })
</script>
<style lang="scss" scoped>
.page {
padding: $padding;
background-color: var(--color-bg-1);
}
</style>