Update docs vue components

crazywhalecc · crazywhalecc · commit ca8ec70c4075 · 2024-10-05T15:34:10.000+08:00
diff --git a/docs/.vitepress/components/CliGenerator.vue b/docs/.vitepress/components/CliGenerator.vue
@@ -2,25 +2,37 @@
   <div>
     <h2>{{ I18N[lang].selectedSystem }}</h2>
     <div class="option-line">
-      <span v-for="(item, index) in osList" :key="index" style="margin-right: 4px">
+      <span v-for="(item, index) in osList" :key="index" style="margin-right: 8px">
         <input type="radio" :id="'os-' + item.os" :value="item.os" :disabled="item.disabled === true" v-model="selectedSystem" />
         <label :for="'os-' + item.os">{{ item.label }}</label>
       </span>
     </div>
+    <div class="option-line">
+      <select v-model="selectedArch">
+        <option value="x86_64">x86_64</option>
+        <option value="aarch64" :disabled="selectedSystem === 'windows'">aarch64</option>
+      </select>
+    </div>
     <h2>{{ I18N[lang].selectExt }}{{ checkedExts.length > 0 ? (' (' + checkedExts.length + ')') : '' }}</h2>
     <div class="box">
-      <div v-for="(item, index) in ext" class="ext-item">
-        <span v-if="isSupported(index, selectedSystem)">
-          <input type="checkbox" :id="index" :value="index" v-model="checkedExts" :disabled="extDisableList.indexOf(index) !== -1">
-          <label :for="index">{{ index }}</label>
+      <input class="input" v-model="filterText" placeholder="Highlight search..." />
+      <br>
+      <div v-for="item in extFilter" class="ext-item">
+        <span>
+          <input type="checkbox" :id="item" :value="item" v-model="checkedExts" :disabled="extDisableList.indexOf(item) !== -1">
+          <label :for="item">
+            <span>{{ highlightItem(item, 0) }}</span>
+            <span style="color: orangered; font-weight: bolder">{{ highlightItem(item, 1) }}</span>
+            <span>{{ highlightItem(item, 2) }}</span>
+          </label>
         </span>
 
       </div>
     </div>
     <div class="my-btn" v-if="selectedSystem !== 'windows'" @click="selectCommon">{{ I18N[lang].selectCommon }}</div>
     <div class="my-btn" @click="checkedExts = []">{{ I18N[lang].selectNone }}</div>
 
-    <details class="details custom-block">
+    <details class="details custom-block" open>
       <summary>{{ I18N[lang].buildLibs }}{{ checkedLibs.length > 0 ? (' (' + checkedLibs.length + ')') : '' }}</summary>
       <div class="box">
         <div v-for="(item, index) in libContain" class="ext-item">
@@ -135,24 +147,33 @@
         <div class="warning custom-block">
           <p class="custom-block-title">WARNING</p>
           <p>{{ I18N[lang].windowsDownSPCWarning }}</p>
+          <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>
         </div>
       </div>
     </div>
     <div v-if="downloadByExt" class="command-container">
       <b>{{ I18N[lang].downloadExtOnlyCommand }}</b>
-      <div class="command-preview">{{ spcCommand }} download --with-php={{ selectedPhpVersion }} --for-extensions "{{ extList }}"{{ preBuilt ? ' --prefer-pre-built' : '' }}{{ debug ? ' --debug' : '' }}</div>
+      <div id="download-ext-cmd" class="command-preview">
+        {{ downloadExtCommand }}
+      </div>
     </div>
     <div v-else class="command-container">
       <b>{{ I18N[lang].downloadAllCommand }}</b>
-      <div class="command-preview">{{ spcCommand }} download --all --with-php={{ selectedPhpVersion }}{{ preBuilt ? ' --prefer-pre-built' : '' }}{{ debug ? ' --debug' : '' }}</div>
+      <div id="download-all-cmd" class="command-preview">
+        {{ downloadAllCommand }}
+      </div>
     </div>
     <div class="command-container" v-if="enableUPX">
       <b>{{ I18N[lang].downloadUPXCommand }}</b>
-      <div class="command-preview">{{ spcCommand }} install-pkg upx{{ debug ? ' --debug' : '' }}</div>
+      <div id="download-pkg-cmd" class="command-preview">
+        {{ downloadPkgCommand }}
+      </div>
     </div>
     <div class="command-container">
       <b>{{ I18N[lang].compileCommand }}</b>
