feat: add user-agent

README.md

@@ -23,6 +23,7 @@
 - [HTML 实体转换](https://tools.yuanfen.net/entity)
 - [财富自由计算器](https://tools.yuanfen.net/financial-freedom)
 - [媒体文件元数据解析](https://tools.yuanfen.net/metadata)
+- [User Agent 解析](https://tools.yuanfen.net/user-agent)
 
 ## License
 

components/json-viewer.vue

@@ -29,7 +29,7 @@ watch(() => props.jsonString, () => {
     errorMessage.value = e.message
     jsonData.value = ''
   }
-})
+}, { immediate: true })
 </script>
 
 <template>

content/changelog.md

@@ -1,3 +1,7 @@
+#### 2024-05-29
+
+- 新增「User Agent 解析」小工具
+
 #### 2024-05-14
 
 - 新增「媒体文件元数据解析」小工具

package.json

@@ -31,6 +31,7 @@
     "mediainfo.js": "^0.2.2",
     "sortablejs": "^1.15.2",
     "sortablejs-vue3": "^1.2.11",
+    "ua-parser-js": "^1.0.38",
     "vue-codemirror": "^6.1.1",
     "vue-json-viewer": "^3.0.4"
   },
@@ -49,6 +50,7 @@
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.12.11",
     "@types/sortablejs": "^1.15.8",
+    "@types/ua-parser-js": "^0.7.39",
     "commitizen": "^4.3.0",
     "element-plus": "^2.7.2",
     "eslint": "^8.57.0",

pages/index.vue

@@ -68,6 +68,11 @@ useHead({
             媒体文件元数据解析
           </ElButton>
         </NuxtLink>
+        <NuxtLink class="tool-link" to="/user-agent">
+          <ElButton type="primary" size="large" plain round>
+            User Agent 解析
+          </ElButton>
+        </NuxtLink>
       </el-row>
     </el-card>
     <el-card>

pages/json.vue

@@ -110,7 +110,7 @@ async function handleExpandeDepthChange() {
           </el-checkbox>
         </div>
         <json-viewer
-          v-if="visible"
+          v-if="visible && jsonString"
           :json-string="jsonString"
           :sort="sort"
           :preview-mode="previewMode"

pages/user-agent.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { type IResult, UAParser } from 'ua-parser-js'
+
+const userAgentValue = ref('')
+const userAgentResult = ref<IResult>()
+const userAgentResultStr = computed(() => JSON.stringify(userAgentResult.value))
+const parser = new UAParser()
+
+useHead({
+  title: 'User Agent 解析',
+  meta: [
+    {
+      name: 'description',
+      content: '在线解析 User Agent 字符串，获取浏览器、操作系统等信息',
+    },
+  ],
+})
+
+onMounted(() => {
+  userAgentValue.value = navigator.userAgent
+  parser.setUA(userAgentValue.value)
+  userAgentResult.value = parser.getResult()
+})
+
+function onInpugChange() {
+  parser.setUA(userAgentValue.value)
+  userAgentResult.value = parser.getResult()
+}
+</script>
+
+<template>
+  <page header="User Agent 解析" class="page-user-agent-parser">
+    <div class="user-agent-input">
+      <div class="title">
+        User Agent
+      </div>
+      <el-input
+        v-model="userAgentValue"
+        placeholder="请输入 User Agent 字符串，回车确认"
+        @change="onInpugChange"
+      />
+    </div>
+
+    <div v-if="userAgentResult?.ua" class="user-agent-result">
+      <div class="title">
+        解析结果
+      </div>
+      <json-viewer
+        :json-string="userAgentResultStr"
+        :sort="false"
+        :preview-mode="true"
+      />
+    </div>
+  </page>
+</template>
+
+<style lang="scss">
+.page-user-agent-parser {
+  .title {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  .user-agent-input {
+    margin-bottom: 20px;
+    input {
+      font-size: 14px;
+      font-family: var(--code-font-family);
+    }
+  }
+  .json-viewer-wrapper {
+    border: 1px solid var(--el-border-color);
+    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+  }
+}
+</style>