kirigaya/openmcp-client
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test news page

Browse Source
This commit is contained in:
锦恢 2025-07-06 06:08:05 +08:00
parent 1244ee474e
commit bc38ea49bb
5 changed files with 152 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
news/index.html
View File

@ -3,7 +3,6 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.svg">
<link rel="stylesheet" href="/default-dark.css"> <link rel="stylesheet" href="/default-dark.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenMCP News Feature</title> <title>OpenMCP News Feature</title>
@ -15,3 +14,11 @@
</body> </body>
</html> </html>
<style>
.openmcp-icon {
display: inline-block;
vertical-align: middle;
background: url('https://kirigaya.cn/openmcp/images/favicon.svg') no-repeat center/contain;
}
</style>

12
news/src/components/Header.vue
View File

@ -1,6 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
import OmIcon from './OmIcon.vue';
const props = defineProps({ const props = defineProps({
version: { version: {
type: String, type: String,
@ -11,7 +9,7 @@ const props = defineProps({
<template> <template>
<header class="openmcp-header"> <header class="openmcp-header">
<om-icon /> <div class="openmcp-icon openmcp-logo"></div>
<div> <div>
<h1> <h1>
OpenMCP Client<sup><small>{{ props.version }}</small></sup> OpenMCP Client<sup><small>{{ props.version }}</small></sup>
@ -71,6 +69,14 @@ const props = defineProps({
</template> </template>
<style> <style>
.openmcp-logo {
display: inline-block;
width: 84px;
height: 84px;
border-radius: 16px;
vertical-align: middle;
}
hr { hr {
border: none; border: none;
border-top: 1.5px solid #B988D1; border-top: 1.5px solid #B988D1;

46
news/src/components/MoreFeature.vue
View File

@ -1,14 +1,30 @@
<script setup lang="ts">
import VanillaTilt from 'vanilla-tilt';
import { onMounted, ref } from 'vue';
const container = ref<any>(null);
onMounted(() => {
VanillaTilt.init(container.value, {
max: 12,
speed: 400,
glare: true,
'max-glare': 0.5
});
});
</script>
<template> <template>
<section class="feature-section"> <section class="feature-section">
<div class="section-title">🐳 Learn More Features & Usage</div> <div class="section-title">🐳 Learn More Features & Usage</div>
<div <div style="margin-bottom: 1.1rem;">Learn more about how to use openmcp to build your AI Agent & MCP fast</div>
style="margin-bottom: 1.1rem;"
>Learn more about how to use openmcp to build your AI Agent & MCP fast</div>
<div class="bilibili-player-container" style="display:flex; width: 100%; justify-content: center;"> <!-- <a href="https://www.youtube.com/embed/S7igsEhcLiw?si=6sqvbYJxSRoFS26g" target="_blank" class="bilibili-player-container" style="display:flex; width: 100%; justify-content: center;">
<iframe width="100%" height="580" src="https://www.youtube.com/embed/S7igsEhcLiw?si=6sqvbYJxSRoFS26g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <iframe width="100%" height="580" src="https://www.youtube.com/embed/S7igsEhcLiw?si=6sqvbYJxSRoFS26g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div> </a> -->
<a href="https://www.youtube.com/watch?v=S7igsEhcLiw" target="_blank" class="bilibili-player-container">
<img src="https://pic1.zhimg.com/80/v2-951261f789708621a2c34faa5fa6f330_1440w.png" alt="" ref="container">
</a>
</section> </section>
</template> </template>
@ -64,21 +80,21 @@
opacity: 0.85; opacity: 0.85;
} }
.bilibili-player-container img {
max-width: 100%;
box-shadow: 0 4px 12px var(--vscode-widget-shadow);
border-radius: .5em;
}
.bilibili-player-container { .bilibili-player-container {
position: relative; position: relative;
min-width: 377px; width: fit-content;
min-height: 225px; height: fit-content;
width: 52.36vw;
height: 580px;
border: 2px solid var(--vp-c-brand-3);
border-radius: 8px;
aspect-ratio: 16/9;
margin: 2rem 0; margin: 2rem 0;
border-radius: .5em; border-radius: .5em;
overflow: hidden; overflow: hidden;
transition: box-shadow 0.3s ease, border-color 0.3s ease; transition: box-shadow 0.3s ease, border-color 0.3s ease;
box-shadow: 0 4px 12px var(--vscode-widget-shadow);
} }
@media (max-width: 2700px) { @media (max-width: 2700px) {
@ -99,8 +115,4 @@
} }
} }
.bilibili-player-container:hover {
border-color: var(--vp-c-brand-1);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
</style> </style>

48
news/src/components/OmIcon.vue
View File

@ -1,5 +1,8 @@
<template> <script setup lang="ts">
<svg width="84" height="84" viewBox="0 0 612 612" fill="none" xmlns="http://www.w3.org/2000/svg" class="openmcp-logo"> import { onMounted, ref } from 'vue';
const svgString = `
<svg width="84" height="84" viewBox="0 0 612 612" fill="none" xmlns="http://www.w3.org/2000/svg" class="openmcp-logo">
<defs> <defs>
<linearGradient id="gradient_1" gradientUnits="userSpaceOnUse" x1="300" y1="0" x2="300" y2="600"> <linearGradient id="gradient_1" gradientUnits="userSpaceOnUse" x1="300" y1="0" x2="300" y2="600">
<stop offset="0" stop-color="#A1A7F6" /> <stop offset="0" stop-color="#A1A7F6" />
@ -60,33 +63,36 @@
</defs> </defs>
<g transform="translate(6 2)"> <g transform="translate(6 2)">
<g> <g>
<path <path d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z" fill="#5A00FF" fill-rule="evenodd" />
d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z" <path d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z" fill="url(#gradient_1)" fill-rule="evenodd" />
fill="#5A00FF" fill-rule="evenodd" />
<path
d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z"
fill="url(#gradient_1)" fill-rule="evenodd" />
</g> </g>
<path <path d="M0 110.5C0 49.4725 49.4725 0 110.5 0C171.527 0 221 49.4725 221 110.5C221 171.527 171.527 221 110.5 221C49.4725 221 0 171.527 0 110.5Z" fill="url(#gradient_2)" fill-rule="evenodd" filter="url(#filter_3)" transform="translate(293 324)" />
d="M0 110.5C0 49.4725 49.4725 0 110.5 0C171.527 0 221 49.4725 221 110.5C221 171.527 171.527 221 110.5 221C49.4725 221 0 171.527 0 110.5Z" <path d="M0 55.5C0 24.8482 24.8482 0 55.5 0C86.1518 0 111 24.8482 111 55.5C111 86.1518 86.1518 111 55.5 111C24.8482 111 0 86.1518 0 55.5Z" fill="url(#gradient_4)" fill-rule="evenodd" filter="url(#filter_5)" transform="translate(48 269)" />
fill="url(#gradient_2)" fill-rule="evenodd" filter="url(#filter_3)" transform="translate(293 324)" /> <path d="M0 174C0 77.9024 77.9024 0 174 0C270.098 0 348 77.9024 348 174C348 270.098 270.098 348 174 348C77.9024 348 0 270.098 0 174Z" fill="url(#gradient_6)" fill-rule="evenodd" filter="url(#filter_7)" transform="translate(188 56)" />
<path <path d="M0 57C0 25.5198 25.5198 0 57 0C88.4802 0 114 25.5198 114 57C114 88.4802 88.4802 114 57 114C25.5198 114 0 88.4802 0 57Z" fill="url(#gradient_8)" fill-rule="evenodd" filter="url(#filter_9)" transform="translate(388 129)" />
d="M0 55.5C0 24.8482 24.8482 0 55.5 0C86.1518 0 111 24.8482 111 55.5C111 86.1518 86.1518 111 55.5 111C24.8482 111 0 86.1518 0 55.5Z"
fill="url(#gradient_4)" fill-rule="evenodd" filter="url(#filter_5)" transform="translate(48 269)" />
<path
d="M0 174C0 77.9024 77.9024 0 174 0C270.098 0 348 77.9024 348 174C348 270.098 270.098 348 174 348C77.9024 348 0 270.098 0 174Z"
fill="url(#gradient_6)" fill-rule="evenodd" filter="url(#filter_7)" transform="translate(188 56)" />
<path
d="M0 57C0 25.5198 25.5198 0 57 0C88.4802 0 114 25.5198 114 57C114 88.4802 88.4802 114 57 114C25.5198 114 0 88.4802 0 57Z"
fill="url(#gradient_8)" fill-rule="evenodd" filter="url(#filter_9)" transform="translate(388 129)" />
</g> </g>
</svg> </svg>
`;
const svgContainer = ref<HTMLElement | null>(null);
onMounted(() => {
if (svgContainer.value) {
svgContainer.value.innerHTML = svgString;
}
});
</script>
<template>
<span ref="svgContainer" class="openmcp-logo"></span>
</template> </template>
<style> <style>
.openmcp-logo { .openmcp-logo {
display: inline-block;
width: 84px; width: 84px;
height: 84px; height: 84px;
border-radius: 16px; border-radius: 16px;
vertical-align: middle;
} }
</style> </style>

11
src/webview/webview.service.ts
View File

@ -153,16 +153,7 @@ export function getNewsWebviewContent(context: vscode.ExtensionContext, panel: v
const viewRoot = fspath.join(context.extensionPath, 'resources', 'changelog'); const viewRoot = fspath.join(context.extensionPath, 'resources', 'changelog');
const htmlIndexPath = fspath.join(viewRoot, 'index.html'); const htmlIndexPath = fspath.join(viewRoot, 'index.html');
const html = fs.readFileSync(htmlIndexPath, { encoding: 'utf-8' })?.replace(/(<link.+?href="|<script.+?src="|<img.+?src="|url\()(.+?)(\)|")/g, (m, $1, $2) => { const html = fs.readFileSync(htmlIndexPath, { encoding: 'utf-8' });
const importFile = $2 as string;
const rel = importFile.startsWith('/') ? importFile.substring(1) : importFile;
const absLocalPath = fspath.resolve(viewRoot, rel);
const webviewUri = panel.webview.asWebviewUri(vscode.Uri.file(absLocalPath));
const replaceHref = $1 + webviewUri?.toString() + '"';
return replaceHref;
});
return html; return html;
} }