@befly-addon/admin 1.0.36 → 1.0.38

package/views/index/components/performanceMetrics.vue

@@ -86,22 +86,22 @@ fetchData();
 .performance-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: $spacing-sm;
-    margin-bottom: $spacing-sm;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
 
     .perf-metric {
         display: flex;
         align-items: center;
-        gap: $spacing-sm;
-        padding: $spacing-sm $spacing-md;
-        background: rgba($primary-color, 0.02);
-        border-radius: $border-radius;
-        border: 1px solid $border-color;
-        transition: all 0.2s ease;
+        gap: var(--spacing-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+        background: rgba(var(--primary-color-rgb), 0.02);
+        border-radius: var(--border-radius);
+        border: 1px solid var(--border-color);
+        transition: all 0.2s;
 
         &:hover {
-            background: rgba($primary-color, 0.05);
-            border-color: $primary-color;
+            background: rgba(var(--primary-color-rgb), 0.05);
+            border-color: var(--primary-color);
         }
 
         .perf-icon {
@@ -110,9 +110,9 @@ fetchData();
             justify-content: center;
             width: 36px;
             height: 36px;
-            border-radius: $border-radius-small;
-            background: linear-gradient(135deg, rgba($success-color, 0.1) 0%, rgba($success-color, 0.05) 100%);
-            color: $success-color;
+            border-radius: var(--border-radius-small);
+            background: linear-gradient(135deg, rgba(0, 168, 112, 0.1) 0%, rgba(0, 168, 112, 0.05) 100%);
+            color: var(--success-color);
             flex-shrink: 0;
         }
 
@@ -121,35 +121,25 @@ fetchData();
 
             .perf-label {
                 font-size: 14px;
-                color: $text-secondary;
+                color: var(--text-secondary);
                 margin-bottom: 2px;
             }
 
             .perf-value {
                 font-size: 16px;
                 font-weight: 700;
-                color: $primary-color;
+                color: var(--primary-color);
             }
         }
     }
 }
 
