Merge pull request #146 from nagisa77/codex/create-about-page-inspired-by-tos

open-isle-cli/public/about/about.md

@@ -0,0 +1,5 @@
+# 关于 OpenIsle
+
+OpenIsle 是一个开放的技术与交流社区，致力于提供一个自由且友好的讨论环境。
+
+本站通过 [OpenIsle 开源项目](https://github.com/nagisa77/OpenIsle) 构建，欢迎任何人参与改进。

open-isle-cli/public/about/agreement.md

@@ -0,0 +1,5 @@
+# 用户协议
+
+1. 本站支持绝对言论自由，但用户需对自己的言论承担全部法律责任。
+2. 请勿发布违法或侵犯他人权益的内容。
+3. 维护者在法律要求或社区需要时可删除违规内容。

open-isle-cli/public/about/guideline.md

@@ -0,0 +1,5 @@
+# 创作准则
+
+- 尊重他人，文明交流。
+- 鼓励原创内容，引用请注明来源。
+- 公开发布的内容可能被他人自由引用与再传播。

open-isle-cli/public/about/privacy.md

@@ -0,0 +1,3 @@
+# 隐私政策
+
+我们仅在必要时收集最少量的数据，用于改进服务。除非法律要求，不会向第三方泄露用户信息。

open-isle-cli/src/views/AboutPageView.vue

@@ -1,17 +1,88 @@
 <template>
   <div class="about-page">
-    关于页面内容
+    <div class="about-tabs">
+      <div
+        v-for="tab in tabs"
+        :key="tab.name"
+        :class="['about-tabs-item', { selected: selectedTab === tab.name }]"
+        @click="selectTab(tab.name)"
+      >
+        <div class="about-tabs-item-label">{{ tab.label }}</div>
+      </div>
+    </div>
+    <div class="about-content" v-html="renderMarkdown(content)"></div>
   </div>
 </template>
 
 <script>
+import { ref, onMounted } from 'vue'
+import { renderMarkdown } from '../utils/markdown'
+
 export default {
-  name: 'AboutPageView'
+  name: 'AboutPageView',
+  setup() {
+    const tabs = [
+      { name: 'about', label: '关于', file: '/about/about.md' },
+      { name: 'agreement', label: '用户协议', file: '/about/agreement.md' },
+      { name: 'guideline', label: '创作准则', file: '/about/guideline.md' },
+      { name: 'privacy', label: '隐私政策', file: '/about/privacy.md' }
+    ]
+    const selectedTab = ref(tabs[0].name)
+    const content = ref('')
+
+    const loadContent = async (file) => {
+      try {
+        const res = await fetch(file)
+        if (res.ok) {
+          content.value = await res.text()
+        } else {
+          content.value = '# 内容加载失败'
+        }
+      } catch (e) {
+        content.value = '# 内容加载失败'
+      }
+    }
+
+    const selectTab = (name) => {
+      selectedTab.value = name
+      const tab = tabs.find(t => t.name === name)
+      if (tab) loadContent(tab.file)
+    }
+
+    onMounted(() => {
+      loadContent(tabs[0].file)
+    })
+
+    return { tabs, selectedTab, content, renderMarkdown, selectTab }
+  }
 }
 </script>
 
 <style scoped>
 .about-page {
   padding: 20px;
+  max-width: var(--page-max-width);
+  margin: 0 auto;
+}
+
+.about-tabs {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #e0e0e0;
+  margin-bottom: 20px;
+}
+
+.about-tabs-item {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.about-tabs-item.selected {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
+
+.about-content {
+  line-height: 1.6;
 }
 </style>