├── demo
    ├── info.txt
    ├── dynamic_image_admin.png
    └── dynamic_image_home.png
├── src
    ├── index.css
    ├── main.js
    ├── App.vue
    ├── router.js
    ├── stores
    │   └── linkStore.js
    ├── views
    │   ├── Home.vue
    │   └── Admin.vue
    └── components
    │   └── DateRangePicker.vue
├── postcss.config.js
├── jsconfig.json
├── tailwind.config.js
├── index.html
├── vite.config.js
├── README.md
├── package.json
├── LICENSE
└── functions
    └── api
        └── [[route]].js


/demo/info.txt:
--------------------------------------------------------------------------------
1 | 项目的图片示例
2 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities; 


--------------------------------------------------------------------------------
/demo/dynamic_image_admin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ltxlong/dynamic-image/HEAD/demo/dynamic_image_admin.png


--------------------------------------------------------------------------------
/demo/dynamic_image_home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ltxlong/dynamic-image/HEAD/demo/dynamic_image_home.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | } 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "baseUrl": ".",
4 |     "paths": {
5 |       "@/*": ["./src/*"]
6 |     }
7 |   },
8 |   "exclude": ["node_modules", "dist"]
9 | } 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{vue,js,ts,jsx,tsx}",
 6 |   ],
 7 |   darkMode: 'class',
 8 |   theme: {
 9 |     extend: {},
10 |   },
11 |   plugins: [],
12 | } 
13 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import { createPinia } from 'pinia'
 3 | import App from './App.vue'
 4 | import VueDatePicker from '@vuepic/vue-datepicker'
 5 | import '@vuepic/vue-datepicker/dist/main.css'
 6 | 
 7 | const app = createApp(App)
 8 | app.use(createPinia())
 9 | app.component('VueDatePicker', VueDatePicker)
10 | app.mount('#app') 
11 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="{'dark': isDark}" class="min-h-screen">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | import { ref, watch, provide } from 'vue'
 9 | import { useStorage } from '@vueuse/core'
10 | 
11 | // 使用 localStorage 持久化主题设置
12 | const isDark = useStorage('theme-dark', false)
13 | 
14 | // 监听主题变化，更新 HTML 的 class
15 | watch(isDark, (dark) => {
16 |   if (dark) {
17 |     document.documentElement.classList.add('dark')
18 |   } else {
19 |     document.documentElement.classList.remove('dark')
20 |   }
21 | }, { immediate: true })
22 | 
23 | // 提供给其他组件使用
24 | provide('isDark', isDark)
25 | </script> 
26 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>链接管理系统</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module">
11 |       import { createApp } from 'vue'
12 |       import { createPinia } from 'pinia'
13 |       import App from './src/App.vue'
14 |       import { router } from './src/router'
15 |       import './src/index.css'
16 | 
17 |       const app = createApp(App)
18 |       app.use(createPinia())
19 |       app.use(router)
20 |       app.mount('#app')
21 |     </script>
22 |   </body>
23 | </html> 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import { fileURLToPath, URL } from 'node:url'
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [vue()],
 7 |   resolve: {
 8 |     alias: {
 9 |       '@': fileURLToPath(new URL('./src', import.meta.url))
10 |     }
11 |   },
12 |   build: {
13 |     outDir: 'dist'
14 |   },
15 |   server: {
16 |     proxy: {
17 |       '/api': {
18 |         target: 'http://localhost:8787',
19 |         changeOrigin: true
20 |       }
21 |     },
22 |     historyApiFallback: {
23 |       rewrites: [
24 |         { from: /^\/api\/.*$/, to: '/api' },
25 |         { from: /./, to: '/index.html' }
26 |       ]
27 |     }
28 |   }
29 | }) 
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # dynamic-image
 2 | 
 3 | 💕fork 本项目，然后直接部署到cloudflare pages💕期待你的star
 4 | 
 5 | 构建命令：npm run build
 6 | 
 7 | 构建输出目录：dist
 8 | 
 9 | 环境变量-管理后台密码变量名：ADMIN_PASSWORD
