https://flagos.io/static/js/LearnCenter-DmoITuu8.js

1import { a2 as buildProps, b7 as mutable, a6 as definePropType, M as _export_sfc, d as defineComponent, O as inject, c as computed, V as useNamespace, at as isNumber, ae as isObject, k as createBlock, f as openBlock, q as withCtx, s as renderSlot, n as normalizeStyle, i as normalizeClass, u as unref, R as resolveDynamicComponent, a1 as withInstall, a0 as provide, bh as request, e as createElementBlock, _ as _export_sfc$1, B as useI18n, r as ref, az as reactive, x as watch, o as onMounted, g as createBaseVNode, m as createVNode, y as toDisplayString, l as isRef, aK as ElInput, h as createCommentVNode, F as Fragment, j as renderList, X as withDirectives, Z as vShow, b2 as openLink } from "./index-Ce8AJZqk.js";
2import { E as ElPagination } from "./pagination-DnFpB4UQ.js";
3/* empty css             */
4import "./select-DxaOBKVh.js";
5import { _ as __unplugin_components_1 } from "./Icon-CSYd9LLB.js";
6import { f as formatterDate } from "./time-DvJ6UJV6.js";
7import "./index-BUCO-miO.js";
8import "./strings-B7eRiRvA.js";
9import "./toNumber-CPfa83z5.js";
10import "./scroll-apqiNVnk.js";
11import "./_baseIteratee-BXtlFe7S.js";
12import "./vnode-BeC15RXf.js";
13import "./zh-cn-CDRrKGLX.js";
14const colProps = buildProps({
15  tag: {
16    type: String,
17    default: "div"
18  },
19  span: {
20    type: Number,
21    default: 24
22  },
23  offset: {
24    type: Number,
25    default: 0
26  },
27  pull: {
28    type: Number,
29    default: 0
30  },
31  push: {
32    type: Number,
33    default: 0
34  },
35  xs: {
36    type: definePropType([Number, Object]),
37    default: () => mutable({})
38  },
39  sm: {
40    type: definePropType([Number, Object]),
41    default: () => mutable({})
42  },
43  md: {
44    type: definePropType([Number, Object]),
45    default: () => mutable({})
46  },
47  lg: {
48    type: definePropType([Number, Object]),
49    default: () => mutable({})
50  },
51  xl: {
52    type: definePropType([Number, Object]),
53    default: () => mutable({})
54  }
55});
56const rowContextKey = Symbol("rowContextKey");
57const __default__$1 = defineComponent({
58  name: "ElCol"
59});
60const _sfc_main$3 = /* @__PURE__ */ defineComponent({
61  ...__default__$1,
62  props: colProps,
63  setup(__props) {
64    const props = __props;
65    const { gutter } = inject(rowContextKey, { gutter: computed(() => 0) });
66    const ns = useNamespace("col");
67    const style = computed(() => {
68      const styles = {};
69      if (gutter.value) {
70        styles.paddingLeft = styles.paddingRight = `${gutter.value / 2}px`;
71      }
72      return styles;
73    });
74    const colKls = computed(() => {
75      const classes = [];
76      const pos = ["span", "offset", "pull", "push"];
77      pos.forEach((prop) => {
78        const size = props[prop];
79        if (isNumber(size)) {
80          if (prop === "span")
81            classes.push(ns.b(`${props[prop]}`));
82          else if (size > 0)
83            classes.push(ns.b(`${prop}-${props[prop]}`));
84        }
85      });
86      const sizes = ["xs", "sm", "md", "lg", "xl"];

87      sizes.forEach((size) => {
88        if (isNumber(props[size])) {
89          classes.push(ns.b(`${size}-${props[size]}`));
90        } else if (isObject(props[size])) {
91          Object.entries(props[size]).forEach(([prop, sizeProp]) => {
92            classes.push(prop !== "span" ? ns.b(`${size}-${prop}-${sizeProp}`) : ns.b(`${size}-${sizeProp}`));
93          });
94        }
95      });
96      if (gutter.value) {
97        classes.push(ns.is("guttered"));
98      }
99      return [ns.b(), classes];
100    });
101    return (_ctx, _cache) => {
102      return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
103        class: normalizeClass(unref(colKls)),
104        style: normalizeStyle(unref(style))
105      }, {
106        default: withCtx(() => [
107          renderSlot(_ctx.$slots, "default")
108        ]),
109        _: 3
110      }, 8, ["class", "style"]);
111    };
112  }
113});
114var Col = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "col.vue"]]);
115const ElCol = withInstall(Col);
116const RowJustify = [
117  "start",
118  "center",
119  "end",
120  "space-around",
121  "space-between",
122  "space-evenly"
123];
124const RowAlign = ["top", "middle", "bottom"];
125const rowProps = buildProps({
126  tag: {
127    type: String,
128    default: "div"
129  },
130  gutter: {
131    type: Number,
132    default: 0
133  },
134  justify: {
135    type: String,
136    values: RowJustify,
137    default: "start"
138  },
139  align: {
140    type: String,
141    values: RowAlign
142  }
143});
144const __default__ = defineComponent({
145  name: "ElRow"
146});
147const _sfc_main$2 = /* @__PURE__ */ defineComponent({
148  ...__default__,
149  props: rowProps,
150  setup(__props) {
151    const props = __props;
152    const ns = useNamespace("row");
153    const gutter = computed(() => props.gutter);
154    provide(rowContextKey, {
155      gutter
156    });
157    const style = computed(() => {
158      const styles = {};
159      if (!props.gutter) {
160        return styles;
161      }
162      styles.marginRight = styles.marginLeft = `-${props.gutter / 2}px`;
163      return styles;
164    });
165    const rowKls = computed(() => [
166      ns.b(),
167      ns.is(`justify-${props.justify}`, props.justify !== "start"),
168      ns.is(`align-${props.align}`, !!props.align)
169    ]);
170    return (_ctx, _cache) => {
171      return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
172        class: normalizeClass(unref(rowKls)),
173        style: normalizeStyle(unref(style))
174      }, {
175        default: withCtx(() => [
176          renderSlot(_ctx.$slots, "default")
177        ]),
178        _: 3
179      }, 8, ["class", "style"]);
180    };
181  }
182});
183var Row = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "row.vue"]]);
184const ElRow = withInstall(Row);
185const geVideos = () => {
186  return request({
187    method: "get",
188    url: `/videos/`
189  }).then((res) => res.data);
190};
191const _hoisted_1$1 = ["innerHTML"];
192const _sfc_main$1 = /* @__PURE__ */ defineComponent({
193  __name: "HighlightText",
194  props: {
195    text: { default: "" },
196    match: { default: "" },
197    ignoreCase: { type: Boolean, default: false }
198  },
199  setup(__props) {
200    const highlighted = computed(() => {
201      if (!__props.match) return __props.text;
202      const escaped = __props.match.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
203      const flags = __props.ignoreCase ? "gi" : "g";
204      const regex = new RegExp(escaped, flags);
205      return __props.text.replace(regex, (match) => `<span class="text-red-500">${match}</span>`);
206    });
207    return (_ctx, _cache) => {
208      return openBlock(), createElementBlock("span", { innerHTML: unref(highlighted) }, null, 8, _hoisted_1$1);
209    };
210  }
211});
212const HighlightText = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["__scopeId", "data-v-59056351"]]);
213const _hoisted_1 = {
214  class: "min-h-[calc(100vh-192px)] bg-linear"
215};
216const _hoisted_2 = {
217  class: "pt-116 flex-center"
218};
219const _hoisted_3 = {
220  class: "text-18 font-500 leading-25 mr-24"
221};
222const _hoisted_4 = {
223  class: "mt-32 w-900 mx-auto flex-col"
224};
225const _hoisted_5 = {
226  class: "mb-48"
227};
228const _hoisted_6 = {
229  class: "flex flex-col cursor-pointer h-full items-stretch"
230};
231const _hoisted_7 = {
232  class: "h-162px w-288px"
233};
234const _hoisted_8 = ["src"];
235const _hoisted_9 = {
236  class: "mt-12 mb-11 font-500 leading-20 min-h-40 flex-1"
237};
238const _hoisted_10 = {
239  class: "text-10 color-secondColor leading-16"
240};
241const _hoisted_11 = {
242  key: 0,
243  class: "mt-18px flex justify-end"
244};