-.perf-slowest {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: $spacing-sm $spacing-md;
-    background: rgba($warning-color, 0.05);
-    border-radius: $border-radius-small;
-    border: 1px solid rgba($warning-color, 0.2);
-    font-size: 14px;
-    color: $warning-color;
-
-    span {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+.warning-tip {
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: rgba(var(--warning-color-rgb), 0.05);
+    border-radius: var(--border-radius-small);
+    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
+    font-size: 13px;
+    color: var(--warning-color);
 }
 </style>

package/views/index/components/serviceStatus.vue

@@ -88,8 +88,8 @@ const getStatusText = (status) => {
     gap: 10px;
 
     .config-card {
-        background: rgba($primary-color, 0.02);
-        border: 1px solid $border-color;
+        background: rgba(var(--primary-color-rgb), 0.02);
+        border: 1px solid var(--border-color);
         border-radius: 6px;
         padding: 12px;
         display: flex;
@@ -100,8 +100,8 @@ const getStatusText = (status) => {
         transition: all 0.3s;
 
         &:hover {
-            background: rgba($primary-color, 0.05);
-            border-color: $primary-color;
+            background: rgba(var(--primary-color-rgb), 0.05);
+            border-color: var(--primary-color);
             transform: translateY(-2px);
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
         }
@@ -134,7 +134,7 @@ const getStatusText = (status) => {
 
                 .latency {
                     margin-left: 4px;
-                    color: $text-placeholder;
+                    color: var(--text-placeholder);
                 }
             }
         }
@@ -147,44 +147,44 @@ const getStatusText = (status) => {
         }
 
         &.config-running {
-            border-color: $success-color;
+            border-color: var(--success-color);
             background: linear-gradient(135deg, rgba(82, 196, 26, 0.05), white);
 
             .config-icon {
                 background: rgba(82, 196, 26, 0.1);
-                color: $success-color;
+                color: var(--success-color);
             }
 
             .config-name {
-                color: $success-color;
+                color: var(--success-color);
             }
         }
 
         &.config-unconfigured {
-            border-color: $warning-color;
+            border-color: var(--warning-color);
             background: linear-gradient(135deg, rgba(250, 173, 20, 0.05), white);
 
             .config-icon {
                 background: rgba(250, 173, 20, 0.1);
-                color: $warning-color;
+                color: var(--warning-color);
             }
 
             .config-name {
-                color: $warning-color;
+                color: var(--warning-color);
             }
         }
 
         &.config-stopped {
-            border-color: $error-color;
+            border-color: var(--error-color);
             background: linear-gradient(135deg, rgba(255, 77, 79, 0.05), white);
 
             .config-icon {
                 background: rgba(255, 77, 79, 0.1);
-                color: $error-color;
+                color: var(--error-color);
             }
 
             .config-name {
-                color: $error-color;
+                color: var(--error-color);
             }
         }
     }

package/views/index/components/systemNotifications.vue

@@ -62,21 +62,21 @@ const formatTime = (timestamp) => {
 .notification-compact-list {
     display: flex;
     flex-direction: column;
-    gap: $spacing-xs;
+    gap: var(--spacing-xs);
 
     .notification-compact-item {
         display: flex;
         align-items: center;
-        gap: $spacing-sm;
-        padding: $spacing-sm $spacing-md;
-        background: rgba($primary-color, 0.02);
-        border-radius: $border-radius-small;
-        border: 1px solid $border-color;
-        transition: all 0.2s ease;
+        gap: var(--spacing-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+        background: rgba(var(--primary-color-rgb), 0.02);
+        border-radius: var(--border-radius-small);
+        border: 1px solid var(--border-color);
+        transition: all 0.2s;
 
         &:hover {
-            background: rgba($primary-color, 0.05);
-            border-color: $primary-color;
+            background: rgba(var(--primary-color-rgb), 0.05);
+            border-color: var(--primary-color);
         }
 
         .notification-icon {
@@ -85,40 +85,40 @@ const formatTime = (timestamp) => {
             justify-content: center;
             width: 32px;
             height: 32px;
-            border-radius: $border-radius-small;
+            border-radius: var(--border-radius-small);
             flex-shrink: 0;
 
             &.type-info {
-                background: rgba($primary-color, 0.1);
-                color: $primary-color;
+                background: rgba(var(--primary-color-rgb), 0.1);
+                color: var(--primary-color);
             }
 
             &.type-success {
-                background: rgba($success-color, 0.1);
-                color: $success-color;
+                background: rgba(var(--success-color-rgb), 0.1);
+                color: var(--success-color);
             }
 
             &.type-warning {
-                background: rgba($warning-color, 0.1);
-                color: $warning-color;
+                background: rgba(var(--warning-color-rgb), 0.1);
+                color: var(--warning-color);
             }
 
             &.type-error {
-                background: rgba($error-color, 0.1);
-                color: $error-color;
+                background: rgba(var(--error-color-rgb), 0.1);
+                color: var(--error-color);
             }
         }
 
         .notification-content {
             display: flex;
             align-items: center;
-            gap: $spacing-sm;
+            gap: var(--spacing-sm);
             flex: 1;
             min-width: 0;
 
             .notification-title {
                 font-size: 14px;
-                color: $text-primary;
+                color: var(--text-primary);
                 font-weight: 500;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -128,7 +128,7 @@ const formatTime = (timestamp) => {
 
             .notification-time {
                 font-size: 14px;
-                color: $text-placeholder;
+                color: var(--text-placeholder);
                 flex-shrink: 0;
             }
         }

package/views/index/components/systemOverview.vue

@@ -74,12 +74,12 @@ fetchData();
         gap: 6px;
         padding-bottom: 8px;
         margin-bottom: 12px;
-        border-bottom: 2px solid $primary-color;
+        border-bottom: 2px solid var(--primary-color);
 
         .info-title {
             font-size: 14px;
             font-weight: 600;
-            color: $text-primary;
+            color: var(--text-primary);
         }
     }
 
@@ -93,29 +93,29 @@ fetchData();
             justify-content: space-between;
             align-items: center;
             padding: 10px 12px;
-            background: rgba($primary-color, 0.02);
-            border-radius: $border-radius-small;
-            border: 1px solid $border-color;
+            background: rgba(var(--primary-color-rgb), 0.02);
+            border-radius: var(--border-radius-small);
+            border: 1px solid var(--border-color);
             transition: all 0.2s ease;
 
             &:hover {
-                background: rgba($primary-color, 0.05);
-                border-color: $primary-color;
+                background: rgba(var(--primary-color-rgb), 0.05);
+                border-color: var(--primary-color);
             }
 
             .label {
                 font-size: 14px;
-                color: $text-secondary;
+                color: var(--text-secondary);
                 font-weight: 500;
             }
 
             .value {
                 font-size: 14px;
-                color: $text-primary;
+                color: var(--text-primary);
                 font-weight: 600;
 
                 &.highlight {
-                    color: $primary-color;
+                    color: var(--primary-color);
                 }
             }
         }
@@ -128,8 +128,8 @@ fetchData();
     gap: 10px;
 
     .stat-box {
-        background: rgba($primary-color, 0.02);
-        border: 1px solid $border-color;
+        background: rgba(var(--primary-color-rgb), 0.02);
+        border: 1px solid var(--border-color);
         border-radius: 6px;
         padding: 12px;
         display: flex;
@@ -138,8 +138,8 @@ fetchData();
         transition: all 0.3s;
 
         &:hover {
-            background: rgba($primary-color, 0.05);
-            border-color: $primary-color;
+            background: rgba(var(--primary-color-rgb), 0.05);
+            border-color: var(--primary-color);
             transform: translateY(-2px);
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
         }
@@ -155,34 +155,34 @@ fetchData();
 
             .stat-label {
                 font-size: 14px;
-                color: $text-secondary;
+                color: var(--text-secondary);
             }
         }
 
         &.stat-primary {
-            border-color: $primary-color;
-            background: linear-gradient(135deg, rgba(0, 82, 217, 0.05), white);
+            border-color: var(--primary-color);
+            background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05), white);
 
             .stat-value {
-                color: $primary-color;
+                color: var(--primary-color);
             }
         }
 
         &.stat-success {
-            border-color: $success-color;
-            background: linear-gradient(135deg, rgba(82, 196, 26, 0.05), white);
+            border-color: var(--success-color);
+            background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.05), white);
 
             .stat-value {
-                color: $success-color;
+                color: var(--success-color);
             }
         }
 
         &.stat-warning {
-            border-color: $warning-color;
-            background: linear-gradient(135deg, rgba(250, 173, 20, 0.05), white);
+            border-color: var(--warning-color);
+            background: linear-gradient(135deg, rgba(var(--warning-color-rgb), 0.05), white);
 
             .stat-value {
-                color: $warning-color;
+                color: var(--warning-color);
             }
         }
     }

package/views/index/components/systemResources.vue

@@ -77,7 +77,7 @@ const getProgressColor = (percentage) => {
 .resource-compact-list {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: $spacing-md;
+    gap: var(--spacing-md);
 
     .resource-compact-item {
         .resource-compact-header {
@@ -89,20 +89,20 @@ const getProgressColor = (percentage) => {
             .resource-label {
                 font-size: 14px;
                 font-weight: 600;
-                color: $text-secondary;
+                color: var(--text-secondary);
                 min-width: 50px;
             }
 
             .resource-value {
                 font-size: 16px;
                 font-weight: 700;
-                color: $primary-color;
+                color: var(--primary-color);
                 min-width: 60px;
             }
 
             .resource-desc {
                 font-size: 14px;
-                color: $text-placeholder;
+                color: var(--text-placeholder);
                 flex: 1;
             }
         }

package/views/index/components/userInfo.vue

@@ -56,7 +56,7 @@ const $Method = {
     // 获取数据
     async fetchData() {
         try {
-            const { data } = await $Http('/addon/admin/admin/info');
+            const { data } = await $Http('/addon/admin/admin/detail');
             Object.assign($Data.userInfo, data);
         } catch (error) {
             console.error('获取用户信息失败:', error);
@@ -136,12 +136,12 @@ $Method.fetchData();
         align-items: center;
         gap: 12px;
         padding-bottom: 12px;
-        border-bottom: 1px solid $border-color;
+        border-bottom: 1px solid var(--border-color);
 
         .user-avatar {
             width: 48px;
             height: 48px;
-            background: linear-gradient(135deg, $primary-color, #764ba2);
+            background: linear-gradient(135deg, var(--primary-color), #764ba2);
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -157,7 +157,7 @@ $Method.fetchData();
             .user-name {
                 font-size: 16px;
                 font-weight: 600;
-                color: $text-primary;
+                color: var(--text-primary);
                 margin-bottom: 4px;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -166,7 +166,7 @@ $Method.fetchData();
 
             .user-role {
                 font-size: 12px;
-                color: $text-secondary;
+                color: var(--text-secondary);
             }
         }
     }
@@ -182,7 +182,7 @@ $Method.fetchData();
             align-items: center;
             gap: 8px;
             font-size: 12px;
-            color: $text-secondary;
+            color: var(--text-secondary);
 
             span {
                 overflow: hidden;
@@ -195,7 +195,7 @@ $Method.fetchData();
     .user-actions {
         margin-top: 16px;
         padding-top: 12px;
-        border-top: 1px solid $border-color;
+        border-top: 1px solid var(--border-color);
         display: flex;
         justify-content: center;
     }

package/views/index/index.vue

@@ -26,7 +26,5 @@ import EnvironmentInfo from './components/environmentInfo.vue';
     background-color: #fff;
     padding: 15px;
     border: 1px solid #e8eaed;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-    border-radius: 8px;
 }
 </style>

package/views/login/components/emailLoginForm.vue

@@ -1,31 +1,33 @@
 <template>
-    <TForm :model="$Data.formData" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)" class="login-form" label-width="90px" label-position="left" :show-message="false">
-        <TFormItem prop="account" label="账号">
-            <TInput v-model="$Data.formData.account" placeholder="请输入用户名或邮箱" size="large" clearable>
+    <TForm :model="$Data.formData" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)" class="login-form" :show-message="false" label-width="0">
+        <TFormItem prop="account">
+            <TInput v-model="$Data.formData.account" placeholder="用户名或邮箱" size="large" clearable @enter="$Method.apiLogin">
                 <template #prefix-icon>
                     <ILucideUser />
                 </template>
             </TInput>
         </TFormItem>
 
-        <TFormItem prop="password" label="密码">
-            <TInput v-model="$Data.formData.password" type="password" placeholder="请输入密码" size="large" clearable>
+        <TFormItem prop="password">
+            <TInput v-model="$Data.formData.password" type="password" placeholder="密码" size="large" clearable @enter="$Method.apiLogin">
                 <template #prefix-icon>
                     <ILucideLock />
                 </template>
             </TInput>
         </TFormItem>
 
-        <div class="form-footer">
-            <a href="#" class="forgot-password">忘记密码？</a>
+        <div class="form-options">
+            <TCheckbox v-model="$Data.rememberMe">记住我</TCheckbox>
+            <a href="#" class="link-text">忘记密码？</a>
         </div>
 
-        <TButton theme="primary" class="auth-btn" size="large" :loading="$Data.loading" @click="$Method.apiLogin"> 登录 </TButton>
+        <TButton theme="primary" class="login-btn" size="large" block :loading="$Data.loading" @click="$Method.apiLogin"> 登录 </TButton>
     </TForm>
 </template>
 
 <script setup>
-import { Form as TForm, FormItem as TFormItem, Input as TInput, Button as TButton, MessagePlugin } from 'tdesign-vue-next';
+import { useRouter } from 'vue-router';
+import { Form as TForm, FormItem as TFormItem, Input as TInput, Button as TButton, Checkbox as TCheckbox, MessagePlugin } from 'tdesign-vue-next';
 import ILucideUser from '~icons/lucide/user';
 import ILucideLock from '~icons/lucide/lock';
 import { $Http } from '@/plugins/http';
@@ -41,6 +43,7 @@ const $From = $shallowRef({
 // 数据定义
 const $Data = $ref({
     loading: false,
+    rememberMe: false,
     formData: {
         account: '',
         password: ''
@@ -94,12 +97,10 @@ const $Method = {
 <style scoped lang="scss">
 .login-form {
     width: 100%;
-    max-width: 450px;
-}
 
-.t-form__item {
-    width: 100%;
-    margin-bottom: 1.2rem;
+    :deep(.t-form__item) {
+        margin-bottom: 1.25rem;
+    }
 
     :deep(.t-form__controls) {
         width: 100%;
@@ -107,59 +108,59 @@ const $Method = {
 
     :deep(.t-input) {
         width: 100%;
-        background: #f8f9fa;
-        border: 1px solid #e0e0e0;
-        border-radius: 6px;
+        border-radius: 8px;
         transition: all 0.3s;
 
         &:hover {
-            border-color: #48b19f;
+            border-color: #667eea;
         }
 
         &:focus-within {
-            border-color: #48b19f;
-            background: #fff;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
         }
+    }
 
-        input {
-            padding: 0.75rem 1rem;
-        }
+    :deep(.t-input__wrap) {
+        width: 100%;
     }
 }
 
-.form-footer {
-    width: 100%;
+.form-options {
     display: flex;
-    justify-content: flex-end;
-    margin-bottom: 1rem;
-}
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
 
-.forgot-password {
-    font-size: 0.8rem;
-    color: #888;
-    text-decoration: none;
+    .link-text {
+        color: var(--login-link);
+        text-decoration: none;
+        transition: color 0.3s;
 
-    &:hover {
-        color: #48b19f;
+        &:hover {
+            color: var(--login-link-hover);
+        }
     }
 }
 
-.auth-btn {
-    width: 100% !important;
-    max-width: 100%;
-    height: 44px;
-    border-radius: 6px;
-    background: #48b19f;
-    border: none;
-    font-size: 0.95rem;
+.login-btn {
+    width: 100%;
+    height: 48px;
+    border-radius: 8px;
+    font-size: 1rem;
     font-weight: 600;
-    margin-top: 0.5rem;
+    background: linear-gradient(135deg, var(--login-btn-gradient-start) 0%, var(--login-btn-gradient-end) 100%);
+    border: none;
     transition: all 0.3s;
 
     &:hover {
-        background: #3a9d8f;
-        transform: translateY(-1px);
-        box-shadow: 0 3px 10px rgba(72, 177, 159, 0.3);
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px var(--login-btn-shadow);
+    }
+
+    &:active {
+        transform: translateY(0);
     }
 
     :deep(.t-button__text) {