Support configuration variables on Gitea Actions (#24724)

Co-Author: @silverwind @wxiaoguang 
Replace: #24404

See:
- [defining configuration variables for multiple
workflows](https://docs.github.com/en/actions/learn-github-actions/variables#defining-configuration-variables-for-multiple-workflows)
- [vars
context](https://docs.github.com/en/actions/learn-github-actions/contexts#vars-context)

Related to:
- [x] protocol: https://gitea.com/gitea/actions-proto-def/pulls/7
- [x] act_runner: https://gitea.com/gitea/act_runner/pulls/157
- [x] act: https://gitea.com/gitea/act/pulls/43

#### Screenshoot
Create Variable:

![image](https://user-images.githubusercontent.com/33891828/236758288-032b7f64-44e7-48ea-b07d-de8b8b0e3729.png)


![image](https://user-images.githubusercontent.com/33891828/236758174-5203f64c-1d0e-4737-a5b0-62061dee86f8.png)

Workflow:
```yaml
  test_vars:
    runs-on: ubuntu-latest
    steps:
      - name: Print Custom Variables
        run: echo "${{ vars.test_key }}"
      - name: Try to print a non-exist var
        run: echo "${{ vars.NON_EXIST_VAR }}"
```

Actions Log:

![image](https://user-images.githubusercontent.com/33891828/236759075-af0c5950-368d-4758-a8ac-47a96e43b6e2.png)

---
This PR just implement the org / user (depends on the owner of the
current repository) and repo level variables, The Environment level
variables have not been implemented.
Because
[Environment](https://docs.github.com/en/actions/deployment/targeting-different-environments/using-environments-for-deployment#about-environments)
is a module separate from `Actions`. Maybe it would be better to create
a new PR to do it.

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>

web_src/css/modules/modal.css

@@ -25,11 +25,15 @@
   display: inline-block;
 }
 
+.ui.modal {
+  background: var(--color-body);
+  box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow);
+}
+
 /* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly */
 
 .ui.modal > .content,
 .ui.modal > form > .content {
-  background: var(--color-body);
   padding: 1.5em;
 }
 

web_src/js/features/common-global.js

@@ -354,6 +354,57 @@ export function initGlobalLinkActions() {
   $('.link-action').on('click', linkAction);
 }
 
+function initGlobalShowModal() {
+  // A ".show-modal" button will show a modal dialog defined by its "data-modal" attribute.
+  // Each "data-modal-{target}" attribute will be filled to target element's value or text-content.
+  // * First, try to query '#target'
+  // * Then, try to query '.target'
+  // * Then, try to query 'target' as HTML tag
+  // If there is a ".{attr}" part like "data-modal-form.action", then the form's "action" attribute will be set.
+  $('.show-modal').on('click', function (e) {
+    e.preventDefault();
+    const $el = $(this);
+    const modalSelector = $el.attr('data-modal');
+    const $modal = $(modalSelector);
+    if (!$modal.length) {
+      throw new Error('no modal for this action');
+    }
+    const modalAttrPrefix = 'data-modal-';
+    for (const attrib of this.attributes) {
+      if (!attrib.name.startsWith(modalAttrPrefix)) {
+        continue;
+      }
+
+      const attrTargetCombo = attrib.name.substring(modalAttrPrefix.length);
+      const [attrTargetName, attrTargetAttr] = attrTargetCombo.split('.');
+      // try to find target by: "#target" -> ".target" -> "target tag"
+      let $attrTarget = $modal.find(`#${attrTargetName}`);
+      if (!$attrTarget.length) $attrTarget = $modal.find(`.${attrTargetName}`);
+      if (!$attrTarget.length) $attrTarget = $modal.find(`${attrTargetName}`);
+      if (!$attrTarget.length) continue; // TODO: show errors in dev mode to remind developers that there is a bug
+
+      if (attrTargetAttr) {
+        $attrTarget[0][attrTargetAttr] = attrib.value;
+      } else if ($attrTarget.is('input') || $attrTarget.is('textarea')) {
+        $attrTarget.val(attrib.value); // FIXME: add more supports like checkbox
+      } else {
+        $attrTarget.text(attrib.value); // FIXME: it should be more strict here, only handle div/span/p
+      }
+    }
+    const colorPickers = $modal.find('.color-picker');
+    if (colorPickers.length > 0) {
+      initCompColorPicker(); // FIXME: this might cause duplicate init
+    }
+    $modal.modal('setting', {
+      onApprove: () => {
+        // "form-fetch-action" can handle network errors gracefully,
+        // so keep the modal dialog to make users can re-submit the form if anything wrong happens.
+        if ($modal.find('.form-fetch-action').length) return false;
+      },
+    }).modal('show');
+  });
+}
+
 export function initGlobalButtons() {
   // There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form.
   // However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission.
@@ -391,27 +442,7 @@ export function initGlobalButtons() {
     alert('Nothing to hide');
   });
 
-  $('.show-modal').on('click', function (e) {
-    e.preventDefault();
-    const modalDiv = $($(this).attr('data-modal'));
-    for (const attrib of this.attributes) {
-      if (!attrib.name.startsWith('data-modal-')) {
-        continue;
-      }
-      const id = attrib.name.substring(11);
-      const target = modalDiv.find(`#${id}`);
-      if (target.is('input')) {
-        target.val(attrib.value);
-      } else {
-        target.text(attrib.value);
-      }
-    }
-    modalDiv.modal('show');
-    const colorPickers = $($(this).attr('data-modal')).find('.color-picker');
-    if (colorPickers.length > 0) {
-      initCompColorPicker();
-    }
-  });
+  initGlobalShowModal();
 }
 
 /**