fix cards ui and data extract
This commit is contained in:
Julian Freeman
@@ -6,7 +6,7 @@ use std::os::windows::process::CommandExt;
|
||||
use tokio::sync::mpsc;
|
||||
use tauri::{AppHandle, Manager, State, Emitter};
|
||||
use serde::Serialize;
|
||||
use winget::{Software, list_all_software, list_updates};
|
||||
use winget::{Software, list_all_software, list_updates, ensure_winget_dependencies};
|
||||
|
||||
struct AppState {
|
||||
install_tx: mpsc::Sender<String>,
|
||||
@@ -79,6 +79,13 @@ pub fn run() {
|
||||
.setup(move |app| {
|
||||
let handle = app.handle().clone();
|
||||
|
||||
// 确保依赖项已安装 (这是一个耗时的过程，建议在异步任务中运行)
|
||||
tauri::async_runtime::spawn(async move {
|
||||
let _ = tokio::task::spawn_blocking(|| {
|
||||
let _ = ensure_winget_dependencies();
|
||||
}).await;
|
||||
});
|
||||
|
||||
// 在 setup 闭包中初始化，此时运行时已就绪
|
||||
let (tx, mut rx) = mpsc::channel::<String>(100);
|
||||
|
||||
|
||||
@@ -14,78 +14,102 @@ pub struct Software {
|
||||
pub progress: f32,
|
||||
}
|
||||
|
||||
#[derive(Debug, Deserialize)]
|
||||
#[serde(rename_all = "PascalCase")]
|
||||
struct WingetPackage {
|
||||
pub id: String,
|
||||
pub name: String,
|
||||
pub installed_version: Option<String>,
|
||||
pub available_versions: Option<Vec<String>>,
|
||||
}
|
||||
|
||||
pub fn ensure_winget_dependencies() -> Result<(), String> {
|
||||
// 1. 检查 winget
|
||||
let winget_check = Command::new("winget")
|
||||
.arg("--version")
|
||||
.creation_flags(0x08000000)
|
||||
.status();
|
||||
|
||||
if winget_check.is_err() || !winget_check.unwrap().success() {
|
||||
// 如果没有 winget，尝试安装 (这里简化处理，实际可能需要更复杂的脚本)
|
||||
println!("Winget not found, attempting to install...");
|
||||
let _ = Command::new("powershell")
|
||||
.args(["-Command", "Invoke-WebRequest -Uri https://github.com/microsoft/winget-cli/releases/latest/download/Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle -OutFile ./winget.msixbundle; Add-AppxPackage ./winget.msixbundle; Remove-Item ./winget.msixbundle"])
|
||||
.creation_flags(0x08000000)
|
||||
.status();
|
||||
}
|
||||
|
||||
// 2. 检查 Microsoft.WinGet.Client 模块
|
||||
let module_check = Command::new("powershell")
|
||||
.args(["-Command", "Get-Module -ListAvailable Microsoft.WinGet.Client"])
|
||||
.creation_flags(0x08000000)
|
||||
.output();
|
||||
|
||||
if let Ok(out) = module_check {
|
||||
if out.stdout.is_empty() {
|
||||
println!("Microsoft.WinGet.Client module not found, installing...");
|
||||
let install_res = Command::new("powershell")
|
||||
.args(["-Command", "Install-Module -Name Microsoft.WinGet.Client -Force -AllowClobber -Scope CurrentUser -ErrorAction SilentlyContinue"])
|
||||
.creation_flags(0x08000000)
|
||||
.status();
|
||||
|
||||
if install_res.is_err() || !install_res.unwrap().success() {
|
||||
return Err("Failed to install Microsoft.WinGet.Client module".to_string());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Ok(())
|
||||
}
|
||||
|
||||
pub fn list_all_software() -> Vec<Software> {
|
||||
// winget list
|
||||
let output = Command::new("winget")
|
||||
.args(["list", "--accept-source-agreements"])
|
||||
.creation_flags(0x08000000) // CREATE_NO_WINDOW
|
||||
// 使用 PowerShell 获取结构化 JSON
|
||||
let output = Command::new("powershell")
|
||||
.args(["-Command", "Get-WinGetPackage | Select-Object Name, Id, InstalledVersion, IsUpdateAvailable, AvailableVersions | ConvertTo-Json"])
|
||||
.creation_flags(0x08000000)
|
||||
.output();
|
||||
|
||||
match output {
|
||||
Ok(out) => parse_winget_output(String::from_utf8_lossy(&out.stdout).to_string()),
|
||||
Ok(out) => parse_json_output(String::from_utf8_lossy(&out.stdout).to_string()),
|
||||
Err(_) => vec![],
|
||||
}
|
||||
}
|
||||
|
||||
pub fn list_updates() -> Vec<Software> {
|
||||
// winget upgrade
|
||||
let output = Command::new("winget")
|
||||
.args(["upgrade", "--accept-source-agreements"])
|
||||
// 过滤出有更新的软件
|
||||
let output = Command::new("powershell")
|
||||
.args(["-Command", "Get-WinGetPackage | Where-Object { $_.IsUpdateAvailable } | Select-Object Name, Id, InstalledVersion, IsUpdateAvailable, AvailableVersions | ConvertTo-Json"])
|
||||
.creation_flags(0x08000000)
|
||||
.output();
|
||||
|
||||
match output {
|
||||
Ok(out) => parse_winget_output(String::from_utf8_lossy(&out.stdout).to_string()),
|
||||
Ok(out) => parse_json_output(String::from_utf8_lossy(&out.stdout).to_string()),
|
||||
Err(_) => vec![],
|
||||
}
|
||||
}
|
||||
|
||||
fn parse_winget_output(output: String) -> Vec<Software> {
|
||||
let mut softwares = Vec::new();
|
||||
let lines: Vec<&str> = output.lines().collect();
|
||||
|
||||
if lines.len() < 3 {
|
||||
return softwares;
|
||||
fn parse_json_output(json_str: String) -> Vec<Software> {
|
||||
if json_str.trim().is_empty() {
|
||||
return vec![];
|
||||
}
|
||||
|
||||
// 查找表头行以确定列偏移量
|
||||
// 通常格式: Name Id Version Available Source
|
||||
let header_idx = lines.iter().position(|l| l.contains("Id") && l.contains("Name")).unwrap_or(0);
|
||||
let header = lines[header_idx];
|
||||
|
||||
let id_pos = header.find("Id").unwrap_or(0);
|
||||
let version_pos = header.find("Version").unwrap_or(0);
|
||||
let available_pos = header.find("Available").unwrap_or(header.len());
|
||||
let source_pos = header.find("Source").unwrap_or(header.len());
|
||||
// 处理单个对象或数组的情况
|
||||
let packages: Vec<WingetPackage> = if json_str.trim().starts_with('[') {
|
||||
serde_json::from_str(&json_str).unwrap_or_default()
|
||||
} else {
|
||||
serde_json::from_str::<WingetPackage>(&json_str)
|
||||
.map(|p| vec![p])
|
||||
.unwrap_or_default()
|
||||
};
|
||||
|
||||
for line in &lines[header_idx + 2..] {
|
||||
if line.trim().is_empty() || line.starts_with('-') {
|
||||
continue;
|
||||
}
|
||||
|
||||
if line.len() < version_pos { continue; }
|
||||
|
||||
let name = line[..id_pos].trim().to_string();
|
||||
let id = line[id_pos..version_pos].trim().to_string();
|
||||
let version = line[version_pos..available_pos.min(line.len())].trim().to_string();
|
||||
|
||||
let available_version = if available_pos < line.len() {
|
||||
Some(line[available_pos..source_pos.min(line.len())].trim().to_string())
|
||||
} else {
|
||||
None
|
||||
};
|
||||
|
||||
softwares.push(Software {
|
||||
id,
|
||||
name,
|
||||
description: None,
|
||||
version: Some(version),
|
||||
available_version,
|
||||
icon_url: None,
|
||||
status: "idle".to_string(),
|
||||
progress: 0.0,
|
||||
});
|
||||
}
|
||||
|
||||
softwares
|
||||
packages.into_iter().map(|p| Software {
|
||||
id: p.id,
|
||||
name: p.name,
|
||||
description: None,
|
||||
version: p.installed_version,
|
||||
available_version: p.available_versions.and_then(|v| v.first().cloned()),
|
||||
icon_url: None,
|
||||
status: "idle".to_string(),
|
||||
progress: 0.0,
|
||||
}).collect()
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="software-card">
|
||||
<div class="card-header">
|
||||
<div class="card-left">
|
||||
<div class="icon-container">
|
||||
<img v-if="software.icon_url" :src="software.icon_url" :alt="software.name" class="software-icon" />
|
||||
<div v-else class="icon-placeholder" :style="{ backgroundColor: placeholderColor }">
|
||||
@@ -8,46 +8,49 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<h3 class="name">{{ software.name }}</h3>
|
||||
<p class="id">{{ software.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="description" v-if="software.description">{{ software.description }}</p>
|
||||
<div class="version-info">
|
||||
<span class="version">当前: {{ software.version || '--' }}</span>
|
||||
<span class="available" v-if="software.available_version">可用: {{ software.available_version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions">
|
||||
<button
|
||||
v-if="software.status === 'idle'"
|
||||
@click="$emit('install', software.id)"
|
||||
class="install-btn"
|
||||
>
|
||||
{{ actionLabel }}
|
||||
</button>
|
||||
|
||||
<div v-else-if="software.status === 'installing' || software.status === 'pending'" class="progress-container">
|
||||
<div class="progress-ring">
|
||||
<svg viewBox="0 0 32 32">
|
||||
<circle class="bg" cx="16" cy="16" r="14" fill="none" stroke-width="4" />
|
||||
<circle class="fg" cx="16" cy="16" r="14" fill="none" stroke-width="4"
|
||||
:style="{ strokeDasharray: 88, strokeDashoffset: 88 - (88 * (software.progress || 0.5)) }"
|
||||
/>
|
||||
</svg>
|
||||
<div class="title-row">
|
||||
<h3 class="name">{{ software.name }}</h3>
|
||||
<span class="id-badge">{{ software.id }}</span>
|
||||
</div>
|
||||
<p class="description" v-if="software.description">{{ software.description }}</p>
|
||||
<div class="version-info">
|
||||
<span class="version-tag">当前: {{ software.version || '--' }}</span>
|
||||
<span class="version-tag available" v-if="software.available_version">
|
||||
最新: {{ software.available_version }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="status-text">安装中...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="software.status === 'success'" class="status-success">
|
||||
<span class="check-icon">✓</span> 已完成
|
||||
</div>
|
||||
<div class="card-right" v-if="actionLabel || software.status !== 'idle'">
|
||||
<div class="action-wrapper">
|
||||
<button
|
||||
v-if="software.status === 'idle'"
|
||||
@click="$emit('install', software.id)"
|
||||
class="install-btn"
|
||||
>
|
||||
{{ actionLabel }}
|
||||
</button>
|
||||
|
||||
<div v-else-if="software.status === 'installing' || software.status === 'pending'" class="progress-status">
|
||||
<div class="progress-ring">
|
||||
<svg viewBox="0 0 32 32">
|
||||
<circle class="bg" cx="16" cy="16" r="14" fill="none" stroke-width="4" />
|
||||
<circle class="fg" cx="16" cy="16" r="14" fill="none" stroke-width="4"
|
||||
:style="{ strokeDasharray: 88, strokeDashoffset: 88 - (88 * (software.progress || 0.5)) }"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="status-text">{{ software.status === 'pending' ? '等待中...' : '安装中...' }}</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="software.status === 'error'" class="status-error">
|
||||
❌ 失败
|
||||
<div v-else-if="software.status === 'success'" class="status-success">
|
||||
<span class="check-icon">✓</span> 已完成
|
||||
</div>
|
||||
|
||||
<div v-else-if="software.status === 'error'" class="status-error">
|
||||
❌ 失败
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,33 +86,36 @@ const placeholderColor = computed(() => {
|
||||
<style scoped>
|
||||
.software-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-card);
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
padding: 16px 24px;
|
||||
box-shadow: var(--card-shadow);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid rgba(0, 0, 0, 0.02);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.software-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
||||
transform: scale(1.01);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 14px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.software-icon {
|
||||
@@ -125,51 +131,81 @@ const placeholderColor = computed(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.info .name {
|
||||
font-size: 17px;
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.info .id {
|
||||
font-size: 13px;
|
||||
.id-badge {
|
||||
font-size: 11px;
|
||||
color: var(--text-sec);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex-grow: 1;
|
||||
background: var(--bg-light);
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
color: var(--text-sec);
|
||||
line-height: 1.5;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-size: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
font-size: 11px;
|
||||
color: var(--text-sec);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.version-tag.available {
|
||||
color: var(--primary-color);
|
||||
background: rgba(0, 122, 255, 0.08);
|
||||
padding: 0 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card-right {
|
||||
margin-left: 20px;
|
||||
min-width: 120px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.install-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
padding: 8px 24px;
|
||||
background-color: var(--bg-light);
|
||||
border: none;
|
||||
border-radius: var(--radius-btn);
|
||||
border-radius: 20px;
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
@@ -179,16 +215,15 @@ const placeholderColor = computed(() => {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
.progress-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.progress-ring svg {
|
||||
@@ -201,24 +236,25 @@ const placeholderColor = computed(() => {
|
||||
|
||||
.progress-ring .fg {
|
||||
stroke: var(--primary-color);
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 0.3s ease;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.status-success {
|
||||
text-align: center;
|
||||
color: #34C759;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
text-align: center;
|
||||
color: #FF3B30;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,13 +20,11 @@
|
||||
<p>正在读取已安装软件列表...</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="software-grid">
|
||||
<div v-else class="software-list">
|
||||
<SoftwareCard
|
||||
v-for="item in filteredSoftware"
|
||||
:key="item.id"
|
||||
:software="item"
|
||||
action-label="重新安装"
|
||||
@install="store.install"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
@@ -66,27 +64,27 @@ const filteredSoftware = computed(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header-left h1 {
|
||||
font-size: 34px;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header-left .count {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
color: var(--text-sec);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 300px;
|
||||
padding: 12px 20px;
|
||||
width: 280px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: white;
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
@@ -96,10 +94,9 @@ const filteredSoftware = computed(() => {
|
||||
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.software-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
.software-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
@@ -112,13 +109,13 @@ const filteredSoftware = computed(() => {
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid rgba(0, 122, 255, 0.1);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid rgba(0, 122, 255, 0.1);
|
||||
border-top-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<button @click="installAll" class="primary-btn">一键安装全部</button>
|
||||
</header>
|
||||
|
||||
<div class="software-grid">
|
||||
<div class="software-list">
|
||||
<SoftwareCard
|
||||
v-for="item in store.essentials"
|
||||
:key="item.id"
|
||||
@@ -49,11 +49,11 @@ const installAll = () => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.content-header h1 {
|
||||
font-size: 34px;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
@@ -62,10 +62,10 @@ const installAll = () => {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: var(--radius-btn);
|
||||
padding: 10px 20px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--btn-shadow);
|
||||
transition: all 0.2s ease;
|
||||
@@ -76,9 +76,8 @@ const installAll = () => {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.software-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
.software-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<p>所有软件已是最新版本</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="software-grid">
|
||||
<div v-else class="software-list">
|
||||
<SoftwareCard
|
||||
v-for="item in store.updates"
|
||||
:key="item.id"
|
||||
@@ -65,11 +65,11 @@ const updateAll = () => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.content-header h1 {
|
||||
font-size: 34px;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -80,10 +80,10 @@ const updateAll = () => {
|
||||
|
||||
.primary-btn, .secondary-btn {
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: var(--radius-btn);
|
||||
padding: 10px 20px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
@@ -105,10 +105,9 @@ const updateAll = () => {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.software-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
.software-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loading-state, .empty-state {
|
||||
@@ -121,18 +120,18 @@ const updateAll = () => {
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid rgba(0, 122, 255, 0.1);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid rgba(0, 122, 255, 0.1);
|
||||
border-top-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 40px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
||||
Reference in New Issue
Block a user