完成前端改造

1、下一步实现各个分类下载视频中重复视频去除-可配置是否去重
2025-11-23 23:06:13 +08:00
parent e5f22e45c3
commit 73d612fe50
34 changed files with 1013 additions and 673 deletions
@@ -49,13 +49,13 @@ const navList = [
 ];
 </script>
 <template>
-  <ThemeProvider :color="{ middle: { 'bg-base': '#1896ff' }, primary: { DEFAULT: '#1896ff' } }" :autoAdapt="true">
+  <ThemeProvider :color="{ middle: { 'bg-base': '#fff' }, primary: { DEFAULT: '#fff' } }" :autoAdapt="true">
    <div class="front-view flex flex-col">
      <div class="text-text flex-1">
        <div class="front-header flex items-baseline py-md px-xl">
          <div class="text-xxl text-text hover:text-text">
            <!-- <img src="@/assets/png.svg" /> -->
-            <!-- 抖音同步小帮手 -->
+            <!-- 抖小云 -->
          </div>
          <!-- <div style="width: calc(100% - 430px)" class="front-navigation mx-xl flex overflow-hidden items-center text-lg overflow-ellipsis whitespace-nowrap">
            <div :class="`front-nav-item flex items-center cursor-pointer mx-base ${nav.children ? 'with-list' : ''}`" v-for="nav in navList">