10 | 
11 | 绑定-KV数据库变量名：DYNAMIC_IMAGE
12 | 
13 | 图片获取接口：/api
14 | 
15 | 获取所有图片配置：/api/links
16 | 
17 | ![](https://github.com/ltxlong/dynamic-image/raw/main/demo/dynamic_image_home.png)
18 | 
19 | ![](https://github.com/ltxlong/dynamic-image/raw/main/demo/dynamic_image_admin.png)
20 | 
21 | # 功能
22 | 
23 | - 图片链接的增删改查、激活/暂停（ /api接口返回的是激活状态的链接 ）
24 | 
25 | - 限制访问：只有设置了的域名才可以访问 /api 接口来获取图片
26 | 
27 | - 显示模式：
28 | 
29 | 随机模式-所有链接随机返回一条
30 | 
31 | 标签模式-基于优先级：
32 | 
33 | 日标签 > 周标签 > 月标签
34 | 
35 | 日标签是日期范围
36 | 
37 | 周标签可以多选
38 | 
39 | 月标签可以多选
40 | 
41 | 如果有多个url有相同的标签，那么这些链接随机返回一条
42 | 
43 | 如果没有对应的标签，那么切换为随机模式查找
44 | 
45 | [![Star History Chart](https://api.star-history.com/svg?repos=ltxlong/dynamic-image&type=Date)](https://star-history.com/#ltxlong/dynamic-image&Date)
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cloudflare-link-manager",
 3 |   "private": true,
 4 |   "version": "1.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview",
10 |     "pages:dev": "wrangler pages dev --proxy 5173 -- npm run dev",
11 |     "pages:deploy": "npm run build && wrangler pages deploy dist"
12 |   },
13 |   "dependencies": {
14 |     "@popperjs/core": "^2.11.8",
15 |     "@vuepic/vue-datepicker": "^10.0.0",
16 |     "@vueuse/core": "^10.0.0",
17 |     "date-fns": "^2.30.0",
18 |     "pinia": "^2.1.0",
19 |     "tsparticles": "^2.12.0",
20 |     "vue": "^3.3.0",
21 |     "vue-router": "^4.2.0"
22 |   },
23 |   "devDependencies": {
24 |     "@vitejs/plugin-vue": "^4.2.0",
25 |     "autoprefixer": "^10.4.0",
26 |     "postcss": "^8.4.0",
27 |     "tailwindcss": "^3.3.0",
28 |     "vite": "^4.3.0",
29 |     "wrangler": "^3.0.0"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 ltxlong
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import Home from './views/Home.vue'
 3 | import Admin from './views/Admin.vue'
 4 | 
 5 | // 定义不需要登录就能访问的白名单路径，精确匹配
 6 | const whiteList = ['/', '/admin', '/api']
 7 | 
 8 | const routes = [
 9 |   {
10 |     path: '/',
11 |     component: Home
12 |   },
13 |   {
14 |     path: '/admin',
15 |     component: Admin
16 |   },
17 |   {
18 |     path: '/:pathMatch(.*)*',
19 |     name: 'NotFound',
20 |     component: Home
21 |   }
22 | ]
23 | 
24 | export const router = createRouter({
25 |   history: createWebHistory(),
26 |   routes
27 | })
28 | 
29 | // 全局导航守卫
30 | router.beforeEach((to, from, next) => {
31 | 
32 |   if (to.path === '/' || to.path === '/admin') {
33 |     next()
34 |     return
35 |   }
36 |   
37 |   // 检查是否登录
38 |   if (!sessionStorage.getItem('token')) {
39 | 
40 |     // 精确匹配白名单路径
41 |     const isWhiteListed = whiteList.some(path => {
42 |       return to.path === path || to.path === path + '/';
43 |     });
44 |   
45 |     if (isWhiteListed) {
46 |       next()
47 |       return
48 |     }
49 | 
50 |     next('/')
51 |     return
52 |   }
53 | 
54 |   next()
55 | })
56 | 
57 | export default router
58 | 


--------------------------------------------------------------------------------
/src/stores/linkStore.js:
--------------------------------------------------------------------------------
  1 | import { defineStore } from 'pinia'
  2 | 
  3 | export const useLinkStore = defineStore('links', {
  4 |   state: () => ({
  5 |     links: [],
  6 |     displayMode: 1, // 1: 随机, 2: 标签
  7 |   }),
  8 |   
  9 |   actions: {
 10 |     getAuthHeaders() {
 11 |       const token = sessionStorage.getItem('token')
 12 |       return {
 13 |         'Content-Type': 'application/json',
 14 |         'Authorization': token ? `Bearer ${token}` : ''
 15 |       }
 16 |     },
 17 | 
 18 |     async fetchLinks() {
 19 |       const response = await fetch('/api/links')
 20 |       if (response.ok) {
 21 |         this.links = await response.json()
 22 |       }
 23 |     },
 24 | 
 25 |     async addLink(link) {
 26 |       const response = await fetch('/api/links', {
 27 |         method: 'POST',
 28 |         headers: this.getAuthHeaders(),
 29 |         body: JSON.stringify(link)
 30 |       })
 31 |       if (response.ok) {
 32 |         const newLink = await response.json()
 33 |         this.links.push(newLink)
 34 |       } else {
 35 |         throw new Error('添加链接失败')
 36 |       }
 37 |     },
 38 |     
 39 |     async deleteLink(id) {
 40 |       const response = await fetch(`/api/links/${id}`, {
 41 |         method: 'DELETE',
 42 |         headers: this.getAuthHeaders()
 43 |       })
 44 |       if (response.ok) {
 45 |         this.links = this.links.filter(link => link.id !== id)
 46 |       } else {
 47 |         throw new Error('删除链接失败')
 48 |       }
 49 |     },
 50 |     
 51 |     async fetchSettings() {
 52 |       const response = await fetch('/api/settings', {
 53 |         headers: this.getAuthHeaders()
 54 |       })
 55 |       if (response.ok) {
 56 |         const settings = await response.json()
 57 |         this.displayMode = settings.displayMode
 58 |       }
 59 |     },
 60 | 
 61 |     async updateDisplayMode(mode) {
 62 |       const response = await fetch('/api/settings', {
 63 |         method: 'POST',
 64 |         headers: this.getAuthHeaders(),
 65 |         body: JSON.stringify({ displayMode: mode })
 66 |       })
 67 |       if (response.ok) {
 68 |         this.displayMode = mode
 69 |       } else {
 70 |         throw new Error('更新显示模式失败')
 71 |       }
 72 |     },
 73 | 
 74 |     async updateLink(link) {
 75 |       const response = await fetch(`/api/links/${link.id}`, {
 76 |         method: 'PUT',
 77 |         headers: this.getAuthHeaders(),
 78 |         body: JSON.stringify(link)
 79 |       })
 80 |       if (response.ok) {
 81 |         const index = this.links.findIndex(l => l.id === link.id)
 82 |         if (index !== -1) {
 83 |           this.links[index] = link
 84 |         }
 85 |       } else {
 86 |         throw new Error('更新链接失败')
 87 |       }
 88 |     },
 89 | 
 90 |     async toggleStatus(id) {
 91 |       const link = this.links.find(l => l.id === id)
 92 |       if (!link) throw new Error('链接不存在')
 93 | 
 94 |       const updatedLink = { 
 95 |         ...link, 
 96 |         active: !link.active
 97 |       }
 98 |       
 99 |       const response = await fetch(`/api/links/${id}`, {
100 |         method: 'PUT',
101 |         headers: this.getAuthHeaders(),
102 |         body: JSON.stringify(updatedLink)
103 |       })
104 |       
105 |       if (response.ok) {
106 |         const index = this.links.findIndex(l => l.id === id)
107 |         if (index !== -1) {
108 |           this.links[index] = updatedLink
109 |         }
110 |       } else {
111 |         throw new Error('更新状态失败')
112 |       }
113 |     }
114 |   }
115 | }) 
116 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="min-h-screen bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden">
  3 |     <!-- 装饰元素 - 移到最底层 -->
  4 |     <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-96 h-96 bg-sky-500/20 rounded-full mix-blend-soft-light filter blur-3xl z-0"></div>
  5 |     
  6 |     <!-- 粒子背景 - 中间层 -->
  7 |     <div id="particles-js" class="absolute inset-0 opacity-40 z-10"></div>
  8 | 
  9 |     <!-- 主要内容 - 最上层 -->
 10 |     <div class="relative z-20 container mx-auto px-4 min-h-screen flex flex-col items-center justify-center">
 11 |       <!-- 玻璃拟态卡片 -->
 12 |       <div class="backdrop-blur-lg bg-white/5 p-8 rounded-3xl shadow-2xl border border-white/10 max-w-2xl w-full">
 13 |         <h1 class="text-5xl font-bold text-center mb-6 text-white tracking-wider bg-gradient-to-r from-slate-100 to-slate-300 bg-clip-text text-transparent">
 14 |           灵动小尾巴
 15 |           <span class="inline-block animate-bounce">~</span>
 16 |         </h1>
 17 |         
 18 |         <p class="text-center text-slate-300 mb-8 text-lg leading-relaxed flex items-center justify-center gap-2">
 19 |           这是一个基于 
 20 |           <span class="font-semibold text-sky-300">Cloudflare Pages</span> 
 21 |           的智能图片链接管理系统
 22 |           <a 
 23 |             href="https://github.com/ltxlong/dynamic-image" 
 24 |             target="_blank"
 25 |             class="text-slate-300 hover:text-white transition-colors"
 26 |             title="GitHub 仓库"
 27 |           >
 28 |             <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
 29 |               <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"/>
 30 |             </svg>
 31 |           </a>
 32 |         </p>
 33 | 
 34 |         <!-- 动态按钮 -->
 35 |         <div class="text-center">
 36 |           <router-link 
 37 |             to="/admin" 
 38 |             class="inline-flex items-center px-8 py-3 text-lg font-medium text-white bg-gradient-to-r from-sky-500 to-slate-600 rounded-full hover:from-sky-600 hover:to-slate-700 transition-all duration-300 transform hover:scale-105 hover:shadow-lg shadow-sky-500/20 cursor-pointer"
 39 |           >
 40 |             <span>进入管理页面</span>
 41 |             <svg class="w-5 h-5 ml-2 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 42 |               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
 43 |             </svg>
 44 |           </router-link>
 45 |         </div>
 46 |       </div>
 47 |     </div>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script setup>
 52 | import { onMounted } from 'vue'
 53 | import { tsParticles } from 'tsparticles-engine'
 54 | import { loadFull } from 'tsparticles'
 55 | 
 56 | onMounted(async () => {
 57 |   // 初始化粒子效果
 58 |   await loadFull(tsParticles)
 59 |   await tsParticles.load('particles-js', {
 60 |     particles: {
 61 |       number: { 
 62 |         value: 80, 
 63 |         density: { enable: true, value_area: 800 } 
 64 |       },
 65 |       color: { value: '#ffffff' },
 66 |       shape: { type: 'circle' },
 67 |       opacity: { 
 68 |         value: 0.5, 
 69 |         random: false 
 70 |       },
 71 |       size: { 
 72 |         value: 3, 
 73 |         random: true 
 74 |       },
 75 |       links: {
 76 |         enable: true,
 77 |         distance: 150,
 78 |         color: '#ffffff',
 79 |         opacity: 0.4,
 80 |         width: 1
 81 |       },
 82 |       move: {
 83 |         enable: true,
 84 |         speed: 2,
 85 |         direction: 'none',
 86 |         random: false,
 87 |         straight: false,
 88 |         outModes: 'out',
 89 |         bounce: false
 90 |       }
 91 |     },
 92 |     interactivity: {
 93 |       events: {
 94 |         onHover: { 
 95 |           enable: true, 
 96 |           mode: 'repulse' 
 97 |         },
 98 |         onClick: { 
 99 |           enable: true, 
100 |           mode: 'push' 
101 |         },
102 |         resize: true
103 |       }
104 |     },
105 |     retina_detect: true
106 |   })
107 | })
108 | </script>
109 | 
110 | <style>
111 | /* 移除原有的 z-index 相关样式 */
112 | #particles-js {
113 |   position: absolute;
114 |   width: 100%;
115 |   height: 100%;
116 | }
117 | </style> 
118 | 


--------------------------------------------------------------------------------
/src/components/DateRangePicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="w-full flex flex-col gap-0.5">
  3 |     <VueDatePicker
  4 |       v-model="dateRange"
  5 |       range
  6 |       :enable-time-picker="false"
  7 |       :format="'yyyy-MM-dd'"
  8 |       :dark="isDark"
  9 |       :placeholder="'选择日期范围'"
 10 |       :text-input="true"
 11 |       @update:model-value="handleDateUpdate"
 12 |       :input-class-name="[
 13 |         isDark 
 14 |           ? 'w-full p-0.5 rounded-lg bg-slate-700/50 text-white border border-white/10 focus:border-sky-500 focus:outline-none text-xs text-center' 
 15 |           : 'w-full p-0.5 rounded-lg bg-white text-slate-800 border border-slate-200 focus:border-sky-500 focus:outline-none text-xs text-center'
 16 |       ]"
 17 |     />
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script setup>
 22 | import { ref, watch } from 'vue'
 23 | import VueDatePicker from '@vuepic/vue-datepicker'
 24 | import '@vuepic/vue-datepicker/dist/main.css'
 25 | import { format } from 'date-fns'
 26 | 
 27 | const props = defineProps({
 28 |   initialValue: {
 29 |     type: Array,
 30 |     default: () => null
 31 |   },
 32 |   isDark: {
 33 |     type: Boolean,
 34 |     required: true
 35 |   }
 36 | })
 37 | 
 38 | const dateRange = ref(null)
 39 | const selectedRange = ref(null)
 40 | 
 41 | const emit = defineEmits(['update'])
 42 | 
 43 | // 处理日期更新
 44 | const handleDateUpdate = (dates) => {
 45 | 
 46 |   if (!dates) {
 47 |     selectedRange.value = null
 48 |     emit('update', { holidayTag: null })
 49 |     return
 50 |   }
 51 | 
 52 |   try {
 53 |     // 正常的日期范围处理
 54 |     if (Array.isArray(dates) && dates.length === 2) {
 55 |       // 如果第二个日期为null，则使用第一个日期作为起止日期
 56 |       if (dates[0] && !dates[1]) {
 57 |         const singleDate = format(dates[0], 'yyyy-MM-dd')
 58 |         selectedRange.value = `${singleDate} 至 ${singleDate}`
 59 |         emit('update', { holidayTag: [singleDate, singleDate] })
 60 |         return
 61 |       }
 62 | 
 63 |       // 完整的日期范围
 64 |       if (dates[0] && dates[1]) {
 65 |         const [startDate, endDate] = dates.map(date => format(date, 'yyyy-MM-dd'))
 66 |         selectedRange.value = `${startDate} 至 ${endDate}`
 67 |         emit('update', { holidayTag: [startDate, endDate] })
 68 |         return
 69 |       }
 70 |     }
 71 | 
 72 |     selectedRange.value = null
 73 |     emit('update', { holidayTag: null })
 74 |   } catch (error) {
 75 |     console.error('handleDateUpdate - 日期处理错误:', error)
 76 |     selectedRange.value = null
 77 |     emit('update', { holidayTag: null })
 78 |   }
 79 | }
 80 | 
 81 | // 监听初始值变化
 82 | watch(() => props.initialValue, (newValue) => {
 83 | 
 84 |   if (newValue && Array.isArray(newValue) && newValue.length === 2) {
 85 |     try {
 86 |       // 确保日期格式正确
 87 |       const dates = newValue.map(date => {
 88 |         if (date instanceof Date) return date
 89 |         return new Date(date)
 90 |       })
 91 | 
 92 |       dateRange.value = dates
 93 |       const [startDate, endDate] = dates.map(date => format(date, 'yyyy-MM-dd'))
 94 |       selectedRange.value = `${startDate} 至 ${endDate}`
 95 |     } catch (error) {
 96 |       console.error('日期转换错误:', error)
 97 |       dateRange.value = null
 98 |       selectedRange.value = null
 99 |     }
100 |   } else {
101 |     dateRange.value = null
102 |     selectedRange.value = null
103 |   }
104 | }, { immediate: true, deep: true })
105 | </script>
106 | 
107 | <style>
108 | .dp__input {
109 |   height: 1.125rem !important;
110 |   padding: 0 0.25rem !important;
111 |   font-size: 0.65rem !important;
112 |   line-height: 1rem !important;
113 |   text-align: center !important;
114 |   width: 100% !important;
115 | }
116 | 
117 | .dp__input_wrap {
118 |   width: 100% !important;
119 | }
120 | 
121 | .dp__input_icon {
122 |   right: 0.25rem !important;
123 |   width: 0.5rem !important;
124 |   height: 0.5rem !important;
125 | }
126 | 
127 | .dp__main {
128 |   width: 100% !important;
129 |   font-size: 0.65rem !important;
130 | }
131 | 
132 | .dp__calendar_header {
133 |   padding: 0.125rem !important;
134 |   height: 1rem !important;
135 |   min-height: unset !important;
136 | }
137 | 
138 | .dp__calendar {
139 |   padding: 0.125rem !important;
140 | }
141 | 
142 | .dp__cell_inner {
143 |   padding: 0 !important;
144 |   height: 1rem !important;
145 |   width: 1rem !important;
146 |   font-size: 0.6rem !important;
147 |   margin: 0.0625rem !important;
148 | }
149 | 
150 | .dp__month_year_row {
151 |   padding: 0.125rem !important;
152 |   height: 1rem !important;
153 |   min-height: unset !important;
154 | }
155 | 
156 | .dp__month_year_select {
157 |   height: 1rem !important;
158 |   font-size: 0.6rem !important;
159 |   padding: 0 0.25rem !important;
160 | }
161 | 
162 | .dp__overlay {
163 |   padding: 0.125rem !important;
164 | }
165 | 
166 | .dp__action_buttons {
167 |   padding: 0.125rem !important;
168 |   height: 1rem !important;
169 |   min-height: unset !important;
170 | }
171 | 
172 | .dp__selection_grid_header {
173 |   height: 1rem !important;
174 |   font-size: 0.6rem !important;
175 |   padding: 0.125rem !important;
176 | }
177 | 
178 | .dp__btn {
179 |   font-size: 0.6rem !important;
180 |   padding: 0.125rem 0.25rem !important;
181 |   height: 1rem !important;
182 |   min-height: unset !important;
183 | }
184 | 
185 | .dp__selection_grid {
186 |   font-size: 0.6rem !important;
187 | }
188 | 
189 | .dp__selection_grid_item {
190 |   height: 1rem !important;
191 |   padding: 0.125rem !important;
192 | }
193 | 
194 | .dp__today {
195 |   height: 1rem !important;
196 | }
197 | 
198 | .dp__active_date {
199 |   height: 1rem !important;
200 | }
201 | 
202 | .dp__range_between {
203 |   height: 1rem !important;
204 | }
205 | 
206 | .dp__range_start, .dp__range_end {
207 |   height: 1rem !important;
208 | }
209 | 
210 | .dp__menu {
211 |   min-width: unset !important;
212 |   width: auto !important;
213 |   transform: scale(0.9) !important;
214 |   transform-origin: top left !important;
215 |   position: absolute !important;
216 |   right: auto !important;
217 |   left: 0 !important;
218 |   background: var(--dp-background-color) !important;
219 | }
220 | 
221 | .dp__arrow_top {
222 |   display: none !important;
223 | }
224 | 
225 | .dp__inner_nav {
226 |   height: 1rem !important;
227 |   width: 1rem !important;
228 |   padding: 0.125rem !important;
229 | }
230 | 
231 | .dp__month_year_wrap {
232 |   height: 1rem !important;
233 |   min-height: unset !important;
234 | }
235 | 
236 | .dp__overlay_cell {
237 |   height: 1rem !important;
238 |   font-size: 0.6rem !important;
239 | }
240 | 
241 | .dp__instance_calendar {
242 |   width: auto !important;
243 |   min-width: unset !important;
244 | }
245 | 
246 | .dp__pointer {
247 |   padding: 0.125rem !important;
248 | }
249 | 
250 | .dp__preset_range {
251 |   padding: 0.125rem !important;
252 |   font-size: 0.6rem !important;
253 | }
254 | 
255 | .dp__month_picker_header {
256 |   height: 1rem !important;
257 |   padding: 0.125rem !important;
258 | }
259 | 
260 | .dp__year_picker_header {
261 |   height: 1rem !important;
262 |   padding: 0.125rem !important;
263 | }
264 | 
265 | .dp__overlay_row {
266 |   height: 1rem !important;
267 | }
268 | 
269 | .dp__container {
270 |   width: 100% !important;
271 |   position: relative !important;
272 | }
273 | 
274 | .dp__menu_inner {
275 |   padding: 0.25rem !important;
276 | }
277 | 
278 | .dp__overlay_container {
279 |   width: auto !important;
280 |   position: absolute !important;
281 |   left: 5px !important;
282 | }
283 | 
284 | .dp__selection_preview {
285 |   font-size: 0.6rem !important;
286 |   padding: 0 0.25rem !important;
287 | }
288 | 
289 | .dp__theme_dark {
290 |   --dp-background-color: rgb(30, 41, 59) !important;
291 |   --dp-text-color: #fff !important;
292 |   --dp-hover-color: rgb(51, 65, 85) !important;
293 |   --dp-hover-text-color: #fff !important;
294 |   --dp-hover-icon-color: #fff !important;
295 |   --dp-primary-color: rgb(14, 165, 233) !important;
296 |   --dp-primary-text-color: #fff !important;
297 |   --dp-secondary-color: rgb(51, 65, 85) !important;
298 |   --dp-border-color: rgb(51, 65, 85) !important;
299 |   --dp-menu-border-color: rgb(51, 65, 85) !important;
300 | }
301 | 
302 | .dp__theme_light {
303 |   --dp-background-color: #fff !important;
304 |   --dp-text-color: #212121 !important;
305 |   --dp-hover-color: #f3f3f3 !important;
306 |   --dp-hover-text-color: #212121 !important;
307 |   --dp-hover-icon-color: #959595 !important;
308 |   --dp-primary-color: rgb(14, 165, 233) !important;
309 |   --dp-primary-text-color: #f8f9fa !important;
310 |   --dp-secondary-color: #c0c4cc !important;
311 |   --dp-border-color: #ddd !important;
312 |   --dp-menu-border-color: #ddd !important;
313 | }
314 | </style> 
315 | 


--------------------------------------------------------------------------------
/functions/api/[[route]].js:
--------------------------------------------------------------------------------
  1 | // 添加 CORS 头部的辅助函数
  2 | function addCorsHeaders(response) {
  3 |   const headers = new Headers(response.headers)
  4 |   headers.set('Access-Control-Allow-Origin', '*')
  5 |   headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
  6 |   headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization')
  7 |   
  8 |   return new Response(response.body, {
  9 |     status: response.status,
 10 |     statusText: response.statusText,
 11 |     headers
 12 |   })
 13 | }
 14 | 
 15 | // 检查访问限制
 16 | async function checkAccessRestriction(request, db) {
 17 |   // 获取设置
 18 |   const settings = await db.get('settings', { type: 'json' }) || {}
 19 |   const accessUrls = settings.accessUrls || []
 20 |   
 21 |   // 如果没有设置访问限制，允许访问
 22 |   if (!accessUrls.length) {
 23 |     return null
 24 |   }
 25 |   
 26 |   // 获取请求的 referer
 27 |   const referer = request.headers.get('referer')
 28 |   if (!referer) {
 29 |     return new Response(JSON.stringify({ 
 30 |       success: false, 
 31 |       error: '访问被拒绝' 
 32 |     }), {
 33 |       status: 403,
 34 |       headers: { 'Content-Type': 'application/json' }
 35 |     })
 36 |   }
 37 |   
 38 |   // 检查 referer 是否在允许列表中
 39 |   const refererUrl = new URL(referer)
 40 |   const isAllowed = accessUrls.some(allowedUrl => 
 41 |     refererUrl.hostname.endsWith(allowedUrl.toLowerCase())
 42 |   )
 43 |   
 44 |   if (!isAllowed) {
 45 |     return new Response(JSON.stringify({ 
 46 |       success: false, 
 47 |       error: '访问被拒绝' 
 48 |     }), {
 49 |       status: 403,
 50 |       headers: { 'Content-Type': 'application/json' }
 51 |     })
 52 |   }
 53 |   
 54 |   return null
 55 | }
 56 | 
 57 | export async function onRequest(context) {
 58 |   const { env, request } = context
 59 |   const url = new URL(request.url)
 60 |   
 61 |   // 处理 OPTIONS 请求
 62 |   if (request.method === 'OPTIONS') {
 63 |     return addCorsHeaders(new Response(null, { status: 204 }))
 64 |   }
 65 | 
 66 |   // 检查是否使用 KV 数据库
 67 |   const useKV = !!env.DYNAMIC_IMAGE
 68 |   const db = useKV ? env.DYNAMIC_IMAGE : await connectToDatabase(env.DATABASE_URL)
 69 |   
 70 |   // API 路由处理
 71 |   if (url.pathname === '/api') {
 72 |     // 检查访问限制
 73 |     const accessResponse = await checkAccessRestriction(request, db)
 74 |     if (accessResponse) return addCorsHeaders(accessResponse)
 75 |     
 76 |     return addCorsHeaders(await handleGetLink(db, useKV))
 77 |   }
 78 |   
 79 |   if (url.pathname === '/api/auth') {
 80 |     return addCorsHeaders(await handleAuth(request, env.ADMIN_PASSWORD, db))
 81 |   }
 82 |   
 83 |   if (url.pathname === '/api/settings') {
 84 |     const authResponse = await checkAuth(request, db)
 85 |     if (authResponse) return addCorsHeaders(authResponse)
 86 |     
 87 |     if (request.method === 'POST') {
 88 |       return addCorsHeaders(await handleUpdateSettings(request, db, useKV))
 89 |     }
 90 |     if (request.method === 'GET') {
 91 |       return addCorsHeaders(await handleGetSettings(db, useKV))
 92 |     }
 93 |   }
 94 |   
 95 |   if (url.pathname === '/api/links') {
 96 |     if (request.method === 'GET') {
 97 |       return addCorsHeaders(await handleGetLinks(db, useKV))
 98 |     }
 99 |     if (request.method === 'POST') {
100 |       const authResponse = await checkAuth(request, db)
101 |       if (authResponse) return addCorsHeaders(authResponse)
102 |       return addCorsHeaders(await handleAddLink(request, db, useKV))
103 |     }
104 |   }
105 |   
106 |   if (url.pathname.startsWith('/api/links/')) {
107 |     const authResponse = await checkAuth(request, db)
108 |     if (authResponse) return addCorsHeaders(authResponse)
109 |     
110 |     const id = url.pathname.split('/').pop()
111 |     if (request.method === 'DELETE') {
112 |       return addCorsHeaders(await handleDeleteLink(id, db, useKV))
113 |     }
114 |     if (request.method === 'PUT') {
115 |       return addCorsHeaders(await handleUpdateLink(id, request, db, useKV))
116 |     }
117 |   }
118 |   
119 |   return addCorsHeaders(new Response('Not Found', { status: 404 }))
120 | }
121 | 
122 | async function handleAuth(request, adminPassword, db) {
123 |   try {
124 |     const { password } = await request.json()
125 |     
126 |     if (password === adminPassword) {
127 |       // 生成新的token (使用 UUID v4)
128 |       const token = crypto.randomUUID()
129 |       
130 |       // 保存token
131 |       await db.put('token', token)
132 |       
133 |       return new Response(JSON.stringify({ success: true, token: token }), {
134 |         headers: { 'Content-Type': 'application/json' }
135 |       })
136 |     }
137 |     
138 |     return new Response(JSON.stringify({ 
139 |       success: false, 
140 |       error: '密码错误' 
141 |     }), {
142 |       status: 401,
143 |       headers: { 'Content-Type': 'application/json' }
144 |     })
145 |   } catch (error) {
146 |     return new Response(JSON.stringify({ 
147 |       success: false, 
148 |       error: '请求格式错误' 
149 |     }), {
150 |       status: 400,
151 |       headers: { 'Content-Type': 'application/json' }
152 |     })
153 |   }
154 | }
155 | 
156 | async function handleAddLink(request, db, useKV) {
157 |   try {
158 |     const link = await request.json()
159 |     
160 |     if (useKV) {
161 |       link.id = Date.now().toString()
162 |       // 将单个链接存储为独立的 KV
163 |       await db.put(`link:${link.id}`, JSON.stringify(link))
164 |       
165 |       // 维护一个链接 ID 列表
166 |       let linkIds = await db.get('linkIds', { type: 'json' }) || []
167 |       linkIds.push(link.id)
168 |       await db.put('linkIds', JSON.stringify(linkIds))
169 |       
170 |       return new Response(JSON.stringify(link), {
171 |         headers: { 'Content-Type': 'application/json' }
172 |       })
173 |     } else {
174 |       // 外部数据库实现
175 |       // ...
176 |     }
177 |   } catch (error) {
178 |     return new Response(JSON.stringify({ 
179 |       success: false, 
180 |       error: '添加链接失败' 
181 |     }), {
182 |       status: 500,
183 |       headers: { 'Content-Type': 'application/json' }
184 |     })
185 |   }
186 | }
187 | 
188 | async function handleDeleteLink(id, db, useKV) {
189 |   try {
190 |     if (useKV) {
191 |       // 删除单个链接
192 |       await db.delete(`link:${id}`)
193 |       
194 |       // 更新链接 ID 列表
195 |       let linkIds = await db.get('linkIds', { type: 'json' }) || []
196 |       linkIds = linkIds.filter(linkId => linkId !== id)
197 |       await db.put('linkIds', JSON.stringify(linkIds))
198 |       
199 |       return new Response(JSON.stringify({ success: true }), {
200 |         headers: { 'Content-Type': 'application/json' }
201 |       })
202 |     } else {
203 |       // 外部数据库实现
204 |       // ...
205 |     }
206 |   } catch (error) {
207 |     return new Response(JSON.stringify({ 
208 |       success: false, 
209 |       error: '删除链接失败' 
210 |     }), {
211 |       status: 500,
212 |       headers: { 'Content-Type': 'application/json' }
213 |     })
214 |   }
215 | }
216 | 
217 | async function checkAuth(request, db) {
218 |   const authHeader = request.headers.get('Authorization')
219 |   if (!authHeader || !authHeader.startsWith('Bearer ')) {
220 |     return new Response(JSON.stringify({ 
221 |       success: false, 
222 |       error: '未登录' 
223 |     }), {
224 |       status: 401,
225 |       headers: { 'Content-Type': 'application/json' }
226 |     })
227 |   }
228 | 
229 |   const token = authHeader.split(' ')[1]
230 |   const savedToken = await db.get('token')
231 |   
232 |   if (token !== savedToken) {
233 |     return new Response(JSON.stringify({ 
234 |       success: false, 
235 |       error: 'token无效' 
236 |     }), {
237 |       status: 401,
238 |       headers: { 'Content-Type': 'application/json' }
239 |     })
240 |   }
241 | }
242 | 
243 | // 获取图片内容
244 | async function fetchImage(url) {
245 |   try {
246 |     const response = await fetch(url)
247 |     if (!response.ok) {
248 |       console.error('获取图片失败:', response.status, response.statusText)
249 |       return null
250 |     }
251 | 
252 |     // 保持原始响应，只修改缓存头部
253 |     const headers = new Headers(response.headers)
254 |     headers.set('cache-control', 'public, max-age=86400') // 24小时缓存
255 |     
256 |     return new Response(response.body, {
257 |       status: response.status,
258 |       statusText: response.statusText,
259 |       headers
260 |     })
261 |   } catch (error) {
262 |     console.error('获取图片失败:', error)
263 |     return null
264 |   }
265 | }
266 | 
267 | async function handleGetLink(db, useKV) {
268 |   try {
269 |     if (useKV) {
270 |       // 获取所有链接 ID
271 |       const linkIds = await db.get('linkIds', { type: 'json' }) || []
272 |       
273 |       // 获取所有链接详情
274 |       const links = await Promise.all(
275 |         linkIds.map(async id => {
276 |           const linkData = await db.get(`link:${id}`, { type: 'json' })
277 |           return linkData
278 |         })
279 |       )
280 |       
281 |       // 获取设置
282 |       const settings = await db.get('settings', { type: 'json' }) || { 
283 |         displayMode: 1,
284 |         accessUrls: []
285 |       }
286 | 
287 |       // 选择链接
288 |       const selectedUrl = selectLink(links.filter(Boolean), settings)
289 |       if (!selectedUrl) {
290 |         return new Response('', { status: 404 })
291 |       }
292 | 
293 |       // 返回 302 重定向
294 |       return new Response(null, {
295 |         status: 302,
296 |         headers: {
297 |           'Location': selectedUrl,
298 |           'Cache-Control': 'no-cache'
299 |         }
300 |       })
301 |     } else {
302 |       // 外部数据库实现...
303 |       const links = await db.query('SELECT * FROM links')
304 |       const settings = await db.query('SELECT * FROM settings LIMIT 1')
305 |       const selectedUrl = selectLink(links, settings[0])
306 |       if (!selectedUrl) {
307 |         return new Response('', { status: 404 })
308 |       }
309 | 
310 |       // 返回 302 重定向
311 |       return new Response(null, {
312 |         status: 302,
313 |         headers: {
314 |           'Location': selectedUrl,
315 |           'Cache-Control': 'no-cache'
316 |         }
317 |       })
318 |     }
319 |   } catch (error) {
320 |     return new Response('获取链接失败', { status: 500 })
321 |   }
322 | }
323 | 
324 | function selectLink(links, settings) {
325 |   if (!links || !links.length) return ''
326 |   
327 |   // 只选择激活状态的链接
328 |   let filteredLinks = links.filter(link => link.active)
329 |   if (!filteredLinks.length) return ''
330 |   
331 |   // 如果是随机模式或没有设置模式，直接随机返回
332 |   if (!settings.displayMode || settings.displayMode === 1) {
333 |     return getRandomLink(filteredLinks)
334 |   }
335 | 
336 |   // 标签模式
337 |   if (settings.displayMode === 2) {
338 |     const now = new Date()
339 |     let selectedLinks = []
340 | 
341 |     // 1. 先查找日标签
342 |     selectedLinks = getDayLinks(filteredLinks, now)
343 |     
344 |     if (selectedLinks.length) {
345 |       return getRandomLink(selectedLinks)
346 |     }
347 | 
348 |     // 2. 查找周标签
349 |     selectedLinks = getWeekLinks(filteredLinks, now)
350 |     
351 |     if (selectedLinks.length) {
352 |       return getRandomLink(selectedLinks)
353 |     }
354 | 
355 |     // 3. 查找月标签
356 |     selectedLinks = getMonthLinks(filteredLinks, now)
357 |     
358 |     if (selectedLinks.length) {
359 |       return getRandomLink(selectedLinks)
360 |     }
361 | 
362 |     // 4. 如果都没有匹配的标签，返回随机链接
363 |     return getRandomLink(filteredLinks)
364 |   }
365 | }
366 | 
367 | // 获取日标签匹配的链接
368 | function getDayLinks(links, now) {
369 |   const currentDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
370 |   const timestamp = currentDate.getTime()
371 | 
372 |   return links.filter(link => {
373 |     if (!link.holidayTag) return false
374 |     // 如果holidayTag是数组（包含年份），直接比较时间戳
375 |     if (Array.isArray(link.holidayTag)) {
376 |       if (link.holidayTag.length !== 2) return false
377 |       const startDate = new Date(link.holidayTag[0])
378 |       const endDate = new Date(link.holidayTag[1])
379 |       return timestamp >= startDate.getTime() && timestamp <= endDate.getTime()
380 |     }
381 |     // 向后兼容：如果是单个日期，保持原有逻辑
382 |     const tagDate = new Date(link.holidayTag)
383 |     const linkDate = new Date(now.getFullYear(), tagDate.getMonth(), tagDate.getDate())
384 |     return linkDate.getTime() === timestamp
385 |   })
386 | }
387 | 
388 | // 获取周标签匹配的链接
389 | function getWeekLinks(links, now) {
390 |   const weekDay = now.getDay()
391 |   
392 |   return links.filter(link => 
393 |     Array.isArray(link.weekTags) && link.weekTags.includes(weekDay)
394 |   )
395 | }
396 | 
397 | // 获取月标签匹配的链接
398 | function getMonthLinks(links, now) {
399 |   const month = now.getMonth() + 1
400 |   
401 |   return links.filter(link => 
402 |     Array.isArray(link.monthTags) && link.monthTags.includes(month)
403 |   )
404 | }
405 | 
406 | // 从链接数组中随机选择一个链接
407 | function getRandomLink(links) {
408 |   if (!links.length) return ''
409 |   return links[Math.floor(Math.random() * links.length)].url
410 | }
411 | 
412 | async function handleGetLinks(db, useKV) {
413 |   try {
414 |     if (useKV) {
415 |       // 获取所有链接 ID
416 |       const linkIds = await db.get('linkIds', { type: 'json' }) || []
417 |       
418 |       // 获取所有链接详情
419 |       const links = await Promise.all(
420 |         linkIds.map(async id => {
421 |           const linkData = await db.get(`link:${id}`, { type: 'json' })
422 |           return linkData
423 |         })
424 |       )
425 |       
426 |       return new Response(JSON.stringify(links.filter(Boolean)), {
427 |         headers: { 'Content-Type': 'application/json' }
428 |       })
429 |     } else {
430 |       // 外部数据库实现
431 |       const links = await db.query('SELECT * FROM links')
432 |       return new Response(JSON.stringify(links), {
433 |         headers: { 'Content-Type': 'application/json' }
434 |       })
435 |     }
436 |   } catch (error) {
437 |     return new Response(JSON.stringify({ 
438 |       success: false, 
439 |       error: '获取链接列表失败' 
440 |     }), {
441 |       status: 500,
442 |       headers: { 'Content-Type': 'application/json' }
443 |     })
444 |   }
445 | }
446 | 
447 | async function handleUpdateLink(id, request, db, useKV) {
448 |   try {
449 |     const link = await request.json()
450 |     
451 |     if (useKV) {
452 |       await db.put(`link:${id}`, JSON.stringify(link))
453 |       return new Response(JSON.stringify(link), {
454 |         headers: { 'Content-Type': 'application/json' }
455 |       })
456 |     } else {
457 |       // 外部数据库实现...
458 |     }
459 |   } catch (error) {
460 |     return new Response(JSON.stringify({ 
461 |       success: false, 
462 |       error: '更新链接失败' 
463 |     }), {
464 |       status: 500,
465 |       headers: { 'Content-Type': 'application/json' }
466 |     })
467 |   }
468 | }
469 | 
470 | async function handleUpdateSettings(request, db, useKV) {
471 |   try {
472 |     const data = await request.json()
473 |     let settings = await db.get('settings', { type: 'json' }) || {}
474 |     
475 |     // 更新显示模式
476 |     if (data.displayMode !== undefined) {
477 |       settings.displayMode = data.displayMode
478 |     }
479 |     
480 |     // 更新访问限制URL
481 |     if (data.accessUrls !== undefined) {
482 |       settings.accessUrls = data.accessUrls
483 |     }
484 |     
485 |     await db.put('settings', JSON.stringify(settings))
486 |     
487 |     return new Response(JSON.stringify({ 
488 |       success: true,
489 |       settings
490 |     }), {
491 |       headers: { 'Content-Type': 'application/json' }
492 |     })
493 |   } catch (error) {
494 |     return new Response(JSON.stringify({ 
495 |       success: false, 
496 |       error: '更新设置失败' 
497 |     }), {
498 |       status: 500,
499 |       headers: { 'Content-Type': 'application/json' }
500 |     })
501 |   }
502 | }
503 | 
504 | async function handleGetSettings(db, useKV) {
505 |   try {
506 |     const settings = await db.get('settings', { type: 'json' }) || {
507 |       displayMode: 1,
508 |       accessUrls: []
509 |     }
510 |     
511 |     return new Response(JSON.stringify(settings), {
512 |       headers: { 'Content-Type': 'application/json' }
513 |     })
514 |   } catch (error) {
515 |     return new Response(JSON.stringify({ 
516 |       success: false, 
517 |       error: '获取设置失败' 
518 |     }), {
519 |       status: 500,
520 |       headers: { 'Content-Type': 'application/json' }
521 |     })
522 |   }
523 | } 
524 | 


--------------------------------------------------------------------------------
/src/views/Admin.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <div class="min-h-screen"
   3 |     :class="[
   4 |       isDark 
   5 |         ? 'bg-gradient-to-br from-slate-800 to-slate-900' 
   6 |         : 'bg-gradient-to-br from-slate-100 to-white'
   7 |     ]"
   8 |   >
   9 |     <!-- 装饰光晕 -->
  10 |     <div class="fixed top-1/3 left-1/2 -translate-x-1/2 w-96 h-96 rounded-full mix-blend-soft-light filter blur-3xl z-0"
  11 |       :class="[isDark ? 'bg-sky-500/20' : 'bg-sky-300/20']"
  12 |     ></div>
  13 | 
  14 |     <!-- 顶部导航栏 -->
  15 |     <nav class="relative z-10 border-b"
  16 |       :class="[
  17 |         isDark 
  18 |           ? 'bg-white/5 backdrop-blur-lg border-white/10' 
  19 |           : 'bg-white/70 backdrop-blur-lg border-slate-200'
  20 |       ]"
  21 |     >
  22 |       <div class="container mx-auto px-4 py-4">
  23 |         <div class="flex justify-between items-center">
  24 |           <h1 class="text-2xl font-bold tracking-wide"
  25 |             :class="[isDark ? 'text-white' : 'text-slate-800']"
  26 |           >
  27 |             图片链接管理系统
  28 |           </h1>
  29 |           
  30 |           <div class="flex items-center gap-4">
  31 |             <!-- 主题切换开关 -->
  32 |             <button 
  33 |               @click="toggleTheme"
  34 |               class="relative inline-flex h-7 w-12 items-center rounded-full"
  35 |               :class="[isDark ? 'bg-sky-600' : 'bg-slate-200']"
  36 |             >
  37 |               <span class="sr-only">切换主题</span>
  38 |               <!-- 滑块 -->
  39 |               <span
  40 |                 class="absolute left-0.5 inline-block h-6 w-6 transform rounded-full bg-white shadow-sm"
  41 |                 :class="[isDark ? 'translate-x-5' : 'translate-x-0']"
  42 |               ></span>
  43 |               <!-- 太阳图标 -->
  44 |               <svg 
  45 |                 class="absolute left-0.5 w-6 h-6 p-1"
  46 |                 :class="[isDark ? 'opacity-0' : 'opacity-100 text-amber-500']"
  47 |                 fill="none" 
  48 |                 stroke="currentColor" 
  49 |                 viewBox="0 0 24 24"
  50 |               >
  51 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
  52 |               </svg>
  53 |               <!-- 月亮图标 -->
  54 |               <svg 
  55 |                 class="absolute right-0.5 w-6 h-6 p-1"
  56 |                 :class="[isDark ? 'opacity-100 text-slate-800' : 'opacity-0']"
  57 |                 fill="none" 
  58 |                 stroke="currentColor" 
  59 |                 viewBox="0 0 24 24"
  60 |               >
  61 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
  62 |               </svg>
  63 |             </button>
  64 | 
  65 |             <!-- 退出登录按钮 -->
  66 |             <button 
  67 |               v-if="isAuthenticated"
  68 |               @click="logout"
  69 |               class="flex items-center gap-2 px-4 py-2 rounded-lg"
  70 |               :class="[
  71 |                 isDark 
  72 |                   ? 'bg-white/10 backdrop-blur-lg border border-white/10 text-white hover:bg-white/20' 
  73 |                   : 'bg-slate-100 border border-slate-200 text-slate-600 hover:bg-slate-200'
  74 |               ]"
  75 |             >
  76 |               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  77 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
  78 |               </svg>
  79 |               退出登录
  80 |             </button>
  81 |           </div>
  82 |         </div>
  83 |       </div>
  84 |     </nav>
  85 | 
  86 |     <!-- 主要内容区域 -->
  87 |     <div class="relative z-10 container mx-auto px-4 py-8">
  88 |       <!-- 登录界面 -->
  89 |       <div v-if="!isAuthenticated" 
  90 |         class="max-w-md mx-auto mt-20 relative"
  91 |       >
  92 |         <!-- 登录卡片 -->
  93 |         <div class="backdrop-blur-lg rounded-3xl shadow-2xl border overflow-hidden"
  94 |           :class="[
  95 |             isDark 
  96 |               ? 'bg-white/5 border-white/10' 
  97 |               : 'bg-white/80 border-slate-200'
  98 |           ]"
  99 |         >
 100 |           <!-- 登录标题区域 -->
 101 |           <div class="p-8 text-center relative">
 102 |             <div class="absolute inset-0 bg-gradient-to-b"
 103 |               :class="[isDark ? 'from-sky-500/20' : 'from-sky-500/10']"
 104 |             ></div>
 105 |             <div class="relative">
 106 |               <h2 class="text-3xl font-bold"
 107 |                 :class="[isDark ? 'text-white' : 'text-slate-800']"
 108 |               >
 109 |                 管理员登录
 110 |               </h2>
 111 |             </div>
 112 |           </div>
 113 | 
 114 |           <!-- 登录表单区域 -->
 115 |           <div class="p-8 pt-4">
 116 |             <div class="space-y-6">
 117 |               <!-- 密码输入框 -->
 118 |               <div class="relative">
 119 |                 <input 
 120 |                   type="password" 
 121 |                   v-model="password"
 122 |                   @keyup.enter="login"
 123 |                   class="w-full px-4 py-3 rounded-lg"
 124 |                   :class="[
 125 |                     isDark 
 126 |                       ? 'bg-slate-800/50 text-white placeholder-slate-400 border border-white/10 focus:border-sky-500 focus:outline-none' 
 127 |                       : 'bg-white text-slate-800 placeholder-slate-400 border border-slate-200 focus:border-sky-500 focus:outline-none'
 128 |                   ]"
 129 |                   placeholder="请输入密码"
 130 |                 >
 131 |               </div>
 132 | 
 133 |               <!-- 登录按钮 -->
 134 |               <button 
 135 |                 @click="login"
 136 |                 class="w-full py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-sky-500/50 shadow-lg shadow-sky-500/20 flex items-center justify-center gap-2"
 137 |                 :class="[
 138 |                   isDark 
 139 |                     ? 'bg-gradient-to-r from-sky-500 to-slate-600 text-white hover:from-sky-600 hover:to-slate-700'
 140 |                     : 'bg-gradient-to-r from-sky-400 to-blue-500 text-white hover:from-sky-500 hover:to-blue-600'
 141 |                 ]"
 142 |               >
 143 |                 登录
 144 |               </button>
 145 |             </div>
 146 |           </div>
 147 |         </div>
 148 |       </div>
 149 | 
 150 |       <!-- 其他内容保持不变 -->
 151 |       <div v-else class="space-y-6">
 152 |         <!-- 显示模式设置卡片 -->
 153 |         <div class="rounded-lg shadow-sm overflow-hidden"
 154 |           :class="[
 155 |             isDark 
 156 |               ? 'bg-slate-800/50 border border-white/10' 
 157 |               : 'bg-white border border-slate-200'
 158 |           ]"
 159 |         >
 160 |           <div class="p-6">
 161 |             <div class="flex items-center">
 162 |               <div class="flex items-center gap-2 w-32">
 163 |                 <svg class="w-5 h-5" 
 164 |                   :class="[isDark ? 'text-slate-400' : 'text-gray-500']" 
 165 |                   fill="none" 
 166 |                   stroke="currentColor" 
 167 |                   viewBox="0 0 24 24"
 168 |                 >
 169 |                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
 170 |                 </svg>
 171 |                 <h2 class="text-lg font-semibold"
 172 |                   :class="[isDark ? 'text-white' : 'text-slate-800']"
 173 |                 >
 174 |                   显示模式
 175 |                 </h2>
 176 |               </div>
 177 |               <div class="flex-1 flex justify-center items-center gap-4">
 178 |                 <div class="relative group" style="z-index: 9999;">
 179 |                   <svg class="w-5 h-5 cursor-help relative"
 180 |                     :class="[isDark ? 'text-slate-400' : 'text-gray-500']" 
 181 |                     fill="none" 
 182 |                     stroke="currentColor" 
 183 |                     viewBox="0 0 24 24"
 184 |                     ref="helpIcon"
 185 |                   >
 186 |                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
 187 |                   </svg>
 188 |                   <!-- 提示弹窗 -->
 189 |                   <div class="fixed w-64 p-4 rounded-lg shadow-xl invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-200"
 190 |                     style="z-index: 10000;"
 191 |                     :style="{
 192 |                       top: helpIconPosition.bottom + 8 + 'px',
 193 |                       left: helpIconPosition.left + 'px'
 194 |                     }"
 195 |                     :class="[
 196 |                       isDark 
 197 |                         ? 'bg-slate-700 border border-white/10' 
 198 |                         : 'bg-white border border-slate-200'
 199 |                     ]"
 200 |                   >
 201 |                     <div class="relative">
 202 |                       <div class="space-y-2">
 203 |                         <div>
 204 |                           <span class="font-medium"
 205 |                             :class="[isDark ? 'text-white' : 'text-slate-800']"
 206 |                           >随机模式：</span>
 207 |                         </div>
 208 |                         <div>
 209 |                           <span :class="[isDark ? 'text-slate-300' : 'text-slate-600']">所有链接随机返回一条</span>
 210 |                         </div>
 211 |                         <div>
 212 |                           <span class="font-medium"
 213 |                             :class="[isDark ? 'text-white' : 'text-slate-800']"
 214 |                           >标签模式：优先级</span>
 215 |                         </div>
 216 |                         <div>
 217 |                           <span :class="[isDark ? 'text-slate-300' : 'text-slate-600']">日标签>周标签>月标签</span>
 218 |                         </div>
 219 |                         <div :class="[isDark ? 'text-slate-400' : 'text-slate-500']" class="text-sm">
 220 |                           如果有多个url有相同的标签，
 221 |                         </div>
 222 |                         <div :class="[isDark ? 'text-slate-400' : 'text-slate-500']" class="text-sm">
 223 |                           那么这些链接随机返回一条
 224 |                         </div>
 225 |                       </div>
 226 |                     </div>
 227 |                   </div>
 228 |                 </div>
 229 |                 <select 
 230 |                   v-model="displayMode"
 231 |                   class="w-[30%] pl-2.5 py-2.5 rounded-lg text-center"
 232 |                   :class="[
 233 |                     isDark 
 234 |                       ? 'bg-slate-800/50 text-white border border-white/10 focus:border-sky-500 focus:outline-none' 
 235 |                       : 'bg-white text-slate-800 border border-slate-200 focus:border-sky-500 focus:outline-none'
 236 |                   ]"
 237 |                 >
 238 |                   <option value="1" class="text-center">随机模式</option>
 239 |                   <option value="2" class="text-center">标签模式</option>
 240 |                 </select>
 241 |                 <button 
 242 |                   @click="updateMode"
 243 |                   class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center gap-2"
 244 |                   style="z-index: 1;"
 245 |                 >
 246 |                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 247 |                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
 248 |                   </svg>
 249 |                   保存设置
 250 |                 </button>
 251 |                 <button 
 252 |                   @click="showAccessDialog = true"
 253 |                   class="px-4 py-2 bg-amber-500 text-white rounded-lg hover:bg-amber-600 flex items-center gap-2 ml-auto"
 254 |                 >
 255 |                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 256 |                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
 257 |                   </svg>
 258 |                   限制访问
 259 |                 </button>
 260 |               </div>
 261 |             </div>
 262 |           </div>
 263 |         </div>
 264 | 
 265 |         <!-- 链接列表卡片 -->
 266 |         <div class="rounded-lg shadow-sm overflow-hidden"
 267 |           :class="[
 268 |             isDark 
 269 |               ? 'bg-slate-800/50 border border-white/10' 
 270 |               : 'bg-white border border-slate-200'
 271 |           ]"
 272 |         >
 273 |           <div class="p-6">
 274 |             <!-- 标题和添加按钮 -->
 275 |             <div class="flex justify-between items-center mb-6">
 276 |               <div class="flex items-center gap-2">
 277 |                 <svg class="w-5 h-5" 
 278 |                   :class="[isDark ? 'text-slate-400' : 'text-gray-500']" 
 279 |                   fill="none" 
 280 |                   stroke="currentColor" 
 281 |                   viewBox="0 0 24 24"
 282 |                 >
 283 |                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
 284 |                 </svg>
 285 |                 <h2 class="text-lg font-semibold"
 286 |                   :class="[isDark ? 'text-white' : 'text-slate-800']"
 287 |                 >
 288 |                   现有链接
 289 |                 </h2>
 290 |               </div>
 291 |               <button 
 292 |                 @click="showAddDialog = true"
 293 |                 class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center gap-2"
 294 |               >
 295 |                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 296 |                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
 297 |                 </svg>
 298 |                 新增链接
 299 |               </button>
 300 |             </div>
 301 | 
 302 |             <!-- 搜索和过滤 -->
 303 |             <div class="flex gap-4 mb-6">
 304 |               <div class="flex-1 relative">
 305 |                 <svg class="w-5 h-5 text-gray-400 absolute left-2 top-1/2 transform -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 306 |                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
 307 |                 </svg>
 308 |                 <input 
 309 |                   v-model="searchQuery"
 310 |                   class="w-full pl-9 px-2.5 py-2.5 rounded-lg"
 311 |                   :class="[
 312 |                     isDark 
 313 |                       ? 'bg-slate-800/50 text-white placeholder-slate-400 border border-white/10 focus:border-sky-500 focus:outline-none' 
 314 |                       : 'bg-white text-slate-800 placeholder-slate-400 border border-slate-200 focus:border-sky-500 focus:outline-none'
 315 |                   ]"
 316 |                   placeholder="通过链接的【说明】来过滤..."
 317 |                 >
 318 |               </div>
 319 |               <select 
 320 |                 v-model="filterType"
 321 |                 class="w-40 pl-2.5 py-2.5 rounded-lg text-center"
 322 |                 :class="[
 323 |                   isDark 
 324 |                     ? 'bg-slate-800/50 text-white border border-white/10 focus:border-sky-500 focus:outline-none' 
 325 |                     : 'bg-white text-slate-800 border border-slate-200 focus:border-sky-500 focus:outline-none'
 326 |                 ]"
 327 |               >
 328 |                 <option value="all" class="text-center">全部的</option>
 329 |                 <option value="active" class="text-center">已激活</option>
 330 |                 <option value="inactive" class="text-center">已停用</option>
 331 |               </select>
 332 |             </div>
 333 | 
 334 |             <!-- 表格部分 -->
 335 |             <table class="min-w-full divide-y"
 336 |               :class="[
 337 |                 isDark 
 338 |                   ? 'divide-white/10' 
 339 |                   : 'divide-gray-200'
 340 |               ]"
 341 |             >
 342 |               <thead :class="[isDark ? 'bg-slate-800/30' : 'bg-gray-50']">
 343 |                 <tr>
 344 |                   <th scope="col" class="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider"
 345 |                     :class="[isDark ? 'text-slate-300' : 'text-gray-500']"
 346 |                   >
 347 |                     状态
 348 |                   </th>
 349 |                   <th scope="col" class="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider"
 350 |                     :class="[isDark ? 'text-slate-300' : 'text-gray-500']"
 351 |                   >
 352 |                     预览
 353 |                   </th>
 354 |                   <th scope="col" class="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider"
 355 |                     :class="[isDark ? 'text-slate-300' : 'text-gray-500']"
 356 |                   >
 357 |                     链接
 358 |                   </th>
 359 |                   <th scope="col" class="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider"
 360 |                     :class="[isDark ? 'text-slate-300' : 'text-gray-500']"
 361 |                   >
 362 |                     说明
 363 |                   </th>
 364 |                   <th scope="col" class="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider"
 365 |                     :class="[isDark ? 'text-slate-300' : 'text-gray-500']"
 366 |                   >
 367 |                     月标签
 368 |                   </th>
 369 |                   <th scope="col" class="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider"
 370 |                     :class="[isDark ? 'text-slate-300' : 'text-gray-500']"
 371 |                   >
 372 |                     周标签
 373 |                   </th>
 374 |                   <th scope="col" class="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider"
 375 |                     :class="[isDark ? 'text-slate-300' : 'text-gray-500']"
 376 |                   >
 377 |                     日标签
 378 |                   </th>
 379 |                   <th scope="col" class="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider"
 380 |                     :class="[isDark ? 'text-slate-300' : 'text-gray-500']"
 381 |                   >
 382 |                     操作
 383 |                   </th>
 384 |                 </tr>
 385 |               </thead>
 386 |               <tbody class="divide-y"
 387 |                 :class="[
 388 |                   isDark 
 389 |                     ? 'divide-white/10' 
 390 |                     : 'divide-gray-200'
 391 |                 ]"
 392 |               >
 393 |                 <tr v-for="link in filteredLinks" 
 394 |                   :key="link.id"
 395 |                   class=""
 396 |                   :class="[
 397 |                     isDark 
 398 |                       ? 'hover:bg-slate-700/50 text-slate-300' 
 399 |                       : 'hover:bg-gray-50 text-gray-600'
 400 |                   ]"
 401 |                 >
 402 |                   <!-- 状态列 -->
 403 |                   <td class="px-6 py-4 whitespace-nowrap">
 404 |                     <div class="flex items-center justify-center">
 405 |                       <button 
 406 |                         @click="toggleLinkStatus(link.id)"
 407 |                         class="relative inline-flex items-center h-6 rounded-full w-11 focus:outline-none shrink-0"
 408 |                         :class="link.active ? 'bg-green-500' : 'bg-gray-300'"
 409 |                       >
 410 |                         <span class="sr-only">切换状态</span>
 411 |                         <span 
 412 |                           class="inline-block w-4 h-4 transform bg-white rounded-full transition-transform duration-200 ease-in-out"
 413 |                           :class="link.active ? 'translate-x-6' : 'translate-x-1'"
 414 |                         ></span>
 415 |                       </button>
 416 |                       <span 
 417 |                         class="ml-2 text-sm whitespace-nowrap"
 418 |                         :class="link.active ? 'text-green-600' : 'text-gray-500'"
 419 |                       >
 420 |                         {{ link.active ? '已激活' : '已停用' }}
 421 |                       </span>
 422 |                     </div>
 423 |                   </td>
 424 | 
 425 |                   <!-- 预览列 -->
 426 |                   <td class="px-6 py-4">
 427 |                     <div class="flex justify-center">
 428 |                       <div class="w-20 h-20 relative group">
 429 |                         <img 
 430 |                           :src="link.url" 
 431 |                           class="object-cover w-full h-full rounded cursor-pointer"
 432 |                           @error="handleImageError($event, link.id)"
 433 |                           @click="previewImage = link.url"
 434 |                           alt="预览图"
 435 |                         >
 436 |                         <!-- 悬停时显示的放大图标 -->
 437 |                         <div 
 438 |                           class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition-all duration-200"
 439 |                           @click="previewImage = link.url"
 440 |                         >
 441 |                           <svg 
 442 |                             class="w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200" 
 443 |                             fill="none" 
 444 |                             stroke="currentColor" 
 445 |                             viewBox="0 0 24 24"
 446 |                           >
 447 |                             <path 
 448 |                               stroke-linecap="round" 
 449 |                               stroke-linejoin="round" 
 450 |                               stroke-width="2" 
 451 |                               d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"
 452 |                             />
 453 |                           </svg>
 454 |                         </div>
 455 |                         <div 
 456 |                           v-if="imageErrors[link.id]" 
 457 |                           class="absolute inset-0 flex items-center justify-center bg-gray-100 rounded"
 458 |                         >
 459 |                           <span class="text-xs text-gray-500">加载失败</span>
 460 |                         </div>
 461 |                       </div>
 462 |                     </div>
 463 |                   </td>
 464 | 
 465 |                   <!-- 链接列 -->
 466 |                   <td class="px-6 py-4">
 467 |                     <div class="flex justify-center">
 468 |                       <div class="truncate w-32">{{ link.url }}</div>
 469 |                     </div>
 470 |                   </td>
 471 | 
 472 |                   <!-- 说明列 -->
 473 |                   <td class="px-6 py-4">
 474 |                     <div class="relative group" :data-link-id="link.id">
 475 |                       <div class="truncate w-32 cursor-help mx-auto">
 476 |                         {{ link.description }}
 477 |                       </div>
 478 |                       <!-- 悬停提示框 -->
 479 |                       <div 
 480 |                         class="absolute z-50 w-80 bg-white rounded-lg shadow-xl border border-gray-200 
 481 |                           invisible opacity-0 transition-all duration-200"
 482 |                         :class="[
 483 |                           tooltipPositions[link.id] 
 484 |                             ? 'bottom-full mb-2' 
 485 |                             : 'top-full mt-2'
 486 |                         ]"
 487 |                       >
 488 |                         <!-- 小箭头 -->
 489 |                         <div 
 490 |                           class="absolute w-3 h-3 bg-white border border-gray-200 transform rotate-45"
 491 |                           :class="[
 492 |                             tooltipPositions[link.id]
 493 |                               ? 'bottom-[-6px] border-r border-b left-8' 
 494 |                               : 'top-[-6px] border-l border-t left-8'
 495 |                           ]"
 496 |                         ></div>
 497 |                         <!-- 内容容器 -->
 498 |                         <div class="relative bg-white rounded-lg overflow-hidden">
 499 |                           <!-- 内容 -->
 500 |                           <div class="p-4 text-sm text-gray-600 whitespace-pre-wrap break-words">
 501 |                             {{ link.description }}
 502 |                           </div>
 503 |                         </div>
 504 |                       </div>
 505 |                     </div>
 506 |                   </td>
 507 | 
 508 |                   <!-- 月标签列 -->
 509 |                   <td class="px-6 py-4">
 510 |                     <div class="flex flex-col gap-1 items-center">
 511 |                       <span 
 512 |                         v-for="month in link.monthTags" 
 513 |                         :key="month"
 514 |                         class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 w-16 justify-center"
 515 |                       >
 516 |                         {{ month }}月
 517 |                       </span>
 518 |                       <span v-if="!link.monthTags?.length" class="text-gray-400 text-xs">无</span>
 519 |                     </div>
 520 |                   </td>
 521 | 
 522 |                   <!-- 周标签列 -->
 523 |                   <td class="px-6 py-4">
 524 |                     <div class="flex flex-col gap-1 items-center">
 525 |                       <span 
 526 |                         v-for="day in link.weekTags" 
 527 |                         :key="day"
 528 |                         class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 justify-center whitespace-nowrap"
 529 |                       >
 530 |                         星期{{ ['日', '一', '二', '三', '四', '五', '六'][day % 7] }}
 531 |                       </span>
 532 |                       <span v-if="!link.weekTags?.length" class="text-gray-400 text-xs">无</span>
 533 |                     </div>
 534 |                   </td>
 535 | 
 536 |                   <!-- 日标签列 -->
 537 |                   <td class="px-6 py-4 text-center w-40">
 538 |                     <div class="w-36 mx-auto whitespace-pre-line text-xs">
 539 |                       <template v-if="link.holidayTag && Array.isArray(link.holidayTag)">
 540 |                         <span class="inline-flex items-center px-2.5 py-1 rounded-lg font-medium"
 541 |                           :class="['bg-red-100 text-red-800']"
 542 |                         >
 543 |                           {{ link.holidayTag[0] === link.holidayTag[1] 
 544 |                             ? link.holidayTag[0] 
 545 |                             : `${link.holidayTag[0]}\n至\n${link.holidayTag[1]}` 
 546 |                           }}
 547 |                         </span>
 548 |                       </template>
 549 |                       <span v-else class="text-gray-400 text-xs">无</span>
 550 |                     </div>
 551 |                   </td>
 552 | 
 553 |                   <!-- 操作列 -->
 554 |                   <td class="px-6 py-4 w-32">
 555 |                     <div class="flex flex-col items-center space-y-2">
 556 |                       <button
 557 |                         @click="viewLink(link)"
 558 |                         class="inline-flex items-center justify-center px-3 py-1.5 w-24 rounded-md text-sm font-medium"
 559 |                         :class="[
 560 |                           isDark 
 561 |                             ? 'bg-slate-700/50 text-sky-400 hover:bg-slate-600/50' 
 562 |                             : 'bg-sky-50 text-sky-600 hover:bg-sky-100'
 563 |                         ]"
 564 |                       >
 565 |                         <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 566 |                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
 567 |                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
 568 |                         </svg>
 569 |                         查看
 570 |                       </button>
 571 | 
 572 |                       <button
 573 |                         @click="editLink(link)"
 574 |                         class="inline-flex items-center justify-center px-3 py-1.5 w-24 rounded-md text-sm font-medium"
 575 |                         :class="[
 576 |                           isDark 
 577 |                             ? 'bg-slate-700/50 text-emerald-400 hover:bg-slate-600/50' 
 578 |                             : 'bg-emerald-50 text-emerald-600 hover:bg-emerald-100'
 579 |                         ]"
 580 |                       >
 581 |                         <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 582 |                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
 583 |                         </svg>
 584 |                         编辑
 585 |                       </button>
 586 | 
 587 |                       <button
 588 |                         @click="confirmDeleteLink(link)"
 589 |                         class="inline-flex items-center justify-center px-3 py-1.5 w-24 rounded-md text-sm font-medium"
 590 |                         :class="[
 591 |                           isDark 
 592 |                             ? 'bg-slate-700/50 text-rose-400 hover:bg-slate-600/50' 
 593 |                             : 'bg-rose-50 text-rose-600 hover:bg-rose-100'
 594 |                         ]"
 595 |                       >
 596 |                         <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 597 |                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
 598 |                         </svg>
 599 |                         删除
 600 |                       </button>
 601 |                     </div>
 602 |                   </td>
 603 |                 </tr>
 604 |               </tbody>
 605 |             </table>
 606 |           </div>
 607 |         </div>
 608 |       </div>
 609 |     </div>
 610 | 
 611 |     <!-- 图片预览弹窗 -->
 612 |     <div v-if="previewImage" 
 613 |       class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"
 614 |       @click.self="previewImage = null"
 615 |     >
 616 |       <div class="relative max-w-4xl w-full">
 617 |         <!-- 关闭按钮 -->
 618 |         <button 
 619 |           @click="previewImage = null"
 620 |           class="absolute -top-10 right-0 text-white hover:text-gray-300"
 621 |         >
 622 |           <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 623 |             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 624 |           </svg>
 625 |         </button>
 626 |         <!-- 图片容器 -->
 627 |         <div class="bg-white rounded-lg overflow-hidden">
 628 |           <img 
 629 |             :src="previewImage" 
 630 |             class="w-full h-auto"
 631 |             alt="预览图"
 632 |           >
 633 |         </div>
 634 |       </div>
 635 |     </div>
 636 | 
 637 |     <!-- 查看链接对话框 -->
 638 |     <div v-if="showViewDialog" 
 639 |       class="fixed inset-0 z-[70] overflow-y-auto"
 640 |     >
 641 |       <!-- 遮罩层 -->
 642 |       <div 
 643 |         class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
 644 |         @click="showViewDialog = false"
 645 |       ></div>
 646 | 
 647 |       <div class="flex items-center justify-center min-h-screen p-4">
 648 |         <div class="relative max-w-2xl w-full rounded-2xl shadow-xl overflow-hidden max-h-[calc(100vh-2rem)]"
 649 |           :class="[
 650 |             isDark 
 651 |               ? 'bg-slate-800 border border-white/10' 
 652 |               : 'bg-white'
 653 |           ]"
 654 |         >
 655 |           <!-- 弹窗头部 -->
 656 |           <div class="px-6 py-4 border-b flex justify-between items-center"
 657 |             :class="[
 658 |               isDark 
 659 |                 ? 'border-white/10' 
 660 |                 : 'border-gray-200'
 661 |             ]"
 662 |           >
 663 |             <h3 class="text-xl font-bold"
 664 |               :class="[isDark ? 'text-white' : 'text-gray-800']"
 665 |             >查看链接</h3>
 666 |             <button 
 667 |               @click="showViewDialog = false"
 668 |               class="text-gray-500 hover:text-gray-700"
 669 |             >
 670 |               <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 671 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 672 |               </svg>
 673 |             </button>
 674 |           </div>
 675 |           
 676 |           <!-- 弹窗内容 -->
 677 |           <div class="overflow-y-auto" style="max-height: calc(100vh - 8rem);">
 678 |             <div class="p-6">
 679 |               <div class="space-y-6">
 680 |                 <!-- 链接和说明 -->
 681 |                 <div class="space-y-4">
 682 |                   <div>
 683 |                     <label class="block text-sm font-medium mb-1"
 684 |                       :class="[isDark ? 'text-gray-300' : 'text-gray-700']"
 685 |                     >链接地址</label>
 686 |                     <div class="p-3 rounded-lg border overflow-y-auto max-h-32"
 687 |                       :class="[
 688 |                         isDark 
 689 |                           ? 'bg-slate-700/50 border-white/10 text-white' 
 690 |                           : 'bg-gray-50 border-gray-200 text-gray-700'
 691 |                       ]"
 692 |                     >{{ viewingLink.url }}</div>
 693 |                   </div>
 694 |                   <div>
 695 |                     <label class="block text-sm font-medium mb-1"
 696 |                       :class="[isDark ? 'text-gray-300' : 'text-gray-700']"
 697 |                     >备注说明</label>
 698 |                     <div class="p-3 rounded-lg border overflow-y-auto max-h-32"
 699 |                       :class="[
 700 |                         isDark 
 701 |                           ? 'bg-slate-700/50 border-white/10 text-white' 
 702 |                           : 'bg-gray-50 border-gray-200 text-gray-700'
 703 |                       ]"
 704 |                     >{{ viewingLink.description }}</div>
 705 |                   </div>
 706 |                 </div>
 707 | 
 708 |                 <!-- 标签组 -->
 709 |                 <div>
 710 |                   <label class="block text-sm font-medium mb-2"
 711 |                     :class="[isDark ? 'text-gray-300' : 'text-gray-700']"
 712 |                   >标签信息</label>
 713 |                   <div class="grid grid-cols-3 gap-4">
 714 |                     <div class="rounded-lg border p-3"
 715 |                       :class="[
 716 |                         isDark 
 717 |                           ? 'bg-slate-700/50 border-white/10' 
 718 |                           : 'bg-gray-50 border-gray-200'
 719 |                       ]"
 720 |                     >
 721 |                       <span class="block text-xs mb-2"
 722 |                         :class="[isDark ? 'text-gray-400' : 'text-gray-500']"
 723 |                       >月标签</span>
 724 |                       <div class="grid grid-cols-3 gap-2">
 725 |                         <span 
 726 |                           v-for="month in viewingLink.monthTags" 
 727 |                           :key="month"
 728 |                           class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 justify-center"
 729 |                         >
 730 |                           {{ month }}月
 731 |                         </span>
 732 |                         <span v-if="!viewingLink.monthTags?.length" class="text-gray-500 text-sm">无</span>
 733 |                       </div>
 734 |                     </div>
 735 |                     <div class="rounded-lg border p-3"
 736 |                       :class="[
 737 |                         isDark 
 738 |                           ? 'bg-slate-700/50 border-white/10' 
 739 |                           : 'bg-gray-50 border-gray-200'
 740 |                       ]"
 741 |                     >
 742 |                       <span class="block text-xs mb-2"
 743 |                         :class="[isDark ? 'text-gray-400' : 'text-gray-500']"
 744 |                       >周标签</span>
 745 |                       <div class="grid grid-cols-3 gap-2">
 746 |                         <span 
 747 |                           v-for="day in viewingLink.weekTags" 
 748 |                           :key="day"
 749 |                           class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 justify-center whitespace-nowrap"
 750 |                         >
 751 |                           星期{{ ['日', '一', '二', '三', '四', '五', '六'][day % 7] }}
 752 |                         </span>
 753 |                         <span v-if="!viewingLink.weekTags?.length" class="text-gray-500 text-sm">无</span>
 754 |                       </div>
 755 |                     </div>
 756 |                     <div class="rounded-lg border p-3"
 757 |                       :class="[
 758 |                         isDark 
 759 |                           ? 'bg-slate-700/50 border-white/10' 
 760 |                           : 'bg-gray-50 border-gray-200'
 761 |                       ]"
 762 |                     >
 763 |                       <span class="block text-xs mb-1"
 764 |                         :class="[isDark ? 'text-gray-400' : 'text-gray-500']"
 765 |                       >日标签</span>
 766 |                       <span class="inline-flex items-center px-2.5 py-0.5 rounded-lg text-xs font-medium whitespace-pre-line text-center"
 767 |                         :class="viewingLink.holidayTag ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-600'"
 768 |                       >
 769 |                         <template v-if="viewingLink.holidayTag && Array.isArray(viewingLink.holidayTag)">
 770 |                           {{ viewingLink.holidayTag[0] === viewingLink.holidayTag[1] 
 771 |                             ? viewingLink.holidayTag[0] 
 772 |                             : `${viewingLink.holidayTag[0]}\n至\n${viewingLink.holidayTag[1]}` 
 773 |                           }}
 774 |                         </template>
 775 |                         <template v-else>无</template>
 776 |                       </span>
 777 |                     </div>
 778 |                   </div>
 779 |                 </div>
 780 |               </div>
 781 |             </div>
 782 |           </div>
 783 |           
 784 |           <!-- 查看链接弹窗底部 -->
 785 |           <div class="px-6 py-4 border-t flex justify-end"
 786 |             :class="[
 787 |               isDark 
 788 |                 ? 'bg-slate-700/50 border-white/10' 
 789 |                 : 'bg-gray-50 border-gray-200'
 790 |             ]"
 791 |           >
 792 |             <button 
 793 |               @click="showViewDialog = false"
 794 |               class="px-4 py-2 rounded-md transition-colors"
 795 |               :class="[
 796 |                 isDark 
 797 |                   ? 'bg-slate-600 text-white hover:bg-slate-500' 
 798 |                   : 'bg-gray-500 text-white hover:bg-gray-600'
 799 |               ]"
 800 |             >
 801 |               关闭
 802 |             </button>
 803 |           </div>
 804 |         </div>
 805 |       </div>
 806 |     </div>
 807 | 
 808 |     <!-- 添加新链接弹窗 -->
 809 |     <div v-if="showAddDialog" 
 810 |       class="fixed inset-0 z-[70] overflow-y-auto"
 811 |     >
 812 |       <!-- 遮罩层 -->
 813 |       <div 
 814 |         class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
 815 |         @click="showAddDialog = false"
 816 |       ></div>
 817 |       
 818 |       <!-- 弹窗内容 -->
 819 |       <div class="flex items-center justify-center min-h-screen p-4">
 820 |         <div class="relative max-w-2xl w-full rounded-2xl shadow-xl overflow-hidden"
 821 |           :class="[
 822 |             isDark 
 823 |               ? 'bg-slate-800 border border-white/10' 
 824 |               : 'bg-white'
 825 |           ]"
 826 |         >
 827 |           <!-- 弹窗标题 -->
 828 |           <div class="px-6 py-4 border-b flex justify-between items-center"
 829 |             :class="[
 830 |               isDark 
 831 |                 ? 'border-white/10 text-white' 
 832 |                 : 'border-gray-200 text-gray-800'
 833 |             ]"
 834 |           >
 835 |             <h3 class="text-lg font-semibold">新增链接</h3>
 836 |             <button 
 837 |               @click="showAddDialog = false"
 838 |               class="text-gray-500 hover:text-gray-700"
 839 |             >
 840 |               <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 841 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 842 |               </svg>
 843 |             </button>
 844 |           </div>
 845 | 
 846 |           <!-- 弹窗内容 -->
 847 |           <div class="p-6">
 848 |             <div class="space-y-6">
 849 |               <!-- 链接和说明 -->
 850 |               <div class="space-y-4">
 851 |                 <div>
 852 |                   <label class="block text-sm font-medium text-gray-300 mb-1">链接地址</label>
 853 |                   <input 
 854 |                     v-model="newLink.url" 
 855 |                     class="w-full p-2.5 border rounded-lg transition-colors focus:ring-1 focus:ring-sky-500 focus:border-sky-500 outline-none"
 856 |                     :class="[
 857 |                       isDark 
 858 |                         ? 'bg-slate-700/50 text-white border-white/10' 
 859 |                         : 'bg-white text-slate-800 border-slate-200'
 860 |                     ]"
 861 |                     placeholder="请输入链接地址"
 862 |                   >
 863 |                 </div>
 864 |                 <div>
 865 |                   <label class="block text-sm font-medium text-gray-300 mb-1">备注说明</label>
 866 |                   <input 
 867 |                     v-model="newLink.description" 
 868 |                     class="w-full p-2.5 border rounded-lg transition-colors focus:ring-1 focus:ring-sky-500 focus:border-sky-500 outline-none"
 869 |                     :class="[
 870 |                       isDark 
 871 |                         ? 'bg-slate-700/50 text-white border-white/10' 
 872 |                         : 'bg-white text-slate-800 border-slate-200'
 873 |                     ]"
 874 |                     placeholder="请输入备注说明"
 875 |                   >
 876 |                 </div>
 877 |               </div>
 878 | 
 879 |               <!-- 标签组 -->
 880 |               <div class="grid gap-6">
 881 |                 <label class="block text-sm font-medium text-gray-300">标签信息</label>
 882 |                 <div class="grid grid-cols-3 gap-4">
 883 |                   <!-- 新增链接弹窗中的月标签选择 -->
 884 |                   <div class="grid gap-1 content-start">
 885 |                     <span class="text-xs text-center" :class="[isDark ? 'text-gray-400' : 'text-gray-500']">月标签</span>
 886 |                     <div class="grid grid-cols-3 auto-rows-min gap-4 p-2 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
 887 |                       <button
 888 |                         v-for="month in 12"
 889 |                         :key="month"
 890 |                         @click="toggleMonthTag(month, newLink)"
 891 |                         class="px-2 py-0.5 rounded-full text-sm font-medium transition-colors w-12 justify-self-center"
 892 |                         :class="[
 893 |                           newLink.monthTags?.includes(month)
 894 |                             ? (isDark ? 'bg-blue-900/50 text-blue-100' : 'bg-blue-100 text-blue-800')
 895 |                             : (isDark ? 'bg-slate-700/50 text-white/60' : 'bg-gray-100 text-gray-600')
 896 |                         ]"
 897 |                       >
 898 |                         {{ month }}月
 899 |                       </button>
 900 |                     </div>
 901 |                   </div>
 902 | 
 903 |                   <!-- 新增链接弹窗中的周标签选择 -->
 904 |                   <div class="grid gap-1 content-start">
 905 |                     <span class="text-xs text-center" :class="[isDark ? 'text-gray-400' : 'text-gray-500']">周标签</span>
 906 |                     <div class="grid auto-rows-min gap-2 p-2 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
 907 |                       <button
 908 |                         v-for="day in 7"
 909 |                         :key="day-1"
 910 |                         @click="toggleWeekTag(day-1, newLink)"
 911 |                         class="px-2 py-0.5 rounded-full text-sm font-medium transition-colors w-24 justify-self-center"
 912 |                         :class="[
 913 |                           newLink.weekTags?.includes(day-1)
 914 |                             ? (isDark ? 'bg-green-900/50 text-green-100' : 'bg-green-100 text-green-800')
 915 |                             : (isDark ? 'bg-slate-700/50 text-white/60' : 'bg-gray-100 text-gray-600')
 916 |                         ]"
 917 |                       >
 918 |                         星期{{ ['日', '一', '二', '三', '四', '五', '六'][day-1] }}
 919 |                       </button>
 920 |                     </div>
 921 |                   </div>
 922 | 
 923 |                   <div class="grid gap-1 content-start">
 924 |                     <label class="text-xs text-center text-gray-400">日标签</label>
 925 |                     <div class="p-2 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
 926 |                       <DateRangePicker 
 927 |                         @update="updateNewLinkDateRange"
 928 |                         :initial-value="newLink.holidayTag"
 929 |                         :is-dark="isDark"
 930 |                       />
 931 |                     </div>
 932 |                   </div>
 933 |                 </div>
 934 |               </div>
 935 |             </div>
 936 |           </div>
 937 | 
 938 |           <!-- 弹窗底部 -->
 939 |           <div class="px-6 py-4 border-t flex justify-between items-center"
 940 |             :class="[
 941 |               isDark 
 942 |                 ? 'bg-slate-700/50 border-white/10' 
 943 |                 : 'bg-gray-50 border-gray-200'
 944 |             ]"
 945 |           >
 946 |             <button 
 947 |               @click="showAddDialog = false"
 948 |               class="px-4 py-2 border rounded-lg transition-colors"
 949 |               :class="[
 950 |                 isDark 
 951 |                   ? 'border-white/10 bg-slate-600 text-white hover:bg-slate-500' 
 952 |                   : 'border-gray-200 hover:bg-gray-100 text-gray-600'
 953 |               ]"
 954 |             >
 955 |               取消
 956 |             </button>
 957 |             <button 
 958 |               @click="addNewLink"
 959 |               class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
 960 |             >
 961 |               保存
 962 |             </button>
 963 |           </div>
 964 |         </div>
 965 |       </div>
 966 |     </div>
 967 | 
 968 |     <!-- 提示组件 -->
 969 |     <div 
 970 |       v-if="notification.show"
 971 |       class="fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg transition-all duration-300 transform z-[100]"
 972 |       :class="{
 973 |         'bg-green-500 text-white': notification.type === 'success',
 974 |         'bg-red-500 text-white': notification.type === 'error'
 975 |       }"
 976 |     >
 977 |       {{ notification.message }}
 978 |     </div>
 979 | 
 980 |     <!-- 在其他弹窗后面添加编辑弹窗 -->
 981 |     <div v-if="showEditDialog" 
 982 |       class="fixed inset-0 z-[70] overflow-y-auto"
 983 |     >
 984 |       <!-- 遮罩层 -->
 985 |       <div 
 986 |         class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
 987 |         @click="showEditDialog = false"
 988 |       ></div>
 989 | 
 990 |       <div class="flex items-center justify-center min-h-screen p-4">
 991 |         <div class="relative max-w-2xl w-full rounded-2xl shadow-xl overflow-hidden"
 992 |           :class="[
 993 |             isDark 
 994 |               ? 'bg-slate-800 border border-white/10' 
 995 |               : 'bg-white'
 996 |           ]"
 997 |         >
 998 |           <!-- 弹窗头部 -->
 999 |           <div class="px-6 py-4 border-b flex justify-between items-center"