245const _sfc_main = /* @__PURE__ */ defineComponent({
246  __name: "LearnCenter",
247  setup(__props) {
248    const {
249      t
250    } = useI18n();
251    const search = ref("");
252    const searchIcon = () => createVNode(__unplugin_components_1, {
253      "icon": "svg-icon:search",
254      "color": "#3967E9",
255      "size": 14
256    }, null);
257    const totalVideo = ref([]);
258    const state = reactive({
259      currentPage: 1,
260      pageSize: 12,
261      total: void 0
262    });
263    const resultVideo = ref([]);
264    const handleClick = (url) => {
265      openLink(url);
266    };
267    let filterd = [];
268    watch(() => [totalVideo.value, search.value], () => {
269      filterd = totalVideo.value.filter((item) => item.title.toLowerCase().includes(search.value.toLowerCase()));
270      resultVideo.value = filterd.slice(state.pageSize * (state.currentPage - 1), state.pageSize * state.currentPage);
271      state.total = filterd.length;
272    });
273    const handleCurrentChange = (val) => {
274      state.currentPage = val;
275      resultVideo.value = filterd.slice(state.pageSize * (val - 1), state.pageSize * state.currentPage);
276    };
277    onMounted(async () => {
278      totalVideo.value = await geVideos();
279    });
280    return (_ctx, _cache) => {
281      const _component_el_input = ElInput;
282      const _component_el_col = ElCol;
283      const _component_el_row = ElRow;
284      const _component_el_pagination = ElPagination;
285      return openBlock(), createElementBlock("div", _hoisted_1, [createBaseVNode("div", _hoisted_2, [createBaseVNode("span", _hoisted_3, toDisplayString(unref(t)("learn.techTalks")), 1), createVNode(_component_el_input, {
286        clearable: "",
287        class: "h-36 !w-480px",
288        "prefix-icon": searchIcon,
289        modelValue: unref(search),
290        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(search) ? search.value = $event : null),
291        placeholder: unref(t)("learnCenter.search")
292      }, null, 8, ["modelValue", "placeholder"])]), createBaseVNode("div", _hoisted_4, [createBaseVNode("div", _hoisted_5, [createVNode(_component_el_row, {
293        gutter: 18
294      }, {
295        default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(resultVideo), (item) => {
296          return openBlock(), createBlock(_component_el_col, {
297            span: 8,
298            key: item.id,
299            onClick: ($event) => handleClick(item.url)
300          }, {
301            default: withCtx(() => [createBaseVNode("div", _hoisted_6, [createBaseVNode("div", _hoisted_7, [withDirectives(createBaseVNode("img", {
302              src: item.cover_img_url,
303              class: "h-full w-full object-cover rounded-8px"
304            }, null, 8, _hoisted_8), [[vShow, item.cover_img_url]])]), createBaseVNode("span", _hoisted_9, [createVNode(HighlightText, {
305              text: item.title,
306              match: unref(search),
307              ignoreCase: true
308            }, null, 8, ["text", "match"])]), createBaseVNode("span", _hoisted_10, toDisplayString(unref(formatterDate)(item.created_at, "YYYY-MM-DD")), 1)])]),
309            _: 2
310          }, 1032, ["onClick"]);
311        }), 128))]),
312        _: 1
313      }), unref(state).total > unref(state).pageSize ? (openBlock(), createElementBlock("div", _hoisted_11, [createVNode(_component_el_pagination, {
314        "current-page": unref(state).currentPage,
315        "onUpdate:currentPage": _cache[1] || (_cache[1] = ($event) => unref(state).currentPage = $event),
316        "page-size": unref(state).pageSize,
317        layout: "total, prev, pager, next, jumper",
318        background: "",
319        total: unref(state).total,
320        size: "small",
321        onCurrentChange: handleCurrentChange
322      }, null, 8, ["current-page", "page-size", "total"])])) : createCommentVNode("", true)])])]);
323    };
324  }
325});
326const LearnCenter = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__scopeId", "data-v-65fd559e"]]);
327export {
328  LearnCenter as default
329};
330//# sourceMappingURL=LearnCenter-DmoITuu8.js.map