gridsum-vue3-pc 1.0.0

package/template/base/src/views/Admin.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="admin-container">
+    <div class="stats-grid">
+      <el-card v-for="item in statCards" :key="item.key" shadow="hover" class="stat-card">
+        <div class="stat-content">
+          <div class="stat-info">
+            <div class="stat-label">{{ item.label }}</div>
+            <div class="stat-value">{{ item.value }}</div>
+          </div>
+          <div class="stat-icon" :style="{ background: item.color }">
+            <el-icon :size="24"><component :is="item.icon" /></el-icon>
+          </div>
+        </div>
+      </el-card>
+    </div>
+
+    <div class="admin-grid">
+      <el-card shadow="never" class="section-card">
+        <template #header>
+          <div class="card-header">
+            <span>{{ $t('admin.distributionTitle') }}</span>
+          </div>
+        </template>
+        <div class="pie-chart">
+          <svg viewBox="0 0 200 200" class="pie-svg">
+            <circle cx="100" cy="100" r="80" fill="none" stroke="#e8e8e8" stroke-width="40" />
+            <circle
+              cx="100" cy="100" r="80"
+              fill="none"
+              stroke="#409eff"
+              stroke-width="40"
+              :stroke-dasharray="`${adminPct * 251.2} ${251.2 - adminPct * 251.2}`"
+              stroke-dashoffset="62.8"
+              transform="rotate(-90 100 100)"
+            />
+            <circle
+              cx="100" cy="100" r="80"
+              fill="none"
+              stroke="#67c23a"
+              stroke-width="40"
+              :stroke-dasharray="`${userPct * 251.2} ${251.2 - userPct * 251.2}`"
+              :stroke-dashoffset="62.8 + (adminPct * -251.2)"
+              transform="rotate(-90 100 100)"
+            />
+            <circle
+              cx="100" cy="100" r="80"
+              fill="none"
+              stroke="#e6a23c"
+              stroke-width="40"
+              :stroke-dasharray="`${guestPct * 251.2} ${251.2 - guestPct * 251.2}`"
+              :stroke-dashoffset="62.8 + ((adminPct + userPct) * -251.2)"
+              transform="rotate(-90 100 100)"
+            />
+          </svg>
+          <div class="pie-legend">
+            <div class="legend-item">
+              <span class="dot" style="background: #409eff" />
+              <span>{{ $t('user.roleAdmin') }} ({{ adminPct }}%)</span>
+            </div>
+            <div class="legend-item">
+              <span class="dot" style="background: #67c23a" />
+              <span>{{ $t('user.roleUser') }} ({{ userPct }}%)</span>
+            </div>
+            <div class="legend-item">
+              <span class="dot" style="background: #e6a23c" />
+              <span>{{ $t('user.roleGuest') }} ({{ guestPct }}%)</span>
+            </div>
+          </div>
+        </div>
+      </el-card>
+
+      <el-card shadow="never" class="section-card">
+        <template #header>
+          <div class="card-header">
+            <span>{{ $t('admin.recentActivity') }}</span>
+          </div>
+        </template>
+        <div class="activity-list">
+          <div v-for="(log, i) in activityLogs" :key="i" class="activity-item">
+            <div class="activity-dot" :style="{ background: log.color }" />
+            <div class="activity-content">
+              <span class="activity-text">{{ log.text }}</span>
+              <span class="activity-time">{{ log.time }}</span>
+            </div>
+          </div>
+          <el-empty v-if="activityLogs.length === 0" :description="$t('common.noData')" />
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { User, Key, Setting, Monitor } from '@element-plus/icons-vue';
+
+const { t } = useI18n();
+
+const statCards = computed(() => [
+  { key: 'users', label: t('admin.userTotal'), value: 128, icon: User, color: 'linear-gradient(135deg, #667eea, #764ba2)' },
+  { key: 'roles', label: t('admin.roleTotal'), value: 5, icon: Key, color: 'linear-gradient(135deg, #f093fb, #f5576c)' },
+  { key: 'perms', label: t('admin.permTotal'), value: 8, icon: Setting, color: 'linear-gradient(135deg, #4facfe, #00f2fe)' },
+  { key: 'sessions', label: t('admin.activeSessions'), value: 36, icon: Monitor, color: 'linear-gradient(135deg, #43e97b, #38f9d7)' },
+]);
+
+const adminPct = 20;
+const userPct = 60;
+const guestPct = 20;
+
+const activityLogs = computed(() => [
+  { text: t('admin.logLogin', { user: 'admin' }), time: '10:32:15', color: '#409eff' },
+  { text: t('admin.logCreateUser', { user: 'admin', target: 'zhangsan' }), time: '10:15:00', color: '#67c23a' },
+  { text: t('admin.logUpdateRole', { user: 'admin', target: 'user' }), time: '09:50:30', color: '#e6a23c' },
+  { text: t('admin.logDeleteUser', { user: 'admin', target: 'wangwu' }), time: '09:20:00', color: '#f56c6c' },
+  { text: t('admin.logLogin', { user: 'zhangsan' }), time: '09:00:00', color: '#409eff' },
+]);
+</script>
+
+<style scoped>
+.admin-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+}
+
+.stat-card {
+  border-radius: 12px;
+  border: 1px solid #ebeef5;
+  transition: transform 0.25s ease, box-shadow 0.3s ease;
+  cursor: default;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
+}
+
+.stat-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.stat-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: #909399;
+  font-weight: 500;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1a1a2e;
+  line-height: 1.2;
+}
+
+.stat-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.admin-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  flex: 1;
+}
+
+@media (max-width: 800px) {
+  .admin-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pie-chart {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  padding: 8px 0;
+}
+
+.pie-svg {
+  width: 140px;
+  height: 140px;
+}
+
+.pie-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  color: #606266;
+  transition: transform 0.2s ease;
+}
+
+.legend-item:hover {
+  transform: translateX(4px);
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.activity-item {
+  display: flex;
+  gap: 12px;
+  padding: 14px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background 0.2s ease;
+  border-radius: 8px;
+  margin: 0 -12px;
+}
+
+.activity-item:last-child {
+  border-bottom: none;
+}
+
+.activity-item:hover {
+  background: rgba(64, 158, 255, 0.04);
+}
+
+.activity-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-top: 6px;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
+}
+
+.activity-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.activity-text {
+  font-size: 14px;
+  color: #303133;
+}
+
+.activity-time {
+  font-size: 12px;
+  color: #909399;
+}
+
+html.dark .stat-card,
+html.dark .section-card {
+  background: #161b22;
+  border-color: #21262d;
+}
+
+html.dark .stat-value {
+  color: #c9d1d9;
+}
+
+html.dark .activity-item {
+  border-bottom-color: #21262d;
+}
+
+html.dark .activity-item:hover {
+  background: rgba(88, 166, 255, 0.06);
+}
+
+html.dark .activity-text {
+  color: #c9d1d9;
+}
+
+html.dark .activity-time {
+  color: #8b949e;
+}
+
+html.dark .legend-item {
+  color: #8b949e;
+}
+
+html.dark .activity-dot {
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
+}
+</style>

