1016 lines
30 KiB
Handlebars
1016 lines
30 KiB
Handlebars
{{template "user/settings/layout_head" .}}
|
||
|
||
<style>
|
||
/* 应用商店卡片样式 - 强制覆盖 */
|
||
.app-store-grid .ui.card {
|
||
height: 380px !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
margin: 0.5em 0 !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .image {
|
||
height: 140px !important;
|
||
background: #f8f9fa !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
overflow: hidden !important;
|
||
flex-shrink: 0 !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .image img {
|
||
max-width: 90px !important;
|
||
max-height: 90px !important;
|
||
width: auto !important;
|
||
height: auto !important;
|
||
object-fit: contain !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .content {
|
||
flex: 1 !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
padding: 1em !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .content .header {
|
||
font-size: 1.1em !important;
|
||
margin-bottom: 0.5em !important;
|
||
white-space: nowrap !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
line-height: 1.3em !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .content .meta {
|
||
margin-bottom: 0.5em !important;
|
||
font-size: 0.9em !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .content .description {
|
||
flex: 1 !important;
|
||
overflow: hidden !important;
|
||
display: -webkit-box !important;
|
||
-webkit-line-clamp: 3 !important;
|
||
-webkit-box-orient: vertical !important;
|
||
text-overflow: ellipsis !important;
|
||
line-height: 1.4em !important;
|
||
max-height: 4.2em !important;
|
||
font-size: 0.9em !important;
|
||
color: #666 !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .content .extra {
|
||
border-top: 1px solid rgba(34,36,38,.1) !important;
|
||
margin-top: 0.5em !important;
|
||
padding-top: 0.5em !important;
|
||
flex-shrink: 0 !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .extra.content {
|
||
padding: 0.5em 1em !important;
|
||
flex-shrink: 0 !important;
|
||
border-top: 1px solid rgba(34,36,38,.1) !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .ui.mini.label {
|
||
font-size: 0.7em !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .ui.compact.button {
|
||
padding: 0.5em 0.8em !important;
|
||
font-size: 14px !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .ui.button,
|
||
.app-store-grid .ui.card .ui.buttons .button {
|
||
font-size: 14px !important;
|
||
}
|
||
|
||
.app-store-grid .ui.buttons {
|
||
font-size: 14px !important;
|
||
}
|
||
|
||
/* 确保列布局正确 */
|
||
.app-store-grid.ui.grid > .column {
|
||
padding: 0.5rem !important;
|
||
}
|
||
|
||
/* 基本的modal显示样式 */
|
||
.ui.modal {
|
||
display: none;
|
||
position: absolute !important;
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
transform: translate(-50%, -50%) !important;
|
||
z-index: 1000 !important;
|
||
}
|
||
|
||
.ui.modal[style*="display: block"] {
|
||
display: block !important;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.app-store-grid .ui.card {
|
||
height: auto !important;
|
||
min-height: 300px !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .image {
|
||
height: 100px !important;
|
||
}
|
||
|
||
.app-store-grid .ui.card .content .header {
|
||
font-size: 1em !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<div class="ui stackable grid">
|
||
<div class="sixteen wide column">
|
||
<div class="ui segment">
|
||
<div class="ui stackable grid">
|
||
<div class="sixteen wide column">
|
||
<h2 class="ui header">
|
||
<i class="shopping cart icon"></i>
|
||
<div class="content" style="width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;">
|
||
<div>
|
||
<div class="ui buttons" style="margin-right: .5em;">
|
||
<button class="ui primary button" id="btn-source-local">本地应用商店</button>
|
||
<div class="or"></div>
|
||
<button class="ui button" id="btn-source-devstar">DevStar 应用商店</button>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="ui basic buttons">
|
||
<button class="ui button" onclick="openInstallTargetModal()">
|
||
<i class="server icon"></i> 安装位置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Search and Filter Bar -->
|
||
<div class="ui stackable grid">
|
||
<div class="sixteen wide column">
|
||
<div class="ui fluid action input">
|
||
<input type="text" placeholder="{{ctx.Locale.Tr "appstore.search_placeholder"}}" id="app-search">
|
||
<button class="ui button" onclick="searchApps()">
|
||
<i class="search icon"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加应用按钮 -->
|
||
<button class="ui primary button" style="margin-bottom:1em;" onclick="showAddAppModal()">添加应用</button>
|
||
|
||
<div class="ui stackable grid" style="margin-top: 1rem;">
|
||
<div class="four wide column">
|
||
<!-- Category Filter -->
|
||
<div class="ui vertical fluid menu">
|
||
<div class="header item">{{ctx.Locale.Tr "appstore.category_all"}}</div>
|
||
<a class="item active" data-category="all">
|
||
<i class="grid layout icon"></i>
|
||
{{ctx.Locale.Tr "appstore.category_all"}}
|
||
</a>
|
||
<a class="item" data-category="web-server">
|
||
<i class="server icon"></i>
|
||
{{ctx.Locale.Tr "appstore.category_web_server"}}
|
||
</a>
|
||
<a class="item" data-category="database">
|
||
<i class="database icon"></i>
|
||
{{ctx.Locale.Tr "appstore.category_database"}}
|
||
</a>
|
||
<a class="item" data-category="development">
|
||
<i class="code icon"></i>
|
||
{{ctx.Locale.Tr "appstore.category_development"}}
|
||
</a>
|
||
<a class="item" data-category="monitoring">
|
||
<i class="chart line icon"></i>
|
||
{{ctx.Locale.Tr "appstore.category_monitoring"}}
|
||
</a>
|
||
<a class="item" data-category="other">
|
||
<i class="ellipsis horizontal icon"></i>
|
||
{{ctx.Locale.Tr "appstore.category_other"}}
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Deployment Type Filter -->
|
||
<div class="ui vertical fluid menu deployment-filter" style="margin-top: 1rem;">
|
||
<div class="header item">{{ctx.Locale.Tr "appstore.deployment_type"}}</div>
|
||
<a class="item active" data-deployment="all">
|
||
<i class="grid layout icon"></i>
|
||
{{ctx.Locale.Tr "appstore.category_all"}}
|
||
</a>
|
||
<a class="item" data-deployment="docker">
|
||
<i class="docker icon"></i>
|
||
{{ctx.Locale.Tr "appstore.deployment_docker"}}
|
||
</a>
|
||
<a class="item" data-deployment="kubernetes">
|
||
<i class="kubernetes icon"></i>
|
||
{{ctx.Locale.Tr "appstore.deployment_kubernetes"}}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="twelve wide column">
|
||
<!-- Apps Grid -->
|
||
<div class="ui stackable three column grid app-store-grid" id="apps-grid">
|
||
<!-- App cards will be loaded here -->
|
||
<div class="sixteen wide column">
|
||
<div class="ui placeholder segment">
|
||
<div class="ui icon header">
|
||
<i class="spinner loading icon"></i>
|
||
{{ctx.Locale.Tr "appstore.loading"}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- App Installation Modal -->
|
||
<div class="ui modal" id="install-modal">
|
||
<div class="header">
|
||
<span id="install-app-name"></span>
|
||
</div>
|
||
<div class="content">
|
||
<div class="description">
|
||
<form class="ui form" id="install-form">
|
||
<!-- Configuration fields will be dynamically generated here -->
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="actions">
|
||
<div class="ui button" onclick="closeInstallModal()">{{ctx.Locale.Tr "cancel"}}</div>
|
||
<div class="ui primary button" onclick="installApp()">{{ctx.Locale.Tr "appstore.install"}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- App Details Modal -->
|
||
<div class="ui modal" id="app-details-modal">
|
||
<div class="header">
|
||
<span id="details-app-name"></span>
|
||
</div>
|
||
<div class="content">
|
||
<div class="ui stackable grid">
|
||
<div class="eight wide column">
|
||
<div class="ui segment">
|
||
<h4 class="ui header">{{ctx.Locale.Tr "appstore.description"}}</h4>
|
||
<p id="details-description"></p>
|
||
|
||
<h4 class="ui header">{{ctx.Locale.Tr "appstore.requirements"}}</h4>
|
||
<div id="details-requirements"></div>
|
||
|
||
<h4 class="ui header">{{ctx.Locale.Tr "appstore.tags"}}</h4>
|
||
<div id="details-tags"></div>
|
||
</div>
|
||
</div>
|
||
<div class="eight wide column">
|
||
<div class="ui segment">
|
||
<h4 class="ui header">{{ctx.Locale.Tr "appstore.version"}}</h4>
|
||
<p id="details-version"></p>
|
||
|
||
<h4 class="ui header">{{ctx.Locale.Tr "appstore.author"}}</h4>
|
||
<p id="details-author"></p>
|
||
|
||
<h4 class="ui header">{{ctx.Locale.Tr "appstore.license"}}</h4>
|
||
<p id="details-license"></p>
|
||
|
||
<div class="ui buttons">
|
||
<a class="ui button" id="details-website" target="_blank">
|
||
<i class="external alternate icon"></i>
|
||
{{ctx.Locale.Tr "appstore.website"}}
|
||
</a>
|
||
<a class="ui button" id="details-repository" target="_blank">
|
||
<i class="github icon"></i>
|
||
{{ctx.Locale.Tr "appstore.repository"}}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="actions">
|
||
<div class="ui button" onclick="closeDetailsModal()">{{ctx.Locale.Tr "cancel"}}</div>
|
||
<div class="ui primary button" onclick="showInstallModalFromDetails()">{{ctx.Locale.Tr "appstore.install"}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加应用模态框 -->
|
||
<div class="ui modal" id="add-app-modal">
|
||
<div class="header">添加应用</div>
|
||
<div class="content">
|
||
<textarea id="add-app-json" rows="12" style="width:100%;" placeholder="粘贴应用JSON内容"></textarea>
|
||
</div>
|
||
<div class="actions">
|
||
<div class="ui button" onclick="closeAddAppModal()">取消</div>
|
||
<div class="ui primary button" onclick="submitAddApp()">提交</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 安装位置设置 Modal -->
|
||
<div class="ui modal" id="install-target-modal">
|
||
<div class="header">安装位置</div>
|
||
<div class="content">
|
||
<div class="ui form">
|
||
<div class="grouped fields">
|
||
<label>选择安装位置</label>
|
||
<div class="field">
|
||
<div class="ui radio checkbox">
|
||
<input type="radio" name="installTargetRadio" value="local" checked>
|
||
<label>本机（默认）</label>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="ui radio checkbox">
|
||
<input type="radio" name="installTargetRadio" value="kubeconfig">
|
||
<label>外部集群（Kubeconfig）</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="kubeconfig-fields" style="display:none;">
|
||
<div class="field">
|
||
<label>Kubeconfig（粘贴内容）</label>
|
||
<textarea id="kubeconfig-content" rows="8" placeholder="粘贴 kubeconfig 内容"></textarea>
|
||
</div>
|
||
<div class="field">
|
||
<label>Context 名称（可选）</label>
|
||
<input type="text" id="kubeconfig-context" placeholder="不填则使用 current-context">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="actions">
|
||
<div class="ui button" onclick="closeInstallTargetModal()">取消</div>
|
||
<div class="ui primary button" onclick="saveInstallTarget()">保存</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let allApps = [];
|
||
let filteredApps = [];
|
||
let currentApp = null;
|
||
let storeSource = 'local'; // local | devstar
|
||
// 安装位置：local | kubeconfig
|
||
let installTarget = 'local';
|
||
let installKubeconfigContent = '';
|
||
let installKubeconfigContext = '';
|
||
|
||
// Initialize the page
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
setupSourceToggle();
|
||
setupInstallTargetUI();
|
||
loadAppsFromAPI();
|
||
setupEventListeners();
|
||
});
|
||
|
||
function setupSourceToggle() {
|
||
const btnLocal = document.getElementById('btn-source-local');
|
||
const btnDev = document.getElementById('btn-source-devstar');
|
||
const applyActive = () => {
|
||
if (storeSource === 'local') {
|
||
btnLocal.classList.add('primary');
|
||
btnDev.classList.remove('primary');
|
||
} else {
|
||
btnDev.classList.add('primary');
|
||
btnLocal.classList.remove('primary');
|
||
}
|
||
};
|
||
btnLocal.addEventListener('click', () => {
|
||
storeSource = 'local';
|
||
applyActive();
|
||
loadAppsFromAPI();
|
||
});
|
||
btnDev.addEventListener('click', () => {
|
||
storeSource = 'devstar';
|
||
applyActive();
|
||
loadAppsFromAPI();
|
||
});
|
||
applyActive();
|
||
}
|
||
|
||
function setupInstallTargetUI() {
|
||
// 使用原生JavaScript初始化radio button事件
|
||
const radioButtons = document.querySelectorAll('#install-target-modal input[type="radio"]');
|
||
radioButtons.forEach(radio => {
|
||
radio.addEventListener('change', function() {
|
||
const kubeconfigFields = document.getElementById('kubeconfig-fields');
|
||
if (kubeconfigFields) {
|
||
kubeconfigFields.style.display = (this.value === 'kubeconfig') ? 'block' : 'none';
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
function openInstallTargetModal() {
|
||
// 预填当前状态
|
||
const radios = document.getElementsByName('installTargetRadio');
|
||
for (const r of radios) {
|
||
r.checked = (r.value === installTarget);
|
||
}
|
||
|
||
const kubeconfigFields = document.getElementById('kubeconfig-fields');
|
||
if (kubeconfigFields) {
|
||
kubeconfigFields.style.display = (installTarget === 'kubeconfig') ? 'block' : 'none';
|
||
}
|
||
|
||
const kubeconfigContent = document.getElementById('kubeconfig-content');
|
||
const kubeconfigContext = document.getElementById('kubeconfig-context');
|
||
|
||
if (kubeconfigContent) {
|
||
kubeconfigContent.value = installKubeconfigContent || '';
|
||
}
|
||
if (kubeconfigContext) {
|
||
kubeconfigContext.value = installKubeconfigContext || '';
|
||
}
|
||
|
||
// 显示modal
|
||
const modal = document.getElementById('install-target-modal');
|
||
if (modal) {
|
||
modal.style.display = 'block';
|
||
}
|
||
}
|
||
|
||
function closeInstallTargetModal() {
|
||
// 隐藏modal
|
||
const modal = document.getElementById('install-target-modal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function saveInstallTarget() {
|
||
const radios = document.getElementsByName('installTargetRadio');
|
||
let selected = 'local';
|
||
for (const r of radios) {
|
||
if (r.checked) { selected = r.value; break; }
|
||
}
|
||
installTarget = selected;
|
||
if (installTarget === 'kubeconfig') {
|
||
installKubeconfigContent = document.getElementById('kubeconfig-content').value.trim();
|
||
installKubeconfigContext = document.getElementById('kubeconfig-context').value.trim();
|
||
if (!installKubeconfigContent) {
|
||
alert('请输入 kubeconfig 内容');
|
||
return;
|
||
}
|
||
} else {
|
||
installKubeconfigContent = '';
|
||
installKubeconfigContext = '';
|
||
}
|
||
closeInstallTargetModal();
|
||
}
|
||
|
||
function setupEventListeners() {
|
||
// Category filter
|
||
document.querySelectorAll('[data-category]').forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
document.querySelectorAll('[data-category]').forEach(i => i.classList.remove('active'));
|
||
this.classList.add('active');
|
||
filterApps();
|
||
});
|
||
});
|
||
|
||
// Deployment filter
|
||
document.querySelectorAll('[data-deployment]').forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
document.querySelectorAll('[data-deployment]').forEach(i => i.classList.remove('active'));
|
||
this.classList.add('active');
|
||
filterApps();
|
||
});
|
||
});
|
||
|
||
// Search input
|
||
document.getElementById('app-search').addEventListener('input', function() {
|
||
filterApps();
|
||
});
|
||
}
|
||
|
||
async function loadAppsFromAPI() {
|
||
try {
|
||
// 构建查询参数
|
||
const params = new URLSearchParams();
|
||
if (storeSource === 'devstar') {
|
||
params.append('source', 'devstar');
|
||
}
|
||
|
||
// 添加过滤参数
|
||
const selectedCategory = document.querySelector('[data-category].active')?.dataset.category;
|
||
const selectedDeployment = document.querySelector('[data-deployment].active')?.dataset.deployment;
|
||
const searchTerm = document.getElementById('app-search').value;
|
||
|
||
if (selectedCategory && selectedCategory !== 'all') {
|
||
params.append('category', selectedCategory);
|
||
}
|
||
if (selectedDeployment && selectedDeployment !== 'all') {
|
||
params.append('deployment', selectedDeployment);
|
||
}
|
||
if (searchTerm.trim()) {
|
||
params.append('search', searchTerm);
|
||
}
|
||
|
||
const url = `/user/settings/appstore/api/apps?${params.toString()}`;
|
||
const response = await fetch(url);
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
const data = await response.json();
|
||
allApps = data.apps || [];
|
||
filteredApps = [...allApps];
|
||
loadApps();
|
||
} catch (error) {
|
||
console.error('Error loading apps:', error);
|
||
showError('Failed to load apps');
|
||
}
|
||
}
|
||
|
||
function showError(message) {
|
||
const grid = document.getElementById('apps-grid');
|
||
grid.innerHTML = `
|
||
<div class="sixteen wide column">
|
||
<div class="ui negative message">
|
||
<div class="header">Error</div>
|
||
<p>${message}</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function loadApps() {
|
||
const grid = document.getElementById('apps-grid');
|
||
grid.innerHTML = '';
|
||
|
||
if (filteredApps.length === 0) {
|
||
grid.innerHTML = `
|
||
<div class="sixteen wide column">
|
||
<div class="ui placeholder segment">
|
||
<div class="ui icon header">
|
||
<i class="search icon"></i>
|
||
{{ctx.Locale.Tr "appstore.no_apps"}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
filteredApps.forEach(app => {
|
||
const card = createAppCard(app);
|
||
grid.appendChild(card);
|
||
});
|
||
}
|
||
|
||
function createAppCard(app) {
|
||
const column = document.createElement('div');
|
||
column.className = 'column';
|
||
|
||
// Create badges for official and verified apps
|
||
let badges = '';
|
||
if (app.isOfficial || app.is_official) {
|
||
badges += '<span class="ui blue label">Official</span> ';
|
||
}
|
||
if (app.isVerified || app.is_verified) {
|
||
badges += '<span class="ui green label">Verified</span> ';
|
||
}
|
||
|
||
// Get deployment type, prioritize deployment_type field
|
||
let deploymentType = 'docker';
|
||
if (app.deployment_type) {
|
||
deploymentType = app.deployment_type;
|
||
} else if (app.deployment) {
|
||
deploymentType = app.deployment;
|
||
} else if (app.Deploy && app.Deploy.Type) {
|
||
deploymentType = app.Deploy.Type;
|
||
} else if (app.deploy && app.deploy.type) {
|
||
deploymentType = app.deploy.type;
|
||
}
|
||
|
||
// Get install count
|
||
const installCount = app.installCount || app.install_count || 0;
|
||
|
||
// Create deployment type label with appropriate styling
|
||
let deploymentLabel = '';
|
||
if (deploymentType === 'both') {
|
||
deploymentLabel = '<span class="ui mini orange label">Docker & K8s</span>';
|
||
} else if (deploymentType === 'kubernetes') {
|
||
deploymentLabel = '<span class="ui mini blue label">Kubernetes</span>';
|
||
} else {
|
||
deploymentLabel = '<span class="ui mini green label">Docker</span>';
|
||
}
|
||
|
||
column.innerHTML = `
|
||
<div class="ui fluid card">
|
||
<div class="image">
|
||
<img src="${app.icon || '/assets/img/logo.png'}" alt="${app.name}" onerror="this.src='/assets/img/logo.png'">
|
||
</div>
|
||
<div class="content">
|
||
<div class="header" title="${app.name}">${app.name}</div>
|
||
<div class="meta">
|
||
<span class="date">v${app.version}</span>
|
||
<span class="right floated">
|
||
${deploymentLabel}
|
||
</span>
|
||
</div>
|
||
<div class="description" title="${app.description || 'No description available'}">
|
||
${truncateText(app.description || 'No description available', 100)}
|
||
</div>
|
||
<div class="extra">
|
||
${badges}
|
||
<span class="ui mini label">
|
||
<i class="download icon"></i>
|
||
${installCount} installs
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="extra content">
|
||
<div class="ui two buttons">
|
||
<button class="ui basic compact button" onclick="showAppDetails('${app.id || app.app_id}')">
|
||
<i class="info circle icon"></i>
|
||
详情
|
||
</button>
|
||
<button class="ui primary compact button" onclick="showInstallModal('${app.id || app.app_id}')">
|
||
<i class="download icon"></i>
|
||
安装
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
return column;
|
||
}
|
||
|
||
// 文本截断函数
|
||
function truncateText(text, maxLength) {
|
||
if (text.length <= maxLength) {
|
||
return text;
|
||
}
|
||
return text.substring(0, maxLength) + '...';
|
||
}
|
||
|
||
function filterApps() {
|
||
const selectedCategory = document.querySelector('[data-category].active').dataset.category;
|
||
const selectedDeployment = document.querySelector('[data-deployment].active').dataset.deployment;
|
||
const searchTerm = document.getElementById('app-search').value.toLowerCase();
|
||
|
||
filteredApps = allApps.filter(app => {
|
||
const categoryMatch = selectedCategory === 'all' || app.category === selectedCategory;
|
||
|
||
// Check deployment type from different sources, prioritize deployment_type field
|
||
let appDeployment = 'docker';
|
||
if (app.deployment_type) {
|
||
appDeployment = app.deployment_type;
|
||
} else if (app.deployment) {
|
||
appDeployment = app.deployment;
|
||
} else if (app.Deploy && app.Deploy.Type) {
|
||
appDeployment = app.Deploy.Type;
|
||
} else if (app.deploy && app.deploy.type) {
|
||
appDeployment = app.deploy.type;
|
||
}
|
||
|
||
// Handle deployment type matching, including 'both' type
|
||
let deploymentMatch = false;
|
||
if (selectedDeployment === 'all') {
|
||
deploymentMatch = true;
|
||
} else if (appDeployment === 'both') {
|
||
// 'both' type matches both 'docker' and 'kubernetes' filters
|
||
deploymentMatch = true;
|
||
} else {
|
||
deploymentMatch = appDeployment === selectedDeployment;
|
||
}
|
||
|
||
// Search in name, description and tags
|
||
const searchMatch = app.name.toLowerCase().includes(searchTerm) ||
|
||
(app.description && app.description.toLowerCase().includes(searchTerm)) ||
|
||
(app.tags && app.tags.some && app.tags.some(tag => tag.toLowerCase().includes(searchTerm))) ||
|
||
(app.Tags && app.Tags.some && app.Tags.some(tag => tag.toLowerCase().includes(searchTerm)));
|
||
|
||
return categoryMatch && deploymentMatch && searchMatch;
|
||
});
|
||
|
||
loadApps();
|
||
}
|
||
|
||
function searchApps() {
|
||
filterApps();
|
||
}
|
||
|
||
function showAppDetails(appId) {
|
||
const app = allApps.find(a => a.id === appId || a.app_id === appId);
|
||
if (!app) return;
|
||
|
||
currentApp = app;
|
||
|
||
document.getElementById('details-app-name').textContent = app.name;
|
||
document.getElementById('details-description').textContent = app.description || 'No description available';
|
||
document.getElementById('details-version').textContent = app.version;
|
||
document.getElementById('details-author').textContent = app.author || 'Unknown';
|
||
document.getElementById('details-license').textContent = app.license || 'Unknown';
|
||
|
||
// Requirements
|
||
const requirements = document.getElementById('details-requirements');
|
||
if (app.requirements) {
|
||
requirements.innerHTML = `
|
||
<p><strong>系统要求:</strong></p>
|
||
<ul>
|
||
<li>内存: ${app.requirements.min_memory || app.requirements.minMemory || 'Unknown'}</li>
|
||
<li>CPU: ${app.requirements.min_cpu || app.requirements.minCPU || 'Unknown'}</li>
|
||
<li>存储: ${app.requirements.min_storage || app.requirements.minStorage || 'Unknown'}</li>
|
||
</ul>
|
||
`;
|
||
} else {
|
||
requirements.innerHTML = '<p>No requirements specified</p>';
|
||
}
|
||
|
||
// Tags
|
||
const tags = document.getElementById('details-tags');
|
||
if (app.tags && app.tags.length > 0) {
|
||
tags.innerHTML = app.tags.map(tag => `<span class="ui label">${tag}</span>`).join('');
|
||
} else if (app.Tags && app.Tags.length > 0) {
|
||
tags.innerHTML = app.Tags.map(tag => `<span class="ui label">${tag}</span>`).join('');
|
||
} else {
|
||
tags.innerHTML = '<p>No tags specified</p>';
|
||
}
|
||
|
||
// Repository
|
||
if (app.repository) {
|
||
document.getElementById('details-repository').href = app.repository;
|
||
document.getElementById('details-repository').style.display = 'inline-block';
|
||
} else {
|
||
document.getElementById('details-repository').style.display = 'none';
|
||
}
|
||
|
||
// 显示modal
|
||
const modal = document.getElementById('app-details-modal');
|
||
if (modal) {
|
||
modal.style.display = 'block';
|
||
}
|
||
}
|
||
|
||
function showInstallModal(appId) {
|
||
const app = allApps.find(a => a.id === appId || a.app_id === appId);
|
||
if (!app) return;
|
||
|
||
currentApp = app;
|
||
document.getElementById('install-app-name').textContent = app.name;
|
||
|
||
// Generate configuration form
|
||
const form = document.getElementById('install-form');
|
||
form.innerHTML = '';
|
||
|
||
// 兼容后端 config/schema 为 null 的情况
|
||
let configSchema = null;
|
||
let configDefaults = null;
|
||
|
||
if (app.config && app.config.schema) {
|
||
configSchema = app.config.schema;
|
||
configDefaults = app.config.default || {};
|
||
} else if (app.Config && app.Config.Schema) {
|
||
configSchema = app.Config.Schema;
|
||
configDefaults = app.Config.Default || {};
|
||
}
|
||
|
||
// 新增健壮性处理
|
||
if (!configSchema || typeof configSchema !== 'object') {
|
||
// 默认渲染一个端口输入框
|
||
form.innerHTML = `
|
||
<div class="field">
|
||
<label>port <span style="color: red;">*</span></label>
|
||
<input type="number" name="port" value="80" required>
|
||
</div>
|
||
`;
|
||
} else {
|
||
Object.entries(configSchema).forEach(([key, config]) => {
|
||
if (!config) return; // 防御
|
||
let field = document.createElement('div');
|
||
field.className = 'field';
|
||
let inputHtml = '';
|
||
const defaultValue = configDefaults[key] || config.default || '';
|
||
if (config.type === 'int') {
|
||
const min = config.min || '';
|
||
const max = config.max || '';
|
||
inputHtml = `<input type="number" name="${key}" value="${defaultValue}" ${config.required ? 'required' : ''} ${min ? 'min="' + min + '"' : ''} ${max ? 'max="' + max + '"' : ''}>`;
|
||
} else if (config.type === 'string') {
|
||
inputHtml = `<input type="text" name="${key}" value="${defaultValue}" ${config.required ? 'required' : ''}>`;
|
||
} else if (config.type === 'bool' || config.type === 'boolean') {
|
||
inputHtml = `
|
||
<div class="ui checkbox">
|
||
<input type="checkbox" name="${key}" ${defaultValue ? 'checked' : ''}>
|
||
<label></label>
|
||
</div>
|
||
`;
|
||
} else if (config.type === 'select' && config.options) {
|
||
let optionsHtml = '';
|
||
config.options.forEach(option => {
|
||
const selected = option === defaultValue ? 'selected' : '';
|
||
optionsHtml += `<option value="${option}" ${selected}>${option}</option>`;
|
||
});
|
||
inputHtml = `<select name="${key}" class="ui dropdown" ${config.required ? 'required' : ''}>${optionsHtml}</select>`;
|
||
} else {
|
||
inputHtml = `<input type="text" name="${key}" value="${defaultValue}" ${config.required ? 'required' : ''}>`;
|
||
}
|
||
field.innerHTML = `
|
||
<label>${key} ${config.required ? '<span style="color: red;">*</span>' : ''}</label>
|
||
${config.description ? `<div class="ui small text">${config.description}</div>` : ''}
|
||
${inputHtml}
|
||
`;
|
||
form.appendChild(field);
|
||
});
|
||
// 使用原生JavaScript初始化组件
|
||
setTimeout(() => {
|
||
// 初始化dropdown
|
||
const dropdowns = form.querySelectorAll('.ui.dropdown');
|
||
dropdowns.forEach(dropdown => {
|
||
// 这里可以添加dropdown的初始化逻辑
|
||
});
|
||
|
||
// 初始化checkbox
|
||
const checkboxes = form.querySelectorAll('.ui.checkbox input[type="checkbox"]');
|
||
checkboxes.forEach(checkbox => {
|
||
// 这里可以添加checkbox的初始化逻辑
|
||
});
|
||
}, 100);
|
||
}
|
||
|
||
// 显示modal
|
||
const modal = document.getElementById('install-modal');
|
||
if (modal) {
|
||
modal.style.display = 'block';
|
||
}
|
||
}
|
||
|
||
function closeInstallModal() {
|
||
// 隐藏modal
|
||
const modal = document.getElementById('install-modal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function closeDetailsModal() {
|
||
// 隐藏modal
|
||
const modal = document.getElementById('app-details-modal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function showInstallModalFromDetails() {
|
||
if (currentApp) {
|
||
closeDetailsModal();
|
||
showInstallModal(currentApp.id || currentApp.app_id);
|
||
}
|
||
}
|
||
|
||
function installApp() {
|
||
if (!currentApp) return;
|
||
|
||
// Collect form data
|
||
const form = document.getElementById('install-form');
|
||
const formData = new FormData(form);
|
||
const config = {};
|
||
|
||
for (let [key, value] of formData.entries()) {
|
||
// Handle checkbox values
|
||
const input = form.querySelector(`[name="${key}"]`);
|
||
if (input && input.type === 'checkbox') {
|
||
config[key] = input.checked;
|
||
} else if (input && input.type === 'number') {
|
||
config[key] = parseInt(value) || 0;
|
||
} else {
|
||
config[key] = value;
|
||
}
|
||
}
|
||
|
||
// Send installation request
|
||
const appId = currentApp.id || currentApp.app_id;
|
||
|
||
// 根据用户选择的部署分类设置 Deploy.Type
|
||
const currentDeploymentFilter = document.querySelector('.deployment-filter .active');
|
||
const deploymentType = currentDeploymentFilter?.getAttribute('data-deployment');
|
||
|
||
if (installTarget === 'kubeconfig') {
|
||
// 外部集群安装：设置为 kubernetes
|
||
config.deploy = { type: 'kubernetes' };
|
||
} else {
|
||
// 本地安装：根据当前选择的部署分类设置
|
||
if (deploymentType === 'docker') {
|
||
config.deploy = { type: 'docker' };
|
||
} else if (deploymentType === 'kubernetes') {
|
||
config.deploy = { type: 'kubernetes' };
|
||
} else {
|
||
// 如果选择"all"，根据应用自身类型决定
|
||
if (currentApp.deployment_type === 'both') {
|
||
// 对于支持两种部署方式的应用，默认选择 Docker
|
||
config.deploy = { type: 'docker' };
|
||
} else {
|
||
config.deploy = { type: currentApp.deployment_type || 'docker' };
|
||
}
|
||
}
|
||
}
|
||
|
||
console.log('Installing app:', appId, 'with config:', config, 'target:', installTarget);
|
||
|
||
// Create a form and submit it to the install endpoint
|
||
const installForm = document.createElement('form');
|
||
installForm.method = 'POST';
|
||
installForm.action = `/user/settings/appstore/install/${appId}`;
|
||
|
||
// Add CSRF token
|
||
const csrfInput = document.createElement('input');
|
||
csrfInput.type = 'hidden';
|
||
csrfInput.name = '_csrf';
|
||
csrfInput.value = document.querySelector('meta[name="_csrf"]')?.content || '';
|
||
installForm.appendChild(csrfInput);
|
||
|
||
// Add app ID
|
||
const appIdInput = document.createElement('input');
|
||
appIdInput.type = 'hidden';
|
||
appIdInput.name = 'app_id';
|
||
appIdInput.value = appId;
|
||
installForm.appendChild(appIdInput);
|
||
|
||
// Add config as JSON
|
||
const configInput = document.createElement('input');
|
||
configInput.type = 'hidden';
|
||
configInput.name = 'config';
|
||
configInput.value = JSON.stringify(config);
|
||
installForm.appendChild(configInput);
|
||
|
||
// Add install target
|
||
const targetInput = document.createElement('input');
|
||
targetInput.type = 'hidden';
|
||
targetInput.name = 'install_target';
|
||
targetInput.value = installTarget;
|
||
installForm.appendChild(targetInput);
|
||
|
||
if (installTarget === 'kubeconfig') {
|
||
const kcInput = document.createElement('input');
|
||
kcInput.type = 'hidden';
|
||
kcInput.name = 'kubeconfig';
|
||
kcInput.value = installKubeconfigContent;
|
||
installForm.appendChild(kcInput);
|
||
|
||
const kctxInput = document.createElement('input');
|
||
kctxInput.type = 'hidden';
|
||
kctxInput.name = 'kubeconfig_context';
|
||
kctxInput.value = installKubeconfigContext;
|
||
installForm.appendChild(kctxInput);
|
||
}
|
||
|
||
document.body.appendChild(installForm);
|
||
installForm.submit();
|
||
|
||
closeInstallModal();
|
||
}
|
||
|
||
function showAddAppModal() {
|
||
document.getElementById('add-app-json').value = '';
|
||
// 显示modal
|
||
const modal = document.getElementById('add-app-modal');
|
||
if (modal) {
|
||
modal.style.display = 'block';
|
||
}
|
||
}
|
||
function closeAddAppModal() {
|
||
// 隐藏modal
|
||
const modal = document.getElementById('add-app-modal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
}
|
||
async function submitAddApp() {
|
||
const jsonText = document.getElementById('add-app-json').value.trim();
|
||
let appData;
|
||
try {
|
||
appData = JSON.parse(jsonText);
|
||
} catch (e) {
|
||
alert('JSON格式错误');
|
||
return;
|
||
}
|
||
const resp = await fetch('/user/settings/appstore/api/add', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(appData)
|
||
});
|
||
if (resp.ok) {
|
||
closeAddAppModal();
|
||
loadAppsFromAPI(); // 刷新应用列表
|
||
alert('添加成功');
|
||
} else {
|
||
const err = await resp.json();
|
||
alert('添加失败: ' + (err.error || '未知错误'));
|
||
}
|
||
}
|
||
</script>
|
||
|
||
{{template "user/settings/layout_footer" .}} |