ComponentSystem.register('mirrors-table', {
template: `
{{ startTitle[0] }} Debian、Ubuntu、CentOS、openEuler {{ startTitle[1] }}
{{ statusLabels.supported }}
{{ statusLabels.unsupported }}
{{ statusLabels.incompatible }}
{{ startTitle[0] }} Debian、Ubuntu、CentOS、openEuler {{ startTitle[1] }}
`,
data() {
return {
allColumns: mirrorsTableColumns,
columns: mirrorsTableColumns,
originalData: mirrorsTableData,
data: mirrorsTableData.slice(),
rawFilterOptions: mirrorsTableFilterSelectOptions,
selectedColumnFilters: [],
selectedRowFilters: [],
selectedCellStatuses: ['supported', 'unsupported', 'incompatible'],
activeTableFilters: {},
}
},
created() {
const allKeys = this._flattenFilterKeys(this.filterOptions)
this.selectedColumnFilters = allKeys.slice()
this.selectedRowFilters = Array.isArray(this.originalData) ? this.originalData.map((r) => r.name) : []
this._debouncedUpdateColumns = debounce(this._updateColumns.bind(this), 120)
this._debouncedUpdateRows = debounce(this._updateRows.bind(this), 120)
this._updateColumns()
this._updateRows()
},
computed: {
isMobile() {
return window.matchMedia('(max-width: 768px)').matches
},
localeFlags() {
const p = (window && window.location && window.location.pathname) || ''
return {
isZhHant: p.includes('/zh-Hant'),
isEn: p.includes('/en'),
}
},
startTitle() {
const f = this.localeFlags
return f.isZhHant ? ['下方列表中的鏡像站均同步了', '軟體倉庫，列表根據單位性質、地理位置、名稱長度排序，與實際下載速度無關。'] : f.isEn ? ['All mirror sites in the list below synchronize the', 'software repositories. The list is sorted by institution type, geographic location, and name length, and is not related to actual download speed.'] : ['下方列表中的镜像站均同步了', '软件仓库，列表根据单位性质、地理位置、名称长度进行排序，与实际速度无关。']
},
globalConfig() {
const f = this.localeFlags
return {
animation: { include: ['expand', 'fade'], exclude: [] },
table: f.isZhHant
? {
empty: '\u66AB\u7121\u6578\u64DA',
loadingText: '\u6B63\u5728\u8F09\u5165\u4E2D\uFF0C\u8ACB\u7A0D\u5F8C',
loadingMoreText: '\u9EDE\u64CA\u8F09\u5165\u66F4\u591A',
filterInputPlaceholder: '\u8ACB\u8F38\u5165\u5185\u5BB9\uFF08\u7121\u9ED8\u8A8D\u503C\uFF09',
sortAscendingOperationText: '\u9EDE\u64CA\u5347\u5E8F',
sortCancelOperationText: '\u9EDE\u64CA\u53D6\u6D88\u6392\u5E8F',
sortDescendingOperationText: '\u9EDE\u64CA\u964D\u5E8F',
clearFilterResultButtonText: '\u6E05\u7A7A\u7BE9\u9078',
columnConfigButtonText: '\u884C\u914D\u7F6E',
columnConfigTitleText: '\u8868\u683C\u884C\u914D\u7F6E',
columnConfigDescriptionText: '\u8ACB\u9078\u64C7\u9700\u8981\u5728\u8868\u683C\u4E2D\u986F\u793A\u7684\u6578\u64DA\u884C',
confirmText: '\u78BA\u8A8D',
cancelText: '\u53D6\u6D88',
resetText: '\u91CD\u7F6E',
selectAllText: '\u5168\u9078',
searchResultText: '\u641C\u5C0B"{result}"\uFF0C\u627E\u5230{count}\u9805\u7D50\u679C',
}
: f.isEn
? {
empty: 'Empty Data',
loadingText: 'loading...',
loadingMoreText: 'loading more',
filterInputPlaceholder: '',
sortAscendingOperationText: 'click to sort ascending',
sortCancelOperationText: 'click to cancel sorting',
sortDescendingOperationText: 'click to sort descending',
clearFilterResultButtonText: 'Clear',
columnConfigButtonText: 'Column Config',
columnConfigTitleText: 'Table Column Config',
columnConfigDescriptionText: 'Please select columns to show them in the table',
confirmText: 'Confirm',
cancelText: 'Cancel',
resetText: 'Reset',
selectAllText: 'Select All',
searchResultText: 'Search "{result}". Found no items. | Search "{result}". Found 1 item. | Search "{result}". Found {count} items.',
}
: undefined,
select: f.isZhHant
? {
empty: '\u66AB\u7121\u6578\u64DA',
loadingText: '\u8F09\u5165\u4E2D',
placeholder: '\u8ACB\u9078\u64C7',
}
: f.isEn
? {
empty: 'Empty Data',
loadingText: 'loading...',
placeholder: 'please select',
}
: undefined,
}
},
selectPlaceholder() {
const f = this.localeFlags
return f.isZhHant ? '选择要显示的列' : f.isEn ? 'Select columns to show' : '选择要显示的列'
},
rowSelectPlaceholder() {
const f = this.localeFlags
return f.isZhHant ? '筛选显示的镜像' : f.isEn ? 'Filter mirrors to show' : '筛选显示的镜像'
},
rowFilterOptions() {
const f = this.localeFlags
const arr = Array.isArray(this.originalData) ? this.originalData.map((r) => ({ value: r.name, label: r.name, iconName: r.icon })) : []
const head = { value: '__all__', label: f.isZhHant ? '全選' : f.isEn ? 'Select All' : '全选', checkAll: true }
return [head].concat(arr)
},
rowFilterOptionsRendered() {
return Array.isArray(this.rowFilterOptions) ? this.rowFilterOptions.map((o) => this._mapOptionForRow(o)) : []
},
statusLabels() {
const f = this.localeFlags
return {
supported: f.isZhHant ? '支援' : f.isEn ? 'Supported' : '支持',
unsupported: f.isZhHant ? '不支援' : f.isEn ? 'Unsupported' : '不支持',
incompatible: f.isZhHant ? '不相容' : f.isEn ? 'Incompatible' : '不兼容',
}
},
showSupported() {
return Array.isArray(this.selectedCellStatuses) && this.selectedCellStatuses.includes('supported')
},
showUnsupported() {
return Array.isArray(this.selectedCellStatuses) && this.selectedCellStatuses.includes('unsupported')
},
showIncompatible() {
return Array.isArray(this.selectedCellStatuses) && this.selectedCellStatuses.includes('incompatible')
},
filterOptions() {
return Array.isArray(this.rawFilterOptions) ? this.rawFilterOptions.map((o) => this._mapOptionForFilter(o)) : []
},
},
methods: {
dataChange(data) {
try {
const hasColumnFilters = this.activeTableFilters && Object.keys(this.activeTableFilters).length > 0
const hasRowFilters = Array.isArray(this.selectedRowFilters) && this.selectedRowFilters.length > 0
if (hasColumnFilters || hasRowFilters) {
return
}
this.data = data
} catch {}
},
onFilterChange() {
if (this._debouncedUpdateColumns) this._debouncedUpdateColumns()
else this._updateColumns()
},
onRowFilterChange() {
try {
if (Array.isArray(this.selectedRowFilters) && this.selectedRowFilters.includes('__all__')) {
this.selectedRowFilters = Array.isArray(this.originalData) ? this.originalData.map((r) => r.name) : []
}
} catch {}
if (this._debouncedUpdateRows) this._debouncedUpdateRows()
else this._updateRows()
},
getMirrorSiteBranchUrl(domain, branchName) {
return `https://${domain}/${branchName.replace(/_/, '-')}/`
},
_mapOptionForRow(opt) {
const prefix = '/assets/images/icon/mirrors/'
const copy = Object.assign({}, opt)
if (copy.iconName) copy.prefixIcon = prefix + copy.iconName
copy.content = function (h, ctx) {
const option = (ctx && ctx.option) || copy
const children = []
if (option.iconName) {
children.push(h('img', { src: prefix + option.iconName, width: 16, height: 16, style: 'vertical-align: middle' }))
}
children.push(h('span', { style: option.iconName ? 'margin-left: 8px' : '' }, option.label || option.value || ''))
return h('div', { style: 'display: flex; align-items: center' }, children)
}
return copy
},
_mapOptionForFilter(opt) {
const prefix = '/assets/images/icon/'
const copy = Object.assign({}, opt)
if (copy.iconName) copy.prefixIcon = prefix + copy.iconName
copy.content = function (h, ctx) {
const option = (ctx && ctx.option) || copy
const children = []
if (option.iconName) {
children.push(h('img', { src: prefix + option.iconName, width: 16, height: 16, style: 'vertical-align: middle' }))
}
children.push(h('span', { style: option.iconName ? 'margin-left: 8px' : '' }, option.label || option.value || ''))
return h('div', { style: 'display: flex; align-items: center' }, children)
}
if (Array.isArray(copy.children)) {
copy.children = copy.children.map((c) => this._mapOptionForFilter(c))
}
return copy
},
onCellStatusChange() {
if (this._debouncedUpdateRows) this._debouncedUpdateRows()
else this._updateRows()
},
onTableFilterChange(filters) {
try {
this.activeTableFilters = filters || {}
if (this._debouncedUpdateRows) this._debouncedUpdateRows()
else this._updateRows()
} catch {}
},
_updateColumns() {
try {
const keys = new Set(this.selectedColumnFilters || [])
this.columns = this.allColumns.filter((col) => col.colKey === 'name' || keys.has(col.colKey))
} catch (e) {
this.columns = this.allColumns
}
},
_updateRows() {
try {
this._computeFilteredData()
} catch {}
},
_computeFilteredData() {
try {
let rows = Array.isArray(this.originalData) ? this.originalData.slice() : []
if (Array.isArray(this.selectedRowFilters) && this.selectedRowFilters.length) {
const names = new Set(this.selectedRowFilters || [])
rows = rows.filter((r) => names.has(r.name))
}
const filters = this.activeTableFilters || {}
const filterKeys = Object.keys(filters)
if (filterKeys.length) {
rows = rows.filter((row) => {
for (let i = 0; i < filterKeys.length; i++) {
const key = filterKeys[i]
let value = filters[key]
if (Array.isArray(value)) value = value.length ? value[0] : undefined
if (!value) continue
const cell = Object.prototype.hasOwnProperty.call(row, key) ? row[key] : undefined
if (value === 'supported') {
if (cell !== true) return false
} else if (value === 'unsupported') {
if (cell !== false) return false
} else if (value === 'incompatible') {
if (cell !== 'incompatible') return false
} else {
continue
}
}
return true
})
}
this.data = rows
} catch {}
},
_flattenFilterKeys(options) {
const set = new Set()
options.forEach((opt) => {
if (opt.group && Array.isArray(opt.children)) {
opt.children.forEach((child) => {
if (child && child.value) set.add(child.value)
})
} else if (Array.isArray(opt.children)) {
opt.children.forEach((child) => {
if (child && child.value) set.add(child.value)
})
} else if (opt.value) {
set.add(opt.value)
}
})
return Array.from(set)
},
},
})