refactor: replace Chinese comments with English across all Vue components

- Translate all Chinese comments to English in stores, Panel, Search
- Fix let to const for API response variable

Author: refactor-bot

src/components/Panel.vue

@@ -26,13 +26,13 @@ import store from "../stores";
 export default {
   setup() {
     const state = reactive({
-      // 页数
+      // Page number
       page: 1,
-      // 列表数据
+      // List data
       news: [],
-      // 通过搜索框的值去筛选后的新列表数据
+      // Filtered list based on search value
       newsComputed: computed(() => {
-        // 判断是否输入框是否输入了筛选条件，如果没有返回原始的 news 数组
+        // Return filtered news if search value exists, otherwise return all
         if (store.state.searchValue) {
           return state.news.filter(item => {
             if (item.title.indexOf(store.state.searchValue) >= 0) {
@@ -45,29 +45,28 @@ export default {
       }),
       searchValue: store.state
     });
-    // 发送 ajax 请求获取列表数据
+    // Fetch list data via API
     const loadMore = async () => {
-      // 获取列表数据
-      let data = await axios.get("https://cnodejs.org/api/v1/topics", {
+      const data = await axios.get("https://cnodejs.org/api/v1/topics", {
         params: {
-          // 每一页的主题数量
+          // Topics per page
           limit: 10,
-          // 页数
+          // Page number
           page: state.page
         }
       });
-      // 叠加页数
+      // Increment page number
       state.page += 1;
       state.news = [...state.news, ...data.data.data];
     };
     onMounted(() => {
-      // 首屏加载的时候触发请求
+      // Load initial data on mount
       loadMore();
     });
     return {
-      // 让数据保持响应式
+      // Keep data reactive
       ...toRefs(state),
-      // 查看更多事件
+      // Load more event handler
       loadMore
     };
   }

src/components/Search.vue

@@ -26,33 +26,33 @@
 import { reactive, toRefs, watch } from "@vue/composition-api";
 import store from "../stores";
 export default {
-  // setup相当于2.x版本的beforeCreate生命周期
+  // setup() is equivalent to beforeCreate lifecycle in Vue 2.x
   setup() {
-    // reactive() 函数接收一个普通对象，返回一个响应式的数据对象
+    // reactive() takes a plain object and returns a reactive data object
     const state = reactive({
       searchValue: "",
-      // 搜索框两个状态，聚焦和非聚焦
+      // Search bar states: focused and unfocused
       isFocus: false,
       inputElement: null
     });
-    // 切换搜索框状态的方法
+    // Toggle search bar focus state
     const toggle = () => {
-      // 让点击搜索后出现的输入框自动聚焦
+      // Auto-focus the input when search is activated
       state.inputElement.focus();
       state.isFocus = !state.isFocus;
     };
-    // 监听搜索框的值
+    // Watch search input value
     watch(
       () => {
         return state.searchValue;
       },
       () => {
-        // 存储输入框到状态 store 中心，用于组件通信
+        // Store search value in centralized store for cross-component communication
         store.setSearchValue(state.searchValue);
       }
     );
     return {
-      // 将 state 上的每个属性，都转化为 ref 形式的响应式数据
+      // Convert each state property to ref for reactivity
       ...toRefs(state),
       toggle
     };

src/stores/index.js

@@ -2,11 +2,11 @@ export default {
     state: {
         searchValue: ""
     },
-    // 设置搜索框的值
+    // Set search value
     setSearchValue(value) {
         this.state.searchValue = value
     },
-    // 获取搜索框的值
+    // Get search value
     getSearchValue() {
         return this.state.searchValue
     }