iT邦幫忙

2025 iThome 鐵人賽

DAY 13
0
生成式 AI

30 天用 Cursor 開發專案:AI 輔助程式開發實戰紀錄系列 第 13

Day 13:Cursor UI設計 — 編輯頁面

  • 分享至 

  • xImage
  •  

編輯頁面

編輯頁面不需要有右邊的導覽列 編輯頁面是獨立的排版

編輯頁面不需要有右邊的導覽列 編輯頁面是獨立的排版

image.png

image.png

image.png

看起來還非常有待加強,接下來個別修正各個條件

1. 不需要有下方的建置日期等資訊
2. 介面修改 上面導覽列 下面 就是編輯或查看 滿版 而編輯與查看 就變成三個區塊 分別為上 下左 下右

image.png

image.png

image.png

好的再來逐一修改吧~

1. 上方標題 要是頁面至中
2. 標籤 改成在模式選擇左邊新增標籤按鈕 然後可以彈跳視窗 設定標籤
3. 不需要有 編輯與預覽 標題區塊
4. 編輯應該是直接佔整個區塊 而不是 在區塊中又有一個區塊

image.png

現在問題標籤無法設定

編輯頁面
Tag 無法編輯
應該是上方的標籤按鈕 點擊後 可以看到 與新增標籤

image.png

image.png

接著就是小修一些東西

標題下方不要有標籤
有的顏色為什麼選擇完後 卻沒有顯示顏色
且選擇完顏色 因為文字是黑色 導致看不清楚
統一 文字為白色 顏色非自訂 而是有色盤選擇
管理標籤 UIUX 非常地不直覺
應該是只需要管理自己文章的標籤就好
使用一個輸入欄 右邊有新增 左邊有顏色按鈕 可以展出色盤
下方為此文章的所有Tag

image.png

結語

今天太多事情要忙了,所以就先做到這裡,單純實現HackMD的功能~

後續會繼續修改,今天就先改到這樣~

後面我還有改一個視覺化的頁面

那就敬請期待啦


上一篇
Day 12:Cursor UI設計 — 用戶筆記管理
下一篇
Day 14:Cursor UI設計 — 來做個視覺化筆記
系列文
30 天用 Cursor 開發專案:AI 輔助程式開發實戰紀錄15
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言