界面优化

app/src/components/layout/FrontView.vue

@@ -28,7 +28,7 @@ onMounted(() => {
 <template>
   <ThemeProvider :color="{ middle: { 'bg-base': '#fff','bg-container':'#fff','bg-container-light':'#fff' }, primary: { DEFAULT: '#1896ff' } }" :autoAdapt="true">
     <div class="front-view flex flex-col" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)">
-      <div class="text-xxl text-text hover:text-text" style="margin-left:20px;">
+      <div class="text-xxl text-text hover:text-text" style="margin-left:20px;color:#722ed1;">
         <img src="/logo1.png" />
         dy.sync.net
       </div>

app/src/pages/login/LoginBox.vue

@@ -1,30 +1,32 @@
 <template>
-  <ThemeProvider :color="{ middle: { 'bg-base': '#1a1a1a' }, primary: { DEFAULT: '#36bffA' } }">
-    <!-- 加宽后的登录框，使用更大的宽度设置 -->
-    <div class="login-box rounded-lg bg-gray-900 shadow-lg p-8 max-w-2xl mx-auto my-10 border border-gray-800 transition-all duration-300 hover:shadow-xl">
-      <a-form :model="form" :wrapperCol="{ span: 24 }" @finish="login" class="login-form w-full p-lg text-gray-200">
+  <ThemeProvider :color="{ 
+    middle: { 'bg-base': '#f8fafc' }, // 浅灰底色
+    primary: { DEFAULT: '#60a5fa' } // 柔和蓝色作为主色调
+  }">
+    <!-- 清新风格登录框 -->
+    <div class="login-box rounded-xl bg-white shadow-md p-8 max-w-2xl mx-auto my-10 border border-gray-100 transition-all duration-300 hover:shadow-lg">
+      <a-form :model="form" :wrapperCol="{ span: 24 }" @finish="login" class="login-form w-full p-lg text-gray-700">
         <div class="third-platform">
-          <div class="third-title mb-6 text-xl text-center font-semibold text-white">抖音同步小帮手</div>
+          <div class="third-title mb-6 text-xl text-center font-semibold text-gray-800">抖音同步小帮手</div>
         </div>
-        <a-divider class="my-6 bg-gray-700"></a-divider>
+        <a-divider class="my-6 bg-gray-200"></a-divider>
 
-        <!-- 增加输入框宽度并调整间距 -->
+        <!-- 清新风格输入框 -->
         <a-form-item :required="true" name="username" class="mb-5">
-          <a-input v-model:value="form.username" autocomplete="new-username" placeholder="请输入用户名" class="login-input h-[45px] rounded-md bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus:border-primary text-lg" />
+          <a-input v-model:value="form.username" autocomplete="new-username" placeholder="请输入用户名" class="login-input h-[45px] rounded-md bg-gray-50 border-gray-200 text-gray-800 placeholder:text-gray-400 focus:border-primary text-base transition-all focus:ring-1 focus:ring-primary" />
         </a-form-item>
 
         <a-form-item :required="true" name="password" class="mb-6">
-          <a-input v-model:value="form.password" autocomplete="new-password" placeholder="请输入密码" class="login-input h-[45px] rounded-md text-white placeholder:text-gray-500 focus:border-primary text-lg" :type="showPassword ? 'text' : 'password'">
-            <!-- 密码显示/隐藏切换按钮 -->
-            <!-- 直接使用图标作为点击元素 -->
+          <a-input v-model:value="form.password" autocomplete="new-password" placeholder="请输入密码" class="login-input h-[45px] rounded-md bg-gray-50 border-gray-200 text-gray-800 placeholder:text-gray-400 focus:border-primary text-base transition-all focus:ring-1 focus:ring-primary" :type="showPassword ? 'text' : 'password'">
+            <!-- 密码显示/隐藏图标 -->
             <template #suffix>
-              <EyeOutlined v-if="showPassword" @click="showPassword = !showPassword" class="text-gray-500 hover:text-white cursor-pointer transition-colors" aria-label="隐藏密码" />
-              <EyeInvisibleOutlined v-else @click="showPassword = !showPassword" class="text-gray-500 hover:text-white cursor-pointer transition-colors" aria-label="显示密码" />
+              <EyeOutlined v-if="showPassword" @click="showPassword = !showPassword" class="text-gray-400 hover:text-primary cursor-pointer transition-colors" aria-label="隐藏密码" />
+              <EyeInvisibleOutlined v-else @click="showPassword = !showPassword" class="text-gray-400 hover:text-primary cursor-pointer transition-colors" aria-label="显示密码" />
             </template>
           </a-input>
         </a-form-item>
 