@@ -30,7 +30,7 @@ onMounted(() => {
    <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;color:#722ed1;"> -->
      <!-- <img src="/logo.png" /> -->
-      <!-- 抖音同步小帮手 -->
+      <!-- 抖小云 -->
      <!-- </div> -->
      <div class="front-content ">
        <router-view />
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { reactive } from 'vue';
 import { StepinHeaderAction } from 'stepin';
-import Notice from '@/components/notice/Notice.vue';
+// import Notice from '@/components/notice/Notice.vue';
 import DayNightSwitch from '@/components/switch/DayNightSwitch.vue';
 import { BellOutlined } from '@ant-design/icons-vue';
 import Fullscreen from '../fullscreen/Fullscreen.vue';
@@ -47,20 +47,15 @@ const noticeList = reactive([

  <!-- </StepinHeaderAction> -->
  <!-- <StepinHeaderAction>
-    <a class="action-item" href="http://github.com/stepui/stepin-template" target="_blank">
+    <a class="action-item" href="https://github.com/jianzhichu/dysync.net" target="_blank">
      <GithubOutlined />
    </a>
  </StepinHeaderAction>
  <StepinHeaderAction>
-    <a class="action-item" href="http://gitee.com/stepui/stepin-template" target="_blank">
+    <a class="action-item" href="https://gitee.com/deathvicky/dysync.net" target="_blank">
      <img class="gitee-logo" src="@/assets/gitee.svg" />
    </a>
  </StepinHeaderAction> -->
-  <!-- <StepinHeaderAction>
-    <div class="action-item setting" @click="$emit('showSetting')">
-      <SettingOutlined />
-    </div>
-  </StepinHeaderAction> -->

  <!-- <a-popover placement="bottomRight">
    <StepinHeaderAction>
@@ -72,8 +67,14 @@ const noticeList = reactive([
      <Notice :data-source="noticeList" />
    </template>
  </a-popover> -->
-  <!-- <StepinHeaderAction>
+  <StepinHeaderAction>
    <Fullscreen class="-mx-xs -my-sm h-[56px] px-xs py-sm flex items-center" target=".stepin-layout" />
+  </StepinHeaderAction>
+  <!-- <StepinHeaderAction>
+    @click="$emit('showSetting')"
+    <div class="action-item setting">
+      <SettingOutlined />
+    </div>
  </StepinHeaderAction> -->
 </template>
 <style scoped lang="less">
@@ -1,41 +1,108 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { GithubOutlined, CopyrightOutlined } from '@ant-design/icons-vue';
+import { ref, onMounted } from 'vue';
+
+// 响应式变量存储年份文本
+const yearText = ref('');
+
+onMounted(() => {
+  const currentYear = new Date().getFullYear();
+  const startYear = 2025;
+
+  if (currentYear <= startYear) {
+    yearText.value = startYear.toString();
+  } else {
+    yearText.value = `${startYear}-${currentYear}`;
+  }
+});
+</script>
+
 <template>
-  <div class="page-footer">
-    <div class="links">
-      <!-- <a class="link" href="https://github.com/stepui/stepin-template" target="_blank"> Stepin 首页 </a> -->
-      <!-- <a class="link" href="https://github.com/stepui/stepin-template" target="_blank">
-        <GithubOutlined />
-      </a> -->
-      <!-- <a class="link" href="https://www.antdv.com/docs/vue/introduce-cn/" target="_blank"> Ant Design </a> -->
+  <footer class="page-footer">
+    <div class="footer-content">
+      <!-- 版权信息容器 -->
+      <div class="copyright">
+        <CopyrightOutlined class="icon-copyright" />
+        <span>{{ yearText }} 抖小云 dysync.net. </span>
+
+        <!-- 将社交链接移动到这里 -->
+        <div class="social-links">
+          <a href="https://github.com/jianzhichu/dysync.net" target="_blank" rel="noopener noreferrer" aria-label="访问我们的 GitHub 仓库" class="social-link">
+            <GithubOutlined />
+          </a>
+          <a href="https://gitee.com/deathvicky/dysync.net" target="_blank" rel="noopener noreferrer" aria-label="访问我们的 Gitee 仓库" class="social-link">
+            <img class="gitee-icon" src="@/assets/gitee.svg" alt="Gitee" />
+          </a>
+        </div>
+      </div>
    </div>
-    <div class="copyright">
-      Copyright
-      <CopyrightOutlined class="icon-copyright" />
-      2023 dy.net
-    </div>
-  </div>
+  </footer>
 </template>

 <style scoped lang="less">
 .page-footer {
-  text-align: center;
-  @apply text-gray-400;
+  // 使用 :root 变量，便于主题切换
+  --footer-text-color: var(--text-color-secondary, #999);
+  --footer-hover-color: var(--primary-color, #1890ff);

-  .links {
+  width: 100%;
+  color: var(--footer-text-color);
+  padding: 24px 0;
+  font-size: 14px;
+  line-height: 1.6;
+
+  .footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 24px;
+    text-align: center;
+  }
+
+  // 版权信息现在是一个父 flex 容器
+  .copyright {
    display: flex;
    justify-content: center;
+    align-items: center;
+    // 增大 gap 以分隔文字和社交链接组
+    gap: 10px;
+    font-size: 13px;
+    letter-spacing: 0.3px;
+  }

-    .link {
-      @apply hover:text-gray-400 pl-4 pr-4;
+  // 社交链接组自身也是一个 flex 容器
+  .social-links {
+    display: flex;
+    // 为两个图标之间设置间距
+    gap: 16px;
+    // 移除了原来的 margin-bottom
+
+    .social-link {
+      color: inherit;
+      transition: color 0.3s ease, transform 0.2s ease;
+      display: inline-flex;
+      opacity: 0.8;
+      align-items: center;
+      // 移除了图标和文字的 gap，因为现在没有文字了
+
+      &:hover {
+        color: var(--footer-hover-color);
+        opacity: 1;
+        transform: translateY(-2px);
+      }
+
+      svg,
+      img {
+        width: 20px;
+        height: 20px;
+        display: block;
+        flex-shrink: 0;
+      }
    }
  }

-  .copyright {
-    margin-top: 8px;
-
-    .icon-copyright {
-      margin: 0;
-    }
+  .gitee-icon {
+    width: 14px !important;
+    height: 14px !important;
  }
 }
-</style>
+</style>