-      <div class="command-preview">{{ spcCommand }} build {{ buildCommand }} "{{ extList }}"{{ additionalLibs }}{{ debug ? ' --debug' : '' }}{{ zts ? ' --enable-zts' : '' }}{{ enableUPX ? ' --with-upx-pack' : '' }}{{ displayINI }}</div>
+      <div id="build-cmd" class="command-preview">
+        {{ buildCommandString }}
+      </div>
     </div>
   </div>
 </template>
@@ -170,6 +191,15 @@ import libData from '../config/lib.json';
 import { getAllExtLibsByDeps } from './DependencyUtil.js';
 
 const ext = ref(extData);
+const extFilter = computed(() => {
+  const ls = [];
+  for (const [name, item] of Object.entries(ext.value)) {
+    if (isSupported(name, selectedSystem.value)) {
+      ls.push(name);
+    }
+  }
+  return ls;
+});
 const lib = ref(libData);
 const libContain = ref([]);
 
@@ -234,7 +264,7 @@ const I18N = {
     microUnavailable: 'micro 不支持 PHP 7.4 及更早版本！',
     windowsSAPIUnavailable: 'Windows 目前不支持 fpm、embed 构建！',
     useUPX: '是否开启 UPX 压缩（减小二进制体积）',
-    windowsDownSPCWarning: 'Windows 下请手动下载 spc.exe 二进制文件并解压到当前目录！',
+    windowsDownSPCWarning: 'Windows 下请手动下载 spc.exe 二进制文件，解压到当前目录并重命名为 spc.exe！',
     usePreBuilt: '如果可能，下载预编译的依赖库（减少编译时间）',
   },
   en: {
@@ -268,7 +298,7 @@ const I18N = {
     microUnavailable: 'Micro does not support PHP 7.4 and earlier versions!',
     windowsSAPIUnavailable: 'Windows does not support fpm and embed build!',
     useUPX: 'Enable UPX compression (reduce binary size)',
-    windowsDownSPCWarning: 'Please download the spc.exe binary file manually and extract it to the current directory on Windows!',
+    windowsDownSPCWarning: 'Please download the binary file manually, extract it to the current directory and rename to spc.exe on Windows!',
     usePreBuilt: 'Download pre-built dependencies if possible (reduce compile time)',
   }
 };
@@ -325,7 +355,7 @@ const libDisableList = ref([]);
 const checkedTargets = ref(['cli']);
 
 // chosen env
-const selectedEnv = ref('native');
+const selectedEnv = ref('spc');
 
 // chosen php version
 const selectedPhpVersion = ref('8.2');
@@ -348,6 +378,13 @@ const enableUPX = ref(0);
 const hardcodedINIData = ref('');
 
 const selectedSystem = ref('linux');
+
+watch(selectedSystem, () => {
+  if (selectedSystem.value === 'windows') {
+    selectedArch.value = 'x86_64';
+  }
+});
+
 const selectedArch = ref('x86_64');
 
 // spc command string, alt: spc-alpine-docker, spc
@@ -381,6 +418,25 @@ const displayINI = computed(() => {
   return ' ' + str.map((x) => '-I "' + x + '"').join(' ');
 });
 
