refactor(ByteToHexView): 使用 Element Plus 组件重构界面布局

- 将原始 div 结构替换为 el-main 和 el-card 组件
- 移除自定义容器样式，采用 Element Plus 默认样式
- 调整文本域边框样式从 border 改为 outline
- 禁用文本域调整大小功能
- 优化按钮状态样式过渡效果
- 移除页面底部说明区域
- 更新侧边栏菜单项路由配置为实际路径

flask-ui/src/layout/components/Sidebar/index.vue

@@ -10,20 +10,20 @@ const {isCollapse} = storeToRefs(isCollapseStore)
 <template>
   <el-aside :width="!isCollapse?'200px':'auto'">
     <el-scrollbar>
-      <el-menu default-active="2" :collapse="isCollapse" router>
-        <el-menu-item index="1" route="index">
+      <el-menu :default-active="$route.path" :collapse="isCollapse" router>
+        <el-menu-item index="/index" route="index">
           <el-icon>
             <Menu/>
           </el-icon>
           <span>首页</span>
         </el-menu-item>
-        <el-menu-item index="2" route="about">
+        <el-menu-item index="/about" route="about">
           <el-icon>
             <Menu/>
           </el-icon>
           <span>统计</span>
         </el-menu-item>
-        <el-menu-item index="3" route="byte-to-hex">
+        <el-menu-item index="/byte-to-hex" route="byte-to-hex">
           <el-icon>
             <Menu/>
           </el-icon>

flask-ui/src/views/ByteToHexView.vue

@@ -1,54 +1,53 @@
 <template>
-  <div class="container">
-    <div class="card">
-      <h1>🔑 字节对象 → Hex 密钥</h1>
-      <p class="sub">
-        将键为数字索引的 JSON 对象转换为 32 位十六进制字符串（适用于 AES‑128 密钥）
-      </p>
+  <el-main>
+    <el-card>
 
-      <label for="jsonInput">输入 JSON 对象</label>
-      <textarea
-        id="jsonInput"
-        v-model="inputText"
-        placeholder='例如：{"0":14,"1":3,"2":121,...}'
-        @keydown.ctrl.enter="performConversion"
-        @keydown.meta.enter="performConversion"
-      ></textarea>
+        <h1>🔑 字节对象 → Hex 密钥</h1>
+        <p class="sub">
+          将键为数字索引的 JSON 对象转换为 32 位十六进制字符串（适用于 AES‑128 密钥）
+        </p>
 
-      <div class="actions">
-        <button @click="performConversion">🔄 转换</button>
-        <button class="secondary" :disabled="!copyEnabled" @click="copyResult">
-          📋 复制 Hex
-        </button>
-        <span class="copy-feedback" :class="{ show: copyFeedbackVisible }"
+        <label for="jsonInput">输入 JSON 对象</label>
+        <textarea
+          id="jsonInput"
+          v-model="inputText"
+          placeholder='例如：{"0":14,"1":3,"2":121,...}'
+          @keydown.ctrl.enter="performConversion"
+          @keydown.meta.enter="performConversion"
+        ></textarea>
+
+        <div class="actions">
+          <button @click="performConversion">🔄 转换</button>
+          <button class="secondary" :disabled="!copyEnabled" @click="copyResult">
+            📋 复制 Hex
+          </button>
+          <span class="copy-feedback" :class="{ show: copyFeedbackVisible }"
           >已复制！</span
-        >
-      </div>
-
-      <div class="result-area">
-        <div class="result-label">
-          <span>转换结果</span>
+          >
         </div>
-        <div
-          class="result-box"
-          :class="resultClass"
-          v-text="resultText"
-        ></div>
-      </div>
 
-      <div class="example-hint">
-        💡 点击 <button class="link-btn" @click="loadExample">加载示例</button> 快速体验
-      </div>
-    </div>
+        <div class="result-area">
+          <div class="result-label">
+            <span>转换结果</span>
+          </div>
+          <div
+            class="result-box"
+            :class="resultClass"
+            v-text="resultText"
+          ></div>
+        </div>
 
-    <div class="footer">
-      按数字键升序取值，每个字节补零为两位十六进制
-    </div>
-  </div>
+        <div class="example-hint">
+          💡 点击
+          <button class="link-btn" @click="loadExample">加载示例</button>
+          快速体验
+        </div>
+    </el-card>
+  </el-main>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import {ref, onMounted} from 'vue'
 
 // 示例数据
 const EXAMPLE_OBJ: Record<string, number> = {
@@ -198,35 +197,16 @@ $text-gray: #6b7280;
 $border: #d1d5db;
 $radius: 16px;
 
+:deep(.el-card__body) {
+  //height: calc(100vh - 211px + 60px);
+  height: calc(100vh - 141px);
+}
+
 * {
   box-sizing: border-box;
   font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 }
 
-// 根容器：占满视口，flex列
-.container {
-  min-height: calc(100vh - 211px);
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  background: $bg;
-  padding: 20px;
-}
-
-// 卡片区域：flex:1 撑满剩余空间，居中显示
-.card {
-  background: $card-bg;
-  //max-width: 720px;
-  width: 100%;
-  border-radius: $radius;
-  //box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-  padding: 28px 32px;
-  margin: 0 auto;
-  flex: 1; // 让卡片占据尽可能多的空间，但最大宽度限制
-  align-self: center; // 水平居中
-  width: 100%;
-}
-
 h1 {
   font-size: 22px;
   font-weight: 600;
@@ -254,12 +234,13 @@ textarea {
   width: 100%;
   height: 200px;
   padding: 12px 14px;
-  border: 1px solid $border;
+  outline: 1px solid $border;
+  border: none;
   border-radius: 10px;
   font-family: 'Menlo', 'Cascadia Code', 'Consolas', monospace;
   font-size: 13px;
   line-height: 1.6;
-  resize: vertical;
+  resize: none;
   transition: border 0.2s, background 0.2s;
   background: #fafbfc;
 
@@ -296,24 +277,30 @@ button {
   &:hover {
     background: $primary-hover;
   }
+
   &:active {
     transform: scale(0.96);
   }
+
   &.secondary {
     background: #e5e7eb;
     color: $text-dark;
+
     &:hover {
       background: #d1d5db;
     }
   }
+
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     transform: none;
+
     &:hover {
       background: #e5e7eb;
     }
   }
+
   &.link-btn {
     background: none;
     border: none;
@@ -323,6 +310,7 @@ button {
     font-size: 13px;
     text-decoration: underline;
     display: inline;
+
     &:hover {
       color: $primary-hover;
       background: none;
@@ -337,6 +325,7 @@ button {
   margin-left: 12px;
   opacity: 0;
   transition: opacity 0.3s;
+
   &.show {
     opacity: 1;
   }
@@ -351,6 +340,7 @@ button {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 4px;
+
   span {
     font-weight: 500;
     font-size: 14px;
@@ -375,6 +365,7 @@ button {
     border-color: #fca5a5;
     color: #991b1b;
   }
+
   &.success {
     background: #ecfdf5;
     border-color: #6ee7b7;
@@ -386,17 +377,4 @@ button {
   color: $text-gray;
   margin-top: 6px;
 }
-
-// 底部：置于页面最底部，自动与卡片分离
-.footer {
-  margin-top: auto; // 自动推到底部
-  font-size: 13px;
-  color: #9ca3af;
-  text-align: center;
-  padding: 16px 0 8px;
-  border-top: 1px solid #e5e7eb;
-  max-width: 720px;
-  width: 100%;
-  align-self: center;
-}
 </style>