mirror of
https://gitee.com/SuperManito/LinuxMirrors
synced 2025-11-03 07:50:28 +08:00
为文档添加 AI 搜索与聊天
This commit is contained in:
Super Manito
122
docs/assets/css/orama-ui.css
Normal file
122
docs/assets/css/orama-ui.css
Normal file
@@ -0,0 +1,122 @@
|
||||
.orama-ui {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: var(--md-text-font);
|
||||
font-weight: 400;
|
||||
text-rendering: optimizeLegibility;
|
||||
vertical-align: baseline;
|
||||
-webkit-text-size-adjust: none;
|
||||
-moz-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
--orama-base-font-size: 18;
|
||||
|
||||
--font-size-xxs: calc(10rem/var(--orama-base-font-size, 16));
|
||||
--font-size-xs: calc(12rem/var(--orama-base-font-size, 16));
|
||||
--font-size-sm: calc(14rem/var(--orama-base-font-size, 16));
|
||||
--font-size-md: calc(16rem/var(--orama-base-font-size, 16));
|
||||
--font-size-lg: calc(20rem/var(--orama-base-font-size, 16));
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-semibold: 600;
|
||||
--font-line-height-s: 1.25;
|
||||
--font-line-height-m: 1.5;
|
||||
--radius-xs: calc(6rem/var(--orama-base-font-size, 16));
|
||||
--radius-s: calc(8rem/var(--orama-base-font-size, 16));
|
||||
--radius-m: calc(12rem/var(--orama-base-font-size, 16));
|
||||
--radius-l: calc(16rem/var(--orama-base-font-size, 16));
|
||||
--radius-3xl: calc(40rem/var(--orama-base-font-size, 16));
|
||||
--textarea-radius: calc(16rem/var(--orama-base-font-size, 16));
|
||||
--spacing-2xs: calc(2rem/var(--orama-base-font-size, 16));
|
||||
--spacing-xs: calc(4rem/var(--orama-base-font-size, 16));
|
||||
--spacing-s: calc(8rem/var(--orama-base-font-size, 16));
|
||||
--spacing-m: calc(12rem/var(--orama-base-font-size, 16));
|
||||
--spacing-l: calc(16rem/var(--orama-base-font-size, 16));
|
||||
--spacing-xl: calc(24rem/var(--orama-base-font-size, 16));
|
||||
--spacing-2xl: calc(32rem/var(--orama-base-font-size, 16));
|
||||
--spacing-3xl: calc(40rem/var(--orama-base-font-size, 16));
|
||||
--textarea-shadow: var(--md-shadow-z1);
|
||||
|
||||
--text-color-primary: #151515;
|
||||
--text-color-secondary: #838289;
|
||||
--text-color-tertiary: #99989d;
|
||||
--text-color-accent: var(--md-accent-fg-color);
|
||||
--text-color-inactive: #99989d;
|
||||
--text-color-reverse: #fff;
|
||||
--background-color-primary: #fbfbfb;
|
||||
--background-color-secondary: #fff;
|
||||
--background-color-tertiary: var(--md-accent-fg-color--transparent);
|
||||
--background-color-fourth: #efefef;
|
||||
--background-color-reverse: #000;
|
||||
--background-color-accent: var(--md-accent-fg-color);
|
||||
--border-color-primary: #dadada;
|
||||
--border-color-secondary: #efefef;
|
||||
--border-color-tertiary: #151515;
|
||||
--border-color-accent: var(--md-accent-fg-color);
|
||||
--icon-color-primary: #151515;
|
||||
--icon-color-secondary: #dadada;
|
||||
--icon-color-tertiary: #838289;
|
||||
--icon-color-inactive: #99989d;
|
||||
--icon-color-reverse: #fbfbfb;
|
||||
--shadow-color-primary: #fff;
|
||||
--button-text-color-primary: #fbfbfb;
|
||||
--button-text-color-secondary: #838289;
|
||||
--button-background-color-primary: var(--md-accent-fg-color);
|
||||
--button-background-color-secondary: hsla(240, 9%, 75%, 0.33);
|
||||
--button-background-color-secondary-hover: var(--md-accent-fg-color--transparent);
|
||||
--button-border-color-secondary: #dadada;
|
||||
--backdrop-background-color-primary: hsla(0, 0%, 98%, .7);
|
||||
--chat-button-border-color-gradientOne: transparent;
|
||||
--chat-button-border-color-gradientTwo: transparent;
|
||||
--chat-button-border-color-gradientThree: var(--md-accent-fg-color);
|
||||
--chat-button-border-color-gradientFour: var(--md-accent-fg-color);
|
||||
--chat-button-border-color-gradientFive: transparent;
|
||||
--chat-button-border-color-gradientSix: transparent;
|
||||
--chat-button-background-color-gradientOne: var(--md-accent-fg-color);
|
||||
--chat-button-background-color-gradientTwo: transparent;
|
||||
|
||||
}
|
||||
|
||||
.orama-ui *,
|
||||
.orama-ui:after,
|
||||
.orama-ui:before {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
[data-md-color-scheme="slate"] .orama-ui {
|
||||
--text-color-primary: #fbfbfb;
|
||||
--text-color-secondary: #dadada;
|
||||
--text-color-tertiary: #838289;
|
||||
--text-color-accent: var(--md-accent-fg-color);
|
||||
--text-color-inactive: #99989d;
|
||||
--text-color-reverse: #000;
|
||||
--background-color-primary: var(--md-default-bg-color--dark);
|
||||
--background-color-secondary: #1a1b20;
|
||||
--background-color-tertiary: var(--md-accent-fg-color--transparent);
|
||||
--background-color-fourth: #2e2e2e;
|
||||
--background-color-reverse: #fff;
|
||||
--background-color-accent: var(--md-accent-fg-color);
|
||||
--border-color-primary: #2e2e2e;
|
||||
--border-color-secondary: #151515;
|
||||
--border-color-tertiary: #afafb1;
|
||||
--border-color-accent: var(--md-accent-fg-color);
|
||||
--icon-color-primary: #fbfbfb;
|
||||
--icon-color-secondary: #dadada;
|
||||
--icon-color-tertiary: #838289;
|
||||
--icon-color-inactive: #99989d;
|
||||
--icon-color-reverse: var(--md-default-bg-color--dark);
|
||||
--shadow-color-primary: #000;
|
||||
--button-text-color-primary: #fbfbfb;
|
||||
--button-text-color-secondary: #99989d;
|
||||
--button-background-color-primary: var(--md-accent-fg-color);
|
||||
--button-background-color-secondary: hsla(var(--md-hue), 15%, 9%, 0.33);
|
||||
--button-background-color-secondary-hover: var(--md-accent-fg-color--transparent);
|
||||
--button-border-color-secondary: #2e2e2e;
|
||||
--backdrop-background-color-primary: rgba(5, 5, 5, .7);
|
||||
--chat-button-border-color-gradientOne: transparent;
|
||||
--chat-button-border-color-gradientTwo: transparent;
|
||||
--chat-button-border-color-gradientThree: var(--md-accent-fg-color);
|
||||
--chat-button-border-color-gradientFour: var(--md-accent-fg-color);
|
||||
--chat-button-border-color-gradientFive: transparent;
|
||||
--chat-button-border-color-gradientSix: transparent;
|
||||
--chat-button-background-color-gradientOne: var(--md-accent-fg-color);
|
||||
--chat-button-background-color-gradientTwo: transparent;
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
// 使用 mkdocs-material 与第三方 JavaScript 库集成的方法
|
||||
document$.subscribe(function () {
|
||||
ComponentSystem.reinitializeAll()
|
||||
// Orama AI Search
|
||||
loadOramaWebComponent()
|
||||
})
|
||||
|
||||
104
docs/assets/js/components/orama-ui/config.js
Normal file
104
docs/assets/js/components/orama-ui/config.js
Normal file
@@ -0,0 +1,104 @@
|
||||
// get search box config
|
||||
function getOramaSearchBoxConfig() {
|
||||
return {
|
||||
themeConfig: {
|
||||
// colors: {
|
||||
// light: {
|
||||
// '--text-color-accent': 'var(--md-accent-fg-color)',
|
||||
// '--background-color-tertiary': 'var(--md-accent-fg-color--transparent)',
|
||||
// '--background-color-accent': 'var(--md-accent-fg-color)',
|
||||
// '--border-color-accent': 'var(--md-accent-fg-color)',
|
||||
// '--button-background-color-primary': 'var(--md-accent-fg-color)',
|
||||
// '--button-background-color-secondary': 'hsla(240, 9%, 75%, 0.33)',
|
||||
// '--button-background-color-secondary-hover': 'var(--md-accent-fg-color--transparent)',
|
||||
// '--chat-button-border-color-gradientThree': 'var(--md-accent-fg-color)',
|
||||
// '--chat-button-border-color-gradientFour': 'var(--md-accent-fg-color)',
|
||||
// '--chat-button-background-color-gradientOne': 'var(--md-accent-fg-color)',
|
||||
// },
|
||||
// dark: {
|
||||
// '--text-color-accent': 'var(--md-accent-fg-color)',
|
||||
// '--background-color-primary': 'var(--md-default-bg-color--dark)',
|
||||
// '--background-color-secondary': '#1a1b20',
|
||||
// '--background-color-tertiary': 'var(--md-accent-fg-color--transparent)',
|
||||
// '--background-color-accent': 'var(--md-accent-fg-color)',
|
||||
// '--border-color-accent': 'var(--md-accent-fg-color)',
|
||||
// '--icon-color-reverse': 'var(--md-default-bg-color--dark)',
|
||||
// '--button-background-color-primary': 'var(--md-accent-fg-color)',
|
||||
// '--button-background-color-secondary': 'hsla(var(--md-hue), 15%, 9%, 0.33)',
|
||||
// '--button-background-color-secondary-hover': 'var(--md-accent-fg-color--transparent)',
|
||||
// '--chat-button-border-color-gradientThree': 'var(--md-accent-fg-color)',
|
||||
// '--chat-button-border-color-gradientFour': 'var(--md-accent-fg-color)',
|
||||
// '--chat-button-background-color-gradientOne': 'var(--md-accent-fg-color)',
|
||||
// },
|
||||
// },
|
||||
// shadow: {
|
||||
// '--textarea-shadow': 'var(--md-shadow-z1)',
|
||||
// },
|
||||
// typography: {
|
||||
// '--font-primary': 'var(--md-font-family)',
|
||||
// },
|
||||
},
|
||||
index: {
|
||||
endpoint: 'https://cloud.orama.run/v1/indexes/linuxmirrors-cn-imxypv',
|
||||
api_key: 'mBJ0b68dZIk79DqCkdUSJI6yQMo4L4o3',
|
||||
},
|
||||
facetProperty: 'category',
|
||||
sourceBaseUrl: 'https://linuxmirrors.cn',
|
||||
sourcesMap: {
|
||||
title: 'title',
|
||||
},
|
||||
resultMap: {
|
||||
title: 'title',
|
||||
description: 'content',
|
||||
section: 'category',
|
||||
},
|
||||
searchPlaceholder: '请输入要搜索的内容...',
|
||||
chatPlaceholder: '有什么可以帮你的吗？',
|
||||
suggestions: ['如何使用', '支持哪些系统'],
|
||||
}
|
||||
}
|
||||
|
||||
// localization search box component
|
||||
function localizationOramaSearchBox(searchBox) {
|
||||
if (!searchBox) return
|
||||
const observer = new MutationObserver((mutations, obs) => {
|
||||
const shadowRoot = searchBox.shadowRoot
|
||||
if (shadowRoot) {
|
||||
// Get a summary (Only PC)
|
||||
const chatButton = shadowRoot.querySelector('.chat-button')
|
||||
if (chatButton) {
|
||||
const element = chatButton.querySelector('.button-label')
|
||||
if (element && element.textContent !== '询问 AI') {
|
||||
element.textContent = '询问 AI'
|
||||
}
|
||||
}
|
||||
// Hide "Orama can make mistakes. Please verify the information."
|
||||
const chatFormWrapper = shadowRoot.querySelector('.chat-form-wrapper')
|
||||
if (chatFormWrapper) {
|
||||
const element = chatFormWrapper.querySelector('p.small.text-center')
|
||||
if (element) {
|
||||
element.style = 'display: none;'
|
||||
}
|
||||
}
|
||||
// Navigation bar (Only Mobile)
|
||||
const navigationBar = shadowRoot.querySelector('orama-navigation-bar')
|
||||
if (navigationBar) {
|
||||
const toggler = navigationBar.querySelector('orama-toggler')
|
||||
if (toggler) {
|
||||
const searchSpan = toggler.querySelector('span:nth-child(1)')
|
||||
if (searchSpan && searchSpan.textContent !== '搜索') {
|
||||
searchSpan.textContent = '搜索'
|
||||
searchSpan.style = 'max-height: fit-content;'
|
||||
}
|
||||
const askAISpan = toggler.querySelector('span:nth-child(2)')
|
||||
if (askAISpan && askAISpan.textContent !== '询问 AI') {
|
||||
askAISpan.textContent = '询问 AI'
|
||||
askAISpan.style = 'max-height: fit-content;'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
observer.observe(searchBox, { childList: true, subtree: true, attributes: true })
|
||||
setTimeout(() => observer.disconnect(), 2000)
|
||||
}
|
||||
47
docs/assets/js/components/orama-ui/index-native.js
Normal file
47
docs/assets/js/components/orama-ui/index-native.js
Normal file
@@ -0,0 +1,47 @@
|
||||
function loadOramaWebComponent() {
|
||||
const searchBox = document.querySelector('orama-search-box')
|
||||
if (searchBox) {
|
||||
Object.assign(searchBox, getOramaSearchBoxConfig())
|
||||
}
|
||||
|
||||
// custom button style and localization
|
||||
const searchButton = document.querySelector('orama-search-button')
|
||||
if (searchButton) {
|
||||
searchButton.textContent = '搜索'
|
||||
const observer = new MutationObserver((mutations, obs) => {
|
||||
if (searchButton.shadowRoot) {
|
||||
const button = searchButton.shadowRoot.querySelector('button')
|
||||
if (button) {
|
||||
button.style = 'border-radius: 8px !important;'
|
||||
button.querySelector('.button__label').style = 'height: 22px; padding: 2px 8px; font-size: 0.75rem;'
|
||||
button.querySelector('span[slot="adorment-end"], .kyb-shortcut').style = 'display: none;'
|
||||
// search icon style
|
||||
const magnifyingGlassShadowRoot = button.querySelector('ph-magnifying-glass').shadowRoot
|
||||
const styleElement = document.createElement('style')
|
||||
styleElement.textContent = `
|
||||
svg {
|
||||
font-size: 24px;
|
||||
}`
|
||||
if (!magnifyingGlassShadowRoot.querySelector('style[data-custom="icon-style"]')) {
|
||||
styleElement.setAttribute('data-custom', 'icon-style')
|
||||
magnifyingGlassShadowRoot.appendChild(styleElement)
|
||||
}
|
||||
obs.disconnect()
|
||||
}
|
||||
}
|
||||
})
|
||||
observer.observe(searchButton, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
attributes: true,
|
||||
characterData: true,
|
||||
})
|
||||
setTimeout(() => observer.disconnect(), 2000)
|
||||
}
|
||||
|
||||
searchButton.addEventListener('click', function () {
|
||||
const searchBox = document.querySelector('orama-search-box')
|
||||
// localization chat box component
|
||||
localizationOramaSearchBox(searchBox)
|
||||
})
|
||||
}
|
||||
30
docs/assets/js/components/orama-ui/index.js
Normal file
30
docs/assets/js/components/orama-ui/index.js
Normal file
@@ -0,0 +1,30 @@
|
||||
function loadOramaWebComponent() {
|
||||
const searchBox = document.querySelector('orama-search-box')
|
||||
if (searchBox) {
|
||||
Object.assign(searchBox, getOramaSearchBoxConfig())
|
||||
}
|
||||
|
||||
// define global function
|
||||
window.openOramaSearch = function (event) {
|
||||
const element = document.querySelector('orama-search-box')
|
||||
if (element) {
|
||||
element.open = true
|
||||
localizationOramaSearchBox(element)
|
||||
}
|
||||
return false
|
||||
}
|
||||
// localization chat box component
|
||||
if (searchBox) {
|
||||
const openObserver = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.type === 'attributes' && mutation.attributeName === 'open' && searchBox.hasAttribute('open')) {
|
||||
localizationOramaSearchBox(searchBox)
|
||||
}
|
||||
})
|
||||
})
|
||||
openObserver.observe(searchBox, { attributes: true })
|
||||
if (searchBox.hasAttribute('open')) {
|
||||
localizationOramaSearchBox(searchBox)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user