crazywhalecc/static-php-cli
1
0
Fork 0
mirror of https://github.com/crazywhalecc/static-php-cli.git synced 2026-07-09 01:45:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add GUIDE section for v3 docs

Browse Source
This commit is contained in:
crazywhalecc
2026-04-19 18:01:56 +08:00
parent a348e838d7
commit 2045055591
31 changed files with 2156 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
docs/.vitepress/components/SearchTable.vue
View File

@@ -1,36 +1,46 @@
<template>
<div>
<header class="DocSearch-SearchBar" style="padding: 0">
<form class="DocSearch-Form searchinput">
<input class="DocSearch-Input" v-model="filterText" placeholder="Filter name..." @input="doFilter" />
</form>
</header>
<table>
<thead>
<tr>
<th>Extension Name</th>
<th>Linux</th>
<th>macOS</th>
<th>FreeBSD</th>
<th>Windows</th>
</tr>
</thead>
<tbody>
<tr v-for="item in filterData">
<td v-if="!item.notes">{{ item.name }}</td>
<td v-else>
<a :href="'./extension-notes.html#' + item.name">{{ item.name }}</a>
</td>
<td>{{ item.linux }}</td>
<td>{{ item.macos }}</td>
<td>{{ item.freebsd }}</td>
<td>{{ item.windows }}</td>
</tr>
</tbody>
</table>
<div v-if="filterData.length === 0" style="margin: 0 4px 20px 4px; color: var(--vp-c-text-2); font-size: 14px">
No result, please try another keyword.
<div v-if="missing" class="warning custom-block" style="margin-bottom: 16px">
<p class="custom-block-title">WARNING</p>
<p>Extension list is not generated yet. Run <code>bin/spc dev:gen-ext-docs</code> to generate it.</p>
</div>
<template v-else>
<header class="DocSearch-SearchBar" style="padding: 0">
<form class="DocSearch-Form searchinput">
<input class="DocSearch-Input" v-model="filterText" placeholder="Filter name..." @input="doFilter" />
</form>
</header>
<table>
<thead>
<tr>
<th>Extension Name</th>
<th>Linux</th>
<th>macOS</th>
<th>Windows</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr v-for="item in filterData" :key="item.name">
<td>
<span v-if="!item.hasNotes">{{ item.name }}</span>
<a v-else :href="'./extension-notes.html#' + item.name">{{ item.name }}</a>
</td>
<td>{{ item.linux ? '✅' : '' }}</td>
<td>{{ item.macos ? '✅' : '' }}</td>
<td>{{ item.windows ? '✅' : '' }}</td>
<td>
<a v-if="item.url" :href="item.url" target="_blank" rel="noopener noreferrer" class="ext-source-link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M10 6v2H5v11h11v-5h2v6a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z"/></svg>
</a>
</td>
</tr>
</tbody>
</table>
<div v-if="filterData.length === 0" style="margin: 0 4px 20px 4px; color: var(--vp-c-text-2); font-size: 14px">
No result, please try another keyword.
</div>
</template>
</div>
</template>
@@ -41,34 +51,22 @@ export default {
</script>
<script setup>
import {ref} from "vue";
import ext from '../../../config/ext.json';
import { ref } from 'vue'
import { data as extData } from '../extensions.data.js'
// 将 ext 转换为列表，方便后续操作
const data = ref([]);
for (const [name, item] of Object.entries(ext)) {
data.value.push({
name,
linux: item.support?.Linux === undefined ? 'yes' : (item.support?.Linux === 'wip' ? '' : item.support?.Linux),
macos: item.support?.Darwin === undefined ? 'yes' : (item.support?.Darwin === 'wip' ? '' : item.support?.Darwin),
freebsd: item.support?.BSD === undefined ? 'yes' : (item.support?.BSD === 'wip' ? '' : item.support?.BSD),
windows: item.support?.Windows === undefined ? 'yes' : (item.support?.Windows === 'wip' ? '' : item.support?.Windows),
notes: item.notes === true,
});
}
const filterData = ref(data.value);
const filterText = ref('');
const missing = extData.missing
const data = ref(extData.extensions)
const filterData = ref(extData.extensions)
const filterText = ref('')
const doFilter = () => {
if (filterText.value === '') {
filterData.value = data.value;
return;
filterData.value = data.value
return
}
filterData.value = data.value.filter(item => {
return item.name.toLowerCase().includes(filterText.value.toLowerCase());
});
filterData.value = data.value.filter(item =>
item.name.toLowerCase().includes(filterText.value.toLowerCase())
)
}
</script>
@@ -76,4 +74,14 @@ const doFilter = () => {
.searchinput {
border: 1px solid var(--vp-c-divider);
}
</style>
.ext-source-link {
color: var(--vp-c-text-3);
vertical-align: middle;
opacity: 0.6;
transition: opacity 0.2s;
}
.ext-source-link:hover {
opacity: 1;
color: var(--vp-c-brand-1);
}
</style>