删除时钟组件 ClockWidget-new.vue

src/widgets/ClockWidget-new.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="clock-widget" :style="clockStyle">
-    {{ currentTime }}
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import dayjs from 'dayjs';
-
-// Define props interface
-interface ClockConfig {
-  format: string;
-  color: string;
-  fontSize: number;
-  fontWeight: string;
-  fontFamily: string;
-  textShadow: boolean;
-  shadowColor: string;
-  shadowBlur: number;
-  useGradient: boolean;
-  gradientColors: string[];
-  showSeconds: boolean;
-}
-
-// Define props with default values
-const props = withDefaults(defineProps<{
-  config: Partial<ClockConfig>;
-}>(), {
-  config: () => ({
-    format: 'HH:mm:ss',
-    color: '#ffffff',
-    fontSize: 48,
-    fontWeight: 'normal',
-    fontFamily: 'Arial',
-    textShadow: false,
-    shadowColor: 'rgba(0,0,0,0.5)',
-    shadowBlur: 4,
-    useGradient: false,
-    gradientColors: ['#ff0000', '#0000ff'],
-    showSeconds: true
-  })
-});
-
-// State for current time
-const currentTime = ref('');
-
-// Update time string based on format
-const updateTime = () => {
-  const currentFormat = props.config.format || 'HH:mm:ss';
-  const format = props.config.showSeconds ? currentFormat : currentFormat.replace(':ss', '');
-  currentTime.value = dayjs().format(format);
-};
-
-// Interval for updating time
-let timeInterval: number | null = null;
-
-// Start the clock
-onMounted(() => {
-  updateTime();
-  
-  // Set interval based on whether seconds are shown
-  const intervalTime = props.config.showSeconds ? 1000 : 60000;
-  timeInterval = window.setInterval(updateTime, intervalTime);
-});
-
-// Clean up interval on component unmount
-onUnmounted(() => {
-  if (timeInterval !== null) {
-    window.clearInterval(timeInterval);
-  }
-});
-
-// Update interval if showSeconds changes
-watch(() => props.config.showSeconds, (newValue) => {
-  if (timeInterval !== null) {
-    window.clearInterval(timeInterval);
-  }
-  
-  const intervalTime = newValue ? 1000 : 60000;
-  timeInterval = window.setInterval(updateTime, intervalTime);
-  updateTime();
-});
-
-// Computed styles for the clock
-const clockStyle = computed(() => {
-  const style: Record<string, string> = {
-    fontSize: `${props.config.fontSize || 48}px`,
-    fontFamily: props.config.fontFamily || 'Arial',
-    fontWeight: props.config.fontWeight || 'normal'
-  };
-  
-  // Apply gradient or solid color
-  if (props.config.useGradient && (props.config.gradientColors || []).length >= 2) {
-    const colors = props.config.gradientColors || ['#ff0000', '#0000ff'];
-    style.backgroundImage = `linear-gradient(to right, ${colors.join(', ')})`;
-    style.webkitBackgroundClip = 'text';
-    style.backgroundClip = 'text';
-    style.color = 'transparent';
-  } else {
-    style.color = props.config.color || '#ffffff';
-  }
-  
-  // Apply text shadow if enabled
-  if (props.config.textShadow) {
-    style.textShadow = `0 0 ${props.config.shadowBlur || 4}px ${props.config.shadowColor || 'rgba(0,0,0,0.5)'}`;
-  }
-  
-  return style;
-});
-</script>
-
-<style scoped>
-.clock-widget {
-  display: inline-block;
-  padding: 10px;
-  font-family: Arial, sans-serif;
-  user-select: none;
-}
-</style>