1000 |             :class="[
1001 |               isDark 
1002 |                 ? 'border-white/10' 
1003 |                 : 'border-gray-200'
1004 |             ]"
1005 |           >
1006 |             <h3 class="text-xl font-bold"
1007 |               :class="[isDark ? 'text-white' : 'text-gray-800']"
1008 |             >编辑链接</h3>
1009 |             <button 
1010 |               @click="showEditDialog = false"
1011 |               class="text-gray-500 hover:text-gray-700"
1012 |             >
1013 |               <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1014 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
1015 |               </svg>
1016 |             </button>
1017 |           </div>
1018 |           
1019 |           <!-- 弹窗内容 -->
1020 |           <div class="p-6">
1021 |             <div class="space-y-6">
1022 |               <!-- 链接和说明 -->
1023 |               <div class="space-y-4">
1024 |                 <div>
1025 |                   <label class="block text-sm font-medium mb-1"
1026 |                     :class="[isDark ? 'text-gray-300' : 'text-gray-700']"
1027 |                   >链接地址</label>
1028 |                   <input 
1029 |                     v-model="editingLink.url" 
1030 |                     class="w-full p-2.5 border rounded-lg transition-colors focus:ring-1 focus:ring-sky-500 focus:border-sky-500 outline-none"
1031 |                     :class="[
1032 |                       isDark 
1033 |                         ? 'bg-slate-700/50 text-white border-white/10' 
1034 |                         : 'bg-white text-slate-800 border-slate-200'
1035 |                     ]"
1036 |                     placeholder="请输入链接地址"
1037 |                   >
1038 |                 </div>
1039 |                 <div>
1040 |                   <label class="block text-sm font-medium mb-1"
1041 |                     :class="[isDark ? 'text-gray-300' : 'text-gray-700']"
1042 |                   >备注说明</label>
1043 |                   <input 
1044 |                     v-model="editingLink.description" 
1045 |                     class="w-full p-2.5 border rounded-lg transition-colors focus:ring-1 focus:ring-sky-500 focus:border-sky-500 outline-none"
1046 |                     :class="[
1047 |                       isDark 
1048 |                         ? 'bg-slate-700/50 text-white border-white/10' 
1049 |                         : 'bg-white text-slate-800 border-slate-200'
1050 |                     ]"
1051 |                     placeholder="请输入备注说明"
1052 |                   >
1053 |                 </div>
1054 |               </div>
1055 | 
1056 |               <!-- 标签组 -->
1057 |               <div class="grid gap-6">
1058 |                 <label class="block text-sm font-medium"
1059 |                   :class="[isDark ? 'text-gray-300' : 'text-gray-700']"
1060 |                 >标签信息</label>
1061 |                 <div class="grid grid-cols-3 gap-4">
1062 |                   <!-- 编辑弹窗中的月标签选择 -->
1063 |                   <div class="grid gap-1 content-start">
1064 |                     <span class="text-xs text-center" :class="[isDark ? 'text-gray-400' : 'text-gray-500']">月标签</span>
1065 |                     <div class="grid grid-cols-3 auto-rows-min gap-6 p-2 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
1066 |                       <button
1067 |                         v-for="month in 12"
1068 |                         :key="month"
1069 |                         @click="toggleMonthTag(month, editingLink)"
1070 |                         class="px-2 py-0.5 rounded-full text-sm font-medium transition-colors w-14 justify-self-center"
1071 |                         :class="[
1072 |                           editingLink.monthTags?.includes(month)
1073 |                             ? (isDark ? 'bg-blue-900/50 text-blue-100' : 'bg-blue-100 text-blue-800')
1074 |                             : (isDark ? 'bg-slate-700/50 text-white/60' : 'bg-gray-100 text-gray-600')
1075 |                         ]"
1076 |                       >
1077 |                         {{ month }}月
1078 |                       </button>
1079 |                     </div>
1080 |                   </div>
1081 | 
1082 |                   <!-- 编辑弹窗中的周标签选择 -->
1083 |                   <div class="grid gap-1 content-start">
1084 |                     <span class="text-xs text-center" :class="[isDark ? 'text-gray-400' : 'text-gray-500']">周标签</span>
1085 |                     <div class="grid auto-rows-min gap-2 p-2 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
1086 |                       <button
1087 |                         v-for="day in 7"
1088 |                         :key="day-1"
1089 |                         @click="toggleWeekTag(day-1, editingLink)"
1090 |                         class="px-2 py-0.5 rounded-full text-sm font-medium transition-colors w-24 justify-self-center"
1091 |                         :class="[
1092 |                           editingLink.weekTags?.includes(day-1)
1093 |                             ? (isDark ? 'bg-green-900/50 text-green-100' : 'bg-green-100 text-green-800')
1094 |                             : (isDark ? 'bg-slate-700/50 text-white/60' : 'bg-gray-100 text-gray-600')
1095 |                         ]"
1096 |                       >
1097 |                         星期{{ ['日', '一', '二', '三', '四', '五', '六'][day-1] }}
1098 |                       </button>
1099 |                     </div>
1100 |                   </div>
1101 | 
1102 |                   <div class="grid gap-1 content-start">
1103 |                     <label class="text-xs text-center text-gray-500">日标签</label>
1104 |                     <div class="p-2 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
1105 |                       <DateRangePicker 
1106 |                         @update="updateEditingLinkDateRange"
1107 |                         :initial-value="editingLink.holidayTag"
1108 |                         :is-dark="isDark"
1109 |                       />
1110 |                     </div>
1111 |                   </div>
1112 |                 </div>
1113 |               </div>
1114 |             </div>
1115 |           </div>
1116 |           
1117 |           <!-- 编辑链接弹窗底部 -->
1118 |           <div class="px-6 py-4 border-t flex justify-between items-center"
1119 |             :class="[
1120 |               isDark 
1121 |                 ? 'bg-slate-700/50 border-white/10' 
1122 |                 : 'bg-gray-50 border-gray-200'
1123 |             ]"
1124 |           >
1125 |             <button 
1126 |               @click="showEditDialog = false"
1127 |               class="px-4 py-2 border rounded-lg transition-colors"
1128 |               :class="[
1129 |                 isDark 
1130 |                   ? 'border-white/10 bg-slate-600 text-white hover:bg-slate-500' 
1131 |                   : 'border-gray-200 hover:bg-gray-100 text-gray-600'
1132 |               ]"
1133 |             >
1134 |               取消
1135 |             </button>
1136 |             <button 
1137 |               @click="saveEdit"
1138 |               class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
1139 |             >
1140 |               保存
1141 |             </button>
1142 |           </div>
1143 |         </div>
1144 |       </div>
1145 |     </div>
1146 | 
1147 |     <!-- 在其他弹窗后面添加删除确认弹窗 -->
1148 |     <div v-if="showDeleteDialog" 
1149 |       class="fixed inset-0 z-[70] overflow-y-auto"
1150 |     >
1151 |       <!-- 遮罩层 -->
1152 |       <div 
1153 |         class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
1154 |         @click="showDeleteDialog = false"
1155 |       ></div>
1156 | 
1157 |       <div class="flex items-center justify-center min-h-screen p-4">
1158 |         <div class="relative max-w-md w-full rounded-2xl shadow-xl overflow-hidden"
1159 |           :class="[
1160 |             isDark 
1161 |               ? 'bg-slate-800 border border-white/10' 
1162 |               : 'bg-white'
1163 |           ]"
1164 |         >
1165 |           <!-- 弹窗头部 -->
1166 |           <div class="px-6 py-4 border-b flex items-center"
1167 |             :class="[
1168 |               isDark 
1169 |                 ? 'border-white/10' 
1170 |                 : 'border-gray-200'
1171 |             ]"
1172 |           >
1173 |             <div class="flex items-center"
1174 |               :class="[isDark ? 'text-red-400' : 'text-red-600']"
1175 |             >
1176 |               <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1177 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
1178 |               </svg>
1179 |               <h3 class="text-xl font-bold">确认删除</h3>
1180 |             </div>
1181 |           </div>
1182 |           
1183 |           <!-- 弹窗内容 -->
1184 |           <div class="p-6">
1185 |             <p class="text-sm"
1186 |               :class="[isDark ? 'text-gray-300' : 'text-gray-600']"
1187 |             >确定要删除以下链接吗？此操作不可恢复。</p>
1188 |             <div class="mt-4 rounded-lg border overflow-y-auto overflow-x-hidden max-h-48"
1189 |               :class="[
1190 |                 isDark 
1191 |                   ? 'bg-slate-700/50 border-white/10' 
1192 |                   : 'bg-gray-50 border-gray-200'
1193 |               ]"
1194 |             >
1195 |               <div class="p-4">
1196 |                 <p class="text-sm break-all whitespace-normal"
1197 |                   :class="[isDark ? 'text-gray-200' : 'text-gray-700']"
1198 |                 >{{ deletingLink?.url }}</p>
1199 |                 <p v-if="deletingLink?.description" 
1200 |                   class="mt-2 text-sm break-all whitespace-normal"
1201 |                   :class="[isDark ? 'text-gray-400' : 'text-gray-500']"
1202 |                 >
1203 |                   说明：
1204 |                   {{ deletingLink.description }}
1205 |                 </p>
1206 |               </div>
1207 |             </div>
1208 |           </div>
1209 |           
1210 |           <!-- 弹窗底部 -->
1211 |           <div class="px-6 py-4 border-t flex justify-between items-center"
1212 |             :class="[
1213 |               isDark 
1214 |                 ? 'bg-slate-700/50 border-white/10' 
1215 |                 : 'bg-gray-50 border-gray-200'
1216 |             ]"
1217 |           >
1218 |             <button 
1219 |               @click="showDeleteDialog = false"
1220 |               class="px-4 py-2 border rounded-lg transition-colors"
1221 |               :class="[
1222 |                 isDark 
1223 |                   ? 'border-white/10 hover:bg-slate-700 text-white' 
1224 |                   : 'border-gray-200 hover:bg-gray-100 text-gray-600'
1225 |               ]"
1226 |             >
1227 |               取消
1228 |             </button>
1229 |             <button 
1230 |               @click="confirmDelete"
1231 |               class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors flex items-center gap-2"
1232 |             >
1233 |               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1234 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
1235 |               </svg>
1236 |               确认删除
1237 |             </button>
1238 |           </div>
1239 |         </div>
1240 |       </div>
1241 |     </div>
1242 | 
1243 |     <!-- 访问限制弹窗 -->
1244 |     <div v-if="showAccessDialog" class="fixed inset-0 z-50 flex items-center justify-center">
1245 |       <!-- 遮罩层 -->
1246 |       <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="showAccessDialog = false"></div>
1247 |       
1248 |       <!-- 弹窗内容 -->
1249 |       <div class="relative w-full max-w-lg p-6 rounded-2xl shadow-xl"
1250 |         :class="[
1251 |           isDark 
1252 |             ? 'bg-slate-800 border border-white/10' 
1253 |             : 'bg-white border border-slate-200'
1254 |         ]"
1255 |       >
1256 |         <h3 class="text-xl font-semibold mb-2"
1257 |           :class="[isDark ? 'text-white' : 'text-slate-800']"
1258 |         >
1259 |           访问限制设置
1260 |         </h3>
1261 |         <p class="text-sm mb-4"
1262 |           :class="[isDark ? 'text-gray-400' : 'text-gray-600']"
1263 |         >
1264 |           如果设置url，那么只有这些url才可以成功访问 /api
1265 |         </p>
1266 |         
1267 |         <!-- URL输入区域 -->
1268 |         <div class="mb-4">
1269 |           <div class="flex gap-2 mb-2">
1270 |             <input 
1271 |               v-model="newAccessUrl"
1272 |               type="text"
1273 |               placeholder="输入允许访问的URL（例如：example.com）"
1274 |               class="flex-1 px-4 py-2 rounded-lg"
1275 |               :class="[
1276 |                 isDark 
1277 |                   ? 'bg-slate-700/50 text-white border border-white/10 focus:border-sky-500 focus:outline-none' 
1278 |                   : 'bg-white text-slate-800 border border-slate-200 focus:border-sky-500 focus:outline-none'
1279 |               ]"
1280 |               @keyup.enter="addAccessUrl"
1281 |             >
1282 |             <button 
1283 |               @click="addAccessUrl"
1284 |               class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
1285 |             >
1286 |               添加
1287 |             </button>
1288 |           </div>
1289 |           
1290 |           <!-- URL列表 -->
1291 |           <div class="max-h-48 overflow-y-auto space-y-2">
1292 |             <div 
1293 |               v-for="(url, index) in accessUrls" 
1294 |               :key="index"
1295 |               class="flex items-center justify-between p-2 rounded-lg"
1296 |               :class="[
1297 |                 isDark 
1298 |                   ? 'bg-slate-700/30 text-white' 
1299 |                   : 'bg-slate-50 text-slate-800'
1300 |               ]"
1301 |             >
1302 |               <span>{{ url }}</span>
1303 |               <button 
1304 |                 @click="removeAccessUrl(index)"
1305 |                 class="p-1 text-red-500 hover:text-red-600 transition-colors"
1306 |               >
1307 |                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1308 |                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
1309 |                 </svg>
1310 |               </button>
1311 |             </div>
1312 |           </div>
1313 |         </div>
1314 |         
1315 |         <!-- 按钮组 -->
1316 |         <div class="flex justify-end gap-4">
1317 |           <div class="flex-1">
1318 |             <button 
1319 |               @click="showAccessDialog = false"
1320 |               class="px-4 py-2 rounded-lg transition-colors"
1321 |               :class="[
1322 |                 isDark 
1323 |                   ? 'bg-slate-700 text-white hover:bg-slate-600' 
1324 |                   : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
1325 |               ]"
1326 |             >
1327 |               取消
1328 |             </button>
1329 |           </div>
1330 |           <button 
1331 |             @click="saveAccessUrls"
1332 |             class="px-4 py-2 bg-sky-500 text-white rounded-lg hover:bg-sky-600 transition-colors"
1333 |           >
1334 |             保存
1335 |           </button>
1336 |         </div>
1337 |       </div>
1338 |     </div>
1339 |   </div>
1340 | </template>
1341 | 
1342 | <script setup>
1343 | import { ref, onMounted, computed, onUnmounted, inject, watch } from 'vue'
1344 | import { useLinkStore } from '../stores/linkStore'
1345 | import { storeToRefs } from 'pinia'
1346 | import DateRangePicker from '../components/DateRangePicker.vue'
1347 | 
1348 | const store = useLinkStore()
1349 | const { links, displayMode } = storeToRefs(store)
1350 | const isAuthenticated = ref(false)
1351 | const password = ref('')
1352 | const newLink = ref({
1353 |   url: '',
1354 |   description: '',
1355 |   monthTags: [],
1356 |   weekTags: [],
1357 |   holidayTag: null,
1358 |   active: true
1359 | })
1360 | 
1361 | const searchQuery = ref('')
1362 | const filterType = ref('all')
1363 | const showEditDialog = ref(false)
1364 | const editingLink = ref(null)
1365 | 
1366 | // 添加图片错误状态管理
1367 | const imageErrors = ref({})
1368 | 
1369 | // 添加图片错误处理函数
1370 | function handleImageError(event, linkId) {
1371 |   imageErrors.value[linkId] = true
1372 | }
1373 | 
1374 | // 计算过滤后的链接列表（纯本地过滤）
1375 | const filteredLinks = computed(() => {
1376 |   let result = links.value || []
1377 | 
1378 |   // 状态过滤
1379 |   switch (filterType.value) {
1380 |     case 'active':
1381 |       result = result.filter(link => link.active)
1382 |       break
1383 |     case 'inactive':
1384 |       result = result.filter(link => !link.active)
1385 |       break
1386 |   }
1387 | 
1388 |   // 搜索过滤
1389 |   if (searchQuery.value) {
1390 |     const query = searchQuery.value.toLowerCase()
1391 |     result = result.filter(link => 
1392 |       link.description.toLowerCase().includes(query)
1393 |     )
1394 |   }
1395 | 
1396 |   return result
1397 | })
1398 | 
1399 | // 确保在页面加载时获取链接列表
1400 | onMounted(async () => {
1401 |   const authStatus = sessionStorage.getItem('token')
1402 |   if (authStatus) {
1403 |     isAuthenticated.value = true
1404 |     await store.fetchLinks() // 获取链接列表
1405 |     await store.fetchSettings() // 获取设置
1406 |     await getAccessUrls() // 获取访问限制URL列表
1407 |   }
1408 | })
1409 | 
1410 | async function login() {
1411 |   try {
1412 |     const response = await fetch('/api/auth', {
1413 |       method: 'POST',
1414 |       headers: {
1415 |         'Content-Type': 'application/json'
1416 |       },
1417 |       body: JSON.stringify({ password: password.value })
1418 |     })
1419 | 
1420 |     const data = await response.json()
1421 |     
1422 |     if (response.ok && data.success && data.token) {
1423 |       isAuthenticated.value = true
1424 |       sessionStorage.setItem('token', data.token)
1425 |       await store.fetchLinks()
1426 |       password.value = '' // 清空密码
1427 |     } else {
1428 |       showNotification('登录失败！', 'error')
1429 |       password.value = '' // 清空密码
1430 |     }
1431 |   } catch (error) {
1432 |     showNotification('登录失败！', 'error')
1433 |     password.value = '' // 清空密码
1434 |   }
1435 | }
1436 | 
1437 | async function deleteLink(id) {
1438 |   deletingLinkId.value = id
1439 |   showDeleteDialog.value = true
1440 | }
1441 | 
1442 | function logout() {
1443 |   isAuthenticated.value = false
1444 |   sessionStorage.removeItem('token')
1445 |   store.links = []
1446 | }
1447 | 
1448 | async function updateMode() {
1449 |   try {
1450 |     await store.updateDisplayMode(Number(displayMode.value))
1451 |     showNotification('显示模式设置已保存')
1452 |   } catch (error) {
1453 |     showNotification('显示模式设置保存失败', 'error')
1454 |   }
1455 | }
1456 | 
1457 | function editLink(link) {
1458 |   editingLink.value = { 
1459 |     ...link,
1460 |     monthTags: Array.isArray(link.monthTags) ? link.monthTags : [],
1461 |     weekTags: Array.isArray(link.weekTags) ? link.weekTags : [],
1462 |     holidayTag: Array.isArray(link.holidayTag) ? link.holidayTag : null
1463 |   }
1464 |   showEditDialog.value = true
1465 | }
1466 | 
1467 | async function saveEdit() {
1468 |   const trimmedUrl = editingLink.value?.url?.trim()
1469 |   if (!trimmedUrl) {
1470 |     showNotification('链接地址不能为空', 'error')
1471 |     return
1472 |   }
1473 |   try {
1474 |     const linkToSave = {
1475 |       ...editingLink.value,
1476 |       url: trimmedUrl,
1477 |       description: editingLink.value.description?.trim() || '',
1478 |       monthTags: (editingLink.value.monthTags || []).sort((a, b) => a - b),
1479 |       weekTags: (editingLink.value.weekTags || []).sort((a, b) => a - b),
1480 |       holidayTag: editingLink.value.holidayTag || null
1481 |     }
1482 |     await store.updateLink(linkToSave)
1483 |     showNotification('链接更新成功')
1484 |     showEditDialog.value = false
1485 |   } catch (error) {
1486 |     console.error('保存失败:', error)
1487 |     showNotification('链接更新失败', 'error')
1488 |   }
1489 | }
1490 | 
1491 | async function toggleLinkStatus(id) {
1492 |   try {
1493 |     await store.toggleStatus(id)
1494 |     showNotification('状态更新成功')
1495 |   } catch (error) {
1496 |     showNotification('状态更新失败', 'error')
1497 |   }
1498 | }
1499 | 
1500 | const previewImage = ref(null)
1501 | 
1502 | // 添加查看链接对话框的逻辑
1503 | const showViewDialog = ref(false)
1504 | const viewingLink = ref(null)
1505 | 
1506 | function viewLink(link) {
1507 |   viewingLink.value = { ...link }
1508 |   showViewDialog.value = true
1509 | }
1510 | 
1511 | // 添加新链接弹窗的逻辑
1512 | const showAddDialog = ref(false)
1513 | 
1514 | // 添加通知状态
1515 | const notification = ref({
1516 |   show: false,
1517 |   message: '',
1518 |   type: 'success'
1519 | })
1520 | 
1521 | // 显示通知的函数
1522 | function showNotification(message, type = 'success') {
1523 |   notification.value = {
1524 |     show: true,
1525 |     message,
1526 |     type
1527 |   }
1528 |   // 3秒后自动隐藏
1529 |   setTimeout(() => {
1530 |     notification.value.show = false
1531 |   }, 3000)
1532 | }
1533 | 
1534 | async function addNewLink() {
1535 |   const trimmedUrl = newLink.value.url?.trim()
1536 |   if (!trimmedUrl) {
1537 |     showNotification('链接地址不能为空', 'error')
1538 |     return
1539 |   }
1540 |   try {
1541 |     const linkToAdd = {
1542 |       ...newLink.value,
1543 |       url: trimmedUrl,
1544 |       description: newLink.value.description?.trim() || '',
1545 |       monthTags: (newLink.value.monthTags || []).sort((a, b) => a - b),
1546 |       weekTags: (newLink.value.weekTags || []).sort((a, b) => a - b),
1547 |       holidayTag: newLink.value.holidayTag || null
1548 |     }
1549 |     await store.addLink(linkToAdd)
1550 |     showNotification('链接添加成功')
1551 |     showAddDialog.value = false
1552 |     newLink.value = {
1553 |       url: '',
1554 |       description: '',
1555 |       monthTags: [],
1556 |       weekTags: [],
1557 |       holidayTag: null,
1558 |       active: true
1559 |     }
1560 |   } catch (error) {
1561 |     console.error('添加失败:', error)
1562 |     showNotification('链接添加失败', 'error')
1563 |   }
1564 | }
1565 | 
1566 | // 修改删除相关的状态和函数
1567 | const showDeleteDialog = ref(false)
1568 | const deletingLink = ref(null)
1569 | 
1570 | // 显示删除确认弹窗
1571 | function confirmDeleteLink(link) {
1572 |   deletingLink.value = link
1573 |   showDeleteDialog.value = true
1574 | }
1575 | 
1576 | // 执行删除操作
1577 | async function confirmDelete() {
1578 |   if (!deletingLink.value) return
1579 |   
1580 |   try {
1581 |     await store.deleteLink(deletingLink.value.id)
1582 |     showNotification('链接删除成功')
1583 |     showDeleteDialog.value = false
1584 |   } catch (error) {
1585 |     showNotification('链接删除失败', 'error')
1586 |   } finally {
1587 |     deletingLink.value = null
1588 |   }
1589 | }
1590 | 
1591 | // 存储每个提示框的位置信息
1592 | const tooltipPositions = ref({})
1593 | 
1594 | // 监听滚动事件，更新提示框位置
1595 | onMounted(() => {
1596 |   const updateTooltipPositions = () => {
1597 |     const tooltipContainers = document.querySelectorAll('[data-link-id]')
1598 |     const windowHeight = window.innerHeight
1599 |     const middleScreen = windowHeight / 2
1600 | 
1601 |     tooltipContainers.forEach(container => {
1602 |       const linkId = container.getAttribute('data-link-id')
1603 |       if (linkId) {
1604 |         const rect = container.getBoundingClientRect()
1605 |         const elementMiddle = rect.top + rect.height / 2
1606 |         tooltipPositions.value[linkId] = elementMiddle > middleScreen
1607 |       }
1608 |     })
1609 |   }
1610 | 
1611 |   // 初始更新和监听滚动事件
1612 |   updateTooltipPositions()
1613 |   window.addEventListener('scroll', updateTooltipPositions)
1614 |   window.addEventListener('resize', updateTooltipPositions)
1615 |   
1616 |   // 清理事件监听
1617 |   onUnmounted(() => {
1618 |     window.removeEventListener('scroll', updateTooltipPositions)
1619 |     window.removeEventListener('resize', updateTooltipPositions)
1620 |   })
1621 | })
1622 | 
1623 | // 修改判断提示框位置的函数
1624 | function isTooltipTop(linkId) {
1625 |   return tooltipPositions.value[linkId] ?? false
1626 | }
1627 | 
1628 | // 注入主题状态
1629 | const isDark = inject('isDark')
1630 | 
1631 | // 切换主题
1632 | function toggleTheme() {
1633 |   isDark.value = !isDark.value
1634 | }
1635 | 
1636 | // 添加访问URL
1637 | const showAccessDialog = ref(false)
1638 | const accessUrls = ref([])
1639 | const newAccessUrl = ref('')
1640 | 
1641 | // 监听对话框显示状态
1642 | watch(showAccessDialog, async (newVal) => {
1643 |   if (newVal) {
1644 |     await getAccessUrls() // 当对话框打开时，重新获取URL列表
1645 |   }
1646 | })
1647 | 
1648 | function addAccessUrl() {
1649 |   if (newAccessUrl.value.trim()) {
1650 |     accessUrls.value.push(newAccessUrl.value.trim())
1651 |     newAccessUrl.value = ''
1652 |   }
1653 | }
1654 | 
1655 | function removeAccessUrl(index) {
1656 |   accessUrls.value.splice(index, 1)
1657 | }
1658 | 
1659 | async function saveAccessUrls() {
1660 |   try {
1661 |     const response = await fetch('/api/settings', {
1662 |       method: 'POST',
1663 |       headers: {
1664 |         'Content-Type': 'application/json',
1665 |         'Authorization': `Bearer ${sessionStorage.getItem('token')}`
1666 |       },
1667 |       body: JSON.stringify({
1668 |         accessUrls: accessUrls.value
1669 |       })
1670 |     })
1671 |     
1672 |     if (response.ok) {
1673 |       showNotification('访问限制设置已保存')
1674 |       showAccessDialog.value = false
1675 |     } else {
1676 |       showNotification('保存访问限制设置失败', 'error')
1677 |     }
1678 |   } catch (error) {
1679 |     console.error('保存访问限制设置失败:', error)
1680 |     showNotification('保存访问限制设置失败', 'error')
1681 |   }
1682 | }
1683 | 
1684 | async function getAccessUrls() {
1685 |   try {
1686 |     const response = await fetch('/api/settings', {
1687 |       headers: {
1688 |         'Authorization': `Bearer ${sessionStorage.getItem('token')}`
1689 |       }
1690 |     })
1691 |     
1692 |     if (response.ok) {
1693 |       const data = await response.json()
1694 |       accessUrls.value = data.accessUrls || []
1695 |     }
1696 |   } catch (error) {
1697 |     console.error('获取访问限制设置失败:', error)
1698 |   }
1699 | }
1700 | 
1701 | // 添加图标位置计算
1702 | const helpIcon = ref(null)
1703 | const helpIconPosition = ref({ top: 0, left: 0, bottom: 0 })
1704 | 
1705 | // 更新图标位置
1706 | function updateHelpIconPosition() {
1707 |   if (helpIcon.value) {
1708 |     const rect = helpIcon.value.getBoundingClientRect()
1709 |     helpIconPosition.value = {
1710 |       top: rect.top,
1711 |       left: rect.left,
1712 |       bottom: rect.bottom
1713 |     }
1714 |   }
1715 | }
1716 | 
1717 | // 监听窗口大小变化和滚动
1718 | onMounted(() => {
1719 |   updateHelpIconPosition()
1720 |   window.addEventListener('resize', updateHelpIconPosition)
1721 |   window.addEventListener('scroll', updateHelpIconPosition)
1722 | })
1723 | 
1724 | onUnmounted(() => {
1725 |   window.removeEventListener('resize', updateHelpIconPosition)
1726 |   window.removeEventListener('scroll', updateHelpIconPosition)
1727 | })
1728 | 
1729 | // 添加日期范围更新处理函数
1730 | function updateNewLinkDateRange(data) {
1731 |   newLink.value = {
1732 |     ...newLink.value,
1733 |     holidayTag: data?.holidayTag ?? null
1734 |   }
1735 | }
1736 | 
1737 | function updateEditingLinkDateRange(data) {
1738 |   editingLink.value = {
1739 |     ...editingLink.value,
1740 |     holidayTag: data?.holidayTag ?? null
1741 |   }
1742 | }
1743 | 
1744 | // 添加处理函数
1745 | function toggleMonthTag(month, target) {
1746 |   const tags = target.monthTags || []
1747 |   const index = tags.indexOf(month)
1748 |   if (index === -1) {
1749 |     // 添加标签并排序
1750 |     target.monthTags = [...tags, month].sort((a, b) => a - b)
1751 |   } else {
1752 |     // 移除标签并保持排序
1753 |     target.monthTags = tags.filter(m => m !== month).sort((a, b) => a - b)
1754 |   }
1755 | }
1756 | 
1757 | function toggleWeekTag(day, target) {
1758 |   const tags = target.weekTags || []
1759 |   const index = tags.indexOf(day)
1760 |   if (index === -1) {
1761 |     // 添加标签并排序
1762 |     target.weekTags = [...tags, day].sort((a, b) => a - b)
1763 |   } else {
1764 |     // 移除标签并保持排序
1765 |     target.weekTags = tags.filter(d => d !== day).sort((a, b) => a - b)
1766 |   }
1767 | }
1768 | </script>
1769 | 
1770 | <style>
1771 | /* 添加一些全局样式 */
1772 | .transition-all {
1773 |   transition-property: all;
1774 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1775 |   transition-duration: 150ms;
1776 | }
1777 | 
1778 | /* 美化滚动条 */
1779 | ::-webkit-scrollbar {
1780 |   width: 8px;
1781 |   height: 8px;
1782 | }
1783 | 
1784 | ::-webkit-scrollbar-track {
1785 |   background: #f1f1f1;
1786 |   border-radius: 4px;
1787 | }
1788 | 
1789 | ::-webkit-scrollbar-thumb {
1790 |   background: #888;
1791 |   border-radius: 4px;
1792 | }
1793 | 
1794 | ::-webkit-scrollbar-thumb:hover {
1795 |   background: #555;
1796 | }
1797 | 
1798 | /* 美化下拉列表 - 基础样式 */
1799 | select {
1800 |   appearance: none;
1801 |   -webkit-appearance: none;
1802 |   -moz-appearance: none;
1803 |   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
1804 |   background-position: right 0.5rem center;
1805 |   background-repeat: no-repeat;
1806 |   background-size: 1.5em 1.5em;
1807 |   padding-right: 2.5rem;
1808 | }
1809 | 
1810 | /* 多选下拉列表样式 */
1811 | select[multiple] {
1812 |   background-image: none !important;
1813 |   padding-right: 0.75rem;
1814 |   overflow-y: auto;
1815 |   scrollbar-width: thin;
1816 | }
1817 | 
1818 | /* 下拉列表选项样式 */
1819 | option {
1820 |   padding: 0.75rem;
1821 |   cursor: pointer;
1822 |   border-bottom: 1px solid #f3f4f6;
1823 |   transition: all 0.2s;
1824 | }
1825 | 
1826 | option:last-child {
1827 |   border-bottom: none;
1828 | }
1829 | 
1830 | /* 单选下拉列表选中项样式 */
1831 | select:not([multiple]) option:checked {
1832 |   background-color: #3b82f6;
1833 |   color: white;
1834 | }
1835 | 
1836 | /* 多选下拉列表选中项样式 */
1837 | select[multiple] option:checked {
1838 |   background-color: #dbeafe;
1839 |   color: #1e40af;
1840 |   font-weight: 500;
1841 | }
1842 | 
1843 | option:hover:not(:checked) {
1844 |   background-color: #f3f4f6;
1845 | }
1846 | 
1847 | /* 统一下拉列表和输入框的高度 */
1848 | select:not([multiple]), input[type="date"] {
1849 |   height: 2.75rem;
1850 | }
1851 | 
1852 | /* 美化滚动条 */
1853 | select[multiple]::-webkit-scrollbar {
1854 |   width: 6px;
1855 | }
1856 | 
1857 | select[multiple]::-webkit-scrollbar-track {
1858 |   background: #f1f1f1;
1859 |   border-radius: 3px;
1860 | }
1861 | 
1862 | select[multiple]::-webkit-scrollbar-thumb {
1863 |   background: #d1d5db;
1864 |   border-radius: 3px;
1865 | }
1866 | 
1867 | select[multiple]::-webkit-scrollbar-thumb:hover {
1868 |   background: #9ca3af;
1869 | }
1870 | 
1871 | /* 移除 Firefox 的默认下拉箭头 */
1872 | @-moz-document url-prefix() {
1873 |   select {
1874 |     text-indent: -2px;
1875 |   }
1876 | }
1877 | 
1878 | /* 移除 IE 的默认下拉箭头 */
1879 | select::-ms-expand {
1880 |   display: none;
1881 | }
1882 | 
1883 | /* 提示框容器样式 */
1884 | .relative:hover > div[class*="absolute"] {
1885 |   visibility: visible;
1886 |   opacity: 1;
1887 | }
1888 | 
1889 | .relative > div[class*="absolute"] {
1890 |   transition: all 0.2s ease-in-out;
1891 | }
1892 | 
1893 | /* 添加提示框方向过渡效果 */
1894 | .relative > div[class*="absolute"].bottom-full {
1895 |   transform: translateY(10px);
1896 | }
1897 | 
1898 | .relative > div[class*="absolute"].top-full {
1899 |   transform: translateY(-10px);
1900 | }
1901 | 
1902 | .relative:hover > div[class*="absolute"].bottom-full {
1903 |   transform: translateY(0);
1904 | }
1905 | 
1906 | .relative:hover > div[class*="absolute"].top-full {
1907 |   transform: translateY(0);
1908 | }
1909 | 
1910 | /* 修改提示框样式 */
1911 | .group:hover > div[class*="absolute"] {
1912 |   visibility: visible !important;
1913 |   opacity: 1 !important;
1914 | }
1915 | 
1916 | /* 添加提示框方向过渡效果 */
1917 | .group > div[class*="absolute"] {
1918 |   transition: all 0.2s ease-in-out;
1919 | }
1920 | 
1921 | .group > div[class*="absolute"].bottom-full {
1922 |   transform: translateY(10px);
1923 | }
1924 | 
1925 | .group > div[class*="absolute"].top-full {
1926 |   transform: translateY(-10px);
1927 | }
1928 | 
1929 | .group:hover > div[class*="absolute"].bottom-full {
1930 |   transform: translateY(0);
1931 | }
1932 | 
1933 | .group:hover > div[class*="absolute"].top-full {
1934 |   transform: translateY(0);
1935 | }
1936 | </style>
1937 | 


--------------------------------------------------------------------------------