first

src/App.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="app-container">
+    <Sidebar />
+    <div class="main-content">
+      <router-view v-slot="{ Component }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" />
+        </transition>
+      </router-view>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Sidebar from './components/Sidebar.vue'
+</script>
+
+<style>
+:root {
+  --primary-color: #007AFF;
+  --primary-hover: #0063CC;
+  --bg-light: #FBFBFD;
+  --sidebar-bg: #F8FAFD;
+  --text-main: #1D1D1F;
+  --text-sec: #86868B;
+  --border-color: #E5E5E7;
+  --card-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
+  --btn-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
+  --radius-card: 24px;
+  --radius-btn: 12px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background-color: var(--bg-light);
+  color: var(--text-main);
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+
+.app-container {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.main-content {
+  flex: 1;
+  height: 100vh;
+  overflow-y: auto;
+  position: relative;
+}
+
+/* 页面切换动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

src/components/Sidebar.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="sidebar">
+    <div class="sidebar-header">
+      <h2>Windows 软件管理</h2>
+    </div>
+    <nav class="sidebar-nav">
+      <router-link to="/essentials" class="nav-item">
+        <span class="nav-icon">✨</span>
+        装机必备
+      </router-link>
+      <router-link to="/updates" class="nav-item">
+        <span class="nav-icon">🔄</span>
+        软件更新
+      </router-link>
+      <router-link to="/all" class="nav-item">
+        <span class="nav-icon">📦</span>
+        全部软件
+      </router-link>
+    </nav>
+  </div>
+</template>
+
+<style scoped>
+.sidebar {
+  width: 240px;
+  background-color: var(--sidebar-bg);
+  border-right: 1px solid var(--border-color);
+  padding: 40px 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header h2 {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 40px;
+  padding-left: 20px;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  border-radius: 12px;
+  color: var(--text-sec);
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.nav-item:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+  color: var(--text-main);
+}
+
+.nav-item.router-link-active {
+  background-color: var(--primary-color);
+  color: white;
+  box-shadow: var(--btn-shadow);
+}
+
+.nav-icon {
+  margin-right: 12px;
+  font-size: 18px;
+}
+</style>

src/components/SoftwareCard.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="software-card">
+    <div class="card-header">
+      <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 }">
+          {{ software.name.charAt(0).toUpperCase() }}
+        </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>
+        <span class="status-text">安装中...</span>
+      </div>
+
+      <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>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  software: {
+    id: string;
+    name: string;
+    description?: string;
+    version?: string;
+    available_version?: string;
+    icon_url?: string;
+    status: string;
+    progress: number;
+  },
+  actionLabel?: string
+}>();
+
+const placeholderColor = computed(() => {
+  const colors = ['#FF9500', '#FF3B30', '#34C759', '#007AFF', '#5856D6', '#AF52DE'];
+  let hash = 0;
+  for (let i = 0; i < props.software.id.length; i++) {
+    hash = props.software.id.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+});
+</script>
+
+<style scoped>
+.software-card {
+  background: white;
+  border-radius: var(--radius-card);
+  padding: 24px;
+  box-shadow: var(--card-shadow);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.02);
+}
+
+.software-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.icon-container {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.software-icon {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.icon-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.info .name {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--text-main);
+}
+
+.info .id {
+  font-size: 13px;
+  color: var(--text-sec);
+}
+
+.card-body {
+  flex-grow: 1;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--text-sec);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.version-info {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-sec);
+}
+
+.install-btn {
+  width: 100%;
+  padding: 10px;
+  background-color: var(--bg-light);
+  border: none;
+  border-radius: var(--radius-btn);
+  color: var(--primary-color);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.install-btn:hover {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.progress-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.progress-ring {
+  width: 24px;
+  height: 24px;
+}
+
+.progress-ring svg {
+  transform: rotate(-90deg);
+}
+
+.progress-ring .bg {
+  stroke: var(--border-color);
+}
+
+.progress-ring .fg {
+  stroke: var(--primary-color);
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+.status-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--primary-color);
+}
+
+.status-success {
+  text-align: center;
+  color: #34C759;
+  font-weight: 600;
+}
+
+.status-error {
+  text-align: center;
+  color: #FF3B30;
+  font-weight: 600;
+}
+</style>

src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      redirect: '/essentials'
+    },
+    {
+      path: '/essentials',
+      component: () => import('../views/Essentials.vue')
+    },
+    {
+      path: '/updates',
+      component: () => import('../views/Updates.vue')
+    },
+    {
+      path: '/all',
+      component: () => import('../views/AllSoftware.vue')
+    }
+  ]
+})
+
+export default router

src/store/software.ts

@@ -0,0 +1,47 @@
+import { defineStore } from 'pinia'
+import { invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
+
+export const useSoftwareStore = defineStore('software', {
+  state: () => ({
+    essentials: [] as any[],
+    updates: [] as any[],
+    allSoftware: [] as any[],
+    loading: false
+  }),
+  actions: {
+    async fetchEssentials() {
+      this.essentials = await invoke('get_essentials')
+    },
+    async fetchUpdates() {
+      this.loading = true
+      this.updates = await invoke('get_updates')
+      this.loading = false
+    },
+    async fetchAll() {
+      this.loading = true
+      this.allSoftware = await invoke('get_all_software')
+      this.loading = false
+    },
+    async install(id: string) {
+      const software = this.findSoftware(id)
+      if (software) software.status = 'pending'
+      await invoke('install_software', { id })
+    },
+    findSoftware(id: string) {
+      return this.essentials.find(s => s.id === id) || 
+             this.updates.find(s => s.id === id) || 
+             this.allSoftware.find(s => s.id === id)
+    },
+    initListener() {
+      listen('install-status', (event: any) => {
+        const { id, status, progress } = event.payload
+        const software = this.findSoftware(id)
+        if (software) {
+          software.status = status
+          software.progress = progress
+        }
+      })
+    }
+  }
+})

src/views/AllSoftware.vue

@@ -0,0 +1,127 @@
+<template>
+  <main class="content">
+    <header class="content-header">
+      <div class="header-left">
+        <h1>全部软件</h1>
+        <p class="count">共 {{ filteredSoftware.length }} 个项目</p>
+      </div>
+      <div class="search-box">
+        <input 
+          type="text" 
+          v-model="searchQuery" 
+          placeholder="搜索已安装的软件..." 
+          class="search-input"
+        />
+      </div>
+    </header>
+    
+    <div v-if="store.loading" class="loading-state">
+      <div class="spinner"></div>
+      <p>正在读取已安装软件列表...</p>
+    </div>
+
+    <div v-else class="software-grid">
+      <SoftwareCard 
+        v-for="item in filteredSoftware" 
+        :key="item.id" 
+        :software="item"
+        action-label="重新安装"
+        @install="store.install"
+      />
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import SoftwareCard from '../components/SoftwareCard.vue';
+import { useSoftwareStore } from '../store/software';
+import { onMounted, ref, computed } from 'vue';
+
+const store = useSoftwareStore();
+const searchQuery = ref('');
+
+onMounted(() => {
+  if (store.allSoftware.length === 0) {
+    store.fetchAll();
+  }
+});
+
+const filteredSoftware = computed(() => {
+  if (!searchQuery.value) return store.allSoftware;
+  const q = searchQuery.value.toLowerCase();
+  return store.allSoftware.filter(s => 
+    s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q)
+  );
+});
+</script>
+
+<style scoped>
+.content {
+  flex: 1;
+  padding: 40px 60px;
+  overflow-y: auto;
+}
+
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 40px;
+}
+
+.header-left h1 {
+  font-size: 34px;
+  font-weight: 700;
+}
+
+.header-left .count {
+  font-size: 15px;
+  color: var(--text-sec);
+  margin-top: 4px;
+}
+
+.search-input {
+  width: 300px;
+  padding: 12px 20px;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  background-color: white;
+  font-size: 15px;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.search-input:focus {
+  border-color: var(--primary-color);
+  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;
+}
+
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: var(--text-sec);
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(0, 122, 255, 0.1);
+  border-top-color: var(--primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 20px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>

src/views/Essentials.vue

@@ -0,0 +1,84 @@
+<template>
+  <main class="content">
+    <header class="content-header">
+      <h1>装机必备</h1>
+      <button @click="installAll" class="primary-btn">一键安装全部</button>
+    </header>
+    
+    <div class="software-grid">
+      <SoftwareCard 
+        v-for="item in store.essentials" 
+        :key="item.id" 
+        :software="item"
+        action-label="安装"
+        @install="store.install"
+      />
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import SoftwareCard from '../components/SoftwareCard.vue';
+import { useSoftwareStore } from '../store/software';
+import { onMounted } from 'vue';
+
+const store = useSoftwareStore();
+
+onMounted(() => {
+  store.fetchEssentials();
+  store.initListener();
+});
+
+const installAll = () => {
+  store.essentials.forEach(s => {
+    if (s.status === 'idle') {
+      store.install(s.id);
+    }
+  });
+};
+</script>
+
+<style scoped>
+.content {
+  flex: 1;
+  padding: 40px 60px;
+  overflow-y: auto;
+}
+
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 40px;
+}
+
+.content-header h1 {
+  font-size: 34px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
+
+.primary-btn {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: var(--radius-btn);
+  font-weight: 600;
+  font-size: 15px;
+  cursor: pointer;
+  box-shadow: var(--btn-shadow);
+  transition: all 0.2s ease;
+}
+
+.primary-btn:hover {
+  background-color: var(--primary-hover);
+  transform: translateY(-1px);
+}
+
+.software-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+}
+</style>

src/views/Updates.vue

@@ -0,0 +1,141 @@
+<template>
+  <main class="content">
+    <header class="content-header">
+      <h1>软件更新</h1>
+      <div class="actions">
+        <button @click="store.fetchUpdates" class="secondary-btn" :disabled="store.loading">
+          {{ store.loading ? '检查中...' : '检查更新' }}
+        </button>
+        <button @click="updateAll" class="primary-btn" :disabled="!store.updates.length">全部更新</button>
+      </div>
+    </header>
+    
+    <div v-if="store.loading" class="loading-state">
+      <div class="spinner"></div>
+      <p>正在使用 Winget 扫描可用的更新...</p>
+    </div>
+
+    <div v-else-if="store.updates.length === 0" class="empty-state">
+      <span class="empty-icon">✅</span>
+      <p>所有软件已是最新版本</p>
+    </div>
+
+    <div v-else class="software-grid">
+      <SoftwareCard 
+        v-for="item in store.updates" 
+        :key="item.id" 
+        :software="item"
+        action-label="更新"
+        @install="store.install"
+      />
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import SoftwareCard from '../components/SoftwareCard.vue';
+import { useSoftwareStore } from '../store/software';
+import { onMounted } from 'vue';
+
+const store = useSoftwareStore();
+
+onMounted(() => {
+  if (store.updates.length === 0) {
+    store.fetchUpdates();
+  }
+});
+
+const updateAll = () => {
+  store.updates.forEach(s => {
+    if (s.status === 'idle') {
+      store.install(s.id);
+    }
+  });
+};
+</script>
+
+<style scoped>
+.content {
+  flex: 1;
+  padding: 40px 60px;
+  overflow-y: auto;
+}
+
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 40px;
+}
+
+.content-header h1 {
+  font-size: 34px;
+  font-weight: 700;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}
+
+.primary-btn, .secondary-btn {
+  border: none;
+  padding: 12px 24px;
+  border-radius: var(--radius-btn);
+  font-weight: 600;
+  font-size: 15px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.primary-btn {
+  background-color: var(--primary-color);
+  color: white;
+  box-shadow: var(--btn-shadow);
+}
+
+.primary-btn:disabled {
+  background-color: var(--border-color);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.secondary-btn {
+  background-color: var(--border-color);
+  color: var(--text-main);
+}
+
+.software-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.loading-state, .empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: var(--text-sec);
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(0, 122, 255, 0.1);
+  border-top-color: var(--primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 20px;
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>

src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}