xto-fronted 0.6.3 → 0.8.0

package/src/views/login/index.vue

@@ -142,8 +142,6 @@ const handleLogin = async () => {
       <!-- 背景装饰 -->
       <div class="brand-bg">
         <div class="bg-grid"></div>
-        <div class="bg-glow"></div>
-        <div class="bg-pattern"></div>
       </div>
     </div>
 
@@ -252,17 +250,17 @@ const handleLogin = async () => {
   width: 100%;
   min-height: 100vh;
   display: flex;
-  background: var(--xto-bg-color-page, #F5F7FA);
+  background: var(--xto-bg-color-page, #F7F8FA);
 }
 
-// 左侧品牌区域（淡紫蓝渐变网格背景，纯 CSS 无图片资源）
+// 左侧品牌区域（企业级纯色品牌底 + 细网格纹理）
 .login-brand {
   flex: 1;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #172E6E 0%, #1E3A8A 45%, #1D4ED8 100%);
+  background: var(--xto-color-primary-dark-1, #4338CA);
   overflow: hidden;
 
   @media (max-width: 992px) {
@@ -323,14 +321,12 @@ const handleLogin = async () => {
       align-items: flex-start;
       gap: 16px;
       padding: 16px;
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: var(--xto-border-radius-large, 8px);
-      backdrop-filter: blur(10px);
-      transition: all 0.3s ease;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: var(--xto-border-radius-large, 12px);
+      transition: background-color 0.2s ease;
 
       &:hover {
-        background: rgba(255, 255, 255, 0.15);
-        transform: translateX(8px);
+        background: rgba(255, 255, 255, 0.14);
       }
     }
 
@@ -408,33 +404,9 @@ const handleLogin = async () => {
         linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
       background-size: 28px 28px, 56px 56px, 56px 56px;
     }
-
-    .bg-glow {
-      position: absolute;
-      top: -20%;
-      right: -10%;
-      width: 60%;
-      height: 60%;
-      background: radial-gradient(circle, rgba(147, 197, 253, 0.35) 0%, transparent 70%);
-      animation: glow-pulse 8s ease-in-out infinite;
-    }
-
-    .bg-pattern {
-      position: absolute;
-      bottom: -10%;
-      left: -10%;
-      width: 40%;
-      height: 40%;
-      background: radial-gradient(circle, rgba(196, 181, 253, 0.28) 0%, transparent 60%);
-    }
   }
 }
 
-@keyframes glow-pulse {
-  0%, 100% { opacity: 0.6; transform: scale(1); }
-  50% { opacity: 1; transform: scale(1.1); }
-}
-
 // 右侧登录区域
 .login-form-section {
   width: 500px;
@@ -462,13 +434,13 @@ const handleLogin = async () => {
     h2 {
       font-size: 28px;
       font-weight: 600;
-      color: var(--xto-color-text-primary, #0F172A);
+      color: var(--xto-color-text-primary, #1F2329);
       margin-bottom: 8px;
     }
 
     p {
       font-size: 14px;
-      color: var(--xto-color-text-secondary, #64748B);
+      color: var(--xto-color-text-secondary, #86909C);
     }
   }
 
@@ -481,7 +453,7 @@ const handleLogin = async () => {
       display: block;
       font-size: 14px;
       font-weight: 500;
-      color: var(--xto-color-text-regular, #334155);
+      color: var(--xto-color-text-regular, #4E5566);
       margin-bottom: 8px;
     }
 
@@ -495,7 +467,7 @@ const handleLogin = async () => {
 
     :deep(.x-input__prefix) {
       margin-right: 12px;
-      color: var(--xto-color-text-placeholder, #94A3B8);
+      color: var(--xto-color-text-placeholder, #A9AEB8);
     }
   }
 
@@ -507,12 +479,12 @@ const handleLogin = async () => {
 
     .forgot-link {
       font-size: 14px;
-      color: var(--xto-color-primary, #1D4ED8);
+      color: var(--xto-color-primary, #4F46E5);
       text-decoration: none;
       transition: color 0.2s;
 
       &:hover {
-        color: var(--xto-color-primary-dark-1, #1E40AF);
+        color: var(--xto-color-primary-dark-1, #4338CA);
       }
     }
   }
@@ -527,24 +499,19 @@ const handleLogin = async () => {
     transition: all 0.3s ease;
 
     &:hover:not(:disabled) {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
-    }
-
-    &:active:not(:disabled) {
-      transform: translateY(0);
+      background-color: var(--xto-color-primary-light-1, #6158E7);
     }
   }
 
   .form-footer {
     margin-top: 32px;
     padding-top: 24px;
-    border-top: 1px solid var(--xto-border-color-lighter, #EDF2F7);
+    border-top: 1px solid var(--xto-border-color-lighter, #EDEEF1);
     text-align: center;
 
     p {
       font-size: 13px;
-      color: var(--xto-color-text-placeholder, #94A3B8);
+      color: var(--xto-color-text-placeholder, #A9AEB8);
       margin-bottom: 16px;
     }
 
@@ -560,12 +527,12 @@ const handleLogin = async () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--xto-fill-color, #F1F5F9);
+      background: var(--xto-fill-color, #F2F3F5);
       border: none;
       border-radius: 50%;
       cursor: pointer;
       transition: all 0.2s ease;
-      color: var(--xto-color-text-secondary, #64748B);
+      color: var(--xto-color-text-secondary, #86909C);
 
       svg {
         width: 20px;
@@ -573,8 +540,8 @@ const handleLogin = async () => {
       }
 
       &:hover {
-        background: var(--xto-color-primary-light-8, #DBEAFE);
-        color: var(--xto-color-primary, #1D4ED8);
+        background: var(--xto-color-primary-light-8, #DCDAFC);
+        color: var(--xto-color-primary, #4F46E5);
         transform: translateY(-2px);
       }
     }
@@ -586,7 +553,7 @@ const handleLogin = async () => {
 
     p {
       font-size: 12px;
-      color: var(--xto-color-text-placeholder, #94A3B8);
+      color: var(--xto-color-text-placeholder, #A9AEB8);
     }
   }
 }

package/src/views/system/menu/index.vue

@@ -191,14 +191,14 @@ const handleSubmit = async () => {
 // 菜单图标
 const getMenuIcon = (icon?: string) => {
   const iconMap: Record<string, string> = {
-    dashboard: '📊',
-    system: '⚙️',
-    user: '👤',
-    role: '👥',
-    menu: '📋',
-    setting: '🔧'
+    dashboard: 'M4 5h16v11H4zM9 20h6M12 16v4',
+    system: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm7.4-3c0-.4 0-.8-.1-1.2l2-1.6-2-3.4-2.4 1a7.6 7.6 0 0 0-2-1.2L14.5 3h-5l-.4 2.6a7.6 7.6 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6a7.4 7.4 0 0 0 0 2.4l-2 1.6 2 3.4 2.4-1a7.6 7.6 0 0 0 2 1.2l.4 2.6h5l.4-2.6a7.6 7.6 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.1-.4.1-.8.1-1.2Z',
+    user: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0',
+    role: 'M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM2 19a6 6 0 0 1 12 0m2-6a6 6 0 0 1 6 6',
+    menu: 'M4 6h16M4 12h16M4 18h10',
+    setting: 'M4 6h16M4 12h16M4 18h16'
   }
-  return iconMap[icon || ''] || '📄'
+  return iconMap[icon || ''] || 'M4 6h16M4 12h16M4 18h10'
 }
 
 // 获取类型标签类型
@@ -275,9 +275,9 @@ onMounted(() => {
                   <svg viewBox="0 0 64 41" fill="none">
                     <g transform="translate(0 1)">
                       <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
-                      <g stroke="var(--xto-color-text-placeholder, #9CA3AF)" stroke-width="2">
+                      <g stroke="var(--xto-color-text-placeholder, #A9AEB8)" stroke-width="2">
                         <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
-                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F3F4F6)"/>
+                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F2F3F5)"/>
                       </g>
                     </g>
                   </svg>
@@ -289,12 +289,12 @@ onMounted(() => {
               <tr class="data-row tree-row--level-0">
                 <td class="col-name">
                   <div class="menu-info">
-                    <span class="menu-icon-wrapper">{{ getMenuIcon(menu.icon) }}</span>
+                    <span class="menu-icon-wrapper"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path :d="getMenuIcon(menu.icon)" /></svg></span>
                     <span class="menu-title" @click="handleEdit(menu)">{{ menu.title }}</span>
                   </div>
                 </td>
                 <td class="col-icon">
-                  <span class="icon-text">{{ getMenuIcon(menu.icon) }}</span>
+                  <span class="icon-text"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path :d="getMenuIcon(menu.icon)" /></svg></span>
                 </td>
                 <td class="col-path">
                   <code class="path-code">{{ menu.path }}</code>
@@ -341,12 +341,12 @@ onMounted(() => {
                     <div class="menu-info">
                       <span class="tree-indent"></span>
                       <span class="tree-line"></span>
-                      <span class="menu-icon-wrapper">{{ getMenuIcon(child.icon) }}</span>
+                      <span class="menu-icon-wrapper"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path :d="getMenuIcon(child.icon)" /></svg></span>
                       <span class="menu-title" @click="handleEdit(child)">{{ child.title }}</span>
                     </div>
                   </td>
                   <td class="col-icon">
-                    <span class="icon-text">{{ getMenuIcon(child.icon) }}</span>
+                    <span class="icon-text"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path :d="getMenuIcon(child.icon)" /></svg></span>
                   </td>
                   <td class="col-path">
                     <code class="path-code">{{ child.path }}</code>
@@ -446,7 +446,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .menu-page {
   padding: 24px;
-  background: var(--xto-bg-color-page, #F9FAFB);
+  background: var(--xto-bg-color-page, #F7F8FA);
   min-height: 100%;
 }
 
@@ -463,7 +463,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 16px 24px;
-  border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+  border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
 
   .toolbar-left {
     display: flex;
@@ -472,7 +472,7 @@ onMounted(() => {
 
   .table-count {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 }
 
@@ -488,14 +488,14 @@ onMounted(() => {
   th, td {
     padding: 14px 16px;
     text-align: left;
-    border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
   }
 
   th {
     font-size: 14px;
     font-weight: 500;
-    color: var(--xto-color-text-secondary, #6B7280);
-    background: var(--xto-fill-color-light, #F9FAFB);
+    color: var(--xto-color-text-secondary, #86909C);
+    background: var(--xto-fill-color-light, #F7F8FA);
     white-space: nowrap;
   }
 
@@ -503,7 +503,7 @@ onMounted(() => {
     transition: background-color 0.2s;
 
     &:hover {
-      background: var(--xto-color-primary-light-6, #C7D2FE);
+      background: var(--xto-color-primary-light-6, #CAC7F9);
     }
   }
 
@@ -522,7 +522,7 @@ onMounted(() => {
     flex-direction: column;
     align-items: center;
     gap: 16px;
-    color: var(--xto-color-text-placeholder, #9CA3AF);
+    color: var(--xto-color-text-placeholder, #A9AEB8);
 
     svg {
       width: 64px;
@@ -533,7 +533,7 @@ onMounted(() => {
   .loading-spinner {
     width: 32px;
     height: 32px;
-    border: 3px solid var(--xto-border-color-lighter, #F3F4F6);
+    border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
     border-top-color: var(--xto-color-primary, #4F46E5);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
@@ -561,7 +561,7 @@ onMounted(() => {
   display: inline-block;
   width: 16px;
   height: 1px;
-  background: var(--xto-border-color-light, #E5E7EB);
+  background: var(--xto-border-color-light, #E5E6EB);
   margin-right: 8px;
   vertical-align: middle;
 }
@@ -583,7 +583,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--xto-fill-color-light, #F9FAFB);
+  background: var(--xto-fill-color-light, #F7F8FA);
   border-radius: var(--xto-border-radius-base, 6px);
   font-size: 14px;
 }
@@ -591,7 +591,7 @@ onMounted(() => {
 .menu-title {
   font-size: 14px;
   font-weight: 500;
-  color: var(--xto-color-text-primary, #1F2937);
+  color: var(--xto-color-text-primary, #1F2329);
   cursor: pointer;
   transition: color 0.2s;
 
@@ -616,9 +616,9 @@ onMounted(() => {
   font-family: 'SF Mono', Monaco, Consolas, monospace;
   font-size: 12px;
   padding: 4px 8px;
-  background: var(--xto-fill-color-light, #F9FAFB);
+  background: var(--xto-fill-color-light, #F7F8FA);
   border-radius: var(--xto-border-radius-small, 4px);
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
 }
 
 .col-type {
@@ -636,10 +636,10 @@ onMounted(() => {
   min-width: 24px;
   height: 24px;
   padding: 0 8px;
-  background: var(--xto-fill-color, #F3F4F6);
+  background: var(--xto-fill-color, #F2F3F5);
   border-radius: 12px;
   font-size: 12px;
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
 }
 
 .col-status {
@@ -684,7 +684,7 @@ onMounted(() => {
 
   .status-label {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 }
 </style>

package/src/views/system/role/index.vue

@@ -237,9 +237,9 @@ onMounted(() => {
                   <svg viewBox="0 0 64 41" fill="none">
                     <g transform="translate(0 1)">
                       <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
-                      <g stroke="var(--xto-color-text-placeholder, #9CA3AF)" stroke-width="2">
+                      <g stroke="var(--xto-color-text-placeholder, #A9AEB8)" stroke-width="2">
                         <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
-                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F3F4F6)"/>
+                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F2F3F5)"/>
                       </g>
                     </g>
                   </svg>
@@ -351,7 +351,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .role-page {
   padding: 24px;
-  background: var(--xto-bg-color-page, #F9FAFB);
+  background: var(--xto-bg-color-page, #F7F8FA);
   min-height: 100%;
 }
 
@@ -392,7 +392,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 16px 24px;
-  border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+  border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
 
   .toolbar-left {
     display: flex;
@@ -401,7 +401,7 @@ onMounted(() => {
 
   .table-count {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 }
 
@@ -417,14 +417,14 @@ onMounted(() => {
   th, td {
     padding: 14px 16px;
     text-align: left;
-    border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
   }
 
   th {
     font-size: 14px;
     font-weight: 500;
-    color: var(--xto-color-text-secondary, #6B7280);
-    background: var(--xto-fill-color-light, #F9FAFB);
+    color: var(--xto-color-text-secondary, #86909C);
+    background: var(--xto-fill-color-light, #F7F8FA);
     white-space: nowrap;
   }
 
@@ -432,7 +432,7 @@ onMounted(() => {
     transition: background-color 0.2s;
 
     &:hover {
-      background: var(--xto-color-primary-light-6, #C7D2FE);
+      background: var(--xto-color-primary-light-6, #CAC7F9);
     }
   }
 
@@ -451,7 +451,7 @@ onMounted(() => {
     flex-direction: column;
     align-items: center;
     gap: 16px;
-    color: var(--xto-color-text-placeholder, #9CA3AF);
+    color: var(--xto-color-text-placeholder, #A9AEB8);
 
     svg {
       width: 64px;
@@ -462,7 +462,7 @@ onMounted(() => {
   .loading-spinner {
     width: 32px;
     height: 32px;
-    border: 3px solid var(--xto-border-color-lighter, #F3F4F6);
+    border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
     border-top-color: var(--xto-color-primary, #4F46E5);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
@@ -482,11 +482,11 @@ onMounted(() => {
   display: inline-block;
   min-width: 32px;
   padding: 4px 10px;
-  background: var(--xto-fill-color, #F3F4F6);
+  background: var(--xto-fill-color, #F2F3F5);
   border-radius: 12px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
   text-align: center;
 }
 
@@ -497,7 +497,7 @@ onMounted(() => {
 .role-name {
   font-size: 14px;
   font-weight: 500;
-  color: var(--xto-color-text-primary, #1F2937);
+  color: var(--xto-color-text-primary, #1F2329);
 }
 
 .col-code {
@@ -510,7 +510,7 @@ onMounted(() => {
 
 .desc-text {
   font-size: 14px;
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
 }
 
 .col-status {
@@ -525,10 +525,10 @@ onMounted(() => {
 
 .status-text {
   font-size: 13px;
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
 
   &.enabled {
-    color: var(--xto-color-success, #10B981);
+    color: var(--xto-color-success, #2BC48A);
   }
 }
 
@@ -538,7 +538,7 @@ onMounted(() => {
 
 .time-text {
   font-size: 13px;
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
 }
 
 .col-actions {
@@ -562,7 +562,7 @@ onMounted(() => {
   display: flex;
   justify-content: flex-end;
   padding: 16px 24px;
-  border-top: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+  border-top: 1px solid var(--xto-border-color-lighter, #F2F3F5);
 }
 
 // 弹窗表单
@@ -577,7 +577,7 @@ onMounted(() => {
 
   .status-label {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 }
 </style>