+const filterText = ref('');
+
+const highlightItem = (item, step) => {
+  if (item.includes(filterText.value)) {
+    if (step === 0) {
+      return item.substring(0, item.indexOf(filterText.value));
+    } else if (step === 1) {
+      return filterText.value;
+    } else {
+      return item.substring(item.indexOf(filterText.value) + filterText.value.length);
+    }
+  } else {
+    if (step === 0) {
+      return item;
+    }
+    return '';
+  }
+};
+
 const onTargetChange = (event) => {
   let id;
   if (checkedTargets.value.indexOf('all') !== -1 && event.target.value === 'all') {
@@ -427,6 +483,22 @@ const calculateExtDepends = (input) => {
   return Array.from(result);
 };
 
+const downloadAllCommand = computed(() => {
+  return `${spcCommand.value} download --all --with-php=${selectedPhpVersion.value}${preBuilt.value ? ' --prefer-pre-built' : ''}${debug.value ? ' --debug' : ''}`;
+});
+
+const downloadExtCommand = computed(() => {
+  return `${spcCommand.value} download --with-php=${selectedPhpVersion.value} --for-extensions "${extList.value}"${preBuilt.value ? ' --prefer-pre-built' : ''}${debug.value ? ' --debug' : ''}`;
+});
+
+const downloadPkgCommand = computed(() => {
+  return `${spcCommand.value} install-pkg upx${debug.value ? ' --debug' : ''}`;
+});
+
+const buildCommandString = computed(() => {
+  return `${spcCommand.value} build ${buildCommand.value} "${extList.value}"${additionalLibs.value}${debug.value ? ' --debug' : ''}${zts.value ? ' --enable-zts' : ''}${enableUPX.value ? ' --with-upx-pack' : ''}${displayINI.value}`;
+});
+
 const calculateExtLibDepends = (input) => {
   const result = new Set();
 
@@ -539,9 +611,12 @@ h2 {
 .command-preview {
   padding: 1.2rem;
   background: var(--vp-c-divider);
+  border-radius: 8px;
+  word-break: break-all;
   font-family: monospace;
   overflow-wrap: break-word;
 }
+
 .option-line {
   padding: 4px 8px;
 }
@@ -582,12 +657,38 @@ select {
   background-color: var(--vp-button-alt-active-bg);
 }
 .textarea {
-  border: 1px solid var(--vp-button-alt-border);
-  padding: 0 4px;
-  min-width: 300px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  width: calc(100% - 12px);
+  padding: 4px 8px;
+}
+
+.input {
+  display: block;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  width: 100%;
+  padding: 4px 8px;
 }
 
 .command-container {
   margin-bottom: 24px;
 }
+.modal-button {
+  padding: 4px 8px;
+  border-radius: 4px;
+  border-color: var(--vp-button-alt-border);
+  color: var(--vp-button-alt-text);
+  background-color: var(--vp-button-alt-bg);
+}
+.modal-button:hover {
+  border-color: var(--vp-button-alt-hover-border);
+  color: var(--vp-button-alt-hover-text);
+  background-color: var(--vp-button-alt-hover-bg)
+}
+.modal-button:active {
+  border-color: var(--vp-button-alt-active-border);
+  color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg)
+}
 </style>
diff --git a/docs/.vitepress/components/SearchTable.vue b/docs/.vitepress/components/SearchTable.vue
@@ -0,0 +1,79 @@
+<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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SearchTable"
+}
+</script>
+
+<script setup>
+import {ref} from "vue";
+import ext from '../../../config/ext.json';
+
+// 将 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 doFilter = () => {
+  if (filterText.value === '') {
+    filterData.value = data.value;
+    return;
+  }
+  filterData.value = data.value.filter(item => {
+    return item.name.toLowerCase().includes(filterText.value.toLowerCase());
+  });
+}
+</script>
+
+<style>
+.searchinput {
+  border: 1px solid var(--vp-c-divider);
+}
+</style>
diff --git a/docs/en/guide/cli-generator.md b/docs/en/guide/cli-generator.md
@@ -1,3 +1,7 @@
+---
+aside: false
+---
+
 <script setup lang="ts">
 import CliGenerator from "../../.vitepress/components/CliGenerator.vue";
 </script>
diff --git a/docs/en/guide/extensions.md b/docs/en/guide/extensions.md
@@ -1,11 +1,15 @@
+<script setup>
+import SearchTable from "../../.vitepress/components/SearchTable.vue";
+</script>
+
 # Extensions
 
 > - `yes`: supported
 > - _blank_: not supported yet, or WIP
 > - `no` with issue link: confirmed to be unavailable due to issue
 > - `partial` with issue link: supported but not perfect due to issue
 
-<!--@include: ../../extensions.md-->
+<search-table />
 
 ::: tip
 If an extension you need is missing, you can create a [Feature Request](https://github.com/crazywhalecc/static-php-cli/issues).
diff --git a/docs/zh/guide/cli-generator.md b/docs/zh/guide/cli-generator.md
@@ -1,3 +1,7 @@
+---
+aside: false
+---
+
 <script setup lang="ts">
 import CliGenerator from "../../.vitepress/components/CliGenerator.vue";
 </script>
diff --git a/docs/zh/guide/extensions.md b/docs/zh/guide/extensions.md
@@ -1,11 +1,16 @@
+<script setup>
+import SearchTable from "../../.vitepress/components/SearchTable.vue";
+</script>
+
 # 扩展列表
 
 > - `yes`: 已支持
 > - 空白: 目前还不支持，或正在支持中
 > - `no` with issue link: 确定不支持或无法支持
 > - `partial` with issue link: 已支持，但是无法完美工作
 
-<!--@include: ../../extensions.md-->
+
+<search-table />
 
 ::: tip
 如果缺少您需要的扩展，您可以创建 [功能请求](https://github.com/crazywhalecc/static-php-cli/issues)。
