### Vue CLI Development Commands (Bash)

Source: https://context7.com/zerotrac/leetcode_problem_rating/llms.txt

Standard commands for managing a Vue.js project using Vue CLI. Includes installation, development server startup, production build, and linting. The build command can be extended to copy necessary data files to the distribution directory.

```bash
# Install dependencies
npm install

# Start development server with hot-reload
npm run serve

# Build for production (outputs to ./dist with data files)
npm run build

# Lint and fix files
npm run lint

# Production build includes copying data files:
# vue-cli-service build && cp data.json ratings.txt LICENSE README.md gen.py ./dist
```

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

### Vue i18n Setup and Usage (TypeScript)

Source: https://context7.com/zerotrac/leetcode_problem_rating/llms.txt

Configures internationalization for the Vue application using vue-i18n. It sets up default and persistent locales, provides a function to switch locales, and demonstrates message definitions and template usage. Dependencies include 'vue-i18n'.

```typescript
import { createI18n } from "vue-i18n";
import messages from "./locale";

const defaultLocale = navigator.language.substring(0, 2) || "en";
const locale = localStorage.getItem("locale");
const i18n = createI18n({
  locale: locale ? locale : defaultLocale,
  fallbackLocale: "en",
  messages,
});

// Switching locale in component:
function switchLocale(locale: string) {
  i18n.locale.value = locale;
  localStorage.setItem("locale", locale);
}

// Locale messages (src/locale/en.ts):
export default {
  lang: "Language",
  keyword: "Keyword",
  placeholder: "type a keyword",
  contestNumber: "Contest number",
  ratingInterval: "Rating interval",
  reset: "Reset",
  problemName: "Title",
  contestName: "Contest",
  rating: "Rating",
};

// Usage in template:
<el-form-item :label="$t('keyword')">
  <el-input :placeholder="$t('placeholder')" v-model="keyword" />
</el-form-item>
```

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

### Problem Data Structure Definition (TypeScript)

Source: https://context7.com/zerotrac/leetcode_problem_rating/llms.txt

Defines the TypeScript interface for LeetCode problem data, including contest information, problem identifiers, titles in English and Chinese, and calculated difficulty ratings. It also provides an example of the data structure as it might appear in a JSON file.

```typescript
interface Problem {
  ContestID_en: string;      // "Weekly Contest 408"
  ContestID_zh: string;      // "第 408 场周赛"
  ContestSlug: string;       // "weekly-contest-408"
  ID: number;                // Problem ID (e.g., 3235)
  ProblemIndex: string;      // Position in contest (Q1-Q4)
  Rating: number;            // Difficulty rating (e.g., 3773.76)
  Title: string;             // English title
  TitleSlug: string;         // URL slug for problem
  TitleZH: string;           // Chinese title
  ProblemHrefZH: string;     // LeetCode China URL
  ProblemHrefEN: string;     // LeetCode Global URL
  ContestHrefEN: string;     // Contest URL (Global)
  ContestHrefZH: string;     // Contest URL (China)
}

// Example problem data from data.json:
{
  "Rating": 3773.7596150919,
  "ID": 3235,
  "Title": "Check if the Rectangle Corner Is Reachable",
  "TitleZH": "判断矩形的两个角落是否可达",
  "TitleSlug": "check-if-the-rectangle-corner-is-reachable",
  "ContestSlug": "weekly-contest-408",
  "ProblemIndex": "Q4",
  "ContestID_en": "Weekly Contest 408",
  "ContestID_zh": "第 408 场周赛"
}
```

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

### Loading and Enriching Problem Data (TypeScript)

Source: https://context7.com/zerotrac/leetcode_problem_rating/llms.txt

Fetches problem rating data from a local JSON file using Axios upon component mount. It then iterates through the fetched problems, enriching each one by generating specific URLs for LeetCode China and Global problem and contest pages. The enriched data is stored in a reactive array.

```typescript
import axios, { AxiosResponse } from "axios";

const url = "./data.json";
const problemSetAll: Array<Problem> = reactive([]);

onMounted(() => {
  axios.get(url).then((res: AxiosResponse<Array<Problem>>) => {
    const problems = res.data;
    problems.forEach((item) => {
      // Generate URLs for problem links
      item.ProblemHrefZH = "https://leetcode.cn/problems/" + item.TitleSlug;
      item.ProblemHrefEN = "https://leetcode.com/problems/" + item.TitleSlug;
      item.ContestHrefZH = "https://leetcode.cn/contest/" + item.ContestSlug;
      item.ContestHrefEN = "https://leetcode.com/contest/" + item.ContestSlug;
      problemSetAll.push(item);
    });
    query(); // Initial query to populate display
  });
});
```

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

### Paginate LeetCode Problem Results (TypeScript)

Source: https://context7.com/zerotrac/leetcode_problem_rating/llms.txt

Manages the pagination of filtered LeetCode problems, allowing users to navigate through results. It supports configurable page sizes that are persisted in localStorage. The `currentChange` function updates the displayed problem set for the current page, while `sizeChange` resets to the first page when the page size is altered.

```typescript
const pageSizeCache = localStorage.getItem("pageSize");
let pageSize = ref(pageSizeCache ? parseInt(pageSizeCache) : 15);
let currentPage = ref(1);
const problemSetShow: Array<Problem> = reactive([]);

function currentChange() {
  problemSetShow.length = 0;
  let no = currentPage.value;
  let size = pageSize.value;
  let total = filterProblemSet.length;

  for (let i = (no - 1) * size; i < Math.min(total, no * size); i++) {
    problemSetShow.push(filterProblemSet[i]);
  }
}

function sizeChange() {
  currentPage.value = 1;
  localStorage.setItem("pageSize", String(pageSize.value));
  currentChange();
}

// Pagination component:
<el-pagination
  :page-sizes="[10, 15, 20, 30, 40, 50, 100]"
  v-model:page-size="pageSize"
  v-model:current-page="currentPage"
  layout="total, sizes, prev, pager, next, jumper"
  :total="filterProblemSet.length"
  @current-change="currentChange"
  @size-change="sizeChange"
/>

```

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

