add: add item window of base

PP-binding/frontend/web/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,21 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="7">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="div" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

PP-binding/frontend/web/index.html

@@ -31,7 +31,7 @@
         </div>
 
         <div class="table-outer-scrollable-container" id="table-outer-scrollable-container">
-            <div class="table-items-container">
+            <div class="table-items-container" title="首次创建时间: 2026年01月01日&#10;最后修改时间: 2026年12月10日">
                 <div>{{手机号}}</div>
                 <div>{{12345678900}}</div>
                 <div>{{滴滴打车}}</div>
@@ -81,6 +81,54 @@
         <div class="close-button" id="add-item-dialog-close-button"></div>
         <div class="title">添加一条数据</div>
     </div>
+
+    <div class="main-container">
+        <label>
+            <div class="label">基础工具类型:</div>
+            <select name="basic-tool-type" class="form">
+                <option value="PHONE_NUMBER">手机号</option>
+                <option value="EMAIL">邮箱</option>
+                <!--TODO: 如果是软件平台，那么底下的“基础工具ID”需要分为两个输入，一个是软件名，一个是该软件的ID
+                            且下面的用户名和密码新增"跟随基础工具"的-->
+                <option value="APPLICATION">软件平台</option>
+                <option value="">无</option>
+            </select>
+        </label>
+
+        <label>
+            <div class="label">基础工具ID:</div>
+            <input class="form" type="text" placeholder="请输入ID/软件名">
+        </label>
+        <label>
+            <div class="label">绑定到:</div>
+            <input class="form" type="text" placeholder="请输入目标平台名称">
+        </label>
+        <label>
+            <div class="label">危险等级:</div>
+            <select name="danger-level" class="form">
+                <option value="0">安全</option>
+                <option value="1">中等</option>
+                <option value="2">危险</option>
+            </select>
+        </label>
+        <label>
+            <div class="label">用户名:</div>
+            <input class="form" type="text">
+        </label>
+        <label>
+            <div class="label"> 密码:</div>
+            <input class="form" id="password-field" type="text">
+        </label>
+        <label>
+            <div class="label">备注:</div>
+            <textarea class="form" maxlength="100"></textarea>
+        </label>
+        <label>
+            <div class="label">其他平台:</div>
+            <input class="form" type="text" placeholder="请输入ID/软件名">
+        </label>
+        <button id="submit-item-button">提交</button>
+    </div>
 </dialog>
 </body>
 </html>

PP-binding/frontend/web/script/index.js

@@ -1,7 +1,6 @@
 window.onload = () => {
     main()
 }
-
 function main() {
     const tableContainer = document.getElementById("table-outer-scrollable-container")
     const tableItems = tableContainer.children

PP-binding/frontend/web/style/index.css

@@ -6,6 +6,7 @@
 :root {
     --color-green: #80c671;
     --color-red: #d56161;
+    --add-item-window-title-height: 60px;
 }
 
 body {
@@ -195,7 +196,7 @@ body {
 }
 
 .add-item-dialog .title-bar-container {
-    height: 60px;
+    height: var(--add-item-window-title-height);
     background-color: #68686869;
     padding-left: 10px;
     padding-right: 10px;
@@ -222,4 +223,28 @@ body {
     position: absolute;
     left: 50%;
     transform: translate(-50%, 0%);
+    font-size: 18px;
+}
+
+.add-item-dialog .main-container {
+    width: 100%;
+    height:calc(100% - var(--add-item-window-title-height) - 10px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.add-item-dialog .main-container label{
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+.add-item-dialog .main-container label .label{
+    text-align: end;
+    flex: 1;
+}
+
+.add-item-dialog .main-container label .form{
+    flex: 1;
+    margin-left: 10px;
 }