完成前端改造

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>
@@ -9,7 +9,6 @@ export type Type = 'day' | 'night';

 const props = defineProps({
  value: { type: String as PropType<Type> },
-  // nightColor: { type: String, default: '#1D1D1D' },
  nightColor: { type: String, default: '#1a1a2e' },
 });

@@ -17,37 +16,34 @@ const emit = defineEmits<{
  (e: 'update:value', value: Type): void;
 }>();

+const STORAGE_KEY = 'theme-mode';
+
+const getInitialValue = () => {
+  if (typeof window !== 'undefined') {
+    const cachedValue = localStorage.getItem(STORAGE_KEY);
+    if (cachedValue === 'day' || cachedValue === 'night') {
+      return cachedValue;
+    }
+  }
+  return props.value || 'day';
+};
+
 const { value: _value } = useModelValue(
  () => props.value,
  (val) => emit('update:value', val),
-  'day'
+  getInitialValue()
 );
+
 const switcher: { [key in Type]: Type } = {
  day: 'night',
  night: 'day',
 };

 const { theme } = storeToRefs(useThemeStore());
+let cachedMiddleColors = {};

-// 监听主题色变换，更新缓存
-let cachedMiddleColors = cloneDeep(theme.value.color.middle);
-watch(
-  theme,
-  (val) => {
-    if (val.color.middle['bg-base'] !== props.nightColor) {
-      cachedMiddleColors = cloneDeep(val.color.middle);
-      _value.value = 'day';
-    } else {
-      _value.value = 'night';
-    }
-    console.log('theme', _value.value);
-    updateHtmlClass(_value.value);
-  },
-  { deep: true }
-);
-
-// 在你的主题store中添加切换逻辑
-const updateHtmlClass = (mode) => {
+// --- 修正点 1: 函数定义移到 watch 之前 ---
+const updateHtmlClass = (mode: Type) => {
  const html = document.documentElement;
  if (mode === 'night') {
    html.classList.add('dark-mode');
@@ -55,14 +51,46 @@ const updateHtmlClass = (mode) => {
    html.classList.remove('dark-mode');
  }
 };
-// 主题颜色配置
+
+// 监听 theme bg-base 变化，用于同步外部修改
+watch(
+  () => theme.value?.color?.middle?.['bg-base'],
+  (newBgColor) => {
+    if (newBgColor) {
+      if (newBgColor === props.nightColor) {
+        _value.value = 'night';
+      } else {
+        _value.value = 'day';
+      }
+    }
+  }
+);
+
+// --- 修正点 2: watch 现在可以安全地调用 updateHtmlClass ---
+watch(
+  _value,
+  (newMode) => {
+    console.log('mode switched to:', newMode);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(STORAGE_KEY, newMode);
+    }
+    updateHtmlClass(newMode);
+  },
+  { immediate: true }
+);
+
+// --- 修正点 3: 惰性缓存白天模式颜色 ---
 const colorCfg = computed(() => {
  if (_value.value === 'day') {
+    if (Object.keys(cachedMiddleColors).length === 0) {
+      cachedMiddleColors = cloneDeep(theme.value?.color?.middle || {});
+    }
    return { middle: cachedMiddleColors };
  }
  return { middle: { 'bg-base': props.nightColor } };
 });
 </script>
+
 <template>
  <ThemeProvider is-root :color="colorCfg">
    <div @click="() => (_value = switcher[_value])" class="bg-fill-2 day-night-switch hover:border-border relative border-border-2 text-lg rounded-full border border-solid flex items-center">
@@ -72,6 +100,7 @@ const colorCfg = computed(() => {
    </div>
  </ThemeProvider>
 </template>
+
 <style scoped lang="less">
 .day-night-switch {
  .spot {
@@ -91,4 +120,4 @@ const colorCfg = computed(() => {
    }
  }
 }
-</style>
+</style>