### LeetCode Data Generation Script (Python)

Source: https://context7.com/zerotrac/leetcode_problem_rating/llms.txt

A Python script to parse raw LeetCode ratings data from 'ratings.txt' and generate a 'data.json' file. It converts contest slugs into human-readable contest names in both English and Chinese. Input is a tab-separated file, and output is a JSON file.

```python
import json

# Parse tab-separated ratings file
raw_data = [[y for y in x.strip().split("\t") if y] for x in open("ratings.txt")]
title = [x.replace(" ", "")] + ["ContestID_en"] + ["ContestID_zh"]
body = raw_data[1:]

def contest_slug_to_id_en(contest_slug: str) -> str:
    idx = contest_slug.split("-")[-1]
    if contest_slug.startswith("bi"):
        return f"Biweekly Contest {idx}"
    return f"Weekly Contest {idx}"

def contest_slug_to_id_zh(contest_slug: str) -> str:
    idx = contest_slug.split("-")[-1]
    if contest_slug.startswith("bi"):
        return f"第 {idx} 场双周赛"
    return f"第 {idx} 场周赛"

obj = list()
for line in body:
    line = [float(line[0]), int(line[1]), line[2], line[3], line[4], line[5], line[6],
            contest_slug_to_id_en(line[5]), contest_slug_to_id_zh(line[5])]
    obj.append({k: v for k, v in zip(title, line)})

with open("data.json", "w") as fout:
    json.dump(obj, fout)

# Run: python gen.py
# Input: ratings.txt (tab-separated: Rating, ID, Title, TitleZH, TitleSlug, ContestSlug, ProblemIndex)
# Output: data.json with all problem data including generated contest names
```

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

### Filter LeetCode Problems by Criteria (TypeScript)

Source: https://context7.com/zerotrac/leetcode_problem_rating/llms.txt

Filters a set of LeetCode problems based on keyword search (title, ID, slug), contest number, and a rating range. It then sorts the filtered results according to specified criteria. Dependencies include Vue refs and Element Plus messages.

```typescript
let keyword = ref("");
let contestIndex = ref(null);
let left = ref(null);   // Minimum rating
let right = ref(null);  // Maximum rating

function query() {
  // Validate rating range
  if (left.value != null && right.value != null && right.value < left.value) {
    ElMessage.error({ message: "left must less than right", duration: 1000 });
    return;
  }

  filterProblemSet.length = 0;
  problemSetAll.forEach((item) => {
    // Keyword filter - matches title (EN/ZH), slug, or ID
    if (keyword.value.trim().length > 0) {
      let k = keyword.value.trim().toLowerCase();
      if (
        !item.TitleZH.toLowerCase().includes(k) &&
        !item.Title.toLowerCase().includes(k) &&
        !item.TitleSlug.toLowerCase().includes(k) &&
        !String(item.ID).includes(k)
      ) {
        return;
      }
    }

    // Contest number filter
    if (contestIndex.value != null) {
      let index = parseInt(item.ContestSlug.replace(/\D/gi, ""));
      if (index != contestIndex.value) {
        return;
      }
    }

    // Rating range filter
    if (left.value != null && Math.round(item.Rating) < left.value) return;
    if (right.value != null && Math.round(item.Rating) > right.value) return;

    filterProblemSet.push(item);
  });

  // Sort results
  filterProblemSet.sort((a: Problem, b: Problem) => {
    if (sortInfo.order === "descending") {
      return b[sortInfo.prop] - a[sortInfo.prop];
    }
    return a[sortInfo.prop] - b[sortInfo.prop];
  });

  sizeChange(); // Update pagination
}

// Usage examples:
// Search for "array" problems: keyword.value = "array"; query();
// Find problems from contest 408: contestIndex.value = 408; query();
// Find problems rated 1500-2000: left.value = 1500; right.value = 2000; query();

```

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

### Sort LeetCode Problem Results (TypeScript)

Source: https://context7.com/zerotrac/leetcode_problem_rating/llms.txt

Handles sorting of LeetCode problems by 'Rating' or 'ID' in ascending or descending order. It updates the global sort information and triggers a re-query of the problem set. This function is designed to be used with a table's sort change event.

```typescript
interface SortInfo {
  prop: "Rating" | "ID";
  order: string;
}

let sortInfo = reactive({
  prop: "ID",
  order: "descending",
} as SortInfo);

function sortChange(s: SortInfo) {
  if (s.prop == null) {
    // Reset to default sort
    sortInfo.order = "descending";
    sortInfo.prop = "ID";
  } else {
    sortInfo.order = s.order;
    sortInfo.prop = s.prop;
  }
  query();
}

// Table configuration with sortable columns:
<el-table
  :data="problemSetShow"
  @sort-change="sortChange"
  :default-sort="{ prop: 'ID', order: 'descending' }"
>
  <el-table-column prop="ID" label="ID" sortable="custom" />
  <el-table-column prop="Rating" :label="$t('rating')" sortable="custom">
    <template #default="scope">
      {{ Math.round(scope.row.Rating) }}
    </template>
  </el-table-column>
</el-table>

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.