Skip to content

Commit ca8ec70

Browse files
crazywhalecccrazywhalecc
committed
Update docs vue components
1 parent 3c80211 commit ca8ec70

File tree

6 files changed

+215
-18
lines changed

6 files changed

+215
-18
lines changed

‎docs/.vitepress/components/CliGenerator.vue

+117-16
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,37 @@
22
<div>
33
<h2>{{ I18N[lang].selectedSystem }}</h2>
44
<div class="option-line">
5-
<span v-for="(item, index) in osList" :key="index" style="margin-right: 4px">
5+
<span v-for="(item, index) in osList" :key="index" style="margin-right: 8px">
66
<input type="radio" :id="'os-' + item.os" :value="item.os" :disabled="item.disabled === true" v-model="selectedSystem" />
77
<label :for="'os-' + item.os">{{ item.label }}</label>
88
</span>
99
</div>
10+
<div class="option-line">
11+
<select v-model="selectedArch">
12+
<option value="x86_64">x86_64</option>
13+
<option value="aarch64" :disabled="selectedSystem === 'windows'">aarch64</option>
14+
</select>
15+
</div>
1016
<h2>{{ I18N[lang].selectExt }}{{ checkedExts.length > 0 ? (' (' + checkedExts.length + ')') : '' }}</h2>
1117
<div class="box">
12-
<div v-for="(item, index) in ext" class="ext-item">
13-
<span v-if="isSupported(index, selectedSystem)">
14-
<input type="checkbox" :id="index" :value="index" v-model="checkedExts" :disabled="extDisableList.indexOf(index) !== -1">
15-
<label :for="index">{{ index }}</label>
18+
<input class="input" v-model="filterText" placeholder="Highlight search..." />
19+
<br>
20+
<div v-for="item in extFilter" class="ext-item">
21+
<span>
22+
<input type="checkbox" :id="item" :value="item" v-model="checkedExts" :disabled="extDisableList.indexOf(item) !== -1">
23+
<label :for="item">
24+
<span>{{ highlightItem(item, 0) }}</span>
25+
<span style="color: orangered; font-weight: bolder">{{ highlightItem(item, 1) }}</span>
26+
<span>{{ highlightItem(item, 2) }}</span>
27+
</label>
1628
</span>
1729

1830
</div>
1931
</div>
2032
<div class="my-btn" v-if="selectedSystem !== 'windows'" @click="selectCommon">{{ I18N[lang].selectCommon }}</div>
2133
<div class="my-btn" @click="checkedExts = []">{{ I18N[lang].selectNone }}</div>
2234

