feat: 文档更新

Signed-off-by: Tenny <joel.shu@qq.com>
DvShu · Jan 21, 2024 · d447376 · d447376
1 parent 3aa6a5c
commit d447376
Show file tree

Hide file tree

Showing 18 changed files with 519 additions and 52 deletions.
diff --git a/public/assets/prism.css b/public/assets/prism.css
diff --git a/public/assets/prism.js b/public/assets/prism.js
diff --git a/scripts/index.js b/scripts/index.js
@@ -66,30 +66,24 @@ async function createComponentTemplate(name) {
 async function createDocTemplate(name) {
 	// 生成文档组件模板
 	const docTemplateContents = [
-		"<template>",
-		`\t<div id="${name}" class="doc-wrapper">`,
-		'\t\t<div class="doc-main"></div>',
-		'\t\t<CodePreview title="介绍"></CodePreview>',
+		`<div id="${name}" class="doc-wrapper">`,
+		`\t<div class="nt-scrollbar doc-main">`,
+		"\t\t<h2>主题定制</h2>",
+		"\t\t<h3>样式变量</h3>",
+		"\t\t<p>组件提供了下列 CSS 变量，可用于自定义样式，</p>",
+		'\t\t<table class="nt-table">',
+		"\t\t\t<thead><tr><th>名称</th><th>描述</th><th>默认值</th></tr></thead>",
+		"\t\t\t<tbody>",
+		"\t\t\t\t<tr><td>--nt-</td><td></td>css变量<td></td>0</tr>",
+		"\t\t\t</tbody>",
+		"\t\t</table>",
 		"\t</div>",
-		"</template>",
-		'<script setup lang="ts">',
-		"import CodePreview from '../app_components/CodePreview.vue';",
-		"</script>",
+		"</div>",
 	];
 	await write(
-		path.join(srcPath, "views", `${name}.vue`),
+		path.join(srcPath, "views", `${name}.html`),
 		docTemplateContents.join("\r\n"),
 	);
-
-	// 引入生成
-	let oldApp = await readFile(path.join(srcPath, "App.vue"), "utf-8");
-	oldApp = oldApp
-		.replace(
-			"/* regist:auto_add */",
-			`import ${name} from './views/${name}.vue';\r\n/* regist:auto_add */`,
-		)
-		.replace("</main>", `\t<${name} />\r\n\t\t\t</main>`);
-	await write(path.join(srcPath, "App.vue"), oldApp);
 }
 
 (async () => {

diff --git a/src/App.vue b/src/App.vue
@@ -2,14 +2,14 @@
 import { onMounted, ref, nextTick } from 'vue';
 import GiteeIcon from './app_components/GiteeIcon.vue';
 import GithubIcon from './app_components/GithubIcon.vue';
-import { MaskCloseIcon, SearchIcon, Input, vClickoutside } from './index';
+import { MaskCloseIcon, SearchIcon, Input, vClickoutside, Table } from './index';
 import asids from './asides';
 import type { AsideItem } from './asides';
 import { debounce } from 'ph-utils/web';
 
 const searchText = ref('');
 const searchResultList = ref<AsideItem[]>([]);
-const activeAside = ref('introduce');
+const activeAside = ref('css_util');
 const $container = ref<HTMLElement>();
 
 const modules = import.meta.glob('./views/*.html', { as: 'raw' });
@@ -23,15 +23,14 @@ function loadModule() {
       return nextTick();
     })
     .then(() => {
-      window.Prism.highlightAll(true);
+      window.Prism.highlightAll();
     });
 }
 
 function doSearch() {
   if (searchText.value === '') {
     searchResultList.value = [];
   } else {
-    console.log(searchText.value);
     const searchReg = new RegExp(searchText.value, 'i');
     searchResultList.value = asids.filter(
       (item) => searchReg.test(item.name) || searchReg.test(item.text),
@@ -104,9 +103,7 @@ onMounted(() => {
                   :key="aside.name"
                   @click="handleSearchItem(aside.name)"
                 >
-                  <span v-if="aside.showName"
-                    >{{ aside.name }}&nbsp;-&nbsp;</span
-                  >
+                  <span v-if="aside.showName">{{ aside.name }} - </span>
                   <span>{{ aside.text }}</span>
                 </li>
               </ul>
@@ -184,14 +181,24 @@ p {
   padding: 0 40px;
   list-style: circle;
 }
-#app {
-  height: 100%;
 
-  .app-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.pc-doc-previewer {
+  display: flex;
+  align-items: stretch;
+}
+.pc-doc,
+.pc-previewer {
+  width: calc((100% - 30px) / 2);
+}
+.pc-previewer {
+  margin-left: 30px;
+  .nt-container {
+    border: 1px solid #dedede;
+    height: 100%;
   }
+}
+#app {
+  height: 100%;
 
   .app-header-right,
   .app-header-left {

diff --git a/src/asides.ts b/src/asides.ts
@@ -16,10 +16,25 @@ const asids: AsideItem[] = [
     showName: false,
     text: '快速上手',
   },
+  {
+    name: 'reset',
+    showName: false,
+    text: '样式重置',
+  },
+  {
+    name: 'css_util',
+    showName: false,
+    text: '工具样式',
+  },
   {
     name: '---',
     text: '',
     showName: false,
   },
+  {
+    name: 'Container',
+    showName: true,
+    text: '容器布局',
+  },
 ];
 export default asids;
diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -0,0 +1,2 @@
+<template></template>
+<script setup lang="ts"></script>
diff --git a/src/index.ts b/src/index.ts
@@ -3,3 +3,4 @@ export { default as MaskCloseIcon } from "./components/MaskCloseIcon.vue";
 export { default as SearchIcon } from "./components/SearchIcon.vue";
 export { default as Input } from "./components/Input.vue";
 export { default as vClickoutside } from "./directives/clickoutside";
+export { default as Table } from "./components/Table.vue"
diff --git a/src/main.ts b/src/main.ts
@@ -1,11 +1,12 @@
 import { createApp } from 'vue';
 import '../style/reset.css';
 import '../style/vars.css';
-import '../style/layout.css';
+import '../style/container.css';
 import '../style/icon/index.css';
 import '../style/input/index.css';
 import '../style/util/transition.css';
 import '../style/util/scrollbar.css';
+import '../style/table/index.css';
 import App from './App.vue';
 
 createApp(App).mount('#app');
diff --git a/src/views/Container.html b/src/views/Container.html
@@ -0,0 +1,187 @@
+<div id="Container" class="doc-wrapper">
+  <div class="nt-scrollbar doc-main">
+    <p>
+      容器布局，采用了 flex
+      布局，一般用于后台管理项目的一些常用排版，方便快速搭建页面的基本结构：
+    </p>
+    <ul class="ul-list">
+      <li>
+        nt-container：外层容器，一般用于 section
+        标签，基本排版为水平左右排列，可以通过设置 nt-layou-verticle
+        调整为垂直上下排列。可以嵌套
+      </li>
+      <li>nt-header：顶栏容器，一般用于 header 标签。</li>
+      <li>nt-aside: 侧边栏容器，一般用于 aside 标签。</li>
+      <li>nt-main: 主要区域容器，一般用于 main 标签。</li>
+      <li>nt-footer: 底部，一般用于 footer 标签。</li>
+    </ul>
+    <p>通常在做后台管理系统的首页排版上</p>
+    <h2>引入</h2>
+    <p>由于使用不是特别频繁，所以没有封装为组件</p>
+    <p>样式需要单独引入</p>
+    <pre><code class="language-js">import 'neatui-vue/style/container.css'</code></pre>
+    <p>在使用时，需要手动引入</p>
+    <h2>常见布局</h2>
+    <h3>1. 上下两栏排版</h3>
+    <div class="pc-doc-previewer">
+      <div class="pc-doc">
+        <script type="text/plain" class="language-html">
+          <section class="nt-container nt-layout-vertical">
+            <header class="nt-header">Header</header>
+            <main class="nt-main">Main</main>
+          </section>
+        </script>
+      </div>
+      <div class="pc-previewer">
+        <section class="nt-container nt-layout-vertical">
+          <header class="nt-header">Header</header>
+          <main class="nt-main">Main</main>
+        </section>
+      </div>
+    </div>
+    <h3>2. 左右两列布局</h3>
+    <div class="pc-doc-previewer">
+      <div class="pc-doc">
+        <script type="text/plain" class="language-html">
+          <section class="nt-container">
+            <aside class="nt-aside">Aside</aside>
+            <main class="nt-main">Main</main>
+          </section>
+        </script>
+      </div>
+      <div class="pc-previewer">
+        <section class="nt-container">
+          <aside class="nt-aside">Aside</aside>
+          <main class="nt-main">Main</main>
+        </section>
+      </div>
+    </div>
+    <h3>3. 上下两栏，下栏又包含左右两列排版</h3>
+    <div class="pc-doc-previewer">
+      <div class="pc-doc">
+        <script type="text/plain" class="language-html">
+          <section class="nt-container nt-layout-vertical">
+            <header class="nt-header">Header</header>
+            <section class="nt-container">
+              <aside class="nt-aside">Aside</aside>
+              <main class="nt-main">Main</main>
+            </section>
+          </section>
+        </script>
+      </div>
+      <div class="pc-previewer">
+        <section class="nt-container nt-layout-vertical">
+          <header class="nt-header">Header</header>
+          <section class="nt-container">
+            <aside class="nt-aside">Aside</aside>
+            <main class="nt-main">Main</main>
+          </section>
+        </section>
+      </div>
+    </div>
+    <h3>4. 后台管理系统模板</h3>
+    <p>
+      在 header 里面放点东西就成了，就成了经典的后台管理系统的模板,
+      左右是图标，右边是登录用户
+    </p>
+    <div class="pc-doc-previewer">
+      <div class="pc-doc">
+        <script type="text/plain" class="language-html">
+          <section class="nt-container nt-layout-vertical">
+            <header class="nt-header">
+              <a href="#">NEATUI</a>
+              <div>登录用户</div>
+            </header>
+            <section class="nt-container">
+              <aside class="nt-aside">Aside</aside>
+              <main class="nt-main">Main</main>
+            </section>
+          </section>
+        </script>
+      </div>
+      <div class="pc-previewer">
+        <section class="nt-container nt-layout-vertical">
+          <header class="nt-header">
+            <a href="#">NEATUI</a>
+            <div>admin</div>
+          </header>
+          <section class="nt-container">
+            <aside class="nt-aside">Aside</aside>
+            <main class="nt-main">Main</main>
+          </section>
+        </section>
+      </div>
+    </div>
+    <h3>5. 左右两列，右边又包含上下两栏排版</h3>
+    <div class="pc-doc-previewer">
+      <div class="pc-doc">
+        <script type="text/plain" class="language-html">
+          <section class="nt-container">
+            <aside class="nt-aside">Aside</aside>
+            <section class="nt-container nt-layout-vertical">
+              <header class="nt-header">Header</header>
+              <main class="nt-main">Main</main>
+            </section>
+          </section>
+        </script>
+      </div>
+      <div class="pc-previewer">
+        <section class="nt-container">
+          <aside class="nt-aside">Aside</aside>
+          <section class="nt-container nt-layout-vertical">
+            <header class="nt-header">Header</header>
+            <main class="nt-main">Main</main>
+          </section>
+        </section>
+      </div>
+    </div>
+    <h3>6. 上中下三栏</h3>
+    <div class="pc-doc-previewer">
+      <div class="pc-doc">
+        <script type="text/plain" class="language-html">
+          <section class="nt-container nt-layout-vertical">
+            <header class="nt-header">Header</header>
+            <main class="nt-main">Main</main>
+            <footer class="nt-footer">Footer</footer>
+          </section>
+        </script>
+      </div>
+      <div class="pc-previewer">
+        <section class="nt-container nt-layout-vertical">
+          <header class="nt-header">Header</header>
+          <main class="nt-main">Main</main>
+          <footer class="nt-footer">Footer</footer>
+        </section>
+      </div>
+    </div>
+    <h2>主题定制</h2>
+    <h3>样式变量</h3>
+    <p>组件提供了下列 CSS 变量，可用于自定义样式，</p>
+    <table class="nt-table">
+      <thead>
+        <tr>
+          <th>名称</th>
+          <th>描述</th>
+          <th>默认值</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>--nt-header-height</td>
+          <td>header高度</td>
+          <td>50px</td>
+        </tr>
+        <tr>
+          <td>--nt-footer-height</td>
+          <td>footer高度</td>
+          <td>var(--nt-header-height, 50px)</td>
+        </tr>
+        <tr>
+          <td>--nt-aside-width</td>
+          <td>侧边栏宽度</td>
+          <td>240px</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<template></template>
		<script setup lang="ts"></script>