From d09a3506d640b72ccbfcbf430c5b2624b269c509 Mon Sep 17 00:00:00 2001
From: dynilath <dynilath@qq.com>
Date: Sun, 23 Jun 2024 05:42:28 +0800
Subject: [PATCH] feat: add DecOctHex component for converting decimal, octal,
 and hexadecimal numbers

---
 src/.vuepress/components/DecOctHex.vue | 95 ++++++++++++++++++++++++++
 src/.vuepress/config.ts                |  1 +
 src/zh/01-hello-world/literals.md      | 74 +++++++++++++++-----
 3 files changed, 153 insertions(+), 17 deletions(-)
 create mode 100644 src/.vuepress/components/DecOctHex.vue

diff --git a/src/.vuepress/components/DecOctHex.vue b/src/.vuepress/components/DecOctHex.vue
new file mode 100644
index 00000000..5b79c88b
--- /dev/null
+++ b/src/.vuepress/components/DecOctHex.vue
@@ -0,0 +1,95 @@
+<template>
+    <div class="container">
+      <div class="input-group">
+        <label for="decimal">十进制:</label>
+        <input type="text" v-model="decimal" @input="onDecimalInput" />
+      </div>
+      <div class="input-group">
+        <label for="octal">八进制:</label>
+        <input type="text" v-model="octal" @input="onOctalInput" />
+      </div>
+      <div class="input-group">
+        <label for="hexadecimal">十六进制:</label>
+        <input type="text" v-model="hexadecimal" @input="onHexadecimalInput" />
+      </div>
+    </div>
+  </template>
+  
+<script>
+export default {
+  data() {
+    return {
+      decimal: '',
+      octal: '',
+      hexadecimal: ''
+    };
+  },
+  methods: {
+    onDecimalInput() {
+      const decimalValue = parseInt(this.decimal, 10);
+      if (!isNaN(decimalValue)) {
+        this.octal = decimalValue.toString(8);
+        this.hexadecimal = decimalValue.toString(16).toUpperCase();
+      } else {
+        this.octal = '';
+        this.hexadecimal = '';
+      }
+    },
+    onOctalInput() {
+      const octalValue = parseInt(this.octal, 8);
+      if (!isNaN(octalValue)) {
+        this.decimal = octalValue.toString(10);
+        this.hexadecimal = octalValue.toString(16).toUpperCase();
+      } else {
+        this.decimal = '';
+        this.hexadecimal = '';
+      }
+    },
+    onHexadecimalInput() {
+      const hexadecimalValue = parseInt(this.hexadecimal, 16);
+      if (!isNaN(hexadecimalValue)) {
+        this.decimal = hexadecimalValue.toString(10);
+        this.octal = hexadecimalValue.toString(8);
+      } else {
+        this.decimal = '';
+        this.octal = '';
+      }
+    }
+  }
+};
+</script>
+  
+<style scoped>
+.container {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+input {
+  margin-bottom: 10px;
+  border-radius: 0.3rem;
+  border: 1px solid var(--text-color);
+  display: inline;
+
+  width: 150px;
+}
+
+@media (max-width: 600px) {
+  .container {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .input-group {
+    width: 100%;
+    max-width: 450px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/.vuepress/config.ts b/src/.vuepress/config.ts
index 1484c50d..f4872129 100644
--- a/src/.vuepress/config.ts
+++ b/src/.vuepress/config.ts
@@ -25,6 +25,7 @@ export default defineUserConfig({
       components: {
         Choices: path.resolve(__dirname, "./components/Choices.vue"),
         ShikiRenderer: path.resolve(__dirname, "./components/ShikiRenderer.vue"),
+        DecOctHex: path.resolve(__dirname, "./components/DecOctHex.vue"),
       }
     }),
   ]
diff --git a/src/zh/01-hello-world/literals.md b/src/zh/01-hello-world/literals.md
index cc1b5638..00e92046 100644
--- a/src/zh/01-hello-world/literals.md
+++ b/src/zh/01-hello-world/literals.md
@@ -6,41 +6,81 @@ title: 1.3 字面量
 
 这里只简单介绍一下 C++ 中的字面量，更多内容，如用户定义字面量会在后续章节中详细介绍。
 
+## 整数字面量
+
+整数字面量是用于表示整数的字面量。例如，`114`、`0x114` 都是整数字面量。
+
+`114`表示整数的114，`0x114`表示十六进制的276。
+
+下列是一些常见的数字字面量写法
+
+| 源文件文本 | 含义        |
+| ---------- | ----------- |
+| `0`        | 十进制0     |
+| `114`      | 十进制114   |
+| `0x514`    | 十六进制514 |
+| `0514`     | 八进制514   |
+| `0b1010`   | 二进制1010  |
+
+:::info
+本文并不涉及二进制、八进制、十六进制的表示，读者可以自行查阅相关资料了解更多内容。
+<DecOctHex />
+:::
+
+整数字面量可能存在后缀，例如`u`、`l`、`z`，用于指定数字字面量的类型。例如，`114u`、`514l` 都是整数数字字面量。 
+
+::: info
+笼统的来说，在标识符前面加上数字，就得到了一个编译器会当做数字处理的东西。例如，`hello` 是一个标识符，而 `114hello` 编译器就会当做数字字面量处理（把hello当做后缀）。因此，你可以通过首字符是数字来判断数字字面量。
+:::
+
 ## 字符字面量
 
 字符字面量是用单引号`'`括起来的字符。例如，`'a'`、`'b'`、`'c'` 都是字符字面量。
 
 字符字面量可能存在前缀，例如`u8`、`u`、`U`、`L`，用于指定字符字面量的类型。例如，`u8'a'`、`u'a'`、`U'a'`、`L'a'` 都是字符字面量。
 
+在字符字面量中，会出现转义序列，它们是以反斜杠`\`开头的字符序列。例如，`'\n'` 表示换行符，`'\t'` 表示制表符。
+具体而言，换行符是一个字符，它的ASCII码是10。用`\n`表示换行符（两个字符，ASCII码分别是92和110），是为了方便源码的书写和阅读。这种转义序列只作用在源码中，编译后的程序中只存在转义序列对应的字符。
+
 ## 字符串字面量
 
 字符串字面量是用双引号`"`括起来的字符序列。例如，`"Hello, World!"` 是字符串字面量。
 
 类似于字符字面量，字符串字面量也可能存在前缀，例如`u8`、`u`、`U`、`L`，用于指定字符串字面量的类型。例如，`u8"Hello, World!"`、`L"Hello, World!"`、`U"Hello, World!"` 都是字符串字面量。
 
-## 数字字面量
+字符串字面量中也会出现转义序列，例如，`"Hello, World!\n"` 中，`\n`表示换行符。
 
-数字字面量是用于表示数字的字面量。例如，`114`、`5.14` 都是数字字面量。
+## 浮点数字面量
 
-`114`表示整数的114，`5.14`表示浮点数的5.14。
+浮点数字面量是用于表示浮点数的字面量。例如，`1.14`、`.514f` 都是浮点数字面量。
 
-下列是一些常见的数字字面量写法
 
-| 源文件文本 | 含义                   |
-| ---------- | ---------------------- |
-| `0`        | 十进制0                |
-| `114`      | 十进制114              |
-| `0x514`    | 十六进制514            |
-| `0514`     | 八进制514              |
-| `0b1010`   | 二进制1010             |
-| `.514`     | 十进制0.514            |
-| `5.14e2`   | 科学计数法表示的514    |
-| `5.14e-2`  | 科学计数法表示的0.0514 |
+| 源文件文本  | 含义                    |
+| ----------- | ----------------------- |
+| `.514`      | 十进制0.514             |
+| `5.14e2`    | 科学计数法表示的514     |
+| `5.14e-2`   | 科学计数法表示的0.0514  |
+| `0xC.12p+3` | 科学计数法表示的96.5625 |
 
 :::info
-本文并不涉及二进制、八进制、十六进制的表示，读者可以自行查阅相关资料了解更多内容。
+以0x或0X开头时，表示16进制小数。
+e或E后面的数字表示10的指数，p或P后面的数字表示2的指数。
 :::
 
-数字字面量可能存在后缀，例如`u`、`l`、`f`，用于指定数字字面量的类型。例如，`114u`、`514l` 都是整数数字字面量。 
+数字字面量可能存在后缀，例如`f`、`l`、`f16`，用于指定浮点数字面量的类型。例如，`1.14f`、`5.14l` 都是浮点数字面量。
+
+## 指针字面量
+
+指针字面量只有`nullptr`这一种，由`nullptr`关键字组成，用来表示空指针。
+
+
+## 快速练习
 
-笼统的来说，在标识符前面加上数字，就得到了一个编译器会当做数字处理的东西。例如，`hello` 是一个标识符，而 `114hello` 编译器就会当做数字处理（虽然这不是一个有效的数字）。因此，你可以通过首字符是数字来判断数字字面量。
+<Choices 
+    :questions="[
+        {
+            text: '下列哪些是字符字面量？',
+            options: ['\'a\'', '\'Hello, World!\'', '\'114\'', '\'0x114\'', '\'&#92;&#92;0x114\''],
+            answers: ['\'a\'', '\'&#92;&#92;0x114\'']
+        }
+    ]"/>
\ No newline at end of file