package/template/base/src/views/Home.vue

@@ -0,0 +1,382 @@
+<template>
+  <div class="dashboard">
+    <div class="welcome-banner">
+      <div class="welcome-text">
+        <h1>{{ $t('home.greeting', { name: userInfo?.displayName || userInfo?.username || $t('user.notLoggedIn') }) }}</h1>
+        <p>{{ $t('home.welcome') }}</p>
+      </div>
+      <div class="welcome-time">
+        <span class="time">{{ currentTime }}</span>
+        <span class="date">{{ currentDate }}</span>
+      </div>
+    </div>
+
+    <div class="stats-grid">
+      <el-card v-for="stat in stats" :key="stat.key" shadow="hover" class="stat-card">
+        <div class="stat-content">
+          <div class="stat-info">
+            <div class="stat-label">{{ stat.label }}</div>
+            <div class="stat-value">{{ stat.value }}</div>
+            <div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'">
+              {{ stat.trend > 0 ? '+' : '' }}{{ stat.trend }}%
+              <el-icon><Top v-if="stat.trend > 0" /><Bottom v-else /></el-icon>
+            </div>
+          </div>
+          <div class="stat-icon" :style="{ background: stat.color }">
+            <el-icon :size="28"><component :is="stat.icon" /></el-icon>
+          </div>
+        </div>
+      </el-card>
+    </div>
+
+    <div class="dashboard-grid">
+      <el-card shadow="never" class="chart-card">
+        <template #header>
+          <span>{{ $t('home.trendTitle') }}</span>
+        </template>
+        <div class="chart-placeholder">
+          <svg viewBox="0 0 400 160" class="trend-svg">
+            <polyline
+              :points="trendPoints"
+              fill="none"
+              stroke="#409eff"
+              stroke-width="2"
+            />
+            <path :d="trendArea" fill="rgba(64,158,255,0.1)" />
+          </svg>
+        </div>
+      </el-card>
+
+      <el-card shadow="never" class="quick-actions-card">
+        <template #header>
+          <span>{{ $t('home.quickActions') }}</span>
+        </template>
+        <div class="quick-actions">
+          <el-button
+            v-for="action in quickActions"
+            :key="action.key"
+            :type="action.type || 'default'"
+            class="action-btn"
+            @click="action.handler"
+          >
+            <el-icon><component :is="action.icon" /></el-icon>
+            <span>{{ action.label }}</span>
+          </el-button>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useUserStore } from '@/store/modules/user';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { User, Setting, Key, Top, Bottom, Plus, Refresh } from '@element-plus/icons-vue';
+
+const { t, locale } = useI18n();
+const router = useRouter();
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+
+const currentTime = ref('');
+const currentDate = ref('');
+let timer: ReturnType<typeof setInterval>;
+
+function updateTime() {
+  const lang = locale.value === 'en' ? 'en' : 'zh-CN';
+  currentTime.value = new Date().toLocaleTimeString(lang, { hour12: false });
+  currentDate.value = new Date().toLocaleDateString(lang, {
+    year: 'numeric', month: 'long', day: 'numeric', weekday: 'long',
+  });
+}
+
+onMounted(() => {
+  updateTime();
+  timer = setInterval(updateTime, 1000);
+});
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer);
+});
+
+const stats = computed(() => [
+  { key: 'users', label: t('admin.userTotal'), value: 128, trend: 12, icon: User, color: 'linear-gradient(135deg, #667eea, #764ba2)' },
+  { key: 'roles', label: t('admin.roleTotal'), value: 5, trend: 0, icon: Key, color: 'linear-gradient(135deg, #f093fb, #f5576c)' },
+  { key: 'perms', label: t('admin.permTotal'), value: 8, trend: 0, icon: Setting, color: 'linear-gradient(135deg, #4facfe, #00f2fe)' },
+  { key: 'active', label: t('home.activeToday'), value: 36, trend: -5, icon: Refresh, color: 'linear-gradient(135deg, #43e97b, #38f9d7)' },
+]);
+
+const trendData = [20, 45, 30, 60, 50, 75, 65, 90, 80, 95, 85, 100];
+const trendW = 400;
+const trendH = 150;
+const trendStep = trendW / (trendData.length - 1);
+const trendPoints = computed(() =>
+  trendData.map((v, i) => `${i * trendStep},${trendH - (v / 100) * trendH}`).join(' ')
+);
+const trendArea = computed(() => {
+  const pts = trendData.map((v, i) => `${i * trendStep},${trendH - (v / 100) * trendH}`);
+  return `M${pts.join(' L')} L${trendW},${trendH} L0,${trendH} Z`;
+});
+
+const quickActions = computed(() => [
+  { key: 'addUser', label: t('user.addUser'), icon: Plus, type: 'primary' as const, handler: () => router.push('/user') },
+  { key: 'manageRole', label: t('role.addRole'), icon: Key, type: 'success' as const, handler: () => router.push('/role') },
+  { key: 'sysAdmin', label: t('menu.admin'), icon: Setting, type: 'warning' as const, handler: () => router.push('/admin') },
+]);
+</script>
+
+<style scoped>
+.dashboard {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.welcome-banner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 24px 32px;
+  color: #fff;
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+}
+
+.welcome-banner::before {
+  content: '';
+  position: absolute;
+  top: -60%;
+  right: -5%;
+  width: 400px;
+  height: 400px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.welcome-banner::after {
+  content: '';
+  position: absolute;
+  bottom: -30%;
+  right: 15%;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.welcome-text {
+  position: relative;
+  z-index: 1;
+}
+
+.welcome-text h1 {
+  margin: 0 0 4px;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.welcome-text p {
+  margin: 0;
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.welcome-time {
+  text-align: right;
+  position: relative;
+  z-index: 1;
+}
+
+.welcome-time .time {
+  display: block;
+  font-size: 26px;
+  font-weight: 300;
+  letter-spacing: 1px;
+}
+
+.welcome-time .date {
+  display: block;
+  font-size: 13px;
+  opacity: 0.75;
+  margin-top: 4px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+}
+
+.stat-card {
+  border-radius: 12px;
+  border: 1px solid #ebeef5;
+  transition: transform 0.25s ease, box-shadow 0.3s ease;
+  cursor: default;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
+}
+
+.stat-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #909399;
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+
+.stat-value {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1a1a2e;
+  line-height: 1.2;
+  margin-bottom: 6px;
+}
+
+.stat-trend {
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+}
+
+.stat-trend.up {
+  color: #52c41a;
+}
+
+.stat-trend.down {
+  color: #ff4d4f;
+}
+
+.stat-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 16px;
+  flex: 1;
+}
+
+.chart-card {
+  border-radius: 12px;
+  border: 1px solid #ebeef5;
+}
+
+.quick-actions-card {
+  border-radius: 12px;
+  border: 1px solid #ebeef5;
+}
+
+.chart-placeholder {
+  height: 200px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.trend-svg {
+  width: 100%;
+  height: 180px;
+}
+
+.quick-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.quick-actions :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
+
+.action-btn {
+  justify-content: flex-start;
+  padding: 14px 16px;
+  height: auto;
+  gap: 10px;
+  font-size: 14px;
+  border-radius: 10px;
+  border: 1px solid #ebeef5;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
+}
+
+.action-btn:hover {
+  transform: translateX(4px);
+  border-color: #409eff;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
+}
+
+@media (max-width: 900px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .welcome-banner {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  .welcome-time {
+    text-align: left;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .welcome-text h1 {
+    font-size: 18px;
+  }
+
+  .welcome-time .time {
+    font-size: 20px;
+  }
+}
+
+html.dark .stat-value {
+  color: #c9d1d9;
+}
+
+html.dark .stat-label {
+  color: #8b949e;
+}
+
+html.dark .action-btn {
+  border-color: #30363d;
+}
+
+html.dark .action-btn:hover {
+  border-color: #58a6ff;
+  box-shadow: 0 4px 12px rgba(88, 166, 255, 0.15);
+}
+</style>