blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-08-20 15:42:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增友链

Browse Source
This commit is contained in:
chuan_wuhao 2022-11-25 16:48:49 +08:00
parent 1129cc6e95
commit 68a3e0ce6c
4 changed files with 77 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/production-dist/index.html vendored
View File

@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/ray.svg" /> <link rel="icon" type="image/svg+xml" href="/ray.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ray template</title> <title>ray template</title>
<script type="module" crossorigin src="/assets/index.7f217d89.js"></script> <script type="module" crossorigin src="/assets/index.315d5fe6.js"></script>
<link rel="stylesheet" href="/assets/index.4a9527dd.css"> <link rel="stylesheet" href="/assets/index.4a9527dd.css">
</head> </head>
<body> <body>

68
src/components/RayLink/index.tsx Normal file
View File

@ -0,0 +1,68 @@
import { NAvatar, NTooltip, NSpace } from 'naive-ui'
interface AvatarOptions {
key: string
src: string
tooltip: string
icon: string
}
const RayLink = defineComponent({
name: 'RayLink',
setup() {
const avatarOptions: AvatarOptions[] = [
{
key: 'yunhome',
src: 'https://yunkuangao.me/',
tooltip: '云之家',
icon: 'https://yunkuangao.me/wp-content/uploads/2022/05/cropped-cropped-QQ%E5%9B%BE%E7%89%8720220511113928.jpg',
},
{
key: 'yun-cloud-images',
src: 'https://yunkuangao.com/',
tooltip: '云图床',
icon: 'https://yunkuangao.com/images/20170801_005902048_iOS.md.jpg',
},
]
const handleLinkClick = (item: AvatarOptions) => {
window.open(item.src)
}
return {
handleLinkClick,
avatarOptions,
}
},
render() {
return (
<NSpace>
{this.avatarOptions.map((curr) => (
<NTooltip>
{{
trigger: () => (
<NAvatar
round
src={curr.icon}
style={['cursor: pointer']}
onClick={this.handleLinkClick.bind(this, curr)}
objectFit="cover"
/>
),
default: () => curr.tooltip,
}}
</NTooltip>
))}
</NSpace>
)
},
})
export default RayLink
/**
*
* 友链组件
*
* 这个组件用作初试模板中, 不喜欢自行删除
*/

4
src/views/dashboard/index.tsx
View File

@ -8,6 +8,7 @@ import {
NSpace, NSpace,
} from 'naive-ui' } from 'naive-ui'
import RayIcon from '@/components/RayIcon/index' import RayIcon from '@/components/RayIcon/index'
import RayLink from '@/components/RayLink/index'
const Dashboard = defineComponent({ const Dashboard = defineComponent({
name: 'Dashboard', name: 'Dashboard',
@ -92,6 +93,9 @@ const Dashboard = defineComponent({
))} ))}
</NDescriptions> </NDescriptions>
</NCard> </NCard>
<NCard title="友情链接">
<RayLink />
</NCard>
</NLayout> </NLayout>
) )
}, },

5
src/views/login/index.tsx
View File

@ -6,12 +6,14 @@ import {
NTabPane, NTabPane,
NGradientText, NGradientText,
NDropdown, NDropdown,
NDivider,
} from 'naive-ui' } from 'naive-ui'
import Signin from './components/Signin/index' import Signin from './components/Signin/index'
import Register from './components/Register/index' import Register from './components/Register/index'
import { useSetting } from '@/store' import { useSetting } from '@/store'
import RayIcon from '@/components/RayIcon' import RayIcon from '@/components/RayIcon'
import { useLanguageOptions } from '@/language/index' import { useLanguageOptions } from '@/language/index'
import RayLink from '@/components/RayLink/index'
const Login = defineComponent({ const Login = defineComponent({
name: 'Login', name: 'Login',
@ -23,7 +25,6 @@ const Login = defineComponent({
const { height: windowHeight } = useWindowSize() const { height: windowHeight } = useWindowSize()
const settingStore = useSetting() const settingStore = useSetting()
const { updateLocale } = settingStore const { updateLocale } = settingStore
return { return {
...toRefs(state), ...toRefs(state),
windowHeight, windowHeight,
@ -54,6 +55,8 @@ const Login = defineComponent({
<Register /> <Register />
</NTabPane> </NTabPane>
</NTabs> </NTabs>
<NDivider>友情链接</NDivider>
<RayLink />
</NCard> </NCard>
</div> </div>
) )