-        <a-button htmlType="submit" class="h-[48px] w-full rounded-md transition-colors hover:opacity-90 bg-primary border-primary text-lg" type="primary" :loading="loading">
+        <a-button htmlType="submit" class="h-[48px] w-full rounded-md transition-colors hover:bg-primary/90 bg-primary border-primary text-white text-base shadow-sm hover:shadow" type="primary" :loading="loading">
           登录
         </a-button>
       </a-form>
@@ -36,6 +38,7 @@
 import { reactive, ref } from 'vue';
 import { useAccountStore } from '@/store';
 import { ThemeProvider } from 'stepin';
+import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
 
 // 控制密码显示/隐藏的状态
 const showPassword = ref(false);
@@ -68,4 +71,4 @@ function login(params: LoginFormProps) {
     })
     .finally(() => (loading.value = false));
 }
-</script>
+</script>

app/src/pages/login/LoginModal.vue

@@ -1,50 +1,43 @@
 <template>
-  <a-modal
-    width="460px"
-    v-model:visible="_visible"
-    wrap-class-name="login-modal"
-    :closable="false"
-    :footer="null"
-    :body-style="{ padding: 0 }"
-  >
+  <a-modal width="460px" v-model:visible="_visible" wrap-class-name="login-modal" :closable="false" :footer="null" :body-style="{ padding: 0 }">
     <login-box />
   </a-modal>
 </template>
 <script lang="ts" setup>
-  import LoginBox from './LoginBox.vue';
-  import useModelValue from '@/utils/useModelValue';
-  import { useAccountStore } from '@/store';
-  import { useRoute } from 'vue-router';
-  import { computed } from 'vue';
+import LoginBox from './LoginBox.vue';
+import useModelValue from '@/utils/useModelValue';
+import { useAccountStore } from '@/store';
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
 
-  const props = defineProps({
-    visible: { type: Boolean, default: undefined },
-    unless: Array<String>,
-  });
+const props = defineProps({
+  visible: { type: Boolean, default: undefined },
+  unless: Array<String>,
+});
 
-  const accountStore = useAccountStore();
-  const route = useRoute();
+const accountStore = useAccountStore();
+const route = useRoute();
 
-  const emit = defineEmits<{
-    (e: 'update:visible', visible?: boolean): void;
-  }>();
+const emit = defineEmits<{
+  (e: 'update:visible', visible?: boolean): void;
+}>();
 
-  const _visible = computed({
-    get(): boolean {
-      return !!sVisible.value && !props.unless?.includes(route.fullPath);
-    },
-    set(val: boolean) {
-      sVisible.value = val;
-    },
-  });
+const _visible = computed({
+  get(): boolean {
+    return !!sVisible.value && !props.unless?.includes(route.fullPath);
+  },
+  set(val: boolean) {
+    sVisible.value = val;
+  },
+});
 
-  const { value: sVisible } = useModelValue(
-    () => props.visible ?? !accountStore.logged,
-    (val) => emit('update:visible', val)
-  );
+const { value: sVisible } = useModelValue(
+  () => props.visible ?? !accountStore.logged,
+  (val) => emit('update:visible', val)
+);
 </script>
 <style lang="less">
-  .login-modal .ant-modal-content {
-    @apply bg-transparent;
-  }
+.login-modal .ant-modal-content {
+  @apply bg-transparent;
+}
 </style>

app/src/pages/workplace/statics.vue

@@ -28,7 +28,7 @@
               </svg>
             </div>
           </div>
-          <div class="stat-value">{{ fileSizeTotal }} G / {{totalDiskSize}} G</div>
+          <div class="stat-value">{{ fileSizeTotal }} G</div>
           <div class="stat-trend"></div>
         </div>
       </section>

app/src/router/routes.ts

@@ -87,7 +87,7 @@ const routes: RouteRecordRaw[] = [
     path: '/dashboard',
     name: '数据看板',
     meta: {
-      icon: 'SettingOutlined',
+      icon: 'RadarChartOutlined',
       view: 'self',
       target: '_self',
       renderMenu: true,
@@ -99,7 +99,7 @@ const routes: RouteRecordRaw[] = [
     path: '/workplace',
     name: '同步记录',
     meta: {
-      icon: 'SettingOutlined',
+      icon: 'SwapOutlined',
       view: 'self',
       target: '_self',
       renderMenu: true,
@@ -111,7 +111,7 @@ const routes: RouteRecordRaw[] = [
     path: '/cok',
     name: '抖音授权',
     meta: {
-      icon: 'SettingOutlined',
+      icon: 'SafetyCertificateOutlined',
       view: 'self',
       target: '_self',
       renderMenu: true,