23-
<details class="details custom-block">
35+
<details class="details custom-block" open>
2436
<summary>{{ I18N[lang].buildLibs }}{{ checkedLibs.length > 0 ? (' (' + checkedLibs.length + ')') : '' }}</summary>
2537
<div class="box">
2638
<div v-for="(item, index) in libContain" class="ext-item">
@@ -135,24 +147,33 @@
135147
<div class="warning custom-block">
136148
<p class="custom-block-title">WARNING</p>
137149
<p>{{ I18N[lang].windowsDownSPCWarning }}</p>
150+
<a href="https://dl.static-php.dev/static-php-cli/spc-bin/nightly/spc-windows-x64.exe" target="_blank">https://dl.static-php.dev/static-php-cli/spc-bin/nightly/spc-windows-x64.exe</a>
138151
</div>
139152
</div>
140153
</div>
141154
<div v-if="downloadByExt" class="command-container">
142155
<b>{{ I18N[lang].downloadExtOnlyCommand }}</b>
143-
<div class="command-preview">{{ spcCommand }} download --with-php={{ selectedPhpVersion }} --for-extensions "{{ extList }}"{{ preBuilt ? ' --prefer-pre-built' : '' }}{{ debug ? ' --debug' : '' }}</div>
156+
<div id="download-ext-cmd" class="command-preview">
157+
{{ downloadExtCommand }}
158+
</div>
144159
</div>
145160
<div v-else class="command-container">
146161
<b>{{ I18N[lang].downloadAllCommand }}</b>
147-
<div class="command-preview">{{ spcCommand }} download --all --with-php={{ selectedPhpVersion }}{{ preBuilt ? ' --prefer-pre-built' : '' }}{{ debug ? ' --debug' : '' }}</div>
162+
<div id="download-all-cmd" class="command-preview">
163+
{{ downloadAllCommand }}
164+
</div>
148165
</div>
149166
<div class="command-container" v-if="enableUPX">
150167
<b>{{ I18N[lang].downloadUPXCommand }}</b>
151-
<div class="command-preview">{{ spcCommand }} install-pkg upx{{ debug ? ' --debug' : '' }}</div>
168+
<div id="download-pkg-cmd" class="command-preview">
169+
{{ downloadPkgCommand }}
170+
</div>
152171
</div>
153172
<div class="command-container">
154173
<b>{{ I18N[lang].compileCommand }}</b>
155-
<div class="command-preview">{{ spcCommand }} build {{ buildCommand }} "{{ extList }}"{{ additionalLibs }}{{ debug ? ' --debug' : '' }}{{ zts ? ' --enable-zts' : '' }}{{ enableUPX ? ' --with-upx-pack' : '' }}{{ displayINI }}</div>
174+
<div id="build-cmd" class="command-preview">
175+
{{ buildCommandString }}
176+
</div>
156177
</div>
157178
</div>
158179
</template>
@@ -170,6 +191,15 @@ import libData from '../config/lib.json';
170191
import { getAllExtLibsByDeps } from './DependencyUtil.js';
171192
172193
const ext = ref(extData);
194+
const extFilter = computed(() => {
195+
const ls = [];
196+
for (const [name, item] of Object.entries(ext.value)) {
197+
if (isSupported(name, selectedSystem.value)) {
198+
ls.push(name);
199+
}
200+
}
201+
return ls;
202+
});
173203
const lib = ref(libData);
174204
const libContain = ref([]);
175205
@@ -234,7 +264,7 @@ const I18N = {
234264
microUnavailable: 'micro 不支持 PHP 7.4 及更早版本！',
235265
windowsSAPIUnavailable: 'Windows 目前不支持 fpm、embed 构建！',
236266
useUPX: '是否开启 UPX 压缩（减小二进制体积）',
237-
windowsDownSPCWarning: 'Windows 下请手动下载 spc.exe 二进制文件并解压到当前目录！',
267+
windowsDownSPCWarning: 'Windows 下请手动下载 spc.exe 二进制文件，解压到当前目录并重命名为 spc.exe！',
238268
usePreBuilt: '如果可能，下载预编译的依赖库（减少编译时间）',
239269
},
240270
en: {
@@ -268,7 +298,7 @@ const I18N = {
268298
microUnavailable: 'Micro does not support PHP 7.4 and earlier versions!',
269299
windowsSAPIUnavailable: 'Windows does not support fpm and embed build!',
270300
useUPX: 'Enable UPX compression (reduce binary size)',
271-
windowsDownSPCWarning: 'Please download the spc.exe binary file manually and extract it to the current directory on Windows!',
301+
windowsDownSPCWarning: 'Please download the binary file manually, extract it to the current directory and rename to spc.exe on Windows!',
272302
usePreBuilt: 'Download pre-built dependencies if possible (reduce compile time)',
273303
}
274304
};
@@ -325,7 +355,7 @@ const libDisableList = ref([]);
325355
const checkedTargets = ref(['cli']);
326356
327357
// chosen env
328-
const selectedEnv = ref('native');
358+
const selectedEnv = ref('spc');
329359
330360
// chosen php version
331361
const selectedPhpVersion = ref('8.2');
@@ -348,6 +378,13 @@ const enableUPX = ref(0);
348378
const hardcodedINIData = ref('');
349379
350380
const selectedSystem = ref('linux');
381+
382+
watch(selectedSystem, () => {
383+
if (selectedSystem.value === 'windows') {
384+
selectedArch.value = 'x86_64';
385+
}
386+
});
387+
351388
const selectedArch = ref('x86_64');
352389
353390
// spc command string, alt: spc-alpine-docker, spc
@@ -381,6 +418,25 @@ const displayINI = computed(() => {
381418
return ' ' + str.map((x) => '-I "' + x + '"').join(' ');
382419
});
383420
421+
const filterText = ref('');
422+
423+
const highlightItem = (item, step) => {
424+
if (item.includes(filterText.value)) {
425+
if (step === 0) {
426+
return item.substring(0, item.indexOf(filterText.value));
427+
} else if (step === 1) {
428+
return filterText.value;
429+
} else {
430+
return item.substring(item.indexOf(filterText.value) + filterText.value.length);
431+
}
432+
} else {
433+
if (step === 0) {
434+
return item;
435+
}
436+
return '';
437+
}
438+
};
439+
384440
const onTargetChange = (event) => {
385441
let id;
386442
if (checkedTargets.value.indexOf('all') !== -1 && event.target.value === 'all') {
@@ -427,6 +483,22 @@ const calculateExtDepends = (input) => {
427483
return Array.from(result);
428484
};
429485
486+
const downloadAllCommand = computed(() => {
487+
return `${spcCommand.value} download --all --with-php=${selectedPhpVersion.value}${preBuilt.value ? ' --prefer-pre-built' : ''}${debug.value ? ' --debug' : ''}`;
488+
});
489+
490+
const downloadExtCommand = computed(() => {
491+
return `${spcCommand.value} download --with-php=${selectedPhpVersion.value} --for-extensions "${extList.value}"${preBuilt.value ? ' --prefer-pre-built' : ''}${debug.value ? ' --debug' : ''}`;
492+
});
493+
494+
const downloadPkgCommand = computed(() => {
495+
return `${spcCommand.value} install-pkg upx${debug.value ? ' --debug' : ''}`;
496+
});
497+
498+
const buildCommandString = computed(() => {
499+
return `${spcCommand.value} build ${buildCommand.value} "${extList.value}"${additionalLibs.value}${debug.value ? ' --debug' : ''}${zts.value ? ' --enable-zts' : ''}${enableUPX.value ? ' --with-upx-pack' : ''}${displayINI.value}`;
500+
});
501+
430502
const calculateExtLibDepends = (input) => {
431503
const result = new Set();
432504
@@ -539,9 +611,12 @@ h2 {
539611
.command-preview {
540612
padding: 1.2rem;
541613
background: var(--vp-c-divider);
614+
border-radius: 8px;
615+
word-break: break-all;
542616
font-family: monospace;
543617
overflow-wrap: break-word;
544618
}
619+
545620
.option-line {
546621
padding: 4px 8px;
547622
}
@@ -582,12 +657,38 @@ select {
582657
background-color: var(--vp-button-alt-active-bg);
583658
}
584659
.textarea {
585-
border: 1px solid var(--vp-button-alt-border);
586-
padding: 0 4px;
587-
min-width: 300px;
660+
border: 1px solid var(--vp-c-divider);
661+
border-radius: 4px;
662+
width: calc(100% - 12px);
663+
padding: 4px 8px;
664+
}
665+
666+
.input {
667+
display: block;
668+
border: 1px solid var(--vp-c-divider);
669+
border-radius: 4px;
670+
width: 100%;
671+
padding: 4px 8px;
588672
}
589673
590674
.command-container {
591675
margin-bottom: 24px;
592676
}
677+
.modal-button {
678+
padding: 4px 8px;
679+
border-radius: 4px;
680+
border-color: var(--vp-button-alt-border);
681+
color: var(--vp-button-alt-text);
682+
background-color: var(--vp-button-alt-bg);
683+
}
684+
.modal-button:hover {
685+
border-color: var(--vp-button-alt-hover-border);
686+
color: var(--vp-button-alt-hover-text);
687+
background-color: var(--vp-button-alt-hover-bg)
688+
}
689+
.modal-button:active {
690+
border-color: var(--vp-button-alt-active-border);
691+
color: var(--vp-button-alt-active-text);
692+
background-color: var(--vp-button-alt-active-bg)
693+
}
593694
</style>

‎docs/.vitepress/components/SearchTable.vue

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div>
3+
<header class="DocSearch-SearchBar" style="padding: 0">
4+
<form class="DocSearch-Form searchinput">
5+
<input class="DocSearch-Input" v-model="filterText" placeholder="Filter name..." @input="doFilter" />
6+
</form>
7+
</header>
8+
<table>
9+
<thead>
10+
<tr>
11+
<th>Extension Name</th>
12+
<th>Linux</th>
13+
<th>macOS</th>
14+
<th>FreeBSD</th>
15+
<th>Windows</th>
16+
</tr>
17+
</thead>
18+
<tbody>
19+
<tr v-for="item in filterData">
20+
<td v-if="!item.notes">{{ item.name }}</td>
21+
<td v-else>
22+
<a :href="'./extension-notes.html#' + item.name">{{ item.name }}</a>
23+
</td>
24+
<td>{{ item.linux }}</td>
25+
<td>{{ item.macos }}</td>
26+
<td>{{ item.freebsd }}</td>
27+
<td>{{ item.windows }}</td>
28+
</tr>
29+
</tbody>
30+
</table>
31+
<div v-if="filterData.length === 0" style="margin: 0 4px 20px 4px; color: var(--vp-c-text-2); font-size: 14px">
32+
No result, please try another keyword.
33+
</div>
34+
</div>
35+
</template>
36+
37+
<script>
38+
export default {
39+
name: "SearchTable"
40+
}
41+
</script>
42+
43+
<script setup>
44+
import {ref} from "vue";
45+
import ext from '../../../config/ext.json';
46+
47+
// 将 ext 转换为列表，方便后续操作
48+
const data = ref([]);
49+
for (const [name, item] of Object.entries(ext)) {
50+
data.value.push({
51+
name,
52+
linux: item.support?.Linux === undefined ? 'yes' : (item.support?.Linux === 'wip' ? '' : item.support?.Linux),
53+
macos: item.support?.Darwin === undefined ? 'yes' : (item.support?.Darwin === 'wip' ? '' : item.support?.Darwin),
54+
freebsd: item.support?.BSD === undefined ? 'yes' : (item.support?.BSD === 'wip' ? '' : item.support?.BSD),
55+
windows: item.support?.Windows === undefined ? 'yes' : (item.support?.Windows === 'wip' ? '' : item.support?.Windows),
56+
notes: item.notes === true,
57+
});
58+
}
59+
60+
61+
const filterData = ref(data.value);
62+
const filterText = ref('');
63+
64+
const doFilter = () => {
65+
if (filterText.value === '') {
66+
filterData.value = data.value;
67+
return;
68+
}
69+
filterData.value = data.value.filter(item => {
70+
return item.name.toLowerCase().includes(filterText.value.toLowerCase());
71+
});
72+
}
73+
</script>
74+
75+
<style>
76+
.searchinput {
77+
border: 1px solid var(--vp-c-divider);
78+
}
79+
</style>

‎docs/en/guide/cli-generator.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
aside: false
3+
---
4+
15
<script setup lang="ts">
26
import CliGenerator from "../../.vitepress/components/CliGenerator.vue";
37
</script>

‎docs/en/guide/extensions.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1+
<script setup>
2+
import SearchTable from "../../.vitepress/components/SearchTable.vue";
3+
</script>
4+
15
# Extensions
26

37
> - `yes`: supported
48
> - _blank_: not supported yet, or WIP
59
> - `no` with issue link: confirmed to be unavailable due to issue
610
> - `partial` with issue link: supported but not perfect due to issue
711
8-
<!--@include: ../../extensions.md-->
12+
<search-table />
913

1014
::: tip
1115
If an extension you need is missing, you can create a [Feature Request](https://github.com/crazywhalecc/static-php-cli/issues).

‎docs/zh/guide/cli-generator.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
aside: false
3+
---
4+
15
<script setup lang="ts">
26
import CliGenerator from "../../.vitepress/components/CliGenerator.vue";
37
</script>

‎docs/zh/guide/extensions.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1+
<script setup>
2+
import SearchTable from "../../.vitepress/components/SearchTable.vue";
3+
</script>
4+
15
# 扩展列表
26

37
> - `yes`: 已支持
48
> - 空白: 目前还不支持，或正在支持中
59
> - `no` with issue link: 确定不支持或无法支持
610
> - `partial` with issue link: 已支持，但是无法完美工作
711
8-
<!--@include: ../../extensions.md-->
12+
13+
<search-table />
914

1015
::: tip
1116
如果缺少您需要的扩展，您可以创建 [功能请求](https://github.com/crazywhalecc/static-php-cli/issues)。

0 commit comments

Comments
 (0)