fix:样式美化;update:0.1.1;

Author: github262302

index.html

@@ -44,6 +44,9 @@ <h3>Loading...</h3>
   .error-help {
     padding-left: 24px;
   }
+  #app{
+    background-color: #fff;
+  }
 </style>
 
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vss-task",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "authors": "github262302",
   "description": "一个小而美的任务管理工具",

src/App.tsx

@@ -3,9 +3,6 @@ import { useAppDispatch } from "@/store";
 import { update_process } from "@/store/slice/process";
 import { useEffect } from "react";
 import { onProcess } from "@/utils/process";
-import { update_project } from "@/store/slice/project";
-import { loadProjectTask } from "@/utils";
-import { useProjectStorage } from "@/utils/project";
 import { onMessage } from "@/utils/index";
 import { add_message } from "@/store/slice/message";
 import { message } from "antd";

src/add-project.tsx

@@ -55,7 +55,10 @@ function Root() {
         <Form.Item<FieldType>
           label="名称"
           name="name"
-          rules={[{ required: true, message: "请输入项目名称！" }]}
+          rules={[{ required: true, message: "请输入项目名称！" },{
+            pattern: /^[a-zA-Z0-9_-]+$/,
+            message: "项目名称只能包含字母、数字、下划线和中划线"
+          }]}
         >
           <Input />
         </Form.Item>

src/components/Project/Add.tsx

@@ -1,25 +1,11 @@
 .container{
-    display: grid;
-    gap: 12px;
+    // gap: 12px;
     box-sizing: border-box;
-    grid-template-rows: auto;
     padding: 24px;
-}
-.project-item{
-    height: 100%;
-    background-color: #A0F0A0;
-    display: grid;
-    place-items: center;
     position: relative;
-    border-radius:  8px;
-    overflow: hidden;
-    // hover  占 2row 1col  2行1列
-    &:hover{
-        grid-row: span 3 ;
-    } 
 }
 .project-item-menu{
-    background-color: #F0F0F0;
+    background-color: rgba(210, 212, 218, 0.1);
     height: 100%;
     width: 100%;
     padding: 12px;
@@ -30,7 +16,11 @@
         display: none;
     }
     color: #333;
-
+    margin-bottom: 12px;
+    overflow: hidden;
+    border-bottom-right-radius: 8px;
+    box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.2);
+    border-bottom-left-radius: 8px;
 }
 .project-item-menu-item{
     cursor: pointer;
@@ -51,4 +41,20 @@
     display: grid;
     place-items: center;
     cursor: pointer;
+}
+.project-item-title-container{
+    background-color: #fff;
+    text-align: center;
+    font-weight: bold;
+
+    box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.5);
+    position: sticky;
+    top: 0;
+    overflow: hidden;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+}
+.project-item-title{
+    padding: 4px 0;
+    background-color: rgba(210, 212, 218, 0.3);
 }

src/components/project-list/index.module.less

@@ -1,25 +1,38 @@
-import { project_data } from "@/store/slice/project";
+import { get_project_data_async, project_data } from "@/store/slice/project";
 import Styles from "./index.module.less";
-import { useAppSelector } from "@/store";
+import { useAppDispatch, useAppSelector } from "@/store";
 import { openAddProject, openTerminal, startProcessOutSide } from "@/utils";
 import { openFolder } from "@/utils/index";
 import { settings_data } from "@/store/slice/settings";
+import { ups } from "@/utils/project";
 export default function ProjectList() {
+  const dispatch = useAppDispatch();
   const pd = useAppSelector(project_data);
   const settings = useAppSelector(settings_data);
-  console.log("pd", pd);
+  const renderData = pd.slice(0);
+  renderData.sort((a, b) => {
+    return a.scripts.length - b.scripts.length;
+  });
   const addProject = () => {
     openAddProject();
   };
   const terminal = path => {
     openTerminal(path);
   };
+  const deleteProject = (name: string) => {
+    console.log("delete", name);
+    const isRemove = confirm("是否删除项目 " + name + " ?");
+    if (isRemove) {
+      ups.remove(name);
+      dispatch(get_project_data_async());
+    }
+  };
   const folder = path => {
     openFolder(path);
   };
   const startProcess = (index, data) => {
     let node = pd[index];
-    const params:startProcessOutSideParams = {
+    const params: startProcessOutSideParams = {
       cwd: node.path,
       projectName: node.name,
       scriptName: data.name,
@@ -31,10 +44,12 @@ export default function ProjectList() {
   };
   return (
     <div className={Styles["container"]}>
-      {pd.map((v, i) => {
+      {renderData.map((v, i) => {
         return (
-          <div className={Styles["project-item"]} key={i}>
-            {v.name}
+          <>
+            <div className={Styles["project-item-title-container"]}>
+              <div className={Styles["project-item-title"]}>{v.name}</div>
+            </div>
             <div className={Styles["project-item-menu"]}>
               <div
                 className={Styles["project-item-menu-item"]}
@@ -48,6 +63,10 @@ export default function ProjectList() {
                   onClick={() => folder(v.path)}
                   className="btn icon iconfont icon-folder"
                 ></i>
+                <i
+                  onClick={() => deleteProject(v.name)}
+                  className="btn icon iconfont icon-shanchu"
+                ></i>
               </div>
               {v.scripts.map((it, ii) => {
                 return (
@@ -61,7 +80,7 @@ export default function ProjectList() {
                 );
               })}
             </div>
-          </div>
+          </>
         );
       })}
       <div onClick={addProject} className={Styles["project-add"]}>