<?php
// 假设以下函数用于检查请求参数是否存在于数据库中
function check_db_for_param($param) {
    // 伪代码，不代表真实实现
    // 应该使用参数化查询或WordPress的内置函数来避免SQL注入
    global $wpdb;
    $result = $wpdb->get_results("SELECT * FROM table_name WHERE column_name = '{$param}'");
    return $result;
}

// 假设以下函数用于处理视频播放请求
function handle_video_request($video_id) {
    // 伪代码，不代表真实实现
    // 应该对$video_id进行验证和清理
    $video_info = check_db_for_param($video_id);
    if ($video_info) {
        // 视频信息存在于数据库中，继续处理视频播放逻辑
    } else {
        // 视频信息不存在，可能是SQL注入攻击
        // 应该返回错误或重定向到错误页面
    }
}

// 假设以下函数用于处理用户请求
function process_user_request() {
    $video_id = $_GET['video_id'];
    handle_video_request($video_id);
}

// 调用函数处理用户请求
process_user_request();
?>

<template>
  <div
    ref="draggable"
    class="draggable"
    @mousedown="startDrag"
    @touchstart="startDrag"
    :style="{ top: top + 'px', left: left + 'px' }"
  >
    拖动我
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';

export default {
  setup() {
    const draggable = ref<HTMLElement | null>(null);
    const top = ref(0);
    const left = ref(0);

    function startDrag(event: MouseEvent | TouchEvent) {
      const clientX = 'clientX' in event ? (event as MouseEvent).clientX : (event as TouchEvent).touches[0].clientX;
      const clientY = 'clientY' in event ? (event as MouseEvent).clientY : (event as TouchEvent).touches[0].clientY;

      const offsetX = clientX - draggable.value!.offsetLeft;
      const offsetY = clientY - draggable.value!.offsetTop;

      function moveHandler(event: MouseEvent | TouchEvent) {
        const x = 'clientX' in event ? (event as MouseEvent).clientX : (event as TouchEvent).touches[0].clientX;
        const y = 'clientY' in event ? (event as MouseEvent).clientY : (event as TouchEvent).touches[0].clientY;

        top.value = y - offsetY;
        left.value = x - offsetX;
      }

      function upHandler() {
        document.removeEventListener('mousemove', moveHandler);
        document.removeEventListener('mouseup', upHandler);
        document.removeEventListener('touchmove', moveHandler);
        document.removeEventListener('touchend', upHandler);
      }

      document.addEventListener('mousemove', moveHandler);
      document.addEventListener('mouseup', upHandler);
      document.addEventListener('touchmove', moveHandler);
      document.addEventListener('touchend', upHandler);
    }

    return { draggable, top, left, startDrag };
  },
};
</script>

<style>
.draggable {
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
  user-select: none;
}
</style>

function add(a: number, b: number): number {
    return a + b;
}

console.log(add(1, 2)); // 输出: 3

npm install -g typescript

tsc example.ts

// 定义一个简单的颜色枚举
enum Color {
    Red,
    Green,
    Blue
}

// 使用颜色枚举
function printColor(color: Color) {
    switch (color) {
        case Color.Red:
            console.log('红色');
            break;
        case Color.Green:
            console.log('绿色');
            break;
        case Color.Blue:
            console.log('蓝色');
            break;
        default:
            console.log('未知颜色');
            break;
    }
}

// 使用枚举值
printColor(Color.Red); // 输出: 红色
printColor(Color.Green); // 输出: 绿色
printColor(Color.Blue); // 输出: 蓝色

import React, { Component } from 'react';

class ClassName extends Component {
    render() {
        return (
            <View>

            </View>
        );
    }
}

export default ClassName;

import React from 'react';

const FunctionalComponentName = () => {
    return (
        <View>

        </View>
    );
}

export default FunctionalComponentName;

import { createSignal } from 'solid-js';
import { createStore } from 'solid-js/store';

// 定义一个简单的组件
export default function MyComponent(props) {
  // 使用props
  const [name, setName] = createSignal(props.initialName);

  // 使用store
  const [counter, setCounter] = createStore(0);

  // 示例方法，用于增加计数器
  function incrementCounter() {
    setCounter(counter() + 1);
  }

  // 渲染组件
  return (
    <div>
      <h1>Hello, {name()!}!</h1>
      <p>Counter: {counter()}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
}

// 设置默认属性
MyComponent.defaultProps = {
  initialName: 'Guest'
};

// my-lib.d.ts

declare namespace myLib {
  function someFunction(): void;
}

declare global {
  const myLib: typeof myLib;
}

// 在某个 TypeScript 文件中

myLib.someFunction();

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// 配置Jest测试环境
process.env.VITE_TEST = 'true';

export default defineConfig({
  plugins: [vue()],
  test: {
    // 指定Jest的配置
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./tests/setup.js'],
  },
});

// tests/setup.js
import { render } from '@testing-library/vue';
import { describe, it, expect } from 'vitest';

// 示例组件
const MessageComponent = {
  template: '<div>{{ message }}</div>',
  props: ['message'],
};

// 测试用例
describe('MessageComponent', () => {
  it('should display the message', () => {
    const { getByText } = render(MessageComponent, {
      props: {
        message: 'Hello, Vue!',
      },
    });

    // 检查渲染结果是否包含预期的文本
    expect(getByText('Hello, Vue!')).toBeInTheDocument();
  });
});

{
  "compilerOptions": {
    "baseUrl": ".", // 这里设置基础路径为项目根目录
    "paths": {
      "@/*": ["src/*"] // 这里设置一个 @ 别名指向 src 目录下的文件
    }
    // 其他编译选项...
  }
}

import { someFunction } from '@/utils/util';